@patternfly/react-styles 4.70.1 → 4.71.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 (211) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/css/assets/images/icon-github.hbs +4 -0
  3. package/css/assets/images/icon-google.hbs +4 -0
  4. package/css/assets/images/icon-red-hat.hbs +1 -0
  5. package/css/components/AboutModalBox/about-modal-box.css +28 -0
  6. package/css/components/AboutModalBox/about-modal-box.d.ts +2 -1
  7. package/css/components/AboutModalBox/about-modal-box.js +2 -1
  8. package/css/components/AboutModalBox/about-modal-box.mjs +2 -1
  9. package/css/components/Accordion/accordion.css +6 -0
  10. package/css/components/Accordion/accordion.d.ts +2 -1
  11. package/css/components/Accordion/accordion.js +2 -1
  12. package/css/components/Accordion/accordion.mjs +2 -1
  13. package/css/components/Alert/alert.css +14 -0
  14. package/css/components/Alert/alert.d.ts +2 -1
  15. package/css/components/Alert/alert.js +2 -1
  16. package/css/components/Alert/alert.mjs +2 -1
  17. package/css/components/AppLauncher/app-launcher.css +12 -0
  18. package/css/components/AppLauncher/app-launcher.d.ts +2 -1
  19. package/css/components/AppLauncher/app-launcher.js +2 -1
  20. package/css/components/AppLauncher/app-launcher.mjs +2 -1
  21. package/css/components/Badge/badge.css +5 -0
  22. package/css/components/Badge/badge.d.ts +2 -1
  23. package/css/components/Badge/badge.js +2 -1
  24. package/css/components/Badge/badge.mjs +2 -1
  25. package/css/components/Banner/banner.css +31 -0
  26. package/css/components/Banner/banner.d.ts +2 -1
  27. package/css/components/Banner/banner.js +2 -1
  28. package/css/components/Banner/banner.mjs +2 -1
  29. package/css/components/Breadcrumb/breadcrumb.css +4 -0
  30. package/css/components/Breadcrumb/breadcrumb.d.ts +2 -1
  31. package/css/components/Breadcrumb/breadcrumb.js +2 -1
  32. package/css/components/Breadcrumb/breadcrumb.mjs +2 -1
  33. package/css/components/Button/button.css +38 -0
  34. package/css/components/Button/button.d.ts +2 -1
  35. package/css/components/Button/button.js +2 -1
  36. package/css/components/Button/button.mjs +2 -1
  37. package/css/components/CalendarMonth/calendar-month.css +26 -4
  38. package/css/components/CalendarMonth/calendar-month.d.ts +2 -1
  39. package/css/components/CalendarMonth/calendar-month.js +2 -1
  40. package/css/components/CalendarMonth/calendar-month.mjs +2 -1
  41. package/css/components/Chip/chip.css +6 -0
  42. package/css/components/Chip/chip.d.ts +2 -1
  43. package/css/components/Chip/chip.js +2 -1
  44. package/css/components/Chip/chip.mjs +2 -1
  45. package/css/components/ChipGroup/chip-group.css +1 -1
  46. package/css/components/ClipboardCopy/clipboard-copy.css +11 -0
  47. package/css/components/ClipboardCopy/clipboard-copy.d.ts +2 -1
  48. package/css/components/ClipboardCopy/clipboard-copy.js +2 -1
  49. package/css/components/ClipboardCopy/clipboard-copy.mjs +2 -1
  50. package/css/components/CodeEditor/code-editor.css +4 -0
  51. package/css/components/CodeEditor/code-editor.d.ts +2 -1
  52. package/css/components/CodeEditor/code-editor.js +2 -1
  53. package/css/components/CodeEditor/code-editor.mjs +2 -1
  54. package/css/components/ContextSelector/context-selector.css +17 -0
  55. package/css/components/ContextSelector/context-selector.d.ts +2 -1
  56. package/css/components/ContextSelector/context-selector.js +2 -1
  57. package/css/components/ContextSelector/context-selector.mjs +2 -1
  58. package/css/components/DataList/data-list.css +7 -0
  59. package/css/components/DataList/data-list.d.ts +2 -1
  60. package/css/components/DataList/data-list.js +2 -1
  61. package/css/components/DataList/data-list.mjs +2 -1
  62. package/css/components/DatePicker/date-picker.css +5 -0
  63. package/css/components/DatePicker/date-picker.d.ts +2 -1
  64. package/css/components/DatePicker/date-picker.js +2 -1
  65. package/css/components/DatePicker/date-picker.mjs +2 -1
  66. package/css/components/Drawer/drawer.css +7 -0
  67. package/css/components/Drawer/drawer.d.ts +2 -1
  68. package/css/components/Drawer/drawer.js +2 -1
  69. package/css/components/Drawer/drawer.mjs +2 -1
  70. package/css/components/Dropdown/dropdown.css +22 -0
  71. package/css/components/Dropdown/dropdown.d.ts +2 -1
  72. package/css/components/Dropdown/dropdown.js +2 -1
  73. package/css/components/Dropdown/dropdown.mjs +2 -1
  74. package/css/components/Form/form.css +4 -0
  75. package/css/components/Form/form.d.ts +2 -1
  76. package/css/components/Form/form.js +2 -1
  77. package/css/components/Form/form.mjs +2 -1
  78. package/css/components/FormControl/form-control.css +22 -0
  79. package/css/components/FormControl/form-control.d.ts +2 -1
  80. package/css/components/FormControl/form-control.js +2 -1
  81. package/css/components/FormControl/form-control.mjs +2 -1
  82. package/css/components/HelperText/helper-text.css +4 -0
  83. package/css/components/HelperText/helper-text.d.ts +2 -1
  84. package/css/components/HelperText/helper-text.js +2 -1
  85. package/css/components/HelperText/helper-text.mjs +2 -1
  86. package/css/components/Hint/hint.css +5 -0
  87. package/css/components/Hint/hint.d.ts +2 -1
  88. package/css/components/Hint/hint.js +2 -1
  89. package/css/components/Hint/hint.mjs +2 -1
  90. package/css/components/InputGroup/input-group.css +22 -0
  91. package/css/components/InputGroup/input-group.d.ts +2 -1
  92. package/css/components/InputGroup/input-group.js +2 -1
  93. package/css/components/InputGroup/input-group.mjs +2 -1
  94. package/css/components/Label/label.css +71 -2
  95. package/css/components/Label/label.d.ts +3 -1
  96. package/css/components/Label/label.js +3 -1
  97. package/css/components/Label/label.mjs +3 -1
  98. package/css/components/LabelGroup/label-group.css +1 -0
  99. package/css/components/LogViewer/log-viewer.css +28 -0
  100. package/css/components/LogViewer/log-viewer.d.ts +1 -0
  101. package/css/components/LogViewer/log-viewer.js +1 -0
  102. package/css/components/LogViewer/log-viewer.mjs +1 -0
  103. package/css/components/Login/login.css +31 -0
  104. package/css/components/Login/login.d.ts +1 -0
  105. package/css/components/Login/login.js +1 -0
  106. package/css/components/Login/login.mjs +1 -0
  107. package/css/components/Masthead/masthead.css +32 -0
  108. package/css/components/Masthead/masthead.d.ts +1 -0
  109. package/css/components/Masthead/masthead.js +1 -0
  110. package/css/components/Masthead/masthead.mjs +1 -0
  111. package/css/components/Menu/menu.css +9 -0
  112. package/css/components/Menu/menu.d.ts +2 -1
  113. package/css/components/Menu/menu.js +2 -1
  114. package/css/components/Menu/menu.mjs +2 -1
  115. package/css/components/MenuToggle/menu-toggle.css +19 -0
  116. package/css/components/MenuToggle/menu-toggle.d.ts +2 -1
  117. package/css/components/MenuToggle/menu-toggle.js +2 -1
  118. package/css/components/MenuToggle/menu-toggle.mjs +2 -1
  119. package/css/components/ModalBox/modal-box.css +4 -0
  120. package/css/components/ModalBox/modal-box.d.ts +2 -1
  121. package/css/components/ModalBox/modal-box.js +2 -1
  122. package/css/components/ModalBox/modal-box.mjs +2 -1
  123. package/css/components/Nav/nav.css +34 -0
  124. package/css/components/Nav/nav.d.ts +2 -1
  125. package/css/components/Nav/nav.js +2 -1
  126. package/css/components/Nav/nav.mjs +2 -1
  127. package/css/components/NotificationBadge/notification-badge.css +4 -0
  128. package/css/components/NotificationBadge/notification-badge.d.ts +2 -1
  129. package/css/components/NotificationBadge/notification-badge.js +2 -1
  130. package/css/components/NotificationBadge/notification-badge.mjs +2 -1
  131. package/css/components/NotificationDrawer/notification-drawer.css +11 -0
  132. package/css/components/NotificationDrawer/notification-drawer.d.ts +2 -1
  133. package/css/components/NotificationDrawer/notification-drawer.js +2 -1
  134. package/css/components/NotificationDrawer/notification-drawer.mjs +2 -1
  135. package/css/components/OptionsMenu/options-menu.css +17 -0
  136. package/css/components/OptionsMenu/options-menu.d.ts +2 -1
  137. package/css/components/OptionsMenu/options-menu.js +2 -1
  138. package/css/components/OptionsMenu/options-menu.mjs +2 -1
  139. package/css/components/Page/page.css +66 -1
  140. package/css/components/Page/page.d.ts +3 -1
  141. package/css/components/Page/page.js +3 -1
  142. package/css/components/Page/page.mjs +3 -1
  143. package/css/components/Pagination/pagination.css +4 -0
  144. package/css/components/Pagination/pagination.d.ts +2 -1
  145. package/css/components/Pagination/pagination.js +2 -1
  146. package/css/components/Pagination/pagination.mjs +2 -1
  147. package/css/components/Popover/popover.css +13 -0
  148. package/css/components/Popover/popover.d.ts +1 -0
  149. package/css/components/Popover/popover.js +1 -0
  150. package/css/components/Popover/popover.mjs +1 -0
  151. package/css/components/Progress/progress.css +6 -0
  152. package/css/components/Progress/progress.d.ts +2 -1
  153. package/css/components/Progress/progress.js +2 -1
  154. package/css/components/Progress/progress.mjs +2 -1
  155. package/css/components/SearchInput/search-input.css +9 -0
  156. package/css/components/SearchInput/search-input.d.ts +2 -1
  157. package/css/components/SearchInput/search-input.js +2 -1
  158. package/css/components/SearchInput/search-input.mjs +2 -1
  159. package/css/components/Select/select.css +16 -0
  160. package/css/components/Select/select.d.ts +2 -1
  161. package/css/components/Select/select.js +2 -1
  162. package/css/components/Select/select.mjs +2 -1
  163. package/css/components/SimpleList/simple-list.css +11 -0
  164. package/css/components/SimpleList/simple-list.d.ts +2 -1
  165. package/css/components/SimpleList/simple-list.js +2 -1
  166. package/css/components/SimpleList/simple-list.mjs +2 -1
  167. package/css/components/Skeleton/skeleton.css +6 -0
  168. package/css/components/Skeleton/skeleton.d.ts +2 -1
  169. package/css/components/Skeleton/skeleton.js +2 -1
  170. package/css/components/Skeleton/skeleton.mjs +2 -1
  171. package/css/components/Switch/switch.css +7 -0
  172. package/css/components/Switch/switch.d.ts +2 -1
  173. package/css/components/Switch/switch.js +2 -1
  174. package/css/components/Switch/switch.mjs +2 -1
  175. package/css/components/Table/table.css +7 -0
  176. package/css/components/Table/table.d.ts +2 -1
  177. package/css/components/Table/table.js +2 -1
  178. package/css/components/Table/table.mjs +2 -1
  179. package/css/components/Tabs/tabs.css +6 -0
  180. package/css/components/Tabs/tabs.d.ts +2 -1
  181. package/css/components/Tabs/tabs.js +2 -1
  182. package/css/components/Tabs/tabs.mjs +2 -1
  183. package/css/components/Tile/tile.css +7 -0
  184. package/css/components/Tile/tile.d.ts +1 -0
  185. package/css/components/Tile/tile.js +1 -0
  186. package/css/components/Tile/tile.mjs +1 -0
  187. package/css/components/ToggleGroup/toggle-group.css +8 -0
  188. package/css/components/ToggleGroup/toggle-group.d.ts +1 -0
  189. package/css/components/ToggleGroup/toggle-group.js +1 -0
  190. package/css/components/ToggleGroup/toggle-group.mjs +1 -0
  191. package/css/components/Tooltip/tooltip.css +13 -0
  192. package/css/components/Tooltip/tooltip.d.ts +1 -0
  193. package/css/components/Tooltip/tooltip.js +1 -0
  194. package/css/components/Tooltip/tooltip.mjs +1 -0
  195. package/css/components/TreeView/tree-view.css +5 -0
  196. package/css/components/TreeView/tree-view.d.ts +1 -0
  197. package/css/components/TreeView/tree-view.js +1 -0
  198. package/css/components/TreeView/tree-view.mjs +1 -0
  199. package/css/components/Wizard/wizard.css +34 -0
  200. package/css/components/Wizard/wizard.d.ts +1 -0
  201. package/css/components/Wizard/wizard.js +1 -0
  202. package/css/components/Wizard/wizard.mjs +1 -0
  203. package/css/docs/demos/Table/examples/Table.css +3 -0
  204. package/css/docs/demos/Table/examples/Table.d.ts +5 -0
  205. package/css/docs/demos/Table/examples/Table.js +6 -0
  206. package/css/docs/demos/Table/examples/Table.mjs +4 -0
  207. package/css/utilities/Text/text.css +24 -0
  208. package/css/utilities/Text/text.d.ts +6 -0
  209. package/css/utilities/Text/text.js +6 -0
  210. package/css/utilities/Text/text.mjs +6 -0
  211. package/package.json +3 -3
