@patternfly/patternfly 6.3.1 → 6.4.0-prerelease.1

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 (140) hide show
  1. package/README.md +23 -15
  2. package/base/normalize.scss +4 -0
  3. package/base/patternfly-variables.css +1172 -1
  4. package/base/patternfly-variables.scss +10 -0
  5. package/base/tokens/tokens-charts-dark.scss +1 -1
  6. package/base/tokens/tokens-charts.scss +1 -1
  7. package/base/tokens/tokens-dark.scss +13 -1
  8. package/base/tokens/tokens-default.scss +60 -2
  9. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  10. package/base/tokens/tokens-highcontrast.scss +703 -0
  11. package/base/tokens/tokens-local.scss +1 -0
  12. package/base/tokens/tokens-palette.scss +9 -1
  13. package/components/Accordion/accordion.css +42 -15
  14. package/components/Accordion/accordion.scss +48 -18
  15. package/components/Alert/alert-group.css +17 -15
  16. package/components/Alert/alert-group.scss +22 -18
  17. package/components/Badge/badge.css +2 -0
  18. package/components/Badge/badge.scss +2 -0
  19. package/components/Banner/banner.css +4 -0
  20. package/components/Banner/banner.scss +4 -0
  21. package/components/Button/button.css +34 -4
  22. package/components/Button/button.scss +36 -6
  23. package/components/CalendarMonth/calendar-month.css +35 -4
  24. package/components/CalendarMonth/calendar-month.scss +38 -4
  25. package/components/Card/card.css +7 -4
  26. package/components/Card/card.scss +7 -4
  27. package/components/CodeBlock/code-block.css +3 -0
  28. package/components/CodeBlock/code-block.scss +3 -0
  29. package/components/CodeEditor/code-editor.css +23 -3
  30. package/components/CodeEditor/code-editor.scss +28 -5
  31. package/components/DatePicker/date-picker.css +3 -0
  32. package/components/DatePicker/date-picker.scss +4 -0
  33. package/components/Divider/divider.css +2 -0
  34. package/components/Divider/divider.scss +2 -0
  35. package/components/Drawer/drawer.css +46 -41
  36. package/components/Drawer/drawer.scss +45 -36
  37. package/components/DualListSelector/dual-list-selector.css +21 -4
  38. package/components/DualListSelector/dual-list-selector.scss +23 -4
  39. package/components/ExpandableSection/expandable-section.css +6 -2
  40. package/components/ExpandableSection/expandable-section.scss +7 -3
  41. package/components/FormControl/form-control.css +6 -7
  42. package/components/FormControl/form-control.scss +8 -10
  43. package/components/Label/label.css +20 -11
  44. package/components/Label/label.scss +21 -11
  45. package/components/Login/login.css +3 -0
  46. package/components/Login/login.scss +3 -0
  47. package/components/Menu/menu.css +18 -0
  48. package/components/Menu/menu.scss +19 -1
  49. package/components/MenuToggle/menu-toggle.css +13 -6
  50. package/components/MenuToggle/menu-toggle.scss +13 -6
  51. package/components/ModalBox/modal-box.css +3 -0
  52. package/components/ModalBox/modal-box.scss +3 -0
  53. package/components/Nav/nav.css +17 -0
  54. package/components/Nav/nav.scss +20 -0
  55. package/components/Page/page.css +73 -25
  56. package/components/Page/page.scss +60 -19
  57. package/components/Pagination/pagination.css +15 -2
  58. package/components/Pagination/pagination.scss +15 -2
  59. package/components/Panel/panel.css +14 -1
  60. package/components/Panel/panel.scss +14 -1
  61. package/components/Popover/popover.css +4 -0
  62. package/components/Popover/popover.scss +4 -0
  63. package/components/Progress/progress.css +19 -0
  64. package/components/Progress/progress.scss +22 -0
  65. package/components/Sidebar/sidebar.css +7 -0
  66. package/components/Sidebar/sidebar.scss +7 -0
  67. package/components/SimpleList/simple-list.css +15 -0
  68. package/components/SimpleList/simple-list.scss +17 -1
  69. package/components/Slider/slider.css +9 -0
  70. package/components/Slider/slider.scss +9 -0
  71. package/components/Switch/switch.css +7 -1
  72. package/components/Switch/switch.scss +7 -1
  73. package/components/Table/table.css +29 -0
  74. package/components/Table/table.scss +33 -0
  75. package/components/Tabs/tabs.css +18 -7
  76. package/components/Tabs/tabs.scss +19 -11
  77. package/components/TextInputGroup/text-input-group.css +3 -0
  78. package/components/TextInputGroup/text-input-group.scss +4 -1
  79. package/components/ToggleGroup/toggle-group.css +18 -9
  80. package/components/ToggleGroup/toggle-group.scss +24 -17
  81. package/components/Toolbar/toolbar.css +7 -0
  82. package/components/Toolbar/toolbar.scss +7 -0
  83. package/components/TreeView/tree-view.css +15 -0
  84. package/components/TreeView/tree-view.scss +17 -0
  85. package/components/Wizard/wizard.css +37 -6
  86. package/components/Wizard/wizard.scss +44 -10
  87. package/components/_index.css +615 -167
  88. package/docs/components/Alert/examples/Alert.md +3 -4
  89. package/docs/components/Button/examples/Button.md +1 -3
  90. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +25 -33
  91. package/docs/components/CodeBlock/examples/CodeBlock.md +13 -7
  92. package/docs/components/CodeEditor/examples/CodeEditor.md +20 -6
  93. package/docs/components/DataList/examples/DataList.md +66 -184
  94. package/docs/components/DatePicker/examples/DatePicker.md +4 -1
  95. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  96. package/docs/components/DualListSelector/examples/DualListSelector.md +0 -195
  97. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  98. package/docs/components/ExpandableSection/examples/ExpandableSection.md +92 -18
  99. package/docs/components/FileUpload/examples/FileUpload.md +4 -3
  100. package/docs/components/Form/examples/Form.md +19 -18
  101. package/docs/components/HelperText/examples/HelperText.md +65 -75
  102. package/docs/components/Hint/examples/Hint.md +3 -3
  103. package/docs/components/Icon/examples/Icon.md +0 -10
  104. package/docs/components/InlineEdit/examples/InlineEdit.md +0 -4
  105. package/docs/components/JumpLinks/examples/JumpLinks.md +164 -77
  106. package/docs/components/Label/examples/Label.md +2 -2
  107. package/docs/components/Login/examples/Login.md +42 -37
  108. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +32 -6
  109. package/docs/components/Pagination/examples/Pagination.md +111 -0
  110. package/docs/components/Popover/examples/Popover.md +0 -4
  111. package/docs/components/Progress/examples/Progress.md +223 -210
  112. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  113. package/docs/components/Table/examples/Table.md +947 -1423
  114. package/docs/components/TextInputGroup/examples/TextInputGroup.md +126 -47
  115. package/docs/components/Title/examples/Title.md +8 -8
  116. package/docs/components/Truncate/examples/Truncate.md +8 -6
  117. package/docs/components/Wizard/examples/Wizard.md +583 -0
  118. package/docs/demos/Alert/examples/Alert.md +28 -19
  119. package/docs/demos/Card/examples/Card.md +8 -5
  120. package/docs/demos/CardView/examples/CardView.md +81 -85
  121. package/docs/demos/Dashboard/examples/Dashboard.md +10 -22
  122. package/docs/demos/DataList/examples/DataList.md +528 -168
  123. package/docs/demos/DescriptionList/examples/DescriptionList.md +13 -3
  124. package/docs/demos/Drawer/examples/Drawer.md +0 -2
  125. package/docs/demos/Form/examples/BasicForms.md +93 -62
  126. package/docs/demos/HelperText/examples/HelperText.md +31 -23
  127. package/docs/demos/JumpLinks/examples/JumpLinks.md +0 -5
  128. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +4 -4
  129. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +56 -38
  130. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +726 -312
  131. package/docs/demos/Skeleton/examples/Skeleton.md +3 -1
  132. package/docs/demos/Table/examples/Table.md +5 -20
  133. package/docs/demos/Tabs/examples/Tabs.md +2 -1
  134. package/package.json +12 -7
  135. package/patternfly-base-no-globals.css +1172 -1
  136. package/patternfly-base.css +1176 -1
  137. package/patternfly-no-globals.css +1787 -168
  138. package/patternfly.css +1822 -199
  139. package/patternfly.min.css +1 -1
  140. package/patternfly.min.css.map +1 -1
