From c99bc3246efbd197e9525555cccff1b648d6e709 Mon Sep 17 00:00:00 2001
From: Kyzyl-ool Kezhik <kyzyloolk@mail.ru>
Date: Wed, 11 Oct 2023 14:33:00 +0200
Subject: [PATCH] feat: new focus type (#172)

* feat: new way to add focus styles, change focus type for link in yfm and for the link mixin
---
 src/styles/mixins.scss | 27 +++++++++++++++++++--------
 src/styles/yfm.scss    |  2 +-
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
index bbc7e14e..f093cb1f 100644
--- 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
index c763b0c1..99249e6e 100644
--- 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;