@patternfly/patternfly 6.0.0-alpha.3 → 6.0.0-alpha.30

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 (320) hide show
  1. package/README.md +13 -3
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/images/PF-Backdrop.svg +1 -0
  4. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  5. package/assets/images/PF-IconLogo.svg +17 -0
  6. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  7. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  8. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  9. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  10. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  11. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  12. package/assets/images/pf_logo_white.hbs +35 -0
  13. package/assets/images/pf_logo_white.svg +38 -0
  14. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  15. package/assets/pficon/pficon.scss +6 -129
  16. package/base/_common.scss +29 -4
  17. package/base/_globals.scss +5 -9
  18. package/base/_variables.scss +8 -6
  19. package/base/patternfly-common.css +24 -6
  20. package/base/patternfly-globals.css +5 -5
  21. package/base/patternfly-icons.css +5 -1
  22. package/base/patternfly-pf-icons.css +5 -1
  23. package/base/patternfly-variables.css +886 -771
  24. package/base/tokens/_tokens-dark.scss +322 -265
  25. package/base/tokens/_tokens-default.scss +426 -306
  26. package/base/tokens/_tokens-font.scss +59 -35
  27. package/base/tokens/_tokens-palette.scss +69 -71
  28. package/base/tokens/_workspace-overrides.scss +7 -0
  29. package/components/AboutModalBox/about-modal-box.css +80 -108
  30. package/components/AboutModalBox/about-modal-box.scss +64 -78
  31. package/components/Accordion/accordion.css +96 -175
  32. package/components/Accordion/accordion.scss +106 -193
  33. package/components/ActionList/action-list.css +2 -2
  34. package/components/ActionList/action-list.scss +2 -2
  35. package/components/Alert/alert-group.css +27 -20
  36. package/components/Alert/alert-group.scss +27 -20
  37. package/components/Alert/alert.css +74 -95
  38. package/components/Alert/alert.scss +76 -89
  39. package/components/AppLauncher/app-launcher.css +32 -23
  40. package/components/AppLauncher/app-launcher.scss +32 -23
  41. package/components/BackToTop/back-to-top.css +17 -15
  42. package/components/BackToTop/back-to-top.scss +14 -13
  43. package/components/Backdrop/backdrop.css +2 -2
  44. package/components/Backdrop/backdrop.scss +2 -2
  45. package/components/BackgroundImage/background-image.css +6 -3
  46. package/components/BackgroundImage/background-image.scss +8 -3
  47. package/components/Badge/badge.css +25 -17
  48. package/components/Badge/badge.scss +27 -19
  49. package/components/Banner/banner.css +91 -69
  50. package/components/Banner/banner.scss +95 -34
  51. package/components/Breadcrumb/breadcrumb.css +28 -19
  52. package/components/Breadcrumb/breadcrumb.scss +26 -19
  53. package/components/Button/button.css +35 -23
  54. package/components/Button/button.scss +36 -26
  55. package/components/Button/themes/dark/button.scss +1 -1
  56. package/components/CalendarMonth/calendar-month.css +25 -15
  57. package/components/CalendarMonth/calendar-month.scss +23 -15
  58. package/components/Card/card.css +25 -17
  59. package/components/Card/card.scss +24 -17
  60. package/components/Check/check.css +12 -10
  61. package/components/Check/check.scss +17 -12
  62. package/components/Chip/chip-group.css +6 -6
  63. package/components/Chip/chip-group.scss +6 -6
  64. package/components/Chip/chip.css +16 -9
  65. package/components/Chip/chip.scss +17 -9
  66. package/components/ClipboardCopy/clipboard-copy.css +19 -10
  67. package/components/ClipboardCopy/clipboard-copy.scss +16 -8
  68. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
  69. package/components/CodeBlock/code-block.css +6 -3
  70. package/components/CodeBlock/code-block.scss +6 -3
  71. package/components/CodeEditor/code-editor.css +31 -22
  72. package/components/CodeEditor/code-editor.scss +30 -21
  73. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  74. package/components/Content/content.css +100 -97
  75. package/components/Content/content.scss +101 -98
  76. package/components/ContextSelector/context-selector.css +41 -26
  77. package/components/ContextSelector/context-selector.scss +40 -25
  78. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  79. package/components/DataList/data-list-grid.css +21 -21
  80. package/components/DataList/data-list-grid.scss +3 -3
  81. package/components/DataList/data-list.css +69 -56
  82. package/components/DataList/data-list.scss +47 -35
  83. package/components/DatePicker/date-picker.css +8 -8
  84. package/components/DatePicker/date-picker.scss +8 -8
  85. package/components/DescriptionList/description-list.css +8 -5
  86. package/components/DescriptionList/description-list.scss +8 -5
  87. package/components/DragDrop/drag-drop.css +8 -8
  88. package/components/DragDrop/drag-drop.scss +8 -8
  89. package/components/Drawer/drawer.css +120 -62
  90. package/components/Drawer/drawer.scss +94 -44
  91. package/components/Dropdown/dropdown.css +76 -69
  92. package/components/Dropdown/dropdown.scss +67 -62
  93. package/components/DualListSelector/dual-list-selector.css +29 -15
  94. package/components/DualListSelector/dual-list-selector.scss +30 -15
  95. package/components/EmptyState/empty-state.css +7 -4
  96. package/components/EmptyState/empty-state.scss +7 -4
  97. package/components/ExpandableSection/expandable-section.css +75 -59
  98. package/components/ExpandableSection/expandable-section.scss +81 -72
  99. package/components/FileUpload/file-upload.css +9 -15
  100. package/components/FileUpload/file-upload.scss +9 -15
  101. package/components/Form/form.css +53 -50
  102. package/components/Form/form.scss +46 -44
  103. package/components/FormControl/form-control.css +18 -9
  104. package/components/FormControl/form-control.scss +18 -9
  105. package/components/HelperText/helper-text.css +1 -1
  106. package/components/HelperText/helper-text.scss +1 -1
  107. package/components/Hint/hint.css +37 -27
  108. package/components/Hint/hint.scss +37 -30
  109. package/components/Icon/icon.css +1 -1
  110. package/components/Icon/icon.scss +1 -1
  111. package/components/InlineEdit/inline-edit.css +9 -9
  112. package/components/InlineEdit/inline-edit.scss +9 -9
  113. package/components/InputGroup/input-group.css +12 -6
  114. package/components/InputGroup/input-group.scss +11 -5
  115. package/components/InputGroup/themes/dark/input-group.scss +1 -1
  116. package/components/JumpLinks/jump-links.css +27 -24
  117. package/components/JumpLinks/jump-links.scss +26 -24
  118. package/components/Label/label-group.css +13 -10
  119. package/components/Label/label-group.scss +13 -10
  120. package/components/Label/label.css +9 -9
  121. package/components/Label/label.scss +9 -9
  122. package/components/List/list.css +25 -25
  123. package/components/List/list.scss +26 -26
  124. package/components/LogViewer/log-viewer.css +14 -14
  125. package/components/LogViewer/log-viewer.scss +14 -14
  126. package/components/Login/login.css +104 -122
  127. package/components/Login/login.scss +92 -91
  128. package/components/Masthead/masthead.css +68 -125
  129. package/components/Masthead/masthead.scss +123 -153
  130. package/components/Menu/menu.css +82 -65
  131. package/components/Menu/menu.scss +85 -69
  132. package/components/MenuToggle/menu-toggle.css +89 -100
  133. package/components/MenuToggle/menu-toggle.scss +92 -112
  134. package/components/ModalBox/modal-box.css +76 -69
  135. package/components/ModalBox/modal-box.scss +74 -70
  136. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  137. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  138. package/components/Nav/nav.css +162 -133
  139. package/components/Nav/nav.scss +162 -135
  140. package/components/Nav/themes/dark/nav.scss +2 -2
  141. package/components/NotificationBadge/notification-badge.css +66 -85
  142. package/components/NotificationBadge/notification-badge.scss +72 -103
  143. package/components/NotificationDrawer/notification-drawer.css +32 -19
  144. package/components/NotificationDrawer/notification-drawer.scss +30 -19
  145. package/components/NumberInput/number-input.css +2 -2
  146. package/components/NumberInput/number-input.scss +2 -2
  147. package/components/OptionsMenu/options-menu.css +43 -31
  148. package/components/OptionsMenu/options-menu.scss +43 -31
  149. package/components/OverflowMenu/overflow-menu.css +2 -2
  150. package/components/OverflowMenu/overflow-menu.scss +2 -2
  151. package/components/Page/page.css +232 -271
  152. package/components/Page/page.scss +180 -231
  153. package/components/Pagination/pagination.css +27 -17
  154. package/components/Pagination/pagination.scss +25 -17
  155. package/components/Panel/panel.css +13 -7
  156. package/components/Panel/panel.scss +13 -7
  157. package/components/Popover/popover.css +110 -87
  158. package/components/Popover/popover.scss +120 -109
  159. package/components/Progress/progress.css +9 -7
  160. package/components/Progress/progress.scss +12 -7
  161. package/components/ProgressStepper/progress-stepper.css +26 -20
  162. package/components/ProgressStepper/progress-stepper.scss +25 -19
  163. package/components/Radio/radio.css +16 -13
  164. package/components/Radio/radio.scss +20 -14
  165. package/components/Select/select.css +56 -47
  166. package/components/Select/select.scss +56 -47
  167. package/components/Sidebar/sidebar.css +11 -5
  168. package/components/Sidebar/sidebar.scss +11 -5
  169. package/components/SimpleList/simple-list.css +10 -4
  170. package/components/SimpleList/simple-list.scss +10 -4
  171. package/components/Skeleton/skeleton.css +6 -5
  172. package/components/Skeleton/skeleton.scss +4 -5
  173. package/components/SkipToContent/skip-to-content.css +9 -6
  174. package/components/SkipToContent/skip-to-content.scss +8 -6
  175. package/components/Slider/slider.css +47 -26
  176. package/components/Slider/slider.scss +56 -28
  177. package/components/Switch/switch.css +10 -6
  178. package/components/Switch/switch.scss +11 -7
  179. package/components/TabContent/tab-content.css +4 -1
  180. package/components/TabContent/tab-content.scss +4 -1
  181. package/components/Table/table-grid.css +264 -203
  182. package/components/Table/table-grid.scss +61 -47
  183. package/components/Table/table-scrollable.css +4 -4
  184. package/components/Table/table-scrollable.scss +6 -4
  185. package/components/Table/table-tree-view.css +112 -105
  186. package/components/Table/table-tree-view.scss +38 -33
  187. package/components/Table/table.css +176 -159
  188. package/components/Table/table.scss +177 -165
  189. package/components/Tabs/tabs.css +76 -48
  190. package/components/Tabs/tabs.scss +74 -48
  191. package/components/TextInputGroup/text-input-group.css +15 -15
  192. package/components/TextInputGroup/text-input-group.scss +15 -15
  193. package/components/Tile/tile.css +10 -10
  194. package/components/Tile/tile.scss +10 -10
  195. package/components/Title/title.css +70 -19
  196. package/components/Title/title.scss +90 -20
  197. package/components/ToggleGroup/toggle-group.css +14 -11
  198. package/components/ToggleGroup/toggle-group.scss +14 -11
  199. package/components/Toolbar/toolbar.css +57 -44
  200. package/components/Toolbar/toolbar.scss +45 -26
  201. package/components/Tooltip/tooltip.css +76 -44
  202. package/components/Tooltip/tooltip.scss +93 -77
  203. package/components/TreeView/tree-view.css +48 -27
  204. package/components/TreeView/tree-view.scss +50 -28
  205. package/components/Truncate/truncate.css +9 -0
  206. package/components/Truncate/truncate.scss +16 -3
  207. package/components/Wizard/wizard.css +57 -36
  208. package/components/Wizard/wizard.scss +57 -36
  209. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  210. package/docs/components/Accordion/examples/Accordion.md +614 -416
  211. package/docs/components/Alert/examples/Alert.md +1 -1
  212. package/docs/components/Badge/examples/Badge.md +21 -0
  213. package/docs/components/Banner/examples/Banner.md +48 -25
  214. package/docs/components/Brand/examples/Brand.css +12 -0
  215. package/docs/components/Brand/examples/Brand.md +75 -32
  216. package/docs/components/Button/examples/Button.css +2 -2
  217. package/docs/components/Button/examples/Button.md +15 -3
  218. package/docs/components/Card/examples/Card.md +125 -17
  219. package/docs/components/Check/examples/Check.md +71 -59
  220. package/docs/components/Chip/examples/Chip.md +1 -1
  221. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  222. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  223. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  224. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  225. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  226. package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -24
  227. package/docs/components/Label/examples/Label.md +1 -1
  228. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  229. package/docs/components/LogViewer/examples/LogViewer.md +250 -160
  230. package/docs/components/Login/examples/Login.md +5 -0
  231. package/docs/components/Masthead/examples/masthead.md +7 -54
  232. package/docs/components/Menu/examples/Menu.css +8 -0
  233. package/docs/components/Menu/examples/Menu.md +594 -543
  234. package/docs/components/MenuToggle/examples/MenuToggle.md +151 -138
  235. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  236. package/docs/components/Nav/examples/Navigation.css +3 -25
  237. package/docs/components/Nav/examples/Navigation.md +239 -113
  238. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  239. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  240. package/docs/components/Page/examples/Page.css +0 -8
  241. package/docs/components/Page/examples/Page.md +22 -21
  242. package/docs/components/Popover/examples/Popover.css +4 -9
  243. package/docs/components/Popover/examples/Popover.md +1 -1
  244. package/docs/components/Radio/examples/Radio.md +63 -55
  245. package/docs/components/Select/deprecated/Select.md +184 -177
  246. package/docs/components/Table/examples/Table.css +2 -2
  247. package/docs/components/Table/examples/Table.md +2 -2
  248. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  249. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  250. package/docs/components/Tile/examples/Tile.css +1 -1
  251. package/docs/components/Title/examples/Title.md +18 -0
  252. package/docs/components/Toolbar/examples/Toolbar.md +570 -2803
  253. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  254. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  255. package/docs/components/Truncate/examples/Truncate.md +2 -2
  256. package/docs/demos/AboutModal/examples/AboutModal.md +85 -10
  257. package/docs/demos/Alert/examples/Alert.md +249 -24
  258. package/docs/demos/BackToTop/examples/BackToTop.md +83 -8
  259. package/docs/demos/Banner/examples/Banner.md +168 -16
  260. package/docs/demos/Card/examples/Card.css +3 -3
  261. package/docs/demos/Card/examples/Card.md +28 -12
  262. package/docs/demos/CardView/examples/CardView.md +139 -79
  263. package/docs/demos/ContextSelector/examples/ContextSelector.md +332 -32
  264. package/docs/demos/Dashboard/examples/Dashboard.md +86 -11
  265. package/docs/demos/DataList/examples/DataList.md +524 -354
  266. package/docs/demos/DescriptionList/examples/DescriptionList.md +249 -24
  267. package/docs/demos/Drawer/examples/Drawer.md +415 -40
  268. package/docs/demos/JumpLinks/examples/JumpLinks.md +498 -48
  269. package/docs/demos/Masthead/examples/Masthead.md +793 -277
  270. package/docs/demos/Modal/examples/Modal.md +498 -48
  271. package/docs/demos/Nav/examples/Nav.md +664 -64
  272. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +420 -40
  273. package/docs/demos/Page/examples/Page.md +747 -72
  274. package/docs/demos/Page/examples/Penta.md +746 -0
  275. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +2 -1
  276. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +824 -451
  277. package/docs/demos/Skeleton/examples/Skeleton.md +90 -43
  278. package/docs/demos/Table/examples/Table.md +2313 -1887
  279. package/docs/demos/Tabs/examples/Tabs.md +528 -71
  280. package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
  281. package/docs/demos/Toolbar/examples/Toolbar.md +870 -1044
  282. package/docs/demos/Wizard/examples/Wizard.md +747 -72
  283. package/docs/layouts/Flex/examples/Flex.md +5 -5
  284. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  285. package/icons/pficons.mjs +1 -0
  286. package/layouts/Flex/flex.css +115 -43
  287. package/layouts/Flex/flex.scss +20 -8
  288. package/package.json +9 -5
  289. package/patternfly-addons.css +732 -972
  290. package/patternfly-base-no-globals-theme-dark-unversioned.css +921 -784
  291. package/patternfly-base-no-globals.css +921 -784
  292. package/patternfly-base-theme-dark-unversioned.css +926 -789
  293. package/patternfly-base.css +926 -789
  294. package/patternfly-no-globals.css +4816 -4221
  295. package/patternfly-theme-dark-unversioned.css +4821 -4226
  296. package/patternfly.css +4821 -4226
  297. package/patternfly.min.css +1 -1
  298. package/patternfly.min.css.map +1 -1
  299. package/sass-utilities/functions.scss +6 -0
  300. package/sass-utilities/mixins.scss +62 -2
  301. package/sass-utilities/scss-variables.scss +8 -8
  302. package/sass-utilities/themes/dark/mixins.scss +3 -1
  303. package/utilities/Accessibility/accessibility.css +12 -12
  304. package/utilities/Spacing/spacing.css +720 -960
  305. package/utilities/Spacing/spacing.scss +4 -8
  306. package/base/themes/dark/_variables.scss +0 -102
  307. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  308. package/components/Accordion/themes/dark/accordion.scss +0 -9
  309. package/components/Alert/themes/dark/alert.scss +0 -17
  310. package/components/Badge/themes/dark/badge.scss +0 -9
  311. package/components/Banner/themes/dark/banner.scss +0 -14
  312. package/components/Hint/themes/dark/hint.scss +0 -8
  313. package/components/Login/themes/dark/login.scss +0 -12
  314. package/components/Masthead/themes/dark/masthead.scss +0 -14
  315. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  316. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  317. package/components/Page/themes/dark/page.scss +0 -69
  318. package/components/Popover/themes/dark/popover.scss +0 -11
  319. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  320. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/components/Masthead/masthead.css CHANGED
