@patternfly/patternfly 6.0.0-alpha.89 → 6.0.0-alpha.90

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 (30) hide show
  1. package/base/patternfly-variables.css +167 -31
  2. package/base/tokens/_tokens-charts.scss +26 -26
  3. package/base/tokens/_tokens-dark.scss +14 -9
  4. package/base/tokens/_tokens-default.scss +66 -6
  5. package/base/tokens/_tokens-font.scss +94 -23
  6. package/base/tokens/_tokens-palette.scss +1 -1
  7. package/components/Button/button.css +0 -22
  8. package/components/Button/button.scss +0 -22
  9. package/components/Label/label.css +5 -7
  10. package/components/Label/label.scss +5 -8
  11. package/components/Menu/menu.css +0 -4
  12. package/components/Menu/menu.scss +0 -4
  13. package/components/MenuToggle/menu-toggle.css +0 -2
  14. package/components/MenuToggle/menu-toggle.scss +0 -3
  15. package/components/SimpleList/simple-list.css +0 -3
  16. package/components/SimpleList/simple-list.scss +0 -4
  17. package/components/Tabs/tabs.css +0 -1
  18. package/components/Tabs/tabs.scss +1 -3
  19. package/components/Wizard/wizard.css +0 -6
  20. package/components/Wizard/wizard.scss +1 -9
  21. package/package.json +1 -1
  22. package/patternfly-base-no-globals-theme-dark-unversioned.css +167 -31
  23. package/patternfly-base-no-globals.css +167 -31
  24. package/patternfly-base-theme-dark-unversioned.css +167 -31
  25. package/patternfly-base.css +167 -31
  26. package/patternfly-no-globals.css +172 -76
  27. package/patternfly-theme-dark-unversioned.css +172 -76
  28. package/patternfly.css +172 -76
  29. package/patternfly.min.css +1 -1
  30. package/patternfly.min.css.map +1 -1
package/base/tokens/_tokens-font.scss CHANGED
@@ -50,32 +50,103 @@
50
50
  --pf-t--global--link--text-decoration: var(--pf-t--global--text-decoration--100);
51
51
  --pf-t--global--link--text-decoration--hover: var(--pf-t--global--text-decoration--200);
52
52
 
53
- // blend modes
54
- --pf-t--global--mix-blend-mode--100: multiply;
55
- --pf-t--global--mix-blend-mode--200: screen;
56
- --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--100);
53
+ // sm box-shadow
54
+ --pf-t--global--box-shadow--sm:
55
+ var(--pf-t--global--box-shadow--X--sm--default)
56
+ var(--pf-t--global--box-shadow--Y--sm--default)
57
+ var(--pf-t--global--box-shadow--blur--sm)
58
+ var(--pf-t--global--box-shadow--spread--sm)
59
+ var(--pf-t--global--box-shadow--color--sm);
60
+ --pf-t--global--box-shadow--sm--top:
61
+ var(--pf-t--global--box-shadow--X--sm--top)
62
+ var(--pf-t--global--box-shadow--Y--sm--top)
63
+ var(--pf-t--global--box-shadow--blur--sm)
64
+ var(--pf-t--global--box-shadow--spread--sm)
65
+ var(--pf-t--global--box-shadow--color--sm);
66
+ --pf-t--global--box-shadow--sm--bottom:
67
+ var(--pf-t--global--box-shadow--X--sm--bottom)
68
+ var(--pf-t--global--box-shadow--Y--sm--bottom)
69
+ var(--pf-t--global--box-shadow--blur--sm)
70
+ var(--pf-t--global--box-shadow--spread--sm)
71
+ var(--pf-t--global--box-shadow--color--sm);
72
+ --pf-t--global--box-shadow--sm--left:
73
+ var(--pf-t--global--box-shadow--X--sm--left)
74
+ var(--pf-t--global--box-shadow--Y--sm--left)
75
+ var(--pf-t--global--box-shadow--blur--sm)
76
+ var(--pf-t--global--box-shadow--spread--sm)
77
+ var(--pf-t--global--box-shadow--color--sm);
78
+ --pf-t--global--box-shadow--sm--right:
79
+ var(--pf-t--global--box-shadow--X--sm--right)
80
+ var(--pf-t--global--box-shadow--Y--sm--right)
81
+ var(--pf-t--global--box-shadow--blur--sm)
82
+ var(--pf-t--global--box-shadow--spread--sm)
83
+ var(--pf-t--global--box-shadow--color--sm);
57
84
 
