From 262fc72f81d77c4900986649ef6441830b469bdc Mon Sep 17 00:00:00 2001
From: kkmch <kkmch@yandex-team.ru>
Date: Mon, 16 Oct 2023 14:41:47 +0200
Subject: [PATCH] feat: introduce focus variables

---
 src/blocks/ContentLayout/ContentLayout.scss | 6 ++++++
 src/sub-blocks/BannerCard/BannerCard.scss   | 2 ++
 src/sub-blocks/Content/Content.scss         | 2 ++
 src/sub-blocks/HubspotForm/HubspotForm.scss | 4 ++++
 styles/root.scss                            | 6 ++++++
 5 files changed, 20 insertions(+)

diff --git a/src/blocks/ContentLayout/ContentLayout.scss b/src/blocks/ContentLayout/ContentLayout.scss
index bb142f10d..628e05133 100644
--- a/src/blocks/ContentLayout/ContentLayout.scss
+++ b/src/blocks/ContentLayout/ContentLayout.scss
@@ -60,6 +60,12 @@ $block: '.#{$ns}content-layout-block';
         padding: $indentXL;
     }
 
+    &_theme {
+        &_dark {
+            --g-color-line-focus: var(--pc-color-line-focus-dark);
+        }
+    }
+
     @media (max-width: map-get($gridBreakpoints, 'sm')) {
         &_background {
             padding: $indentM;
diff --git a/src/sub-blocks/BannerCard/BannerCard.scss b/src/sub-blocks/BannerCard/BannerCard.scss
index 10d2a4c0b..eba48c72c 100644
--- a/src/sub-blocks/BannerCard/BannerCard.scss
+++ b/src/sub-blocks/BannerCard/BannerCard.scss
@@ -13,6 +13,8 @@ $block: '.#{$ns}banner-card';
     $borderRadius: $borderRadius;
 
     &_theme_dark {
+        --g-color-line-focus: var(--pc-color-line-focus-dark);
+
         @include add-specificity(&) {
             #{$class}__title,
             #{$class}__subtitle {
diff --git a/src/sub-blocks/Content/Content.scss b/src/sub-blocks/Content/Content.scss
index a62627c6c..b54db71eb 100644
--- a/src/sub-blocks/Content/Content.scss
+++ b/src/sub-blocks/Content/Content.scss
@@ -139,6 +139,8 @@ $darkSecondary: var(--g-color-text-dark-secondary);
 
     &_theme {
         &_dark {
+            --g-color-line-focus: var(--pc-color-line-focus-dark);
+
             #{$block}__title *,
             #{$block}__text .yfm,
             #{$block}__text .yfm *,
diff --git a/src/sub-blocks/HubspotForm/HubspotForm.scss b/src/sub-blocks/HubspotForm/HubspotForm.scss
index 3d433267b..bb360a2d8 100644
--- a/src/sub-blocks/HubspotForm/HubspotForm.scss
+++ b/src/sub-blocks/HubspotForm/HubspotForm.scss
@@ -4,6 +4,8 @@
 $block: '.#{$ns}hubspot-form';
 
 #{$block} {
+    --g-color-line-focus: var(--pc-color-line-focus-light);
+
     $requiredWidth: 10px;
     $checkbox: 17px;
     $checkboxIcon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICAgIDxwYXRoIGQ9Ik0xNS42MjMgMWwtOS4xNSAxMy4xNzQtNC4yODctNC42TDEgMTEuMDMgNi42MiAxNyAxNyAyLjI3IDE1LjYyMyAxeiIgZmlsbD0iIzAwMDAwMCIvPgo8L3N2Zz4K');
@@ -423,6 +425,8 @@ $block: '.#{$ns}hubspot-form';
 
     &_theme {
         &_dark {
+            --g-color-line-focus: var(--pc-color-line-focus-dark);
+
             .hs-form-field .input select {
                 background-image: $selectChevronDark;
             }
diff --git a/styles/root.scss b/styles/root.scss
index 01847add4..b39b2ea7e 100644
--- a/styles/root.scss
+++ b/styles/root.scss
@@ -35,12 +35,18 @@
         --pc-monochrome-button-background-color-hover
     );
 
+    // focus color
+    --pc-color-line-focus-light: var(--g-color-text-brand);
+    --pc-color-line-focus-dark: var(--g-color-text-light-primary);
+
     &_theme_light {
         @include pc-colors-light;
+        --g-color-line-focus: var(--pc-color-line-focus-light);
     }
 
     &_theme_dark {
         @include pc-colors-dark;
+        --g-color-line-focus: var(--pc-color-line-focus-dark);
     }
 
     &.g-root_theme_dark {