@patternfly/react-styles 6.0.0-alpha.31 → 6.0.0-alpha.33

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-alpha.33](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.32...@patternfly/react-styles@6.0.0-alpha.33) (2024-07-29)
+
+### Bug Fixes
+
+- **deps:** bump v6 alphas ([#10816](https://github.com/patternfly/patternfly-react/issues/10816)) ([d99aa9b](https://github.com/patternfly/patternfly-react/commit/d99aa9b3157f4559a8741415528832946aa32ddf))
+
+# [6.0.0-alpha.32](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.31...@patternfly/react-styles@6.0.0-alpha.32) (2024-07-29)
+
+### Features
+
+- **Masthead:** Updates for new masthead structure in Penta ([#10809](https://github.com/patternfly/patternfly-react/issues/10809)) ([266ee47](https://github.com/patternfly/patternfly-react/commit/266ee476020c51487ae4d426fdab90efc73d12f1))
+
 # [6.0.0-alpha.31](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.30...@patternfly/react-styles@6.0.0-alpha.31) (2024-07-29)
 
 ### Features

package/css/components/Alert/alert.css

@@ -14,14 +14,14 @@
   --pf-v6-c-alert--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-alert--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-alert--FontSize: var(--pf-t--global--font--size--body--default);
-  --pf-v6-c-alert__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
-  --pf-v6-c-alert__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-alert__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
+  --pf-v6-c-alert__toggle--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
   --pf-v6-c-alert__toggle--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-alert__toggle-icon--Rotate: 0;
   --pf-v6-c-alert__toggle-icon--Transition: var(--pf-t--global--transition);
   --pf-v6-c-alert__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-alert__icon--MarginBlockStart: 0.25rem;
-  --pf-v6-c-alert__icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-alert__icon--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-alert__icon--FontSize: var(--pf-t--global--icon--size--md);
   --pf-v6-c-alert__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-alert__title--Color: var(--pf-t--global--text--color--regular);

package/css/components/Button/button.css

@@ -3,10 +3,10 @@
   --pf-v6-c-button--AlignItems: baseline;
   --pf-v6-c-button--JustifyContent: center;
   --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
-  --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
+  --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
+  --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
+  --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
   --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -65,8 +65,8 @@
   --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
   --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
-  --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
+  --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
   --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
   --pf-v6-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
@@ -103,17 +103,15 @@
   --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
   --pf-v6-c-button--span--m-link--m-inline--Display: inline;
-  --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
+  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
-  --pf-v6-c-button--m-plain--PaddingBlockStart: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-button--m-plain--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-button--m-plain--Color: var(--pf-t--global--text--color--regular);
-  --pf-v6-c-button--m-plain__icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
+  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
+  --pf-v6-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v6-c-button--m-plain__icon--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
-  --pf-v6-c-button--m-plain--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--m-plain--PaddingBlockStart) + var(--pf-v6-c-button--m-plain--PaddingBlockEnd));
+  --pf-v6-c-button--m-plain--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
   --pf-v6-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
@@ -121,10 +119,8 @@
   --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
   --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent;
-  --pf-v6-c-button--m-plain--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-button--m-plain--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-button--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+  --pf-v6-c-button--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
   --pf-v6-c-button--m-plain--m-no-padding--MinWidth: auto;
   --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: 0;
   --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: 0;
@@ -135,8 +131,8 @@
   --pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
   --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
   --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
-  --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
+  --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
   --pf-v6-c-button--m-control--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --pf-v6-c-button--m-control--BorderColor: var(--pf-t--global--border--color--default);
@@ -153,8 +149,8 @@
   --pf-v6-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
   --pf-v6-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
-  --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
+  --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
   --pf-v6-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -197,16 +193,16 @@
   --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
   --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
   --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
-  --pf-v6-c-button--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-button--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--spacious);
+  --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
+  --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
+  --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
   --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
-  --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-button--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
+  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
+  --pf-v6-c-button--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
+  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
   --pf-v6-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --pf-v6-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --pf-v6-c-button--disabled--BorderColor: transparent;
@@ -223,12 +219,12 @@
   --pf-v6-c-button__progress--TranslateY: -50%;
   --pf-v6-c-button__progress--TranslateX: 0;
   --pf-v6-c-button__progress--InsetBlockStart: 50%;
-  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
   --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
-  --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
-  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
-  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width));
+  --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
+  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
+  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
+  --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width));
   --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-v6-c-spinner--Color);
   --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
   --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
@@ -467,9 +463,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--Color: var(--pf-v6-c-button--m-plain--Color);
   --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain__icon--Color);
   --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
-  --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-plain--PaddingBlockStart);
   --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd);
-  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--PaddingBlockEnd);
   --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart);
   --pf-v6-c-button__progress--Color: var(--pf-v6-c-button--m-in-progress--m-plain--Color);
   --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-plain--hover--Color);
@@ -479,9 +473,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-plain--disabled--Color);
   --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-plain--disabled__icon--Color);
   --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
-  --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-small--PaddingBlockStart);
   --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
-  --pf-v6-c-button--m-small--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingBlockEnd);
   --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart);
   min-width: var(--pf-v6-c-button--m-plain--MinWidth);
 }
@@ -489,9 +481,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--BackgroundColor);
   --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor);
   --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor);
