@patternfly/patternfly 6.0.0-alpha.210 → 6.0.0-alpha.212

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 (17) hide show
  1. package/assets/images/pf_logo_white.svg +16 -17
  2. package/components/MenuToggle/menu-toggle.css +24 -9
  3. package/components/MenuToggle/menu-toggle.scss +29 -12
  4. package/components/_index.css +24 -9
  5. package/docs/components/Card/examples/Card.md +138 -107
  6. package/docs/components/MenuToggle/examples/MenuToggle.md +19 -0
  7. package/docs/demos/Card/examples/Card.md +2 -2
  8. package/docs/demos/CardView/examples/CardView.md +1 -4
  9. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5 -5
  10. package/package.json +2 -2
  11. package/patternfly-no-globals.css +24 -9
  12. package/patternfly.css +24 -9
  13. package/patternfly.min.css +1 -1
  14. package/patternfly.min.css.map +1 -1
  15. package/assets/images/pf-logo-small.svg +0 -23
  16. package/assets/images/pf_logo_white.hbs +0 -35
  17. package/assets/images/pfbg-icon.svg +0 -1
package/assets/images/pf_logo_white.svg CHANGED
@@ -1,38 +1,37 @@
1
1
  <?xml version="1.0" encoding="utf-8"?>
2
2
  <!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
4
- xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5
- viewBox="0 0 706.3 132.5" enable-background="new 0 0 706.3 132.5" xml:space="preserve">
6
- <g fill="var(--pf-t--color--white, #FFFFFF)">
7
- <path d="M197.2,83.9V48.6h15.2c2.2,0,4.1,0.3,5.6,1c1.5,0.7,2.8,1.5,3.7,2.6c1,1.1,1.6,2.3,2.1,3.6
3
+ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
+ viewBox="0 0 706.3 132.5" enable-background="new 0 0 706.3 132.5" xml:space="preserve" fill="currentColor">
5
+ <g>
6
+ <path fill="#fff" d="M197.2,83.9V48.6h15.2c2.2,0,4.1,0.3,5.6,1c1.5,0.7,2.8,1.5,3.7,2.6c1,1.1,1.6,2.3,2.1,3.6
8
7
  c0.4,1.3,0.6,2.7,0.6,4c0,0.9-0.1,1.7-0.3,2.6c-0.2,0.9-0.5,1.7-0.9,2.6c-0.4,0.8-0.9,1.6-1.6,2.3c-0.6,0.7-1.4,1.4-2.3,1.9
9
8
  c-0.9,0.5-1.9,1-3.1,1.3c-1.2,0.3-2.5,0.5-3.9,0.5h-8.3v13H197.2z M212.7,64.4c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1.1
10
9
  c0.4-0.4,0.6-0.9,0.8-1.5c0.2-0.6,0.3-1.1,0.3-1.7c0-0.5-0.1-1-0.2-1.6c-0.1-0.5-0.4-1-0.7-1.5c-0.4-0.5-0.8-0.8-1.4-1.1
11
10
  c-0.6-0.3-1.4-0.4-2.3-0.4h-8.6v9.4H212.7z"/>
12
- <path d="M271.6,83.9l-2.7-7.3h-13.6l-2.7,7.3h-7.3l13.5-35.4h6.7l13.5,35.4H271.6z M263.2,61.2
11
+ <path fill="#fff" d="M271.6,83.9l-2.7-7.3h-13.6l-2.7,7.3h-7.3l13.5-35.4h6.7l13.5,35.4H271.6z M263.2,61.2
13
12
  c-0.2-0.4-0.4-0.9-0.6-1.5c-0.2-0.6-0.4-1.1-0.5-1.7c-0.1,0.5-0.3,1.1-0.5,1.7c-0.2,0.6-0.4,1.1-0.6,1.5l-3.5,9.2h9.2L263.2,61.2z"
14
13
  />
