@patternfly/patternfly 6.0.0-prerelease.4 → 6.0.0-prerelease.5

package/base/patternfly-variables.css

@@ -829,6 +829,9 @@
     var(--pf-t--global--box-shadow--color--lg);
   --pf-t--global--list-style: disc outside;
   --pf-t--temp--dev--tbd: #BC11E0;
+  --pf-t--global--spacer--gap--group-to-group--horizontal--compact: var(--pf-t--global--spacer--sm);
+  --pf-t--global--spacer--gap--group-to-group--vertical--compact: var(--pf-t--global--spacer--md);
+  --pf-t--global--spacer--gap--text-to-element--compact: var(--pf-t--global--spacer--xs);
 }
 
 :root:where(.pf-v6-theme-dark) {

package/base/tokens/tokens-local.scss

@@ -125,4 +125,7 @@
   --pf-t--temp--dev--tbd: #BC11E0;
   
   // styleline-enable custom-property-pattern
+  --pf-t--global--spacer--gap--group-to-group--horizontal--compact: var(--pf-t--global--spacer--sm);
+  --pf-t--global--spacer--gap--group-to-group--vertical--compact: var(--pf-t--global--spacer--md);
+  --pf-t--global--spacer--gap--text-to-element--compact: var(--pf-t--global--spacer--xs);
 }

package/components/Accordion/accordion.css

@@ -4,7 +4,7 @@
   --pf-v6-c-accordion--RowGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-accordion__item--BorderRadius: var(--pf-t--global--border--radius--200);
   --pf-v6-c-accordion__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
-  --pf-v6-c-accordion__toggle--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-accordion__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-accordion__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-accordion__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -13,7 +13,7 @@
   --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --pf-v6-c-accordion__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
-  --pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-accordion__toggle-text--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
   --pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--bold);

package/components/Accordion/accordion.scss

@@ -3,14 +3,14 @@
 @include pf-root($accordion) {
   // accordion
   --#{$accordion}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --#{$accordion}--RowGap: var(--pf-t--global--spacer--xs);
+  --#{$accordion}--RowGap: var(--pf-t--global--spacer--xs); // No applicable spacer
 
   // accordion item
   --#{$accordion}__item--BorderRadius: var(--pf-t--global--border--radius--200);
   --#{$accordion}__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
 
   // accordion toggle
-  --#{$accordion}__toggle--ColumnGap: var(--pf-t--global--spacer--sm);
+  --#{$accordion}__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --#{$accordion}__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --#{$accordion}__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --#{$accordion}__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -21,7 +21,8 @@
   --#{$accordion}__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
 
   // Accordion toggle toggle-start modifier
-  --#{$accordion}--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--md);
+  // This decreases the gap between icon and text, alternative is calc it to * 2 the token or create a new token
+  --#{$accordion}--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
 
   // accordion toggle text
   --#{$accordion}__toggle-text--Color: var(--pf-t--global--text--color--regular);

package/components/CalendarMonth/calendar-month.css

@@ -7,7 +7,7 @@
   --pf-v6-c-calendar-month--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-calendar-month--FontSize: var(--pf-t--global--font--size--sm);
   --pf-v6-c-calendar-month__header--MarginBlockEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-calendar-month__header--Gap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-calendar-month__header--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
   --pf-v6-c-calendar-month__header-year--Width: 9ch;
   --pf-v6-c-calendar-month__header-nav-control--MarginInlineEnd: 0;
   --pf-v6-c-calendar-month__header-nav-control--MarginInlineStart: 0;

package/components/CalendarMonth/calendar-month.scss

@@ -10,7 +10,7 @@
 
   // header
   --#{$calendar-month}__header--MarginBlockEnd: var(--pf-t--global--spacer--md);
-  --#{$calendar-month}__header--Gap: var(--pf-t--global--spacer--xs);
+  --#{$calendar-month}__header--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
   --#{$calendar-month}__header-year--Width: 9ch;
   --#{$calendar-month}__header-nav-control--MarginInlineEnd: 0;
   --#{$calendar-month}__header-nav-control--MarginInlineStart: 0;

package/components/Card/card.css

@@ -21,7 +21,7 @@
   --pf-v6-c-card__footer--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-card__footer--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-card__actions--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
   --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);

package/components/Card/card.scss

@@ -22,7 +22,7 @@
   --#{$card}__footer--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$card}__footer--Color: var(--pf-t--global--text--color--subtle);
   --#{$card}__actions--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --#{$card}__actions--Gap: var(--pf-t--global--spacer--sm);
+  --#{$card}__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
   --#{$card}__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --#{$card}__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
 

package/components/Check/check.css

@@ -1,6 +1,6 @@
 :root,
 .pf-v6-c-check {
-  --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
+  --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-check--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
   --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);

package/components/Check/check.scss

@@ -1,7 +1,7 @@
 @use '../../sass-utilities' as *;
 
 @include pf-root($check) {
-  --#{$check}--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
+  --#{$check}--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
   --#{$check}--AccentColor: var(--pf-t--global--color--brand--default);
   --#{$check}--MinHeight: calc(var(--#{$check}__label--FontSize) * var(--#{$check}__label--LineHeight));
 

package/components/ClipboardCopy/clipboard-copy.css

@@ -15,12 +15,12 @@
   --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
   --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-clipboard-copy__actions--Gap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-clipboard-copy__actions--MarginInlineStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-clipboard-copy__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
+  --pf-v6-c-clipboard-copy__actions--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--compact);
   --pf-v6-c-clipboard-copy__actions-item--button--Color: var(--pf-t--global--icon--color--subtle);
   --pf-v6-c-clipboard-copy__actions-item--button--hover--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-clipboard-copy__text--m-code--FontFamily: var(--pf-t--global--font--family--mono);

package/components/ClipboardCopy/clipboard-copy.scss

@@ -21,14 +21,14 @@
   --#{$clipboard-copy}__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
 
   // Group
-  --#{$clipboard-copy}__group--Gap: var(--pf-t--global--spacer--xs);
+  --#{$clipboard-copy}__group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
 
   // Inline
   --#{$clipboard-copy}--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
   --#{$clipboard-copy}--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
   --#{$clipboard-copy}--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --#{$clipboard-copy}__actions--Gap: var(--pf-t--global--spacer--sm);
-  --#{$clipboard-copy}__actions--MarginInlineStart: var(--pf-t--global--spacer--xs);
+  --#{$clipboard-copy}__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
+  --#{$clipboard-copy}__actions--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--compact);
   --#{$clipboard-copy}__actions-item--button--Color: var(--pf-t--global--icon--color--subtle);
   --#{$clipboard-copy}__actions-item--button--hover--Color: var(--pf-t--global--icon--color--regular);
 

package/components/CodeEditor/code-editor.css

@@ -1,7 +1,7 @@
 :root,
 .pf-v6-c-code-editor {
   --pf-v6-c-code-editor__controls--PaddingInlineStart: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-code-editor__controls--Gap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-code-editor__controls--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
   --pf-v6-c-code-editor__header--before--BorderBlockEndWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-code-editor__header--before--BorderBlockEndColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-code-editor__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default);

package/components/CodeEditor/code-editor.scss

@@ -3,7 +3,7 @@
 @include pf-root($code-editor) {
   // controls
   --#{$code-editor}__controls--PaddingInlineStart: var(--pf-t--global--spacer--sm);
-  --#{$code-editor}__controls--Gap: var(--pf-t--global--spacer--xs);
+  --#{$code-editor}__controls--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
 
   // header
   --#{$code-editor}__header--before--BorderBlockEndWidth: var(--pf-t--global--border--width--box--default);

package/components/DescriptionList/description-list.css

@@ -1,17 +1,17 @@
 :root,
 .pf-v6-c-description-list {
-  --pf-v6-c-description-list--RowGap: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-description-list--ColumnGap: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-description-list--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical);
+  --pf-v6-c-description-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal);
   --pf-v6-c-description-list--GridTemplateColumns--count: 1;
   --pf-v6-c-description-list--GridTemplateColumns--width: 1fr;
   --pf-v6-c-description-list--GridTemplateColumns--min: 0;
-  --pf-v6-c-description-list__group--RowGap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-description-list__group--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-description-list__group--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
+  --pf-v6-c-description-list__group--ColumnGap: var(--pf-t--global--spacer--gap--group--horizontal);
   --pf-v6-c-description-list__group--GridTemplateColumns: auto;
   --pf-v6-c-description-list__group--GridTemplateRows: auto 1fr;
   --pf-v6-c-description-list__group--GridColumn: auto;
-  --pf-v6-c-description-list--m-compact--RowGap: var(--pf-t--global--spacer--md);
-  --pf-v6-c-description-list--m-compact--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-description-list--m-compact--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--compact);
+  --pf-v6-c-description-list--m-compact--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal--compact);
   --pf-v6-c-description-list__term--Display: inline;
   --pf-v6-c-description-list__term--sm--Display: flex;
   --pf-v6-c-description-list__term--FontWeight: var(--pf-t--global--font--weight--body--bold);

package/components/DescriptionList/description-list.scss

@@ -3,22 +3,22 @@
 $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 
 @include pf-root($description-list) {
-  --#{$description-list}--RowGap: var(--pf-t--global--spacer--lg);
-  --#{$description-list}--ColumnGap: var(--pf-t--global--spacer--lg);
+  --#{$description-list}--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical);
+  --#{$description-list}--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal);
   --#{$description-list}--GridTemplateColumns--count: 1;
   --#{$description-list}--GridTemplateColumns--width: 1fr;
   --#{$description-list}--GridTemplateColumns--min: 0;
 
   // group
-  --#{$description-list}__group--RowGap: var(--pf-t--global--spacer--sm);
-  --#{$description-list}__group--ColumnGap: var(--pf-t--global--spacer--sm);
+  --#{$description-list}__group--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
+  --#{$description-list}__group--ColumnGap: var(--pf-t--global--spacer--gap--group--horizontal); // Increases current Gap
   --#{$description-list}__group--GridTemplateColumns: auto;
   --#{$description-list}__group--GridTemplateRows: auto 1fr;
   --#{$description-list}__group--GridColumn: auto;
 
   // compact
-  --#{$description-list}--m-compact--RowGap: var(--pf-t--global--spacer--md);
-  --#{$description-list}--m-compact--ColumnGap: var(--pf-t--global--spacer--sm);
+  --#{$description-list}--m-compact--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--compact);
+  --#{$description-list}--m-compact--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal--compact);
 
   // term
   --#{$description-list}__term--Display: inline;

package/components/Drawer/drawer.css

@@ -32,7 +32,7 @@
   --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
   --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
   --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
-  --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--md);

package/components/Drawer/drawer.scss

@@ -45,7 +45,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   --#{$drawer}--m-panel-bottom__panel--m-resizable--MinHeight: #{pf-size-prem(24px)};
 
   // Drawer panel head
-  --#{$drawer}__head--ColumnGap: var(--pf-t--global--spacer--sm);
+  --#{$drawer}__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --#{$drawer}__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --#{$drawer}__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --#{$drawer}__head--PaddingInlineStart: var(--pf-t--global--spacer--md);

package/components/DualListSelector/dual-list-selector.css

@@ -44,7 +44,7 @@
   --pf-v6-c-dual-list-selector__status-text--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-dual-list-selector__controls--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-dual-list-selector__controls--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-dual-list-selector__controls--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-dual-list-selector__controls--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
   --pf-v6-c-dual-list-selector__controls--MarginBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-dual-list-selector__item-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: 0;

package/components/DualListSelector/dual-list-selector.scss

@@ -66,7 +66,7 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
   // Controls
   --#{$dual-list-selector}__controls--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --#{$dual-list-selector}__controls--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --#{$dual-list-selector}__controls--Gap: var(--pf-t--global--spacer--sm);
+  --#{$dual-list-selector}__controls--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
   --#{$dual-list-selector}__controls--MarginBlockStart: var(--pf-t--global--spacer--md);
 
   // Toggle

package/components/FileUpload/file-upload.css

