Update outline to match new primer react style of gapped outline (#52…

…099)
github · Aug 23, 2024 · 276b364 · 276b364
1 parent 48176f8
commit 276b364
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/events/components/Survey.module.scss b/src/events/components/Survey.module.scss
@@ -4,5 +4,7 @@
 }
 
 .customRadio:focus + label {
-  box-shadow: 0 0 1px 3px var(--color-accent-muted);
+  outline: 2px solid var(--fgColor-accent, var(--color-accent-fg));
+  outline-offset: -2px;
+  box-shadow: 0 0 0 3px inset;
 }
diff --git a/src/frame/components/ui/ScrollButton/ScrollButton.module.scss b/src/frame/components/ui/ScrollButton/ScrollButton.module.scss
@@ -10,6 +10,9 @@
   opacity: 1;
 }
 
-.customFocus:focus {
-  box-shadow: 0 0 1px 3px var(--color-accent-muted);
+.customFocus:focus:not(:focus-visible), // override primer css specificity
+.customFocus:focus-visible {
+  outline: 2px solid var(--fgColor-accent, var(--color-accent-fg));
+  outline-offset: -2px;
+  box-shadow: 0 0 0 4px inset; // A little wider for the border radius :shrug:
 }