@patternfly/patternfly 6.0.0-alpha.47 → 6.0.0-alpha.48

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 (16) hide show
  1. package/components/Form/form.css +2 -35
  2. package/components/Form/form.scss +2 -35
  3. package/components/Progress/progress.css +31 -45
  4. package/components/Progress/progress.scss +36 -55
  5. package/docs/components/Form/examples/Form.md +122 -89
  6. package/docs/demos/Form/examples/BasicForms.md +110 -80
  7. package/docs/demos/Modal/examples/Modal.md +33 -24
  8. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +11 -8
  9. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  10. package/package.json +1 -1
  11. package/patternfly-no-globals.css +33 -84
  12. package/patternfly-theme-dark-unversioned.css +33 -84
  13. package/patternfly.css +33 -84
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
  16. package/components/Progress/themes/dark/progress.scss +0 -9
package/components/Form/form.css CHANGED
@@ -20,20 +20,7 @@
20
20
  --pf-v5-c-form__label-required--MarginLeft: var(--pf-t--global--spacer--xs);
21
21
  --pf-v5-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
22
22
  --pf-v5-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
23
- --pf-v5-c-form__group-label-help--BackgroundColor: transparent;
24
- --pf-v5-c-form__group-label-help--PaddingTop: var(--pf-t--global--spacer--xs);
25
- --pf-v5-c-form__group-label-help--PaddingRight: var(--pf-t--global--spacer--xs);
26
- --pf-v5-c-form__group-label-help--PaddingBottom: var(--pf-t--global--spacer--xs);
27
- --pf-v5-c-form__group-label-help--PaddingLeft: var(--pf-t--global--spacer--xs);
28
- --pf-v5-c-form__group-label-help--MarginTop: calc(var(--pf-v5-c-form__group-label-help--PaddingTop) * -1);
29
- --pf-v5-c-form__group-label-help--MarginRight: calc(var(--pf-v5-c-form__group-label-help--PaddingRight) * -1);
30
- --pf-v5-c-form__group-label-help--MarginBottom: calc(var(--pf-v5-c-form__group-label-help--PaddingBottom) * -1);
31
- --pf-v5-c-form__group-label-help--MarginLeft: calc(var(--pf-v5-c-form__group-label-help--PaddingLeft) * -1 + var(--pf-t--global--spacer--xs));
32
23
  --pf-v5-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
33
- --pf-v5-c-form__group-label-help--TranslateY: 0.125rem;
34
- --pf-v5-c-form__group-label-help--Color: var(--pf-t--global--icon--color--regular);
35
- --pf-v5-c-form__group-label-help--hover--Color: var(--pf-t--global--icon--color--regular);
36
- --pf-v5-c-form__group-label-help--focus--Color: var(--pf-t--global--icon--color--brand--hover);
37
24
  --pf-v5-c-form__group-label-info--MarginLeft: var(--pf-t--global--spacer--sm);
38
25
  --pf-v5-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
39
26
  --pf-v5-c-form__group-control--m-inline--child--MarginRight: var(--pf-t--global--spacer--lg);
@@ -315,28 +302,8 @@
315
302
  color: var(--pf-v5-c-form__label-required--Color);
316
303
  }
317
304
 
318
- .pf-v5-c-form__group-label-help {
319
- padding-block-start: var(--pf-v5-c-form__group-label-help--PaddingTop);
320
- padding-block-end: var(--pf-v5-c-form__group-label-help--PaddingBottom);
321
- padding-inline-start: var(--pf-v5-c-form__group-label-help--PaddingLeft);
322
- padding-inline-end: var(--pf-v5-c-form__group-label-help--PaddingRight);
323
- margin-block-start: var(--pf-v5-c-form__group-label-help--MarginTop);
324
- margin-block-end: var(--pf-v5-c-form__group-label-help--MarginBottom);
325
- margin-inline-start: var(--pf-v5-c-form__group-label-help--MarginLeft);
326
- margin-inline-end: var(--pf-v5-c-form__group-label-help--MarginRight);
327
- font-size: var(--pf-v5-c-form__group-label-help--FontSize);
328
- line-height: 1;
329
- color: var(--pf-v5-c-form__group-label-help--Color);
330
- cursor: pointer;
331
- background-color: var(--pf-v5-c-form__group-label-help--BackgroundColor);
332
- border: 0;
333
- transform: translateY(var(--pf-v5-c-form__group-label-help--TranslateY));
334
- }
335
- .pf-v5-c-form__group-label-help:hover {
336
- --pf-v5-c-form__group-label-help--Color: var(--pf-v5-c-form__group-label-help--hover--Color);
337
- }
338
- .pf-v5-c-form__group-label-help:focus-within {
339
- --pf-v5-c-form__group-label-help--Color: var(--pf-v5-c-form__group-label-help--focus--Color);
305
+ .pf-v5-c-form__group-label-help .pf-v5-c-button {
306
+ --pf-v5-c-button--FontSize: var(--pf-v5-c-form__group-label-help--FontSize);
340
307
  }
341
308
 
342
309
  .pf-v5-c-form__group-control {
package/components/Form/form.scss CHANGED
@@ -82,20 +82,7 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
82
82
  --#{$form}__label-required--Color: var(--pf-t--global--color--status--danger--default);
83
83
 
84
84
  // Field level help
85
- --#{$form}__group-label-help--BackgroundColor: transparent;
86
- --#{$form}__group-label-help--PaddingTop: var(--pf-t--global--spacer--xs);
87
- --#{$form}__group-label-help--PaddingRight: var(--pf-t--global--spacer--xs);
88
- --#{$form}__group-label-help--PaddingBottom: var(--pf-t--global--spacer--xs);
89
- --#{$form}__group-label-help--PaddingLeft: var(--pf-t--global--spacer--xs);
90
- --#{$form}__group-label-help--MarginTop: calc(var(--#{$form}__group-label-help--PaddingTop) * -1);
91
- --#{$form}__group-label-help--MarginRight: calc(var(--#{$form}__group-label-help--PaddingRight) * -1);
92
- --#{$form}__group-label-help--MarginBottom: calc(var(--#{$form}__group-label-help--PaddingBottom) * -1);
93
- --#{$form}__group-label-help--MarginLeft: calc(var(--#{$form}__group-label-help--PaddingLeft) * -1 + var(--pf-t--global--spacer--xs));
94
85
  --#{$form}__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
95
- --#{$form}__group-label-help--TranslateY: #{pf-size-prem(2px)};
96
- --#{$form}__group-label-help--Color: var(--pf-t--global--icon--color--regular);
97
- --#{$form}__group-label-help--hover--Color: var(--pf-t--global--icon--color--regular);
98
- --#{$form}__group-label-help--focus--Color: var(--pf-t--global--icon--color--brand--hover);
99
86
 
100
87
  // Form group label info
101
88
  --#{$form}__group-label-info--MarginLeft: var(--pf-t--global--spacer--sm);
@@ -291,28 +278,8 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
291
278
  }
292
279
 
293
280
  .#{$form}__group-label-help {
294
- padding-block-start: var(--#{$form}__group-label-help--PaddingTop);
295
- padding-block-end: var(--#{$form}__group-label-help--PaddingBottom);
296
- padding-inline-start: var(--#{$form}__group-label-help--PaddingLeft);
297
- padding-inline-end: var(--#{$form}__group-label-help--PaddingRight);
298
- margin-block-start: var(--#{$form}__group-label-help--MarginTop);
299
- margin-block-end: var(--#{$form}__group-label-help--MarginBottom);
300
- margin-inline-start: var(--#{$form}__group-label-help--MarginLeft);
301
- margin-inline-end: var(--#{$form}__group-label-help--MarginRight);
302
- font-size: var(--#{$form}__group-label-help--FontSize);
303
- line-height: 1;
304
- color: var(--#{$form}__group-label-help--Color);
305
- cursor: pointer;
306
- background-color: var(--#{$form}__group-label-help--BackgroundColor);
307
- border: 0;
308
- transform: translateY(var(--#{$form}__group-label-help--TranslateY));
309
-
310
- &:hover {
311
- --#{$form}__group-label-help--Color: var(--#{$form}__group-label-help--hover--Color);
312
- }
313
-
314
- &:focus-within {
315
- --#{$form}__group-label-help--Color: var(--#{$form}__group-label-help--focus--Color);
281
+ .#{$button} {
282
+ --#{$button}--FontSize: var(--#{$form}__group-label-help--FontSize);
316
283
  }
317
284
  }
318
285
 
package/components/Progress/progress.css CHANGED
@@ -1,31 +1,33 @@
1
+ :root,
1
2
  .pf-v5-c-progress {
2
- --pf-v5-c-progress--GridGap: var(--pf-v5-global--spacer--md);
3
- --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-global--primary-color--100);
4
- --pf-v5-c-progress__bar--Height: var(--pf-v5-global--spacer--md);
5
- --pf-v5-c-progress__bar--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
3
+ --pf-v5-c-progress--GridGap: var(--pf-t--global--spacer--md);
4
+ --pf-v5-c-progress__bar--Height: var(--pf-t--global--spacer--md);
5
+ --pf-v5-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
6
6
  --pf-v5-c-progress__measure--m-static-width--MinWidth: 4.5ch;
7
- --pf-v5-c-progress__status--Gap: var(--pf-v5-global--spacer--sm);
8
- --pf-v5-c-progress__status-icon--Color: var(--pf-v5-global--Color--100);
9
- --pf-v5-c-progress__bar--before--Opacity: .2;
7
+ --pf-v5-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
8
+ --pf-v5-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
10
9
  --pf-v5-c-progress__indicator--Height: var(--pf-v5-c-progress__bar--Height);
11
- --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress__bar--before--BackgroundColor);
12
- --pf-v5-c-progress__helper-text--MarginTop: calc(var(--pf-v5-global--spacer--xs) - var(--pf-v5-c-progress--GridGap));
13
- --pf-v5-c-progress--m-success__bar--BackgroundColor: var(--pf-v5-global--success-color--100);
14
- --pf-v5-c-progress--m-warning__bar--BackgroundColor: var(--pf-v5-global--warning-color--100);
15
- --pf-v5-c-progress--m-danger__bar--BackgroundColor: var(--pf-v5-global--danger-color--100);
16
- --pf-v5-c-progress--m-success__status-icon--Color: var(--pf-v5-global--success-color--100);
17
- --pf-v5-c-progress--m-warning__status-icon--Color: var(--pf-v5-global--warning-color--100);
18
- --pf-v5-c-progress--m-danger__status-icon--Color: var(--pf-v5-global--danger-color--100);
19
- --pf-v5-c-progress--m-inside__indicator--MinWidth: var(--pf-v5-global--spacer--xl);
20
- --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-global--Color--light-100);
21
- --pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-v5-global--Color--light-100);
22
- --pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-v5-global--Color--dark-100);
23
- --pf-v5-c-progress--m-inside__measure--FontSize: var(--pf-v5-global--FontSize--sm);
24
- --pf-v5-c-progress--m-outside__measure--FontSize: var(--pf-v5-global--FontSize--sm);
25
- --pf-v5-c-progress--m-sm__bar--Height: var(--pf-v5-global--spacer--sm);
26
- --pf-v5-c-progress--m-sm__description--FontSize: var(--pf-v5-global--FontSize--sm);
27
- --pf-v5-c-progress--m-sm__measure--FontSize: var(--pf-v5-global--FontSize--sm);
28
- --pf-v5-c-progress--m-lg__bar--Height: var(--pf-v5-global--spacer--lg);
10
+ --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
11
+ --pf-v5-c-progress__helper-text--MarginTop: calc(var(--pf-t--global--spacer--sm) - var(--pf-v5-c-progress--GridGap));
12
+ --pf-v5-c-progress--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
13
+ --pf-v5-c-progress--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
14
+ --pf-v5-c-progress--m-danger__indicator--BackgroundColor: var(--pf-t--global--color--status--danger--default);
15
+ --pf-v5-c-progress--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
16
+ --pf-v5-c-progress--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
17
+ --pf-v5-c-progress--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
18
+ --pf-v5-c-progress--m-inside__indicator--MinWidth: var(--pf-t--global--spacer--xl);
19
+ --pf-v5-c-progress--m-inside__measure--Color: var(--pf-t--global--text--color--on-brand--default);
20
+ --pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-success--default);
21
+ --pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-warning--default);
22
+ --pf-v5-c-progress--m-danger--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-danger--default);
23
+ --pf-v5-c-progress--m-inside__measure--FontSize: var(--pf-t--global--font--size--sm);
24
+ --pf-v5-c-progress--m-outside__measure--FontSize: var(--pf-t--global--font--size--sm);
25
+ --pf-v5-c-progress--m-sm__bar--Height: var(--pf-t--global--spacer--sm);
26
+ --pf-v5-c-progress--m-sm__measure--FontSize: var(--pf-t--global--font--size--body--sm);
27
+ --pf-v5-c-progress--m-lg__bar--Height: var(--pf-t--global--spacer--lg);
28
+ }
29
+
30
+ .pf-v5-c-progress {
29
31
  display: grid;
30
32
  grid-template-rows: 1fr auto;
31
33
  grid-template-columns: auto auto;
@@ -35,9 +37,6 @@
35
37
  .pf-v5-c-progress.pf-m-sm {
36
38
  --pf-v5-c-progress__bar--Height: var(--pf-v5-c-progress--m-sm__bar--Height);
37
39
  }
38
- .pf-v5-c-progress.pf-m-sm .pf-v5-c-progress__description {
39
- font-size: var(--pf-v5-c-progress--m-sm__description--FontSize);
40
- }
41
40
  .pf-v5-c-progress.pf-m-sm .pf-v5-c-progress__measure {
42
41
  font-size: var(--pf-v5-c-progress--m-sm__measure--FontSize);
43
42
  }
@@ -93,18 +92,19 @@
93
92
  grid-template-columns: 1fr fit-content(50%);
94
93
  }
95
94
  .pf-v5-c-progress.pf-m-success {
96
- --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-success__bar--BackgroundColor);
95
+ --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress--m-success__indicator--BackgroundColor);
97
96
  --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-success__status-icon--Color);
98
97
  --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-success--m-inside__measure--Color);
99
98
  }
100
99
  .pf-v5-c-progress.pf-m-warning {
101
- --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-warning__bar--BackgroundColor);
100
+ --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress--m-warning__indicator--BackgroundColor);
102
101
  --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-warning__status-icon--Color);
