@patternfly/patternfly 6.0.0-alpha.44 → 6.0.0-alpha.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/components/Check/check.css +17 -16
  2. package/components/Check/check.scss +17 -20
  3. package/components/Form/form.css +68 -87
  4. package/components/Form/form.scss +67 -98
  5. package/components/FormControl/form-control.css +86 -111
  6. package/components/FormControl/form-control.scss +88 -92
  7. package/components/NotificationDrawer/notification-drawer.css +104 -115
  8. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  9. package/components/Panel/panel.css +27 -23
  10. package/components/Panel/panel.scss +29 -26
  11. package/components/Radio/radio.css +15 -11
  12. package/components/Radio/radio.scss +15 -15
  13. package/components/SimpleList/simple-list.css +1 -1
  14. package/components/SimpleList/simple-list.scss +1 -1
  15. package/docs/components/Form/examples/Form.md +23 -11
  16. package/docs/components/Panel/examples/Panel.md +12 -0
  17. package/docs/demos/Alert/examples/Alert.md +24 -0
  18. package/docs/demos/Form/examples/BasicForms.md +31 -10
  19. package/docs/demos/Modal/examples/Modal.md +3 -3
  20. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
  21. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
  22. package/package.json +1 -1
  23. package/patternfly-no-globals.css +319 -369
  24. package/patternfly-theme-dark-unversioned.css +319 -369
  25. package/patternfly.css +319 -369
  26. package/patternfly.min.css +1 -1
  27. package/patternfly.min.css.map +1 -1
  28. package/components/Form/themes/dark/form.scss +0 -7
  29. package/components/FormControl/themes/dark/form-control.scss +0 -24
  30. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  31. package/components/Panel/themes/dark/panel.scss +0 -7
package/components/Form/form.scss CHANGED
@@ -24,13 +24,15 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
24
24
  }
25
25
  }
26
26
 
27
+ :root,
27
28
  .#{$form} {
28
- --#{$form}--GridGap: var(--#{$pf-global}--gutter--md);
29
+ --#{$form}--GridGap: var(--pf-t--global--spacer--lg);
29
30
 
30
31
  // Group
31
- --#{$form}__group--m-action--MarginTop: var(--#{$pf-global}--spacer--xl);
32
+ --#{$form}__group--Gap: var(--pf-t--global--spacer--sm);
33
+ --#{$form}__group--m-action--MarginTop: var(--pf-t--global--spacer--xl);
32
34
  --#{$form}--m-horizontal__group-label--md--GridColumnWidth: #{pf-size-prem(150px)};
33
- --#{$form}--m-horizontal__group-label--md--GridColumnGap: var(--#{$pf-global}--spacer--md);
35
+ --#{$form}--m-horizontal__group-label--md--GridColumnGap: var(--pf-t--global--spacer--md);
34
36
  --#{$form}--m-horizontal__group-control--md--GridColumnWidth: 1fr;
35
37
 
36
38
  // limit width
@@ -52,8 +54,8 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
52
54
  // plus the border width used by the text inputs is 1px
53
55
  // So we need to adjust by 21 - 16.1 + 1 = 5.9px
54
56
 
55
- --#{$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));
56
- --#{$form}__group-label--PaddingBottom: var(--#{$pf-global}--spacer--sm);
57
+ --#{$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));
58
+ --#{$form}__group-label--PaddingBottom: var(--pf-t--global--spacer--sm);
57
59
 
58
60
  // Use the no-padding modifier to align form groups that aren't text inputs
59
61
  // Use the formula above, except
@@ -62,123 +64,114 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
62
64
  // - controls like checkboxes use the medium font and small line height
63
65
  // - This comes out to a difference of 2.3px.
64
66
  --#{$form}--m-horizontal__group-label--m-no-padding--md--PaddingTop: 0;
65
- --#{$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)));
67
+ --#{$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)));
66
68
 
67
69
  // Label
68
- --#{$form}__label--FontSize: var(--#{$pf-global}--FontSize--sm);
69
- --#{$form}__label--LineHeight: var(--#{$pf-global}--LineHeight--sm);
70
- --#{$form}__label--m-disabled--Color: var(--#{$pf-global}--disabled-color--100);
70
+ --#{$form}__label--FontSize: var(--pf-t--global--font--size--body--sm);
71
+ --#{$form}__label--LineHeight: var(--pf-t--global--font--line-height--body);
72
+ --#{$form}__label--m-disabled--Color: var(--pf-t--global--text--color--disabled);
71
73
  --#{$form}__label--hover--Cursor: pointer;
72
74
  --#{$form}__label--m-disabled--hover--Cursor: not-allowed;
73
75
 
74
76
  // Label text
75
- --#{$form}__label-text--FontWeight: var(--#{$pf-global}--FontWeight--bold);
77
+ --#{$form}__label-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
76
78
 
77
79
  // Required labels
78
- --#{$form}__label-required--MarginLeft: var(--#{$pf-global}--spacer--xs);
79
- --#{$form}__label-required--FontSize: var(--#{$pf-global}--FontSize--sm);
80
- --#{$form}__label-required--Color: var(--#{$pf-global}--danger-color--100);
80
+ --#{$form}__label-required--MarginLeft: var(--pf-t--global--spacer--xs);
81
+ --#{$form}__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
82
+ --#{$form}__label-required--Color: var(--pf-t--global--color--status--danger--default);
81
83
 
