@patternfly/patternfly 6.6.0-prerelease.2 → 6.6.0-prerelease.20

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 (106) 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/img_avatar-rhds.svg +22 -0
  8. package/assets/images/pf-logo-avatar.jpg +0 -0
  9. package/base/patternfly-fonts.css +4 -4
  10. package/base/patternfly-fonts.scss +4 -4
  11. package/base/patternfly-variables.css +8 -6
  12. package/base/tokens/tokens-charts-dark.scss +1 -1
  13. package/base/tokens/tokens-charts-highcontrast-dark.scss +1 -1
  14. package/base/tokens/tokens-charts-highcontrast.scss +1 -1
  15. package/base/tokens/tokens-charts.scss +1 -1
  16. package/base/tokens/tokens-dark.scss +1 -1
  17. package/base/tokens/tokens-default.scss +4 -4
  18. package/base/tokens/tokens-felt-dark.scss +1 -1
  19. package/base/tokens/tokens-felt-glass-dark.scss +1 -1
  20. package/base/tokens/tokens-felt-glass.scss +3 -2
  21. package/base/tokens/tokens-felt-highcontrast-dark.scss +1 -1
  22. package/base/tokens/tokens-felt-highcontrast.scss +1 -1
  23. package/base/tokens/tokens-felt.scss +1 -1
  24. package/base/tokens/tokens-glass-dark.scss +1 -1
  25. package/base/tokens/tokens-glass.scss +3 -2
  26. package/base/tokens/tokens-highcontrast-dark.scss +1 -1
  27. package/base/tokens/tokens-highcontrast.scss +4 -4
  28. package/base/tokens/tokens-palette.scss +1 -1
  29. package/base/tokens/tokens-redhat-highcontrast.scss +3 -3
  30. package/components/AboutModalBox/about-modal-box.css +1 -1
  31. package/components/AboutModalBox/about-modal-box.scss +1 -1
  32. package/components/Alert/alert.css +3 -2
  33. package/components/Alert/alert.scss +3 -2
  34. package/components/Avatar/avatar.css +144 -0
  35. package/components/Avatar/avatar.scss +161 -0
  36. package/components/Banner/banner.css +7 -0
  37. package/components/Banner/banner.scss +7 -0
  38. package/components/Breadcrumb/breadcrumb.css +1 -1
  39. package/components/Breadcrumb/breadcrumb.scss +1 -1
  40. package/components/Button/button.css +18 -1
  41. package/components/Button/button.scss +21 -1
  42. package/components/ClipboardCopy/clipboard-copy.css +1 -1
  43. package/components/ClipboardCopy/clipboard-copy.scss +1 -1
  44. package/components/Compass/compass.css +5 -1
  45. package/components/Compass/compass.scss +5 -1
  46. package/components/DragDrop/drag-drop.css +4 -0
  47. package/components/DragDrop/drag-drop.scss +4 -0
  48. package/components/DualListSelector/dual-list-selector.css +1 -1
  49. package/components/DualListSelector/dual-list-selector.scss +1 -1
  50. package/components/Masthead/masthead.css +1 -1
  51. package/components/Masthead/masthead.scss +1 -1
  52. package/components/Menu/menu.css +1 -1
  53. package/components/Menu/menu.scss +1 -1
  54. package/components/MenuToggle/menu-toggle.css +3 -0
  55. package/components/MenuToggle/menu-toggle.scss +4 -1
  56. package/components/ModalBox/modal-box.css +1 -1
  57. package/components/ModalBox/modal-box.scss +1 -1
  58. package/components/NotificationDrawer/notification-drawer.css +3 -3
  59. package/components/NotificationDrawer/notification-drawer.scss +3 -3
  60. package/components/Page/page.css +30 -23
  61. package/components/Page/page.scss +35 -29
  62. package/components/Panel/panel.css +1 -1
  63. package/components/Panel/panel.scss +2 -2
  64. package/components/Progress/progress.css +2 -2
  65. package/components/Progress/progress.scss +2 -2
  66. package/components/Sidebar/sidebar.css +4 -7
  67. package/components/Sidebar/sidebar.scss +9 -9
  68. package/components/Table/table-tree-view.css +3 -0
  69. package/components/Table/table-tree-view.scss +2 -0
  70. package/components/Table/table.css +53 -19
  71. package/components/Table/table.scss +80 -32
  72. package/components/Title/title.css +1 -1
  73. package/components/Title/title.scss +1 -1
  74. package/components/Tooltip/tooltip.css +1 -1
  75. package/components/Tooltip/tooltip.scss +1 -1
  76. package/components/TreeView/tree-view.css +1 -1
  77. package/components/TreeView/tree-view.scss +1 -1
  78. package/components/Wizard/wizard.css +3 -3
  79. package/components/Wizard/wizard.scss +3 -3
  80. package/components/_index.css +293 -72
  81. package/docs/components/Avatar/examples/Avatar.css +6 -0
  82. package/docs/components/Avatar/examples/Avatar.md +414 -40
  83. package/docs/components/Drawer/examples/Drawer.md +1 -1
  84. package/docs/components/DualListSelector/examples/DualListSelector.md +85 -85
  85. package/docs/components/InputGroup/examples/InputGroup.md +1 -1
  86. package/docs/components/MenuToggle/examples/MenuToggle.md +54 -15
  87. package/docs/components/Pagination/examples/Pagination.md +120 -120
  88. package/docs/components/Sidebar/examples/Sidebar.md +3 -1
  89. package/docs/components/Table/examples/Table.css +6 -0
  90. package/docs/components/Table/examples/Table.md +305 -18
  91. package/docs/components/Toolbar/examples/Toolbar.md +16 -16
  92. package/docs/components/TreeView/examples/TreeView.md +100 -100
  93. package/docs/demos/CardView/examples/CardView.md +12 -12
  94. package/docs/demos/Compass/examples/Compass.md +91 -35
  95. package/docs/demos/Dashboard/examples/Dashboard.md +27 -30
  96. package/docs/demos/DataList/examples/DataList.md +48 -48
  97. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +20 -20
  98. package/docs/demos/Table/examples/Table.md +160 -160
  99. package/docs/demos/Toolbar/examples/Toolbar.md +36 -36
  100. package/package.json +6 -6
  101. package/patternfly-base-no-globals.css +12 -10
  102. package/patternfly-base.css +12 -10
  103. package/patternfly-no-globals.css +305 -82
  104. package/patternfly.css +305 -82
  105. package/patternfly.min.css +1 -1
  106. package/patternfly.min.css.map +1 -1
