💄(react) homogenize form fields colors

Based on the QA feedbacks we figured out that form fields were not all
using the exact same greyscale colors.

packages/react/src/components/Forms/LabelledBox/index.scss

@@ -14,12 +14,12 @@
     left: 0;
     top: 0.5rem;
     transition: all var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
-    color: var(--c--theme--colors--greyscale-900);
-    opacity: 0.8;
+    color: var(--c--components--forms-labelledbox--label-color--small);
 
     &.placeholder {
       @extend %text-style;
       top: 16px;
+      color: var(--c--components--forms-labelledbox--label-color--big);
     }
   }
 
@@ -54,4 +54,14 @@
       padding: 0;
     }
   }
+
+  &--disabled {
+    label {
+      color: var(--c--components--forms-labelledbox--label-color--small--disabled);
+
+      &.placeholder {
+        color: var(--c--components--forms-labelledbox--label-color--big--disabled);
+      }
+    }
+  }
 }

packages/react/src/components/Forms/LabelledBox/index.tsx

@@ -8,6 +8,7 @@ export interface Props extends PropsWithChildren {
   labelId?: string;
   hideLabel?: boolean;
   horizontal?: boolean;
+  disabled?: boolean;
 }
 
 export const LabelledBox = ({
@@ -18,12 +19,14 @@ export const LabelledBox = ({
   labelId,
   hideLabel,
   horizontal,
+  disabled,
 }: Props) => {
   return (
     <div
       className={classNames("labelled-box", {
         "labelled-box--no-label": hideLabel,
         "labelled-box--horizontal": horizontal,
+        "labelled-box--disabled": disabled,
       })}
     >
       {label && (

packages/react/src/components/Forms/LabelledBox/tokens.ts

@@ -0,0 +1,8 @@
+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"],
+});