@patternfly/patternfly 6.0.0-alpha.5 → 6.0.0-alpha.50

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 (360) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/README.md +13 -3
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/PF-Backdrop.svg +1 -0
  5. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  6. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  7. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  8. package/assets/images/PF-IconLogo-color.svg +17 -0
  9. package/assets/images/PF-IconLogo.svg +17 -0
  10. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  11. package/assets/images/pf-background.svg +22 -0
  12. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  13. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  14. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  15. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  16. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  17. package/assets/images/pf_logo_white.hbs +35 -0
  18. package/assets/images/pf_logo_white.svg +38 -0
  19. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  20. package/assets/pficon/pficon.scss +6 -129
  21. package/base/_common.scss +29 -4
  22. package/base/_globals.scss +5 -7
  23. package/base/_variables.scss +8 -6
  24. package/base/patternfly-common.css +24 -6
  25. package/base/patternfly-globals.css +5 -4
  26. package/base/patternfly-icons.css +5 -1
  27. package/base/patternfly-pf-icons.css +5 -1
  28. package/base/patternfly-variables.css +889 -787
  29. package/base/tokens/_tokens-dark.scss +322 -265
  30. package/base/tokens/_tokens-default.scss +428 -306
  31. package/base/tokens/_tokens-font.scss +41 -46
  32. package/base/tokens/_tokens-palette.scss +69 -71
  33. package/base/tokens/_workspace-overrides.scss +7 -0
  34. package/components/AboutModalBox/about-modal-box.css +78 -104
  35. package/components/AboutModalBox/about-modal-box.scss +62 -74
  36. package/components/Accordion/accordion.css +96 -175
  37. package/components/Accordion/accordion.scss +106 -193
  38. package/components/ActionList/action-list.css +2 -2
  39. package/components/ActionList/action-list.scss +2 -2
  40. package/components/Alert/alert-group.css +27 -20
  41. package/components/Alert/alert-group.scss +27 -20
  42. package/components/Alert/alert.css +74 -95
  43. package/components/Alert/alert.scss +76 -89
  44. package/components/AppLauncher/app-launcher.css +32 -23
  45. package/components/AppLauncher/app-launcher.scss +32 -23
  46. package/components/Avatar/avatar.css +10 -13
  47. package/components/Avatar/avatar.scss +10 -17
  48. package/components/BackToTop/back-to-top.css +17 -15
  49. package/components/BackToTop/back-to-top.scss +14 -13
  50. package/components/Backdrop/backdrop.css +8 -4
  51. package/components/Backdrop/backdrop.scss +7 -4
  52. package/components/BackgroundImage/background-image.css +11 -4
  53. package/components/BackgroundImage/background-image.scss +13 -4
  54. package/components/Badge/badge.css +25 -17
  55. package/components/Badge/badge.scss +27 -19
  56. package/components/Banner/banner.css +95 -69
  57. package/components/Banner/banner.scss +100 -34
  58. package/components/Breadcrumb/breadcrumb.css +28 -19
  59. package/components/Breadcrumb/breadcrumb.scss +26 -19
  60. package/components/Button/button.css +401 -358
  61. package/components/Button/button.scss +459 -486
  62. package/components/CalendarMonth/calendar-month.css +25 -15
  63. package/components/CalendarMonth/calendar-month.scss +23 -15
  64. package/components/Card/card.css +28 -17
  65. package/components/Card/card.scss +32 -17
  66. package/components/Check/check.css +25 -22
  67. package/components/Check/check.scss +26 -24
  68. package/components/Chip/chip-group.css +6 -6
  69. package/components/Chip/chip-group.scss +6 -6
  70. package/components/Chip/chip.css +16 -9
  71. package/components/Chip/chip.scss +17 -9
  72. package/components/ClipboardCopy/clipboard-copy.css +19 -10
  73. package/components/ClipboardCopy/clipboard-copy.scss +16 -8
  74. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
  75. package/components/CodeBlock/code-block.css +6 -3
  76. package/components/CodeBlock/code-block.scss +6 -3
  77. package/components/CodeEditor/code-editor.css +31 -22
  78. package/components/CodeEditor/code-editor.scss +30 -21
  79. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  80. package/components/Content/content.css +40 -37
  81. package/components/Content/content.scss +40 -37
  82. package/components/ContextSelector/context-selector.css +41 -26
  83. package/components/ContextSelector/context-selector.scss +40 -25
  84. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  85. package/components/DataList/data-list-grid.css +21 -21
  86. package/components/DataList/data-list-grid.scss +3 -3
  87. package/components/DataList/data-list.css +165 -209
  88. package/components/DataList/data-list.scss +138 -185
  89. package/components/DatePicker/date-picker.css +8 -8
  90. package/components/DatePicker/date-picker.scss +8 -8
  91. package/components/DescriptionList/description-list.css +8 -5
  92. package/components/DescriptionList/description-list.scss +8 -5
  93. package/components/Divider/divider.css +97 -177
  94. package/components/Divider/divider.scss +60 -79
  95. package/components/DragDrop/drag-drop.css +8 -8
  96. package/components/DragDrop/drag-drop.scss +8 -8
  97. package/components/Drawer/drawer.css +120 -62
  98. package/components/Drawer/drawer.scss +94 -44
  99. package/components/Dropdown/dropdown.css +76 -69
  100. package/components/Dropdown/dropdown.scss +67 -62
  101. package/components/DualListSelector/dual-list-selector.css +29 -15
  102. package/components/DualListSelector/dual-list-selector.scss +30 -15
  103. package/components/EmptyState/empty-state.css +64 -38
  104. package/components/EmptyState/empty-state.scss +70 -38
  105. package/components/ExpandableSection/expandable-section.css +75 -66
  106. package/components/ExpandableSection/expandable-section.scss +82 -80
  107. package/components/FileUpload/file-upload.css +9 -15
  108. package/components/FileUpload/file-upload.scss +9 -15
  109. package/components/Form/form.css +111 -154
  110. package/components/Form/form.scss +101 -160
  111. package/components/FormControl/form-control.css +95 -111
  112. package/components/FormControl/form-control.scss +97 -92
  113. package/components/HelperText/helper-text.css +29 -35
  114. package/components/HelperText/helper-text.scss +31 -41
  115. package/components/Hint/hint.css +37 -27
  116. package/components/Hint/hint.scss +37 -30
  117. package/components/Icon/icon.css +1 -1
  118. package/components/Icon/icon.scss +1 -1
  119. package/components/InlineEdit/inline-edit.css +9 -9
  120. package/components/InlineEdit/inline-edit.scss +9 -9
  121. package/components/InputGroup/input-group.css +12 -6
  122. package/components/InputGroup/input-group.scss +11 -5
  123. package/components/InputGroup/themes/dark/input-group.scss +1 -1
  124. package/components/JumpLinks/jump-links.css +27 -24
  125. package/components/JumpLinks/jump-links.scss +26 -24
  126. package/components/Label/label-group.css +13 -10
  127. package/components/Label/label-group.scss +13 -10
  128. package/components/Label/label.css +9 -9
  129. package/components/Label/label.scss +9 -9
  130. package/components/List/list.css +25 -25
  131. package/components/List/list.scss +26 -26
  132. package/components/LogViewer/log-viewer.css +14 -14
  133. package/components/LogViewer/log-viewer.scss +14 -14
  134. package/components/Login/login.css +104 -122
  135. package/components/Login/login.scss +92 -91
  136. package/components/Masthead/masthead.css +273 -498
  137. package/components/Masthead/masthead.scss +137 -282
  138. package/components/Menu/menu.css +82 -65
  139. package/components/Menu/menu.scss +85 -69
  140. package/components/MenuToggle/menu-toggle.css +37 -31
  141. package/components/MenuToggle/menu-toggle.scss +37 -33
  142. package/components/ModalBox/modal-box.css +76 -69
  143. package/components/ModalBox/modal-box.scss +74 -70
  144. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  145. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  146. package/components/Nav/nav.css +249 -898
  147. package/components/Nav/nav.scss +316 -1071
  148. package/components/Nav/themes/dark/nav.scss +2 -2
  149. package/components/NotificationBadge/notification-badge.css +66 -85
  150. package/components/NotificationBadge/notification-badge.scss +72 -103
  151. package/components/NotificationDrawer/notification-drawer.css +130 -128
  152. package/components/NotificationDrawer/notification-drawer.scss +130 -129
  153. package/components/NumberInput/number-input.css +2 -2
  154. package/components/NumberInput/number-input.scss +2 -2
  155. package/components/OptionsMenu/options-menu.css +43 -31
  156. package/components/OptionsMenu/options-menu.scss +43 -31
  157. package/components/OverflowMenu/overflow-menu.css +2 -2
  158. package/components/OverflowMenu/overflow-menu.scss +2 -2
  159. package/components/Page/page.css +232 -271
  160. package/components/Page/page.scss +180 -231
  161. package/components/Pagination/pagination.css +71 -121
  162. package/components/Pagination/pagination.scss +56 -127
  163. package/components/Panel/panel.css +40 -30
  164. package/components/Panel/panel.scss +42 -33
  165. package/components/Popover/popover.css +108 -87
  166. package/components/Popover/popover.scss +120 -109
  167. package/components/Progress/progress.css +40 -52
  168. package/components/Progress/progress.scss +48 -62
  169. package/components/ProgressStepper/progress-stepper.css +26 -20
  170. package/components/ProgressStepper/progress-stepper.scss +25 -19
  171. package/components/Radio/radio.css +30 -23
  172. package/components/Radio/radio.scss +31 -25
  173. package/components/Select/select.css +56 -47
  174. package/components/Select/select.scss +56 -47
  175. package/components/Sidebar/sidebar.css +11 -5
  176. package/components/Sidebar/sidebar.scss +11 -5
  177. package/components/SimpleList/simple-list.css +45 -56
  178. package/components/SimpleList/simple-list.scss +51 -55
  179. package/components/Skeleton/skeleton.css +24 -25
  180. package/components/Skeleton/skeleton.scss +21 -26
  181. package/components/SkipToContent/skip-to-content.css +9 -6
  182. package/components/SkipToContent/skip-to-content.scss +8 -6
  183. package/components/Slider/slider.css +80 -55
  184. package/components/Slider/slider.scss +96 -65
  185. package/components/Spinner/spinner.css +17 -34
  186. package/components/Spinner/spinner.scss +19 -47
  187. package/components/Switch/switch.css +49 -41
  188. package/components/Switch/switch.scss +51 -42
  189. package/components/TabContent/tab-content.css +21 -12
  190. package/components/TabContent/tab-content.scss +22 -15
  191. package/components/Table/table-grid.css +264 -203
  192. package/components/Table/table-grid.scss +61 -47
  193. package/components/Table/table-scrollable.css +4 -4
  194. package/components/Table/table-scrollable.scss +6 -4
  195. package/components/Table/table-tree-view.css +112 -105
  196. package/components/Table/table-tree-view.scss +38 -33
  197. package/components/Table/table.css +105 -89
  198. package/components/Table/table.scss +105 -89
  199. package/components/Tabs/tabs.css +76 -48
  200. package/components/Tabs/tabs.scss +74 -48
  201. package/components/TextInputGroup/text-input-group.css +15 -15
  202. package/components/TextInputGroup/text-input-group.scss +15 -15
  203. package/components/Tile/tile.css +10 -10
  204. package/components/Tile/tile.scss +10 -10
  205. package/components/Title/title.css +70 -19
  206. package/components/Title/title.scss +90 -20
  207. package/components/ToggleGroup/toggle-group.css +14 -11
  208. package/components/ToggleGroup/toggle-group.scss +14 -11
  209. package/components/Toolbar/toolbar.css +57 -43
  210. package/components/Toolbar/toolbar.scss +45 -25
  211. package/components/Tooltip/tooltip.css +74 -44
  212. package/components/Tooltip/tooltip.scss +93 -77
  213. package/components/TreeView/tree-view.css +48 -27
  214. package/components/TreeView/tree-view.scss +50 -28
  215. package/components/Truncate/truncate.css +13 -0
  216. package/components/Truncate/truncate.scss +19 -3
  217. package/components/Wizard/wizard.css +57 -36
  218. package/components/Wizard/wizard.scss +57 -36
  219. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  220. package/docs/components/Accordion/examples/Accordion.md +614 -416
  221. package/docs/components/Alert/examples/Alert.md +3 -3
  222. package/docs/components/Avatar/examples/Avatar.md +5 -19
  223. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  224. package/docs/components/Badge/examples/Badge.md +21 -0
  225. package/docs/components/Banner/examples/Banner.md +48 -25
  226. package/docs/components/Brand/examples/Brand.css +12 -0
  227. package/docs/components/Brand/examples/Brand.md +51 -32
  228. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  229. package/docs/components/Button/examples/Button.css +6 -2
  230. package/docs/components/Button/examples/Button.md +1425 -87
  231. package/docs/components/Card/examples/Card.md +143 -37
  232. package/docs/components/Check/examples/Check.md +71 -58
  233. package/docs/components/Chip/examples/Chip.md +1 -1
  234. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  235. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  236. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  237. package/docs/components/Content/examples/Content.md +5 -5
  238. package/docs/components/Divider/examples/Divider.css +3 -1
  239. package/docs/components/Divider/examples/Divider.md +4 -5
  240. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  241. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  242. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  243. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  244. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  245. package/docs/components/Form/examples/Form.md +134 -89
  246. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  247. package/docs/components/Label/examples/Label.md +12 -12
  248. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  249. package/docs/components/LogViewer/examples/LogViewer.md +250 -160
  250. package/docs/components/Login/examples/Login.md +10 -5
  251. package/docs/components/Masthead/examples/masthead.md +443 -65
  252. package/docs/components/Menu/examples/Menu.css +8 -0
  253. package/docs/components/Menu/examples/Menu.md +594 -543
  254. package/docs/components/MenuToggle/examples/MenuToggle.md +109 -96
  255. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  256. package/docs/components/Nav/examples/Navigation.css +3 -47
  257. package/docs/components/Nav/examples/Navigation.md +305 -353
  258. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  259. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  260. package/docs/components/Page/examples/Page.css +0 -8
  261. package/docs/components/Page/examples/Page.md +22 -21
  262. package/docs/components/Pagination/examples/Pagination.md +663 -637
  263. package/docs/components/Panel/examples/Panel.md +12 -0
  264. package/docs/components/Popover/examples/Popover.css +4 -9
  265. package/docs/components/Popover/examples/Popover.md +1 -1
  266. package/docs/components/Radio/examples/Radio.md +62 -54
  267. package/docs/components/Select/deprecated/Select.md +184 -177
  268. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  269. package/docs/components/TabContent/examples/TabContent.md +10 -10
  270. package/docs/components/Table/examples/Table.css +2 -2
  271. package/docs/components/Table/examples/Table.md +10 -10
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  273. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  274. package/docs/components/Tile/examples/Tile.css +1 -1
  275. package/docs/components/Title/examples/Title.md +18 -0
  276. package/docs/components/Toolbar/examples/Toolbar.md +663 -2894
  277. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  278. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  279. package/docs/components/Truncate/examples/Truncate.css +2 -2
  280. package/docs/components/Truncate/examples/Truncate.md +2 -2
  281. package/docs/demos/AboutModal/examples/AboutModal.md +103 -30
  282. package/docs/demos/Alert/examples/Alert.md +327 -84
  283. package/docs/demos/BackToTop/examples/BackToTop.md +101 -28
  284. package/docs/demos/Banner/examples/Banner.md +209 -58
  285. package/docs/demos/Card/examples/Card.css +3 -3
  286. package/docs/demos/Card/examples/Card.md +28 -12
  287. package/docs/demos/CardView/examples/CardView.md +263 -205
  288. package/docs/demos/ContextSelector/examples/ContextSelector.md +373 -90
  289. package/docs/demos/Dashboard/examples/Dashboard.md +104 -31
  290. package/docs/demos/DataList/examples/DataList.md +995 -928
  291. package/docs/demos/DescriptionList/examples/DescriptionList.md +303 -84
  292. package/docs/demos/Drawer/examples/Drawer.md +505 -140
  293. package/docs/demos/Form/examples/BasicForms.md +131 -80
  294. package/docs/demos/JumpLinks/examples/JumpLinks.md +606 -168
  295. package/docs/demos/Masthead/examples/Masthead.md +767 -323
  296. package/docs/demos/Modal/examples/Modal.md +639 -192
  297. package/docs/demos/Nav/examples/Nav.md +685 -896
  298. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +510 -140
  299. package/docs/demos/Page/examples/Page.md +933 -264
  300. package/docs/demos/Page/examples/Penta.md +569 -501
  301. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  302. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  303. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1296 -917
  304. package/docs/demos/Skeleton/examples/Skeleton.md +108 -63
  305. package/docs/demos/Table/examples/Table.md +3832 -3390
  306. package/docs/demos/Tabs/examples/Tabs.md +636 -191
  307. package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
  308. package/docs/demos/Toolbar/examples/Toolbar.md +1331 -1493
  309. package/docs/demos/Wizard/examples/Wizard.md +909 -252
  310. package/docs/layouts/Flex/examples/Flex.md +16 -16
  311. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  312. package/icons/pficons.mjs +1 -0
  313. package/layouts/Flex/flex.css +115 -43
  314. package/layouts/Flex/flex.scss +20 -8
  315. package/package.json +36 -32
  316. package/patternfly-addons.css +732 -972
  317. package/patternfly-base-no-globals-theme-dark-unversioned.css +923 -799
  318. package/patternfly-base-no-globals.css +923 -799
  319. package/patternfly-base-theme-dark-unversioned.css +928 -803
  320. package/patternfly-base.css +928 -803
  321. package/patternfly-no-globals.css +6092 -6615
  322. package/patternfly-theme-dark-unversioned.css +6097 -6619
  323. package/patternfly.css +6097 -6619
  324. package/patternfly.min.css +1 -1
  325. package/patternfly.min.css.map +1 -1
  326. package/sass-utilities/functions.scss +6 -0
  327. package/sass-utilities/mixins.scss +62 -2
  328. package/sass-utilities/scss-variables.scss +8 -8
  329. package/sass-utilities/themes/dark/mixins.scss +3 -1
  330. package/utilities/Accessibility/accessibility.css +12 -12
  331. package/utilities/Spacing/spacing.css +720 -960
  332. package/utilities/Spacing/spacing.scss +4 -8
  333. package/base/themes/dark/_variables.scss +0 -102
  334. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  335. package/components/Accordion/themes/dark/accordion.scss +0 -9
  336. package/components/Alert/themes/dark/alert.scss +0 -17
  337. package/components/Badge/themes/dark/badge.scss +0 -9
  338. package/components/Banner/themes/dark/banner.scss +0 -14
  339. package/components/Button/themes/dark/button.scss +0 -51
  340. package/components/DataList/themes/dark/data-list.scss +0 -10
  341. package/components/Form/themes/dark/form.scss +0 -7
  342. package/components/FormControl/themes/dark/form-control.scss +0 -24
  343. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  344. package/components/Hint/themes/dark/hint.scss +0 -8
  345. package/components/Login/themes/dark/login.scss +0 -12
  346. package/components/Masthead/themes/dark/masthead.scss +0 -14
  347. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  348. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  349. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  350. package/components/Page/themes/dark/page.scss +0 -69
  351. package/components/Pagination/themes/dark/pagination.scss +0 -7
  352. package/components/Panel/themes/dark/panel.scss +0 -7
  353. package/components/Popover/themes/dark/popover.scss +0 -11
  354. package/components/Progress/themes/dark/progress.scss +0 -9
  355. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  356. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  357. package/components/Switch/themes/dark/switch.scss +0 -11
  358. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  359. package/docs/components/Avatar/examples/Avatar.css +0 -3
  360. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/components/Page/page.css CHANGED
