Turn the keyboard focus outline width into a css variable

IPLSplatoon · Jan 13, 2024 · ba736c5 · ba736c5
1 parent a370907
commit ba736c5
Show file tree

Hide file tree

Showing 15 changed files with 15 additions and 14 deletions.
diff --git a/src/components/iplButton.vue b/src/components/iplButton.vue
@@ -308,7 +308,7 @@ a.ipl-button.has-icon {
     }
 
     &:focus-visible {
-        outline: 2px solid var(--ipl-focus-outline-color);
+        outline: var(--ipl-focus-outline-width) solid var(--ipl-focus-outline-color);
     }
 
     &:not(.disabled) {

diff --git a/src/components/iplCheckbox.vue b/src/components/iplCheckbox.vue
@@ -128,7 +128,7 @@ label {
 
         &:focus-visible {
             outline-offset: 0;
-            outline: var(--ipl-focus-outline-color) solid 2px;
+            outline: var(--ipl-focus-outline-color) solid var(--ipl-focus-outline-width);
         }
     }
 }

diff --git a/src/components/iplDataRow.vue b/src/components/iplDataRow.vue
@@ -107,7 +107,7 @@ export default defineComponent({
         }
 
         &:focus-visible {
-            outline: var(--ipl-focus-outline-color) solid 2px;
+            outline: var(--ipl-focus-outline-color) solid var(--ipl-focus-outline-width);
         }
     }
 }

diff --git a/src/components/iplDialogTitle.vue b/src/components/iplDialogTitle.vue
@@ -81,7 +81,7 @@ export default defineComponent({
         cursor: default;
 
         &:focus-visible {
-            outline: var(--ipl-focus-outline-color) solid 2px;
+            outline: var(--ipl-focus-outline-color) solid var(--ipl-focus-outline-width);
         }
 
         &:disabled {

diff --git a/src/components/iplExpandingSpace.vue b/src/components/iplExpandingSpace.vue
@@ -188,7 +188,7 @@ export default defineComponent({
             transition-duration: constants.$transition-duration-low;
 
             &:focus-visible {
-                outline: var(--ipl-focus-outline-color) solid 2px;
+                outline: var(--ipl-focus-outline-color) solid var(--ipl-focus-outline-width);
             }
         }
     }

diff --git a/src/components/iplInput.vue b/src/components/iplInput.vue
@@ -285,7 +285,7 @@ input {
         }
 
         &:focus-visible {
-            outline: 2px solid var(--ipl-focus-outline-color);
+            outline: var(--ipl-focus-outline-width) solid var(--ipl-focus-outline-color);
         }
 
         &::-moz-color-swatch {

diff --git a/src/components/iplMessage.vue b/src/components/iplMessage.vue
@@ -122,7 +122,7 @@ export default defineComponent({
             }
 
             &:focus-visible {
-                outline: var(--ipl-focus-outline-color) solid 2px;
+                outline: var(--ipl-focus-outline-color) solid var(--ipl-focus-outline-width);
             }
         }
     }

diff --git a/src/components/iplMultiSelect.vue b/src/components/iplMultiSelect.vue
@@ -210,7 +210,7 @@ export default defineComponent({
             }
 
             &:focus-visible {
-                outline: var(--ipl-focus-outline-color) solid 2px;
+                outline: var(--ipl-focus-outline-color) solid var(--ipl-focus-outline-width);
             }
         }
     }

diff --git a/src/components/iplRadio.vue b/src/components/iplRadio.vue
@@ -118,7 +118,7 @@ legend {
             outline: none;
 
             + span {
-                outline: var(--ipl-focus-outline-color) solid 2px;
+                outline: var(--ipl-focus-outline-color) solid var(--ipl-focus-outline-width);
             }
         }
 

diff --git a/src/components/iplSidebar.vue b/src/components/iplSidebar.vue
@@ -123,7 +123,7 @@ dialog {
     }
 
     &:focus-visible {
-        outline: var(--ipl-focus-outline-color) solid 2px;
+        outline: var(--ipl-focus-outline-color) solid var(--ipl-focus-outline-width);
     }
 }
 

diff --git a/src/components/iplSmallToggle.vue b/src/components/iplSmallToggle.vue
@@ -148,7 +148,7 @@ html.light .ipl-small-toggle__wrapper {
 
         &:focus-visible {
             outline-offset: 0;
-            outline: var(--ipl-focus-outline-color) solid 2px;
+            outline: var(--ipl-focus-outline-color) solid var(--ipl-focus-outline-width);
         }
     }
 }

diff --git a/src/components/iplSpace.vue b/src/components/iplSpace.vue
@@ -56,7 +56,7 @@ button.ipl-space {
     transition-duration: constants.$transition-duration-low;
 
     &:focus-visible {
-        outline: var(--ipl-focus-outline-color) solid 2px;
+        outline: var(--ipl-focus-outline-color) solid var(--ipl-focus-outline-width);
     }
 }
 

diff --git a/src/components/iplToggle.vue b/src/components/iplToggle.vue
@@ -90,7 +90,7 @@ export default defineComponent({
     justify-content: center;
 
     &:focus-visible {
-        outline: var(--ipl-focus-outline-color) solid 2px;
+        outline: var(--ipl-focus-outline-color) solid var(--ipl-focus-outline-width);
     }
 
     &:hover {

diff --git a/src/components/iplUpload.vue b/src/components/iplUpload.vue
@@ -133,7 +133,7 @@ input {
     }
 
     &:focus-visible {
-        outline: var(--ipl-focus-outline-color) solid 2px;
+        outline: var(--ipl-focus-outline-color) solid var(--ipl-focus-outline-width);
     }
 }
 </style>
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -10,6 +10,7 @@ html {
     --ipl-input-color-alpha-focus: rgba(255, 255, 255, 0.05);
     --ipl-input-color-alpha-active: rgba(255, 255, 255, 0.2);
 
+    --ipl-focus-outline-width: 2px;
     --ipl-focus-outline-color: #FFFFFF;
     --ipl-hover-overlay-color: rgba(0, 0, 0, 0.1);
     --ipl-active-overlay-color: rgba(0, 0, 0, 0.15);