@patternfly/patternfly 5.2.0-prerelease.3 → 6.0.0-alpha.10

package/components/Button/button.scss

@@ -2,187 +2,194 @@
 
 .#{$button} {
   // Component
-  --#{$button}--PaddingTop: var(--#{$pf-global}--spacer--form-element);
-  --#{$button}--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$button}--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
-  --#{$button}--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$button}--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$button}--FontWeight: var(--#{$pf-global}--FontWeight--normal);
-  --#{$button}--FontSize: var(--#{$pf-global}--FontSize--md);
+  --#{$button}--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$button}--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$button}--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$button}--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$button}--LineHeight: var(--pf-t--global--font--line-height--body);
+  --#{$button}--FontWeight: var(--pf-t--global--font--weight--body);
+  --#{$button}--FontSize: var(--pf-t--global--font--size--body--md);
   --#{$button}--BackgroundColor: transparent;
-  --#{$button}--BorderRadius: var(--#{$pf-global}--BorderRadius--sm);
-  --#{$button}--after--BorderRadius: var(--#{$pf-global}--BorderRadius--sm);
+  --#{$button}--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$button}--after--BorderColor: transparent;
-  --#{$button}--after--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
+  --#{$button}--after--BorderWidth: var(--pf-t--global--border--width--button--default);
 
   // Hover state variables
-  --#{$button}--hover--after--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
+  --#{$button}--hover--after--BorderWidth: var(--pf-t--global--border--width--button--hover);
 
   // Focus state variables
-  --#{$button}--focus--after--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
+  --#{$button}--focus--after--BorderWidth: var(--pf-t--global--border--width--button--active);
 
   // Active state variables
-  --#{$button}--active--after--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
+  --#{$button}--active--after--BorderWidth: var(--pf-t--global--border--width--button--active);
 
   // Disabled state variables
-  --#{$button}--disabled--Color: var(--#{$pf-global}--disabled-color--100);
-  --#{$button}--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
+  --#{$button}--disabled--Color: var(--pf-t--global--text--color--disabled--default);
+  --#{$button}--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --#{$button}--disabled--after--BorderColor: transparent;
 
   // Primary btn
-  --#{$button}--m-primary--BackgroundColor: var(--#{$pf-global}--primary-color--100);
-  --#{$button}--m-primary--Color: var(--#{$pf-global}--Color--light-100);
-  --#{$button}--m-primary--hover--BackgroundColor: var(--#{$pf-global}--primary-color--200);
-  --#{$button}--m-primary--hover--Color: var(--#{$pf-global}--Color--light-100);
-  --#{$button}--m-primary--focus--BackgroundColor: var(--#{$pf-global}--primary-color--200);
-  --#{$button}--m-primary--focus--Color: var(--#{$pf-global}--Color--light-100);
-  --#{$button}--m-primary--active--BackgroundColor: var(--#{$pf-global}--primary-color--200);
-  --#{$button}--m-primary--active--Color: var(--#{$pf-global}--Color--light-100);
+  --#{$button}--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --#{$button}--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
+  --#{$button}--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
+  --#{$button}--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
+  --#{$button}--m-primary--focus--BackgroundColor: var(--pf-t--global--color--brand--active);
+  --#{$button}--m-primary--focus--Color: var(--pf-t--global--text--color--on-brand--active);
+  --#{$button}--m-primary--active--BackgroundColor: var(--pf-t--global--color--brand--active);
+  --#{$button}--m-primary--active--Color: var(--pf-t--global--text--color--on-brand--active);
 
   // Secondary btn
   --#{$button}--m-secondary--BackgroundColor: transparent;
-  --#{$button}--m-secondary--after--BorderColor: var(--#{$pf-global}--primary-color--100);
-  --#{$button}--m-secondary--Color: var(--#{$pf-global}--primary-color--100);
+  --#{$button}--m-secondary--after--BorderColor: var(--pf-t--global--border--color--brand--default);
+  --#{$button}--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
   --#{$button}--m-secondary--hover--BackgroundColor: transparent;
