@patternfly/patternfly 6.6.0-prerelease.7 → 6.6.0-prerelease.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/assets/images/img_avatar-rhds.svg +22 -0
  2. package/assets/images/pf-logo-avatar.jpg +0 -0
  3. package/components/Avatar/avatar.css +144 -0
  4. package/components/Avatar/avatar.scss +161 -0
  5. package/components/_index.css +144 -0
  6. package/docs/components/Avatar/examples/Avatar.css +6 -0
  7. package/docs/components/Avatar/examples/Avatar.md +414 -40
  8. package/docs/components/MenuToggle/examples/MenuToggle.md +54 -15
  9. package/docs/demos/Compass/examples/Compass.md +75 -19
  10. package/package.json +2 -2
  11. package/patternfly-no-globals.css +144 -0
  12. package/patternfly.css +144 -0
  13. package/patternfly.min.css +1 -1
  14. package/patternfly.min.css.map +1 -1
package/assets/images/img_avatar-rhds.svg ADDED
@@ -0,0 +1,22 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
2
+ <g>
3
+ <rect width="48" height="48" fill="#147878"/>
4
+ <rect x="36" y="42" width="6" height="6" fill="#004D4D"/>
5
+ <rect x="6" y="42" width="6" height="6" fill="#004D4D"/>
6
+ <rect x="12" y="36" width="24" height="6" fill="#004D4D"/>
7
+ <rect x="18" y="30" width="12" height="6" fill="#004D4D"/>
8
+ <rect width="6" height="24" transform="matrix(-1 0 0 1 48 12)" fill="#004D4D"/>
9
+ <rect width="6" height="6" transform="matrix(-1 0 0 1 42 30)" fill="#004D4D"/>
10
+ <rect width="6" height="6" transform="matrix(-1 0 0 1 36 24)" fill="#004D4D"/>
11
+ <rect width="6" height="6" transform="matrix(-1 0 0 1 42 18)" fill="#004D4D"/>
12
+ <rect width="6" height="6" transform="matrix(-1 0 0 1 36 12)" fill="#004D4D"/>
13
+ <rect width="6" height="6" transform="matrix(-1 0 0 1 42 6)" fill="#004D4D"/>
14
+ <rect x="18" width="12" height="12" fill="#004D4D"/>
15
+ <rect x="6" y="30" width="6" height="6" fill="#004D4D"/>
16
+ <rect x="12" y="24" width="6" height="6" fill="#004D4D"/>
17
+ <rect x="6" y="18" width="6" height="6" fill="#004D4D"/>
18
+ <rect x="12" y="12" width="6" height="6" fill="#004D4D"/>
19
+ <rect x="6" y="6" width="6" height="6" fill="#004D4D"/>
20
+ <rect y="12" width="6" height="24" fill="#004D4D"/>
21
+ </g>
22
+ </svg>
package/assets/images/pf-logo-avatar.jpg ADDED
Binary file
package/components/Avatar/avatar.css CHANGED
@@ -4,24 +4,87 @@
4
4
  --pf-v6-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill);
5
5
  --pf-v6-c-avatar--Width: 2.25rem;
6
6
  --pf-v6-c-avatar--Height: 2.25rem;
7
+ --pf-v6-c-avatar--FontSize: calc(2.25rem / 1.414);
7
8
  --pf-v6-c-avatar--m-sm--Width: 1.5rem;
8
9
  --pf-v6-c-avatar--m-sm--Height: 1.5rem;
10
+ --pf-v6-c-avatar--m-sm--FontSize: calc(1.5rem / 1.414);
9
11
  --pf-v6-c-avatar--m-md--Width: 2.25rem;
10
12
  --pf-v6-c-avatar--m-md--Height: 2.25rem;
13
+ --pf-v6-c-avatar--m-md--FontSize: calc(2.25rem / 1.414);
11
14
  --pf-v6-c-avatar--m-lg--Width: 4.5rem;
12
15
  --pf-v6-c-avatar--m-lg--Height: 4.5rem;
16
+ --pf-v6-c-avatar--m-lg--FontSize: calc(4.5rem / 1.414);
13
17
  --pf-v6-c-avatar--m-xl--Width: 8rem;
14
18
  --pf-v6-c-avatar--m-xl--Height: 8rem;