82
84
  // Field level help
83
85
  --#{$form}__group-label-help--BackgroundColor: transparent;
84
- --#{$form}__group-label-help--PaddingTop: var(--#{$pf-global}--spacer--xs);
85
- --#{$form}__group-label-help--PaddingRight: var(--#{$pf-global}--spacer--xs);
86
- --#{$form}__group-label-help--PaddingBottom: var(--#{$pf-global}--spacer--xs);
87
- --#{$form}__group-label-help--PaddingLeft: var(--#{$pf-global}--spacer--xs);
86
+ --#{$form}__group-label-help--PaddingTop: var(--pf-t--global--spacer--xs);
87
+ --#{$form}__group-label-help--PaddingRight: var(--pf-t--global--spacer--xs);
88
+ --#{$form}__group-label-help--PaddingBottom: var(--pf-t--global--spacer--xs);
89
+ --#{$form}__group-label-help--PaddingLeft: var(--pf-t--global--spacer--xs);
88
90
  --#{$form}__group-label-help--MarginTop: calc(var(--#{$form}__group-label-help--PaddingTop) * -1);
89
91
  --#{$form}__group-label-help--MarginRight: calc(var(--#{$form}__group-label-help--PaddingRight) * -1);
90
92
  --#{$form}__group-label-help--MarginBottom: calc(var(--#{$form}__group-label-help--PaddingBottom) * -1);
91
- --#{$form}__group-label-help--MarginLeft: calc(var(--#{$form}__group-label-help--PaddingLeft) * -1 + var(--#{$pf-global}--spacer--xs));
92
- --#{$form}__group-label-help--FontSize: var(--#{$pf-global}--FontSize--sm);
93
+ --#{$form}__group-label-help--MarginLeft: calc(var(--#{$form}__group-label-help--PaddingLeft) * -1 + var(--pf-t--global--spacer--xs));
94
+ --#{$form}__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
93
95
  --#{$form}__group-label-help--TranslateY: #{pf-size-prem(2px)};
94
- --#{$form}__group-label-help--Color: var(--#{$pf-global}--Color--200);
95
- --#{$form}__group-label-help--hover--Color: var(--#{$pf-global}--Color--100);
96
- --#{$form}__group-label-help--focus--Color: var(--#{$pf-global}--Color--100);
96
+ --#{$form}__group-label-help--Color: var(--pf-t--global--icon--color--regular);
97
+ --#{$form}__group-label-help--hover--Color: var(--pf-t--global--icon--color--regular);
98
+ --#{$form}__group-label-help--focus--Color: var(--pf-t--global--icon--color--brand--hover);
97
99
 
98
100
  // Form group label info
99
- --#{$form}__group-label-info--MarginLeft: var(--#{$pf-global}--spacer--sm);
100
- --#{$form}__group-label-info--FontSize: var(--#{$pf-global}--FontSize--sm);
101
+ --#{$form}__group-label-info--MarginLeft: var(--pf-t--global--spacer--sm);
102
+ --#{$form}__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
101
103
 
102
104
  // Group control
103
- --#{$form}__group-control--m-inline--child--MarginRight: var(--#{$pf-global}--spacer--lg);
104
- --#{$form}__group-control__helper-text--MarginBottom: var(--#{$pf-global}--spacer--xs);
105
- --#{$form}__group-control--m-stack--Gap: var(--#{$pf-global}--spacer--sm);
105
+ --#{$form}__group-control--m-inline--child--MarginRight: var(--pf-t--global--spacer--lg);
106
+ --#{$form}__group-control__helper-text--MarginBottom: var(--pf-t--global--spacer--xs);
107
+ --#{$form}__group-control--Gap: var(--pf-t--global--spacer--sm);
108
+ --#{$form}__group-control--m-stack--Gap: var(--pf-t--global--spacer--sm);
106
109
  --#{$form}__group-control--m-stack__helper-text--MarginTop: calc(var(--#{$form}__group-control--m-stack--Gap) * -1 + var(--#{$form}__helper-text--MarginTop--base));
107
110
 
108
111
  // Actions
109
- --#{$form}__actions--child--MarginTop: var(--#{$pf-global}--spacer--sm);
110
- --#{$form}__actions--child--MarginRight: var(--#{$pf-global}--spacer--sm);
111
- --#{$form}__actions--child--MarginBottom: var(--#{$pf-global}--spacer--sm);
112
- --#{$form}__actions--child--MarginLeft: var(--#{$pf-global}--spacer--sm);
112
+ --#{$form}__actions--child--MarginTop: var(--pf-t--global--spacer--sm);
113
+ --#{$form}__actions--child--MarginRight: var(--pf-t--global--spacer--sm);
114
+ --#{$form}__actions--child--MarginBottom: var(--pf-t--global--spacer--sm);
115
+ --#{$form}__actions--child--MarginLeft: var(--pf-t--global--spacer--sm);
113
116
  --#{$form}__actions--MarginTop: calc(var(--#{$form}__actions--child--MarginTop) * -1);
