@patternfly/patternfly 6.0.0-alpha.104 → 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 (19) 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/FormControl/form-control.scss +1 -1
  7. package/components/MenuToggle/menu-toggle.css +24 -0
  8. package/components/MenuToggle/menu-toggle.scss +36 -0
  9. package/docs/components/MenuToggle/examples/MenuToggle.md +64 -0
  10. package/package.json +1 -1
  11. package/patternfly-base-no-globals-theme-dark-unversioned.css +22 -19
  12. package/patternfly-base-no-globals.css +22 -19
  13. package/patternfly-base-theme-dark-unversioned.css +22 -19
  14. package/patternfly-base.css +22 -19
  15. package/patternfly-no-globals.css +46 -19
  16. package/patternfly-theme-dark-unversioned.css +46 -19
  17. package/patternfly.css +46 -19
  18. package/patternfly.min.css +1 -1
  19. 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/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/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -1101,6 +1101,67 @@ cssPrefix: pf-v6-c-menu-toggle
1101
1101
 
1102
1102
  ```
1103
1103
 
1104
+ ### Status
1105
+
1106
+ ```html isBeta
1107
+ <button
1108
+ class="pf-v6-c-menu-toggle pf-m-success"
1109
+ type="button"
1110
+ aria-expanded="false"
1111
+ >
1112
+ <span class="pf-v6-c-menu-toggle__text">Success</span>
1113
+ <span class="pf-v6-c-menu-toggle__controls">
1114
+ <span class="pf-v6-c-menu-toggle__status-icon">
1115
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
1116
+ </span>
1117
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1118
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1119
+ </span>
1120
+ </span>
1121
+ </button>
1122
+
1123
+ <br />
1124
+ <br />
1125
+
1126
+ <button
1127
+ class="pf-v6-c-menu-toggle pf-m-warning"
1128
+ type="button"
1129
+ aria-expanded="false"
1130
+ >
1131
+ <span class="pf-v6-c-menu-toggle__text">Warning</span>
1132
+ <span class="pf-v6-c-menu-toggle__controls">
1133
+ <span class="pf-v6-c-menu-toggle__status-icon">
1134
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1135
+ </span>
1136
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1137
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1138
+ </span>
1139
+ </span>
1140
+ </button>
1141
+
1142
+ <br />
1143
+ <br />
1144
+
1145
+ <button
1146
+ class="pf-v6-c-menu-toggle pf-m-danger"
1147
+ type="button"
1148
+ aria-expanded="false"
1149
+ >
1150
+ <span class="pf-v6-c-menu-toggle__text">Danger</span>
1151
+ <span class="pf-v6-c-menu-toggle__controls">
1152
+ <span class="pf-v6-c-menu-toggle__status-icon">
1153
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1154
+ </span>
1155
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1156
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1157
+ </span>
1158
+ </span>
1159
+ </button>
1160
+
1161
+ ```
1162
+
1163
+ ## Documentation
1164
+
1104
1165
  ### Accessibility
1105
1166
 
1106
1167
  | Class | Applied to | Outcome |
@@ -1131,3 +1192,6 @@ cssPrefix: pf-v6-c-menu-toggle
1131
1192
  | `.pf-m-expanded` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
1132
1193
  | `.pf-m-full-height` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
1133
1194
  | `.pf-m-full-width` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to full width of parent. |
1195
+ | `.pf-m-success` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the success state. |
1196
+ | `.pf-m-warning` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the warning state. |
1197
+ | `.pf-m-danger` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the danger state. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.104",
4
+ "version": "6.0.0-alpha.105",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {