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

package/dist/commonjs/button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAE,kBAAkB,EAAC,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAC,eAAe,EAAE,oBAAoB,EAAC,MAAM,uBAAuB,CAAC;AAC5E,OAAO,EAAC,cAAc,EAAE,mBAAmB,EAAC,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAC,YAAY,EAAE,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AACnE,OAAO,EACL,gBAAgB,IAAI,iBAAiB,EACrC,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAC,iBAAiB,EAAE,sBAAsB,EAAC,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAC,qBAAqB,EAAE,0BAA0B,EAAC,MAAM,6BAA6B,CAAC;AAC9F,OAAO,EAAC,SAAS,EAAE,cAAc,EAAC,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EACL,UAAU,EACV,oBAAoB,EACpB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAC,iBAAiB,EAAE,sBAAsB,EAAC,MAAM,yBAAyB,CAAC;AAClF,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,IAAI,iBAAiB,EACrC,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAC,iBAAiB,EAAE,sBAAsB,EAAC,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAC,qBAAqB,EAAE,0BAA0B,EAAC,MAAM,6BAA6B,CAAC;AAC9F,OAAO,EAAC,SAAS,EAAE,cAAc,EAAC,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAC,iBAAiB,EAAE,sBAAsB,EAAC,MAAM,yBAAyB,CAAC;AAClF,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,aAAa,CAAC"}

package/dist/commonjs/button/index.js

@@ -10,15 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExternalHyperlink = exports.getPaddingStyles = exports.getMinWidthStyles = exports.BaseButton = exports.Hyperlink = exports.ToolbarDropdownButton = exports.ToolbarIconButton = exports.deprecated_Button = exports.DeleteButton = exports.TertiaryButton = exports.SecondaryButton = exports.PrimaryButton = void 0;
-var PrimaryButton_1 = require("./lib/PrimaryButton");
-Object.defineProperty(exports, "PrimaryButton", { enumerable: true, get: function () { return PrimaryButton_1.PrimaryButton; } });
-var SecondaryButton_1 = require("./lib/SecondaryButton");
-Object.defineProperty(exports, "SecondaryButton", { enumerable: true, get: function () { return SecondaryButton_1.SecondaryButton; } });
-var TertiaryButton_1 = require("./lib/TertiaryButton");
-Object.defineProperty(exports, "TertiaryButton", { enumerable: true, get: function () { return TertiaryButton_1.TertiaryButton; } });
-var DeleteButton_1 = require("./lib/DeleteButton");
-Object.defineProperty(exports, "DeleteButton", { enumerable: true, get: function () { return DeleteButton_1.DeleteButton; } });
+exports.ExternalHyperlink = exports.Hyperlink = exports.ToolbarDropdownButton = exports.ToolbarIconButton = exports.deprecated_Button = void 0;
 var deprecated_Button_1 = require("./lib/deprecated_Button");
 Object.defineProperty(exports, "deprecated_Button", { enumerable: true, get: function () { return deprecated_Button_1.DeprecatedButton; } });
 var ToolbarIconButton_1 = require("./lib/ToolbarIconButton");
@@ -27,10 +19,14 @@ var ToolbarDropdownButton_1 = require("./lib/ToolbarDropdownButton");
 Object.defineProperty(exports, "ToolbarDropdownButton", { enumerable: true, get: function () { return ToolbarDropdownButton_1.ToolbarDropdownButton; } });
 var Hyperlink_1 = require("./lib/Hyperlink");
 Object.defineProperty(exports, "Hyperlink", { enumerable: true, get: function () { return Hyperlink_1.Hyperlink; } });
-var BaseButton_1 = require("./lib/BaseButton");
-Object.defineProperty(exports, "BaseButton", { enumerable: true, get: function () { return BaseButton_1.BaseButton; } });
-Object.defineProperty(exports, "getMinWidthStyles", { enumerable: true, get: function () { return BaseButton_1.getMinWidthStyles; } });
-Object.defineProperty(exports, "getPaddingStyles", { enumerable: true, get: function () { return BaseButton_1.getPaddingStyles; } });
 var ExternalHyperlink_1 = require("./lib/ExternalHyperlink");
 Object.defineProperty(exports, "ExternalHyperlink", { enumerable: true, get: function () { return ExternalHyperlink_1.ExternalHyperlink; } });
 __exportStar(require("./lib/types"), exports);
