@patternfly/patternfly 6.0.0-alpha.133 → 6.0.0-alpha.135

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 (23) hide show
  1. package/base/patternfly-variables.css +49 -1
  2. package/base/tokens/tokens-charts-dark.scss +6 -2
  3. package/base/tokens/tokens-charts.scss +6 -2
  4. package/base/tokens/tokens-dark.scss +1 -1
  5. package/base/tokens/tokens-default.scss +50 -2
  6. package/base/tokens/tokens-palette.scss +1 -1
  7. package/components/LogViewer/log-viewer.css +2 -2
  8. package/components/LogViewer/log-viewer.scss +2 -2
  9. package/components/Page/page.css +2 -1
  10. package/components/Page/page.scss +2 -1
  11. package/components/Wizard/wizard.css +1 -21
  12. package/components/Wizard/wizard.scss +2 -27
  13. package/components/_index.css +5 -24
  14. package/docs/components/Wizard/examples/Wizard.md +115 -32
  15. package/docs/demos/Wizard/examples/Wizard.md +195 -54
  16. package/package.json +2 -2
  17. package/patternfly-base-no-globals.css +49 -1
  18. package/patternfly-base.css +49 -1
  19. package/patternfly-charts.css +10 -2
  20. package/patternfly-no-globals.css +54 -25
  21. package/patternfly.css +54 -25
  22. package/patternfly.min.css +1 -1
  23. package/patternfly.min.css.map +1 -1
package/base/patternfly-variables.css CHANGED
@@ -197,13 +197,30 @@
197
197
  --pf-t--color--gray--20: #e0e0e0;
198
198
  --pf-t--color--gray--10: #f2f2f2;
199
199
  --pf-t--color--white: #fff;
200
+ --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1);
201
+ --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1);
202
+ --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2);
203
+ --pf-t--global--delay--400: 7000ms;
204
+ --pf-t--global--delay--300: 100ms;
205
+ --pf-t--global--delay--200: 50ms;
206
+ --pf-t--global--delay--100: 0ms;
207
+ --pf-t--global--duration--600: 600ms;
208
+ --pf-t--global--duration--500: 500ms;
209
+ --pf-t--global--duration--400: 400ms;
210
+ --pf-t--global--duration--300: 300ms;
211
+ --pf-t--global--duration--200: 200ms;
212
+ --pf-t--global--duration--100: 100ms;
213
+ --pf-t--global--duration--50: 50ms;
200
214
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
201
215
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
202
216
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
203
217
  --pf-t--global--breakpoint--600: 1450px;
218
+ --pf-t--global--breakpoint--550: 1280px;
204
219
  --pf-t--global--breakpoint--500: 1200px;
205
220
  --pf-t--global--breakpoint--400: 992px;
221
+ --pf-t--global--breakpoint--350: 960px;
206
222
  --pf-t--global--breakpoint--300: 768px;
223
+ --pf-t--global--breakpoint--250: 640px;
207
224
  --pf-t--global--breakpoint--200: 576px;
208
225
  --pf-t--global--breakpoint--100: 0px;
209
226
  --pf-t--global--box-shadow--color--200: rgba(0, 0, 0, 0.1200);
@@ -263,6 +280,20 @@
263
280
  --pf-t--global--spacer--300: 16px;
264
281
  --pf-t--global--spacer--200: 8px;
265
282
  --pf-t--global--spacer--100: 4px;
283
+ --pf-t--global--motion--timing-function--decelerate: var(--pf-t--global--timing-function--300);
284
+ --pf-t--global--motion--timing-function--default: var(--pf-t--global--timing-function--200);
285
+ --pf-t--global--motion--timing-function--accelerate: var(--pf-t--global--timing-function--100);
286
+ --pf-t--global--motion--delay--long: var(--pf-t--global--delay--400);
287
+ --pf-t--global--motion--delay--default: var(--pf-t--global--delay--300);
288
+ --pf-t--global--motion--delay--short: var(--pf-t--global--delay--200);
289
+ --pf-t--global--motion--delay--none: var(--pf-t--global--delay--100);
290
+ --pf-t--global--motion--duration--3xl: var(--pf-t--global--duration--600);
291
+ --pf-t--global--motion--duration--2xl: var(--pf-t--global--duration--500);
292
+ --pf-t--global--motion--duration--xl: var(--pf-t--global--duration--400);
293
+ --pf-t--global--motion--duration--lg: var(--pf-t--global--duration--300);
294
+ --pf-t--global--motion--duration--md: var(--pf-t--global--duration--200);
295
+ --pf-t--global--motion--duration--sm: var(--pf-t--global--duration--100);
296
+ --pf-t--global--motion--duration--xs: var(--pf-t--global--duration--50);
266
297
  --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
