@patternfly/patternfly 6.0.0-alpha.9 → 6.0.0-alpha.90

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,123 +64,99 @@ $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(--#{$form}__field-group-header--PaddingTop);
+  --#{$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(--#{$button}--m-plain--PaddingTop) * -1);
+  --#{$form}__field-group-toggle-button--MarginBottom: calc(var(--#{$button}--m-plain--PaddingBottom) * -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--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);
 
@@ -221,6 +199,11 @@ $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-block-start: var(--#{$form}__group--m-action--MarginTop);
     overflow: hidden; // keeps the negative bottom margin bottom on .#{$form}__actions from triggering overflow
@@ -246,8 +229,6 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 .#{$form}__group-label {
   --#{$form}__helper-text--MarginTop: 0;
 
-  padding-block-end: var(--#{$form}__group-label--PaddingBottom);
-
   &.pf-m-info {
     display: flex;
     align-items: flex-end;
@@ -295,33 +276,14 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 }
 
 .#{$form}__group-label-help {
-  padding-block-start: var(--#{$form}__group-label-help--PaddingTop);
-  padding-block-end: var(--#{$form}__group-label-help--PaddingBottom);
-  padding-inline-start: var(--#{$form}__group-label-help--PaddingLeft);
-  padding-inline-end: var(--#{$form}__group-label-help--PaddingRight);
-  margin-block-start: var(--#{$form}__group-label-help--MarginTop);
-  margin-block-end: var(--#{$form}__group-label-help--MarginBottom);
-  margin-inline-start: var(--#{$form}__group-label-help--MarginLeft);
-  margin-inline-end: var(--#{$form}__group-label-help--MarginRight);
-  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;
@@ -351,20 +313,6 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 
 .#{$form}__helper-text {
   margin-block-start: 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);
-  }
 
   &.pf-m-inactive {
     display: none;
@@ -376,11 +324,6 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   }
 }
 
-.#{$form}__helper-text-icon {
-  margin-inline-end: var(--#{$form}__helper-text-icon--MarginRight);
-  font-size: var(--#{$form}__helper-text-icon--FontSize);
-}
-
 // Fieldset
 .#{$form}__fieldset {
   border: 0;
@@ -498,8 +441,6 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 }
 
 .#{$form}__field-group-header-actions {
-  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;
 }
@@ -523,9 +464,3 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   }
 }
 
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/form";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-form;
-}

package/components/FormControl/form-control.css

@@ -1,92 +1,82 @@
+:root,
 .pf-v5-c-form-control {
-  --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
-  --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
-  --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
-  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
-  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
-  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
-  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
-  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
-}
-
-.pf-v5-c-form-control {
-  --pf-v5-c-form-control--ColumnGap: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-form-control--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-form-control--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-form-control--LineHeight: var(--pf-v5-global--LineHeight--md);
+  --pf-v5-c-form-control--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-form-control--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-form-control--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v5-c-form-control--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v5-c-form-control--Resize: none;
-  --pf-v5-c-form-control--OutlineOffset: -2px;
-  --pf-v5-c-form-control--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-form-control--before--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-form-control--before--BorderBottomWidth: 0;
-  --pf-v5-c-form-control--before--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-form-control--before--BorderTopColor: var(--pf-v5-global--BorderColor--300);
-  --pf-v5-c-form-control--before--BorderRightColor: var(--pf-v5-global--BorderColor--300);
-  --pf-v5-c-form-control--before--BorderBottomColor: transparent;
-  --pf-v5-c-form-control--before--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
-  --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
-  --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-form-control--OutlineOffset: -6px;
+  --pf-v5-c-form-control--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v5-c-form-control--before--BorderWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-form-control--before--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-form-control--before--BorderRadius: var(--pf-v5-c-form-control--BorderRadius);
+  --pf-v5-c-form-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-form-control--after--BorderColor: transparent;
+  --pf-v5-c-form-control--after--BorderRadius: var(--pf-v5-c-form-control--BorderRadius);
+  --pf-v5-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --pf-v5-c-form-control--Width: 100%;
-  --pf-v5-c-form-control--inset--base: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-form-control--PaddingTop: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-global--spacer--form-element);
+  --pf-v5-c-form-control--inset--base: var(--pf-t--global--spacer--md);
+  --pf-v5-c-form-control--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-form-control--PaddingBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--inset--base);
   --pf-v5-c-form-control--PaddingLeft: var(--pf-v5-c-form-control--inset--base);
-  --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-form-control--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-form-control--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-form-control--m-expanded--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-form-control--m-placeholder--Color: var(--pf-v5-global--Color--dark-200);
-  --pf-v5-c-form-control--m-placeholder--child--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-form-control--m-disabled--Color: var(--pf-v5-global--disabled-color--100);
-  --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
+  --pf-v5-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
+  --pf-v5-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
+  --pf-v5-c-form-control--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
+  --pf-v5-c-form-control--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
+  --pf-v5-c-form-control--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
+  --pf-v5-c-form-control--m-expanded--after--BorderColor: var(--pf-t--global--border--color--clicked);
+  --pf-v5-c-form-control--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
+  --pf-v5-c-form-control--m-placeholder--child--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-form-control--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
+  --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --pf-v5-c-form-control--m-disabled--after--BorderColor: transparent;
-  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
-  --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
+  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-form-control--m-readonly--BorderColor: transparent;
+  --pf-v5-c-form-control--m-readonly--hover--after--BorderColor: revert;
+  --pf-v5-c-form-control--m-readonly--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
+  --pf-v5-c-form-control--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
   --pf-v5-c-form-control--m-readonly--m-plain--inset--base: 0;
   --pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
-  --pf-v5-c-form-control--m-success--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-form-control--m-success--after--BorderBottomColor: var(--pf-v5-global--success-color--100);
-  --pf-v5-c-form-control--m-success--PaddingRight: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-form-control--m-warning--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-form-control--m-warning--after--BorderBottomColor: var(--pf-v5-global--warning-color--100);
-  --pf-v5-c-form-control--m-warning--PaddingRight: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-form-control--m-error--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-form-control--m-error--after--BorderBottomColor: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-form-control--m-error--PaddingRight: var(--pf-v5-global--spacer--xl);
+  --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: 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: 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: 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);
-  --pf-v5-c-form-control--m-icon--icon--spacer: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-form-control--m-icon--icon--spacer: var(--pf-t--global--spacer--sm);
   --pf-v5-c-form-control--m-icon--icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-error--icon--width) + var(--pf-v5-c-form-control--m-icon--icon--spacer) + 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__select--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-form-control__select--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-form-control__select--m-success--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl);