+__exportStar(require("./lib/PrimaryButton"), exports);
+__exportStar(require("./lib/SecondaryButton"), exports);
+__exportStar(require("./lib/TertiaryButton"), exports);
+__exportStar(require("./lib/DeleteButton"), exports);
+__exportStar(require("./lib/BaseButton"), exports);
+__exportStar(require("./lib/ToolbarDropdownButton"), exports);
+__exportStar(require("./lib/ToolbarIconButton"), exports);
+__exportStar(require("./lib/types"), exports);

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GrowthBehavior } from '@workday/canvas-kit-react/common';
 import { SystemIconProps } from '@workday/canvas-kit-react/icon';
-import { ButtonColors, ButtonSizes, IconPositions, TertiaryButtonSizes } from './types';
+import { ButtonColors, ButtonSizes, IconPositions } from './types';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
 export interface ButtonContainerProps extends Partial<SystemIconProps>, GrowthBehavior {
     /**
@@ -11,13 +11,33 @@ export interface ButtonContainerProps extends Partial<SystemIconProps>, GrowthBe
     /**
      * 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;
     /**
      * Whether the icon should received filled (colored background layer) or regular styles.
      * Corresponds to `toggled` in ToolbarIconButton
      */
     fillIcon?: boolean;
+    /**
+     * Button icon positions can either be `start` or `end`.
+     * If no value is provided, it defaults to `start`.
+     *
+     * @default 'start'
+     */
+    iconPosition?: IconPositions;
+    /**
+     * If set to `true`, transform the icon's x-axis to mirror the graphic
+     * @default false
+     */
+    shouldMirrorIcon?: boolean;
+    children?: React.ReactNode;
 }
 /**
  * Extends all the style properties from Box to our buttons as well as props from ButtonContainerProps.
@@ -26,10 +46,54 @@ export interface ButtonContainerProps extends Partial<SystemIconProps>, GrowthBe
  */
 export interface BaseButtonProps extends Omit<ButtonContainerProps, 'ref'> {
 }
-export declare const getMinWidthStyles: (children: React.ReactNode, size: ButtonSizes | TertiaryButtonSizes) => "1.5rem" | "2rem" | "2.5rem" | "5rem" | "auto" | "48px" | "112px" | "96px";
-export declare const getPaddingStyles: (children: React.ReactNode, size: ButtonSizes | TertiaryButtonSizes, icon: CanvasSystemIcon | undefined, iconPosition: IconPositions | undefined) => string | 0;
+/**
+ * Temporary css variables to be used across all Buttons.
+ */
+export declare const buttonVars: {
+    default: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
+    hover: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
+    active: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
+    focus: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
+    disabled: import("@workday/canvas-kit-styling").CsVars<"label" | "opacity" | "background" | "border" | "borderRadius" | "icon" | "boxShadowInner" | "boxShadowOuter", never>;
+};
+/**
+ * Button modifiers that will overwrite the base styles of Buttons.
+ * - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
+ * - `iconPosition`: These modifiers will override the existing `Size` styles. These are specific to icon locations
+ * within a button or if there is only an icon and no text.
+ */
+export declare const buttonModifiers: {
+    size: {
+        large: string;
+        medium: string;
+        small: string;
+        extraSmall: string;
+    };
+    iconPosition: {
+        largeOnly: string;
+        largeStart: string;
+        largeEnd: string;
+        mediumOnly: string;
+        mediumStart: string;
+        mediumEnd: string;
+        smallOnly: string;
+        smallStart: string;
+        smallEnd: string;
+        extraSmallOnly: string;
+        extraSmallStart: string;
+        extraSmallEnd: string;
+    };
+} & ((modifiers: Partial<{
+    size: "small" | "medium" | "large" | "extraSmall";
+    iconPosition: "largeOnly" | "largeStart" | "largeEnd" | "mediumOnly" | "mediumStart" | "mediumEnd" | "smallOnly" | "smallStart" | "smallEnd" | "extraSmallOnly" | "extraSmallStart" | "extraSmallEnd";
+}>) => string);
+export declare function capitalize(string?: string): string;
+export declare function getIconPosition(size?: keyof typeof buttonModifiers.size, iconPosition?: IconPositions, children?: React.ReactNode): keyof typeof buttonModifiers.iconPosition;
+/**
+ * The base button which all other buttons are built.
+ */
 export declare const BaseButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", ButtonContainerProps> & {
