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 {
position: absolute;
font-size: var(--c--theme--font--sizes--s);
font-size: var(--c--globals--font--sizes--t);
left: 0;
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);
// Enable text overflow ellipsis.
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
&.placeholder {
@extend %text-style;
top: 16px;
@@ -66,10 +66,14 @@
&--disabled {
label {
color: var(--c--components--forms-labelledbox--label-color--small--disabled);
color: var(
--c--components--forms-labelledbox--label-color--small--disabled
);
&.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,
args: {
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: {
label: "Your label here",
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";
export const tokens = (defaults: DefaultTokens) => ({
"label-color--small": defaults.theme.colors["greyscale-600"],
"label-color--big": defaults.theme.colors["greyscale-900"],
"label-color--small--disabled": defaults.theme.colors["greyscale-600"],
"label-color--big--disabled": defaults.theme.colors["greyscale-600"],
"label-color--small": defaults.contextuals.content.semantic.neutral.tertiary,
"label-color--big": defaults.contextuals.content.semantic.neutral.primary,
"label-color--small--disabled":
defaults.contextuals.content.semantic.neutral.secondary,
"label-color--big--disabled": defaults.contextuals.content.semantic.neutral.secondary,
});