@patternfly/patternfly 6.0.0-alpha.70 → 6.0.0-alpha.71

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 (8) hide show
  1. package/components/Button/button.css +42 -22
  2. package/components/Button/button.scss +47 -23
  3. package/package.json +1 -1
  4. package/patternfly-no-globals.css +42 -22
  5. package/patternfly-theme-dark-unversioned.css +42 -22
  6. package/patternfly.css +42 -22
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
package/components/Button/button.css CHANGED
@@ -63,7 +63,8 @@
63
63
  --pf-v5-c-button--m-link--PaddingLeft: var(--pf-t--global--spacer--md);
64
64
  --pf-v5-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
65
65
  --pf-v5-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
66
- --pf-v5-c-button--m-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
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);
67
68
  --pf-v5-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
68
69
  --pf-v5-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
69
70
  --pf-v5-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
@@ -72,19 +73,24 @@
72
73
  --pf-v5-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
73
74
  --pf-v5-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
74
75
  --pf-v5-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
76
+ --pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
75
77
  --pf-v5-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
76
78
  --pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
79
+ --pf-v5-c-button--m-link--m-danger--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
77
80
  --pf-v5-c-button--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
78
81
  --pf-v5-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
82
+ --pf-v5-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
79
83
  --pf-v5-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
80
84
  --pf-v5-c-button--m-link--m-inline--FontSize: initial;
81
85
  --pf-v5-c-button--m-link--m-inline--LineHeight: initial;
82
86
  --pf-v5-c-button--m-link--m-inline--FontWeight: initial;
83
- --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
84
87
  --pf-v5-c-button--m-link--m-inline--PaddingTop: 0;
85
88
  --pf-v5-c-button--m-link--m-inline--PaddingRight: 0;
86
89
  --pf-v5-c-button--m-link--m-inline--PaddingBottom: 0;
87
90
  --pf-v5-c-button--m-link--m-inline--PaddingLeft: 0;
91
+ --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
88
94
  --pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
89
95
  --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));
90
96
  --pf-v5-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -96,18 +102,21 @@
96
102
  --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
97
103
  --pf-v5-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
98
104
  --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
99
- --pf-v5-c-button--m-plain--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
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);
100
107
  --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));
101
108
  --pf-v5-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
102
109
  --pf-v5-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
103
110
  --pf-v5-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
104
111
  --pf-v5-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
105
- --pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
112
+ --pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
113
+ --pf-v5-c-button--m-plain--disabled--BackgroundColor: transparent;
106
114
  --pf-v5-c-button--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
107
115
  --pf-v5-c-button--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
108
116
  --pf-v5-c-button--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
109
117
  --pf-v5-c-button--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
110
- --pf-v5-c-button--m-plain--m-no-padding--MixBlendMode: normal;
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;
111
120
  --pf-v5-c-button--m-plain--m-no-padding--MinWidth: auto;
112
121
  --pf-v5-c-button--m-plain--m-no-padding--PaddingTop: 0;
113
122
  --pf-v5-c-button--m-plain--m-no-padding--PaddingRight: 0;
@@ -191,9 +200,10 @@
191
200
  --pf-v5-c-button--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
192
201
  --pf-v5-c-button--m-small--PaddingLeft: var(--pf-t--global--spacer--md);
193
202
  --pf-v5-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
194
- --pf-v5-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
203
+ --pf-v5-c-button--disabled--MixBlendMode: normal;
195
204
  --pf-v5-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
196
205
  --pf-v5-c-button--disabled--BorderColor: transparent;
206
+ --pf-v5-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
197
207
  --pf-v5-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
198
208
  --pf-v5-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
199
209
  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -247,6 +257,7 @@
247
257
  border-start-end-radius: var(--pf-v5-c-button--BorderStartEndRadius, var(--pf-v5-c-button--BorderRadius));
248
258
  border-end-start-radius: var(--pf-v5-c-button--BorderEndStartRadius, var(--pf-v5-c-button--BorderRadius));
249
259
  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);
250
261
  }
251
262
  .pf-v5-c-button::after {
252
263
  position: absolute;
@@ -313,13 +324,14 @@
313
324
  --pf-v5-c-button--Color: var(--pf-v5-c-button--m-link--Color);
314
325
  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-link--BorderRadius);
315
326
  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-link--BackgroundColor);
316
- --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-link--MixBlendMode);
317
327
  --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);
318
329
  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-link--hover--Color);
319
330
  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-link--hover--BackgroundColor);
320
331
  --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-link--hover__icon--Color);
321
332
  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-link--m-clicked--Color);
322
333
  --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);
323
335
  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-link--m-clicked__icon--Color);
324
336
  }
325
337
  .pf-v5-c-button.pf-m-link.pf-m-inline {
@@ -334,7 +346,9 @@
334
346
  --pf-v5-c-button__progress--Left: var(--pf-v5-c-button--m-link--m-inline__progress--Left);
335
347
  --pf-v5-c-button--hover--TextDecoration: var(--pf-v5-c-button--m-link--m-inline--hover--TextDecoration);
336
348
  --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);
337
350
  --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);
338
352
  --pf-v5-c-button--disabled--BackgroundColor: transparent;
339
353
  --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-link--m-inline--disabled--Color);
340
354
  --pf-v5-c-button--disabled__icon--Color: var(--pf-v5-c-button--m-link--m-inline--disabled__icon--Color);
@@ -343,16 +357,16 @@
343
357
  white-space: normal;
344
358
  outline-offset: 0.125rem;
345
359
  }
346
- .pf-v5-c-button.pf-m-link:where(.pf-m-danger) {
360
+ .pf-v5-c-button.pf-m-link.pf-m-danger {
347
361
  --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--Color);
362
+ --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--BackgroundColor);
348
363
  --pf-v5-c-button--m-danger__icon--Color: var(--pf-v5-c-button--m-link--m-danger__icon--Color);
349
364
  --pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-c-button--m-link--m-danger--hover--Color);
365
+ --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--hover--BackgroundColor);
350
366
  --pf-v5-c-button--m-danger--hover__icon--Color: var(--pf-v5-c-button--m-link--m-danger--hover__icon--Color);
351
367
  --pf-v5-c-button--m-danger--m-clicked--Color: var(--pf-v5-c-button--m-link--m-danger--m-clicked--Color);
368
+ --pf-v5-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--m-clicked--BackgroundColor);
352
369
  --pf-v5-c-button--m-danger--m-clicked__icon--Color: var(--pf-v5-c-button--m-link--m-danger--m-clicked__icon--Color);
353
- --pf-v5-c-button--m-danger--BackgroundColor: transparent;
354
- --pf-v5-c-button--m-danger--hover--BackgroundColor: transparent;
355
- --pf-v5-c-button--m-danger--m-clicked--BackgroundColor: transparent;
356
370
  }
357
371
  .pf-v5-c-button.pf-m-link.pf-m-display-lg {
358
372
  --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-link--m-display-lg--FontSize);
@@ -397,7 +411,7 @@
397
411
  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-control--m-clicked--BackgroundColor);
398
412
  --pf-v5-c-button--m-clicked--BorderColor: var(--pf-v5-c-button--m-control--m-clicked--BorderColor);
399
413
  --pf-v5-c-button--m-clicked--BorderWidth: var(--pf-v5-c-button--m-control--m-clicked--BorderWidth);
400
- --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-control--m-clicked__icon--Color);
414
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-control--m-clicked__icon--Color);
401
415
  }
402
416
  .pf-v5-c-button.pf-m-stateful {
403
417
  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-stateful--BorderRadius);
@@ -435,24 +449,26 @@
435
449
  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-attention--m-clicked__icon--Color);
436
450
  }
437
451
  .pf-v5-c-button.pf-m-plain {
452
+ --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-plain--BorderRadius);
453
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-plain--Color);
454
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-plain--BackgroundColor);
438
455
  --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-plain--PaddingTop);
439
456
  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-plain--PaddingRight);
440
457
  --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-plain--PaddingBottom);
441
458
  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-plain--PaddingLeft);
442
- --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-plain--MixBlendMode);
443
- --pf-v5-c-button--m-small--PaddingTop: var(--pf-v5-c-button--m-plain--m-small--PaddingTop);
444
- --pf-v5-c-button--m-small--PaddingRight: var(--pf-v5-c-button--m-plain--m-small--PaddingRight);
445
- --pf-v5-c-button--m-small--PaddingBottom: var(--pf-v5-c-button--m-plain--m-small--PaddingBottom);
446
- --pf-v5-c-button--m-small--PaddingLeft: var(--pf-v5-c-button--m-plain--m-small--PaddingLeft);
447
- --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-plain--BorderRadius);
448
- --pf-v5-c-button--Color: var(--pf-v5-c-button--m-plain--Color);
449
- --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-plain--BackgroundColor);
459
+ --pf-v5-c-button__progress--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
450
460
  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-plain--hover--Color);
451
461
  --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);
452
463
  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-plain--m-clicked--Color);
453
464
  --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);
454
466
  --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-plain--disabled--Color);
455
- --pf-v5-c-button__progress--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
467
+ --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-plain--disabled--BackgroundColor);
468
+ --pf-v5-c-button--m-small--PaddingTop: var(--pf-v5-c-button--m-plain--m-small--PaddingTop);
469
+ --pf-v5-c-button--m-small--PaddingRight: var(--pf-v5-c-button--m-plain--m-small--PaddingRight);
470
+ --pf-v5-c-button--m-small--PaddingBottom: var(--pf-v5-c-button--m-plain--m-small--PaddingBottom);
471
+ --pf-v5-c-button--m-small--PaddingLeft: var(--pf-v5-c-button--m-plain--m-small--PaddingLeft);
456
472
  min-width: var(--pf-v5-c-button--m-plain--MinWidth);
457
473
  }
458
474
  .pf-v5-c-button.pf-m-plain.pf-m-no-padding {
@@ -463,7 +479,8 @@
463
479
  --pf-v5-c-button--m-plain--PaddingRight: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingRight);
464
480
  --pf-v5-c-button--m-plain--PaddingBottom: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingBottom);
465
481
  --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingLeft);
466
- --pf-v5-c-button--m-plain--MixBlendMode: var(--pf-v5-c-button--m-plain--m-no-padding--MixBlendMode);
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);
467
484
  min-width: var(--pf-v5-c-button--m-plain--m-no-padding--MinWidth);
