@patternfly/patternfly 6.0.0-alpha.63 → 6.0.0-alpha.65

package/components/MultipleFileUpload/multiple-file-upload.scss

@@ -1,8 +1,9 @@
 // @debug $multiple-file-upload; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$multiple-file-upload} {
+:root,
+:where(.#{$multiple-file-upload}) {
   --#{$multiple-file-upload}--GridTemplateColumns: 1fr;
-  --#{$multiple-file-upload}--Gap: var(--#{$pf-global}--spacer--lg);
+  --#{$multiple-file-upload}--Gap: var(--pf-t--global--spacer--md);
 
   // main
   --#{$multiple-file-upload}__main--TextAlign: center;
@@ -12,40 +13,47 @@
     "title"
     "upload"
     "info";
-  --#{$multiple-file-upload}__main--Gap: var(--#{$pf-global}--spacer--md);
-  --#{$multiple-file-upload}__main--PaddingTop: var(--#{$pf-global}--spacer--lg);
-  --#{$multiple-file-upload}__main--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$multiple-file-upload}__main--PaddingBottom: var(--#{$pf-global}--spacer--xl);
-  --#{$multiple-file-upload}__main--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$multiple-file-upload}__main--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
+  --#{$multiple-file-upload}__main--PaddingTop: var(--pf-t--global--spacer--xl);
+  --#{$multiple-file-upload}__main--PaddingRight: var(--pf-t--global--spacer--xl);
+  --#{$multiple-file-upload}__main--PaddingBottom: var(--pf-t--global--spacer--xl);
+  --#{$multiple-file-upload}__main--PaddingLeft: var(--pf-t--global--spacer--xl);
+  --#{$multiple-file-upload}__main--BorderWidth: var(--pf-t--global--border--width--regular);
   --#{$multiple-file-upload}__main--BorderStyle: dashed;
-  --#{$multiple-file-upload}__main--BorderColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$multiple-file-upload}__main--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
+  --#{$multiple-file-upload}__main--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$multiple-file-upload}__main--BorderRadius: var(--pf-t--global--border--radius--medium);
 
   // title
   --#{$multiple-file-upload}__title--Display: grid;
   --#{$multiple-file-upload}__title--GridTemplateColumns: auto;
-  --#{$multiple-file-upload}__title--Gap: var(--#{$pf-global}--spacer--sm);
+  --#{$multiple-file-upload}__title--Gap: var(--pf-t--global--spacer--lg);
+
+  // title text
+  --#{$multiple-file-upload}__title-text--Color: var(--pf-t--global--text--color--regular);
+  --#{$multiple-file-upload}__title-text--FontFamily: var(--pf-t--global--font--family--heading);
+  --#{$multiple-file-upload}__title-text--FontSize: var(--pf-t--global--font--size--heading--sm);
+  --#{$multiple-file-upload}__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // title icon
-  --#{$multiple-file-upload}__title-icon--Color: var(--#{$pf-global}--icon--Color--dark);
+  --#{$multiple-file-upload}__title-icon--Color: var(--pf-t--global--icon--color--regular);
+  --#{$multiple-file-upload}__title-icon--FontSize: var(--pf-t--global--icon--size--xl);
 
   // title text separator
   --#{$multiple-file-upload}__title-text-separator--Display: block;
-  --#{$multiple-file-upload}__title-text-separator--MarginTop: var(--#{$pf-global}--spacer--sm);
+  --#{$multiple-file-upload}__title-text-separator--MarginTop: var(--pf-t--global--spacer--sm);
+  --#{$multiple-file-upload}__title-text-separator--MarginBottom: var(--pf-t--global--spacer--sm);
+  --#{$multiple-file-upload}__title-text-separator--Color: var(--pf-t--global--text--color--regular);
+  --#{$multiple-file-upload}__title-text-separator--FontFamily: var(--pf-t--global--font--family--body);
+  --#{$multiple-file-upload}__title-text-separator--FontSize: var(--pf-t--global--font--size--body--lg);
+  --#{$multiple-file-upload}__title-text-separator--FontWeight: var(--pf-t--global--font--weight--body);
 
   // info
-  --#{$multiple-file-upload}__info--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$multiple-file-upload}__info--Color: var(--#{$pf-global}--Color--200);
-  --#{$multiple-file-upload}__info--MarginTop: var(--#{$pf-global}--spacer--sm);
+  --#{$multiple-file-upload}__info--FontSize: var(--pf-t--global--font--size--body--default);
+  --#{$multiple-file-upload}__info--Color: var(--pf-t--global--text--color--subtle);
+  --#{$multiple-file-upload}__info--MarginTop: var(--pf-t--global--spacer--lg);
 
   // drag-over
-  --#{$multiple-file-upload}--m-drag-over__main--BorderStyle: solid;
-  --#{$multiple-file-upload}--m-drag-over__main--BorderColor: var(--#{$pf-global}--active-color--100);
-  --#{$multiple-file-upload}--m-drag-over__main--BackgroundColor: var(--#{$pf-global}--palette--blue-50);
-  --#{$multiple-file-upload}--m-drag-over__main__title-icon--Color: var(--#{$pf-global}--active-color--100);
-  --#{$multiple-file-upload}--m-drag-over__main__title-text--Color: var(--#{$pf-global}--active-color--100);
-  --#{$multiple-file-upload}--m-drag-over__main__info--Color: var(--#{$pf-global}--active-color--100);
+  --#{$multiple-file-upload}--m-drag-over__main--BorderStyle: dashed;
+  --#{$multiple-file-upload}--m-drag-over__main--BorderColor: var(--pf-t--global--border--color--clicked);
 
   // horizontal
   --#{$multiple-file-upload}--m-horizontal--GridTemplateColumns: fit-content(100%);
@@ -54,46 +62,57 @@
   --#{$multiple-file-upload}--m-horizontal__main--GridTemplateAreas:
     "title upload"
     "info upload";
-  --#{$multiple-file-upload}--m-horizontal__main--Gap: var(--#{$pf-global}--spacer--sm) var(--#{$pf-global}--spacer--2xl);
-  --#{$multiple-file-upload}--m-horizontal__main--PaddingBottom: var(--#{$pf-global}--spacer--lg);
+  --#{$multiple-file-upload}--m-horizontal__main--Gap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
+  --#{$multiple-file-upload}--m-horizontal__main--PaddingBottom: var(--pf-t--global--spacer--lg);
   --#{$multiple-file-upload}--m-horizontal__title--GridTemplateColumns: auto 1fr;
-  --#{$multiple-file-upload}--m-horizontal__title--Gap: var(--#{$pf-global}--spacer--xs);
+  --#{$multiple-file-upload}--m-horizontal__title--Gap: var(--pf-t--global--spacer--sm);
+
+  // TODO replace with icon size token when available
+  --#{$multiple-file-upload}--m-horizontal__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --#{$multiple-file-upload}--m-horizontal__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
   --#{$multiple-file-upload}--m-horizontal__title-text-separator--Display: inline;
   --#{$multiple-file-upload}--m-horizontal__title-text-separator--MarginTop: 0;
+  --#{$multiple-file-upload}--m-horizontal__title-text-separator--FontFamily: var(--pf-t--global--font--family--heading);
+  --#{$multiple-file-upload}--m-horizontal__title-text-separator--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --#{$multiple-file-upload}--m-horizontal__title-text-separator--FontWeight: var(--pf-t--global--font--weight--heading);
   --#{$multiple-file-upload}--m-horizontal__info--MarginTop: 0;
 
+  // status container
+  --#{$multiple-file-upload}__status--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$multiple-file-upload}__status--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$multiple-file-upload}__status--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$multiple-file-upload}__status--PaddingRight: var(--pf-t--global--spacer--md);
+
   // status progress
   --#{$multiple-file-upload}__status-progress--GridTemplateColumns: auto 1fr;
-  --#{$multiple-file-upload}__status-progress--Gap: var(--#{$pf-global}--spacer--sm);
+  --#{$multiple-file-upload}__status-progress--Gap: var(--pf-t--global--spacer--sm);
 
   // status progress icon
-  --#{$multiple-file-upload}__status-progress-icon--Color: var(--#{$pf-global}--icon--Color--dark);
+  --#{$multiple-file-upload}__status-progress-icon--Color: var(--pf-t--global--icon--color--regular);
 
   // status item
-  --#{$multiple-file-upload}__status-item--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$multiple-file-upload}__status-item--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$multiple-file-upload}__status-item--first-child--PaddingTop: 0;
+  --#{$multiple-file-upload}__status-item--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$multiple-file-upload}__status-item--PaddingBottom: var(--pf-t--global--spacer--md);
   --#{$multiple-file-upload}__status-item--GridTemplateColumns: auto 1fr auto;
-  --#{$multiple-file-upload}__status-item--Gap: var(--#{$pf-global}--spacer--sm);
-  --#{$multiple-file-upload}__status-item--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$multiple-file-upload}__status-item--BorderColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$multiple-file-upload}__status-item--Gap: var(--pf-t--global--spacer--sm);
+  --#{$multiple-file-upload}__status-item--BorderWidth: var(--pf-t--global--border--width--regular);
+  --#{$multiple-file-upload}__status-item--BorderColor: var(--pf-t--global--border--color--default);
 
   // status item icon
-  --#{$multiple-file-upload}__status-item-icon--Color: var(--#{$pf-global}--icon--Color--dark);
-
-  // status item close
-  --#{$multiple-file-upload}__status-item-close--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
+  --#{$multiple-file-upload}__status-item-icon--Color: var(--pf-t--global--icon--color--regular);
 
   // status item progress
   --#{$multiple-file-upload}__status-item-progress--GridTemplateColumns: fit-content(100%) max-content;
-  --#{$multiple-file-upload}__status-item-progress--Gap: var(--#{$pf-global}--spacer--sm);
+  --#{$multiple-file-upload}__status-item-progress--Gap: var(--pf-t--global--spacer--sm);
 
   // status item progress text
-  --#{$multiple-file-upload}__status-item-progress-text--Color: var(--#{$pf-global}--primary-color--100);
+  --#{$multiple-file-upload}__status-item-progress-text--Color: var(--pf-t--global--text--color--regular);
 
   // status item progress size
-  --#{$multiple-file-upload}__status-item-progress-size--Color: var(--#{$pf-global}--Color--200);
+  --#{$multiple-file-upload}__status-item-progress-size--Color: var(--pf-t--global--text--color--subtle);
+}
 
