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

We forgot to implement this behavior when coding these inputs.
openfun · May 24, 2023 · 75c6e2e · 75c6e2e
1 parent d79f01f
commit 75c6e2e
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 0 deletions.
diff --git a/.changeset/twenty-mugs-cross.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;