@workday/canvas-kit-react 10.0.0-alpha.537-next.0 → 10.0.0-alpha.539-next.0

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

@@ -0,0 +1,42 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const React = __importStar(require("react"));
+const BaseButton_1 = require("./BaseButton");
+const common_1 = require("@workday/canvas-kit-react/common");
+exports.Button = common_1.createComponent('button')({
+    displayName: 'Button',
+    Component: ({ children, icon, colors, iconPosition, shouldMirrorIcon, size = 'medium', ...elemProps }, ref, Element) => {
+        const baseIconPosition = iconPosition
+            ? iconPosition
+            : icon
+                ? children
+                    ? 'start'
+                    : 'only'
+                : undefined;
+        return (React.createElement(BaseButton_1.BaseButton, Object.assign({ as: Element, ref: ref, size: size, icon: icon, iconPosition: baseIconPosition }, elemProps),
+            icon && baseIconPosition === 'start' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
+            children && React.createElement(BaseButton_1.BaseButton.Label, null, children),
+            icon && baseIconPosition === 'only' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
+            icon && baseIconPosition === 'end' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
+    },
+});

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

@@ -1,12 +1,10 @@
-import * as React from 'react';
-import { BaseButtonProps } from './BaseButton';
-import { GrowthBehavior, Themeable } from '@workday/canvas-kit-react/common';
-export interface DeleteButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
-    /**
-     * The size of the Button.
-     */
-    size?: 'small' | 'medium' | 'large';
-    children?: React.ReactNode;
+import { ButtonProps } from './Button';
+/**
+ * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
+ * We omit `ref` since all of our buttons use `createComponent` and already give access to `ref`.
+ * Use this type to extend and customize any one off buttons that you want full control over styling.
+ */
+export interface DeleteButtonProps extends ButtonProps {
 }
 /**
  * Use sparingly for destructive actions that will result in data loss, can’t be undone, or will

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

@@ -1 +1 @@
-{"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/DeleteButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAa,eAAe,EAAsC,MAAM,cAAc,CAAC;AAC9F,OAAO,EACL,cAAc,EAEd,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAE1C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,cAAc,EAAE,eAAe;IACnF;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA0BD;;;;GAIG;AACH,eAAO,MAAM,YAAY,0FA0BvB,CAAC"}
+{"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/DeleteButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAE7C;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;CAAG;AA+BzD;;;;GAIG;AACH,eAAO,MAAM,YAAY,0FASvB,CAAC"}

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

@@ -23,23 +23,35 @@ exports.DeleteButton = void 0;
 const React = __importStar(require("react"));
 const BaseButton_1 = require("./BaseButton");
 const common_1 = require("@workday/canvas-kit-react/common");
-const getDeleteButtonColors = ({ canvas: { palette: { error: themeError }, }, }) => ({
-    default: {
-        background: themeError.main,
-        label: themeError.contrast,
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const Button_1 = require("./Button");
+const deleteStyles = canvas_kit_styling_1.createStyles({
+    [BaseButton_1.buttonVars.default.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.base),
+    [BaseButton_1.buttonVars.default.border]: 'transparent',
+    [BaseButton_1.buttonVars.default.borderRadius]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.shape.circle),
+    [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.accent),
+    '&:hover, &.hover': {
+        [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.dark),
+        [BaseButton_1.buttonVars.hover.border]: 'transparent',
+        [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.accent),
     },
-    hover: {
-        background: themeError.dark,
+    '&:focus-visible, &.focus': {
+        [BaseButton_1.buttonVars.focus.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.base),
+        [BaseButton_1.buttonVars.focus.border]: 'transparent',
+        [BaseButton_1.buttonVars.focus.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.accent),
+        [BaseButton_1.buttonVars.focus.boxShadowInner]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
+        [BaseButton_1.buttonVars.focus.boxShadowOuter]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.common.focusOutline),
     },
-    active: {
-        background: themeError.darkest,
+    '&:active, &.active': {
+        [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.darkest),
+        [BaseButton_1.buttonVars.active.border]: 'transparent',
+        [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.accent),
     },
-    focus: {
-        background: themeError.main,
-    },
-    disabled: {
-        background: themeError.light,
-        opacity: '1', // allows for overriding the default opacity of 0.4
+    '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
+        [BaseButton_1.buttonVars.disabled.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.light),
+        [BaseButton_1.buttonVars.disabled.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.error.accent),
+        opacity: 1,
     },
 });
 /**
@@ -49,9 +61,7 @@ const getDeleteButtonColors = ({ canvas: { palette: { error: themeError }, }, })
  */
 exports.DeleteButton = common_1.createComponent('button')({
     displayName: 'DeleteButton',
-    Component: ({ 
-    // TODO: Fix useTheme and make it a real hook
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    theme = common_1.useTheme(), size = 'medium', children, ...elemProps }, ref, Element) => (React.createElement(BaseButton_1.BaseButton, Object.assign({ padding: BaseButton_1.getPaddingStyles(children, size, undefined, undefined), minWidth: BaseButton_1.getMinWidthStyles(children, size), ref: ref, as: Element, colors: getDeleteButtonColors(theme), size: size }, elemProps),
-        React.createElement(BaseButton_1.BaseButton.Label, null, children))),
+    Component: ({ children, cs, size, ...elemProps }, ref, Element) => {
+        return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref, size: size, cs: [deleteStyles, cs] }, elemProps), children));
+    },
 });

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

@@ -1,42 +1,21 @@
-import * as React from 'react';
-import { GrowthBehavior, Themeable } from '@workday/canvas-kit-react/common';
-import { CanvasSystemIcon } from '@workday/design-assets-types';
-import { ButtonSizes, IconPositions } from './types';
-import { BaseButtonProps } from './BaseButton';
-export interface PrimaryButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
+import { ButtonProps } from './Button';
+/**
+ * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
+ * We omit `ref` since all of our buttons use `createComponent` and already give access to `ref`.
+ * Use this type to extend and customize any one off buttons that you want full control over styling.
+ */
+export interface PrimaryButtonProps extends ButtonProps {
     /**
-     * The variant of the PrimaryButton.
+     * Variant has an option for `inverse` which will inverse the styling
      */
     variant?: 'inverse';
-    /**
-     * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
-     * If no size is provided, it will default to `medium`.
-     */
-    size?: ButtonSizes;
-    /**
-     * The icon of the Button.
-     * Note: not displayed at `small` size
-     */
-    icon?: CanvasSystemIcon;
-    /**
-     * Button icon positions can either be `start` or `end`.
-     * If no value is provided, it defaults to `start`.
-     */
-    iconPosition?: IconPositions;
-    /**
-     * If set to `true`, transform the icon's x-axis to mirror the graphic
-     */
-    shouldMirrorIcon?: boolean;
-    children?: React.ReactNode;
 }
-/**
- * Primary Buttons are high emphasis. Use once per screen to draw attention to the highest priority
- * action. Multiple primary buttons make it confusing for the user to understand what action they
- * should take. Not all screens require a Primary Button.
- *
- * Primary 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.
- */
+export declare const primaryButtonModifiers: {
+    variant: {
+        inverse: string;
+    };
+} & ((modifiers: Partial<{
+    variant: "inverse";
+}>) => string);
 export declare const PrimaryButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", PrimaryButtonProps>;
 //# sourceMappingURL=PrimaryButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,cAAc,EAEd,SAAS,EAIV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACnD,OAAO,EAAa,eAAe,EAAsC,MAAM,cAAc,CAAC;AA0E9F,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,cAAc,EAAE,eAAe;IACpF;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,2FA+CxB,CAAC"}
+{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAE7C;;;;GAIG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAkCD,eAAO,MAAM,sBAAsB;;;;;;cA4BjC,CAAC;AAEH,eAAO,MAAM,aAAa,2FAqBxB,CAAC"}

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

@@ -19,88 +19,76 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PrimaryButton = void 0;
+exports.PrimaryButton = exports.primaryButtonModifiers = void 0;
 const React = __importStar(require("react"));
-const common_1 = require("@workday/canvas-kit-react/common");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const BaseButton_1 = require("./BaseButton");
-const getPrimaryButtonColors = (variant, theme) => {
-    const { canvas: { palette: { primary: themePrimary }, }, } = theme;
-    switch (variant) {
-        case undefined:
-        default:
-            return {
-                default: {
-                    background: themePrimary.main,
-                    icon: themePrimary.contrast,
-                    label: themePrimary.contrast,
-                },
-                hover: {
-                    background: themePrimary.dark,
-                },
-                active: {
-                    background: themePrimary.darkest,
-                },
-                focus: {
-                    background: themePrimary.main,
-                },
-                disabled: {
-                    background: themePrimary.main,
-                },
-            };
-        case 'inverse':
-            return {
-                default: {
-                    background: tokens_1.colors.frenchVanilla100,
-                    icon: tokens_1.colors.blackPepper400,
-                    label: tokens_1.colors.blackPepper400,
-                },
-                hover: {
-                    background: tokens_1.colors.soap300,
-                    icon: tokens_1.colors.blackPepper500,
-                    label: tokens_1.colors.blackPepper500,
-                },
-                active: {
-                    background: tokens_1.colors.soap400,
-                    icon: tokens_1.colors.blackPepper500,
-                    label: tokens_1.colors.blackPepper500,
-                },
-                focus: {
-                    background: tokens_1.colors.frenchVanilla100,
-                    border: tokens_1.colors.blackPepper400,
-                    icon: tokens_1.colors.blackPepper400,
-                    label: tokens_1.colors.blackPepper400,
-                    focusRing: common_1.focusRing({
-                        separation: 1,
-                        innerColor: tokens_1.colors.blackPepper400,
-                        outerColor: tokens_1.colors.frenchVanilla100,
-                    }, theme),
-                },
-                // Identical to inverse 'default' styles. ButtonContainer will set opacity to 40%
-                disabled: {
-                    background: tokens_1.colors.frenchVanilla100,
-                    icon: tokens_1.colors.blackPepper400,
-                    label: tokens_1.colors.blackPepper400,
-                },
-            };
-    }
-};
-/**
- * Primary Buttons are high emphasis. Use once per screen to draw attention to the highest priority
- * action. Multiple primary buttons make it confusing for the user to understand what action they
- * should take. Not all screens require a Primary Button.
- *
- * Primary 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.
- */
+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 Button_1 = require("./Button");
+const primaryStyles = canvas_kit_styling_1.createStyles({
+    // Default Styles
+    [BaseButton_1.buttonVars.default.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blueberry400)),
+    [BaseButton_1.buttonVars.default.border]: 'transparent',
+    [BaseButton_1.buttonVars.default.borderRadius]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.shape.circle),
+    [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
+    [BaseButton_1.buttonVars.default.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
+    // Hover Styles
+    [BaseButton_1.buttonVars.hover.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.dark),
+    [BaseButton_1.buttonVars.hover.border]: 'transparent',
+    [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
+    [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
+    // Focus Styles
+    [BaseButton_1.buttonVars.focus.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base),
+    [BaseButton_1.buttonVars.focus.border]: 'transparent',
+    [BaseButton_1.buttonVars.focus.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
+    [BaseButton_1.buttonVars.focus.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
+    [BaseButton_1.buttonVars.focus.boxShadowInner]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
+    [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.brand.primary.darkest),
+    [BaseButton_1.buttonVars.active.border]: 'transparent',
+    [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
+    [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
+    // Disabled Styles
+    [BaseButton_1.buttonVars.disabled.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base),
+    [BaseButton_1.buttonVars.disabled.border]: 'transparent',
+    [BaseButton_1.buttonVars.disabled.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
+    [BaseButton_1.buttonVars.disabled.opacity]: '0.4',
+    [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
+});
+exports.primaryButtonModifiers = canvas_kit_styling_1.createModifiers({
+    variant: {
+        inverse: canvas_kit_styling_1.createStyles({
+            // Default Styles
+            [BaseButton_1.buttonVars.default.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
+            [BaseButton_1.buttonVars.default.borderRadius]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.shape.circle),
+            [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
+            [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.soap300),
+            [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
+            [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
+            // Focus Styles
+            [BaseButton_1.buttonVars.focus.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
+            [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),
+            [BaseButton_1.buttonVars.focus.boxShadowInner]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
+            [BaseButton_1.buttonVars.focus.boxShadowOuter]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
+            // Active Styles
+            [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap400),
+            [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
+            [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
+            // Disabled Styles
+            [BaseButton_1.buttonVars.disabled.background]: 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.blackPepper400),
+            [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
+        }),
+    },
+});
 exports.PrimaryButton = common_1.createComponent('button')({
     displayName: 'PrimaryButton',
-    Component: ({ size = 'medium', iconPosition = 'start', variant, icon, shouldMirrorIcon = false, children, ...elemProps }, ref, Element) => {
-        const theme = common_1.useTheme();
-        return (React.createElement(BaseButton_1.BaseButton, Object.assign({ ref: ref, size: size, colors: getPrimaryButtonColors(variant, theme), padding: BaseButton_1.getPaddingStyles(children, size, icon, iconPosition), minWidth: BaseButton_1.getMinWidthStyles(children, size), as: Element }, elemProps),
-            icon && iconPosition === 'start' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
-            children && React.createElement(BaseButton_1.BaseButton.Label, null, children),
-            icon && iconPosition === 'end' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
+    Component: ({ children, icon, cs, iconPosition, variant, size, ...elemProps }, ref, Element) => {
+        return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref, size: size, icon: icon, iconPosition: iconPosition, cs: [primaryStyles, exports.primaryButtonModifiers({ variant: variant }), cs] }, elemProps), children));
     },
 });

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

@@ -1,48 +1,21 @@
-import * as React from 'react';
-import { GrowthBehavior, Themeable, EmotionCanvasTheme } from '@workday/canvas-kit-react/common';
-import { CanvasSystemIcon } from '@workday/design-assets-types';
-import { ButtonColors, ButtonSizes, IconPositions } from './types';
-import { BaseButtonProps } from './BaseButton';
-export interface SecondaryButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
-    /**
-     * The variant of the SecondaryButton.
-     * @default undefined
-     */
-    variant?: 'inverse' | undefined;
-    /**
-     * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
-     * If no size is provided, it will default to `medium`.
-     *
-     * @default 'medium'
-     */
-    size?: ButtonSizes;
-    /**
-     * The icon of the Button.
-     * Note: not displayed at `small` size
-     */
-    icon?: CanvasSystemIcon;
-    /**
-     * Button icon positions can either be `start` or `end`.
-     * If no value is provided, it defaults to `start`.
-     * @default 'start'
-     */
-    iconPosition?: IconPositions;
+import { ButtonProps } from './Button';
+/**
+ * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
+ * We omit `ref` since all of our buttons use `createComponent` and already give access to `ref`.
+ * Use this type to extend and customize any one off buttons that you want full control over styling.
+ */
+export interface SecondaryButtonProps extends ButtonProps {
     /**
-     * If set to `true`, transform the icon's x-axis to mirror the graphic
-     * @default false
+     * Variant has an option for `inverse` which will inverse the styling
      */
-    shouldMirrorIcon?: boolean;
-    children?: React.ReactNode;
+    variant?: 'inverse';
 }
-/**
- * Secondary Buttons have a medium level of emphasis. Use them for non-critical actions. Secondary
- * Buttons can be used on most pages without restrictions and work well for multiple actions of
- * equal weight. They can be used in conjunction with a Primary Button or independently.
- *
- * Secondary 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.
- */
+export declare const secondaryButtonModifiers: {
+    variant: {
+        inverse: string;
+    };
+} & ((modifiers: Partial<{
+    variant: "inverse";
+}>) => string);
 export declare const SecondaryButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", SecondaryButtonProps>;
-export declare const getSecondaryButtonColors: (variant: 'inverse' | undefined, theme: EmotionCanvasTheme) => ButtonColors;
 //# sourceMappingURL=SecondaryButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAa,eAAe,EAAsC,MAAM,cAAc,CAAC;AAE9F,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc,EAAE,eAAe;IACtF;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,6FA+C1B,CAAC;AAEH,eAAO,MAAM,wBAAwB,YAC1B,SAAS,GAAG,SAAS,SACvB,kBAAkB,KACxB,YAoFF,CAAC"}
+{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAS,WAAW,EAAC,MAAM,UAAU,CAAC;AAE7C;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAkCD,eAAO,MAAM,wBAAwB;;;;;;cAgCnC,CAAC;AAEH,eAAO,MAAM,eAAe,6FAoB1B,CAAC"}

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

@@ -19,105 +19,80 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSecondaryButtonColors = exports.SecondaryButton = void 0;
+exports.SecondaryButton = exports.secondaryButtonModifiers = 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 BaseButton_1 = require("./BaseButton");
-/**
- * Secondary Buttons have a medium level of emphasis. Use them for non-critical actions. Secondary
- * Buttons can be used on most pages without restrictions and work well for multiple actions of
- * equal weight. They can be used in conjunction with a Primary Button or independently.
- *
- * Secondary 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.
- */
+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 Button_1 = require("./Button");
+const secondaryStyles = canvas_kit_styling_1.createStyles({
+    // Default Styles
+    [BaseButton_1.buttonVars.default.background]: 'transparent',
+    [BaseButton_1.buttonVars.default.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
+    [BaseButton_1.buttonVars.default.borderRadius]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.shape.circle),
+    [BaseButton_1.buttonVars.default.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
+    [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.blackPepper400),
+    [BaseButton_1.buttonVars.hover.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
+    [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
+    [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
+    // Focus Styles
+    [BaseButton_1.buttonVars.focus.background]: 'transparent',
+    [BaseButton_1.buttonVars.focus.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
+    [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),
+    [BaseButton_1.buttonVars.focus.boxShadowInner]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
+    [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.blackPepper500),
+    [BaseButton_1.buttonVars.active.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
+    [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
+    [BaseButton_1.buttonVars.active.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent),
+    // Disabled Styles
+    [BaseButton_1.buttonVars.disabled.background]: 'transparent',
+    [BaseButton_1.buttonVars.disabled.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
+    [BaseButton_1.buttonVars.disabled.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
+    [BaseButton_1.buttonVars.disabled.opacity]: '0.4',
+    [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400),
+});
+exports.secondaryButtonModifiers = canvas_kit_styling_1.createModifiers({
+    variant: {
+        inverse: canvas_kit_styling_1.createStyles({
+            // Default Styles
+            [BaseButton_1.buttonVars.default.background]: 'transparent',
+            [BaseButton_1.buttonVars.default.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
+            [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.soap300),
+            [BaseButton_1.buttonVars.hover.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap300),
+            [BaseButton_1.buttonVars.hover.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
+            [BaseButton_1.buttonVars.hover.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
+            // Focus Styles
+            [BaseButton_1.buttonVars.focus.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
+            [BaseButton_1.buttonVars.focus.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
+            [BaseButton_1.buttonVars.focus.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
+            [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.base.blackPepper500),
+            [BaseButton_1.buttonVars.focus.boxShadowOuter]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
+            // Active Styles
+            [BaseButton_1.buttonVars.active.background]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap400),
+            [BaseButton_1.buttonVars.active.border]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.soap400),
+            [BaseButton_1.buttonVars.active.label]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500),
+            [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.base.frenchVanilla100),
+            [BaseButton_1.buttonVars.disabled.icon]: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100),
+        }),
+    },
+});
 exports.SecondaryButton = common_1.createComponent('button')({
     displayName: 'SecondaryButton',
-    Component: ({ size = 'medium', iconPosition = 'start', variant, icon, shouldMirrorIcon = false, children, ...elemProps }, ref, Element) => {
-        const theme = common_1.useTheme();
-        return (React.createElement(BaseButton_1.BaseButton, Object.assign({ ref: ref, size: size, colors: exports.getSecondaryButtonColors(variant, theme), padding: BaseButton_1.getPaddingStyles(children, size, icon, iconPosition), minWidth: BaseButton_1.getMinWidthStyles(children, size), as: Element }, elemProps),
-            icon && iconPosition === 'start' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
-            children && React.createElement(BaseButton_1.BaseButton.Label, null, children),
-            icon && iconPosition === 'end' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
+    Component: ({ children, icon, cs, iconPosition, variant, ...elemProps }, ref, Element) => {
+        return (React.createElement(Button_1.Button, Object.assign({ as: Element, ref: ref, icon: icon, iconPosition: iconPosition, cs: [secondaryStyles, exports.secondaryButtonModifiers({ variant: variant }), cs] }, elemProps), children));
     },
 });
-const getSecondaryButtonColors = (variant, theme) => {
-    const { canvas: { palette: { primary: themePrimary }, }, } = theme;
-    switch (variant) {
-        case undefined:
-        default:
-            return {
-                default: {
-                    background: 'transparent',
-                    border: tokens_1.colors.blackPepper400,
-                    icon: tokens_1.colors.blackPepper400,
-                    label: tokens_1.colors.blackPepper400,
-                },
-                hover: {
-                    background: tokens_1.colors.blackPepper400,
-                    border: tokens_1.colors.blackPepper400,
-                    icon: themePrimary.contrast,
-                    label: themePrimary.contrast,
-                },
-                active: {
-                    background: tokens_1.colors.blackPepper500,
-                    border: tokens_1.colors.blackPepper500,
-                    icon: themePrimary.contrast,
-                    label: themePrimary.contrast,
-                },
-                focus: {
-                    border: tokens_1.colors.blackPepper400,
-                    icon: tokens_1.colors.blackPepper400,
-                    label: tokens_1.colors.blackPepper400,
-                },
-                // Identical to 'default' styles. ButtonContainer will set opacity to 40%
-                disabled: {
-                    background: 'transparent',
-                    border: tokens_1.colors.blackPepper400,
-                    icon: tokens_1.colors.blackPepper400,
-                    label: tokens_1.colors.blackPepper400,
-                },
-            };
-        case 'inverse':
-            return {
-                default: {
-                    background: 'transparent',
-                    border: tokens_1.colors.frenchVanilla100,
-                    icon: tokens_1.colors.frenchVanilla100,
-                    label: tokens_1.colors.frenchVanilla100,
-                },
-                hover: {
-                    background: tokens_1.colors.soap300,
-                    border: tokens_1.colors.soap300,
-                    icon: tokens_1.colors.blackPepper500,
-                    label: tokens_1.colors.blackPepper500,
-                },
-                active: {
-                    background: tokens_1.colors.soap400,
-                    border: tokens_1.colors.soap400,
-                    icon: tokens_1.colors.blackPepper500,
-                    label: tokens_1.colors.blackPepper500,
-                },
-                focus: {
-                    background: tokens_1.colors.frenchVanilla100,
-                    icon: tokens_1.colors.blackPepper500,
-                    label: tokens_1.colors.blackPepper500,
-                    focusRing: common_1.focusRing({
-                        separation: 2,
-                        innerColor: 'currentColor',
-                        outerColor: tokens_1.colors.frenchVanilla100,
-                    }, theme),
-                },
-                // Identical to inverse 'default' styles. ButtonContainer will set opacity to 40%
-                disabled: {
-                    background: 'transparent',
-                    border: tokens_1.colors.frenchVanilla100,
-                    icon: tokens_1.colors.frenchVanilla100,
-                    label: tokens_1.colors.frenchVanilla100,
-                },
-            };
-    }
-};
-exports.getSecondaryButtonColors = getSecondaryButtonColors;