114
117
  --#{$form}__actions--MarginRight: calc(var(--#{$form}__actions--child--MarginRight) * -1);
115
118
  --#{$form}__actions--MarginBottom: calc(var(--#{$form}__actions--child--MarginBottom) * -1);
116
119
  --#{$form}__actions--MarginLeft: calc(var(--#{$form}__actions--child--MarginLeft) * -1);
117
120
 
118
121
  // Helper text
119
- --#{$form}__helper-text--MarginTop--base: var(--#{$pf-global}--spacer--xs);
122
+ --#{$form}__helper-text--MarginTop--base: var(--pf-t--global--spacer--xs);
120
123
  --#{$form}__helper-text--MarginTop: var(--#{$form}__helper-text--MarginTop--base);
121
- --#{$form}__helper-text--FontSize: var(--#{$pf-global}--FontSize--sm);
122
- --#{$form}__helper-text--Color: var(--#{$pf-global}--Color--100);
123
-
124
- // here
125
- // Helper text icon
126
- --#{$form}__helper-text-icon--FontSize: var(--#{$pf-global}--FontSize--md);
127
- --#{$form}__helper-text-icon--MarginRight: var(--#{$pf-global}--spacer--xs);
128
-
129
- // States
130
- --#{$form}__helper-text--m-success--Color: var(--#{$pf-global}--success-color--200);
131
- --#{$form}__helper-text--m-warning--Color: var(--#{$pf-global}--warning-color--200);
132
- --#{$form}__helper-text--m-error--Color: var(--#{$pf-global}--danger-color--100);
133
124
 
134
125
  // Section
135
- --#{$form}__section--MarginTop: var(--#{$pf-global}--spacer--xl);
136
- --#{$form}__section--Gap: var(--#{$pf-global}--gutter--md);
126
+ --#{$form}__section--MarginTop: var(--pf-t--global--spacer--xl);
127
+ --#{$form}__section--Gap: var(--pf-t--global--spacer--md);
137
128
 
138
129
  // Section title
139
- --#{$form}__section-title--FontSize: var(--#{$pf-global}--FontSize--lg);
140
- --#{$form}__section-title--FontWeight: var(--#{$pf-global}--FontWeight--bold);
141
- --#{$form}__section-title--MarginBottom: calc(var(--#{$pf-global}--spacer--sm) * -1);
130
+ --#{$form}__section-title--FontSize: var(--pf-t--global--font--size--heading--xs);
131
+ --#{$form}__section-title--FontWeight: var(--pf-t--global--font--weight--heading);
132
+ --#{$form}__section-title--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1);
142
133
 
143
134
  // Field groups
144
- --#{$form}__field-group--border-width-base: var(--#{$pf-global}--BorderWidth--sm);
135
+ --#{$form}__field-group--border-width-base: var(--pf-t--global--border--width--divider--default);
145
136
  --#{$form}__field-group--BorderTopWidth: var(--#{$form}__field-group--border-width-base);
146
- --#{$form}__field-group--BorderTopColor: var(--#{$pf-global}--BorderColor--100);
137
+ --#{$form}__field-group--BorderTopColor: var(--pf-t--global--border--color--default);
147
138
  --#{$form}__field-group--BorderBottomWidth: var(--#{$form}__field-group--border-width-base);
148
- --#{$form}__field-group--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
139
+ --#{$form}__field-group--BorderBottomColor: var(--pf-t--global--border--color--default);
149
140
  --#{$form}__field-group--field-group--MarginTop: calc(var(--#{$form}--GridGap) * -1);
150
- --#{$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
151
- --#{$form}__field-group-toggle--PaddingTop: var(--#{$pf-global}--spacer--md);
152
- --#{$form}__field-group-toggle--PaddingRight: var(--#{$pf-global}--spacer--xs);
153
- --#{$form}__field-group__field-group__field-group-toggle--PaddingTop: var(--#{$pf-global}--spacer--lg);
154
- --#{$form}__field-group-header-toggle--BorderWidth--base: var(--#{$pf-global}--BorderWidth--sm);
141
+ --#{$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
142
+ --#{$form}__field-group-toggle--PaddingTop: var(--pf-t--global--spacer--sm);
143
+ --#{$form}__field-group-toggle--PaddingRight: var(--pf-t--global--spacer--xs);
144
+ --#{$form}__field-group__field-group__field-group-toggle--PaddingTop: var(--pf-t--global--spacer--md);
145
+ --#{$form}__field-group-header-toggle--BorderWidth--base: var(--pf-t--global--border--width--divider--default);
155
146
  --#{$form}__field-group__field-group--field-group__field-group-toggle--after--BorderTopWidth: var(--#{$form}__field-group-header-toggle--BorderWidth--base);
156
- --#{$form}__field-group-toggle-button--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
157
- --#{$form}__field-group-toggle-button--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
147
+ --#{$form}__field-group-toggle-button--MarginTop: calc(var(--pf-t--global--spacer--form-element) * -1);
148
+ --#{$form}__field-group-toggle-button--MarginBottom: calc(var(--pf-t--global--spacer--form-element) * -1);
158
149
  --#{$form}__field-group-toggle-icon--Transition: var(--#{$pf-global}--Transition);