@@ -13,10 +13,12 @@ export default {
13
13
  "red": "pf-m-red",
14
14
  "purple": "pf-m-purple",
15
15
  "cyan": "pf-m-cyan",
16
+ "gold": "pf-m-gold",
16
17
  "outline": "pf-m-outline",
17
18
  "overflow": "pf-m-overflow",
18
19
  "add": "pf-m-add",
19
20
  "editable": "pf-m-editable",
20
21
  "editableActive": "pf-m-editable-active"
21
- }
22
+ },
23
+ "themeDark": "pf-theme-dark"
22
24
  };
@@ -30,6 +30,7 @@
30
30
  --pf-c-label-group__textarea--PaddingBottom: 0;
31
31
  --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
32
32
  display: inline-flex;
33
+ align-items: center;
33
34
  }
34
35
  .pf-c-label-group.pf-m-category {
35
36
  padding-top: var(--pf-c-label-group--m-category--PaddingTop);
@@ -198,4 +198,32 @@
198
198
 
199
199
  .pf-c-log-viewer__timestamp {
200
200
  font-weight: var(--pf-c-log-viewer__timestamp--FontWeight);
201
+ }
202
+
203
+ :where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
204
+ --pf-global--Color--100: #e0e0e0;
205
+ --pf-global--Color--200: #aaabac;
206
+ --pf-global--BorderColor--100: #444548;
207
+ --pf-global--primary-color--100: #1fa7f8;
208
+ --pf-global--link--Color: #1fa7f8;
209
+ --pf-global--link--Color--hover: #73bcf7;
210
+ --pf-global--BackgroundColor--100: #1b1d21;
211
+ }
212
+ :where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button {
213
+ --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
214
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
215
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
216
+ --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
217
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
218
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
219
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
220
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
221
+ --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
222
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
223
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
224
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
225
+ }
226
+
227
+ :where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
228
+ color: var(--pf-global--Color--100);
201
229
  }
