🎨(react) enhance checkbox component styles

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

packages/react/src/components/Forms/Checkbox/_index.scss

@@ -1,5 +1,4 @@
 .c__checkbox__group {
-
   &__list {
     display: flex;
     flex-direction: column;
@@ -24,13 +23,11 @@
   margin-left: -1 * $padding;
   cursor: pointer;
 
-  &:hover, &:focus-within {
+
-    background-color: var(--c--components--forms-checkbox--background-color--hover);
-  }
 
   &:focus-within {
     outline: 0;
-    border-color: var(--c--theme--colors--primary-600);
+    border-color: var(--c--contextuals--border--semantic--brand--primary);
   }
 
   &__container {
@@ -75,6 +72,12 @@
       }
 
       &:checked {
+        background-color: var(
+          --c--components--forms-checkbox--background-color--checked
+        );
+        border-color: var(
+          --c--components--forms-checkbox--background-color--checked
+        );
         ~ .checkmark {
           clip-path: $clipPathShow;
         }
@@ -84,6 +87,12 @@
       }
 
       &:indeterminate {
+        background-color: var(
+          --c--components--forms-checkbox--background-color--indeterminate
+        );
+        border-color: var(
+          --c--components--forms-checkbox--background-color--indeterminate
+        );
         ~ .indeterminate {
           clip-path: $clipPathShow;
         }
@@ -91,11 +100,35 @@
           clip-path: $clipPathHide;
         }
       }
+
+      &:disabled {
+        cursor: not-allowed !important;
+        svg {
+          color: var(--c--components--forms-checkbox--accent-color);
+        }
+        &:not(:checked):not(:indeterminate) {
+          background-color: white;
+          border-color: var(
+            --c--components--forms-checkbox--border-color--disabled
+          );
+        }
+
+        &:checked,
+        &:indeterminate {
+          background-color: var(
+            --c--components--forms-checkbox--background-color--disabled
+          );
+          border-color: var(
+            --c--components--forms-checkbox--border-color--disabled
+          );
+        }
+      }
     }
 
     svg {
       clip-path: $clipPathHide;
-      transition: var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
+      transition: var(--c--globals--transitions--duration)
+        var(--c--globals--transitions--ease-out);
       position: absolute;
       top: 0;
       left: 0;
@@ -110,11 +143,11 @@
 
   &--disabled {
     border-color: transparent;
-    color: var(--c--theme--colors--greyscale-600);
+    color: var(--c--contextuals--content--semantic--disabled--primary) !important;
-    cursor: not-allowed;
+    cursor: not-allowed !important;
 
     svg {
-      color: var(--c--theme--colors--greyscale-400);
+      color: var(--c--contextuals--background--surface--primary);
     }
 
     &:hover {
@@ -122,7 +155,7 @@
     }
 
     .c__checkbox__label {
-      color: var(--c--theme--colors--greyscale-600);
+      color: var(--c--contextuals--content--semantic--disabled--primary) !important;
     }
   }
 

packages/react/src/components/Forms/Checkbox/index.spec.tsx

@@ -130,6 +130,7 @@ describe("<Checkbox/>", () => {
       textItems: ["my text item 1", "my text item 2"],
       rightText: "my right text",
       indeterminate: true,
+      disabled: false,
     };
 
     render(<Checkbox {...propsInput} />);

packages/react/src/components/Forms/Checkbox/index.stories.tsx

@@ -121,20 +121,32 @@ export const Success = {
 
 export const Group = () => (
   <div>
-    <div className="fs-l fw-bold mb-t clr-greyscale-900">Your offices</div>
+    <div className="fs-l fw-bold mb-t clr-gray-900">Your offices</div>
     <CheckboxGroup>
       <Checkbox label="Paris" />
       <Checkbox label="New York" text="United States" checked={true} />
       <Checkbox label="Hong Kong" text="Really long text to write something" />
       <Checkbox label="Singapour" checked={true} />
+      <Checkbox
+        label="Indeterminate"
+        checked={true}
+        disabled={true}
+        indeterminate={true}
+      />
       <Checkbox label="London" text="Offices closed" disabled={true} />
+      <Checkbox
+        label="London"
+        text="Offices closed"
+        checked={true}
+        disabled={true}
+      />
     </CheckboxGroup>
   </div>
 );
 
 export const GroupError = () => (
   <div>
-    <div className="fs-l fw-bold mb-t clr-greyscale-900">Your offices</div>
+    <div className="fs-l fw-bold mb-t clr-gray-900">Your offices</div>
     <CheckboxGroup state="error" text="An important error message">
       <Checkbox label="Paris" />
       <Checkbox label="New York" text="United States" checked={true} />
@@ -147,7 +159,7 @@ export const GroupError = () => (
 
 export const GroupSuccess = () => (
   <div>
-    <div className="fs-l fw-bold mb-t clr-greyscale-900">Your offices</div>
+    <div className="fs-l fw-bold mb-t clr-gray-900">Your offices</div>
     <CheckboxGroup state="success" text="Success message !">
       <Checkbox label="Paris" />
       <Checkbox label="New York" text="United States" checked={true} />

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

@@ -1,13 +1,20 @@
 import { DefaultTokens } from "@openfun/cunningham-tokens";
 
 export const tokens = (defaults: DefaultTokens) => ({
-  "background-color--hover": defaults.theme.colors["greyscale-200"],
+  "background-color--hover":
-  "background-color": defaults.theme.colors["greyscale-000"],
+    defaults.contextuals.background.semantic.neutral["tertiary-hover"],
-  "font-size": defaults.theme.font.sizes.m,
+  "background-color": defaults.contextuals.background.surface.primary,
-  "font-weight": defaults.theme.font.weights.medium,
+  "font-size": defaults.globals.font.sizes.s,
-  color: defaults.theme.colors["greyscale-900"],
+  "font-weight": defaults.globals.font.weights.medium,
-  "border-color": defaults.theme.colors["greyscale-300"],
+  color: defaults.contextuals.content.semantic.neutral.primary,
+  "border-color": defaults.contextuals.content.semantic.neutral.tertiary,
   "border-radius": "2px",
-  "accent-color": defaults.theme.colors["success-600"],
+  "accent-color": defaults.contextuals.content.semantic.contextual.primary,
+
   size: "1.5rem",
+  "background-color--checked": defaults.contextuals.content.semantic.brand.tertiary,
+  "background-color--indeterminate":
+    defaults.contextuals.content.semantic.brand.tertiary,
+  "background-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
+  "border-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
 });