-  --pf-v6-c-button--m-plain--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart);
+  --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart);
+  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd);
   --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd);
-  --pf-v6-c-button--m-plain--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd);
   --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart);
   min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
 }

package/css/components/Card/card.css

@@ -24,7 +24,7 @@
   --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);
-  --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
   --pf-v6-c-card__header-toggle-icon--Transition: var(--pf-t--global--transition);
@@ -67,8 +67,8 @@
   --pf-v6-c-card--m-full-height--Height: 100%;
   --pf-v6-c-card--m-plain--BorderColor: transparent;
   --pf-v6-c-card--m-plain--BackgroundColor: transparent;
-  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--compact) * -1);
-  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
+  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
 }
 
 .pf-v6-c-card {

package/css/components/DataList/data-list.css

@@ -439,7 +439,7 @@
   --pf-v6-c-data-list--cell--WhiteSpace: normal;
   --pf-v6-c-data-list--cell--WordBreak: normal;
   --pf-v6-c-data-list--cell--m-truncate--MinWidth: 5ch;
-  --pf-v6-c-data-list__toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--sm) * -1);
+  --pf-v6-c-data-list__toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
   --pf-v6-c-data-list__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-data-list__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-data-list__toggle-icon--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));

package/css/components/Form/form.css

@@ -55,8 +55,8 @@
   --pf-v6-c-form__field-group__field-group__field-group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-form__field-group-header-toggle--BorderWidth--base: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth: var(--pf-v6-c-form__field-group-header-toggle--BorderWidth--base);
-  --pf-v6-c-form__field-group-toggle-button--MarginBlockStart: calc(var(--pf-v6-c-button--m-plain--PaddingBlockStart) * -1);
-  --pf-v6-c-form__field-group-toggle-button--MarginBlockEnd: calc(var(--pf-v6-c-button--m-plain--PaddingBlockEnd) * -1);
+  --pf-v6-c-form__field-group-toggle-button--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+  --pf-v6-c-form__field-group-toggle-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
   --pf-v6-c-form__field-group-toggle-icon--Transition: var(--pf-t--global--transition);
   --pf-v6-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-form__field-group-toggle-icon--Rotate: 0;

package/css/components/FormControl/form-control.css

@@ -14,7 +14,7 @@
   --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
   --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --pf-v6-c-form-control--Width: 100%;
-  --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--md);
+  --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
   --pf-v6-c-form-control--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
   --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
   --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
@@ -40,35 +40,34 @@
   --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
   --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-form-control--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
-  --pf-v6-c-form-control--m-success--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-form-control--ColumnGap));
+  --pf-v6-c-form-control--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--ColumnGap));
   --pf-v6-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-form-control--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
-  --pf-v6-c-form-control--m-warning--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-form-control--ColumnGap));
+  --pf-v6-c-form-control--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--ColumnGap));
   --pf-v6-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-form-control--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
-  --pf-v6-c-form-control--m-error--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-form-control--ColumnGap));
+  --pf-v6-c-form-control--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--ColumnGap));
   --pf-v6-c-form-control--m-error--icon--width: var(--pf-v6-c-form-control--FontSize);
   --pf-v6-c-form-control--m-icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
   --pf-v6-c-form-control--m-icon--icon--width: var(--pf-v6-c-form-control--FontSize);
-  --pf-v6-c-form-control--m-icon--icon--spacer: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-form-control--m-icon--icon--spacer: calc(var(--pf-t--global--spacer--control--horizontal--default) / 2);
   --pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-error--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
-  --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
-  --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
+  --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
+  --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
+  --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
+  --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
+  --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
   --pf-v6-c-form-control--textarea--Width: var(--pf-v6-c-form-control--Width);
   --pf-v6-c-form-control--textarea--Height: auto;
-  --pf-v6-c-form-control__icon--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-form-control__icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v6-c-form-control__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
   --pf-v6-c-form-control__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
   --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--PaddingBlockStart: var(--pf-v6-c-form-control--inset--base);
+  --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--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
   --pf-v6-c-form-control__toggle-icon--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
   --pf-v6-c-form-control__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -236,7 +235,7 @@
 }
 
 .pf-v6-c-form-control__icon {
-  padding-block-start: var(--pf-v6-c-form-control__icon--PaddingBlockStart);
+  font-size: var(--pf-v6-c-form-control__icon--FontSize);
   color: var(--pf-v6-c-form-control__icon--Color);
 }
 .pf-v6-c-form-control__icon.pf-m-status {
@@ -246,7 +245,6 @@
 .pf-v6-c-form-control__toggle-icon {
   grid-row: 1/2;
   grid-column: 3;
-  padding-block-start: var(--pf-v6-c-form-control__toggle-icon--PaddingBlockStart);
   padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd);
   color: var(--pf-v6-c-form-control__toggle-icon--Color);
@@ -259,6 +257,7 @@
   grid-row: 1/2;
   grid-column: 2;
   gap: var(--pf-v6-c-form-control__utilities--Gap);
+  padding-block-start: var(--pf-v6-c-form-control__utilities--PaddingBlockStart);
   padding-inline-end: var(--pf-v6-c-form-control__utilities--PaddingInlineEnd);
   pointer-events: none;
 }