@@ -1,16 +1,4 @@
1
- .pf-v5-c-page__sidebar.pf-m-light {
2
- --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
3
- --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
4
- --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
5
- --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
6
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
- --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
- --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
- --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
- --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
11
- }
12
-
13
- .pf-v5-c-page__main-section[class*=pf-m-dark-], .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector, .pf-v5-c-page__sidebar, .pf-v5-c-page__header {
1
+ .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector {
14
2
  --pf-v5-global--Color--100: var(--pf-v5-global--Color--light-100);
15
3
  --pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200);
16
4
  --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--light-100);
@@ -21,7 +9,7 @@
21
9
  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
22
10
  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
23
11
  }
24
- .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button, .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button, .pf-v5-c-page__sidebar .pf-v5-c-button, .pf-v5-c-page__header .pf-v5-c-button {
12
+ .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button {
25
13
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
26
14
  }
27
15
 
@@ -75,119 +63,117 @@
75
63
  }
76
64
 
77
65
  :root {
78
- --pf-v5-c-page--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
79
- --pf-v5-c-page--inset: var(--pf-v5-global--spacer--md);
80
- --pf-v5-c-page--xl--inset: var(--pf-v5-global--spacer--lg);
81
- --pf-v5-c-page__header--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
66
+ --pf-v5-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
67
+ --pf-v5-c-page--inset: var(--pf-t--global--spacer--md);
68
+ --pf-v5-c-page--xl--inset: var(--pf-t--global--spacer--xl);
69
+ --pf-v5-c-page__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
82
70
  --pf-v5-c-page__header--ZIndex: var(--pf-v5-global--ZIndex--md);
83
71
  --pf-v5-c-page__header--MinHeight: 4.75rem;
84
- --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-v5-global--spacer--md);
85
- --pf-v5-c-page__header-brand--xl--PaddingRight: var(--pf-v5-global--spacer--xl);
86
- --pf-v5-c-page__header-brand--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
87
- --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop: var(--pf-v5-global--spacer--sm);
88
- --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
89
- --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom: var(--pf-v5-global--spacer--sm);
90
- --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
91
- --pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight: var(--pf-v5-global--spacer--md);
72
+ --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-t--global--spacer--md);
73
+ --pf-v5-c-page__header-brand--xl--PaddingRight: var(--pf-t--global--spacer--xl);
74
+ --pf-v5-c-page__header-brand--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
75
+ --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop: var(--pf-t--global--spacer--sm);
76
+ --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight: var(--pf-t--global--spacer--sm);
77
+ --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom: var(--pf-t--global--spacer--sm);
78
+ --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
79
+ --pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight: var(--pf-t--global--spacer--md);
92
80
  --pf-v5-c-page__header-sidebar-toggle__c-button--MarginLeft: calc(var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft) * -1);
