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

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 (261) hide show
  1. package/README.md +13 -3
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  4. package/assets/pficon/pficon.scss +6 -129
  5. package/base/_common.scss +21 -0
  6. package/base/_globals.scss +1 -1
  7. package/base/_variables.scss +7 -0
  8. package/base/patternfly-common.css +16 -2
  9. package/base/patternfly-globals.css +1 -1
  10. package/base/patternfly-icons.css +5 -1
  11. package/base/patternfly-pf-icons.css +5 -1
  12. package/base/patternfly-variables.css +277 -188
  13. package/base/tokens/_tokens-dark.scss +117 -82
  14. package/base/tokens/_tokens-default.scss +145 -109
  15. package/base/tokens/_tokens-font.scss +16 -14
  16. package/base/tokens/_tokens-palette.scss +2 -4
  17. package/components/AboutModalBox/about-modal-box.css +23 -12
  18. package/components/AboutModalBox/about-modal-box.scss +25 -12
  19. package/components/Accordion/accordion.css +33 -20
  20. package/components/Accordion/accordion.scss +32 -20
  21. package/components/ActionList/action-list.css +2 -2
  22. package/components/ActionList/action-list.scss +2 -2
  23. package/components/Alert/alert-group.css +7 -4
  24. package/components/Alert/alert-group.scss +7 -4
  25. package/components/Alert/alert.css +19 -13
  26. package/components/Alert/alert.scss +18 -13
  27. package/components/AppLauncher/app-launcher.css +32 -23
  28. package/components/AppLauncher/app-launcher.scss +32 -23
  29. package/components/BackToTop/back-to-top.css +2 -2
  30. package/components/BackToTop/back-to-top.scss +2 -2
  31. package/components/Backdrop/backdrop.css +2 -2
  32. package/components/Backdrop/backdrop.scss +2 -2
  33. package/components/BackgroundImage/background-image.css +6 -3
  34. package/components/BackgroundImage/background-image.scss +8 -3
  35. package/components/Badge/badge.css +2 -2
  36. package/components/Badge/badge.scss +2 -2
  37. package/components/Banner/banner.css +5 -5
  38. package/components/Banner/banner.scss +5 -2
  39. package/components/Breadcrumb/breadcrumb.css +9 -3
  40. package/components/Breadcrumb/breadcrumb.scss +8 -3
  41. package/components/Button/button.css +33 -21
  42. package/components/Button/button.scss +35 -23
  43. package/components/Button/themes/dark/button.scss +1 -1
  44. package/components/CalendarMonth/calendar-month.css +25 -15
  45. package/components/CalendarMonth/calendar-month.scss +23 -15
  46. package/components/Card/card.css +25 -17
  47. package/components/Card/card.scss +24 -17
  48. package/components/Check/check.css +2 -2
  49. package/components/Check/check.scss +2 -2
  50. package/components/Chip/chip-group.css +6 -6
  51. package/components/Chip/chip-group.scss +6 -6
  52. package/components/Chip/chip.css +16 -9
  53. package/components/Chip/chip.scss +17 -9
  54. package/components/ClipboardCopy/clipboard-copy.css +19 -10
  55. package/components/ClipboardCopy/clipboard-copy.scss +16 -8
  56. package/components/ClipboardCopy/themes/dark/clipboard-copy.scss +2 -2
  57. package/components/CodeBlock/code-block.css +6 -3
  58. package/components/CodeBlock/code-block.scss +6 -3
  59. package/components/CodeEditor/code-editor.css +31 -22
  60. package/components/CodeEditor/code-editor.scss +30 -21
  61. package/components/CodeEditor/themes/dark/code-editor.scss +1 -1
  62. package/components/Content/content.css +33 -30
  63. package/components/Content/content.scss +33 -30
  64. package/components/ContextSelector/context-selector.css +41 -26
  65. package/components/ContextSelector/context-selector.scss +40 -25
  66. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  67. package/components/DataList/data-list-grid.css +21 -21
  68. package/components/DataList/data-list-grid.scss +3 -3
  69. package/components/DataList/data-list.css +69 -56
  70. package/components/DataList/data-list.scss +47 -35
  71. package/components/DatePicker/date-picker.css +8 -8
  72. package/components/DatePicker/date-picker.scss +8 -8
  73. package/components/DescriptionList/description-list.css +8 -5
  74. package/components/DescriptionList/description-list.scss +8 -5
  75. package/components/DragDrop/drag-drop.css +8 -8
  76. package/components/DragDrop/drag-drop.scss +8 -8
  77. package/components/Drawer/drawer.css +120 -61
  78. package/components/Drawer/drawer.scss +92 -43
  79. package/components/Dropdown/dropdown.css +75 -66
  80. package/components/Dropdown/dropdown.scss +65 -56
  81. package/components/DualListSelector/dual-list-selector.css +29 -15
  82. package/components/DualListSelector/dual-list-selector.scss +30 -15
  83. package/components/EmptyState/empty-state.css +7 -4
  84. package/components/EmptyState/empty-state.scss +7 -4
  85. package/components/ExpandableSection/expandable-section.css +17 -10
  86. package/components/ExpandableSection/expandable-section.scss +15 -10
  87. package/components/FileUpload/file-upload.css +9 -15
  88. package/components/FileUpload/file-upload.scss +9 -15
  89. package/components/Form/form.css +53 -50
  90. package/components/Form/form.scss +46 -44
  91. package/components/FormControl/form-control.css +18 -9
  92. package/components/FormControl/form-control.scss +18 -9
  93. package/components/HelperText/helper-text.css +1 -1
  94. package/components/HelperText/helper-text.scss +1 -1
  95. package/components/Hint/hint.css +9 -6
  96. package/components/Hint/hint.scss +9 -6
  97. package/components/Icon/icon.css +1 -1
  98. package/components/Icon/icon.scss +1 -1
  99. package/components/InlineEdit/inline-edit.css +4 -4
  100. package/components/InlineEdit/inline-edit.scss +4 -4
  101. package/components/InputGroup/input-group.css +12 -6
  102. package/components/InputGroup/input-group.scss +11 -5
  103. package/components/InputGroup/themes/dark/input-group.scss +1 -1
  104. package/components/JumpLinks/jump-links.css +27 -24
  105. package/components/JumpLinks/jump-links.scss +26 -24
  106. package/components/Label/label-group.css +13 -10
  107. package/components/Label/label-group.scss +13 -10
  108. package/components/Label/label.css +9 -9
  109. package/components/Label/label.scss +9 -9
  110. package/components/List/list.css +9 -9
  111. package/components/List/list.scss +9 -9
  112. package/components/LogViewer/log-viewer.css +14 -14
  113. package/components/LogViewer/log-viewer.scss +14 -14
  114. package/components/Login/login.css +36 -27
  115. package/components/Login/login.scss +36 -27
  116. package/components/Masthead/masthead.css +32 -30
  117. package/components/Masthead/masthead.scss +32 -30
  118. package/components/Menu/menu.css +79 -65
  119. package/components/Menu/menu.scss +80 -68
  120. package/components/MenuToggle/menu-toggle.css +33 -27
  121. package/components/MenuToggle/menu-toggle.scss +33 -27
  122. package/components/ModalBox/modal-box.css +19 -19
  123. package/components/ModalBox/modal-box.scss +20 -20
  124. package/components/MultipleFileUpload/multiple-file-upload.css +11 -8
  125. package/components/MultipleFileUpload/multiple-file-upload.scss +11 -8
  126. package/components/Nav/nav.css +120 -93
  127. package/components/Nav/nav.scss +120 -93
  128. package/components/Nav/themes/dark/nav.scss +2 -2
  129. package/components/NotificationBadge/notification-badge.css +13 -7
  130. package/components/NotificationBadge/notification-badge.scss +13 -7
  131. package/components/NotificationDrawer/notification-drawer.css +32 -19
  132. package/components/NotificationDrawer/notification-drawer.scss +30 -19
  133. package/components/NumberInput/number-input.css +2 -2
  134. package/components/NumberInput/number-input.scss +2 -2
  135. package/components/OptionsMenu/options-menu.css +43 -31
  136. package/components/OptionsMenu/options-menu.scss +43 -31
  137. package/components/OverflowMenu/overflow-menu.css +2 -2
  138. package/components/OverflowMenu/overflow-menu.scss +2 -2
  139. package/components/Page/page.css +135 -77
  140. package/components/Page/page.scss +81 -52
  141. package/components/Page/themes/dark/page.scss +1 -1
  142. package/components/Pagination/pagination.css +27 -17
  143. package/components/Pagination/pagination.scss +25 -17
  144. package/components/Panel/panel.css +13 -7
  145. package/components/Panel/panel.scss +13 -7
  146. package/components/Popover/popover.css +72 -40
  147. package/components/Popover/popover.scss +95 -75
  148. package/components/Progress/progress.css +9 -7
  149. package/components/Progress/progress.scss +12 -7
  150. package/components/ProgressStepper/progress-stepper.css +26 -20
  151. package/components/ProgressStepper/progress-stepper.scss +25 -19
  152. package/components/Radio/radio.css +3 -3
  153. package/components/Radio/radio.scss +3 -3
  154. package/components/Select/select.css +56 -47
  155. package/components/Select/select.scss +56 -47
  156. package/components/Sidebar/sidebar.css +11 -5
  157. package/components/Sidebar/sidebar.scss +11 -5
  158. package/components/SimpleList/simple-list.css +10 -4
  159. package/components/SimpleList/simple-list.scss +10 -4
  160. package/components/Skeleton/skeleton.css +6 -5
  161. package/components/Skeleton/skeleton.scss +4 -5
  162. package/components/SkipToContent/skip-to-content.css +3 -3
  163. package/components/SkipToContent/skip-to-content.scss +3 -3
  164. package/components/Slider/slider.css +47 -26
  165. package/components/Slider/slider.scss +56 -28
  166. package/components/Switch/switch.css +9 -5
  167. package/components/Switch/switch.scss +10 -6
  168. package/components/TabContent/tab-content.css +4 -1
  169. package/components/TabContent/tab-content.scss +4 -1
  170. package/components/Table/table-grid.css +264 -203
  171. package/components/Table/table-grid.scss +61 -47
  172. package/components/Table/table-scrollable.css +4 -4
  173. package/components/Table/table-scrollable.scss +6 -4
  174. package/components/Table/table-tree-view.css +112 -105
  175. package/components/Table/table-tree-view.scss +38 -33
  176. package/components/Table/table.css +92 -70
  177. package/components/Table/table.scss +90 -70
  178. package/components/Tabs/tabs.css +76 -48
  179. package/components/Tabs/tabs.scss +74 -48
  180. package/components/TextInputGroup/text-input-group.css +15 -15
  181. package/components/TextInputGroup/text-input-group.scss +15 -15
  182. package/components/Tile/tile.css +10 -10
  183. package/components/Tile/tile.scss +10 -10
  184. package/components/ToggleGroup/toggle-group.css +14 -11
  185. package/components/ToggleGroup/toggle-group.scss +14 -11
  186. package/components/Toolbar/toolbar.css +44 -41
  187. package/components/Toolbar/toolbar.scss +26 -21
  188. package/components/Tooltip/tooltip.css +60 -28
  189. package/components/Tooltip/tooltip.scss +76 -56
  190. package/components/TreeView/tree-view.css +48 -27
  191. package/components/TreeView/tree-view.scss +50 -28
  192. package/components/Truncate/truncate.css +9 -0
  193. package/components/Truncate/truncate.scss +16 -3
  194. package/components/Wizard/wizard.css +57 -36
  195. package/components/Wizard/wizard.scss +57 -36
  196. package/docs/components/Button/examples/Button.css +2 -2
  197. package/docs/components/Button/examples/Button.md +15 -3
  198. package/docs/components/Card/examples/Card.md +15 -15
  199. package/docs/components/Check/examples/Check.md +71 -59
  200. package/docs/components/Chip/examples/Chip.md +1 -1
  201. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  202. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  203. package/docs/components/DragDrop/examples/DragDrop.css +2 -2
  204. package/docs/components/Dropdown/deprecated/Dropdown.css +1 -1
  205. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  206. package/docs/components/Label/examples/Label.md +1 -1
  207. package/docs/components/LogViewer/examples/LogViewer.css +2 -2
  208. package/docs/components/LogViewer/examples/LogViewer.md +120 -30
  209. package/docs/components/Menu/examples/Menu.css +8 -0
  210. package/docs/components/Menu/examples/Menu.md +90 -73
  211. package/docs/components/MenuToggle/examples/MenuToggle.md +60 -39
  212. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  213. package/docs/components/Nav/examples/Navigation.css +4 -21
  214. package/docs/components/Nav/examples/Navigation.md +99 -0
  215. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  216. package/docs/components/Popover/examples/Popover.css +4 -9
  217. package/docs/components/Radio/examples/Radio.md +63 -55
  218. package/docs/components/Select/deprecated/Select.md +184 -177
  219. package/docs/components/Table/examples/Table.css +2 -2
  220. package/docs/components/Table/examples/Table.md +2 -2
  221. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  222. package/docs/components/Tile/examples/Tile.css +1 -1
  223. package/docs/components/Toolbar/examples/Toolbar.md +525 -431
  224. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  225. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  226. package/docs/components/Truncate/examples/Truncate.md +2 -2
  227. package/docs/demos/Card/examples/Card.css +3 -3
  228. package/docs/demos/Card/examples/Card.md +26 -10
  229. package/docs/demos/CardView/examples/CardView.md +24 -20
  230. package/docs/demos/Dashboard/examples/Dashboard.md +3 -3
  231. package/docs/demos/DataList/examples/DataList.md +8 -2
  232. package/docs/demos/Page/examples/Penta.md +528 -500
  233. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -124
  234. package/docs/demos/Skeleton/examples/Skeleton.md +7 -35
  235. package/docs/demos/Table/examples/Table.md +336 -252
  236. package/docs/demos/Tabs/examples/Tabs.md +28 -21
  237. package/docs/demos/Toolbar/examples/Toolbar.css +5 -0
  238. package/docs/demos/Toolbar/examples/Toolbar.md +44 -44
  239. package/docs/layouts/Flex/examples/Flex.md +5 -5
  240. package/docs/utilities/BoxShadow/examples/box-shadow.css +5 -5
  241. package/icons/pficons.mjs +1 -0
  242. package/layouts/Flex/flex.css +115 -43
  243. package/layouts/Flex/flex.scss +20 -8
  244. package/package.json +9 -5
  245. package/patternfly-addons.css +732 -972
  246. package/patternfly-base-no-globals-theme-dark-unversioned.css +298 -191
  247. package/patternfly-base-no-globals.css +298 -191
  248. package/patternfly-base-theme-dark-unversioned.css +299 -192
  249. package/patternfly-base.css +299 -192
  250. package/patternfly-no-globals.css +2977 -2079
  251. package/patternfly-theme-dark-unversioned.css +2978 -2080
  252. package/patternfly.css +2978 -2080
  253. package/patternfly.min.css +1 -1
  254. package/patternfly.min.css.map +1 -1
  255. package/sass-utilities/functions.scss +6 -0
  256. package/sass-utilities/mixins.scss +62 -2
  257. package/sass-utilities/scss-variables.scss +8 -8
  258. package/sass-utilities/themes/dark/mixins.scss +3 -1
  259. package/utilities/Accessibility/accessibility.css +12 -12
  260. package/utilities/Spacing/spacing.css +720 -960
  261. package/utilities/Spacing/spacing.scss +4 -8
