🎨(react) enhance alert component styles

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

packages/react/src/components/Alert/AlertAdditionalExpandable.tsx

@@ -11,11 +11,12 @@ export const AlertAdditionalExpandable = (props: AlertProps) => {
   const [expanded, onExpand] = useControllableState(
     false,
     props.expanded,
-    props.onExpand,
+    props.onExpand
   );
 
   const iconButton = (
     <Button
+      variant={props.type}
       color="tertiary"
       size="nano"
       aria-label={

packages/react/src/components/Alert/Utils.tsx

@@ -42,6 +42,7 @@ export const AlertClose = (props: AlertProps) => {
   return (
     props.canClose && (
       <Button
+        variant={props.type}
         color="tertiary"
         size="small"
         icon={<span className="material-icons">close</span>}
@@ -59,7 +60,8 @@ export const AlertButtons = (props: AlertProps) => {
     <>
       {props.tertiaryLabel && (
         <Button
-          color="tertiary-text"
+          color="tertiary"
+          variant={props.type}
           onClick={props.tertiaryOnClick}
           {...props.tertiaryProps}
         >
@@ -68,7 +70,8 @@ export const AlertButtons = (props: AlertProps) => {
       )}
       {props.primaryLabel && (
         <Button
-          color="primary-text"
+          variant={props.type}
+          color="secondary"
           onClick={props.primaryOnClick}
           {...props.primaryProps}
         >

packages/react/src/components/Alert/_index.scss

@@ -1,3 +1,23 @@
+@mixin alert-variant($context) {
+  background-color: color-mix(
+    in srgb,
+    var(--c--contextuals--background--semantic--#{$context}--tertiary),
+    transparent 70%
+  );
+
+  border-color: var(--c--contextuals--border--semantic--#{$context}--tertiary);
+  border-left-color: var(--c--contextuals--border--semantic--#{$context}--tertiary);
+  color: var(--c--contextuals--content--semantic--#{$context}--primary) !important;
+  .c__alert__icon {
+    color: var(--c--contextuals--content--semantic--#{$context}--primary);
+  }
+
+  .c__alert__additional {
+    font-weight: var(--c--components--alert--additional-font-weight);
+    color: var(--c--contextuals--content--semantic--#{$context}--secondary);
+  }
+}
+
 .c__alert {
   padding: 0.75rem 1rem;
   background-color: var(--c--components--alert--background-color);
@@ -8,8 +28,8 @@
   font-weight: var(--c--components--alert--font-weight);
   color: var(--c--components--alert--color);
   box-sizing: border-box;
-  border-color: var(--c--theme--colors--greyscale-300);
-  border-left-color: var(--c--theme--colors--greyscale-600);
+  border-color: var(--c--components--alert--border-color);
+  border-left-color: var(--c--components--alert--border-left-color);
 
   &__icon {
     display: flex;
@@ -40,7 +60,6 @@
   }
 
   &-additional {
-
     &__buttons {
       display: flex;
       justify-content: flex-end;
@@ -48,12 +67,8 @@
     }
   }
 
-  .c__alert__additional {
-    font-weight: var(--c--components--alert--additional-font-weight);
-    color: var(--c--components--alert--additional-color);
-  }
-
-  &:not(.c__alert--neutral), &.c__alert--expandable {
+  &:not(.c__alert--neutral),
+  &.c__alert--expandable {
     .c__alert__additional {
       padding-left: 2rem;
     }
@@ -62,41 +77,22 @@
   &__actions {
     display: flex;
     align-items: center;
+    gap: 0.5rem;
   }
 
   &--info {
-    border-color: var(--c--theme--colors--info-300);
-    border-left-color: var(--c--theme--colors--info-600);
-
-    .c__alert__icon {
-      color: var(--c--theme--colors--info-600);
-    }
+    @include alert-variant("info");
   }
 
   &--success {
-    border-color: var(--c--theme--colors--success-300);
-    border-left-color: var(--c--theme--colors--success-600);
-
-    .c__alert__icon {
-      color: var(--c--theme--colors--success-600);
-    }
+    @include alert-variant("success");
   }
 
   &--warning {
-    border-color: var(--c--theme--colors--warning-300);
-    border-left-color: var(--c--theme--colors--warning-600);
-
-    .c__alert__icon {
-      color: var(--c--theme--colors--warning-600);
-    }
+    @include alert-variant("warning");
   }
 
   &--error {
-    border-color: var(--c--theme--colors--danger-300);
-    border-left-color: var(--c--theme--colors--danger-600);
-
-    .c__alert__icon {
-      color: var(--c--theme--colors--danger-600);
-    }
+    @include alert-variant("error");
   }
 }

packages/react/src/components/Alert/index.stories.tsx

@@ -58,8 +58,12 @@ export const CustomButtons: Story = {
     canClose: true,
     buttons: (
       <div style={{ display: "flex", gap: "0.5rem" }}>
-        <Button color="primary">Primary</Button>
-        <Button color="secondary">Secondary</Button>
+        <Button variant="brand" color="primary">
+          Primary
+        </Button>
+        <Button variant="brand" color="secondary">
+          Secondary
+        </Button>
       </div>
     ),
   },

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

@@ -2,12 +2,14 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
 
 export const tokens = (defaults: DefaultTokens) => {
   return {
-    "background-color": defaults.theme.colors["greyscale-100"],
+    "background-color": defaults.contextuals.background.semantic.neutral.tertiary,
     "border-radius": "4px",
-    "font-weight": defaults.theme.font.weights.medium,
-    color: defaults.theme.colors["greyscale-900"],
+    "border-color": defaults.contextuals.border.semantic.neutral.primary,
+    "border-left-color": defaults.contextuals.border.semantic.neutral.primary,
+    "font-weight": defaults.globals.font.weights.medium,
+    color: defaults.contextuals.content.semantic.neutral.primary,
     "icon-size": "19px",
-    "additional-font-weight": defaults.theme.font.weights.regular,
-    "additional-color": defaults.theme.colors["greyscale-700"],
+    "additional-font-weight": defaults.globals.font.weights.regular,
+    "additional-color": defaults.contextuals.content.semantic.neutral.primary,
   };
 };