From 2c339d8bd77d5042f7230e9cc6d4a0a140160eef Mon Sep 17 00:00:00 2001
From: Max Holman <max@holmn.com>
Date: Sun, 25 Dec 2022 17:45:23 +0800
Subject: [PATCH] feat: better focus styles

---
 lib/buttons.css.ts |  7 ++++---
 lib/forms.css.ts   | 21 +++++++++++++--------
 lib/links.css.ts   |  7 +++++++
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/lib/buttons.css.ts b/lib/buttons.css.ts
index fe65e4d..f59f3fc 100644
--- a/lib/buttons.css.ts
+++ b/lib/buttons.css.ts
@@ -48,9 +48,10 @@ const base = style({
       cursor: 'default',
       filter: 'grayscale(1)',
     },
-    '&:active': {
-      outlineWidth: genericVars.border.weight.thick,
-      outlineColor: 'initial',
+    '&:focus': {
+      outlineStyle: 'auto',
+      outlineOffset: genericVars.space.nano,
+      outlineColor: hsl(toneH, toneS, contrastSchemeVars.level4.l),
     },
   },
 });
diff --git a/lib/forms.css.ts b/lib/forms.css.ts
index 418014c..2846a5e 100644
--- a/lib/forms.css.ts
+++ b/lib/forms.css.ts
@@ -1,5 +1,4 @@
 import { createVar, style } from '@vanilla-extract/css';
-import { calc } from '@vanilla-extract/css-utils';
 import { genericVars } from './design-system.css.js';
 import { colorThemeVars, contrastSchemeVars } from './schemes/color.css.js';
 import { hsl } from './utils.js';
@@ -18,29 +17,35 @@ export const formInput = style({
   fontSize: genericVars.text.size.normal,
   selectors: {
     '&[readonly]': {
-      paddingLeft: 0,
-      paddingRight: 0,
-      borderLeft: 0,
-      borderRight: 0,
+      paddingInline: 0,
+      borderInline: 0,
       borderColor: 'transparent',
       backgroundColor: 'transparent',
     },
     '&::placeholder': {
       color: hsl(0, 0, contrastSchemeVars.level4.l),
     },
+    '&:focus': {
+      outlineStyle: 'auto',
+      outlineOffset: genericVars.space.nano,
+      outlineColor: hsl(360, 80, contrastSchemeVars.level4.l),
+    },
   },
 });
 
 export const formInputNotCheckRadio = style({
   selectors: {
     '&:focus-visible': {
-      outline: 'max(2px, 0.15em) solid currentColor',
+      outlineStyle: 'auto',
       outlineColor: hsl(
         colorThemeVars.tones.accent.h,
         colorThemeVars.tones.accent.s,
-        contrastSchemeVars.level1.l,
+        contrastSchemeVars.level4.l,
       ),
-      outlineOffset: calc(borderWidthVar).negate().toString(),
+      outlineOffset: genericVars.space.nano,
+    },
+    '&:focus': {
+      outlineOffset: 'initial',
     },
   },
 });
diff --git a/lib/links.css.ts b/lib/links.css.ts
index 29c306b..d77e69a 100644
--- a/lib/links.css.ts
+++ b/lib/links.css.ts
@@ -16,6 +16,13 @@ const linkStyle = style({
     ),
   },
   cursor: 'pointer',
+  selectors: {
+    '&:focus-visible': {
+      outlineStyle: 'auto',
+      outlineOffset: genericVars.space.nano,
+      outlineColor: 'currentColor',
+    },
+  },
 });
 
 export const linkStyleVariant = styleVariants(