@workday/canvas-kit-react 6.0.0-alpha.0-next.27 → 6.0.0-alpha.0-next.28

package/button/lib/PrimaryButton.tsx

@@ -6,17 +6,27 @@ import {
   Themeable,
   EmotionCanvasTheme,
   createComponent,
+  focusRing,
 } from '@workday/canvas-kit-react/common';
+import {colors} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {ButtonColors} from './types';
+
 import {ButtonContainer, ButtonLabel, ButtonLabelData, ButtonLabelIcon} from './parts';
+import {ButtonSizes, IconPositions} from './types';
 
 export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
   /**
-   * The size of the Button.
+   * The variant of the PrimaryButton.
+   * @default undefined
+   */
+  variant?: 'inverse';
+  /**
+   * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
+   * If no size is provided, it will default to `medium`.
+   *
    * @default 'medium'
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: ButtonSizes;
   /**
    * The data label of the Button.
    * Note: not displayed at `small` size
@@ -28,10 +38,11 @@ export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
    */
   icon?: CanvasSystemIcon;
   /**
-   * The position of the TertiaryButton icon.
+   * Button icon positions can either be `left` or `right`.
+   * If no value is provided, it defaults to `left`.
    * @default 'left'
    */
-  iconPosition?: 'left' | 'right';
+  iconPosition?: IconPositions;
   /**
    * If set to `true`, transform the icon's x-axis to mirror the graphic
    * @default false
@@ -40,6 +51,16 @@ export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
   children?: React.ReactNode;
 }
 
+// Button sizes where data labels are enabled
+const dataLabelSizes = ['medium', 'large'];
+// All disabled buttons are set to 40% opacity.
+// This will eventually live in the ButtonContainer styles, but for now we're scoping it to Primary, Secondary, and Tertiary buttons.
+const disabledButtonOpacity = {
+  '&:disabled, &:disabled:active': {
+    opacity: 0.4,
+  },
+};
+
 export const PrimaryButton = createComponent('button')({
   displayName: 'PrimaryButton',
   Component: (
@@ -49,6 +70,7 @@ export const PrimaryButton = createComponent('button')({
       theme = useTheme(),
       size = 'medium',
       iconPosition = 'left',
+      variant,
       dataLabel,
       icon,
       shouldMirrorIcon = false,
@@ -61,11 +83,12 @@ export const PrimaryButton = createComponent('button')({
     <ButtonContainer
       ref={ref}
       as={Element}
-      colors={getPrimaryButtonColors(theme)}
+      colors={getPrimaryButtonColors(variant, theme)}
       size={size}
+      extraStyles={disabledButtonOpacity}
       {...elemProps}
     >
-      {icon && size !== 'small' && iconPosition === 'left' && (
+      {icon && iconPosition === 'left' && (
         <ButtonLabelIcon
           size={size}
           iconPosition={iconPosition}
@@ -74,8 +97,8 @@ export const PrimaryButton = createComponent('button')({
         />
       )}
       <ButtonLabel>{children}</ButtonLabel>
-      {dataLabel && size !== 'small' && <ButtonLabelData>{dataLabel}</ButtonLabelData>}
-      {icon && size !== 'small' && iconPosition === 'right' && (
+      {dataLabel && dataLabelSizes.includes(size) && <ButtonLabelData>{dataLabel}</ButtonLabelData>}
+      {icon && iconPosition === 'right' && (
         <ButtonLabelIcon
           size={size}
           iconPosition={iconPosition}
@@ -87,26 +110,81 @@ export const PrimaryButton = createComponent('button')({
   ),
 });
 
-export const getPrimaryButtonColors = ({
-  canvas: {
-    palette: {primary: themePrimary},
-  },
-}: EmotionCanvasTheme): ButtonColors => ({
-  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.light,
-  },
-});
+export const getPrimaryButtonColors = (
+  variant: 'inverse' | undefined,
+  theme: EmotionCanvasTheme
+) => {
+  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: colors.frenchVanilla100,
+          icon: colors.blackPepper400,
+          label: colors.blackPepper400,
+          labelData: colors.blackPepper400,
+        },
+        hover: {
+          background: colors.soap300,
+          icon: colors.blackPepper500,
+          label: colors.blackPepper500,
+          labelData: colors.blackPepper500,
+        },
+        active: {
+          background: colors.soap300,
+          icon: colors.blackPepper500,
+          label: colors.blackPepper500,
+          labelData: colors.blackPepper500,
+        },
+        focus: {
+          background: colors.frenchVanilla100,
+          border: colors.blackPepper400,
+          icon: colors.blackPepper400,
+          label: colors.blackPepper400,
+          labelData: colors.blackPepper400,
+          focusRing: focusRing(
+            {
+              separation: 1,
+              innerColor: colors.blackPepper500,
+              outerColor: colors.frenchVanilla100,
+            },
+            theme
+          ),
+        },
+        // Identical to inverse 'default' styles. ButtonContainer will set opacity to 40%
+        disabled: {
+          background: colors.frenchVanilla100,
+          icon: colors.blackPepper400,
+          label: colors.blackPepper400,
+          labelData: colors.blackPepper400,
+        },
+      };
+  }
+};

package/button/lib/parts/ButtonContainer.tsx

@@ -10,7 +10,7 @@ import {
   EmotionCanvasTheme,
   StyledType,
 } from '@workday/canvas-kit-react/common';
-import {ButtonColors} from '../types';
+import {ButtonColors, ButtonSizes} from '../types';
 import {buttonLabelDataClassName} from './ButtonLabelData';
 
 export interface ButtonContainerProps
@@ -18,10 +18,12 @@ export interface ButtonContainerProps
     GrowthBehavior {
   colors?: ButtonColors;
   /**
-   * The size of the Button.
+   * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
+   * If no size is provided, it will default to `medium`.
+   *
    * @default 'medium'
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: ButtonSizes;
   /**
    * The ref to the button that the styled component renders.
    */
