@patternfly/patternfly 5.0.0-alpha.55 → 5.0.0-alpha.57

package/patternfly.css

@@ -280,15 +280,12 @@
   --pf-v5-global--icon--FontSize--md: 1rem;
   --pf-v5-global--icon--FontSize--lg: 1.5rem;
   --pf-v5-global--icon--FontSize--xl: 3.375rem;
-  --pf-v5-global--FontFamily--sans-serif: "RedHatText", helvetica, arial, sans-serif;
-  --pf-v5-global--FontFamily--heading--sans-serif: "RedHatDisplay", helvetica, arial, sans-serif;
-  --pf-v5-global--FontFamily--monospace: "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
-  --pf-v5-global--FontFamily--redhat-updated--sans-serif: "RedHatTextUpdated", helvetica, arial, sans-serif;
-  --pf-v5-global--FontFamily--redhat-updated--heading--sans-serif: "RedHatDisplayUpdated", helvetica, arial, sans-serif;
-  --pf-v5-global--FontFamily--redhat--monospace: "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
-  --pf-v5-global--FontFamily--redhatVF--sans-serif: "RedHatTextVF", "RedHatText", helvetica, arial, sans-serif;
-  --pf-v5-global--FontFamily--redhatVF--heading--sans-serif: "RedHatDisplayVF", "RedHatDisplay", helvetica, arial, sans-serif;
-  --pf-v5-global--FontFamily--redhatVF--monospace: "RedHatMonoVF", "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
+  --pf-v5-global--FontFamily--text: "RedHatText", helvetica, arial, sans-serif;
+  --pf-v5-global--FontFamily--heading: "RedHatDisplay", helvetica, arial, sans-serif;
+  --pf-v5-global--FontFamily--monospace: "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
+  --pf-v5-global--FontFamily--text--vf: "RedHatTextVF", "RedHatText", helvetica, arial, sans-serif;
+  --pf-v5-global--FontFamily--heading--vf: "RedHatDisplayVF", "RedHatDisplay", helvetica, arial, sans-serif;
+  --pf-v5-global--FontFamily--monospace--vf: "RedHatMonoVF", "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
   --pf-v5-global--FontSize--4xl: 2.25rem;
   --pf-v5-global--FontSize--3xl: 1.75rem;
   --pf-v5-global--FontSize--2xl: 1.5rem;
@@ -297,7 +294,6 @@
   --pf-v5-global--FontSize--md: 1rem;
   --pf-v5-global--FontSize--sm: 0.875rem;
   --pf-v5-global--FontSize--xs: 0.75rem;
-  --pf-v5-global--FontWeight--light: 300;
   --pf-v5-global--FontWeight--normal: 400;
   --pf-v5-global--FontWeight--bold: 700;
   --pf-v5-global--LineHeight--sm: 1.3;
@@ -312,19 +308,10 @@
   --pf-v5-global--target-size--MinHeight: 44px;
 }
 
