@patternfly/patternfly 6.0.0-alpha.123 → 6.0.0-alpha.125

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 (29) hide show
  1. package/base/patternfly-variables.css +30 -4
  2. package/base/tokens/tokens-charts-dark.scss +1 -1
  3. package/base/tokens/tokens-charts.scss +1 -1
  4. package/base/tokens/tokens-dark.scss +16 -3
  5. package/base/tokens/tokens-default.scss +16 -3
  6. package/base/tokens/tokens-palette.scss +1 -1
  7. package/components/DataList/data-list.css +2 -2
  8. package/components/DataList/data-list.scss +2 -2
  9. package/components/Page/page.css +2 -230
  10. package/components/Page/page.scss +3 -158
  11. package/components/Wizard/wizard.css +5 -4
  12. package/components/Wizard/wizard.scss +5 -4
  13. package/components/_index.css +9 -236
  14. package/docs/components/Nav/examples/Navigation.css +0 -5
  15. package/docs/utilities/Alignment/examples/Alignment.css +2 -2
  16. package/docs/utilities/Display/examples/Display.css +2 -2
  17. package/docs/utilities/Flex/examples/Flex.css +2 -2
  18. package/docs/utilities/Float/examples/Float.css +3 -3
  19. package/docs/utilities/Sizing/examples/Sizing.css +2 -2
  20. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  21. package/package.json +5 -5
  22. package/patternfly-base-no-globals.css +30 -4
  23. package/patternfly-base.css +30 -4
  24. package/patternfly-no-globals.css +39 -240
  25. package/patternfly.css +39 -240
  26. package/patternfly.min.css +1 -1
  27. package/patternfly.min.css.map +1 -1
  28. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  29. package/docs/components/Page/deprecated/PageHeader.md +0 -275
package/base/patternfly-variables.css CHANGED
@@ -291,6 +291,12 @@
291
291
  --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
292
292
  --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
293
293
  --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
294
+ --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60);
295
+ --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50);
296
+ --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40);
297
+ --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50);
298
+ --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40);
299
+ --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30);
294
300
  --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
295
301
  --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
296
302
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
@@ -431,6 +437,7 @@
431
437
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
432
438
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
433
439
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
440
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100);
434
441
  --pf-t--global--text--color--required: var(--pf-t--global--text--color--400);
435
442
  --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
436
443
  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
@@ -540,12 +547,19 @@
540
547
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300);
541
548
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200);
542
549
  --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--300);
550
+ --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
543
551
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
544
552
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
545
553
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
546
554
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
547
555
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
548
556
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
557
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--color--severity--critical--100);
558
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--100);
559
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--100);
560
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--100);
561
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--100);
562
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--100);
549
563
  --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
550
564
  --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
551
565
  --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
@@ -630,15 +644,14 @@
630
644
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
631
645
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
632
646
  --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
633
- --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
634
647
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
648
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
635
649
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
636
650
  --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
637
651
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
638
652
  --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
639
653
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
640
654
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
641
- --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
642
655
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
643
656
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
644
657
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -797,6 +810,12 @@
797
810
  --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
798
811
  --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30);
799
812
  --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
813
+ --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50);
814
+ --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40);
815
+ --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30);
816
+ --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30);
817
+ --pf-t--global--dark--color--severity--none--100: var(--pf-t--color--blue--30);
818
+ --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40);
800
819
  --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
801
820
  --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
802
821
  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
@@ -814,6 +833,7 @@
814
833
  --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--300);
815
834
  --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
816
835
  --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250);
836
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--dark--text--color--300);
817
837
  --pf-t--global--text--color--required: var(--pf-t--global--dark--text--color--400);
818
838
  --pf-t--global--text--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
819
839
  --pf-t--global--text--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
@@ -854,9 +874,16 @@
854
874
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
855
875
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
856
876
  --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
877
+ --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
857
878
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
858
879
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
859
880
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
881
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--dark--color--severity--critical--100);
882
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--dark--color--severity--important--100);
883
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--dark--color--severity--moderate--100);
884
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--dark--color--severity--minor--100);
885
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--dark--color--severity--none--100);
886
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--dark--color--severity--undefined--100);
860
887
  --pf-t--global--icon--color--on-disabled: var(--pf-t--global--dark--color--disabled--300);
861
888
  --pf-t--global--icon--color--disabled: var(--pf-t--global--dark--color--disabled--200);
862
889
  --pf-t--global--icon--color--inverse: var(--pf-t--global--dark--icon--color--300);
@@ -994,7 +1021,6 @@
994
1021
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
995
1022
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
996
1023
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
997
- --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
998
1024
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
999
1025
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
1000
1026
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -1084,8 +1110,8 @@
1084
1110
  --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
