@workday/canvas-kit-codemod 15.0.0-alpha.1301-next.0 → 15.0.0-alpha.1326-next.0

package/dist/es6/v13.2/mapping/index.d.ts

@@ -1,8 +1,66 @@
+export declare const paletteNames: string[];
 export declare const mapping: {
     readonly colors: {
         readonly type: "base";
         readonly name: "colors";
     };
+    readonly commonColors: {
+        readonly type: "system";
+        readonly name: "commonColors";
+        readonly keys: {
+            readonly background: "system.color.bg.default";
+            readonly backgroundAlt: "system.color.bg.alt.default";
+            readonly focusOutline: "system.color.border.primary.default";
+            readonly focusBackground: "system.color.bg.primary.default";
+            readonly hoverBackground: "system.color.bg.alt.strong";
+            readonly divider: "system.color.border.divider";
+        };
+    };
+    readonly inputColors: {
+        readonly type: "system";
+        readonly name: "inputColors";
+        readonly keys: {
+            readonly background: "system.color.bg.default";
+            readonly border: "system.color.border.input.default";
+            readonly placeholder: "system.color.fg.muted.default";
+            readonly text: "system.color.fg.default";
+            readonly icon: "system.color.fg.muted.soft";
+            readonly iconHover: "system.color.fg.muted.stronger";
+            readonly selectionControlFill: "system.color.bg.primary.default";
+            readonly hoverBorder: "system.color.border.input.strong";
+            readonly focusBorder: "system.color.border.primary.default";
+            readonly disabled: {
+                readonly background: "system.color.bg.alt.softer";
+                readonly border: "system.color.border.input.strong";
+                readonly text: "system.color.fg.disabled";
+                readonly icon: "system.color.fg.disabled";
+            };
+            readonly error: {
+                readonly border: "system.color.border.critical.default";
+                readonly message: "system.color.fg.critical.default";
+                readonly icon: "system.color.fg.critical.default";
+            };
+            readonly alert: {
+                readonly border: "system.color.border.caution.default";
+                readonly message: "system.color.fg.caution.default";
+                readonly icon: "system.color.fg.caution.default";
+            };
+        };
+    };
+    readonly typeColors: {
+        readonly type: "system";
+        readonly name: "typeColors";
+        readonly keys: {
+            readonly body: "system.color.fg.default";
+            readonly heading: "system.color.fg.strong";
+            readonly hint: "system.color.fg.muted.soft";
+            readonly inverse: "system.color.fg.inverse";
+            readonly label: "system.color.fg.default";
+            readonly link: "system.color.fg.primary.default";
+            readonly selectHighlight: "system.color.fg.primary.default";
+            readonly selectHighlightInverse: "system.color.fg.inverse";
+        };
+    };
     readonly borderRadius: {
         readonly name: "shape";
         readonly type: "system";
@@ -215,7 +273,7 @@ export declare const systemColors: {
         licorice400: string;
         licorice500: string;
     };
-    'border,borderColor,borderTopColor,borderRightColor,borderBottomColor,borderLeftColor,borderInline,borderInlineStart,borderInlineEnd,borderBlock,borderBlockStart,borderBlockEnd,borderInlineColor,borderBlockColor,borderInlineStartColor,borderInlineEndColor,borderBlockStartColor,borderBlockEndColor,borderColorFocus,borderColorHover,borderColorActive': {
+    'border,borderColor,borderTop,borderTopColor,borderRight,borderRightColor,borderBottom,borderBottomColor,borderLeft,borderLeftColor,borderInlineColor,borderBlockColor,borderInline,borderInlineStart,borderInlineStartColor,borderInlineEnd,borderInlineEndColor,borderBlockStart,borderBlockStartColor,borderBlockEnd,borderBlockEndColor,borderColorFocus,borderColorHover,borderColorActive': {
         blackPepper400: string;
         blackPepper500: string;
         blueberry400: string;

package/dist/es6/v13.2/mapping/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../lib/v13.2/mapping/index.ts"],"names":[],"mappings":"AAqFA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyBV,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DxB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../lib/v13.2/mapping/index.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,UA6BxB,CAAC;AAqFF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFV,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DxB,CAAC"}

package/dist/es6/v13.2/mapping/index.js

@@ -1,4 +1,34 @@
 import { generateLevelTokens } from '../utils/generateLevelTokens';
+export const paletteNames = [
+    'cinnamon',
+    'peach',
+    'chiliMango',
+    'cantaloupe',
+    'sourLemon',
+    'juicyPear',
+    'kiwi',
+    'greenApple',
+    'watermelon',
+    'jewel',
+    'toothpaste',
+    'blueberry',
+    'plum',
+    'berrySmoothie',
+    'blackberry',
+    'islandPunch',
+    'grapeSoda',
+    'pomegranate',
+    'fruitPunch',
+    'rootBeer',
+    'toastedMarshmallow',
+    'licorice',
+    'soap',
+    'frenchVanilla',
+    'blackPepper',
+    'coconut',
+    'cappuccino',
+    'dragonFruit',
+];
 const typeLevelsMap = {
     subtext: {
         small: generateLevelTokens(['subtext', 'small']),
@@ -83,6 +113,63 @@ export const mapping = {
         type: 'base',
         name: 'colors',
     },
+    commonColors: {
+        type: 'system',
+        name: 'commonColors',
+        keys: {
+            background: 'system.color.bg.default',
+            backgroundAlt: 'system.color.bg.alt.default',
+            focusOutline: 'system.color.border.primary.default',
+            focusBackground: 'system.color.bg.primary.default',
+            hoverBackground: 'system.color.bg.alt.strong',
+            divider: 'system.color.border.divider',
+        },
+    },
+    inputColors: {
+        type: 'system',
+        name: 'inputColors',
+        keys: {
+            background: 'system.color.bg.default',
+            border: 'system.color.border.input.default',
+            placeholder: 'system.color.fg.muted.default',
+            text: 'system.color.fg.default',
+            icon: 'system.color.fg.muted.soft',
+            iconHover: 'system.color.fg.muted.stronger',
+            selectionControlFill: 'system.color.bg.primary.default',
+            hoverBorder: 'system.color.border.input.strong',
+            focusBorder: 'system.color.border.primary.default',
+            disabled: {
+                background: 'system.color.bg.alt.softer',
+                border: 'system.color.border.input.strong',
+                text: 'system.color.fg.disabled',
+                icon: 'system.color.fg.disabled',
+            },
+            error: {
+                border: 'system.color.border.critical.default',
+                message: 'system.color.fg.critical.default',
+                icon: 'system.color.fg.critical.default',
+            },
+            alert: {
+                border: 'system.color.border.caution.default',
+                message: 'system.color.fg.caution.default',
+                icon: 'system.color.fg.caution.default',
+            },
+        },
+    },
+    typeColors: {
+        type: 'system',
+        name: 'typeColors',
+        keys: {
+            body: 'system.color.fg.default',
+            heading: 'system.color.fg.strong',
+            hint: 'system.color.fg.muted.soft',
+            inverse: 'system.color.fg.inverse',
+            label: 'system.color.fg.default',
+            link: 'system.color.fg.primary.default',
+            selectHighlight: 'system.color.fg.primary.default',
+            selectHighlightInverse: 'system.color.fg.inverse',
+        },
+    },
     borderRadius: {
         name: 'shape',
         type: 'system',
@@ -148,7 +235,7 @@ export const systemColors = {
         licorice400: 'system.color.fg.muted.strong',
         licorice500: 'system.color.fg.muted.stronger',
     },
-    'border,borderColor,borderTopColor,borderRightColor,borderBottomColor,borderLeftColor,borderInline,borderInlineStart,borderInlineEnd,borderBlock,borderBlockStart,borderBlockEnd,borderInlineColor,borderBlockColor,borderInlineStartColor,borderInlineEndColor,borderBlockStartColor,borderBlockEndColor,borderColorFocus,borderColorHover,borderColorActive': {
+    'border,borderColor,borderTop,borderTopColor,borderRight,borderRightColor,borderBottom,borderBottomColor,borderLeft,borderLeftColor,borderInlineColor,borderBlockColor,borderInline,borderInlineStart,borderInlineStartColor,borderInlineEnd,borderInlineEndColor,borderBlockStart,borderBlockStartColor,borderBlockEnd,borderBlockEndColor,borderColorFocus,borderColorHover,borderColorActive': {
         blackPepper400: 'system.color.border.contrast.default',
         blackPepper500: 'system.color.border.contrast.strong',
         blueberry400: 'system.color.border.primary.default',

package/dist/es6/v13.2/migrateColorTokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"migrateColorTokens.d.ts","sourceRoot":"","sources":["../../../lib/v13.2/migrateColorTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAC,MAAM,aAAa,CAAC;AAQlD,QAAA,MAAM,SAAS,EAAE,SAuFhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"migrateColorTokens.d.ts","sourceRoot":"","sources":["../../../lib/v13.2/migrateColorTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAC,MAAM,aAAa,CAAC;AAkBlD,QAAA,MAAM,SAAS,EAAE,SAsKhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/es6/v13.2/migrateColorTokens.js

@@ -1,6 +1,10 @@
-import { addMissingImports, filterOutImports, transformObjectPropertyRecursively } from './utils';
-import { mapping } from './mapping';
-const canvasImportSources = ['@workday/canvas-kit-styling', '@workday/canvas-kit-react/tokens'];
+import { addMissingImports, filterOutImports, getImports, transformObjectPropertyRecursively, varToMemberExpression, } from './utils';
+import { mapping, paletteNames } from './mapping';
+const canvasImportSources = [
+    '@workday/canvas-kit-styling',
+    '@workday/canvas-kit-react/tokens',
+    '@workday/canvas-colors-web',
+];
 const transform = (file, api) => {
     const j = api.jscodeshift;
     const root = j(file.source);
@@ -11,7 +15,7 @@ const transform = (file, api) => {
         source: { value: (value) => canvasImportSources.includes(value) },
     })
         .forEach(nodePath => {
-        importDeclaration = { ...importDeclaration, ...filterOutImports(nodePath) };
+        importDeclaration = { ...importDeclaration, ...getImports(nodePath) };
     });
     if (!Object.values(importDeclaration).includes('colors')) {
         return root.toSource();
@@ -26,7 +30,7 @@ const transform = (file, api) => {
         const name = nodePath.value.callee.name;
         const stylesDeclaration = nodePath.value.arguments[0];
         const isCanvasKitStyling = importDeclaration[name] === 'createStyles' || importDeclaration[name] === 'createStencil';
-        if (stylesDeclaration.type === 'ObjectExpression') {
+        if ((stylesDeclaration === null || stylesDeclaration === void 0 ? void 0 : stylesDeclaration.type) === 'ObjectExpression') {
             stylesDeclaration.properties = stylesDeclaration.properties.map((prop) => transformObjectPropertyRecursively({ j, root }, prop, importDeclaration, isCanvasKitStyling));
         }
     });
@@ -35,21 +39,61 @@ const transform = (file, api) => {
     });
     root
         .find(j.MemberExpression, (value) => {
-        return (value.type === 'MemberExpression' &&
-            ((value.object.type === 'MemberExpression' &&
-                value.object.object.type === 'MemberExpression' &&
-                checkImport(value.object.object.object.name)) ||
-                checkImport(value.object.name)));
+        // Matches: commonColors.background
+        const isTwoParts = value.type === 'MemberExpression' &&
+            value.object.type === 'Identifier' &&
+            checkImport(value.object.name);
+        // Matches: inputColors.disabled.border
+        const isThreeParts = value.type === 'MemberExpression' &&
+            value.object.type === 'MemberExpression' &&
+            value.object.object.type === 'Identifier' &&
+            checkImport(value.object.object.name);
+        return isTwoParts || isThreeParts;
     })
         .replaceWith(nodePath => {
+        var _a;
         const mainWrapper = nodePath.value.object;
-        if (mainWrapper.type === 'Identifier' && importDeclaration[mainWrapper.name] !== 'type') {
+        if (mainWrapper.type === 'MemberExpression') {
+            const mainObject = mainWrapper.object;
+            const mainName = mainObject.type === 'Identifier' ? mainObject.name : '';
+            const mainProperty = mainWrapper.property;
+            const lowestProperty = nodePath.value.property;
+            const importedName = importDeclaration[mainName];
+            const map = mapping[importedName];
+            if ((map === null || map === void 0 ? void 0 : map.type) === 'system' &&
+                importedName &&
+                importedName.toLowerCase().includes('colors') &&
+                mainProperty.type === 'Identifier' &&
+                lowestProperty.type === 'Identifier') {
+                const innerGroup = map.keys[mainProperty.name] || {};
+                const token = innerGroup[lowestProperty.name];
+                if (token) {
+                    addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
+                    addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
+                    return j.callExpression(j.identifier('cssVar'), [varToMemberExpression(j, token)]);
+                }
+            }
+        }
+        if (mainWrapper.type === 'Identifier' &&
+            ((_a = importDeclaration[mainWrapper.name]) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes('colors'))) {
             const mainObject = mainWrapper;
             const mainName = mainObject.name;
             const lowestProperty = nodePath.value.property;
             const importedName = importDeclaration[mainName];
             const map = mapping[importedName];
-            if (map.type === 'base' && lowestProperty.type === 'Identifier') {
+            if ((map === null || map === void 0 ? void 0 : map.type) === 'system' &&
+                lowestProperty.type === 'Identifier' &&
+                importedName !== 'inputColors') {
+                const token = map.keys[lowestProperty.name];
+                if (token && typeof token === 'string') {
+                    addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
+                    addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
+                    return j.callExpression(j.identifier('cssVar'), [varToMemberExpression(j, token)]);
+                }
+            }
+            if ((map === null || map === void 0 ? void 0 : map.type) === 'base' &&
+                lowestProperty.type === 'Identifier' &&
+                paletteNames.some(name => lowestProperty.name.includes(name))) {
                 addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['base'] });
                 addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
                 return j.callExpression(j.identifier('cssVar'), [
@@ -57,7 +101,14 @@ const transform = (file, api) => {
                 ]);
             }
         }
-        return nodePath;
+        return nodePath.value;
+    });
+    root
+        .find(j.ImportDeclaration, {
+        source: { value: (value) => canvasImportSources.includes(value) },
+    })
+        .forEach(nodePath => {
+        filterOutImports({ root, j }, nodePath, 'colors');
     });
     return root.toSource();
 };

package/dist/es6/v13.2/migrateDepthTokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"migrateDepthTokens.d.ts","sourceRoot":"","sources":["../../../lib/v13.2/migrateDepthTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAOtC,QAAA,MAAM,SAAS,EAAE,SAoKhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"migrateDepthTokens.d.ts","sourceRoot":"","sources":["../../../lib/v13.2/migrateDepthTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAatC,QAAA,MAAM,SAAS,EAAE,SAqLhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/es6/v13.2/migrateDepthTokens.js

@@ -1,5 +1,10 @@
-import { addMissingImports, filterOutImports } from './utils';
-const canvasImportSources = ['@workday/canvas-kit-styling', '@workday/canvas-kit-react/tokens'];
+import { addMissingImports, filterOutImports, getImports } from './utils';
+const canvasImportSources = [
+    '@workday/canvas-kit-styling',
+    '@workday/canvas-kit-react/tokens',
+    '@workday/canvas-depth-web',
+];
+const depthValues = ['0', '1', '2', '3', '4', '5', '6'];
 const transform = (file, api) => {
     const j = api.jscodeshift;
     const root = j(file.source);
@@ -10,7 +15,7 @@ const transform = (file, api) => {
         source: { value: (value) => canvasImportSources.includes(value) },
     })
         .forEach(nodePath => {
-        importDeclaration = { ...importDeclaration, ...filterOutImports(nodePath) };
+        importDeclaration = { ...importDeclaration, ...getImports(nodePath) };
     });
     if (!Object.values(importDeclaration).includes('depth')) {
         return root.toSource();
@@ -21,28 +26,31 @@ const transform = (file, api) => {
             type: 'MemberExpression',
             object: {
                 type: 'Identifier',
-                name: 'depth',
+                name: (name) => importDeclaration[name] === 'depth',
             },
             property: {
-                type: 'NumericLiteral',
+                type: (type) => type === 'NumericLiteral' || type === 'StringLiteral',
+                value: (value) => ['0', '1', '2', '3', '4', '5', '6'].includes(`${value}`),
             },
         },
     })
         .replaceWith(nodePath => {
         const argument = nodePath.value.argument;
-        if (argument.type === 'MemberExpression' && argument.property.type === 'NumericLiteral') {
+        if (argument.type === 'MemberExpression' &&
+            (argument.property.type === 'NumericLiteral' || argument.property.type === 'StringLiteral')) {
             const depthValue = argument.property.value;
+            const isDepthNotZero = `${depthValue}` !== '0';
             addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
-            if (depthValue > 0) {
+            if (isDepthNotZero) {
                 addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
             }
-            return depthValue > 0
-                ? j.objectProperty(j.identifier('boxShadow'), j.callExpression(j.identifier('cssVar'), [
-                    j.memberExpression(j.memberExpression(j.identifier('system'), j.identifier('depth')), j.numericLiteral(depthValue), true),
-                ]))
-                : j.objectProperty(j.identifier('boxShadow'), j.literal('none'));
+            return j.objectProperty(j.identifier('boxShadow'), isDepthNotZero
+                ? j.callExpression(j.identifier('cssVar'), [
+                    j.memberExpression(j.memberExpression(j.identifier('system'), j.identifier('depth')), j.numericLiteral(parseInt(`${depthValue}`, 10)), true),
+                ])
+                : j.literal('none'));
         }
-        return nodePath;
+        return nodePath.value;
     });
     root
         .find(j.MemberExpression, (value) => {
@@ -53,19 +61,22 @@ const transform = (file, api) => {
         .replaceWith(nodePath => {
         if (nodePath.value.object.type === 'MemberExpression' &&
             nodePath.value.object.object.type === 'Identifier' &&
-            nodePath.value.object.property.type === 'NumericLiteral') {
+            (nodePath.value.object.property.type === 'NumericLiteral' ||
+                (nodePath.value.object.property.type === 'StringLiteral' &&
+                    depthValues.includes(nodePath.value.object.property.value)))) {
             const value = nodePath.value.object.property.value;
-            if (value.toString() !== '0') {
+            const isNotZero = `${value}` !== '0';
+            if (isNotZero) {
                 addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
                 addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
             }
-            return value.toString() === '0'
+            return !isNotZero
                 ? j.literal('none')
                 : j.callExpression(j.identifier('cssVar'), [
-                    j.memberExpression(j.memberExpression(j.identifier('system'), j.identifier('depth')), j.numericLiteral(value), true),
+                    j.memberExpression(j.memberExpression(j.identifier('system'), j.identifier('depth')), j.numericLiteral(parseInt(`${value}`, 10)), true),
                 ]);
         }
-        return nodePath;
+        return nodePath.value;
     });
     root
         .find(j.MemberExpression, (value) => {
@@ -77,13 +88,11 @@ const transform = (file, api) => {
     })
         .replaceWith(nodePath => {
         const mainWrapper = nodePath.value.object;
-        if (mainWrapper.type === 'Identifier' && importDeclaration[mainWrapper.name] !== 'type') {
-            const mainObject = mainWrapper;
-            const mainName = mainObject.name;
+        if (mainWrapper.type === 'Identifier' && importDeclaration[mainWrapper.name] === 'depth') {
             const lowestProperty = nodePath.value.property;
-            const importedName = importDeclaration[mainName];
-            if (importedName === 'depth' && lowestProperty.type === 'NumericLiteral') {
-                const isZero = lowestProperty.value.toString() === '0';
+            if (lowestProperty.type === 'NumericLiteral' ||
+                (lowestProperty.type === 'StringLiteral' && depthValues.includes(lowestProperty.value))) {
+                const isZero = `${lowestProperty.value}` === '0';
                 if (!isZero) {
                     addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
                     addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
@@ -92,12 +101,19 @@ const transform = (file, api) => {
                     j.property('init', j.identifier('boxShadow'), isZero
                         ? j.literal('none')
                         : j.callExpression(j.identifier('cssVar'), [
-                            j.memberExpression(j.memberExpression(j.identifier('system'), j.identifier('depth')), j.numericLiteral(lowestProperty.value), true),
+                            j.memberExpression(j.memberExpression(j.identifier('system'), j.identifier('depth')), j.numericLiteral(parseInt(`${lowestProperty.value}`, 10)), true),
                         ])),
                 ]);
             }
         }
-        return nodePath;
+        return nodePath.value;
+    });
+    root
+        .find(j.ImportDeclaration, {
+        source: { value: (value) => canvasImportSources.includes(value) },
+    })
+        .forEach(nodePath => {
+        filterOutImports({ root, j }, nodePath, 'depth');
     });
     return root.toSource();
 };

package/dist/es6/v13.2/migrateOtherTokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"migrateOtherTokens.d.ts","sourceRoot":"","sources":["../../../lib/v13.2/migrateOtherTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,SAAS,EAAC,MAAM,aAAa,CAAC;AAQpE,QAAA,MAAM,SAAS,EAAE,SA4KhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"migrateOtherTokens.d.ts","sourceRoot":"","sources":["../../../lib/v13.2/migrateOtherTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAC,MAAM,aAAa,CAAC;AAmBlD,QAAA,MAAM,SAAS,EAAE,SAgHhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/es6/v13.2/migrateOtherTokens.js

@@ -1,6 +1,11 @@
-import { addMissingImports, filterOutImports, varToMemberExpression } from './utils';
-import { mapping, systemColors } from './mapping';
-const canvasImportSources = ['@workday/canvas-kit-styling', '@workday/canvas-kit-react/tokens'];
+import { addMissingImports, filterOutImports, getImports, transformObjectPropertyRecursively, } from './utils';
+import { mapping } from './mapping';
+const canvasImportSources = [
+    '@workday/canvas-kit-styling',
+    '@workday/canvas-kit-react/tokens',
+    '@workday/canvas-space-web',
+];
+const tokens = ['space', 'borderRadius'];
 const transform = (file, api) => {
     const j = api.jscodeshift;
     const root = j(file.source);
@@ -11,9 +16,12 @@ const transform = (file, api) => {
         source: { value: (value) => canvasImportSources.includes(value) },
     })
         .forEach(nodePath => {
-        importDeclaration = { ...importDeclaration, ...filterOutImports(nodePath) };
+        importDeclaration = {
+            ...importDeclaration,
+            ...getImports(nodePath),
+        };
     });
-    if (!Object.values(importDeclaration).some(value => value === 'space' || value === 'borderRadius')) {
+    if (!Object.values(importDeclaration).some(value => tokens.includes(value))) {
         return root.toSource();
     }
     root
@@ -23,60 +31,11 @@ const transform = (file, api) => {
         },
     })
         .forEach(nodePath => {
-        addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
         const name = nodePath.value.callee.name;
         const stylesDeclaration = nodePath.value.arguments[0];
         const isCanvasKitStyling = importDeclaration[name] === 'createStyles' || importDeclaration[name] === 'createStencil';
-        if (stylesDeclaration.type === 'ObjectExpression') {
-            const transformProperty = (property) => {
-                var _a;
-                if (property.type === 'ObjectProperty' &&
-                    property.key.type === 'Identifier' &&
-                    property.value.type === 'MemberExpression' &&
-                    property.value.object.type === 'Identifier' &&
-                    property.value.property.type === 'Identifier' &&
-                    importDeclaration[property.value.object.name] === 'colors') {
-                    const key = property.key.name;
-                    const tokens = (_a = Object.entries(systemColors).find(([blockKey]) => blockKey.split(',').some(prop => prop === key))) === null || _a === void 0 ? void 0 : _a[1];
-                    const { property: value } = property.value;
-                    const colorToken = tokens === null || tokens === void 0 ? void 0 : tokens[value.name];
-                    if (colorToken) {
-                        if (!isCanvasKitStyling) {
-                            addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
-                        }
-                        return j.objectProperty(j.identifier(key), isCanvasKitStyling
-                            ? varToMemberExpression(j, colorToken)
-                            : j.callExpression(j.identifier('cssVar'), [varToMemberExpression(j, colorToken)]));
-                    }
-                }
-                if (property.type === 'ObjectProperty' && property.value.type === 'TemplateLiteral') {
-                    const templateLiteral = property.value;
-                    const transformedQuasis = templateLiteral.quasis.map((quasi) => quasi);
-                    const transformedExpressions = templateLiteral.expressions.map((expr) => {
-                        var _a;
-                        if (expr.type === 'MemberExpression' &&
-                            expr.object.type === 'Identifier' &&
-                            expr.property.type === 'Identifier' &&
-                            importDeclaration[expr.object.name] === 'colors') {
-                            const tokens = (_a = Object.entries(systemColors).find(([blockKey]) => blockKey.split(',').some(prop => prop === property.key.name))) === null || _a === void 0 ? void 0 : _a[1];
-                            const colorToken = tokens === null || tokens === void 0 ? void 0 : tokens[expr.property.name];
-                            if (colorToken) {
-                                addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
-                                return j.callExpression(j.identifier('cssVar'), [
-                                    varToMemberExpression(j, colorToken),
-                                ]);
-                            }
-                        }
-                        return expr;
-                    });
-                    return j.objectProperty(property.key, j.templateLiteral(transformedQuasis, transformedExpressions));
-                }
-                if (property.type === 'ObjectProperty' && property.value.type === 'ObjectExpression') {
-                    return j.objectProperty(property.key, j.objectExpression(property.value.properties.map(transformProperty)));
-                }
-                return property;
-            };
-            stylesDeclaration.properties = stylesDeclaration.properties.map(transformProperty);
+        if ((stylesDeclaration === null || stylesDeclaration === void 0 ? void 0 : stylesDeclaration.type) === 'ObjectExpression') {
+            stylesDeclaration.properties = stylesDeclaration.properties.map((prop) => transformObjectPropertyRecursively({ j, root }, prop, importDeclaration, isCanvasKitStyling, [...tokens]));
         }
     });
     root
@@ -89,23 +48,34 @@ const transform = (file, api) => {
     })
         .replaceWith(nodePath => {
         const mainWrapper = nodePath.value.object;
-        if (mainWrapper.type === 'Identifier' && importDeclaration[mainWrapper.name] !== 'type') {
-            const mainObject = mainWrapper;
-            const mainName = mainObject.name;
+        if (mainWrapper.type === 'Identifier' &&
+            tokens.includes(importDeclaration[mainWrapper.name])) {
+            const mainName = mainWrapper.name;
             const lowestProperty = nodePath.value.property;
             const importedName = importDeclaration[mainName];
             const map = mapping[importedName];
-            if (importedName !== 'depth') {
-                if (map.type === 'system' && lowestProperty.type === 'Identifier') {
-                    addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
-                    addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
-                    return j.callExpression(j.identifier('cssVar'), [
-                        j.memberExpression(j.memberExpression(j.identifier(map.type), j.identifier(map.name)), j.identifier(map.keys[lowestProperty.name])),
-                    ]);
+            if (['space', 'borderRadius'].includes(importedName) &&
+                (map === null || map === void 0 ? void 0 : map.type) === 'system' &&
+                lowestProperty.type === 'Identifier') {
+                const newValue = map.keys[lowestProperty.name];
+                if (!newValue) {
+                    return nodePath.value;
                 }
+                addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
+                addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
+                return j.callExpression(j.identifier('cssVar'), [
+                    j.memberExpression(j.memberExpression(j.identifier(map.type), j.identifier(map.name)), j.identifier(map.keys[lowestProperty.name])),
+                ]);
             }
         }
-        return nodePath;
+        return nodePath.value;
+    });
+    root
+        .find(j.ImportDeclaration, {
+        source: { value: (value) => canvasImportSources.includes(value) },
+    })
+        .forEach(nodePath => {
+        filterOutImports({ root, j }, nodePath, tokens);
     });
     return root.toSource();
 };

package/dist/es6/v13.2/migrateTypeTokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"migrateTypeTokens.d.ts","sourceRoot":"","sources":["../../../lib/v13.2/migrateTypeTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,SAAS,EAAC,MAAM,aAAa,CAAC;AASpE,QAAA,MAAM,SAAS,EAAE,SAiOhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"migrateTypeTokens.d.ts","sourceRoot":"","sources":["../../../lib/v13.2/migrateTypeTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,SAAS,EAAC,MAAM,aAAa,CAAC;AASpE,QAAA,MAAM,SAAS,EAAE,SA6OhB,CAAC;AAEF,eAAe,SAAS,CAAC"}