Revert "fix: use blue focus color everywhere"

This reverts commit 15c538c.
gravity-ui · Oct 3, 2023 · 28ebc66 · 28ebc66
1 parent 6c6e935
commit 28ebc66
Show file tree

Hide file tree

Showing 13 changed files with 33 additions and 3 deletions.
diff --git a/src/blocks/Slider/Arrow/Arrow.scss b/src/blocks/Slider/Arrow/Arrow.scss
@@ -27,6 +27,7 @@ $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,6 +34,15 @@ $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,6 +5,8 @@ $block: '.#{$ns}button-tabs';
 
 #{$block} {
     &__item {
+        --g-color-line-focus: var(--g-color-text-brand);
+
         @include add-specificity(&) {
             margin-right: $indentXXXS;
             margin-bottom: $indentXXS;
@@ -16,13 +18,17 @@ $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,6 +31,7 @@ $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,6 +9,7 @@ $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,6 +39,7 @@ $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,6 +22,13 @@ $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,6 +6,7 @@ $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,8 +303,9 @@ $block: '.#{$ns}hubspot-form';
     }
 
     .hs-button.primary {
+        --g-color-line-focus: var(--g-color-base-brand);
         @include button-reset();
-        @include focusable();
+        @include focusable(1px);
         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,6 +35,7 @@ $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,9 +8,10 @@
     line-height: var(--g-text-#{$name}-line-height);
 }
 
-@mixin focusable() {
+@mixin focusable($offset: 0) {
     &: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,7 +10,6 @@
     @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,6 +84,7 @@
     }
 
     a {
+        --g-color-line-focus: currentColor;
         @include link();
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -84,6 +84,7 @@ @@
         }
         a {
+            --g-color-line-focus: currentColor;
             @include link();
         }
@@ Expand Down @@