package/base/patternfly-variables.scss CHANGED
@@ -2,6 +2,8 @@
2
2
  @use "./tokens/tokens-palette" as palette;
3
3
  @use "./tokens/tokens-default" as default;
4
4
  @use "./tokens/tokens-dark" as dark;
5
+ @use "./tokens/tokens-highcontrast" as highcontrast;
6
+ @use "./tokens/tokens-highcontrast-dark" as highcontrast-dark;
5
7
  @use "./tokens/tokens-local" as local;
6
8
 
7
9
  :root {
@@ -15,6 +17,14 @@
15
17
  @include dark.pf-v6-tokens;
16
18
  }
17
19
 
20
+ :root:where(.pf-v6-theme-high-contrast) {
21
+ @include highcontrast.pf-v6-tokens;
22
+ }
23
+
24
+ :root:where(.pf-v6-theme-high-contrast.pf-v6-theme-dark) {
25
+ @include highcontrast-dark.pf-v6-tokens;
26
+ }
27
+
18
28
  @include pf-v6-rtl(false) {
19
29
  @include pf-v6-set-inverse;
20
30
  }
package/base/tokens/tokens-charts-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 23 Sep 2024 22:48:17 GMT
3
+ // Generated on Wed, 10 Sep 2025 19:58:14 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, 23 Sep 2024 22:48:17 GMT
3
+ // Generated on Wed, 10 Sep 2025 19:58:14 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,9 +1,10 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 23 Sep 2024 22:48:17 GMT
3
+ // Generated on Wed, 10 Sep 2025 19:58:14 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
7
+ --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
7
8
  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
