@workday/canvas-kit-react 11.0.0-alpha.726-next.0 → 11.0.0-alpha.760-next.0

package/breadcrumbs/lib/BreadcrumbsItem.tsx

@@ -74,7 +74,7 @@ export const BreadcrumbsItem = createSubcomponent('li')({
         height={space.l}
         width={space.l}
         shouldMirror={useIsRTL()}
-        styles={{justifyContent: 'center', alignItems: 'center', display: 'inline-flex'}}
+        cs={{justifyContent: 'center', alignItems: 'center', display: 'inline-flex'}}
         aria-hidden
       />
     </Flex>

package/breadcrumbs/lib/BreadcrumbsOverflowButton.tsx

@@ -50,7 +50,7 @@ export const BreadcrumbsOverflowButton = createSubcomponent('button')({
         height={space.l}
         width={space.l}
         shouldMirror={useIsRTL()}
-        styles={{justifyContent: 'center', alignItems: 'center', display: 'inline-flex'}}
+        cs={{justifyContent: 'center', alignItems: 'center', display: 'inline-flex'}}
         aria-hidden
       />
     </Flex>

package/button/lib/BaseButton.tsx

@@ -6,7 +6,7 @@ import {ButtonLabel} from '../lib/parts/ButtonLabel';
 import {createComponent, GrowthBehavior, focusRing} from '@workday/canvas-kit-react/common';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createStyles, createVars, cssVar, createModifiers} from '@workday/canvas-kit-styling';
-import {SystemIconProps} from '@workday/canvas-kit-react/icon';
+import {SystemIconProps, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {base, brand, system} from '@workday/canvas-tokens-web';
 import {ButtonColors, ButtonSizes, IconPositions} from './types';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
@@ -140,6 +140,7 @@ const baseButtonStyles = createStyles({
   position: 'relative',
   verticalAlign: 'middle',
   overflow: 'hidden',
+  [systemIconStencil.vars.color]: cssVar(buttonVars.default.icon, base.blackPepper400),
   transition:
     'box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear',
   '&:disabled, &:disabled:active, &.disabled': {
@@ -147,6 +148,7 @@ const baseButtonStyles = createStyles({
     boxShadow: 'none',
     opacity: cssVar(buttonVars.disabled.opacity, '1'),
   },
+  /*
   '& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2': {
     transitionDuration: '40ms',
     fill: cssVar(buttonVars.default.icon, base.blackPepper400),
@@ -154,13 +156,17 @@ const baseButtonStyles = createStyles({
   '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
     fill: cssVar(buttonVars.default.icon, base.blackPepper400),
   },
+  */
   '&:focus-visible, &.focus': {
     backgroundColor: cssVar(buttonVars.focus.background, 'transparent'),
     borderColor: cssVar(buttonVars.focus.border, 'transparent'),
     color: cssVar(buttonVars.focus.label, base.blackPepper400),
+    [systemIconStencil.vars.color]: cssVar(buttonVars.focus.icon, base.blackPepper400),
+    /* 
     '& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2': {
       fill: cssVar(buttonVars.focus.icon, base.blackPepper400),
     },
+    */
     ...focusRing({
       width: 2,
       separation: 2,
@@ -172,26 +178,35 @@ const baseButtonStyles = createStyles({
     backgroundColor: cssVar(buttonVars.hover.background, base.blackPepper500),
     borderColor: cssVar(buttonVars.hover.border, 'transparent'),
     color: cssVar(buttonVars.hover.label, base.blackPepper500),
+    [systemIconStencil.vars.color]: cssVar(buttonVars.hover.icon, base.blackPepper500),
+    /* 
     '& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2': {
       fill: cssVar(buttonVars.hover.icon, base.blackPepper500),
     },
+    */
   },
   '&:hover:active': {transitionDuration: '40ms'},
   '&:active, &.active': {
     backgroundColor: cssVar(buttonVars.active.background, 'transparent'),
     borderColor: cssVar(buttonVars.active.border, 'transparent'),
     color: cssVar(buttonVars.active.label, base.blackPepper400),
+    [systemIconStencil.vars.color]: cssVar(buttonVars.active.icon, base.blackPepper400),
+    /* 
     '& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2': {
       fill: cssVar(buttonVars.active.icon, base.blackPepper400),
     },
+    */
   },
   '&:disabled, &.disabled': {
     backgroundColor: cssVar(buttonVars.disabled.background, 'transparent'),
     borderColor: cssVar(buttonVars.disabled.border, 'transparent'),
     color: cssVar(buttonVars.disabled.label, base.blackPepper400),
+    [systemIconStencil.vars.color]: cssVar(buttonVars.disabled.icon, base.blackPepper400),
+    /* 
     '& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2': {
       fill: cssVar(buttonVars.disabled.icon, base.blackPepper400),
     },
+    */
   },
 });
 

package/button/lib/DeleteButton.tsx

@@ -6,6 +6,7 @@ import {createStyles} from '@workday/canvas-kit-styling';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {base, brand, system} from '@workday/canvas-tokens-web';
 import {Button, ButtonProps} from './Button';
+import {systemIconStencil} from '../../icon';
 
 /**
  * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
@@ -19,31 +20,31 @@ const deleteStyles = createStyles({
   [buttonVars.default.border]: 'transparent',
   [buttonVars.default.borderRadius]: system.shape.round,
   [buttonVars.default.label]: brand.error.accent,
-  [buttonVars.default.icon]: brand.error.accent,
-  '&:hover, &.hover': {
-    [buttonVars.hover.background]: brand.error.dark,
-    [buttonVars.hover.border]: 'transparent',
-    [buttonVars.hover.label]: brand.error.accent,
-    [buttonVars.hover.icon]: brand.error.accent,
-  },
+  [systemIconStencil.vars.color]: brand.error.accent,
   '&:focus-visible, &.focus': {
     [buttonVars.focus.background]: brand.error.base,
     [buttonVars.focus.border]: 'transparent',
     [buttonVars.focus.label]: brand.error.accent,
-    [buttonVars.focus.icon]: brand.error.accent,
+    [systemIconStencil.vars.color]: brand.error.accent,
     [buttonVars.focus.boxShadowInner]: base.frenchVanilla100,
     [buttonVars.focus.boxShadowOuter]: brand.common.focusOutline,
   },
+  '&:hover, &.hover': {
+    [buttonVars.hover.background]: brand.error.dark,
+    [buttonVars.hover.border]: 'transparent',
+    [buttonVars.hover.label]: brand.error.accent,
+    [systemIconStencil.vars.color]: brand.error.accent,
+  },
   '&:active, &.active': {
     [buttonVars.active.background]: brand.error.darkest,
     [buttonVars.active.border]: 'transparent',
     [buttonVars.active.label]: brand.error.accent,
-    [buttonVars.active.icon]: brand.error.accent,
+    [systemIconStencil.vars.color]: brand.error.accent,
   },
-  '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
+  '&:disabled, &.disabled': {
     [buttonVars.disabled.background]: brand.error.base,
     [buttonVars.disabled.label]: brand.error.accent,
-    [buttonVars.disabled.icon]: brand.error.accent,
+    [systemIconStencil.vars.color]: brand.error.accent,
     [buttonVars.disabled.opacity]: '0.4',
   },
 });

package/button/lib/ExternalHyperlink.tsx

@@ -51,7 +51,7 @@ export const ExternalHyperlink = createComponent('a')({
         role="img"
         aria-label={iconLabel}
         size={iconSize}
-        styles={{['& svg']: {minWidth: minIconSize, minHeight: minIconSize}}}
+        cs={{'& svg': {minWidth: minIconSize, minHeight: minIconSize}}}
       />
     </Anchor>
   ),

package/button/lib/PrimaryButton.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import {buttonVars} from './BaseButton';
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {mergeStyles} from '@workday/canvas-kit-react/layout';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {createStyles, createModifiers} from '@workday/canvas-kit-styling';
 import {base, brand, system} from '@workday/canvas-tokens-web';
 import {Button, ButtonProps} from './Button';
@@ -20,63 +21,69 @@ export interface PrimaryButtonProps extends ButtonProps {
 }
 
 const primaryStyles = createStyles({
-  // Default Styles
   [buttonVars.default.background]: brand.primary.base,
   [buttonVars.default.border]: 'transparent',
   [buttonVars.default.borderRadius]: system.shape.round,
   [buttonVars.default.label]: brand.primary.accent,
-  [buttonVars.default.icon]: brand.primary.accent,
-  // Hover Styles
-  [buttonVars.hover.background]: brand.primary.dark,
-  [buttonVars.hover.border]: 'transparent',
-  [buttonVars.hover.label]: brand.primary.accent,
-  [buttonVars.hover.icon]: brand.primary.accent,
-  // Focus Styles
-  [buttonVars.focus.background]: brand.primary.base,
-  [buttonVars.focus.border]: 'transparent',
-  [buttonVars.focus.label]: brand.primary.accent,
-  [buttonVars.focus.icon]: brand.primary.accent,
-  [buttonVars.focus.boxShadowInner]: base.frenchVanilla100,
-  [buttonVars.focus.boxShadowOuter]: brand.common.focusOutline,
-  // Active Styles
-  [buttonVars.active.background]: brand.primary.darkest,
-  [buttonVars.active.border]: 'transparent',
-  [buttonVars.active.label]: brand.primary.accent,
-  [buttonVars.active.icon]: brand.primary.accent,
-  // Disabled Styles
-  [buttonVars.disabled.background]: brand.primary.base,
-  [buttonVars.disabled.border]: 'transparent',
-  [buttonVars.disabled.label]: brand.primary.accent,
-  [buttonVars.disabled.opacity]: '0.4',
-  [buttonVars.disabled.icon]: brand.primary.accent,
+  [systemIconStencil.vars.color]: brand.primary.accent,
+  '&:focus-visible, &.focus': {
+    [buttonVars.focus.background]: brand.primary.base,
+    [buttonVars.focus.border]: 'transparent',
+    [buttonVars.focus.label]: brand.primary.accent,
+    [buttonVars.focus.boxShadowInner]: base.frenchVanilla100,
+    [buttonVars.focus.boxShadowOuter]: brand.common.focusOutline,
+    [systemIconStencil.vars.color]: brand.primary.accent,
+  },
+  '&:hover, &.hover': {
+    [buttonVars.hover.background]: brand.primary.dark,
+    [buttonVars.hover.border]: 'transparent',
+    [buttonVars.hover.label]: brand.primary.accent,
+    [systemIconStencil.vars.color]: brand.primary.accent,
+  },
+  '&:active, &.active': {
+    [buttonVars.active.background]: brand.primary.darkest,
+    [buttonVars.active.border]: 'transparent',
+    [buttonVars.active.label]: brand.primary.accent,
+    [systemIconStencil.vars.color]: brand.primary.accent,
+  },
+  '&:disabled, &.disabled': {
+    [buttonVars.disabled.background]: brand.primary.base,
+    [buttonVars.disabled.border]: 'transparent',
+    [buttonVars.disabled.label]: brand.primary.accent,
+    [buttonVars.disabled.opacity]: '0.4',
+    [systemIconStencil.vars.color]: brand.primary.accent,
+  },
 });
 
 export const primaryButtonModifiers = createModifiers({
   variant: {
     inverse: createStyles({
-      // Default Styles
       [buttonVars.default.background]: base.frenchVanilla100,
       [buttonVars.default.borderRadius]: system.shape.round,
       [buttonVars.default.label]: base.blackPepper400,
-      [buttonVars.default.icon]: base.blackPepper400,
-      // Hover Styles
-      [buttonVars.hover.background]: base.soap300,
-      [buttonVars.hover.label]: base.blackPepper500,
-      [buttonVars.hover.icon]: base.blackPepper500,
-      // Focus Styles
-      [buttonVars.focus.background]: base.frenchVanilla100,
-      [buttonVars.focus.label]: base.blackPepper400,
-      [buttonVars.focus.icon]: base.blackPepper400,
-      [buttonVars.focus.boxShadowInner]: base.blackPepper400,
-      [buttonVars.focus.boxShadowOuter]: base.frenchVanilla100,
-      // Active Styles
-      [buttonVars.active.background]: base.soap400,
-      [buttonVars.active.label]: base.blackPepper500,
-      [buttonVars.active.icon]: base.blackPepper500,
-      // Disabled Styles
-      [buttonVars.disabled.background]: base.frenchVanilla100,
-      [buttonVars.disabled.label]: base.blackPepper400,
-      [buttonVars.disabled.icon]: base.blackPepper400,
+      [systemIconStencil.vars.color]: base.blackPepper400,
+      '&:focus-visible, &.focus': {
+        [buttonVars.focus.background]: base.frenchVanilla100,
+        [buttonVars.focus.label]: base.blackPepper400,
+        [buttonVars.focus.boxShadowInner]: base.blackPepper400,
+        [buttonVars.focus.boxShadowOuter]: base.frenchVanilla100,
+        [systemIconStencil.vars.color]: base.blackPepper400,
+      },
+      '&:hover, &.hover': {
+        [buttonVars.hover.background]: base.soap300,
+        [buttonVars.hover.label]: base.blackPepper500,
+        [systemIconStencil.vars.color]: base.blackPepper500,
+      },
+      '&:active, &.active': {
+        [buttonVars.active.background]: base.soap400,
+        [buttonVars.active.label]: base.blackPepper500,
+        [systemIconStencil.vars.color]: base.blackPepper500,
+      },
+      '&:disabled, &.disabled': {
+        [buttonVars.disabled.background]: base.frenchVanilla100,
+        [buttonVars.disabled.label]: base.blackPepper400,
+        [systemIconStencil.vars.color]: base.blackPepper400,
+      },
     }),
   },
 });

package/button/lib/SecondaryButton.tsx

@@ -6,6 +6,7 @@ import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {createStyles, createModifiers} from '@workday/canvas-kit-styling';
 import {base, brand, system} from '@workday/canvas-tokens-web';
 import {Button, ButtonProps} from './Button';
+import {systemIconStencil} from '../../icon';
 
 /**
  * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
@@ -25,50 +26,38 @@ const secondaryStyles = createStyles({
   [buttonVars.default.border]: base.blackPepper400,
   [buttonVars.default.borderRadius]: system.shape.round,
   [buttonVars.default.label]: base.blackPepper400,
-  [buttonVars.default.icon]: base.blackPepper400,
-  [buttonVars.default.border]: base.blackPepper400,
-  [buttonVars.default.borderRadius]: system.shape.round,
-  [buttonVars.default.label]: base.blackPepper400,
-  [buttonVars.default.icon]: base.blackPepper400,
-  // Hover Styles
-  [buttonVars.hover.background]: base.blackPepper400,
-  [buttonVars.hover.border]: base.blackPepper400,
-  [buttonVars.hover.label]: brand.primary.accent,
-  [buttonVars.hover.icon]: brand.primary.accent,
-  [buttonVars.hover.background]: base.blackPepper400,
-  [buttonVars.hover.border]: base.blackPepper400,
-  [buttonVars.hover.label]: brand.primary.accent,
-  [buttonVars.hover.icon]: brand.primary.accent,
+  [systemIconStencil.vars.color]: base.blackPepper400,
   // Focus Styles
-  [buttonVars.focus.background]: 'transparent',
-  [buttonVars.focus.border]: base.blackPepper400,
-  [buttonVars.focus.label]: base.blackPepper400,
-  [buttonVars.focus.icon]: base.blackPepper400,
-  [buttonVars.focus.boxShadowInner]: base.frenchVanilla100,
-  [buttonVars.focus.boxShadowOuter]: brand.common.focusOutline,
-  [buttonVars.focus.border]: base.blackPepper400,
-  [buttonVars.focus.label]: base.blackPepper400,
-  [buttonVars.focus.icon]: base.blackPepper400,
-  [buttonVars.focus.boxShadowInner]: base.frenchVanilla100,
-  [buttonVars.focus.boxShadowOuter]: brand.common.focusOutline,
+  '&:focus-visible, &.focus': {
+    [buttonVars.focus.background]: 'transparent',
+    [buttonVars.focus.border]: base.blackPepper400,
+    [buttonVars.focus.label]: base.blackPepper400,
+    [buttonVars.focus.boxShadowInner]: base.frenchVanilla100,
+    [buttonVars.focus.boxShadowOuter]: brand.common.focusOutline,
+    [systemIconStencil.vars.color]: base.blackPepper400,
+  },
+  // Hover Styles
+  '&:hover, &.hover': {
+    [buttonVars.hover.background]: base.blackPepper400,
+    [buttonVars.hover.border]: base.blackPepper400,
+    [buttonVars.hover.label]: brand.primary.accent,
+    [systemIconStencil.vars.color]: brand.primary.accent,
+  },
   // Active Styles
-  [buttonVars.active.background]: base.blackPepper500,
-  [buttonVars.active.border]: base.blackPepper500,
-  [buttonVars.active.label]: brand.primary.accent,
-  [buttonVars.active.icon]: brand.primary.accent,
-  [buttonVars.active.background]: base.blackPepper500,
-  [buttonVars.active.border]: base.blackPepper500,
-  [buttonVars.active.label]: brand.primary.accent,
-  [buttonVars.active.icon]: brand.primary.accent,
+  '&:active, &.active': {
+    [buttonVars.active.background]: base.blackPepper500,
+    [buttonVars.active.border]: base.blackPepper500,
+    [buttonVars.active.label]: brand.primary.accent,
+    [systemIconStencil.vars.color]: brand.primary.accent,
+  },
   // Disabled Styles
-  [buttonVars.disabled.background]: 'transparent',
-  [buttonVars.disabled.border]: base.blackPepper400,
-  [buttonVars.disabled.label]: base.blackPepper400,
-  [buttonVars.disabled.border]: base.blackPepper400,
-  [buttonVars.disabled.label]: base.blackPepper400,
-  [buttonVars.disabled.opacity]: '0.4',
-  [buttonVars.disabled.icon]: base.blackPepper400,
-  [buttonVars.disabled.icon]: base.blackPepper400,
+  '&:disabled, &.disabled': {
+    [buttonVars.disabled.background]: 'transparent',
+    [buttonVars.disabled.border]: base.blackPepper400,
+    [buttonVars.disabled.label]: base.blackPepper400,
+    [buttonVars.disabled.opacity]: '0.4',
+    [systemIconStencil.vars.color]: base.blackPepper400,
+  },
 });
 
 export const secondaryButtonModifiers = createModifiers({
@@ -78,43 +67,37 @@ export const secondaryButtonModifiers = createModifiers({
       [buttonVars.default.background]: 'transparent',
       [buttonVars.default.border]: base.frenchVanilla100,
       [buttonVars.default.label]: base.frenchVanilla100,
-      [buttonVars.default.icon]: base.frenchVanilla100,
-      [buttonVars.default.border]: base.frenchVanilla100,
-      [buttonVars.default.label]: base.frenchVanilla100,
-      [buttonVars.default.icon]: base.frenchVanilla100,
-      // Hover Styles
-      [buttonVars.hover.background]: base.soap300,
-      [buttonVars.hover.border]: base.soap300,
-      [buttonVars.hover.label]: base.blackPepper500,
-      [buttonVars.hover.icon]: base.blackPepper500,
-      [buttonVars.hover.background]: base.soap300,
-      [buttonVars.hover.border]: base.soap300,
-      [buttonVars.hover.label]: base.blackPepper500,
-      [buttonVars.hover.icon]: base.blackPepper500,
+      [systemIconStencil.vars.color]: base.frenchVanilla100,
       // Focus Styles
-      [buttonVars.focus.background]: base.frenchVanilla100,
-      [buttonVars.focus.border]: base.frenchVanilla100,
-      [buttonVars.focus.label]: base.blackPepper400,
-      [buttonVars.focus.icon]: base.blackPepper400,
-      [buttonVars.focus.boxShadowInner]: base.blackPepper400,
-      [buttonVars.focus.boxShadowOuter]: base.frenchVanilla100,
+      '&:focus-visible, &.focus': {
+        [buttonVars.focus.background]: base.frenchVanilla100,
+        [buttonVars.focus.border]: base.frenchVanilla100,
+        [buttonVars.focus.label]: base.blackPepper400,
+        [buttonVars.focus.boxShadowInner]: base.blackPepper400,
+        [buttonVars.focus.boxShadowOuter]: base.frenchVanilla100,
+        [systemIconStencil.vars.color]: base.blackPepper400,
+      },
+      // Hover Styles
+      '&:hover, &.hover': {
+        [buttonVars.hover.background]: base.soap300,
+        [buttonVars.hover.border]: base.soap300,
+        [buttonVars.hover.label]: base.blackPepper500,
+        [systemIconStencil.vars.color]: base.blackPepper500,
+      },
       // Active Styles
-      [buttonVars.active.background]: base.soap400,
-      [buttonVars.active.border]: base.soap400,
-      [buttonVars.active.label]: base.blackPepper500,
-      [buttonVars.active.icon]: base.blackPepper500,
-      [buttonVars.active.background]: base.soap400,
-      [buttonVars.active.border]: base.soap400,
-      [buttonVars.active.label]: base.blackPepper500,
-      [buttonVars.active.icon]: base.blackPepper500,
+      '&:active, &.active': {
+        [buttonVars.active.background]: base.soap400,
+        [buttonVars.active.border]: base.soap400,
+        [buttonVars.active.label]: base.blackPepper500,
+        [systemIconStencil.vars.color]: base.blackPepper500,
+      },
       // Disabled Styles
-      [buttonVars.disabled.background]: 'transparent',
-      [buttonVars.disabled.border]: base.frenchVanilla100,
-      [buttonVars.disabled.label]: base.frenchVanilla100,
-      [buttonVars.disabled.icon]: base.frenchVanilla100,
-      [buttonVars.disabled.border]: base.frenchVanilla100,
-      [buttonVars.disabled.label]: base.frenchVanilla100,
-      [buttonVars.disabled.icon]: base.frenchVanilla100,
+      '&:disabled, &.disabled': {
+        [buttonVars.disabled.background]: 'transparent',
+        [buttonVars.disabled.border]: base.frenchVanilla100,
+        [buttonVars.disabled.label]: base.frenchVanilla100,
+        [systemIconStencil.vars.color]: base.frenchVanilla100,
+      },
     }),
   },
 });

package/button/lib/TertiaryButton.tsx

@@ -7,6 +7,7 @@ import {mergeStyles} from '@workday/canvas-kit-react/layout';
 import {system, brand, base} from '@workday/canvas-tokens-web';
 import {borderRadius, space} from '@workday/canvas-kit-react/tokens';
 import {Button, ButtonProps} from './Button';
+import {systemIconStencil} from '../../icon';
 
 /**
  * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
@@ -26,37 +27,18 @@ const tertiaryStyles = createStyles({
   minWidth: 'auto',
   textDecoration: 'underline',
   border: 0,
-  // Default Styles
   [buttonVars.default.background]: 'transparent',
   [buttonVars.default.border]: 'transparent',
   [buttonVars.default.borderRadius]: system.shape.x1,
   [buttonVars.default.label]: brand.primary.base,
-  [buttonVars.default.icon]: base.blackPepper400,
-  // Hover Styles
-  [buttonVars.hover.background]: base.soap300,
-  [buttonVars.hover.border]: 'transparent',
-  [buttonVars.hover.label]: brand.primary.dark,
-  [buttonVars.hover.icon]: base.blackPepper400,
-  // Focus Styles
-  [buttonVars.focus.background]: 'transparent',
-  [buttonVars.focus.border]: 'transparent',
-  [buttonVars.focus.label]: brand.primary.base,
-  [buttonVars.focus.icon]: base.blackPepper400,
-  [buttonVars.focus.boxShadowInner]: brand.common.focusOutline,
-  [buttonVars.focus.boxShadowOuter]: brand.common.focusOutline,
-  // Active Styles
-  [buttonVars.active.background]: base.soap400,
-  [buttonVars.active.border]: 'transparent',
-  [buttonVars.active.label]: brand.primary.darkest,
-  [buttonVars.active.icon]: base.blackPepper500,
-  // Disabled Styles
-  [buttonVars.disabled.background]: 'transparent',
-  [buttonVars.disabled.border]: 'transparent',
-  [buttonVars.disabled.label]: brand.primary.base,
-  [buttonVars.disabled.icon]: base.blackPepper400,
-  [buttonVars.disabled.opacity]: '0.4',
-
+  [systemIconStencil.vars.color]: base.blackPepper400,
   '&:focus-visible, &.focus': {
+    [buttonVars.focus.background]: 'transparent',
+    [buttonVars.focus.border]: 'transparent',
+    [buttonVars.focus.label]: brand.primary.base,
+    [buttonVars.focus.boxShadowInner]: brand.common.focusOutline,
+    [buttonVars.focus.boxShadowOuter]: brand.common.focusOutline,
+    [systemIconStencil.vars.color]: base.blackPepper400,
     ...focusRing({
       width: 2,
       separation: 0,
@@ -64,47 +46,55 @@ const tertiaryStyles = createStyles({
       outerColor: brand.common.focusOutline,
     }),
   },
+  '&:hover, &.hover': {
+    [buttonVars.hover.background]: base.soap300,
+    [buttonVars.hover.border]: 'transparent',
+    [buttonVars.hover.label]: brand.primary.dark,
+    [systemIconStencil.vars.color]: base.blackPepper400,
+  },
+  '&:active, &.active': {
+    [buttonVars.active.background]: base.soap400,
+    [buttonVars.active.border]: 'transparent',
+    [buttonVars.active.label]: brand.primary.darkest,
+    [systemIconStencil.vars.color]: base.blackPepper500,
+  },
+  '&:disabled, &.disabled': {
+    [buttonVars.disabled.background]: 'transparent',
+    [buttonVars.disabled.border]: 'transparent',
+    [buttonVars.disabled.label]: brand.primary.base,
+    [buttonVars.disabled.opacity]: '0.4',
+  },
 });
 
 export const tertiaryButtonModifiers = createModifiers({
   isThemeable: {
     true: createStyles({
-      [buttonVars.default.icon]: brand.primary.base,
-      [buttonVars.hover.icon]: brand.primary.dark,
-      [buttonVars.focus.icon]: brand.primary.base,
-      [buttonVars.active.icon]: brand.primary.darkest,
-      [buttonVars.disabled.icon]: brand.primary.base,
+      [systemIconStencil.vars.color]: brand.primary.base,
+      '&:focus-visible, &.focus': {
+        [systemIconStencil.vars.color]: brand.primary.base,
+      },
+      '&:hover, &.hover': {
+        [systemIconStencil.vars.color]: brand.primary.dark,
+      },
+      '&:active, &.active': {
+        [systemIconStencil.vars.color]: brand.primary.darkest,
+      },
+      '&:disabled, &.disabled': {
+        [systemIconStencil.vars.color]: brand.primary.base,
+      },
     }),
   },
   variant: {
     inverse: createStyles({
-      // Default Styles
       [buttonVars.default.background]: 'transparent',
       [buttonVars.default.border]: 'transparent',
       [buttonVars.default.label]: base.frenchVanilla100,
-      [buttonVars.default.icon]: base.frenchVanilla100,
-      // Hover Styles
-      [buttonVars.hover.background]: base.frenchVanilla100,
-      [buttonVars.hover.border]: 'transparent',
-      [buttonVars.hover.label]: base.blackPepper400,
-      [buttonVars.hover.icon]: base.blackPepper400,
-      // Focus Styles
-      [buttonVars.focus.background]: base.frenchVanilla100,
-      [buttonVars.focus.border]: 'transparent',
-      [buttonVars.focus.label]: base.blackPepper400,
-      [buttonVars.focus.icon]: base.blackPepper400,
-      // Active Styles
-      [buttonVars.active.background]: base.soap200,
-      [buttonVars.active.border]: 'transparent',
-      [buttonVars.active.label]: base.blackPepper400,
-      [buttonVars.active.icon]: base.blackPepper400,
-      // Disabled Styles
-      [buttonVars.disabled.background]: 'transparent',
-      [buttonVars.disabled.border]: base.frenchVanilla100,
-      [buttonVars.disabled.label]: base.frenchVanilla100,
-      [buttonVars.disabled.icon]: base.frenchVanilla100,
-
+      [systemIconStencil.vars.color]: base.frenchVanilla100,
       '&:focus-visible, &.focus': {
+        [buttonVars.focus.background]: base.frenchVanilla100,
+        [buttonVars.focus.border]: 'transparent',
+        [buttonVars.focus.label]: base.blackPepper400,
+        [systemIconStencil.vars.color]: base.blackPepper400,
         ...focusRing({
           inset: 'inner',
           width: 2,
@@ -113,6 +103,25 @@ export const tertiaryButtonModifiers = createModifiers({
           outerColor: base.frenchVanilla100,
         }),
       },
+      '&:hover, &.hover': {
+        [buttonVars.hover.background]: base.frenchVanilla100,
+        [buttonVars.hover.border]: 'transparent',
+        [buttonVars.hover.label]: base.blackPepper400,
+        [systemIconStencil.vars.color]: base.blackPepper400,
+      },
+      '&:active, &.active': {
+        [buttonVars.active.background]: base.soap200,
+        [buttonVars.active.border]: 'transparent',
+        [buttonVars.active.label]: base.blackPepper400,
+        [systemIconStencil.vars.color]: base.blackPepper400,
+      },
+      '&:disabled, &.disabled': {
+        // Disabled Styles
+        [buttonVars.disabled.background]: 'transparent',
+        [buttonVars.disabled.border]: base.frenchVanilla100,
+        [buttonVars.disabled.label]: base.frenchVanilla100,
+        [systemIconStencil.vars.color]: base.frenchVanilla100,
+      },
     }),
   },
   iconPosition: {

package/card/index.ts

@@ -1 +1,3 @@
-export {Card} from './lib/Card';
+export {Card, cardStencil} from './lib/Card';
+export {cardHeadingStencil} from './lib/CardHeading';
+export {cardBodyStencil} from './lib/CardBody';