@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.80

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 (331) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-Backdrop.svg +1 -0
  3. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  4. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  5. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  6. package/assets/images/PF-IconLogo-color.svg +17 -0
  7. package/assets/images/PF-IconLogo.svg +17 -0
  8. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  9. package/assets/images/pf-background.svg +22 -0
  10. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  11. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  12. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  13. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  14. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  15. package/assets/images/pf_logo_white.hbs +35 -0
  16. package/assets/images/pf_logo_white.svg +38 -0
  17. package/base/_common.scss +8 -4
  18. package/base/_globals.scss +4 -6
  19. package/base/_variables.scss +2 -7
  20. package/base/patternfly-common.css +8 -4
  21. package/base/patternfly-globals.css +4 -3
  22. package/base/patternfly-variables.css +884 -871
  23. package/base/tokens/_tokens-charts.scss +159 -0
  24. package/base/tokens/_tokens-dark.scss +311 -287
  25. package/base/tokens/_tokens-default.scss +425 -329
  26. package/base/tokens/_tokens-font.scss +29 -36
  27. package/base/tokens/_tokens-palette.scss +71 -71
  28. package/base/tokens/_workspace-overrides.scss +7 -0
  29. package/components/AboutModalBox/about-modal-box.css +57 -94
  30. package/components/AboutModalBox/about-modal-box.scss +37 -62
  31. package/components/Accordion/accordion.css +85 -177
  32. package/components/Accordion/accordion.scss +96 -195
  33. package/components/ActionList/action-list.css +18 -17
  34. package/components/ActionList/action-list.scss +26 -16
  35. package/components/Alert/alert-group.css +20 -16
  36. package/components/Alert/alert-group.scss +20 -16
  37. package/components/Alert/alert.css +59 -84
  38. package/components/Alert/alert.scss +62 -78
  39. package/components/Avatar/avatar.css +10 -13
  40. package/components/Avatar/avatar.scss +10 -17
  41. package/components/BackToTop/back-to-top.css +17 -16
  42. package/components/BackToTop/back-to-top.scss +12 -12
  43. package/components/Backdrop/backdrop.css +6 -2
  44. package/components/Backdrop/backdrop.scss +5 -2
  45. package/components/BackgroundImage/background-image.css +5 -1
  46. package/components/BackgroundImage/background-image.scss +5 -1
  47. package/components/Badge/badge.css +23 -15
  48. package/components/Badge/badge.scss +25 -17
  49. package/components/Banner/banner.css +90 -64
  50. package/components/Banner/banner.scss +95 -32
  51. package/components/Breadcrumb/breadcrumb.css +19 -16
  52. package/components/Breadcrumb/breadcrumb.scss +18 -16
  53. package/components/Button/button.css +419 -353
  54. package/components/Button/button.scss +476 -476
  55. package/components/CalendarMonth/calendar-month.css +61 -92
  56. package/components/CalendarMonth/calendar-month.scss +68 -63
  57. package/components/Card/card.css +100 -194
  58. package/components/Card/card.scss +121 -237
  59. package/components/Check/check.css +24 -21
  60. package/components/Check/check.scss +25 -23
  61. package/components/ClipboardCopy/clipboard-copy.css +30 -33
  62. package/components/ClipboardCopy/clipboard-copy.scss +34 -26
  63. package/components/CodeBlock/code-block.css +22 -9
  64. package/components/CodeBlock/code-block.scss +22 -10
  65. package/components/CodeEditor/code-editor.css +94 -72
  66. package/components/CodeEditor/code-editor.scss +104 -82
  67. package/components/Content/content.css +7 -7
  68. package/components/Content/content.scss +7 -7
  69. package/components/DataList/data-list.css +101 -158
  70. package/components/DataList/data-list.scss +95 -154
  71. package/components/DatePicker/date-picker.css +13 -14
  72. package/components/DatePicker/date-picker.scss +12 -16
  73. package/components/DescriptionList/description-list.css +39 -34
  74. package/components/DescriptionList/description-list.scss +25 -25
  75. package/components/Divider/divider.css +91 -169
  76. package/components/Divider/divider.scss +60 -77
  77. package/components/DragDrop/drag-drop.css +18 -14
  78. package/components/DragDrop/drag-drop.scss +18 -17
  79. package/components/Drawer/drawer.css +112 -113
  80. package/components/Drawer/drawer.scss +134 -134
  81. package/components/Dropdown/dropdown.css +1 -3
  82. package/components/Dropdown/dropdown.scss +2 -6
  83. package/components/EmptyState/empty-state.css +57 -34
  84. package/components/EmptyState/empty-state.scss +63 -34
  85. package/components/ExpandableSection/expandable-section.css +64 -62
  86. package/components/ExpandableSection/expandable-section.scss +73 -76
  87. package/components/FileUpload/file-upload.css +28 -34
  88. package/components/FileUpload/file-upload.scss +30 -42
  89. package/components/Form/form.css +68 -114
  90. package/components/Form/form.scss +65 -126
  91. package/components/FormControl/form-control.css +86 -111
  92. package/components/FormControl/form-control.scss +88 -92
  93. package/components/HelperText/helper-text.css +28 -34
  94. package/components/HelperText/helper-text.scss +30 -40
  95. package/components/Hint/hint.css +28 -21
  96. package/components/Hint/hint.scss +28 -24
  97. package/components/Icon/icon.css +154 -18
  98. package/components/Icon/icon.scss +187 -20
  99. package/components/InlineEdit/inline-edit.css +8 -7
  100. package/components/InlineEdit/inline-edit.scss +8 -7
  101. package/components/InputGroup/input-group.css +22 -38
  102. package/components/InputGroup/input-group.scss +21 -29
  103. package/components/JumpLinks/jump-links.css +34 -34
  104. package/components/JumpLinks/jump-links.scss +35 -36
  105. package/components/Label/label-group.css +39 -44
  106. package/components/Label/label-group.scss +39 -45
  107. package/components/Label/label.css +380 -355
  108. package/components/Label/label.scss +434 -348
  109. package/components/List/list.css +16 -16
  110. package/components/List/list.scss +17 -17
  111. package/components/Login/login.css +70 -97
  112. package/components/Login/login.scss +56 -64
  113. package/components/Masthead/masthead.css +261 -502
  114. package/components/Masthead/masthead.scss +123 -286
  115. package/components/Menu/menu.css +3 -0
  116. package/components/Menu/menu.scss +7 -3
  117. package/components/MenuToggle/menu-toggle.css +8 -8
  118. package/components/MenuToggle/menu-toggle.scss +8 -10
  119. package/components/ModalBox/modal-box.css +59 -52
  120. package/components/ModalBox/modal-box.scss +57 -53
  121. package/components/MultipleFileUpload/multiple-file-upload.css +77 -50
  122. package/components/MultipleFileUpload/multiple-file-upload.scss +82 -53
  123. package/components/Nav/nav.css +240 -918
  124. package/components/Nav/nav.scss +300 -1082
  125. package/components/NotificationBadge/notification-badge.css +56 -81
  126. package/components/NotificationBadge/notification-badge.scss +60 -97
  127. package/components/NotificationDrawer/notification-drawer.css +104 -115
  128. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  129. package/components/NumberInput/number-input.css +8 -8
  130. package/components/NumberInput/number-input.scss +7 -12
  131. package/components/OverflowMenu/overflow-menu.css +17 -47
  132. package/components/OverflowMenu/overflow-menu.scss +27 -65
  133. package/components/Page/page.css +56 -164
  134. package/components/Page/page.scss +60 -154
  135. package/components/Pagination/pagination.css +57 -124
  136. package/components/Pagination/pagination.scss +40 -128
  137. package/components/Panel/panel.css +27 -23
  138. package/components/Panel/panel.scss +29 -26
  139. package/components/Popover/popover.css +42 -53
  140. package/components/Popover/popover.scss +46 -55
  141. package/components/Progress/progress.css +31 -45
  142. package/components/Progress/progress.scss +36 -55
  143. package/components/ProgressStepper/progress-stepper.css +72 -69
  144. package/components/ProgressStepper/progress-stepper.scss +65 -65
  145. package/components/Radio/radio.css +27 -20
  146. package/components/Radio/radio.scss +28 -22
  147. package/components/Sidebar/sidebar.css +20 -9
  148. package/components/Sidebar/sidebar.scss +23 -11
  149. package/components/SimpleList/simple-list.css +35 -52
  150. package/components/SimpleList/simple-list.scss +41 -51
  151. package/components/Skeleton/skeleton.css +18 -20
  152. package/components/Skeleton/skeleton.scss +17 -21
  153. package/components/SkipToContent/skip-to-content.css +6 -3
  154. package/components/SkipToContent/skip-to-content.scss +8 -6
  155. package/components/Slider/slider.css +34 -30
  156. package/components/Slider/slider.scss +46 -43
  157. package/components/Spinner/spinner.css +17 -34
  158. package/components/Spinner/spinner.scss +19 -47
  159. package/components/Switch/switch.css +42 -38
  160. package/components/Switch/switch.scss +48 -43
  161. package/components/TabContent/tab-content.css +17 -11
  162. package/components/TabContent/tab-content.scss +18 -14
  163. package/components/Table/table-grid.css +29 -45
  164. package/components/Table/table-grid.scss +40 -53
  165. package/components/Table/table-scrollable.css +6 -6
  166. package/components/Table/table-scrollable.scss +8 -8
  167. package/components/Table/table-tree-view.css +76 -74
  168. package/components/Table/table-tree-view.scss +44 -39
  169. package/components/Table/table.css +67 -93
  170. package/components/Table/table.scss +83 -105
  171. package/components/Tabs/tabs.css +143 -175
  172. package/components/Tabs/tabs.scss +159 -217
  173. package/components/Tile/tile.css +40 -81
  174. package/components/Tile/tile.scss +38 -84
  175. package/components/Timestamp/timestamp.css +12 -9
  176. package/components/Timestamp/timestamp.scss +11 -10
  177. package/components/Title/title.css +70 -19
  178. package/components/Title/title.scss +90 -20
  179. package/components/ToggleGroup/toggle-group.css +54 -48
  180. package/components/ToggleGroup/toggle-group.scss +62 -50
  181. package/components/Toolbar/toolbar.css +2527 -1031
  182. package/components/Toolbar/toolbar.scss +233 -520
  183. package/components/Tooltip/tooltip.css +16 -18
  184. package/components/Tooltip/tooltip.scss +20 -24
  185. package/components/TreeView/tree-view.css +76 -97
  186. package/components/TreeView/tree-view.scss +82 -113
  187. package/components/Truncate/truncate.css +4 -0
  188. package/components/Truncate/truncate.scss +3 -0
  189. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  190. package/docs/components/Accordion/examples/Accordion.md +614 -416
  191. package/docs/components/ActionList/examples/ActionList.md +73 -22
  192. package/docs/components/Alert/examples/Alert.md +3 -3
  193. package/docs/components/Avatar/examples/Avatar.md +5 -19
  194. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  195. package/docs/components/Badge/examples/Badge.md +21 -0
  196. package/docs/components/Banner/examples/Banner.md +48 -25
  197. package/docs/components/Brand/examples/Brand.css +12 -0
  198. package/docs/components/Brand/examples/Brand.md +51 -32
  199. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  200. package/docs/components/Button/examples/Button.css +4 -0
  201. package/docs/components/Button/examples/Button.md +1419 -93
  202. package/docs/components/CalendarMonth/examples/CalendarMonth.md +48 -224
  203. package/docs/components/Card/examples/Card.md +550 -133
  204. package/docs/components/Check/examples/Check.md +1 -0
  205. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  206. package/docs/components/CodeEditor/examples/CodeEditor.md +144 -132
  207. package/docs/components/Content/examples/Content.md +5 -5
  208. package/docs/components/DatePicker/examples/DatePicker.md +5 -2
  209. package/docs/components/Divider/examples/Divider.css +3 -1
  210. package/docs/components/Divider/examples/Divider.md +30 -5
  211. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  212. package/docs/components/Drawer/examples/Drawer.md +294 -256
  213. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  214. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  215. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  216. package/docs/components/Form/examples/Form.md +134 -89
  217. package/docs/components/Icon/examples/Icon.md +82 -11
  218. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  219. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  220. package/docs/components/Label/examples/Label.css +4 -0
  221. package/docs/components/Label/examples/Label.md +3090 -703
  222. package/docs/components/LogViewer/examples/LogViewer.md +180 -180
  223. package/docs/components/Login/examples/Login.md +10 -5
  224. package/docs/components/Masthead/examples/masthead.md +443 -65
  225. package/docs/components/Menu/examples/Menu.md +507 -473
  226. package/docs/components/MenuToggle/examples/MenuToggle.md +106 -114
  227. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  228. package/docs/components/Nav/examples/Navigation.css +1 -23
  229. package/docs/components/Nav/examples/Navigation.md +209 -356
  230. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  231. package/docs/components/Page/examples/Page.css +0 -8
  232. package/docs/components/Page/examples/Page.md +22 -21
  233. package/docs/components/Pagination/examples/Pagination.md +663 -637
  234. package/docs/components/Panel/examples/Panel.md +12 -0
  235. package/docs/components/Popover/examples/Popover.md +1 -1
  236. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  237. package/docs/components/Radio/examples/Radio.md +1 -1
  238. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  239. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  240. package/docs/components/TabContent/examples/TabContent.md +10 -10
  241. package/docs/components/Table/examples/Table.md +8 -8
  242. package/docs/components/Tabs/examples/Tabs.css +1 -1
  243. package/docs/components/Tabs/examples/Tabs.md +1025 -826
  244. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  245. package/docs/components/Tile/examples/Tile.md +264 -144
  246. package/docs/components/Title/examples/Title.md +18 -0
  247. package/docs/components/Toolbar/examples/Toolbar.css +20 -15
  248. package/docs/components/Toolbar/examples/Toolbar.md +985 -3355
  249. package/docs/components/TreeView/examples/TreeView.md +7 -57
  250. package/docs/components/Truncate/examples/Truncate.css +2 -2
  251. package/docs/demos/AboutModal/examples/AboutModal.md +104 -31
  252. package/docs/demos/Alert/examples/Alert.md +330 -87
  253. package/docs/demos/BackToTop/examples/BackToTop.md +102 -29
  254. package/docs/demos/Banner/examples/Banner.md +211 -60
  255. package/docs/demos/Card/examples/Card.md +2 -2
  256. package/docs/demos/CardView/examples/CardView.md +241 -187
  257. package/docs/demos/ContextSelector/examples/ContextSelector.md +377 -94
  258. package/docs/demos/Dashboard/examples/Dashboard.md +102 -29
  259. package/docs/demos/DataList/examples/DataList.md +999 -938
  260. package/docs/demos/DescriptionList/examples/DescriptionList.md +306 -87
  261. package/docs/demos/Drawer/examples/Drawer.md +640 -251
  262. package/docs/demos/Form/examples/BasicForms.md +138 -84
  263. package/docs/demos/JumpLinks/examples/JumpLinks.md +917 -385
  264. package/docs/demos/Masthead/examples/Masthead.md +786 -342
  265. package/docs/demos/Modal/examples/Modal.md +645 -198
  266. package/docs/demos/Nav/examples/Nav.md +691 -902
  267. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +515 -145
  268. package/docs/demos/Page/examples/Page.md +942 -273
  269. package/docs/demos/Page/examples/Penta.md +66 -26
  270. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  271. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  272. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1183 -832
  273. package/docs/demos/Skeleton/examples/Skeleton.md +102 -29
  274. package/docs/demos/Table/examples/Table.md +3811 -3456
  275. package/docs/demos/Tabs/examples/Tabs.md +636 -194
  276. package/docs/demos/Toolbar/examples/Toolbar.css +10 -0
  277. package/docs/demos/Toolbar/examples/Toolbar.md +1316 -1478
  278. package/docs/demos/Wizard/examples/Wizard.md +918 -261
  279. package/docs/layouts/Flex/examples/Flex.md +11 -11
  280. package/package.json +32 -32
  281. package/patternfly-base-no-globals-theme-dark-unversioned.css +897 -880
  282. package/patternfly-base-no-globals.css +897 -880
  283. package/patternfly-base-theme-dark-unversioned.css +890 -872
  284. package/patternfly-base.css +890 -872
  285. package/patternfly-no-globals.css +8053 -7977
  286. package/patternfly-theme-dark-unversioned.css +8059 -7982
  287. package/patternfly.css +8059 -7982
  288. package/patternfly.min.css +1 -1
  289. package/patternfly.min.css.map +1 -1
  290. package/sass-utilities/mixins.scss +18 -0
  291. package/base/themes/dark/_variables.scss +0 -102
  292. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  293. package/components/Accordion/themes/dark/accordion.scss +0 -9
  294. package/components/Alert/themes/dark/alert.scss +0 -17
  295. package/components/Badge/themes/dark/badge.scss +0 -9
  296. package/components/Banner/themes/dark/banner.scss +0 -14
  297. package/components/Button/themes/dark/button.scss +0 -51
  298. package/components/CalendarMonth/themes/dark/calendar-month.scss +0 -37
  299. package/components/Card/themes/dark/card.scss +0 -20
  300. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  301. package/components/CodeEditor/themes/dark/code-editor.scss +0 -14
  302. package/components/DataList/themes/dark/data-list.scss +0 -10
  303. package/components/DatePicker/themes/dark/date-picker.scss +0 -8
  304. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  305. package/components/Drawer/themes/dark/drawer.scss +0 -13
  306. package/components/Form/themes/dark/form.scss +0 -7
  307. package/components/FormControl/themes/dark/form-control.scss +0 -24
  308. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  309. package/components/Hint/themes/dark/hint.scss +0 -8
  310. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  311. package/components/Label/themes/dark/label.scss +0 -53
  312. package/components/Login/themes/dark/login.scss +0 -12
  313. package/components/Masthead/themes/dark/masthead.scss +0 -14
  314. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  315. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  316. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  317. package/components/Page/themes/dark/page.scss +0 -69
  318. package/components/Pagination/themes/dark/pagination.scss +0 -7
  319. package/components/Panel/themes/dark/panel.scss +0 -7
  320. package/components/Popover/themes/dark/popover.scss +0 -11
  321. package/components/Progress/themes/dark/progress.scss +0 -9
  322. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  323. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  324. package/components/Switch/themes/dark/switch.scss +0 -11
  325. package/components/Tabs/themes/dark/tabs.scss +0 -10
  326. package/components/Tile/themes/dark/tile.scss +0 -10
  327. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  328. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  329. package/components/TreeView/themes/dark/tree-view.scss +0 -8
  330. package/docs/components/Avatar/examples/Avatar.css +0 -3
  331. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
