@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/patternfly-theme-dark-unversioned.css CHANGED
@@ -7991,7 +7991,8 @@ button.pf-v5-c-breadcrumb__link {
7991
7991
  --pf-v5-c-button--m-link--PaddingLeft: var(--pf-t--global--spacer--md);
7992
7992
  --pf-v5-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
7993
7993
  --pf-v5-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
7994
- --pf-v5-c-button--m-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
7994
+ --pf-v5-c-button--m-link--hover--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
7995
+ --pf-v5-c-button--m-link--m-clicked--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
7995
7996
  --pf-v5-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
7996
7997
  --pf-v5-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
7997
7998
  --pf-v5-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
@@ -8000,19 +8001,24 @@ button.pf-v5-c-breadcrumb__link {
8000
8001
  --pf-v5-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
8001
8002
  --pf-v5-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
8002
8003
  --pf-v5-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
8004
+ --pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
8003
8005
  --pf-v5-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
8004
8006
  --pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
8007
+ --pf-v5-c-button--m-link--m-danger--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
8005
8008
  --pf-v5-c-button--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
8006
8009
  --pf-v5-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
8010
+ --pf-v5-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
8007
8011
  --pf-v5-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
8008
8012
  --pf-v5-c-button--m-link--m-inline--FontSize: initial;
8009
8013
  --pf-v5-c-button--m-link--m-inline--LineHeight: initial;
8010
8014
  --pf-v5-c-button--m-link--m-inline--FontWeight: initial;
8011
- --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
8012
8015
  --pf-v5-c-button--m-link--m-inline--PaddingTop: 0;
8013
8016
  --pf-v5-c-button--m-link--m-inline--PaddingRight: 0;
8014
8017
  --pf-v5-c-button--m-link--m-inline--PaddingBottom: 0;
8015
8018
  --pf-v5-c-button--m-link--m-inline--PaddingLeft: 0;
8019
+ --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
8020
+ --pf-v5-c-button--m-link--m-inline--hover--MixBlendMode: normal;
8021
+ --pf-v5-c-button--m-link--m-inline--m-clicked--MixBlendMode: normal
8016
8022
  --pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
8017
8023
  --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));
8018
8024
  --pf-v5-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -8024,18 +8030,21 @@ button.pf-v5-c-breadcrumb__link {
8024
8030
  --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
8025
8031
  --pf-v5-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
8026
8032
  --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
8027
- --pf-v5-c-button--m-plain--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
8033
+ --pf-v5-c-button--m-plain--hover--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
8034
+ --pf-v5-c-button--m-plain--m-clicked--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
8028
8035
  --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));
8029
8036
  --pf-v5-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
8030
8037
  --pf-v5-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
8031
8038
  --pf-v5-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
8032
8039
  --pf-v5-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
8033
- --pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
8040
+ --pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
8041
+ --pf-v5-c-button--m-plain--disabled--BackgroundColor: transparent;
8034
8042
  --pf-v5-c-button--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
8035
8043
  --pf-v5-c-button--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
8036
8044
  --pf-v5-c-button--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
8037
8045
  --pf-v5-c-button--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
8038
- --pf-v5-c-button--m-plain--m-no-padding--MixBlendMode: normal;
8046
+ --pf-v5-c-button--m-plain--m-no-padding--hover--MixBlendMode: normal;
8047
+ --pf-v5-c-button--m-plain--m-no-padding--m-clicked--MixBlendMode: normal;
8039
8048
  --pf-v5-c-button--m-plain--m-no-padding--MinWidth: auto;
8040
8049
  --pf-v5-c-button--m-plain--m-no-padding--PaddingTop: 0;
8041
8050
  --pf-v5-c-button--m-plain--m-no-padding--PaddingRight: 0;
@@ -8119,9 +8128,10 @@ button.pf-v5-c-breadcrumb__link {
8119
8128
  --pf-v5-c-button--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
8120
8129
  --pf-v5-c-button--m-small--PaddingLeft: var(--pf-t--global--spacer--md);
8121
8130
  --pf-v5-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
8122
- --pf-v5-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
8131
+ --pf-v5-c-button--disabled--MixBlendMode: normal;
8123
8132
  --pf-v5-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
8124
8133
  --pf-v5-c-button--disabled--BorderColor: transparent;
8134
+ --pf-v5-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
8125
8135
  --pf-v5-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
8126
8136
  --pf-v5-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
8127
8137
  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -8175,6 +8185,7 @@ button.pf-v5-c-breadcrumb__link {
8175
8185
  border-start-end-radius: var(--pf-v5-c-button--BorderStartEndRadius, var(--pf-v5-c-button--BorderRadius));
8176
8186
  border-end-start-radius: var(--pf-v5-c-button--BorderEndStartRadius, var(--pf-v5-c-button--BorderRadius));
8177
8187
  border-end-end-radius: var(--pf-v5-c-button--BorderEndEndRadius, var(--pf-v5-c-button--BorderRadius));
8188
+ mix-blend-mode: var(--pf-v5-c-button--MixBlendMode);
8178
8189
  }
8179
8190
  .pf-v5-c-button::after {
8180
8191
  position: absolute;
@@ -8241,13 +8252,14 @@ button.pf-v5-c-breadcrumb__link {
8241
8252
  --pf-v5-c-button--Color: var(--pf-v5-c-button--m-link--Color);
8242
8253
  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-link--BorderRadius);
8243
8254
  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-link--BackgroundColor);
8244
- --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-link--MixBlendMode);
8245
8255
  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-link__icon--Color);
8256
+ --pf-v5-c-button--hover--MixBlendMode: var(--pf-v5-c-button--m-link--hover--MixBlendMode);
8246
8257
  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-link--hover--Color);
8247
8258
  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-link--hover--BackgroundColor);
8248
8259
  --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-link--hover__icon--Color);
8249
8260
  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-link--m-clicked--Color);
8250
8261
  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-link--m-clicked--BackgroundColor);
8262
+ --pf-v5-c-button--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-link--m-clicked--MixBlendMode);
8251
8263
  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-link--m-clicked__icon--Color);
8252
8264
  }
8253
8265
  .pf-v5-c-button.pf-m-link.pf-m-inline {
@@ -8262,7 +8274,9 @@ button.pf-v5-c-breadcrumb__link {
8262
8274
  --pf-v5-c-button__progress--Left: var(--pf-v5-c-button--m-link--m-inline__progress--Left);
8263
8275
  --pf-v5-c-button--hover--TextDecoration: var(--pf-v5-c-button--m-link--m-inline--hover--TextDecoration);
8264
8276
  --pf-v5-c-button--hover--BackgroundColor: transparent;
8277
+ --pf-v5-c-button--hover--MixBlendMode: var(--pf-v5-c-button--m-link--m-inline--hover--MixBlendMode);
8265
8278
  --pf-v5-c-button--m-clicked--BackgroundColor: transparent;
8279
+ --pf-v5-c-button--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-link--m-inline--m-clicked--MixBlendMode);
8266
8280
  --pf-v5-c-button--disabled--BackgroundColor: transparent;
8267
8281
  --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-link--m-inline--disabled--Color);
8268
8282
  --pf-v5-c-button--disabled__icon--Color: var(--pf-v5-c-button--m-link--m-inline--disabled__icon--Color);
@@ -8271,16 +8285,16 @@ button.pf-v5-c-breadcrumb__link {
8271
8285
  white-space: normal;
8272
8286
  outline-offset: 0.125rem;
8273
8287
  }
8274
- .pf-v5-c-button.pf-m-link:where(.pf-m-danger) {
8288
+ .pf-v5-c-button.pf-m-link.pf-m-danger {
8275
8289
  --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--Color);
8290
+ --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--BackgroundColor);
8276
8291
  --pf-v5-c-button--m-danger__icon--Color: var(--pf-v5-c-button--m-link--m-danger__icon--Color);
8277
8292
  --pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-c-button--m-link--m-danger--hover--Color);
8293
+ --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--hover--BackgroundColor);
8278
8294
  --pf-v5-c-button--m-danger--hover__icon--Color: var(--pf-v5-c-button--m-link--m-danger--hover__icon--Color);
8279
8295
  --pf-v5-c-button--m-danger--m-clicked--Color: var(--pf-v5-c-button--m-link--m-danger--m-clicked--Color);
8296
+ --pf-v5-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--m-clicked--BackgroundColor);
8280
8297
  --pf-v5-c-button--m-danger--m-clicked__icon--Color: var(--pf-v5-c-button--m-link--m-danger--m-clicked__icon--Color);
