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 {