@patternfly/react-styles 6.0.0-alpha.32 → 6.0.0-alpha.34

Sign up to get free protection for your applications and to get access to all the features.
Files changed (14) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/css/components/Alert/alert.css +3 -3
  3. package/css/components/Button/button.css +34 -42
  4. package/css/components/Card/card.css +3 -3
  5. package/css/components/DataList/data-list.css +1 -1
  6. package/css/components/Form/form.css +2 -2
  7. package/css/components/FormControl/form-control.css +14 -15
  8. package/css/components/MenuToggle/menu-toggle.css +16 -26
  9. package/css/components/Table/table.css +4 -4
  10. package/css/components/TextInputGroup/text-input-group.css +11 -13
  11. package/css/components/Wizard/wizard.css +1 -1
  12. package/css/components/_index.css +89 -110
  13. package/package.json +3 -3
  14. package/.eslintrc.json +0 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,16 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [6.0.0-alpha.34](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.33...@patternfly/react-styles@6.0.0-alpha.34) (2024-08-08)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-styles
9
+
10
+ # [6.0.0-alpha.33](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.32...@patternfly/react-styles@6.0.0-alpha.33) (2024-07-29)
11
+
12
+ ### Bug Fixes
13
+
14
+ - **deps:** bump v6 alphas ([#10816](https://github.com/patternfly/patternfly-react/issues/10816)) ([d99aa9b](https://github.com/patternfly/patternfly-react/commit/d99aa9b3157f4559a8741415528832946aa32ddf))
15
+
6
16
  # [6.0.0-alpha.32](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.31...@patternfly/react-styles@6.0.0-alpha.32) (2024-07-29)
7
17
 
8
18
  ### Features
package/css/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/css/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/css/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/css/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/css/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/css/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
  }
package/css/components/MenuToggle/menu-toggle.css CHANGED
@@ -1,9 +1,9 @@
1
1
  :where(:root, .pf-v6-c-menu-toggle) {
2
2
  --pf-v6-c-menu-toggle--ColumnGap: var(--pf-t--global--spacer--sm);
3
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
4
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
5
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
6
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
4
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
5
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
6
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
7
7
  --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
8
8
  --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
9
9
  --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
@@ -30,15 +30,9 @@
30
30
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
31
31
  --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
32
32
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
33
- --pf-v6-c-menu-toggle--m-button--PaddingInlineStart: var(--pf-t--global--spacer--md);
34
- --pf-v6-c-menu-toggle--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
33
+ --pf-v6-c-menu-toggle--m-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
34
+ --pf-v6-c-menu-toggle--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
35
35
  --pf-v6-c-menu-toggle--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
36
- --pf-v6-c-menu-toggle--m-control--PaddingInlineStart: var(--pf-t--global--spacer--sm);
37
- --pf-v6-c-menu-toggle--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
38
- --pf-v6-c-menu-toggle--m-control--BorderRadius: var(--pf-t--global--border--radius--pill);
39
- --pf-v6-c-menu-toggle--m-action--PaddingInlineStart: var(--pf-t--global--spacer--lg);
40
- --pf-v6-c-menu-toggle--m-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
41
- --pf-v6-c-menu-toggle--m-action--BorderRadius: var(--pf-t--global--border--radius--pill);
42
36
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineStart);
43
37
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineEnd);
44
38
  --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
@@ -69,8 +63,8 @@
69
63
  --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
70
64
  --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
71
65
  --pf-v6-c-menu-toggle__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--sm));
72
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
73
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--lg);
66
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
67
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
74
68
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
75
69
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
76
70
  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
@@ -84,8 +78,8 @@
84
78
  --pf-v6-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
85
79
  --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
86
80
  --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
87
- --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
88
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
81
+ --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
82
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
89
83
  --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
90
84
  --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
91
85
  --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
@@ -95,13 +89,11 @@
95
89
  --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
96
90
  --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
97
91
  --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
