69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
import { create } from '@storybook/theming';
|
|
import { tokens } from '../src/cunningham-tokens';
|
|
|
|
|
|
const buildTheme = (colors: typeof tokens.themes.default.contextuals & any, type: 'default' | 'dark' = 'default') => {
|
|
return {
|
|
brandUrl: 'https://github.com/openfun/cunningham',
|
|
brandImage: 'logo-cunningham.svg',
|
|
brandTitle: 'Cunningham',
|
|
brandTarget: '_self',
|
|
|
|
//
|
|
colorPrimary: colors.content.semantic.brand.primary, // content.brand.primary
|
|
colorSecondary: type === 'dark' ? colors.content.semantic.contextual.primary : colors.content.semantic.brand.secondary, // content.brand.secondary
|
|
|
|
// UI
|
|
appBg: colors.background.surface.secondary, // background.surface.tertiary
|
|
appContentBg: colors.background.surface.tertiary, // background.surface.primary
|
|
appBorderColor: colors.border.surface.primary, // border.surface.primary
|
|
appBorderRadius: 4,
|
|
|
|
// Text colors
|
|
textColor: colors.content.semantic.neutral.primary, // content.neutral.primary
|
|
textInverseColor: colors.content.semantic.neutral.secondary, // content.neutral.secondary
|
|
|
|
// Toolbar default and active colors
|
|
barTextColor: colors.content.semantic.neutral.tertiary, // content.neutral.tertiary
|
|
barSelectedColor: colors.content.semantic.neutral.primary, // content.neutral.primary
|
|
barBg: colors.background.surface.primary, // background.surface.primary
|
|
|
|
// Form colors
|
|
inputBg: colors.background.surface.primary, // background.surface.primary
|
|
inputBorder: colors.border.semantic.neutral.secondary, // border.neutral.secondary
|
|
inputTextColor: colors.content.semantic.neutral.primary, // content.neutral.primary
|
|
inputBorderRadius: 2,
|
|
|
|
// Code preview colors
|
|
codeBg: colors.background.surface.secondary, // background.surface.secondary
|
|
codeColor: colors.content.semantic.neutral.primary, // content.neutral.primary
|
|
};
|
|
}
|
|
|
|
|
|
|
|
export const themes = {
|
|
default: create({
|
|
base: 'light',
|
|
...buildTheme(tokens.themes.default.contextuals),
|
|
}),
|
|
dark: create({
|
|
base: 'dark',
|
|
...buildTheme(tokens.themes.dark.contextuals, 'dark'),
|
|
}),
|
|
};
|
|
|
|
export enum Themes {
|
|
dark = 'dark',
|
|
default = 'default'
|
|
}
|
|
|
|
export const BACKGROUND_COLOR_TO_THEME = {
|
|
'#181B24': Themes.dark,
|
|
};
|
|
|
|
export const getThemeFromGlobals = (globals: any): string => {
|
|
const color = BACKGROUND_COLOR_TO_THEME[globals.backgrounds?.value];
|
|
return color ?? Themes.default;
|
|
};
|