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

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.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)),
+                    ]));
             }
         }
     }
     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))));
     }
     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/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/v14-tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAMtC,QAAA,MAAM,SAAS,EAAE,SAGhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/v14-tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAQtC,QAAA,MAAM,SAAS,EAAE,SAShB,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -1,9 +1,16 @@
-import migrateColorTokens from './migrateColorTokens';
+import migrateNewColorTokens from './migrateColorTokens';
+import migrateColorTokens from '../v13.2/migrateColorTokens';
 import migrateDepthTokens from '../v13.2/migrateDepthTokens';
 import migrateOtherTokens from '../v13.2/migrateOtherTokens';
 import migrateTypeTokens from '../v13.2/migrateTypeTokens';
 const transform = (file, api, options) => {
-    const fixes = [migrateColorTokens, migrateDepthTokens, migrateTypeTokens, migrateOtherTokens];
+    const fixes = [
+        migrateColorTokens,
+        migrateNewColorTokens,
+        migrateDepthTokens,
+        migrateTypeTokens,
+        migrateOtherTokens,
+    ];
     return fixes.reduce((source, fix) => fix({ ...file, source }, api, options), file.source);
 };
 export default transform;

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

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

@@ -1,12 +1,7 @@
-import { addMissingImports, filterOutImports } from '../v13.2/utils';
+import { addMissingImports, getImports } from '../v13.2/utils';
 import { transformObjectPropertyRecursively } from './utils/transformObjectPropertyRecursively';
-import { mapping } from '../v13.2/mapping';
 import baseMapping from './baseMapping';
-const canvasImportSources = [
-    '@workday/canvas-kit-styling',
-    '@workday/canvas-kit-react/tokens',
-    '@workday/canvas-tokens-web',
-];
+const canvasImportSources = ['@workday/canvas-kit-styling', '@workday/canvas-tokens-web'];
 const transform = (file, api) => {
     const j = api.jscodeshift;
     const root = j(file.source);
@@ -17,9 +12,9 @@ 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')) {
+    if (!Object.values(importDeclaration).some(importedValue => importedValue === 'base')) {
         return root.toSource();
     }
     root
@@ -43,7 +38,8 @@ const transform = (file, api) => {
         .find(j.MemberExpression, (value) => {
         return (value.type === 'MemberExpression' &&
             checkImport(value.object.name) &&
-            Object.keys(baseMapping).includes(value.property.name));
+            Object.keys(baseMapping).includes(value.property.name) &&
+            importDeclaration[value.object.name] === 'base');
     })
         .replaceWith(nodePath => {
         const mainWrapper = nodePath.value.object;
@@ -51,24 +47,15 @@ const transform = (file, api) => {
             const mainObject = mainWrapper;
             const mainName = mainObject.name;
             const lowestProperty = nodePath.value.property;
-            const importedName = importDeclaration[mainName];
-            const map = importedName === 'base' ? { type: 'base' } : mapping[importedName];
-            if (map.type === 'base' && lowestProperty.type === 'Identifier') {
+            if (lowestProperty.type === 'Identifier') {
                 const colorName = baseMapping[lowestProperty.name];
-                if (mainName === 'colors') {
+                if (mainName === 'base' && colorName) {
                     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'), [
-                        j.memberExpression(j.identifier(map.type), j.identifier(colorName || lowestProperty.name)),
-                    ]);
-                }
-                if (mainName === 'base') {
-                    addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['base'] });
-                    return j.memberExpression(j.identifier(map.type), j.identifier(colorName));
+                    return j.memberExpression(j.identifier('base'), j.identifier(colorName));
                 }
             }
         }
-        return nodePath;
+        return nodePath.value;
     });
     // Filter out base imports if no base tokens are used
     root

package/dist/es6/v14-tokens/utils/transformObjectPropertyRecursively.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transformObjectPropertyRecursively.d.ts","sourceRoot":"","sources":["../../../../lib/v14-tokens/utils/transformObjectPropertyRecursively.ts"],"names":[],"mappings":"AAiDA,eAAO,MAAM,kCAAkC,gBAClC,GAAG,YACJ,GAAG;;wBAEQ,OAAO,KAC3B,GAuNF,CAAC"}
+{"version":3,"file":"transformObjectPropertyRecursively.d.ts","sourceRoot":"","sources":["../../../../lib/v14-tokens/utils/transformObjectPropertyRecursively.ts"],"names":[],"mappings":"AAiDA,eAAO,MAAM,kCAAkC,gBAClC,GAAG,YACJ,GAAG;;wBAEQ,OAAO,KAC3B,GA6MF,CAAC"}