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

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 (10) hide show
  1. package/components/Button/button.css +42 -22
  2. package/components/Button/button.scss +47 -23
  3. package/components/Label/label.css +11 -5
  4. package/components/Label/label.scss +12 -11
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +53 -27
  7. package/patternfly-theme-dark-unversioned.css +53 -27
  8. package/patternfly.css +53 -27
  9. package/patternfly.min.css +1 -1
  10. 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/components/Label/label.css CHANGED
@@ -133,6 +133,7 @@
133
133
  --pf-v5-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
134
134
  --pf-v5-c-label--m-clickable--hover--BorderWidth: 0;
135
135
  --pf-v5-c-label--m-clickable--hover--BorderColor: transparent;
136
+ --pf-v5-c-label--m-clickable__content--Cursor: pointer;
136
137
  --pf-v5-c-label--m-filled__actions--c-button--Color: var(--pf-v5-c-label__icon--Color);
137
138
  --pf-v5-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--button--default);
138
139
  --pf-v5-c-label--m-outline--BackgroundColor: transparent;
@@ -163,6 +164,7 @@
163
164
  --pf-v5-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
164
165
  --pf-v5-c-label__content--MaxWidth: 100%;
165
166
  --pf-v5-c-label__content--Gap: var(--pf-t--global--spacer--xs);
167
+ --pf-v5-c-label__content--Cursor: initial;
166
168
  --pf-v5-c-label__icon--FontSize: var(--pf-t--global--icon--size--body--sm);
167
169
  --pf-v5-c-label__text--MaxWidth: 100%;
168
170
  --pf-v5-c-label__actions--MarginRight: calc(var(--pf-v5-c-label__actions--c-button--PaddingRight) * -1);
@@ -180,9 +182,11 @@
180
182
  --pf-v5-c-label--m-editable--TextDecorationOffset: 0.25rem;
181
183
  --pf-v5-c-label--m-editable--TextDecorationColor: currentcolor;
182
184
  --pf-v5-c-label--m-editable__content--MaxWidth: 16ch;
185
+ --pf-v5-c-label--m-editable__content--Cursor: pointer;
183
186
  --pf-v5-c-label--m-editable--m-editable-active--TextDecoration: none;
184
187
  --pf-v5-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
185
188
  --pf-v5-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
189
+ --pf-v5-c-label--m-editable--m-editable-active__content--Cursor: initial;
186
190
  }
187
191
 
188
192
  .pf-v5-c-label {
@@ -364,6 +368,7 @@
364
368
  }
365
369
  .pf-v5-c-label.pf-m-editable {
366
370
  --pf-v5-c-label__content--MaxWidth: var(--pf-v5-c-label--m-editable__content--MaxWidth);
371
+ --pf-v5-c-label__content--Cursor: var(--pf-v5-c-label--m-editable__content--Cursor);
367
372
  }
368
373
  .pf-v5-c-label.pf-m-editable .pf-v5-c-label__text {
369
374
  text-decoration: var(--pf-v5-c-label--m-editable--TextDecoration);
@@ -376,6 +381,7 @@
376
381
  --pf-v5-c-label--m-editable--TextDecoration: var(--pf-v5-c-label--m-editable--m-editable-active--TextDecoration);
377
382
  --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-editable--m-editable-active--BackgroundColor);
378
383
  --pf-v5-c-label--Color: var(--pf-v5-c-label--m-editable--m-editable-active--Color);
384
+ --pf-v5-c-label__content--Cursor: var(--pf-v5-c-label--m-editable--m-editable-active__content--Cursor);
379
385
  }
380
386
  .pf-v5-c-label.pf-m-overflow {
381
387
  --pf-v5-c-label--Color: var(--pf-v5-c-label--m-overflow--Color);
@@ -398,11 +404,8 @@
398
404
  --pf-v5-c-label--m-add--BorderColor: var(--pf-v5-c-label--m-add--hover--BorderColor);
399
405
  --pf-v5-c-label--m-add--BorderWidth: var(--pf-v5-c-label--m-add--hover--BorderWidth);
400
406
  }
