@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
160 lines • 9.79 kB
TypeScript
import React from 'react';
import { CSProps } from '@workday/canvas-kit-styling';
export interface BaseAvatarProps extends CSProps {
/**
* Children of the BaseAvatar.
*/
children?: React.ReactNode;
/**
* The variant of the Avatar.
* @default "blue"
*/
variant?: 'blue' | 'amber' | 'teal' | 'purple' | 'magenta' | 'green';
/**
* The size of the Avatar.
* `extraExtraSmall` is 24px x 24px
* `extraSmall` is 32px x 32px
* `small` is 40px x 40px
* `medium` is 48px x 48px
* `large` is 72px x 72px
* `extraLarge` is 96px x 96px
* `extraExtraLarge` is 120px x 120px
* @default "medium"
*/
size?: 'extraExtraSmall' | 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'extraExtraLarge' | (string & {});
}
export declare const baseAvatarStencil: import("@workday/canvas-kit-styling").Stencil<{
variant: {
blue: ({ backgroundColor, color }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
backgroundColor: `var(--${string}, var(--cnvs-base-palette-blue-600, oklch(0.5198 0.1782 256.11 / 1)))`;
color: `var(--${string}, var(--cnvs-sys-color-fg-inverse))`;
};
amber: ({ backgroundColor, color }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
backgroundColor: `var(--${string}, var(--cnvs-base-palette-amber-300, oklch(0.8432 0.1713 85.24 / 1)))`;
color: `var(--${string}, var(--cnvs-base-palette-amber-800, oklch(0.4143 0.1245 42.21 / 1)))`;
};
teal: ({ backgroundColor, color }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
backgroundColor: `var(--${string}, var(--cnvs-base-palette-teal-300, oklch(0.7836 0.0874 204.93 / 1)))`;
color: `var(--${string}, var(--cnvs-base-palette-teal-800, oklch(0.3982 0.0687 209.08 / 1)))`;
};
purple: ({ backgroundColor, color }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
backgroundColor: `var(--${string}, var(--cnvs-base-palette-purple-600, oklch(0.5177 0.162 313.92 / 1)))`;
color: `var(--${string}, var(--cnvs-sys-color-fg-inverse))`;
};
magenta: ({ backgroundColor, color }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
backgroundColor: `var(--${string}, var(--cnvs-base-palette-magenta-600, oklch(0.534 0.183 344.19 / 1)))`;
color: `var(--${string}, var(--cnvs-sys-color-fg-inverse))`;
};
green: ({ backgroundColor, color }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
backgroundColor: `var(--${string}, var(--cnvs-base-palette-green-600, oklch(0.5069 0.1569 145.56 / 1)))`;
color: `var(--${string}, var(--cnvs-sys-color-fg-inverse))`;
};
};
size: {
extraExtraSmall: ({ size }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
[x: string]: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))" | "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))" | "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))" | "var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-sm, var(--cnvs-sys-line-height-subtext-small, 1rem))";
fontSize: "var(--cnvs-sys-font-size-subtext-sm, var(--cnvs-sys-font-size-subtext-small, 0.625rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-sm, var(--cnvs-sys-type-letter-spacing-subtext-small))";
};
extraSmall: ({ size }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
[x: string]: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))" | "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))" | "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))" | "var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem))";
lineHeight: "var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem))";
fontSize: "var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium))";
};
small: ({ size }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
[x: string]: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))" | "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))" | "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))" | "var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem))";
lineHeight: "var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem))";
fontSize: "var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem))";
letterSpacing: "var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small))";
};
medium: ({ size }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
[x: string]: "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))" | "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))" | "var(--cnvs-base-size-600, 3rem)";
lineHeight: "var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem))";
fontSize: "var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem))";
};
large: ({ size }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
[x: string]: "--cnvs-sys-font-weight-bold" | "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))" | "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))" | "var(--cnvs-base-size-900, 4.5rem)";
fontWeight: "--cnvs-sys-font-weight-bold";
lineHeight: "var(--cnvs-sys-line-height-heading-md, var(--cnvs-sys-line-height-heading-medium, 2.25rem))";
fontSize: "var(--cnvs-sys-font-size-heading-md, var(--cnvs-sys-font-size-heading-medium, 1.75rem))";
};
extraLarge: ({ size }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
[x: string]: "--cnvs-sys-font-weight-bold" | "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))" | "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))" | "var(--cnvs-base-size-1200, 6rem)";
fontWeight: "--cnvs-sys-font-weight-bold";
lineHeight: "var(--cnvs-sys-line-height-title-sm, var(--cnvs-sys-line-height-title-small, 3rem))";
fontSize: "var(--cnvs-sys-font-size-title-sm, var(--cnvs-sys-font-size-title-small, 2.5rem))";
};
extraExtraLarge: ({ size }: {
backgroundColor: `--${string}`;
color: `--${string}`;
size: `--${string}`;
} & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
[x: string]: string;
fontWeight: "--cnvs-sys-font-weight-bold";
lineHeight: "var(--cnvs-sys-line-height-title-md, var(--cnvs-sys-line-height-title-medium, 3.5rem))";
fontSize: "var(--cnvs-sys-font-size-title-md, var(--cnvs-sys-font-size-title-medium, 3rem))";
};
};
}, {}, {
backgroundColor: string;
color: string;
size: string;
}, never, never>;
/**
* JSDoc for Avatar. Will be part of the Component API docs
*/
export declare const BaseAvatar: import("@workday/canvas-kit-react/common").ElementComponent<"div", BaseAvatarProps> & {
Image: import("@workday/canvas-kit-react/common").ElementComponent<"img", import("./AvatarImage").AvatarImageProps>;
Name: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./AvatarName").AvatarNameProps>;
};
//# sourceMappingURL=BaseAvatar.d.ts.map