-.pf-v5-m-redhat-updated-font {
-  --pf-v5-global--FontFamily--sans-serif: var(--pf-v5-global--FontFamily--redhat-updated--sans-serif);
-  --pf-v5-global--FontFamily--heading--sans-serif: var(--pf-v5-global--FontFamily--redhat-updated--heading--sans-serif);
-}
-
-.pf-v5-m-redhatmono-font {
-  --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--redhat--monospace);
-}
-
-.pf-v5-m-redhatVF-font {
-  --pf-v5-global--FontFamily--sans-serif: var(--pf-v5-global--FontFamily--redhatVF--sans-serif);
-  --pf-v5-global--FontFamily--heading--sans-serif: var(--pf-v5-global--FontFamily--redhatVF--heading--sans-serif);
-  --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--redhatVF--monospace);
+.pf-m-vf-font {
+  --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
+  --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
+  --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header, :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
@@ -425,122 +412,115 @@
 }
 
 @font-face {
-  font-family: "RedHatDisplay";
+  font-family: RedHatDisplay;
   font-style: normal;
-  font-weight: 300;
-  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2");
-  text-rendering: optimizelegibility;
+  font-weight: 400;
+  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2");
+  font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatDisplay";
-  font-style: normal;
+  font-family: RedHatDisplay;
+  font-style: italic;
   font-weight: 400;
-  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2");
-  text-rendering: optimizelegibility;
+  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff2") format("woff2");
+  font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatDisplay";
+  font-family: RedHatDisplay;
   font-style: normal;
   font-weight: 700;
   src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff2") format("woff2");
-  text-rendering: optimizelegibility;
-}
-@font-face {
-  font-family: "RedHatText";
-  font-style: normal;
-  font-weight: 400;
-  src: url("./assets/fonts/RedHatText/RedHatText-Regular.woff2") format("woff2");
-  text-rendering: optimizelegibility;
+  font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatText";
+  font-family: RedHatDisplay;
   font-style: normal;
   font-weight: 700;
-  src: url("./assets/fonts/RedHatText/RedHatText-Medium.woff2") format("woff2");
-  text-rendering: optimizelegibility;
+  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff2") format("woff2");
+  font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatDisplayUpdated";
+  font-family: RedHatText;
   font-style: normal;
-  font-weight: 300;
-  src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Regular.woff2") format("woff2");
-  text-rendering: optimizelegibility;
+  font-weight: 400;
+  src: url("./assets/fonts/RedHatText/RedHatText-Regular.woff2") format("woff2");
+  font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatDisplayUpdated";
-  font-style: normal;
+  font-family: RedHatText;
+  font-style: italic;
   font-weight: 400;
-  src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Medium.woff2") format("woff2");
-  text-rendering: optimizelegibility;
+  src: url("./assets/fonts/RedHatText/RedHatText-Italic.woff2") format("woff2");
+  font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatDisplayUpdated";
+  font-family: RedHatText;
   font-style: normal;
   font-weight: 700;
-  src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Bold.woff2") format("woff2");
-  text-rendering: optimizelegibility;
+  src: url("./assets/fonts/RedHatText/RedHatText-Medium.woff2") format("woff2");
+  font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatTextUpdated";
-  font-style: normal;
-  font-weight: 400;
-  src: url("./assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Regular.woff2") format("woff2");
-  text-rendering: optimizelegibility;
+  font-family: RedHatText;
+  font-style: italic;
+  font-weight: 700;
+  src: url("./assets/fonts/RedHatText/RedHatText-MediumItalic.woff2") format("woff2");
+  font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatTextUpdated";
+  font-family: RedHatMono;
   font-style: normal;
-  font-weight: 700;
-  src: url("./assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Medium.woff2") format("woff2");
-  text-rendering: optimizelegibility;
+  font-weight: 400;
+  src: url("./assets/fonts/RedHatMono/RedHatMono-Regular.woff2") format("woff2");
+  font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatMono";
-  font-style: normal;
+  font-family: RedHatMono;
+  font-style: italic;
   font-weight: 400;
-  src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Regular.woff2") format("woff2");
+  src: url("./assets/fonts/RedHatMono/RedHatMono-Italic.woff2") format("woff2");
   font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatDisplayVF";
+  font-family: RedHatDisplayVF;
   font-style: normal;
-  font-weight: 300 900;
-  src: url("./assets/fonts/RedHatFont-updated/modified/RedHatDisplayVFModified-updated.woff2") format("woff2-variations");
+  font-weight: 400 700;
+  src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2") format("woff2-variations");
   font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatDisplayVF";
+  font-family: RedHatDisplayVF;
   font-style: italic;
-  font-weight: 300 900;
-  src: url("./assets/fonts/RedHatFont-updated/modified/RedHatDisplayVF-updated-ItalicModified.woff2") format("woff2-variations");
+  font-weight: 400 700;
+  src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2") format("woff2-variations");
   font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatTextVF";
+  font-family: RedHatTextVF;
   font-style: normal;
   font-weight: 400 500;
-  src: url("./assets/fonts/RedHatFont-updated/modified/RedHatTextVFModified-updated.woff2") format("woff2-variations");
+  src: url("./assets/fonts/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
   font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatTextVF";
+  font-family: RedHatTextVF;
   font-style: italic;
   font-weight: 400 500;
-  src: url("./assets/fonts/RedHatFont-updated/modified/RedHatTextVF-updated-ItalicModified.woff2") format("woff2-variations");
+  src: url("./assets/fonts/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
   font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatMonoVF";
+  font-family: RedHatMonoVF;
   font-style: normal;
-  font-weight: 300 700;
-  src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated.woff2") format("woff2-variations");
+  font-weight: 400;
+  src: url("./assets/fonts/RedHatMono/RedHatMonoVF.woff2") format("woff2-variations");
   font-display: fallback;
 }
 @font-face {
-  font-family: "RedHatMonoVF";
+  font-family: RedHatMonoVF;
   font-style: italic;
-  font-weight: 300 700;
-  src: url("./assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated-Italic.woff2") format("woff2-variations");
+  font-weight: 400;
+  src: url("./assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2") format("woff2-variations");
   font-display: fallback;
 }
 .pf-v5-screen-reader {
@@ -603,7 +583,7 @@ body) {
 }
 
 :where(body) {
-  font-family: var(--pf-v5-global--FontFamily--sans-serif);
+  font-family: var(--pf-v5-global--FontFamily--text);
   font-size: var(--pf-v5-global--FontSize--md);
   font-weight: var(--pf-v5-global--FontWeight--normal);
   line-height: var(--pf-v5-global--LineHeight--md);
@@ -5694,7 +5674,7 @@ button) {
   --pf-v5-c-accordion--m-display-lg__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
   --pf-v5-c-accordion--m-display-lg__toggle--PaddingBottom: var(--pf-v5-global--spacer--md);
   --pf-v5-c-accordion--m-display-lg__toggle--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
+  --pf-v5-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-v5-global--FontFamily--heading);
   --pf-v5-c-accordion--m-display-lg__toggle--FontSize: var(--pf-v5-global--FontSize--xl);
   --pf-v5-c-accordion--m-display-lg__toggle--hover__toggle-text--Color: var(--pf-v5-global--Color--100);
   --pf-v5-c-accordion--m-display-lg__toggle--active__toggle-text--Color: var(--pf-v5-global--Color--100);
@@ -7866,7 +7846,7 @@ button.pf-v5-c-breadcrumb__link {
   --pf-v5-c-card--child--PaddingLeft: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-card--c-divider--child--PaddingTop: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-card__title--not--last-child--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-card__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
+  --pf-v5-c-card__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
   --pf-v5-c-card__title-text--FontSize: var(--pf-v5-global--FontSize--md);
   --pf-v5-c-card__title-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-card__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
@@ -8852,7 +8832,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
   --pf-v5-c-content--FontSize: var(--pf-v5-global--FontSize--md);
   --pf-v5-c-content--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-content--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-content--heading--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
+  --pf-v5-c-content--heading--FontFamily: var(--pf-v5-global--FontFamily--heading);
   --pf-v5-c-content--h1--MarginTop: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-content--h1--MarginBottom: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-content--h1--LineHeight: var(--pf-v5-global--LineHeight--sm);
@@ -13999,7 +13979,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
   --pf-v5-c-empty-state--m-xs__icon--MarginBottom: var(--pf-v5-global--spacer--md);
   --pf-v5-c-empty-state--m-xl__icon--MarginBottom: var(--pf-v5-global--spacer--xl);
   --pf-v5-c-empty-state--m-xl__icon--FontSize: 6.25rem;
-  --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
+  --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
   --pf-v5-c-empty-state__title-text--FontSize: var(--pf-v5-global--FontSize--xl);
   --pf-v5-c-empty-state__title-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-empty-state__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
@@ -18679,7 +18659,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-v5-c-modal-box__header--PaddingLeft: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-modal-box__header--last-child--PaddingBottom: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-modal-box__title--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-modal-box__title--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
+  --pf-v5-c-modal-box__title--FontFamily: var(--pf-v5-global--FontFamily--heading);
   --pf-v5-c-modal-box__title--FontSize: var(--pf-v5-global--FontSize--2xl);
   --pf-v5-c-modal-box__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-global--Color--100);
@@ -22227,7 +22207,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-v5-c-popover__close--sibling--PaddingRight: var(--pf-v5-global--spacer--2xl);
   --pf-v5-c-popover__header--MarginBottom: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-popover__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-popover__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
+  --pf-v5-c-popover__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
   --pf-v5-c-popover__title-text--FontSize: var(--pf-v5-global--FontSize--md);
   --pf-v5-c-popover__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-popover__title-icon--Color: var(--pf-v5-global--Color--100);
@@ -29649,7 +29629,7 @@ svg.pf-v5-c-spinner.pf-m-xl {
 }
 
 .pf-v5-c-title {
-  --pf-v5-c-title--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
+  --pf-v5-c-title--FontFamily: var(--pf-v5-global--FontFamily--heading);
   --pf-v5-c-title--m-4xl--LineHeight: var(--pf-v5-global--LineHeight--sm);
   --pf-v5-c-title--m-4xl--FontSize: var(--pf-v5-global--FontSize--4xl);
   --pf-v5-c-title--m-4xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
@@ -30486,7 +30466,7 @@ label.pf-v5-c-tree-view__node-text {
   --pf-v5-c-wizard__close--FontSize: var(--pf-v5-global--FontSize--xl);
   --pf-v5-c-wizard__title--PaddingRight: var(--pf-v5-global--spacer--2xl);
   --pf-v5-c-wizard__title-text--FontSize: var(--pf-v5-global--FontSize--3xl);
-  --pf-v5-c-wizard__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
+  --pf-v5-c-wizard__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
   --pf-v5-c-wizard__title-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-wizard__title-text--LineHeight: var(--pf-v5-global--LineHeight--sm);
   --pf-v5-c-wizard__description--PaddingTop: var(--pf-v5-global--spacer--sm);
@@ -32603,9 +32583,9 @@ label.pf-v5-c-tree-view__node-text {
     --pf-v5-l-flex--spacer: var(--pf-v5-l-flex--spacer--4xl);
   }
 }
-.pf-v5-l-flex.pf-m-gap-invalid spacer base {
-  --pf-v5-l-flex--RowGap: ;
-  --pf-v5-l-flex--ColumnGap: ;
+.pf-v5-l-flex.pf-m-gap {
+  --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
+  --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
 }
 .pf-v5-l-flex.pf-m-gap-none {
   --pf-v5-l-flex--RowGap: 0;
@@ -32639,14 +32619,14 @@ label.pf-v5-c-tree-view__node-text {
   --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
   --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
 }
-.pf-v5-l-flex:is(.pf-m-gap-invalid spacer base, .pf-m-gap-none, .pf-m-gap-sm, .pf-m-gap-md, .pf-m-gap-lg, .pf-m-gap-xl, .pf-m-gap-2xl, .pf-m-gap-3xl, .pf-m-gap-4xl) > * {
+.pf-v5-l-flex:is(.pf-m-gap, .pf-m-gap-none, .pf-m-gap-sm, .pf-m-gap-md, .pf-m-gap-lg, .pf-m-gap-xl, .pf-m-gap-2xl, .pf-m-gap-3xl, .pf-m-gap-4xl) > * {
   --pf-v5-l-flex--spacer--row: 0;
   --pf-v5-l-flex--spacer--column: 0;
 }
 @media (min-width: 576px) {
-  .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-sm {
-    --pf-v5-l-flex--RowGap: ;
-    --pf-v5-l-flex--ColumnGap: ;
+  .pf-v5-l-flex.pf-m-gap-on-sm {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
   }
   .pf-v5-l-flex.pf-m-gap-none-on-sm {
     --pf-v5-l-flex--RowGap: 0;
@@ -32680,15 +32660,15 @@ label.pf-v5-c-tree-view__node-text {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base-on-sm, .pf-m-gap-none-on-sm, .pf-m-gap-sm-on-sm, .pf-m-gap-md-on-sm, .pf-m-gap-lg-on-sm, .pf-m-gap-xl-on-sm, .pf-m-gap-2xl-on-sm, .pf-m-gap-3xl-on-sm, .pf-m-gap-4xl-on-sm) > * {
+  .pf-v5-l-flex:is(.pf-m-gap-on-sm, .pf-m-gap-none-on-sm, .pf-m-gap-sm-on-sm, .pf-m-gap-md-on-sm, .pf-m-gap-lg-on-sm, .pf-m-gap-xl-on-sm, .pf-m-gap-2xl-on-sm, .pf-m-gap-3xl-on-sm, .pf-m-gap-4xl-on-sm) > * {
     --pf-v5-l-flex--spacer--row: 0;
     --pf-v5-l-flex--spacer--column: 0;
   }
 }
 @media (min-width: 768px) {
-  .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-md {
-    --pf-v5-l-flex--RowGap: ;
-    --pf-v5-l-flex--ColumnGap: ;
+  .pf-v5-l-flex.pf-m-gap-on-md {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
   }
   .pf-v5-l-flex.pf-m-gap-none-on-md {
     --pf-v5-l-flex--RowGap: 0;
@@ -32722,15 +32702,15 @@ label.pf-v5-c-tree-view__node-text {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base-on-md, .pf-m-gap-none-on-md, .pf-m-gap-sm-on-md, .pf-m-gap-md-on-md, .pf-m-gap-lg-on-md, .pf-m-gap-xl-on-md, .pf-m-gap-2xl-on-md, .pf-m-gap-3xl-on-md, .pf-m-gap-4xl-on-md) > * {
+  .pf-v5-l-flex:is(.pf-m-gap-on-md, .pf-m-gap-none-on-md, .pf-m-gap-sm-on-md, .pf-m-gap-md-on-md, .pf-m-gap-lg-on-md, .pf-m-gap-xl-on-md, .pf-m-gap-2xl-on-md, .pf-m-gap-3xl-on-md, .pf-m-gap-4xl-on-md) > * {
     --pf-v5-l-flex--spacer--row: 0;
     --pf-v5-l-flex--spacer--column: 0;
   }
 }
 @media (min-width: 992px) {
-  .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-lg {
-    --pf-v5-l-flex--RowGap: ;
-    --pf-v5-l-flex--ColumnGap: ;
+  .pf-v5-l-flex.pf-m-gap-on-lg {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
   }
   .pf-v5-l-flex.pf-m-gap-none-on-lg {
     --pf-v5-l-flex--RowGap: 0;
@@ -32764,15 +32744,15 @@ label.pf-v5-c-tree-view__node-text {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base-on-lg, .pf-m-gap-none-on-lg, .pf-m-gap-sm-on-lg, .pf-m-gap-md-on-lg, .pf-m-gap-lg-on-lg, .pf-m-gap-xl-on-lg, .pf-m-gap-2xl-on-lg, .pf-m-gap-3xl-on-lg, .pf-m-gap-4xl-on-lg) > * {
+  .pf-v5-l-flex:is(.pf-m-gap-on-lg, .pf-m-gap-none-on-lg, .pf-m-gap-sm-on-lg, .pf-m-gap-md-on-lg, .pf-m-gap-lg-on-lg, .pf-m-gap-xl-on-lg, .pf-m-gap-2xl-on-lg, .pf-m-gap-3xl-on-lg, .pf-m-gap-4xl-on-lg) > * {
     --pf-v5-l-flex--spacer--row: 0;
     --pf-v5-l-flex--spacer--column: 0;
   }
 }
 @media (min-width: 1200px) {
-  .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-xl {
-    --pf-v5-l-flex--RowGap: ;
-    --pf-v5-l-flex--ColumnGap: ;
+  .pf-v5-l-flex.pf-m-gap-on-xl {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
   }
   .pf-v5-l-flex.pf-m-gap-none-on-xl {
     --pf-v5-l-flex--RowGap: 0;
@@ -32806,15 +32786,15 @@ label.pf-v5-c-tree-view__node-text {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base-on-xl, .pf-m-gap-none-on-xl, .pf-m-gap-sm-on-xl, .pf-m-gap-md-on-xl, .pf-m-gap-lg-on-xl, .pf-m-gap-xl-on-xl, .pf-m-gap-2xl-on-xl, .pf-m-gap-3xl-on-xl, .pf-m-gap-4xl-on-xl) > * {
+  .pf-v5-l-flex:is(.pf-m-gap-on-xl, .pf-m-gap-none-on-xl, .pf-m-gap-sm-on-xl, .pf-m-gap-md-on-xl, .pf-m-gap-lg-on-xl, .pf-m-gap-xl-on-xl, .pf-m-gap-2xl-on-xl, .pf-m-gap-3xl-on-xl, .pf-m-gap-4xl-on-xl) > * {
     --pf-v5-l-flex--spacer--row: 0;
     --pf-v5-l-flex--spacer--column: 0;
   }
 }
 @media (min-width: 1450px) {
-  .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-2xl {
-    --pf-v5-l-flex--RowGap: ;
-    --pf-v5-l-flex--ColumnGap: ;
+  .pf-v5-l-flex.pf-m-gap-on-2xl {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
   }
   .pf-v5-l-flex.pf-m-gap-none-on-2xl {
     --pf-v5-l-flex--RowGap: 0;
@@ -32848,13 +32828,13 @@ label.pf-v5-c-tree-view__node-text {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base-on-2xl, .pf-m-gap-none-on-2xl, .pf-m-gap-sm-on-2xl, .pf-m-gap-md-on-2xl, .pf-m-gap-lg-on-2xl, .pf-m-gap-xl-on-2xl, .pf-m-gap-2xl-on-2xl, .pf-m-gap-3xl-on-2xl, .pf-m-gap-4xl-on-2xl) > * {
+  .pf-v5-l-flex:is(.pf-m-gap-on-2xl, .pf-m-gap-none-on-2xl, .pf-m-gap-sm-on-2xl, .pf-m-gap-md-on-2xl, .pf-m-gap-lg-on-2xl, .pf-m-gap-xl-on-2xl, .pf-m-gap-2xl-on-2xl, .pf-m-gap-3xl-on-2xl, .pf-m-gap-4xl-on-2xl) > * {
     --pf-v5-l-flex--spacer--row: 0;
     --pf-v5-l-flex--spacer--column: 0;
   }
 }
-.pf-v5-l-flex.pf-m-row-gap-invalid spacer base {
-  --pf-v5-l-flex--RowGap: ;
+.pf-v5-l-flex.pf-m-row-gap {
+  --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
 }
 .pf-v5-l-flex.pf-m-row-gap-none {
   --pf-v5-l-flex--RowGap: 0;
@@ -32880,12 +32860,12 @@ label.pf-v5-c-tree-view__node-text {
 .pf-v5-l-flex.pf-m-row-gap-4xl {
   --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
 }
-.pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base, .pf-m-row-gap-none, .pf-m-row-gap-sm, .pf-m-row-gap-md, .pf-m-row-gap-lg, .pf-m-row-gap-xl, .pf-m-row-gap-2xl, .pf-m-row-gap-3xl, .pf-m-row-gap-4xl) > * {
+.pf-v5-l-flex:is(.pf-m-row-gap, .pf-m-row-gap-none, .pf-m-row-gap-sm, .pf-m-row-gap-md, .pf-m-row-gap-lg, .pf-m-row-gap-xl, .pf-m-row-gap-2xl, .pf-m-row-gap-3xl, .pf-m-row-gap-4xl) > * {
   --pf-v5-l-flex--spacer--row: 0;
 }
 @media (min-width: 576px) {
-  .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-sm {
-    --pf-v5-l-flex--RowGap: ;
+  .pf-v5-l-flex.pf-m-row-gap-on-sm {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
   }
   .pf-v5-l-flex.pf-m-row-gap-none-on-sm {
     --pf-v5-l-flex--RowGap: 0;
@@ -32911,13 +32891,13 @@ label.pf-v5-c-tree-view__node-text {
   .pf-v5-l-flex.pf-m-row-gap-4xl-on-sm {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base-on-sm, .pf-m-row-gap-none-on-sm, .pf-m-row-gap-sm-on-sm, .pf-m-row-gap-md-on-sm, .pf-m-row-gap-lg-on-sm, .pf-m-row-gap-xl-on-sm, .pf-m-row-gap-2xl-on-sm, .pf-m-row-gap-3xl-on-sm, .pf-m-row-gap-4xl-on-sm) > * {
+  .pf-v5-l-flex:is(.pf-m-row-gap-on-sm, .pf-m-row-gap-none-on-sm, .pf-m-row-gap-sm-on-sm, .pf-m-row-gap-md-on-sm, .pf-m-row-gap-lg-on-sm, .pf-m-row-gap-xl-on-sm, .pf-m-row-gap-2xl-on-sm, .pf-m-row-gap-3xl-on-sm, .pf-m-row-gap-4xl-on-sm) > * {
     --pf-v5-l-flex--spacer--row: 0;
   }
 }
 @media (min-width: 768px) {
-  .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-md {
-    --pf-v5-l-flex--RowGap: ;
+  .pf-v5-l-flex.pf-m-row-gap-on-md {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
   }
   .pf-v5-l-flex.pf-m-row-gap-none-on-md {
     --pf-v5-l-flex--RowGap: 0;
@@ -32943,13 +32923,13 @@ label.pf-v5-c-tree-view__node-text {
   .pf-v5-l-flex.pf-m-row-gap-4xl-on-md {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base-on-md, .pf-m-row-gap-none-on-md, .pf-m-row-gap-sm-on-md, .pf-m-row-gap-md-on-md, .pf-m-row-gap-lg-on-md, .pf-m-row-gap-xl-on-md, .pf-m-row-gap-2xl-on-md, .pf-m-row-gap-3xl-on-md, .pf-m-row-gap-4xl-on-md) > * {
+  .pf-v5-l-flex:is(.pf-m-row-gap-on-md, .pf-m-row-gap-none-on-md, .pf-m-row-gap-sm-on-md, .pf-m-row-gap-md-on-md, .pf-m-row-gap-lg-on-md, .pf-m-row-gap-xl-on-md, .pf-m-row-gap-2xl-on-md, .pf-m-row-gap-3xl-on-md, .pf-m-row-gap-4xl-on-md) > * {
     --pf-v5-l-flex--spacer--row: 0;
   }
 }
 @media (min-width: 992px) {
-  .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-lg {
-    --pf-v5-l-flex--RowGap: ;
+  .pf-v5-l-flex.pf-m-row-gap-on-lg {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
   }
   .pf-v5-l-flex.pf-m-row-gap-none-on-lg {
     --pf-v5-l-flex--RowGap: 0;
@@ -32975,13 +32955,13 @@ label.pf-v5-c-tree-view__node-text {
   .pf-v5-l-flex.pf-m-row-gap-4xl-on-lg {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base-on-lg, .pf-m-row-gap-none-on-lg, .pf-m-row-gap-sm-on-lg, .pf-m-row-gap-md-on-lg, .pf-m-row-gap-lg-on-lg, .pf-m-row-gap-xl-on-lg, .pf-m-row-gap-2xl-on-lg, .pf-m-row-gap-3xl-on-lg, .pf-m-row-gap-4xl-on-lg) > * {
+  .pf-v5-l-flex:is(.pf-m-row-gap-on-lg, .pf-m-row-gap-none-on-lg, .pf-m-row-gap-sm-on-lg, .pf-m-row-gap-md-on-lg, .pf-m-row-gap-lg-on-lg, .pf-m-row-gap-xl-on-lg, .pf-m-row-gap-2xl-on-lg, .pf-m-row-gap-3xl-on-lg, .pf-m-row-gap-4xl-on-lg) > * {
     --pf-v5-l-flex--spacer--row: 0;
   }
 }
 @media (min-width: 1200px) {
-  .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-xl {
-    --pf-v5-l-flex--RowGap: ;
+  .pf-v5-l-flex.pf-m-row-gap-on-xl {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
   }
   .pf-v5-l-flex.pf-m-row-gap-none-on-xl {
     --pf-v5-l-flex--RowGap: 0;
@@ -33007,13 +32987,13 @@ label.pf-v5-c-tree-view__node-text {
   .pf-v5-l-flex.pf-m-row-gap-4xl-on-xl {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base-on-xl, .pf-m-row-gap-none-on-xl, .pf-m-row-gap-sm-on-xl, .pf-m-row-gap-md-on-xl, .pf-m-row-gap-lg-on-xl, .pf-m-row-gap-xl-on-xl, .pf-m-row-gap-2xl-on-xl, .pf-m-row-gap-3xl-on-xl, .pf-m-row-gap-4xl-on-xl) > * {
+  .pf-v5-l-flex:is(.pf-m-row-gap-on-xl, .pf-m-row-gap-none-on-xl, .pf-m-row-gap-sm-on-xl, .pf-m-row-gap-md-on-xl, .pf-m-row-gap-lg-on-xl, .pf-m-row-gap-xl-on-xl, .pf-m-row-gap-2xl-on-xl, .pf-m-row-gap-3xl-on-xl, .pf-m-row-gap-4xl-on-xl) > * {
     --pf-v5-l-flex--spacer--row: 0;
   }
 }
 @media (min-width: 1450px) {
-  .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-2xl {
-    --pf-v5-l-flex--RowGap: ;
+  .pf-v5-l-flex.pf-m-row-gap-on-2xl {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
   }
   .pf-v5-l-flex.pf-m-row-gap-none-on-2xl {
     --pf-v5-l-flex--RowGap: 0;
@@ -33039,12 +33019,12 @@ label.pf-v5-c-tree-view__node-text {
   .pf-v5-l-flex.pf-m-row-gap-4xl-on-2xl {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base-on-2xl, .pf-m-row-gap-none-on-2xl, .pf-m-row-gap-sm-on-2xl, .pf-m-row-gap-md-on-2xl, .pf-m-row-gap-lg-on-2xl, .pf-m-row-gap-xl-on-2xl, .pf-m-row-gap-2xl-on-2xl, .pf-m-row-gap-3xl-on-2xl, .pf-m-row-gap-4xl-on-2xl) > * {
+  .pf-v5-l-flex:is(.pf-m-row-gap-on-2xl, .pf-m-row-gap-none-on-2xl, .pf-m-row-gap-sm-on-2xl, .pf-m-row-gap-md-on-2xl, .pf-m-row-gap-lg-on-2xl, .pf-m-row-gap-xl-on-2xl, .pf-m-row-gap-2xl-on-2xl, .pf-m-row-gap-3xl-on-2xl, .pf-m-row-gap-4xl-on-2xl) > * {
     --pf-v5-l-flex--spacer--row: 0;
   }
 }
-.pf-v5-l-flex.pf-m-column-gap-invalid spacer base {
-  --pf-v5-l-flex--ColumnGap: ;
+.pf-v5-l-flex.pf-m-column-gap {
+  --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
 }
 .pf-v5-l-flex.pf-m-column-gap-none {
   --pf-v5-l-flex--ColumnGap: 0;
@@ -33070,12 +33050,12 @@ label.pf-v5-c-tree-view__node-text {
 .pf-v5-l-flex.pf-m-column-gap-4xl {
   --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
 }
-.pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base, .pf-m-column-gap-none, .pf-m-column-gap-sm, .pf-m-column-gap-md, .pf-m-column-gap-lg, .pf-m-column-gap-xl, .pf-m-column-gap-2xl, .pf-m-column-gap-3xl, .pf-m-column-gap-4xl) > * {
+.pf-v5-l-flex:is(.pf-m-column-gap, .pf-m-column-gap-none, .pf-m-column-gap-sm, .pf-m-column-gap-md, .pf-m-column-gap-lg, .pf-m-column-gap-xl, .pf-m-column-gap-2xl, .pf-m-column-gap-3xl, .pf-m-column-gap-4xl) > * {
   --pf-v5-l-flex--spacer--column: 0;
 }
 @media (min-width: 576px) {
-  .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-sm {
-    --pf-v5-l-flex--ColumnGap: ;
+  .pf-v5-l-flex.pf-m-column-gap-on-sm {
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
   }
   .pf-v5-l-flex.pf-m-column-gap-none-on-sm {
     --pf-v5-l-flex--ColumnGap: 0;
@@ -33101,13 +33081,13 @@ label.pf-v5-c-tree-view__node-text {
   .pf-v5-l-flex.pf-m-column-gap-4xl-on-sm {
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base-on-sm, .pf-m-column-gap-none-on-sm, .pf-m-column-gap-sm-on-sm, .pf-m-column-gap-md-on-sm, .pf-m-column-gap-lg-on-sm, .pf-m-column-gap-xl-on-sm, .pf-m-column-gap-2xl-on-sm, .pf-m-column-gap-3xl-on-sm, .pf-m-column-gap-4xl-on-sm) > * {
+  .pf-v5-l-flex:is(.pf-m-column-gap-on-sm, .pf-m-column-gap-none-on-sm, .pf-m-column-gap-sm-on-sm, .pf-m-column-gap-md-on-sm, .pf-m-column-gap-lg-on-sm, .pf-m-column-gap-xl-on-sm, .pf-m-column-gap-2xl-on-sm, .pf-m-column-gap-3xl-on-sm, .pf-m-column-gap-4xl-on-sm) > * {
     --pf-v5-l-flex--spacer--column: 0;
   }
 }
 @media (min-width: 768px) {
-  .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-md {
-    --pf-v5-l-flex--ColumnGap: ;
+  .pf-v5-l-flex.pf-m-column-gap-on-md {
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
   }
   .pf-v5-l-flex.pf-m-column-gap-none-on-md {
     --pf-v5-l-flex--ColumnGap: 0;
@@ -33133,13 +33113,13 @@ label.pf-v5-c-tree-view__node-text {
   .pf-v5-l-flex.pf-m-column-gap-4xl-on-md {
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base-on-md, .pf-m-column-gap-none-on-md, .pf-m-column-gap-sm-on-md, .pf-m-column-gap-md-on-md, .pf-m-column-gap-lg-on-md, .pf-m-column-gap-xl-on-md, .pf-m-column-gap-2xl-on-md, .pf-m-column-gap-3xl-on-md, .pf-m-column-gap-4xl-on-md) > * {
+  .pf-v5-l-flex:is(.pf-m-column-gap-on-md, .pf-m-column-gap-none-on-md, .pf-m-column-gap-sm-on-md, .pf-m-column-gap-md-on-md, .pf-m-column-gap-lg-on-md, .pf-m-column-gap-xl-on-md, .pf-m-column-gap-2xl-on-md, .pf-m-column-gap-3xl-on-md, .pf-m-column-gap-4xl-on-md) > * {
     --pf-v5-l-flex--spacer--column: 0;
   }
 }
 @media (min-width: 992px) {
-  .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-lg {
-    --pf-v5-l-flex--ColumnGap: ;
+  .pf-v5-l-flex.pf-m-column-gap-on-lg {
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
   }
   .pf-v5-l-flex.pf-m-column-gap-none-on-lg {
     --pf-v5-l-flex--ColumnGap: 0;
@@ -33165,13 +33145,13 @@ label.pf-v5-c-tree-view__node-text {
   .pf-v5-l-flex.pf-m-column-gap-4xl-on-lg {
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base-on-lg, .pf-m-column-gap-none-on-lg, .pf-m-column-gap-sm-on-lg, .pf-m-column-gap-md-on-lg, .pf-m-column-gap-lg-on-lg, .pf-m-column-gap-xl-on-lg, .pf-m-column-gap-2xl-on-lg, .pf-m-column-gap-3xl-on-lg, .pf-m-column-gap-4xl-on-lg) > * {
+  .pf-v5-l-flex:is(.pf-m-column-gap-on-lg, .pf-m-column-gap-none-on-lg, .pf-m-column-gap-sm-on-lg, .pf-m-column-gap-md-on-lg, .pf-m-column-gap-lg-on-lg, .pf-m-column-gap-xl-on-lg, .pf-m-column-gap-2xl-on-lg, .pf-m-column-gap-3xl-on-lg, .pf-m-column-gap-4xl-on-lg) > * {
     --pf-v5-l-flex--spacer--column: 0;
   }
 }
 @media (min-width: 1200px) {
-  .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-xl {
-    --pf-v5-l-flex--ColumnGap: ;
+  .pf-v5-l-flex.pf-m-column-gap-on-xl {
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
   }
   .pf-v5-l-flex.pf-m-column-gap-none-on-xl {
     --pf-v5-l-flex--ColumnGap: 0;
@@ -33197,13 +33177,13 @@ label.pf-v5-c-tree-view__node-text {
   .pf-v5-l-flex.pf-m-column-gap-4xl-on-xl {
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base-on-xl, .pf-m-column-gap-none-on-xl, .pf-m-column-gap-sm-on-xl, .pf-m-column-gap-md-on-xl, .pf-m-column-gap-lg-on-xl, .pf-m-column-gap-xl-on-xl, .pf-m-column-gap-2xl-on-xl, .pf-m-column-gap-3xl-on-xl, .pf-m-column-gap-4xl-on-xl) > * {
+  .pf-v5-l-flex:is(.pf-m-column-gap-on-xl, .pf-m-column-gap-none-on-xl, .pf-m-column-gap-sm-on-xl, .pf-m-column-gap-md-on-xl, .pf-m-column-gap-lg-on-xl, .pf-m-column-gap-xl-on-xl, .pf-m-column-gap-2xl-on-xl, .pf-m-column-gap-3xl-on-xl, .pf-m-column-gap-4xl-on-xl) > * {
     --pf-v5-l-flex--spacer--column: 0;
   }
 }
 @media (min-width: 1450px) {
-  .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-2xl {
-    --pf-v5-l-flex--ColumnGap: ;
+  .pf-v5-l-flex.pf-m-column-gap-on-2xl {
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
   }
   .pf-v5-l-flex.pf-m-column-gap-none-on-2xl {
     --pf-v5-l-flex--ColumnGap: 0;
@@ -33229,7 +33209,7 @@ label.pf-v5-c-tree-view__node-text {
   .pf-v5-l-flex.pf-m-column-gap-4xl-on-2xl {
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base-on-2xl, .pf-m-column-gap-none-on-2xl, .pf-m-column-gap-sm-on-2xl, .pf-m-column-gap-md-on-2xl, .pf-m-column-gap-lg-on-2xl, .pf-m-column-gap-xl-on-2xl, .pf-m-column-gap-2xl-on-2xl, .pf-m-column-gap-3xl-on-2xl, .pf-m-column-gap-4xl-on-2xl) > * {
+  .pf-v5-l-flex:is(.pf-m-column-gap-on-2xl, .pf-m-column-gap-none-on-2xl, .pf-m-column-gap-sm-on-2xl, .pf-m-column-gap-md-on-2xl, .pf-m-column-gap-lg-on-2xl, .pf-m-column-gap-xl-on-2xl, .pf-m-column-gap-2xl-on-2xl, .pf-m-column-gap-3xl-on-2xl, .pf-m-column-gap-4xl-on-2xl) > * {
     --pf-v5-l-flex--spacer--column: 0;
   }
 }