@patternfly/patternfly 6.0.0-alpha.103 → 6.0.0-alpha.105

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 (49) hide show
  1. package/base/patternfly-variables.css +22 -19
  2. package/base/tokens/_tokens-charts.scss +6 -6
  3. package/base/tokens/_tokens-dark.scss +4 -3
  4. package/base/tokens/_tokens-default.scss +20 -18
  5. package/base/tokens/_tokens-palette.scss +1 -1
  6. package/components/Drawer/drawer.css +5 -4
  7. package/components/Drawer/drawer.scss +7 -6
  8. package/components/FormControl/form-control.scss +1 -1
  9. package/components/MenuToggle/menu-toggle.css +24 -0
  10. package/components/MenuToggle/menu-toggle.scss +36 -0
  11. package/components/Page/page.css +24 -23
  12. package/components/Page/page.scss +24 -23
  13. package/docs/components/Drawer/examples/Drawer.md +2 -1
  14. package/docs/components/MenuToggle/examples/MenuToggle.md +64 -0
  15. package/docs/components/Page/deprecated/PageHeader.md +113 -99
  16. package/docs/components/Page/examples/Page.md +114 -100
  17. package/docs/demos/AboutModal/examples/AboutModal.md +81 -79
  18. package/docs/demos/Alert/examples/Alert.md +551 -524
  19. package/docs/demos/BackToTop/examples/BackToTop.md +211 -209
  20. package/docs/demos/Banner/examples/Banner.md +420 -412
  21. package/docs/demos/CardView/examples/CardView.md +1302 -1297
  22. package/docs/demos/ContextSelector/examples/ContextSelector.md +536 -523
  23. package/docs/demos/Dashboard/examples/Dashboard.md +1344 -1314
  24. package/docs/demos/DataList/examples/DataList.md +3006 -2958
  25. package/docs/demos/DescriptionList/examples/DescriptionList.md +532 -518
  26. package/docs/demos/Drawer/examples/Drawer.md +544 -528
  27. package/docs/demos/JumpLinks/examples/JumpLinks.md +915 -897
  28. package/docs/demos/Masthead/examples/Masthead.md +729 -711
  29. package/docs/demos/Modal/examples/Modal.md +486 -474
  30. package/docs/demos/Nav/examples/Nav.md +528 -510
  31. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +440 -435
  32. package/docs/demos/Page/examples/Page.md +1656 -1633
  33. package/docs/demos/Page/examples/Penta.md +632 -577
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5222 -5080
  35. package/docs/demos/Skeleton/examples/Skeleton.md +177 -175
  36. package/docs/demos/Table/examples/Table.md +14137 -13972
  37. package/docs/demos/Tabs/examples/Tabs.md +2206 -2138
  38. package/docs/demos/Toolbar/examples/Toolbar.md +1322 -1269
  39. package/docs/demos/Wizard/examples/Wizard.md +1571 -1553
  40. package/package.json +1 -1
  41. package/patternfly-base-no-globals-theme-dark-unversioned.css +22 -19
  42. package/patternfly-base-no-globals.css +22 -19
  43. package/patternfly-base-theme-dark-unversioned.css +22 -19
  44. package/patternfly-base.css +22 -19
  45. package/patternfly-no-globals.css +75 -46
  46. package/patternfly-theme-dark-unversioned.css +75 -46
  47. package/patternfly.css +75 -46
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
package/base/patternfly-variables.css CHANGED
@@ -537,18 +537,18 @@ html .ws-preview {
537
537
  --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
538
538
  --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
539
539
  --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
540
- --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--60);
541
- --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--50);
540
+ --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
541
+ --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
542
542
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
543
543
  --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
544
544
  --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--70);
545
- --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--60);
546
- --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--50);
545
+ --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
546
+ --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
547
547
  --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
548
548
  --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
549
549
  --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
550
- --pf-t--global--color--status--success--200: var(--pf-t--color--green--60);
551
- --pf-t--global--color--status--success--100: var(--pf-t--color--green--50);
550
+ --pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
551
+ --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
552
552
  --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
553
553
  --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
