UX-754 Style Dictionary (#1029) (#1038)

* UX-747 & UX-748: Add Style Dictionary and CSS custom properties file (#1026)

* UX-747 Add Style Dictionary basic setup

* UX-747 Add box-shadow

* UX-747 Update to a temporary package name

* UX-747 Update readme.md

* UX-747 Fix spelling error

* UX-750 Add SCSS map and function generation (#1027)

* UX-750 Add SCSS map and function generation

* UX-750 Interpolate string so quotes are not needed by end user

* UX-750 Fix font size tokens

* UX-749 Generate JS token files (#1028)

* UX-749 Generate JS token files

* UX-749 Update deprecated token file name

* UX-749 Use 'legacy' instead of 'deprecated'

* UX-752 Generate meta token file (#1030)

* UX-752 Add meta file generation

* UX-752 Add index.js file entry point

* UX-752 Some clean up

* UX-752 More clean up

* UX-755 Harden design tokens (#1032)

* UX-755 Harden design tokens

* UX-755 Add sd package to lerna

* UX-754 Prepare design token package

* UX-754 Prepare design token package part 2

* UX-754 Update readme

* UX-754 Update snapshots

* UX-754 Fix color-white and color casing in tests

* UX-754 Fix color-white types

lerna.json

@@ -9,23 +9,14 @@
   "version": "6.1.0",
   "command": {
     "publish": {
-      "ignoreChanges": [
-        "**/tests/**",
-        "**/*.md"
-      ]
+      "ignoreChanges": ["**/tests/**", "**/*.md"]
     },
     "bootstrap": {
-      "npmClientArgs": [
-        "--no-package-lock"
-      ]
+      "npmClientArgs": ["--no-package-lock"]
     },
     "version": {
       "message": "Publish %s"
     }
   },
-  "ignoreChanges": [
-    "**/matchbox-site/**",
-    "**/tests/**",
-    "**/*.md"
-  ]
+  "ignoreChanges": ["**/matchbox-site/**", "**/tests/**", "**/*.md"]
 }

packages/design-tokens/.npmignore

@@ -1,7 +1,4 @@
 /node_modules
-/data
-/gulpfile
-/scripts
 
 # misc
 .DS_Store

packages/design-tokens/README.md

@@ -1,13 +1,12 @@
-# design-tokens
+# @sparkpost/design-tokens
 
 Want to start using tokens? See:
 
-- [Getting Started](https://design.sparkpost.com/design/tokens)
+- [Getting Started](https://design.sparkpost.com/foundations/design-tokens)
 
 Looking for documentation? See:
 
 - [Design System Website](https://design.sparkpost.com)
-- [Playroom](https://matchbox-playroom.netlify.app/)
 
 Want to contribute? See:
 
@@ -18,9 +17,20 @@ Want to contribute? See:
 Commands:
 
 ```bash
-# Runs docs task and starts a local server at http://localhost:3000
-npm run start
-
-# Compiles tokens for packaging
+# Compiles tokens
 npm run build
 ```
+
+Importing:
+
+```css
+@import '~@sparkpost/design-tokens/dist/css/tokens.css';
+```
+
+```css
+@import '~@sparkpost/design-tokens/dist/scss/tokens.scss';
+```
+
+```js
+import { tokens, tokens_next, tokens_legacy, meta } from '@sparkpost/design-tokens';
+```

packages/design-tokens/config.js

@@ -0,0 +1,115 @@
+const { mapGet, utils, colorMapGet } = require('./templates/scss-functions');
+const { toSnake, toCamel, toFriendly } = require('./utils/utils');
+const transforms = require('style-dictionary/lib/common/transforms');
+
+module.exports = {
+  source: ['tokens/**/*.json'],
+  platforms: {
+    // Generates css custom properties
+    css: {
+      transformGroup: 'css',
+      buildPath: 'dist/css/',
+      files: [
+        {
+          destination: 'tokens.css',
+          format: 'css/variables',
+        },
+      ],
+    },
+    scss: {
+      transformGroup: 'scss',
+      buildPath: 'dist/scss/',
+      files: [
+        // Generates scss maps
+        {
+          destination: 'maps.scss',
+          format: 'scss/map-deep',
+          mapName: 'matchbox-tokens',
+        },
+        // Generates scss map functions
+        {
+          destination: 'tokens.scss',
+          format: 'scss/functions',
+        },
+      ],
+    },
+    // Generates JS files in snake case
+    js: {
+      transformGroup: 'js',
+      buildPath: 'dist/js/',
+      transforms: ['name/cti/snake'],
+      files: [
+        {
+          destination: 'tokens.js',
+          format: 'javascript/module-flat',
+        },
+      ],
+    },
+    // Generates JS files in the old format of snake & camel using a custom transform
+    js_legacy: {
+      transformGroup: 'js',
+      buildPath: 'dist/js/',
+      transforms: ['name/cti/legacy'],
+      files: [
+        {
+          destination: 'tokens.legacy.js',
+          format: 'javascript/module-flat',
+        },
+      ],
+    },
+    // Generates meta JS file
+    js_meta: {
+      transformGroup: 'js',
+      buildPath: 'dist/meta/',
+      files: [
+        {
+          destination: 'meta.js',
+          format: 'javascript/meta',
+        },
+      ],
+    },
+  },
+  transform: {
+    'name/cti/legacy': {
+      type: 'name',
+      transformer: (token) => {
+        const [category, ...rest] = token.path;
+        return `${toCamel(category)}_${toSnake(rest.join('-'))}`;
+      },
+    },
+  },
+  format: {
+    'scss/functions': (args) => {
+      const keys = Object.keys(args.dictionary.tokens);
+      const rootFontSize = args.dictionary.allTokens.find(({ name }) => name === 'font-size-root');
+      const functions = keys.map((key) => (key !== 'color' ? mapGet(key) : colorMapGet())).join('');
+      return `${utils(rootFontSize)}\n${functions}`;
+    },
+    'javascript/meta': (args) => {
+      const all = args.dictionary.allTokens;
+
+      const tokens = all
+        .map((token) => {
+          const { path, value, pixel_value } = token;
+          const [head, ...tail] = path;
+
+          return JSON.stringify({
+            category: head,
+            css: `--${path.join('-')}`,
+            friendly: toFriendly(path.join(' ')),
+            javascript: transforms['name/cti/snake'].transformer(token, {}),
+            name: path.join('-'),
+            pixel_value: pixel_value,
+            pixel_value_unitless: !!pixel_value ? pixel_value.replace(/px$/, '') : undefined,
+            scss: `${head}(${tail.join(',')})`,
+            system: tail.join('.'),
+            type: head,
+            value: head.match(/^color$/) ? value.toUpperCase() : value,
+          });
+        })
+        .join(',\n');
+
+      return `module.exports = [${tokens}]`;
+    },
+  },
+};