@workday/canvas-kit-codemod 14.0.0-alpha.1151-next.0 → 14.0.0-alpha.1156-next.0

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

@@ -0,0 +1,4 @@
+import { Transform } from 'jscodeshift';
+declare const transform: Transform;
+export default transform;
+//# sourceMappingURL=index.d.ts.map

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

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

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

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

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

@@ -0,0 +1,234 @@
+export declare const mapping: {
+    readonly colors: {
+        readonly type: "base";
+        readonly name: "colors";
+    };
+    readonly borderRadius: {
+        readonly name: "shape";
+        readonly type: "system";
+        readonly keys: {
+            zero: string;
+            s: string;
+            m: string;
+            l: string;
+            circle: string;
+        };
+    };
+    readonly space: {
+        readonly name: "space";
+        readonly type: "system";
+        readonly keys: {
+            zero: string;
+            xxxs: string;
+            xxs: string;
+            xs: string;
+            s: string;
+            m: string;
+            l: string;
+            xl: string;
+            xxl: string;
+            xxxl: string;
+        };
+    };
+    readonly type: {
+        readonly type: "system";
+        readonly name: "type";
+        readonly keys: {
+            fontFamilies: {
+                name: string;
+                values: {
+                    default: string;
+                    monospace: string;
+                };
+            };
+            fontSizes: {
+                name: string;
+                values: {
+                    10: string;
+                    12: string;
+                    14: string;
+                    16: string;
+                    18: string;
+                    20: string;
+                    24: string;
+                    28: string;
+                    32: string;
+                    40: string;
+                    48: string;
+                    56: string;
+                };
+            };
+            fontWeights: {
+                name: string;
+                values: {
+                    regular: string;
+                    medium: string;
+                    bold: string;
+                };
+            };
+            levels: {
+                name: string;
+                values: {
+                    subtext: {
+                        small: {
+                            fontFamily?: string | undefined;
+                            fontSize?: string | undefined;
+                            lineHeight?: string | undefined;
+                            fontWeight?: string | undefined;
+                            color?: string | undefined;
+                        };
+                        medium: {
+                            fontFamily?: string | undefined;
+                            fontSize?: string | undefined;
+                            lineHeight?: string | undefined;
+                            fontWeight?: string | undefined;
+                            color?: string | undefined;
+                        };
+                        large: {
+                            fontFamily?: string | undefined;
+                            fontSize?: string | undefined;
+                            lineHeight?: string | undefined;
+                            fontWeight?: string | undefined;
+                            color?: string | undefined;
+                        };
+                    };
+                    body: {
+                        small: {
+                            fontFamily?: string | undefined;
+                            fontSize?: string | undefined;
+                            lineHeight?: string | undefined;
+                            fontWeight?: string | undefined;
+                            color?: string | undefined;
+                        };
+                        medium: {
+                            fontFamily?: string | undefined;
+                            fontSize?: string | undefined;
+                            lineHeight?: string | undefined;
+                            fontWeight?: string | undefined;
+                            color?: string | undefined;
+                        };
+                        large: {
+                            fontFamily?: string | undefined;
+                            fontSize?: string | undefined;
+                            lineHeight?: string | undefined;
+                            fontWeight?: string | undefined;
+                            color?: string | undefined;
+                        };
+                    };
+                    heading: {
+                        small: {
+                            fontFamily?: string | undefined;
+                            fontSize?: string | undefined;
+                            lineHeight?: string | undefined;
+                            fontWeight?: string | undefined;
+                            color?: string | undefined;
+                        };
+                        medium: {
+                            fontFamily?: string | undefined;
+                            fontSize?: string | undefined;
+                            lineHeight?: string | undefined;
+                            fontWeight?: string | undefined;
+                            color?: string | undefined;
+                        };
+                        large: {
+                            fontFamily?: string | undefined;
+                            fontSize?: string | undefined;
+                            lineHeight?: string | undefined;
+                            fontWeight?: string | undefined;
+                            color?: string | undefined;
+                        };
+                    };
+                    title: {
+                        small: {
+                            fontFamily?: string | undefined;
+                            fontSize?: string | undefined;
+                            lineHeight?: string | undefined;
+                            fontWeight?: string | undefined;
+                            color?: string | undefined;
+                        };
+                        medium: {
+                            fontFamily?: string | undefined;
+                            fontSize?: string | undefined;
+                            lineHeight?: string | undefined;
+                            fontWeight?: string | undefined;
+                            color?: string | undefined;
+                        };
+                        large: {
+                            fontFamily?: string | undefined;
+                            fontSize?: string | undefined;
+                            lineHeight?: string | undefined;
+                            fontWeight?: string | undefined;
+                            color?: string | undefined;
+                        };
+                    };
+                };
+            };
+        };
+    };
+    readonly depth: {
+        readonly type: "system";
+        readonly name: "depth";
+        readonly keys: {};
+    };
+};
+export declare const systemColors: {
+    'background,backgroundColor,backgroundColorHover,backgroundColorFocus,backgroundColorActive': {
+        blackPepper400: string;
+        blackPepper500: string;
+        blueberry200: string;
+        blueberry400: string;
+        blueberry500: string;
+        blueberry600: string;
+        cantaloupe100: string;
+        cantaloupe400: string;
+        cantaloupe500: string;
+        cantaloupe600: string;
+        cinnamon100: string;
+        cinnamon500: string;
+        cinnamon600: string;
+        frenchVanilla100: string;
+        greenApple100: string;
+        greenApple400: string;
+        greenApple500: string;
+        greenApple600: string;
+        licorice100: string;
+        licorice200: string;
+        licorice300: string;
+        licorice500: string;
+        soap100: string;
+        soap200: string;
+        soap300: string;
+        soap400: string;
+        soap500: string;
+    };
+    'color,fill,colorFocus,colorHover,colorActive,icon,iconColor': {
+        blackPepper300: string;
+        blackPepper400: string;
+        blackPepper500: string;
+        blueberry400: string;
+        blueberry500: string;
+        cinnamon500: string;
+        frenchVanilla100: string;
+        licorice100: string;
+        licorice200: string;
+        licorice300: string;
+        licorice400: string;
+        licorice500: string;
+    };
+    'border,borderColor,borderTopColor,borderRightColor,borderBottomColor,borderLeftColor,borderInlineColor,borderBlockColor,borderInlineStartColor,borderInlineEndColor,borderBlockStartColor,borderBlockEndColor,borderColorFocus,borderColorHover,borderColorActive': {
+        blackPepper400: string;
+        blackPepper500: string;
+        blueberry400: string;
+        cantaloupe400: string;
+        cantaloupe600: string;
+        cinnamon500: string;
+        frenchVanilla100: string;
+        licorice100: string;
+        licorice200: string;
+        licorice500: string;
+        soap300: string;
+        soap400: string;
+        soap500: string;
+    };
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,166 @@
+import { generateLevelTokens } from '../utils/generateLevelTokens';
+const typeLevelsMap = {
+    subtext: {
+        small: generateLevelTokens(['subtext', 'small']),
+        medium: generateLevelTokens(['subtext', 'medium']),
+        large: generateLevelTokens(['subtext', 'large']),
+    },
+    body: {
+        small: generateLevelTokens(['body', 'small']),
+        medium: generateLevelTokens(['body', 'medium']),
+        large: generateLevelTokens(['body', 'large']),
+    },
+    heading: {
+        small: generateLevelTokens(['heading', 'small']),
+        medium: generateLevelTokens(['heading', 'medium']),
+        large: generateLevelTokens(['heading', 'large']),
+    },
+    title: {
+        small: generateLevelTokens(['title', 'small']),
+        medium: generateLevelTokens(['title', 'medium']),
+        large: generateLevelTokens(['title', 'large']),
+    },
+};
+const shapeMap = {
+    zero: 'zero',
+    s: 'half',
+    m: 'x1',
+    l: 'x2',
+    circle: 'round',
+};
+const spaceMap = {
+    zero: 'zero',
+    xxxs: 'x1',
+    xxs: 'x2',
+    xs: 'x3',
+    s: 'x4',
+    m: 'x6',
+    l: 'x8',
+    xl: 'x10',
+    xxl: 'x16',
+    xxxl: 'x20',
+};
+const typeMap = {
+    fontFamilies: {
+        name: 'fontFamily',
+        values: {
+            default: 'default',
+            monospace: 'mono',
+        },
+    },
+    fontSizes: {
+        name: 'fontSize',
+        values: {
+            10: 'subtext.small',
+            12: 'subtext.medium',
+            14: 'subtext.large',
+            16: 'body.small',
+            18: 'body.medium',
+            20: 'body.large',
+            24: 'heading.small',
+            28: 'heading.medium',
+            32: 'heading.large',
+            40: 'title.small',
+            48: 'title.medium',
+            56: 'title.large',
+        },
+    },
+    fontWeights: {
+        name: 'fontWeight',
+        values: {
+            regular: 'regular',
+            medium: 'medium',
+            bold: 'bold',
+        },
+    },
+    levels: {
+        name: 'type',
+        values: typeLevelsMap,
+    },
+};
+export const mapping = {
+    colors: {
+        type: 'base',
+        name: 'colors',
+    },
+    borderRadius: {
+        name: 'shape',
+        type: 'system',
+        keys: shapeMap,
+    },
+    space: {
+        name: 'space',
+        type: 'system',
+        keys: spaceMap,
+    },
+    type: {
+        type: 'system',
+        name: 'type',
+        keys: typeMap,
+    },
+    depth: {
+        type: 'system',
+        name: 'depth',
+        keys: {},
+    },
+};
+export const systemColors = {
+    'background,backgroundColor,backgroundColorHover,backgroundColorFocus,backgroundColorActive': {
+        blackPepper400: 'system.color.bg.contrast.default',
+        blackPepper500: 'system.color.bg.contrast.strong',
+        blueberry200: 'system.color.bg.primary.soft',
+        blueberry400: 'system.color.bg.primary.default',
+        blueberry500: 'system.color.bg.primary.strong',
+        blueberry600: 'system.color.bg.primary.stronger',
+        cantaloupe100: 'system.color.bg.caution.softer',
+        cantaloupe400: 'system.color.bg.caution.default',
+        cantaloupe500: 'system.color.bg.caution.strong',
+        cantaloupe600: 'system.color.bg.caution.stronger',
+        cinnamon100: 'system.color.bg.critical.softer',
+        cinnamon500: 'system.color.bg.critical.default',
+        cinnamon600: 'system.color.bg.critical.strong',
+        frenchVanilla100: 'system.color.bg.default',
+        greenApple100: 'system.color.bg.positive.softer',
+        greenApple400: 'system.color.bg.positive.default',
+        greenApple500: 'system.color.bg.positive.strong',
+        greenApple600: 'system.color.bg.positive.stronger',
+        licorice100: 'system.color.bg.muted.softer',
+        licorice200: 'system.color.bg.muted.soft',
+        licorice300: 'system.color.bg.muted.default',
+        licorice500: 'system.color.bg.muted.strong',
+        soap100: 'system.color.bg.alt.softer',
+        soap200: 'system.color.bg.alt.soft',
+        soap300: 'system.color.bg.alt.default',
+        soap400: 'system.color.bg.alt.strong',
+        soap500: 'system.color.bg.alt.stronger',
+    },
+    'color,fill,colorFocus,colorHover,colorActive,icon,iconColor': {
+        blackPepper300: 'system.color.fg.default',
+        blackPepper400: 'system.color.fg.strong',
+        blackPepper500: 'system.color.fg.stronger',
+        blueberry400: 'system.color.fg.primary.default',
+        blueberry500: 'system.color.fg.primary.strong',
+        cinnamon500: 'system.color.fg.critical.default',
+        frenchVanilla100: 'system.color.fg.inverse',
+        licorice100: 'system.color.fg.disabled',
+        licorice200: 'system.color.fg.muted.soft',
+        licorice300: 'system.color.fg.muted.default',
+        licorice400: 'system.color.fg.muted.strong',
+        licorice500: 'system.color.fg.muted.stronger',
+    },
+    'border,borderColor,borderTopColor,borderRightColor,borderBottomColor,borderLeftColor,borderInlineColor,borderBlockColor,borderInlineStartColor,borderInlineEndColor,borderBlockStartColor,borderBlockEndColor,borderColorFocus,borderColorHover,borderColorActive': {
+        blackPepper400: 'system.color.border.contrast.default',
+        blackPepper500: 'system.color.border.contrast.strong',
+        blueberry400: 'system.color.border.primary.default',
+        cantaloupe400: 'system.color.border.caution.default',
+        cantaloupe600: 'system.color.border.caution.strong',
+        cinnamon500: 'system.color.border.critical.default',
+        frenchVanilla100: 'system.color.border.inverse',
+        licorice100: 'system.color.border.input.disabled',
+        licorice200: 'system.color.border.input.default',
+        licorice500: 'system.color.border.input.strong',
+        soap300: 'system.color.border.input.inverse',
+        soap400: 'system.color.border.divider',
+        soap500: 'system.color.border.container',
+    },
+};

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

@@ -0,0 +1,2 @@
+export declare const typeProps: readonly ["fontFamily", "fontSize", "lineHeight", "fontWeight", "color"];
+//# sourceMappingURL=typeProps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"typeProps.d.ts","sourceRoot":"","sources":["../../../../lib/v13.2/mapping/typeProps.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,0EAA2E,CAAC"}

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

@@ -0,0 +1 @@
+export const typeProps = ['fontFamily', 'fontSize', 'lineHeight', 'fontWeight', 'color'];

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

@@ -0,0 +1,4 @@
+import { Transform } from 'jscodeshift';
+declare const transform: Transform;
+export default transform;
+//# sourceMappingURL=migrateColorTokens.d.ts.map

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

@@ -0,0 +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,SAwFhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,62 @@
+import { addMissingImports, filterOutImports, transformObjectPropertyRecursively } from './utils';
+import { mapping } from './mapping';
+const canvasImportSources = ['@workday/canvas-kit-styling', '@workday/canvas-kit-react/tokens'];
+const transform = (file, api) => {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+    let importDeclaration = {};
+    const checkImport = (value) => Object.keys(importDeclaration).includes(value);
+    root
+        .find(j.ImportDeclaration, {
+        source: { value: (value) => canvasImportSources.includes(value) },
+    })
+        .forEach(nodePath => {
+        importDeclaration = { ...importDeclaration, ...filterOutImports(nodePath) };
+    });
+    root
+        .find(j.CallExpression, {
+        callee: {
+            type: 'Identifier',
+        },
+    })
+        .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') {
+            stylesDeclaration.properties = stylesDeclaration.properties.map((prop) => transformObjectPropertyRecursively({ j, root }, prop, importDeclaration, isCanvasKitStyling));
+        }
+    });
+    root.find(j.ObjectExpression).forEach(nodePath => {
+        nodePath.value.properties = nodePath.value.properties.map((prop) => transformObjectPropertyRecursively({ j, root }, prop, importDeclaration));
+    });
+    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)));
+    })
+        .replaceWith(nodePath => {
+        const mainWrapper = nodePath.value.object;
+        if (mainWrapper.type === 'Identifier' && importDeclaration[mainWrapper.name] !== 'type') {
+            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') {
+                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(lowestProperty.name)),
+                ]);
+            }
+        }
+        return nodePath;
+    });
+    return root.toSource();
+};
+export default transform;

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