103
102
  --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-warning--m-inside__measure--Color);
104
103
  }
105
104
  .pf-v5-c-progress.pf-m-danger {
106
- --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-danger__bar--BackgroundColor);
105
+ --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress--m-danger__indicator--BackgroundColor);
107
106
  --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-danger__status-icon--Color);
107
+ --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-c-progress--m-danger--m-inside__measure--Color);
108
108
  }
109
109
 
110
110
  .pf-v5-c-progress__description {
@@ -146,14 +146,6 @@
146
146
  height: var(--pf-v5-c-progress__bar--Height);
147
147
  background-color: var(--pf-v5-c-progress__bar--BackgroundColor);
148
148
  }
149
- .pf-v5-c-progress__bar::before {
150
- position: absolute;
151
- width: 100%;
152
- height: 100%;
153
- content: "";
154
- background-color: var(--pf-v5-c-progress__bar--before--BackgroundColor);
155
- opacity: var(--pf-v5-c-progress__bar--before--Opacity);
156
- }
157
149
 
158
150
  .pf-v5-c-progress__indicator {
159
151
  position: absolute;
@@ -165,10 +157,4 @@
165
157
  grid-row: 3/4;
166
158
  grid-column: 1/3;
167
159
  margin-block-start: var(--pf-v5-c-progress__helper-text--MarginTop);
168
- }
169
-
170
- :where(.pf-v5-theme-dark) .pf-v5-c-progress {
171
- --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
172
- --pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
173
- --pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
174
160
  }