98
- --pf-v6-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
99
92
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
100
- --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
101
- --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
102
- --pf-v6-c-menu-toggle--m-small--ColumnGap: calc(var(--pf-t--global--spacer--control--horizontal--compact) / 2);
103
- --pf-v6-c-menu-toggle--m-small--FontSize: var(--pf-t--global--font--size--body--sm);
104
- --pf-v6-c-menu-toggle--m-small__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--xs));
93
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
94
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
95
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
96
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
105
97
  --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
106
98
  --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
107
99
  --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
@@ -229,9 +221,8 @@
229
221
  .pf-v6-c-menu-toggle.pf-m-small {
230
222
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
231
223
  --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
232
- --pf-v6-c-menu-toggle--FontSize: var(--pf-v6-c-menu-toggle--m-small--FontSize);
233
- --pf-v6-c-menu-toggle--ColumnGap: var(--pf-v6-c-menu-toggle--m-small--ColumnGap);
234
- --pf-v6-c-menu-toggle__controls--MinWidth: var(--pf-v6-c-menu-toggle--m-small__controls--MinWidth);
224
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
225
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
235
226
  }
236
227
  .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
237
228
  background-color: transparent;
@@ -334,7 +325,6 @@
334
325
  align-items: stretch;
335
326
  }
336
327
  .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
337
- --pf-v6-c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingInlineEnd);
338
328
  --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
339
329
  flex: 1;
340
330
  }
package/css/components/Table/table.css CHANGED
@@ -125,8 +125,8 @@
125
125
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs);
126
126
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md);
127
127
  --pf-v6-c-table__subhead--Color: var(--pf-t--global--text--color--subtle);
128
- --pf-v6-c-table__nested-column-header__button--PaddingInlineStart: calc(var(--pf-v6-c-table__button--PaddingInlineStart) - var(--pf-t--global--spacer--sm));
129
- --pf-v6-c-table__nested-column-header__button--PaddingInlineEnd: calc(var(--pf-v6-c-table__button--PaddingInlineEnd) - var(--pf-t--global--spacer--xs));
128
+ --pf-v6-c-table__nested-column-header__button--PaddingInlineStart: calc(var(--pf-v6-c-table__button--PaddingInlineStart) - var(--pf-t--global--spacer--control--horizontal--plain));
129
+ --pf-v6-c-table__nested-column-header__button--PaddingInlineEnd: calc(var(--pf-v6-c-table__button--PaddingInlineEnd) - (var(--pf-t--global--spacer--control--horizontal--plain) / 2));
130
130
  --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
131
131
  --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);
132
132
  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
@@ -576,10 +576,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
576
576
  --pf-v6-c-button--FontSize: var(--pf-v6-c-table__favorite--c-button--FontSize);
577
577
  }
578
578
  .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button {
579
- --pf-v6-c-button--m-plain--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
579
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
580
580
  }
581
581
  .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
582
- --pf-v6-c-button--m-plain--hover--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
582
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
583
583
  }
584
584
 
585
585
  .pf-v6-c-table__draggable .pf-v6-c-button {
package/css/components/TextInputGroup/text-input-group.css CHANGED
@@ -11,8 +11,8 @@
11
11
  --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
12
12
  --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
13
13
  --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
14
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
15
- --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
14
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
15
+ --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
16
16
  --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
17
17
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
18
18
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
@@ -21,18 +21,19 @@
21
21
  --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
22
22
  --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
23
23
  --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
24
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
25
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
26
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
27
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
28
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
29
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
30
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--sm);
24
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
25
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
26
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
27
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
28
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
29
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
30
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
31
31
  --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
32
32
  --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
33
33
  --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
34
34
  --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
35
35
  --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
36
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
36
37
  --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--sm);
37
38
  --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
38
39
  --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -44,8 +45,6 @@
44
45
  --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
45
46
  --pf-v6-c-text-input-group__icon--TranslateY: -50%;
46
47
  --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
47
- --pf-v6-c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
48
- --pf-v6-c-text-input-group__utilities--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
49
48
  --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
50
49
  --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
51
50
  }
@@ -125,8 +124,6 @@
125
124
  min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
126
125
  }
127
126
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
128
- padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
129
- padding-block-end: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockEnd);
130
127
  margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