19
+ --pf-v6-c-avatar--m-xl--FontSize: calc(8rem / 1.414);
15
20
  --pf-v6-c-avatar--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
16
21
  --pf-v6-c-avatar--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
22
+ --pf-v6-c-avatar--m-colorful--BorderWidth: var(--pf-t--global--border--width--box--default);
23
+ --pf-v6-c-avatar--m-gray--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
24
+ --pf-v6-c-avatar--m-gray--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
25
+ --pf-v6-c-avatar--m-gray--BorderColor: var(--pf-t--global--border--color--default);
26
+ --pf-v6-c-avatar--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
27
+ --pf-v6-c-avatar--m-red--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
28
+ --pf-v6-c-avatar--m-red--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
29
+ --pf-v6-c-avatar--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
30
+ --pf-v6-c-avatar--m-orangered--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
31
+ --pf-v6-c-avatar--m-orangered--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
32
+ --pf-v6-c-avatar--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
33
+ --pf-v6-c-avatar--m-orange--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
34
+ --pf-v6-c-avatar--m-orange--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
35
+ --pf-v6-c-avatar--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
36
+ --pf-v6-c-avatar--m-yellow--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
37
+ --pf-v6-c-avatar--m-yellow--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
38
+ --pf-v6-c-avatar--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
39
+ --pf-v6-c-avatar--m-green--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
40
+ --pf-v6-c-avatar--m-green--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
41
+ --pf-v6-c-avatar--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
42
+ --pf-v6-c-avatar--m-teal--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
43
+ --pf-v6-c-avatar--m-teal--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
44
+ --pf-v6-c-avatar--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
45
+ --pf-v6-c-avatar--m-blue--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
46
+ --pf-v6-c-avatar--m-blue--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
47
+ --pf-v6-c-avatar--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
48
+ --pf-v6-c-avatar--m-purple--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
49
+ --pf-v6-c-avatar--m-purple--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
50
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-t--global--font--size--body--lg);
51
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
52
+ --pf-v6-c-avatar--m-sm__initials--FontSize: var(--pf-t--global--font--size--body--sm);
53
+ --pf-v6-c-avatar--m-sm__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
54
+ --pf-v6-c-avatar--m-lg__initials--FontSize: var(--pf-t--global--font--size--2xl);
55
+ --pf-v6-c-avatar--m-lg__initials--FontWeight: var(--pf-t--global--font--weight--heading--bold);
56
+ --pf-v6-c-avatar--m-lg__initials--FontFamily: var(--pf-t--global--font--family--heading);
57
+ --pf-v6-c-avatar--m-xl__initials--FontSize: var(--pf-t--global--font--size--4xl);
58
+ --pf-v6-c-avatar--m-xl__initials--FontWeight: var(--pf-t--global--font--weight--heading--default);
59
+ --pf-v6-c-avatar--m-xl__initials--FontFamily: var(--pf-t--global--font--family--heading);
60
+ --pf-v6-c-avatar--m-gray__initials--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
61
+ --pf-v6-c-avatar--m-red__initials--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
62
+ --pf-v6-c-avatar--m-orangered__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
63
+ --pf-v6-c-avatar--m-orange__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
64
+ --pf-v6-c-avatar--m-yellow__initials--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
65
+ --pf-v6-c-avatar--m-green__initials--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
66
+ --pf-v6-c-avatar--m-teal__initials--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
67
+ --pf-v6-c-avatar--m-blue__initials--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
68
+ --pf-v6-c-avatar--m-purple__initials--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
17
69
  }
18
70
 
19
71
  .pf-v6-c-avatar {
20
72
  width: var(--pf-v6-c-avatar--Width);
21
73
  height: var(--pf-v6-c-avatar--Height);
74
+ font-size: var(--pf-v6-c-avatar--FontSize);
75
+ color: var(--pf-v6-c-avatar--Color, inherit);
76
+ background-color: var(--pf-v6-c-avatar--BackgroundColor, transparent);
22
77
  border: var(--pf-v6-c-avatar--BorderWidth) solid var(--pf-v6-c-avatar--BorderColor);
23
78
  border-radius: var(--pf-v6-c-avatar--BorderRadius);
24
79
  }
