@abgov/design-tokens 1.9.0 → 2.0.0

package/index.spec.js

@@ -27,4 +27,16 @@ describe("GoA Design Tokens", () => {
     const raw = fs.readFileSync("./tmp/dist/tokens.scss", { encoding: "utf8" });
     expect(raw).not.toContain("[object Object]");
   });
+
+  it("should not contain double goa prefixes", async () => {
+    SC.generate("./tmp");
+    const raw = fs.readFileSync("./tmp/dist/tokens.css", { encoding: "utf8" });
+    expect(raw).not.toContain("--goa-goa");
+  });
+
+  it("should not contain undefined values", async () => {
+    SC.generate("./tmp");
+    const raw = fs.readFileSync("./tmp/dist/tokens.css", { encoding: "utf8" });
+    expect(raw.toLowerCase()).not.toContain("undefined");
+  });
 });

package/lib/design-tokens.js

@@ -1,16 +1,15 @@
 const StyleDictionary = require("style-dictionary");
 
 function generate(outputPath) {
-
   // Typography
   StyleDictionary.registerTransform({
     name: "typography/shorthand",
     type: "value",
     transitive: true,
-    matcher: function(token) {
+    matcher: function (token) {
       return token.type === "typography";
     },
-    transformer: function(token) {
+    transformer: function (token) {
       const { fontWeight, fontSize, lineHeight, fontFamily } =
         token.original.value;
       return `${fontWeight} ${fontSize}/${lineHeight} ${fontFamily}`;
@@ -22,12 +21,29 @@ function generate(outputPath) {
     name: "box-shadow",
     type: "value",
     transitive: true,
-    matcher: function(token) {
+    matcher: function (token) {
       return token.type === "boxShadow";
     },
-    transformer: function(token) {
-      const { x, y, blur, spread, color } = token.original.value;
-      return `${x}px ${y}px ${blur}px ${spread}px ${color}`;
+    transformer: function (token) {
+      const toPx = (value) => {
+        if (value === 0 || value === "0") return "0px";
+        if (typeof value === "number") return `${value}px`;
+        if (typeof value !== "string") return value;
+        if (/^-?\d+(\.\d+)?$/.test(value)) return `${value}px`;
+        return value;
+      };
+
+      const formatLayer = (layer) => {
+        const { x, y, blur, spread, color } = layer;
+        return `${toPx(x)} ${toPx(y)} ${toPx(blur)} ${toPx(spread)} ${color}`;
+      };
+
+      const value = token.original.value;
+      if (Array.isArray(value)) {
+        return value.map(formatLayer).join(", ");
+      }
+
+      return formatLayer(value);
     },
   });
 
@@ -36,15 +52,31 @@ function generate(outputPath) {
     name: "border",
     type: "value",
     transitive: true,
-    matcher: function(token) {
+    matcher: function (token) {
       return token.type === "border";
     },
-    transformer: function(token) {
+    transformer: function (token) {
       const { color, width, style } = token.original.value;
       return `${width} ${style} ${color}`;
     },
   });
 
+  // Font Variation Settings
+  StyleDictionary.registerTransform({
+    name: "fontVariationSettings",
+    type: "value",
+    transitive: true,
+    matcher: function (token) {
+      return token.type === "fontVariationSettings";
+    },
+    transformer: function (token) {
+      const settings = token.original.value;
+      return Object.entries(settings)
+        .map(([key, value]) => `${key} ${value}`)
+        .join(", ");
+    },
+  });
+
   try {
     StyleDictionary.extend({
       source: [`./data/**/*.json`],
@@ -56,6 +88,7 @@ function generate(outputPath) {
             "typography/shorthand",
             "box-shadow",
             "border",
+            "fontVariationSettings",
           ],
           buildPath: `${outputPath}/dist/`,
           files: [
@@ -72,6 +105,7 @@ function generate(outputPath) {
             "typography/shorthand",
             "box-shadow",
             "border",
+            "fontVariationSettings",
           ],
           buildPath: `${outputPath}/dist/`,
           files: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/design-tokens",
-  "version": "1.9.0",
+  "version": "2.0.0",
   "main": "./index.js",
   "repository": {
     "type": "git",