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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
/*!
* future-css -- https://github.com/estith/future-css
* A styling system for multi-language, multi-platform systems
*
* Regenerate with: npm run build
* This file is generated; edit the sources in src/ instead.
*/
/*!
* future-css -- avatar
*
* <span class="fc-avatar">
* <img class="fc-avatar__image" src="…" alt="Ada Lovelace">
* </span>
* <span class="fc-avatar" role="img" aria-label="Ada Lovelace">AL</span>
*
* An image with a name, or initials with a name. When the avatar sits next to
* the visible name -- as it does in a chat message header -- it is decoration
* and takes `alt=""` / `aria-hidden="true"` instead, so the name is not read
* twice.
*
* Square avatars (`--square`) are for non-people: an agent, a tool, an
* organisation. The shape difference is a convention users already read in
* chat products, and it lets "who said this" be parsed at a glance.
*/
@layer fc.components {
.fc-avatar {
--fc-avatar-size: 2rem;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
inline-size: var(--fc-avatar-size);
block-size: var(--fc-avatar-size);
background-color: var(--fc-color-accent-bg-subtle);
color: var(--fc-color-accent-text);
border-radius: var(--fc-radius-full);
overflow: hidden;
font-size: calc(var(--fc-avatar-size) * 0.4);
font-weight: var(--fc-font-weight-semibold);
line-height: 1;
text-transform: uppercase;
user-select: none;
}
.fc-avatar__image {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.fc-avatar--xs {
--fc-avatar-size: 1.25rem;
}
.fc-avatar--sm {
--fc-avatar-size: 1.5rem;
}
.fc-avatar--lg {
--fc-avatar-size: 2.75rem;
}
.fc-avatar--xl {
--fc-avatar-size: 4rem;
}
.fc-avatar--square {
border-radius: var(--fc-radius-lg);
}
.fc-avatar--neutral {
background-color: var(--fc-color-bg-muted);
color: var(--fc-color-text-muted);
}
/*
* A stack of avatars ("3 people are here"). The ring is an outline in the
* surface colour, so each avatar separates from the one it overlaps without
* an extra element.
*/
.fc-avatar-group {
display: inline-flex;
align-items: center;
}
.fc-avatar-group > * {
outline: var(--fc-border-width-thick) solid var(--fc-color-bg-surface);
}
.fc-avatar-group > * + * {
margin-inline-start: calc(var(--fc-avatar-size, 2rem) * -0.2);
}
@media (forced-colors: active) {
.fc-avatar {
border: var(--fc-border-width-thin) solid CanvasText;
}
}
}