From f685abb36c761c996a073e0434d317a0dfc30775 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Tue, 13 Feb 2024 14:31:09 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(react)=20use=20info=20design?=
 =?UTF-8?q?=20tokens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Some info variant of components were using primary design token instead
of info.
---
 .changeset/gorgeous-sloths-compete.md           | 5 +++++
 packages/react/src/components/Alert/_index.scss | 6 +++---
 packages/react/src/components/Toast/index.scss  | 4 ++--
 3 files changed, 10 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/gorgeous-sloths-compete.md

diff --git a/.changeset/gorgeous-sloths-compete.md b/.changeset/gorgeous-sloths-compete.md
new file mode 100644
index 0000000..e93017c
--- /dev/null
+++ b/.changeset/gorgeous-sloths-compete.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+use info design tokens
diff --git a/packages/react/src/components/Alert/_index.scss b/packages/react/src/components/Alert/_index.scss
index 35ba9b5..e30a39e 100644
--- a/packages/react/src/components/Alert/_index.scss
+++ b/packages/react/src/components/Alert/_index.scss
@@ -65,11 +65,11 @@
   }
 
   &--info {
-    border-color: var(--c--theme--colors--primary-300);
-    border-left-color: var(--c--theme--colors--primary-600);
+    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--primary-600);
+      color: var(--c--theme--colors--info-600);
     }
   }
 
diff --git a/packages/react/src/components/Toast/index.scss b/packages/react/src/components/Toast/index.scss
index fe64bf2..24fe7c1 100644
--- a/packages/react/src/components/Toast/index.scss
+++ b/packages/react/src/components/Toast/index.scss
@@ -79,11 +79,11 @@
 
   &--info {
     .c__progress-bar {
-      --c--progress--color: var(--c--theme--colors--primary-500);
+      --c--progress--color: var(--c--theme--colors--info-500);
     }
 
     .c__toast__icon {
-      color: var(--c--theme--colors--primary-600);
+      color: var(--c--theme--colors--info-600);
     }
   }