@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.71

package/components/ProgressStepper/progress-stepper.scss

@@ -57,7 +57,8 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
 }
 
 // Progress stepper is vertically oriented by default
-.#{$progress-stepper} {
+:where(:root),
+:where(.#{$progress-stepper}) {
   // Vertical - these are the default settings
   --#{$progress-stepper}--m-vertical--GridAutoFlow: row;
   --#{$progress-stepper}--m-vertical--GridTemplateColumns: auto 1fr;
@@ -65,21 +66,23 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
   --#{$progress-stepper}--m-vertical__step-connector--before--Left: calc(var(--#{$progress-stepper}__step-icon--Width) / 2);
   --#{$progress-stepper}--m-vertical__step-connector--before--Width: auto;
   --#{$progress-stepper}--m-vertical__step-connector--before--Height: 100%;
-  --#{$progress-stepper}--m-vertical__step-connector--before--BorderRightWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$progress-stepper}--m-vertical__step-connector--before--BorderRightColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$progress-stepper}--m-vertical__step-connector--before--BorderRightWidth: var(--pf-t--global--border--width--box--default);
+  --#{$progress-stepper}--m-vertical__step-connector--before--BorderRightColor: var(--pf-t--global--border--color--default);
   --#{$progress-stepper}--m-vertical__step-connector--before--BorderBottomWidth: 0;
   --#{$progress-stepper}--m-vertical__step-connector--before--BorderBottomColor: transparent;
   --#{$progress-stepper}--m-vertical__step-connector--before--Transform: translateX(-50%);
-  --#{$progress-stepper}--m-vertical__step-main--MarginTop: var(--#{$pf-global}--spacer--xs);
+  --#{$progress-stepper}--m-vertical__step-main--MarginTop: 0px; // needs px for calc
   --#{$progress-stepper}--m-vertical__step-main--MarginRight: 0;
-  --#{$progress-stepper}--m-vertical__step-main--MarginBottom: var(--#{$pf-global}--spacer--xl);
-  --#{$progress-stepper}--m-vertical__step-main--MarginLeft: var(--#{$pf-global}--spacer--xs);
+  --#{$progress-stepper}--m-vertical__step-main--MarginBottom: var(--pf-t--global--spacer--xl);
+  --#{$progress-stepper}--m-vertical__step-main--MarginLeft: var(--pf-t--global--spacer--sm);
 
   // Compact, vertical
   --#{$progress-stepper}--m-vertical--m-compact--GridTemplateColumns: 1fr;
-  --#{$progress-stepper}--m-vertical--m-compact__step-connector--PaddingBottom: var(--#{$pf-global}--spacer--sm);
+  --#{$progress-stepper}--m-vertical--m-compact__step-connector--PaddingBottom: var(--pf-t--global--spacer--sm);
   --#{$progress-stepper}--m-vertical--m-compact__step-connector--GridRow: auto;
+  --#{$progress-stepper}--m-vertical--m-compact__step-main--MarginTop: 0;
   --#{$progress-stepper}--m-vertical--m-compact__step-main--MarginRight: 0;
+  --#{$progress-stepper}--m-vertical--m-compact__step-main--MarginLeft: 0;
 
   // Center, vertical
   --#{$progress-stepper}--m-vertical--m-center__step-main--MarginRight: 0;
@@ -94,11 +97,11 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
   --#{$progress-stepper}--m-horizontal__step-connector--before--Height: auto;
   --#{$progress-stepper}--m-horizontal__step-connector--before--BorderRightWidth: 0;
   --#{$progress-stepper}--m-horizontal__step-connector--before--BorderRightColor: unset;
-  --#{$progress-stepper}--m-horizontal__step-connector--before--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$progress-stepper}--m-horizontal__step-connector--before--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$progress-stepper}--m-horizontal__step-connector--before--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$progress-stepper}--m-horizontal__step-connector--before--BorderBottomColor: var(--pf-t--global--border--color--default);
   --#{$progress-stepper}--m-horizontal__step-connector--before--Transform: translateY(-50%);
-  --#{$progress-stepper}--m-horizontal__step-main--MarginTop: var(--#{$pf-global}--spacer--sm);
-  --#{$progress-stepper}--m-horizontal__step-main--MarginRight: var(--#{$pf-global}--spacer--sm);
+  --#{$progress-stepper}--m-horizontal__step-main--MarginTop: var(--pf-t--global--spacer--sm);
+  --#{$progress-stepper}--m-horizontal__step-main--MarginRight: var(--pf-t--global--spacer--sm);
   --#{$progress-stepper}--m-horizontal__step-main--MarginBottom: 0;
   --#{$progress-stepper}--m-horizontal__step-main--MarginLeft: 0;
 
@@ -110,12 +113,12 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
   // Compact
   --#{$progress-stepper}--m-compact--GridAutoFlow: row;
   --#{$progress-stepper}--m-compact__step-main--MarginTop: 0;
-  --#{$progress-stepper}--m-compact__step-main--MarginBottom: var(--#{$pf-global}--spacer--sm);
+  --#{$progress-stepper}--m-compact__step-main--MarginBottom: var(--pf-t--global--spacer--sm);
   --#{$progress-stepper}--m-compact__step-connector--MinWidth: #{pf-size-prem(28px)};
   --#{$progress-stepper}--m-compact__step-icon--Width: #{pf-size-prem(18px)};
-  --#{$progress-stepper}--m-compact__step-icon--FontSize: var(--#{$pf-global}--icon--FontSize--sm);
-  --#{$progress-stepper}--m-compact__step-title--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$progress-stepper}--m-compact__step-title--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$progress-stepper}--m-compact__step-icon--FontSize: var(--pf-t--global--icon--size--body--sm);
+  --#{$progress-stepper}--m-compact__step-title--FontSize: var(--pf-t--global--font--size--body--lg);
+  --#{$progress-stepper}--m-compact__step-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --#{$progress-stepper}--m-compact__pficon--MarginTop: 2px;
   --#{$progress-stepper}--m-compact__fa-exclamation-triangle--MarginTop: -3px;
 
@@ -123,8 +126,8 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
   --#{$progress-stepper}--m-center__step-connector--before--Left: 50%;
   --#{$progress-stepper}--m-center--GridTemplateColumns: 1fr;
   --#{$progress-stepper}--m-center__step-connector--JustifyContent: center;
-  --#{$progress-stepper}--m-center__step-main--MarginRight: var(--#{$pf-global}--spacer--xs);
-  --#{$progress-stepper}--m-center__step-main--MarginLeft: var(--#{$pf-global}--spacer--xs);
+  --#{$progress-stepper}--m-center__step-main--MarginRight: var(--pf-t--global--spacer--xs);
+  --#{$progress-stepper}--m-center__step-main--MarginLeft: var(--pf-t--global--spacer--xs);
   --#{$progress-stepper}--m-center__step-main--TextAlign: center;
   --#{$progress-stepper}--m-center__step-description--MarginRight: 0;
   --#{$progress-stepper}--m-center__step-description--MarginLeft: 0;
@@ -133,53 +136,54 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
   --#{$progress-stepper}--GridTemplateRows: auto 1fr;
 
   // Step connector variables
-  --#{$progress-stepper}__step-connector--JustifyContent: start;
+  --#{$progress-stepper}__step-connector--JustifyContent: flex-start;
 
   // Step icon variables
-  --#{$progress-stepper}__step-icon--ZIndex: var(--#{$pf-global}--ZIndex--xs);
-  --#{$progress-stepper}__step-icon--Width: #{pf-size-prem(28px)};
+  --#{$progress-stepper}__step-icon--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$progress-stepper}__step-icon--Width: #{pf-size-prem(24px)};
   --#{$progress-stepper}__step-icon--Height: var(--#{$progress-stepper}__step-icon--Width);
-  --#{$progress-stepper}__step-icon--FontSize: var(--#{$pf-global}--icon--FontSize--md);
-  --#{$progress-stepper}__step-icon--Color: var(--#{$pf-global}--Color--100);
-  --#{$progress-stepper}__step-icon--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-200);
-  --#{$progress-stepper}__step-icon--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$progress-stepper}__step-icon--BorderColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$progress-stepper}__step-icon--FontSize: var(--pf-t--global--icon--size--body--default);
+  --#{$progress-stepper}__step-icon--Color: var(--pf-t--global--icon--color--regular);
+  --#{$progress-stepper}__step-icon--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$progress-stepper}__step-icon--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --#{$progress-stepper}__step-icon--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$progress-stepper}__step--m-current__step-icon--Color: var(--pf-t--global--icon--color--brand--default);
+  --#{$progress-stepper}__step--m-info__step-icon--Color: var(--pf-t--global--icon--color--status--info--default);
+  --#{$progress-stepper}__step--m-success__step-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+  --#{$progress-stepper}__step--m-warning__step-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --#{$progress-stepper}__step--m-danger__step-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --#{$progress-stepper}__step--m-custom__step-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
 
   // Icon adjustments to fix differences in alignment
   --#{$progress-stepper}__pficon--MarginTop: 3px;
-  --#{$progress-stepper}__fa-exclamation-triangle--MarginTop: -5px;
+  --#{$progress-stepper}__fa-exclamation-triangle--MarginTop: -2px;
 
   // Step Title variables
-  --#{$progress-stepper}__step-title--Color: var(--#{$pf-global}--Color--100);
-  --#{$progress-stepper}__step-title--TextAlign: left;
-  --#{$progress-stepper}__step-title--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$progress-stepper}__step-title--FontWeight: var(--#{$pf-global}--FontWeight--normal);
-  --#{$progress-stepper}__step--m-current__step-title--FontWeight: var(--#{$pf-global}--FontWeight--bold);
-  --#{$progress-stepper}__step--m-current__step-title--Color: var(--#{$pf-global}--Color--100);
-  --#{$progress-stepper}__step--m-pending__step-title--Color: var(--#{$pf-global}--Color--200);
-  --#{$progress-stepper}__step--m-danger__step-title--Color: var(--#{$pf-global}--danger-color--100);
+  --#{$progress-stepper}__step-title--Color: var(--pf-t--global--text--color--regular);
+  --#{$progress-stepper}__step-title--TextAlign: start;
+  --#{$progress-stepper}__step-title--FontSize: var(--pf-t--global--font--size--body--lg);
+  --#{$progress-stepper}__step-title--FontWeight: var(--pf-t--global--font--weight--body);
+  --#{$progress-stepper}__step--m-current__step-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --#{$progress-stepper}__step--m-current__step-title--Color: var(--pf-t--global--text--color--regular);
+  --#{$progress-stepper}__step--m-pending__step-title--Color: var(--pf-t--global--text--color--subtle);
+  --#{$progress-stepper}__step--m-danger__step-title--Color: var(--pf-t--global--text--color--status--danger--default);
 
   // Help text variables for the step title
-  --#{$progress-stepper}__step-title--m-help-text--TextDecorationColor: var(--#{$pf-global}--BorderColor--200);
-  --#{$progress-stepper}__step-title--m-help-text--TextDecorationThickness: var(--#{$pf-global}--BorderWidth--sm);
+  --#{$progress-stepper}__step-title--m-help-text--PaddingInlineStart: 0;
+  --#{$progress-stepper}__step-title--m-help-text--PaddingInlineEnd: 0;
+  --#{$progress-stepper}__step-title--m-help-text--TextDecorationColor: currentcolor;
+  --#{$progress-stepper}__step-title--m-help-text--TextDecorationThickness: var(--pf-t--global--link--text-decoration);
   --#{$progress-stepper}__step-title--m-help-text--TextUnderlineOffset: #{pf-size-prem(4px)};
-  --#{$progress-stepper}__step-title--m-help-text--hover--TextDecorationColor: var(--#{$pf-global}--Color--100);
-  --#{$progress-stepper}__step-title--m-help-text--focus--TextDecorationColor: var(--#{$pf-global}--Color--100);
-  --#{$progress-stepper}__step-title--m-help-text--hover--Color: var(--#{$pf-global}--Color--100);
-  --#{$progress-stepper}__step-title--m-help-text--focus--Color: var(--#{$pf-global}--Color--100);
+  --#{$progress-stepper}__step-title--m-help-text--hover--Color: var(--pf-t--global--text--color--brand--hover);
 
   // Help text variables the step title for failure state
-  --#{$progress-stepper}__step--m-danger__step-title--m-help-text--hover--Color: var(--#{$pf-global}--danger-color--200);
-  --#{$progress-stepper}__step--m-danger__step-title--m-help-text--focus--Color: var(--#{$pf-global}--danger-color--200);
-  --#{$progress-stepper}__step--m-danger__step-title--m-help-text--TextDecorationColor: var(--#{$pf-global}--danger-color--100);
-  --#{$progress-stepper}__step--m-danger__step-title--m-help-text--hover--TextDecorationColor: var(--#{$pf-global}--danger-color--200);
-  --#{$progress-stepper}__step--m-danger__step-title--m-help-text--focus--TextDecorationColor: var(--#{$pf-global}--danger-color--200);
+  --#{$progress-stepper}__step--m-danger__step-title--m-help-text--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
 
   // Step Description variables
-  --#{$progress-stepper}__step-description--MarginTop: var(--#{$pf-global}--spacer--xs);
-  --#{$progress-stepper}__step-description--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$progress-stepper}__step-description--Color: var(--#{$pf-global}--Color--200);
-  --#{$progress-stepper}__step-description--TextAlign: left;
+  --#{$progress-stepper}__step-description--MarginTop: var(--pf-t--global--spacer--xs);
+  --#{$progress-stepper}__step-description--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$progress-stepper}__step-description--Color: var(--pf-t--global--text--color--subtle);
+  --#{$progress-stepper}__step-description--TextAlign: start;
 
   // Vertical by default
   @include pf-v5-c-progress-stepper--m-vertical;
@@ -188,7 +192,9 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
   @media screen and (min-width: $pf-v5-global--breakpoint--md) {
     @include pf-v5-c-progress-stepper--m-horizontal;
   }
+}
 
