@patternfly/react-styles 6.0.0-alpha.1 → 6.0.0-alpha.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/README.md +1 -1
  3. package/css/components/Alert/alert-group.css +20 -16
  4. package/css/components/Alert/alert.css +57 -84
  5. package/css/components/Alert/alert.d.ts +1 -2
  6. package/css/components/Alert/alert.js +1 -2
  7. package/css/components/Alert/alert.mjs +1 -2
  8. package/css/components/Button/button.css +142 -179
  9. package/css/components/Button/button.d.ts +1 -2
  10. package/css/components/Button/button.js +1 -2
  11. package/css/components/Button/button.mjs +1 -2
  12. package/css/components/Content/content.css +67 -67
  13. package/css/components/Drawer/drawer.css +0 -1
  14. package/css/components/Masthead/masthead.css +49 -103
  15. package/css/components/Masthead/masthead.d.ts +1 -6
  16. package/css/components/Masthead/masthead.js +1 -6
  17. package/css/components/Masthead/masthead.mjs +1 -6
  18. package/css/components/MenuToggle/menu-toggle.css +57 -79
  19. package/css/components/Nav/nav.css +42 -40
  20. package/css/components/NotificationBadge/notification-badge.css +56 -81
  21. package/css/components/NotificationBadge/notification-badge.d.ts +1 -5
  22. package/css/components/NotificationBadge/notification-badge.js +1 -5
  23. package/css/components/NotificationBadge/notification-badge.mjs +1 -5
  24. package/css/components/Page/page.css +110 -209
  25. package/css/components/Page/page.d.ts +5 -12
  26. package/css/components/Page/page.js +5 -12
  27. package/css/components/Page/page.mjs +5 -12
  28. package/css/components/Table/table-grid.css +8 -8
  29. package/css/components/Table/table.css +79 -88
  30. package/css/components/Toolbar/toolbar.css +4 -2
  31. package/css/docs/components/Nav/examples/Navigation.css +2 -1
  32. package/css/docs/components/Page/examples/Page.css +0 -8
  33. package/css/docs/components/Page/examples/Page.d.ts +0 -7
  34. package/css/docs/components/Page/examples/Page.js +0 -7
  35. package/css/docs/components/Page/examples/Page.mjs +0 -7
  36. package/css/docs/demos/Toolbar/examples/Toolbar.css +5 -0
  37. package/package.json +3 -3
  38. package/css/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
  39. package/css/docs/components/NotificationBadge/examples/NotificationBadge.d.ts +0 -5
  40. package/css/docs/components/NotificationBadge/examples/NotificationBadge.js +0 -6
  41. package/css/docs/components/NotificationBadge/examples/NotificationBadge.mjs +0 -4
@@ -205,7 +205,6 @@
205
205
  z-index: var(--pf-v5-c-drawer__content--ZIndex);
206
206
  flex-basis: var(--pf-v5-c-drawer__content--FlexBasis);
207
207
  order: 0;
208
- background-color: var(--pf-v5-c-drawer__content--BackgroundColor);
209
208
  }
