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

package/components/ActionList/action-list.css

@@ -1,27 +1,28 @@
-.pf-v5-c-action-list {
-  --pf-v5-c-action-list--m-icon--spacer: 0;
-  --pf-v5-c-action-list--child--spacer-base: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-action-list--group--spacer-base: var(--pf-v5-global--spacer--2xl);
+:where(:root) {
+  --pf-v5-c-action-list--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-action-list--ColumnGap: var(--pf-t--global--spacer--2xl);
+  --pf-v5-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--sm);
 }
 
 .pf-v5-c-action-list,
 .pf-v5-c-action-list__group {
-  --pf-v5-c-action-list--child--spacer: var(--pf-v5-c-action-list--child--spacer-base);
-  --pf-v5-c-action-list--group--spacer: var(--pf-v5-c-action-list--group--spacer-base);
   display: flex;
-  align-items: center;
+  align-items: start;
+}
+
+.pf-v5-c-action-list {
+  row-gap: var(--pf-v5-c-action-list--RowGap);
+  column-gap: var(--pf-v5-c-action-list--ColumnGap);
 }
-.pf-v5-c-action-list > * + *,
-.pf-v5-c-action-list__group > * + * {
-  margin-inline-start: var(--pf-v5-c-action-list--child--spacer);
+.pf-v5-c-action-list.pf-m-icons {
+  column-gap: var(--pf-v5-c-action-list--m-icons--ColumnGap);
 }
-.pf-v5-c-action-list > * + .pf-v5-c-action-list__group,
-.pf-v5-c-action-list .pf-v5-c-action-list__group + *,
-.pf-v5-c-action-list__group > * + .pf-v5-c-action-list__group,
-.pf-v5-c-action-list__group .pf-v5-c-action-list__group + * {
-  margin-inline-start: var(--pf-v5-c-action-list--group--spacer);
+
+.pf-v5-c-action-list__group {
+  row-gap: var(--pf-v5-c-action-list__group--RowGap, var(--pf-v5-c-action-list--RowGap));
+  column-gap: var(--pf-v5-c-action-list__group--ColumnGap);
 }
-.pf-v5-c-action-list.pf-m-icons,
 .pf-v5-c-action-list__group.pf-m-icons {
-  --pf-v5-c-action-list--child--spacer: var(--pf-v5-c-action-list--m-icon--spacer);
+  column-gap: var(--pf-v5-c-action-list--m-icons--ColumnGap);
 }

package/components/ActionList/action-list.scss

@@ -1,29 +1,39 @@
-// @debug $action-list; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+:where(:root) {
+  --#{$action-list}--RowGap: var(--pf-t--global--spacer--sm);
+  --#{$action-list}--ColumnGap: var(--pf-t--global--spacer--2xl);
 
-.#{$action-list} {
-  --#{$action-list}--m-icon--spacer: 0;
-  --#{$action-list}--child--spacer-base: var(--#{$pf-global}--spacer--md);
-  --#{$action-list}--group--spacer-base: var(--#{$pf-global}--spacer--2xl);
+  // * Action list group
+  --#{$action-list}__group--ColumnGap: var(--pf-t--global--spacer--md);
+
+  // * Action list icons
+  --#{$action-list}--m-icons--ColumnGap: var(--pf-t--global--spacer--sm);
 }
 
+// - Action list - Action list group
 .#{$action-list},
 .#{$action-list}__group {
-  --#{$action-list}--child--spacer: var(--#{$action-list}--child--spacer-base);
-  --#{$action-list}--group--spacer: var(--#{$action-list}--group--spacer-base);
-
   display: flex;
-  align-items: center;
+  align-items: start;
+}
 