-  --#{$button}--m-secondary--hover--after--BorderColor: var(--#{$pf-global}--primary-color--100);
-  --#{$button}--m-secondary--hover--Color: var(--#{$pf-global}--primary-color--100);
+  --#{$button}--m-secondary--hover--after--BorderColor: var(--pf-t--global--border--color--brand--hover);
+  --#{$button}--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
   --#{$button}--m-secondary--focus--BackgroundColor: transparent;
-  --#{$button}--m-secondary--focus--after--BorderColor: var(--#{$pf-global}--primary-color--100);
-  --#{$button}--m-secondary--focus--Color: var(--#{$pf-global}--primary-color--100);
+  --#{$button}--m-secondary--focus--after--BorderColor: var(--pf-t--global--border--color--brand--active);
+  --#{$button}--m-secondary--focus--Color: var(--pf-t--global--text--color--brand--active);
   --#{$button}--m-secondary--active--BackgroundColor: transparent;
-  --#{$button}--m-secondary--active--after--BorderColor: var(--#{$pf-global}--primary-color--100);
-  --#{$button}--m-secondary--active--Color: var(--#{$pf-global}--primary-color--100);
+  --#{$button}--m-secondary--active--after--BorderColor: var(--pf-t--global--border--color--brand--active);
+  --#{$button}--m-secondary--active--Color: var(--pf-t--global--text--color--brand--active);
 
   // Secondary danger
   --#{$button}--m-secondary--m-danger--BackgroundColor: transparent;
-  --#{$button}--m-secondary--m-danger--Color: var(--#{$pf-global}--danger-color--100);
-  --#{$button}--m-secondary--m-danger--after--BorderColor: var(--#{$pf-global}--danger-color--100);
+  --#{$button}--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
+  --#{$button}--m-secondary--m-danger--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
   --#{$button}--m-secondary--m-danger--hover--BackgroundColor: transparent;
-  --#{$button}--m-secondary--m-danger--hover--Color: var(--#{$pf-global}--danger-color--200);
-  --#{$button}--m-secondary--m-danger--hover--after--BorderColor: var(--#{$pf-global}--danger-color--100);
+  --#{$button}--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
+  --#{$button}--m-secondary--m-danger--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
   --#{$button}--m-secondary--m-danger--focus--BackgroundColor: transparent;
-  --#{$button}--m-secondary--m-danger--focus--Color: var(--#{$pf-global}--danger-color--200);
-  --#{$button}--m-secondary--m-danger--focus--after--BorderColor: var(--#{$pf-global}--danger-color--100);
+  --#{$button}--m-secondary--m-danger--focus--Color: var(--pf-t--global--text--color--status--danger--active);
+  --#{$button}--m-secondary--m-danger--focus--after--BorderColor: var(--pf-t--global--border--color--status--danger--active);
   --#{$button}--m-secondary--m-danger--active--BackgroundColor: transparent;
-  --#{$button}--m-secondary--m-danger--active--Color: var(--#{$pf-global}--danger-color--200);
-  --#{$button}--m-secondary--m-danger--active--after--BorderColor: var(--#{$pf-global}--danger-color--100);
+  --#{$button}--m-secondary--m-danger--active--Color: var(--pf-t--global--text--color--status--danger--active);
+  --#{$button}--m-secondary--m-danger--active--after--BorderColor: var(--pf-t--global--border--color--status--danger--active);
 
   // Tertiary btn
   --#{$button}--m-tertiary--BackgroundColor: transparent;
-  --#{$button}--m-tertiary--after--BorderColor: var(--#{$pf-global}--Color--100);
-  --#{$button}--m-tertiary--Color: var(--#{$pf-global}--Color--100);
+  --#{$button}--m-tertiary--after--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$button}--m-tertiary--Color: var(--pf-t--global--text--color--regular);
   --#{$button}--m-tertiary--hover--BackgroundColor: transparent;
-  --#{$button}--m-tertiary--hover--after--BorderColor: var(--#{$pf-global}--Color--100);
-  --#{$button}--m-tertiary--hover--Color: var(--#{$pf-global}--Color--100);
+  --#{$button}--m-tertiary--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
+  --#{$button}--m-tertiary--hover--Color: var(--pf-t--global--text--color--regular);
   --#{$button}--m-tertiary--focus--BackgroundColor: transparent;
