From 33c5866c28df224cd0696d78f29ee8fc52cb6dff Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Tue, 23 Sep 2025 15:19:58 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(docs)=20various=20update=20f?=
 =?UTF-8?q?or=20storybook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Color fixes due to new tokens architecture and few rewords.
---
 packages/react/.storybook/preview-head.html   |  39 ++++---
 packages/react/.storybook/themes.ts           |  98 ++++++++--------
 .../Examples/EdgeCases/index.stories.tsx      |   6 +-
 .../Examples/ReactHookForm/Login.stories.tsx  |   7 +-
 .../Examples/ReactHookForm/Sports.stories.tsx |   6 +-
 .../Forms/Examples/index.stories.tsx          |  33 ++++--
 .../Forms/LabelledBox/index.stories.tsx       |   8 +-
 packages/react/src/docs/colors.stories.tsx    |   4 +-
 .../docs/migrating/2_migrating_v3_to_v4.mdx   | 109 ++++++++++--------
 packages/react/src/docs/spacings.stories.tsx  |  12 +-
 packages/react/src/docs/typo.mdx              |  24 ++--
 packages/react/src/docs/typo.stories.tsx      |  15 ++-
 12 files changed, 201 insertions(+), 160 deletions(-)

diff --git a/packages/react/.storybook/preview-head.html b/packages/react/.storybook/preview-head.html
index d1bf856..2965e7c 100644
--- a/packages/react/.storybook/preview-head.html
+++ b/packages/react/.storybook/preview-head.html
@@ -1,25 +1,26 @@
 <style>
-    code {
-        margin: 0 2px;
-        padding: 3px 5px;
-        white-space: nowrap;
-        border-radius: 3px;
-        border: 1px solid #EEEEEE;
-        color: rgba(51,51,51,0.9);
-        background-color: #F8F8F8;
-    }
-    /* Prevent the index.scss font-family to override code blocks's one. */
-    pre * {
-        font-family: ui-monospace,Menlo,Monaco,"Roboto Mono","Oxygen Mono","Ubuntu Monospace","Source Code Pro","Droid Sans Mono","Courier New",monospace;
-    }
+  code {
+    margin: 0 2px;
+    padding: 3px 5px;
+    white-space: nowrap;
+    border-radius: 3px;
+    border: 1px solid #eeeeee;
+    color: rgba(51, 51, 51, 0.9);
+    background-color: #f8f8f8;
+  }
+  /* Prevent the index.scss font-family to override code blocks's one. */
+  pre * {
+    font-family:
+      ui-monospace, Menlo, Monaco, "Roboto Mono", "Oxygen Mono",
+      "Ubuntu Monospace", "Source Code Pro", "Droid Sans Mono", "Courier New",
+      monospace;
+  }
 
-    .cunningham-theme--dark {
-      
-
-      .prismjs {
-          background-color: var(--c--globals--colors--gray-800) !important;
-      }
+  .cunningham-theme--dark {
+    .prismjs {
+      background-color: var(--c--globals--colors--gray-800) !important;
     }
+  }
 </style>
 <script>
   window.global = window;
diff --git a/packages/react/.storybook/themes.ts b/packages/react/.storybook/themes.ts
index 743983a..d3deffb 100644
--- a/packages/react/.storybook/themes.ts
+++ b/packages/react/.storybook/themes.ts
@@ -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;
 };
