@patternfly/patternfly 6.0.0-alpha.69 → 6.0.0-alpha.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/components/ProgressStepper/progress-stepper.css +72 -69
  2. package/components/ProgressStepper/progress-stepper.scss +65 -65
  3. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -14
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +72 -69
  6. package/patternfly-theme-dark-unversioned.css +72 -69
  7. package/patternfly.css +72 -69
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/ProgressStepper/progress-stepper.css CHANGED
@@ -1,21 +1,22 @@
1
- .pf-v5-c-progress-stepper {
1
+ :where(:root),
2
+ :where(.pf-v5-c-progress-stepper) {
2
3
  --pf-v5-c-progress-stepper--m-vertical--GridAutoFlow: row;
3
4
  --pf-v5-c-progress-stepper--m-vertical--GridTemplateColumns: auto 1fr;
4
5
  --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Top: 0;
5
6
  --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Left: calc(var(--pf-v5-c-progress-stepper__step-icon--Width) / 2);
6
7
  --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Width: auto;
7
8
  --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Height: 100%;
8
- --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth: var(--pf-v5-global--BorderWidth--md);
9
- --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor: var(--pf-v5-global--BorderColor--100);
9
+ --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth: var(--pf-t--global--border--width--box--default);
10
+ --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor: var(--pf-t--global--border--color--default);
10
11
  --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth: 0;
11
12
  --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor: transparent;
12
13
  --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Transform: translateX(-50%);
13
- --pf-v5-c-progress-stepper--m-vertical__step-main--MarginTop: var(--pf-v5-global--spacer--xs);
14
+ --pf-v5-c-progress-stepper--m-vertical__step-main--MarginTop: 0px;
14
15
  --pf-v5-c-progress-stepper--m-vertical__step-main--MarginRight: 0;
15
- --pf-v5-c-progress-stepper--m-vertical__step-main--MarginBottom: var(--pf-v5-global--spacer--xl);
16
- --pf-v5-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-v5-global--spacer--xs);
16
+ --pf-v5-c-progress-stepper--m-vertical__step-main--MarginBottom: var(--pf-t--global--spacer--xl);
17
+ --pf-v5-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-t--global--spacer--sm);
17
18
  --pf-v5-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns: 1fr;
18
- --pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom: var(--pf-v5-global--spacer--sm);
19
+ --pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom: var(--pf-t--global--spacer--sm);
19
20
  --pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow: auto;
20
21
  --pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginTop: 0;
21
22
  --pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight: 0;
@@ -30,11 +31,11 @@
30
31
  --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Height: auto;
31
32
  --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth: 0;
32
33
  --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor: unset;
33
- --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
34
- --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
34
+ --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
35
+ --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor: var(--pf-t--global--border--color--default);
35
36
  --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Transform: translateY(-50%);
36
- --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginTop: var(--pf-v5-global--spacer--sm);
37
- --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginRight: var(--pf-v5-global--spacer--sm);
37
+ --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginTop: var(--pf-t--global--spacer--sm);
38
+ --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginRight: var(--pf-t--global--spacer--sm);
38
39
  --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginBottom: 0;
39
40
  --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginLeft: 0;
40
41
  --pf-v5-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns: repeat(auto-fill, 1.75rem);
@@ -42,57 +43,58 @@
42
43
  --pf-v5-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow: 2;
43
44
  --pf-v5-c-progress-stepper--m-compact--GridAutoFlow: row;
44
45
  --pf-v5-c-progress-stepper--m-compact__step-main--MarginTop: 0;
45
- --pf-v5-c-progress-stepper--m-compact__step-main--MarginBottom: var(--pf-v5-global--spacer--sm);
46
+ --pf-v5-c-progress-stepper--m-compact__step-main--MarginBottom: var(--pf-t--global--spacer--sm);
46
47
  --pf-v5-c-progress-stepper--m-compact__step-connector--MinWidth: 1.75rem;
47
48
  --pf-v5-c-progress-stepper--m-compact__step-icon--Width: 1.125rem;
48
- --pf-v5-c-progress-stepper--m-compact__step-icon--FontSize: var(--pf-v5-global--icon--FontSize--sm);
49
- --pf-v5-c-progress-stepper--m-compact__step-title--FontSize: var(--pf-v5-global--FontSize--sm);
50
- --pf-v5-c-progress-stepper--m-compact__step-title--FontWeight: var(--pf-v5-global--FontWeight--normal);
49
+ --pf-v5-c-progress-stepper--m-compact__step-icon--FontSize: var(--pf-t--global--icon--size--body--sm);
50
+ --pf-v5-c-progress-stepper--m-compact__step-title--FontSize: var(--pf-t--global--font--size--body--lg);
51
+ --pf-v5-c-progress-stepper--m-compact__step-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
51
52
  --pf-v5-c-progress-stepper--m-compact__pficon--MarginTop: 2px;
52
53
  --pf-v5-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop: -3px;
53
54
  --pf-v5-c-progress-stepper--m-center__step-connector--before--Left: 50%;
54
55
  --pf-v5-c-progress-stepper--m-center--GridTemplateColumns: 1fr;
55
56
  --pf-v5-c-progress-stepper--m-center__step-connector--JustifyContent: center;