58
- // box-shadow
59
- --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 16%);
60
- --pf-t--global--box-shadow--sm--top: 0px -1px 2px 0px rgb(0 0 0 / 16%);
61
- --pf-t--global--box-shadow--sm--bottom: 0px 1px 2px 0px rgb(0 0 0 / 16%);
62
- --pf-t--global--box-shadow--sm--left: -1px 0px 2px 0px rgb(0 0 0 / 16%);
63
- --pf-t--global--box-shadow--sm--right: 1px 0px 2px 0px rgb(0 0 0 / 16%);
64
- --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 12%);
65
- --pf-t--global--box-shadow--md--top: 0px -4px 8px 0px rgb(0 0 0 / 12%);
66
- --pf-t--global--box-shadow--md--bottom: 0px 4px 8px 0px rgb(0 0 0 / 12%);
67
- --pf-t--global--box-shadow--md--left: -4px 0px 8px 0px rgb(0 0 0 / 12%);
68
- --pf-t--global--box-shadow--md--right: 4px 0px 8px 0px rgb(0 0 0 / 12%);
69
- --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 12%);
70
- --pf-t--global--box-shadow--lg--top: 0px -8px 24px 0px rgb(0 0 0 / 12%);
71
- --pf-t--global--box-shadow--lg--bottom: 0px 8px 24px 0px rgb(0 0 0 / 12%);
72
- --pf-t--global--box-shadow--lg--left: -8px 0px 24px 0px rgb(0 0 0 / 12%);
73
- --pf-t--global--box-shadow--lg--right: 8px 0px 24px 0px rgb(0 0 0 / 12%);
85
+ // md box-shadow
86
+ --pf-t--global--box-shadow--md:
87
+ var(--pf-t--global--box-shadow--X--md--default)
88
+ var(--pf-t--global--box-shadow--Y--md--default)
89
+ var(--pf-t--global--box-shadow--blur--md)
90
+ var(--pf-t--global--box-shadow--spread--md)
91
+ var(--pf-t--global--box-shadow--color--md);
92
+ --pf-t--global--box-shadow--md--top:
93
+ var(--pf-t--global--box-shadow--X--md--top)
94
+ var(--pf-t--global--box-shadow--Y--md--top)
95
+ var(--pf-t--global--box-shadow--blur--md)
96
+ var(--pf-t--global--box-shadow--spread--md)
97
+ var(--pf-t--global--box-shadow--color--md);
98
+ --pf-t--global--box-shadow--md--bottom:
99
+ var(--pf-t--global--box-shadow--X--md--bottom)
100
+ var(--pf-t--global--box-shadow--Y--md--bottom)
101
+ var(--pf-t--global--box-shadow--blur--md)
102
+ var(--pf-t--global--box-shadow--spread--md)
103
+ var(--pf-t--global--box-shadow--color--md);
104
+ --pf-t--global--box-shadow--md--left:
105
+ var(--pf-t--global--box-shadow--X--md--left)
106
+ var(--pf-t--global--box-shadow--Y--md--left)
107
+ var(--pf-t--global--box-shadow--blur--md)
108
+ var(--pf-t--global--box-shadow--spread--md)
109
+ var(--pf-t--global--box-shadow--color--md);
110
+ --pf-t--global--box-shadow--md--right:
111
+ var(--pf-t--global--box-shadow--X--md--right)
112
+ var(--pf-t--global--box-shadow--Y--md--right)
113
+ var(--pf-t--global--box-shadow--blur--md)
114
+ var(--pf-t--global--box-shadow--spread--md)
115
+ var(--pf-t--global--box-shadow--color--md);
74
116
 
75
- &:where(.pf-v5-theme-dark) {
76
- // blend mode
77
- --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--200);
117
+ // lg box-shadow
118
+ --pf-t--global--box-shadow--lg:
119
+ var(--pf-t--global--box-shadow--X--lg--default)
120
+ var(--pf-t--global--box-shadow--Y--lg--default)
121
+ var(--pf-t--global--box-shadow--blur--lg)
122
+ var(--pf-t--global--box-shadow--spread--lg)
123
+ var(--pf-t--global--box-shadow--color--lg);
124
+ --pf-t--global--box-shadow--lg--top:
125
+ var(--pf-t--global--box-shadow--X--lg--top)
126
+ var(--pf-t--global--box-shadow--Y--lg--top)
127
+ var(--pf-t--global--box-shadow--blur--lg)
128
+ var(--pf-t--global--box-shadow--spread--lg)
129
+ var(--pf-t--global--box-shadow--color--lg);
130
+ --pf-t--global--box-shadow--lg--bottom:
131
+ var(--pf-t--global--box-shadow--X--lg--bottom)
132
+ var(--pf-t--global--box-shadow--Y--lg--bottom)
133
+ var(--pf-t--global--box-shadow--blur--lg)
134
+ var(--pf-t--global--box-shadow--spread--lg)
135
+ var(--pf-t--global--box-shadow--color--lg);
136
+ --pf-t--global--box-shadow--lg--left:
137
+ var(--pf-t--global--box-shadow--X--lg--left)
138
+ var(--pf-t--global--box-shadow--Y--lg--left)
139
+ var(--pf-t--global--box-shadow--blur--lg)
140
+ var(--pf-t--global--box-shadow--spread--lg)
141
+ var(--pf-t--global--box-shadow--color--lg);
142
+ --pf-t--global--box-shadow--lg--right:
143
+ var(--pf-t--global--box-shadow--X--lg--right)
144
+ var(--pf-t--global--box-shadow--Y--lg--right)
145
+ var(--pf-t--global--box-shadow--blur--lg)
146
+ var(--pf-t--global--box-shadow--spread--lg)
147
+ var(--pf-t--global--box-shadow--color--lg);
78
148
 
149
+ &:where(.pf-v5-theme-dark) {
79
150
  // box shadow
80
151
  --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 50%);
81
152
  --pf-t--global--box-shadow--sm--top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
package/base/tokens/_tokens-palette.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  // /**
2
2
  // * Do not edit directly
3
- // * Generated on Tue, 06 Feb 2024 18:33:23 GMT
3
+ // * Generated on Tue, 20 Feb 2024 01:08:05 GMT
4
4
  // */
5
5
 
