@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.81

package/components/Progress/progress.css

@@ -1,31 +1,33 @@
+:root,
 .pf-v5-c-progress {
-  --pf-v5-c-progress--GridGap: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-progress__bar--Height: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-progress__bar--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
+  --pf-v5-c-progress--GridGap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-progress__bar--Height: var(--pf-t--global--spacer--md);
+  --pf-v5-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
   --pf-v5-c-progress__measure--m-static-width--MinWidth: 4.5ch;
-  --pf-v5-c-progress__status--Gap: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-progress__status-icon--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-progress__bar--before--Opacity: .2;
+  --pf-v5-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v5-c-progress__indicator--Height: var(--pf-v5-c-progress__bar--Height);
-  --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress__bar--before--BackgroundColor);
-  --pf-v5-c-progress__helper-text--MarginTop: calc(var(--pf-v5-global--spacer--xs) - var(--pf-v5-c-progress--GridGap));
-  --pf-v5-c-progress--m-success__bar--BackgroundColor: var(--pf-v5-global--success-color--100);
-  --pf-v5-c-progress--m-warning__bar--BackgroundColor: var(--pf-v5-global--warning-color--100);
-  --pf-v5-c-progress--m-danger__bar--BackgroundColor: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-progress--m-success__status-icon--Color: var(--pf-v5-global--success-color--100);
-  --pf-v5-c-progress--m-warning__status-icon--Color: var(--pf-v5-global--warning-color--100);
-  --pf-v5-c-progress--m-danger__status-icon--Color: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-progress--m-inside__indicator--MinWidth: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-c-progress--m-inside__measure--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-progress--m-outside__measure--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-progress--m-sm__bar--Height: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-progress--m-sm__description--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-progress--m-sm__measure--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-progress--m-lg__bar--Height: var(--pf-v5-global--spacer--lg);
+  --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v5-c-progress__helper-text--MarginTop: calc(var(--pf-t--global--spacer--sm) - var(--pf-v5-c-progress--GridGap));
+  --pf-v5-c-progress--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
+  --pf-v5-c-progress--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
+  --pf-v5-c-progress--m-danger__indicator--BackgroundColor: var(--pf-t--global--color--status--danger--default);
+  --pf-v5-c-progress--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+  --pf-v5-c-progress--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --pf-v5-c-progress--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --pf-v5-c-progress--m-inside__indicator--MinWidth: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-progress--m-inside__measure--Color: var(--pf-t--global--text--color--on-brand--default);
+  --pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-success--default);
+  --pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-warning--default);
+  --pf-v5-c-progress--m-danger--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-danger--default);
+  --pf-v5-c-progress--m-inside__measure--FontSize: var(--pf-t--global--font--size--sm);
+  --pf-v5-c-progress--m-outside__measure--FontSize: var(--pf-t--global--font--size--sm);
+  --pf-v5-c-progress--m-sm__bar--Height: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-progress--m-sm__measure--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-progress--m-lg__bar--Height: var(--pf-t--global--spacer--lg);
+}
+
+.pf-v5-c-progress {
   display: grid;
   grid-template-rows: 1fr auto;
   grid-template-columns: auto auto;
@@ -35,9 +37,6 @@
 .pf-v5-c-progress.pf-m-sm {
   --pf-v5-c-progress__bar--Height: var(--pf-v5-c-progress--m-sm__bar--Height);
 }
-.pf-v5-c-progress.pf-m-sm .pf-v5-c-progress__description {
-  font-size: var(--pf-v5-c-progress--m-sm__description--FontSize);
-}
 .pf-v5-c-progress.pf-m-sm .pf-v5-c-progress__measure {
   font-size: var(--pf-v5-c-progress--m-sm__measure--FontSize);
 }
@@ -93,18 +92,19 @@
   grid-template-columns: 1fr fit-content(50%);
 }
 .pf-v5-c-progress.pf-m-success {
-  --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-success__bar--BackgroundColor);
+  --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress--m-success__indicator--BackgroundColor);
   --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-success__status-icon--Color);
   --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-success--m-inside__measure--Color);
 }
 .pf-v5-c-progress.pf-m-warning {
-  --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-warning__bar--BackgroundColor);
+  --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress--m-warning__indicator--BackgroundColor);
   --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-warning__status-icon--Color);
   --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-warning--m-inside__measure--Color);
 }
 .pf-v5-c-progress.pf-m-danger {
-  --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-danger__bar--BackgroundColor);
+  --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress--m-danger__indicator--BackgroundColor);
   --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-danger__status-icon--Color);
