@patternfly/patternfly 5.2.0-prerelease.3 → 6.0.0-alpha.10

package/components/NotificationBadge/notification-badge.css

@@ -1,39 +1,40 @@
+:root {
+  --pf-v5-c-notification-badge--BackgroundColor: transparent;
+  --pf-v5-c-notification-badge--MinWidth: 40px;
+  --pf-v5-c-notification-badge--Gap: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-notification-badge--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-notification-badge--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-notification-badge--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-notification-badge--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-notification-badge--MarginTop: calc(-1 * var(--pf-t--global--spacer--sm));
+  --pf-v5-c-notification-badge--MarginRight: calc(-1 * var(--pf-t--global--spacer--sm));
+  --pf-v5-c-notification-badge--MarginBottom: calc(-1 * var(--pf-t--global--spacer--sm));
+  --pf-v5-c-notification-badge--MarginLeft: calc(-1 * var(--pf-t--global--spacer--sm));
+  --pf-v5-c-notification-badge--before--BorderColor: transparent;
+  --pf-v5-c-notification-badge--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v5-c-notification-badge--before--BorderWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-notification-badge--m-read--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-notification-badge--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-notification-badge--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
+  --pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--active);
+  --pf-v5-c-notification-badge--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
+  --pf-v5-c-notification-badge--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
+  --pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--active);
+  --pf-v5-c-notification-badge--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
+  --pf-v5-c-notification-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v5-c-notification-badge--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
+  --pf-v5-c-notification-badge--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--active);
+  --pf-v5-c-notification-badge--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
+  --pf-v5-c-notification-badge--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
+  --pf-v5-c-notification-badge--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
+  --pf-v5-c-notification-badge--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--active);
+}
+
 .pf-v5-c-notification-badge {
-  --pf-v5-c-notification-badge--PaddingTop: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-notification-badge--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-notification-badge--PaddingBottom: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-notification-badge--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-notification-badge--MarginTop: calc(-1 * var(--pf-v5-global--spacer--form-element));
-  --pf-v5-c-notification-badge--MarginRight: calc(-1 * var(--pf-v5-global--spacer--md));
-  --pf-v5-c-notification-badge--MarginBottom: calc(-1 * var(--pf-v5-global--spacer--form-element));
-  --pf-v5-c-notification-badge--MarginLeft: calc(-1 * var(--pf-v5-global--spacer--md));
-  --pf-v5-c-notification-badge--after--BorderColor: transparent;
-  --pf-v5-c-notification-badge--after--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
-  --pf-v5-c-notification-badge--after--BorderWidth: 0;
-  --pf-v5-c-notification-badge--after--Top: 0;
-  --pf-v5-c-notification-badge--after--Right: 0;
-  --pf-v5-c-notification-badge--after--Width: auto;
-  --pf-v5-c-notification-badge--after--Height: auto;
-  --pf-v5-c-notification-badge--after--BackgroundColor: transparent;
-  --pf-v5-c-notification-badge--after--TranslateX: 0;
-  --pf-v5-c-notification-badge--after--TranslateY: 0;
-  --pf-v5-c-notification-badge__i--Width: auto;
-  --pf-v5-c-notification-badge__i--Height: auto;
-  --pf-v5-c-notification-badge--m-read--after--BorderColor: transparent;
-  --pf-v5-c-notification-badge--m-read--after--BackgroundColor: transparent;
-  --pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
-  --pf-v5-c-notification-badge--m-unread--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-notification-badge--m-unread--hover--after--BackgroundColor: var(--pf-v5-global--primary-color--200);
-  --pf-v5-c-notification-badge--m-unread--m-expanded--after--BackgroundColor: var(--pf-v5-global--primary-color--200);
-  --pf-v5-c-notification-badge--m-attention--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-notification-badge--m-attention--hover--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
-  --pf-v5-c-notification-badge--m-attention--m-expanded--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
-  --pf-v5-c-notification-badge__count--MarginLeft: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-notification-badge--pf-v5-pficon-attention-bell--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  position: relative;
-  display: inline-block;
+  display: inline-flex;
+  gap: var(--pf-v5-c-notification-badge--Gap);
+  align-items: center;
+  justify-content: center;
   padding-block-start: var(--pf-v5-c-notification-badge--PaddingTop);
   padding-block-end: var(--pf-v5-c-notification-badge--PaddingBottom);
   padding-inline-start: var(--pf-v5-c-notification-badge--PaddingLeft);
@@ -42,71 +43,45 @@
   margin-block-end: var(--pf-v5-c-notification-badge--MarginBottom);
   margin-inline-start: var(--pf-v5-c-notification-badge--MarginLeft);
   margin-inline-end: var(--pf-v5-c-notification-badge--MarginRight);
-  background-color: var(--pf-v5-c-notification-badge--after--BackgroundColor);
-  border-radius: var(--pf-v5-c-notification-badge--after--BorderRadius);
+  background-color: var(--pf-v5-c-notification-badge--BackgroundColor);
+  border-radius: var(--pf-v5-c-notification-badge--BorderRadius);
 }
 .pf-v5-c-notification-badge::before {
   position: absolute;
-  inset-block-start: var(--pf-v5-c-notification-badge--after--Top);
+  inset-block-start: 0;
   inset-block-end: 0;
   inset-inline-start: 0;
-  inset-inline-end: var(--pf-v5-c-notification-badge--after--Right);
-  width: var(--pf-v5-c-notification-badge--after--Width);
-  height: var(--pf-v5-c-notification-badge--after--Height);
+  inset-inline-end: 0;
   content: "";
-  border: var(--pf-v5-c-notification-badge--after--BorderWidth) solid var(--pf-v5-c-notification-badge--after--BorderColor);
-  border-radius: var(--pf-v5-c-notification-badge--after--BorderRadius);
-  transform: translate(var(--pf-v5-c-notification-badge--after--TranslateX), var(--pf-v5-c-notification-badge--after--TranslateY));
-}
-.pf-v5-c-notification-badge > i {
-  width: var(--pf-v5-c-notification-badge__i--Width);
-  height: var(--pf-v5-c-notification-badge__i--Height);
-}
-.pf-v5-c-notification-badge > * {
-  position: relative;
-}
-.pf-v5-c-notification-badge .pf-v5-c-icon-attention-bell,
-.pf-v5-c-notification-badge .pf-v5-c-icon-bell {
-  display: inline-block;
-  line-height: var(--pf-v5-c-notification-badge--pf-v5-pficon-attention-bell--LineHeight);
-}
-.pf-v5-c-notification-badge .pf-v5-c-icon-attention-bell::before,
-.pf-v5-c-notification-badge .pf-v5-c-icon-bell::before {
-  vertical-align: bottom;
+  border: var(--pf-v5-c-notification-badge--before--BorderWidth) solid var(--pf-v5-c-notification-badge--before--BorderColor);
+  border-radius: var(--pf-v5-c-notification-badge--BorderRadius);
+  transform: translate(var(--pf-v5-c-notification-badge--before--TranslateX), var(--pf-v5-c-notification-badge--before--TranslateY));
 }
 .pf-v5-c-notification-badge.pf-m-read {
-  --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-read--after--BackgroundColor);
-  --pf-v5-c-notification-badge--after--BorderColor: var(--pf-v5-c-notification-badge--m-read--after--BorderColor);
+  --pf-v5-c-notification-badge--BackgroundColor: var(--pf-v5-c-notification-badge--m-read--BackgroundColor);
+  --pf-v5-c-notification-badge--before--BorderColor: var(--pf-v5-c-notification-badge--m-read--before--BorderColor);
   color: var(--pf-v5-c-notification-badge--m-read--Color, inherit);
 }
