fix(fuselage): improve focus state color (#1173)

RocketChat · Sep 22, 2023 · dfe3676 · dfe3676
1 parent 8fb4c81
commit dfe3676
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/.changeset/hot-bears-shout.md b/.changeset/hot-bears-shout.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+fix(fuselage): improve focus state color
diff --git a/packages/fuselage/src/styles/colors.scss b/packages/fuselage/src/styles/colors.scss
@@ -210,6 +210,7 @@ $-badge-backgrounds: (
 
 $shadow-colors: (
   highlight: primary(200),
+  extra-light-highlight: stroke(extra-light-highlight),
   danger: danger(100),
   elevation-1: neutral(800, 0.1),
   elevation-2x: neutral(800, 0.08),

diff --git a/packages/fuselage/src/styles/primitives/selection-button.scss b/packages/fuselage/src/styles/primitives/selection-button.scss
@@ -33,7 +33,7 @@
 %selection-button__fake--empty--focused {
   border-color: $button-empty-focus-border-color;
   background-color: $button-empty-focus-background-color;
-  @include use-focus-shadow($button-empty-focus-shadow-color);
+  @include use-focus-shadow($input-colors-focus-shadow-color);
 }
 
 %selection-button__fake--empty--disabled {
@@ -63,7 +63,7 @@
 %selection-button__fake--off--focused {
   border-color: $button-off-focus-border-color;
   background-color: $button-off-focus-background-color;
-  @include use-focus-shadow($button-off-focus-shadow-color);
+  @include use-focus-shadow($input-colors-focus-shadow-color);
 }
 
 %selection-button__fake--off--disabled {
@@ -93,7 +93,7 @@
 %selection-button__fake--primary--focused {
   border-color: $button-primary-focus-border-color;
   background-color: $button-primary-focus-background-color;
-  @include use-focus-shadow($button-primary-focus-shadow-color);
+  @include use-focus-shadow($input-colors-focus-shadow-color);
 }
 
 %selection-button__fake--primary--disabled {

diff --git a/packages/fuselage/src/styles/variables/input-colors.scss b/packages/fuselage/src/styles/variables/input-colors.scss
@@ -27,7 +27,7 @@ $input-colors-focus-border-color: theme(
 );
 $input-colors-focus-shadow-color: theme(
   'input-colors-focus-shadow-color',
-  colors.shadow(highlight)
+  colors.shadow(extra-light-highlight)
 );
 
 $input-colors-focus-icon-color: theme(