@patternfly/patternfly 6.0.0-alpha.213 → 6.0.0-alpha.215

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 (23) hide show
  1. package/base/patternfly-variables.css +13 -13
  2. package/base/tokens/tokens-charts-dark.scss +1 -1
  3. package/base/tokens/tokens-charts.scss +1 -1
  4. package/base/tokens/tokens-dark.scss +14 -14
  5. package/base/tokens/tokens-default.scss +1 -1
  6. package/base/tokens/tokens-palette.scss +1 -1
  7. package/components/Slider/slider.css +5 -5
  8. package/components/Slider/slider.scss +5 -5
  9. package/components/_index.css +5 -93
  10. package/components/_index.scss +0 -1
  11. package/docs/components/Slider/examples/Slider.md +2 -2
  12. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +15 -33
  13. package/package.json +1 -1
  14. package/patternfly-base-no-globals.css +13 -13
  15. package/patternfly-base.css +13 -13
  16. package/patternfly-no-globals.css +18 -106
  17. package/patternfly.css +18 -106
  18. package/patternfly.min.css +1 -1
  19. package/patternfly.min.css.map +1 -1
  20. package/sass-utilities/namespaces-components.scss +0 -3
  21. package/components/NotificationBadge/notification-badge.css +0 -87
  22. package/components/NotificationBadge/notification-badge.scss +0 -108
  23. package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -258
package/base/patternfly-variables.css CHANGED
@@ -863,9 +863,9 @@
863
863
  --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
864
864
  --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20);
865
865
  --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10);
866
- --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--30);
867
- --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--20);
868
- --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--10);
866
+ --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
867
+ --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
868
+ --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
869
869
  --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
870
870
  --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
871
871
  --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
@@ -908,7 +908,7 @@
908
908
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
909
909
  --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
910
910
  --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
911
- --pf-t--global--dark--text--color--100: var(--pf-t--color--gray--10);
911
+ --pf-t--global--dark--text--color--100: var(--pf-t--color--white);
912
912
  --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
913
913
  --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
914
914
  --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
@@ -938,9 +938,9 @@
938
938
  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
939
939
  --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
940
940
  --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
941
- --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--200);
942
- --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--100);
943
- --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--200);
941
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300);
942
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200);
943
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300);
944
944
  --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
945
945
  --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
946
946
  --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
@@ -1074,9 +1074,9 @@
1074
1074
  --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse);
1075
1075
  --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse);
1076
1076
  --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse);
1077
- --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--inverse);
1078
- --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--inverse);
1079
- --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--inverse);
1077
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
1078
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
1079
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
1080
1080
  --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse);
1081
1081
  --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse);
1082
1082
  --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse);
@@ -1140,9 +1140,9 @@
1140
1140
  --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse);
1141
1141
  --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse);
1142
1142
  --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse);
1143
- --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--inverse);
1144
- --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--inverse);
1145
- --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--inverse);
1143
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
1144
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
1145
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
1146
1146
  --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse);
1147
1147
  --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse);
1148
1148
  --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse);
package/base/tokens/tokens-charts-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Jul 2024 22:27:54 GMT
3
+ // Generated on Thu, 15 Aug 2024 00:08:40 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-charts.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Jul 2024 22:27:54 GMT
3
+ // Generated on Thu, 15 Aug 2024 00:08:40 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Jul 2024 22:27:54 GMT
3
+ // Generated on Thu, 15 Aug 2024 00:08:40 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
@@ -32,9 +32,9 @@
32
32
  --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
33
33
  --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20);
34
34
  --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10);
35
- --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--30);
36
- --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--20);
37
- --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--10);
35
+ --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
36
+ --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
37
+ --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
38
38
  --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
39
39
  --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
40
40
  --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
@@ -77,7 +77,7 @@
77
77
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
78
78
  --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
79
79
  --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
80
- --pf-t--global--dark--text--color--100: var(--pf-t--color--gray--10);
80
+ --pf-t--global--dark--text--color--100: var(--pf-t--color--white);
81
81
  --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
82
82
  --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
83
83
  --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
@@ -107,9 +107,9 @@
107
107
  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
108
108
  --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
