@patternfly/patternfly 6.0.0-alpha.51 → 6.0.0-alpha.53

package/components/Button/button.css

@@ -1,5 +1,6 @@
 :root,
 .pf-v5-c-button {
+  --pf-v5-c-button--Display: inline-block;
   --pf-v5-c-button--PaddingTop: var(--pf-t--global--spacer--sm);
   --pf-v5-c-button--PaddingRight: var(--pf-t--global--spacer--lg);
   --pf-v5-c-button--PaddingBottom: var(--pf-t--global--spacer--sm);
@@ -17,6 +18,7 @@
   --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;
   --pf-v5-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
@@ -65,6 +67,7 @@
   --pf-v5-c-button--m-link--PaddingLeft: var(--pf-t--global--spacer--md);
   --pf-v5-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
   --pf-v5-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --pf-v5-c-button--m-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
   --pf-v5-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
   --pf-v5-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
   --pf-v5-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
@@ -216,7 +219,7 @@
 
 .pf-v5-c-button {
   position: relative;
-  display: var(--pf-v5-c-button--Display, initial);
+  display: var(--pf-v5-c-button--Display);
   flex: var(--pf-v5-c-button--Flex, initial);
   align-items: var(--pf-v5-c-button--AlignItems, initial);
   justify-content: var(--pf-v5-c-button--JustifyContent, initial);
@@ -239,6 +242,7 @@
   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);
 }
 .pf-v5-c-button::after {
   position: absolute;
@@ -305,6 +309,7 @@
   --pf-v5-c-button--Color: var(--pf-v5-c-button--m-link--Color);
   --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-link--BorderRadius);
   --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-link--BackgroundColor);
+  --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-link--MixBlendMode);
   --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-link__icon--Color);
   --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-link--hover--Color);
   --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-link--hover--BackgroundColor);
@@ -430,6 +435,7 @@
   --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-plain--PaddingRight);
   --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-plain--PaddingBottom);
   --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-plain--PaddingLeft);
+  --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-plain--MixBlendMode);
   --pf-v5-c-button--m-small--PaddingTop: var(--pf-v5-c-button--m-plain--m-small--PaddingTop);
   --pf-v5-c-button--m-small--PaddingRight: var(--pf-v5-c-button--m-plain--m-small--PaddingRight);
   --pf-v5-c-button--m-small--PaddingBottom: var(--pf-v5-c-button--m-plain--m-small--PaddingBottom);
@@ -444,7 +450,6 @@
   --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-plain--disabled--Color);
   --pf-v5-c-button__progress--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
   min-width: var(--pf-v5-c-button--m-plain--MinWidth);
