From a989e21139d09510e92dd9b34c5f96974da27fd0 Mon Sep 17 00:00:00 2001
From: jialecl <jialestrabajos@gmail.com>
Date: Thu, 8 Oct 2026 09:50:15 +0200
Subject: [PATCH] Toast color contrast a11y improved

- Added new alias token "--border-color-warning-strong"
- Tokens changed for the warning and default toast
- Correct tokens applied to the toast component
---
 packages/lib/src/styles/tokens.ts     |  1 +
 packages/lib/src/styles/variables.css |  1 +
 packages/lib/src/toast/Toast.tsx      |  2 +-
 packages/lib/src/toast/utils.ts       | 12 ++++++++----
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/lib/src/styles/tokens.ts b/packages/lib/src/styles/tokens.ts
index f5face5beb..2a6f4422e9 100644
--- a/packages/lib/src/styles/tokens.ts
+++ b/packages/lib/src/styles/tokens.ts
@@ -185,6 +185,7 @@ export const aliasTokens: Record<string, string | number> = {
   "--border-color-success-medium": "var(--color-semantic02-600)",
   "--border-color-warning-light": "var(--color-semantic03-300)",
   "--border-color-warning-medium": "var(--color-semantic03-500)",
+  "--border-color-warning-strong": "var(--color-semantic03-600)",
   "--border-color-error-light": "var(--color-semantic04-300)",
   "--border-color-error-medium": "var(--color-semantic04-600)",
   "--border-color-error-strong": "var(--color-semantic04-700)",
diff --git a/packages/lib/src/styles/variables.css b/packages/lib/src/styles/variables.css
index 5a33cc15ca..505df5fe26 100644
--- a/packages/lib/src/styles/variables.css
+++ b/packages/lib/src/styles/variables.css
@@ -179,6 +179,7 @@
   --border-color-success-medium: var(--color-semantic02-600);
   --border-color-warning-light: var(--color-semantic03-300);
   --border-color-warning-medium: var(--color-semantic03-500);
+  --border-color-warning-strong: var(--color-semantic03-600);
   --border-color-error-light: var(--color-semantic04-300);
   --border-color-error-medium: var(--color-semantic04-600);
   --border-color-error-strong: var(--color-semantic04-700);
diff --git a/packages/lib/src/toast/Toast.tsx b/packages/lib/src/toast/Toast.tsx
index 93121f0aee..d1c6297317 100644
--- a/packages/lib/src/toast/Toast.tsx
+++ b/packages/lib/src/toast/Toast.tsx
@@ -38,7 +38,7 @@ const Toast = styled.output<{ semantic: ToastPropsType["semantic"]; isClosing: b
   min-width: 200px;
   max-width: 600px;
   width: fit-content;
-  border-left: var(--border-width-m) var(--border-style-default) ${({ semantic }) => getSemantic(semantic).primaryColor};
+  border-left: var(--border-width-m) var(--border-style-default) ${({ semantic }) => getSemantic(semantic).borderColor};
   border-radius: var(--border-radius-s);
   box-shadow: var(--shadow-100);
   display: inline-flex;
diff --git a/packages/lib/src/toast/utils.ts b/packages/lib/src/toast/utils.ts
index ac80b9ccb5..9b72725584 100644
--- a/packages/lib/src/toast/utils.ts
+++ b/packages/lib/src/toast/utils.ts
@@ -4,25 +4,29 @@ export default function getSemantic(semantic: ToastPropsType["semantic"]) {
   switch (semantic) {
     case "default":
       return {
-        primaryColor: "var(--border-color-primary-stronger)",
+        primaryColor: "var(--color-fg-primary-stronger)",
+        borderColor: "var(--border-color-primary-stronger)",
         secondaryColor: "var(--color-bg-primary-lighter)",
         icon: "",
       };
     case "info":
       return {
-        primaryColor: "var(--border-color-info-strong)",
+        primaryColor: "var(--color-fg-info-strong)",
+        borderColor: "var(--border-color-info-strong)",
         secondaryColor: "var(--color-bg-info-lighter)",
         icon: "filled_info",
       };
     case "success":
       return {
-        primaryColor: "var(--border-color-success-medium)",
+        primaryColor: "var(--color-fg-success-medium)",
+        borderColor: "var(--border-color-success-medium)",
         secondaryColor: "var(--color-bg-success-lighter)",
         icon: "filled_check_circle",
       };
     case "warning":
       return {
-        primaryColor: "var(--border-color-warning-medium)",
+        primaryColor: "var(--color-fg-warning-strong)",
+        borderColor: "var(--border-color-warning-strong)",
         secondaryColor: "var(--color-bg-warning-lighter)",
         icon: "filled_warning",
       };