Replace Theo with Style Dictionary

.eslintignore

@@ -1,6 +1,6 @@
 /dist
 /ts-dist
-/src/design-tokens/generated
+/src/compiled
 /storybook-static
 
 # Ignore all files in the prototypes directory except for stories

.eslintrc.js

@@ -24,9 +24,8 @@ module.exports = {
       // Specifying this here fixes it.
       files: ['*.ts', '*.tsx'],
       parser: require.resolve(
-        // This package has to be resolved from the eslint plugin
-        // since it isn't installed into the pattern library directly.
-        '@cloudfour/eslint-plugin/node_modules/@typescript-eslint/parser'
+        // eslint-disable-next-line @cloudfour/node/no-extraneous-require
+        '@typescript-eslint/parser'
       ),
       parserOptions: {
         project: './tsconfig.json',

.github/workflows/ci.yml

@@ -19,6 +19,8 @@ jobs:
           restore-keys: ${{ runner.os }}-node-
       - name: Install Dependencies
         run: CYPRESS_INSTALL_BINARY=0 npm ci
+      - name: Run Preprocess
+        run: npm run preprocess
       - name: Run Lint
         run: npm run check-lint
 
@@ -59,8 +61,6 @@ jobs:
           restore-keys: ${{ runner.os }}-node-
       - name: Install Dependencies
         run: CYPRESS_INSTALL_BINARY=0 npm ci
-      - name: Run Preprocess
-        run: npm run preprocess
       - name: Run Build
         run: npm run build
 

.gitignore

@@ -7,7 +7,7 @@ ts-dist
 /src/assets/**/*.twig
 
 # Auto-generated design token stories
-/src/design-tokens/generated
+/src/compiled
 
 # Dependencies
 node_modules

.prettierignore

@@ -1,6 +1,6 @@
 /dist
 /ts-dist
-/src/design-tokens/generated
+/src/compiled
 /storybook-static
 
 # Ignore all files in the prototypes directory except for stories

.storybook/main.js

@@ -10,11 +10,15 @@ module.exports = {
   // We load the welcome story separately so it will be the first sidebar item.
   stories: ['../src/welcome.stories.mdx', '../src/**/*.stories.@(js|mdx)'],
   addons: [
-    '@storybook/addon-docs',
-    '@storybook/addon-controls',
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        actions: false,
+        backgrounds: false,
+      },
+    },
     '@storybook/addon-a11y',
     'storybook-mobile',
-    '@storybook/addon-viewport/register',
     'storybook-addon-themes',
     'storybook-addon-paddings',
     '@whitespace/storybook-addon-html',
@@ -63,23 +67,14 @@ module.exports = {
               implementation: require('sass'),
               sourceMap: true,
               sassOptions: {
-                importer: [
-                  require('../glob-sass-importer'),
-                  // Import Theo design tokens as SCSS variables
-                  require('../.theo/sass-importer'),
-                ],
+                importer: [require('../glob-sass-importer')],
               },
             },
           },
         ],
       },
       twingLoader,
-      valLoader,
-      {
-        // Import Theo design tokens as JS objects
-        test: /\.ya?ml$/,
-        use: resolve(__dirname, '../.theo/webpack-loader.js'),
-      }
+      valLoader
     );
 
     Object.assign(config.resolve.alias, twingAlias);

.storybook/preview.js

@@ -1,12 +1,11 @@
 import { Parser } from 'html-to-react';
 import { withPaddings } from 'storybook-addon-paddings';
-import * as colors from '../src/design-tokens/colors.yml';
-import * as breakpoints from '../src/design-tokens/breakpoint.yml';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-import { ratio } from '../src/design-tokens/modular-scale.yml';
+import tokens from '../src/compiled/tokens/js/tokens';
 import 'focus-visible';
 import '../src/index-with-dependencies.scss';
 import './preview.scss';
