@patternfly/patternfly 6.0.0-alpha.203 → 6.0.0-alpha.205

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 (26) hide show
  1. package/components/Alert/alert.css +3 -3
  2. package/components/Alert/alert.scss +3 -3
  3. package/components/Button/button.css +34 -42
  4. package/components/Button/button.scss +34 -42
  5. package/components/Card/card.css +3 -3
  6. package/components/Card/card.scss +3 -3
  7. package/components/DataList/data-list.css +1 -1
  8. package/components/DataList/data-list.scss +1 -1
  9. package/components/Form/form.css +2 -2
  10. package/components/Form/form.scss +2 -2
  11. package/components/FormControl/form-control.css +14 -15
  12. package/components/FormControl/form-control.scss +14 -15
  13. package/components/MenuToggle/menu-toggle.css +16 -26
  14. package/components/MenuToggle/menu-toggle.scss +16 -32
  15. package/components/Table/table.css +4 -4
  16. package/components/Table/table.scss +4 -4
  17. package/components/TextInputGroup/text-input-group.css +11 -13
  18. package/components/TextInputGroup/text-input-group.scss +12 -14
  19. package/components/Wizard/wizard.css +1 -1
  20. package/components/Wizard/wizard.scss +1 -1
  21. package/components/_index.css +89 -110
  22. package/package.json +1 -1
  23. package/patternfly-no-globals.css +89 -110
  24. package/patternfly.css +89 -110
  25. package/patternfly.min.css +1 -1
  26. package/patternfly.min.css.map +1 -1
package/components/Alert/alert.css CHANGED
@@ -14,14 +14,14 @@
14
14
  --pf-v6-c-alert--PaddingBlockEnd: var(--pf-t--global--spacer--md);
15
15
  --pf-v6-c-alert--PaddingInlineStart: var(--pf-t--global--spacer--md);
16
16
  --pf-v6-c-alert--FontSize: var(--pf-t--global--font--size--body--default);
17
- --pf-v6-c-alert__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
18
- --pf-v6-c-alert__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
17
+ --pf-v6-c-alert__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
18
+ --pf-v6-c-alert__toggle--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
19
19
  --pf-v6-c-alert__toggle--MarginInlineEnd: var(--pf-t--global--spacer--sm);
20
20
  --pf-v6-c-alert__toggle-icon--Rotate: 0;
21
21
  --pf-v6-c-alert__toggle-icon--Transition: var(--pf-t--global--transition);
22
22
  --pf-v6-c-alert__icon--Color: var(--pf-t--global--icon--color--regular);
23
23
  --pf-v6-c-alert__icon--MarginBlockStart: 0.25rem;
24
- --pf-v6-c-alert__icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
24
+ --pf-v6-c-alert__icon--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
25
25
  --pf-v6-c-alert__icon--FontSize: var(--pf-t--global--icon--size--md);
26
26
  --pf-v6-c-alert__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
27
27
  --pf-v6-c-alert__title--Color: var(--pf-t--global--text--color--regular);
package/components/Alert/alert.scss CHANGED
@@ -19,8 +19,8 @@
19
19
  --#{$alert}--FontSize: var(--pf-t--global--font--size--body--default);
20
20
 
21
21
  // Toggle
22
- --#{$alert}__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
23
- --#{$alert}__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
22
+ --#{$alert}__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
23
+ --#{$alert}__toggle--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
24
24
  --#{$alert}__toggle--MarginInlineEnd: var(--pf-t--global--spacer--sm);
25
25
 
26
26
  // Toggle icon
@@ -30,7 +30,7 @@
30
30
  // Icon
31
31
  --#{$alert}__icon--Color: var(--pf-t--global--icon--color--regular);
32
32
  --#{$alert}__icon--MarginBlockStart: #{pf-size-prem(4px)};
33
- --#{$alert}__icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
33
+ --#{$alert}__icon--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
34
34
  --#{$alert}__icon--FontSize: var(--pf-t--global--icon--size--md);
