@patternfly/patternfly 6.0.0-alpha.212 → 6.0.0-alpha.214

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 (14) hide show
  1. package/components/MenuToggle/menu-toggle.css +11 -10
  2. package/components/MenuToggle/menu-toggle.scss +11 -13
  3. package/components/_index.css +11 -98
  4. package/components/_index.scss +0 -1
  5. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +15 -33
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +11 -98
  8. package/patternfly.css +11 -98
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
  11. package/sass-utilities/namespaces-components.scss +0 -3
  12. package/components/NotificationBadge/notification-badge.css +0 -87
  13. package/components/NotificationBadge/notification-badge.scss +0 -108
  14. package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -258
package/patternfly.css CHANGED
@@ -16174,14 +16174,11 @@ ul.pf-v6-c-list {
16174
16174
  --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
16175
16175
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
16176
16176
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
16177
- --pf-v6-c-menu-toggle--m-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
16178
- --pf-v6-c-menu-toggle--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
16179
- --pf-v6-c-menu-toggle--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
16180
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineStart);
16181
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineEnd);
16177
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
16178
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
16182
16179
  --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
16183
16180
  --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
16184
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
16181
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
16185
16182
  --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
16186
16183
  --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
16187
16184
  --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
@@ -16192,11 +16189,11 @@ ul.pf-v6-c-list {
16192
16189
  --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
16193
16190
  --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
16194
16191
  --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
16195
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineStart);
16196
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineEnd);
16192
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
16193
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
16197
16194
  --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
16198
16195
  --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
16199
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
16196
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
16200
16197
  --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
16201
16198
  --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
16202
16199
  --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