210
209
  .pf-v5-c-drawer__content.pf-m-no-background {
211
210
  --pf-v5-c-drawer__content--BackgroundColor: transparent;
@@ -1,51 +1,24 @@
1
- .pf-v5-c-masthead.pf-m-light-200, .pf-v5-c-masthead.pf-m-light {
2
- --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
3
- --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
4
- --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
5
- --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
6
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
- --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
- --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
- --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
- --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
11
- }
12
-
13
- .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain, .pf-v5-c-masthead {
14
- --pf-v5-global--Color--100: var(--pf-v5-global--Color--light-100);
15
- --pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200);
16
- --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--light-100);
17
- --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--light-100);
18
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
19
- --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
20
- --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
21
- --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
22
- --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
23
- }
24
- .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain .pf-v5-c-button, .pf-v5-c-masthead .pf-v5-c-button {
25
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
26
- }
27
-
28
- .pf-v5-c-masthead {
1
+ :root {
29
2
  --pf-v5-c-masthead--PaddingLeft: var(--pf-v5-c-masthead--inset);
30
3
  --pf-v5-c-masthead--PaddingRight: var(--pf-v5-c-masthead--inset);
31
- --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
32
- --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--md);
33
- --pf-v5-c-masthead--xl--inset: var(--pf-v5-global--spacer--lg);
4
+ --pf-v5-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
5
+ --pf-v5-c-masthead--inset: var(--pf-t--global--spacer--md);
6
+ --pf-v5-c-masthead--xl--inset: var(--pf-t--global--spacer--lg);
34
7
  --pf-v5-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr;
35
8
  --pf-v5-c-masthead--m-display-stack__main--GridColumn: -1 / 1;
36
9
  --pf-v5-c-masthead--m-display-stack__main--MinHeight: 4.375rem;
37
10
  --pf-v5-c-masthead--m-display-stack__main--Order: -1;
38
11
  --pf-v5-c-masthead--m-display-stack__main--FlexBasis: 100%;
39
- --pf-v5-c-masthead--m-display-stack__main--PaddingTop: var(--pf-v5-global--spacer--sm);
40
- --pf-v5-c-masthead--m-display-stack__main--PaddingBottom: var(--pf-v5-global--spacer--sm);
12
+ --pf-v5-c-masthead--m-display-stack__main--PaddingTop: var(--pf-t--global--spacer--lg);
13
+ --pf-v5-c-masthead--m-display-stack__main--PaddingBottom: var(--pf-t--global--spacer--md);
41
14
  --pf-v5-c-masthead--m-display-stack__main--MarginRight: 0;
42
15
  --pf-v5-c-masthead--m-display-stack__main--before--BorderBottom: var(--pf-v5-c-masthead__main--before--BorderBottomWidth) solid var(--pf-v5-c-masthead__main--before--BorderBottomColor);
43
16
  --pf-v5-c-masthead--m-display-stack__toggle--GridColumn: 1;
44
17
  --pf-v5-c-masthead--m-display-stack__content--GridColumn: 2;
45
18
  --pf-v5-c-masthead--m-display-stack__content--MinHeight: auto;
46
19
  --pf-v5-c-masthead--m-display-stack__content--Order: 1;
47
- --pf-v5-c-masthead--m-display-stack__content--PaddingTop: 0;
48
- --pf-v5-c-masthead--m-display-stack__content--PaddingBottom: 0;
20
+ --pf-v5-c-masthead--m-display-stack__content--PaddingTop: var(--pf-t--global--spacer--xs);
21
+ --pf-v5-c-masthead--m-display-stack__content--PaddingBottom: var(--pf-t--global--spacer--xs);
49
22
  --pf-v5-c-masthead--m-display-stack__content--MarginLeft: 0;
50
23
  --pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight: calc(var(--pf-v5-c-masthead--inset) * -1);
51
24
  --pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft: calc(var(--pf-v5-c-masthead--inset) * -1);
@@ -56,7 +29,7 @@
56
29
  --pf-v5-c-masthead--m-display-inline__main--FlexBasis: auto;
57
30
  --pf-v5-c-masthead--m-display-inline__main--PaddingTop: 0;
58
31
  --pf-v5-c-masthead--m-display-inline__main--PaddingBottom: 0;
59
- --pf-v5-c-masthead--m-display-inline__main--MarginRight: calc(var(--pf-v5-global--spacer--lg) / 2);
32
+ --pf-v5-c-masthead--m-display-inline__main--MarginRight: calc(var(--pf-t--global--spacer--lg) / 2);
60
33
  --pf-v5-c-masthead--m-display-inline__main--BorderBottom: 0;
61
34
  --pf-v5-c-masthead--m-display-inline__toggle--GridColumn: 1;
62
35
  --pf-v5-c-masthead--m-display-inline__content--GridColumn: 3;
@@ -64,22 +37,19 @@
64
37
  --pf-v5-c-masthead--m-display-inline__content--Order: 0;
65
38
  --pf-v5-c-masthead--m-display-inline__content--PaddingTop: 0;
66
39
  --pf-v5-c-masthead--m-display-inline__content--PaddingBottom: 0;
67
- --pf-v5-c-masthead--m-display-inline__content--MarginLeft: calc(var(--pf-v5-global--spacer--lg) / 2);
40
+ --pf-v5-c-masthead--m-display-inline__content--MarginLeft: calc(var(--pf-t--global--spacer--lg) / 2);
68
41
  --pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight: 0;
69
42
  --pf-v5-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft: 0;
70
43
  --pf-v5-c-masthead__main--before--Right: calc(var(--pf-v5-c-masthead--inset) * -1);
71
44
  --pf-v5-c-masthead__main--before--Left: calc(var(--pf-v5-c-masthead--inset) * -1);
72
- --pf-v5-c-masthead__main--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
73
- --pf-v5-c-masthead__main--before--BorderBottomColor: var(--pf-v5-global--palette--black-600);
74
- --pf-v5-c-masthead__toggle--MarginRight: var(--pf-v5-global--spacer--sm);
75
- --pf-v5-c-masthead__toggle--MarginLeft: calc(var(--pf-v5-global--spacer--md) * -1);
76
- --pf-v5-c-masthead__toggle--c-button--FontSize: var(--pf-v5-global--FontSize--2xl);
77
- --pf-v5-c-masthead--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
78
- --pf-v5-c-masthead--m-light__main--BorderBottomColor: var(--pf-v5-global--BorderColor--300);
79
- --pf-v5-c-masthead--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
80
- --pf-v5-c-masthead--m-light-200__main--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
45
+ --pf-v5-c-masthead__main--before--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
46
+ --pf-v5-c-masthead__main--before--BorderBottomColor: var(--pf-t--global--border--color--default);
47
+ --pf-v5-c-masthead__content--Gap: var(--pf-t--global--spacer--sm);
48
+ --pf-v5-c-masthead__toggle--MarginRight: var(--pf-t--global--spacer--sm);
49
+ --pf-v5-c-masthead__toggle--MarginLeft: calc(var(--pf-t--global--spacer--sm) * -1);
50
+ --pf-v5-c-masthead__toggle--c-button--FontSize: var(--pf-t--global--icon--size--lg);
81
51
  --pf-v5-c-masthead--c-toolbar__item--Display: flex;
82
- --pf-v5-c-masthead--item-border-color--base: var(--pf-v5-global--palette--black-800);
52
+ --pf-v5-c-masthead--item-border-color--base: var(--pf-t--global--border--color--default);
83
53
  --pf-v5-c-masthead--c-context-selector--Width: auto;
84
54
  --pf-v5-c-masthead--c-context-selector__toggle--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
85
55
  --pf-v5-c-masthead--c-context-selector__toggle--BorderRightColor: var(--pf-v5-c-masthead--item-border-color--base);
@@ -98,12 +68,34 @@
98
68
  --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
99
69
  --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
100
70
  --pf-v5-c-masthead--c-toolbar__content--PaddingLeft: 0;
101
- --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-v5-global--spacer--md);
71
+ --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-t--global--spacer--md);
102
72
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--inset);
103
- --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
73
+ --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom: var(--pf-t--global--spacer--md);
104
74
  --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--inset);