1085
1111
  --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
1086
1112
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
1087
- --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
1088
1113
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
1114
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
1089
1115
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
1090
1116
  --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
1091
1117
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
package/base/tokens/tokens-charts-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 01 May 2024 14:26:30 GMT
3
+ // Generated on Tue, 07 May 2024 18:55:09 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--layout--width: 450;
package/base/tokens/tokens-charts.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 01 May 2024 14:26:30 GMT
3
+ // Generated on Tue, 07 May 2024 18:55:09 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--layout--width: 450;
package/base/tokens/tokens-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 01 May 2024 14:26:30 GMT
3
+ // Generated on Tue, 07 May 2024 18:55:09 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);
@@ -64,6 +64,12 @@
64
64
  --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
65
65
  --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30);
66
66
  --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
67
+ --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50);
68
+ --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40);
69
+ --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30);
70
+ --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30);
71
+ --pf-t--global--dark--color--severity--none--100: var(--pf-t--color--blue--30);
72
+ --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40);
67
73
  --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
68
74
  --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
69
75
  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
@@ -81,6 +87,7 @@
81
87
  --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--300);
82
88
  --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
83
89
  --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250);
90
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--dark--text--color--300);
84
91
  --pf-t--global--text--color--required: var(--pf-t--global--dark--text--color--400);
85
92
  --pf-t--global--text--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
86
93
  --pf-t--global--text--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
@@ -121,9 +128,16 @@
121
128
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
122
129
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
123
130
  --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
131
+ --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
124
132
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
125
133
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
126
134
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
135
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--dark--color--severity--critical--100);
136
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--dark--color--severity--important--100);
137
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--dark--color--severity--moderate--100);
138
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--dark--color--severity--minor--100);
139
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--dark--color--severity--none--100);
140
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--dark--color--severity--undefined--100);
127
141
  --pf-t--global--icon--color--on-disabled: var(--pf-t--global--dark--color--disabled--300);
128
142
  --pf-t--global--icon--color--disabled: var(--pf-t--global--dark--color--disabled--200);
129
143
  --pf-t--global--icon--color--inverse: var(--pf-t--global--dark--icon--color--300);
@@ -261,7 +275,6 @@
261
275
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
262
276
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
263
277
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
264
- --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
265
278
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
266
279
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
267
280
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -351,8 +364,8 @@
351
364
  --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
352
365
  --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
353
366
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
354
- --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
355
367
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
368
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
356
369
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
357
370
  --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
358
371
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
package/base/tokens/tokens-default.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 01 May 2024 14:26:30 GMT
3
+ // Generated on Tue, 07 May 2024 18:55:08 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
@@ -97,6 +97,12 @@
97
97
  --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
98
98
  --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
99
99
  --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
100
+ --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60);
101
+ --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50);
102
+ --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40);
103
+ --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50);
104
+ --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40);
105
+ --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30);
100
106
  --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
101
107
  --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
102
108
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
@@ -237,6 +243,7 @@
237
243
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
238
244
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
239
245
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
246
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100);
240
247
  --pf-t--global--text--color--required: var(--pf-t--global--text--color--400);
241
248
  --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
242
249
  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
@@ -346,12 +353,19 @@
346
353
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300);
347
354
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200);
348
355
  --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--300);
356
+ --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
349
357
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
350
358
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
351
359
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
352
360
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
353
361
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
354
362
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
363
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--color--severity--critical--100);
364
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--100);
365
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--100);
366
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--100);
367
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--100);
368
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--100);
355
369
  --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
356
370
  --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
357
371
  --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
@@ -436,15 +450,14 @@
436
450
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
437
451
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
438
452
  --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
439
- --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
440
453
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
454
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
441
455
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
442
456
  --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
443
457
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
444
458
  --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
445
459
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
446
460
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
447
- --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
448
461
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
449
462
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
450
463
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
package/base/tokens/tokens-palette.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Wed, 01 May 2024 14:26:30 GMT
3
+ // Generated on Tue, 07 May 2024 18:55:09 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--color--red--70: #5f0000;
package/components/DataList/data-list.css CHANGED
@@ -408,7 +408,7 @@
408
408
  --pf-v6-c-data-list--FontSize: var( --pf-t--global--font--size--body);
409
409
  --pf-v6-c-data-list--LineHeight: var(--pf-t--global--font--line-height--body);
410
410
  --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-t--global--border--color--default);
411
- --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-t--global--spacer--sm);
411
+ --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
412
412
  --pf-v6-c-data-list--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
413
413
  --pf-v6-c-data-list--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default);