@@ -21,6 +21,7 @@ declare const _default: {
21
21
  "current": "pf-m-current"
22
22
  },
23
23
  "searchInput": "pf-c-search-input",
24
+ "themeDark": "pf-theme-dark",
24
25
  "toolbar": "pf-c-toolbar",
25
26
  "toolbarContentSection": "pf-c-toolbar__content-section"
26
27
  };
@@ -23,6 +23,7 @@ exports.default = {
23
23
  "current": "pf-m-current"
24
24
  },
25
25
  "searchInput": "pf-c-search-input",
26
+ "themeDark": "pf-theme-dark",
26
27
  "toolbar": "pf-c-toolbar",
27
28
  "toolbarContentSection": "pf-c-toolbar__content-section"
28
29
  };
@@ -21,6 +21,7 @@ export default {
21
21
  "current": "pf-m-current"
22
22
  },
23
23
  "searchInput": "pf-c-search-input",
24
+ "themeDark": "pf-theme-dark",
24
25
  "toolbar": "pf-c-toolbar",
25
26
  "toolbarContentSection": "pf-c-toolbar__content-section"
26
27
  };
@@ -294,4 +294,35 @@
294
294
  }
295
295
  .pf-c-login__footer .pf-c-list:not(:only-child) {
296
296
  padding-top: var(--pf-c-login__footer--c-list--PaddingTop);
297
+ }
298
+
299
+ :where(.pf-theme-dark) .pf-c-login__header,
300
+ :where(.pf-theme-dark) .pf-c-login__footer {
301
+ --pf-global--Color--100: #e0e0e0;
302
+ --pf-global--Color--200: #aaabac;
303
+ --pf-global--BorderColor--100: #444548;
304
+ --pf-global--primary-color--100: #1fa7f8;
305
+ --pf-global--link--Color: #1fa7f8;
306
+ --pf-global--link--Color--hover: #73bcf7;
307
+ --pf-global--BackgroundColor--100: #1b1d21;
308
+ }
309
+ :where(.pf-theme-dark) .pf-c-login__header .pf-c-button,
310
+ :where(.pf-theme-dark) .pf-c-login__footer .pf-c-button {
311
+ --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
312
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
313
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
314
+ --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
315
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
316
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
317
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
318
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
319
+ --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
320
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
321
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
322
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
323
+ }
324
+
325
+ :where(.pf-theme-dark) .pf-c-login__header,
326
+ :where(.pf-theme-dark) .pf-c-login__footer {
327
+ color: var(--pf-global--Color--100);
297
328
  }
