Skip to content

Commit e693f80

Browse files
francisrupertfrancisrupert
authored
fix(avatar): DP-200415 prevent presence indicators from clipping avatar content (#1387)
1 parent 5b1400a commit e693f80

2 files changed

Lines changed: 147 additions & 55 deletions

File tree

‎apps/dialtone-documentation/docs/scratch.md‎

Lines changed: 123 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,129 @@ layout: Blank
8989
</dt-stack>
9090
<!-- ============================================================ -->
9191

92+
<dt-stack gap="100">
93+
<dt-stack direction="row" align="start" gap="100">
94+
<dt-stack align="center" gap="50">
95+
<dt-text variant="body-xs" size="50">200</dt-text>
96+
<dt-avatar :size="200" presence="away" image-src="/assets/images/person.png" image-alt="Person Avatar" />
97+
</dt-stack>
98+
<dt-stack align="center" gap="50">
99+
<dt-text variant="body-xs" size="50">200</dt-text>
100+
<dt-avatar :size="200" presence="away" seed="user-2" full-name="Marshall Mathers" />
101+
</dt-stack>
102+
<dt-stack align="center" gap="50">
103+
<dt-text variant="body-xs" size="50">250</dt-text>
104+
<dt-avatar :size="250" presence="away" image-src="/assets/images/person.png" image-alt="Person Avatar" />
105+
</dt-stack>
106+
<dt-stack align="center" gap="50">
107+
<dt-text variant="body-xs" size="50">250</dt-text>
108+
<dt-avatar :size="250" presence="away" seed="user-2" full-name="Marshall Mathers" />
109+
</dt-stack>
110+
<dt-stack align="center" gap="50">
111+
<dt-text variant="body-xs" size="50">300</dt-text>
112+
<dt-avatar :size="300" presence="busy" image-src="/assets/images/person.png" image-alt="Person Avatar" />
113+
</dt-stack>
114+
<dt-stack align="center" gap="50">
115+
<dt-text variant="body-xs" size="50">300</dt-text>
116+
<dt-avatar :size="300" presence="busy" seed="user-3" full-name="Marshall Mathers" />
117+
</dt-stack>
118+
<dt-stack align="center" gap="50">
119+
<dt-text variant="body-xs" size="50">400</dt-text>
120+
<dt-avatar :size="400" presence="dnd" image-src="/assets/images/person.png" image-alt="Person Avatar" />
121+
</dt-stack>
122+
<dt-stack align="center" gap="50">
123+
<dt-text variant="body-xs" size="50">400</dt-text>
124+
<dt-avatar :size="400" presence="dnd" seed="user-4" full-name="Marshall Mathers" />
125+
</dt-stack>
126+
<dt-stack align="center" gap="50">
127+
<dt-text variant="body-xs" size="50">500</dt-text>
128+
<dt-avatar :size="500" presence="offline" image-src="/assets/images/person.png" image-alt="Person Avatar" />
129+
</dt-stack>
130+
<dt-stack align="center" gap="50">
131+
<dt-text variant="body-xs" size="50">500</dt-text>
132+
<dt-avatar :size="500" presence="offline" seed="user-5" full-name="Marshall Mathers" />
133+
</dt-stack>
134+
</dt-stack>
135+
</dt-stack>
136+
<dt-stack gap="200">
137+
<dt-stack gap="300" direction="row" align="start">
138+
<dt-stack direction="row" align="center" gap="100">
139+
<dt-presence presence="active" />
140+
<dt-presence presence="busy" />
141+
<dt-presence presence="away" />
142+
<dt-presence presence="offline" />
143+
</dt-stack>
144+
<dt-stack direction="row" align="center" gap="100">
145+
<dt-avatar :size="200" presence="active" image-src="/assets/images/person.png" image-alt="Person Avatar" />
146+
<dt-avatar :size="200" presence="busy" image-src="/assets/images/person.png" image-alt="Person Avatar" />
147+
<dt-avatar :size="200" presence="away" image-src="/assets/images/person.png" image-alt="Person Avatar" />
148+
<dt-avatar :size="200" presence="offline" image-src="/assets/images/person.png" image-alt="Person Avatar" />
149+
</dt-stack>
150+
<dt-stack direction="row" align="center" gap="100">
151+
<dt-avatar :size="250" presence="active" image-src="/assets/images/person.png" image-alt="Person Avatar" />
152+
<dt-avatar :size="250" presence="busy" image-src="/assets/images/person.png" image-alt="Person Avatar" />
153+
<dt-avatar :size="250" presence="away" image-src="/assets/images/person.png" image-alt="Person Avatar" />
154+
<dt-avatar :size="250" presence="offline" image-src="/assets/images/person.png" image-alt="Person Avatar" />
155+
</dt-stack>
156+
<dt-stack direction="row" align="center" gap="100">
157+
<dt-avatar :size="300" presence="active" image-src="/assets/images/person.png" image-alt="Person Avatar" />
158+
<dt-avatar :size="300" presence="busy" image-src="/assets/images/person.png" image-alt="Person Avatar" />
159+
<dt-avatar :size="300" presence="away" image-src="/assets/images/person.png" image-alt="Person Avatar" />
160+
<dt-avatar :size="300" presence="offline" image-src="/assets/images/person.png" image-alt="Person Avatar" />
161+
</dt-stack>
162+
<dt-stack direction="row" align="center" gap="100">
163+
<dt-avatar :size="400" presence="active" image-src="/assets/images/person.png" image-alt="Person Avatar" />
164+
<dt-avatar :size="400" presence="busy" image-src="/assets/images/person.png" image-alt="Person Avatar" />
165+
<dt-avatar :size="400" presence="away" image-src="/assets/images/person.png" image-alt="Person Avatar" />
166+
<dt-avatar :size="400" presence="offline" image-src="/assets/images/person.png" image-alt="Person Avatar" />
167+
</dt-stack>
168+
<dt-stack direction="row" align="center" gap="100">
169+
<dt-avatar :size="500" presence="active" image-src="/assets/images/person.png" image-alt="Person Avatar" />
170+
<dt-avatar :size="500" presence="busy" image-src="/assets/images/person.png" image-alt="Person Avatar" />
171+
<dt-avatar :size="500" presence="away" image-src="/assets/images/person.png" image-alt="Person Avatar" />
172+
<dt-avatar :size="500" presence="offline" image-src="/assets/images/person.png" image-alt="Person Avatar" />
173+
</dt-stack>
174+
</dt-stack>
175+
<dt-stack gap="300" direction="row" align="start">
176+
<dt-stack direction="row" align="center" gap="100">
177+
<dt-presence presence="active" />
178+
<dt-presence presence="busy" />
179+
<dt-presence presence="away" />
180+
<dt-presence presence="offline" />
181+
</dt-stack>
182+
<dt-stack direction="row" align="center" gap="100">
183+
<dt-avatar :size="200" presence="active" full-name="Layla El-Sayed" />
184+
<dt-avatar :size="200" presence="busy" full-name="Luca Ferrari" />
185+
<dt-avatar :size="200" presence="away" full-name="Nia Griffiths" />
186+
<dt-avatar :size="200" presence="offline" full-name="Hana Horvat" />
187+
</dt-stack>
188+
<dt-stack direction="row" align="center" gap="100">
189+
<dt-avatar :size="250" presence="active" full-name="Layla El-Sayed" />
190+
<dt-avatar :size="250" presence="busy" full-name="Luca Ferrari" />
191+
<dt-avatar :size="250" presence="away" full-name="Nia Griffiths" />
192+
<dt-avatar :size="250" presence="offline" full-name="Hana Horvat" />
193+
</dt-stack>
194+
<dt-stack direction="row" align="center" gap="100">
195+
<dt-avatar :size="300" presence="active" full-name="Arjun Iyer" />
196+
<dt-avatar :size="300" presence="busy" full-name="Min-jun Jeong" />
197+
<dt-avatar :size="300" presence="away" full-name="Zofia Kowalska" />
198+
<dt-avatar :size="300" presence="offline" full-name="Mateo López" />
199+
</dt-stack>
200+
<dt-stack direction="row" align="center" gap="100">
201+
<dt-avatar :size="400" presence="active" full-name="Zanele Mbeki" />
202+
<dt-avatar :size="400" presence="busy" full-name="Chidi Nwosu" />
203+
<dt-avatar :size="400" presence="away" full-name="Aoife O'Sullivan" />
204+
<dt-avatar :size="400" presence="offline" full-name="Inês Pereira" />
205+
</dt-stack>
206+
<dt-stack direction="row" align="center" gap="100">
207+
<dt-avatar :size="500" presence="active" full-name="Lian Qiao" />
208+
<dt-avatar :size="500" presence="busy" full-name="Priya Raman" />
209+
<dt-avatar :size="500" presence="away" full-name="Leila Saleh" />
210+
<dt-avatar :size="500" presence="offline" full-name="Sione Tui" />
211+
</dt-stack>
212+
</dt-stack>
213+
</dt-stack>
214+
92215
<p>
93216
A sentence goes here
94217
<dt-chip interactive size="200"> <template #icon> <dt-icon name="box-select" size="200" /> </template> Chip </dt-chip>
@@ -260,47 +383,6 @@ layout: Blank
260383
</dt-stack>
261384
</dt-box>
262385
</dt-stack>
263-
<!-- ============================================================ -->
264-
<dt-box padding="300">
265-
<dt-stack gap="300" direction="row">
266-
<dt-stack direction="row" align="center" gap="100">
267-
<dt-presence presence="active" />
268-
<dt-presence presence="busy" />
269-
<dt-presence presence="away" />
270-
<dt-presence presence="offline" />
271-
</dt-stack>
272-
<dt-stack direction="row" align="center" gap="100">
273-
<dt-avatar :size="100" presence="active" image-src="/assets/images/person.png" image-alt="Person Avatar" />
274-
<dt-avatar :size="100" presence="busy" image-src="/assets/images/person.png" image-alt="Person Avatar" />
275-
<dt-avatar :size="100" presence="away" image-src="/assets/images/person.png" image-alt="Person Avatar" />
276-
<dt-avatar :size="100" presence="offline" image-src="/assets/images/person.png" image-alt="Person Avatar" />
277-
</dt-stack>
278-
<dt-stack direction="row" align="center" gap="100">
279-
<dt-avatar :size="200" presence="active" image-src="/assets/images/person.png" image-alt="Person Avatar" />
280-
<dt-avatar :size="200" presence="busy" image-src="/assets/images/person.png" image-alt="Person Avatar" />
281-
<dt-avatar :size="200" presence="away" image-src="/assets/images/person.png" image-alt="Person Avatar" />
282-
<dt-avatar :size="200" presence="offline" image-src="/assets/images/person.png" image-alt="Person Avatar" />
283-
</dt-stack>
284-
<dt-stack direction="row" align="center" gap="100">
285-
<dt-avatar :size="300" presence="active" image-src="/assets/images/person.png" image-alt="Person Avatar" />
286-
<dt-avatar :size="300" presence="busy" image-src="/assets/images/person.png" image-alt="Person Avatar" />
287-
<dt-avatar :size="300" presence="away" image-src="/assets/images/person.png" image-alt="Person Avatar" />
288-
<dt-avatar :size="300" presence="offline" image-src="/assets/images/person.png" image-alt="Person Avatar" />
289-
</dt-stack>
290-
<dt-stack direction="row" align="center" gap="100">
291-
<dt-avatar :size="400" presence="active" image-src="/assets/images/person.png" image-alt="Person Avatar" />
292-
<dt-avatar :size="400" presence="busy" image-src="/assets/images/person.png" image-alt="Person Avatar" />
293-
<dt-avatar :size="400" presence="away" image-src="/assets/images/person.png" image-alt="Person Avatar" />
294-
<dt-avatar :size="400" presence="offline" image-src="/assets/images/person.png" image-alt="Person Avatar" />
295-
</dt-stack>
296-
<dt-stack direction="row" align="center" gap="100">
297-
<dt-avatar :size="500" presence="active" image-src="/assets/images/person.png" image-alt="Person Avatar" />
298-
<dt-avatar :size="500" presence="busy" image-src="/assets/images/person.png" image-alt="Person Avatar" />
299-
<dt-avatar :size="500" presence="away" image-src="/assets/images/person.png" image-alt="Person Avatar" />
300-
<dt-avatar :size="500" presence="offline" image-src="/assets/images/person.png" image-alt="Person Avatar" />
301-
</dt-stack>
302-
</dt-stack>
303-
</dt-box>
304386

305387
<!-- ============================================================ -->
306388
<!-- DtBox V1 Demos -->

‎packages/dialtone-css/lib/build/less/components/avatar.less‎

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@
2929
--avatar-border-radius: calc(var(--avatar-size-shape) * 0.125);
3030
--avatar-presence-shape: calc(var(--avatar-size-shape) * 0.375);
3131
--avatar-presence-border-radius: calc(var(--avatar-border-radius) * 0.625);
32-
--avatar-presence-position-right: var(--dt-spacing-0);
33-
--avatar-presence-position-bottom: var(--dt-spacing-0);
32+
--avatar-presence-position-right: var(--dt-spacing-25-negative);
33+
--avatar-presence-position-bottom: var(--dt-spacing-25-negative);
3434
--avatar-icon-size: calc(var(--avatar-size-shape) * 0.625);
3535
--avatar-count-color-shadow: var(--dt-shell-color-surface-default);
3636

@@ -191,10 +191,10 @@
191191
position: absolute;
192192
background-color: var(--dt-color-neutral-white);
193193
border-radius: var(--avatar-border-radius);
194-
opacity: 0.5;
194+
opacity: var(--dt-opacity-700);
195195
content: '';
196196
pointer-events: none;
197-
inset: 0;
197+
inset: var(--dt-spacing-0);
198198
}
199199
}
200200
}
@@ -304,7 +304,7 @@
304304
&--clickable {
305305
--avatar-color-border: var(--dt-color-neutral-transparent);
306306

307-
padding: 0;
307+
padding: var(--dt-spacing-0);
308308
background-color: var(--dt-color-neutral-transparent);
309309
border: var(--dt-size-border-0) solid var(--avatar-color-border);
310310
border-radius: var(--avatar-border-radius);
@@ -348,52 +348,62 @@
348348
&--xs,
349349
&--size-100 {
350350
--avatar-size-shape: calc(var(--dt-layout-100) * 0.25);
351+
--avatar-presence-position-right: var(--dt-spacing-0);
352+
--avatar-presence-position-bottom: var(--dt-spacing-0);
351353
--avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M12.8 0c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C16 1.52 16 2.08 16 3.2v5.3h-3.5c-1.4 0-2.1 0-2.635.272a2.5 2.5 0 0 0-1.093 1.093C8.5 10.4 8.5 11.1 8.5 12.5V16H3.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C0 14.48 0 13.92 0 12.8V3.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C1.52 0 2.08 0 3.2 0z'/%3E%3C/svg%3E");
352354
}
353355

354356
&--size-150 {
355357
--avatar-size-shape: calc(var(--dt-layout-100) * 0.3125);
356358
--avatar-size-text: var(--dt-font-size-100);
357-
--avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M16 0c1.4 0 2.1 0 2.635.272a2.5 2.5 0 0 1 1.092 1.093C20 1.9 20 2.6 20 4v6.63h-4.37c-1.75 0-2.626 0-3.294.34-.588.3-1.066.778-1.365 1.366-.34.668-.341 1.544-.341 3.294V20H4c-1.4 0-2.1 0-2.635-.273a2.5 2.5 0 0 1-1.093-1.092C0 18.1 0 17.4 0 16V4c0-1.4 0-2.1.272-2.635A2.5 2.5 0 0 1 1.365.272C1.9 0 2.6 0 4 0z'/%3E%3C/svg%3E");
359+
--avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M17.5 0C18.8807 0 20 1.11929 20 2.5V12.5908H14.5C13.3956 12.5908 12.5003 13.4855 12.5 14.5898V20H2.5C1.11929 20 0 18.8807 0 17.5V2.5C0 1.11929 1.11929 0 2.5 0H17.5Z'/%3E%3C/svg%3E");
358360
}
359361

360362
&--sm,
361363
&--size-200 {
362364
--avatar-size-shape: calc(var(--dt-layout-100) * 0.375);
363365
--avatar-size-text: var(--dt-font-size-100);
364-
--avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M19.2 0c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.31 1.31C24 2.28 24 3.12 24 4.8v7.95h-5.25c-2.1 0-3.15 0-3.952.41a3.74 3.74 0 0 0-1.639 1.638c-.409.802-.409 1.852-.409 3.952V24H4.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.31-1.31C0 21.72 0 20.88 0 19.2V4.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.31-1.31C2.28 0 3.12 0 4.8 0z'/%3E%3C/svg%3E");
366+
--avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M21 0C22.65685 0 24 1.34315 24 3V15H17.4C16.07452 15 15 16.07452 15 17.4V24H3C1.34315 24 0 22.65685 0 21V3C0 1.34315 1.34315 0 3 0H21Z'/%3E%3C/svg%3E");
365367
}
366368

367369
&--size-250 {
368370
--avatar-size-shape: calc(var(--dt-layout-100) * 0.4375);
369-
--avatar-size-text: var(--dt-font-size-200);
370-
--avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath fill='white' d='M22.4 0c1.96 0 2.94 0 3.689.382a3.5 3.5 0 0 1 1.53 1.53C27.998 2.66 28 3.64 28 5.6v9.28h-6.12c-2.45 0-3.676 0-4.611.476a4.38 4.38 0 0 0-1.913 1.913c-.476.935-.476 2.16-.476 4.61V28H5.6c-1.96 0-2.94 0-3.689-.382a3.5 3.5 0 0 1-1.53-1.53C.002 25.34 0 24.36 0 22.4V5.6c0-1.96 0-2.94.382-3.69A3.5 3.5 0 0 1 1.912.38C2.66.002 3.64 0 5.6 0z'/%3E%3C/svg%3E");
371+
--avatar-size-text: var(--dt-font-size-125);
372+
--avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath fill='white' d='M24.5 0C26.433 0 28 1.567 28 3.5V17.5H20.3C18.7536 17.5 17.5 18.7536 17.5 20.3V28H3.5C1.567 28 0 26.433 0 24.5V3.5C0 1.567 1.567 0 3.5 0H24.5Z'/%3E%3C/svg%3E");
371373
}
372374

373375
&--md,
374376
&--size-300 {
375377
--avatar-size-text: var(--dt-font-size-200);
376-
--avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='white' d='M25.6 0c2.24 0 3.36 0 4.216.436a4 4 0 0 1 1.749 1.748C32 3.039 32 4.16 32 6.4V17h-7c-2.8 0-4.2 0-5.27.545a5 5 0 0 0-2.185 2.185C17 20.8 17 22.2 17 25v7H6.4c-2.24 0-3.36 0-4.216-.436a4 4 0 0 1-1.748-1.748C0 28.961 0 27.84 0 25.6V6.4c0-2.24 0-3.36.436-4.216A4 4 0 0 1 2.184.436C3.039 0 4.16 0 6.4 0z'/%3E%3C/svg%3E");
378+
--avatar-presence-shape: calc(var(--avatar-size-shape) * 0.328);
379+
--avatar-presence-position-right: var(--dt-spacing-1-negative);
380+
--avatar-presence-position-bottom: var(--dt-spacing-1-negative);
381+
--avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='white' d='M28 0C30.2091 0 32 1.79086 32 4V20.5H23.7C21.9327 20.5 20.5 21.9327 20.5 23.7V32H4C1.79086 32 0 30.2091 0 28V4C0 1.79086 1.79086 0 4 0H28Z'/%3E%3C/svg%3E");
377382
}
378383

379384
&--size-400 {
380385
--avatar-size-shape: calc(var(--dt-layout-100) * 0.625);
381-
--avatar-size-text: var(--dt-font-size-200);
382-
--avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='white' d='M32 0c2.8 0 4.2 0 5.27.545a5 5 0 0 1 2.185 2.185C40 3.8 40 5.2 40 8v13.25h-8.75c-3.5 0-5.25 0-6.588.682a6.25 6.25 0 0 0-2.73 2.73C21.25 26 21.25 27.75 21.25 31.25V40H8c-2.8 0-4.2 0-5.27-.545A5 5 0 0 1 .545 37.27C0 36.2 0 34.8 0 32V8c0-2.8 0-4.2.545-5.27A5 5 0 0 1 2.73.545C3.8 0 5.2 0 8 0z'/%3E%3C/svg%3E");
386+
--avatar-presence-shape: calc(var(--avatar-size-shape) * 0.32);
387+
--avatar-size-text: var(--dt-font-size-250);
388+
--avatar-presence-position-right: var(--dt-spacing-0);
389+
--avatar-presence-position-bottom: var(--dt-spacing-0);
390+
--avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='white' d='M35 0C37.7614 0 40 2.23858 40 5V25.4986H29C26.7909 25.4986 25 27.2895 25 29.4986V40H5C2.23858 40 0 37.7614 0 35V5C0 2.23858 2.23858 0 5 0H35Z'/%3E%3C/svg%3E");
383391
}
384392

385393
&--lg,
386394
&--size-500 {
387395
--avatar-size-shape: calc(var(--dt-layout-100) * 0.75);
396+
--avatar-presence-shape: calc(var(--avatar-size-shape) * 0.32);
388397
--avatar-size-text: var(--dt-font-size-300);
389-
--avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='white' d='M38.4 0c3.36 0 5.04 0 6.324.654a6 6 0 0 1 2.622 2.622C48 4.56 48 6.24 48 9.6v15.9H37.5c-4.2 0-6.3 0-7.905.817a7.5 7.5 0 0 0-3.278 3.278C25.5 31.199 25.5 33.3 25.5 37.5V48H9.6c-3.36 0-5.04 0-6.324-.654a6 6 0 0 1-2.622-2.622C0 43.44 0 41.76 0 38.4V9.6c0-3.36 0-5.04.654-6.324A6 6 0 0 1 3.276.654C4.56 0 6.24 0 9.6 0z'/%3E%3C/svg%3E");
398+
--avatar-presence-position-right: var(--dt-spacing-0);
399+
--avatar-presence-position-bottom: var(--dt-spacing-0);
400+
--avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='white' d='M42 0C45.3137 0 48 2.68629 48 6V30.5377H34.8C32.149 30.5377 30 32.6867 30 35.3377V48H6C2.68629 48 0 45.3137 0 42V6C0 2.68629 2.68629 0 6 0H42Z'/%3E%3C/svg%3E");
390401
}
391402

392403
&--xl,
393404
&--size-600 {
394405
--avatar-size-shape: var(--dt-layout-100);
395406
--avatar-size-text: var(--dt-font-size-350);
396-
--avatar-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath fill='white' d='M51.2 0c4.48 0 6.72 0 8.432.872a8 8 0 0 1 3.496 3.496C64 6.08 64 8.32 64 12.8V34H50c-5.6 0-8.4 0-10.54 1.09a10 10 0 0 0-4.37 4.37C34 41.6 34 44.4 34 50v14H12.8c-4.48 0-6.72 0-8.432-.872a8 8 0 0 1-3.496-3.496C0 57.92 0 55.68 0 51.2V12.8c0-4.48 0-6.72.872-8.432A8 8 0 0 1 4.368.872C6.08 0 8.32 0 12.8 0z'/%3E%3C/svg%3E");
397407
}
398408

399409
&--size-700 {

0 commit comments

Comments
 (0)