@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
202 lines • 7.71 kB
TypeScript
import { BaseButtonProps } from '@workday/canvas-kit-react/button';
export interface AIIngressButtonProps extends Omit<BaseButtonProps, 'size' | 'colors' | 'icon' | 'iconPosition' | 'shouldMirrorIcon' | 'shouldMirrorIconInRTL'> {
/**
* When true, indicates that the AI Ingress button is toggled.
*/
toggled?: boolean;
/**
* Used on dark backgrounds.
*/
variant?: 'inverse';
}
export declare const AIIngressButtonStencil: import("@workday/canvas-kit-styling").Stencil<{
variant: {
inverse: {
[x: string]: "--cnvs-sys-color-bg-default" | {
'.wd-icon-fill': {
transition: string;
};
'> linearGradient > stop': {
transition: string;
stopColor: "--cnvs-sys-color-fg-ai";
};
'.wd-icon-ai-ingress-button'?: undefined;
} | {
'.wd-icon-ai-ingress-button': {
'linearGradient > stop:first-child': {
stopColor: "--cnvs-base-palette-red-200";
};
'linearGradient > stop:nth-child(2)': {
stopColor: "--cnvs-base-palette-orange-200";
};
'linearGradient > stop:nth-child(3)': {
stopColor: "--cnvs-base-palette-orange-200";
};
'linearGradient > stop:nth-child(4)': {
stopColor: "--cnvs-base-palette-amber-200";
};
'linearGradient > stop:nth-child(5)': {
stopColor: "--cnvs-base-palette-amber-300";
};
};
'.wd-icon-fill'?: undefined;
'> linearGradient > stop'?: undefined;
} | {
border: string;
boxShadow: string;
'.wd-icon-fill'?: undefined;
'> linearGradient > stop'?: undefined;
'.wd-icon-ai-ingress-button'?: undefined;
};
'.wd-icon-ai-ingress-button': {
'.wd-icon-fill': {
transition: string;
};
'> linearGradient > stop': {
transition: string;
stopColor: "--cnvs-sys-color-fg-ai";
};
};
'&:is(:hover, .hover):not(:disabled, .disabled)': {
'.wd-icon-ai-ingress-button': {
'linearGradient > stop:first-child': {
stopColor: "--cnvs-base-palette-red-200";
};
'linearGradient > stop:nth-child(2)': {
stopColor: "--cnvs-base-palette-orange-200";
};
'linearGradient > stop:nth-child(3)': {
stopColor: "--cnvs-base-palette-orange-200";
};
'linearGradient > stop:nth-child(4)': {
stopColor: "--cnvs-base-palette-amber-200";
};
'linearGradient > stop:nth-child(5)': {
stopColor: "--cnvs-base-palette-amber-300";
};
};
};
'&:is(:focus-visible, .focus):not(:disabled, .disabled)': {
border: string;
boxShadow: string;
};
};
};
toggled: {
true: {
[x: string]: string | {
'.wd-icon-fill': {
transition: string;
};
'> linearGradient > stop': {
transition: string;
stopColor: "--cnvs-sys-color-fg-ai";
};
transition?: undefined;
stopColor?: undefined;
} | {
transition: string;
stopColor: "--cnvs-sys-color-fg-ai";
'.wd-icon-fill'?: undefined;
'> linearGradient > stop'?: undefined;
} | {
border: string;
boxShadow: string;
'.wd-icon-fill'?: undefined;
'> linearGradient > stop'?: undefined;
transition?: undefined;
stopColor?: undefined;
};
transition: string;
boxShadow: string;
'.wd-icon-ai-ingress-button': {
'.wd-icon-fill': {
transition: string;
};
'> linearGradient > stop': {
transition: string;
stopColor: "--cnvs-sys-color-fg-ai";
};
};
'> linearGradient > stop': {
transition: string;
stopColor: "--cnvs-sys-color-fg-ai";
};
'&:is(:focus-visible, .focus):not(:disabled, .disabled)': {
border: string;
boxShadow: string;
};
};
false: {
transition: string;
};
};
}, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
size: {
large: {
fontWeight: "--cnvs-sys-font-weight-bold";
height: string;
paddingInline: "--cnvs-sys-space-x8";
minWidth: string;
fontFamily: "--cnvs-sys-font-family-default";
lineHeight: "--cnvs-sys-line-height-body-small";
fontSize: "--cnvs-sys-font-size-body-small";
letterSpacing: "--cnvs-base-letter-spacing-200";
};
medium: {
fontWeight: "--cnvs-sys-font-weight-bold";
minWidth: string;
paddingInline: "--cnvs-sys-space-x6";
height: "--cnvs-sys-space-x10";
fontFamily: "--cnvs-sys-font-family-default";
lineHeight: "--cnvs-sys-line-height-subtext-large";
fontSize: "--cnvs-sys-font-size-subtext-large";
letterSpacing: "--cnvs-base-letter-spacing-150";
};
small: {
fontWeight: "--cnvs-sys-font-weight-bold";
height: "--cnvs-sys-space-x8";
minWidth: "--cnvs-sys-space-x20";
paddingInline: "--cnvs-sys-space-x4";
gap: "--cnvs-sys-space-x1";
fontFamily: "--cnvs-sys-font-family-default";
lineHeight: "--cnvs-sys-line-height-subtext-large";
fontSize: "--cnvs-sys-font-size-subtext-large";
letterSpacing: "--cnvs-base-letter-spacing-150";
};
extraSmall: {
fontWeight: "--cnvs-sys-font-weight-bold";
height: "--cnvs-sys-space-x6";
minWidth: string;
paddingInline: "--cnvs-sys-space-x3";
gap: "--cnvs-sys-space-x1";
fontFamily: "--cnvs-sys-font-family-default";
lineHeight: "--cnvs-sys-line-height-subtext-medium";
fontSize: "--cnvs-sys-font-size-subtext-medium";
letterSpacing: "--cnvs-base-letter-spacing-100";
};
};
grow: {
true: {
width: string;
maxWidth: string;
};
};
iconPosition: {
only: {
padding: "--cnvs-sys-space-zero";
};
start: {};
end: {};
};
}, {}, {
background: string;
border: string;
boxShadowInner: string;
boxShadowOuter: string;
label: string;
opacity: string;
borderRadius: string;
}, never, never>, never>;
export declare const AIIngressButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", AIIngressButtonProps>;
//# sourceMappingURL=AIIngressButton.d.ts.map