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

💄(react) homegenize form inputs states

Browse Source 
Currently between all components some states were not aligned (error, success,
hover, focus,...)
This commit is contained in:
jbpenrath
2025-12-08 14:29:52 +01:00
committed by Jean-Baptiste PENRATH
parent 992061fc8e
commit 67ba361370
21 changed files with 540 additions and 770 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,6 +17,8 @@
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),
box-shadow var(--c--globals--transitions--duration)
var(--c--globals--transitions--ease-out);
overflow: hidden;
@@ -42,14 +44,14 @@
&:hover {
border-radius: var(--c--components--forms-textarea--border-radius--hover);
border-color: var(--c--components--forms-textarea--border-color--hover);
border-color: var(--c--components--forms-textarea--border-color--hover) !important;
box-shadow: 0 0 0 var(--c--components--forms-textarea--border-width--hover) var(--c--components--forms-textarea--border-color--hover) !important;
}
&: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;
box-shadow: 0 0 0 var(--c--components--forms-textarea--border-width--focus) var(--c--components--forms-textarea--border-color--focus) !important;
label {
color: var(--c--components--forms-textarea--label-color--focus);
@@ -58,6 +60,7 @@
&--disabled {
cursor: default;
pointer-events: none;
border-color: var(--c--components--forms-textarea--border-color--disabled);
.c__textarea {
@@ -78,38 +81,12 @@
&--success {
.c__textarea__wrapper {
border-color: var(--c--contextuals--content--semantic--success--tertiary);
.labelled-box label {
color: var(--c--contextuals--content--semantic--success--tertiary);
}
&:not(.c__input__wrapper--disabled) {
&:hover {
border-color: var(--c--contextuals--content--semantic--success--secondary);
color: var(--c--contextuals--content--semantic--success--secondary);
.labelled-box label {
color: var(--c--contextuals--content--semantic--success--secondary);
}
}
}
}
}
&--error {
.c__textarea__wrapper {
border-color: var(--c--contextuals--content--semantic--error--tertiary);
&:not(.c__input__wrapper--disabled) {
&:hover {
border-color: var(--c--contextuals--content--semantic--error--secondary);
color: var(--c--contextuals--content--semantic--error--secondary);
label {
color: var(--c--contextuals--content--semantic--error--secondary);
}
}
}
}
}
}

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

@@ -7,13 +7,16 @@ export const tokens = (defaults: DefaultTokens) => ({
"border-radius--hover": "2px",
"border-radius--focus": "2px",
"border-width": "1px",
"border-width--hover": "1px",
"border-width--focus": "1px",
"border-color": defaults.contextuals.border.semantic.neutral.tertiary,
"border-color--hover": defaults.contextuals.border.semantic.neutral.secondary,
"border-color--hover": defaults.contextuals.border.semantic.neutral.tertiary,
"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.contextuals.border.semantic.brand.primary,
"label-color": defaults.contextuals.content.semantic.neutral.tertiary,
"label-color--focus": defaults.contextuals.content.semantic.brand.primary,
"background-color": defaults.contextuals.background.surface.primary,
"value-color": defaults.contextuals.content.semantic.neutral.primary,
"value-color--disabled":