8
9
  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
9
10
  --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
@@ -27,6 +28,7 @@
27
28
  --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
28
29
  --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
29
30
  --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
31
+ --pf-t--global--dark--border--color--300: var(--pf-t--color--gray--30);
30
32
  --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
31
33
  --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
32
34
  --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
@@ -34,6 +36,7 @@
34
36
  --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40);
35
37
  --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50);
36
38
  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
39
+ --pf-t--global--dark--color--disabled--400: var(--pf-t--color--gray--90);
37
40
  --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
38
41
  --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
39
42
  --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
@@ -42,6 +45,7 @@
42
45
  --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
43
46
  --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
44
47
  --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
48
+ --pf-t--global--dark--color--nonstatus--gray--50: var(--pf-t--color--gray--70);
45
49
  --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
46
50
  --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
47
51
  --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
@@ -64,6 +68,7 @@
64
68
  --pf-t--global--dark--color--nonstatus--yellow--200: var(--pf-t--color--yellow--20);
65
69
  --pf-t--global--dark--color--nonstatus--yellow--300: var(--pf-t--color--yellow--10);
66
70
  --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50);
71
+ --pf-t--global--dark--color--severity--critical--200: var(--pf-t--color--red-orange--40);
67
72
  --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40);
68
73
  --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30);
69
74
  --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30);
@@ -71,16 +76,20 @@
71
76
  --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40);
72
77
  --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40);
73
78
  --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30);
79
+ --pf-t--global--dark--color--status--custom--300: var(--pf-t--color--teal--20);
74
80
  --pf-t--global--dark--color--status--danger--100: var(--pf-t--color--red-orange--50);
75
81
  --pf-t--global--dark--color--status--danger--200: var(--pf-t--color--red-orange--40);
76
82
  --pf-t--global--dark--color--status--danger--250: var(--pf-t--color--red-orange--30);
77
83
  --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20);
78
84
  --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30);
79
85
  --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20);
86
+ --pf-t--global--dark--color--status--info--300: var(--pf-t--color--purple--10);
80
87
  --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
81
88
  --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30);
89
+ --pf-t--global--dark--color--status--success--300: var(--pf-t--color--green--20);
82
90
  --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
83
91
  --pf-t--global--dark--color--status--warning--200: var(--pf-t--color--yellow--20);
92
+ --pf-t--global--dark--focus-ring--color--100: var(--pf-t--color--blue--30);
84
93
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
85
94
  --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