15
- <path d="M317.3,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H317.3z"/>
16
- <path d="M370.2,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H370.2z"/>
17
- <path d="M408.5,83.9V48.6h24.1v6.5h-17.3v7.4h10.2v6.5h-10.2v8.5h18.4v6.5H408.5z"/>
18
- <path d="M462.4,83.9V48.6h16.4c2.2,0,4.1,0.3,5.6,0.9c1.5,0.6,2.7,1.4,3.6,2.5c0.9,1,1.6,2.2,2,3.5
14
+ <path fill="#fff" d="M317.3,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H317.3z"/>
15
+ <path fill="#fff" d="M370.2,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H370.2z"/>
16
+ <path fill="#fff" d="M408.5,83.9V48.6h24.1v6.5h-17.3v7.4h10.2v6.5h-10.2v8.5h18.4v6.5H408.5z"/>
17
+ <path fill="#fff" d="M462.4,83.9V48.6h16.4c2.2,0,4.1,0.3,5.6,0.9c1.5,0.6,2.7,1.4,3.6,2.5c0.9,1,1.6,2.2,2,3.5
19
18
  c0.4,1.3,0.6,2.7,0.6,4.2c0,1-0.1,2-0.4,3c-0.3,1-0.7,2-1.3,2.9c-0.6,0.9-1.3,1.8-2.1,2.5c-0.9,0.7-1.8,1.3-3,1.7l6.9,14.1H483
20
19
  l-6.6-13.2h-7.1v13.2H462.4z M478.9,64.3c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1c0.4-0.4,0.6-0.9,0.8-1.5
21
20
  c0.2-0.6,0.2-1.1,0.2-1.7c0-0.6-0.1-1.1-0.2-1.7c-0.1-0.6-0.4-1-0.7-1.5c-0.3-0.4-0.8-0.8-1.4-1c-0.6-0.3-1.4-0.4-2.3-0.4h-9.7v9.2
22
21
  H478.9z"/>
23
- <path d="M541.9,83.9l-14-20.6c-0.2-0.3-0.5-0.8-0.8-1.3c-0.3-0.5-0.5-1-0.7-1.4c0.1,0.4,0.1,0.8,0.1,1.3
22
+ <path fill="#fff" d="M541.9,83.9l-14-20.6c-0.2-0.3-0.5-0.8-0.8-1.3c-0.3-0.5-0.5-1-0.7-1.4c0.1,0.4,0.1,0.8,0.1,1.3
24
23
  c0,0.5,0,1,0,1.3v20.6h-6.8V48.6h6.4l13.7,20.4c0.2,0.3,0.5,0.7,0.7,1.2c0.3,0.5,0.5,1,0.7,1.4c0-0.5-0.1-1-0.1-1.4
25
24
  c0-0.5,0-0.9,0-1.2V48.6h6.8v35.4H541.9z"/>
26
- <path d="M578.4,83.9V48.6h23.7v6.5h-16.9v7.4H596v6.5h-10.7v15H578.4z"/>
27
- <path d="M629.8,83.9V48.6h6.8v28.8h17.1v6.6H629.8z"/>
28
- <path d="M686.4,83.9V70.2l-13.1-21.6h7.7l8.7,14.5l8.7-14.5h7.7l-13.1,21.6v13.8H686.4z"/>
25
+ <path fill="#fff" d="M578.4,83.9V48.6h23.7v6.5h-16.9v7.4H596v6.5h-10.7v15H578.4z"/>
26
+ <path fill="#fff" d="M629.8,83.9V48.6h6.8v28.8h17.1v6.6H629.8z"/>
27
+ <path fill="#fff" d="M686.4,83.9V70.2l-13.1-21.6h7.7l8.7,14.5l8.7-14.5h7.7l-13.1,21.6v13.8H686.4z"/>
29
28
  </g>