468
485
  }
469
486
  .pf-v5-c-button.pf-m-block {
@@ -489,6 +506,7 @@
489
506
  --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--hover--BorderColor);
490
507
  --pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--hover--BorderWidth);
491
508
  --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);
492
510
  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--hover__icon--Color);
493
511
  }
494
512
  .pf-v5-c-button.pf-m-clicked {
@@ -496,6 +514,7 @@
496
514
  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-clicked--BackgroundColor);
497
515
  --pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--m-clicked--BorderWidth);
498
516
  --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);
499
518
  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-clicked__icon--Color);
500
519
  }
501
520
  .pf-v5-c-button:disabled, .pf-v5-c-button.pf-m-disabled {
@@ -505,6 +524,7 @@
505
524
  --pf-v5-c-badge--m-unread--Color: var(--pf-v5-c-button--disabled__c-badge--Color);
506
525
  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-c-button--disabled__c-badge--BackgroundColor);
507
526
  --pf-v5-c-button--m-primary__c-badge--BorderWidth: 0;
527
+ --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--disabled--MixBlendMode);
508
528
  color: var(--pf-v5-c-button--disabled--Color);
509
529
  background-color: var(--pf-v5-c-button--disabled--BackgroundColor);
510
530
  }
package/components/Button/button.scss CHANGED
@@ -75,7 +75,8 @@
75
75
  --#{$button}--m-link--PaddingLeft: var(--pf-t--global--spacer--md);
76
76
  --#{$button}--m-link--Color: var(--pf-t--global--text--color--brand--default);
77
77
  --#{$button}--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
78
- --#{$button}--m-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
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);
79
80
  --#{$button}--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
80
81
  --#{$button}--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
81
82
  --#{$button}--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
@@ -83,22 +84,29 @@
83
84
  --#{$button}--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
84
85
  --#{$button}--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
85
86
  --#{$button}--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
87
+
88
+ // Link danger
86
89
  --#{$button}--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
90
+ --#{$button}--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
87
91
  --#{$button}--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
88
92
  --#{$button}--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
93
+ --#{$button}--m-link--m-danger--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
89
94
  --#{$button}--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
90
95
  --#{$button}--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
96
+ --#{$button}--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
91
97
  --#{$button}--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
92
98
 
93
- // Inline link
99
+ // Link inline
94
100
  --#{$button}--m-link--m-inline--FontSize: initial;
95
101
  --#{$button}--m-link--m-inline--LineHeight: initial;
96
102
  --#{$button}--m-link--m-inline--FontWeight: initial;
97
- --#{$button}--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
98
103
  --#{$button}--m-link--m-inline--PaddingTop: 0;
99
104
  --#{$button}--m-link--m-inline--PaddingRight: 0;
100
105
  --#{$button}--m-link--m-inline--PaddingBottom: 0;
101
106
  --#{$button}--m-link--m-inline--PaddingLeft: 0;
107
+ --#{$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
102
110
  --#{$button}--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
103
111
  --#{$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));
104
112
  --#{$button}--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -112,18 +120,23 @@
112
120
  --#{$button}--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
113
121
  --#{$button}--m-plain--Color: var(--pf-t--global--icon--color--regular);
114
122
  --#{$button}--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
115
- --#{$button}--m-plain--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
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);
116
125
  --#{$button}--m-plain--MinWidth: calc(1em * var(--#{$button}--LineHeight) + var(--#{$button}--m-plain--PaddingTop) + var(--#{$button}--m-plain--PaddingBottom));
117
126
  --#{$button}--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
118
127
  --#{$button}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
119
128
  --#{$button}--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
120
129
  --#{$button}--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
121
- --#{$button}--m-plain--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
130
+ --#{$button}--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
131
+ --#{$button}--m-plain--disabled--BackgroundColor: transparent;
122
132
  --#{$button}--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
123
133
  --#{$button}--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
124
134
  --#{$button}--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
125
135
  --#{$button}--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
126
- --#{$button}--m-plain--m-no-padding--MixBlendMode: normal;
136
+
137
+ // Plain no padding
138
+ --#{$button}--m-plain--m-no-padding--hover--MixBlendMode: normal;
139
+ --#{$button}--m-plain--m-no-padding--m-clicked--MixBlendMode: normal;
127
140
  --#{$button}--m-plain--m-no-padding--MinWidth: auto;
128
141
  --#{$button}--m-plain--m-no-padding--PaddingTop: 0;
129
142
  --#{$button}--m-plain--m-no-padding--PaddingRight: 0;
@@ -227,9 +240,10 @@
227
240
 
228
241
  // Disabled
229
242
  --#{$button}--disabled--Color: var(--pf-t--global--text--color--on-disabled);
230
- --#{$button}--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
243
+ --#{$button}--disabled--MixBlendMode: normal;
231
244
  --#{$button}--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
232
245
  --#{$button}--disabled--BorderColor: transparent;
246
+ --#{$button}--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
233
247
 
234
248
  // Icons
235
249
  --#{$button}__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -289,6 +303,7 @@