-  mix-blend-mode: var(--pf-v5-c-button--m-plain--MixBlendMode);
 }
 .pf-v5-c-button.pf-m-plain.pf-m-no-padding {
   min-width: auto;

package/components/Button/button.scss

@@ -1,5 +1,6 @@
 :root,
 .#{$button} {
+  --#{$button}--Display: inline-block;
   --#{$button}--PaddingTop: var(--pf-t--global--spacer--sm);
   --#{$button}--PaddingRight: var(--pf-t--global--spacer--lg);
   --#{$button}--PaddingBottom: var(--pf-t--global--spacer--sm);
@@ -17,6 +18,7 @@
   --#{$button}--BorderStartEndRadius: var(--#{$button}--BorderRadius);
   --#{$button}--BorderEndStartRadius: var(--#{$button}--BorderRadius);
   --#{$button}--BorderEndEndRadius: var(--#{$button}--BorderRadius);
+  --#{$button}--MixBlendMode: normal;
 
   // Hover
   --#{$button}--hover--BackgroundColor: transparent;
@@ -77,6 +79,7 @@
   --#{$button}--m-link--PaddingLeft: var(--pf-t--global--spacer--md);
   --#{$button}--m-link--Color: var(--pf-t--global--text--color--brand--default);
   --#{$button}--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --#{$button}--m-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
   --#{$button}--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
   --#{$button}--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
   --#{$button}--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
@@ -259,7 +262,7 @@
 
 .#{$button} {
   position: relative;
-  display: var(--#{$button}--Display, initial);
+  display: var(--#{$button}--Display);
   flex: var(--#{$button}--Flex, initial);
   align-items: var(--#{$button}--AlignItems, initial);
   justify-content: var(--#{$button}--JustifyContent, initial);
@@ -282,6 +285,7 @@
   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);
 
   &::after {
     position: absolute;
@@ -358,6 +362,7 @@
     --#{$button}--Color: var(--#{$button}--m-link--Color);
     --#{$button}--BorderRadius: var(--#{$button}--m-link--BorderRadius);
     --#{$button}--BackgroundColor: var(--#{$button}--m-link--BackgroundColor);
+    --#{$button}--MixBlendMode: var(--#{$button}--m-link--MixBlendMode);
     --#{$button}__icon--Color: var(--#{$button}--m-link__icon--Color);
     --#{$button}--hover--Color: var(--#{$button}--m-link--hover--Color);
     --#{$button}--hover--BackgroundColor: var(--#{$button}--m-link--hover--BackgroundColor);
@@ -503,6 +508,7 @@
     --#{$button}--PaddingRight: var(--#{$button}--m-plain--PaddingRight);
     --#{$button}--PaddingBottom: var(--#{$button}--m-plain--PaddingBottom);
     --#{$button}--PaddingLeft: var(--#{$button}--m-plain--PaddingLeft);
+    --#{$button}--MixBlendMode: var(--#{$button}--m-plain--MixBlendMode);
     --#{$button}--m-small--PaddingTop: var(--#{$button}--m-plain--m-small--PaddingTop);
     --#{$button}--m-small--PaddingRight: var(--#{$button}--m-plain--m-small--PaddingRight);
     --#{$button}--m-small--PaddingBottom: var(--#{$button}--m-plain--m-small--PaddingBottom);
@@ -524,7 +530,6 @@
     }
 
     min-width: var(--#{$button}--m-plain--MinWidth);
-    mix-blend-mode: var(--#{$button}--m-plain--MixBlendMode);
   }
 
   &.pf-m-block {

package/components/FormControl/form-control.css

@@ -41,13 +41,13 @@
   --pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
   --pf-v5-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --pf-v5-c-form-control--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
-  --pf-v5-c-form-control--m-success--PaddingRight: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-form-control--m-success--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-v5-c-form-control--ColumnGap));
   --pf-v5-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --pf-v5-c-form-control--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
-  --pf-v5-c-form-control--m-warning--PaddingRight: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-form-control--m-warning--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-v5-c-form-control--ColumnGap));
   --pf-v5-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --pf-v5-c-form-control--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
-  --pf-v5-c-form-control--m-error--PaddingRight: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-form-control--m-error--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-v5-c-form-control--ColumnGap));
   --pf-v5-c-form-control--m-error--icon--width: var(--pf-v5-c-form-control--FontSize);
   --pf-v5-c-form-control--m-icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-icon--icon--width) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
   --pf-v5-c-form-control--m-icon--icon--width: var(--pf-v5-c-form-control--FontSize);

package/components/FormControl/form-control.scss

@@ -59,17 +59,17 @@
   // success
   --#{$form-control}--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --#{$form-control}--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
-  --#{$form-control}--m-success--PaddingRight: var(--pf-t--global--spacer--xl);
+  --#{$form-control}--m-success--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--#{$form-control}--ColumnGap));
 
   // warning
   --#{$form-control}--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --#{$form-control}--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
-  --#{$form-control}--m-warning--PaddingRight: var(--pf-t--global--spacer--xl);
+  --#{$form-control}--m-warning--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--#{$form-control}--ColumnGap));
 
   // error
   --#{$form-control}--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --#{$form-control}--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
