@patternfly/patternfly 5.0.0-alpha.13 → 5.0.0-alpha.18

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 (177) hide show
  1. package/assets/pficon/pficon.woff +0 -0
  2. package/assets/pficon/pficon.woff2 +0 -0
  3. package/components/Accordion/accordion.css +2 -0
  4. package/components/Accordion/accordion.scss +2 -0
  5. package/components/AppLauncher/app-launcher.css +2 -0
  6. package/components/AppLauncher/app-launcher.scss +2 -0
  7. package/components/Breadcrumb/breadcrumb.css +2 -0
  8. package/components/Breadcrumb/breadcrumb.scss +2 -0
  9. package/components/ContextSelector/context-selector.css +5 -1
  10. package/components/ContextSelector/context-selector.scss +6 -2
  11. package/components/DataList/data-list.css +2 -1
  12. package/components/DataList/data-list.scss +2 -1
  13. package/components/Drawer/drawer.css +13 -13
  14. package/components/Dropdown/dropdown.css +12 -10
  15. package/components/Dropdown/dropdown.scss +2 -0
  16. package/components/ExpandableSection/expandable-section.css +2 -0
  17. package/components/ExpandableSection/expandable-section.scss +2 -0
  18. package/components/Label/label.css +2 -0
  19. package/components/Label/label.scss +2 -0
  20. package/components/Login/login.css +1 -1
  21. package/components/Menu/menu.css +2 -0
  22. package/components/Menu/menu.scss +2 -0
  23. package/components/MenuToggle/menu-toggle.css +2 -0
  24. package/components/MenuToggle/menu-toggle.scss +2 -0
  25. package/components/Page/page.css +60 -60
  26. package/components/Pagination/pagination.css +2 -2
  27. package/components/SearchInput/search-input.css +2 -0
  28. package/components/SearchInput/search-input.scss +2 -0
  29. package/components/Table/table-grid.css +28 -28
  30. package/components/Table/table-tree-view.css +4 -4
  31. package/components/TextInputGroup/text-input-group.css +4 -2
  32. package/components/TextInputGroup/text-input-group.scss +4 -3
  33. package/components/Toolbar/toolbar.css +35 -35
  34. package/components/TreeView/tree-view.css +7 -15
  35. package/components/TreeView/tree-view.scss +7 -18
  36. package/components/Wizard/wizard.css +2 -0
  37. package/components/Wizard/wizard.scss +2 -0
  38. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -13
  39. package/docs/components/Accordion/examples/Accordion.md +12 -12
  40. package/docs/components/ActionList/examples/ActionList.md +6 -6
  41. package/docs/components/Alert/examples/Alert.md +19 -19
  42. package/docs/components/AlertGroup/examples/AlertGroup.md +12 -12
  43. package/docs/components/AppLauncher/examples/application-launcher.md +51 -46
  44. package/docs/components/Avatar/examples/Avatar.md +11 -11
  45. package/docs/components/BackToTop/examples/BackToTop.md +4 -4
  46. package/docs/components/Backdrop/examples/Backdrop.md +4 -4
  47. package/docs/components/BackgroundImage/examples/BackgroundImage.md +4 -4
  48. package/docs/components/Badge/examples/Badge.md +5 -5
  49. package/docs/components/Banner/examples/Banner.md +8 -8
  50. package/docs/components/Brand/examples/Brand.md +9 -9
  51. package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
  52. package/docs/components/Button/examples/Button.md +35 -35
  53. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -32
  54. package/docs/components/Card/examples/Card.md +27 -27
  55. package/docs/components/Check/examples/Check.md +13 -13
  56. package/docs/components/Chip/examples/Chip.md +13 -13
  57. package/docs/components/ChipGroup/examples/ChipGroup.md +15 -15
  58. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
  59. package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
  60. package/docs/components/CodeEditor/examples/CodeEditor.md +56 -33
  61. package/docs/components/Content/examples/Content.md +10 -10
  62. package/docs/components/ContextSelector/examples/context-selector.css +5 -1
  63. package/docs/components/ContextSelector/examples/context-selector.md +86 -80
  64. package/docs/components/DataList/examples/DataList.md +83 -83
  65. package/docs/components/DatePicker/examples/DatePicker.md +10 -10
  66. package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
  67. package/docs/components/Divider/examples/Divider.md +10 -10
  68. package/docs/components/DragDrop/examples/DragDrop.md +5 -5
  69. package/docs/components/Drawer/examples/Drawer.md +43 -43
  70. package/docs/components/Dropdown/examples/Dropdown.css +5 -2
  71. package/docs/components/Dropdown/examples/Dropdown.md +50 -50
  72. package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
  73. package/docs/components/EmptyState/examples/EmptyState.md +19 -19
  74. package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
  75. package/docs/components/FileUpload/examples/FileUpload.md +8 -8
  76. package/docs/components/Form/examples/Form.md +64 -64
  77. package/docs/components/FormControl/examples/FormControl.md +20 -20
  78. package/docs/components/HelperText/examples/HelperText.md +12 -12
  79. package/docs/components/Hint/examples/Hint.md +7 -7
  80. package/docs/components/Icon/examples/Icon.md +10 -10
  81. package/docs/components/InlineEdit/examples/InlineEdit.md +24 -24
  82. package/docs/components/InputGroup/examples/InputGroup.md +10 -10
  83. package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
  84. package/docs/components/Label/examples/Label.md +31 -31
  85. package/docs/components/LabelGroup/examples/LabelGroup.md +22 -22
  86. package/docs/components/List/examples/List.md +18 -18
  87. package/docs/components/LogViewer/examples/LogViewer.md +69 -69
  88. package/docs/components/Login/examples/Login.md +32 -32
  89. package/docs/components/Masthead/examples/masthead.md +9 -9
  90. package/docs/components/Menu/examples/Menu.md +81 -79
  91. package/docs/components/MenuToggle/examples/MenuToggle.md +24 -24
  92. package/docs/components/ModalBox/examples/ModalBox.md +35 -35
  93. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +25 -25
  94. package/docs/components/Nav/examples/Navigation.md +69 -69
  95. package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
  96. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +44 -44
  97. package/docs/components/NumberInput/examples/NumberInput.md +12 -12
  98. package/docs/components/OptionsMenu/examples/options-menu.md +27 -28
  99. package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
  100. package/docs/components/Page/examples/Page.md +54 -54
  101. package/docs/components/Pagination/examples/Pagination.md +27 -27
  102. package/docs/components/Panel/examples/Panel.md +10 -10
  103. package/docs/components/Popover/examples/Popover.md +34 -34
  104. package/docs/components/Progress/examples/Progress.md +31 -31
  105. package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -38
  106. package/docs/components/Radio/examples/Radio.md +11 -11
  107. package/docs/components/SearchInput/examples/SearchInput.md +34 -34
  108. package/docs/components/Select/examples/Select.md +143 -143
  109. package/docs/components/Sidebar/examples/Sidebar.md +14 -14
  110. package/docs/components/SimpleList/examples/SimpleList.md +15 -15
  111. package/docs/components/Skeleton/examples/Skeleton.md +8 -8
  112. package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
  113. package/docs/components/Slider/examples/Slider.md +24 -24
  114. package/docs/components/Spinner/examples/Spinner.md +24 -24
  115. package/docs/components/Switch/examples/Switch.md +19 -19
  116. package/docs/components/TabContent/examples/TabContent.md +13 -13
  117. package/docs/components/Table/examples/Table.md +155 -155
  118. package/docs/components/Tabs/examples/Tabs.md +47 -47
  119. package/docs/components/TextInputGroup/examples/TextInputGroup.md +19 -19
  120. package/docs/components/Tile/examples/Tile.md +15 -15
  121. package/docs/components/Timestamp/examples/Timestamp.md +5 -5
  122. package/docs/components/Title/examples/Title.md +17 -17
  123. package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
  124. package/docs/components/Toolbar/examples/Toolbar.md +113 -113
  125. package/docs/components/Tooltip/examples/Tooltip.md +10 -10
  126. package/docs/components/TreeView/examples/TreeView.md +34 -34
  127. package/docs/components/Truncate/examples/Truncate.md +4 -4
  128. package/docs/components/Wizard/examples/Wizard.md +59 -59
  129. package/docs/demos/AboutModal/examples/AboutModal.md +4 -4
  130. package/docs/demos/Alert/examples/Alert.md +13 -13
  131. package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
  132. package/docs/demos/Banner/examples/Banner.md +8 -8
  133. package/docs/demos/Card/examples/Card.md +7 -7
  134. package/docs/demos/CardView/examples/CardView.md +7 -7
  135. package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
  136. package/docs/demos/Dashboard/examples/Dashboard.md +9 -5
  137. package/docs/demos/DataList/examples/DataList.md +22 -22
  138. package/docs/demos/DescriptionList/examples/DescriptionList.md +12 -12
  139. package/docs/demos/Drawer/examples/Drawer.md +20 -20
  140. package/docs/demos/HelperText/examples/HelperText.md +8 -8
  141. package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
  142. package/docs/demos/Masthead/examples/Masthead.md +29 -29
  143. package/docs/demos/Modal/examples/Modal.md +24 -24
  144. package/docs/demos/Nav/examples/Nav.md +47 -47
  145. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +40 -28
  146. package/docs/demos/Page/examples/Page.md +36 -36
  147. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +32 -32
  148. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +36 -36
  149. package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
  150. package/docs/demos/Table/examples/Table.md +78 -78
  151. package/docs/demos/Tabs/examples/Tabs.md +25 -25
  152. package/docs/demos/Toolbar/examples/Toolbar.md +16 -16
  153. package/docs/demos/Wizard/examples/Wizard.md +54 -54
  154. package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
  155. package/docs/layouts/Flex/examples/Flex.md +98 -98
  156. package/docs/layouts/Gallery/examples/Gallery.md +7 -7
  157. package/docs/layouts/Grid/examples/Grid.md +9 -9
  158. package/docs/layouts/Level/examples/Level.md +5 -5
  159. package/docs/layouts/Split/examples/Split.md +7 -7
  160. package/docs/layouts/Stack/examples/Stack.md +6 -6
  161. package/docs/utilities/Accessibility/examples/Accessibility.md +4 -4
  162. package/docs/utilities/Alignment/examples/Alignment.md +6 -6
  163. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +12 -12
  164. package/docs/utilities/BoxShadow/examples/box-shadow.md +22 -22
  165. package/docs/utilities/Display/examples/Display.md +11 -11
  166. package/docs/utilities/Flex/examples/Flex.md +34 -34
  167. package/docs/utilities/Float/examples/Float.md +4 -4
  168. package/docs/utilities/Sizing/examples/Sizing.md +50 -50
  169. package/docs/utilities/Spacing/examples/Spacing.md +34 -34
  170. package/docs/utilities/Text/examples/Text.md +27 -27
  171. package/icons/{pf-icons.json → pf-icons.mjs} +1 -1
  172. package/layouts/Grid/grid.css +5 -5
  173. package/package.json +56 -61
  174. package/patternfly-no-reset.css +196 -177
  175. package/patternfly.css +196 -177
  176. package/patternfly.min.css +1 -1
  177. package/patternfly.min.css.map +1 -1
