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

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 +17 -34
  4. package/components/Spinner/spinner.scss +19 -47
  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 +383 -381
  9. package/patternfly-theme-dark-unversioned.css +383 -381
  10. package/patternfly.css +383 -381
  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-no-globals.css CHANGED
@@ -7786,159 +7786,193 @@ button.pf-v5-c-breadcrumb__link {
7786
7786
  display: none;
7787
7787
  }
7788
7788
 
7789
+ :root,
7789
7790
  .pf-v5-c-button {
7790
7791
  --pf-v5-c-button--PaddingTop: var(--pf-t--global--spacer--sm);
7791
7792
  --pf-v5-c-button--PaddingRight: var(--pf-t--global--spacer--lg);
7792
7793
  --pf-v5-c-button--PaddingBottom: var(--pf-t--global--spacer--sm);
7793
7794
  --pf-v5-c-button--PaddingLeft: var(--pf-t--global--spacer--lg);
7795
+ --pf-v5-c-button--Color: var(--pf-t--global--text--color--regular);
7794
7796
  --pf-v5-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
7795
7797
  --pf-v5-c-button--FontWeight: var(--pf-t--global--font--weight--body);
7796
7798
  --pf-v5-c-button--FontSize: var(--pf-t--global--font--size--body--default);
7797
7799
  --pf-v5-c-button--BackgroundColor: transparent;
7800
+ --pf-v5-c-button--BorderColor: transparent;
7801
+ --pf-v5-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
7798
7802
  --pf-v5-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
7799
- --pf-v5-c-button--after--BorderColor: transparent;
7800
- --pf-v5-c-button--after--BorderWidth: var(--pf-t--global--border--width--button--default);
7801
- --pf-v5-c-button--hover--after--BorderWidth: var(--pf-t--global--border--width--button--hover);
7802
- --pf-v5-c-button--focus--after--BorderWidth: var(--pf-t--global--border--width--button--active);
7803
- --pf-v5-c-button--active--after--BorderWidth: var(--pf-t--global--border--width--button--active);
7804
- --pf-v5-c-button--disabled--Color: var(--pf-t--global--text--color--disabled--default);
7805
- --pf-v5-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
7806
- --pf-v5-c-button--disabled--after--BorderColor: transparent;
7807
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
7803
+ --pf-v5-c-button--TextDecoration: none;
7804
+ --pf-v5-c-button--hover--BackgroundColor: transparent;
7805
+ --pf-v5-c-button--hover--BorderColor: transparent;
7806
+ --pf-v5-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
7807
+ --pf-v5-c-button--hover--TextDecoration: none;
7808
+ --pf-v5-c-button--m-clicked--BackgroundColor: transparent;
7809
+ --pf-v5-c-button--m-clicked--BorderColor: transparent;
7810
+ --pf-v5-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--button--active);
7808
7811
  --pf-v5-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
7809
- --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
7812
+ --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
7813
+ --pf-v5-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
7810
7814
  --pf-v5-c-button--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
7811
- --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--pf-t--global--color--brand--active);
7812
- --pf-v5-c-button--m-primary--focus--Color: var(--pf-t--global--text--color--on-brand--active);
7813
- --pf-v5-c-button--m-primary--active--BackgroundColor: var(--pf-t--global--color--brand--active);
7814
- --pf-v5-c-button--m-primary--active--Color: var(--pf-t--global--text--color--on-brand--active);
7815
- --pf-v5-c-button--m-secondary--BackgroundColor: transparent;
7816
- --pf-v5-c-button--m-secondary--after--BorderColor: var(--pf-t--global--border--color--brand--default);
7815
+ --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
7816
+ --pf-v5-c-button--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
7817
+ --pf-v5-c-button--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
7818
+ --pf-v5-c-button--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
7819
+ --pf-v5-c-button--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
7817
7820
  --pf-v5-c-button--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
7818
- --pf-v5-c-button--m-secondary--hover--BackgroundColor: transparent;
7819
- --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--pf-t--global--border--color--brand--hover);
7821
+ --pf-v5-c-button--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
7822
+ --pf-v5-c-button--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--default);
7820
7823
  --pf-v5-c-button--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
7821
- --pf-v5-c-button--m-secondary--focus--BackgroundColor: transparent;
7822
- --pf-v5-c-button--m-secondary--focus--after--BorderColor: var(--pf-t--global--border--color--brand--active);
7823
- --pf-v5-c-button--m-secondary--focus--Color: var(--pf-t--global--text--color--brand--active);
7824
- --pf-v5-c-button--m-secondary--active--BackgroundColor: transparent;
7825
- --pf-v5-c-button--m-secondary--active--after--BorderColor: var(--pf-t--global--border--color--brand--active);
7826
- --pf-v5-c-button--m-secondary--active--Color: var(--pf-t--global--text--color--brand--active);
7827
- --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: transparent;
7824
+ --pf-v5-c-button--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
7825
+ --pf-v5-c-button--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
7826
+ --pf-v5-c-button--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
7827
+ --pf-v5-c-button--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--clicked);
7828
+ --pf-v5-c-button--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
7828
7829
  --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
7829
- --pf-v5-c-button--m-secondary--m-danger--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
7830
- --pf-v5-c-button--m-secondary--m-danger--hover--BackgroundColor: transparent;
7830
+ --pf-v5-c-button--m-secondary--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
7831
+ --pf-v5-c-button--m-secondary--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
7831
7832
  --pf-v5-c-button--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
