From 75c6e2e482d558f7f01aba4ba44d130d5e88d293 Mon Sep 17 00:00:00 2001 From: Nathan Vasse Date: Mon, 22 May 2023 14:53:35 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(react)=20change=20label=20color=20?= =?UTF-8?q?when=20focused=20(=20select,=20input=20)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We forgot to implement this behavior when coding these inputs. --- .changeset/twenty-mugs-cross.md | 5 +++++ packages/react/src/components/Forms/Input/index.mdx | 1 + packages/react/src/components/Forms/Input/index.scss | 4 ++++ packages/react/src/components/Forms/Input/tokens.ts | 1 + packages/react/src/components/Forms/Select/index.mdx | 1 + packages/react/src/components/Forms/Select/index.scss | 4 ++++ packages/react/src/components/Forms/Select/tokens.ts | 1 + packages/react/src/cunningham-tokens.css | 2 ++ 8 files changed, 19 insertions(+) create mode 100644 .changeset/twenty-mugs-cross.md diff --git a/.changeset/twenty-mugs-cross.md b/.changeset/twenty-mugs-cross.md new file mode 100644 index 0000000..cd6b885 --- /dev/null +++ b/.changeset/twenty-mugs-cross.md @@ -0,0 +1,5 @@ +--- +"@openfun/cunningham-react": patch +--- + +change label color when focused ( select, input ) diff --git a/packages/react/src/components/Forms/Input/index.mdx b/packages/react/src/components/Forms/Input/index.mdx index af0e891..63da25a 100644 --- a/packages/react/src/components/Forms/Input/index.mdx +++ b/packages/react/src/components/Forms/Input/index.mdx @@ -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) diff --git a/packages/react/src/components/Forms/Input/index.scss b/packages/react/src/components/Forms/Input/index.scss index ed13799..c3800da 100644 --- a/packages/react/src/components/Forms/Input/index.scss +++ b/packages/react/src/components/Forms/Input/index.scss @@ -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 { diff --git a/packages/react/src/components/Forms/Input/tokens.ts b/packages/react/src/components/Forms/Input/tokens.ts index 90292c8..5be57e4 100644 --- a/packages/react/src/components/Forms/Input/tokens.ts +++ b/packages/react/src/components/Forms/Input/tokens.ts @@ -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"], }); diff --git a/packages/react/src/components/Forms/Select/index.mdx b/packages/react/src/components/Forms/Select/index.mdx index 31e48ce..eb88f25 100644 --- a/packages/react/src/components/Forms/Select/index.mdx +++ b/packages/react/src/components/Forms/Select/index.mdx @@ -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) diff --git a/packages/react/src/components/Forms/Select/index.scss b/packages/react/src/components/Forms/Select/index.scss index 10db753..0efc738 100644 --- a/packages/react/src/components/Forms/Select/index.scss +++ b/packages/react/src/components/Forms/Select/index.scss @@ -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); + } } } diff --git a/packages/react/src/components/Forms/Select/tokens.ts b/packages/react/src/components/Forms/Select/tokens.ts index b0c62a7..0f20b7b 100644 --- a/packages/react/src/components/Forms/Select/tokens.ts +++ b/packages/react/src/components/Forms/Select/tokens.ts @@ -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"], }); diff --git a/packages/react/src/cunningham-tokens.css b/packages/react/src/cunningham-tokens.css index 2290623..e1cc796 100644 --- a/packages/react/src/cunningham-tokens.css +++ b/packages/react/src/cunningham-tokens.css @@ -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;