+.pf-v5-c-notification-badge.pf-m-read:hover {
+  --pf-v5-c-notification-badge--before--BorderColor: var(--pf-v5-c-notification-badge--m-read--hover--before--BorderColor);
+}
 .pf-v5-c-notification-badge.pf-m-unread {
-  --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--after--BackgroundColor);
+  --pf-v5-c-notification-badge--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--BackgroundColor);
   color: var(--pf-v5-c-notification-badge--m-unread--Color);
 }
 .pf-v5-c-notification-badge.pf-m-unread:hover {
-  --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--hover--after--BackgroundColor);
+  --pf-v5-c-notification-badge--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--hover--BackgroundColor);
 }
 .pf-v5-c-notification-badge.pf-m-attention {
-  --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--after--BackgroundColor);
+  --pf-v5-c-notification-badge--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--BackgroundColor);
   color: var(--pf-v5-c-notification-badge--m-attention--Color);
 }
 .pf-v5-c-notification-badge.pf-m-attention:hover {
-  --pf-v5-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--hover--after--BackgroundColor);
+  --pf-v5-c-notification-badge--m-attention--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--hover--BackgroundColor);
 }
 .pf-v5-c-notification-badge.pf-m-expanded {
-  --pf-v5-c-notification-badge--m-read--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-notification-badge--m-read--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor);
-  --pf-v5-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--m-expanded--after--BackgroundColor);
-  --pf-v5-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--m-expanded--after--BackgroundColor);
-}
-
-.pf-v5-c-notification-badge__count {
-  margin-inline-start: var(--pf-v5-c-notification-badge__count--MarginLeft);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-notification-badge {
-  --pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-  --pf-v5-c-notification-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
-  --pf-v5-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--primary-color--300);
-  --pf-v5-c-notification-badge--m-attention--Color: var(--pf-v5-global--palette--black-900);
+  --pf-v5-c-notification-badge--m-read--BackgroundColor: var(--pf-v5-c-notification-badge--m-read--m-expanded--BackgroundColor);
+  --pf-v5-c-notification-badge--m-read--before--BorderColor: var(--pf-v5-c-notification-badge--m-read--m-expanded--before--BorderColor);
+  --pf-v5-c-notification-badge--m-unread--BackgroundColor: var(--pf-v5-c-notification-badge--m-unread--m-expanded--BackgroundColor);
+  --pf-v5-c-notification-badge--m-attention--BackgroundColor: var(--pf-v5-c-notification-badge--m-attention--m-expanded--BackgroundColor);
 }

