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

💄(react) improve input component styling configuration

Browse Source 
Align design tokens of input component with select component's
design tokens for consistent styling configuration. Having a
transparent background was causing a weird ux.
This commit is contained in:
Lebaud Antoine
2023-06-06 10:38:47 +02:00
committed by aleb_the_flash
parent 38538e354b
commit 1ff37cf12f
6 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/react/src/components/Forms/Input/index.scss
View File

@@ -3,6 +3,7 @@
border-width: var(--c--components--forms-input--border-width);
border-color: var(--c--components--forms-input--border-color);
border-style: var(--c--components--forms-input--border-style);
background-color: var(--c--components--forms-input--background-color);
display: flex;
align-items: center;
transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);

1
packages/react/src/components/Forms/Input/tokens.ts
View File

@@ -13,4 +13,5 @@ export const tokens = (defaults: DefaultTokens) => ({
"border-style": "solid",
color: defaults.theme.colors["greyscale-800"],
"label-color--focus": defaults.theme.colors["primary-600"],
"background-color": "white",
});