7832
- --pf-v5-c-button--m-secondary--m-danger--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
7833
- --pf-v5-c-button--m-secondary--m-danger--focus--BackgroundColor: transparent;
7834
- --pf-v5-c-button--m-secondary--m-danger--focus--Color: var(--pf-t--global--text--color--status--danger--active);
7835
- --pf-v5-c-button--m-secondary--m-danger--focus--after--BorderColor: var(--pf-t--global--border--color--status--danger--active);
7836
- --pf-v5-c-button--m-secondary--m-danger--active--BackgroundColor: transparent;
7837
- --pf-v5-c-button--m-secondary--m-danger--active--Color: var(--pf-t--global--text--color--status--danger--active);
7838
- --pf-v5-c-button--m-secondary--m-danger--active--after--BorderColor: var(--pf-t--global--border--color--status--danger--active);
7839
- --pf-v5-c-button--m-tertiary--BackgroundColor: transparent;
7840
- --pf-v5-c-button--m-tertiary--after--BorderColor: var(--pf-t--global--border--color--default);
7841
- --pf-v5-c-button--m-tertiary--Color: var(--pf-t--global--text--color--regular);
7842
- --pf-v5-c-button--m-tertiary--hover--BackgroundColor: transparent;
7843
- --pf-v5-c-button--m-tertiary--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
7844
- --pf-v5-c-button--m-tertiary--hover--Color: var(--pf-t--global--text--color--regular);
7845
- --pf-v5-c-button--m-tertiary--focus--BackgroundColor: transparent;
7846
- --pf-v5-c-button--m-tertiary--focus--after--BorderColor: var(--pf-t--global--border--color--active);
7847
- --pf-v5-c-button--m-tertiary--focus--Color: var(--pf-t--global--text--color--regular);
7848
- --pf-v5-c-button--m-tertiary--active--BackgroundColor: transparent;
7849
- --pf-v5-c-button--m-tertiary--active--after--BorderColor: var(--pf-t--global--border--color--active);
7850
- --pf-v5-c-button--m-tertiary--active--Color: var(--pf-t--global--text--color--regular);
7851
- --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
7852
- --pf-v5-c-button--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
7853
- --pf-v5-c-button--m-warning--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
7854
- --pf-v5-c-button--m-warning--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
7855
- --pf-v5-c-button--m-warning--focus--BackgroundColor: var(--pf-t--global--color--status--warning--active);
7856
- --pf-v5-c-button--m-warning--focus--Color: var(--pf-t--global--text--color--status--on-warning--hover);
7857
- --pf-v5-c-button--m-warning--active--BackgroundColor: var(--pf-t--global--color--status--warning--active);
7858
- --pf-v5-c-button--m-warning--active--Color: var(--pf-t--global--text--color--status--on-warning--hover);
7859
- --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
7860
- --pf-v5-c-button--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
7861
- --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
7862
- --pf-v5-c-button--m-danger--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
7863
- --pf-v5-c-button--m-danger--focus--BackgroundColor: var(--pf-t--global--color--status--danger--active);
7864
- --pf-v5-c-button--m-danger--focus--Color: var(--pf-t--global--text--color--status--on-danger--hover);
7865
- --pf-v5-c-button--m-danger--active--BackgroundColor: var(--pf-t--global--color--status--danger--active);
7866
- --pf-v5-c-button--m-danger--active--Color: var(--pf-t--global--text--color--status--on-danger--hover);
7867
- --pf-v5-c-button--m-link--BackgroundColor: transparent;
7868
- --pf-v5-c-button--m-link--Color: var(--pf-t--global--text--color--link--default);
7869
- --pf-v5-c-button--m-link--hover--BackgroundColor: transparent;
7870
- --pf-v5-c-button--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
7871
- --pf-v5-c-button--m-link--focus--BackgroundColor: transparent;
7872
- --pf-v5-c-button--m-link--focus--Color: var(--pf-t--global--text--color--link--hover);
7873
- --pf-v5-c-button--m-link--active--BackgroundColor: transparent;
7874
- --pf-v5-c-button--m-link--active--Color: var(--pf-t--global--text--color--link--hover);
7875
- --pf-v5-c-button--m-link--disabled--BackgroundColor: transparent;
7876
- --pf-v5-c-button--m-link--disabled--Color: var(--pf-t--global--text--color--disabled--light);
7877
- --pf-v5-c-button--m-link--not--m-inline--TextDecoration: none;
7878
- --pf-v5-c-button--m-link--m-inline--FontSize: inherit;
7833
+ --pf-v5-c-button--m-secondary--m-danger--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
7834
+ --pf-v5-c-button--m-secondary--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
7835
+ --pf-v5-c-button--m-secondary--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
7836
+ --pf-v5-c-button--m-secondary--m-danger--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked);
7837
+ --pf-v5-c-button--m-secondary--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked);
7838
+ --pf-v5-c-button--m-tertiary--Color: var(--pf-t--global--text--color--brand--default);
7839
+ --pf-v5-c-button--m-tertiary--BorderColor: var(--pf-t--global--border--color--default);
7840
+ --pf-v5-c-button--m-tertiary__icon--Color: var(--pf-t--global--icon--color--brand--default);
7841
+ --pf-v5-c-button--m-tertiary--hover--Color: var(--pf-t--global--text--color--brand--hover);
7842
+ --pf-v5-c-button--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--hover);
7843
+ --pf-v5-c-button--m-tertiary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
7844
+ --pf-v5-c-button--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
7845
+ --pf-v5-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
7846
+ --pf-v5-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
7847
+ --pf-v5-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
7848
+ --pf-v5-c-button--m-link--PaddingRight: var(--pf-t--global--spacer--md);
7849
+ --pf-v5-c-button--m-link--PaddingLeft: var(--pf-t--global--spacer--md);
7850
+ --pf-v5-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
7851
+ --pf-v5-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
7852
+ --pf-v5-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
7853
+ --pf-v5-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
7854
+ --pf-v5-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
7855
+ --pf-v5-c-button--m-link--hover__icon--Color: var(--pf-t--global--text--color--brand--hover);
7856
+ --pf-v5-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
7857
+ --pf-v5-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
7858
+ --pf-v5-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
7859
+ --pf-v5-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
7860
+ --pf-v5-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
7861
+ --pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
7862
+ --pf-v5-c-button--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
7863
+ --pf-v5-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
7864
+ --pf-v5-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
7865
+ --pf-v5-c-button--m-link--m-inline--FontSize: initial;
7866
+ --pf-v5-c-button--m-link--m-inline--LineHeight: initial;
7867
+ --pf-v5-c-button--m-link--m-inline--FontWeight: initial;
7879
7868
  --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
7880
- --pf-v5-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--link--hover);
7881
7869
  --pf-v5-c-button--m-link--m-inline--PaddingTop: 0;
7882
7870
  --pf-v5-c-button--m-link--m-inline--PaddingRight: 0;
7883
7871
  --pf-v5-c-button--m-link--m-inline--PaddingBottom: 0;
7884
7872
  --pf-v5-c-button--m-link--m-inline--PaddingLeft: 0;
7885
7873
  --pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
7886
7874
  --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));
7887
- --pf-v5-c-button--m-link--m-danger--BackgroundColor: transparent;
7888
- --pf-v5-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
7889
- --pf-v5-c-button--m-link--m-danger--hover--BackgroundColor: transparent;
7890
- --pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
7891
- --pf-v5-c-button--m-link--m-danger--focus--BackgroundColor: transparent;
7892
- --pf-v5-c-button--m-link--m-danger--focus--Color: var(--pf-t--global--text--color--status--danger--active);
7893
- --pf-v5-c-button--m-link--m-danger--active--BackgroundColor: transparent;
7894
- --pf-v5-c-button--m-link--m-danger--active--Color: var(--pf-t--global--text--color--status--danger--active);
7895
- --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
7875
+ --pf-v5-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
7876
+ --pf-v5-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
7896
7877
  --pf-v5-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
7897
7878
  --pf-v5-c-button--m-plain--PaddingTop: var(--pf-t--global--spacer--sm);
7898
7879
  --pf-v5-c-button--m-plain--PaddingRight: var(--pf-t--global--spacer--sm);
7899
7880
  --pf-v5-c-button--m-plain--PaddingBottom: var(--pf-t--global--spacer--sm);
7900
7881
  --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
7882
+ --pf-v5-c-button--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
7883
+ --pf-v5-c-button--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
7884
+ --pf-v5-c-button--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
7885
+ --pf-v5-c-button--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
7901
7886
  --pf-v5-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
7887
+ --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
7888
+ --pf-v5-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
7902
7889
  --pf-v5-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
7903
- --pf-v5-c-button--m-plain--hover--Color: var(--pf-t--global--text--color--regular);
7904
- --pf-v5-c-button--m-plain--focus--BackgroundColor: transparent;
7905
- --pf-v5-c-button--m-plain--focus--Color: var(--pf-t--global--text--color--regular);
7906
- --pf-v5-c-button--m-plain--active--BackgroundColor: transparent;
7907
- --pf-v5-c-button--m-plain--active--Color: var(--pf-t--global--text--color--regular);
7908
- --pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
7909
- --pf-v5-c-button--m-plain--disabled--BackgroundColor: transparent;
7910
- --pf-v5-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
7911
- --pf-v5-c-button--m-control--Color: var(--pf-t--global--text--color--subtle);
7890
+ --pf-v5-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
7891
+ --pf-v5-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
7892
+ --pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
7893
+ --pf-v5-c-button__progress--Color: var(--pf-v5-c-button__icon--Color);
7894
+ --pf-v5-c-button--m-plain--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
7895
+ --pf-v5-c-button--m-plain--MinWidth: calc(1em * var(--pf-v5-c-button--LineHeight) + var(--pf-v5-c-button--m-plain--PaddingTop) + var(--pf-v5-c-button--m-plain--PaddingBottom));
7912
7896
  --pf-v5-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