80
+ div.pf-v6-c-avatar {
81
+ display: inline-flex;
82
+ align-items: center;
83
+ justify-content: center;
84
+ overflow: clip;
85
+ vertical-align: middle;
86
+ }
87
+
25
88
  .pf-v6-c-avatar.pf-m-bordered {
26
89
  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-bordered--BorderColor);
27
90
  --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-bordered--BorderWidth);
@@ -249,4 +312,85 @@
249
312
  .pf-v6-c-avatar.pf-m-xl {
250
313
  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-2xl, var(--pf-v6-c-avatar--m-xl--Height-on-xl, var(--pf-v6-c-avatar--m-xl--Height-on-lg, var(--pf-v6-c-avatar--m-xl--Height-on-md, var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height))))));
251
314
  }
315
+ }
316
+ .pf-v6-c-avatar.pf-m-sm {
317
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-sm--FontSize);
318
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-sm__initials--FontSize);
319
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-sm__initials--FontWeight);
320
+ }
321
+ .pf-v6-c-avatar.pf-m-lg {
322
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-lg--FontSize);
323
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-lg__initials--FontSize);
324
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-lg__initials--FontWeight);
325
+ --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-lg__initials--FontFamily);
326
+ }
327
+ .pf-v6-c-avatar.pf-m-xl {
328
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-xl--FontSize);
329
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-xl__initials--FontSize);
330
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-xl__initials--FontWeight);
331
+ --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-xl__initials--FontFamily);
332
+ }
333
+ .pf-v6-c-avatar.pf-m-colorful {
334
+ --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-colorful--BorderWidth);
335
+ }
336
+ .pf-v6-c-avatar.pf-m-red {
337
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-red--BackgroundColor);
338
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-red--Color);
339
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-red--BorderColor);
340
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-red__initials--Color);
341
+ }
342
+ .pf-v6-c-avatar.pf-m-orangered {
343
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-orangered--BackgroundColor);
344
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-orangered--Color);
345
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-orangered--BorderColor);
346
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orangered__initials--Color);
347
+ }
348
+ .pf-v6-c-avatar.pf-m-orange {
349
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-orange--BackgroundColor);
350
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-orange--Color);
351
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-orange--BorderColor);
352
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orange__initials--Color);
353
+ }
354
+ .pf-v6-c-avatar.pf-m-yellow {
355
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-yellow--BackgroundColor);
356
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-yellow--Color);
357
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-yellow--BorderColor);
358
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-yellow__initials--Color);
359
+ }
360
+ .pf-v6-c-avatar.pf-m-green {
361
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-green--BackgroundColor);
362
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-green--Color);
363
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-green--BorderColor);
364
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-green__initials--Color);
365
+ }
366
+ .pf-v6-c-avatar.pf-m-teal {
367
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-teal--BackgroundColor);
368
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-teal--Color);
369
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-teal--BorderColor);
370
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-teal__initials--Color);
371
+ }
372
+ .pf-v6-c-avatar.pf-m-blue {
373
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-blue--BackgroundColor);
374
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-blue--Color);
375
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-blue--BorderColor);
376
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-blue__initials--Color);
377
+ }
378
+ .pf-v6-c-avatar.pf-m-purple {
379
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-purple--BackgroundColor);
380
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-purple--Color);
381
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-purple--BorderColor);
382
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-purple__initials--Color);
383
+ }
384
+ .pf-v6-c-avatar.pf-m-gray {
385
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-gray--BackgroundColor);
386
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-gray--Color);
387
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-gray--BorderColor);
388
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-gray__initials--Color);
389
+ }
390
+
391
+ .pf-v6-c-avatar__initials {
392
+ font-family: var(--pf-v6-c-avatar__initials--FontFamily, revert);
393
+ font-size: var(--pf-v6-c-avatar__initials--FontSize);
394
+ font-weight: var(--pf-v6-c-avatar__initials--FontWeight);
395
+ color: var(--pf-v6-c-avatar__initials--Color);
252
396
  }
package/components/Avatar/avatar.scss CHANGED
@@ -9,26 +9,93 @@ $pf-v6-c-avatar--sizes: "sm", "md", "lg", "xl";
9
9
  --#{$avatar}--BorderRadius: var(--pf-t--global--border--radius--pill);
10
10
  --#{$avatar}--Width: #{pf-size-prem(36px)};
