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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/components/Alert/alert.css +3 -3
  2. package/components/Alert/alert.scss +3 -3
  3. package/components/Button/button.css +34 -42
  4. package/components/Button/button.scss +34 -42
  5. package/components/Card/card.css +3 -3
  6. package/components/Card/card.scss +3 -3
  7. package/components/DataList/data-list.css +1 -1
  8. package/components/DataList/data-list.scss +1 -1
  9. package/components/Form/form.css +2 -2
  10. package/components/Form/form.scss +2 -2
  11. package/components/FormControl/form-control.css +14 -15
  12. package/components/FormControl/form-control.scss +14 -15
  13. package/components/MenuToggle/menu-toggle.css +16 -26
  14. package/components/MenuToggle/menu-toggle.scss +16 -32
  15. package/components/Table/table.css +2 -2
  16. package/components/Table/table.scss +2 -2
  17. package/components/TextInputGroup/text-input-group.css +11 -13
  18. package/components/TextInputGroup/text-input-group.scss +12 -14
  19. package/components/Wizard/wizard.css +1 -1
  20. package/components/Wizard/wizard.scss +1 -1
  21. package/components/_index.css +87 -108
  22. package/package.json +1 -1
  23. package/patternfly-no-globals.css +87 -108
  24. package/patternfly.css +87 -108
  25. package/patternfly.min.css +1 -1
  26. package/patternfly.min.css.map +1 -1
package/components/FormControl/form-control.scss CHANGED
@@ -18,7 +18,7 @@
18
18
  --#{$form-control}--Width: 100%;
19
19
 
20
20
  // padding
21
- --#{$form-control}--inset--base: var(--pf-t--global--spacer--md);
21
+ --#{$form-control}--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
22
22
  --#{$form-control}--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
23
23
  --#{$form-control}--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
24
24
  --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--inset--base);
@@ -60,43 +60,43 @@
60
60
  // success
61
61
  --#{$form-control}--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
62
62
  --#{$form-control}--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
63
- --#{$form-control}--m-success--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--#{$form-control}--ColumnGap));
63
+ --#{$form-control}--m-success--PaddingInlineEnd: calc(var(--#{$form-control}__icon--FontSize) + var(--#{$form-control}--inset--base) + var(--#{$form-control}--ColumnGap));
64
64
 
65
65
  // warning
66
66
  --#{$form-control}--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
67
67
  --#{$form-control}--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
68
- --#{$form-control}--m-warning--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--#{$form-control}--ColumnGap));
68
+ --#{$form-control}--m-warning--PaddingInlineEnd: calc(var(--#{$form-control}__icon--FontSize) + var(--#{$form-control}--inset--base) + var(--#{$form-control}--ColumnGap));
69
69
 
70
70
  // error
71
71
  --#{$form-control}--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
72
72
  --#{$form-control}--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
73
- --#{$form-control}--m-error--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--#{$form-control}--ColumnGap));
73
+ --#{$form-control}--m-error--PaddingInlineEnd: calc(var(--#{$form-control}__icon--FontSize) + var(--#{$form-control}--inset--base) + var(--#{$form-control}--ColumnGap));
74
74
  --#{$form-control}--m-error--icon--width: var(--#{$form-control}--FontSize);
75
75
 
76
76
  // custom icon
77
77
  --#{$form-control}--m-icon--PaddingInlineEnd: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
78
78
  --#{$form-control}--m-icon--icon--width: var(--#{$form-control}--FontSize);
79
- --#{$form-control}--m-icon--icon--spacer: var(--pf-t--global--spacer--sm);
79
+ --#{$form-control}--m-icon--icon--spacer: calc(var(--pf-t--global--spacer--control--horizontal--default) / 2);
80
80
  --#{$form-control}--m-icon--icon--PaddingInlineEnd: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-error--icon--width) + var(--#{$form-control}--m-icon--icon--spacer) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