35
35
 
36
36
  // Title
package/components/Button/button.css CHANGED
@@ -3,10 +3,10 @@
3
3
  --pf-v6-c-button--AlignItems: baseline;
4
4
  --pf-v6-c-button--JustifyContent: center;
5
5
  --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
6
- --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
7
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
8
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
9
- --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--lg);
6
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
7
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
8
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
9
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
10
10
  --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular);
11
11
  --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
12
12
  --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -65,8 +65,8 @@
65
65
  --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
66
66
  --pf-v6-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
67
67
  --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
68
- --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
69
- --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--md);
68
+ --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
69
+ --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
70
70
  --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
71
71
  --pf-v6-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
72
72
  --pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
@@ -103,17 +103,15 @@
103
103
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
104
104
  --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
105
105
  --pf-v6-c-button--span--m-link--m-inline--Display: inline;
106
- --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--xs);
107
- --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--xs);
106
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
107
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
108
108
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
109
- --pf-v6-c-button--m-plain--PaddingBlockStart: var(--pf-t--global--spacer--sm);
110
- --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
111
- --pf-v6-c-button--m-plain--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
112
- --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--sm);
113
- --pf-v6-c-button--m-plain--Color: var(--pf-t--global--text--color--regular);
114
- --pf-v6-c-button--m-plain__icon--Color: var(--pf-t--global--icon--color--regular);
109
+ --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
110
+ --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
111
+ --pf-v6-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
112
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-t--global--text--color--regular);
115
113
  --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
116
- --pf-v6-c-button--m-plain--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--m-plain--PaddingBlockStart) + var(--pf-v6-c-button--m-plain--PaddingBlockEnd));
114
+ --pf-v6-c-button--m-plain--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
117
115
  --pf-v6-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
118
116
  --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
119
117
  --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
@@ -121,10 +119,8 @@
121
119
  --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
122
120
  --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
123
121
  --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent;
124
- --pf-v6-c-button--m-plain--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
125
- --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
126
- --pf-v6-c-button--m-plain--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
127
- --pf-v6-c-button--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--xs);
122
+ --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
123
+ --pf-v6-c-button--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
128
124
  --pf-v6-c-button--m-plain--m-no-padding--MinWidth: auto;
129
125
  --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: 0;
130
126
  --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: 0;
@@ -135,8 +131,8 @@
135
131
  --pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
136
132
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
137
133
  --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
138
- --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--md);
139
- --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--md);
134
+ --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
135
+ --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
140
136
  --pf-v6-c-button--m-control--Color: var(--pf-t--global--text--color--regular);
141
137
  --pf-v6-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
142
138
  --pf-v6-c-button--m-control--BorderColor: var(--pf-t--global--border--color--default);
@@ -153,8 +149,8 @@
153
149
  --pf-v6-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
154
150
  --pf-v6-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
155
151
  --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
156
- --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--md);
157
- --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--md);
152
+ --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
153
+ --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
158
154
  --pf-v6-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
159
155
  --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
160
156
  --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -197,16 +193,16 @@
197
193
  --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
198
194
  --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
199
195
  --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
200
- --pf-v6-c-button--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--md);
201
- --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
202
- --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--md);
203
- --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--xl);
196
+ --pf-v6-c-button--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--spacious);
197
+ --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
198
+ --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
199
+ --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
204
200
  --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
205
201
  --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
206
- --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
207
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--md);
208
- --pf-v6-c-button--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
209
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-t--global--spacer--md);
202
+ --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
203
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
204
+ --pf-v6-c-button--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
205
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
210
206
  --pf-v6-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
211
207
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
212
208
  --pf-v6-c-button--disabled--BorderColor: transparent;
@@ -223,12 +219,12 @@
223
219
  --pf-v6-c-button__progress--TranslateY: -50%;
224
220
  --pf-v6-c-button__progress--TranslateX: 0;
