From b00e5db943893d6c610b74419f1d90e1cb6e9f3b Mon Sep 17 00:00:00 2001 From: Andrey Morozov Date: Wed, 17 Jul 2024 14:28:11 +0300 Subject: [PATCH] fix(typography): use correct variables across the project --- src/components/Hotkey/Hotkey.scss | 1 - src/components/Text/text/text.ts | 42 ++++++++--------- styles/mixins.scss | 69 +++++++++++++++++----------- styles/themes/common/typography.scss | 4 +- 4 files changed, 65 insertions(+), 51 deletions(-) diff --git a/src/components/Hotkey/Hotkey.scss b/src/components/Hotkey/Hotkey.scss index b8ef27401d..8a44c767a3 100644 --- a/src/components/Hotkey/Hotkey.scss +++ b/src/components/Hotkey/Hotkey.scss @@ -10,7 +10,6 @@ $block: '.#{variables.$ns}hotkey'; &, kbd { @include mixins.text-body-1(); - font-family: var(--g-font-family-sans); } &_view { diff --git a/src/components/Text/text/text.ts b/src/components/Text/text/text.ts index 337323f50c..ae2fcb560a 100644 --- a/src/components/Text/text/text.ts +++ b/src/components/Text/text/text.ts @@ -33,33 +33,33 @@ export interface TextBaseProps { * Storybook: https://preview.gravity-ui.com/uikit/?path=/story/typography--variants * **Note:**: below are the default variants that can be overridden in the project * - * - body: + * - body (font-family: var(--g-text-body-font-family); font-weight: 400): * - 1: font-size: 13px; line-height: 18px; (**Default variant**) * - 2: font-size: 15px; line-height: 20px; * - 3: font-size: 17px; line-height: 24px; * - short: font-size: 13px; line-height: 16px; - * - caption: + * - caption (font-family: var(--g-text-caption-font-family); font-weight: 400): * - 1: font-size: 9px; line-height: 12px; * - 2: font-size: 11px; line-height: 16px; - * - header: - * - 1: font-size: 20px; line-height: 24px; font-weight: 600; - * - 2: font-size: 24px; line-height: 28px; font-weight: 600; - * - subheader: - * - 1: font-size: 13px; line-height: 18px; font-weight: 600; - * - 2: font-size: 15px; line-height: 20px; font-weight: 600; - * - 2: font-size: 17px; line-height: 24px; font-weight: 600; - * - display: - * - 1: font-size: 28px; line-height: 36px; font-weight: 600; - * - 2: font-size: 32px; line-height: 40px; font-weight: 600; - * - 3: font-size: 40px; line-height: 48px; font-weight: 600; - * - 4: font-size: 48px; line-height: 52px; font-weight: 600; - * - code: - * - 1: font-size: 12px; line-height: 18px; font-weight: 400; font-family: var(--g-font-family-monospace); - * - 2: font-size: 14px; line-height: 20px; font-weight: 400; font-family: var(--g-font-family-monospace); - * - 3: font-size: 16px; line-height: 14px; font-weight: 400; font-family: var(--g-font-family-monospace); - * - inline=1: font-size: 12px; line-height: 14px; font-weight: 400; font-family: var(--g-font-family-monospace); - * - inline-2: font-size: 14px; line-height: 16px; font-weight: 400; font-family: var(--g-font-family-monospace); - * - inline-3: font-size: 16px; line-height: 20px; font-weight: 400; font-family: var(--g-font-family-monospace); + * - header (font-family: var(--g-text-header-font-family); font-weight: 600): + * - 1: font-size: 20px; line-height: 24px; + * - 2: font-size: 24px; line-height: 28px; + * - subheader (font-family: var(--g-text-subheader-font-family); font-weight: 600): + * - 1: font-size: 13px; line-height: 18px; + * - 2: font-size: 15px; line-height: 20px; + * - 2: font-size: 17px; line-height: 24px; + * - display (font-family: var(--g-text-display-font-family); font-weight: 600): + * - 1: font-size: 28px; line-height: 36px; + * - 2: font-size: 32px; line-height: 40px; + * - 3: font-size: 40px; line-height: 48px; + * - 4: font-size: 48px; line-height: 52px; + * - code (font-family: var(--g-text-code-font-family); font-weight: 400): + * - 1: font-size: 12px; line-height: 18px; + * - 2: font-size: 14px; line-height: 20px; + * - 3: font-size: 16px; line-height: 14px; + * - inline=1: font-size: 12px; line-height: 14px; + * - inline-2: font-size: 14px; line-height: 16px; + * - inline-3: font-size: 16px; line-height: 20px; */ variant?: (typeof TEXT_VARIANTS)[number] | 'inherit'; diff --git a/styles/mixins.scss b/styles/mixins.scss index aaa49761d1..5811f00cd0 100644 --- a/styles/mixins.scss +++ b/styles/mixins.scss @@ -157,135 +157,150 @@ // Typography @mixin text-body-1() { + font-family: var(--g-text-body-font-family); + font-weight: var(--g-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-family: var(--g-text-body-font-family); + font-weight: var(--g-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-family: var(--g-text-body-font-family); + font-weight: var(--g-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-family: var(--g-text-body-font-family); + font-weight: var(--g-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-family: var(--g-text-caption-font-family); + font-weight: var(--g-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-family: var(--g-text-caption-font-family); + font-weight: var(--g-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-family: var(--g-text-header-font-family); + font-weight: var(--g-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-family: var(--g-text-header-font-family); + font-weight: var(--g-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-family: var(--g-text-subheader-font-family); + font-weight: var(--g-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-family: var(--g-text-subheader-font-family); + font-weight: var(--g-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-family: var(--g-text-subheader-font-family); + font-weight: var(--g-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-family: var(--g-text-display-font-family); + font-weight: var(--g-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-family: var(--g-text-display-font-family); + font-weight: var(--g-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-family: var(--g-text-display-font-family); + font-weight: var(--g-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-family: var(--g-text-display-font-family); + font-weight: var(--g-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(--g-font-family-monospace); + font-family: var(--g-text-code-font-family); + font-weight: var(--g-text-code-font-weight); 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(--g-font-family-monospace); + font-family: var(--g-text-code-font-family); + font-weight: var(--g-text-code-font-weight); 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(--g-font-family-monospace); + font-family: var(--g-text-code-font-family); + font-weight: var(--g-text-code-font-weight); 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(--g-font-family-monospace); + font-family: var(--g-text-code-font-family); + font-weight: var(--g-text-code-font-weight); 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(--g-font-family-monospace); + font-family: var(--g-text-code-font-family); + font-weight: var(--g-text-code-font-weight); 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(--g-font-family-monospace); + font-family: var(--g-text-code-font-family); + font-weight: var(--g-text-code-font-weight); 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() { diff --git a/styles/themes/common/typography.scss b/styles/themes/common/typography.scss index 1f58ad09e2..de34b16b62 100644 --- a/styles/themes/common/typography.scss +++ b/styles/themes/common/typography.scss @@ -81,8 +81,8 @@ --g-text-code-inline-3-font-size: 16px; --g-text-code-inline-3-line-height: 20px; - font-family: var(--g-font-family-sans); + font-family: var(--g-text-body-font-family); + font-weight: var(--g-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); }