@patternfly/patternfly 6.0.0-alpha.1 → 6.0.0-alpha.11

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