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

update Loader token and css files with new css variables introduce
with the new tokens architectures
---
 .../react/src/components/Loader/_index.scss   | 35 +++++++++++++------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/components/Loader/_index.scss b/packages/react/src/components/Loader/_index.scss
index 61ab788..73a80f3 100644
--- a/packages/react/src/components/Loader/_index.scss
+++ b/packages/react/src/components/Loader/_index.scss
@@ -11,13 +11,14 @@
     inset: 0;
     border-radius: 50%;
     border-style: solid;
-    border-color: var(--c--theme--colors--primary-700);
+    border-color: var(--c--contextuals--border--semantic--brand--primary);
     animation: prixClipFix 2s linear infinite;
   }
 
   &::after {
-    border-color: var(--c--theme--colors--primary-400);
-    animation: prixClipFix 2s linear infinite,
+    border-color: var(--c--contextuals--border--semantic--brand--secondary);
+    animation:
+      prixClipFix 2s linear infinite,
       rotate 0.5s linear infinite reverse;
     inset: 6px;
   }
@@ -48,14 +49,28 @@
 }
 
 @keyframes rotate {
-  0%   {transform: rotate(0deg)}
-  100%   {transform: rotate(360deg)}
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes prixClipFix {
-  0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
-  25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
-  50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
-  75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
-  100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+  25% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+  75% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+  }
+  100% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
 }