554
554
  --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
@@ -619,6 +619,7 @@ html .ws-preview {
619
619
  --pf-t--global--font--size--md: var(--pf-t--global--font--size--300);
620
620
  --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200);
621
621
  --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100);
622
+ --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
622
623
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
623
624
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
624
625
  --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
@@ -667,9 +668,6 @@ html .ws-preview {
667
668
  --pf-t--global--spacer--md: var(--pf-t--global--spacer--300);
668
669
  --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200);
669
670
  --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
670
- --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--300);
671
- --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--300);
672
- --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--200);
673
671
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
674
672
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
675
673
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
@@ -781,6 +779,7 @@ html .ws-preview {
781
779
  --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--300);
782
780
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300);
783
781
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200);
782
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--300);
784
783
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
785
784
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
786
785
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
@@ -832,13 +831,13 @@ html .ws-preview {
832
831
  --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular);
833
832
  --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
834
833
  --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
835
- --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--regular);
834
+ --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
836
835
  --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
837
836
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
838
837
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
839
838
  --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
840
839
  --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
841
- --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--regular);
840
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
842
841
  --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
843
842
  --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
844
843
  --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -850,13 +849,16 @@ html .ws-preview {
850
849
  --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
851
850
  --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
852
851
  --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
853
- --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--regular);
852
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
853
+ --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
854
+ --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
855
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
854
856
  --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--regular);
855
857
  --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--regular);
856
858
  --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--regular);
857
859
  --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
858
860
  --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
859
- --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--regular);
861
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
860
862
  --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
861
863
  --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
862
864
  --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default);
@@ -921,13 +923,13 @@ html .ws-preview {
921
923
  --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
922
924
  --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
923
925
  --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
924
- --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--regular);
926
+ --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
925
927
  --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
926
928
  --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
927
929
  --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
928
930
  --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
929
931
  --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
930
- --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--regular);
932
+ --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
931
933
  --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
932
934
  --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
933
935
  --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -939,7 +941,7 @@ html .ws-preview {
939
941
  --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
940
942
  --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
941
943
  --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
942
- --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--regular);
944
+ --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
943
945
  --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
944
946
  --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
945
947
  --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
@@ -948,7 +950,7 @@ html .ws-preview {
948
950
  --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--regular);
949
951
  --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
950
952
  --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
951
- --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--regular);
953
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
952
954
  --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
953
955
  --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
954
956
  --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default);
@@ -1023,8 +1025,8 @@ html .ws-preview {
1023
1025
  --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--10);
1024
1026
  --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--20);
1025
1027
  --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--30);
1026
- --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--20);
1027
- --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--30);
1028
+ --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30);
1029
+ --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40);
1028
1030
  --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20);
1029
1031
  --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30);
1030
1032
  --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20);
@@ -1091,6 +1093,7 @@ html .ws-preview {
1091
1093
  --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
1092
1094
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
1093
1095
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
1096
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
1094
1097
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
1095
1098
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
1096
1099
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
package/base/tokens/_tokens-charts.scss CHANGED
@@ -1,14 +1,14 @@
1
1
  // /**
2
2
  // * Do not edit directly
3
- // * Generated on Tue, 20 Feb 2024 01:08:05 GMT
3
+ // * Generated on Thu, 21 Mar 2024 17:46:16 GMT
4
4
  // */
5
5
 
6
6
  :root {
7
- --pf-t--chart--stroke--width--sm: 2px;
8
- --pf-t--chart--stroke--width--xs: 1px;
9
- --pf-t--chart--BorderWidth--lg: 8px;
10
- --pf-t--chart--BorderWidth--sm: 2px;
11
- --pf-t--chart--BorderWidth--xs: 1px;
7
+ --pf-t--chart--stroke--width--sm: 2;
8
+ --pf-t--chart--stroke--width--xs: 1;
9
+ --pf-t--chart--BorderWidth--lg: 8;
10
+ --pf-t--chart--BorderWidth--sm: 2;
11
+ --pf-t--chart--BorderWidth--xs: 1;
12
12
  --pf-t--chart--color--fills-and-strokes--fill--color--white: var(--pf-t--color--white);
13
13
  --pf-t--chart--color--fills-and-strokes--fill--color--900: var(--pf-t--color--gray--90);
14
14
  --pf-t--chart--color--fills-and-strokes--fill--color--700: var(--pf-t--color--gray--70);
package/base/tokens/_tokens-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  // /**
2
2
  // * Do not edit directly
3
- // * Generated on Tue, 20 Feb 2024 01:08:05 GMT
3
+ // * Generated on Thu, 21 Mar 2024 17:46:16 GMT
4
4
  // */
5
5
 
6
6
  :root:where(.pf-v5-theme-dark) {
@@ -53,8 +53,8 @@
53
53
  --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--10);
54
54
  --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--20);
55
55
  --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--30);
