@patternfly/patternfly 6.3.0-prerelease.6 → 6.3.0-prerelease.61

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 (168) hide show
  1. package/README.md +22 -14
  2. package/assets/images/icon-help.hbs +3 -0
  3. package/assets/images/icon-outlined-star.hbs +3 -0
  4. package/assets/images/icon-star.hbs +3 -0
  5. package/base/normalize.scss +4 -0
  6. package/base/patternfly-common.css +46 -11
  7. package/base/patternfly-common.scss +58 -13
  8. package/base/patternfly-variables.css +1172 -1
  9. package/base/patternfly-variables.scss +10 -0
  10. package/base/tokens/tokens-charts-dark.scss +1 -1
  11. package/base/tokens/tokens-charts.scss +1 -1
  12. package/base/tokens/tokens-dark.scss +13 -1
  13. package/base/tokens/tokens-default.scss +60 -2
  14. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  15. package/base/tokens/tokens-highcontrast.scss +703 -0
  16. package/base/tokens/tokens-local.scss +1 -0
  17. package/base/tokens/tokens-palette.scss +9 -1
  18. package/components/Accordion/accordion.css +102 -6
  19. package/components/Accordion/accordion.scss +112 -10
  20. package/components/Alert/alert-group.css +67 -33
  21. package/components/Alert/alert-group.scss +95 -48
  22. package/components/Badge/badge.css +2 -0
  23. package/components/Badge/badge.scss +2 -0
  24. package/components/Banner/banner.css +4 -0
  25. package/components/Banner/banner.scss +4 -0
  26. package/components/Button/button.css +187 -9
  27. package/components/Button/button.scss +195 -13
  28. package/components/CalendarMonth/calendar-month.css +16 -0
  29. package/components/CalendarMonth/calendar-month.scss +16 -0
  30. package/components/Card/card.css +5 -4
  31. package/components/Card/card.scss +5 -4
  32. package/components/CodeBlock/code-block.css +3 -0
  33. package/components/CodeBlock/code-block.scss +3 -0
  34. package/components/CodeEditor/code-editor.css +8 -3
  35. package/components/CodeEditor/code-editor.scss +11 -6
  36. package/components/DataList/data-list.css +2 -2
  37. package/components/DataList/data-list.scss +2 -2
  38. package/components/DatePicker/date-picker.css +3 -0
  39. package/components/DatePicker/date-picker.scss +4 -0
  40. package/components/Drawer/drawer.css +44 -41
  41. package/components/Drawer/drawer.scss +42 -36
  42. package/components/DualListSelector/dual-list-selector.css +55 -1
  43. package/components/DualListSelector/dual-list-selector.scss +63 -1
  44. package/components/ExpandableSection/expandable-section.css +63 -1
  45. package/components/ExpandableSection/expandable-section.scss +76 -2
  46. package/components/FileUpload/file-upload.css +3 -3
  47. package/components/FileUpload/file-upload.scss +3 -3
  48. package/components/Form/form.css +40 -1
  49. package/components/Form/form.scss +47 -1
  50. package/components/FormControl/form-control.css +16 -0
  51. package/components/FormControl/form-control.scss +9 -0
  52. package/components/InputGroup/input-group.css +80 -0
  53. package/components/InputGroup/input-group.scss +95 -0
  54. package/components/Label/label.css +20 -11
  55. package/components/Label/label.scss +21 -11
  56. package/components/Login/login.css +3 -0
  57. package/components/Login/login.scss +3 -0
  58. package/components/Menu/menu.css +42 -4
  59. package/components/Menu/menu.scss +39 -6
  60. package/components/MenuToggle/menu-toggle.css +51 -10
  61. package/components/MenuToggle/menu-toggle.scss +61 -9
  62. package/components/ModalBox/modal-box.css +3 -0
  63. package/components/ModalBox/modal-box.scss +3 -0
  64. package/components/Nav/nav.css +39 -8
  65. package/components/Nav/nav.scss +42 -9
  66. package/components/Page/page.css +124 -26
  67. package/components/Page/page.scss +86 -16
  68. package/components/Pagination/pagination.css +14 -1
  69. package/components/Pagination/pagination.scss +14 -1
  70. package/components/Panel/panel.css +14 -1
  71. package/components/Panel/panel.scss +14 -1
  72. package/components/Popover/popover.css +4 -0
  73. package/components/Popover/popover.scss +4 -0
  74. package/components/Progress/progress.css +26 -0
  75. package/components/Progress/progress.scss +22 -1
  76. package/components/ProgressStepper/progress-stepper.scss +1 -0
  77. package/components/SimpleList/simple-list.css +15 -0
  78. package/components/SimpleList/simple-list.scss +17 -1
  79. package/components/Skeleton/skeleton.css +22 -2
  80. package/components/Skeleton/skeleton.scss +25 -3
  81. package/components/Spinner/spinner.css +5 -0
  82. package/components/Spinner/spinner.scss +6 -0
  83. package/components/Table/table-grid.css +51 -5
  84. package/components/Table/table-grid.scss +22 -1
  85. package/components/Table/table.css +124 -2
  86. package/components/Table/table.scss +171 -3
  87. package/components/Tabs/tabs.css +32 -15
  88. package/components/Tabs/tabs.scss +34 -14
  89. package/components/TextInputGroup/text-input-group.css +23 -0
  90. package/components/TextInputGroup/text-input-group.scss +16 -1
  91. package/components/Timestamp/timestamp.css +4 -0
  92. package/components/Timestamp/timestamp.scss +7 -0
  93. package/components/TreeView/tree-view.css +54 -0
  94. package/components/TreeView/tree-view.scss +59 -2
  95. package/components/Truncate/truncate.css +1 -0
  96. package/components/Truncate/truncate.scss +3 -0
  97. package/components/Wizard/wizard.css +33 -6
  98. package/components/Wizard/wizard.scss +38 -8
  99. package/components/_index.css +1404 -195
  100. package/docs/components/Alert/examples/Alert.md +2 -2
  101. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  102. package/docs/components/Button/examples/Button.md +159 -6
  103. package/docs/components/Card/examples/Card.md +8 -8
  104. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +24 -32
  105. package/docs/components/CodeBlock/examples/CodeBlock.md +10 -10
  106. package/docs/components/CodeEditor/examples/CodeEditor.md +29 -5
  107. package/docs/components/DataList/examples/DataList.md +83 -207
  108. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  109. package/docs/components/DualListSelector/examples/DualListSelector.md +642 -319
  110. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  111. package/docs/components/ExpandableSection/examples/ExpandableSection.md +26 -15
  112. package/docs/components/Form/examples/Form.md +1178 -113
  113. package/docs/components/Hint/examples/Hint.md +3 -3
  114. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -6
  115. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  116. package/docs/components/Label/examples/Label.md +2 -2
  117. package/docs/components/Login/examples/Login.md +22 -22
  118. package/docs/components/Masthead/examples/masthead.md +90 -12
  119. package/docs/components/Menu/examples/Menu.md +122 -6
  120. package/docs/components/MenuToggle/examples/MenuToggle.md +93 -55
  121. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  122. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  123. package/docs/components/Page/examples/Page.md +147 -14
  124. package/docs/components/Pagination/examples/Pagination.md +123 -12
  125. package/docs/components/Popover/examples/Popover.md +0 -4
  126. package/docs/components/Progress/examples/Progress.md +222 -210
  127. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  128. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  129. package/docs/components/Slider/examples/Slider.md +2 -2
  130. package/docs/components/Spinner/examples/Spinner.md +10 -0
  131. package/docs/components/Table/examples/Table.md +7699 -4896
  132. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  133. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -49
  134. package/docs/components/Title/examples/Title.md +8 -8
  135. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  136. package/docs/components/Wizard/examples/Wizard.md +583 -0
  137. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  138. package/docs/demos/Alert/examples/Alert.md +66 -9
  139. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  140. package/docs/demos/Banner/examples/Banner.md +47 -6
  141. package/docs/demos/Card/examples/Card.md +13 -67
  142. package/docs/demos/CardView/examples/CardView.md +24 -5
  143. package/docs/demos/Dashboard/examples/Dashboard.md +34 -27
  144. package/docs/demos/DataList/examples/DataList.md +628 -192
  145. package/docs/demos/DescriptionList/examples/DescriptionList.md +79 -50
  146. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  147. package/docs/demos/Form/examples/BasicForms.md +146 -26
  148. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  149. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  150. package/docs/demos/Modal/examples/Modal.md +171 -21
  151. package/docs/demos/Nav/examples/Nav.md +111 -16
  152. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +114 -19
  153. package/docs/demos/Page/examples/Page.md +309 -43
  154. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  155. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +886 -415
  156. package/docs/demos/Skeleton/examples/Skeleton.md +25 -4
  157. package/docs/demos/Table/examples/Table.md +480 -177
  158. package/docs/demos/Tabs/examples/Tabs.md +139 -594
  159. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  160. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  161. package/package.json +12 -7
  162. package/patternfly-base-no-globals.css +1217 -12
  163. package/patternfly-base.css +1221 -12
  164. package/patternfly-no-globals.css +2851 -437
  165. package/patternfly.css +2853 -435
  166. package/patternfly.min.css +1 -1
  167. package/patternfly.min.css.map +1 -1
  168. package/sass-utilities/mixins.scss +54 -0
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 Tue, 02 Sep 2025 22:55:03 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 Tue, 02 Sep 2025 22:55:03 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 Tue, 02 Sep 2025 22:55:02 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 Tue, 02 Sep 2025 22:55:02 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: -4;
76
+ --pf-t--global--focus-ring--position--offset: 2;
77
+ --pf-t--global--focus-ring--width--inset: 3;
78
+ --pf-t--global--focus-ring--width--offset: 2;
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);