@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/docs/demos/Compass/examples/Compass.md CHANGED
@@ -444,11 +444,24 @@ This demo populates the main Compass section with a card view, which is one of t
444
444
  aria-expanded="false"
445
445
  >
446
446
  <span class="pf-v6-c-menu-toggle__icon">
447
- <img
448
- class="pf-v6-c-avatar pf-m-md"
449
- alt="Avatar image"
450
- src="/assets/images/img_avatar-light.svg"
451
- />
447
+ <div class="pf-v6-c-avatar pf-m-md" role="img" aria-hidden="true">
448
+ <svg
449
+ aria-hidden="true"
450
+ data-name="Layer 1"
451
+ xmlns="http://www.w3.org/2000/svg"
452
+ version="1.1"
453
+ viewBox="0 0 36 36"
454
+ >
455
+ <path
456
+ fill="currentColor"
457
+ d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
458
+ />
459
+ <path
460
+ fill="currentColor"
461
+ d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
462
+ />
463
+ </svg>
464
+ </div>
452
465
  </span>
453
466
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
454
467
  <span class="pf-v6-c-menu-toggle__controls">
@@ -2095,11 +2108,24 @@ This demo populates the main Compass section with a dashboard, which is often us
2095
2108
  aria-expanded="false"
2096
2109
  >
2097
2110
  <span class="pf-v6-c-menu-toggle__icon">
2098
- <img
2099
- class="pf-v6-c-avatar pf-m-md"
2100
- alt="Avatar image"
2101
- src="/assets/images/img_avatar-light.svg"
2102
- />
2111
+ <div class="pf-v6-c-avatar pf-m-md" role="img" aria-hidden="true">
2112
+ <svg
2113
+ aria-hidden="true"
2114
+ data-name="Layer 1"
2115
+ xmlns="http://www.w3.org/2000/svg"
2116
+ version="1.1"
2117
+ viewBox="0 0 36 36"
2118
+ >
2119
+ <path
2120
+ fill="currentColor"
2121
+ d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
2122
+ />
2123
+ <path
2124
+ fill="currentColor"
2125
+ d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
2126
+ />
2127
+ </svg>
2128
+ </div>
2103
2129
  </span>
2104
2130
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
2105
2131
  <span class="pf-v6-c-menu-toggle__controls">
@@ -4031,11 +4057,24 @@ Without a glass panel component wrapping all of the content, there is no rounded
4031
4057
  aria-expanded="false"
4032
4058
  >
4033
4059
  <span class="pf-v6-c-menu-toggle__icon">
4034
- <img
4035
- class="pf-v6-c-avatar pf-m-md"
4036
- alt="Avatar image"
4037
- src="/assets/images/img_avatar-light.svg"
4038
- />
4060
+ <div class="pf-v6-c-avatar pf-m-md" role="img" aria-hidden="true">
4061
+ <svg
4062
+ aria-hidden="true"
4063
+ data-name="Layer 1"
4064
+ xmlns="http://www.w3.org/2000/svg"
4065
+ version="1.1"
4066
+ viewBox="0 0 36 36"
4067
+ >
4068
+ <path
4069
+ fill="currentColor"
4070
+ d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
4071
+ />
4072
+ <path
4073
+ fill="currentColor"
4074
+ d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
4075
+ />
4076
+ </svg>
4077
+ </div>
4039
4078
  </span>
4040
4079
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
4041
4080
  <span class="pf-v6-c-menu-toggle__controls">
@@ -6628,11 +6667,28 @@ This demo showcases how you can position a side-panel drawer on top of the other
6628
6667
  aria-expanded="false"
6629
6668
  >
6630
6669
  <span class="pf-v6-c-menu-toggle__icon">
6631
- <img
6670
+ <div
6632
6671
  class="pf-v6-c-avatar pf-m-md"
6633
- alt="Avatar image"
6634
- src="/assets/images/img_avatar-light.svg"
6635
- />
6672
+ role="img"
6673
+ aria-hidden="true"
6674
+ >
6675
+ <svg
6676
+ aria-hidden="true"
6677
+ data-name="Layer 1"
6678
+ xmlns="http://www.w3.org/2000/svg"
6679
+ version="1.1"
6680
+ viewBox="0 0 36 36"
6681
+ >
6682
+ <path
6683
+ fill="currentColor"
6684
+ d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
6685
+ />
6686
+ <path
6687
+ fill="currentColor"
6688
+ d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
6689
+ />
6690
+ </svg>
6691
+ </div>
6636
6692
  </span>
