feat: transform to expected values for web

build.js

@@ -0,0 +1,80 @@
+#!/usr/bin/env node
+
+const StyleDictionary = require('style-dictionary').extend('config.js');
+
+// Identifiers
+const SIZE_IDENTIFIERS = ['fontSizes', 'fontSize', 'sizing', 'borderWidth', 'borderRadius', 'blur', 'spread', 'x', 'y'];
+const WEIGHT_IDENTIFIERS = ['fontWeights', 'fontWeight'];
+const FONT_FAMILY_IDENTIFIERS = ['fontFamilies']
+
+// Values
+const FALLBACK_FONTS = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+const FALLBACK_FONTS_MONO = "SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace";
+const BASE_FONT_SIZE = 15.0;
+const WEIGHT = {
+  'Light': 300,
+  'Regular': 400,
+  'Medium': 500,
+  'Semibold': 600,
+  'Bold': 700,
+}
+
+function getBasePxFontSize(options) {
+  return (options && options.basePxFontSize) || BASE_FONT_SIZE;
+}
+
+function throwSizeError(name, value, unitType) {
+  throw `Invalid Number: '${name}: ${value}' is not a valid number, cannot transform to '${unitType}' \n`;
+}
+
+StyleDictionary.registerTransform({
+  name: 'dt/fonts/weight',
+  type: 'value',
+  matcher: function(token) {
+    return WEIGHT_IDENTIFIERS.includes(token.type)
+  },
+  transformer: (token, options) => {
+    return WEIGHT[token.value] ?? token.value
+  }
+});
+
+StyleDictionary.registerTransform({
+  name: 'dt/fonts/transformToStack',
+  type: 'value',
+  matcher: function(token) {
+    return FONT_FAMILY_IDENTIFIERS.includes(token.type)
+  },
+  transformer: (token, options) => {
+    if (token.name === 'body' || token.value === 'expressive') {
+      return `${token.value}, ${FALLBACK_FONTS}`
+    }
+    else if (token.name === 'mono') {
+      return `${token.value}, ${FALLBACK_FONTS_MONO}`
+    }
+    return token.value;
+  }
+});
+
+StyleDictionary.registerTransform({
+  name: 'dt/size/pxToRem',
+  type: 'value',
+  matcher: function(token) {
+    return SIZE_IDENTIFIERS.includes(token.type)
+  },
+  transformer: (token, options) => {
+    const baseFont = getBasePxFontSize(options);
+    const floatVal = parseFloat(token.value);
+
+    if (isNaN(floatVal)) {
+      throwSizeError(token.name, token.value, 'rem');
+    }
+
+    if (floatVal === 0) {
+      return '0';
+    }
+
+    return `${floatVal / baseFont}rem`;
+  }
+});
+
+StyleDictionary.buildAllPlatforms();

config.js

@@ -2,7 +2,7 @@ module.exports = {
   source: ['tokens/**/*.json'],
   platforms: {
     less: {
-      transformGroup: 'less',
+      transforms: ['dt/size/pxToRem', 'dt/fonts/transformToStack', 'dt/fonts/weight', 'attribute/cti', 'name/cti/kebab', 'time/seconds', 'content/icon', 'color/hex'],
       prefix: 'dt',
       buildPath: 'dist/less/',
       files: [
@@ -13,7 +13,7 @@ module.exports = {
       ],
     },
     css: {
-      transformGroup: 'css',
+      transforms: ['dt/size/pxToRem', 'dt/fonts/transformToStack', 'dt/fonts/weight', 'attribute/cti', 'name/cti/kebab', 'time/seconds', 'content/icon', 'size/rem', 'color/css'],
       prefix: 'dt',
       buildPath: 'dist/css/',
       files: [
@@ -60,7 +60,7 @@ module.exports = {
     json: {
       prefix: 'dt',
       buildPath: 'dist/',
-      transforms: ['name/cti/camel'],
+      transforms: ['dt/size/pxToRem', 'dt/fonts/transformToStack', 'dt/fonts/weight', 'name/cti/camel'],
       files: [
         {
           destination: 'tokens.json',

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "npm run transform && style-dictionary build",
+    "build": "npm run transform && ./build.js",
     "transform": "token-transformer base.json tokens/tokens.json --expandTypography=true --expandShadow=true",
     "prepublishOnly": "npm run build",
     "release": "semantic-release --no-ci --extends ./release-local.config.js"