@patternfly/patternfly 6.0.0-alpha.4 → 6.0.0-alpha.40

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 (345) 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 -9
  23. package/base/_variables.scss +8 -6
  24. package/base/patternfly-common.css +24 -6
  25. package/base/patternfly-globals.css +5 -5
  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 +35 -23
  61. package/components/Button/button.scss +36 -26
  62. package/components/Button/themes/dark/button.scss +1 -1
  63. package/components/CalendarMonth/calendar-month.css +25 -15
  64. package/components/CalendarMonth/calendar-month.scss +23 -15
  65. package/components/Card/card.css +28 -17
  66. package/components/Card/card.scss +32 -17
  67. package/components/Check/check.css +12 -10
  68. package/components/Check/check.scss +17 -12
  69. package/components/Chip/chip-group.css +6 -6
  70. package/components/Chip/chip-group.scss +6 -6
  71. package/components/Chip/chip.css +16 -9
  72. package/components/Chip/chip.scss +17 -9
  73. package/components/ClipboardCopy/clipboard-copy.css +19 -10
  74. package/components/ClipboardCopy/clipboard-copy.scss +16 -8
  75. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
  76. package/components/CodeBlock/code-block.css +6 -3
  77. package/components/CodeBlock/code-block.scss +6 -3
  78. package/components/CodeEditor/code-editor.css +31 -22
  79. package/components/CodeEditor/code-editor.scss +30 -21
  80. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  81. package/components/Content/content.css +100 -97
  82. package/components/Content/content.scss +101 -98
  83. package/components/ContextSelector/context-selector.css +41 -26
  84. package/components/ContextSelector/context-selector.scss +40 -25
  85. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  86. package/components/DataList/data-list-grid.css +21 -21
  87. package/components/DataList/data-list-grid.scss +3 -3
  88. package/components/DataList/data-list.css +69 -56
  89. package/components/DataList/data-list.scss +47 -35
  90. package/components/DatePicker/date-picker.css +8 -8
  91. package/components/DatePicker/date-picker.scss +8 -8
  92. package/components/DescriptionList/description-list.css +8 -5
  93. package/components/DescriptionList/description-list.scss +8 -5
  94. package/components/Divider/divider.css +97 -177
  95. package/components/Divider/divider.scss +60 -79
  96. package/components/DragDrop/drag-drop.css +8 -8
  97. package/components/DragDrop/drag-drop.scss +8 -8
  98. package/components/Drawer/drawer.css +120 -62
  99. package/components/Drawer/drawer.scss +94 -44
  100. package/components/Dropdown/dropdown.css +76 -69
  101. package/components/Dropdown/dropdown.scss +67 -62
  102. package/components/DualListSelector/dual-list-selector.css +29 -15
  103. package/components/DualListSelector/dual-list-selector.scss +30 -15
  104. package/components/EmptyState/empty-state.css +64 -38
  105. package/components/EmptyState/empty-state.scss +70 -38
  106. package/components/ExpandableSection/expandable-section.css +75 -66
  107. package/components/ExpandableSection/expandable-section.scss +82 -80
  108. package/components/FileUpload/file-upload.css +9 -15
  109. package/components/FileUpload/file-upload.scss +9 -15
  110. package/components/Form/form.css +59 -50
  111. package/components/Form/form.scss +50 -45
  112. package/components/FormControl/form-control.css +18 -9
  113. package/components/FormControl/form-control.scss +18 -9
  114. package/components/HelperText/helper-text.css +29 -35
  115. package/components/HelperText/helper-text.scss +31 -41
  116. package/components/Hint/hint.css +37 -27
  117. package/components/Hint/hint.scss +37 -30
  118. package/components/Icon/icon.css +1 -1
  119. package/components/Icon/icon.scss +1 -1
  120. package/components/InlineEdit/inline-edit.css +9 -9
  121. package/components/InlineEdit/inline-edit.scss +9 -9
  122. package/components/InputGroup/input-group.css +12 -6
  123. package/components/InputGroup/input-group.scss +11 -5
  124. package/components/InputGroup/themes/dark/input-group.scss +1 -1
  125. package/components/JumpLinks/jump-links.css +27 -24
  126. package/components/JumpLinks/jump-links.scss +26 -24
  127. package/components/Label/label-group.css +13 -10
  128. package/components/Label/label-group.scss +13 -10
  129. package/components/Label/label.css +9 -9
  130. package/components/Label/label.scss +9 -9
  131. package/components/List/list.css +25 -25
  132. package/components/List/list.scss +26 -26
  133. package/components/LogViewer/log-viewer.css +14 -14
  134. package/components/LogViewer/log-viewer.scss +14 -14
  135. package/components/Login/login.css +104 -122
  136. package/components/Login/login.scss +92 -91
  137. package/components/Masthead/masthead.css +273 -498
  138. package/components/Masthead/masthead.scss +137 -282
  139. package/components/Menu/menu.css +82 -65
  140. package/components/Menu/menu.scss +85 -69
  141. package/components/MenuToggle/menu-toggle.css +90 -100
  142. package/components/MenuToggle/menu-toggle.scss +93 -111
  143. package/components/ModalBox/modal-box.css +76 -69
  144. package/components/ModalBox/modal-box.scss +74 -70
  145. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  146. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  147. package/components/Nav/nav.css +162 -133
  148. package/components/Nav/nav.scss +162 -135
  149. package/components/Nav/themes/dark/nav.scss +2 -2
  150. package/components/NotificationBadge/notification-badge.css +66 -85
  151. package/components/NotificationBadge/notification-badge.scss +72 -103
  152. package/components/NotificationDrawer/notification-drawer.css +32 -19
  153. package/components/NotificationDrawer/notification-drawer.scss +30 -19
  154. package/components/NumberInput/number-input.css +2 -2
  155. package/components/NumberInput/number-input.scss +2 -2
  156. package/components/OptionsMenu/options-menu.css +43 -31
  157. package/components/OptionsMenu/options-menu.scss +43 -31
  158. package/components/OverflowMenu/overflow-menu.css +2 -2
  159. package/components/OverflowMenu/overflow-menu.scss +2 -2
  160. package/components/Page/page.css +232 -271
  161. package/components/Page/page.scss +180 -231
  162. package/components/Pagination/pagination.css +71 -121
  163. package/components/Pagination/pagination.scss +56 -127
  164. package/components/Panel/panel.css +13 -7
  165. package/components/Panel/panel.scss +13 -7
  166. package/components/Popover/popover.css +108 -87
  167. package/components/Popover/popover.scss +120 -109
  168. package/components/Progress/progress.css +9 -7
  169. package/components/Progress/progress.scss +12 -7
  170. package/components/ProgressStepper/progress-stepper.css +26 -20
  171. package/components/ProgressStepper/progress-stepper.scss +25 -19
  172. package/components/Radio/radio.css +16 -13
  173. package/components/Radio/radio.scss +20 -14
  174. package/components/Select/select.css +56 -47
  175. package/components/Select/select.scss +56 -47
  176. package/components/Sidebar/sidebar.css +11 -5
  177. package/components/Sidebar/sidebar.scss +11 -5
  178. package/components/SimpleList/simple-list.css +45 -56
  179. package/components/SimpleList/simple-list.scss +51 -55
  180. package/components/Skeleton/skeleton.css +6 -5
  181. package/components/Skeleton/skeleton.scss +4 -5
  182. package/components/SkipToContent/skip-to-content.css +9 -6
  183. package/components/SkipToContent/skip-to-content.scss +8 -6
  184. package/components/Slider/slider.css +47 -26
  185. package/components/Slider/slider.scss +56 -28
  186. package/components/Switch/switch.css +10 -6
  187. package/components/Switch/switch.scss +11 -7
  188. package/components/TabContent/tab-content.css +4 -1
  189. package/components/TabContent/tab-content.scss +4 -1
  190. package/components/Table/table-grid.css +264 -203
  191. package/components/Table/table-grid.scss +61 -47
  192. package/components/Table/table-scrollable.css +4 -4
  193. package/components/Table/table-scrollable.scss +6 -4
  194. package/components/Table/table-tree-view.css +112 -105
  195. package/components/Table/table-tree-view.scss +38 -33
  196. package/components/Table/table.css +105 -89
  197. package/components/Table/table.scss +105 -89
  198. package/components/Tabs/tabs.css +76 -48
  199. package/components/Tabs/tabs.scss +74 -48
  200. package/components/TextInputGroup/text-input-group.css +15 -15
  201. package/components/TextInputGroup/text-input-group.scss +15 -15
  202. package/components/Tile/tile.css +10 -10
  203. package/components/Tile/tile.scss +10 -10
  204. package/components/Title/title.css +70 -19
  205. package/components/Title/title.scss +90 -20
  206. package/components/ToggleGroup/toggle-group.css +14 -11
  207. package/components/ToggleGroup/toggle-group.scss +14 -11
  208. package/components/Toolbar/toolbar.css +57 -43
  209. package/components/Toolbar/toolbar.scss +45 -25
  210. package/components/Tooltip/tooltip.css +74 -44
  211. package/components/Tooltip/tooltip.scss +93 -77
  212. package/components/TreeView/tree-view.css +48 -27
  213. package/components/TreeView/tree-view.scss +50 -28
  214. package/components/Truncate/truncate.css +13 -0
  215. package/components/Truncate/truncate.scss +19 -3
  216. package/components/Wizard/wizard.css +57 -36
  217. package/components/Wizard/wizard.scss +57 -36
  218. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  219. package/docs/components/Accordion/examples/Accordion.md +614 -416
  220. package/docs/components/Alert/examples/Alert.md +3 -3
  221. package/docs/components/Avatar/examples/Avatar.md +5 -19
  222. package/docs/components/BackgroundImage/examples/BackgroundImage.md +1 -1
  223. package/docs/components/Badge/examples/Badge.md +21 -0
  224. package/docs/components/Banner/examples/Banner.md +48 -25
  225. package/docs/components/Brand/examples/Brand.css +12 -0
  226. package/docs/components/Brand/examples/Brand.md +51 -32
  227. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  228. package/docs/components/Button/examples/Button.css +2 -2
  229. package/docs/components/Button/examples/Button.md +15 -3
  230. package/docs/components/Card/examples/Card.md +143 -37
  231. package/docs/components/Check/examples/Check.md +71 -58
  232. package/docs/components/Chip/examples/Chip.md +1 -1
  233. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  234. package/docs/components/CodeBlock/examples/CodeBlock.md +4 -4
  235. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  236. package/docs/components/Content/examples/Content.md +5 -5
  237. package/docs/components/Divider/examples/Divider.css +3 -1
  238. package/docs/components/Divider/examples/Divider.md +4 -5
  239. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  240. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  241. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  242. package/docs/components/EmptyState/examples/EmptyState.md +45 -1
  243. package/docs/components/ExpandableSection/examples/ExpandableSection.md +49 -28
  244. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  245. package/docs/components/Label/examples/Label.md +12 -12
  246. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  247. package/docs/components/LogViewer/examples/LogViewer.md +250 -160
  248. package/docs/components/Login/examples/Login.md +10 -5
  249. package/docs/components/Masthead/examples/masthead.md +443 -65
  250. package/docs/components/Menu/examples/Menu.css +8 -0
  251. package/docs/components/Menu/examples/Menu.md +594 -543
  252. package/docs/components/MenuToggle/examples/MenuToggle.md +151 -138
  253. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  254. package/docs/components/Nav/examples/Navigation.css +2 -8
  255. package/docs/components/Nav/examples/Navigation.md +240 -114
  256. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  257. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  258. package/docs/components/Page/examples/Page.css +0 -8
  259. package/docs/components/Page/examples/Page.md +22 -21
  260. package/docs/components/Pagination/examples/Pagination.md +663 -637
  261. package/docs/components/Popover/examples/Popover.css +4 -9
  262. package/docs/components/Popover/examples/Popover.md +1 -1
  263. package/docs/components/Radio/examples/Radio.md +62 -54
  264. package/docs/components/Select/deprecated/Select.md +184 -177
  265. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  266. package/docs/components/Table/examples/Table.css +2 -2
  267. package/docs/components/Table/examples/Table.md +10 -10
  268. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  269. package/docs/components/TextInputGroup/examples/TextInputGroup.md +9 -9
  270. package/docs/components/Tile/examples/Tile.css +1 -1
  271. package/docs/components/Title/examples/Title.md +18 -0
  272. package/docs/components/Toolbar/examples/Toolbar.md +663 -2894
  273. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  274. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  275. package/docs/components/Truncate/examples/Truncate.css +2 -2
  276. package/docs/components/Truncate/examples/Truncate.md +2 -2
  277. package/docs/demos/AboutModal/examples/AboutModal.md +103 -30
  278. package/docs/demos/Alert/examples/Alert.md +303 -84
  279. package/docs/demos/BackToTop/examples/BackToTop.md +101 -28
  280. package/docs/demos/Banner/examples/Banner.md +209 -58
  281. package/docs/demos/Card/examples/Card.css +3 -3
  282. package/docs/demos/Card/examples/Card.md +28 -12
  283. package/docs/demos/CardView/examples/CardView.md +259 -197
  284. package/docs/demos/ContextSelector/examples/ContextSelector.md +374 -91
  285. package/docs/demos/Dashboard/examples/Dashboard.md +104 -31
  286. package/docs/demos/DataList/examples/DataList.md +974 -907
  287. package/docs/demos/DescriptionList/examples/DescriptionList.md +303 -84
  288. package/docs/demos/Drawer/examples/Drawer.md +505 -140
  289. package/docs/demos/JumpLinks/examples/JumpLinks.md +606 -168
  290. package/docs/demos/Masthead/examples/Masthead.md +745 -310
  291. package/docs/demos/Modal/examples/Modal.md +606 -168
  292. package/docs/demos/Nav/examples/Nav.md +808 -224
  293. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +510 -140
  294. package/docs/demos/Page/examples/Page.md +909 -252
  295. package/docs/demos/Page/examples/Penta.md +570 -503
  296. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +2 -1
  297. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1293 -914
  298. package/docs/demos/Skeleton/examples/Skeleton.md +108 -63
  299. package/docs/demos/Table/examples/Table.md +3842 -3400
  300. package/docs/demos/Tabs/examples/Tabs.md +636 -191
  301. package/docs/demos/Toolbar/examples/Toolbar.css +15 -0
  302. package/docs/demos/Toolbar/examples/Toolbar.md +1305 -1467
  303. package/docs/demos/Wizard/examples/Wizard.md +909 -252
  304. package/docs/layouts/Flex/examples/Flex.md +16 -16
  305. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  306. package/icons/pficons.mjs +1 -0
  307. package/layouts/Flex/flex.css +115 -43
  308. package/layouts/Flex/flex.scss +20 -8
  309. package/package.json +36 -32
  310. package/patternfly-addons.css +732 -972
  311. package/patternfly-base-no-globals-theme-dark-unversioned.css +923 -799
  312. package/patternfly-base-no-globals.css +923 -799
  313. package/patternfly-base-theme-dark-unversioned.css +928 -804
  314. package/patternfly-base.css +928 -804
  315. package/patternfly-no-globals.css +5239 -4963
  316. package/patternfly-theme-dark-unversioned.css +5243 -4967
  317. package/patternfly.css +5243 -4967
  318. package/patternfly.min.css +1 -1
  319. package/patternfly.min.css.map +1 -1
  320. package/sass-utilities/functions.scss +6 -0
  321. package/sass-utilities/mixins.scss +62 -2
  322. package/sass-utilities/scss-variables.scss +8 -8
  323. package/sass-utilities/themes/dark/mixins.scss +3 -1
  324. package/utilities/Accessibility/accessibility.css +12 -12
  325. package/utilities/Spacing/spacing.css +720 -960
  326. package/utilities/Spacing/spacing.scss +4 -8
  327. package/base/themes/dark/_variables.scss +0 -102
  328. package/components/AboutModalBox/themes/dark/about-modal-box.scss +0 -7
  329. package/components/Accordion/themes/dark/accordion.scss +0 -9
  330. package/components/Alert/themes/dark/alert.scss +0 -17
  331. package/components/Badge/themes/dark/badge.scss +0 -9
  332. package/components/Banner/themes/dark/banner.scss +0 -14
  333. package/components/HelperText/themes/dark/helper-text.scss +0 -7
  334. package/components/Hint/themes/dark/hint.scss +0 -8
  335. package/components/Login/themes/dark/login.scss +0 -12
  336. package/components/Masthead/themes/dark/masthead.scss +0 -14
  337. package/components/ModalBox/themes/dark/modal-box.scss +0 -7
  338. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  339. package/components/Page/themes/dark/page.scss +0 -69
  340. package/components/Pagination/themes/dark/pagination.scss +0 -7
  341. package/components/Popover/themes/dark/popover.scss +0 -11
  342. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
  343. package/components/Tooltip/themes/dark/tooltip.scss +0 -8
  344. package/docs/components/Avatar/examples/Avatar.css +0 -3
  345. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/components/SimpleList/simple-list.css CHANGED