56
- --pf-v5-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-v5-global--spacer--xs);
57
- --pf-v5-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-v5-global--spacer--xs);
57
+ --pf-v5-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-t--global--spacer--xs);
58
+ --pf-v5-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-t--global--spacer--xs);
58
59
  --pf-v5-c-progress-stepper--m-center__step-main--TextAlign: center;
59
60
  --pf-v5-c-progress-stepper--m-center__step-description--MarginRight: 0;
60
61
  --pf-v5-c-progress-stepper--m-center__step-description--MarginLeft: 0;
61
62
  --pf-v5-c-progress-stepper--GridTemplateRows: auto 1fr;
62
63
  --pf-v5-c-progress-stepper__step-connector--JustifyContent: flex-start;
63
- --pf-v5-c-progress-stepper__step-icon--ZIndex: var(--pf-v5-global--ZIndex--xs);
64
- --pf-v5-c-progress-stepper__step-icon--Width: 1.75rem;
64
+ --pf-v5-c-progress-stepper__step-icon--ZIndex: var(--pf-t--global--Zindex--xs);
65
+ --pf-v5-c-progress-stepper__step-icon--Width: 1.5rem;
65
66
  --pf-v5-c-progress-stepper__step-icon--Height: var(--pf-v5-c-progress-stepper__step-icon--Width);
66
- --pf-v5-c-progress-stepper__step-icon--FontSize: var(--pf-v5-global--icon--FontSize--md);
67
- --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-global--Color--100);
68
- --pf-v5-c-progress-stepper__step-icon--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
69
- --pf-v5-c-progress-stepper__step-icon--BorderWidth: var(--pf-v5-global--BorderWidth--md);
70
- --pf-v5-c-progress-stepper__step-icon--BorderColor: var(--pf-v5-global--BorderColor--100);
67
+ --pf-v5-c-progress-stepper__step-icon--FontSize: var(--pf-t--global--icon--size--body--default);
68
+ --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-t--global--icon--color--regular);
69
+ --pf-v5-c-progress-stepper__step-icon--BackgroundColor: var(--pf-t--global--background--color--primary--default);
70
+ --pf-v5-c-progress-stepper__step-icon--BorderWidth: var(--pf-t--global--border--width--box--default);
71
+ --pf-v5-c-progress-stepper__step-icon--BorderColor: var(--pf-t--global--border--color--default);
72
+ --pf-v5-c-progress-stepper__step--m-current__step-icon--Color: var(--pf-t--global--icon--color--brand--default);
73
+ --pf-v5-c-progress-stepper__step--m-info__step-icon--Color: var(--pf-t--global--icon--color--status--info--default);
74
+ --pf-v5-c-progress-stepper__step--m-success__step-icon--Color: var(--pf-t--global--icon--color--status--success--default);
75
+ --pf-v5-c-progress-stepper__step--m-warning__step-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
76
+ --pf-v5-c-progress-stepper__step--m-danger__step-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
77
+ --pf-v5-c-progress-stepper__step--m-custom__step-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
71
78
  --pf-v5-c-progress-stepper__pficon--MarginTop: 3px;
72
- --pf-v5-c-progress-stepper__fa-exclamation-triangle--MarginTop: -5px;
73
- --pf-v5-c-progress-stepper__step-title--Color: var(--pf-v5-global--Color--100);
79
+ --pf-v5-c-progress-stepper__fa-exclamation-triangle--MarginTop: -2px;
80
+ --pf-v5-c-progress-stepper__step-title--Color: var(--pf-t--global--text--color--regular);
74
81
  --pf-v5-c-progress-stepper__step-title--TextAlign: start;
75
- --pf-v5-c-progress-stepper__step-title--FontSize: var(--pf-v5-global--FontSize--md);
76
- --pf-v5-c-progress-stepper__step-title--FontWeight: var(--pf-v5-global--FontWeight--normal);
77
- --pf-v5-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-v5-global--FontWeight--bold);
78
- --pf-v5-c-progress-stepper__step--m-current__step-title--Color: var(--pf-v5-global--Color--100);
79
- --pf-v5-c-progress-stepper__step--m-pending__step-title--Color: var(--pf-v5-global--Color--200);
80
- --pf-v5-c-progress-stepper__step--m-danger__step-title--Color: var(--pf-v5-global--danger-color--100);
81
- --pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationColor: var(--pf-v5-global--BorderColor--200);
82
- --pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationThickness: var(--pf-v5-global--BorderWidth--sm);
82
+ --pf-v5-c-progress-stepper__step-title--FontSize: var(--pf-t--global--font--size--body--lg);
83
+ --pf-v5-c-progress-stepper__step-title--FontWeight: var(--pf-t--global--font--weight--body);
84
+ --pf-v5-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
85
+ --pf-v5-c-progress-stepper__step--m-current__step-title--Color: var(--pf-t--global--text--color--regular);
86
+ --pf-v5-c-progress-stepper__step--m-pending__step-title--Color: var(--pf-t--global--text--color--subtle);
87
+ --pf-v5-c-progress-stepper__step--m-danger__step-title--Color: var(--pf-t--global--text--color--status--danger--default);
88
+ --pf-v5-c-progress-stepper__step-title--m-help-text--PaddingInlineStart: 0;
89
+ --pf-v5-c-progress-stepper__step-title--m-help-text--PaddingInlineEnd: 0;
90
+ --pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationColor: currentcolor;
91
+ --pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationThickness: var(--pf-t--global--link--text-decoration);
83
92
  --pf-v5-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset: 0.25rem;