package/assets/pficon/pficon.woff CHANGED
Binary file
package/assets/pficon/pficon.woff2 CHANGED
Binary file
package/components/Accordion/accordion.css CHANGED
@@ -23,6 +23,7 @@
23
23
  --pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg);
24
24
  --pf-c-accordion__toggle--after--Width: var(--pf-global--BorderWidth--lg);
25
25
  --pf-c-accordion__toggle--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
26
+ --pf-c-accordion__toggle--BackgroundColor: transparent;
26
27
  --pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg));
27
28
  --pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-global--link--Color);
28
29
  --pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-global--link--Color);
@@ -137,6 +138,7 @@
137
138
  padding: var(--pf-c-accordion__toggle--PaddingTop) var(--pf-c-accordion__toggle--PaddingRight) var(--pf-c-accordion__toggle--PaddingBottom) var(--pf-c-accordion__toggle--PaddingLeft);
138
139
  font-family: var(--pf-c-accordion__toggle--FontFamily, inherit);
139
140
  font-size: var(--pf-c-accordion__toggle--FontSize, inherit);
141
+ background-color: var(--pf-c-accordion__toggle--BackgroundColor);
140
142
  border: 0;
141
143
  }
142
144
  .pf-c-accordion__toggle::after {
package/components/Accordion/accordion.scss CHANGED
@@ -16,6 +16,7 @@
16
16
  --pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg);
