@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.9

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 (11) hide show
  1. package/components/NotificationBadge/notification-badge.css +56 -81
  2. package/components/NotificationBadge/notification-badge.scss +60 -97
  3. package/docs/components/NotificationBadge/examples/NotificationBadge.md +5 -7
  4. package/package.json +1 -1
  5. package/patternfly-no-globals.css +56 -88
  6. package/patternfly-theme-dark-unversioned.css +56 -88
  7. package/patternfly.css +56 -88
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
  10. package/components/NotificationBadge/themes/dark/notification-badge.scss +0 -10
  11. package/docs/components/NotificationBadge/examples/NotificationBadge.css +0 -3
package/components/NotificationBadge/notification-badge.css CHANGED
@@ -1,39 +1,40 @@
1
+ :root {
2
+ --pf-v5-c-notification-badge--BackgroundColor: transparent;
3
+ --pf-v5-c-notification-badge--MinWidth: 40px;
4
+ --pf-v5-c-notification-badge--Gap: var(--pf-t--global--spacer--xs);
5
+ --pf-v5-c-notification-badge--PaddingTop: var(--pf-t--global--spacer--sm);
6
+ --pf-v5-c-notification-badge--PaddingRight: var(--pf-t--global--spacer--sm);
7
+ --pf-v5-c-notification-badge--PaddingBottom: var(--pf-t--global--spacer--sm);
8
+ --pf-v5-c-notification-badge--PaddingLeft: var(--pf-t--global--spacer--sm);
9
+ --pf-v5-c-notification-badge--MarginTop: calc(-1 * var(--pf-t--global--spacer--sm));
10
+ --pf-v5-c-notification-badge--MarginRight: calc(-1 * var(--pf-t--global--spacer--sm));
11
+ --pf-v5-c-notification-badge--MarginBottom: calc(-1 * var(--pf-t--global--spacer--sm));
12
+ --pf-v5-c-notification-badge--MarginLeft: calc(-1 * var(--pf-t--global--spacer--sm));
13
+ --pf-v5-c-notification-badge--before--BorderColor: transparent;
14
+ --pf-v5-c-notification-badge--BorderRadius: var(--pf-t--global--border--radius--small);
15
+ --pf-v5-c-notification-badge--before--BorderWidth: var(--pf-t--global--border--width--control--default);
16
+ --pf-v5-c-notification-badge--m-read--Color: var(--pf-t--global--text--color--regular);
17
+ --pf-v5-c-notification-badge--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
18
+ --pf-v5-c-notification-badge--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
19
+ --pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--active);
20
+ --pf-v5-c-notification-badge--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
21
+ --pf-v5-c-notification-badge--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
22
+ --pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--active);
23
+ --pf-v5-c-notification-badge--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
24
+ --pf-v5-c-notification-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
25
+ --pf-v5-c-notification-badge--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
26
+ --pf-v5-c-notification-badge--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--active);
27
+ --pf-v5-c-notification-badge--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
28
+ --pf-v5-c-notification-badge--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
29
+ --pf-v5-c-notification-badge--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
30
+ --pf-v5-c-notification-badge--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--active);
31
+ }
32
+
1
33
  .pf-v5-c-notification-badge {
2
- --pf-v5-c-notification-badge--PaddingTop: var(--pf-v5-global--spacer--form-element);
3
- --pf-v5-c-notification-badge--PaddingRight: var(--pf-v5-global--spacer--md);
4
- --pf-v5-c-notification-badge--PaddingBottom: var(--pf-v5-global--spacer--form-element);
5
- --pf-v5-c-notification-badge--PaddingLeft: var(--pf-v5-global--spacer--md);
6
- --pf-v5-c-notification-badge--MarginTop: calc(-1 * var(--pf-v5-global--spacer--form-element));
7
- --pf-v5-c-notification-badge--MarginRight: calc(-1 * var(--pf-v5-global--spacer--md));
8
- --pf-v5-c-notification-badge--MarginBottom: calc(-1 * var(--pf-v5-global--spacer--form-element));
9
- --pf-v5-c-notification-badge--MarginLeft: calc(-1 * var(--pf-v5-global--spacer--md));
10
- --pf-v5-c-notification-badge--after--BorderColor: transparent;
11
- --pf-v5-c-notification-badge--after--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
12
- --pf-v5-c-notification-badge--after--BorderWidth: 0;
13
- --pf-v5-c-notification-badge--after--Top: 0;
14
- --pf-v5-c-notification-badge--after--Right: 0;
15
- --pf-v5-c-notification-badge--after--Width: auto;
16
- --pf-v5-c-notification-badge--after--Height: auto;
17
- --pf-v5-c-notification-badge--after--BackgroundColor: transparent;
18
- --pf-v5-c-notification-badge--after--TranslateX: 0;
19
- --pf-v5-c-notification-badge--after--TranslateY: 0;
20
- --pf-v5-c-notification-badge__i--Width: auto;
21
- --pf-v5-c-notification-badge__i--Height: auto;
22
- --pf-v5-c-notification-badge--m-read--after--BorderColor: transparent;
23
- --pf-v5-c-notification-badge--m-read--after--BackgroundColor: transparent;
24
- --pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
25
- --pf-v5-c-notification-badge--m-unread--Color: var(--pf-v5-global--Color--light-100);
26
- --pf-v5-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--active-color--100);
27
- --pf-v5-c-notification-badge--m-unread--hover--after--BackgroundColor: var(--pf-v5-global--primary-color--200);
28
- --pf-v5-c-notification-badge--m-unread--m-expanded--after--BackgroundColor: var(--pf-v5-global--primary-color--200);
29
- --pf-v5-c-notification-badge--m-attention--Color: var(--pf-v5-global--Color--light-100);
30
- --pf-v5-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-global--danger-color--100);
31
- --pf-v5-c-notification-badge--m-attention--hover--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
32
- --pf-v5-c-notification-badge--m-attention--m-expanded--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
33
- --pf-v5-c-notification-badge__count--MarginLeft: var(--pf-v5-global--spacer--xs);
34
- --pf-v5-c-notification-badge--pf-v5-pficon-attention-bell--LineHeight: var(--pf-v5-global--LineHeight--sm);
35
- position: relative;
36
- display: inline-block;
34
+ display: inline-flex;
35
+ gap: var(--pf-v5-c-notification-badge--Gap);
36
+ align-items: center;
37
+ justify-content: center;
37
38
  padding-block-start: var(--pf-v5-c-notification-badge--PaddingTop);