-  --pf-v5-c-form-control__select--m-warning--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl);
-  --pf-v5-c-form-control__select--m-error--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl);
+  --pf-v5-c-form-control__select--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-form-control__select--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-form-control__select--m-success--m-status--PaddingRight: var(--pf-t--global--spacer--3xl);
+  --pf-v5-c-form-control__select--m-warning--m-status--PaddingRight: var(--pf-t--global--spacer--3xl);
+  --pf-v5-c-form-control__select--m-error--m-status--PaddingRight: var(--pf-t--global--spacer--3xl);
   --pf-v5-c-form-control--textarea--Width: var(--pf-v5-c-form-control--Width);
   --pf-v5-c-form-control--textarea--Height: auto;
-  --pf-v5-c-form-control__icon--PaddingTop: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-form-control__icon--Color: var(--pf-v5-global--icon--Color--light);
-  --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-global--icon--Color--light);
-  --pf-v5-c-form-control--m-success__icon--m-status--Color: var(--pf-v5-global--success-color--100);
-  --pf-v5-c-form-control--m-warning__icon--m-status--Color: var(--pf-v5-global--warning-color--100);
-  --pf-v5-c-form-control--m-error__icon--m-status--Color: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-form-control__utilities--Gap: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-form-control__icon--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-form-control__icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-form-control__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-form-control--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
+  --pf-v5-c-form-control--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --pf-v5-c-form-control--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --pf-v5-c-form-control__utilities--Gap: var(--pf-t--global--spacer--sm);
   --pf-v5-c-form-control__utilities--PaddingTop: var(--pf-v5-c-form-control--inset--base);
   --pf-v5-c-form-control__utilities--PaddingRight: var(--pf-v5-c-form-control--inset--base);