-  --#{$button}--m-tertiary--focus--after--BorderColor: var(--#{$pf-global}--Color--100);
-  --#{$button}--m-tertiary--focus--Color: var(--#{$pf-global}--Color--100);
+  --#{$button}--m-tertiary--focus--after--BorderColor: var(--pf-t--global--border--color--active);
+  --#{$button}--m-tertiary--focus--Color: var(--pf-t--global--text--color--regular);
   --#{$button}--m-tertiary--active--BackgroundColor: transparent;
-  --#{$button}--m-tertiary--active--after--BorderColor: var(--#{$pf-global}--Color--100);
-  --#{$button}--m-tertiary--active--Color: var(--#{$pf-global}--Color--100);
+  --#{$button}--m-tertiary--active--after--BorderColor: var(--pf-t--global--border--color--active);
+  --#{$button}--m-tertiary--active--Color: var(--pf-t--global--text--color--regular);
 
   // Warning btn
-  --#{$button}--m-warning--BackgroundColor: var(--#{$pf-global}--warning-color--100);
-  --#{$button}--m-warning--Color: var(--#{$pf-global}--Color--dark-100);
-  --#{$button}--m-warning--hover--BackgroundColor: var(--#{$pf-global}--palette--gold-500);
-  --#{$button}--m-warning--hover--Color: var(--#{$pf-global}--Color--dark-100);
-  --#{$button}--m-warning--focus--BackgroundColor: var(--#{$pf-global}--palette--gold-500);
-  --#{$button}--m-warning--focus--Color: var(--#{$pf-global}--Color--dark-100);
-  --#{$button}--m-warning--active--BackgroundColor: var(--#{$pf-global}--palette--gold-500);
-  --#{$button}--m-warning--active--Color: var(--#{$pf-global}--Color--dark-100);
+  // TODO need active state text?
+  --#{$button}--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
+  --#{$button}--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
+  --#{$button}--m-warning--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
+  --#{$button}--m-warning--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
+  --#{$button}--m-warning--focus--BackgroundColor: var(--pf-t--global--color--status--warning--active);
+  --#{$button}--m-warning--focus--Color: var(--pf-t--global--text--color--status--on-warning--hover);
+  --#{$button}--m-warning--active--BackgroundColor: var(--pf-t--global--color--status--warning--active);
+  --#{$button}--m-warning--active--Color: var(--pf-t--global--text--color--status--on-warning--hover);
 
   // Danger btn
-  --#{$button}--m-danger--BackgroundColor: var(--#{$pf-global}--danger-color--100);
-  --#{$button}--m-danger--Color: var(--#{$pf-global}--Color--light-100);
-  --#{$button}--m-danger--hover--BackgroundColor: var(--#{$pf-global}--danger-color--200);
-  --#{$button}--m-danger--hover--Color: var(--#{$pf-global}--Color--light-100);
-  --#{$button}--m-danger--focus--BackgroundColor: var(--#{$pf-global}--danger-color--200);
-  --#{$button}--m-danger--focus--Color: var(--#{$pf-global}--Color--light-100);
-  --#{$button}--m-danger--active--BackgroundColor: var(--#{$pf-global}--danger-color--200);
-  --#{$button}--m-danger--active--Color: var(--#{$pf-global}--Color--light-100);
+  // TODO need active state text?
+  --#{$button}--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
+  --#{$button}--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
+  --#{$button}--m-danger--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
+  --#{$button}--m-danger--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
+  --#{$button}--m-danger--focus--BackgroundColor: var(--pf-t--global--color--status--danger--active);
+  --#{$button}--m-danger--focus--Color: var(--pf-t--global--text--color--status--on-danger--hover);
+  --#{$button}--m-danger--active--BackgroundColor: var(--pf-t--global--color--status--danger--active);
+  --#{$button}--m-danger--active--Color: var(--pf-t--global--text--color--status--on-danger--hover);
 
   // Link btn
   --#{$button}--m-link--BackgroundColor: transparent;
-  --#{$button}--m-link--Color: var(--#{$pf-global}--link--Color);
+  --#{$button}--m-link--Color: var(--pf-t--global--text--color--link--default);
   --#{$button}--m-link--hover--BackgroundColor: transparent;