109
109
  --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
110
- --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--200);
111
- --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--100);
112
- --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--200);
110
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300);
111
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200);
112
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300);
113
113
  --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
114
114
  --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
115
115
  --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
@@ -243,9 +243,9 @@
243
243
  --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse);
244
244
  --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse);
245
245
  --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse);
246
- --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--inverse);
247
- --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--inverse);
248
- --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--inverse);
246
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
247
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
248
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
249
249
  --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse);
250
250
  --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse);
251
251
  --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse);
@@ -309,9 +309,9 @@
309
309
  --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse);
310
310
  --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse);
311
311
  --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse);
312
- --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--inverse);
313
- --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--inverse);
314
- --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--inverse);
312
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
313
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
314
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
315
315
  --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse);
316
316
  --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse);
317
317
  --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse);
package/base/tokens/tokens-default.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Jul 2024 22:27:54 GMT
3
+ // Generated on Thu, 15 Aug 2024 00:08:40 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
package/base/tokens/tokens-palette.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Jul 2024 22:27:54 GMT
3
+ // Generated on Thu, 15 Aug 2024 00:08:40 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--color--black: #000000;
package/components/Slider/slider.css CHANGED
@@ -4,19 +4,19 @@
4
4
  --pf-v6-c-slider__rail--PaddingBlockStart: var(--pf-t--global--spacer--md);
5
5
  --pf-v6-c-slider__rail--PaddingBlockEnd: var(--pf-t--global--spacer--md);
6
6
  --pf-v6-c-slider__rail-track--Height: 0.25rem;
7
- --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--border--color--default);
7
+ --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
8
8
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
9
9
  --pf-v6-c-slider__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
10
10
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v6-c-slider--value);
11
11
  --pf-v6-c-slider__steps--FontSize: var(--pf-t--global--font--size--sm);
12
12
  --pf-v6-c-slider__steps--Height: var(--pf-v6-c-slider__steps--FontSize);
13
13
  --pf-v6-c-slider__step-tick--InsetBlockStart: var(--pf-t--global--spacer--md);
14
- --pf-v6-c-slider__step-tick--Width: 0.25rem;
14
+ --pf-v6-c-slider__step-tick--Width: 0.15rem;
15
15
  --pf-v6-c-slider__step-tick--Height: 0.25rem;
16
- --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--subtle);
16
+ --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
17
17
  --pf-v6-c-slider__step-tick--TranslateX: -50%;
18
- --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--large);
19
- --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--brand--clicked);
18
+ --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--sharp);
19
+ --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--on-brand--default);
20
20
  --pf-v6-c-slider__step--first-child__step-tick--TranslateX: 0;
21
21
  --pf-v6-c-slider__step--last-child__step-tick--TranslateX: -100%;
22
22
  --pf-v6-c-slider__step-label--TranslateX: -50%;
package/components/Slider/slider.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  --#{$slider}__rail--PaddingBlockStart: var(--pf-t--global--spacer--md);
9
9
  --#{$slider}__rail--PaddingBlockEnd: var(--pf-t--global--spacer--md);
10
10
  --#{$slider}__rail-track--Height: #{pf-size-prem(4px)};
11
- --#{$slider}__rail-track--before--base--BackgroundColor: var(--pf-t--global--border--color--default);
11
+ --#{$slider}__rail-track--before--base--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
12
12
  --#{$slider}__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
13
13
  --#{$slider}__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
14
14
  --#{$slider}__rail-track--before--fill--BackgroundColor--gradient-stop: var(--#{$slider}--value);
@@ -19,12 +19,12 @@
19
19
 
20
20
  // step tick
21
21
  --#{$slider}__step-tick--InsetBlockStart: var(--pf-t--global--spacer--md);
22
- --#{$slider}__step-tick--Width: #{pf-size-prem(4px)};
22
+ --#{$slider}__step-tick--Width: 0.15rem;
23
23
  --#{$slider}__step-tick--Height: #{pf-size-prem(4px)};
24
- --#{$slider}__step-tick--BackgroundColor: var(--pf-t--global--icon--color--subtle);
24
+ --#{$slider}__step-tick--BackgroundColor: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
25
25
  --#{$slider}__step-tick--TranslateX: -50%;
