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("", () => {
text: "my text",
textItems: ["my text item 1", "my text item 2"],
rightText: "my right text",
+ disabled: false,
};
render();
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,
});