93
- --pf-v5-c-page__header-sidebar-toggle__c-button--FontSize: var(--pf-v5-global--FontSize--2xl);
81
+ --pf-v5-c-page__header-sidebar-toggle__c-button--FontSize: var(--pf-t--global--icon--size--lg);
94
82
  --pf-v5-c-page__header-brand-link--c-brand--MaxHeight: 3.75rem;
95
- --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
83
+ --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
96
84
  --pf-v5-c-page__header-nav--xl--BackgroundColor: transparent;
97
- --pf-v5-c-page__header-nav--xl--PaddingRight: var(--pf-v5-global--spacer--xl);
98
- --pf-v5-c-page__header-nav--xl--PaddingLeft: var(--pf-v5-global--spacer--xl);
99
- --pf-v5-c-page__header-tools--MarginRight: var(--pf-v5-global--spacer--md);
100
- --pf-v5-c-page__header-tools--xl--MarginRight: var(--pf-v5-global--spacer--lg);
101
- --pf-v5-c-page__header-tools--c-avatar--MarginLeft: var(--pf-v5-global--spacer--md);
102
- --pf-v5-c-page__header-tools-group--MarginLeft: var(--pf-v5-global--spacer--xl);
85
+ --pf-v5-c-page__header-nav--xl--PaddingRight: var(--pf-t--global--spacer--xl);
86
+ --pf-v5-c-page__header-nav--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
87
+ --pf-v5-c-page__header-tools--MarginRight: var(--pf-t--global--spacer--md);
88
+ --pf-v5-c-page__header-tools--xl--MarginRight: var(--pf-t--global--spacer--lg);
89
+ --pf-v5-c-page__header-tools--c-avatar--MarginLeft: var(--pf-t--global--spacer--md);
90
+ --pf-v5-c-page__header-tools-group--MarginLeft: var(--pf-t--global--spacer--xl);
103
91
  --pf-v5-c-page__header-tools-group--Display: flex;
104
92
  --pf-v5-c-page__header-tools-item--Display: block;
105
- --pf-v5-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
106
- --pf-v5-c-page__header-tools--c-button--notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--primary-color--200);
107
- --pf-v5-c-page__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
108
- --pf-v5-c-page__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--primary-color--200);
109
- --pf-v5-c-page__header-tools--c-button--m-selected--notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
110
93
  --pf-v5-c-page__header-tools--c-button--m-selected--before--Width: auto;
111
94
  --pf-v5-c-page__header-tools--c-button--m-selected--before--Height: auto;
112
- --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
113
- --pf-v5-c-page__header-tools--c-button--m-selected--before--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
114
- --pf-v5-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor: transparent;
115
95
  --pf-v5-c-page__sidebar--ZIndex: var(--pf-v5-global--ZIndex--sm);
116
96
  --pf-v5-c-page__sidebar--Width: 18.125rem;