package/base/tokens/_tokens-default.scss CHANGED
@@ -1,10 +1,11 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 14 Aug 2023 18:12:00 GMT
3
+ * Generated on Wed, 04 Oct 2023 12:58:15 GMT
4
4
  */
5
5
 
6
- :root {
6
+ :root {
7
7
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
8
+ --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
8
9
  --pf-t--global--spacer--800: 80px;
9
10
  --pf-t--global--spacer--700: 64px;
10
11
  --pf-t--global--spacer--600: 48px;
@@ -14,8 +15,8 @@
14
15
  --pf-t--global--spacer--200: 8px;
15
16
  --pf-t--global--spacer--100: 4px;
16
17
  --pf-t--global--icon--size--400: 56px;
17
- --pf-t--global--icon--size--300: 24px;
18
- --pf-t--global--icon--size--200: 16px;
18
+ --pf-t--global--icon--size--300: 22px;
19
+ --pf-t--global--icon--size--200: 14px;
19
20
  --pf-t--global--icon--size--100: 12px;
20
21
  --pf-t--global--border--width--300: 3px;
21
22
  --pf-t--global--border--width--200: 2px;
@@ -25,19 +26,7 @@
25
26
  --pf-t--global--border--radius--300: 16px;
26
27
  --pf-t--global--border--radius--200: 6px;
27
28
  --pf-t--global--border--radius--100: 4px;
28
- --pf-t--global--border--radius--000: 0px;
29
- --pf-t--global--background--color--highlight--200: var(--pf-t--color--gold--400);
30
- --pf-t--global--background--color--highlight--100: var(--pf-t--color--gold--300);
31
- --pf-t--global--background--color--400: var(--pf-t--color--gray--800);
32
- --pf-t--global--background--color--300: var(--pf-t--color--gray--200);
33
- --pf-t--global--background--color--200: var(--pf-t--color--gray--100);
34
- --pf-t--global--background--color--100: var(--pf-t--color--white);
35
- --pf-t--global--text--color--link--300: var(--pf-t--color--purple--400);
36
- --pf-t--global--text--color--link--200: var(--pf-t--color--blue--500);
37
- --pf-t--global--text--color--link--100: var(--pf-t--color--blue--400);
38
- --pf-t--global--text--color--300: var(--pf-t--color--white);
39
- --pf-t--global--text--color--200: var(--pf-t--color--gray--500);
40
- --pf-t--global--text--color--100: var(--pf-t--color--gray--900);
29
+ --pf-t--global--border--radius--0: 0px;
41
30
  --pf-t--global--color--disabled--300: var(--pf-t--color--gray--600);
42
31
  --pf-t--global--color--disabled--200: var(--pf-t--color--gray--500);
43
32
  --pf-t--global--color--disabled--100: var(--pf-t--color--gray--400);
@@ -83,7 +72,21 @@
83
72
  --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--200);
84
73
  --pf-t--global--color--favorite--200: var(--pf-t--color--gold--500);
85
74
  --pf-t--global--color--favorite--100: var(--pf-t--color--gold--400);
86
- --pf-t--global--spacer--sm: 8px; // TODO these should be base values
75
+ --pf-t--global--text--color--link--300: var(--pf-t--color--purple--400);
76
+ --pf-t--global--text--color--link--200: var(--pf-t--color--blue--500);
77
+ --pf-t--global--text--color--link--100: var(--pf-t--color--blue--400);
78
+ --pf-t--global--text--color--400: var(--pf-t--color--orangered--400);
79
+ --pf-t--global--text--color--300: var(--pf-t--color--white);
80
+ --pf-t--global--text--color--200: var(--pf-t--color--gray--500);
81
+ --pf-t--global--text--color--100: var(--pf-t--color--gray--900);
82
+ --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500);
83
+ --pf-t--global--background--color--highlight--200: var(--pf-t--color--gold--400);
84
+ --pf-t--global--background--color--highlight--100: var(--pf-t--color--gold--300);
85
+ --pf-t--global--background--color--400: var(--pf-t--color--gray--800);
86
+ --pf-t--global--background--color--300: var(--pf-t--color--gray--200);
87
+ --pf-t--global--background--color--200: var(--pf-t--color--gray--100);
88
+ --pf-t--global--background--color--100: var(--pf-t--color--white);
89
+ --pf-t--global--spacer--sm: 8px;
87
90
  --pf-t--global--spacer--xl: 32px;
