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

🎨(react) enhance TextArea component styles

Browse Source 
update TextArea 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:52 +02:00
committed by NathanVss
parent d04b52eaf5
commit c9f6d2d41c
3 changed files with 31 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/react/src/components/Forms/TextArea/index.scss
View File

@@ -13,7 +13,11 @@
border-color: var(--c--components--forms-textarea--border-color);
border-style: var(--c--components--forms-textarea--border-style);
background-color: var(--c--components--forms-textarea--background-color);
transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out), border-radius var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
transition:
border var(--c--globals--transitions--duration)
var(--c--globals--transitions--ease-out),
border-radius var(--c--globals--transitions--duration)
var(--c--globals--transitions--ease-out);
overflow: hidden;
.labelled-box__label {
@@ -28,7 +32,7 @@
min-width: 100%;
padding: 0 1rem;
box-sizing: border-box;
font-family: var(--c--theme--font--families--base);
font-family: var(--c--globals--font--families--base);
color: var(--c--components--forms-textarea--value-color);
&:focus-visible {
@@ -43,7 +47,9 @@
&:focus-within {
border-radius: var(--c--components--forms-textarea--border-radius--focus);
border-color: var(--c--components--forms-textarea--border-color--focus) !important;
border-color: var(
--c--components--forms-textarea--border-color--focus
) !important;
label {
color: var(--c--components--forms-textarea--label-color--focus);
@@ -52,7 +58,7 @@
&--disabled {
cursor: default;
border-color: var(--c--theme--colors--greyscale-200);
border-color: var(--c--components--forms-textarea--border-color--disabled);
.c__textarea {
background-color: var(--c--components--forms-textarea--background-color);
@@ -63,7 +69,7 @@
}
&:hover {
border-color: var(--c--theme--colors--greyscale-200);
border-color: var(--c--contextuals--border--semantic--neutral--tertiary);
}
}
}
@@ -71,19 +77,19 @@
.c__field {
&--success {
.c__textarea__wrapper {
border-color: var(--c--theme--colors--success-600);
border-color: var(--c--contextuals--content--semantic--success--tertiary);
.labelled-box label {
color: var(--c--theme--colors--success-600);
color: var(--c--contextuals--content--semantic--success--tertiary);
}
&:not(.c__input__wrapper--disabled) {
&:hover {
border-color: var(--c--theme--colors--success-800);
color: var(--c--theme--colors--success-800);
border-color: var(--c--contextuals--content--semantic--success--secondary);
color: var(--c--contextuals--content--semantic--success--secondary);
.labelled-box label {
color: var(--c--theme--colors--success-800);
color: var(--c--contextuals--content--semantic--success--secondary);
}
}
}
@@ -92,15 +98,15 @@
&--error {
.c__textarea__wrapper {
border-color: var(--c--theme--colors--danger-600);
border-color: var(--c--contextuals--content--semantic--error--tertiary);
&:not(.c__input__wrapper--disabled) {
&:hover {
border-color: var(--c--theme--colors--danger-800);
color: var(--c--theme--colors--danger-800);
border-color: var(--c--contextuals--content--semantic--error--secondary);
color: var(--c--contextuals--content--semantic--error--secondary);
label {
color: var(--c--theme--colors--danger-800);
color: var(--c--contextuals--content--semantic--error--secondary);
}
}
}

2
packages/react/src/components/Forms/TextArea/index.stories.tsx
View File

@@ -141,7 +141,7 @@ export const Controlled = () => {
const [value, setValue] = React.useState("I am controlled");
return (
<div>
<div className="clr-greyscale-900">
<div className="clr-gray-900">
Value: <span>{value}</span>
</div>
<TextArea

19
packages/react/src/components/Forms/TextArea/tokens.ts
View File

@@ -1,18 +1,19 @@
import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => ({
"font-weight": defaults.theme.font.weights.regular,
"font-size": defaults.theme.font.sizes.l,
"font-weight": defaults.globals.font.weights.regular,
"font-size": defaults.globals.font.sizes.md,
"border-radius": "8px",
"border-radius--hover": "2px",
"border-radius--focus": "2px",
"border-width": "1px",
"border-color": defaults.theme.colors["greyscale-300"],
"border-color--hover": defaults.theme.colors["greyscale-500"],
"border-color--focus": defaults.theme.colors["primary-600"],
"border-color": defaults.contextuals.border.semantic.neutral.tertiary,
"border-color--hover": defaults.contextuals.border.semantic.neutral.secondary,
"border-color--focus": defaults.contextuals.border.semantic.brand.primary,
"border-color--disabled": defaults.contextuals.border.semantic.disabled.primary,
"border-style": "solid",
"label-color--focus": defaults.theme.colors["primary-600"],
"background-color": defaults.theme.colors["greyscale-000"],
"value-color": defaults.theme.colors["greyscale-900"],
"value-color--disabled": defaults.theme.colors["greyscale-800"],
"label-color--focus": defaults.contextuals.border.semantic.brand.primary,
"background-color": defaults.contextuals.background.surface.primary,
"value-color": defaults.contextuals.content.semantic.neutral.primary,
"value-color--disabled": defaults.contextuals.content.semantic.neutral.secondary,
});