From 610537781117315c8f74dda94cdc71034631e020 Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Fri, 22 Aug 2025 10:16:01 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8(react)=20enhance=20Toast=20compone?=
 =?UTF-8?q?nt=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

update Toast token and css files with new css variables introduce
with the new tokens architectures
---
 packages/react/src/components/Toast/index.mdx |  2 +-
 .../react/src/components/Toast/index.scss     | 61 ++++++++-----------
 packages/react/src/components/Toast/index.tsx |  2 +-
 packages/react/src/components/Toast/tokens.ts |  6 +-
 4 files changed, 29 insertions(+), 42 deletions(-)

diff --git a/packages/react/src/components/Toast/index.mdx b/packages/react/src/components/Toast/index.mdx
index 679fd47..fb959d9 100644
--- a/packages/react/src/components/Toast/index.mdx
+++ b/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	|
diff --git a/packages/react/src/components/Toast/index.scss b/packages/react/src/components/Toast/index.scss
index 24fe7c1..f9a00de 100644
--- a/packages/react/src/components/Toast/index.scss
+++ b/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 {
-      --c--progress--color: var(--c--theme--colors--info-500);
-    }
-
-    .c__toast__icon {
-      color: var(--c--theme--colors--info-600);
-    }
+    @include toast-variant("info");
   }
 
   &--success {
-    .c__progress-bar {
-      --c--progress--color: var(--c--theme--colors--success-500);
-    }
-
-    .c__toast__icon {
-      color: var(--c--theme--colors--success-600);
-    }
+    @include toast-variant("success");
   }
 
   &--warning {
-    .c__progress-bar {
-      --c--progress--color: var(--c--theme--colors--warning-500);
-    }
-
-    .c__toast__icon {
-      color: var(--c--theme--colors--warning-600);
-    }
+    @include toast-variant("warning");
   }
 
   &--error {
-    .c__progress-bar {
-      --c--progress--color: var(--c--theme--colors--danger-500);
-    }
-
-    .c__toast__icon {
-      color: var(--c--theme--colors--danger-600);
-    }
+    @include toast-variant("error");
   }
-
 }
 
 @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);
   }
 }
-
diff --git a/packages/react/src/components/Toast/index.tsx b/packages/react/src/components/Toast/index.tsx
index c9e7002..5840151 100644
--- a/packages/react/src/components/Toast/index.tsx
+++ b/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}
             >
diff --git a/packages/react/src/components/Toast/tokens.ts b/packages/react/src/components/Toast/tokens.ts
index 618965e..29601cd 100644
--- a/packages/react/src/components/Toast/tokens.ts
+++ b/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"],
-    color: defaults.theme.colors["greyscale-900"],
-    "font-weight": defaults.theme.font.weights.regular,
+    "background-color": defaults.contextuals.background.semantic.neutral.tertiary,
+    color: defaults.contextuals.content.semantic.neutral.primary,
+    "font-weight": defaults.globals.font.weights.regular,
     "icon-size": "19px",
     "progress-bar-height": "3px",
   };