@@ -16213,7 +16210,7 @@ ul.pf-v6-c-list {
16213
16210
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
16214
16211
  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
16215
16212
  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
16216
- --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
16213
+ --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderRadius: var(--pf-t--global--border--radius--pill);
16217
16214
  --pf-v6-c-menu-toggle--m-split-button--m-action--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
16218
16215
  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
16219
16216
  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
@@ -16226,6 +16223,8 @@ ul.pf-v6-c-list {
16226
16223
  --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
16227
16224
  --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
16228
16225
  --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
16226
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
16227
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
16229
16228
  --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
16230
16229
  --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
16231
16230
  --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
@@ -16329,6 +16328,8 @@ ul.pf-v6-c-list {
16329
16328
  width: 100%;
16330
16329
  }
16331
16330
  .pf-v6-c-menu-toggle.pf-m-plain {
16331
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
16332
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
16332
16333
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
16333
16334
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
16334
16335
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
@@ -17249,94 +17250,6 @@ ul.pf-v6-c-list {
17249
17250
  --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd);
17250
17251
  }
17251
17252
 
17252
- :where(:root, .pf-v6-c-notification-badge) {
17253
- --pf-v6-c-notification-badge--BackgroundColor: transparent;
17254
- --pf-v6-c-notification-badge--MinWidth: 40px;
17255
- --pf-v6-c-notification-badge--Gap: var(--pf-t--global--spacer--xs);
17256
- --pf-v6-c-notification-badge--PaddingBlockStart: var(--pf-t--global--spacer--sm);
17257
- --pf-v6-c-notification-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
17258
- --pf-v6-c-notification-badge--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
17259
- --pf-v6-c-notification-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
17260
- --pf-v6-c-notification-badge--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--sm));
17261
- --pf-v6-c-notification-badge--MarginInlineEnd: calc(-1 * var(--pf-t--global--spacer--sm));
17262
- --pf-v6-c-notification-badge--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--sm));
17263
- --pf-v6-c-notification-badge--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--sm));
17264
- --pf-v6-c-notification-badge--before--BorderColor: transparent;
17265
- --pf-v6-c-notification-badge--BorderRadius: var(--pf-t--global--border--radius--small);
17266
- --pf-v6-c-notification-badge--before--BorderWidth: var(--pf-t--global--border--width--control--default);
17267
- --pf-v6-c-notification-badge--m-read--Color: var(--pf-t--global--text--color--regular);
17268
- --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
17269
- --pf-v6-c-notification-badge--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
17270
- --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
17271
- --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
17272
- --pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
17273
- --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
17274
- --pf-v6-c-notification-badge--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
17275
- --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
17276
- --pf-v6-c-notification-badge--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
17277
- --pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
17278
- --pf-v6-c-notification-badge--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
17279
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
17280
- --pf-v6-c-notification-badge--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
17281
- --pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
17282
- }
17283
-
17284
- .pf-v6-c-notification-badge {
17285
- display: inline-flex;
17286
- gap: var(--pf-v6-c-notification-badge--Gap);
17287
- align-items: center;
17288
- justify-content: center;
17289
- padding-block-start: var(--pf-v6-c-notification-badge--PaddingBlockStart);
17290
- padding-block-end: var(--pf-v6-c-notification-badge--PaddingBlockEnd);
17291
- padding-inline-start: var(--pf-v6-c-notification-badge--PaddingInlineStart);
17292
- padding-inline-end: var(--pf-v6-c-notification-badge--PaddingInlineEnd);
17293
- margin-block-start: var(--pf-v6-c-notification-badge--MarginBlockStart);
17294
- margin-block-end: var(--pf-v6-c-notification-badge--MarginBlockEnd);
17295
- margin-inline-start: var(--pf-v6-c-notification-badge--MarginInlineStart);
17296
- margin-inline-end: var(--pf-v6-c-notification-badge--MarginInlineEnd);
17297
- background-color: var(--pf-v6-c-notification-badge--BackgroundColor);
17298
- border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
17299
- }
17300
- .pf-v6-c-notification-badge::before {
17301
- position: absolute;
17302
- inset-block-start: 0;
17303
- inset-block-end: 0;
17304
- inset-inline-start: 0;
17305
- inset-inline-end: 0;
17306
- content: "";
17307
- border: var(--pf-v6-c-notification-badge--before--BorderWidth) solid var(--pf-v6-c-notification-badge--before--BorderColor);
17308
- border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
17309
- transform: translate(var(--pf-v6-c-notification-badge--before--TranslateX), var(--pf-v6-c-notification-badge--before--TranslateY));
17310
- }
17311
- .pf-v6-c-notification-badge.pf-m-read {
17312
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--BackgroundColor);
17313
- --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--before--BorderColor);
17314
- color: var(--pf-v6-c-notification-badge--m-read--Color, inherit);
17315
- }
17316
- .pf-v6-c-notification-badge.pf-m-read:hover {
17317
- --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--hover--before--BorderColor);
17318
- }
17319
- .pf-v6-c-notification-badge.pf-m-unread {
17320
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--BackgroundColor);
17321
- color: var(--pf-v6-c-notification-badge--m-unread--Color);
17322
- }
17323
- .pf-v6-c-notification-badge.pf-m-unread:hover {
17324
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--hover--BackgroundColor);
17325
- }
17326
- .pf-v6-c-notification-badge.pf-m-attention {
17327
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--BackgroundColor);
17328
- color: var(--pf-v6-c-notification-badge--m-attention--Color);
17329
- }
17330
- .pf-v6-c-notification-badge.pf-m-attention:hover {
17331
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--hover--BackgroundColor);
17332
- }
17333
- .pf-v6-c-notification-badge.pf-m-expanded {
17334
- --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor);
17335
- --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor);
17336
- --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor);
17337
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor);
17338
- }
17339
-
17340
17253
  :where(:root, .pf-v6-c-notification-drawer) {
17341
17254
  --pf-v6-c-notification-drawer--BackgroundColor: var(--pf-t--global--background--color--floating--default);
17342
17255
  --pf-v6-c-notification-drawer__header--PaddingBlockStart: var(--pf-t--global--spacer--md);