6
6
  :root {
package/components/Button/button.css CHANGED
@@ -14,7 +14,6 @@
14
14
  --pf-v5-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
15
15
  --pf-v5-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
16
16
  --pf-v5-c-button--TextDecoration: none;
17
- --pf-v5-c-button--MixBlendMode: normal;
18
17
  --pf-v5-c-button--hover--BackgroundColor: transparent;
19
18
  --pf-v5-c-button--hover--BorderColor: transparent;
20
19
  --pf-v5-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
@@ -63,8 +62,6 @@
63
62
  --pf-v5-c-button--m-link--PaddingLeft: var(--pf-t--global--spacer--md);
64
63
  --pf-v5-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
65
64
  --pf-v5-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
66
- --pf-v5-c-button--m-link--hover--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
67
- --pf-v5-c-button--m-link--m-clicked--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
68
65
  --pf-v5-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
69
66
  --pf-v5-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
70
67
  --pf-v5-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
@@ -89,8 +86,6 @@
89
86
  --pf-v5-c-button--m-link--m-inline--PaddingBottom: 0;
90
87
  --pf-v5-c-button--m-link--m-inline--PaddingLeft: 0;
91
88
  --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
92
- --pf-v5-c-button--m-link--m-inline--hover--MixBlendMode: normal;
93
- --pf-v5-c-button--m-link--m-inline--m-clicked--MixBlendMode: normal;
94
89
  --pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
95
90
  --pf-v5-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-v5-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-t--global--spacer--sm));
96
91
  --pf-v5-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -102,8 +97,6 @@
102
97
  --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
103
98
  --pf-v5-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
104
99
  --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
105
- --pf-v5-c-button--m-plain--hover--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
106
- --pf-v5-c-button--m-plain--m-clicked--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
107
100
  --pf-v5-c-button--m-plain--MinWidth: calc(1em * var(--pf-v5-c-button--LineHeight) + var(--pf-v5-c-button--m-plain--PaddingTop) + var(--pf-v5-c-button--m-plain--PaddingBottom));
108
101
  --pf-v5-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
109
102
  --pf-v5-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
@@ -115,8 +108,6 @@
115
108
  --pf-v5-c-button--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
116
109
  --pf-v5-c-button--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
117
110
  --pf-v5-c-button--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
118
- --pf-v5-c-button--m-plain--m-no-padding--hover--MixBlendMode: normal;
119
- --pf-v5-c-button--m-plain--m-no-padding--m-clicked--MixBlendMode: normal;
120
111
  --pf-v5-c-button--m-plain--m-no-padding--MinWidth: auto;
121
112
  --pf-v5-c-button--m-plain--m-no-padding--PaddingTop: 0;
122
113
  --pf-v5-c-button--m-plain--m-no-padding--PaddingRight: 0;
@@ -200,7 +191,6 @@
200
191
  --pf-v5-c-button--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
201
192
  --pf-v5-c-button--m-small--PaddingLeft: var(--pf-t--global--spacer--md);
202
193
  --pf-v5-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
203
- --pf-v5-c-button--disabled--MixBlendMode: normal;
204
194
  --pf-v5-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
205
195
  --pf-v5-c-button--disabled--BorderColor: transparent;
206
196
  --pf-v5-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
@@ -257,7 +247,6 @@
257
247
  border-start-end-radius: var(--pf-v5-c-button--BorderStartEndRadius, var(--pf-v5-c-button--BorderRadius));
258
248
  border-end-start-radius: var(--pf-v5-c-button--BorderEndStartRadius, var(--pf-v5-c-button--BorderRadius));
259
249
  border-end-end-radius: var(--pf-v5-c-button--BorderEndEndRadius, var(--pf-v5-c-button--BorderRadius));
260
- mix-blend-mode: var(--pf-v5-c-button--MixBlendMode);
261
250
  }
262
251
  .pf-v5-c-button::after {
263
252
  position: absolute;
@@ -325,13 +314,11 @@
325
314
  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-link--BorderRadius);
326
315
  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-link--BackgroundColor);
327
316
  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-link__icon--Color);
328
- --pf-v5-c-button--hover--MixBlendMode: var(--pf-v5-c-button--m-link--hover--MixBlendMode);
329
317
  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-link--hover--Color);
330
318
  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-link--hover--BackgroundColor);
331
319
  --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-link--hover__icon--Color);
332
320
  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-link--m-clicked--Color);
333
321
  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-link--m-clicked--BackgroundColor);
334
- --pf-v5-c-button--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-link--m-clicked--MixBlendMode);
335
322
  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-link--m-clicked__icon--Color);
336
323
  }
337
324
  .pf-v5-c-button.pf-m-link.pf-m-inline {
@@ -346,9 +333,7 @@
346
333
  --pf-v5-c-button__progress--Left: var(--pf-v5-c-button--m-link--m-inline__progress--Left);
347
334
  --pf-v5-c-button--hover--TextDecoration: var(--pf-v5-c-button--m-link--m-inline--hover--TextDecoration);
348
335
  --pf-v5-c-button--hover--BackgroundColor: transparent;
349
- --pf-v5-c-button--hover--MixBlendMode: var(--pf-v5-c-button--m-link--m-inline--hover--MixBlendMode);
350
336
  --pf-v5-c-button--m-clicked--BackgroundColor: transparent;
351
- --pf-v5-c-button--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-link--m-inline--m-clicked--MixBlendMode);
352
337
  --pf-v5-c-button--disabled--BackgroundColor: transparent;
353
338
  --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-link--m-inline--disabled--Color);
354
339
  --pf-v5-c-button--disabled__icon--Color: var(--pf-v5-c-button--m-link--m-inline--disabled__icon--Color);
@@ -459,10 +444,8 @@
459
444
  --pf-v5-c-button__progress--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
460
445
  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-plain--hover--Color);
461
446
  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
462
- --pf-v5-c-button--hover--MixBlendMode: var(--pf-v5-c-button--m-plain--hover--MixBlendMode);
463
447
  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-plain--m-clicked--Color);
464
448
  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-plain--m-clicked--BackgroundColor);
