Tokens: Add XFN Component Tokens

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

@@ -21,6 +21,14 @@ const filterColor = {
   },
 };
 
+const filterComponentToken = (component) => ({
+  'filter': {
+    'attributes': {
+      'category': `${component}`,
+    },
+  },
+});
+
 const filterRounding = {
   'filter': {
     'attributes': {
@@ -176,4 +184,5 @@ module.exports = {
   filterLineHeight,
   filterMotionDuration,
   filterMotionEasing,
+  filterComponentToken,
 };

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

@@ -1,3 +1,57 @@
+const fs = require('fs');
+
+const getListOfComponents = (theme) => {
+  try {
+    const folders = fs.readdirSync(`tokens/${theme}/comp`);
+
+    const components = folders.filter((file) => !file.includes('.json'));
+    return components;
+  } catch (ex) {
+    // if this fails, it means there are no components
+    // eslint-disable-next-line no-console
+    console.log(`No component tokens found for theme ${theme}`);
+    return [];
+  }
+};
+
+const filterComponentTokenFiles = (theme, components, prefix) =>
+  components
+    .map((component) => {
+      const files = fs.readdirSync(`tokens/${theme}/comp/${component}`);
+      return files
+        .filter((file) => file.startsWith(prefix))
+        .map((file) => `tokens/${theme}/comp/${component}/${file}`);
+    })
+    .flat();
+
+/**
+ * Gets the available files for component tokens
+ */
+function getComponentTokenSources(platform) {
+  const theme = 'vr-theme';
+  const components = getListOfComponents(theme);
+
+  const files = filterComponentTokenFiles(theme, components, 'default');
+
+  if (platform !== 'web') {
+    const mobileFiles = filterComponentTokenFiles(theme, components, 'mobile');
+    files.push(...mobileFiles);
+  }
+
+  return files;
+}
+
+/**
+ * Gets platform-specific component token files
+ * @param {*} platform - ios, android, web
+ * @returns
+ */
+function getComponentTokenOverrides(platform) {
+  const theme = 'vr-theme';
+  const components = getListOfComponents(theme);
+  return filterComponentTokenFiles(theme, components, platform);
+}
+
 function getSources({ theme, modeTheme, platform, language }) {
   if (theme === 'classic') {
     return [
@@ -32,6 +86,7 @@ function getSources({ theme, modeTheme, platform, language }) {
     `tokens/vr-theme/sema/color/${modeTheme}/default.json`,
     `tokens/vr-theme/sema/elevation/${modeTheme}.json`,
     'tokens/vr-theme/sema/text/font.json',
+    ...getComponentTokenSources(),
     ...(platform === 'web'
       ? [
           'tokens/vr-theme/base/color/pressed.json',
@@ -46,8 +101,6 @@ function getSources({ theme, modeTheme, platform, language }) {
     'tokens/vr-theme/sema/space.json',
     `tokens/vr-theme/sema/text/language/${language}.json`,
     'tokens/vr-theme/sema/motion.json',
-    'tokens/vr-theme/comp/spinner.json',
-    'tokens/vr-theme/comp/radiogroupbutton.json',
     ...(theme === 'vr-theme-web-mapping'
       ? [
           `tokens/vr-theme-web-mapping/base-color-dataviz-${modeTheme}.json`,
@@ -69,4 +122,7 @@ function getSources({ theme, modeTheme, platform, language }) {
 
 module.exports = {
   getSources,
+  getComponentTokenSources,
+  getComponentTokenOverrides,
+  getListOfComponents,
 };

packages/gestalt-design-tokens/src/platforms/android.js

@@ -1,5 +1,5 @@
-const { getSources } = require('../getSources');
 const { optionsFileHeaderOutputReferences } = require('../headers/fileheader');
+const { getSources, getComponentTokenOverrides, getListOfComponents } = require('../getSources');
 
 const {
   filterColor,
@@ -11,6 +11,7 @@ const {
   filterFontWeight,
   filterMotionDuration,
   filterMotionEasing,
+  filterComponentToken,
 } = require('../filters');
 
 const androidTransformGroup = {
@@ -34,7 +35,7 @@ const composeObject = {
   '_format_comment': 'https://amzn.github.io/style-dictionary/#/formats?id=composeobject',
 };
 
-const getFiles = ({ modeTheme, language }) => {
+const getFiles = ({ theme, modeTheme, language }) => {
   if (modeTheme === 'dark') {
     return [
       {
@@ -48,6 +49,18 @@ const getFiles = ({ modeTheme, language }) => {
 
   const files = [];
 
+  if (theme === 'vr-theme') {
+    // add component token files
+    getListOfComponents(theme).forEach((component) => {
+      files.push({
+        'destination': `component/${component}.xml`,
+        ...androidResources,
+        ...dimenResource,
+        ...filterComponentToken(component),
+      });
+    });
+  }
+
   if (language) {
     files.push({
       'destination': `font-lineheight-${language}.xml`,
@@ -115,11 +128,20 @@ const getFiles = ({ modeTheme, language }) => {
   return files.flat();
 };
 
+const getComponentTokenFiles = ({ theme }) => {
+  if (theme !== 'vr-theme') {
+    return [];
+  }
+
+  return getComponentTokenOverrides('android');
+};
+
 function getAndroidConfiguration({ theme, mode, language }) {
   const modeTheme = mode === 'dark' ? 'dark' : 'light';
 
   return {
-    'source': getSources({ theme, modeTheme, language }),
+    'include': getSources({ theme, modeTheme, language }),
+    'source': getComponentTokenFiles({ theme }),
     'platforms': {
       'android': {
         ...androidTransformGroup,

packages/gestalt-design-tokens/src/platforms/ios.js

@@ -1,8 +1,15 @@
 const { optionsFileHeader, optionsFileHeaderOutputReferences } = require('../headers/fileheader');
 
 const { getFilter } = require('../utils/getFilter');
-const { filterLineHeight, filterColor, filterElevation } = require('../filters');
-const { getSources } = require('../getSources');
+const {
+  filterLineHeight,
+  filterColor,
+  filterElevation,
+  filterComponentToken,
+} = require('../filters');
+const { getSources, getListOfComponents, getComponentTokenOverrides } = require('../getSources');
+
+const toPascal = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 
 function getTheme(theme) {
   return theme === 'vr-theme' ? 'VR' : '';
@@ -137,6 +144,18 @@ function getFiles({ theme, modeTheme, language, fileType }) {
     });
   }
 
+  if (theme === 'vr-theme') {
+    iOSSwiftFiles.push(
+      ...getListOfComponents(theme).map((component) => ({
+        'destination': `components/GestaltTokens${toPascal(component)}.swift`,
+        ...iosSwiftEnumSwift,
+        'className': `GestaltTokens${toPascal(component)}`,
+        ...filterComponentToken(component),
+        fileHeader: `// ${language} specific tokens`,
+      })),
+    );
+  }
+
   if (fileType === 'swift') {
     if (modeTheme === 'dark') {
       return [
@@ -196,11 +215,20 @@ function getFiles({ theme, modeTheme, language, fileType }) {
   return [];
 }
 
+const getComponentTokenFiles = ({ theme }) => {
+  if (theme !== 'vr-theme') {
+    return [];
+  }
+
+  return getComponentTokenOverrides('ios');
+};
+
 function getIOSConfiguration({ theme, mode, language }) {
   const modeTheme = mode === 'dark' ? 'dark' : 'light';
 
   return {
-    'source': getSources({ theme, modeTheme, language }),
+    'include': getSources({ theme, modeTheme, language }),
+    'source': getComponentTokenFiles({ theme }),
     'platforms': {
       'ios': {
         ...iOSTransformGroup,

packages/gestalt-design-tokens/src/platforms/web.js

@@ -1,5 +1,5 @@
-const { getSources } = require('../getSources');
 const { optionsFileHeader, optionsFileHeaderOutputReferences } = require('../headers/fileheader');
+const { getSources, getComponentTokenOverrides } = require('../getSources');
 const {
   dataVisualizationFilter,
   colorElevationFilter,
@@ -122,11 +122,20 @@ const getFiles = ({ theme, modeTheme, language, fileType }) => {
   return files.flat();
 };
 
+const getComponentTokenFiles = ({ theme }) => {
+  if (theme === 'classic') {
+    return [];
+  }
+
+  return getComponentTokenOverrides('web');
+};
+
 function getWebConfig({ theme, mode, language }) {
   const modeTheme = mode === 'dark' ? 'dark' : 'light';
 
   return {
-    'source': getSources({ theme, modeTheme, platform: 'web', language }),
+    'include': getSources({ theme, modeTheme, platform: 'web', language }),
+    'source': getComponentTokenFiles({ theme }),
     'platforms': {
       'css': {
         ...webCssTransformGroup,

packages/gestalt-design-tokens/tests/__snapshots__/android.test.js.snap

@@ -753,6 +753,25 @@ Object {
   <color name=\\"sema_color_dataviz_08\\">#ff400387</color>
   <color name=\\"sema_color_dataviz_09\\">#fff2681f</color>
 
+  </resources>
+",
+  "dist/android/vr-theme/component/radiogroupbutton.xml": "<?xml version=\\"1.0\\" encoding=\\"UTF-8\\"?>
+
+<resources>
+  <dimen name=\\"comp_radiogroupbutton_motion_border_scale_easing\\">@dimen/base_motion_easing_bounce</dimen>
+  <dimen name=\\"comp_radiogroupbutton_motion_border_scale_duration\\">@dimen/base_motion_duration_150</dimen>
+  <dimen name=\\"comp_radiogroupbutton_motion_border_fade_easing\\">@dimen/base_motion_easing_exit</dimen>
+  <dimen name=\\"comp_radiogroupbutton_motion_border_fade_duration\\">@dimen/base_motion_duration_150</dimen>
+
+  </resources>
+",
+  "dist/android/vr-theme/component/spinner.xml": "<?xml version=\\"1.0\\" encoding=\\"UTF-8\\"?>
+
+<resources>
+  <dimen name=\\"comp_spinner_color_background_pink\\">#d452d1</dimen>
+  <dimen name=\\"comp_spinner_color_background_orange\\">#ff7c36</dimen>
+  <dimen name=\\"comp_spinner_color_background_blue\\">#24ccb0</dimen>
+
   </resources>
 ",
   "dist/android/vr-theme/font-lineheight-ck.xml": "<?xml version=\\"1.0\\" encoding=\\"UTF-8\\"?>

packages/gestalt-design-tokens/tests/__snapshots__/dist.test.js.snap

@@ -11,6 +11,8 @@ Array [
   "dist/android/classic/space.xml",
   "dist/android/vr-theme/color-dark.xml",
   "dist/android/vr-theme/colors-light.xml",
+  "dist/android/vr-theme/component/radiogroupbutton.xml",
+  "dist/android/vr-theme/component/spinner.xml",
   "dist/android/vr-theme/font-lineheight-ck.xml",
   "dist/android/vr-theme/font-lineheight-default.xml",
   "dist/android/vr-theme/font-lineheight-ja.xml",
@@ -178,5 +180,7 @@ Array [
   "dist/ios-swift/vr-theme/GestaltTokensOpacityVR.swift",
   "dist/ios-swift/vr-theme/GestaltTokensRoundingVR.swift",
   "dist/ios-swift/vr-theme/GestaltTokensSpaceVR.swift",
+  "dist/ios-swift/vr-theme/components/GestaltTokensRadiogroupbutton.swift",
+  "dist/ios-swift/vr-theme/components/GestaltTokensSpinner.swift",
 ]
 `;

packages/gestalt-design-tokens/tests/__snapshots__/ios.test.js.snap

@@ -1294,6 +1294,31 @@ public enum GestaltTokensSpaceVR {
     public static let sema0 = 0px
     public static let baseUnit = 4px
 }
+",
+  "dist/ios-swift/vr-theme/components/GestaltTokensRadiogroupbutton.swift": "
+
+
+
+import SwiftUI
+
+public enum GestaltTokensRadiogroupbutton {
+    public static let compMotionBorderFadeDuration = baseDuration150
+    public static let compMotionBorderFadeEasing = baseEasingExit
+    public static let compMotionBorderScaleDuration = baseDuration150
+    public static let compMotionBorderScaleEasing = baseEasingBounce
+}
+",
+  "dist/ios-swift/vr-theme/components/GestaltTokensSpinner.swift": "
+
+
+
+import SwiftUI
+
+public enum GestaltTokensSpinner {
+    public static let compColorBackgroundBlue = #24ccb0
+    public static let compColorBackgroundOrange = #ff7c36
+    public static let compColorBackgroundPink = #d452d1
+}
 ",
 }
 `;

packages/gestalt-design-tokens/tokens/vr-theme/$metadata.json

@@ -26,6 +26,11 @@
     "sema/text/language/vi",
     "sema/text/font",
     "sema/text/typography",
-    "sema/motion"
+    "sema/motion",
+    "comp/badge/default",
+    "comp/badge/mobile",
+    "comp/badge/ios",
+    "comp/badge/android",
+    "comp/badge/web"
   ]
 }