@patternfly/patternfly 6.0.0-alpha.46 → 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 (22) hide show
  1. package/components/Button/button.css +3 -1
  2. package/components/Button/button.scss +3 -1
  3. package/components/Form/form.css +2 -35
  4. package/components/Form/form.scss +2 -35
  5. package/components/Progress/progress.css +31 -45
  6. package/components/Progress/progress.scss +36 -55
  7. package/components/Switch/switch.css +41 -37
  8. package/components/Switch/switch.scss +47 -42
  9. package/docs/components/Button/examples/Button.md +29 -2
  10. package/docs/components/Form/examples/Form.md +122 -89
  11. package/docs/demos/Form/examples/BasicForms.md +110 -80
  12. package/docs/demos/Modal/examples/Modal.md +33 -24
  13. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +11 -8
  14. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  15. package/package.json +1 -1
  16. package/patternfly-no-globals.css +77 -126
  17. package/patternfly-theme-dark-unversioned.css +77 -126
  18. package/patternfly.css +77 -126
  19. package/patternfly.min.css +1 -1
  20. package/patternfly.min.css.map +1 -1
  21. package/components/Progress/themes/dark/progress.scss +0 -9
  22. package/components/Switch/themes/dark/switch.scss +0 -11
package/components/Button/button.css CHANGED
@@ -224,6 +224,7 @@
224
224
  text-align: center;
225
225
  text-decoration: var(--pf-v5-c-button--TextDecoration);
226
226
  white-space: nowrap;
227
+ cursor: pointer;
227
228
  user-select: none;
228
229
  background-color: var(--pf-v5-c-button--BackgroundColor);
229
230
  border: 0;
@@ -321,7 +322,6 @@
321
322
  display: inline;
322
323
  text-align: start;
323
324
  white-space: normal;
324
- cursor: pointer;
325
325
  outline-offset: 0.125rem;
326
326
  }
327
327
  .pf-v5-c-button.pf-m-link:where(.pf-m-danger) {
@@ -437,7 +437,9 @@
437
437
  mix-blend-mode: var(--pf-v5-c-button--m-plain--MixBlendMode);
438
438
  }
439
439
  .pf-v5-c-button.pf-m-plain.pf-m-no-padding {
440
+ min-width: auto;
440
441
  padding: 0;
442
+ background-color: transparent;
441
443
  }
442
444
  .pf-v5-c-button.pf-m-block {
443
445
  display: block;
package/components/Button/button.scss CHANGED
@@ -267,6 +267,7 @@
267
267
  text-align: center;
268
268
  text-decoration: var(--#{$button}--TextDecoration);
269
269
  white-space: nowrap;
270
+ cursor: pointer; // needed for when a button does not use <button> - eg, <span>
270
271
  user-select: none;
271
272
  background-color: var(--#{$button}--BackgroundColor);
272
273
  border: 0;
@@ -375,7 +376,6 @@
375
376
  display: inline;
376
377
  text-align: start;
377
378
  white-space: normal;
378
- cursor: pointer;
379
379
  outline-offset: #{pf-size-prem(2px)};
380
380
  }
381
381
 
@@ -508,7 +508,9 @@
508
508
  --#{$button}__progress--Color: var(--#{$button}--m-in-progress--m-plain--Color);
509
509
 
510
510
  &.pf-m-no-padding {
511
+ min-width: auto;
511
512
  padding: 0;
513
+ background-color: transparent;
512
514
  }
513
515
 
514
516
  min-width: var(--#{$button}--m-plain--MinWidth);
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
- }
package/components/Switch/switch.css CHANGED
@@ -1,37 +1,41 @@
1
+ :root,
1
2
  .pf-v5-c-switch {
2
- --pf-v5-c-switch--FontSize: var(--pf-v5-global--FontSize--md);
3
- --pf-v5-c-switch__label--PaddingLeft: var(--pf-v5-global--spacer--md);
4
- --pf-v5-c-switch--ColumnGap: var(--pf-v5-c-switch__label--PaddingLeft);
3
+ --pf-v5-c-switch--FontSize: var(--pf-t--global--font--size--sm);
4
+ --pf-v5-c-switch--ColumnGap: var(--pf-t--global--spacer--sm);
5
5
  --pf-v5-c-switch__toggle-icon--FontSize: calc(var(--pf-v5-c-switch--FontSize) * .625);
6
- --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--Color--light-100);
6
+ --pf-v5-c-switch__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
7
7
  --pf-v5-c-switch__toggle-icon--Left: calc(var(--pf-v5-c-switch--FontSize) * .4);
8
8
  --pf-v5-c-switch__toggle-icon--Offset: 0.125rem;
9
- --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--palette--black-150);
10
- --pf-v5-c-switch--LineHeight: var(--pf-v5-global--LineHeight--md);
9
+ --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
10
+ --pf-v5-c-switch--LineHeight: var(--pf-t--global--font--line-height--body);
11
11
  --pf-v5-c-switch--Height: auto;
12
- --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-v5-global--primary-color--100);
12
+ --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-t--global--color--brand--default);
13
13
  --pf-v5-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-v5-c-switch__toggle-icon--Offset));
