@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/components/MenuToggle/menu-toggle.css CHANGED
@@ -35,14 +35,11 @@
35
35
  --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
36
36
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
37
37
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
38
- --pf-v6-c-menu-toggle--m-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
39
- --pf-v6-c-menu-toggle--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
40
- --pf-v6-c-menu-toggle--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
41
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineStart);
42
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineEnd);
38
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
39
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
43
40
  --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
44
41
  --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
45
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
42
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
46
43
  --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
47
44
  --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
48
45
  --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
@@ -53,11 +50,11 @@
53
50
  --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
54
51
  --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
55
52
  --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
56
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineStart);
57
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineEnd);
53
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
54
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
58
55
  --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
59
56
  --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
60
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
57
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
61
58
  --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
62
59
  --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
63
60
  --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
@@ -74,7 +71,7 @@
74
71
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
75
72
  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
76
73
  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
77
- --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
74
+ --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderRadius: var(--pf-t--global--border--radius--pill);
78
75
  --pf-v6-c-menu-toggle--m-split-button--m-action--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
79
76
  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
80
77
  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
@@ -87,6 +84,8 @@
87
84
  --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
88
85
  --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));
89
86
  --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
87
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
88
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
90
89
  --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
91
90
  --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
92
91
  --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
@@ -190,6 +189,8 @@
190
189
  width: 100%;
191
190
  }
192
191
  .pf-v6-c-menu-toggle.pf-m-plain {
192
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
193
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
193
194
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
194
195
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
195
196
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -56,18 +56,12 @@
56
56
  --#{$menu-toggle}__toggle-icon--MinHeight: calc(var(--#{$menu}__item--FontSize) * var(--#{$menu}__item--LineHeight));
57
57
  --#{$menu-toggle}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
58
58
 
59
- // TODO: add pf-m-button modifier here
60
- // * Menu toggle button
61
- --#{$menu-toggle}--m-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
62
- --#{$menu-toggle}--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
63
- --#{$menu-toggle}--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
64
-
65
59
  // * Menu toggle primary
66
- --#{$menu-toggle}--m-primary--PaddingInlineStart: var(--#{$menu-toggle}--m-button--PaddingInlineStart);
67
- --#{$menu-toggle}--m-primary--PaddingInlineEnd: var(--#{$menu-toggle}--m-button--PaddingInlineEnd);
60
+ --#{$menu-toggle}--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
61
+ --#{$menu-toggle}--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
68
62
  --#{$menu-toggle}--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
69
63
  --#{$menu-toggle}--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
70
- --#{$menu-toggle}--m-primary--BorderRadius: var(--#{$menu-toggle}--m-button--BorderRadius);
64
+ --#{$menu-toggle}--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
71
65
  --#{$menu-toggle}--m-primary--BorderColor: transparent;
72
66
  --#{$menu-toggle}--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
73
67
  --#{$menu-toggle}--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
@@ -80,11 +74,11 @@
80
74
  --#{$menu-toggle}--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
81
75
 
82
76
  // * Menu toggle secondary
83
- --#{$menu-toggle}--m-secondary--PaddingInlineStart: var(--#{$menu-toggle}--m-button--PaddingInlineStart);
84
- --#{$menu-toggle}--m-secondary--PaddingInlineEnd: var(--#{$menu-toggle}--m-button--PaddingInlineEnd);
77
+ --#{$menu-toggle}--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
78
+ --#{$menu-toggle}--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
85
79
  --#{$menu-toggle}--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
86
80
  --#{$menu-toggle}--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
87
- --#{$menu-toggle}--m-secondary--BorderRadius: var(--#{$menu-toggle}--m-button--BorderRadius);
81
+ --#{$menu-toggle}--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
88
82
  --#{$menu-toggle}--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
89
83
  --#{$menu-toggle}--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
90
84
  --#{$menu-toggle}--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
@@ -109,7 +103,7 @@
109
103
  // Split button, action
110
104
  --#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
111
105
  --#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
112
- --#{$menu-toggle}--m-split-button--m-action--child--BorderRadius: var(--#{$menu-toggle}--m-button--BorderRadius);
106
+ --#{$menu-toggle}--m-split-button--m-action--child--BorderRadius: var(--pf-t--global--border--radius--pill);
113
107
  --#{$menu-toggle}--m-split-button--m-action--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
114
108
 
115
109
  // Split button action, primary
@@ -130,6 +124,8 @@
130
124
  --#{$menu-toggle}__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
131
125
 
132
126
  // Menu toggle plain
127
+ --#{$menu-toggle}--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
128
+ --#{$menu-toggle}--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
133
129
  --#{$menu-toggle}--m-plain--Color: var(--pf-t--global--icon--color--regular);
134
130
  --#{$menu-toggle}--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
135
131
  --#{$menu-toggle}--m-plain--BorderColor: transparent;
@@ -257,6 +253,8 @@
257
253
  }
