@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/patternfly-no-globals.css CHANGED
@@ -5718,9 +5718,9 @@
5718
5718
  --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
5719
5719
  --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20);
5720
5720
  --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10);
5721
- --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--30);
5722
- --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--20);
5723
- --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--10);
5721
+ --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
5722
+ --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
5723
+ --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
5724
5724
  --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
5725
5725
  --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
5726
5726
  --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
@@ -5763,7 +5763,7 @@
5763
5763
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
5764
5764
  --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
5765
5765
  --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
5766
- --pf-t--global--dark--text--color--100: var(--pf-t--color--gray--10);
5766
+ --pf-t--global--dark--text--color--100: var(--pf-t--color--white);
5767
5767
  --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
5768
5768
  --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
5769
5769
  --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
@@ -5793,9 +5793,9 @@
5793
5793
  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
5794
5794
  --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
5795
5795
  --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
5796
- --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--200);
5797
- --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--100);
5798
- --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--200);
5796
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300);
5797
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200);
5798
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300);
5799
5799
  --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
5800
5800
  --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
5801
5801
  --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
@@ -5929,9 +5929,9 @@
5929
5929
  --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse);
5930
5930
  --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse);
5931
5931
  --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse);
5932
- --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--inverse);
5933
- --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--inverse);
5934
- --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--inverse);
5932
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
5933
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
5934
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
5935
5935
  --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse);
5936
5936
  --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse);
5937
5937
  --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse);
@@ -5995,9 +5995,9 @@
5995
5995
  --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse);
5996
5996
  --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse);
5997
5997
  --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse);
5998
- --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--inverse);
5999
- --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--inverse);
6000
- --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--inverse);
5998
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
5999
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
6000
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
6001
6001
  --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse);
6002
6002
  --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse);
6003
6003
  --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse);
@@ -17129,94 +17129,6 @@ ul.pf-v6-c-list {
17129
17129
  --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd);
17130
17130
  }
17131
17131
 