14
- --pf-v5-c-switch__input--checked__label--Color: var(--pf-v5-global--Color--dark-100);
15
- --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--disabled-color--100);
16
- --pf-v5-c-switch__input--disabled__label--Color: var(--pf-v5-global--disabled-color--100);
17
- --pf-v5-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-v5-global--disabled-color--200);
18
- --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--palette--black-150);
19
- --pf-v5-c-switch__input--focus__toggle--OutlineWidth: var(--pf-v5-global--BorderWidth--md);
20
- --pf-v5-c-switch__input--focus__toggle--OutlineOffset: var(--pf-v5-global--spacer--sm);
21
- --pf-v5-c-switch__input--focus__toggle--OutlineColor: var(--pf-v5-global--primary-color--100);
14
+ --pf-v5-c-switch__input--checked__toggle--BorderWidth: 0;
15
+ --pf-v5-c-switch__input--checked__label--Color: var(--pf-t--global--text--color--regular);
16
+ --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-t--global--text--color--subtle);
17
+ --pf-v5-c-switch__input--disabled__label--Color: var(--pf-t--global--text--color--disabled);
18
+ --pf-v5-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
19
+ --pf-v5-c-switch__input--checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--inverse);
20
+ --pf-v5-c-switch__input--not-checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--subtle);
21
+ --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--on-disabled);
22
+ --pf-v5-c-switch__input--focus__toggle--OutlineWidth: var(--pf-t--global--border--width--strong);
23
+ --pf-v5-c-switch__input--focus__toggle--OutlineOffset: var(--pf-t--global--spacer--xs);
24
+ --pf-v5-c-switch__input--focus__toggle--OutlineColor: var(--pf-t--global--color--brand--default);
22
25
  --pf-v5-c-switch__toggle--Height: calc(var(--pf-v5-c-switch--FontSize) * var(--pf-v5-c-switch--LineHeight));
23
- --pf-v5-c-switch__toggle--BackgroundColor: var(--pf-v5-global--palette--black-500);
24
- --pf-v5-c-switch__toggle--BorderRadius: var(--pf-v5-c-switch__toggle--Height);
26
+ --pf-v5-c-switch__toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
27
+ --pf-v5-c-switch__toggle--BorderColor: var(--pf-t--global--border--color--default);
28
+ --pf-v5-c-switch__toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
29
+ --pf-v5-c-switch__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
25
30
  --pf-v5-c-switch__toggle--before--Width: calc(var(--pf-v5-c-switch--FontSize) - var(--pf-v5-c-switch__toggle-icon--Offset));
26
31
  --pf-v5-c-switch__toggle--before--Height: var(--pf-v5-c-switch__toggle--before--Width);