6637
6693
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
6638
6694
  <span class="pf-v6-c-menu-toggle__controls">
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly",
4
- "version": "6.6.0-prerelease.7",
4
+ "version": "6.6.0-prerelease.9",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -71,7 +71,7 @@
71
71
  "@commitlint/config-conventional": "^19.1.0",
72
72
  "@fortawesome/fontawesome": "^1.1.8",
73
73
  "@octokit/rest": "^20.1.0",
74
- "@patternfly/documentation-framework": "6.44.1",
74
+ "@patternfly/documentation-framework": "6.44.3",
75
75
  "@patternfly/patternfly-a11y": "5.1.0",
76
76
  "@patternfly/react-code-editor": "6.5.1",
77
77
  "@patternfly/react-core": "6.5.1",
package/patternfly-no-globals.css CHANGED
@@ -10144,24 +10144,87 @@
10144
10144
  --pf-v6-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill);
10145
10145
  --pf-v6-c-avatar--Width: 2.25rem;
10146
10146
  --pf-v6-c-avatar--Height: 2.25rem;
10147
+ --pf-v6-c-avatar--FontSize: calc(2.25rem / 1.414);
10147
10148
  --pf-v6-c-avatar--m-sm--Width: 1.5rem;
10148
10149
  --pf-v6-c-avatar--m-sm--Height: 1.5rem;
10150
+ --pf-v6-c-avatar--m-sm--FontSize: calc(1.5rem / 1.414);
10149
10151
  --pf-v6-c-avatar--m-md--Width: 2.25rem;
10150
10152
  --pf-v6-c-avatar--m-md--Height: 2.25rem;
10153
+ --pf-v6-c-avatar--m-md--FontSize: calc(2.25rem / 1.414);
10151
10154
  --pf-v6-c-avatar--m-lg--Width: 4.5rem;
10152
10155
  --pf-v6-c-avatar--m-lg--Height: 4.5rem;
10156
+ --pf-v6-c-avatar--m-lg--FontSize: calc(4.5rem / 1.414);
10153
10157
  --pf-v6-c-avatar--m-xl--Width: 8rem;
10154
10158
  --pf-v6-c-avatar--m-xl--Height: 8rem;
10159
+ --pf-v6-c-avatar--m-xl--FontSize: calc(8rem / 1.414);
10155
10160
  --pf-v6-c-avatar--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
10156
10161
  --pf-v6-c-avatar--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
