chore: Update checkbox to use system color tokens

modules/react/checkbox/lib/CheckBackground.tsx

@@ -1,19 +1,19 @@
 import * as React from 'react';
 import {createComponent, ErrorType} from '@workday/canvas-kit-react/common';
-import {calc, createStencil, createVars, px2rem, cssVar} from '@workday/canvas-kit-styling';
-import {base, brand, system} from '@workday/canvas-tokens-web';
+import {calc, createStencil, createVars, px2rem} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
 
 interface CheckBackgroundProps {
   children: React.ReactNode;
   error?: ErrorType;
 }
 
-export const backgroundVars = createVars('inner', 'outer');
+export const checkboxStatusColorVars = createVars('inner', 'outer');
 
 const checkboxBackgroundStencil = createStencil({
   base: {
     alignItems: 'center',
-    backgroundColor: base.frenchVanilla100,
+    backgroundColor: system.color.bg.default,
     borderRadius: system.shape.half,
     boxSizing: 'border-box',
     display: 'flex',
@@ -24,17 +24,17 @@ const checkboxBackgroundStencil = createStencil({
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
     width: calc.add(system.space.x4, px2rem(2)),
-    border: `${px2rem(1)} solid ${base.licorice200}`,
+    border: `${px2rem(1)} solid ${system.color.fg.muted.soft}`,
   },
   modifiers: {
     error: {
       error: {
-        [backgroundVars.inner]: cssVar(brand.error.base, base.cinnamon500),
-        [backgroundVars.outer]: 'transparent',
+        [checkboxStatusColorVars.inner]: brand.error.base,
+        [checkboxStatusColorVars.outer]: 'transparent',
       },
       alert: {
-        [backgroundVars.inner]: cssVar(brand.alert.base, base.cantaloupe600),
-        [backgroundVars.outer]: cssVar(brand.alert.darkest, base.cantaloupe400),
+        [checkboxStatusColorVars.inner]: brand.alert.base,
+        [checkboxStatusColorVars.outer]: brand.alert.darkest,
       },
     },
   },

modules/react/checkbox/lib/CheckboxCheck.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import {ErrorType, createComponent} from '@workday/canvas-kit-react/common';
-import {createStencil, createStyles, cssVar, calc, px2rem} from '@workday/canvas-kit-styling';
+import {createStencil, calc, px2rem} from '@workday/canvas-kit-styling';
 import {brand, system} from '@workday/canvas-tokens-web';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {checkSmallIcon} from '@workday/canvas-system-icons-web';
 import {CheckBackground} from './CheckBackground';
 
@@ -24,24 +24,26 @@ const checkboxCheckStencil = createStencil({
       marginInlineStart: calc.negate(px2rem(6)),
       transition: 'margin 200ms ease',
     },
-    opacity: 0,
+    opacity: system.opacity.zero,
     transform: 'scale(0.5)',
   },
   modifiers: {
     checked: {
       true: {
-        opacity: 1,
+        [systemIconStencil.vars.color]: brand.primary.accent,
+        opacity: system.opacity.full,
         transform: 'scale(1)',
       },
     },
     indeterminate: {
       true: {
-        opacity: 1,
+        opacity: system.opacity.full,
         transform: 'scale(1)',
       },
     },
     variant: {
       inverse: {
+        [systemIconStencil.vars.color]: brand.primary.base,
         '& > div': {
           backgroundColor: brand.primary.base,
         },
@@ -50,10 +52,12 @@ const checkboxCheckStencil = createStencil({
   },
 });
 
-const indeterminateBoxStyles = createStyles({
-  width: calc.add(system.space.x2, px2rem(2)),
-  height: calc.divide(system.space.x1, 2),
-  backgroundColor: brand.primary.accent,
+const indeterminateBoxStencil = createStencil({
+  base: {
+    width: px2rem(10),
+    height: calc.divide(system.space.x1, 2),
+    backgroundColor: brand.primary.accent,
+  },
 });
 
 export const CheckboxCheck = createComponent('div')({
@@ -63,16 +67,9 @@ export const CheckboxCheck = createComponent('div')({
       <CheckBackground error={error}>
         <div {...checkboxCheckStencil({checked, indeterminate, variant})}>
           {indeterminate ? (
-            <div className={indeterminateBoxStyles} />
+            <div {...indeterminateBoxStencil()} />
           ) : (
-            checked && (
-              <SystemIcon
-                icon={checkSmallIcon}
-                color={
-                  variant === 'inverse' ? cssVar(brand.primary.base) : cssVar(brand.primary.accent)
-                }
-              />
-            )
+            checked && <SystemIcon icon={checkSmallIcon} />
           )}
         </div>
       </CheckBackground>

modules/react/checkbox/lib/CheckboxContainer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {CSProps, calc, createStyles, cssVar, px2rem, createVars} from '@workday/canvas-kit-styling';
+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';
 
@@ -12,35 +12,35 @@ interface CheckboxContainerProps extends CSProps {
   variant?: 'inverse';
 }
 
-export const inputVars = createVars('errorInner', 'errorOuter', 'alertInner', 'alertOuter');
-
-const checkboxContainerStyles = createStyles({
-  display: 'flex',
-  alignItems: 'center',
-  minHeight: system.space.x6,
-  position: 'relative',
-  /**
-   * Using a wrapper prevents the browser default behavior of trigging
-   * :hover on the checkbox when you hover on it's corresponding label.
-   * This stops the ripple from showing when you hover on the label.
-   */
-  '&>div': {
+const checkboxContainerStencil = createStencil({
+  base: {
     display: 'flex',
-    height: calc.add(system.space.x4, px2rem(2)),
-    minWidth: calc.add(system.space.x4, px2rem(2)),
-    marginTop: px2rem(3),
-    alignSelf: 'flex-start',
-  },
-  '& > label': {
-    paddingInlineStart: cssVar(system.space.x3),
+    alignItems: 'center',
+    minHeight: system.space.x6,
+    position: 'relative',
+    /**
+     * Using a wrapper prevents the browser default behavior of trigging
+     * :hover on the checkbox when you hover on it's corresponding label.
+     * This stops the ripple from showing when you hover on the label.
+     */
+    '&>div': {
+      display: 'flex',
+      height: calc.add(system.space.x4, px2rem(2)),
+      minWidth: calc.add(system.space.x4, px2rem(2)),
+      marginTop: px2rem(3),
+      alignSelf: 'flex-start',
+    },
+    '& > label': {
+      paddingInlineStart: system.space.x3,
+    },
   },
 });
 
 export const CheckboxContainer = createComponent('div')({
   displayName: 'CheckboxContainer',
   Component: ({children, disabled, id, label, variant}: CheckboxContainerProps) => {
     return (
-      <div className={checkboxContainerStyles}>
+      <div {...checkboxContainerStencil()}>
         <div>{children}</div>
         {label && (
           <LabelText

modules/react/checkbox/lib/CheckboxInput.tsx

@@ -9,8 +9,8 @@ import {
   px2rem,
   CSProps,
 } from '@workday/canvas-kit-styling';
-import {base, brand, system} from '@workday/canvas-tokens-web';
-import {backgroundVars} from './CheckBackground';
+import {brand, system} from '@workday/canvas-tokens-web';
+import {checkboxStatusColorVars} from './CheckBackground';
 
 export interface CheckboxProps extends CSProps {
   /**
@@ -65,29 +65,29 @@ const checkboxInputStencil = createStencil({
     marginTop: calc.negate(px2rem(3)),
     marginInlineStart: calc.negate(px2rem(3)),
     position: 'absolute',
-    opacity: 0,
+    opacity: system.opacity.zero,
 
     '&:not(:disabled)': {
       cursor: 'pointer',
     },
 
-    '&:where(:hover, .hover) ~ span:first-of-type': {
-      boxShadow: `0 0 0 ${px2rem(7)} ${base.soap200}`,
+    '&:where(:hover,.hover) ~ span:first-of-type': {
+      boxShadow: `0 0 0 ${px2rem(7)} ${system.color.bg.alt.soft}`,
     },
 
     // Disabled State
     '&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
       {
-        borderColor: base.licorice500,
+        borderColor: system.color.border.input.strong,
       },
     '&:where(:checked, :indeterminate) ~ div:first-of-type': {
       borderColor: brand.primary.base,
       backgroundColor: brand.primary.base,
     },
     '&:disabled ~ div:first-of-type': {
-      borderColor: base.licorice100,
-      backgroundColor: base.soap100,
-      opacity: 1,
+      borderColor: system.color.border.input.disabled,
+      backgroundColor: system.color.bg.alt.softer,
+      opacity: system.opacity.full,
     },
     '&:disabled:where(:checked, :indeterminate) ~ div:first-of-type': {
       borderColor: brand.primary.light,
@@ -133,36 +133,36 @@ const checkboxInputStencil = createStencil({
         },
 
         '& ~ div:first-of-type': {
-          borderColor: base.soap300,
+          borderColor: system.color.border.input.inverse,
         },
 
         // Disabled State for inverse variant
         '&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
           {
-            borderColor: base.soap300,
+            borderColor: system.color.border.input.inverse,
           },
         '&:where(:checked, :indeterminate) ~ div:first-of-type': {
-          borderColor: base.soap300,
-          backgroundColor: base.frenchVanilla100,
+          borderColor: system.color.border.input.inverse,
+          backgroundColor: system.color.bg.default,
         },
         '&:disabled ~ div:first-of-type': {
-          backgroundColor: base.soap300,
+          backgroundColor: system.color.border.input.inverse,
           opacity: system.opacity.disabled,
         },
         '&:disabled:where(:checked, :indeterminate) ~ div:first-of-type': {
-          borderColor: base.soap300,
-          backgroundColor: base.soap300,
+          borderColor: system.color.border.input.inverse,
+          backgroundColor: system.color.bg.alt.default,
         },
 
         // Focus state for inverse variant
         '&:where(:focus-visible, .focus) ~ div:first-of-type': {
-          borderColor: base.blackPepper400,
+          borderColor: system.color.border.contrast.default,
           ...focusRing({
             width: 2,
             separation: 0,
             animate: false,
-            innerColor: cssVar(base.blackPepper400),
-            outerColor: cssVar(base.frenchVanilla100),
+            innerColor: cssVar(system.color.border.contrast.default),
+            outerColor: cssVar(system.color.border.inverse),
           }),
         },
         '&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus':
@@ -172,10 +172,10 @@ const checkboxInputStencil = createStencil({
                 width: 2,
                 separation: 2,
                 animate: false,
-                innerColor: cssVar(base.blackPepper400),
-                outerColor: cssVar(base.frenchVanilla100),
+                innerColor: cssVar(system.color.border.contrast.default),
+                outerColor: cssVar(system.color.border.inverse),
               }),
-              borderColor: base.frenchVanilla100,
+              borderColor: system.color.border.inverse,
             },
           },
       },
@@ -188,74 +188,40 @@ const checkboxInputStencil = createStencil({
       },
     },
     error: {
-      error: {
+      true: {
         '&:not(:where(:focus-visible, .focus)) ~ div:first-of-type': {
-          borderColor: backgroundVars.inner,
+          borderColor: checkboxStatusColorVars.inner,
           boxShadow: `
-            0 0 0 ${px2rem(1)} ${backgroundVars.inner}, 
-            0 0 0 ${px2rem(2)} ${backgroundVars.outer}`,
+            0 0 0 ${px2rem(1)} ${checkboxStatusColorVars.inner}, 
+            0 0 0 ${px2rem(2)} ${checkboxStatusColorVars.outer}`,
         },
         '&:where(:checked, :indeterminate) ~ div:first-of-type': {
           borderColor: 'transparent',
           boxShadow: `
-            0 0 0 ${px2rem(2)} ${base.frenchVanilla100},
-            0 0 0 ${px2rem(4)} ${backgroundVars.inner},
-            0 0 0 ${px2rem(5)} ${backgroundVars.outer}`,
+            0 0 0 ${px2rem(2)} ${system.color.fg.inverse},
+            0 0 0 ${px2rem(4)} ${checkboxStatusColorVars.inner},
+            0 0 0 ${px2rem(5)} ${checkboxStatusColorVars.outer}`,
         },
         '&:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
           {
-            borderColor: backgroundVars.inner,
-          },
-      },
-      alert: {
-        '&:not(:where(:focus-visible, .focus)) ~ div:first-of-type': {
-          border: `${px2rem(1)} solid ${backgroundVars.inner}`,
-          boxShadow: `
-            0 0 0 ${px2rem(1)} ${backgroundVars.inner}, 
-            0 0 0 ${px2rem(2)} ${backgroundVars.outer}`,
-        },
-        '&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
-          {
-            borderColor: backgroundVars.inner,
+            borderColor: checkboxStatusColorVars.inner,
           },
-        '&:where(:checked, :indeterminate) ~ div:first-of-type': {
-          borderColor: 'transparent',
-          boxShadow: `
-            0 0 0 ${px2rem(2)} ${base.frenchVanilla100},
-            0 0 0 ${px2rem(4)} ${backgroundVars.inner},
-            0 0 0 ${px2rem(5)} ${backgroundVars.outer}`,
-        },
       },
     },
   },
   compound: [
     {
-      modifiers: {variant: 'inverse', error: 'error'},
-      styles: {
-        '&:not(:where(:focus-visible, .focus)) ~ div:first-of-type': {
-          border: `${px2rem(1)} solid ${base.soap300}`,
-        },
-        '&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
-          {
-            borderColor: base.soap300,
-          },
-        '&:where(:checked, :indeterminate) ~ div:first-of-type': {
-          borderColor: base.soap300,
-        },
-      },
-    },
-    {
-      modifiers: {variant: 'inverse', error: 'alert'},
+      modifiers: {variant: 'inverse', error: true},
       styles: {
         '&:not(:where(:focus-visible, .focus)) ~ div:first-of-type': {
-          border: `${px2rem(1)} solid ${base.soap300}`,
+          border: `${px2rem(1)} solid ${system.color.border.input.inverse}`,
         },
         '&:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active) ~ div:first-of-type':
           {
-            borderColor: base.soap300,
+            borderColor: system.color.border.input.inverse,
           },
         '&:where(:checked, :indeterminate) ~ div:first-of-type': {
-          borderColor: base.soap300,
+          borderColor: system.color.border.input.inverse,
         },
       },
     },
@@ -272,7 +238,7 @@ export const CheckboxInput = createComponent('input')({
         type="checkbox"
         ref={ref}
         aria-checked={indeterminate ? 'mixed' : checked}
-        {...handleCsProp(elemProps, checkboxInputStencil({variant, disabled, error}))}
+        {...handleCsProp(elemProps, checkboxInputStencil({variant, disabled, error: !!error}))}
       />
     );
   },