@patternfly/react-styles 6.0.0-alpha.5 → 6.0.0-alpha.7

package/css/components/Nav/nav.d.ts

@@ -1,40 +1,29 @@
 import './nav.css';
 declare const _default: {
+  "buttonIcon": "pf-v5-c-button__icon",
   "dirRtl": "pf-v5-m-dir-rtl",
-  "divider": "pf-v5-c-divider",
-  "menu": "pf-v5-c-menu",
-  "menuContent": "pf-v5-c-menu__content",
-  "menuItem": "pf-v5-c-menu__item",
-  "menuItemToggleIcon": "pf-v5-c-menu__item-toggle-icon",
-  "menuListItem": "pf-v5-c-menu__list-item",
   "modifiers": {
-    "flyout": "pf-m-flyout",
-    "top": "pf-m-top",
-    "left": "pf-m-left",
-    "current": "pf-m-current",
-    "drillUp": "pf-m-drill-up",
-    "horizontal": "pf-m-horizontal",
-    "tertiary": "pf-m-tertiary",
-    "horizontalSubnav": "pf-m-horizontal-subnav",
-    "light": "pf-m-light",
     "scrollable": "pf-m-scrollable",
     "overflowHidden": "pf-m-overflow-hidden",
-    "expandable": "pf-m-expandable",
+    "fullWidth": "pf-m-full-width",
+    "fill": "pf-m-fill",
     "expanded": "pf-m-expanded",
-    "drilldown": "pf-m-drilldown",
     "hover": "pf-m-hover",
-    "start": "pf-m-start"
+    "current": "pf-m-current",
+    "flyout": "pf-m-flyout",
+    "horizontal": "pf-m-horizontal",
+    "subnav": "pf-m-subnav"
   },
   "nav": "pf-v5-c-nav",
   "navItem": "pf-v5-c-nav__item",
   "navLink": "pf-v5-c-nav__link",
   "navList": "pf-v5-c-nav__list",
+  "navNav": "pf-v5-c-nav__nav",
   "navScrollButton": "pf-v5-c-nav__scroll-button",
   "navSection": "pf-v5-c-nav__section",
   "navSectionTitle": "pf-v5-c-nav__section-title",
   "navSubnav": "pf-v5-c-nav__subnav",
   "navToggle": "pf-v5-c-nav__toggle",
-  "navToggleIcon": "pf-v5-c-nav__toggle-icon",
-  "themeDark": "pf-v5-theme-dark"
+  "navToggleIcon": "pf-v5-c-nav__toggle-icon"
 };
 export default _default;

package/css/components/Nav/nav.js

@@ -2,40 +2,29 @@
 exports.__esModule = true;
 require('./nav.css');
 exports.default = {
+  "buttonIcon": "pf-v5-c-button__icon",
   "dirRtl": "pf-v5-m-dir-rtl",
-  "divider": "pf-v5-c-divider",
-  "menu": "pf-v5-c-menu",
-  "menuContent": "pf-v5-c-menu__content",
-  "menuItem": "pf-v5-c-menu__item",
-  "menuItemToggleIcon": "pf-v5-c-menu__item-toggle-icon",
-  "menuListItem": "pf-v5-c-menu__list-item",
   "modifiers": {
-    "flyout": "pf-m-flyout",
-    "top": "pf-m-top",
-    "left": "pf-m-left",
-    "current": "pf-m-current",
-    "drillUp": "pf-m-drill-up",
-    "horizontal": "pf-m-horizontal",
-    "tertiary": "pf-m-tertiary",
-    "horizontalSubnav": "pf-m-horizontal-subnav",
-    "light": "pf-m-light",
     "scrollable": "pf-m-scrollable",
     "overflowHidden": "pf-m-overflow-hidden",
-    "expandable": "pf-m-expandable",
+    "fullWidth": "pf-m-full-width",
+    "fill": "pf-m-fill",
     "expanded": "pf-m-expanded",
-    "drilldown": "pf-m-drilldown",
     "hover": "pf-m-hover",
-    "start": "pf-m-start"
+    "current": "pf-m-current",
+    "flyout": "pf-m-flyout",
+    "horizontal": "pf-m-horizontal",
+    "subnav": "pf-m-subnav"
   },
   "nav": "pf-v5-c-nav",
   "navItem": "pf-v5-c-nav__item",
   "navLink": "pf-v5-c-nav__link",
   "navList": "pf-v5-c-nav__list",
+  "navNav": "pf-v5-c-nav__nav",
   "navScrollButton": "pf-v5-c-nav__scroll-button",
   "navSection": "pf-v5-c-nav__section",
   "navSectionTitle": "pf-v5-c-nav__section-title",
   "navSubnav": "pf-v5-c-nav__subnav",
   "navToggle": "pf-v5-c-nav__toggle",
-  "navToggleIcon": "pf-v5-c-nav__toggle-icon",
-  "themeDark": "pf-v5-theme-dark"
+  "navToggleIcon": "pf-v5-c-nav__toggle-icon"
 };

package/css/components/Nav/nav.mjs

@@ -1,39 +1,28 @@
 import './nav.css';
 export default {
+  "buttonIcon": "pf-v5-c-button__icon",
   "dirRtl": "pf-v5-m-dir-rtl",
-  "divider": "pf-v5-c-divider",
-  "menu": "pf-v5-c-menu",
-  "menuContent": "pf-v5-c-menu__content",
-  "menuItem": "pf-v5-c-menu__item",
-  "menuItemToggleIcon": "pf-v5-c-menu__item-toggle-icon",
-  "menuListItem": "pf-v5-c-menu__list-item",
   "modifiers": {
-    "flyout": "pf-m-flyout",
-    "top": "pf-m-top",
-    "left": "pf-m-left",
-    "current": "pf-m-current",
-    "drillUp": "pf-m-drill-up",
-    "horizontal": "pf-m-horizontal",
-    "tertiary": "pf-m-tertiary",
-    "horizontalSubnav": "pf-m-horizontal-subnav",
-    "light": "pf-m-light",
     "scrollable": "pf-m-scrollable",
     "overflowHidden": "pf-m-overflow-hidden",
-    "expandable": "pf-m-expandable",
+    "fullWidth": "pf-m-full-width",
+    "fill": "pf-m-fill",
     "expanded": "pf-m-expanded",
-    "drilldown": "pf-m-drilldown",
     "hover": "pf-m-hover",
-    "start": "pf-m-start"
+    "current": "pf-m-current",
+    "flyout": "pf-m-flyout",
+    "horizontal": "pf-m-horizontal",
+    "subnav": "pf-m-subnav"
   },
   "nav": "pf-v5-c-nav",
   "navItem": "pf-v5-c-nav__item",
   "navLink": "pf-v5-c-nav__link",
   "navList": "pf-v5-c-nav__list",
+  "navNav": "pf-v5-c-nav__nav",
   "navScrollButton": "pf-v5-c-nav__scroll-button",
   "navSection": "pf-v5-c-nav__section",
   "navSectionTitle": "pf-v5-c-nav__section-title",
   "navSubnav": "pf-v5-c-nav__subnav",
   "navToggle": "pf-v5-c-nav__toggle",
-  "navToggleIcon": "pf-v5-c-nav__toggle-icon",
-  "themeDark": "pf-v5-theme-dark"
+  "navToggleIcon": "pf-v5-c-nav__toggle-icon"
 };

package/css/components/NotificationDrawer/notification-drawer.css