-  --#{$button}--m-link--hover--Color: var(--#{$pf-global}--link--Color--hover);
+  --#{$button}--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
   --#{$button}--m-link--focus--BackgroundColor: transparent;
-  --#{$button}--m-link--focus--Color: var(--#{$pf-global}--link--Color--hover);
+  --#{$button}--m-link--focus--Color: var(--pf-t--global--text--color--link--hover);
   --#{$button}--m-link--active--BackgroundColor: transparent;
-  --#{$button}--m-link--active--Color: var(--#{$pf-global}--link--Color--hover);
+  --#{$button}--m-link--active--Color: var(--pf-t--global--text--color--link--hover);
   --#{$button}--m-link--disabled--BackgroundColor: transparent;
-  --#{$button}--m-link--disabled--Color: var(--#{$pf-global}--disabled-color--100);
+  --#{$button}--m-link--disabled--Color: var(--pf-t--global--text--color--disabled--light);
+  --#{$button}--m-link--not--m-inline--TextDecoration: none;
   --#{$button}--m-link--m-inline--FontSize: inherit;
-  --#{$button}--m-link--m-inline--hover--TextDecoration: var(--#{$pf-global}--link--TextDecoration--hover);
-  --#{$button}--m-link--m-inline--hover--Color: var(--#{$pf-global}--link--Color--hover);
+  --#{$button}--m-link--m-inline--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
+  --#{$button}--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--link--hover);
   --#{$button}--m-link--m-inline--PaddingTop: 0;
   --#{$button}--m-link--m-inline--PaddingRight: 0;
   --#{$button}--m-link--m-inline--PaddingBottom: 0;
   --#{$button}--m-link--m-inline--PaddingLeft: 0;
-  --#{$button}--m-link--m-inline__progress--Left: var(--#{$pf-global}--spacer--xs);
-  --#{$button}--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--#{$button}--m-link--m-inline__progress--Left) + 1rem + var(--#{$pf-global}--spacer--sm));
+  --#{$button}--m-link--m-inline__progress--Left: var(--pf-t--global--spacer--xs);
+  --#{$button}--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--#{$button}--m-link--m-inline__progress--Left) + 1rem + var(--pf-t--global--spacer--sm));
 
   // Link danger
   --#{$button}--m-link--m-danger--BackgroundColor: transparent;
-  --#{$button}--m-link--m-danger--Color: var(--#{$pf-global}--danger-color--100);
+  --#{$button}--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
   --#{$button}--m-link--m-danger--hover--BackgroundColor: transparent;
-  --#{$button}--m-link--m-danger--hover--Color: var(--#{$pf-global}--danger-color--200);
+  --#{$button}--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
   --#{$button}--m-link--m-danger--focus--BackgroundColor: transparent;
-  --#{$button}--m-link--m-danger--focus--Color: var(--#{$pf-global}--danger-color--200);
+  --#{$button}--m-link--m-danger--focus--Color: var(--pf-t--global--text--color--status--danger--active);
   --#{$button}--m-link--m-danger--active--BackgroundColor: transparent;
-  --#{$button}--m-link--m-danger--active--Color: var(--#{$pf-global}--danger-color--200);
+  --#{$button}--m-link--m-danger--active--Color: var(--pf-t--global--text--color--status--danger--active);
 
   // Plain btn
-  --#{$button}--m-plain--BackgroundColor: transparent;
-  --#{$button}--m-plain--Color: var(--#{$pf-global}--Color--200);
-  --#{$button}--m-plain--hover--BackgroundColor: transparent;
-  --#{$button}--m-plain--hover--Color: var(--#{$pf-global}--Color--100);
+  --#{$button}--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --#{$button}--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$button}--m-plain--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$button}--m-plain--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$button}--m-plain--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$button}--m-plain--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$button}--m-plain--Color: var(--pf-t--global--icon--color--regular);
+  --#{$button}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+  --#{$button}--m-plain--hover--Color: var(--pf-t--global--text--color--regular);
   --#{$button}--m-plain--focus--BackgroundColor: transparent;
