@patternfly/patternfly 6.0.0-alpha.45 → 6.0.0-alpha.47

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 (33) hide show
  1. package/components/Button/button.css +3 -1
  2. package/components/Button/button.scss +3 -1
  3. package/components/Check/check.css +17 -16
  4. package/components/Check/check.scss +17 -20
  5. package/components/Form/form.css +68 -87
  6. package/components/Form/form.scss +67 -98
  7. package/components/FormControl/form-control.css +86 -111
  8. package/components/FormControl/form-control.scss +88 -92
  9. package/components/NotificationDrawer/notification-drawer.css +104 -115
  10. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  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/components/Switch/switch.css +41 -37
  16. package/components/Switch/switch.scss +47 -42
  17. package/docs/components/Button/examples/Button.md +29 -2
  18. package/docs/components/Form/examples/Form.md +23 -11
  19. package/docs/demos/Alert/examples/Alert.md +24 -0
  20. package/docs/demos/Form/examples/BasicForms.md +31 -10
  21. package/docs/demos/Modal/examples/Modal.md +3 -3
  22. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
  23. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
  24. package/package.json +1 -1
  25. package/patternfly-no-globals.css +336 -384
  26. package/patternfly-theme-dark-unversioned.css +336 -384
  27. package/patternfly.css +336 -384
  28. package/patternfly.min.css +1 -1
  29. package/patternfly.min.css.map +1 -1
  30. package/components/Form/themes/dark/form.scss +0 -7
  31. package/components/FormControl/themes/dark/form-control.scss +0 -24
  32. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  33. package/components/Switch/themes/dark/switch.scss +0 -11
package/components/FormControl/form-control.scss CHANGED
@@ -1,55 +1,55 @@
1
+ :root,
1
2
  .#{$form-control} {
2
- --#{$form-control}--ColumnGap: var(--#{$pf-global}--spacer--sm);
3
- --#{$form-control}--Color: var(--#{$pf-global}--Color--100);
4
- --#{$form-control}--FontSize: var(--#{$pf-global}--FontSize--md);
5
- --#{$form-control}--LineHeight: var(--#{$pf-global}--LineHeight--md);
3
+ --#{$form-control}--ColumnGap: var(--pf-t--global--spacer--sm);
4
+ --#{$form-control}--Color: var(--pf-t--global--text--color--regular);
5
+ --#{$form-control}--FontSize: var(--pf-t--global--font--size--body--default);
6
+ --#{$form-control}--LineHeight: var(--pf-t--global--font--line-height--body);
6
7
  --#{$form-control}--Resize: none;
7
- --#{$form-control}--OutlineOffset: -2px;
8
- --#{$form-control}--before--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
9
- --#{$form-control}--before--BorderRightWidth: var(--#{$pf-global}--BorderWidth--sm);
10
- --#{$form-control}--before--BorderBottomWidth: 0;
11
- --#{$form-control}--before--BorderLeftWidth: var(--#{$pf-global}--BorderWidth--sm);
12
- --#{$form-control}--before--BorderTopColor: var(--#{$pf-global}--BorderColor--300);
13
- --#{$form-control}--before--BorderRightColor: var(--#{$pf-global}--BorderColor--300);
14
- --#{$form-control}--before--BorderBottomColor: transparent;
15
- --#{$form-control}--before--BorderLeftColor: var(--#{$pf-global}--BorderColor--300);
16
- --#{$form-control}--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
17
- --#{$form-control}--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--200);
18
- --#{$form-control}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
8
+ --#{$form-control}--OutlineOffset: -6px;
9
+ --#{$form-control}--BorderRadius: var(--pf-t--global--border--radius--small);
10
+ --#{$form-control}--before--BorderWidth: var(--pf-t--global--border--width--control--default);
11
+ --#{$form-control}--before--BorderColor: var(--pf-t--global--border--color--default);
12
+ --#{$form-control}--before--BorderRadius: var(--#{$form-control}--BorderRadius);
13
+ --#{$form-control}--after--BorderWidth: var(--pf-t--global--border--width--control--default);
14
+ --#{$form-control}--after--BorderColor: transparent;
15
+ --#{$form-control}--after--BorderRadius: var(--#{$form-control}--BorderRadius);
16
+ --#{$form-control}--BackgroundColor: var(--pf-t--global--background--color--control--default);
19
17
  --#{$form-control}--Width: 100%;
20
18
 
21
19
  // padding
