[Feature] Add composite typography tokens

packages/tokens/build.js

@@ -84,6 +84,12 @@ StyleDictionary.registerFilter({
   matcher: (token) => filterFont(token, 'line-height'),
 })
 
+/** Filter to tokens of category 'font', type 'composite', and npm true */
+StyleDictionary.registerFilter({
+  name: 'filter/font/composite-npm',
+  matcher: (token) => filterFont(token, 'composite'),
+})
+
 /** Remove tokens that do not have 'font' in the category and have figma attribute */
 StyleDictionary.registerFilter({
   name: 'filter/font-figma',
@@ -170,7 +176,7 @@ StyleDictionary.registerFormat({
 StyleDictionary.registerFormat({
   name: 'javascript/es6/fontIndex',
   formatter: function () {
-    const files = ['family', 'letterSpacing', 'lineHeight', 'size']
+    const files = ['family', 'letterSpacing', 'lineHeight', 'size', 'styles']
     let imports = '',
       exports = ''
 
@@ -186,7 +192,7 @@ StyleDictionary.registerFormat({
 StyleDictionary.registerFormat({
   name: 'typescript/es6-declarations/fontIndex',
   formatter: function () {
-    const files = ['family', 'letterSpacing', 'lineHeight', 'size']
+    const files = ['family', 'letterSpacing', 'lineHeight', 'size', 'styles']
     let imports = '',
       exports = ''
 
@@ -249,6 +255,38 @@ StyleDictionary.registerFormat({
   },
 })
 
+/** Formats declarations exports for composite tokens */
+StyleDictionary.registerFormat({
+  name: 'typescript/es6-declarations/composite',
+  formatter: function ({ dictionary, options }) {
+    let tokens = dictionary.allTokens,
+      declaration = `export declare const ${options.exportName}: {\n`
+
+    if (!options.noSort) {
+      tokens = sortTokensByName(tokens)
+    }
+
+    for (const token of tokens) {
+      let docs = `/** `
+      let valueKeys = '{\n'
+
+      // Generate docs line and object of value types
+      Object.keys(token.value).forEach((key, index) => {
+        docs += `${index !== 0 ? '| ' : ''}${key}: ${token.value[key]} `
+        valueKeys += `    ${key}: ${typeof token.value[key]}\n`
+      })
+
+      docs += `*/\n`
+      declaration += `  ${docs}`
+      declaration += `  ${token.name}: ${valueKeys}`
+      declaration += `  }\n`
+    }
+
+    declaration += '}'
+    return declaration
+  },
+})
+
 /** Creates named type declaration for Themes. Allows for TypeScript autocomplete */
 StyleDictionary.registerFormat({
   name: 'typescript/es6-declarations/theme',

packages/tokens/config.js

@@ -83,6 +83,14 @@ module.exports = {
           destination: 'js/themes.js',
           format: 'javascript/es6/vads-colors-themes',
         },
+        {
+          destination: 'js/font/styles.js',
+          format: 'javascript/es6/simple-key-value',
+          filter: 'filter/font/composite-npm',
+          options: {
+            exportName: 'styles',
+          },
+        },
         // TS defs
         {
           destination: 'types/colors.d.ts',
@@ -130,6 +138,15 @@ module.exports = {
             noSort: true,
           },
         },
+        {
+          destination: 'types/font/styles.d.ts',
+          format: 'typescript/es6-declarations/composite',
+          filter: 'filter/font/composite-npm',
+          options: {
+            exportName: 'styles',
+            noSort: true,
+          },
+        },
         {
           destination: 'types/spacing.d.ts',
           format: 'typescript/es6-declarations/simple-key-value',

packages/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/mobile-tokens",
-  "version": "0.19.0",
+  "version": "0.19.1-alpha.4",
   "description": "VA Design System Mobile Token Library",
   "main": "dist/js/index.js",
   "types": "dist/index.d.ts",

packages/tokens/src/tokens/font/composite.json

@@ -0,0 +1,152 @@
+{
+  "vads-font-display": {
+    "name": "vads-font-display",
+    "value": {
+      "fontFamily": "{vads-font-family-serif-regular}",
+      "fontSize": "{vads-font-size-display}",
+      "lineHeight": "{vads-font-line-height-heading-5xl}",
+      "marginBottom": "{vads-font-paragraph-spacing-heading-5xl}",
+      "letterSpacing": "{vads-font-letter-spacing-heading}"
+    },
+    "attributes": {
+      "category": "font",
+      "type": "composite",
+      "npm": true
+    }
+  },
+  "vads-font-heading-large": {
+    "name": "vads-font-heading-large",
+    "value": {
+      "fontFamily": "{vads-font-family-serif-regular}",
+      "fontSize": "{vads-font-size-heading-level-1}",
+      "lineHeight": "{vads-font-line-height-heading-2xl}",
+      "marginBottom": "{vads-font-paragraph-spacing-heading-2xl}",
+      "letterSpacing": "{vads-font-letter-spacing-heading}"
+    },
+    "attributes": {
+      "category": "font",
+      "type": "composite",
+      "npm": true
+    }
+  },
+  "vads-font-heading-medium": {
+    "name": "vads-font-heading-medium",
+    "value": {
+      "fontFamily": "{vads-font-family-serif-regular}",
+      "fontSize": "{vads-font-size-heading-level-2}",
+      "lineHeight": "{vads-font-line-height-heading-xl}",
+      "marginBottom": "{vads-font-paragraph-spacing-heading-xl}",
+      "letterSpacing": "{vads-font-letter-spacing-heading}"
+    },
+    "attributes": {
+      "category": "font",
+      "type": "composite",
+      "npm": true
+    }
+  },
+  "vads-font-heading-small": {
+    "name": "vads-font-heading-small",
+    "value": {
+      "fontFamily": "{vads-font-family-sans-serif-bold}",
+      "fontSize": "{vads-font-size-heading-level-3}",
+      "lineHeight": "{vads-font-line-height-heading-lg}",
+      "marginBottom": "{vads-font-paragraph-spacing-heading-lg}",
+      "letterSpacing": "{vads-font-letter-spacing-heading}"
+    },
+    "attributes": {
+      "category": "font",
+      "type": "composite",
+      "npm": true
+    }
+  },
+  "vads-font-heading-xsmall": {
+    "name": "vads-font-heading-xsmall",
+    "value": {
+      "fontFamily": "{vads-font-family-sans-serif-bold}",
+      "fontSize": "{vads-font-size-heading-level-4}",
+      "lineHeight": "{vads-font-line-height-heading-md}",
+      "marginBottom": "{vads-font-paragraph-spacing-heading-md}",
+      "letterSpacing": "{vads-font-letter-spacing-heading}"
+    },
+    "attributes": {
+      "category": "font",
+      "type": "composite",
+      "npm": true
+    }
+  },
+  "vads-font-body-large": {
+    "name": "vads-font-body-large",
+    "value": {
+      "fontFamily": "{vads-font-family-sans-serif-regular}",
+      "fontSize": "{vads-font-size-body-large}",
+      "lineHeight": "{vads-font-line-height-default-lg}",
+      "marginBottom": "{vads-font-paragraph-spacing-default-lg}",
+      "letterSpacing": "{vads-font-letter-spacing-default}"
+    },
+    "attributes": {
+      "category": "font",
+      "type": "composite",
+      "npm": true
+    }
+  },
+  "vads-font-body-medium": {
+    "name": "vads-font-body-medium",
+    "value": {
+      "fontFamily": "{vads-font-family-sans-serif-regular}",
+      "fontSize": "{vads-font-size-body-medium}",
+      "lineHeight": "{vads-font-line-height-default-md}",
+      "marginBottom": "{vads-font-paragraph-spacing-default-md}",
+      "letterSpacing": "{vads-font-letter-spacing-default}"
+    },
+    "attributes": {
+      "category": "font",
+      "type": "composite",
+      "npm": true
+    }
+  },
+  "vads-font-body-small": {
+    "name": "vads-font-body-small",
+    "value": {
+      "fontFamily": "{vads-font-family-sans-serif-regular}",
+      "fontSize": "{vads-font-size-body-small}",
+      "lineHeight": "{vads-font-line-height-default-sm}",
+      "marginBottom": "{vads-font-paragraph-spacing-default-sm}",
+      "letterSpacing": "{vads-font-letter-spacing-default}"
+    },
+    "attributes": {
+      "category": "font",
+      "type": "composite",
+      "npm": true
+    }
+  },
+  "vads-font-body-xsmall": {
+    "name": "vads-font-body-xsmall",
+    "value": {
+      "fontFamily": "{vads-font-family-sans-serif-regular}",
+      "fontSize": "{vads-font-size-body-xsmall}",
+      "lineHeight": "{vads-font-line-height-default-xs}",
+      "marginBottom": "{vads-font-paragraph-spacing-default-xs}",
+      "letterSpacing": "{vads-font-letter-spacing-default}"
+    },
+    "attributes": {
+      "category": "font",
+      "type": "composite",
+      "npm": true
+    }
+  },
+  "vads-font-navigation": {
+    "name": "vads-font-navigation",
+    "value": {
+      "fontFamily": "{vads-font-family-sans-serif-regular}",
+      "fontSize": "{vads-font-size-navigation}",
+      "lineHeight": "{vads-font-line-height-default-2xs}",
+      "marginBottom": "{vads-font-paragraph-spacing-default-2xs}",
+      "letterSpacing": "{vads-font-letter-spacing-default}"
+    },
+    "attributes": {
+      "category": "font",
+      "type": "composite",
+      "npm": true
+    }
+  }
+}