117
- --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
118
- --pf-v5-c-page__sidebar--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
119
- --pf-v5-c-page__sidebar--m-light--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
120
- --pf-v5-c-page__sidebar--m-light--BorderRightColor: var(--pf-v5-global--BorderColor--100);
121
- --pf-v5-c-page__sidebar--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
97
+ --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
98
+ --pf-v5-c-page__sidebar--BoxShadow: none;
122
99
  --pf-v5-c-page__sidebar--Transition: var(--pf-v5-global--Transition);
123
100
  --pf-v5-c-page__sidebar--TranslateX: -100%;
124
101
  --pf-v5-c-page__sidebar--TranslateZ: 0;
125
102
  --pf-v5-c-page__sidebar--m-expanded--TranslateX: 0;
126
103
  --pf-v5-c-page__sidebar--xl--TranslateX: 0;
104
+ --pf-v5-c-page__sidebar--MarginRight: 0;
105
+ --pf-v5-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
106
+ --pf-v5-c-page__sidebar--PaddingInlineStart: 0;
107
+ --pf-v5-c-page__sidebar-header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
108
+ --pf-v5-c-page__sidebar-header--BorderBottomColor: var(--pf-t--global--border--color--default);
109
+ --pf-v5-c-page__sidebar-header--PaddingTop: var(--pf-t--global--spacer--sm);
110
+ --pf-v5-c-page__sidebar-header--PaddingBottom: var(--pf-t--global--spacer--md);
111
+ --pf-v5-c-page__sidebar-title--PaddingLeft: var(--pf-t--global--spacer--lg);
112
+ --pf-v5-c-page__sidebar-title--FontSize: var(--pf-t--global--font--size--heading--xs);
113
+ --pf-v5-c-page__sidebar-title--LineHeight: var(--pf-t--global--font--line-height--heading);
114
+ --pf-v5-c-page__sidebar-title--FontFamily: var(--pf-t--global--font--family--heading);
115
+ --pf-v5-c-page__sidebar-title--FontWeight: var(--pf-t--global--font--weight--heading);
127
116
  --pf-v5-c-page__sidebar-body--PaddingRight: 0;
128
117
  --pf-v5-c-page__sidebar-body--PaddingLeft: 0;
129
118
  --pf-v5-c-page__sidebar-body--m-page-insets--PaddingRight: var(--pf-v5-c-page--inset);
130
119
  --pf-v5-c-page__sidebar-body--m-page-insets--PaddingLeft: var(--pf-v5-c-page--inset);
131
- --pf-v5-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-v5-global--BackgroundColor--dark-200);
132
- --pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
133
- --pf-v5-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-v5-global--BackgroundColor--dark-200);
120
+ --pf-v5-c-page__sidebar-body--m-menu--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
121
+ --pf-v5-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-t--global--border--color--default);
122
+ --pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-t--global--border--width--button--default);
123
+ --pf-v5-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-t--global--border--color--default);
134
124
  --pf-v5-c-page__main--ZIndex: var(--pf-v5-global--ZIndex--xs);
135
- --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-global--spacer--md);
136
- --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-global--spacer--md);
137
- --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-global--spacer--md);
138
- --pf-v5-c-page__main-section--PaddingLeft: var(--pf-v5-global--spacer--md);
139
- --pf-v5-c-page__main-section--xl--PaddingTop: var(--pf-v5-global--spacer--lg);
140
- --pf-v5-c-page__main-section--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
141
- --pf-v5-c-page__main-section--xl--PaddingBottom: var(--pf-v5-global--spacer--lg);
142
- --pf-v5-c-page__main-section--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
143
- --pf-v5-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-v5-global--spacer--md);
144
- --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
145
- --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
146
- --pf-v5-c-page__main-section--m-light-100--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
147
- --pf-v5-c-page__main-section--m-dark-100--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-100);
148
- --pf-v5-c-page__main-section--m-dark-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-200);
149
- --pf-v5-c-page__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-v5-global--spacer--md);
150
- --pf-v5-c-page__main-nav--page__main-tabs--PaddingTop: var(--pf-v5-global--spacer--md);
125
+ --pf-v5-c-page__main--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
126
+ --pf-v5-c-page__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
127
+ --pf-v5-c-page__main--MarginInlineStart: var(--pf-t--global--spacer--lg);
128
+ --pf-v5-c-page__main--MarginInlineEnd: var(--pf-t--global--spacer--lg);
129
+ --pf-v5-c-page__main--BorderRadius: var(--pf-t--global--border--radius--large);
130
+ --pf-v5-c-page__main--BorderWidth: var(--pf-t--global--spacer--sm);
131
+ --pf-v5-c-page__main--BorderColor: var(--pf-v5-c-page__main--BackgroundColor);
132
+ --pf-v5-c-page__main-section--MarginTop: var(--pf-t--global--spacer--md);
133
+ --pf-v5-c-page__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
134
+ --pf-v5-c-page__main-section--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v5-c-page__main--BorderWidth));
135
+ --pf-v5-c-page__main-section--PaddingBottom: 0;
136
+ --pf-v5-c-page__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v5-c-page__main--BorderWidth));
137
+ --pf-v5-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
138
+ --pf-v5-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
139
+ --pf-v5-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
140
+ --pf-v5-c-page__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
141
+ --pf-v5-c-page__main-nav--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
151
142
  --pf-v5-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v5-c-page__sidebar--Width));
152
143
  --pf-v5-c-page--section--m-sticky-top--ZIndex: var(--pf-v5-global--ZIndex--md);
153
- --pf-v5-c-page--section--m-sticky-top--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
144
+ --pf-v5-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
154
145
  --pf-v5-c-page--section--m-sticky-bottom--ZIndex: var(--pf-v5-global--ZIndex--md);
155
- --pf-v5-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
156
- --pf-v5-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
146
+ --pf-v5-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
147
+ --pf-v5-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
157
148
  --pf-v5-c-page--section--m-shadow-bottom--ZIndex: var(--pf-v5-global--ZIndex--xs);
158
- --pf-v5-c-page--section--m-shadow-top--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
149
+ --pf-v5-c-page--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
159
150
  --pf-v5-c-page--section--m-shadow-top--ZIndex: var(--pf-v5-global--ZIndex--xs);
160
- --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
161
- --pf-v5-c-page__main-nav--PaddingTop: var(--pf-v5-global--spacer--md);
151
+ --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
152
+ --pf-v5-c-page__main-nav--PaddingTop: var(--pf-t--global--spacer--md);
162
153
  --pf-v5-c-page__main-nav--PaddingRight: 0;
163
154
  --pf-v5-c-page__main-nav--PaddingLeft: 0;
164
- --pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom: var(--pf-v5-global--spacer--md);
165
- --pf-v5-c-page__main-nav--xl--PaddingRight: var(--pf-v5-global--spacer--sm);
166
- --pf-v5-c-page__main-nav--xl--PaddingLeft: var(--pf-v5-global--spacer--sm);
167
- --pf-v5-c-page__main-subnav--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
168
- --pf-v5-c-page__main-subnav--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
169
- --pf-v5-c-page__main-subnav--BorderTopColor: var(--pf-v5-global--palette--black-800);
155
+ --pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom: var(--pf-t--global--spacer--md);
156
+ --pf-v5-c-page__main-nav--xl--PaddingRight: var(--pf-t--global--spacer--sm);
157
+ --pf-v5-c-page__main-nav--xl--PaddingLeft: var(--pf-t--global--spacer--sm);
158
+ --pf-v5-c-page__main-subnav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
159
+ --pf-v5-c-page__main-subnav--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
160
+ --pf-v5-c-page__main-subnav--BorderTopColor: var(--pf-t--global--border--color--default);
170
161
  --pf-v5-c-page__main-subnav--BorderLeftWidth: 0;
171
- --pf-v5-c-page__main-subnav--BorderLeftColor: var(--pf-v5-global--palette--black-800);
172
- --pf-v5-c-page__sidebar--main__main-subnav--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
162
+ --pf-v5-c-page__main-subnav--BorderLeftColor: var(--pf-t--global--border--color--default);
163
+ --pf-v5-c-page__sidebar--main__main-subnav--BorderLeftWidth: var(--pf-t--global--border--width--divider--default);
173
164
  --pf-v5-c-page__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth: 0;
174
- --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
175
- --pf-v5-c-page__main-breadcrumb--PaddingTop: var(--pf-v5-global--spacer--md);
176
- --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-global--spacer--md);
165
+ --pf-v5-c-page__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);
166
+ --pf-v5-c-page__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v5-c-page__main--BorderWidth));
177
167
  --pf-v5-c-page__main-breadcrumb--PaddingBottom: 0;