465
- --pf-v5-c-button--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-plain--m-clicked--MixBlendMode);
466
449
  --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-plain--disabled--Color);
467
450
  --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-plain--disabled--BackgroundColor);
468
451
  --pf-v5-c-button--m-small--PaddingTop: var(--pf-v5-c-button--m-plain--m-small--PaddingTop);
@@ -479,8 +462,6 @@
479
462
  --pf-v5-c-button--m-plain--PaddingRight: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingRight);
480
463
  --pf-v5-c-button--m-plain--PaddingBottom: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingBottom);
481
464
  --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingLeft);
482
- --pf-v5-c-button--m-plain--hover--MixBlendMode: var(--pf-v5-c-button--m-plain--m-no-padding--hover--MixBlendMode);
483
- --pf-v5-c-button--m-plain--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-plain--m-no-padding--m-clicked--MixBlendMode);
484
465
  min-width: var(--pf-v5-c-button--m-plain--m-no-padding--MinWidth);
485
466
  }
486
467
  .pf-v5-c-button.pf-m-block {
@@ -506,7 +487,6 @@
506
487
  --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--hover--BorderColor);
507
488
  --pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--hover--BorderWidth);
508
489
  --pf-v5-c-button--TextDecoration: var(--pf-v5-c-button--hover--TextDecoration);
509
- --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--hover--MixBlendMode);
510
490
  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--hover__icon--Color);
511
491
  }
512
492
  .pf-v5-c-button.pf-m-clicked {
@@ -514,7 +494,6 @@
514
494
  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-clicked--BackgroundColor);
515
495
  --pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--m-clicked--BorderWidth);
516
496
  --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--m-clicked--BorderColor);
517
- --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-clicked--MixBlendMode);
518
497
  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-clicked__icon--Color);
519
498
  }
520
499
  .pf-v5-c-button:disabled, .pf-v5-c-button.pf-m-disabled {
@@ -524,7 +503,6 @@
524
503
  --pf-v5-c-badge--m-unread--Color: var(--pf-v5-c-button--disabled__c-badge--Color);
525
504
  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-c-button--disabled__c-badge--BackgroundColor);
526
505
  --pf-v5-c-button--m-primary__c-badge--BorderWidth: 0;
527
- --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--disabled--MixBlendMode);
528
506
  color: var(--pf-v5-c-button--disabled--Color);
529
507
  background-color: var(--pf-v5-c-button--disabled--BackgroundColor);
530
508
  }
package/components/Button/button.scss CHANGED
@@ -14,7 +14,6 @@
14
14
  --#{$button}--BorderWidth: var(--pf-t--global--border--width--button--default);
15
15
  --#{$button}--BorderRadius: var(--pf-t--global--border--radius--pill);
16
16
  --#{$button}--TextDecoration: none;
17
- --#{$button}--MixBlendMode: normal;
18
17
 
19
18
  // Hover
20
19
  --#{$button}--hover--BackgroundColor: transparent;
@@ -75,8 +74,6 @@
75
74
  --#{$button}--m-link--PaddingLeft: var(--pf-t--global--spacer--md);
76
75
  --#{$button}--m-link--Color: var(--pf-t--global--text--color--brand--default);
77
76
  --#{$button}--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
78
- --#{$button}--m-link--hover--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
79
- --#{$button}--m-link--m-clicked--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
80
77
  --#{$button}--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
81
78
  --#{$button}--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
82
79
  --#{$button}--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
@@ -105,8 +102,6 @@
105
102
  --#{$button}--m-link--m-inline--PaddingBottom: 0;
106
103
  --#{$button}--m-link--m-inline--PaddingLeft: 0;
107
104
  --#{$button}--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
108
- --#{$button}--m-link--m-inline--hover--MixBlendMode: normal;
109
- --#{$button}--m-link--m-inline--m-clicked--MixBlendMode: normal;
110
105
  --#{$button}--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
111
106
  --#{$button}--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--#{$button}--m-link--m-inline__progress--Left) + 1rem + var(--pf-t--global--spacer--sm));
112
107
  --#{$button}--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -120,8 +115,6 @@
120
115
  --#{$button}--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
121
116
  --#{$button}--m-plain--Color: var(--pf-t--global--icon--color--regular);
122
117
  --#{$button}--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
123
- --#{$button}--m-plain--hover--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
124
- --#{$button}--m-plain--m-clicked--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
125
118
  --#{$button}--m-plain--MinWidth: calc(1em * var(--#{$button}--LineHeight) + var(--#{$button}--m-plain--PaddingTop) + var(--#{$button}--m-plain--PaddingBottom));
126
119
  --#{$button}--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
127
120
  --#{$button}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
@@ -135,8 +128,6 @@
135
128
  --#{$button}--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
136
129
 
137
130
  // Plain no padding
138
- --#{$button}--m-plain--m-no-padding--hover--MixBlendMode: normal;
139
- --#{$button}--m-plain--m-no-padding--m-clicked--MixBlendMode: normal;
140
131
  --#{$button}--m-plain--m-no-padding--MinWidth: auto;
141
132
  --#{$button}--m-plain--m-no-padding--PaddingTop: 0;
142
133
  --#{$button}--m-plain--m-no-padding--PaddingRight: 0;
@@ -240,7 +231,6 @@
240
231
 
241
232
  // Disabled
242
233
  --#{$button}--disabled--Color: var(--pf-t--global--text--color--on-disabled);
243
- --#{$button}--disabled--MixBlendMode: normal;
244
234
  --#{$button}--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
245
235
  --#{$button}--disabled--BorderColor: transparent;
246
236
  --#{$button}--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