7913
- --pf-v5-c-button--m-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
7914
- --pf-v5-c-button--m-control--after--BorderTopColor: var(--pf-t--global--border--color--default);
7915
- --pf-v5-c-button--m-control--after--BorderRightColor: var(--pf-t--global--border--color--default);
7916
- --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-t--global--border--color--default);
7917
- --pf-v5-c-button--m-control--after--BorderLeftColor: var(--pf-t--global--border--color--default);
7918
- --pf-v5-c-button--m-control--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
7919
- --pf-v5-c-button--m-control--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
7897
+ --pf-v5-c-button--m-control--PaddingLeft: var(--pf-t--global--spacer--md);
7898
+ --pf-v5-c-button--m-control--PaddingRight: var(--pf-t--global--spacer--md);
7899
+ --pf-v5-c-button--m-control--Color: var(--pf-t--global--text--color--regular);
7900
+ --pf-v5-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
7901
+ --pf-v5-c-button--m-control--BorderColor: var(--pf-t--global--border--color--default);
7902
+ --pf-v5-c-button--m-control--BorderWidth: var(--pf-t--global--border--width--control--default);
7903
+ --pf-v5-c-button--m-control__icon--Color: var(--pf-t--global--icon--color--regular);
7920
7904
  --pf-v5-c-button--m-control--hover--Color: var(--pf-t--global--text--color--regular);
7921
- --pf-v5-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-t--global--border--width--control--hover);
7922
- --pf-v5-c-button--m-control--hover--after--BorderBottomColor: var(--pf-t--global--background--color--secondary--hover);
7923
- --pf-v5-c-button--m-control--active--BackgroundColor: var(--pf-t--global--background--color--primary--default);
7924
- --pf-v5-c-button--m-control--active--Color: var(--pf-t--global--text--color--regular);
7925
- --pf-v5-c-button--m-control--active--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
7926
- --pf-v5-c-button--m-control--active--after--BorderBottomColor: var(--pf-t--global--color--brand--active);
7927
- --pf-v5-c-button--m-control--focus--BackgroundColor: var(--pf-t--global--background--color--brand--active);
7928
- --pf-v5-c-button--m-control--focus--Color: var(--pf-t--global--text--color--regular);
7929
- --pf-v5-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
7930
- --pf-v5-c-button--m-control--focus--after--BorderBottomColor: var(--pf-t--global--color--brand--hover);
7931
- --pf-v5-c-button--m-control--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--default);
7932
- --pf-v5-c-button--m-control--m-expanded--Color: var(--pf-t--global--text--color--inverse);
7933
- --pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth: var(--pf-t--global--border--width--200);
7934
- --pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-t--global--color--brand--hover);
7935
- --pf-v5-c-button--m-small--FontSize: var(--pf-v5-global--FontSize--sm);
7905
+ --pf-v5-c-button--m-control--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
7906
+ --pf-v5-c-button--m-control--hover--BorderColor: var(--pf-t--global--border--color--hover);
7907
+ --pf-v5-c-button--m-control--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
7908
+ --pf-v5-c-button--m-control--hover__icon--Color: var(--pf-t--global--icon--color--regular);
7909
+ --pf-v5-c-button--m-control--m-clicked--Color: var(--pf-t--global--text--color--regular);
7910
+ --pf-v5-c-button--m-control--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
7911
+ --pf-v5-c-button--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
7912
+ --pf-v5-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--active);
7913
+ --pf-v5-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
7914
+ --pf-v5-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
7915
+ --pf-v5-c-button--m-stateful--PaddingLeft: var(--pf-t--global--spacer--md);
7916
+ --pf-v5-c-button--m-stateful--PaddingRight: var(--pf-t--global--spacer--md);
7917
+ --pf-v5-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
7918
+ --pf-v5-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
7919
+ --pf-v5-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--hover);
7920
+ --pf-v5-c-button--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
7921
+ --pf-v5-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--clicked);
7922
+ --pf-v5-c-button--m-read--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
7923
+ --pf-v5-c-button--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
7924
+ --pf-v5-c-button--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
7925
+ --pf-v5-c-button--m-unread__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
7926
+ --pf-v5-c-button--m-unread--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
7927
+ --pf-v5-c-button--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
7928
+ --pf-v5-c-button--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
7929
+ --pf-v5-c-button--m-unread--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
7930
+ --pf-v5-c-button--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
7931
+ --pf-v5-c-button--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
7932
+ --pf-v5-c-button--m-attention--Color: var(--pf-t--global--text--color--status--on-danger--default);
7933
+ --pf-v5-c-button--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
7934
+ --pf-v5-c-button--m-attention__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
7935
+ --pf-v5-c-button--m-attention--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
7936
+ --pf-v5-c-button--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
7937
+ --pf-v5-c-button--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
7938
+ --pf-v5-c-button--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
7939
+ --pf-v5-c-button--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
7940
+ --pf-v5-c-button--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
7941
+ --pf-v5-c-button--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
7942
+ --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
7943
+ --pf-v5-c-button--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
7944
+ --pf-v5-c-button--m-warning--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
7945
+ --pf-v5-c-button--m-warning--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
7946
+ --pf-v5-c-button--m-warning--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
7947
+ --pf-v5-c-button--m-warning--m-clicked--Color: var(--pf-t--global--text--color--status--on-warning--clicked);
7948
+ --pf-v5-c-button--m-warning--m-clicked--BackgroundColor: var(--pf-t--global--color--status--warning--clicked);
7949
+ --pf-v5-c-button--m-warning--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-warning--clicked);
7950
+ --pf-v5-c-button--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
7951
+ --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
7952
+ --pf-v5-c-button--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
7953
+ --pf-v5-c-button--m-danger--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
7954
+ --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
7955
+ --pf-v5-c-button--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
7956
+ --pf-v5-c-button--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
7957
+ --pf-v5-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
7958
+ --pf-v5-c-button--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
7936
7959
  --pf-v5-c-button--m-display-lg--PaddingTop: var(--pf-t--global--spacer--md);
7937
7960
  --pf-v5-c-button--m-display-lg--PaddingRight: var(--pf-t--global--spacer--xl);
7938
7961
  --pf-v5-c-button--m-display-lg--PaddingBottom: var(--pf-t--global--spacer--md);
7939
7962
  --pf-v5-c-button--m-display-lg--PaddingLeft: var(--pf-t--global--spacer--xl);
7940
7963
  --pf-v5-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
7941
7964
  --pf-v5-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
7965
+ --pf-v5-c-button--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
7966
+ --pf-v5-c-button--m-small--PaddingRight: var(--pf-t--global--spacer--md);
7967
+ --pf-v5-c-button--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
7968
+ --pf-v5-c-button--m-small--PaddingLeft: var(--pf-t--global--spacer--md);
7969
+ --pf-v5-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
7970
+ --pf-v5-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
7971
+ --pf-v5-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
7972
+ --pf-v5-c-button--disabled--BorderColor: transparent;
7973
+ --pf-v5-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
7974
+ --pf-v5-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
7975
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
7942
7976
  --pf-v5-c-button__icon--m-start--MarginRight: var(--pf-t--global--spacer--xs);
7943
7977
  --pf-v5-c-button__icon--m-end--MarginLeft: var(--pf-t--global--spacer--xs);
7944
7978
  --pf-v5-c-button__progress--width: calc(var(--pf-v5-global--icon--FontSize--md) + var(--pf-v5-global--spacer--sm));