30
- <g fill="var(--pf-t--color--white, #FFFFFF)">
31
- <path d="M49,103l-21.2,4.9L0,68.4L70,0l70,68.4l-27.8,39.4L91,103l-21,29.5L49,103z M70,128.7l18.6-26.2l-7.2-1.7
29
+ <g>
30
+ <path fill="#fff" d="M49,103l-21.2,4.9L0,68.4L70,0l70,68.4l-27.8,39.4L91,103l-21,29.5L49,103z M70,128.7l18.6-26.2l-7.2-1.7
32
31
  l-11,16.2l-11.9-16.2l-7.2,1.7L70,128.7z M70.4,113.1l9.2-13.5L70,6.7l-9.5,92.9L70.4,113.1z M28.8,105.4l18.8-4.3L33.8,81.7
33
32
  l4.1-9.3L25.2,55L58,14.9L2.9,68.7L28.8,105.4z M111.2,105.4l16.3-23.1l9.6-13.6L82,14.9L114.9,55l-12.8,17.4l4.1,9.3L92.4,101
34
33
  L111.2,105.4z M90.1,100.5l13.6-19.1l-3-6.9L82.7,98.8L90.1,100.5z M50,100.5l7.3-1.7L39.4,74.5l-3,6.9L50,100.5z M81.9,96.2
35
34
  l17.6-24.1L72.9,11.6L81.9,96.2z M58.1,96.2l9-84.6L40.5,72.1L58.1,96.2z M39,70L66.1,8.5L28,55.1L39,70z M101.1,70l11-15L74,8.5
36
35
  L101.1,70z"/>
37
36
  </g>
38
- </svg>
37
+ </svg>
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -27,9 +27,14 @@
27
27
  --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
28
28
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
29
29
  --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
30
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
31
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
32
+ --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
30
33
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
31
34
  --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
35
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
32
36
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
37
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
33
38
  --pf-v6-c-menu-toggle--m-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
34
39
  --pf-v6-c-menu-toggle--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
35
40
  --pf-v6-c-menu-toggle--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -60,7 +65,7 @@
60
65
  --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
61
66
  --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
62
67
  --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
63
- --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
68
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
64
69
  --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
65
70
  --pf-v6-c-menu-toggle__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--sm));
66
71
  --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
@@ -95,12 +100,14 @@
95
100
  --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
96
101
  --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
97
102
  --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
103
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
98
104
  --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
99
105
  --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
100
106
  --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
101
107
  --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
102
108
  --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
103
109
  --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
110
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
104
111
  }
105
112
 
106
113
  .pf-v6-c-menu-toggle {
@@ -155,6 +162,7 @@
155
162
  --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
156
163
  --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
157
164
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
165
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
158
166
  }
159
167
  .pf-v6-c-menu-toggle.pf-m-secondary {
160
168
  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
@@ -169,6 +177,7 @@
169
177
  --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
170
178
  --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
171
179
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
180
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
172
181
  }
173
182
  .pf-v6-c-menu-toggle.pf-m-full-height {
174
183
  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
@@ -207,14 +216,6 @@
207
216
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
208
217
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
209
218
  }
210
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
211
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
212
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
213
- }
214
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
215
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
216
- pointer-events: none;
217
- }
218
219
  .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
219
220
  border: 0;
220
221
  }
@@ -239,6 +240,20 @@
239
240
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
240
241
  --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
241
242
  }
243
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
244
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
245
+ }
246
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
247
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
248
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
249
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
250
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
251
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
252
+ }
253
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
254
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
255
+ pointer-events: none;
256
+ }
242
257
 
243
258
  .pf-v6-c-menu-toggle.pf-m-split-button {
244
259
  --pf-v6-c-menu-toggle--ColumnGap: 0;
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -43,13 +43,18 @@
43
43
 
44
44
  // * Menu toggle disabled
45
45
  --#{$menu-toggle}--disabled--Color: var(--pf-t--global--text--color--on-disabled);
46
+ --#{$menu-toggle}--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
47
+ --#{$menu-toggle}--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
48
+ --#{$menu-toggle}--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
46
49
  --#{$menu-toggle}--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
47
50
 
48
51
  // * Menu toggle icon
49
52
  --#{$menu-toggle}__icon--MinHeight: calc(var(--#{$menu}__item--FontSize) * var(--#{$menu}__item--LineHeight));
53
+ --#{$menu-toggle}__icon--Color: var(--pf-t--global--icon--color--regular);
50
54
 
51
55
  // * Menu toggle toggle icon
52
56
  --#{$menu-toggle}__toggle-icon--MinHeight: calc(var(--#{$menu}__item--FontSize) * var(--#{$menu}__item--LineHeight));
57
+ --#{$menu-toggle}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
53
58
 
54
59
  // TODO: add pf-m-button modifier here
55
60
  // * Menu toggle button
@@ -74,7 +79,6 @@
74
79
  --#{$menu-toggle}--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
75
80
  --#{$menu-toggle}--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
76
81
 
77
-
78
82
  // * Menu toggle secondary
79
83
  --#{$menu-toggle}--m-secondary--PaddingInlineStart: var(--#{$menu-toggle}--m-button--PaddingInlineStart);
80
84
  --#{$menu-toggle}--m-secondary--PaddingInlineEnd: var(--#{$menu-toggle}--m-button--PaddingInlineEnd);
@@ -88,7 +92,7 @@
88
92
  --#{$menu-toggle}--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
89
93
  --#{$menu-toggle}--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
90
94
  --#{$menu-toggle}--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
91
- --#{$menu-toggle}--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
95
+ --#{$menu-toggle}--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
92
96
  --#{$menu-toggle}--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
93
97
 
94
98
  // Controls
@@ -145,6 +149,7 @@
145
149
 
146
150
  // Status icon
147
151
  --#{$menu-toggle}__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
152
+ --#{$menu-toggle}__status-icon--Color: var(--pf-t--global--icon--color--regular);
148
153
 
149
154
  // Success
150
155
  --#{$menu-toggle}--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
@@ -157,6 +162,9 @@
157
162
  // Danger
158
163
  --#{$menu-toggle}--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
159
164
  --#{$menu-toggle}--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
165
+
166
+ // Placeholder
167
+ --#{$menu-toggle}--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
160
168
  }
161
169
 
162
170
  .#{$menu-toggle} {
@@ -215,6 +223,7 @@
215
223
  --#{$menu-toggle}--expanded--BorderColor: var(--#{$menu-toggle}--m-primary--expanded--BorderColor);
216
224
  --#{$menu-toggle}--hover__toggle-icon--Color: var(--#{$menu-toggle}--m-primary--hover__toggle-icon--Color);
217
225
  --#{$menu-toggle}--expanded__toggle-icon--Color: var(--#{$menu-toggle}--m-primary--expanded__toggle-icon--Color);
226
+ --#{$menu-toggle}__toggle-icon--Color: var(--#{$menu-toggle}--m-primary__toggle-icon--Color);
218
227
  }
219
228
 
220
229
  &.pf-m-secondary {
@@ -231,6 +240,7 @@
231
240
  --#{$menu-toggle}--expanded--BorderWidth: var(--#{$menu-toggle}--m-secondary--expanded--BorderWidth);
232
241
  --#{$menu-toggle}--hover__toggle-icon--Color: var(--#{$menu-toggle}--m-secondary--hover__toggle-icon--Color);
233
242
  --#{$menu-toggle}--expanded__toggle-icon--Color: var(--#{$menu-toggle}--m-secondary--expanded__toggle-icon--Color);
243
+ --#{$menu-toggle}__toggle-icon--Color: var(--#{$menu-toggle}--m-secondary__toggle-icon--Color);
234
244
  }
235
245
 
236
246
  &.pf-m-full-height {
@@ -277,16 +287,6 @@
277
287
  --#{$menu-toggle}__toggle-icon--Color: var(--#{$menu-toggle}--expanded__toggle-icon--Color);
278
288
  }
279
289
 
280
- &:is(:disabled, .pf-m-disabled) {
281
- --#{$menu-toggle}--Color: var(--#{$menu-toggle}--disabled--Color);
282
- --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--disabled--BackgroundColor);
283
-
284
- &,
285
- .#{$button} {
286
- pointer-events: none;
287
- }
288
- }
289
-
290
290
  &.pf-m-primary,
291
291
  &:is(:disabled, .pf-m-disabled) {
292
292
  &::before {
@@ -320,6 +320,23 @@
320
320
  --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--m-danger--BorderColor);
321
321
  --#{$menu-toggle}__status-icon--Color: var(--#{$menu-toggle}--m-danger__status-icon--Color);
322
322
  }
323
+
324
+ &.pf-m-placeholder {
325
+ --#{$menu-toggle}--Color: var(--#{$menu-toggle}--m-placeholder--Color);
326
+ }
327
+
328
+ &:is(:disabled, .pf-m-disabled) {
329
+ --#{$menu-toggle}--Color: var(--#{$menu-toggle}--disabled--Color);
330
+ --#{$menu-toggle}__icon--Color: var(--#{$menu-toggle}--disabled__icon--Color);
331
+ --#{$menu-toggle}__toggle-icon--Color: var(--#{$menu-toggle}--disabled__toggle-icon--Color);
332
+ --#{$menu-toggle}__status-icon--Color: var(--#{$menu-toggle}--disabled__status-icon--Color);
333
+ --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--disabled--BackgroundColor);
334
+
335
+ &,
336
+ .#{$button} {
337
+ pointer-events: none;
338
+ }
339
+ }
323
340
  }
324
341
 
325
342
  // - Menu toggle split button
package/components/_index.css CHANGED
@@ -9982,9 +9982,14 @@ ul.pf-v6-c-list {
9982
9982
  --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
9983
9983
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
9984
9984
  --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
9985
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
9986
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
9987
+ --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
9985
9988
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
9986
9989
  --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
9990
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
9987
9991
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
9992
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
9988
9993
  --pf-v6-c-menu-toggle--m-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
9989
9994
  --pf-v6-c-menu-toggle--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
9990
9995
  --pf-v6-c-menu-toggle--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -10015,7 +10020,7 @@ ul.pf-v6-c-list {
10015
10020
  --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
10016
10021
  --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
10017
10022
  --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
10018
- --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
10023
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
10019
10024
  --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
10020
10025
  --pf-v6-c-menu-toggle__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--sm));
10021
10026
  --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
@@ -10050,12 +10055,14 @@ ul.pf-v6-c-list {
10050
10055
  --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
10051
10056
  --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
10052
10057
  --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
10058
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
10053
10059
  --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
10054
10060
  --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
10055
10061
  --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
10056
10062
  --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
10057
10063
  --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
10058
10064
  --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
10065
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
10059
10066
  }
10060
10067
 
10061
10068
  .pf-v6-c-menu-toggle {
@@ -10110,6 +10117,7 @@ ul.pf-v6-c-list {
10110
10117
  --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
10111
10118
  --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
10112
10119
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
10120
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
10113
10121
  }
10114
10122
  .pf-v6-c-menu-toggle.pf-m-secondary {
10115
10123
  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
@@ -10124,6 +10132,7 @@ ul.pf-v6-c-list {
10124
10132
  --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
10125
10133
  --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
10126
10134
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
10135
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
10127
10136
  }
10128
10137
  .pf-v6-c-menu-toggle.pf-m-full-height {
10129
10138
  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
@@ -10162,14 +10171,6 @@ ul.pf-v6-c-list {
10162
10171
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
10163
10172
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
10164
10173
  }
10165
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
10166
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
10167
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
10168
- }
10169
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
10170
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
10171
- pointer-events: none;
10172
- }
10173
10174
  .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
10174
10175
  border: 0;
10175
10176
  }
@@ -10194,6 +10195,20 @@ ul.pf-v6-c-list {
10194
10195
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
10195
10196
  --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
10196
10197
  }
10198
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
10199
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
10200
+ }
10201
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
10202
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
10203
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
10204
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
10205
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
10206
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
10207
+ }
10208
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
10209
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
10210
+ pointer-events: none;
10211
+ }
10197
10212
 
10198
10213
  .pf-v6-c-menu-toggle.pf-m-split-button {
10199
10214
  --pf-v6-c-menu-toggle--ColumnGap: 0;