+  --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-danger--m-inside__measure--Color);
 }
 
 .pf-v5-c-progress__description {
@@ -146,14 +146,6 @@
   height: var(--pf-v5-c-progress__bar--Height);
   background-color: var(--pf-v5-c-progress__bar--BackgroundColor);
 }
-.pf-v5-c-progress__bar::before {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  content: "";
-  background-color: var(--pf-v5-c-progress__bar--before--BackgroundColor);
-  opacity: var(--pf-v5-c-progress__bar--before--Opacity);
-}
 
 .pf-v5-c-progress__indicator {
   position: absolute;
@@ -165,10 +157,4 @@
   grid-row: 3/4;
   grid-column: 1/3;
   margin-block-start: var(--pf-v5-c-progress__helper-text--MarginTop);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-progress {
-  --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
-  --pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
-  --pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
 }

package/components/Progress/progress.scss

@@ -1,40 +1,40 @@
 // @debug $progress; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
+:root,
 .#{$progress} {
   // Component variables
-  --#{$progress}--GridGap: var(--#{$pf-global}--spacer--md);
-
+  --#{$progress}--GridGap: var(--pf-t--global--spacer--md);
+  
   // Element variables
-  --#{$progress}__bar--before--BackgroundColor: var(--#{$pf-global}--primary-color--100);
-  --#{$progress}__bar--Height: var(--#{$pf-global}--spacer--md);
-  --#{$progress}__bar--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100); // the bar always needs white under it so that the semi-transparent color shows correctly
+  --#{$progress}__bar--Height: var(--pf-t--global--spacer--md);
+  --#{$progress}__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default); // the bar always needs white under it so that the semi-transparent color shows correctly
   --#{$progress}__measure--m-static-width--MinWidth: 4.5ch; // 4.5 because the % character is wider than a 0
-  --#{$progress}__status--Gap: var(--#{$pf-global}--spacer--sm);
-  --#{$progress}__status-icon--Color: var(--#{$pf-global}--Color--100); // the status icon default color is the default text color
-  --#{$progress}__bar--before--Opacity: .2; // one-off change in opacity to allow progress bar to automatically coordinate with the indicator color
+  --#{$progress}__status--Gap: var(--pf-t--global--spacer--sm);
+  --#{$progress}__status-icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$progress}__indicator--Height: var(--#{$progress}__bar--Height);
-  --#{$progress}__indicator--BackgroundColor: var(--#{$progress}__bar--before--BackgroundColor);
-  --#{$progress}__helper-text--MarginTop: calc(var(--#{$pf-global}--spacer--xs) - var(--#{$progress}--GridGap));
-
+  --#{$progress}__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --#{$progress}__helper-text--MarginTop: calc(var(--pf-t--global--spacer--sm) - var(--#{$progress}--GridGap));
+  
   // Modifier variables
-  --#{$progress}--m-success__bar--BackgroundColor: var(--#{$pf-global}--success-color--100);
-  --#{$progress}--m-warning__bar--BackgroundColor: var(--#{$pf-global}--warning-color--100);
-  --#{$progress}--m-danger__bar--BackgroundColor: var(--#{$pf-global}--danger-color--100);
-  --#{$progress}--m-success__status-icon--Color: var(--#{$pf-global}--success-color--100);
-  --#{$progress}--m-warning__status-icon--Color: var(--#{$pf-global}--warning-color--100);
-  --#{$progress}--m-danger__status-icon--Color: var(--#{$pf-global}--danger-color--100);
-  --#{$progress}--m-inside__indicator--MinWidth: var(--#{$pf-global}--spacer--xl);
-  --#{$progress}--m-inside__measure--Color: var(--#{$pf-global}--Color--light-100); // the measure needs to be white when moved inside the progress bar indicator
-  --#{$progress}--m-success--m-inside__measure--Color: var(--#{$pf-global}--Color--light-100); // remove at breaking change
-  --#{$progress}--m-warning--m-inside__measure--Color: var(--#{$pf-global}--Color--dark-100); // the measure still needs to be dark when in warning state
-  --#{$progress}--m-inside__measure--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$progress}--m-outside__measure--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$progress}--m-sm__bar--Height: var(--#{$pf-global}--spacer--sm);
-  --#{$progress}--m-sm__description--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$progress}--m-sm__measure--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$progress}--m-lg__bar--Height: var(--#{$pf-global}--spacer--lg);
-
-  // Component styles
+  --#{$progress}--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
+  --#{$progress}--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
+  --#{$progress}--m-danger__indicator--BackgroundColor: var(--pf-t--global--color--status--danger--default);
+  --#{$progress}--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+  --#{$progress}--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --#{$progress}--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --#{$progress}--m-inside__indicator--MinWidth: var(--pf-t--global--spacer--xl);
+  --#{$progress}--m-inside__measure--Color: var(--pf-t--global--text--color--on-brand--default);
+  --#{$progress}--m-success--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-success--default);
+  --#{$progress}--m-warning--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-warning--default);
+  --#{$progress}--m-danger--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-danger--default);
+  --#{$progress}--m-inside__measure--FontSize: var(--pf-t--global--font--size--sm);
+  --#{$progress}--m-outside__measure--FontSize: var(--pf-t--global--font--size--sm);
+  --#{$progress}--m-sm__bar--Height: var(--pf-t--global--spacer--sm);
+  --#{$progress}--m-sm__measure--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$progress}--m-lg__bar--Height: var(--pf-t--global--spacer--lg);
+}
+
+.#{$progress} {
   display: grid;
   grid-template-rows: 1fr auto;
   grid-template-columns: auto auto;