8281
- --pf-v5-c-button--m-danger--BackgroundColor: transparent;
8282
- --pf-v5-c-button--m-danger--hover--BackgroundColor: transparent;
8283
- --pf-v5-c-button--m-danger--m-clicked--BackgroundColor: transparent;
8284
8298
  }
8285
8299
  .pf-v5-c-button.pf-m-link.pf-m-display-lg {
8286
8300
  --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-link--m-display-lg--FontSize);
@@ -8325,7 +8339,7 @@ button.pf-v5-c-breadcrumb__link {
8325
8339
  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-control--m-clicked--BackgroundColor);
8326
8340
  --pf-v5-c-button--m-clicked--BorderColor: var(--pf-v5-c-button--m-control--m-clicked--BorderColor);
8327
8341
  --pf-v5-c-button--m-clicked--BorderWidth: var(--pf-v5-c-button--m-control--m-clicked--BorderWidth);
8328
- --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-control--m-clicked__icon--Color);
8342
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-control--m-clicked__icon--Color);
8329
8343
  }
8330
8344
  .pf-v5-c-button.pf-m-stateful {
8331
8345
  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-stateful--BorderRadius);
@@ -8363,24 +8377,26 @@ button.pf-v5-c-breadcrumb__link {
8363
8377
  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-attention--m-clicked__icon--Color);
8364
8378
  }
8365
8379
  .pf-v5-c-button.pf-m-plain {
8380
+ --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-plain--BorderRadius);
8381
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-plain--Color);
8382
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-plain--BackgroundColor);
8366
8383
  --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-plain--PaddingTop);
8367
8384
  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-plain--PaddingRight);
8368
8385
  --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-plain--PaddingBottom);
8369
8386
  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-plain--PaddingLeft);
8370
- --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-plain--MixBlendMode);
8371
- --pf-v5-c-button--m-small--PaddingTop: var(--pf-v5-c-button--m-plain--m-small--PaddingTop);
8372
- --pf-v5-c-button--m-small--PaddingRight: var(--pf-v5-c-button--m-plain--m-small--PaddingRight);
8373
- --pf-v5-c-button--m-small--PaddingBottom: var(--pf-v5-c-button--m-plain--m-small--PaddingBottom);
8374
- --pf-v5-c-button--m-small--PaddingLeft: var(--pf-v5-c-button--m-plain--m-small--PaddingLeft);
8375
- --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-plain--BorderRadius);
8376
- --pf-v5-c-button--Color: var(--pf-v5-c-button--m-plain--Color);
8377
- --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-plain--BackgroundColor);
8387
+ --pf-v5-c-button__progress--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
8378
8388
  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-plain--hover--Color);
8379
8389
  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
8390
+ --pf-v5-c-button--hover--MixBlendMode: var(--pf-v5-c-button--m-plain--hover--MixBlendMode);
8380
8391
  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-plain--m-clicked--Color);
8381
8392
  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-plain--m-clicked--BackgroundColor);
8393
+ --pf-v5-c-button--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-plain--m-clicked--MixBlendMode);
8382
8394
  --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-plain--disabled--Color);
8383
- --pf-v5-c-button__progress--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
8395
+ --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-plain--disabled--BackgroundColor);
8396
+ --pf-v5-c-button--m-small--PaddingTop: var(--pf-v5-c-button--m-plain--m-small--PaddingTop);
8397
+ --pf-v5-c-button--m-small--PaddingRight: var(--pf-v5-c-button--m-plain--m-small--PaddingRight);
8398
+ --pf-v5-c-button--m-small--PaddingBottom: var(--pf-v5-c-button--m-plain--m-small--PaddingBottom);
8399
+ --pf-v5-c-button--m-small--PaddingLeft: var(--pf-v5-c-button--m-plain--m-small--PaddingLeft);
8384
8400
  min-width: var(--pf-v5-c-button--m-plain--MinWidth);
8385
8401
  }
8386
8402
  .pf-v5-c-button.pf-m-plain.pf-m-no-padding {
@@ -8391,7 +8407,8 @@ button.pf-v5-c-breadcrumb__link {
8391
8407
  --pf-v5-c-button--m-plain--PaddingRight: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingRight);
8392
8408
  --pf-v5-c-button--m-plain--PaddingBottom: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingBottom);
8393
8409
  --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingLeft);
