@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/docs/components/Avatar/examples/Avatar.md CHANGED
@@ -7,11 +7,8 @@ cssPrefix: pf-v6-c-avatar
7
7
  ### Basic
8
8
 
9
9
  ```html
10
- <img
11
- class="pf-v6-c-avatar"
12
- alt="Avatar image"
13
- src="/assets/images/img_avatar-light.svg"
14
- />
10
+ <img class="pf-v6-c-avatar" alt src="/assets/images/img_avatar-light.svg" />
11
+ <img class="pf-v6-c-avatar" alt src="/assets/images/img_avatar-rhds.svg" />
15
12
 
16
13
  ```
17
14
 
@@ -23,6 +20,11 @@ cssPrefix: pf-v6-c-avatar
23
20
  alt="Avatar image bordered"
24
21
  src="/assets/images/img_avatar-light.svg"
25
22
  />
23
+ <img
24
+ class="pf-v6-c-avatar pf-m-bordered"
25
+ alt="Avatar image bordered"
26
+ src="/assets/images/img_avatar-rhds.svg"
27
+ />
26
28
 
27
29
  ```
28
30
 
@@ -34,6 +36,11 @@ cssPrefix: pf-v6-c-avatar
34
36
  alt="Avatar image small"
35
37
  src="/assets/images/img_avatar-light.svg"
36
38
  />
39
+ <img
40
+ class="pf-v6-c-avatar pf-m-sm"
41
+ alt="Avatar image small"
42
+ src="/assets/images/img_avatar-rhds.svg"
43
+ />
37
44
 
38
45
  ```
39
46
 
@@ -45,6 +52,11 @@ cssPrefix: pf-v6-c-avatar
45
52
  alt="Avatar image medium"
46
53
  src="/assets/images/img_avatar-light.svg"
47
54
  />
55
+ <img
56
+ class="pf-v6-c-avatar pf-m-md"
57
+ alt="Avatar image medium"
58
+ src="/assets/images/img_avatar-rhds.svg"
59
+ />
48
60
 
49
61
  ```
50
62
 
@@ -56,6 +68,11 @@ cssPrefix: pf-v6-c-avatar
56
68
  alt="Avatar image large"
57
69
  src="/assets/images/img_avatar-light.svg"
58
70
  />
71
+ <img
72
+ class="pf-v6-c-avatar pf-m-lg"
73
+ alt="Avatar image large"
74
+ src="/assets/images/img_avatar-rhds.svg"
75
+ />
59
76
 
60
77
  ```
61
78
 
@@ -67,6 +84,288 @@ cssPrefix: pf-v6-c-avatar
67
84
  alt="Avatar image extra large"
68
85
  src="/assets/images/img_avatar-light.svg"
69
86
  />