414
414
  --pf-v6-c-data-list--MarginInlineStart: var(--pf-t--global--spacer--md);
@@ -417,7 +417,7 @@
417
417
  --pf-v6-c-data-list__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
418
418
  --pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
419
419
  --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-t--global--border--color--default);
420
- --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-t--global--spacer--sm);
420
+ --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-t--global--border--width--strong);
421
421
  --pf-v6-c-data-list__item--sm--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
422
422
  --pf-v6-c-data-list__item--sm--BorderBlockEndColor: var(--pf-t--global--border--color--default);
423
423
  --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-t--global--spacer--md);
package/components/DataList/data-list.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  --#{$data-list}--FontSize: var( --pf-t--global--font--size--body);
6
6
  --#{$data-list}--LineHeight: var(--pf-t--global--font--line-height--body);
7
7
  --#{$data-list}--BorderBlockStartColor: var(--pf-t--global--border--color--default);
8
- --#{$data-list}--BorderBlockStartWidth: var(--pf-t--global--spacer--sm);
8
+ --#{$data-list}--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
9
9
  --#{$data-list}--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
10
10
  --#{$data-list}--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default);
11
11
  --#{$data-list}--MarginInlineStart: var(--pf-t--global--spacer--md);
@@ -21,7 +21,7 @@
21
21
  --#{$data-list}__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
22
22
  --#{$data-list}__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
23
23
  --#{$data-list}__item--BorderBlockEndColor: var(--pf-t--global--border--color--default);
24
- --#{$data-list}__item--BorderBlockEndWidth: var(--pf-t--global--spacer--sm);
24
+ --#{$data-list}__item--BorderBlockEndWidth: var(--pf-t--global--border--width--strong);
25
25
  --#{$data-list}__item--sm--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
26
26
  --#{$data-list}__item--sm--BorderBlockEndColor: var(--pf-t--global--border--color--default);
27
27
 
package/components/Page/page.css CHANGED
@@ -2,32 +2,7 @@
2
2
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
3
3
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--md);
4
4
  --pf-v6-c-page--xl--inset: var(--pf-t--global--spacer--xl);
5
- --pf-v6-c-page__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
6
- --pf-v6-c-page__header--ZIndex: var(--pf-t--global--z-index--md);
7
- --pf-v6-c-page__header--MinHeight: 4.75rem;
8
- --pf-v6-c-page__header-brand--PaddingInlineStart: var(--pf-t--global--spacer--md);
9
- --pf-v6-c-page__header-brand--xl--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
10
- --pf-v6-c-page__header-brand--xl--PaddingInlineStart: var(--pf-t--global--spacer--xl);
11
- --pf-v6-c-page__header-sidebar-toggle__c-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
12
- --pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
13
- --pf-v6-c-page__header-sidebar-toggle__c-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
14
- --pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
15
- --pf-v6-c-page__header-sidebar-toggle__c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
16
- --pf-v6-c-page__header-sidebar-toggle__c-button--MarginInlineStart: calc(var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineStart) * -1);
17
- --pf-v6-c-page__header-sidebar-toggle__c-button--FontSize: var(--pf-t--global--icon--size--lg);
18
- --pf-v6-c-page__header-brand-link--c-brand--MaxHeight: 3.75rem;
19
- --pf-v6-c-page__header-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
20
- --pf-v6-c-page__header-nav--xl--BackgroundColor: transparent;
21
- --pf-v6-c-page__header-nav--xl--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
22
- --pf-v6-c-page__header-nav--xl--PaddingInlineStart: var(--pf-t--global--spacer--xl);
23
- --pf-v6-c-page__header-tools--MarginInlineEnd: var(--pf-t--global--spacer--md);
24
- --pf-v6-c-page__header-tools--xl--MarginInlineEnd: var(--pf-t--global--spacer--lg);
25
- --pf-v6-c-page__header-tools--c-avatar--MarginInlineStart: var(--pf-t--global--spacer--md);
26
- --pf-v6-c-page__header-tools-group--MarginInlineStart: var(--pf-t--global--spacer--xl);
27
- --pf-v6-c-page__header-tools-group--Display: flex;
28
- --pf-v6-c-page__header-tools-item--Display: block;
29
- --pf-v6-c-page__header-tools--c-button--m-selected--before--Width: auto;
30
- --pf-v6-c-page__header-tools--c-button--m-selected--before--Height: auto;
5
+ --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
31
6
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
32
7
  --pf-v6-c-page__sidebar--Width: 18.125rem;
33
8
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -111,22 +86,9 @@
111
86
  }