267
298
  --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
268
299
  --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
@@ -332,6 +363,11 @@
332
363
  --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
333
364
  --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
334
365
  --pf-t--global--background--color--100: var(--pf-t--color--white);
366
+ --pf-t--global--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550);
367
+ --pf-t--global--breakpoint--height--xl: var(--pf-t--global--breakpoint--350);
368
+ --pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300);
369
+ --pf-t--global--breakpoint--height--md: var(--pf-t--global--breakpoint--250);
370
+ --pf-t--global--breakpoint--height--sm: var(--pf-t--global--breakpoint--100);
335
371
  --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600);
336
372
  --pf-t--global--breakpoint--xl: var(--pf-t--global--breakpoint--500);
337
373
  --pf-t--global--breakpoint--lg: var(--pf-t--global--breakpoint--400);
@@ -413,10 +449,10 @@
413
449
  --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100);
414
450
  --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
415
451
  --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
416
- --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
417
452
  --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
418
453
  --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
419
454
  --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
455
+ --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
420
456
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
421
457
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
422
458
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
@@ -446,6 +482,18 @@
446
482
  --pf-t--global--spacer--md: var(--pf-t--global--spacer--300);
447
483
  --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200);
448
484
  --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
485
+ --pf-t--global--motion--duration--icon--long: var(--pf-t--global--motion--duration--md);
486
+ --pf-t--global--motion--duration--icon--default: var(--pf-t--global--motion--duration--sm);
487
+ --pf-t--global--motion--duration--icon--short: var(--pf-t--global--motion--duration--xs);
488
+ --pf-t--global--motion--duration--slide-in--long: var(--pf-t--global--motion--duration--2xl);
489
+ --pf-t--global--motion--duration--slide-in--default: var(--pf-t--global--motion--duration--xl);
490
+ --pf-t--global--motion--duration--slide-in--short: var(--pf-t--global--motion--duration--lg);
491
+ --pf-t--global--motion--duration--slide-out--long: var(--pf-t--global--motion--duration--2xl);
492
+ --pf-t--global--motion--duration--slide-out--default: var(--pf-t--global--motion--duration--xl);
493
+ --pf-t--global--motion--duration--slide-out--short: var(--pf-t--global--motion--duration--lg);
494
+ --pf-t--global--motion--duration--fade--long: var(--pf-t--global--motion--duration--lg);
495
+ --pf-t--global--motion--duration--fade--default: var(--pf-t--global--motion--duration--md);
496
+ --pf-t--global--motion--duration--fade--short: var(--pf-t--global--motion--duration--sm);
449
497
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
450
498
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
451
499
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
package/base/tokens/tokens-charts-dark.scss CHANGED
@@ -1,14 +1,18 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 09 May 2024 17:55:04 GMT
3
+ // Generated on Thu, 16 May 2024 15:08:07 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
+ --pf-t--chart--global--stroke-line-join: round;
6
7
  --pf-t--chart--global--layout--width: 450;
7
8
  --pf-t--chart--global--layout--height: 300;
8
9
  --pf-t--chart--global--layout--padding: 50;
9
- --pf-t--chart--global--label--stroke--width: 0;
10
+ --pf-t--chart--global--label--text-anchor: middle;
11
+ --pf-t--chart--global--label--stroke: transparent;
10
12
  --pf-t--chart--global--label--margin: 8;
11
13
  --pf-t--chart--global--label--padding: 10;
14
+ --pf-t--chart--global--stroke-line-cap: round;
15
+ --pf-t--chart--global--letter-spacing: normal;
12
16
  --pf-t--chart--global--FontSize--2xl: 22;
13
17
  --pf-t--chart--global--FontSize--lg: 18;
14
18
  --pf-t--chart--global--FontSize--sm: 14;
package/base/tokens/tokens-charts.scss CHANGED
@@ -1,14 +1,18 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 09 May 2024 17:55:04 GMT
3
+ // Generated on Thu, 16 May 2024 15:08:07 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
+ --pf-t--chart--global--stroke-line-join: round;
6
7
  --pf-t--chart--global--layout--width: 450;
