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

package/components/NotificationDrawer/notification-drawer.scss

@@ -1,104 +1,112 @@
 // @debug $notification-drawer; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
+:root, 
 .#{$notification-drawer} {
-  --#{$notification-drawer}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
+  --#{$notification-drawer}--BackgroundColor: var(--pf-t--global--background--color--floating--default);
 
   // Header
-  --#{$notification-drawer}__header--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$notification-drawer}__header--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$notification-drawer}__header--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$notification-drawer}__header--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$notification-drawer}__header--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$notification-drawer}__header--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-bottom);
-  --#{$notification-drawer}__header--ZIndex: var(--#{$pf-global}--ZIndex--sm);
-  --#{$notification-drawer}__header-title--FontSize: var(--#{$pf-global}--FontSize--xl);
-  --#{$notification-drawer}__header-status--MarginLeft: var(--#{$pf-global}--spacer--md);
+  --#{$notification-drawer}__header--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__header--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$notification-drawer}__header--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__header--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$notification-drawer}__header--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --#{$notification-drawer}__header--ZIndex: var(--pf-t--global--Zindex--sm);
+  --#{$notification-drawer}__header-title--FontSize: var(--pf-t--global--font--size--heading--md);
+  --#{$notification-drawer}__header-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
+  --#{$notification-drawer}__header-title--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$notification-drawer}__header-title--FontFamily: var(--pf-t--global--font--family--heading);
+  --#{$notification-drawer}__header-status--MarginLeft: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__header-status--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --#{$notification-drawer}__header-status--FontSize: var(--pf-t--global--font--size--body--default);
+  --#{$notification-drawer}__header-status--Color: var(--pf-t--global--text--color--subtle);
 
   // Body
-  --#{$notification-drawer}__body--ZIndex: var(--#{$pf-global}--ZIndex--xs);
+  --#{$notification-drawer}__body--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$notification-drawer}__body--PaddingBlockStart: 0; // TODO var(--pf-t--global--spacer--sm);
+  --#{$notification-drawer}__body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+
+  // List
+  --#{$notification-drawer}__list--Gap: var(--pf-t--global--spacer--sm);
+  --#{$notification-drawer}__list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --#{$notification-drawer}__list--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
 
   // List item
-  --#{$notification-drawer}__list-item--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$notification-drawer}__list-item--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$notification-drawer}__list-item--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$notification-drawer}__list-item--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$notification-drawer}__list-item--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$notification-drawer}__list-item--BoxShadow: inset var(--#{$pf-global}--BoxShadow--sm-bottom);
-  --#{$notification-drawer}__list-item--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$notification-drawer}__list-item--BorderBottomColor: transparent;
-  --#{$notification-drawer}__list-item--OutlineOffset: #{pf-size-prem(-4px)};
-  --#{$notification-drawer}__list-item--before--Width: var(--#{$pf-global}--BorderWidth--lg);
-  --#{$notification-drawer}__list-item--before--Top: 0;
-  --#{$notification-drawer}__list-item--before--Bottom: calc(var(--#{$notification-drawer}__list-item--BorderBottomWidth) * -1);
+  --#{$notification-drawer}__list-item--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__list-item--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__list-item--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__list-item--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__list-item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$notification-drawer}__list-item--BorderWidth: var(--pf-t--global--border--width--box--status--default);
+  --#{$notification-drawer}__list-item--BorderRadius: var(--pf-t--global--border--radius--medium);
 
   // List item modifiers
