Tokens: Refactor Token Build Script (#3786)

Co-authored-by: Aaron Shapiro <[email protected]>

packages/gestalt-design-tokens/package.json

@@ -28,9 +28,9 @@
     "gestalt": ">0.0.0"
   },
   "scripts": {
-    "build": "rm -rf dist && node build.js",
-    "build:prod": "NODE_ENV=production node build.js",
-    "watch": "nodemon build.js",
+    "build": "rm -rf dist && node src/build.js",
+    "build:prod": "NODE_ENV=production node src/build.js",
+    "watch": "nodemon src/build.js",
     "test": "rm -rf dist && yarn build && jest --testPathPattern=tests",
     "update-tests": "yarn build && jest --testPathPattern=tests --updateSnapshot && cd .. && jest --update-snapshot -- \"ColorScheme\""
   },

packages/gestalt-design-tokens/src/build.js

@@ -0,0 +1,52 @@
+const StyleDictionary = require('style-dictionary');
+
+const { registerTokenTransformGroups } = require('./transformers/transformGroups');
+const { registerTokenTransforms } = require('./transformers/transforms');
+const { registerTokenFilters } = require('./filters');
+const { getWebConfig } = require('./platforms/web');
+const { getAndroidConfiguration } = require('./platforms/android');
+const { getIOSConfiguration } = require('./platforms/ios');
+const { registerWebFormats } = require('./formatters/registerWebFormats');
+const { registerFileHeaders } = require('./headers/fileheader');
+
+const platformFileMap = {
+  web: ['css', 'json', 'js'],
+  android: ['android'],
+  ios: ['ios', 'ios-swift'],
+};
+
+registerFileHeaders(StyleDictionary);
+registerWebFormats(StyleDictionary);
+registerTokenFilters(StyleDictionary);
+registerTokenTransforms(StyleDictionary);
+registerTokenTransformGroups(StyleDictionary);
+
+['classic', 'vr-theme', 'vr-theme-web-mapping'].forEach((theme) =>
+  ['light', 'dark'].forEach((mode) => {
+    // THIS NEEDS A CLEANUP BUT INTERIM SOLUTION 'default' MUST BE LAST
+    ['ck', 'ja', 'tall', 'th', 'vi', 'default'].forEach((lang) => {
+      // only generate languages for the vr-themes
+      const language = theme === 'vr-theme' || theme === 'vr-theme-web-mapping' ? lang : undefined;
+
+      // iOS platform
+      if (theme !== 'vr-theme-web-mapping') {
+        const StyleDictionaryIOS = StyleDictionary.extend(
+          getIOSConfiguration({ mode, theme, language }),
+        );
+        platformFileMap.ios.forEach((platform) => StyleDictionaryIOS.buildPlatform(platform));
+
+        // // Android platform
+        const StyleDictionaryAndroid = StyleDictionary.extend(
+          getAndroidConfiguration({ mode, theme, language }),
+        );
+        platformFileMap.android.forEach((platform) =>
+          StyleDictionaryAndroid.buildPlatform(platform),
+        );
+      }
+
+      // web platform
+      const StyleDictionaryWeb = StyleDictionary.extend(getWebConfig({ mode, theme, language }));
+      platformFileMap.web.forEach((platform) => StyleDictionaryWeb.buildPlatform(platform));
+    });
+  }),
+);

packages/gestalt-design-tokens/src/filters.js

@@ -0,0 +1,179 @@
+const dataVisualizationFilter = {
+  'filter': 'dataVisualizationFilter',
+  '_filter_comment': 'Custom',
+};
+
+const semaLineHeightFilter = {
+  'filter': 'semaLineHeightFilter',
+  '_filter_comment': 'Custom filter for semantic lineheight tokens',
+};
+
+const colorElevationFilter = {
+  'filter': 'colorElevationFilter',
+  '_filter_comment': 'Custom',
+};
+
+const filterColor = {
+  'filter': {
+    'attributes': {
+      'category': 'color',
+    },
+  },
+};
+
+const filterRounding = {
+  'filter': {
+    'attributes': {
+      'category': 'rounding',
+    },
+  },
+};
+
+const filterOpacity = {
+  'filter': {
+    'attributes': {
+      'category': 'opacity',
+    },
+  },
+};
+
+const filterSpace = {
+  'filter': {
+    'attributes': {
+      'category': 'space',
+    },
+  },
+};
+
+const filterElevation = {
+  'filter': {
+    'attributes': {
+      'category': 'elevation',
+    },
+  },
+};
+
+const filterFontWeight = {
+  'filter': {
+    'attributes': {
+      'category': 'font',
+      'type': 'weight',
+    },
+  },
+};
+
+const filterFontSize = {
+  'filter': {
+    'attributes': {
+      'category': 'font',
+      'type': 'size',
+    },
+  },
+};
+
+const filterFontFamily = {
+  'filter': {
+    'attributes': {
+      'category': 'font',
+      'type': 'family',
+    },
+  },
+};
+
+const filterLineHeight = {
+  'filter': {
+    'attributes': {
+      'category': 'font',
+      'type': 'lineheight',
+    },
+  },
+};
+
+const filterMotionDuration = {
+  'filter': 'filterMotionDuration',
+  '_filter_comment': 'Custom',
+};
+
+const filterMotionEasing = {
+  'filter': 'filterMotionEasing',
+  '_filter_comment': 'Custom',
+};
+
+/**
+ * registers any filters
+ * @param {*} sd - StyleDictionary root
+ */
+function registerTokenFilters(sd) {
+  // Filters only tokens with dark theme values
+  sd.registerFilter({
+    name: 'colorElevationFilter',
+    matcher(token) {
+      return token.attributes.category === 'color' || token.attributes.category === 'elevation';
+    },
+  });
+
+  // Filters only tokens with data-visualization
+  sd.registerFilter({
+    name: 'dataVisualizationFilter',
+    matcher(token) {
+      return (
+        token.attributes.category === 'color' &&
+        ['data-visualization', 'dataviz', 'datavizbase'].includes(token.attributes.type)
+      );
+    },
+  });
+
+  // Filters only to semantic line-height tokens
+  sd.registerFilter({
+    name: 'semaLineHeightFilter',
+    matcher(token) {
+      return (
+        token.attributes.category === 'font' &&
+        token.attributes.type === 'lineheight' &&
+        !token.name.startsWith('Base')
+      );
+    },
+  });
+
+  sd.registerFilter({
+    name: 'filterMotionDuration',
+    matcher(token) {
+      return (
+        token.attributes.category === 'motion' &&
+        (token.attributes.type === 'duration' ||
+          token.attributes.item === 'duration' ||
+          token.attributes.subitem === 'duration')
+      );
+    },
+  });
+
+  sd.registerFilter({
+    name: 'filterMotionEasing',
+    matcher(token) {
+      return (
+        token.attributes.category === 'motion' &&
+        (token.attributes.type === 'easing' ||
+          token.attributes.item === 'easing' ||
+          token.attributes.subitem === 'easing')
+      );
+    },
+  });
+}
+
+module.exports = {
+  dataVisualizationFilter,
+  semaLineHeightFilter,
+  colorElevationFilter,
+  registerTokenFilters,
+  filterColor,
+  filterRounding,
+  filterOpacity,
+  filterSpace,
+  filterElevation,
+  filterFontWeight,
+  filterFontSize,
+  filterFontFamily,
+  filterLineHeight,
+  filterMotionDuration,
+  filterMotionEasing,
+};