+const breakpoints = tokens.size.breakpoint;
 
 /**
  * The parameters for Storybook sorting functions are sparsely documented.
@@ -61,16 +60,18 @@ for (let i = -3; i <= 6; i++) {
     // `toFixed` keeps the values from extending past two decimal points.
     // The leading `+` keeps values from having decimal points where they don't
     // need them, so `1.00` becomes `1`.
-    value: `${+Math.pow(ratio, i).toFixed(2)}em`,
+    value: `${+Math.pow(tokens.number.scale.modular.ratio.value, i).toFixed(
+      2
+    )}em`,
   });
 }
 
 // Create viewports using widths defined in design tokens
 const breakpointViewports = Object.keys(breakpoints).map((name) => {
   return {
-    name: `breakpoint.$${name}`,
+    name: `$${breakpoints[name].name}`,
     styles: {
-      width: breakpoints[name],
+      width: breakpoints[name].value,
       // Account for padding and border around viewport preview
       height: 'calc(100% - 20px)',
     },
@@ -82,7 +83,9 @@ const htmlToReactParser = new Parser();
 
 export const parameters = {
   // Theme selection from stories
-  themes: [{ name: 'Dark', class: 't-dark', color: colors.primaryBrand }],
+  themes: [
+    { name: 'Dark', class: 't-dark', color: tokens.color.brand.primary.value },
+  ],
   // Sort stories according to preferred top-level settings
   options: { storySort },
   docs: {

.style-dictionary/build.js

@@ -0,0 +1,107 @@
+const StyleDictionary = require('style-dictionary');
+const _ = require('lodash');
+
+/**
+ * Custom Transform: Kebab-Case without Category
+ * Creates a kebab case name without the category at the front.
+ * This is most useful when filtering a file to only contain tokens from one
+ * category (e.g., colors.$base-dark-red instead of tokens.color-base-dark-red).
+ * If you define a prefix on the platform in your config, it will be prepended.
+ *
+ * ```js
+ * // Matches: all
+ * // Returns:
+ * "background-button-primary-active"
+ * "prefix-background-button-primary-active"
+ * ```
+ */
+StyleDictionary.registerTransform({
+  name: 'custom/name/ti/kebab',
+  type: 'name',
+  transformer: function (prop, options) {
+    return _.kebabCase(
+      [options.prefix].concat(prop.path.slice(1, prop.path.length)).join(' ')
+    );
+  },
+});
+
+/**
+ * Custom Transform: Kebab-Case without Category or Type
+ * Creates a kebab case name without the category or type at the front.
+ * This is most useful when filtering a file to only contain tokens from one
+ * category & type (e.g., base-colors.$dark-red instead of tokens.color-base-dark-red).
+ * If you define a prefix on the platform in your config, it will be prepended.
+ *
+ * ```js
+ * // Matches: all
+ * // Returns:
+ * "button-primary-active"
+ * "prefix-button-primary-active"
+ * ```
+ */
+StyleDictionary.registerTransform({
+  name: 'custom/name/i/kebab',
+  type: 'name',
+  transformer: function (prop, options) {
+    return _.kebabCase(
+      [options.prefix].concat(prop.path.slice(2, prop.path.length)).join(' ')
+    );
+  },
+});
+
+/**
+ * Custom Transform Group: CSS
+ * This is a modified version of the CSS transform group without the time,
+ * size, or icon transformations and using our custom CSS color transform.
+ * We also use it for JSON.
+ */
+StyleDictionary.registerTransformGroup({
+  name: 'custom/transform-group/css',
+  transforms: ['attribute/cti', 'name/cti/kebab', 'color/css'],
+});
+
+/**
+ * Custom Transform Group: CSS by Category
+ * Same as our custom CSS transform group, but strips the category from
+ * the token names for files that are limited to a single category.
+ */
+StyleDictionary.registerTransformGroup({
+  name: 'custom/transform-group/css-category',
+  transforms: ['attribute/cti', 'custom/name/ti/kebab', 'color/css'],
+});
+
+/**
+ * Custom Transform Group: CSS by Category
+ * Same as our custom CSS transform group, but strips the category & type from
+ * the token names for files that are limited to a single category.
+ */
+StyleDictionary.registerTransformGroup({
+  name: 'custom/transform-group/css-category-type',
+  transforms: ['attribute/cti', 'custom/name/i/kebab', 'color/css'],
+});
+
+/**
+ * Custom Format: JS Flat
+ * This custom format is based on `json/flat` but modified to return a JS module
+ * containing a `value` and `comment` (if one exists).
+ */
+StyleDictionary.registerFormat({
+  name: 'custom/format/js/flat',
+  formatter(dictionary) {
+    const tokens = {};
+    dictionary.allProperties.forEach((prop) => {
+      tokens[prop.name] = prop;
+    });
+    return `module.exports = ${JSON.stringify(tokens, null, '  ')}`;
+  },
+});
+
+// APPLY THE CONFIGURATION
+// IMPORTANT: the registration of custom transforms
+// needs to be done _before_ applying the configuration
+const StyleDictionaryExtended = StyleDictionary.extend(
+  __dirname + '/config.js'
+);
+
+// BUILD ALL THE PLATFORMS
+StyleDictionaryExtended.buildAllPlatforms();