-  --#{$notification-drawer}__list-item--m-info__list-item-header-icon--Color: var(--#{$pf-global}--info-color--100);
-  --#{$notification-drawer}__list-item--m-info__list-item--before--BackgroundColor: var(--#{$pf-global}--info-color--100);
-  --#{$notification-drawer}__list-item--m-warning__list-item-header-icon--Color: var(--#{$pf-global}--warning-color--100);
-  --#{$notification-drawer}__list-item--m-warning__list-item--before--BackgroundColor: var(--#{$pf-global}--warning-color--100);
-  --#{$notification-drawer}__list-item--m-danger__list-item-header-icon--Color: var(--#{$pf-global}--danger-color--100);
-  --#{$notification-drawer}__list-item--m-danger__list-item--before--BackgroundColor: var(--#{$pf-global}--danger-color--100);
-  --#{$notification-drawer}__list-item--m-success__list-item-header-icon--Color: var(--#{$pf-global}--success-color--100);
-  --#{$notification-drawer}__list-item--m-success__list-item--before--BackgroundColor: var(--#{$pf-global}--success-color--100);
-  --#{$notification-drawer}__list-item--m-custom__list-item-header-icon--Color: var(--#{$pf-global}--custom-color--200);
-  --#{$notification-drawer}__list-item--m-custom__list-item--before--BackgroundColor: var(--#{$pf-global}--custom-color--200);
-  --#{$notification-drawer}__list-item--m-read--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-  --#{$notification-drawer}__list-item--m-read--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$notification-drawer}__list-item--m-read--before--Top: calc(var(--#{$notification-drawer}__list-item--BorderBottomWidth) * -1);
-  --#{$notification-drawer}__list-item--m-read--before--Bottom: 0;
-  --#{$notification-drawer}__list-item--m-read--before--BackgroundColor: transparent;
-  --#{$notification-drawer}__list-item--list-item--m-read--before--Top: 0;
-  --#{$notification-drawer}__list-item--list-item--m-read--BoxShadow: inset var(--#{$pf-global}--BoxShadow--sm-bottom);
-  --#{$notification-drawer}__list-item--m-hoverable--hover--ZIndex: var(--#{$pf-global}--ZIndex--xs);
-  --#{$notification-drawer}__list-item--m-hoverable--hover--BoxShadow: var(--#{$pf-global}--BoxShadow--md-top), var(--#{$pf-global}--BoxShadow--md-bottom);
+  --#{$notification-drawer}__list-item--m-info__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--info--default);
+  --#{$notification-drawer}__list-item--m-info__list-item--BorderColor: var(--pf-t--global--border--color--status--info--default);
+  --#{$notification-drawer}__list-item--m-warning__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --#{$notification-drawer}__list-item--m-warning__list-item--BorderColor: var(--pf-t--global--border--color--status--warning--default);
+  --#{$notification-drawer}__list-item--m-danger__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --#{$notification-drawer}__list-item--m-danger__list-item--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+  --#{$notification-drawer}__list-item--m-success__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+  --#{$notification-drawer}__list-item--m-success__list-item--BorderColor: var(--pf-t--global--border--color--status--success--default);
+  --#{$notification-drawer}__list-item--m-custom__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
+  --#{$notification-drawer}__list-item--m-custom__list-item--BorderColor: var(--pf-t--global--border--color--status--custom--default);
+  --#{$notification-drawer}__list-item--m-read--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$notification-drawer}__list-item--m-read--BorderWidth: var(--pf-t--global--border--width--box--status--read);
+  --#{$notification-drawer}__list-item--m-read--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$notification-drawer}__list-item--m-hoverable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
 
   // List item header
-  --#{$notification-drawer}__list-item-header--MarginBottom: var(--#{$pf-global}--spacer--xs);
+  --#{$notification-drawer}__list-item-header--MarginBottom: var(--pf-t--global--spacer--xs);
 
   // List item header icon
   --#{$notification-drawer}__list-item-header-icon--Color: inherit;
-  --#{$notification-drawer}__list-item-header-icon--MarginRight: var(--#{$pf-global}--spacer--sm);
+  --#{$notification-drawer}__list-item-header-icon--MarginRight: var(--pf-t--global--spacer--sm);
 
   // List item header title
-  --#{$notification-drawer}__list-item-header-title--FontWeight: var(--#{$pf-global}--FontWeight--bold);
+  --#{$notification-drawer}__list-item-header-title--FontFamily: var(--pf-t--global--font--family--heading);
+  --#{$notification-drawer}__list-item-header-title--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --#{$notification-drawer}__list-item-header-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
+  --#{$notification-drawer}__list-item-header-title--LineHeight: var(--pf-t--global--font--line-height--heading);
   --#{$notification-drawer}__list-item-header-title--max-lines: 1;
