feat: update font family tokens (#28)

* feat: update font family tokens

* feat: ignore vscode

* wip

* fix: use css vars instead of stitches vars

* wip

* wip

.gitignore

@@ -72,4 +72,6 @@ packages/**/.next
 .ultra.cache.json
 
 .yalc
-yalc.lock
+yalc.lock
+
+.vscode/

build/build-typography-classes.js

@@ -6,62 +6,13 @@ const fs = require("fs");
 const path = require("path");
 const typographyTokens = require("@washingtonpost/typography-tokens/dist/tokens.json");
 const {
-  typeface: typefaceTokens,
-  families: typefaceFamilyTokens,
   "line-height": typefaceLineHeightTokens,
   size: typefaceSizeTokens,
   weight: typefaceWeightTokens
 } = typographyTokens.typography;
 
 const generationNote = "/* Autogenerated by build-typography-classes.js*/";
 
-/**
- * Generate font-families.css
- */
-
-const typefaceFamiliesClasses = Object.keys(typefaceFamilyTokens).map(
-  token => {
-    const familiesLineHeight = {
-      headline: typefaceLineHeightTokens.sm.value,
-      "magazine-headline": typefaceLineHeightTokens.sm.value,
-      subhead: typefaceLineHeightTokens.md.value,
-      "meta-text": typefaceLineHeightTokens.md.value,
-      body: typefaceLineHeightTokens.default.value
-    };
-
-    if (token === "sans-serif") {
-      return `.font-sans-serif {
-      font-family: ${typefaceFamilyTokens[token].value};
-    }`;
-    } else {
-      return `.font--${token} {
-        font-family: ${typefaceFamilyTokens[token].value};
-        ${
-          familiesLineHeight[token]
-            ? `line-height: ${familiesLineHeight[token]};`
-            : ""
-        }
-      }`;
-    }
-  }
-);
-
-fs.writeFile(
-  path.resolve(__dirname, "./../src/css/typography/font-family.css"),
-  `
-  ${generationNote}
-  @import "./font-face.css";
-
-  .font--article-body {
-    font-family: ${typefaceFamilyTokens.body.value};
-    line-height: ${typefaceLineHeightTokens.lg2.value};
-  }
-
-  ${typefaceFamiliesClasses.join("")}
-  `,
-  () => true
-);
-
 /**
  * Generate weight.css
  */

components/search/search-data.js

@@ -5105,7 +5105,7 @@
 		"css": [
 			{
 				"prop": "font-family",
-				"value": "georgia,Times New Roman,serif"
+				"value": "var(--wpds-fonts-body)"
 			},
 			{
 				"prop": "line-height",
@@ -5115,12 +5115,12 @@
 		"responsive": "all screens"
 	},
 	{
-		"className": "font--headline font--magazine-headline",
-		"selector": ".font--headline,.font--magazine-headline",
+		"className": "font--headline",
+		"selector": ".font--headline",
 		"css": [
 			{
 				"prop": "font-family",
-				"value": "Postoni,garamond,serif"
+				"value": "var(--wpds-fonts-headline)"
 			},
 			{
 				"prop": "line-height",
@@ -5130,12 +5130,42 @@
 		"responsive": "all screens"
 	},
 	{
-		"className": "font--meta-text font--subhead",
-		"selector": ".font--meta-text,.font--subhead",
+		"className": "font--magazine-headline",
+		"selector": ".font--magazine-headline",
 		"css": [
 			{
 				"prop": "font-family",
-				"value": "Franklin,arial,sans-serif"
+				"value": "var(--wpds-fonts-magazine)"
+			},
+			{
+				"prop": "line-height",
+				"value": "1.1"
+			}
+		],
+		"responsive": "all screens"
+	},
+	{
+		"className": "font--meta-text",
+		"selector": ".font--meta-text",
+		"css": [
+			{
+				"prop": "font-family",
+				"value": "var(--wpds-fonts-meta)"
+			},
+			{
+				"prop": "line-height",
+				"value": "1.25"
+			}
+		],
+		"responsive": "all screens"
+	},
+	{
+		"className": "font--subhead",
+		"selector": ".font--subhead",
+		"css": [
+			{
+				"prop": "font-family",
+				"value": "var(--wpds-fonts-subhead)"
 			},
 			{
 				"prop": "line-height",
@@ -5150,7 +5180,7 @@
 		"css": [
 			{
 				"prop": "font-family",
-				"value": "georgia,Times New Roman,serif"
+				"value": "var(--wpds-fonts-body)"
 			},
 			{
 				"prop": "line-height",
@@ -5165,7 +5195,7 @@
 		"css": [
 			{
 				"prop": "font-family",
-				"value": "Franklin,arial,sans-serif"
+				"value": "var(--wpds-fonts-meta)"
 			}
 		],
 		"responsive": "all screens"
@@ -8913,6 +8943,21 @@
 		],
 		"responsive": "all screens"
 	},
+	{
+		"className": "bodyhtml",
+		"selector": "body,html",
+		"css": [
+			{
+				"prop": "font-feature-settings",
+				"value": "\"normal\""
+			},
+			{
+				"prop": "color",
+				"value": "\"blue\""
+			}
+		],
+		"responsive": "all screens"
+	},
 	{
 		"className": "brad-sm-0",
 		"selector": ".brad-sm-0",