@@ -1,51 +1,24 @@
1
- .pf-v5-c-masthead.pf-m-light-200, .pf-v5-c-masthead.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-masthead .pf-v5-c-button.pf-m-plain, .pf-v5-c-masthead {
14
- --pf-v5-global--Color--100: var(--pf-v5-global--Color--light-100);
15
- --pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200);
16
- --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--light-100);
17
- --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--light-100);
18
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
19
- --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
20
- --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
21
- --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
22
- --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
23
- }
24
- .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain .pf-v5-c-button, .pf-v5-c-masthead .pf-v5-c-button {
25
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
26
- }
27
-
28
- .pf-v5-c-masthead {
1
+ :root {
29
2
  --pf-v5-c-masthead--PaddingLeft: var(--pf-v5-c-masthead--inset);
30
3
  --pf-v5-c-masthead--PaddingRight: var(--pf-v5-c-masthead--inset);
31
- --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
32
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--md);
33
- --pf-v5-c-masthead--xl--inset: var(--pf-v5-global--spacer--lg);
4
+ --pf-v5-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
5
+ --pf-v5-c-masthead--inset: var(--pf-t--global--spacer--md);
6
+ --pf-v5-c-masthead--xl--inset: var(--pf-t--global--spacer--lg);
34
7
  --pf-v5-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr;
35
8
  --pf-v5-c-masthead--m-display-stack__main--GridColumn: -1 / 1;
36
9
  --pf-v5-c-masthead--m-display-stack__main--MinHeight: 4.375rem;
37
10
  --pf-v5-c-masthead--m-display-stack__main--Order: -1;
38
11
  --pf-v5-c-masthead--m-display-stack__main--FlexBasis: 100%;
39
- --pf-v5-c-masthead--m-display-stack__main--PaddingTop: var(--pf-v5-global--spacer--sm);
40
- --pf-v5-c-masthead--m-display-stack__main--PaddingBottom: var(--pf-v5-global--spacer--sm);
12
+ --pf-v5-c-masthead--m-display-stack__main--PaddingTop: var(--pf-t--global--spacer--lg);
13
+ --pf-v5-c-masthead--m-display-stack__main--PaddingBottom: var(--pf-t--global--spacer--md);
41
14
  --pf-v5-c-masthead--m-display-stack__main--MarginRight: 0;
42
15
  --pf-v5-c-masthead--m-display-stack__main--before--BorderBottom: var(--pf-v5-c-masthead__main--before--BorderBottomWidth) solid var(--pf-v5-c-masthead__main--before--BorderBottomColor);
43
16
  --pf-v5-c-masthead--m-display-stack__toggle--GridColumn: 1;
44
17
  --pf-v5-c-masthead--m-display-stack__content--GridColumn: 2;
45
18
  --pf-v5-c-masthead--m-display-stack__content--MinHeight: auto;
46
19
  --pf-v5-c-masthead--m-display-stack__content--Order: 1;
47
- --pf-v5-c-masthead--m-display-stack__content--PaddingTop: 0;
48
- --pf-v5-c-masthead--m-display-stack__content--PaddingBottom: 0;
20
+ --pf-v5-c-masthead--m-display-stack__content--PaddingTop: var(--pf-t--global--spacer--xs);
21
+ --pf-v5-c-masthead--m-display-stack__content--PaddingBottom: var(--pf-t--global--spacer--xs);
49
22
  --pf-v5-c-masthead--m-display-stack__content--MarginLeft: 0;
50
23
  --pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight: calc(var(--pf-v5-c-masthead--inset) * -1);
51
24
  --pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-v5-c-masthead--inset) * -1);