7
8
  --pf-t--chart--global--layout--height: 300;
8
9
  --pf-t--chart--global--layout--padding: 50;
9
- --pf-t--chart--global--label--stroke--width: 0;
10
+ --pf-t--chart--global--label--text-anchor: middle;
11
+ --pf-t--chart--global--label--stroke: transparent;
10
12
  --pf-t--chart--global--label--margin: 8;
11
13
  --pf-t--chart--global--label--padding: 10;
14
+ --pf-t--chart--global--stroke-line-cap: round;
15
+ --pf-t--chart--global--letter-spacing: normal;
12
16
  --pf-t--chart--global--FontSize--2xl: 22;
13
17
  --pf-t--chart--global--FontSize--lg: 18;
14
18
  --pf-t--chart--global--FontSize--sm: 14;
package/base/tokens/tokens-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 09 May 2024 17:55:04 GMT
3
+ // Generated on Thu, 16 May 2024 15:08:07 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
package/base/tokens/tokens-default.scss CHANGED
@@ -1,15 +1,32 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 09 May 2024 17:55:04 GMT
3
+ // Generated on Thu, 16 May 2024 15:08:07 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
+ --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1);
7
+ --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1);
8
+ --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2);
9
+ --pf-t--global--delay--400: 7000ms;
10
+ --pf-t--global--delay--300: 100ms;
11
+ --pf-t--global--delay--200: 50ms;
12
+ --pf-t--global--delay--100: 0ms;
13
+ --pf-t--global--duration--600: 600ms;
14
+ --pf-t--global--duration--500: 500ms;
15
+ --pf-t--global--duration--400: 400ms;
16
+ --pf-t--global--duration--300: 300ms;
17
+ --pf-t--global--duration--200: 200ms;
18
+ --pf-t--global--duration--100: 100ms;
19
+ --pf-t--global--duration--50: 50ms;
6
20
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
7
21
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
8
22
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
9
23
  --pf-t--global--breakpoint--600: 1450px;
24
+ --pf-t--global--breakpoint--550: 1280px;
10
25
  --pf-t--global--breakpoint--500: 1200px;
11
26
  --pf-t--global--breakpoint--400: 992px;
27
+ --pf-t--global--breakpoint--350: 960px;
12
28
  --pf-t--global--breakpoint--300: 768px;
29
+ --pf-t--global--breakpoint--250: 640px;
13
30
  --pf-t--global--breakpoint--200: 576px;
14
31
  --pf-t--global--breakpoint--100: 0px;
15
32
  --pf-t--global--box-shadow--color--200: rgba(0, 0, 0, 0.1200);
@@ -69,6 +86,20 @@
69
86
  --pf-t--global--spacer--300: 16px;
70
87
  --pf-t--global--spacer--200: 8px;
71
88
  --pf-t--global--spacer--100: 4px;
89
+ --pf-t--global--motion--timing-function--decelerate: var(--pf-t--global--timing-function--300);
90
+ --pf-t--global--motion--timing-function--default: var(--pf-t--global--timing-function--200);
91
+ --pf-t--global--motion--timing-function--accelerate: var(--pf-t--global--timing-function--100);
92
+ --pf-t--global--motion--delay--long: var(--pf-t--global--delay--400);
93
+ --pf-t--global--motion--delay--default: var(--pf-t--global--delay--300);
94
+ --pf-t--global--motion--delay--short: var(--pf-t--global--delay--200);
95
+ --pf-t--global--motion--delay--none: var(--pf-t--global--delay--100);
96
+ --pf-t--global--motion--duration--3xl: var(--pf-t--global--duration--600);
97
+ --pf-t--global--motion--duration--2xl: var(--pf-t--global--duration--500);
98
+ --pf-t--global--motion--duration--xl: var(--pf-t--global--duration--400);
99
+ --pf-t--global--motion--duration--lg: var(--pf-t--global--duration--300);
100
+ --pf-t--global--motion--duration--md: var(--pf-t--global--duration--200);
101
+ --pf-t--global--motion--duration--sm: var(--pf-t--global--duration--100);
102
+ --pf-t--global--motion--duration--xs: var(--pf-t--global--duration--50);
72
103
  --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
73
104
  --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
74
105
  --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
@@ -138,6 +169,11 @@
138
169
  --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
139
170
  --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
