@patternfly/patternfly 6.6.0-prerelease.8 → 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 (13) hide show
  1. package/assets/images/pf-logo-avatar.jpg +0 -0
  2. package/components/Avatar/avatar.css +54 -51
  3. package/components/Avatar/avatar.scss +82 -81
  4. package/components/_index.css +54 -51
  5. package/docs/components/Avatar/examples/Avatar.css +6 -0
  6. package/docs/components/Avatar/examples/Avatar.md +182 -121
  7. package/docs/components/MenuToggle/examples/MenuToggle.md +54 -15
  8. package/docs/demos/Compass/examples/Compass.md +75 -19
  9. package/package.json +2 -2
  10. package/patternfly-no-globals.css +54 -51
  11. package/patternfly.css +54 -51
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/assets/images/pf-logo-avatar.jpg ADDED
Binary file
package/components/Avatar/avatar.css CHANGED
@@ -4,19 +4,19 @@
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
+ --pf-v6-c-avatar--FontSize: calc(2.25rem / 1.414);
8
8
  --pf-v6-c-avatar--m-sm--Width: 1.5rem;
9
9
  --pf-v6-c-avatar--m-sm--Height: 1.5rem;
10
- --pf-v6-c-avatar--m-sm--FontSize: 1.5rem;
10
+ --pf-v6-c-avatar--m-sm--FontSize: calc(1.5rem / 1.414);
11
11
  --pf-v6-c-avatar--m-md--Width: 2.25rem;
12
12
  --pf-v6-c-avatar--m-md--Height: 2.25rem;
13
- --pf-v6-c-avatar--m-md--FontSize: 2.25rem;
13
+ --pf-v6-c-avatar--m-md--FontSize: calc(2.25rem / 1.414);
14
14
  --pf-v6-c-avatar--m-lg--Width: 4.5rem;
15
15
  --pf-v6-c-avatar--m-lg--Height: 4.5rem;
16
- --pf-v6-c-avatar--m-lg--FontSize: 4.5rem;
16
+ --pf-v6-c-avatar--m-lg--FontSize: calc(4.5rem / 1.414);
17
17
  --pf-v6-c-avatar--m-xl--Width: 8rem;
18
18
  --pf-v6-c-avatar--m-xl--Height: 8rem;
19
- --pf-v6-c-avatar--m-xl--FontSize: 8rem;
19
+ --pf-v6-c-avatar--m-xl--FontSize: calc(8rem / 1.414);
20
20
  --pf-v6-c-avatar--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
21
21
  --pf-v6-c-avatar--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
22
22
  --pf-v6-c-avatar--m-colorful--BorderWidth: var(--pf-t--global--border--width--box--default);
@@ -72,9 +72,19 @@
72
72
  width: var(--pf-v6-c-avatar--Width);
73
73
  height: var(--pf-v6-c-avatar--Height);
74
74
  font-size: var(--pf-v6-c-avatar--FontSize);
75
+ color: var(--pf-v6-c-avatar--Color, inherit);
76
+ background-color: var(--pf-v6-c-avatar--BackgroundColor, transparent);
75
77
  border: var(--pf-v6-c-avatar--BorderWidth) solid var(--pf-v6-c-avatar--BorderColor);
76
78
  border-radius: var(--pf-v6-c-avatar--BorderRadius);
77
79
  }
80
+ div.pf-v6-c-avatar {
81
+ display: inline-flex;
82
+ align-items: center;
83
+ justify-content: center;
84
+ overflow: clip;
85
+ vertical-align: middle;
86
+ }
87
+
78
88
  .pf-v6-c-avatar.pf-m-bordered {
79
89
  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-bordered--BorderColor);
80
90
  --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-bordered--BorderWidth);
@@ -322,70 +332,63 @@
322
332
  }
323
333
  .pf-v6-c-avatar.pf-m-colorful {
324
334
  --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);
335
+ }
336
+ .pf-v6-c-avatar.pf-m-red {
337
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-red--BackgroundColor);
338
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-red--Color);
339
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-red--BorderColor);
338
340
  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-red__initials--Color);
339
341
  }
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);
342
+ .pf-v6-c-avatar.pf-m-orangered {
343
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-orangered--BackgroundColor);
344
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-orangered--Color);
345
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-orangered--BorderColor);
344
346
  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orangered__initials--Color);
345
347
  }
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);
348
+ .pf-v6-c-avatar.pf-m-orange {
349
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-orange--BackgroundColor);
350
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-orange--Color);
351
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-orange--BorderColor);
350
352
  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orange__initials--Color);
351
353
  }
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);
354
+ .pf-v6-c-avatar.pf-m-yellow {
355
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-yellow--BackgroundColor);
356
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-yellow--Color);
357
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-yellow--BorderColor);
356
358
  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-yellow__initials--Color);
357
359
  }
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);
360
+ .pf-v6-c-avatar.pf-m-green {
361
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-green--BackgroundColor);
362
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-green--Color);
363
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-green--BorderColor);
362
364
  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-green__initials--Color);
363
365
  }
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);
366
+ .pf-v6-c-avatar.pf-m-teal {
367
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-teal--BackgroundColor);
368
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-teal--Color);
369
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-teal--BorderColor);
368
370
  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-teal__initials--Color);
369
371
  }
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);
372
+ .pf-v6-c-avatar.pf-m-blue {
373
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-blue--BackgroundColor);
374
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-blue--Color);
375
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-blue--BorderColor);
374
376
  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-blue__initials--Color);
375
377
  }
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);
378
+ .pf-v6-c-avatar.pf-m-purple {
379
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-purple--BackgroundColor);
380
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-purple--Color);
381
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-purple--BorderColor);
380
382
  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-purple__initials--Color);
381
383
  }
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);
384
+ .pf-v6-c-avatar.pf-m-gray {
385
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-gray--BackgroundColor);
386
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-gray--Color);
387
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-gray--BorderColor);
386
388
  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-gray__initials--Color);
387
389
  }
