@patternfly/patternfly 6.0.0-alpha.134 → 6.0.0-alpha.136

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 (24) 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/Page/page.css +2 -1
  8. package/components/Page/page.scss +2 -1
  9. package/components/Toolbar/toolbar.css +108 -54
  10. package/components/Toolbar/toolbar.scss +2 -1
  11. package/components/Wizard/wizard.css +1 -21
  12. package/components/Wizard/wizard.scss +2 -27
  13. package/components/_index.css +111 -76
  14. package/docs/components/Toolbar/examples/Toolbar.md +6 -3
  15. package/docs/components/Wizard/examples/Wizard.md +115 -32
  16. package/docs/demos/Wizard/examples/Wizard.md +195 -54
  17. package/package.json +1 -1
  18. package/patternfly-base-no-globals.css +49 -1
  19. package/patternfly-base.css +49 -1
  20. package/patternfly-charts.css +10 -2
  21. package/patternfly-no-globals.css +160 -77
  22. package/patternfly.css +160 -77
  23. package/patternfly.min.css +1 -1
  24. 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/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);