fix(typography): use correct variables across the project (#1712)

gravity-ui · Jul 30, 2024 · 4a9a6d1 · 4a9a6d1
1 parent b7eef14
commit 4a9a6d1
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 51 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,7 +10,6 @@ $block: '.#{variables.$ns}hotkey'; @@
         &,
         kbd {
             @include mixins.text-body-1();
-            font-family: var(--g-font-family-sans);
         }
         &_view {
@@ Expand Down @@