258
254
 
259
255
  &.pf-m-plain {
256
+ --#{$menu-toggle}--PaddingInlineStart: var(--#{$menu-toggle}--m-plain--PaddingInlineStart);
257
+ --#{$menu-toggle}--PaddingInlineEnd: var(--#{$menu-toggle}--m-plain--PaddingInlineEnd);
260
258
  --#{$menu-toggle}--Color: var(--#{$menu-toggle}--m-plain--Color);
261
259
  --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--m-plain--BackgroundColor);
262
260
  --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--m-plain--BorderColor);
package/components/_index.css CHANGED
@@ -9990,14 +9990,11 @@ ul.pf-v6-c-list {
9990
9990
  --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
9991
9991
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
9992
9992
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
9993
- --pf-v6-c-menu-toggle--m-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
9994
- --pf-v6-c-menu-toggle--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
9995
- --pf-v6-c-menu-toggle--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
9996
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineStart);
9997
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineEnd);
9993
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
9994
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
9998
9995
  --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
9999
9996
  --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
10000
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
9997
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
10001
9998
  --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
10002
9999
  --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
10003
10000
  --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
@@ -10008,11 +10005,11 @@ ul.pf-v6-c-list {
10008
10005
  --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
10009
10006
  --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
10010
10007
  --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
10011
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineStart);
10012
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineEnd);
10008
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
10009
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
10013
10010
  --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
10014
10011
  --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
10015
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
10012
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
10016
10013
  --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
10017
10014
  --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
10018
10015
  --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
@@ -10029,7 +10026,7 @@ ul.pf-v6-c-list {
10029
10026
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
10030
10027
  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
10031
10028
  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
10032
- --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
10029
+ --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderRadius: var(--pf-t--global--border--radius--pill);
10033
10030
  --pf-v6-c-menu-toggle--m-split-button--m-action--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
10034
10031
  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
10035
10032
  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
@@ -10042,6 +10039,8 @@ ul.pf-v6-c-list {
10042
10039
  --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
10043
10040
  --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));
10044
10041
  --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
10042
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
10043
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
10045
10044
  --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
10046
10045
  --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
10047
10046
  --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
@@ -10145,6 +10144,8 @@ ul.pf-v6-c-list {
10145
10144
  width: 100%;
10146
10145
  }
10147
10146
  .pf-v6-c-menu-toggle.pf-m-plain {
10147
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
10148
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
10148
10149
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
10149
10150
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
10150
10151
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
@@ -11065,94 +11066,6 @@ ul.pf-v6-c-list {
11065
11066
  --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd);
11066
11067
  }
11067
11068
 
