styles: Separate body and heading font tokens

IATI · May 14, 2024 · cb9144b · cb9144b
1 parent b8ab6fb
commit cb9144b
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
   ],
   "scripts": {
     "start": "storybook dev -p 6006",
-    "build": "sass --pkg-importer=node --no-source-map --style=expanded src/scss:dist/css ",
+    "build": "sass --pkg-importer=node --no-source-map --style=expanded src/scss:dist/css",
     "build:storybook": "storybook build",
     "lint": "npm run lint:eslint && npm run lint:prettier",
     "lint:eslint": "eslint",

diff --git a/src/scss/tokens/_font.scss b/src/scss/tokens/_font.scss
@@ -1,2 +1,3 @@
-$font-stack-sans: "Avenir", Helvetica, Arial, sans-serif;
+$font-stack-heading: "Avenir", Helvetica, Arial, sans-serif;
+$font-stack-body: "Avenir", Helvetica, Arial, sans-serif;
 $font-stack-monospace: monospace;
diff --git a/src/scss/typography/_body.scss b/src/scss/typography/_body.scss
@@ -3,7 +3,7 @@
 @use "../tokens/spacing" as *;
 
 html {
-  font-family: $font-stack-sans;
+  font-family: $font-stack-body;
   color: $color-grey-90;
 }
 

diff --git a/src/scss/typography/_headings.scss b/src/scss/typography/_headings.scss
@@ -1,9 +1,12 @@
+@use "../tokens/font" as *;
+
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
+  font-family: $font-stack-heading;
   margin: 0.5em 0;
   font-weight: bold;
 }