-  --pf-v5-c-form-control__toggle-icon--PaddingTop: var(--pf-v5-global--spacer--form-element);
+  --pf-v5-c-form-control__toggle-icon--PaddingTop: var(--pf-t--global--spacer--sm);
   --pf-v5-c-form-control__toggle-icon--PaddingRight: var(--pf-v5-c-form-control--inset--base);
   --pf-v5-c-form-control__toggle-icon--PaddingLeft: var(--pf-v5-c-form-control--inset--base);
-  --pf-v5-c-form-control__toggle-icon--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-form-control--m-disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
-  color: var(--pf-v5-c-form-control--Color);
+  --pf-v5-c-form-control__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-form-control--m-disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
+}
+
+.pf-v5-c-form-control {
   position: relative;
   display: grid;
   grid-template-columns: 1fr auto;
@@ -97,6 +87,7 @@
   line-height: var(--pf-v5-c-form-control--LineHeight);
   resize: var(--pf-v5-c-form-control--Resize);
   background-color: var(--pf-v5-c-form-control--BackgroundColor);
+  border-radius: var(--pf-v5-c-form-control--BorderRadius);
 }
 .pf-v5-c-form-control::before, .pf-v5-c-form-control::after {
   position: absolute;
@@ -105,18 +96,14 @@
   content: "";
 }
 .pf-v5-c-form-control::before {
+  border-color: var(--pf-v5-c-form-control--before--BorderColor);
   border-style: var(--pf-v5-c-form-control--before--BorderStyle, solid);
-  border-block-start-color: var(--pf-v5-c-form-control--before--BorderTopColor);
-  border-block-start-width: var(--pf-v5-c-form-control--before--BorderTopWidth);
-  border-block-end-color: var(--pf-v5-c-form-control--before--BorderBottomColor);
-  border-block-end-width: var(--pf-v5-c-form-control--before--BorderBottomWidth);
-  border-inline-start-color: var(--pf-v5-c-form-control--before--BorderLeftColor);
-  border-inline-start-width: var(--pf-v5-c-form-control--before--BorderLeftWidth);
-  border-inline-end-color: var(--pf-v5-c-form-control--before--BorderRightColor);
-  border-inline-end-width: var(--pf-v5-c-form-control--before--BorderRightWidth);
+  border-width: var(--pf-v5-c-form-control--before--BorderWidth);
+  border-radius: var(--pf-v5-c-form-control--before--BorderRadius);
 }
 .pf-v5-c-form-control::after {
-  border-block-end: var(--pf-v5-c-form-control--after--BorderBottomWidth) var(--pf-v5-c-form-control--after--BorderStyle, solid) var(--pf-v5-c-form-control--after--BorderBottomColor);
+  border: var(--pf-v5-c-form-control--after--BorderWidth) var(--pf-v5-c-form-control--after--BorderStyle, solid) var(--pf-v5-c-form-control--after--BorderColor);
+  border-radius: var(--pf-v5-c-form-control--before--BorderRadius);
 }
 .pf-v5-c-form-control > :is(input, select, textarea) {
   grid-row: 1/2;
@@ -128,6 +115,7 @@
   color: var(--pf-v5-c-form-control--Color);
   background-color: transparent;
   border: none;
+  border-radius: var(--pf-v5-c-form-control--BorderRadius);
   -moz-appearance: none;
   -webkit-appearance: none;
 }
@@ -142,11 +130,15 @@
 }
 .pf-v5-c-form-control.pf-m-readonly {
   --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-c-form-control--m-readonly--BackgroundColor);
+  --pf-v5-c-form-control--BorderColor: var(--pf-v5-c-form-control--m-readonly--BorderColor);
+}
+.pf-v5-c-form-control.pf-m-readonly:hover {
+  --pf-v5-c-form-control--hover--after--BorderColor: var(--pf-v5-c-form-control--m-readonly--hover--after--BorderColor);
 }
 .pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
-  --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor);
-  --pf-v5-c-form-control--focus--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-readonly--focus--after--BorderBottomWidth);
-  --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor);
+  --pf-v5-c-form-control--hover--after--BorderColor: var(--pf-v5-c-form-control--m-readonly--hover--after--BorderColor);
+  --pf-v5-c-form-control--focus--after--BorderWidth: var(--pf-v5-c-form-control--m-readonly--focus--after--BorderWidth);
+  --pf-v5-c-form-control--focus--after--BorderColor: var(--pf-v5-c-form-control--m-readonly--focus--after--BorderColor);
 }
 .pf-v5-c-form-control.pf-m-readonly.pf-m-plain {
   --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor);