225
221
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
226
- --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
222
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
227
223
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
228
- --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
229
- --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
230
- --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
231
- --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width));
224
+ --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
225
+ --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
226
+ --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
227
+ --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width));
232
228
  --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-v6-c-spinner--Color);
233
229
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
234
230
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
@@ -467,9 +463,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
467
463
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-plain--Color);
468
464
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain__icon--Color);
469
465
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
470
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-plain--PaddingBlockStart);
471
466
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd);
472
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--PaddingBlockEnd);
473
467
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart);
474
468
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button--m-in-progress--m-plain--Color);
475
469
  --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-plain--hover--Color);
@@ -479,9 +473,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
479
473
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-plain--disabled--Color);
480
474
  --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-plain--disabled__icon--Color);
481
475
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
482
- --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-small--PaddingBlockStart);
483
476
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
484
- --pf-v6-c-button--m-small--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingBlockEnd);
485
477
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart);
486
478
  min-width: var(--pf-v6-c-button--m-plain--MinWidth);
487
479
  }
@@ -489,9 +481,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
489
481
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--BackgroundColor);
490
482
  --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor);
491
483
  --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor);
492
- --pf-v6-c-button--m-plain--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart);
484
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart);
485
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd);
493
486
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd);
494
- --pf-v6-c-button--m-plain--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd);
495
487
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart);
496
488
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
497
489
  }
package/components/Button/button.scss CHANGED
@@ -5,10 +5,10 @@
5
5
  --#{$button}--AlignItems: baseline;
6
6
  --#{$button}--JustifyContent: center;
7
7
  --#{$button}--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
8
- --#{$button}--PaddingBlockStart: var(--pf-t--global--spacer--sm);
9
- --#{$button}--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
10
- --#{$button}--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11
- --#{$button}--PaddingInlineStart: var(--pf-t--global--spacer--lg);
8
+ --#{$button}--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
9
+ --#{$button}--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
10
+ --#{$button}--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
11
+ --#{$button}--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
12
12
  --#{$button}--Color: var(--pf-t--global--text--color--regular);
13
13
  --#{$button}--LineHeight: var(--pf-t--global--font--line-height--body);
14
14
  --#{$button}--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -79,8 +79,8 @@
79
79
 
80
80
  // Link
81
81
  --#{$button}--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
82
- --#{$button}--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
83
- --#{$button}--m-link--PaddingInlineStart: var(--pf-t--global--spacer--md);
82
+ --#{$button}--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
83
+ --#{$button}--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
84
84
  --#{$button}--m-link--Color: var(--pf-t--global--text--color--brand--default);
85
85
  --#{$button}--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
86
86
  --#{$button}--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
@@ -121,19 +121,17 @@
121
121
  --#{$button}--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
122
122
  --#{$button}--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
123
123
  --#{$button}--span--m-link--m-inline--Display: inline;
124
- --#{$button}--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--xs);
125
- --#{$button}--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--xs);
124
+ --#{$button}--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
125
+ --#{$button}--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
126
126
 
127
127
  // Plain
128
128
  --#{$button}--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
129
- --#{$button}--m-plain--PaddingBlockStart: var(--pf-t--global--spacer--sm);
130
- --#{$button}--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
131
- --#{$button}--m-plain--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
132
- --#{$button}--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--sm);
133
- --#{$button}--m-plain--Color: var(--pf-t--global--text--color--regular);
134
- --#{$button}--m-plain__icon--Color: var(--pf-t--global--icon--color--regular);
129
+ --#{$button}--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
130
+ --#{$button}--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
131
+ --#{$button}--m-plain--Color: var(--pf-t--global--icon--color--regular);
132
+ --#{$button}--m-plain__icon--Color: var(--pf-t--global--text--color--regular);
135
133
  --#{$button}--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
