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

update field token and css files with new css variables introduce
with the new tokens architectures
---
 .../src/components/Forms/Field/_index.scss      | 17 +++++++++++------
 .../react/src/components/Forms/Field/index.tsx  |  3 +++
 .../react/src/components/Forms/Field/tokens.ts  |  7 +++++--
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/components/Forms/Field/_index.scss b/packages/react/src/components/Forms/Field/_index.scss
index 9919fc7..0f9c3f4 100644
--- a/packages/react/src/components/Forms/Field/_index.scss
+++ b/packages/react/src/components/Forms/Field/_index.scss
@@ -6,6 +6,10 @@
   box-sizing: border-box;
   min-width: 0;
 
+  &--disabled {
+   color: var(--c--components--forms-field--color--disabled);
+  }
+
   &__footer {
     font-size: var(--c--components--forms-field--font-size);
     padding: 0.25rem calc(1rem + 2px) 0 calc(1rem + 2px);
@@ -16,7 +20,7 @@
     }
 
     ul {
-      margin: 0.20rem 0 0 0;
+      margin: 0.2rem 0 0 0;
       padding: 0 0 0 1rem;
       line-height: 1rem;
     }
@@ -31,18 +35,19 @@
   }
 
   &--error {
-    color: var(--c--theme--colors--danger-500);
+    color: var(--c--components--forms-field--color--error);
 
-    label, .labelled-box label {
-      color: var(--c--theme--colors--danger-500);
+    label,
+    .labelled-box label {
+      color: var(--c--components--forms-field--color--error);
     }
   }
 
   &--success {
-    color: var(--c--theme--colors--success-600);
+    color: var(--c--components--forms-field--color--success);
 
     .c__field__text {
-      color: var(--c--theme--colors--success-600);
+      color: var(--c--components--forms-field--color--success);
     }
   }
 
diff --git a/packages/react/src/components/Forms/Field/index.tsx b/packages/react/src/components/Forms/Field/index.tsx
index 4481470..0d5b47a 100644
--- a/packages/react/src/components/Forms/Field/index.tsx
+++ b/packages/react/src/components/Forms/Field/index.tsx
@@ -11,6 +11,7 @@ export type FieldProps = {
   fullWidth?: boolean | undefined;
   compact?: boolean | undefined;
   className?: string | undefined;
+  disabled?: boolean | undefined;
 };
 
 type Props = FieldProps & PropsWithChildren;
@@ -24,12 +25,14 @@ export const Field = ({
   fullWidth,
   compact,
   className,
+  disabled,
 }: Props) => {
   return (
     <div
       className={classNames("c__field", "c__field--" + state, className, {
         "c__field--full-width": fullWidth,
         "c__field--compact": compact && !fullWidth,
+        "c__field--disabled": disabled,
       })}
     >
       {children}
diff --git a/packages/react/src/components/Forms/Field/tokens.ts b/packages/react/src/components/Forms/Field/tokens.ts
index 6775109..50707b0 100644
--- a/packages/react/src/components/Forms/Field/tokens.ts
+++ b/packages/react/src/components/Forms/Field/tokens.ts
@@ -2,6 +2,9 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
 
 export const tokens = (defaults: DefaultTokens) => ({
   width: "292px",
-  "font-size": defaults.theme.font.sizes.s,
-  color: defaults.theme.colors["greyscale-600"],
+  "font-size": defaults.globals.font.sizes.s,
+  color: defaults.contextuals.content.semantic.neutral.secondary,
+  "color--error": defaults.contextuals.content.semantic.error.secondary,
+  "color--success": defaults.contextuals.content.semantic.success.secondary,
+  "color--disabled": defaults.contextuals.content.semantic.disabled.primary,
 });