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

🎨(react) update storybook theme colors and refactor theme structure

Browse Source 
This commit updates the theme colors in the Storybook configuration to
use the new global color definitions. The changes include replacing
greyscale colors with their corresponding gray colors for consistency.
Additionally, the theme structure has been refactored to align with the
updated token architecture, enhancing maintainability and ensuring a
cohesive design system across the application.
This commit is contained in:
Nathan Panchout
2025-08-22 10:09:43 +02:00
committed by NathanVss
parent 146a8a20b3
commit afb313fee0
7 changed files with 2484 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,6 @@
import { create } from '@storybook/theming';
import { tokens } from '../src/cunningham-tokens';
const buildTheme = (colors: typeof tokens.themes.default.theme.colors & any) => {
const buildLightTheme = () => {
return {
brandUrl: 'https://github.com/openfun/cunningham',
brandImage: 'logo-cunningham.svg',
@@ -9,40 +8,74 @@ const buildTheme = (colors: typeof tokens.themes.default.theme.colors & any) =>
brandTarget: '_self',
//
colorPrimary: colors['primary-400'],
colorSecondary: colors['primary-400'],
colorPrimary: '#20467F', // content.brand.primary
colorSecondary: '#0659C5', // content.brand.secondary
// UI
appBg: colors['greyscale-100'],
appContentBg: colors['greyscale-000'],
appBorderColor: colors['greyscale-300'],
// appBg: '#F7F8F8', // background.surface.tertiary
appContentBg: '#FFFFFF', // background.surface.primary
appBorderColor: '#E1E2E5', // border.surface.primary
appBorderRadius: 4,
// Text colors
textColor: colors['greyscale-900'],
textInverseColor: colors['greyscale-000'],
textColor: '#252627', // content.neutral.primary
textInverseColor: '#5C5F63', // content.neutral.secondary
// Toolbar default and active colors
barTextColor: colors['greyscale-500'],
barSelectedColor: colors['greyscale-900'],
barBg: colors['greyscale-000'],
barTextColor: '#74777C', // content.neutral.tertiary
barSelectedColor: '#252627', // content.neutral.primary
barBg: '#FFFFFF', // background.surface.primary
// Form colors
inputBg: colors['greyscale-000'],
inputBorder: colors['greyscale-300'],
inputTextColor: colors['greyscale-800'],
inputBg: '#FFFFFF', // background.surface.primary
inputBorder: '#A7ACB2', // border.neutral.secondary
inputTextColor: '#252627', // content.neutral.primary
inputBorderRadius: 2,
};
};
const buildDarkTheme = () => {
return {
brandUrl: 'https://github.com/openfun/cunningham',
brandImage: 'logo-cunningham.svg',
brandTitle: 'Cunningham',
brandTarget: '_self',
//
colorPrimary: '#EAF1FB', // content.brand.primary
colorSecondary: '#D5E4F7', // content.brand.secondary
// UI
appBg: '#222631', // background.surface.tertiary
appContentBg: '#181B24', // background.surface.primary
appBorderColor: '#3A3B3E', // border.surface.primary
appBorderRadius: 4,
// Text colors
// textColor: '#F0F1F2', // content.neutral.primary
// textInverseColor: '#E1E2E5', // content.neutral.secondary
// Toolbar default and active colors
// barTextColor: '#B5B9BE', // content.neutral.tertiary
// barSelectedColor: '#F0F1F2', // content.neutral.primary
barBg: '#222631', // background.surface.primary
// Form colors
// inputBg: '#2F3033', // background.surface.primary
// inputBorder: '#5C5F63', // border.neutral.secondary
// inputTextColor: '#F0F1F2', // content.neutral.primary
// inputBorderRadius: 2,
};
};
export const themes = {
default: create({
base: 'light',
...buildTheme(tokens.themes.default.theme.colors),
// ...buildLightTheme(),
}),
dark: create({
base: 'dark',
...buildTheme(tokens.themes.dark.theme.colors),
...buildDarkTheme(),
}),
};
@@ -52,7 +85,7 @@ export enum Themes {
}
export const BACKGROUND_COLOR_TO_THEME = {
'#0C1A2B': Themes.dark,
'#181B24': Themes.dark,
};
export const getThemeFromGlobals = (globals: any): string => {