136
- --#{$button}--m-plain--MinWidth: calc(1em * var(--#{$button}--LineHeight) + var(--#{$button}--m-plain--PaddingBlockStart) + var(--#{$button}--m-plain--PaddingBlockEnd));
134
+ --#{$button}--m-plain--MinWidth: calc(1em * var(--#{$button}--LineHeight) + var(--#{$button}--PaddingBlockStart) + var(--#{$button}--PaddingBlockEnd));
137
135
  --#{$button}--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
138
136
  --#{$button}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
139
137
  --#{$button}--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
@@ -141,10 +139,8 @@
141
139
  --#{$button}--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
142
140
  --#{$button}--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
143
141
  --#{$button}--m-plain--disabled--BackgroundColor: transparent;
144
- --#{$button}--m-plain--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
145
- --#{$button}--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
146
- --#{$button}--m-plain--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
147
- --#{$button}--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--xs);
142
+ --#{$button}--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
143
+ --#{$button}--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
148
144
 
149
145
  // Plain no padding
150
146
  --#{$button}--m-plain--m-no-padding--MinWidth: auto;
@@ -159,8 +155,8 @@
159
155
 
160
156
  // Control
161
157
  --#{$button}--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
162
- --#{$button}--m-control--PaddingInlineStart: var(--pf-t--global--spacer--md);
163
- --#{$button}--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--md);
158
+ --#{$button}--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
159
+ --#{$button}--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
164
160
  --#{$button}--m-control--Color: var(--pf-t--global--text--color--regular);
165
161
  --#{$button}--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
166
162
  --#{$button}--m-control--BorderColor: var(--pf-t--global--border--color--default);
@@ -179,8 +175,8 @@
179
175
 
180
176
  // Stateful
181
177
  --#{$button}--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
182
- --#{$button}--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--md);
183
- --#{$button}--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--md);
178
+ --#{$button}--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
179
+ --#{$button}--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
184
180
 
185
181
  // Read
186
182
  --#{$button}--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -235,18 +231,18 @@
235
231
  --#{$button}--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
236
232
 
237
233
  // CTA
238
- --#{$button}--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--md);
239
- --#{$button}--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
240
- --#{$button}--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--md);
241
- --#{$button}--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--xl);
234
+ --#{$button}--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--spacious);
235
+ --#{$button}--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
236
+ --#{$button}--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
237
+ --#{$button}--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
242
238
  --#{$button}--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
243
239
  --#{$button}--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
244
240
 
245
241
  // Small
246
- --#{$button}--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
247
- --#{$button}--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--md);
248
- --#{$button}--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
249
- --#{$button}--m-small--PaddingInlineStart: var(--pf-t--global--spacer--md);
242
+ --#{$button}--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
243
+ --#{$button}--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
244
+ --#{$button}--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
245
+ --#{$button}--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
250
246
 
251
247
  // Disabled
252
248
  --#{$button}--disabled--Color: var(--pf-t--global--text--color--on-disabled);
@@ -269,12 +265,12 @@
269
265
  --#{$button}__progress--TranslateY: -50%;
270
266
  --#{$button}__progress--TranslateX: 0;
271
267
  --#{$button}__progress--InsetBlockStart: 50%;
272
- --#{$button}__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
268
+ --#{$button}__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
273
269
  --#{$button}__progress--Color: var(--#{$button}__icon--Color);
274
- --#{$button}--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--#{$button}__progress--width) / 2);
275
- --#{$button}--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--#{$button}__progress--width) / 2);
276
- --#{$button}--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
277
- --#{$button}--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--#{$button}__progress--width));
270
+ --#{$button}--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--#{$button}__progress--width) / 2);
271
+ --#{$button}--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--#{$button}__progress--width) / 2);
272
+ --#{$button}--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
273
+ --#{$button}--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--#{$button}__progress--width));
278
274
  --#{$button}--m-in-progress--m-plain--Color: var(--#{$spinner}--Color);
279
275
  --#{$button}--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
280
276
  --#{$button}--m-in-progress--m-plain__progress--TranslateX: -50%;
@@ -547,9 +543,7 @@
547
543
  --#{$button}--Color: var(--#{$button}--m-plain--Color);