-  --#{$button}--m-plain--focus--Color: var(--#{$pf-global}--Color--100);
+  --#{$button}--m-plain--focus--Color: var(--pf-t--global--text--color--regular);
   --#{$button}--m-plain--active--BackgroundColor: transparent;
-  --#{$button}--m-plain--active--Color: var(--#{$pf-global}--Color--100);
-  --#{$button}--m-plain--disabled--Color: var(--#{$pf-global}--disabled-color--200);
+  --#{$button}--m-plain--active--Color: var(--pf-t--global--text--color--regular);
+  --#{$button}--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
   --#{$button}--m-plain--disabled--BackgroundColor: transparent;
 
   // Control Button
-  --#{$button}--m-control--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$button}--m-control--Color: var(--#{$pf-global}--Color--100);
-  --#{$button}--m-control--BorderRadius: 0;
-  --#{$button}--m-control--after--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$button}--m-control--after--BorderTopColor: var(--#{$pf-global}--BorderColor--300);
-  --#{$button}--m-control--after--BorderRightColor: var(--#{$pf-global}--BorderColor--300);
-  --#{$button}--m-control--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--200);
-  --#{$button}--m-control--after--BorderLeftColor: var(--#{$pf-global}--BorderColor--300);
-  --#{$button}--m-control--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
-  --#{$button}--m-control--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$button}--m-control--hover--Color: var(--#{$pf-global}--Color--100);
-  --#{$button}--m-control--hover--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$button}--m-control--hover--after--BorderBottomColor: var(--#{$pf-global}--active-color--100);
-  --#{$button}--m-control--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$button}--m-control--active--Color: var(--#{$pf-global}--Color--100);
-  --#{$button}--m-control--active--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$button}--m-control--active--after--BorderBottomColor: var(--#{$pf-global}--active-color--100);
-  --#{$button}--m-control--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$button}--m-control--focus--Color: var(--#{$pf-global}--Color--100);
-  --#{$button}--m-control--focus--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$button}--m-control--focus--after--BorderBottomColor: var(--#{$pf-global}--active-color--100);
-  --#{$button}--m-control--m-expanded--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$button}--m-control--m-expanded--Color: var(--#{$pf-global}--Color--100);
-  --#{$button}--m-control--m-expanded--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$button}--m-control--m-expanded--after--BorderBottomColor: var(--#{$pf-global}--active-color--100);
+  --#{$button}--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
+  --#{$button}--m-control--Color: var(--pf-t--global--text--color--subtle);
+  --#{$button}--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$button}--m-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
+  --#{$button}--m-control--after--BorderTopColor: var(--pf-t--global--border--color--default);
+  --#{$button}--m-control--after--BorderRightColor: var(--pf-t--global--border--color--default);
+  --#{$button}--m-control--after--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --#{$button}--m-control--after--BorderLeftColor: var(--pf-t--global--border--color--default);
+  --#{$button}--m-control--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --#{$button}--m-control--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$button}--m-control--hover--Color: var(--pf-t--global--text--color--regular);
+  --#{$button}--m-control--hover--after--BorderBottomWidth: var(--pf-t--global--border--width--control--hover);
+  --#{$button}--m-control--hover--after--BorderBottomColor: var(--pf-t--global--background--color--secondary--hover);
+  --#{$button}--m-control--active--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$button}--m-control--active--Color: var(--pf-t--global--text--color--regular);
+  --#{$button}--m-control--active--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
+  --#{$button}--m-control--active--after--BorderBottomColor: var(--pf-t--global--color--brand--active);
+  --#{$button}--m-control--focus--BackgroundColor: var(--pf-t--global--background--color--brand--active);
+  --#{$button}--m-control--focus--Color: var(--pf-t--global--text--color--regular);
+  --#{$button}--m-control--focus--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
+  --#{$button}--m-control--focus--after--BorderBottomColor: var(--pf-t--global--color--brand--hover);
+  --#{$button}--m-control--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$button}--m-control--m-expanded--Color: var(--pf-t--global--text--color--inverse);
+  --#{$button}--m-control--m-expanded--after--BorderBottomWidth: var(--pf-t--global--border--width--200);
+  --#{$button}--m-control--m-expanded--after--BorderBottomColor: var(--pf-t--global--color--brand--hover);
   --#{$button}--m-small--FontSize: var(--#{$pf-global}--FontSize--sm);
 
   // CTA Button