159
- --#{$form}__field-group-toggle-icon--MinWidth: var(--#{$pf-global}--FontSize--md);
150
+ --#{$form}__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
160
151
  --#{$form}__field-group-toggle-icon--Rotate: 0;
161
152
  --#{$form}__field-group--m-expanded__toggle-icon--Rotate: 90deg;
162
- --#{$form}__field-group-header--PaddingTop: var(--#{$pf-global}--spacer--md);
163
- --#{$form}__field-group-header--PaddingBottom: var(--#{$pf-global}--spacer--md);
153
+ --#{$form}__field-group-header--PaddingTop: var(--pf-t--global--spacer--md);
154
+ --#{$form}__field-group-header--PaddingBottom: var(--pf-t--global--spacer--md);
164
155
  --#{$form}__field-group-header--GridColumn: 1 / 3;
165
- --#{$form}__field-group__field-group__field-group-header--PaddingTop: var(--#{$pf-global}--spacer--lg);
166
- --#{$form}__field-group__field-group__field-group-header--PaddingBottom: var(--#{$pf-global}--spacer--lg);
156
+ --#{$form}__field-group__field-group__field-group-header--PaddingTop: var(--pf-t--global--spacer--lg);
157
+ --#{$form}__field-group__field-group__field-group-header--PaddingBottom: var(--pf-t--global--spacer--lg);
167
158
  --#{$form}__field-group-toggle--field-group-header--GridColumn: 2 / 3;
168
159
  --#{$form}__field-group__field-group--field-group__field-group-header--after--BorderTopWidth: var(--#{$form}__field-group-header-toggle--BorderWidth--base);
169
- --#{$form}__field-group-header-description--MarginTop: var(--#{$pf-global}--spacer--xs);
170
- --#{$form}__field-group-header-description--Color: var(--#{$pf-global}--Color--200);
171
- --#{$form}__field-group-header-actions--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
172
- --#{$form}__field-group-header-actions--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
173
- --#{$form}__field-group-header-actions--MarginLeft: var(--#{$pf-global}--spacer--sm);
174
- --#{$form}__field-group-body--PaddingTop: var(--#{$pf-global}--spacer--lg);
175
- --#{$form}__field-group-body--PaddingBottom: var(--#{$pf-global}--spacer--lg);
160
+ --#{$form}__field-group-header-description--MarginTop: var(--pf-t--global--spacer--xs);
161
+ --#{$form}__field-group-header-description--Color: var(--pf-t--global--text--color--subtle);
162
+ --#{$form}__field-group-header-actions--MarginTop: calc(var(--pf-t--global--spacer--form-element) * -1);
163
+ --#{$form}__field-group-header-actions--MarginBottom: calc(var(--pf-t--global--spacer--form-element) * -1);
164
+ --#{$form}__field-group-header-actions--MarginLeft: var(--pf-t--global--spacer--sm);
165
+ --#{$form}__field-group-body--PaddingTop: var(--pf-t--global--spacer--lg);
166
+ --#{$form}__field-group-body--PaddingBottom: var(--pf-t--global--spacer--lg);
176
167
  --#{$form}__field-group-body--Gap: var(--#{$form}--GridGap);
177
168
  --#{$form}__field-group-body--GridColumn: 2 / 3;
178
169
  --#{$form}__field-group__field-group__field-group-body--GridColumn: 1 / 3;
179
170
  --#{$form}__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
180
171
  --#{$form}__field-group-body__field-group--last-child--MarginBottom: calc(var(--#{$form}__field-group-body--PaddingBottom) * -1);
172
+ }
181
173
 
174
+ .#{$form} {
182
175
  display: grid;
183
176
  gap: var(--#{$form}--GridGap);
184
177
 
@@ -221,6 +214,9 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
221
214
  }
222
215
 
223
216
  .#{$form}__group {
