@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
24 lines (23 loc) • 1.77 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { createComponent } from '@workday/canvas-kit-react/common';
import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
import { brand, system } from '@workday/canvas-tokens-web';
export const checkboxBackgroundStencil = createStencil({
vars: {
errorRingColorInner: '',
errorRingColorOuter: '',
},
base: { name: "2r7eqj", styles: "box-sizing:border-box;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-half);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: "3o0hgu", styles: "--errorRingColorInner-checkbox-background-8c450a:var(--cnvs-brand-common-error-inner);--errorRingColorOuter-checkbox-background-8c450a:transparent;background-color:var(--cnvs-brand-error-lightest);" },
caution: { name: "46xev4", styles: "--errorRingColorInner-checkbox-background-8c450a:var(--cnvs-brand-common-alert-inner);--errorRingColorOuter-checkbox-background-8c450a:var(--cnvs-brand-common-alert-outer);background-color:var(--cnvs-brand-alert-lightest);" }
}
}
}, "checkbox-background-8c450a");
export const CheckBackground = createComponent('div')({
displayName: 'CheckBackground',
Component: ({ error, children }) => {
return _jsx("div", { ...checkboxBackgroundStencil({ error }), children: children });
},
});