@patternfly/react-styles 5.2.0-prerelease.6 → 6.0.0-alpha.10

package/css/components/Button/button.css

@@ -1,469 +1,520 @@
-.pf-v5-c-button {
-  --pf-v5-c-button--PaddingTop: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-button--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-button--PaddingBottom: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-button--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-button--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-button--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-button--FontSize: var(--pf-v5-global--FontSize--md);
+:where(:root),
+:where(.pf-v5-c-button) {
+  --pf-v5-c-button--Display: inline-block;
+  --pf-v5-c-button--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-button--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-button--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-button--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-button--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v5-c-button--FontWeight: var(--pf-t--global--font--weight--body);
+  --pf-v5-c-button--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v5-c-button--BackgroundColor: transparent;
-  --pf-v5-c-button--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
-  --pf-v5-c-button--after--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
-  --pf-v5-c-button--after--BorderColor: transparent;
-  --pf-v5-c-button--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-button--hover--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-button--focus--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-button--active--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-button--disabled--Color: var(--pf-v5-global--disabled-color--100);
-  --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
-  --pf-v5-c-button--disabled--after--BorderColor: transparent;
-  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-button--m-primary--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--pf-v5-global--primary-color--200);
-  --pf-v5-c-button--m-primary--hover--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--pf-v5-global--primary-color--200);
-  --pf-v5-c-button--m-primary--focus--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--pf-v5-global--primary-color--200);
-  --pf-v5-c-button--m-primary--active--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-button--m-secondary--BackgroundColor: transparent;
-  --pf-v5-c-button--m-secondary--after--BorderColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-button--m-secondary--Color: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-button--m-secondary--hover--BackgroundColor: transparent;
-  --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-button--m-secondary--hover--Color: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-button--m-secondary--focus--BackgroundColor: transparent;
-  --pf-v5-c-button--m-secondary--focus--after--BorderColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-button--m-secondary--focus--Color: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-button--m-secondary--active--BackgroundColor: transparent;
-  --pf-v5-c-button--m-secondary--active--after--BorderColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-button--m-secondary--active--Color: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: transparent;
-  --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-button--m-secondary--m-danger--after--BorderColor: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-button--m-secondary--m-danger--hover--BackgroundColor: transparent;
-  --pf-v5-c-button--m-secondary--m-danger--hover--Color: var(--pf-v5-global--danger-color--200);
-  --pf-v5-c-button--m-secondary--m-danger--hover--after--BorderColor: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-button--m-secondary--m-danger--focus--BackgroundColor: transparent;
-  --pf-v5-c-button--m-secondary--m-danger--focus--Color: var(--pf-v5-global--danger-color--200);
-  --pf-v5-c-button--m-secondary--m-danger--focus--after--BorderColor: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-button--m-secondary--m-danger--active--BackgroundColor: transparent;
-  --pf-v5-c-button--m-secondary--m-danger--active--Color: var(--pf-v5-global--danger-color--200);
-  --pf-v5-c-button--m-secondary--m-danger--active--after--BorderColor: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-button--m-tertiary--BackgroundColor: transparent;
-  --pf-v5-c-button--m-tertiary--after--BorderColor: var(--pf-v5-global--Color--100);
-  --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-button--m-tertiary--hover--BackgroundColor: transparent;
-  --pf-v5-c-button--m-tertiary--hover--after--BorderColor: var(--pf-v5-global--Color--100);
-  --pf-v5-c-button--m-tertiary--hover--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-button--m-tertiary--focus--BackgroundColor: transparent;
-  --pf-v5-c-button--m-tertiary--focus--after--BorderColor: var(--pf-v5-global--Color--100);
-  --pf-v5-c-button--m-tertiary--focus--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-button--m-tertiary--active--BackgroundColor: transparent;
-  --pf-v5-c-button--m-tertiary--active--after--BorderColor: var(--pf-v5-global--Color--100);
-  --pf-v5-c-button--m-tertiary--active--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-v5-global--warning-color--100);
-  --pf-v5-c-button--m-warning--Color: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-c-button--m-warning--hover--BackgroundColor: var(--pf-v5-global--palette--gold-500);
-  --pf-v5-c-button--m-warning--hover--Color: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-c-button--m-warning--focus--BackgroundColor: var(--pf-v5-global--palette--gold-500);
-  --pf-v5-c-button--m-warning--focus--Color: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-c-button--m-warning--active--BackgroundColor: var(--pf-v5-global--palette--gold-500);
-  --pf-v5-c-button--m-warning--active--Color: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-button--m-danger--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-v5-global--danger-color--200);
-  --pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-button--m-danger--focus--BackgroundColor: var(--pf-v5-global--danger-color--200);
-  --pf-v5-c-button--m-danger--focus--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-button--m-danger--active--BackgroundColor: var(--pf-v5-global--danger-color--200);
-  --pf-v5-c-button--m-danger--active--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-button--m-link--BackgroundColor: transparent;
-  --pf-v5-c-button--m-link--Color: var(--pf-v5-global--link--Color);
-  --pf-v5-c-button--m-link--hover--BackgroundColor: transparent;
-  --pf-v5-c-button--m-link--hover--Color: var(--pf-v5-global--link--Color--hover);
-  --pf-v5-c-button--m-link--focus--BackgroundColor: transparent;
-  --pf-v5-c-button--m-link--focus--Color: var(--pf-v5-global--link--Color--hover);
-  --pf-v5-c-button--m-link--active--BackgroundColor: transparent;
-  --pf-v5-c-button--m-link--active--Color: var(--pf-v5-global--link--Color--hover);
-  --pf-v5-c-button--m-link--disabled--BackgroundColor: transparent;
-  --pf-v5-c-button--m-link--disabled--Color: var(--pf-v5-global--disabled-color--100);
-  --pf-v5-c-button--m-link--m-inline--FontSize: inherit;
-  --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
-  --pf-v5-c-button--m-link--m-inline--hover--Color: var(--pf-v5-global--link--Color--hover);
+  --pf-v5-c-button--BorderColor: transparent;
+  --pf-v5-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
+  --pf-v5-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
+  --pf-v5-c-button--TextDecoration: none;
+  --pf-v5-c-button--MixBlendMode: normal;
+  --pf-v5-c-button--hover--BackgroundColor: transparent;
+  --pf-v5-c-button--hover--BorderColor: transparent;
+  --pf-v5-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
+  --pf-v5-c-button--hover--TextDecoration: none;
+  --pf-v5-c-button--m-clicked--BackgroundColor: transparent;
+  --pf-v5-c-button--m-clicked--BorderColor: transparent;
+  --pf-v5-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--button--active);
+  --pf-v5-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v5-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
+  --pf-v5-c-button--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
+  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
+  --pf-v5-c-button--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
+  --pf-v5-c-button--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
+  --pf-v5-c-button--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
+  --pf-v5-c-button--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
+  --pf-v5-c-button--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
+  --pf-v5-c-button--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
+  --pf-v5-c-button--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--default);
+  --pf-v5-c-button--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
+  --pf-v5-c-button--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
+  --pf-v5-c-button--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
+  --pf-v5-c-button--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
+  --pf-v5-c-button--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--clicked);
+  --pf-v5-c-button--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
+  --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
+  --pf-v5-c-button--m-secondary--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+  --pf-v5-c-button--m-secondary--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --pf-v5-c-button--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
+  --pf-v5-c-button--m-secondary--m-danger--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
+  --pf-v5-c-button--m-secondary--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
+  --pf-v5-c-button--m-secondary--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
+  --pf-v5-c-button--m-secondary--m-danger--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked);
+  --pf-v5-c-button--m-secondary--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked);
+  --pf-v5-c-button--m-tertiary--Color: var(--pf-t--global--text--color--brand--default);
+  --pf-v5-c-button--m-tertiary--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-button--m-tertiary__icon--Color: var(--pf-t--global--icon--color--brand--default);
+  --pf-v5-c-button--m-tertiary--hover--Color: var(--pf-t--global--text--color--brand--hover);
+  --pf-v5-c-button--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--hover);
+  --pf-v5-c-button--m-tertiary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
+  --pf-v5-c-button--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
+  --pf-v5-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
+  --pf-v5-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
+  --pf-v5-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v5-c-button--m-link--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-button--m-link--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
+  --pf-v5-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --pf-v5-c-button--m-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
+  --pf-v5-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
+  --pf-v5-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
+  --pf-v5-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+  --pf-v5-c-button--m-link--hover__icon--Color: var(--pf-t--global--text--color--brand--hover);
+  --pf-v5-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
+  --pf-v5-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
+  --pf-v5-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
+  --pf-v5-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
+  --pf-v5-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
+  --pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
+  --pf-v5-c-button--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
+  --pf-v5-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
+  --pf-v5-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
+  --pf-v5-c-button--m-link--m-inline--FontSize: initial;
+  --pf-v5-c-button--m-link--m-inline--LineHeight: initial;
+  --pf-v5-c-button--m-link--m-inline--FontWeight: initial;
+  --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
   --pf-v5-c-button--m-link--m-inline--PaddingTop: 0;
   --pf-v5-c-button--m-link--m-inline--PaddingRight: 0;
   --pf-v5-c-button--m-link--m-inline--PaddingBottom: 0;
   --pf-v5-c-button--m-link--m-inline--PaddingLeft: 0;
