wip: Tweaking button styles

packages/ui/src/components/button.css

@@ -7,6 +7,7 @@
   border-radius: 6px;
   text-decoration: none;
   user-select: none;
+  outline: none;
 
   &[data-variant="primary"] {
     border-color: var(--border-base);
@@ -28,22 +29,26 @@
   }
 
   &[data-variant="secondary"] {
-    border-color: transparent;
+    border: transparent;
     background-color: var(--button-secondary-base);
     color: var(--text-strong);
     box-shadow: var(--shadow-xs-border);
 
     &:hover:not(:disabled) {
-      border-color: var(--border-hover);
-      background-color: var(--surface-hover);
+      background-color: var(--button-secondary-hover);
     }
     &:active:not(:disabled) {
-      border-color: var(--border-active);
-      background-color: var(--surface-active);
+      background-color: var(--button-secondary-base);
     }
     &:focus:not(:disabled) {
-      border-color: var(--border-focus);
-      background-color: var(--surface-focus);
+      background-color: var(--button-secondary-base);
+    }
+    &:focus-visible:not(:active) {
+      background-color: var(--button-secondary-base);
+      box-shadow: var(--shadow-xs-border-focus);
+    }
+    &:focus-visible:active {
+      box-shadow: none;
     }
 
     [data-slot="icon"] {

packages/ui/src/styles/theme.css

@@ -60,10 +60,18 @@
     0 1px 2px -1px rgba(19, 16, 16, 0.04),
     0 1px 2px 0 rgba(19, 16, 16, 0.06),
     0 1px 3px 0 rgba(19, 16, 16, 0.08);
-  --shadow-xs-border-selected:
+  --shadow-xs-border-select:
     0 0 0 3px var(--border-weak-selected, rgba(1, 103, 255, 0.29)),
     0 0 0 1px var(--border-selected, rgba(0, 74, 255, 0.99)), 0 1px 2px -1px rgba(19, 16, 16, 0.25),
     0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
+  --shadow-xs-border-focus:
+    0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.20)),
+    0 1px 2px -1px rgba(19, 16, 16, 0.25),
+    0 1px 2px 0 rgba(19, 16, 16, 0.08),
+    0 1px 3px 0 rgba(19, 16, 16, 0.12),
+    0 0 0 2px var(--background-weak, #F1F0F0),
+    0 0 0 3px var(--border-selected, rgba(0, 74, 255, 0.99));
+
 
   --text-mix-blend-mode: multiply;
 }
@@ -170,7 +178,7 @@
   --text-on-brand-weaker: var(--smoke-light-alpha-8);
   --text-on-brand-strong: var(--smoke-light-alpha-12);
   --button-secondary-base: #fdfcfc;
-  --button-secondary-base-hover: #faf9f9;
+  --button-secondary-hover: #fafafa;
   --border-base: var(--smoke-light-alpha-7);
   --border-hover: var(--smoke-light-alpha-8);
   --border-active: var(--smoke-light-alpha-9);
@@ -405,7 +413,7 @@
     --text-on-brand-weaker: var(--smoke-dark-alpha-8);
     --text-on-brand-strong: var(--smoke-dark-alpha-12);
     --button-secondary-base: var(--smoke-dark-4);
-    --button-secondary-base-hover: #2a2727;
+    --button-secondary-hover: #2A2727;
     --border-base: var(--smoke-dark-alpha-7);
     --border-hover: var(--smoke-dark-alpha-8);
     --border-active: var(--smoke-dark-alpha-9);