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

🎨(react) enhance checkbox component styles

Browse Source 
update checkbox 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:12:25 +02:00
committed by NathanVss
parent c3e39a46ac
commit 91aead45d9
4 changed files with 73 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
packages/react/src/components/Forms/Checkbox/_index.scss
View File

@@ -1,5 +1,4 @@
.c__checkbox__group {
&__list {
display: flex;
flex-direction: column;
@@ -24,13 +23,11 @@
margin-left: -1 * $padding;
cursor: pointer;
&:hover, &:focus-within {
background-color: var(--c--components--forms-checkbox--background-color--hover);
}
&:focus-within {
outline: 0;
border-color: var(--c--theme--colors--primary-600);
border-color: var(--c--contextuals--border--semantic--brand--primary);
}
&__container {
@@ -75,6 +72,12 @@
}
&:checked {
background-color: var(
--c--components--forms-checkbox--background-color--checked
);
border-color: var(
--c--components--forms-checkbox--background-color--checked
);
~ .checkmark {
clip-path: $clipPathShow;
}
@@ -84,6 +87,12 @@
}
&:indeterminate {
background-color: var(
--c--components--forms-checkbox--background-color--indeterminate
);
border-color: var(
--c--components--forms-checkbox--background-color--indeterminate
);
~ .indeterminate {
clip-path: $clipPathShow;
}
@@ -91,11 +100,35 @@
clip-path: $clipPathHide;
}
}
&:disabled {
cursor: not-allowed !important;
svg {
color: var(--c--components--forms-checkbox--accent-color);
}
&:not(:checked):not(:indeterminate) {
background-color: white;
border-color: var(
--c--components--forms-checkbox--border-color--disabled
);
}
&:checked,
&:indeterminate {
background-color: var(
--c--components--forms-checkbox--background-color--disabled
);
border-color: var(
--c--components--forms-checkbox--border-color--disabled
);
}
}
}
svg {
clip-path: $clipPathHide;
transition: var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
transition: var(--c--globals--transitions--duration)
var(--c--globals--transitions--ease-out);
position: absolute;
top: 0;
left: 0;
@@ -110,11 +143,11 @@
&--disabled {
border-color: transparent;
color: var(--c--theme--colors--greyscale-600);
cursor: not-allowed;
color: var(--c--contextuals--content--semantic--disabled--primary) !important;
cursor: not-allowed !important;
svg {
color: var(--c--theme--colors--greyscale-400);
color: var(--c--contextuals--background--surface--primary);
}
&:hover {
@@ -122,7 +155,7 @@
}
.c__checkbox__label {
color: var(--c--theme--colors--greyscale-600);
color: var(--c--contextuals--content--semantic--disabled--primary) !important;
}
}

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

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

18
packages/react/src/components/Forms/Checkbox/index.stories.tsx
View File

@@ -121,20 +121,32 @@ export const Success = {
export const Group = () => (
<div>
<div className="fs-l fw-bold mb-t clr-greyscale-900">Your offices</div>
<div className="fs-l fw-bold mb-t clr-gray-900">Your offices</div>
<CheckboxGroup>
<Checkbox label="Paris" />
<Checkbox label="New York" text="United States" checked={true} />
<Checkbox label="Hong Kong" text="Really long text to write something" />
<Checkbox label="Singapour" checked={true} />
<Checkbox
label="Indeterminate"
checked={true}
disabled={true}
indeterminate={true}
/>
<Checkbox label="London" text="Offices closed" disabled={true} />
<Checkbox
label="London"
text="Offices closed"
checked={true}
disabled={true}
/>
</CheckboxGroup>
</div>
);
export const GroupError = () => (
<div>
<div className="fs-l fw-bold mb-t clr-greyscale-900">Your offices</div>
<div className="fs-l fw-bold mb-t clr-gray-900">Your offices</div>
<CheckboxGroup state="error" text="An important error message">
<Checkbox label="Paris" />
<Checkbox label="New York" text="United States" checked={true} />
@@ -147,7 +159,7 @@ export const GroupError = () => (
export const GroupSuccess = () => (
<div>
<div className="fs-l fw-bold mb-t clr-greyscale-900">Your offices</div>
<div className="fs-l fw-bold mb-t clr-gray-900">Your offices</div>
<CheckboxGroup state="success" text="Success message !">
<Checkbox label="Paris" />
<Checkbox label="New York" text="United States" checked={true} />

21
packages/react/src/components/Forms/Checkbox/tokens.ts
View File

@@ -1,13 +1,20 @@
import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => ({
"background-color--hover": defaults.theme.colors["greyscale-200"],
"background-color": defaults.theme.colors["greyscale-000"],
"font-size": defaults.theme.font.sizes.m,
"font-weight": defaults.theme.font.weights.medium,
color: defaults.theme.colors["greyscale-900"],
"border-color": defaults.theme.colors["greyscale-300"],
"background-color--hover":
defaults.contextuals.background.semantic.neutral["tertiary-hover"],
"background-color": defaults.contextuals.background.surface.primary,
"font-size": defaults.globals.font.sizes.s,
"font-weight": defaults.globals.font.weights.medium,
color: defaults.contextuals.content.semantic.neutral.primary,
"border-color": defaults.contextuals.content.semantic.neutral.tertiary,
"border-radius": "2px",
"accent-color": defaults.theme.colors["success-600"],
"accent-color": defaults.contextuals.content.semantic.contextual.primary,
size: "1.5rem",
"background-color--checked": defaults.contextuals.content.semantic.brand.tertiary,
"background-color--indeterminate":
defaults.contextuals.content.semantic.brand.tertiary,
"background-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
"border-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
});