-  --pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-v5-global--spacer--xs);
-  --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-v5-global--spacer--sm));
-  --pf-v5-c-button--m-link--m-danger--BackgroundColor: transparent;
-  --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-button--m-link--m-danger--hover--BackgroundColor: transparent;
-  --pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-v5-global--danger-color--200);
-  --pf-v5-c-button--m-link--m-danger--focus--BackgroundColor: transparent;
-  --pf-v5-c-button--m-link--m-danger--focus--Color: var(--pf-v5-global--danger-color--200);
-  --pf-v5-c-button--m-link--m-danger--active--BackgroundColor: transparent;
-  --pf-v5-c-button--m-link--m-danger--active--Color: var(--pf-v5-global--danger-color--200);
-  --pf-v5-c-button--m-plain--BackgroundColor: transparent;
-  --pf-v5-c-button--m-plain--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-button--m-plain--hover--BackgroundColor: transparent;
-  --pf-v5-c-button--m-plain--hover--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-button--m-plain--focus--BackgroundColor: transparent;
-  --pf-v5-c-button--m-plain--focus--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-button--m-plain--active--BackgroundColor: transparent;
-  --pf-v5-c-button--m-plain--active--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-button--m-plain--disabled--Color: var(--pf-v5-global--disabled-color--200);
-  --pf-v5-c-button--m-plain--disabled--BackgroundColor: transparent;
-  --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-button--m-control--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-button--m-control--BorderRadius: 0;
-  --pf-v5-c-button--m-control--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-button--m-control--after--BorderTopColor: var(--pf-v5-global--BorderColor--300);
-  --pf-v5-c-button--m-control--after--BorderRightColor: var(--pf-v5-global--BorderColor--300);
-  --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
-  --pf-v5-c-button--m-control--after--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
-  --pf-v5-c-button--m-control--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-button--m-control--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-button--m-control--hover--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-button--m-control--hover--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-button--m-control--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-button--m-control--active--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-button--m-control--active--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-button--m-control--active--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-button--m-control--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-button--m-control--focus--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-button--m-control--focus--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-button--m-control--m-expanded--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-button--m-control--m-expanded--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-button--m-small--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-button--m-display-lg--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-button--m-display-lg--PaddingRight: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-button--m-display-lg--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-button--m-display-lg--PaddingLeft: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-button--m-display-lg--FontWeight: var(--pf-v5-global--FontWeight--bold);
-  --pf-v5-c-button--m-link--m-display-lg--FontSize: var(--pf-v5-global--FontSize--lg);
-  --pf-v5-c-button__icon--m-start--MarginRight: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-button__icon--m-end--MarginLeft: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
+  --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));
+  --pf-v5-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
+  --pf-v5-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
+  --pf-v5-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v5-c-button--m-plain--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-button--m-plain--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-button--m-plain--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --pf-v5-c-button--m-plain--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
+  --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));
+  --pf-v5-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+  --pf-v5-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
+  --pf-v5-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
+  --pf-v5-c-button--m-plain--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-button--m-plain--m-small--PaddingRight: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-button--m-plain--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-button--m-plain--m-small--PaddingLeft: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-button--m-plain--m-no-padding--MixBlendMode: normal;
+  --pf-v5-c-button--m-plain--m-no-padding--MinWidth: auto;
+  --pf-v5-c-button--m-plain--m-no-padding--PaddingTop: 0;
+  --pf-v5-c-button--m-plain--m-no-padding--PaddingRight: 0;
+  --pf-v5-c-button--m-plain--m-no-padding--PaddingBottom: 0;
+  --pf-v5-c-button--m-plain--m-no-padding--PaddingLeft: 0;
+  --pf-v5-c-button--m-plain--m-no-padding--BackgroundColor: transparent;
+  --pf-v5-c-button--m-plain--m-no-padding--hover--BackgroundColor: transparent;
+  --pf-v5-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
+  --pf-v5-c-button__progress--Color: var(--pf-v5-c-button__icon--Color);
+  --pf-v5-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v5-c-button--m-control--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-button--m-control--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-button--m-control--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
+  --pf-v5-c-button--m-control--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-button--m-control--BorderWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-button--m-control__icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-button--m-control--hover--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-button--m-control--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
+  --pf-v5-c-button--m-control--hover--BorderColor: var(--pf-t--global--border--color--hover);
+  --pf-v5-c-button--m-control--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
+  --pf-v5-c-button--m-control--hover__icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-button--m-control--m-clicked--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-button--m-control--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
+  --pf-v5-c-button--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
+  --pf-v5-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--active);
+  --pf-v5-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v5-c-button--m-stateful--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-button--m-stateful--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
+  --pf-v5-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--hover);
+  --pf-v5-c-button--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
+  --pf-v5-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--clicked);
+  --pf-v5-c-button--m-read--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
+  --pf-v5-c-button--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
+  --pf-v5-c-button--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v5-c-button--m-unread__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
+  --pf-v5-c-button--m-unread--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
+  --pf-v5-c-button--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
+  --pf-v5-c-button--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
+  --pf-v5-c-button--m-unread--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
+  --pf-v5-c-button--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
+  --pf-v5-c-button--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
+  --pf-v5-c-button--m-attention--Color: var(--pf-t--global--text--color--status--on-danger--default);
+  --pf-v5-c-button--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
+  --pf-v5-c-button--m-attention__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
+  --pf-v5-c-button--m-attention--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
+  --pf-v5-c-button--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
+  --pf-v5-c-button--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
+  --pf-v5-c-button--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
+  --pf-v5-c-button--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
+  --pf-v5-c-button--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
+  --pf-v5-c-button--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
+  --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
+  --pf-v5-c-button--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
+  --pf-v5-c-button--m-warning--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
+  --pf-v5-c-button--m-warning--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
+  --pf-v5-c-button--m-warning--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
+  --pf-v5-c-button--m-warning--m-clicked--Color: var(--pf-t--global--text--color--status--on-warning--clicked);
+  --pf-v5-c-button--m-warning--m-clicked--BackgroundColor: var(--pf-t--global--color--status--warning--clicked);
+  --pf-v5-c-button--m-warning--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-warning--clicked);
+  --pf-v5-c-button--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
+  --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
+  --pf-v5-c-button--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
+  --pf-v5-c-button--m-danger--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
+  --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
+  --pf-v5-c-button--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
+  --pf-v5-c-button--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
+  --pf-v5-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
+  --pf-v5-c-button--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
+  --pf-v5-c-button--m-display-lg--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-button--m-display-lg--PaddingRight: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-button--m-display-lg--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-button--m-display-lg--PaddingLeft: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v5-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v5-c-button--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-button--m-small--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-button--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-button--m-small--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+  --pf-v5-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
+  --pf-v5-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --pf-v5-c-button--disabled--BorderColor: transparent;
+  --pf-v5-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-button__icon--m-start--MarginRight: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-button__icon--m-end--MarginLeft: var(--pf-t--global--spacer--xs);
   --pf-v5-c-button__progress--width: calc(var(--pf-v5-global--icon--FontSize--md) + var(--pf-v5-global--spacer--sm));
   --pf-v5-c-button__progress--Opacity: 0;
   --pf-v5-c-button__progress--TranslateY: -50%;
   --pf-v5-c-button__progress--TranslateX: 0;
   --pf-v5-c-button__progress--Top: 50%;
