🎨(demo) implement new tokens

implements the new token architecture

apps/demo/cunningham.ts

@@ -1,578 +1,23 @@
-import { Configuration } from "@openfun/cunningham-react";
+import { defaultThemes } from "@openfun/cunningham-tokens";
+
+const defaultConfig = {
+    themes: {
+        dark: {
+            components: {
+                card: {
+                    "border-width": "none",
+                    "box-shadow": "rgba(0, 8, 16, 0.3) 0px 16px 24px",
+                },
+            },
+            
+        },
+    },
+  
+}
+
+const config = {...defaultConfig, ...defaultThemes};
+export default config;
+
+
 
-const defaultConfig: Configuration = {
-  themes: {
-    dark: {
-      components: {
-        card: {
-          "border-width": "none",
-          "box-shadow": "rgba(0, 8, 16, 0.3) 0px 16px 24px",
-        },
-      },
-    },
-    redflux_dark: {
-      theme: {
-        colors: {
-          "primary-text": "#FFFFFF",
-          "primary-100": "#FA8D92",
-          "primary-200": "#F95B63",
-          "primary-300": "#F72A35",
-          "primary-400": "#E50914",
-          "primary-500": "#C30811",
-          "primary-600": "#A0060E",
-          "primary-700": "#7E050B",
-          "primary-800": "#5C0408",
-          "primary-900": "#390205",
-          "secondary-text": "#FFF",
-          "secondary-100": "#1b5ad7",
-          "secondary-200": "#146cea",
-          "secondary-300": "#007ffe",
-          "secondary-400": "#008eff",
-          "secondary-500": "#279eff",
-          "secondary-600": "#56b0ff",
-          "secondary-700": "#8ac6ff",
-          "secondary-800": "#b9dcff",
-          "secondary-900": "#e2f1ff",
-          "greyscale-000": "#000000BB",
-          "greyscale-100": "#191919BB",
-          "greyscale-200": "#232323",
-          "greyscale-300": "#292929",
-          "greyscale-400": "#343434",
-          "greyscale-500": "#404040",
-          "greyscale-600": "#aaaaaa",
-          "greyscale-700": "#cccccc",
-          "greyscale-800": "#eeeeee",
-          "greyscale-900": "#f7f7f7",
-          "danger-900": "#FACED0",
-          "danger-800": "#F7A9AD",
-          "danger-700": "#F38389",
-          "danger-600": "#F05E66",
-          "danger-500": "#EC3942",
-          "danger-400": "#D8151F",
-          "danger-300": "#A51017",
-          "danger-200": "#720B10",
-          "danger-100": "#3F0609",
-          "info-900": "#53A4FD",
-          "info-800": "#2B8FFC",
-          "info-700": "#047AFA",
-          "info-600": "#0366D2",
-          "info-500": "#0255AF",
-          "info-400": "#02448C",
-          "info-300": "#013368",
-          "info-200": "#012245",
-          "info-100": "#001122",
-          "success-900": "#A9F7C0",
-          "success-800": "#8DF4AC",
-          "success-700": "#71F198",
-          "success-600": "#55EF83",
-          "success-500": "#39EC6F",
-          "success-400": "#14CF4C",
-          "success-300": "#0E9236",
-          "success-200": "#085620",
-          "success-100": "#021909",
-          "warning-900": "#EAC88B",
-          "warning-800": "#E4BA6D",
-          "warning-700": "#DFAB4F",
-          "warning-600": "#D99D31",
-          "warning-500": "#B68121",
-          "warning-400": "#8A621A",
-          "warning-300": "#5F4412",
-          "warning-200": "#34250A",
-          "warning-100": "#090702",
-        },
-        font: {
-          families: {
-            base: "Helvetica Neue,Segoe UI,Roboto,Ubuntu,sans-serif",
-            accent: "Helvetica Neue,Segoe UI,Roboto,Ubuntu,sans-serif",
-          },
-        },
-      },
-      components: {
-        button: {
-          "border-radius": "0.1875rem",
-        },
-        "forms-input": {
-          "border-radius": "0.1875rem",
-          "border-color": "ref(theme.colors.greyscale-500)",
-          "border-color--hover": "ref(theme.colors.greyscale-600)",
-          "background-color": "ref(theme.colors.greyscale-100)",
-          "label-color--focus": "ref(theme.colors.greyscale-700)",
-        },
-        "forms-select": {
-          "border-radius": "0.1875rem",
-          "border-color": "ref(theme.colors.greyscale-500)",
-          "border-color--hover": "ref(theme.colors.greyscale-600)",
-          "background-color": "ref(theme.colors.greyscale-100)",
-          "border-color--focus": "ref(theme.colors.greyscale-700)",
-          "label-color--focus": "ref(theme.colors.greyscale-700)",
-          "menu-background-color": "#191919",
-          "item-background-color--selected": "ref(theme.colors.primary-600)",
-        },
-        "forms-datepicker": {
-          "border-radius": "0.1875rem",
-          "border-color": "ref(theme.colors.greyscale-500)",
-          "border-color--hover": "ref(theme.colors.greyscale-600)",
-          "background-color": "ref(theme.colors.greyscale-100)",
-          "border-color--focus": "ref(theme.colors.greyscale-700)",
-          "label-color--focus": "ref(theme.colors.greyscale-700)",
-          "menu-background-color": "#191919",
-          "grid-cell--border-color--today": "ref(theme.colors.greyscale-800)",
-          "grid-cell--color--today": "ref(theme.colors.greyscale-800)",
-          "range-selection-background-color": "ref(theme.colors.primary-900)",
-          "item-background-color--selected": "ref(theme.colors.primary-600)",
-        },
-        "forms-fileuploader": {
-          "border-color": "ref(theme.colors.greyscale-500)",
-          "border-color--hover": "ref(theme.colors.greyscale-600)",
-          "background-color": "ref(theme.colors.greyscale-100)",
-          "background-color--active": "ref(theme.colors.greyscale-500)",
-          "accent-color": "ref(theme.colors.greyscale-800)",
-        },
-        "forms-textarea": {
-          "border-radius": "0.1875rem",
-          "border-color": "ref(theme.colors.greyscale-500)",
-          "border-color--hover": "ref(theme.colors.greyscale-600)",
-          "background-color": "ref(theme.colors.greyscale-100)",
-          "border-color--focus": "ref(theme.colors.greyscale-700)",
-          "label-color--focus": "ref(theme.colors.greyscale-700)",
-        },
-        "forms-checkbox": {
-          "border-radius": "0.1875rem",
-          "accent-color": "ref(theme.colors.greyscale-100)",
-          "background-color": "ref(theme.colors.greyscale-800)",
-        },
-        "forms-switch": {
-          "handle-border-radius": "0.3rem",
-          "rail-border-radius": "0.500rem",
-          "accent-color": "ref(theme.colors.greyscale-800)",
-          "handle-background-color": "ref(theme.colors.greyscale-100)",
-          "rail-background-color": "ref(theme.colors.greyscale-400)",
-        },
-        "forms-radio": {
-          "accent-color": "ref(theme.colors.greyscale-100)",
-          "background-color": "ref(theme.colors.greyscale-800)",
-        },
-        modal: {
-          "border-radius": "0.1875rem",
-          "background-color": "#191919",
-          "backdrop-color": "ref(theme.colors.greyscale-000)",
-        },
-        card: {
-          "border-radius": "0.1875rem",
-          "border-width": "none",
-          "box-shadow": "rgba(255, 220, 220, 0.05) 0px 0px 60px 10px",
-        },
-      },
-    },
-    blueney_dark: {
-      theme: {
-        colors: {
-          "primary-text": "#FFFFFF",
-          "primary-900": "#53B0FF",
-          "primary-800": "#39A4FF",
-          "primary-700": "#2099FF",
-          "primary-600": "#068DFF",
-          "primary-500": "#0080EB",
-          "primary-400": "#0072D2",
-          "primary-300": "#00549A",
-          "primary-200": "#003562",
-          "primary-100": "#00172A",
-          "greyscale-900": "#FAFAFC",
-          "greyscale-800": "#DBDDE7",
-          "greyscale-700": "#BCC0D3",
-          "greyscale-600": "#9EA2BF",
-          "greyscale-500": "#7F85AB",
-          "greyscale-400": "#626995",
-          "greyscale-300": "#4E5376",
-          "greyscale-200": "#393E57",
-          "greyscale-100": "#1B1D29",
-          "greyscale-000": "#151823",
-        },
-        font: {
-          families: {
-            base: "Avenir, sans-serif",
-            accent: "Avenir, sans-serif",
-          },
-        },
-      },
-      components: {
-        card: {
-          "border-radius": "0.25rem",
-          "border-width": "none",
-          "box-shadow":
-            "rgba(0, 0, 0, 0.69) 0px 26px 30px -10px, rgba(0, 0, 0, 0.73) 0px 16px 10px -10px",
-        },
-        button: {
-          "border-radius": "0.25rem",
-        },
-        "forms-input": {
-          "border-radius": "0.25rem",
-          "border-color": "transparent",
-          "border-color--hover": "transparent",
-          "border-color--focus": "ref(theme.colors.greyscale-700)",
-          "background-color": "ref(theme.colors.greyscale-200)",
-          "label-color--focus": "ref(theme.colors.greyscale-700)",
-          "label-color": "ref(theme.colors.greyscale-700)",
-        },
-        "forms-select": {
-          "border-radius": "0.25rem",
-          "border-color": "transparent",
-          "border-color--hover": "transparent",
-          "border-color--focus": "ref(theme.colors.greyscale-700)",
-          "background-color": "ref(theme.colors.greyscale-200)",
-          "label-color--focus": "ref(theme.colors.greyscale-700)",
-          "menu-background-color": "ref(theme.colors.greyscale-200)",
-          "item-background-color--hover": "ref(theme.colors.greyscale-300)",
-          "item-background-color--selected": "ref(theme.colors.primary-400)",
-        },
-        "forms-datepicker": {
-          "border-radius": "0.25rem",
-          "border-color": "transparent",
-          "border-color--hover": "transparent",
-          "border-color--focus": "ref(theme.colors.greyscale-700)",
-          "background-color": "ref(theme.colors.greyscale-200)",
-          "label-color--focus": "ref(theme.colors.greyscale-700)",
-          "menu-background-color": "ref(theme.colors.greyscale-200)",
-          "grid-cell--border-color--today": "ref(theme.colors.greyscale-500)",
-          "grid-cell--color--today": "ref(theme.colors.greyscale-700)",
-          "grid-cell--color--selected": "ref(theme.colors.primary-600)",
-          "range-selection-background-color": "ref(theme.colors.primary-100)",
-          "item-background-color--hover": "ref(theme.colors.greyscale-300)",
-          "item-background-color--selected": "ref(theme.colors.primary-400)",
-        },
-        "forms-fileuploader": {
-          "background-color": "ref(theme.colors.greyscale-200)",
-          "background-color--active": "ref(theme.colors.greyscale-300)",
-          "border-color": "transparent",
-        },
-        "forms-textarea": {
-          "border-color": "transparent",
-          "border-color--hover": "transparent",
-          "border-color--focus": "ref(theme.colors.greyscale-700)",
-          "border-radius": "0.25rem",
-          "background-color": "ref(theme.colors.greyscale-200)",
-          "label-color--focus": "ref(theme.colors.greyscale-700)",
-        },
-        "forms-checkbox": {
-          "border-radius": "0.25rem",
-          "border-color": "ref(theme.colors.greyscale-300)",
-          "accent-color": "ref(theme.colors.greyscale-900)",
-          "background-color": "ref(theme.colors.greyscale-200)",
-        },
-        "forms-switch": {
-          "rail-background-color": "ref(theme.colors.greyscale-200)",
-          "accent-color": "ref(theme.colors.primary-400)",
-        },
-        "forms-radio": {
-          "border-color": "ref(theme.colors.greyscale-300)",
-          "accent-color": "ref(theme.colors.greyscale-900)",
-          "background-color": "ref(theme.colors.greyscale-200)",
-        },
-        modal: {
-          "border-radius": "0.25rem",
-          "background-color": "ref(theme.colors.greyscale-100)",
-          "backdrop-color": "#00172AAB",
-          "border-color": "transparent",
-          "box-shadow":
-            "rgba(0, 0, 0, 0.69) 0px 26px 30px -10px, rgba(0, 0, 0, 0.73) 0px 16px 10px -10px",
-        },
-      },
-    },
-    uikit_light: {
-      globals: {
-        colors: {
-          "toto-text": "red",
-        },
-      },
-      theme: {
-        colors: {
-          "toto-text": "red",
-          "primary-text": "#FFFFFF",
-          "primary-050": "#EAF1FB",
-          "primary-100": "#D6E4F6",
-          "primary-150": "#C1D6F2",
-          "primary-200": "#ACC9EE",
-          "primary-250": "#97BBEA",
-          "primary-300": "#82AEE6",
-          "primary-350": "#6BA0E4",
-          "primary-400": "#5693E0",
-          "primary-450": "#4085DC",
-          "primary-500": "#2976D8",
-          "primary-550": "#1167D4",
-          "primary-600": "#0559C5",
-          "primary-650": "#054EAC",
-          "primary-700": "#13458B",
-          "primary-750": "#183C6E",
-          "primary-800": "#193154",
-          "primary-850": "#16273E",
-          "primary-900": "#131C2A",
-          "primary-950": "#0C1117",
-          "secondary-text": "#FFF",
-          "secondary-050": "#EAF1FB",
-          "secondary-100": "#D6E4F6",
-          "secondary-150": "#C1D6F2",
-          "secondary-200": "#ACC9EE",
-          "secondary-250": "#97BBEA",
-          "secondary-300": "#82AEE6",
-          "secondary-350": "#6BA0E4",
-          "secondary-400": "#5693E0",
-          "secondary-450": "#4085DC",
-          "secondary-500": "#2976D8",
-          "secondary-550": "#1167D4",
-          "secondary-600": "#0559C5",
-          "secondary-650": "#054EAC",
-          "secondary-700": "#13458B",
-          "secondary-750": "#183C6E",
-          "secondary-800": "#193154",
-          "secondary-850": "#16273E",
-          "secondary-900": "#131C2A",
-          "secondary-950": "#0C1117",
-          "greyscale-000": "#FFFFFF",
-          "greyscale-025": "#F8F8F9",
-          "greyscale-050": "#F0F1F2",
-          "greyscale-100": "#E1E2E4",
-          "greyscale-150": "#D2D4D7",
-          "greyscale-200": "#C4C7CA",
-          "greyscale-250": "#B6B9BE",
-          "greyscale-300": "#A7ABB1",
-          "greyscale-350": "#999EA5",
-          "greyscale-400": "#8B919A",
-          "greyscale-450": "#7D848E",
-          "greyscale-500": "#707882",
-          "greyscale-550": "#626B77",
-          "greyscale-600": "#565F6B",
-          "greyscale-650": "#495360",
-          "greyscale-700": "#3D4855",
-          "greyscale-750": "#303C4B",
-          "greyscale-800": "#26313F",
-          "greyscale-850": "#1D2633",
-          "greyscale-900": "#141C26",
-          "greyscale-950": "#0D1117",
-          "greyscale-1000": "#000000",
-          "info-050": "#EAF1FB",
-          "info-100": "#D5E4F7",
-          "info-150": "#C0D6F4",
-          "info-200": "#ABC9F0",
-          "info-250": "#96BCEC",
-          "info-300": "#80AEE8",
-          "info-350": "#6BA0E4",
-          "info-400": "#5693E1",
-          "info-450": "#4085DD",
-          "info-500": "#2976D8",
-          "info-550": "#1167D4",
-          "info-600": "#0559C5",
-          "info-650": "#044EAD",
-          "info-700": "#13458C",
-          "info-750": "#183C6E",
-          "info-800": "#183255",
-          "info-850": "#16273E",
-          "info-900": "#121C2A",
-          "info-950": "#0C1117",
-          "success-050": "#E4F7D4",
-          "success-100": "#C7EEA7",
-          "success-150": "#A9E578",
-          "success-200": "#89DC45",
-          "success-250": "#72CF27",
-          "success-300": "#6AC024",
-          "success-350": "#61B121",
-          "success-400": "#59A21E",
-          "success-450": "#51941C",
-          "success-500": "#4A8519",
-          "success-550": "#427816",
-          "success-600": "#3A6A14",
-          "success-650": "#335D11",
-          "success-700": "#2F4F19",
-          "success-750": "#2A411B",
-          "success-800": "#25351A",
-          "success-850": "#1E2818",
-          "success-900": "#171D13",
-          "success-950": "#0F110C",
-          "warning-050": "#FFF1BD",
-          "warning-100": "#FFE176",
-          "warning-150": "#FFCF25",
-          "warning-200": "#F4BF05",
-          "warning-250": "#E3B204",
-          "warning-300": "#D3A504",
-          "warning-350": "#C29804",
-          "warning-400": "#B28C03",
-          "warning-450": "#A27F03",
-          "warning-500": "#937303",
-          "warning-550": "#836703",
-          "warning-600": "#745B02",
-          "warning-650": "#665002",
-          "warning-700": "#554512",
-          "warning-750": "#463B16",
-          "warning-800": "#383017",
-          "warning-850": "#2B2615",
-          "warning-900": "#1E1C12",
-          "warning-950": "#12110C",
-          "danger-050": "#FCEDED",
-          "danger-100": "#F9DCDC",
-          "danger-150": "#F6CACA",
-          "danger-200": "#F3B8B8",
-          "danger-250": "#F0A5A5",
-          "danger-300": "#ED9393",
-          "danger-350": "#EA7F7F",
-          "danger-400": "#E86969",
-          "danger-450": "#E45151",
-          "danger-500": "#DF3434",
-          "danger-550": "#D80000",
-          "danger-600": "#C00000",
-          "danger-650": "#AA0000",
-          "danger-700": "#8C1912",
-          "danger-750": "#721F17",
-          "danger-800": "#591F18",
-          "danger-850": "#431C17",
-          "danger-900": "#2F1613",
-          "danger-950": "#1C0F0D",
-        },
-      },
-    },
-    uikit_dark: {
-      theme: {
-        colors: {
-          "primary-text": "#FFFFFF",
-          "primary-050": "#EAF1FB",
-          "primary-100": "#D6E4F6",
-          "primary-150": "#C1D6F2",
-          "primary-200": "#ACC9EE",
-          "primary-250": "#97BBEA",
-          "primary-300": "#82AEE6",
-          "primary-350": "#6BA0E4",
-          "primary-400": "#5693E0",
-          "primary-450": "#4085DC",
-          "primary-500": "#2976D8",
-          "primary-550": "#1167D4",
-          "primary-600": "#0559C5",
-          "primary-650": "#054EAC",
-          "primary-700": "#13458B",
-          "primary-750": "#183C6E",
-          "primary-800": "#193154",
-          "primary-850": "#16273E",
-          "primary-900": "#131C2A",
-          "primary-950": "#0C1117",
-          "secondary-text": "#FFF",
-          "secondary-050": "#EAF1FB",
-          "secondary-100": "#D6E4F6",
-          "secondary-150": "#C1D6F2",
-          "secondary-200": "#ACC9EE",
-          "secondary-250": "#97BBEA",
-          "secondary-300": "#82AEE6",
-          "secondary-350": "#6BA0E4",
-          "secondary-400": "#5693E0",
-          "secondary-450": "#4085DC",
-          "secondary-500": "#2976D8",
-          "secondary-550": "#1167D4",
-          "secondary-600": "#0559C5",
-          "secondary-650": "#054EAC",
-          "secondary-700": "#13458B",
-          "secondary-750": "#183C6E",
-          "secondary-800": "#193154",
-          "secondary-850": "#16273E",
-          "secondary-900": "#131C2A",
-          "secondary-950": "#0C1117",
-          "greyscale-1000": "#FFFFFF",
-          "greyscale-950": "#F8F8F9",
-          "greyscale-900": "#F0F1F2",
-          "greyscale-850": "#E1E2E4",
-          "greyscale-800": "#D2D4D7",
-          "greyscale-750": "#C4C7CA",
-          "greyscale-700": "#B6B9BE",
-          "greyscale-650": "#A7ABB1",
-          "greyscale-600": "#999EA5",
-          "greyscale-550": "#8B919A",
-          "greyscale-500": "#7D848E",
-          "greyscale-450": "#707882",
-          "greyscale-400": "#626B77",
-          "greyscale-350": "#565F6B",
-          "greyscale-300": "#495360",
-          "greyscale-250": "#3D4855",
-          "greyscale-200": "#303C4B",
-          "greyscale-150": "#26313F",
-          "greyscale-100": "#1D2633",
-          "greyscale-050": "#141C26",
-          "greyscale-025": "#0D1117",
-          "greyscale-000": "#000000",
-          "info-050": "#EAF1FB",
-          "info-100": "#D5E4F7",
-          "info-150": "#C0D6F4",
-          "info-200": "#ABC9F0",
-          "info-250": "#96BCEC",
-          "info-300": "#80AEE8",
-          "info-350": "#6BA0E4",
-          "info-400": "#5693E1",
-          "info-450": "#4085DD",
-          "info-500": "#2976D8",
-          "info-550": "#1167D4",
-          "info-600": "#0559C5",
-          "info-650": "#044EAD",
-          "info-700": "#13458C",
-          "info-750": "#183C6E",
-          "info-800": "#183255",
-          "info-850": "#16273E",
-          "info-900": "#121C2A",
-          "info-950": "#0C1117",
-          "success-050": "#E4F7D4",
-          "success-100": "#C7EEA7",
-          "success-150": "#A9E578",
-          "success-200": "#89DC45",
-          "success-250": "#72CF27",
-          "success-300": "#6AC024",
-          "success-350": "#61B121",
-          "success-400": "#59A21E",
-          "success-450": "#51941C",
-          "success-500": "#4A8519",
-          "success-550": "#427816",
-          "success-600": "#3A6A14",
-          "success-650": "#335D11",
-          "success-700": "#2F4F19",
-          "success-750": "#2A411B",
-          "success-800": "#25351A",
-          "success-850": "#1E2818",
-          "success-900": "#171D13",
-          "success-950": "#0F110C",
-          "warning-050": "#FFF1BD",
-          "warning-100": "#FFE176",
-          "warning-150": "#FFCF25",
-          "warning-200": "#F4BF05",
-          "warning-250": "#E3B204",
-          "warning-300": "#D3A504",
-          "warning-350": "#C29804",
-          "warning-400": "#B28C03",
-          "warning-450": "#A27F03",
-          "warning-500": "#937303",
-          "warning-550": "#836703",
-          "warning-600": "#745B02",
-          "warning-650": "#665002",
-          "warning-700": "#554512",
-          "warning-750": "#463B16",
-          "warning-800": "#383017",
-          "warning-850": "#2B2615",
-          "warning-900": "#1E1C12",
-          "warning-950": "#12110C",
-          "danger-050": "#FCEDED",
-          "danger-100": "#F9DCDC",
-          "danger-150": "#F6CACA",
-          "danger-200": "#F3B8B8",
-          "danger-250": "#F0A5A5",
-          "danger-300": "#ED9393",
-          "danger-350": "#EA7F7F",
-          "danger-400": "#E86969",
-          "danger-450": "#E45151",
-          "danger-500": "#DF3434",
-          "danger-550": "#D80000",
-          "danger-600": "#C00000",
-          "danger-650": "#AA0000",
-          "danger-700": "#8C1912",
-          "danger-750": "#721F17",
-          "danger-800": "#591F18",
-          "danger-850": "#431C17",
-          "danger-900": "#2F1613",
-          "danger-950": "#1C0F0D",
-        },
-      },
-    },
-  },
-};
 