@@ -56,7 +29,7 @@
56
29
  --pf-v5-c-masthead--m-display-inline__main--FlexBasis: auto;
57
30
  --pf-v5-c-masthead--m-display-inline__main--PaddingTop: 0;
58
31
  --pf-v5-c-masthead--m-display-inline__main--PaddingBottom: 0;
59
- --pf-v5-c-masthead--m-display-inline__main--MarginRight: calc(var(--pf-v5-global--spacer--lg) / 2);
32
+ --pf-v5-c-masthead--m-display-inline__main--MarginRight: calc(var(--pf-t--global--spacer--lg) / 2);
60
33
  --pf-v5-c-masthead--m-display-inline__main--BorderBottom: 0;
61
34
  --pf-v5-c-masthead--m-display-inline__toggle--GridColumn: 1;
62
35
  --pf-v5-c-masthead--m-display-inline__content--GridColumn: 3;
@@ -64,22 +37,19 @@
64
37
  --pf-v5-c-masthead--m-display-inline__content--Order: 0;
65
38
  --pf-v5-c-masthead--m-display-inline__content--PaddingTop: 0;
66
39
  --pf-v5-c-masthead--m-display-inline__content--PaddingBottom: 0;
67
- --pf-v5-c-masthead--m-display-inline__content--MarginLeft: calc(var(--pf-v5-global--spacer--lg) / 2);
40
+ --pf-v5-c-masthead--m-display-inline__content--MarginLeft: calc(var(--pf-t--global--spacer--lg) / 2);
68
41
  --pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight: 0;