178
- --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-global--spacer--md);
179
- --pf-v5-c-page__main-breadcrumb--m-sticky-top--PaddingBottom: var(--pf-v5-global--spacer--md);
180
- --pf-v5-c-page__main-breadcrumb--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
181
- --pf-v5-c-page__main-breadcrumb--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
168
+ --pf-v5-c-page__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v5-c-page__main--BorderWidth));
169
+ --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
182
170
  --pf-v5-c-page__main-tabs--PaddingTop: 0;
183
171
  --pf-v5-c-page__main-tabs--PaddingRight: 0;
184
172
  --pf-v5-c-page__main-tabs--PaddingBottom: 0;
185
- --pf-v5-c-page__main-tabs--PaddingLeft: 0;
186
- --pf-v5-c-page__main-tabs--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
187
- --pf-v5-c-page__main-wizard--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
188
- --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-v5-global--BorderColor--100);
189
- --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
190
- --pf-v5-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
173
+ --pf-v5-c-page__main-tabs--BackgroundColor: var(--pf-t--global--background--color--primary--default);
174
+ --pf-v5-c-page__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
175
+ --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-t--global--border--color--default);
176
+ --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-t--global--border--width--button--default);
191
177
  }
192
178
  @media (min-width: 1200px) {
193
179
  :root {
@@ -212,26 +198,6 @@
212
198
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--xl--TranslateX);
213
199
  }
214
200
  }
215
- @media screen and (min-width: 1200px) {
216
- :root {
217
- --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-c-page__main-section--xl--PaddingTop);
218
- --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-c-page__main-section--xl--PaddingRight);
219
- --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-c-page__main-section--xl--PaddingBottom);
220
- --pf-v5-c-page__main-section--PaddingLeft: var(--pf-v5-c-page__main-section--xl--PaddingLeft);
221
- }
222
- }
223
- @media screen and (min-width: 1200px) {
224
- :root {
225
- --pf-v5-c-page__main-nav--PaddingRight: var(--pf-v5-c-page__main-nav--xl--PaddingRight);
226
- --pf-v5-c-page__main-nav--PaddingLeft: var(--pf-v5-c-page__main-nav--xl--PaddingLeft);
227
- }
228
- }
229
- @media screen and (min-width: 1200px) {
230
- :root {
231
- --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingRight);
232
- --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft);
233
- }
234
- }
235
201
 
236
202
  .pf-v5-c-page {
237
203
  display: grid;
@@ -257,7 +223,6 @@
257
223
  }
258
224
 
259
225
  .pf-v5-c-page__header {
260
- color: var(--pf-v5-global--Color--100);
261
226
  display: grid;
262
227
  grid-template-columns: auto auto;
263
228
  align-items: center;
@@ -281,11 +246,11 @@
281
246
 
282
247
  .pf-v5-c-page__header-brand {
283
248
  grid-column: 1/2;
284
- padding-left: var(--pf-v5-c-page__header-brand--PaddingLeft);
249
+ padding-inline-start: var(--pf-v5-c-page__header-brand--PaddingLeft);
285
250
  }
286
251
  @media (min-width: 1200px) {
287
252
  .pf-v5-c-page__header-brand {
288
- padding-right: var(--pf-v5-c-page__header-brand--xl--PaddingRight);
253
+ padding-inline-end: var(--pf-v5-c-page__header-brand--xl--PaddingRight);
289
254
  }
290
255
  }
291
256
 
@@ -299,9 +264,12 @@
299
264
  }
300
265
 
301
266
  .pf-v5-c-page__header-brand-toggle .pf-v5-c-button {
302
- padding: var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop) var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight) var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom) var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft);
303
- margin-right: var(--pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight);
304
- margin-left: var(--pf-v5-c-page__header-sidebar-toggle__c-button--MarginLeft);
267
+ padding-block-start: var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop);
268
+ padding-block-end: var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom);
269
+ padding-inline-start: var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft);
270
+ padding-inline-end: var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight);
271
+ margin-inline-start: var(--pf-v5-c-page__header-sidebar-toggle__c-button--MarginLeft);
272
+ margin-inline-end: var(--pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight);
305
273
  font-size: var(--pf-v5-c-page__header-sidebar-toggle__c-button--FontSize);
306
274
  line-height: 1;
307
275
  }
@@ -311,8 +279,8 @@
311
279
  grid-column: 1/-1;
312
280
  align-self: stretch;
313
281
  min-width: 0;
314
- padding-right: var(--pf-v5-c-page__header-nav--PaddingRight);
315
- padding-left: var(--pf-v5-c-page__header-nav--PaddingLeft);
282
+ padding-inline-start: var(--pf-v5-c-page__header-nav--PaddingLeft);
283
+ padding-inline-end: var(--pf-v5-c-page__header-nav--PaddingRight);
316
284
  background-color: var(--pf-v5-c-page__header-nav--BackgroundColor);
317
285
  }
318
286
  @media screen and (min-width: 1200px) {
@@ -327,11 +295,11 @@
327
295
 
328
296
  .pf-v5-c-page__header-tools {
329
297
  grid-column: 2/3;
330
- margin-right: var(--pf-v5-c-page__header-tools--MarginRight);
331
- margin-left: auto;
298
+ margin-inline-start: auto;
299
+ margin-inline-end: var(--pf-v5-c-page__header-tools--MarginRight);
332
300
  }
333
301
  .pf-v5-c-page__header-tools .pf-v5-c-avatar {
334
- margin-left: var(--pf-v5-c-page__header-tools--c-avatar--MarginLeft);
302
+ margin-inline-start: var(--pf-v5-c-page__header-tools--c-avatar--MarginLeft);
335
303
  }
336
304
  @media screen and (min-width: 992px) {
337
305
  .pf-v5-c-page__header-tools {
@@ -344,47 +312,14 @@
344
312
  align-items: center;
345
313
  }
346
314
  .pf-v5-c-page__header-tools-group + .pf-v5-c-page__header-tools-group {
347
- margin-left: var(--pf-v5-c-page__header-tools-group--MarginLeft);
315
+ margin-inline-start: var(--pf-v5-c-page__header-tools-group--MarginLeft);
348
316
  }
349
317
 
350
318
  .pf-v5-c-page__header-tools-item {
351
319
  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-page__header-tools-item--Display);
352
320
  }
353
- .pf-v5-c-page__header-tools-item .pf-v5-c-notification-badge.pf-m-read:hover {
354
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor);
355
- }
356
- .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button {
357
- background-color: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
358
- border-radius: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--BorderRadius);
359
- }
360
- .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button::before {
361
- position: absolute;
362
- top: 0;
363
- right: 0;
364
- bottom: 0;
365
- left: 0;
366
- width: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--Width);
367
- height: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--Height);
368
- content: "";
369
- }
370
- .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge.pf-m-unread {
371
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-page__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor);
372
- }
373
- .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge.pf-m-unread::after {
374
- border-color: var(--pf-v5-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor);
375
- }
376
- .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge.pf-m-attention {
377
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
378
- }
379
- .pf-v5-c-page__header-tools-item .pf-v5-c-button:focus .pf-v5-c-notification-badge.pf-m-unread {
380
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-page__header-tools--c-button--notification-badge--m-unread--after--BackgroundColor);
381
- }
382
- .pf-v5-c-page__header-tools-item .pf-v5-c-button:focus .pf-v5-c-notification-badge.pf-m-attention {
383
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-page__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor);
384
- }
385
321
 
386
322
  .pf-v5-c-page__sidebar {
387
- color: var(--pf-v5-global--Color--100);
388
323
  z-index: var(--pf-v5-c-page__sidebar--ZIndex);
389
324
  display: flex;
390
325
  flex-direction: column;
@@ -392,6 +327,10 @@
392
327
  grid-row-start: 2;
393
328
  grid-column-start: 1;
394
329
  width: var(--pf-v5-c-page__sidebar--Width);
330
+ padding-block-start: 0;
331
+ padding-block-end: var(--pf-v5-c-page__sidebar--PaddingBlockEnd);
332
+ padding-inline-start: var(--pf-v5-c-page__sidebar--PaddingInlineStart);
333
+ margin-inline-end: var(--pf-v5-c-page__sidebar--MarginRight);
395
334
  overflow-x: hidden;
396
335
  overflow-y: auto;
397
336
  -webkit-overflow-scrolling: touch;
@@ -399,6 +338,10 @@
399
338
  transition: var(--pf-v5-c-page__sidebar--Transition);
400
339
  transform: translateX(var(--pf-v5-c-page__sidebar--TranslateX)) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
401
340
  }