@@ -7947,319 +7981,301 @@ button.pf-v5-c-breadcrumb__link {
7947
7981
  --pf-v5-c-button__progress--TranslateX: 0;
7948
7982
  --pf-v5-c-button__progress--Top: 50%;
7949
7983
  --pf-v5-c-button__progress--Left: var(--pf-t--global--spacer--md);
7984
+ --pf-v5-c-button__progress--Color: var(--pf-v5-c-button__icon--Color);
7950
7985
  --pf-v5-c-button--m-progress--TransitionProperty: padding;
7951
7986
  --pf-v5-c-button--m-progress--TransitionDuration: var(--pf-v5-global--TransitionDuration);
7952
7987
  --pf-v5-c-button--m-progress--PaddingRight: calc(var(--pf-t--global--spacer--md) + var(--pf-v5-c-button__progress--width) / 2);
7953
7988
  --pf-v5-c-button--m-progress--PaddingLeft: calc(var(--pf-t--global--spacer--md) + var(--pf-v5-c-button__progress--width) / 2);
7954
7989
  --pf-v5-c-button--m-in-progress--PaddingRight: var(--pf-t--global--spacer--md);
7955
7990
  --pf-v5-c-button--m-in-progress--PaddingLeft: calc(var(--pf-t--global--spacer--md) + var(--pf-v5-c-button__progress--width));
7956
- --pf-v5-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--color--brand--default);
7991
+ --pf-v5-c-button--m-in-progress--m-plain--Color: var(--pf-v5-c-spinner--Color);
7957
7992
  --pf-v5-c-button--m-in-progress--m-plain__progress--Left: 50%;
7958
7993
  --pf-v5-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
7959
7994
  --pf-v5-c-button__count--MarginLeft: var(--pf-v5-global--spacer--sm);
7960
7995
  --pf-v5-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled--default);
7961
7996
  --pf-v5-c-button--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
7962
7997
  --pf-v5-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
7963
- --pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--300);
7998
+ --pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
7999
+ }
8000
+
8001
+ .pf-v5-c-button {
7964
8002
  position: relative;
7965
8003
  display: inline-block;
7966
8004
  padding-block-start: var(--pf-v5-c-button--PaddingTop);
7967
8005
  padding-block-end: var(--pf-v5-c-button--PaddingBottom);
7968
8006
  padding-inline-start: var(--pf-v5-c-button--PaddingLeft);
7969
8007
  padding-inline-end: var(--pf-v5-c-button--PaddingRight);
7970
- font-size: var(--pf-v5-c-button--FontSize);
7971
- font-weight: var(--pf-v5-c-button--FontWeight);
7972
- line-height: var(--pf-v5-c-button--LineHeight);
8008
+ font-size: var(--pf-v5-c-button--FontSize, inherit);
8009
+ font-weight: var(--pf-v5-c-button--FontWeight, inherit);
8010
+ line-height: var(--pf-v5-c-button--LineHeight, inherit);
8011
+ color: var(--pf-v5-c-button--Color);
7973
8012
  text-align: center;
8013
+ text-decoration: var(--pf-v5-c-button--TextDecoration);
7974
8014
  white-space: nowrap;
7975
8015
  user-select: none;
8016
+ background-color: var(--pf-v5-c-button--BackgroundColor);
7976
8017
  border: 0;
7977
8018
  border-radius: var(--pf-v5-c-button--BorderRadius);
7978
8019
  }
7979
8020
  .pf-v5-c-button::after {
7980
8021
  position: absolute;
7981
- inset-block-start: 0;
7982
- inset-block-end: 0;
7983
- inset-inline-start: 0;
7984
- inset-inline-end: 0;
8022
+ inset: 0;
7985
8023
  pointer-events: none;
7986
8024
  content: "";
7987
- border: var(--pf-v5-c-button--after--BorderWidth) solid;
7988
- border-color: var(--pf-v5-c-button--after--BorderColor);
7989
- border-radius: var(--pf-v5-c-button--BorderRadius);
7990
- }
7991
- .pf-v5-c-button:hover {
7992
- --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--hover--after--BorderWidth);
7993
- text-decoration: none;
7994
- }
7995
- .pf-v5-c-button:focus {
7996
- --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--focus--after--BorderWidth);
7997
- }
7998
- .pf-v5-c-button:active, .pf-v5-c-button.pf-m-active {
7999
- --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--active--after--BorderWidth);
8000
- }
8001
- .pf-v5-c-button.pf-m-block {
8002
- display: block;
8003
- width: 100%;
8004
- }
8005
- .pf-v5-c-button.pf-m-small {
8006
- --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-small--FontSize);
8007
- }
8008
- .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 {
8009
- --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-display-lg--PaddingTop);
8010
- --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-display-lg--PaddingRight);
8011
- --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-display-lg--PaddingBottom);
8012
- --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-display-lg--PaddingLeft);
8013
- --pf-v5-c-button--FontWeight: var(--pf-v5-c-button--m-display-lg--FontWeight);
8025
+ border: var(--pf-v5-c-button--BorderWidth) solid;
8026
+ border-color: var(--pf-v5-c-button--BorderColor);
8027
+ border-radius: inherit;
8014
8028
  }
8015
8029
  .pf-v5-c-button.pf-m-primary {
8016
- color: var(--pf-v5-c-button--m-primary--Color);
8017
- background-color: var(--pf-v5-c-button--m-primary--BackgroundColor);
8018
- }
8019
- .pf-v5-c-button.pf-m-primary:hover {
8020
- --pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--hover--Color);
8021
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--hover--BackgroundColor);
8022
- }
8023
- .pf-v5-c-button.pf-m-primary:focus {
8024
- --pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--focus--Color);
8025
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--focus--BackgroundColor);
8030
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-primary--Color);
8031
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-primary--BackgroundColor);
8032
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-primary__icon--Color);
8033
+ --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-primary--hover--Color);
8034
+ --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-primary--hover--BackgroundColor);
8035
+ --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-primary--hover__icon--Color);
8036
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-primary--m-clicked--Color);
8037
+ --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-primary--m-clicked--BackgroundColor);
8038
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-primary--m-clicked__icon--Color);
8026
8039
  }
8027
8040
  .pf-v5-c-button.pf-m-primary .pf-v5-c-badge.pf-m-unread {
8028
8041
  border: var(--pf-v5-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-v5-c-button--m-primary__c-badge--BorderColor);
8029
8042
  }
8030
8043
  .pf-v5-c-button.pf-m-secondary {
8031
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--after--BorderColor);
8032
- color: var(--pf-v5-c-button--m-secondary--Color);
8033
- background-color: var(--pf-v5-c-button--m-secondary--BackgroundColor);
8034
- }
8035
- .pf-v5-c-button.pf-m-secondary:hover {
8036
- --pf-v5-c-button--m-secondary--Color: var(--pf-v5-c-button--m-secondary--hover--Color);
8037
- --pf-v5-c-button--m-secondary--BackgroundColor: var(--pf-v5-c-button--m-secondary--hover--BackgroundColor);
8038
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--hover--after--BorderColor);
8039
- }
8040
- .pf-v5-c-button.pf-m-secondary:focus {
8041
- --pf-v5-c-button--m-secondary--Color: var(--pf-v5-c-button--m-secondary--focus--Color);
8042
- --pf-v5-c-button--m-secondary--BackgroundColor: var(--pf-v5-c-button--m-secondary--focus--BackgroundColor);
8043
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--focus--after--BorderColor);
8044
- }
8045
- .pf-v5-c-button.pf-m-secondary.pf-m-active, .pf-v5-c-button.pf-m-secondary:active {
8046
- --pf-v5-c-button--m-secondary--Color: var(--pf-v5-c-button--m-secondary--active--Color);
8047
- --pf-v5-c-button--m-secondary--BackgroundColor: var(--pf-v5-c-button--m-secondary--active--BackgroundColor);
8048
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--active--after--BorderColor);
8044
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-secondary--Color);
8045
+ --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--m-secondary--BorderColor);
8046
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-secondary__icon--Color);
8047
+ --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-secondary--hover--Color);
8048
+ --pf-v5-c-button--hover--BorderColor: var(--pf-v5-c-button--m-secondary--hover--BorderColor);
8049
+ --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-secondary--hover__icon--Color);
8050
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-secondary--m-clicked--Color);
8051
+ --pf-v5-c-button--m-clicked--BorderColor: var(--pf-v5-c-button--m-secondary--m-clicked--BorderColor);
8052
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-secondary--m-clicked__icon--Color);
8053
+ --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--Color);
8054
+ --pf-v5-c-button--m-danger__icon--Color: var(--pf-v5-c-button--m-secondary--m-danger__icon--Color);
8055
+ --pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-c-button--m-secondary--m-danger--hover--Color);
8056
+ --pf-v5-c-button--m-danger--hover__icon--Color: var(--pf-v5-c-button--m-secondary--m-danger--hover__icon--Color);
8057
+ --pf-v5-c-button--m-danger--m-clicked--Color: var(--pf-v5-c-button--m-secondary--m-danger--m-clicked--Color);
8058
+ --pf-v5-c-button--m-danger--m-clicked__icon--Color: var(--pf-v5-c-button--m-secondary--m-danger--m-clicked__icon--Color);
8059
+ }
8060
+ .pf-v5-c-button.pf-m-secondary.pf-m-danger {
8061
+ --pf-v5-c-button--m-secondary--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--BorderColor);
8062
+ --pf-v5-c-button--m-secondary--hover--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--hover--BorderColor);
8063
+ --pf-v5-c-button--m-secondary--m-clicked--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--m-clicked--BorderColor);
8064
+ --pf-v5-c-button--m-danger--BackgroundColor: transparent;
8065
+ --pf-v5-c-button--m-danger--hover--BackgroundColor: transparent;
8066
+ --pf-v5-c-button--m-danger--m-clicked--BackgroundColor: transparent;
8049
8067
  }