-  --pf-v5-c-button__progress--Left: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-button__progress--Left: var(--pf-t--global--spacer--md);
+  --pf-v5-c-button__progress--Color: var(--pf-v5-c-button__icon--Color);
   --pf-v5-c-button--m-progress--TransitionProperty: padding;
   --pf-v5-c-button--m-progress--TransitionDuration: var(--pf-v5-global--TransitionDuration);
-  --pf-v5-c-button--m-progress--PaddingRight: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-c-button__progress--width) / 2);
-  --pf-v5-c-button--m-progress--PaddingLeft: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-c-button__progress--width) / 2);
-  --pf-v5-c-button--m-in-progress--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-button--m-in-progress--PaddingLeft: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-c-button__progress--width));
-  --pf-v5-c-button--m-in-progress--m-plain--Color: var(--pf-v5-global--primary-color--100);
+  --pf-v5-c-button--m-progress--PaddingRight: calc(var(--pf-t--global--spacer--md) + var(--pf-v5-c-button__progress--width) / 2);
+  --pf-v5-c-button--m-progress--PaddingLeft: calc(var(--pf-t--global--spacer--md) + var(--pf-v5-c-button__progress--width) / 2);
+  --pf-v5-c-button--m-in-progress--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-button--m-in-progress--PaddingLeft: calc(var(--pf-t--global--spacer--md) + var(--pf-v5-c-button__progress--width));
+  --pf-v5-c-button--m-in-progress--m-plain--Color: var(--pf-v5-c-spinner--Color);
   --pf-v5-c-button--m-in-progress--m-plain__progress--Left: 50%;
   --pf-v5-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
   --pf-v5-c-button__count--MarginLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-button--disabled__c-badge--Color: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-c-button--disabled__c-badge--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-button--m-primary__c-badge--BorderColor: var(--pf-v5-global--BorderColor--300);
