@workday/canvas-kit-react/dist/es6/button/lib/PrimaryButton.js

The parent module that contains all Workday Canvas Kit React components

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 primaryButtonStencil = createStencil({
    extends: buttonStencil,
    base: { name: "3nhlw1", styles: "box-sizing:border-box;--background-button-a19f67:var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))));--label-button-a19f67:var(--cnvs-brand-action-accent, 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)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:hover, &.hover{--background-button-a19f67:var(--cnvs-brand-action-dark, color-mix(in srgb, var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 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-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:active, &.active{--background-button-a19f67:var(--cnvs-brand-action-darkest, color-mix(in srgb, var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 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-brand-action-accent, 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-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))));--label-button-a19f67:var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);}" },
    modifiers: {
        variant: {
            // Inverse Styles
            inverse: { name: "3jmnyb", styles: "--background-button-a19f67:var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));--borderRadius-button-a19f67:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));--label-button-a19f67:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--icon-2f7547, currentColor);&:hover, &.hover{--background-button-a19f67:var(--cnvs-brand-action-lighter, color-mix(in srgb, var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%)));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:var(--icon-60f068, currentColor);}&:focus-visible, &.focus{--background-button-a19f67:var(--cnvs-brand-action-lightest, 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-strong);--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)));--color-system-icon-c9acc3:var(--icon-5e7d9c, currentColor);}&:active, &.active{--background-button-a19f67:var(--cnvs-brand-action-light, color-mix(in srgb, var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%)));--label-button-a19f67:var(--cnvs-sys-color-fg-stronger);--color-system-icon-c9acc3:var(--icon-76d965, currentColor);}&:disabled, &.disabled{--opacity-button-a19f67:var(--cnvs-sys-opacity-disabled);--background-button-a19f67:var(--cnvs-brand-action-lightest, 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-strong);--color-system-icon-c9acc3:var(--icon-4fc0b7, currentColor);}" }
        }
    }
}, "primary-button-821491");
export const PrimaryButton = createComponent('button')({
    displayName: 'PrimaryButton',
    Component: ({ children, variant, size, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
        return (_jsx(Button, { as: Element, ref: ref, iconPosition: iconPosition, size: size, grow: grow, cs: [primaryButtonStencil({ variant, iconPosition, grow, size }), cs], ...elemProps, children: children }));
    },
});