217
+ display: flex;
218
+ flex-direction: column;
219
+ gap: var(--#{$form}__group--Gap);
224
220
  min-width: 0;
225
221
 
226
222
  &.pf-m-action {
@@ -248,8 +244,6 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
248
244
  .#{$form}__group-label {
249
245
  --#{$form}__helper-text--MarginTop: 0;
250
246
 
251
- padding-block-end: var(--#{$form}__group-label--PaddingBottom);
252
-
253
247
  &.pf-m-info {
254
248
  display: flex;
255
249
  align-items: flex-end;
@@ -354,20 +348,6 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
354
348
 
355
349
  .#{$form}__helper-text {
356
350
  margin-block-start: var(--#{$form}__helper-text--MarginTop);
357
- font-size: var(--#{$form}__helper-text--FontSize);
358
- color: var(--#{$form}__helper-text--Color);
359
-
360
- &.pf-m-error {
361
- --#{$form}__helper-text--Color: var(--#{$form}__helper-text--m-error--Color);
362
- }
363
-
364
- &.pf-m-success {
365
- --#{$form}__helper-text--Color: var(--#{$form}__helper-text--m-success--Color);
366
- }
367
-
368
- &.pf-m-warning {
369
- --#{$form}__helper-text--Color: var(--#{$form}__helper-text--m-warning--Color);
370
- }
371
351
 
372
352
  &.pf-m-inactive {
373
353
  display: none;
@@ -379,11 +359,6 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
379
359
  }
380
360
  }
381
361
 
382
- .#{$form}__helper-text-icon {
383
- margin-inline-end: var(--#{$form}__helper-text-icon--MarginRight);
384
- font-size: var(--#{$form}__helper-text-icon--FontSize);
385
- }
386
-
387
362
  // Fieldset
388
363
  .#{$form}__fieldset {
389
364
  border: 0;
@@ -526,9 +501,3 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
526
501
  }
527
502
  }
528
503
 
529
- // stylelint-disable no-invalid-position-at-import-rule
530
- @import "themes/dark/form";
531
-
532
- @include pf-v5-theme-dark {
533
- @include pf-v5-theme-dark-form;
534
- }
package/components/FormControl/form-control.css CHANGED
@@ -1,92 +1,82 @@
1
+ :root,
1
2
  .pf-v5-c-form-control {
2
- --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
3
- --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
4
- --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
5
- --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
6
- --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
7
- --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
8
- --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
9
- --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
10
- --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
11
- }
12
-
13
- .pf-v5-c-form-control {
14
- --pf-v5-c-form-control--ColumnGap: var(--pf-v5-global--spacer--sm);
15
- --pf-v5-c-form-control--Color: var(--pf-v5-global--Color--100);
16
- --pf-v5-c-form-control--FontSize: var(--pf-v5-global--FontSize--md);
17
- --pf-v5-c-form-control--LineHeight: var(--pf-v5-global--LineHeight--md);
3
+ --pf-v5-c-form-control--ColumnGap: var(--pf-t--global--spacer--sm);
4
+ --pf-v5-c-form-control--Color: var(--pf-t--global--text--color--regular);
5
+ --pf-v5-c-form-control--FontSize: var(--pf-t--global--font--size--body--default);
6
+ --pf-v5-c-form-control--LineHeight: var(--pf-t--global--font--line-height--body);
18
7
  --pf-v5-c-form-control--Resize: none;
19
- --pf-v5-c-form-control--OutlineOffset: -2px;
20
- --pf-v5-c-form-control--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
21
- --pf-v5-c-form-control--before--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
22
- --pf-v5-c-form-control--before--BorderBottomWidth: 0;
23
- --pf-v5-c-form-control--before--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
24
- --pf-v5-c-form-control--before--BorderTopColor: var(--pf-v5-global--BorderColor--300);
25
- --pf-v5-c-form-control--before--BorderRightColor: var(--pf-v5-global--BorderColor--300);
26
- --pf-v5-c-form-control--before--BorderBottomColor: transparent;
27
- --pf-v5-c-form-control--before--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
28
- --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
29
- --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
30
- --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
8
+ --pf-v5-c-form-control--OutlineOffset: -6px;
9
+ --pf-v5-c-form-control--BorderRadius: var(--pf-t--global--border--radius--small);
10
+ --pf-v5-c-form-control--before--BorderWidth: var(--pf-t--global--border--width--control--default);
11
+ --pf-v5-c-form-control--before--BorderColor: var(--pf-t--global--border--color--default);
12
+ --pf-v5-c-form-control--before--BorderRadius: var(--pf-v5-c-form-control--BorderRadius);
13
+ --pf-v5-c-form-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
14
+ --pf-v5-c-form-control--after--BorderColor: transparent;
15
+ --pf-v5-c-form-control--after--BorderRadius: var(--pf-v5-c-form-control--BorderRadius);
16
+ --pf-v5-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
31
17
  --pf-v5-c-form-control--Width: 100%;
32
- --pf-v5-c-form-control--inset--base: var(--pf-v5-global--spacer--sm);
33
- --pf-v5-c-form-control--PaddingTop: var(--pf-v5-global--spacer--form-element);
34
- --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-global--spacer--form-element);
18
+ --pf-v5-c-form-control--inset--base: var(--pf-t--global--spacer--md);
19
+ --pf-v5-c-form-control--PaddingTop: var(--pf-t--global--spacer--sm);
20
+ --pf-v5-c-form-control--PaddingBottom: var(--pf-t--global--spacer--sm);
35
21
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--inset--base);
36
22
  --pf-v5-c-form-control--PaddingLeft: var(--pf-v5-c-form-control--inset--base);
37
- --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
38
- --pf-v5-c-form-control--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
39
- --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
40
- --pf-v5-c-form-control--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
41
- --pf-v5-c-form-control--m-expanded--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
42
- --pf-v5-c-form-control--m-placeholder--Color: var(--pf-v5-global--Color--dark-200);
43
- --pf-v5-c-form-control--m-placeholder--child--Color: var(--pf-v5-global--Color--100);
44
- --pf-v5-c-form-control--m-disabled--Color: var(--pf-v5-global--disabled-color--100);
45
- --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
23
+ --pf-v5-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
24
+ --pf-v5-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
25
+ --pf-v5-c-form-control--focus--after--BorderWidth: var(--pf-t--global--border--width--control--active);
26
+ --pf-v5-c-form-control--focus--after--BorderColor: var(--pf-t--global--border--color--active);
27
+ --pf-v5-c-form-control--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--active);
28
+ --pf-v5-c-form-control--m-expanded--after--BorderColor: var(--pf-t--global--border--color--active);
29
+ --pf-v5-c-form-control--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
30
+ --pf-v5-c-form-control--m-placeholder--child--Color: var(--pf-t--global--text--color--regular);
31
+ --pf-v5-c-form-control--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
32
+ --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
46
33
  --pf-v5-c-form-control--m-disabled--after--BorderColor: transparent;
47
- --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-global--disabled-color--300);
48
- --pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
49
- --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
50
- --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
34
+ --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
35
+ --pf-v5-c-form-control--m-readonly--BorderColor: transparent;
36
+ --pf-v5-c-form-control--m-readonly--hover--after--BorderColor: revert;
37
+ --pf-v5-c-form-control--m-readonly--focus--after--BorderWidth: var(--pf-t--global--border--width--control--active);
38
+ --pf-v5-c-form-control--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--active);
51
39
  --pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
52
40
  --pf-v5-c-form-control--m-readonly--m-plain--inset--base: 0;
53
41
  --pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
54
- --pf-v5-c-form-control--m-success--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
55
- --pf-v5-c-form-control--m-success--after--BorderBottomColor: var(--pf-v5-global--success-color--100);
56
- --pf-v5-c-form-control--m-success--PaddingRight: var(--pf-v5-global--spacer--xl);
57
- --pf-v5-c-form-control--m-warning--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
58
- --pf-v5-c-form-control--m-warning--after--BorderBottomColor: var(--pf-v5-global--warning-color--100);
59
- --pf-v5-c-form-control--m-warning--PaddingRight: var(--pf-v5-global--spacer--xl);
60
- --pf-v5-c-form-control--m-error--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
61
- --pf-v5-c-form-control--m-error--after--BorderBottomColor: var(--pf-v5-global--danger-color--100);
62
- --pf-v5-c-form-control--m-error--PaddingRight: var(--pf-v5-global--spacer--xl);
42
+ --pf-v5-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
43
+ --pf-v5-c-form-control--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
44
+ --pf-v5-c-form-control--m-success--PaddingRight: var(--pf-t--global--spacer--xl);
45
+ --pf-v5-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
46
+ --pf-v5-c-form-control--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
47
+ --pf-v5-c-form-control--m-warning--PaddingRight: var(--pf-t--global--spacer--xl);
48
+ --pf-v5-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
49
+ --pf-v5-c-form-control--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
50
+ --pf-v5-c-form-control--m-error--PaddingRight: var(--pf-t--global--spacer--xl);
63
51
  --pf-v5-c-form-control--m-error--icon--width: var(--pf-v5-c-form-control--FontSize);
64
52
  --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));
