@workday/canvas-kit-react 15.0.0-alpha.1303-next.0 → 15.0.0

package/button/lib/ToolbarDropdownButton.tsx

@@ -1,10 +1,17 @@
-import {brand, system} from '@workday/canvas-tokens-web';
-import {calc, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
-import {chevronDownSmallIcon} from '@workday/canvas-system-icons-web';
-import {focusRing, createComponent} from '@workday/canvas-kit-react/common';
+import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {
+  calc,
+  colorSpace,
+  createStencil,
+  cssVar,
+  handleCsProp,
+  px2rem,
+} from '@workday/canvas-kit-styling';
+import {chevronDownSmallIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
 
-import {BaseButton, buttonStencil} from './BaseButton';
+import {BaseButton, buttonColorPropVars, buttonStencil} from './BaseButton';
 import {ToolbarIconButtonProps} from './ToolbarIconButton';
 
 export interface ToolbarDropdownButtonProps
@@ -17,40 +24,71 @@ export const toolbarDropdownButtonStencil = createStencil({
     customIcon: 'toolbar-dropdown-btn-custom-icon',
   },
   base: ({chevronPart, customIconPart}) => ({
-    padding: system.space.zero,
-    minWidth: system.space.x8,
-    gap: system.space.zero,
-    [buttonStencil.vars.borderRadius]: system.shape.x1,
-    [systemIconStencil.vars.color]: system.color.fg.muted.soft,
+    padding: 0,
+    minWidth: system.legacy.size.sm,
+    gap: 0,
+    [buttonStencil.vars.borderRadius]: system.legacy.shape.sm,
+    [systemIconStencil.vars.color]: cssVar(
+      buttonColorPropVars.default.icon,
+      system.color.fg.default
+    ),
+    [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
 
     '&:focus-visible, &.focus': {
-      [buttonStencil.vars.background]: system.color.bg.transparent.default,
-      [systemIconStencil.vars.color]: system.color.fg.muted.soft,
+      [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
+
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.focus.icon,
+        system.color.fg.strong
+      ),
       ...focusRing({
         width: 2,
         separation: 0,
-        innerColor: system.color.border.transparent,
-        outerColor: brand.common.focusOutline,
+        innerColor: system.legacy.color.focus.inverse,
+
+        outerColor: system.legacy.color.brand.focus.primary,
       }),
     },
 
     '&:hover, &.hover': {
-      [buttonStencil.vars.background]: system.color.bg.alt.default,
-      [systemIconStencil.vars.color]: system.color.fg.muted.stronger,
+      [buttonStencil.vars.background]: colorSpace.darken({
+        color: system.legacy.color.surface.transparent,
+        mixinColor: system.legacy.color.surface.overlay.mixin,
+        mixinValue: system.legacy.opacity.surface.hover,
+      }),
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.hover.icon,
+        system.color.fg.default
+      ),
     },
 
     '&:active, &.active': {
-      [buttonStencil.vars.background]: system.color.bg.alt.stronger,
-      [systemIconStencil.vars.color]: system.color.fg.muted.stronger,
+      [buttonStencil.vars.background]: colorSpace.darken({
+        color: system.legacy.color.surface.transparent,
+        mixinColor: system.legacy.color.surface.overlay.mixin,
+        mixinValue: system.legacy.opacity.surface.pressed,
+      }),
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.active.icon,
+        system.color.fg.strong
+      ),
     },
 
     '&:disabled, &.disabled': {
-      [buttonStencil.vars.background]: system.color.bg.transparent.default,
-      [systemIconStencil.vars.color]: system.color.fg.disabled,
+      [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
+      [buttonStencil.vars.opacity]: system.opacity.disabled,
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.disabled.icon,
+        system.color.fg.default
+      ),
+      [systemIconStencil.vars.color]: cssVar(
+        buttonColorPropVars.disabled.icon,
+        system.color.fg.default
+      ),
     },
 
     [customIconPart]: {
-      marginInlineStart: system.space.x1,
+      marginInlineStart: system.legacy.padding.xxs,
       marginInlineEnd: calc.negate(px2rem(2)),
     },
 

package/button/lib/ToolbarIconButton.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import {focusRing, createComponent} from '@workday/canvas-kit-react/common';
+
+import {createComponent, focusRing} from '@workday/canvas-kit-react/common';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {colorSpace, createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
 import {BaseButton, buttonStencil} from './BaseButton';
 import {TertiaryButtonProps} from './TertiaryButton';
-import {brand, system} from '@workday/canvas-tokens-web';
-import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
-import {systemIconStencil} from '@workday/canvas-kit-react/icon';
 
 export interface ToolbarIconButtonProps extends Omit<TertiaryButtonProps, 'size' | 'variant'> {
   onToggleChange?: (toggled: boolean | undefined) => void;
@@ -16,53 +18,72 @@ export interface ToolbarIconButtonProps extends Omit<TertiaryButtonProps, 'size'
 export const toolbarIconButtonStencil = createStencil({
   extends: buttonStencil,
   base: {
-    minWidth: system.space.x8,
-    padding: system.space.zero,
-    height: system.space.x8,
-    [buttonStencil.vars.borderRadius]: system.shape.x1,
-    [systemIconStencil.vars.color]: system.color.fg.muted.soft,
+    minWidth: system.legacy.size.sm,
+    padding: 0,
+    height: system.legacy.size.sm,
+    [buttonStencil.vars.borderRadius]: system.legacy.shape.sm,
+    [systemIconStencil.vars.color]: system.color.fg.default,
+    [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
 
     '&:focus-visible, &.focus': {
-      [systemIconStencil.vars.color]: system.color.fg.muted.soft,
+      [systemIconStencil.vars.color]: system.color.fg.strong,
       ...focusRing({
         width: 2,
         separation: 0,
         innerColor: system.color.border.transparent,
-        outerColor: brand.common.focusOutline,
+        outerColor: system.legacy.color.brand.focus.primary,
       }),
     },
 
     '&:hover, &.hover': {
-      [buttonStencil.vars.background]: system.color.bg.alt.default,
-      [systemIconStencil.vars.color]: system.color.fg.muted.stronger,
+      [buttonStencil.vars.background]: colorSpace.darken({
+        color: system.legacy.color.surface.transparent,
+        mixinColor: system.legacy.color.surface.overlay.mixin,
+        mixinValue: system.legacy.opacity.surface.hover,
+      }),
+      [systemIconStencil.vars.color]: system.color.fg.strong,
     },
 
     '&:active, &.active': {
-      [buttonStencil.vars.background]: system.color.bg.alt.stronger,
+      [buttonStencil.vars.background]: colorSpace.darken({
+        color: system.legacy.color.surface.transparent,
+        mixinColor: system.legacy.color.surface.overlay.mixin,
+        mixinValue: system.legacy.opacity.surface.pressed,
+      }),
+      [systemIconStencil.vars.color]: system.color.fg.strong,
     },
 
     '&:disabled, &.disabled': {
-      [buttonStencil.vars.background]: system.color.bg.transparent.default,
-      [systemIconStencil.vars.color]: system.color.fg.disabled,
+      [buttonStencil.vars.opacity]: system.opacity.disabled,
+      [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
+      [systemIconStencil.vars.color]: system.color.fg.default,
     },
 
     "&[aria-pressed='true']": {
-      [systemIconStencil.vars.color]: brand.primary.base,
-      [buttonStencil.vars.background]: brand.primary.lightest,
+      [systemIconStencil.vars.color]: system.legacy.color.brand.fg.primary.default,
 
-      '&:hover, &.hover': {
-        [buttonStencil.vars.background]: system.color.bg.alt.default,
-        [systemIconStencil.vars.color]: brand.primary.dark,
+      [buttonStencil.vars.background]: system.legacy.color.brand.surface.primary.default,
+
+      '&:focus-visible, &.focus': {
+        [systemIconStencil.vars.color]: system.legacy.color.brand.fg.primary.strong,
       },
 
-      '&:active, &.active': {
-        [buttonStencil.vars.background]: system.color.bg.alt.stronger,
-        [systemIconStencil.vars.color]: brand.primary.dark,
+      '&:hover, &.hover': {
+        [buttonStencil.vars.background]: colorSpace.darken({
+          color: system.legacy.color.brand.surface.primary.default,
+          mixinColor: system.legacy.color.surface.overlay.mixin,
+          mixinValue: system.legacy.opacity.surface.hover,
+        }),
+        [systemIconStencil.vars.color]: system.legacy.color.brand.fg.primary.strong,
       },
 
-      '&:disabled, &.disabled': {
-        [buttonStencil.vars.background]: brand.primary.lightest,
-        [systemIconStencil.vars.color]: brand.primary.light,
+      '&:active, &.active': {
+        [buttonStencil.vars.background]: colorSpace.darken({
+          color: system.legacy.color.brand.surface.primary.default,
+          mixinColor: system.legacy.color.surface.overlay.mixin,
+          mixinValue: system.legacy.opacity.surface.pressed,
+        }),
+        [systemIconStencil.vars.color]: system.legacy.color.brand.fg.primary.strong,
       },
     },
   },

package/button/lib/parts/ButtonLabel.tsx

@@ -1,4 +1,4 @@
-import {styled, createComponent, StyledType} from '@workday/canvas-kit-react/common';
+import {StyledType, createComponent, styled} from '@workday/canvas-kit-react/common';
 import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 
 export interface ButtonLabelProps extends BoxProps {}

package/button/lib/parts/ButtonLabelIcon.tsx

@@ -1,7 +1,9 @@
-import {ButtonSizes} from '../types';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
-import {px2rem} from '@workday/canvas-kit-styling';
+import {SystemIcon, SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {component} from '@workday/canvas-tokens-web';
+
+import {ButtonSizes} from '../types';
 
 export interface ButtonLabelIconProps extends Partial<SystemIconProps> {
   /**
@@ -26,12 +28,27 @@ export interface ButtonLabelIconProps extends Partial<SystemIconProps> {
   shouldMirrorIconInRTL?: boolean;
 }
 
-const iconSizes: Record<ButtonSizes, number> = {
-  extraSmall: 18,
-  small: 20,
-  medium: 20,
-  large: 24,
-};
+const buttonIconStencil = createStencil({
+  base: {
+    display: 'inline-block',
+  },
+  modifiers: {
+    size: {
+      extraSmall: {
+        [systemIconStencil.vars.size]: component.legacy.systemIcon.size.xs,
+      },
+      small: {
+        [systemIconStencil.vars.size]: component.legacy.systemIcon.size.md,
+      },
+      medium: {
+        [systemIconStencil.vars.size]: component.legacy.systemIcon.size.md,
+      },
+      large: {
+        [systemIconStencil.vars.size]: component.legacy.systemIcon.size.lg,
+      },
+    },
+  },
+});
 
 export const ButtonLabelIcon = createComponent('span')({
   Component: (
@@ -49,20 +66,14 @@ export const ButtonLabelIcon = createComponent('span')({
       return null;
     }
 
-    const iconSize = iconSizes[size];
-
     return (
       <SystemIcon
         ref={ref}
         as={Element}
-        size={iconSize}
         icon={icon}
-        width={px2rem(iconSize)}
-        height={px2rem(iconSize)}
-        display="inline-block"
         shouldMirror={shouldMirrorIcon}
         shouldMirrorInRTL={shouldMirrorIconInRTL}
-        {...elemProps}
+        {...handleCsProp(elemProps, buttonIconStencil({size}))}
       />
     );
   },

package/card/lib/Card.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {mergeStyles, BoxProps} from '@workday/canvas-kit-react/layout';
+import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
-import {CardHeading} from './CardHeading';
 import {CardBody} from './CardBody';
+import {CardHeading} from './CardHeading';
 
 export interface CardProps extends BoxProps {
   /**
@@ -14,10 +14,10 @@ export interface CardProps extends BoxProps {
    */
   children?: React.ReactNode;
   /**
-   * The variant of the Card. Can be `default`, `borderless` or `filled`.
+   * The variant of the Card. Can be `default`, `borderless` or `tonal`.
    * @default 'default'
    */
-  variant?: 'borderless' | 'filled';
+  variant?: 'borderless' | 'tonal';
 }
 
 // .cnvs-card
@@ -25,19 +25,19 @@ export const cardStencil = createStencil({
   base: {
     display: 'flex',
     flexDirection: 'column',
-    gap: system.space.x6,
-    padding: system.space.x8,
-    backgroundColor: system.color.bg.default,
-    borderRadius: system.shape.x2,
-    border: `${px2rem(1)} solid ${system.color.border.container}`,
+    gap: system.legacy.gap.lg,
+    padding: system.legacy.padding.xl,
+    backgroundColor: system.legacy.color.surface.default,
+    borderRadius: system.legacy.shape.xxl,
+    border: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
   },
   modifiers: {
     variant: {
       borderless: {
         borderColor: 'transparent',
       },
-      filled: {
-        backgroundColor: system.color.bg.alt.soft,
+      tonal: {
+        backgroundColor: system.legacy.color.surface.alt.default,
         borderColor: system.color.border.transparent,
       },
     },

package/card/lib/CardHeading.tsx

@@ -20,7 +20,7 @@ export const cardHeadingStencil = createStencil({
   base: {
     color: system.color.fg.strong,
     fontWeight: system.fontWeight.bold,
-    marginBlock: system.space.zero,
+    marginBlock: system.legacy.padding.none,
   },
   defaultModifiers: {typeLevel: 'body.large'},
 });

package/checkbox/lib/CheckBackground.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
-import {createComponent, ErrorType} from '@workday/canvas-kit-react/common';
-import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {brand, system} from '@workday/canvas-tokens-web';
+
+import {ErrorType, createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 interface CheckBackgroundProps {
   children: React.ReactNode;
   error?: ErrorType;
+  variant?: 'inverse';
 }
 
 export const checkboxBackgroundStencil = createStencil({
@@ -13,39 +15,72 @@ export const checkboxBackgroundStencil = createStencil({
     errorRingColorInner: '',
     errorRingColorOuter: '',
   },
+  parts: {
+    background: 'checkbox-background',
+  },
   base: {
     alignItems: 'center',
-    backgroundColor: system.color.bg.default,
-    borderRadius: system.shape.half,
+    backgroundColor: system.legacy.color.surface.default,
+    borderRadius: system.legacy.shape.sm,
+    boxSizing: 'border-box',
     display: 'flex',
-    height: calc.add(system.space.x4, px2rem(2)),
+    height: base.legacy.size225,
     justifyContent: 'center',
-    padding: `${system.space.zero} ${calc.divide(system.space.x1, 2)}`,
+    padding: `0 ${px2rem(2)}`,
     pointerEvents: 'none',
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
-    width: calc.add(system.space.x4, px2rem(2)),
+    width: base.legacy.size225,
     border: `${px2rem(1)} solid ${system.color.border.input.default}`,
   },
   modifiers: {
+    variant: {
+      inverse: {
+        backgroundColor: system.legacy.color.surface.inverse,
+      },
+    },
     error: {
       error: ({errorRingColorInner, errorRingColorOuter}) => ({
-        [errorRingColorInner]: brand.common.errorInner,
+        [errorRingColorInner]: system.legacy.color.brand.border.critical,
+
         [errorRingColorOuter]: 'transparent',
-        backgroundColor: brand.error.lightest,
+        backgroundColor: system.legacy.color.brand.surface.critical.default,
       }),
       caution: ({errorRingColorInner, errorRingColorOuter}) => ({
-        [errorRingColorInner]: brand.common.alertInner,
-        [errorRingColorOuter]: brand.common.alertOuter,
-        backgroundColor: brand.alert.lightest,
+        [errorRingColorInner]: system.legacy.color.brand.focus.caution.inner,
+
+        [errorRingColorOuter]: system.legacy.color.brand.border.caution,
+
+        backgroundColor: system.legacy.color.brand.surface.caution.default,
       }),
     },
   },
+  compound: [
+    {
+      modifiers: {variant: 'inverse', error: 'error'},
+      styles: {
+        backgroundColor: system.legacy.color.surface.inverse,
+      },
+    },
+    {
+      modifiers: {variant: 'inverse', error: 'caution'},
+      styles: {
+        backgroundColor: system.legacy.color.surface.inverse,
+      },
+    },
+  ],
 });
 
 export const CheckBackground = createComponent('div')({
   displayName: 'CheckBackground',
-  Component: ({error, children}: CheckBackgroundProps) => {
-    return <div {...checkboxBackgroundStencil({error})}>{children}</div>;
+  Component: ({error, variant, children}: CheckBackgroundProps) => {
+    return (
+      <div
+        {...checkboxBackgroundStencil.parts.background}
+        {...checkboxBackgroundStencil({error, variant})}
+      >
+        {children}
+      </div>
+    );
   },
 });

package/checkbox/lib/Checkbox.tsx

@@ -1,14 +1,16 @@
 import * as React from 'react';
+
 import {
-  createComponent,
   ErrorType,
-  useUniqueId,
+  createComponent,
   useLocalRef,
+  useUniqueId,
 } from '@workday/canvas-kit-react/common';
-import {CheckboxRipple} from './CheckboxRipple';
-import {CheckboxContainer} from './CheckboxContainer';
+
 import {CheckboxCheck} from './CheckboxCheck';
-import {CheckboxInput, CheckboxProps} from './CheckboxInput';
+import {CheckboxContainer} from './CheckboxContainer';
+import {CheckboxInput, type CheckboxProps} from './CheckboxInput';
+import {CheckboxRipple} from './CheckboxRipple';
 
 export const Checkbox = createComponent('input')({
   displayName: 'Checkbox',
@@ -41,4 +43,4 @@ export const Checkbox = createComponent('input')({
   },
 });
 
-export {CheckboxProps};
+export {type CheckboxProps};

package/checkbox/lib/CheckboxCheck.tsx

@@ -1,8 +1,9 @@
 import {ErrorType, createComponent} from '@workday/canvas-kit-react/common';
-import {createStencil, calc, px2rem} from '@workday/canvas-kit-styling';
-import {brand, system} from '@workday/canvas-tokens-web';
 import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {checkSmallIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
 import {CheckBackground} from './CheckBackground';
 
 interface CheckboxCheckProps {
@@ -29,7 +30,7 @@ const checkboxCheckStencil = createStencil({
   modifiers: {
     checked: {
       true: {
-        [systemIconStencil.vars.color]: brand.primary.accent,
+        [systemIconStencil.vars.color]: system.color.fg.inverse,
         opacity: system.opacity.full,
         transform: 'scale(1)',
       },
@@ -42,9 +43,10 @@ const checkboxCheckStencil = createStencil({
     },
     variant: {
       inverse: {
-        [systemIconStencil.vars.color]: brand.primary.base,
+        [systemIconStencil.vars.color]: system.legacy.color.brand.fg.primary.default,
+
         '& > div': {
-          backgroundColor: brand.primary.base,
+          backgroundColor: system.legacy.color.brand.accent.primary,
         },
       },
     },
@@ -54,8 +56,15 @@ const checkboxCheckStencil = createStencil({
 const indeterminateBoxStencil = createStencil({
   base: {
     width: px2rem(10),
-    height: calc.divide(system.space.x1, 2),
-    backgroundColor: brand.primary.accent,
+    height: px2rem(2),
+    backgroundColor: system.color.fg.inverse,
+  },
+  modifiers: {
+    variant: {
+      inverse: {
+        backgroundColor: system.legacy.color.brand.accent.primary,
+      },
+    },
   },
 });
 
@@ -63,10 +72,10 @@ export const CheckboxCheck = createComponent('div')({
   displayName: 'CheckboxCheck',
   Component: ({checked, error, indeterminate, variant}: CheckboxCheckProps) => {
     return (
-      <CheckBackground error={error}>
+      <CheckBackground error={error} variant={variant}>
         <div {...checkboxCheckStencil({checked, indeterminate, variant})}>
           {indeterminate ? (
-            <div {...indeterminateBoxStencil()} />
+            <div {...indeterminateBoxStencil({variant})} />
           ) : (
             checked && <SystemIcon icon={checkSmallIcon} />
           )}

package/checkbox/lib/CheckboxContainer.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
+
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {CSProps, calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
 import {LabelText} from '@workday/canvas-kit-react/text';
+import {CSProps, createStencil} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
 
 interface CheckboxContainerProps extends CSProps {
   children: React.ReactNode;
@@ -16,7 +17,7 @@ const checkboxContainerStencil = createStencil({
   base: {
     display: 'flex',
     alignItems: 'center',
-    minHeight: system.space.x6,
+    minHeight: base.legacy.size225,
     position: 'relative',
     /**
      * Using a wrapper prevents the browser default behavior of trigging
@@ -25,13 +26,13 @@ const checkboxContainerStencil = createStencil({
      */
     '&>div': {
       display: 'flex',
-      height: calc.add(system.space.x4, px2rem(2)),
-      minWidth: calc.add(system.space.x4, px2rem(2)),
-      marginTop: px2rem(3),
+      height: base.legacy.size225,
+      minWidth: base.legacy.size225,
       alignSelf: 'flex-start',
+      position: 'relative',
     },
     '& > label': {
-      paddingInlineStart: system.space.x3,
+      paddingInlineStart: system.legacy.padding.sm,
     },
   },
 });