-export default defaultConfig;

apps/demo/src/App.tsx

@@ -11,9 +11,6 @@ import Onboarding from "./Onboarding";
 
 enum Theme {
   CUNNINGHAM = "cunningham",
-  REDFLUX = "redflux",
-  BLUENEY = "blueney",
-  UIKIT = "uikit"
 }
 
 enum Variant {
@@ -26,18 +23,7 @@ const THEMES: Record<Theme, Record<Variant, string | undefined>> = {
     light: "default",
     dark: "dark",
   },
-  [Theme.REDFLUX]: {
+ 
-    light: undefined,
-    dark: "redflux_dark",
-  },
-  [Theme.BLUENEY]: {
-    light: undefined,
-    dark: "blueney_dark",
-  },
-  [Theme.UIKIT]: {
-    light: "uikit_light",
-    dark: "uikit_dark",
-  },
 };
 
 export type PageProps = ReturnType<typeof useModal>;

apps/demo/src/Create.tsx

@@ -55,7 +55,7 @@ export const Create = (props: PageProps) => {
     >
       <form className="page__create clr-gray-900" onSubmit={submit}>
         <div className="page__create__group">
-          <h3 className="fw-bold fs-h3">General Information</h3>
+          <h3 className="clr-content-semantic--neutral--primary fw-bold fs-h3">General Information</h3>
           <Alert type={VariantType.INFO}>
             You are about to add a new character to the collection
           </Alert>
@@ -91,7 +91,7 @@ export const Create = (props: PageProps) => {
           <Checkbox name="is_guest" label="This character is a guest" />
         </div>
         <div className="page__create__group mt-l">
-          <h3 className="fw-bold fs-h3">Bio</h3>
+          <h3 className="clr-content-semantic--neutral--primary fw-bold fs-h3">Bio</h3>
           <Alert type={VariantType.WARNING}>
             Please be exhaustive, every detail counts!
           </Alert>
@@ -127,7 +127,7 @@ export const Create = (props: PageProps) => {
           <Switch name="is_public" label="Make this character public" />
 
           <div>
-            <h4>Add pictures</h4>
+            <h4 className="clr-content-semantic--neutral--primary">Add pictures</h4>
 
             <div className="mt-s">
               <FileUploader

apps/demo/src/Home.tsx

@@ -57,11 +57,11 @@ export const Home = ({ modal }: { modal: PageProps }) => {
   return (
     <main className="page__home">
       <header className="page__home__title">
-        <h1 className="clr-gray-900">
+        <h1 className="clr-content-semantic--neutral--primary">
           {/* eslint-disable-next-line react/no-unescaped-entities */}
           🍿Cunningham's <span className="clr-brand-400">Cast</span>
         </h1>
-        <p className="clr-gray-600 fs-m fw-regular">
+        <p className="clr-content-semantic--neutral--tertiary fs-sm fw-regular">
           Happy Days is an American television sitcom that aired first-run from
           January 15, 1974, to September 24, 1984, on ABC-TV
           <br /> with a total of 255 half-hour episodes spanning over eleven
@@ -70,6 +70,7 @@ export const Home = ({ modal }: { modal: PageProps }) => {
           Created by Garry Marshall, the series presented an idealized vision of
           life in the mid-1950s to mid-1960s Midwestern United States.
         </p>
+        
         <Button
           color="primary"
           icon={<span className="material-icons">movie</span>}
@@ -126,7 +127,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
                 id: "actions",
                 renderCell: (params) => (
                   <Button
-                    color="tertiary-text"
+                    color="tertiary"
+                    variant="neutral"
                     size="small"
                     onClick={async () => {
                       const decision = await modals.deleteConfirmationModal();
@@ -164,7 +166,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
           <li>
             <Button
               size="small"
-              color="tertiary-text"
+              color="tertiary"
+              variant="neutral"
               target="_blank"
               rel="noopener noreferrer"
               href="https://www.france-universite-numerique.fr/en/"
@@ -177,7 +180,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
           <li>
             <Button
               size="small"
-              color="tertiary-text"
+              color="tertiary"
+              variant="neutral"
               target="_blank"
               rel="noopener noreferrer"
               href="https://discord.gg/TXPSCMeDzd"
@@ -188,7 +192,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
           <li>
             <Button
               size="small"
-              color="tertiary-text"
+              color="tertiary"
+              variant="neutral"
               target="_blank"
               rel="noopener noreferrer"
               href="https://github.com/openfun/cunningham"
@@ -199,7 +204,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
           <li>
             <Button
               size="small"
-              color="tertiary-text"
+              color="tertiary"
+              variant="neutral"
               target="_blank"
               rel="noopener noreferrer"
               href="https://openfun.github.io/cunningham/storybook"
@@ -210,7 +216,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
           <li>
             <Button
               size="small"
-              color="tertiary-text"
+              color="tertiary"
+              variant="neutral"
               target="_blank"
               rel="noopener noreferrer"
               href="https://www.figma.com/file/JbPT1R6YUFW4oH8jHvH960/DS-Cunningham---PUBLIC?type=design"

apps/demo/src/Onboarding.tsx

@@ -29,7 +29,7 @@ const Onboarding = () => {
           </Button>
           <Button
             href="https://openfun.github.io/cunningham/storybook"
-            color="tertiary-text"
+            color="tertiary"
             size="small"
             icon={<span className="material-icons">open_in_new</span>}
             fullWidth={true}

apps/demo/src/index.scss

@@ -10,7 +10,7 @@ $sm: map.get($themes, "default", "theme", "breakpoints", "sm");
 
 // Reset
 h1 {
-  font-family: var(--c--theme--font--families--accent);
+  font-family: var(--c--globals--font--families--accent);
   font-size: clamp(2.5rem, 7vw, 4rem);
   margin: 0;
 }
@@ -20,7 +20,7 @@ p {
 }
 
 a {
-  color: var(--c--theme--colors--greyscale-800);
+  color: var(--c--contextuals--background--surface--primary);
   text-decoration: underline;
 }
 
@@ -33,7 +33,7 @@ html, body, #root {
 }
 
 html {
-  background: linear-gradient(153deg, var(--c--theme--colors--greyscale-100) 0%, var(--c--theme--colors--greyscale-000) 100%);
+  background: linear-gradient(153deg, var(--c--contextuals--background--surface--tertiary) 0%, var(--c--contextuals--background--surface--primary) 100%);
   background-attachment: fixed;
 }
 
@@ -58,10 +58,10 @@ html {
 }
 
 .card {
-  background-color: var(--c--theme--colors--greyscale-000);
+  background-color: var(--c--contextuals--background--surface--secondary);
   padding: 2rem;
   border-radius: var(--c--components--card--border-radius, 4px);
-  border: var(--c--components--card--border-width, 1px) var(--c--theme--colors--greyscale-300) solid;
+  border: var(--c--components--card--border-width, 1px) var(--c--contextuals--border--semantic--neutral--tertiary) solid;
   box-shadow: var(--c--components--card--box-shadow, rgba(149, 157, 165, 0.2) 0px 8px 24px);
 }
 
@@ -122,7 +122,7 @@ html[data-theme="cunningham"][data-variant="light"] body {
 }
 
 html[data-theme="uikit"] {
-  background: linear-gradient(153deg, var(--c--theme--colors--greyscale-025) 0%, var(--c--theme--colors--greyscale-000) 100%);
+  background: linear-gradient(153deg, var(--c--theme--colors--gray-025) 0%, var(--c--theme--colors--gray-000) 100%);
   background-blend-mode: darken;
 }
 
@@ -197,7 +197,7 @@ html[data-theme="blueney"] {
 }
 
 .links {
-  border-top: thin solid var(--c--theme--colors--greyscale-300);
+  border-top: thin solid var(--c--contextuals--border--semantic--neutral--tertiary);
   display: flex;
   justify-content: space-between;
   gap: 0.5rem;