From d08274dcb8e863801ec002019dd896ae7fd34e94 Mon Sep 17 00:00:00 2001 From: Nikita Gorin <36075690+NikitaCG@users.noreply.github.com> Date: Thu, 6 Aug 2026 14:30:21 +0300 Subject: [PATCH] feat!: delete heading* mixins, use gravity mixins instead (#1476) * feat: delete heading* mixins, use gravity mixins instead * feat: upd mixin for title size xs * feat: fix content layout files margins --- src/blocks/ContentLayout/ContentLayout.scss | 2 - .../ExtendedFeatures/ExtendedFeatures.scss | 8 +++- .../FoldableListBlockItem.scss | 4 +- src/blocks/Header/Header.scss | 12 ++++- .../PromoFeaturesBlock.scss | 5 +- .../QuestionBlockItem/QuestionBlockItem.scss | 4 +- src/blocks/Share/Share.scss | 5 +- src/blocks/Table/Table.scss | 8 +++- src/components/Title/TitleItem.scss | 34 +++++++++---- .../CustomDecorator/CustomDecorator.scss | 8 +++- src/navigation/components/Logo/Logo.scss | 3 +- src/sub-blocks/BannerCard/BannerCard.scss | 19 ++++---- src/sub-blocks/Content/Content.scss | 12 ++--- styles/mixins.scss | 48 ------------------- 14 files changed, 89 insertions(+), 83 deletions(-) diff --git a/src/blocks/ContentLayout/ContentLayout.scss b/src/blocks/ContentLayout/ContentLayout.scss index b318e61a54..6c42b48322 100644 --- a/src/blocks/ContentLayout/ContentLayout.scss +++ b/src/blocks/ContentLayout/ContentLayout.scss @@ -16,13 +16,11 @@ $block: '.#{$ns}content-layout-block'; margin-top: $indentSM; &_size_s { - @extend %heading-margin-reset; @include text-size(body-2); } &_size_l, &_size_xl { - @extend %heading-margin-reset; @include text-size(body-3); } diff --git a/src/blocks/ExtendedFeatures/ExtendedFeatures.scss b/src/blocks/ExtendedFeatures/ExtendedFeatures.scss index c95b8e679a..820a8d04ab 100644 --- a/src/blocks/ExtendedFeatures/ExtendedFeatures.scss +++ b/src/blocks/ExtendedFeatures/ExtendedFeatures.scss @@ -26,13 +26,17 @@ $block: '.#{$ns}ExtendedFeaturesBlock'; margin: inherit; display: block; margin-block: 0 $indentXXXS; - @include heading4(); + @include text-header-1(); + + color: var(--pc-text-header-color); } &-title { @include add-specificity(&) { - @include heading4(); + @include text-header-1(); + color: var(--pc-text-header-color); + margin: 0; position: relative; margin-bottom: $indentXXXS; diff --git a/src/blocks/FoldableList/FoldableListBlockItem/FoldableListBlockItem.scss b/src/blocks/FoldableList/FoldableListBlockItem/FoldableListBlockItem.scss index 1d71060248..d2f22e602b 100644 --- a/src/blocks/FoldableList/FoldableListBlockItem/FoldableListBlockItem.scss +++ b/src/blocks/FoldableList/FoldableListBlockItem/FoldableListBlockItem.scss @@ -13,9 +13,11 @@ $block: '.#{$ns}FoldableListBlockItem'; &__title { @include add-specificity(&) { - @include heading4(); + @include text-header-1(); @include focusable(); + color: var(--pc-text-header-color); + margin: 0; cursor: pointer; border-radius: var(--g-focus-border-radius); diff --git a/src/blocks/Header/Header.scss b/src/blocks/Header/Header.scss index b4e3a830e2..c46f1eca08 100644 --- a/src/blocks/Header/Header.scss +++ b/src/blocks/Header/Header.scss @@ -92,10 +92,20 @@ $backgroundWidth: 1440px; &__title { @include add-specificity(&) { - @include heading1(); + @include text-display-4(); + color: var(--pc-text-header-color); + margin: 0; position: relative; + @media (max-width: map-get($gridBreakpoints, 'md')) { + @include text-display-3(); + } + + @media (max-width: map-get($gridBreakpoints, 'sm')) { + @include text-display-2(); + } + a { @include link(); } diff --git a/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.scss b/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.scss index 0a68cfa749..dab373239a 100644 --- a/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.scss +++ b/src/blocks/PromoFeaturesBlock/PromoFeaturesBlock.scss @@ -7,7 +7,10 @@ $block: '.#{$ns}PromoFeaturesBlock'; $class: &; &__card-title { - @include heading4(); + @include text-header-1(); + + color: var(--pc-text-header-color); + margin: 0; } &__card-container { diff --git a/src/blocks/Questions/QuestionBlockItem/QuestionBlockItem.scss b/src/blocks/Questions/QuestionBlockItem/QuestionBlockItem.scss index ec2749a0bb..8e578c9bea 100644 --- a/src/blocks/Questions/QuestionBlockItem/QuestionBlockItem.scss +++ b/src/blocks/Questions/QuestionBlockItem/QuestionBlockItem.scss @@ -13,9 +13,11 @@ $block: '.#{$ns}QuestionsBlockItem'; &__title { @include add-specificity(&) { - @include heading4(); + @include text-header-1(); @include focusable(); + color: var(--pc-text-header-color); + margin: 0; cursor: pointer; border-radius: var(--g-focus-border-radius); diff --git a/src/blocks/Share/Share.scss b/src/blocks/Share/Share.scss index 5bba393454..5701385d00 100644 --- a/src/blocks/Share/Share.scss +++ b/src/blocks/Share/Share.scss @@ -6,10 +6,11 @@ $block: '.#{$ns}share-block'; #{$block} { &__title { @include add-specificity(&) { - @include heading5(); + @include text-body-3(); + color: var(--pc-text-header-color); + margin: 0; text-align: center; - font-weight: normal; } } diff --git a/src/blocks/Table/Table.scss b/src/blocks/Table/Table.scss index 5bc539bc06..f240f07777 100644 --- a/src/blocks/Table/Table.scss +++ b/src/blocks/Table/Table.scss @@ -8,11 +8,17 @@ $block: '.#{$ns}table-block'; &__title { @include add-specificity(&) { - @include heading2(); + @include text-display-2(); @include top-content-offset($offset: 0px); + color: var(--pc-text-header-color); + margin: 0; position: sticky; margin-right: $indentM; + + @media (max-width: map-get($gridBreakpoints, 'sm') - 1) { + @include text-display-1(); + } } } diff --git a/src/components/Title/TitleItem.scss b/src/components/Title/TitleItem.scss index 5096bd1f9a..99988e7766 100644 --- a/src/components/Title/TitleItem.scss +++ b/src/components/Title/TitleItem.scss @@ -7,31 +7,49 @@ $block: '.#{$ns}title-item'; @include justify(); $root: &; + color: var(--pc-text-header-color); + margin: 0; + &_size_xs { - @include heading5(); + @include text-subheader-3(); } &_size_s { - @include heading4(); + @include text-header-1(); margin-top: $indentM; } &_size_sm { - @include heading(display-1); + @include text-display-1(); margin-top: $indentL; } &_size_m { - @include heading2(); + @include text-display-2(); margin-top: $indentL; + + @media (max-width: map-get($gridBreakpoints, 'sm') - 1) { + @include text-display-1(); + } } &_size_l { - @include heading1(); + @include text-display-4(); margin-top: $indentXXL; + + @media (max-width: map-get($gridBreakpoints, 'md')) { + @include text-display-3(); + } + + @media (max-width: map-get($gridBreakpoints, 'sm')) { + @include text-display-2(); + } } &__arrow { + position: relative; + left: 0; + transition: left 0.3s $ease-out-cubic; margin-top: 9px; &_size_xs { @@ -56,14 +74,14 @@ $block: '.#{$ns}title-item'; cursor: pointer; #{$root}__arrow { - margin-left: 10px; + left: 10px; &_size_xs { - margin-left: 6px; + left: 6px; } &_size_s { - margin-left: 8px; + left: 8px; } } } diff --git a/src/containers/PageConstructor/__stories__/components/CustomDecorator/CustomDecorator.scss b/src/containers/PageConstructor/__stories__/components/CustomDecorator/CustomDecorator.scss index 6d17d9f554..33da2be49c 100644 --- a/src/containers/PageConstructor/__stories__/components/CustomDecorator/CustomDecorator.scss +++ b/src/containers/PageConstructor/__stories__/components/CustomDecorator/CustomDecorator.scss @@ -26,10 +26,16 @@ padding: 24px 48px; &-title { - @include heading2(); + @include text-display-2(); + color: var(--pc-text-header-color); + margin: 0; width: fit-content; margin-bottom: 24px; + + @media (max-width: map-get($gridBreakpoints, 'sm') - 1) { + @include text-display-1(); + } } &-content { diff --git a/src/navigation/components/Logo/Logo.scss b/src/navigation/components/Logo/Logo.scss index 0735204753..40c82f3c33 100644 --- a/src/navigation/components/Logo/Logo.scss +++ b/src/navigation/components/Logo/Logo.scss @@ -16,8 +16,9 @@ $block: '.#{$ns}logo'; } &__text { - @include heading4(); + @include text-header-1(); + color: var(--pc-text-header-color); white-space: nowrap; } } diff --git a/src/sub-blocks/BannerCard/BannerCard.scss b/src/sub-blocks/BannerCard/BannerCard.scss index af43247225..feb8d65761 100644 --- a/src/sub-blocks/BannerCard/BannerCard.scss +++ b/src/sub-blocks/BannerCard/BannerCard.scss @@ -3,11 +3,6 @@ $block: '.#{$ns}banner-card'; -@mixin subtitle { - @include heading5(); - font-weight: normal; -} - #{$block} { $class: &; $borderRadius: $borderRadius; @@ -33,7 +28,13 @@ $block: '.#{$ns}banner-card'; &__title { @include add-specificity(&) { - @include heading2(); + @include text-display-2(); + + margin: 0; + + @media (max-width: map-get($gridBreakpoints, 'sm') - 1) { + @include text-display-1(); + } a { @include link(); @@ -65,12 +66,14 @@ $block: '.#{$ns}banner-card'; &__subtitle { @include add-specificity(&) { + @include text-body-3(); + display: inline-block; margin-top: $indentXXXS; - @include subtitle(); & p { - @include subtitle(); + @include text-body-3(); + margin: 0; } } } diff --git a/src/sub-blocks/Content/Content.scss b/src/sub-blocks/Content/Content.scss index c85ef6e171..a53393bb1b 100644 --- a/src/sub-blocks/Content/Content.scss +++ b/src/sub-blocks/Content/Content.scss @@ -119,14 +119,14 @@ $darkSecondary: var(--g-color-text-dark-secondary); #{$block}__text .yfm, #{$block}__notice .yfm { - @extend %heading-margin-reset; + margin: 0; @include text-size(body-3); } #{$block}__text .yfm { @include text-size(body-3); } #{$block}__notice .yfm { - @extend %heading-margin-reset; + margin: 0; @include text-size(body-2); } @@ -154,7 +154,7 @@ $darkSecondary: var(--g-color-text-dark-secondary); #{$block}__text .yfm, #{$block}__notice .yfm { - @extend %heading-margin-reset; + margin: 0; @include text-size(body-3); } #{$block}__text .yfm { @@ -162,7 +162,7 @@ $darkSecondary: var(--g-color-text-dark-secondary); } #{$block}__notice .yfm { - @extend %heading-margin-reset; + margin: 0; @include text-size(body-2); } @@ -190,7 +190,7 @@ $darkSecondary: var(--g-color-text-dark-secondary); #{$block}__text .yfm, #{$block}__notice .yfm { - @extend %heading-margin-reset; + margin: 0; @include text-size(body-3); } #{$block}__text .yfm { @@ -198,7 +198,7 @@ $darkSecondary: var(--g-color-text-dark-secondary); } #{$block}__notice .yfm { - @extend %heading-margin-reset; + margin: 0; @include text-size(body-2); } diff --git a/styles/mixins.scss b/styles/mixins.scss index 6768b93cb4..474583a89e 100644 --- a/styles/mixins.scss +++ b/styles/mixins.scss @@ -414,54 +414,6 @@ } } -//typografy -%heading-margin-reset { - margin: 0; -} - -@mixin heading($name) { - @include text-size($name); - color: var(--pc-text-header-color); - @extend %heading-margin-reset; - @include text-accent(); -} - -@mixin heading1 { - @include heading(display-4); - - @media (max-width: map-get($gridBreakpoints, 'md')) { - @include text-size(display-3); - } - - @media (max-width: map-get($gridBreakpoints, 'sm')) { - @include text-size(display-2); - } -} - -@mixin heading2 { - @include heading(display-2); - - @media (max-width: map-get($gridBreakpoints, 'sm') - 1) { - @include text-size(display-1); - } -} - -@mixin heading3 { - @include heading(header-2); -} - -@mixin heading4 { - @include heading(header-1); -} - -@mixin heading5 { - @include heading(body-3); -} - -@mixin heading6 { - @include heading(body-3); -} - @mixin paragraph { margin: 0 0 20px;