+.#{$multiple-file-upload} {
   display: grid;
   grid-template-columns: var(--#{$multiple-file-upload}--GridTemplateColumns);
   gap: var(--#{$multiple-file-upload}--Gap);
@@ -107,18 +126,19 @@
     --#{$multiple-file-upload}__main--PaddingBottom: var(--#{$multiple-file-upload}--m-horizontal__main--PaddingBottom);
     --#{$multiple-file-upload}__title--GridTemplateColumns: var(--#{$multiple-file-upload}--m-horizontal__title--GridTemplateColumns);
     --#{$multiple-file-upload}__title--Gap: var(--#{$multiple-file-upload}--m-horizontal__title--Gap);
+    --#{$multiple-file-upload}__title-icon--FontSize: var(--#{$multiple-file-upload}--m-horizontal__title-icon--FontSize);
+    --#{$multiple-file-upload}__title-text--FontSize: var(--#{$multiple-file-upload}--m-horizontal__title-text--FontSize);
+    --#{$multiple-file-upload}__title-text-separator--FontFamily: var(--#{$multiple-file-upload}--m-horizontal__title-text-separator--FontFamily);
     --#{$multiple-file-upload}__title-text-separator--Display: var(--#{$multiple-file-upload}--m-horizontal__title-text-separator--Display);
     --#{$multiple-file-upload}__title-text-separator--MarginTop: var(--#{$multiple-file-upload}--m-horizontal__title-text-separator--MarginTop);
+    --#{$multiple-file-upload}__title-text-separator--FontSize: var(--#{$multiple-file-upload}--m-horizontal__title-text-separator--FontSize);
+    --#{$multiple-file-upload}__title-text-separator--FontWeight: var(--#{$multiple-file-upload}--m-horizontal__title-text-separator--FontWeight);
     --#{$multiple-file-upload}__info--MarginTop: var(--#{$multiple-file-upload}--m-horizontal__info--MarginTop);
   }
 
   &.pf-m-drag-over {
     --#{$multiple-file-upload}__main--BorderStyle: var(--#{$multiple-file-upload}--m-drag-over__main--BorderStyle);
     --#{$multiple-file-upload}__main--BorderColor: var(--#{$multiple-file-upload}--m-drag-over__main--BorderColor);
-    --#{$multiple-file-upload}__main--BackgroundColor: var(--#{$multiple-file-upload}--m-drag-over__main--BackgroundColor);
-    --#{$multiple-file-upload}__title-icon--Color: var(--#{$multiple-file-upload}--m-drag-over__main__title-icon--Color);
-    --#{$multiple-file-upload}__title-text--Color: var(--#{$multiple-file-upload}--m-drag-over__main__title-text--Color);
-    --#{$multiple-file-upload}__info--Color: var(--#{$multiple-file-upload}--m-drag-over__main__info--Color);
   }
 }
 
