@patternfly/patternfly 6.0.0-alpha.42 → 6.0.0-alpha.43

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 (13) hide show
  1. package/components/Button/button.css +366 -347
  2. package/components/Button/button.scss +422 -471
  3. package/components/Spinner/spinner.css +4 -0
  4. package/components/Spinner/spinner.scss +3 -0
  5. package/docs/components/Button/examples/Button.css +4 -0
  6. package/docs/components/Button/examples/Button.md +1380 -81
  7. package/package.json +1 -1
  8. package/patternfly-no-globals.css +370 -347
  9. package/patternfly-theme-dark-unversioned.css +370 -347
  10. package/patternfly.css +370 -347
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
  13. package/components/Button/themes/dark/button.scss +0 -51
package/patternfly.css CHANGED
@@ -7903,159 +7903,193 @@ button.pf-v5-c-breadcrumb__link {
7903
7903
  display: none;
7904
7904
  }
7905
7905
 
7906
+ :root,
7906
7907
  .pf-v5-c-button {
7907
7908
  --pf-v5-c-button--PaddingTop: var(--pf-t--global--spacer--sm);
7908
7909
  --pf-v5-c-button--PaddingRight: var(--pf-t--global--spacer--lg);
7909
7910
  --pf-v5-c-button--PaddingBottom: var(--pf-t--global--spacer--sm);
7910
7911
  --pf-v5-c-button--PaddingLeft: var(--pf-t--global--spacer--lg);
7912
+ --pf-v5-c-button--Color: var(--pf-t--global--text--color--regular);
7911
7913
  --pf-v5-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
7912
7914
  --pf-v5-c-button--FontWeight: var(--pf-t--global--font--weight--body);
7913
7915
  --pf-v5-c-button--FontSize: var(--pf-t--global--font--size--body--default);
7914
7916
  --pf-v5-c-button--BackgroundColor: transparent;
7917
+ --pf-v5-c-button--BorderColor: transparent;
7918
+ --pf-v5-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
7915
7919
  --pf-v5-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
7916
- --pf-v5-c-button--after--BorderColor: transparent;
7917
- --pf-v5-c-button--after--BorderWidth: var(--pf-t--global--border--width--button--default);
7918
- --pf-v5-c-button--hover--after--BorderWidth: var(--pf-t--global--border--width--button--hover);
7919
- --pf-v5-c-button--focus--after--BorderWidth: var(--pf-t--global--border--width--button--active);
7920
- --pf-v5-c-button--active--after--BorderWidth: var(--pf-t--global--border--width--button--active);
7921
- --pf-v5-c-button--disabled--Color: var(--pf-t--global--text--color--disabled--default);
7922
- --pf-v5-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
7923
- --pf-v5-c-button--disabled--after--BorderColor: transparent;
7924
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
7920
+ --pf-v5-c-button--TextDecoration: none;
7921
+ --pf-v5-c-button--hover--BackgroundColor: transparent;
7922
+ --pf-v5-c-button--hover--BorderColor: transparent;
7923
+ --pf-v5-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
7924
+ --pf-v5-c-button--hover--TextDecoration: none;
7925
+ --pf-v5-c-button--m-clicked--BackgroundColor: transparent;
7926
+ --pf-v5-c-button--m-clicked--BorderColor: transparent;
7927
+ --pf-v5-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--button--active);
7925
7928
  --pf-v5-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
7926
- --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
7929
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
7930
+ --pf-v5-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
7927
7931
  --pf-v5-c-button--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
7928
- --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--pf-t--global--color--brand--active);
7929
- --pf-v5-c-button--m-primary--focus--Color: var(--pf-t--global--text--color--on-brand--active);
7930
- --pf-v5-c-button--m-primary--active--BackgroundColor: var(--pf-t--global--color--brand--active);
7931
- --pf-v5-c-button--m-primary--active--Color: var(--pf-t--global--text--color--on-brand--active);
7932
- --pf-v5-c-button--m-secondary--BackgroundColor: transparent;
7933
- --pf-v5-c-button--m-secondary--after--BorderColor: var(--pf-t--global--border--color--brand--default);
7932
+ --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
7933
+ --pf-v5-c-button--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
7934
+ --pf-v5-c-button--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
7935
+ --pf-v5-c-button--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
7936
+ --pf-v5-c-button--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
7934
7937
  --pf-v5-c-button--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
7935
- --pf-v5-c-button--m-secondary--hover--BackgroundColor: transparent;
7936
- --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--pf-t--global--border--color--brand--hover);
7938
+ --pf-v5-c-button--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
7939
+ --pf-v5-c-button--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--default);
7937
7940
  --pf-v5-c-button--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
7938
- --pf-v5-c-button--m-secondary--focus--BackgroundColor: transparent;
7939
- --pf-v5-c-button--m-secondary--focus--after--BorderColor: var(--pf-t--global--border--color--brand--active);
7940
- --pf-v5-c-button--m-secondary--focus--Color: var(--pf-t--global--text--color--brand--active);
7941
- --pf-v5-c-button--m-secondary--active--BackgroundColor: transparent;
7942
- --pf-v5-c-button--m-secondary--active--after--BorderColor: var(--pf-t--global--border--color--brand--active);
7943
- --pf-v5-c-button--m-secondary--active--Color: var(--pf-t--global--text--color--brand--active);
7944
- --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: transparent;
7941
+ --pf-v5-c-button--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
7942
+ --pf-v5-c-button--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
7943
+ --pf-v5-c-button--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
7944
+ --pf-v5-c-button--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--clicked);
7945
+ --pf-v5-c-button--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
7945
7946
  --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
7946
- --pf-v5-c-button--m-secondary--m-danger--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
7947
- --pf-v5-c-button--m-secondary--m-danger--hover--BackgroundColor: transparent;
7947
+ --pf-v5-c-button--m-secondary--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
7948
+ --pf-v5-c-button--m-secondary--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
7948
7949
  --pf-v5-c-button--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