548
544
  --#{$button}__icon--Color: var(--#{$button}--m-plain__icon--Color);
549
545
  --#{$button}--BackgroundColor: var(--#{$button}--m-plain--BackgroundColor);
550
- --#{$button}--PaddingBlockStart: var(--#{$button}--m-plain--PaddingBlockStart);
551
546
  --#{$button}--PaddingInlineEnd: var(--#{$button}--m-plain--PaddingInlineEnd);
552
- --#{$button}--PaddingBlockEnd: var(--#{$button}--m-plain--PaddingBlockEnd);
553
547
  --#{$button}--PaddingInlineStart: var(--#{$button}--m-plain--PaddingInlineStart);
554
548
  --#{$button}__progress--Color: var(--#{$button}--m-in-progress--m-plain--Color);
555
549
  --#{$button}--hover--Color: var(--#{$button}--m-plain--hover--Color);
@@ -559,18 +553,16 @@
559
553
  --#{$button}--disabled--Color: var(--#{$button}--m-plain--disabled--Color);
560
554
  --#{$button}--disabled__icon--Color: var(--#{$button}--m-plain--disabled__icon--Color);
561
555
  --#{$button}--disabled--BackgroundColor: var(--#{$button}--m-plain--disabled--BackgroundColor);
562
- --#{$button}--m-small--PaddingBlockStart: var(--#{$button}--m-plain--m-small--PaddingBlockStart);
563
556
  --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-small--PaddingInlineEnd);
564
- --#{$button}--m-small--PaddingBlockEnd: var(--#{$button}--m-plain--m-small--PaddingBlockEnd);
565
557
  --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-small--PaddingInlineStart);
566
558
 
567
559
  &.pf-m-no-padding {
568
560
  --#{$button}--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--BackgroundColor);
569
561
  --#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--hover--BackgroundColor);
570
562
  --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--m-clicked--BackgroundColor);
571
- --#{$button}--m-plain--PaddingBlockStart: var(--#{$button}--m-plain--m-no-padding--PaddingBlockStart);
563
+ --#{$button}--PaddingBlockStart: var(--#{$button}--m-plain--m-no-padding--PaddingBlockStart);
564
+ --#{$button}--PaddingBlockEnd: var(--#{$button}--m-plain--m-no-padding--PaddingBlockEnd);
572
565
  --#{$button}--m-plain--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--PaddingInlineEnd);
573
- --#{$button}--m-plain--PaddingBlockEnd: var(--#{$button}--m-plain--m-no-padding--PaddingBlockEnd);
574
566
  --#{$button}--m-plain--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--PaddingInlineStart);
575
567
 
576
568
  min-width: var(--#{$button}--m-plain--m-no-padding--MinWidth);
package/components/Card/card.css CHANGED
@@ -24,7 +24,7 @@
24
24
  --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
25
25
  --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
26
26
  --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
27
- --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
27
+ --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
28
28
  --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
29
29
  --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
30
30
  --pf-v6-c-card__header-toggle-icon--Transition: var(--pf-t--global--transition);
@@ -67,8 +67,8 @@
67
67
  --pf-v6-c-card--m-full-height--Height: 100%;
68
68
  --pf-v6-c-card--m-plain--BorderColor: transparent;
69
69
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
70
- --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--compact) * -1);
71
- --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
70
+ --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
71
+ --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
72
72
  }
73
73
 
74
74
  .pf-v6-c-card {
package/components/Card/card.scss CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
  // Expandable
30
30
  --#{$card}__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
31
- --#{$card}__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
31
+ --#{$card}__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
32
32
  --#{$card}__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
33
33
  --#{$card}__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
34
34
  --#{$card}__header-toggle-icon--Transition: var(--pf-t--global--transition);
@@ -98,8 +98,8 @@
98
98
  --#{$card}--m-plain--BackgroundColor: transparent;
99
99
 
100
100
  // Toggle right
101
- --#{$card}__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--compact) * -1);
102
- --#{$card}__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
101
+ --#{$card}__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
102
+ --#{$card}__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
103
103
  }