@@ -44,11 +44,7 @@
   // Modifiers
   // size modifiers
   &.pf-m-sm {
-    --#{$progress}__bar--Height: var(--#{$progress}--m-sm__bar--Height); // set height to the small height
-
-    .#{$progress}__description {
-      font-size: var(--#{$progress}--m-sm__description--FontSize);
-    }
+    --#{$progress}__bar--Height: var(--#{$progress}--m-sm__bar--Height);
 
     .#{$progress}__measure {
       font-size: var(--#{$progress}--m-sm__measure--FontSize);
@@ -56,7 +52,7 @@
   }
 
   &.pf-m-lg {
-    --#{$progress}__bar--Height: var(--#{$progress}--m-lg__bar--Height); // set height to the large height
+    --#{$progress}__bar--Height: var(--#{$progress}--m-lg__bar--Height);
   }
 
   // an inside-style progress component shows the measure inside the indicator
@@ -129,20 +125,21 @@
 
   // status modifiers
   &.pf-m-success {
-    --#{$progress}__bar--before--BackgroundColor: var(--#{$progress}--m-success__bar--BackgroundColor);
+    --#{$progress}__indicator--BackgroundColor: var(--#{$progress}--m-success__indicator--BackgroundColor);
     --#{$progress}__status-icon--Color: var(--#{$progress}--m-success__status-icon--Color);
     --#{$progress}--m-inside__measure--Color: var(--#{$progress}--m-success--m-inside__measure--Color);
   }
 
   &.pf-m-warning {
-    --#{$progress}__bar--before--BackgroundColor: var(--#{$progress}--m-warning__bar--BackgroundColor);
+    --#{$progress}__indicator--BackgroundColor: var(--#{$progress}--m-warning__indicator--BackgroundColor);
     --#{$progress}__status-icon--Color: var(--#{$progress}--m-warning__status-icon--Color);
     --#{$progress}--m-inside__measure--Color: var(--#{$progress}--m-warning--m-inside__measure--Color);
   }
-
+  
   &.pf-m-danger {
-    --#{$progress}__bar--before--BackgroundColor: var(--#{$progress}--m-danger__bar--BackgroundColor);
+    --#{$progress}__indicator--BackgroundColor: var(--#{$progress}--m-danger__indicator--BackgroundColor);
     --#{$progress}__status-icon--Color: var(--#{$progress}--m-danger__status-icon--Color);
+    --#{$progress}--m-inside__measure--Color: var(--#{$progress}--m-danger--m-inside__measure--Color);
   }
 }
 