@@ -1,73 +1,79 @@
+:root,
 .pf-v5-c-notification-drawer {
-  --pf-v5-c-notification-drawer--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-notification-drawer__header--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-notification-drawer__header--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-notification-drawer__header--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-notification-drawer__header--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-notification-drawer__header--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-notification-drawer__header--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
-  --pf-v5-c-notification-drawer__header--ZIndex: var(--pf-v5-global--ZIndex--sm);
-  --pf-v5-c-notification-drawer__header-title--FontSize: var(--pf-v5-global--FontSize--xl);
-  --pf-v5-c-notification-drawer__header-status--MarginLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-notification-drawer__body--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-notification-drawer__list-item--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-notification-drawer__list-item--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-notification-drawer__list-item--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-notification-drawer__list-item--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-notification-drawer__list-item--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-notification-drawer__list-item--BoxShadow: inset var(--pf-v5-global--BoxShadow--sm-bottom);
-  --pf-v5-c-notification-drawer__list-item--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-notification-drawer__list-item--BorderBottomColor: transparent;
-  --pf-v5-c-notification-drawer__list-item--OutlineOffset: -0.25rem;
-  --pf-v5-c-notification-drawer__list-item--before--Width: var(--pf-v5-global--BorderWidth--lg);
-  --pf-v5-c-notification-drawer__list-item--before--Top: 0;
-  --pf-v5-c-notification-drawer__list-item--before--Bottom: calc(var(--pf-v5-c-notification-drawer__list-item--BorderBottomWidth) * -1);
-  --pf-v5-c-notification-drawer__list-item--m-info__list-item-header-icon--Color: var(--pf-v5-global--info-color--100);
-  --pf-v5-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColor: var(--pf-v5-global--info-color--100);
-  --pf-v5-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color: var(--pf-v5-global--warning-color--100);
-  --pf-v5-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColor: var(--pf-v5-global--warning-color--100);
-  --pf-v5-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-notification-drawer__list-item--m-success__list-item-header-icon--Color: var(--pf-v5-global--success-color--100);
-  --pf-v5-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor: var(--pf-v5-global--success-color--100);
-  --pf-v5-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color: var(--pf-v5-global--custom-color--200);
-  --pf-v5-c-notification-drawer__list-item--m-custom__list-item--before--BackgroundColor: var(--pf-v5-global--custom-color--200);
-  --pf-v5-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-notification-drawer__list-item--m-read--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-notification-drawer__list-item--m-read--before--Top: calc(var(--pf-v5-c-notification-drawer__list-item--BorderBottomWidth) * -1);
-  --pf-v5-c-notification-drawer__list-item--m-read--before--Bottom: 0;
-  --pf-v5-c-notification-drawer__list-item--m-read--before--BackgroundColor: transparent;
-  --pf-v5-c-notification-drawer__list-item--list-item--m-read--before--Top: 0;
-  --pf-v5-c-notification-drawer__list-item--list-item--m-read--BoxShadow: inset var(--pf-v5-global--BoxShadow--sm-bottom);
-  --pf-v5-c-notification-drawer__list-item--m-hoverable--hover--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-notification-drawer__list-item--m-hoverable--hover--BoxShadow: var(--pf-v5-global--BoxShadow--md-top), var(--pf-v5-global--BoxShadow--md-bottom);
-  --pf-v5-c-notification-drawer__list-item-header--MarginBottom: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-notification-drawer--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --pf-v5-c-notification-drawer__header--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-notification-drawer__header--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-notification-drawer__header--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-notification-drawer__header--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-notification-drawer__header--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --pf-v5-c-notification-drawer__header--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v5-c-notification-drawer__header-title--FontSize: var(--pf-t--global--font--size--heading--md);
+  --pf-v5-c-notification-drawer__header-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
+  --pf-v5-c-notification-drawer__header-title--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-notification-drawer__header-title--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v5-c-notification-drawer__header-status--MarginLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-notification-drawer__header-status--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v5-c-notification-drawer__header-status--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v5-c-notification-drawer__header-status--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-notification-drawer__body--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v5-c-notification-drawer__body--PaddingBlockStart: 0;
+  --pf-v5-c-notification-drawer__body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v5-c-notification-drawer__list--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-notification-drawer__list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-notification-drawer__list--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-notification-drawer__list-item--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-notification-drawer__list-item--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-notification-drawer__list-item--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-notification-drawer__list-item--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-notification-drawer__list-item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-notification-drawer__list-item--BorderWidth: var(--pf-t--global--border--width--box--status--default);
+  --pf-v5-c-notification-drawer__list-item--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-notification-drawer__list-item--m-info__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--info--default);
+  --pf-v5-c-notification-drawer__list-item--m-info__list-item--BorderColor: var(--pf-t--global--border--color--status--info--default);
+  --pf-v5-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --pf-v5-c-notification-drawer__list-item--m-warning__list-item--BorderColor: var(--pf-t--global--border--color--status--warning--default);
+  --pf-v5-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --pf-v5-c-notification-drawer__list-item--m-danger__list-item--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+  --pf-v5-c-notification-drawer__list-item--m-success__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+  --pf-v5-c-notification-drawer__list-item--m-success__list-item--BorderColor: var(--pf-t--global--border--color--status--success--default);
+  --pf-v5-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
+  --pf-v5-c-notification-drawer__list-item--m-custom__list-item--BorderColor: var(--pf-t--global--border--color--status--custom--default);
+  --pf-v5-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-notification-drawer__list-item--m-read--BorderWidth: var(--pf-t--global--border--width--box--status--read);
+  --pf-v5-c-notification-drawer__list-item--m-read--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-notification-drawer__list-item--m-hoverable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
+  --pf-v5-c-notification-drawer__list-item-header--MarginBottom: var(--pf-t--global--spacer--xs);
   --pf-v5-c-notification-drawer__list-item-header-icon--Color: inherit;