8394
- --pf-v5-c-button--m-plain--MixBlendMode: var(--pf-v5-c-button--m-plain--m-no-padding--MixBlendMode);
8410
+ --pf-v5-c-button--m-plain--hover--MixBlendMode: var(--pf-v5-c-button--m-plain--m-no-padding--hover--MixBlendMode);
8411
+ --pf-v5-c-button--m-plain--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-plain--m-no-padding--m-clicked--MixBlendMode);
8395
8412
  min-width: var(--pf-v5-c-button--m-plain--m-no-padding--MinWidth);
8396
8413
  }
8397
8414
  .pf-v5-c-button.pf-m-block {
@@ -8417,6 +8434,7 @@ button.pf-v5-c-breadcrumb__link {
8417
8434
  --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--hover--BorderColor);
8418
8435
  --pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--hover--BorderWidth);
8419
8436
  --pf-v5-c-button--TextDecoration: var(--pf-v5-c-button--hover--TextDecoration);
8437
+ --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--hover--MixBlendMode);
8420
8438
  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--hover__icon--Color);
8421
8439
  }
8422
8440
  .pf-v5-c-button.pf-m-clicked {
@@ -8424,6 +8442,7 @@ button.pf-v5-c-breadcrumb__link {
8424
8442
  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-clicked--BackgroundColor);
8425
8443
  --pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--m-clicked--BorderWidth);
8426
8444
  --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--m-clicked--BorderColor);
8445
+ --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-clicked--MixBlendMode);
8427
8446
  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-clicked__icon--Color);
8428
8447
  }
8429
8448
  .pf-v5-c-button:disabled, .pf-v5-c-button.pf-m-disabled {
@@ -8433,6 +8452,7 @@ button.pf-v5-c-breadcrumb__link {
8433
8452
  --pf-v5-c-badge--m-unread--Color: var(--pf-v5-c-button--disabled__c-badge--Color);
8434
8453
  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-c-button--disabled__c-badge--BackgroundColor);
8435
8454
  --pf-v5-c-button--m-primary__c-badge--BorderWidth: 0;
8455
+ --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--disabled--MixBlendMode);
8436
8456
  color: var(--pf-v5-c-button--disabled--Color);
8437
8457
  background-color: var(--pf-v5-c-button--disabled--BackgroundColor);
8438
8458
  }
package/patternfly.css CHANGED
@@ -7991,7 +7991,8 @@ button.pf-v5-c-breadcrumb__link {
7991
7991
  --pf-v5-c-button--m-link--PaddingLeft: var(--pf-t--global--spacer--md);
7992
7992
  --pf-v5-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
7993
7993
  --pf-v5-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
7994
- --pf-v5-c-button--m-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
7994
+ --pf-v5-c-button--m-link--hover--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
7995
+ --pf-v5-c-button--m-link--m-clicked--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
7995
7996
  --pf-v5-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
7996
7997
  --pf-v5-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
7997
7998
  --pf-v5-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
@@ -8000,19 +8001,24 @@ button.pf-v5-c-breadcrumb__link {
8000
8001
  --pf-v5-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
8001
8002
  --pf-v5-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
8002
8003
  --pf-v5-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
8004
+ --pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
8003
8005
  --pf-v5-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
8004
8006
  --pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
8007
+ --pf-v5-c-button--m-link--m-danger--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
8005
8008
  --pf-v5-c-button--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
8006
8009
  --pf-v5-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
8010
+ --pf-v5-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
8007
8011
  --pf-v5-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
8008
8012
  --pf-v5-c-button--m-link--m-inline--FontSize: initial;
8009
8013
  --pf-v5-c-button--m-link--m-inline--LineHeight: initial;
8010
8014
  --pf-v5-c-button--m-link--m-inline--FontWeight: initial;
8011
- --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
8012
8015
  --pf-v5-c-button--m-link--m-inline--PaddingTop: 0;
8013
8016
  --pf-v5-c-button--m-link--m-inline--PaddingRight: 0;
8014
8017
  --pf-v5-c-button--m-link--m-inline--PaddingBottom: 0;
8015
8018
  --pf-v5-c-button--m-link--m-inline--PaddingLeft: 0;
8019
+ --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
8020
+ --pf-v5-c-button--m-link--m-inline--hover--MixBlendMode: normal;
8021
+ --pf-v5-c-button--m-link--m-inline--m-clicked--MixBlendMode: normal
8016
8022
  --pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
8017
8023
  --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));
8018
8024
  --pf-v5-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -8024,18 +8030,21 @@ button.pf-v5-c-breadcrumb__link {
8024
8030
  --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
8025
8031
  --pf-v5-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
8026
8032
  --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
8027
- --pf-v5-c-button--m-plain--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
8033
+ --pf-v5-c-button--m-plain--hover--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
8034
+ --pf-v5-c-button--m-plain--m-clicked--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
8028
8035
  --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));
8029
8036
  --pf-v5-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
8030
8037
  --pf-v5-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
8031
8038
  --pf-v5-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
8032
8039
  --pf-v5-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
8033
- --pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
8040
+ --pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
8041
+ --pf-v5-c-button--m-plain--disabled--BackgroundColor: transparent;
8034
8042
  --pf-v5-c-button--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
8035
8043
  --pf-v5-c-button--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
8036
8044
  --pf-v5-c-button--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
8037
8045
  --pf-v5-c-button--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
8038
- --pf-v5-c-button--m-plain--m-no-padding--MixBlendMode: normal;
8046
+ --pf-v5-c-button--m-plain--m-no-padding--hover--MixBlendMode: normal;
8047
+ --pf-v5-c-button--m-plain--m-no-padding--m-clicked--MixBlendMode: normal;
8039
8048
  --pf-v5-c-button--m-plain--m-no-padding--MinWidth: auto;
8040
8049
  --pf-v5-c-button--m-plain--m-no-padding--PaddingTop: 0;
8041
8050
  --pf-v5-c-button--m-plain--m-no-padding--PaddingRight: 0;
@@ -8119,9 +8128,10 @@ button.pf-v5-c-breadcrumb__link {
8119
8128
  --pf-v5-c-button--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
8120
8129
  --pf-v5-c-button--m-small--PaddingLeft: var(--pf-t--global--spacer--md);
8121
8130
  --pf-v5-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
8122
- --pf-v5-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
8131
+ --pf-v5-c-button--disabled--MixBlendMode: normal;
8123
8132
  --pf-v5-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
8124
8133
  --pf-v5-c-button--disabled--BorderColor: transparent;
8134
+ --pf-v5-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
8125
8135
  --pf-v5-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
8126
8136
  --pf-v5-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
8127
8137
  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -8175,6 +8185,7 @@ button.pf-v5-c-breadcrumb__link {
8175
8185
  border-start-end-radius: var(--pf-v5-c-button--BorderStartEndRadius, var(--pf-v5-c-button--BorderRadius));
8176
8186
  border-end-start-radius: var(--pf-v5-c-button--BorderEndStartRadius, var(--pf-v5-c-button--BorderRadius));
8177
8187
  border-end-end-radius: var(--pf-v5-c-button--BorderEndEndRadius, var(--pf-v5-c-button--BorderRadius));
8188
+ mix-blend-mode: var(--pf-v5-c-button--MixBlendMode);
8178
8189
  }
8179
8190
  .pf-v5-c-button::after {
8180
8191
  position: absolute;
@@ -8241,13 +8252,14 @@ button.pf-v5-c-breadcrumb__link {
8241
8252
  --pf-v5-c-button--Color: var(--pf-v5-c-button--m-link--Color);
8242
8253
  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-link--BorderRadius);
8243
8254
  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-link--BackgroundColor);
8244
- --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-link--MixBlendMode);
8245
8255
  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-link__icon--Color);
8256
+ --pf-v5-c-button--hover--MixBlendMode: var(--pf-v5-c-button--m-link--hover--MixBlendMode);
8246
8257
  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-link--hover--Color);
8247
8258
  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-link--hover--BackgroundColor);
8248
8259
  --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-link--hover__icon--Color);
8249
8260
  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-link--m-clicked--Color);
8250
8261
  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-link--m-clicked--BackgroundColor);
8262
+ --pf-v5-c-button--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-link--m-clicked--MixBlendMode);
8251
8263
  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-link--m-clicked__icon--Color);
8252
8264
  }