17132
- :where(:root, .pf-v6-c-notification-badge) {
17133
- --pf-v6-c-notification-badge--BackgroundColor: transparent;
17134
- --pf-v6-c-notification-badge--MinWidth: 40px;
17135
- --pf-v6-c-notification-badge--Gap: var(--pf-t--global--spacer--xs);
17136
- --pf-v6-c-notification-badge--PaddingBlockStart: var(--pf-t--global--spacer--sm);
17137
- --pf-v6-c-notification-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
17138
- --pf-v6-c-notification-badge--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
17139
- --pf-v6-c-notification-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
17140
- --pf-v6-c-notification-badge--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--sm));
17141
- --pf-v6-c-notification-badge--MarginInlineEnd: calc(-1 * var(--pf-t--global--spacer--sm));
17142
- --pf-v6-c-notification-badge--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--sm));
17143
- --pf-v6-c-notification-badge--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--sm));
17144
- --pf-v6-c-notification-badge--before--BorderColor: transparent;
17145
- --pf-v6-c-notification-badge--BorderRadius: var(--pf-t--global--border--radius--small);
17146
- --pf-v6-c-notification-badge--before--BorderWidth: var(--pf-t--global--border--width--control--default);
17147
- --pf-v6-c-notification-badge--m-read--Color: var(--pf-t--global--text--color--regular);
17148
- --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
17149
- --pf-v6-c-notification-badge--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
17150
- --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
17151
- --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
17152
- --pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
17153
- --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
17154
- --pf-v6-c-notification-badge--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
17155
- --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
17156
- --pf-v6-c-notification-badge--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
17157
- --pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
17158
- --pf-v6-c-notification-badge--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
17159
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
17160
- --pf-v6-c-notification-badge--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
17161
- --pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
17162
- }
17163
-
17164
- .pf-v6-c-notification-badge {
17165
- display: inline-flex;
17166
- gap: var(--pf-v6-c-notification-badge--Gap);
17167
- align-items: center;
17168
- justify-content: center;
17169
- padding-block-start: var(--pf-v6-c-notification-badge--PaddingBlockStart);
17170
- padding-block-end: var(--pf-v6-c-notification-badge--PaddingBlockEnd);
17171
- padding-inline-start: var(--pf-v6-c-notification-badge--PaddingInlineStart);
17172
- padding-inline-end: var(--pf-v6-c-notification-badge--PaddingInlineEnd);
17173
- margin-block-start: var(--pf-v6-c-notification-badge--MarginBlockStart);
17174
- margin-block-end: var(--pf-v6-c-notification-badge--MarginBlockEnd);
17175
- margin-inline-start: var(--pf-v6-c-notification-badge--MarginInlineStart);
17176
- margin-inline-end: var(--pf-v6-c-notification-badge--MarginInlineEnd);
17177
- background-color: var(--pf-v6-c-notification-badge--BackgroundColor);
17178
- border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
17179
- }
17180
- .pf-v6-c-notification-badge::before {
17181
- position: absolute;
17182
- inset-block-start: 0;
17183
- inset-block-end: 0;
17184
- inset-inline-start: 0;
17185
- inset-inline-end: 0;
17186
- content: "";
17187
- border: var(--pf-v6-c-notification-badge--before--BorderWidth) solid var(--pf-v6-c-notification-badge--before--BorderColor);
17188
- border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
17189
- transform: translate(var(--pf-v6-c-notification-badge--before--TranslateX), var(--pf-v6-c-notification-badge--before--TranslateY));
17190
- }
17191
- .pf-v6-c-notification-badge.pf-m-read {
17192
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--BackgroundColor);
17193
- --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--before--BorderColor);
17194
- color: var(--pf-v6-c-notification-badge--m-read--Color, inherit);
17195
- }
17196
- .pf-v6-c-notification-badge.pf-m-read:hover {
17197
- --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--hover--before--BorderColor);
17198
- }
17199
- .pf-v6-c-notification-badge.pf-m-unread {
17200
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--BackgroundColor);
17201
- color: var(--pf-v6-c-notification-badge--m-unread--Color);
17202
- }
17203
- .pf-v6-c-notification-badge.pf-m-unread:hover {
17204
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--hover--BackgroundColor);
17205
- }
17206
- .pf-v6-c-notification-badge.pf-m-attention {
17207
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--BackgroundColor);
17208
- color: var(--pf-v6-c-notification-badge--m-attention--Color);
17209
- }
17210
- .pf-v6-c-notification-badge.pf-m-attention:hover {
17211
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--hover--BackgroundColor);
17212
- }
17213
- .pf-v6-c-notification-badge.pf-m-expanded {
17214
- --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor);
17215
- --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor);
17216
- --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor);
17217
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor);
17218
- }
17219
-
17220
17132
  :where(:root, .pf-v6-c-notification-drawer) {
17221
17133
  --pf-v6-c-notification-drawer--BackgroundColor: var(--pf-t--global--background--color--floating--default);
17222
17134
  --pf-v6-c-notification-drawer__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -20236,19 +20148,19 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
20236
20148
  --pf-v6-c-slider__rail--PaddingBlockStart: var(--pf-t--global--spacer--md);
20237
20149
  --pf-v6-c-slider__rail--PaddingBlockEnd: var(--pf-t--global--spacer--md);
20238
20150
  --pf-v6-c-slider__rail-track--Height: 0.25rem;
20239
- --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--border--color--default);
20151
+ --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
20240
20152
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
20241
20153
  --pf-v6-c-slider__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
20242
20154
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v6-c-slider--value);
20243
20155
  --pf-v6-c-slider__steps--FontSize: var(--pf-t--global--font--size--sm);
20244
20156
  --pf-v6-c-slider__steps--Height: var(--pf-v6-c-slider__steps--FontSize);
20245
20157
  --pf-v6-c-slider__step-tick--InsetBlockStart: var(--pf-t--global--spacer--md);
20246
- --pf-v6-c-slider__step-tick--Width: 0.25rem;
20158
+ --pf-v6-c-slider__step-tick--Width: 0.15rem;
20247
20159
  --pf-v6-c-slider__step-tick--Height: 0.25rem;
20248
- --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--subtle);
20160
+ --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
20249
20161
  --pf-v6-c-slider__step-tick--TranslateX: -50%;
20250
- --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--large);
20251
- --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--brand--clicked);
20162
+ --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--sharp);
20163
+ --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--on-brand--default);
20252
20164
  --pf-v6-c-slider__step--first-child__step-tick--TranslateX: 0;
20253
20165
  --pf-v6-c-slider__step--last-child__step-tick--TranslateX: -100%;
20254
20166
  --pf-v6-c-slider__step-label--TranslateX: -50%;