-  --pf-v5-c-notification-drawer__list-item-header-icon--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-v5-global--FontWeight--bold);
+  --pf-v5-c-notification-drawer__list-item-header-icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-notification-drawer__list-item-header-title--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v5-c-notification-drawer__list-item-header-title--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
+  --pf-v5-c-notification-drawer__list-item-header-title--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v5-c-notification-drawer__list-item-header-title--max-lines: 1;
-  --pf-v5-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-notification-drawer__list-item-description--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-notification-drawer__list-item-timestamp--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-notification-drawer__list-item-timestamp--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-notification-drawer__group--m-expanded--group--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-notification-drawer__group--m-expanded--group--BorderTopColor: var(--pf-v5-global--BorderColor--100);
+  --pf-v5-c-notification-drawer__list-item-description--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-notification-drawer__list-item-timestamp--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-notification-drawer__list-item-timestamp--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v5-c-notification-drawer__group--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
+  --pf-v5-c-notification-drawer__group--m-expanded--group--BorderBottomColor: var(--pf-t--global--border--color--default);
   --pf-v5-c-notification-drawer__group--m-expanded--MinHeight: 0;
-  --pf-v5-c-notification-drawer__group-toggle--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-notification-drawer__group-toggle--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-notification-drawer__group-toggle--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-notification-drawer__group-toggle--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-notification-drawer__group-toggle--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-notification-drawer__group-toggle--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-notification-drawer__group--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v5-c-notification-drawer__group-toggle--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-notification-drawer__group-toggle--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-notification-drawer__group-toggle--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-notification-drawer__group-toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v5-c-notification-drawer__group-toggle--OutlineOffset: -0.25rem;
-  --pf-v5-c-notification-drawer__group-toggle-title--MarginRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-notification-drawer__group-toggle-title--MarginRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-notification-drawer__group-toggle-title--FontSize: var(--pf-t--global--font--size--body--lg);
   --pf-v5-c-notification-drawer__group-toggle-title--max-lines: 1;
-  --pf-v5-c-notification-drawer__group-toggle-count--MarginRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-notification-drawer__group-toggle-icon--MarginRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-notification-drawer__group-toggle-icon--Color: var(--pf-v5-global--Color--200);
+  --pf-v5-c-notification-drawer__group-toggle-count--MarginRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-notification-drawer__group-toggle-icon--MarginRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-notification-drawer__group-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v5-c-notification-drawer__group-toggle-icon--Transition: .2s ease-in 0s;
   --pf-v5-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