@@ -0,0 +1,4 @@
+import { Transform } from 'jscodeshift';
+declare const transform: Transform;
+export default transform;
+//# sourceMappingURL=migrateDepthTokens.d.ts.map

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

@@ -0,0 +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,SAgKhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,101 @@
+import { addMissingImports, filterOutImports } from './utils';
+const canvasImportSources = ['@workday/canvas-kit-styling', '@workday/canvas-kit-react/tokens'];
+const transform = (file, api) => {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+    let importDeclaration = {};
+    const checkImport = (value) => Object.keys(importDeclaration).includes(value);
+    root
+        .find(j.ImportDeclaration, {
+        source: { value: (value) => canvasImportSources.includes(value) },
+    })
+        .forEach(nodePath => {
+        importDeclaration = { ...importDeclaration, ...filterOutImports(nodePath) };
+    });
+    root
+        .find(j.SpreadElement, {
+        argument: {
+            type: 'MemberExpression',
+            object: {
+                type: 'Identifier',
+                name: 'depth',
+            },
+            property: {
+                type: 'NumericLiteral',
+            },
+        },
+    })
+        .replaceWith(nodePath => {
+        const argument = nodePath.value.argument;
+        if (argument.type === 'MemberExpression' && argument.property.type === 'NumericLiteral') {
+            const depthValue = argument.property.value;
+            addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
+            if (depthValue > 0) {
+                addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
+            }
+            return depthValue > 0
+                ? j.objectProperty(j.identifier('boxShadow'), j.callExpression(j.identifier('cssVar'), [
+                    j.memberExpression(j.memberExpression(j.identifier('system'), j.identifier('depth')), j.numericLiteral(depthValue), true),
+                ]))
+                : j.objectProperty(j.identifier('boxShadow'), j.literal('none'));
+        }
+        return nodePath;
+    });
+    root
+        .find(j.MemberExpression, (value) => {
+        return (value.type === 'MemberExpression' &&
+            value.property.name === 'boxShadow' &&
+            checkImport(value.object.object.name));
+    })
+        .replaceWith(nodePath => {
+        if (nodePath.value.object.type === 'MemberExpression' &&
+            nodePath.value.object.object.type === 'Identifier' &&
+            nodePath.value.object.property.type === 'NumericLiteral') {
+            const value = nodePath.value.object.property.value;
+            if (value.toString() !== '0') {
+                addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
+                addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
+            }
+            return value.toString() === '0'
+                ? j.literal('none')
+                : j.callExpression(j.identifier('cssVar'), [
+                    j.memberExpression(j.memberExpression(j.identifier('system'), j.identifier('depth')), j.numericLiteral(value), true),
+                ]);
+        }
+        return nodePath;
+    });
+    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)));
+    })
+        .replaceWith(nodePath => {
+        const mainWrapper = nodePath.value.object;
+        if (mainWrapper.type === 'Identifier' && importDeclaration[mainWrapper.name] !== 'type') {
+            const mainObject = mainWrapper;
+            const mainName = mainObject.name;
+            const lowestProperty = nodePath.value.property;
+            const importedName = importDeclaration[mainName];
+            if (importedName === 'depth' && lowestProperty.type === 'NumericLiteral') {
+                const isZero = lowestProperty.value.toString() === '0';
+                if (!isZero) {
+                    addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
+                    addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
+                }
+                return j.objectExpression([
+                    j.property('init', j.identifier('boxShadow'), isZero
+                        ? j.literal('none')
+                        : j.callExpression(j.identifier('cssVar'), [
+                            j.memberExpression(j.memberExpression(j.identifier('system'), j.identifier('depth')), j.numericLiteral(lowestProperty.value), true),
+                        ])),
+                ]);
+            }
+        }
+        return nodePath;
+    });
+    return root.toSource();
+};
+export default transform;

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

@@ -0,0 +1,4 @@
+import { Transform } from 'jscodeshift';
+declare const transform: Transform;
+export default transform;
+//# sourceMappingURL=migrateOtherTokens.d.ts.map

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

@@ -0,0 +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,SAsKhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,109 @@
+import { addMissingImports, filterOutImports, varToMemberExpression } from './utils';
+import { mapping, systemColors } from './mapping';
+const canvasImportSources = ['@workday/canvas-kit-styling', '@workday/canvas-kit-react/tokens'];
+const transform = (file, api) => {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+    let importDeclaration = {};
+    const checkImport = (value) => Object.keys(importDeclaration).includes(value);
+    root
+        .find(j.ImportDeclaration, {
+        source: { value: (value) => canvasImportSources.includes(value) },
+    })
+        .forEach(nodePath => {
+        importDeclaration = { ...importDeclaration, ...filterOutImports(nodePath) };
+    });
+    root
+        .find(j.CallExpression, {
+        callee: {
+            type: 'Identifier',
+        },
+    })
+        .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);
+        }
+    });
+    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)));
+    })
+        .replaceWith(nodePath => {
+        const mainWrapper = nodePath.value.object;
+        if (mainWrapper.type === 'Identifier' && importDeclaration[mainWrapper.name] !== 'type') {
+            const mainObject = mainWrapper;
+            const mainName = mainObject.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])),
+                    ]);
+                }
+            }
+        }
+        return nodePath;
+    });
+    return root.toSource();
+};
+export default transform;

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