401
- .pf-v5-c-label.pf-m-clickable .pf-v5-c-label__content, .pf-v5-c-label.pf-m-editable .pf-v5-c-label__content {
402
- padding: 0;
403
- cursor: pointer;
404
- background-color: transparent;
405
- border: none;
407
+ .pf-v5-c-label.pf-m-clickable {
408
+ --pf-v5-c-label__content--Cursor: var(--pf-v5-c-label--m-clickable__content--Cursor);
406
409
  }
407
410
  .pf-v5-c-label.pf-m-clickable .pf-v5-c-label__content, .pf-v5-c-label.pf-m-clickable .pf-v5-c-label__content:is(:hover, :focus) {
408
411
  text-decoration: none;
@@ -436,8 +439,11 @@
436
439
  .pf-v5-c-label__content {
437
440
  gap: var(--pf-v5-c-label__content--Gap);
438
441
  max-width: var(--pf-v5-c-label__content--MaxWidth);
442
+ padding: 0;
439
443
  overflow: hidden;
440
444
  color: var(--pf-v5-c-label--Color);
445
+ cursor: var(--pf-v5-c-label__content--Cursor, revert);
446
+ background: transparent;
441
447
  border-width: 0;
442
448
  }
443
449
  .pf-v5-c-label__content::before {
package/components/Label/label.scss CHANGED
@@ -166,6 +166,7 @@
166
166
  // Clickable
167
167
  --#{$label}--m-clickable--hover--BorderWidth: 0;
168
168
  --#{$label}--m-clickable--hover--BorderColor: transparent;
169
+ --#{$label}--m-clickable__content--Cursor: pointer;
169
170
 
170
171
  // Filled
171
172
  --#{$label}--m-filled__actions--c-button--Color: var(--#{$label}__icon--Color);
@@ -208,6 +209,7 @@
208
209
  // Content
209
210
  --#{$label}__content--MaxWidth: 100%;
210
211
  --#{$label}__content--Gap: var(--pf-t--global--spacer--xs);
212
+ --#{$label}__content--Cursor: initial;
211
213
 
212
214
  // Icon
213
215
  --#{$label}__icon--FontSize: var(--pf-t--global--icon--size--body--sm);
@@ -235,11 +237,13 @@
235
237
  --#{$label}--m-editable--TextDecorationOffset: #{pf-size-prem(4px)};
236
238
  --#{$label}--m-editable--TextDecorationColor: currentcolor;
237
239
  --#{$label}--m-editable__content--MaxWidth: 16ch;
240
+ --#{$label}--m-editable__content--Cursor: pointer;
238
241
 
239
242
  // Editable active
240
243
  --#{$label}--m-editable--m-editable-active--TextDecoration: none;
241
244
  --#{$label}--m-editable--m-editable-active--BackgroundColor: transparent;
242
- --#{$label}--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);;
245
+ --#{$label}--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
246
+ --#{$label}--m-editable--m-editable-active__content--Cursor: initial;
243
247
  }
244
248
 
245
249
  .#{$label} {
@@ -439,6 +443,7 @@
439
443
 
440
444
  &.pf-m-editable {
441
445
  --#{$label}__content--MaxWidth: var(--#{$label}--m-editable__content--MaxWidth);
446
+ --#{$label}__content--Cursor: var(--#{$label}--m-editable__content--Cursor);
442
447
 
443
448
  .#{$label}__text {
444
449
  text-decoration: var(--#{$label}--m-editable--TextDecoration);
@@ -453,6 +458,7 @@
453
458
  --#{$label}--m-editable--TextDecoration: var(--#{$label}--m-editable--m-editable-active--TextDecoration);
454
459
  --#{$label}--BackgroundColor: var(--#{$label}--m-editable--m-editable-active--BackgroundColor);
455
460
  --#{$label}--Color: var(--#{$label}--m-editable--m-editable-active--Color);
461
+ --#{$label}__content--Cursor: var(--#{$label}--m-editable--m-editable-active__content--Cursor);
456
462
  }
457
463
 
458
464
  &.pf-m-overflow {
@@ -481,17 +487,9 @@
481
487
  }
482
488
  }
483
489
 
484
- &.pf-m-clickable,
485
- &.pf-m-editable {
486
- .#{$label}__content {
487
- padding: 0;
488
- cursor: pointer;
489
- background-color: transparent;
490
- border: none;
491
- }
492
- }
493
-
494
490
  &.pf-m-clickable {
491
+ --#{$label}__content--Cursor: var(--#{$label}--m-clickable__content--Cursor);
492
+
495
493
  .#{$label}__content {
496
494
  &,
497
495
  &:is(:hover, :focus) {
@@ -530,8 +528,11 @@
530
528
  .#{$label}__content {
531
529
  gap: var(--#{$label}__content--Gap);
532
530
  max-width: var(--#{$label}__content--MaxWidth);
531
+ padding: 0;
533
532
  overflow: hidden;
534
533
  color: var(--#{$label}--Color);
534
+ cursor: var(--#{$label}__content--Cursor, revert);
535
+ background: transparent;
535
536
  border-width: 0;
536
537
 
537
538
  &::before {
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.72",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {