@workday/canvas-kit-codemod 14.1.5 → 14.1.7

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;AAWtC,QAAA,MAAM,SAAS,EAAE,SA6KhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -1,5 +1,9 @@
-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 transform = (file, api) => {
     const j = api.jscodeshift;
     const root = j(file.source);
@@ -10,7 +14,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,7 +25,7 @@ const transform = (file, api) => {
             type: 'MemberExpression',
             object: {
                 type: 'Identifier',
-                name: 'depth',
+                name: (name) => importDeclaration[name] === 'depth',
             },
             property: {
                 type: 'NumericLiteral',
@@ -32,17 +36,18 @@ const transform = (file, api) => {
         const argument = nodePath.value.argument;
         if (argument.type === 'MemberExpression' && argument.property.type === 'NumericLiteral') {
             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
+            return isDepthNotZero
                 ? 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 nodePath;
+        return nodePath.value;
     });
     root
         .find(j.MemberExpression, (value) => {
@@ -65,7 +70,7 @@ const transform = (file, api) => {
                     j.memberExpression(j.memberExpression(j.identifier('system'), j.identifier('depth')), j.numericLiteral(value), true),
                 ]);
         }
-        return nodePath;
+        return nodePath.value;
     });
     root
         .find(j.MemberExpression, (value) => {
@@ -97,7 +102,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, '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"}

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

@@ -1,4 +1,4 @@
-import { addMissingImports, filterOutImports, varToMemberExpression } from './utils';
+import { addMissingImports, filterOutImports, getImports, varToMemberExpression } from './utils';
 import { typeProps } from './mapping/typeProps';
 import { mapping } from './mapping';
 const canvasImportSources = ['@workday/canvas-kit-styling', '@workday/canvas-kit-react/tokens'];
@@ -12,7 +12,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('type')) {
         return root.toSource();
@@ -40,14 +40,26 @@ const transform = (file, api) => {
         const object = argument.object;
         const level = object.property.name;
         const size = argument.property.name;
-        addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
-        addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
-        nodePath.insertAfter(j.objectProperty(j.identifier('color'), j.callExpression(j.identifier('cssVar'), [
-            j.memberExpression(j.memberExpression(j.memberExpression(j.identifier('system'), j.identifier('color')), j.identifier('fg')), j.identifier(['heading', 'title'].includes(level) ? 'strong' : 'default')),
-        ])));
-        return [
-            j.spreadElement(j.memberExpression(j.memberExpression(j.memberExpression(j.identifier('system'), j.identifier('type')), j.identifier(level)), j.identifier(size))),
-        ];
+        const mapKeys = mapping.type.keys.levels.values;
+        const levelKeys = mapKeys[level] || {};
+        const tokens = levelKeys[size];
+        if (tokens) {
+            addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
+            addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
+            const properties = typeProps
+                .filter(prop => tokens[prop])
+                .map((key) => {
+                const tokenValue = tokens[key];
+                if (!tokenValue) {
+                    return null;
+                }
+                return j.objectProperty(j.identifier(key), j.callExpression(j.identifier('cssVar'), [varToMemberExpression(j, tokenValue)]));
+            })
+                .filter((prop) => prop !== null);
+            // Replace the spread element with individual properties
+            return properties;
+        }
+        return nodePath.value;
     });
     root
         .find(j.MemberExpression, (value) => {
@@ -80,7 +92,7 @@ const transform = (file, api) => {
                 return j.callExpression(j.identifier('cssVar'), [varToMemberExpression(j, value)]);
             }
         }
-        return nodePath;
+        return nodePath.value;
     });
     root
         .find(j.MemberExpression, (value) => {
@@ -104,7 +116,10 @@ const transform = (file, api) => {
                 const lowestPropertyValue = lowestProperty.type === 'Identifier' ? lowestProperty.name : lowestProperty.value;
                 const innerKey = innerProperty.name;
                 if (mainProperty.name === 'properties') {
-                    const { name, values } = mapping.type.keys[innerKey];
+                    const { name, values } = mapping.type.keys[innerKey] || {};
+                    if (!name || !values) {
+                        return nodePath.value;
+                    }
                     const newValue = values[lowestPropertyValue];
                     addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
                     if (newValue.includes('.')) {
@@ -123,16 +138,25 @@ const transform = (file, api) => {
                     const { values } = mapping.type.keys.levels;
                     const levels = values[innerKey];
                     const lowestKey = lowestPropertyValue;
-                    const tokens = levels[lowestKey];
-                    const props = Object.entries(tokens).map(([key, value]) => {
-                        addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
-                        return j.property('init', j.identifier(key), j.callExpression(j.identifier('cssVar'), [varToMemberExpression(j, value)]));
-                    });
-                    return j.objectExpression(props);
+                    const tokens = levels === null || levels === void 0 ? void 0 : levels[lowestKey];
+                    if (tokens) {
+                        const props = Object.entries(tokens).map(([key, value]) => {
+                            addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
+                            return j.property('init', j.identifier(key), j.callExpression(j.identifier('cssVar'), [varToMemberExpression(j, value)]));
+                        });
+                        return j.objectExpression(props);
+                    }
                 }
             }
         }
-        return nodePath;
+        return nodePath.value;
+    });
+    root
+        .find(j.ImportDeclaration, {
+        source: { value: (value) => canvasImportSources.includes(value) },
+    })
+        .forEach(nodePath => {
+        filterOutImports({ root, j }, nodePath, 'type');
     });
     return root.toSource();
 };

package/dist/es6/v13.2/utils/filterOutImports.d.ts

@@ -1,3 +1,8 @@
 import { ASTPath, ImportDeclaration } from 'jscodeshift';
-export declare const filterOutImports: (nodePath: ASTPath<ImportDeclaration>) => Record<string, string>;
+type ImportType = 'colors' | 'depth' | 'space' | 'type' | 'borderRadius';
+export declare const filterOutImports: ({ root, j }: {
+    root: any;
+    j: any;
+}, nodePath: ASTPath<ImportDeclaration>, type: ImportType | ImportType[]) => Record<string, string>;
+export {};
 //# sourceMappingURL=filterOutImports.d.ts.map

package/dist/es6/v13.2/utils/filterOutImports.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filterOutImports.d.ts","sourceRoot":"","sources":["../../../../lib/v13.2/utils/filterOutImports.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAE,iBAAiB,EAAC,MAAM,aAAa,CAAC;AAEvD,eAAO,MAAM,gBAAgB,aAAc,QAAQ,iBAAiB,CAAC,2BAwBpE,CAAC"}
+{"version":3,"file":"filterOutImports.d.ts","sourceRoot":"","sources":["../../../../lib/v13.2/utils/filterOutImports.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAE,iBAAiB,EAAC,MAAM,aAAa,CAAC;AAEvD,KAAK,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,cAAc,CAAC;AASzE,eAAO,MAAM,gBAAgB;UACT,GAAG;OAAK,GAAG;aACnB,QAAQ,iBAAiB,CAAC,QAC9B,UAAU,GAAG,UAAU,EAAE,2BA0ChC,CAAC"}

package/dist/es6/v13.2/utils/filterOutImports.js

@@ -1,14 +1,32 @@
-export const filterOutImports = (nodePath) => {
+const canvasImportSources = [
+    '@workday/canvas-kit-react/tokens',
+    '@workday/canvas-colors-web',
+    '@workday/canvas-space-web',
+    '@workday/canvas-depth-web',
+];
+export const filterOutImports = ({ root, j }, nodePath, type) => {
     var _a, _b;
     const importName = {};
     nodePath.value.specifiers = (_a = nodePath.value.specifiers) === null || _a === void 0 ? void 0 : _a.filter(specifier => {
-        var _a;
         if (specifier.type === 'ImportSpecifier' && specifier.local) {
+            let isInstanceExist = false;
             const localName = specifier.local.name.toString();
             const importedName = specifier.imported.name.toString();
             importName[localName] = importedName;
-            return !(typeof nodePath.value.source.value === 'string' &&
-                ((_a = nodePath.value.source.value) === null || _a === void 0 ? void 0 : _a.endsWith('tokens')));
+            root
+                .find(j.MemberExpression, {
+                object: {
+                    name: importedName,
+                },
+            })
+                .forEach(() => {
+                isInstanceExist = true;
+            });
+            return (isInstanceExist ||
+                !(((typeof type === 'string' && importedName.toLowerCase().includes(type)) ||
+                    type.includes(importedName)) &&
+                    typeof nodePath.value.source.value === 'string' &&
+                    canvasImportSources.includes(nodePath.value.source.value)));
         }
         return true;
     });

package/dist/es6/v13.2/utils/getImports.d.ts

@@ -0,0 +1,3 @@
+import { ASTPath, ImportDeclaration } from 'jscodeshift';
+export declare const getImports: (nodePath: ASTPath<ImportDeclaration>) => Record<string, string>;
+//# sourceMappingURL=getImports.d.ts.map

package/dist/es6/v13.2/utils/getImports.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getImports.d.ts","sourceRoot":"","sources":["../../../../lib/v13.2/utils/getImports.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAE,iBAAiB,EAAC,MAAM,aAAa,CAAC;AAEvD,eAAO,MAAM,UAAU,aAAc,QAAQ,iBAAiB,CAAC,2BAa9D,CAAC"}

package/dist/es6/v13.2/utils/getImports.js

@@ -0,0 +1,12 @@
+export const getImports = (nodePath) => {
+    var _a;
+    const importName = {};
+    (_a = nodePath.value.specifiers) === null || _a === void 0 ? void 0 : _a.forEach(specifier => {
+        if (specifier.type === 'ImportSpecifier' && specifier.local) {
+            const localName = specifier.local.name.toString();
+            const importedName = specifier.imported.name.toString();
+            importName[localName] = importedName;
+        }
+    });
+    return importName;
+};

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

@@ -1,5 +1,6 @@
 export * from './addMissingImports';
 export * from './filterOutImports';
+export * from './getImports';
 export * from './generateLevelTokens';
 export * from './expectTransformFactory';
 export * from './varToMemberExpression';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../lib/v13.2/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sCAAsC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../lib/v13.2/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sCAAsC,CAAC"}

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

@@ -1,5 +1,6 @@
 export * from './addMissingImports';
 export * from './filterOutImports';
+export * from './getImports';
 export * from './generateLevelTokens';
 export * from './expectTransformFactory';
 export * from './varToMemberExpression';

package/dist/es6/v13.2/utils/transformObjectPropertyRecursively.d.ts

@@ -1,4 +1,4 @@
 export declare const transformObjectPropertyRecursively: ({ j, root }: any, property: any, importDeclaration: {
     [key: string]: any;
-}, isCanvasKitStyling?: boolean) => any;
+}, isCanvasKitStyling?: boolean, tokenTypes?: string[]) => any;
 //# sourceMappingURL=transformObjectPropertyRecursively.d.ts.map

package/dist/es6/v13.2/utils/transformObjectPropertyRecursively.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transformObjectPropertyRecursively.d.ts","sourceRoot":"","sources":["../../../../lib/v13.2/utils/transformObjectPropertyRecursively.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,kCAAkC,gBAClC,GAAG,YACJ,GAAG;;wBAEQ,OAAO,KAC3B,GAgJF,CAAC"}
+{"version":3,"file":"transformObjectPropertyRecursively.d.ts","sourceRoot":"","sources":["../../../../lib/v13.2/utils/transformObjectPropertyRecursively.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kCAAkC,gBAClC,GAAG,YACJ,GAAG;;wBAEQ,OAAO,eACf,MAAM,EAAE,KACpB,GA2UF,CAAC"}

package/dist/es6/v13.2/utils/transformObjectPropertyRecursively.js

@@ -1,26 +1,60 @@
-import { systemColors } from '../mapping';
+import { mapping, paletteNames, systemColors } from '../mapping';
 import { addMissingImports } from './addMissingImports';
 import { varToMemberExpression } from './varToMemberExpression';
-export const transformObjectPropertyRecursively = ({ j, root }, property, importDeclaration, isCanvasKitStyling) => {
+export const transformObjectPropertyRecursively = ({ j, root }, property, importDeclaration, isCanvasKitStyling, tokenTypes) => {
     var _a, _b, _c;
+    // Helper to create object property preserving computed flag
+    const createObjectProperty = (key, value) => {
+        var _a, _b, _c;
+        const prop = j.objectProperty(key, value);
+        // Preserve computed flag: if explicitly true, or if key is not a simple literal/identifier
+        if (property.computed === true ||
+            (((_a = property.key) === null || _a === void 0 ? void 0 : _a.type) !== 'Identifier' &&
+                ((_b = property.key) === null || _b === void 0 ? void 0 : _b.type) !== 'StringLiteral' &&
+                ((_c = property.key) === null || _c === void 0 ? void 0 : _c.type) !== 'NumericLiteral')) {
+            prop.computed = true;
+        }
+        return prop;
+    };
     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'] });
+        property.value.property.type === 'Identifier') {
+        const importedTokenName = importDeclaration[property.value.object.name];
+        // Handle colors tokens
+        if (importedTokenName === 'colors' && (!tokenTypes || tokenTypes.includes('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'] });
+                }
+                addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
+                return createObjectProperty(property.key, isCanvasKitStyling
+                    ? varToMemberExpression(j, colorToken)
+                    : j.callExpression(j.identifier('cssVar'), [varToMemberExpression(j, colorToken)]));
+            }
+        }
+        // Handle space and borderRadius tokens
+        if (tokenTypes &&
+            tokenTypes.includes(importedTokenName) &&
+            ['space', 'borderRadius'].includes(importedTokenName)) {
+            const map = mapping[importedTokenName];
+            const propertyName = property.value.property.name;
+            if ((map === null || map === void 0 ? void 0 : map.type) === 'system' && map.keys) {
+                const newValue = map.keys[propertyName];
+                if (newValue) {
+                    if (!isCanvasKitStyling) {
+                        addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
+                    }
+                    addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
+                    const tokenPath = j.memberExpression(j.memberExpression(j.identifier(map.type), j.identifier(map.name)), j.identifier(newValue));
+                    return createObjectProperty(property.key, isCanvasKitStyling ? tokenPath : j.callExpression(j.identifier('cssVar'), [tokenPath]));
+                }
             }
-            addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
-            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') {
@@ -28,21 +62,72 @@ export const transformObjectPropertyRecursively = ({ j, root }, property, import
         const transformedQuasis = templateLiteral.quasis.map((quasi) => quasi);
         const transformedExpressions = templateLiteral.expressions.map((expr) => {
             var _a;
+            if (expr.type === 'CallExpression') {
+                expr.arguments = expr.arguments.map((arg) => {
+                    var _a;
+                    if (arg.type === 'MemberExpression' &&
+                        arg.object.type === 'Identifier' &&
+                        arg.object.name === 'colors' &&
+                        arg.property.type === 'Identifier') {
+                        const keyName = property.key.type === 'Identifier' ? property.key.name : null;
+                        const tokens = keyName
+                            ? (_a = Object.entries(systemColors).find(([blockKey]) => blockKey.split(',').some(prop => prop === keyName))) === null || _a === void 0 ? void 0 : _a[1]
+                            : {};
+                        const colorToken = tokens === null || tokens === void 0 ? void 0 : tokens[arg.property.name];
+                        if (colorToken) {
+                            return isCanvasKitStyling
+                                ? varToMemberExpression(j, colorToken)
+                                : j.callExpression(j.identifier('cssVar'), [varToMemberExpression(j, colorToken)]);
+                        }
+                    }
+                    return arg;
+                });
+            }
             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'] });
-                    addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
-                    return j.callExpression(j.identifier('cssVar'), [varToMemberExpression(j, colorToken)]);
+                expr.property.type === 'Identifier') {
+                const importedTokenName = importDeclaration[expr.object.name];
+                // Handle colors tokens
+                if (importedTokenName === 'colors' && (!tokenTypes || tokenTypes.includes('colors'))) {
+                    const keyName = property.key.type === 'Identifier' ? property.key.name : null;
+                    const tokens = keyName
+                        ? (_a = Object.entries(systemColors).find(([blockKey]) => blockKey.split(',').some(prop => prop === keyName))) === null || _a === void 0 ? void 0 : _a[1]
+                        : null;
+                    const colorToken = tokens === null || tokens === void 0 ? void 0 : tokens[expr.property.name];
+                    if (colorToken) {
+                        if (!isCanvasKitStyling) {
+                            addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
+                        }
+                        addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
+                        return isCanvasKitStyling
+                            ? varToMemberExpression(j, colorToken)
+                            : j.callExpression(j.identifier('cssVar'), [varToMemberExpression(j, colorToken)]);
+                    }
+                }
+                // Handle space and borderRadius tokens
+                if (tokenTypes &&
+                    tokenTypes.includes(importedTokenName) &&
+                    ['space', 'borderRadius'].includes(importedTokenName)) {
+                    const map = mapping[importedTokenName];
+                    const propertyName = expr.property.name;
+                    if ((map === null || map === void 0 ? void 0 : map.type) === 'system' && map.keys) {
+                        const newValue = map.keys[propertyName];
+                        if (newValue) {
+                            if (!isCanvasKitStyling) {
+                                addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
+                            }
+                            addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
+                            const tokenPath = j.memberExpression(j.memberExpression(j.identifier(map.type), j.identifier(map.name)), j.identifier(newValue));
+                            return isCanvasKitStyling
+                                ? tokenPath
+                                : j.callExpression(j.identifier('cssVar'), [tokenPath]);
+                        }
+                    }
                 }
             }
             return expr;
         });
-        return j.objectProperty(property.key, j.templateLiteral(transformedQuasis, transformedExpressions));
+        return createObjectProperty(property.key, j.templateLiteral(transformedQuasis, transformedExpressions));
     }
     if (property.type === 'ObjectProperty' && property.value.type === 'ConditionalExpression') {
         const { test, consequent, alternate } = property.value;
@@ -54,23 +139,56 @@ export const transformObjectPropertyRecursively = ({ j, root }, property, import
             alternate.object.type === 'Identifier' &&
             alternate.property.type === 'Identifier' &&
             importDeclaration[alternate.object.name] === 'colors') {
-            const consequentTokens = (_b = Object.entries(systemColors).find(([blockKey]) => blockKey.split(',').some(prop => prop === property.key.name))) === null || _b === void 0 ? void 0 : _b[1];
-            const alternateTokens = (_c = Object.entries(systemColors).find(([blockKey]) => blockKey.split(',').some(prop => prop === property.key.name))) === null || _c === void 0 ? void 0 : _c[1];
+            const keyName = property.key.type === 'Identifier' ? property.key.name : null;
+            const consequentTokens = keyName
+                ? (_b = Object.entries(systemColors).find(([blockKey]) => blockKey.split(',').some(prop => prop === keyName))) === null || _b === void 0 ? void 0 : _b[1]
+                : null;
+            const alternateTokens = keyName
+                ? (_c = Object.entries(systemColors).find(([blockKey]) => blockKey.split(',').some(prop => prop === keyName))) === null || _c === void 0 ? void 0 : _c[1]
+                : null;
             const consequentColorToken = consequentTokens === null || consequentTokens === void 0 ? void 0 : consequentTokens[consequent.property.name];
             const alternateColorToken = alternateTokens === null || alternateTokens === void 0 ? void 0 : alternateTokens[alternate.property.name];
             if (consequentColorToken && alternateColorToken) {
-                addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
+                if (!isCanvasKitStyling) {
+                    addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
+                }
                 addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
-                return j.objectProperty(property.key, j.conditionalExpression(test, j.callExpression(j.identifier('cssVar'), [
-                    varToMemberExpression(j, consequentColorToken),
-                ]), j.callExpression(j.identifier('cssVar'), [
-                    varToMemberExpression(j, alternateColorToken),
-                ])));
+                return createObjectProperty(property.key, j.conditionalExpression(test, isCanvasKitStyling
+                    ? varToMemberExpression(j, consequentColorToken)
+                    : j.callExpression(j.identifier('cssVar'), [
+                        varToMemberExpression(j, consequentColorToken),
+                    ]), isCanvasKitStyling
+                    ? varToMemberExpression(j, alternateColorToken)
+                    : j.callExpression(j.identifier('cssVar'), [
+                        varToMemberExpression(j, alternateColorToken),
+                    ])));
             }
         }
     }
     if (property.type === 'ObjectProperty' && property.value.type === 'ObjectExpression') {
-        return j.objectProperty(property.key, j.objectExpression(property.value.properties.map((prop) => transformObjectPropertyRecursively({ j, root }, prop, importDeclaration, isCanvasKitStyling))));
+        return createObjectProperty(property.key, j.objectExpression(property.value.properties.map((prop) => transformObjectPropertyRecursively({ j, root }, prop, importDeclaration, isCanvasKitStyling, tokenTypes))));
+    }
+    if (property.type === 'ObjectProperty' &&
+        property.key.type === 'Identifier' &&
+        property.value.type === 'MemberExpression' &&
+        property.value.object.type === 'Identifier' &&
+        property.value.property.type === 'Identifier') {
+        const importedTokenName = importDeclaration[property.value.object.name];
+        // Handle colors tokens
+        if (importedTokenName === 'colors' && (!tokenTypes || tokenTypes.includes('colors'))) {
+            const { property: value } = property.value;
+            if (paletteNames.some(name => value.name.includes(name))) {
+                if (!isCanvasKitStyling) {
+                    addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
+                }
+                addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['base'] });
+                return createObjectProperty(property.key, isCanvasKitStyling
+                    ? j.memberExpression(j.identifier('base'), j.identifier(value.name))
+                    : j.callExpression(j.identifier('cssVar'), [
+                        j.memberExpression(j.identifier('base'), j.identifier(value.name)),
+                    ]));
+            }
+        }
     }
     return property;
 };