package/assets/images/img_avatar-rhds.svg ADDED
@@ -0,0 +1,22 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
2
+ <g>
3
+ <rect width="48" height="48" fill="#147878"/>
4
+ <rect x="36" y="42" width="6" height="6" fill="#004D4D"/>
5
+ <rect x="6" y="42" width="6" height="6" fill="#004D4D"/>
6
+ <rect x="12" y="36" width="24" height="6" fill="#004D4D"/>
7
+ <rect x="18" y="30" width="12" height="6" fill="#004D4D"/>
8
+ <rect width="6" height="24" transform="matrix(-1 0 0 1 48 12)" fill="#004D4D"/>
9
+ <rect width="6" height="6" transform="matrix(-1 0 0 1 42 30)" fill="#004D4D"/>
10
+ <rect width="6" height="6" transform="matrix(-1 0 0 1 36 24)" fill="#004D4D"/>
11
+ <rect width="6" height="6" transform="matrix(-1 0 0 1 42 18)" fill="#004D4D"/>
12
+ <rect width="6" height="6" transform="matrix(-1 0 0 1 36 12)" fill="#004D4D"/>
13
+ <rect width="6" height="6" transform="matrix(-1 0 0 1 42 6)" fill="#004D4D"/>
14
+ <rect x="18" width="12" height="12" fill="#004D4D"/>
15
+ <rect x="6" y="30" width="6" height="6" fill="#004D4D"/>
16
+ <rect x="12" y="24" width="6" height="6" fill="#004D4D"/>
17
+ <rect x="6" y="18" width="6" height="6" fill="#004D4D"/>
18
+ <rect x="12" y="12" width="6" height="6" fill="#004D4D"/>
19
+ <rect x="6" y="6" width="6" height="6" fill="#004D4D"/>
20
+ <rect y="12" width="6" height="24" fill="#004D4D"/>
21
+ </g>
22
+ </svg>
package/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;
@@ -1764,6 +1764,7 @@
1764
1764
  --pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
1765
1765
  --pf-t--global--border--radius--glass--default: var(--pf-t--global--border--radius--medium);
