🎨(react) enhance Switch component styles

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

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

@@ -1,5 +1,4 @@
 .c__switch {
-
   input {
     opacity: 0;
     width: 0;
@@ -32,7 +31,8 @@
     width: 2.8125rem;
     height: 1.5rem;
     background-color: var(--c--components--forms-switch--rail-background-color);
-    transition: var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
+    transition: var(--c--globals--transitions--duration)
+      var(--c--globals--transitions--ease-out);
     border-radius: var(--c--components--forms-switch--rail-border-radius);
 
     &:before {
@@ -42,8 +42,11 @@
       width: 1.125rem;
       left: 4px;
       top: 3px;
-      background-color: var(--c--components--forms-switch--handle-background-color);
-      transition: var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
+      background-color: var(
+        --c--components--forms-switch--handle-background-color
+      );
+      transition: var(--c--globals--transitions--duration)
+        var(--c--globals--transitions--ease-out);
       border-radius: var(--c--components--forms-switch--handle-border-radius);
     }
   }
@@ -53,21 +56,30 @@
   }
 
   &.c__checkbox--disabled {
-
     input:not(:checked) + .c__switch__rail {
-      background-color: var(--c--components--forms-switch--rail-background-color--disabled);
+      background-color: var(
+        --c--components--forms-switch--rail-background-color--disabled
+      );
+    }
+
+    input:checked + .c__switch__rail {
+      background-color: var(
+        --c--components--forms-switch--rail-background-color--disabled
+      );
     }
 
     .c__switch__rail {
       cursor: default;
 
       &:before {
-        background-color: var(--c--components--forms-switch--handle-background-color--disabled);
+        background-color: var(
+          --c--components--forms-switch--handle-background-color--disabled
+        );
       }
     }
   }
 
-  &--right  {
+  &--right {
     .c__checkbox__container {
       flex-direction: row-reverse;
     }

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

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

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

@@ -119,9 +119,7 @@ export const Controlled = {
     const [checked, setChecked] = React.useState(false);
     return (
       <div>
-        <div className="clr-greyscale-900">
-          Value: {JSON.stringify(checked)}
-        </div>
+        <div className="clr-gray-900">Value: {JSON.stringify(checked)}</div>
         <Switch
           checked={checked}
           onChange={(e) => setChecked(e.target.checked)}
@@ -188,12 +186,22 @@ export const FormExampleRight = {
           <Switch label="Bluetooth" fullWidth={true} labelSide="right" />
           <Switch
             label="VPN"
+            defaultChecked={true}
             fullWidth={true}
             labelSide="right"
             text="You must pay for this feature"
             state="error"
             disabled={true}
           />
+          <Switch
+            label="VPN"
+            defaultChecked={true}
+            fullWidth={true}
+            labelSide="right"
+            text="You must paDDy for this feature"
+            state="error"
+            disabled={true}
+          />
         </div>
       </form>
     );

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

@@ -41,7 +41,7 @@ export const Switch = ({
         {
           "c__checkbox--disabled": props.disabled,
           "c__switch--full-width": props.fullWidth,
-        },
+        }
       )}
     >
       <Field compact={true} {...fieldProps}>

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

@@ -1,11 +1,13 @@
 import { DefaultTokens } from "@openfun/cunningham-tokens";
 
 export const tokens = (defaults: DefaultTokens) => ({
-  "accent-color": defaults.theme.colors["success-700"],
-  "rail-background-color": defaults.theme.colors["greyscale-500"],
-  "rail-background-color--disabled": defaults.theme.colors["greyscale-400"],
+  "accent-color": defaults.contextuals.content.semantic.brand.tertiary,
+  "rail-background-color": defaults.contextuals.content.semantic.neutral.tertiary,
+  "rail-background-color--disabled":
+    defaults.contextuals.content.semantic.disabled.primary,
   "rail-border-radius": "50vw",
-  "handle-background-color": "white",
-  "handle-background-color--disabled": defaults.theme.colors["greyscale-200"],
+  "handle-background-color": defaults.contextuals.content.semantic.contextual.primary,
+  "handle-background-color--disabled":
+    defaults.contextuals.content.semantic.disabled.secondary,
   "handle-border-radius": "50%",
 });