341
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-page__sidebar {
342
+ transform: translateX(calc(var(--pf-v5-c-page__sidebar--TranslateX) * var(--pf-v5-global--inverse--multiplier))) translateZ(var(--pf-v5-c-page__sidebar--TranslateZ));
343
+ }
344
+
402
345
  .pf-v5-c-page__sidebar.pf-m-expanded {
403
346
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--m-expanded--TranslateX);
404
347
  box-shadow: var(--pf-v5-c-page__sidebar--BoxShadow);
@@ -412,22 +355,31 @@
412
355
  max-width: 0;
413
356
  overflow: hidden;
414
357
  }
415
- .pf-v5-c-page__sidebar.pf-m-light {
416
- color: var(--pf-v5-global--Color--100);
417
- --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-c-page__sidebar--m-light--BackgroundColor);
418
- border-right: var(--pf-v5-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-v5-c-page__sidebar--m-light--BorderRightColor);
358
+
359
+ .pf-v5-c-page__sidebar-header {
360
+ padding-block-start: var(--pf-v5-c-page__sidebar-header--PaddingTop);
361
+ padding-block-end: var(--pf-v5-c-page__sidebar-header--PaddingBottom);
362
+ border-block-end: var(--pf-v5-c-page__sidebar-header--BorderBottomWidth) solid var(--pf-v5-c-page__sidebar-header--BorderBottomColor);
363
+ }
364
+
365
+ .pf-v5-c-page__sidebar-title {
366
+ padding-inline-start: var(--pf-v5-c-page__sidebar-title--PaddingLeft);
367
+ font-family: var(--pf-v5-c-page__sidebar-title--FontFamily);
368
+ font-size: var(--pf-v5-c-page__sidebar-title--FontSize);
369
+ font-weight: var(--pf-v5-c-page__sidebar-title--FontWeight);
370
+ line-height: var(--pf-v5-c-page__sidebar-title--LineHeight);
419
371
  }
420
372
 
421
373
  .pf-v5-c-page__sidebar-body {
422
- padding-right: var(--pf-v5-c-page__sidebar-body--PaddingRight);
423
- padding-left: var(--pf-v5-c-page__sidebar-body--PaddingLeft);
374
+ padding-inline-start: var(--pf-v5-c-page__sidebar-body--PaddingLeft);
375
+ padding-inline-end: var(--pf-v5-c-page__sidebar-body--PaddingRight);
424
376
  }
425
377
  .pf-v5-c-page__sidebar-body:last-child {
426
378
  flex-grow: 1;
427
379
  }
428
380
  .pf-v5-c-page__sidebar-body.pf-m-menu {
429
- background-color: var(--pf-v5-global--palette--black-900);
430
- border-top: var(--pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-v5-c-page__sidebar-body--m-menu--BorderTopColor);
381
+ background-color: var(--pf-v5-c-page__sidebar-body--m-menu--BackgroundColor);
382
+ border-block-start: var(--pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-v5-c-page__sidebar-body--m-menu--BorderTopColor);
431
383
  }
432
384
  .pf-v5-c-page__sidebar-body.pf-m-menu + .pf-v5-c-page__sidebar-body.pf-m-menu {
433
385
  --pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth: 0;
@@ -536,7 +488,7 @@
536
488
  .pf-v5-c-page__main-group.pf-m-sticky-top,
537
489
  .pf-v5-c-page__main-subnav.pf-m-sticky-top {
538
490
  position: sticky;
539
- top: 0;
491
+ inset-block-start: 0;
540
492
  z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
541
493
  box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
542
494
  }
@@ -548,7 +500,7 @@
548
500
  .pf-v5-c-page__main-group.pf-m-sticky-bottom,
549
501
  .pf-v5-c-page__main-subnav.pf-m-sticky-bottom {
550
502
  position: sticky;
551
- bottom: 0;
503
+ inset-block-end: 0;
552
504
  z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
553
505
  box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
554
506
  }
@@ -561,7 +513,7 @@
561
513
  .pf-v5-c-page__main-group.pf-m-sticky-top-on-sm-height,
562
514
  .pf-v5-c-page__main-subnav.pf-m-sticky-top-on-sm-height {
563
515
  position: sticky;
564
- top: 0;
516
+ inset-block-start: 0;
565
517
  z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
566
518
  box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
567
519
  }
@@ -573,7 +525,7 @@
573
525
  .pf-v5-c-page__main-group.pf-m-sticky-bottom-on-sm-height,
574
526
  .pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-sm-height {
575
527
  position: sticky;
576
- bottom: 0;
528
+ inset-block-end: 0;
577
529
  z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
578
530
  box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
579
531
  }
@@ -587,7 +539,7 @@
587
539
  .pf-v5-c-page__main-group.pf-m-sticky-top-on-md-height,
588
540
  .pf-v5-c-page__main-subnav.pf-m-sticky-top-on-md-height {
589
541
  position: sticky;
590
- top: 0;
542
+ inset-block-start: 0;
591
543
  z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
592
544
  box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
593
545
  }
@@ -599,7 +551,7 @@
599
551
  .pf-v5-c-page__main-group.pf-m-sticky-bottom-on-md-height,
600
552
  .pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-md-height {
601
553
  position: sticky;
602
- bottom: 0;
554
+ inset-block-end: 0;
603
555
  z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
604
556
  box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
605
557
  }
@@ -613,7 +565,7 @@
613
565
  .pf-v5-c-page__main-group.pf-m-sticky-top-on-lg-height,
614
566
  .pf-v5-c-page__main-subnav.pf-m-sticky-top-on-lg-height {
615
567
  position: sticky;
616
- top: 0;
568
+ inset-block-start: 0;
617
569
  z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
618
570
  box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
619
571
  }
@@ -625,7 +577,7 @@
625
577
  .pf-v5-c-page__main-group.pf-m-sticky-bottom-on-lg-height,
626
578
  .pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-lg-height {
627
579
  position: sticky;
628
- bottom: 0;
580
+ inset-block-end: 0;
629
581
  z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
630
582
  box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
631
583
  }
@@ -639,7 +591,7 @@
639
591
  .pf-v5-c-page__main-group.pf-m-sticky-top-on-xl-height,
640
592
  .pf-v5-c-page__main-subnav.pf-m-sticky-top-on-xl-height {
641
593
  position: sticky;
642
- top: 0;
594
+ inset-block-start: 0;
643
595
  z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
644
596
  box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
645
597
  }
@@ -651,7 +603,7 @@
651
603
  .pf-v5-c-page__main-group.pf-m-sticky-bottom-on-xl-height,
652
604
  .pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height {
653
605
  position: sticky;
654
- bottom: 0;
606
+ inset-block-end: 0;
655
607
  z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
656
608
  box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
657
609
  }
@@ -665,7 +617,7 @@
665
617
  .pf-v5-c-page__main-group.pf-m-sticky-top-on-2xl-height,
666
618
  .pf-v5-c-page__main-subnav.pf-m-sticky-top-on-2xl-height {
667
619
  position: sticky;
668
- top: 0;
620
+ inset-block-start: 0;
669
621
  z-index: var(--pf-v5-c-page--section--m-sticky-top--ZIndex);
670
622
  box-shadow: var(--pf-v5-c-page--section--m-sticky-top--BoxShadow);
671
623
  }
@@ -677,12 +629,23 @@
677
629
  .pf-v5-c-page__main-group.pf-m-sticky-bottom-on-2xl-height,
678
630
  .pf-v5-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height {
679
631
  position: sticky;
680
- bottom: 0;
632
+ inset-block-end: 0;
681
633
  z-index: var(--pf-v5-c-page--section--m-sticky-bottom--ZIndex);
682
634
  box-shadow: var(--pf-v5-c-page--section--m-sticky-bottom--BoxShadow);
683
635
  }
684
636
  }
685
637
 
638
+ .pf-v5-c-page__main {
639
+ align-self: start;
640
+ max-height: var(--pf-v5-c-page__main--MaxHeight);
641
+ margin-block-start: 0;
642
+ margin-inline-start: var(--pf-v5-c-page__main--MarginInlineStart);
643
+ margin-inline-end: var(--pf-v5-c-page__main--MarginInlineEnd);
644
+ background: var(--pf-v5-c-page__main--BackgroundColor);
645
+ border: var(--pf-v5-c-page__main--BorderWidth) solid var(--pf-v5-c-page__main--BorderColor);
646
+ border-radius: var(--pf-v5-c-page__main--BorderRadius);
647
+ }
648
+
686
649
  .pf-v5-c-page__main,
