69 lines
2.3 KiB
TypeScript
69 lines
2.3 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: 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;
|
|
};
|