package/components/Progress/progress.scss CHANGED
@@ -1,40 +1,40 @@
1
1
  // @debug $progress; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
+ :root,
3
4
  .#{$progress} {
4
5
  // Component variables
5
- --#{$progress}--GridGap: var(--#{$pf-global}--spacer--md);
6
-
6
+ --#{$progress}--GridGap: var(--pf-t--global--spacer--md);
7
+
7
8
  // Element variables
8
- --#{$progress}__bar--before--BackgroundColor: var(--#{$pf-global}--primary-color--100);
9
- --#{$progress}__bar--Height: var(--#{$pf-global}--spacer--md);
10
- --#{$progress}__bar--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100); // the bar always needs white under it so that the semi-transparent color shows correctly
9
+ --#{$progress}__bar--Height: var(--pf-t--global--spacer--md);
10
+ --#{$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
11
11
  --#{$progress}__measure--m-static-width--MinWidth: 4.5ch; // 4.5 because the % character is wider than a 0
12
- --#{$progress}__status--Gap: var(--#{$pf-global}--spacer--sm);
13
- --#{$progress}__status-icon--Color: var(--#{$pf-global}--Color--100); // the status icon default color is the default text color
14
- --#{$progress}__bar--before--Opacity: .2; // one-off change in opacity to allow progress bar to automatically coordinate with the indicator color
12
+ --#{$progress}__status--Gap: var(--pf-t--global--spacer--sm);
13
+ --#{$progress}__status-icon--Color: var(--pf-t--global--icon--color--regular);
15
14
  --#{$progress}__indicator--Height: var(--#{$progress}__bar--Height);
