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

package/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,
+      }),
     },
   },
 });

package/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>

package/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,27 +12,27 @@ 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,
+    },
   },
 });
 
@@ -40,7 +40,7 @@ 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

package/checkbox/lib/CheckboxInput.tsx

@@ -1,16 +1,9 @@
 import * as React from 'react';
 import {createComponent, focusRing, ErrorType} from '@workday/canvas-kit-react/common';
 
-import {
-  calc,
-  createStencil,
-  cssVar,
-  handleCsProp,
-  px2rem,
-  CSProps,
-} from '@workday/canvas-kit-styling';
-import {base, brand, system} from '@workday/canvas-tokens-web';
-import {backgroundVars} from './CheckBackground';
+import {calc, createStencil, handleCsProp, px2rem, CSProps} from '@workday/canvas-kit-styling';
+import {brand, system} from '@workday/canvas-tokens-web';
+import {checkboxBackgroundStencil} from './CheckBackground';
 
 export interface CheckboxProps extends CSProps {
   /**
@@ -65,29 +58,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,
@@ -115,7 +108,7 @@ const checkboxInputStencil = createStencil({
             width: 2,
             separation: 2,
             animate: false,
-            outerColor: cssVar(brand.common.focusOutline),
+            outerColor: brand.common.focusOutline,
           }),
           borderColor: brand.primary.base,
           borderWidth: px2rem(2),
@@ -133,36 +126,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.bg.alt.default,
           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: system.color.fg.strong,
+            outerColor: system.color.fg.inverse,
           }),
         },
         '&:checked:focus-visible, &:checked.focus, &:indeterminate:focus-visible, &:indeterminate.focus':
@@ -172,10 +165,10 @@ const checkboxInputStencil = createStencil({
                 width: 2,
                 separation: 2,
                 animate: false,
-                innerColor: cssVar(base.blackPepper400),
-                outerColor: cssVar(base.frenchVanilla100),
+                innerColor: system.color.fg.strong,
+                outerColor: system.color.fg.inverse,
               }),
-              borderColor: base.frenchVanilla100,
+              borderColor: system.color.border.inverse,
             },
           },
       },
@@ -188,74 +181,40 @@ const checkboxInputStencil = createStencil({
       },
     },
     error: {
-      error: {
+      true: {
         '&:not(:where(:focus-visible, .focus)) ~ div:first-of-type': {
-          borderColor: backgroundVars.inner,
+          borderColor: checkboxBackgroundStencil.vars.errorRingColorInner,
           boxShadow: `
-            0 0 0 ${px2rem(1)} ${backgroundVars.inner}, 
-            0 0 0 ${px2rem(2)} ${backgroundVars.outer}`,
+            0 0 0 ${px2rem(1)} ${checkboxBackgroundStencil.vars.errorRingColorInner}, 
+            0 0 0 ${px2rem(2)} ${checkboxBackgroundStencil.vars.errorRingColorOuter}`,
         },
         '&: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)} ${checkboxBackgroundStencil.vars.errorRingColorInner},
+            0 0 0 ${px2rem(5)} ${checkboxBackgroundStencil.vars.errorRingColorOuter}`,
         },
         '&: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: checkboxBackgroundStencil.vars.errorRingColorInner,
           },
-        '&: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 +231,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}))}
       />
     );
   },

package/checkbox/lib/CheckboxRipple.tsx

@@ -1,21 +1,23 @@
 import * as React from 'react';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {calc, createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {calc, createStencil, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
-const checkboxRippleStyles = createStyles({
-  borderRadius: system.shape.round,
-  boxShadow: 'none',
-  height: calc.add(system.space.x4, px2rem(2)),
-  width: calc.add(system.space.x4, px2rem(2)),
-  transition: 'box-shadow 150ms ease-out',
-  position: 'absolute',
-  pointerEvents: 'none',
+const checkboxRippleStencil = createStencil({
+  base: {
+    borderRadius: system.shape.round,
+    boxShadow: 'none',
+    height: calc.add(system.space.x4, px2rem(2)),
+    width: calc.add(system.space.x4, px2rem(2)),
+    transition: 'box-shadow 150ms ease-out',
+    position: 'absolute',
+    pointerEvents: 'none',
+  },
 });
 
 export const CheckboxRipple = createComponent('span')({
   displayName: 'CheckboxRipple',
   Component: elemProps => {
-    return <span className={checkboxRippleStyles} {...elemProps} />;
+    return <span {...checkboxRippleStencil()} />;
   },
 });

package/dist/commonjs/checkbox/lib/CheckBackground.d.ts

@@ -4,7 +4,25 @@ interface CheckBackgroundProps {
     children: React.ReactNode;
     error?: ErrorType;
 }
-export declare const backgroundVars: import("@workday/canvas-kit-styling").CsVars<"inner" | "outer", never>;
+export declare const checkboxBackgroundStencil: import("@workday/canvas-kit-styling").Stencil<{
+    error: {
+        error: ({ errorRingColorInner, errorRingColorOuter }: {
+            errorRingColorInner: string;
+            errorRingColorOuter: string;
+        }) => {
+            [x: string]: string;
+        };
+        alert: ({ errorRingColorInner, errorRingColorOuter }: {
+            errorRingColorInner: string;
+            errorRingColorOuter: string;
+        }) => {
+            [x: string]: "--cnvs-brand-alert-base" | "--cnvs-brand-alert-darkest";
+        };
+    };
+}, {
+    errorRingColorInner: string;
+    errorRingColorOuter: string;
+}, never, never>;
 export declare const CheckBackground: import("@workday/canvas-kit-react/common").ElementComponent<"div", CheckBackgroundProps>;
 export {};
 //# sourceMappingURL=CheckBackground.d.ts.map

package/dist/commonjs/checkbox/lib/CheckBackground.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBackground.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAI5E,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,cAAc,wEAA+B,CAAC;AAgC3D,eAAO,MAAM,eAAe,0FAK1B,CAAC"}
+{"version":3,"file":"CheckBackground.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAI5E,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;gBAgCpC,CAAC;AAEH,eAAO,MAAM,eAAe,0FAK1B,CAAC"}

package/dist/commonjs/checkbox/lib/CheckBackground.js

@@ -19,24 +19,27 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckBackground = exports.backgroundVars = void 0;
+exports.CheckBackground = exports.checkboxBackgroundStencil = void 0;
 const React = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-exports.backgroundVars = canvas_kit_styling_1.createVars({ id: "cnvs-background", args: ["inner", "outer"] });
-const checkboxBackgroundStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "ce0479", styles: "align-items:center;background-color:var(--cnvs-base-palette-french-vanilla-100);border-radius:var(--cnvs-sys-shape-half);box-sizing:border-box;display:flex;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);justify-content:center;padding:var(--cnvs-sys-space-zero) calc(var(--cnvs-sys-space-x1) / 2);pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;width:calc(var(--cnvs-sys-space-x4) + 0.125rem);border:0.0625rem solid var(--cnvs-base-palette-licorice-200);" },
+exports.checkboxBackgroundStencil = canvas_kit_styling_1.createStencil({
+    vars: {
+        errorRingColorInner: '',
+        errorRingColorOuter: '',
+    },
+    base: { name: "0a4d8d", styles: "align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-half);box-sizing:border-box;display:flex;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);justify-content:center;padding:var(--cnvs-sys-space-zero) calc(var(--cnvs-sys-space-x1) / 2);pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;width:calc(var(--cnvs-sys-space-x4) + 0.125rem);border:0.0625rem solid var(--cnvs-sys-color-border-input-default);" },
     modifiers: {
         error: {
-            error: { name: "b3e9dd", styles: "--cnvs-background-inner:var(--cnvs-brand-error-base, var(--cnvs-base-palette-cinnamon-500));--cnvs-background-outer:transparent;" },
-            alert: { name: "c13fa0", styles: "--cnvs-background-inner:var(--cnvs-brand-alert-base, var(--cnvs-base-palette-cantaloupe-600));--cnvs-background-outer:var(--cnvs-brand-alert-darkest, var(--cnvs-base-palette-cantaloupe-400));" }
+            error: { name: "82be64", styles: "--cnvs-checkbox-background-errorRingColorInner:var(--cnvs-brand-error-base);--cnvs-checkbox-background-errorRingColorOuter:transparent;" },
+            alert: { name: "1d0852", styles: "--cnvs-checkbox-background-errorRingColorInner:var(--cnvs-brand-alert-base);--cnvs-checkbox-background-errorRingColorOuter:var(--cnvs-brand-alert-darkest);" }
         }
     }
 }, "cnvs-checkbox-background");
 exports.CheckBackground = common_1.createComponent('div')({
     displayName: 'CheckBackground',
     Component: ({ error, children }) => {
-        return React.createElement("div", Object.assign({}, checkboxBackgroundStencil({ error })), children);
+        return React.createElement("div", Object.assign({}, exports.checkboxBackgroundStencil({ error })), children);
     },
 });

package/dist/commonjs/checkbox/lib/CheckboxCheck.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxCheck.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxCheck.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAkB,MAAM,kCAAkC,CAAC;AAO5E,UAAU,kBAAkB;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA6CD,eAAO,MAAM,aAAa,wFAsBxB,CAAC"}
+{"version":3,"file":"CheckboxCheck.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxCheck.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAkB,MAAM,kCAAkC,CAAC;AAO5E,UAAU,kBAAkB;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAiDD,eAAO,MAAM,aAAa,wFAexB,CAAC"}

package/dist/commonjs/checkbox/lib/CheckboxCheck.js

@@ -28,24 +28,26 @@ const icon_1 = require("@workday/canvas-kit-react/icon");
 const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 const CheckBackground_1 = require("./CheckBackground");
 const checkboxCheckStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "94bef2", styles: "display:flex;flex-direction:column;max-width:100%;pointer-events:none;transition:transform 200ms ease, opacity 200ms ease;span{margin-inline-start:calc(0.375rem * -1);transition:margin 200ms ease;}opacity:0;transform:scale(0.5);" },
+    base: { name: "2673c1", styles: "display:flex;flex-direction:column;max-width:100%;pointer-events:none;transition:transform 200ms ease, opacity 200ms ease;span{margin-inline-start:calc(0.375rem * -1);transition:margin 200ms ease;}opacity:var(--cnvs-sys-opacity-zero);transform:scale(0.5);" },
     modifiers: {
         checked: {
-            true: { name: "8cb110", styles: "opacity:1;transform:scale(1);" }
+            true: { name: "b7568b", styles: "--cnvs-system-icon-color:var(--cnvs-brand-primary-accent);opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
         },
         indeterminate: {
-            true: { name: "997065", styles: "opacity:1;transform:scale(1);" }
+            true: { name: "7ccfda", styles: "opacity:var(--cnvs-sys-opacity-full);transform:scale(1);" }
         },
         variant: {
-            inverse: { name: "2928d4", styles: "& > div{background-color:var(--cnvs-brand-primary-base);}" }
+            inverse: { name: "1dac33", styles: "--cnvs-system-icon-color:var(--cnvs-brand-primary-base);& > div{background-color:var(--cnvs-brand-primary-base);}" }
         }
     }
 }, "cnvs-checkbox-check");
-const indeterminateBoxStyles = canvas_kit_styling_1.createStyles({ name: "5445f8", styles: "width:calc(var(--cnvs-sys-space-x2) + 0.125rem);height:calc(var(--cnvs-sys-space-x1) / 2);background-color:var(--cnvs-brand-primary-accent);" });
+const indeterminateBoxStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "d394e3", styles: "width:0.625rem;height:calc(var(--cnvs-sys-space-x1) / 2);background-color:var(--cnvs-brand-primary-accent);" }
+}, "cnvs-indeterminate-box");
 exports.CheckboxCheck = common_1.createComponent('div')({
     displayName: 'CheckboxCheck',
     Component: ({ checked, error, indeterminate, variant }) => {
         return (React.createElement(CheckBackground_1.CheckBackground, { error: error },
-            React.createElement("div", Object.assign({}, checkboxCheckStencil({ checked, indeterminate, variant })), indeterminate ? (React.createElement("div", { className: indeterminateBoxStyles })) : (checked && (React.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.checkSmallIcon, color: variant === 'inverse' ? canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.base) : canvas_kit_styling_1.cssVar(canvas_tokens_web_1.brand.primary.accent) }))))));
+            React.createElement("div", Object.assign({}, checkboxCheckStencil({ checked, indeterminate, variant })), indeterminate ? (React.createElement("div", Object.assign({}, indeterminateBoxStencil()))) : (checked && React.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.checkSmallIcon })))));
     },
 });

package/dist/commonjs/checkbox/lib/CheckboxContainer.d.ts

@@ -7,7 +7,6 @@ interface CheckboxContainerProps extends CSProps {
     label: string;
     variant?: 'inverse';
 }
-export declare const inputVars: import("@workday/canvas-kit-styling").CsVars<"errorInner" | "errorOuter" | "alertInner" | "alertOuter", never>;
 export declare const CheckboxContainer: import("@workday/canvas-kit-react/common").ElementComponent<"div", CheckboxContainerProps>;
 export {};
 //# sourceMappingURL=CheckboxContainer.d.ts.map

package/dist/commonjs/checkbox/lib/CheckboxContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxContainer.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,OAAO,EAAiD,MAAM,6BAA6B,CAAC;AAIpG,UAAU,sBAAuB,SAAQ,OAAO;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,gHAAqE,CAAC;AAwB5F,eAAO,MAAM,iBAAiB,4FAmB5B,CAAC"}
+{"version":3,"file":"CheckboxContainer.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,OAAO,EAA8B,MAAM,6BAA6B,CAAC;AAIjF,UAAU,sBAAuB,SAAQ,OAAO;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA0BD,eAAO,MAAM,iBAAiB,4FAmB5B,CAAC"}

package/dist/commonjs/checkbox/lib/CheckboxContainer.js

@@ -19,18 +19,19 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxContainer = exports.inputVars = void 0;
+exports.CheckboxContainer = void 0;
 const React = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const text_1 = require("@workday/canvas-kit-react/text");
-exports.inputVars = canvas_kit_styling_1.createVars({ id: "cnvs-input", args: ["errorInner", "errorOuter", "alertInner", "alertOuter"] });
-const checkboxContainerStyles = canvas_kit_styling_1.createStyles({ name: "ce6ecb", styles: "display:flex;align-items:center;min-height:var(--cnvs-sys-space-x6);position:relative;&>div{display:flex;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);min-width:calc(var(--cnvs-sys-space-x4) + 0.125rem);margin-top:0.1875rem;align-self:flex-start;}& > label{padding-inline-start:var(--cnvs-sys-space-x3);}" });
+const checkboxContainerStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "96fa81", styles: "display:flex;align-items:center;min-height:var(--cnvs-sys-space-x6);position:relative;&>div{display:flex;height:calc(var(--cnvs-sys-space-x4) + 0.125rem);min-width:calc(var(--cnvs-sys-space-x4) + 0.125rem);margin-top:0.1875rem;align-self:flex-start;}& > label{padding-inline-start:var(--cnvs-sys-space-x3);}" }
+}, "cnvs-checkbox-container");
 exports.CheckboxContainer = common_1.createComponent('div')({
     displayName: 'CheckboxContainer',
     Component: ({ children, disabled, id, label, variant }) => {
-        return (React.createElement("div", { className: checkboxContainerStyles },
+        return (React.createElement("div", Object.assign({}, checkboxContainerStencil()),
             React.createElement("div", null, children),
             label && (React.createElement(text_1.LabelText, { htmlFor: id, disabled: disabled, variant: variant, style: { cursor: disabled ? 'default' : 'pointer' } }, label))));
     },

package/dist/commonjs/checkbox/lib/CheckboxInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA6B,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAEvF,OAAO,EAML,OAAO,EACR,MAAM,6BAA6B,CAAC;AAIrC,MAAM,WAAW,aAAc,SAAQ,OAAO;IAC5C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAgND,eAAO,MAAM,aAAa,qFAcxB,CAAC"}
+{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/CheckboxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA6B,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAEvF,OAAO,EAA4C,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAI/F,MAAM,WAAW,aAAc,SAAQ,OAAO;IAC5C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AA8KD,eAAO,MAAM,aAAa,qFAcxB,CAAC"}