@patternfly/patternfly 6.0.0-alpha.104 → 6.0.0-alpha.106

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 (22) 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/Label/label.css +14 -0
  8. package/components/Label/label.scss +19 -0
  9. package/components/MenuToggle/menu-toggle.css +24 -0
  10. package/components/MenuToggle/menu-toggle.scss +36 -0
  11. package/docs/components/Label/examples/Label.md +1781 -56
  12. package/docs/components/MenuToggle/examples/MenuToggle.md +64 -0
  13. package/package.json +1 -1
  14. package/patternfly-base-no-globals-theme-dark-unversioned.css +22 -19
  15. package/patternfly-base-no-globals.css +22 -19
  16. package/patternfly-base-theme-dark-unversioned.css +22 -19
  17. package/patternfly-base.css +22 -19
  18. package/patternfly-no-globals.css +60 -19
  19. package/patternfly-theme-dark-unversioned.css +60 -19
  20. package/patternfly.css +60 -19
  21. package/patternfly.min.css +1 -1
  22. 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/Label/label.css CHANGED
@@ -186,6 +186,10 @@
186
186
  --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
187
187
  --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
188
188
  --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
189
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
190
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
191
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
192
+ --pf-v6-c-label--m-disabled--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
189
193
  }
190
194
 
191
195
  .pf-v6-c-label {
@@ -420,6 +424,16 @@
420
424
  .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
421
425
  --pf-v6-c-label--m-filled__actions--c-button--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
422
426
  }
427
+ .pf-v6-c-label.pf-m-disabled {
428
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
429
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
430
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
431
+ --pf-v6-c-label--BorderWidth: 0;
432
+ pointer-events: none;
433
+ }
434
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
435
+ --pf-v6-c-button--m-plain--disabled--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled--Color);
436
+ }
423
437
 
424
438
  .pf-v6-c-label,
425
439
  .pf-v6-c-label__content {
package/components/Label/label.scss CHANGED
@@ -243,6 +243,12 @@
243
243
  --#{$label}--m-editable--m-editable-active--BackgroundColor: transparent;
244
244
  --#{$label}--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
245
245
  --#{$label}--m-editable--m-editable-active__content--Cursor: initial;
246
+
247
+ // Disabled
248
+ --#{$label}--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
249
+ --#{$label}--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
250
+ --#{$label}--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
251
+ --#{$label}--m-disabled--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
246
252
  }
247
253
 
248
254
  .#{$label} {
@@ -508,6 +514,19 @@
508
514
  }
509
515
  }
510
516
  }
517
+
518
+ &.pf-m-disabled {
519
+ --#{$label}--BackgroundColor: var(--#{$label}--m-disabled--BackgroundColor);
520
+ --#{$label}--Color: var(--#{$label}--m-disabled--Color);
521
+ --#{$label}__icon--Color: var(--#{$label}--m-disabled__icon--Color);
522
+ --#{$label}--BorderWidth: 0;
523
+
524
+ pointer-events: none;
525
+
526
+ .#{$button} {
527
+ --#{$button}--m-plain--disabled--Color: var(--#{$label}--m-disabled--c-button--disabled--Color);
528
+ }
529
+ }
511
530
  }
512
531
 
513
532
  .#{$label},
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
+ }