@workday/canvas-kit-react 10.0.0-alpha.538-next.0 → 10.0.0-alpha.540-next.0

package/dist/commonjs/button/lib/TertiaryButton.js

@@ -19,147 +19,149 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TertiaryButton = void 0;
+exports.TertiaryButton = exports.tertiaryButtonModifiers = void 0;
 const React = __importStar(require("react"));
+const BaseButton_1 = require("./BaseButton");
 const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
-const BaseButton_1 = require("./BaseButton");
-const getTertiaryButtonColors = (variant, theme, hasThemeStyles) => {
-    const { canvas: { palette: { primary: themePrimary }, }, } = theme;
-    if (variant === 'inverse') {
-        return {
-            default: {
-                background: 'transparent',
-                icon: tokens_1.colors.frenchVanilla100,
-                label: tokens_1.colors.frenchVanilla100,
-            },
-            hover: {
-                background: tokens_1.colors.frenchVanilla100,
-                icon: tokens_1.colors.blackPepper400,
-                label: tokens_1.colors.blackPepper400,
-            },
-            active: {
-                background: tokens_1.colors.soap200,
-                icon: tokens_1.colors.blackPepper400,
-                label: tokens_1.colors.blackPepper400,
-            },
-            focus: {
-                background: tokens_1.colors.frenchVanilla100,
-                icon: tokens_1.colors.blackPepper400,
-                label: tokens_1.colors.blackPepper400,
-                focusRing: common_1.focusRing({
-                    separation: 2,
+const Button_1 = require("./Button");
+const tertiaryStyles = canvas_kit_styling_1.createStyles({
+    paddingInline: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x2, tokens_1.space.xxs),
+    minWidth: 'auto',
+    textDecoration: 'underline',
+    border: 0,
+    // Default Styles
+    [BaseButton_1.buttonVars.default.background]: 'transparent',
+    [BaseButton_1.buttonVars.default.border]: 'transparent',
+    [BaseButton_1.buttonVars.default.borderRadius]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.shape.medium),
+    [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base),
+    [BaseButton_1.buttonVars.default.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
+    // Hover Styles
+    [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap200),
+    [BaseButton_1.buttonVars.hover.border]: 'transparent',
+    [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.dark),
+    [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
+    // Focus Styles
+    [BaseButton_1.buttonVars.focus.background]: 'transparent',
+    [BaseButton_1.buttonVars.focus.border]: 'transparent',
+    [BaseButton_1.buttonVars.focus.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base),
+    [BaseButton_1.buttonVars.focus.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
+    [BaseButton_1.buttonVars.focus.boxShadowInner]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline),
+    [BaseButton_1.buttonVars.focus.boxShadowOuter]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline),
+    // Active Styles
+    [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap300),
+    [BaseButton_1.buttonVars.active.border]: 'transparent',
+    [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.dark),
+    [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
+    // Disabled Styles
+    [BaseButton_1.buttonVars.disabled.background]: 'transparent',
+    [BaseButton_1.buttonVars.disabled.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
+    [BaseButton_1.buttonVars.disabled.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base),
+    [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
+    [BaseButton_1.buttonVars.disabled.opacity]: '0.4',
+    '&:focus-visible, &.focus': {
+        ...common_1.focusRing({
+            width: 2,
+            separation: 0,
+            innerColor: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, canvas_kit_styling_1.cssVar(BaseButton_1.buttonVars.focus.boxShadowInner)),
+            outerColor: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline, canvas_kit_styling_1.cssVar(BaseButton_1.buttonVars.focus.boxShadowOuter)),
+        }),
+    },
+});
+exports.tertiaryButtonModifiers = canvas_kit_styling_1.createModifiers({
+    isThemeable: {
+        true: canvas_kit_styling_1.createStyles({
+            [BaseButton_1.buttonVars.default.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base),
+            [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.dark),
+            [BaseButton_1.buttonVars.focus.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base),
+            [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.dark),
+            [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base),
+        }),
+    },
+    variant: {
+        inverse: canvas_kit_styling_1.createStyles({
+            // Default Styles
+            [BaseButton_1.buttonVars.default.background]: 'transparent',
+            [BaseButton_1.buttonVars.default.border]: 'transparent',
+            [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
+            [BaseButton_1.buttonVars.default.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
+            // Hover Styles
+            [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
+            [BaseButton_1.buttonVars.hover.border]: 'transparent',
+            [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
+            [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
+            // Focus Styles
+            [BaseButton_1.buttonVars.focus.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
+            [BaseButton_1.buttonVars.focus.border]: 'transparent',
+            [BaseButton_1.buttonVars.focus.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
+            [BaseButton_1.buttonVars.focus.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
+            // Active Styles
+            [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap200),
+            [BaseButton_1.buttonVars.active.border]: 'transparent',
+            [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
+            [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
+            // Disabled Styles
+            [BaseButton_1.buttonVars.disabled.background]: 'transparent',
+            [BaseButton_1.buttonVars.disabled.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
+            [BaseButton_1.buttonVars.disabled.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
+            [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
+            '&:focus-visible, &.focus': {
+                ...common_1.focusRing({
                     inset: 'inner',
-                    innerColor: 'currentColor',
-                    outerColor: tokens_1.colors.frenchVanilla100,
-                }, theme),
-            },
-            disabled: {
-                background: 'transparent',
-                icon: tokens_1.colors.frenchVanilla100,
-                label: tokens_1.colors.frenchVanilla100,
-            },
-        };
-    }
-    else {
-        return {
-            default: {
-                icon: hasThemeStyles ? themePrimary.main : tokens_1.colors.blackPepper400,
-                label: themePrimary.main,
-            },
-            hover: {
-                background: tokens_1.colors.soap200,
-                icon: hasThemeStyles ? themePrimary.dark : tokens_1.colors.blackPepper500,
-                label: themePrimary.dark,
-            },
-            active: {
-                background: tokens_1.colors.soap300,
-                icon: hasThemeStyles ? themePrimary.dark : tokens_1.colors.blackPepper500,
-                label: themePrimary.dark,
-            },
-            focus: {
-                icon: hasThemeStyles ? themePrimary.main : tokens_1.colors.blackPepper500,
-                label: themePrimary.main,
-                focusRing: common_1.focusRing({ innerColor: tokens_1.colors.blueberry400 }, theme),
-            },
-            disabled: {
-                background: 'transparent',
-                icon: hasThemeStyles ? themePrimary.main : tokens_1.colors.blackPepper400,
-                label: themePrimary.main,
+                    width: 2,
+                    separation: 2,
+                    innerColor: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400, canvas_kit_styling_1.cssVar(BaseButton_1.buttonVars.focus.boxShadowInner)),
+                    outerColor: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100, canvas_kit_styling_1.cssVar(BaseButton_1.buttonVars.focus.boxShadowOuter)),
+                }),
             },
-        };
-    }
-};
-const StyledButtonLabel = common_1.styled(BaseButton_1.BaseButton.Label)({
-    textDecoration: 'underline',
+        }),
+    },
+    iconPosition: {
+        largeOnly: canvas_kit_styling_1.createStyles({
+            borderRadius: tokens_1.borderRadius.circle,
+            padding: '0',
+            minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x12),
+        }),
+        largeStart: canvas_kit_styling_1.createStyles({
+            paddingInlineStart: tokens_1.space.xxs,
+            paddingInlineEnd: tokens_1.space.xs,
+        }),
+        largeEnd: canvas_kit_styling_1.createStyles({ paddingInlineStart: tokens_1.space.xs, paddingInlineEnd: tokens_1.space.xxs }),
+        mediumOnly: canvas_kit_styling_1.createStyles({ padding: '0', minWidth: tokens_1.space.xl, borderRadius: tokens_1.borderRadius.circle }),
+        mediumStart: canvas_kit_styling_1.createStyles({ paddingInlineStart: tokens_1.space.xxs, paddingInlineEnd: tokens_1.space.xs }),
+        mediumEnd: canvas_kit_styling_1.createStyles({ paddingInlineStart: tokens_1.space.xs, paddingInlineEnd: tokens_1.space.xxs }),
+        smallOnly: canvas_kit_styling_1.createStyles({ padding: '0', minWidth: tokens_1.space.l, borderRadius: tokens_1.borderRadius.circle }),
+        smallStart: canvas_kit_styling_1.createStyles({ paddingInlineStart: tokens_1.space.xxs, paddingInlineEnd: tokens_1.space.xs }),
+        smallEnd: canvas_kit_styling_1.createStyles({ paddingInlineStart: tokens_1.space.xs, paddingInlineEnd: tokens_1.space.xxs }),
+        extraSmallOnly: canvas_kit_styling_1.createStyles({
+            padding: '0',
+            minWidth: tokens_1.space.m,
+            borderRadius: tokens_1.borderRadius.circle,
+        }),
+        extraSmallStart: canvas_kit_styling_1.createStyles({ paddingInlineStart: tokens_1.space.xxxs, paddingInlineEnd: tokens_1.space.xxs }),
+        extraSmallEnd: canvas_kit_styling_1.createStyles({ paddingInlineStart: tokens_1.space.xxs, paddingInlineEnd: tokens_1.space.xxxs }),
+    },
 });
-const StyledTertiaryButtonContainer = common_1.styled(BaseButton_1.BaseButton)({
-    border: '0',
-}, ({ allCaps }) => ({
-    textTransform: allCaps ? 'uppercase' : undefined,
-}));
-const getPaddingStyles = (icon, iconPosition, children, size) => {
-    if (children) {
-        // if there is an icon on the left, add 4px extra padding to the right for visual balance
-        if (icon && iconPosition === 'start') {
-            if (size === 'extraSmall') {
-                return `0 ${tokens_1.space.xxs} 0 ${tokens_1.space.xxxs}`;
-            }
-            return `0 ${tokens_1.space.xs} 0 ${tokens_1.space.xxs}`;
-        }
-        // if there is an icon on the right, add 4px extra padding to the left for visual balance
-        if (icon && iconPosition === 'end') {
-            if (size === 'extraSmall') {
-                return `0 ${tokens_1.space.xxxs} 0 ${tokens_1.space.xxs}`;
-            }
-            return `0 ${tokens_1.space.xxs} 0 ${tokens_1.space.xs}`;
-        }
-        // if there is no icon, return the default padding
-        return `0 ${tokens_1.space.xxs}`;
-    }
-    else {
-        return '0';
-    }
-};
-const getMinWidthStyles = (children, size) => {
-    let minWidthNum;
-    switch (size) {
-        case 'large':
-            minWidthNum = '48px';
-            break;
-        case 'medium':
-            minWidthNum = tokens_1.space.xl;
-            break;
-        case 'small':
-            minWidthNum = tokens_1.space.l;
-            break;
-        case 'extraSmall':
-            minWidthNum = tokens_1.space.m;
-            break;
-        default:
-            minWidthNum = tokens_1.space.xl;
-            break;
-    }
-    return children ? 'auto' : minWidthNum;
-};
-/**
- * Tertiary Buttons have the lowest emphasis. Use for less important actions that the user may not
- * often be looking to do. Tertiary Buttons have lower prominence as its container is not visible
- * until it is interacted with. Use Tertiary Buttons for supplemental actions such as “View More”,
- * “Read More” or “Select a File”. Tertiary Buttons are frequently used on Cards.
- *
- * Tertiary Buttons have four sizes: `extraSmall`, `small`, `medium` and `large`. Icons are
- * supported for every size and can be positioned at the `start` or `end` with the `iconPosition`
- * prop.
- */
 exports.TertiaryButton = common_1.createComponent('button')({
     displayName: 'TertiaryButton',
-    Component: ({ size = 'medium', iconPosition = 'start', isThemeable = false, variant, children, icon, shouldMirrorIcon = false, ...elemProps }, ref, Element) => {
-        const theme = common_1.useTheme();
-        const hasThemeStyles = !!children || isThemeable;
-        return (React.createElement(StyledTertiaryButtonContainer, Object.assign({ ref: ref, as: Element, colors: getTertiaryButtonColors(variant, theme, hasThemeStyles), size: size, padding: getPaddingStyles(icon, iconPosition, children, size), minWidth: getMinWidthStyles(children, size), borderRadius: children ? tokens_1.borderRadius.m : tokens_1.borderRadius.circle }, elemProps),
-            icon && iconPosition === 'start' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
-            children && React.createElement(StyledButtonLabel, null, children),
-            icon && iconPosition === 'end' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
+    Component: ({ children, icon, colors, size = 'medium', isThemeable, variant, iconPosition, cs, ...elemProps }, ref, Element) => {
+        const baseIconPosition = iconPosition
+            ? iconPosition
+            : icon
+                ? children
+                    ? 'start'
+                    : 'only'
+                : undefined;
+        return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref, icon: icon, iconPosition: iconPosition, size: size, cs: [
+                tertiaryStyles,
+                exports.tertiaryButtonModifiers({
+                    isThemeable: (isThemeable || baseIconPosition !== 'only'),
+                    variant: variant,
+                    iconPosition: BaseButton_1.getIconPosition(size, baseIconPosition),
+                }),
+                cs,
+            ] }, elemProps), children));
     },
 });

package/dist/commonjs/button/lib/ToolbarDropdownButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarDropdownButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAI1C,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAE3D,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,gBAAgB,CAAC,EAChE,SAAS;CAAG;AAwBhB,eAAO,MAAM,qBAAqB,mGAuChC,CAAC"}
+{"version":3,"file":"ToolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarDropdownButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAK1C,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAG3D,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,gBAAgB,CAAC,EAChE,SAAS;CAAG;AAgChB,eAAO,MAAM,qBAAqB,mGAuChC,CAAC"}

package/dist/commonjs/button/lib/ToolbarDropdownButton.js

@@ -7,17 +7,19 @@ exports.ToolbarDropdownButton = void 0;
 const react_1 = __importDefault(require("react"));
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const BaseButton_1 = require("./BaseButton");
 const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const StyledToolbarDropdownButton = common_1.styled(BaseButton_1.BaseButton)({
     padding: tokens_1.space.zero,
     minWidth: tokens_1.space.l,
     width: 'auto',
     height: tokens_1.space.l,
     borderRadius: tokens_1.borderRadius.m,
+    gap: tokens_1.space.zero,
     '& .wd-icon': {
         display: 'inline-block',
-        verticalAlign: 'middle',
         width: 20,
         height: 20,
     },
@@ -29,6 +31,14 @@ const StyledToolbarDropdownButton = common_1.styled(BaseButton_1.BaseButton)({
         marginRight: 0,
         width: 18, // decrease the space between a custom icon and the chevron per design
     },
+    '&:focus-visible, &.focus': {
+        ...common_1.focusRing({
+            width: 2,
+            separation: 0,
+            innerColor: 'transparent',
+            outerColor: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline),
+        }),
+    },
 });
 exports.ToolbarDropdownButton = common_1.createComponent('button')({
     displayName: 'ToolbarDropdownButton',
@@ -56,7 +66,6 @@ const getToolbarDropdownButtonColors = (theme) => {
         },
         focus: {
             icon: tokens_1.colors.licorice200,
-            focusRing: common_1.focusRing({ width: 2, separation: 0 }, theme),
             background: 'transparent',
         },
         disabled: {

package/dist/commonjs/button/lib/ToolbarIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAErD,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC,EACnD,SAAS;IACX,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAWD,eAAO,MAAM,iBAAiB,+FAiD5B,CAAC"}
+{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAI1C,OAAO,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;AAGrD,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAC,EACnD,SAAS;IACX,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAkBD,eAAO,MAAM,iBAAiB,+FAiD5B,CAAC"}

package/dist/commonjs/button/lib/ToolbarIconButton.js

@@ -23,14 +23,23 @@ exports.ToolbarIconButton = void 0;
 const React = __importStar(require("react"));
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const BaseButton_1 = require("./BaseButton");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const StyledToolbarIconButton = common_1.styled(BaseButton_1.BaseButton)({
     ['& .wd-icon']: {
         display: 'inline-block',
-        verticalAlign: 'middle',
         width: 20,
         height: 20,
     },
+    '&:focus-visible, &.focus': {
+        ...common_1.focusRing({
+            width: 2,
+            separation: 0,
+            innerColor: 'transparent',
+            outerColor: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline),
+        }),
+    },
 });
 exports.ToolbarIconButton = common_1.createComponent('button')({
     displayName: 'ToolbarIconButton',
@@ -70,7 +79,6 @@ const getToolbarIconButtonColors = (theme, toggled) => {
         },
         focus: {
             icon: toggled ? themePrimary.main : tokens_1.colors.licorice200,
-            focusRing: common_1.focusRing({ width: 2, separation: 0 }, theme),
             background: toggled ? themePrimary.lightest : 'transparent',
         },
         disabled: {

package/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts

@@ -1,4 +1,4 @@
-import { ButtonSizes, IconPositions } from '../types';
+import { ButtonSizes } from '../types';
 import { SystemIconProps } from '@workday/canvas-kit-react/icon';
 export interface ButtonLabelIconProps extends Partial<SystemIconProps> {
     /**
@@ -7,12 +7,6 @@ export interface ButtonLabelIconProps extends Partial<SystemIconProps> {
      * @default 'medium'
      */
     size?: ButtonSizes;
-    /**
-     * Button icon positions can either be `left` or `right`.
-     * If no value is provided, it defaults to `left`.
-     * @default 'start'
-     */
-    iconPosition?: IconPositions;
     /**
      * If set to `true`, transform the icon's x-axis to mirror the graphic
      * @default false

package/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonLabelIcon.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonLabelIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAE,aAAa,EAAC,MAAM,UAAU,CAAC;AAEpD,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE3E,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC;IACpE;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AASD,eAAO,MAAM,eAAe,2FAyB1B,CAAC"}
+{"version":3,"file":"ButtonLabelIcon.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonLabelIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;AAErC,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE3E,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC;IACpE;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AASD,eAAO,MAAM,eAAe,2FAyB1B,CAAC"}

package/dist/commonjs/button/lib/types.d.ts

@@ -11,13 +11,13 @@ export interface ButtonStateColors {
     opacity?: string;
 }
 export interface ButtonColors {
-    default: ButtonStateColors;
-    hover: ButtonStateColors;
-    active: ButtonStateColors;
-    focus: ButtonStateColors & {
+    default?: ButtonStateColors;
+    hover?: ButtonStateColors;
+    active?: ButtonStateColors;
+    focus?: ButtonStateColors & {
         focusRing?: CSSObject;
     };
-    disabled: ButtonStateColors;
+    disabled?: ButtonStateColors;
 }
 /**
  * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
@@ -26,6 +26,5 @@ export interface ButtonColors {
  * @default 'medium'
  */
 export declare type ButtonSizes = 'extraSmall' | 'small' | 'medium' | 'large';
-export declare type TertiaryButtonSizes = 'extraSmall' | 'small' | 'medium';
-export declare type IconPositions = 'start' | 'end';
+export declare type IconPositions = 'start' | 'end' | 'only';
 //# sourceMappingURL=types.d.ts.map

package/dist/commonjs/button/lib/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../button/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,KAAK,EAAE,iBAAiB,CAAC;IACzB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,EAAE,iBAAiB,GAAG;QACzB,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IACF,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED;;;;;GAKG;AACH,oBAAY,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtE,oBAAY,mBAAmB,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,CAAC;AACpE,oBAAY,aAAa,GAAG,OAAO,GAAG,KAAK,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../button/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,iBAAiB,GAAG;QAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IACF,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED;;;;;GAKG;AACH,oBAAY,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACtE,oBAAY,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC"}

package/dist/commonjs/card/lib/Card.d.ts

@@ -44,6 +44,6 @@ export declare const Card: import("@workday/canvas-kit-react/common").ElementCom
      * dialog), it may be helpful to add an `aria-describedby` referencing the `id` of the
      * `Card.Body` to the `Card` container.
      */
-    Body: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps>;
+    Body: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps>;
 };
 //# sourceMappingURL=Card.d.ts.map

package/dist/commonjs/card/lib/CardBody.d.ts

@@ -1,2 +1,2 @@
-export declare const CardBody: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps>;
+export declare const CardBody: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps>;
 //# sourceMappingURL=CardBody.d.ts.map

package/dist/commonjs/card/lib/CardBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardBody.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardBody.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ,8hCASnB,CAAC"}
+{"version":3,"file":"CardBody.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardBody.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ,8kCASnB,CAAC"}

package/dist/commonjs/checkbox/lib/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAOT,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAY1C,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAqPD,eAAO,MAAM,QAAQ;;CA2EnB,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAOT,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAM1C,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAkPD,eAAO,MAAM,QAAQ;;CA2EnB,CAAC"}

package/dist/commonjs/checkbox/lib/Checkbox.js

@@ -26,16 +26,10 @@ const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const icon_1 = require("@workday/canvas-kit-react/icon");
 const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 const text_1 = require("@workday/canvas-kit-react/text");
-const checkboxHeight = (tokens_1.spaceNumbers.xl - tokens_1.spaceNumbers.xxxs) / 2;
-const checkboxTapArea = tokens_1.space.m;
-const checkboxContainerHeight = checkboxTapArea;
-const checkboxLabelDistance = `${tokens_1.spaceNumbers.xs}rem`;
-const checkboxWidth = checkboxHeight;
-const rippleRadius = (tokens_1.spaceNumbers.l - checkboxWidth) / 2;
 const CheckboxContainer = common_1.styled('div')({
     display: 'flex',
     alignItems: 'center',
-    minHeight: checkboxContainerHeight,
+    minHeight: tokens_1.space.m,
     position: 'relative',
 });
 /**
@@ -45,17 +39,17 @@ const CheckboxContainer = common_1.styled('div')({
  */
 const CheckboxInputWrapper = common_1.styled('div')({
     display: 'flex',
-    height: `${checkboxHeight}rem`,
-    minWidth: `${checkboxWidth}rem`,
+    height: `calc(${tokens_1.space.s} + 2px)`,
+    minWidth: `calc(${tokens_1.space.s} + 2px)`,
     marginTop: '3px',
     alignSelf: 'flex-start',
 });
 const CheckboxRipple = common_1.styled('span')({
     borderRadius: tokens_1.borderRadius.circle,
     boxShadow: `0 0 0 0 ${tokens_1.colors.soap200}`,
-    height: `${checkboxHeight}rem`,
+    height: `calc(${tokens_1.space.s} + 2px)`,
     transition: 'box-shadow 150ms ease-out',
-    width: `${checkboxWidth}rem`,
+    width: `calc(${tokens_1.space.s} + 2px)`,
     position: 'absolute',
     pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
 }, ({ variant }) => ({
@@ -67,8 +61,8 @@ const CheckboxRipple = common_1.styled('span')({
  */
 const CheckboxInput = common_1.styled('input')(({ theme: { canvas: { palette: { primary: themePrimary, common: { focusOutline: themeFocusOutline }, }, }, }, variant, }) => ({
     borderRadius: tokens_1.borderRadius.s,
-    width: checkboxTapArea,
-    height: checkboxTapArea,
+    width: tokens_1.space.m,
+    height: tokens_1.space.m,
     margin: 0,
     marginTop: '-3px',
     marginLeft: '-3px',
@@ -146,7 +140,9 @@ const CheckboxInput = common_1.styled('input')(({ theme: { canvas: { palette: {
     }),
 }), ({ disabled }) => ({
     '&:hover ~ span:first-of-type': {
-        boxShadow: disabled ? undefined : `0 0 0 ${rippleRadius}rem ${tokens_1.colors.soap200}`,
+        boxShadow: disabled
+            ? undefined
+            : `0 0 0 calc((${tokens_1.space.l} - (${tokens_1.space.s} + 2px)) / 2) ${tokens_1.colors.soap200}`,
     },
 }), ({ theme, error, variant }) => {
     const errorColors = common_1.getErrorColors(error, theme);
@@ -189,13 +185,13 @@ const CheckboxBackground = common_1.styled('div')({
     borderRadius: tokens_1.borderRadius.s,
     boxSizing: 'border-box',
     display: 'flex',
-    height: `${checkboxHeight}rem`,
+    height: `calc(${tokens_1.space.s} + 2px)`,
     justifyContent: 'center',
     padding: '0px 2px',
     pointerEvents: 'none',
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
-    width: `${checkboxWidth}rem`,
+    width: `calc(${tokens_1.space.s} + 2px)`,
 }, ({ variant }) => ({
     border: `1px solid ${variant === 'inverse' ? tokens_1.colors.soap300 : tokens_1.inputColors.border}`,
 }));
@@ -248,7 +244,7 @@ exports.Checkbox = common_1.createComponent('input')({
                     React.createElement(CheckboxCheck, { checked: checked, indeterminate: indeterminate }, indeterminate ? (React.createElement(IndeterminateBox, { variant: variant })) : checked ? (React.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.checkSmallIcon, color: variant === 'inverse'
                             ? theme.canvas.palette.primary.main
                             : theme.canvas.palette.primary.contrast })) : null))),
-            label && (React.createElement(text_1.LabelText, { htmlFor: inputId, disabled: disabled, variant: variant, paddingInlineStart: checkboxLabelDistance, cursor: "pointer" }, label))));
+            label && (React.createElement(text_1.LabelText, { htmlFor: inputId, disabled: disabled, variant: variant, paddingInlineStart: tokens_1.space.xs, cursor: "pointer" }, label))));
     },
     subComponents: {
         ErrorType: common_1.ErrorType,

package/dist/commonjs/common/lib/CanvasProvider.d.ts

@@ -3,12 +3,5 @@ import { PartialEmotionCanvasTheme } from './theming';
 export interface CanvasProviderProps {
     theme: PartialEmotionCanvasTheme;
 }
-export declare class CanvasProvider extends React.Component<CanvasProviderProps & React.HTMLAttributes<HTMLElement>> {
-    static defaultProps: {
-        theme: {
-            canvas: import("./theming").CanvasTheme;
-        };
-    };
-    render(): JSX.Element;
-}
+export declare const CanvasProvider: ({ children, theme, ...props }: CanvasProviderProps & React.HTMLAttributes<HTMLElement>) => JSX.Element;
 //# sourceMappingURL=CanvasProvider.d.ts.map

package/dist/commonjs/common/lib/CanvasProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,yBAAyB,EAAC,MAAM,WAAW,CAAC;AAExE,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,yBAAyB,CAAC;CAClC;AAED,qBAAa,cAAe,SAAQ,KAAK,CAAC,SAAS,CACjD,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CACxD;IACC,MAAM,CAAC,YAAY;;;;MAIjB;IAEF,MAAM;CAeP"}
+{"version":3,"file":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,yBAAyB,EAAW,MAAM,WAAW,CAAC;AAGlF,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,yBAAyB,CAAC;CAClC;AAkCD,eAAO,MAAM,cAAc,kCAIxB,mBAAmB,GAAG,MAAM,cAAc,CAAC,WAAW,CAAC,gBAazD,CAAC"}

package/dist/commonjs/common/lib/CanvasProvider.js

@@ -24,17 +24,35 @@ const React = __importStar(require("react"));
 const react_1 = require("@emotion/react");
 const InputProvider_1 = require("./InputProvider");
 const theming_1 = require("./theming");
-class CanvasProvider extends React.Component {
-    render() {
-        const { children, theme, ...elemProps } = this.props;
-        return (React.createElement(react_1.ThemeProvider, { theme: theme },
-            React.createElement(InputProvider_1.InputProvider, null),
-            React.createElement("div", Object.assign({ dir: (theme.canvas && theme.canvas.direction) || theming_1.defaultCanvasTheme.direction }, elemProps), children)));
-    }
-}
-exports.CanvasProvider = CanvasProvider;
-CanvasProvider.defaultProps = {
-    theme: {
-        canvas: theming_1.defaultCanvasTheme,
-    },
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const mappedKeys = {
+    lightest: 'lightest',
+    light: 'light',
+    main: 'base',
+    dark: 'dark',
+    darkest: 'darkest',
+    contrast: 'accent',
+};
+const useCanvasThemeToCssVars = (theme, elemProps) => {
+    const filledTheme = theming_1.useTheme(theme);
+    const { palette } = filledTheme.canvas;
+    const style = ['common', 'primary', 'error', 'alert', 'success', 'neutral'].reduce((result, color) => {
+        if (color === 'common') {
+            // @ts-ignore
+            result[canvas_tokens_web_1.brand.common.focusOutline] = palette.common.focusOutline;
+        }
+        ['lightest', 'light', 'main', 'dark', 'darkest', 'contrast'].forEach(key => {
+            // @ts-ignore
+            result[canvas_tokens_web_1.brand[color][mappedKeys[key]]] = palette[color][key];
+        });
+        return result;
+    }, elemProps.style || {});
+    return { ...elemProps, style };
 };
+const CanvasProvider = ({ children, theme, ...props }) => {
+    const elemProps = useCanvasThemeToCssVars(theme, props);
+    return (React.createElement(react_1.ThemeProvider, { theme: theme },
+        React.createElement(InputProvider_1.InputProvider, null),
+        React.createElement("div", Object.assign({ dir: (theme.canvas && theme.canvas.direction) || theming_1.defaultCanvasTheme.direction }, elemProps), children)));
+};
+exports.CanvasProvider = CanvasProvider;