@@ -19,6 +19,7 @@ declare const _default: {
19
19
  "loginMainHeader": "pf-c-login__main-header",
20
20
  "loginMainHeaderDesc": "pf-c-login__main-header-desc",
21
21
  "loginMainHeaderUtilities": "pf-c-login__main-header-utilities",
22
+ "themeDark": "pf-theme-dark",
22
23
  "title": "pf-c-title"
23
24
  };
24
25
  export default _default;
@@ -21,5 +21,6 @@ exports.default = {
21
21
  "loginMainHeader": "pf-c-login__main-header",
22
22
  "loginMainHeaderDesc": "pf-c-login__main-header-desc",
23
23
  "loginMainHeaderUtilities": "pf-c-login__main-header-utilities",
24
+ "themeDark": "pf-theme-dark",
24
25
  "title": "pf-c-title"
25
26
  };
@@ -19,5 +19,6 @@ export default {
19
19
  "loginMainHeader": "pf-c-login__main-header",
20
20
  "loginMainHeaderDesc": "pf-c-login__main-header-desc",
21
21
  "loginMainHeaderUtilities": "pf-c-login__main-header-utilities",
22
+ "themeDark": "pf-theme-dark",
22
23
  "title": "pf-c-title"
23
24
  };
@@ -657,4 +657,36 @@
657
657
  .pf-c-masthead.pf-m-inset-2xl-on-2xl {
658
658
  --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
659
659
  }
