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

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 (12) hide show
  1. package/assets/images/img_avatar-rhds.svg +22 -0
  2. package/components/Avatar/avatar.css +141 -0
  3. package/components/Avatar/avatar.scss +160 -0
  4. package/components/_index.css +141 -0
  5. package/docs/components/Avatar/examples/Avatar.md +320 -7
  6. package/docs/components/MenuToggle/examples/MenuToggle.md +3 -3
  7. package/docs/demos/Compass/examples/Compass.md +4 -4
  8. package/package.json +1 -1
  9. package/patternfly-no-globals.css +141 -0
  10. package/patternfly.css +141 -0
  11. package/patternfly.min.css +1 -1
  12. 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/components/Avatar/avatar.css CHANGED
@@ -4,21 +4,74 @@
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: 2.25rem;
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: 1.5rem;
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: 2.25rem;
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: 4.5rem;
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: 8rem;
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);
22
75
  border: var(--pf-v6-c-avatar--BorderWidth) solid var(--pf-v6-c-avatar--BorderColor);
23
76
  border-radius: var(--pf-v6-c-avatar--BorderRadius);
24
77
  }
@@ -249,4 +302,92 @@
249
302
  .pf-v6-c-avatar.pf-m-xl {
250
303
  --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
304
  }
305
+ }
306
+ .pf-v6-c-avatar.pf-m-sm {
307
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-sm--FontSize);
308
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-sm__initials--FontSize);
309
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-sm__initials--FontWeight);
310
+ }
311
+ .pf-v6-c-avatar.pf-m-lg {
312
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-lg--FontSize);
313
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-lg__initials--FontSize);
314
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-lg__initials--FontWeight);
315
+ --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-lg__initials--FontFamily);
316
+ }
317
+ .pf-v6-c-avatar.pf-m-xl {
318
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-xl--FontSize);
319
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-xl__initials--FontSize);
320
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-xl__initials--FontWeight);
321
+ --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-xl__initials--FontFamily);
322
+ }
323
+ .pf-v6-c-avatar.pf-m-colorful {
324
+ --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-colorful--BorderWidth);
325
+ display: inline-flex;
326
+ align-items: center;
327
+ justify-content: center;
328
+ overflow: clip;
329
+ vertical-align: middle;
330
+ color: var(--pf-v6-c-avatar--m-colorful--Color, inherit);
331
+ background-color: var(--pf-v6-c-avatar--m-colorful--BackgroundColor, transparent);
332
+ border-color: var(--pf-v6-c-avatar--m-colorful--BorderColor, transparent);
333
+ }
334
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-red {
335
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-red--BackgroundColor);
336
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-red--Color);
337
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-red--BorderColor);
338
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-red__initials--Color);
339
+ }
340
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-orangered {
341
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-orangered--BackgroundColor);
342
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-orangered--Color);
343
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-orangered--BorderColor);
344
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orangered__initials--Color);
345
+ }
346
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-orange {
347
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-orange--BackgroundColor);
348
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-orange--Color);
349
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-orange--BorderColor);
350
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orange__initials--Color);
351
+ }
352
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-yellow {
353
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-yellow--BackgroundColor);
354
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-yellow--Color);
355
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-yellow--BorderColor);
356
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-yellow__initials--Color);
357
+ }
358
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-green {
359
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-green--BackgroundColor);
360
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-green--Color);
361
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-green--BorderColor);
362
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-green__initials--Color);
363
+ }
364
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-teal {
365
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-teal--BackgroundColor);
366
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-teal--Color);
367
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-teal--BorderColor);
368
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-teal__initials--Color);
369
+ }
370
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-blue {
371
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-blue--BackgroundColor);
372
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-blue--Color);
373
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-blue--BorderColor);
374
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-blue__initials--Color);
375
+ }
376
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-purple {
377
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-purple--BackgroundColor);
378
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-purple--Color);
379
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-purple--BorderColor);
380
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-purple__initials--Color);
381
+ }
382
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-gray {
383
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-gray--BackgroundColor);
384
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-gray--Color);
385
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-gray--BorderColor);
386
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-gray__initials--Color);
387
+ }
388
+ .pf-v6-c-avatar .pf-v6-c-avatar__initials {
389
+ font-family: var(--pf-v6-c-avatar__initials--FontFamily, revert);
390
+ font-size: var(--pf-v6-c-avatar__initials--FontSize);
391
+ font-weight: var(--pf-v6-c-avatar__initials--FontWeight);
392
+ color: var(--pf-v6-c-avatar__initials--Color);
252
393
  }