69
42
  --pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft: 0;
70
43
  --pf-v5-c-masthead__main--before--Right: calc(var(--pf-v5-c-masthead--inset) * -1);
71
44
  --pf-v5-c-masthead__main--before--Left: calc(var(--pf-v5-c-masthead--inset) * -1);
72
- --pf-v5-c-masthead__main--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
73
- --pf-v5-c-masthead__main--before--BorderBottomColor: var(--pf-v5-global--palette--black-600);
74
- --pf-v5-c-masthead__toggle--MarginRight: var(--pf-v5-global--spacer--sm);
75
- --pf-v5-c-masthead__toggle--MarginLeft: calc(var(--pf-v5-global--spacer--md) * -1);
76
- --pf-v5-c-masthead__toggle--c-button--FontSize: var(--pf-v5-global--FontSize--2xl);
77
- --pf-v5-c-masthead--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
78
- --pf-v5-c-masthead--m-light__main--BorderBottomColor: var(--pf-v5-global--BorderColor--300);
79
- --pf-v5-c-masthead--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
80
- --pf-v5-c-masthead--m-light-200__main--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
45
+ --pf-v5-c-masthead__main--before--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
46
+ --pf-v5-c-masthead__main--before--BorderBottomColor: var(--pf-t--global--border--color--default);
47
+ --pf-v5-c-masthead__content--Gap: var(--pf-t--global--spacer--sm);
48
+ --pf-v5-c-masthead__toggle--MarginRight: var(--pf-t--global--spacer--sm);
49
+ --pf-v5-c-masthead__toggle--MarginLeft: calc(var(--pf-t--global--spacer--sm) * -1);
50
+ --pf-v5-c-masthead__toggle--c-button--FontSize: var(--pf-t--global--icon--size--lg);
81
51
  --pf-v5-c-masthead--c-toolbar__item--Display: flex;