package/dist/es6/v13.2/utils/varToMemberExpression.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"varToMemberExpression.d.ts","sourceRoot":"","sources":["../../../../lib/v13.2/utils/varToMemberExpression.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,MAAO,GAAG,SAAS,MAAM,QAQ1D,CAAC"}
+{"version":3,"file":"varToMemberExpression.d.ts","sourceRoot":"","sources":["../../../../lib/v13.2/utils/varToMemberExpression.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,MAAO,GAAG,SAAS,MAAM,QAU1D,CAAC"}

package/dist/es6/v13.2/utils/varToMemberExpression.js

@@ -1,7 +1,7 @@
 export const varToMemberExpression = (j, value) => {
     const valuesKeys = value.split('.');
     return valuesKeys.reduce((acc, key, index) => {
-        if (index === 0) {
+        if (!index) {
             return j.identifier(key);
         }
         return j.memberExpression(acc, j.identifier(key));

package/dist/es6/v14-tokens/migrateColorTokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"migrateColorTokens.d.ts","sourceRoot":"","sources":["../../../lib/v14-tokens/migrateColorTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAC,MAAM,aAAa,CAAC;AAclD,QAAA,MAAM,SAAS,EAAE,SAsIhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"migrateColorTokens.d.ts","sourceRoot":"","sources":["../../../lib/v14-tokens/migrateColorTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAC,MAAM,aAAa,CAAC;AAclD,QAAA,MAAM,SAAS,EAAE,SA+IhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/es6/v14-tokens/migrateColorTokens.js

@@ -1,4 +1,4 @@
-import { addMissingImports, filterOutImports } from '../v13.2/utils';
+import { addMissingImports, filterOutImports, getImports } from '../v13.2/utils';
 import { transformObjectPropertyRecursively } from './utils/transformObjectPropertyRecursively';
 import { mapping } from '../v13.2/mapping';
 import baseMapping from './baseMapping';
@@ -17,7 +17,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).some(importedValue => importedValue === 'colors' || importedValue === 'base')) {
         return root.toSource();
@@ -96,6 +96,13 @@ const transform = (file, api) => {
             return true;
         });
     });
+    root
+        .find(j.ImportDeclaration, {
+        source: { value: (value) => canvasImportSources.includes(value) },
+    })
+        .forEach(nodePath => {
+        filterOutImports({ root, j }, nodePath, 'colors');
+    });
     return root.toSource();
 };
 export default transform;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@workday/canvas-kit-codemod",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
-  "version": "14.1.5",
+  "version": "14.1.7",
   "description": "A collection of codemods for use on Workday Canvas Kit packages.",
   "main": "dist/es6/index.js",
   "sideEffects": false,
@@ -46,5 +46,5 @@
   "resolutions": {
     "recast": "0.20.4"
   },
-  "gitHead": "79a0516e51e4855e2b661cf7d7045f972df3570c"
+  "gitHead": "3808e546938e4ee8ad73e75484bc49eeef7da755"
 }