687
650
  .pf-v5-c-page__drawer {
688
651
  z-index: var(--pf-v5-c-page__main--ZIndex);
@@ -698,50 +661,51 @@
698
661
 
699
662
  .pf-v5-c-page__main,
700
663
  .pf-v5-c-page__main-drawer,
701
- .pf-v5-c-page__main-group {
664
+ .pf-v5-c-page__main-group,
665
+ .pf-v5-c-page__main-list {
702
666
  display: flex;
703
667
  flex-direction: column;
704
668
  }
705
669
 
706
670
  .pf-v5-c-page__main-nav {
707
- padding-top: var(--pf-v5-c-page__main-nav--PaddingTop);
708
- padding-right: var(--pf-v5-c-page__main-nav--PaddingRight);
709
- padding-left: var(--pf-v5-c-page__main-nav--PaddingLeft);
671
+ padding-block-start: var(--pf-v5-c-page__main-nav--PaddingTop);
672
+ padding-inline-start: var(--pf-v5-c-page__main-nav--PaddingLeft);
673
+ padding-inline-end: var(--pf-v5-c-page__main-nav--PaddingRight);
710
674
  background-color: var(--pf-v5-c-page__main-nav--BackgroundColor);
711
675
  }
712
676
  .pf-v5-c-page__main-nav.pf-m-sticky-top, .pf-v5-c-page__main-group.pf-m-sticky-top .pf-v5-c-page__main-nav:last-child {
713
- padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
677
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
714
678
  }
715
679
  @media (min-height: 0) {
716
680
  .pf-v5-c-page__main-nav.pf-m-sticky-top-on-sm-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-v5-c-page__main-nav:last-child {
717
- padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
681
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
718
682
  }
719
683
  }
720
684
  @media (min-height: 40rem) {
721
685
  .pf-v5-c-page__main-nav.pf-m-sticky-top-on-md-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-md-height .pf-v5-c-page__main-nav:last-child {
722
- padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
686
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
723
687
  }
724
688
  }
725
689
  @media (min-height: 48rem) {
726
690
  .pf-v5-c-page__main-nav.pf-m-sticky-top-on-lg-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-v5-c-page__main-nav:last-child {
727
- padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
691
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
728
692
  }
729
693
  }
730
694
  @media (min-height: 60rem) {
731
695
  .pf-v5-c-page__main-nav.pf-m-sticky-top-on-xl-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-v5-c-page__main-nav:last-child {
732
- padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
696
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
733
697
  }
734
698
  }
735
699
  @media (min-height: 80rem) {
736
700
  .pf-v5-c-page__main-nav.pf-m-sticky-top-on-2xl-height, .pf-v5-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-v5-c-page__main-nav:last-child {
737
- padding-bottom: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
701
+ padding-block-end: var(--pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom);
738
702
  }
739
703
  }
740
704
 
741
705
  .pf-v5-c-page__main-subnav {
742
706
  background-color: var(--pf-v5-c-page__main-subnav--BackgroundColor);
743
- border-top: var(--pf-v5-c-page__main-subnav--BorderTopWidth) solid var(--pf-v5-c-page__main-subnav--BorderTopColor);
744
- border-left: var(--pf-v5-c-page__main-subnav--BorderLeftWidth) solid var(--pf-v5-c-page__main-subnav--BorderLeftColor);
707
+ border-block-start: var(--pf-v5-c-page__main-subnav--BorderTopWidth) solid var(--pf-v5-c-page__main-subnav--BorderTopColor);
708
+ border-inline-start: var(--pf-v5-c-page__main-subnav--BorderLeftWidth) solid var(--pf-v5-c-page__main-subnav--BorderLeftColor);
745
709
  }
746
710
  @media screen and (min-width: 1200px) {
747
711
  .pf-v5-c-page__sidebar ~ .pf-v5-c-page__main {
@@ -753,7 +717,10 @@
753
717
  }
754
718
 
755
719
  .pf-v5-c-page__main-breadcrumb {
756
- padding: var(--pf-v5-c-page__main-breadcrumb--PaddingTop) var(--pf-v5-c-page__main-breadcrumb--PaddingRight) var(--pf-v5-c-page__main-breadcrumb--PaddingBottom) var(--pf-v5-c-page__main-breadcrumb--PaddingLeft);
720
+ padding-block-start: var(--pf-v5-c-page__main-breadcrumb--PaddingTop);
721
+ padding-block-end: var(--pf-v5-c-page__main-breadcrumb--PaddingBottom);
722
+ padding-inline-start: var(--pf-v5-c-page__main-breadcrumb--PaddingLeft);
723
+ padding-inline-end: var(--pf-v5-c-page__main-breadcrumb--PaddingRight);
757
724
  background-color: var(--pf-v5-c-page__main-breadcrumb--BackgroundColor);
758
725
  }
759
726
  .pf-v5-c-page__main-breadcrumb + .pf-v5-c-page__main-section {
@@ -789,7 +756,10 @@
789
756
  }
790
757
 
791
758
  .pf-v5-c-page__main-tabs {
792
- padding: var(--pf-v5-c-page__main-tabs--PaddingTop) var(--pf-v5-c-page__main-tabs--PaddingRight) var(--pf-v5-c-page__main-tabs--PaddingBottom) var(--pf-v5-c-page__main-tabs--PaddingLeft);
759
+ padding-block-start: var(--pf-v5-c-page__main-tabs--PaddingTop);
760
+ padding-block-end: var(--pf-v5-c-page__main-tabs--PaddingBottom);
761
+ padding-inline-start: var(--pf-v5-c-page__main-tabs--PaddingLeft);
762
+ padding-inline-end: var(--pf-v5-c-page__main-tabs--PaddingRight);
793
763
  background-color: var(--pf-v5-c-page__main-tabs--BackgroundColor);
794
764
  }
795
765
  .pf-v5-c-page__main-nav + .pf-v5-c-page__main-tabs {
@@ -815,45 +785,48 @@
815
785
  }
816
786
 
817
787
  .pf-v5-c-page__main-section {
818
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
788
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
789
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
790
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
791
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
819
792
  background-color: var(--pf-v5-c-page__main-section--BackgroundColor);
820
793
  }
821
- .pf-v5-c-page__main-section.pf-m-light {
822
- --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-light--BackgroundColor);
823
- }
824
- .pf-v5-c-page__main-section.pf-m-light-100 {
825
- --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-light-100--BackgroundColor);
826
- }
827
- .pf-v5-c-page__main-section[class*=pf-m-dark-] {
828
- color: var(--pf-v5-global--Color--100);
829
- }
830
- .pf-v5-c-page__main-section.pf-m-dark-100 {
831
- --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-dark-100--BackgroundColor);
832
- }
833
- .pf-v5-c-page__main-section.pf-m-dark-200 {
834
- --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-dark-200--BackgroundColor);
794
+ .pf-v5-c-page__main-section.pf-m-secondary {
795
+ --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-secondary--BackgroundColor);
835
796
  }
836
797
  .pf-v5-c-page__main-section.pf-m-padding {
837
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
798
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
799
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
800
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
801
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
838
802
  }
839
803
  .pf-v5-c-page__main-section.pf-m-padding.pf-m-limit-width {
840
804
  padding: 0;
841
805
  }
842
806
  .pf-v5-c-page__main-section.pf-m-padding.pf-m-limit-width .pf-v5-c-page__main-body {
843
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
807
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
808
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
809
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
810
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
844
811
  }
845
812
  .pf-v5-c-page__main-section.pf-m-no-padding, .pf-v5-c-page__main-section.pf-m-no-padding.pf-m-limit-width .pf-v5-c-page__main-body {
846
813
  padding: 0;
847
814
  }