82
- --pf-v5-c-masthead--item-border-color--base: var(--pf-v5-global--palette--black-800);
52
+ --pf-v5-c-masthead--item-border-color--base: var(--pf-t--global--border--color--default);
83
53
  --pf-v5-c-masthead--c-context-selector--Width: auto;
84
54
  --pf-v5-c-masthead--c-context-selector__toggle--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
85
55
  --pf-v5-c-masthead--c-context-selector__toggle--BorderRightColor: var(--pf-v5-c-masthead--item-border-color--base);
@@ -98,12 +68,34 @@
98
68
  --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
99
69
  --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
100
70
  --pf-v5-c-masthead--c-toolbar__content--PaddingLeft: 0;
101
- --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-v5-global--spacer--md);
71
+ --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-t--global--spacer--md);
102
72
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--inset);
103
- --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
73
+ --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-t--global--spacer--md);
104
74
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--inset);
105
- --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
75
+ --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
106
76
  --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
77
+ }
78
+
79
+ .pf-v5-c-masthead {
80
+ --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--c-toolbar--BackgroundColor);
81
+ --pf-v5-c-toolbar--AlignItems--base: var(--pf-v5-c-masthead--c-toolbar--AlignItems--base);
82
+ --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__content--PaddingRight);
83
+ --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__content--PaddingLeft);
84
+ --pf-v5-c-toolbar__expandable-content--PaddingTop: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop);
85
+ --pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight);
86
+ --pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom);
87
+ --pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft);
88
+ --pf-v5-c-context-selector--Width: var(--pf-v5-c-masthead--c-context-selector--Width);
89
+ --pf-v5-c-context-selector__toggle--BorderTopColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderTopColor);
90
+ --pf-v5-c-context-selector__toggle--BorderRightColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderRightColor);
91
+ --pf-v5-c-context-selector__toggle--BorderLeftColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderLeftColor);
92
+ --pf-v5-c-dropdown__toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderTopColor);
93
+ --pf-v5-c-dropdown__toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderRightColor);
94
+ --pf-v5-c-dropdown__toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
95
+ --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
96
+ --pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor);
97
+ --pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor);
98
+ --pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: 0;
107
99
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
108
100
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
109
101
  --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
@@ -121,18 +113,17 @@
121
113
  --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--MarginLeft);
122
114
  --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
123
115
  --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
124
- color: var(--pf-v5-global--Color--100);
125
116
  position: relative;
126
117
  display: grid;
127
118
  grid-template-columns: var(--pf-v5-c-masthead--GridTemplateColumns);
128
119
  align-items: center;
129
120
  min-width: 0;
130
- padding-right: var(--pf-v5-c-masthead--PaddingRight);
131
- padding-left: var(--pf-v5-c-masthead--PaddingLeft);
121
+ padding-inline-start: var(--pf-v5-c-masthead--PaddingLeft);
122
+ padding-inline-end: var(--pf-v5-c-masthead--PaddingRight);
132
123
  background-color: var(--pf-v5-c-masthead--BackgroundColor);
133
124
  }
134
125
  @media screen and (min-width: 768px) {
135
- .pf-v5-c-page:where(:not(.pf-m-resize-observer)) .pf-v5-c-masthead {
126
+ :where(:not(.pf-m-resize-observer)) .pf-v5-c-masthead {
136
127
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-inline--GridTemplateColumns);
137
128
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-inline__main--GridColumn);
138
129
  --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-inline__main--MinHeight);
@@ -157,64 +148,26 @@
157
148
  --pf-v5-c-masthead--inset: var(--pf-v5-c-masthead--xl--inset);