388
- .pf-v6-c-avatar .pf-v6-c-avatar__initials {
390
+
391
+ .pf-v6-c-avatar__initials {
389
392
  font-family: var(--pf-v6-c-avatar__initials--FontFamily, revert);
390
393
  font-size: var(--pf-v6-c-avatar__initials--FontSize);
391
394
  font-weight: var(--pf-v6-c-avatar__initials--FontWeight);
package/components/Avatar/avatar.scss CHANGED
@@ -9,19 +9,19 @@ $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
+ --#{$avatar}--FontSize: calc(#{pf-size-prem(36px)} / 1.414); // 1.414 is the square root of 2, used to get the inner square of the avatar
13
13
  --#{$avatar}--m-sm--Width: #{pf-size-prem(24px)};
14
14
  --#{$avatar}--m-sm--Height: #{pf-size-prem(24px)};
15
- --#{$avatar}--m-sm--FontSize: #{pf-size-prem(24px)};
15
+ --#{$avatar}--m-sm--FontSize: calc(#{pf-size-prem(24px)} / 1.414);
16
16
  --#{$avatar}--m-md--Width: #{pf-size-prem(36px)};
17
17
  --#{$avatar}--m-md--Height: #{pf-size-prem(36px)};
18
- --#{$avatar}--m-md--FontSize: #{pf-size-prem(36px)};
18
+ --#{$avatar}--m-md--FontSize: calc(#{pf-size-prem(36px)} / 1.414);
19
19
  --#{$avatar}--m-lg--Width: #{pf-size-prem(72px)};
20
20
  --#{$avatar}--m-lg--Height: #{pf-size-prem(72px)};
21
- --#{$avatar}--m-lg--FontSize: #{pf-size-prem(72px)};
21
+ --#{$avatar}--m-lg--FontSize: calc(#{pf-size-prem(72px)} / 1.414);
22
22
  --#{$avatar}--m-xl--Width: #{pf-size-prem(128px)};
23
23
  --#{$avatar}--m-xl--Height: #{pf-size-prem(128px)};
24
- --#{$avatar}--m-xl--FontSize: #{pf-size-prem(128px)};
24
+ --#{$avatar}--m-xl--FontSize: calc(#{pf-size-prem(128px)} / 1.414);
25
25
 
26
26
  // Bordered
27
27
  --#{$avatar}--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
@@ -83,9 +83,19 @@ $pf-v6-c-avatar--sizes: "sm", "md", "lg", "xl";
83
83
  width: var(--#{$avatar}--Width);
84
84
  height: var(--#{$avatar}--Height);
85
85
  font-size: var(--#{$avatar}--FontSize);
86
+ color: var(--#{$avatar}--Color, inherit);
87
+ background-color: var(--#{$avatar}--BackgroundColor, transparent);
86
88
  border: var(--#{$avatar}--BorderWidth) solid var(--#{$avatar}--BorderColor);
87
89
  border-radius: var(--#{$avatar}--BorderRadius);
88
90
 
91
+ @at-root div#{&} {
92
+ display: inline-flex;
93
+ align-items: center;
94
+ justify-content: center;
95
+ overflow: clip;
96
+ vertical-align: middle;
97
+ }
98
+
89
99
  &.pf-m-bordered {
90
100
  --#{$avatar}--BorderColor: var(--#{$avatar}--m-bordered--BorderColor);
91
101
  --#{$avatar}--BorderWidth: var(--#{$avatar}--m-bordered--BorderWidth);
@@ -120,84 +130,75 @@ $pf-v6-c-avatar--sizes: "sm", "md", "lg", "xl";
120
130
 
121
131
  &.pf-m-colorful {
122
132
  --#{$avatar}--BorderWidth: var(--#{$avatar}--m-colorful--BorderWidth);
133
+ }
123
134
 
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
- }
135
+ &.pf-m-red {
136
+ --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-red--BackgroundColor);
137
+ --#{$avatar}--Color: var(--#{$avatar}--m-red--Color);
138
+ --#{$avatar}--BorderColor: var(--#{$avatar}--m-red--BorderColor);
139
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-red__initials--Color);
140
+ }
141
+
142
+ &.pf-m-orangered {
143
+ --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-orangered--BackgroundColor);
144
+ --#{$avatar}--Color: var(--#{$avatar}--m-orangered--Color);
145
+ --#{$avatar}--BorderColor: var(--#{$avatar}--m-orangered--BorderColor);
146
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-orangered__initials--Color);
147
+ }
148
+
149
+ &.pf-m-orange {
150
+ --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-orange--BackgroundColor);
151
+ --#{$avatar}--Color: var(--#{$avatar}--m-orange--Color);
152
+ --#{$avatar}--BorderColor: var(--#{$avatar}--m-orange--BorderColor);
153
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-orange__initials--Color);
154
+ }
155
+
156
+ &.pf-m-yellow {
157
+ --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-yellow--BackgroundColor);
158
+ --#{$avatar}--Color: var(--#{$avatar}--m-yellow--Color);
159
+ --#{$avatar}--BorderColor: var(--#{$avatar}--m-yellow--BorderColor);
160
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-yellow__initials--Color);
161
+ }
162
+
163
+ &.pf-m-green {
164
+ --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-green--BackgroundColor);
165
+ --#{$avatar}--Color: var(--#{$avatar}--m-green--Color);
166
+ --#{$avatar}--BorderColor: var(--#{$avatar}--m-green--BorderColor);
167
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-green__initials--Color);
195
168
  }
196
169
 
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);
170
+ &.pf-m-teal {
171
+ --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-teal--BackgroundColor);
172
+ --#{$avatar}--Color: var(--#{$avatar}--m-teal--Color);
173
+ --#{$avatar}--BorderColor: var(--#{$avatar}--m-teal--BorderColor);
174
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-teal__initials--Color);
202
175
  }