@@ -1,6 +1,6 @@
 :root,
 .pf-v6-c-file-upload {
-  --pf-v6-c-file-upload--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-file-upload--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
   --pf-v6-c-file-upload--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-file-upload--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-file-upload--PaddingInlineStart: var(--pf-t--global--spacer--sm);

package/components/FileUpload/file-upload.scss

@@ -1,7 +1,7 @@
 @use '../../sass-utilities' as *;
 
 @include pf-root($file-upload) {
-  --#{$file-upload}--RowGap: var(--pf-t--global--spacer--sm);
+  --#{$file-upload}--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
   --#{$file-upload}--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --#{$file-upload}--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --#{$file-upload}--PaddingInlineStart: var(--pf-t--global--spacer--sm);

package/components/Form/form.css

@@ -1,10 +1,10 @@
 :root,
 .pf-v6-c-form {
-  --pf-v6-c-form--GridGap: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-form__group--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-form--GridGap: var(--pf-t--global--spacer--gap--group-to-group--vertical);
+  --pf-v6-c-form__group--Gap: var(--pf-t--global--spacer--gap--group--vertical);
   --pf-v6-c-form__group--m-action--MarginBlockStart: var(--pf-t--global--spacer--xl);
   --pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth: 9.375rem;
-  --pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap: var(--pf-t--global--spacer--gap--group--horizontal);
   --pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth: 1fr;
   --pf-v6-c-form--m-limit-width--MaxWidth: 55rem;
   --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: calc((((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) + (2 * var(--pf-t--global--border--width--control--default))) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)) - ((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) + var(--pf-t--global--border--width--control--default));
@@ -21,13 +21,12 @@
   --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
   --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
-  --pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--horizontal);
   --pf-v6-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
-  --pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-form__group-control--m-inline--child--MarginInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--group--vertical);
+  --pf-v6-c-form__group-control--m-inline--Gap: var(--pf-t--global--spacer--gap--group--horizontal);
   --pf-v6-c-form__group-control__helper-text--MarginBlockEnd: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-form__group-control--Gap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-form__group-control--m-stack--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-form__group-control--m-stack--Gap: var(--pf-t--global--spacer--gap--group--vertical);
   --pf-v6-c-form__group-control--m-stack__helper-text--MarginBlockStart: calc(var(--pf-v6-c-form__group-control--m-stack--Gap) * -1 + var(--pf-v6-c-form__helper-text--MarginBlockStart--base));
   --pf-v6-c-form__actions--child--MarginBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-form__actions--child--MarginInlineEnd: var(--pf-t--global--spacer--sm);
@@ -40,7 +39,7 @@
   --pf-v6-c-form__helper-text--MarginBlockStart--base: var(--pf-t--global--spacer--xs);
   --pf-v6-c-form__helper-text--MarginBlockStart: var(--pf-v6-c-form__helper-text--MarginBlockStart--base);
   --pf-v6-c-form__section--MarginBlockStart: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-form__section--Gap: var(--pf-t--global--spacer--md);
+  --pf-v6-c-form__section--Gap: var(--pf-v6-c-form--GridGap);
   --pf-v6-c-form__section-title--FontSize: var(--pf-t--global--font--size--heading--xs);
   --pf-v6-c-form__section-title--FontWeight: var(--pf-t--global--font--weight--heading--default);
   --pf-v6-c-form__section-title--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
@@ -368,12 +367,7 @@
 .pf-v6-c-form__group-control.pf-m-inline {
   display: flex;
   flex-flow: row wrap;
-}
-.pf-v6-c-form__group-control.pf-m-inline > * {
-  margin-inline-end: var(--pf-v6-c-form__group-control--m-inline--child--MarginInlineEnd);
-}
-.pf-v6-c-form__group-control.pf-m-inline > :last-child {
-  --pf-v6-c-form__group-control--m-inline--child--MarginInlineEnd: 0;
+  gap: var(--pf-v6-c-form__group-control--m-inline--Gap);
 }
 .pf-v6-c-form__group-control.pf-m-stack {
   --pf-v6-c-form__helper-text--MarginBlockStart: var(--pf-v6-c-form__group-control--m-stack__helper-text--MarginBlockStart);

package/components/Form/form.scss

@@ -26,13 +26,13 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 }
 
 @include pf-root($form) {
-  --#{$form}--GridGap: var(--pf-t--global--spacer--lg);
+  --#{$form}--GridGap: var(--pf-t--global--spacer--gap--group-to-group--vertical);
 
   // Group
-  --#{$form}__group--Gap: var(--pf-t--global--spacer--sm);
+  --#{$form}__group--Gap: var(--pf-t--global--spacer--gap--group--vertical);
   --#{$form}__group--m-action--MarginBlockStart: var(--pf-t--global--spacer--xl);
   --#{$form}--m-horizontal__group-label--md--GridColumnWidth: #{pf-size-prem(150px)};
-  --#{$form}--m-horizontal__group-label--md--GridColumnGap: var(--pf-t--global--spacer--md);
+  --#{$form}--m-horizontal__group-label--md--GridColumnGap: var(--pf-t--global--spacer--gap--group--horizontal);
   --#{$form}--m-horizontal__group-control--md--GridColumnWidth: 1fr;
 
   // limit width
@@ -85,15 +85,14 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   --#{$form}__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
 
   // Form group label info
-  --#{$form}__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
+  --#{$form}__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--horizontal);
   --#{$form}__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
-  --#{$form}--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
+  --#{$form}--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--group--vertical);
 
   // Group control
-  --#{$form}__group-control--m-inline--child--MarginInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$form}__group-control--m-inline--Gap: var(--pf-t--global--spacer--gap--group--horizontal);
   --#{$form}__group-control__helper-text--MarginBlockEnd: var(--pf-t--global--spacer--xs);
-  --#{$form}__group-control--Gap: var(--pf-t--global--spacer--sm);
-  --#{$form}__group-control--m-stack--Gap: var(--pf-t--global--spacer--sm);
+  --#{$form}__group-control--m-stack--Gap: var(--pf-t--global--spacer--gap--group--vertical);
   --#{$form}__group-control--m-stack__helper-text--MarginBlockStart: calc(var(--#{$form}__group-control--m-stack--Gap) * -1 + var(--#{$form}__helper-text--MarginBlockStart--base));
 
   // Actions
@@ -112,7 +111,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 
   // Section
   --#{$form}__section--MarginBlockStart: var(--pf-t--global--spacer--xl);
-  --#{$form}__section--Gap: var(--pf-t--global--spacer--md);
+  --#{$form}__section--Gap: var(--#{$form}--GridGap);
 
   // Section title
   --#{$form}__section-title--FontSize: var(--pf-t--global--font--size--heading--xs);
@@ -301,14 +300,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   &.pf-m-inline {
     display: flex;
     flex-flow: row wrap;
-
-    > * {
-      margin-inline-end: var(--#{$form}__group-control--m-inline--child--MarginInlineEnd);
-    }
-
-    > :last-child {
-      --#{$form}__group-control--m-inline--child--MarginInlineEnd: 0;
-    }
+    gap: var(--#{$form}__group-control--m-inline--Gap);
   }
 
   &.pf-m-stack {

package/components/FormControl/form-control.css

@@ -1,6 +1,6 @@
 :root,
 .pf-v6-c-form-control {
-  --pf-v6-c-form-control--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-form-control--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-form-control--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-form-control--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-form-control--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -65,7 +65,7 @@
   --pf-v6-c-form-control--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
   --pf-v6-c-form-control--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
   --pf-v6-c-form-control--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
-  --pf-v6-c-form-control__utilities--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-form-control__utilities--Gap: var(--pf-t--global--spacer--gap--group--horizontal);
   --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
   --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
   --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);

package/components/FormControl/form-control.scss

@@ -1,7 +1,7 @@
 @use '../../sass-utilities' as *;
 
 @include pf-root($form-control) {
-  --#{$form-control}--ColumnGap: var(--pf-t--global--spacer--sm);
+  --#{$form-control}--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --#{$form-control}--Color: var(--pf-t--global--text--color--regular);
   --#{$form-control}--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$form-control}--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -100,7 +100,7 @@
   --#{$form-control}--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
 
   // Form control utilities
-  --#{$form-control}__utilities--Gap: var(--pf-t--global--spacer--sm);
+  --#{$form-control}__utilities--Gap: var(--pf-t--global--spacer--gap--group--horizontal);
   --#{$form-control}__utilities--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
   --#{$form-control}__utilities--PaddingInlineEnd: var(--#{$form-control}--inset--base);
 

package/components/InputGroup/input-group.css

@@ -1,6 +1,6 @@
 :root,
 .pf-v6-c-input-group {
-  --pf-v6-c-input-group--Gap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-input-group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
   --pf-v6-c-input-group__item--offset: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-input-group__item--BorderWidth--base: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-input-group__item--BorderColor--base: var(--pf-t--global--border--color--default);

package/components/InputGroup/input-group.scss

@@ -1,7 +1,7 @@
 @use '../../sass-utilities' as *;
 
 @include pf-root($input-group) {
-  --#{$input-group}--Gap: var(--pf-t--global--spacer--xs);
+  --#{$input-group}--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
 
   // Input group item
   --#{$input-group}__item--offset: var(--pf-t--global--border--width--control--default);

package/components/Label/label.css

@@ -162,7 +162,7 @@
   --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
   --pf-v6-c-label__content--MaxWidth: 100%;
-  --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
   --pf-v6-c-label__content--Cursor: initial;
   --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
   --pf-v6-c-label__text--MaxWidth: 100%;

package/components/Label/label.scss

@@ -205,7 +205,7 @@
 
   // Content
   --#{$label}__content--MaxWidth: 100%;
-  --#{$label}__content--Gap: var(--pf-t--global--spacer--xs);
+  --#{$label}__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
   --#{$label}__content--Cursor: initial;
 
   // Icon