@patternfly/react-styles 6.0.0-alpha.1 → 6.0.0-alpha.10

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"
 };

package/css/components/NumberInput/number-input.css

@@ -6,12 +6,12 @@
   appearance: none;
 }
 
+:root,
 .pf-v5-c-number-input {
-  --pf-v5-c-number-input__unit--c-input-group--MarginLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-number-input__icon--FontSize: var(--pf-v5-global--FontSize--xs);
-  --pf-v5-c-number-input--c-form-control--width-base: calc(var(--pf-v5-global--spacer--sm) * 2 + var(--pf-v5-global--BorderWidth--sm) * 2);
-  --pf-v5-c-number-input--c-form-control--width-icon: 0px;
-  --pf-v5-c-number-input--m-status--c-form-control--width-icon: var(--pf-v5-global--spacer--xl);
+  --pf-v5-c-number-input__unit--c-input-group--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-number-input__icon--FontSize: var(--pf-t--global--font--size--xs);
+  --pf-v5-c-number-input--c-form-control--width-base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-t--global--border--width--box--default) * 2);
+  --pf-v5-c-number-input--c-form-control--width-icon: var(--pf-t--global--spacer--xl);
   --pf-v5-c-number-input--c-form-control--width-chars: 4;
   --pf-v5-c-number-input--c-form-control--Width:
     calc(
@@ -19,12 +19,12 @@
         var(--pf-v5-c-number-input--c-form-control--width-base) + var(--pf-v5-c-number-input--c-form-control--width-chars) * 1ch
       ) + var(--pf-v5-c-number-input--c-form-control--width-icon)
     );
+}
+
+.pf-v5-c-number-input {
   display: inline-flex;
   align-items: center;
 }
-.pf-v5-c-number-input.pf-m-status {
-  --pf-v5-c-number-input--c-form-control--width-icon: var(--pf-v5-c-number-input--m-status--c-form-control--width-icon);
-}
 .pf-v5-c-number-input .pf-v5-c-form-control {
   width: var(--pf-v5-c-number-input--c-form-control--Width);
 }

package/css/components/NumberInput/number-input.d.ts

@@ -2,9 +2,6 @@ import './number-input.css';
 declare const _default: {
   "formControl": "pf-v5-c-form-control",
   "inputGroup": "pf-v5-c-input-group",
-  "modifiers": {
-    "status": "pf-m-status"
-  },
   "numberInput": "pf-v5-c-number-input",
   "numberInputIcon": "pf-v5-c-number-input__icon",
   "numberInputUnit": "pf-v5-c-number-input__unit"

package/css/components/NumberInput/number-input.js

@@ -4,9 +4,6 @@ require('./number-input.css');
 exports.default = {
   "formControl": "pf-v5-c-form-control",
   "inputGroup": "pf-v5-c-input-group",
-  "modifiers": {
-    "status": "pf-m-status"
-  },
   "numberInput": "pf-v5-c-number-input",
   "numberInputIcon": "pf-v5-c-number-input__icon",
   "numberInputUnit": "pf-v5-c-number-input__unit"

package/css/components/NumberInput/number-input.mjs

@@ -2,9 +2,6 @@ import './number-input.css';
 export default {
   "formControl": "pf-v5-c-form-control",
   "inputGroup": "pf-v5-c-input-group",
-  "modifiers": {
-    "status": "pf-m-status"
-  },
   "numberInput": "pf-v5-c-number-input",
   "numberInputIcon": "pf-v5-c-number-input__icon",
   "numberInputUnit": "pf-v5-c-number-input__unit"

package/css/components/OverflowMenu/overflow-menu.css

@@ -1,66 +1,36 @@
+:root {
+  --pf-v5-c-overflow-menu--ColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-overflow-menu__group--ColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-overflow-menu__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-overflow-menu__group--m-icon-button-group--ColumnGap: var(--pf-t--global--spacer--xs);
+}
+
 .pf-v5-c-overflow-menu {
-  --pf-v5-c-overflow-menu--spacer--base: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-overflow-menu__group--spacer: var(--pf-v5-c-overflow-menu--spacer--base);
-  --pf-v5-c-overflow-menu__item--spacer: var(--pf-v5-c-overflow-menu--spacer--base);
-  --pf-v5-c-overflow-menu--c-divider--m-vertical--spacer: var(--pf-v5-c-overflow-menu--spacer--base);
-  --pf-v5-c-overflow-menu__group--m-button-group--spacer: var(--pf-v5-c-overflow-menu--spacer--base);
-  --pf-v5-c-overflow-menu__group--m-button-group--space-items: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-overflow-menu__group--m-icon-button-group--spacer: var(--pf-v5-c-overflow-menu--spacer--base);
-  --pf-v5-c-overflow-menu__group--m-icon-button-group--space-items: 0;
   display: inline-flex;
-  align-items: center;
+  column-gap: var(--pf-v5-c-overflow-menu--ColumnGap);
 }
 
-.pf-v5-c-overflow-menu__content {
+.pf-v5-c-overflow-menu__content,
+.pf-v5-c-overflow-menu__group {
   display: flex;
-  align-items: center;
+  align-items: start;
 }
 
 .pf-v5-c-overflow-menu__group {
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__group--spacer);
-  display: flex;
-  align-items: center;
+  column-gap: var(--pf-v5-c-overflow-menu__group--ColumnGap);
 }
 .pf-v5-c-overflow-menu__group.pf-m-button-group {
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__group--m-button-group--spacer);
-}
-.pf-v5-c-overflow-menu__group.pf-m-button-group > * {
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__group--m-button-group--space-items);
+  column-gap: var(--pf-v5-c-overflow-menu__group--m-button-group--ColumnGap);
 }
 .pf-v5-c-overflow-menu__group.pf-m-icon-button-group {
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__group--m-icon-button-group--spacer);
-}
-.pf-v5-c-overflow-menu__group.pf-m-icon-button-group > * {
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__group--m-icon-button-group--space-items);
+  column-gap: var(--pf-v5-c-overflow-menu__group--m-icon-button-group--ColumnGap);
 }
 
 .pf-v5-c-overflow-menu__item {
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu__item--spacer);
+  column-gap: var(--pf-v5-c-overflow-menu__item--ColumnGap, var(--pf-v5-c-overflow-menu--ColumnGap));
 }
 
 .pf-v5-c-overflow-menu__content,
