@workday/canvas-kit-react/dist/es6/avatar/lib/BaseAvatar.d.ts

The parent module that contains all Workday Canvas Kit React components

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