11068
- :where(:root, .pf-v6-c-notification-badge) {
11069
- --pf-v6-c-notification-badge--BackgroundColor: transparent;
11070
- --pf-v6-c-notification-badge--MinWidth: 40px;
11071
- --pf-v6-c-notification-badge--Gap: var(--pf-t--global--spacer--xs);
11072
- --pf-v6-c-notification-badge--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11073
- --pf-v6-c-notification-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
11074
- --pf-v6-c-notification-badge--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11075
- --pf-v6-c-notification-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
11076
- --pf-v6-c-notification-badge--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--sm));
11077
- --pf-v6-c-notification-badge--MarginInlineEnd: calc(-1 * var(--pf-t--global--spacer--sm));
11078
- --pf-v6-c-notification-badge--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--sm));
11079
- --pf-v6-c-notification-badge--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--sm));
11080
- --pf-v6-c-notification-badge--before--BorderColor: transparent;
11081
- --pf-v6-c-notification-badge--BorderRadius: var(--pf-t--global--border--radius--small);
11082
- --pf-v6-c-notification-badge--before--BorderWidth: var(--pf-t--global--border--width--control--default);
11083
- --pf-v6-c-notification-badge--m-read--Color: var(--pf-t--global--text--color--regular);
11084
- --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
11085
- --pf-v6-c-notification-badge--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
11086
- --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
11087
- --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
11088
- --pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
11089
- --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
11090
- --pf-v6-c-notification-badge--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
11091
- --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
11092
- --pf-v6-c-notification-badge--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
11093
- --pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
11094
- --pf-v6-c-notification-badge--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
11095
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
11096
- --pf-v6-c-notification-badge--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
11097
- --pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
11098
- }
11099
-
11100
- .pf-v6-c-notification-badge {
11101
- display: inline-flex;
11102
- gap: var(--pf-v6-c-notification-badge--Gap);
11103
- align-items: center;
11104
- justify-content: center;
11105
- padding-block-start: var(--pf-v6-c-notification-badge--PaddingBlockStart);
11106
- padding-block-end: var(--pf-v6-c-notification-badge--PaddingBlockEnd);
11107
- padding-inline-start: var(--pf-v6-c-notification-badge--PaddingInlineStart);
11108
- padding-inline-end: var(--pf-v6-c-notification-badge--PaddingInlineEnd);
11109
- margin-block-start: var(--pf-v6-c-notification-badge--MarginBlockStart);
11110
- margin-block-end: var(--pf-v6-c-notification-badge--MarginBlockEnd);
11111
- margin-inline-start: var(--pf-v6-c-notification-badge--MarginInlineStart);
11112
- margin-inline-end: var(--pf-v6-c-notification-badge--MarginInlineEnd);
11113
- background-color: var(--pf-v6-c-notification-badge--BackgroundColor);
11114
- border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
11115
- }
11116
- .pf-v6-c-notification-badge::before {
11117
- position: absolute;
11118
- inset-block-start: 0;
11119
- inset-block-end: 0;
11120
- inset-inline-start: 0;
11121
- inset-inline-end: 0;
11122
- content: "";
11123
- border: var(--pf-v6-c-notification-badge--before--BorderWidth) solid var(--pf-v6-c-notification-badge--before--BorderColor);
11124
- border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
11125
- transform: translate(var(--pf-v6-c-notification-badge--before--TranslateX), var(--pf-v6-c-notification-badge--before--TranslateY));
11126
- }
11127
- .pf-v6-c-notification-badge.pf-m-read {
11128
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--BackgroundColor);
11129
- --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--before--BorderColor);
11130
- color: var(--pf-v6-c-notification-badge--m-read--Color, inherit);
11131
- }
11132
- .pf-v6-c-notification-badge.pf-m-read:hover {
11133
- --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--hover--before--BorderColor);
11134
- }
11135
- .pf-v6-c-notification-badge.pf-m-unread {
11136
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--BackgroundColor);
11137
- color: var(--pf-v6-c-notification-badge--m-unread--Color);
11138
- }
11139
- .pf-v6-c-notification-badge.pf-m-unread:hover {
11140
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--hover--BackgroundColor);
11141
- }
11142
- .pf-v6-c-notification-badge.pf-m-attention {
11143
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--BackgroundColor);
11144
- color: var(--pf-v6-c-notification-badge--m-attention--Color);
11145
- }
11146
- .pf-v6-c-notification-badge.pf-m-attention:hover {
11147
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--hover--BackgroundColor);
11148
- }
11149
- .pf-v6-c-notification-badge.pf-m-expanded {
11150
- --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor);
11151
- --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor);
11152
- --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor);
11153
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor);
11154
- }
11155
-
11156
11069
  :where(:root, .pf-v6-c-notification-drawer) {
11157
11070
  --pf-v6-c-notification-drawer--BackgroundColor: var(--pf-t--global--background--color--floating--default);
11158
11071
  --pf-v6-c-notification-drawer__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
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/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.212",
4
+ "version": "6.0.0-alpha.214",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -16053,14 +16053,11 @@ ul.pf-v6-c-list {
16053
16053
  --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
16054
16054
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
16055
16055
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
16056
- --pf-v6-c-menu-toggle--m-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
16057
- --pf-v6-c-menu-toggle--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
16058
- --pf-v6-c-menu-toggle--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
16059
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineStart);
16060
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineEnd);
16056
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
16057
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
16061
16058
  --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