56
- --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--20);
57
- --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--30);
56
+ --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30);
57
+ --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40);
58
58
  --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20);
59
59
  --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30);
60
60
  --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20);
@@ -121,6 +121,7 @@
121
121
  --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
122
122
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
123
123
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
124
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
124
125
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
125
126
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
126
127
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
package/base/tokens/_tokens-default.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  // /**
2
2
  // * Do not edit directly
3
- // * Generated on Tue, 20 Feb 2024 01:08:05 GMT
3
+ // * Generated on Thu, 21 Mar 2024 17:46:16 GMT
4
4
  // */
5
5
 
6
6
  :root {
@@ -98,18 +98,18 @@
98
98
  --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
99
99
  --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
100
100
  --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
101
- --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--60);
102
- --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--50);
101
+ --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
102
+ --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
103
103
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
104
104
  --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
105
105
  --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--70);
106
- --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--60);
107
- --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--50);
106
+ --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
107
+ --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
108
108
  --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
109
109
  --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
110
110
  --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
111
- --pf-t--global--color--status--success--200: var(--pf-t--color--green--60);
112
- --pf-t--global--color--status--success--100: var(--pf-t--color--green--50);
111
+ --pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
112
+ --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
113
113
  --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
114
114
  --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
115
115
  --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
@@ -180,6 +180,7 @@
180
180
  --pf-t--global--font--size--md: var(--pf-t--global--font--size--300);
181
181
  --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200);
182
182
  --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100);
183
+ --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
183
184
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
184
185
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
185
186
  --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
@@ -228,9 +229,6 @@
228
229
  --pf-t--global--spacer--md: var(--pf-t--global--spacer--300);
229
230
  --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200);
230
231
  --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
231
- --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--300);
232
- --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--300);
233
- --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--200);
234
232
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
235
233
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
236
234
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
@@ -342,6 +340,7 @@
342
340
  --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--300);
343
341
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300);
344
342
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200);
343
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--300);
345
344
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
346
345
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
347
346
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
@@ -393,13 +392,13 @@
393
392
  --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular);
394
393
  --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
395
394
  --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
396
- --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--regular);
395
+ --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
397
396
  --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
398
397
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
399
398
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
400
399
  --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
401
400
  --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
402
- --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--regular);
401
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
403
402
  --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
404
403
  --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
405
404
  --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -411,13 +410,16 @@
411
410
  --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
412
411
  --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
413
412
  --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
414
- --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--regular);
413
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
414
+ --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
415
+ --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
416
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
415
417
  --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--regular);
416
418
  --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--regular);
417
419
  --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--regular);
418
420
  --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
419
421
  --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
420
- --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--regular);
422
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
421
423
  --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
422
424
  --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
423
425
  --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default);
@@ -482,13 +484,13 @@
482
484
  --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
483
485
  --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
484
486
  --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
485
- --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--regular);
487
+ --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
486
488
  --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
487
489
  --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
488
490
  --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
489
491
  --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
490
492
  --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
491
- --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--regular);
493
+ --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
492
494
  --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
493
495
  --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
494
496
  --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -500,7 +502,7 @@
500
502
  --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
501
503
  --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
502
504
  --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
503
- --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--regular);
505
+ --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
504
506
  --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
505
507
  --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
506
508
  --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
@@ -509,7 +511,7 @@
509
511
  --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--regular);
510
512
  --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
511
513
  --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
512
- --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--regular);
514
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
513
515
  --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
514
516
  --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
515
517
  --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default);
package/base/tokens/_tokens-palette.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  // /**
2
2
  // * Do not edit directly
3
- // * Generated on Tue, 20 Feb 2024 01:08:05 GMT
3
+ // * Generated on Thu, 21 Mar 2024 17:46:16 GMT
4
4
  // */
5
5
 
6
6
  :root {
package/components/Drawer/drawer.css CHANGED
@@ -3,7 +3,8 @@
3
3
  --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
4
4
  --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
5
5
  --pf-v6-c-drawer__content--FlexBasis: 100%;
6
- --pf-v6-c-drawer__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
6
+ --pf-v6-c-drawer__content--BackgroundColor: transparent;
7
+ --pf-v6-c-drawer__content--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
7
8
  --pf-v6-c-drawer__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
8
9
  --pf-v6-c-drawer__content--ZIndex: var(--pf-t--global--Zindex--xs);
9
10
  --pf-v6-c-drawer__panel--MinWidth: 50%;
@@ -204,12 +205,12 @@
204
205
  order: 0;
205
206
  background-color: var(--pf-v6-c-drawer__content--BackgroundColor);
206
207
  }
208
+ .pf-v6-c-drawer__content.pf-m-primary {
209
+ --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-primary--BackgroundColor);
210
+ }
207
211
  .pf-v6-c-drawer__content.pf-m-secondary {
208
212
  --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-secondary--BackgroundColor);
209
213
  }