-  > * + * {
-    margin-inline-start: var(--#{$action-list}--child--spacer);
-  }
+// - Action list
+.#{$action-list} {
+  row-gap: var(--#{$action-list}--RowGap);
+  column-gap: var(--#{$action-list}--ColumnGap);
 
-  > * + .#{$action-list}__group,
-  .#{$action-list}__group + * {
-    margin-inline-start: var(--#{$action-list}--group--spacer);
+  // - Action list icons
+  &.pf-m-icons {
+    column-gap: var(--#{$action-list}--m-icons--ColumnGap); // update prop: val to prevent potential inheritance conflicts
   }
+}
+
+// - Action list group
+.#{$action-list}__group {
+  row-gap: var(--#{$action-list}__group--RowGap, var(--#{$action-list}--RowGap));
+  column-gap: var(--#{$action-list}__group--ColumnGap);
 
+  // - Action list group icons
   &.pf-m-icons {
-    --#{$action-list}--child--spacer: var(--#{$action-list}--m-icon--spacer);
+    column-gap: var(--#{$action-list}--m-icons--ColumnGap); // update prop: val to prevent potential inheritance conflicts
   }
 }

package/components/Button/button.css

@@ -14,10 +14,6 @@
   --pf-v5-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
   --pf-v5-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v5-c-button--TextDecoration: none;
-  --pf-v5-c-button--BorderStartStartRadius: var(--pf-v5-c-button--BorderRadius);
-  --pf-v5-c-button--BorderStartEndRadius: var(--pf-v5-c-button--BorderRadius);
-  --pf-v5-c-button--BorderEndStartRadius: var(--pf-v5-c-button--BorderRadius);
-  --pf-v5-c-button--BorderEndEndRadius: var(--pf-v5-c-button--BorderRadius);
   --pf-v5-c-button--MixBlendMode: normal;
   --pf-v5-c-button--hover--BackgroundColor: transparent;
   --pf-v5-c-button--hover--BorderColor: transparent;
@@ -247,11 +243,10 @@
   user-select: none;
   background-color: var(--pf-v5-c-button--BackgroundColor);
   border: 0;
-  border-start-start-radius: var(--pf-v5-c-button--BorderStartStartRadius);
-  border-start-end-radius: var(--pf-v5-c-button--BorderStartEndRadius);
-  border-end-start-radius: var(--pf-v5-c-button--BorderEndStartRadius);
-  border-end-end-radius: var(--pf-v5-c-button--BorderEndEndRadius);
-  mix-blend-mode: var(--pf-v5-c-button--MixBlendMode);
+  border-start-start-radius: var(--pf-v5-c-button--BorderStartStartRadius, var(--pf-v5-c-button--BorderRadius));
+  border-start-end-radius: var(--pf-v5-c-button--BorderStartEndRadius, var(--pf-v5-c-button--BorderRadius));
+  border-end-start-radius: var(--pf-v5-c-button--BorderEndStartRadius, var(--pf-v5-c-button--BorderRadius));
+  border-end-end-radius: var(--pf-v5-c-button--BorderEndEndRadius, var(--pf-v5-c-button--BorderRadius));
 }
 .pf-v5-c-button::after {
   position: absolute;

package/components/Button/button.scss

@@ -14,10 +14,6 @@
   --#{$button}--BorderWidth: var(--pf-t--global--border--width--button--default);
   --#{$button}--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$button}--TextDecoration: none;
-  --#{$button}--BorderStartStartRadius: var(--#{$button}--BorderRadius);
-  --#{$button}--BorderStartEndRadius: var(--#{$button}--BorderRadius);
-  --#{$button}--BorderEndStartRadius: var(--#{$button}--BorderRadius);
-  --#{$button}--BorderEndEndRadius: var(--#{$button}--BorderRadius);
   --#{$button}--MixBlendMode: normal;
 
   // Hover
@@ -289,11 +285,10 @@
   user-select: none;
   background-color: var(--#{$button}--BackgroundColor);
   border: 0;
-  border-start-start-radius: var(--#{$button}--BorderStartStartRadius);
-  border-start-end-radius: var(--#{$button}--BorderStartEndRadius);
-  border-end-start-radius: var(--#{$button}--BorderEndStartRadius);
-  border-end-end-radius: var(--#{$button}--BorderEndEndRadius);
-  mix-blend-mode: var(--#{$button}--MixBlendMode);
+  border-start-start-radius: var(--#{$button}--BorderStartStartRadius, var(--#{$button}--BorderRadius));
+  border-start-end-radius: var(--#{$button}--BorderStartEndRadius, var(--#{$button}--BorderRadius));
+  border-end-start-radius: var(--#{$button}--BorderEndStartRadius, var(--#{$button}--BorderRadius));
+  border-end-end-radius: var(--#{$button}--BorderEndEndRadius, var(--#{$button}--BorderRadius));
 
   &::after {
     position: absolute;

package/components/Masthead/masthead.css

@@ -1,15 +1,10 @@
 :root,
-:where(.pf-v5-c-masthead) {
-  --pf-v5-c-masthead--inset: var(--pf-t--global--spacer--lg);
-  --pf-v5-c-masthead--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --pf-v5-c-masthead--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --pf-v5-c-masthead--PaddingInlineStart: var(--pf-v5-c-masthead--inset);
-  --pf-v5-c-masthead--PaddingInlineEnd: var(--pf-v5-c-masthead--inset);
-  --pf-v5-c-masthead--AlignItems: start;
+[data-theme=pf-v5-c-masthead] {
   --pf-v5-c-masthead--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v5-c-masthead--ColumnGap: var(--pf-t--global--spacer--md);
-  --pf-v5-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v5-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
+  --pf-v5-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md);
+  --pf-v5-c-masthead--PaddingInline: var(--pf-t--global--spacer--lg);
   --pf-v5-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v5-c-masthead__brand--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v5-c-masthead__brand--MaxHeight: 2.375rem;
@@ -30,21 +25,15 @@
   --pf-v5-c-masthead--m-display-inline__content--Order: 0;
   --pf-v5-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v5-c-masthead__expandable-content--BorderBlockStart: var(--pf-v5-c-masthead--BorderWidth) solid var(--pf-v5-c-masthead--BorderColor);
+  --pf-v5-c-masthead--pf-v5-c-toolbar--Width: 100%;
+  --pf-v5-c-masthead--pf-v5-c-toolbar--PaddingBlock: 0;
+  --pf-v5-c-masthead--pf-v5-c-toolbar--PaddingInline: 0;
 }
 
 .pf-v5-c-masthead {
-  --pf-v5-c-toolbar--PaddingTop: 0;
-  --pf-v5-c-toolbar--PaddingBottom: 0;
-  --pf-v5-c-toolbar__content--PaddingRight: 0;
-  --pf-v5-c-toolbar__content--PaddingLeft: 0;
-  --pf-v5-c-toolbar__expandable-content--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v5-c-toolbar__expandable-content--PaddingRight: var(--pf-v5-c-masthead--inset);
-  --pf-v5-c-toolbar__expandable-content--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v5-c-toolbar__expandable-content--PaddingLeft: var(--pf-v5-c-masthead--inset);
-  --pf-v5-c-toolbar__expandable-content--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
-  --pf-v5-c-toolbar__expandable-content--lg--PaddingRight: var(--pf-v5-c-masthead--PaddingInlineStart);
-  --pf-v5-c-toolbar__expandable-content--lg--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v5-c-toolbar__expandable-content--lg--PaddingLeft: var(--pf-v5-c-masthead--PaddingInlineEnd);
+  --pf-v5-c-toolbar--Width: var(--pf-v5-c-masthead--pf-v5-c-toolbar--Width);
+  --pf-v5-c-toolbar__content--PaddingBlock: var(--pf-v5-c-masthead--pf-v5-c-toolbar--PaddingBlock);
+  --pf-v5-c-toolbar__content--PaddingInline: var(--pf-v5-c-masthead--pf-v5-c-toolbar--PaddingInline);
   --pf-v5-c-masthead--GridTemplateColumns: var(--pf-v5-c-masthead--m-display-stack--GridTemplateColumns);
   --pf-v5-c-masthead__main--GridColumn: var(--pf-v5-c-masthead--m-display-stack__main--GridColumn);
   --pf-v5-c-masthead__main--Order: var(--pf-v5-c-masthead--m-display-stack__main--Order);
@@ -56,13 +45,13 @@
   grid-template-columns: var(--pf-v5-c-masthead--GridTemplateColumns);
   row-gap: var(--pf-v5-c-masthead--RowGap);
   column-gap: var(--pf-v5-c-masthead--ColumnGap);
-  align-items: var(--pf-v5-c-masthead--AlignItems);
+  align-items: start;
   min-width: 0;
-  padding-block-start: var(--pf-v5-c-masthead--PaddingBlockStart);
-  padding-block-end: var(--pf-v5-c-masthead--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v5-c-masthead--inset);
-  padding-inline-end: var(--pf-v5-c-masthead--inset);
-  background-color: var(--pf-v5-c-masthead--BackgroundColor);
+  padding-block-start: var(--pf-v5-c-masthead--PaddingBlockStart, var(--pf-v5-c-masthead--PaddingBlock));
+  padding-block-end: var(--pf-v5-c-masthead--PaddingBlockEnd, var(--pf-v5-c-masthead--PaddingBlock));
+  padding-inline-start: var(--pf-v5-c-masthead--PaddingInlineStart, var(--pf-v5-c-masthead--PaddingInline));
+  padding-inline-end: var(--pf-v5-c-masthead--PaddingInlineEnd, var(--pf-v5-c-masthead--PaddingInline));
+  background-color: var(--pf-v5-c-masthead--BackgroundColor, var(--pf-t--global--background--color--secondary--default));
 }
 @media screen and (min-width: 768px) {
   :where(:not(.pf-m-resize-observer)) .pf-v5-c-masthead {
@@ -75,9 +64,6 @@
     --pf-v5-c-masthead__content--Order: var(--pf-v5-c-masthead--m-display-inline__content--Order);
   }
 }
-.pf-v5-c-masthead .pf-v5-c-toolbar {
-  width: 100%;
-}
 .pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content {
   inset-block-start: 100%;
   border-block-start: var(--pf-v5-c-masthead__expandable-content--BorderBlockStart);

package/components/Masthead/masthead.scss

@@ -1,20 +1,14 @@
-// @debug $masthead; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 $pf-v5-c-masthead--breakpoint-map: build-breakpoint-map();
 $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
 :root,
-:where(.#{$masthead}) {
+[data-theme="#{$masthead}"] {
   // * Masthead
-  --#{$masthead}--inset: var(--pf-t--global--spacer--lg);
-  --#{$masthead}--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --#{$masthead}--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --#{$masthead}--PaddingInlineStart: var(--#{$masthead}--inset);
-  --#{$masthead}--PaddingInlineEnd: var(--#{$masthead}--inset);
-  --#{$masthead}--AlignItems: start;
   --#{$masthead}--RowGap: var(--pf-t--global--spacer--sm);
   --#{$masthead}--ColumnGap: var(--pf-t--global--spacer--md);
-  --#{$masthead}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$masthead}--BorderWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$masthead}--PaddingBlock: var(--pf-t--global--spacer--md);
+  --#{$masthead}--PaddingInline: var(--pf-t--global--spacer--lg);
   --#{$masthead}--BorderColor: var(--pf-t--global--border--color--default);
 
   // * Masthead brand
@@ -43,8 +37,13 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   --#{$masthead}--m-display-inline__content--Order: 0;
 
   // * Masthead toolbar
-  --#{$masthead}__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom); // TODO: update after toolbar updates
-  --#{$masthead}__expandable-content--BorderBlockStart: var(--#{$masthead}--BorderWidth) solid var(--#{$masthead}--BorderColor); // TODO: update after toolbar updates
+  --#{$masthead}__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
+  --#{$masthead}__expandable-content--BorderBlockStart: var(--#{$masthead}--BorderWidth) solid var(--#{$masthead}--BorderColor);
+
+  // * Masthead toolbar
+  --#{$masthead}--#{$toolbar}--Width: 100%;
+  --#{$masthead}--#{$toolbar}--PaddingBlock: 0;
+  --#{$masthead}--#{$toolbar}--PaddingInline: 0;
 }
 
 // * Masthead display stack
@@ -71,18 +70,9 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
 
 // - Masthead
 .#{$masthead} {
-  --#{$toolbar}--PaddingTop: 0; // TODO: update after toolbar updates
-  --#{$toolbar}--PaddingBottom: 0; // TODO: update after toolbar updates
-  --#{$toolbar}__content--PaddingRight: 0; // TODO: update after toolbar updates
-  --#{$toolbar}__content--PaddingLeft: 0; // TODO: update after toolbar updates
-  --#{$toolbar}__expandable-content--PaddingTop: var(--pf-t--global--spacer--md); // TODO: update after toolbar updates
-  --#{$toolbar}__expandable-content--PaddingRight: var(--#{$masthead}--inset); // TODO: update after toolbar updates
-  --#{$toolbar}__expandable-content--PaddingBottom: var(--pf-t--global--spacer--md); // TODO: update after toolbar updates
-  --#{$toolbar}__expandable-content--PaddingLeft: var(--#{$masthead}--inset); // TODO: update after toolbar updates
-  --#{$toolbar}__expandable-content--BackgroundColor: var(--#{$masthead}--BackgroundColor); // TODO: update after toolbar updates
-  --#{$toolbar}__expandable-content--lg--PaddingRight: var(--#{$masthead}--PaddingInlineStart); // TODO: update after toolbar updates
-  --#{$toolbar}__expandable-content--lg--PaddingBottom: var(--pf-t--global--spacer--md); // TODO: update after toolbar updates
-  --#{$toolbar}__expandable-content--lg--PaddingLeft: var(--#{$masthead}--PaddingInlineEnd); // TODO: update after toolbar updates
+  --#{$toolbar}--Width: var(--#{$masthead}--#{$toolbar}--Width);
+  --#{$toolbar}__content--PaddingBlock: var(--#{$masthead}--#{$toolbar}--PaddingBlock);
+  --#{$toolbar}__content--PaddingInline: var(--#{$masthead}--#{$toolbar}--PaddingInline);
 
   // Set layout to stack by default
   @include pf-v5-c-masthead--m-display-stack;
@@ -99,21 +89,16 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   grid-template-columns: var(--#{$masthead}--GridTemplateColumns);
   row-gap: var(--#{$masthead}--RowGap);
   column-gap: var(--#{$masthead}--ColumnGap);
-  align-items: var(--#{$masthead}--AlignItems);
+  align-items: start;
   min-width: 0;
-  padding-block-start: var(--#{$masthead}--PaddingBlockStart);
-  padding-block-end: var(--#{$masthead}--PaddingBlockEnd);
-  padding-inline-start: var(--#{$masthead}--inset);
-  padding-inline-end: var(--#{$masthead}--inset);
-  background-color: var(--#{$masthead}--BackgroundColor);
 
-  // TODO: update when toolbar updates
-  // - Masthead toolbar
-  .#{$toolbar} {
-    width: 100%;
-  }
+  // set the fallback of any customizable, nested variable to its default value
+  padding-block-start: var(--#{$masthead}--PaddingBlockStart, var(--#{$masthead}--PaddingBlock));
+  padding-block-end: var(--#{$masthead}--PaddingBlockEnd, var(--#{$masthead}--PaddingBlock));
+  padding-inline-start: var(--#{$masthead}--PaddingInlineStart, var(--#{$masthead}--PaddingInline));
+  padding-inline-end: var(--#{$masthead}--PaddingInlineEnd, var(--#{$masthead}--PaddingInline));
+  background-color: var(--#{$masthead}--BackgroundColor, var(--pf-t--global--background--color--secondary--default));
 
-  // TODO: update when toolbar updates
   // - Masthead toolbar expandable content
   .#{$toolbar}__expandable-content {
     inset-block-start: 100%;
@@ -200,7 +185,6 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   background-color: var(--#{$masthead}--BackgroundColor);
 }
 
-
 // TODO: move this sass to separate file for resize observer updates
 // TODO: make this an opt in/out
 // stylelint-disable no-duplicate-selectors

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;