@patternfly/patternfly 6.6.0-prerelease.8 → 6.6.0

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 (66) hide show
  1. package/assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2 +0 -0
  2. package/assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2 +0 -0
  3. package/assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2 +0 -0
  4. package/assets/fonts/RedHatMono/RedHatMonoVF.woff2 +0 -0
  5. package/assets/fonts/RedHatText/RedHatTextVF-Italic.woff2 +0 -0
  6. package/assets/fonts/RedHatText/RedHatTextVF.woff2 +0 -0
  7. package/assets/images/pf-logo-avatar.jpg +0 -0
  8. package/base/patternfly-fonts.css +4 -4
  9. package/base/patternfly-fonts.scss +4 -4
  10. package/base/patternfly-variables.css +6 -6
  11. package/base/tokens/tokens-charts-dark.scss +1 -1
  12. package/base/tokens/tokens-charts-highcontrast-dark.scss +1 -1
  13. package/base/tokens/tokens-charts-highcontrast.scss +1 -1
  14. package/base/tokens/tokens-charts.scss +1 -1
  15. package/base/tokens/tokens-dark.scss +1 -1
  16. package/base/tokens/tokens-default.scss +4 -4
  17. package/base/tokens/tokens-felt-dark.scss +1 -1
  18. package/base/tokens/tokens-felt-glass-dark.scss +1 -1
  19. package/base/tokens/tokens-felt-glass.scss +1 -1
  20. package/base/tokens/tokens-felt-highcontrast-dark.scss +1 -1
  21. package/base/tokens/tokens-felt-highcontrast.scss +1 -1
  22. package/base/tokens/tokens-felt.scss +1 -1
  23. package/base/tokens/tokens-glass-dark.scss +1 -1
  24. package/base/tokens/tokens-glass.scss +1 -1
  25. package/base/tokens/tokens-highcontrast-dark.scss +1 -1
  26. package/base/tokens/tokens-highcontrast.scss +4 -4
  27. package/base/tokens/tokens-palette.scss +1 -1
  28. package/base/tokens/tokens-redhat-highcontrast.scss +3 -3
  29. package/components/Alert/alert.css +1 -0
  30. package/components/Alert/alert.scss +1 -0
  31. package/components/Avatar/avatar.css +54 -51
  32. package/components/Avatar/avatar.scss +82 -81
  33. package/components/Banner/banner.css +7 -0
  34. package/components/Banner/banner.scss +7 -0
  35. package/components/Button/button.css +15 -1
  36. package/components/Button/button.scss +17 -1
  37. package/components/DragDrop/drag-drop.css +4 -0
  38. package/components/DragDrop/drag-drop.scss +4 -0
  39. package/components/Page/page.css +7 -5
  40. package/components/Page/page.scss +9 -8
  41. package/components/Panel/panel.css +1 -1
  42. package/components/Panel/panel.scss +2 -2
  43. package/components/Table/table.css +26 -18
  44. package/components/Table/table.scss +37 -27
  45. package/components/_index.css +115 -76
  46. package/docs/components/Avatar/examples/Avatar.css +6 -0
  47. package/docs/components/Avatar/examples/Avatar.md +182 -121
  48. package/docs/components/DualListSelector/examples/DualListSelector.md +72 -72
  49. package/docs/components/MenuToggle/examples/MenuToggle.md +54 -15
  50. package/docs/components/Pagination/examples/Pagination.md +120 -120
  51. package/docs/components/Table/examples/Table.md +7 -0
  52. package/docs/components/Toolbar/examples/Toolbar.md +16 -16
  53. package/docs/demos/CardView/examples/CardView.md +12 -12
  54. package/docs/demos/Compass/examples/Compass.md +91 -35
  55. package/docs/demos/Dashboard/examples/Dashboard.md +27 -30
  56. package/docs/demos/DataList/examples/DataList.md +48 -48
  57. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +20 -20
  58. package/docs/demos/Table/examples/Table.md +160 -160
  59. package/docs/demos/Toolbar/examples/Toolbar.md +36 -36
  60. package/package.json +2 -2
  61. package/patternfly-base-no-globals.css +10 -10
  62. package/patternfly-base.css +10 -10
  63. package/patternfly-no-globals.css +125 -86
  64. package/patternfly.css +125 -86
  65. package/patternfly.min.css +1 -1
  66. package/patternfly.min.css.map +1 -1