package/components/NotificationBadge/notification-badge.scss

@@ -1,58 +1,50 @@
 // @debug $notification-badge; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$notification-badge} {
-  --#{$notification-badge}--PaddingTop: var(--#{$pf-global}--spacer--form-element);
-  --#{$notification-badge}--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$notification-badge}--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
-  --#{$notification-badge}--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$notification-badge}--MarginTop: calc(-1 * var(--#{$pf-global}--spacer--form-element));
-  --#{$notification-badge}--MarginRight: calc(-1 * var(--#{$pf-global}--spacer--md));
-  --#{$notification-badge}--MarginBottom: calc(-1 * var(--#{$pf-global}--spacer--form-element));
-  --#{$notification-badge}--MarginLeft: calc(-1 * var(--#{$pf-global}--spacer--md));
-
-  // update all --after variables to --before at breaking change
-  // ::after border treatment
-  --#{$notification-badge}--after--BorderColor: transparent; // remove at breaking change
-  --#{$notification-badge}--after--BorderRadius: var(--#{$pf-global}--BorderRadius--sm);
-  --#{$notification-badge}--after--BorderWidth: 0; // remove at breaking change
-  --#{$notification-badge}--after--Top: 0; // remove at breaking change
-  --#{$notification-badge}--after--Right: 0; // remove at breaking change
-  --#{$notification-badge}--after--Width: auto; // remove at breaking change
-  --#{$notification-badge}--after--Height: auto; // remove at breaking change
-  --#{$notification-badge}--after--BackgroundColor: transparent;
-
-  // This translation works for the Bell icon, although adjusted for a happy medium between FF and Chrome.
-  // If other icons are used, a modifier may need to be created to allow for proper positioning on that icon.
-  --#{$notification-badge}--after--TranslateX: 0; // remove at breaking change
-  --#{$notification-badge}--after--TranslateY: 0; // remove at breaking change
-
-  // The icon is normalized to be square in order to facilitate consistency in positioning
-  --#{$notification-badge}__i--Width: auto; // remove at breaking change
-  --#{$notification-badge}__i--Height: auto; // remove at breaking change
+:root {
+  --#{$notification-badge}--BackgroundColor: transparent;
+  --#{$notification-badge}--MinWidth: 40px;
+  --#{$notification-badge}--Gap: var(--pf-t--global--spacer--xs);
+  --#{$notification-badge}--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$notification-badge}--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$notification-badge}--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$notification-badge}--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$notification-badge}--MarginTop: calc(-1 * var(--pf-t--global--spacer--sm));
+  --#{$notification-badge}--MarginRight: calc(-1 * var(--pf-t--global--spacer--sm));
+  --#{$notification-badge}--MarginBottom: calc(-1 * var(--pf-t--global--spacer--sm));
+  --#{$notification-badge}--MarginLeft: calc(-1 * var(--pf-t--global--spacer--sm));
+
+  // ::before border treatment
+  --#{$notification-badge}--before--BorderColor: transparent;
+  --#{$notification-badge}--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$notification-badge}--before--BorderWidth: var(--pf-t--global--border--width--control--default);
 
   // Modifiers
-  --#{$notification-badge}--m-read--after--BorderColor: transparent; // remove at breaking change
-  --#{$notification-badge}--m-read--after--BackgroundColor: transparent;
-  --#{$notification-badge}--m-read--m-expanded--after--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-200);
+  --#{$notification-badge}--m-read--Color: var(--pf-t--global--text--color--regular);
+  --#{$notification-badge}--m-read--before--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$notification-badge}--m-read--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
+  --#{$notification-badge}--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--active);
+  --#{$notification-badge}--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
+  --#{$notification-badge}--m-read--m-expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
+  --#{$notification-badge}--m-read--m-expanded--before--BorderColor: var(--pf-t--global--border--color--active);
 
   // Unread
-  --#{$notification-badge}--m-unread--Color: var(--#{$pf-global}--Color--light-100);
-  --#{$notification-badge}--m-unread--after--BackgroundColor: var(--#{$pf-global}--active-color--100);
-  --#{$notification-badge}--m-unread--hover--after--BackgroundColor: var(--#{$pf-global}--primary-color--200);
-  --#{$notification-badge}--m-unread--m-expanded--after--BackgroundColor: var(--#{$pf-global}--primary-color--200);
+  --#{$notification-badge}--m-unread--Color: var(--pf-t--global--icon--color--on-brand--default);
+  --#{$notification-badge}--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --#{$notification-badge}--m-unread--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
+  --#{$notification-badge}--m-unread--m-expanded--BackgroundColor: var(--pf-t--global--color--brand--active);
 
   // Attention
-  --#{$notification-badge}--m-attention--Color: var(--#{$pf-global}--Color--light-100);
-  --#{$notification-badge}--m-attention--after--BackgroundColor: var(--#{$pf-global}--danger-color--100);
-  --#{$notification-badge}--m-attention--hover--after--BackgroundColor: var(--#{$pf-global}--danger-color--200);
-  --#{$notification-badge}--m-attention--m-expanded--after--BackgroundColor: var(--#{$pf-global}--danger-color--200);
-  --#{$notification-badge}__count--MarginLeft: var(--#{$pf-global}--spacer--xs);
-
-  // Attention icon
-  --#{$notification-badge}--pf-v5-pficon-attention-bell--LineHeight: var(--#{$pf-global}--LineHeight--sm);
+  --#{$notification-badge}--m-attention--Color: var(--pf-t--global--icon--color--status--on-danger--default);
+  --#{$notification-badge}--m-attention--BackgroundColor: var(--pf-t--global--color--status--danger--default);
+  --#{$notification-badge}--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
+  --#{$notification-badge}--m-attention--m-expanded--BackgroundColor: var(--pf-t--global--color--status--danger--active);
+}
 