88
91
  --pf-t--global--spacer--xs: 4px;
89
92
  --pf-t--global--spacer--2xl: 48px;
@@ -95,8 +98,8 @@
95
98
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--500);
96
99
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--900);
97
100
  --pf-t--global--icon--size--sm: 12px;
98
- --pf-t--global--icon--size--md: 16px;
99
- --pf-t--global--icon--size--lg: 24px;
101
+ --pf-t--global--icon--size--md: 14px;
102
+ --pf-t--global--icon--size--lg: 22px;
100
103
  --pf-t--global--icon--size--xl: 56px;
101
104
  --pf-t--global--border--color--200: var(--pf-t--color--gray--400);
102
105
  --pf-t--global--border--color--100: var(--pf-t--color--gray--300);
@@ -109,35 +112,12 @@
109
112
  --pf-t--global--border--width--button--hover: 2px;
110
113
  --pf-t--global--border--width--button--default: 1px;
111
114
  --pf-t--global--border--width--button--active: 2px;
112
- --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500); // changed to base value
113
- --pf-t--global--border--radius--tiny: var(--pf-t--global--border--radius--100); // changed to base value
114
- --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300); // changed to base value
115
- --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400); // changed to base value
116
- --pf-t--global--border--radius--small: var(--pf-t--global--border--radius--200); // changed to base value
117
- --pf-t--global--border--radius--sharp: var(--pf-t--global--border--radius--000); // changed to base value
118
- --pf-t--global--background--color--secondary--selected: var(--pf-t--global--background--color--300);
119
- --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
120
- --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
121
- --pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400);
122
- --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
123
- --pf-t--global--background--color--primary--selected: var(--pf-t--global--background--color--200);
124
- --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100);
125
- --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200);
126
- --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100);
127
- --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200);
128
- --pf-t--global--background--color--floating--selected: var(--pf-t--global--background--color--200);
129
- --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--200);
130
- --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--100);
131
- --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100);
132
- --pf-t--global--background--color--highlight--active: var(--pf-t--global--background--color--highlight--200);
133
- --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100);
134
- --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
135
- --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
136
- --pf-t--global--text--color--disabled--default: var(--pf-t--global--color--disabled--300);
137
- --pf-t--global--text--color--disabled--light: var(--pf-t--global--color--disabled--100);
138
- --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--100);
139
- --pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--200);
140
- --pf-t--global--text--color--link--visited: var(--pf-t--global--text--color--link--300);
115
+ --pf-t--global--border--radius--pill: 999px;
116
+ --pf-t--global--border--radius--tiny: 4px;
117
+ --pf-t--global--border--radius--medium: 16px;
118
+ --pf-t--global--border--radius--large: 24px;
119
+ --pf-t--global--border--radius--small: 6px;
120
+ --pf-t--global--border--radius--sharp: 0px;
141
121
  --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200);
142
122
  --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--300);
143
123
  --pf-t--global--color--brand--active: var(--pf-t--global--color--brand--300);
@@ -186,10 +166,37 @@
186
166
  --pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--100);
187
167
  --pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--200);
188
168
  --pf-t--global--color--favorite--active: var(--pf-t--global--color--favorite--200);
169
+ --pf-t--global--text--color--required: var(--pf-t--global--text--color--400);
170
+ --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100);
171
+ --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
172
+ --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
173
+ --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
174
+ --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--100);
175
+ --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--100);
176
+ --pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--200);
177
+ --pf-t--global--text--color--link--visited: var(--pf-t--global--text--color--link--300);
178
+ --pf-t--global--background--color--secondary--selected: var(--pf-t--global--background--color--300);
179
+ --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
180
+ --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
181
+ --pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400);
182
+ --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
183
+ --pf-t--global--background--color--primary--selected: var(--pf-t--global--background--color--200);
184
+ --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100);
185
+ --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200);
186
+ --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100);
187
+ --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200);
188
+ --pf-t--global--background--color--floating--selected: var(--pf-t--global--background--color--200);
189
+ --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--200);
190
+ --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--100);
191
+ --pf-t--global--background--color--action--plain--alt--selected: var(--pf-t--global--background--color--100);
192
+ --pf-t--global--background--color--action--plain--selected: var(--pf-t--global--background--color--200);
193
+ --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100);
194
+ --pf-t--global--background--color--highlight--active: var(--pf-t--global--background--color--highlight--200);
189
195
  --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100);