158
149
  }
159
150
  }
160
- .pf-v5-c-masthead.pf-m-light {
161
- color: var(--pf-v5-global--Color--100);
162
- --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-c-masthead--m-light--BackgroundColor);
163
- --pf-v5-c-masthead__main--BorderBottomColor: var(--pf-v5-c-masthead--m-light__main--BorderBottomColor);
164
- }
165
- .pf-v5-c-masthead.pf-m-light-200 {
166
- color: var(--pf-v5-global--Color--100);
167
- --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-c-masthead--m-light-200--BackgroundColor);
168
- --pf-v5-c-masthead__main--BorderBottomColor: var(--pf-v5-c-masthead--m-light-200__main--BorderBottomColor);
169
- }
170
151
  .pf-v5-c-masthead .pf-v5-c-toolbar {
171
- --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--c-toolbar--BackgroundColor);
172
- --pf-v5-c-toolbar--AlignItems--base: var(--pf-v5-c-masthead--c-toolbar--AlignItems--base);
173
- --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__content--PaddingRight);
174
- --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__content--PaddingLeft);
175
- --pf-v5-c-toolbar__expandable-content--PaddingTop: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop);
176
- --pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight);
177
- --pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom);
178
- --pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft);
179
152
  width: 100%;
180
153
  }
181
154
  .pf-v5-c-masthead .pf-v5-c-toolbar__content-section {
182
155
  flex-wrap: nowrap;
183
156
  }
184
157
  .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content {
185
- top: 100%;
158
+ inset-block-start: 100%;
186
159
  }
187
160
  .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content::before {
188
161
  position: absolute;
189
- top: 0;
190
- right: 0;
191
- bottom: 0;
192
- left: 0;
162
+ inset: 0;
193
163
  content: "";
194
- border-top: var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor);
164
+ border-block-start: var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor);
195
165
  box-shadow: var(--pf-v5-c-toolbar__expandable-content--before--BoxShadow);
196
166
  }
197
- .pf-v5-c-masthead .pf-v5-c-menu-toggle {
198
- --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
199
- --pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor);
200
- --pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor);
201
- --pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: 0;
202
- }
203
- .pf-v5-c-masthead .pf-v5-c-context-selector {
204
- --pf-v5-c-context-selector--Width: var(--pf-v5-c-masthead--c-context-selector--Width);
205
- --pf-v5-c-context-selector__toggle--BorderTopColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderTopColor);
206
- --pf-v5-c-context-selector__toggle--BorderRightColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderRightColor);
207
- --pf-v5-c-context-selector__toggle--BorderLeftColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderLeftColor);
208
- }
209
167
  .pf-v5-c-masthead .pf-v5-c-context-selector.pf-m-full-height {
210
168
  --pf-v5-c-context-selector__toggle--BorderTopColor: var(--pf-v5-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor);
211
169
  --pf-v5-c-context-selector__toggle--BorderBottomColor: var(--pf-v5-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor);
212
170
  }
213
- .pf-v5-c-masthead .pf-v5-c-dropdown {
214
- --pf-v5-c-dropdown__toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderTopColor);
215
- --pf-v5-c-dropdown__toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderRightColor);
216
- --pf-v5-c-dropdown__toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
217
- }
218
171
  .pf-v5-c-masthead .pf-v5-c-dropdown.pf-m-full-height {
219
172
  --pf-v5-c-dropdown__toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor);
220
173
  --pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v5-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
@@ -222,9 +175,6 @@
222
175
  .pf-v5-c-masthead .pf-v5-c-nav {
223
176
  align-self: stretch;
224
177
  }
225
- .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
226
- color: var(--pf-v5-c-button--m-plain--Color);
227
- }
228
178
 