27
- --pf-v5-c-switch__toggle--before--Top: calc((var(--pf-v5-c-switch__toggle--Height) - var(--pf-v5-c-switch__toggle--before--Height)) / 2);
28
- --pf-v5-c-switch__toggle--before--Left: var(--pf-v5-c-switch__toggle--before--Top);
29
- --pf-v5-c-switch__toggle--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
30
- --pf-v5-c-switch__toggle--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
31
- --pf-v5-c-switch__toggle--before--BoxShadow: var(--pf-v5-global--BoxShadow--md);
32
+ --pf-v5-c-switch__toggle--before--Left: calc((var(--pf-v5-c-switch__toggle--Height) - var(--pf-v5-c-switch__toggle--before--Height)) / 2);
33
+ --pf-v5-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
32
34
  --pf-v5-c-switch__toggle--before--Transition: transform .25s ease 0s;
33
35
  --pf-v5-c-switch__toggle--Width: calc(var(--pf-v5-c-switch__toggle--Height) + var(--pf-v5-c-switch__toggle-icon--Offset) + var(--pf-v5-c-switch__toggle--before--Width));
34
- --pf-v5-c-switch__label--Color: var(--pf-v5-global--Color--dark-100);
36
+ }
37
+
38
+ .pf-v5-c-switch {
35
39
  position: relative;
36
40
  display: inline-grid;
37
41
  grid-template-columns: auto;
@@ -64,13 +68,15 @@
64
68
  color: var(--pf-v5-c-switch__input--checked__label--Color);
65
69
  }
66
70
  .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
71
+ --pf-v5-c-switch__toggle--BorderWidth: var(--pf-v5-c-switch__input--checked__toggle--BorderWidth);
67
72
  background-color: var(--pf-v5-c-switch__input--checked__toggle--BackgroundColor);
68
73
  }
69
74
  .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
70
- transform: translateX(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX));
75
+ transform: translate(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX), -50%);
76
+ background-color: var(--pf-v5-c-switch__input--checked__toggle--before--BackgroundColor);
71
77
  }
72
78
  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
73
- transform: translateX(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
79
+ transform: translate(calc(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)), -50%);
74
80
  }
75
81
 
76
82
  .pf-v5-c-switch__input:checked ~ .pf-m-off {
@@ -111,16 +117,23 @@
111
117
  }
112
118
  .pf-v5-c-switch__toggle::before {
113
119
  position: absolute;
114
- inset-block-start: var(--pf-v5-c-switch__toggle--before--Top);
120
+ inset-block-start: 50%;
115
121
  inset-inline-start: var(--pf-v5-c-switch__toggle--before--Left);
116
122
  display: block;
117
123
  width: var(--pf-v5-c-switch__toggle--before--Width);
118
124
  height: var(--pf-v5-c-switch__toggle--before--Height);
119
125
  content: "";
120
- background-color: var(--pf-v5-c-switch__toggle--before--BackgroundColor);
126
+ background-color: var(--pf-v5-c-switch__input--not-checked__toggle--before--BackgroundColor);
121
127
  border-radius: var(--pf-v5-c-switch__toggle--before--BorderRadius);
122
- box-shadow: var(--pf-v5-c-switch__toggle--before--BoxShadow);
123
128
  transition: var(--pf-v5-c-switch__toggle--before--Transition);
129
+ transform: translateY(-50%);
130
+ }
131
+ .pf-v5-c-switch__toggle::after {
132
+ position: absolute;
133
+ inset: 0;
134
+ content: "";
135
+ border: var(--pf-v5-c-switch__toggle--BorderWidth) solid var(--pf-v5-c-switch__toggle--BorderColor);
136
+ border-radius: var(--pf-v5-c-switch__toggle--BorderRadius);
124
137
  }
125
138
 
126
139
  .pf-v5-c-switch__toggle-icon {
@@ -137,14 +150,5 @@
137
150
  .pf-v5-c-switch__label {
138
151
  display: inline-block;
139
152
  grid-column: 2;
140
- color: var(--pf-v5-c-switch__label--Color);
141
153
  vertical-align: top;
142
- }
143
-
144
- :where(.pf-v5-theme-dark) .pf-v5-c-switch {
145
- --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--BackgroundColor--100);
146
- --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
147
- --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);
148
- --pf-v5-c-switch__toggle--before--BoxShadow: none;
149
- --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
150
154
  }