16
- --#{$progress}__indicator--BackgroundColor: var(--#{$progress}__bar--before--BackgroundColor);
17
- --#{$progress}__helper-text--MarginTop: calc(var(--#{$pf-global}--spacer--xs) - var(--#{$progress}--GridGap));
18
-
15
+ --#{$progress}__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
16
+ --#{$progress}__helper-text--MarginTop: calc(var(--pf-t--global--spacer--sm) - var(--#{$progress}--GridGap));
17
+
19
18
  // Modifier variables
20
- --#{$progress}--m-success__bar--BackgroundColor: var(--#{$pf-global}--success-color--100);
21
- --#{$progress}--m-warning__bar--BackgroundColor: var(--#{$pf-global}--warning-color--100);
22
- --#{$progress}--m-danger__bar--BackgroundColor: var(--#{$pf-global}--danger-color--100);
23
- --#{$progress}--m-success__status-icon--Color: var(--#{$pf-global}--success-color--100);
24
- --#{$progress}--m-warning__status-icon--Color: var(--#{$pf-global}--warning-color--100);
25
- --#{$progress}--m-danger__status-icon--Color: var(--#{$pf-global}--danger-color--100);
26
- --#{$progress}--m-inside__indicator--MinWidth: var(--#{$pf-global}--spacer--xl);
27
- --#{$progress}--m-inside__measure--Color: var(--#{$pf-global}--Color--light-100); // the measure needs to be white when moved inside the progress bar indicator
28
- --#{$progress}--m-success--m-inside__measure--Color: var(--#{$pf-global}--Color--light-100); // remove at breaking change
29
- --#{$progress}--m-warning--m-inside__measure--Color: var(--#{$pf-global}--Color--dark-100); // the measure still needs to be dark when in warning state
30
- --#{$progress}--m-inside__measure--FontSize: var(--#{$pf-global}--FontSize--sm);
31
- --#{$progress}--m-outside__measure--FontSize: var(--#{$pf-global}--FontSize--sm);
32
- --#{$progress}--m-sm__bar--Height: var(--#{$pf-global}--spacer--sm);
33
- --#{$progress}--m-sm__description--FontSize: var(--#{$pf-global}--FontSize--sm);
34
- --#{$progress}--m-sm__measure--FontSize: var(--#{$pf-global}--FontSize--sm);
35
- --#{$progress}--m-lg__bar--Height: var(--#{$pf-global}--spacer--lg);
36
-
37
- // Component styles
19
+ --#{$progress}--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
20
+ --#{$progress}--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
21
+ --#{$progress}--m-danger__indicator--BackgroundColor: var(--pf-t--global--color--status--danger--default);
22
+ --#{$progress}--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
23
+ --#{$progress}--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
24
+ --#{$progress}--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
25
+ --#{$progress}--m-inside__indicator--MinWidth: var(--pf-t--global--spacer--xl);
26
+ --#{$progress}--m-inside__measure--Color: var(--pf-t--global--text--color--on-brand--default);
27
+ --#{$progress}--m-success--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-success--default);
28
+ --#{$progress}--m-warning--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-warning--default);
29
+ --#{$progress}--m-danger--m-inside__measure--Color: var(--pf-t--global--text--color--status--on-danger--default);
30
+ --#{$progress}--m-inside__measure--FontSize: var(--pf-t--global--font--size--sm);
31
+ --#{$progress}--m-outside__measure--FontSize: var(--pf-t--global--font--size--sm);
32
+ --#{$progress}--m-sm__bar--Height: var(--pf-t--global--spacer--sm);
33
+ --#{$progress}--m-sm__measure--FontSize: var(--pf-t--global--font--size--body--sm);
34
+ --#{$progress}--m-lg__bar--Height: var(--pf-t--global--spacer--lg);
35
+ }
36
+
37
+ .#{$progress} {
38
38
  display: grid;