package/components/Avatar/avatar.scss CHANGED
@@ -9,23 +9,80 @@ $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: #{pf-size-prem(36px)};
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: #{pf-size-prem(24px)};
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: #{pf-size-prem(36px)};
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: #{pf-size-prem(72px)};
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: #{pf-size-prem(128px)};
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);
29
86
  border: var(--#{$avatar}--BorderWidth) solid var(--#{$avatar}--BorderColor);
30
87
  border-radius: var(--#{$avatar}--BorderRadius);
31
88
 
@@ -40,4 +97,107 @@ $pf-v6-c-avatar--sizes: "sm", "md", "lg", "xl";
40
97
  @include pf-v6-build-css-variable-stack("--#{$avatar}--Height", "--#{$avatar}--m-#{$size}--Height", $pf-v6-c-avatar--breakpoint-map);
41
98
  }
42
99
  }
100
+
101
+ &.pf-m-sm {
102
+ --#{$avatar}--FontSize: var(--#{$avatar}--m-sm--FontSize);
103
+ --#{$avatar}__initials--FontSize: var(--#{$avatar}--m-sm__initials--FontSize);
104
+ --#{$avatar}__initials--FontWeight: var(--#{$avatar}--m-sm__initials--FontWeight);
105
+ }
106
+
107
+ &.pf-m-lg {
108
+ --#{$avatar}--FontSize: var(--#{$avatar}--m-lg--FontSize);
109
+ --#{$avatar}__initials--FontSize: var(--#{$avatar}--m-lg__initials--FontSize);
110
+ --#{$avatar}__initials--FontWeight: var(--#{$avatar}--m-lg__initials--FontWeight);
111
+ --#{$avatar}__initials--FontFamily: var(--#{$avatar}--m-lg__initials--FontFamily);
112
+ }
113
+
114
+ &.pf-m-xl {
115
+ --#{$avatar}--FontSize: var(--#{$avatar}--m-xl--FontSize);
116
+ --#{$avatar}__initials--FontSize: var(--#{$avatar}--m-xl__initials--FontSize);
117
+ --#{$avatar}__initials--FontWeight: var(--#{$avatar}--m-xl__initials--FontWeight);
118
+ --#{$avatar}__initials--FontFamily: var(--#{$avatar}--m-xl__initials--FontFamily);
119
+ }
120
+
121
+ &.pf-m-colorful {
122
+ --#{$avatar}--BorderWidth: var(--#{$avatar}--m-colorful--BorderWidth);
123
+
124
+ display: inline-flex;
125
+ align-items: center;
126
+ justify-content: center;
127
+ overflow: clip;
128
+ vertical-align: middle;
129
+ color: var(--#{$avatar}--m-colorful--Color, inherit);
130
+ background-color: var(--#{$avatar}--m-colorful--BackgroundColor, transparent);
131
+ border-color: var(--#{$avatar}--m-colorful--BorderColor, transparent);
132
+
133
+ &.pf-m-red {
134
+ --#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-red--BackgroundColor);
135
+ --#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-red--Color);
136
+ --#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-red--BorderColor);
137
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-red__initials--Color);
138
+ }
139
+
140
+ &.pf-m-orangered {
141
+ --#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-orangered--BackgroundColor);
142
+ --#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-orangered--Color);
143
+ --#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-orangered--BorderColor);
144
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-orangered__initials--Color);
145
+ }
146
+
147
+ &.pf-m-orange {
148
+ --#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-orange--BackgroundColor);
149
+ --#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-orange--Color);
150
+ --#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-orange--BorderColor);
151
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-orange__initials--Color);
152
+ }
153
+
154
+ &.pf-m-yellow {
155
+ --#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-yellow--BackgroundColor);
156
+ --#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-yellow--Color);
157
+ --#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-yellow--BorderColor);
158
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-yellow__initials--Color);
159
+ }
160
+
161
+ &.pf-m-green {
162
+ --#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-green--BackgroundColor);
163
+ --#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-green--Color);
164
+ --#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-green--BorderColor);
165
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-green__initials--Color);
166
+ }
167
+
168
+ &.pf-m-teal {
169
+ --#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-teal--BackgroundColor);
170
+ --#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-teal--Color);
171
+ --#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-teal--BorderColor);
172
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-teal__initials--Color);
173
+ }
174
+
175
+ &.pf-m-blue {
176
+ --#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-blue--BackgroundColor);
177
+ --#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-blue--Color);
178
+ --#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-blue--BorderColor);
179
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-blue__initials--Color);
180
+ }
181
+
182
+ &.pf-m-purple {
183
+ --#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-purple--BackgroundColor);
184
+ --#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-purple--Color);
185
+ --#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-purple--BorderColor);
186
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-purple__initials--Color);
187
+ }
188
+
189
+ &.pf-m-gray {
190
+ --#{$avatar}--m-colorful--BackgroundColor: var(--#{$avatar}--m-gray--BackgroundColor);
191
+ --#{$avatar}--m-colorful--Color: var(--#{$avatar}--m-gray--Color);
192
+ --#{$avatar}--m-colorful--BorderColor: var(--#{$avatar}--m-gray--BorderColor);
193
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-gray__initials--Color);
194
+ }
195
+ }
196
+
197
+ .#{$avatar}__initials {
198
+ font-family: var(--#{$avatar}__initials--FontFamily, revert);
199
+ font-size: var(--#{$avatar}__initials--FontSize);
200
+ font-weight: var(--#{$avatar}__initials--FontWeight);
201
+ color: var(--#{$avatar}__initials--Color);
202
+ }
43
203
  }
package/components/_index.css CHANGED
@@ -888,21 +888,74 @@
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: 2.25rem;
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: 1.5rem;
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: 2.25rem;
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: 4.5rem;
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: 8rem;
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);
906
959
  border: var(--pf-v6-c-avatar--BorderWidth) solid var(--pf-v6-c-avatar--BorderColor);
907
960
  border-radius: var(--pf-v6-c-avatar--BorderRadius);
908
961
  }