@@ -1,83 +1,72 @@
1
- .pf-v5-c-simple-list {
2
- --pf-v5-c-simple-list__item-link--PaddingTop: var(--pf-v5-global--spacer--xs);
3
- --pf-v5-c-simple-list__item-link--PaddingRight: var(--pf-v5-global--spacer--md);
4
- --pf-v5-c-simple-list__item-link--PaddingBottom: var(--pf-v5-global--spacer--xs);
5
- --pf-v5-c-simple-list__item-link--PaddingLeft: var(--pf-v5-global--spacer--md);
6
- --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
7
- --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-global--Color--100);
8
- --pf-v5-c-simple-list__item-link--FontSize: var(--pf-v5-global--FontSize--sm);
9
- --pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-global--FontWeight--normal);
10
- --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-v5-global--link--Color);
11
- --pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
12
- --pf-v5-c-simple-list__item-link--m-current--FontWeight: var(--pf-v5-global--FontWeight--normal);
13
- --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-v5-global--Color--100);
14
- --pf-v5-c-simple-list__item-link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
15
- --pf-v5-c-simple-list__item-link--focus--Color: var(--pf-v5-global--Color--100);
16
- --pf-v5-c-simple-list__item-link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
17
- --pf-v5-c-simple-list__item-link--focus--FontWeight: var(--pf-v5-global--FontWeight--normal);
18
- --pf-v5-c-simple-list__item-link--active--Color: var(--pf-v5-global--Color--100);
19
- --pf-v5-c-simple-list__item-link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
20
- --pf-v5-c-simple-list__item-link--active--FontWeight: var(--pf-v5-global--FontWeight--normal);
21
- --pf-v5-c-simple-list__title--PaddingTop: var(--pf-v5-global--spacer--sm);
22
- --pf-v5-c-simple-list__title--PaddingRight: var(--pf-v5-global--spacer--md);
23
- --pf-v5-c-simple-list__title--PaddingBottom: var(--pf-v5-global--spacer--sm);
24
- --pf-v5-c-simple-list__title--PaddingLeft: var(--pf-v5-global--spacer--md);
25
- --pf-v5-c-simple-list__title--FontSize: var(--pf-v5-global--FontSize--sm);
26
- --pf-v5-c-simple-list__title--Color: var(--pf-v5-global--Color--dark-200);
27
- --pf-v5-c-simple-list__title--FontWeight: var(--pf-v5-global--FontWeight--bold);
28
- --pf-v5-c-simple-list__section--section--MarginTop: var(--pf-v5-global--spacer--sm);
1
+ :root, .pf-v5-c-simple-list {
2
+ --pf-v5-c-simple-list__item-link--PaddingTop: var(--pf-t--global--spacer--xs);
3
+ --pf-v5-c-simple-list__item-link--PaddingRight: var(--pf-t--global--spacer--md);
4
+ --pf-v5-c-simple-list__item-link--PaddingBottom: var(--pf-t--global--spacer--xs);
5
+ --pf-v5-c-simple-list__item-link--PaddingLeft: var(--pf-t--global--spacer--md);
6
+ --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
7
+ --pf-v5-c-simple-list__item-link--Color: var(--pf-t--global--text--color--subtle);
8
+ --pf-v5-c-simple-list__item-link--FontSize: var(--pf-t--global--font--size--body);
9
+ --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-t--global--text--color--regular);
10
+ --pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--selected);
11
+ --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-t--global--text--color--subtle);
12
+ --pf-v5-c-simple-list__item-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
13
+ --pf-v5-c-simple-list__item-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
14
+ --pf-v5-c-simple-list__item-link--BorderRadius: var(--pf-t--global--border--radius--tiny);
15
+ --pf-v5-c-simple-list__item-link--m-link--Color: var(--pf-t--global--text--color--link--default);
16
+ --pf-v5-c-simple-list__item-link--m-link--m-current--Color: var(--pf-t--global--text--color--link--hover);
17
+ --pf-v5-c-simple-list__item-link--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
18
+ --pf-v5-c-simple-list__title--PaddingTop: var(--pf-t--global--spacer--sm);
19
+ --pf-v5-c-simple-list__title--PaddingRight: var(--pf-t--global--spacer--md);
20
+ --pf-v5-c-simple-list__title--PaddingBottom: var(--pf-t--global--spacer--sm);
21
+ --pf-v5-c-simple-list__title--PaddingLeft: var(--pf-t--global--spacer--md);
22
+ --pf-v5-c-simple-list__title--FontSize: var(--pf-t--global--font--size--body--sm);
23
+ --pf-v5-c-simple-list__title--Color: var(--pf-t--global--text--color--regular);
24
+ --pf-v5-c-simple-list__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
25
+ --pf-v5-c-simple-list__section--section--MarginTop: var(--pf-t--global--spacer--sm);
29
26
  }
