feat: add focus-outline mixin (#2475)

SeqviriouM · web-flow · commit 3b49eaa8c055 · 2025-10-31T18:18:30.000+03:00
diff --git a/src/components/ActionTooltip/ActionTooltip.scss b/src/components/ActionTooltip/ActionTooltip.scss
@@ -1,4 +1,4 @@
-@use '../../../styles/mixins.scss';
+@use '../../../styles/mixins';
 @use '../variables';
 
 $block: '.#{variables.$ns}action-tooltip';
diff --git a/src/components/Breadcrumbs/Breadcrumbs.scss b/src/components/Breadcrumbs/Breadcrumbs.scss
@@ -68,7 +68,7 @@ $block: '.#{variables.$ns}breadcrumbs';
         }
 
         &:focus-visible {
-            outline: 2px solid var(--g-color-line-focus);
+            @include mixins.focus-outline();
             outline-offset: 0;
         }
     }
diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss
@@ -1,4 +1,5 @@
 @use '../variables';
+@use '../../../styles/mixins';
 
 $block: '.#{variables.$ns}card';
 
@@ -79,8 +80,8 @@ $block: '.#{variables.$ns}card';
             }
 
             &:focus-visible::after {
+                @include mixins.focus-outline();
                 content: '';
-                outline: 2px solid var(--g-color-line-focus);
             }
         }
     }
@@ -122,8 +123,8 @@ $block: '.#{variables.$ns}card';
             }
 
             &:focus-visible::after {
+                @include mixins.focus-outline();
                 content: '';
-                outline: 2px solid var(--g-color-line-focus);
             }
         }
 
diff --git a/src/components/Checkbox/Checkbox.scss b/src/components/Checkbox/Checkbox.scss
@@ -1,4 +1,5 @@
 @use '../variables';
+@use '../../../styles/mixins';
 
 $block: '.#{variables.$ns}checkbox';
 
@@ -68,7 +69,7 @@ $block: '.#{variables.$ns}checkbox';
     }
 
     &__control:focus-visible + &__outline {
-        outline: 2px solid var(--g-color-line-focus);
+        @include mixins.focus-outline();
     }
 
     &_size {
diff --git a/src/components/DefinitionList/DefinitionList.scss b/src/components/DefinitionList/DefinitionList.scss
@@ -1,4 +1,4 @@
-@use '../../../styles/mixins.scss';
+@use '../../../styles/mixins';
 @use '../variables';
 
 $block: '.#{variables.$ns}definition-list';
diff --git a/src/components/Disclosure/Disclosure.scss b/src/components/Disclosure/Disclosure.scss
@@ -31,7 +31,7 @@ $gap: 8px;
         color: var(--g-disclosure-text-color, var(--_--text-color));
 
         &:focus-visible {
-            outline: 2px solid var(--g-color-line-focus);
+            @include mixins.focus-outline();
         }
     }
     &__trigger_arrow_end {
diff --git a/src/components/HelpMark/HelpMark.scss b/src/components/HelpMark/HelpMark.scss
@@ -1,4 +1,4 @@
-@use '../../../styles/mixins.scss';
+@use '../../../styles/mixins';
 @use '../variables';
 
 $block: '.#{variables.$ns}help-mark';
@@ -19,7 +19,7 @@ $block: '.#{variables.$ns}help-mark';
     }
 
     &:focus-visible {
-        outline: 2px solid var(--g-color-line-focus);
+        @include mixins.focus-outline();
         border-radius: 50%;
     }
 
diff --git a/src/components/Hotkey/Hotkey.scss b/src/components/Hotkey/Hotkey.scss
@@ -1,4 +1,4 @@
-@use '../../../styles/mixins.scss';
+@use '../../../styles/mixins';
 @use '../variables';
 
 $block: '.#{variables.$ns}hotkey';
diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss
@@ -244,7 +244,7 @@ $transition-timing-function: ease-in-out;
     // focus styles
     &__main-button:focus-visible,
     &__addon_type_button:focus-visible {
-        outline: 2px solid var(--g-color-line-focus);
+        @include mixins.focus-outline();
     }
 }
 
diff --git a/src/components/Link/Link.scss b/src/components/Link/Link.scss
@@ -1,4 +1,5 @@
 @use '../variables';
+@use '../../../styles/mixins';
 
 $block: '.#{variables.$ns}link';
 
@@ -10,7 +11,7 @@ $block: '.#{variables.$ns}link';
     border-radius: var(--g-focus-border-radius);
 
     &:focus-visible {
-        outline: 2px solid var(--g-color-line-focus);
+        @include mixins.focus-outline();
     }
 
     &_view_normal {
diff --git a/src/components/Radio/Radio.scss b/src/components/Radio/Radio.scss
@@ -1,4 +1,5 @@
 @use '../variables';
+@use '../../../styles/mixins';
 
 $block: '.#{variables.$ns}radio';
 $discMarginMSize: 5px;
@@ -69,7 +70,7 @@ $discMarginXLSize: 8px;
     }
 
     &__control:focus-visible + &__outline {
-        outline: 2px solid var(--g-color-line-focus);
+        @include mixins.focus-outline();
     }
 
     &_size {
diff --git a/src/components/Select/components/SelectControl/SelectControl.scss b/src/components/Select/components/SelectControl/SelectControl.scss
@@ -244,7 +244,7 @@ $blockButton: '.#{variables.$ns}select-control__button';
         border-radius: var(--g-focus-border-radius);
 
         &:focus {
-            outline: 2px solid var(--g-color-line-focus);
+            @include mixins.focus-outline();
         }
         &:focus:not(:focus-visible) {
             outline: 0;
diff --git a/src/components/Switch/Switch.scss b/src/components/Switch/Switch.scss
@@ -1,4 +1,5 @@
 @use '../variables';
+@use '../../../styles/mixins';
 
 $block: '.#{variables.$ns}switch';
 
@@ -48,7 +49,7 @@ $block: '.#{variables.$ns}switch';
     }
 
     &__control:focus-visible + &__outline {
-        outline: 2px solid var(--g-color-line-focus);
+        @include mixins.focus-outline();
     }
 
     &_loading {
diff --git a/src/components/Table/hoc/withTableSorting/withTableSorting.scss b/src/components/Table/hoc/withTableSorting/withTableSorting.scss
@@ -1,4 +1,5 @@
 @use '../../../variables';
+@use '../../../../../styles/mixins';
 
 $block: '.#{variables.$ns}table';
 
@@ -24,7 +25,7 @@ $block: '.#{variables.$ns}table';
         }
 
         &:focus-visible {
-            outline: 2px solid var(--g-color-line-focus);
+            @include mixins.focus-outline();
         }
     }
 }
diff --git a/src/components/Toc/TocItem/TocItem.scss b/src/components/Toc/TocItem/TocItem.scss
@@ -1,4 +1,5 @@
 @use '../../variables';
+@use '../../../../styles/mixins';
 
 $block: '.#{variables.$ns}toc-item';
 
@@ -14,8 +15,8 @@ $block: '.#{variables.$ns}toc-item';
 
         &-link {
             &:focus-visible {
+                @include mixins.focus-outline();
                 outline-offset: -2px;
-                outline: 2px solid var(--g-color-line-focus);
                 border-radius: calc(var(--g-focus-border-radius) + 2px);
             }
 
diff --git a/src/components/Toc/TocSections/TocSections.scss b/src/components/Toc/TocSections/TocSections.scss
@@ -1,5 +1,5 @@
 @use '../../variables';
-@use '../../../../styles/mixins.scss';
+@use '../../../../styles/mixins';
 
 $block: '.#{variables.$ns}toc';
 
diff --git a/src/components/UserLabel/UserLabel.scss b/src/components/UserLabel/UserLabel.scss
@@ -145,7 +145,7 @@ $block: '.#{variables.$ns}user-label';
             cursor: pointer;
 
             &:focus-visible {
-                outline: 2px solid var(--g-color-line-focus);
+                @include mixins.focus-outline();
             }
         }
 
@@ -203,7 +203,7 @@ $block: '.#{variables.$ns}user-label';
         border-radius: var(--g-focus-border-radius);
 
         #{$block}__close:focus-visible & {
-            outline: 2px solid var(--g-color-line-focus);
+            @include mixins.focus-outline();
         }
     }
 }
diff --git a/src/components/legacy/Breadcrumbs/Breadcrumbs.scss b/src/components/legacy/Breadcrumbs/Breadcrumbs.scss
@@ -18,7 +18,7 @@ $block: '.#{variables.$ns}breadcrumbs-legacy';
         color: var(--g-color-text-secondary);
 
         &:focus-visible {
-            outline: 2px solid var(--g-color-line-focus);
+            @include mixins.focus-outline();
         }
     }
 
@@ -31,7 +31,7 @@ $block: '.#{variables.$ns}breadcrumbs-legacy';
         text-overflow: ellipsis;
 
         &:focus-visible {
-            outline: 2px solid var(--g-color-line-focus);
+            @include mixins.focus-outline();
             border-radius: var(--g-focus-border-radius);
         }
     }
diff --git a/src/components/legacy/Tabs/Tabs.scss b/src/components/legacy/Tabs/Tabs.scss
@@ -99,7 +99,7 @@ $block: '.#{variables.$ns}tabs-legacy';
 
             &:focus-visible {
                 #{$block}__item-content {
-                    outline: 2px solid var(--g-color-line-focus);
+                    @include mixins.focus-outline();
                     outline-offset: -2px;
                 }
             }
diff --git a/src/components/tabs/Tab.scss b/src/components/tabs/Tab.scss
@@ -49,7 +49,7 @@ $block: '.#{variables.$ns}tab';
 
     &:focus-visible {
         #{$block}__content {
-            outline: 2px solid var(--g-color-line-focus);
+            @include mixins.focus-outline();
             outline-offset: -2px;
         }
     }
diff --git a/styles/mixins.scss b/styles/mixins.scss
@@ -362,3 +362,7 @@
         background: var(--g-color-scroll-handle-hover);
     }
 }
+
+@mixin focus-outline() {
+    outline: 2px solid var(--g-color-line-focus);
+}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@use '../../../styles/mixins.scss';`
	`1`	`+@use '../../../styles/mixins';`
`2`	`2`	`@use '../variables';`
`3`	`3`
`4`	`4`	`$block: '.#{variables.$ns}action-tooltip';`
Original file line number	Diff line number	Diff line change
`@@ -68,7 +68,7 @@ $block: '.#{variables.$ns}breadcrumbs';`
`68`	`68`	`}`
`69`	`69`
`70`	`70`	`&:focus-visible {`
`71`		`- outline: 2px solid var(--g-color-line-focus);`
	`71`	`+ @include mixins.focus-outline();`
`72`	`72`	`outline-offset: 0;`
`73`	`73`	`}`
`74`	`74`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`@use '../variables';`
	`2`	`+@use '../../../styles/mixins';`
`2`	`3`
`3`	`4`	`$block: '.#{variables.$ns}card';`
`4`	`5`
`@@ -79,8 +80,8 @@ $block: '.#{variables.$ns}card';`
`79`	`80`	`}`
`80`	`81`
`81`	`82`	`&:focus-visible::after {`
	`83`	`+ @include mixins.focus-outline();`
`82`	`84`	`content: '';`
`83`		`- outline: 2px solid var(--g-color-line-focus);`
`84`	`85`	`}`
`85`	`86`	`}`
`86`	`87`	`}`
`@@ -122,8 +123,8 @@ $block: '.#{variables.$ns}card';`
`122`	`123`	`}`
`123`	`124`
`124`	`125`	`&:focus-visible::after {`
	`126`	`+ @include mixins.focus-outline();`
`125`	`127`	`content: '';`
`126`		`- outline: 2px solid var(--g-color-line-focus);`
`127`	`128`	`}`
`128`	`129`	`}`
`129`	`130`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ $gap: 8px;`
`31`	`31`	`color: var(--g-disclosure-text-color, var(--_--text-color));`
`32`	`32`
`33`	`33`	`&:focus-visible {`
`34`		`- outline: 2px solid var(--g-color-line-focus);`
	`34`	`+ @include mixins.focus-outline();`
`35`	`35`	`}`
`36`	`36`	`}`
`37`	`37`	`&__trigger_arrow_end {`
Original file line number	Diff line number	Diff line change
`@@ -244,7 +244,7 @@ $transition-timing-function: ease-in-out;`
`244`	`244`	`// focus styles`
`245`	`245`	`&__main-button:focus-visible,`
`246`	`246`	`&__addon_type_button:focus-visible {`
`247`		`- outline: 2px solid var(--g-color-line-focus);`
	`247`	`+ @include mixins.focus-outline();`
`248`	`248`	`}`
`249`	`249`	`}`
`250`	`250`