10162
+ --pf-v6-c-avatar--m-colorful--BorderWidth: var(--pf-t--global--border--width--box--default);
10163
+ --pf-v6-c-avatar--m-gray--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
10164
+ --pf-v6-c-avatar--m-gray--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
10165
+ --pf-v6-c-avatar--m-gray--BorderColor: var(--pf-t--global--border--color--default);
10166
+ --pf-v6-c-avatar--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
10167
+ --pf-v6-c-avatar--m-red--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
10168
+ --pf-v6-c-avatar--m-red--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
10169
+ --pf-v6-c-avatar--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
10170
+ --pf-v6-c-avatar--m-orangered--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
10171
+ --pf-v6-c-avatar--m-orangered--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
10172
+ --pf-v6-c-avatar--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
10173
+ --pf-v6-c-avatar--m-orange--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
10174
+ --pf-v6-c-avatar--m-orange--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
10175
+ --pf-v6-c-avatar--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
10176
+ --pf-v6-c-avatar--m-yellow--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
10177
+ --pf-v6-c-avatar--m-yellow--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
10178
+ --pf-v6-c-avatar--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
10179
+ --pf-v6-c-avatar--m-green--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
10180
+ --pf-v6-c-avatar--m-green--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
10181
+ --pf-v6-c-avatar--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
10182
+ --pf-v6-c-avatar--m-teal--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
10183
+ --pf-v6-c-avatar--m-teal--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
10184
+ --pf-v6-c-avatar--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
10185
+ --pf-v6-c-avatar--m-blue--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
10186
+ --pf-v6-c-avatar--m-blue--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
10187
+ --pf-v6-c-avatar--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
10188
+ --pf-v6-c-avatar--m-purple--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
10189
+ --pf-v6-c-avatar--m-purple--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
10190
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-t--global--font--size--body--lg);
10191
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
10192
+ --pf-v6-c-avatar--m-sm__initials--FontSize: var(--pf-t--global--font--size--body--sm);
10193
+ --pf-v6-c-avatar--m-sm__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
10194
+ --pf-v6-c-avatar--m-lg__initials--FontSize: var(--pf-t--global--font--size--2xl);
10195
+ --pf-v6-c-avatar--m-lg__initials--FontWeight: var(--pf-t--global--font--weight--heading--bold);
10196
+ --pf-v6-c-avatar--m-lg__initials--FontFamily: var(--pf-t--global--font--family--heading);
10197
+ --pf-v6-c-avatar--m-xl__initials--FontSize: var(--pf-t--global--font--size--4xl);
10198
+ --pf-v6-c-avatar--m-xl__initials--FontWeight: var(--pf-t--global--font--weight--heading--default);
10199
+ --pf-v6-c-avatar--m-xl__initials--FontFamily: var(--pf-t--global--font--family--heading);
10200
+ --pf-v6-c-avatar--m-gray__initials--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
10201
+ --pf-v6-c-avatar--m-red__initials--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
10202
+ --pf-v6-c-avatar--m-orangered__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
10203
+ --pf-v6-c-avatar--m-orange__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
10204
+ --pf-v6-c-avatar--m-yellow__initials--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
10205
+ --pf-v6-c-avatar--m-green__initials--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
10206
+ --pf-v6-c-avatar--m-teal__initials--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
10207
+ --pf-v6-c-avatar--m-blue__initials--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
10208
+ --pf-v6-c-avatar--m-purple__initials--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
10157
10209
  }
10158
10210
 
10159
10211
  .pf-v6-c-avatar {
10160
10212
  width: var(--pf-v6-c-avatar--Width);
10161
10213
  height: var(--pf-v6-c-avatar--Height);
10214
+ font-size: var(--pf-v6-c-avatar--FontSize);
10215
+ color: var(--pf-v6-c-avatar--Color, inherit);
10216
+ background-color: var(--pf-v6-c-avatar--BackgroundColor, transparent);
10162
10217
  border: var(--pf-v6-c-avatar--BorderWidth) solid var(--pf-v6-c-avatar--BorderColor);
10163
10218
  border-radius: var(--pf-v6-c-avatar--BorderRadius);
10164
10219
  }
10220
+ div.pf-v6-c-avatar {
10221
+ display: inline-flex;
10222
+ align-items: center;
10223
+ justify-content: center;
10224
+ overflow: clip;
10225
+ vertical-align: middle;
10226
+ }
10227
+
10165
10228
  .pf-v6-c-avatar.pf-m-bordered {
10166
10229
  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-bordered--BorderColor);
10167
10230
  --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-bordered--BorderWidth);
@@ -10390,6 +10453,87 @@
10390
10453
  --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))))));
10391
10454
  }
10392
10455
  }