30
27
 
31
28
  .pf-v5-c-simple-list__item-link {
32
29
  display: block;
33
30
  width: 100%;
34
- padding: var(--pf-v5-c-simple-list__item-link--PaddingTop) var(--pf-v5-c-simple-list__item-link--PaddingRight) var(--pf-v5-c-simple-list__item-link--PaddingBottom) var(--pf-v5-c-simple-list__item-link--PaddingLeft);
31
+ padding-block-start: var(--pf-v5-c-simple-list__item-link--PaddingTop);
32
+ padding-block-end: var(--pf-v5-c-simple-list__item-link--PaddingBottom);
33
+ padding-inline-start: var(--pf-v5-c-simple-list__item-link--PaddingLeft);
34
+ padding-inline-end: var(--pf-v5-c-simple-list__item-link--PaddingRight);
35
35
  font-size: var(--pf-v5-c-simple-list__item-link--FontSize);
36
- font-weight: var(--pf-v5-c-simple-list__item-link--FontWeight);
37
36
  color: var(--pf-v5-c-simple-list__item-link--Color);
38
- text-align: left;
37
+ text-align: start;
38
+ text-decoration: none;
39
39
  background-color: var(--pf-v5-c-simple-list__item-link--BackgroundColor);
40
40
  border: none;
41
+ border-radius: var(--pf-v5-c-simple-list__item-link--BorderRadius);
42
+ }
43
+ .pf-v5-c-simple-list__item-link.pf-m-link {
44
+ --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--m-link--Color);
45
+ --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-v5-c-simple-list__item-link--m-link--m-current--Color);
46
+ --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-v5-c-simple-list__item-link--m-link--hover--Color);
41
47
  }