1766
1766
  --pf-t--global--border--width--glass--default: var(--pf-t--global--border--width--regular);
1767
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--md);
1767
1768
  --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
1768
1769
  --pf-t--global--background--image--default: var(--pf-t--global--background--image--glass, url("../assets/images/PF-Bkg-Generic-Light.svg"));
1769
1770
  --pf-t--global--box-shadow--glass--default: var(--pf-t--global--box-shadow--md);
@@ -1917,6 +1918,7 @@
1917
1918
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
1918
1919
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
1919
1920
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
1921
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--md);
1920
1922
  --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
1921
1923
  --pf-t--global--background--image--default: var(--pf-t--global--background--image--felt--glass, url("../assets/images/Felt-Bkg-Generic-Light.svg"));
1922
1924
  }
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,8 +1,8 @@
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
- // Only tokens that differ from base theme (23 tokens)
5
+ // Only tokens that differ from base theme (24 tokens)
6
6
  @mixin pf-v6-tokens {
7
7
  --pf-t--global--background--color--glass--primary--default: rgb(255, 255, 255, 0.5000);
8
8
  --pf-t--global--background--color--primary--clicked: rgb(199, 199, 199, 0.3000);
@@ -26,5 +26,6 @@
26
26
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
27
27
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
28
28
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
29
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--md);
29
30
  --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
30
31
  }
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,8 +1,8 @@
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
- // Only tokens that differ from base theme (15 tokens)
5
+ // Only tokens that differ from base theme (16 tokens)
6
6
  @mixin pf-v6-tokens {
7
7
  --pf-t--global--background--color--glass--primary--default: rgb(255, 255, 255, 0.5000);
8
8
  --pf-t--global--background--color--primary--clicked: rgb(199, 199, 199, 0.3000);
@@ -18,5 +18,6 @@
18
18
  --pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
19
19
  --pf-t--global--border--radius--glass--default: var(--pf-t--global--border--radius--medium);
20
20
  --pf-t--global--border--width--glass--default: var(--pf-t--global--border--width--regular);
21
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--md);
21
22
  --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
22
23
  }
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/AboutModalBox/about-modal-box.css CHANGED
@@ -164,7 +164,7 @@
164
164
  overflow-x: hidden;
165
165
  overflow-y: auto;
166
166
  overscroll-behavior: contain;
167
- overflow-wrap: break-word;
167
+ overflow-wrap: anywhere;
168
168
  -webkit-overflow-scrolling: touch;
169
169
  }
170
170
  @media screen and (min-width: 36rem) {
package/components/AboutModalBox/about-modal-box.scss CHANGED
@@ -176,7 +176,7 @@
176
176
  overflow-x: hidden;
177
177
  overflow-y: auto;
178
178
  overscroll-behavior: contain;
179
- overflow-wrap: break-word;
179
+ overflow-wrap: anywhere;
180
180
  -webkit-overflow-scrolling: touch;
181
181
 
182
182
  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
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);
@@ -162,7 +163,7 @@
162
163
  grid-area: title;
163
164
  font-weight: var(--pf-v6-c-alert__title--FontWeight);
164
165
  color: var(--pf-v6-c-alert__title--Color);
165
- overflow-wrap: break-word;
166
+ overflow-wrap: anywhere;
166
167
  }
167
168
  .pf-v6-c-alert__title.pf-m-truncate {
168
169
  display: -webkit-box;
@@ -174,7 +175,7 @@
174
175
  .pf-v6-c-alert__description {
175
176
  grid-area: description;
176
177
  padding-block-start: var(--pf-v6-c-alert__description--PaddingBlockStart);
177
- overflow-wrap: break-word;
178
+ overflow-wrap: anywhere;
178
179
  }
179
180
  .pf-v6-c-alert__description + .pf-v6-c-alert__action-group {
180
181
  --pf-v6-c-alert__action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart);
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);
@@ -204,7 +205,7 @@
204
205
  grid-area: title;
