@abgov/design-tokens 1.0.4 → 1.0.5-dev.2

package/data/global-ddi.json

@@ -0,0 +1,512 @@
+{
+  "color": {
+    "brand": {
+      "default": {
+        "value": "#0081A2",
+        "type": "color",
+        "description": "Teal GOA Colour"
+      },
+      "dark": {
+        "value": "#005072",
+        "type": "color",
+        "description": "Dark GOA brand colour"
+      },
+      "light": {
+        "value": "#C8EEFA",
+        "type": "color",
+        "description": "Light GOA brand colour"
+      }
+    },
+    "interactive": {
+      "default": {
+        "value": "#0070C4",
+        "type": "color",
+        "description": "Default colour for interactive elements."
+      },
+      "hover": {
+        "value": "#004F84",
+        "type": "color",
+        "description": "Hover state for interactive elements."
+      },
+      "error": {
+        "value": "#EC040B",
+        "type": "color",
+        "description": "Error state for interactive elements."
+      },
+      "focus": {
+        "value": "#FEBA35",
+        "type": "color",
+        "description": "Focus state for interactive elements."
+      }
+    },
+    "text": {
+      "default": {
+        "value": "#333333",
+        "type": "color",
+        "description": "Default colour for most text (such as body, headings, subheadings)."
+      },
+      "secondary": {
+        "value": "#666666",
+        "type": "color",
+        "description": "Default colour for secondary text (such as disabled button text, and secondary text labels eg. “optional” or “partially complete”)."
+      },
+      "light": {
+        "value": "#FFFFFF",
+        "type": "color",
+        "description": "Use as the text colour on dark backgrounds."
+      }
+    },
+    "status": {
+      "info": {
+        "default": {
+          "value": "#005DAA",
+          "type": "color",
+          "description": "Use this colour to indicate information to the user."
+        },
+        "light": {
+          "value": "#B2D4ED",
+          "type": "color"
+        },
+        "dark": {
+          "value": "#00347A",
+          "type": "color"
+        }
+      },
+      "warning": {
+        "default": {
+          "value": "#FEBA35",
+          "type": "color",
+          "description": "Use this colour to indicate a warning to the user."
+        },
+        "light": {
+          "value": "#FCEFD0",
+          "type": "color"
+        },
+        "dark": {
+          "value": "#C68A00",
+          "type": "color"
+        }
+      },
+      "emergency": {
+        "default": {
+          "value": "#EC040B",
+          "type": "color",
+          "description": "Use this colour to indicate an emergency to the user."
+        },
+        "light": {
+          "value": "#FFCECF",
+          "type": "color"
+        },
+        "dark": {
+          "value": "#B00000",
+          "type": "color"
+        }
+      },
+      "success": {
+        "default": {
+          "value": "#00853F",
+          "type": "color",
+          "description": "Use this colour to indicate success to the user."
+        },
+        "light": {
+          "value": "#C6E0D0",
+          "type": "color"
+        },
+        "dark": {
+          "value": "#005715",
+          "type": "color"
+        }
+      }
+    },
+    "greyscale": {
+      "100": {
+        "value": "#F1F1F1",
+        "type": "color"
+      },
+      "200": {
+        "value": "#DCDCDC",
+        "type": "color"
+      },
+      "400": {
+        "value": "#ADADAD",
+        "type": "color"
+      },
+      "500": {
+        "value": "#949494",
+        "type": "color"
+      },
+      "600": {
+        "value": "#666666",
+        "type": "color"
+      },
+      "black": {
+        "value": "#333333",
+        "type": "color"
+      },
+      "white": {
+        "value": "#FFFFFF",
+        "type": "color"
+      }
+    }
+  },
+  "fontWeight": {
+    "regular": {
+      "value": "400",
+      "type": "fontWeights"
+    },
+    "medium": {
+      "value": "500",
+      "type": "fontWeights"
+    },
+    "bold": {
+      "value": "700",
+      "type": "fontWeights"
+    }
+  },
+  "fontSize": {
+    "1": {
+      "value": "0.75rem",
+      "type": "fontSizes",
+      "description": "12px"
+    },
+    "2": {
+      "value": "0.875rem",
+      "type": "fontSizes",
+      "description": "14px"
+    },
+    "3": {
+      "value": "1rem",
+      "type": "fontSizes",
+      "description": "16px"
+    },
+    "4": {
+      "value": "1.125rem",
+      "type": "fontSizes",
+      "description": "18px"
+    },
+    "5": {
+      "value": "1.25rem",
+      "type": "fontSizes",
+      "description": "20px"
+    },
+    "6": {
+      "value": "1.375rem",
+      "type": "fontSizes",
+      "description": "22px"
+    },
+    "7": {
+      "value": "1.5rem",
+      "type": "fontSizes",
+      "description": "24px"
+    },
+    "8": {
+      "value": "2rem",
+      "type": "fontSizes",
+      "description": "32px"
+    },
+    "9": {
+      "value": "2.25rem",
+      "type": "fontSizes",
+      "description": "2.25rem"
+    },
+    "10": {
+      "value": "3rem",
+      "type": "fontSizes",
+      "description": "48px"
+    }
+  },
+  "spacing": {
+    "none": {
+      "value": "0rem",
+      "type": "spacing",
+      "description": "0px | 0rem"
+    },
+    "3xs": {
+      "value": "0.125rem",
+      "type": "spacing",
+      "description": "2px"
+    },
+    "2xs": {
+      "value": "0.25rem",
+      "type": "spacing",
+      "description": "4px"
+    },
+    "xs": {
+      "value": "0.5rem",
+      "type": "spacing",
+      "description": "8px"
+    },
+    "s": {
+      "value": "0.75rem",
+      "type": "spacing",
+      "description": "12px"
+    },
+    "m": {
+      "value": "1rem",
+      "type": "spacing",
+      "description": "16px"
+    },
+    "l": {
+      "value": "1.5rem",
+      "type": "spacing",
+      "description": "24px"
+    },
+    "xl": {
+      "value": "2rem",
+      "type": "spacing",
+      "description": "32px"
+    },
+    "2xl": {
+      "value": "3rem",
+      "type": "spacing",
+      "description": "48px"
+    },
+    "3xl": {
+      "value": "4rem",
+      "type": "spacing",
+      "description": "64px"
+    },
+    "4xl": {
+      "value": "8rem",
+      "type": "spacing",
+      "description": "128px"
+    }
+  },
+  "borderRadius": {
+    "0": {
+      "value": "0rem",
+      "type": "borderRadius",
+      "description": "0px"
+    },
+    "4": {
+      "value": "0.25rem",
+      "type": "borderRadius",
+      "description": "4px"
+    },
+    "pill": {
+      "value": "999px",
+      "type": "borderRadius",
+      "description": "999px | 999rem"
+    },
+    "circle": {
+      "value": "50%",
+      "type": "borderRadius",
+      "description": "50%"
+    }
+  },
+  "opacity": {
+    "3": {
+      "value": "30%",
+      "type": "opacity",
+      "description": "30% opacity"
+    },
+    "5": {
+      "value": "50%",
+      "type": "opacity",
+      "description": "50% opacity"
+    },
+    "8": {
+      "value": "80%",
+      "type": "opacity",
+      "description": "80% opacity"
+    }
+  },
+  "lineHeight": {
+    "1": {
+      "value": "1.25rem",
+      "type": "lineHeights",
+      "description": "20px"
+    },
+    "2": {
+      "value": "1.5rem",
+      "type": "lineHeights",
+      "description": "24px"
+    },
+    "3": {
+      "value": "1.75rem",
+      "type": "lineHeights",
+      "description": "28px"
+    },
+    "4": {
+      "value": "2rem",
+      "type": "lineHeights",
+      "description": "32px"
+    },
+    "5": {
+      "value": "2.5rem",
+      "type": "lineHeights",
+      "description": "40px"
+    },
+    "6": {
+      "value": "2.75rem",
+      "type": "lineHeights",
+      "description": "44px"
+    },
+    "7": {
+      "value": "3.5rem",
+      "type": "lineHeights",
+      "description": "56px"
+    }
+  },
+  "fontFamilies": {
+    "default": {
+      "value": "Acumin-pro-semi-condensed",
+      "type": "fontFamilies",
+      "description": "Deafult font family for GOA"
+    },
+    "numbers": {
+      "value": "roboto-mono",
+      "type": "fontFamilies",
+      "description": "monospace typeface for numbers"
+    }
+  },
+  "typography": {
+    "heading": {
+      "xl": {
+        "value": {
+          "fontFamily": "{fontFamilies.default}",
+          "fontWeight": "{fontWeight.bold}",
+          "lineHeight": "{lineHeight.7}",
+          "fontSize": "{fontSize.10}"
+        },
+        "type": "typography",
+        "description": "Heading XL"
+      },
+      "l": {
+        "value": {
+          "fontFamily": "{fontFamilies.default}",
+          "fontWeight": "{fontWeight.regular}",
+          "lineHeight": "{lineHeight.6}",
+          "fontSize": "{fontSize.9}"
+        },
+        "type": "typography",
+        "description": "Heading L"
+      },
+      "m": {
+        "value": {
+          "fontFamily": "{fontFamilies.default}",
+          "fontWeight": "{fontWeight.regular}",
+          "lineHeight": "{lineHeight.4}",
+          "fontSize": "{fontSize.7}"
+        },
+        "type": "typography",
+        "description": "Heading M"
+      },
+      "s": {
+        "value": {
+          "fontFamily": "{fontFamilies.default}",
+          "fontWeight": "{fontWeight.bold}",
+          "lineHeight": "{lineHeight.3}",
+          "fontSize": "{fontSize.4}"
+        },
+        "type": "typography",
+        "description": "Heading S"
+      },
+      "xs": {
+        "value": {
+          "fontFamily": "{fontFamilies.default}",
+          "fontWeight": "{fontWeight.bold}",
+          "lineHeight": "{lineHeight.2}",
+          "fontSize": "{fontSize.3}"
+        },
+        "type": "typography",
+        "description": "Heading XS"
+      }
+    },
+    "body": {
+      "l": {
+        "value": {
+          "fontFamily": "{fontFamilies.default}",
+          "fontWeight": "{fontWeight.regular}",
+          "lineHeight": "{lineHeight.4}",
+          "fontSize": "{fontSize.7}"
+        },
+        "type": "typography",
+        "description": "Large text"
+      },
+      "m": {
+        "value": {
+          "fontFamily": "{fontFamilies.default}",
+          "fontWeight": "{fontWeight.regular}",
+          "lineHeight": "{lineHeight.3}",
+          "fontSize": "{fontSize.4}"
+        },
+        "type": "typography",
+        "description": "Body text"
+      },
+      "s": {
+        "value": {
+          "fontFamily": "{fontFamilies.default}",
+          "fontWeight": "{fontWeight.regular}",
+          "lineHeight": "{lineHeight.2}",
+          "fontSize": "{fontSize.3}"
+        },
+        "type": "typography",
+        "description": "Small text"
+      },
+      "xs": {
+        "value": {
+          "fontFamily": "{fontFamilies.default}",
+          "fontWeight": "{fontWeight.regular}",
+          "lineHeight": "{lineHeight.1}",
+          "fontSize": "{fontSize.2}"
+        },
+        "type": "typography",
+        "description": "Micro text"
+      }
+    },
+    "button": {
+      "default": {
+        "value": {
+          "fontFamily": "{fontFamilies.default}",
+          "fontWeight": "{fontWeight.regular}",
+          "lineHeight": "{lineHeight.1}",
+          "fontSize": "{fontSize.4}",
+          "letterSpacing": "{letterSpacing.buttons}"
+        },
+        "type": "typography"
+      }
+    }
+  },
+  "borderWidth": {
+    "s": {
+      "value": "1px",
+      "type": "borderWidth",
+      "description": "Small border width"
+    },
+    "m": {
+      "value": "2px",
+      "type": "borderWidth",
+      "description": "Medium border width"
+    },
+    "l": {
+      "value": "3px",
+      "type": "borderWidth",
+      "description": "Large border width"
+    }
+  },
+  "letterSpacing": {
+    "buttons": {
+      "value": "1%",
+      "type": "letterSpacing",
+      "description": "small letter spacing adjustment to slightly kern letters out for readability on buttons"
+    }
+  },
+  "iconSize": {
+    "s": {
+      "value": "1rem",
+      "type": "sizing",
+      "description": "16px"
+    },
+    "m": {
+      "value": "1.25rem",
+      "type": "sizing",
+      "description": "20px"
+    },
+    "l": {
+      "value": "1.5rem",
+      "type": "sizing",
+      "description": "24px"
+    }
+  }
+}