@@ -156,15 +148,12 @@
   --pf-v5-c-form-control--OutlineOffset: var(--pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset);
 }
 .pf-v5-c-form-control:hover {
-  --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--hover--after--BorderBottomColor);
-}
-.pf-v5-c-form-control:focus-within {
-  --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--focus--after--BorderBottomColor);
-  --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--focus--after--BorderBottomWidth);
+  --pf-v5-c-form-control--after--BorderColor: var(--pf-v5-c-form-control--hover--after--BorderColor);
+  --pf-v5-c-form-control--after--BorderWidth: var(--pf-v5-c-form-control--hover--after--BorderWidth);
 }
 .pf-v5-c-form-control.pf-m-expanded {
-  --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-expanded--after--BorderBottomColor);
-  --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-expanded--after--BorderBottomWidth);
+  --pf-v5-c-form-control--after--BorderColor: var(--pf-v5-c-form-control--m-expanded--after--BorderColor);
+  --pf-v5-c-form-control--after--BorderWidth: var(--pf-v5-c-form-control--m-expanded--after--BorderWidth);
 }
 .pf-v5-c-form-control.pf-m-disabled {
   --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-c-form-control--m-disabled--BackgroundColor);
@@ -177,30 +166,30 @@
 }
 .pf-v5-c-form-control.pf-m-error {
   --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-error--PaddingRight);
-  --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-error--after--BorderBottomColor);
+  --pf-v5-c-form-control--after--BorderColor: var(--pf-v5-c-form-control--m-error--after--BorderColor);
   --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-c-form-control--m-error__icon--m-status--Color);
   --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-c-form-control__select--m-error--m-status--PaddingRight);
-  --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-error--after--BorderBottomWidth);
+  --pf-v5-c-form-control--after--BorderWidth: var(--pf-v5-c-form-control--m-error--after--BorderWidth);
 }
 .pf-v5-c-form-control.pf-m-error.pf-m-icon {
   --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-icon--icon--PaddingRight);
 }
 .pf-v5-c-form-control.pf-m-success {
   --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-success--PaddingRight);
-  --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-success--after--BorderBottomColor);
+  --pf-v5-c-form-control--after--BorderColor: var(--pf-v5-c-form-control--m-success--after--BorderColor);
   --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-c-form-control--m-success__icon--m-status--Color);
   --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-c-form-control__select--m-success--m-status--PaddingRight);
-  --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-success--after--BorderBottomWidth);
+  --pf-v5-c-form-control--after--BorderWidth: var(--pf-v5-c-form-control--m-success--after--BorderWidth);
 }
 .pf-v5-c-form-control.pf-m-success.pf-m-icon {
   --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-icon--icon--PaddingRight);
 }
 .pf-v5-c-form-control.pf-m-warning {
   --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-warning--PaddingRight);
-  --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-warning--after--BorderBottomColor);
+  --pf-v5-c-form-control--after--BorderColor: var(--pf-v5-c-form-control--m-warning--after--BorderColor);
   --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-c-form-control--m-warning__icon--m-status--Color);
   --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-c-form-control__select--m-warning--m-status--PaddingRight);
-  --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-warning--after--BorderBottomWidth);
+  --pf-v5-c-form-control--after--BorderWidth: var(--pf-v5-c-form-control--m-warning--after--BorderWidth);
 }
 .pf-v5-c-form-control.pf-m-warning.pf-m-icon {
   --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-icon--icon--PaddingRight);
@@ -274,20 +263,6 @@
   pointer-events: none;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-form-control {
-  --pf-v5-c-form-control--before--BorderTopColor: transparent;
-  --pf-v5-c-form-control--before--BorderRightColor: transparent;
-  --pf-v5-c-form-control--before--BorderLeftColor: transparent;
-  --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
-  --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-  --pf-v5-c-form-control--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
-  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-global--disabled-color--200);
-  --pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
-  --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor:var(--pf-v5-global--BorderColor--400);
-  --pf-v5-c-form-control--m-disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--300);
-  color: var(--pf-v5-global--Color--100);
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-form-control::-webkit-calendar-picker-indicator {
-  filter: invert(1);
+select ~ .pf-v5-c-form-control__utilities {
+  --pf-v5-c-form-control__utilities--PaddingRight: 0;
 }