104
104
 
105
105
  .#{$card} {
package/components/DataList/data-list.css CHANGED
@@ -439,7 +439,7 @@
439
439
  --pf-v6-c-data-list--cell--WhiteSpace: normal;
440
440
  --pf-v6-c-data-list--cell--WordBreak: normal;
441
441
  --pf-v6-c-data-list--cell--m-truncate--MinWidth: 5ch;
442
- --pf-v6-c-data-list__toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--sm) * -1);
442
+ --pf-v6-c-data-list__toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
443
443
  --pf-v6-c-data-list__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
444
444
  --pf-v6-c-data-list__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
445
445
  --pf-v6-c-data-list__toggle-icon--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
package/components/DataList/data-list.scss CHANGED
@@ -56,7 +56,7 @@
56
56
  --#{$data-list}--cell--m-truncate--MinWidth: 5ch;
57
57
 
58
58
  // toggle
59
- --#{$data-list}__toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--sm) * -1); // offset toggle to align left
59
+ --#{$data-list}__toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1); // offset toggle to align left
60
60
  --#{$data-list}__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
61
61
  --#{$data-list}__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
62
62
  --#{$data-list}__toggle-icon--Height: calc(var(--#{$data-list}--FontSize) * var(--#{$data-list}--LineHeight));
package/components/Form/form.css CHANGED
@@ -55,8 +55,8 @@
55
55
  --pf-v6-c-form__field-group__field-group__field-group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
56
56
  --pf-v6-c-form__field-group-header-toggle--BorderWidth--base: var(--pf-t--global--border--width--divider--default);
57
57
  --pf-v6-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth: var(--pf-v6-c-form__field-group-header-toggle--BorderWidth--base);
58
- --pf-v6-c-form__field-group-toggle-button--MarginBlockStart: calc(var(--pf-v6-c-button--m-plain--PaddingBlockStart) * -1);
59
- --pf-v6-c-form__field-group-toggle-button--MarginBlockEnd: calc(var(--pf-v6-c-button--m-plain--PaddingBlockEnd) * -1);
58
+ --pf-v6-c-form__field-group-toggle-button--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
59
+ --pf-v6-c-form__field-group-toggle-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
60
60
  --pf-v6-c-form__field-group-toggle-icon--Transition: var(--pf-t--global--transition);
61
61
  --pf-v6-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
62
62
  --pf-v6-c-form__field-group-toggle-icon--Rotate: 0;
package/components/Form/form.scss CHANGED
@@ -132,8 +132,8 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
132
132
  --#{$form}__field-group__field-group__field-group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
133
133
  --#{$form}__field-group-header-toggle--BorderWidth--base: var(--pf-t--global--border--width--divider--default);
134
134
  --#{$form}__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth: var(--#{$form}__field-group-header-toggle--BorderWidth--base);
135
- --#{$form}__field-group-toggle-button--MarginBlockStart: calc(var(--#{$button}--m-plain--PaddingBlockStart) * -1);
136
- --#{$form}__field-group-toggle-button--MarginBlockEnd: calc(var(--#{$button}--m-plain--PaddingBlockEnd) * -1);
135
+ --#{$form}__field-group-toggle-button--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
136
+ --#{$form}__field-group-toggle-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
137
137
  --#{$form}__field-group-toggle-icon--Transition: var(--pf-t--global--transition);
138
138
  --#{$form}__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
139
139
  --#{$form}__field-group-toggle-icon--Rotate: 0;
package/components/FormControl/form-control.css CHANGED
@@ -14,7 +14,7 @@
14
14
  --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
15
15
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
16
16
  --pf-v6-c-form-control--Width: 100%;
17
- --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--md);
17
+ --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
18
18
  --pf-v6-c-form-control--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
19
19
  --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
20
20
  --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
@@ -40,35 +40,34 @@
40
40
  --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
41
41
  --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