131
128
  }
132
129
  .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
@@ -147,6 +144,7 @@
147
144
  position: absolute;
148
145
  inset-block-start: 50%;
149
146
  inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
147
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
150
148
  color: var(--pf-v6-c-text-input-group__icon--Color);
151
149
  transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
152
150
  }
package/css/components/Wizard/wizard.css CHANGED
@@ -10,7 +10,7 @@
10
10
  --pf-v6-c-wizard__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
11
11
  --pf-v6-c-wizard__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
12
12
  --pf-v6-c-wizard__header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
13
- --pf-v6-c-wizard__close--InsetBlockStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-button--m-plain--PaddingBlockStart));
13
+ --pf-v6-c-wizard__close--InsetBlockStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-t--global--spacer--control--vertical--plain));
14
14
  --pf-v6-c-wizard__close--InsetInlineEnd: var(--pf-t--global--spacer--sm);
15
15
  --pf-v6-c-wizard__close--FontSize: var(--pf-t--global--font--size--xl);
16
16
  --pf-v6-c-wizard__title--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
package/css/components/_index.css CHANGED
@@ -391,14 +391,14 @@
391
391
  --pf-v6-c-alert--PaddingBlockEnd: var(--pf-t--global--spacer--md);
392
392
  --pf-v6-c-alert--PaddingInlineStart: var(--pf-t--global--spacer--md);
393
393
  --pf-v6-c-alert--FontSize: var(--pf-t--global--font--size--body--default);
394
- --pf-v6-c-alert__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
395
- --pf-v6-c-alert__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
394
+ --pf-v6-c-alert__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
395
+ --pf-v6-c-alert__toggle--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
396
396
  --pf-v6-c-alert__toggle--MarginInlineEnd: var(--pf-t--global--spacer--sm);
397
397
  --pf-v6-c-alert__toggle-icon--Rotate: 0;
398
398
  --pf-v6-c-alert__toggle-icon--Transition: var(--pf-t--global--transition);
399
399
  --pf-v6-c-alert__icon--Color: var(--pf-t--global--icon--color--regular);
400
400
  --pf-v6-c-alert__icon--MarginBlockStart: 0.25rem;
401
- --pf-v6-c-alert__icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
401
+ --pf-v6-c-alert__icon--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
402
402
  --pf-v6-c-alert__icon--FontSize: var(--pf-t--global--icon--size--md);
403
403
  --pf-v6-c-alert__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
404
404
  --pf-v6-c-alert__title--Color: var(--pf-t--global--text--color--regular);
@@ -1409,10 +1409,10 @@ button.pf-v6-c-breadcrumb__link {
1409
1409
  --pf-v6-c-button--AlignItems: baseline;
1410
1410
  --pf-v6-c-button--JustifyContent: center;
1411
1411
  --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1412
- --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
1413
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
1414
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
1415
- --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--lg);
1412
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1413
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1414
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1415
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1416
1416
  --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular);
1417
1417
  --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
1418
1418
  --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -1471,8 +1471,8 @@ button.pf-v6-c-breadcrumb__link {
1471
1471
  --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
1472
1472
  --pf-v6-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1473
1473
  --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
1474
- --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
1475
- --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--md);
1474
+ --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1475
+ --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
1476
1476
  --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
1477
1477
  --pf-v6-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1478
1478
  --pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
@@ -1509,17 +1509,15 @@ button.pf-v6-c-breadcrumb__link {
1509
1509
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
1510
1510
  --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
1511
1511
  --pf-v6-c-button--span--m-link--m-inline--Display: inline;
1512
- --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--xs);
1513
- --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--xs);
1512
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
1513
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
1514
1514
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
1515
- --pf-v6-c-button--m-plain--PaddingBlockStart: var(--pf-t--global--spacer--sm);
1516
- --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1517
- --pf-v6-c-button--m-plain--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
1518
- --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1519
- --pf-v6-c-button--m-plain--Color: var(--pf-t--global--text--color--regular);
1520
- --pf-v6-c-button--m-plain__icon--Color: var(--pf-t--global--icon--color--regular);
1515
+ --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1516
+ --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
1517
+ --pf-v6-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
1518
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-t--global--text--color--regular);
1521
1519
  --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1522
