feat: new focus type (#172)

* feat: new way to add focus styles, change focus type for link in yfm and for the link mixin
diplodoc-platform · Oct 11, 2023 · c99bc32 · c99bc32
1 parent ba77e05
commit c99bc32
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
@@ -29,18 +29,31 @@
     }
 }
 
-@mixin focusable($offset: 0) {
-    &:focus {
-        outline: 2px solid var(--g-color-line-focus);
-        outline-offset: $offset;
+@mixin focusable($offset: 0, $mode: 'outline') {
+    @if $mode == 'outline' {
+        &:focus {
+            outline: 2px solid var(--g-color-line-focus);
+            outline-offset: $offset;
+        }
+        &:focus:not(:focus-visible) {
+            outline: 0;
+        }
     }
-    &:focus:not(:focus-visible) {
-        outline: 0;
+
+    @if $mode == 'box-shadow' {
+        &:focus {
+            box-shadow: 0 0 0 2px var(--g-color-line-focus);
+            outline: 0;
+        }
+        &:focus:not(:focus-visible) {
+            box-shadow: none;
+        }
     }
 }
 
 @mixin link() {
     @include islands-focus();
+    @include focusable(0, 'box-shadow');
 
     color: var(--g-color-text-link);
     text-decoration: none;
@@ -51,8 +64,6 @@
     &:active {
         color: var(--g-color-text-link-hover);
     }
-
-    @include focusable();
 }
 
 @mixin heading1() {

diff --git a/src/styles/yfm.scss b/src/styles/yfm.scss
@@ -30,7 +30,7 @@
             color: var(--g-color-text-link-hover);
         }
 
-        @include focusable();
+        @include focusable(0, 'box-shadow');
         &.yfm-anchor {
             &:focus::before {
                 visibility: visible;