@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
28 lines (27 loc) • 5.96 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { createComponent } from '@workday/canvas-kit-react/common';
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
import { colorSpace, createStencil, cssVar } from '@workday/canvas-kit-styling';
import { brand, system } from '@workday/canvas-tokens-web';
import { buttonColorPropVars, buttonStencil } from './BaseButton';
import { Button } from './Button';
const deleteButtonStencil = createStencil({
extends: buttonStencil,
base: { name: "29uz9b", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-2f7547, var(--cnvs-sys-color-fg-inverse));&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-5e7d9c, var(--cnvs-sys-color-fg-inverse));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&:hover, &.hover{--background-button-a19f67:var(--cnvs-brand-critical-700, color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-60f068, var(--cnvs-sys-color-fg-inverse));}&:active, &.active{--background-button-a19f67:var(--cnvs-brand-critical-800, color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-pressed, 0.36) * 100%)));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-76d965, var(--cnvs-sys-color-fg-inverse));}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-4fc0b7, var(--cnvs-sys-color-fg-inverse));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);}" },
modifiers: {
variant: {
outline: { name: "3js6oh", styles: "--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--border-button-a19f67:var(--cnvs-sys-color-border-default);--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--border-button-a19f67:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--border-button-a19f67:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--boxShadowInner-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--border-button-a19f67:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-76d965, currentColor);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--label-button-a19f67:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);}" }
}
}
}, "delete-button-932279");
/**
* Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
* have significant consequences. They commonly appear in confirmation dialogs as the final
* confirmation before being deleted.
*/
export const DeleteButton = createComponent('button')({
displayName: 'DeleteButton',
Component: ({ children, size, iconPosition, grow, variant, cs, ...elemProps }, ref, Element) => {
return (_jsx(Button, { as: Element, ref: ref, size: size, grow: grow, iconPosition: iconPosition, cs: [deleteButtonStencil({ variant, size, iconPosition }), cs], ...elemProps, children: children }));
},
});