studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨(react) enhance Radio component styles

Browse Source 
update Radio token and css files with new css variables introduce
with the new tokens architectures
This commit is contained in:
Nathan Panchout
2025-08-22 10:14:07 +02:00
committed by NathanVss
parent 248ac05c81
commit 2a65010ecd
3 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/react/src/components/Forms/Radio/_index.scss
View File

@@ -16,13 +16,18 @@
outline: none; outline: none;
} }
&:checked {
border-color: var(--c--components--forms-radio--accent-color);
}
&::before { &::before {
content: ""; content: "";
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
border-radius: 50%; border-radius: 50%;
transform: scale(0); 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); box-shadow: inset 1em 1em var(--c--components--forms-radio--accent-color);
} }
@@ -33,8 +38,10 @@
&.c__checkbox--disabled { &.c__checkbox--disabled {
input { input {
border-color: var(--c--components--forms-radio--border-color--disabled);
&::before { &::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);
} }
} }
} }

1
packages/react/src/components/Forms/Radio/index.spec.tsx
View File

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

7
packages/react/src/components/Forms/Radio/tokens.ts
View File

@@ -1,7 +1,8 @@
import { DefaultTokens } from "@openfun/cunningham-tokens"; import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => ({ export const tokens = (defaults: DefaultTokens) => ({
"border-color": defaults.theme.colors["greyscale-300"], "border-color": defaults.contextuals.border.semantic.neutral.tertiary,
"accent-color": defaults.theme.colors["success-600"], "border-color--disabled": defaults.contextuals.border.semantic.neutral.tertiary,
"background-color": defaults.theme.colors["greyscale-000"], "accent-color": defaults.contextuals.content.semantic.brand.tertiary,
"background-color": defaults.contextuals.background.surface.primary,
}); });