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;
}
&: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);
}
}
}

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

@@ -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} />);

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

@@ -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,
});