b94abbd6b3
We want to be able to visualize easily themes directly inside Storybook. This was not a trivial task as there is no centralized logic to handle Doc / Stories / Manager at the same time.
62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import { create } from '@storybook/theming';
|
|
import { tokens } from '../src/cunningham-tokens';
|
|
|
|
const buildTheme = (colors: typeof tokens.themes.default.theme.colors & any) => {
|
|
return {
|
|
brandUrl: 'https://github.com/openfun/cunningham',
|
|
brandImage: 'logo-cunningham.svg',
|
|
brandTitle: 'Cunningham',
|
|
brandTarget: '_self',
|
|
|
|
//
|
|
colorPrimary: colors['primary-400'],
|
|
colorSecondary: colors['primary-400'],
|
|
|
|
// UI
|
|
appBg: colors['greyscale-100'],
|
|
appContentBg: colors['greyscale-000'],
|
|
appBorderColor: colors['greyscale-300'],
|
|
appBorderRadius: 4,
|
|
|
|
// Text colors
|
|
textColor: colors['greyscale-900'],
|
|
textInverseColor: colors['greyscale-000'],
|
|
|
|
// Toolbar default and active colors
|
|
barTextColor: colors['greyscale-500'],
|
|
barSelectedColor: colors['greyscale-900'],
|
|
barBg: colors['greyscale-000'],
|
|
|
|
// Form colors
|
|
inputBg: colors['greyscale-000'],
|
|
inputBorder: colors['greyscale-300'],
|
|
inputTextColor: colors['greyscale-800'],
|
|
inputBorderRadius: 2,
|
|
};
|
|
};
|
|
|
|
export const themes = {
|
|
default: create({
|
|
base: 'light',
|
|
...buildTheme(tokens.themes.default.theme.colors),
|
|
}),
|
|
dark: create({
|
|
base: 'dark',
|
|
...buildTheme(tokens.themes.dark.theme.colors),
|
|
}),
|
|
};
|
|
|
|
export enum Themes {
|
|
dark = 'dark',
|
|
default = 'default'
|
|
}
|
|
|
|
export const BACKGROUND_COLOR_TO_THEME = {
|
|
'#0C1A2B': Themes.dark,
|
|
};
|
|
|
|
export const getThemeFromGlobals = (globals: any): string => {
|
|
const color = BACKGROUND_COLOR_TO_THEME[globals.backgrounds?.value];
|
|
return color ?? Themes.default;
|
|
};
|