112
87
  @media (min-width: 1200px) {
113
88
  :where(:root, .pf-v6-c-page) {
114
- --pf-v6-c-page__header-brand--PaddingInlineStart: var(--pf-v6-c-page__header-brand--xl--PaddingInlineStart);
115
89
  --pf-v6-c-page--inset: var(--pf-v6-c-page--xl--inset);
116
90
  }
117
91
  }
118
- @media screen and (min-width: 1200px) {
119
- :where(:root, .pf-v6-c-page) {
120
- --pf-v6-c-page__header-nav--BackgroundColor: var(--pf-v6-c-page__header-nav--xl--BackgroundColor);
121
- --pf-v6-c-page__header-nav--PaddingInlineEnd: var(--pf-v6-c-page__header-nav--xl--PaddingInlineEnd);
122
- --pf-v6-c-page__header-nav--PaddingInlineStart: var(--pf-v6-c-page__header-nav--xl--PaddingInlineStart);
123
- }
124
- }
125
- @media screen and (min-width: 1200px) {
126
- :where(:root, .pf-v6-c-page) {
127
- --pf-v6-c-page__header-tools--MarginInlineEnd: var(--pf-v6-c-page__header-tools--xl--MarginInlineEnd);
128
- }
129
- }
130
92
  @media screen and (min-width: 1200px) {
131
93
  :where(:root, .pf-v6-c-page) {
132
94
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
@@ -150,201 +112,11 @@
150
112
  }
151
113
  }
152
114
 
153
- .pf-v6-c-page__header,
154
115
  .pf-v6-c-page > .pf-v6-c-masthead {
155
- z-index: var(--pf-v6-c-page__header--ZIndex);
116
+ z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
156
117
  grid-area: header;
157
118
  }
158
119
 