- --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));
1520
+ --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));
1523
1521
  --pf-v6-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
1524
1522
  --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1525
1523
  --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
@@ -1527,10 +1525,8 @@ button.pf-v6-c-breadcrumb__link {
1527
1525
  --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
1528
1526
  --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
1529
1527
  --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent;
1530
- --pf-v6-c-button--m-plain--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1531
- --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1532
- --pf-v6-c-button--m-plain--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1533
- --pf-v6-c-button--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1528
+ --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1529
+ --pf-v6-c-button--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1534
1530
  --pf-v6-c-button--m-plain--m-no-padding--MinWidth: auto;
1535
1531
  --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: 0;
1536
1532
  --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: 0;
@@ -1541,8 +1537,8 @@ button.pf-v6-c-breadcrumb__link {
1541
1537
  --pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
1542
1538
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
1543
1539
  --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
1544
- --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--md);
1545
- --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--md);
1540
+ --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1541
+ --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1546
1542
  --pf-v6-c-button--m-control--Color: var(--pf-t--global--text--color--regular);
1547
1543
  --pf-v6-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
1548
1544
  --pf-v6-c-button--m-control--BorderColor: var(--pf-t--global--border--color--default);
@@ -1559,8 +1555,8 @@ button.pf-v6-c-breadcrumb__link {
1559
1555
  --pf-v6-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
1560
1556
  --pf-v6-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
1561
1557
  --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
1562
- --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--md);
1563
- --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--md);
1558
+ --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1559
+ --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1564
1560
  --pf-v6-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
1565
1561
  --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
1566
1562
  --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -1603,16 +1599,16 @@ button.pf-v6-c-breadcrumb__link {
1603
1599
  --pf-v6-c-button--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
1604
1600
  --pf-v6-c-button--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
1605
1601
  --pf-v6-c-button--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
1606
- --pf-v6-c-button--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--md);
1607
- --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
1608
- --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--md);
1609
- --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--xl);
1602
+ --pf-v6-c-button--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--spacious);
1603
+ --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
1604
+ --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
1605
+ --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
1610
1606
  --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
1611
1607
  --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
1612
- --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1613
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--md);
1614
- --pf-v6-c-button--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1615
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-t--global--spacer--md);
1608
+ --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
1609
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
1610
+ --pf-v6-c-button--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
1611
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
1616
1612
  --pf-v6-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
1617
1613
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1618
1614
  --pf-v6-c-button--disabled--BorderColor: transparent;
@@ -1629,12 +1625,12 @@ button.pf-v6-c-breadcrumb__link {
1629
1625
  --pf-v6-c-button__progress--TranslateY: -50%;
1630
1626
  --pf-v6-c-button__progress--TranslateX: 0;
1631
1627
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
1632
- --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
1628
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1633
1629
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
1634
- --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
1635
- --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
1636
- --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
1637
- --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width));
1630
+ --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
1631
+ --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
1632
+ --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1633
+ --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width));
1638
1634
  --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-v6-c-spinner--Color);
1639
1635
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
1640
1636
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
@@ -1873,9 +1869,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1873
1869
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-plain--Color);
1874
1870
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain__icon--Color);
1875
1871
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
1876
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-plain--PaddingBlockStart);
1877
1872
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd);
1878
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--PaddingBlockEnd);
1879
1873
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart);
1880
1874
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button--m-in-progress--m-plain--Color);
1881
1875
  --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-plain--hover--Color);
@@ -1885,9 +1879,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1885
1879
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-plain--disabled--Color);
1886
1880
  --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-plain--disabled__icon--Color);
1887
1881
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
1888
- --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-small--PaddingBlockStart);
1889
1882
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
1890
- --pf-v6-c-button--m-small--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingBlockEnd);
1891
1883
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart);
1892
1884
  min-width: var(--pf-v6-c-button--m-plain--MinWidth);
1893
1885
  }
@@ -1895,9 +1887,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1895
1887
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--BackgroundColor);
1896
1888
  --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor);
1897
1889
  --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor);
1898
- --pf-v6-c-button--m-plain--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart);
1890
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart);
1891
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd);
1899
1892
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd);
1900
- --pf-v6-c-button--m-plain--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd);
1901
1893
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart);
1902
1894
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
1903
1895
  }
@@ -2230,7 +2222,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2230
2222
  --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2231
2223
  --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2232
2224
  --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2233
- --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
2225
+ --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
2234
2226
  --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2235
2227
  --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
2236
2228
  --pf-v6-c-card__header-toggle-icon--Transition: var(--pf-t--global--transition);
@@ -2273,8 +2265,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2273
2265
  --pf-v6-c-card--m-full-height--Height: 100%;
2274
2266
  --pf-v6-c-card--m-plain--BorderColor: transparent;
2275
2267
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
2276
- --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--compact) * -1);
2277
- --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
2268
+ --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
2269
+ --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
2278
2270
  }
2279
2271
 
2280
2272
  .pf-v6-c-card {
@@ -3641,7 +3633,7 @@ ul) {
3641
3633
  --pf-v6-c-data-list--cell--WhiteSpace: normal;
3642
3634
  --pf-v6-c-data-list--cell--WordBreak: normal;
3643
3635
  --pf-v6-c-data-list--cell--m-truncate--MinWidth: 5ch;
3644
- --pf-v6-c-data-list__toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--sm) * -1);
3636
+ --pf-v6-c-data-list__toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
3645
3637
  --pf-v6-c-data-list__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3646
3638
  --pf-v6-c-data-list__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3647
3639
  --pf-v6-c-data-list__toggle-icon--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
@@ -6346,8 +6338,8 @@ ul) {
6346
6338
  --pf-v6-c-form__field-group__field-group__field-group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
6347
6339
  --pf-v6-c-form__field-group-header-toggle--BorderWidth--base: var(--pf-t--global--border--width--divider--default);
6348
6340
  --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);
6349
- --pf-v6-c-form__field-group-toggle-button--MarginBlockStart: calc(var(--pf-v6-c-button--m-plain--PaddingBlockStart) * -1);
6350
- --pf-v6-c-form__field-group-toggle-button--MarginBlockEnd: calc(var(--pf-v6-c-button--m-plain--PaddingBlockEnd) * -1);
6341
+ --pf-v6-c-form__field-group-toggle-button--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
6342
+ --pf-v6-c-form__field-group-toggle-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
6351
6343
  --pf-v6-c-form__field-group-toggle-icon--Transition: var(--pf-t--global--transition);
6352
6344
  --pf-v6-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
6353
6345
  --pf-v6-c-form__field-group-toggle-icon--Rotate: 0;
@@ -6824,7 +6816,7 @@ ul) {
6824
6816
  --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
6825
6817
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
6826
6818
  --pf-v6-c-form-control--Width: 100%;
6827
- --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--md);
6819
+ --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
6828
6820
  --pf-v6-c-form-control--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
6829
6821
  --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
6830
6822
  --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
@@ -6850,35 +6842,34 @@ ul) {
6850
6842
  --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
6851
6843
  --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
6852
6844
  --pf-v6-c-form-control--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
6853
- --pf-v6-c-form-control--m-success--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-form-control--ColumnGap));
6845
+ --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));
6854
6846
  --pf-v6-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
6855
6847
  --pf-v6-c-form-control--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
6856
- --pf-v6-c-form-control--m-warning--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-form-control--ColumnGap));
6848
+ --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));
6857
6849
  --pf-v6-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
6858
6850
  --pf-v6-c-form-control--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
6859
- --pf-v6-c-form-control--m-error--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-form-control--ColumnGap));
6851
+ --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));
6860
6852
  --pf-v6-c-form-control--m-error--icon--width: var(--pf-v6-c-form-control--FontSize);
6861
6853
  --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));
6862
6854
  --pf-v6-c-form-control--m-icon--icon--width: var(--pf-v6-c-form-control--FontSize);