+}
+
+.pf-v5-c-notification-drawer {
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -85,15 +91,20 @@
   padding-inline-start: var(--pf-v5-c-notification-drawer__header--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-notification-drawer__header--PaddingRight);
   background-color: var(--pf-v5-c-notification-drawer__header--BackgroundColor);
-  box-shadow: var(--pf-v5-c-notification-drawer__header--BoxShadow);
 }
 
 .pf-v5-c-notification-drawer__header-title {
+  font-family: var(--pf-v5-c-notification-drawer__header-title--FontFamily);
   font-size: var(--pf-v5-c-notification-drawer__header-title--FontSize);
+  font-weight: var(--pf-v5-c-notification-drawer__header-title--FontWeight);
+  line-height: var(--pf-v5-c-notification-drawer__header-title--LineHeight);
 }
 
 .pf-v5-c-notification-drawer__header-status {
   margin-inline-start: var(--pf-v5-c-notification-drawer__header-status--MarginLeft);
+  font-size: var(--pf-v5-c-notification-drawer__header-status--FontSize);
+  font-weight: var(--pf-v5-c-notification-drawer__header-status--FontWeight);
+  color: var(--pf-v5-c-notification-drawer__header-status--Color);
 }
 
 .pf-v5-c-notification-drawer__header-action {
@@ -104,8 +115,17 @@
 
 .pf-v5-c-notification-drawer__body {
   flex: 1;
+  padding-block-start: var(--pf-v5-c-notification-drawer__body--PaddingBlockStart);
+  padding-block-end: var(--pf-v5-c-notification-drawer__body--PaddingBlockEnd);
   overflow-y: auto;
-  box-shadow: var(--pf-v5-c-notification-drawer__body--ZIndex);
+}
+
+.pf-v5-c-notification-drawer__list:not([hidden]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-v5-c-notification-drawer__list--Gap);
+  padding-inline-start: var(--pf-v5-c-notification-drawer__list--PaddingInlineStart);
+  padding-inline-end: var(--pf-v5-c-notification-drawer__list--PaddingInlineEnd);
 }
 
 .pf-v5-c-notification-drawer__list-item {
@@ -117,60 +137,40 @@
   padding-inline-start: var(--pf-v5-c-notification-drawer__list-item--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-notification-drawer__list-item--PaddingRight);
   background-color: var(--pf-v5-c-notification-drawer__list-item--BackgroundColor);
-  border-block-end: var(--pf-v5-c-notification-drawer__list-item--BorderBottomWidth) solid var(--pf-v5-c-notification-drawer__list-item--BorderBottomColor);
-  outline-offset: var(--pf-v5-c-notification-drawer__list-item--OutlineOffset);
-  box-shadow: var(--pf-v5-c-notification-drawer__list-item--BoxShadow);
-}
-.pf-v5-c-notification-drawer__list-item.pf-m-read, .pf-v5-c-notification-drawer__list-item:first-child {
-  --pf-v5-c-notification-drawer__list-item--BoxShadow: none;
-}
-.pf-v5-c-notification-drawer__list-item:not(.pf-m-read) + .pf-v5-c-notification-drawer__list-item.pf-m-read {
-  --pf-v5-c-notification-drawer__list-item--BoxShadow: var(--pf-v5-c-notification-drawer__list-item--list-item--m-read--BoxShadow);
-  --pf-v5-c-notification-drawer__list-item--before--Top: var(--pf-v5-c-notification-drawer__list-item--list-item--m-read--before--Top);
-}
-.pf-v5-c-notification-drawer__list-item::before {
-  position: absolute;
-  inset-block-start: var(--pf-v5-c-notification-drawer__list-item--before--Top);
-  inset-block-end: var(--pf-v5-c-notification-drawer__list-item--before--Bottom);
-  width: var(--pf-v5-c-notification-drawer__list-item--before--Width);
-  content: "";
-  background-color: var(--pf-v5-c-notification-drawer__list-item--before--BackgroundColor);
+  border: var(--pf-v5-c-notification-drawer__list-item--BorderWidth) solid var(--pf-v5-c-notification-drawer__list-item--BorderColor);
+  border-radius: var(--pf-v5-c-notification-drawer__list-item--BorderRadius);
 }
 .pf-v5-c-notification-drawer__list-item.pf-m-info {
-  --pf-v5-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-v5-c-notification-drawer__list-item--m-info__list-item--before--BackgroundColor);
+  --pf-v5-c-notification-drawer__list-item--BorderColor: var(--pf-v5-c-notification-drawer__list-item--m-info__list-item--BorderColor);
   --pf-v5-c-notification-drawer__list-item-header-icon--Color: var(--pf-v5-c-notification-drawer__list-item--m-info__list-item-header-icon--Color);
 }
 .pf-v5-c-notification-drawer__list-item.pf-m-warning {
-  --pf-v5-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-v5-c-notification-drawer__list-item--m-warning__list-item--before--BackgroundColor);
+  --pf-v5-c-notification-drawer__list-item--BorderColor: var(--pf-v5-c-notification-drawer__list-item--m-warning__list-item--BorderColor);
   --pf-v5-c-notification-drawer__list-item-header-icon--Color: var(--pf-v5-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color);
 }
 .pf-v5-c-notification-drawer__list-item.pf-m-danger {
-  --pf-v5-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-v5-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor);
+  --pf-v5-c-notification-drawer__list-item--BorderColor: var(--pf-v5-c-notification-drawer__list-item--m-danger__list-item--BorderColor);
   --pf-v5-c-notification-drawer__list-item-header-icon--Color: var(--pf-v5-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color);
 }
 .pf-v5-c-notification-drawer__list-item.pf-m-success {
-  --pf-v5-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-v5-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor);
+  --pf-v5-c-notification-drawer__list-item--BorderColor: var(--pf-v5-c-notification-drawer__list-item--m-success__list-item--BorderColor);
   --pf-v5-c-notification-drawer__list-item-header-icon--Color: var(--pf-v5-c-notification-drawer__list-item--m-success__list-item-header-icon--Color);
 }
 .pf-v5-c-notification-drawer__list-item.pf-m-custom {
-  --pf-v5-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-v5-c-notification-drawer__list-item--m-custom__list-item--before--BackgroundColor);
+  --pf-v5-c-notification-drawer__list-item--BorderColor: var(--pf-v5-c-notification-drawer__list-item--m-custom__list-item--BorderColor);
   --pf-v5-c-notification-drawer__list-item-header-icon--Color: var(--pf-v5-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color);
 }
 .pf-v5-c-notification-drawer__list-item.pf-m-read {
-  --pf-v5-c-notification-drawer__list-item--BorderBottomColor: var(--pf-v5-c-notification-drawer__list-item--m-read--BorderBottomColor);
+  --pf-v5-c-notification-drawer__list-item--BorderWidth: var(--pf-v5-c-notification-drawer__list-item--m-read--BorderWidth);
   --pf-v5-c-notification-drawer__list-item--BackgroundColor: var(--pf-v5-c-notification-drawer__list-item--m-read--BackgroundColor);
-  --pf-v5-c-notification-drawer__list-item--before--Top: var(--pf-v5-c-notification-drawer__list-item--m-read--before--Top);
-  --pf-v5-c-notification-drawer__list-item--before--Bottom: var(--pf-v5-c-notification-drawer__list-item--m-read--before--Bottom);
-  --pf-v5-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-v5-c-notification-drawer__list-item--m-read--before--BackgroundColor);
-  --pf-v5-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-v5-c-notification-drawer__list-item--m-read__list-item-header-title--FontWeight);
+  --pf-v5-c-notification-drawer__list-item--BorderColor: var(--pf-v5-c-notification-drawer__list-item--m-read--BorderColor);
   position: relative;
 }
 .pf-v5-c-notification-drawer__list-item.pf-m-hoverable {
   cursor: pointer;
 }