660
+ }
661
+
662
+ :where(.pf-theme-dark) .pf-c-masthead {
663
+ --pf-global--Color--100: #e0e0e0;
664
+ --pf-global--Color--200: #aaabac;
665
+ --pf-global--BorderColor--100: #444548;
666
+ --pf-global--primary-color--100: #1fa7f8;
667
+ --pf-global--link--Color: #1fa7f8;
668
+ --pf-global--link--Color--hover: #73bcf7;
669
+ --pf-global--BackgroundColor--100: #1b1d21;
670
+ }
671
+ :where(.pf-theme-dark) .pf-c-masthead .pf-c-button {
672
+ --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
673
+ --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
674
+ --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
675
+ --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
676
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
677
+ --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
678
+ --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
679
+ --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
680
+ --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
681
+ --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
682
+ --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
683
+ --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
684
+ }
685
+
686
+ :where(.pf-theme-dark) .pf-c-masthead {
687
+ --pf-c-masthead--BackgroundColor: var(--pf-global--palette--black-1000);
688
+ color: var(--pf-global--Color--100);
689
+ }
690
+ :where(.pf-theme-dark) .pf-c-masthead .pf-c-toolbar {
691
+ --pf-c-toolbar--BackgroundColor: var(--pf-global--palette--black-1000);
660
692
  }
@@ -68,6 +68,7 @@ declare const _default: {
68
68
  },
69
69
  "nav": "pf-c-nav",
70
70
  "page": "pf-c-page",
71
+ "themeDark": "pf-theme-dark",
71
72
  "toolbar": "pf-c-toolbar",
72
73
  "toolbarContentSection": "pf-c-toolbar__content-section",
73
74
  "toolbarExpandableContent": "pf-c-toolbar__expandable-content"
@@ -70,6 +70,7 @@ exports.default = {
70
70
  },
71
71
  "nav": "pf-c-nav",
72
72
  "page": "pf-c-page",
73
+ "themeDark": "pf-theme-dark",
73
74
  "toolbar": "pf-c-toolbar",
74
75
  "toolbarContentSection": "pf-c-toolbar__content-section",
75
76
  "toolbarExpandableContent": "pf-c-toolbar__expandable-content"
@@ -68,6 +68,7 @@ export default {
68
68
  },
69
69
  "nav": "pf-c-nav",
70
70
  "page": "pf-c-page",
71
+ "themeDark": "pf-theme-dark",
71
72
  "toolbar": "pf-c-toolbar",
72
73
  "toolbarContentSection": "pf-c-toolbar__content-section",
73
74
  "toolbarExpandableContent": "pf-c-toolbar__expandable-content"
@@ -630,4 +630,13 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
630
630
  content: "";
631
631
  border-top: var(--pf-c-menu__footer--after--BorderTopWidth) solid var(--pf-c-menu__footer--after--BorderTopColor);
632
632
  border-bottom: var(--pf-c-menu__footer--after--BorderBottomWidth) solid var(--pf-c-menu__footer--after--BorderBottomColor);
633
+ }
634
+
635
+ :where(.pf-theme-dark) .pf-c-menu {
636
+ --pf-c-menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
637
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
638
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400);
639
+ --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--Color--200);
640
+ --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
641
+ --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
633
642
  }
@@ -52,6 +52,7 @@ declare const _default: {
52
52
  "selected": "pf-m-selected",
53
53
  "favorite": "pf-m-favorite",
54
54
  "favorited": "pf-m-favorited"
55
- }
55
+ },
56
+ "themeDark": "pf-theme-dark"
56
57
  };
57
58
  export default _default;
@@ -54,5 +54,6 @@ exports.default = {
54
54
  "selected": "pf-m-selected",
55
55
  "favorite": "pf-m-favorite",
56
56
  "favorited": "pf-m-favorited"
57
- }
57
+ },
58
+ "themeDark": "pf-theme-dark"
58
59
  };
@@ -52,5 +52,6 @@ export default {
52
52
  "selected": "pf-m-selected",
53
53
  "favorite": "pf-m-favorite",
54
54
  "favorited": "pf-m-favorited"
55
- }
55
+ },
56
+ "themeDark": "pf-theme-dark"
56
57
  };