65
53
  --pf-v5-c-form-control--m-icon--icon--width: var(--pf-v5-c-form-control--FontSize);
66
- --pf-v5-c-form-control--m-icon--icon--spacer: var(--pf-v5-global--spacer--sm);
54
+ --pf-v5-c-form-control--m-icon--icon--spacer: var(--pf-t--global--spacer--sm);
67
55
  --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));
68
- --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-global--spacer--lg);
69
- --pf-v5-c-form-control__select--PaddingLeft: var(--pf-v5-global--spacer--sm);
70
- --pf-v5-c-form-control__select--m-success--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl);
71
- --pf-v5-c-form-control__select--m-warning--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl);
72
- --pf-v5-c-form-control__select--m-error--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl);
56
+ --pf-v5-c-form-control__select--PaddingRight: var(--pf-t--global--spacer--md);
57
+ --pf-v5-c-form-control__select--PaddingLeft: var(--pf-t--global--spacer--md);
58
+ --pf-v5-c-form-control__select--m-success--m-status--PaddingRight: var(--pf-t--global--spacer--3xl);
59
+ --pf-v5-c-form-control__select--m-warning--m-status--PaddingRight: var(--pf-t--global--spacer--3xl);
60
+ --pf-v5-c-form-control__select--m-error--m-status--PaddingRight: var(--pf-t--global--spacer--3xl);
73
61
  --pf-v5-c-form-control--textarea--Width: var(--pf-v5-c-form-control--Width);
74
62
  --pf-v5-c-form-control--textarea--Height: auto;
75
- --pf-v5-c-form-control__icon--PaddingTop: var(--pf-v5-global--spacer--form-element);
76
- --pf-v5-c-form-control__icon--Color: var(--pf-v5-global--icon--Color--light);
77
- --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-global--icon--Color--light);
78
- --pf-v5-c-form-control--m-success__icon--m-status--Color: var(--pf-v5-global--success-color--100);
79
- --pf-v5-c-form-control--m-warning__icon--m-status--Color: var(--pf-v5-global--warning-color--100);
80
- --pf-v5-c-form-control--m-error__icon--m-status--Color: var(--pf-v5-global--danger-color--100);
81
- --pf-v5-c-form-control__utilities--Gap: var(--pf-v5-global--spacer--sm);
63
+ --pf-v5-c-form-control__icon--PaddingTop: var(--pf-t--global--spacer--sm);
64
+ --pf-v5-c-form-control__icon--Color: var(--pf-t--global--icon--color--regular);
65
+ --pf-v5-c-form-control__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
66
+ --pf-v5-c-form-control--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
67
+ --pf-v5-c-form-control--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
68
+ --pf-v5-c-form-control--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
69
+ --pf-v5-c-form-control__utilities--Gap: var(--pf-t--global--spacer--sm);
82
70
  --pf-v5-c-form-control__utilities--PaddingTop: var(--pf-v5-c-form-control--inset--base);
