@workday/canvas-kit-react 11.0.0-alpha.643-next.0 → 11.0.0-alpha.656-next.0

package/badge/lib/CountBadge.tsx

@@ -1,19 +1,16 @@
 import * as React from 'react';
-// eslint-disable-next-line @emotion/no-vanilla
-import {keyframes} from '@emotion/css';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {handleCsProp, CSProps, createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {handleCsProp, CSProps, createStencil, px2rem, keyframes} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
 
-const grow = keyframes`
-  from {
-    transform: scale(0.85);
-  }
-
-  to {
-    transform: scale(1.0);
-  }
-`;
+const grow = keyframes({
+  from: {
+    transform: 'scale(0.85)',
+  },
+  to: {
+    transform: 'scale(1.0)',
+  },
+});
 
 export interface CountBadgeProps extends CSProps {
   /**
@@ -46,7 +43,6 @@ const countBadgeStencil = createStencil({
     display: 'inline-flex',
     fontFamily: system.fontFamily.default,
     fontSize: system.fontSize.subtext.medium,
-    //@ts-ignore
     fontWeight: system.fontWeight.bold,
     height: px2rem(20),
     justifyContent: 'center',

package/button/lib/BaseButton.tsx

@@ -121,10 +121,10 @@ const baseButtonStyles = createStyles({
   letterSpacing: '0.015rem',
   fontWeight: 'bold',
   backgroundColor: cssVar(buttonVars.default.background, 'transparent'),
-  color: cssVar(buttonVars.default.label, cssVar(base.blackPepper400, '#333333')),
+  color: cssVar(buttonVars.default.label, base.blackPepper400),
   borderWidth: '1px',
   borderStyle: 'solid',
-  gap: cssVar(system.space.x2, '0.5rem'),
+  gap: system.space.x2,
   borderColor: cssVar(buttonVars.default.border, 'transparent'),
   cursor: 'pointer',
   display: 'inline-flex',
@@ -136,7 +136,7 @@ const baseButtonStyles = createStyles({
   whiteSpace: 'nowrap',
   WebkitFontSmoothing: 'antialiased',
   MozOsxFontSmoothing: 'grayscale',
-  borderRadius: cssVar(buttonVars.default.borderRadius, cssVar(system.shape.round, '62.5rem')),
+  borderRadius: cssVar(buttonVars.default.borderRadius, system.shape.round),
   position: 'relative',
   verticalAlign: 'middle',
   overflow: 'hidden',
@@ -149,63 +149,60 @@ const baseButtonStyles = createStyles({
   },
   '& span .wd-icon-fill': {
     transitionDuration: '40ms',
-    fill: cssVar(buttonVars.default.icon, cssVar(base.blackPepper400, '#333333')),
+    fill: cssVar(buttonVars.default.icon, base.blackPepper400),
   },
   '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-    fill: cssVar(buttonVars.default.icon, cssVar(base.blackPepper400, '#333333')),
+    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, cssVar(base.blackPepper400, '#333333')),
+    color: cssVar(buttonVars.focus.label, base.blackPepper400),
     '& span .wd-icon-fill': {
-      fill: cssVar(buttonVars.focus.icon, cssVar(base.blackPepper400, '#333333')),
+      fill: cssVar(buttonVars.focus.icon, base.blackPepper400),
     },
     '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-      fill: cssVar(buttonVars.focus.icon, cssVar(base.blackPepper400, '#333333')),
+      fill: cssVar(buttonVars.focus.icon, base.blackPepper400),
     },
     ...focusRing({
       width: 2,
       separation: 2,
-      innerColor: cssVar(buttonVars.focus.boxShadowInner, cssVar(base.frenchVanilla100, '#fff')),
-      outerColor: cssVar(
-        buttonVars.focus.boxShadowOuter,
-        cssVar(brand.primary.base, 'rgba(0,92,184,1)')
-      ),
+      innerColor: cssVar(buttonVars.focus.boxShadowInner, base.frenchVanilla100),
+      outerColor: cssVar(buttonVars.focus.boxShadowOuter, brand.primary.base),
     }),
   },
   '&:hover, &.hover': {
-    backgroundColor: cssVar(buttonVars.hover.background, cssVar(base.blackPepper500, '#1e1e1e')),
+    backgroundColor: cssVar(buttonVars.hover.background, base.blackPepper500),
     borderColor: cssVar(buttonVars.hover.border, 'transparent'),
-    color: cssVar(buttonVars.hover.label, cssVar(base.blackPepper500, '#1e1e1e')),
+    color: cssVar(buttonVars.hover.label, base.blackPepper500),
     '& span .wd-icon-fill': {
-      fill: cssVar(buttonVars.hover.icon, cssVar(base.blackPepper500, '#1e1e1e')),
+      fill: cssVar(buttonVars.hover.icon, base.blackPepper500),
     },
     '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-      fill: cssVar(buttonVars.hover.icon, cssVar(base.blackPepper500, '#1e1e1e')),
+      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, cssVar(base.blackPepper400, '#333333')),
+    color: cssVar(buttonVars.active.label, base.blackPepper400),
     '& span .wd-icon-fill': {
-      fill: cssVar(buttonVars.active.icon, cssVar(base.blackPepper400, '#333333')),
+      fill: cssVar(buttonVars.active.icon, base.blackPepper400),
     },
     '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-      fill: cssVar(buttonVars.active.icon),
+      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, cssVar(base.blackPepper400, '#333333')),
+    color: cssVar(buttonVars.disabled.label, base.blackPepper400),
     '& span .wd-icon-fill': {
-      fill: cssVar(buttonVars.disabled.icon, cssVar(base.blackPepper400, '#333333')),
+      fill: cssVar(buttonVars.disabled.icon, base.blackPepper400),
     },
     '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-      fill: cssVar(buttonVars.disabled.icon, cssVar(base.blackPepper400, '#333333')),
+      fill: cssVar(buttonVars.disabled.icon, base.blackPepper400),
     },
   },
 });
@@ -219,77 +216,77 @@ const baseButtonStyles = createStyles({
 export const buttonModifiers = createModifiers({
   size: {
     large: createStyles({
-      fontSize: cssVar(system.space.x4, '1rem'),
-      lineHeight: cssVar(system.space.x6, '1.5rem'),
+      fontSize: system.space.x4,
+      lineHeight: system.space.x6,
       letterSpacing: '0.01rem',
       height: '48px',
-      paddingInline: cssVar(system.space.x8, '2rem'),
+      paddingInline: system.space.x8,
       minWidth: '112px',
     }),
     medium: createStyles({
       fontSize: '0.875rem',
       letterSpacing: '0.015rem',
       minWidth: '96px',
-      paddingInline: cssVar(system.space.x6, '1.5rem'),
-      height: cssVar(system.space.x10, '2.5rem'),
+      paddingInline: system.space.x6,
+      height: system.space.x10,
     }),
     small: createStyles({
       fontSize: '0.875rem',
       letterSpacing: '0.015rem',
-      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'),
+      height: system.space.x8,
+      minWidth: system.space.x20,
+      paddingInline: system.space.x4,
+      gap: system.space.x1,
     }),
     extraSmall: createStyles({
       fontSize: '0.75rem',
-      lineHeight: cssVar(system.space.x4, '1rem'),
+      lineHeight: system.space.x4,
       letterSpacing: '0.02rem',
-      height: cssVar(system.space.x6, '1.5rem'),
+      height: system.space.x6,
       minWidth: 'auto',
-      paddingInline: cssVar(system.space.x3, '0.75rem'),
-      gap: cssVar(system.space.x1, '0.25rem'),
+      paddingInline: system.space.x3,
+      gap: system.space.x1,
     }),
   },
   iconPosition: {
     largeOnly: createStyles({
       padding: '0',
-      minWidth: `calc(${cssVar(system.space.x4, '1rem')} * 3)`,
+      minWidth: `calc(${system.space.x4} * 3)`,
     }),
     largeStart: createStyles({
-      paddingInlineStart: cssVar(system.space.x6, '1.5rem'),
-      paddingInlineEnd: cssVar(system.space.x8, '2rem'),
+      paddingInlineStart: system.space.x6,
+      paddingInlineEnd: system.space.x8,
     }),
     largeEnd: createStyles({
-      paddingInlineStart: cssVar(system.space.x8, '2rem'),
-      paddingInlineEnd: cssVar(system.space.x6, '1.5rem'),
+      paddingInlineStart: system.space.x8,
+      paddingInlineEnd: system.space.x6,
     }),
-    mediumOnly: createStyles({padding: '0', minWidth: cssVar(system.space.x10, '2.5rem')}),
+    mediumOnly: createStyles({padding: '0', minWidth: system.space.x10}),
     mediumStart: createStyles({
-      paddingInlineStart: `calc(${cssVar(system.space.x1, '0.25rem')} * 5)`,
-      paddingInlineEnd: cssVar(system.space.x6, '1.5rem'),
+      paddingInlineStart: `calc(${system.space.x1} * 5)`,
+      paddingInlineEnd: system.space.x6,
     }),
     mediumEnd: createStyles({
-      paddingInlineStart: cssVar(system.space.x6, '1.5rem'),
-      paddingInlineEnd: `calc(${cssVar(system.space.x1, '0.25rem')} * 5)`,
+      paddingInlineStart: system.space.x6,
+      paddingInlineEnd: `calc(${system.space.x1} * 5)`,
     }),
-    smallOnly: createStyles({padding: '0', minWidth: cssVar(system.space.x8, '2rem')}),
+    smallOnly: createStyles({padding: '0', minWidth: system.space.x8}),
     smallStart: createStyles({
-      paddingInlineStart: cssVar(system.space.x3, '0.75rem'),
-      paddingInlineEnd: cssVar(system.space.x4, '1rem'),
+      paddingInlineStart: system.space.x3,
+      paddingInlineEnd: system.space.x4,
     }),
     smallEnd: createStyles({
-      paddingInlineStart: cssVar(system.space.x4, '1rem'),
-      paddingInlineEnd: cssVar(system.space.x3, '0.75rem'),
+      paddingInlineStart: system.space.x4,
+      paddingInlineEnd: system.space.x3,
     }),
-    extraSmallOnly: createStyles({padding: '0', minWidth: cssVar(system.space.x6, '1.5rem')}),
+    extraSmallOnly: createStyles({padding: '0', minWidth: system.space.x6}),
     extraSmallStart: createStyles({
-      paddingInlineStart: cssVar(system.space.x2, '0.5rem'),
-      paddingInlineEnd: cssVar(system.space.x3, '0.75rem'),
+      paddingInlineStart: system.space.x2,
+      paddingInlineEnd: system.space.x3,
     }),
     extraSmallEnd: createStyles({
-      paddingInlineStart: cssVar(system.space.x3, '0.75rem'),
-      paddingInlineEnd: cssVar(system.space.x2, '0.5rem'),
+      paddingInlineStart: system.space.x3,
+      paddingInlineEnd: system.space.x2,
     }),
   },
 });

package/button/lib/DeleteButton.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import {buttonVars} from './BaseButton';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {createStyles, cssVar} from '@workday/canvas-kit-styling';
+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';
@@ -15,35 +15,35 @@ import {Button, ButtonProps} from './Button';
 export interface DeleteButtonProps extends ButtonProps {}
 
 const deleteStyles = createStyles({
-  [buttonVars.default.background]: cssVar(brand.error.base, '#de2e21'),
+  [buttonVars.default.background]: brand.error.base,
   [buttonVars.default.border]: 'transparent',
-  [buttonVars.default.borderRadius]: cssVar(system.shape.round, '62.5rem'),
-  [buttonVars.default.label]: cssVar(brand.error.accent, '#ffffff'),
-  [buttonVars.default.icon]: cssVar(brand.error.accent, '#ffffff'),
+  [buttonVars.default.borderRadius]: system.shape.round,
+  [buttonVars.default.label]: brand.error.accent,
+  [buttonVars.default.icon]: brand.error.accent,
   '&:hover, &.hover': {
-    [buttonVars.hover.background]: cssVar(brand.error.dark, '#a31b12'),
+    [buttonVars.hover.background]: brand.error.dark,
     [buttonVars.hover.border]: 'transparent',
-    [buttonVars.hover.label]: cssVar(brand.error.accent, '#ffffff'),
-    [buttonVars.hover.icon]: cssVar(brand.error.accent, '#ffffff'),
+    [buttonVars.hover.label]: brand.error.accent,
+    [buttonVars.hover.icon]: brand.error.accent,
   },
   '&:focus-visible, &.focus': {
-    [buttonVars.focus.background]: cssVar(brand.error.base, '#de2e21'),
+    [buttonVars.focus.background]: brand.error.base,
     [buttonVars.focus.border]: 'transparent',
-    [buttonVars.focus.label]: cssVar(brand.error.accent, '#ffffff'),
-    [buttonVars.focus.icon]: cssVar(brand.error.accent, '#ffffff'),
-    [buttonVars.focus.boxShadowInner]: cssVar(base.frenchVanilla100, '#ffffff'),
-    [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline, '#0875e1'),
+    [buttonVars.focus.label]: brand.error.accent,
+    [buttonVars.focus.icon]: brand.error.accent,
+    [buttonVars.focus.boxShadowInner]: base.frenchVanilla100,
+    [buttonVars.focus.boxShadowOuter]: brand.common.focusOutline,
   },
   '&:active, &.active': {
-    [buttonVars.active.background]: cssVar(brand.error.darkest, 'rgba(128,22,14,1)'),
+    [buttonVars.active.background]: brand.error.darkest,
     [buttonVars.active.border]: 'transparent',
-    [buttonVars.active.label]: cssVar(brand.error.accent, '#ffffff'),
-    [buttonVars.active.icon]: cssVar(brand.error.accent, '#ffffff'),
+    [buttonVars.active.label]: brand.error.accent,
+    [buttonVars.active.icon]: brand.error.accent,
   },
   '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
-    [buttonVars.disabled.background]: cssVar(brand.error.light, '#fcc9c5'),
-    [buttonVars.disabled.label]: cssVar(brand.error.accent, '#ffffff'),
-    [buttonVars.disabled.icon]: cssVar(brand.error.accent, '#ffffff'),
+    [buttonVars.disabled.background]: brand.error.light,
+    [buttonVars.disabled.label]: brand.error.accent,
+    [buttonVars.disabled.icon]: brand.error.accent,
     opacity: 1,
   },
 });

package/button/lib/PrimaryButton.tsx

@@ -3,7 +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 {createStyles, cssVar, createModifiers} from '@workday/canvas-kit-styling';
+import {createStyles, createModifiers} from '@workday/canvas-kit-styling';
 import {base, brand, system} from '@workday/canvas-tokens-web';
 import {Button, ButtonProps} from './Button';
 
@@ -21,62 +21,62 @@ export interface PrimaryButtonProps extends ButtonProps {
 
 const primaryStyles = createStyles({
   // Default Styles
-  [buttonVars.default.background]: cssVar(brand.primary.base, cssVar(base.blueberry400, '#0875e1')),
+  [buttonVars.default.background]: brand.primary.base,
   [buttonVars.default.border]: 'transparent',
-  [buttonVars.default.borderRadius]: cssVar(system.shape.round, '62.5rem'),
-  [buttonVars.default.label]: cssVar(brand.primary.accent, '#ffffff'),
-  [buttonVars.default.icon]: cssVar(brand.primary.accent, '#ffffff'),
+  [buttonVars.default.borderRadius]: system.shape.round,
+  [buttonVars.default.label]: brand.primary.accent,
+  [buttonVars.default.icon]: brand.primary.accent,
   // Hover Styles
-  [buttonVars.hover.background]: cssVar(brand.primary.dark, 'rgba(0,92,184,1)'),
+  [buttonVars.hover.background]: brand.primary.dark,
   [buttonVars.hover.border]: 'transparent',
-  [buttonVars.hover.label]: cssVar(brand.primary.accent, '#ffffff'),
-  [buttonVars.hover.icon]: cssVar(brand.primary.accent, '#ffffff'),
+  [buttonVars.hover.label]: brand.primary.accent,
+  [buttonVars.hover.icon]: brand.primary.accent,
   // Focus Styles
-  [buttonVars.focus.background]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
+  [buttonVars.focus.background]: brand.primary.base,
   [buttonVars.focus.border]: 'transparent',
-  [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)'),
+  [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]: cssVar(brand.primary.darkest, 'rgba(0,66,133,1)'),
+  [buttonVars.active.background]: brand.primary.darkest,
   [buttonVars.active.border]: 'transparent',
-  [buttonVars.active.label]: cssVar(brand.primary.accent, '#ffffff'),
-  [buttonVars.active.icon]: cssVar(brand.primary.accent, '#ffffff'),
+  [buttonVars.active.label]: brand.primary.accent,
+  [buttonVars.active.icon]: brand.primary.accent,
   // Disabled Styles
-  [buttonVars.disabled.background]: cssVar(brand.primary.base, 'rgba(8,117,226,1)'),
+  [buttonVars.disabled.background]: brand.primary.base,
   [buttonVars.disabled.border]: 'transparent',
-  [buttonVars.disabled.label]: cssVar(brand.primary.accent, '#ffffff'),
+  [buttonVars.disabled.label]: brand.primary.accent,
   [buttonVars.disabled.opacity]: '0.4',
-  [buttonVars.disabled.icon]: cssVar(brand.primary.accent, '#ffffff'),
+  [buttonVars.disabled.icon]: brand.primary.accent,
 });
 
 export const primaryButtonModifiers = createModifiers({
   variant: {
     inverse: createStyles({
       // Default Styles
-      [buttonVars.default.background]: cssVar(base.frenchVanilla100, '#ffffff'),
-      [buttonVars.default.borderRadius]: cssVar(system.shape.round, '62.5rem'),
-      [buttonVars.default.label]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
-      [buttonVars.default.icon]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
+      [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]: 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)'),
+      [buttonVars.hover.background]: base.soap300,
+      [buttonVars.hover.label]: base.blackPepper500,
+      [buttonVars.hover.icon]: base.blackPepper500,
       // Focus Styles
-      [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'),
+      [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]: 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)'),
+      [buttonVars.active.background]: base.soap400,
+      [buttonVars.active.label]: base.blackPepper500,
+      [buttonVars.active.icon]: base.blackPepper500,
       // Disabled Styles
-      [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)'),
+      [buttonVars.disabled.background]: base.frenchVanilla100,
+      [buttonVars.disabled.label]: base.blackPepper400,
+      [buttonVars.disabled.icon]: base.blackPepper400,
     }),
   },
 });

package/button/lib/SecondaryButton.tsx

@@ -3,7 +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 {createStyles, cssVar, createModifiers} from '@workday/canvas-kit-styling';
+import {createStyles, createModifiers} from '@workday/canvas-kit-styling';
 import {base, brand, system} from '@workday/canvas-tokens-web';
 import {Button, ButtonProps} from './Button';
 
@@ -22,33 +22,33 @@ export interface SecondaryButtonProps extends ButtonProps {
 const secondaryStyles = createStyles({
   // Default Styles
   [buttonVars.default.background]: 'transparent',
-  [buttonVars.default.border]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
-  [buttonVars.default.borderRadius]: cssVar(system.shape.round, '62.5rem'),
-  [buttonVars.default.label]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
-  [buttonVars.default.icon]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
+  [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]: 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)'),
+  [buttonVars.hover.background]: base.blackPepper400,
+  [buttonVars.hover.border]: base.blackPepper400,
+  [buttonVars.hover.label]: brand.primary.accent,
+  [buttonVars.hover.icon]: brand.primary.accent,
   // Focus Styles
   [buttonVars.focus.background]: 'transparent',
-  [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)'),
+  [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,
   // Active Styles
-  [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)'),
+  [buttonVars.active.background]: base.blackPepper500,
+  [buttonVars.active.border]: base.blackPepper500,
+  [buttonVars.active.label]: brand.primary.accent,
+  [buttonVars.active.icon]: brand.primary.accent,
   // Disabled Styles
   [buttonVars.disabled.background]: 'transparent',
-  [buttonVars.disabled.border]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
-  [buttonVars.disabled.label]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
+  [buttonVars.disabled.border]: base.blackPepper400,
+  [buttonVars.disabled.label]: base.blackPepper400,
   [buttonVars.disabled.opacity]: '0.4',
-  [buttonVars.disabled.icon]: cssVar(base.blackPepper400, 'rgba(51,51,51,1)'),
+  [buttonVars.disabled.icon]: base.blackPepper400,
 });
 
 export const secondaryButtonModifiers = createModifiers({
@@ -56,31 +56,31 @@ export const secondaryButtonModifiers = createModifiers({
     inverse: createStyles({
       // Default Styles
       [buttonVars.default.background]: 'transparent',
-      [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)'),
+      [buttonVars.default.border]: base.frenchVanilla100,
+      [buttonVars.default.label]: base.frenchVanilla100,
+      [buttonVars.default.icon]: base.frenchVanilla100,
       // Hover Styles
-      [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)'),
+      [buttonVars.hover.background]: base.soap300,
+      [buttonVars.hover.border]: base.soap300,
+      [buttonVars.hover.label]: base.blackPepper500,
+      [buttonVars.hover.icon]: base.blackPepper500,
       // Focus Styles
-      [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)'),
+      [buttonVars.focus.background]: base.frenchVanilla100,
+      [buttonVars.focus.border]: base.frenchVanilla100,
+      [buttonVars.focus.label]: base.blackPepper500,
+      [buttonVars.focus.icon]: base.blackPepper500,
+      [buttonVars.focus.boxShadowInner]: base.blackPepper500,
+      [buttonVars.focus.boxShadowOuter]: base.frenchVanilla100,
       // Active Styles
-      [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)'),
+      [buttonVars.active.background]: base.soap400,
+      [buttonVars.active.border]: base.soap400,
+      [buttonVars.active.label]: base.blackPepper500,
+      [buttonVars.active.icon]: base.blackPepper500,
       // Disabled Styles
       [buttonVars.disabled.background]: 'transparent',
-      [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)'),
+      [buttonVars.disabled.border]: base.frenchVanilla100,
+      [buttonVars.disabled.label]: base.frenchVanilla100,
+      [buttonVars.disabled.icon]: base.frenchVanilla100,
     }),
   },
 });