8050
8068
  .pf-v5-c-button.pf-m-tertiary {
8051
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-tertiary--after--BorderColor);
8052
- color: var(--pf-v5-c-button--m-tertiary--Color);
8053
- background-color: var(--pf-v5-c-button--m-tertiary--BackgroundColor);
8054
- }
8055
- .pf-v5-c-button.pf-m-tertiary:hover {
8056
- --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-c-button--m-tertiary--hover--Color);
8057
- --pf-v5-c-button--m-tertiary--BackgroundColor: var(--pf-v5-c-button--m-tertiary--hover--BackgroundColor);
8058
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-tertiary--hover--after--BorderColor);
8059
- }
8060
- .pf-v5-c-button.pf-m-tertiary:focus {
8061
- --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-c-button--m-tertiary--focus--Color);
8062
- --pf-v5-c-button--m-tertiary--BackgroundColor: var(--pf-v5-c-button--m-tertiary--focus--BackgroundColor);
8063
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-tertiary--focus--after--BorderColor);
8064
- }
8065
- .pf-v5-c-button.pf-m-tertiary:active, .pf-v5-c-button.pf-m-tertiary.pf-m-active {
8066
- --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-c-button--m-tertiary--active--Color);
8067
- --pf-v5-c-button--m-tertiary--BackgroundColor: var(--pf-v5-c-button--m-tertiary--active--BackgroundColor);
8068
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-tertiary--active--after--BorderColor);
8069
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-tertiary--Color);
8070
+ --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--m-tertiary--BorderColor);
8071
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-tertiary__icon--Color);
8072
+ --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-tertiary--hover--Color);
8073
+ --pf-v5-c-button--hover--BorderColor: var(--pf-v5-c-button--m-tertiary--hover--BorderColor);
8074
+ --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-tertiary--hover__icon--Color);
8075
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-tertiary--m-clicked--Color);
8076
+ --pf-v5-c-button--m-clicked--BorderColor: var(--pf-v5-c-button--m-tertiary--m-clicked--BorderColor);
8077
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-tertiary--m-clicked__icon--Color);
8069
8078
  }
8070
8079
  .pf-v5-c-button.pf-m-link {
8071
- --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-link--disabled--BackgroundColor);
8072
- --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-link--disabled--Color);
8073
- color: var(--pf-v5-c-button--m-link--Color);
8074
- background-color: var(--pf-v5-c-button--m-link--BackgroundColor);
8075
- }
8076
- .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 {
8077
- text-decoration: var(--pf-t--global--link--text-decoration--hover);
8078
- }
8079
- .pf-v5-c-button.pf-m-link:not(.pf-m-inline):hover {
8080
- --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--hover--Color);
8081
- --pf-v5-c-button--m-link--BackgroundColor: var(--pf-v5-c-button--m-link--hover--BackgroundColor);
8082
- }
8083
- .pf-v5-c-button.pf-m-link:not(.pf-m-inline):focus {
8084
- --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--focus--Color);
8085
- --pf-v5-c-button--m-link--BackgroundColor: var(--pf-v5-c-button--m-link--focus--BackgroundColor);
8086
- }
8087
- .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 {
8088
- --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--active--Color);
8089
- --pf-v5-c-button--m-link--BackgroundColor: var(--pf-v5-c-button--m-link--active--BackgroundColor);
8080
+ --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-link--PaddingRight);
8081
+ --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-link--PaddingLeft);
8082
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-link--Color);
8083
+ --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-link--BorderRadius);
8084
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-link--BackgroundColor);
8085
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-link__icon--Color);
8086
+ --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-link--hover--Color);
8087
+ --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-link--hover--BackgroundColor);
8088
+ --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-link--hover__icon--Color);
8089
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-link--m-clicked--Color);
8090
+ --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-link--m-clicked--BackgroundColor);
8091
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-link--m-clicked__icon--Color);
8090
8092
  }
8091
8093
  .pf-v5-c-button.pf-m-link.pf-m-inline {
8092
8094
  --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-link--m-inline--FontSize);
8095
+ --pf-v5-c-button--LineHeight: var(--pf-v5-c-button--m-link--m-inline--LineHeight);
8096
+ --pf-v5-c-button--FontWeight: var(--pf-v5-c-button--m-link--m-inline--FontWeight);
8097
+ --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-link--m-inline--PaddingTop);
8098
+ --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-link--m-inline--PaddingRight);
8099
+ --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-link--m-inline--PaddingBottom);
8100
+ --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-link--m-inline--PaddingLeft);
8101
+ --pf-v5-c-button--BackgroundColor: transparent;
8093
8102
  --pf-v5-c-button__progress--Left: var(--pf-v5-c-button--m-link--m-inline__progress--Left);
8103
+ --pf-v5-c-button--hover--TextDecoration: var(--pf-v5-c-button--m-link--m-inline--hover--TextDecoration);
8104
+ --pf-v5-c-button--hover--BackgroundColor: transparent;
8105
+ --pf-v5-c-button--m-clicked--BackgroundColor: transparent;
8106
+ --pf-v5-c-button--disabled--BackgroundColor: transparent;
8107
+ --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-link--m-inline--disabled--Color);
8108
+ --pf-v5-c-button--disabled__icon--Color: var(--pf-v5-c-button--m-link--m-inline--disabled__icon--Color);
8094
8109
  display: inline;
8095
- padding-block-start: var(--pf-v5-c-button--m-link--m-inline--PaddingTop);
8096
- padding-block-end: var(--pf-v5-c-button--m-link--m-inline--PaddingBottom);
8097
- padding-inline-start: var(--pf-v5-c-button--m-link--m-inline--PaddingLeft);
8098
- padding-inline-end: var(--pf-v5-c-button--m-link--m-inline--PaddingRight);
8099
8110
  text-align: start;
8100
8111
  white-space: normal;
8101
8112
  cursor: pointer;
8113
+ outline-offset: 0.125rem;
8102
8114
  }