86
95
  --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
@@ -91,6 +100,7 @@
91
100
  --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20);
92
101
  --pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--10);
93
102
  --pf-t--global--dark--text--color--link--300: var(--pf-t--color--purple--30);
103
+ --pf-t--global--dark--text--color--link--400: var(--pf-t--color--purple--20);
94
104
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
95
105
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
96
106
  --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
@@ -191,6 +201,7 @@
191
201
  --pf-t--global--color--status--warning--clicked: var(--pf-t--global--dark--color--status--warning--200);
192
202
  --pf-t--global--color--status--warning--default: var(--pf-t--global--dark--color--status--warning--100);
193
203
  --pf-t--global--color--status--warning--hover: var(--pf-t--global--dark--color--status--warning--200);
204
+ --pf-t--global--focus-ring--color--default: var(--pf-t--global--dark--focus-ring--color--100);
194
205
  --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
195
206
  --pf-t--global--icon--color--brand--default: var(--pf-t--global--dark--color--brand--200);
196
207
  --pf-t--global--icon--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
@@ -225,6 +236,7 @@
225
236
  --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
226
237
  --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
227
238
  --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
239
+ --pf-t--global--border--color--main--default: var(--pf-t--global--background--color--primary--default);
228
240
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
229
241
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
230
242
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
package/base/tokens/tokens-default.scss CHANGED
@@ -1,11 +1,12 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 23 Sep 2024 22:48:17 GMT
3
+ // Generated on Wed, 10 Sep 2025 19:58:14 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
7
7
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
8
8
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
9
+ --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
9
10
  --pf-t--global--border--radius--0: 0px;
10
11
  --pf-t--global--border--radius--100: 4px;
11
12
  --pf-t--global--border--radius--200: 6px;
@@ -15,6 +16,13 @@
15
16
  --pf-t--global--border--width--100: 1px;
16
17
  --pf-t--global--border--width--200: 2px;
17
18
  --pf-t--global--border--width--300: 3px;
19
+ --pf-t--global--border--width--400: 4px;
20
+ --pf-t--global--border--width--action--plain--clicked: 0px;
21
+ --pf-t--global--border--width--action--plain--default: 0px;
22
+ --pf-t--global--border--width--action--plain--hover: 0px;
23
+ --pf-t--global--border--width--high-contrast--extra-strong: 0px;
24
+ --pf-t--global--border--width--high-contrast--regular: 0px;
25
+ --pf-t--global--border--width--high-contrast--strong: 0px;
18
26
  --pf-t--global--box-shadow--X--100: -10px;
19
27
  --pf-t--global--box-shadow--X--200: -4px;
20
28
  --pf-t--global--box-shadow--X--300: -1px;
@@ -51,6 +59,8 @@
51
59
  --pf-t--global--breakpoint--500: 75rem;
52
60
  --pf-t--global--breakpoint--550: 80rem;
53
61
  --pf-t--global--breakpoint--600: 90.625rem;
62
+ --pf-t--global--color--nonstatus--green--400: #3d7019;
63
+ --pf-t--global--color--status--success--150: #3d7019;
54
64
  --pf-t--global--delay--100: 0ms;
55
65
  --pf-t--global--delay--200: 50ms;
56
66
  --pf-t--global--delay--300: 100ms;
@@ -62,6 +72,10 @@
62
72
  --pf-t--global--duration--50: 50ms;
63
73
  --pf-t--global--duration--500: 500ms;
64
74
  --pf-t--global--duration--600: 600ms;
75
+ --pf-t--global--focus-ring--position--inset: -4px;
76
+ --pf-t--global--focus-ring--position--offset: 2px;
77
+ --pf-t--global--focus-ring--width--inset: 3px;
78
+ --pf-t--global--focus-ring--width--offset: 2px;
65
79
  --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
66
80
  --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
67
81
  --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace;
@@ -120,6 +134,7 @@
120
134
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
121
135
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
122
136
  --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
137
+ --pf-t--global--border--color--400: var(--pf-t--color--gray--60);
123
138
  --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
124
139
  --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
125
140
  --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
@@ -142,6 +157,7 @@
142
157
  --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
143
158
  --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
144
159
  --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