205
206
  font-weight: var(--#{$alert}__title--FontWeight);
206
207
  color: var(--#{$alert}__title--Color);
207
- overflow-wrap: break-word;
208
+ overflow-wrap: anywhere;
208
209
 
209
210
  &.pf-m-truncate {
210
211
  @include pf-v6-line-clamp("var(--#{$alert}__title--max-lines)");
@@ -214,7 +215,7 @@
214
215
  .#{$alert}__description {
215
216
  grid-area: description;
216
217
  padding-block-start: var(--#{$alert}__description--PaddingBlockStart);
217
- overflow-wrap: break-word;
218
+ overflow-wrap: anywhere;
218
219
 
219
220
  + .#{$alert}__action-group {
220
221
  --#{$alert}__action-group--PaddingBlockStart: var(--#{$alert}__description--action-group--PaddingBlockStart);
package/components/Avatar/avatar.css CHANGED
@@ -4,24 +4,87 @@
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: calc(2.25rem / 1.414);
7
8
  --pf-v6-c-avatar--m-sm--Width: 1.5rem;
8
9
  --pf-v6-c-avatar--m-sm--Height: 1.5rem;
10
+ --pf-v6-c-avatar--m-sm--FontSize: calc(1.5rem / 1.414);
9
11
  --pf-v6-c-avatar--m-md--Width: 2.25rem;
10
12
  --pf-v6-c-avatar--m-md--Height: 2.25rem;
13
+ --pf-v6-c-avatar--m-md--FontSize: calc(2.25rem / 1.414);
11
14
  --pf-v6-c-avatar--m-lg--Width: 4.5rem;
12
15
  --pf-v6-c-avatar--m-lg--Height: 4.5rem;
16
+ --pf-v6-c-avatar--m-lg--FontSize: calc(4.5rem / 1.414);
13
17
  --pf-v6-c-avatar--m-xl--Width: 8rem;
14
18
  --pf-v6-c-avatar--m-xl--Height: 8rem;
19
+ --pf-v6-c-avatar--m-xl--FontSize: calc(8rem / 1.414);
15
20
  --pf-v6-c-avatar--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
16
21
  --pf-v6-c-avatar--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
22
+ --pf-v6-c-avatar--m-colorful--BorderWidth: var(--pf-t--global--border--width--box--default);
23
+ --pf-v6-c-avatar--m-gray--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
24
+ --pf-v6-c-avatar--m-gray--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
25
+ --pf-v6-c-avatar--m-gray--BorderColor: var(--pf-t--global--border--color--default);
26
+ --pf-v6-c-avatar--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
27
+ --pf-v6-c-avatar--m-red--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
28
+ --pf-v6-c-avatar--m-red--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
29
+ --pf-v6-c-avatar--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
30
+ --pf-v6-c-avatar--m-orangered--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
31
+ --pf-v6-c-avatar--m-orangered--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
32
+ --pf-v6-c-avatar--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
33
+ --pf-v6-c-avatar--m-orange--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
34
+ --pf-v6-c-avatar--m-orange--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
35
+ --pf-v6-c-avatar--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
36
+ --pf-v6-c-avatar--m-yellow--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
37
+ --pf-v6-c-avatar--m-yellow--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
38
+ --pf-v6-c-avatar--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
39
+ --pf-v6-c-avatar--m-green--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
40
+ --pf-v6-c-avatar--m-green--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
41
+ --pf-v6-c-avatar--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
42
+ --pf-v6-c-avatar--m-teal--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
43
+ --pf-v6-c-avatar--m-teal--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
44
+ --pf-v6-c-avatar--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
45
+ --pf-v6-c-avatar--m-blue--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
46
+ --pf-v6-c-avatar--m-blue--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
47
+ --pf-v6-c-avatar--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
48
+ --pf-v6-c-avatar--m-purple--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
49
+ --pf-v6-c-avatar--m-purple--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
50
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-t--global--font--size--body--lg);
51
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
52
+ --pf-v6-c-avatar--m-sm__initials--FontSize: var(--pf-t--global--font--size--body--sm);
53
+ --pf-v6-c-avatar--m-sm__initials--FontWeight: var(--pf-t--global--font--weight--body--bold);
54
+ --pf-v6-c-avatar--m-lg__initials--FontSize: var(--pf-t--global--font--size--2xl);
55
+ --pf-v6-c-avatar--m-lg__initials--FontWeight: var(--pf-t--global--font--weight--heading--bold);
56
+ --pf-v6-c-avatar--m-lg__initials--FontFamily: var(--pf-t--global--font--family--heading);
57
+ --pf-v6-c-avatar--m-xl__initials--FontSize: var(--pf-t--global--font--size--4xl);
58
+ --pf-v6-c-avatar--m-xl__initials--FontWeight: var(--pf-t--global--font--weight--heading--default);
59
+ --pf-v6-c-avatar--m-xl__initials--FontFamily: var(--pf-t--global--font--family--heading);
60
+ --pf-v6-c-avatar--m-gray__initials--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
61
+ --pf-v6-c-avatar--m-red__initials--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
62
+ --pf-v6-c-avatar--m-orangered__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
63
+ --pf-v6-c-avatar--m-orange__initials--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
64
+ --pf-v6-c-avatar--m-yellow__initials--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
65
+ --pf-v6-c-avatar--m-green__initials--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
66
+ --pf-v6-c-avatar--m-teal__initials--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
67
+ --pf-v6-c-avatar--m-blue__initials--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
68
+ --pf-v6-c-avatar--m-purple__initials--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
17
69
  }
18
70
 
19
71
  .pf-v6-c-avatar {
20
72
  width: var(--pf-v6-c-avatar--Width);
21
73
  height: var(--pf-v6-c-avatar--Height);
74
+ font-size: var(--pf-v6-c-avatar--FontSize);
75
+ color: var(--pf-v6-c-avatar--Color, inherit);
76
+ background-color: var(--pf-v6-c-avatar--BackgroundColor, transparent);
22
77
  border: var(--pf-v6-c-avatar--BorderWidth) solid var(--pf-v6-c-avatar--BorderColor);
23
78
  border-radius: var(--pf-v6-c-avatar--BorderRadius);
24
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
+
25
88
  .pf-v6-c-avatar.pf-m-bordered {
26
89
  --pf-v6-c-avatar--BorderColor: var(--pf-v6-c-avatar--m-bordered--BorderColor);
27
90
  --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-bordered--BorderWidth);
@@ -249,4 +312,85 @@
249
312
  .pf-v6-c-avatar.pf-m-xl {
250
313
  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-2xl, var(--pf-v6-c-avatar--m-xl--Height-on-xl, var(--pf-v6-c-avatar--m-xl--Height-on-lg, var(--pf-v6-c-avatar--m-xl--Height-on-md, var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height))))));
251
314
  }