8103
- .pf-v5-c-button.pf-m-link.pf-m-inline:hover {
8104
- --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--m-inline--hover--Color);
8115
+ .pf-v5-c-button.pf-m-link:where(.pf-m-danger) {
8116
+ --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--Color);
8117
+ --pf-v5-c-button--m-danger__icon--Color: var(--pf-v5-c-button--m-link--m-danger__icon--Color);
8118
+ --pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-c-button--m-link--m-danger--hover--Color);
8119
+ --pf-v5-c-button--m-danger--hover__icon--Color: var(--pf-v5-c-button--m-link--m-danger--hover__icon--Color);
8120
+ --pf-v5-c-button--m-danger--m-clicked--Color: var(--pf-v5-c-button--m-link--m-danger--m-clicked--Color);
8121
+ --pf-v5-c-button--m-danger--m-clicked__icon--Color: var(--pf-v5-c-button--m-link--m-danger--m-clicked__icon--Color);
8122
+ --pf-v5-c-button--m-danger--BackgroundColor: transparent;
8123
+ --pf-v5-c-button--m-danger--hover--BackgroundColor: transparent;
8124
+ --pf-v5-c-button--m-danger--m-clicked--BackgroundColor: transparent;
8105
8125
  }
8106
8126
  .pf-v5-c-button.pf-m-link.pf-m-display-lg {
8107
8127
  --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-link--m-display-lg--FontSize);
8108
8128
  }
8109
- .pf-v5-c-button.pf-m-danger {
8110
- color: var(--pf-v5-c-button--m-danger--Color);
8111
- background-color: var(--pf-v5-c-button--m-danger--BackgroundColor);
8112
- }
8113
- .pf-v5-c-button.pf-m-danger:hover {
8114
- --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-danger--hover--Color);
8115
- --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-danger--hover--BackgroundColor);
8116
- }
8117
- .pf-v5-c-button.pf-m-danger:focus {
8118
- --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-danger--focus--Color);
8119
- --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-danger--focus--BackgroundColor);
8120
- }
8121
- .pf-v5-c-button.pf-m-danger:active, .pf-v5-c-button.pf-m-danger.pf-m-active {
8122
- --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-danger--active--Color);
8123
- --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-danger--active--BackgroundColor);
8124
- }
8125
- .pf-v5-c-button.pf-m-danger.pf-m-secondary {
8126
- --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--Color);
8127
- --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-secondary--m-danger--BackgroundColor);
8128
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--after--BorderColor);
8129
- }
8130
- .pf-v5-c-button.pf-m-danger.pf-m-secondary:hover {
8131
- --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--hover--Color);
8132
- --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-v5-c-button--m-secondary--m-danger--hover--BackgroundColor);
8133
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--hover--after--BorderColor);
8134
- }
8135
- .pf-v5-c-button.pf-m-danger.pf-m-secondary:focus {
8136
- --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--focus--Color);
8137
- --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-v5-c-button--m-secondary--m-danger--focus--BackgroundColor);
8138
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--focus--after--BorderColor);
8139
- }
8140
- .pf-v5-c-button.pf-m-danger.pf-m-secondary:active, .pf-v5-c-button.pf-m-danger.pf-m-secondary.pf-m-active {
8141
- --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--active--Color);
8142
- --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-v5-c-button--m-secondary--m-danger--active--BackgroundColor);
8143
- --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--active--after--BorderColor);
8144
- }
8145
- .pf-v5-c-button.pf-m-danger.pf-m-link {
8146
- --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--Color);
8147
- --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--BackgroundColor);
8148
- }
8149
- .pf-v5-c-button.pf-m-danger.pf-m-link:hover {
8150
- --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--hover--Color);
8151
- --pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--hover--BackgroundColor);
8152
- }
8153
- .pf-v5-c-button.pf-m-danger.pf-m-link:focus {
8154
- --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--focus--Color);
8155
- --pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--focus--BackgroundColor);
8156
- }
8157
- .pf-v5-c-button.pf-m-danger.pf-m-link:active, .pf-v5-c-button.pf-m-danger.pf-m-link.pf-m-active {
8158
- --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--active--Color);
8159
- --pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--active--BackgroundColor);
8160
- }
8161
8129
  .pf-v5-c-button.pf-m-warning {
8162
- color: var(--pf-v5-c-button--m-warning--Color);
8163
- background-color: var(--pf-v5-c-button--m-warning--BackgroundColor);
8130
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-warning--Color);
8131
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-warning--BackgroundColor);
8132
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-warning__icon--Color);
8133
+ --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-warning--hover--Color);
8134
+ --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-warning--hover--BackgroundColor);
8135
+ --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-warning--hover__icon--Color);
8136
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-warning--m-clicked--Color);
8137
+ --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-warning--m-clicked--BackgroundColor);
8138
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-warning--m-clicked__icon--Color);
8164
8139
  }
8165
- .pf-v5-c-button.pf-m-warning:hover {
8166
- --pf-v5-c-button--m-warning--Color: var(--pf-v5-c-button--m-warning--hover--Color);
8167
- --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-v5-c-button--m-warning--hover--BackgroundColor);
8168
- }
8169
- .pf-v5-c-button.pf-m-warning:focus {
8170
- --pf-v5-c-button--m-warning--Color: var(--pf-v5-c-button--m-warning--focus--Color);
8171
- --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-v5-c-button--m-warning--focus--BackgroundColor);
8172
- }
8173
- .pf-v5-c-button.pf-m-warning:active, .pf-v5-c-button.pf-m-warning.pf-m-active {
8174
- --pf-v5-c-button--m-warning--Color: var(--pf-v5-c-button--m-warning--active--Color);
8175
- --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-v5-c-button--m-warning--active--BackgroundColor);
8140
+ .pf-v5-c-button.pf-m-danger {
8141
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-danger--Color);
8142
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-danger--BackgroundColor);
8143
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-danger__icon--Color);
8144
+ --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-danger--hover--Color);
8145
+ --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-danger--hover--BackgroundColor);
8146
+ --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-danger--hover__icon--Color);
8147
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-danger--m-clicked--Color);
8148
+ --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-danger--m-clicked--BackgroundColor);
8149
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-danger--m-clicked__icon--Color);
8176
8150
  }
8177
8151
  .pf-v5-c-button.pf-m-control {
8178
8152
  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-control--BorderRadius);
