chat-components/src/avatar/styles.scss at 92bbe45c034a13139ad0cb77c9934b967f49d38f · cloudscape-design/chat-components · GitHub

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/
@use "../../node_modules/@cloudscape-design/design-tokens/index.scss" as cs;
@use "./mixins.scss" as mixins;
@use "../internal/shared" as shared;
@use "../internal/generated/custom-css-properties/index.scss" as custom-props;

.root {
  @include shared.styles-reset;
  align-items: center;
  display: flex;
  color: cs.$color-text-avatar;
  block-size: var(#{custom-props.$avatarSize});
  inline-size: var(#{custom-props.$avatarSize});
  justify-content: center;
  position: relative;
  @include mixins.border-radius-avatar;

  &.avatar-color-default {
    background-color: cs.$color-background-avatar-default;
  }

  &.avatar-color-gen-ai {
    background: cs.$color-background-avatar-gen-ai;
  }

  &.initials {
    font-family: cs.$font-family-base;
    font-size: cs.$font-size-body-s;
    line-height: cs.$line-height-body-s;
    font-weight: cs.$font-weight-heading-l;
  }

  &:focus {
    outline: none;
  }

  &:focus-visible {
    @include shared.focus-highlight(
      $gutter: calc(
          4px + var(#{custom-props.$avatarRootBorderWidth}, 0px) + var(#{custom-props.$avatarFocusRingBorderWidth}, 0px)
        ),
      $border-radius: var(#{custom-props.$avatarFocusRingBorderRadius}, 50%),
      $border-color: var(#{custom-props.$avatarFocusRingBorderColor}, cs.$color-border-item-focused),
      $border-width: var(#{custom-props.$avatarFocusRingBorderWidth}, 2px)
    );
  }

  &:has(.image) {
    background: transparent;
  }
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: inherit;
  inline-size: inherit;
  overflow: hidden;
  line-height: calc(0.8 * var(#{custom-props.$avatarSize}));

  .image {
    @include mixins.border-radius-avatar;
    block-size: var(#{custom-props.$avatarSize});
    inline-size: var(#{custom-props.$avatarSize});
    object-fit: cover;
  }
  .initials {
    font-size: clamp(
      cs.$font-size-body-s,
      calc(0.4 * var(#{custom-props.$avatarSize})),
      calc(0.4 * var(#{custom-props.$avatarSize}))
    );
  }
}

.tooltip {
  /* used in test-utils */
}