@workday/canvas-kit-react 10.0.0-alpha.549-next.0 → 10.0.0-alpha.551-next.0

package/button/lib/BaseButton.tsx

@@ -7,7 +7,6 @@ import {createComponent, GrowthBehavior, focusRing} from '@workday/canvas-kit-re
 import {createStyles, createVars, cssVar, createModifiers} from '@workday/canvas-kit-styling';
 import {SystemIconProps} from '@workday/canvas-kit-react/icon';
 import {Box} from '@workday/canvas-kit-react/layout';
-import {space} from '@workday/canvas-kit-react/tokens';
 import {base, brand, system} from '@workday/canvas-tokens-web';
 import {ButtonColors, ButtonSizes, IconPositions} from './types';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
@@ -92,10 +91,10 @@ const baseButtonStyles = createStyles({
   letterSpacing: '0.015rem',
   fontWeight: 'bold',
   backgroundColor: cssVar(buttonVars.default.background, 'transparent'),
-  color: cssVar(buttonVars.default.label, cssVar(base.blackPepper400)),
+  color: cssVar(buttonVars.default.label, cssVar(base.blackPepper400, '#333333')),
   borderWidth: '1px',
   borderStyle: 'solid',
-  gap: cssVar(system.space.x2, space.xxs),
+  gap: cssVar(system.space.x2, '0.5rem'),
   borderColor: cssVar(buttonVars.default.border, 'transparent'),
   cursor: 'pointer',
   display: 'inline-flex',
@@ -107,7 +106,7 @@ const baseButtonStyles = createStyles({
   whiteSpace: 'nowrap',
   WebkitFontSmoothing: 'antialiased',
   MozOsxFontSmoothing: 'grayscale',
-  borderRadius: cssVar(buttonVars.default.borderRadius, system.shape.circle),
+  borderRadius: cssVar(buttonVars.default.borderRadius, cssVar(system.shape.circle, '999px')),
   position: 'relative',
   verticalAlign: 'middle',
   overflow: 'hidden',
@@ -120,46 +119,49 @@ const baseButtonStyles = createStyles({
   },
   '& span .wd-icon-fill': {
     transitionDuration: '40ms',
-    fill: cssVar(buttonVars.default.icon, cssVar(base.blackPepper400)),
+    fill: cssVar(buttonVars.default.icon, cssVar(base.blackPepper400, '#333333')),
   },
   '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-    fill: cssVar(buttonVars.default.icon, cssVar(base.blackPepper400)),
+    fill: cssVar(buttonVars.default.icon, cssVar(base.blackPepper400, '#333333')),
   },
   '&:focus-visible, &.focus': {
     backgroundColor: cssVar(buttonVars.focus.background, 'transparent'),
     borderColor: cssVar(buttonVars.focus.border, 'transparent'),
-    color: cssVar(buttonVars.focus.label, cssVar(base.blackPepper400)),
+    color: cssVar(buttonVars.focus.label, cssVar(base.blackPepper400, '#333333')),
     '& span .wd-icon-fill': {
-      fill: cssVar(buttonVars.focus.icon, cssVar(base.blackPepper400)),
+      fill: cssVar(buttonVars.focus.icon, cssVar(base.blackPepper400, '#333333')),
     },
     '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-      fill: cssVar(buttonVars.focus.icon, cssVar(base.blackPepper400)),
+      fill: cssVar(buttonVars.focus.icon, cssVar(base.blackPepper400, '#333333')),
     },
     ...focusRing({
       width: 2,
       separation: 2,
-      innerColor: cssVar(buttonVars.focus.boxShadowInner, cssVar(base.frenchVanilla100)),
-      outerColor: cssVar(buttonVars.focus.boxShadowOuter, cssVar(brand.primary.base)),
+      innerColor: cssVar(buttonVars.focus.boxShadowInner, cssVar(base.frenchVanilla100, '#fff')),
+      outerColor: cssVar(
+        buttonVars.focus.boxShadowOuter,
+        cssVar(brand.primary.base, 'rgba(0,92,184,1)')
+      ),
     }),
   },
   '&:hover, &.hover': {
-    backgroundColor: cssVar(buttonVars.hover.background, cssVar(base.blackPepper500)),
+    backgroundColor: cssVar(buttonVars.hover.background, cssVar(base.blackPepper500, '#1e1e1e')),
     borderColor: cssVar(buttonVars.hover.border, 'transparent'),
-    color: cssVar(buttonVars.hover.label, cssVar(base.blackPepper500)),
+    color: cssVar(buttonVars.hover.label, cssVar(base.blackPepper500, '#1e1e1e')),
     '& span .wd-icon-fill': {
-      fill: cssVar(buttonVars.hover.icon, cssVar(base.blackPepper500)),
+      fill: cssVar(buttonVars.hover.icon, cssVar(base.blackPepper500, '#1e1e1e')),
     },
     '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-      fill: cssVar(buttonVars.hover.icon, cssVar(base.blackPepper500)),
+      fill: cssVar(buttonVars.hover.icon, cssVar(base.blackPepper500, '#1e1e1e')),
     },
   },
   '&:hover:active': {transitionDuration: '40ms'},
   '&:active, &.active': {
     backgroundColor: cssVar(buttonVars.active.background, 'transparent'),
     borderColor: cssVar(buttonVars.active.border, 'transparent'),
-    color: cssVar(buttonVars.active.label, cssVar(base.blackPepper400)),
+    color: cssVar(buttonVars.active.label, cssVar(base.blackPepper400, '#333333')),
     '& span .wd-icon-fill': {
-      fill: cssVar(buttonVars.active.icon, cssVar(base.blackPepper400)),
+      fill: cssVar(buttonVars.active.icon, cssVar(base.blackPepper400, '#333333')),
     },
     '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
       fill: cssVar(buttonVars.active.icon),
@@ -168,12 +170,12 @@ const baseButtonStyles = createStyles({
   '&:disabled': {
     backgroundColor: cssVar(buttonVars.disabled.background, 'transparent'),
     borderColor: cssVar(buttonVars.disabled.border, 'transparent'),
-    color: cssVar(buttonVars.disabled.label, cssVar(base.blackPepper400)),
+    color: cssVar(buttonVars.disabled.label, cssVar(base.blackPepper400, '#333333')),
     '& span .wd-icon-fill': {
-      fill: cssVar(buttonVars.disabled.icon, cssVar(base.blackPepper400)),
+      fill: cssVar(buttonVars.disabled.icon, cssVar(base.blackPepper400, '#333333')),
     },
     '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-      fill: cssVar(buttonVars.disabled.icon, cssVar(base.blackPepper400)),
+      fill: cssVar(buttonVars.disabled.icon, cssVar(base.blackPepper400, '#333333')),
     },
   },
 });
@@ -187,77 +189,77 @@ const baseButtonStyles = createStyles({
 export const buttonModifiers = createModifiers({
   size: {
     large: createStyles({
-      fontSize: cssVar(system.space.x4),
-      lineHeight: cssVar(system.space.x6),
+      fontSize: cssVar(system.space.x4, '1rem'),
+      lineHeight: cssVar(system.space.x6, '1.5rem'),
       letterSpacing: '0.01rem',
       height: '48px',
-      paddingInline: cssVar(system.space.x8),
+      paddingInline: cssVar(system.space.x8, '2rem'),
       minWidth: '112px',
     }),
     medium: createStyles({
       fontSize: '0.875rem',
       letterSpacing: '0.015rem',
       minWidth: '96px',
-      paddingInline: cssVar(system.space.x6),
-      height: cssVar(system.space.x10),
+      paddingInline: cssVar(system.space.x6, '1.5rem'),
+      height: cssVar(system.space.x10, '2.5rem'),
     }),
     small: createStyles({
       fontSize: '0.875rem',
       letterSpacing: '0.015rem',
-      height: cssVar(system.space.x8),
-      minWidth: cssVar(system.space.x20),
-      paddingInline: cssVar(system.space.x4),
-      gap: cssVar(system.space.x1),
+      height: cssVar(system.space.x8, '2rem'),
+      minWidth: cssVar(system.space.x20, '5rem'),
+      paddingInline: cssVar(system.space.x4, '1rem'),
+      gap: cssVar(system.space.x1, '0.25rem'),
     }),
     extraSmall: createStyles({
       fontSize: '0.75rem',
-      lineHeight: cssVar(system.space.x4),
+      lineHeight: cssVar(system.space.x4, '1rem'),
       letterSpacing: '0.02rem',
-      height: cssVar(system.space.x6),
+      height: cssVar(system.space.x6, '1.5rem'),
       minWidth: 'auto',
-      paddingInline: cssVar(system.space.x3),
-      gap: cssVar(system.space.x1),
+      paddingInline: cssVar(system.space.x3, '0.75rem'),
+      gap: cssVar(system.space.x1, '0.25rem'),
     }),
   },
   iconPosition: {
     largeOnly: createStyles({
       padding: '0',
-      minWidth: cssVar(system.space.x12),
+      minWidth: cssVar(system.space.x12, '3rem'),
     }),
     largeStart: createStyles({
-      paddingInlineStart: cssVar(system.space.x6),
-      paddingInlineEnd: cssVar(system.space.x8),
+      paddingInlineStart: cssVar(system.space.x6, '1.5rem'),
+      paddingInlineEnd: cssVar(system.space.x8, '2rem'),
     }),
     largeEnd: createStyles({
-      paddingInlineStart: cssVar(system.space.x8),
-      paddingInlineEnd: cssVar(system.space.x6),
+      paddingInlineStart: cssVar(system.space.x8, '2rem'),
+      paddingInlineEnd: cssVar(system.space.x6, '1.5rem'),
     }),
-    mediumOnly: createStyles({padding: '0', minWidth: cssVar(system.space.x10, space.xl)}),
+    mediumOnly: createStyles({padding: '0', minWidth: cssVar(system.space.x10, '2.5rem')}),
     mediumStart: createStyles({
-      paddingInlineStart: cssVar(system.space.x5),
-      paddingInlineEnd: cssVar(system.space.x6),
+      paddingInlineStart: cssVar(system.space.x5, '1.25rem'),
+      paddingInlineEnd: cssVar(system.space.x6, '1.5rem'),
     }),
     mediumEnd: createStyles({
-      paddingInlineStart: cssVar(system.space.x6),
-      paddingInlineEnd: cssVar(system.space.x5),
+      paddingInlineStart: cssVar(system.space.x6, '1.5rem'),
+      paddingInlineEnd: cssVar(system.space.x5, '1.25rem'),
     }),
-    smallOnly: createStyles({padding: '0', minWidth: cssVar(system.space.x8, space.l)}),
+    smallOnly: createStyles({padding: '0', minWidth: cssVar(system.space.x8, '2rem')}),
     smallStart: createStyles({
-      paddingInlineStart: cssVar(system.space.x3),
-      paddingInlineEnd: cssVar(system.space.x4),
+      paddingInlineStart: cssVar(system.space.x3, '0.75rem'),
+      paddingInlineEnd: cssVar(system.space.x4, '1rem'),
     }),
     smallEnd: createStyles({
-      paddingInlineStart: cssVar(system.space.x4),
-      paddingInlineEnd: cssVar(system.space.x3),
+      paddingInlineStart: cssVar(system.space.x4, '1rem'),
+      paddingInlineEnd: cssVar(system.space.x3, '0.75rem'),
     }),
-    extraSmallOnly: createStyles({padding: '0', minWidth: cssVar(system.space.x6, space.m)}),
+    extraSmallOnly: createStyles({padding: '0', minWidth: cssVar(system.space.x6, '1.5rem')}),
     extraSmallStart: createStyles({
-      paddingInlineStart: cssVar(system.space.x2),
-      paddingInlineEnd: cssVar(system.space.x3),
+      paddingInlineStart: cssVar(system.space.x2, '0.5rem'),
+      paddingInlineEnd: cssVar(system.space.x3, '0.75rem'),
     }),
     extraSmallEnd: createStyles({
-      paddingInlineStart: cssVar(system.space.x3),
-      paddingInlineEnd: cssVar(system.space.x2),
+      paddingInlineStart: cssVar(system.space.x3, '0.75rem'),
+      paddingInlineEnd: cssVar(system.space.x2, '0.5rem'),
     }),
   },
 });

package/button/lib/DeleteButton.tsx

@@ -14,30 +14,30 @@ import {Button, ButtonProps} from './Button';
 export interface DeleteButtonProps extends ButtonProps {}
 
 const deleteStyles = createStyles({
-  [buttonVars.default.background]: cssVar(brand.error.base),
+  [buttonVars.default.background]: cssVar(brand.error.base, '#de2e21'),
   [buttonVars.default.border]: 'transparent',
-  [buttonVars.default.borderRadius]: cssVar(system.shape.circle),
-  [buttonVars.default.label]: cssVar(brand.error.accent),
+  [buttonVars.default.borderRadius]: cssVar(system.shape.circle, '999px'),
+  [buttonVars.default.label]: cssVar(brand.error.accent, '#ffffff'),
   '&:hover, &.hover': {
-    [buttonVars.hover.background]: cssVar(brand.error.dark),
+    [buttonVars.hover.background]: cssVar(brand.error.dark, '#a31b12'),
     [buttonVars.hover.border]: 'transparent',
-    [buttonVars.hover.label]: cssVar(brand.error.accent),
+    [buttonVars.hover.label]: cssVar(brand.error.accent, '#ffffff'),
   },
   '&:focus-visible, &.focus': {
-    [buttonVars.focus.background]: cssVar(brand.error.base),
+    [buttonVars.focus.background]: cssVar(brand.error.base, '#de2e21'),
     [buttonVars.focus.border]: 'transparent',
-    [buttonVars.focus.label]: cssVar(brand.error.accent),
-    [buttonVars.focus.boxShadowInner]: cssVar(base.frenchVanilla100),
-    [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline),
+    [buttonVars.focus.label]: cssVar(brand.error.accent, '#ffffff'),
+    [buttonVars.focus.boxShadowInner]: cssVar(base.frenchVanilla100, '#ffffff'),
+    [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline, '#0875e1'),
   },
   '&:active, &.active': {
-    [buttonVars.active.background]: cssVar(brand.error.darkest),
+    [buttonVars.active.background]: cssVar(brand.error.darkest, 'rgba(128,22,14,1)'),
     [buttonVars.active.border]: 'transparent',
-    [buttonVars.active.label]: cssVar(brand.error.accent),
+    [buttonVars.active.label]: cssVar(brand.error.accent, '#ffffff'),
   },
   '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
-    [buttonVars.disabled.background]: cssVar(brand.error.light),
-    [buttonVars.disabled.label]: cssVar(brand.error.accent),
+    [buttonVars.disabled.background]: cssVar(brand.error.light, '#fcc9c5'),
+    [buttonVars.disabled.label]: cssVar(brand.error.accent, '#ffffff'),
     opacity: 1,
   },
 });

package/button/lib/PrimaryButton.tsx

@@ -20,62 +20,62 @@ export interface PrimaryButtonProps extends ButtonProps {
 
 const primaryStyles = createStyles({
   // Default Styles
-  [buttonVars.default.background]: cssVar(brand.primary.base, cssVar(base.blueberry400)),
+  [buttonVars.default.background]: cssVar(brand.primary.base, cssVar(base.blueberry400, '#0875e1')),
   [buttonVars.default.border]: 'transparent',
-  [buttonVars.default.borderRadius]: cssVar(system.shape.circle),
-  [buttonVars.default.label]: cssVar(brand.primary.accent),
-  [buttonVars.default.icon]: cssVar(brand.primary.accent),
+  [buttonVars.default.borderRadius]: cssVar(system.shape.circle, '999px'),
+  [buttonVars.default.label]: cssVar(brand.primary.accent, '#ffffff'),
+  [buttonVars.default.icon]: cssVar(brand.primary.accent, '#ffffff'),
   // Hover Styles
-  [buttonVars.hover.background]: cssVar(brand.primary.dark),
+  [buttonVars.hover.background]: cssVar(brand.primary.dark, 'rgba(0,92,184,1)'),
   [buttonVars.hover.border]: 'transparent',
-  [buttonVars.hover.label]: cssVar(brand.primary.accent),
-  [buttonVars.hover.icon]: cssVar(brand.primary.accent),
+  [buttonVars.hover.label]: cssVar(brand.primary.accent, '#ffffff'),
+  [buttonVars.hover.icon]: cssVar(brand.primary.accent, '#ffffff'),
   // Focus Styles
-  [buttonVars.focus.background]: cssVar(brand.primary.base),
+  [buttonVars.focus.background]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
   [buttonVars.focus.border]: 'transparent',
-  [buttonVars.focus.label]: cssVar(brand.primary.accent),
-  [buttonVars.focus.icon]: cssVar(brand.primary.accent),
-  [buttonVars.focus.boxShadowInner]: cssVar(base.frenchVanilla100),
-  [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline),
+  [buttonVars.focus.label]: cssVar(brand.primary.accent, '#ffffff'),
+  [buttonVars.focus.icon]: cssVar(brand.primary.accent, '#ffffff'),
+  [buttonVars.focus.boxShadowInner]: cssVar(base.frenchVanilla100, '#ffffff'),
+  [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline, 'rgba(8,117,226,1)'),
   // Active Styles
-  [buttonVars.active.background]: cssVar(brand.primary.darkest),
+  [buttonVars.active.background]: cssVar(brand.primary.darkest, 'rgba(0,66,133,1)'),
   [buttonVars.active.border]: 'transparent',
-  [buttonVars.active.label]: cssVar(brand.primary.accent),
-  [buttonVars.active.icon]: cssVar(brand.primary.accent),
+  [buttonVars.active.label]: cssVar(brand.primary.accent, '#ffffff'),
+  [buttonVars.active.icon]: cssVar(brand.primary.accent, '#ffffff'),
   // Disabled Styles
-  [buttonVars.disabled.background]: cssVar(brand.primary.base),
+  [buttonVars.disabled.background]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
   [buttonVars.disabled.border]: 'transparent',
-  [buttonVars.disabled.label]: cssVar(brand.primary.accent),
+  [buttonVars.disabled.label]: cssVar(brand.primary.accent, '#ffffff'),
   [buttonVars.disabled.opacity]: '0.4',
-  [buttonVars.disabled.icon]: cssVar(brand.primary.accent),
+  [buttonVars.disabled.icon]: cssVar(brand.primary.accent, '#ffffff'),
 });
 
 export const primaryButtonModifiers = createModifiers({
   variant: {
     inverse: createStyles({
       // Default Styles
-      [buttonVars.default.background]: cssVar(base.frenchVanilla100),
-      [buttonVars.default.borderRadius]: cssVar(system.shape.circle),
-      [buttonVars.default.label]: cssVar(base.blackPepper400),
-      [buttonVars.default.icon]: cssVar(base.blackPepper400),
+      [buttonVars.default.background]: cssVar(base.frenchVanilla100, '#ffffff'),
+      [buttonVars.default.borderRadius]: cssVar(system.shape.circle, '999px'),
+      [buttonVars.default.label]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
+      [buttonVars.default.icon]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
       // Hover Styles
-      [buttonVars.hover.background]: cssVar(base.soap300),
-      [buttonVars.hover.label]: cssVar(base.blackPepper500),
-      [buttonVars.hover.icon]: cssVar(base.blackPepper500),
+      [buttonVars.hover.background]: cssVar(base.soap300, 'rgba(232,235,237,1)'),
+      [buttonVars.hover.label]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
+      [buttonVars.hover.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
       // Focus Styles
-      [buttonVars.focus.background]: cssVar(base.frenchVanilla100),
-      [buttonVars.focus.label]: cssVar(base.blackPepper400),
-      [buttonVars.focus.icon]: cssVar(base.blackPepper400),
-      [buttonVars.focus.boxShadowInner]: cssVar(base.blackPepper400),
-      [buttonVars.focus.boxShadowOuter]: cssVar(base.frenchVanilla100),
+      [buttonVars.focus.background]: cssVar(base.frenchVanilla100, '#ffffff'),
+      [buttonVars.focus.label]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
+      [buttonVars.focus.icon]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
+      [buttonVars.focus.boxShadowInner]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
+      [buttonVars.focus.boxShadowOuter]: cssVar(base.frenchVanilla100, '#ffffff'),
       // Active Styles
-      [buttonVars.active.background]: cssVar(base.soap400),
-      [buttonVars.active.label]: cssVar(base.blackPepper500),
-      [buttonVars.active.icon]: cssVar(base.blackPepper500),
+      [buttonVars.active.background]: cssVar(base.soap400, 'rgba(224,227,230,1)'),
+      [buttonVars.active.label]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
+      [buttonVars.active.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
       // Disabled Styles
-      [buttonVars.disabled.background]: cssVar(base.frenchVanilla100),
-      [buttonVars.disabled.label]: cssVar(base.blackPepper400),
-      [buttonVars.disabled.icon]: cssVar(base.blackPepper400),
+      [buttonVars.disabled.background]: cssVar(base.frenchVanilla100, '#ffffff'),
+      [buttonVars.disabled.label]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
+      [buttonVars.disabled.icon]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
     }),
   },
 });

package/button/lib/SecondaryButton.tsx

@@ -21,33 +21,33 @@ export interface SecondaryButtonProps extends ButtonProps {
 const secondaryStyles = createStyles({
   // Default Styles
   [buttonVars.default.background]: 'transparent',
-  [buttonVars.default.border]: cssVar(base.blackPepper400),
-  [buttonVars.default.borderRadius]: cssVar(system.shape.circle),
-  [buttonVars.default.label]: cssVar(base.blackPepper400),
-  [buttonVars.default.icon]: cssVar(base.blackPepper400),
+  [buttonVars.default.border]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
+  [buttonVars.default.borderRadius]: cssVar(system.shape.circle, '999px'),
+  [buttonVars.default.label]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
+  [buttonVars.default.icon]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
   // Hover Styles
-  [buttonVars.hover.background]: cssVar(base.blackPepper400),
-  [buttonVars.hover.border]: cssVar(base.blackPepper400),
-  [buttonVars.hover.label]: cssVar(brand.primary.accent),
-  [buttonVars.hover.icon]: cssVar(brand.primary.accent),
+  [buttonVars.hover.background]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
+  [buttonVars.hover.border]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
+  [buttonVars.hover.label]: cssVar(brand.primary.accent, 'rgba(255,255,255,1)'),
+  [buttonVars.hover.icon]: cssVar(brand.primary.accent, 'rgba(255,255,255,1)'),
   // Focus Styles
   [buttonVars.focus.background]: 'transparent',
-  [buttonVars.focus.border]: cssVar(base.blackPepper400),
-  [buttonVars.focus.label]: cssVar(base.blackPepper400),
-  [buttonVars.focus.icon]: cssVar(base.blackPepper400),
-  [buttonVars.focus.boxShadowInner]: cssVar(base.frenchVanilla100),
-  [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline),
+  [buttonVars.focus.border]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
+  [buttonVars.focus.label]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
+  [buttonVars.focus.icon]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
+  [buttonVars.focus.boxShadowInner]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
+  [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline, 'rgba(8,117,226,1)'),
   // Active Styles
-  [buttonVars.active.background]: cssVar(base.blackPepper500),
-  [buttonVars.active.border]: cssVar(base.blackPepper500),
-  [buttonVars.active.label]: cssVar(brand.primary.accent),
-  [buttonVars.active.icon]: cssVar(brand.primary.accent),
+  [buttonVars.active.background]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
+  [buttonVars.active.border]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
+  [buttonVars.active.label]: cssVar(brand.primary.accent, 'rgba(255,255,255,1)'),
+  [buttonVars.active.icon]: cssVar(brand.primary.accent, 'rgba(255,255,255,1)'),
   // Disabled Styles
   [buttonVars.disabled.background]: 'transparent',
-  [buttonVars.disabled.border]: cssVar(base.blackPepper400),
-  [buttonVars.disabled.label]: cssVar(base.blackPepper400),
+  [buttonVars.disabled.border]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
+  [buttonVars.disabled.label]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
   [buttonVars.disabled.opacity]: '0.4',
-  [buttonVars.disabled.icon]: cssVar(base.blackPepper400),
+  [buttonVars.disabled.icon]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
 });
 
 export const secondaryButtonModifiers = createModifiers({
@@ -55,31 +55,31 @@ export const secondaryButtonModifiers = createModifiers({
     inverse: createStyles({
       // Default Styles
       [buttonVars.default.background]: 'transparent',
-      [buttonVars.default.border]: cssVar(base.frenchVanilla100),
-      [buttonVars.default.label]: cssVar(base.frenchVanilla100),
-      [buttonVars.default.icon]: cssVar(base.frenchVanilla100),
+      [buttonVars.default.border]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
+      [buttonVars.default.label]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
+      [buttonVars.default.icon]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
       // Hover Styles
-      [buttonVars.hover.background]: cssVar(base.soap300),
-      [buttonVars.hover.border]: cssVar(base.soap300),
-      [buttonVars.hover.label]: cssVar(base.blackPepper500),
-      [buttonVars.hover.icon]: cssVar(base.blackPepper500),
+      [buttonVars.hover.background]: cssVar(base.soap300, 'rgba(232,235,237,1)'),
+      [buttonVars.hover.border]: cssVar(base.soap300, 'rgba(232,235,237,1)'),
+      [buttonVars.hover.label]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
+      [buttonVars.hover.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
       // Focus Styles
-      [buttonVars.focus.background]: cssVar(base.frenchVanilla100),
-      [buttonVars.focus.border]: cssVar(base.frenchVanilla100),
-      [buttonVars.focus.label]: cssVar(base.blackPepper500),
-      [buttonVars.focus.icon]: cssVar(base.blackPepper500),
-      [buttonVars.focus.boxShadowInner]: cssVar(base.blackPepper500),
-      [buttonVars.focus.boxShadowOuter]: cssVar(base.frenchVanilla100),
+      [buttonVars.focus.background]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
+      [buttonVars.focus.border]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
+      [buttonVars.focus.label]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
+      [buttonVars.focus.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
+      [buttonVars.focus.boxShadowInner]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
+      [buttonVars.focus.boxShadowOuter]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
       // Active Styles
-      [buttonVars.active.background]: cssVar(base.soap400),
-      [buttonVars.active.border]: cssVar(base.soap400),
-      [buttonVars.active.label]: cssVar(base.blackPepper500),
-      [buttonVars.active.icon]: cssVar(base.blackPepper500),
+      [buttonVars.active.background]: cssVar(base.soap400, 'rgba(224,227,230,1)'),
+      [buttonVars.active.border]: cssVar(base.soap400, 'rgba(224,227,230,1)'),
+      [buttonVars.active.label]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
+      [buttonVars.active.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
       // Disabled Styles
       [buttonVars.disabled.background]: 'transparent',
-      [buttonVars.disabled.border]: cssVar(base.frenchVanilla100),
-      [buttonVars.disabled.label]: cssVar(base.frenchVanilla100),
-      [buttonVars.disabled.icon]: cssVar(base.frenchVanilla100),
+      [buttonVars.disabled.border]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
+      [buttonVars.disabled.label]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
+      [buttonVars.disabled.icon]: cssVar(base.frenchVanilla100, 'rgba(255,255,255,1)'),
     }),
   },
 });

package/button/lib/TertiaryButton.tsx

@@ -21,38 +21,38 @@ export interface TertiaryButtonProps extends ButtonProps {
 }
 
 const tertiaryStyles = createStyles({
-  paddingInline: cssVar(system.space.x2, space.xxs),
+  paddingInline: cssVar(system.space.x2, '0.5rem'),
   minWidth: 'auto',
   textDecoration: 'underline',
   border: 0,
   // Default Styles
   [buttonVars.default.background]: 'transparent',
   [buttonVars.default.border]: 'transparent',
-  [buttonVars.default.borderRadius]: cssVar(system.shape.medium),
-  [buttonVars.default.label]: cssVar(brand.primary.base),
-  [buttonVars.default.icon]: cssVar(base.blackPepper400),
+  [buttonVars.default.borderRadius]: cssVar(system.shape.medium, '0.25rem'),
+  [buttonVars.default.label]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
+  [buttonVars.default.icon]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
   // Hover Styles
-  [buttonVars.hover.background]: cssVar(base.soap200),
+  [buttonVars.hover.background]: cssVar(base.soap200, 'rgba(241, 242, 243, 1)'),
   [buttonVars.hover.border]: 'transparent',
-  [buttonVars.hover.label]: cssVar(brand.primary.dark),
-  [buttonVars.hover.icon]: cssVar(base.blackPepper500),
+  [buttonVars.hover.label]: cssVar(brand.primary.dark, 'rgba(0,92,184,1)'),
+  [buttonVars.hover.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
   // Focus Styles
   [buttonVars.focus.background]: 'transparent',
   [buttonVars.focus.border]: 'transparent',
-  [buttonVars.focus.label]: cssVar(brand.primary.base),
-  [buttonVars.focus.icon]: cssVar(base.blackPepper500),
-  [buttonVars.focus.boxShadowInner]: cssVar(brand.common.focusOutline),
-  [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline),
+  [buttonVars.focus.label]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
+  [buttonVars.focus.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
+  [buttonVars.focus.boxShadowInner]: cssVar(brand.common.focusOutline, 'rgba(8,117,226,1)'),
+  [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline, 'rgba(8,117,226,1)'),
   // Active Styles
-  [buttonVars.active.background]: cssVar(base.soap300),
+  [buttonVars.active.background]: cssVar(base.soap300, 'rgba(232,235,237,1)'),
   [buttonVars.active.border]: 'transparent',
-  [buttonVars.active.label]: cssVar(brand.primary.dark),
-  [buttonVars.active.icon]: cssVar(base.blackPepper500),
+  [buttonVars.active.label]: cssVar(brand.primary.dark, 'rgba(0,92,184,1)'),
+  [buttonVars.active.icon]: cssVar(base.blackPepper500, 'rgba(31,31,31,1)'),
   // Disabled Styles
   [buttonVars.disabled.background]: 'transparent',
-  [buttonVars.disabled.border]: cssVar(base.frenchVanilla100),
-  [buttonVars.disabled.label]: cssVar(brand.primary.base),
-  [buttonVars.disabled.icon]: cssVar(base.blackPepper400),
+  [buttonVars.disabled.border]: cssVar(base.frenchVanilla100, '#fff'),
+  [buttonVars.disabled.label]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
+  [buttonVars.disabled.icon]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
   [buttonVars.disabled.opacity]: '0.4',
 
   '&:focus-visible, &.focus': {
@@ -68,11 +68,11 @@ const tertiaryStyles = createStyles({
 export const tertiaryButtonModifiers = createModifiers({
   isThemeable: {
     true: createStyles({
-      [buttonVars.default.icon]: cssVar(brand.primary.base),
-      [buttonVars.hover.icon]: cssVar(brand.primary.dark),
-      [buttonVars.focus.icon]: cssVar(brand.primary.base),
-      [buttonVars.active.icon]: cssVar(brand.primary.dark),
-      [buttonVars.disabled.icon]: cssVar(brand.primary.base),
+      [buttonVars.default.icon]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
+      [buttonVars.hover.icon]: cssVar(brand.primary.dark, 'rgba(0,92,184,1)'),
+      [buttonVars.focus.icon]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
+      [buttonVars.active.icon]: cssVar(brand.primary.dark, 'rgba(0,92,184,1)'),
+      [buttonVars.disabled.icon]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
     }),
   },
   variant: {
@@ -80,28 +80,28 @@ export const tertiaryButtonModifiers = createModifiers({
       // Default Styles
       [buttonVars.default.background]: 'transparent',
       [buttonVars.default.border]: 'transparent',
-      [buttonVars.default.label]: cssVar(base.frenchVanilla100),
-      [buttonVars.default.icon]: cssVar(base.frenchVanilla100),
+      [buttonVars.default.label]: cssVar(base.frenchVanilla100, '#fff'),
+      [buttonVars.default.icon]: cssVar(base.frenchVanilla100, '#fff'),
       // Hover Styles
-      [buttonVars.hover.background]: cssVar(base.frenchVanilla100),
+      [buttonVars.hover.background]: cssVar(base.frenchVanilla100, '#fff'),
       [buttonVars.hover.border]: 'transparent',
-      [buttonVars.hover.label]: cssVar(base.blackPepper400),
-      [buttonVars.hover.icon]: cssVar(base.blackPepper400),
+      [buttonVars.hover.label]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
+      [buttonVars.hover.icon]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
       // Focus Styles
-      [buttonVars.focus.background]: cssVar(base.frenchVanilla100),
+      [buttonVars.focus.background]: cssVar(base.frenchVanilla100, '#fff'),
       [buttonVars.focus.border]: 'transparent',
-      [buttonVars.focus.label]: cssVar(base.blackPepper400),
-      [buttonVars.focus.icon]: cssVar(base.blackPepper400),
+      [buttonVars.focus.label]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
+      [buttonVars.focus.icon]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
       // Active Styles
-      [buttonVars.active.background]: cssVar(base.soap200),
+      [buttonVars.active.background]: cssVar(base.soap200, 'rgba(241, 242, 243, 1)'),
       [buttonVars.active.border]: 'transparent',
-      [buttonVars.active.label]: cssVar(base.blackPepper400),
-      [buttonVars.active.icon]: cssVar(base.blackPepper400),
+      [buttonVars.active.label]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
+      [buttonVars.active.icon]: cssVar(base.blackPepper400, 'rgba(51, 51, 51, 1)'),
       // Disabled Styles
       [buttonVars.disabled.background]: 'transparent',
-      [buttonVars.disabled.border]: cssVar(base.frenchVanilla100),
-      [buttonVars.disabled.label]: cssVar(base.frenchVanilla100),
-      [buttonVars.disabled.icon]: cssVar(base.frenchVanilla100),
+      [buttonVars.disabled.border]: cssVar(base.frenchVanilla100, '#fff'),
+      [buttonVars.disabled.label]: cssVar(base.frenchVanilla100, '#fff'),
+      [buttonVars.disabled.icon]: cssVar(base.frenchVanilla100, '#fff'),
 
       '&:focus-visible, &.focus': {
         ...focusRing({
@@ -118,7 +118,7 @@ export const tertiaryButtonModifiers = createModifiers({
     largeOnly: createStyles({
       borderRadius: borderRadius.circle,
       padding: '0',
-      minWidth: cssVar(system.space.x12),
+      minWidth: cssVar(system.space.x12, '3rem'),
     }),
     largeStart: createStyles({
       paddingInlineStart: space.xxs,

package/button/lib/ToolbarDropdownButton.tsx

@@ -45,7 +45,7 @@ const StyledToolbarDropdownButton = styled(BaseButton)<StyledType & ToolbarDropd
       width: 2,
       separation: 0,
       innerColor: 'transparent',
-      outerColor: cssVar(brand.common.focusOutline),
+      outerColor: cssVar(brand.common.focusOutline, '#0875e1'),
     }),
   },
 });

package/button/lib/ToolbarIconButton.tsx

@@ -34,7 +34,7 @@ const StyledToolbarIconButton = styled(BaseButton)<StyledType & ToolbarIconButto
       width: 2,
       separation: 0,
       innerColor: 'transparent',
-      outerColor: cssVar(brand.common.focusOutline),
+      outerColor: cssVar(brand.common.focusOutline, 'rgba(8,117,226,1)'),
     }),
   },
 });

package/combobox/lib/hooks/useComboboxLoader.ts

@@ -19,7 +19,7 @@ const useDebounce = () => {
   return (fn: (...args: any[]) => any, wait: number) => {
     clearTimeout(debounceTimer.current);
 
-    debounceTimer.current = (setTimeout(fn, wait) as any) as number; // We don't actually care what the real return type of setTimeout is. It is a number in the browser and something else in Node
+    debounceTimer.current = setTimeout(fn, wait) as any as number; // We don't actually care what the real return type of setTimeout is. It is a number in the browser and something else in Node
   };
 };
 

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,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"}
+{"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;AAG/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;AAqGF;;;;;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"}