6863
- --pf-v6-c-form-control--m-icon--icon--spacer: var(--pf-t--global--spacer--sm);
6855
+ --pf-v6-c-form-control--m-icon--icon--spacer: calc(var(--pf-t--global--spacer--control--horizontal--default) / 2);
6864
6856
  --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));
6865
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-t--global--spacer--md);
6866
- --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-t--global--spacer--md);
6867
- --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
6868
- --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
6869
- --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
6857
+ --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
6858
+ --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
6859
+ --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));
6860
+ --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));
6861
+ --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));
6870
6862
  --pf-v6-c-form-control--textarea--Width: var(--pf-v6-c-form-control--Width);
6871
6863
  --pf-v6-c-form-control--textarea--Height: auto;
6872
- --pf-v6-c-form-control__icon--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6873
6864
  --pf-v6-c-form-control__icon--Color: var(--pf-t--global--icon--color--regular);
6865
+ --pf-v6-c-form-control__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
6874
6866
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
6875
6867
  --pf-v6-c-form-control--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
6876
6868
  --pf-v6-c-form-control--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
6877
6869
  --pf-v6-c-form-control--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
6878
6870
  --pf-v6-c-form-control__utilities--Gap: var(--pf-t--global--spacer--sm);
6879
- --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-v6-c-form-control--inset--base);
6871
+ --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
6880
6872
  --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
6881
- --pf-v6-c-form-control__toggle-icon--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6882
6873
  --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
6883
6874
  --pf-v6-c-form-control__toggle-icon--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
6884
6875
  --pf-v6-c-form-control__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -7046,7 +7037,7 @@ ul) {
7046
7037
  }
7047
7038
 
7048
7039
  .pf-v6-c-form-control__icon {
7049
- padding-block-start: var(--pf-v6-c-form-control__icon--PaddingBlockStart);
7040
+ font-size: var(--pf-v6-c-form-control__icon--FontSize);
7050
7041
  color: var(--pf-v6-c-form-control__icon--Color);
7051
7042
  }
7052
7043
  .pf-v6-c-form-control__icon.pf-m-status {
@@ -7056,7 +7047,6 @@ ul) {
7056
7047
  .pf-v6-c-form-control__toggle-icon {
7057
7048
  grid-row: 1/2;
7058
7049
  grid-column: 3;
7059
- padding-block-start: var(--pf-v6-c-form-control__toggle-icon--PaddingBlockStart);
7060
7050
  padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart);
7061
7051
  padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd);
7062
7052
  color: var(--pf-v6-c-form-control__toggle-icon--Color);
@@ -7069,6 +7059,7 @@ ul) {
7069
7059
  grid-row: 1/2;
7070
7060
  grid-column: 2;
7071
7061
  gap: var(--pf-v6-c-form-control__utilities--Gap);
7062
+ padding-block-start: var(--pf-v6-c-form-control__utilities--PaddingBlockStart);
7072
7063
  padding-inline-end: var(--pf-v6-c-form-control__utilities--PaddingInlineEnd);
7073
7064
  pointer-events: none;
7074
7065
  }
@@ -9951,10 +9942,10 @@ ul.pf-v6-c-list {
9951
9942
 
9952
9943
  :where(:root, .pf-v6-c-menu-toggle) {
9953
9944
  --pf-v6-c-menu-toggle--ColumnGap: var(--pf-t--global--spacer--sm);
9954
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
9955
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
9956
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
9957
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
9945
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
9946
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
9947
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
9948
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
9958
9949
  --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
9959
9950
  --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
9960
9951
  --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
@@ -9981,15 +9972,9 @@ ul.pf-v6-c-list {
9981
9972
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
9982
9973
  --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
9983
9974
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
9984
- --pf-v6-c-menu-toggle--m-button--PaddingInlineStart: var(--pf-t--global--spacer--md);
9985
- --pf-v6-c-menu-toggle--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
9975
+ --pf-v6-c-menu-toggle--m-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
9976
+ --pf-v6-c-menu-toggle--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
9986
9977
  --pf-v6-c-menu-toggle--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
9987
- --pf-v6-c-menu-toggle--m-control--PaddingInlineStart: var(--pf-t--global--spacer--sm);
9988
- --pf-v6-c-menu-toggle--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
9989
- --pf-v6-c-menu-toggle--m-control--BorderRadius: var(--pf-t--global--border--radius--pill);
9990
- --pf-v6-c-menu-toggle--m-action--PaddingInlineStart: var(--pf-t--global--spacer--lg);
9991
- --pf-v6-c-menu-toggle--m-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
9992
- --pf-v6-c-menu-toggle--m-action--BorderRadius: var(--pf-t--global--border--radius--pill);
9993
9978
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineStart);
9994
9979
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineEnd);
9995
9980
  --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
@@ -10020,8 +10005,8 @@ ul.pf-v6-c-list {
10020
10005
  --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
10021
10006
  --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
10022
10007
  --pf-v6-c-menu-toggle__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--sm));