package/patternfly.css CHANGED
@@ -5839,9 +5839,9 @@ button) {
5839
5839
  --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
5840
5840
  --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20);
5841
5841
  --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10);
5842
- --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--30);
5843
- --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--20);
5844
- --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--10);
5842
+ --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
5843
+ --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
5844
+ --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
5845
5845
  --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
5846
5846
  --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
5847
5847
  --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
@@ -5884,7 +5884,7 @@ button) {
5884
5884
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
5885
5885
  --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
5886
5886
  --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
5887
- --pf-t--global--dark--text--color--100: var(--pf-t--color--gray--10);
5887
+ --pf-t--global--dark--text--color--100: var(--pf-t--color--white);
5888
5888
  --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
5889
5889
  --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
5890
5890
  --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
@@ -5914,9 +5914,9 @@ button) {
5914
5914
  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
5915
5915
  --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
5916
5916
  --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
5917
- --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--200);
5918
- --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--100);
5919
- --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--200);
5917
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300);
5918
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200);
5919
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300);
5920
5920
  --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
5921
5921
  --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
5922
5922
  --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
@@ -6050,9 +6050,9 @@ button) {
6050
6050
  --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse);
6051
6051
  --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse);
6052
6052
  --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse);
6053
- --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--inverse);
6054
- --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--inverse);
6055
- --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--inverse);
6053
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
6054
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
6055
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
6056
6056
  --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse);
6057
6057
  --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse);
6058
6058
  --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse);
@@ -6116,9 +6116,9 @@ button) {
6116
6116
  --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse);
6117
6117
  --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse);
6118
6118
  --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse);
6119
- --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--inverse);
6120
- --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--inverse);
6121
- --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--inverse);
6119
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
6120
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
6121
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
6122
6122
  --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse);
6123
6123
  --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse);
6124
6124
  --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse);
@@ -17250,94 +17250,6 @@ ul.pf-v6-c-list {
17250
17250
  --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd);
17251
17251
  }
17252
17252
 