83
71
  --pf-v5-c-form-control__utilities--PaddingRight: var(--pf-v5-c-form-control--inset--base);
84
- --pf-v5-c-form-control__toggle-icon--PaddingTop: var(--pf-v5-global--spacer--form-element);
72
+ --pf-v5-c-form-control__toggle-icon--PaddingTop: var(--pf-t--global--spacer--sm);
85
73
  --pf-v5-c-form-control__toggle-icon--PaddingRight: var(--pf-v5-c-form-control--inset--base);
86
74
  --pf-v5-c-form-control__toggle-icon--PaddingLeft: var(--pf-v5-c-form-control--inset--base);
87
- --pf-v5-c-form-control__toggle-icon--Color: var(--pf-v5-global--Color--100);
88
- --pf-v5-c-form-control--m-disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
89
- color: var(--pf-v5-c-form-control--Color);
75
+ --pf-v5-c-form-control__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
76
+ --pf-v5-c-form-control--m-disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
77
+ }
78
+
79
+ .pf-v5-c-form-control {
90
80
  position: relative;
91
81
  display: grid;
92
82
  grid-template-columns: 1fr auto;
@@ -97,6 +87,7 @@
97
87
  line-height: var(--pf-v5-c-form-control--LineHeight);
98
88
  resize: var(--pf-v5-c-form-control--Resize);
99
89
  background-color: var(--pf-v5-c-form-control--BackgroundColor);
90
+ border-radius: var(--pf-v5-c-form-control--BorderRadius);
100
91
  }
101
92
  .pf-v5-c-form-control::before, .pf-v5-c-form-control::after {
102
93
  position: absolute;
@@ -105,18 +96,14 @@
105
96
  content: "";
106
97
  }
107
98
  .pf-v5-c-form-control::before {
99
+ border-color: var(--pf-v5-c-form-control--before--BorderColor);
108
100
  border-style: var(--pf-v5-c-form-control--before--BorderStyle, solid);
109
- border-block-start-color: var(--pf-v5-c-form-control--before--BorderTopColor);
110
- border-block-start-width: var(--pf-v5-c-form-control--before--BorderTopWidth);
111
- border-block-end-color: var(--pf-v5-c-form-control--before--BorderBottomColor);
112
- border-block-end-width: var(--pf-v5-c-form-control--before--BorderBottomWidth);
113
- border-inline-start-color: var(--pf-v5-c-form-control--before--BorderLeftColor);
114
- border-inline-start-width: var(--pf-v5-c-form-control--before--BorderLeftWidth);
115
- border-inline-end-color: var(--pf-v5-c-form-control--before--BorderRightColor);
116
- border-inline-end-width: var(--pf-v5-c-form-control--before--BorderRightWidth);
101
+ border-width: var(--pf-v5-c-form-control--before--BorderWidth);
102
+ border-radius: var(--pf-v5-c-form-control--before--BorderRadius);
117
103
  }
118
104
  .pf-v5-c-form-control::after {
119
- 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);
105
+ 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);
106
+ border-radius: var(--pf-v5-c-form-control--before--BorderRadius);
120
107
  }
121
108
  .pf-v5-c-form-control > :is(input, select, textarea) {
122
109
  grid-row: 1/2;
@@ -128,6 +115,7 @@
128
115
  color: var(--pf-v5-c-form-control--Color);
129
116
  background-color: transparent;
130
117
  border: none;
118
+ border-radius: var(--pf-v5-c-form-control--BorderRadius);
131
119
  -moz-appearance: none;
132
120
  -webkit-appearance: none;
133
121
  }
@@ -142,11 +130,15 @@
142
130
  }
143
131
  .pf-v5-c-form-control.pf-m-readonly {
144
132
  --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-c-form-control--m-readonly--BackgroundColor);
133
+ --pf-v5-c-form-control--BorderColor: var(--pf-v5-c-form-control--m-readonly--BorderColor);
134
+ }
135
+ .pf-v5-c-form-control.pf-m-readonly:hover {
136
+ --pf-v5-c-form-control--hover--after--BorderColor: var(--pf-v5-c-form-control--m-readonly--hover--after--BorderColor);
145
137
  }
146
138
  .pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
147
- --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor);
148
- --pf-v5-c-form-control--focus--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-readonly--focus--after--BorderBottomWidth);
149
- --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor);
139
+ --pf-v5-c-form-control--hover--after--BorderColor: var(--pf-v5-c-form-control--m-readonly--hover--after--BorderColor);
140
+ --pf-v5-c-form-control--focus--after--BorderWidth: var(--pf-v5-c-form-control--m-readonly--focus--after--BorderWidth);
141
+ --pf-v5-c-form-control--focus--after--BorderColor: var(--pf-v5-c-form-control--m-readonly--focus--after--BorderColor);
150
142
  }