10023
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
10024
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--lg);
10008
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
10009
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
10025
10010
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
10026
10011
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
10027
10012
  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
@@ -10035,8 +10020,8 @@ ul.pf-v6-c-list {
10035
10020
  --pf-v6-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
10036
10021
  --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
10037
10022
  --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
10038
- --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
10039
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
10023
+ --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
10024
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
10040
10025
  --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
10041
10026
  --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
10042
10027
  --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
@@ -10046,13 +10031,11 @@ ul.pf-v6-c-list {
10046
10031
  --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
10047
10032
  --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
10048
10033
  --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
10049
- --pf-v6-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
10050
10034
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
10051
- --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
10052
- --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
10053
- --pf-v6-c-menu-toggle--m-small--ColumnGap: calc(var(--pf-t--global--spacer--control--horizontal--compact) / 2);
10054
- --pf-v6-c-menu-toggle--m-small--FontSize: var(--pf-t--global--font--size--body--sm);
10055
- --pf-v6-c-menu-toggle--m-small__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--xs));
10035
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
10036
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
10037
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
10038
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
10056
10039
  --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
10057
10040
  --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
10058
10041
  --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
@@ -10180,9 +10163,8 @@ ul.pf-v6-c-list {
10180
10163
  .pf-v6-c-menu-toggle.pf-m-small {
10181
10164
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
10182
10165
  --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
10183
- --pf-v6-c-menu-toggle--FontSize: var(--pf-v6-c-menu-toggle--m-small--FontSize);
10184
- --pf-v6-c-menu-toggle--ColumnGap: var(--pf-v6-c-menu-toggle--m-small--ColumnGap);
10185
- --pf-v6-c-menu-toggle__controls--MinWidth: var(--pf-v6-c-menu-toggle--m-small__controls--MinWidth);
10166
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
10167
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
10186
10168
  }
10187
10169
  .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
10188
10170
  background-color: transparent;
@@ -10285,7 +10267,6 @@ ul.pf-v6-c-list {
10285
10267
  align-items: stretch;
10286
10268
  }
10287
10269
  .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
10288
- --pf-v6-c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingInlineEnd);
10289
10270
  --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
10290
10271
  flex: 1;
10291
10272
  }
@@ -16338,8 +16319,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16338
16319
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs);
16339
16320
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md);
16340
16321
  --pf-v6-c-table__subhead--Color: var(--pf-t--global--text--color--subtle);
16341
- --pf-v6-c-table__nested-column-header__button--PaddingInlineStart: calc(var(--pf-v6-c-table__button--PaddingInlineStart) - var(--pf-t--global--spacer--sm));
16342
- --pf-v6-c-table__nested-column-header__button--PaddingInlineEnd: calc(var(--pf-v6-c-table__button--PaddingInlineEnd) - var(--pf-t--global--spacer--xs));
16322
+ --pf-v6-c-table__nested-column-header__button--PaddingInlineStart: calc(var(--pf-v6-c-table__button--PaddingInlineStart) - var(--pf-t--global--spacer--control--horizontal--plain));
16323
+ --pf-v6-c-table__nested-column-header__button--PaddingInlineEnd: calc(var(--pf-v6-c-table__button--PaddingInlineEnd) - (var(--pf-t--global--spacer--control--horizontal--plain) / 2));
16343
16324
  --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