-  position: relative;
-  display: inline-block;
+.#{$notification-badge} {
+  display: inline-flex;
+  gap: var(--#{$notification-badge}--Gap);
+  align-items: center;
+  justify-content: center;
   padding-block-start: var(--#{$notification-badge}--PaddingTop);
   padding-block-end: var(--#{$notification-badge}--PaddingBottom);
   padding-inline-start: var(--#{$notification-badge}--PaddingLeft);
@@ -61,85 +53,56 @@
   margin-block-end: var(--#{$notification-badge}--MarginBottom);
   margin-inline-start: var(--#{$notification-badge}--MarginLeft);
   margin-inline-end: var(--#{$notification-badge}--MarginRight);
-  background-color: var(--#{$notification-badge}--after--BackgroundColor); // rename this at breaking change
-  border-radius: var(--#{$notification-badge}--after--BorderRadius); // renamie this at breaking change
+  background-color: var(--#{$notification-badge}--BackgroundColor);
+  border-radius: var(--#{$notification-badge}--BorderRadius);
 
-  &::before { // update all --after vars to --before at breaking change
+  &::before {
     position: absolute;
-    inset-block-start: var(--#{$notification-badge}--after--Top); // replace this var with 0 at breaking change
+    inset-block-start: 0;
     inset-block-end: 0;
     inset-inline-start: 0;
-    inset-inline-end: var(--#{$notification-badge}--after--Right); // replace this var with 0 at breaking change
-    width: var(--#{$notification-badge}--after--Width); // remove at breaking change
-    height: var(--#{$notification-badge}--after--Height); // remove at breaking change
+    inset-inline-end: 0;
     content: "";
-    border: var(--#{$notification-badge}--after--BorderWidth) solid var(--#{$notification-badge}--after--BorderColor);
-    border-radius: var(--#{$notification-badge}--after--BorderRadius);
-    transform: translate(var(--#{$notification-badge}--after--TranslateX), var(--#{$notification-badge}--after--TranslateY));
-  }
-
-  & > i {
-    width: var(--#{$notification-badge}__i--Width);
-    height: var(--#{$notification-badge}__i--Height);
-  }
-
-  // set children to relative so they appear above ::before
-  & > * {
-    position: relative;
-  }
-
-  .#{$icon}-attention-bell,
-  .#{$icon}-bell {
-    display: inline-block;
-    line-height: var(--#{$notification-badge}--pf-v5-pficon-attention-bell--LineHeight);
-
-    &::before {
-      vertical-align: bottom;
-    }
+    border: var(--#{$notification-badge}--before--BorderWidth) solid var(--#{$notification-badge}--before--BorderColor);
+    border-radius: var(--#{$notification-badge}--BorderRadius);
+    transform: translate(var(--#{$notification-badge}--before--TranslateX), var(--#{$notification-badge}--before--TranslateY));
   }
 
   &.pf-m-read {
-    --#{$notification-badge}--after--BackgroundColor: var(--#{$notification-badge}--m-read--after--BackgroundColor);
-    --#{$notification-badge}--after--BorderColor: var(--#{$notification-badge}--m-read--after--BorderColor);
+    --#{$notification-badge}--BackgroundColor: var(--#{$notification-badge}--m-read--BackgroundColor);
+    --#{$notification-badge}--before--BorderColor: var(--#{$notification-badge}--m-read--before--BorderColor);
 
     color: var(--#{$notification-badge}--m-read--Color, inherit);
+
+    &:hover {
+      --#{$notification-badge}--before--BorderColor: var(--#{$notification-badge}--m-read--hover--before--BorderColor);
+    }
   }
 
   &.pf-m-unread {
-    --#{$notification-badge}--after--BackgroundColor: var(--#{$notification-badge}--m-unread--after--BackgroundColor);
+    --#{$notification-badge}--BackgroundColor: var(--#{$notification-badge}--m-unread--BackgroundColor);
 
     color: var(--#{$notification-badge}--m-unread--Color);
 
     &:hover {
-      --#{$notification-badge}--after--BackgroundColor: var(--#{$notification-badge}--m-unread--hover--after--BackgroundColor);
+      --#{$notification-badge}--BackgroundColor: var(--#{$notification-badge}--m-unread--hover--BackgroundColor);
     }
   }
 
   &.pf-m-attention {
-    --#{$notification-badge}--after--BackgroundColor: var(--#{$notification-badge}--m-attention--after--BackgroundColor);
+    --#{$notification-badge}--BackgroundColor: var(--#{$notification-badge}--m-attention--BackgroundColor);
 
     color: var(--#{$notification-badge}--m-attention--Color);
 
     &:hover {
-      --#{$notification-badge}--m-attention--after--BackgroundColor: var(--#{$notification-badge}--m-attention--hover--after--BackgroundColor);
+      --#{$notification-badge}--m-attention--BackgroundColor: var(--#{$notification-badge}--m-attention--hover--BackgroundColor);
     }
   }
 
   &.pf-m-expanded {
-    --#{$notification-badge}--m-read--Color: var(--#{$pf-global}--Color--light-100);
-    --#{$notification-badge}--m-read--after--BackgroundColor: var(--#{$notification-badge}--m-read--m-expanded--after--BackgroundColor);
-    --#{$notification-badge}--m-unread--after--BackgroundColor: var(--#{$notification-badge}--m-unread--m-expanded--after--BackgroundColor);
-    --#{$notification-badge}--m-attention--after--BackgroundColor: var(--#{$notification-badge}--m-attention--m-expanded--after--BackgroundColor);
+    --#{$notification-badge}--m-read--BackgroundColor: var(--#{$notification-badge}--m-read--m-expanded--BackgroundColor);
+    --#{$notification-badge}--m-read--before--BorderColor: var(--#{$notification-badge}--m-read--m-expanded--before--BorderColor);
+    --#{$notification-badge}--m-unread--BackgroundColor: var(--#{$notification-badge}--m-unread--m-expanded--BackgroundColor);
+    --#{$notification-badge}--m-attention--BackgroundColor: var(--#{$notification-badge}--m-attention--m-expanded--BackgroundColor);
   }
 }
-
-.#{$notification-badge}__count {
-  margin-inline-start: var(--#{$notification-badge}__count--MarginLeft);
-}
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/notification-badge";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-notification-badge;
-}

package/components/Page/page.css

@@ -10,7 +10,7 @@
   --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
 }
 
-.pf-v5-c-page__main-section[class*=pf-m-dark-], .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector, .pf-v5-c-page__sidebar, .pf-v5-c-page__header {
+.pf-v5-c-page__main-section[class*=pf-m-dark-], .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector, .pf-v5-c-page__header {
   --pf-v5-global--Color--100: var(--pf-v5-global--Color--light-100);
   --pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200);
   --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--light-100);
@@ -21,7 +21,7 @@
   --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
   --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
 }
-.pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button, .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button, .pf-v5-c-page__sidebar .pf-v5-c-button, .pf-v5-c-page__header .pf-v5-c-button {
+.pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button, .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button, .pf-v5-c-page__header .pf-v5-c-button {
   --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
 }
 
@@ -75,31 +75,31 @@
 }
 
 :root {
-  --pf-v5-c-page--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
-  --pf-v5-c-page--inset: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page--xl--inset: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-page__header--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
+  --pf-v5-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-page--inset: var(--pf-t--global--spacer--md);
+  --pf-v5-c-page--xl--inset: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-page__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v5-c-page__header--ZIndex: var(--pf-v5-global--ZIndex--md);
   --pf-v5-c-page__header--MinHeight: 4.75rem;
-  --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__header-brand--xl--PaddingRight: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-page__header-brand--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-page__header-brand--xl--PaddingRight: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-page__header-brand--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight: var(--pf-t--global--spacer--md);
   --pf-v5-c-page__header-sidebar-toggle__c-button--MarginLeft: calc(var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft) * -1);
-  --pf-v5-c-page__header-sidebar-toggle__c-button--FontSize: var(--pf-v5-global--FontSize--2xl);
+  --pf-v5-c-page__header-sidebar-toggle__c-button--FontSize: var(--pf-t--global--icon--size--lg);
   --pf-v5-c-page__header-brand-link--c-brand--MaxHeight: 3.75rem;
-  --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
+  --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v5-c-page__header-nav--xl--BackgroundColor: transparent;
-  --pf-v5-c-page__header-nav--xl--PaddingRight: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-page__header-nav--xl--PaddingLeft: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-page__header-tools--MarginRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__header-tools--xl--MarginRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-page__header-tools--c-avatar--MarginLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__header-tools-group--MarginLeft: var(--pf-v5-global--spacer--xl);
+  --pf-v5-c-page__header-nav--xl--PaddingRight: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-page__header-nav--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-page__header-tools--MarginRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-page__header-tools--xl--MarginRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-page__header-tools--c-avatar--MarginLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-page__header-tools-group--MarginLeft: var(--pf-t--global--spacer--xl);
   --pf-v5-c-page__header-tools-group--Display: flex;
   --pf-v5-c-page__header-tools-item--Display: block;
   --pf-v5-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
@@ -114,16 +114,24 @@
   --pf-v5-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor: transparent;
   --pf-v5-c-page__sidebar--ZIndex: var(--pf-v5-global--ZIndex--sm);
   --pf-v5-c-page__sidebar--Width: 18.125rem;
-  --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
+  --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v5-c-page__sidebar--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
   --pf-v5-c-page__sidebar--m-light--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
   --pf-v5-c-page__sidebar--m-light--BorderRightColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-page__sidebar--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
+  --pf-v5-c-page__sidebar--BoxShadow: none;
   --pf-v5-c-page__sidebar--Transition: var(--pf-v5-global--Transition);
   --pf-v5-c-page__sidebar--TranslateX: -100%;
   --pf-v5-c-page__sidebar--TranslateZ: 0;
   --pf-v5-c-page__sidebar--m-expanded--TranslateX: 0;
   --pf-v5-c-page__sidebar--xl--TranslateX: 0;
+  --pf-v5-c-page__sidebar-header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
+  --pf-v5-c-page__sidebar-header--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-page__sidebar-header--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-page__sidebar-header--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-page__sidebar-title--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-page__sidebar-title--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-page__sidebar-title--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v5-c-page__sidebar-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
   --pf-v5-c-page__sidebar-body--PaddingRight: 0;
   --pf-v5-c-page__sidebar-body--PaddingLeft: 0;
   --pf-v5-c-page__sidebar-body--m-page-insets--PaddingRight: var(--pf-v5-c-page--inset);
@@ -132,22 +140,19 @@
   --pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
   --pf-v5-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-v5-global--BackgroundColor--dark-200);
   --pf-v5-c-page__main--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__main-section--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__main-section--xl--PaddingTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-page__main-section--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-page__main-section--xl--PaddingBottom: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-page__main-section--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
-  --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
-  --pf-v5-c-page__main-section--m-light-100--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
-  --pf-v5-c-page__main-section--m-dark-100--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-100);
-  --pf-v5-c-page__main-section--m-dark-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-200);
-  --pf-v5-c-page__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__main-nav--page__main-tabs--PaddingTop: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-page__main-section--MarginTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-page__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-page__main-section--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-page__main-section--PaddingBottom: 0;
+  --pf-v5-c-page__main-section--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-page__main-section--BackgroundColor: transparent;
+  --pf-v5-c-page__main-section--m-light--BackgroundColor: transparent;
+  --pf-v5-c-page__main-section--m-light-100--BackgroundColor: transparent;
+  --pf-v5-c-page__main-section--m-dark-100--BackgroundColor: transparent;
+  --pf-v5-c-page__main-section--m-dark-200--BackgroundColor: transparent;
+  --pf-v5-c-page__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-page__main-nav--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
   --pf-v5-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v5-c-page__sidebar--Width));
   --pf-v5-c-page--section--m-sticky-top--ZIndex: var(--pf-v5-global--ZIndex--md);
   --pf-v5-c-page--section--m-sticky-top--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
@@ -171,19 +176,14 @@
   --pf-v5-c-page__main-subnav--BorderLeftColor: var(--pf-v5-global--palette--black-800);
   --pf-v5-c-page__sidebar--main__main-subnav--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
   --pf-v5-c-page__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth: 0;
-  --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
-  --pf-v5-c-page__main-breadcrumb--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-page__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-t--global--spacer--md);
   --pf-v5-c-page__main-breadcrumb--PaddingBottom: 0;
-  --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__main-breadcrumb--m-sticky-top--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__main-breadcrumb--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-page__main-breadcrumb--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
+  --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-t--global--spacer--lg);
   --pf-v5-c-page__main-tabs--PaddingTop: 0;
   --pf-v5-c-page__main-tabs--PaddingRight: 0;
   --pf-v5-c-page__main-tabs--PaddingBottom: 0;
   --pf-v5-c-page__main-tabs--PaddingLeft: 0;
-  --pf-v5-c-page__main-tabs--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
   --pf-v5-c-page__main-wizard--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
   --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-v5-global--BorderColor--100);
   --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
@@ -212,26 +212,6 @@
     --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--xl--TranslateX);
   }
 }
-@media screen and (min-width: 1200px) {
-  :root {
-    --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-c-page__main-section--xl--PaddingTop);
-    --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-c-page__main-section--xl--PaddingRight);
-    --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-c-page__main-section--xl--PaddingBottom);
-    --pf-v5-c-page__main-section--PaddingLeft: var(--pf-v5-c-page__main-section--xl--PaddingLeft);
-  }
-}
-@media screen and (min-width: 1200px) {
-  :root {
-    --pf-v5-c-page__main-nav--PaddingRight: var(--pf-v5-c-page__main-nav--xl--PaddingRight);
-    --pf-v5-c-page__main-nav--PaddingLeft: var(--pf-v5-c-page__main-nav--xl--PaddingLeft);
-  }
-}
-@media screen and (min-width: 1200px) {
-  :root {
-    --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingRight);
-    --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft);
-  }
-}
 
 .pf-v5-c-page {
   display: grid;
@@ -384,7 +364,6 @@
 }
 
 .pf-v5-c-page__sidebar {
-  color: var(--pf-v5-global--Color--100);
   z-index: var(--pf-v5-c-page__sidebar--ZIndex);
   display: flex;
   flex-direction: column;
@@ -392,6 +371,10 @@
   grid-row-start: 2;
   grid-column-start: 1;
   width: var(--pf-v5-c-page__sidebar--Width);
+  padding-block-start: 0;
+  padding-block-end: var(--pf-t--global--spacer--lg);
+  padding-inline-start: var(--pf-t--global--spacer--lg);
+  margin-inline-end: var(--pf-v5-c-page__sidebar--MarginRight);
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
@@ -422,6 +405,19 @@
   border-inline-end: var(--pf-v5-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-v5-c-page__sidebar--m-light--BorderRightColor);
 }
 
+.pf-v5-c-page__sidebar-header {
+  padding-block-start: var(--pf-v5-c-page__sidebar-header--PaddingTop);
+  padding-block-end: var(--pf-v5-c-page__sidebar-header--PaddingBottom);
+  border-block-end: var(--pf-v5-c-page__sidebar-header--BorderBottomWidth) solid var(--pf-v5-c-page__sidebar-header--BorderBottomColor);
+}
+
+.pf-v5-c-page__sidebar-title {
+  font-family: var(--pf-v5-c-page__sidebar-title--FontFamily);
+  font-size: var(--pf-v5-c-page__sidebar-title--FontSize);
+  font-weight: var(--pf-v5-c-page__sidebar-title--FontWeight);
+  line-height: var(--pf-v5-c-page__sidebar-title--LineHeight);
+}
+
 .pf-v5-c-page__sidebar-body {
   padding-inline-start: var(--pf-v5-c-page__sidebar-body--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-page__sidebar-body--PaddingRight);
@@ -687,6 +683,19 @@
   }
 }
 
+.pf-v5-c-page__main {
+  margin-block-start: 0;
+  margin-inline-start: var(--pf-t--global--spacer--lg);
+  margin-inline-end: var(--pf-t--global--spacer--lg);
+}
+
+.pf-v5-c-page__main-list {
+  padding-block-end: var(--pf-t--global--spacer--lg);
+  margin-block-end: var(--pf-t--global--spacer--lg);
+  background-color: var(--pf-t--global--background--color--primary--default);
+  border-radius: var(--pf-t--global--border--radius--large);
+}
+
 .pf-v5-c-page__main,
 .pf-v5-c-page__drawer {
   z-index: var(--pf-v5-c-page__main--ZIndex);
@@ -702,7 +711,8 @@
 
 .pf-v5-c-page__main,
 .pf-v5-c-page__main-drawer,
-.pf-v5-c-page__main-group {
+.pf-v5-c-page__main-group,
+.pf-v5-c-page__main-list {
   display: flex;
   flex-direction: column;
 }