17253
- :where(:root, .pf-v6-c-notification-badge) {
17254
- --pf-v6-c-notification-badge--BackgroundColor: transparent;
17255
- --pf-v6-c-notification-badge--MinWidth: 40px;
17256
- --pf-v6-c-notification-badge--Gap: var(--pf-t--global--spacer--xs);
17257
- --pf-v6-c-notification-badge--PaddingBlockStart: var(--pf-t--global--spacer--sm);
17258
- --pf-v6-c-notification-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
17259
- --pf-v6-c-notification-badge--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
17260
- --pf-v6-c-notification-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
17261
- --pf-v6-c-notification-badge--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--sm));
17262
- --pf-v6-c-notification-badge--MarginInlineEnd: calc(-1 * var(--pf-t--global--spacer--sm));
17263
- --pf-v6-c-notification-badge--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--sm));
17264
- --pf-v6-c-notification-badge--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--sm));
17265
- --pf-v6-c-notification-badge--before--BorderColor: transparent;
17266
- --pf-v6-c-notification-badge--BorderRadius: var(--pf-t--global--border--radius--small);
17267
- --pf-v6-c-notification-badge--before--BorderWidth: var(--pf-t--global--border--width--control--default);
17268
- --pf-v6-c-notification-badge--m-read--Color: var(--pf-t--global--text--color--regular);
17269
- --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
17270
- --pf-v6-c-notification-badge--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
17271
- --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
17272
- --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
17273
- --pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
17274
- --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
17275
- --pf-v6-c-notification-badge--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
17276
- --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
17277
- --pf-v6-c-notification-badge--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
17278
- --pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
17279
- --pf-v6-c-notification-badge--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
17280
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
17281
- --pf-v6-c-notification-badge--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
17282
- --pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
17283
- }
17284
-
17285
- .pf-v6-c-notification-badge {
17286
- display: inline-flex;
17287
- gap: var(--pf-v6-c-notification-badge--Gap);
17288
- align-items: center;
17289
- justify-content: center;
17290
- padding-block-start: var(--pf-v6-c-notification-badge--PaddingBlockStart);
17291
- padding-block-end: var(--pf-v6-c-notification-badge--PaddingBlockEnd);
17292
- padding-inline-start: var(--pf-v6-c-notification-badge--PaddingInlineStart);
17293
- padding-inline-end: var(--pf-v6-c-notification-badge--PaddingInlineEnd);
17294
- margin-block-start: var(--pf-v6-c-notification-badge--MarginBlockStart);
17295
- margin-block-end: var(--pf-v6-c-notification-badge--MarginBlockEnd);
17296
- margin-inline-start: var(--pf-v6-c-notification-badge--MarginInlineStart);
17297
- margin-inline-end: var(--pf-v6-c-notification-badge--MarginInlineEnd);
17298
- background-color: var(--pf-v6-c-notification-badge--BackgroundColor);
17299
- border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
17300
- }
17301
- .pf-v6-c-notification-badge::before {
17302
- position: absolute;
17303
- inset-block-start: 0;
17304
- inset-block-end: 0;
17305
- inset-inline-start: 0;
17306
- inset-inline-end: 0;
17307
- content: "";
17308
- border: var(--pf-v6-c-notification-badge--before--BorderWidth) solid var(--pf-v6-c-notification-badge--before--BorderColor);
17309
- border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
17310
- transform: translate(var(--pf-v6-c-notification-badge--before--TranslateX), var(--pf-v6-c-notification-badge--before--TranslateY));
17311
- }
17312
- .pf-v6-c-notification-badge.pf-m-read {
17313
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--BackgroundColor);
17314
- --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--before--BorderColor);
17315
- color: var(--pf-v6-c-notification-badge--m-read--Color, inherit);
17316
- }
17317
- .pf-v6-c-notification-badge.pf-m-read:hover {
17318
- --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--hover--before--BorderColor);
17319
- }
17320
- .pf-v6-c-notification-badge.pf-m-unread {
17321
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--BackgroundColor);
17322
- color: var(--pf-v6-c-notification-badge--m-unread--Color);
17323
- }
17324
- .pf-v6-c-notification-badge.pf-m-unread:hover {
17325
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--hover--BackgroundColor);
17326
- }
17327
- .pf-v6-c-notification-badge.pf-m-attention {
17328
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--BackgroundColor);
17329
- color: var(--pf-v6-c-notification-badge--m-attention--Color);
17330
- }
17331
- .pf-v6-c-notification-badge.pf-m-attention:hover {
17332
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--hover--BackgroundColor);
17333
- }
17334
- .pf-v6-c-notification-badge.pf-m-expanded {
17335
- --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor);
17336
- --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor);
17337
- --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor);
17338
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor);
17339
- }
17340
-
17341
17253
  :where(:root, .pf-v6-c-notification-drawer) {
17342
17254
  --pf-v6-c-notification-drawer--BackgroundColor: var(--pf-t--global--background--color--floating--default);
17343
17255
  --pf-v6-c-notification-drawer__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -20357,19 +20269,19 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
20357
20269
  --pf-v6-c-slider__rail--PaddingBlockStart: var(--pf-t--global--spacer--md);
20358
20270
  --pf-v6-c-slider__rail--PaddingBlockEnd: var(--pf-t--global--spacer--md);
20359
20271
  --pf-v6-c-slider__rail-track--Height: 0.25rem;
20360
- --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--border--color--default);
20272
+ --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
20361
20273
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
20362
20274
  --pf-v6-c-slider__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
20363
20275
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v6-c-slider--value);
20364
20276
  --pf-v6-c-slider__steps--FontSize: var(--pf-t--global--font--size--sm);
20365
20277
  --pf-v6-c-slider__steps--Height: var(--pf-v6-c-slider__steps--FontSize);
20366
20278
  --pf-v6-c-slider__step-tick--InsetBlockStart: var(--pf-t--global--spacer--md);
20367
- --pf-v6-c-slider__step-tick--Width: 0.25rem;
20279
+ --pf-v6-c-slider__step-tick--Width: 0.15rem;
20368
20280
  --pf-v6-c-slider__step-tick--Height: 0.25rem;
20369
- --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--subtle);
20281
+ --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
20370
20282
  --pf-v6-c-slider__step-tick--TranslateX: -50%;
20371
- --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--large);
20372
- --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--brand--clicked);
20283
+ --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--sharp);
20284
+ --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--on-brand--default);
20373
20285
  --pf-v6-c-slider__step--first-child__step-tick--TranslateX: 0;
20374
20286
  --pf-v6-c-slider__step--last-child__step-tick--TranslateX: -100%;
20375
20287
  --pf-v6-c-slider__step-label--TranslateX: -50%;