11
11
  --#{$avatar}--Height: #{pf-size-prem(36px)};
12
+ --#{$avatar}--FontSize: calc(#{pf-size-prem(36px)} / 1.414); // 1.414 is the square root of 2, used to get the inner square of the avatar
12
13
  --#{$avatar}--m-sm--Width: #{pf-size-prem(24px)};
13
14
  --#{$avatar}--m-sm--Height: #{pf-size-prem(24px)};
15
+ --#{$avatar}--m-sm--FontSize: calc(#{pf-size-prem(24px)} / 1.414);
14
16
  --#{$avatar}--m-md--Width: #{pf-size-prem(36px)};
15
17
  --#{$avatar}--m-md--Height: #{pf-size-prem(36px)};
18
+ --#{$avatar}--m-md--FontSize: calc(#{pf-size-prem(36px)} / 1.414);
16
19
  --#{$avatar}--m-lg--Width: #{pf-size-prem(72px)};
17
20
  --#{$avatar}--m-lg--Height: #{pf-size-prem(72px)};
21
+ --#{$avatar}--m-lg--FontSize: calc(#{pf-size-prem(72px)} / 1.414);
18
22
  --#{$avatar}--m-xl--Width: #{pf-size-prem(128px)};
19
23
  --#{$avatar}--m-xl--Height: #{pf-size-prem(128px)};
24
+ --#{$avatar}--m-xl--FontSize: calc(#{pf-size-prem(128px)} / 1.414);
20
25
 
21
26
  // Bordered
22
27
  --#{$avatar}--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
23
28
  --#{$avatar}--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
29
+
30
+ // Colorful
31
+ --#{$avatar}--m-colorful--BorderWidth: var(--pf-t--global--border--width--box--default);
32
+ --#{$avatar}--m-gray--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
33
+ --#{$avatar}--m-gray--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
34
+ --#{$avatar}--m-gray--BorderColor: var(--pf-t--global--border--color--default);
35
+ --#{$avatar}--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
36
+ --#{$avatar}--m-red--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
37
+ --#{$avatar}--m-red--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
38
+ --#{$avatar}--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
39
+ --#{$avatar}--m-orangered--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
40
+ --#{$avatar}--m-orangered--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
41
+ --#{$avatar}--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
42
+ --#{$avatar}--m-orange--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
43
+ --#{$avatar}--m-orange--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
44
+ --#{$avatar}--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
45
+ --#{$avatar}--m-yellow--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
46
+ --#{$avatar}--m-yellow--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
47
+ --#{$avatar}--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
48
+ --#{$avatar}--m-green--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
49
+ --#{$avatar}--m-green--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
50
+ --#{$avatar}--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
51
+ --#{$avatar}--m-teal--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
52
+ --#{$avatar}--m-teal--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
53
+ --#{$avatar}--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
54
+ --#{$avatar}--m-blue--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
55
+ --#{$avatar}--m-blue--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
56
+ --#{$avatar}--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
57
+ --#{$avatar}--m-purple--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
58
+ --#{$avatar}--m-purple--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
59
+
60
+ // Initials
61
+ --#{$avatar}__initials--FontSize: var(--pf-t--global--font--size--body--lg);
62
+ --#{$avatar}__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
63
+ --#{$avatar}--m-sm__initials--FontSize: var(--pf-t--global--font--size--body--sm);
64
+ --#{$avatar}--m-sm__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
65
+ --#{$avatar}--m-lg__initials--FontSize: var(--pf-t--global--font--size--2xl);
66
+ --#{$avatar}--m-lg__initials--FontWeight: var(--pf-t--global--font--weight--heading--bold);
67
+ --#{$avatar}--m-lg__initials--FontFamily: var(--pf-t--global--font--family--heading);
68
+ --#{$avatar}--m-xl__initials--FontSize: var(--pf-t--global--font--size--4xl);
69
+ --#{$avatar}--m-xl__initials--FontWeight: var(--pf-t--global--font--weight--heading--default);
70
+ --#{$avatar}--m-xl__initials--FontFamily: var(--pf-t--global--font--family--heading);
71
+ --#{$avatar}--m-gray__initials--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
72
+ --#{$avatar}--m-red__initials--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
73
+ --#{$avatar}--m-orangered__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
74
+ --#{$avatar}--m-orange__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
75
+ --#{$avatar}--m-yellow__initials--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
76
+ --#{$avatar}--m-green__initials--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
77
+ --#{$avatar}--m-teal__initials--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
78
+ --#{$avatar}--m-blue__initials--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
79
+ --#{$avatar}--m-purple__initials--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
24
80
  }