26
- --#{$slider}__step-tick--BorderRadius: var(--pf-t--global--border--radius--large);
27
- --#{$slider}__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--brand--clicked);
26
+ --#{$slider}__step-tick--BorderRadius: var(--pf-t--global--border--radius--sharp);
27
+ --#{$slider}__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--on-brand--default);
28
28
  --#{$slider}__step--first-child__step-tick--TranslateX: 0;
29
29
  --#{$slider}__step--last-child__step-tick--TranslateX: -100%;
30
30
 
package/components/_index.css CHANGED
@@ -11066,94 +11066,6 @@ ul.pf-v6-c-list {
11066
11066
  --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd);
11067
11067
  }
11068
11068
 
11069
- :where(:root, .pf-v6-c-notification-badge) {
11070
- --pf-v6-c-notification-badge--BackgroundColor: transparent;
11071
- --pf-v6-c-notification-badge--MinWidth: 40px;
11072
- --pf-v6-c-notification-badge--Gap: var(--pf-t--global--spacer--xs);
11073
- --pf-v6-c-notification-badge--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11074
- --pf-v6-c-notification-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
11075
- --pf-v6-c-notification-badge--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11076
- --pf-v6-c-notification-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
11077
- --pf-v6-c-notification-badge--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--sm));
11078
- --pf-v6-c-notification-badge--MarginInlineEnd: calc(-1 * var(--pf-t--global--spacer--sm));
11079
- --pf-v6-c-notification-badge--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--sm));
11080
- --pf-v6-c-notification-badge--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--sm));
11081
- --pf-v6-c-notification-badge--before--BorderColor: transparent;
11082
- --pf-v6-c-notification-badge--BorderRadius: var(--pf-t--global--border--radius--small);
11083
- --pf-v6-c-notification-badge--before--BorderWidth: var(--pf-t--global--border--width--control--default);
11084
- --pf-v6-c-notification-badge--m-read--Color: var(--pf-t--global--text--color--regular);
11085
- --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
11086
- --pf-v6-c-notification-badge--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
11087
- --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
11088
- --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
11089
- --pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
11090
- --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
11091
- --pf-v6-c-notification-badge--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
11092
- --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
11093
- --pf-v6-c-notification-badge--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
11094
- --pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
11095
- --pf-v6-c-notification-badge--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
11096
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
11097
- --pf-v6-c-notification-badge--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
11098
- --pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
11099
- }
11100
-
11101
- .pf-v6-c-notification-badge {
11102
- display: inline-flex;
11103
- gap: var(--pf-v6-c-notification-badge--Gap);
11104
- align-items: center;
11105
- justify-content: center;
11106
- padding-block-start: var(--pf-v6-c-notification-badge--PaddingBlockStart);
11107
- padding-block-end: var(--pf-v6-c-notification-badge--PaddingBlockEnd);
11108
- padding-inline-start: var(--pf-v6-c-notification-badge--PaddingInlineStart);
11109
- padding-inline-end: var(--pf-v6-c-notification-badge--PaddingInlineEnd);
11110
- margin-block-start: var(--pf-v6-c-notification-badge--MarginBlockStart);
11111
- margin-block-end: var(--pf-v6-c-notification-badge--MarginBlockEnd);
11112
- margin-inline-start: var(--pf-v6-c-notification-badge--MarginInlineStart);
11113
- margin-inline-end: var(--pf-v6-c-notification-badge--MarginInlineEnd);
11114
- background-color: var(--pf-v6-c-notification-badge--BackgroundColor);
11115
- border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
11116
- }
11117
- .pf-v6-c-notification-badge::before {
11118
- position: absolute;
11119
- inset-block-start: 0;
11120
- inset-block-end: 0;
11121
- inset-inline-start: 0;
11122
- inset-inline-end: 0;
11123
- content: "";
11124
- border: var(--pf-v6-c-notification-badge--before--BorderWidth) solid var(--pf-v6-c-notification-badge--before--BorderColor);
11125
- border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
11126
- transform: translate(var(--pf-v6-c-notification-badge--before--TranslateX), var(--pf-v6-c-notification-badge--before--TranslateY));
11127
- }
11128
- .pf-v6-c-notification-badge.pf-m-read {
11129
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--BackgroundColor);
11130
- --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--before--BorderColor);
11131
- color: var(--pf-v6-c-notification-badge--m-read--Color, inherit);
11132
- }
11133
- .pf-v6-c-notification-badge.pf-m-read:hover {
11134
- --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--hover--before--BorderColor);
11135
- }
11136
- .pf-v6-c-notification-badge.pf-m-unread {
11137
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--BackgroundColor);
11138
- color: var(--pf-v6-c-notification-badge--m-unread--Color);
11139
- }
11140
- .pf-v6-c-notification-badge.pf-m-unread:hover {
11141
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--hover--BackgroundColor);
11142
- }
11143
- .pf-v6-c-notification-badge.pf-m-attention {
11144
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--BackgroundColor);
11145
- color: var(--pf-v6-c-notification-badge--m-attention--Color);
11146
- }
11147
- .pf-v6-c-notification-badge.pf-m-attention:hover {
11148
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--hover--BackgroundColor);
11149
- }
11150
- .pf-v6-c-notification-badge.pf-m-expanded {
11151
- --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor);
11152
- --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor);
11153
- --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor);
11154
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor);
11155
- }
11156
-
11157
11069
  :where(:root, .pf-v6-c-notification-drawer) {
11158
11070
  --pf-v6-c-notification-drawer--BackgroundColor: var(--pf-t--global--background--color--floating--default);
11159
11071
  --pf-v6-c-notification-drawer__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -14173,19 +14085,19 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14173
14085
  --pf-v6-c-slider__rail--PaddingBlockStart: var(--pf-t--global--spacer--md);
14174
14086
  --pf-v6-c-slider__rail--PaddingBlockEnd: var(--pf-t--global--spacer--md);
14175
14087
  --pf-v6-c-slider__rail-track--Height: 0.25rem;
14176
- --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--border--color--default);
14088
+ --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
14177
14089
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
14178
14090
  --pf-v6-c-slider__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
