feat: better focus styles

maxholman · Dec 25, 2022 · 2c339d8 · 2c339d8
1 parent b4354f7
commit 2c339d8
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git 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
@@ -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
@@ -16,6 +16,13 @@ const linkStyle = style({
     ),
   },
   cursor: 'pointer',
+  selectors: {
+    '&:focus-visible': {
+      outlineStyle: 'auto',
+      outlineOffset: genericVars.space.nano,
+      outlineColor: 'currentColor',
+    },
+  },
 });
 
 export const linkStyleVariant = styleVariants(