10456
+ .pf-v6-c-avatar.pf-m-sm {
10457
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-sm--FontSize);
10458
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-sm__initials--FontSize);
10459
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-sm__initials--FontWeight);
10460
+ }
10461
+ .pf-v6-c-avatar.pf-m-lg {
10462
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-lg--FontSize);
10463
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-lg__initials--FontSize);
10464
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-lg__initials--FontWeight);
10465
+ --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-lg__initials--FontFamily);
10466
+ }
10467
+ .pf-v6-c-avatar.pf-m-xl {
10468
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-xl--FontSize);
10469
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-xl__initials--FontSize);
10470
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-xl__initials--FontWeight);
10471
+ --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-xl__initials--FontFamily);
10472
+ }
10473
+ .pf-v6-c-avatar.pf-m-colorful {
10474
+ --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-colorful--BorderWidth);
10475
+ }
10476
+ .pf-v6-c-avatar.pf-m-red {
10477
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-red--BackgroundColor);
10478
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-red--Color);
10479
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-red--BorderColor);
10480
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-red__initials--Color);
10481
+ }
10482
+ .pf-v6-c-avatar.pf-m-orangered {
10483
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-orangered--BackgroundColor);
10484
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-orangered--Color);
10485
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-orangered--BorderColor);
10486
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orangered__initials--Color);
10487
+ }
10488
+ .pf-v6-c-avatar.pf-m-orange {
10489
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-orange--BackgroundColor);
10490
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-orange--Color);
10491
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-orange--BorderColor);
10492
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orange__initials--Color);
10493
+ }
10494
+ .pf-v6-c-avatar.pf-m-yellow {
10495
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-yellow--BackgroundColor);
10496
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-yellow--Color);
10497
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-yellow--BorderColor);
10498
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-yellow__initials--Color);
10499
+ }
10500
+ .pf-v6-c-avatar.pf-m-green {
10501
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-green--BackgroundColor);
10502
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-green--Color);
10503
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-green--BorderColor);
10504
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-green__initials--Color);
10505
+ }
10506
+ .pf-v6-c-avatar.pf-m-teal {
10507
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-teal--BackgroundColor);
10508
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-teal--Color);
10509
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-teal--BorderColor);
10510
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-teal__initials--Color);
10511
+ }
10512
+ .pf-v6-c-avatar.pf-m-blue {
10513
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-blue--BackgroundColor);
10514
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-blue--Color);
10515
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-blue--BorderColor);
10516
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-blue__initials--Color);
10517
+ }
10518
+ .pf-v6-c-avatar.pf-m-purple {
10519
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-purple--BackgroundColor);
10520
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-purple--Color);
10521
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-purple--BorderColor);
10522
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-purple__initials--Color);
10523
+ }
10524
+ .pf-v6-c-avatar.pf-m-gray {
10525
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-gray--BackgroundColor);
10526
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-gray--Color);
10527
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-gray--BorderColor);
10528
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-gray__initials--Color);
10529
+ }
10530
+
10531
+ .pf-v6-c-avatar__initials {
10532
+ font-family: var(--pf-v6-c-avatar__initials--FontFamily, revert);
10533
+ font-size: var(--pf-v6-c-avatar__initials--FontSize);
10534
+ font-weight: var(--pf-v6-c-avatar__initials--FontWeight);
10535
+ color: var(--pf-v6-c-avatar__initials--Color);
10536
+ }
10393
10537
 
10394
10538
  .pf-v6-c-backdrop {
10395
10539
  --pf-v6-c-backdrop--Position: fixed;
package/patternfly.css CHANGED
@@ -10299,24 +10299,87 @@ button) {
10299
10299
  --pf-v6-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill);
10300
10300
  --pf-v6-c-avatar--Width: 2.25rem;
10301
10301
  --pf-v6-c-avatar--Height: 2.25rem;
10302
+ --pf-v6-c-avatar--FontSize: calc(2.25rem / 1.414);
10302
10303
  --pf-v6-c-avatar--m-sm--Width: 1.5rem;
10303
10304
  --pf-v6-c-avatar--m-sm--Height: 1.5rem;
10305
+ --pf-v6-c-avatar--m-sm--FontSize: calc(1.5rem / 1.414);
10304
10306
  --pf-v6-c-avatar--m-md--Width: 2.25rem;
10305
10307
  --pf-v6-c-avatar--m-md--Height: 2.25rem;
10308
+ --pf-v6-c-avatar--m-md--FontSize: calc(2.25rem / 1.414);
10306
10309
  --pf-v6-c-avatar--m-lg--Width: 4.5rem;
10307
10310
  --pf-v6-c-avatar--m-lg--Height: 4.5rem;
10311
+ --pf-v6-c-avatar--m-lg--FontSize: calc(4.5rem / 1.414);
10308
10312
  --pf-v6-c-avatar--m-xl--Width: 8rem;
10309
10313
  --pf-v6-c-avatar--m-xl--Height: 8rem;
10314
+ --pf-v6-c-avatar--m-xl--FontSize: calc(8rem / 1.414);
10310
10315
  --pf-v6-c-avatar--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
