fix: fixed focus style in navbar

Kotlin · Sep 13, 2024 · ccbcf75 · ccbcf75
1 parent 989098c
commit ccbcf75
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 13 deletions.
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/styles.scss
@@ -44,7 +44,7 @@
   }
 
   &:focus-visible {
-    outline: 4px solid var(--color-key-blue-05);
+    outline: var(--focus-outline);
   }
 
   .theme-dark & {

diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/checkbox/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/checkbox/styles.scss
@@ -37,6 +37,6 @@
   }
 
   &--input:focus-visible {
-    outline: 4px solid var(--color-key-blue-05);
+    outline: var(--focus-outline);
   }
 }
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/styles.scss
@@ -79,7 +79,7 @@
     &:focus-visible {
       z-index: 1;
 
-      outline: 4px solid var(--color-key-blue-05);
+      outline: var(--focus-outline);
     }
 
     &_active {

diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/global.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/global.scss
@@ -5,6 +5,7 @@
 
 :root {
   --color-background: var(--color-background-page);
+  --focus-outline: 4px solid var(--color-key-blue-05);
 }
 
 .theme-dark {

diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-name/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/library-name/styles.scss
@@ -20,6 +20,10 @@
 
   font: var(--font-h4);
 
+  &:focus-visible {
+    outline: var(--focus-outline);
+  }
+
   @media (width < $breakpoint-desktop-min) {
     height: 52px;
 

diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/styles.scss
@@ -54,6 +54,10 @@
     background-color: var(--color-w10);
   }
 
+  &:focus-visible {
+    outline: var(--focus-outline);
+  }
+
   @media (width < $breakpoint-desktop-min) {
     width: 52px;
     height: 52px;

diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.css b/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.css
@@ -122,7 +122,7 @@
 }
 
 .button:focus-visible {
-  outline: 4px solid var(--color-key-blue-05);
+  outline: var(--focus-outline);
 }
 
 .theme-dark .button {
@@ -305,7 +305,7 @@
 }
 
 .checkbox--input:focus-visible {
-  outline: 4px solid var(--color-key-blue-05);
+  outline: var(--focus-outline);
 }
 /*!
  * Copyright 2014-2024  JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
@@ -462,7 +462,7 @@
 
 .dropdown--option:focus-visible {
   z-index: 1;
-  outline: 4px solid var(--color-key-blue-05);
+  outline: var(--focus-outline);
 }
 
 .dropdown--option_active {
@@ -1890,6 +1890,7 @@
 
 :root {
   --color-background: var(--color-background-page);
+  --focus-outline: var(--focus-outline);
 }
 
 .theme-dark {

diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.min.css b/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.min.css
diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.min.js b/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.min.js