From 02e7772dc6b1e32a6fbdf0167ace569534dda1aa Mon Sep 17 00:00:00 2001 From: Andrey Morozov Date: Tue, 27 Jun 2023 15:19:06 +0300 Subject: [PATCH] feat!: rename typography variables --- src/components/ControlLabel/ControlLabel.scss | 2 +- src/components/Hotkey/Hotkey.scss | 2 +- src/components/PromoSheet/PromoSheet.scss | 8 +- src/components/RadioButton/RadioButton.scss | 2 +- src/components/Sheet/Sheet.scss | 2 +- src/components/TextInput/TextInput.scss | 2 +- src/demo/Typography/Typography.scss | 2 +- src/demo/Typography/Typography.tsx | 2 +- src/demo/colors/ColorPanel.scss | 2 +- styles/mixins.scss | 142 +++++++++--------- styles/themes/common/typography.scss | 131 ++++++++-------- 11 files changed, 155 insertions(+), 142 deletions(-) diff --git a/src/components/ControlLabel/ControlLabel.scss b/src/components/ControlLabel/ControlLabel.scss index 114c5c7147..e5d61eec6c 100644 --- a/src/components/ControlLabel/ControlLabel.scss +++ b/src/components/ControlLabel/ControlLabel.scss @@ -4,7 +4,7 @@ $block: '.#{variables.$ns}control-label'; #{$block} { display: inline-flex; - font-family: var(--yc-text-body-font-family); + font-family: var(--g-font-family-sans); font-weight: normal; color: var(--yc-color-text-primary); user-select: none; diff --git a/src/components/Hotkey/Hotkey.scss b/src/components/Hotkey/Hotkey.scss index 826a2c6347..2887d3344e 100644 --- a/src/components/Hotkey/Hotkey.scss +++ b/src/components/Hotkey/Hotkey.scss @@ -10,7 +10,7 @@ $block: '.#{variables.$ns}hotkey'; &, kbd { @include mixins.text-body-1(); - font-family: var(--yc-text-body-font-family); + font-family: var(--g-font-family-sans); } &_view { diff --git a/src/components/PromoSheet/PromoSheet.scss b/src/components/PromoSheet/PromoSheet.scss index 537d8a88fc..2dab3d985b 100644 --- a/src/components/PromoSheet/PromoSheet.scss +++ b/src/components/PromoSheet/PromoSheet.scss @@ -23,8 +23,8 @@ $block: '.#{variables.$ns}promo-sheet'; &__title { margin: 0; - font-size: var(--yc-text-header-1-font-size); - line-height: var(--yc-text-header-1-line-height); + font-size: var(--g-text-header-1-font-size); + line-height: var(--g-text-header-1-line-height); } &__close-button { @@ -36,8 +36,8 @@ $block: '.#{variables.$ns}promo-sheet'; &__message { margin: 0 0 var(--yc-promo-sheet-message-margin); - font-size: var(--yc-text-body-3-font-size); - line-height: var(--yc-text-body-3-line-height); + font-size: var(--g-text-body-3-font-size); + line-height: var(--g-text-body-3-line-height); } &__image-container { diff --git a/src/components/RadioButton/RadioButton.scss b/src/components/RadioButton/RadioButton.scss index 6f23e20284..b4d6d3f0ed 100644 --- a/src/components/RadioButton/RadioButton.scss +++ b/src/components/RadioButton/RadioButton.scss @@ -6,7 +6,7 @@ $block: '.#{variables.$ns}radio-button'; box-sizing: border-box; display: inline-flex; flex-direction: row; - font-family: var(--yc-text-body-font-family); + font-family: var(--g-font-family-sans); font-weight: normal; border-radius: var(--yc-radio-button-border-radius); background-color: var(--yc-color-base-generic); diff --git a/src/components/Sheet/Sheet.scss b/src/components/Sheet/Sheet.scss index 6f1f7871dd..6440049246 100644 --- a/src/components/Sheet/Sheet.scss +++ b/src/components/Sheet/Sheet.scss @@ -87,7 +87,7 @@ $block: '.#{variables.$ns}sheet'; &__sheet-content-title { padding-bottom: 8px; - font-size: var(--yc-text-body-2-font-size); + font-size: var(--g-text-body-2-font-size); line-height: 28px; text-align: center; overflow: hidden; diff --git a/src/components/TextInput/TextInput.scss b/src/components/TextInput/TextInput.scss index 00b3927f89..b238ce445b 100644 --- a/src/components/TextInput/TextInput.scss +++ b/src/components/TextInput/TextInput.scss @@ -60,7 +60,7 @@ $block: '.#{variables.$ns}text-input'; padding: 0; width: 100%; font-weight: normal; - font-family: var(--yc-text-body-font-family); + font-family: var(--g-font-family-sans); color: var(--yc-color-text-primary); background-color: transparent; border: none; diff --git a/src/demo/Typography/Typography.scss b/src/demo/Typography/Typography.scss index 04a11c20a1..aa6fe63b4a 100644 --- a/src/demo/Typography/Typography.scss +++ b/src/demo/Typography/Typography.scss @@ -58,7 +58,7 @@ &__item_name { // font-families &_monospace #{$block}__value { - font-family: var(--yc-font-family-monospace); + font-family: var(--g-font-family-monospace); } } diff --git a/src/demo/Typography/Typography.tsx b/src/demo/Typography/Typography.tsx index 48bc1da037..99ebbcfa24 100644 --- a/src/demo/Typography/Typography.tsx +++ b/src/demo/Typography/Typography.tsx @@ -51,7 +51,7 @@ export const Typography = () => ( return (
{name}
diff --git a/src/demo/colors/ColorPanel.scss b/src/demo/colors/ColorPanel.scss index 0ef98f831d..35129aab6e 100644 --- a/src/demo/colors/ColorPanel.scss +++ b/src/demo/colors/ColorPanel.scss @@ -30,7 +30,7 @@ &__bg-switcher { letter-spacing: 1px; - font-family: var(--yc-font-family-monospace); + font-family: var(--g-font-family-monospace); color: var(--yc-color-text-hint); position: absolute; top: 15px; diff --git a/styles/mixins.scss b/styles/mixins.scss index 9cf2c185b9..d3d85ac0f1 100644 --- a/styles/mixins.scss +++ b/styles/mixins.scss @@ -8,7 +8,7 @@ margin: 0; padding: 0; - font-family: var(--yc-text-body-font-family); + font-family: var(--g-font-family-sans); font-size: inherit; font-weight: 400; @@ -141,139 +141,139 @@ // Typography @mixin text-body-1() { - font-size: var(--yc-text-body-1-font-size); - line-height: var(--yc-text-body-1-line-height); - font-weight: var(--yc-text-body-font-weight); + font-size: var(--g-text-body-1-font-size); + line-height: var(--g-text-body-1-line-height); + font-weight: var(--g-text-body-font-weight); } @mixin text-body-2() { - font-size: var(--yc-text-body-2-font-size); - line-height: var(--yc-text-body-2-line-height); - font-weight: var(--yc-text-body-font-weight); + font-size: var(--g-text-body-2-font-size); + line-height: var(--g-text-body-2-line-height); + font-weight: var(--g-text-body-font-weight); } @mixin text-body-3() { - font-size: var(--yc-text-body-3-font-size); - line-height: var(--yc-text-body-3-line-height); - font-weight: var(--yc-text-body-font-weight); + font-size: var(--g-text-body-3-font-size); + line-height: var(--g-text-body-3-line-height); + font-weight: var(--g-text-body-font-weight); } @mixin text-body-short() { - font-size: var(--yc-text-body-short-font-size); - line-height: var(--yc-text-body-short-line-height); - font-weight: var(--yc-text-body-font-weight); + font-size: var(--g-text-body-short-font-size); + line-height: var(--g-text-body-short-line-height); + font-weight: var(--g-text-body-font-weight); } @mixin text-caption-1() { - font-size: var(--yc-text-caption-1-font-size); - line-height: var(--yc-text-caption-1-line-height); - font-weight: var(--yc-text-caption-font-weight); + font-size: var(--g-text-caption-1-font-size); + line-height: var(--g-text-caption-1-line-height); + font-weight: var(--g-text-caption-font-weight); } @mixin text-caption-2() { - font-size: var(--yc-text-caption-2-font-size); - line-height: var(--yc-text-caption-2-line-height); - font-weight: var(--yc-text-caption-font-weight); + font-size: var(--g-text-caption-2-font-size); + line-height: var(--g-text-caption-2-line-height); + font-weight: var(--g-text-caption-font-weight); } @mixin text-header-1() { - font-size: var(--yc-text-header-1-font-size); - line-height: var(--yc-text-header-1-line-height); - font-weight: var(--yc-text-header-font-weight); + font-size: var(--g-text-header-1-font-size); + line-height: var(--g-text-header-1-line-height); + font-weight: var(--g-text-header-font-weight); } @mixin text-header-2() { - font-size: var(--yc-text-header-2-font-size); - line-height: var(--yc-text-header-2-line-height); - font-weight: var(--yc-text-header-font-weight); + font-size: var(--g-text-header-2-font-size); + line-height: var(--g-text-header-2-line-height); + font-weight: var(--g-text-header-font-weight); } @mixin text-subheader-1() { - font-size: var(--yc-text-subheader-1-font-size); - line-height: var(--yc-text-subheader-1-line-height); - font-weight: var(--yc-text-subheader-font-weight); + font-size: var(--g-text-subheader-1-font-size); + line-height: var(--g-text-subheader-1-line-height); + font-weight: var(--g-text-subheader-font-weight); } @mixin text-subheader-2() { - font-size: var(--yc-text-subheader-2-font-size); - line-height: var(--yc-text-subheader-2-line-height); - font-weight: var(--yc-text-subheader-font-weight); + font-size: var(--g-text-subheader-2-font-size); + line-height: var(--g-text-subheader-2-line-height); + font-weight: var(--g-text-subheader-font-weight); } @mixin text-subheader-3() { - font-size: var(--yc-text-subheader-3-font-size); - line-height: var(--yc-text-subheader-3-line-height); - font-weight: var(--yc-text-subheader-font-weight); + font-size: var(--g-text-subheader-3-font-size); + line-height: var(--g-text-subheader-3-line-height); + font-weight: var(--g-text-subheader-font-weight); } @mixin text-display-1() { - font-size: var(--yc-text-display-1-font-size); - line-height: var(--yc-text-display-1-line-height); - font-weight: var(--yc-text-display-font-weight); + font-size: var(--g-text-display-1-font-size); + line-height: var(--g-text-display-1-line-height); + font-weight: var(--g-text-display-font-weight); } @mixin text-display-2() { - font-size: var(--yc-text-display-2-font-size); - line-height: var(--yc-text-display-2-line-height); - font-weight: var(--yc-text-display-font-weight); + font-size: var(--g-text-display-2-font-size); + line-height: var(--g-text-display-2-line-height); + font-weight: var(--g-text-display-font-weight); } @mixin text-display-3() { - font-size: var(--yc-text-display-3-font-size); - line-height: var(--yc-text-display-3-line-height); - font-weight: var(--yc-text-display-font-weight); + font-size: var(--g-text-display-3-font-size); + line-height: var(--g-text-display-3-line-height); + font-weight: var(--g-text-display-font-weight); } @mixin text-display-4() { - font-size: var(--yc-text-display-4-font-size); - line-height: var(--yc-text-display-4-line-height); - font-weight: var(--yc-text-display-font-weight); + font-size: var(--g-text-display-4-font-size); + line-height: var(--g-text-display-4-line-height); + font-weight: var(--g-text-display-font-weight); } @mixin text-code-1() { - font-family: var(--yc-text-code-font-family); - font-size: var(--yc-text-code-1-font-size); - line-height: var(--yc-text-code-1-line-height); - font-weight: var(--yc-text-code-font-weight); + font-family: var(--g-font-family-monospace); + font-size: var(--g-text-code-1-font-size); + line-height: var(--g-text-code-1-line-height); + font-weight: var(--g-text-code-font-weight); } @mixin text-code-2() { - font-family: var(--yc-text-code-font-family); - font-size: var(--yc-text-code-2-font-size); - line-height: var(--yc-text-code-2-line-height); - font-weight: var(--yc-text-code-font-weight); + font-family: var(--g-font-family-monospace); + font-size: var(--g-text-code-2-font-size); + line-height: var(--g-text-code-2-line-height); + font-weight: var(--g-text-code-font-weight); } @mixin text-code-3() { - font-family: var(--yc-text-code-font-family); - font-size: var(--yc-text-code-3-font-size); - line-height: var(--yc-text-code-3-line-height); - font-weight: var(--yc-text-code-font-weight); + font-family: var(--g-font-family-monospace); + font-size: var(--g-text-code-3-font-size); + line-height: var(--g-text-code-3-line-height); + font-weight: var(--g-text-code-font-weight); } @mixin text-code-inline-1() { - font-family: var(--yc-text-code-font-family); - font-size: var(--yc-text-code-inline-1-font-size); - line-height: var(--yc-text-code-inline-1-line-height); - font-weight: var(--yc-text-code-font-weight); + font-family: var(--g-font-family-monospace); + font-size: var(--g-text-code-inline-1-font-size); + line-height: var(--g-text-code-inline-1-line-height); + font-weight: var(--g-text-code-font-weight); } @mixin text-code-inline-2() { - font-family: var(--yc-text-code-font-family); - font-size: var(--yc-text-code-inline-2-font-size); - line-height: var(--yc-text-code-inline-2-line-height); - font-weight: var(--yc-text-code-inline-font-weight); + font-family: var(--g-font-family-monospace); + font-size: var(--g-text-code-inline-2-font-size); + line-height: var(--g-text-code-inline-2-line-height); + font-weight: var(--g-text-code-font-weight); } @mixin text-code-inline-3() { - font-family: var(--yc-text-code-font-family); - font-size: var(--yc-text-code-inline-3-font-size); - line-height: var(--yc-text-code-inline-3-line-height); - font-weight: var(--yc-text-code-font-weight); + font-family: var(--g-font-family-monospace); + font-size: var(--g-text-code-inline-3-font-size); + line-height: var(--g-text-code-inline-3-line-height); + font-weight: var(--g-text-code-font-weight); } @mixin text-accent() { - font-weight: var(--yc-text-accent-font-weight); + font-weight: var(--g-text-accent-font-weight); } @mixin loading($loading-color-1: rgba(255, 255, 255, 0.3), $loading-color-2: transparent) { diff --git a/styles/themes/common/typography.scss b/styles/themes/common/typography.scss index 6b1f7a65f4..ea49d3dbd2 100644 --- a/styles/themes/common/typography.scss +++ b/styles/themes/common/typography.scss @@ -1,84 +1,97 @@ @mixin yc-typography { - --yc-font-family-sans: 'Helvetica Neue', 'Arial', 'Helvetica', sans-serif; - --yc-font-family-monospace: 'Menlo', 'Monaco', 'Consolas', 'Ubuntu Mono', 'Liberation Mono', - 'DejaVu Sans Mono', 'Courier New', 'Courier', monospace; + --g-font-family-sans: var( + --yc-font-family-sans, + 'Helvetica Neue', + 'Arial', + 'Helvetica', + sans-serif + ); + --g-font-family-monospace: var( + --yc-font-family-monospace, + 'Menlo', + 'Monaco', + 'Consolas', + 'Ubuntu Mono', + 'Liberation Mono', + 'DejaVu Sans Mono', + 'Courier New', + 'Courier', + monospace + ); - --yc-text-body-font-family: var(--yc-font-family-sans); - --yc-text-code-font-family: var(--yc-font-family-monospace); + --g-text-header-font-weight: var(--yc-text-header-font-weight, 900); + --g-text-subheader-font-weight: var(--yc-text-subheader-font-weight, 900); + --g-text-display-font-weight: var(--yc-text-display-font-weight, 900); + --g-text-code-font-weight: var(--yc-text-code-font-weight, 400); + --g-text-body-font-weight: var(--yc-text-body-font-weight, 400); + --g-text-caption-font-weight: var(--yc-text-caption-font-weight, 400); + --g-text-accent-font-weight: var(--yc-text-accent-font-weight, 900); - --yc-text-header-font-weight: 900; - --yc-text-subheader-font-weight: 900; - --yc-text-display-font-weight: 900; - --yc-text-code-font-weight: 400; - --yc-text-body-font-weight: 400; - --yc-text-caption-font-weight: 400; - --yc-text-accent-font-weight: 900; + --g-text-body-1-font-size: var(--yc-text-body-1-font-size, 13px); + --g-text-body-1-line-height: var(--yc-text-body-1-line-height, 18px); - --yc-text-body-1-font-size: 13px; - --yc-text-body-1-line-height: 18px; + --g-text-body-2-font-size: var(--yc-text-body-2-font-size, 15px); + --g-text-body-2-line-height: var(--yc-text-body-2-line-height, 20px); - --yc-text-body-2-font-size: 15px; - --yc-text-body-2-line-height: 20px; + --g-text-body-3-font-size: var(--yc-text-body-3-font-size, 17px); + --g-text-body-3-line-height: var(--yc-text-body-3-line-height, 24px); - --yc-text-body-3-font-size: 17px; - --yc-text-body-3-line-height: 24px; + --g-text-body-short-font-size: var(--yc-text-body-short-font-size, 13px); + --g-text-body-short-line-height: var(--yc-text-body-short-line-height, 16px); - --yc-text-body-short-font-size: 13px; - --yc-text-body-short-line-height: 16px; + --g-text-caption-1-font-size: var(--yc-text-caption-1-font-size, 9px); + --g-text-caption-1-line-height: var(--yc-text-caption-1-line-height, 12px); - --yc-text-caption-1-font-size: 9px; - --yc-text-caption-1-line-height: 12px; + --g-text-caption-2-font-size: var(--yc-text-caption-2-font-size, 11px); + --g-text-caption-2-line-height: var(--yc-text-caption-2-line-height, 16px); - --yc-text-caption-2-font-size: 11px; - --yc-text-caption-2-line-height: 16px; + --g-text-header-1-font-size: var(--yc-text-header-1-font-size, 20px); + --g-text-header-1-line-height: var(--yc-text-header-1-line-height, 24px); - --yc-text-header-1-font-size: 20px; - --yc-text-header-1-line-height: 24px; + --g-text-header-2-font-size: var(--yc-text-header-2-font-size, 24px); + --g-text-header-2-line-height: var(--yc-text-header-2-line-height, 28px); - --yc-text-header-2-font-size: 24px; - --yc-text-header-2-line-height: 28px; + --g-text-subheader-1-font-size: var(--yc-text-subheader-1-font-size, 13px); + --g-text-subheader-1-line-height: var(--yc-text-subheader-1-line-height, 18px); - --yc-text-subheader-1-font-size: 13px; - --yc-text-subheader-1-line-height: 18px; + --g-text-subheader-2-font-size: var(--yc-text-subheader-2-font-size, 15px); + --g-text-subheader-2-line-height: var(--yc-text-subheader-2-line-height, 20px); - --yc-text-subheader-2-font-size: 15px; - --yc-text-subheader-2-line-height: 20px; + --g-text-subheader-3-font-size: var(--yc-text-subheader-3-font-size, 17px); + --g-text-subheader-3-line-height: var(--yc-text-subheader-3-line-height, 24px); - --yc-text-subheader-3-font-size: 17px; - --yc-text-subheader-3-line-height: 24px; + --g-text-display-1-font-size: var(--yc-text-display-1-font-size, 28px); + --g-text-display-1-line-height: var(--yc-text-display-1-line-height, 36px); - --yc-text-display-1-font-size: 28px; - --yc-text-display-1-line-height: 36px; + --g-text-display-2-font-size: var(--yc-text-display-2-font-size, 32px); + --g-text-display-2-line-height: var(--yc-text-display-2-line-height, 40px); - --yc-text-display-2-font-size: 32px; - --yc-text-display-2-line-height: 40px; + --g-text-display-3-font-size: var(--yc-text-display-3-font-size, 40px); + --g-text-display-3-line-height: var(--yc-text-display-3-line-height, 48px); - --yc-text-display-3-font-size: 40px; - --yc-text-display-3-line-height: 48px; + --g-text-display-4-font-size: var(--yc-text-display-4-font-size, 48px); + --g-text-display-4-line-height: var(--yc-text-display-4-line-height, 52px); - --yc-text-display-4-font-size: 48px; - --yc-text-display-4-line-height: 52px; + --g-text-code-1-font-size: var(--yc-text-code-1-font-size, 12px); + --g-text-code-1-line-height: var(--yc-text-code-1-line-height, 18px); - --yc-text-code-1-font-size: 12px; - --yc-text-code-1-line-height: 18px; + --g-text-code-2-font-size: var(--yc-text-code-2-font-size, 14px); + --g-text-code-2-line-height: var(--yc-text-code-2-line-height, 20px); - --yc-text-code-2-font-size: 14px; - --yc-text-code-2-line-height: 20px; + --g-text-code-3-font-size: var(--yc-text-code-3-font-size, 16px); + --g-text-code-3-line-height: var(--yc-text-code-3-line-height, 24px); - --yc-text-code-3-font-size: 16px; - --yc-text-code-3-line-height: 24px; + --g-text-code-inline-1-font-size: var(--yc-text-code-inline-1-font-size, 12px); + --g-text-code-inline-1-line-height: var(--yc-text-code-inline-1-line-height, 14px); - --yc-text-code-inline-1-font-size: 12px; - --yc-text-code-inline-1-line-height: 14px; + --g-text-code-inline-2-font-size: var(--yc-text-code-inline-2-font-size, 14px); + --g-text-code-inline-2-line-height: var(--yc-text-code-inline-2-line-height, 16px); - --yc-text-code-inline-2-font-size: 14px; - --yc-text-code-inline-2-line-height: 16px; + --g-text-code-inline-3-font-size: var(--yc-text-code-inline-3-font-size, 16px); + --g-text-code-inline-3-line-height: var(--yc-text-code-inline-3-line-height, 20px); - --yc-text-code-inline-3-font-size: 16px; - --yc-text-code-inline-3-line-height: 20px; - - font-family: var(--yc-text-body-font-family); - font-size: var(--yc-text-body-1-font-size); - line-height: var(--yc-text-body-1-line-height); - font-weight: var(--yc-text-body-font-weight); + font-family: var(--g-font-family-sans); + font-size: var(--g-text-body-1-font-size); + line-height: var(--g-text-body-1-line-height); + font-weight: var(--g-text-body-font-weight); }