159
- .pf-v6-c-page__header {
160
- display: grid;
161
- grid-template-columns: auto auto;
162
- align-items: center;
163
- min-width: 0;
164
- min-height: var(--pf-v6-c-page__header--MinHeight);
165
- background-color: var(--pf-v6-c-page__header--BackgroundColor);
166
- }
167
- .pf-v6-c-page__header > * {
168
- display: flex;
169
- align-items: center;
170
- }
171
- @media screen and (min-width: 992px) {
172
- .pf-v6-c-page__header {
173
- grid-template-columns: auto 1fr auto;
174
- }
175
- }
176
- .pf-v6-c-page__header .pf-v6-c-masthead {
177
- grid-column: span 2;
178
- align-self: stretch;
179
- }
180
-
181
- .pf-v6-c-page__header-brand {
182
- grid-column: 1/2;
183
- padding-inline-start: var(--pf-v6-c-page__header-brand--PaddingInlineStart);
184
- }
185
- @media (min-width: 1200px) {
186
- .pf-v6-c-page__header-brand {
187
- padding-inline-end: var(--pf-v6-c-page__header-brand--xl--PaddingInlineEnd);
188
- }
189
- }
190
-
191
- .pf-v6-c-page__header-brand-link {
192
- display: flex;
193
- flex: 1;
194
- align-items: center;
195
- }
196
- .pf-v6-c-page__header-brand-link .pf-v6-c-brand {
197
- max-height: var(--pf-v6-c-page__header-brand-link--c-brand--MaxHeight);
198
- }
199
-
200
- .pf-v6-c-page__header-brand-toggle .pf-v6-c-button {
201
- padding-block-start: var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingBlockStart);
202
- padding-block-end: var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingBlockEnd);
203
- padding-inline-start: var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineStart);
204
- padding-inline-end: var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineEnd);
205
- margin-inline-start: var(--pf-v6-c-page__header-sidebar-toggle__c-button--MarginInlineStart);
206
- margin-inline-end: var(--pf-v6-c-page__header-sidebar-toggle__c-button--MarginInlineEnd);
207
- font-size: var(--pf-v6-c-page__header-sidebar-toggle__c-button--FontSize);
208
- line-height: 1;
209
- }
210
-
211
- .pf-v6-c-page__header-nav {
212
- grid-row: 2/3;
213
- grid-column: 1/-1;
214
- align-self: stretch;
215
- min-width: 0;
216
- padding-inline-start: var(--pf-v6-c-page__header-nav--PaddingInlineStart);
217
- padding-inline-end: var(--pf-v6-c-page__header-nav--PaddingInlineEnd);
218
- background-color: var(--pf-v6-c-page__header-nav--BackgroundColor);
219
- }
220
- @media screen and (min-width: 1200px) {
221
- .pf-v6-c-page__header-nav {
222
- grid-row: 1/2;
223
- grid-column: 2/3;
224
- }
225
- }
226
- .pf-v6-c-page__header-nav .pf-v6-c-nav {
227
- align-self: stretch;
228
- }
229
-
230
- .pf-v6-c-page__header-tools {
231
- grid-column: 2/3;
232
- margin-inline-start: auto;
233
- margin-inline-end: var(--pf-v6-c-page__header-tools--MarginInlineEnd);
234
- }
235
- .pf-v6-c-page__header-tools .pf-v6-c-avatar {
236
- margin-inline-start: var(--pf-v6-c-page__header-tools--c-avatar--MarginInlineStart);
237
- }
238
- @media screen and (min-width: 992px) {
239
- .pf-v6-c-page__header-tools {
240
- grid-column: 3/4;
241
- }
242
- }
243
-
244
- .pf-v6-c-page__header-tools-group {
245
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-page__header-tools-group--Display);
246
- --pf-v6-hidden-visible--hidden--Display: none;
247
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
248
- display: var(--pf-v6-hidden-visible--Display);
249
- align-items: center;
250
- }
251
- .pf-v6-c-page__header-tools-group.pf-m-hidden {
252
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
253
- }
254
- @media screen and (min-width: 576px) {
255
- .pf-v6-c-page__header-tools-group.pf-m-hidden-on-sm {
256
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
257
- }
258
- .pf-v6-c-page__header-tools-group.pf-m-visible-on-sm {
259
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
260
- }
261
- }
262
- @media screen and (min-width: 768px) {
263
- .pf-v6-c-page__header-tools-group.pf-m-hidden-on-md {
264
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
265
- }
266
- .pf-v6-c-page__header-tools-group.pf-m-visible-on-md {
267
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
268
- }
269
- }
270
- @media screen and (min-width: 992px) {
271
- .pf-v6-c-page__header-tools-group.pf-m-hidden-on-lg {
272
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
273
- }
274
- .pf-v6-c-page__header-tools-group.pf-m-visible-on-lg {
275
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
276
- }
277
- }
278
- @media screen and (min-width: 1200px) {
279
- .pf-v6-c-page__header-tools-group.pf-m-hidden-on-xl {
280
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
281
- }
282
- .pf-v6-c-page__header-tools-group.pf-m-visible-on-xl {
283
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
284
- }
285
- }
286
- @media screen and (min-width: 1450px) {
287
- .pf-v6-c-page__header-tools-group.pf-m-hidden-on-2xl {
288
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
289
- }
290
- .pf-v6-c-page__header-tools-group.pf-m-visible-on-2xl {
291
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
292
- }
293
- }
294
- .pf-v6-c-page__header-tools-group + .pf-v6-c-page__header-tools-group {
295
- margin-inline-start: var(--pf-v6-c-page__header-tools-group--MarginInlineStart);
296
- }
297
-
298
- .pf-v6-c-page__header-tools-item {
299
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-page__header-tools-item--Display);
300
- --pf-v6-hidden-visible--hidden--Display: none;
301
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
302
- display: var(--pf-v6-hidden-visible--Display);
303
- }
304
- .pf-v6-c-page__header-tools-item.pf-m-hidden {
305
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
306
- }
307
- @media screen and (min-width: 576px) {
308
- .pf-v6-c-page__header-tools-item.pf-m-hidden-on-sm {
309
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
310
- }
311
- .pf-v6-c-page__header-tools-item.pf-m-visible-on-sm {
312
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
313
- }
314
- }
315
- @media screen and (min-width: 768px) {
316
- .pf-v6-c-page__header-tools-item.pf-m-hidden-on-md {
317
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
318
- }
319
- .pf-v6-c-page__header-tools-item.pf-m-visible-on-md {
320
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
321
- }
322
- }
323
- @media screen and (min-width: 992px) {
324
- .pf-v6-c-page__header-tools-item.pf-m-hidden-on-lg {
325
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
326
- }
327
- .pf-v6-c-page__header-tools-item.pf-m-visible-on-lg {
328
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
329
- }
330
- }
331
- @media screen and (min-width: 1200px) {
332
- .pf-v6-c-page__header-tools-item.pf-m-hidden-on-xl {
333
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
334
- }
335
- .pf-v6-c-page__header-tools-item.pf-m-visible-on-xl {
336
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
337
- }
338
- }
339
- @media screen and (min-width: 1450px) {
340
- .pf-v6-c-page__header-tools-item.pf-m-hidden-on-2xl {
341
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
342
- }
343
- .pf-v6-c-page__header-tools-item.pf-m-visible-on-2xl {
344
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
345
- }
346
- }
347
-
348
120
  .pf-v6-c-page__sidebar {
349
121
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
350
122
  display: flex;