@workday/canvas-kit-react/dist/es6/checkbox/lib/CheckBackground.js

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import { cornerShapeStencil, createComponent } from '@workday/canvas-kit-react/common';
import { createStencil, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
export const checkboxBackgroundStencil = createStencil({
    extends: cornerShapeStencil,
    vars: {
        errorRingColorInner: '',
        errorRingColorOuter: '',
    },
    parts: {
        background: 'checkbox-background',
    },
    base: { name: "2mm1s4", styles: "box-sizing:border-box;align-items:center;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-xs, 0.25rem);display:flex;justify-content:center;padding:0 0.125rem;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;height:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));width:var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));border:0.0625rem solid var(--cnvs-sys-color-border-input-default);" },
    modifiers: {
        variant: {
            inverse: { name: "ac2pn", styles: "background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));" }
        },
        error: {
            error: { name: "2a65u2", styles: "--errorRingColorInner-checkbox-background-c73dbe:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));--errorRingColorOuter-checkbox-background-c73dbe:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));" },
            caution: { name: "11vle0", styles: "--errorRingColorInner-checkbox-background-c73dbe:var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));--errorRingColorOuter-checkbox-background-c73dbe:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));" }
        }
    },
    compound: [
        {
            modifiers: { variant: 'inverse', error: 'error' },
            styles: { name: "12bryb", styles: "background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));" }
        },
        {
            modifiers: { variant: 'inverse', error: 'caution' },
            styles: { name: "3l4gta", styles: "background-color:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));" }
        }
    ]
}, "checkbox-background-c73dbe");
export const CheckBackground = createComponent('div')({
    displayName: 'CheckBackground',
    Component: ({ error, variant, children }) => {
        return (_jsx("div", { ...checkboxBackgroundStencil.parts.background, ...checkboxBackgroundStencil({ error, variant }), children: children }));
    },
});