-  --#{$notification-drawer}__list-item--m-read__list-item-header-title--FontWeight: var(--#{$pf-global}--FontWeight--normal);
 
   // List item description
-  --#{$notification-drawer}__list-item-description--MarginBottom: var(--#{$pf-global}--spacer--sm);
+  --#{$notification-drawer}__list-item-description--MarginBottom: var(--pf-t--global--spacer--sm);
 
   // List item timestamp
-  --#{$notification-drawer}__list-item-timestamp--Color: var(--#{$pf-global}--Color--200);
-  --#{$notification-drawer}__list-item-timestamp--FontSize: var(--#{$pf-global}--FontSize--sm);
+  --#{$notification-drawer}__list-item-timestamp--Color: var(--pf-t--global--text--color--subtle);
+  --#{$notification-drawer}__list-item-timestamp--FontSize: var(--pf-t--global--font--size--body--default);
 
   // Group
-  --#{$notification-drawer}__group--m-expanded--group--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$notification-drawer}__group--m-expanded--group--BorderTopColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$notification-drawer}__group--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$notification-drawer}__group--m-expanded--group--BorderBottomColor: var(--pf-t--global--border--color--default);
   --#{$notification-drawer}__group--m-expanded--MinHeight: 0; // remove at breaking change
+  --#{$notification-drawer}__group--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+
 
   // Group toggle
-  --#{$notification-drawer}__group-toggle--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$notification-drawer}__group-toggle--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$notification-drawer}__group-toggle--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$notification-drawer}__group-toggle--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$notification-drawer}__group-toggle--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$notification-drawer}__group-toggle--BorderColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$notification-drawer}__group-toggle--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
+  --#{$notification-drawer}__group-toggle--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__group-toggle--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$notification-drawer}__group-toggle--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__group-toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$notification-drawer}__group-toggle--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --#{$notification-drawer}__group-toggle--OutlineOffset: #{pf-size-prem(-4px)};
 
   // Group toggle title
-  --#{$notification-drawer}__group-toggle-title--MarginRight: var(--#{$pf-global}--spacer--md);
+  --#{$notification-drawer}__group-toggle-title--MarginRight: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__group-toggle-title--FontSize: var(--pf-t--global--font--size--body--lg);
   --#{$notification-drawer}__group-toggle-title--max-lines: 1;
 
   // Group toggle count
-  --#{$notification-drawer}__group-toggle-count--MarginRight: var(--#{$pf-global}--spacer--md);
+  --#{$notification-drawer}__group-toggle-count--MarginRight: var(--pf-t--global--spacer--md);
 
   // Group toggle icon
-  --#{$notification-drawer}__group-toggle-icon--MarginRight: var(--#{$pf-global}--spacer--md);
-  --#{$notification-drawer}__group-toggle-icon--Color: var(--#{$pf-global}--Color--200);
+  --#{$notification-drawer}__group-toggle-icon--MarginRight: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__group-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$notification-drawer}__group-toggle-icon--Transition: .2s ease-in 0s;
   --#{$notification-drawer}__group--m-expanded__group-toggle-icon--Rotate: 90deg;
+}
 