190
- --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--300);
196
+ --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
191
197
  --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
192
198
  --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--200);
199
+ --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--100);
193
200
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
194
201
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
195
202
  --pf-t--global--border--color--active: var(--pf-t--global--color--brand--200);
@@ -220,10 +227,9 @@
220
227
  --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--200);
221
228
  --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--300);
222
229
  --pf-t--global--border--color--nonstatus--gray--active: var(--pf-t--global--color--nonstatus--gray--300);
223
- --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
224
- --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
225
- --pf-t--global--text--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
226
- --pf-t--global--text--color--on-brand--active: var(--pf-t--global--icon--color--inverse); // added this
230
+ --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
231
+ --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
232
+ --pf-t--global--text--color--on-brand--active: var(--pf-t--global--text--color--inverse);
227
233
  --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
228
234
  --pf-t--global--text--color--brand--default: var(--pf-t--global--color--brand--default);
229
235
  --pf-t--global--text--color--brand--hover: var(--pf-t--global--color--brand--hover);
@@ -231,19 +237,24 @@
231
237
  --pf-t--global--text--color--status--custom--active: var(--pf-t--global--color--status--custom--active);
232
238
  --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
233
239
  --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
234
- --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
235
- --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
236
- --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse);
237
- --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--icon--color--regular);
238
240
  --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
239
241
  --pf-t--global--text--color--status--info--active: var(--pf-t--global--color--status--info--active);
240
242
  --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
241
- --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
242
- --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
243
- --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse);
244
- --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--icon--color--inverse);
245
- --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
246
- --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
243
+ --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse);
244
+ --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse);
245
+ --pf-t--global--text--color--status--on-info--active: var(--pf-t--global--text--color--inverse);
246
+ --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
247
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
248
+ --pf-t--global--text--color--status--on-danger--active: var(--pf-t--global--icon--color--inverse);
249
+ --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
250
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
251
+ --pf-t--global--text--color--status--on-custom--active: var(--pf-t--global--text--color--inverse);
252
+ --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse);
253
+ --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--regular);
254
+ --pf-t--global--text--color--status--on-warning--active: var(--pf-t--global--text--color--inverse);
255
+ --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
256
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
257
+ --pf-t--global--text--color--status--on-success--active: var(--pf-t--global--text--color--inverse);
247
258
  --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default);
248
259
  --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
249
260
  --pf-t--global--text--color--status--success--active: var(--pf-t--global--color--status--success--active);
@@ -253,38 +264,78 @@
253
264
  --pf-t--global--text--color--status--danger--active: var(--pf-t--global--color--status--danger--active);
254
265
  --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
255
266
  --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
256
- --pf-t--global--text--color--nonstatus--on-gold--hover: var(--pf-t--global--icon--color--regular);
257
- --pf-t--global--text--color--nonstatus--on-gold--default: var(--pf-t--global--icon--color--regular);
258
- --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular);
259
- --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular);
260
- --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular);
261
- --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular);
262
- --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
263
- --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular);
264
- --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular);
265
- --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular);
266
- --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular);
267
- --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular);
268
- --pf-t--global--text--color--nonstatus--on-cyan--default: var(--pf-t--global--icon--color--regular);
269
- --pf-t--global--text--color--nonstatus--on-cyan--hover: var(--pf-t--global--icon--color--regular);
270
- --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular);
271
- --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular);
272
- --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
273
- --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
274
- --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
275
- --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
267
+ --pf-t--global--text--color--nonstatus--on-gold--active: var(--pf-t--global--text--color--regular);
268
+ --pf-t--global--text--color--nonstatus--on-gold--hover: var(--pf-t--global--text--color--regular);
269
+ --pf-t--global--text--color--nonstatus--on-gold--default: var(--pf-t--global--text--color--regular);
270
+ --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--regular);
271
+ --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--regular);
272
+ --pf-t--global--text--color--nonstatus--on-green--active: var(--pf-t--global--text--color--regular);
273
+ --pf-t--global--text--color--nonstatus--on-blue--active: var(--pf-t--global--text--color--regular);
274
+ --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--regular);
275
+ --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--regular);
276
+ --pf-t--global--text--color--nonstatus--on-red--active: var(--pf-t--global--text--color--regular);
277
+ --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular);
278
+ --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--regular);
279
+ --pf-t--global--text--color--nonstatus--on-orangered--active: var(--pf-t--global--text--color--regular);
280
+ --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--regular);
281
+ --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--regular);
282
+ --pf-t--global--text--color--nonstatus--on-orange--active: var(--pf-t--global--text--color--regular);
283
+ --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--regular);
284
+ --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--regular);
285
+ --pf-t--global--text--color--nonstatus--on-cyan--active: var(--pf-t--global--text--color--regular);
286
+ --pf-t--global--text--color--nonstatus--on-cyan--default: var(--pf-t--global--text--color--regular);
287
+ --pf-t--global--text--color--nonstatus--on-cyan--hover: var(--pf-t--global--text--color--regular);
288
+ --pf-t--global--text--color--nonstatus--on-purple--active: var(--pf-t--global--text--color--regular);
289
+ --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--regular);
290
+ --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--regular);
291
+ --pf-t--global--text--color--nonstatus--on-gray--active: var(--pf-t--global--text--color--regular);
292
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
293
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
294
+ --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
276
295
  --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover);
277
296
  --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default);
278
297
  --pf-t--global--icon--color--brand--active: var(--pf-t--global--color--brand--active);