25
81
 
26
82
  .#{$avatar} {
27
83
  width: var(--#{$avatar}--Width);
28
84
  height: var(--#{$avatar}--Height);
85
+ font-size: var(--#{$avatar}--FontSize);
86
+ color: var(--#{$avatar}--Color, inherit);
87
+ background-color: var(--#{$avatar}--BackgroundColor, transparent);
29
88
  border: var(--#{$avatar}--BorderWidth) solid var(--#{$avatar}--BorderColor);
30
89
  border-radius: var(--#{$avatar}--BorderRadius);
31
90
 
91
+ @at-root div#{&} {
92
+ display: inline-flex;
93
+ align-items: center;
94
+ justify-content: center;
95
+ overflow: clip;
96
+ vertical-align: middle;
97
+ }
98
+
32
99
  &.pf-m-bordered {
33
100
  --#{$avatar}--BorderColor: var(--#{$avatar}--m-bordered--BorderColor);
34
101
  --#{$avatar}--BorderWidth: var(--#{$avatar}--m-bordered--BorderWidth);
@@ -40,4 +107,98 @@ $pf-v6-c-avatar--sizes: "sm", "md", "lg", "xl";
40
107
  @include pf-v6-build-css-variable-stack("--#{$avatar}--Height", "--#{$avatar}--m-#{$size}--Height", $pf-v6-c-avatar--breakpoint-map);
41
108
  }
42
109
  }
110
+
111
+ &.pf-m-sm {
112
+ --#{$avatar}--FontSize: var(--#{$avatar}--m-sm--FontSize);
113
+ --#{$avatar}__initials--FontSize: var(--#{$avatar}--m-sm__initials--FontSize);
114
+ --#{$avatar}__initials--FontWeight: var(--#{$avatar}--m-sm__initials--FontWeight);
115
+ }
116
+
117
+ &.pf-m-lg {
118
+ --#{$avatar}--FontSize: var(--#{$avatar}--m-lg--FontSize);
119
+ --#{$avatar}__initials--FontSize: var(--#{$avatar}--m-lg__initials--FontSize);
120
+ --#{$avatar}__initials--FontWeight: var(--#{$avatar}--m-lg__initials--FontWeight);
121
+ --#{$avatar}__initials--FontFamily: var(--#{$avatar}--m-lg__initials--FontFamily);
122
+ }
123
+
124
+ &.pf-m-xl {
125
+ --#{$avatar}--FontSize: var(--#{$avatar}--m-xl--FontSize);
126
+ --#{$avatar}__initials--FontSize: var(--#{$avatar}--m-xl__initials--FontSize);
127
+ --#{$avatar}__initials--FontWeight: var(--#{$avatar}--m-xl__initials--FontWeight);
128
+ --#{$avatar}__initials--FontFamily: var(--#{$avatar}--m-xl__initials--FontFamily);
129
+ }
130
+
131
+ &.pf-m-colorful {
132
+ --#{$avatar}--BorderWidth: var(--#{$avatar}--m-colorful--BorderWidth);
133
+ }
134
+
135
+ &.pf-m-red {
136
+ --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-red--BackgroundColor);
137
+ --#{$avatar}--Color: var(--#{$avatar}--m-red--Color);
138
+ --#{$avatar}--BorderColor: var(--#{$avatar}--m-red--BorderColor);
139
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-red__initials--Color);
140
+ }
141
+
142
+ &.pf-m-orangered {
143
+ --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-orangered--BackgroundColor);
144
+ --#{$avatar}--Color: var(--#{$avatar}--m-orangered--Color);
145
+ --#{$avatar}--BorderColor: var(--#{$avatar}--m-orangered--BorderColor);
146
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-orangered__initials--Color);
147
+ }
148
+
149
+ &.pf-m-orange {
150
+ --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-orange--BackgroundColor);
151
+ --#{$avatar}--Color: var(--#{$avatar}--m-orange--Color);
152
+ --#{$avatar}--BorderColor: var(--#{$avatar}--m-orange--BorderColor);
153
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-orange__initials--Color);
154
+ }
155
+
156
+ &.pf-m-yellow {
157
+ --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-yellow--BackgroundColor);
158
+ --#{$avatar}--Color: var(--#{$avatar}--m-yellow--Color);
159
+ --#{$avatar}--BorderColor: var(--#{$avatar}--m-yellow--BorderColor);
160
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-yellow__initials--Color);
161
+ }
162
+
163
+ &.pf-m-green {
164
+ --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-green--BackgroundColor);
165
+ --#{$avatar}--Color: var(--#{$avatar}--m-green--Color);
166
+ --#{$avatar}--BorderColor: var(--#{$avatar}--m-green--BorderColor);
167
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-green__initials--Color);
168
+ }
169
+
170
+ &.pf-m-teal {
171
+ --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-teal--BackgroundColor);
172
+ --#{$avatar}--Color: var(--#{$avatar}--m-teal--Color);
173
+ --#{$avatar}--BorderColor: var(--#{$avatar}--m-teal--BorderColor);
174
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-teal__initials--Color);
175
+ }
176
+
177
+ &.pf-m-blue {
178
+ --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-blue--BackgroundColor);
179
+ --#{$avatar}--Color: var(--#{$avatar}--m-blue--Color);
180
+ --#{$avatar}--BorderColor: var(--#{$avatar}--m-blue--BorderColor);
181
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-blue__initials--Color);
182
+ }
183
+
184
+ &.pf-m-purple {
185
+ --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-purple--BackgroundColor);
186
+ --#{$avatar}--Color: var(--#{$avatar}--m-purple--Color);
187
+ --#{$avatar}--BorderColor: var(--#{$avatar}--m-purple--BorderColor);
188
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-purple__initials--Color);
189
+ }
190
+
191
+ &.pf-m-gray {
192
+ --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-gray--BackgroundColor);
193
+ --#{$avatar}--Color: var(--#{$avatar}--m-gray--Color);
194
+ --#{$avatar}--BorderColor: var(--#{$avatar}--m-gray--BorderColor);
195
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-gray__initials--Color);
196
+ }
197
+ }
198
+
199
+ .#{$avatar}__initials {
200
+ font-family: var(--#{$avatar}__initials--FontFamily, revert);
201
+ font-size: var(--#{$avatar}__initials--FontSize);
202
+ font-weight: var(--#{$avatar}__initials--FontWeight);
203
+ color: var(--#{$avatar}__initials--Color);
43
204
  }
package/components/_index.css CHANGED
@@ -888,24 +888,87 @@
888
888
  --pf-v6-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill);
889
889
  --pf-v6-c-avatar--Width: 2.25rem;
890
890
  --pf-v6-c-avatar--Height: 2.25rem;
891
+ --pf-v6-c-avatar--FontSize: calc(2.25rem / 1.414);
891
892
  --pf-v6-c-avatar--m-sm--Width: 1.5rem;
892
893
  --pf-v6-c-avatar--m-sm--Height: 1.5rem;
894
+ --pf-v6-c-avatar--m-sm--FontSize: calc(1.5rem / 1.414);
893
895
  --pf-v6-c-avatar--m-md--Width: 2.25rem;
894
896
  --pf-v6-c-avatar--m-md--Height: 2.25rem;
897
+ --pf-v6-c-avatar--m-md--FontSize: calc(2.25rem / 1.414);
895
898
  --pf-v6-c-avatar--m-lg--Width: 4.5rem;
896
899
  --pf-v6-c-avatar--m-lg--Height: 4.5rem;
900
+ --pf-v6-c-avatar--m-lg--FontSize: calc(4.5rem / 1.414);
897
901
  --pf-v6-c-avatar--m-xl--Width: 8rem;
898
902
  --pf-v6-c-avatar--m-xl--Height: 8rem;
903
+ --pf-v6-c-avatar--m-xl--FontSize: calc(8rem / 1.414);
899
904
  --pf-v6-c-avatar--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
900
905
  --pf-v6-c-avatar--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
906
+ --pf-v6-c-avatar--m-colorful--BorderWidth: var(--pf-t--global--border--width--box--default);
907
+ --pf-v6-c-avatar--m-gray--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
908
+ --pf-v6-c-avatar--m-gray--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
909
+ --pf-v6-c-avatar--m-gray--BorderColor: var(--pf-t--global--border--color--default);
910
+ --pf-v6-c-avatar--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
911
+ --pf-v6-c-avatar--m-red--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
912
+ --pf-v6-c-avatar--m-red--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
913
+ --pf-v6-c-avatar--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
914
+ --pf-v6-c-avatar--m-orangered--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
915
+ --pf-v6-c-avatar--m-orangered--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
916
+ --pf-v6-c-avatar--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
917
+ --pf-v6-c-avatar--m-orange--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
918
+ --pf-v6-c-avatar--m-orange--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
919
+ --pf-v6-c-avatar--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
920
+ --pf-v6-c-avatar--m-yellow--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
921
+ --pf-v6-c-avatar--m-yellow--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
922
+ --pf-v6-c-avatar--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
923
+ --pf-v6-c-avatar--m-green--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
924
+ --pf-v6-c-avatar--m-green--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
925
+ --pf-v6-c-avatar--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
926
+ --pf-v6-c-avatar--m-teal--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
927
+ --pf-v6-c-avatar--m-teal--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
928
+ --pf-v6-c-avatar--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
929
+ --pf-v6-c-avatar--m-blue--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
930
+ --pf-v6-c-avatar--m-blue--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
931
+ --pf-v6-c-avatar--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
932
+ --pf-v6-c-avatar--m-purple--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
933
+ --pf-v6-c-avatar--m-purple--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
934
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-t--global--font--size--body--lg);
935
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
936
+ --pf-v6-c-avatar--m-sm__initials--FontSize: var(--pf-t--global--font--size--body--sm);
937
+ --pf-v6-c-avatar--m-sm__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
938
+ --pf-v6-c-avatar--m-lg__initials--FontSize: var(--pf-t--global--font--size--2xl);
939
+ --pf-v6-c-avatar--m-lg__initials--FontWeight: var(--pf-t--global--font--weight--heading--bold);
940
+ --pf-v6-c-avatar--m-lg__initials--FontFamily: var(--pf-t--global--font--family--heading);
941
+ --pf-v6-c-avatar--m-xl__initials--FontSize: var(--pf-t--global--font--size--4xl);
942
+ --pf-v6-c-avatar--m-xl__initials--FontWeight: var(--pf-t--global--font--weight--heading--default);
943
+ --pf-v6-c-avatar--m-xl__initials--FontFamily: var(--pf-t--global--font--family--heading);
944
+ --pf-v6-c-avatar--m-gray__initials--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
945
+ --pf-v6-c-avatar--m-red__initials--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
946
+ --pf-v6-c-avatar--m-orangered__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
947
+ --pf-v6-c-avatar--m-orange__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
948
+ --pf-v6-c-avatar--m-yellow__initials--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
949
+ --pf-v6-c-avatar--m-green__initials--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
950
+ --pf-v6-c-avatar--m-teal__initials--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
951
+ --pf-v6-c-avatar--m-blue__initials--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
952
+ --pf-v6-c-avatar--m-purple__initials--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
901
953
  }