315
+ }
316
+ .pf-v6-c-avatar.pf-m-sm {
317
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-sm--FontSize);
318
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-sm__initials--FontSize);
319
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-sm__initials--FontWeight);
320
+ }
321
+ .pf-v6-c-avatar.pf-m-lg {
322
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-lg--FontSize);
323
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-lg__initials--FontSize);
324
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-lg__initials--FontWeight);
325
+ --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-lg__initials--FontFamily);
326
+ }
327
+ .pf-v6-c-avatar.pf-m-xl {
328
+ --pf-v6-c-avatar--FontSize: var(--pf-v6-c-avatar--m-xl--FontSize);
329
+ --pf-v6-c-avatar__initials--FontSize: var(--pf-v6-c-avatar--m-xl__initials--FontSize);
330
+ --pf-v6-c-avatar__initials--FontWeight: var(--pf-v6-c-avatar--m-xl__initials--FontWeight);
331
+ --pf-v6-c-avatar__initials--FontFamily: var(--pf-v6-c-avatar--m-xl__initials--FontFamily);
332
+ }
333
+ .pf-v6-c-avatar.pf-m-colorful {
334
+ --pf-v6-c-avatar--BorderWidth: var(--pf-v6-c-avatar--m-colorful--BorderWidth);
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);
340
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-red__initials--Color);
341
+ }
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);
346
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orangered__initials--Color);
347
+ }
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);
352
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-orange__initials--Color);
353
+ }
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);
358
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-yellow__initials--Color);
359
+ }
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);
364
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-green__initials--Color);
365
+ }
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);
370
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-teal__initials--Color);
371
+ }
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);
376
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-blue__initials--Color);
377
+ }
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);
382
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-purple__initials--Color);
383
+ }
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);
388
+ --pf-v6-c-avatar__initials--Color: var(--pf-v6-c-avatar--m-gray__initials--Color);
389
+ }
390
+
391
+ .pf-v6-c-avatar__initials {
392
+ font-family: var(--pf-v6-c-avatar__initials--FontFamily, revert);
393
+ font-size: var(--pf-v6-c-avatar__initials--FontSize);
394
+ font-weight: var(--pf-v6-c-avatar__initials--FontWeight);
395
+ color: var(--pf-v6-c-avatar__initials--Color);
252
396
  }