8253
8265
  .pf-v5-c-button.pf-m-link.pf-m-inline {
@@ -8262,7 +8274,9 @@ button.pf-v5-c-breadcrumb__link {
8262
8274
  --pf-v5-c-button__progress--Left: var(--pf-v5-c-button--m-link--m-inline__progress--Left);
8263
8275
  --pf-v5-c-button--hover--TextDecoration: var(--pf-v5-c-button--m-link--m-inline--hover--TextDecoration);
8264
8276
  --pf-v5-c-button--hover--BackgroundColor: transparent;
8277
+ --pf-v5-c-button--hover--MixBlendMode: var(--pf-v5-c-button--m-link--m-inline--hover--MixBlendMode);
8265
8278
  --pf-v5-c-button--m-clicked--BackgroundColor: transparent;
8279
+ --pf-v5-c-button--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-link--m-inline--m-clicked--MixBlendMode);
8266
8280
  --pf-v5-c-button--disabled--BackgroundColor: transparent;
8267
8281
  --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-link--m-inline--disabled--Color);
8268
8282
  --pf-v5-c-button--disabled__icon--Color: var(--pf-v5-c-button--m-link--m-inline--disabled__icon--Color);
@@ -8271,16 +8285,16 @@ button.pf-v5-c-breadcrumb__link {
8271
8285
  white-space: normal;
8272
8286
  outline-offset: 0.125rem;
8273
8287
  }
8274
- .pf-v5-c-button.pf-m-link:where(.pf-m-danger) {
8288
+ .pf-v5-c-button.pf-m-link.pf-m-danger {
8275
8289
  --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--Color);
8290
+ --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--BackgroundColor);
8276
8291
  --pf-v5-c-button--m-danger__icon--Color: var(--pf-v5-c-button--m-link--m-danger__icon--Color);
8277
8292
  --pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-c-button--m-link--m-danger--hover--Color);
8293
+ --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--hover--BackgroundColor);
8278
8294
  --pf-v5-c-button--m-danger--hover__icon--Color: var(--pf-v5-c-button--m-link--m-danger--hover__icon--Color);
8279
8295
  --pf-v5-c-button--m-danger--m-clicked--Color: var(--pf-v5-c-button--m-link--m-danger--m-clicked--Color);
8296
+ --pf-v5-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--m-clicked--BackgroundColor);
8280
8297
  --pf-v5-c-button--m-danger--m-clicked__icon--Color: var(--pf-v5-c-button--m-link--m-danger--m-clicked__icon--Color);
8281
- --pf-v5-c-button--m-danger--BackgroundColor: transparent;
8282
- --pf-v5-c-button--m-danger--hover--BackgroundColor: transparent;
8283
- --pf-v5-c-button--m-danger--m-clicked--BackgroundColor: transparent;
8284
8298
  }
8285
8299
  .pf-v5-c-button.pf-m-link.pf-m-display-lg {
8286
8300
  --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-link--m-display-lg--FontSize);
@@ -8325,7 +8339,7 @@ button.pf-v5-c-breadcrumb__link {
8325
8339
  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-control--m-clicked--BackgroundColor);
8326
8340
  --pf-v5-c-button--m-clicked--BorderColor: var(--pf-v5-c-button--m-control--m-clicked--BorderColor);
8327
8341
  --pf-v5-c-button--m-clicked--BorderWidth: var(--pf-v5-c-button--m-control--m-clicked--BorderWidth);
8328
- --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-control--m-clicked__icon--Color);
8342
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-control--m-clicked__icon--Color);
8329
8343
  }
8330
8344
  .pf-v5-c-button.pf-m-stateful {
8331
8345
  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-stateful--BorderRadius);
@@ -8363,24 +8377,26 @@ button.pf-v5-c-breadcrumb__link {
8363
8377
  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-attention--m-clicked__icon--Color);
8364
8378
  }
8365
8379
  .pf-v5-c-button.pf-m-plain {
8380
+ --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-plain--BorderRadius);
8381
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-plain--Color);
8382
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-plain--BackgroundColor);
8366
8383
  --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-plain--PaddingTop);
8367
8384
  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-plain--PaddingRight);
8368
8385
  --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-plain--PaddingBottom);
8369
8386
  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-plain--PaddingLeft);
8370
- --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-plain--MixBlendMode);
8371
- --pf-v5-c-button--m-small--PaddingTop: var(--pf-v5-c-button--m-plain--m-small--PaddingTop);
8372
- --pf-v5-c-button--m-small--PaddingRight: var(--pf-v5-c-button--m-plain--m-small--PaddingRight);
8373
- --pf-v5-c-button--m-small--PaddingBottom: var(--pf-v5-c-button--m-plain--m-small--PaddingBottom);
8374
- --pf-v5-c-button--m-small--PaddingLeft: var(--pf-v5-c-button--m-plain--m-small--PaddingLeft);
8375
- --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-plain--BorderRadius);
8376
- --pf-v5-c-button--Color: var(--pf-v5-c-button--m-plain--Color);
8377
- --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-plain--BackgroundColor);
8387
+ --pf-v5-c-button__progress--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
8378
8388
  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-plain--hover--Color);