902
954
 
903
955
  .pf-v6-c-avatar {
904
956
  width: var(--pf-v6-c-avatar--Width);
905
957
  height: var(--pf-v6-c-avatar--Height);
958
+ font-size: var(--pf-v6-c-avatar--FontSize);
959
+ color: var(--pf-v6-c-avatar--Color, inherit);
960
+ background-color: var(--pf-v6-c-avatar--BackgroundColor, transparent);
906
961
  border: var(--pf-v6-c-avatar--BorderWidth) solid var(--pf-v6-c-avatar--BorderColor);
907
962
  border-radius: var(--pf-v6-c-avatar--BorderRadius);
908
963
  }
964
+ div.pf-v6-c-avatar {
965
+ display: inline-flex;
966
+ align-items: center;
967
+ justify-content: center;
968
+ overflow: clip;
969
+ vertical-align: middle;
970
+ }
971
+
909
972
  .pf-v6-c-avatar.pf-m-bordered {
910
973
  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-bordered--BorderColor);
911
974
  --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-bordered--BorderWidth);
@@ -1134,6 +1197,87 @@
1134
1197
  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-2xl, var(--pf-v6-c-avatar--m-xl--Height-on-xl, var(--pf-v6-c-avatar--m-xl--Height-on-lg, var(--pf-v6-c-avatar--m-xl--Height-on-md, var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height))))));