7949
- --pf-v5-c-button--m-secondary--m-danger--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
7950
- --pf-v5-c-button--m-secondary--m-danger--focus--BackgroundColor: transparent;
7951
- --pf-v5-c-button--m-secondary--m-danger--focus--Color: var(--pf-t--global--text--color--status--danger--active);
7952
- --pf-v5-c-button--m-secondary--m-danger--focus--after--BorderColor: var(--pf-t--global--border--color--status--danger--active);
7953
- --pf-v5-c-button--m-secondary--m-danger--active--BackgroundColor: transparent;
7954
- --pf-v5-c-button--m-secondary--m-danger--active--Color: var(--pf-t--global--text--color--status--danger--active);
7955
- --pf-v5-c-button--m-secondary--m-danger--active--after--BorderColor: var(--pf-t--global--border--color--status--danger--active);
7956
- --pf-v5-c-button--m-tertiary--BackgroundColor: transparent;
7957
- --pf-v5-c-button--m-tertiary--after--BorderColor: var(--pf-t--global--border--color--default);
7958
- --pf-v5-c-button--m-tertiary--Color: var(--pf-t--global--text--color--regular);
7959
- --pf-v5-c-button--m-tertiary--hover--BackgroundColor: transparent;
7960
- --pf-v5-c-button--m-tertiary--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
7961
- --pf-v5-c-button--m-tertiary--hover--Color: var(--pf-t--global--text--color--regular);
7962
- --pf-v5-c-button--m-tertiary--focus--BackgroundColor: transparent;
7963
- --pf-v5-c-button--m-tertiary--focus--after--BorderColor: var(--pf-t--global--border--color--active);
7964
- --pf-v5-c-button--m-tertiary--focus--Color: var(--pf-t--global--text--color--regular);
7965
- --pf-v5-c-button--m-tertiary--active--BackgroundColor: transparent;
7966
- --pf-v5-c-button--m-tertiary--active--after--BorderColor: var(--pf-t--global--border--color--active);
7967
- --pf-v5-c-button--m-tertiary--active--Color: var(--pf-t--global--text--color--regular);
7968
- --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
7969
- --pf-v5-c-button--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
7970
- --pf-v5-c-button--m-warning--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
7971
- --pf-v5-c-button--m-warning--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
7972
- --pf-v5-c-button--m-warning--focus--BackgroundColor: var(--pf-t--global--color--status--warning--active);
7973
- --pf-v5-c-button--m-warning--focus--Color: var(--pf-t--global--text--color--status--on-warning--hover);
7974
- --pf-v5-c-button--m-warning--active--BackgroundColor: var(--pf-t--global--color--status--warning--active);
7975
- --pf-v5-c-button--m-warning--active--Color: var(--pf-t--global--text--color--status--on-warning--hover);
7976
- --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
7977
- --pf-v5-c-button--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
7978
- --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
7979
- --pf-v5-c-button--m-danger--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
7980
- --pf-v5-c-button--m-danger--focus--BackgroundColor: var(--pf-t--global--color--status--danger--active);
7981
- --pf-v5-c-button--m-danger--focus--Color: var(--pf-t--global--text--color--status--on-danger--hover);
7982
- --pf-v5-c-button--m-danger--active--BackgroundColor: var(--pf-t--global--color--status--danger--active);
7983
- --pf-v5-c-button--m-danger--active--Color: var(--pf-t--global--text--color--status--on-danger--hover);
7984
- --pf-v5-c-button--m-link--BackgroundColor: transparent;
7985
- --pf-v5-c-button--m-link--Color: var(--pf-t--global--text--color--link--default);
7986
- --pf-v5-c-button--m-link--hover--BackgroundColor: transparent;
7987
- --pf-v5-c-button--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
7988
- --pf-v5-c-button--m-link--focus--BackgroundColor: transparent;
7989
- --pf-v5-c-button--m-link--focus--Color: var(--pf-t--global--text--color--link--hover);
7990
- --pf-v5-c-button--m-link--active--BackgroundColor: transparent;
7991
- --pf-v5-c-button--m-link--active--Color: var(--pf-t--global--text--color--link--hover);
7992
- --pf-v5-c-button--m-link--disabled--BackgroundColor: transparent;
7993
- --pf-v5-c-button--m-link--disabled--Color: var(--pf-t--global--text--color--disabled--light);
7994
- --pf-v5-c-button--m-link--not--m-inline--TextDecoration: none;
7995
- --pf-v5-c-button--m-link--m-inline--FontSize: inherit;
7950
+ --pf-v5-c-button--m-secondary--m-danger--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
7951
+ --pf-v5-c-button--m-secondary--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
7952
+ --pf-v5-c-button--m-secondary--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
7953
+ --pf-v5-c-button--m-secondary--m-danger--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked);
7954
+ --pf-v5-c-button--m-secondary--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked);
7955
+ --pf-v5-c-button--m-tertiary--Color: var(--pf-t--global--text--color--brand--default);
7956
+ --pf-v5-c-button--m-tertiary--BorderColor: var(--pf-t--global--border--color--default);
7957
+ --pf-v5-c-button--m-tertiary__icon--Color: var(--pf-t--global--icon--color--brand--default);
7958
+ --pf-v5-c-button--m-tertiary--hover--Color: var(--pf-t--global--text--color--brand--hover);
7959
+ --pf-v5-c-button--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--hover);
7960
+ --pf-v5-c-button--m-tertiary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
7961
+ --pf-v5-c-button--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
7962
+ --pf-v5-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
7963
+ --pf-v5-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
7964
+ --pf-v5-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
7965
+ --pf-v5-c-button--m-link--PaddingRight: var(--pf-t--global--spacer--md);
7966
+ --pf-v5-c-button--m-link--PaddingLeft: var(--pf-t--global--spacer--md);
7967
+ --pf-v5-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
7968
+ --pf-v5-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
7969
+ --pf-v5-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
7970
+ --pf-v5-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
7971
+ --pf-v5-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
7972
+ --pf-v5-c-button--m-link--hover__icon--Color: var(--pf-t--global--text--color--brand--hover);
7973
+ --pf-v5-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
7974
+ --pf-v5-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
7975
+ --pf-v5-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
7976
+ --pf-v5-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
7977
+ --pf-v5-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
7978
+ --pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
7979
+ --pf-v5-c-button--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
7980
+ --pf-v5-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
7981
+ --pf-v5-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
7982
+ --pf-v5-c-button--m-link--m-inline--FontSize: initial;
7983
+ --pf-v5-c-button--m-link--m-inline--LineHeight: initial;
7984
+ --pf-v5-c-button--m-link--m-inline--FontWeight: initial;
7996
7985
  --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
7997
- --pf-v5-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--link--hover);
7998
7986
  --pf-v5-c-button--m-link--m-inline--PaddingTop: 0;
7999
7987
  --pf-v5-c-button--m-link--m-inline--PaddingRight: 0;
8000
7988
  --pf-v5-c-button--m-link--m-inline--PaddingBottom: 0;
8001
7989
  --pf-v5-c-button--m-link--m-inline--PaddingLeft: 0;
8002
7990
  --pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
8003
7991
  --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));
8004
- --pf-v5-c-button--m-link--m-danger--BackgroundColor: transparent;
8005
- --pf-v5-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
8006
- --pf-v5-c-button--m-link--m-danger--hover--BackgroundColor: transparent;
8007
- --pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
8008
- --pf-v5-c-button--m-link--m-danger--focus--BackgroundColor: transparent;
8009
- --pf-v5-c-button--m-link--m-danger--focus--Color: var(--pf-t--global--text--color--status--danger--active);
8010
- --pf-v5-c-button--m-link--m-danger--active--BackgroundColor: transparent;
8011
- --pf-v5-c-button--m-link--m-danger--active--Color: var(--pf-t--global--text--color--status--danger--active);
8012
- --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
7992
+ --pf-v5-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
7993
+ --pf-v5-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
8013
7994
  --pf-v5-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
8014
7995
  --pf-v5-c-button--m-plain--PaddingTop: var(--pf-t--global--spacer--sm);
8015
7996
  --pf-v5-c-button--m-plain--PaddingRight: var(--pf-t--global--spacer--sm);
8016
7997
  --pf-v5-c-button--m-plain--PaddingBottom: var(--pf-t--global--spacer--sm);
8017
7998
  --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
7999
+ --pf-v5-c-button--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
8000
+ --pf-v5-c-button--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
8001
+ --pf-v5-c-button--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
8002
+ --pf-v5-c-button--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
8018
8003
  --pf-v5-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
8004
+ --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
8005
+ --pf-v5-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
8019
8006
  --pf-v5-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
8020
- --pf-v5-c-button--m-plain--hover--Color: var(--pf-t--global--text--color--regular);
8021
- --pf-v5-c-button--m-plain--focus--BackgroundColor: transparent;
8022
- --pf-v5-c-button--m-plain--focus--Color: var(--pf-t--global--text--color--regular);
8023
- --pf-v5-c-button--m-plain--active--BackgroundColor: transparent;
8024
- --pf-v5-c-button--m-plain--active--Color: var(--pf-t--global--text--color--regular);
8025
- --pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
8026
- --pf-v5-c-button--m-plain--disabled--BackgroundColor: transparent;
8027
- --pf-v5-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
8028
- --pf-v5-c-button--m-control--Color: var(--pf-t--global--text--color--subtle);
8007
+ --pf-v5-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
8008
+ --pf-v5-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
8009
+ --pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
8010
+ --pf-v5-c-button__progress--Color: var(--pf-v5-c-button__icon--Color);
8011
+ --pf-v5-c-button--m-plain--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
8012
+ --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
8013
  --pf-v5-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
8030
- --pf-v5-c-button--m-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
8031
- --pf-v5-c-button--m-control--after--BorderTopColor: var(--pf-t--global--border--color--default);
8032
- --pf-v5-c-button--m-control--after--BorderRightColor: var(--pf-t--global--border--color--default);
8033
- --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-t--global--border--color--default);
8034
- --pf-v5-c-button--m-control--after--BorderLeftColor: var(--pf-t--global--border--color--default);
8035
- --pf-v5-c-button--m-control--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
8036
- --pf-v5-c-button--m-control--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8014
+ --pf-v5-c-button--m-control--PaddingLeft: var(--pf-t--global--spacer--md);
8015
+ --pf-v5-c-button--m-control--PaddingRight: var(--pf-t--global--spacer--md);
8016
+ --pf-v5-c-button--m-control--Color: var(--pf-t--global--text--color--regular);
8017
+ --pf-v5-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
8018
+ --pf-v5-c-button--m-control--BorderColor: var(--pf-t--global--border--color--default);
8019
+ --pf-v5-c-button--m-control--BorderWidth: var(--pf-t--global--border--width--control--default);
8020
+ --pf-v5-c-button--m-control__icon--Color: var(--pf-t--global--icon--color--regular);
8037
8021
  --pf-v5-c-button--m-control--hover--Color: var(--pf-t--global--text--color--regular);
8038
- --pf-v5-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-t--global--border--width--control--hover);
8039
- --pf-v5-c-button--m-control--hover--after--BorderBottomColor: var(--pf-t--global--background--color--secondary--hover);
8040
- --pf-v5-c-button--m-control--active--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8041
- --pf-v5-c-button--m-control--active--Color: var(--pf-t--global--text--color--regular);
8042
- --pf-v5-c-button--m-control--active--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
8043
- --pf-v5-c-button--m-control--active--after--BorderBottomColor: var(--pf-t--global--color--brand--active);
8044
- --pf-v5-c-button--m-control--focus--BackgroundColor: var(--pf-t--global--background--color--brand--active);
8045
- --pf-v5-c-button--m-control--focus--Color: var(--pf-t--global--text--color--regular);
8046
- --pf-v5-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
8047
- --pf-v5-c-button--m-control--focus--after--BorderBottomColor: var(--pf-t--global--color--brand--hover);
8048
- --pf-v5-c-button--m-control--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8049
- --pf-v5-c-button--m-control--m-expanded--Color: var(--pf-t--global--text--color--inverse);
8050
- --pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth: var(--pf-t--global--border--width--200);
8051
- --pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-t--global--color--brand--hover);
8052
- --pf-v5-c-button--m-small--FontSize: var(--pf-v5-global--FontSize--sm);
8022
+ --pf-v5-c-button--m-control--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
8023
+ --pf-v5-c-button--m-control--hover--BorderColor: var(--pf-t--global--border--color--hover);
8024
+ --pf-v5-c-button--m-control--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
8025
+ --pf-v5-c-button--m-control--hover__icon--Color: var(--pf-t--global--icon--color--regular);
8026
+ --pf-v5-c-button--m-control--m-clicked--Color: var(--pf-t--global--text--color--regular);
8027
+ --pf-v5-c-button--m-control--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
8028
+ --pf-v5-c-button--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
8029
+ --pf-v5-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--active);
8030
+ --pf-v5-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
8031
+ --pf-v5-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
8032
+ --pf-v5-c-button--m-stateful--PaddingLeft: var(--pf-t--global--spacer--md);
8033
+ --pf-v5-c-button--m-stateful--PaddingRight: var(--pf-t--global--spacer--md);
8034
+ --pf-v5-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
8035
+ --pf-v5-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
8036
+ --pf-v5-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--hover);
8037
+ --pf-v5-c-button--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
8038
+ --pf-v5-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--clicked);
8039
+ --pf-v5-c-button--m-read--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
8040
+ --pf-v5-c-button--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
8041
+ --pf-v5-c-button--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
8042
+ --pf-v5-c-button--m-unread__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
8043
+ --pf-v5-c-button--m-unread--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
8044
+ --pf-v5-c-button--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
8045
+ --pf-v5-c-button--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
8046
+ --pf-v5-c-button--m-unread--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
8047
+ --pf-v5-c-button--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
8048
+ --pf-v5-c-button--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
8049
+ --pf-v5-c-button--m-attention--Color: var(--pf-t--global--text--color--status--on-danger--default);
8050
+ --pf-v5-c-button--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
8051
+ --pf-v5-c-button--m-attention__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
8052
+ --pf-v5-c-button--m-attention--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
8053
+ --pf-v5-c-button--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
8054
+ --pf-v5-c-button--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
8055
+ --pf-v5-c-button--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
8056
+ --pf-v5-c-button--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
8057
+ --pf-v5-c-button--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
8058
+ --pf-v5-c-button--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
8059
+ --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
8060
+ --pf-v5-c-button--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
8061
+ --pf-v5-c-button--m-warning--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
8062
+ --pf-v5-c-button--m-warning--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
8063
+ --pf-v5-c-button--m-warning--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
8064
+ --pf-v5-c-button--m-warning--m-clicked--Color: var(--pf-t--global--text--color--status--on-warning--clicked);
8065
+ --pf-v5-c-button--m-warning--m-clicked--BackgroundColor: var(--pf-t--global--color--status--warning--clicked);
8066
+ --pf-v5-c-button--m-warning--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-warning--clicked);
8067
+ --pf-v5-c-button--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
8068
+ --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
8069
+ --pf-v5-c-button--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
8070
+ --pf-v5-c-button--m-danger--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
8071
+ --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
8072
+ --pf-v5-c-button--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
8073
+ --pf-v5-c-button--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
8074
+ --pf-v5-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
8075
+ --pf-v5-c-button--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
8053
8076
  --pf-v5-c-button--m-display-lg--PaddingTop: var(--pf-t--global--spacer--md);
8054
8077
  --pf-v5-c-button--m-display-lg--PaddingRight: var(--pf-t--global--spacer--xl);
8055
8078
  --pf-v5-c-button--m-display-lg--PaddingBottom: var(--pf-t--global--spacer--md);
8056
8079
  --pf-v5-c-button--m-display-lg--PaddingLeft: var(--pf-t--global--spacer--xl);
8057
8080
  --pf-v5-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
8058
8081
  --pf-v5-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
8082
+ --pf-v5-c-button--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
8083
+ --pf-v5-c-button--m-small--PaddingRight: var(--pf-t--global--spacer--md);
8084
+ --pf-v5-c-button--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
8085
+ --pf-v5-c-button--m-small--PaddingLeft: var(--pf-t--global--spacer--md);
8086
+ --pf-v5-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
8087
+ --pf-v5-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
8088
+ --pf-v5-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
8089
+ --pf-v5-c-button--disabled--BorderColor: transparent;
8090
+ --pf-v5-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
8091
+ --pf-v5-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
8092
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
8059
8093
  --pf-v5-c-button__icon--m-start--MarginRight: var(--pf-t--global--spacer--xs);
8060
8094
  --pf-v5-c-button__icon--m-end--MarginLeft: var(--pf-t--global--spacer--xs);
8061
8095
  --pf-v5-c-button__progress--width: calc(var(--pf-v5-global--icon--FontSize--md) + var(--pf-v5-global--spacer--sm));
@@ -8064,319 +8098,301 @@ button.pf-v5-c-breadcrumb__link {
8064
8098
  --pf-v5-c-button__progress--TranslateX: 0;
8065
8099
  --pf-v5-c-button__progress--Top: 50%;
8066
8100
  --pf-v5-c-button__progress--Left: var(--pf-t--global--spacer--md);
8101
+ --pf-v5-c-button__progress--Color: var(--pf-v5-c-button__icon--Color);
8067
8102
  --pf-v5-c-button--m-progress--TransitionProperty: padding;
8068
8103
  --pf-v5-c-button--m-progress--TransitionDuration: var(--pf-v5-global--TransitionDuration);
8069
8104
  --pf-v5-c-button--m-progress--PaddingRight: calc(var(--pf-t--global--spacer--md) + var(--pf-v5-c-button__progress--width) / 2);
8070
8105
  --pf-v5-c-button--m-progress--PaddingLeft: calc(var(--pf-t--global--spacer--md) + var(--pf-v5-c-button__progress--width) / 2);
8071
8106
  --pf-v5-c-button--m-in-progress--PaddingRight: var(--pf-t--global--spacer--md);
8072
8107
  --pf-v5-c-button--m-in-progress--PaddingLeft: calc(var(--pf-t--global--spacer--md) + var(--pf-v5-c-button__progress--width));
8073
- --pf-v5-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--color--brand--default);
8108
+ --pf-v5-c-button--m-in-progress--m-plain--Color: var(--pf-v5-c-spinner--Color);
8074
8109
  --pf-v5-c-button--m-in-progress--m-plain__progress--Left: 50%;
8075
8110
  --pf-v5-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
8076
8111
  --pf-v5-c-button__count--MarginLeft: var(--pf-v5-global--spacer--sm);
8077
8112
  --pf-v5-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled--default);
8078
8113
  --pf-v5-c-button--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
8079
8114
  --pf-v5-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
8080
- --pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--300);
8115
+ --pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
8116
+ }
8117
+
8118
+ .pf-v5-c-button {
8081
8119
  position: relative;
8082
8120
  display: inline-block;
8083
8121
  padding-block-start: var(--pf-v5-c-button--PaddingTop);
8084
8122
  padding-block-end: var(--pf-v5-c-button--PaddingBottom);
8085
8123
  padding-inline-start: var(--pf-v5-c-button--PaddingLeft);
8086
8124
  padding-inline-end: var(--pf-v5-c-button--PaddingRight);
8087
- font-size: var(--pf-v5-c-button--FontSize);
8088
- font-weight: var(--pf-v5-c-button--FontWeight);
8089
- line-height: var(--pf-v5-c-button--LineHeight);
8125
+ font-size: var(--pf-v5-c-button--FontSize, inherit);
8126
+ font-weight: var(--pf-v5-c-button--FontWeight, inherit);
8127
+ line-height: var(--pf-v5-c-button--LineHeight, inherit);
8128
+ color: var(--pf-v5-c-button--Color);
8090
8129
  text-align: center;
8130
+ text-decoration: var(--pf-v5-c-button--TextDecoration);
8091
8131
  white-space: nowrap;
8092
8132
  user-select: none;
8133
+ background-color: var(--pf-v5-c-button--BackgroundColor);
8093
8134
  border: 0;
8094
8135
  border-radius: var(--pf-v5-c-button--BorderRadius);
8095
8136
  }
8096
8137
  .pf-v5-c-button::after {
8097
8138
  position: absolute;
8098
- inset-block-start: 0;
8099
- inset-block-end: 0;
8100
- inset-inline-start: 0;
8101
- inset-inline-end: 0;
8139
+ inset: 0;
8102
8140
  pointer-events: none;
8103
8141
  content: "";
8104
- border: var(--pf-v5-c-button--after--BorderWidth) solid;
8105
- border-color: var(--pf-v5-c-button--after--BorderColor);
8106
- border-radius: var(--pf-v5-c-button--BorderRadius);
8107
- }
8108
- .pf-v5-c-button:hover {
8109
- --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--hover--after--BorderWidth);
8110
- text-decoration: none;
8111
- }
8112
- .pf-v5-c-button:focus {
8113
- --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--focus--after--BorderWidth);
8114
- }
8115
- .pf-v5-c-button:active, .pf-v5-c-button.pf-m-active {
8116
- --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--active--after--BorderWidth);
8117
- }
8118
- .pf-v5-c-button.pf-m-block {
8119
- display: block;
8120
- width: 100%;
8121
- }
8122
- .pf-v5-c-button.pf-m-small {
8123
- --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-small--FontSize);
8124
- }
8125
- .pf-v5-c-button.pf-m-primary.pf-m-display-lg, .pf-v5-c-button.pf-m-secondary.pf-m-display-lg, .pf-v5-c-button.pf-m-tertiary.pf-m-display-lg, .pf-v5-c-button.pf-m-link.pf-m-display-lg {
8126
- --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-display-lg--PaddingTop);
8127
- --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-display-lg--PaddingRight);
8128
- --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-display-lg--PaddingBottom);
8129
- --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-display-lg--PaddingLeft);
8130
- --pf-v5-c-button--FontWeight: var(--pf-v5-c-button--m-display-lg--FontWeight);
8142
+ border: var(--pf-v5-c-button--BorderWidth) solid;
8143
+ border-color: var(--pf-v5-c-button--BorderColor);
8144
+ border-radius: inherit;
8131
8145
  }
8132
8146
  .pf-v5-c-button.pf-m-primary {
8133
- color: var(--pf-v5-c-button--m-primary--Color);
8134
- background-color: var(--pf-v5-c-button--m-primary--BackgroundColor);
8135
- }
8136
- .pf-v5-c-button.pf-m-primary:hover {
8137
- --pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--hover--Color);
8138
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--hover--BackgroundColor);
8139
- }
8140
- .pf-v5-c-button.pf-m-primary:focus {
8141
- --pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--focus--Color);
8142
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--focus--BackgroundColor);
8147
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-primary--Color);
8148
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-primary--BackgroundColor);
8149
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-primary__icon--Color);
8150
+ --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-primary--hover--Color);
8151
+ --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-primary--hover--BackgroundColor);
8152
+ --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-primary--hover__icon--Color);
8153
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-primary--m-clicked--Color);
8154
+ --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-primary--m-clicked--BackgroundColor);
8155
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-primary--m-clicked__icon--Color);
8143
8156
  }
8144
8157
  .pf-v5-c-button.pf-m-primary .pf-v5-c-badge.pf-m-unread {
8145
8158
  border: var(--pf-v5-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-v5-c-button--m-primary__c-badge--BorderColor);
8146
8159
  }
8147
8160
  .pf-v5-c-button.pf-m-secondary {
8148
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--after--BorderColor);
8149
- color: var(--pf-v5-c-button--m-secondary--Color);
8150
- background-color: var(--pf-v5-c-button--m-secondary--BackgroundColor);
8151
- }
8152
- .pf-v5-c-button.pf-m-secondary:hover {
8153
- --pf-v5-c-button--m-secondary--Color: var(--pf-v5-c-button--m-secondary--hover--Color);
8154
- --pf-v5-c-button--m-secondary--BackgroundColor: var(--pf-v5-c-button--m-secondary--hover--BackgroundColor);
8155
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--hover--after--BorderColor);
8156
- }
8157
- .pf-v5-c-button.pf-m-secondary:focus {
8158
- --pf-v5-c-button--m-secondary--Color: var(--pf-v5-c-button--m-secondary--focus--Color);
8159
- --pf-v5-c-button--m-secondary--BackgroundColor: var(--pf-v5-c-button--m-secondary--focus--BackgroundColor);
8160
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--focus--after--BorderColor);
8161
- }
8162
- .pf-v5-c-button.pf-m-secondary.pf-m-active, .pf-v5-c-button.pf-m-secondary:active {
8163
- --pf-v5-c-button--m-secondary--Color: var(--pf-v5-c-button--m-secondary--active--Color);
8164
- --pf-v5-c-button--m-secondary--BackgroundColor: var(--pf-v5-c-button--m-secondary--active--BackgroundColor);
8165
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--active--after--BorderColor);
8161
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-secondary--Color);
8162
+ --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--m-secondary--BorderColor);
8163
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-secondary__icon--Color);
8164
+ --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-secondary--hover--Color);
8165
+ --pf-v5-c-button--hover--BorderColor: var(--pf-v5-c-button--m-secondary--hover--BorderColor);
8166
+ --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-secondary--hover__icon--Color);
8167
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-secondary--m-clicked--Color);
8168
+ --pf-v5-c-button--m-clicked--BorderColor: var(--pf-v5-c-button--m-secondary--m-clicked--BorderColor);
8169
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-secondary--m-clicked__icon--Color);
8170
+ --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--Color);
8171
+ --pf-v5-c-button--m-danger__icon--Color: var(--pf-v5-c-button--m-secondary--m-danger__icon--Color);
8172
+ --pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-c-button--m-secondary--m-danger--hover--Color);
8173
+ --pf-v5-c-button--m-danger--hover__icon--Color: var(--pf-v5-c-button--m-secondary--m-danger--hover__icon--Color);
8174
+ --pf-v5-c-button--m-danger--m-clicked--Color: var(--pf-v5-c-button--m-secondary--m-danger--m-clicked--Color);
8175
+ --pf-v5-c-button--m-danger--m-clicked__icon--Color: var(--pf-v5-c-button--m-secondary--m-danger--m-clicked__icon--Color);
8176
+ }
8177
+ .pf-v5-c-button.pf-m-secondary.pf-m-danger {
8178
+ --pf-v5-c-button--m-secondary--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--BorderColor);
8179
+ --pf-v5-c-button--m-secondary--hover--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--hover--BorderColor);
8180
+ --pf-v5-c-button--m-secondary--m-clicked--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--m-clicked--BorderColor);
8181
+ --pf-v5-c-button--m-danger--BackgroundColor: transparent;
8182
+ --pf-v5-c-button--m-danger--hover--BackgroundColor: transparent;
8183
+ --pf-v5-c-button--m-danger--m-clicked--BackgroundColor: transparent;
8166
8184
  }
8167
8185
  .pf-v5-c-button.pf-m-tertiary {
8168
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-tertiary--after--BorderColor);
8169
- color: var(--pf-v5-c-button--m-tertiary--Color);
8170
- background-color: var(--pf-v5-c-button--m-tertiary--BackgroundColor);
8171
- }
8172
- .pf-v5-c-button.pf-m-tertiary:hover {
8173
- --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-c-button--m-tertiary--hover--Color);
8174
- --pf-v5-c-button--m-tertiary--BackgroundColor: var(--pf-v5-c-button--m-tertiary--hover--BackgroundColor);
8175
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-tertiary--hover--after--BorderColor);
8176
- }
8177
- .pf-v5-c-button.pf-m-tertiary:focus {
8178
- --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-c-button--m-tertiary--focus--Color);
8179
- --pf-v5-c-button--m-tertiary--BackgroundColor: var(--pf-v5-c-button--m-tertiary--focus--BackgroundColor);
8180
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-tertiary--focus--after--BorderColor);
8181
- }
8182
- .pf-v5-c-button.pf-m-tertiary:active, .pf-v5-c-button.pf-m-tertiary.pf-m-active {
8183
- --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-c-button--m-tertiary--active--Color);
8184
- --pf-v5-c-button--m-tertiary--BackgroundColor: var(--pf-v5-c-button--m-tertiary--active--BackgroundColor);
8185
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-tertiary--active--after--BorderColor);
8186
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-tertiary--Color);
8187
+ --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--m-tertiary--BorderColor);
8188
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-tertiary__icon--Color);
8189
+ --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-tertiary--hover--Color);
8190
+ --pf-v5-c-button--hover--BorderColor: var(--pf-v5-c-button--m-tertiary--hover--BorderColor);
8191
+ --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-tertiary--hover__icon--Color);
8192
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-tertiary--m-clicked--Color);
8193
+ --pf-v5-c-button--m-clicked--BorderColor: var(--pf-v5-c-button--m-tertiary--m-clicked--BorderColor);
8194
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-tertiary--m-clicked__icon--Color);
8186
8195
  }
8187
8196
  .pf-v5-c-button.pf-m-link {
8188
- --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-link--disabled--BackgroundColor);
8189
- --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-link--disabled--Color);
8190
- color: var(--pf-v5-c-button--m-link--Color);
8191
- background-color: var(--pf-v5-c-button--m-link--BackgroundColor);
8192
- }
8193
- .pf-v5-c-button.pf-m-link:not(.pf-m-inline):hover, .pf-v5-c-button.pf-m-link:not(.pf-m-inline):focus, .pf-v5-c-button.pf-m-link:not(.pf-m-inline):active {
8194
- text-decoration: var(--pf-t--global--link--text-decoration--hover);
8195
- }
8196
- .pf-v5-c-button.pf-m-link:not(.pf-m-inline):hover {
8197
- --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--hover--Color);
8198
- --pf-v5-c-button--m-link--BackgroundColor: var(--pf-v5-c-button--m-link--hover--BackgroundColor);
8199
- }
8200
- .pf-v5-c-button.pf-m-link:not(.pf-m-inline):focus {
8201
- --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--focus--Color);
8202
- --pf-v5-c-button--m-link--BackgroundColor: var(--pf-v5-c-button--m-link--focus--BackgroundColor);
8203
- }
8204
- .pf-v5-c-button.pf-m-link:not(.pf-m-inline):active, .pf-v5-c-button.pf-m-link:not(.pf-m-inline).pf-m-active {
8205
- --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--active--Color);
8206
- --pf-v5-c-button--m-link--BackgroundColor: var(--pf-v5-c-button--m-link--active--BackgroundColor);
8197
+ --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-link--PaddingRight);
8198
+ --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-link--PaddingLeft);
8199
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-link--Color);
8200
+ --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-link--BorderRadius);
8201
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-link--BackgroundColor);
8202
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-link__icon--Color);
8203
+ --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-link--hover--Color);
8204
+ --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-link--hover--BackgroundColor);
8205
+ --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-link--hover__icon--Color);
8206
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-link--m-clicked--Color);
8207
+ --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-link--m-clicked--BackgroundColor);
8208
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-link--m-clicked__icon--Color);
8207
8209
  }
8208
8210
  .pf-v5-c-button.pf-m-link.pf-m-inline {
8209
8211
  --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-link--m-inline--FontSize);