diff --git a/packages/react/src/components/Forms/Examples/EdgeCases/index.stories.tsx b/packages/react/src/components/Forms/Examples/EdgeCases/index.stories.tsx
index b56a236..bf6abbb 100644
--- a/packages/react/src/components/Forms/Examples/EdgeCases/index.stories.tsx
+++ b/packages/react/src/components/Forms/Examples/EdgeCases/index.stories.tsx
@@ -64,7 +64,9 @@ export const OverflowLabels = () => {
           <Input label={"City" + overflow} fullWidth={true} />
         </div>
         <div>
-          <div className="fs-l clr-gray-800 mb-t">Your curriculum vitae</div>
+          <div className="fs-l clr-content-semantic-neutral-primary mb-t">
+            Your curriculum vitae
+          </div>
           <FileUploader
             fullWidth={true}
             text="pdf only ( 4mb maximum )"
@@ -79,7 +81,7 @@ export const OverflowLabels = () => {
         <Button fullWidth={true}>Apply</Button>
         <a
           href="/#"
-          className="clr-gray-800 fs-m"
+          className="clr-content-semantic-neutral-primary fs-m"
           style={{ textAlign: "center" }}
         >
           Need help ?
diff --git a/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx b/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx
index 9e33790..66c8343 100644
--- a/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx
+++ b/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx
@@ -84,9 +84,12 @@ export const Login = () => {
           />
         </div>
         <Button fullWidth={true}>Log in</Button>
-        <div className="fs-m clr-gray-800" style={{ textAlign: "center" }}>
+        <div
+          className="fs-m clr-content-semantic-neutral-primary"
+          style={{ textAlign: "center" }}
+        >
           You do not have an account?{" "}
-          <a href="/#" className="clr-gray-800">
+          <a href="/#" className="clr-content-semantic-neutral-primary">
             Register
           </a>
         </div>
diff --git a/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx b/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx
index 8f8d19f..47a6ab1 100644
--- a/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx
+++ b/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx
@@ -72,7 +72,9 @@ const SportsBase = ({ values }: SportProps) => {
         </h1>
 
         <div>
-          <div className="fs-l clr-gray-800 mb-t">Gender</div>
+          <div className="fs-l clr-content-semantic-neutral-primary mb-t">
+            Gender
+          </div>
           <RadioGroup
             state={getFieldState("gender", methods.formState)}
             text={getFieldErrorMessage("gender", methods.formState)}
@@ -158,7 +160,7 @@ const SportsBase = ({ values }: SportProps) => {
         <Button fullWidth={true}>Apply</Button>
         <a
           href="/#"
-          className="clr-gray-800 fs-m"
+          className="clr-content-semantic-neutral-primary fs-m"
           style={{ textAlign: "center" }}
         >
           Need help ?
diff --git a/packages/react/src/components/Forms/Examples/index.stories.tsx b/packages/react/src/components/Forms/Examples/index.stories.tsx
index a8ba748..d67608f 100644
--- a/packages/react/src/components/Forms/Examples/index.stories.tsx
+++ b/packages/react/src/components/Forms/Examples/index.stories.tsx
@@ -25,7 +25,7 @@ export const Login = () => {
       }}
     >
       <h1
-        className="fs-h3 fw-bold clr-gray-900"
+        className="fs-h3 fw-bold clr-content-semantic-neutral-primary"
         style={{ textAlign: "center" }}
       >
         Log in
@@ -43,9 +43,12 @@ export const Login = () => {
         <Checkbox label="Remember me" />
       </div>
       <Button fullWidth={true}>Log in</Button>
-      <div className="fs-m clr-gray-800" style={{ textAlign: "center" }}>
+      <div
+        className="fs-m clr-content-semantic-neutral-primary"
+        style={{ textAlign: "center" }}
+      >
         You do not have an account?{" "}
-        <a href="/#" className="clr-gray-800">
+        <a href="/#" className="clr-content-semantic-neutral-primary">
           Register
         </a>
       </div>
@@ -65,7 +68,7 @@ export const Application = () => {
       method="get"
     >
       <h1
-        className="fs-h3 fw-bold clr-gray-900"
+        className="fs-h3 fw-bold clr-content-semantic-neutral-primary"
         style={{ textAlign: "center" }}
       >
         Application
@@ -102,7 +105,9 @@ export const Application = () => {
         <Input label="City" fullWidth={true} />
       </div>
       <div>
-        <div className="fs-l clr-gray-800 mb-t">Your curriculum vitae</div>
+        <div className="fs-l clr-content-semantic-neutral-primary mb-t">
+          Your curriculum vitae
+        </div>
         <FileUploader
           fullWidth={true}
           text="pdf only ( 4mb maximum )"
@@ -142,7 +147,7 @@ export const Application = () => {
       <Button fullWidth={true}>Apply</Button>
       <a
         href="/#"
-        className="clr-gray-800 fs-m"
+        className="clr-content-semantic-neutral-primary fs-m"
         style={{ textAlign: "center" }}
       >
         Need help ?
@@ -163,13 +168,15 @@ export const Sports = () => {
       onSubmit={(e) => e.preventDefault()}
     >
       <h1
-        className="fs-h3 fw-bold clr-gray-900"
+        className="fs-h3 fw-bold clr-content-semantic-neutral-primary"
         style={{ textAlign: "center" }}
       >
         Register
       </h1>
       <div>
-        <div className="fs-l clr-gray-800 mb-t">Gender</div>
+        <div className="fs-l clr-content-semantic-neutral-primary mb-t">
+          Gender
+        </div>
         <div style={{ display: "flex", gap: "0.5rem" }}>
           <Radio name="gender" label="Male" fullWidth={true} />
           <Radio name="gender" label="Female" />
@@ -234,7 +241,7 @@ export const Sports = () => {
       <Button fullWidth={true}>Apply</Button>
       <a
         href="/#"
-        className="clr-gray-800 fs-m"
+        className="clr-content-semantic-neutral-primary fs-m"
         style={{ textAlign: "center" }}
       >
         Need help ?
@@ -254,13 +261,15 @@ export const SportsDisabled = () => {
       }}
     >
       <h1
-        className="fs-h3 fw-bold clr-gray-900"
+        className="fs-h3 fw-bold clr-content-semantic-neutral-primary"
         style={{ textAlign: "center" }}
       >
         Register
       </h1>
       <div>
-        <div className="fs-l clr-gray-800 mb-t">Gender</div>
+        <div className="fs-l clr-content-semantic-neutral-primary mb-t">
+          Gender
+        </div>
         <div style={{ display: "flex", gap: "0.5rem" }}>
           <Radio name="gender" label="Male" fullWidth={true} disabled={true} />
           <Radio name="gender" label="Female" disabled={true} />
@@ -347,7 +356,7 @@ export const SportsDisabled = () => {
       </Button>
       <a
         href="/#"
-        className="clr-gray-800 fs-m"
+        className="clr-content-semantic-neutral-primary fs-m"
         style={{ textAlign: "center" }}
       >
         Need help ?
diff --git a/packages/react/src/components/Forms/LabelledBox/index.stories.tsx b/packages/react/src/components/Forms/LabelledBox/index.stories.tsx
index c856033..528f1be 100644
--- a/packages/react/src/components/Forms/LabelledBox/index.stories.tsx
+++ b/packages/react/src/components/Forms/LabelledBox/index.stories.tsx
@@ -27,7 +27,9 @@ export const Default = {
   render: Template,
   args: {
     label: "Your label here",
-    children: <span className="clr-gray-800">Hello world</span>,
+    children: (
+      <span className="clr-content-semantic-neutral-primary">Hello world</span>
+    ),
   },
 };
 
@@ -44,6 +46,8 @@ export const NoLabel = {
   args: {
     label: "Your label here",
     hideLabel: true,
-    children: <span className="clr-gray-800">Hello world</span>,
+    children: (
+      <span className="clr-content-semantic-neutral-primary">Hello world</span>
+    ),
   },
 };
diff --git a/packages/react/src/docs/colors.stories.tsx b/packages/react/src/docs/colors.stories.tsx
index 09aaf7c..a0a1204 100644
--- a/packages/react/src/docs/colors.stories.tsx
+++ b/packages/react/src/docs/colors.stories.tsx
@@ -62,7 +62,7 @@ export const BackgroundColors: Story = {
                   display: "flex",
                   flexDirection: "column",
                   flexShrink: 0,
-                  flexBasis: "120px",
+                  flexBasis: "200px",
                   alignItems: "center",
                   flexGrow: 1,
                 }}
@@ -71,7 +71,7 @@ export const BackgroundColors: Story = {
                   style={{ width: "72px", height: "48px" }}
                   className={"bg-" + color + "-" + tint}
                 />
-                <pre className="clr-gray-800 fs-s mt-st">
+                <pre className="clr-content-semantic-neutral-primary fs-s mt-st">
                   bg-semantic-{color}-{tint}
                 </pre>
               </div>
diff --git a/packages/react/src/docs/migrating/2_migrating_v3_to_v4.mdx b/packages/react/src/docs/migrating/2_migrating_v3_to_v4.mdx
index a2253f2..9509880 100644
--- a/packages/react/src/docs/migrating/2_migrating_v3_to_v4.mdx
+++ b/packages/react/src/docs/migrating/2_migrating_v3_to_v4.mdx
@@ -1,15 +1,13 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, Source } from "@storybook/addon-docs";
 
-<Meta title="Migrating/From v3 to v4"/>
+<Meta title="Migrating/From v3 to v4" />
 
 # Objective
 
-The Cunningham color system has been revised with a methodical approach focused on modularity and accessibility. This revision enables the systematic generation of coherent themes, the automatic implementation of display modes (light/dark), the constant maintenance of contrast ratios independently of the selected theme, and the structured allocation of colors according to their role (background, content, border). 
+The Cunningham color system has been revised with a methodical approach focused on modularity and accessibility. This revision enables the systematic generation of coherent themes, the automatic implementation of display modes (light/dark), the constant maintenance of contrast ratios independently of the selected theme, and the structured allocation of colors according to their role (background, content, border).
 
 An algorithm (available soon) has been developed to facilitate the rapid generation and adaptation of color palettes, producing a JSON file compatible with the existing infrastructure and natively supporting both light and dark display modes. This algorithmic solution optimizes Cunningham's adaptability to a wide range of user environments.
 
-
-
 # Structure
 
 The color system is structured around two complementary, interdependent palettes:
@@ -19,27 +17,37 @@ The color system is structured around two complementary, interdependent palettes
 
 This two-tier architecture facilitates the systematic propagation of changes: any alteration to the primitive palette is automatically reflected in all interface elements without the need for additional adjustments (see Figure 1).
 
-
 <figure>
-  <img src="docs/migrating/ressources/v3_to_v4/one.gif" alt="Changing the color primitive palette automatically updates the color contextual palette while maintaining contrast ratios inside components." />
-  <figcaption style={{ textAlign: 'center' }}>Figure 1. Changing the color primitive palette automatically updates the color contextual palette while maintaining contrast ratios inside components.</figcaption>
+  <img
+    src="docs/migrating/ressources/v3_to_v4/Figure1.gif"
+    alt="Changing the color primitive palette automatically updates the color contextual palette while maintaining contrast ratios inside components."
+  />
+  <figcaption style={{ textAlign: "center" }}>
+    Figure 1. Changing the color primitive palette automatically updates the
+    color contextual palette while maintaining contrast ratios inside
+    components.
+  </figcaption>
 </figure>
 
 A **theme** is a comprehensive color configuration derived from a brand's visual identity. It constitutes a specific implementation of the "Color Primitive" palette with predetermined color values. The Cunningham theme is provided as the default reference.
 
 A **mode** represents a systematic modulation of luminance and contrast parameters from an established theme, executed through the "Color Contextual" palette. This parametric adjustment accommodates diverse usage contexts while preserving the fundamental chromatic identity. Standard implementations include light and dark modes. These could be supplemented with specialized modes (such as high contrast) to meet specific accessibility needs or style requirements.
 
-
 # Palettes
 
 ## Color Primitive
 
 The Color Primitive palette includes 16 colors. Each color is available in 19 distinct shades, except gray, which contains 22. Each shade is referenced by a number between 000 and 1000. A shade of 000 corresponds to pure white, while a shade of 1000 corresponds to pure black. Each intermediate shade value is then defined on the basis of the perceived luminance noted L* in the CIELAB color space ([more info on CIELAB](https://en.wikipedia.org/wiki/CIELAB_color_space)). Using L* as a reference ensures that each primitive color fits into a predictable tonal scale, regardless of hue or saturation. This ensures consistent contrast levels across all themes, promoting universal accessibility. The correspondence between shade (S) and perceived luminance (L*) is as follows: $S=1000 \times (1-L^*)$ with $L^* \in [0;1]$. See Figure 2 for an example.
 
-
 <figure>
-  <img src="docs/migrating/ressources/v3_to_v4/Figure2.png" alt="Breakdown of the first 6 colors of a Color Primitive theme. Gray includes 3 complementary shades." />
-  <figcaption style={{ textAlign: 'center' }}>Figure 2. Breakdown of the first 6 colors of a "Color Primitive" theme. Gray includes 3 complementary shades.</figcaption>
+  <img
+    src="docs/migrating/ressources/v3_to_v4/Figure2.png"
+    alt="Breakdown of the first 6 colors of a Color Primitive theme. Gray includes 3 complementary shades."
+  />
+  <figcaption style={{ textAlign: "center" }}>
+    Figure 2. Breakdown of the first 6 colors of a "Color Primitive" theme. Gray
+    includes 3 complementary shades.
+  </figcaption>
 </figure>
 
 To optimize visual ergonomics in dark mode, it is necessary to reduce color saturation in the darkest shades (S > 600). This gradual desaturation avoids perceptual glare in dark mode and improves legibility in low ambient light environments.
@@ -49,17 +57,26 @@ An algorithm will soon be available to automatically adjust the parameters of pe
 ## Color Contextual
 
 <figure>
-  <img src="docs/migrating/ressources/v3_to_v4/Figure3.png" alt="Excerpt from the Color Contextual palette for the background.semantic.brand role, with light and dark modes." />
-  <figcaption style={{ textAlign: 'center' }}>Figure 3. excerpt from the "Color Contextual" palette for the background.semantic.brand role, with light and dark modes.</figcaption>
+  <img
+    src="docs/migrating/ressources/v3_to_v4/Figure3.png"
+    alt="Excerpt from the Color Contextual palette for the background.semantic.brand role, with light and dark modes."
+  />
+  <figcaption style={{ textAlign: "center" }}>
+    Figure 3. excerpt from the "Color Contextual" palette for the
+    background.semantic.brand role, with light and dark modes.
+  </figcaption>
 </figure>
 
 The "Color Contextual" palette allows you to classify the various colors of a theme according to their actual use, differentiating between each of the modes (light, dark, etc.). This makes it possible (1) to simplify and limit errors when assigning colors to different components, and (2) to manage multiple modes.
 
 This palette introduces the notion of roles, whose format is as follows:
 
-<Source dark={true} code={`
+<Source
+  dark={true}
+  code={`
 layer.scope.(intent).variant.(state)
-`}></Source>
+`}
+></Source>
 
 ### Layer
 
@@ -96,16 +113,14 @@ The state characterizes the interactional state of an interface element (e.g., H
 
 # **Accessibility**
 
-Accessibility is a fundamental principle guiding the design of this color system. As demonstrated in the Color Primitive section, the methodical standardization of luminance values (L*) ensures consistent contrast ratios, regardless of the theme or display mode selected. This systematic approach eliminates the need to re-evaluate accessibility parameters when implementing new themes, ensuring ongoing compliance with WCAG accessibility standards. The main objective is to establish an accessibility framework that is invariant and resilient in the face of multiple usage contexts.
+Accessibility is a fundamental principle guiding the design of this color system. As demonstrated in the Color Primitive section, the methodical standardization of luminance values (L\*) ensures consistent contrast ratios, regardless of the theme or display mode selected. This systematic approach eliminates the need to re-evaluate accessibility parameters when implementing new themes, ensuring ongoing compliance with WCAG accessibility standards. The main objective is to establish an accessibility framework that is invariant and resilient in the face of multiple usage contexts.
 
 # **Technical implementation**
 
-Du à tout les changements, et à l'architecture des tokens, toutes les variables css ont changés. Vous devez donc mettre à jour vos variables css. Il faut absolument 
-regénérer vos tokens avec la commande `cunningham -g css,ts,js` pour avoir les nouvelles variables css.
-
-Dans le cas des tokens d'un theme, toutes les valeurs sémantiques sont dans le  ```theme.globals```. Cela correspond aux couleurs primitives, transitions, fonts, spacings, breakpoints, font weights, font families, etc.
-De fait toutes les valeurs contextuelles sont dans le ```theme.contextuals```. Cela correspond  aux couleurs de fond, aux couleurs de contenu, aux couleurs de bordure, aux couleurs de palette, etc.
+Due to all the changes and the token architecture, all CSS variables have changed. You must therefore update your CSS variables. It is absolutely necessary to regenerate your tokens with the command `cunningham -g css,ts,js` to get the new CSS variables.
 
+In the case of theme tokens, all primitive values are in `theme.globals`. This corresponds to primitive colors, transitions, fonts, spacings, breakpoints, font weights, font families, etc.
+As a result, all contextual values are in `theme.contextuals`. This corresponds to background colors, content colors, border colors, palette colors, etc.
 
 ```json
 // Old structure
@@ -113,18 +128,17 @@ De fait toutes les valeurs contextuelles sont dans le ```theme.contextuals```. C
   "themes": {
     "default": {
       "theme": {
-        "colors": "..."
-        "font": "..."
-        "spacings": "..."
-        "breakpoints": "..."
-        "...": "..."
+        "colors": "...",
+        "font": "...",
+        "spacings": "...",
+        "breakpoints": "...",
+        ...
       },
       "components": {
         "button": {
           "...": "..."
         }
       }
-     
     }
   }
 }
@@ -135,38 +149,36 @@ De fait toutes les valeurs contextuelles sont dans le ```theme.contextuals```. C
   "themes": {
     "default": {
       "globals": {
-        "colors": "..."
-        "font": "..."
-        "spacings": "..."
-        "breakpoints": "..."
-        "...": "..."
+        "colors": "...",
+        "font": "...",
+        "spacings": "...",
+        "breakpoints": "...",
+        ...
       },
       "contextuals": {
         "background": {
           "...": "..."
-        }
+        },
         "content": {
           "...": "..."
-        }
+        },
         "border": {
           "...": "..."
         }
-        }
-        "components": {
-          "button": {
-            "...": "..."
-          }
-        }
+      },
+      "components": {
+        "button": {
+          "...": "..."
+        },
+        ...
       }
-     
     }
-  
+  }
 }
 ```
 
 ## **Migration Steps**
 
-
 ### **1. Update Dependencies**
 
 First, update your `package.json` to use version 4.0.0:
@@ -196,7 +208,7 @@ All your references to old CSS variables will need to be updated. The new variab
 ```css
 /* Old structure (v3) */
 .test {
-  color: var(--c--theme--colors--primary-500)
+  color: var(--c--theme--colors--primary-500);
 }
 
 /* New structure (v4) */
@@ -207,13 +219,12 @@ All your references to old CSS variables will need to be updated. The new variab
   color: var(--c--contextuals--border--semantic--brand--primary);
   color: var(--c--contextuals--palette--brand--primary);
 }
-
 ```
 
 ### **3. Update Button Props**
 
-Dans le cas du button, il faut mettre à jour les props `color` et `variant` pour utiliser le nouveau structure. 
-La props color correspond au color primitive et la props variant au type de button.
+For buttons, you need to update the `color` and `variant` props to use the new structure.
+The color prop corresponds to the primitive color and the variant prop corresponds to the button type.
 
 ```tsx
 /* Old structure (v3) */
@@ -228,7 +239,7 @@ La props color correspond au color primitive et la props variant au type de butt
 
 ### **4. Verify Accessibility**
 
-The new architecture automatically ensures WCAG accessibility standards compliance through methodical standardization of luminance values (L*). Contrast ratios are now consistent regardless of the selected theme or display mode.
+The new architecture automatically ensures WCAG accessibility standards compliance through methodical standardization of luminance values (L\*). Contrast ratios are now consistent regardless of the selected theme or display mode.
 
 ## **Migration Benefits**
 
diff --git a/packages/react/src/docs/spacings.stories.tsx b/packages/react/src/docs/spacings.stories.tsx
index 1ae3d58..b3a9ef4 100644
--- a/packages/react/src/docs/spacings.stories.tsx
+++ b/packages/react/src/docs/spacings.stories.tsx
@@ -14,7 +14,7 @@ export const Default: Story = {
     // Trier les espacements par valeur croissante avant de les afficher
     // Sort spacings by value before rendering
     const sortedSpacings = Object.entries(
-      tokens.themes.default.globals.spacings,
+      tokens.themes.default.globals.spacings
     ).sort((a, b) => {
       // On retire les éventuelles unités pour comparer numériquement
       const parse = (v: any) =>
@@ -30,13 +30,13 @@ export const Default: Story = {
               style={{ display: "flex", alignItems: "center", gap: "10px" }}
             >
               <div
-                className="fw-bold clr-content-neutral-primary"
+                className="fw-bold clr-content-semantic-neutral-primary"
                 style={{ width: "50px" }}
               >
                 -{key}
               </div>
               <div
-                className="fw-medium fs-m clr-content-neutral-primary"
+                className="fw-medium fs-m clr-content-semantic-neutral-primary"
                 style={{ width: "100px" }}
               >
                 {value}
@@ -56,11 +56,11 @@ export const Default: Story = {
 export const Example: Story = {
   render: () => {
     return (
-      <div className="clr-gray-800 bg-error-tertiary">
-        <div className="clr-gray-800 bg-brand-tertiary  fw-medium p-t mb-l">
+      <div className="clr-content-semantic-neutral-primary bg-yellow-500">
+        <div className="clr-content-semantic-neutral-primary bg-purple-500  fw-medium p-t mb-l">
           Tiny padding + Large margin bottom
         </div>
-        <div className="content-neutral-primary bg-neutral-tertiary  fw-medium p-l ml-b">
+        <div className="content-neutral-primary bg-pink-500 fw-medium p-l ml-b">
           Large padding + Base margin left
         </div>
       </div>
diff --git a/packages/react/src/docs/typo.mdx b/packages/react/src/docs/typo.mdx
index 22c8185..131d88b 100644
--- a/packages/react/src/docs/typo.mdx
+++ b/packages/react/src/docs/typo.mdx
@@ -1,7 +1,7 @@
-import { Canvas, Meta, Source } from '@storybook/addon-docs';
+import { Canvas, Meta, Source } from "@storybook/addon-docs";
 import * as Stories from "./typo.stories";
 
-<Meta title="Getting Started/Typography"/>
+<Meta title="Getting Started/Typography" />
 
 # Typo
 
@@ -12,7 +12,7 @@ Cunningham comes with an existing toolkit to deal with typography, and it's easy
 You can use custom utility classes to set the font size of an element. These classes are named using the format `.fs-{size}`.
 
 <Source
-  language='tsx'
+  language="tsx"
   dark
   format={false}
   code={`
@@ -20,12 +20,12 @@ You can use custom utility classes to set the font size of an element. These cla
   `}
 />
 
-<Canvas sourceState="none" of={Stories.Sizes}/>
+<Canvas sourceState="none" of={Stories.Sizes} />
 
 You can customize the values of the font size design tokens with the configuration file this way:
 
 <Source
-  language='ts'
+  language="ts"
   dark
   format={true}
   code={`
@@ -53,7 +53,7 @@ You can customize the values of the font size design tokens with the configurati
 You can use custom utility classes to set the font weight of an element. These classes are named using the format `.fw-{weight}`.
 
 <Source
-  language='tsx'
+  language="tsx"
   dark
   format={false}
   code={`
@@ -61,12 +61,12 @@ You can use custom utility classes to set the font weight of an element. These c
   `}
 />
 
-<Canvas sourceState="none" of={Stories.Weights}/>
+<Canvas sourceState="none" of={Stories.Weights} />
 
 You can customize the values of the font weight design tokens with the configuration file this way:
 
 <Source
-  language='ts'
+  language="ts"
   dark
   format={true}
   code={`
@@ -98,20 +98,20 @@ The font associated with `f-base` is the default font for the whole application,
 class on every dom element.
 
 <Source
-  language='tsx'
+  language="tsx"
   dark
   format={false}
   code={`
-  <div className="clr-gray-800 f-accent">Accent text</div>
+  <div className="clr-content-semantic-neutral-primary f-accent">Accent text</div>
   `}
 />
 
-<Canvas sourceState="none" of={Stories.Families}/>
+<Canvas sourceState="none" of={Stories.Families} />
 
 You can customize the values of the font family design tokens with the configuration file this way:
 
 <Source
-  language='ts'
+  language="ts"
   dark
   format={true}
   code={`
diff --git a/packages/react/src/docs/typo.stories.tsx b/packages/react/src/docs/typo.stories.tsx
index 9b8a75b..4ab27cc 100644
--- a/packages/react/src/docs/typo.stories.tsx
+++ b/packages/react/src/docs/typo.stories.tsx
@@ -14,7 +14,10 @@ export const Sizes: Story = {
     return (
       <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
         {Object.keys(tokens.themes.default.globals.font.sizes).map((key) => (
-          <div key={key} className={"clr-gray-800 fs-" + key}>
+          <div
+            key={key}
+            className={"clr-content-semantic-neutral-primary fs-" + key}
+          >
             Using the <code>fs-{key}</code> class
           </div>
         ))}
@@ -28,7 +31,10 @@ export const Weights: Story = {
     return (
       <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
         {Object.keys(tokens.themes.default.globals.font.weights).map((key) => (
-          <div key={key} className={"clr-gray-800 fs-l fw-" + key}>
+          <div
+            key={key}
+            className={"clr-content-semantic-neutral-primary fs-l fw-" + key}
+          >
             Using the <code>fw-{key}</code> class
           </div>
         ))}
@@ -42,7 +48,10 @@ export const Families: Story = {
     return (
       <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
         {Object.keys(tokens.themes.default.globals.font.families).map((key) => (
-          <div key={key} className={"clr-gray-800 f-" + key}>
+          <div
+            key={key}
+            className={"clr-content-semantic-neutral-primary f-" + key}
+          >
             Using the <code>f-{key}</code> class
           </div>
         ))}