Merge pull request #35 from department-of-veterans-affairs/feature/68…

…60-roettger-DesignTokensForFigma

feature/6860-roettger-DesignTokensForFigma

packages/tokens/build.js

@@ -0,0 +1,31 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const StyleDictionary = require('style-dictionary')
+
+/** Registering transform group to massage output as desired for figma */
+StyleDictionary.registerTransformGroup({
+  name: 'figma',
+  transforms: ['name/ti/camel', 'color/hex'],
+})
+
+/** Registering format to generate JSON in Design Token Community Group format (https://tr.designtokens.org/format/) */
+StyleDictionary.registerFormat({
+  name: 'json/dtcg',
+  formatter: function ({ dictionary }) {
+    const tokensObject = dictionary.allTokens.reduce(
+      (previousTokens, token) => ({
+        ...previousTokens,
+        [token.name]: {
+          $value: token.value,
+          $type: token.path[0], // path[0] is top level token type (e.g. 'color'), should meet: https://tr.designtokens.org/format/#types
+        },
+      }),
+      {},
+    )
+
+    return JSON.stringify(tokensObject, undefined, 2) + `\n`
+  },
+})
+
+const StyleDictionaryExtended = StyleDictionary.extend(__dirname + '/config.js')
+
+StyleDictionaryExtended.buildAllPlatforms()

packages/tokens/config.js

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const tokenCategories = require('./src/tokens')
+
+module.exports = {
+  source: ['src/tokens/**/*.json'],
+  platforms: {
+    rn: {
+      transformGroup: 'react-native',
+      buildPath: './dist/',
+      prefix: '',
+      files: [
+        {
+          destination: 'js/tokens.js',
+          format: 'javascript/es6',
+        },
+        {
+          format: 'typescript/es6-declarations',
+          destination: 'index.d.ts',
+        },
+      ],
+    },
+    figma: {
+      transformGroup: 'figma',
+      buildPath: './figma/',
+      files: tokenCategories.map((tokenCategory) => ({
+        destination: `${tokenCategory}.json`,
+        format: 'json/dtcg',
+      })),
+    },
+  },
+}

packages/tokens/figma/color.json

@@ -0,0 +1,94 @@
+{
+  "primaryDarker": {
+    "$value": "#003e73",
+    "$type": "color"
+  },
+  "primaryAltLightest": {
+    "$value": "#e1f3f8",
+    "$type": "color"
+  },
+  "secondaryLightest": {
+    "$value": "#f9dede",
+    "$type": "color"
+  },
+  "white": {
+    "$value": "#ffffff",
+    "$type": "color"
+  },
+  "black": {
+    "$value": "#000000",
+    "$type": "color"
+  },
+  "gray": {
+    "$value": "#5b616b",
+    "$type": "color"
+  },
+  "grayDark": {
+    "$value": "#323a45",
+    "$type": "color"
+  },
+  "grayMedium": {
+    "$value": "#757575",
+    "$type": "color"
+  },
+  "grayLight": {
+    "$value": "#aeb0b5",
+    "$type": "color"
+  },
+  "grayLightAlt": {
+    "$value": "#eeeeee",
+    "$type": "color"
+  },
+  "grayLighter": {
+    "$value": "#d6d7d9",
+    "$type": "color"
+  },
+  "grayLightest": {
+    "$value": "#f1f1f1",
+    "$type": "color"
+  },
+  "grayWarmDark": {
+    "$value": "#494440",
+    "$type": "color"
+  },
+  "grayWarmLight": {
+    "$value": "#e4e2e0",
+    "$type": "color"
+  },
+  "grayCoolLight": {
+    "$value": "#dce4ef",
+    "$type": "color"
+  },
+  "uswdsSystemColorBlueVivid30": {
+    "$value": "#58b4ff",
+    "$type": "color"
+  },
+  "uswdsSystemColorBlueVivid60": {
+    "$value": "#005ea2",
+    "$type": "color"
+  },
+  "uswdsSystemColorBlueWarmVivid80": {
+    "$value": "#162e51",
+    "$type": "color"
+  },
+  "uswdsSystemColorGray30": {
+    "$value": "#adadad",
+    "$type": "color"
+  },
+  "uswdsSystemColorGray80": {
+    "$value": "#2e2e2e",
+    "$type": "color"
+  },
+  "uswdsSystemColorRedVivid40": {
+    "$value": "#fb5a47",
+    "$type": "color"
+  },
+  "uswdsSystemColorRedVivid60": {
+    "$value": "#b50909",
+    "$type": "color"
+  },
+  "uswdsSystemColorRedVivid80": {
+    "$value": "#5c1111",
+    "$type": "color"
+  }
+}

packages/tokens/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@department-of-veterans-affairs/mobile-tokens",
-  "version": "0.2.0",
+  "version": "0.2.1-alpha.0",
   "description": "VA Design System Mobile Token Library",
   "main": "dist/js/tokens.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "style-dictionary build",
-    "prepack": "style-dictionary build",
+    "build": "node ./build.js",
+    "prepack": "node ./build.js",
     "publish-package": "npm publish --access public --tolerate-republish"
   },
   "repository": {

packages/tokens/src/tokens/index.js

@@ -0,0 +1,14 @@
+/** 
+ * File to handle building output files based on input files folder structure.
+ * Expects folders within tokens folder of: [token set name that will be output file name]/base.json
+ * 
+ * Copy/pasted from: https://github.com/amzn/style-dictionary/blob/main/examples/advanced/matching-build-files/tokens/index.js 
+ * with README of: https://github.com/amzn/style-dictionary/blob/main/examples/advanced/matching-build-files/README.md
+ * */
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { readdirSync, statSync } = require("fs");
+const { join } = require("path");
+const dirs = (p) =>
+  readdirSync(p).filter((f) => statSync(join(p, f)).isDirectory());
+module.exports = dirs(__dirname);