+.#{$notification-drawer} {
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -116,15 +124,20 @@
   padding-inline-start: var(--#{$notification-drawer}__header--PaddingLeft);
   padding-inline-end: var(--#{$notification-drawer}__header--PaddingRight);
   background-color: var(--#{$notification-drawer}__header--BackgroundColor);
-  box-shadow: var(--#{$notification-drawer}__header--BoxShadow);
 }
 
 .#{$notification-drawer}__header-title {
+  font-family: var(--#{$notification-drawer}__header-title--FontFamily);
   font-size: var(--#{$notification-drawer}__header-title--FontSize);
+  font-weight: var(--#{$notification-drawer}__header-title--FontWeight);
+  line-height: var(--#{$notification-drawer}__header-title--LineHeight);
 }
 
 .#{$notification-drawer}__header-status {
   margin-inline-start: var(--#{$notification-drawer}__header-status--MarginLeft);
+  font-size: var(--#{$notification-drawer}__header-status--FontSize);
+  font-weight: var(--#{$notification-drawer}__header-status--FontWeight);
+  color: var(--#{$notification-drawer}__header-status--Color);
 }
 
 .#{$notification-drawer}__header-action {
@@ -135,8 +148,17 @@
 
 .#{$notification-drawer}__body {
   flex: 1;
+  padding-block-start: var(--#{$notification-drawer}__body--PaddingBlockStart);
+  padding-block-end: var(--#{$notification-drawer}__body--PaddingBlockEnd);
   overflow-y: auto;
-  box-shadow: var(--#{$notification-drawer}__body--ZIndex);
+}
+
+.#{$notification-drawer}__list:not([hidden]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--#{$notification-drawer}__list--Gap);
+  padding-inline-start: var(--#{$notification-drawer}__list--PaddingInlineStart);
+  padding-inline-end: var(--#{$notification-drawer}__list--PaddingInlineEnd);
 }
 
 .#{$notification-drawer}__list-item {
@@ -148,61 +170,38 @@
   padding-inline-start: var(--#{$notification-drawer}__list-item--PaddingLeft);
   padding-inline-end: var(--#{$notification-drawer}__list-item--PaddingRight);
   background-color: var(--#{$notification-drawer}__list-item--BackgroundColor);
-  border-block-end: var(--#{$notification-drawer}__list-item--BorderBottomWidth) solid var(--#{$notification-drawer}__list-item--BorderBottomColor);
-  outline-offset: var(--#{$notification-drawer}__list-item--OutlineOffset);
-  box-shadow: var(--#{$notification-drawer}__list-item--BoxShadow);
-
-  &.pf-m-read,
-  &:first-child {
-    --#{$notification-drawer}__list-item--BoxShadow: none;
-  }
-
-  &:not(.pf-m-read) + &.pf-m-read {
-    --#{$notification-drawer}__list-item--BoxShadow: var(--#{$notification-drawer}__list-item--list-item--m-read--BoxShadow);
-    --#{$notification-drawer}__list-item--before--Top: var(--#{$notification-drawer}__list-item--list-item--m-read--before--Top);
-  }
-
-  &::before {
-    position: absolute;
-   inset-block-start: var(--#{$notification-drawer}__list-item--before--Top);
-   inset-block-end: var(--#{$notification-drawer}__list-item--before--Bottom);
-    width: var(--#{$notification-drawer}__list-item--before--Width);
-    content: "";
-    background-color: var(--#{$notification-drawer}__list-item--before--BackgroundColor);
-  }
+  border: var(--#{$notification-drawer}__list-item--BorderWidth) solid var(--#{$notification-drawer}__list-item--BorderColor);
+  border-radius: var(--#{$notification-drawer}__list-item--BorderRadius);
 
   &.pf-m-info {
-    --#{$notification-drawer}__list-item--before--BackgroundColor: var(--#{$notification-drawer}__list-item--m-info__list-item--before--BackgroundColor);
+    --#{$notification-drawer}__list-item--BorderColor: var(--#{$notification-drawer}__list-item--m-info__list-item--BorderColor);
     --#{$notification-drawer}__list-item-header-icon--Color: var(--#{$notification-drawer}__list-item--m-info__list-item-header-icon--Color);
   }
 
   &.pf-m-warning {
-    --#{$notification-drawer}__list-item--before--BackgroundColor: var(--#{$notification-drawer}__list-item--m-warning__list-item--before--BackgroundColor);
+    --#{$notification-drawer}__list-item--BorderColor: var(--#{$notification-drawer}__list-item--m-warning__list-item--BorderColor);
     --#{$notification-drawer}__list-item-header-icon--Color: var(--#{$notification-drawer}__list-item--m-warning__list-item-header-icon--Color);
   }
 
   &.pf-m-danger {
-    --#{$notification-drawer}__list-item--before--BackgroundColor: var(--#{$notification-drawer}__list-item--m-danger__list-item--before--BackgroundColor);
+    --#{$notification-drawer}__list-item--BorderColor: var(--#{$notification-drawer}__list-item--m-danger__list-item--BorderColor);
     --#{$notification-drawer}__list-item-header-icon--Color: var(--#{$notification-drawer}__list-item--m-danger__list-item-header-icon--Color);
   }
 
   &.pf-m-success {
-    --#{$notification-drawer}__list-item--before--BackgroundColor: var(--#{$notification-drawer}__list-item--m-success__list-item--before--BackgroundColor);
+    --#{$notification-drawer}__list-item--BorderColor: var(--#{$notification-drawer}__list-item--m-success__list-item--BorderColor);
     --#{$notification-drawer}__list-item-header-icon--Color: var(--#{$notification-drawer}__list-item--m-success__list-item-header-icon--Color);
   }
 
   &.pf-m-custom {
-    --#{$notification-drawer}__list-item--before--BackgroundColor: var(--#{$notification-drawer}__list-item--m-custom__list-item--before--BackgroundColor);
+    --#{$notification-drawer}__list-item--BorderColor: var(--#{$notification-drawer}__list-item--m-custom__list-item--BorderColor);
     --#{$notification-drawer}__list-item-header-icon--Color: var(--#{$notification-drawer}__list-item--m-custom__list-item-header-icon--Color);
   }
 
   &.pf-m-read {
-    --#{$notification-drawer}__list-item--BorderBottomColor: var(--#{$notification-drawer}__list-item--m-read--BorderBottomColor);
+    --#{$notification-drawer}__list-item--BorderWidth: var(--#{$notification-drawer}__list-item--m-read--BorderWidth);
     --#{$notification-drawer}__list-item--BackgroundColor: var(--#{$notification-drawer}__list-item--m-read--BackgroundColor);
-    --#{$notification-drawer}__list-item--before--Top: var(--#{$notification-drawer}__list-item--m-read--before--Top);
-    --#{$notification-drawer}__list-item--before--Bottom: var(--#{$notification-drawer}__list-item--m-read--before--Bottom);
-    --#{$notification-drawer}__list-item--before--BackgroundColor: var(--#{$notification-drawer}__list-item--m-read--before--BackgroundColor);
-    --#{$notification-drawer}__list-item-header-title--FontWeight: var(--#{$notification-drawer}__list-item--m-read__list-item-header-title--FontWeight);
+    --#{$notification-drawer}__list-item--BorderColor: var(--#{$notification-drawer}__list-item--m-read--BorderColor);
 
     position: relative;
   }
@@ -210,9 +209,9 @@
   &.pf-m-hoverable {
     cursor: pointer;
 
-    &:hover {
-      z-index: var(--#{$notification-drawer}__list-item--m-hoverable--hover--ZIndex);
-      box-shadow: var(--#{$notification-drawer}__list-item--m-hoverable--hover--BoxShadow);
+    &:hover,
+    &:focus {
+      background-color: var(--#{$notification-drawer}__list-item--m-hoverable--hover--BackgroundColor);
     }
   }
 }
@@ -231,7 +230,10 @@
 }
 
 .#{$notification-drawer}__list-item-header-title {
+  font-family: var(--#{$notification-drawer}__list-item-header-title--FontFamily);
+  font-size: var(--#{$notification-drawer}__list-item-header-title--FontSize);
   font-weight: var(--#{$notification-drawer}__list-item-header-title--FontWeight);
+  line-height: var(--#{$notification-drawer}__list-item-header-title--LineHeight);
   word-break: break-word;
 
   &.pf-m-truncate {
@@ -264,17 +266,11 @@
 }
 
 .#{$notification-drawer}__group {
+  border-block-end: var(--#{$notification-drawer}__group--BorderBottomWidth) solid var(--#{$notification-drawer}__group--m-expanded--group--BorderBottomColor);
+
   &.pf-m-expanded {
     min-height: var(--#{$notification-drawer}__group--m-expanded--MinHeight);
-
-    + .#{$notification-drawer}__group {
-      border-block-start: var(--#{$notification-drawer}__group--m-expanded--group--BorderTopWidth) solid var(--#{$notification-drawer}__group--m-expanded--group--BorderTopColor);
-    }
-  }
-
-  .#{$notification-drawer}__list-item:last-child {
-    --#{$notification-drawer}__list-item--BorderBottomWidth: 0;
-    --#{$notification-drawer}__list-item--before--Bottom: 0;
+    padding-block-end: var(--#{$notification-drawer}__group--m-expanded--PaddingBlockEnd);
   }
 }
 
@@ -287,8 +283,7 @@
   padding-inline-start: var(--#{$notification-drawer}__group-toggle--PaddingLeft);
   padding-inline-end: var(--#{$notification-drawer}__group-toggle--PaddingRight);
   background-color: var(--#{$notification-drawer}__group-toggle--BackgroundColor);
-  border: 0 solid var(--#{$notification-drawer}__group-toggle--BorderColor);
-  border-block-end-width: var(--#{$notification-drawer}__group-toggle--BorderBottomWidth);
+  border: none;
   outline-offset: var(--#{$notification-drawer}__group-toggle--OutlineOffset);
 }
 
@@ -297,6 +292,7 @@
 
   flex: 1;
   margin-inline-end: var(--#{$notification-drawer}__group-toggle-title--MarginRight);
+  font-size: var(--#{$notification-drawer}__group-toggle-title--FontSize);
   text-align: start;
   word-break: break-word;
 }
@@ -318,9 +314,3 @@
   }
 }
 
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/notification-drawer";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-notification-drawer;
-}

package/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/components/NumberInput/number-input.scss

@@ -1,18 +1,16 @@
 // @debug $number-input; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
+:root,
 .#{$number-input} {
   // unit
-  --#{$number-input}__unit--c-input-group--MarginLeft: var(--#{$pf-global}--spacer--sm);
+  --#{$number-input}__unit--c-input-group--MarginLeft: var(--pf-t--global--spacer--sm);
 
   // icon
-  --#{$number-input}__icon--FontSize: var(--#{$pf-global}--FontSize--xs);
+  --#{$number-input}__icon--FontSize: var(--pf-t--global--font--size--xs);
 
   // form control
-  --#{$number-input}--c-form-control--width-base: calc(var(--#{$pf-global}--spacer--sm) * 2 + var(--#{$pf-global}--BorderWidth--sm) * 2); // element's padding
-  // stylelint-disable length-zero-no-unit
-  --#{$number-input}--c-form-control--width-icon: 0px;
-  // stylelint-enable length-zero-no-unit
-  --#{$number-input}--m-status--c-form-control--width-icon: var(--#{$pf-global}--spacer--xl); // extra width to accommodate a status icon
+  --#{$number-input}--c-form-control--width-base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-t--global--border--width--box--default) * 2); // form controls's padding
+  --#{$number-input}--c-form-control--width-icon: var(--pf-t--global--spacer--xl); // extra width to accommodate a status icon
   --#{$number-input}--c-form-control--width-chars: 4;
   --#{$number-input}--c-form-control--Width:
     calc(
@@ -20,15 +18,12 @@
         var(--#{$number-input}--c-form-control--width-base) + var(--#{$number-input}--c-form-control--width-chars) * 1ch
       ) + var(--#{$number-input}--c-form-control--width-icon)
     );
+}
 
+.#{$number-input} {
   display: inline-flex;
   align-items: center;
 
-  // This modifier can be removed in a breaking change and the extra space created can always be included.
-  &.pf-m-status {
-    --#{$number-input}--c-form-control--width-icon: var(--#{$number-input}--m-status--c-form-control--width-icon);
-  }
-
   .#{$form-control} {
     width: var(--#{$number-input}--c-form-control--Width);
 

package/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/components/OverflowMenu/overflow-menu.scss

@@ -1,89 +1,51 @@
-// @debug $overflow-menu; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+:root {
+  --#{$overflow-menu}--ColumnGap: var(--pf-t--global--spacer--md);
 
-.#{$overflow-menu} {
-  // Base spacer - shared value
-  --#{$overflow-menu}--spacer--base: var(--#{$pf-global}--spacer--md);
-
-  // Spacer values
-  --#{$overflow-menu}--spacer: var(--#{$pf-global}--spacer--sm);
-  --#{$overflow-menu}__group--spacer: var(--#{$overflow-menu}--spacer--base);
-  --#{$overflow-menu}__item--spacer: var(--#{$overflow-menu}--spacer--base);
-  --#{$overflow-menu}--c-divider--m-vertical--spacer: var(--#{$overflow-menu}--spacer--base);
+  // * Overflow menu group
+  --#{$overflow-menu}__group--ColumnGap: var(--pf-t--global--spacer--md);
 
-  // Button group
-  --#{$overflow-menu}__group--m-button-group--spacer: var(--#{$overflow-menu}--spacer--base);
-  --#{$overflow-menu}__group--m-button-group--space-items: var(--#{$pf-global}--spacer--sm);
+  // * Overflow menu button group
+  --#{$overflow-menu}__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
 
-  // Icon button group
-  --#{$overflow-menu}__group--m-icon-button-group--spacer: var(--#{$overflow-menu}--spacer--base);
-  --#{$overflow-menu}__group--m-icon-button-group--space-items: 0;
+  // * Overflow menu icon button group
+  --#{$overflow-menu}__group--m-icon-button-group--ColumnGap: var(--pf-t--global--spacer--xs);
+}
 
+// - Overflow menu
+.#{$overflow-menu} {
   display: inline-flex;
-  align-items: center;
+  column-gap: var(--#{$overflow-menu}--ColumnGap);
 }
 
-// Content
-.#{$overflow-menu}__content {
+// - Overflow menu content - Overflow menu group
+.#{$overflow-menu}__content,
+.#{$overflow-menu}__group {
   display: flex;
-  align-items: center;
+  align-items: start;
 }
 
-// Group
+// - Overflow menu group
 .#{$overflow-menu}__group {
-  --#{$overflow-menu}--spacer: var(--#{$overflow-menu}__group--spacer);
-
-  display: flex;
-  align-items: center;
+  column-gap: var(--#{$overflow-menu}__group--ColumnGap);
 
-  // Button group
+  // - Overflow menu button group
   &.pf-m-button-group {
-    --#{$overflow-menu}--spacer: var(--#{$overflow-menu}__group--m-button-group--spacer);
-
-    > * {
-      --#{$overflow-menu}--spacer: var(--#{$overflow-menu}__group--m-button-group--space-items);
-    }
+    column-gap: var(--#{$overflow-menu}__group--m-button-group--ColumnGap);
   }
 
-  // Icon button group
+  // - Overflow menu icon button group
   &.pf-m-icon-button-group {
-    --#{$overflow-menu}--spacer: var(--#{$overflow-menu}__group--m-icon-button-group--spacer);
-
-    > * {
-      --#{$overflow-menu}--spacer: var(--#{$overflow-menu}__group--m-icon-button-group--space-items);
-    }
+    column-gap: var(--#{$overflow-menu}__group--m-icon-button-group--ColumnGap);
   }
 }
 
-// Item
+// - Oveflow menu item
 .#{$overflow-menu}__item {
-  // reset spacer
-  --#{$overflow-menu}--spacer: var(--#{$overflow-menu}__item--spacer);
+  column-gap: var(--#{$overflow-menu}__item--ColumnGap, var(--#{$overflow-menu}--ColumnGap));
 }
 
+// - Overflow menu content - Overflow menu control
 .#{$overflow-menu}__content,
-.#{$overflow-menu}__control,
-.#{$overflow-menu}__group,
-.#{$overflow-menu}__item {
-  margin-inline-end: var(--#{$overflow-menu}--spacer);
-
-  &:last-child {
-    --#{$overflow-menu}--spacer: 0;
-  }
-}
-
-// Divider
-.#{$overflow-menu},
-.#{$overflow-menu}__group {
-  // set this var here so specificity is 20
-  > .#{$divider} {
-    --#{$overflow-menu}--spacer: var(--#{$overflow-menu}--c-divider--m-vertical--spacer);
-  }
-
-  > .#{$divider}.pf-m-vertical {
-    margin-inline-end: var(--#{$overflow-menu}--spacer);
-
-    &:last-child {
-      --#{$overflow-menu}--spacer: 0;
-    }
-  }
+.#{$overflow-menu}__control  {
+  column-gap: var(--#{$overflow-menu}--ColumnGap);
 }