fix(tokens)!: rename --font-family-body to font-family-base

haiilo · Oct 27, 2023 · c6804d9 · c6804d9
1 parent bc8d8d8
commit c6804d9
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 25 deletions.
diff --git a/core/src/styles/core/_base.scss b/core/src/styles/core/_base.scss
@@ -8,6 +8,6 @@ body {
 
 body {
   @include cat-body('m');
-  font-family: cat-token('font.family.body'), $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji;
+  font-family: cat-token('font.family.base'), $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji;
   color: cat-token('color.ui.font.base');
 }
diff --git a/core/src/styles/core/_typography.scss b/core/src/styles/core/_typography.scss
@@ -217,6 +217,7 @@ code {
   :where(h1, h2, h3),
   :is(.cat-h1, .cat-h2, .cat-h3) {
     color: $cat-font-color-head;
+    font-family: $cat-font-family-head, $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji;
     margin-bottom: calc($cat-head-margin-bottom * var(--cat-article-spacer, 1));
 
     &:has(+ h1, + h2, + h3, + h4, + h5, + h6, + .cat-h1, + .cat-h2, + .cat-h3, + .cat-h4, + .cat-h5, + .cat-h6) {
@@ -227,6 +228,7 @@ code {
   :where(h4, h5, h6),
   :is(.cat-h4, .cat-h5, .cat-h6) {
     color: $cat-font-color-head;
+    font-family: $cat-font-family-head, $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji;
     margin-bottom: calc($cat-head-margin-bottom * 0.5 * var(--cat-article-spacer, 1));
   }
 

diff --git a/core/src/styles/utils/_typography.mixins.scss b/core/src/styles/utils/_typography.mixins.scss
@@ -11,8 +11,7 @@
 }
 
 @mixin cat-head($size, $weight: cat-token('font.weight.head')) {
-  // skip color, as it is only set for editorial styles
-  font-family: $cat-font-family-head, $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji;
+  // skip color and family, as it is only set for editorial styles
   font-size: cat-head-font-size($size);
   line-height: cat-head-line-height($size);
   font-weight: $weight;

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tokens/dist/export/figma.json b/tokens/dist/export/figma.json
@@ -607,11 +607,7 @@
   },
   "font": {
     "family": {
-      "head": {
-        "$type": "fontFamily",
-        "$value": "Lato"
-      },
-      "body": {
+      "base": {
         "$type": "fontFamily",
         "$value": "Lato"
       },

diff --git a/tokens/dist/export/theme.json b/tokens/dist/export/theme.json
@@ -223,11 +223,7 @@
     "$type": "color",
     "$value": "#ffffff"
   },
-  "font-family-head": {
-    "$type": "fontFamily",
-    "$value": "Lato"
-  },
-  "font-family-body": {
+  "font-family-base": {
     "$type": "fontFamily",
     "$value": "Lato"
   },

diff --git a/tokens/dist/export/zeroheight.json b/tokens/dist/export/zeroheight.json
@@ -785,11 +785,7 @@
   },
   "font": {
     "family": {
-      "head": {
-        "$type": "fontFamily",
-        "$value": "Lato"
-      },
-      "body": {
+      "base": {
         "$type": "fontFamily",
         "$value": "Lato"
       },

diff --git a/tokens/src/font.json b/tokens/src/font.json
@@ -1,15 +1,10 @@
 {
   "font": {
     "family": {
-      "head": {
-        "$type": "fontFamily",
-        "$value": "{asset.font.lato.name.value}",
-        "cssProp": "font-family-head"
-      },
-      "body": {
+      "base": {
         "$type": "fontFamily",
         "$value": "{asset.font.lato.name.value}",
-        "cssProp": "font-family-body"
+        "cssProp": "font-family-base"
       },
       "mono": {
         "$type": "fontFamily",