16062
16059
  --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
16063
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
16060
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
16064
16061
  --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
16065
16062
  --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
16066
16063
  --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
@@ -16071,11 +16068,11 @@ ul.pf-v6-c-list {
16071
16068
  --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
16072
16069
  --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
16073
16070
  --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
16074
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineStart);
16075
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineEnd);
16071
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
16072
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
16076
16073
  --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
16077
16074
  --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
16078
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
16075
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
16079
16076
  --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
16080
16077
  --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
16081
16078
  --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
@@ -16092,7 +16089,7 @@ ul.pf-v6-c-list {
16092
16089
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
16093
16090
  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
16094
16091
  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
16095
- --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
16092
+ --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderRadius: var(--pf-t--global--border--radius--pill);
16096
16093
  --pf-v6-c-menu-toggle--m-split-button--m-action--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
16097
16094
  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
16098
16095
  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
@@ -16105,6 +16102,8 @@ ul.pf-v6-c-list {
16105
16102
  --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
16106
16103
  --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));
16107
16104
  --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
16105
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
16106
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
16108
16107
  --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
16109
16108
  --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
16110
16109
  --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
@@ -16208,6 +16207,8 @@ ul.pf-v6-c-list {
16208
16207
  width: 100%;
16209
16208
  }
16210
16209
  .pf-v6-c-menu-toggle.pf-m-plain {
16210
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
16211
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
16211
16212
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
16212
16213
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
16213
16214
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
@@ -17128,94 +17129,6 @@ ul.pf-v6-c-list {
17128
17129
  --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd);
17129
17130
  }
17130
17131
 