81
- --#{$form-control}__select--PaddingInlineEnd: var(--pf-t--global--spacer--md);
82
- --#{$form-control}__select--PaddingInlineStart: var(--pf-t--global--spacer--md);
81
+ --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}--inset--base);
82
+ --#{$form-control}__select--PaddingInlineStart: var(--#{$form-control}--inset--base);
83
83
 
84
84
  // Select success
85
- --#{$form-control}__select--m-success--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
85
+ --#{$form-control}__select--m-success--m-status--PaddingInlineEnd: calc((var(--#{$form-control}__icon--FontSize) * 2) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}__toggle-icon--PaddingInlineEnd) + var(--#{$form-control}__toggle-icon--PaddingInlineStart));
86
86
 
87
87
  // Select warning
88
- --#{$form-control}__select--m-warning--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
88
+ --#{$form-control}__select--m-warning--m-status--PaddingInlineEnd: calc((var(--#{$form-control}__icon--FontSize) * 2) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}__toggle-icon--PaddingInlineEnd) + var(--#{$form-control}__toggle-icon--PaddingInlineStart));
89
89
 
90
90
  // Select invalid
91
- --#{$form-control}__select--m-error--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
91
+ --#{$form-control}__select--m-error--m-status--PaddingInlineEnd: calc((var(--#{$form-control}__icon--FontSize) * 2) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}__toggle-icon--PaddingInlineEnd) + var(--#{$form-control}__toggle-icon--PaddingInlineStart));
92
92
 
93
93
  // Textarea
94
94
  --#{$form-control}--textarea--Width: var(--#{$form-control}--Width);
95
95
  --#{$form-control}--textarea--Height: auto;
96
96
 
97
97
  // Form control icon
98
- --#{$form-control}__icon--PaddingBlockStart: var(--pf-t--global--spacer--sm);
99
98
  --#{$form-control}__icon--Color: var(--pf-t--global--icon--color--regular);
99
+ --#{$form-control}__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
100
100
  --#{$form-control}__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
101
101
  --#{$form-control}--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
102
102
  --#{$form-control}--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
@@ -104,11 +104,10 @@
104
104
 
105
105
  // Form control utilities
106
106
  --#{$form-control}__utilities--Gap: var(--pf-t--global--spacer--sm);
107
- --#{$form-control}__utilities--PaddingBlockStart: var(--#{$form-control}--inset--base);
107
+ --#{$form-control}__utilities--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
108
108
  --#{$form-control}__utilities--PaddingInlineEnd: var(--#{$form-control}--inset--base);
109
109
 
110
110
  // Form control select toggle icon
111
- --#{$form-control}__toggle-icon--PaddingBlockStart: var(--pf-t--global--spacer--sm);
112
111
  --#{$form-control}__toggle-icon--PaddingInlineEnd: var(--#{$form-control}--inset--base);
113
112
  --#{$form-control}__toggle-icon--PaddingInlineStart: var(--#{$form-control}--inset--base);
114
113
  --#{$form-control}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -321,7 +320,7 @@
321
320
  }
322
321
 
323
322
  .#{$form-control}__icon {