@@ -192,15 +189,6 @@
   align-self: center;
   height: var(--#{$progress}__bar--Height);
   background-color: var(--#{$progress}__bar--BackgroundColor);
-
-  &::before {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    content: "";
-    background-color: var(--#{$progress}__bar--before--BackgroundColor);
-    opacity: var(--#{$progress}__bar--before--Opacity);
-  }
 }
 
 // the progress__indicator is the part that advances (widens) as progress is made
@@ -216,10 +204,3 @@
   grid-column: 1 / 3;
   margin-block-start: var(--#{$progress}__helper-text--MarginTop);
 }
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/progress";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-progress;
-}

package/components/ProgressStepper/progress-stepper.css

@@ -1,21 +1,22 @@
-.pf-v5-c-progress-stepper {
+:where(:root),
+:where(.pf-v5-c-progress-stepper) {
   --pf-v5-c-progress-stepper--m-vertical--GridAutoFlow: row;
   --pf-v5-c-progress-stepper--m-vertical--GridTemplateColumns: auto 1fr;
   --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Top: 0;
   --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Left: calc(var(--pf-v5-c-progress-stepper__step-icon--Width) / 2);
   --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Width: auto;
   --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Height: 100%;
-  --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor: var(--pf-v5-global--BorderColor--100);
+  --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor: var(--pf-t--global--border--color--default);
   --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth: 0;
   --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor: transparent;
   --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Transform: translateX(-50%);
-  --pf-v5-c-progress-stepper--m-vertical__step-main--MarginTop: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-progress-stepper--m-vertical__step-main--MarginTop: 0px;
   --pf-v5-c-progress-stepper--m-vertical__step-main--MarginRight: 0;
-  --pf-v5-c-progress-stepper--m-vertical__step-main--MarginBottom: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-progress-stepper--m-vertical__step-main--MarginBottom: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-t--global--spacer--sm);
   --pf-v5-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns: 1fr;
-  --pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow: auto;
   --pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginTop: 0;
   --pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight: 0;
@@ -30,11 +31,11 @@
   --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Height: auto;
   --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth: 0;
   --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor: unset;
-  --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
+  --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
+  --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor: var(--pf-t--global--border--color--default);
   --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Transform: translateY(-50%);
-  --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginRight: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginRight: var(--pf-t--global--spacer--sm);
   --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginBottom: 0;
   --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginLeft: 0;
   --pf-v5-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns: repeat(auto-fill, 1.75rem);
@@ -42,57 +43,58 @@
   --pf-v5-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow: 2;
   --pf-v5-c-progress-stepper--m-compact--GridAutoFlow: row;
   --pf-v5-c-progress-stepper--m-compact__step-main--MarginTop: 0;
-  --pf-v5-c-progress-stepper--m-compact__step-main--MarginBottom: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-progress-stepper--m-compact__step-main--MarginBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-progress-stepper--m-compact__step-connector--MinWidth: 1.75rem;
   --pf-v5-c-progress-stepper--m-compact__step-icon--Width: 1.125rem;
-  --pf-v5-c-progress-stepper--m-compact__step-icon--FontSize: var(--pf-v5-global--icon--FontSize--sm);
-  --pf-v5-c-progress-stepper--m-compact__step-title--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-progress-stepper--m-compact__step-title--FontWeight: var(--pf-v5-global--FontWeight--normal);
+  --pf-v5-c-progress-stepper--m-compact__step-icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
+  --pf-v5-c-progress-stepper--m-compact__step-title--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v5-c-progress-stepper--m-compact__step-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v5-c-progress-stepper--m-compact__pficon--MarginTop: 2px;
   --pf-v5-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop: -3px;
   --pf-v5-c-progress-stepper--m-center__step-connector--before--Left: 50%;
   --pf-v5-c-progress-stepper--m-center--GridTemplateColumns: 1fr;
   --pf-v5-c-progress-stepper--m-center__step-connector--JustifyContent: center;
-  --pf-v5-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-t--global--spacer--xs);
   --pf-v5-c-progress-stepper--m-center__step-main--TextAlign: center;
   --pf-v5-c-progress-stepper--m-center__step-description--MarginRight: 0;
   --pf-v5-c-progress-stepper--m-center__step-description--MarginLeft: 0;
   --pf-v5-c-progress-stepper--GridTemplateRows: auto 1fr;
   --pf-v5-c-progress-stepper__step-connector--JustifyContent: flex-start;
-  --pf-v5-c-progress-stepper__step-icon--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-progress-stepper__step-icon--Width: 1.75rem;
+  --pf-v5-c-progress-stepper__step-icon--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v5-c-progress-stepper__step-icon--Width: 1.5rem;
   --pf-v5-c-progress-stepper__step-icon--Height: var(--pf-v5-c-progress-stepper__step-icon--Width);
-  --pf-v5-c-progress-stepper__step-icon--FontSize: var(--pf-v5-global--icon--FontSize--md);
-  --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-progress-stepper__step-icon--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
-  --pf-v5-c-progress-stepper__step-icon--BorderWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-progress-stepper__step-icon--BorderColor: var(--pf-v5-global--BorderColor--100);
+  --pf-v5-c-progress-stepper__step-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
+  --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-progress-stepper__step-icon--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-progress-stepper__step-icon--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v5-c-progress-stepper__step-icon--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-progress-stepper__step--m-current__step-icon--Color: var(--pf-t--global--icon--color--brand--default);
+  --pf-v5-c-progress-stepper__step--m-info__step-icon--Color: var(--pf-t--global--icon--color--status--info--default);
+  --pf-v5-c-progress-stepper__step--m-success__step-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+  --pf-v5-c-progress-stepper__step--m-warning__step-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --pf-v5-c-progress-stepper__step--m-danger__step-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --pf-v5-c-progress-stepper__step--m-custom__step-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
   --pf-v5-c-progress-stepper__pficon--MarginTop: 3px;
-  --pf-v5-c-progress-stepper__fa-exclamation-triangle--MarginTop: -5px;
-  --pf-v5-c-progress-stepper__step-title--Color: var(--pf-v5-global--Color--100);
+  --pf-v5-c-progress-stepper__fa-exclamation-triangle--MarginTop: -2px;
+  --pf-v5-c-progress-stepper__step-title--Color: var(--pf-t--global--text--color--regular);
   --pf-v5-c-progress-stepper__step-title--TextAlign: start;
-  --pf-v5-c-progress-stepper__step-title--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-progress-stepper__step-title--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-v5-global--FontWeight--bold);
-  --pf-v5-c-progress-stepper__step--m-current__step-title--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-progress-stepper__step--m-pending__step-title--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-progress-stepper__step--m-danger__step-title--Color: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationColor: var(--pf-v5-global--BorderColor--200);
-  --pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationThickness: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-progress-stepper__step-title--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v5-c-progress-stepper__step-title--FontWeight: var(--pf-t--global--font--weight--body);
+  --pf-v5-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v5-c-progress-stepper__step--m-current__step-title--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-progress-stepper__step--m-pending__step-title--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-progress-stepper__step--m-danger__step-title--Color: var(--pf-t--global--text--color--status--danger--default);
+  --pf-v5-c-progress-stepper__step-title--m-help-text--PaddingInlineStart: 0;
+  --pf-v5-c-progress-stepper__step-title--m-help-text--PaddingInlineEnd: 0;
+  --pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationColor: currentcolor;
+  --pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationThickness: var(--pf-t--global--link--text-decoration);
   --pf-v5-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset: 0.25rem;
-  --pf-v5-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor: var(--pf-v5-global--Color--100);
-  --pf-v5-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor: var(--pf-v5-global--Color--100);
-  --pf-v5-c-progress-stepper__step-title--m-help-text--hover--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-progress-stepper__step-title--m-help-text--focus--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color: var(--pf-v5-global--danger-color--200);
-  --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color: var(--pf-v5-global--danger-color--200);
-  --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor: var(--pf-v5-global--danger-color--200);
-  --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecorationColor: var(--pf-v5-global--danger-color--200);
-  --pf-v5-c-progress-stepper__step-description--MarginTop: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-progress-stepper__step-description--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-progress-stepper__step-description--Color: var(--pf-v5-global--Color--200);
+  --pf-v5-c-progress-stepper__step-title--m-help-text--hover--Color: var(--pf-t--global--text--color--brand--hover);
+  --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
+  --pf-v5-c-progress-stepper__step-description--MarginTop: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-progress-stepper__step-description--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-progress-stepper__step-description--Color: var(--pf-t--global--text--color--subtle);
   --pf-v5-c-progress-stepper__step-description--TextAlign: start;
   --pf-v5-c-progress-stepper--GridAutoFlow: var(--pf-v5-c-progress-stepper--m-vertical--GridAutoFlow);
   --pf-v5-c-progress-stepper--GridTemplateColumns: var(--pf-v5-c-progress-stepper--m-vertical--GridTemplateColumns);
@@ -114,15 +116,10 @@
   --pf-v5-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);
   --pf-v5-c-progress-stepper--m-center__step-connector--before--Content: none;
   --pf-v5-c-progress-stepper--m-center__step-main--before--Content: "";