package/index.spec.js

@@ -5,6 +5,7 @@ const fs = require("fs");
 describe("GoA Design Tokens", () => {
   beforeEach((next) => {
     rm("./tmp", next);
+    console.log = () => { }; // one of the libs has some console.log statements
   });
 
   it("should create css and scss files", async () => {
@@ -20,4 +21,15 @@ describe("GoA Design Tokens", () => {
       expect(files[0]).toBe(`tokens.${dir}`);
     }
   });
+
+  it("should create valid css output", async () => {
+    SC.generate("./tmp");
+    const raw = fs.readFileSync("./tmp/css/tokens.css", { encoding: "utf8" });
+    expect(raw).toContain("--goa-color-brand-default");
+  });
+  it("should create valid scss output", async () => {
+    SC.generate("./tmp");
+    const raw = fs.readFileSync("./tmp/scss/tokens.scss", { encoding: "utf8" });
+    expect(raw).toContain("$goa-color-brand-default");
+  });
 });

package/lib/design-tokens.js

@@ -1,46 +1,54 @@
 const StyleDictionary = require("style-dictionary");
-const fs = require("fs");
 
-function createDictionary(root, filename) {
-  const name = filename.split(".")[0];
-  return StyleDictionary.extend({
-    source: [`./data/${filename}`],
-    platforms: {
-      scss: {
-        transformGroup: "scss",
-        buildPath: `${root}/scss/`,
-        files: [
-          {
-            destination: `${name}.scss`,
-            format: "scss/variables",
-          },
-        ],
-      },
-      css: {
-        transformGroup: "css",
-        buildPath: `${root}/css/`,
-        files: [
-          {
-            destination: `${name}.css`,
-            format: "css/variables",
-          },
-        ],
-      },
+function generate(outputPath) {
+  StyleDictionary.registerTransform({
+    name: "typography/shorthand",
+    type: "value",
+    transitive: true,
+    matcher: function(token) {
+      return token.type === "typography";
+    },
+    transformer: function(token) {
+      const { fontWeight, fontSize, lineHeight, fontFamily } =
+        token.original.value;
+      return `${fontWeight} ${fontSize}/${lineHeight} ${fontFamily}`;
     },
   });
-}
 
-function getFiles() {
-  return fs.readdirSync("./data");
-}
-
-function generate(root) {
   try {
-    const files = getFiles();
-    for (const file of files) {
-      const config = createDictionary(root, file);
-      config.buildAllPlatforms();
-    }
+    StyleDictionary.extend({
+      source: [`./data/**/*.json`],
+      platforms: {
+        scss: {
+          prefix: "goa",
+          transforms: [
+            ...StyleDictionary.transformGroup.scss,
+            "typography/shorthand",
+          ],
+          buildPath: `${outputPath}/scss/`,
+          files: [
+            {
+              destination: "tokens.scss",
+              format: "scss/variables",
+            },
+          ],
+        },
+        css: {
+          prefix: "goa",
+          transforms: [
+            ...StyleDictionary.transformGroup.css,
+            "typography/shorthand",
+          ],
+          buildPath: `${outputPath}/css/`,
+          files: [
+            {
+              destination: "tokens.css",
+              format: "css/variables",
+            },
+          ],
+        },
+      },
+    }).buildAllPlatforms();
   } catch (e) {
     console.error("ERROR", e.message);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/design-tokens",
-  "version": "1.0.4",
+  "version": "1.0.5-dev.2",
   "main": "./index.js",
   "repository": {
     "type": "git",