-  --pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled--default);
+  --pf-v5-c-button--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --pf-v5-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
+}
+
+.pf-v5-c-button {
   position: relative;
-  display: inline-block;
+  display: var(--pf-v5-c-button--Display);
+  flex: var(--pf-v5-c-button--Flex, initial);
+  align-items: var(--pf-v5-c-button--AlignItems, initial);
+  justify-content: var(--pf-v5-c-button--JustifyContent, initial);
   padding-block-start: var(--pf-v5-c-button--PaddingTop);
   padding-block-end: var(--pf-v5-c-button--PaddingBottom);
   padding-inline-start: var(--pf-v5-c-button--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-button--PaddingRight);
-  font-size: var(--pf-v5-c-button--FontSize);
-  font-weight: var(--pf-v5-c-button--FontWeight);
-  line-height: var(--pf-v5-c-button--LineHeight);
+  font-size: var(--pf-v5-c-button--FontSize, inherit);
+  font-weight: var(--pf-v5-c-button--FontWeight, inherit);
+  line-height: var(--pf-v5-c-button--LineHeight, inherit);
+  color: var(--pf-v5-c-button--Color);
   text-align: center;
+  text-decoration: var(--pf-v5-c-button--TextDecoration);
   white-space: nowrap;
+  cursor: pointer;
   user-select: none;
+  background-color: var(--pf-v5-c-button--BackgroundColor);
   border: 0;
-  border-radius: var(--pf-v5-c-button--BorderRadius);
+  border-start-start-radius: var(--pf-v5-c-button--BorderStartStartRadius, var(--pf-v5-c-button--BorderRadius));
+  border-start-end-radius: var(--pf-v5-c-button--BorderStartEndRadius, var(--pf-v5-c-button--BorderRadius));
+  border-end-start-radius: var(--pf-v5-c-button--BorderEndStartRadius, var(--pf-v5-c-button--BorderRadius));
+  border-end-end-radius: var(--pf-v5-c-button--BorderEndEndRadius, var(--pf-v5-c-button--BorderRadius));
 }
 .pf-v5-c-button::after {
   position: absolute;
-  inset-block-start: 0;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
+  inset: 0;
   pointer-events: none;
   content: "";
-  border: var(--pf-v5-c-button--after--BorderWidth) solid;
-  border-color: var(--pf-v5-c-button--after--BorderColor);
-  border-radius: var(--pf-v5-c-button--after--BorderRadius);
-}
-.pf-v5-c-button:hover {
-  --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--hover--after--BorderWidth);
-  text-decoration: none;
-}
-.pf-v5-c-button:focus {
-  --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--focus--after--BorderWidth);
-}
-.pf-v5-c-button:active, .pf-v5-c-button.pf-m-active {
-  --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--active--after--BorderWidth);
-}
-.pf-v5-c-button.pf-m-block {
-  display: block;
-  width: 100%;
-}
-.pf-v5-c-button.pf-m-small {
-  --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-small--FontSize);
-}
-.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 {
-  --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-display-lg--PaddingTop);
-  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-display-lg--PaddingRight);
-  --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-display-lg--PaddingBottom);
-  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-display-lg--PaddingLeft);
-  --pf-v5-c-button--FontWeight: var(--pf-v5-c-button--m-display-lg--FontWeight);
+  border: var(--pf-v5-c-button--BorderWidth) solid;
+  border-color: var(--pf-v5-c-button--BorderColor);
+  border-radius: inherit;
 }
 .pf-v5-c-button.pf-m-primary {
-  color: var(--pf-v5-c-button--m-primary--Color);
-  background-color: var(--pf-v5-c-button--m-primary--BackgroundColor);
-}
-.pf-v5-c-button.pf-m-primary:hover {
-  --pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--hover--Color);
-  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--hover--BackgroundColor);
-}
-.pf-v5-c-button.pf-m-primary:focus {
-  --pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--focus--Color);
-  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--focus--BackgroundColor);
-}
-.pf-v5-c-button.pf-m-primary:active, .pf-v5-c-button.pf-m-primary.pf-m-active {
-  --pf-v5-c-button--m-primary--Color: var(--pf-v5-c-button--m-primary--active--Color);
-  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--active--BackgroundColor);
+  --pf-v5-c-button--Color: var(--pf-v5-c-button--m-primary--Color);
+  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-primary--BackgroundColor);
+  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-primary__icon--Color);
+  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-primary--hover--Color);
+  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-primary--hover--BackgroundColor);
+  --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-primary--hover__icon--Color);
+  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-primary--m-clicked--Color);
+  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-primary--m-clicked--BackgroundColor);
+  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-primary--m-clicked__icon--Color);
 }
 .pf-v5-c-button.pf-m-primary .pf-v5-c-badge.pf-m-unread {
   border: var(--pf-v5-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-v5-c-button--m-primary__c-badge--BorderColor);
 }
 .pf-v5-c-button.pf-m-secondary {
-  --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--after--BorderColor);
-  color: var(--pf-v5-c-button--m-secondary--Color);
-  background-color: var(--pf-v5-c-button--m-secondary--BackgroundColor);
-}
-.pf-v5-c-button.pf-m-secondary:hover {
-  --pf-v5-c-button--m-secondary--Color: var(--pf-v5-c-button--m-secondary--hover--Color);
-  --pf-v5-c-button--m-secondary--BackgroundColor: var(--pf-v5-c-button--m-secondary--hover--BackgroundColor);
-  --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--hover--after--BorderColor);
-}
-.pf-v5-c-button.pf-m-secondary:focus {
-  --pf-v5-c-button--m-secondary--Color: var(--pf-v5-c-button--m-secondary--focus--Color);
-  --pf-v5-c-button--m-secondary--BackgroundColor: var(--pf-v5-c-button--m-secondary--focus--BackgroundColor);
-  --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--focus--after--BorderColor);
-}
-.pf-v5-c-button.pf-m-secondary.pf-m-active, .pf-v5-c-button.pf-m-secondary:active {
-  --pf-v5-c-button--m-secondary--Color: var(--pf-v5-c-button--m-secondary--active--Color);
-  --pf-v5-c-button--m-secondary--BackgroundColor: var(--pf-v5-c-button--m-secondary--active--BackgroundColor);
-  --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--active--after--BorderColor);
+  --pf-v5-c-button--Color: var(--pf-v5-c-button--m-secondary--Color);
+  --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--m-secondary--BorderColor);
+  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-secondary__icon--Color);
+  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-secondary--hover--Color);
+  --pf-v5-c-button--hover--BorderColor: var(--pf-v5-c-button--m-secondary--hover--BorderColor);
+  --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-secondary--hover__icon--Color);
+  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-secondary--m-clicked--Color);
+  --pf-v5-c-button--m-clicked--BorderColor: var(--pf-v5-c-button--m-secondary--m-clicked--BorderColor);
+  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-secondary--m-clicked__icon--Color);
+  --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--Color);
+  --pf-v5-c-button--m-danger__icon--Color: var(--pf-v5-c-button--m-secondary--m-danger__icon--Color);
+  --pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-c-button--m-secondary--m-danger--hover--Color);
+  --pf-v5-c-button--m-danger--hover__icon--Color: var(--pf-v5-c-button--m-secondary--m-danger--hover__icon--Color);
+  --pf-v5-c-button--m-danger--m-clicked--Color: var(--pf-v5-c-button--m-secondary--m-danger--m-clicked--Color);
+  --pf-v5-c-button--m-danger--m-clicked__icon--Color: var(--pf-v5-c-button--m-secondary--m-danger--m-clicked__icon--Color);
+}
+.pf-v5-c-button.pf-m-secondary.pf-m-danger {
+  --pf-v5-c-button--m-secondary--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--BorderColor);
+  --pf-v5-c-button--m-secondary--hover--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--hover--BorderColor);
+  --pf-v5-c-button--m-secondary--m-clicked--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--m-clicked--BorderColor);
+  --pf-v5-c-button--m-danger--BackgroundColor: transparent;
+  --pf-v5-c-button--m-danger--hover--BackgroundColor: transparent;
+  --pf-v5-c-button--m-danger--m-clicked--BackgroundColor: transparent;
 }
 .pf-v5-c-button.pf-m-tertiary {
-  --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-tertiary--after--BorderColor);
-  color: var(--pf-v5-c-button--m-tertiary--Color);
-  background-color: var(--pf-v5-c-button--m-tertiary--BackgroundColor);
-}
-.pf-v5-c-button.pf-m-tertiary:hover {
-  --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-c-button--m-tertiary--hover--Color);
-  --pf-v5-c-button--m-tertiary--BackgroundColor: var(--pf-v5-c-button--m-tertiary--hover--BackgroundColor);
-  --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-tertiary--hover--after--BorderColor);
-}
-.pf-v5-c-button.pf-m-tertiary:focus {
-  --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-c-button--m-tertiary--focus--Color);
-  --pf-v5-c-button--m-tertiary--BackgroundColor: var(--pf-v5-c-button--m-tertiary--focus--BackgroundColor);
-  --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-tertiary--focus--after--BorderColor);
-}
-.pf-v5-c-button.pf-m-tertiary:active, .pf-v5-c-button.pf-m-tertiary.pf-m-active {
-  --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-c-button--m-tertiary--active--Color);
-  --pf-v5-c-button--m-tertiary--BackgroundColor: var(--pf-v5-c-button--m-tertiary--active--BackgroundColor);
-  --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-tertiary--active--after--BorderColor);
+  --pf-v5-c-button--Color: var(--pf-v5-c-button--m-tertiary--Color);
+  --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--m-tertiary--BorderColor);
+  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-tertiary__icon--Color);
+  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-tertiary--hover--Color);
+  --pf-v5-c-button--hover--BorderColor: var(--pf-v5-c-button--m-tertiary--hover--BorderColor);
+  --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-tertiary--hover__icon--Color);
+  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-tertiary--m-clicked--Color);
+  --pf-v5-c-button--m-clicked--BorderColor: var(--pf-v5-c-button--m-tertiary--m-clicked--BorderColor);
+  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-tertiary--m-clicked__icon--Color);
 }
 .pf-v5-c-button.pf-m-link {
-  --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-link--disabled--BackgroundColor);
-  --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-link--disabled--Color);
-  color: var(--pf-v5-c-button--m-link--Color);
-  background-color: var(--pf-v5-c-button--m-link--BackgroundColor);
-}
-.pf-v5-c-button.pf-m-link:not(.pf-m-inline):hover {
-  --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--hover--Color);
-  --pf-v5-c-button--m-link--BackgroundColor: var(--pf-v5-c-button--m-link--hover--BackgroundColor);
-}
-.pf-v5-c-button.pf-m-link:not(.pf-m-inline):focus {
-  --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--focus--Color);
-  --pf-v5-c-button--m-link--BackgroundColor: var(--pf-v5-c-button--m-link--focus--BackgroundColor);
-}
-.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 {
-  --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--active--Color);
-  --pf-v5-c-button--m-link--BackgroundColor: var(--pf-v5-c-button--m-link--active--BackgroundColor);
+  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-link--PaddingRight);
+  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-link--PaddingLeft);
+  --pf-v5-c-button--Color: var(--pf-v5-c-button--m-link--Color);
+  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-link--BorderRadius);
+  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-link--BackgroundColor);
+  --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-link--MixBlendMode);
+  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-link__icon--Color);
+  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-link--hover--Color);
+  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-link--hover--BackgroundColor);
+  --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-link--hover__icon--Color);
+  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-link--m-clicked--Color);
+  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-link--m-clicked--BackgroundColor);
+  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-link--m-clicked__icon--Color);
 }
 .pf-v5-c-button.pf-m-link.pf-m-inline {
   --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-link--m-inline--FontSize);