176
+
177
+ &.pf-m-blue {
178
+ --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-blue--BackgroundColor);
179
+ --#{$avatar}--Color: var(--#{$avatar}--m-blue--Color);
180
+ --#{$avatar}--BorderColor: var(--#{$avatar}--m-blue--BorderColor);
181
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-blue__initials--Color);
182
+ }
183
+
184
+ &.pf-m-purple {
185
+ --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-purple--BackgroundColor);
186
+ --#{$avatar}--Color: var(--#{$avatar}--m-purple--Color);
187
+ --#{$avatar}--BorderColor: var(--#{$avatar}--m-purple--BorderColor);
188
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-purple__initials--Color);
189
+ }
190
+
191
+ &.pf-m-gray {
192
+ --#{$avatar}--BackgroundColor: var(--#{$avatar}--m-gray--BackgroundColor);
193
+ --#{$avatar}--Color: var(--#{$avatar}--m-gray--Color);
194
+ --#{$avatar}--BorderColor: var(--#{$avatar}--m-gray--BorderColor);
195
+ --#{$avatar}__initials--Color: var(--#{$avatar}--m-gray__initials--Color);
196
+ }
197
+ }
198
+
199
+ .#{$avatar}__initials {
200
+ font-family: var(--#{$avatar}__initials--FontFamily, revert);
201
+ font-size: var(--#{$avatar}__initials--FontSize);
202
+ font-weight: var(--#{$avatar}__initials--FontWeight);
203
+ color: var(--#{$avatar}__initials--Color);
203
204
  }
package/components/_index.css CHANGED
@@ -888,19 +888,19 @@
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
+ --pf-v6-c-avatar--FontSize: calc(2.25rem / 1.414);
892
892
  --pf-v6-c-avatar--m-sm--Width: 1.5rem;
893
893
  --pf-v6-c-avatar--m-sm--Height: 1.5rem;
894
- --pf-v6-c-avatar--m-sm--FontSize: 1.5rem;
894
+ --pf-v6-c-avatar--m-sm--FontSize: calc(1.5rem / 1.414);
895
895
  --pf-v6-c-avatar--m-md--Width: 2.25rem;
896
896
  --pf-v6-c-avatar--m-md--Height: 2.25rem;
897
- --pf-v6-c-avatar--m-md--FontSize: 2.25rem;
897
+ --pf-v6-c-avatar--m-md--FontSize: calc(2.25rem / 1.414);
898
898
  --pf-v6-c-avatar--m-lg--Width: 4.5rem;
899
899
  --pf-v6-c-avatar--m-lg--Height: 4.5rem;
900
- --pf-v6-c-avatar--m-lg--FontSize: 4.5rem;
900
+ --pf-v6-c-avatar--m-lg--FontSize: calc(4.5rem / 1.414);
901
901
  --pf-v6-c-avatar--m-xl--Width: 8rem;
902
902
  --pf-v6-c-avatar--m-xl--Height: 8rem;
903
- --pf-v6-c-avatar--m-xl--FontSize: 8rem;
903
+ --pf-v6-c-avatar--m-xl--FontSize: calc(8rem / 1.414);
904
904
  --pf-v6-c-avatar--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
905
905
  --pf-v6-c-avatar--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
906
906
  --pf-v6-c-avatar--m-colorful--BorderWidth: var(--pf-t--global--border--width--box--default);
@@ -956,9 +956,19 @@
956
956
  width: var(--pf-v6-c-avatar--Width);
957
957
  height: var(--pf-v6-c-avatar--Height);
958
958
  font-size: var(--pf-v6-c-avatar--FontSize);
959
+ color: var(--pf-v6-c-avatar--Color, inherit);
960
+ background-color: var(--pf-v6-c-avatar--BackgroundColor, transparent);
959
961
  border: var(--pf-v6-c-avatar--BorderWidth) solid var(--pf-v6-c-avatar--BorderColor);
960
962
  border-radius: var(--pf-v6-c-avatar--BorderRadius);
961
963
  }
964
+ div.pf-v6-c-avatar {
965
+ display: inline-flex;
966
+ align-items: center;
967
+ justify-content: center;
968
+ overflow: clip;
969
+ vertical-align: middle;
970
+ }
971
+
962
972
  .pf-v6-c-avatar.pf-m-bordered {
963
973
  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-bordered--BorderColor);
964
974
  --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-bordered--BorderWidth);
@@ -1206,70 +1216,63 @@
1206
1216
  }