38
39
  padding-block-end: var(--pf-v5-c-notification-badge--PaddingBottom);
39
40
  padding-inline-start: var(--pf-v5-c-notification-badge--PaddingLeft);
@@ -42,71 +43,45 @@
42
43
  margin-block-end: var(--pf-v5-c-notification-badge--MarginBottom);
43
44
  margin-inline-start: var(--pf-v5-c-notification-badge--MarginLeft);
44
45
  margin-inline-end: var(--pf-v5-c-notification-badge--MarginRight);
45
- background-color: var(--pf-v5-c-notification-badge--after--BackgroundColor);
46
- border-radius: var(--pf-v5-c-notification-badge--after--BorderRadius);
46
+ background-color: var(--pf-v5-c-notification-badge--BackgroundColor);
47
+ border-radius: var(--pf-v5-c-notification-badge--BorderRadius);
47
48
  }
48
49
  .pf-v5-c-notification-badge::before {
49
50
  position: absolute;
50
- inset-block-start: var(--pf-v5-c-notification-badge--after--Top);
51
+ inset-block-start: 0;
51
52
  inset-block-end: 0;
52
53
  inset-inline-start: 0;
53
- inset-inline-end: var(--pf-v5-c-notification-badge--after--Right);
54
- width: var(--pf-v5-c-notification-badge--after--Width);
55
- height: var(--pf-v5-c-notification-badge--after--Height);
54
+ inset-inline-end: 0;
56
55
  content: "";
57
- border: var(--pf-v5-c-notification-badge--after--BorderWidth) solid var(--pf-v5-c-notification-badge--after--BorderColor);
58
- border-radius: var(--pf-v5-c-notification-badge--after--BorderRadius);
59
- transform: translate(var(--pf-v5-c-notification-badge--after--TranslateX), var(--pf-v5-c-notification-badge--after--TranslateY));
60
- }
61
- .pf-v5-c-notification-badge > i {
62
- width: var(--pf-v5-c-notification-badge__i--Width);
63
- height: var(--pf-v5-c-notification-badge__i--Height);
64
- }
65
- .pf-v5-c-notification-badge > * {
66
- position: relative;
67
- }
68
- .pf-v5-c-notification-badge .pf-v5-c-icon-attention-bell,
69
- .pf-v5-c-notification-badge .pf-v5-c-icon-bell {
70
- display: inline-block;
71
- line-height: var(--pf-v5-c-notification-badge--pf-v5-pficon-attention-bell--LineHeight);
72
- }
73
- .pf-v5-c-notification-badge .pf-v5-c-icon-attention-bell::before,
74
- .pf-v5-c-notification-badge .pf-v5-c-icon-bell::before {
75
- vertical-align: bottom;
56
+ border: var(--pf-v5-c-notification-badge--before--BorderWidth) solid var(--pf-v5-c-notification-badge--before--BorderColor);
57
+ border-radius: var(--pf-v5-c-notification-badge--BorderRadius);
58
+ transform: translate(var(--pf-v5-c-notification-badge--before--TranslateX), var(--pf-v5-c-notification-badge--before--TranslateY));
76
59
  }
77
60
  .pf-v5-c-notification-badge.pf-m-read {
78
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-read--after--BackgroundColor);
79
- --pf-v5-c-notification-badge--after--BorderColor: var(--pf-v5-c-notification-badge--m-read--after--BorderColor);
61
+ --pf-v5-c-notification-badge--BackgroundColor: var(--pf-v5-c-notification-badge--m-read--BackgroundColor);
62
+ --pf-v5-c-notification-badge--before--BorderColor: var(--pf-v5-c-notification-badge--m-read--before--BorderColor);
80
63
  color: var(--pf-v5-c-notification-badge--m-read--Color, inherit);
81
64
  }