-  --#{$button}--m-display-lg--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$button}--m-display-lg--PaddingRight: var(--#{$pf-global}--spacer--xl);
-  --#{$button}--m-display-lg--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$button}--m-display-lg--PaddingLeft: var(--#{$pf-global}--spacer--xl);
-  --#{$button}--m-display-lg--FontWeight: var(--#{$pf-global}--FontWeight--bold);
-  --#{$button}--m-link--m-display-lg--FontSize: var(--#{$pf-global}--FontSize--lg);
+  --#{$button}--m-display-lg--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$button}--m-display-lg--PaddingRight: var(--pf-t--global--spacer--xl);
+  --#{$button}--m-display-lg--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$button}--m-display-lg--PaddingLeft: var(--pf-t--global--spacer--xl);
+  --#{$button}--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --#{$button}--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
 
   // Styles for an icon in button
-  --#{$button}__icon--m-start--MarginRight: var(--#{$pf-global}--spacer--xs);
-  --#{$button}__icon--m-end--MarginLeft: var(--#{$pf-global}--spacer--xs);
+  --#{$button}__icon--m-start--MarginRight: var(--pf-t--global--spacer--xs);
+  --#{$button}__icon--m-end--MarginLeft: var(--pf-t--global--spacer--xs);
 
   // Progress
   --#{$button}__progress--width: calc(var(--#{$pf-global}--icon--FontSize--md) + var(--#{$pf-global}--spacer--sm)); // matches medium spinner diameter plus a spacer
@@ -190,23 +197,23 @@
   --#{$button}__progress--TranslateY: -50%;
   --#{$button}__progress--TranslateX: 0;
   --#{$button}__progress--Top: 50%;
-  --#{$button}__progress--Left: var(--#{$pf-global}--spacer--md);
+  --#{$button}__progress--Left: var(--pf-t--global--spacer--md);
   --#{$button}--m-progress--TransitionProperty: padding;
   --#{$button}--m-progress--TransitionDuration: var(--#{$pf-global}--TransitionDuration);
-  --#{$button}--m-progress--PaddingRight: calc(var(--#{$pf-global}--spacer--md) + var(--#{$button}__progress--width) / 2);
-  --#{$button}--m-progress--PaddingLeft: calc(var(--#{$pf-global}--spacer--md) + var(--#{$button}__progress--width) / 2);
-  --#{$button}--m-in-progress--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$button}--m-in-progress--PaddingLeft: calc(var(--#{$pf-global}--spacer--md) + var(--#{$button}__progress--width));
-  --#{$button}--m-in-progress--m-plain--Color: var(--#{$pf-global}--primary-color--100);
+  --#{$button}--m-progress--PaddingRight: calc(var(--pf-t--global--spacer--md) + var(--#{$button}__progress--width) / 2);
+  --#{$button}--m-progress--PaddingLeft: calc(var(--pf-t--global--spacer--md) + var(--#{$button}__progress--width) / 2);
+  --#{$button}--m-in-progress--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$button}--m-in-progress--PaddingLeft: calc(var(--pf-t--global--spacer--md) + var(--#{$button}__progress--width));
+  --#{$button}--m-in-progress--m-plain--Color: var(--pf-t--global--color--brand--default);
   --#{$button}--m-in-progress--m-plain__progress--Left: 50%;
   --#{$button}--m-in-progress--m-plain__progress--TranslateX: -50%;
 
   // Count
   --#{$button}__count--MarginLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$button}--disabled__c-badge--Color: var(--#{$pf-global}--Color--dark-100);
-  --#{$button}--disabled__c-badge--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-  --#{$button}--m-primary__c-badge--BorderColor: var(--#{$pf-global}--BorderColor--300);
-  --#{$button}--m-primary__c-badge--BorderWidth: var(--#{$pf-global}--BorderWidth--sm); // used only for primary, unread, not disabled
+  --#{$button}--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled--default);
+  --#{$button}--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --#{$button}--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$button}--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--300); // used only for primary, unread, not disabled
 
   position: relative;
   display: inline-block;
