6097929593
This repository has been recently transfered from openfun to lasuitenumerique. We need to fix some paths and urls especially to fix documentation and README
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/suitenumerique/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;
|
|
};
|