Generate JavaScript tokens

.theo/formats/stories.mdx.js

@@ -1,4 +1,5 @@
 const groupBy = require('lodash/groupBy');
+const camelCase = require('lodash/camelCase');
 const kebabCase = require('lodash/kebabCase');
 const startCase = require('lodash/startCase');
 const { basename, extname } = require('path');
@@ -129,6 +130,10 @@ function mdxStoriesFormat(result) {
   const slug = basename(filename, extname(filename));
   const title = startCase(slug);
   const props = result.get('props').toJS();
+  const firstProp = props[0];
+  firstProp.sassName = `$${kebabCase(firstProp.name)}`;
+  firstProp.jsName = camelCase(firstProp.name);
+  firstProp.jsonValue = JSON.stringify(firstProp.value);
   const categories = groupBy(props, 'category');
   const mdxCategories = Object.keys(categories).map((category) =>
     categoryToMdx(category, categories[category])
@@ -141,8 +146,12 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
 # ${title}
 
 \`\`\`scss
-@use 'path/to/${filename}';
-$example: ${slug}.$${kebabCase(props[0].name)}; // => ${props[0].value}
+@use "../../design-tokens/${filename}";
+$example: ${slug}.${firstProp.sassName}; // => ${firstProp.value}
+\`\`\`
+\`\`\`javascript
+import { ${firstProp.jsName} } from '../../design-tokens/generated/${slug}.js';
+console.log(${firstProp.jsName}); // => ${firstProp.jsonValue}
 \`\`\`
 
 ${mdxCategories.join('\n\n')}`.trim();

gulpfile.js/index.js

@@ -6,7 +6,7 @@
 
 module.exports = {
   watchPreprocess: require('./tasks/watch-preprocess'),
-  theoToMDX: require('./tasks/theo-to-mdx'),
+  theo: require('./tasks/theo'),
   svgToTwig: require('./tasks/svg-to-twig'),
   buildSass: require('./tasks/build-sass'),
   buildJS: require('./tasks/build-scripts').buildJS,

gulpfile.js/tasks/theo.js

@@ -0,0 +1,48 @@
+const { src, dest, parallel } = require('gulp');
+const gulpTheo = require('gulp-theo');
+// Requiring this file applies our Theo customizations to gulp-theo
+require('../../.theo');
+const prettier = require('gulp-prettier');
+const rename = require('gulp-rename');
+
+// Ignore any files with leading underscores
+const srcGlob = ['src/design-tokens/*.yml', '!src/design-tokens/_*'];
+const destGlob = 'src/design-tokens/generated';
+const transform = {
+  type: 'web',
+};
+
+function theoToJs() {
+  return src(srcGlob)
+    .pipe(
+      gulpTheo({
+        transform,
+        format: {
+          type: 'module.js',
+        },
+      })
+    )
+    .pipe(prettier())
+    .pipe(
+      rename((path) => {
+        path.basename = path.basename.replace('.module', '');
+      })
+    )
+    .pipe(dest(destGlob));
+}
+
+function theoToMdx() {
+  return src(srcGlob)
+    .pipe(
+      gulpTheo({
+        transform,
+        format: {
+          type: 'stories.mdx',
+        },
+      })
+    )
+    .pipe(prettier())
+    .pipe(dest(destGlob));
+}
+
+module.exports = parallel(theoToJs, theoToMdx);

gulpfile.js/tasks/watch-preprocess.js

@@ -1,8 +1,8 @@
 const { watch } = require('gulp');
 const svgToTwig = require('./svg-to-twig');
-const theoToMdx = require('./theo-to-mdx');
+const theo = require('./theo');
 
 module.exports = function () {
   watch('src/assets/**/*.svg', svgToTwig);
-  watch('src/design-tokens/**/*.yml', theoToMdx);
+  watch('src/design-tokens/**/*.yml', theo);
 };

package.json

@@ -118,12 +118,12 @@
     "build-storybook": "npm run preprocess && build-storybook -s static",
     "preprocess": "run-p preprocess:*",
     "preprocess:svg-to-twig": "gulp svgToTwig",
-    "preprocess:theo-to-mdx": "gulp theoToMDX",
+    "preprocess:theo": "gulp theo",
     "watch-preprocess": "gulp watchPreprocess",
     "build:js": "gulp buildJS",
     "build:types": "npm run type && gulp buildTypes",
     "build:sass": "gulp buildSass",
-    "build": "npm run clean && run-p build:*",
+    "build": "run-s clean preprocess && run-p build:*",
     "clean": "eliminate dist",
     "type": "tsc",
     "type:watch": "tsc --watch",

tsconfig.json

@@ -16,5 +16,9 @@
     "skipLibCheck": true
   },
   "include": ["src", "cypress"],
-  "exclude": ["src/prototypes", "src/vendor/prism/demo/samples"]
+  "exclude": [
+    "src/prototypes",
+    "src/vendor/prism/demo/samples",
+    "src/design-tokens/generated"
+  ]
 }