289
303
  border-start-end-radius: var(--#{$button}--BorderStartEndRadius, var(--#{$button}--BorderRadius));
290
304
  border-end-start-radius: var(--#{$button}--BorderEndStartRadius, var(--#{$button}--BorderRadius));
291
305
  border-end-end-radius: var(--#{$button}--BorderEndEndRadius, var(--#{$button}--BorderRadius));
306
+ mix-blend-mode: var(--#{$button}--MixBlendMode);
292
307
 
293
308
  &::after {
294
309
  position: absolute;
@@ -365,13 +380,14 @@
365
380
  --#{$button}--Color: var(--#{$button}--m-link--Color);
366
381
  --#{$button}--BorderRadius: var(--#{$button}--m-link--BorderRadius);
367
382
  --#{$button}--BackgroundColor: var(--#{$button}--m-link--BackgroundColor);
368
- --#{$button}--MixBlendMode: var(--#{$button}--m-link--MixBlendMode);
369
383
  --#{$button}__icon--Color: var(--#{$button}--m-link__icon--Color);
384
+ --#{$button}--hover--MixBlendMode: var(--#{$button}--m-link--hover--MixBlendMode);
370
385
  --#{$button}--hover--Color: var(--#{$button}--m-link--hover--Color);
371
386
  --#{$button}--hover--BackgroundColor: var(--#{$button}--m-link--hover--BackgroundColor);
372
387
  --#{$button}--hover__icon--Color: var(--#{$button}--m-link--hover__icon--Color);
373
388
  --#{$button}--m-clicked--Color: var(--#{$button}--m-link--m-clicked--Color);
374
389
  --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-link--m-clicked--BackgroundColor);
390
+ --#{$button}--m-clicked--MixBlendMode: var(--#{$button}--m-link--m-clicked--MixBlendMode);
375
391
  --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-link--m-clicked__icon--Color);
376
392
 
377
393
  &.pf-m-inline {
@@ -386,7 +402,9 @@
386
402
  --#{$button}__progress--Left: var(--#{$button}--m-link--m-inline__progress--Left);
387
403
  --#{$button}--hover--TextDecoration: var(--#{$button}--m-link--m-inline--hover--TextDecoration);
388
404
  --#{$button}--hover--BackgroundColor: transparent;
405
+ --#{$button}--hover--MixBlendMode: var(--#{$button}--m-link--m-inline--hover--MixBlendMode);
389
406
  --#{$button}--m-clicked--BackgroundColor: transparent;
407
+ --#{$button}--m-clicked--MixBlendMode: var(--#{$button}--m-link--m-inline--m-clicked--MixBlendMode);
390
408
  --#{$button}--disabled--BackgroundColor: transparent;
391
409
  --#{$button}--disabled--Color: var(--#{$button}--m-link--m-inline--disabled--Color);
392
410
  --#{$button}--disabled__icon--Color: var(--#{$button}--m-link--m-inline--disabled__icon--Color);
@@ -397,16 +415,16 @@
397
415
  outline-offset: #{pf-size-prem(2px)};
398
416
  }
399
417
 
400
- &:where(.pf-m-danger) {
418
+ &.pf-m-danger {
401
419
  --#{$button}--m-danger--Color: var(--#{$button}--m-link--m-danger--Color);
420
+ --#{$button}--m-danger--BackgroundColor: var(--#{$button}--m-link--m-danger--BackgroundColor);
402
421
  --#{$button}--m-danger__icon--Color: var(--#{$button}--m-link--m-danger__icon--Color);
403
422
  --#{$button}--m-danger--hover--Color: var(--#{$button}--m-link--m-danger--hover--Color);
423
+ --#{$button}--m-danger--hover--BackgroundColor: var(--#{$button}--m-link--m-danger--hover--BackgroundColor);
404
424
  --#{$button}--m-danger--hover__icon--Color: var(--#{$button}--m-link--m-danger--hover__icon--Color);
405
425
  --#{$button}--m-danger--m-clicked--Color: var(--#{$button}--m-link--m-danger--m-clicked--Color);
426
+ --#{$button}--m-danger--m-clicked--BackgroundColor: var(--#{$button}--m-link--m-danger--m-clicked--BackgroundColor);
406
427
  --#{$button}--m-danger--m-clicked__icon--Color: var(--#{$button}--m-link--m-danger--m-clicked__icon--Color);
407
- --#{$button}--m-danger--BackgroundColor: transparent;
408
- --#{$button}--m-danger--hover--BackgroundColor: transparent;
409
- --#{$button}--m-danger--m-clicked--BackgroundColor: transparent;
410
428
  }
411
429
 
412
430
  &.pf-m-display-lg {
@@ -459,7 +477,7 @@
459
477
  --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-control--m-clicked--BackgroundColor);
460
478
  --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-control--m-clicked--BorderColor);
461
479
  --#{$button}--m-clicked--BorderWidth: var(--#{$button}--m-control--m-clicked--BorderWidth);
462
- --#{$button}--m-clicked--Color: var(--#{$button}--m-control--m-clicked__icon--Color);
480
+ --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-control--m-clicked__icon--Color);
463
481
  }
464
482
 
465
483
  // Stateful
@@ -507,24 +525,26 @@
507
525
 
508
526
  // Icon buttons
509
527
  &.pf-m-plain {
528
+ --#{$button}--BorderRadius: var(--#{$button}--m-plain--BorderRadius);
529
+ --#{$button}--Color: var(--#{$button}--m-plain--Color);
530
+ --#{$button}--BackgroundColor: var(--#{$button}--m-plain--BackgroundColor);
510
531
  --#{$button}--PaddingTop: var(--#{$button}--m-plain--PaddingTop);
511
532
  --#{$button}--PaddingRight: var(--#{$button}--m-plain--PaddingRight);
512
533
  --#{$button}--PaddingBottom: var(--#{$button}--m-plain--PaddingBottom);
513
534
  --#{$button}--PaddingLeft: var(--#{$button}--m-plain--PaddingLeft);
514
- --#{$button}--MixBlendMode: var(--#{$button}--m-plain--MixBlendMode);
515
- --#{$button}--m-small--PaddingTop: var(--#{$button}--m-plain--m-small--PaddingTop);
516
- --#{$button}--m-small--PaddingRight: var(--#{$button}--m-plain--m-small--PaddingRight);
517
- --#{$button}--m-small--PaddingBottom: var(--#{$button}--m-plain--m-small--PaddingBottom);
518
- --#{$button}--m-small--PaddingLeft: var(--#{$button}--m-plain--m-small--PaddingLeft);
519
- --#{$button}--BorderRadius: var(--#{$button}--m-plain--BorderRadius);
520
- --#{$button}--Color: var(--#{$button}--m-plain--Color);
521
- --#{$button}--BackgroundColor: var(--#{$button}--m-plain--BackgroundColor);
535
+ --#{$button}__progress--Color: var(--#{$button}--m-in-progress--m-plain--Color);
522
536
  --#{$button}--hover--Color: var(--#{$button}--m-plain--hover--Color);
523
537
  --#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);
538
+ --#{$button}--hover--MixBlendMode: var(--#{$button}--m-plain--hover--MixBlendMode);
524
539
  --#{$button}--m-clicked--Color: var(--#{$button}--m-plain--m-clicked--Color);
525
540
  --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-clicked--BackgroundColor);
541
+ --#{$button}--m-clicked--MixBlendMode: var(--#{$button}--m-plain--m-clicked--MixBlendMode);
526
542
  --#{$button}--disabled--Color: var(--#{$button}--m-plain--disabled--Color);
527
- --#{$button}__progress--Color: var(--#{$button}--m-in-progress--m-plain--Color);
543
+ --#{$button}--disabled--BackgroundColor: var(--#{$button}--m-plain--disabled--BackgroundColor);
544
+ --#{$button}--m-small--PaddingTop: var(--#{$button}--m-plain--m-small--PaddingTop);
545
+ --#{$button}--m-small--PaddingRight: var(--#{$button}--m-plain--m-small--PaddingRight);
546
+ --#{$button}--m-small--PaddingBottom: var(--#{$button}--m-plain--m-small--PaddingBottom);
547
+ --#{$button}--m-small--PaddingLeft: var(--#{$button}--m-plain--m-small--PaddingLeft);
528
548
 
529
549
  &.pf-m-no-padding {
530
550
  --#{$button}--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--BackgroundColor);
@@ -534,7 +554,8 @@
534
554
  --#{$button}--m-plain--PaddingRight: var(--#{$button}--m-plain--m-no-padding--PaddingRight);
535
555
  --#{$button}--m-plain--PaddingBottom: var(--#{$button}--m-plain--m-no-padding--PaddingBottom);
536
556
  --#{$button}--m-plain--PaddingLeft: var(--#{$button}--m-plain--m-no-padding--PaddingLeft);
537
- --#{$button}--m-plain--MixBlendMode: var(--#{$button}--m-plain--m-no-padding--MixBlendMode);
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);
538
559
 
539
560
  min-width: var(--#{$button}--m-plain--m-no-padding--MinWidth);
540
561
  }
@@ -569,6 +590,7 @@
569
590
  --#{$button}--BorderColor: var(--#{$button}--hover--BorderColor);
570
591
  --#{$button}--BorderWidth: var(--#{$button}--hover--BorderWidth);
571
592
  --#{$button}--TextDecoration: var(--#{$button}--hover--TextDecoration);
593
+ --#{$button}--MixBlendMode: var(--#{$button}--hover--MixBlendMode);
572
594
  --#{$button}__icon--Color: var(--#{$button}--hover__icon--Color);
573
595
  }
574
596
 
@@ -577,6 +599,7 @@
577
599
  --#{$button}--BackgroundColor: var(--#{$button}--m-clicked--BackgroundColor);
578
600
  --#{$button}--BorderWidth: var(--#{$button}--m-clicked--BorderWidth);
579
601
  --#{$button}--BorderColor: var(--#{$button}--m-clicked--BorderColor);
602
+ --#{$button}--MixBlendMode: var(--#{$button}--m-clicked--MixBlendMode);
580
603
  --#{$button}__icon--Color: var(--#{$button}--m-clicked__icon--Color);
581
604
  }
582
605
 
@@ -593,6 +616,7 @@
593
616
  --#{$badge}--m-unread--Color: var(--#{$button}--disabled__c-badge--Color);
594
617
  --#{$badge}--m-unread--BackgroundColor: var(--#{$button}--disabled__c-badge--BackgroundColor);
595
618
  --#{$button}--m-primary__c-badge--BorderWidth: 0;
619
+ --#{$button}--MixBlendMode: var(--#{$button}--disabled--MixBlendMode);
596
620
 
597
621
  color: var(--#{$button}--disabled--Color);
598
622
  background-color: var(--#{$button}--disabled--BackgroundColor);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.70",
4
+ "version": "6.0.0-alpha.71",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -7874,7 +7874,8 @@ button.pf-v5-c-breadcrumb__link {
7874
7874
  --pf-v5-c-button--m-link--PaddingLeft: var(--pf-t--global--spacer--md);
7875
7875
  --pf-v5-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
7876
7876
  --pf-v5-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
7877
- --pf-v5-c-button--m-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
7877
+ --pf-v5-c-button--m-link--hover--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
7878
+ --pf-v5-c-button--m-link--m-clicked--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
7878
7879
  --pf-v5-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
7879
7880
  --pf-v5-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
7880
7881
  --pf-v5-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
@@ -7883,19 +7884,24 @@ button.pf-v5-c-breadcrumb__link {
7883
7884
  --pf-v5-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
7884
7885
  --pf-v5-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
7885
7886
  --pf-v5-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
7887
+ --pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
7886
7888
  --pf-v5-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
7887
7889
  --pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
7890
+ --pf-v5-c-button--m-link--m-danger--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
7888
7891
  --pf-v5-c-button--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
7889
7892
  --pf-v5-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
7893
+ --pf-v5-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
7890
7894
  --pf-v5-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
7891
7895
  --pf-v5-c-button--m-link--m-inline--FontSize: initial;
7892
7896
  --pf-v5-c-button--m-link--m-inline--LineHeight: initial;
7893
7897
  --pf-v5-c-button--m-link--m-inline--FontWeight: initial;
7894
- --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
7895
7898
  --pf-v5-c-button--m-link--m-inline--PaddingTop: 0;
7896
7899
  --pf-v5-c-button--m-link--m-inline--PaddingRight: 0;
7897
7900
  --pf-v5-c-button--m-link--m-inline--PaddingBottom: 0;
7898
7901
  --pf-v5-c-button--m-link--m-inline--PaddingLeft: 0;
7902
+ --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
7903
+ --pf-v5-c-button--m-link--m-inline--hover--MixBlendMode: normal;
7904
+ --pf-v5-c-button--m-link--m-inline--m-clicked--MixBlendMode: normal
7899
7905
  --pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
7900
7906
  --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));
7901
7907
  --pf-v5-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -7907,18 +7913,21 @@ button.pf-v5-c-breadcrumb__link {
7907
7913
  --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
7908
7914
  --pf-v5-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
7909
7915
  --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
7910
- --pf-v5-c-button--m-plain--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
7916
+ --pf-v5-c-button--m-plain--hover--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
7917
+ --pf-v5-c-button--m-plain--m-clicked--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
7911
7918
  --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));
7912
7919
  --pf-v5-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
7913
7920
  --pf-v5-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
7914
7921
  --pf-v5-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
7915
7922
  --pf-v5-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
7916
- --pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
7923
+ --pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
7924
+ --pf-v5-c-button--m-plain--disabled--BackgroundColor: transparent;
7917
7925
  --pf-v5-c-button--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
7918
7926
  --pf-v5-c-button--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
7919
7927
  --pf-v5-c-button--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
7920
7928
  --pf-v5-c-button--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
7921
- --pf-v5-c-button--m-plain--m-no-padding--MixBlendMode: normal;
7929
+ --pf-v5-c-button--m-plain--m-no-padding--hover--MixBlendMode: normal;
7930
+ --pf-v5-c-button--m-plain--m-no-padding--m-clicked--MixBlendMode: normal;
7922
7931
  --pf-v5-c-button--m-plain--m-no-padding--MinWidth: auto;
7923
7932
  --pf-v5-c-button--m-plain--m-no-padding--PaddingTop: 0;
7924
7933
  --pf-v5-c-button--m-plain--m-no-padding--PaddingRight: 0;
@@ -8002,9 +8011,10 @@ button.pf-v5-c-breadcrumb__link {
8002
8011
  --pf-v5-c-button--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
8003
8012
  --pf-v5-c-button--m-small--PaddingLeft: var(--pf-t--global--spacer--md);
8004
8013
  --pf-v5-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
8005
- --pf-v5-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
8014
+ --pf-v5-c-button--disabled--MixBlendMode: normal;
8006
8015
  --pf-v5-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
8007
8016
  --pf-v5-c-button--disabled--BorderColor: transparent;
8017
+ --pf-v5-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
8008
8018
  --pf-v5-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
8009
8019
  --pf-v5-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
8010
8020
  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -8058,6 +8068,7 @@ button.pf-v5-c-breadcrumb__link {
8058
8068
  border-start-end-radius: var(--pf-v5-c-button--BorderStartEndRadius, var(--pf-v5-c-button--BorderRadius));
8059
8069
  border-end-start-radius: var(--pf-v5-c-button--BorderEndStartRadius, var(--pf-v5-c-button--BorderRadius));
8060
8070
  border-end-end-radius: var(--pf-v5-c-button--BorderEndEndRadius, var(--pf-v5-c-button--BorderRadius));
8071
+ mix-blend-mode: var(--pf-v5-c-button--MixBlendMode);
8061
8072
  }
8062
8073
  .pf-v5-c-button::after {
8063
8074
  position: absolute;
@@ -8124,13 +8135,14 @@ button.pf-v5-c-breadcrumb__link {
8124
8135
  --pf-v5-c-button--Color: var(--pf-v5-c-button--m-link--Color);
8125
8136
  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-link--BorderRadius);
8126
8137
  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-link--BackgroundColor);
8127
- --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-link--MixBlendMode);
8128
8138
  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-link__icon--Color);
8139
+ --pf-v5-c-button--hover--MixBlendMode: var(--pf-v5-c-button--m-link--hover--MixBlendMode);
8129
8140
  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-link--hover--Color);
8130
8141
  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-link--hover--BackgroundColor);
8131
8142
  --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-link--hover__icon--Color);
8132
8143
  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-link--m-clicked--Color);
8133
8144
  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-link--m-clicked--BackgroundColor);
8145
+ --pf-v5-c-button--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-link--m-clicked--MixBlendMode);
8134
8146
  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-link--m-clicked__icon--Color);
8135
8147
  }
8136
8148
  .pf-v5-c-button.pf-m-link.pf-m-inline {
@@ -8145,7 +8157,9 @@ button.pf-v5-c-breadcrumb__link {
8145
8157
  --pf-v5-c-button__progress--Left: var(--pf-v5-c-button--m-link--m-inline__progress--Left);
8146
8158
  --pf-v5-c-button--hover--TextDecoration: var(--pf-v5-c-button--m-link--m-inline--hover--TextDecoration);
8147
8159
  --pf-v5-c-button--hover--BackgroundColor: transparent;
8160
+ --pf-v5-c-button--hover--MixBlendMode: var(--pf-v5-c-button--m-link--m-inline--hover--MixBlendMode);
8148
8161
  --pf-v5-c-button--m-clicked--BackgroundColor: transparent;
8162
+ --pf-v5-c-button--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-link--m-inline--m-clicked--MixBlendMode);
8149
8163
  --pf-v5-c-button--disabled--BackgroundColor: transparent;
8150
8164
  --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-link--m-inline--disabled--Color);