210
- .pf-v6-c-drawer__content.pf-m-no-background {
211
- --pf-v6-c-drawer__content--BackgroundColor: transparent;
212
- }
213
214
  .pf-v6-c-drawer__content > .pf-v6-c-drawer__body {
214
215
  padding-block-start: var(--pf-v6-c-drawer__content__body--PaddingTop);
215
216
  padding-block-end: var(--pf-v6-c-drawer__content__body--PaddingBottom);
package/components/Drawer/drawer.scss CHANGED
@@ -11,7 +11,8 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
11
11
 
12
12
  // Content
13
13
  --#{$drawer}__content--FlexBasis: 100%;
14
- --#{$drawer}__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14
+ --#{$drawer}__content--BackgroundColor: transparent;
15
+ --#{$drawer}__content--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
15
16
  --#{$drawer}__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
16
17
  --#{$drawer}__content--ZIndex: var(--pf-t--global--Zindex--xs);
17
18
 
@@ -266,14 +267,14 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
266
267
  order: 0;
267
268
  background-color: var(--#{$drawer}__content--BackgroundColor);
268
269
 
269
- &.pf-m-secondary {
270
- --#{$drawer}__content--BackgroundColor: var(--#{$drawer}__content--m-secondary--BackgroundColor);
270
+ &.pf-m-primary {
271
+ --#{$drawer}__content--BackgroundColor: var(--#{$drawer}__content--m-primary--BackgroundColor);
271
272
  }
272
273
 
273
- &.pf-m-no-background {
274
- --#{$drawer}__content--BackgroundColor: transparent;
274
+ &.pf-m-secondary {
275
+ --#{$drawer}__content--BackgroundColor: var(--#{$drawer}__content--m-secondary--BackgroundColor);
275
276
  }
276
-
277
+
277
278
  > .#{$drawer}__body {
278
279
  padding-block-start: var(--#{$drawer}__content__body--PaddingTop);
279
280
  padding-block-end: var(--#{$drawer}__content__body--PaddingBottom);
package/components/FormControl/form-control.scss CHANGED
@@ -351,4 +351,4 @@
351
351
 
352
352
  select ~ .#{$form-control}__utilities {
353
353
  --pf-v5-c-form-control__utilities--PaddingRight: 0;
354
- }
354
+ }
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -107,6 +107,13 @@
107
107
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
108
108
  --pf-v6-c-menu-toggle--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
109
109
  --pf-v6-c-menu-toggle--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
110
+ --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
111
+ --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
112
+ --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
113
+ --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
114
+ --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
115
+ --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
116
+ --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
110
117
  }
111
118
 
112
119
  .pf-v6-c-menu-toggle {
@@ -241,6 +248,18 @@
241
248
  .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
242
249
  background-color: transparent;
243
250
  }
251
+ .pf-v6-c-menu-toggle.pf-m-success {
252
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
253
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
254
+ }
255
+ .pf-v6-c-menu-toggle.pf-m-warning {
256
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
257
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
258
+ }
259
+ .pf-v6-c-menu-toggle.pf-m-danger {
260
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
261
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
262
+ }
244
263
 
245
264
  .pf-v6-c-menu-toggle.pf-m-split-button {
246
265
  --pf-v6-c-menu-toggle--ColumnGap: 0;
@@ -381,4 +400,9 @@
381
400
  .pf-v6-c-menu-toggle__toggle-icon {
382
401
  min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
383
402
  color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
403
+ }
404
+
405
+ .pf-v6-c-menu-toggle__status-icon {
406
+ margin-inline-end: var(--pf-v6-c-menu-toggle__status-icon--MarginInlineEnd);
407
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
384
408
  }
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -163,6 +163,21 @@
163
163
  // * Menu toggle small
164
164
  --#{$menu-toggle}--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
165
165
  --#{$menu-toggle}--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
166
+
167
+ // Status icon
168
+ --#{$menu-toggle}__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
169
+
170
+ // Success
171
+ --#{$menu-toggle}--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
172
+ --#{$menu-toggle}--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
173
+
174
+ // Warning
175
+ --#{$menu-toggle}--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
176
+ --#{$menu-toggle}--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
177
+
178
+ // Danger
179
+ --#{$menu-toggle}--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
180
+ --#{$menu-toggle}--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
166
181
  }
167
182
 
168
183
  .#{$menu-toggle} {
@@ -320,6 +335,21 @@
320
335
  &:has(.#{$button}) {
321
336
  background-color: transparent;
322
337
  }
338
+
339
+ &.pf-m-success {
340
+ --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--m-success--BorderColor);
341
+ --#{$menu-toggle}__status-icon--Color: var(--#{$menu-toggle}--m-success__status-icon--Color);
342
+ }
343
+
344
+ &.pf-m-warning {
345
+ --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--m-warning--BorderColor);
346
+ --#{$menu-toggle}__status-icon--Color: var(--#{$menu-toggle}--m-warning__status-icon--Color);
347
+ }
348
+
349
+ &.pf-m-danger {
350
+ --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--m-danger--BorderColor);
351
+ --#{$menu-toggle}__status-icon--Color: var(--#{$menu-toggle}--m-danger__status-icon--Color);
352
+ }
323
353
  }
324
354
 
325
355
  // - Menu toggle split button
@@ -504,3 +534,9 @@
504
534
  min-height: var(--#{$menu-toggle}__toggle-icon--MinHeight);
505
535
  color: var(--#{$menu-toggle}__toggle-icon--Color, inherit);
506
536
  }
537
+
538
+ // - Menu toggle status icon
539
+ .#{$menu-toggle}__status-icon {
540
+ margin-inline-end: var(--#{$menu-toggle}__status-icon--MarginInlineEnd);
541
+ color: var(--#{$menu-toggle}__status-icon--Color, inherit);
542
+ }
package/components/Page/page.css CHANGED
@@ -121,19 +121,19 @@
121
121
  --pf-v6-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-t--global--border--color--default);
122
122
  --pf-v6-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-t--global--border--width--button--default);
123
123
  --pf-v6-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-t--global--border--color--default);
