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

🎨(react) enhance LabelledBox component styles

Browse Source 
update LabelledBox 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:13:56 +02:00
committed by NathanVss
parent d7ae9fc9d1
commit 248ac05c81
3 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/react/src/components/Forms/LabelledBox/_index.scss
View File

@@ -10,17 +10,17 @@
label { label {
position: absolute; position: absolute;
font-size: var(--c--theme--font--sizes--s); font-size: var(--c--globals--font--sizes--t);
left: 0; left: 0;
top: 0.5rem; top: 0.5rem;
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);
color: var(--c--components--forms-labelledbox--label-color--small); color: var(--c--components--forms-labelledbox--label-color--small);
// Enable text overflow ellipsis. // Enable text overflow ellipsis.
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
&.placeholder { &.placeholder {
@extend %text-style; @extend %text-style;
top: 16px; top: 16px;
@@ -66,10 +66,14 @@
&--disabled { &--disabled {
label { label {
color: var(--c--components--forms-labelledbox--label-color--small--disabled); color: var(
--c--components--forms-labelledbox--label-color--small--disabled
);
&.placeholder { &.placeholder {
color: var(--c--components--forms-labelledbox--label-color--big--disabled); color: var(
--c--components--forms-labelledbox--label-color--big--disabled
);
} }
} }
} }

4
packages/react/src/components/Forms/LabelledBox/index.stories.tsx
View File

@@ -27,7 +27,7 @@ export const Default = {
render: Template, render: Template,
args: { args: {
label: "Your label here", label: "Your label here",
children: <span className="clr-greyscale-800">Hello world</span>, children: <span className="clr-gray-800">Hello world</span>,
}, },
}; };
@@ -44,6 +44,6 @@ export const NoLabel = {
args: { args: {
label: "Your label here", label: "Your label here",
hideLabel: true, hideLabel: true,
children: <span className="clr-greyscale-800">Hello world</span>, children: <span className="clr-gray-800">Hello world</span>,
}, },
}; };

9
packages/react/src/components/Forms/LabelledBox/tokens.ts
View File

@@ -1,8 +1,9 @@
import { DefaultTokens } from "@openfun/cunningham-tokens"; import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => ({ export const tokens = (defaults: DefaultTokens) => ({
"label-color--small": defaults.theme.colors["greyscale-600"], "label-color--small": defaults.contextuals.content.semantic.neutral.tertiary,
"label-color--big": defaults.theme.colors["greyscale-900"], "label-color--big": defaults.contextuals.content.semantic.neutral.primary,
"label-color--small--disabled": defaults.theme.colors["greyscale-600"], "label-color--small--disabled":
"label-color--big--disabled": defaults.theme.colors["greyscale-600"], defaults.contextuals.content.semantic.neutral.secondary,
"label-color--big--disabled": defaults.contextuals.content.semantic.neutral.secondary,
}); });