14179
14091
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v6-c-slider--value);
14180
14092
  --pf-v6-c-slider__steps--FontSize: var(--pf-t--global--font--size--sm);
14181
14093
  --pf-v6-c-slider__steps--Height: var(--pf-v6-c-slider__steps--FontSize);
14182
14094
  --pf-v6-c-slider__step-tick--InsetBlockStart: var(--pf-t--global--spacer--md);
14183
- --pf-v6-c-slider__step-tick--Width: 0.25rem;
14095
+ --pf-v6-c-slider__step-tick--Width: 0.15rem;
14184
14096
  --pf-v6-c-slider__step-tick--Height: 0.25rem;
14185
- --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--subtle);
14097
+ --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
14186
14098
  --pf-v6-c-slider__step-tick--TranslateX: -50%;
14187
- --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--large);
14188
- --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--brand--clicked);
14099
+ --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--sharp);
14100
+ --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--on-brand--default);
14189
14101
  --pf-v6-c-slider__step--first-child__step-tick--TranslateX: 0;
14190
14102
  --pf-v6-c-slider__step--last-child__step-tick--TranslateX: -100%;
14191
14103
  --pf-v6-c-slider__step-label--TranslateX: -50%;
package/components/_index.scss CHANGED
@@ -47,7 +47,6 @@
47
47
  @use "./ModalBox/modal-box";
48
48
  @use "./MultipleFileUpload/multiple-file-upload";
49
49
  @use "./Nav/nav";
50
- @use "./NotificationBadge/notification-badge";
51
50
  @use "./NotificationDrawer/notification-drawer";
52
51
  @use "./OverflowMenu/overflow-menu";
53
52
  @use "./Page/page";
package/docs/components/Slider/examples/Slider.md CHANGED
@@ -401,7 +401,7 @@ cssPrefix: pf-v6-c-slider
401
401
  <br />
402
402
  <br />
403
403
 
404
- <div class="pf-v6-c-slider" style="--pf-v6-c-slider--value: 50%;">
404
+ <div class="pf-v6-c-slider pf-m-disabled" style="--pf-v6-c-slider--value: 50%;">
405
405
  <div class="pf-v6-c-slider__main">
