@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.70

package/components/Form/form.scss

@@ -24,13 +24,15 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   }
 }
 
+:root,
 .#{$form} {
-  --#{$form}--GridGap: var(--#{$pf-global}--gutter--md);
+  --#{$form}--GridGap: var(--pf-t--global--spacer--lg);
 
   // Group
-  --#{$form}__group--m-action--MarginTop: var(--#{$pf-global}--spacer--xl);
+  --#{$form}__group--Gap: var(--pf-t--global--spacer--sm);
+  --#{$form}__group--m-action--MarginTop: 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-global}--spacer--md);
+  --#{$form}--m-horizontal__group-label--md--GridColumnGap: var(--pf-t--global--spacer--md);
   --#{$form}--m-horizontal__group-control--md--GridColumnWidth: 1fr;
 
   // limit width
@@ -52,8 +54,8 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   // plus the border width used by the text inputs is 1px
   // So we need to adjust by 21 - 16.1 + 1 = 5.9px
 
-  --#{$form}--m-horizontal__group-label--md--PaddingTop: calc((((((var(--#{$pf-global}--FontSize--md) * var(--#{$pf-global}--LineHeight--md)) + (2 * var(--#{$pf-global}--BorderWidth--sm))) - var(--#{$pf-global}--FontSize--md)) / 2) + var(--#{$pf-global}--FontSize--md)) - ((((var(--#{$pf-global}--FontSize--sm) * var(--#{$pf-global}--LineHeight--sm)) - var(--#{$pf-global}--FontSize--sm)) / 2) + var(--#{$pf-global}--FontSize--sm)) + var(--#{$pf-global}--BorderWidth--sm));
-  --#{$form}__group-label--PaddingBottom: var(--#{$pf-global}--spacer--sm);
+  --#{$form}--m-horizontal__group-label--md--PaddingTop: 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));
+  --#{$form}__group-label--PaddingBottom: var(--pf-t--global--spacer--sm);
 
   // Use the no-padding modifier to align form groups that aren't text inputs
   // Use the formula above, except
@@ -62,130 +64,108 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   // - controls like checkboxes use the medium font and small line height
   // - This comes out to a difference of 2.3px.
   --#{$form}--m-horizontal__group-label--m-no-padding--md--PaddingTop: 0;
-  --#{$form}--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((var(--#{$pf-global}--FontSize--sm) * var(--#{$pf-global}--LineHeight--sm)) - var(--#{$pf-global}--FontSize--sm)) / 2) + var(--#{$pf-global}--FontSize--sm)) - ((((var(--#{$pf-global}--FontSize--md) * var(--#{$pf-global}--LineHeight--sm)) - var(--#{$pf-global}--FontSize--md)) / 2) + var(--#{$pf-global}--FontSize--md)));
+  --#{$form}--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((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--font--size--body--default) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)));
 
   // Label
-  --#{$form}__label--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$form}__label--LineHeight: var(--#{$pf-global}--LineHeight--sm);
-  --#{$form}__label--m-disabled--Color: var(--#{$pf-global}--disabled-color--100);
+  --#{$form}__label--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$form}__label--LineHeight: var(--pf-t--global--font--line-height--body);
+  --#{$form}__label--m-disabled--Color: var(--pf-t--global--text--color--disabled);
   --#{$form}__label--hover--Cursor: pointer;
   --#{$form}__label--m-disabled--hover--Cursor: not-allowed;
 
   // Label text
-  --#{$form}__label-text--FontWeight: var(--#{$pf-global}--FontWeight--bold);
+  --#{$form}__label-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
 
   // Required labels
-  --#{$form}__label-required--MarginLeft: var(--#{$pf-global}--spacer--xs);
-  --#{$form}__label-required--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$form}__label-required--Color: var(--#{$pf-global}--danger-color--100);
+  --#{$form}__label-required--MarginLeft: var(--pf-t--global--spacer--xs);
+  --#{$form}__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$form}__label-required--Color: var(--pf-t--global--color--status--danger--default);
 
   // Field level help