151
143
  .pf-v5-c-form-control.pf-m-readonly.pf-m-plain {
152
144
  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor);
@@ -156,15 +148,12 @@
156
148
  --pf-v5-c-form-control--OutlineOffset: var(--pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset);
157
149
  }
158
150
  .pf-v5-c-form-control:hover {
159
- --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--hover--after--BorderBottomColor);
160
- }
161
- .pf-v5-c-form-control:focus-within {
162
- --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--focus--after--BorderBottomColor);
163
- --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--focus--after--BorderBottomWidth);
151
+ --pf-v5-c-form-control--after--BorderColor: var(--pf-v5-c-form-control--hover--after--BorderColor);
152
+ --pf-v5-c-form-control--after--BorderWidth: var(--pf-v5-c-form-control--hover--after--BorderWidth);
164
153
  }
165
154
  .pf-v5-c-form-control.pf-m-expanded {
166
- --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-expanded--after--BorderBottomColor);
167
- --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-expanded--after--BorderBottomWidth);
155
+ --pf-v5-c-form-control--after--BorderColor: var(--pf-v5-c-form-control--m-expanded--after--BorderColor);
156
+ --pf-v5-c-form-control--after--BorderWidth: var(--pf-v5-c-form-control--m-expanded--after--BorderWidth);
168
157
  }
169
158
  .pf-v5-c-form-control.pf-m-disabled {
170
159
  --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-c-form-control--m-disabled--BackgroundColor);
@@ -177,30 +166,30 @@
177
166
  }
178
167
  .pf-v5-c-form-control.pf-m-error {
179
168
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-error--PaddingRight);
180
- --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-error--after--BorderBottomColor);
169
+ --pf-v5-c-form-control--after--BorderColor: var(--pf-v5-c-form-control--m-error--after--BorderColor);
181
170
  --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-c-form-control--m-error__icon--m-status--Color);
182
171
  --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-c-form-control__select--m-error--m-status--PaddingRight);
183
- --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-error--after--BorderBottomWidth);
172
+ --pf-v5-c-form-control--after--BorderWidth: var(--pf-v5-c-form-control--m-error--after--BorderWidth);
184
173
  }
185
174
  .pf-v5-c-form-control.pf-m-error.pf-m-icon {
186
175
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-icon--icon--PaddingRight);
187
176
  }
188
177
  .pf-v5-c-form-control.pf-m-success {
189
178
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-success--PaddingRight);
190
- --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-success--after--BorderBottomColor);
179
+ --pf-v5-c-form-control--after--BorderColor: var(--pf-v5-c-form-control--m-success--after--BorderColor);
191
180
  --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-c-form-control--m-success__icon--m-status--Color);
192
181
  --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-c-form-control__select--m-success--m-status--PaddingRight);
193
- --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-success--after--BorderBottomWidth);
182
+ --pf-v5-c-form-control--after--BorderWidth: var(--pf-v5-c-form-control--m-success--after--BorderWidth);
194
183
  }
195
184
  .pf-v5-c-form-control.pf-m-success.pf-m-icon {
196
185
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-icon--icon--PaddingRight);
197
186
  }
198
187
  .pf-v5-c-form-control.pf-m-warning {
199
188
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-warning--PaddingRight);
200
- --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-warning--after--BorderBottomColor);
189
+ --pf-v5-c-form-control--after--BorderColor: var(--pf-v5-c-form-control--m-warning--after--BorderColor);
201
190
  --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-c-form-control--m-warning__icon--m-status--Color);
202
191
  --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-c-form-control__select--m-warning--m-status--PaddingRight);
203
- --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-warning--after--BorderBottomWidth);
192
+ --pf-v5-c-form-control--after--BorderWidth: var(--pf-v5-c-form-control--m-warning--after--BorderWidth);
204
193
  }
205
194
  .pf-v5-c-form-control.pf-m-warning.pf-m-icon {
206
195
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-icon--icon--PaddingRight);
@@ -274,20 +263,6 @@
274
263
  pointer-events: none;
275
264
  }
276
265
 
277
- :where(.pf-v5-theme-dark) .pf-v5-c-form-control {
278
- --pf-v5-c-form-control--before--BorderTopColor: transparent;
279
- --pf-v5-c-form-control--before--BorderRightColor: transparent;
280
- --pf-v5-c-form-control--before--BorderLeftColor: transparent;
281
- --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
282
- --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
283
- --pf-v5-c-form-control--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
284
- --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
285
- --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-global--disabled-color--200);
286
- --pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
287
- --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor:var(--pf-v5-global--BorderColor--400);
288
- --pf-v5-c-form-control--m-disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--300);
289
- color: var(--pf-v5-global--Color--100);
290
- }
291
- :where(.pf-v5-theme-dark) .pf-v5-c-form-control::-webkit-calendar-picker-indicator {
292
- filter: invert(1);
266
+ select ~ .pf-v5-c-form-control__utilities {
267
+ --pf-v5-c-form-control__utilities--PaddingRight: 0;
293
268
  }