42
- .pf-v5-c-simple-list__item-link:hover {
48
+ .pf-v5-c-simple-list__item-link:hover, .pf-v5-c-simple-list__item-link:focus {
43
49
  --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--hover--BackgroundColor);
44
50
  --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--hover--Color);
45
51
  text-decoration: none;
46
- }
47
- .pf-v5-c-simple-list__item-link:focus {
48
- --pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-c-simple-list__item-link--focus--FontWeight);
49
- --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--focus--BackgroundColor);
50
- --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--focus--Color);
51
- }
52
- .pf-v5-c-simple-list__item-link:active {
53
- --pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-c-simple-list__item-link--active--FontWeight);
54
- --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--active--BackgroundColor);
55
- --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--active--Color);
52
+ mix-blend-mode: var(--pf-v5-c-simple-list__item-link--MixBlendMode);
56
53
  }
57
54
  .pf-v5-c-simple-list__item-link.pf-m-current {
58
- --pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-c-simple-list__item-link--m-current--FontWeight);
59
55
  --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--m-current--BackgroundColor);
60
56
  --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--m-current--Color);
57
+ mix-blend-mode: var(--pf-v5-c-simple-list__item-link--MixBlendMode);
61
58
  }
62
59
 
63
60
  .pf-v5-c-simple-list__title {
64
- padding: var(--pf-v5-c-simple-list__title--PaddingTop) var(--pf-v5-c-simple-list__title--PaddingRight) var(--pf-v5-c-simple-list__title--PaddingBottom) var(--pf-v5-c-simple-list__title--PaddingLeft);
61
+ padding-block-start: var(--pf-v5-c-simple-list__title--PaddingTop);
62
+ padding-block-end: var(--pf-v5-c-simple-list__title--PaddingBottom);
63
+ padding-inline-start: var(--pf-v5-c-simple-list__title--PaddingLeft);
64
+ padding-inline-end: var(--pf-v5-c-simple-list__title--PaddingRight);
65
65
  font-size: var(--pf-v5-c-simple-list__title--FontSize);
66
66
  font-weight: var(--pf-v5-c-simple-list__title--FontWeight);
67
67
  color: var(--pf-v5-c-simple-list__title--Color);
68
68
  }