105
- --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
75
+ --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
106
76
  --pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
77
+ }
78
+
79
+ .pf-v5-c-masthead {
80
+ --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--c-toolbar--BackgroundColor);
81
+ --pf-v5-c-toolbar--AlignItems--base: var(--pf-v5-c-masthead--c-toolbar--AlignItems--base);
82
+ --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__content--PaddingRight);
83
+ --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__content--PaddingLeft);
84
+ --pf-v5-c-toolbar__expandable-content--PaddingTop: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop);
85
+ --pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight);
86
+ --pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom);
87
+ --pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft);
88
+ --pf-v5-c-context-selector--Width: var(--pf-v5-c-masthead--c-context-selector--Width);
89
+ --pf-v5-c-context-selector__toggle--BorderTopColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderTopColor);
90
+ --pf-v5-c-context-selector__toggle--BorderRightColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderRightColor);
91
+ --pf-v5-c-context-selector__toggle--BorderLeftColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderLeftColor);
92
+ --pf-v5-c-dropdown__toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderTopColor);
93
+ --pf-v5-c-dropdown__toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderRightColor);
94
+ --pf-v5-c-dropdown__toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
95
+ --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
96
+ --pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor);
97
+ --pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor);
98
+ --pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: 0;
107
99
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
108
100
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
109
101
  --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-stack__main--MinHeight);
@@ -121,7 +113,6 @@
121
113
  --pf-v5-c-masthead__content--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--MarginLeft);
122
114
  --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginRight: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight);
123
115
  --pf-v5-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-v5-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft);
124
- color: var(--pf-v5-global--Color--100);
125
116
  position: relative;
126
117
  display: grid;
127
118
  grid-template-columns: var(--pf-v5-c-masthead--GridTemplateColumns);
@@ -132,7 +123,7 @@
132
123
  background-color: var(--pf-v5-c-masthead--BackgroundColor);
133
124
  }
134
125
  @media screen and (min-width: 768px) {
135
- .pf-v5-c-page:where(:not(.pf-m-resize-observer)) .pf-v5-c-masthead {
126
+ :where(:not(.pf-m-resize-observer)) .pf-v5-c-masthead {
136
127
  --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-inline--GridTemplateColumns);
137
128
  --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-inline__main--GridColumn);
138
129
  --pf-v5-c-masthead__main--MinHeight: var(--pf-v5-c-masthead--m-display-inline__main--MinHeight);
@@ -157,25 +148,7 @@
157
148
  --pf-v5-c-masthead--inset: var(--pf-v5-c-masthead--xl--inset);
158
149
  }
159
150
  }
160
- .pf-v5-c-masthead.pf-m-light {
161
- color: var(--pf-v5-global--Color--100);
162
- --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-c-masthead--m-light--BackgroundColor);
163
- --pf-v5-c-masthead__main--BorderBottomColor: var(--pf-v5-c-masthead--m-light__main--BorderBottomColor);
164
- }
165
- .pf-v5-c-masthead.pf-m-light-200 {
166
- color: var(--pf-v5-global--Color--100);
167
- --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-c-masthead--m-light-200--BackgroundColor);
168
- --pf-v5-c-masthead__main--BorderBottomColor: var(--pf-v5-c-masthead--m-light-200__main--BorderBottomColor);
169
- }
170
151
  .pf-v5-c-masthead .pf-v5-c-toolbar {
171
- --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--c-toolbar--BackgroundColor);
172
- --pf-v5-c-toolbar--AlignItems--base: var(--pf-v5-c-masthead--c-toolbar--AlignItems--base);
173
- --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__content--PaddingRight);
174
- --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__content--PaddingLeft);
175
- --pf-v5-c-toolbar__expandable-content--PaddingTop: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop);
176
- --pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingRight);
177
- --pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingBottom);
178
- --pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingLeft);
179
152
  width: 100%;