@@ -0,0 +1,4 @@
+import { Transform } from 'jscodeshift';
+declare const transform: Transform;
+export default transform;
+//# sourceMappingURL=migrateTypeTokens.d.ts.map

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

@@ -0,0 +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,SA6NhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,136 @@
+import { addMissingImports, filterOutImports, varToMemberExpression } from './utils';
+import { typeProps } from './mapping/typeProps';
+import { mapping } from './mapping';
+const canvasImportSources = ['@workday/canvas-kit-styling', '@workday/canvas-kit-react/tokens'];
+const transform = (file, api) => {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+    let importDeclaration = {};
+    const checkImport = (value) => Object.keys(importDeclaration).includes(value);
+    root
+        .find(j.ImportDeclaration, {
+        source: { value: (value) => canvasImportSources.includes(value) },
+    })
+        .forEach(nodePath => {
+        importDeclaration = { ...importDeclaration, ...filterOutImports(nodePath) };
+    });
+    root
+        .find(j.SpreadElement, {
+        argument: {
+            type: 'MemberExpression',
+            object: {
+                type: 'MemberExpression',
+                object: {
+                    type: 'MemberExpression',
+                    object: {
+                        name: 'type',
+                    },
+                    property: {
+                        name: 'levels',
+                    },
+                },
+            },
+        },
+    })
+        .replaceWith(nodePath => {
+        const argument = nodePath.value.argument;
+        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))),
+        ];
+    });
+    root
+        .find(j.MemberExpression, (value) => {
+        return (value.type === 'MemberExpression' &&
+            typeProps.includes(value.property.name) &&
+            value.object.type === 'MemberExpression' &&
+            value.object.object.type === 'MemberExpression' &&
+            value.object.object.object.type === 'MemberExpression' &&
+            value.object.object.object.object.type === 'Identifier' &&
+            checkImport(value.object.object.object.object.name));
+    })
+        .replaceWith(nodePath => {
+        const mainWrapper = nodePath.value.object;
+        const property = nodePath.value.property;
+        addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
+        if (mainWrapper.type === 'MemberExpression' &&
+            mainWrapper.object.type === 'MemberExpression' &&
+            mainWrapper.object.object.type === 'MemberExpression' &&
+            mainWrapper.object.object.object.type === 'Identifier' &&
+            checkImport(mainWrapper.object.object.object.name)) {
+            const level = mainWrapper.object.property.name;
+            const size = mainWrapper.property.name;
+            const prop = property.name;
+            const { values } = mapping.type.keys.levels;
+            const levels = values[level];
+            const tokens = levels[size];
+            const value = tokens[prop];
+            if (value) {
+                addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
+                return j.callExpression(j.identifier('cssVar'), [varToMemberExpression(j, value)]);
+            }
+        }
+        return nodePath;
+    });
+    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)));
+    })
+        .replaceWith(nodePath => {
+        const mainWrapper = nodePath.value.object;
+        if (mainWrapper.type === 'MemberExpression' &&
+            mainWrapper.object.type === 'MemberExpression') {
+            addMissingImports({ j, root }, { importPath: '@workday/canvas-tokens-web', specifiers: ['system'] });
+            const mainProperty = mainWrapper.object.property;
+            const innerProperty = mainWrapper.property;
+            const lowestProperty = nodePath.value.property;
+            if (mainProperty.type === 'Identifier' &&
+                innerProperty.type === 'Identifier' &&
+                (lowestProperty.type === 'Identifier' || lowestProperty.type === 'NumericLiteral')) {
+                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 newValue = values[lowestPropertyValue];
+                    addMissingImports({ j, root }, { importPath: '@workday/canvas-kit-styling', specifiers: ['cssVar'] });
+                    if (newValue.includes('.')) {
+                        const [first, second] = newValue.split('.');
+                        return j.callExpression(j.identifier('cssVar'), [
+                            j.memberExpression(j.memberExpression(j.memberExpression(j.identifier('system'), j.identifier(name)), j.identifier(first)), j.identifier(second)),
+                        ]);
+                    }
+                    else {
+                        return j.callExpression(j.identifier('cssVar'), [
+                            j.memberExpression(j.memberExpression(j.identifier('system'), j.identifier(name)), j.identifier(newValue)),
+                        ]);
+                    }
+                }
+                else if (mainProperty.name === 'levels') {
+                    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);
+                }
+            }
+        }
+        return nodePath;
+    });
+    return root.toSource();
+};
+export default transform;

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

@@ -0,0 +1,2 @@
+export declare const addMissingImports: ({ j, root }: any, { importPath, specifiers, localName }: any) => void;
+//# sourceMappingURL=addMissingImports.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"addMissingImports.d.ts","sourceRoot":"","sources":["../../../../lib/v13.2/utils/addMissingImports.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,gBAAe,GAAG,yCAAuC,GAAG,SA4CzF,CAAC"}

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

@@ -0,0 +1,30 @@
+export const addMissingImports = ({ j, root }, { importPath, specifiers, localName }) => {
+    const [existingImport] = root
+        .find(j.ImportDeclaration, {
+        source: {
+            value: (value) => value.includes(importPath),
+        },
+    })
+        .nodes();
+    if (existingImport) {
+        specifiers.forEach((specifier) => {
+            var _a;
+            if (!((_a = existingImport.specifiers) === null || _a === void 0 ? void 0 : _a.some((existingSpecifier) => existingSpecifier.type === 'ImportSpecifier' &&
+                existingSpecifier.imported.name === specifier))) {
+                existingImport.specifiers.push(j.importSpecifier(j.identifier(specifier), j.identifier(localName || specifier)));
+                existingImport.specifiers.sort((a, b) => {
+                    return a.imported.name.toString().localeCompare(b.imported.name.toString());
+                });
+            }
+        });
+        return;
+    }
+    const newImport = j.importDeclaration(specifiers.map((specifier) => j.importSpecifier(j.identifier(specifier), j.identifier(localName || specifier))), j.stringLiteral(importPath));
+    const firstImport = root.find(j.ImportDeclaration).paths()[0];
+    if (firstImport) {
+        firstImport.insertAfter(newImport);
+    }
+    else {
+        root.get().node.program.body.unshift(newImport);
+    }
+};

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