140
171
  --pf-t--global--background--color--100: var(--pf-t--color--white);
172
+ --pf-t--global--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550);
173
+ --pf-t--global--breakpoint--height--xl: var(--pf-t--global--breakpoint--350);
174
+ --pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300);
175
+ --pf-t--global--breakpoint--height--md: var(--pf-t--global--breakpoint--250);
176
+ --pf-t--global--breakpoint--height--sm: var(--pf-t--global--breakpoint--100);
141
177
  --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600);
142
178
  --pf-t--global--breakpoint--xl: var(--pf-t--global--breakpoint--500);
143
179
  --pf-t--global--breakpoint--lg: var(--pf-t--global--breakpoint--400);
@@ -219,10 +255,10 @@
219
255
  --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100);
220
256
  --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
221
257
  --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
222
- --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
223
258
  --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
224
259
  --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
225
260
  --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
261
+ --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
226
262
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
227
263
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
228
264
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
@@ -252,6 +288,18 @@
252
288
  --pf-t--global--spacer--md: var(--pf-t--global--spacer--300);
253
289
  --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200);
254
290
  --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
291
+ --pf-t--global--motion--duration--icon--long: var(--pf-t--global--motion--duration--md);
292
+ --pf-t--global--motion--duration--icon--default: var(--pf-t--global--motion--duration--sm);
293
+ --pf-t--global--motion--duration--icon--short: var(--pf-t--global--motion--duration--xs);
294
+ --pf-t--global--motion--duration--slide-in--long: var(--pf-t--global--motion--duration--2xl);
295
+ --pf-t--global--motion--duration--slide-in--default: var(--pf-t--global--motion--duration--xl);
296
+ --pf-t--global--motion--duration--slide-in--short: var(--pf-t--global--motion--duration--lg);
297
+ --pf-t--global--motion--duration--slide-out--long: var(--pf-t--global--motion--duration--2xl);
298
+ --pf-t--global--motion--duration--slide-out--default: var(--pf-t--global--motion--duration--xl);
299
+ --pf-t--global--motion--duration--slide-out--short: var(--pf-t--global--motion--duration--lg);
300
+ --pf-t--global--motion--duration--fade--long: var(--pf-t--global--motion--duration--lg);
301
+ --pf-t--global--motion--duration--fade--default: var(--pf-t--global--motion--duration--md);
302
+ --pf-t--global--motion--duration--fade--short: var(--pf-t--global--motion--duration--sm);
255
303
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
256
304
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
257
305
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
package/base/tokens/tokens-palette.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 09 May 2024 17:55:04 GMT
3
+ // Generated on Thu, 16 May 2024 15:08:07 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--color--red--70: #5f0000;
package/components/LogViewer/log-viewer.css CHANGED
@@ -33,9 +33,9 @@
33
33
  --pf-v6-c-log-viewer__text--WhiteSpace: break-spaces;
34
34
  --pf-v6-c-log-viewer__text--LineBreak: anywhere;
35
35
  --pf-v6-c-log-viewer--m-nowrap__text--WhiteSpace: nowrap;
36
- --pf-v6-c-log-viewer__string--m-match--Color: initial;
36
+ --pf-v6-c-log-viewer__string--m-match--Color: var(--pf-t--global--text--color--on-highlight);
37
37
  --pf-v6-c-log-viewer__string--m-match--BackgroundColor: var(--pf-t--global--background--color--highlight--default);
38
- --pf-v6-c-log-viewer__string--m-current--Color: initial;
38
+ --pf-v6-c-log-viewer__string--m-current--Color: var(--pf-t--global--text--color--on-highlight);
39
39
  --pf-v6-c-log-viewer__string--m-current--BackgroundColor: var(--pf-t--global--background--color--highlight--clicked);
40
40
  --pf-v6-c-log-viewer__timestamp--FontWeight: var(--pf-t--global--font--weight--body--bold);
41
41
  --pf-v6-c-log-viewer--c-toolbar--PaddingBlockStart: 0;
package/components/LogViewer/log-viewer.scss CHANGED
@@ -49,9 +49,9 @@
49
49
  --#{$log-viewer}__text--WhiteSpace: break-spaces;
50
50
  --#{$log-viewer}__text--LineBreak: anywhere;
51
51
  --#{$log-viewer}--m-nowrap__text--WhiteSpace: nowrap;
