# All files / src/avatar styles.ts

100% Statements 61/61
100% Branches 2/2
100% Functions 2/2
100% Lines 61/61

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    621x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    6x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    4x
    4x
    4x
    4x
     import { cnb } from "cnbuilder";
    import { cssUtils, type ThemeColor } from "../cssUtils.js";
    import { bem } from "../utils/bem.js";

    const styles = bem("rmd-avatar");

    /** @remarks \@since 6.0.0 */
    export interface AvatarClassNameOptions {
      className?: string;

      /**
       * An optional color to apply to the avatar. This will apply a className of
       * `rmd-avatar--${color}`, so only the keys from the `$rmd-avatar-colors` Map
       * are supported by default. It is recommended to create custom colors using
       * the `rmd-avatar-theme-update-var` mixin with custom class names if the
       * default colors aren't extensive enough.
       *
       * @see {@link theme}
       * @defaultValue `""`
       */
      color?: string;

      /**
       * @defaultValue `"avatar"`
       */
      size?: "avatar" | "icon";

      /**
       * This can be used instead of {@link color} to set the background color to one of
       * the theme colors. This will also set the text color to either be `#000` or
       * `#fff` automatically to enforce the correct aspect ratio.
       */
      theme?: ThemeColor;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export function avatar(options: AvatarClassNameOptions): string {
      const { className, color = "", size, theme } = options;

      return cnb(
        styles({ [color]: color, icon: size === "icon" }),
        cssUtils({ backgroundColor: theme }),
        className
      );
    }

    /** @remarks \@since 6.0.0 */
    export interface AvatarImageClassNameOptions {
      className?: string;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export function avatarImage(options: AvatarImageClassNameOptions = {}): string {
      const { className } = options;

      return cnb(styles("image"), className);
    }