💄(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.

.changeset/shiny-tomatoes-cross.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+homogenize form fields colors

packages/react/src/components/Forms/DatePicker/DatePicker.tsx

@@ -77,6 +77,7 @@ export const DatePicker = (props: DatePickerProps) => {
           label: props.label,
           labelAsPlaceholder,
           onFocusChange: setIsFocused,
+          disabled: props.disabled,
         }}
       />
     </DatePickerAux>

packages/react/src/components/Forms/DatePicker/DateRangePicker.tsx

@@ -96,6 +96,7 @@ export const DateRangePicker = ({
           label: startLabel,
           labelAsPlaceholder,
           onFocusChange: setIsFocused,
+          disabled: props.disabled,
         }}
       />
       <div className="c__date-picker__range__separator" />
@@ -105,6 +106,7 @@ export const DateRangePicker = ({
           label: endLabel,
           labelAsPlaceholder,
           onFocusChange: setIsFocused,
+          disabled: props.disabled,
         }}
       />
     </DatePickerAux>

packages/react/src/components/Forms/DatePicker/index.mdx

@@ -168,7 +168,8 @@ Here are the custom design tokens defined by the datepicker.
 | border-width     	| Border width of the datepicker      	|
 | border-radius--hover   	| Border radius of the datepicker on mouse hover    	|
 | border-radius--focus   	| Border radius of the datepicker when focused    	|
-| color   	| Value color  	|
+| value-color   	| Value color  	|
+| value-color--disabled   	| Value color when disabled 	|
 | font-size        	| Value font size        	|
 | height | Height of the combo box |
 | item-background-color--hover | Background color of the item on mouse hover (months/years menus)   	|

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

@@ -11,11 +11,9 @@
     border-color: var(--c--components--forms-datepicker--border-color);
     border-style: var(--c--components--forms-datepicker--border-style);
     display: flex;
-
     transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
     padding: 0 0.75rem;
     gap: 1rem;
-    color: var(--c--components--forms-datepicker--color);
     box-sizing: border-box;
     height: var(--c--components--forms-datepicker--height);
     background-color: var(--c--components--forms-datepicker--background-color);