@@ -2,14 +2,12 @@
2
2
  id: Notification badge
3
3
  section: components
4
4
  cssPrefix: pf-v5-c-notification-badge
5
- ---import './NotificationBadge.css'
6
-
7
- ## Examples
5
+ ---## Examples
8
6
 
9
7
  ### Basic
10
8
 
11
9
  ```html
12
- <div class="pf-v5-t-dark">
10
+ <div>
13
11
  <button
14
12
  class="pf-v5-c-button pf-m-plain"
15
13
  type="button"
@@ -69,7 +67,7 @@ cssPrefix: pf-v5-c-notification-badge
69
67
  ### With count
70
68
 
71
69
  ```html
72
- <div class="pf-v5-t-dark">
70
+ <div>
73
71
  <button
74
72
  class="pf-v5-c-button pf-m-plain"
75
73
  type="button"
@@ -135,7 +133,7 @@ cssPrefix: pf-v5-c-notification-badge
135
133
  ### Expanded
136
134
 
137
135
  ```html
138
- <div class="pf-v5-t-dark">
136
+ <div>
139
137
  <button
140
138
  class="pf-v5-c-button pf-m-plain"
141
139
  type="button"
@@ -206,7 +204,7 @@ cssPrefix: pf-v5-c-notification-badge
206
204
 
207
205
  ### Overview
208
206
 
209
- Always add a modifier class to indicate read, unread, or attention state. Never use the class `.pf-v5-c-notification-badge` on its own. This component is designed to be used within a dark component such as the [masthead](/components/masthead).
207
+ Always add a modifier class to indicate read, unread, or attention state. Never use the class `.pf-v5-c-notification-badge` on its own.
210
208
 
211
209
  ### Accessibility
212
210
 
@@ -1,11 +1,3 @@
1
- .ws-core-c-page :is(.pf-v5-c-page__sidebar, .pf-v5-c-page__main-subnav) {
2
- color: var(--pf-v5-global--Color--light-100);
3
- }
4
-
5
- .ws-core-c-page .pf-v5-c-page__main-section.pf-m-dark-200 {
6
- color: var(--pf-v5-global--Color--dark-100);
7
- }
8
-
9
1
  #ws-core-c-page-with-or-without-fill .ws-preview-html,
10
2
  #ws-core-c-page-multiple-sidebar-body-elements-padding-and-fill .ws-preview-html {
11
3
  height: 500px;
@@ -32,20 +32,14 @@ wrapperTag: div
32
32
  <div class="pf-v5-c-page__sidebar-body">Navigation</div>
33
33
  </div>
34
34
  <main class="pf-v5-c-page__main" tabindex="-1">
35
- <section class="pf-v5-c-page__main-section pf-m-dark-100">
36
- This
37
- <code>.pf-v5-c-page__main-section</code> uses
38
- <code>.pf-m-dark-100</code>.
39
- </section>
40
- <section class="pf-v5-c-page__main-section pf-m-dark-200">
41
- This
42
- <code>.pf-v5-c-page__main-section</code> uses
43
- <code>.pf-m-dark-200</code>.
35
+ <section class="pf-v5-c-page__main-section">
36
+ This is a default
37
+ <code>.pf-v5-c-page__main-section</code>.
44
38
  </section>
45
- <section class="pf-v5-c-page__main-section pf-m-light">
39
+ <section class="pf-v5-c-page__main-section pf-m-secondary">
46
40
  This
47
41
  <code>.pf-v5-c-page__main-section</code> uses
48
- <code>.pf-m-light</code>.
42
+ <code>.pf-m-secondary</code>.
49
43
  </section>
50
44
  <section class="pf-v5-c-page__main-section">
51
45
  This is a default
@@ -78,10 +72,19 @@ wrapperTag: div
78
72
  </div>
79
73
  </header>
80
74
  <main class="pf-v5-c-page__main" tabindex="-1">
81
- <section class="pf-v5-c-page__main-section pf-m-dark-100"></section>
82
- <section class="pf-v5-c-page__main-section pf-m-dark-200"></section>
83
- <section class="pf-v5-c-page__main-section pf-m-light"></section>
84
- <section class="pf-v5-c-page__main-section"></section>
75
+ <section class="pf-v5-c-page__main-section">
76
+ This is a default
77
+ <code>.pf-v5-c-page__main-section</code>.
78
+ </section>
79
+ <section class="pf-v5-c-page__main-section pf-m-secondary">
80
+ This
81
+ <code>.pf-v5-c-page__main-section</code> uses
82
+ <code>.pf-m-secondary</code>.
83
+ </section>
84
+ <section class="pf-v5-c-page__main-section">
85
+ This is a default
86
+ <code>.pf-v5-c-page__main-section</code>.
87
+ </section>
85
88
  </main>
86
89
  </div>
87
90
 
@@ -116,7 +119,7 @@ wrapperTag: div
116
119
  <div class="pf-v5-c-page__sidebar-body pf-m-page-insets">footer content</div>
117
120
  </div>
118
121
  <main class="pf-v5-c-page__main" tabindex="-1">
119
- <section class="pf-v5-c-page__main-section pf-m-light"></section>
122
+ <section class="pf-v5-c-page__main-section"></section>
120
123
  </main>
121
124
  </div>
122
125
 
@@ -144,14 +147,12 @@ wrapperTag: div
144
147
  </div>
145
148
  </header>
146
149
  <main class="pf-v5-c-page__main" tabindex="-1">
147
- <section
148
- class="pf-v5-c-page__main-section pf-m-light"
149
- >A regular page section.</section>
150
+ <section class="pf-v5-c-page__main-section">A regular page section.</section>
150
151
  <section class="pf-v5-c-page__main-section pf-m-fill">
151
152
  This section uses
152
153
  <code>.pf-m-fill</code> to fill the available space.
153
154
  </section>
154
- <section class="pf-v5-c-page__main-section pf-m-light pf-m-no-fill">
155
+ <section class="pf-v5-c-page__main-section pf-m-no-fill">
155
156
  This section uses
156
157
  <code>.pf-m-no-fill</code> to not fill the available space.
157
158
  </section>
@@ -189,7 +190,7 @@ wrapperTag: div
189
190
  This
190
191
  <code>.pf-v5-c-page__main-section</code> has default padding.
191
192
  </section>
192
- <section class="pf-v5-c-page__main-section pf-m-no-padding pf-m-light">
193
+ <section class="pf-v5-c-page__main-section pf-m-no-padding">
193
194
  This
194
195
  <code>.pf-v5-c-page__main-section</code> uses
195
196
  <code>.pf-m-no-padding</code> to remove all padding.