fix(component-library): fix focus colors

Author: cprussin

apps/insights/src/components/CopyButton/index.module.scss

@@ -50,7 +50,7 @@
   }
 
   &[data-focus-visible] {
-    outline: 1px auto currentcolor;
+    outline: 1px solid currentcolor;
     outline-offset: theme.spacing(1);
   }
 

packages/component-library/src/Button/index.module.scss

@@ -128,7 +128,7 @@
   }
 
   &[data-focus-visible] {
-    border-color: theme.color("forms", "input", "focus", "border");
-    box-shadow: 0px 0px 0px 4px theme.color("forms", "focus-color");
+    border-color: theme.color("focus");
+    @include theme.shadow("focus");
   }
 }

packages/component-library/src/SearchInput/index.module.scss

@@ -25,7 +25,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    caret-color: theme.color("forms", "input", "focus", "border");
+    caret-color: theme.color("focus");
 
     &::-webkit-search-cancel-button {
       display: none;
@@ -36,8 +36,9 @@
     }
 
     &[data-focused] {
-      border-color: theme.color("forms", "input", "focus", "border");
-      box-shadow: 0px 0px 0px 4px theme.color("forms", "focus-color");
+      border-color: theme.color("focus");
+
+      @include theme.shadow("focus");
     }
 
     :placeholder {

packages/component-library/src/Select/index.module.scss

@@ -72,7 +72,7 @@
       }
 
       &[data-focus-visible] {
-        box-shadow: 0px 0px 0px 4px theme.color("forms", "focus-color");
+        outline: theme.color("focus-dim") solid 1px;
       }
 
       &[data-selected] .check {

packages/component-library/src/Table/index.module.scss

@@ -16,7 +16,7 @@
     .loader {
       width: 100%;
       height: 100%;
-      background-color: theme.color("forms", "input", "focus", "border");
+      background-color: theme.color("focus");
       transform-origin: left;
       animation: progress 1s infinite linear;
 
@@ -91,7 +91,7 @@
       }
 
       &[data-focus-visible] {
-        outline: theme.color("forms", "input", "focus", "border") auto 1px;
+        outline: theme.color("focus") solid 1px;
       }
 
       &[data-href] {
@@ -137,7 +137,7 @@
     }
 
     &[data-focus-visible] {
-      outline: theme.color("forms", "input", "focus", "border") auto 1px;
+      outline: theme.color("focus") solid 1px;
     }
   }
 }

packages/component-library/src/theme.scss

@@ -423,15 +423,18 @@ $color: (
         light-dark(pallette-color("steel", 900), pallette-color("steel", 50)),
     ),
   ),
+  "focus":
+    light-dark(pallette-color("violet", 700), pallette-color("violet", 500)),
+  "focus-dim":
+    light-dark(
+      rgba(pallette-color("violet", 700), 0.3),
+      rgba(pallette-color("violet", 500), 0.3)
+    ),
   "forms": (
-    "focus-color": light-dark(rgba(#7142cf, 0.2), rgba(#7b4cd9, 0.2)),
     "input": (
       "hover": (
         "border": pallette-color("stone", 400),
       ),
-      "focus": (
-        "border": pallette-color("steel", 500),
-      ),
     ),
   ),
   "button": (
@@ -481,8 +484,16 @@ $color: (
       "foreground":
         light-dark(pallette-color("stone", 900), pallette-color("steel", 50)),
       "background": (
-        "hover": light-dark(rgba(#715858, 0.05), rgba(#e9ecff, 0.05)),
-        "active": light-dark(rgba(#715858, 0.1), rgba(#e9ecff, 0.1)),
+        "hover":
+          light-dark(
+            rgba(pallette-color("beige", 950), 0.05),
+            rgba(pallette-color("steel", 50), 0.05)
+          ),
+        "active":
+          light-dark(
+            rgba(pallette-color("beige", 950), 0.1),
+            rgba(pallette-color("steel", 50), 0.1)
+          ),
       ),
     ),
     "disabled": (
@@ -544,6 +555,13 @@ $button-sizes: (
   @return map-get-strict($button-sizes, $size, "icon-size");
 }
 
+$shadows: (
+  "focus": 0px 0px 0px 4px color("focus-dim"),
+);
+@mixin shadow($shadow...) {
+  box-shadow: map-get-strict($shadows, $shadow...);
+}
+
 @mixin sr-only {
   position: absolute;
   width: 1px;