8212
+ --pf-v5-c-button--LineHeight: var(--pf-v5-c-button--m-link--m-inline--LineHeight);
8213
+ --pf-v5-c-button--FontWeight: var(--pf-v5-c-button--m-link--m-inline--FontWeight);
8214
+ --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-link--m-inline--PaddingTop);
8215
+ --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-link--m-inline--PaddingRight);
8216
+ --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-link--m-inline--PaddingBottom);
8217
+ --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-link--m-inline--PaddingLeft);
8218
+ --pf-v5-c-button--BackgroundColor: transparent;
8210
8219
  --pf-v5-c-button__progress--Left: var(--pf-v5-c-button--m-link--m-inline__progress--Left);
8220
+ --pf-v5-c-button--hover--TextDecoration: var(--pf-v5-c-button--m-link--m-inline--hover--TextDecoration);
8221
+ --pf-v5-c-button--hover--BackgroundColor: transparent;
8222
+ --pf-v5-c-button--m-clicked--BackgroundColor: transparent;
8223
+ --pf-v5-c-button--disabled--BackgroundColor: transparent;
8224
+ --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-link--m-inline--disabled--Color);
8225
+ --pf-v5-c-button--disabled__icon--Color: var(--pf-v5-c-button--m-link--m-inline--disabled__icon--Color);
8211
8226
  display: inline;
8212
- padding-block-start: var(--pf-v5-c-button--m-link--m-inline--PaddingTop);
8213
- padding-block-end: var(--pf-v5-c-button--m-link--m-inline--PaddingBottom);
8214
- padding-inline-start: var(--pf-v5-c-button--m-link--m-inline--PaddingLeft);
8215
- padding-inline-end: var(--pf-v5-c-button--m-link--m-inline--PaddingRight);
8216
8227
  text-align: start;
8217
8228
  white-space: normal;
8218
8229
  cursor: pointer;
8230
+ outline-offset: 0.125rem;
8219
8231
  }
8220
- .pf-v5-c-button.pf-m-link.pf-m-inline:hover {
8221
- --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--m-inline--hover--Color);
8232
+ .pf-v5-c-button.pf-m-link:where(.pf-m-danger) {
8233
+ --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--Color);
8234
+ --pf-v5-c-button--m-danger__icon--Color: var(--pf-v5-c-button--m-link--m-danger__icon--Color);
8235
+ --pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-c-button--m-link--m-danger--hover--Color);
8236
+ --pf-v5-c-button--m-danger--hover__icon--Color: var(--pf-v5-c-button--m-link--m-danger--hover__icon--Color);
8237
+ --pf-v5-c-button--m-danger--m-clicked--Color: var(--pf-v5-c-button--m-link--m-danger--m-clicked--Color);
8238
+ --pf-v5-c-button--m-danger--m-clicked__icon--Color: var(--pf-v5-c-button--m-link--m-danger--m-clicked__icon--Color);
8239
+ --pf-v5-c-button--m-danger--BackgroundColor: transparent;
8240
+ --pf-v5-c-button--m-danger--hover--BackgroundColor: transparent;
8241
+ --pf-v5-c-button--m-danger--m-clicked--BackgroundColor: transparent;
8222
8242
  }
8223
8243
  .pf-v5-c-button.pf-m-link.pf-m-display-lg {
8224
8244
  --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-link--m-display-lg--FontSize);
8225
8245
  }
8226
- .pf-v5-c-button.pf-m-danger {
8227
- color: var(--pf-v5-c-button--m-danger--Color);
8228
- background-color: var(--pf-v5-c-button--m-danger--BackgroundColor);
8229
- }
8230
- .pf-v5-c-button.pf-m-danger:hover {
8231
- --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-danger--hover--Color);
8232
- --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-danger--hover--BackgroundColor);
8233
- }
8234
- .pf-v5-c-button.pf-m-danger:focus {
8235
- --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-danger--focus--Color);
8236
- --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-danger--focus--BackgroundColor);
8237
- }
8238
- .pf-v5-c-button.pf-m-danger:active, .pf-v5-c-button.pf-m-danger.pf-m-active {
8239
- --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-danger--active--Color);
8240
- --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-danger--active--BackgroundColor);
8241
- }
8242
- .pf-v5-c-button.pf-m-danger.pf-m-secondary {
8243
- --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--Color);
8244
- --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-secondary--m-danger--BackgroundColor);
8245
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--after--BorderColor);
8246
- }
8247
- .pf-v5-c-button.pf-m-danger.pf-m-secondary:hover {
8248
- --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--hover--Color);
8249
- --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-v5-c-button--m-secondary--m-danger--hover--BackgroundColor);
8250
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--hover--after--BorderColor);
8251
- }
8252
- .pf-v5-c-button.pf-m-danger.pf-m-secondary:focus {
8253
- --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--focus--Color);
8254
- --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-v5-c-button--m-secondary--m-danger--focus--BackgroundColor);
8255
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--focus--after--BorderColor);
8256
- }
8257
- .pf-v5-c-button.pf-m-danger.pf-m-secondary:active, .pf-v5-c-button.pf-m-danger.pf-m-secondary.pf-m-active {
8258
- --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--active--Color);
8259
- --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-v5-c-button--m-secondary--m-danger--active--BackgroundColor);
8260
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--active--after--BorderColor);
8261
- }
8262
- .pf-v5-c-button.pf-m-danger.pf-m-link {
8263
- --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--Color);
8264
- --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--BackgroundColor);
8265
- }
8266
- .pf-v5-c-button.pf-m-danger.pf-m-link:hover {
8267
- --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--hover--Color);
8268
- --pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--hover--BackgroundColor);
8269
- }
8270
- .pf-v5-c-button.pf-m-danger.pf-m-link:focus {
8271
- --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--focus--Color);
8272
- --pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--focus--BackgroundColor);
8273
- }
8274
- .pf-v5-c-button.pf-m-danger.pf-m-link:active, .pf-v5-c-button.pf-m-danger.pf-m-link.pf-m-active {
8275
- --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--active--Color);
8276
- --pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--active--BackgroundColor);
8277
- }
8278
8246
  .pf-v5-c-button.pf-m-warning {
8279
- color: var(--pf-v5-c-button--m-warning--Color);
8280
- background-color: var(--pf-v5-c-button--m-warning--BackgroundColor);
8281
- }
8282
- .pf-v5-c-button.pf-m-warning:hover {
8283
- --pf-v5-c-button--m-warning--Color: var(--pf-v5-c-button--m-warning--hover--Color);
8284
- --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-v5-c-button--m-warning--hover--BackgroundColor);
8247
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-warning--Color);
8248
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-warning--BackgroundColor);
8249
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-warning__icon--Color);
8250
+ --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-warning--hover--Color);
8251
+ --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-warning--hover--BackgroundColor);
8252
+ --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-warning--hover__icon--Color);
8253
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-warning--m-clicked--Color);
8254
+ --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-warning--m-clicked--BackgroundColor);
8255
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-warning--m-clicked__icon--Color);
8285
8256
  }
8286
- .pf-v5-c-button.pf-m-warning:focus {
8287
- --pf-v5-c-button--m-warning--Color: var(--pf-v5-c-button--m-warning--focus--Color);
8288
- --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-v5-c-button--m-warning--focus--BackgroundColor);
8289
- }
8290
- .pf-v5-c-button.pf-m-warning:active, .pf-v5-c-button.pf-m-warning.pf-m-active {
8291
- --pf-v5-c-button--m-warning--Color: var(--pf-v5-c-button--m-warning--active--Color);
8292
- --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-v5-c-button--m-warning--active--BackgroundColor);
8257
+ .pf-v5-c-button.pf-m-danger {
8258
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-danger--Color);
8259
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-danger--BackgroundColor);
8260
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-danger__icon--Color);
8261
+ --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-danger--hover--Color);
8262
+ --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-danger--hover--BackgroundColor);
8263
+ --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-danger--hover__icon--Color);
8264
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-danger--m-clicked--Color);
8265
+ --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-danger--m-clicked--BackgroundColor);
8266
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-danger--m-clicked__icon--Color);
8293
8267
  }