52
- --#{$log-viewer}__string--m-match--Color: initial;
52
+ --#{$log-viewer}__string--m-match--Color: var(--pf-t--global--text--color--on-highlight);
53
53
  --#{$log-viewer}__string--m-match--BackgroundColor: var(--pf-t--global--background--color--highlight--default);
54
- --#{$log-viewer}__string--m-current--Color: initial;
54
+ --#{$log-viewer}__string--m-current--Color: var(--pf-t--global--text--color--on-highlight);
55
55
  --#{$log-viewer}__string--m-current--BackgroundColor: var(--pf-t--global--background--color--highlight--clicked);
56
56
 
57
57
  // Timestamp
package/components/Page/page.css CHANGED
@@ -414,7 +414,8 @@
414
414
  }
415
415
 
416
416
  .pf-v6-c-page__main-container {
417
- align-self: start;
417
+ display: flex;
418
+ flex-direction: column;
418
419
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
419
420
  margin-block-start: 0;
420
421
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
package/components/Page/page.scss CHANGED
@@ -314,7 +314,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
314
314
 
315
315
  // Main & Drawer
316
316
  .#{$page}__main-container {
317
- align-self: start;
317
+ display: flex;
318
+ flex-direction: column;
318
319
  max-height: var(--#{$page}__main-container--MaxHeight);
319
320
  margin-block-start: 0;
320
321
  margin-inline-start: var(--#{$page}__main-container--MarginInlineStart);
package/components/Wizard/wizard.css CHANGED
@@ -103,13 +103,10 @@
103
103
  --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--xs);
104
104
  --pf-v6-c-wizard__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
105
105
  --pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
106
- --pf-v6-c-wizard__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
106
+ --pf-v6-c-wizard__footer--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
107
107
  --pf-v6-c-wizard__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
108
108
  --pf-v6-c-wizard__footer--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
109
109
  --pf-v6-c-wizard__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
110
- --pf-v6-c-wizard__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
111
- --pf-v6-c-wizard__footer--child--MarginBlockEnd: var(--pf-t--global--spacer--sm);
112
- --pf-v6-c-wizard__footer-cancel--MarginInlineStart: calc(var(--pf-t--global--spacer--2xl) - var(--pf-v6-c-wizard__footer--child--MarginInlineEnd));
113
110
  }
114
111
  @media screen and (min-width: 992px) {
115
112
  :where(:root, .pf-v6-c-wizard) {
@@ -343,10 +340,6 @@
343
340
  .pf-v6-c-wizard__nav-item.pf-m-expanded > .pf-v6-c-wizard__nav-link {
344
341
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: var(--pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate);
345
342
  }
346
- .pf-v6-c-wizard__nav-item :where(:hover) {
347
- --pf-v6-c-wizard__nav-link--Color: var({$wizard}__nav-link--hover--Color);
348
- --pf-v6-c-wizard__nav-link-main--BackgroundColor: var({$wizard}__nav-link--hover--BackgroundColor);
349
- }
350
343
 
351
344
  .pf-v6-c-wizard__nav-link {
352
345
  position: relative;
@@ -469,23 +462,10 @@
469
462
  .pf-v6-c-wizard__footer {
470
463
  position: relative;
471
464
  z-index: var(--pf-v6-c-wizard__footer--ZIndex);
472
- display: flex;
473
- flex-shrink: 0;
474
- flex-wrap: wrap;
475
465
  padding-block-start: var(--pf-v6-c-wizard__footer--PaddingBlockStart);
476
466
  padding-block-end: var(--pf-v6-c-wizard__footer--PaddingBlockEnd);
477
467
  padding-inline-start: var(--pf-v6-c-wizard__footer--PaddingInlineStart);
478
468
  padding-inline-end: var(--pf-v6-c-wizard__footer--PaddingInlineEnd);
479
469
  background-color: var(--pf-v6-c-wizard__footer--BackgroundColor);
480
470
  border-block-start: var(--pf-v6-c-wizard__footer--BorderBlockStartWidth) solid var(--pf-v6-c-wizard__footer--BorderBlockStartColor);
481
- }
482
- .pf-v6-c-wizard__footer > * {
483
- margin-block-end: var(--pf-v6-c-wizard__footer--child--MarginBlockEnd);
484
- }
485
- .pf-v6-c-wizard__footer > *:not(:last-child) {
486
- margin-inline-end: var(--pf-v6-c-wizard__footer--child--MarginInlineEnd);
487
- }
488
-
489
- .pf-v6-c-wizard__footer-cancel {
490
- margin-inline-start: var(--pf-v6-c-wizard__footer-cancel--MarginInlineStart);
491
471
  }
package/components/Wizard/wizard.scss CHANGED
@@ -164,13 +164,10 @@
164
164
  --#{$wizard}__footer--ZIndex: var(--pf-t--global--z-index--xs);
165
165
  --#{$wizard}__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
166
166
  --#{$wizard}__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
167
- --#{$wizard}__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
167
+ --#{$wizard}__footer--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
168
168
  --#{$wizard}__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
169
169
  --#{$wizard}__footer--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
170
170
  --#{$wizard}__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
171
- --#{$wizard}__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
172
- --#{$wizard}__footer--child--MarginBlockEnd: var(--pf-t--global--spacer--sm);
173
- --#{$wizard}__footer-cancel--MarginInlineStart: calc(var(--pf-t--global--spacer--2xl) - var(--#{$wizard}__footer--child--MarginInlineEnd));
174
171
  }
175
172
 
176
173
  .#{$wizard} {
@@ -424,11 +421,6 @@
424
421
  --#{$wizard}__nav-link-toggle-icon--Rotate: var(--#{$wizard}__nav-item--m-expanded__link-toggle-icon--Rotate);
425
422
  }
426
423
  }
427
-
428
- :where(:hover) {
429
- --#{$wizard}__nav-link--Color: var({$wizard}__nav-link--hover--Color);
430
- --#{$wizard}__nav-link-main--BackgroundColor: var({$wizard}__nav-link--hover--BackgroundColor);
431
- }
432
424
  }
