🎨(react) enhance field component styles

update field token and css files with new css variables introduce
with the new tokens architectures

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);
     }
   }
 

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}

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,
 });