406
406
  <div class="pf-v6-c-slider__rail">
407
407
  <div class="pf-v6-c-slider__rail-track"></div>
@@ -413,7 +413,7 @@ cssPrefix: pf-v6-c-slider
413
413
  aria-valuemax="100"
414
414
  aria-valuenow="50"
415
415
  aria-label="Value"
416
- tabindex="0"
416
+ aria-disabled="true"
417
417
  ></div>
418
418
  <div class="pf-v6-c-slider__value pf-m-floating">
419
419
  <div class="pf-v6-c-input-group">
package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md CHANGED
@@ -111,14 +111,12 @@ section: components
111
111
  >
112
112
  <div class="pf-v6-c-toolbar__item">
113
113
  <button
114
- class="pf-v6-c-button pf-m-plain"
114
+ class="pf-v6-c-button pf-m-read pf-m-stateful"
115
115
  type="button"
116
116
  aria-label="Notifications"
117
117
  >
118
- <span class="pf-v6-c-button__text">
119
- <span class="pf-v6-c-notification-badge pf-m-read">
120
- <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
121
- </span>
118
+ <span class="pf-v6-c-button__icon">
119
+ <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
122
120
  </span>
123
121
  </button>
124
122
  </div>
@@ -756,17 +754,13 @@ section: components
756
754
  >
757
755
  <div class="pf-v6-c-toolbar__item">
758
756
  <button
759
- class="pf-v6-c-button pf-m-plain"
757
+ class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-clicked pf-m-expanded"
760
758
  type="button"
761
759
  aria-expanded="true"
762
760
  aria-label="Notifications"
763
761
  >
764
- <span class="pf-v6-c-button__text">
765
- <span
766
- class="pf-v6-c-notification-badge pf-m-read pf-m-expanded"
767
- >
768
- <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
769
- </span>
762
+ <span class="pf-v6-c-button__icon">
763
+ <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
770
764
  </span>
771
765
  </button>
772
766
  </div>
@@ -1404,17 +1398,13 @@ section: components
1404
1398
  >
1405
1399
  <div class="pf-v6-c-toolbar__item">
1406
1400
  <button
1407
- class="pf-v6-c-button pf-m-plain"
1401
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-clicked pf-m-expanded"
1408
1402
  type="button"
1409
1403
  aria-expanded="true"
1410
1404
  aria-label="Unread notifications"
1411
1405
  >
1412
- <span class="pf-v6-c-button__text">
1413
- <span
1414
- class="pf-v6-c-notification-badge pf-m-unread pf-m-expanded"
1415
- >
1416
- <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
1417
- </span>
1406
+ <span class="pf-v6-c-button__icon">
1407
+ <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
1418
1408
  </span>
1419
1409
  </button>
1420
1410
  </div>
@@ -2055,17 +2045,13 @@ section: components
2055
2045
  >
2056
2046
  <div class="pf-v6-c-toolbar__item">
2057
2047
  <button
2058
- class="pf-v6-c-button pf-m-plain"
2048
+ class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-clicked pf-m-expanded"
2059
2049
  type="button"
2060
2050
  aria-expanded="true"
2061
2051
  aria-label="Attention notifications"
2062
2052
  >
2063
- <span class="pf-v6-c-button__text">
2064
- <span
2065
- class="pf-v6-c-notification-badge pf-m-attention pf-m-expanded"
2066
- >
2067
- <i class="pf-v6-pficon-attention-bell" aria-hidden="true"></i>
2068
- </span>
2053
+ <span class="pf-v6-c-button__icon">
2054
+ <i class="pf-v6-pficon-attention-bell" aria-hidden="true"></i>
2069
2055
  </span>
2070
2056
  </button>
2071
2057
  </div>
@@ -2701,17 +2687,13 @@ section: components
2701
2687
  >
2702
2688
  <div class="pf-v6-c-toolbar__item">
2703
2689
  <button
2704
- class="pf-v6-c-button pf-m-plain"
2690
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-clicked pf-m-expanded"
2705
2691
  type="button"