-  --#{$form-control}--m-error--PaddingRight: var(--pf-t--global--spacer--xl);
+  --#{$form-control}--m-error--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--#{$form-control}--ColumnGap));
   --#{$form-control}--m-error--icon--width: var(--#{$form-control}--FontSize);
 
   // custom icon

package/components/InputGroup/input-group.css

@@ -1,32 +1,37 @@
+:root,
 .pf-v5-c-input-group {
-  --pf-v5-c-input-group--child--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-input-group__item--offset: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-input-group__item--MarginLeft: calc(var(--pf-v5-c-input-group__item--offset) * -1);
-  --pf-v5-c-input-group__item--BorderWidth--base: var(--pf-v5-c-input-group__item--offset);
-  --pf-v5-c-input-group__item--BorderColor--base: var(--pf-v5-global--BorderColor--300);
-  --pf-v5-c-input-group__item--BorderColor--accent: var(--pf-v5-global--BorderColor--200);
+  --pf-v5-c-input-group--Gap: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-input-group__item--offset: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-input-group__item--BorderWidth--base: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-input-group__item--BorderColor--base: var(--pf-t--global--border--color--default);
   --pf-v5-c-input-group__item--BackgroundColor: transparent;
-  --pf-v5-c-input-group__item--m-box--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-input-group__item--m-box--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-input-group__item--m-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-input-group__item--m-box--BorderWidth: var(--pf-v5-c-input-group__item--offset);
+  --pf-v5-c-input-group__item--AlignItems: start;
+  --pf-v5-c-input-group__item--m-box--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-input-group__item--m-box--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-input-group__item--m-box--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-input-group__item--m-box--BorderWidth: var(--pf-v5-c-input-group__item--BorderWidth--base);
+  --pf-v5-c-input-group__item--m-box--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v5-c-input-group__item--m-box--BorderTopColor: var(--pf-v5-c-input-group__item--BorderColor--base);
   --pf-v5-c-input-group__item--m-box--BorderRightColor: var(--pf-v5-c-input-group__item--BorderColor--base);
-  --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-c-input-group__item--BorderColor--accent);
+  --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-c-input-group__item--BorderColor--base);
   --pf-v5-c-input-group__item--m-box--BorderLeftColor: var(--pf-v5-c-input-group__item--BorderColor--base);
   --pf-v5-c-input-group__item--m-plain--BackgroundColor: transparent;
-  --pf-v5-c-input-group__text--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-input-group__text--Color: var(--pf-v5-global--Color--dark-200);
-  --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-v5-global--disabled-color--100);
-  --pf-v5-c-input-group__item--m-disabled--BorderBottomColor: transparent;
-  --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
+  --pf-v5-c-input-group__text--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v5-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
+  --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+}
+
+.pf-v5-c-input-group {
   display: flex;
+  gap: var(--pf-v5-c-input-group--Gap);
   width: 100%;
 }
 
 .pf-v5-c-input-group__item {
   position: relative;
   display: flex;
+  align-items: var(--pf-v5-c-input-group__item--AlignItems);
   min-width: var(--pf-v5-c-input-group__item--MinWidth, revert);
   max-width: var(--pf-v5-c-input-group__item--MaxWidth, revert);
   background-color: var(--pf-v5-c-input-group__item--BackgroundColor);
@@ -35,9 +40,6 @@
   border-inline-start-color: var(--pf-v5-c-input-group__item--m-box--BorderLeftColor);
   border-inline-end-color: var(--pf-v5-c-input-group__item--m-box--BorderRightColor);
 }
