@workday/canvas-kit-labs-react
Version:
Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functi
55 lines (54 loc) • 6 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { createComponent, focusRing, useUniqueId } from '@workday/canvas-kit-react/common';
import { BaseButton, buttonStencil } from '@workday/canvas-kit-react/button';
import { createStencil, handleCsProp, calc } from '@workday/canvas-kit-styling';
import { system, base } from '@workday/canvas-tokens-web';
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
import { getAIIngressIcon } from './AIIngressIcon';
/**
* Icon gradient colors
*/
const illuminateStopColor1 = base.red200; //'#FFA198'
const illuminateStopColor2 = base.orange200; //'#FFCAA0'
const illuminateStopColor3 = base.orange200; //'#FFCA79'
const illuminateStopColor4 = base.amber200; //'#FDCA44'
const illuminateStopColor5 = base.amber300; //'#FFB74D';
/**
* Box shadow glow colors
*/
const glowEraser = base.magenta200; //'#FFC2FD';
const glowHighlighter = base.amber100; //'#FFF3A8';
const glowLunchBreak = base.amber300; //'#FEC10B';
const glowHappyHour = base.orange400; //'#FD7E00';
const glowThumbtack = base.coral500; //'#FC5B05';
export const AIIngressButtonStencil = createStencil({
extends: buttonStencil,
base: { name: "35qqm3", styles: "box-sizing:border-box;--background-button-85bf0e:var(--cnvs-sys-color-bg-ai-strongest);border-radius:var(--cnvs-sys-shape-round);height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x1));transition:box-shadow 300ms ease-out, background 300ms ease-out;.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:disabled, &:disabled:active, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}" },
modifiers: {
variant: {
inverse: { name: "1mypq1", styles: "--background-button-85bf0e:var(--cnvs-sys-color-bg-default);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}&:is(:hover, .hover):not(:disabled, .disabled){.wd-icon-ai-ingress-button{linearGradient > stop:first-child{stop-color:var(--cnvs-base-palette-red-200);}linearGradient > stop:nth-child(2){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(3){stop-color:var(--cnvs-base-palette-orange-200);}linearGradient > stop:nth-child(4){stop-color:var(--cnvs-base-palette-amber-200);}linearGradient > stop:nth-child(5){stop-color:var(--cnvs-base-palette-amber-300);}}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:2px solid var(--cnvs-sys-color-border-ai) ;}" }
},
toggled: {
true: { name: "38wqbh", styles: "--background-button-85bf0e:var(--cnvs-sys-color-bg-default);transition:box-shadow 300ms ease-out, background 300ms ease-out;box-shadow:0px 0px 4.9px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 0.98px 0px var(--cnvs-base-palette-amber-100), 0px 0px 1.96px 0px var(--cnvs-base-palette-amber-300), 0px 0px 2.94px 0px var(--cnvs-base-palette-amber-300), 0px 0px 4.9px 0px var(--cnvs-base-palette-orange-400), 0px 0px 7.36px 0px var(--cnvs-base-palette-coral-500), 0px 0px 9.81px 0px var(--cnvs-base-palette-magenta-200), 0px 0px 12.26px 0px rgba(255, 194, 253, 0.50);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-ai);}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));border:1px solid var(--cnvs-sys-color-border-container) ;}" },
false: { name: "10zeha", styles: "transition:box-shadow 300ms ease-out, background 300ms ease-out;" }
}
},
compound: [
{
modifiers: { toggled: true, variant: 'inverse' },
styles: { name: "3zd0tl", styles: "--background-button-85bf0e:var(--cnvs-sys-color-bg-ai-strongest);.wd-icon-ai-ingress-button{.wd-icon-fill{transition:fill 300ms ease-out;}> linearGradient > stop{transition:300ms ease-out;stop-color:var(--cnvs-sys-color-fg-inverse);}}&:is(:focus-visible, .focus):not(:disabled, .disabled){box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-sys-color-fg-inverse);border:none;}" }
}
]
}, "a-i-ingress-button-ea1953");
export const AIIngressButton = createComponent('button')({
displayName: 'AIIngressButton',
Component: ({ toggled, variant, ...elemProps }, ref, Element) => {
const svgGradientId = useUniqueId();
return (_jsx(BaseButton, { ref: ref, as: Element, ...handleCsProp(elemProps, [
AIIngressButtonStencil({ toggled, variant }),
{
[systemIconStencil.vars.color]: `url(#${svgGradientId})`,
},
]), children: _jsx(BaseButton.Icon, { size: "large", icon: getAIIngressIcon(svgGradientId) }) }));
},
});