🎨(demo) implement new tokens

implements the new token architecture

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;