task: adds fonts

build.js

@@ -2,6 +2,10 @@ import StyleDictionary from "style-dictionary";
 import { registerTransforms } from "@tokens-studio/sd-transforms";
 
 import filterExcludeTokens from "./utils/filters/filterExcludeTokens.js";
+
+import formatFontFace from "./utils/formats/formatFontFace.js";
+
+import transformFont from "./utils/transforms/transformFont.js";
 import transformToRem from "./utils/transforms/transformToRem.js";
 
 registerTransforms(StyleDictionary);
@@ -15,7 +19,7 @@ const common = {
 };
 
 const sd = new StyleDictionary({
-  source: ["tokens-figma/*.json"],
+  source: ["tokens/**/*.json"],
   platforms: {
     css: {
       ...common,
@@ -25,11 +29,30 @@ const sd = new StyleDictionary({
           destination: `css/${groupName}.css`,
           format: "css/variables",
           filter: (token) =>
-            token.filePath === `tokens-figma/${groupName}.json` &&
+            token.filePath === `tokens/tokens-figma/${groupName}.json` &&
             filterExcludeTokens(token),
         };
       }),
     },
+    fonts: {
+      ...common,
+      transforms: ["custom/font"],
+      files: [
+        {
+          destination: "css/fonts.css",
+          format: "custom/font-face",
+          filter: {
+            attributes: {
+              category: "asset",
+              type: "font",
+            },
+          },
+          options: {
+            fontPathPrefix: "../../assets/",
+          },
+        },
+      ],
+    },
     json: {
       ...common,
       files: [
@@ -43,6 +66,19 @@ const sd = new StyleDictionary({
   },
 });
 
+sd.registerFormat({
+  name: "custom/font-face",
+  format: ({ dictionary: { allTokens }, options }) =>
+    formatFontFace(allTokens, options),
+});
+
+sd.registerTransform({
+  name: "custom/font",
+  type: "attribute",
+  filter: (token) => token.path[0] === "asset" && token.path[1] === "font",
+  transform: (token) => transformFont(token.path),
+});
+
 sd.registerTransform({
   name: "custom/rem",
   type: "value",
@@ -59,4 +95,4 @@ sd.registerTransform({
 });
 
 sd.cleanAllPlatforms();
-sd.buildAllPlatforms();
+sd.buildAllPlatforms();

split-json.js

@@ -12,7 +12,7 @@ const rawData = fs.readFileSync(jsonFile);
 const jsonData = JSON.parse(rawData);
 
 // Define the base output directory
-const baseDir = path.join(__dirname, "tokens-figma");
+const baseDir = path.join(__dirname, "tokens/tokens-figma");
 
 // Define keys to include
 const includeKeys = ["GLOBAL/core", "GLOBAL/semantic"];
@@ -46,4 +46,4 @@ includeKeys.forEach((key) => {
   }
 });
 
-console.log("JSON files have been created in the tokens directory.");
+console.log("JSON files have been created in the tokens directory.");

tokens-generated/css/fonts.css

@@ -0,0 +1,26 @@
+@font-face {
+	font-display: swap;
+	font-family: "Inter";
+	font-style: normal;
+	font-weight: 400;
+	src: url("../../assets/fonts/Inter-Regular.woff2") format("woff2"),
+			 url("../../assets/fonts/Inter-Regular.woff") format("woff");
+}
+
+@font-face {
+	font-display: swap;
+	font-family: "Inter";
+	font-style: normal;
+	font-weight: 500;
+	src: url("../../assets/fonts/Inter-Medium.woff2") format("woff2"),
+			 url("../../assets/fonts/Inter-Medium.woff") format("woff");
+}
+
+@font-face {
+	font-display: swap;
+	font-family: "Wellcome";
+	font-style: normal;
+	font-weight: 700;
+	src: url("../../assets/fonts/wellcome-bold-webfont.woff2") format("woff2"),
+			 url("../../assets/fonts/wellcome-bold-webfont.woff") format("woff");
+}

tokens/README.md

@@ -0,0 +1,5 @@
+### Important
+
+Please note that editing the files in the *tokens-figma* folder directly is not recommended. These files are automatically generated after running the command `npm run split-json`.
+
+`fonts.json` can be edited directly. Please run `npm run build` after editing this file.

tokens/fonts.json

@@ -0,0 +1,37 @@
+{
+  "asset": {
+    "font": {
+      "Inter": {
+        "400": {
+          "normal": {
+            "value": "fonts/Inter-Regular",
+            "formats": [
+              "woff2",
+              "woff"
+            ]
+          }
+        },
+        "500": {
+          "normal": {
+            "value": "fonts/Inter-Medium",
+            "formats": [
+              "woff2",
+              "woff"
+            ]
+          }
+        }
+      },
+      "Wellcome": {
+        "700": {
+          "normal": {
+            "value": "fonts/wellcome-bold-webfont",
+            "formats": [
+              "woff2",
+              "woff"
+            ]
+          }
+        }
+      }
+    }
+  }
+}

utils/formats/formatFontFace.js

@@ -0,0 +1,48 @@
+/**
+ *
+ * @param allTokens
+ * @param options
+ * @returns {*}
+ *
+ * @see {@link https://github.com/amzn/style-dictionary/blob/main/examples/advanced/font-face-rules/sd.config.js#L18}
+ */
+const formatFontFace = (allTokens, options) => {
+  const fontPathPrefix = options.fontPathPrefix || "../";
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src
+  const formatsMap = {
+    woff2: "woff2",
+    woff: "woff",
+  };
+
+  return allTokens
+    .reduce((fontList, prop) => {
+      const {
+        attributes: { family, weight, style },
+        formats,
+        value: path,
+      } = prop;
+
+      const urls = formats.map(
+        (extension) =>
+          `url("${fontPathPrefix}${path}.${extension}") format("${formatsMap[extension]}")`,
+      );
+
+      const fontCss = [
+        "@font-face {",
+        "\n\tfont-display: swap;",
+        `\n\tfont-family: "${family}";`,
+        `\n\tfont-style: ${style};`,
+        `\n\tfont-weight: ${weight};`,
+        `\n\tsrc: ${urls.join(",\n\t\t\t ")};`,
+        "\n}\n",
+      ].join("");
+
+      fontList.push(fontCss);
+
+      return fontList;
+    }, [])
+    .join("\n");
+};
+
+export default formatFontFace;

utils/transforms/transformFont.js

@@ -0,0 +1,17 @@
+/**
+ * Helper: transform to codify the font's details as named attributes
+ *
+ * @see {@link https://github.com/amzn/style-dictionary/blob/main/examples/advanced/font-face-rules/sd.config.js#L8}
+ */
+
+function transformFont(tokenPath) {
+  return {
+    category: tokenPath[0],
+    type: tokenPath[1],
+    family: tokenPath[2],
+    weight: tokenPath[3],
+    style: tokenPath[4],
+  };
+}
+
+export default transformFont;