1135
1198
  }
1136
1199
  }
1200
+ .pf-v6-c-avatar.pf-m-sm {
1201
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-sm--FontSize);
1202
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-sm__initials--FontSize);
1203
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-sm__initials--FontWeight);
1204
+ }
1205
+ .pf-v6-c-avatar.pf-m-lg {
1206
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-lg--FontSize);
1207
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-lg__initials--FontSize);
1208
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-lg__initials--FontWeight);
1209
+ --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-lg__initials--FontFamily);
1210
+ }
1211
+ .pf-v6-c-avatar.pf-m-xl {
1212
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-xl--FontSize);
1213
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-xl__initials--FontSize);
1214
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-xl__initials--FontWeight);
1215
+ --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-xl__initials--FontFamily);
1216
+ }
1217
+ .pf-v6-c-avatar.pf-m-colorful {
1218
+ --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-colorful--BorderWidth);
1219
+ }
1220
+ .pf-v6-c-avatar.pf-m-red {
1221
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-red--BackgroundColor);
1222
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-red--Color);
1223
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-red--BorderColor);
1224
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-red__initials--Color);
1225
+ }
1226
+ .pf-v6-c-avatar.pf-m-orangered {
1227
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-orangered--BackgroundColor);
1228
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-orangered--Color);
1229
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-orangered--BorderColor);
1230
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orangered__initials--Color);
1231
+ }
1232
+ .pf-v6-c-avatar.pf-m-orange {
1233
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-orange--BackgroundColor);
1234
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-orange--Color);
1235
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-orange--BorderColor);
1236
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orange__initials--Color);
1237
+ }
1238
+ .pf-v6-c-avatar.pf-m-yellow {
1239
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-yellow--BackgroundColor);
1240
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-yellow--Color);
1241
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-yellow--BorderColor);
1242
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-yellow__initials--Color);
1243
+ }
1244
+ .pf-v6-c-avatar.pf-m-green {
1245
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-green--BackgroundColor);
1246
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-green--Color);
1247
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-green--BorderColor);
1248
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-green__initials--Color);
1249
+ }
1250
+ .pf-v6-c-avatar.pf-m-teal {
1251
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-teal--BackgroundColor);
1252
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-teal--Color);
1253
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-teal--BorderColor);
1254
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-teal__initials--Color);
1255
+ }
1256
+ .pf-v6-c-avatar.pf-m-blue {
1257
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-blue--BackgroundColor);
1258
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-blue--Color);
1259
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-blue--BorderColor);
1260
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-blue__initials--Color);
1261
+ }
1262
+ .pf-v6-c-avatar.pf-m-purple {
1263
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-purple--BackgroundColor);
1264
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-purple--Color);
1265
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-purple--BorderColor);
1266
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-purple__initials--Color);
1267
+ }
1268
+ .pf-v6-c-avatar.pf-m-gray {
1269
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-gray--BackgroundColor);
1270
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-gray--Color);
1271
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-gray--BorderColor);
1272
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-gray__initials--Color);
1273
+ }
1274
+
1275
+ .pf-v6-c-avatar__initials {
1276
+ font-family: var(--pf-v6-c-avatar__initials--FontFamily, revert);
1277
+ font-size: var(--pf-v6-c-avatar__initials--FontSize);
1278
+ font-weight: var(--pf-v6-c-avatar__initials--FontWeight);
1279
+ color: var(--pf-v6-c-avatar__initials--Color);
1280
+ }
1137
1281
 
1138
1282
  .pf-v6-c-backdrop {
1139
1283
  --pf-v6-c-backdrop--Position: fixed;
package/docs/components/Avatar/examples/Avatar.css ADDED
@@ -0,0 +1,6 @@
1
+ .ws-core-c-avatar .ws-preview-html {
2
+ display: flex;
3
+ flex-wrap: wrap;
4
+ gap: var(--pf-t--global--spacer--sm);
5
+ align-items: end;
6
+ }