@workday/canvas-kit-preview-react/dist/es6/avatar/lib/BaseAvatar.js

Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.

import { jsx as _jsx } from "react/jsx-runtime";
import { createComponent } from '@workday/canvas-kit-react/common';
import { AvatarImage } from './AvatarImage';
import { AvatarName } from './AvatarName';
import { createStencil, cssVar, calc, handleCsProp } from '@workday/canvas-kit-styling';
import { system, base } from '@workday/canvas-tokens-web';
export const baseAvatarStencil = createStencil({
    vars: {
        backgroundColor: '',
        color: '',
        size: '',
    },
    base: { name: "46n8u2", styles: "box-sizing:border-box;border-radius:var(--cnvs-sys-shape-round);width:var(--size-base-avatar-b2787e, calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2)));height:var(--size-base-avatar-b2787e, calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2)));background-color:var(--backgroundColor-base-avatar-b2787e, var(--cnvs-base-palette-blue-300));color:var(--color-base-avatar-b2787e, var(--cnvs-base-palette-blue-800));display:flex;align-items:center;justify-content:center;overflow:hidden;border:none;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-medium);font-size:var(--cnvs-sys-font-size-body-medium);" },
    modifiers: {
        variant: {
            blue: { name: "3qsvv5", styles: "background-color:var(--backgroundColor-base-avatar-b2787e, var(--cnvs-base-palette-blue-300));color:var(--color-base-avatar-b2787e, var(--cnvs-base-palette-blue-800));" },
            amber: { name: "20v5zt", styles: "background-color:var(--backgroundColor-base-avatar-b2787e, var(--cnvs-base-palette-amber-200));color:var(--color-base-avatar-b2787e, var(--cnvs-base-palette-amber-700));" },
            teal: { name: "2pmib6", styles: "background-color:var(--backgroundColor-base-avatar-b2787e, var(--cnvs-base-palette-teal-300));color:var(--color-base-avatar-b2787e, var(--cnvs-base-palette-teal-800));" },
            purple: { name: "3ctno8", styles: "background-color:var(--backgroundColor-base-avatar-b2787e, var(--cnvs-base-palette-purple-300));color:var(--color-base-avatar-b2787e, var(--cnvs-base-palette-purple-800));" }
        },
        size: {
            extraExtraSmall: { name: "2xjyjr", styles: "--size-base-avatar-b2787e:var(--cnvs-sys-space-x6);font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-small);font-size:var(--cnvs-sys-font-size-subtext-small);letter-spacing:var(--cnvs-base-letter-spacing-50);" },
            extraSmall: { name: "3xj5db", styles: "--size-base-avatar-b2787e:var(--cnvs-sys-space-x8);font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);" },
            small: { name: "4awrre", styles: "--size-base-avatar-b2787e:var(--cnvs-sys-space-x10);font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-small);font-size:var(--cnvs-sys-font-size-body-small);letter-spacing:var(--cnvs-base-letter-spacing-200);" },
            medium: { name: "1cvglg", styles: "--size-base-avatar-b2787e:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-body-medium);font-size:var(--cnvs-sys-font-size-body-medium);" },
            large: { name: "2wcvrh", styles: "--size-base-avatar-b2787e:calc(var(--cnvs-sys-space-x16) + var(--cnvs-sys-space-x2));font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-heading-medium);font-size:var(--cnvs-sys-font-size-heading-medium);" },
            extraLarge: { name: "ww0me", styles: "--size-base-avatar-b2787e:calc(var(--cnvs-sys-space-x20) + var(--cnvs-sys-space-x4));font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-small);font-size:var(--cnvs-sys-font-size-title-small);" },
            extraExtraLarge: { name: "2f4xmk", styles: "--size-base-avatar-b2787e:calc(var(--cnvs-sys-space-x10) * 3);font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-title-medium);font-size:var(--cnvs-sys-font-size-title-medium);" }
        }
    }
}, "base-avatar-b2787e");
/**
 * JSDoc for Avatar. Will be part of the Component API docs
 */
export const BaseAvatar = createComponent('div')({
    displayName: 'BaseAvatar',
    subComponents: {
        Image: AvatarImage,
        Name: AvatarName,
    },
    Component: ({ variant, size, ...elemProps }, ref, Element) => {
        return _jsx(Element, { ref: ref, ...handleCsProp(elemProps, baseAvatarStencil({ variant, size })) });
    },
});