+  --pf-v5-c-button--LineHeight: var(--pf-v5-c-button--m-link--m-inline--LineHeight);
+  --pf-v5-c-button--FontWeight: var(--pf-v5-c-button--m-link--m-inline--FontWeight);
+  --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-link--m-inline--PaddingTop);
+  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-link--m-inline--PaddingRight);
+  --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-link--m-inline--PaddingBottom);
+  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-link--m-inline--PaddingLeft);
+  --pf-v5-c-button--BackgroundColor: transparent;
   --pf-v5-c-button__progress--Left: var(--pf-v5-c-button--m-link--m-inline__progress--Left);
+  --pf-v5-c-button--hover--TextDecoration: var(--pf-v5-c-button--m-link--m-inline--hover--TextDecoration);
+  --pf-v5-c-button--hover--BackgroundColor: transparent;
+  --pf-v5-c-button--m-clicked--BackgroundColor: transparent;
+  --pf-v5-c-button--disabled--BackgroundColor: transparent;
+  --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-link--m-inline--disabled--Color);
+  --pf-v5-c-button--disabled__icon--Color: var(--pf-v5-c-button--m-link--m-inline--disabled__icon--Color);
   display: inline;
-  padding-block-start: var(--pf-v5-c-button--m-link--m-inline--PaddingTop);
-  padding-block-end: var(--pf-v5-c-button--m-link--m-inline--PaddingBottom);
-  padding-inline-start: var(--pf-v5-c-button--m-link--m-inline--PaddingLeft);
-  padding-inline-end: var(--pf-v5-c-button--m-link--m-inline--PaddingRight);
   text-align: start;
   white-space: normal;
-  cursor: pointer;
+  outline-offset: 0.125rem;
 }
-.pf-v5-c-button.pf-m-link.pf-m-inline:hover {
-  --pf-v5-c-button--m-link--Color: var(--pf-v5-c-button--m-link--m-inline--hover--Color);
-  text-decoration: var(--pf-v5-c-button--m-link--m-inline--hover--TextDecoration);
+.pf-v5-c-button.pf-m-link:where(.pf-m-danger) {
+  --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--Color);
+  --pf-v5-c-button--m-danger__icon--Color: var(--pf-v5-c-button--m-link--m-danger__icon--Color);
+  --pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-c-button--m-link--m-danger--hover--Color);
+  --pf-v5-c-button--m-danger--hover__icon--Color: var(--pf-v5-c-button--m-link--m-danger--hover__icon--Color);
+  --pf-v5-c-button--m-danger--m-clicked--Color: var(--pf-v5-c-button--m-link--m-danger--m-clicked--Color);
+  --pf-v5-c-button--m-danger--m-clicked__icon--Color: var(--pf-v5-c-button--m-link--m-danger--m-clicked__icon--Color);
+  --pf-v5-c-button--m-danger--BackgroundColor: transparent;
+  --pf-v5-c-button--m-danger--hover--BackgroundColor: transparent;
+  --pf-v5-c-button--m-danger--m-clicked--BackgroundColor: transparent;
 }
 .pf-v5-c-button.pf-m-link.pf-m-display-lg {
   --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-link--m-display-lg--FontSize);
 }
