💄(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/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"],