@@ -390,4 +390,23 @@
390
390
  .pf-c-menu-toggle__toggle-icon {
391
391
  margin-right: var(--pf-c-menu-toggle__toggle-icon--MarginRight);
392
392
  color: var(--pf-c-menu-toggle__toggle-icon--Color, inherit);
393
+ }
394
+
395
+ :where(.pf-theme-dark) .pf-c-menu-toggle {
396
+ --pf-c-menu-toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
397
+ --pf-c-menu-toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
398
+ --pf-c-menu-toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--400);
399
+ --pf-c-menu-toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--400);
400
+ --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-global--BackgroundColor--400);
401
+ --pf-c-menu-toggle--before--BorderTopColor: transparent;
402
+ --pf-c-menu-toggle--before--BorderRightColor: transparent;
403
+ --pf-c-menu-toggle--before--BorderBottomColor: transparent;
404
+ --pf-c-menu-toggle--before--BorderLeftColor: transparent;
405
+ --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-global--BorderColor--400);
406
+ --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
407
+ --pf-c-menu-toggle--disabled--Color: var(--pf-global--palette--black-100);
408
+ --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
409
+ }
410
+ :where(.pf-theme-dark) .pf-c-menu-toggle.pf-m-plain {
411
+ background: transparent;
393
412
  }
@@ -22,6 +22,7 @@ declare const _default: {
22
22
  "active": "pf-m-active",
23
23
  "fullWidth": "pf-m-full-width"
24
24
  },
25
- "textInputGroup": "pf-c-text-input-group"
25
+ "textInputGroup": "pf-c-text-input-group",
26
+ "themeDark": "pf-theme-dark"
26
27
  };
27
28
  export default _default;
@@ -24,5 +24,6 @@ exports.default = {
24
24
  "active": "pf-m-active",
25
25
  "fullWidth": "pf-m-full-width"
26
26
  },
27
- "textInputGroup": "pf-c-text-input-group"
27
+ "textInputGroup": "pf-c-text-input-group",
28
+ "themeDark": "pf-theme-dark"
28
29
  };
@@ -22,5 +22,6 @@ export default {
22
22
  "active": "pf-m-active",
23
23
  "fullWidth": "pf-m-full-width"
24
24
  },
25
- "textInputGroup": "pf-c-text-input-group"
25
+ "textInputGroup": "pf-c-text-input-group",
26
+ "themeDark": "pf-theme-dark"
26
27
  };
@@ -179,4 +179,8 @@
179
179
  .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
180
180
  --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-c-modal-box__footer--c-button--sm--MarginRight);
181
181
  }
182
+ }
183
+
184
+ :where(.pf-theme-dark) .pf-c-modal-box {
185
+ --pf-c-modal-box--BackgroundColor: var(--pf-global--BackgroundColor--300);
182
186
  }
@@ -22,6 +22,7 @@ declare const _default: {
22
22
  "info": "pf-m-info",
23
23
  "help": "pf-m-help",
24
24
  "icon": "pf-m-icon"
25
- }
25
+ },
26
+ "themeDark": "pf-theme-dark"
26
27
  };
27
28
  export default _default;
@@ -24,5 +24,6 @@ exports.default = {
24
24
  "info": "pf-m-info",
25
25
  "help": "pf-m-help",
26
26
  "icon": "pf-m-icon"
27
- }
27
+ },
28
+ "themeDark": "pf-theme-dark"
28
29
  };
@@ -22,5 +22,6 @@ export default {
22
22
  "info": "pf-m-info",
23
23
  "help": "pf-m-help",
24
24
  "icon": "pf-m-icon"
25
- }
25
+ },
26
+ "themeDark": "pf-theme-dark"
26
27
  };
@@ -925,4 +925,38 @@
925
925
  }
926
926
  .pf-c-nav__scroll-button:nth-of-type(2)::before {
927
927
  left: 0;
928
+ }
929
+
930
+ :where(.pf-theme-dark) .pf-c-nav {
931
+ --pf-c-nav__item--item__link--after--Top: -1px;
932
+ --pf-c-nav__item--before--BorderColor: var(--pf-global--BorderColor--100);
933
+ --pf-c-nav__link--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
934
+ --pf-c-nav__link--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
935
+ --pf-c-nav__link--active--BackgroundColor: var(--pf-global--BackgroundColor--300);
936
+ --pf-c-nav__link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--300);
937
+ --pf-c-nav__link--before--BorderColor: var(--pf-global--BorderColor--100);
938
+ --pf-c-nav--m-tertiary__scroll-button--before--BorderColor: var(--pf-global--BorderColor--100);
939
+ --pf-c-nav__section-title--Color: var(--pf-global--Color--200);
940
+ --pf-c-nav__section-title--BorderBottomColor: var(--pf-global--BorderColor--100);
941
+ --pf-c-nav__scroll-button--before--BorderColor: var(--pf-global--BorderColor--100);
942
+ --pf-c-nav--c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
943
+ --pf-c-nav__link--hover--before--BorderBottomWidth: 0;
944
+ --pf-c-nav__link--focus--before--BorderBottomWidth: 0;
945
+ --pf-c-nav__link--active--before--BorderBottomWidth: 0;
946
+ --pf-c-nav__link--m-current--before--BorderBottomWidth: 0;
947
+ }
948
+ :where(.pf-theme-dark) .pf-c-nav__link::before {
949
+ bottom: 0;
950
+ }
951
+ :where(.pf-theme-dark) .pf-c-nav__link::after {
952
+ top: var(--pf-c-nav__item--item__link--after--Top);
953
+ }
954
+ :where(.pf-theme-dark) .pf-c-nav__item + .pf-c-nav__item {
955
+ --pf-c-nav__link--after--Top: var(--pf-c-nav__item--item__link--after--Top);
956
+ }
957
+ :where(.pf-theme-dark) .pf-c-nav__subnav {
958
+ --pf-c-nav__item--item__link--after--Top: 0;
959
+ }
960
+ :where(.pf-theme-dark) .pf-c-nav__section {
961
+ --pf-c-nav__item--item__link--after--Top: 0;
928
962
  }