8294
8268
  .pf-v5-c-button.pf-m-control {
8295
8269
  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-control--BorderRadius);
8296
- --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-control--disabled--BackgroundColor);
8297
- --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--m-control--after--BorderWidth);
8298
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-control--after--BorderTopColor) var(--pf-v5-c-button--m-control--after--BorderRightColor) var(--pf-v5-c-button--m-control--after--BorderBottomColor) var(--pf-v5-c-button--m-control--after--BorderLeftColor);
8299
- color: var(--pf-v5-c-button--m-control--Color);
8300
- background-color: var(--pf-v5-c-button--m-control--BackgroundColor);
8301
- }
8302
- .pf-v5-c-button.pf-m-control::after {
8303
- border-radius: initial;
8304
- }
8305
- .pf-v5-c-button.pf-m-control:hover {
8306
- --pf-v5-c-button--m-control--Color: var(--pf-v5-c-button--m-control--hover--Color);
8307
- --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-c-button--m-control--hover--BackgroundColor);
8308
- --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-c-button--m-control--hover--after--BorderBottomColor);
8309
- }
8310
- .pf-v5-c-button.pf-m-control:hover::after {
8311
- border-block-end-width: var(--pf-v5-c-button--m-control--hover--after--BorderBottomWidth);
8312
- }
8313
- .pf-v5-c-button.pf-m-control:active, .pf-v5-c-button.pf-m-control.pf-m-active {
8314
- --pf-v5-c-button--m-control--Color: var(--pf-v5-c-button--m-control--active--Color);
8315
- --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-c-button--m-control--active--BackgroundColor);
8316
- --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-c-button--m-control--active--after--BorderBottomColor);
8317
- }
8318
- .pf-v5-c-button.pf-m-control:active::after, .pf-v5-c-button.pf-m-control.pf-m-active::after {
8319
- border-block-end-width: var(--pf-v5-c-button--m-control--active--after--BorderBottomWidth);
8320
- }
8321
- .pf-v5-c-button.pf-m-control:focus {
8322
- --pf-v5-c-button--m-control--Color: var(--pf-v5-c-button--m-control--focus--Color);
8323
- --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-c-button--m-control--focus--BackgroundColor);
8324
- --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-c-button--m-control--focus--after--BorderBottomColor);
8325
- }
8326
- .pf-v5-c-button.pf-m-control:focus::after {
8327
- border-block-end-width: var(--pf-v5-c-button--m-control--focus--after--BorderBottomWidth);
8328
- }
8329
- .pf-v5-c-button.pf-m-control.pf-m-expanded {
8330
- --pf-v5-c-button--m-control--Color: var(--pf-v5-c-button--m-control--m-expanded--Color);
8331
- --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-c-button--m-control--m-expanded--BackgroundColor);
8332
- --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor);
8333
- }
8334
- .pf-v5-c-button.pf-m-control.pf-m-expanded::after {
8335
- border-block-end-width: var(--pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth);
8270
+ --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-control--PaddingLeft);
8271
+ --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-control--PaddingRight);
8272
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-control--Color);
8273
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-control--BackgroundColor);
8274
+ --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--m-control--BorderColor);
8275
+ --pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--m-control--BorderWidth);
8276
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-control__icon--Color);
8277
+ --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-control--hover--Color);
8278
+ --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-control--hover--BackgroundColor);
8279
+ --pf-v5-c-button--hover--BorderColor: var(--pf-v5-c-button--m-control--hover--BorderColor);
8280
+ --pf-v5-c-button--hover--BorderWidth: var(--pf-v5-c-button--m-control--hover--BorderWidth);
8281
+ --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-control--hover__icon--Color);
8282
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-control--m-clicked--Color);
8283
+ --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-control--m-clicked--BackgroundColor);
8284
+ --pf-v5-c-button--m-clicked--BorderColor: var(--pf-v5-c-button--m-control--m-clicked--BorderColor);
8285
+ --pf-v5-c-button--m-clicked--BorderWidth: var(--pf-v5-c-button--m-control--m-clicked--BorderWidth);
8286
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-control--m-clicked__icon--Color);
8287
+ }
8288
+ .pf-v5-c-button.pf-m-stateful {
8289
+ --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-stateful--BorderRadius);
8290
+ --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-stateful--PaddingLeft);
8291
+ --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-stateful--PaddingRight);
8292
+ }
8293
+ .pf-v5-c-button.pf-m-read {
8294
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-read--BackgroundColor);
8295
+ --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--m-read--BorderColor);
8296
+ --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-read--hover--BackgroundColor);
8297
+ --pf-v5-c-button--hover--BorderColor: var(--pf-v5-c-button--m-read--hover--BorderColor);
8298
+ --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-read--m-clicked--BackgroundColor);
8299
+ --pf-v5-c-button--m-clicked--BorderColor: var(--pf-v5-c-button--m-read--m-clicked--BorderColor);
8300
+ }
8301
+ .pf-v5-c-button.pf-m-unread {
8302
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-unread--Color);
8303
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-unread--BackgroundColor);
8304
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-unread__icon--Color);
8305
+ --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-unread--hover--Color);
8306
+ --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-unread--hover--BackgroundColor);
8307
+ --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-unread--hover__icon--Color);
8308
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-unread--m-clicked--Color);
8309
+ --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-unread--m-clicked--BackgroundColor);
8310
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-unread--m-clicked__icon--Color);
8311
+ }
8312
+ .pf-v5-c-button.pf-m-attention {
8313
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-attention--Color);
8314
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-attention--BackgroundColor);
8315
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-attention__icon--Color);
8316
+ --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-attention--hover--Color);
8317
+ --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-attention--hover--BackgroundColor);
8318
+ --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-attention--hover__icon--Color);
8319
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-attention--m-clicked--Color);
8320
+ --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-attention--m-clicked--BackgroundColor);
8321
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-attention--m-clicked__icon--Color);
8336
8322
  }
8337
8323
  .pf-v5-c-button.pf-m-plain {
8338
- --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-plain--disabled--Color);
8339
- --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-plain--disabled--BackgroundColor);
8340
8324
  --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-plain--PaddingTop);
8341
8325
  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-plain--PaddingRight);
8342
8326
  --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-plain--PaddingBottom);
8343
8327
  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-plain--PaddingLeft);
8328
+ --pf-v5-c-button--m-small--PaddingTop: var(--pf-v5-c-button--m-plain--m-small--PaddingTop);
8329
+ --pf-v5-c-button--m-small--PaddingRight: var(--pf-v5-c-button--m-plain--m-small--PaddingRight);
8330
+ --pf-v5-c-button--m-small--PaddingBottom: var(--pf-v5-c-button--m-plain--m-small--PaddingBottom);
8331
+ --pf-v5-c-button--m-small--PaddingLeft: var(--pf-v5-c-button--m-plain--m-small--PaddingLeft);
8344
8332
  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-plain--BorderRadius);