-    Icon: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./parts/ButtonLabelIcon").ButtonLabelIconProps>;
-    Label: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./parts/ButtonLabel").ButtonLabelProps>;
+    Icon: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("../lib/parts/ButtonLabelIcon").ButtonLabelIconProps>;
+    Label: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("../lib/parts/ButtonLabel").ButtonLabelProps>;
 };
 //# sourceMappingURL=BaseButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAEL,cAAc,EAMf,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAI/D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAGtF,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAgL7E,eAAO,MAAM,iBAAiB,aAClB,MAAM,SAAS,QACnB,WAAW,GAAG,mBAAmB,+EAcxC,CAAC;AAEF,eAAO,MAAM,gBAAgB,aACjB,MAAM,SAAS,QACnB,WAAW,GAAG,mBAAmB,QACjC,gBAAgB,GAAG,SAAS,gBACpB,aAAa,GAAG,SAAS,eAiDxC,CAAC;AAEF,eAAO,MAAM,UAAU;;;CAarB,CAAC"}
+{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAE5F,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAI/D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAiB7E;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC;AAkGF;;;;;GAKG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;cA4E1B,CAAC;AAEH,wBAAgB,UAAU,CAAC,MAAM,GAAE,MAAW,UAE7C;AAED,wBAAgB,eAAe,CAC7B,IAAI,CAAC,EAAE,MAAM,OAAO,eAAe,CAAC,IAAI,EACxC,YAAY,CAAC,EAAE,aAAa,EAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GACzB,MAAM,OAAO,eAAe,CAAC,YAAY,CAE3C;AAED;;GAEG;AACH,eAAO,MAAM,UAAU;;;CA8CrB,CAAC"}

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

@@ -19,227 +19,234 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseButton = exports.getPaddingStyles = exports.getMinWidthStyles = void 0;
+exports.BaseButton = exports.getIconPosition = exports.capitalize = exports.buttonModifiers = exports.buttonVars = void 0;
 const React = __importStar(require("react"));
-const ButtonLabelIcon_1 = require("./parts/ButtonLabelIcon");
-const ButtonLabel_1 = require("./parts/ButtonLabel");
+const ButtonLabelIcon_1 = require("../lib/parts/ButtonLabelIcon");
+const ButtonLabel_1 = require("../lib/parts/ButtonLabel");
 const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
-function getIconColorSelectors({ canvas: { palette: { primary: themePrimary }, }, }, color, fill) {
-    return {
-        '&:focus span, &:hover span, & span': {
-            '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-                fill: color,
-            },
-            '.wd-icon-background': {
-                fill: fill ? color : undefined,
-            },
-            '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-                fill: fill
-                    ? color === themePrimary.contrast
-                        ? themePrimary.main
-                        : themePrimary.contrast
-                    : color,
-            },
-        },
-    };
-}
-const ButtonContainer = common_1.styled('button')({
-    ...tokens_1.type.levels.subtext.large,
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+/**
+ * Factory function for creating Button vars.
+ */
+const createButtonVars = () => canvas_kit_styling_1.createVars('background', 'border', 'boxShadowInner', 'boxShadowOuter', 'icon', 'label', 'opacity', 'borderRadius');
+/**
+ * Temporary css variables to be used across all Buttons.
+ */
+exports.buttonVars = {
+    default: createButtonVars(),
+    hover: createButtonVars(),
+    active: createButtonVars(),
+    focus: createButtonVars(),
+    disabled: createButtonVars(),
+};
+/**
+ * Base styles for Buttons.
+ */
+const baseButtonStyles = canvas_kit_styling_1.createStyles({
+    fontFamily: '"Roboto", "Helvetica Neue", "Helvetica", Arial, sans-serif',
+    fontSize: '0.875rem',
+    lineHeight: 'normal',
+    letterSpacing: '0.015rem',
+    fontWeight: 'bold',
+    backgroundColor: canvas_kit_styling_1.cssVar(exports.buttonVars.default.background, 'transparent'),
+    color: canvas_kit_styling_1.cssVar(exports.buttonVars.default.label, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    gap: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x2, tokens_1.space.xxs),
+    borderColor: canvas_kit_styling_1.cssVar(exports.buttonVars.default.border, 'transparent'),
     cursor: 'pointer',
     display: 'inline-flex',
+    boxShadow: 'none',
     alignItems: 'center',
     justifyContent: 'center',
     boxSizing: 'border-box',
-    boxShadow: 'none',
-    outline: 'none',
-    fontWeight: tokens_1.type.properties.fontWeights.bold,
-    lineHeight: 'normal',
+    outline: '2px transparent',
     whiteSpace: 'nowrap',
     WebkitFontSmoothing: 'antialiased',
     MozOsxFontSmoothing: 'grayscale',
-    borderRadius: tokens_1.borderRadius.circle,
+    borderRadius: canvas_kit_styling_1.cssVar(exports.buttonVars.default.borderRadius, canvas_tokens_web_1.system.shape.circle),
     position: 'relative',
     verticalAlign: 'middle',
     overflow: 'hidden',
-    border: '1px solid transparent',
-    background: 'transparent',
     transition: 'box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear',
     '&:disabled, &:disabled:active': {
         cursor: 'default',
         boxShadow: 'none',
-        opacity: 0.4,
+        opacity: canvas_kit_styling_1.cssVar(exports.buttonVars.disabled.opacity, '1'),
     },
-    '&:hover:active': { transitionDuration: '40ms' },
-    '& > *:first-of-type': {
-        marginLeft: '0',
+    '& span .wd-icon-fill': {
+        transitionDuration: '40ms',
+        fill: canvas_kit_styling_1.cssVar(exports.buttonVars.default.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
     },
-    '& > *:last-of-type': {
-        marginRight: 0,
+    '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+        fill: canvas_kit_styling_1.cssVar(exports.buttonVars.default.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
     },
-}, ({ size }) => {
-    switch (size) {
-        case 'large':
-            return {
-                ...tokens_1.type.levels.body.small,
-                fontWeight: tokens_1.type.properties.fontWeights.bold,
-                height: '48px',
-                '& > * ': {
-                    margin: `0 ${tokens_1.space.xxxs}`,
-                },
-            };
-        case 'medium':
-        default:
-            return {
-                height: tokens_1.space.xl,
-                '& > * ': {
-                    margin: `0 ${tokens_1.space.xxxs}`,
-                },
-            };
-        case 'small':
-            return {
-                height: tokens_1.space.l,
-                '& > * ': {
-                    margin: `0 ${tokens_1.spaceNumbers.xxxs / 2}rem`,
-                },
-            };
-        case 'extraSmall':
-            return {
-                ...tokens_1.type.levels.subtext.medium,
-                fontWeight: tokens_1.type.properties.fontWeights.bold,
-                height: tokens_1.space.m,
-                '& > * ': {
-                    margin: `0 ${tokens_1.spaceNumbers.xxxs / 2}rem`,
-                },
-            };
-    }
-}, ({ grow }) => grow && { width: '100%', maxWidth: '100%' }, ({ colors, fillIcon, theme }) => {
-    if (!colors) {
-        return;
-    }
-    const baseStyles = {
-        ...(colors.default.icon && {
-            '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2, .wd-icon-background': {
-                transition: 'fill 120ms ease-in',
-            },
-            ...getIconColorSelectors(theme, colors.default.icon, fillIcon),
+    '&:focus-visible, &.focus': {
+        backgroundColor: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.background, 'transparent'),
+        borderColor: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.border, 'transparent'),
+        color: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.label, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
+        '& span .wd-icon-fill': {
+            fill: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
+        },
+        '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+            fill: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
+        },
+        ...common_1.focusRing({
+            width: 2,
+            separation: 2,
+            innerColor: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.boxShadowInner, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.frenchVanilla100)),
+            outerColor: canvas_kit_styling_1.cssVar(exports.buttonVars.focus.boxShadowOuter, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base)),
         }),
-        backgroundColor: colors.default.background,
-        borderColor: colors.default.border,
-        color: colors.default.label,
-    };
-    const hoverStyles = {
-        '&:hover': {
-            ...(colors.hover.icon && getIconColorSelectors(theme, colors.hover.icon, fillIcon)),
-            backgroundColor: colors.hover.background,
-            borderColor: colors.hover.border,
-            color: colors.hover.label,
+    },
+    '&:hover, &.hover': {
+        backgroundColor: canvas_kit_styling_1.cssVar(exports.buttonVars.hover.background, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500)),
+        borderColor: canvas_kit_styling_1.cssVar(exports.buttonVars.hover.border, 'transparent'),
+        color: canvas_kit_styling_1.cssVar(exports.buttonVars.hover.label, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500)),
+        '& span .wd-icon-fill': {
+            fill: canvas_kit_styling_1.cssVar(exports.buttonVars.hover.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500)),
         },
-    };
-    const activeStyles = {
-        '&:active, &:focus:active, &:hover:active': {
-            ...(colors.active.icon && getIconColorSelectors(theme, colors.active.icon, fillIcon)),
-            backgroundColor: colors.active.background,
-            borderColor: colors.active.border,
-            color: colors.active.label,
+        '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+            fill: canvas_kit_styling_1.cssVar(exports.buttonVars.hover.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper500)),
         },
-    };
-    return {
-        ...baseStyles,
-        '&:focus': {
-            ...(colors.focus.focusRing || common_1.focusRing({ separation: 2 }, theme)),
-            ...(colors.focus.icon && getIconColorSelectors(theme, colors.focus.icon, fillIcon)),
-            backgroundColor: colors.focus.background,
-            borderColor: colors.focus.border,
-            color: colors.focus.label,
+    },
+    '&:hover:active': { transitionDuration: '40ms' },
+    '&:active, &.active': {
+        backgroundColor: canvas_kit_styling_1.cssVar(exports.buttonVars.active.background, 'transparent'),
+        borderColor: canvas_kit_styling_1.cssVar(exports.buttonVars.active.border, 'transparent'),
+        color: canvas_kit_styling_1.cssVar(exports.buttonVars.active.label, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
+        '& span .wd-icon-fill': {
+            fill: canvas_kit_styling_1.cssVar(exports.buttonVars.active.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
         },
-        ...activeStyles,
-        ...hoverStyles,
-        '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
-            ...(colors.disabled.icon && getIconColorSelectors(theme, colors.disabled.icon, fillIcon)),
-            backgroundColor: colors.disabled.background,
-            borderColor: colors.disabled.border,
-            color: colors.disabled.label,
-            opacity: colors.disabled.opacity,
+        '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+            fill: canvas_kit_styling_1.cssVar(exports.buttonVars.active.icon),
+        },
+    },
+    '&:disabled': {
+        backgroundColor: canvas_kit_styling_1.cssVar(exports.buttonVars.disabled.background, 'transparent'),
+        borderColor: canvas_kit_styling_1.cssVar(exports.buttonVars.disabled.border, 'transparent'),
+        color: canvas_kit_styling_1.cssVar(exports.buttonVars.disabled.label, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
+        '& span .wd-icon-fill': {
+            fill: canvas_kit_styling_1.cssVar(exports.buttonVars.disabled.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
         },
-        ...common_1.mouseFocusBehavior({
-            '&:focus': {
-                ...baseStyles,
-                ...hoverStyles,
-                ...activeStyles,
-                outline: 'none',
-                boxShadow: 'none',
-                animation: 'none',
-            },
+        '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+            fill: canvas_kit_styling_1.cssVar(exports.buttonVars.disabled.icon, canvas_kit_styling_1.cssVar(canvas_tokens_web_1.base.blackPepper400)),
+        },
+    },
+});
+/**
+ * Button modifiers that will overwrite the base styles of Buttons.
+ * - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
+ * - `iconPosition`: These modifiers will override the existing `Size` styles. These are specific to icon locations
+ * within a button or if there is only an icon and no text.
+ */
+exports.buttonModifiers = canvas_kit_styling_1.createModifiers({
+    size: {
+        large: canvas_kit_styling_1.createStyles({
+            fontSize: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x4),
+            lineHeight: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6),
+            letterSpacing: '0.01rem',
+            height: '48px',
+            paddingInline: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x8),
+            minWidth: '112px',
         }),
-    };
-}, layout_1.boxStyleFn);
-const getMinWidthStyles = (children, size) => {
-    switch (size) {
-        case 'large':
-            return children ? '112px' : '48px';
-        case 'medium':
-            return children ? '96px' : tokens_1.space.xl;
-        case 'small':
-            return children ? tokens_1.space.xxxl : tokens_1.space.l;
-        case 'extraSmall':
-            return children ? 'auto' : tokens_1.space.m;
-        default:
-            return children ? '96px' : tokens_1.space.xl;
-    }
-};
-exports.getMinWidthStyles = getMinWidthStyles;
-const getPaddingStyles = (children, size, icon, iconPosition) => {
-    // In order to calculate the correct padding, we need to know its children
-    // and what side the icon is on and if there's an icon provided
-    if (!children) {
-        // icon buttons do not have any padding
-        return 0;
-    }
-    // If there are children AND an icon
-    // 1. We check what side the icon is in
-    // 2. Adjust padding to visually center the icon and text
-    // If there is children (most likely just text)
-    // 1. We keep the padding the same on both side
-    switch (size) {
-        case 'large':
-            return icon
-                ? iconPosition === 'start'
-                    ? `0 ${tokens_1.space.l} 0 ${tokens_1.space.m}`
-                    : `0 ${tokens_1.space.m} 0 ${tokens_1.space.l}`
-                : `0 ${tokens_1.space.l}`;
-        case 'medium':
-            return icon
-                ? iconPosition === 'start'
-                    ? `0 ${tokens_1.space.m} 0 20px`
-                    : `0 20px 0 ${tokens_1.space.m}`
-                : `0 ${tokens_1.space.m}`;
-        case 'small':
-            return icon
-                ? iconPosition === 'start'
-                    ? `0 ${tokens_1.space.s} 0 ${tokens_1.space.xs}`
-                    : `0 ${tokens_1.space.xs} 0 ${tokens_1.space.s}`
-                : `0 ${tokens_1.space.s}`;
-        case 'extraSmall':
-            return icon
-                ? iconPosition === 'start'
-                    ? `0 ${tokens_1.space.xs} 0 ${tokens_1.space.xxs}`
-                    : `0 ${tokens_1.space.xxs} 0 ${tokens_1.space.xs}`
-                : `0 ${tokens_1.space.xs}`;
-        default:
-            return icon
-                ? iconPosition === 'start'
-                    ? `0 ${tokens_1.space.m} 0 20px`
-                    : `0 20px 0 ${tokens_1.space.m}`
-                : `0 ${tokens_1.space.m}`;
-    }
-};
-exports.getPaddingStyles = getPaddingStyles;
+        medium: canvas_kit_styling_1.createStyles({
+            fontSize: '0.875rem',
+            letterSpacing: '0.015rem',
+            minWidth: '96px',
+            paddingInline: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6),
+            height: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x10),
+        }),
+        small: canvas_kit_styling_1.createStyles({
+            fontSize: '0.875rem',
+            letterSpacing: '0.015rem',
+            height: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x8),
+            minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x20),
+            paddingInline: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x4),
+            gap: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x1),
+        }),
+        extraSmall: canvas_kit_styling_1.createStyles({
+            fontSize: '0.75rem',
+            lineHeight: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x4),
+            letterSpacing: '0.02rem',
+            height: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6),
+            minWidth: 'auto',
+            paddingInline: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x3),
+            gap: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x1),
+        }),
+    },
+    iconPosition: {
+        largeOnly: canvas_kit_styling_1.createStyles({
+            padding: '0',
+            minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x12),
+        }),
+        largeStart: canvas_kit_styling_1.createStyles({
+            paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6),
+            paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x8),
+        }),
+        largeEnd: canvas_kit_styling_1.createStyles({
+            paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x8),
+            paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6),
+        }),
+        mediumOnly: canvas_kit_styling_1.createStyles({ padding: '0', minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x10, tokens_1.space.xl) }),
+        mediumStart: canvas_kit_styling_1.createStyles({
+            paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x5),
+            paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6),
+        }),
+        mediumEnd: canvas_kit_styling_1.createStyles({
+            paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6),
+            paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x5),
+        }),
+        smallOnly: canvas_kit_styling_1.createStyles({ padding: '0', minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x8, tokens_1.space.l) }),
+        smallStart: canvas_kit_styling_1.createStyles({
+            paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x3),
+            paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x4),
+        }),
+        smallEnd: canvas_kit_styling_1.createStyles({
+            paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x4),
+            paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x3),
+        }),
+        extraSmallOnly: canvas_kit_styling_1.createStyles({ padding: '0', minWidth: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x6, tokens_1.space.m) }),
+        extraSmallStart: canvas_kit_styling_1.createStyles({
+            paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x2),
+            paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x3),
+        }),
+        extraSmallEnd: canvas_kit_styling_1.createStyles({
+            paddingInlineStart: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x3),
+            paddingInlineEnd: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x2),
+        }),
+    },
+});
+function capitalize(string = '') {
+    return string.charAt(0).toUpperCase() + string.substring(1);
+}
+exports.capitalize = capitalize;
+function getIconPosition(size, iconPosition, children) {
+    return `${size}${capitalize(iconPosition)}`;
+}
+exports.getIconPosition = getIconPosition;
+/**
+ * The base button which all other buttons are built.
+ */
 exports.BaseButton = common_1.createComponent('button')({
-    displayName: 'Button',
-    Component: ({ children, ...elemProps }, ref, Element) => {
-        return (React.createElement(ButtonContainer, Object.assign({ as: Element, ref: ref, type: "button" }, elemProps), children));
+    displayName: 'BaseButton',
+    Component: ({ children, cs, size, fillIcon, iconPosition, icon, colors, shouldMirrorIcon = false, ...elemProps }, ref, Element) => {
+        // console.log('iconPosition', children, getIconPosition(size, iconPosition));
+        return (React.createElement(layout_1.Box, Object.assign({ as: Element, ref: ref, type: "button", cs: [
+                baseButtonStyles,
+                exports.buttonModifiers({
+                    size: size,
+                    iconPosition: getIconPosition(size, iconPosition, children),
+                }),
+                exports.buttonVars.default((colors === null || colors === void 0 ? void 0 : colors.default) || {}),
+                exports.buttonVars.focus((colors === null || colors === void 0 ? void 0 : colors.focus) || {}),
+                exports.buttonVars.hover((colors === null || colors === void 0 ? void 0 : colors.hover) || {}),
+                exports.buttonVars.active((colors === null || colors === void 0 ? void 0 : colors.active) || {}),
+                exports.buttonVars.disabled((colors === null || colors === void 0 ? void 0 : colors.disabled) || {}),
+                cs,
+            ] }, elemProps), children));
     },
     subComponents: {
         Icon: ButtonLabelIcon_1.ButtonLabelIcon,

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

@@ -0,0 +1,17 @@
+import { ButtonContainerProps } from './BaseButton';
+/**
+ * Extends all the style properties from Box to our buttons as well as props from ButtonContainerProps.
+ * 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 ButtonProps extends Omit<ButtonContainerProps, 'ref'> {
+    /**
+     * Button icon positions can either be `start` or `end`.
+     * If no value is provided, it defaults to `start`.
+     *
+     * @default 'start'
+     */
+    iconPosition?: 'start' | 'end';
+}
+export declare const Button: import("@workday/canvas-kit-react/common").ElementComponent<"button", ButtonProps>;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../button/lib/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,oBAAoB,EAAC,MAAM,cAAc,CAAC;AAG9D;;;;GAIG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;IACpE;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CAChC;AAED,eAAO,MAAM,MAAM,oFA8CjB,CAAC"}