-.pf-v5-c-button.pf-m-danger {
-  color: var(--pf-v5-c-button--m-danger--Color);
-  background-color: var(--pf-v5-c-button--m-danger--BackgroundColor);
-}
-.pf-v5-c-button.pf-m-danger:hover {
-  --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-danger--hover--Color);
-  --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-danger--hover--BackgroundColor);
-}
-.pf-v5-c-button.pf-m-danger:focus {
-  --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-danger--focus--Color);
-  --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-danger--focus--BackgroundColor);
-}
-.pf-v5-c-button.pf-m-danger:active, .pf-v5-c-button.pf-m-danger.pf-m-active {
-  --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-danger--active--Color);
-  --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-danger--active--BackgroundColor);
-}
-.pf-v5-c-button.pf-m-danger.pf-m-secondary {
-  --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--Color);
-  --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-secondary--m-danger--BackgroundColor);
-  --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--after--BorderColor);
-}
-.pf-v5-c-button.pf-m-danger.pf-m-secondary:hover {
-  --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--hover--Color);
-  --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-v5-c-button--m-secondary--m-danger--hover--BackgroundColor);
-  --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--hover--after--BorderColor);
-}
-.pf-v5-c-button.pf-m-danger.pf-m-secondary:focus {
-  --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--focus--Color);
-  --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-v5-c-button--m-secondary--m-danger--focus--BackgroundColor);
-  --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--focus--after--BorderColor);
-}
-.pf-v5-c-button.pf-m-danger.pf-m-secondary:active, .pf-v5-c-button.pf-m-danger.pf-m-secondary.pf-m-active {
-  --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-c-button--m-secondary--m-danger--active--Color);
-  --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: var(--pf-v5-c-button--m-secondary--m-danger--active--BackgroundColor);
-  --pf-v5-c-button--after--BorderColor: var(--pf-v5-c-button--m-secondary--m-danger--active--after--BorderColor);
-}
-.pf-v5-c-button.pf-m-danger.pf-m-link {
-  --pf-v5-c-button--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--Color);
-  --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--BackgroundColor);
-}
-.pf-v5-c-button.pf-m-danger.pf-m-link:hover {
-  --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--hover--Color);
-  --pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--hover--BackgroundColor);
-}
-.pf-v5-c-button.pf-m-danger.pf-m-link:focus {
-  --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--focus--Color);
-  --pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--focus--BackgroundColor);
-}
-.pf-v5-c-button.pf-m-danger.pf-m-link:active, .pf-v5-c-button.pf-m-danger.pf-m-link.pf-m-active {
-  --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--active--Color);
-  --pf-v5-c-button--m-link--m-danger--BackgroundColor: var(--pf-v5-c-button--m-link--m-danger--active--BackgroundColor);
-}
 .pf-v5-c-button.pf-m-warning {
-  color: var(--pf-v5-c-button--m-warning--Color);
-  background-color: var(--pf-v5-c-button--m-warning--BackgroundColor);
+  --pf-v5-c-button--Color: var(--pf-v5-c-button--m-warning--Color);
+  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-warning--BackgroundColor);
+  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-warning__icon--Color);
+  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-warning--hover--Color);
+  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-warning--hover--BackgroundColor);
+  --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-warning--hover__icon--Color);
+  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-warning--m-clicked--Color);
+  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-warning--m-clicked--BackgroundColor);
+  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-warning--m-clicked__icon--Color);
 }
-.pf-v5-c-button.pf-m-warning:hover {
-  --pf-v5-c-button--m-warning--Color: var(--pf-v5-c-button--m-warning--hover--Color);
-  --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-v5-c-button--m-warning--hover--BackgroundColor);
-}
-.pf-v5-c-button.pf-m-warning:focus {
-  --pf-v5-c-button--m-warning--Color: var(--pf-v5-c-button--m-warning--focus--Color);
-  --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-v5-c-button--m-warning--focus--BackgroundColor);
-}
-.pf-v5-c-button.pf-m-warning:active, .pf-v5-c-button.pf-m-warning.pf-m-active {
-  --pf-v5-c-button--m-warning--Color: var(--pf-v5-c-button--m-warning--active--Color);
-  --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-v5-c-button--m-warning--active--BackgroundColor);
+.pf-v5-c-button.pf-m-danger {
+  --pf-v5-c-button--Color: var(--pf-v5-c-button--m-danger--Color);
+  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-danger--BackgroundColor);
+  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-danger__icon--Color);
+  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-danger--hover--Color);
+  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-danger--hover--BackgroundColor);
+  --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-danger--hover__icon--Color);
+  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-danger--m-clicked--Color);
+  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-danger--m-clicked--BackgroundColor);
+  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-danger--m-clicked__icon--Color);
 }
 .pf-v5-c-button.pf-m-control {
   --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-control--BorderRadius);