10311
10316
  --pf-v6-c-avatar--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
10317
+ --pf-v6-c-avatar--m-colorful--BorderWidth: var(--pf-t--global--border--width--box--default);
10318
+ --pf-v6-c-avatar--m-gray--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
10319
+ --pf-v6-c-avatar--m-gray--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
10320
+ --pf-v6-c-avatar--m-gray--BorderColor: var(--pf-t--global--border--color--default);
10321
+ --pf-v6-c-avatar--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
10322
+ --pf-v6-c-avatar--m-red--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
10323
+ --pf-v6-c-avatar--m-red--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
10324
+ --pf-v6-c-avatar--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
10325
+ --pf-v6-c-avatar--m-orangered--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
10326
+ --pf-v6-c-avatar--m-orangered--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
10327
+ --pf-v6-c-avatar--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
10328
+ --pf-v6-c-avatar--m-orange--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
10329
+ --pf-v6-c-avatar--m-orange--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
10330
+ --pf-v6-c-avatar--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
10331
+ --pf-v6-c-avatar--m-yellow--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
10332
+ --pf-v6-c-avatar--m-yellow--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
10333
+ --pf-v6-c-avatar--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
10334
+ --pf-v6-c-avatar--m-green--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
10335
+ --pf-v6-c-avatar--m-green--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
10336
+ --pf-v6-c-avatar--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
10337
+ --pf-v6-c-avatar--m-teal--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
10338
+ --pf-v6-c-avatar--m-teal--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
10339
+ --pf-v6-c-avatar--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
10340
+ --pf-v6-c-avatar--m-blue--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
10341
+ --pf-v6-c-avatar--m-blue--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
10342
+ --pf-v6-c-avatar--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
10343
+ --pf-v6-c-avatar--m-purple--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
10344
+ --pf-v6-c-avatar--m-purple--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
10345
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-t--global--font--size--body--lg);
10346
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
10347
+ --pf-v6-c-avatar--m-sm__initials--FontSize: var(--pf-t--global--font--size--body--sm);
10348
+ --pf-v6-c-avatar--m-sm__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
10349
+ --pf-v6-c-avatar--m-lg__initials--FontSize: var(--pf-t--global--font--size--2xl);
10350
+ --pf-v6-c-avatar--m-lg__initials--FontWeight: var(--pf-t--global--font--weight--heading--bold);
10351
+ --pf-v6-c-avatar--m-lg__initials--FontFamily: var(--pf-t--global--font--family--heading);
10352
+ --pf-v6-c-avatar--m-xl__initials--FontSize: var(--pf-t--global--font--size--4xl);
10353
+ --pf-v6-c-avatar--m-xl__initials--FontWeight: var(--pf-t--global--font--weight--heading--default);
10354
+ --pf-v6-c-avatar--m-xl__initials--FontFamily: var(--pf-t--global--font--family--heading);
10355
+ --pf-v6-c-avatar--m-gray__initials--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
10356
+ --pf-v6-c-avatar--m-red__initials--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
10357
+ --pf-v6-c-avatar--m-orangered__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
10358
+ --pf-v6-c-avatar--m-orange__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
10359
+ --pf-v6-c-avatar--m-yellow__initials--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
10360
+ --pf-v6-c-avatar--m-green__initials--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
10361
+ --pf-v6-c-avatar--m-teal__initials--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
10362
+ --pf-v6-c-avatar--m-blue__initials--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
10363
+ --pf-v6-c-avatar--m-purple__initials--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
10312
10364
  }
10313
10365
 
10314
10366
  .pf-v6-c-avatar {
10315
10367
  width: var(--pf-v6-c-avatar--Width);
10316
10368
  height: var(--pf-v6-c-avatar--Height);
10369
+ font-size: var(--pf-v6-c-avatar--FontSize);
10370
+ color: var(--pf-v6-c-avatar--Color, inherit);
10371
+ background-color: var(--pf-v6-c-avatar--BackgroundColor, transparent);
10317
10372
  border: var(--pf-v6-c-avatar--BorderWidth) solid var(--pf-v6-c-avatar--BorderColor);
10318
10373
  border-radius: var(--pf-v6-c-avatar--BorderRadius);
10319
10374
  }