-.pf-v5-c-input-group__item:where(:not(:first-child)) {
-  margin-inline-start: var(--pf-v5-c-input-group__item--MarginLeft);
-}
 .pf-v5-c-input-group__item.pf-m-box {
   --pf-v5-c-input-group__item--BackgroundColor: var(--pf-v5-c-input-group__item--m-box--BackgroundColor);
   padding-inline-start: var(--pf-v5-c-input-group__item--m-box--PaddingLeft);
@@ -47,15 +49,14 @@
   border-block-end-color: var(--pf-v5-c-input-group__item--m-box--BorderBottomColor);
   border-inline-start-color: var(--pf-v5-c-input-group__item--m-box--BorderLeftColor);
   border-inline-end-color: var(--pf-v5-c-input-group__item--m-box--BorderRightColor);
+  border-radius: var(--pf-v5-c-input-group__item--m-box--BorderRadius);
 }
 .pf-v5-c-input-group__item.pf-m-plain {
-  --pf-v5-c-input-group__item--MarginLeft: 0;
   --pf-v5-c-input-group__item--BackgroundColor: var(--pf-v5-c-input-group__item--m-plain--BackgroundColor);
   border: none;
 }
 .pf-v5-c-input-group__item.pf-m-disabled {
   --pf-v5-c-input-group__item--BackgroundColor: var(--pf-v5-c-input-group__item--m-disabled--BackgroundColor);
-  --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-c-input-group__item--m-disabled--BorderBottomColor);
   --pf-v5-c-input-group__text--Color: var(--pf-v5-c-input-group__item--m-disabled__text--Color);
 }
 .pf-v5-c-input-group__item.pf-m-fill {
@@ -69,21 +70,4 @@
 }
 label.pf-v5-c-input-group__text {
   cursor: pointer;
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-input-group {
-  --pf-v5-c-input-group__item--BorderLeftWidth: var(--pf-v5-c-input-group__item--BorderWidth--base);
-  --pf-v5-c-input-group__item--BorderLeftColor: var(--pf-v5-global--palette--black-700);
-  --pf-v5-c-input-group__item--m-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-  --pf-v5-c-input-group__item--m-box--BorderTopColor: transparent;
-  --pf-v5-c-input-group__item--m-box--BorderRightColor: transparent;
-  --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
-  --pf-v5-c-input-group__item--m-box--BorderLeftColor: transparent;
-  --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
-  --pf-v5-c-input-group__item--m-disabled--BorderBottomColor: transparent;
-  --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-v5-global--disabled-color--300);
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-input-group > * + * {
-  --pf-v5-c-input-group__item--m-box--BorderLeftColor: var(--pf-v5-c-input-group__item--BorderLeftColor);
-  border-inline-start: var(--pf-v5-c-input-group__item--BorderLeftWidth) solid var(--pf-v5-c-input-group__item--BorderLeftColor);
 }

package/components/InputGroup/input-group.scss

@@ -1,46 +1,49 @@
 // @debug $input-group; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
+:root,
 .#{$input-group} {
-  // Input group
-  --#{$input-group}--child--ZIndex: var(--#{$pf-global}--ZIndex--xs);
+  --#{$input-group}--Gap: var(--pf-t--global--spacer--xs);
 
   // Input group item
-  --#{$input-group}__item--offset: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$input-group}__item--MarginLeft: calc(var(--#{$input-group}__item--offset) * -1);
-  --#{$input-group}__item--BorderWidth--base: var(--#{$input-group}__item--offset);
-  --#{$input-group}__item--BorderColor--base: var(--#{$pf-global}--BorderColor--300);
-  --#{$input-group}__item--BorderColor--accent: var(--#{$pf-global}--BorderColor--200);
+  --#{$input-group}__item--offset: var(--pf-t--global--border--width--control--default);
+  --#{$input-group}__item--BorderWidth--base: var(--pf-t--global--border--width--control--default);
+  --#{$input-group}__item--BorderColor--base: var(--pf-t--global--border--color--default);
   --#{$input-group}__item--BackgroundColor: transparent;
+  --#{$input-group}__item--AlignItems: start;
 
   // Input group item, box variant
-  --#{$input-group}__item--m-box--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$input-group}__item--m-box--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$input-group}__item--m-box--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$input-group}__item--m-box--BorderWidth: var(--#{$input-group}__item--offset);
+  --#{$input-group}__item--m-box--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$input-group}__item--m-box--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$input-group}__item--m-box--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$input-group}__item--m-box--BorderWidth: var(--#{$input-group}__item--BorderWidth--base);
+  --#{$input-group}__item--m-box--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$input-group}__item--m-box--BorderTopColor: var(--#{$input-group}__item--BorderColor--base);
   --#{$input-group}__item--m-box--BorderRightColor: var(--#{$input-group}__item--BorderColor--base);
-  --#{$input-group}__item--m-box--BorderBottomColor: var(--#{$input-group}__item--BorderColor--accent);
+  --#{$input-group}__item--m-box--BorderBottomColor: var(--#{$input-group}__item--BorderColor--base);
   --#{$input-group}__item--m-box--BorderLeftColor: var(--#{$input-group}__item--BorderColor--base);
 
   // Input group item, plain variant
   --#{$input-group}__item--m-plain--BackgroundColor: transparent;
 
   // Input group text
-  --#{$input-group}__text--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$input-group}__text--Color: var(--#{$pf-global}--Color--dark-200);
+  --#{$input-group}__text--FontSize: var(--pf-t--global--font--size--body--default);
+  --#{$input-group}__text--Color: var(--pf-t--global--text--color--regular);
 
   // Input group text, disabled variant
-  --#{$input-group}__item--m-disabled__text--Color: var(--#{$pf-global}--disabled-color--100);
-  --#{$input-group}__item--m-disabled--BorderBottomColor: transparent;
-  --#{$input-group}__item--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
+  --#{$input-group}__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
+  --#{$input-group}__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+}
 
+.#{$input-group} {
   display: flex;
+  gap: var(--#{$input-group}--Gap);
   width: 100%;
 }
 
 .#{$input-group}__item {
   position: relative; // stack items without explicit z-index
   display: flex;
+  align-items: var(--#{$input-group}__item--AlignItems);
   min-width: var(--#{$input-group}__item--MinWidth, revert);
   max-width: var(--#{$input-group}__item--MaxWidth, revert);
   background-color: var(--#{$input-group}__item--BackgroundColor);
@@ -49,10 +52,6 @@
   border-inline-start-color: var(--#{$input-group}__item--m-box--BorderLeftColor);
   border-inline-end-color: var(--#{$input-group}__item--m-box--BorderRightColor);
 
-  &:where(:not(:first-child)) {
-    margin-inline-start: var(--#{$input-group}__item--MarginLeft);
-  }
-
   &.pf-m-box {
     --#{$input-group}__item--BackgroundColor: var(--#{$input-group}__item--m-box--BackgroundColor);
 
@@ -63,10 +62,10 @@
     border-block-end-color: var(--#{$input-group}__item--m-box--BorderBottomColor);
     border-inline-start-color: var(--#{$input-group}__item--m-box--BorderLeftColor);
     border-inline-end-color: var(--#{$input-group}__item--m-box--BorderRightColor);
+    border-radius: var(--#{$input-group}__item--m-box--BorderRadius);
   }
 
   &.pf-m-plain {
-    --#{$input-group}__item--MarginLeft: 0;
     --#{$input-group}__item--BackgroundColor: var(--#{$input-group}__item--m-plain--BackgroundColor);
 
     border: none;
@@ -74,7 +73,6 @@
 
   &.pf-m-disabled {
     --#{$input-group}__item--BackgroundColor: var(--#{$input-group}__item--m-disabled--BackgroundColor);
-    --#{$input-group}__item--m-box--BorderBottomColor: var(--#{$input-group}__item--m-disabled--BorderBottomColor);
     --#{$input-group}__text--Color: var(--#{$input-group}__item--m-disabled__text--Color);
   }
 
@@ -93,9 +91,3 @@
   }
 }
 
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/input-group";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-input-group;
-}

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.0.0-alpha.51",
+  "version": "6.0.0-alpha.53",
   "keywords": [],
   "license": "MIT",
   "scripts": {