22
- --#{$form-control}--inset--base: var(--#{$pf-global}--spacer--sm);
23
- --#{$form-control}--PaddingTop: var(--#{$pf-global}--spacer--form-element);
24
- --#{$form-control}--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
20
+ --#{$form-control}--inset--base: var(--pf-t--global--spacer--md);
21
+ --#{$form-control}--PaddingTop: var(--pf-t--global--spacer--sm); // (--#{$pf-global}--spacer--form-element);
22
+ --#{$form-control}--PaddingBottom: var(--pf-t--global--spacer--sm); // var(--#{$pf-global}--spacer--form-element);
25
23
  --#{$form-control}--PaddingRight: var(--#{$form-control}--inset--base);
26
24
  --#{$form-control}--PaddingLeft: var(--#{$form-control}--inset--base);
27
25
 
28
26
  // hover
29
- --#{$form-control}--hover--after--BorderBottomColor: var(--#{$pf-global}--primary-color--100);
27
+ --#{$form-control}--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
28
+ --#{$form-control}--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
30
29
 
31
30
  // focus
32
- --#{$form-control}--focus--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
33
- --#{$form-control}--focus--after--BorderBottomColor: var(--#{$pf-global}--primary-color--100);
31
+ --#{$form-control}--focus--after--BorderWidth: var(--pf-t--global--border--width--control--active);
32
+ --#{$form-control}--focus--after--BorderColor: var(--pf-t--global--border--color--active);
34
33
 
35
34
  // expanded
36
- --#{$form-control}--m-expanded--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
37
- --#{$form-control}--m-expanded--after--BorderBottomColor: var(--#{$pf-global}--primary-color--100);
35
+ --#{$form-control}--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--active);
36
+ --#{$form-control}--m-expanded--after--BorderColor: var(--pf-t--global--border--color--active);
38
37
 
39
38
  // placeholder
40
- --#{$form-control}--m-placeholder--Color: var(--#{$pf-global}--Color--dark-200);
41
- --#{$form-control}--m-placeholder--child--Color: var(--#{$pf-global}--Color--100);
39
+ --#{$form-control}--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
40
+ --#{$form-control}--m-placeholder--child--Color: var(--pf-t--global--text--color--regular);
42
41
 
43
42
  // disabled
44
- --#{$form-control}--m-disabled--Color: var(--#{$pf-global}--disabled-color--100);
45
- --#{$form-control}--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
43
+ --#{$form-control}--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
44
+ --#{$form-control}--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
46
45
  --#{$form-control}--m-disabled--after--BorderColor: transparent;
47
46
 
48
47
  // readonly
49
- --#{$form-control}--m-readonly--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
50
- --#{$form-control}--m-readonly--hover--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--200);
51
- --#{$form-control}--m-readonly--focus--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
52
- --#{$form-control}--m-readonly--focus--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--200);
48
+ --#{$form-control}--m-readonly--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
49
+ --#{$form-control}--m-readonly--BorderColor: transparent;
50
+ --#{$form-control}--m-readonly--hover--after--BorderColor: revert;
51
+ --#{$form-control}--m-readonly--focus--after--BorderWidth: var(--pf-t--global--border--width--control--active);
52
+ --#{$form-control}--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--active);
53
53
 
54
54
  // readonly plain
55
55
  --#{$form-control}--m-readonly--m-plain--BackgroundColor: transparent;
@@ -57,65 +57,64 @@
57
57
  --#{$form-control}--m-readonly--m-plain--OutlineOffset: 0;
58
58
 
59
59
  // success
60
- --#{$form-control}--m-success--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
61
- --#{$form-control}--m-success--after--BorderBottomColor: var(--#{$pf-global}--success-color--100);
62
- --#{$form-control}--m-success--PaddingRight: var(--#{$pf-global}--spacer--xl);
60
+ --#{$form-control}--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
61
+ --#{$form-control}--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
62
+ --#{$form-control}--m-success--PaddingRight: var(--pf-t--global--spacer--xl);
63
63
 
64
64
  // warning
65
- --#{$form-control}--m-warning--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
66
- --#{$form-control}--m-warning--after--BorderBottomColor: var(--#{$pf-global}--warning-color--100);
67
- --#{$form-control}--m-warning--PaddingRight: var(--#{$pf-global}--spacer--xl);
65
+ --#{$form-control}--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
66
+ --#{$form-control}--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
67
+ --#{$form-control}--m-warning--PaddingRight: var(--pf-t--global--spacer--xl);
68
68
 
69
69
  // error
70
- --#{$form-control}--m-error--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--md);
71
- --#{$form-control}--m-error--after--BorderBottomColor: var(--#{$pf-global}--danger-color--100);
72
- --#{$form-control}--m-error--PaddingRight: var(--#{$pf-global}--spacer--xl);
70
+ --#{$form-control}--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
71
+ --#{$form-control}--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
72
+ --#{$form-control}--m-error--PaddingRight: var(--pf-t--global--spacer--xl);
73
73
  --#{$form-control}--m-error--icon--width: var(--#{$form-control}--FontSize);
74
74
 
75
75
  // custom icon
76
76
  --#{$form-control}--m-icon--PaddingRight: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
77
77
  --#{$form-control}--m-icon--icon--width: var(--#{$form-control}--FontSize);
78
- --#{$form-control}--m-icon--icon--spacer: var(--#{$pf-global}--spacer--sm);
78
+ --#{$form-control}--m-icon--icon--spacer: var(--pf-t--global--spacer--sm);
79
79
  --#{$form-control}--m-icon--icon--PaddingRight: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-error--icon--width) + var(--#{$form-control}--m-icon--icon--spacer) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
80
- --#{$form-control}__select--PaddingRight: var(--#{$pf-global}--spacer--lg);
81
- --#{$form-control}__select--PaddingLeft: var(--#{$pf-global}--spacer--sm);
80
+ --#{$form-control}__select--PaddingRight: var(--pf-t--global--spacer--md);
81
+ --#{$form-control}__select--PaddingLeft: var(--pf-t--global--spacer--md);
82
82
 
83
83
  // Select success
84
- --#{$form-control}__select--m-success--m-status--PaddingRight: var(--#{$pf-global}--spacer--3xl);
84
+ --#{$form-control}__select--m-success--m-status--PaddingRight: var(--pf-t--global--spacer--3xl);
85
85
 
86
86
  // Select warning
87
- --#{$form-control}__select--m-warning--m-status--PaddingRight: var(--#{$pf-global}--spacer--3xl);
87
+ --#{$form-control}__select--m-warning--m-status--PaddingRight: var(--pf-t--global--spacer--3xl);
88
88
 
89
89
  // Select invalid
90
- --#{$form-control}__select--m-error--m-status--PaddingRight: var(--#{$pf-global}--spacer--3xl);
90
+ --#{$form-control}__select--m-error--m-status--PaddingRight: var(--pf-t--global--spacer--3xl);
91
91
 
92
92
  // Textarea
93
93
  --#{$form-control}--textarea--Width: var(--#{$form-control}--Width);
94
94
  --#{$form-control}--textarea--Height: auto;
95
95
 
96
96
  // Form control icon
97
- --#{$form-control}__icon--PaddingTop: var(--#{$pf-global}--spacer--form-element);
98
- --#{$form-control}__icon--Color: var(--#{$pf-global}--icon--Color--light);
99
- --#{$form-control}__icon--m-status--Color: var(--#{$pf-global}--icon--Color--light);
100
- --#{$form-control}--m-success__icon--m-status--Color: var(--#{$pf-global}--success-color--100);
101
- --#{$form-control}--m-warning__icon--m-status--Color: var(--#{$pf-global}--warning-color--100);
102
- --#{$form-control}--m-error__icon--m-status--Color: var(--#{$pf-global}--danger-color--100);
97
+ --#{$form-control}__icon--PaddingTop: var(--pf-t--global--spacer--sm);
98
+ --#{$form-control}__icon--Color: var(--pf-t--global--icon--color--regular);
99
+ --#{$form-control}__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
100
+ --#{$form-control}--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
101
+ --#{$form-control}--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
102
+ --#{$form-control}--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
103
103
 
104
104
  // Form control utilities
105
- --#{$form-control}__utilities--Gap: var(--#{$pf-global}--spacer--sm);
105
+ --#{$form-control}__utilities--Gap: var(--pf-t--global--spacer--sm);
106
106
  --#{$form-control}__utilities--PaddingTop: var(--#{$form-control}--inset--base);
107
107
  --#{$form-control}__utilities--PaddingRight: var(--#{$form-control}--inset--base);
108
108
 
109
109
  // Form control select toggle icon
110
- --#{$form-control}__toggle-icon--PaddingTop: var(--#{$pf-global}--spacer--form-element);
110
+ --#{$form-control}__toggle-icon--PaddingTop: var(--pf-t--global--spacer--sm);
111
111
  --#{$form-control}__toggle-icon--PaddingRight: var(--#{$form-control}--inset--base);
112
112
  --#{$form-control}__toggle-icon--PaddingLeft: var(--#{$form-control}--inset--base);
113
- --#{$form-control}__toggle-icon--Color: var(--#{$pf-global}--Color--100);
114
- --#{$form-control}--m-disabled__toggle-icon--Color: var(--#{$pf-global}--disabled-color--100);
115
-
116
- // This component always needs to be light
117
- @include pf-v5-t-light("--#{$form-control}--Color");
113
+ --#{$form-control}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
114
+ --#{$form-control}--m-disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
115
+ }
118
116
 
117
+ .#{$form-control} {
119
118
  position: relative;
120
119
  display: grid;
121
120
  grid-template-columns: 1fr auto;
@@ -126,6 +125,7 @@
126
125
  line-height: var(--#{$form-control}--LineHeight);
127
126
  resize: var(--#{$form-control}--Resize);
128
127
  background-color: var(--#{$form-control}--BackgroundColor);
128
+ border-radius: var(--#{$form-control}--BorderRadius);
129
129
 
130
130
  &::before,
131
131
  &::after {
@@ -136,19 +136,15 @@
136
136
  }
137
137
 
138
138
  &::before {
139
+ border-color: var(--#{$form-control}--before--BorderColor);
139
140
  border-style: var(--#{$form-control}--before--BorderStyle, solid);
140
- border-block-start-color: var(--#{$form-control}--before--BorderTopColor);
141
- border-block-start-width: var(--#{$form-control}--before--BorderTopWidth);
142
- border-block-end-color: var(--#{$form-control}--before--BorderBottomColor);
143
- border-block-end-width: var(--#{$form-control}--before--BorderBottomWidth);
144
- border-inline-start-color: var(--#{$form-control}--before--BorderLeftColor);
145
- border-inline-start-width: var(--#{$form-control}--before--BorderLeftWidth);
146
- border-inline-end-color: var(--#{$form-control}--before--BorderRightColor);
147
- border-inline-end-width: var(--#{$form-control}--before--BorderRightWidth);
141
+ border-width: var(--#{$form-control}--before--BorderWidth);
142
+ border-radius: var(--#{$form-control}--before--BorderRadius);
148
143
  }
149
144
 
150
145
  &::after {
151
- border-block-end: var(--#{$form-control}--after--BorderBottomWidth) var(--#{$form-control}--after--BorderStyle, solid) var(--#{$form-control}--after--BorderBottomColor);
146
+ border: var(--#{$form-control}--after--BorderWidth) var(--#{$form-control}--after--BorderStyle, solid) var(--#{$form-control}--after--BorderColor);
147
+ border-radius: var(--#{$form-control}--before--BorderRadius);
152
148
  }
153
149
 
154
150
  > :is(input, select, textarea) {
@@ -161,6 +157,8 @@
161
157
  color: var(--#{$form-control}--Color);
162
158
  background-color: transparent;
163
159
  border: none;
160
+ border-radius: var(--#{$form-control}--BorderRadius);
161
+
164
162
  // stylelint-disable
165
163
  -moz-appearance: none;
166
164
  -webkit-appearance: none;
@@ -181,12 +179,17 @@
181
179
 
182
180
  &.pf-m-readonly {
183
181
  --#{$form-control}--BackgroundColor: var(--#{$form-control}--m-readonly--BackgroundColor);
182
+ --#{$form-control}--BorderColor: var(--#{$form-control}--m-readonly--BorderColor);
183
+
184
+ &:hover {
185
+ --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-readonly--hover--after--BorderColor);
186
+ }
184
187
 
185
188
  // stylelint-disable selector-not-notation
186
189
  &:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
187
- --#{$form-control}--hover--after--BorderBottomColor: var(--#{$form-control}--m-readonly--hover--after--BorderBottomColor);
188
- --#{$form-control}--focus--after--BorderBottomWidth: var(--#{$form-control}--m-readonly--focus--after--BorderBottomWidth);
189
- --#{$form-control}--focus--after--BorderBottomColor: var(--#{$form-control}--m-readonly--focus--after--BorderBottomColor);
190
+ --#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-readonly--hover--after--BorderColor);
191
+ --#{$form-control}--focus--after--BorderWidth: var(--#{$form-control}--m-readonly--focus--after--BorderWidth);
192
+ --#{$form-control}--focus--after--BorderColor: var(--#{$form-control}--m-readonly--focus--after--BorderColor);
190
193
  }
191
194
 
192
195
  &.pf-m-plain {
@@ -199,17 +202,13 @@
199
202
  }
200
203
 
201
204
  &:hover {
202
- --#{$form-control}--after--BorderBottomColor: var(--#{$form-control}--hover--after--BorderBottomColor);
203
- }
204
-
205
- &:focus-within {
206
- --#{$form-control}--after--BorderBottomColor: var(--#{$form-control}--focus--after--BorderBottomColor);
207
- --#{$form-control}--after--BorderBottomWidth: var(--#{$form-control}--focus--after--BorderBottomWidth);
205
+ --#{$form-control}--after--BorderColor: var(--#{$form-control}--hover--after--BorderColor);
206
+ --#{$form-control}--after--BorderWidth: var(--#{$form-control}--hover--after--BorderWidth);
208
207
  }
209
208
 
210
209
  &.pf-m-expanded {
211
- --#{$form-control}--after--BorderBottomColor: var(--#{$form-control}--m-expanded--after--BorderBottomColor);
212
- --#{$form-control}--after--BorderBottomWidth: var(--#{$form-control}--m-expanded--after--BorderBottomWidth);
210
+ --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-expanded--after--BorderColor);
211
+ --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-expanded--after--BorderWidth);
213
212
  }
214
213
 
215
214
  &.pf-m-disabled {
@@ -225,10 +224,10 @@
225
224
 
226
225
  &.pf-m-error {
227
226
  --#{$form-control}--PaddingRight: var(--#{$form-control}--m-error--PaddingRight);
228
- --#{$form-control}--after--BorderBottomColor: var(--#{$form-control}--m-error--after--BorderBottomColor);
227
+ --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-error--after--BorderColor);
229
228
  --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-error__icon--m-status--Color);
230
229
  --#{$form-control}__select--PaddingRight: var(--#{$form-control}__select--m-error--m-status--PaddingRight);
231
- --#{$form-control}--after--BorderBottomWidth: var(--#{$form-control}--m-error--after--BorderBottomWidth);
230
+ --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-error--after--BorderWidth);
232
231
 
233
232
  &.pf-m-icon {
234
233
  --#{$form-control}--PaddingRight: var(--#{$form-control}--m-icon--icon--PaddingRight);
@@ -237,10 +236,10 @@
237
236
 
238
237
  &.pf-m-success {
239
238
  --#{$form-control}--PaddingRight: var(--#{$form-control}--m-success--PaddingRight);
240
- --#{$form-control}--after--BorderBottomColor: var(--#{$form-control}--m-success--after--BorderBottomColor);
239
+ --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-success--after--BorderColor);
241
240
  --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-success__icon--m-status--Color);
242
241
  --#{$form-control}__select--PaddingRight: var(--#{$form-control}__select--m-success--m-status--PaddingRight);
243
- --#{$form-control}--after--BorderBottomWidth: var(--#{$form-control}--m-success--after--BorderBottomWidth);
242
+ --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-success--after--BorderWidth);
244
243
 
245
244
  &.pf-m-icon {
246
245
  --#{$form-control}--PaddingRight: var(--#{$form-control}--m-icon--icon--PaddingRight);
@@ -249,10 +248,10 @@
249
248
 
250
249
  &.pf-m-warning {
251
250
  --#{$form-control}--PaddingRight: var(--#{$form-control}--m-warning--PaddingRight);
252
- --#{$form-control}--after--BorderBottomColor: var(--#{$form-control}--m-warning--after--BorderBottomColor);
251
+ --#{$form-control}--after--BorderColor: var(--#{$form-control}--m-warning--after--BorderColor);
253
252
  --#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-warning__icon--m-status--Color);
254
253
  --#{$form-control}__select--PaddingRight: var(--#{$form-control}__select--m-warning--m-status--PaddingRight);
255
- --#{$form-control}--after--BorderBottomWidth: var(--#{$form-control}--m-warning--after--BorderBottomWidth);
254
+ --#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-warning--after--BorderWidth);
256
255
 
257
256
  &.pf-m-icon {
258
257
  --#{$form-control}--PaddingRight: var(--#{$form-control}--m-icon--icon--PaddingRight);
@@ -345,9 +344,6 @@
345
344
  pointer-events: none;
346
345
  }
347
346
 
348
- // stylelint-disable no-invalid-position-at-import-rule
349
- @import "themes/dark/form-control";
350
-
351
- @include pf-v5-theme-dark {
352
- @include pf-v5-theme-dark-form-control;
353
- }
347
+ select ~ .#{$form-control}__utilities {
348
+ --pf-v5-c-form-control__utilities--PaddingRight: 0;
349
+ }