@@ -303,7 +293,6 @@
303
293
  border-start-end-radius: var(--#{$button}--BorderStartEndRadius, var(--#{$button}--BorderRadius));
304
294
  border-end-start-radius: var(--#{$button}--BorderEndStartRadius, var(--#{$button}--BorderRadius));
305
295
  border-end-end-radius: var(--#{$button}--BorderEndEndRadius, var(--#{$button}--BorderRadius));
306
- mix-blend-mode: var(--#{$button}--MixBlendMode);
307
296
 
308
297
  &::after {
309
298
  position: absolute;
@@ -381,13 +370,11 @@
381
370
  --#{$button}--BorderRadius: var(--#{$button}--m-link--BorderRadius);
382
371
  --#{$button}--BackgroundColor: var(--#{$button}--m-link--BackgroundColor);
383
372
  --#{$button}__icon--Color: var(--#{$button}--m-link__icon--Color);
384
- --#{$button}--hover--MixBlendMode: var(--#{$button}--m-link--hover--MixBlendMode);
385
373
  --#{$button}--hover--Color: var(--#{$button}--m-link--hover--Color);
386
374
  --#{$button}--hover--BackgroundColor: var(--#{$button}--m-link--hover--BackgroundColor);
387
375
  --#{$button}--hover__icon--Color: var(--#{$button}--m-link--hover__icon--Color);
388
376
  --#{$button}--m-clicked--Color: var(--#{$button}--m-link--m-clicked--Color);
389
377
  --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-link--m-clicked--BackgroundColor);
390
- --#{$button}--m-clicked--MixBlendMode: var(--#{$button}--m-link--m-clicked--MixBlendMode);
391
378
  --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-link--m-clicked__icon--Color);
392
379
 
393
380
  &.pf-m-inline {
@@ -402,9 +389,7 @@
402
389
  --#{$button}__progress--Left: var(--#{$button}--m-link--m-inline__progress--Left);
403
390
  --#{$button}--hover--TextDecoration: var(--#{$button}--m-link--m-inline--hover--TextDecoration);
404
391
  --#{$button}--hover--BackgroundColor: transparent;
405
- --#{$button}--hover--MixBlendMode: var(--#{$button}--m-link--m-inline--hover--MixBlendMode);
406
392
  --#{$button}--m-clicked--BackgroundColor: transparent;
407
- --#{$button}--m-clicked--MixBlendMode: var(--#{$button}--m-link--m-inline--m-clicked--MixBlendMode);
408
393
  --#{$button}--disabled--BackgroundColor: transparent;
409
394
  --#{$button}--disabled--Color: var(--#{$button}--m-link--m-inline--disabled--Color);
410
395
  --#{$button}--disabled__icon--Color: var(--#{$button}--m-link--m-inline--disabled__icon--Color);
@@ -535,10 +520,8 @@
535
520
  --#{$button}__progress--Color: var(--#{$button}--m-in-progress--m-plain--Color);
536
521
  --#{$button}--hover--Color: var(--#{$button}--m-plain--hover--Color);
537
522
  --#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);
538
- --#{$button}--hover--MixBlendMode: var(--#{$button}--m-plain--hover--MixBlendMode);
539
523
  --#{$button}--m-clicked--Color: var(--#{$button}--m-plain--m-clicked--Color);
540
524
  --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-clicked--BackgroundColor);
541
- --#{$button}--m-clicked--MixBlendMode: var(--#{$button}--m-plain--m-clicked--MixBlendMode);
542
525
  --#{$button}--disabled--Color: var(--#{$button}--m-plain--disabled--Color);
543
526
  --#{$button}--disabled--BackgroundColor: var(--#{$button}--m-plain--disabled--BackgroundColor);
544
527
  --#{$button}--m-small--PaddingTop: var(--#{$button}--m-plain--m-small--PaddingTop);
@@ -554,8 +537,6 @@
554
537
  --#{$button}--m-plain--PaddingRight: var(--#{$button}--m-plain--m-no-padding--PaddingRight);
555
538
  --#{$button}--m-plain--PaddingBottom: var(--#{$button}--m-plain--m-no-padding--PaddingBottom);
556
539
  --#{$button}--m-plain--PaddingLeft: var(--#{$button}--m-plain--m-no-padding--PaddingLeft);
557
- --#{$button}--m-plain--hover--MixBlendMode: var(--#{$button}--m-plain--m-no-padding--hover--MixBlendMode);
558
- --#{$button}--m-plain--m-clicked--MixBlendMode: var(--#{$button}--m-plain--m-no-padding--m-clicked--MixBlendMode);
559
540
 
560
541
  min-width: var(--#{$button}--m-plain--m-no-padding--MinWidth);
561
542
  }
@@ -590,7 +571,6 @@
590
571
  --#{$button}--BorderColor: var(--#{$button}--hover--BorderColor);
591
572
  --#{$button}--BorderWidth: var(--#{$button}--hover--BorderWidth);
592
573
  --#{$button}--TextDecoration: var(--#{$button}--hover--TextDecoration);
593
- --#{$button}--MixBlendMode: var(--#{$button}--hover--MixBlendMode);
594
574
  --#{$button}__icon--Color: var(--#{$button}--hover__icon--Color);
595
575
  }
596
576
 
@@ -599,7 +579,6 @@
599
579
  --#{$button}--BackgroundColor: var(--#{$button}--m-clicked--BackgroundColor);
600
580
  --#{$button}--BorderWidth: var(--#{$button}--m-clicked--BorderWidth);
601
581
  --#{$button}--BorderColor: var(--#{$button}--m-clicked--BorderColor);
602
- --#{$button}--MixBlendMode: var(--#{$button}--m-clicked--MixBlendMode);
603
582
  --#{$button}__icon--Color: var(--#{$button}--m-clicked__icon--Color);
604
583
  }
605
584
 
@@ -616,7 +595,6 @@
616
595
  --#{$badge}--m-unread--Color: var(--#{$button}--disabled__c-badge--Color);
617
596
  --#{$badge}--m-unread--BackgroundColor: var(--#{$button}--disabled__c-badge--BackgroundColor);
618
597
  --#{$button}--m-primary__c-badge--BorderWidth: 0;
619
- --#{$button}--MixBlendMode: var(--#{$button}--disabled--MixBlendMode);
620
598
 
621
599
  color: var(--#{$button}--disabled--Color);
622
600
  background-color: var(--#{$button}--disabled--BackgroundColor);
package/components/Label/label.css CHANGED
@@ -147,7 +147,6 @@
147
147
  --pf-v5-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
148
148
  --pf-v5-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
149
149
  --pf-v5-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
150
- --pf-v5-c-label--m-overflow--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
151
150
  --pf-v5-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
152
151
  --pf-v5-c-label--m-add--BackgroundColor: transparent;
153
152
  --pf-v5-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
@@ -293,7 +292,7 @@
293
292
  --pf-v5-c-label--m-outline__icon--Color: var(--pf-v5-c-label--m-success--m-outline__icon--Color);
294
293
  --pf-v5-c-label--m-outline--BorderColor: var(--pf-v5-c-label--m-success--m-outline--BorderColor);
295
294
  --pf-v5-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v5-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
296
- --pf-v5-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v5-c-label--m-success--m-outline--m-clickable--hover__icon--Color) ;
295
+ --pf-v5-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v5-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
297
296
  }
298
297
  .pf-v5-c-label.pf-m-warning {
299
298
  --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-warning--BackgroundColor);
@@ -305,7 +304,7 @@
305
304
  --pf-v5-c-label--m-outline__icon--Color: var(--pf-v5-c-label--m-warning--m-outline__icon--Color);
306
305
  --pf-v5-c-label--m-outline--BorderColor: var(--pf-v5-c-label--m-warning--m-outline--BorderColor);
307
306
  --pf-v5-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v5-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
308
- --pf-v5-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v5-c-label--m-warning--m-outline--m-clickable--hover__icon--Color) ;
307
+ --pf-v5-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v5-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
309
308
  }