-.pf-v5-c-overflow-menu__control,
-.pf-v5-c-overflow-menu__group,
-.pf-v5-c-overflow-menu__item {
-  margin-inline-end: var(--pf-v5-c-overflow-menu--spacer);
-}
-.pf-v5-c-overflow-menu__content:last-child,
-.pf-v5-c-overflow-menu__control:last-child,
-.pf-v5-c-overflow-menu__group:last-child,
-.pf-v5-c-overflow-menu__item:last-child {
-  --pf-v5-c-overflow-menu--spacer: 0;
-}
-
-.pf-v5-c-overflow-menu > .pf-v5-c-divider,
-.pf-v5-c-overflow-menu__group > .pf-v5-c-divider {
-  --pf-v5-c-overflow-menu--spacer: var(--pf-v5-c-overflow-menu--c-divider--m-vertical--spacer);
-}
-.pf-v5-c-overflow-menu > .pf-v5-c-divider.pf-m-vertical,
-.pf-v5-c-overflow-menu__group > .pf-v5-c-divider.pf-m-vertical {
-  margin-inline-end: var(--pf-v5-c-overflow-menu--spacer);
-}
-.pf-v5-c-overflow-menu > .pf-v5-c-divider.pf-m-vertical:last-child,
-.pf-v5-c-overflow-menu__group > .pf-v5-c-divider.pf-m-vertical:last-child {
-  --pf-v5-c-overflow-menu--spacer: 0;
+.pf-v5-c-overflow-menu__control {
+  column-gap: var(--pf-v5-c-overflow-menu--ColumnGap);
 }

package/css/components/OverflowMenu/overflow-menu.d.ts

@@ -1,10 +1,8 @@
 import './overflow-menu.css';
 declare const _default: {
-  "divider": "pf-v5-c-divider",
   "modifiers": {
     "buttonGroup": "pf-m-button-group",
-    "iconButtonGroup": "pf-m-icon-button-group",
-    "vertical": "pf-m-vertical"
+    "iconButtonGroup": "pf-m-icon-button-group"
   },
   "overflowMenu": "pf-v5-c-overflow-menu",
   "overflowMenuContent": "pf-v5-c-overflow-menu__content",

package/css/components/OverflowMenu/overflow-menu.js

@@ -2,11 +2,9 @@
 exports.__esModule = true;
 require('./overflow-menu.css');
 exports.default = {
-  "divider": "pf-v5-c-divider",
   "modifiers": {
     "buttonGroup": "pf-m-button-group",
-    "iconButtonGroup": "pf-m-icon-button-group",
-    "vertical": "pf-m-vertical"
+    "iconButtonGroup": "pf-m-icon-button-group"
   },
   "overflowMenu": "pf-v5-c-overflow-menu",
   "overflowMenuContent": "pf-v5-c-overflow-menu__content",

package/css/components/OverflowMenu/overflow-menu.mjs

@@ -1,10 +1,8 @@
 import './overflow-menu.css';
 export default {
-  "divider": "pf-v5-c-divider",
   "modifiers": {
     "buttonGroup": "pf-m-button-group",
-    "iconButtonGroup": "pf-m-icon-button-group",
-    "vertical": "pf-m-vertical"
+    "iconButtonGroup": "pf-m-icon-button-group"
   },
   "overflowMenu": "pf-v5-c-overflow-menu",
   "overflowMenuContent": "pf-v5-c-overflow-menu__content",