160
+ --pf-t--global--border--width--main--default: var(--pf-t--global--border--width--400);
145
161
  --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
146
162
  --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
147
163
  --pf-t--global--box-shadow--X--lg--bottom: var(--pf-t--global--box-shadow--X--400);
@@ -203,56 +219,91 @@
203
219
  --pf-t--global--color--brand--100: var(--pf-t--color--blue--40);
204
220
  --pf-t--global--color--brand--200: var(--pf-t--color--blue--50);
205
221
  --pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
222
+ --pf-t--global--color--brand--400: var(--pf-t--color--blue--70);
223
+ --pf-t--global--color--brand--500: var(--pf-t--color--blue--80);
206
224
  --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30);
207
225
  --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40);
208
226
  --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
209
227
  --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
210
228
  --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
229
+ --pf-t--global--color--favorite--300: var(--pf-t--color--yellow--70);
230
+ --pf-t--global--color--favorite--400: var(--pf-t--color--yellow--80);
211
231
  --pf-t--global--color--nonstatus--blue--100: var(--pf-t--color--blue--20);
212
232
  --pf-t--global--color--nonstatus--blue--200: var(--pf-t--color--blue--30);
213
233
  --pf-t--global--color--nonstatus--blue--300: var(--pf-t--color--blue--40);
234
+ --pf-t--global--color--nonstatus--blue--400: var(--pf-t--color--blue--60);
235
+ --pf-t--global--color--nonstatus--blue--500: var(--pf-t--color--blue--70);
214
236
  --pf-t--global--color--nonstatus--gray--100: var(--pf-t--color--gray--20);
215
237
  --pf-t--global--color--nonstatus--gray--200: var(--pf-t--color--gray--30);
216
238
  --pf-t--global--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
239
+ --pf-t--global--color--nonstatus--gray--400: var(--pf-t--color--gray--60);
240
+ --pf-t--global--color--nonstatus--gray--50: var(--pf-t--color--gray--10);
241
+ --pf-t--global--color--nonstatus--gray--500: var(--pf-t--color--gray--70);
217
242
  --pf-t--global--color--nonstatus--green--100: var(--pf-t--color--green--20);
218
243
  --pf-t--global--color--nonstatus--green--200: var(--pf-t--color--green--30);
219
244
  --pf-t--global--color--nonstatus--green--300: var(--pf-t--color--green--40);
245
+ --pf-t--global--color--nonstatus--green--500: var(--pf-t--color--green--70);
220
246
  --pf-t--global--color--nonstatus--orange--100: var(--pf-t--color--orange--20);
221
247
  --pf-t--global--color--nonstatus--orange--200: var(--pf-t--color--orange--30);
222
248
  --pf-t--global--color--nonstatus--orange--300: var(--pf-t--color--orange--40);
249
+ --pf-t--global--color--nonstatus--orange--400: var(--pf-t--color--orange--60);
250
+ --pf-t--global--color--nonstatus--orange--500: var(--pf-t--color--orange--70);
223
251
  --pf-t--global--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--20);
224
252
  --pf-t--global--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--30);
225
253
  --pf-t--global--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--40);
254
+ --pf-t--global--color--nonstatus--orangered--400: var(--pf-t--color--red-orange--60);
255
+ --pf-t--global--color--nonstatus--orangered--500: var(--pf-t--color--red-orange--70);
226
256
  --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--20);
227
257
  --pf-t--global--color--nonstatus--purple--200: var(--pf-t--color--purple--30);
228
258
  --pf-t--global--color--nonstatus--purple--300: var(--pf-t--color--purple--40);
259
+ --pf-t--global--color--nonstatus--purple--400: var(--pf-t--color--purple--50);
260
+ --pf-t--global--color--nonstatus--purple--500: var(--pf-t--color--purple--60);
229
261
  --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
230
262
  --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
231
263
  --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
264
+ --pf-t--global--color--nonstatus--red--400: var(--pf-t--color--red--60);
265
+ --pf-t--global--color--nonstatus--red--500: var(--pf-t--color--red--70);
232
266
  --pf-t--global--color--nonstatus--teal--100: var(--pf-t--color--teal--20);
233
267
  --pf-t--global--color--nonstatus--teal--200: var(--pf-t--color--teal--30);