65
+ .pf-v5-c-notification-badge.pf-m-read:hover {
66
+ --pf-v5-c-notification-badge--before--BorderColor: var(--pf-v5-c-notification-badge--m-read--hover--before--BorderColor);
67
+ }
82
68
  .pf-v5-c-notification-badge.pf-m-unread {
83
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--after--BackgroundColor);
69
+ --pf-v5-c-notification-badge--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--BackgroundColor);
84
70
  color: var(--pf-v5-c-notification-badge--m-unread--Color);
85
71
  }
86
72
  .pf-v5-c-notification-badge.pf-m-unread:hover {
87
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--hover--after--BackgroundColor);
73
+ --pf-v5-c-notification-badge--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--hover--BackgroundColor);
88
74
  }
89
75
  .pf-v5-c-notification-badge.pf-m-attention {
90
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--after--BackgroundColor);
76
+ --pf-v5-c-notification-badge--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--BackgroundColor);
91
77
  color: var(--pf-v5-c-notification-badge--m-attention--Color);
92
78
  }
93
79
  .pf-v5-c-notification-badge.pf-m-attention:hover {
94
- --pf-v5-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--hover--after--BackgroundColor);
80
+ --pf-v5-c-notification-badge--m-attention--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--hover--BackgroundColor);
95
81
  }
96
82
  .pf-v5-c-notification-badge.pf-m-expanded {
97
- --pf-v5-c-notification-badge--m-read--Color: var(--pf-v5-global--Color--light-100);
98
- --pf-v5-c-notification-badge--m-read--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor);
99
- --pf-v5-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--m-expanded--after--BackgroundColor);
100
- --pf-v5-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--m-expanded--after--BackgroundColor);
101
- }
102
-
103
- .pf-v5-c-notification-badge__count {
104
- margin-inline-start: var(--pf-v5-c-notification-badge__count--MarginLeft);
105
- }
106
-
107
- :where(.pf-v5-theme-dark) .pf-v5-c-notification-badge {
108
- --pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
109
- --pf-v5-c-notification-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
110
- --pf-v5-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--primary-color--300);
111
- --pf-v5-c-notification-badge--m-attention--Color: var(--pf-v5-global--palette--black-900);
83
+ --pf-v5-c-notification-badge--m-read--BackgroundColor: var(--pf-v5-c-notification-badge--m-read--m-expanded--BackgroundColor);
84
+ --pf-v5-c-notification-badge--m-read--before--BorderColor: var(--pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor);
85
+ --pf-v5-c-notification-badge--m-unread--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--m-expanded--BackgroundColor);
86
+ --pf-v5-c-notification-badge--m-attention--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--m-expanded--BackgroundColor);
112
87
  }
package/components/NotificationBadge/notification-badge.scss CHANGED
@@ -1,58 +1,50 @@
1
1
  // @debug $notification-badge; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$notification-badge} {