17131
- :where(:root, .pf-v6-c-notification-badge) {
17132
- --pf-v6-c-notification-badge--BackgroundColor: transparent;
17133
- --pf-v6-c-notification-badge--MinWidth: 40px;
17134
- --pf-v6-c-notification-badge--Gap: var(--pf-t--global--spacer--xs);
17135
- --pf-v6-c-notification-badge--PaddingBlockStart: var(--pf-t--global--spacer--sm);
17136
- --pf-v6-c-notification-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
17137
- --pf-v6-c-notification-badge--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
17138
- --pf-v6-c-notification-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
17139
- --pf-v6-c-notification-badge--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--sm));
17140
- --pf-v6-c-notification-badge--MarginInlineEnd: calc(-1 * var(--pf-t--global--spacer--sm));
17141
- --pf-v6-c-notification-badge--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--sm));
17142
- --pf-v6-c-notification-badge--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--sm));
17143
- --pf-v6-c-notification-badge--before--BorderColor: transparent;
17144
- --pf-v6-c-notification-badge--BorderRadius: var(--pf-t--global--border--radius--small);
17145
- --pf-v6-c-notification-badge--before--BorderWidth: var(--pf-t--global--border--width--control--default);
17146
- --pf-v6-c-notification-badge--m-read--Color: var(--pf-t--global--text--color--regular);
17147
- --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
17148
- --pf-v6-c-notification-badge--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
17149
- --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
17150
- --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
17151
- --pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
17152
- --pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--clicked);
17153
- --pf-v6-c-notification-badge--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
17154
- --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
17155
- --pf-v6-c-notification-badge--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
17156
- --pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
17157
- --pf-v6-c-notification-badge--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
17158
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
17159
- --pf-v6-c-notification-badge--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
17160
- --pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
17161
- }
17162
-
17163
- .pf-v6-c-notification-badge {
17164
- display: inline-flex;
17165
- gap: var(--pf-v6-c-notification-badge--Gap);
17166
- align-items: center;
17167
- justify-content: center;
17168
- padding-block-start: var(--pf-v6-c-notification-badge--PaddingBlockStart);
17169
- padding-block-end: var(--pf-v6-c-notification-badge--PaddingBlockEnd);
17170
- padding-inline-start: var(--pf-v6-c-notification-badge--PaddingInlineStart);
17171
- padding-inline-end: var(--pf-v6-c-notification-badge--PaddingInlineEnd);
17172
- margin-block-start: var(--pf-v6-c-notification-badge--MarginBlockStart);
17173
- margin-block-end: var(--pf-v6-c-notification-badge--MarginBlockEnd);
17174
- margin-inline-start: var(--pf-v6-c-notification-badge--MarginInlineStart);
17175
- margin-inline-end: var(--pf-v6-c-notification-badge--MarginInlineEnd);
17176
- background-color: var(--pf-v6-c-notification-badge--BackgroundColor);
17177
- border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
17178
- }
17179
- .pf-v6-c-notification-badge::before {
17180
- position: absolute;
17181
- inset-block-start: 0;
17182
- inset-block-end: 0;
17183
- inset-inline-start: 0;
17184
- inset-inline-end: 0;
17185
- content: "";
17186
- border: var(--pf-v6-c-notification-badge--before--BorderWidth) solid var(--pf-v6-c-notification-badge--before--BorderColor);
17187
- border-radius: var(--pf-v6-c-notification-badge--BorderRadius);
17188
- transform: translate(var(--pf-v6-c-notification-badge--before--TranslateX), var(--pf-v6-c-notification-badge--before--TranslateY));
17189
- }
17190
- .pf-v6-c-notification-badge.pf-m-read {
17191
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--BackgroundColor);
17192
- --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--before--BorderColor);
17193
- color: var(--pf-v6-c-notification-badge--m-read--Color, inherit);
17194
- }
17195
- .pf-v6-c-notification-badge.pf-m-read:hover {
17196
- --pf-v6-c-notification-badge--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--hover--before--BorderColor);
17197
- }
17198
- .pf-v6-c-notification-badge.pf-m-unread {
17199
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--BackgroundColor);
17200
- color: var(--pf-v6-c-notification-badge--m-unread--Color);
17201
- }
17202
- .pf-v6-c-notification-badge.pf-m-unread:hover {
17203
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--hover--BackgroundColor);
17204
- }
17205
- .pf-v6-c-notification-badge.pf-m-attention {
17206
- --pf-v6-c-notification-badge--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--BackgroundColor);
17207
- color: var(--pf-v6-c-notification-badge--m-attention--Color);
17208
- }
17209
- .pf-v6-c-notification-badge.pf-m-attention:hover {
17210
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--hover--BackgroundColor);
17211
- }
17212
- .pf-v6-c-notification-badge.pf-m-expanded {
17213
- --pf-v6-c-notification-badge--m-read--BackgroundColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--BackgroundColor);
17214
- --pf-v6-c-notification-badge--m-read--before--BorderColor: var(--pf-v6-c-notification-badge--m-read--m-expanded--before--BorderColor);
17215
- --pf-v6-c-notification-badge--m-unread--BackgroundColor: var(--pf-v6-c-notification-badge--m-unread--m-expanded--BackgroundColor);
17216
- --pf-v6-c-notification-badge--m-attention--BackgroundColor: var(--pf-v6-c-notification-badge--m-attention--m-expanded--BackgroundColor);
17217
- }
17218
-
17219
17132
  :where(:root, .pf-v6-c-notification-drawer) {
17220
17133
  --pf-v6-c-notification-drawer--BackgroundColor: var(--pf-t--global--background--color--floating--default);
17221
17134
  --pf-v6-c-notification-drawer__header--PaddingBlockStart: var(--pf-t--global--spacer--md);