298
+ --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
299
+ --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
300
+ --pf-t--global--icon--color--on-brand--active: var(--pf-t--global--icon--color--inverse);
301
+ --pf-t--global--icon--color--nonstatus--on-orange--active: var(--pf-t--global--icon--color--regular);
302
+ --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular);
303
+ --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular);
304
+ --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular);
305
+ --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular);
306
+ --pf-t--global--icon--color--nonstatus--on-orangered--active: var(--pf-t--global--icon--color--regular);
307
+ --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular);
308
+ --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular);
309
+ --pf-t--global--icon--color--nonstatus--on-blue--active: var(--pf-t--global--icon--color--regular);
310
+ --pf-t--global--icon--color--nonstatus--on-red--active: var(--pf-t--global--icon--color--regular);
311
+ --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular);
312
+ --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
313
+ --pf-t--global--icon--color--nonstatus--on-gold--active: var(--pf-t--global--icon--color--regular);
314
+ --pf-t--global--icon--color--nonstatus--on-gold--default: var(--pf-t--global--icon--color--regular);
315
+ --pf-t--global--icon--color--nonstatus--on-gold--hover: var(--pf-t--global--icon--color--regular);
316
+ --pf-t--global--icon--color--nonstatus--on-green--active: var(--pf-t--global--icon--color--regular);
317
+ --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular);
318
+ --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular);
319
+ --pf-t--global--icon--color--nonstatus--on-cyan--default: var(--pf-t--global--icon--color--regular);
320
+ --pf-t--global--icon--color--nonstatus--on-cyan--active: var(--pf-t--global--icon--color--regular);
321
+ --pf-t--global--icon--color--nonstatus--on-cyan--hover: var(--pf-t--global--icon--color--regular);
322
+ --pf-t--global--icon--color--nonstatus--on-gray--active: var(--pf-t--global--icon--color--regular);
323
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
324
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
325
+ --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular);
326
+ --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular);
327
+ --pf-t--global--icon--color--nonstatus--on-purple--active: var(--pf-t--global--icon--color--regular);
328
+ --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default);
329
+ --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover);
330
+ --pf-t--global--icon--color--favorite--active: var(--pf-t--global--color--favorite--active);
331
+ --pf-t--global--icon--color--status--on-danger--active: var(--pf-t--global--icon--color--inverse);
279
332
  --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
280
333
  --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
281
- --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
282
- --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
283
- --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse);
284
- --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--regular);
334
+ --pf-t--global--icon--color--status--on-custom--active: var(--pf-t--global--icon--color--inverse);
285
335
  --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
286
336
  --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
287
337
  --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse);
338
+ --pf-t--global--icon--color--status--on-info--active: var(--pf-t--global--icon--color--inverse);
288
339
  --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse);
289
340
  --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
290
341
  --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
@@ -301,27 +352,12 @@
301
352
  --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
302
353
  --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
303
354
  --pf-t--global--icon--color--status--info--active: var(--pf-t--global--color--status--info--active);
304
- --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular);
305
- --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular);
306
- --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular);
307
- --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular);
308
- --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular);
309
- --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular);
310
- --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular);
311
- --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
312
- --pf-t--global--icon--color--nonstatus--on-gold--default: var(--pf-t--global--icon--color--regular);
313
- --pf-t--global--icon--color--nonstatus--on-gold--hover: var(--pf-t--global--icon--color--regular);
314
- --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular);
315
- --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular);
316
- --pf-t--global--icon--color--nonstatus--on-cyan--default: var(--pf-t--global--icon--color--regular);
317
- --pf-t--global--icon--color--nonstatus--on-cyan--hover: var(--pf-t--global--icon--color--regular);
318
- --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular);
319
- --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular);
320
- --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
321
- --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
322
- --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default);
323
- --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover);
324
- --pf-t--global--icon--color--favorite--active: var(--pf-t--global--color--favorite--active);
355
+ --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
356
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
357
+ --pf-t--global--icon--color--status--on-success--active: var(--pf-t--global--icon--color--inverse);
358
+ --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse);
359
+ --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--regular);
360
+ --pf-t--global--icon--color--status--on-warning--active: var(--pf-t--global--icon--color--inverse);
325
361
  --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
326
362
  --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
327
363
  --pf-t--global--border--color--brand--active: var(--pf-t--global--color--brand--active);
package/base/tokens/_tokens-font.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  // The ability to make font variables is reportedly coming by the end of the year
5
5
 
6
6
  :root {
7
- // Base tokens for fonts
7
+ // Base tokens for fonts
8
8
  --pf-t--global--font--family--100: redhattext;
9
9
  --pf-t--global--font--family--200: redhatdisplay;
10
10
  --pf-t--global--font--family--300: redhatmono;
@@ -24,7 +24,7 @@
24
24
  --pf-t--global--font--size--heading--500: 28px;
25
25
  --pf-t--global--font--size--heading--600: 36px;
26
26
 
27
- // Semantic tokens for fonts
27
+ // Semantic tokens for fonts
28
28
  --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
29
29
  --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
30
30
  --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
@@ -54,8 +54,7 @@
54
54
 
55
55
  // blend modes
56
56
  --pf-t--global--mix-blend-mode--100: multiply;
57
-
58
- // --pf-t--global--mix-blend-mode--100: screen; For dark mode, use screen
57
+ --pf-t--global--mix-blend-mode--200: screen;
59
58
  --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--100);
60
59
 
61
60
  // semantic border width
@@ -80,15 +79,18 @@
80
79
  --pf-t--global--box-shadow--lg--left: -8px 0px 24px 0px rgb(0 0 0 / 12%);
81
80
  --pf-t--global--box-shadow--lg--right: 8px 0px 24px 0px rgb(0 0 0 / 12%);
82
81
 
83
- // DARK shadows
84
- // TODO: move into a dark token file
85
- // shadows
86
- // --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 50%);
87
- // --pf-t--global--box-shadow--sm-top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
88
- // --pf-t--global--box-shadow--sm-right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
89
- // --pf-t--global--box-shadow--sm-bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
90
- // --pf-t--global--box-shadow--sm-left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
91
- // --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 50%);
92
- // --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 50%);
82
+ &:where(.pf-v5-theme-dark) {
83
+ // blend mode
84
+ --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--200);
93
85
 
86
+ // box shadow
87
+ --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 50%);
88
+ --pf-t--global--box-shadow--sm-top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
89
+ --pf-t--global--box-shadow--sm-right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
90
+ --pf-t--global--box-shadow--sm-bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
91
+ --pf-t--global--box-shadow--sm-left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
92
+ --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 50%);
93
+ --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 50%);
94
+ }
94
95
  }
96
+
package/base/tokens/_tokens-palette.scss CHANGED
@@ -1,10 +1,9 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 14 Aug 2023 18:10:37 GMT
3
+ * Generated on Wed, 04 Oct 2023 12:59:21 GMT
4
4
  */
5
5
 
6
- // stylelint-disable custom-property-pattern
7
- :root {
6
+ :root {
8
7
  --pf-t--color--white: #fff;
9
8
  --pf-t--color--black: #000;
10
9
  --pf-t--color--gray--1000: #151515;
@@ -74,4 +73,3 @@
74
73
  --pf-t--color--red--200: #f69f98;
75
74
  --pf-t--color--red--100: #ffdbd9;
76
75
  }
77
- // stylelint-enable custom-property-pattern
package/components/AboutModalBox/about-modal-box.css CHANGED
@@ -26,6 +26,7 @@
26
26
  --pf-v5-c-about-modal-box--Width: 100%;
27
27
  --pf-v5-c-about-modal-box--sm--GridTemplateColumns: 5fr 1fr;
28
28
  --pf-v5-c-about-modal-box--lg--GridTemplateColumns: 1fr .6fr;
29
+ --pf-v5-c-about-modal-box--BackgroundPosition: bottom right;
29
30
  --pf-v5-c-about-modal-box__brand--PaddingTop: var(--pf-v5-global--spacer--2xl);
30
31
  --pf-v5-c-about-modal-box__brand--PaddingRight: var(--pf-v5-global--spacer--xl);
31
32
  --pf-v5-c-about-modal-box__brand--PaddingLeft: var(--pf-v5-global--spacer--xl);
@@ -78,6 +79,10 @@
78
79
  background-position: var(--pf-v5-c-about-modal-box--BackgroundPosition);
79
80
  background-size: var(--pf-v5-c-about-modal-box--BackgroundSize);
80
81
  }