324
- padding-block-start: var(--#{$form-control}__icon--PaddingBlockStart);
323
+ font-size: var(--#{$form-control}__icon--FontSize);
325
324
  color: var(--#{$form-control}__icon--Color);
326
325
 
327
326
  &.pf-m-status {
@@ -332,7 +331,6 @@
332
331
  .#{$form-control}__toggle-icon {
333
332
  grid-row: 1 / 2;
334
333
  grid-column: 3;
335
- padding-block-start: var(--#{$form-control}__toggle-icon--PaddingBlockStart);
336
334
  padding-inline-start: var(--#{$form-control}__toggle-icon--PaddingInlineStart);
337
335
  padding-inline-end: var(--#{$form-control}__toggle-icon--PaddingInlineEnd);
338
336
  color: var(--#{$form-control}__toggle-icon--Color);
@@ -345,6 +343,7 @@
345
343
  grid-row: 1 / 2;
346
344
  grid-column: 2;
347
345
  gap: var(--#{$form-control}__utilities--Gap);
346
+ padding-block-start: var(--#{$form-control}__utilities--PaddingBlockStart);
348
347
  padding-inline-end: var(--#{$form-control}__utilities--PaddingInlineEnd);
349
348
  pointer-events: none;
350
349
  }
package/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/components/MenuToggle/menu-toggle.scss CHANGED
@@ -10,10 +10,10 @@
10
10
 
11
11
  :where(:root, .#{$menu-toggle}) {
12
12
  --#{$menu-toggle}--ColumnGap: var(--pf-t--global--spacer--sm);
13
- --#{$menu-toggle}--PaddingBlockStart: var(--pf-t--global--spacer--sm);
14
- --#{$menu-toggle}--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
15
- --#{$menu-toggle}--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
16
- --#{$menu-toggle}--PaddingInlineStart: var(--pf-t--global--spacer--sm);
13
+ --#{$menu-toggle}--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
14
+ --#{$menu-toggle}--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
15
+ --#{$menu-toggle}--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
16
+ --#{$menu-toggle}--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
17
17
  --#{$menu-toggle}--MinWidth: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight) + var(--#{$menu-toggle}--PaddingBlockStart) + var(--#{$menu-toggle}--PaddingBlockEnd));
18
18
  --#{$menu-toggle}--FontSize: var(--pf-t--global--font--size--body--default);
19
19
  --#{$menu-toggle}--Color: var(--pf-t--global--text--color--regular);
@@ -53,22 +53,10 @@
53
53
 
54
54
  // TODO: add pf-m-button modifier here
55
55
  // * Menu toggle button
56
- --#{$menu-toggle}--m-button--PaddingInlineStart: var(--pf-t--global--spacer--md);
57
- --#{$menu-toggle}--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
56
+ --#{$menu-toggle}--m-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
57
+ --#{$menu-toggle}--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
58
58
  --#{$menu-toggle}--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
59
59
 
60
- // TODO: add pf-m-button modifier here
61
- // * Menu toggle control
62
- --#{$menu-toggle}--m-control--PaddingInlineStart: var(--pf-t--global--spacer--sm);
63
- --#{$menu-toggle}--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
64
- --#{$menu-toggle}--m-control--BorderRadius: var(--pf-t--global--border--radius--pill);
65
-
66
- // TODO: add pf-m-button modifier here
67
- // * Menu toggle action
68
- --#{$menu-toggle}--m-action--PaddingInlineStart: var(--pf-t--global--spacer--lg);
69
- --#{$menu-toggle}--m-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
70
- --#{$menu-toggle}--m-action--BorderRadius: var(--pf-t--global--border--radius--pill);
71
-
72
60
  // * Menu toggle primary
73
61
  --#{$menu-toggle}--m-primary--PaddingInlineStart: var(--#{$menu-toggle}--m-button--PaddingInlineStart);
74
62
  --#{$menu-toggle}--m-primary--PaddingInlineEnd: var(--#{$menu-toggle}--m-button--PaddingInlineEnd);
@@ -107,8 +95,8 @@
107
95
  --#{$menu-toggle}__controls--MinWidth: calc(var(--#{$menu-toggle}--FontSize) + var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--sm));
108
96
 
109
97
  // Full height
110
- --#{$menu-toggle}--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
111
- --#{$menu-toggle}--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--lg);
98
+ --#{$menu-toggle}--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
99
+ --#{$menu-toggle}--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
112
100
 
113
101
  // Split button, child
114
102
  --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
@@ -132,8 +120,8 @@
132
120
  // Split button, controls, check
133
121
  --#{$menu-toggle}__button--BackgroundColor: transparent;
134
122
  --#{$menu-toggle}__button--AlignSelf: baseline;
135
- --#{$menu-toggle}__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
136
- --#{$menu-toggle}__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
123
+ --#{$menu-toggle}__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
124
+ --#{$menu-toggle}__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
137
125
  --#{$menu-toggle}__button--MinWidth: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight) + var(--#{$menu-toggle}--PaddingBlockStart) + var(--#{$menu-toggle}--PaddingBlockEnd));
138
126
  --#{$menu-toggle}__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
139
127
 
@@ -147,15 +135,13 @@
147
135
  --#{$menu-toggle}--m-plain--disabled--BackgroundColor: transparent; // picking icon color rather than text...?
148
136
 
149
137
  // Typeahead
150
- --#{$menu-toggle}--m-typeahead--c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
151
138
  --#{$menu-toggle}--m-typeahead__button--AlignSelf: stretch;
152
139
 
153
140
  // * Menu toggle small
154
- --#{$menu-toggle}--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
155
- --#{$menu-toggle}--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
156
- --#{$menu-toggle}--m-small--ColumnGap: calc(var(--pf-t--global--spacer--control--horizontal--compact) / 2);
157
- --#{$menu-toggle}--m-small--FontSize: var(--pf-t--global--font--size--body--sm);
158
- --#{$menu-toggle}--m-small__controls--MinWidth: calc(var(--#{$menu-toggle}--FontSize) + var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--xs));
141
+ --#{$menu-toggle}--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
142
+ --#{$menu-toggle}--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
143
+ --#{$menu-toggle}--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
144
+ --#{$menu-toggle}--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
159
145
 
160
146
  // Status icon
161
147
  --#{$menu-toggle}__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
@@ -312,9 +298,8 @@
312
298
  &.pf-m-small {
313
299
  --#{$menu-toggle}--PaddingBlockStart: var(--#{$menu-toggle}--m-small--PaddingBlockStart);
314
300
  --#{$menu-toggle}--PaddingBlockEnd: var(--#{$menu-toggle}--m-small--PaddingBlockEnd);
315
- --#{$menu-toggle}--FontSize: var(--#{$menu-toggle}--m-small--FontSize);
316
- --#{$menu-toggle}--ColumnGap: var(--#{$menu-toggle}--m-small--ColumnGap);
317
- --#{$menu-toggle}__controls--MinWidth: var(--#{$menu-toggle}--m-small__controls--MinWidth);
301
+ --#{$menu-toggle}--PaddingInlineStart: var(--#{$menu-toggle}--m-small--PaddingInlineStart);
302
+ --#{$menu-toggle}--PaddingInlineEnd: var(--#{$menu-toggle}--m-small--PaddingInlineEnd);
318
303
  }
319
304
 
320
305
  &:has(.#{$button}) {
@@ -457,7 +442,6 @@
457
442
  }
458
443
 
459
444
  .#{$text-input-group} {
460
- --#{$text-input-group}__utilities--c-button--PaddingInlineEnd: var(--#{$menu-toggle}--m-typeahead--c-text-input-group__utilities--c-button--PaddingInlineEnd);
461
445
  --#{$text-input-group}__utilities--MarginInlineEnd: 0;
462
446
 
463
447
  flex: 1;
package/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);
package/components/Table/table.scss CHANGED
@@ -214,8 +214,8 @@
214
214
  --#{$table}__subhead--Color: var(--pf-t--global--text--color--subtle);
215
215
 
216
216
  // * Table subhead button
217
- --#{$table}__nested-column-header__button--PaddingInlineStart: calc(var(--#{$table}__button--PaddingInlineStart) - var(--pf-t--global--spacer--sm));
218
- --#{$table}__nested-column-header__button--PaddingInlineEnd: calc(var(--#{$table}__button--PaddingInlineEnd) - var(--pf-t--global--spacer--xs));
217
+ --#{$table}__nested-column-header__button--PaddingInlineStart: calc(var(--#{$table}__button--PaddingInlineStart) - var(--pf-t--global--spacer--control--horizontal--plain));
218
+ --#{$table}__nested-column-header__button--PaddingInlineEnd: calc(var(--#{$table}__button--PaddingInlineEnd) - (var(--pf-t--global--spacer--control--horizontal--plain) / 2));
219
219
 
220
220
  // * Table striped
221
221
  --#{$table}--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
package/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/components/TextInputGroup/text-input-group.scss CHANGED
@@ -18,8 +18,8 @@
18
18
 
19
19
 
20
20
  // Main
21
- --#{$text-input-group}__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
22
- --#{$text-input-group}__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
21
+ --#{$text-input-group}__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
22
+ --#{$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));
23
23
  --#{$text-input-group}--status__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
24
24
  --#{$text-input-group}__main--RowGap: var(--pf-t--global--spacer--xs);
25
25
  --#{$text-input-group}__main--ColumnGap: var(--pf-t--global--spacer--xs);
@@ -32,15 +32,15 @@
32
32
  --#{$text-input-group}__text--BorderEndStartRadius: var(--#{$text-input-group}__text--BorderRadius--base);
33
33
 
34
34
  // Label group
35
- --#{$text-input-group}--c-label-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
36
- --#{$text-input-group}--c-label-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
37
- --#{$text-input-group}--c-label-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
35
+ --#{$text-input-group}--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
36
+ --#{$text-input-group}--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
37
+ --#{$text-input-group}--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
38
38
 
39
39
  // Text input
40
- --#{$text-input-group}__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
41
- --#{$text-input-group}__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
42
- --#{$text-input-group}__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
43
- --#{$text-input-group}__text-input--PaddingInlineStart: var(--pf-t--global--spacer--sm);
40
+ --#{$text-input-group}__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
41
+ --#{$text-input-group}__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
42
+ --#{$text-input-group}__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
43
+ --#{$text-input-group}__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
44
44
  --#{$text-input-group}__text-input--MinWidth: 12ch;
45
45
  --#{$text-input-group}__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
46
46
  --#{$text-input-group}__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
@@ -48,6 +48,7 @@
48
48
  --#{$text-input-group}__text-input--OutlineOffset: -6px;
49
49
 
50
50
  // Icon
51
+ --#{$text-input-group}__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
51
52
  --#{$text-input-group}__icon--InsetInlineStart: var(--pf-t--global--spacer--sm);
52
53
  --#{$text-input-group}__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
53
54
  --#{$text-input-group}__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -61,9 +62,7 @@
61
62
 
62
63
  // Utilities
63
64
  --#{$text-input-group}__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
64
- --#{$text-input-group}__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
65
- --#{$text-input-group}__utilities--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
66
-
65
+
67
66
  // input disabled style
68
67
  --#{$text-input-group}--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
69
68
  --#{$text-input-group}--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
@@ -156,8 +155,6 @@
156
155
  }
157
156
 
158
157
  > :first-child:not(.#{$text-input-group}__text) {
159
- padding-block-start: var(--#{$text-input-group}__main--first-child--not--text-input--PaddingBlockStart);
160
- padding-block-end: var(--#{$text-input-group}__main--first-child--not--text-input--PaddingBlockEnd);
161
158
  margin-inline-start: var(--#{$text-input-group}__main--first-child--not--text-input--MarginInlineStart);
162
159
  }
163
160
 
@@ -180,6 +177,7 @@
180
177
  position: absolute;
181
178
  inset-block-start: 50%;
182
179
  inset-inline-start: var(--#{$text-input-group}__icon--InsetInlineStart);
180
+ font-size: var(--#{$text-input-group}__icon--FontSize);
183
181
  color: var(--#{$text-input-group}__icon--Color);
184
182
  transform: translateY(var(--#{$text-input-group}__icon--TranslateY));
185
183
 
package/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/components/Wizard/wizard.scss CHANGED
@@ -16,7 +16,7 @@
16
16
  --#{$wizard}__header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
17
17
 
18
18
  // Close
19
- --#{$wizard}__close--InsetBlockStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$button}--m-plain--PaddingBlockStart));
19
+ --#{$wizard}__close--InsetBlockStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-t--global--spacer--control--vertical--plain));
20
20
  --#{$wizard}__close--InsetInlineEnd: var(--pf-t--global--spacer--sm);
21
21
  --#{$wizard}__close--FontSize: var(--pf-t--global--font--size--xl);
22
22