87
+ <img
88
+ class="pf-v6-c-avatar pf-m-xl"
89
+ alt="Avatar image extra large"
90
+ src="/assets/images/img_avatar-rhds.svg"
91
+ />
92
+
93
+ ```
94
+
95
+ ### Colorful default
96
+
97
+ Use a color modifier to add visual interest to the default avatar icon.
98
+
99
+ ```html
100
+ <div
101
+ class="pf-v6-c-avatar pf-m-colorful pf-m-red"
102
+ role="img"
103
+ aria-label="Red avatar with icon"
104
+ >
105
+ <svg
106
+ aria-hidden="true"
107
+ data-name="Layer 1"
108
+ xmlns="http://www.w3.org/2000/svg"
109
+ version="1.1"
110
+ viewBox="0 0 36 36"
111
+ >
112
+ <path
113
+ fill="currentColor"
114
+ 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"
115
+ />
116
+ <path
117
+ fill="currentColor"
118
+ 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"
119
+ />
120
+ </svg>
121
+ </div>
122
+ <div
123
+ class="pf-v6-c-avatar pf-m-colorful pf-m-orangered"
124
+ role="img"
125
+ aria-label="Orange-red avatar with icon"
126
+ >
127
+ <svg
128
+ aria-hidden="true"
129
+ data-name="Layer 1"
130
+ xmlns="http://www.w3.org/2000/svg"
131
+ version="1.1"
132
+ viewBox="0 0 36 36"
133
+ >
134
+ <path
135
+ fill="currentColor"
136
+ 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"
137
+ />
138
+ <path
139
+ fill="currentColor"
140
+ 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"
141
+ />
142
+ </svg>
143
+ </div>
144
+ <div
145
+ class="pf-v6-c-avatar pf-m-colorful pf-m-orange"
146
+ role="img"
147
+ aria-label="Orange avatar with icon"
148
+ >
149
+ <svg
150
+ aria-hidden="true"
151
+ data-name="Layer 1"
152
+ xmlns="http://www.w3.org/2000/svg"
153
+ version="1.1"
154
+ viewBox="0 0 36 36"
155
+ >
156
+ <path
157
+ fill="currentColor"
158
+ 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"
159
+ />
160
+ <path
161
+ fill="currentColor"
162
+ 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"
163
+ />
164
+ </svg>
165
+ </div>
166
+ <div
167
+ class="pf-v6-c-avatar pf-m-colorful pf-m-yellow"
168
+ role="img"
169
+ aria-label="Yellow avatar with icon"
170
+ >
171
+ <svg
172
+ aria-hidden="true"
173
+ data-name="Layer 1"
174
+ xmlns="http://www.w3.org/2000/svg"
175
+ version="1.1"
176
+ viewBox="0 0 36 36"
177
+ >
178
+ <path
179
+ fill="currentColor"
180
+ 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"
181
+ />
182
+ <path
183
+ fill="currentColor"
184
+ 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"
185
+ />
186
+ </svg>
187
+ </div>
188
+ <div
189
+ class="pf-v6-c-avatar pf-m-colorful pf-m-green"
190
+ role="img"
191
+ aria-label="Green avatar with icon"
192
+ >
193
+ <svg
194
+ aria-hidden="true"
195
+ data-name="Layer 1"
196
+ xmlns="http://www.w3.org/2000/svg"
197
+ version="1.1"
198
+ viewBox="0 0 36 36"
199
+ >
200
+ <path
201
+ fill="currentColor"
202
+ 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"
203
+ />
204
+ <path
205
+ fill="currentColor"
206
+ 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"
207
+ />
208
+ </svg>
209
+ </div>
210
+ <div
211
+ class="pf-v6-c-avatar pf-m-colorful pf-m-teal"
212
+ role="img"
213
+ aria-label="Teal avatar with icon"
214
+ >
215
+ <svg
216
+ aria-hidden="true"
217
+ data-name="Layer 1"
218
+ xmlns="http://www.w3.org/2000/svg"
219
+ version="1.1"
220
+ viewBox="0 0 36 36"
221
+ >
222
+ <path
223
+ fill="currentColor"
224
+ 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"
225
+ />
226
+ <path
227
+ fill="currentColor"
228
+ 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"
229
+ />
230
+ </svg>
231
+ </div>
232
+ <div
233
+ class="pf-v6-c-avatar pf-m-colorful pf-m-blue"
234
+ role="img"
235
+ aria-label="Blue avatar with icon"
236
+ >
237
+ <svg
238
+ aria-hidden="true"
239
+ data-name="Layer 1"
240
+ xmlns="http://www.w3.org/2000/svg"
241
+ version="1.1"
242
+ viewBox="0 0 36 36"
243
+ >
244
+ <path
245
+ fill="currentColor"
246
+ 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"
247
+ />
248
+ <path
249
+ fill="currentColor"
250
+ 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"
251
+ />
252
+ </svg>
253
+ </div>
254
+ <div
255
+ class="pf-v6-c-avatar pf-m-colorful pf-m-purple"
256
+ role="img"
257
+ aria-label="Purple avatar with icon"
258
+ >
259
+ <svg
260
+ aria-hidden="true"
261
+ data-name="Layer 1"
262
+ xmlns="http://www.w3.org/2000/svg"
263
+ version="1.1"
264
+ viewBox="0 0 36 36"
265
+ >
266
+ <path
267
+ fill="currentColor"
268
+ 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"
269
+ />
270
+ <path
271
+ fill="currentColor"
272
+ 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"
273
+ />
274
+ </svg>
275
+ </div>
276
+ <div
277
+ class="pf-v6-c-avatar pf-m-colorful pf-m-gray"
278
+ role="img"
279
+ aria-label="Gray avatar with icon"
280
+ >
281
+ <svg
282
+ aria-hidden="true"
283
+ data-name="Layer 1"
284
+ xmlns="http://www.w3.org/2000/svg"
285
+ version="1.1"
286
+ viewBox="0 0 36 36"
287
+ >
288
+ <path
289
+ fill="currentColor"
290
+ 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"
291
+ />
292
+ <path
293
+ fill="currentColor"
294
+ 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"
295
+ />
296
+ </svg>
297
+ </div>
298
+
299
+ ```
300
+
301
+ ### Colorful initials
302
+
303
+ Use a color modifier with a user's initial to add visual interest when no image is available.
304
+
305
+ ```html
306
+ <div
307
+ class="pf-v6-c-avatar pf-m-colorful pf-m-red"
308
+ role="img"
309
+ aria-label="Red avatar with initial"
310
+ >
311
+ <span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
312
+ </div>
313
+ <div
314
+ class="pf-v6-c-avatar pf-m-colorful pf-m-orangered"
315
+ role="img"
316
+ aria-label="Orange-red avatar with initial"
317
+ >
318
+ <span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
319
+ </div>
320
+ <div
321
+ class="pf-v6-c-avatar pf-m-colorful pf-m-orange"
322
+ role="img"
323
+ aria-label="Orange avatar with initial"
324
+ >
325
+ <span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
326
+ </div>
327
+ <div
328
+ class="pf-v6-c-avatar pf-m-colorful pf-m-yellow"
329
+ role="img"
330
+ aria-label="Yellow avatar with initial"
331
+ >
332
+ <span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
333
+ </div>
334
+ <div
335
+ class="pf-v6-c-avatar pf-m-colorful pf-m-green"
336
+ role="img"
337
+ aria-label="Green avatar with initial"
338
+ >
339
+ <span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
340
+ </div>
341
+ <div
342
+ class="pf-v6-c-avatar pf-m-colorful pf-m-teal"
343
+ role="img"
344
+ aria-label="Teal avatar with initial"
345
+ >
346
+ <span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
347
+ </div>
348
+ <div
349
+ class="pf-v6-c-avatar pf-m-colorful pf-m-blue"
350
+ role="img"
351
+ aria-label="Blue avatar with initial"
352
+ >
353
+ <span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
354
+ </div>
355
+ <div
356
+ class="pf-v6-c-avatar pf-m-colorful pf-m-purple"
357
+ role="img"
358
+ aria-label="Purple avatar with initial"
359
+ >
360
+ <span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
361
+ </div>
362
+ <div
363
+ class="pf-v6-c-avatar pf-m-colorful pf-m-gray"
364
+ role="img"
365
+ aria-label="Gray avatar with initial"
366
+ >
367
+ <span class="pf-v6-c-avatar__initials" aria-hidden="true">C</span>
368
+ </div>
70
369
 