17
17
  --pf-c-accordion__toggle--after--Width: var(--pf-global--BorderWidth--lg);
18
18
  --pf-c-accordion__toggle--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
19
+ --pf-c-accordion__toggle--BackgroundColor: transparent;
19
20
 
20
21
  // accordion toggle text
21
22
  --pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg));
@@ -160,6 +161,7 @@
160
161
  padding: var(--pf-c-accordion__toggle--PaddingTop) var(--pf-c-accordion__toggle--PaddingRight) var(--pf-c-accordion__toggle--PaddingBottom) var(--pf-c-accordion__toggle--PaddingLeft);
161
162
  font-family: var(--pf-c-accordion__toggle--FontFamily, inherit);
162
163
  font-size: var(--pf-c-accordion__toggle--FontSize, inherit);
164
+ background-color: var(--pf-c-accordion__toggle--BackgroundColor);
163
165
  border: 0;
164
166
 
165
167
  &::after {
package/components/AppLauncher/app-launcher.css CHANGED
@@ -17,6 +17,7 @@
17
17
  --pf-c-app-launcher__toggle--focus--Color: var(--pf-global--Color--100);
18
18
  --pf-c-app-launcher__toggle--disabled--Color: var(--pf-global--disabled-color--200);
19
19
  --pf-c-app-launcher__toggle--m-expanded--Color: var(--pf-global--Color--100);
20
+ --pf-c-app-launcher__toggle--BackgroundColor: transparent;
20
21
  --pf-c-app-launcher__menu-search--PaddingTop: var(--pf-global--spacer--sm);
21
22
  --pf-c-app-launcher__menu-search--PaddingRight: var(--pf-global--spacer--md);
22
23
  --pf-c-app-launcher__menu-search--PaddingBottom: var(--pf-global--spacer--md);
@@ -79,6 +80,7 @@
79
80
  .pf-c-app-launcher__toggle {
80
81
  padding: var(--pf-c-app-launcher__toggle--PaddingTop) var(--pf-c-app-launcher__toggle--PaddingRight) var(--pf-c-app-launcher__toggle--PaddingBottom) var(--pf-c-app-launcher__toggle--PaddingLeft);
81
82
  color: var(--pf-c-app-launcher__toggle--Color);
83
+ background-color: var(--pf-c-app-launcher__toggle--BackgroundColor);
82
84
  border: none;
83
85
  }
84
86
  .pf-c-app-launcher__toggle:hover {
package/components/AppLauncher/app-launcher.scss CHANGED
@@ -23,6 +23,7 @@
23
23
  --pf-c-app-launcher__toggle--focus--Color: var(--pf-global--Color--100);
24
24
  --pf-c-app-launcher__toggle--disabled--Color: var(--pf-global--disabled-color--200);
25
25
  --pf-c-app-launcher__toggle--m-expanded--Color: var(--pf-global--Color--100);
26
+ --pf-c-app-launcher__toggle--BackgroundColor: transparent;
26
27
 
27
28
  // Menu input
28
29
  --pf-c-app-launcher__menu-search--PaddingTop: var(--pf-global--spacer--sm);
@@ -104,6 +105,7 @@
104
105
  .pf-c-app-launcher__toggle {
105
106
  padding: var(--pf-c-app-launcher__toggle--PaddingTop) var(--pf-c-app-launcher__toggle--PaddingRight) var(--pf-c-app-launcher__toggle--PaddingBottom) var(--pf-c-app-launcher__toggle--PaddingLeft);
106
107
  color: var(--pf-c-app-launcher__toggle--Color);
108
+ background-color: var(--pf-c-app-launcher__toggle--BackgroundColor);
107
109
  border: none;
108
110
 
109
111
  &:hover {
package/components/Breadcrumb/breadcrumb.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --pf-c-breadcrumb__link--hover--Color: var(--pf-global--link--Color--hover);
11
11
  --pf-c-breadcrumb__link--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
12
12
  --pf-c-breadcrumb__link--m-current--Color: var(--pf-global--Color--100);
13
+ --pf-c-breadcrumb__link--BackgroundColor: transparent;
13
14
  --pf-c-breadcrumb__heading--FontSize: var(--pf-global--FontSize--sm);
14
15
  --pf-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
15
16
  --pf-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-c-breadcrumb__item--MarginRight) * -1);
@@ -52,6 +53,7 @@
52
53
  color: var(--pf-c-breadcrumb__link--Color);
53
54
  text-decoration: var(--pf-c-breadcrumb__link--TextDecoration);
54
55
  word-break: break-word;
56
+ background-color: var(--pf-c-breadcrumb__link--BackgroundColor);
55
57
  }
56
58
  .pf-c-breadcrumb__link:hover {
57
59
  --pf-c-breadcrumb__link--Color: var(--pf-c-breadcrumb__link--hover--Color);
package/components/Breadcrumb/breadcrumb.scss CHANGED
@@ -15,6 +15,7 @@
15
15
  --pf-c-breadcrumb__link--hover--Color: var(--pf-global--link--Color--hover);
16
16
  --pf-c-breadcrumb__link--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
17
17
  --pf-c-breadcrumb__link--m-current--Color: var(--pf-global--Color--100);
18
+ --pf-c-breadcrumb__link--BackgroundColor: transparent;
18
19
 
19
20
  // Heading
20
21
  --pf-c-breadcrumb__heading--FontSize: var(--pf-global--FontSize--sm);
@@ -69,6 +70,7 @@
69
70
  color: var(--pf-c-breadcrumb__link--Color);
70
71
  text-decoration: var(--pf-c-breadcrumb__link--TextDecoration);
71
72
  word-break: break-word;
73
+ background-color: var(--pf-c-breadcrumb__link--BackgroundColor);
72
74
 
73
75
  &:hover {
74
76
  --pf-c-breadcrumb__link--Color: var(--pf-c-breadcrumb__link--hover--Color);
package/components/ContextSelector/context-selector.css CHANGED
@@ -26,6 +26,7 @@
26
26
  --pf-c-context-selector__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
27
27
  --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
28
28
  --pf-c-context-selector__toggle--expanded--BorderBottomColor: var(--pf-global--active-color--100);
29
+ --pf-c-context-selector__toggle--BackgroundColor: transparent;
29
30
  --pf-c-context-selector__toggle--m-plain--Color: var(--pf-global--Color--200);
30
31
  --pf-c-context-selector__toggle--m-plain--hover--Color: var(--pf-global--Color--100);
31
32
  --pf-c-context-selector__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
@@ -64,6 +65,7 @@
64
65
  --pf-c-context-selector__menu-list-item--PaddingRight: var(--pf-global--spacer--lg);
65
66
  --pf-c-context-selector__menu-list-item--PaddingBottom: var(--pf-global--spacer--sm);
66
67
  --pf-c-context-selector__menu-list-item--PaddingLeft: var(--pf-global--spacer--lg);
68
+ --pf-c-context-selector__menu-list-item--BackgroundColor: transparent;
67
69
  --pf-c-context-selector__menu-list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
68
70
  --pf-c-context-selector__menu-list-item--disabled--Color: var(--pf-global--Color--dark-200);
69
71
  --pf-c-context-selector__menu-item-icon--Color: var(--pf-global--active-color--100);
@@ -175,6 +177,7 @@
175
177
  color: var(--pf-c-context-selector__toggle--Color);
176
178
  white-space: nowrap;
177
179
  cursor: pointer;
180
+ background-color: var(--pf-c-context-selector__toggle--BackgroundColor);
178
181
  border: none;
179
182
  }
180
183
  .pf-c-context-selector__toggle::before {
@@ -283,11 +286,12 @@
283
286
  padding: var(--pf-c-context-selector__menu-list-item--PaddingTop) var(--pf-c-context-selector__menu-list-item--PaddingRight) var(--pf-c-context-selector__menu-list-item--PaddingBottom) var(--pf-c-context-selector__menu-list-item--PaddingLeft);
284
287
  color: var(--pf-c-context-selector__menu-list-item--Color);
285
288
  white-space: nowrap;
289
+ background-color: var(--pf-c-context-selector__menu-list-item--BackgroundColor);
286
290
  border: none;
287
291
  }
288
292
  .pf-c-context-selector__menu-list-item:hover, .pf-c-context-selector__menu-list-item:focus {
293
+ --pf-c-context-selector__menu-list-item--BackgroundColor: var(--pf-c-context-selector__menu-list-item--hover--BackgroundColor);
289
294
  text-decoration: none;
290
- background-color: var(--pf-c-context-selector__menu-list-item--hover--BackgroundColor);
291
295
  }
292
296
  .pf-c-context-selector__menu-list-item.pf-m-disabled, .pf-c-context-selector__menu-list-item:disabled {
293
297
  --pf-c-context-selector__menu-list-item--Color: var(--pf-c-context-selector__menu-list-item--disabled--Color);
package/components/ContextSelector/context-selector.scss CHANGED
@@ -19,6 +19,7 @@
19
19
  --pf-c-context-selector__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
20
20
  --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
21
21
  --pf-c-context-selector__toggle--expanded--BorderBottomColor: var(--pf-global--active-color--100);
22
+ --pf-c-context-selector__toggle--BackgroundColor: transparent;
22
23
  --pf-c-context-selector__toggle--m-plain--Color: var(--pf-global--Color--200);
23
24
  --pf-c-context-selector__toggle--m-plain--hover--Color: var(--pf-global--Color--100);
24
25
  --pf-c-context-selector__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
@@ -71,6 +72,7 @@
71
72
  --pf-c-context-selector__menu-list-item--PaddingRight: var(--pf-global--spacer--lg);
72
73
  --pf-c-context-selector__menu-list-item--PaddingBottom: var(--pf-global--spacer--sm);
73
74
  --pf-c-context-selector__menu-list-item--PaddingLeft: var(--pf-global--spacer--lg);
75
+ --pf-c-context-selector__menu-list-item--BackgroundColor: transparent;
74
76
  --pf-c-context-selector__menu-list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
75
77
  --pf-c-context-selector__menu-list-item--disabled--Color: var(--pf-global--Color--dark-200);
76
78
 
@@ -199,6 +201,7 @@
199
201
  color: var(--pf-c-context-selector__toggle--Color);
200
202
  white-space: nowrap;
201
203
  cursor: pointer;
204
+ background-color: var(--pf-c-context-selector__toggle--BackgroundColor);
202
205
  border: none;
203
206
 
204
207
  &::before {
@@ -335,13 +338,14 @@
335
338
  padding: var(--pf-c-context-selector__menu-list-item--PaddingTop) var(--pf-c-context-selector__menu-list-item--PaddingRight) var(--pf-c-context-selector__menu-list-item--PaddingBottom) var(--pf-c-context-selector__menu-list-item--PaddingLeft);
336
339
  color: var(--pf-c-context-selector__menu-list-item--Color);
337
340
  white-space: nowrap;
341
+ background-color: var(--pf-c-context-selector__menu-list-item--BackgroundColor);
338
342
  border: none;
339
343
 
340
-
341
344
  &:hover,
342
345
  &:focus {
346
+ --pf-c-context-selector__menu-list-item--BackgroundColor: var(--pf-c-context-selector__menu-list-item--hover--BackgroundColor);
347
+
343
348
  text-decoration: none;
344
- background-color: var(--pf-c-context-selector__menu-list-item--hover--BackgroundColor);
345
349
  }
346
350
 
347
351
  &.pf-m-disabled,
package/components/DataList/data-list.css CHANGED
@@ -546,6 +546,7 @@
546
546
  --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
547
547
  --pf-c-data-list__toggle-icon--Rotate: 0;
548
548
  --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
549
+ --pf-c-data-list__item-draggable-button--BackgroundColor: transparent;
549
550
  --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
550
551
  --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
551
552
  --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
@@ -617,7 +618,6 @@
617
618
  font-size: var(--pf-c-data-list--FontSize);
618
619
  line-height: var(--pf-c-data-list--LineHeight);
619
620
  overflow-wrap: break-word;
620
- list-style-type: disc;
621
621
  border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
622
622
  }
623
623
  @media screen and (min-width: 576px) {
@@ -790,6 +790,7 @@
790
790
  flex-direction: column;
791
791
  padding: var(--pf-c-data-list__item-draggable-button--PaddingTop) var(--pf-c-data-list__item-draggable-button--PaddingRight) var(--pf-c-data-list__item-draggable-button--PaddingBottom) var(--pf-c-data-list__item-draggable-button--PaddingLeft);
792
792
  margin: var(--pf-c-data-list__item-draggable-button--MarginTop) 0 var(--pf-c-data-list__item-draggable-button--MarginBottom) var(--pf-c-data-list__item-draggable-button--MarginLeft);
793
+ background-color: var(--pf-c-data-list__item-draggable-button--BackgroundColor);
793
794
  border: 0;
794
795
  }
795
796
  .pf-c-data-list__item-draggable-button:hover {
package/components/DataList/data-list.scss CHANGED
@@ -83,6 +83,7 @@
83
83
  --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
84
84
 
85
85
  // draggable button/icon
86
+ --pf-c-data-list__item-draggable-button--BackgroundColor: transparent;
86
87
  --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
87
88
  --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
88
89
  --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
@@ -167,7 +168,6 @@
167
168
  font-size: var(--pf-c-data-list--FontSize);
168
169
  line-height: var(--pf-c-data-list--LineHeight);
169
170
  overflow-wrap: break-word;
170
- list-style-type: disc;
171
171
  border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
172
172
 
173
173
  &.pf-m-compact {
@@ -349,6 +349,7 @@
349
349
  flex-direction: column; // fixes safari alignment
350
350
  padding: var(--pf-c-data-list__item-draggable-button--PaddingTop) var(--pf-c-data-list__item-draggable-button--PaddingRight) var(--pf-c-data-list__item-draggable-button--PaddingBottom) var(--pf-c-data-list__item-draggable-button--PaddingLeft);
351
351
  margin: var(--pf-c-data-list__item-draggable-button--MarginTop) 0 var(--pf-c-data-list__item-draggable-button--MarginBottom) var(--pf-c-data-list__item-draggable-button--MarginLeft);
352
+ background-color: var(--pf-c-data-list__item-draggable-button--BackgroundColor);
352
353
  border: 0;
353
354
 
354
355
  &:hover {
package/components/Drawer/drawer.css CHANGED
@@ -442,7 +442,7 @@
442
442
  --pf-c-drawer__splitter--after--BorderLeftWidth: 0;
443
443
  }
444
444
  .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-no-border,
445
- .pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-no-border {
445
+ .pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-no-border {
446
446
  --pf-c-drawer--m-expanded__panel--BoxShadow: none;
447
447
  }
448
448
  .pf-c-drawer__splitter {
@@ -531,15 +531,15 @@
531
531
  }
532
532
  @media (min-width: 768px) {
533
533
  .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__content,
534
- .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__content {
534
+ .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__content {
535
535
  flex-shrink: 1;
536
536
  }
537
537
  .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel,
538
- .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel {
538
+ .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel {
539
539
  --pf-c-drawer--m-expanded__panel--BoxShadow: none;
540
540
  }
541
541
  .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
542
- .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
542
+ .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
543
543
  background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
544
544
  }
545
545
  .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__content {
@@ -592,15 +592,15 @@
592
592
  }
593
593
  @media (min-width: 992px) {
594
594
  .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__content,
595
- .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__content {
595
+ .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__content {
596
596
  flex-shrink: 1;
597
597
  }
598
598
  .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel,
599
- .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel {
599
+ .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel {
600
600
  --pf-c-drawer--m-expanded__panel--BoxShadow: none;
601
601
  }
602
602
  .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
603
- .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
603
+ .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
604
604
  background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
605
605
  }
606
606
  .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__content {
@@ -653,15 +653,15 @@
653
653
  }
654
654
  @media (min-width: 1200px) {
655
655
  .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__content,
656
- .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__content {
656
+ .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__content {
657
657
  flex-shrink: 1;
658
658
  }
659
659
  .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel,
660
- .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel {
660
+ .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel {
661
661
  --pf-c-drawer--m-expanded__panel--BoxShadow: none;
662
662
  }
663
663
  .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
664
- .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
664
+ .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
665
665
  background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
666
666
  }
667
667
  .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__content {
@@ -714,15 +714,15 @@
714
714
  }
715
715
  @media (min-width: 1450px) {
716
716
  .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content,
717
- .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content {
717
+ .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content {
718
718
  flex-shrink: 1;
719
719
  }
720
720
  .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel,
721
- .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel {
721
+ .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel {
722
722
  --pf-c-drawer--m-expanded__panel--BoxShadow: none;
723
723
  }
724
724
  .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
725
- .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
725
+ .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
726
726
  background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
727
727
  }
728
728
  .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content {
package/components/Dropdown/dropdown.css CHANGED
@@ -50,6 +50,7 @@
50
50
  --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
51
51
  --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
52
52
  --pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100);
53
+ --pf-c-dropdown__toggle-button--BackgroundColor: transparent;
53
54
  --pf-c-dropdown__toggle-progress--Visibility: hidden;
54
55
  --pf-c-dropdown__toggle-progress--c-spinner--diameter: var(--pf-global--FontSize--sm);
55
56
  --pf-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-global--spacer--form-element);
@@ -275,6 +276,7 @@
275
276
  }
276
277
  .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-button {
277
278
  color: var(--pf-c-dropdown__toggle-button--Color);
279
+ background-color: var(--pf-c-dropdown__toggle-button--BackgroundColor);
278
280
  border: 0;
279
281
  }
280
282
  .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-text {
@@ -509,51 +511,51 @@
509
511
  }
510
512
  @media (min-width: 576px) {
511
513
  .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-sm,
512
- .pf-c-dropdown__menu.pf-m-align-right-on-sm {
514
+ .pf-c-dropdown__menu.pf-m-align-right-on-sm {
513
515
  right: 0;
514
516
  }
515
517
  .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-sm,
516
- .pf-c-dropdown__menu.pf-m-align-left-on-sm {
518
+ .pf-c-dropdown__menu.pf-m-align-left-on-sm {
517
519
  right: auto;
518
520
  }
519
521
  }
520
522
  @media (min-width: 768px) {
521
523
  .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-md,
522
- .pf-c-dropdown__menu.pf-m-align-right-on-md {
524
+ .pf-c-dropdown__menu.pf-m-align-right-on-md {
523
525
  right: 0;
524
526
  }
525
527
  .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-md,
526
- .pf-c-dropdown__menu.pf-m-align-left-on-md {
528
+ .pf-c-dropdown__menu.pf-m-align-left-on-md {
527
529
  right: auto;
528
530
  }
529
531
  }
530
532
  @media (min-width: 992px) {
531
533
  .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-lg,
532
- .pf-c-dropdown__menu.pf-m-align-right-on-lg {
534
+ .pf-c-dropdown__menu.pf-m-align-right-on-lg {
533
535
  right: 0;
534
536
  }
535
537
  .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-lg,
536
- .pf-c-dropdown__menu.pf-m-align-left-on-lg {
538
+ .pf-c-dropdown__menu.pf-m-align-left-on-lg {
537
539
  right: auto;
538
540
  }
539
541
  }
540
542
  @media (min-width: 1200px) {
541
543
  .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-xl,
542
- .pf-c-dropdown__menu.pf-m-align-right-on-xl {
544
+ .pf-c-dropdown__menu.pf-m-align-right-on-xl {
543
545
  right: 0;
544
546
  }
545
547
  .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-xl,
546
- .pf-c-dropdown__menu.pf-m-align-left-on-xl {
548
+ .pf-c-dropdown__menu.pf-m-align-left-on-xl {
547
549
  right: auto;
548
550
  }
549
551
  }
550
552
  @media (min-width: 1450px) {
551
553
  .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-2xl,
552
- .pf-c-dropdown__menu.pf-m-align-right-on-2xl {
554
+ .pf-c-dropdown__menu.pf-m-align-right-on-2xl {
553
555
  right: 0;
554
556
  }
555
557
  .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-2xl,
556
- .pf-c-dropdown__menu.pf-m-align-left-on-2xl {
558
+ .pf-c-dropdown__menu.pf-m-align-left-on-2xl {
557
559
  right: auto;
558
560
  }
559
561
  }
package/components/Dropdown/dropdown.scss CHANGED
@@ -61,6 +61,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
61
61
 
62
62
  // toggle button
63
63
  --pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100);
64
+ --pf-c-dropdown__toggle-button--BackgroundColor: transparent;
64
65
 
65
66
  // toggle progress
66
67
  --pf-c-dropdown__toggle-progress--Visibility: hidden;
@@ -360,6 +361,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
360
361
 
361
362
  .pf-c-dropdown__toggle-button {
362
363
  color: var(--pf-c-dropdown__toggle-button--Color);
364
+ background-color: var(--pf-c-dropdown__toggle-button--BackgroundColor);
363
365
  border: 0;
364
366
  }
365
367
 
package/components/ExpandableSection/expandable-section.css CHANGED
@@ -9,6 +9,7 @@
9
9
  --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
10
10
  --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
11
11
  --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
12
+ --pf-c-expandable-section__toggle--BackgroundColor: transparent;
12
13
  --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
13
14
  --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
14
15
  --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
@@ -94,6 +95,7 @@
94
95
  padding: var(--pf-c-expandable-section__toggle--PaddingTop) var(--pf-c-expandable-section__toggle--PaddingRight) var(--pf-c-expandable-section__toggle--PaddingBottom) var(--pf-c-expandable-section__toggle--PaddingLeft);
95
96
  margin-top: var(--pf-c-expandable-section__toggle--MarginTop);
96
97
  color: var(--pf-c-expandable-section__toggle--Color);
98
+ background-color: var(--pf-c-expandable-section__toggle--BackgroundColor);
97
99
  border: none;
98
100
  }
99
101
  .pf-c-expandable-section__toggle:hover {
package/components/ExpandableSection/expandable-section.scss CHANGED
@@ -10,6 +10,7 @@
10
10
  --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
11
11
  --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
12
12
  --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
13
+ --pf-c-expandable-section__toggle--BackgroundColor: transparent;
13
14
 
14
15
  // Toggle icon
15
16
  --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
@@ -123,6 +124,7 @@
123
124
  padding: var(--pf-c-expandable-section__toggle--PaddingTop) var(--pf-c-expandable-section__toggle--PaddingRight) var(--pf-c-expandable-section__toggle--PaddingBottom) var(--pf-c-expandable-section__toggle--PaddingLeft);
124
125
  margin-top: var(--pf-c-expandable-section__toggle--MarginTop);
125
126
  color: var(--pf-c-expandable-section__toggle--Color);
127
+ background-color: var(--pf-c-expandable-section__toggle--BackgroundColor);
126
128
  border: none;
127
129
 
128
130
  &:hover {
package/components/Label/label.css CHANGED
@@ -105,6 +105,7 @@
105
105
  --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
106
106
  --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
107
107
  --pf-c-label__content--Color: var(--pf-global--Color--100);
108
+ --pf-c-label__content--BackgroundColor: transparent;
108
109
  --pf-c-label__content--MaxWidth: 100%;
109
110
  --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
110
111
  --pf-c-label--m-editable__content--MaxWidth: 16ch;
@@ -352,6 +353,7 @@
352
353
  white-space: nowrap;
353
354
  max-width: var(--pf-c-label__content--MaxWidth);
354
355
  color: var(--pf-c-label__content--Color);
356
+ background-color: var(--pf-c-label__content--BackgroundColor);
355
357
  border-width: 0;
356
358
  }
357
359
  .pf-c-label__content::before {
package/components/Label/label.scss CHANGED
@@ -134,6 +134,7 @@
134
134
 
135
135
  // Content
136
136
  --pf-c-label__content--Color: var(--pf-global--Color--100);
137
+ --pf-c-label__content--BackgroundColor: transparent;
137
138
  --pf-c-label__content--MaxWidth: 100%;
138
139
  --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
139
140
  --pf-c-label--m-editable__content--MaxWidth: 16ch;
@@ -417,6 +418,7 @@
417
418
 
418
419
  max-width: var(--pf-c-label__content--MaxWidth);
419
420
  color: var(--pf-c-label__content--Color);
421
+ background-color: var(--pf-c-label__content--BackgroundColor);
420
422
  border-width: 0;
421
423
 
422
424
  &::before {
package/components/Login/login.css CHANGED
@@ -215,7 +215,7 @@
215
215
  }
216
216
  @media (min-width: 768px) {
217
217
  .pf-c-login__main-header-utilities,
218
- .pf-c-login__main-header .pf-c-dropdown {
218
+ .pf-c-login__main-header .pf-c-dropdown {
219
219
  grid-column: 2/3;
220
220
  grid-row: 1;
221
221
  }
package/components/Menu/menu.css CHANGED
@@ -150,6 +150,7 @@
150
150
  --pf-c-menu__item-action--PaddingBottom: var(--pf-global--spacer--sm);
151
151
  --pf-c-menu__item-action--PaddingLeft: var(--pf-global--spacer--md);
152
152
  --pf-c-menu__item-action--Color: var(--pf-global--Color--200);
153
+ --pf-c-menu__item-action--BackgroundColor: transparent;
153
154
  --pf-c-menu__item-action--hover--Color: var(--pf-global--Color--100);
154
155
  --pf-c-menu__item-action--disabled--Color: var(--pf-global--disabled-color--200);
155
156
  --pf-c-menu__item-action--m-favorited--Color: var(--pf-global--palette--gold-400);
@@ -581,6 +582,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
581
582
  padding-bottom: var(--pf-c-menu__item-action--PaddingBottom);
582
583
  padding-left: var(--pf-c-menu__item-action--PaddingLeft);
583
584
  color: var(--pf-c-menu__item-action--Color);
585
+ background-color: var(--pf-c-menu__item-action--BackgroundColor);
584
586
  border: none;
585
587
  }
586
588
  .pf-c-menu__item-action.pf-m-favorite .pf-c-menu__item-action-icon {
package/components/Menu/menu.scss CHANGED
@@ -141,6 +141,7 @@
141
141
  --pf-c-menu__item-action--PaddingBottom: var(--pf-global--spacer--sm);
142
142
  --pf-c-menu__item-action--PaddingLeft: var(--pf-global--spacer--md);
143
143
  --pf-c-menu__item-action--Color: var(--pf-global--Color--200);
144
+ --pf-c-menu__item-action--BackgroundColor: transparent;
144
145
  --pf-c-menu__item-action--hover--Color: var(--pf-global--Color--100);
145
146
  --pf-c-menu__item-action--disabled--Color: var(--pf-global--disabled-color--200);
146
147
  --pf-c-menu__item-action--m-favorited--Color: var(--pf-global--palette--gold-400);
@@ -702,6 +703,7 @@
702
703
  padding-bottom: var(--pf-c-menu__item-action--PaddingBottom);
703
704
  padding-left: var(--pf-c-menu__item-action--PaddingLeft);
704
705
  color: var(--pf-c-menu__item-action--Color);
706
+ background-color: var(--pf-c-menu__item-action--BackgroundColor);
705
707
  border: none;
706
708
 
707
709
  &.pf-m-favorite {
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -106,6 +106,7 @@
106
106
  --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderLeftColor: var(--pf-global--primary-color--200);
107
107
  --pf-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor: var(--pf-global--primary-color--200);
108
108
  --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
109
+ --pf-c-menu-toggle__button--BackgroundColor: transparent;
109
110
  --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
110
111
  --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
111
112
  --pf-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-global--spacer--md);
@@ -361,6 +362,7 @@
361
362
  --pf-c-menu-toggle__controls--MarginRight: var(--pf-c-menu-toggle__button__controls--MarginRight);
362
363
  --pf-c-menu-toggle__controls--MarginLeft: var(--pf-c-menu-toggle__button__controls--MarginLeft);
363
364
  color: inherit;
365
+ background-color: var(--pf-c-menu-toggle__button--BackgroundColor);
364
366
  border: 0;
365
367
  }
366
368
 
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -149,6 +149,7 @@
149
149
  --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
150
150
 
151
151
  // Split button, controls, check
152
+ --pf-c-menu-toggle__button--BackgroundColor: transparent;
152
153
  --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
153
154
  --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
154
155
 
@@ -502,6 +503,7 @@
502
503
  --pf-c-menu-toggle__controls--MarginLeft: var(--pf-c-menu-toggle__button__controls--MarginLeft);
503
504
 
504
505
  color: inherit;
506
+ background-color: var(--pf-c-menu-toggle__button--BackgroundColor);
505
507
  border: 0;
506
508
  }
507
509