39
39
  grid-template-rows: 1fr auto;
40
40
  grid-template-columns: auto auto;
@@ -44,11 +44,7 @@
44
44
  // Modifiers
45
45
  // size modifiers
46
46
  &.pf-m-sm {
47
- --#{$progress}__bar--Height: var(--#{$progress}--m-sm__bar--Height); // set height to the small height
48
-
49
- .#{$progress}__description {
50
- font-size: var(--#{$progress}--m-sm__description--FontSize);
51
- }
47
+ --#{$progress}__bar--Height: var(--#{$progress}--m-sm__bar--Height);
52
48
 
53
49
  .#{$progress}__measure {
54
50
  font-size: var(--#{$progress}--m-sm__measure--FontSize);
@@ -56,7 +52,7 @@
56
52
  }
57
53
 
58
54
  &.pf-m-lg {
59
- --#{$progress}__bar--Height: var(--#{$progress}--m-lg__bar--Height); // set height to the large height
55
+ --#{$progress}__bar--Height: var(--#{$progress}--m-lg__bar--Height);
60
56
  }
61
57
 
62
58
  // an inside-style progress component shows the measure inside the indicator
@@ -129,20 +125,21 @@
129
125
 
130
126
  // status modifiers
131
127
  &.pf-m-success {
132
- --#{$progress}__bar--before--BackgroundColor: var(--#{$progress}--m-success__bar--BackgroundColor);
128
+ --#{$progress}__indicator--BackgroundColor: var(--#{$progress}--m-success__indicator--BackgroundColor);
133
129
  --#{$progress}__status-icon--Color: var(--#{$progress}--m-success__status-icon--Color);
134
130
  --#{$progress}--m-inside__measure--Color: var(--#{$progress}--m-success--m-inside__measure--Color);
135
131
  }
136
132
 
137
133
  &.pf-m-warning {
138
- --#{$progress}__bar--before--BackgroundColor: var(--#{$progress}--m-warning__bar--BackgroundColor);
134
+ --#{$progress}__indicator--BackgroundColor: var(--#{$progress}--m-warning__indicator--BackgroundColor);
139
135
  --#{$progress}__status-icon--Color: var(--#{$progress}--m-warning__status-icon--Color);
140
136
  --#{$progress}--m-inside__measure--Color: var(--#{$progress}--m-warning--m-inside__measure--Color);
141
137
  }
142
-
138
+
143
139
  &.pf-m-danger {
144
- --#{$progress}__bar--before--BackgroundColor: var(--#{$progress}--m-danger__bar--BackgroundColor);
140
+ --#{$progress}__indicator--BackgroundColor: var(--#{$progress}--m-danger__indicator--BackgroundColor);
145
141
  --#{$progress}__status-icon--Color: var(--#{$progress}--m-danger__status-icon--Color);
142
+ --#{$progress}--m-inside__measure--Color: var(--#{$progress}--m-danger--m-inside__measure--Color);
146
143
  }
147
144
  }
148
145
 
@@ -192,15 +189,6 @@
192
189
  align-self: center;
193
190
  height: var(--#{$progress}__bar--Height);
194
191
  background-color: var(--#{$progress}__bar--BackgroundColor);
195
-
196
- &::before {
197
- position: absolute;
198
- width: 100%;
199
- height: 100%;
200
- content: "";
201
- background-color: var(--#{$progress}__bar--before--BackgroundColor);
202
- opacity: var(--#{$progress}__bar--before--Opacity);
203
- }
204
192
  }
205
193
 
206
194
  // the progress__indicator is the part that advances (widens) as progress is made
@@ -216,10 +204,3 @@
216
204
  grid-column: 1 / 3;
217
205
  margin-block-start: var(--#{$progress}__helper-text--MarginTop);
218
206
  }
219
-
220
- // stylelint-disable no-invalid-position-at-import-rule
221
- @import "themes/dark/progress";
222
-
223
- @include pf-v5-theme-dark {
224
- @include pf-v5-theme-dark-progress;
225
- }