82
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-about-modal-box {
83
+ --pf-v5-c-about-modal-box--BackgroundPosition: bottom left;
84
+ }
85
+
81
86
  @media screen and (min-width: 576px) {
82
87
  .pf-v5-c-about-modal-box {
83
88
  --pf-v5-c-about-modal-box__brand--PaddingRight: var(--pf-v5-c-about-modal-box__brand--sm--PaddingRight);
@@ -132,7 +137,10 @@
132
137
  .pf-v5-c-about-modal-box__brand {
133
138
  display: flex;
134
139
  grid-area: brand;
135
- padding: var(--pf-v5-c-about-modal-box__brand--PaddingTop) var(--pf-v5-c-about-modal-box__brand--PaddingRight) var(--pf-v5-c-about-modal-box__brand--PaddingBottom) var(--pf-v5-c-about-modal-box__brand--PaddingLeft);
140
+ padding-block-start: var(--pf-v5-c-about-modal-box__brand--PaddingTop);
141
+ padding-block-end: var(--pf-v5-c-about-modal-box__brand--PaddingBottom);
142
+ padding-inline-start: var(--pf-v5-c-about-modal-box__brand--PaddingLeft);
143
+ padding-inline-end: var(--pf-v5-c-about-modal-box__brand--PaddingRight);
136
144
  }
137
145
 
138
146
  .pf-v5-c-about-modal-box__brand-image {
@@ -143,14 +151,14 @@
143
151
  display: flex;
144
152
  flex-direction: column;
145
153
  grid-area: header;
146
- padding-right: var(--pf-v5-c-about-modal-box__header--PaddingRight);
147
- padding-bottom: var(--pf-v5-c-about-modal-box__header--PaddingBottom);
148
- padding-left: var(--pf-v5-c-about-modal-box__header--PaddingLeft);
154
+ padding-block-end: var(--pf-v5-c-about-modal-box__header--PaddingBottom);
155
+ padding-inline-start: var(--pf-v5-c-about-modal-box__header--PaddingLeft);
156
+ padding-inline-end: var(--pf-v5-c-about-modal-box__header--PaddingRight);
149
157
  }
150
158
 
151
159
  .pf-v5-c-about-modal-box__strapline {
152
- padding-top: var(--pf-v5-c-about-modal-box__strapline--PaddingTop);
153
- margin-top: auto;
160
+ padding-block-start: var(--pf-v5-c-about-modal-box__strapline--PaddingTop);
161
+ margin-block-start: auto;
154
162
  font-size: var(--pf-v5-c-about-modal-box__strapline--FontSize);
155
163
  }
156
164
 
@@ -158,12 +166,15 @@
158
166
  display: flex;
159
167
  flex-direction: column;
160
168
  grid-area: content;
161
- margin: var(--pf-v5-c-about-modal-box__content--MarginTop) var(--pf-v5-c-about-modal-box__content--MarginRight) var(--pf-v5-c-about-modal-box__content--MarginBottom) var(--pf-v5-c-about-modal-box__content--MarginLeft);
169
+ margin-block-start: var(--pf-v5-c-about-modal-box__content--MarginTop);
170
+ margin-block-end: var(--pf-v5-c-about-modal-box__content--MarginBottom);
171
+ margin-inline-start: var(--pf-v5-c-about-modal-box__content--MarginLeft);
172
+ margin-inline-end: var(--pf-v5-c-about-modal-box__content--MarginRight);
162
173
  overflow-x: hidden;
163
174
  overflow-y: auto;
164
175
  overscroll-behavior: contain;
165
- -webkit-overflow-scrolling: touch;
166
176
  word-break: break-word;
177
+ -webkit-overflow-scrolling: touch;
167
178
  }
168
179
  @media screen and (min-width: 576px) {
169
180
  .pf-v5-c-about-modal-box__content {
@@ -174,14 +185,14 @@
174
185
 
175
186
  .pf-v5-c-about-modal-box__close {
176
187
  position: sticky;
177
- top: 0;
188
+ inset-block-start: 0;
178
189
  display: flex;
179
190
  grid-area: close;
180
191
  align-items: flex-start;
181
192
  justify-content: flex-end;
182
- padding-top: var(--pf-v5-c-about-modal-box__close--PaddingTop);
183
- padding-right: var(--pf-v5-c-about-modal-box__close--PaddingRight);
184
- padding-bottom: var(--pf-v5-c-about-modal-box__close--PaddingBottom);
193
+ padding-block-start: var(--pf-v5-c-about-modal-box__close--PaddingTop);
194
+ padding-block-end: var(--pf-v5-c-about-modal-box__close--PaddingBottom);
195
+ padding-inline-end: var(--pf-v5-c-about-modal-box__close--PaddingRight);
185
196
  }
186
197
  @media only screen and (min-width: 576px) {
187
198
  .pf-v5-c-about-modal-box__close {
package/components/AboutModalBox/about-modal-box.scss CHANGED
@@ -15,6 +15,13 @@
15
15
  --#{$about-modal-box}--sm--GridTemplateColumns: 5fr 1fr;
16
16
  --#{$about-modal-box}--lg--GridTemplateColumns: 1fr .6fr;
17
17
 
18
+ @include pf-v5-bidirectional-style(
19
+ $prop: --#{$about-modal-box}--BackgroundPosition,
20
+ $ltr-val: bottom right,
21
+ $rtl-val: bottom left
22
+ );
23
+
24
+
18
25
  // Brand
19
26
  --#{$about-modal-box}__brand--PaddingTop: var(--#{$pf-global}--spacer--2xl);
20
27
  --#{$about-modal-box}__brand--PaddingRight: var(--#{$pf-global}--spacer--xl);
@@ -137,7 +144,10 @@
137
144
  .#{$about-modal-box}__brand {
138
145
  display: flex;
139
146
  grid-area: brand;
140
- padding: var(--#{$about-modal-box}__brand--PaddingTop) var(--#{$about-modal-box}__brand--PaddingRight) var(--#{$about-modal-box}__brand--PaddingBottom) var(--#{$about-modal-box}__brand--PaddingLeft);
147
+ padding-block-start: var(--#{$about-modal-box}__brand--PaddingTop);
148
+ padding-block-end: var(--#{$about-modal-box}__brand--PaddingBottom);
149
+ padding-inline-start: var(--#{$about-modal-box}__brand--PaddingLeft);
150
+ padding-inline-end: var(--#{$about-modal-box}__brand--PaddingRight);
141
151
  }
142
152
 
143
153
  .#{$about-modal-box}__brand-image {
@@ -149,15 +159,15 @@
149
159
  display: flex;
150
160
  flex-direction: column;
151
161
  grid-area: header;
152
- padding-right: var(--#{$about-modal-box}__header--PaddingRight);
153
- padding-bottom: var(--#{$about-modal-box}__header--PaddingBottom);
154
- padding-left: var(--#{$about-modal-box}__header--PaddingLeft);
162
+ padding-block-end: var(--#{$about-modal-box}__header--PaddingBottom);
163
+ padding-inline-start: var(--#{$about-modal-box}__header--PaddingLeft);
164
+ padding-inline-end: var(--#{$about-modal-box}__header--PaddingRight);
155
165
  }
156
166
 
157
167
  // Strapline
158
168
  .#{$about-modal-box}__strapline {
159
- padding-top: var(--#{$about-modal-box}__strapline--PaddingTop);
160
- margin-top: auto;
169
+ padding-block-start: var(--#{$about-modal-box}__strapline--PaddingTop);
170
+ margin-block-start: auto;
161
171
  font-size: var(--#{$about-modal-box}__strapline--FontSize);
162
172
  }
163
173
 
@@ -166,12 +176,15 @@
166
176
  display: flex;
167
177
  flex-direction: column;
168
178
  grid-area: content;
169
- margin: var(--#{$about-modal-box}__content--MarginTop) var(--#{$about-modal-box}__content--MarginRight) var(--#{$about-modal-box}__content--MarginBottom) var(--#{$about-modal-box}__content--MarginLeft); // Using margin instead of padding to prevent scrollbar extending to top of content block
179
+ margin-block-start: var(--#{$about-modal-box}__content--MarginTop);
180
+ margin-block-end: var(--#{$about-modal-box}__content--MarginBottom);
181
+ margin-inline-start: var(--#{$about-modal-box}__content--MarginLeft); // Using margin instead of padding to prevent scrollbar extending to top of content block
182
+ margin-inline-end: var(--#{$about-modal-box}__content--MarginRight);
170
183
  overflow-x: hidden;
171
184
  overflow-y: auto;
172
185
  overscroll-behavior: contain;
173
- -webkit-overflow-scrolling: touch;
174
186
  word-break: break-word;
187
+ -webkit-overflow-scrolling: touch;
175
188
 
176
189
  @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
177
190
  overflow: visible;
@@ -182,14 +195,14 @@
182
195
  // Close
183
196
  .#{$about-modal-box}__close {
184
197
  position: sticky;
185
- top: 0;
198
+ inset-block-start: 0;
186
199
  display: flex;
187
200
  grid-area: close;
188
201
  align-items: flex-start;
189
202
  justify-content: flex-end;
190
- padding-top: var(--#{$about-modal-box}__close--PaddingTop);
191
- padding-right: var(--#{$about-modal-box}__close--PaddingRight);
192
- padding-bottom: var(--#{$about-modal-box}__close--PaddingBottom);
203
+ padding-block-start: var(--#{$about-modal-box}__close--PaddingTop);
204
+ padding-block-end: var(--#{$about-modal-box}__close--PaddingBottom);
205
+ padding-inline-end: var(--#{$about-modal-box}__close--PaddingRight);
193
206
 
194
207
  @media only screen and (min-width: $pf-v5-global--breakpoint--sm) {
195
208
  grid-area: 1 / 2;