-  --#{$form}__group-label-help--BackgroundColor: transparent;
-  --#{$form}__group-label-help--PaddingTop: var(--#{$pf-global}--spacer--xs);
-  --#{$form}__group-label-help--PaddingRight: var(--#{$pf-global}--spacer--xs);
-  --#{$form}__group-label-help--PaddingBottom: var(--#{$pf-global}--spacer--xs);
-  --#{$form}__group-label-help--PaddingLeft: var(--#{$pf-global}--spacer--xs);
-  --#{$form}__group-label-help--MarginTop: calc(var(--#{$form}__group-label-help--PaddingTop) * -1);
-  --#{$form}__group-label-help--MarginRight: calc(var(--#{$form}__group-label-help--PaddingRight) * -1);
-  --#{$form}__group-label-help--MarginBottom: calc(var(--#{$form}__group-label-help--PaddingBottom) * -1);
-  --#{$form}__group-label-help--MarginLeft: calc(var(--#{$form}__group-label-help--PaddingLeft) * -1 + var(--#{$pf-global}--spacer--xs));
-  --#{$form}__group-label-help--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$form}__group-label-help--TranslateY: #{pf-size-prem(2px)};
-  --#{$form}__group-label-help--Color: var(--#{$pf-global}--Color--200);
-  --#{$form}__group-label-help--hover--Color: var(--#{$pf-global}--Color--100);
-  --#{$form}__group-label-help--focus--Color: var(--#{$pf-global}--Color--100);
+  --#{$form}__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
 
   // Form group label info
-  --#{$form}__group-label-info--MarginLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$form}__group-label-info--FontSize: var(--#{$pf-global}--FontSize--sm);
+  --#{$form}__group-label-info--MarginLeft: var(--pf-t--global--spacer--sm);
+  --#{$form}__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
 
   // Group control
-  --#{$form}__group-control--m-inline--child--MarginRight: var(--#{$pf-global}--spacer--lg);
-  --#{$form}__group-control__helper-text--MarginBottom: var(--#{$pf-global}--spacer--xs);
-  --#{$form}__group-control--m-stack--Gap: var(--#{$pf-global}--spacer--sm);
+  --#{$form}__group-control--m-inline--child--MarginRight: var(--pf-t--global--spacer--lg);
+  --#{$form}__group-control__helper-text--MarginBottom: 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__helper-text--MarginTop: calc(var(--#{$form}__group-control--m-stack--Gap) * -1 + var(--#{$form}__helper-text--MarginTop--base));
 
   // Actions
-  --#{$form}__actions--child--MarginTop: var(--#{$pf-global}--spacer--sm);
-  --#{$form}__actions--child--MarginRight: var(--#{$pf-global}--spacer--sm);
-  --#{$form}__actions--child--MarginBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$form}__actions--child--MarginLeft: var(--#{$pf-global}--spacer--sm);
+  --#{$form}__actions--child--MarginTop: var(--pf-t--global--spacer--sm);
+  --#{$form}__actions--child--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$form}__actions--child--MarginBottom: var(--pf-t--global--spacer--sm);
+  --#{$form}__actions--child--MarginLeft: var(--pf-t--global--spacer--sm);
   --#{$form}__actions--MarginTop: calc(var(--#{$form}__actions--child--MarginTop) * -1);
   --#{$form}__actions--MarginRight: calc(var(--#{$form}__actions--child--MarginRight) * -1);
   --#{$form}__actions--MarginBottom: calc(var(--#{$form}__actions--child--MarginBottom) * -1);
   --#{$form}__actions--MarginLeft: calc(var(--#{$form}__actions--child--MarginLeft) * -1);
 
   // Helper text
-  --#{$form}__helper-text--MarginTop--base: var(--#{$pf-global}--spacer--xs);
+  --#{$form}__helper-text--MarginTop--base: var(--pf-t--global--spacer--xs);
   --#{$form}__helper-text--MarginTop: var(--#{$form}__helper-text--MarginTop--base);