2706
2692
  aria-expanded="true"
2707
2693
  aria-label="Unread notifications"
2708
2694
  >
2709
- <span class="pf-v6-c-button__text">
2710
- <span
2711
- class="pf-v6-c-notification-badge pf-m-unread pf-m-expanded"
2712
- >
2713
- <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
2714
- </span>
2695
+ <span class="pf-v6-c-button__icon">
2696
+ <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
2715
2697
  </span>
2716
2698
  </button>
2717
2699
  </div>
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.213",
4
+ "version": "6.0.0-alpha.215",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-globals.css CHANGED
@@ -5717,9 +5717,9 @@
5717
5717
  --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
5718
5718
  --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20);
5719
5719
  --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10);
5720
- --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--30);
5721
- --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--20);
5722
- --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--10);
5720
+ --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
5721
+ --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
5722
+ --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
5723
5723
  --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
5724
5724
  --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
5725
5725
  --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
@@ -5762,7 +5762,7 @@
5762
5762
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
5763
5763
  --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
5764
5764
  --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
5765
- --pf-t--global--dark--text--color--100: var(--pf-t--color--gray--10);
5765
+ --pf-t--global--dark--text--color--100: var(--pf-t--color--white);
5766
5766
  --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
5767
5767
  --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
5768
5768
  --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
@@ -5792,9 +5792,9 @@
5792
5792
  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
5793
5793
  --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
5794
5794
  --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
5795
- --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--200);
5796
- --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--100);
5797
- --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--200);
5795
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300);
5796
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200);
5797
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300);
5798
5798
  --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
5799
5799
  --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
5800
5800
  --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
@@ -5928,9 +5928,9 @@
5928
5928
  --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse);
5929
5929
  --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse);
5930
5930
  --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse);
5931
- --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--inverse);
5932
- --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--inverse);
5933
- --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--inverse);
5931
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
5932
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
5933
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
5934
5934
  --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse);
5935
5935
  --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse);
5936
5936
  --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse);
@@ -5994,9 +5994,9 @@
5994
5994
  --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse);
5995
5995
  --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse);
5996
5996
  --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse);
5997
- --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--inverse);
5998
- --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--inverse);
5999
- --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--inverse);
5997
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
5998
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
5999
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
6000
6000
  --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse);
6001
6001
  --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse);
6002
6002
  --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse);
package/patternfly-base.css CHANGED
@@ -5838,9 +5838,9 @@ button) {
5838
5838
  --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
5839
5839
  --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20);
5840
5840
  --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10);
5841
- --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--30);
5842
- --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--20);
5843
- --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--10);
5841
+ --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
5842
+ --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
5843
+ --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
5844
5844
  --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
5845
5845
  --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
5846
5846
  --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
@@ -5883,7 +5883,7 @@ button) {
5883
5883
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
5884
5884
  --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
5885
5885
  --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
5886
- --pf-t--global--dark--text--color--100: var(--pf-t--color--gray--10);
5886
+ --pf-t--global--dark--text--color--100: var(--pf-t--color--white);
5887
5887
  --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
5888
5888
  --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
5889
5889
  --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
@@ -5913,9 +5913,9 @@ button) {
5913
5913
  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
5914
5914
  --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
5915
5915
  --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
5916
- --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--200);
5917
- --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--100);
5918
- --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--200);
5916
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300);
5917
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200);
5918
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300);
5919
5919
  --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
5920
5920
  --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
5921
5921
  --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
@@ -6049,9 +6049,9 @@ button) {
6049
6049
  --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse);
6050
6050
  --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse);
6051
6051
  --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse);
6052
- --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--inverse);
6053
- --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--inverse);
6054
- --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--inverse);
6052
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
6053
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
6054
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
6055
6055
  --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse);
6056
6056
  --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse);
6057
6057
  --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse);
@@ -6115,9 +6115,9 @@ button) {
6115
6115
  --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse);
6116
6116
  --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse);
6117
6117
  --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse);
6118
- --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--inverse);
6119
- --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--inverse);
6120
- --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--inverse);
6118
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
6119
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
6120
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
6121
6121
  --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse);
6122
6122
  --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse);
6123
6123
  --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse);