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

💄(react) change label color when focused ( select, input )

Browse Source 
We forgot to implement this behavior when coding these inputs.
This commit is contained in:
Nathan Vasse
2023-05-22 14:53:35 +02:00
committed by NathanVss
parent d79f01fd93
commit 75c6e2e482
8 changed files with 19 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -129,6 +129,7 @@ Here are the custom design tokens defined by the button.
| border-color--hover | Border color of the input on mouse hover |
| border-color--focus | Border color of the input when focus |
| border-style | Border style of the input |
| label-color--focus | Label color when focused |
See also [Field](?path=/story/components-forms-field-doc--page)

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

@@ -65,6 +65,10 @@
&:focus-within {
border-radius: var(--c--components--forms-input--border-radius--focus);
border-color: var(--c--components--forms-input--border-color--focus) !important;
label {
color: var(--c--components--forms-input--label-color--focus);
}
}
&--disabled {

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

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

1
packages/react/src/components/Forms/Select/index.mdx
View File

@@ -139,6 +139,7 @@ Here are the custom design tokens defined by the select.
| item-color | Color of the item |
| item-font-size | Font size of the item |
| menu-background-color | Background color of the menu |
| label-color--focus | Label color when focused |
See also [Field](?path=/story/components-forms-field-doc--page)

4
packages/react/src/components/Forms/Select/index.scss
View File

@@ -31,6 +31,10 @@
&:focus-within {
border-radius: var(--c--components--forms-select--border-radius--focus);
border-color: var(--c--components--forms-select--border-color--focus);
label {
color: var(--c--components--forms-select--label-color--focus);
}
}
}

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

@@ -19,4 +19,5 @@ export const tokens = (defaults: DefaultTokens) => ({
"item-font-size": defaults.theme.font.sizes.l,
"background-color": "white",
"menu-background-color": "white",
"label-color--focus": defaults.theme.colors["primary-600"],
});

2
packages/react/src/cunningham-tokens.css
View File

@@ -121,6 +121,7 @@
--c--components--forms-select--item-font-size: 1rem;
--c--components--forms-select--background-color: white;
--c--components--forms-select--menu-background-color: white;
--c--components--forms-select--label-color--focus: #0556BF;
--c--components--forms-radio--border-color: #E7E8EA;
--c--components--forms-radio--accent-color: #419A14;
--c--components--forms-input--font-weight: 400;
@@ -134,6 +135,7 @@
--c--components--forms-input--border-color--focus: #0556BF;
--c--components--forms-input--border-style: solid;
--c--components--forms-input--color: #303C4B;
--c--components--forms-input--label-color--focus: #0556BF;
--c--components--forms-field--width: 292px;
--c--components--forms-field--font-size: 0.6875rem;
--c--components--forms-field--color: #79818A;