-  --#{$form}__helper-text--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$form}__helper-text--Color: var(--#{$pf-global}--Color--100);
-
-  // here
-  // Helper text icon
-  --#{$form}__helper-text-icon--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$form}__helper-text-icon--MarginRight: var(--#{$pf-global}--spacer--xs);
-
-  // States
-  --#{$form}__helper-text--m-success--Color: var(--#{$pf-global}--success-color--200);
-  --#{$form}__helper-text--m-warning--Color: var(--#{$pf-global}--warning-color--200);
-  --#{$form}__helper-text--m-error--Color: var(--#{$pf-global}--danger-color--100);
 
   // Section
-  --#{$form}__section--MarginTop: var(--#{$pf-global}--spacer--xl);
-  --#{$form}__section--Gap: var(--#{$pf-global}--gutter--md);
+  --#{$form}__section--MarginTop: var(--pf-t--global--spacer--xl);
+  --#{$form}__section--Gap: var(--pf-t--global--spacer--md);
 
   // Section title
-  --#{$form}__section-title--FontSize: var(--#{$pf-global}--FontSize--lg);
-  --#{$form}__section-title--FontWeight: var(--#{$pf-global}--FontWeight--bold);
-  --#{$form}__section-title--MarginBottom: calc(var(--#{$pf-global}--spacer--sm) * -1);
+  --#{$form}__section-title--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --#{$form}__section-title--FontWeight: var(--pf-t--global--font--weight--heading);
+  --#{$form}__section-title--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1); 
 
   // Field groups
-  --#{$form}__field-group--border-width-base: var(--#{$pf-global}--BorderWidth--sm);
+  --#{$form}__field-group--border-width-base: var(--pf-t--global--border--width--divider--default);
   --#{$form}__field-group--BorderTopWidth: var(--#{$form}__field-group--border-width-base);
-  --#{$form}__field-group--BorderTopColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$form}__field-group--BorderTopColor: var(--pf-t--global--border--color--default);
   --#{$form}__field-group--BorderBottomWidth: var(--#{$form}__field-group--border-width-base);
-  --#{$form}__field-group--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$form}__field-group--BorderBottomColor: var(--pf-t--global--border--color--default);
   --#{$form}__field-group--field-group--MarginTop: calc(var(--#{$form}--GridGap) * -1);
-  --#{$form}__field-group--GridTemplateColumns--toggle: calc(var(--#{$pf-global}--spacer--md) * 2 + var(--#{$form}__field-group-toggle-icon--MinWidth) + var(--#{$pf-global}--spacer--xs)); // based off of the expected width of the group toggle, for use to define a column when the toggle is not present
-  --#{$form}__field-group-toggle--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$form}__field-group-toggle--PaddingRight: var(--#{$pf-global}--spacer--xs);
-  --#{$form}__field-group__field-group__field-group-toggle--PaddingTop: var(--#{$pf-global}--spacer--lg);
-  --#{$form}__field-group-header-toggle--BorderWidth--base: var(--#{$pf-global}--BorderWidth--sm);
+  --#{$form}__field-group--GridTemplateColumns--toggle: calc(var(--pf-t--global--spacer--md) * 2 + var(--#{$form}__field-group-toggle-icon--MinWidth) + var(--pf-t--global--spacer--xs)); // based off of the expected width of the group toggle, for use to define a column when the toggle is not present
+  --#{$form}__field-group-toggle--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$form}__field-group-toggle--PaddingRight: var(--pf-t--global--spacer--xs);
+  --#{$form}__field-group__field-group__field-group-toggle--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$form}__field-group-header-toggle--BorderWidth--base: var(--pf-t--global--border--width--divider--default);
   --#{$form}__field-group__field-group--field-group__field-group-toggle--after--BorderTopWidth: var(--#{$form}__field-group-header-toggle--BorderWidth--base);