1207
1217
  .pf-v6-c-avatar.pf-m-colorful {
1208
1218
  --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);
1219
+ }
1220
+ .pf-v6-c-avatar.pf-m-red {
1221
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-red--BackgroundColor);
1222
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-red--Color);
1223
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-red--BorderColor);
1222
1224
  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-red__initials--Color);
1223
1225
  }
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);
1226
+ .pf-v6-c-avatar.pf-m-orangered {
1227
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-orangered--BackgroundColor);
1228
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-orangered--Color);
1229
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-orangered--BorderColor);
1228
1230
  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orangered__initials--Color);
1229
1231
  }
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);
1232
+ .pf-v6-c-avatar.pf-m-orange {
1233
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-orange--BackgroundColor);
1234
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-orange--Color);
1235
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-orange--BorderColor);
1234
1236
  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orange__initials--Color);
1235
1237
  }
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);
1238
+ .pf-v6-c-avatar.pf-m-yellow {
1239
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-yellow--BackgroundColor);
1240
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-yellow--Color);
1241
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-yellow--BorderColor);
1240
1242
  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-yellow__initials--Color);
1241
1243
  }
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);
1244
+ .pf-v6-c-avatar.pf-m-green {
1245
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-green--BackgroundColor);
1246
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-green--Color);
1247
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-green--BorderColor);
1246
1248
  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-green__initials--Color);
1247
1249
  }
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);
1250
+ .pf-v6-c-avatar.pf-m-teal {
1251
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-teal--BackgroundColor);
1252
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-teal--Color);
1253
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-teal--BorderColor);
1252
1254
  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-teal__initials--Color);
1253
1255
  }
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);
1256
+ .pf-v6-c-avatar.pf-m-blue {
1257
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-blue--BackgroundColor);
1258
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-blue--Color);
1259
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-blue--BorderColor);
1258
1260
  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-blue__initials--Color);
1259
1261
  }
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);
1262
+ .pf-v6-c-avatar.pf-m-purple {
1263
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-purple--BackgroundColor);
1264
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-purple--Color);
1265
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-purple--BorderColor);
1264
1266
  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-purple__initials--Color);
1265
1267
  }
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);
1268
+ .pf-v6-c-avatar.pf-m-gray {
1269
+ --pf-v6-c-avatar--BackgroundColor: var(--pf-v6-c-avatar--m-gray--BackgroundColor);
1270
+ --pf-v6-c-avatar--Color: var(--pf-v6-c-avatar--m-gray--Color);
1271
+ --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-gray--BorderColor);
1270
1272
  --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-gray__initials--Color);
1271
1273
  }
1272
- .pf-v6-c-avatar .pf-v6-c-avatar__initials {
1274
+
1275
+ .pf-v6-c-avatar__initials {
1273
1276
  font-family: var(--pf-v6-c-avatar__initials--FontFamily, revert);
1274
1277
  font-size: var(--pf-v6-c-avatar__initials--FontSize);
1275
1278
  font-weight: var(--pf-v6-c-avatar__initials--FontWeight);
package/docs/components/Avatar/examples/Avatar.css ADDED
@@ -0,0 +1,6 @@
1
+ .ws-core-c-avatar .ws-preview-html {
2
+ display: flex;
3
+ flex-wrap: wrap;
4
+ gap: var(--pf-t--global--spacer--sm);
5
+ align-items: end;
6
+ }