-.pf-v5-c-notification-drawer__list-item.pf-m-hoverable:hover {
-  z-index: var(--pf-v5-c-notification-drawer__list-item--m-hoverable--hover--ZIndex);
-  box-shadow: var(--pf-v5-c-notification-drawer__list-item--m-hoverable--hover--BoxShadow);
+.pf-v5-c-notification-drawer__list-item.pf-m-hoverable:hover, .pf-v5-c-notification-drawer__list-item.pf-m-hoverable:focus {
+  background-color: var(--pf-v5-c-notification-drawer__list-item--m-hoverable--hover--BackgroundColor);
 }
 
 .pf-v5-c-notification-drawer__list-item-header {
@@ -187,7 +187,10 @@
 }
 
 .pf-v5-c-notification-drawer__list-item-header-title {
+  font-family: var(--pf-v5-c-notification-drawer__list-item-header-title--FontFamily);
+  font-size: var(--pf-v5-c-notification-drawer__list-item-header-title--FontSize);
   font-weight: var(--pf-v5-c-notification-drawer__list-item-header-title--FontWeight);
+  line-height: var(--pf-v5-c-notification-drawer__list-item-header-title--LineHeight);
   word-break: break-word;
 }
 .pf-v5-c-notification-drawer__list-item-header-title.pf-m-truncate {
@@ -221,15 +224,12 @@
   flex-direction: column;
 }
 
+.pf-v5-c-notification-drawer__group {
+  border-block-end: var(--pf-v5-c-notification-drawer__group--BorderBottomWidth) solid var(--pf-v5-c-notification-drawer__group--m-expanded--group--BorderBottomColor);
+}
 .pf-v5-c-notification-drawer__group.pf-m-expanded {
   min-height: var(--pf-v5-c-notification-drawer__group--m-expanded--MinHeight);
-}
-.pf-v5-c-notification-drawer__group.pf-m-expanded + .pf-v5-c-notification-drawer__group {
-  border-block-start: var(--pf-v5-c-notification-drawer__group--m-expanded--group--BorderTopWidth) solid var(--pf-v5-c-notification-drawer__group--m-expanded--group--BorderTopColor);
-}
-.pf-v5-c-notification-drawer__group .pf-v5-c-notification-drawer__list-item:last-child {
-  --pf-v5-c-notification-drawer__list-item--BorderBottomWidth: 0;
-  --pf-v5-c-notification-drawer__list-item--before--Bottom: 0;
+  padding-block-end: var(--pf-v5-c-notification-drawer__group--m-expanded--PaddingBlockEnd);
 }
 
 .pf-v5-c-notification-drawer__group-toggle {
@@ -241,8 +241,7 @@
   padding-inline-start: var(--pf-v5-c-notification-drawer__group-toggle--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-notification-drawer__group-toggle--PaddingRight);
   background-color: var(--pf-v5-c-notification-drawer__group-toggle--BackgroundColor);
-  border: 0 solid var(--pf-v5-c-notification-drawer__group-toggle--BorderColor);
-  border-block-end-width: var(--pf-v5-c-notification-drawer__group-toggle--BorderBottomWidth);
+  border: none;
   outline-offset: var(--pf-v5-c-notification-drawer__group-toggle--OutlineOffset);
 }
 
@@ -253,6 +252,7 @@
   overflow: hidden;
   flex: 1;
   margin-inline-end: var(--pf-v5-c-notification-drawer__group-toggle-title--MarginRight);
+  font-size: var(--pf-v5-c-notification-drawer__group-toggle-title--FontSize);
   text-align: start;
   word-break: break-word;
 }