@@ -34,6 +34,7 @@ declare const _default: {
34
34
  "navSectionTitle": "pf-c-nav__section-title",
35
35
  "navSubnav": "pf-c-nav__subnav",
36
36
  "navToggle": "pf-c-nav__toggle",
37
- "navToggleIcon": "pf-c-nav__toggle-icon"
37
+ "navToggleIcon": "pf-c-nav__toggle-icon",
38
+ "themeDark": "pf-theme-dark"
38
39
  };
39
40
  export default _default;
@@ -36,5 +36,6 @@ exports.default = {
36
36
  "navSectionTitle": "pf-c-nav__section-title",
37
37
  "navSubnav": "pf-c-nav__subnav",
38
38
  "navToggle": "pf-c-nav__toggle",
39
- "navToggleIcon": "pf-c-nav__toggle-icon"
39
+ "navToggleIcon": "pf-c-nav__toggle-icon",
40
+ "themeDark": "pf-theme-dark"
40
41
  };
@@ -34,5 +34,6 @@ export default {
34
34
  "navSectionTitle": "pf-c-nav__section-title",
35
35
  "navSubnav": "pf-c-nav__subnav",
36
36
  "navToggle": "pf-c-nav__toggle",
37
- "navToggleIcon": "pf-c-nav__toggle-icon"
37
+ "navToggleIcon": "pf-c-nav__toggle-icon",
38
+ "themeDark": "pf-theme-dark"
38
39
  };
@@ -86,4 +86,8 @@
86
86
 
87
87
  .pf-c-notification-badge__count {
88
88
  margin-left: var(--pf-c-notification-badge__count--MarginLeft);
89
+ }
90
+
91
+ :where(.pf-theme-dark) .pf-c-notification-badge {
92
+ --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--primary-color--300);
89
93
  }
@@ -8,6 +8,7 @@ declare const _default: {
8
8
  "attention": "pf-m-attention"
9
9
  },
10
10
  "notificationBadge": "pf-c-notification-badge",
11
- "notificationBadgeCount": "pf-c-notification-badge__count"
11
+ "notificationBadgeCount": "pf-c-notification-badge__count",
12
+ "themeDark": "pf-theme-dark"
12
13
  };
13
14
  export default _default;
@@ -10,5 +10,6 @@ exports.default = {
10
10
  "attention": "pf-m-attention"
11
11
  },
12
12
  "notificationBadge": "pf-c-notification-badge",
13
- "notificationBadgeCount": "pf-c-notification-badge__count"
13
+ "notificationBadgeCount": "pf-c-notification-badge__count",
14
+ "themeDark": "pf-theme-dark"
14
15
  };
@@ -8,5 +8,6 @@ export default {
8
8
  "attention": "pf-m-attention"
9
9
  },
10
10
  "notificationBadge": "pf-c-notification-badge",
11
- "notificationBadgeCount": "pf-c-notification-badge__count"
11
+ "notificationBadgeCount": "pf-c-notification-badge__count",
12
+ "themeDark": "pf-theme-dark"
12
13
  };
@@ -259,4 +259,15 @@
259
259
  }
260
260
  .pf-c-notification-drawer__group.pf-m-expanded .pf-c-notification-drawer__group-toggle-icon {
261
261
  transform: rotate(var(--pf-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
262
+ }
263
+
264
+ :where(.pf-theme-dark) .pf-c-notification-drawer {
265
+ --pf-c-notification-drawer--BackgroundColor: var(--pf-global--BackgroundColor--300);
266
+ --pf-c-notification-drawer__header--BackgroundColor: var(--pf-global--BackgroundColor--300);
267
+ --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-global--BackgroundColor--300);
268
+ --pf-c-notification-drawer__list-item--BoxShadow: none;
269
+ --pf-c-notification-drawer__list-item--BorderBottomColor: var(--pf-global--BorderColor--100);
270
+ --pf-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-global--BackgroundColor--100);
271
+ --pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow: none;
272
+ --pf-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-global--BackgroundColor--300);
262
273
  }
