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

update LabelledBox token and css files with new css variables introduce
with the new tokens architectures
---
 .../src/components/Forms/LabelledBox/_index.scss   | 14 +++++++++-----
 .../components/Forms/LabelledBox/index.stories.tsx |  4 ++--
 .../src/components/Forms/LabelledBox/tokens.ts     |  9 +++++----
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/components/Forms/LabelledBox/_index.scss b/packages/react/src/components/Forms/LabelledBox/_index.scss
index 4fe51d9..6f07a6b 100644
--- a/packages/react/src/components/Forms/LabelledBox/_index.scss
+++ b/packages/react/src/components/Forms/LabelledBox/_index.scss
@@ -10,17 +10,17 @@
 
   label {
     position: absolute;
-    font-size: var(--c--theme--font--sizes--s);
+    font-size: var(--c--globals--font--sizes--t);
     left: 0;
     top: 0.5rem;
-    transition: all var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
+    transition: all var(--c--globals--transitions--duration)
+      var(--c--globals--transitions--ease-out);
     color: var(--c--components--forms-labelledbox--label-color--small);
     // Enable text overflow ellipsis.
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
 
-
     &.placeholder {
       @extend %text-style;
       top: 16px;
@@ -66,10 +66,14 @@
 
   &--disabled {
     label {
-      color: var(--c--components--forms-labelledbox--label-color--small--disabled);
+      color: var(
+        --c--components--forms-labelledbox--label-color--small--disabled
+      );
 
       &.placeholder {
-        color: var(--c--components--forms-labelledbox--label-color--big--disabled);
+        color: var(
+          --c--components--forms-labelledbox--label-color--big--disabled
+        );
       }
     }
   }
diff --git a/packages/react/src/components/Forms/LabelledBox/index.stories.tsx b/packages/react/src/components/Forms/LabelledBox/index.stories.tsx
index ccdf783..c856033 100644
--- a/packages/react/src/components/Forms/LabelledBox/index.stories.tsx
+++ b/packages/react/src/components/Forms/LabelledBox/index.stories.tsx
@@ -27,7 +27,7 @@ export const Default = {
   render: Template,
   args: {
     label: "Your label here",
-    children: <span className="clr-greyscale-800">Hello world</span>,
+    children: <span className="clr-gray-800">Hello world</span>,
   },
 };
 
@@ -44,6 +44,6 @@ export const NoLabel = {
   args: {
     label: "Your label here",
     hideLabel: true,
-    children: <span className="clr-greyscale-800">Hello world</span>,
+    children: <span className="clr-gray-800">Hello world</span>,
   },
 };
diff --git a/packages/react/src/components/Forms/LabelledBox/tokens.ts b/packages/react/src/components/Forms/LabelledBox/tokens.ts
index eeebaa6..9d93472 100644
--- a/packages/react/src/components/Forms/LabelledBox/tokens.ts
+++ b/packages/react/src/components/Forms/LabelledBox/tokens.ts
@@ -1,8 +1,9 @@
 import { DefaultTokens } from "@openfun/cunningham-tokens";
 
 export const tokens = (defaults: DefaultTokens) => ({
-  "label-color--small": defaults.theme.colors["greyscale-600"],
-  "label-color--big": defaults.theme.colors["greyscale-900"],
-  "label-color--small--disabled": defaults.theme.colors["greyscale-600"],
-  "label-color--big--disabled": defaults.theme.colors["greyscale-600"],
+  "label-color--small": defaults.contextuals.content.semantic.neutral.tertiary,
+  "label-color--big": defaults.contextuals.content.semantic.neutral.primary,
+  "label-color--small--disabled":
+    defaults.contextuals.content.semantic.neutral.secondary,
+  "label-color--big--disabled": defaults.contextuals.content.semantic.neutral.secondary,
 });