feat: introduce focus variables

gravity-ui · Oct 16, 2023 · 262fc72 · 262fc72
1 parent 9baddfe
commit 262fc72
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 {