71
370
  ```
72
371
 
@@ -80,15 +379,29 @@ The avatar component provides a default SVG icon. If an image is used it should
80
379
 
81
380
  | Attribute | Applied to | Outcome |
82
381
  | -- | -- | -- |
83
- | `alt` | `.pf-v6-c-avatar` | The alt attribute describes the appearance and function of the avatar image. **Required** |
382
+ | `alt` | `.pf-v6-c-avatar` | The alt attribute describes the appearance and function of the avatar image. **Required for image avatars** |
383
+ | `role="img"` | `.pf-v6-c-avatar` | Indicates the element represents an image. **Required for colorful avatars** |
384
+ | `aria-label` | `.pf-v6-c-avatar` | Provides an accessible name for the avatar. **Required for colorful avatars** |
385
+ | `aria-hidden="true"` | `.pf-v6-c-avatar__initials`, `<svg>` | Hides decorative content from screen readers when the container has `aria-label`. |
84
386
 
85
387
  ### Usage
86
388
 
87
389
  | Class | Applied to | Outcome |
88
390
  | -- | -- | -- |
89
- | `.pf-v6-c-avatar` | `<img>` | Initiates an avatar image. **Required** |
391
+ | `.pf-v6-c-avatar` | `<img>`, `<div>` | Initiates an avatar. **Required** |
392
+ | `.pf-v6-c-avatar--colorful` | `.pf-v6-c-avatar` | Modifies an avatar to use colorful styling with a border. |
393
+ | `.pf-v6-c-avatar__initials` | `<span>` | Contains the user's initials in a colorful avatar. |
90
394
  | `.pf-m-bordered` | `.pf-v6-c-avatar` | Modifies an avatar to have a border. |
91
395
  | `.pf-m-sm{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
92
396
  | `.pf-m-md{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). **Note:** This is the default size. |
93
397
  | `.pf-m-lg{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
94
398
  | `.pf-m-xl{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
399
+ | `.pf-m-red` | `.pf-v6-c-avatar` | Modifies avatar for red styling. |
400
+ | `.pf-m-orangered` | `.pf-v6-c-avatar` | Modifies avatar for orangered styling. |
401
+ | `.pf-m-orange` | `.pf-v6-c-avatar` | Modifies avatar for orange styling. |
402
+ | `.pf-m-yellow` | `.pf-v6-c-avatar` | Modifies avatar for yellow styling. |
403
+ | `.pf-m-green` | `.pf-v6-c-avatar` | Modifies avatar for green styling. |
404
+ | `.pf-m-teal` | `.pf-v6-c-avatar` | Modifies avatar for teal styling. |
405
+ | `.pf-m-blue` | `.pf-v6-c-avatar` | Modifies avatar for blue styling. |
406
+ | `.pf-m-purple` | `.pf-v6-c-avatar` | Modifies avatar for purple styling. |
407
+ | `.pf-m-gray` | `.pf-v6-c-avatar` | Modifies avatar for gray styling. |
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -1112,7 +1112,7 @@ cssPrefix: pf-v6-c-menu-toggle
1112
1112
  <span class="pf-v6-c-menu-toggle__icon">
1113
1113
  <img
1114
1114
  class="pf-v6-c-avatar pf-m-sm"
1115
- alt="Avatar image"
1115
+ alt
1116
1116
  src="/assets/images/img_avatar-light.svg"
1117
1117
  />
1118
1118
  </span>
@@ -1145,7 +1145,7 @@ cssPrefix: pf-v6-c-menu-toggle
1145
1145
  <span class="pf-v6-c-menu-toggle__icon">
1146
1146
  <img
1147
1147
  class="pf-v6-c-avatar pf-m-sm"
1148
- alt="Avatar image"
1148
+ alt
1149
1149
  src="/assets/images/img_avatar-light.svg"
1150
1150
  />
1151
1151
  </span>
@@ -1179,7 +1179,7 @@ cssPrefix: pf-v6-c-menu-toggle
1179
1179
  <span class="pf-v6-c-menu-toggle__icon">
1180
1180
  <img
1181
1181
  class="pf-v6-c-avatar pf-m-sm"
1182
- alt="Avatar image"
1182
+ alt
1183
1183
  src="/assets/images/img_avatar-light.svg"
1184
1184
  />
1185
1185
  </span>
package/docs/demos/Compass/examples/Compass.md CHANGED
@@ -446,7 +446,7 @@ This demo populates the main Compass section with a card view, which is one of t
446
446
  <span class="pf-v6-c-menu-toggle__icon">
447
447
  <img
448
448
  class="pf-v6-c-avatar pf-m-md"
449
- alt="Avatar image"
449
+ alt
450
450
  src="/assets/images/img_avatar-light.svg"
451
451
  />
452
452
  </span>
@@ -2097,7 +2097,7 @@ This demo populates the main Compass section with a dashboard, which is often us
2097
2097
  <span class="pf-v6-c-menu-toggle__icon">
2098
2098
  <img
2099
2099
  class="pf-v6-c-avatar pf-m-md"
2100
- alt="Avatar image"
2100
+ alt
2101
2101
  src="/assets/images/img_avatar-light.svg"
2102
2102
  />
2103
2103
  </span>
@@ -4033,7 +4033,7 @@ Without a glass panel component wrapping all of the content, there is no rounded
4033
4033
  <span class="pf-v6-c-menu-toggle__icon">
4034
4034
  <img
4035
4035
  class="pf-v6-c-avatar pf-m-md"
4036
- alt="Avatar image"
4036
+ alt
4037
4037
  src="/assets/images/img_avatar-light.svg"
4038
4038
  />
4039
4039
  </span>
@@ -6630,7 +6630,7 @@ This demo showcases how you can position a side-panel drawer on top of the other
6630
6630
  <span class="pf-v6-c-menu-toggle__icon">
6631
6631
  <img
6632
6632
  class="pf-v6-c-avatar pf-m-md"
6633
- alt="Avatar image"
6633
+ alt
6634
6634
  src="/assets/images/img_avatar-light.svg"
6635
6635
  />
6636
6636
  </span>
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.8",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -10144,21 +10144,74 @@
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: 2.25rem;
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: 1.5rem;
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: 2.25rem;
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: 4.5rem;
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: 8rem;
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);
10162
10215
  border: var(--pf-v6-c-avatar--BorderWidth) solid var(--pf-v6-c-avatar--BorderColor);
10163
10216
  border-radius: var(--pf-v6-c-avatar--BorderRadius);
10164
10217
  }
@@ -10390,6 +10443,94 @@
10390
10443
  --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
10444
  }
10392
10445
  }
10446
+ .pf-v6-c-avatar.pf-m-sm {
10447
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-sm--FontSize);
10448
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-sm__initials--FontSize);
10449
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-sm__initials--FontWeight);
10450
+ }
10451
+ .pf-v6-c-avatar.pf-m-lg {
10452
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-lg--FontSize);
10453
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-lg__initials--FontSize);
10454
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-lg__initials--FontWeight);
10455
+ --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-lg__initials--FontFamily);
10456
+ }
10457
+ .pf-v6-c-avatar.pf-m-xl {
10458
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-xl--FontSize);
10459
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-xl__initials--FontSize);
10460
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-xl__initials--FontWeight);
10461
+ --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-xl__initials--FontFamily);
10462
+ }
10463
+ .pf-v6-c-avatar.pf-m-colorful {
10464
+ --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-colorful--BorderWidth);
10465
+ display: inline-flex;
10466
+ align-items: center;
10467
+ justify-content: center;
10468
+ overflow: clip;
10469
+ vertical-align: middle;
10470
+ color: var(--pf-v6-c-avatar--m-colorful--Color, inherit);
10471
+ background-color: var(--pf-v6-c-avatar--m-colorful--BackgroundColor, transparent);
10472
+ border-color: var(--pf-v6-c-avatar--m-colorful--BorderColor, transparent);
10473
+ }
10474
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-red {
10475
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-red--BackgroundColor);
10476
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-red--Color);
10477
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-red--BorderColor);
10478
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-red__initials--Color);
10479
+ }
10480
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-orangered {
10481
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-orangered--BackgroundColor);
10482
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-orangered--Color);
10483
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-orangered--BorderColor);
10484
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orangered__initials--Color);
10485
+ }
10486
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-orange {
10487
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-orange--BackgroundColor);
10488
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-orange--Color);
10489
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-orange--BorderColor);
10490
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orange__initials--Color);
10491
+ }
10492
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-yellow {
10493
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-yellow--BackgroundColor);
10494
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-yellow--Color);
10495
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-yellow--BorderColor);
10496
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-yellow__initials--Color);
10497
+ }
10498
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-green {
10499
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-green--BackgroundColor);
10500
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-green--Color);
10501
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-green--BorderColor);
10502
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-green__initials--Color);
10503
+ }
10504
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-teal {
10505
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-teal--BackgroundColor);
10506
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-teal--Color);
10507
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-teal--BorderColor);
10508
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-teal__initials--Color);
10509
+ }
10510
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-blue {
10511
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-blue--BackgroundColor);
10512
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-blue--Color);
10513
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-blue--BorderColor);
10514
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-blue__initials--Color);
10515
+ }
10516
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-purple {
10517
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-purple--BackgroundColor);
10518
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-purple--Color);
10519
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-purple--BorderColor);
10520
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-purple__initials--Color);
10521
+ }
10522
+ .pf-v6-c-avatar.pf-m-colorful.pf-m-gray {
10523
+ --pf-v6-c-avatar--m-colorful--BackgroundColor: var(--pf-v6-c-avatar--m-gray--BackgroundColor);
10524
+ --pf-v6-c-avatar--m-colorful--Color: var(--pf-v6-c-avatar--m-gray--Color);
10525
+ --pf-v6-c-avatar--m-colorful--BorderColor: var(--pf-v6-c-avatar--m-gray--BorderColor);
10526
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-gray__initials--Color);
10527
+ }
10528
+ .pf-v6-c-avatar .pf-v6-c-avatar__initials {
10529
+ font-family: var(--pf-v6-c-avatar__initials--FontFamily, revert);
10530
+ font-size: var(--pf-v6-c-avatar__initials--FontSize);
10531
+ font-weight: var(--pf-v6-c-avatar__initials--FontWeight);
10532
+ color: var(--pf-v6-c-avatar__initials--Color);
10533
+ }
10393
10534
 
10394
10535
  .pf-v6-c-backdrop {
10395
10536
  --pf-v6-c-backdrop--Position: fixed;