@@ -0,0 +1,3 @@
+import { Options, Transform } from 'jscodeshift';
+export declare const expectTransformFactory: (fn: Transform) => (input: string, expected: string, options?: Options) => string;
+//# sourceMappingURL=expectTransformFactory.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"expectTransformFactory.d.ts","sourceRoot":"","sources":["../../../../lib/v13.2/utils/expectTransformFactory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAE,SAAS,EAAC,MAAM,aAAa,CAAC;AAG/C,eAAO,MAAM,sBAAsB,OAC5B,SAAS,aACN,MAAM,YAAY,MAAM,YAAW,OAAO,WAEjD,CAAC"}

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

@@ -0,0 +1,4 @@
+import { runInlineTest } from 'jscodeshift/src/testUtils';
+export const expectTransformFactory = (fn) => (input, expected, options = {}) => {
+    return runInlineTest(fn, options, { source: input }, expected, { parser: 'tsx' });
+};

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,19 @@
+export const filterOutImports = (nodePath) => {
+    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) {
+            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')));
+        }
+        return true;
+    });
+    if (!((_b = nodePath.value.specifiers) === null || _b === void 0 ? void 0 : _b.length)) {
+        nodePath.prune();
+    }
+    return importName;
+};

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

@@ -0,0 +1,8 @@
+export declare const generateLevelTokens: ([level, size]: string[]) => {
+    fontFamily?: string | undefined;
+    fontSize?: string | undefined;
+    lineHeight?: string | undefined;
+    fontWeight?: string | undefined;
+    color?: string | undefined;
+};
+//# sourceMappingURL=generateLevelTokens.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generateLevelTokens.d.ts","sourceRoot":"","sources":["../../../../lib/v13.2/utils/generateLevelTokens.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,kBAAmB,MAAM,EAAE;;;;;;CAkB1D,CAAC"}

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