124
- --pf-v6-c-page__main--ZIndex: var(--pf-v6-global--ZIndex--xs);
125
- --pf-v6-c-page__main--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
126
- --pf-v6-c-page__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
127
- --pf-v6-c-page__main--MarginInlineStart: var(--pf-t--global--spacer--lg);
128
- --pf-v6-c-page__main--MarginInlineEnd: var(--pf-t--global--spacer--lg);
129
- --pf-v6-c-page__main--BorderRadius: var(--pf-t--global--border--radius--large);
130
- --pf-v6-c-page__main--BorderWidth: var(--pf-t--global--spacer--sm);
131
- --pf-v6-c-page__main--BorderColor: var(--pf-v6-c-page__main--BackgroundColor);
124
+ --pf-v6-c-page__main-container--ZIndex: var(--pf-v6-global--ZIndex--xs);
125
+ --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
126
+ --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
127
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-t--global--spacer--lg);
128
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-t--global--spacer--lg);
129
+ --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--large);
130
+ --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--spacer--sm);
131
+ --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
132
132
  --pf-v6-c-page__main-section--MarginTop: var(--pf-t--global--spacer--md);
133
133
  --pf-v6-c-page__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
134
134
  --pf-v6-c-page__main-section--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
135
135
  --pf-v6-c-page__main-section--PaddingBottom: 0;
136
- --pf-v6-c-page__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
136
+ --pf-v6-c-page__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
137
137
  --pf-v6-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
138
138
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
139
139
  --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -161,9 +161,9 @@
161
161
  --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
162
162
  --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
163
163
  --pf-v6-c-page__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);
164
- --pf-v6-c-page__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
164
+ --pf-v6-c-page__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
165
165
  --pf-v6-c-page__main-breadcrumb--PaddingBottom: 0;
166
- --pf-v6-c-page__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
166
+ --pf-v6-c-page__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
167
167
  --pf-v6-c-page__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
168
168
  --pf-v6-c-page__main-tabs--PaddingTop: 0;
169
169
  --pf-v6-c-page__main-tabs--PaddingRight: 0;
@@ -209,7 +209,7 @@
209
209
  }
210
210
  @media (min-width: 1200px) {
211
211
  .pf-v6-c-page {
212
- grid-template-areas: "header header" "nav main";
212
+ grid-template-areas: "header header" "sidebar main";
213
213
  grid-template-columns: max-content 1fr;
214
214
  }
215
215
  }
@@ -321,7 +321,7 @@
321
321
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
322
322
  display: flex;
323
323
  flex-direction: column;
324
- grid-area: nav;
324
+ grid-area: sidebar;
325
325
  grid-row-start: 2;
326
326
  grid-column-start: 1;
327
327
  width: var(--pf-v6-c-page__sidebar--Width);
@@ -633,26 +633,27 @@
633
633
  }
634
634
  }
635
635
 
636
- .pf-v6-c-page__main {
636
+ .pf-v6-c-page__main-container {
637
637
  align-self: start;
638
- max-height: var(--pf-v6-c-page__main--MaxHeight);
638
+ max-height: var(--pf-v6-c-page__main-container--MaxHeight);
639
639
  margin-block-start: 0;
640
- margin-inline-start: var(--pf-v6-c-page__main--MarginInlineStart);
641
- margin-inline-end: var(--pf-v6-c-page__main--MarginInlineEnd);
642
- background: var(--pf-v6-c-page__main--BackgroundColor);
643
- border: var(--pf-v6-c-page__main--BorderWidth) solid var(--pf-v6-c-page__main--BorderColor);
644
- border-radius: var(--pf-v6-c-page__main--BorderRadius);
640
+ margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
641
+ margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
642
+ overflow: auto;
643
+ background: var(--pf-v6-c-page__main-container--BackgroundColor);
644
+ border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
645
+ border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
645
646
  }
646
647
 
647
- .pf-v6-c-page__main,
648
+ .pf-v6-c-page__main-container,
648
649
  .pf-v6-c-page__drawer {
649
- z-index: var(--pf-v6-c-page__main--ZIndex);
650
+ z-index: var(--pf-v6-c-page__main-container--ZIndex);
650
651
  grid-area: main;
651
652
  overflow-x: hidden;
652
653
  overflow-y: auto;
653
654
  -webkit-overflow-scrolling: touch;
654
655
  }
655
- .pf-v6-c-page__main:focus,
656
+ .pf-v6-c-page__main-container:focus,
656
657
  .pf-v6-c-page__drawer:focus {
657
658
  outline: 0;
658
659
  }