4
- --#{$notification-badge}--PaddingTop: var(--#{$pf-global}--spacer--form-element);
5
- --#{$notification-badge}--PaddingRight: var(--#{$pf-global}--spacer--md);
6
- --#{$notification-badge}--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
7
- --#{$notification-badge}--PaddingLeft: var(--#{$pf-global}--spacer--md);
8
- --#{$notification-badge}--MarginTop: calc(-1 * var(--#{$pf-global}--spacer--form-element));
9
- --#{$notification-badge}--MarginRight: calc(-1 * var(--#{$pf-global}--spacer--md));
10
- --#{$notification-badge}--MarginBottom: calc(-1 * var(--#{$pf-global}--spacer--form-element));
11
- --#{$notification-badge}--MarginLeft: calc(-1 * var(--#{$pf-global}--spacer--md));
12
-
13
- // update all --after variables to --before at breaking change
14
- // ::after border treatment
15
- --#{$notification-badge}--after--BorderColor: transparent; // remove at breaking change
16
- --#{$notification-badge}--after--BorderRadius: var(--#{$pf-global}--BorderRadius--sm);
17
- --#{$notification-badge}--after--BorderWidth: 0; // remove at breaking change
18
- --#{$notification-badge}--after--Top: 0; // remove at breaking change
19
- --#{$notification-badge}--after--Right: 0; // remove at breaking change
20
- --#{$notification-badge}--after--Width: auto; // remove at breaking change
21
- --#{$notification-badge}--after--Height: auto; // remove at breaking change
22
- --#{$notification-badge}--after--BackgroundColor: transparent;
23
-
24
- // This translation works for the Bell icon, although adjusted for a happy medium between FF and Chrome.
25
- // If other icons are used, a modifier may need to be created to allow for proper positioning on that icon.
26
- --#{$notification-badge}--after--TranslateX: 0; // remove at breaking change
27
- --#{$notification-badge}--after--TranslateY: 0; // remove at breaking change
28
-
29
- // The icon is normalized to be square in order to facilitate consistency in positioning
30
- --#{$notification-badge}__i--Width: auto; // remove at breaking change
31
- --#{$notification-badge}__i--Height: auto; // remove at breaking change
3
+ :root {
4
+ --#{$notification-badge}--BackgroundColor: transparent;
5
+ --#{$notification-badge}--MinWidth: 40px;
6
+ --#{$notification-badge}--Gap: var(--pf-t--global--spacer--xs);
7
+ --#{$notification-badge}--PaddingTop: var(--pf-t--global--spacer--sm);
8
+ --#{$notification-badge}--PaddingRight: var(--pf-t--global--spacer--sm);
9
+ --#{$notification-badge}--PaddingBottom: var(--pf-t--global--spacer--sm);
10
+ --#{$notification-badge}--PaddingLeft: var(--pf-t--global--spacer--sm);
11
+ --#{$notification-badge}--MarginTop: calc(-1 * var(--pf-t--global--spacer--sm));
12
+ --#{$notification-badge}--MarginRight: calc(-1 * var(--pf-t--global--spacer--sm));
13
+ --#{$notification-badge}--MarginBottom: calc(-1 * var(--pf-t--global--spacer--sm));
14
+ --#{$notification-badge}--MarginLeft: calc(-1 * var(--pf-t--global--spacer--sm));
15
+
16
+ // ::before border treatment
17
+ --#{$notification-badge}--before--BorderColor: transparent;
18
+ --#{$notification-badge}--BorderRadius: var(--pf-t--global--border--radius--small);
19
+ --#{$notification-badge}--before--BorderWidth: var(--pf-t--global--border--width--control--default);
32
20
 
33
21
  // Modifiers
34
- --#{$notification-badge}--m-read--after--BorderColor: transparent; // remove at breaking change
35
- --#{$notification-badge}--m-read--after--BackgroundColor: transparent;
36
- --#{$notification-badge}--m-read--m-expanded--after--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-200);
22
+ --#{$notification-badge}--m-read--Color: var(--pf-t--global--text--color--regular);
23
+ --#{$notification-badge}--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
24
+ --#{$notification-badge}--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
25
+ --#{$notification-badge}--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--active);
26
+ --#{$notification-badge}--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
27
+ --#{$notification-badge}--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
28
+ --#{$notification-badge}--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--active);
37
29
 
38
30
  // Unread
39
- --#{$notification-badge}--m-unread--Color: var(--#{$pf-global}--Color--light-100);
40
- --#{$notification-badge}--m-unread--after--BackgroundColor: var(--#{$pf-global}--active-color--100);
41
- --#{$notification-badge}--m-unread--hover--after--BackgroundColor: var(--#{$pf-global}--primary-color--200);
42
- --#{$notification-badge}--m-unread--m-expanded--after--BackgroundColor: var(--#{$pf-global}--primary-color--200);
31
+ --#{$notification-badge}--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
32
+ --#{$notification-badge}--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
33
+ --#{$notification-badge}--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
34
+ --#{$notification-badge}--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--active);
43
35
 
44
36
  // Attention
45
- --#{$notification-badge}--m-attention--Color: var(--#{$pf-global}--Color--light-100);
46
- --#{$notification-badge}--m-attention--after--BackgroundColor: var(--#{$pf-global}--danger-color--100);
47
- --#{$notification-badge}--m-attention--hover--after--BackgroundColor: var(--#{$pf-global}--danger-color--200);
48
- --#{$notification-badge}--m-attention--m-expanded--after--BackgroundColor: var(--#{$pf-global}--danger-color--200);
49
- --#{$notification-badge}__count--MarginLeft: var(--#{$pf-global}--spacer--xs);
50
-
51
- // Attention icon
52
- --#{$notification-badge}--pf-v5-pficon-attention-bell--LineHeight: var(--#{$pf-global}--LineHeight--sm);
37
+ --#{$notification-badge}--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
38
+ --#{$notification-badge}--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
39
+ --#{$notification-badge}--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
40
+ --#{$notification-badge}--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--active);
41
+ }
53
42
 