@@ -110,12 +112,13 @@ export const ButtonContainer = styled('button', {
     switch (size) {
       case 'large':
         return {
-          fontSize: type.properties.fontSizes[16],
+          ...type.levels.body.small,
+          fontWeight: type.properties.fontWeights.bold,
           minWidth: '112px',
           height: '48px',
           padding: `0 ${space.l}`,
           '& > * ': {
-            margin: `0 ${spaceNumbers.xs / 2}px`,
+            margin: `0 ${spaceNumbers.xxs / 2}px`,
           },
         };
       case 'medium':
@@ -137,6 +140,14 @@ export const ButtonContainer = styled('button', {
             margin: `0 ${spaceNumbers.xxxs / 2}px`,
           },
         };
+      case 'extraSmall':
+        return {
+          height: space.m,
+          padding: `0 ${space.xs}`,
+          '& > * ': {
+            margin: `0 ${spaceNumbers.xxxs / 2}px`,
+          },
+        };
     }
   },
   ({grow}) => grow && {width: '100%', maxWidth: '100%'},

package/button/lib/parts/ButtonLabelIcon.tsx

@@ -5,22 +5,25 @@ import isPropValid from '@emotion/is-prop-valid';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {styled} from '@workday/canvas-kit-react/common';
 
+import {ButtonSizes, IconPositions} from '../types';
 export interface ButtonLabelIconProps {
   /**
-   * The size of the Button.
+   * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
+   *
    * @default 'medium'
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: ButtonSizes;
   /**
    * The icon of the Button.
    * Note: not displayed at `small` size
    */
   icon?: CanvasSystemIcon;
   /**
-   * The position of the TertiaryButton icon.
+   * Button icon positions can either be `left` or `right`.
+   * If no value is provided, it defaults to `left`.
    * @default 'left'
    */
-  iconPosition?: 'left' | 'right';
+  iconPosition?: IconPositions;
   /**
    * If set to `true`, transform the icon's x-axis to mirror the graphic
    * @default false
@@ -28,8 +31,29 @@ export interface ButtonLabelIconProps {
   shouldMirrorIcon?: boolean;
 }
 
-const ICON_SIZE = 24;
-const SMALL_ICON_SIZE = 20;
+const iconSizes: Record<ButtonSizes, number> = {
+  extraSmall: 18,
+  small: 20,
+  medium: 20,
+  large: 24,
+};
+
+const getIconPositionStyles = ({iconPosition, size}: ButtonLabelIconProps) => {
+  // Adjust margin values for visual balance, large buttons require 8px
+  const balancingMargin = size === 'large' ? space.xxs : space.xxxs;
+  // iconPosition can only be "right", "left", or undefined (defaults to "left")
+  if (iconPosition === 'right') {
+    return {
+      marginLeft: undefined,
+      marginRight: `-${balancingMargin} !important`,
+    };
+  } else {
+    return {
+      marginLeft: `-${balancingMargin} !important`,
+      marginRight: undefined,
+    };
+  }
+};
 
 const ButtonLabelIconStyled = styled('span', {
   shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
@@ -38,13 +62,10 @@ const ButtonLabelIconStyled = styled('span', {
     display: 'inline-block',
   },
   ({size}) => ({
-    width: size === 'small' ? SMALL_ICON_SIZE : ICON_SIZE,
-    height: size === 'small' ? SMALL_ICON_SIZE : ICON_SIZE,
+    width: size ? iconSizes[size] : iconSizes.medium,
+    height: size ? iconSizes[size] : iconSizes.medium,
   }),
-  ({iconPosition}) => ({
-    marginLeft: iconPosition === 'right' ? undefined : `-${space.xxxs} !important`,
-    marginRight: iconPosition === 'right' ? `-${space.xxxs} !important` : undefined,
-  })
+  getIconPositionStyles
 );
 
 export const ButtonLabelIcon = ({
@@ -54,12 +75,11 @@ export const ButtonLabelIcon = ({
   shouldMirrorIcon = false,
   ...elemProps
 }: ButtonLabelIconProps) => {
-  /* istanbul ignore next line for coverage */
   if (icon === undefined) {
     return null;
   }
 
-  const iconSize = size === 'small' ? SMALL_ICON_SIZE : undefined;
+  const iconSize = size ? iconSizes[size] : undefined;
 
   return (
     <ButtonLabelIconStyled iconPosition={iconPosition} size={size} {...elemProps}>

package/button/lib/types.ts

@@ -20,3 +20,13 @@ export interface ButtonColors {
   };
   disabled: ButtonStateColors;
 }
+
+/**
+ * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
+ * If no size is provided, it will default to `medium`.
+ *
+ * @default 'medium'
+ */
+export type ButtonSizes = 'extraSmall' | 'small' | 'medium' | 'large';
+
+export type IconPositions = 'left' | 'right';

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

@@ -1,13 +1,20 @@
 import * as React from 'react';
 import { GrowthBehavior, Themeable, EmotionCanvasTheme } from '@workday/canvas-kit-react/common';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
-import { ButtonColors } from './types';
+import { ButtonSizes, IconPositions } from './types';
 export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
     /**
-     * The size of the Button.
+     * The variant of the PrimaryButton.
+     * @default undefined
+     */
+    variant?: 'inverse';
+    /**
+     * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
+     * If no size is provided, it will default to `medium`.
+     *
      * @default 'medium'
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: ButtonSizes;
     /**
      * The data label of the Button.
      * Note: not displayed at `small` size
@@ -19,10 +26,11 @@ export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
      */
     icon?: CanvasSystemIcon;
     /**
-     * The position of the TertiaryButton icon.
+     * Button icon positions can either be `left` or `right`.
+     * If no value is provided, it defaults to `left`.
      * @default 'left'
      */
-    iconPosition?: 'left' | 'right';
+    iconPosition?: IconPositions;
     /**
      * If set to `true`, transform the icon's x-axis to mirror the graphic
      * @default false
@@ -31,5 +39,71 @@ export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
     children?: React.ReactNode;
 }
 export declare const PrimaryButton: import("../../common").ElementComponent<"button", PrimaryButtonProps>;
-export declare const getPrimaryButtonColors: ({ canvas: { palette: { primary: themePrimary }, }, }: EmotionCanvasTheme) => ButtonColors;
+export declare const getPrimaryButtonColors: (variant: "inverse" | undefined, theme: EmotionCanvasTheme) => {
+    default: {
+        background: string;
+        icon: string;
+        label: string;
+        labelData?: undefined;
+    };
+    hover: {
+        background: string;
+        icon?: undefined;
+        label?: undefined;
+        labelData?: undefined;
+    };
+    active: {
+        background: string;
+        icon?: undefined;
+        label?: undefined;
+        labelData?: undefined;
+    };
+    focus: {
+        background: string;
+        border?: undefined;
+        icon?: undefined;
+        label?: undefined;
+        labelData?: undefined;
+        focusRing?: undefined;
+    };
+    disabled: {
+        background: string;
+        icon?: undefined;
+        label?: undefined;
+        labelData?: undefined;
+    };
+} | {
+    default: {
+        background: string;
+        icon: string;
+        label: string;
+        labelData: string;
+    };
+    hover: {
+        background: string;
+        icon: string;
+        label: string;
+        labelData: string;
+    };
+    active: {
+        background: string;
+        icon: string;
+        label: string;
+        labelData: string;
+    };
+    focus: {
+        background: string;
+        border: string;
+        icon: string;
+        label: string;
+        labelData: string;
+        focusRing: import("@emotion/serialize").CSSObject;
+    };
+    disabled: {
+        background: string;
+        icon: string;
+        label: string;
+        labelData: string;
+    };
+};
 //# 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,EACT,kBAAkB,EAEnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAGrC,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IACnE;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,uEA6CxB,CAAC;AAEH,eAAO,MAAM,sBAAsB,4FAsBjC,CAAC"}
+{"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,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,OAAO,EAAC,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAEnD,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IACnE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,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;AAYD,eAAO,MAAM,aAAa,uEA+CxB,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6ElC,CAAC"}

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

@@ -31,7 +31,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var parts_1 = require("./parts");
+// Button sizes where data labels are enabled
+var dataLabelSizes = ['medium', 'large'];
+// All disabled buttons are set to 40% opacity.
+// This will eventually live in the ButtonContainer styles, but for now we're scoping it to Primary, Secondary, and Tertiary buttons.
+var disabledButtonOpacity = {
+    '&:disabled, &:disabled:active': {
+        opacity: 0.4,
+    },
+};
 exports.PrimaryButton = common_1.createComponent('button')({
     displayName: 'PrimaryButton',
     Component: function (_a, ref, Element) {
@@ -41,33 +51,77 @@ exports.PrimaryButton = common_1.createComponent('button')({
         _b = _a.theme, 
         // TODO: Fix useTheme and make it a real hook
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        theme = _b === void 0 ? common_1.useTheme() : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'left' : _d, dataLabel = _a.dataLabel, icon = _a.icon, _e = _a.shouldMirrorIcon, shouldMirrorIcon = _e === void 0 ? false : _e, children = _a.children, elemProps = __rest(_a, ["theme", "size", "iconPosition", "dataLabel", "icon", "shouldMirrorIcon", "children"]);
-        return (React.createElement(parts_1.ButtonContainer, __assign({ ref: ref, as: Element, colors: exports.getPrimaryButtonColors(theme), size: size }, elemProps),
-            icon && size !== 'small' && iconPosition === 'left' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
+        theme = _b === void 0 ? common_1.useTheme() : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'left' : _d, variant = _a.variant, dataLabel = _a.dataLabel, icon = _a.icon, _e = _a.shouldMirrorIcon, shouldMirrorIcon = _e === void 0 ? false : _e, children = _a.children, elemProps = __rest(_a, ["theme", "size", "iconPosition", "variant", "dataLabel", "icon", "shouldMirrorIcon", "children"]);
+        return (React.createElement(parts_1.ButtonContainer, __assign({ ref: ref, as: Element, colors: exports.getPrimaryButtonColors(variant, theme), size: size, extraStyles: disabledButtonOpacity }, elemProps),
+            icon && iconPosition === 'left' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
             React.createElement(parts_1.ButtonLabel, null, children),
-            dataLabel && size !== 'small' && React.createElement(parts_1.ButtonLabelData, null, dataLabel),
-            icon && size !== 'small' && iconPosition === 'right' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
+            dataLabel && dataLabelSizes.includes(size) && React.createElement(parts_1.ButtonLabelData, null, dataLabel),
+            icon && iconPosition === 'right' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
     },
 });
-exports.getPrimaryButtonColors = function (_a) {
-    var themePrimary = _a.canvas.palette.primary;
-    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.light,
-        },
-    });
+exports.getPrimaryButtonColors = function (variant, theme) {
+    var themePrimary = theme.canvas.palette.primary;
+    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,
+                    labelData: tokens_1.colors.blackPepper400,
+                },
+                hover: {
+                    background: tokens_1.colors.soap300,
+                    icon: tokens_1.colors.blackPepper500,
+                    label: tokens_1.colors.blackPepper500,
+                    labelData: tokens_1.colors.blackPepper500,
+                },
+                active: {
+                    background: tokens_1.colors.soap300,
+                    icon: tokens_1.colors.blackPepper500,
+                    label: tokens_1.colors.blackPepper500,
+                    labelData: 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,
+                    labelData: tokens_1.colors.blackPepper400,
+                    focusRing: common_1.focusRing({
+                        separation: 1,
+                        innerColor: tokens_1.colors.blackPepper500,
+                        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,
+                    labelData: tokens_1.colors.blackPepper400,
+                },
+            };
+    }
 };

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

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import { CSSObject } from '@emotion/core';
 import { GrowthBehavior, EmotionCanvasTheme, StyledType } from '@workday/canvas-kit-react/common';
-import { ButtonColors } from '../types';
+import { ButtonColors, ButtonSizes } from '../types';
 export interface ButtonContainerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, GrowthBehavior {
     colors?: ButtonColors;
     /**
-     * The size of the Button.
+     * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
+     * If no size is provided, it will default to `medium`.
+     *
      * @default 'medium'
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: ButtonSizes;
     /**
      * The ref to the button that the styled component renders.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonContainer.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAExC,OAAO,EACL,cAAc,EAId,kBAAkB,EAClB,UAAU,EACX,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,YAAY,EAAC,MAAM,UAAU,CAAC;AAGtC,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,cAAc;IAChB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AA8BD,eAAO,MAAM,eAAe,kMAqK3B,CAAC"}
+{"version":3,"file":"ButtonContainer.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAExC,OAAO,EACL,cAAc,EAId,kBAAkB,EAClB,UAAU,EACX,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,YAAY,EAAE,WAAW,EAAC,MAAM,UAAU,CAAC;AAGnD,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,cAAc;IAChB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AA8BD,eAAO,MAAM,eAAe,kMA8K3B,CAAC"}

package/dist/commonjs/button/lib/parts/ButtonContainer.js

@@ -50,15 +50,9 @@ exports.ButtonContainer = common_1.styled('button', {
     var size = _a.size;
     switch (size) {
         case 'large':
-            return {
-                fontSize: tokens_1.type.properties.fontSizes[16],
-                minWidth: '112px',
-                height: '48px',
-                padding: "0 " + tokens_1.space.l,
-                '& > * ': {
-                    margin: "0 " + tokens_1.spaceNumbers.xs / 2 + "px",
-                },
-            };
+            return __assign(__assign({}, tokens_1.type.levels.body.small), { fontWeight: tokens_1.type.properties.fontWeights.bold, minWidth: '112px', height: '48px', padding: "0 " + tokens_1.space.l, '& > * ': {
+                    margin: "0 " + tokens_1.spaceNumbers.xxs / 2 + "px",
+                } });
         case 'medium':
         default:
             return {
@@ -78,6 +72,14 @@ exports.ButtonContainer = common_1.styled('button', {
                     margin: "0 " + tokens_1.spaceNumbers.xxxs / 2 + "px",
                 },
             };
+        case 'extraSmall':
+            return {
+                height: tokens_1.space.m,
+                padding: "0 " + tokens_1.space.xs,
+                '& > * ': {
+                    margin: "0 " + tokens_1.spaceNumbers.xxxs / 2 + "px",
+                },
+            };
     }
 }, function (_a) {
     var grow = _a.grow;