84
- --pf-v5-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor: var(--pf-v5-global--Color--100);
85
- --pf-v5-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor: var(--pf-v5-global--Color--100);
86
- --pf-v5-c-progress-stepper__step-title--m-help-text--hover--Color: var(--pf-v5-global--Color--100);
87
- --pf-v5-c-progress-stepper__step-title--m-help-text--focus--Color: var(--pf-v5-global--Color--100);
88
- --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color: var(--pf-v5-global--danger-color--200);
89
- --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color: var(--pf-v5-global--danger-color--200);
90
- --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor: var(--pf-v5-global--danger-color--100);
91
- --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor: var(--pf-v5-global--danger-color--200);
92
- --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecorationColor: var(--pf-v5-global--danger-color--200);
93
- --pf-v5-c-progress-stepper__step-description--MarginTop: var(--pf-v5-global--spacer--xs);
94
- --pf-v5-c-progress-stepper__step-description--FontSize: var(--pf-v5-global--FontSize--sm);
95
- --pf-v5-c-progress-stepper__step-description--Color: var(--pf-v5-global--Color--200);
93
+ --pf-v5-c-progress-stepper__step-title--m-help-text--hover--Color: var(--pf-t--global--text--color--brand--hover);
94
+ --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
95
+ --pf-v5-c-progress-stepper__step-description--MarginTop: var(--pf-t--global--spacer--xs);
96
+ --pf-v5-c-progress-stepper__step-description--FontSize: var(--pf-t--global--font--size--body--sm);
97
+ --pf-v5-c-progress-stepper__step-description--Color: var(--pf-t--global--text--color--subtle);
96
98
  --pf-v5-c-progress-stepper__step-description--TextAlign: start;
97
99
  --pf-v5-c-progress-stepper--GridAutoFlow: var(--pf-v5-c-progress-stepper--m-vertical--GridAutoFlow);
98
100
  --pf-v5-c-progress-stepper--GridTemplateColumns: var(--pf-v5-c-progress-stepper--m-vertical--GridTemplateColumns);
@@ -114,15 +116,10 @@
114
116
  --pf-v5-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom);
115
117
  --pf-v5-c-progress-stepper--m-center__step-connector--before--Content: none;
116
118
  --pf-v5-c-progress-stepper--m-center__step-main--before--Content: "";
117
- position: relative;
118
- display: grid;
119
- grid-template-rows: var(--pf-v5-c-progress-stepper--GridTemplateRows);
120
- grid-template-columns: var(--pf-v5-c-progress-stepper--GridTemplateColumns);
121
- grid-auto-columns: 1fr;
122
- grid-auto-flow: var(--pf-v5-c-progress-stepper--GridAutoFlow);
123
119
  }
124
120
  @media screen and (min-width: 768px) {
125
- .pf-v5-c-progress-stepper {
121
+ :where(:root),
122
+ :where(.pf-v5-c-progress-stepper) {
126
123
  --pf-v5-c-progress-stepper--GridAutoFlow: var(--pf-v5-c-progress-stepper--m-horizontal--GridAutoFlow);
127
124
  --pf-v5-c-progress-stepper--GridTemplateColumns: var(--pf-v5-c-progress-stepper--m-horizontal--GridTemplateColumns);
128
125
  --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 @@
145
142
  --pf-v5-c-progress-stepper--m-center__step-main--before--Content: none;
146
143
  }
147
144
  }
145
+
146
+ .pf-v5-c-progress-stepper {
147
+ position: relative;
148
+ display: grid;
149
+ grid-template-rows: var(--pf-v5-c-progress-stepper--GridTemplateRows);
150
+ grid-template-columns: var(--pf-v5-c-progress-stepper--GridTemplateColumns);
151
+ grid-auto-columns: 1fr;
152
+ grid-auto-flow: var(--pf-v5-c-progress-stepper--GridAutoFlow);
153
+ }
148
154
  .pf-v5-c-progress-stepper.pf-m-center {
149
155
  --pf-v5-c-progress-stepper__step-connector--JustifyContent: var(--pf-v5-c-progress-stepper--m-center__step-connector--JustifyContent);
150
156
  --pf-v5-c-progress-stepper__step-main--MarginRight: var(--pf-v5-c-progress-stepper--m-center__step-main--MarginRight);
@@ -204,8 +210,8 @@
204
210
  border: 0;
205
211
  }
206
212
  .pf-v5-c-progress-stepper.pf-m-compact .pf-v5-c-progress-stepper__step.pf-m-current .pf-v5-c-progress-stepper__step-main {
207
- grid-column: 1/-1;
208
213
  grid-row: 1/2;
214
+ grid-column: 1/-1;
209
215
  }
210
216
  .pf-v5-c-progress-stepper.pf-m-compact .pf-v5-c-progress-stepper__step-description {
211
217
  display: none;
@@ -217,27 +223,27 @@
217
223
  .pf-v5-c-progress-stepper__step.pf-m-current {
218
224
  --pf-v5-c-progress-stepper__step-title--FontWeight: var(--pf-v5-c-progress-stepper__step--m-current__step-title--FontWeight);
219
225
  --pf-v5-c-progress-stepper__step-title--Color: var(--pf-v5-c-progress-stepper__step--m-current__step-title--Color);
226
+ --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-c-progress-stepper__step--m-current__step-icon--Color);
220
227
  }
221
228
  .pf-v5-c-progress-stepper__step.pf-m-pending {
222
229
  --pf-v5-c-progress-stepper__step-title--Color: var(--pf-v5-c-progress-stepper__step--m-pending__step-title--Color);
223
230
  }
224
231
  .pf-v5-c-progress-stepper__step.pf-m-success {
225
- --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-global--success-color--100);
232
+ --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-c-progress-stepper__step--m-success__step-icon--Color);
226
233
  }
227
234
  .pf-v5-c-progress-stepper__step.pf-m-danger {
228
- --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-global--danger-color--100);
235
+ --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-c-progress-stepper__step--m-danger__step-icon--Color);
229
236
  --pf-v5-c-progress-stepper__step-title--Color: var(--pf-v5-c-progress-stepper__step--m-danger__step-title--Color);
230
237
  --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);
231
- --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);
232
- --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);
233
- --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);
234
- --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);
235
238
  }
236
239
  .pf-v5-c-progress-stepper__step.pf-m-warning {
237
- --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-global--warning-color--100);
240
+ --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-c-progress-stepper__step--m-warning__step-icon--Color);
238
241
  }
239
242
  .pf-v5-c-progress-stepper__step.pf-m-info {
240
- --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-global--info-color--100);
243
+ --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-c-progress-stepper__step--m-info__step-icon--Color);
244
+ }
245
+ .pf-v5-c-progress-stepper__step.pf-m-custom {
246
+ --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-v5-c-progress-stepper__step--m-custom__step-icon--Color);
241
247
  }
242
248
  .pf-v5-c-progress-stepper__step:last-child {
243
249
  --pf-v5-c-progress-stepper__step-main--MarginBottom: 0;
@@ -266,7 +272,7 @@
266
272
  display: flex;
267
273
  align-items: center;
268
274
  justify-content: center;
269
- width: var(--pf-v5-c-progress-stepper__step-icon--Width);
275
+ min-width: var(--pf-v5-c-progress-stepper__step-icon--Width);
270
276
  height: var(--pf-v5-c-progress-stepper__step-icon--Height);
271
277
  font-size: var(--pf-v5-c-progress-stepper__step-icon--FontSize);
272
278
  color: var(--pf-v5-c-progress-stepper__step-icon--Color);
@@ -308,6 +314,8 @@
308
314
  border: 0;
309
315
  }
310
316
  .pf-v5-c-progress-stepper__step-title.pf-m-help-text {
317
+ padding-inline-start: var(--pf-v5-c-progress-stepper__step-title--m-help-text--PaddingInlineStart);
318
+ padding-inline-end: var(--pf-v5-c-progress-stepper__step-title--m-help-text--PaddingInlineEnd);
311
319
  text-decoration: underline;
312
320
  text-decoration-thickness: var(--pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
313
321
  text-decoration-style: dashed;
@@ -315,13 +323,8 @@
315
323
  text-underline-offset: var(--pf-v5-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset);
316
324
  cursor: pointer;
317
325
  }
318
- .pf-v5-c-progress-stepper__step-title.pf-m-help-text:hover {
326
+ .pf-v5-c-progress-stepper__step-title.pf-m-help-text:hover, .pf-v5-c-progress-stepper__step-title.pf-m-help-text:focus {
319
327
  --pf-v5-c-progress-stepper__step-title--Color: var(--pf-v5-c-progress-stepper__step-title--m-help-text--hover--Color);
320
- --pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationColor: var(--pf-v5-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor);
321
- }
322
- .pf-v5-c-progress-stepper__step-title.pf-m-help-text:focus {
323
- --pf-v5-c-progress-stepper__step-title--Color: var(--pf-v5-c-progress-stepper__step-title--m-help-text--focus--Color);
324
- --pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationColor: var(--pf-v5-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor);
325
328
  }
326
329
 
327
330
  .pf-v5-c-progress-stepper__step-description {
package/components/ProgressStepper/progress-stepper.scss CHANGED
@@ -57,7 +57,8 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
57
57
  }
58
58
 
59
59
  // Progress stepper is vertically oriented by default
60
- .#{$progress-stepper} {
60
+ :where(:root),
61
+ :where(.#{$progress-stepper}) {
61
62
  // Vertical - these are the default settings
62
63
  --#{$progress-stepper}--m-vertical--GridAutoFlow: row;
63
64
  --#{$progress-stepper}--m-vertical--GridTemplateColumns: auto 1fr;
@@ -65,19 +66,19 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
65
66
  --#{$progress-stepper}--m-vertical__step-connector--before--Left: calc(var(--#{$progress-stepper}__step-icon--Width) / 2);
66
67
  --#{$progress-stepper}--m-vertical__step-connector--before--Width: auto;
67
68
  --#{$progress-stepper}--m-vertical__step-connector--before--Height: 100%;
68
- --#{$progress-stepper}--m-vertical__step-connector--before--BorderRightWidth: var(--#{$pf-global}--BorderWidth--md);
69
- --#{$progress-stepper}--m-vertical__step-connector--before--BorderRightColor: var(--#{$pf-global}--BorderColor--100);
69
+ --#{$progress-stepper}--m-vertical__step-connector--before--BorderRightWidth: var(--pf-t--global--border--width--box--default);
70
+ --#{$progress-stepper}--m-vertical__step-connector--before--BorderRightColor: var(--pf-t--global--border--color--default);
70
71
  --#{$progress-stepper}--m-vertical__step-connector--before--BorderBottomWidth: 0;
71
72
  --#{$progress-stepper}--m-vertical__step-connector--before--BorderBottomColor: transparent;
72
73
  --#{$progress-stepper}--m-vertical__step-connector--before--Transform: translateX(-50%);
73
- --#{$progress-stepper}--m-vertical__step-main--MarginTop: var(--#{$pf-global}--spacer--xs);
74
+ --#{$progress-stepper}--m-vertical__step-main--MarginTop: 0px; // needs px for calc
74
75
  --#{$progress-stepper}--m-vertical__step-main--MarginRight: 0;
75
- --#{$progress-stepper}--m-vertical__step-main--MarginBottom: var(--#{$pf-global}--spacer--xl);
76
- --#{$progress-stepper}--m-vertical__step-main--MarginLeft: var(--#{$pf-global}--spacer--xs);
76
+ --#{$progress-stepper}--m-vertical__step-main--MarginBottom: var(--pf-t--global--spacer--xl);
77
+ --#{$progress-stepper}--m-vertical__step-main--MarginLeft: var(--pf-t--global--spacer--sm);
77
78
 
78
79
  // Compact, vertical
79
80
  --#{$progress-stepper}--m-vertical--m-compact--GridTemplateColumns: 1fr;
80
- --#{$progress-stepper}--m-vertical--m-compact__step-connector--PaddingBottom: var(--#{$pf-global}--spacer--sm);
81
+ --#{$progress-stepper}--m-vertical--m-compact__step-connector--PaddingBottom: var(--pf-t--global--spacer--sm);
81
82
  --#{$progress-stepper}--m-vertical--m-compact__step-connector--GridRow: auto;
82
83
  --#{$progress-stepper}--m-vertical--m-compact__step-main--MarginTop: 0;
83
84
  --#{$progress-stepper}--m-vertical--m-compact__step-main--MarginRight: 0;
@@ -96,11 +97,11 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
96
97
  --#{$progress-stepper}--m-horizontal__step-connector--before--Height: auto;
97
98
  --#{$progress-stepper}--m-horizontal__step-connector--before--BorderRightWidth: 0;
98
99
  --#{$progress-stepper}--m-horizontal__step-connector--before--BorderRightColor: unset;
99
- --#{$progress-stepper}--m-horizontal__step-connector--before--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
100
- --#{$progress-stepper}--m-horizontal__step-connector--before--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
100
+ --#{$progress-stepper}--m-horizontal__step-connector--before--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
101
+ --#{$progress-stepper}--m-horizontal__step-connector--before--BorderBottomColor: var(--pf-t--global--border--color--default);
101
102
  --#{$progress-stepper}--m-horizontal__step-connector--before--Transform: translateY(-50%);
102
- --#{$progress-stepper}--m-horizontal__step-main--MarginTop: var(--#{$pf-global}--spacer--sm);
103
- --#{$progress-stepper}--m-horizontal__step-main--MarginRight: var(--#{$pf-global}--spacer--sm);
103
+ --#{$progress-stepper}--m-horizontal__step-main--MarginTop: var(--pf-t--global--spacer--sm);
104
+ --#{$progress-stepper}--m-horizontal__step-main--MarginRight: var(--pf-t--global--spacer--sm);
104
105
  --#{$progress-stepper}--m-horizontal__step-main--MarginBottom: 0;
105
106
  --#{$progress-stepper}--m-horizontal__step-main--MarginLeft: 0;
106
107
 
@@ -112,12 +113,12 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
112
113
  // Compact
113
114
  --#{$progress-stepper}--m-compact--GridAutoFlow: row;
114
115
  --#{$progress-stepper}--m-compact__step-main--MarginTop: 0;
115
- --#{$progress-stepper}--m-compact__step-main--MarginBottom: var(--#{$pf-global}--spacer--sm);
116
+ --#{$progress-stepper}--m-compact__step-main--MarginBottom: var(--pf-t--global--spacer--sm);
116
117
  --#{$progress-stepper}--m-compact__step-connector--MinWidth: #{pf-size-prem(28px)};
117
118
  --#{$progress-stepper}--m-compact__step-icon--Width: #{pf-size-prem(18px)};
118
- --#{$progress-stepper}--m-compact__step-icon--FontSize: var(--#{$pf-global}--icon--FontSize--sm);
119
- --#{$progress-stepper}--m-compact__step-title--FontSize: var(--#{$pf-global}--FontSize--sm);
120
- --#{$progress-stepper}--m-compact__step-title--FontWeight: var(--#{$pf-global}--FontWeight--normal);
119
+ --#{$progress-stepper}--m-compact__step-icon--FontSize: var(--pf-t--global--icon--size--body--sm);
120
+ --#{$progress-stepper}--m-compact__step-title--FontSize: var(--pf-t--global--font--size--body--lg);
121
+ --#{$progress-stepper}--m-compact__step-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
121
122
  --#{$progress-stepper}--m-compact__pficon--MarginTop: 2px;
122
123
  --#{$progress-stepper}--m-compact__fa-exclamation-triangle--MarginTop: -3px;
123
124
 
@@ -125,8 +126,8 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
125
126
  --#{$progress-stepper}--m-center__step-connector--before--Left: 50%;
126
127
  --#{$progress-stepper}--m-center--GridTemplateColumns: 1fr;
127
128
  --#{$progress-stepper}--m-center__step-connector--JustifyContent: center;
128
- --#{$progress-stepper}--m-center__step-main--MarginRight: var(--#{$pf-global}--spacer--xs);
129
- --#{$progress-stepper}--m-center__step-main--MarginLeft: var(--#{$pf-global}--spacer--xs);
129
+ --#{$progress-stepper}--m-center__step-main--MarginRight: var(--pf-t--global--spacer--xs);
130
+ --#{$progress-stepper}--m-center__step-main--MarginLeft: var(--pf-t--global--spacer--xs);
130
131
  --#{$progress-stepper}--m-center__step-main--TextAlign: center;
131
132
  --#{$progress-stepper}--m-center__step-description--MarginRight: 0;
132
133
  --#{$progress-stepper}--m-center__step-description--MarginLeft: 0;
@@ -138,49 +139,50 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
138
139
  --#{$progress-stepper}__step-connector--JustifyContent: flex-start;
139
140
 
140
141
  // Step icon variables
141
- --#{$progress-stepper}__step-icon--ZIndex: var(--#{$pf-global}--ZIndex--xs);
142
- --#{$progress-stepper}__step-icon--Width: #{pf-size-prem(28px)};
142
+ --#{$progress-stepper}__step-icon--ZIndex: var(--pf-t--global--Zindex--xs);
143
+ --#{$progress-stepper}__step-icon--Width: #{pf-size-prem(24px)};
143
144
  --#{$progress-stepper}__step-icon--Height: var(--#{$progress-stepper}__step-icon--Width);
144
- --#{$progress-stepper}__step-icon--FontSize: var(--#{$pf-global}--icon--FontSize--md);
145
- --#{$progress-stepper}__step-icon--Color: var(--#{$pf-global}--Color--100);
146
- --#{$progress-stepper}__step-icon--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-200);
147
- --#{$progress-stepper}__step-icon--BorderWidth: var(--#{$pf-global}--BorderWidth--md);
148
- --#{$progress-stepper}__step-icon--BorderColor: var(--#{$pf-global}--BorderColor--100);
145
+ --#{$progress-stepper}__step-icon--FontSize: var(--pf-t--global--icon--size--body--default);
146
+ --#{$progress-stepper}__step-icon--Color: var(--pf-t--global--icon--color--regular);
147
+ --#{$progress-stepper}__step-icon--BackgroundColor: var(--pf-t--global--background--color--primary--default);
148
+ --#{$progress-stepper}__step-icon--BorderWidth: var(--pf-t--global--border--width--box--default);
149
+ --#{$progress-stepper}__step-icon--BorderColor: var(--pf-t--global--border--color--default);
150
+ --#{$progress-stepper}__step--m-current__step-icon--Color: var(--pf-t--global--icon--color--brand--default);
151
+ --#{$progress-stepper}__step--m-info__step-icon--Color: var(--pf-t--global--icon--color--status--info--default);
152
+ --#{$progress-stepper}__step--m-success__step-icon--Color: var(--pf-t--global--icon--color--status--success--default);
153
+ --#{$progress-stepper}__step--m-warning__step-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
154
+ --#{$progress-stepper}__step--m-danger__step-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
155
+ --#{$progress-stepper}__step--m-custom__step-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
149
156
 
150
157
  // Icon adjustments to fix differences in alignment
151
158
  --#{$progress-stepper}__pficon--MarginTop: 3px;
152
- --#{$progress-stepper}__fa-exclamation-triangle--MarginTop: -5px;
159
+ --#{$progress-stepper}__fa-exclamation-triangle--MarginTop: -2px;
153
160
 
154
161
  // Step Title variables
155
- --#{$progress-stepper}__step-title--Color: var(--#{$pf-global}--Color--100);
162
+ --#{$progress-stepper}__step-title--Color: var(--pf-t--global--text--color--regular);
156
163
  --#{$progress-stepper}__step-title--TextAlign: start;
157
- --#{$progress-stepper}__step-title--FontSize: var(--#{$pf-global}--FontSize--md);
158
- --#{$progress-stepper}__step-title--FontWeight: var(--#{$pf-global}--FontWeight--normal);
159
- --#{$progress-stepper}__step--m-current__step-title--FontWeight: var(--#{$pf-global}--FontWeight--bold);
160
- --#{$progress-stepper}__step--m-current__step-title--Color: var(--#{$pf-global}--Color--100);
161
- --#{$progress-stepper}__step--m-pending__step-title--Color: var(--#{$pf-global}--Color--200);
162
- --#{$progress-stepper}__step--m-danger__step-title--Color: var(--#{$pf-global}--danger-color--100);
164
+ --#{$progress-stepper}__step-title--FontSize: var(--pf-t--global--font--size--body--lg);
165
+ --#{$progress-stepper}__step-title--FontWeight: var(--pf-t--global--font--weight--body);
166
+ --#{$progress-stepper}__step--m-current__step-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
167
+ --#{$progress-stepper}__step--m-current__step-title--Color: var(--pf-t--global--text--color--regular);
168
+ --#{$progress-stepper}__step--m-pending__step-title--Color: var(--pf-t--global--text--color--subtle);
169
+ --#{$progress-stepper}__step--m-danger__step-title--Color: var(--pf-t--global--text--color--status--danger--default);
163
170
 
164
171
  // Help text variables for the step title
165
- --#{$progress-stepper}__step-title--m-help-text--TextDecorationColor: var(--#{$pf-global}--BorderColor--200);
166
- --#{$progress-stepper}__step-title--m-help-text--TextDecorationThickness: var(--#{$pf-global}--BorderWidth--sm);
172
+ --#{$progress-stepper}__step-title--m-help-text--PaddingInlineStart: 0;
173
+ --#{$progress-stepper}__step-title--m-help-text--PaddingInlineEnd: 0;
174
+ --#{$progress-stepper}__step-title--m-help-text--TextDecorationColor: currentcolor;
175
+ --#{$progress-stepper}__step-title--m-help-text--TextDecorationThickness: var(--pf-t--global--link--text-decoration);
167
176
  --#{$progress-stepper}__step-title--m-help-text--TextUnderlineOffset: #{pf-size-prem(4px)};
168
- --#{$progress-stepper}__step-title--m-help-text--hover--TextDecorationColor: var(--#{$pf-global}--Color--100);
169
- --#{$progress-stepper}__step-title--m-help-text--focus--TextDecorationColor: var(--#{$pf-global}--Color--100);
170
- --#{$progress-stepper}__step-title--m-help-text--hover--Color: var(--#{$pf-global}--Color--100);
171
- --#{$progress-stepper}__step-title--m-help-text--focus--Color: var(--#{$pf-global}--Color--100);
177
+ --#{$progress-stepper}__step-title--m-help-text--hover--Color: var(--pf-t--global--text--color--brand--hover);
172
178
 
173
179
  // Help text variables the step title for failure state
174
- --#{$progress-stepper}__step--m-danger__step-title--m-help-text--hover--Color: var(--#{$pf-global}--danger-color--200);
175
- --#{$progress-stepper}__step--m-danger__step-title--m-help-text--focus--Color: var(--#{$pf-global}--danger-color--200);
176
- --#{$progress-stepper}__step--m-danger__step-title--m-help-text--TextDecorationColor: var(--#{$pf-global}--danger-color--100);
177
- --#{$progress-stepper}__step--m-danger__step-title--m-help-text--hover--TextDecorationColor: var(--#{$pf-global}--danger-color--200);
178
- --#{$progress-stepper}__step--m-danger__step-title--m-help-text--focus--TextDecorationColor: var(--#{$pf-global}--danger-color--200);
180
+ --#{$progress-stepper}__step--m-danger__step-title--m-help-text--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
179
181
 
180
182
  // Step Description variables
181
- --#{$progress-stepper}__step-description--MarginTop: var(--#{$pf-global}--spacer--xs);
182
- --#{$progress-stepper}__step-description--FontSize: var(--#{$pf-global}--FontSize--sm);
183
- --#{$progress-stepper}__step-description--Color: var(--#{$pf-global}--Color--200);
183
+ --#{$progress-stepper}__step-description--MarginTop: var(--pf-t--global--spacer--xs);
184
+ --#{$progress-stepper}__step-description--FontSize: var(--pf-t--global--font--size--body--sm);
185
+ --#{$progress-stepper}__step-description--Color: var(--pf-t--global--text--color--subtle);
184
186
  --#{$progress-stepper}__step-description--TextAlign: start;
185
187
 
186
188
  // Vertical by default
@@ -190,7 +192,9 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
190
192
  @media screen and (min-width: $pf-v5-global--breakpoint--md) {
191
193
  @include pf-v5-c-progress-stepper--m-horizontal;
192
194
  }
195
+ }
193
196
 
197
+ .#{$progress-stepper} {
194
198
  position: relative;
195
199
  display: grid;
196
200
  grid-template-rows: var(--#{$progress-stepper}--GridTemplateRows);
@@ -265,12 +269,10 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
265
269
  }
266
270
 
267
271
  // For this compact variant only, move the main content for the current step to above the icons
268
- // stylelint-disable
269
272
  .#{$progress-stepper}__step.pf-m-current .#{$progress-stepper}__step-main {
270
- grid-column: 1/-1;
271
273
  grid-row: 1/2;
274
+ grid-column: 1/-1;
272
275
  }
273
- // stylelint-enable
274
276
 
275
277
  .#{$progress-stepper}__step-description {
276
278
  display: none;
@@ -286,6 +288,7 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
286
288
  &.pf-m-current {
287
289
  --#{$progress-stepper}__step-title--FontWeight: var(--#{$progress-stepper}__step--m-current__step-title--FontWeight);
288
290
  --#{$progress-stepper}__step-title--Color: var(--#{$progress-stepper}__step--m-current__step-title--Color);
291
+ --#{$progress-stepper}__step-icon--Color: var(--#{$progress-stepper}__step--m-current__step-icon--Color);
289
292
  }
290
293
 
291
294
  &.pf-m-pending {
@@ -293,27 +296,27 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
293
296
  }
294
297
 
295
298
  &.pf-m-success {
296
- --#{$progress-stepper}__step-icon--Color: var(--#{$pf-global}--success-color--100);
299
+ --#{$progress-stepper}__step-icon--Color: var(--#{$progress-stepper}__step--m-success__step-icon--Color);
297
300
  }
298
301
 
299
302
  &.pf-m-danger {
300
- --#{$progress-stepper}__step-icon--Color: var(--#{$pf-global}--danger-color--100);
303
+ --#{$progress-stepper}__step-icon--Color: var(--#{$progress-stepper}__step--m-danger__step-icon--Color);
301
304
  --#{$progress-stepper}__step-title--Color: var(--#{$progress-stepper}__step--m-danger__step-title--Color);
302
305
 
303
306
  // Help text variables for failure state
304
307
  --#{$progress-stepper}__step-title--m-help-text--hover--Color: var(--#{$progress-stepper}__step--m-danger__step-title--m-help-text--hover--Color);
305
- --#{$progress-stepper}__step-title--m-help-text--focus--Color: var(--#{$progress-stepper}__step--m-danger__step-title--m-help-text--focus--Color);
306
- --#{$progress-stepper}__step-title--m-help-text--TextDecorationColor: var(--#{$progress-stepper}__step--m-danger__step-title--m-help-text--TextDecorationColor);
307
- --#{$progress-stepper}__step-title--m-help-text--hover--TextDecorationColor: var(--#{$progress-stepper}__step--m-danger__step-title--m-help-text--hover--TextDecorationColor);
308
- --#{$progress-stepper}__step-title--m-help-text--focus--TextDecorationColor: var(--#{$progress-stepper}__step--m-danger__step-title--m-help-text--focus--TextDecorationColor);
309
308
  }
310
309
 
311
310
  &.pf-m-warning {
312
- --#{$progress-stepper}__step-icon--Color: var(--#{$pf-global}--warning-color--100);
311
+ --#{$progress-stepper}__step-icon--Color: var(--#{$progress-stepper}__step--m-warning__step-icon--Color);
313
312
  }
314
313
 
315
314
  &.pf-m-info {
316
- --#{$progress-stepper}__step-icon--Color: var(--#{$pf-global}--info-color--100);
315
+ --#{$progress-stepper}__step-icon--Color: var(--#{$progress-stepper}__step--m-info__step-icon--Color);
316
+ }
317
+
318
+ &.pf-m-custom {
319
+ --#{$progress-stepper}__step-icon--Color: var(--#{$progress-stepper}__step--m-custom__step-icon--Color);
317
320
  }
318
321
 
319
322
  &:last-child {
@@ -347,7 +350,7 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
347
350
  display: flex;
348
351
  align-items: center;
349
352
  justify-content: center;
350
- width: var(--#{$progress-stepper}__step-icon--Width);
353
+ min-width: var(--#{$progress-stepper}__step-icon--Width);
351
354
  height: var(--#{$progress-stepper}__step-icon--Height);
352
355
  font-size: var(--#{$progress-stepper}__step-icon--FontSize);
353
356
  color: var(--#{$progress-stepper}__step-icon--Color);
@@ -399,6 +402,8 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
399
402
  border: 0;
400
403
 
401
404
  &.pf-m-help-text {
405
+ padding-inline-start: var(--#{$progress-stepper}__step-title--m-help-text--PaddingInlineStart);
406
+ padding-inline-end: var(--#{$progress-stepper}__step-title--m-help-text--PaddingInlineEnd);
402
407
  text-decoration: underline;
403
408
  text-decoration-thickness: var(--#{$progress-stepper}__step-title--m-help-text--TextDecorationThickness);
404
409
  text-decoration-style: dashed;
@@ -406,14 +411,9 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
406
411
  text-underline-offset: var(--#{$progress-stepper}__step-title--m-help-text--TextUnderlineOffset);
407
412
  cursor: pointer;
408
413
 
409
- &:hover {
410
- --#{$progress-stepper}__step-title--Color: var(--#{$progress-stepper}__step-title--m-help-text--hover--Color);
411
- --#{$progress-stepper}__step-title--m-help-text--TextDecorationColor: var(--#{$progress-stepper}__step-title--m-help-text--hover--TextDecorationColor);
412
- }
413
-
414
+ &:hover,
414
415
  &:focus {
415
- --#{$progress-stepper}__step-title--Color: var(--#{$progress-stepper}__step-title--m-help-text--focus--Color);
416
- --#{$progress-stepper}__step-title--m-help-text--TextDecorationColor: var(--#{$progress-stepper}__step-title--m-help-text--focus--TextDecorationColor);
416
+ --#{$progress-stepper}__step-title--Color: var(--#{$progress-stepper}__step-title--m-help-text--hover--Color);
417
417
  }
418
418
  }
419
419
  }