+.#{$progress-stepper} {
   position: relative;
   display: grid;
   grid-template-rows: var(--#{$progress-stepper}--GridTemplateRows);
@@ -216,7 +222,7 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
     }
 
     .#{$progress-stepper}__step:not(:last-of-type) > .#{$progress-stepper}__step-connector::before {
-      left: var(--#{$progress-stepper}--m-center__step-connector--before--Left);
+     inset-inline-start: var(--#{$progress-stepper}--m-center__step-connector--before--Left);
     }
 
     // If not compact variant, swap borders from connector to main
@@ -240,8 +246,9 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
     --#{$progress-stepper}__step--m-current__step-title--FontWeight: var(--#{$progress-stepper}--m-compact__step-title--FontWeight);
     --#{$progress-stepper}__pficon--MarginTop: var(--#{$progress-stepper}--m-compact__pficon--MarginTop);
     --#{$progress-stepper}__fa-exclamation-triangle--MarginTop: var(--#{$progress-stepper}--m-compact__fa-exclamation-triangle--MarginTop);
-    --#{$progress-stepper}--m-vertical__step-main--MarginLeft: var(--#{$progress-stepper}--m-vertical--m-compact__step-main--MarginLeft);
+    --#{$progress-stepper}--m-vertical__step-main--MarginTop: var(--#{$progress-stepper}--m-vertical--m-compact__step-main--MarginTop);
     --#{$progress-stepper}--m-vertical__step-main--MarginRight: var(--#{$progress-stepper}--m-vertical--m-compact__step-main--MarginRight);
+    --#{$progress-stepper}--m-vertical__step-main--MarginLeft: var(--#{$progress-stepper}--m-vertical--m-compact__step-main--MarginLeft);
 
     display: inline-grid;
     grid-template-columns: var(--#{$progress-stepper}--m-compact--GridTemplateColumns);
@@ -250,11 +257,11 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
     .#{$progress-stepper}__step-connector {
       grid-row: var(--#{$progress-stepper}--m-compact__step-connector--GridRow);
       min-width: var(--#{$progress-stepper}--m-compact__step-connector--MinWidth);
-      padding-bottom: var(--#{$progress-stepper}--m-compact__step-connector--PaddingBottom);
+      padding-block-end: var(--#{$progress-stepper}--m-compact__step-connector--PaddingBottom);
     }
 
     .#{$progress-stepper}__step-main {
-      margin-bottom: var(--#{$progress-stepper}--m-compact__step-main--MarginBottom);
+      margin-block-end: var(--#{$progress-stepper}--m-compact__step-main--MarginBottom);
     }
 
     .#{$progress-stepper}__step:not(.pf-m-current) .#{$progress-stepper}__step-main {
@@ -262,12 +269,10 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
     }
 
     // For this compact variant only, move the main content for the current step to above the icons
-    // stylelint-disable
     .#{$progress-stepper}__step.pf-m-current .#{$progress-stepper}__step-main {
-        grid-column: 1/-1;
         grid-row: 1/2;
+        grid-column: 1/-1;
       }
-    // stylelint-enable
 
     .#{$progress-stepper}__step-description {
       display: none;
@@ -283,6 +288,7 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
   &.pf-m-current {
     --#{$progress-stepper}__step-title--FontWeight: var(--#{$progress-stepper}__step--m-current__step-title--FontWeight);
     --#{$progress-stepper}__step-title--Color: var(--#{$progress-stepper}__step--m-current__step-title--Color);
+    --#{$progress-stepper}__step-icon--Color: var(--#{$progress-stepper}__step--m-current__step-icon--Color);
   }
 
   &.pf-m-pending {
@@ -290,27 +296,27 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
   }
 
   &.pf-m-success {
-    --#{$progress-stepper}__step-icon--Color: var(--#{$pf-global}--success-color--100);
+    --#{$progress-stepper}__step-icon--Color: var(--#{$progress-stepper}__step--m-success__step-icon--Color);
   }
 
   &.pf-m-danger {
-    --#{$progress-stepper}__step-icon--Color: var(--#{$pf-global}--danger-color--100);
+    --#{$progress-stepper}__step-icon--Color: var(--#{$progress-stepper}__step--m-danger__step-icon--Color);
     --#{$progress-stepper}__step-title--Color: var(--#{$progress-stepper}__step--m-danger__step-title--Color);
 
     // Help text variables for failure state
     --#{$progress-stepper}__step-title--m-help-text--hover--Color: var(--#{$progress-stepper}__step--m-danger__step-title--m-help-text--hover--Color);
-    --#{$progress-stepper}__step-title--m-help-text--focus--Color: var(--#{$progress-stepper}__step--m-danger__step-title--m-help-text--focus--Color);
-    --#{$progress-stepper}__step-title--m-help-text--TextDecorationColor: var(--#{$progress-stepper}__step--m-danger__step-title--m-help-text--TextDecorationColor);
-    --#{$progress-stepper}__step-title--m-help-text--hover--TextDecorationColor: var(--#{$progress-stepper}__step--m-danger__step-title--m-help-text--hover--TextDecorationColor);
-    --#{$progress-stepper}__step-title--m-help-text--focus--TextDecorationColor: var(--#{$progress-stepper}__step--m-danger__step-title--m-help-text--focus--TextDecorationColor);
   }
 
   &.pf-m-warning {
-    --#{$progress-stepper}__step-icon--Color: var(--#{$pf-global}--warning-color--100);
+    --#{$progress-stepper}__step-icon--Color: var(--#{$progress-stepper}__step--m-warning__step-icon--Color);
   }
 
   &.pf-m-info {
-    --#{$progress-stepper}__step-icon--Color: var(--#{$pf-global}--info-color--100);
+    --#{$progress-stepper}__step-icon--Color: var(--#{$progress-stepper}__step--m-info__step-icon--Color);
+  }
+
+  &.pf-m-custom {
+    --#{$progress-stepper}__step-icon--Color: var(--#{$progress-stepper}__step--m-custom__step-icon--Color);
   }
 
   &:last-child {
@@ -327,13 +333,13 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
 
   .#{$progress-stepper}__step:not(:last-of-type) > &::before {
     position: absolute;
-    top: var(--#{$progress-stepper}__step-connector--before--Top); // half the height
-    left: var(--#{$progress-stepper}__step-connector--before--Left);
+    inset-block-start: var(--#{$progress-stepper}__step-connector--before--Top); // half the height
+    inset-inline-start: var(--#{$progress-stepper}__step-connector--before--Left);
     width: var(--#{$progress-stepper}__step-connector--before--Width);
     height: var(--#{$progress-stepper}__step-connector--before--Height);
     content: "";
-    border-right: var(--#{$progress-stepper}__step-connector--before--BorderRightWidth) solid var(--#{$progress-stepper}__step-connector--before--BorderRightColor);
-    border-bottom: var(--#{$progress-stepper}__step-connector--before--BorderBottomWidth) solid var(--#{$progress-stepper}__step-connector--before--BorderBottomColor);
+    border-block-end: var(--#{$progress-stepper}__step-connector--before--BorderBottomWidth) solid var(--#{$progress-stepper}__step-connector--before--BorderBottomColor);
+    border-inline-end: var(--#{$progress-stepper}__step-connector--before--BorderRightWidth) solid var(--#{$progress-stepper}__step-connector--before--BorderRightColor);
     transform: var(--#{$progress-stepper}__step-connector--before--Transform);
   }
 }
@@ -344,7 +350,7 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--#{$progress-stepper}__step-icon--Width);
+  min-width: var(--#{$progress-stepper}__step-icon--Width);
   height: var(--#{$progress-stepper}__step-icon--Height);
   font-size: var(--#{$progress-stepper}__step-icon--FontSize);
   color: var(--#{$progress-stepper}__step-icon--Color);
@@ -355,12 +361,12 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
   // Align pficons with the font awesome icons
   // stylelint-disable
   .pf-v5-pficon {
-    margin-top: var(--#{$progress-stepper}__pficon--MarginTop);
+    margin-block-start: var(--#{$progress-stepper}__pficon--MarginTop);
   }
 
   // Push the triangle up to fit inside the circle
   .fa-exclamation-triangle {
-    margin-top: var(--#{$progress-stepper}__fa-exclamation-triangle--MarginTop);
+    margin-block-start: var(--#{$progress-stepper}__fa-exclamation-triangle--MarginTop);
   }
   // stylelint-enable
 }
@@ -368,18 +374,21 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
 // Step main
 .#{$progress-stepper}__step-main {
   min-width: 0;
-  margin: var(--#{$progress-stepper}__step-main--MarginTop) var(--#{$progress-stepper}__step-main--MarginRight) var(--#{$progress-stepper}__step-main--MarginBottom) var(--#{$progress-stepper}__step-main--MarginLeft);
+  margin-block-start: var(--#{$progress-stepper}__step-main--MarginTop);
+  margin-block-end: var(--#{$progress-stepper}__step-main--MarginBottom);
+  margin-inline-start: var(--#{$progress-stepper}__step-main--MarginLeft);
+  margin-inline-end: var(--#{$progress-stepper}__step-main--MarginRight);
   text-align: var(--#{$progress-stepper}--step-main--TextAlign, auto);
   overflow-wrap: anywhere;
 
   // Draw a new border for vertical alignment using step main
   .#{$progress-stepper}__step:not(:last-of-type) > &::before {
     position: absolute;
-    top: calc(100% + var(--#{$progress-stepper}__step-main--MarginTop));
-    left: calc(50% - calc(var(--#{$progress-stepper}__step-connector--before--BorderRightWidth) / 2));
+    inset-block-start: calc(100% + var(--#{$progress-stepper}__step-main--MarginTop));
+    inset-inline-start: calc(50% - calc(var(--#{$progress-stepper}__step-connector--before--BorderRightWidth) / 2));
     width: auto;
     height: calc(var(--#{$progress-stepper}__step-main--MarginTop) + var(--#{$progress-stepper}__step-main--MarginBottom));
-    border-right: var(--#{$progress-stepper}__step-connector--before--BorderRightWidth) solid var(--#{$progress-stepper}__step-connector--before--BorderRightColor);
+    border-inline-end: var(--#{$progress-stepper}__step-connector--before--BorderRightWidth) solid var(--#{$progress-stepper}__step-connector--before--BorderRightColor);
   }
 }
 
@@ -389,10 +398,12 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
   font-weight: var(--#{$progress-stepper}__step-title--FontWeight);
   color: var(--#{$progress-stepper}__step-title--Color);
   text-align: var(--#{$progress-stepper}__step-title--TextAlign);
-  background:none;
+  background: none;
   border: 0;
 
   &.pf-m-help-text {
+    padding-inline-start: var(--#{$progress-stepper}__step-title--m-help-text--PaddingInlineStart);
+    padding-inline-end: var(--#{$progress-stepper}__step-title--m-help-text--PaddingInlineEnd);
     text-decoration: underline;
     text-decoration-thickness: var(--#{$progress-stepper}__step-title--m-help-text--TextDecorationThickness);
     text-decoration-style: dashed;
@@ -400,21 +411,16 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
     text-underline-offset: var(--#{$progress-stepper}__step-title--m-help-text--TextUnderlineOffset);
     cursor: pointer;
 
-    &:hover {
-      --#{$progress-stepper}__step-title--Color: var(--#{$progress-stepper}__step-title--m-help-text--hover--Color);
-      --#{$progress-stepper}__step-title--m-help-text--TextDecorationColor: var(--#{$progress-stepper}__step-title--m-help-text--hover--TextDecorationColor);
-    }
-
+    &:hover,
     &:focus {
-      --#{$progress-stepper}__step-title--Color: var(--#{$progress-stepper}__step-title--m-help-text--focus--Color);
-      --#{$progress-stepper}__step-title--m-help-text--TextDecorationColor: var(--#{$progress-stepper}__step-title--m-help-text--focus--TextDecorationColor);
+      --#{$progress-stepper}__step-title--Color: var(--#{$progress-stepper}__step-title--m-help-text--hover--Color);
     }
   }
 }
 
 // Step description
 .#{$progress-stepper}__step-description {
-  margin-top: var(--#{$progress-stepper}__step-description--MarginTop);
+  margin-block-start: var(--#{$progress-stepper}__step-description--MarginTop);
   font-size: var(--#{$progress-stepper}__step-description--FontSize);
   color: var(--#{$progress-stepper}__step-description--Color);
   text-align: var(--#{$progress-stepper}__step-description--TextAlign);

package/components/Radio/radio.css

@@ -1,42 +1,49 @@
+:root,
 .pf-v5-c-radio {
-  --pf-v5-c-radio--GridGap: var(--pf-v5-global--spacer--xs) var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-radio__label--disabled--Color: var(--pf-v5-global--disabled-color--100);
-  --pf-v5-c-radio__label--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-radio__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-radio__label--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-radio__label--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-radio__input--TranslateY--moz: 5px;
+  --pf-v5-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
+  --pf-v5-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default);
+  --pf-v5-c-radio__label--disabled--Color: var(--pf-t--global--text--color--disabled);
+  --pf-v5-c-radio__label--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-radio__label--FontWeight: var(--pf-t--global--font--weight--body);
+  --pf-v5-c-radio__label--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v5-c-radio__label--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v5-c-radio__input--TranslateY: calc((var(--pf-v5-c-radio__label--LineHeight) * var(--pf-v5-c-radio__label--FontSize) / 2 ) - 50%);
   --pf-v5-c-radio__input--first-child--MarginLeft: 0.0625rem;
   --pf-v5-c-radio__input--last-child--MarginRight: 0.0625rem;
-  --pf-v5-c-radio__description--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-radio__description--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-radio__body--MarginTop: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-radio__description--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-radio__description--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-radio__body--MarginTop: var(--pf-t--global--spacer--sm);
+}
+
+.pf-v5-c-radio {
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: var(--pf-v5-c-radio--GridGap);
   align-items: baseline;
+  accent-color: var(--pf-v5-c-radio--AccentColor);
 }
 .pf-v5-c-radio.pf-m-standalone {
   --pf-v5-c-radio--GridGap: 0;
-  --pf-v5-c-radio__input--TranslateY--moz: 0;
-  width: auto;
-}
-
-.pf-v5-c-radio__label {
-  font-size: var(--pf-v5-c-radio__label--FontSize);
-  font-weight: var(--pf-v5-c-radio__label--FontWeight);
-  line-height: var(--pf-v5-c-radio__label--LineHeight);
-  color: var(--pf-v5-c-radio__label--Color);
+  --pf-v5-c-radio__input--TranslateY: none;
+  display: inline-grid;
 }
 
 .pf-v5-c-radio__input {
-  -moz-transform: translateY(var(--pf-v5-c-radio__input--TranslateY--moz));
+  align-self: start;
+  transform: translateY(var(--pf-v5-c-radio__input--TranslateY));
 }
 .pf-v5-c-radio__input:first-child {
-  margin-left: var(--pf-v5-c-radio__input--first-child--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-radio__input--first-child--MarginLeft);
 }
 .pf-v5-c-radio__input:last-child {
-  margin-right: var(--pf-v5-c-radio__input--last-child--MarginRight);
+  margin-inline-end: var(--pf-v5-c-radio__input--last-child--MarginRight);
+}
+
+.pf-v5-c-radio__label {
+  font-size: var(--pf-v5-c-radio__label--FontSize);
+  font-weight: var(--pf-v5-c-radio__label--FontWeight);
+  line-height: var(--pf-v5-c-radio__label--LineHeight);
+  color: var(--pf-v5-c-radio__label--Color);
 }
 
 .pf-v5-c-radio__description {
@@ -47,7 +54,7 @@
 
 .pf-v5-c-radio__body {
   grid-column: 2;
-  margin-top: var(--pf-v5-c-radio__body--MarginTop);
+  margin-block-start: var(--pf-v5-c-radio__body--MarginTop);
 }
 
 .pf-v5-c-radio__label,

package/components/Radio/radio.scss

@@ -1,55 +1,61 @@
 // @debug $radio; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
+:root,
 .#{$radio} {
-  --#{$radio}--GridGap: var(--#{$pf-global}--spacer--xs) var(--#{$pf-global}--spacer--sm);
-  --#{$radio}__label--disabled--Color: var(--#{$pf-global}--disabled-color--100);
-  --#{$radio}__label--Color: var(--#{$pf-global}--Color--100);
-  --#{$radio}__label--FontWeight: var(--#{$pf-global}--FontWeight--normal);
-  --#{$radio}__label--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$radio}__label--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$radio}__input--TranslateY--moz: 5px;
+  --#{$radio}--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
+  --#{$radio}--AccentColor: var(--pf-t--global--icon--color--brand--default);
+  --#{$radio}__label--disabled--Color: var(--pf-t--global--text--color--disabled);
+  --#{$radio}__label--Color: var(--pf-t--global--text--color--regular);
+  --#{$radio}__label--FontWeight: var(--pf-t--global--font--weight--body);
+  --#{$radio}__label--FontSize: var(--pf-t--global--font--size--body--default);
+  --#{$radio}__label--LineHeight: var(--pf-t--global--font--line-height--body);
+  --#{$radio}__input--TranslateY: calc((var(--#{$radio}__label--LineHeight) * var(--#{$radio}__label--FontSize) / 2 ) - 50%); // find height of single label, divide by two, offset by 50% of own height
   --#{$radio}__input--first-child--MarginLeft: #{pf-size-prem(1px)};
   --#{$radio}__input--last-child--MarginRight: #{pf-size-prem(1px)};
-  --#{$radio}__description--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$radio}__description--Color: var(--#{$pf-global}--Color--200);
-  --#{$radio}__body--MarginTop: var(--#{$pf-global}--spacer--sm);
+  --#{$radio}__description--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$radio}__description--Color: var(--pf-t--global--text--color--subtle);
+  --#{$radio}__body--MarginTop: var(--pf-t--global--spacer--sm);
+}
 
+.#{$radio} {
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: var(--#{$radio}--GridGap);
   align-items: baseline;
+  accent-color: var(--#{$radio}--AccentColor);
 
   &.pf-m-standalone {
     --#{$radio}--GridGap: 0;
-    --#{$radio}__input--TranslateY--moz: 0;
+    --#{$radio}__input--TranslateY: none;
 
-    width: auto;
+    display: inline-grid;
   }
 }
 
-.#{$radio}__label {
-  font-size: var(--#{$radio}__label--FontSize);
-  font-weight: var(--#{$radio}__label--FontWeight);
-  line-height: var(--#{$radio}__label--LineHeight);
-  color: var(--#{$radio}__label--Color);
-}
-
 .#{$radio}__input {
-  // stylelint-disable property-no-vendor-prefix
-  -moz-transform: translateY(var(--#{$radio}__input--TranslateY--moz));
-  // stylelint-enable
+  align-self: start;
+
+  // find height of single label, divide by two, offset by 50% of own height
+  transform: translateY(var(--#{$radio}__input--TranslateY));
 
   // fixes a chrome issue where the left edge is cut off in a container with overflow hidden
   &:first-child {
-    margin-left: var(--#{$radio}__input--first-child--MarginLeft);
+    margin-inline-start: var(--#{$radio}__input--first-child--MarginLeft);
   }
 
   // fixes a chrome issue where the right edge is cut off in a container with overflow hidden
   &:last-child {
-    margin-right: var(--#{$radio}__input--last-child--MarginRight);
+    margin-inline-end: var(--#{$radio}__input--last-child--MarginRight);
   }
 }
 
+.#{$radio}__label {
+  font-size: var(--#{$radio}__label--FontSize);
+  font-weight: var(--#{$radio}__label--FontWeight);
+  line-height: var(--#{$radio}__label--LineHeight);
+  color: var(--#{$radio}__label--Color);
+}
+
 .#{$radio}__description {
   grid-column: 2;
   font-size: var(--#{$radio}__description--FontSize);
@@ -58,7 +64,7 @@
 
 .#{$radio}__body {
   grid-column: 2;
-  margin-top: var(--#{$radio}__body--MarginTop);
+  margin-block-start: var(--#{$radio}__body--MarginTop);
 }
 
 .#{$radio}__label,