42
42
  --pf-v6-c-form-control--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
43
- --pf-v6-c-form-control--m-success--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-form-control--ColumnGap));
43
+ --pf-v6-c-form-control--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--ColumnGap));
44
44
  --pf-v6-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
45
45
  --pf-v6-c-form-control--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
46
- --pf-v6-c-form-control--m-warning--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-form-control--ColumnGap));
46
+ --pf-v6-c-form-control--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--ColumnGap));
47
47
  --pf-v6-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
48
48
  --pf-v6-c-form-control--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
49
- --pf-v6-c-form-control--m-error--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-form-control--ColumnGap));
49
+ --pf-v6-c-form-control--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--ColumnGap));
50
50
  --pf-v6-c-form-control--m-error--icon--width: var(--pf-v6-c-form-control--FontSize);
51
51
  --pf-v6-c-form-control--m-icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
52
52
  --pf-v6-c-form-control--m-icon--icon--width: var(--pf-v6-c-form-control--FontSize);
53
- --pf-v6-c-form-control--m-icon--icon--spacer: var(--pf-t--global--spacer--sm);
53
+ --pf-v6-c-form-control--m-icon--icon--spacer: calc(var(--pf-t--global--spacer--control--horizontal--default) / 2);
54
54
  --pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-error--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
55
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-t--global--spacer--md);
56
- --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-t--global--spacer--md);
57
- --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
58
- --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
59
- --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
55
+ --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
56
+ --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
57
+ --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
58
+ --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
59
+ --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
60
60
  --pf-v6-c-form-control--textarea--Width: var(--pf-v6-c-form-control--Width);
61
61
  --pf-v6-c-form-control--textarea--Height: auto;
62
- --pf-v6-c-form-control__icon--PaddingBlockStart: var(--pf-t--global--spacer--sm);
63
62
  --pf-v6-c-form-control__icon--Color: var(--pf-t--global--icon--color--regular);
63
+ --pf-v6-c-form-control__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
64
64
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
65
65
  --pf-v6-c-form-control--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
66
66
  --pf-v6-c-form-control--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
67
67
  --pf-v6-c-form-control--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
68
68
  --pf-v6-c-form-control__utilities--Gap: var(--pf-t--global--spacer--sm);
69
- --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-v6-c-form-control--inset--base);
69
+ --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
70
70
  --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
71
- --pf-v6-c-form-control__toggle-icon--PaddingBlockStart: var(--pf-t--global--spacer--sm);
72
71
  --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
73
72
  --pf-v6-c-form-control__toggle-icon--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
74
73
  --pf-v6-c-form-control__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -236,7 +235,7 @@
236
235
  }
237
236
 
238
237
  .pf-v6-c-form-control__icon {
239
- padding-block-start: var(--pf-v6-c-form-control__icon--PaddingBlockStart);
238
+ font-size: var(--pf-v6-c-form-control__icon--FontSize);
240
239
  color: var(--pf-v6-c-form-control__icon--Color);
241
240
  }
242
241
  .pf-v6-c-form-control__icon.pf-m-status {
@@ -246,7 +245,6 @@
246
245
  .pf-v6-c-form-control__toggle-icon {
247
246
  grid-row: 1/2;
248
247
  grid-column: 3;
249
- padding-block-start: var(--pf-v6-c-form-control__toggle-icon--PaddingBlockStart);
250
248
  padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart);
251
249
  padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd);
252
250
  color: var(--pf-v6-c-form-control__toggle-icon--Color);
@@ -259,6 +257,7 @@
259
257
  grid-row: 1/2;
260
258
  grid-column: 2;
261
259
  gap: var(--pf-v6-c-form-control__utilities--Gap);
260
+ padding-block-start: var(--pf-v6-c-form-control__utilities--PaddingBlockStart);
262
261
  padding-inline-end: var(--pf-v6-c-form-control__utilities--PaddingInlineEnd);
263
262
  pointer-events: none;
264
263
  }