studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️(docs) various update for storybook

Browse Source 
Color fixes due to new tokens architecture and few rewords.
This commit is contained in:
Nathan Vasse
2025-09-23 15:19:58 +02:00
committed by NathanVss
parent 2e1f28f5ec
commit 33c5866c28
12 changed files with 201 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
packages/react/.storybook/themes.ts
View File

@@ -1,68 +1,68 @@
import { create } from '@storybook/theming';
import { tokens } from '../src/cunningham-tokens';
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",
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
//
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,
// 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
// 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
};
}
// 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'),
}),
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'
dark = "dark",
default = "default",
}
export const BACKGROUND_COLOR_TO_THEME = {
'#181B24': Themes.dark,
"#181B24": Themes.dark,
};
export const getThemeFromGlobals = (globals: any): string => {
const color = BACKGROUND_COLOR_TO_THEME[globals.backgrounds?.value];
return color ?? Themes.default;
const color = BACKGROUND_COLOR_TO_THEME[globals.backgrounds?.value];
return color ?? Themes.default;
};