8179
- --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-control--disabled--BackgroundColor);
8180
- --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--m-control--after--BorderWidth);
8181
- --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);
8182
- color: var(--pf-v5-c-button--m-control--Color);
8183
- background-color: var(--pf-v5-c-button--m-control--BackgroundColor);
8184
- }
8185
- .pf-v5-c-button.pf-m-control::after {
8186
- border-radius: initial;
8187
- }
8188
- .pf-v5-c-button.pf-m-control:hover {
8189
- --pf-v5-c-button--m-control--Color: var(--pf-v5-c-button--m-control--hover--Color);
8190
- --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-c-button--m-control--hover--BackgroundColor);
8191
- --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-c-button--m-control--hover--after--BorderBottomColor);
8192
- }
8193
- .pf-v5-c-button.pf-m-control:hover::after {
8194
- border-block-end-width: var(--pf-v5-c-button--m-control--hover--after--BorderBottomWidth);
8195
- }
8196
- .pf-v5-c-button.pf-m-control:active, .pf-v5-c-button.pf-m-control.pf-m-active {
8197
- --pf-v5-c-button--m-control--Color: var(--pf-v5-c-button--m-control--active--Color);
8198
- --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-c-button--m-control--active--BackgroundColor);
8199
- --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-c-button--m-control--active--after--BorderBottomColor);
8200
- }
8201
- .pf-v5-c-button.pf-m-control:active::after, .pf-v5-c-button.pf-m-control.pf-m-active::after {
8202
- border-block-end-width: var(--pf-v5-c-button--m-control--active--after--BorderBottomWidth);
8203
- }
8204
- .pf-v5-c-button.pf-m-control:focus {
8205
- --pf-v5-c-button--m-control--Color: var(--pf-v5-c-button--m-control--focus--Color);
8206
- --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-c-button--m-control--focus--BackgroundColor);
8207
- --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-c-button--m-control--focus--after--BorderBottomColor);
8208
- }
8209
- .pf-v5-c-button.pf-m-control:focus::after {
8210
- border-block-end-width: var(--pf-v5-c-button--m-control--focus--after--BorderBottomWidth);
8211
- }
8212
- .pf-v5-c-button.pf-m-control.pf-m-expanded {
8213
- --pf-v5-c-button--m-control--Color: var(--pf-v5-c-button--m-control--m-expanded--Color);
8214
- --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-c-button--m-control--m-expanded--BackgroundColor);
8215
- --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor);
8216
- }
8217
- .pf-v5-c-button.pf-m-control.pf-m-expanded::after {
8218
- border-block-end-width: var(--pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth);
8153
+ --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-control--PaddingLeft);
8154
+ --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-control--PaddingRight);
8155
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-control--Color);
8156
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-control--BackgroundColor);
8157
+ --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--m-control--BorderColor);
8158
+ --pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--m-control--BorderWidth);
8159
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-control__icon--Color);
8160
+ --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-control--hover--Color);
8161
+ --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-control--hover--BackgroundColor);
8162
+ --pf-v5-c-button--hover--BorderColor: var(--pf-v5-c-button--m-control--hover--BorderColor);
8163
+ --pf-v5-c-button--hover--BorderWidth: var(--pf-v5-c-button--m-control--hover--BorderWidth);
8164
+ --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-control--hover__icon--Color);
8165
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-control--m-clicked--Color);
8166
+ --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-control--m-clicked--BackgroundColor);
8167
+ --pf-v5-c-button--m-clicked--BorderColor: var(--pf-v5-c-button--m-control--m-clicked--BorderColor);
8168
+ --pf-v5-c-button--m-clicked--BorderWidth: var(--pf-v5-c-button--m-control--m-clicked--BorderWidth);
8169
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-control--m-clicked__icon--Color);
8170
+ }
8171
+ .pf-v5-c-button.pf-m-stateful {
8172
+ --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-stateful--BorderRadius);
8173
+ --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-stateful--PaddingLeft);
8174
+ --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-stateful--PaddingRight);
8175
+ }
8176
+ .pf-v5-c-button.pf-m-read {
8177
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-read--BackgroundColor);
8178
+ --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--m-read--BorderColor);
8179
+ --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-read--hover--BackgroundColor);
8180
+ --pf-v5-c-button--hover--BorderColor: var(--pf-v5-c-button--m-read--hover--BorderColor);
8181
+ --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-read--m-clicked--BackgroundColor);
8182
+ --pf-v5-c-button--m-clicked--BorderColor: var(--pf-v5-c-button--m-read--m-clicked--BorderColor);
8183
+ }
8184
+ .pf-v5-c-button.pf-m-unread {
8185
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-unread--Color);
8186
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-unread--BackgroundColor);
8187
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-unread__icon--Color);
8188
+ --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-unread--hover--Color);
8189
+ --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-unread--hover--BackgroundColor);
8190
+ --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-unread--hover__icon--Color);
8191
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-unread--m-clicked--Color);
8192
+ --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-unread--m-clicked--BackgroundColor);
8193
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-unread--m-clicked__icon--Color);
8194
+ }
8195
+ .pf-v5-c-button.pf-m-attention {
8196
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-attention--Color);
8197
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-attention--BackgroundColor);
8198
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-attention__icon--Color);
8199
+ --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-attention--hover--Color);
8200
+ --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-attention--hover--BackgroundColor);
8201
+ --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-attention--hover__icon--Color);
8202
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-attention--m-clicked--Color);
8203
+ --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-attention--m-clicked--BackgroundColor);
8204
+ --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-attention--m-clicked__icon--Color);
8219
8205
  }
8220
8206
  .pf-v5-c-button.pf-m-plain {
8221
- --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-plain--disabled--Color);
8222
- --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-plain--disabled--BackgroundColor);
8223
8207
  --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-plain--PaddingTop);
8224
8208
  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-plain--PaddingRight);
8225
8209
  --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-plain--PaddingBottom);
8226
8210
  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-plain--PaddingLeft);
8211
+ --pf-v5-c-button--m-small--PaddingTop: var(--pf-v5-c-button--m-plain--m-small--PaddingTop);
8212
+ --pf-v5-c-button--m-small--PaddingRight: var(--pf-v5-c-button--m-plain--m-small--PaddingRight);
8213
+ --pf-v5-c-button--m-small--PaddingBottom: var(--pf-v5-c-button--m-plain--m-small--PaddingBottom);
8214
+ --pf-v5-c-button--m-small--PaddingLeft: var(--pf-v5-c-button--m-plain--m-small--PaddingLeft);
8227
8215
  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-plain--BorderRadius);
8228
- color: var(--pf-v5-c-button--m-plain--Color);
8229
- background-color: var(--pf-v5-c-button--m-plain--BackgroundColor);
8216
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-plain--Color);
8217
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-plain--BackgroundColor);
8218
+ --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-plain--hover--Color);
8219
+ --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
8220
+ --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-plain--m-clicked--Color);
8221
+ --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-plain--m-clicked--BackgroundColor);
8222
+ --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-plain--disabled--Color);
8223
+ --pf-v5-c-button__progress--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
8224
+ min-width: var(--pf-v5-c-button--m-plain--MinWidth);
8225
+ mix-blend-mode: var(--pf-v5-c-button--m-plain--MixBlendMode);
8230
8226
  }
8231
8227
  .pf-v5-c-button.pf-m-plain.pf-m-no-padding {
8232
8228
  padding: 0;
8233
8229
  }
8234
- .pf-v5-c-button.pf-m-plain:hover, .pf-v5-c-button.pf-m-plain:focus {
8235
- --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
8236
- mix-blend-mode: var(--pf-t--global--background--color--action--plain--hover--blend);
8230
+ .pf-v5-c-button.pf-m-block {
8231
+ display: block;
8232
+ width: 100%;
8237
8233
  }
8238
- .pf-v5-c-button.pf-m-plain:active, .pf-v5-c-button.pf-m-plain.pf-m-active {
8239
- --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-plain--active--Color);
8240
- --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--active--BackgroundColor);
8234
+ .pf-v5-c-button.pf-m-small {
8235
+ --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-small--PaddingTop);
8236
+ --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-small--PaddingRight);
8237
+ --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-small--PaddingBottom);
8238
+ --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-small--PaddingLeft);
8241
8239
  }
8242
- .pf-v5-c-button.pf-m-plain:focus {
8243
- --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-plain--focus--Color);
8244
- --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--focus--BackgroundColor);
8240
+ .pf-v5-c-button.pf-m-display-lg {
8241
+ --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-display-lg--PaddingTop);
8242
+ --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-display-lg--PaddingRight);
8243
+ --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-display-lg--PaddingBottom);
8244
+ --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-display-lg--PaddingLeft);
8245
+ --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-display-lg--FontSize);
8246
+ }
8247
+ .pf-v5-c-button:hover, .pf-v5-c-button:focus {
8248
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--hover--Color);
8249
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--hover--BackgroundColor);
8250
+ --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--hover--BorderColor);
8251
+ --pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--hover--BorderWidth);
8252
+ --pf-v5-c-button--TextDecoration: var(--pf-v5-c-button--hover--TextDecoration);
8253
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--hover__icon--Color);
8254
+ }
8255
+ .pf-v5-c-button.pf-m-clicked {
8256
+ --pf-v5-c-button--Color: var(--pf-v5-c-button--m-clicked--Color);
8257
+ --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-clicked--BackgroundColor);
8258
+ --pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--m-clicked--BorderWidth);
8259
+ --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--m-clicked--BorderColor);
8260
+ --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-clicked__icon--Color);
8245
8261
  }