8379
8389
  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
8390
+ --pf-v5-c-button--hover--MixBlendMode: var(--pf-v5-c-button--m-plain--hover--MixBlendMode);
8380
8391
  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-plain--m-clicked--Color);
8381
8392
  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-plain--m-clicked--BackgroundColor);
8393
+ --pf-v5-c-button--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-plain--m-clicked--MixBlendMode);
8382
8394
  --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-plain--disabled--Color);
8383
- --pf-v5-c-button__progress--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
8395
+ --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-plain--disabled--BackgroundColor);
8396
+ --pf-v5-c-button--m-small--PaddingTop: var(--pf-v5-c-button--m-plain--m-small--PaddingTop);
8397
+ --pf-v5-c-button--m-small--PaddingRight: var(--pf-v5-c-button--m-plain--m-small--PaddingRight);
8398
+ --pf-v5-c-button--m-small--PaddingBottom: var(--pf-v5-c-button--m-plain--m-small--PaddingBottom);
8399
+ --pf-v5-c-button--m-small--PaddingLeft: var(--pf-v5-c-button--m-plain--m-small--PaddingLeft);
8384
8400
  min-width: var(--pf-v5-c-button--m-plain--MinWidth);
8385
8401
  }
8386
8402
  .pf-v5-c-button.pf-m-plain.pf-m-no-padding {
@@ -8391,7 +8407,8 @@ button.pf-v5-c-breadcrumb__link {
8391
8407
  --pf-v5-c-button--m-plain--PaddingRight: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingRight);
8392
8408
  --pf-v5-c-button--m-plain--PaddingBottom: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingBottom);
8393
8409
  --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingLeft);
8394
- --pf-v5-c-button--m-plain--MixBlendMode: var(--pf-v5-c-button--m-plain--m-no-padding--MixBlendMode);
8410
+ --pf-v5-c-button--m-plain--hover--MixBlendMode: var(--pf-v5-c-button--m-plain--m-no-padding--hover--MixBlendMode);
8411
+ --pf-v5-c-button--m-plain--m-clicked--MixBlendMode: var(--pf-v5-c-button--m-plain--m-no-padding--m-clicked--MixBlendMode);
8395
8412
  min-width: var(--pf-v5-c-button--m-plain--m-no-padding--MinWidth);
8396
8413
  }
8397
8414
  .pf-v5-c-button.pf-m-block {
@@ -8417,6 +8434,7 @@ button.pf-v5-c-breadcrumb__link {
8417
8434
  --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--hover--BorderColor);
8418
8435
  --pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--hover--BorderWidth);
8419
8436
  --pf-v5-c-button--TextDecoration: var(--pf-v5-c-button--hover--TextDecoration);
8437
+ --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--hover--MixBlendMode);
8420
8438
  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--hover__icon--Color);
8421
8439
  }
8422
8440
  .pf-v5-c-button.pf-m-clicked {
@@ -8424,6 +8442,7 @@ button.pf-v5-c-breadcrumb__link {
8424
8442
  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-clicked--BackgroundColor);
8425
8443
  --pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--m-clicked--BorderWidth);
8426
8444
  --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--m-clicked--BorderColor);
8445
+ --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-clicked--MixBlendMode);
8427
8446
  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-clicked__icon--Color);
8428
8447
  }
8429
8448
  .pf-v5-c-button:disabled, .pf-v5-c-button.pf-m-disabled {
@@ -8433,6 +8452,7 @@ button.pf-v5-c-breadcrumb__link {
8433
8452
  --pf-v5-c-badge--m-unread--Color: var(--pf-v5-c-button--disabled__c-badge--Color);
8434
8453
  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-c-button--disabled__c-badge--BackgroundColor);
8435
8454
  --pf-v5-c-button--m-primary__c-badge--BorderWidth: 0;
8455
+ --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--disabled--MixBlendMode);
8436
8456
  color: var(--pf-v5-c-button--disabled--Color);
8437
8457
  background-color: var(--pf-v5-c-button--disabled--BackgroundColor);
8438
8458
  }