180
153
  }
181
154
  .pf-v5-c-masthead .pf-v5-c-toolbar__content-section {
@@ -191,27 +164,10 @@
191
164
  border-block-start: var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopWidth) solid var(--pf-v5-c-masthead--c-toolbar__expandable-content--before--BorderTopColor);
192
165
  box-shadow: var(--pf-v5-c-toolbar__expandable-content--before--BoxShadow);
193
166
  }
194
- .pf-v5-c-masthead .pf-v5-c-menu-toggle {
195
- --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
196
- --pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor);
197
- --pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor);
198
- --pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: 0;
199
- }
200
- .pf-v5-c-masthead .pf-v5-c-context-selector {
201
- --pf-v5-c-context-selector--Width: var(--pf-v5-c-masthead--c-context-selector--Width);
202
- --pf-v5-c-context-selector__toggle--BorderTopColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderTopColor);
203
- --pf-v5-c-context-selector__toggle--BorderRightColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderRightColor);
204
- --pf-v5-c-context-selector__toggle--BorderLeftColor: var(--pf-v5-c-masthead--c-context-selector__toggle--BorderLeftColor);
205
- }
206
167
  .pf-v5-c-masthead .pf-v5-c-context-selector.pf-m-full-height {
207
168
  --pf-v5-c-context-selector__toggle--BorderTopColor: var(--pf-v5-c-masthead--c-context-selector--m-full-height__toggle--BorderTopColor);
208
169
  --pf-v5-c-context-selector__toggle--BorderBottomColor: var(--pf-v5-c-masthead--c-context-selector--m-full-height__toggle--BorderBottomColor);
209
170
  }
210
- .pf-v5-c-masthead .pf-v5-c-dropdown {
211
- --pf-v5-c-dropdown__toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderTopColor);
212
- --pf-v5-c-dropdown__toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderRightColor);
213
- --pf-v5-c-dropdown__toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-dropdown__toggle--before--BorderLeftColor);
214
- }
215
171
  .pf-v5-c-masthead .pf-v5-c-dropdown.pf-m-full-height {
216
172
  --pf-v5-c-dropdown__toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-dropdown--m-full-height__toggle--before--BorderTopColor);
217
173
  --pf-v5-c-dropdown__toggle--before--BorderBottomColor: var(--pf-v5-c-masthead--c-dropdown--m-full-height__toggle--before--BorderBottomColor);
@@ -219,9 +175,6 @@
219
175
  .pf-v5-c-masthead .pf-v5-c-nav {
220
176
  align-self: stretch;
221
177
  }
222
- .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
223
- color: var(--pf-v5-c-button--m-plain--Color);
224
- }
225
178
 
226
179
  .pf-v5-c-masthead__main {
227
180
  position: relative;
@@ -248,12 +201,18 @@
248
201
  --pf-v5-c-masthead__main--MarginRight: 0;
249
202
  }
250
203
 
204
+ .pf-v5-c-masthead__logo {
205
+ display: flex;
206
+ gap: var(--pf-t--global--spacer--md);
207
+ }
208
+
251
209
  .pf-v5-c-masthead__content {
252
210
  display: flex;
253
211
  flex-grow: 1;
254
212
  flex-shrink: 1;
255
213
  grid-column: var(--pf-v5-c-masthead__content--GridColumn);
256
214
  grid-column-end: -1;
215
+ gap: var(--pf-v5-c-masthead__content--Gap);
257
216
  align-items: center;
258
217
  align-self: stretch;
259
218
  order: var(--pf-v5-c-masthead__content--Order);
@@ -649,17 +608,4 @@
649
608
  .pf-v5-c-masthead.pf-m-inset-2xl-on-2xl {
650
609
  --pf-v5-c-masthead--inset: var(--pf-v5-global--spacer--2xl);
651
610
  }
652
- }
653
-
654
- :where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-button {
655
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
656
- }
657
-
658
- :where(.pf-v5-theme-dark) .pf-v5-c-masthead {
659
- --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-global--palette--black-1000);
660
- --pf-v5-c-masthead--item-border-color--base: var(--pf-v5-global--BorderColor--100);
661
- color: var(--pf-v5-global--Color--100);
662
- }
663
- :where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-toolbar {
664
- --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-global--palette--black-1000);
665
611
  }
