fix: use blue focus color everywhere

gravity-ui · Sep 21, 2023 · 555b882 · 555b882
1 parent 56d663b
commit 555b882
Show file tree

Hide file tree

Showing 13 changed files with 3 additions and 33 deletions.
diff --git a/src/blocks/Slider/Arrow/Arrow.scss b/src/blocks/Slider/Arrow/Arrow.scss
@@ -27,7 +27,6 @@ $block: '.#{$ns}slider-block-arrow';
     }
 
     &__button {
-        --g-color-line-focus: var(--g-color-text-brand);
         @include reset-button-style();
         @include shadow();
         @extend %flex;

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -34,15 +34,6 @@ $block: '.#{$ns}button-block';
         &_monochrome {
             @include monochrome-button();
         }
-
-        &_normal-contrast,
-        &_raised {
-            --yc-button-outline-color: var(--yc-button-background-color);
-
-            &:focus::before {
-                outline-offset: 1px;
-            }
-        }
     }
 
     &_size {

diff --git a/src/components/ButtonTabs/ButtonTabs.scss b/src/components/ButtonTabs/ButtonTabs.scss
@@ -5,8 +5,6 @@ $block: '.#{$ns}button-tabs';
 
 #{$block} {
     &__item {
-        --g-color-line-focus: var(--g-color-text-brand);
-
         @include add-specificity(&) {
             margin-right: $indentXXXS;
             margin-bottom: $indentXXS;
@@ -18,17 +16,13 @@ $block: '.#{$ns}button-tabs';
             );
 
             &_active {
-                --g-color-line-focus: var(--pc-selected-tab-item-background-color);
                 pointer-events: none;
 
                 @include button(
                     var(--pc-selected-tab-item-color),
                     var(--pc-selected-tab-item-background-color),
                     $hoverBackgroundColor: var(--pc-selected-tab-item-background-color-hover)
                 );
-                &:focus::before {
-                    outline-offset: 1px;
-                }
             }
         }
     }

diff --git a/src/components/FullscreenImage/FullscreenImage.scss b/src/components/FullscreenImage/FullscreenImage.scss
@@ -31,7 +31,6 @@ $closeButtonSize: 36px;
     }
 
     &__icon-wrapper {
-        --g-color-line-focus: var(--g-color-text-brand);
         @include reset-button-style();
         @include focusable();
 

diff --git a/src/components/Link/Link.scss b/src/components/Link/Link.scss
@@ -9,7 +9,6 @@ $block: '.#{$ns}link-block';
     display: inline-flex;
 
     &__link {
-        --g-color-line-focus: currentColor;
         @include link();
 
         display: flex;

diff --git a/src/components/Title/TitleItem.scss b/src/components/Title/TitleItem.scss
@@ -39,7 +39,6 @@ $block: '.#{$ns}title-item';
     }
 
     &__link {
-        --g-color-line-focus: var(--g-color-text-link);
         @include reset-link-style();
         @include reset-link-hover();
         @include focusable();

diff --git a/src/sub-blocks/BannerCard/BannerCard.scss b/src/sub-blocks/BannerCard/BannerCard.scss
@@ -22,13 +22,6 @@ $block: '.#{$ns}banner-card';
                     color: var(--g-color-text-light-primary);
                 }
             }
-
-            #{$class}__button {
-                --g-color-line-focus: var(--g-color-text-light-primary);
-                &:focus::before {
-                    outline-offset: 1px;
-                }
-            }
         }
     }
 

diff --git a/src/sub-blocks/BasicCard/BasicCard.scss b/src/sub-blocks/BasicCard/BasicCard.scss
@@ -6,7 +6,6 @@ $block: '.#{$ns}basic-card';
 #{$block} {
     $iconSizePositionTop: 32px;
     $iconSizePositionLeft: 22px;
-    --g-color-line-focus: var(--g-color-text-brand);
 
     @include add-specificity(&) {
         min-height: auto;

diff --git a/src/sub-blocks/HubspotForm/HubspotForm.scss b/src/sub-blocks/HubspotForm/HubspotForm.scss
@@ -303,9 +303,8 @@ $block: '.#{$ns}hubspot-form';
     }
 
     .hs-button.primary {
-        --g-color-line-focus: var(--g-color-base-brand);
         @include button-reset();
-        @include focusable(1px);
+        @include focusable();
         display: inline-block;
         position: relative;
         overflow: visible;

diff --git a/src/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.scss b/src/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.scss
@@ -35,7 +35,6 @@ $settingsIndentBetweenTitleAndDescriptionHeight: 2px;
     }
 
     &__foldable_title {
-        --g-color-line-focus: currentColor;
         @include text-size(body-2);
         @include reset-button-style();
         @include focusable();

diff --git a/styles/mixins.scss b/styles/mixins.scss
@@ -8,10 +8,9 @@
     line-height: var(--g-text-#{$name}-line-height);
 }
 
-@mixin focusable($offset: 0) {
+@mixin focusable() {
     &:focus {
         outline: 2px solid var(--g-color-line-focus);
-        outline-offset: $offset;
     }
     &:focus:not(:focus-visible) {
         outline: 0;

diff --git a/styles/root.scss b/styles/root.scss
@@ -10,6 +10,7 @@
     @include pc-colors-social;
 
     --g-text-accent-font-weight: 500;
+    --g-color-line-focus: #3277ff;
 
     // cross-browser transparent color
     --pc-transparent: rgba(255, 255, 255, 0);

diff --git a/styles/yfm.scss b/styles/yfm.scss
@@ -84,7 +84,6 @@
     }
 
     a {
-        --g-color-line-focus: currentColor;
         @include link();
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -84,7 +84,6 @@ @@
         }
         a {
-            --g-color-line-focus: currentColor;
             @include link();
         }
@@ Expand Down @@