433
425
 
434
426
  .#{$wizard}__nav-link {
@@ -490,7 +482,7 @@
490
482
  &:where(:hover, :focus) {
491
483
  --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--hover--Color);
492
484
  --#{$wizard}__nav-link-main--BackgroundColor: var(--#{$wizard}__nav-link--hover--BackgroundColor);
493
- }
485
+ }
494
486
 
495
487
  // override the button background/color for disabled nav links
496
488
  &:disabled,
@@ -566,27 +558,10 @@
566
558
  .#{$wizard}__footer {
567
559
  position: relative;
568
560
  z-index: var(--#{$wizard}__footer--ZIndex);
569
- display: flex;
570
- flex-shrink: 0;
571
- flex-wrap: wrap;
572
561
  padding-block-start: var(--#{$wizard}__footer--PaddingBlockStart);
573
562
  padding-block-end: var(--#{$wizard}__footer--PaddingBlockEnd);
574
563
  padding-inline-start: var(--#{$wizard}__footer--PaddingInlineStart);
575
564
  padding-inline-end: var(--#{$wizard}__footer--PaddingInlineEnd);
576
565
  background-color: var(--#{$wizard}__footer--BackgroundColor);
577
566
  border-block-start: var(--#{$wizard}__footer--BorderBlockStartWidth) solid var(--#{$wizard}__footer--BorderBlockStartColor);
578
-
579
- > * {
580
- margin-block-end: var(--#{$wizard}__footer--child--MarginBlockEnd);
581
-
582
- &:not(:last-child) {
583
- margin-inline-end: var(--#{$wizard}__footer--child--MarginInlineEnd);
584
- }
585
- }
586
567
  }
587
-
588
- .#{$wizard}__footer-cancel {
589
- margin-inline-start: var(--#{$wizard}__footer-cancel--MarginInlineStart);
590
- }
591
-
592
-
package/components/_index.css CHANGED
@@ -8513,9 +8513,9 @@ ul.pf-v6-c-list {
8513
8513
  --pf-v6-c-log-viewer__text--WhiteSpace: break-spaces;
8514
8514
  --pf-v6-c-log-viewer__text--LineBreak: anywhere;
8515
8515
  --pf-v6-c-log-viewer--m-nowrap__text--WhiteSpace: nowrap;
8516
- --pf-v6-c-log-viewer__string--m-match--Color: initial;
8516
+ --pf-v6-c-log-viewer__string--m-match--Color: var(--pf-t--global--text--color--on-highlight);
8517
8517
  --pf-v6-c-log-viewer__string--m-match--BackgroundColor: var(--pf-t--global--background--color--highlight--default);
8518
- --pf-v6-c-log-viewer__string--m-current--Color: initial;
8518
+ --pf-v6-c-log-viewer__string--m-current--Color: var(--pf-t--global--text--color--on-highlight);
8519
8519
  --pf-v6-c-log-viewer__string--m-current--BackgroundColor: var(--pf-t--global--background--color--highlight--clicked);
8520
8520
  --pf-v6-c-log-viewer__timestamp--FontWeight: var(--pf-t--global--font--weight--body--bold);
8521
8521
  --pf-v6-c-log-viewer--c-toolbar--PaddingBlockStart: 0;
@@ -11831,7 +11831,8 @@ ul.pf-v6-c-list {
11831
11831
  }
11832
11832
 
11833
11833
  .pf-v6-c-page__main-container {
11834
- align-self: start;
11834
+ display: flex;
11835
+ flex-direction: column;
11835
11836
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
11836
11837
  margin-block-start: 0;
11837
11838
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
@@ -23027,13 +23028,10 @@ label.pf-v6-c-tree-view__node-text {
23027
23028
  --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--xs);
23028
23029
  --pf-v6-c-wizard__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
23029
23030
  --pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
23030
- --pf-v6-c-wizard__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
23031
+ --pf-v6-c-wizard__footer--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
23031
23032
  --pf-v6-c-wizard__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
23032
23033
  --pf-v6-c-wizard__footer--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
23033
23034
  --pf-v6-c-wizard__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
23034
- --pf-v6-c-wizard__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
23035
- --pf-v6-c-wizard__footer--child--MarginBlockEnd: var(--pf-t--global--spacer--sm);
23036
- --pf-v6-c-wizard__footer-cancel--MarginInlineStart: calc(var(--pf-t--global--spacer--2xl) - var(--pf-v6-c-wizard__footer--child--MarginInlineEnd));
23037
23035
  }
23038
23036
  @media screen and (min-width: 992px) {
23039
23037
  :where(:root, .pf-v6-c-wizard) {
@@ -23267,10 +23265,6 @@ label.pf-v6-c-tree-view__node-text {
23267
23265
  .pf-v6-c-wizard__nav-item.pf-m-expanded > .pf-v6-c-wizard__nav-link {
23268
23266
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: var(--pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate);
23269
23267
  }
23270
- .pf-v6-c-wizard__nav-item :where(:hover) {
23271
- --pf-v6-c-wizard__nav-link--Color: var({$wizard}__nav-link--hover--Color);
23272
- --pf-v6-c-wizard__nav-link-main--BackgroundColor: var({$wizard}__nav-link--hover--BackgroundColor);
23273
- }
23274
23268
 
23275
23269
  .pf-v6-c-wizard__nav-link {
23276
23270
  position: relative;
@@ -23393,23 +23387,10 @@ label.pf-v6-c-tree-view__node-text {
23393
23387
  .pf-v6-c-wizard__footer {
23394
23388
  position: relative;
23395
23389
  z-index: var(--pf-v6-c-wizard__footer--ZIndex);
23396
- display: flex;
23397
- flex-shrink: 0;
23398
- flex-wrap: wrap;
23399
23390
  padding-block-start: var(--pf-v6-c-wizard__footer--PaddingBlockStart);
23400
23391
  padding-block-end: var(--pf-v6-c-wizard__footer--PaddingBlockEnd);
23401
23392
  padding-inline-start: var(--pf-v6-c-wizard__footer--PaddingInlineStart);
23402
23393
  padding-inline-end: var(--pf-v6-c-wizard__footer--PaddingInlineEnd);
23403
23394
  background-color: var(--pf-v6-c-wizard__footer--BackgroundColor);
23404
23395
  border-block-start: var(--pf-v6-c-wizard__footer--BorderBlockStartWidth) solid var(--pf-v6-c-wizard__footer--BorderBlockStartColor);
23405
- }
23406
- .pf-v6-c-wizard__footer > * {
23407
- margin-block-end: var(--pf-v6-c-wizard__footer--child--MarginBlockEnd);
23408
- }
23409
- .pf-v6-c-wizard__footer > *:not(:last-child) {
23410
- margin-inline-end: var(--pf-v6-c-wizard__footer--child--MarginInlineEnd);
23411
- }
23412
-
23413
- .pf-v6-c-wizard__footer-cancel {
23414
- margin-inline-start: var(--pf-v6-c-wizard__footer-cancel--MarginInlineStart);
23415
23396
  }