@patternfly/patternfly 6.0.0-alpha.2 → 6.0.0-alpha.21

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,27 +197,30 @@
   --#{$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;
-  padding: var(--#{$button}--PaddingTop) var(--#{$button}--PaddingRight) var(--#{$button}--PaddingBottom) var(--#{$button}--PaddingLeft);
+  padding-block-start: var(--#{$button}--PaddingTop);
+  padding-block-end: var(--#{$button}--PaddingBottom);
+  padding-inline-start: var(--#{$button}--PaddingLeft);
+  padding-inline-end: var(--#{$button}--PaddingRight);
   font-size: var(--#{$button}--FontSize);
   font-weight: var(--#{$button}--FontWeight);
   line-height: var(--#{$button}--LineHeight);
@@ -222,15 +232,15 @@
 
   &::after {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     pointer-events: none;
     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 {
@@ -285,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);
@@ -359,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);
@@ -381,15 +397,16 @@
       --#{$button}__progress--Left: var(--#{$button}--m-link--m-inline__progress--Left);
 
       display: inline;
-      padding: var(--#{$button}--m-link--m-inline--PaddingTop) var(--#{$button}--m-link--m-inline--PaddingRight) var(--#{$button}--m-link--m-inline--PaddingBottom) var(--#{$button}--m-link--m-inline--PaddingLeft);
-      text-align: left;
+      padding-block-start: var(--#{$button}--m-link--m-inline--PaddingTop);
+      padding-block-end: var(--#{$button}--m-link--m-inline--PaddingBottom);
+      padding-inline-start: var(--#{$button}--m-link--m-inline--PaddingLeft);
+      padding-inline-end: var(--#{$button}--m-link--m-inline--PaddingRight);
+      text-align: start;
       white-space: normal;
       cursor: pointer;
 
       &:hover {
         --#{$button}--m-link--Color: var(--#{$button}--m-link--m-inline--hover--Color);
-
-        text-decoration: var(--#{$button}--m-link--m-inline--hover--TextDecoration);
       }
     }
 
@@ -509,7 +526,7 @@
       --#{$button}--m-control--after--BorderBottomColor: var(--#{$button}--m-control--hover--after--BorderBottomColor);
 
       &::after {
-        border-bottom-width: var(--#{$button}--m-control--hover--after--BorderBottomWidth);
+        border-block-end-width: var(--#{$button}--m-control--hover--after--BorderBottomWidth);
       }
     }
 
@@ -520,7 +537,7 @@
       --#{$button}--m-control--after--BorderBottomColor: var(--#{$button}--m-control--active--after--BorderBottomColor);
 
       &::after {
-        border-bottom-width: var(--#{$button}--m-control--active--after--BorderBottomWidth);
+        border-block-end-width: var(--#{$button}--m-control--active--after--BorderBottomWidth);
       }
     }
 
@@ -530,7 +547,7 @@
       --#{$button}--m-control--after--BorderBottomColor: var(--#{$button}--m-control--focus--after--BorderBottomColor);
 
       &::after {
-        border-bottom-width: var(--#{$button}--m-control--focus--after--BorderBottomWidth);
+        border-block-end-width: var(--#{$button}--m-control--focus--after--BorderBottomWidth);
       }
     }
 
@@ -540,7 +557,7 @@
       --#{$button}--m-control--after--BorderBottomColor: var(--#{$button}--m-control--m-expanded--after--BorderBottomColor);
 
       &::after {
-        border-bottom-width: var(--#{$button}--m-control--m-expanded--after--BorderBottomWidth);
+        border-block-end-width: var(--#{$button}--m-control--m-expanded--after--BorderBottomWidth);
       }
     }
   }
@@ -549,13 +566,24 @@
   &.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);
 
-    &:hover {
-      --#{$button}--m-plain--Color: var(--#{$button}--m-plain--hover--Color);
+    &.pf-m-no-padding {
+      padding: 0;
+    }
+
+    &:hover,
+    &:focus {
       --#{$button}--m-plain--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);
+
+      mix-blend-mode: var(--pf-t--global--background--color--action--plain--hover--blend);
     }
 
     &:active,
@@ -630,18 +658,18 @@
 
 .#{$button}__icon {
   &.pf-m-start {
-    margin-right: var(--#{$button}__icon--m-start--MarginRight);
+    margin-inline-end: var(--#{$button}__icon--m-start--MarginRight);
   }
 
   &.pf-m-end {
-    margin-left: var(--#{$button}__icon--m-end--MarginLeft);
+    margin-inline-start: var(--#{$button}__icon--m-end--MarginLeft);
   }
 }
 
 .#{$button}__progress {
   position: absolute;
-  top: var(--#{$button}__progress--Top);
-  left: var(--#{$button}__progress--Left);
+  inset-block-start: var(--#{$button}__progress--Top);
+  inset-inline-start: var(--#{$button}__progress--Left);
   line-height: 1;
   transform: translate(var(--#{$button}__progress--TranslateX), var(--#{$button}__progress--TranslateY));
 
@@ -653,12 +681,12 @@
 .#{$button}__count {
   display: inline-flex;
   align-items: center;
-  margin-left: var(--#{$button}__count--MarginLeft);
+  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/Button/themes/dark/button.scss

@@ -44,7 +44,7 @@
     &.pf-m-control:disabled {
       &::after {
         border: 0;
-        border-bottom: var(--#{$pf-global}--BorderWidth--sm) solid var(--#{$pf-global}--palette--black-700);
+        border-block-end: var(--#{$pf-global}--BorderWidth--sm) solid var(--#{$pf-global}--palette--black-700);
       }
     }
   }