From dfe36764decaa54a6044102d7e0df18f4b343b7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BAlia=20Jaeger=20Foresti?=
 <60678893+juliajforesti@users.noreply.github.com>
Date: Fri, 22 Sep 2023 16:36:08 -0300
Subject: [PATCH] fix(fuselage): improve focus state color (#1173)

---
 .changeset/hot-bears-shout.md                               | 5 +++++
 packages/fuselage/src/styles/colors.scss                    | 1 +
 .../fuselage/src/styles/primitives/selection-button.scss    | 6 +++---
 packages/fuselage/src/styles/variables/input-colors.scss    | 2 +-
 4 files changed, 10 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/hot-bears-shout.md

diff --git a/.changeset/hot-bears-shout.md b/.changeset/hot-bears-shout.md
new file mode 100644
index 0000000000..84bfcb1a2d
--- /dev/null
+++ 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
index 725993f9c5..a66514be3e 100644
--- 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
index 3aa979860d..be0f2f99b2 100644
--- 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
index a25dc24da6..49d59e3406 100644
--- 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(