🎨(react) enhance Modal component styles

update Modal token and css files with new css variables introduce
with the new tokens architectures

packages/react/src/components/Modal/DeleteConfirmationModal.tsx

@@ -16,7 +16,9 @@ export const DeleteConfirmationModal = ({
   return (
     <Modal
       title={title ?? t("components.modals.helpers.delete_confirmation.title")}
-      titleIcon={<span className="material-icons clr-danger-600">delete</span>}
+      titleIcon={
+        <span className="material-icons  delete-confirmation-icon">delete</span>
+      }
       size={ModalSize.SMALL}
       actions={
         <>
@@ -30,7 +32,7 @@ export const DeleteConfirmationModal = ({
           <Button
             fullWidth={true}
             onClick={() => onDecide("delete")}
-            color="danger"
+            variant="error"
           >
             {t("components.modals.helpers.delete_confirmation.delete")}
           </Button>

packages/react/src/components/Modal/MessageModal.tsx

@@ -4,7 +4,7 @@ import { Modal, ModalSize } from ":/components/Modal/index";
 import { useCunningham } from ":/components/Provider";
 import { Button } from ":/components/Button";
 import { DecisionModalProps } from ":/components/Modal/ModalProvider";
-import { colorFromType, iconFromType, VariantType } from ":/utils/VariantUtils";
+import { iconFromType, VariantType } from ":/utils/VariantUtils";
 
 export type MessageModalProps = DecisionModalProps & {
   messageType: VariantType;
@@ -26,7 +26,7 @@ export const MessageModal = ({
           <span
             className={classNames(
               "material-icons",
-              `clr-${colorFromType(messageType)}-600`,
+              `modal-message-${messageType}-icon`
             )}
           >
             {iconFromType(messageType)}

packages/react/src/components/Modal/index.scss

@@ -53,7 +53,7 @@
   }
 
   &__title {
-    --font-size: var(--c--theme--font--sizes--h2);
+    --font-size: var(--c--globals--font--sizes--h2);
     margin-bottom: 1.5rem;
     font-size: var(--font-size);
     font-weight: var(--c--components--modal--title-font-weight);
@@ -68,6 +68,26 @@
     margin-bottom: 1.5rem;
     --icon-size: 2rem;
 
+    .delete-confirmation-icon {
+      color: var(--c--contextuals--content--semantic--netural--tertiary);
+    }
+
+    .modal-message-error-icon {
+      color: var(--c--contextuals--content--semantic--error--tertiary);
+    }
+
+    .modal-message-warning-icon {
+      color: var(--c--contextuals--content--semantic--warning--tertiary);
+    }
+
+    .modal-message-info-icon {
+      color: var(--c--contextuals--content--semantic--info--tertiary);
+    }
+
+    .modal-message-success-icon {
+      color: var(--c--contextuals--content--semantic--success--tertiary);
+    }
+
     * {
       font-size: var(--icon-size);
     }
@@ -96,10 +116,10 @@
     height: 0;
 
     .c__button {
-      right: -0.75rem;
+      right: -1.1rem;
-      top: -0.75rem;
+      top: -1.1rem;
       position: relative;
-      background: var(--c--components--modal--background-color);
+      
     }
   }
 
@@ -125,7 +145,8 @@
       }
     }
 
-    &__left, &__right {
+    &__left,
+    &__right {
       display: flex;
       gap: 1rem;
     }
@@ -151,7 +172,7 @@
     }
 
     .c__modal__title-icon {
-        --icon-size: 4rem;
+      --icon-size: 4rem;
     }
   }
 
@@ -167,7 +188,7 @@
     }
 
     .c__modal__title-icon {
-        --icon-size: 4rem;
+      --icon-size: 4rem;
     }
   }
 
@@ -179,7 +200,7 @@
     }
 
     .c__modal__title {
-      --font-size: var(--c--theme--font--sizes--h1);
+      --font-size: var(--c--globals--font--sizes--h1);
     }
 
     .c__modal__title-icon {
@@ -204,11 +225,11 @@
 
     .c__modal__content {
       flex-grow: 1;
-      overflow-y:scroll;
+      overflow-y: scroll;
     }
 
     .c__modal__title {
-      --font-size: var(--c--theme--font--sizes--h1);
+      --font-size: var(--c--globals--font--sizes--h1);
     }
 
     .c__modal__title-icon {

packages/react/src/components/Modal/index.tsx

@@ -99,7 +99,8 @@ export const ModalInner = ({ closeOnEsc = true, ...props }: ModalProps) => {
           <div className="c__modal__close">
             <Button
               icon={<span className="material-icons">close</span>}
-              color="tertiary-text"
+              color="tertiary"
+              variant="neutral"
               size="small"
               onClick={props.onClose}
             />

packages/react/src/components/Modal/tokens.ts

@@ -2,17 +2,17 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
 
 export const tokens = (defaults: DefaultTokens) => {
   return {
-    "background-color": defaults.theme.colors["greyscale-000"],
+    "background-color": defaults.contextuals.background.surface.secondary,
-    "backdrop-color": "#0C1A2B99",
+    "backdrop-color": "#00000099",
     "border-radius": "4px",
-    "border-color": defaults.theme.colors["greyscale-300"],
+    "border-color": defaults.contextuals.border.surface.primary,
     "box-shadow": "0px 1px 2px 0px #0C1A2B4D",
-    color: defaults.theme.colors["greyscale-900"],
+    color: defaults.contextuals.content.semantic.neutral.primary,
     // "backdrop-color": "#0C1A2B99", // Does not work yet due to backdrop CSS var support.
-    "title-font-weight": defaults.theme.font.weights.bold,
+    "title-font-weight": defaults.globals.font.weights.bold,
-    "content-font-size": defaults.theme.font.sizes.m,
+    "content-font-size": defaults.globals.font.sizes.sm,
-    "content-font-weight": defaults.theme.font.weights.regular,
+    "content-font-weight": defaults.globals.font.weights.regular,
-    "content-color": defaults.theme.colors["greyscale-800"],
+    "content-color": defaults.contextuals.content.semantic.neutral.primary,
     "width-small": "300px",
     "width-medium": "600px",
     "width-large": "800px",