@@ -1134,6 +1187,94 @@
1134
1187
  --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
1188
  }
1136
1189
  }
1190
+ .pf-v6-c-avatar.pf-m-sm {
1191
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-sm--FontSize);
1192
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-sm__initials--FontSize);
1193
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-sm__initials--FontWeight);
1194
+ }
1195
+ .pf-v6-c-avatar.pf-m-lg {
1196
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-lg--FontSize);
1197
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-lg__initials--FontSize);
1198
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-lg__initials--FontWeight);
1199
+ --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-lg__initials--FontFamily);
1200
+ }
1201
+ .pf-v6-c-avatar.pf-m-xl {
1202
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-xl--FontSize);
1203
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-xl__initials--FontSize);
1204
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-xl__initials--FontWeight);
1205
+ --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-xl__initials--FontFamily);
1206
+ }
1207
+ .pf-v6-c-avatar.pf-m-colorful {
1208
+ --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-colorful--BorderWidth);
1209
+ display: inline-flex;
1210
+ align-items: center;
1211
+ justify-content: center;
1212
+ overflow: clip;
1213
+ vertical-align: middle;
1214
+ color: var(--pf-v6-c-avatar--m-colorful--Color, inherit);
1215
+ background-color: var(--pf-v6-c-avatar--m-colorful--BackgroundColor, transparent);
1216
+ border-color: var(--pf-v6-c-avatar--m-colorful--BorderColor, transparent);
1217
+ }
1218
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-red {
1219
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-red--BackgroundColor);
1220
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-red--Color);
1221
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-red--BorderColor);
1222
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-red__initials--Color);
1223
+ }
1224
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-orangered {
1225
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-orangered--BackgroundColor);
1226
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-orangered--Color);
1227
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-orangered--BorderColor);
1228
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orangered__initials--Color);
1229
+ }
1230
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-orange {
1231
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-orange--BackgroundColor);
1232
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-orange--Color);
1233
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-orange--BorderColor);
1234
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orange__initials--Color);
1235
+ }
1236
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-yellow {
1237
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-yellow--BackgroundColor);
1238
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-yellow--Color);
1239
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-yellow--BorderColor);
1240
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-yellow__initials--Color);
1241
+ }
1242
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-green {
1243
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-green--BackgroundColor);
1244
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-green--Color);
1245
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-green--BorderColor);
1246
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-green__initials--Color);
1247
+ }
1248
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-teal {
1249
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-teal--BackgroundColor);
1250
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-teal--Color);
1251
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-teal--BorderColor);
1252
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-teal__initials--Color);
1253
+ }
1254
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-blue {
1255
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-blue--BackgroundColor);
1256
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-blue--Color);
1257
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-blue--BorderColor);
1258
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-blue__initials--Color);
1259
+ }
1260
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-purple {
1261
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-purple--BackgroundColor);
1262
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-purple--Color);
1263
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-purple--BorderColor);
1264
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-purple__initials--Color);
1265
+ }
1266
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-gray {
1267
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-gray--BackgroundColor);
1268
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-gray--Color);
1269
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-gray--BorderColor);
1270
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-gray__initials--Color);
1271
+ }
1272
+ .pf-v6-c-avatar .pf-v6-c-avatar__initials {
1273
+ font-family: var(--pf-v6-c-avatar__initials--FontFamily, revert);
1274
+ font-size: var(--pf-v6-c-avatar__initials--FontSize);
1275
+ font-weight: var(--pf-v6-c-avatar__initials--FontWeight);
1276
+ color: var(--pf-v6-c-avatar__initials--Color);
1277
+ }
1137
1278
 
1138
1279
  .pf-v6-c-backdrop {
1139
1280
  --pf-v6-c-backdrop--Position: fixed;