8151
8165
  --pf-v5-c-button--disabled__icon--Color: var(--pf-v5-c-button--m-link--m-inline--disabled__icon--Color);
@@ -8154,16 +8168,16 @@ button.pf-v5-c-breadcrumb__link {
8154
8168
  white-space: normal;
8155
8169
  outline-offset: 0.125rem;
8156
8170
  }
8157
- .pf-v5-c-button.pf-m-link:where(.pf-m-danger) {
8171
+ .pf-v5-c-button.pf-m-link.pf-m-danger {
8158
8172
  --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--Color);
8173
+ --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--BackgroundColor);
8159
8174
  --pf-v5-c-button--m-danger__icon--Color: var(--pf-v5-c-button--m-link--m-danger__icon--Color);
8160
8175
  --pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-c-button--m-link--m-danger--hover--Color);
8176
+ --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--hover--BackgroundColor);
8161
8177
  --pf-v5-c-button--m-danger--hover__icon--Color: var(--pf-v5-c-button--m-link--m-danger--hover__icon--Color);
8162
8178
  --pf-v5-c-button--m-danger--m-clicked--Color: var(--pf-v5-c-button--m-link--m-danger--m-clicked--Color);
8179
+ --pf-v5-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--m-clicked--BackgroundColor);
8163
8180
  --pf-v5-c-button--m-danger--m-clicked__icon--Color: var(--pf-v5-c-button--m-link--m-danger--m-clicked__icon--Color);
8164
- --pf-v5-c-button--m-danger--BackgroundColor: transparent;
8165
- --pf-v5-c-button--m-danger--hover--BackgroundColor: transparent;
8166
- --pf-v5-c-button--m-danger--m-clicked--BackgroundColor: transparent;
8167
8181
  }
8168
8182
  .pf-v5-c-button.pf-m-link.pf-m-display-lg {
8169
8183
  --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-link--m-display-lg--FontSize);
@@ -8208,7 +8222,7 @@ button.pf-v5-c-breadcrumb__link {
8208
8222
  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-control--m-clicked--BackgroundColor);
8209
8223
  --pf-v5-c-button--m-clicked--BorderColor: var(--pf-v5-c-button--m-control--m-clicked--BorderColor);
8210
8224
  --pf-v5-c-button--m-clicked--BorderWidth: var(--pf-v5-c-button--m-control--m-clicked--BorderWidth);
8211
- --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-control--m-clicked__icon--Color);
8225
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-control--m-clicked__icon--Color);
8212
8226
  }
8213
8227
  .pf-v5-c-button.pf-m-stateful {
8214
8228
  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-stateful--BorderRadius);
@@ -8246,24 +8260,26 @@ button.pf-v5-c-breadcrumb__link {
8246
8260
  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-attention--m-clicked__icon--Color);
8247
8261
  }