8345
- color: var(--pf-v5-c-button--m-plain--Color);
8346
- background-color: var(--pf-v5-c-button--m-plain--BackgroundColor);
8333
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-plain--Color);
8334
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-plain--BackgroundColor);
8335
+ --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-plain--hover--Color);
8336
+ --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
8337
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-plain--m-clicked--Color);
8338
+ --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-plain--m-clicked--BackgroundColor);
8339
+ --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-plain--disabled--Color);
8340
+ --pf-v5-c-button__progress--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
8341
+ min-width: var(--pf-v5-c-button--m-plain--MinWidth);
8342
+ mix-blend-mode: var(--pf-v5-c-button--m-plain--MixBlendMode);
8347
8343
  }
8348
8344
  .pf-v5-c-button.pf-m-plain.pf-m-no-padding {
8349
8345
  padding: 0;
8350
8346
  }
8351
- .pf-v5-c-button.pf-m-plain:hover, .pf-v5-c-button.pf-m-plain:focus {
8352
- --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
8353
- mix-blend-mode: var(--pf-t--global--background--color--action--plain--hover--blend);
8347
+ .pf-v5-c-button.pf-m-block {
8348
+ display: block;
8349
+ width: 100%;
8354
8350
  }
8355
- .pf-v5-c-button.pf-m-plain:active, .pf-v5-c-button.pf-m-plain.pf-m-active {
8356
- --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-plain--active--Color);
8357
- --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--active--BackgroundColor);
8351
+ .pf-v5-c-button.pf-m-small {
8352
+ --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-small--PaddingTop);
8353
+ --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-small--PaddingRight);
8354
+ --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-small--PaddingBottom);
8355
+ --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-small--PaddingLeft);
8358
8356
  }
8359
- .pf-v5-c-button.pf-m-plain:focus {
8360
- --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-plain--focus--Color);
8361
- --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--focus--BackgroundColor);
8357
+ .pf-v5-c-button.pf-m-display-lg {
8358
+ --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-display-lg--PaddingTop);
8359
+ --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-display-lg--PaddingRight);
8360
+ --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-display-lg--PaddingBottom);
8361
+ --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-display-lg--PaddingLeft);
8362
+ --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-display-lg--FontSize);
8363
+ }
8364
+ .pf-v5-c-button:hover, .pf-v5-c-button:focus {
8365
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--hover--Color);
8366
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--hover--BackgroundColor);
8367
+ --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--hover--BorderColor);
8368
+ --pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--hover--BorderWidth);
8369
+ --pf-v5-c-button--TextDecoration: var(--pf-v5-c-button--hover--TextDecoration);
8370
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--hover__icon--Color);
8371
+ }
8372
+ .pf-v5-c-button.pf-m-clicked {
8373
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-clicked--Color);
8374
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-clicked--BackgroundColor);
8375
+ --pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--m-clicked--BorderWidth);
8376
+ --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--m-clicked--BorderColor);
8377
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-clicked__icon--Color);
8362
8378
  }
8363
8379
  .pf-v5-c-button:disabled, .pf-v5-c-button.pf-m-disabled {
8364
8380
  pointer-events: none;
8365
8381
  }
8366
8382
  .pf-v5-c-button:disabled, .pf-v5-c-button.pf-m-disabled, .pf-v5-c-button.pf-m-aria-disabled {
8383
+ --pf-v5-c-badge--m-unread--Color: var(--pf-v5-c-button--disabled__c-badge--Color);
8384
+ --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-c-button--disabled__c-badge--BackgroundColor);
8385
+ --pf-v5-c-button--m-primary__c-badge--BorderWidth: 0;
8367
8386
  color: var(--pf-v5-c-button--disabled--Color);
8368
8387
  background-color: var(--pf-v5-c-button--disabled--BackgroundColor);
8369
8388
  }
8370
8389
  .pf-v5-c-button:disabled::after, .pf-v5-c-button.pf-m-disabled::after, .pf-v5-c-button.pf-m-aria-disabled::after {
8371
- border-color: var(--pf-v5-c-button--disabled--after--BorderColor);
8390
+ border-color: transparent;
8372
8391
  }
8373
- .pf-v5-c-button:disabled .pf-v5-c-badge, .pf-v5-c-button.pf-m-disabled .pf-v5-c-badge, .pf-v5-c-button.pf-m-aria-disabled .pf-v5-c-badge {
8374
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-c-button--disabled__c-badge--Color);
8375
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-c-button--disabled__c-badge--BackgroundColor);
8376
- --pf-v5-c-button--m-primary__c-badge--BorderWidth: 0;
8392
+ .pf-v5-c-button:disabled .pf-v5-c-button__icon, .pf-v5-c-button.pf-m-disabled .pf-v5-c-button__icon, .pf-v5-c-button.pf-m-aria-disabled .pf-v5-c-button__icon {
8393
+ color: var(--pf-v5-c-button--disabled__icon--Color);
8377
8394
  }
8378
8395
  .pf-v5-c-button.pf-m-aria-disabled {
8379
- --pf-v5-c-button--after--BorderWidth: 0;
8380
8396
  --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: none;
8381
8397
  cursor: default;
8382
8398
  }
@@ -8393,7 +8409,6 @@ button.pf-v5-c-breadcrumb__link {
8393
8409
  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-in-progress--PaddingLeft);
8394
8410
  }
8395
8411
  .pf-v5-c-button.pf-m-in-progress.pf-m-plain {
8396
- --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
8397
8412
  --pf-v5-c-button__progress--Left: var(--pf-v5-c-button--m-in-progress--m-plain__progress--Left);
8398
8413
  --pf-v5-c-button__progress--TranslateX: var(--pf-v5-c-button--m-in-progress--m-plain__progress--TranslateX);
8399
8414
  }
@@ -8401,6 +8416,9 @@ button.pf-v5-c-breadcrumb__link {
8401
8416
  opacity: 0;
8402
8417
  }
8403
8418
 
8419
+ .pf-v5-c-button__icon {
8420
+ color: var(--pf-v5-c-button__icon--Color);
8421
+ }
8404
8422
  .pf-v5-c-button__icon.pf-m-start {
8405
8423
  margin-inline-end: var(--pf-v5-c-button__icon--m-start--MarginRight);
8406
8424
  }
@@ -8413,6 +8431,7 @@ button.pf-v5-c-breadcrumb__link {
8413
8431
  inset-block-start: var(--pf-v5-c-button__progress--Top);
8414
8432
  inset-inline-start: var(--pf-v5-c-button__progress--Left);
8415
8433
  line-height: 1;
8434
+ color: var(--pf-v5-c-button__progress--Color);
8416
8435
  transform: translate(var(--pf-v5-c-button__progress--TranslateX), var(--pf-v5-c-button__progress--TranslateY));
8417
8436
  }
8418
8437
  .pf-v5-c-button__progress .pf-v5-c-spinner {
@@ -25233,6 +25252,7 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25233
25252
  margin-inline-start: var(--pf-v5-c-slider__main--actions--MarginLeft);
25234
25253
  }
25235
25254
 
25255
+ :root,
25236
25256
  .pf-v5-c-spinner {
25237
25257
  --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
25238
25258
  --pf-v5-c-spinner--Width: var(--pf-v5-c-spinner--diameter);
@@ -25243,6 +25263,9 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25243
25263
  --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
25244
25264
  --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
25245
25265
  --pf-v5-c-spinner--m-inline--diameter: 1em;
25266
+ }
25267
+
25268
+ .pf-v5-c-spinner {
25246
25269
  width: var(--pf-v5-c-spinner--Width);
25247
25270
  height: var(--pf-v5-c-spinner--Height);
25248
25271
  overflow: hidden;