@patternfly/patternfly 6.0.0-alpha.6 → 6.0.0-alpha.60

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 (372) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/README.md +13 -3
  3. package/assets/icons/iconUnicodes.json +1 -0
  4. package/assets/images/PF-Backdrop.svg +1 -0
  5. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  6. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  7. package/assets/images/PF-IconLogo-Reverse.svg +14 -0
  8. package/assets/images/PF-IconLogo-color.svg +17 -0
  9. package/assets/images/PF-IconLogo.svg +17 -0
  10. package/assets/images/logo__pf--reverse-on-md.svg +1 -1
  11. package/assets/images/pf-background.svg +22 -0
  12. package/assets/images/pf-c-brand__logo-on-lg-white.svg +32 -0
  13. package/assets/images/pf-c-brand__logo-on-md-white.svg +42 -0
  14. package/assets/images/pf-c-brand__logo-on-sm-white.svg +17 -0
  15. package/assets/images/pf-c-brand__logo-on-sm.svg +1 -1
  16. package/assets/images/pf-c-brand__logo-on-xl-white.svg +39 -0
  17. package/assets/images/pf_logo_white.hbs +35 -0
  18. package/assets/images/pf_logo_white.svg +38 -0
  19. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  20. package/assets/pficon/pficon.scss +6 -129
  21. package/base/_common.scss +29 -4
  22. package/base/_globals.scss +5 -7
  23. package/base/_variables.scss +8 -6
  24. package/base/patternfly-common.css +24 -6
  25. package/base/patternfly-globals.css +5 -4
  26. package/base/patternfly-icons.css +5 -1
  27. package/base/patternfly-pf-icons.css +5 -1
  28. package/base/patternfly-variables.css +889 -787
  29. package/base/tokens/_tokens-dark.scss +322 -265
  30. package/base/tokens/_tokens-default.scss +428 -306
  31. package/base/tokens/_tokens-font.scss +41 -46
  32. package/base/tokens/_tokens-palette.scss +69 -71
  33. package/base/tokens/_workspace-overrides.scss +7 -0
  34. package/components/AboutModalBox/about-modal-box.css +78 -104
  35. package/components/AboutModalBox/about-modal-box.scss +62 -74
  36. package/components/Accordion/accordion.css +96 -175
  37. package/components/Accordion/accordion.scss +106 -193
  38. package/components/ActionList/action-list.css +2 -2
  39. package/components/ActionList/action-list.scss +2 -2
  40. package/components/Alert/alert-group.css +27 -20
  41. package/components/Alert/alert-group.scss +27 -20
  42. package/components/Alert/alert.css +74 -95
  43. package/components/Alert/alert.scss +76 -89
  44. package/components/AppLauncher/app-launcher.css +32 -23
  45. package/components/AppLauncher/app-launcher.scss +32 -23
  46. package/components/Avatar/avatar.css +10 -13
  47. package/components/Avatar/avatar.scss +10 -17
  48. package/components/BackToTop/back-to-top.css +17 -15
  49. package/components/BackToTop/back-to-top.scss +14 -13
  50. package/components/Backdrop/backdrop.css +8 -4
  51. package/components/Backdrop/backdrop.scss +7 -4
  52. package/components/BackgroundImage/background-image.css +11 -4
  53. package/components/BackgroundImage/background-image.scss +13 -4
  54. package/components/Badge/badge.css +25 -17
  55. package/components/Badge/badge.scss +27 -19
  56. package/components/Banner/banner.css +95 -69
  57. package/components/Banner/banner.scss +100 -34
  58. package/components/Breadcrumb/breadcrumb.css +28 -19
  59. package/components/Breadcrumb/breadcrumb.scss +26 -19
  60. package/components/Button/button.css +422 -359
  61. package/components/Button/button.scss +480 -487
  62. package/components/CalendarMonth/calendar-month.css +25 -15
  63. package/components/CalendarMonth/calendar-month.scss +23 -15
  64. package/components/Card/card.css +28 -17
  65. package/components/Card/card.scss +32 -17
  66. package/components/Check/check.css +25 -22
  67. package/components/Check/check.scss +26 -24
  68. package/components/Chip/chip-group.css +6 -6
  69. package/components/Chip/chip-group.scss +6 -6
  70. package/components/Chip/chip.css +16 -9
  71. package/components/Chip/chip.scss +17 -9
  72. package/components/ClipboardCopy/clipboard-copy.css +47 -41
  73. package/components/ClipboardCopy/clipboard-copy.scss +50 -34
  74. package/components/CodeBlock/code-block.css +24 -12
  75. package/components/CodeBlock/code-block.scss +24 -13
  76. package/components/CodeEditor/code-editor.css +31 -22
  77. package/components/CodeEditor/code-editor.scss +30 -21
  78. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  79. package/components/Content/content.css +40 -37
  80. package/components/Content/content.scss +40 -37
  81. package/components/ContextSelector/context-selector.css +41 -26
  82. package/components/ContextSelector/context-selector.scss +40 -25
  83. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  84. package/components/DataList/data-list-grid.css +21 -21
  85. package/components/DataList/data-list-grid.scss +3 -3
  86. package/components/DataList/data-list.css +165 -209
  87. package/components/DataList/data-list.scss +138 -185
  88. package/components/DatePicker/date-picker.css +8 -8
  89. package/components/DatePicker/date-picker.scss +8 -8
  90. package/components/DescriptionList/description-list.css +47 -39
  91. package/components/DescriptionList/description-list.scss +33 -30
  92. package/components/Divider/divider.css +97 -177
  93. package/components/Divider/divider.scss +60 -79
  94. package/components/DragDrop/drag-drop.css +26 -22
  95. package/components/DragDrop/drag-drop.scss +26 -25
  96. package/components/Drawer/drawer.css +120 -62
  97. package/components/Drawer/drawer.scss +94 -44
  98. package/components/Dropdown/dropdown.css +76 -69
  99. package/components/Dropdown/dropdown.scss +67 -62
  100. package/components/DualListSelector/dual-list-selector.css +29 -15
  101. package/components/DualListSelector/dual-list-selector.scss +30 -15
  102. package/components/EmptyState/empty-state.css +64 -38
  103. package/components/EmptyState/empty-state.scss +70 -38
  104. package/components/ExpandableSection/expandable-section.css +75 -66
  105. package/components/ExpandableSection/expandable-section.scss +82 -80
  106. package/components/FileUpload/file-upload.css +31 -43
  107. package/components/FileUpload/file-upload.scss +31 -49
  108. package/components/Form/form.css +111 -154
  109. package/components/Form/form.scss +101 -160
  110. package/components/FormControl/form-control.css +95 -111
  111. package/components/FormControl/form-control.scss +97 -92
  112. package/components/HelperText/helper-text.css +29 -35
  113. package/components/HelperText/helper-text.scss +31 -41
  114. package/components/Hint/hint.css +37 -27
  115. package/components/Hint/hint.scss +37 -30
  116. package/components/Icon/icon.css +155 -19
  117. package/components/Icon/icon.scss +188 -21
  118. package/components/InlineEdit/inline-edit.css +12 -11
  119. package/components/InlineEdit/inline-edit.scss +12 -11
  120. package/components/InputGroup/input-group.css +32 -42
  121. package/components/InputGroup/input-group.scss +31 -33
  122. package/components/JumpLinks/jump-links.css +61 -58
  123. package/components/JumpLinks/jump-links.scss +61 -60
  124. package/components/Label/label-group.css +48 -50
  125. package/components/Label/label-group.scss +48 -51
  126. package/components/Label/label.css +266 -363
  127. package/components/Label/label.scss +306 -356
  128. package/components/List/list.css +25 -25
  129. package/components/List/list.scss +26 -26
  130. package/components/LogViewer/log-viewer.css +14 -14
  131. package/components/LogViewer/log-viewer.scss +14 -14
  132. package/components/Login/login.css +104 -122
  133. package/components/Login/login.scss +92 -91
  134. package/components/Masthead/masthead.css +273 -498
  135. package/components/Masthead/masthead.scss +137 -282
  136. package/components/Menu/menu.css +82 -65
  137. package/components/Menu/menu.scss +85 -69
  138. package/components/MenuToggle/menu-toggle.css +37 -31
  139. package/components/MenuToggle/menu-toggle.scss +37 -33
  140. package/components/ModalBox/modal-box.css +76 -69
  141. package/components/ModalBox/modal-box.scss +74 -70
  142. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  144. package/components/Nav/nav.css +248 -899
  145. package/components/Nav/nav.scss +304 -1059
  146. package/components/Nav/themes/dark/nav.scss +2 -2
  147. package/components/NotificationBadge/notification-badge.css +66 -85
  148. package/components/NotificationBadge/notification-badge.scss +72 -103
  149. package/components/NotificationDrawer/notification-drawer.css +130 -128
  150. package/components/NotificationDrawer/notification-drawer.scss +130 -129
  151. package/components/NumberInput/number-input.css +10 -10
  152. package/components/NumberInput/number-input.scss +9 -14
  153. package/components/OptionsMenu/options-menu.css +43 -31
  154. package/components/OptionsMenu/options-menu.scss +43 -31
  155. package/components/OverflowMenu/overflow-menu.css +2 -2
  156. package/components/OverflowMenu/overflow-menu.scss +2 -2
  157. package/components/Page/page.css +182 -232
  158. package/components/Page/page.scss +130 -195
  159. package/components/Pagination/pagination.css +71 -121
  160. package/components/Pagination/pagination.scss +56 -127
  161. package/components/Panel/panel.css +40 -30
  162. package/components/Panel/panel.scss +42 -33
  163. package/components/Popover/popover.css +108 -87
  164. package/components/Popover/popover.scss +120 -109
  165. package/components/Progress/progress.css +40 -52
  166. package/components/Progress/progress.scss +48 -62
  167. package/components/ProgressStepper/progress-stepper.css +26 -20
  168. package/components/ProgressStepper/progress-stepper.scss +25 -19
  169. package/components/Radio/radio.css +30 -23
  170. package/components/Radio/radio.scss +31 -25
  171. package/components/Select/select.css +56 -47
  172. package/components/Select/select.scss +56 -47
  173. package/components/Sidebar/sidebar.css +31 -14
  174. package/components/Sidebar/sidebar.scss +34 -16
  175. package/components/SimpleList/simple-list.css +45 -56
  176. package/components/SimpleList/simple-list.scss +51 -55
  177. package/components/Skeleton/skeleton.css +24 -25
  178. package/components/Skeleton/skeleton.scss +21 -26
  179. package/components/SkipToContent/skip-to-content.css +9 -6
  180. package/components/SkipToContent/skip-to-content.scss +8 -6
  181. package/components/Slider/slider.css +80 -55
  182. package/components/Slider/slider.scss +96 -65
  183. package/components/Spinner/spinner.css +17 -34
  184. package/components/Spinner/spinner.scss +19 -47
  185. package/components/Switch/switch.css +49 -41
  186. package/components/Switch/switch.scss +51 -42
  187. package/components/TabContent/tab-content.css +21 -12
  188. package/components/TabContent/tab-content.scss +22 -15
  189. package/components/Table/table-grid.css +264 -203
  190. package/components/Table/table-grid.scss +61 -47
  191. package/components/Table/table-scrollable.css +4 -4
  192. package/components/Table/table-scrollable.scss +6 -4
  193. package/components/Table/table-tree-view.css +112 -105
  194. package/components/Table/table-tree-view.scss +38 -33
  195. package/components/Table/table.css +105 -89
  196. package/components/Table/table.scss +105 -89
  197. package/components/Tabs/tabs.css +76 -48
  198. package/components/Tabs/tabs.scss +74 -48
  199. package/components/TextInputGroup/text-input-group.css +15 -15
  200. package/components/TextInputGroup/text-input-group.scss +15 -15
  201. package/components/Tile/tile.css +47 -88
  202. package/components/Tile/tile.scss +45 -91
  203. package/components/Timestamp/timestamp.css +12 -9
  204. package/components/Timestamp/timestamp.scss +11 -10
  205. package/components/Title/title.css +70 -19
  206. package/components/Title/title.scss +90 -20
  207. package/components/ToggleGroup/toggle-group.css +48 -58
  208. package/components/ToggleGroup/toggle-group.scss +48 -56
  209. package/components/Toolbar/toolbar.css +57 -43
  210. package/components/Toolbar/toolbar.scss +45 -25
  211. package/components/Tooltip/tooltip.css +74 -44
  212. package/components/Tooltip/tooltip.scss +93 -77
  213. package/components/TreeView/tree-view.css +48 -27
  214. package/components/TreeView/tree-view.scss +50 -28
  215. package/components/Truncate/truncate.css +13 -0
  216. package/components/Truncate/truncate.scss +19 -3
  217. package/components/Wizard/wizard.css +57 -36
  218. package/components/Wizard/wizard.scss +57 -36
  219. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  220. package/docs/components/Accordion/examples/Accordion.md +614 -416
  221. package/docs/components/Alert/examples/Alert.md +3 -3
  222. package/docs/components/Avatar/examples/Avatar.md +5 -19
  223. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  224. package/docs/components/Badge/examples/Badge.md +21 -0
  225. package/docs/components/Banner/examples/Banner.md +48 -25
  226. package/docs/components/Brand/examples/Brand.css +12 -0
  227. package/docs/components/Brand/examples/Brand.md +51 -32
  228. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  229. package/docs/components/Button/examples/Button.css +6 -2
  230. package/docs/components/Button/examples/Button.md +1425 -87
  231. package/docs/components/Card/examples/Card.md +143 -37
  232. package/docs/components/Check/examples/Check.md +71 -58
  233. package/docs/components/Chip/examples/Chip.md +1 -1
  234. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  235. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  236. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  237. package/docs/components/Content/examples/Content.md +5 -5
  238. package/docs/components/Divider/examples/Divider.css +3 -1
  239. package/docs/components/Divider/examples/Divider.md +4 -5
  240. package/docs/components/DragDrop/examples/DragDrop.css +3 -3
  241. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  242. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  243. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  244. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  245. package/docs/components/FileUpload/examples/FileUpload.md +112 -53
  246. package/docs/components/Form/examples/Form.md +134 -89
  247. package/docs/components/Icon/examples/Icon.md +82 -11
  248. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  249. package/docs/components/JumpLinks/examples/JumpLinks.md +280 -168
  250. package/docs/components/Label/examples/Label.css +4 -0
  251. package/docs/components/Label/examples/Label.md +1001 -225
  252. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  253. package/docs/components/LogViewer/examples/LogViewer.md +250 -160
  254. package/docs/components/Login/examples/Login.md +10 -5
  255. package/docs/components/Masthead/examples/masthead.md +443 -65
  256. package/docs/components/Menu/examples/Menu.css +8 -0
  257. package/docs/components/Menu/examples/Menu.md +594 -543
  258. package/docs/components/MenuToggle/examples/MenuToggle.md +109 -96
  259. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  260. package/docs/components/Nav/examples/Navigation.css +3 -42
  261. package/docs/components/Nav/examples/Navigation.md +305 -353
  262. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  263. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  264. package/docs/components/Page/examples/Page.css +0 -8
  265. package/docs/components/Page/examples/Page.md +22 -21
  266. package/docs/components/Pagination/examples/Pagination.md +663 -637
  267. package/docs/components/Panel/examples/Panel.md +12 -0
  268. package/docs/components/Popover/examples/Popover.css +4 -9
  269. package/docs/components/Popover/examples/Popover.md +1 -1
  270. package/docs/components/Radio/examples/Radio.md +62 -54
  271. package/docs/components/Select/deprecated/Select.md +184 -177
  272. package/docs/components/Sidebar/examples/Sidebar.md +19 -0
  273. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  274. package/docs/components/TabContent/examples/TabContent.md +10 -10
  275. package/docs/components/Table/examples/Table.css +2 -2
  276. package/docs/components/Table/examples/Table.md +10 -10
  277. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  278. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  279. package/docs/components/Tile/examples/Tile.css +1 -1
  280. package/docs/components/Tile/examples/Tile.md +264 -144
  281. package/docs/components/Title/examples/Title.md +18 -0
  282. package/docs/components/Toolbar/examples/Toolbar.md +663 -2894
  283. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  284. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  285. package/docs/components/Truncate/examples/Truncate.css +2 -2
  286. package/docs/components/Truncate/examples/Truncate.md +2 -2
  287. package/docs/demos/AboutModal/examples/AboutModal.md +103 -30
  288. package/docs/demos/Alert/examples/Alert.md +327 -84
  289. package/docs/demos/BackToTop/examples/BackToTop.md +101 -28
  290. package/docs/demos/Banner/examples/Banner.md +209 -58
  291. package/docs/demos/Card/examples/Card.css +3 -3
  292. package/docs/demos/Card/examples/Card.md +28 -12
  293. package/docs/demos/CardView/examples/CardView.md +263 -205
  294. package/docs/demos/ContextSelector/examples/ContextSelector.md +373 -90
  295. package/docs/demos/Dashboard/examples/Dashboard.md +104 -31
  296. package/docs/demos/DataList/examples/DataList.md +995 -928
  297. package/docs/demos/DescriptionList/examples/DescriptionList.md +303 -84
  298. package/docs/demos/Drawer/examples/Drawer.md +605 -220
  299. package/docs/demos/Form/examples/BasicForms.md +133 -82
  300. package/docs/demos/JumpLinks/examples/JumpLinks.md +881 -353
  301. package/docs/demos/Masthead/examples/Masthead.md +767 -323
  302. package/docs/demos/Modal/examples/Modal.md +639 -192
  303. package/docs/demos/Nav/examples/Nav.md +685 -896
  304. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +510 -140
  305. package/docs/demos/Page/examples/Page.md +933 -264
  306. package/docs/demos/Page/examples/Penta.md +569 -501
  307. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -9
  308. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  309. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1296 -917
  310. package/docs/demos/Skeleton/examples/Skeleton.md +108 -63
  311. package/docs/demos/Table/examples/Table.md +3832 -3390
  312. package/docs/demos/Tabs/examples/Tabs.md +636 -191
  313. package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
  314. package/docs/demos/Toolbar/examples/Toolbar.md +1331 -1493
  315. package/docs/demos/Wizard/examples/Wizard.md +909 -252
  316. package/docs/layouts/Flex/examples/Flex.md +16 -16
  317. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  318. package/icons/pficons.mjs +1 -0
  319. package/layouts/Flex/flex.css +115 -43
  320. package/layouts/Flex/flex.scss +20 -8
  321. package/package.json +36 -32
  322. package/patternfly-addons.css +732 -972
  323. package/patternfly-base-no-globals-theme-dark-unversioned.css +923 -799
  324. package/patternfly-base-no-globals.css +923 -799
  325. package/patternfly-base-theme-dark-unversioned.css +928 -803
  326. package/patternfly-base.css +928 -803
  327. package/patternfly-no-globals.css +6885 -7353
  328. package/patternfly-theme-dark-unversioned.css +6890 -7357
  329. package/patternfly.css +6890 -7357
  330. package/patternfly.min.css +1 -1
  331. package/patternfly.min.css.map +1 -1
  332. package/sass-utilities/functions.scss +6 -0
  333. package/sass-utilities/mixins.scss +80 -2
  334. package/sass-utilities/scss-variables.scss +8 -8
  335. package/sass-utilities/themes/dark/mixins.scss +3 -1
  336. package/utilities/Accessibility/accessibility.css +12 -12
  337. package/utilities/Spacing/spacing.css +720 -960
  338. package/utilities/Spacing/spacing.scss +4 -8
  339. package/base/themes/dark/_variables.scss +0 -102
  340. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  341. package/components/Accordion/themes/dark/accordion.scss +0 -9
  342. package/components/Alert/themes/dark/alert.scss +0 -17
  343. package/components/Badge/themes/dark/badge.scss +0 -9
  344. package/components/Banner/themes/dark/banner.scss +0 -14
  345. package/components/Button/themes/dark/button.scss +0 -51
  346. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +0 -19
  347. package/components/DataList/themes/dark/data-list.scss +0 -10
  348. package/components/DragDrop/themes/dark/drag-drop.scss +0 -7
  349. package/components/Form/themes/dark/form.scss +0 -7
  350. package/components/FormControl/themes/dark/form-control.scss +0 -24
  351. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  352. package/components/Hint/themes/dark/hint.scss +0 -8
  353. package/components/InputGroup/themes/dark/input-group.scss +0 -22
  354. package/components/Label/themes/dark/label.scss +0 -53
  355. package/components/Login/themes/dark/login.scss +0 -12
  356. package/components/Masthead/themes/dark/masthead.scss +0 -14
  357. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  358. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  359. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  360. package/components/Page/themes/dark/page.scss +0 -69
  361. package/components/Pagination/themes/dark/pagination.scss +0 -7
  362. package/components/Panel/themes/dark/panel.scss +0 -7
  363. package/components/Popover/themes/dark/popover.scss +0 -11
  364. package/components/Progress/themes/dark/progress.scss +0 -9
  365. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  366. package/components/Skeleton/themes/dark/skeleton.scss +0 -10
  367. package/components/Switch/themes/dark/switch.scss +0 -11
  368. package/components/Tile/themes/dark/tile.scss +0 -10
  369. package/components/ToggleGroup/themes/dark/toggle-group.scss +0 -12
  370. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  371. package/docs/components/Avatar/examples/Avatar.css +0 -3
  372. 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
 
@@ -314,7 +314,10 @@ deprecated: true
314
314
  disabled
315
315
  aria-label="Sort by"
316
316
  >
317
- <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
317
+ <i
318
+ class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
319
+ aria-hidden="true"
320
+ ></i>
318
321
  </button>
319
322
  <ul
320
323
  class="pf-v5-c-options-menu__menu"
@@ -360,7 +363,10 @@ deprecated: true
360
363
  aria-expanded="false"
361
364
  aria-label="Sort by"
362
365
  >
363
- <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
366
+ <i
367
+ class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
368
+ aria-hidden="true"
369
+ ></i>
364
370
  </button>
365
371
  <ul
366
372
  class="pf-v5-c-options-menu__menu"
@@ -406,7 +412,10 @@ deprecated: true
406
412
  aria-expanded="true"
407
413
  aria-label="Sort by"
408
414
  >
409
- <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
415
+ <i
416
+ class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
417
+ aria-hidden="true"
418
+ ></i>
410
419
  </button>
411
420
  <ul
412
421
  class="pf-v5-c-options-menu__menu"
@@ -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.