.style-dictionary/config.js

@@ -0,0 +1,119 @@
+module.exports = {
+  log: 'warn',
+  source: ['src/tokens/**/*.+(js|json)'],
+  platforms: {
+    // Export all the tokens in a single SCSS file.
+    scss: {
+      transformGroup: 'custom/transform-group/css',
+      buildPath: 'src/compiled/tokens/scss/',
+      files: [
+        {
+          destination: '_tokens.scss',
+          format: 'scss/variables',
+        },
+      ],
+    },
+    // Export some categories to their own SCSS files for easier importing,
+    // removing the category from the variable names.
+    'scss-categories': {
+      transformGroup: 'custom/transform-group/css-category',
+      buildPath: 'src/compiled/tokens/scss/',
+      files: [
+        {
+          destination: '_color.scss',
+          format: 'scss/variables',
+          filter: { attributes: { category: 'color' } },
+        },
+        {
+          destination: '_ease.scss',
+          format: 'scss/variables',
+          filter: { attributes: { category: 'ease' } },
+        },
+        {
+          destination: '_size.scss',
+          format: 'scss/variables',
+          filter: { attributes: { category: 'size' } },
+        },
+      ],
+    },
+    // Export some category types to their own SCSS files for easier importing,
+    // removing the category and type from the variable names.
+    'scss-category-types': {
+      transformGroup: 'custom/transform-group/css-category-type',
+      buildPath: 'src/compiled/tokens/scss/',
+      files: [
+        {
+          destination: '_aspect-ratio.scss',
+          format: 'scss/variables',
+          filter: {
+            attributes: { category: 'number', type: 'aspect_ratio' },
+          },
+        },
+        {
+          destination: '_breakpoint.scss',
+          format: 'scss/variables',
+          filter: {
+            attributes: { category: 'size', type: 'breakpoint' },
+          },
+        },
+        {
+          destination: '_brightness.scss',
+          format: 'scss/variables',
+          filter: {
+            attributes: { category: 'number', type: 'brightness' },
+          },
+        },
+        {
+          destination: '_font-family.scss',
+          format: 'scss/variables',
+          filter: { attributes: { category: 'font', type: 'family' } },
+        },
+        {
+          destination: '_font-weight.scss',
+          format: 'scss/variables',
+          filter: {
+            attributes: { category: 'number', type: 'font_weight' },
+          },
+        },
+        {
+          destination: '_opacity.scss',
+          format: 'scss/variables',
+          filter: {
+            attributes: { category: 'number', type: 'opacity' },
+          },
+        },
+        {
+          destination: '_scale.scss',
+          format: 'scss/variables',
+          filter: {
+            attributes: { category: 'number', type: 'scale' },
+          },
+        },
+        {
+          destination: '_transition.scss',
+          format: 'scss/variables',
+          filter: {
+            attributes: { category: 'time', type: 'transition' },
+          },
+        },
+      ],
+    },
+    js: {
+      transformGroup: 'custom/transform-group/css',
+      buildPath: 'src/compiled/tokens/js/',
+      files: [
+        // Export all the tokens in a single JS file.
+        {
+          destination: 'tokens.js',
+          format: 'javascript/module',
+        },
+        // Export a flattened version of just the size tokens for easier looping.
+        {
+          destination: 'size-tokens.js',
+          format: 'custom/format/js/flat',
+          filter: { attributes: { category: 'size' } },
+        },
+      ],
+    },
+  },
+};

.stylelintignore

@@ -3,3 +3,6 @@
 
 # Ignore syntax highlighting examples
 /src/vendor/prism/demo/samples/**/*
+
+# Generated files
+/src/compiled