From 2a65010ecd34a49077c5a239805c16794141b807 Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Fri, 22 Aug 2025 10:14:07 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8(react)=20enhance=20Radio=20compone?=
 =?UTF-8?q?nt=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

update Radio token and css files with new css variables introduce
with the new tokens architectures
---
 packages/react/src/components/Forms/Radio/_index.scss | 11 +++++++++--
 .../react/src/components/Forms/Radio/index.spec.tsx   |  1 +
 packages/react/src/components/Forms/Radio/tokens.ts   |  7 ++++---
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/Forms/Radio/_index.scss b/packages/react/src/components/Forms/Radio/_index.scss
index 8b3c8e3..74a4cd7 100644
--- a/packages/react/src/components/Forms/Radio/_index.scss
+++ b/packages/react/src/components/Forms/Radio/_index.scss
@@ -16,13 +16,18 @@
       outline: none;
     }
 
+    &:checked {
+      border-color: var(--c--components--forms-radio--accent-color);
+    }
+
     &::before {
       content: "";
       width: 1rem;
       height: 1rem;
       border-radius: 50%;
       transform: scale(0);
-      transition: all var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
+      transition: all var(--c--globals--transitions--duration)
+        var(--c--globals--transitions--ease-out);
       box-shadow: inset 1em 1em var(--c--components--forms-radio--accent-color);
     }
 
@@ -33,8 +38,10 @@
 
   &.c__checkbox--disabled {
     input {
+      border-color: var(--c--components--forms-radio--border-color--disabled);
       &::before {
-        box-shadow: inset 1em 1em var(--c--theme--colors--greyscale-400);
+        box-shadow: inset 1em 1em
+          var(--c--components--forms-radio--border-color--disabled);
       }
     }
   }
diff --git a/packages/react/src/components/Forms/Radio/index.spec.tsx b/packages/react/src/components/Forms/Radio/index.spec.tsx
index 91ae7f1..6c825cb 100644
--- a/packages/react/src/components/Forms/Radio/index.spec.tsx
+++ b/packages/react/src/components/Forms/Radio/index.spec.tsx
@@ -134,6 +134,7 @@ describe("<Radio/>", () => {
       text: "my text",
       textItems: ["my text item 1", "my text item 2"],
       rightText: "my right text",
+      disabled: false,
     };
 
     render(<Radio {...propsInput} />);
diff --git a/packages/react/src/components/Forms/Radio/tokens.ts b/packages/react/src/components/Forms/Radio/tokens.ts
index 46ea537..0b52dac 100644
--- a/packages/react/src/components/Forms/Radio/tokens.ts
+++ b/packages/react/src/components/Forms/Radio/tokens.ts
@@ -1,7 +1,8 @@
 import { DefaultTokens } from "@openfun/cunningham-tokens";
 
 export const tokens = (defaults: DefaultTokens) => ({
-  "border-color": defaults.theme.colors["greyscale-300"],
-  "accent-color": defaults.theme.colors["success-600"],
-  "background-color": defaults.theme.colors["greyscale-000"],
+  "border-color": defaults.contextuals.border.semantic.neutral.tertiary,
+  "border-color--disabled": defaults.contextuals.border.semantic.neutral.tertiary,
+  "accent-color": defaults.contextuals.content.semantic.brand.tertiary,
+  "background-color": defaults.contextuals.background.surface.primary,
 });