@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
84 lines (83 loc) • 7.8 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 { createStencil, cssVar } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { buttonColorPropVars, buttonStencil } from './BaseButton';
import { Button } from './Button';
const tertiaryButtonStencil = createStencil({
extends: buttonStencil,
// Base Styles
base: { name: "2n4aun", styles: "box-sizing:border-box;--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--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-fg-default);--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);--border-button-a19f67:var(--cnvs-sys-color-border-transparent);&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--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-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-stronger);--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));--color-system-icon-c9acc3:var(--icon-76d965, currentColor);--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);}&: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)));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);}" },
modifiers: {
variant: {
// Inverse Styles
inverse: { name: "2wsxeb", styles: "--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-fg-inverse);--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:hover, &.hover{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--label-button-a19f67:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);--boxShadowInner-button-a19f67:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-a19f67:var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));}&:active, &.active{--background-button-a19f67:var(--cnvs-sys-color-surface-overlay-pressed-inverse, oklch(1 0 0 / 0.26));--label-button-a19f67:var(--cnvs-sys-color-fg-inverse);--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-fg-inverse);--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);}" }
}
},
// Compound Modifier Styles
compound: [
{
modifiers: { size: 'large', iconPosition: 'only' },
styles: { name: "3vmaeo", styles: "min-width:var(--cnvs-sys-size-lg, 3rem);" }
},
{
modifiers: { size: 'large', iconPosition: 'start' },
styles: { name: "3umjwl", styles: "padding-inline-start:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));padding-inline-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
},
{
modifiers: { size: 'large', iconPosition: 'end' },
styles: { name: "4de5l", styles: "padding-inline-start:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
},
{
modifiers: { size: 'medium', iconPosition: 'only' },
styles: { name: "46ryfs", styles: "min-width:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" }
},
{
modifiers: { size: 'medium', iconPosition: 'start' },
styles: { name: "45889z", styles: "padding-inline-start:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));padding-inline-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
},
{
modifiers: { size: 'medium', iconPosition: 'end' },
styles: { name: "755fm", styles: "padding-inline-start:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
},
{
modifiers: { size: 'small', iconPosition: 'only' },
styles: { name: "372il9", styles: "min-width:var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));" }
},
{
modifiers: { size: 'small', iconPosition: 'start' },
styles: { name: "eomof", styles: "padding-inline-start:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));padding-inline-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
},
{
modifiers: { size: 'small', iconPosition: 'end' },
styles: { name: "pi9ho", styles: "padding-inline-start:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
},
{
modifiers: { size: 'extraSmall', iconPosition: 'only' },
styles: { name: "24x361", styles: "min-width:var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));" }
},
{
modifiers: { size: 'extraSmall', iconPosition: 'start' },
styles: { name: "2ijbzv", styles: "padding-inline-start:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));padding-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
},
{
modifiers: { size: 'extraSmall', iconPosition: 'end' },
styles: { name: "oq5pl", styles: "padding-inline-start:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));padding-inline-end:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));" }
}
]
}, "tertiary-button-97492b");
export const TertiaryButton = createComponent('button')({
displayName: 'TertiaryButton',
Component: ({ children, icon, size = 'medium', variant, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
return (_jsx(Button, { as: Element, ref: ref, icon: icon, size: size, iconPosition: iconPosition, grow: grow, cs: [
tertiaryButtonStencil({
size,
variant,
grow,
iconPosition,
}),
cs,
], ...elemProps, children: children }));
},
});