@@ -63,6 +61,7 @@
     &__value {
       display: flex;
       font-size: var(--c--components--forms-datepicker--font-size);
+      color: var(--c--components--forms-datepicker--value-color);
       overflow: hidden;
       flex-grow: 1;
 
@@ -99,23 +98,23 @@
   &--disabled {
     .c__date-picker__wrapper {
       color: var(--c--theme--colors--greyscale-600);
-      border-color: var(--c--theme--colors--greyscale-300);
+      border-color: var(--c--components--forms-datepicker--border-color--disabled);
       cursor: default;
       pointer-events: none;
 
-      label {
-        color: var(--c--theme--colors--greyscale-400);
-      }
-
       &__toggle {
         color: var(--c--theme--colors--greyscale-400);
       }
 
       .c__date-picker__inner {
-        color: var(--c--theme--colors--greyscale-600);
+
         &__action {
           color: var(--c--theme--colors--greyscale-400);
         }
+
+        &__value {
+          color: var(--c--components--forms-datepicker--value-color--disabled);
+        }
       }
 
       label {

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

@@ -2,6 +2,7 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
 
 export const tokens = (defaults: DefaultTokens) => ({
   "border-color": defaults.theme.colors["greyscale-300"],
+  "border-color--disabled": defaults.theme.colors["greyscale-200"],
   "border-color--focus": defaults.theme.colors["primary-600"],
   "border-color--hover": defaults.theme.colors["greyscale-500"],
   "border-radius": "8px",
@@ -9,7 +10,8 @@ export const tokens = (defaults: DefaultTokens) => ({
   "border-radius--hover": "2px",
   "border-style": "solid",
   "border-width": "1px",
-  color: defaults.theme.colors["greyscale-800"],
+  "value-color": defaults.theme.colors["greyscale-900"],
+  "value-color--disabled": defaults.theme.colors["greyscale-800"],
   "font-size": defaults.theme.font.sizes.l,
   height: "3.5rem",
   "item-background-color--hover": defaults.theme.colors["greyscale-200"],

packages/react/src/components/Forms/Input/index.mdx

@@ -128,7 +128,8 @@ Here are the custom design tokens defined by the button.
 |---------------	|-----------------------------	|
 | font-weight 	| Value font weight 	|
 | font-size        	| Value font size        	|
-| color   	| Value color  	|
+| value-color   	| Value color  	|
+| value-color--disabled   	| Value color when disabled  	|
 | border-radius     	| Border radius of the input      	|
 | border-radius--hover   	| Border radius of the input on mouse hover    	|
 | border-radius--focus   	| Border radius of the input when focused    	|

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

@@ -9,7 +9,6 @@
   padding: 0 1rem;
   gap: 1rem;
   cursor: text;
-  color: var(--c--components--forms-input--color);
   box-sizing: border-box;
   height: 3.5rem;
 
@@ -22,7 +21,7 @@
     box-sizing: border-box;
     outline: 0;
     border: none;
-    color: var(--c--theme--colors--greyscale-800);
+    color: var(--c--components--forms-input--value-color);
     flex-grow: 1;
     text-overflow: ellipsis;
     background-color: transparent;
@@ -88,11 +87,11 @@
 
   &--disabled {
     cursor: default;
-    color: var(--c--theme--colors--greyscale-400);
+
     border-color: var(--c--theme--colors--greyscale-200);
 
-    .c__input, .labelled-box label {
+    .c__input {
-      color: var(--c--theme--colors--greyscale-600);
+      color: var(--c--components--forms-input--value-color--disabled);
     }
 
     &:hover {

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

@@ -90,6 +90,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             label={label}
             htmlFor={idToUse.current}
             labelAsPlaceholder={labelAsPlaceholder}
+            disabled={props.disabled}
           >
             <input
               type="text"

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

@@ -11,7 +11,8 @@ export const tokens = (defaults: DefaultTokens) => ({
   "border-color--hover": defaults.theme.colors["greyscale-500"],
   "border-color--focus": defaults.theme.colors["primary-600"],
   "border-style": "solid",
-  color: defaults.theme.colors["greyscale-800"],
   "label-color--focus": defaults.theme.colors["primary-600"],
   "background-color": "white",
+  "value-color": defaults.theme.colors["greyscale-900"],
+  "value-color--disabled": defaults.theme.colors["greyscale-800"],
 });

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);
+    color: var(--c--components--forms-labelledbox--label-color--small);
-    opacity: 0.8;
 
     &.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"],
+});

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

@@ -12,7 +12,6 @@
     transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
     padding: 0 0.75rem;
     gap: 1rem;
-    color: var(--c--components--forms-select--color);
     box-sizing: border-box;
     height: var(--c--components--forms-select--height);
     cursor: pointer;
@@ -50,6 +49,7 @@
       text-overflow: ellipsis;
       flex-grow: 1;
       font-size: var(--c--components--forms-select--font-size);
+      color: var(--c--components--forms-select--value-color);
 
       input {
         outline: 0;
@@ -147,13 +147,15 @@
   &--disabled {
 
     .c__select__wrapper {
-      color: var(--c--theme--colors--greyscale-600);
       border-color: var(--c--theme--colors--greyscale-200);
       cursor: default;
 
       label, input {
         cursor: default;
-        color: var(--c--theme--colors--greyscale-600);
+      }
+
+      .c__select__inner__value {
+        color: var(--c--components--forms-select--value-color--disabled)
       }
     }
 

packages/react/src/components/Forms/Select/mono-common.tsx

@@ -123,6 +123,7 @@ export const SelectMonoAux = ({
             labelAsPlaceholder={labelAsPlaceholder}
             htmlFor={labelProps.htmlFor}
             labelId={labelProps.id}
+            disabled={disabled}
           >
             <div className="c__select__inner">
               <div className="c__select__inner__value">{children}</div>

packages/react/src/components/Forms/Select/mono.mdx

@@ -141,7 +141,8 @@ Here are the custom design tokens defined by the select.
 | border-radius--focus   	| Border radius of the select when focused    	|
 | border-style              | Border style of the select      	|
 | border-width              | Border width of the select      	|
-| color   	| Value color  	|
+| value-color   	| Value color  	|
+| value-color--disabled   	| Value color when disabled	|
 | font-size        	| Value font size        	|
 | height | Height of the combo box |
 | item-background-color--hover | Background color of the item on mouse hover    	|

packages/react/src/components/Forms/Select/multi-common.tsx

@@ -108,6 +108,7 @@ export const SelectMultiAux = ({
             htmlFor={labelProps.htmlFor}
             labelId={labelProps.id}
             hideLabel={hideLabel}
+            disabled={disabled}
           >
             <div className="c__select__inner">
               <div className="c__select__inner__actions">

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

@@ -9,7 +9,8 @@ export const tokens = (defaults: DefaultTokens) => ({
   "border-radius--hover": "2px",
   "border-style": "solid",
   "border-width": "1px",
-  color: defaults.theme.colors["greyscale-800"],
+  "value-color": defaults.theme.colors["greyscale-900"],
+  "value-color--disabled": defaults.theme.colors["greyscale-800"],
   "font-size": defaults.theme.font.sizes.l,
   height: "3.5rem",
   "item-background-color--hover": defaults.theme.colors["greyscale-200"],

packages/react/src/cunningham-tokens.css

@@ -121,7 +121,8 @@
 	--c--components--forms-select--border-radius--hover: 2px;
 	--c--components--forms-select--border-style: solid;
 	--c--components--forms-select--border-width: 1px;
-	--c--components--forms-select--color: var(--c--theme--colors--greyscale-800);
+	--c--components--forms-select--value-color: var(--c--theme--colors--greyscale-900);
+	--c--components--forms-select--value-color--disabled: var(--c--theme--colors--greyscale-800);
 	--c--components--forms-select--font-size: var(--c--theme--font--sizes--l);
 	--c--components--forms-select--height: 3.5rem;
 	--c--components--forms-select--item-background-color--hover: var(--c--theme--colors--greyscale-200);
@@ -138,6 +139,10 @@
 	--c--components--forms-radio--border-color: var(--c--theme--colors--greyscale-300);
 	--c--components--forms-radio--accent-color: var(--c--theme--colors--success-700);
 	--c--components--forms-radio--background-color: white;
+	--c--components--forms-labelledbox--label-color--small: var(--c--theme--colors--greyscale-600);
+	--c--components--forms-labelledbox--label-color--big: var(--c--theme--colors--greyscale-900);
+	--c--components--forms-labelledbox--label-color--small--disabled: var(--c--theme--colors--greyscale-600);
+	--c--components--forms-labelledbox--label-color--big--disabled: var(--c--theme--colors--greyscale-600);
 	--c--components--forms-input--font-weight: var(--c--theme--font--weights--regular);
 	--c--components--forms-input--font-size: var(--c--theme--font--sizes--l);
 	--c--components--forms-input--border-radius: 8px;
@@ -148,9 +153,10 @@
 	--c--components--forms-input--border-color--hover: var(--c--theme--colors--greyscale-500);
 	--c--components--forms-input--border-color--focus: var(--c--theme--colors--primary-600);
 	--c--components--forms-input--border-style: solid;
-	--c--components--forms-input--color: var(--c--theme--colors--greyscale-800);
 	--c--components--forms-input--label-color--focus: var(--c--theme--colors--primary-600);
 	--c--components--forms-input--background-color: white;
+	--c--components--forms-input--value-color: var(--c--theme--colors--greyscale-900);
+	--c--components--forms-input--value-color--disabled: var(--c--theme--colors--greyscale-800);
 	--c--components--forms-fileuploader--background-color: white;
 	--c--components--forms-fileuploader--border-color: var(--c--theme--colors--greyscale-300);
 	--c--components--forms-fileuploader--border-radius: 0.5rem;
@@ -175,6 +181,7 @@
 	--c--components--forms-field--font-size: var(--c--theme--font--sizes--s);
 	--c--components--forms-field--color: var(--c--theme--colors--greyscale-600);
 	--c--components--forms-datepicker--border-color: var(--c--theme--colors--greyscale-300);
+	--c--components--forms-datepicker--border-color--disabled: var(--c--theme--colors--greyscale-200);
 	--c--components--forms-datepicker--border-color--focus: var(--c--theme--colors--primary-600);
 	--c--components--forms-datepicker--border-color--hover: var(--c--theme--colors--greyscale-500);
 	--c--components--forms-datepicker--border-radius: 8px;
@@ -182,7 +189,8 @@
 	--c--components--forms-datepicker--border-radius--hover: 2px;
 	--c--components--forms-datepicker--border-style: solid;
 	--c--components--forms-datepicker--border-width: 1px;
-	--c--components--forms-datepicker--color: var(--c--theme--colors--greyscale-800);
+	--c--components--forms-datepicker--value-color: var(--c--theme--colors--greyscale-900);
+	--c--components--forms-datepicker--value-color--disabled: var(--c--theme--colors--greyscale-800);
 	--c--components--forms-datepicker--font-size: var(--c--theme--font--sizes--l);
 	--c--components--forms-datepicker--height: 3.5rem;
 	--c--components--forms-datepicker--item-background-color--hover: var(--c--theme--colors--greyscale-200);