-  --#{$form}__field-group-toggle-button--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
-  --#{$form}__field-group-toggle-button--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
+  --#{$form}__field-group-toggle-button--MarginTop: calc(var(--pf-t--global--spacer--form-element) * -1);
+  --#{$form}__field-group-toggle-button--MarginBottom: calc(var(--pf-t--global--spacer--form-element) * -1);
   --#{$form}__field-group-toggle-icon--Transition: var(--#{$pf-global}--Transition);
-  --#{$form}__field-group-toggle-icon--MinWidth: var(--#{$pf-global}--FontSize--md);
+  --#{$form}__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
   --#{$form}__field-group-toggle-icon--Rotate: 0;
   --#{$form}__field-group--m-expanded__toggle-icon--Rotate: 90deg;
-  --#{$form}__field-group-header--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$form}__field-group-header--PaddingBottom: var(--#{$pf-global}--spacer--md);
+  --#{$form}__field-group-header--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$form}__field-group-header--PaddingBottom: var(--pf-t--global--spacer--md);
   --#{$form}__field-group-header--GridColumn: 1 / 3;
-  --#{$form}__field-group__field-group__field-group-header--PaddingTop: var(--#{$pf-global}--spacer--lg);
-  --#{$form}__field-group__field-group__field-group-header--PaddingBottom: var(--#{$pf-global}--spacer--lg);
+  --#{$form}__field-group__field-group__field-group-header--PaddingTop: var(--pf-t--global--spacer--lg);
+  --#{$form}__field-group__field-group__field-group-header--PaddingBottom: var(--pf-t--global--spacer--lg);
   --#{$form}__field-group-toggle--field-group-header--GridColumn: 2 / 3;
   --#{$form}__field-group__field-group--field-group__field-group-header--after--BorderTopWidth: var(--#{$form}__field-group-header-toggle--BorderWidth--base);
-  --#{$form}__field-group-header-description--MarginTop: var(--#{$pf-global}--spacer--xs);
-  --#{$form}__field-group-header-description--Color: var(--#{$pf-global}--Color--200);
-  --#{$form}__field-group-header-actions--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
-  --#{$form}__field-group-header-actions--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
-  --#{$form}__field-group-header-actions--MarginLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$form}__field-group-body--PaddingTop: var(--#{$pf-global}--spacer--lg);
-  --#{$form}__field-group-body--PaddingBottom: var(--#{$pf-global}--spacer--lg);
+  --#{$form}__field-group-header-description--MarginTop: var(--pf-t--global--spacer--xs);
+  --#{$form}__field-group-header-description--Color: var(--pf-t--global--text--color--subtle);
+  --#{$form}__field-group-header-actions--MarginTop: calc(var(--pf-t--global--spacer--form-element) * -1);
+  --#{$form}__field-group-header-actions--MarginBottom: calc(var(--pf-t--global--spacer--form-element) * -1);
+  --#{$form}__field-group-header-actions--MarginLeft: var(--pf-t--global--spacer--sm);
+  --#{$form}__field-group-body--PaddingTop: var(--pf-t--global--spacer--lg);
+  --#{$form}__field-group-body--PaddingBottom: var(--pf-t--global--spacer--lg);
   --#{$form}__field-group-body--Gap: var(--#{$form}--GridGap);
   --#{$form}__field-group-body--GridColumn: 2 / 3;
   --#{$form}__field-group__field-group__field-group-body--GridColumn: 1 / 3;
   --#{$form}__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
   --#{$form}__field-group-body__field-group--last-child--MarginBottom: calc(var(--#{$form}__field-group-body--PaddingBottom) * -1);
+}
 
+.#{$form} {
   display: grid;
   gap: var(--#{$form}--GridGap);
 
   &.pf-m-horizontal {
     &.pf-m-align-right {
       .#{$form}__label {
-        text-align: right;
+        text-align: end;
       }
     }
 
@@ -199,7 +179,7 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
       }
 
       .#{$form}__group-label {
