@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
24 lines (23 loc) • 1.63 kB
JavaScript
import * as React from 'react';
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: "d5h43o", 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: "d5h43p", styles: "--errorRingColorInner-checkbox-background-8c450a:var(--cnvs-brand-error-base);--errorRingColorOuter-checkbox-background-8c450a:transparent;" },
alert: { name: "d5h43q", styles: "--errorRingColorInner-checkbox-background-8c450a:var(--cnvs-brand-alert-base);--errorRingColorOuter-checkbox-background-8c450a:var(--cnvs-brand-alert-darkest);" }
}
}
}, "checkbox-background-8c450a");
export const CheckBackground = createComponent('div')({
displayName: 'CheckBackground',
Component: ({ error, children }) => {
return React.createElement("div", { ...checkboxBackgroundStencil({ error }) }, children);
},
});