69
69
 
70
70
  .pf-v5-c-simple-list__section + .pf-v5-c-simple-list__section {
71
- margin-top: var(--pf-v5-c-simple-list__section--section--MarginTop);
72
- }
73
-
74
- :where(.pf-v5-theme-dark) .pf-v5-c-simple-list {
75
- --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-v5-global--active-color--100);
76
- --pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
77
- --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-v5-global--Color--100);
78
- --pf-v5-c-simple-list__item-link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
79
- --pf-v5-c-simple-list__item-link--focus--Color: var(--pf-v5-global--Color--100);
80
- --pf-v5-c-simple-list__item-link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
81
- --pf-v5-c-simple-list__item-link--active--Color: var(--pf-v5-global--Color--100);
82
- --pf-v5-c-simple-list__item-link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
71
+ margin-block-start: var(--pf-v5-c-simple-list__section--section--MarginTop);
83
72
  }
package/components/SimpleList/simple-list.scss CHANGED
@@ -1,91 +1,87 @@
1
1
  // @debug $simple-list; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$simple-list} {
3
+ :root, .#{$simple-list} {
4
4
  // Simple list item link
5
- --#{$simple-list}__item-link--PaddingTop: var(--#{$pf-global}--spacer--xs);
6
- --#{$simple-list}__item-link--PaddingRight: var(--#{$pf-global}--spacer--md);
7
- --#{$simple-list}__item-link--PaddingBottom: var(--#{$pf-global}--spacer--xs);
8
- --#{$simple-list}__item-link--PaddingLeft: var(--#{$pf-global}--spacer--md);
9
- --#{$simple-list}__item-link--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
10
- --#{$simple-list}__item-link--Color: var(--#{$pf-global}--Color--100);
11
- --#{$simple-list}__item-link--FontSize: var(--#{$pf-global}--FontSize--sm);
12
- --#{$simple-list}__item-link--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
13
- --#{$simple-list}__item-link--m-current--Color: var(--#{$pf-global}--link--Color);
14
- --#{$simple-list}__item-link--m-current--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
15
- --#{$simple-list}__item-link--m-current--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
16
- --#{$simple-list}__item-link--hover--Color: var(--#{$pf-global}--Color--100); // remove at breaking change
17
- --#{$simple-list}__item-link--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
18
- --#{$simple-list}__item-link--focus--Color: var(--#{$pf-global}--Color--100); // remove at breaking change
19
- --#{$simple-list}__item-link--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
20
- --#{$simple-list}__item-link--focus--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
21
- --#{$simple-list}__item-link--active--Color: var(--#{$pf-global}--Color--100); // remove at breaking change
22
- --#{$simple-list}__item-link--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
23
- --#{$simple-list}__item-link--active--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
5
+ --#{$simple-list}__item-link--PaddingTop: var(--pf-t--global--spacer--xs);
6
+ --#{$simple-list}__item-link--PaddingRight: var(--pf-t--global--spacer--md);
7
+ --#{$simple-list}__item-link--PaddingBottom: var(--pf-t--global--spacer--xs);
8
+ --#{$simple-list}__item-link--PaddingLeft: var(--pf-t--global--spacer--md);
9
+ --#{$simple-list}__item-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
10
+ --#{$simple-list}__item-link--Color: var(--pf-t--global--text--color--subtle);
11
+ --#{$simple-list}__item-link--FontSize: var(--pf-t--global--font--size--body);
12
+ --#{$simple-list}__item-link--m-current--Color: var(--pf-t--global--text--color--regular);
13
+ --#{$simple-list}__item-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--selected);
14
+ --#{$simple-list}__item-link--hover--Color: var(--pf-t--global--text--color--subtle);
15
+ --#{$simple-list}__item-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
16
+ --#{$simple-list}__item-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
17
+ --#{$simple-list}__item-link--BorderRadius: var(--pf-t--global--border--radius--tiny);
18
+
19
+ // Simple list item link
20
+ --#{$simple-list}__item-link--m-link--Color: var(--pf-t--global--text--color--link--default);
21
+ --#{$simple-list}__item-link--m-link--m-current--Color: var(--pf-t--global--text--color--link--hover);
22
+ --#{$simple-list}__item-link--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
24
23
 
25
24
  // Simple list title
26
- --#{$simple-list}__title--PaddingTop: var(--#{$pf-global}--spacer--sm);
27
- --#{$simple-list}__title--PaddingRight: var(--#{$pf-global}--spacer--md);
28
- --#{$simple-list}__title--PaddingBottom: var(--#{$pf-global}--spacer--sm);
29
- --#{$simple-list}__title--PaddingLeft: var(--#{$pf-global}--spacer--md);
30
- --#{$simple-list}__title--FontSize: var(--#{$pf-global}--FontSize--sm);
31
- --#{$simple-list}__title--Color: var(--#{$pf-global}--Color--dark-200);
32
- --#{$simple-list}__title--FontWeight: var(--#{$pf-global}--FontWeight--bold);
25
+ --#{$simple-list}__title--PaddingTop: var(--pf-t--global--spacer--sm);
26
+ --#{$simple-list}__title--PaddingRight: var(--pf-t--global--spacer--md);
27
+ --#{$simple-list}__title--PaddingBottom: var(--pf-t--global--spacer--sm);
28
+ --#{$simple-list}__title--PaddingLeft: var(--pf-t--global--spacer--md);
29
+ --#{$simple-list}__title--FontSize: var(--pf-t--global--font--size--body--sm);
30
+ --#{$simple-list}__title--Color: var(--pf-t--global--text--color--regular);
31
+ --#{$simple-list}__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
33
32
 
34
33
  // Simple list section
35
- --#{$simple-list}__section--section--MarginTop: var(--#{$pf-global}--spacer--sm);
34
+ --#{$simple-list}__section--section--MarginTop: var(--pf-t--global--spacer--sm);
36
35
  }
37
36
 
38
37
  .#{$simple-list}__item-link {
39
38
  display: block;
40
39
  width: 100%;