@@ -233,7 +240,7 @@
     content: "";
     border: var(--#{$button}--after--BorderWidth) solid;
     border-color: var(--#{$button}--after--BorderColor);
-    border-radius: var(--#{$button}--after--BorderRadius);
+    border-radius: var(--#{$button}--BorderRadius);
   }
 
   &:hover {
@@ -288,11 +295,11 @@
       --#{$button}--m-primary--BackgroundColor: var(--#{$button}--m-primary--focus--BackgroundColor);
     }
 
-    &:active,
-    &.pf-m-active {
-      --#{$button}--m-primary--Color: var(--#{$button}--m-primary--active--Color);
-      --#{$button}--m-primary--BackgroundColor: var(--#{$button}--m-primary--active--BackgroundColor);
-    }
+    // &:active,
+    // &.pf-m-active {
+    //   --#{$button}--m-primary--Color: var(--#{$button}--m-primary--active--Color);
+    //   --#{$button}--m-primary--BackgroundColor: var(--#{$button}--m-primary--active--BackgroundColor);
+    // }
 
     .#{$badge}.pf-m-unread {
       border: var(--#{$button}--m-primary__c-badge--BorderWidth) solid var(--#{$button}--m-primary__c-badge--BorderColor);
@@ -362,6 +369,12 @@
     background-color: var(--#{$button}--m-link--BackgroundColor);
 
     &:not(.pf-m-inline) {
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: var(--pf-t--global--link--text-decoration--hover); // TODO use variable?
+      }
+
       &:hover {
         --#{$button}--m-link--Color: var(--#{$button}--m-link--hover--Color);
         --#{$button}--m-link--BackgroundColor: var(--#{$button}--m-link--hover--BackgroundColor);
@@ -394,8 +407,6 @@
 
       &:hover {
         --#{$button}--m-link--Color: var(--#{$button}--m-link--m-inline--hover--Color);
-
-        text-decoration: var(--#{$button}--m-link--m-inline--hover--TextDecoration);
       }
     }
 
@@ -555,17 +566,26 @@
   &.pf-m-plain {
     --#{$button}--disabled--Color: var(--#{$button}--m-plain--disabled--Color);
     --#{$button}--disabled--BackgroundColor: var(--#{$button}--m-plain--disabled--BackgroundColor);
+    --#{$button}--PaddingTop: var(--#{$button}--m-plain--PaddingTop);
+    --#{$button}--PaddingRight: var(--#{$button}--m-plain--PaddingRight);
+    --#{$button}--PaddingBottom: var(--#{$button}--m-plain--PaddingBottom);
+    --#{$button}--PaddingLeft: var(--#{$button}--m-plain--PaddingLeft);
+    --#{$button}--BorderRadius: var(--#{$button}--m-plain--BorderRadius);
 
     color: var(--#{$button}--m-plain--Color);
     background-color: var(--#{$button}--m-plain--BackgroundColor);
 
+
     &.pf-m-no-padding {
       padding: 0;
     }
 
-    &:hover {
-      --#{$button}--m-plain--Color: var(--#{$button}--m-plain--hover--Color);
+    &:hover,
+    &:focus,
+    &:active {
       --#{$button}--m-plain--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);
+
+      mix-blend-mode: var(--pf-t--global--background--color--action--plain--hover--blend);
     }
 
     &:active,
@@ -666,9 +686,9 @@
   margin-inline-start: var(--#{$button}__count--MarginLeft);
 }
 
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/button";
+// // stylelint-disable no-invalid-position-at-import-rule
+// @import "themes/dark/button";
 
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-button;
-}
+// @include pf-v5-theme-dark {
+//   @include pf-v5-theme-dark-button;
+// }

package/components/Check/check.css

@@ -5,8 +5,7 @@
   --pf-v5-c-check__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-check__label--FontSize: var(--pf-v5-global--FontSize--md);
   --pf-v5-c-check__label--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-check__input--TranslateY: calc((var(--pf-v5-c-check__label--LineHeight) * var(--pf-v5-c-check__label--FontSize) / 2 ) - 50%);
-  --pf-v5-c-check__input--TranslateY--moz: var(--pf-v5-c-check__input--TranslateY);
+  --pf-v5-c-check__input--TranslateY--moz: 5px;
   --pf-v5-c-check__description--FontSize: var(--pf-v5-global--FontSize--sm);
   --pf-v5-c-check__description--Color: var(--pf-v5-global--Color--200);
   --pf-v5-c-check__body--MarginTop: var(--pf-v5-global--spacer--sm);
@@ -16,21 +15,15 @@
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: var(--pf-v5-c-check--GridGap);
-  align-items: baseline;
 }
 .pf-v5-c-check.pf-m-standalone {
   --pf-v5-c-check--GridGap: 0;
-  --pf-v5-c-check__input--TranslateY: none;
+  --pf-v5-c-check__input--TranslateY--moz: 0;
   display: inline-grid;
 }
 
-.pf-v5-c-check__input {
-  align-self: start;
-  -moz-transform: translateY(var(--pf-v5-c-check__input--TranslateY--moz));
-  transform: translateY(var(--pf-v5-c-check__input--TranslateY));
-}
-
 .pf-v5-c-check__label {
+  align-self: baseline;
   font-size: var(--pf-v5-c-check__label--FontSize);
   font-weight: var(--pf-v5-c-check__label--FontWeight);
   line-height: var(--pf-v5-c-check__label--LineHeight);
@@ -48,6 +41,11 @@
   margin-block-start: var(--pf-v5-c-check__body--MarginTop);
 }
 
+.pf-v5-c-check__input {
+  align-self: baseline;
+  -moz-transform: translateY(var(--pf-v5-c-check__input--TranslateY--moz));
+}
+
 .pf-v5-c-check__label,
 .pf-v5-c-check__input {
   justify-self: start;

package/components/Check/check.scss

@@ -7,8 +7,7 @@
   --#{$check}__label--FontWeight: var(--#{$pf-global}--FontWeight--normal);
   --#{$check}__label--FontSize: var(--#{$pf-global}--FontSize--md);
   --#{$check}__label--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$check}__input--TranslateY: calc((var(--pf-v5-c-check__label--LineHeight) * var(--pf-v5-c-check__label--FontSize) / 2 ) - 50%); // find height of single label, divide by two, offset by 50% of own height
-  --#{$check}__input--TranslateY--moz: var(--#{$check}__input--TranslateY); // remove at breaking change
+  --#{$check}__input--TranslateY--moz: 5px;
   --#{$check}__description--FontSize: var(--#{$pf-global}--FontSize--sm);
   --#{$check}__description--Color: var(--#{$pf-global}--Color--200);
   --#{$check}__body--MarginTop: var(--#{$pf-global}--spacer--sm);
@@ -21,28 +20,17 @@
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: var(--#{$check}--GridGap);
-  align-items: baseline;
 
   &.pf-m-standalone {
     --#{$check}--GridGap: 0;
-    --#{$check}__input--TranslateY: none;
+    --#{$check}__input--TranslateY--moz: 0;
 
     display: inline-grid;
   }
 }
 
-.#{$check}__input {
-  align-self: start;
-
-  // stylelint-disable property-no-vendor-prefix
-  -moz-transform: translateY(var(--#{$check}__input--TranslateY--moz)); // remove at breaking change - no longer needed
-  // stylelint-enable
-
-  // find height of single label, divide by two, offset by 50% of own height
-  transform: translateY(var(--#{$check}__input--TranslateY));
-}
-
 .#{$check}__label {
+  align-self: baseline;
   font-size: var(--#{$check}__label--FontSize);
   font-weight: var(--#{$check}__label--FontWeight);
   line-height: var(--#{$check}__label--LineHeight);
@@ -60,6 +48,13 @@
   margin-block-start: var(--#{$check}__body--MarginTop);
 }
 
+// stylelint-disable property-no-vendor-prefix
+.#{$check}__input {
+  align-self: baseline;
+  -moz-transform: translateY(var(--#{$check}__input--TranslateY--moz));
+}
+// stylelint-enable
+
 .#{$check}__label,
 .#{$check}__input {
   justify-self: start;