-  position: relative;
-  display: grid;
-  grid-template-rows: var(--pf-v5-c-progress-stepper--GridTemplateRows);
-  grid-template-columns: var(--pf-v5-c-progress-stepper--GridTemplateColumns);
-  grid-auto-columns: 1fr;
-  grid-auto-flow: var(--pf-v5-c-progress-stepper--GridAutoFlow);
 }
 @media screen and (min-width: 768px) {
-  .pf-v5-c-progress-stepper {
+  :where(:root),
+  :where(.pf-v5-c-progress-stepper) {
     --pf-v5-c-progress-stepper--GridAutoFlow: var(--pf-v5-c-progress-stepper--m-horizontal--GridAutoFlow);
     --pf-v5-c-progress-stepper--GridTemplateColumns: var(--pf-v5-c-progress-stepper--m-horizontal--GridTemplateColumns);
     --pf-v5-c-progress-stepper__step-connector--before--Top: var(--pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Top);
@@ -145,6 +142,15 @@
     --pf-v5-c-progress-stepper--m-center__step-main--before--Content: none;
   }
 }
+
+.pf-v5-c-progress-stepper {
+  position: relative;
+  display: grid;
+  grid-template-rows: var(--pf-v5-c-progress-stepper--GridTemplateRows);
+  grid-template-columns: var(--pf-v5-c-progress-stepper--GridTemplateColumns);
+  grid-auto-columns: 1fr;
+  grid-auto-flow: var(--pf-v5-c-progress-stepper--GridAutoFlow);
+}
 .pf-v5-c-progress-stepper.pf-m-center {
   --pf-v5-c-progress-stepper__step-connector--JustifyContent: var(--pf-v5-c-progress-stepper--m-center__step-connector--JustifyContent);
   --pf-v5-c-progress-stepper__step-main--MarginRight: var(--pf-v5-c-progress-stepper--m-center__step-main--MarginRight);
@@ -204,8 +210,8 @@
   border: 0;
 }
 .pf-v5-c-progress-stepper.pf-m-compact .pf-v5-c-progress-stepper__step.pf-m-current .pf-v5-c-progress-stepper__step-main {
-  grid-column: 1/-1;
   grid-row: 1/2;
+  grid-column: 1/-1;
 }
 .pf-v5-c-progress-stepper.pf-m-compact .pf-v5-c-progress-stepper__step-description {
   display: none;
@@ -217,27 +223,27 @@
 .pf-v5-c-progress-stepper__step.pf-m-current {
   --pf-v5-c-progress-stepper__step-title--FontWeight: var(--pf-v5-c-progress-stepper__step--m-current__step-title--FontWeight);
   --pf-v5-c-progress-stepper__step-title--Color: var(--pf-v5-c-progress-stepper__step--m-current__step-title--Color);
+  --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-c-progress-stepper__step--m-current__step-icon--Color);
 }
 .pf-v5-c-progress-stepper__step.pf-m-pending {
   --pf-v5-c-progress-stepper__step-title--Color: var(--pf-v5-c-progress-stepper__step--m-pending__step-title--Color);
 }
 .pf-v5-c-progress-stepper__step.pf-m-success {
-  --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-global--success-color--100);
+  --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-c-progress-stepper__step--m-success__step-icon--Color);
 }
 .pf-v5-c-progress-stepper__step.pf-m-danger {
-  --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-global--danger-color--100);
+  --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-c-progress-stepper__step--m-danger__step-icon--Color);
   --pf-v5-c-progress-stepper__step-title--Color: var(--pf-v5-c-progress-stepper__step--m-danger__step-title--Color);
   --pf-v5-c-progress-stepper__step-title--m-help-text--hover--Color: var(--pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color);
-  --pf-v5-c-progress-stepper__step-title--m-help-text--focus--Color: var(--pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color);
-  --pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationColor: var(--pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor);
-  --pf-v5-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor: var(--pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor);
-  --pf-v5-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor: var(--pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecorationColor);
 }
 .pf-v5-c-progress-stepper__step.pf-m-warning {
-  --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-global--warning-color--100);
+  --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-c-progress-stepper__step--m-warning__step-icon--Color);
 }
 .pf-v5-c-progress-stepper__step.pf-m-info {
-  --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-global--info-color--100);
+  --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-c-progress-stepper__step--m-info__step-icon--Color);
+}
+.pf-v5-c-progress-stepper__step.pf-m-custom {
+  --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-c-progress-stepper__step--m-custom__step-icon--Color);
 }
 .pf-v5-c-progress-stepper__step:last-child {
   --pf-v5-c-progress-stepper__step-main--MarginBottom: 0;
@@ -266,7 +272,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--pf-v5-c-progress-stepper__step-icon--Width);
+  min-width: var(--pf-v5-c-progress-stepper__step-icon--Width);
   height: var(--pf-v5-c-progress-stepper__step-icon--Height);
   font-size: var(--pf-v5-c-progress-stepper__step-icon--FontSize);
   color: var(--pf-v5-c-progress-stepper__step-icon--Color);
