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

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.

packages/react/.storybook/preview-head.html

@@ -15,11 +15,11 @@
 
     .cunningham-theme--dark {
       .docblock-source {
-          background-color: var(--c--theme--colors--greyscale-100);
+          background-color: var(--c--globals--colors--gray-100);
       }
 
       .prismjs {
-          background-color: var(--c--theme--colors--greyscale-100) !important;
+          background-color: var(--c--globals--colors--gray-100) !important;
       }
     }
 </style>

packages/react/.storybook/preview.tsx

@@ -1,75 +1,82 @@
-import '../src/icons.scss';
+import "../src/icons.scss";
-import '../src/index.scss';
+import "../src/index.scss";
-import '../src/fonts.scss';
+import "../src/fonts.scss";
-import { Preview } from '@storybook/react';
+import { Preview } from "@storybook/react";
-import { DocsContainer } from '@storybook/blocks';
+import { DocsContainer } from "@storybook/blocks";
 
-import { CunninghamProvider } from ':/components/Provider';
+import { CunninghamProvider } from "../src/components/Provider";
-import {BACKGROUND_COLOR_TO_THEME, getThemeFromGlobals, Themes, themes} from './themes';
+import {
+  BACKGROUND_COLOR_TO_THEME,
+  getThemeFromGlobals,
+  themes,
+} from "./themes";
+import React from "react";
 
 export const DocsWithTheme = (props, context) => {
-    const theme = getThemeFromGlobals(props.context.store.userGlobals.globals);
+  const theme = getThemeFromGlobals(props.context.store.userGlobals.globals);
-    return <CunninghamProvider theme={theme}>
+  return (
-        <DocsContainer {...props} theme={themes[theme]} />
+    <CunninghamProvider theme={theme}>
-    </CunninghamProvider>;
+      <DocsContainer {...props} theme={themes[theme]} />
+    </CunninghamProvider>
+  );
 };
 
 const preview: Preview = {
-    decorators: [
+  decorators: [
-        (Story, context) => (
+    (Story, context) => (
-          <CunninghamProvider theme={getThemeFromGlobals(context.globals)}>
+      <CunninghamProvider theme={getThemeFromGlobals(context.globals)}>
-              <Story />
+        <Story />
-          </CunninghamProvider>
+      </CunninghamProvider>
-        ),
+    ),
-    ],
+  ],
-    parameters: {
+  parameters: {
-        backgrounds: {
+    backgrounds: {
-            default: null,
+      default: null,
-            values: Object.entries(BACKGROUND_COLOR_TO_THEME).map(value => ({
+      values: Object.entries(BACKGROUND_COLOR_TO_THEME).map((value) => ({
-                name: value[1],
+        name: value[1],
-                value: value[0],
+        value: value[0],
-            })),
+      })),
-        },
-        controls: {
-            matchers: {
-                color: /(background|color)$/i,
-                date: /Date$/,
-            },
-        },
-        docs: {
-            container: DocsWithTheme,
-        },
-        options: {
-            storySort: (a, b) => {
-                const roots = ['Getting Started', 'Components', 'Migrating'];
-                const gettingStartedOrder = [
-                    'Installation',
-                    'First steps',
-                    'Customization',
-                    'Theming',
-                    'Colors',
-                    'Spacings',
-                    'Typography',
-                ];
-
-                const aParts = a.title.split('/');
-                const bParts = b.title.split('/');
-                if (aParts[0] !== bParts[0]) {
-                    return roots.indexOf(aParts[0]) - roots.indexOf(bParts[0]);
-                }
-                if (aParts[1] !== bParts[1]) {
-                    if (aParts[0] === 'Getting Started') {
-                        return (
-                          gettingStartedOrder.indexOf(aParts[1]) -
-                          gettingStartedOrder.indexOf(bParts[1])
-                        );
-                    }
-                    return aParts[1].localeCompare(bParts[1]);
-                }
-                return 0;
-            },
-        },
     },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      container: DocsWithTheme,
+    },
+    options: {
+      storySort: (a, b) => {
+        const roots = ["Getting Started", "Components", "Migrating"];
+        const gettingStartedOrder = [
+          "Installation",
+          "First steps",
+          "Customization",
+          "Theming",
+          "Colors",
+          "Spacings",
+          "Typography",
+        ];
+
+        const aParts = a.title.split("/");
+        const bParts = b.title.split("/");
+        if (aParts[0] !== bParts[0]) {
+          return roots.indexOf(aParts[0]) - roots.indexOf(bParts[0]);
+        }
+        if (aParts[1] !== bParts[1]) {
+          if (aParts[0] === "Getting Started") {
+            return (
+              gettingStartedOrder.indexOf(aParts[1]) -
+              gettingStartedOrder.indexOf(bParts[1])
+            );
+          }
+          return aParts[1].localeCompare(bParts[1]);
+        }
+        return 0;
+      },
+    },
+  },
 };
 
 export default preview;

packages/react/.storybook/themes.ts

@@ -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'],
+        colorPrimary: '#20467F', // content.brand.primary
-        colorSecondary: colors['primary-400'],
+        colorSecondary: '#0659C5', // content.brand.secondary
 
         // UI
-        appBg: colors['greyscale-100'],
+        // appBg: '#F7F8F8', // background.surface.tertiary
-        appContentBg: colors['greyscale-000'],
+        appContentBg: '#FFFFFF', // background.surface.primary
-        appBorderColor: colors['greyscale-300'],
+        appBorderColor: '#E1E2E5', // border.surface.primary
         appBorderRadius: 4,
 
         // Text colors
-        textColor: colors['greyscale-900'],
+        textColor: '#252627', // content.neutral.primary
-        textInverseColor: colors['greyscale-000'],
+        textInverseColor: '#5C5F63', // content.neutral.secondary
 
         // Toolbar default and active colors
-        barTextColor: colors['greyscale-500'],
+        barTextColor: '#74777C', // content.neutral.tertiary
-        barSelectedColor: colors['greyscale-900'],
+        barSelectedColor: '#252627', // content.neutral.primary
-        barBg: colors['greyscale-000'],
+        barBg: '#FFFFFF', // background.surface.primary
 
         // Form colors
-        inputBg: colors['greyscale-000'],
+        inputBg: '#FFFFFF', // background.surface.primary
-        inputBorder: colors['greyscale-300'],
+        inputBorder: '#A7ACB2', // border.neutral.secondary
-        inputTextColor: colors['greyscale-800'],
+        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 => {