chore: change button focus shadow colors

RocketChat · Oct 4, 2023 · a175b24 · a175b24
1 parent 695d42a
commit a175b24
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git a/packages/fuselage/src/styles/colors.scss b/packages/fuselage/src/styles/colors.scss
@@ -211,6 +211,7 @@ $-badge-backgrounds: (
 $shadow-colors: (
   highlight: primary(200),
   extra-light-highlight: stroke(extra-light-highlight),
+  extra-light-error: danger(200),
   danger: danger(100),
   elevation-1: neutral(800, 0.1),
   elevation-2x: neutral(800, 0.08),

diff --git a/packages/fuselage/src/styles/variables/button-colors.scss b/packages/fuselage/src/styles/variables/button-colors.scss
@@ -37,7 +37,7 @@ $button-primary-focus-border-color: theme(
 );
 $button-primary-focus-shadow-color: theme(
   'button-primary-focus-shadow-color',
-  colors.stroke(light)
+  colors.shadow(extra-light-highlight)
 );
 $button-primary-disabled-background-color: theme(
   'button-primary-disabled-background-color',
@@ -91,7 +91,7 @@ $button-secondary-focus-border-color: theme(
 );
 $button-secondary-focus-shadow-color: theme(
   'button-secondary-focus-shadow-color',
-  colors.stroke(light)
+  colors.shadow(extra-light-highlight)
 );
 $button-secondary-disabled-background-color: theme(
   'button-secondary-disabled-background-color',
@@ -142,7 +142,7 @@ $button-danger-focus-border-color: theme(
 );
 $button-danger-focus-shadow-color: theme(
   'button-danger-focus-shadow-color',
-  colors.stroke(light)
+  colors.shadow(extra-light-error)
 );
 $button-danger-disabled-background-color: theme(
   'button-danger-disabled-background-color',
@@ -196,7 +196,7 @@ $button-secondary-danger-focus-border-color: theme(
 );
 $button-secondary-danger-focus-shadow-color: theme(
   'button-secondary-danger-focus-shadow-color',
-  colors.stroke(light)
+  colors.shadow(extra-light-error)
 );
 $button-secondary-danger-disabled-background-color: theme(
   'button-secondary-danger-disabled-background-color',
@@ -457,7 +457,7 @@ $button-empty-focus-border-color: theme(
 );
 $button-empty-focus-shadow-color: theme(
   'button-empty-focus-shadow-color',
-  colors.stroke(light)
+  colors.shadow(extra-light-highlight)
 );
 $button-empty-disabled-background-color: theme(
   'button-empty-disabled-background-color',
@@ -508,7 +508,7 @@ $button-off-focus-border-color: theme(
 );
 $button-off-focus-shadow-color: theme(
   'button-off-focus-shadow-color',
-  colors.shadow(highlight)
+  colors.shadow(extra-light-highlight)
 );
 $button-off-disabled-background-color: theme(
   'button-off-disabled-background-color',

diff --git a/packages/fuselage/src/styles/variables/buttons.scss b/packages/fuselage/src/styles/variables/buttons.scss
@@ -201,7 +201,7 @@ $icon-success: (
   active-border-color: -color('icon-success', 'active-border-color', map.get($secondary, active-border-color)),
   focus-background-color: -color('icon-success', 'focus-background-color', map.get($secondary, focus-background-color)),
   focus-border-color: -color('icon-success', 'focus-border-color', map.get($secondary, focus-border-color)),
-  focus-shadow-color: -color('icon-success', 'focus-shadow-color', map.get($secondary, focus-shadow-color)),
+  focus-shadow-color: -color('icon-success', 'focus-shadow-color', map.get($success, focus-shadow-color)),
   disabled-background-color: -color('icon', 'disabled-background-color', transparent),
   disabled-border-color: -color('icon', 'disabled-border-color', transparent),
   disabled-color: -color('icon-success', 'disabled-color', map.get($success, disabled-background-color)),
@@ -219,7 +219,7 @@ $icon-warning: (
   active-border-color: -color('icon-warning', 'active-border-color', map.get($secondary, active-border-color)),
   focus-background-color: -color('icon-warning', 'focus-background-color', map.get($secondary, focus-background-color)),
   focus-border-color: -color('icon-warning', 'focus-border-color', map.get($secondary, focus-border-color)),
-  focus-shadow-color: -color('icon-warning', 'focus-shadow-color', map.get($secondary, focus-shadow-color)),
+  focus-shadow-color: -color('icon-warning', 'focus-shadow-color', map.get($warning, focus-shadow-color)),
   disabled-background-color: -color('icon', 'disabled-background-color', transparent),
   disabled-border-color: -color('icon', 'disabled-border-color', transparent),
   disabled-color: -color('icon-warning', 'disabled-color', map.get($warning, disabled-background-color)),
@@ -237,7 +237,7 @@ $icon-danger: (
   active-border-color: -color('icon-danger', 'active-border-color', map.get($secondary, active-border-color)),
   focus-background-color: -color('icon-danger', 'focus-background-color', map.get($secondary, focus-background-color)),
   focus-border-color: -color('icon-danger', 'focus-border-color', map.get($secondary, focus-border-color)),
-  focus-shadow-color: -color('icon-danger', 'focus-shadow-color', map.get($secondary, focus-shadow-color)),
+  focus-shadow-color: -color('icon-danger', 'focus-shadow-color', map.get($danger, focus-shadow-color)),
   disabled-background-color: -color('icon', 'disabled-background-color', transparent),
   disabled-border-color: -color('icon', 'disabled-border-color', transparent),
   disabled-color: -color('icon-danger', 'disabled-color', map.get($danger, disabled-background-color)),