229
179
  .pf-v5-c-masthead__main {
230
180
  position: relative;
@@ -235,42 +185,48 @@
235
185
  align-self: stretch;
236
186
  order: var(--pf-v5-c-masthead__main--Order);
237
187
  min-height: var(--pf-v5-c-masthead__main--MinHeight);
238
- padding-top: var(--pf-v5-c-masthead__main--PaddingTop);
239
- padding-bottom: var(--pf-v5-c-masthead__main--PaddingBottom);
240
- margin-right: var(--pf-v5-c-masthead__main--MarginRight);
188
+ padding-block-start: var(--pf-v5-c-masthead__main--PaddingTop);
189
+ padding-block-end: var(--pf-v5-c-masthead__main--PaddingBottom);
190
+ margin-inline-end: var(--pf-v5-c-masthead__main--MarginRight);
241
191
  }
242
192
  .pf-v5-c-masthead__main::before {
243
193
  position: absolute;
244
- right: var(--pf-v5-c-masthead__main--before--Right);
245
- bottom: 0;
246
- left: var(--pf-v5-c-masthead__main--before--Left);
194
+ inset-block-end: 0;
195
+ inset-inline-start: var(--pf-v5-c-masthead__main--before--Left);
196
+ inset-inline-end: var(--pf-v5-c-masthead__main--before--Right);
247
197
  content: "";
248
- border-bottom: var(--pf-v5-c-masthead__main--before--BorderBottom);
198
+ border-block-end: var(--pf-v5-c-masthead__main--before--BorderBottom);
249
199
  }
250
200
  .pf-v5-c-masthead__main:last-child {
251
201
  --pf-v5-c-masthead__main--MarginRight: 0;
252
202
  }
253
203
 
204
+ .pf-v5-c-masthead__logo {
205
+ display: flex;
206
+ gap: var(--pf-t--global--spacer--md);
207
+ }
208
+
254
209
  .pf-v5-c-masthead__content {
255
210
  display: flex;
256
211
  flex-grow: 1;
257
212
  flex-shrink: 1;
258
213
  grid-column: var(--pf-v5-c-masthead__content--GridColumn);
259
214
  grid-column-end: -1;
215
+ gap: var(--pf-v5-c-masthead__content--Gap);
260
216
  align-items: center;
261
217
  align-self: stretch;
262
218
  order: var(--pf-v5-c-masthead__content--Order);
263
219
  min-height: var(--pf-v5-c-masthead__content--MinHeight);
264
- padding-top: var(--pf-v5-c-masthead__content--PaddingTop);
265
- padding-bottom: var(--pf-v5-c-masthead__content--PaddingBottom);
266
- margin-left: var(--pf-v5-c-masthead__content--MarginLeft);
220
+ padding-block-start: var(--pf-v5-c-masthead__content--PaddingTop);
221
+ padding-block-end: var(--pf-v5-c-masthead__content--PaddingBottom);
222
+ margin-inline-start: var(--pf-v5-c-masthead__content--MarginLeft);
267
223
  }
268
224
  .pf-v5-c-masthead__content:only-child {
269
225
  --pf-v5-c-masthead__content--MarginLeft: 0;
270
226
  }
271
227
  .pf-v5-c-masthead__content .pf-v5-c-nav.pf-m-horizontal {
272
- margin-right: var(--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight);
273
- margin-left: var(--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft);
228
+ margin-inline-start: var(--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft);
229
+ margin-inline-end: var(--pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight);
274
230
  }
275
231
  .pf-v5-c-masthead__toggle ~ .pf-v5-c-masthead__content {
276
232
  --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-v5-c-masthead__content--MarginLeft) * -1);
@@ -290,8 +246,8 @@
290
246
  .pf-v5-c-masthead__toggle {
291
247
  grid-column: var(--pf-v5-c-masthead__toggle--GridColumn);
292
248
  align-self: center;
293
- margin-right: var(--pf-v5-c-masthead__toggle--MarginRight);
294
- margin-left: var(--pf-v5-c-masthead__toggle--MarginLeft);
249
+ margin-inline-start: var(--pf-v5-c-masthead__toggle--MarginLeft);
250
+ margin-inline-end: var(--pf-v5-c-masthead__toggle--MarginRight);
295
251
  }
296
252
  .pf-v5-c-masthead__toggle .pf-v5-c-button {
297
253
  --pf-v5-c-button--FontSize: var(--pf-v5-c-masthead__toggle--c-button--FontSize);
@@ -652,17 +608,4 @@
652
608
  .pf-v5-c-masthead.pf-m-inset-2xl-on-2xl {
653
609
  --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--2xl);
654
610
  }
655
- }
656
-
657
- :where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-button {
658
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
659
- }
660
-
661
- :where(.pf-v5-theme-dark) .pf-v5-c-masthead {
662
- --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-global--palette--black-1000);
663
- --pf-v5-c-masthead--item-border-color--base: var(--pf-v5-global--BorderColor--100);
664
- color: var(--pf-v5-global--Color--100);
665
- }
666
- :where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-toolbar {
667
- --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-global--palette--black-1000);
668
611
  }