234
268
  --pf-t--global--color--nonstatus--teal--300: var(--pf-t--color--teal--40);
269
+ --pf-t--global--color--nonstatus--teal--400: var(--pf-t--color--teal--70);
270
+ --pf-t--global--color--nonstatus--teal--500: var(--pf-t--color--teal--80);
235
271
  --pf-t--global--color--nonstatus--yellow--100: var(--pf-t--color--yellow--20);
236
272
  --pf-t--global--color--nonstatus--yellow--200: var(--pf-t--color--yellow--30);
237
273
  --pf-t--global--color--nonstatus--yellow--300: var(--pf-t--color--yellow--40);
274
+ --pf-t--global--color--nonstatus--yellow--400: var(--pf-t--color--yellow--70);
275
+ --pf-t--global--color--nonstatus--yellow--500: var(--pf-t--color--yellow--80);
238
276
  --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60);
239
277
  --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50);
278
+ --pf-t--global--color--severity--important--200: var(--pf-t--color--orange--60);
240
279
  --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50);
280
+ --pf-t--global--color--severity--minor--200: var(--pf-t--color--gray--80);
241
281
  --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40);
282
+ --pf-t--global--color--severity--moderate--200: var(--pf-t--color--yellow--70);
242
283
  --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40);
284
+ --pf-t--global--color--severity--none--200: var(--pf-t--color--blue--60);
243
285
  --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30);
286
+ --pf-t--global--color--severity--undefined--200: var(--pf-t--color--gray--60);
244
287
  --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
245
288
  --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
289
+ --pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80);
246
290
  --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
247
291
  --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
248
- --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--70);
292
+ --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--80);
249
293
  --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
250
294
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
295
+ --pf-t--global--color--status--info--300: var(--pf-t--color--purple--70);
251
296
  --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
252
297
  --pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
298
+ --pf-t--global--color--status--success--300: var(--pf-t--color--green--80);
253
299
  --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
254
300
  --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
255
301
  --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
302
+ --pf-t--global--color--status--warning--400: var(--pf-t--color--yellow--60);
303
+ --pf-t--global--color--status--warning--500: var(--pf-t--color--yellow--70);
304
+ --pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80);
305
+ --pf-t--global--focus-ring--color--100: var(--pf-t--color--blue--50);
306
+ --pf-t--global--focus-ring--color--200: var(--pf-t--color--blue--60);
256
307
  --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
257
308
  --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
258
309
  --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
@@ -271,6 +322,7 @@
271
322
  --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
272
323
  --pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300);
273
324
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
325
+ --pf-t--global--icon--color--150: var(--pf-t--color--gray--60);
274
326
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
275
327
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
276
328
  --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
@@ -303,11 +355,15 @@
303
355
  --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
304
356
  --pf-t--global--text--color--100: var(--pf-t--color--gray--95);
305
357
  --pf-t--global--text--color--200: var(--pf-t--color--gray--60);
358
+ --pf-t--global--text--color--250: var(--pf-t--color--gray--70);
306
359
  --pf-t--global--text--color--300: var(--pf-t--color--white);
307
360
  --pf-t--global--text--color--400: var(--pf-t--color--red-orange--40);
361
+ --pf-t--global--text--color--500: var(--pf-t--color--red-orange--70);
308
362
  --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
309
363
  --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
364
+ --pf-t--global--text--color--link--250: var(--pf-t--color--blue--70);
310
365
  --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
366
+ --pf-t--global--text--color--link--350: var(--pf-t--color--purple--60);
311
367
  --pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200);
312
368
  --pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200);
313
369
  --pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200);
@@ -428,6 +484,7 @@
428
484
  --pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--200);
429
485
  --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--100);
430
486
  --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--200);
487
+ --pf-t--global--focus-ring--color--default: var(--pf-t--global--focus-ring--color--100);
431
488
  --pf-t--global--font--size--body--default: var(--pf-t--global--font--size--sm);
432
489
  --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--md);
433
490
  --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--xs);
@@ -517,6 +574,7 @@
517
574
  --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
518
575
  --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
519
576
  --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
577
+ --pf-t--global--border--color--main--default: var(--pf-t--global--background--color--primary--default);
520
578
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
521
579
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
522
580
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);