@@ -273,15 +273,4 @@
 
 .pf-v5-c-notification-drawer__group.pf-m-expanded .pf-v5-c-notification-drawer__group-toggle-icon {
   transform: rotate(var(--pf-v5-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-notification-drawer {
-  --pf-v5-c-notification-drawer--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-  --pf-v5-c-notification-drawer__header--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-  --pf-v5-c-notification-drawer__list-item--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-  --pf-v5-c-notification-drawer__list-item--BoxShadow: none;
-  --pf-v5-c-notification-drawer__list-item--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-notification-drawer__list-item--list-item--m-read--BoxShadow: none;
-  --pf-v5-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }

package/css/components/NotificationDrawer/notification-drawer.d.ts

@@ -2,12 +2,12 @@ import './notification-drawer.css';
 declare const _default: {
   "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
-    "read": "pf-m-read",
     "info": "pf-m-info",
     "warning": "pf-m-warning",
     "danger": "pf-m-danger",
     "success": "pf-m-success",
     "custom": "pf-m-custom",
+    "read": "pf-m-read",
     "hoverable": "pf-m-hoverable",
     "truncate": "pf-m-truncate",
     "expanded": "pf-m-expanded"
@@ -24,13 +24,13 @@ declare const _default: {
   "notificationDrawerHeaderAction": "pf-v5-c-notification-drawer__header-action",
   "notificationDrawerHeaderStatus": "pf-v5-c-notification-drawer__header-status",
   "notificationDrawerHeaderTitle": "pf-v5-c-notification-drawer__header-title",
+  "notificationDrawerList": "pf-v5-c-notification-drawer__list",
   "notificationDrawerListItem": "pf-v5-c-notification-drawer__list-item",
   "notificationDrawerListItemAction": "pf-v5-c-notification-drawer__list-item-action",
   "notificationDrawerListItemDescription": "pf-v5-c-notification-drawer__list-item-description",
   "notificationDrawerListItemHeader": "pf-v5-c-notification-drawer__list-item-header",
   "notificationDrawerListItemHeaderIcon": "pf-v5-c-notification-drawer__list-item-header-icon",
   "notificationDrawerListItemHeaderTitle": "pf-v5-c-notification-drawer__list-item-header-title",
-  "notificationDrawerListItemTimestamp": "pf-v5-c-notification-drawer__list-item-timestamp",
-  "themeDark": "pf-v5-theme-dark"
+  "notificationDrawerListItemTimestamp": "pf-v5-c-notification-drawer__list-item-timestamp"
 };
 export default _default;

package/css/components/NotificationDrawer/notification-drawer.js

@@ -4,12 +4,12 @@ require('./notification-drawer.css');
 exports.default = {
   "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
-    "read": "pf-m-read",
     "info": "pf-m-info",
     "warning": "pf-m-warning",
     "danger": "pf-m-danger",
     "success": "pf-m-success",
     "custom": "pf-m-custom",
+    "read": "pf-m-read",
     "hoverable": "pf-m-hoverable",
     "truncate": "pf-m-truncate",
     "expanded": "pf-m-expanded"
@@ -26,12 +26,12 @@ exports.default = {
   "notificationDrawerHeaderAction": "pf-v5-c-notification-drawer__header-action",
   "notificationDrawerHeaderStatus": "pf-v5-c-notification-drawer__header-status",
   "notificationDrawerHeaderTitle": "pf-v5-c-notification-drawer__header-title",
+  "notificationDrawerList": "pf-v5-c-notification-drawer__list",
   "notificationDrawerListItem": "pf-v5-c-notification-drawer__list-item",
   "notificationDrawerListItemAction": "pf-v5-c-notification-drawer__list-item-action",
   "notificationDrawerListItemDescription": "pf-v5-c-notification-drawer__list-item-description",
   "notificationDrawerListItemHeader": "pf-v5-c-notification-drawer__list-item-header",
   "notificationDrawerListItemHeaderIcon": "pf-v5-c-notification-drawer__list-item-header-icon",
   "notificationDrawerListItemHeaderTitle": "pf-v5-c-notification-drawer__list-item-header-title",
-  "notificationDrawerListItemTimestamp": "pf-v5-c-notification-drawer__list-item-timestamp",
-  "themeDark": "pf-v5-theme-dark"
+  "notificationDrawerListItemTimestamp": "pf-v5-c-notification-drawer__list-item-timestamp"
 };

package/css/components/NotificationDrawer/notification-drawer.mjs

@@ -2,12 +2,12 @@ import './notification-drawer.css';
 export default {
   "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
-    "read": "pf-m-read",
     "info": "pf-m-info",
     "warning": "pf-m-warning",
     "danger": "pf-m-danger",
     "success": "pf-m-success",
     "custom": "pf-m-custom",
+    "read": "pf-m-read",
     "hoverable": "pf-m-hoverable",
     "truncate": "pf-m-truncate",
     "expanded": "pf-m-expanded"
@@ -24,12 +24,12 @@ export default {
   "notificationDrawerHeaderAction": "pf-v5-c-notification-drawer__header-action",
   "notificationDrawerHeaderStatus": "pf-v5-c-notification-drawer__header-status",
   "notificationDrawerHeaderTitle": "pf-v5-c-notification-drawer__header-title",
+  "notificationDrawerList": "pf-v5-c-notification-drawer__list",
   "notificationDrawerListItem": "pf-v5-c-notification-drawer__list-item",
   "notificationDrawerListItemAction": "pf-v5-c-notification-drawer__list-item-action",
   "notificationDrawerListItemDescription": "pf-v5-c-notification-drawer__list-item-description",
   "notificationDrawerListItemHeader": "pf-v5-c-notification-drawer__list-item-header",
   "notificationDrawerListItemHeaderIcon": "pf-v5-c-notification-drawer__list-item-header-icon",
   "notificationDrawerListItemHeaderTitle": "pf-v5-c-notification-drawer__list-item-header-title",
-  "notificationDrawerListItemTimestamp": "pf-v5-c-notification-drawer__list-item-timestamp",
-  "themeDark": "pf-v5-theme-dark"
+  "notificationDrawerListItemTimestamp": "pf-v5-c-notification-drawer__list-item-timestamp"
 };