8248
8262
  .pf-v5-c-button.pf-m-plain {
8263
+ --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-plain--BorderRadius);
8264
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-plain--Color);
8265
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-plain--BackgroundColor);
8249
8266
  --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-plain--PaddingTop);
8250
8267
  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-plain--PaddingRight);
8251
8268
  --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-plain--PaddingBottom);
8252
8269
  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-plain--PaddingLeft);
8253
- --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-plain--MixBlendMode);
8254
- --pf-v5-c-button--m-small--PaddingTop: var(--pf-v5-c-button--m-plain--m-small--PaddingTop);
8255
- --pf-v5-c-button--m-small--PaddingRight: var(--pf-v5-c-button--m-plain--m-small--PaddingRight);
8256
- --pf-v5-c-button--m-small--PaddingBottom: var(--pf-v5-c-button--m-plain--m-small--PaddingBottom);
8257
- --pf-v5-c-button--m-small--PaddingLeft: var(--pf-v5-c-button--m-plain--m-small--PaddingLeft);
8258
- --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-plain--BorderRadius);
8259
- --pf-v5-c-button--Color: var(--pf-v5-c-button--m-plain--Color);
8260
- --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-plain--BackgroundColor);
8270
+ --pf-v5-c-button__progress--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
8261
8271
  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-plain--hover--Color);
8262
8272
  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
8273
+ --pf-v5-c-button--hover--MixBlendMode: var(--pf-v5-c-button--m-plain--hover--MixBlendMode);
8263
8274
  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-plain--m-clicked--Color);
8264
8275
  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-plain--m-clicked--BackgroundColor);
8276
+ --pf-v5-c-button--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-plain--m-clicked--MixBlendMode);
8265
8277
  --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-plain--disabled--Color);
8266
- --pf-v5-c-button__progress--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
8278
+ --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-plain--disabled--BackgroundColor);
8279
+ --pf-v5-c-button--m-small--PaddingTop: var(--pf-v5-c-button--m-plain--m-small--PaddingTop);
8280
+ --pf-v5-c-button--m-small--PaddingRight: var(--pf-v5-c-button--m-plain--m-small--PaddingRight);
8281
+ --pf-v5-c-button--m-small--PaddingBottom: var(--pf-v5-c-button--m-plain--m-small--PaddingBottom);
8282
+ --pf-v5-c-button--m-small--PaddingLeft: var(--pf-v5-c-button--m-plain--m-small--PaddingLeft);
8267
8283
  min-width: var(--pf-v5-c-button--m-plain--MinWidth);
8268
8284
  }
8269
8285
  .pf-v5-c-button.pf-m-plain.pf-m-no-padding {
@@ -8274,7 +8290,8 @@ button.pf-v5-c-breadcrumb__link {
8274
8290
  --pf-v5-c-button--m-plain--PaddingRight: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingRight);
8275
8291
  --pf-v5-c-button--m-plain--PaddingBottom: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingBottom);
8276
8292
  --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingLeft);
8277
- --pf-v5-c-button--m-plain--MixBlendMode: var(--pf-v5-c-button--m-plain--m-no-padding--MixBlendMode);
8293
+ --pf-v5-c-button--m-plain--hover--MixBlendMode: var(--pf-v5-c-button--m-plain--m-no-padding--hover--MixBlendMode);
8294
+ --pf-v5-c-button--m-plain--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-plain--m-no-padding--m-clicked--MixBlendMode);
8278
8295
  min-width: var(--pf-v5-c-button--m-plain--m-no-padding--MinWidth);
8279
8296
  }
8280
8297
  .pf-v5-c-button.pf-m-block {
@@ -8300,6 +8317,7 @@ button.pf-v5-c-breadcrumb__link {
8300
8317
  --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--hover--BorderColor);
8301
8318
  --pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--hover--BorderWidth);
8302
8319
  --pf-v5-c-button--TextDecoration: var(--pf-v5-c-button--hover--TextDecoration);
8320
+ --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--hover--MixBlendMode);
8303
8321
  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--hover__icon--Color);
8304
8322
  }
8305
8323
  .pf-v5-c-button.pf-m-clicked {
@@ -8307,6 +8325,7 @@ button.pf-v5-c-breadcrumb__link {
8307
8325
  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-clicked--BackgroundColor);
8308
8326
  --pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--m-clicked--BorderWidth);
8309
8327
  --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--m-clicked--BorderColor);
8328
+ --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-clicked--MixBlendMode);
8310
8329
  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-clicked__icon--Color);
8311
8330
  }
8312
8331
  .pf-v5-c-button:disabled, .pf-v5-c-button.pf-m-disabled {
@@ -8316,6 +8335,7 @@ button.pf-v5-c-breadcrumb__link {
8316
8335
  --pf-v5-c-badge--m-unread--Color: var(--pf-v5-c-button--disabled__c-badge--Color);
8317
8336
  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-c-button--disabled__c-badge--BackgroundColor);
8318
8337
  --pf-v5-c-button--m-primary__c-badge--BorderWidth: 0;
8338
+ --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--disabled--MixBlendMode);
8319
8339
  color: var(--pf-v5-c-button--disabled--Color);
8320
8340
  background-color: var(--pf-v5-c-button--disabled--BackgroundColor);
8321
8341
  }