848
815
  @media (min-width: 576px) {
849
816
  .pf-v5-c-page__main-section.pf-m-padding-on-sm {
850
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
817
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
818
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
819
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
820
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
851
821
  }
852
822
  .pf-v5-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width {
853
823
  padding: 0;
854
824
  }
855
825
  .pf-v5-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width .pf-v5-c-page__main-body {
856
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
826
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
827
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
828
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
829
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
857
830
  }
858
831
  .pf-v5-c-page__main-section.pf-m-no-padding-on-sm, .pf-v5-c-page__main-section.pf-m-no-padding-on-sm.pf-m-limit-width .pf-v5-c-page__main-body {
859
832
  padding: 0;
@@ -861,13 +834,19 @@
861
834
  }
862
835
  @media (min-width: 768px) {
863
836
  .pf-v5-c-page__main-section.pf-m-padding-on-md {
864
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
837
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
838
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
839
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
840
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
865
841
  }
866
842
  .pf-v5-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width {
867
843
  padding: 0;
868
844
  }
869
845
  .pf-v5-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width .pf-v5-c-page__main-body {
870
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
846
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
847
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
848
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
849
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
871
850
  }
872
851
  .pf-v5-c-page__main-section.pf-m-no-padding-on-md, .pf-v5-c-page__main-section.pf-m-no-padding-on-md.pf-m-limit-width .pf-v5-c-page__main-body {
873
852
  padding: 0;
@@ -875,13 +854,19 @@
875
854
  }
876
855
  @media (min-width: 992px) {
877
856
  .pf-v5-c-page__main-section.pf-m-padding-on-lg {
878
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
857
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
858
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
859
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
860
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
879
861
  }
880
862
  .pf-v5-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width {
881
863
  padding: 0;
882
864
  }
883
865
  .pf-v5-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width .pf-v5-c-page__main-body {
884
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
866
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
867
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
868
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
869
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
885
870
  }
886
871
  .pf-v5-c-page__main-section.pf-m-no-padding-on-lg, .pf-v5-c-page__main-section.pf-m-no-padding-on-lg.pf-m-limit-width .pf-v5-c-page__main-body {
887
872
  padding: 0;
@@ -889,13 +874,19 @@
889
874
  }
890
875
  @media (min-width: 1200px) {
891
876
  .pf-v5-c-page__main-section.pf-m-padding-on-xl {
892
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
877
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
878
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
879
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
880
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
893
881
  }
894
882
  .pf-v5-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width {
895
883
  padding: 0;
896
884
  }
897
885
  .pf-v5-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width .pf-v5-c-page__main-body {
898
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
886
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
887
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
888
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
889
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
899
890
  }
900
891
  .pf-v5-c-page__main-section.pf-m-no-padding-on-xl, .pf-v5-c-page__main-section.pf-m-no-padding-on-xl.pf-m-limit-width .pf-v5-c-page__main-body {
901
892
  padding: 0;
@@ -903,13 +894,19 @@
903
894
  }
904
895
  @media (min-width: 1450px) {
905
896
  .pf-v5-c-page__main-section.pf-m-padding-on-2xl {
906
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
897
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
898
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
899
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
900
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
907
901
  }
908
902
  .pf-v5-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width {
909
903
  padding: 0;
910
904
  }
911
905
  .pf-v5-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width .pf-v5-c-page__main-body {
912
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
906
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
907
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
908
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
909
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
913
910
  }
914
911
  .pf-v5-c-page__main-section.pf-m-no-padding-on-2xl, .pf-v5-c-page__main-section.pf-m-no-padding-on-2xl.pf-m-limit-width .pf-v5-c-page__main-body {
915
912
  padding: 0;
@@ -920,14 +917,11 @@
920
917
  flex: 1 1;
921
918
  min-height: 0;
922
919
  background-color: var(--pf-v5-c-page__main-wizard--BackgroundColor);
923
- border-top: var(--pf-v5-c-page__main-wizard--BorderTopWidth) solid var(--pf-v5-c-page__main-wizard--BorderTopColor);
920
+ border-block-start: var(--pf-v5-c-page__main-wizard--BorderTopWidth) solid var(--pf-v5-c-page__main-wizard--BorderTopColor);
924
921
  }
925
922
  .pf-v5-c-page__main-wizard:first-child {
926
923
  --pf-v5-c-page__main-wizard--BorderTopWidth: 0;
927
924
  }
928
- .pf-v5-c-page__main-wizard.pf-m-light-200 {
929
- --pf-v5-c-page__main-wizard--BackgroundColor: var(--pf-v5-c-page__main-wizard--m-light-200--BackgroundColor);
930
- }
931
925
 
932
926
  .pf-v5-c-page__main-wizard .pf-v5-c-page__main-body {
933
927
  min-height: 0;
@@ -938,18 +932,27 @@
938
932
  }
939
933
 
940
934
  .pf-v5-c-page__main-nav .pf-v5-c-page__main-body {
941
- padding-top: var(--pf-v5-c-page__main-nav--PaddingTop);
942
- padding-right: var(--pf-v5-c-page__main-nav--PaddingRight);
943
- padding-left: var(--pf-v5-c-page__main-nav--PaddingLeft);
935
+ padding-block-start: var(--pf-v5-c-page__main-nav--PaddingTop);
936
+ padding-inline-start: var(--pf-v5-c-page__main-nav--PaddingLeft);
937
+ padding-inline-end: var(--pf-v5-c-page__main-nav--PaddingRight);
944
938
  }
945
939
  .pf-v5-c-page__main-breadcrumb .pf-v5-c-page__main-body {
946
- padding: var(--pf-v5-c-page__main-breadcrumb--PaddingTop) var(--pf-v5-c-page__main-breadcrumb--PaddingRight) var(--pf-v5-c-page__main-breadcrumb--PaddingBottom) var(--pf-v5-c-page__main-breadcrumb--PaddingLeft);
940
+ padding-block-start: var(--pf-v5-c-page__main-breadcrumb--PaddingTop);
941
+ padding-block-end: var(--pf-v5-c-page__main-breadcrumb--PaddingBottom);
942
+ padding-inline-start: var(--pf-v5-c-page__main-breadcrumb--PaddingLeft);
943
+ padding-inline-end: var(--pf-v5-c-page__main-breadcrumb--PaddingRight);
947
944
  }
948
945
  .pf-v5-c-page__main-section .pf-v5-c-page__main-body {
949
- padding: var(--pf-v5-c-page__main-section--PaddingTop) var(--pf-v5-c-page__main-section--PaddingRight) var(--pf-v5-c-page__main-section--PaddingBottom) var(--pf-v5-c-page__main-section--PaddingLeft);
946
+ padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
947
+ padding-block-end: var(--pf-v5-c-page__main-section--PaddingBottom);
948
+ padding-inline-start: var(--pf-v5-c-page__main-section--PaddingLeft);
949
+ padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
950
950
  }
951
951
  .pf-v5-c-page__main-tabs .pf-v5-c-page__main-body {
952
- padding: var(--pf-v5-c-page__main-tabs--PaddingTop) var(--pf-v5-c-page__main-tabs--PaddingRight) var(--pf-v5-c-page__main-tabs--PaddingBottom) var(--pf-v5-c-page__main-tabs--PaddingLeft);
952
+ padding-block-start: var(--pf-v5-c-page__main-tabs--PaddingTop);
953
+ padding-block-end: var(--pf-v5-c-page__main-tabs--PaddingBottom);
954
+ padding-inline-start: var(--pf-v5-c-page__main-tabs--PaddingLeft);
955
+ padding-inline-end: var(--pf-v5-c-page__main-tabs--PaddingRight);
953
956
  }
954
957
 
955
958
  .pf-v5-c-page__drawer {
@@ -957,46 +960,4 @@
957
960
  }
958
961
  .pf-v5-c-page__drawer > .pf-v5-c-drawer {
959
962
  flex: 1 0 auto;
960
- }
961
-
962
- :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button,
963
- :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button,
964
- :where(.pf-v5-theme-dark) .pf-v5-c-page__header .pf-v5-c-button {
965
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
966
- }
967
-
968
- :where(.pf-v5-theme-dark):root {
969
- --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
970
- --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
971
- --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
972
- --pf-v5-c-page__header--BackgroundColor: var(--pf-v5-global--palette--black-1000);
973
- }
974
- :where(.pf-v5-theme-dark) .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button {
975
- color: var(--pf-v5-global--Color--100);
976
- }
977
- :where(.pf-v5-theme-dark) .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge:hover::before {
978
- background-color: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
979
- }
980
- :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar {
981
- border-right: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
982
- }
983
- :where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-bottom {
984
- --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
985
- }
986
- :where(.pf-v5-theme-dark) .pf-v5-c-page__main-breadcrumb.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-breadcrumb.pf-m-sticky-bottom {
987
- --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
988
- }
989
- :where(.pf-v5-theme-dark) .pf-v5-c-page__main-group.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-group.pf-m-sticky-bottom {
990
- --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
991
- --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
992
- --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
993
- --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
994
- }
995
- :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section.pf-m-sticky-bottom {
996
- --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
997
- }
998
- :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
999
- :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
1000
- :where(.pf-v5-theme-dark) .pf-v5-c-page__header {
1001
- color: var(--pf-v5-global--Color--100);
1002
963
  }