@@ -29,6 +29,7 @@ declare const _default: {
29
29
  "notificationDrawerListItemHeader": "pf-c-notification-drawer__list-item-header",
30
30
  "notificationDrawerListItemHeaderIcon": "pf-c-notification-drawer__list-item-header-icon",
31
31
  "notificationDrawerListItemHeaderTitle": "pf-c-notification-drawer__list-item-header-title",
32
- "notificationDrawerListItemTimestamp": "pf-c-notification-drawer__list-item-timestamp"
32
+ "notificationDrawerListItemTimestamp": "pf-c-notification-drawer__list-item-timestamp",
33
+ "themeDark": "pf-theme-dark"
33
34
  };
34
35
  export default _default;
@@ -31,5 +31,6 @@ exports.default = {
31
31
  "notificationDrawerListItemHeader": "pf-c-notification-drawer__list-item-header",
32
32
  "notificationDrawerListItemHeaderIcon": "pf-c-notification-drawer__list-item-header-icon",
33
33
  "notificationDrawerListItemHeaderTitle": "pf-c-notification-drawer__list-item-header-title",
34
- "notificationDrawerListItemTimestamp": "pf-c-notification-drawer__list-item-timestamp"
34
+ "notificationDrawerListItemTimestamp": "pf-c-notification-drawer__list-item-timestamp",
35
+ "themeDark": "pf-theme-dark"
35
36
  };
@@ -29,5 +29,6 @@ export default {
29
29
  "notificationDrawerListItemHeader": "pf-c-notification-drawer__list-item-header",
30
30
  "notificationDrawerListItemHeaderIcon": "pf-c-notification-drawer__list-item-header-icon",
31
31
  "notificationDrawerListItemHeaderTitle": "pf-c-notification-drawer__list-item-header-title",
32
- "notificationDrawerListItemTimestamp": "pf-c-notification-drawer__list-item-timestamp"
32
+ "notificationDrawerListItemTimestamp": "pf-c-notification-drawer__list-item-timestamp",
33
+ "themeDark": "pf-theme-dark"
33
34
  };
@@ -241,4 +241,21 @@
241
241
  font-size: var(--pf-c-options-menu__group-title--FontSize);
242
242
  font-weight: var(--pf-c-options-menu__group-title--FontWeight);
243
243
  color: var(--pf-c-options-menu__group-title--Color);
244
+ }
245
+
246
+ :where(.pf-theme-dark) .pf-c-options-menu {
247
+ --pf-c-options-menu__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
248
+ --pf-c-options-menu__toggle--BorderTopColor: transparent;
249
+ --pf-c-options-menu__toggle--BorderRightColor: transparent;
250
+ --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-global--BorderColor--400);
251
+ --pf-c-options-menu__toggle--BorderLeftColor: transparent;
252
+ --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
253
+ --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
254
+ --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
255
+ --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
256
+ --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
257
+ --pf-c-options-menu__menu--Top: 100%;
258
+ }
259
+ :where(.pf-theme-dark) .pf-c-options-menu__toggle.pf-m-plain {
260
+ background: transparent;
244
261
  }
@@ -20,6 +20,7 @@ declare const _default: {
20
20
  "optionsMenuToggleButton": "pf-c-options-menu__toggle-button",
21
21
  "optionsMenuToggleButtonIcon": "pf-c-options-menu__toggle-button-icon",
22
22
  "optionsMenuToggleIcon": "pf-c-options-menu__toggle-icon",
23
- "optionsMenuToggleText": "pf-c-options-menu__toggle-text"
23
+ "optionsMenuToggleText": "pf-c-options-menu__toggle-text",
24
+ "themeDark": "pf-theme-dark"
24
25
  };
25
26
  export default _default;
@@ -22,5 +22,6 @@ exports.default = {
22
22
  "optionsMenuToggleButton": "pf-c-options-menu__toggle-button",
23
23
  "optionsMenuToggleButtonIcon": "pf-c-options-menu__toggle-button-icon",
24
24
  "optionsMenuToggleIcon": "pf-c-options-menu__toggle-icon",
25
- "optionsMenuToggleText": "pf-c-options-menu__toggle-text"
25
+ "optionsMenuToggleText": "pf-c-options-menu__toggle-text",
26
+ "themeDark": "pf-theme-dark"
26
27
  };
@@ -20,5 +20,6 @@ export default {
20
20
  "optionsMenuToggleButton": "pf-c-options-menu__toggle-button",
21
21
  "optionsMenuToggleButtonIcon": "pf-c-options-menu__toggle-button-icon",
22
22
  "optionsMenuToggleIcon": "pf-c-options-menu__toggle-icon",
23
- "optionsMenuToggleText": "pf-c-options-menu__toggle-text"
23
+ "optionsMenuToggleText": "pf-c-options-menu__toggle-text",
24
+ "themeDark": "pf-theme-dark"
24
25
  };