feat: add focus visible outlines with browser default colors as a glo…

…bal style in stitches config ts [SRED-163] (#391) * feat: add focus visible outlines with browser default colors as a global style in stitches config ts * chore(release): publish * fix: move focus-visible outline styles to wildcard section of stitches config ts * chore(release): publish * chore: revert version number to 1.5.2 * fix: address lingering merge conflict issues
washingtonpost · May 23, 2023 · 6c8252b · 6c8252b · vercel · May 23, 2023
1 parent 9038fff
commit 6c8252b
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/build.washingtonpost.com/package.json b/build.washingtonpost.com/package.json
@@ -22,7 +22,7 @@
     "@radix-ui/react-toggle-group": "^1.0.1",
     "@stitches/react": "1.2.8",
     "@washingtonpost/site-favicons": "^0.1.3",
-    "@washingtonpost/tachyons-css": "^1.7.0",
+    "@washingtonpost/tachyons-css": "^1.7.1",
     "@washingtonpost/wpds-accordion": "1.5.2",
     "@washingtonpost/wpds-assets": "^1.19.2",
     "@washingtonpost/wpds-kitchen-sink": "1.5.2",

diff --git a/package-lock.json b/package-lock.json
diff --git a/ui/theme/src/stitches.config.ts b/ui/theme/src/stitches.config.ts
@@ -129,6 +129,12 @@ export const globalStyles = globalCss({
   },
   "*": {
     boxSizing: "border-box",
+    "&:focus-visible": {
+      outline: "1px auto Highlight",
+      "@media screen and (-webkit-min-device-pixel-ratio: 0)": {
+        outline: "1px auto -webkit-focus-ring-color",
+      },
+    },
   },
   html: {
     overflowX: "hidden",