@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
27 lines (26 loc) • 4.17 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PrimaryButton = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const icon_1 = require("@workday/canvas-kit-react/icon");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const BaseButton_1 = require("./BaseButton");
const Button_1 = require("./Button");
const primaryButtonStencil = (0, canvas_kit_styling_1.createStencil)({
extends: BaseButton_1.buttonStencil,
base: { name: "1jy24u", styles: "box-sizing:border-box;--background-button-85bf0e:var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));--borderRadius-button-85bf0e:var(--cnvs-sys-shape-round);--label-button-85bf0e:var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));--color-system-icon-3a4847:var(--icon-a1b49d, currentColor);&:focus-visible, &.focus{--background-button-85bf0e:var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));--label-button-85bf0e:var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));--boxShadowInner-button-85bf0e:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-85bf0e:var(--cnvs-brand-common-focus-outline);--color-system-icon-3a4847:var(--icon-553b51, currentColor);}&:hover, &.hover{--background-button-85bf0e:var(--cnvs-brand-action-dark, var(--cnvs-brand-primary-dark));--label-button-85bf0e:var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));--color-system-icon-3a4847:var(--icon-846e8f, currentColor);}&:active, &.active{--background-button-85bf0e:var(--cnvs-brand-action-darkest, var(--cnvs-brand-primary-darkest));--label-button-85bf0e:var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));--color-system-icon-3a4847:var(--icon-3abb65, currentColor);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));--label-button-85bf0e:var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));--opacity-button-85bf0e:var(--cnvs-sys-opacity-disabled);--color-system-icon-3a4847:var(--icon-74b26e, currentColor);}" },
modifiers: {
variant: {
// Inverse Styles
inverse: { name: "2b34v9", styles: "--background-button-85bf0e:var(--cnvs-brand-action-lightest, var(--cnvs-brand-primary-lightest));--borderRadius-button-85bf0e:var(--cnvs-sys-shape-round);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:var(--icon-a1b49d, currentColor);&:focus-visible, &.focus{--background-button-85bf0e:var(--cnvs-brand-action-lightest, var(--cnvs-brand-primary-lightest));--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);--boxShadowInner-button-85bf0e:var(--cnvs-sys-color-border-contrast-default);--boxShadowOuter-button-85bf0e:var(--cnvs-sys-color-border-inverse);--color-system-icon-3a4847:var(--icon-553b51, currentColor);}&:hover, &.hover{--background-button-85bf0e:var(--cnvs-brand-action-lighter, var(--cnvs-brand-primary-lightest));--label-button-85bf0e:var(--cnvs-sys-color-fg-stronger);--color-system-icon-3a4847:var(--icon-846e8f, currentColor);}&:active, &.active{--background-button-85bf0e:var(--cnvs-brand-action-light, var(--cnvs-brand-primary-light));--label-button-85bf0e:var(--cnvs-sys-color-fg-stronger);--color-system-icon-3a4847:var(--icon-3abb65, currentColor);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-brand-action-lightest, var(--cnvs-brand-primary-lightest));--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:var(--icon-74b26e, currentColor);}" }
}
}
}, "primary-button-535c5a");
exports.PrimaryButton = (0, common_1.createComponent)('button')({
displayName: 'PrimaryButton',
Component: ({ children, variant, size, iconPosition, grow, cs, ...elemProps }, ref, Element) => {
return ((0, jsx_runtime_1.jsx)(Button_1.Button, { as: Element, ref: ref, iconPosition: iconPosition, size: size, grow: grow, cs: [primaryButtonStencil({ variant, iconPosition, grow, size }), cs], ...elemProps, children: children }));
},
});