8246
8262
  .pf-v5-c-button:disabled, .pf-v5-c-button.pf-m-disabled {
8247
8263
  pointer-events: none;
8248
8264
  }
8249
8265
  .pf-v5-c-button:disabled, .pf-v5-c-button.pf-m-disabled, .pf-v5-c-button.pf-m-aria-disabled {
8266
+ --pf-v5-c-badge--m-unread--Color: var(--pf-v5-c-button--disabled__c-badge--Color);
8267
+ --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-c-button--disabled__c-badge--BackgroundColor);
8268
+ --pf-v5-c-button--m-primary__c-badge--BorderWidth: 0;
8250
8269
  color: var(--pf-v5-c-button--disabled--Color);
8251
8270
  background-color: var(--pf-v5-c-button--disabled--BackgroundColor);
8252
8271
  }
8253
8272
  .pf-v5-c-button:disabled::after, .pf-v5-c-button.pf-m-disabled::after, .pf-v5-c-button.pf-m-aria-disabled::after {
8254
- border-color: var(--pf-v5-c-button--disabled--after--BorderColor);
8273
+ border-color: transparent;
8255
8274
  }
8256
- .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 {
8257
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-c-button--disabled__c-badge--Color);
8258
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-c-button--disabled__c-badge--BackgroundColor);
8259
- --pf-v5-c-button--m-primary__c-badge--BorderWidth: 0;
8275
+ .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 {
8276
+ color: var(--pf-v5-c-button--disabled__icon--Color);
8260
8277
  }
8261
8278
  .pf-v5-c-button.pf-m-aria-disabled {
8262
- --pf-v5-c-button--after--BorderWidth: 0;
8263
8279
  --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: none;
8264
8280
  cursor: default;
8265
8281
  }
@@ -8276,7 +8292,6 @@ button.pf-v5-c-breadcrumb__link {
8276
8292
  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-in-progress--PaddingLeft);
8277
8293
  }
8278
8294
  .pf-v5-c-button.pf-m-in-progress.pf-m-plain {
8279
- --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
8280
8295
  --pf-v5-c-button__progress--Left: var(--pf-v5-c-button--m-in-progress--m-plain__progress--Left);
8281
8296
  --pf-v5-c-button__progress--TranslateX: var(--pf-v5-c-button--m-in-progress--m-plain__progress--TranslateX);
8282
8297
  }
@@ -8284,6 +8299,9 @@ button.pf-v5-c-breadcrumb__link {
8284
8299
  opacity: 0;
8285
8300
  }
8286
8301
 
8302
+ .pf-v5-c-button__icon {
8303
+ color: var(--pf-v5-c-button__icon--Color);
8304
+ }
8287
8305
  .pf-v5-c-button__icon.pf-m-start {
8288
8306
  margin-inline-end: var(--pf-v5-c-button__icon--m-start--MarginRight);
8289
8307
  }
@@ -8296,6 +8314,7 @@ button.pf-v5-c-breadcrumb__link {
8296
8314
  inset-block-start: var(--pf-v5-c-button__progress--Top);
8297
8315
  inset-inline-start: var(--pf-v5-c-button__progress--Left);
8298
8316
  line-height: 1;
8317
+ color: var(--pf-v5-c-button__progress--Color);
8299
8318
  transform: translate(var(--pf-v5-c-button__progress--TranslateX), var(--pf-v5-c-button__progress--TranslateY));
8300
8319
  }
8301
8320
  .pf-v5-c-button__progress .pf-v5-c-spinner {
@@ -25116,19 +25135,29 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25116
25135
  margin-inline-start: var(--pf-v5-c-slider__main--actions--MarginLeft);
25117
25136
  }
25118
25137
 
25138
+ :root,
25119
25139
  .pf-v5-c-spinner {
25120
- --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
25140
+ --pf-v5-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
25121
25141
  --pf-v5-c-spinner--Width: var(--pf-v5-c-spinner--diameter);
25122
25142
  --pf-v5-c-spinner--Height: var(--pf-v5-c-spinner--diameter);
25123
- --pf-v5-c-spinner--Color: var(--pf-v5-global--primary-color--100);
25124
- --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
25125
- --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
25126
- --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
25127
- --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
25143
+ --pf-v5-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
25144
+ --pf-v5-c-spinner--AnimationDuration: 1.4s;
25145
+ --pf-v5-c-spinner--AnimationTimingFunction: linear;
25146
+ --pf-v5-c-spinner--StrokeWidth: 10;
25147
+ --pf-v5-c-spinner__path--StrokeWidth: var(--pf-v5-c-spinner--StrokeWidth);
25148
+ --pf-v5-c-spinner__path--AnimationTimingFunction: ease-in-out;
25149
+ --pf-v5-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
25150
+ --pf-v5-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
25151
+ --pf-v5-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
25152
+ --pf-v5-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
25128
25153
  --pf-v5-c-spinner--m-inline--diameter: 1em;
25154
+ }
25155
+
25156
+ .pf-v5-c-spinner {
25129
25157
  width: var(--pf-v5-c-spinner--Width);
25130
25158
  height: var(--pf-v5-c-spinner--Height);
25131
25159
  overflow: hidden;
25160
+ animation: pf-v5-c-spinner-animation-rotate calc(var(--pf-v5-c-spinner--AnimationDuration) * 2) var(--pf-v5-c-spinner--AnimationTimingFunction) infinite;
25132
25161
  }
25133
25162
  .pf-v5-c-spinner.pf-m-inline {
25134
25163
  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-inline--diameter);
@@ -25146,33 +25175,6 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
25146
25175
  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
25147
25176
  }
25148
25177
 
25149
- svg.pf-v5-c-spinner {
25150
- --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
25151
- --pf-v5-c-spinner--AnimationDuration: 1.4s;
25152
- --pf-v5-c-spinner--AnimationTimingFunction: linear;
25153
- --pf-v5-c-spinner--stroke-width: 10;
25154
- --pf-v5-c-spinner__path--Stroke: var(--pf-v5-c-spinner--Color);
25155
- --pf-v5-c-spinner__path--StrokeWidth: var(--pf-v5-c-spinner--stroke-width);
25156
- --pf-v5-c-spinner__path--AnimationTimingFunction: ease-in-out;
25157
- --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
25158
- --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
25159
- --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
25160
- --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
25161
- animation: pf-v5-c-spinner-animation-rotate calc(var(--pf-v5-c-spinner--AnimationDuration) * 2) var(--pf-v5-c-spinner--AnimationTimingFunction) infinite;
25162
- }
25163
- svg.pf-v5-c-spinner.pf-m-sm {
25164
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-sm--diameter);
25165
- }
25166
- svg.pf-v5-c-spinner.pf-m-md {
25167
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-md--diameter);
25168
- }
25169
- svg.pf-v5-c-spinner.pf-m-lg {
25170
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-lg--diameter);
25171
- }
25172
- svg.pf-v5-c-spinner.pf-m-xl {
25173
- --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
25174
- }
25175
-
25176
25178
  .pf-v5-c-spinner__path {
25177
25179
  width: 100%;
25178
25180
  height: 100%;
@@ -25180,7 +25182,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
25180
25182
  stroke-dasharray: 283;
25181
25183
  stroke-dashoffset: 280;
25182
25184
  stroke-linecap: round;
25183
- stroke-width: var(--pf-v5-c-spinner--stroke-width);
25185
+ stroke-width: var(--pf-v5-c-spinner--StrokeWidth);
25184
25186
  transform-origin: 50% 50%;
25185
25187
  animation: pf-v5-c-spinner-animation-dash var(--pf-v5-c-spinner--AnimationDuration) var(--pf-v5-c-spinner__path--AnimationTimingFunction) infinite;
25186
25188
  }