310
309
  .pf-v5-c-label.pf-m-danger {
311
310
  --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-danger--BackgroundColor);
@@ -317,7 +316,7 @@
317
316
  --pf-v5-c-label--m-outline__icon--Color: var(--pf-v5-c-label--m-danger--m-outline__icon--Color);
318
317
  --pf-v5-c-label--m-outline--BorderColor: var(--pf-v5-c-label--m-danger--m-outline--BorderColor);
319
318
  --pf-v5-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v5-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
320
- --pf-v5-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v5-c-label--m-danger--m-outline--m-clickable--hover__icon--Color) ;
319
+ --pf-v5-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v5-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
321
320
  }
322
321
  .pf-v5-c-label.pf-m-info {
323
322
  --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-info--BackgroundColor);
@@ -329,7 +328,7 @@
329
328
  --pf-v5-c-label--m-outline__icon--Color: var(--pf-v5-c-label--m-info--m-outline__icon--Color);
330
329
  --pf-v5-c-label--m-outline--BorderColor: var(--pf-v5-c-label--m-info--m-outline--BorderColor);
331
330
  --pf-v5-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v5-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
332
- --pf-v5-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v5-c-label--m-info--m-outline--m-clickable--hover__icon--Color) ;
331
+ --pf-v5-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v5-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
333
332
  }
334
333
  .pf-v5-c-label.pf-m-custom {
335
334
  --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-custom--BackgroundColor);
@@ -341,7 +340,7 @@
341
340
  --pf-v5-c-label--m-outline__icon--Color: var(--pf-v5-c-label--m-custom--m-outline__icon--Color);
342
341
  --pf-v5-c-label--m-outline--BorderColor: var(--pf-v5-c-label--m-custom--m-outline--BorderColor);
343
342
  --pf-v5-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v5-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
344
- --pf-v5-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v5-c-label--m-success--m-outline--m-clickable--hover__icon--Color) ;
343
+ --pf-v5-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v5-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
345
344
  }
346
345
  .pf-v5-c-label.pf-m-compact {
347
346
  --pf-v5-c-label--PaddingTop: var(--pf-v5-c-label--m-compact--PaddingTop);
@@ -386,7 +385,6 @@
386
385
  .pf-v5-c-label.pf-m-overflow {
387
386
  --pf-v5-c-label--Color: var(--pf-v5-c-label--m-overflow--Color);
388
387
  --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-overflow--BackgroundColor);
389
- mix-blend-mode: var(--pf-v5-c-label--m-overflow--MixBlendMode);
390
388
  }
391
389
  .pf-v5-c-label.pf-m-overflow:is(:hover, :focus) {
392
390
  --pf-v5-c-label--m-overflow--Color: var(--pf-v5-c-label--m-overflow--hover--Color);
package/components/Label/label.scss CHANGED
@@ -186,7 +186,6 @@
186
186
  --#{$label}--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
187
187
  --#{$label}--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
188
188
  --#{$label}--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
189
- --#{$label}--m-overflow--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
190
189
 
191
190
  // Add
192
191
  --#{$label}--m-add--Color: var(--pf-t--global--text--color--brand--default);
@@ -358,7 +357,7 @@
358
357
  --#{$label}--m-outline__icon--Color: var(--#{$label}--m-success--m-outline__icon--Color);
359
358
  --#{$label}--m-outline--BorderColor: var(--#{$label}--m-success--m-outline--BorderColor);
360
359
  --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-success--m-outline--m-clickable--hover--BorderColor);
361
- --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-success--m-outline--m-clickable--hover__icon--Color)
360
+ --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-success--m-outline--m-clickable--hover__icon--Color);
362
361
  }
363
362
 
364
363
  &.pf-m-warning {
@@ -371,7 +370,7 @@
371
370
  --#{$label}--m-outline__icon--Color: var(--#{$label}--m-warning--m-outline__icon--Color);
372
371
  --#{$label}--m-outline--BorderColor: var(--#{$label}--m-warning--m-outline--BorderColor);
373
372
  --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-warning--m-outline--m-clickable--hover--BorderColor);
374
- --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-warning--m-outline--m-clickable--hover__icon--Color)
373
+ --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-warning--m-outline--m-clickable--hover__icon--Color);
375
374
  }
376
375
 
377
376
  &.pf-m-danger {
@@ -384,7 +383,7 @@
384
383
  --#{$label}--m-outline__icon--Color: var(--#{$label}--m-danger--m-outline__icon--Color);
385
384
  --#{$label}--m-outline--BorderColor: var(--#{$label}--m-danger--m-outline--BorderColor);
386
385
  --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-danger--m-outline--m-clickable--hover--BorderColor);
387
- --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-danger--m-outline--m-clickable--hover__icon--Color)
386
+ --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-danger--m-outline--m-clickable--hover__icon--Color);
388
387
  }
389
388
 
390
389
  &.pf-m-info {
@@ -397,7 +396,7 @@
397
396
  --#{$label}--m-outline__icon--Color: var(--#{$label}--m-info--m-outline__icon--Color);
398
397
  --#{$label}--m-outline--BorderColor: var(--#{$label}--m-info--m-outline--BorderColor);
399
398
  --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-info--m-outline--m-clickable--hover--BorderColor);
400
- --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-info--m-outline--m-clickable--hover__icon--Color)
399
+ --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-info--m-outline--m-clickable--hover__icon--Color);
401
400
  }
402
401
 
403
402
  &.pf-m-custom {
@@ -410,7 +409,7 @@
410
409
  --#{$label}--m-outline__icon--Color: var(--#{$label}--m-custom--m-outline__icon--Color);
411
410
  --#{$label}--m-outline--BorderColor: var(--#{$label}--m-custom--m-outline--BorderColor);
412
411
  --#{$label}--m-outline--m-clickable--hover--BorderColor: var(--#{$label}--m-custom--m-outline--m-clickable--hover--BorderColor);
413
- --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-success--m-outline--m-clickable--hover__icon--Color)
412
+ --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--#{$label}--m-success--m-outline--m-clickable--hover__icon--Color);
414
413
  }
415
414
 