@@ -0,0 +1,20 @@
+import { typeProps } from '../mapping/typeProps';
+export const generateLevelTokens = ([level, size]) => {
+    const isHeadingStyle = ['heading', 'title'].includes(level);
+    return typeProps.reduce((acc, prop) => {
+        switch (prop) {
+            case 'color':
+                acc.color = `system.color.fg.${isHeadingStyle ? 'strong' : 'default'}`;
+                break;
+            case 'fontWeight':
+                acc.fontWeight = `system.fontWeight.${isHeadingStyle ? 'bold' : 'regular'}`;
+                break;
+            case 'fontFamily':
+                acc.fontFamily = 'system.fontFamily.default';
+                break;
+            default:
+                acc[prop] = `system.${prop}.${level}.${size}`;
+        }
+        return acc;
+    }, {});
+};

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

@@ -0,0 +1,7 @@
+export * from './addMissingImports';
+export * from './filterOutImports';
+export * from './generateLevelTokens';
+export * from './expectTransformFactory';
+export * from './varToMemberExpression';
+export * from './transformObjectPropertyRecursively';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

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

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

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

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

@@ -0,0 +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,GAsIF,CAAC"}

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

@@ -0,0 +1,74 @@
+import { systemColors } from '../mapping';
+import { addMissingImports } from './addMissingImports';
+import { varToMemberExpression } from './varToMemberExpression';
+export const transformObjectPropertyRecursively = ({ j, root }, property, importDeclaration, isCanvasKitStyling) => {
+    var _a, _b, _c;
+    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 === 'ConditionalExpression') {
+        const { test, consequent, alternate } = property.value;
+        if (consequent.type === 'MemberExpression' &&
+            consequent.object.type === 'Identifier' &&
+            consequent.property.type === 'Identifier' &&
+            importDeclaration[consequent.object.name] === 'colors' &&
+            alternate.type === 'MemberExpression' &&
+            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 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'] });
+                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),
+                ])));
+            }
+        }
+    }
+    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 property;
+};

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

@@ -0,0 +1,2 @@
+export declare const varToMemberExpression: (j: any, value: string) => any;
+//# sourceMappingURL=varToMemberExpression.d.ts.map

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

@@ -0,0 +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"}

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

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

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.0.0-alpha.1151-next.0",
+  "version": "14.0.0-alpha.1156-next.0",
   "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": "891b0d79a8054c5cd3799eb8dd2e0c3b0f15a47b"
+  "gitHead": "e5711be8fa7794a67a880925c1b582a1abbcfbf6"
 }