10375
+ div.pf-v6-c-avatar {
10376
+ display: inline-flex;
10377
+ align-items: center;
10378
+ justify-content: center;
10379
+ overflow: clip;
10380
+ vertical-align: middle;
10381
+ }
10382
+
10320
10383
  .pf-v6-c-avatar.pf-m-bordered {
10321
10384
  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-bordered--BorderColor);
10322
10385
  --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-bordered--BorderWidth);
@@ -10545,6 +10608,87 @@ button) {
10545
10608
  --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))))));
10546
10609
  }
10547
10610
  }
10611
+ .pf-v6-c-avatar.pf-m-sm {
10612
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-sm--FontSize);
10613
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-sm__initials--FontSize);
10614
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-sm__initials--FontWeight);
10615
+ }
10616
+ .pf-v6-c-avatar.pf-m-lg {
10617
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-lg--FontSize);
10618
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-lg__initials--FontSize);
10619
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-lg__initials--FontWeight);
10620
+ --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-lg__initials--FontFamily);
10621
+ }
10622
+ .pf-v6-c-avatar.pf-m-xl {
10623
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-xl--FontSize);
10624
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-xl__initials--FontSize);
10625
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-xl__initials--FontWeight);
10626
+ --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-xl__initials--FontFamily);
10627
+ }
10628
+ .pf-v6-c-avatar.pf-m-colorful {
10629
+ --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-colorful--BorderWidth);
10630
+ }
10631
+ .pf-v6-c-avatar.pf-m-red {
10632
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-red--BackgroundColor);
10633
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-red--Color);
10634
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-red--BorderColor);
10635
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-red__initials--Color);
10636
+ }
10637
+ .pf-v6-c-avatar.pf-m-orangered {
10638
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-orangered--BackgroundColor);
10639
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-orangered--Color);
10640
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-orangered--BorderColor);
10641
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orangered__initials--Color);
10642
+ }
10643
+ .pf-v6-c-avatar.pf-m-orange {
10644
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-orange--BackgroundColor);
10645
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-orange--Color);
10646
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-orange--BorderColor);
10647
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orange__initials--Color);
10648
+ }
10649
+ .pf-v6-c-avatar.pf-m-yellow {
10650
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-yellow--BackgroundColor);
10651
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-yellow--Color);
10652
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-yellow--BorderColor);
10653
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-yellow__initials--Color);
10654
+ }
10655
+ .pf-v6-c-avatar.pf-m-green {
10656
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-green--BackgroundColor);
10657
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-green--Color);
10658
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-green--BorderColor);
10659
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-green__initials--Color);
10660
+ }
10661
+ .pf-v6-c-avatar.pf-m-teal {
10662
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-teal--BackgroundColor);
10663
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-teal--Color);
10664
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-teal--BorderColor);
10665
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-teal__initials--Color);
10666
+ }
10667
+ .pf-v6-c-avatar.pf-m-blue {
10668
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-blue--BackgroundColor);
10669
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-blue--Color);
10670
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-blue--BorderColor);
10671
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-blue__initials--Color);
10672
+ }
10673
+ .pf-v6-c-avatar.pf-m-purple {
10674
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-purple--BackgroundColor);
10675
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-purple--Color);
10676
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-purple--BorderColor);
10677
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-purple__initials--Color);
10678
+ }
10679
+ .pf-v6-c-avatar.pf-m-gray {
10680
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-gray--BackgroundColor);
10681
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-gray--Color);
10682
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-gray--BorderColor);
10683
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-gray__initials--Color);
10684
+ }
10685
+
10686
+ .pf-v6-c-avatar__initials {
10687
+ font-family: var(--pf-v6-c-avatar__initials--FontFamily, revert);
10688
+ font-size: var(--pf-v6-c-avatar__initials--FontSize);
10689
+ font-weight: var(--pf-v6-c-avatar__initials--FontWeight);
10690
+ color: var(--pf-v6-c-avatar__initials--Color);
10691
+ }
10548
10692
 
10549
10693
  .pf-v6-c-backdrop {
10550
10694
  --pf-v6-c-backdrop--Position: fixed;