package/assets/images/pf-logo-avatar.jpg ADDED
Binary file
package/base/patternfly-fonts.css CHANGED
@@ -1,28 +1,28 @@
1
1
  @font-face {
2
2
  font-family: "Red Hat Text";
3
3
  font-style: normal;
4
- font-weight: 400 500;
4
+ font-weight: 400 600;
5
5
  src: url("./assets/fonts/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
6
6
  font-display: fallback;
7
7
  }
8
8
  @font-face {
9
9
  font-family: "Red Hat Text";
10
10
  font-style: italic;
11
- font-weight: 400 500;
11
+ font-weight: 400 600;
12
12
  src: url("./assets/fonts/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
13
13
  font-display: fallback;
14
14
  }
15
15
  @font-face {
16
16
  font-family: "Red Hat Display";
17
17
  font-style: normal;
18
- font-weight: 400 700;
18
+ font-weight: 600 800;
19
19
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2") format("woff2-variations");
20
20
  font-display: fallback;
21
21
  }
22
22
  @font-face {
23
23
  font-family: "Red Hat Display";
24
24
  font-style: italic;
25
- font-weight: 400 700;
25
+ font-weight: 600 800;
26
26
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2") format("woff2-variations");
27
27
  font-display: fallback;
28
28
  }
package/base/patternfly-fonts.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  @font-face {
4
4
  font-family: "Red Hat Text";
5
5
  font-style: normal;
6
- font-weight: 400 500;
6
+ font-weight: 400 600;
7
7
  src: url("#{$pf-v6-global--font-path}/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
8
8
  font-display: fallback;
9
9
  }
@@ -11,7 +11,7 @@
11
11
  @font-face {
12
12
  font-family: "Red Hat Text";
13
13
  font-style: italic;
14
- font-weight: 400 500;
14
+ font-weight: 400 600;
15
15
  src: url("#{$pf-v6-global--font-path}/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
16
16
  font-display: fallback;
17
17
  }
@@ -19,7 +19,7 @@
19
19
  @font-face {
20
20
  font-family: "Red Hat Display";
21
21
  font-style: normal;
22
- font-weight: 400 700;
22
+ font-weight: 600 800;
23
23
  src: url("#{$pf-v6-global--font-path}/RedHatDisplay/RedHatDisplayVF.woff2") format("woff2-variations");
24
24
  font-display: fallback;
25
25
  }
@@ -27,7 +27,7 @@
27
27
  @font-face {
28
28
  font-family: "Red Hat Display";
29
29
  font-style: italic;
30
- font-weight: 400 700;
30
+ font-weight: 600 800;
31
31
  src: url("#{$pf-v6-global--font-path}/RedHatDisplay/RedHatDisplayVF-Italic.woff2") format("woff2-variations");
32
32
  font-display: fallback;
33
33
  }
package/base/patternfly-variables.css CHANGED
@@ -167,9 +167,9 @@
167
167
  --pf-t--global--font--size--700: 1.75rem;
168
168
  --pf-t--global--font--size--800: 2.25rem;
169
169
  --pf-t--global--font--weight--100: 400;
170
- --pf-t--global--font--weight--200: 500;
171
- --pf-t--global--font--weight--300: 500;
172
- --pf-t--global--font--weight--400: 700;
170
+ --pf-t--global--font--weight--200: 600;
171
+ --pf-t--global--font--weight--300: 600;
172
+ --pf-t--global--font--weight--400: 800;
173
173
  --pf-t--global--icon--size--100: 0.75rem;
174
174
  --pf-t--global--icon--size--200: 0.875rem;
175
175
  --pf-t--global--icon--size--250: 1rem;
@@ -1067,9 +1067,9 @@
1067
1067
  --pf-t--global--font--size--700: 1.75rem;
1068
1068
  --pf-t--global--font--size--800: 2.25rem;
1069
1069
  --pf-t--global--font--weight--100: 400;
1070
- --pf-t--global--font--weight--200: 500;
1071
- --pf-t--global--font--weight--300: 500;
1072
- --pf-t--global--font--weight--400: 700;
1070
+ --pf-t--global--font--weight--200: 600;
1071
+ --pf-t--global--font--weight--300: 600;
1072
+ --pf-t--global--font--weight--400: 800;
1073
1073
  --pf-t--global--icon--size--100: 0.75rem;
1074
1074
  --pf-t--global--icon--size--200: 0.875rem;
1075
1075
  --pf-t--global--icon--size--250: 1rem;
package/base/tokens/tokens-charts-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-charts-highcontrast-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-charts-highcontrast.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-charts.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgb(0, 0, 0, 0.0000);
package/base/tokens/tokens-default.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--500: rgb(21, 21, 21, 0.4000);
@@ -92,9 +92,9 @@
92
92
  --pf-t--global--font--size--700: 1.75rem;
93
93
  --pf-t--global--font--size--800: 2.25rem;
94
94
  --pf-t--global--font--weight--100: 400;
95
- --pf-t--global--font--weight--200: 500;
96
- --pf-t--global--font--weight--300: 500;
97
- --pf-t--global--font--weight--400: 700;
95
+ --pf-t--global--font--weight--200: 600;
96
+ --pf-t--global--font--weight--300: 600;
97
+ --pf-t--global--font--weight--400: 800;
98
98
  --pf-t--global--icon--size--100: 0.75rem;
99
99
  --pf-t--global--icon--size--200: 0.875rem;
100
100
  --pf-t--global--icon--size--250: 1rem;
package/base/tokens/tokens-felt-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (14 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-felt-glass-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (33 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-felt-glass.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (24 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-felt-highcontrast-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (43 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-felt-highcontrast.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (122 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-felt.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (8 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-glass-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (19 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-glass.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (16 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-highcontrast-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgb(0, 0, 0, 0.0000);
package/base/tokens/tokens-highcontrast.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--500: rgb(21, 21, 21, 0.4000);
@@ -75,9 +75,9 @@
75
75
  --pf-t--global--font--size--700: 1.75rem;
76
76
  --pf-t--global--font--size--800: 2.25rem;
77
77
  --pf-t--global--font--weight--100: 400;
78
- --pf-t--global--font--weight--200: 500;
79
- --pf-t--global--font--weight--300: 500;
80
- --pf-t--global--font--weight--400: 700;
78
+ --pf-t--global--font--weight--200: 600;
79
+ --pf-t--global--font--weight--300: 600;
80
+ --pf-t--global--font--weight--400: 800;
81
81
  --pf-t--global--icon--size--100: 0.75rem;
82
82
  --pf-t--global--icon--size--200: 0.875rem;
83
83
  --pf-t--global--icon--size--250: 1rem;
package/base/tokens/tokens-palette.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--color--black: #000000;
package/base/tokens/tokens-redhat-highcontrast.scss CHANGED
@@ -314,10 +314,10 @@
314
314
  --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200);
315
315
  --pf-t--global--font--size--xl: var(--pf-t--global--font--size--500);
316
316
  --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100);
317
- --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200);
317
+ --pf-t--global--font--weight--body--bold: 600;
318
318
  --pf-t--global--font--weight--body--default: var(--pf-t--global--font--weight--100);
319
- --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
320
- --pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300);
319
+ --pf-t--global--font--weight--heading--bold: 800;
320
+ --pf-t--global--font--weight--heading--default: 600;
321
321
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
322
322
  --pf-t--global--icon--color--150: var(--pf-t--color--gray--60);
323
323
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
package/components/Alert/alert.css CHANGED
@@ -152,6 +152,7 @@
152
152
 
153
153
  .pf-v6-c-alert__icon {
154
154
  grid-area: icon;
155
+ align-self: baseline;
155
156
  margin-inline-end: var(--pf-v6-c-alert__icon--MarginInlineEnd);
156
157
  font-size: var(--pf-v6-c-alert__icon--FontSize);
157
158
  color: var(--pf-v6-c-alert__icon--Color);
package/components/Alert/alert.scss CHANGED
@@ -194,6 +194,7 @@
194
194
 
195
195
  .#{$alert}__icon {
196
196
  grid-area: icon;
197
+ align-self: baseline;
197
198
  margin-inline-end: var(--#{$alert}__icon--MarginInlineEnd);
198
199
  font-size: var(--#{$alert}__icon--FontSize);
199
200
  color: var(--#{$alert}__icon--Color);
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);