-  --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-control--disabled--BackgroundColor);
-  --pf-v5-c-button--after--BorderWidth: var(--pf-v5-c-button--m-control--after--BorderWidth);
-  --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);
-  color: var(--pf-v5-c-button--m-control--Color);
-  background-color: var(--pf-v5-c-button--m-control--BackgroundColor);
-}
-.pf-v5-c-button.pf-m-control::after {
-  border-radius: initial;
-}
-.pf-v5-c-button.pf-m-control:hover {
-  --pf-v5-c-button--m-control--Color: var(--pf-v5-c-button--m-control--hover--Color);
-  --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-c-button--m-control--hover--BackgroundColor);
-  --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-c-button--m-control--hover--after--BorderBottomColor);
-}
-.pf-v5-c-button.pf-m-control:hover::after {
-  border-block-end-width: var(--pf-v5-c-button--m-control--hover--after--BorderBottomWidth);
-}
-.pf-v5-c-button.pf-m-control:active, .pf-v5-c-button.pf-m-control.pf-m-active {
-  --pf-v5-c-button--m-control--Color: var(--pf-v5-c-button--m-control--active--Color);
-  --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-c-button--m-control--active--BackgroundColor);
-  --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-c-button--m-control--active--after--BorderBottomColor);
-}
-.pf-v5-c-button.pf-m-control:active::after, .pf-v5-c-button.pf-m-control.pf-m-active::after {
-  border-block-end-width: var(--pf-v5-c-button--m-control--active--after--BorderBottomWidth);
-}
-.pf-v5-c-button.pf-m-control:focus {
-  --pf-v5-c-button--m-control--Color: var(--pf-v5-c-button--m-control--focus--Color);
-  --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-c-button--m-control--focus--BackgroundColor);
-  --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-c-button--m-control--focus--after--BorderBottomColor);
-}
-.pf-v5-c-button.pf-m-control:focus::after {
-  border-block-end-width: var(--pf-v5-c-button--m-control--focus--after--BorderBottomWidth);
-}
-.pf-v5-c-button.pf-m-control.pf-m-expanded {
-  --pf-v5-c-button--m-control--Color: var(--pf-v5-c-button--m-control--m-expanded--Color);
-  --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-c-button--m-control--m-expanded--BackgroundColor);
-  --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor);
-}
-.pf-v5-c-button.pf-m-control.pf-m-expanded::after {
-  border-block-end-width: var(--pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth);
+  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-control--PaddingLeft);
+  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-control--PaddingRight);
+  --pf-v5-c-button--Color: var(--pf-v5-c-button--m-control--Color);
+  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-control--BackgroundColor);
+  --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--m-control--BorderColor);
+  --pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--m-control--BorderWidth);
+  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-control__icon--Color);
+  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-control--hover--Color);
+  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-control--hover--BackgroundColor);
+  --pf-v5-c-button--hover--BorderColor: var(--pf-v5-c-button--m-control--hover--BorderColor);
+  --pf-v5-c-button--hover--BorderWidth: var(--pf-v5-c-button--m-control--hover--BorderWidth);
+  --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-control--hover__icon--Color);
+  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-control--m-clicked--Color);
+  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-control--m-clicked--BackgroundColor);
+  --pf-v5-c-button--m-clicked--BorderColor: var(--pf-v5-c-button--m-control--m-clicked--BorderColor);
+  --pf-v5-c-button--m-clicked--BorderWidth: var(--pf-v5-c-button--m-control--m-clicked--BorderWidth);
+  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-control--m-clicked__icon--Color);
+}
+.pf-v5-c-button.pf-m-stateful {
+  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-stateful--BorderRadius);
+  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-stateful--PaddingLeft);
+  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-stateful--PaddingRight);
+}
+.pf-v5-c-button.pf-m-read {
+  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-read--BackgroundColor);
+  --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--m-read--BorderColor);
+  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-read--hover--BackgroundColor);
+  --pf-v5-c-button--hover--BorderColor: var(--pf-v5-c-button--m-read--hover--BorderColor);
+  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-read--m-clicked--BackgroundColor);
+  --pf-v5-c-button--m-clicked--BorderColor: var(--pf-v5-c-button--m-read--m-clicked--BorderColor);
+}
+.pf-v5-c-button.pf-m-unread {
+  --pf-v5-c-button--Color: var(--pf-v5-c-button--m-unread--Color);
+  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-unread--BackgroundColor);
+  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-unread__icon--Color);
+  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-unread--hover--Color);
+  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-unread--hover--BackgroundColor);
+  --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-unread--hover__icon--Color);
+  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-unread--m-clicked--Color);
+  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-unread--m-clicked--BackgroundColor);
+  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-unread--m-clicked__icon--Color);
+}
+.pf-v5-c-button.pf-m-attention {
+  --pf-v5-c-button--Color: var(--pf-v5-c-button--m-attention--Color);
+  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-attention--BackgroundColor);
+  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-attention__icon--Color);
+  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-attention--hover--Color);
+  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-attention--hover--BackgroundColor);
+  --pf-v5-c-button--hover__icon--Color: var(--pf-v5-c-button--m-attention--hover__icon--Color);
+  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-attention--m-clicked--Color);
+  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-attention--m-clicked--BackgroundColor);
+  --pf-v5-c-button--m-clicked__icon--Color: var(--pf-v5-c-button--m-attention--m-clicked__icon--Color);
 }
 .pf-v5-c-button.pf-m-plain {
+  --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-plain--PaddingTop);
+  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-plain--PaddingRight);
+  --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-plain--PaddingBottom);
+  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-plain--PaddingLeft);
+  --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-plain--MixBlendMode);
+  --pf-v5-c-button--m-small--PaddingTop: var(--pf-v5-c-button--m-plain--m-small--PaddingTop);
+  --pf-v5-c-button--m-small--PaddingRight: var(--pf-v5-c-button--m-plain--m-small--PaddingRight);
+  --pf-v5-c-button--m-small--PaddingBottom: var(--pf-v5-c-button--m-plain--m-small--PaddingBottom);
+  --pf-v5-c-button--m-small--PaddingLeft: var(--pf-v5-c-button--m-plain--m-small--PaddingLeft);
+  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-plain--BorderRadius);
+  --pf-v5-c-button--Color: var(--pf-v5-c-button--m-plain--Color);
+  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-plain--BackgroundColor);
+  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-plain--hover--Color);
+  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
+  --pf-v5-c-button--m-clicked--Color: var(--pf-v5-c-button--m-plain--m-clicked--Color);
+  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-plain--m-clicked--BackgroundColor);
   --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-plain--disabled--Color);
-  --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-c-button--m-plain--disabled--BackgroundColor);
-  color: var(--pf-v5-c-button--m-plain--Color);
-  background-color: var(--pf-v5-c-button--m-plain--BackgroundColor);
+  --pf-v5-c-button__progress--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
+  min-width: var(--pf-v5-c-button--m-plain--MinWidth);
 }
 .pf-v5-c-button.pf-m-plain.pf-m-no-padding {
-  padding: 0;
+  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-plain--m-no-padding--BackgroundColor);
+  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-plain--m-no-padding--hover--BackgroundColor);
+  --pf-v5-c-button--m-clicked--BackgroundColor: var(--pf-v5-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor);
+  --pf-v5-c-button--m-plain--PaddingTop: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingTop);
+  --pf-v5-c-button--m-plain--PaddingRight: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingRight);
+  --pf-v5-c-button--m-plain--PaddingBottom: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingBottom);
+  --pf-v5-c-button--m-plain--PaddingLeft: var(--pf-v5-c-button--m-plain--m-no-padding--PaddingLeft);
+  --pf-v5-c-button--m-plain--MixBlendMode: var(--pf-v5-c-button--m-plain--m-no-padding--MixBlendMode);
+  min-width: var(--pf-v5-c-button--m-plain--m-no-padding--MinWidth);
 }
-.pf-v5-c-button.pf-m-plain:hover {
-  --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-plain--hover--Color);
-  --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--hover--BackgroundColor);
+.pf-v5-c-button.pf-m-block {
+  display: block;
+  width: 100%;
 }
-.pf-v5-c-button.pf-m-plain:active, .pf-v5-c-button.pf-m-plain.pf-m-active {
-  --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-plain--active--Color);
-  --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--active--BackgroundColor);
+.pf-v5-c-button.pf-m-small {
+  --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-small--PaddingTop);
+  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-small--PaddingRight);
+  --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-small--PaddingBottom);
+  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-small--PaddingLeft);
 }