@@ -308,6 +314,8 @@
   border: 0;
 }
 .pf-v5-c-progress-stepper__step-title.pf-m-help-text {
+  padding-inline-start: var(--pf-v5-c-progress-stepper__step-title--m-help-text--PaddingInlineStart);
+  padding-inline-end: var(--pf-v5-c-progress-stepper__step-title--m-help-text--PaddingInlineEnd);
   text-decoration: underline;
   text-decoration-thickness: var(--pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
   text-decoration-style: dashed;
@@ -315,13 +323,8 @@
   text-underline-offset: var(--pf-v5-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset);
   cursor: pointer;
 }
-.pf-v5-c-progress-stepper__step-title.pf-m-help-text:hover {
+.pf-v5-c-progress-stepper__step-title.pf-m-help-text:hover, .pf-v5-c-progress-stepper__step-title.pf-m-help-text:focus {
   --pf-v5-c-progress-stepper__step-title--Color: var(--pf-v5-c-progress-stepper__step-title--m-help-text--hover--Color);
-  --pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationColor: var(--pf-v5-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor);
-}
-.pf-v5-c-progress-stepper__step-title.pf-m-help-text:focus {
-  --pf-v5-c-progress-stepper__step-title--Color: var(--pf-v5-c-progress-stepper__step-title--m-help-text--focus--Color);
-  --pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationColor: var(--pf-v5-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor);
 }
 
 .pf-v5-c-progress-stepper__step-description {