54
- position: relative;
55
- display: inline-block;
43
+ .#{$notification-badge} {
44
+ display: inline-flex;
45
+ gap: var(--#{$notification-badge}--Gap);
46
+ align-items: center;
47
+ justify-content: center;
56
48
  padding-block-start: var(--#{$notification-badge}--PaddingTop);
57
49
  padding-block-end: var(--#{$notification-badge}--PaddingBottom);
58
50
  padding-inline-start: var(--#{$notification-badge}--PaddingLeft);
@@ -61,85 +53,56 @@
61
53
  margin-block-end: var(--#{$notification-badge}--MarginBottom);
62
54
  margin-inline-start: var(--#{$notification-badge}--MarginLeft);
63
55
  margin-inline-end: var(--#{$notification-badge}--MarginRight);
64
- background-color: var(--#{$notification-badge}--after--BackgroundColor); // rename this at breaking change
65
- border-radius: var(--#{$notification-badge}--after--BorderRadius); // renamie this at breaking change
56
+ background-color: var(--#{$notification-badge}--BackgroundColor);
57
+ border-radius: var(--#{$notification-badge}--BorderRadius);
66
58
 
67
- &::before { // update all --after vars to --before at breaking change
59
+ &::before {
68
60
  position: absolute;
69
- inset-block-start: var(--#{$notification-badge}--after--Top); // replace this var with 0 at breaking change
61
+ inset-block-start: 0;
70
62
  inset-block-end: 0;
71
63
  inset-inline-start: 0;
72
- inset-inline-end: var(--#{$notification-badge}--after--Right); // replace this var with 0 at breaking change
73
- width: var(--#{$notification-badge}--after--Width); // remove at breaking change
74
- height: var(--#{$notification-badge}--after--Height); // remove at breaking change
64
+ inset-inline-end: 0;
75
65
  content: "";
76
- border: var(--#{$notification-badge}--after--BorderWidth) solid var(--#{$notification-badge}--after--BorderColor);
77
- border-radius: var(--#{$notification-badge}--after--BorderRadius);
78
- transform: translate(var(--#{$notification-badge}--after--TranslateX), var(--#{$notification-badge}--after--TranslateY));
79
- }
80
-
81
- & > i {
82
- width: var(--#{$notification-badge}__i--Width);
83
- height: var(--#{$notification-badge}__i--Height);
84
- }
85
-
86
- // set children to relative so they appear above ::before
87
- & > * {
88
- position: relative;
89
- }
90
-
91
- .#{$icon}-attention-bell,
92
- .#{$icon}-bell {
93
- display: inline-block;
94
- line-height: var(--#{$notification-badge}--pf-v5-pficon-attention-bell--LineHeight);
95
-
96
- &::before {
97
- vertical-align: bottom;
98
- }
66
+ border: var(--#{$notification-badge}--before--BorderWidth) solid var(--#{$notification-badge}--before--BorderColor);
67
+ border-radius: var(--#{$notification-badge}--BorderRadius);
68
+ transform: translate(var(--#{$notification-badge}--before--TranslateX), var(--#{$notification-badge}--before--TranslateY));
99
69
  }
100
70
 
101
71
  &.pf-m-read {
102
- --#{$notification-badge}--after--BackgroundColor: var(--#{$notification-badge}--m-read--after--BackgroundColor);
103
- --#{$notification-badge}--after--BorderColor: var(--#{$notification-badge}--m-read--after--BorderColor);
72
+ --#{$notification-badge}--BackgroundColor: var(--#{$notification-badge}--m-read--BackgroundColor);
73
+ --#{$notification-badge}--before--BorderColor: var(--#{$notification-badge}--m-read--before--BorderColor);
104
74
 
105
75
  color: var(--#{$notification-badge}--m-read--Color, inherit);
76
+
77
+ &:hover {
78
+ --#{$notification-badge}--before--BorderColor: var(--#{$notification-badge}--m-read--hover--before--BorderColor);
79
+ }
106
80
  }
107
81
 
108
82
  &.pf-m-unread {
109
- --#{$notification-badge}--after--BackgroundColor: var(--#{$notification-badge}--m-unread--after--BackgroundColor);
83
+ --#{$notification-badge}--BackgroundColor: var(--#{$notification-badge}--m-unread--BackgroundColor);
110
84
 
111
85
  color: var(--#{$notification-badge}--m-unread--Color);
112
86
 
113
87
  &:hover {
114
- --#{$notification-badge}--after--BackgroundColor: var(--#{$notification-badge}--m-unread--hover--after--BackgroundColor);
88
+ --#{$notification-badge}--BackgroundColor: var(--#{$notification-badge}--m-unread--hover--BackgroundColor);
115
89
  }
116
90
  }
117
91
 
118
92
  &.pf-m-attention {
119
- --#{$notification-badge}--after--BackgroundColor: var(--#{$notification-badge}--m-attention--after--BackgroundColor);
93
+ --#{$notification-badge}--BackgroundColor: var(--#{$notification-badge}--m-attention--BackgroundColor);
120
94
 
121
95
  color: var(--#{$notification-badge}--m-attention--Color);
122
96
 
123
97
  &:hover {
124
- --#{$notification-badge}--m-attention--after--BackgroundColor: var(--#{$notification-badge}--m-attention--hover--after--BackgroundColor);
98
+ --#{$notification-badge}--m-attention--BackgroundColor: var(--#{$notification-badge}--m-attention--hover--BackgroundColor);
125
99
  }
126
100
  }
127
101
 
128
102
  &.pf-m-expanded {
129
- --#{$notification-badge}--m-read--Color: var(--#{$pf-global}--Color--light-100);
130
- --#{$notification-badge}--m-read--after--BackgroundColor: var(--#{$notification-badge}--m-read--m-expanded--after--BackgroundColor);
131
- --#{$notification-badge}--m-unread--after--BackgroundColor: var(--#{$notification-badge}--m-unread--m-expanded--after--BackgroundColor);
132
- --#{$notification-badge}--m-attention--after--BackgroundColor: var(--#{$notification-badge}--m-attention--m-expanded--after--BackgroundColor);
103
+ --#{$notification-badge}--m-read--BackgroundColor: var(--#{$notification-badge}--m-read--m-expanded--BackgroundColor);
104
+ --#{$notification-badge}--m-read--before--BorderColor: var(--#{$notification-badge}--m-read--m-expanded--before--BorderColor);
105
+ --#{$notification-badge}--m-unread--BackgroundColor: var(--#{$notification-badge}--m-unread--m-expanded--BackgroundColor);
106
+ --#{$notification-badge}--m-attention--BackgroundColor: var(--#{$notification-badge}--m-attention--m-expanded--BackgroundColor);
133
107
  }
134
108
  }
135
-
136
- .#{$notification-badge}__count {
137
- margin-inline-start: var(--#{$notification-badge}__count--MarginLeft);
138
- }
139
-
140
- // stylelint-disable no-invalid-position-at-import-rule
141
- @import "themes/dark/notification-badge";
142
-
143
- @include pf-v5-theme-dark {
144
- @include pf-v5-theme-dark-notification-badge;
145
- }
package/docs/components/NotificationBadge/examples/NotificationBadge.md CHANGED
@@ -2,14 +2,12 @@
2
2
  id: Notification badge
3
3
  section: components
4
4
  cssPrefix: pf-v5-c-notification-badge
5
- ---import './NotificationBadge.css'
6
-
7
- ## Examples
5
+ ---## Examples
8
6
 
9
7
  ### Basic
10
8
 
11
9
  ```html
12
- <div class="pf-v5-t-dark">
10
+ <div>
13
11
  <button
14
12
  class="pf-v5-c-button pf-m-plain"
15
13
  type="button"
@@ -69,7 +67,7 @@ cssPrefix: pf-v5-c-notification-badge
69
67
  ### With count
70
68
 
71
69
  ```html
72
- <div class="pf-v5-t-dark">
70
+ <div>
73
71
  <button
74
72
  class="pf-v5-c-button pf-m-plain"
75
73
  type="button"
@@ -135,7 +133,7 @@ cssPrefix: pf-v5-c-notification-badge
135
133
  ### Expanded
136
134
 
137
135
  ```html
138
- <div class="pf-v5-t-dark">
136
+ <div>
139
137
  <button
140
138
  class="pf-v5-c-button pf-m-plain"
141
139
  type="button"
@@ -206,7 +204,7 @@ cssPrefix: pf-v5-c-notification-badge
206
204
 
207
205
  ### Overview
208
206
 
209
- Always add a modifier class to indicate read, unread, or attention state. Never use the class `.pf-v5-c-notification-badge` on its own. This component is designed to be used within a dark component such as the [masthead](/components/masthead).
207
+ Always add a modifier class to indicate read, unread, or attention state. Never use the class `.pf-v5-c-notification-badge` on its own.
210
208
 
211
209
  ### Accessibility
212
210
 
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.8",
4
+ "version": "6.0.0-alpha.9",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -20971,42 +20971,43 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
20971
20971
  --pf-v5-c-nav__item--item__link--after--Top: 0;
20972
20972
  }
20973
20973
 
20974
+ :root {
20975
+ --pf-v5-c-notification-badge--BackgroundColor: transparent;
20976
+ --pf-v5-c-notification-badge--MinWidth: 40px;
20977
+ --pf-v5-c-notification-badge--Gap: var(--pf-t--global--spacer--xs);
20978
+ --pf-v5-c-notification-badge--PaddingTop: var(--pf-t--global--spacer--sm);
20979
+ --pf-v5-c-notification-badge--PaddingRight: var(--pf-t--global--spacer--sm);
20980
+ --pf-v5-c-notification-badge--PaddingBottom: var(--pf-t--global--spacer--sm);
20981
+ --pf-v5-c-notification-badge--PaddingLeft: var(--pf-t--global--spacer--sm);
20982
+ --pf-v5-c-notification-badge--MarginTop: calc(-1 * var(--pf-t--global--spacer--sm));
20983
+ --pf-v5-c-notification-badge--MarginRight: calc(-1 * var(--pf-t--global--spacer--sm));
20984
+ --pf-v5-c-notification-badge--MarginBottom: calc(-1 * var(--pf-t--global--spacer--sm));
20985
+ --pf-v5-c-notification-badge--MarginLeft: calc(-1 * var(--pf-t--global--spacer--sm));
20986
+ --pf-v5-c-notification-badge--before--BorderColor: transparent;
20987
+ --pf-v5-c-notification-badge--BorderRadius: var(--pf-t--global--border--radius--small);
20988
+ --pf-v5-c-notification-badge--before--BorderWidth: var(--pf-t--global--border--width--control--default);
20989
+ --pf-v5-c-notification-badge--m-read--Color: var(--pf-t--global--text--color--regular);
20990
+ --pf-v5-c-notification-badge--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
20991
+ --pf-v5-c-notification-badge--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
20992
+ --pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--active);
20993
+ --pf-v5-c-notification-badge--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
20994
+ --pf-v5-c-notification-badge--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
20995
+ --pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--active);
20996
+ --pf-v5-c-notification-badge--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
20997
+ --pf-v5-c-notification-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
20998
+ --pf-v5-c-notification-badge--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
20999
+ --pf-v5-c-notification-badge--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--active);
21000
+ --pf-v5-c-notification-badge--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
21001
+ --pf-v5-c-notification-badge--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
21002
+ --pf-v5-c-notification-badge--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
21003
+ --pf-v5-c-notification-badge--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--active);
21004
+ }
21005
+
20974
21006
  .pf-v5-c-notification-badge {
20975
- --pf-v5-c-notification-badge--PaddingTop: var(--pf-v5-global--spacer--form-element);
20976
- --pf-v5-c-notification-badge--PaddingRight: var(--pf-v5-global--spacer--md);
20977
- --pf-v5-c-notification-badge--PaddingBottom: var(--pf-v5-global--spacer--form-element);
20978
- --pf-v5-c-notification-badge--PaddingLeft: var(--pf-v5-global--spacer--md);
20979
- --pf-v5-c-notification-badge--MarginTop: calc(-1 * var(--pf-v5-global--spacer--form-element));
20980
- --pf-v5-c-notification-badge--MarginRight: calc(-1 * var(--pf-v5-global--spacer--md));
20981
- --pf-v5-c-notification-badge--MarginBottom: calc(-1 * var(--pf-v5-global--spacer--form-element));
20982
- --pf-v5-c-notification-badge--MarginLeft: calc(-1 * var(--pf-v5-global--spacer--md));
20983
- --pf-v5-c-notification-badge--after--BorderColor: transparent;
20984
- --pf-v5-c-notification-badge--after--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
20985
- --pf-v5-c-notification-badge--after--BorderWidth: 0;
20986
- --pf-v5-c-notification-badge--after--Top: 0;
20987
- --pf-v5-c-notification-badge--after--Right: 0;
20988
- --pf-v5-c-notification-badge--after--Width: auto;
20989
- --pf-v5-c-notification-badge--after--Height: auto;
20990
- --pf-v5-c-notification-badge--after--BackgroundColor: transparent;
20991
- --pf-v5-c-notification-badge--after--TranslateX: 0;
20992
- --pf-v5-c-notification-badge--after--TranslateY: 0;
20993
- --pf-v5-c-notification-badge__i--Width: auto;
20994
- --pf-v5-c-notification-badge__i--Height: auto;
20995
- --pf-v5-c-notification-badge--m-read--after--BorderColor: transparent;
20996
- --pf-v5-c-notification-badge--m-read--after--BackgroundColor: transparent;
20997
- --pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
20998
- --pf-v5-c-notification-badge--m-unread--Color: var(--pf-v5-global--Color--light-100);
20999
- --pf-v5-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--active-color--100);
21000
- --pf-v5-c-notification-badge--m-unread--hover--after--BackgroundColor: var(--pf-v5-global--primary-color--200);
21001
- --pf-v5-c-notification-badge--m-unread--m-expanded--after--BackgroundColor: var(--pf-v5-global--primary-color--200);
21002
- --pf-v5-c-notification-badge--m-attention--Color: var(--pf-v5-global--Color--light-100);
21003
- --pf-v5-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-global--danger-color--100);
21004
- --pf-v5-c-notification-badge--m-attention--hover--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
21005
- --pf-v5-c-notification-badge--m-attention--m-expanded--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
21006
- --pf-v5-c-notification-badge__count--MarginLeft: var(--pf-v5-global--spacer--xs);
21007
- --pf-v5-c-notification-badge--pf-v5-pficon-attention-bell--LineHeight: var(--pf-v5-global--LineHeight--sm);
21008
- position: relative;
21009
- display: inline-block;
21007
+ display: inline-flex;
21008
+ gap: var(--pf-v5-c-notification-badge--Gap);
21009
+ align-items: center;
21010
+ justify-content: center;
21010
21011
  padding-block-start: var(--pf-v5-c-notification-badge--PaddingTop);
21011
21012
  padding-block-end: var(--pf-v5-c-notification-badge--PaddingBottom);
21012
21013
  padding-inline-start: var(--pf-v5-c-notification-badge--PaddingLeft);
@@ -21015,80 +21016,47 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21015
21016
  margin-block-end: var(--pf-v5-c-notification-badge--MarginBottom);
21016
21017
  margin-inline-start: var(--pf-v5-c-notification-badge--MarginLeft);
21017
21018
  margin-inline-end: var(--pf-v5-c-notification-badge--MarginRight);
21018
- background-color: var(--pf-v5-c-notification-badge--after--BackgroundColor);
21019
- border-radius: var(--pf-v5-c-notification-badge--after--BorderRadius);
21019
+ background-color: var(--pf-v5-c-notification-badge--BackgroundColor);
21020
+ border-radius: var(--pf-v5-c-notification-badge--BorderRadius);
21020
21021
  }
21021
21022
  .pf-v5-c-notification-badge::before {
21022
21023
  position: absolute;
21023
- inset-block-start: var(--pf-v5-c-notification-badge--after--Top);
21024
+ inset-block-start: 0;
21024
21025
  inset-block-end: 0;
21025
21026
  inset-inline-start: 0;
21026
- inset-inline-end: var(--pf-v5-c-notification-badge--after--Right);
21027
- width: var(--pf-v5-c-notification-badge--after--Width);
21028
- height: var(--pf-v5-c-notification-badge--after--Height);
21027
+ inset-inline-end: 0;
21029
21028
  content: "";
21030
- border: var(--pf-v5-c-notification-badge--after--BorderWidth) solid var(--pf-v5-c-notification-badge--after--BorderColor);
21031
- border-radius: var(--pf-v5-c-notification-badge--after--BorderRadius);
21032
- transform: translate(var(--pf-v5-c-notification-badge--after--TranslateX), var(--pf-v5-c-notification-badge--after--TranslateY));
21033
- }
21034
- .pf-v5-c-notification-badge > i {
21035
- width: var(--pf-v5-c-notification-badge__i--Width);
21036
- height: var(--pf-v5-c-notification-badge__i--Height);
21037
- }
21038
- .pf-v5-c-notification-badge > * {
21039
- position: relative;
21040
- }
21041
- .pf-v5-c-notification-badge .pf-v5-c-icon-attention-bell,
21042
- .pf-v5-c-notification-badge .pf-v5-c-icon-bell {
21043
- display: inline-block;
21044
- line-height: var(--pf-v5-c-notification-badge--pf-v5-pficon-attention-bell--LineHeight);
21045
- }
21046
- .pf-v5-c-notification-badge .pf-v5-c-icon-attention-bell::before,
21047
- .pf-v5-c-notification-badge .pf-v5-c-icon-bell::before {
21048
- vertical-align: bottom;
21029
+ border: var(--pf-v5-c-notification-badge--before--BorderWidth) solid var(--pf-v5-c-notification-badge--before--BorderColor);
21030
+ border-radius: var(--pf-v5-c-notification-badge--BorderRadius);
21031
+ transform: translate(var(--pf-v5-c-notification-badge--before--TranslateX), var(--pf-v5-c-notification-badge--before--TranslateY));
21049
21032
  }
21050
21033
  .pf-v5-c-notification-badge.pf-m-read {
21051
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-read--after--BackgroundColor);
21052
- --pf-v5-c-notification-badge--after--BorderColor: var(--pf-v5-c-notification-badge--m-read--after--BorderColor);
21034
+ --pf-v5-c-notification-badge--BackgroundColor: var(--pf-v5-c-notification-badge--m-read--BackgroundColor);
21035
+ --pf-v5-c-notification-badge--before--BorderColor: var(--pf-v5-c-notification-badge--m-read--before--BorderColor);
21053
21036
  color: var(--pf-v5-c-notification-badge--m-read--Color, inherit);
21054
21037
  }
21038
+ .pf-v5-c-notification-badge.pf-m-read:hover {
21039
+ --pf-v5-c-notification-badge--before--BorderColor: var(--pf-v5-c-notification-badge--m-read--hover--before--BorderColor);
21040
+ }
21055
21041
  .pf-v5-c-notification-badge.pf-m-unread {
21056
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--after--BackgroundColor);
21042
+ --pf-v5-c-notification-badge--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--BackgroundColor);
21057
21043
  color: var(--pf-v5-c-notification-badge--m-unread--Color);
21058
21044
  }
21059
21045
  .pf-v5-c-notification-badge.pf-m-unread:hover {
21060
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--hover--after--BackgroundColor);
21046
+ --pf-v5-c-notification-badge--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--hover--BackgroundColor);
21061
21047
  }
21062
21048
  .pf-v5-c-notification-badge.pf-m-attention {
21063
- --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--after--BackgroundColor);
21049
+ --pf-v5-c-notification-badge--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--BackgroundColor);
21064
21050
  color: var(--pf-v5-c-notification-badge--m-attention--Color);
21065
21051
  }
21066
21052
  .pf-v5-c-notification-badge.pf-m-attention:hover {
21067
- --pf-v5-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--hover--after--BackgroundColor);
21053
+ --pf-v5-c-notification-badge--m-attention--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--hover--BackgroundColor);
21068
21054
  }
21069
21055
  .pf-v5-c-notification-badge.pf-m-expanded {
21070
- --pf-v5-c-notification-badge--m-read--Color: var(--pf-v5-global--Color--light-100);
21071
- --pf-v5-c-notification-badge--m-read--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor);
21072
- --pf-v5-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--m-expanded--after--BackgroundColor);
21073
- --pf-v5-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--m-expanded--after--BackgroundColor);
21074
- }
21075
-
21076
- .pf-v5-c-notification-badge__count {
21077
- margin-inline-start: var(--pf-v5-c-notification-badge__count--MarginLeft);
21078
- }
21079
-
21080
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button,
21081
- :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button,
21082
- :where(.pf-v5-theme-dark) .pf-v5-c-page__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-banner .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,
21083
- :where(.pf-v5-theme-dark) .pf-v5-c-login__footer .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-button {
21084
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
21085
- }
21086
-
21087
- :where(.pf-v5-theme-dark) .pf-v5-c-notification-badge {
21088
- --pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
21089
- --pf-v5-c-notification-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
21090
- --pf-v5-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--primary-color--300);
21091
- --pf-v5-c-notification-badge--m-attention--Color: var(--pf-v5-global--palette--black-900);
21056
+ --pf-v5-c-notification-badge--m-read--BackgroundColor: var(--pf-v5-c-notification-badge--m-read--m-expanded--BackgroundColor);
21057
+ --pf-v5-c-notification-badge--m-read--before--BorderColor: var(--pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor);
21058
+ --pf-v5-c-notification-badge--m-unread--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--m-expanded--BackgroundColor);
21059
+ --pf-v5-c-notification-badge--m-attention--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--m-expanded--BackgroundColor);
21092
21060
  }
21093
21061
 
21094
21062
  .pf-v5-c-notification-drawer {