chore: Update checkbox to use system color tokens

modules/react/checkbox/lib/CheckBackground.tsx

@@ -1,19 +1,21 @@
 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, 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');
-
-const checkboxBackgroundStencil = createStencil({
+export const checkboxBackgroundStencil = createStencil({
+  vars: {
+    errorRingColorInner: '',
+    errorRingColorOuter: '',
+  },
   base: {
     alignItems: 'center',
-    backgroundColor: base.frenchVanilla100,
+    backgroundColor: system.color.bg.default,
     borderRadius: system.shape.half,
     boxSizing: 'border-box',
     display: 'flex',
@@ -24,18 +26,18 @@ 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.border.input.default}`,
   },
   modifiers: {
     error: {
-      error: {
-        [backgroundVars.inner]: cssVar(brand.error.base, base.cinnamon500),
-        [backgroundVars.outer]: 'transparent',
-      },
-      alert: {
-        [backgroundVars.inner]: cssVar(brand.alert.base, base.cantaloupe600),
-        [backgroundVars.outer]: cssVar(brand.alert.darkest, base.cantaloupe400),
-      },
+      error: ({errorRingColorInner, errorRingColorOuter}) => ({
+        [errorRingColorInner]: brand.error.base,
+        [errorRingColorOuter]: 'transparent',
+      }),
+      alert: ({errorRingColorInner, errorRingColorOuter}) => ({
+        [errorRingColorInner]: brand.alert.base,
+        [errorRingColorOuter]: 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