Fix inset focus ring

sumup-oss · Nov 14, 2023 · 1a70b32 · 1a70b32
1 parent 06c031b
commit 1a70b32
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 21 deletions.
diff --git a/packages/circuit-ui/components/ListItem/ListItem.module.css b/packages/circuit-ui/components/ListItem/ListItem.module.css
@@ -40,7 +40,7 @@ button.base:focus {
   z-index: 2;
   border-color: transparent;
   outline: 0;
-  box-shadow: inset 0 0 0 4px var(--cui-border-focus);
+  box-shadow: inset 0 0 0 2px var(--cui-border-focus);
 }
 
 a.base:focus::-moz-focus-inner,
@@ -79,7 +79,7 @@ button.base:active {
   left: calc(-1 * var(--cui-border-width-mega));
   z-index: 1;
   pointer-events: none;
-  content: '';
+  content: "";
   border: var(--cui-border-width-mega) solid var(--cui-border-accent);
   border-radius: var(--cui-border-radius-mega);
 }

diff --git a/packages/circuit-ui/components/Popover/Popover.module.css b/packages/circuit-ui/components/Popover/Popover.module.css
@@ -91,7 +91,7 @@
   left: 0;
   display: block;
   height: var(--cui-spacings-kilo);
-  content: '';
+  content: "";
   background: linear-gradient(
     rgb(255 255 255 / 0%),
     rgb(255 255 255 / 66%),

diff --git a/packages/circuit-ui/components/Tabs/components/Tab/Tab.module.css b/packages/circuit-ui/components/Tabs/components/Tab/Tab.module.css
@@ -23,7 +23,7 @@
 
 .base:focus {
   outline: 0;
-  box-shadow: inset 0 0 0 4px var(--cui-border-focus);
+  box-shadow: inset 0 0 0 2px var(--cui-border-focus);
 }
 
 .base:focus::-moz-focus-inner {
@@ -38,18 +38,18 @@
   background-color: var(--cui-bg-normal-pressed);
 }
 
-.base[aria-selected='true'] {
+.base[aria-selected="true"] {
   position: relative;
   color: var(--cui-fg-normal);
 }
 
-.base[aria-selected='true']::after {
+.base[aria-selected="true"]::after {
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
   width: 100%;
   height: var(--cui-spacings-bit);
-  content: ' ';
+  content: " ";
   background: var(--cui-border-accent);
 }
diff --git a/packages/circuit-ui/components/TopNavigation/TopNavigation.module.css b/packages/circuit-ui/components/TopNavigation/TopNavigation.module.css
@@ -55,7 +55,7 @@ button.hamburger {
 .logo a:focus,
 .logo button:focus {
   outline: 0;
-  box-shadow: inset 0 0 0 4px var(--cui-border-focus);
+  box-shadow: inset 0 0 0 2px var(--cui-border-focus);
 }
 
 .logo a:focus::-moz-focus-inner,

diff --git a/packages/circuit-ui/styles/shared.module.css b/packages/circuit-ui/styles/shared.module.css
@@ -15,7 +15,7 @@
 
 .list-item:focus {
   outline: 0;
-  box-shadow: inset 0 0 0 4px var(--cui-border-focus);
+  box-shadow: inset 0 0 0 2px var(--cui-border-focus);
 }
 
 .list-item:focus::-moz-focus-inner {
@@ -78,28 +78,28 @@
   background-color: var(--cui-bg-normal-disabled);
 }
 
-.navigation-item[aria-expanded='true'],
-.navigation-item[aria-current='page'] {
+.navigation-item[aria-expanded="true"],
+.navigation-item[aria-current="page"] {
   color: var(--cui-fg-accent);
   background-color: var(--cui-bg-accent);
 }
 
-.navigation-item[aria-expanded='true']:hover,
-.navigation-item[aria-current='page']:hover {
+.navigation-item[aria-expanded="true"]:hover,
+.navigation-item[aria-current="page"]:hover {
   color: var(--cui-fg-accent-hovered);
   background-color: var(--cui-bg-accent-hovered);
 }
 
-.navigation-item[aria-expanded='true']:active,
-.navigation-item[aria-current='page']:active {
+.navigation-item[aria-expanded="true"]:active,
+.navigation-item[aria-current="page"]:active {
   color: var(--cui-fg-accent-pressed);
   background-color: var(--cui-bg-accent-pressed);
 }
 
-.navigation-item[aria-expanded='true']:disabled,
-.navigation-item[aria-expanded='true'][disabled],
-.navigation-item[aria-current='page']:disabled,
-.navigation-item[aria-current='page'][disabled] {
+.navigation-item[aria-expanded="true"]:disabled,
+.navigation-item[aria-expanded="true"][disabled],
+.navigation-item[aria-current="page"]:disabled,
+.navigation-item[aria-current="page"][disabled] {
   color: var(--cui-fg-accent-disabled);
   background-color: var(--cui-bg-accent-disabled);
 }
diff --git a/packages/circuit-ui/styles/style-mixins.spec.tsx b/packages/circuit-ui/styles/style-mixins.spec.tsx
@@ -287,7 +287,7 @@ describe('Style helpers', () => {
         "
               &:focus {
                 outline: 0;
-                box-shadow: inset 0 0 0 4px var(--cui-border-focus);
+                box-shadow: inset 0 0 0 2px var(--cui-border-focus);
 
                 &::-moz-focus-inner {
                   border: 0;

diff --git a/packages/circuit-ui/styles/style-mixins.ts b/packages/circuit-ui/styles/style-mixins.ts
@@ -218,7 +218,7 @@ export function focusVisible(options?: 'inset' | ThemeArgs): SerializedStyles {
     return css`
       &:focus {
         outline: 0;
-        box-shadow: inset 0 0 0 4px var(--cui-border-focus);
+        box-shadow: inset 0 0 0 2px var(--cui-border-focus);
 
         &::-moz-focus-inner {
           border: 0;