-        padding-top: var(--#{$form}--m-horizontal__group-label--md--PaddingTop);
+        padding-block-start: var(--#{$form}--m-horizontal__group-label--md--PaddingTop);
 
         // stylelint-disable-next-line
         &.pf-m-no-padding-top {
@@ -221,8 +201,13 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 }
 
 .#{$form}__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--#{$form}__group--Gap);
+  min-width: 0;
+
   &.pf-m-action {
-    margin-top: var(--#{$form}__group--m-action--MarginTop);
+    margin-block-start: var(--#{$form}__group--m-action--MarginTop);
     overflow: hidden; // keeps the negative bottom margin bottom on .#{$form}__actions from triggering overflow
   }
 }
@@ -233,12 +218,12 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 
   & + .#{$form}__group:not(.pf-m-action),
   &:not(:first-child) {
-    margin-top: var(--#{$form}__section--MarginTop);
+    margin-block-start: var(--#{$form}__section--MarginTop);
   }
 }
 
 .#{$form}__section-title {
-  margin-bottom: var(--#{$form}__section-title--MarginBottom);
+  margin-block-end: var(--#{$form}__section-title--MarginBottom);
   font-size: var(--#{$form}__section-title--FontSize);
   font-weight: var(--#{$form}__section-title--FontWeight);
 }
@@ -246,8 +231,6 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 .#{$form}__group-label {
   --#{$form}__helper-text--MarginTop: 0;
 
-  padding-bottom: var(--#{$form}__group-label--PaddingBottom);
-
   &.pf-m-info {
     display: flex;
     align-items: flex-end;
@@ -259,7 +242,7 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 }
 
 .#{$form}__group-label-info {
-  margin-left: var(--#{$form}__group-label-info--MarginLeft);
+  margin-inline-start: var(--#{$form}__group-label-info--MarginLeft);
   font-size: var(--#{$form}__group-label-info--FontSize);
 }
 
@@ -289,45 +272,26 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 }
 
 .#{$form}__label-required {
-  margin-left: var(--#{$form}__label-required--MarginLeft);
+  margin-inline-start: var(--#{$form}__label-required--MarginLeft);
   font-size: var(--#{$form}__label-required--FontSize);
   color: var(--#{$form}__label-required--Color);
 }
 
 .#{$form}__group-label-help {
-  padding-top: var(--#{$form}__group-label-help--PaddingTop);
-  padding-right: var(--#{$form}__group-label-help--PaddingRight);
-  padding-bottom: var(--#{$form}__group-label-help--PaddingBottom);
-  padding-left: var(--#{$form}__group-label-help--PaddingLeft);
-  margin-top: var(--#{$form}__group-label-help--MarginTop);
-  margin-right: var(--#{$form}__group-label-help--MarginRight);
-  margin-bottom: var(--#{$form}__group-label-help--MarginBottom);
-  margin-left: var(--#{$form}__group-label-help--MarginLeft);
-  font-size: var(--#{$form}__group-label-help--FontSize);
-  line-height: 1;
-  color: var(--#{$form}__group-label-help--Color);
-  cursor: pointer;
-  background-color: var(--#{$form}__group-label-help--BackgroundColor);
-  border: 0;
-  transform: translateY(var(--#{$form}__group-label-help--TranslateY));
-
-  &:hover {
-    --#{$form}__group-label-help--Color: var(--#{$form}__group-label-help--hover--Color);
-  }
-
-  &:focus-within {
-    --#{$form}__group-label-help--Color: var(--#{$form}__group-label-help--focus--Color);
+  .#{$button} {
+    --#{$button}--FontSize: var(--#{$form}__group-label-help--FontSize);
   }
 }
 
-
 .#{$form}__group-control {
+  min-width: 0;
+
   &.pf-m-inline {
     display: flex;
     flex-flow: row wrap;
 
     > * {
-      margin-right: var(--#{$form}__group-control--m-inline--child--MarginRight);
+      margin-inline-end: var(--#{$form}__group-control--m-inline--child--MarginRight);
     }
 
     > :last-child {
@@ -345,26 +309,12 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   .#{$form}__helper-text:first-child {
     --#{$form}__helper-text--MarginTop: 0;
 
-    margin-bottom: var(--#{$form}__group-control__helper-text--MarginBottom);
+    margin-block-end: var(--#{$form}__group-control__helper-text--MarginBottom);
   }
 }
 
 .#{$form}__helper-text {
-  margin-top: var(--#{$form}__helper-text--MarginTop);
-  font-size: var(--#{$form}__helper-text--FontSize);
-  color: var(--#{$form}__helper-text--Color);
-
-  &.pf-m-error {
-    --#{$form}__helper-text--Color: var(--#{$form}__helper-text--m-error--Color);
-  }
-
-  &.pf-m-success {
-    --#{$form}__helper-text--Color: var(--#{$form}__helper-text--m-success--Color);
-  }
-
-  &.pf-m-warning {
-    --#{$form}__helper-text--Color: var(--#{$form}__helper-text--m-warning--Color);
-  }
+  margin-block-start: var(--#{$form}__helper-text--MarginTop);
 
   &.pf-m-inactive {
     display: none;
@@ -376,11 +326,6 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   }
 }
 
-.#{$form}__helper-text-icon {
-  margin-right: var(--#{$form}__helper-text-icon--MarginRight);
-  font-size: var(--#{$form}__helper-text-icon--FontSize);
-}
-
 // Fieldset
 .#{$form}__fieldset {
   border: 0;
@@ -389,16 +334,16 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 .#{$form}__actions {
   display: flex;
   flex-wrap: wrap;
-  margin-top: var(--#{$form}__actions--MarginTop);
-  margin-right: var(--#{$form}__actions--MarginRight);
-  margin-bottom: var(--#{$form}__actions--MarginBottom);
-  margin-left: var(--#{$form}__actions--MarginLeft);
+  margin-block-start: var(--#{$form}__actions--MarginTop);
+  margin-block-end: var(--#{$form}__actions--MarginBottom);
+  margin-inline-start: var(--#{$form}__actions--MarginLeft);
+  margin-inline-end: var(--#{$form}__actions--MarginRight);
 
   > * {
-    margin-top: var(--#{$form}__actions--child--MarginTop);
-    margin-right: var(--#{$form}__actions--child--MarginRight);
-    margin-bottom: var(--#{$form}__actions--child--MarginBottom);
-    margin-left: var(--#{$form}__actions--child--MarginLeft);
+    margin-block-start: var(--#{$form}__actions--child--MarginTop);
+    margin-block-end: var(--#{$form}__actions--child--MarginBottom);
+    margin-inline-start: var(--#{$form}__actions--child--MarginLeft);
+    margin-inline-end: var(--#{$form}__actions--child--MarginRight);
   }
 }
 
@@ -407,8 +352,8 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 
   display: grid;
   grid-template-columns: minmax(var(--#{$form}__field-group--GridTemplateColumns--toggle), max-content) 1fr;
-  border-top: var(--#{$form}__field-group--BorderTopWidth) solid var(--#{$form}__field-group--BorderTopColor);
-  border-bottom: var(--#{$form}__field-group--BorderBottomWidth) solid var(--#{$form}__field-group--BorderBottomColor);
+  border-block-start: var(--#{$form}__field-group--BorderTopWidth) solid var(--#{$form}__field-group--BorderTopColor);
+  border-block-end: var(--#{$form}__field-group--BorderBottomWidth) solid var(--#{$form}__field-group--BorderBottomColor);
 
   &:last-child {
     --#{$form}__field-group--BorderBottomWidth: 0;
@@ -420,7 +365,7 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   }
 
   & + & {
-    margin-top: var(--#{$form}__field-group--field-group--MarginTop);
+    margin-block-start: var(--#{$form}__field-group--field-group--MarginTop);
   }
 
   // nested
@@ -446,8 +391,8 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 .#{$form}__field-group-toggle {
   grid-row: 1 / 2;
   grid-column: 1 / 2;
-  padding-top: var(--#{$form}__field-group-toggle--PaddingTop);
-  padding-right: var(--#{$form}__field-group-toggle--PaddingRight);
+  padding-block-start: var(--#{$form}__field-group-toggle--PaddingTop);
+  padding-inline-end: var(--#{$form}__field-group-toggle--PaddingRight);
 
   + .#{$form}__field-group-header {
     --#{$form}__field-group-header--GridColumn: var(--#{$form}__field-group-toggle--field-group-header--GridColumn);
@@ -455,8 +400,8 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 }
 
 .#{$form}__field-group-toggle-button {
-  margin-top: var(--#{$form}__field-group-toggle-button--MarginTop);
-  margin-bottom: var(--#{$form}__field-group-toggle-button--MarginBottom);
+  margin-block-start: var(--#{$form}__field-group-toggle-button--MarginTop);
+  margin-block-end: var(--#{$form}__field-group-toggle-button--MarginBottom);
 }
 
 .#{$form}__field-group-toggle-icon {
@@ -465,6 +410,8 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   text-align: center;
   transition: var(--#{$form}__field-group-toggle-icon--Transition);
   transform: rotate(var(--#{$form}__field-group-toggle-icon--Rotate));
+
+  @include pf-v5-mirror-inline-on-rtl;
 }
 
 .#{$form}__field-group-header {
@@ -472,8 +419,8 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   grid-row: 1 / 2;
   grid-column: var(--#{$form}__field-group-header--GridColumn);
   align-items: flex-start;
-  padding-top: var(--#{$form}__field-group-header--PaddingTop);
-  padding-bottom: var(--#{$form}__field-group-header--PaddingBottom);
+  padding-block-start: var(--#{$form}__field-group-header--PaddingTop);
+  padding-block-end: var(--#{$form}__field-group-header--PaddingBottom);
 }
 
 .#{$form}__field-group-header-main {
@@ -491,14 +438,14 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 }
 
 .#{$form}__field-group-header-description {
-  margin-top: var(--#{$form}__field-group-header-description--MarginTop);
+  margin-block-start: var(--#{$form}__field-group-header-description--MarginTop);
   color: var(--#{$form}__field-group-header-description--Color);
 }
 
 .#{$form}__field-group-header-actions {
-  margin-top: var(--#{$form}__field-group-header-actions--MarginTop);
-  margin-bottom: var(--#{$form}__field-group-header-actions--MarginBottom);
-  margin-left: var(--#{$form}__field-group-header-actions--MarginLeft);
+  margin-block-start: var(--#{$form}__field-group-header-actions--MarginTop);
+  margin-block-end: var(--#{$form}__field-group-header-actions--MarginBottom);
+  margin-inline-start: var(--#{$form}__field-group-header-actions--MarginLeft);
   white-space: nowrap;
 }
 
@@ -506,8 +453,8 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   display: grid;
   grid-column: var(--#{$form}__field-group-body--GridColumn);
   gap: var(--#{$form}__field-group-body--Gap);
-  padding-top: var(--#{$form}__field-group-body--PaddingTop);
-  padding-bottom: var(--#{$form}__field-group-body--PaddingBottom);
+  padding-block-start: var(--#{$form}__field-group-body--PaddingTop);
+  padding-block-end: var(--#{$form}__field-group-body--PaddingBottom);
 
   > .#{$form}__field-group {
     &:first-child {
@@ -516,14 +463,8 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
     }
 
     &:last-child {
-      margin-bottom: var(--#{$form}__field-group-body__field-group--last-child--MarginBottom);
+      margin-block-end: var(--#{$form}__field-group-body__field-group--last-child--MarginBottom);
     }
   }
 }
 
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/form";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-form;
-}