16344
16325
  --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);
16345
16326
  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
@@ -16789,10 +16770,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
16789
16770
  --pf-v6-c-button--FontSize: var(--pf-v6-c-table__favorite--c-button--FontSize);
16790
16771
  }
16791
16772
  .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button {
16792
- --pf-v6-c-button--m-plain--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
16773
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
16793
16774
  }
16794
16775
  .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
16795
- --pf-v6-c-button--m-plain--hover--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
16776
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
16796
16777
  }
16797
16778
 
16798
16779
  .pf-v6-c-table__draggable .pf-v6-c-button {
@@ -18781,8 +18762,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18781
18762
  --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
18782
18763
  --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
18783
18764
  --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
18784
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
18785
- --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
18765
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
18766
+ --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
18786
18767
  --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
18787
18768
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
18788
18769
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
@@ -18791,18 +18772,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18791
18772
  --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
18792
18773
  --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
18793
18774
  --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
18794
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
18795
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
18796
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
18797
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
18798
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
18799
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
18800
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--sm);
18775
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
18776
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
18777
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
18778
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
18779
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
18780
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
18781
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
18801
18782
  --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
18802
18783
  --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
18803
18784
  --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
18804
18785
  --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
18805
18786
  --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
18787
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
18806
18788
  --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--sm);
18807
18789
  --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
18808
18790
  --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -18814,8 +18796,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18814
18796
  --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
18815
18797
  --pf-v6-c-text-input-group__icon--TranslateY: -50%;
18816
18798
  --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
18817
- --pf-v6-c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
18818
- --pf-v6-c-text-input-group__utilities--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
18819
18799
  --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
18820
18800
  --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
18821
18801
  }
@@ -18895,8 +18875,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18895
18875
  min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
18896
18876
  }
18897
18877
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
18898
- padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
18899
- padding-block-end: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockEnd);
18900
18878
  margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
18901
18879
  }
18902
18880
  .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
@@ -18917,6 +18895,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18917
18895
  position: absolute;
18918
18896
  inset-block-start: 50%;
18919
18897
  inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
18898
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
18920
18899
  color: var(--pf-v6-c-text-input-group__icon--Color);
18921
18900
  transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
18922
18901
  }
@@ -21896,7 +21875,7 @@ label.pf-v6-c-tree-view__node-text {
21896
21875
  --pf-v6-c-wizard__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
21897
21876
  --pf-v6-c-wizard__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
21898
21877
  --pf-v6-c-wizard__header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
21899
- --pf-v6-c-wizard__close--InsetBlockStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-button--m-plain--PaddingBlockStart));
21878
+ --pf-v6-c-wizard__close--InsetBlockStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-t--global--spacer--control--vertical--plain));
21900
21879
  --pf-v6-c-wizard__close--InsetInlineEnd: var(--pf-t--global--spacer--sm);
21901
21880
  --pf-v6-c-wizard__close--FontSize: var(--pf-t--global--font--size--xl);
21902
21881
  --pf-v6-c-wizard__title--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "6.0.0-alpha.32",
3
+ "version": "6.0.0-alpha.34",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -19,10 +19,10 @@
19
19
  "clean": "rimraf dist css"
20
20
  },
21
21
  "devDependencies": {
22
- "@patternfly/patternfly": "6.0.0-alpha.203",
22
+ "@patternfly/patternfly": "6.0.0-alpha.205",
23
23
  "change-case": "^5.4.4",
24
24
  "fs-extra": "^11.2.0"
25
25
  },
26
26
  "license": "MIT",
27
- "gitHead": "1b4893f237f016335930dd2bfc72e29a30412fce"
27
+ "gitHead": "19631bb68902f7cd7b0c3c20d08088b94eab321d"
28
28
  }
package/.eslintrc.json DELETED
@@ -1,5 +0,0 @@
1
- {
2
- "rules": {
3
- "camelcase": "off"
4
- }
5
- }