41
- padding: var(--#{$simple-list}__item-link--PaddingTop) var(--#{$simple-list}__item-link--PaddingRight) var(--#{$simple-list}__item-link--PaddingBottom) var(--#{$simple-list}__item-link--PaddingLeft);
40
+ padding-block-start: var(--#{$simple-list}__item-link--PaddingTop);
41
+ padding-block-end: var(--#{$simple-list}__item-link--PaddingBottom);
42
+ padding-inline-start: var(--#{$simple-list}__item-link--PaddingLeft);
43
+ padding-inline-end: var(--#{$simple-list}__item-link--PaddingRight);
42
44
  font-size: var(--#{$simple-list}__item-link--FontSize);
43
- font-weight: var(--#{$simple-list}__item-link--FontWeight);
44
45
  color: var(--#{$simple-list}__item-link--Color);
45
- text-align: left;
46
+ text-align: start;
47
+ text-decoration: none;
46
48
  background-color: var(--#{$simple-list}__item-link--BackgroundColor);
47
49
  border: none;
50
+ border-radius: var(--#{$simple-list}__item-link--BorderRadius);
51
+
52
+ &.pf-m-link {
53
+ --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--m-link--Color);
54
+ --#{$simple-list}__item-link--hover--Color: var(--#{$simple-list}__item-link--m-link--m-current--Color);
55
+ --#{$simple-list}__item-link--m-current--Color: var(--#{$simple-list}__item-link--m-link--hover--Color);
56
+ }
48
57
 
49
- &:hover {
58
+ &:hover,
59
+ &:focus {
50
60
  --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--hover--BackgroundColor);
51
61
  --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--hover--Color);
52
62
 
53
63
  text-decoration: none;
54
- }
55
-
56
- &:focus {
57
- --#{$simple-list}__item-link--FontWeight: var(--#{$simple-list}__item-link--focus--FontWeight);
58
- --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--focus--BackgroundColor);
59
- --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--focus--Color);
60
- }
61
-
62
- &:active {
63
- --#{$simple-list}__item-link--FontWeight: var(--#{$simple-list}__item-link--active--FontWeight);
64
- --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--active--BackgroundColor);
65
- --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--active--Color);
64
+ mix-blend-mode: var(--#{$simple-list}__item-link--MixBlendMode);
66
65
  }
67
66
 
68
67
  &.pf-m-current {
69
- --#{$simple-list}__item-link--FontWeight: var(--#{$simple-list}__item-link--m-current--FontWeight);
70
68
  --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--m-current--BackgroundColor);
71
69
  --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--m-current--Color);
70
+
71
+ mix-blend-mode: var(--#{$simple-list}__item-link--MixBlendMode);
72
72
  }
73
73
  }
74
74
 
75
75
  .#{$simple-list}__title {
76
- padding: var(--#{$simple-list}__title--PaddingTop) var(--#{$simple-list}__title--PaddingRight) var(--#{$simple-list}__title--PaddingBottom) var(--#{$simple-list}__title--PaddingLeft);
76
+ padding-block-start: var(--#{$simple-list}__title--PaddingTop);
77
+ padding-block-end: var(--#{$simple-list}__title--PaddingBottom);
78
+ padding-inline-start: var(--#{$simple-list}__title--PaddingLeft);
79
+ padding-inline-end: var(--#{$simple-list}__title--PaddingRight);
77
80
  font-size: var(--#{$simple-list}__title--FontSize);
78
81
  font-weight: var(--#{$simple-list}__title--FontWeight);
79
82
  color: var(--#{$simple-list}__title--Color);
80
83
  }
81
84
 
82
85
  .#{$simple-list}__section + .#{$simple-list}__section {
83
- margin-top: var(--#{$simple-list}__section--section--MarginTop);
84
- }
85
-
86
- // stylelint-disable no-invalid-position-at-import-rule
87
- @import "themes/dark/simple-list";
88
-
89
- @include pf-v5-theme-dark {
90
- @include pf-v5-theme-dark-simple-list;
91
- }
86
+ margin-block-start: var(--#{$simple-list}__section--section--MarginTop);
87
+ }
package/components/Skeleton/skeleton.css CHANGED
@@ -54,21 +54,22 @@
54
54
  .pf-v5-c-skeleton::before {
55
55
  display: block;
56
56
  height: var(--pf-v5-c-skeleton--before--Height);
57
- padding-bottom: var(--pf-v5-c-skeleton--before--PaddingBottom);
57
+ padding-block-end: var(--pf-v5-c-skeleton--before--PaddingBottom);
58
58
  content: var(--pf-v5-c-skeleton--before--Content);
59
59
  }
60
60
  .pf-v5-c-skeleton::after {
61
61
  position: absolute;
62
- top: 0;
63
- right: 0;
64
- bottom: 0;
65
- left: 0;
62
+ inset: 0;
66
63
  display: block;
67
64
  content: "";
68
65
  background: linear-gradient(var(--pf-v5-c-skeleton--after--LinearGradientAngle), var(--pf-v5-c-skeleton--after--LinearGradientColorStop1), var(--pf-v5-c-skeleton--after--LinearGradientColorStop2), var(--pf-v5-c-skeleton--after--LinearGradientColorStop3));
69
66
  transform: translate3d(var(--pf-v5-c-skeleton--after--TranslateX), 0, 0);
70
67
  animation: var(--pf-v5-c-skeleton--after--AnimationName) var(--pf-v5-c-skeleton--after--AnimationDuration) var(--pf-v5-c-skeleton--after--AnimationTimingFunction) var(--pf-v5-c-skeleton--after--AnimationDelay) var(--pf-v5-c-skeleton--after--AnimationIterationCount);
71
68
  }
69
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-skeleton::after {
70
+ scale: -1 1;
71
+ }
72
+
72
73
  .pf-v5-c-skeleton.pf-m-circle {
73
74
  --pf-v5-c-skeleton--BorderRadius: var(--pf-v5-c-skeleton--m-circle--BorderRadius);
74
75
  }
package/components/Skeleton/skeleton.scss CHANGED
@@ -68,16 +68,15 @@
68
68
  &::before {
69
69
  display: block;
70
70
  height: var(--#{$skeleton}--before--Height);
71
- padding-bottom: var(--#{$skeleton}--before--PaddingBottom);
71
+ padding-block-end: var(--#{$skeleton}--before--PaddingBottom);
72
72
  content: var(--#{$skeleton}--before--Content);
73
73
  }
74
74
 
75
75
  &::after {
76
+ @include pf-v5-mirror-inline-on-rtl;
77
+
76
78
  position: absolute;
77
- top: 0;
78
- right: 0;
79
- bottom: 0;
80
- left: 0;
79
+ inset: 0;
81
80
  display: block;
82
81
  content: "";
83
82
  background: linear-gradient(var(--#{$skeleton}--after--LinearGradientAngle), var(--#{$skeleton}--after--LinearGradientColorStop1), var(--#{$skeleton}--after--LinearGradientColorStop2), var(--#{$skeleton}--after--LinearGradientColorStop3));
package/components/SkipToContent/skip-to-content.css CHANGED
@@ -1,12 +1,15 @@
1
- .pf-v5-c-skip-to-content {
2
- --pf-v5-c-skip-to-content--Top: var(--pf-v5-global--spacer--md);
1
+ :root {
2
+ --pf-v5-c-skip-to-content--Top: var(--pf-t--global--spacer--md);
3
3
  --pf-v5-c-skip-to-content--ZIndex: var(--pf-v5-global--ZIndex--2xl);
4
- --pf-v5-c-skip-to-content--focus--Left: var(--pf-v5-global--spacer--md);
4
+ --pf-v5-c-skip-to-content--focus--Left: var(--pf-t--global--spacer--md);
5
+ }
6
+
7
+ .pf-v5-c-skip-to-content {
5
8
  position: absolute;
6
- top: var(--pf-v5-c-skip-to-content--Top);
7
- left: -300%;
9
+ inset-block-start: var(--pf-v5-c-skip-to-content--Top);
10
+ inset-inline-start: -300%;
8
11
  z-index: var(--pf-v5-c-skip-to-content--ZIndex);
9
12
  }
10
13
  .pf-v5-c-skip-to-content:focus-within {
11
- left: var(--pf-v5-c-skip-to-content--focus--Left);
14
+ inset-inline-start: var(--pf-v5-c-skip-to-content--focus--Left);
12
15
  }
package/components/SkipToContent/skip-to-content.scss CHANGED
@@ -1,16 +1,18 @@
1
1
  // @debug $skip-to-content; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$skip-to-content} {
4
- --#{$skip-to-content}--Top: var(--#{$pf-global}--spacer--md);
3
+ :root {
4
+ --#{$skip-to-content}--Top: var(--pf-t--global--spacer--md);
5
5
  --#{$skip-to-content}--ZIndex: var(--#{$pf-global}--ZIndex--2xl);
6
- --#{$skip-to-content}--focus--Left: var(--#{$pf-global}--spacer--md);
6
+ --#{$skip-to-content}--focus--Left: var(--pf-t--global--spacer--md);
7
+ }
7
8
 
9
+ .#{$skip-to-content} {
8
10
  position: absolute;
9
- top: var(--#{$skip-to-content}--Top);
10
- left: -300%; // moves off screen
11
+ inset-block-start: var(--#{$skip-to-content}--Top);
12
+ inset-inline-start: -300%; // moves off screen
11
13
  z-index: var(--#{$skip-to-content}--ZIndex);
12
14
 
13
15
  &:focus-within {
14
- left: var(--#{$skip-to-content}--focus--Left);
16
+ inset-inline-start: var(--#{$skip-to-content}--focus--Left);
15
17
  }
16
18
  }
package/components/Slider/slider.css CHANGED
@@ -1,5 +1,6 @@
1
1
  .pf-v5-c-slider {
2
2
  --pf-v5-c-slider--value: 0;
3
+ --pf-v5-c-slider__step--Left: 0;
3
4
  --pf-v5-c-slider__rail--PaddingTop: var(--pf-v5-global--spacer--md);
4
5
  --pf-v5-c-slider__rail--PaddingBottom: var(--pf-v5-global--spacer--md);
5
6
  --pf-v5-c-slider__rail-track--Height: 0.25rem;
@@ -7,6 +8,7 @@
7
8
  --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-global--active-color--300);
8
9
  --pf-v5-c-slider__rail-track--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
9
10
  --pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v5-c-slider--value);
11
+ --pf-v5-c-slider__rail-track--before--fill--direction: right;
10
12
  --pf-v5-c-slider__steps--FontSize: var(--pf-v5-global--FontSize--sm);
11
13
  --pf-v5-c-slider__steps--Height: var(--pf-v5-c-slider__steps--FontSize);
12
14
  --pf-v5-c-slider__step-tick--Top: var(--pf-v5-global--spacer--md);
@@ -58,6 +60,10 @@
58
60
  --pf-v5-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-v5-global--palette--black-700);
59
61
  display: flex;
60
62
  }
63
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider {
64
+ --pf-v5-c-slider__rail-track--before--fill--direction: left;
65
+ }
66
+
61
67
  .pf-v5-c-slider.pf-m-disabled {
62
68
  --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
63
69
  --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
@@ -77,8 +83,8 @@
77
83
  }
78
84
 
79
85
  .pf-v5-c-slider__rail {
80
- padding-top: var(--pf-v5-c-slider__rail--PaddingTop);
81
- padding-bottom: var(--pf-v5-c-slider__rail--PaddingBottom);
86
+ padding-block-start: var(--pf-v5-c-slider__rail--PaddingTop);
87
+ padding-block-end: var(--pf-v5-c-slider__rail--PaddingBottom);
82
88
  }
83
89
 
84
90
  .pf-v5-c-slider__rail-track {
@@ -87,12 +93,9 @@
87
93
  }
88
94
  .pf-v5-c-slider__rail-track::before {
89
95
  position: absolute;
90
- top: 0;
91
- right: 0;
92
- bottom: 0;
93
- left: 0;
96
+ inset: 0;
94
97
  content: "";
95
- background: linear-gradient(to right, var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-v5-c-slider__rail-track--before--base--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
98
+ background: linear-gradient(to var(--pf-v5-c-slider__rail-track--before--fill--direction), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-v5-c-slider__rail-track--before--base--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
96
99
  border-radius: var(--pf-v5-c-slider__rail-track--before--BorderRadius);
97
100
  }
98
101
 
@@ -104,8 +107,8 @@
104
107
 
105
108
  .pf-v5-c-slider__step {
106
109
  position: absolute;
107
- top: 0;
108
- left: var(--pf-v5-c-slider__step--Left);
110
+ inset-block-start: 0;
111
+ inset-inline-start: var(--pf-v5-c-slider__step--Left);
109
112
  content: "";
110
113
  }
111
114
  .pf-v5-c-slider__step.pf-m-active {
@@ -121,45 +124,59 @@
121
124
  }
122
125
 
123
126
  .pf-v5-c-slider__step-tick {
127
+ transform: translateX(var(--pf-v5-c-slider__step-tick--TranslateX));
124
128
  position: absolute;
125
- top: var(--pf-v5-c-slider__step-tick--Top);
126
- left: 0;
129
+ inset-block-start: var(--pf-v5-c-slider__step-tick--Top);
130
+ inset-inline-start: 0;
127
131
  width: var(--pf-v5-c-slider__step-tick--Width);
128
132
  height: var(--pf-v5-c-slider__step-tick--Height);
129
133
  background-color: var(--pf-v5-c-slider__step-tick--BackgroundColor);
130
134
  border-radius: var(--pf-v5-c-slider__step-tick--BorderRadius);
131
- transform: translateX(var(--pf-v5-c-slider__step-tick--TranslateX));
135
+ }
136
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__step-tick {
137
+ transform: translateX(calc(var(--pf-v5-c-slider__step-tick--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
132
138
  }
133
139
 
134
140
  .pf-v5-c-slider__step-label {
141
+ transform: translateX(var(--pf-v5-c-slider__step-label--TranslateX));
135
142
  position: absolute;
136
- top: var(--pf-v5-c-slider__step-label--Top);
143
+ inset-block-start: var(--pf-v5-c-slider__step-label--Top);
137
144
  word-break: normal;
138
- transform: translateX(var(--pf-v5-c-slider__step-label--TranslateX));
145
+ }
146
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__step-label {
147
+ transform: translateX(calc(var(--pf-v5-c-slider__step-label--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
139
148
  }
140
149
 
141
150
  .pf-v5-c-slider__thumb {
151
+ transform: translate(var(--pf-v5-c-slider__thumb--TranslateX), var(--pf-v5-c-slider__thumb--TranslateY));
142
152
  position: absolute;
143
- top: var(--pf-v5-c-slider__thumb--Top);
144
- left: var(--pf-v5-c-slider__thumb--Left);
153
+ inset-block-start: var(--pf-v5-c-slider__thumb--Top);
154
+ inset-inline-start: var(--pf-v5-c-slider__thumb--Left);
145
155
  width: var(--pf-v5-c-slider__thumb--Width);
146
156
  height: var(--pf-v5-c-slider__thumb--Height);
147
157
  cursor: pointer;
148
158
  background-color: var(--pf-v5-c-slider__thumb--BackgroundColor);
149
159
  border-radius: var(--pf-v5-c-slider__thumb--BorderRadius);
150
160
  box-shadow: var(--pf-v5-c-slider__thumb--BoxShadow);
151
- transform: translate(var(--pf-v5-c-slider__thumb--TranslateX), var(--pf-v5-c-slider__thumb--TranslateY));
152
161
  }
162
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__thumb {
163
+ transform: translate(calc(var(--pf-v5-c-slider__thumb--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__thumb--TranslateY));
164
+ }
165
+
153
166
  .pf-v5-c-slider__thumb::before {
167
+ transform: translate(var(--pf-v5-c-slider__thumb--before--TranslateX), var(--pf-v5-c-slider__thumb--before--TranslateY));
154
168
  position: absolute;
155
- top: 50%;
156
- left: 50%;
169
+ inset-block-start: 50%;
170
+ inset-inline-start: 50%;
157
171
  width: var(--pf-v5-c-slider__thumb--before--Width);
158
172
  height: var(--pf-v5-c-slider__thumb--before--Height);
159
173
  content: "";
160
174
  border-radius: var(--pf-v5-c-slider__thumb--before--BorderRadius);
161
- transform: translate(var(--pf-v5-c-slider__thumb--before--TranslateX), var(--pf-v5-c-slider__thumb--before--TranslateY));
162
175
  }
176
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__thumb::before {
177
+ transform: translate(calc(var(--pf-v5-c-slider__thumb--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__thumb--before--TranslateY));
178
+ }
179
+
163
180
  .pf-v5-c-slider__thumb:hover {
164
181
  --pf-v5-c-slider__thumb--BoxShadow: var(--pf-v5-c-slider__thumb--hover--BoxShadow);
165
182
  }
@@ -172,25 +189,29 @@
172
189
  }
173
190
 
174
191
  .pf-v5-c-slider__value {
175
- margin-left: var(--pf-v5-c-slider__value--MarginLeft);
192
+ margin-inline-start: var(--pf-v5-c-slider__value--MarginLeft);
176
193
  }
177
194
  .pf-v5-c-slider__value.pf-m-floating {
195
+ transform: translate(var(--pf-v5-c-slider__value--m-floating--TranslateX), var(--pf-v5-c-slider__value--m-floating--TranslateY));
178
196
  --pf-v5-c-slider__value--MarginLeft: 0;
179
197
  position: absolute;
180
- top: 0;
181
- left: var(--pf-v5-c-slider__value--m-floating--Left);
198
+ inset-block-start: 0;
199
+ inset-inline-start: var(--pf-v5-c-slider__value--m-floating--Left);
182
200
  z-index: var(--pf-v5-c-slider__value--m-floating--ZIndex);
183
- transform: translate(var(--pf-v5-c-slider__value--m-floating--TranslateX), var(--pf-v5-c-slider__value--m-floating--TranslateY));
184
201
  }
202
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__value.pf-m-floating {
203
+ transform: translate(calc(var(--pf-v5-c-slider__value--m-floating--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__value--m-floating--TranslateY));
204
+ }
205
+
185
206
  .pf-v5-c-slider__value .pf-v5-c-form-control {
186
207
  width: var(--pf-v5-c-slider__value--c-form-control--Width);
187
208
  }
188
209
 
189
210
  .pf-v5-c-slider__actions {
190
211
  display: flex;
191
- margin-right: var(--pf-v5-c-slider__actions--MarginRight);
212
+ margin-inline-end: var(--pf-v5-c-slider__actions--MarginRight);
192
213
  }
193
214
  .pf-v5-c-slider__main ~ .pf-v5-c-slider__actions {
194
215
  --pf-v5-c-slider__actions--MarginRight: 0;
195
- margin-left: var(--pf-v5-c-slider__main--actions--MarginLeft);
216
+ margin-inline-start: var(--pf-v5-c-slider__main--actions--MarginLeft);
196
217
  }