-.pf-v5-c-button.pf-m-plain:focus {
-  --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-plain--focus--Color);
-  --pf-v5-c-button--m-plain--BackgroundColor: var(--pf-v5-c-button--m-plain--focus--BackgroundColor);
+.pf-v5-c-button.pf-m-display-lg {
+  --pf-v5-c-button--PaddingTop: var(--pf-v5-c-button--m-display-lg--PaddingTop);
+  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-display-lg--PaddingRight);
+  --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-display-lg--PaddingBottom);
+  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-display-lg--PaddingLeft);
+  --pf-v5-c-button--FontSize: var(--pf-v5-c-button--m-display-lg--FontSize);
+}
+.pf-v5-c-button:hover, .pf-v5-c-button:focus {
+  --pf-v5-c-button--Color: var(--pf-v5-c-button--hover--Color);
+  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--hover--BackgroundColor);
+  --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--hover--BorderColor);
+  --pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--hover--BorderWidth);
+  --pf-v5-c-button--TextDecoration: var(--pf-v5-c-button--hover--TextDecoration);
+  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--hover__icon--Color);
+}
+.pf-v5-c-button.pf-m-clicked {
+  --pf-v5-c-button--Color: var(--pf-v5-c-button--m-clicked--Color);
+  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-clicked--BackgroundColor);
+  --pf-v5-c-button--BorderWidth: var(--pf-v5-c-button--m-clicked--BorderWidth);
+  --pf-v5-c-button--BorderColor: var(--pf-v5-c-button--m-clicked--BorderColor);
+  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-clicked__icon--Color);
 }
 .pf-v5-c-button:disabled, .pf-v5-c-button.pf-m-disabled {
   pointer-events: none;
 }
 .pf-v5-c-button:disabled, .pf-v5-c-button.pf-m-disabled, .pf-v5-c-button.pf-m-aria-disabled {
+  --pf-v5-c-badge--m-unread--Color: var(--pf-v5-c-button--disabled__c-badge--Color);
+  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-c-button--disabled__c-badge--BackgroundColor);
+  --pf-v5-c-button--m-primary__c-badge--BorderWidth: 0;
   color: var(--pf-v5-c-button--disabled--Color);
   background-color: var(--pf-v5-c-button--disabled--BackgroundColor);
 }
 .pf-v5-c-button:disabled::after, .pf-v5-c-button.pf-m-disabled::after, .pf-v5-c-button.pf-m-aria-disabled::after {
-  border-color: var(--pf-v5-c-button--disabled--after--BorderColor);
+  border-color: transparent;
 }
-.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 {
-  --pf-v5-c-badge--m-unread--Color: var(--pf-v5-c-button--disabled__c-badge--Color);
-  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-c-button--disabled__c-badge--BackgroundColor);
-  --pf-v5-c-button--m-primary__c-badge--BorderWidth: 0;
+.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 {
+  color: var(--pf-v5-c-button--disabled__icon--Color);
 }
 .pf-v5-c-button.pf-m-aria-disabled {
-  --pf-v5-c-button--after--BorderWidth: 0;
   --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: none;
   cursor: default;
 }
@@ -480,7 +531,6 @@
   --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-in-progress--PaddingLeft);
 }
 .pf-v5-c-button.pf-m-in-progress.pf-m-plain {
-  --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
   --pf-v5-c-button__progress--Left: var(--pf-v5-c-button--m-in-progress--m-plain__progress--Left);
   --pf-v5-c-button__progress--TranslateX: var(--pf-v5-c-button--m-in-progress--m-plain__progress--TranslateX);
 }
@@ -488,6 +538,9 @@
   opacity: 0;
 }
 
+.pf-v5-c-button__icon {
+  color: var(--pf-v5-c-button__icon--Color);
+}
 .pf-v5-c-button__icon.pf-m-start {
   margin-inline-end: var(--pf-v5-c-button__icon--m-start--MarginRight);
 }
@@ -500,6 +553,7 @@
   inset-block-start: var(--pf-v5-c-button__progress--Top);
   inset-inline-start: var(--pf-v5-c-button__progress--Left);
   line-height: 1;
+  color: var(--pf-v5-c-button__progress--Color);
   transform: translate(var(--pf-v5-c-button__progress--TranslateX), var(--pf-v5-c-button__progress--TranslateY));
 }
 .pf-v5-c-button__progress .pf-v5-c-spinner {
@@ -510,49 +564,4 @@
   display: inline-flex;
   align-items: center;
   margin-inline-start: var(--pf-v5-c-button__count--MarginLeft);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-button {
-  --pf-v5-c-button--disabled--Color: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
-  --pf-v5-c-button--m-primary--Color: var(--pf-v5-global--primary-color--400);
-  --pf-v5-c-button--m-tertiary--after--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-global--palette--black-100);
-  --pf-v5-c-button--m-tertiary--hover--after--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-button--m-tertiary--hover--Color: var(--pf-v5-global--palette--black-100);
-  --pf-v5-c-button--m-tertiary--focus--after--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-button--m-tertiary--focus--Color: var(--pf-v5-global--palette--black-100);
-  --pf-v5-c-button--m-tertiary--active--after--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-button--m-tertiary--active--Color: var(--pf-v5-global--palette--black-100);
-  --pf-v5-c-button--m-warning--Color: var(--pf-v5-global--palette--black-900);
-  --pf-v5-c-button--m-warning--hover--Color: var(--pf-v5-global--palette--black-900);
-  --pf-v5-c-button--m-warning--focus--Color: var(--pf-v5-global--palette--black-900);
-  --pf-v5-c-button--m-warning--active--Color: var(--pf-v5-global--palette--black-900);
-  --pf-v5-c-button--m-warning--hover--BackgroundColor: var(--pf-v5-global--warning-color--200);
-  --pf-v5-c-button--m-warning--focus--BackgroundColor: var(--pf-v5-global--warning-color--200);
-  --pf-v5-c-button--m-warning--active--BackgroundColor: var(--pf-v5-global--warning-color--200);
-  --pf-v5-c-button--m-danger--Color: var(--pf-v5-global--palette--black-900);
-  --pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-global--palette--black-900);
-  --pf-v5-c-button--m-danger--focus--Color: var(--pf-v5-global--palette--black-900);
-  --pf-v5-c-button--m-danger--active--Color: var(--pf-v5-global--palette--black-900);
-  --pf-v5-c-button--m-link--disabled--Color: var(--pf-v5-global--disabled-color--100);
-  --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-  --pf-v5-c-button--m-control--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-  --pf-v5-c-button--m-control--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-  --pf-v5-c-button--m-control--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-  --pf-v5-c-button--m-control--m-expanded--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-  --pf-v5-c-button--m-control--after--BorderTopColor: transparent;
-  --pf-v5-c-button--m-control--after--BorderRightColor: transparent;
-  --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
-  --pf-v5-c-button--m-control--after--BorderLeftColor: transparent;
-  --pf-v5-c-button--m-control--hover--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-button--m-control--active--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-button--m-control--focus--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-button--m-control--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
-  --pf-v5-c-button--m-primary__c-badge--BorderColor: var(--pf-v5-global--Color--100);
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-button.pf-m-control:disabled::after {
-  border: 0;
-  border-block-end: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--palette--black-700);
 }