@@ -128,13 +148,14 @@
   grid-template-rows: var(--#{$multiple-file-upload}__main--GridTemplateRows);
   grid-template-columns: var(--#{$multiple-file-upload}__main--GridTemplateColumns);
   gap: var(--#{$multiple-file-upload}__main--Gap);
+  align-items: center;
   padding-block-start: var(--#{$multiple-file-upload}__main--PaddingTop);
   padding-block-end: var(--#{$multiple-file-upload}__main--PaddingBottom);
   padding-inline-start: var(--#{$multiple-file-upload}__main--PaddingLeft);
   padding-inline-end: var(--#{$multiple-file-upload}__main--PaddingRight);
   text-align: var(--#{$multiple-file-upload}__main--TextAlign);
-  background-color: var(--#{$multiple-file-upload}__main--BackgroundColor);
   border: var(--#{$multiple-file-upload}__main--BorderWidth) var(--#{$multiple-file-upload}__main--BorderStyle) var(--#{$multiple-file-upload}__main--BorderColor);
+  border-radius: var(--#{$multiple-file-upload}__main--BorderRadius);
 }
 
 .#{$multiple-file-upload}__title {
@@ -145,16 +166,25 @@
 }
 
 .#{$multiple-file-upload}__title-icon {
+  font-size: var(--#{$multiple-file-upload}__title-icon--FontSize);
   color: var(--#{$multiple-file-upload}__title-icon--Color);
 }
 
 .#{$multiple-file-upload}__title-text {
+  font-family: var(--#{$multiple-file-upload}__title-text--FontFamily);
+  font-size: var(--#{$multiple-file-upload}__title-text--FontSize);
+  font-weight: var(--#{$multiple-file-upload}__title-text--FontWeight);
   color: var(--#{$multiple-file-upload}__title-text--Color, inherit);
 }
 
 .#{$multiple-file-upload}__title-text-separator {
   display: var(--#{$multiple-file-upload}__title-text-separator--Display);
   margin-block-start: var(--#{$multiple-file-upload}__title-text-separator--MarginTop);
+  margin-block-end: var(--#{$multiple-file-upload}__title-text-separator--MarginBottom);
+  font-family: var(--#{$multiple-file-upload}__title-text-separator--FontFamily);
+  font-size: var(--#{$multiple-file-upload}__title-text-separator--FontSize);
+  font-weight: var(--#{$multiple-file-upload}__title-text-separator--FontWeight);
+  color: var(--#{$multiple-file-upload}__title-text-separator--Color);
 }
 
 .#{$multiple-file-upload}__upload {
@@ -168,6 +198,13 @@
   color: var(--#{$multiple-file-upload}__info--Color);
 }
 
+.#{$multiple-file-upload}__status {
+  padding-block-start: var(--#{$multiple-file-upload}__status--PaddingTop);
+  padding-block-end: var(--#{$multiple-file-upload}__status--PaddingBottom);
+  padding-inline-start: var(--#{$multiple-file-upload}__status--PaddingLeft);
+  padding-inline-end: var(--#{$multiple-file-upload}__status--PaddingRight);
+}
+
 .#{$multiple-file-upload}__status,
 .#{$multiple-file-upload}__status-item-main {
   min-width: 0;
@@ -190,20 +227,12 @@
   padding-block-start: var(--#{$multiple-file-upload}__status-item--PaddingTop);
   padding-block-end: var(--#{$multiple-file-upload}__status-item--PaddingBottom);
   border-block-end: var(--#{$multiple-file-upload}__status-item--BorderWidth) solid var(--#{$multiple-file-upload}__status-item--BorderColor);
-
-  &:first-child {
-    --#{$multiple-file-upload}__status-item--PaddingTop: var(--#{$multiple-file-upload}__status-item--first-child--PaddingTop);
-  }
 }
 
 .#{$multiple-file-upload}__status-item-icon {
   color: var(--#{$multiple-file-upload}__status-item-icon--Color);
 }
 
-.#{$multiple-file-upload}__status-item-close {
-  margin-block-start: var(--#{$multiple-file-upload}__status-item-close--MarginTop);
-}
-
 .#{$multiple-file-upload}__status-item-progress {
   display: grid;
   grid-template-columns: var(--#{$multiple-file-upload}__status-item-progress--GridTemplateColumns);

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

package/components/Pagination/pagination.css

@@ -6,7 +6,8 @@
   appearance: none;
 }
 
-:root {
+:where(:root),
+:where(.pf-v5-c-pagination) {
   --pf-v5-c-pagination--inset: 0;
   --pf-v5-c-pagination--ColumnGap: var(--pf-t--global--spacer--lg);
   --pf-v5-c-pagination--m-page-insets--inset: var(--pf-t--global--spacer--md);
@@ -46,7 +47,8 @@
   --pf-v5-c-pagination--m-display-full__page-menu--Display: inline-flex;
 }
 @media screen and (min-width: 768px) {
-  :root {
+  :where(:root),
+  :where(.pf-v5-c-pagination) {
     --pf-v5-c-pagination--m-bottom--BoxShadow: none;
     --pf-v5-c-pagination__page-menu--Display: inline-flex;
     --pf-v5-c-pagination__nav--Display: inline-flex;
@@ -54,7 +56,8 @@
   }
 }
 @media screen and (min-width: 1200px) {
-  :root {
+  :where(:root),
+  :where(.pf-v5-c-pagination) {
     --pf-v5-c-pagination--m-bottom--PaddingRight: var(--pf-v5-c-pagination--m-bottom--xl--PaddingRight);
     --pf-v5-c-pagination--m-bottom--PaddingLeft: var(--pf-v5-c-pagination--m-bottom--xl--PaddingLeft);
     --pf-v5-c-pagination__scroll-button--Width: var(--pf-v5-c-pagination__scroll-button--xl--Width);

package/components/Pagination/pagination.scss

@@ -2,14 +2,15 @@
 $pf-v5-c-pagination--breakpoint-map: build-breakpoint-map();
 $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
-:root {
+:where(:root),
+:where(.#{$pagination}) {
   --#{$pagination}--inset: 0;
   --#{$pagination}--ColumnGap: var(--pf-t--global--spacer--lg);
-  
+
   // Page insets
   --#{$pagination}--m-page-insets--inset: var(--pf-t--global--spacer--md);
   --#{$pagination}--m-page-insets--xl--inset: var(--pf-t--global--spacer--lg);
-  
+
   // nav
   --#{$pagination}__nav--Display: none;
   --#{$pagination}--m-display-summary__nav--Display: none;