@@ -6,13 +6,10 @@ declare const _default: {
6
6
  "masthead": "pf-v5-c-masthead",
7
7
  "mastheadBrand": "pf-v5-c-masthead__brand",
8
8
  "mastheadContent": "pf-v5-c-masthead__content",
9
+ "mastheadLogo": "pf-v5-c-masthead__logo",
9
10
  "mastheadMain": "pf-v5-c-masthead__main",
10
11
  "mastheadToggle": "pf-v5-c-masthead__toggle",
11
- "menuToggle": "pf-v5-c-menu-toggle",
12
12
  "modifiers": {
13
- "light_200": "pf-m-light-200",
14
- "light": "pf-m-light",
15
- "plain": "pf-m-plain",
16
13
  "resizeObserver": "pf-m-resize-observer",
17
14
  "fullHeight": "pf-m-full-height",
18
15
  "horizontal": "pf-m-horizontal",
@@ -66,8 +63,6 @@ declare const _default: {
66
63
  "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
67
64
  },
68
65
  "nav": "pf-v5-c-nav",
69
- "page": "pf-v5-c-page",
70
- "themeDark": "pf-v5-theme-dark",
71
66
  "toolbar": "pf-v5-c-toolbar",
72
67
  "toolbarContentSection": "pf-v5-c-toolbar__content-section",
73
68
  "toolbarExpandableContent": "pf-v5-c-toolbar__expandable-content"
@@ -8,13 +8,10 @@ exports.default = {
8
8
  "masthead": "pf-v5-c-masthead",
9
9
  "mastheadBrand": "pf-v5-c-masthead__brand",
10
10
  "mastheadContent": "pf-v5-c-masthead__content",
11
+ "mastheadLogo": "pf-v5-c-masthead__logo",
11
12
  "mastheadMain": "pf-v5-c-masthead__main",
12
13
  "mastheadToggle": "pf-v5-c-masthead__toggle",
13
- "menuToggle": "pf-v5-c-menu-toggle",
14
14
  "modifiers": {
15
- "light_200": "pf-m-light-200",
16
- "light": "pf-m-light",
17
- "plain": "pf-m-plain",
18
15
  "resizeObserver": "pf-m-resize-observer",
19
16
  "fullHeight": "pf-m-full-height",
20
17
  "horizontal": "pf-m-horizontal",
@@ -68,8 +65,6 @@ exports.default = {
68
65
  "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
69
66
  },
70
67
  "nav": "pf-v5-c-nav",
71
- "page": "pf-v5-c-page",
72
- "themeDark": "pf-v5-theme-dark",
73
68
  "toolbar": "pf-v5-c-toolbar",
74
69
  "toolbarContentSection": "pf-v5-c-toolbar__content-section",
75
70
  "toolbarExpandableContent": "pf-v5-c-toolbar__expandable-content"
@@ -6,13 +6,10 @@ export default {
6
6
  "masthead": "pf-v5-c-masthead",
7
7
  "mastheadBrand": "pf-v5-c-masthead__brand",
8
8
  "mastheadContent": "pf-v5-c-masthead__content",
9
+ "mastheadLogo": "pf-v5-c-masthead__logo",
9
10
  "mastheadMain": "pf-v5-c-masthead__main",
10
11
  "mastheadToggle": "pf-v5-c-masthead__toggle",
11
- "menuToggle": "pf-v5-c-menu-toggle",
12
12
  "modifiers": {
13
- "light_200": "pf-m-light-200",
14
- "light": "pf-m-light",
15
- "plain": "pf-m-plain",
16
13
  "resizeObserver": "pf-m-resize-observer",
17
14
  "fullHeight": "pf-m-full-height",
18
15
  "horizontal": "pf-m-horizontal",
@@ -66,8 +63,6 @@ export default {
66
63
  "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
67
64
  },
68
65
  "nav": "pf-v5-c-nav",
69
- "page": "pf-v5-c-page",
70
- "themeDark": "pf-v5-theme-dark",
71
66
  "toolbar": "pf-v5-c-toolbar",
72
67
  "toolbarContentSection": "pf-v5-c-toolbar__content-section",
73
68
  "toolbarExpandableContent": "pf-v5-c-toolbar__expandable-content"
@@ -1,36 +1,40 @@
1
1
  .pf-v5-c-menu-toggle {
2
- --pf-v5-c-menu-toggle--BorderRadius: 0;
3
- --pf-v5-c-menu-toggle--PaddingTop: var(--pf-v5-global--spacer--form-element);
4
- --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-global--spacer--sm);
5
- --pf-v5-c-menu-toggle--PaddingBottom: var(--pf-v5-global--spacer--form-element);
6
- --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-v5-global--spacer--sm);
7
- --pf-v5-c-menu-toggle--FontSize: var(--pf-v5-global--FontSize--md);
8
- --pf-v5-c-menu-toggle--Color: var(--pf-v5-global--Color--100);
9
- --pf-v5-c-menu-toggle--LineHeight: var(--pf-v5-global--LineHeight--md);
10
- --pf-v5-c-menu-toggle--BackgroundColor: transparent;
11
- --pf-v5-c-menu-toggle--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
12
- --pf-v5-c-menu-toggle--before--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
13
- --pf-v5-c-menu-toggle--before--BorderBottomWidth: 0;
14
- --pf-v5-c-menu-toggle--before--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
15
- --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-global--BorderColor--300);
16
- --pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-v5-global--BorderColor--300);
17
- --pf-v5-c-menu-toggle--before--BorderBottomColor: transparent;
18
- --pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
19
- --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
20
- --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
2
+ --pf-v5-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
3
+ --pf-v5-c-menu-toggle--PaddingTop: var(--pf-t--global--spacer--sm);
4
+ --pf-v5-c-menu-toggle--PaddingRight: var(--pf-t--global--spacer--sm);
5
+ --pf-v5-c-menu-toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
6
+ --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
7
+ --pf-v5-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--md);
8
+ --pf-v5-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
9
+ --pf-v5-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
10
+ --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
11
+ --pf-v5-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
12
+ --pf-v5-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
13
+ --pf-v5-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
14
+ --pf-v5-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
15
+ --pf-v5-c-menu-toggle--active--BorderWidth: var(--pf-t--global--border--width--control--active);
16
+ --pf-v5-c-menu-toggle--active--BorderColor: var(--pf-t--global--border--color--active);
17
+ --pf-v5-c-menu-toggle--before--BorderTopWidth: var(--pf-t--global--border--width--control--default);
18
+ --pf-v5-c-menu-toggle--before--BorderRightWidth: var(--pf-t--global--border--width--control--default);
19
+ --pf-v5-c-menu-toggle--before--BorderBottomWidth: var(--pf-t--global--border--width--control--default);
20
+ --pf-v5-c-menu-toggle--before--BorderLeftWidth: var(--pf-t--global--border--width--control--default);
21
+ --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-t--global--border--color--default);
22
+ --pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-t--global--border--color--default);
23
+ --pf-v5-c-menu-toggle--before--BorderBottomColor: var(--pf-t--global--border--color--default);
24
+ --pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-t--global--border--color--default);
21
25
  --pf-v5-c-menu-toggle--hover--BackgroundColor: transparent;
22
- --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
23
- --pf-v5-c-menu-toggle--hover--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
26
+ --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-t--global--border--width--control--hover);
27
+ --pf-v5-c-menu-toggle--hover--after--BorderBottomColor: var(--pf-t--global--border--color--hover);
24
28
  --pf-v5-c-menu-toggle--focus--BackgroundColor: transparent;
25
- --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
26
- --pf-v5-c-menu-toggle--focus--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
29
+ --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
30
+ --pf-v5-c-menu-toggle--focus--after--BorderBottomColor: var(--pf-t--global--border--color--active);
27
31
  --pf-v5-c-menu-toggle--active--BackgroundColor: transparent;
28
- --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
29
- --pf-v5-c-menu-toggle--active--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
32
+ --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
33
+ --pf-v5-c-menu-toggle--active--after--BorderBottomColor: var(--pf-t--global--border--color--active);
30
34
  --pf-v5-c-menu-toggle--m-expanded--Color: var(--pf-v5-global--Color--100);
31
35
  --pf-v5-c-menu-toggle--m-expanded--BackgroundColor: transparent;
32
- --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
33
- --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
36
+ --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
37
+ --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomColor: var(--pf-t--global--border--color--active);
34
38
  --pf-v5-c-menu-toggle--disabled--Color: var(--pf-v5-global--disabled-color--100);
35
39
  --pf-v5-c-menu-toggle--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
36
40
  --pf-v5-c-menu-toggle--m-primary--Color: var(--pf-v5-global--Color--light-100);
@@ -63,20 +67,19 @@
63
67
  --pf-v5-c-menu-toggle--m-plain--active--Color: var(--pf-v5-global--Color--100);
64
68
  --pf-v5-c-menu-toggle--m-plain--disabled--Color: var(--pf-v5-global--disabled-color--200);
65
69
  --pf-v5-c-menu-toggle--m-plain--m-expanded--Color: var(--pf-v5-global--Color--100);
66
- --pf-v5-c-menu-toggle__icon--MarginRight: var(--pf-v5-global--spacer--sm);
67
- --pf-v5-c-menu-toggle__count--MarginLeft: var(--pf-v5-global--spacer--sm);
68
- --pf-v5-c-menu-toggle__controls--PaddingLeft: var(--pf-v5-global--spacer--md);
70
+ --pf-v5-c-menu-toggle__icon--MarginRight: var(--pf-t--global--spacer--sm);
71
+ --pf-v5-c-menu-toggle__count--MarginLeft: var(--pf-t--global--spacer--sm);
72
+ --pf-v5-c-menu-toggle__controls--PaddingLeft: var(--pf-t--global--spacer--sm);
69
73
  --pf-v5-c-menu-toggle__controls--MarginLeft: auto;
70
74
  --pf-v5-c-menu-toggle__controls--MarginRight: 0;
71
- --pf-v5-c-menu-toggle__toggle-icon--MarginRight: var(--pf-v5-global--spacer--sm);
72
- --pf-v5-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-v5-global--Color--200);
75
+ --pf-v5-c-menu-toggle__toggle-icon--MarginRight: var(--pf-t--global--spacer--sm);
76
+ --pf-v5-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
73
77
  --pf-v5-c-menu-toggle--m-plain--hover__toggle-icon--Color: var(--pf-v5-global--Color--100);
74
78
  --pf-v5-c-menu-toggle--m-plain--active__toggle-icon--Color: var(--pf-v5-global--Color--100);
75
79
  --pf-v5-c-menu-toggle--m-plain--focus__toggle-icon--Color: var(--pf-v5-global--Color--100);
76
80
  --pf-v5-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color: var(--pf-v5-global--Color--100);
77
81
  --pf-v5-c-menu-toggle--m-full-height--PaddingRight: var(--pf-v5-global--spacer--lg);
78
82
  --pf-v5-c-menu-toggle--m-full-height--PaddingLeft: var(--pf-v5-global--spacer--lg);
79
- --pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth: 0;
80
83
  --pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
81
84
  --pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
82
85
  --pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
@@ -86,7 +89,7 @@
86
89
  --pf-v5-c-menu-toggle--m-split-button--child--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
87
90
  --pf-v5-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-v5-global--disabled-color--100);
88
91
  --pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
89
- --pf-v5-c-menu-toggle--m-split-button--first-child--PaddingRight: var(--pf-v5-global--spacer--sm);
92
+ --pf-v5-c-menu-toggle--m-split-button--first-child--PaddingRight: var(--pf-t--global--spacer--sm);
90
93
  --pf-v5-c-menu-toggle--m-split-button--last-child--PaddingLeft: 0;
91
94
  --pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
92
95
  --pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
@@ -109,13 +112,13 @@
109
112
  --pf-v5-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-v5-global--primary-color--100);
110
113
  --pf-v5-c-menu-toggle__button--BackgroundColor: transparent;
111
114
  --pf-v5-c-menu-toggle__button--AlignSelf: baseline;
112
- --pf-v5-c-menu-toggle__button--PaddingLeft: var(--pf-v5-global--spacer--sm);
113
- --pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-v5-global--spacer--sm);
114
- --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-global--spacer--sm);
115
- --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
116
- --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--sm);
117
- --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
118
- --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
115
+ --pf-v5-c-menu-toggle__button--PaddingLeft: var(--pf-t--global--spacer--sm);
116
+ --pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-t--global--spacer--sm);
117
+ --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-t--global--spacer--sm);
118
+ --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-t--global--spacer--sm);
119
+ --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-t--global--spacer--sm);
120
+ --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-t--global--spacer--sm);
121
+ --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
119
122
  --pf-v5-c-menu-toggle--m-typeahead__button--AlignSelf: center;
120
123
  position: relative;
121
124
  display: inline-flex;
@@ -131,9 +134,11 @@
131
134
  cursor: pointer;
132
135
  background-color: var(--pf-v5-c-menu-toggle--BackgroundColor);
133
136
  border: 0;
137
+ }
138
+ .pf-v5-c-menu-toggle, .pf-v5-c-menu-toggle::before {
134
139
  border-radius: var(--pf-v5-c-menu-toggle--BorderRadius);
135
140
  }
136
- .pf-v5-c-menu-toggle::before, .pf-v5-c-menu-toggle::after {
141
+ .pf-v5-c-menu-toggle::before {
137
142
  position: absolute;
138
143
  inset-block-start: 0;
139
144
  inset-block-end: 0;
@@ -141,20 +146,10 @@
141
146
  inset-inline-end: 0;
142
147
  pointer-events: none;
143
148
  content: "";
144
- }
145
- .pf-v5-c-menu-toggle::before {
146
- border-style: solid;
147
- border-block-start-color: var(--pf-v5-c-menu-toggle--before--BorderTopColor);
148
- border-block-start-width: var(--pf-v5-c-menu-toggle--before--BorderTopWidth);
149
- border-block-end-color: var(--pf-v5-c-menu-toggle--before--BorderBottomColor);
150
- border-block-end-width: var(--pf-v5-c-menu-toggle--before--BorderBottomWidth);
151
- border-inline-start-color: var(--pf-v5-c-menu-toggle--before--BorderLeftColor);
152
- border-inline-start-width: var(--pf-v5-c-menu-toggle--before--BorderLeftWidth);
153
- border-inline-end-color: var(--pf-v5-c-menu-toggle--before--BorderRightColor);
154
- border-inline-end-width: var(--pf-v5-c-menu-toggle--before--BorderRightWidth);
149
+ border: var(--pf-v5-c-menu-toggle--BorderWidth) solid var(--pf-v5-c-menu-toggle--BorderColor);
155
150
  }
156
151
  .pf-v5-c-menu-toggle::after {
157
- border-block-end: var(--pf-v5-c-menu-toggle--after--BorderBottomWidth) solid var(--pf-v5-c-menu-toggle--after--BorderBottomColor);
152
+ border-block-end: var(--pf-v5-c-menu-toggle--after--BorderWidth) solid var(--pf-v5-c-menu-toggle--after--BorderColor);
158
153
  }
159
154
  .pf-v5-c-menu-toggle.pf-m-primary {
160
155
  --pf-v5-c-menu-toggle--BorderRadius: var(--pf-v5-c-menu-toggle--m-primary--BorderRadius);
@@ -199,15 +194,11 @@
199
194
  --pf-v5-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-v5-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor);
200
195
  --pf-v5-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-v5-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth);
201
196
  }
202
- .pf-v5-c-menu-toggle.pf-m-plain {
203
- --pf-v5-c-menu-toggle__toggle-icon--Color: var(--pf-v5-c-menu-toggle--m-plain__toggle-icon--Color);
204
- }
205
197
  .pf-v5-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
206
198
  --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-c-menu-toggle--m-plain--PaddingRight);
207
199
  --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-v5-c-menu-toggle--m-plain--PaddingLeft);
208
200
  --pf-v5-c-menu-toggle--disabled--BackgroundColor: transparent;
209
201
  display: inline-block;
210
- color: var(--pf-v5-c-menu-toggle--m-plain--Color);
211
202
  }
212
203
  .pf-v5-c-menu-toggle.pf-m-full-height {
213
204
  --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-c-menu-toggle--m-full-height--PaddingRight);
@@ -222,25 +213,12 @@
222
213
  height: 100%;
223
214
  }
224
215
  .pf-v5-c-menu-toggle:hover {
225
- --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-c-menu-toggle--hover--BackgroundColor);
226
- --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--hover--after--BorderBottomWidth);
227
- --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--hover--after--BorderBottomColor);
228
- --pf-v5-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-v5-c-menu-toggle--m-plain--hover__toggle-icon--Color);
229
- --pf-v5-c-menu-toggle--m-plain--Color: var(--pf-v5-c-menu-toggle--m-plain--hover--Color);
230
- }
231
- .pf-v5-c-menu-toggle:focus, .pf-v5-c-menu-toggle:focus-within {
232
- --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-c-menu-toggle--focus--BackgroundColor);
233
- --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--focus--after--BorderBottomWidth);
234
- --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--focus--after--BorderBottomColor);
235
- --pf-v5-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-v5-c-menu-toggle--m-plain--focus__toggle-icon--Color);
236
- --pf-v5-c-menu-toggle--m-plain--Color: var(--pf-v5-c-menu-toggle--m-plain--focus--Color);
237
- }
238
- .pf-v5-c-menu-toggle:active {
239
- --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-c-menu-toggle--active--BackgroundColor);
240
- --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--active--after--BorderBottomWidth);
241
- --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--active--after--BorderBottomColor);
242
- --pf-v5-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-v5-c-menu-toggle--m-plain--active__toggle-icon--Color);
243
- --pf-v5-c-menu-toggle--m-plain--Color: var(--pf-v5-c-menu-toggle--m-plain--active--Color);
216
+ --pf-v5-c-menu-toggle--BorderColor: var(--pf-v5-c-menu-toggle--hover--BorderColor);
217
+ --pf-v5-c-menu-toggle--BorderWidth: var(--pf-v5-c-menu-toggle--hover--BorderWidth);
218
+ }
219
+ .pf-v5-c-menu-toggle:focus, .pf-v5-c-menu-toggle:active {
220
+ --pf-v5-c-menu-toggle--BorderColor: var(--pf-v5-c-menu-toggle--active--BorderColor);
221
+ --pf-v5-c-menu-toggle--BorderWidth: var(--pf-v5-c-menu-toggle--active--BorderWidth);
244
222
  }
245
223
  .pf-v5-c-menu-toggle.pf-m-expanded {
246
224
  --pf-v5-c-menu-toggle--Color: var(--pf-v5-c-menu-toggle--m-expanded--Color);
@@ -256,7 +234,7 @@
256
234
  --pf-v5-c-menu-toggle--m-plain--Color: var(--pf-v5-c-menu-toggle--m-plain--disabled--Color);
257
235
  pointer-events: none;
258
236
  }
259
- .pf-v5-c-menu-toggle.pf-m-primary::before, .pf-v5-c-menu-toggle.pf-m-primary::after, .pf-v5-c-menu-toggle.pf-m-plain::before, .pf-v5-c-menu-toggle.pf-m-plain::after, .pf-v5-c-menu-toggle:disabled::before, .pf-v5-c-menu-toggle:disabled::after {
237
+ .pf-v5-c-menu-toggle.pf-m-primary::before, .pf-v5-c-menu-toggle.pf-m-primary::after, .pf-v5-c-menu-toggle:disabled::before, .pf-v5-c-menu-toggle:disabled::after {
260
238
  border: 0;
261
239
  }
262
240
  .pf-v5-c-menu-toggle.pf-m-typeahead {
@@ -419,7 +397,7 @@
419
397
 
420
398
  .pf-v5-c-menu-toggle__toggle-icon {
421
399
  margin-inline-end: var(--pf-v5-c-menu-toggle__toggle-icon--MarginRight);
422
- color: var(--pf-v5-c-menu-toggle__toggle-icon--Color, inherit);
400
+ color: var(--pf-v5-c-menu-toggle__toggle-icon--Color);
423
401
  }
424
402
 
425
403
  :where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle {