🎨(react) enhance Toast component styles

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

packages/react/src/components/Toast/index.mdx

@@ -88,7 +88,7 @@ Here a the custom design tokens defined by the Toast.
 
 | Token        	| Description                 	|
 |---------------	|-----------------------------	|
-| slide-in-duration 	| Time the toast takes to slide in 	|
+| slide-in-duration   | Time the toast takes to slide in 	|
 | slide-out-duration 	| Time the toast takes to slide out	|
 | background-color 	| Default background color 	|
 | color 	| Color of the content	|

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

@@ -1,5 +1,17 @@
 @use "../../utils/responsive" as *;
 
+@mixin toast-variant($context) {
+  .c__progress-bar {
+    --c--progress--color: var(
+      --c--contextuals--background--semantic--#{$context}--primary
+    );
+  }
+
+  .c__toast__icon {
+    color: var(--c--contextuals--content--semantic--#{$context}--primary);
+  }
+}
+
 .c__toast__container {
   position: fixed;
   bottom: 0;
@@ -27,7 +39,7 @@
 
 .c__toast {
   border-radius: 4px;
-  box-shadow: 0 2px 6px 2px #0C1A2B26;
+  box-shadow: 0 2px 6px 2px #0c1a2b26;
   background-color: var(--c--components--toast--background-color);
   min-width: 18rem;
   max-width: 27rem;
@@ -41,7 +53,8 @@
   }
 
   &--disappear:not(.c__toast--no-animate) {
-    animation: slide-out var(--c--components--toast--slide-out-duration) ease forwards;
+    animation: slide-out var(--c--components--toast--slide-out-duration) ease
+      forwards;
   }
 
   &__icon {
@@ -74,54 +87,29 @@
   }
 
   .c__progress-bar {
-    --c--progress--color: var(--c--theme--colors--greyscale-600);
+    --c--progress--color: var(--c--contextuals--background--semantic--neutral--primary);
   }
 
   &--info {
-    .c__progress-bar {
+    @include toast-variant("info");
-      --c--progress--color: var(--c--theme--colors--info-500);
-    }
-
-    .c__toast__icon {
-      color: var(--c--theme--colors--info-600);
-    }
   }
 
   &--success {
-    .c__progress-bar {
+    @include toast-variant("success");
-      --c--progress--color: var(--c--theme--colors--success-500);
-    }
-
-    .c__toast__icon {
-      color: var(--c--theme--colors--success-600);
-    }
   }
 
   &--warning {
-    .c__progress-bar {
+    @include toast-variant("warning");
-      --c--progress--color: var(--c--theme--colors--warning-500);
-    }
-
-    .c__toast__icon {
-      color: var(--c--theme--colors--warning-600);
-    }
   }
 
   &--error {
-    .c__progress-bar {
+    @include toast-variant("error");
-      --c--progress--color: var(--c--theme--colors--danger-500);
-    }
-
-    .c__toast__icon {
-      color: var(--c--theme--colors--danger-600);
-    }
   }
-
 }
 
 @keyframes slide-out {
   from {
-    transform: translateX(0)
+    transform: translateX(0);
   }
   to {
     transform: translateX(-100%);
@@ -131,23 +119,22 @@
 
 @keyframes fade-in {
   from {
-    opacity: 0
+    opacity: 0;
   }
 }
 
 @keyframes slide-in {
   from {
-    transform: translateY(200px)
+    transform: translateY(200px);
   }
 }
 
 .c__progress-bar {
   height: var(--c--components--toast--progress-bar-height);
-  --c--progress--color: var(--c--theme--colors--primary-500);
+  --c--progress--color: var(--c--contextuals--background--semantic--brand--primary);
 
   &__content {
     height: 100%;
     background-color: var(--c--progress--color);
   }
 }
-

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

@@ -71,7 +71,7 @@ export const Toast = (props: ToastProps) => {
         {props.primaryLabel && (
           <div className="c__toast__content__buttons">
             <Button
-              color="primary-text"
+              color="primary"
               onClick={props.primaryOnClick}
               {...props.primaryProps}
             >

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

@@ -4,9 +4,9 @@ export const tokens = (defaults: DefaultTokens) => {
   return {
     "slide-in-duration": "1000ms",
     "slide-out-duration": "300ms",
-    "background-color": defaults.theme.colors["greyscale-100"],
+    "background-color": defaults.contextuals.background.semantic.neutral.tertiary,
-    color: defaults.theme.colors["greyscale-900"],
+    color: defaults.contextuals.content.semantic.neutral.primary,
-    "font-weight": defaults.theme.font.weights.regular,
+    "font-weight": defaults.globals.font.weights.regular,
     "icon-size": "19px",
     "progress-bar-height": "3px",
   };