Merge pull request #2143 from cprussin/fix-colors

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

@@ -5,12 +5,13 @@
   cursor: pointer;
   white-space: nowrap;
   font-weight: theme.font-weight("medium");
-  outline: none;
-  transition-property: background-color, color, border-color, box-shadow;
+  transition-property: background-color, color, border-color, outline-color;
   transition-duration: 100ms;
   transition-timing-function: linear;
   border: 1px solid transparent;
   text-decoration: none;
+  outline-offset: 0;
+  outline: theme.spacing(1) solid transparent;
 
   .iconWrapper {
     display: inline-grid;
@@ -127,7 +128,7 @@
   }
 
   &[data-focus-visible] {
-    border-color: theme.color("forms", "input", "focus", "border");
-    box-shadow: 0 0 0 4px theme.color("forms", "focus-color");
+    border-color: theme.color("focus");
+    outline-color: theme.color("focus-dim");
   }
 }

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

@@ -15,14 +15,15 @@
     height: 100%;
     border: 1px solid theme.color("border");
     background-color: theme.color("background", "primary");
-    outline: none;
-    transition-property: border-color, box-shadow, background-color, color;
+    transition-property: border-color, outline-color, background-color, color;
     transition-duration: 100ms;
     transition-timing-function: linear;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    caret-color: theme.color("forms", "input", "focus", "border");
+    caret-color: theme.color("focus");
+    outline: theme.spacing(1) solid transparent;
+    outline-offset: 0;
 
     &::-webkit-search-cancel-button {
       display: none;
@@ -33,8 +34,8 @@
     }
 
     &[data-focused] {
-      border-color: theme.color("forms", "input", "focus", "border");
-      box-shadow: 0 0 0 4px theme.color("forms", "focus-color");
+      border-color: theme.color("focus");
+      outline-color: theme.color("focus-dim");
     }
 
     &::placeholder {

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

@@ -49,9 +49,12 @@
       align-items: center;
       justify-content: space-between;
       gap: theme.spacing(4);
-      transition-property: background-color;
+      transition-property: background-color, outline-color, border-color;
       transition-duration: 100ms;
       transition-timing-function: linear;
+      border: 1px solid transparent;
+      outline: theme.spacing(0.5) solid transparent;
+      outline-offset: 0;
 
       .check {
         width: theme.spacing(3);
@@ -73,7 +76,8 @@
       }
 
       &[data-focus-visible] {
-        box-shadow: 0 0 0 4px theme.color("forms", "focus-color");
+        border-color: theme.color("focus");
+        outline-color: theme.color("focus-dim");
       }
 
       &[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;
 
@@ -71,7 +71,7 @@
       }
 
       &[data-focus-visible] {
-        outline: theme.color("forms", "input", "focus", "border") auto 1px;
+        outline: theme.spacing(0.5) solid theme.color("focus");
       }
     }
 
@@ -117,7 +117,7 @@
         }
 
         &[data-focus-visible] {
-          outline: theme.color("forms", "input", "focus", "border") auto 1px;
+          outline: theme.spacing(0.5) solid theme.color("focus");
         }
 
         &[data-href] {

packages/component-library/src/theme.scss

@@ -10,6 +10,10 @@
   }
 }
 
+@function spacing($increment) {
+  @return $increment * 0.25rem;
+}
+
 $font-weight: (
   "thin": 100,
   "extralight": 200,
@@ -43,14 +47,14 @@ $font-size: (
   "9xl": 8rem,
 );
 
-@function font-size($size) {
+@function font-size($size: "$base") {
   @return map-get-strict($font-size, $size);
 }
 
 $border-radius: (
   "none": 0px,
   "sm": 0.125rem,
-  "DEFAULT": 0.25rem,
+  "base": 0.25rem,
   "md": 0.375rem,
   "lg": 0.5rem,
   "xl": 0.75rem,
@@ -59,14 +63,10 @@ $border-radius: (
   "full": 9999px,
 );
 
-@function border-radius($radius: "DEFAULT") {
+@function border-radius($radius: "base") {
   @return map-get-strict($border-radius, $radius);
 }
 
-@function spacing($increment) {
-  @return $increment * 0.25rem;
-}
-
 $color-pallette: (
   "black": #000,
   "white": #fff,
@@ -389,6 +389,7 @@ $color-pallette: (
 }
 
 $color: (
+  "transparent": transparent,
   "background": (
     "primary": light-dark(pallette-color("white"), pallette-color("steel", 950)),
     "modal": light-dark(pallette-color("white"), pallette-color("steel", 950)),
@@ -427,15 +428,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": (
@@ -485,8 +489,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": (