416
415
  &.pf-m-compact {
@@ -465,8 +464,6 @@
465
464
  --#{$label}--Color: var(--#{$label}--m-overflow--Color);
466
465
  --#{$label}--BackgroundColor: var(--#{$label}--m-overflow--BackgroundColor);
467
466
 
468
- mix-blend-mode: var(--#{$label}--m-overflow--MixBlendMode);
469
-
470
467
  &:is(:hover, :focus) {
471
468
  --#{$label}--m-overflow--Color: var(--#{$label}--m-overflow--hover--Color);
472
469
  --#{$label}--m-overflow--BackgroundColor: var(--#{$label}--m-overflow--hover--BackgroundColor);
package/components/Menu/menu.css CHANGED
@@ -184,8 +184,6 @@
184
184
  --pf-v5-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
185
185
  --pf-v5-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
186
186
  --pf-v5-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
187
- --pf-v5-c-menu__list-item--MixBlendMode: normal;
188
- --pf-v5-c-menu__list-item--MixBlendMode--hover: var(--pf-t--global--background--color--action--plain--hover--blend);
189
187
  --pf-v5-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
190
188
  --pf-v5-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
191
189
  --pf-v5-c-menu__list-item--has--menu-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -476,7 +474,6 @@
476
474
  inset: 0;
477
475
  content: "";
478
476
  background-color: var(--pf-v5-c-menu__list-item--BackgroundColor);
479
- mix-blend-mode: var(--pf-v5-c-menu__list-item--MixBlendMode);
480
477
  }
481
478
  .pf-v5-c-menu__list-item.pf-m-load {
482
479
  --pf-v5-c-menu__item--Color: var(--pf-v5-c-menu__list-item--m-load__item--Color);
@@ -500,7 +497,6 @@
500
497
  }
501
498
  .pf-v5-c-menu__list-item:has(> :hover) {
502
499
  --pf-v5-c-menu__list-item--BackgroundColor: var(--pf-v5-c-menu__list-item--hover--BackgroundColor);
503
- --pf-v5-c-menu__list-item--MixBlendMode: var(--pf-v5-c-menu__list-item--MixBlendMode--hover);
504
500
  }
505
501
  .pf-v5-c-menu__list-item:has(> :hover) .pf-v5-c-menu__item-select-icon,
506
502
  .pf-v5-c-menu__list-item:has(> :hover) .pf-v5-c-menu__item-external-icon {
package/components/Menu/menu.scss CHANGED
@@ -38,8 +38,6 @@
38
38
  --#{$menu}__list-item--Color: var(--pf-t--global--text--color--regular);
39
39
  --#{$menu}__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
40
40
  --#{$menu}__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
41
- --#{$menu}__list-item--MixBlendMode: normal;
42
- --#{$menu}__list-item--MixBlendMode--hover: var(--pf-t--global--background--color--action--plain--hover--blend);
43
41
  --#{$menu}__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
44
42
  --#{$menu}__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
45
43
  --#{$menu}__list-item--has--menu-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -445,7 +443,6 @@
445
443
  inset: 0;
446
444
  content: "";
447
445
  background-color: var(--#{$menu}__list-item--BackgroundColor);
448
- mix-blend-mode: var(--#{$menu}__list-item--MixBlendMode);
449
446
  }
450
447
 
451
448
  // - Menu item load
@@ -479,7 +476,6 @@
479
476
 
480
477
  &:has(> :hover) {
481
478
  --#{$menu}__list-item--BackgroundColor: var(--#{$menu}__list-item--hover--BackgroundColor);
482
- --#{$menu}__list-item--MixBlendMode: var(--#{$menu}__list-item--MixBlendMode--hover);
483
479
 
484
480
  .#{$menu}__item-select-icon,
485
481
  .#{$menu}__item-external-icon {
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -96,7 +96,6 @@
96
96
  --pf-v5-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
97
97
  --pf-v5-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
98
98
  --pf-v5-c-menu-toggle--m-plain--BorderColor: transparent;
99
- --pf-v5-c-menu-toggle--m-plain--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
100
99
  --pf-v5-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
101
100
  --pf-v5-c-menu-toggle--m-plain--active--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
102
101
  --pf-v5-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
@@ -195,7 +194,6 @@
195
194
  --pf-v5-c-menu-toggle--expanded--BackgroundColor: var(--pf-v5-c-menu-toggle--m-plain--expanded--BackgroundColor);
196
195
  --pf-v5-c-menu-toggle--disabled--Color: var(--pf-v5-c-menu-toggle--m-plain--disabled--Color);
197
196
  --pf-v5-c-menu-toggle--disabled--BackgroundColor: var(--pf-v5-c-menu-toggle--m-plain--disabled--BackgroundColor);
198
- mix-blend-mode: var(--pf-v5-c-menu-toggle--m-plain--MixBlendMode);
199
197
  }
200
198
  .pf-v5-c-menu-toggle.pf-m-plain::before {
201
199
  border: none;
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -143,7 +143,6 @@
143
143
  --#{$menu-toggle}--m-plain--Color: var(--pf-t--global--icon--color--regular);
144
144
  --#{$menu-toggle}--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
145
145
  --#{$menu-toggle}--m-plain--BorderColor: transparent;
146
- --#{$menu-toggle}--m-plain--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
147
146
  --#{$menu-toggle}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
148
147
  --#{$menu-toggle}--m-plain--active--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
149
148
  --#{$menu-toggle}--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
@@ -255,8 +254,6 @@
255
254
  --#{$menu-toggle}--disabled--Color: var(--#{$menu-toggle}--m-plain--disabled--Color);
256
255
  --#{$menu-toggle}--disabled--BackgroundColor: var(--#{$menu-toggle}--m-plain--disabled--BackgroundColor);
257
256
 
258
- mix-blend-mode: var(--#{$menu-toggle}--m-plain--MixBlendMode);
259
-
260
257
  &::before {
261
258
  border: none;
262
259
  }
package/components/SimpleList/simple-list.css CHANGED
@@ -10,7 +10,6 @@
10
10
  --pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
11
11
  --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-t--global--text--color--subtle);
12
12
  --pf-v5-c-simple-list__item-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
13
- --pf-v5-c-simple-list__item-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
14
13
  --pf-v5-c-simple-list__item-link--BorderRadius: var(--pf-t--global--border--radius--tiny);
15
14
  --pf-v5-c-simple-list__item-link--m-link--Color: var(--pf-t--global--text--color--link--default);
16
15
  --pf-v5-c-simple-list__item-link--m-link--m-current--Color: var(--pf-t--global--text--color--link--hover);
@@ -49,12 +48,10 @@
49
48
  --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--hover--BackgroundColor);
50
49
  --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--hover--Color);
51
50
  text-decoration: none;
52
- mix-blend-mode: var(--pf-v5-c-simple-list__item-link--MixBlendMode);
53
51
  }
54
52
  .pf-v5-c-simple-list__item-link.pf-m-current {
55
53
  --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--m-current--BackgroundColor);
56
54
  --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--m-current--Color);
57
- mix-blend-mode: var(--pf-v5-c-simple-list__item-link--MixBlendMode);
58
55
  }
59
56
 
60
57
  .pf-v5-c-simple-list__title {
package/components/SimpleList/simple-list.scss CHANGED
@@ -13,7 +13,6 @@
13
13
  --#{$simple-list}__item-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
14
14
  --#{$simple-list}__item-link--hover--Color: var(--pf-t--global--text--color--subtle);
15
15
  --#{$simple-list}__item-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
16
- --#{$simple-list}__item-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
17
16
  --#{$simple-list}__item-link--BorderRadius: var(--pf-t--global--border--radius--tiny);
18
17
 
19
18
  // Simple list item link
@@ -61,14 +60,11 @@
61
60
  --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--hover--Color);
62
61
 
63
62
  text-decoration: none;
64
- mix-blend-mode: var(--#{$simple-list}__item-link--MixBlendMode);
65
63
  }
66
64
 
67
65
  &.pf-m-current {
68
66
  --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--m-current--BackgroundColor);
69
67
  --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--m-current--Color);
70
-
71
- mix-blend-mode: var(--#{$simple-list}__item-link--MixBlendMode);
72
68
  }
73
69
  }
74
70