@patternfly/patternfly 6.0.0-alpha.108 → 6.0.0-alpha.109

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 (24) hide show
  1. package/components/Alert/alert.css +4 -4
  2. package/components/Alert/alert.scss +4 -6
  3. package/components/Breadcrumb/breadcrumb.css +2 -2
  4. package/components/Breadcrumb/breadcrumb.scss +2 -2
  5. package/components/Card/card.css +5 -5
  6. package/components/Card/card.scss +5 -5
  7. package/components/DataList/data-list.css +2 -2
  8. package/components/DataList/data-list.scss +2 -2
  9. package/components/Drawer/drawer.css +2 -2
  10. package/components/Drawer/drawer.scss +2 -2
  11. package/components/FormControl/form-control.css +2 -2
  12. package/components/FormControl/form-control.scss +2 -2
  13. package/components/Hint/hint.css +1 -1
  14. package/components/Hint/hint.scss +1 -1
  15. package/components/JumpLinks/jump-links.css +2 -2
  16. package/components/JumpLinks/jump-links.scss +2 -2
  17. package/components/Popover/popover.css +1 -1
  18. package/components/Popover/popover.scss +1 -1
  19. package/package.json +1 -1
  20. package/patternfly-no-globals.css +21 -21
  21. package/patternfly-theme-dark-unversioned.css +21 -21
  22. package/patternfly.css +21 -21
  23. package/patternfly.min.css +1 -1
  24. package/patternfly.min.css.map +1 -1
package/components/Alert/alert.css CHANGED
@@ -14,8 +14,8 @@
14
14
  --pf-v6-c-alert--PaddingBottom: var(--pf-t--global--spacer--md);
15
15
  --pf-v6-c-alert--PaddingLeft: 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--MarginTop: calc(-1 * var(--pf-v6-global--spacer--form-element) - 0.0625rem);
18
- --pf-v6-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-v6-global--spacer--form-element));
17
+ --pf-v6-c-alert__toggle--MarginTop: calc(-1 * var(--pf-t--global--spacer--button--vertical--default) - 0.0625rem);
18
+ --pf-v6-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
19
19
  --pf-v6-c-alert__toggle--MarginRight: 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-v6-global--Transition);
@@ -29,8 +29,8 @@
29
29
  --pf-v6-c-alert__title--LineHeight: var(--pf-t--global--font--line-height--heading);
30
30
  --pf-v6-c-alert__title--Color: var(--pf-t--global--text--color--regular);
31
31
  --pf-v6-c-alert__title--max-lines: 1;
32
- --pf-v6-c-alert__action--MarginTop: calc(var(--pf-v6-global--spacer--form-element) * -1);
33
- --pf-v6-c-alert__action--MarginBottom: calc(var(--pf-v6-global--spacer--form-element) * -1);
32
+ --pf-v6-c-alert__action--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
33
+ --pf-v6-c-alert__action--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
34
34
  --pf-v6-c-alert__action--TranslateY: 0.125rem;
35
35
  --pf-v6-c-alert__action--MarginRight: calc(var(--pf-t--global--spacer--sm) * -1);
36
36
  --pf-v6-c-alert__description--PaddingTop: var(--pf-t--global--spacer--xs);
package/components/Alert/alert.scss CHANGED
@@ -1,7 +1,5 @@
1
1
  // @debug $alert; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- // TODO create a token for --#{$pf-global}--spacer--form-element ?
4
-
5
3
  :root {
6
4
  // Alert variables
7
5
  --#{$alert}--BoxShadow: var(--pf-t--global--box-shadow--lg);
@@ -21,8 +19,8 @@
21
19
  --#{$alert}--FontSize: var(--pf-t--global--font--size--body--default);
22
20
 
23
21
  // Toggle
24
- --#{$alert}__toggle--MarginTop: calc(-1 * var(--#{$pf-global}--spacer--form-element) - #{pf-size-prem(1px)});
25
- --#{$alert}__toggle--MarginBottom: calc(-1 * var(--#{$pf-global}--spacer--form-element));
22
+ --#{$alert}__toggle--MarginTop: calc(-1 * var(--pf-t--global--spacer--button--vertical--default) - #{pf-size-prem(1px)});
23
+ --#{$alert}__toggle--MarginBottom: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
26
24
  --#{$alert}__toggle--MarginRight: var(--pf-t--global--spacer--sm);
27
25
 
28
26
  // Toggle icon
@@ -44,8 +42,8 @@
44
42
  --#{$alert}__title--max-lines: 1;
45
43
 
46
44
  // Action
47
- --#{$alert}__action--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
48
- --#{$alert}__action--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
45
+ --#{$alert}__action--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
46
+ --#{$alert}__action--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
49
47
  --#{$alert}__action--TranslateY: #{pf-size-prem(2px)};
50
48
  --#{$alert}__action--MarginRight: calc(var(--pf-t--global--spacer--sm) * -1);
51
49
 
package/components/Breadcrumb/breadcrumb.css CHANGED
@@ -15,9 +15,9 @@
15
15
  --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
16
16
  --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
17
17
  --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
18
- --pf-v6-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
18
+ --pf-v6-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
19
19
  --pf-v6-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-v6-c-breadcrumb__item--MarginRight) * -1);
20
- --pf-v6-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1);
20
+ --pf-v6-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
21
21
  --pf-v6-c-breadcrumb__dropdown--MarginLeft: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginRight) * -1);
22
22
  --pf-v6-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-t--global--font--line-height--body);
23
23
  }
package/components/Breadcrumb/breadcrumb.scss CHANGED
@@ -24,9 +24,9 @@
24
24
  --#{$breadcrumb}__heading--FontSize: var( --pf-t--global--font--size--body--sm);
25
25
 
26
26
  // breadcrumb dropdown
27
- --#{$breadcrumb}__dropdown--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1); // TODO: check with design as this replaces --#{$pf-global}--spacer--form-element (6px) with spacer--sm (8px)
27
+ --#{$breadcrumb}__dropdown--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
28
28
  --#{$breadcrumb}__dropdown--MarginRight: calc(var(--#{$breadcrumb}__item--MarginRight) * -1);
29
- --#{$breadcrumb}__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1); // TODO: same as above
29
+ --#{$breadcrumb}__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
30
30
  --#{$breadcrumb}__dropdown--MarginLeft: calc(var(--#{$breadcrumb}__item-divider--MarginRight) * -1);
31
31
 
32
32
  // breadcrumb toggle
package/components/Card/card.css CHANGED
@@ -22,11 +22,11 @@
22
22
  --pf-v6-c-card__footer--Color: var(--pf-t--global--text--color--subtle);
23
23
  --pf-v6-c-card__actions--PaddingLeft: var(--pf-t--global--spacer--md);
24
24
  --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--sm);
25
- --pf-v6-c-card__actions--MarginTop: calc(var(--pf-v6-global--spacer--form-element) * -1);
26
- --pf-v6-c-card__actions--MarginBottom: calc(var(--pf-v6-global--spacer--form-element) * -1);
27
- --pf-v6-c-card__header-toggle--MarginTop: calc(var(--pf-v6-global--spacer--form-element) * -1);
25
+ --pf-v6-c-card__actions--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
26
+ --pf-v6-c-card__actions--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
27
+ --pf-v6-c-card__header-toggle--MarginTop: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
28
28
  --pf-v6-c-card__header-toggle--MarginRight: var(--pf-t--global--spacer--xs);
29
- --pf-v6-c-card__header-toggle--MarginBottom: calc(var(--pf-v6-global--spacer--form-element) * -1);
29
+ --pf-v6-c-card__header-toggle--MarginBottom: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
30
30
  --pf-v6-c-card__header-toggle--MarginLeft: calc(var(--pf-t--global--spacer--md) * -1);
31
31
  --pf-v6-c-card__header-toggle-icon--Transition: var(--pf-v6-global--Transition);
32
32
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
@@ -68,7 +68,7 @@
68
68
  --pf-v6-c-card--m-full-height--Height: 100%;
69
69
  --pf-v6-c-card--m-plain--BorderColor: transparent;
70
70
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
71
- --pf-v6-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-v6-global--spacer--form-element) * -1);
71
+ --pf-v6-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-t--global--spacer--button--horizontal--compact) * -1);
72
72
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-t--global--spacer--xs);
73
73
  }
74
74
 
package/components/Card/card.scss CHANGED
@@ -24,13 +24,13 @@
24
24
  --#{$card}__footer--Color: var(--pf-t--global--text--color--subtle);
25
25
  --#{$card}__actions--PaddingLeft: var(--pf-t--global--spacer--md);
26
26
  --#{$card}__actions--Gap: var(--pf-t--global--spacer--sm);
27
- --#{$card}__actions--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1); // TODO
28
- --#{$card}__actions--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1); // TODO
27
+ --#{$card}__actions--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
28
+ --#{$card}__actions--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
29
29
 
30
30
  // Expandable
31
- --#{$card}__header-toggle--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
31
+ --#{$card}__header-toggle--MarginTop: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
32
32
  --#{$card}__header-toggle--MarginRight: var(--pf-t--global--spacer--xs);
33
- --#{$card}__header-toggle--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
33
+ --#{$card}__header-toggle--MarginBottom: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
34
34
  --#{$card}__header-toggle--MarginLeft: calc(var(--pf-t--global--spacer--md) * -1);
35
35
  --#{$card}__header-toggle-icon--Transition: var(--#{$pf-global}--Transition);
36
36
  --#{$card}--m-expanded__header-toggle-icon--Rotate: 90deg;
@@ -100,7 +100,7 @@
100
100
  --#{$card}--m-plain--BackgroundColor: transparent;
101
101
 
102
102
  // Toggle right
103
- --#{$card}__header--m-toggle-right--toggle--MarginRight: calc(var(--#{$pf-global}--spacer--form-element) * -1);
103
+ --#{$card}__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-t--global--spacer--button--horizontal--compact) * -1);
104
104
  --#{$card}__header--m-toggle-right--toggle--MarginLeft: var(--pf-t--global--spacer--xs);
105
105
  }
106
106
 
package/components/DataList/data-list.css CHANGED
@@ -489,8 +489,8 @@
489
489
  --pf-v6-c-data-list--cell--WordBreak: normal;
490
490
  --pf-v6-c-data-list--cell--m-truncate--MinWidth: 5ch;
491
491
  --pf-v6-c-data-list__toggle--MarginLeft: calc(var(--pf-t--global--spacer--sm) * -1);
492
- --pf-v6-c-data-list__toggle--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
493
- --pf-v6-c-data-list__toggle--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1);
492
+ --pf-v6-c-data-list__toggle--MarginTop: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
493
+ --pf-v6-c-data-list__toggle--MarginBottom: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
494
494
  --pf-v6-c-data-list__toggle-icon--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
495
495
  --pf-v6-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
496
496
  --pf-v6-c-data-list__toggle-icon--Rotate: 0;
package/components/DataList/data-list.scss CHANGED
@@ -57,8 +57,8 @@
57
57
 
58
58
  // toggle
59
59
  --#{$data-list}__toggle--MarginLeft: calc(var(--pf-t--global--spacer--sm) * -1); // offset toggle to align left
60
- --#{$data-list}__toggle--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1); // updating to spacer--sm (8x) as spacer--form-element (6px) doesn't exist
61
- --#{$data-list}__toggle--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1); // former form-element
60
+ --#{$data-list}__toggle--MarginTop: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
61
+ --#{$data-list}__toggle--MarginBottom: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
62
62
  --#{$data-list}__toggle-icon--Height: calc(var(--#{$data-list}--FontSize) * var(--#{$data-list}--LineHeight));
63
63
  --#{$data-list}__toggle-icon--Transition: .2s ease-in 0s;
64
64
  --#{$data-list}__toggle-icon--Rotate: 0;
package/components/Drawer/drawer.css CHANGED
@@ -94,8 +94,8 @@
94
94
  --pf-v6-c-drawer__splitter-handle--after--Height: 0.25rem;
95
95
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
96
96
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
97
- --pf-v6-c-drawer__actions--MarginTop: calc(var(--pf-t--global--spacer--xs) * -1.5);
98
- --pf-v6-c-drawer__actions--MarginRight: calc(var(--pf-t--global--spacer--xs) * -1.5);
97
+ --pf-v6-c-drawer__actions--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--compact) * -1.5);
98
+ --pf-v6-c-drawer__actions--MarginRight: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
99
99
  --pf-v6-c-drawer__panel--BoxShadow: none;
100
100
  --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--top);
101
101
  --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--divider--default);
package/components/Drawer/drawer.scss CHANGED
@@ -135,8 +135,8 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
135
135
  }
136
136
 
137
137
  // Actions
138
- --#{$drawer}__actions--MarginTop: calc(var(--pf-t--global--spacer--xs) * -1.5); // TODO: add form element var
139
- --#{$drawer}__actions--MarginRight: calc(var(--pf-t--global--spacer--xs) * -1.5); // TODO: add form element var
138
+ --#{$drawer}__actions--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--compact) * -1.5);
139
+ --#{$drawer}__actions--MarginRight: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
140
140
 
141
141
  // Box shadow
142
142
  --#{$drawer}__panel--BoxShadow: none;
package/components/FormControl/form-control.css CHANGED
@@ -16,8 +16,8 @@
16
16
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
17
17
  --pf-v6-c-form-control--Width: 100%;
18
18
  --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--md);
19
- --pf-v6-c-form-control--PaddingTop: var(--pf-t--global--spacer--sm);
20
- --pf-v6-c-form-control--PaddingBottom: var(--pf-t--global--spacer--sm);
19
+ --pf-v6-c-form-control--PaddingTop: var(--pf-t--global--spacer--control--vertical--default);
20
+ --pf-v6-c-form-control--PaddingBottom: var(--pf-t--global--spacer--control--vertical--default);
21
21
  --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control--inset--base);
22
22
  --pf-v6-c-form-control--PaddingLeft: var(--pf-v6-c-form-control--inset--base);
23
23
  --pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
package/components/FormControl/form-control.scss CHANGED
@@ -18,8 +18,8 @@
18
18
 
19
19
  // padding
20
20
  --#{$form-control}--inset--base: var(--pf-t--global--spacer--md);
21
- --#{$form-control}--PaddingTop: var(--pf-t--global--spacer--sm); // (--#{$pf-global}--spacer--form-element);
22
- --#{$form-control}--PaddingBottom: var(--pf-t--global--spacer--sm); // var(--#{$pf-global}--spacer--form-element);
21
+ --#{$form-control}--PaddingTop: var(--pf-t--global--spacer--control--vertical--default);
22
+ --#{$form-control}--PaddingBottom: var(--pf-t--global--spacer--control--vertical--default);
23
23
  --#{$form-control}--PaddingRight: var(--#{$form-control}--inset--base);
24
24
  --#{$form-control}--PaddingLeft: var(--#{$form-control}--inset--base);
25
25
 
package/components/Hint/hint.css CHANGED
@@ -17,7 +17,7 @@
17
17
  --pf-v6-c-hint__footer--MarginTop: var(--pf-t--global--spacer--sm);
18
18
  --pf-v6-c-hint__footer--child--MarginRight: var(--pf-t--global--spacer--md);
19
19
  --pf-v6-c-hint__actions--MarginLeft: var(--pf-t--global--spacer--2xl);
20
- --pf-v6-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-v6-global--spacer--form-element) * -1);
20
+ --pf-v6-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
21
21
  }
22
22
 
23
23
  .pf-v6-c-hint {
package/components/Hint/hint.scss CHANGED
@@ -27,7 +27,7 @@
27
27
 
28
28
  // Hint Actions
29
29
  --#{$hint}__actions--MarginLeft: var(--pf-t--global--spacer--2xl);
30
- --#{$hint}__actions--c-dropdown--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1); // TODO form element spacer
30
+ --#{$hint}__actions--c-dropdown--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
31
31
  }
32
32
 
33
33
  .#{$hint} {
package/components/JumpLinks/jump-links.css CHANGED
@@ -42,8 +42,8 @@
42
42
  --pf-v6-c-jump-links__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
43
43
  --pf-v6-c-jump-links__label--MarginBottom: var(--pf-t--global--spacer--md);
44
44
  --pf-v6-c-jump-links__label--Display: block;
45
- --pf-v6-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-v6-global--spacer--form-element));
46
- --pf-v6-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-v6-global--spacer--form-element));
45
+ --pf-v6-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
46
+ --pf-v6-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
47
47
  --pf-v6-c-jump-links__toggle--MarginBottom: var(--pf-v6-c-jump-links__toggle--MarginBottom--base);
48
48
  --pf-v6-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-v6-c-jump-links__toggle--MarginBottom--base) + var(--pf-t--global--spacer--md));
49
49
  --pf-v6-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-t--global--spacer--md));
package/components/JumpLinks/jump-links.scss CHANGED
@@ -56,8 +56,8 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
56
56
  --#{$jump-links}__label--Display: block;
57
57
 
58
58
  // toggle
59
- --#{$jump-links}__toggle--MarginTop: calc(-1 * var(--#{$pf-global}--spacer--form-element));
60
- --#{$jump-links}__toggle--MarginBottom--base: calc(-1 * var(--#{$pf-global}--spacer--form-element));
59
+ --#{$jump-links}__toggle--MarginTop: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
60
+ --#{$jump-links}__toggle--MarginBottom--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
61
61
  --#{$jump-links}__toggle--MarginBottom: var(--#{$jump-links}__toggle--MarginBottom--base);
62
62
  --#{$jump-links}--m-expanded__toggle--MarginBottom: calc(var(--#{$jump-links}__toggle--MarginBottom--base) + var(--pf-t--global--spacer--md));
63
63
  --#{$jump-links}__toggle--MarginLeft: calc(-1 * var(--pf-t--global--spacer--md));
package/components/Popover/popover.css CHANGED
@@ -35,7 +35,7 @@
35
35
  --pf-v6-c-popover__arrow--m-inline-bottom--Bottom: var(--pf-t--global--border--radius--medium);
36
36
  --pf-v6-c-popover__arrow--m-block-left--Left: var(--pf-t--global--border--radius--medium);
37
37
  --pf-v6-c-popover__arrow--m-block-right--Right: var(--pf-t--global--border--radius--medium);
38
- --pf-v6-c-popover__close--Top: calc(var(--pf-v6-c-popover__content--PaddingTop) - (var(--pf-t--global--spacer--xs) * 1.5));
38
+ --pf-v6-c-popover__close--Top: calc(var(--pf-v6-c-popover__content--PaddingTop) - (var(--pf-t--global--spacer--control--vertical--compact) * 1.5));
39
39
  --pf-v6-c-popover__close--Right: var(--pf-v6-c-popover__content--PaddingRight);
40
40
  --pf-v6-c-popover__close--sibling--PaddingRight: var(--pf-t--global--spacer--2xl);
41
41
  --pf-v6-c-popover__header--MarginBottom: var(--pf-t--global--spacer--sm);
package/components/Popover/popover.scss CHANGED
@@ -47,7 +47,7 @@
47
47
  --#{$popover}__arrow--m-block-right--Right: var(--pf-t--global--border--radius--medium);
48
48
 
49
49
  // Close
50
- --#{$popover}__close--Top: calc(var(--#{$popover}__content--PaddingTop) - (var(--pf-t--global--spacer--xs) * 1.5)); // align top of button with top of text - TODO: replace with form element token
50
+ --#{$popover}__close--Top: calc(var(--#{$popover}__content--PaddingTop) - (var(--pf-t--global--spacer--control--vertical--compact) * 1.5)); // align top of button with top of text
51
51
  --#{$popover}__close--Right: var(--#{$popover}__content--PaddingRight); // align right of content
52
52
  --#{$popover}__close--sibling--PaddingRight: var(--pf-t--global--spacer--2xl);
53
53
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.108",
4
+ "version": "6.0.0-alpha.109",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -6772,8 +6772,8 @@ html .ws-preview {
6772
6772
  --pf-v6-c-alert--PaddingBottom: var(--pf-t--global--spacer--md);
6773
6773
  --pf-v6-c-alert--PaddingLeft: var(--pf-t--global--spacer--md);
6774
6774
  --pf-v6-c-alert--FontSize: var(--pf-t--global--font--size--body--default);
6775
- --pf-v6-c-alert__toggle--MarginTop: calc(-1 * var(--pf-v6-global--spacer--form-element) - 0.0625rem);
6776
- --pf-v6-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-v6-global--spacer--form-element));
6775
+ --pf-v6-c-alert__toggle--MarginTop: calc(-1 * var(--pf-t--global--spacer--button--vertical--default) - 0.0625rem);
6776
+ --pf-v6-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
6777
6777
  --pf-v6-c-alert__toggle--MarginRight: var(--pf-t--global--spacer--sm);
6778
6778
  --pf-v6-c-alert__toggle-icon--Rotate: 0;
6779
6779
  --pf-v6-c-alert__toggle-icon--Transition: var(--pf-v6-global--Transition);
@@ -6787,8 +6787,8 @@ html .ws-preview {
6787
6787
  --pf-v6-c-alert__title--LineHeight: var(--pf-t--global--font--line-height--heading);
6788
6788
  --pf-v6-c-alert__title--Color: var(--pf-t--global--text--color--regular);
6789
6789
  --pf-v6-c-alert__title--max-lines: 1;
6790
- --pf-v6-c-alert__action--MarginTop: calc(var(--pf-v6-global--spacer--form-element) * -1);
6791
- --pf-v6-c-alert__action--MarginBottom: calc(var(--pf-v6-global--spacer--form-element) * -1);
6790
+ --pf-v6-c-alert__action--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
6791
+ --pf-v6-c-alert__action--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
6792
6792
  --pf-v6-c-alert__action--TranslateY: 0.125rem;
6793
6793
  --pf-v6-c-alert__action--MarginRight: calc(var(--pf-t--global--spacer--sm) * -1);
6794
6794
  --pf-v6-c-alert__description--PaddingTop: var(--pf-t--global--spacer--xs);
@@ -7878,9 +7878,9 @@ html .ws-preview {
7878
7878
  --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
7879
7879
  --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
7880
7880
  --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
7881
- --pf-v6-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
7881
+ --pf-v6-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
7882
7882
  --pf-v6-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-v6-c-breadcrumb__item--MarginRight) * -1);
7883
- --pf-v6-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1);
7883
+ --pf-v6-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
7884
7884
  --pf-v6-c-breadcrumb__dropdown--MarginLeft: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginRight) * -1);
7885
7885
  --pf-v6-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-t--global--font--line-height--body);
7886
7886
  }
@@ -8767,11 +8767,11 @@ button.pf-v6-c-breadcrumb__link {
8767
8767
  --pf-v6-c-card__footer--Color: var(--pf-t--global--text--color--subtle);
8768
8768
  --pf-v6-c-card__actions--PaddingLeft: var(--pf-t--global--spacer--md);
8769
8769
  --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--sm);
8770
- --pf-v6-c-card__actions--MarginTop: calc(var(--pf-v6-global--spacer--form-element) * -1);
8771
- --pf-v6-c-card__actions--MarginBottom: calc(var(--pf-v6-global--spacer--form-element) * -1);
8772
- --pf-v6-c-card__header-toggle--MarginTop: calc(var(--pf-v6-global--spacer--form-element) * -1);
8770
+ --pf-v6-c-card__actions--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8771
+ --pf-v6-c-card__actions--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8772
+ --pf-v6-c-card__header-toggle--MarginTop: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
8773
8773
  --pf-v6-c-card__header-toggle--MarginRight: var(--pf-t--global--spacer--xs);
8774
- --pf-v6-c-card__header-toggle--MarginBottom: calc(var(--pf-v6-global--spacer--form-element) * -1);
8774
+ --pf-v6-c-card__header-toggle--MarginBottom: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
8775
8775
  --pf-v6-c-card__header-toggle--MarginLeft: calc(var(--pf-t--global--spacer--md) * -1);
8776
8776
  --pf-v6-c-card__header-toggle-icon--Transition: var(--pf-v6-global--Transition);
8777
8777
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
@@ -8813,7 +8813,7 @@ button.pf-v6-c-breadcrumb__link {
8813
8813
  --pf-v6-c-card--m-full-height--Height: 100%;
8814
8814
  --pf-v6-c-card--m-plain--BorderColor: transparent;
8815
8815
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
8816
- --pf-v6-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-v6-global--spacer--form-element) * -1);
8816
+ --pf-v6-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-t--global--spacer--button--horizontal--compact) * -1);
8817
8817
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-t--global--spacer--xs);
8818
8818
  }
8819
8819
 
@@ -10704,8 +10704,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
10704
10704
  --pf-v6-c-data-list--cell--WordBreak: normal;
10705
10705
  --pf-v6-c-data-list--cell--m-truncate--MinWidth: 5ch;
10706
10706
  --pf-v6-c-data-list__toggle--MarginLeft: calc(var(--pf-t--global--spacer--sm) * -1);
10707
- --pf-v6-c-data-list__toggle--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
10708
- --pf-v6-c-data-list__toggle--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1);
10707
+ --pf-v6-c-data-list__toggle--MarginTop: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
10708
+ --pf-v6-c-data-list__toggle--MarginBottom: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
10709
10709
  --pf-v6-c-data-list__toggle-icon--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
10710
10710
  --pf-v6-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
10711
10711
  --pf-v6-c-data-list__toggle-icon--Rotate: 0;
@@ -14903,8 +14903,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
14903
14903
  --pf-v6-c-drawer__splitter-handle--after--Height: 0.25rem;
14904
14904
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
14905
14905
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
14906
- --pf-v6-c-drawer__actions--MarginTop: calc(var(--pf-t--global--spacer--xs) * -1.5);
14907
- --pf-v6-c-drawer__actions--MarginRight: calc(var(--pf-t--global--spacer--xs) * -1.5);
14906
+ --pf-v6-c-drawer__actions--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--compact) * -1.5);
14907
+ --pf-v6-c-drawer__actions--MarginRight: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
14908
14908
  --pf-v6-c-drawer__panel--BoxShadow: none;
14909
14909
  --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--top);
14910
14910
  --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--divider--default);
@@ -17158,8 +17158,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
17158
17158
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
17159
17159
  --pf-v6-c-form-control--Width: 100%;
17160
17160
  --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--md);
17161
- --pf-v6-c-form-control--PaddingTop: var(--pf-t--global--spacer--sm);
17162
- --pf-v6-c-form-control--PaddingBottom: var(--pf-t--global--spacer--sm);
17161
+ --pf-v6-c-form-control--PaddingTop: var(--pf-t--global--spacer--control--vertical--default);
17162
+ --pf-v6-c-form-control--PaddingBottom: var(--pf-t--global--spacer--control--vertical--default);
17163
17163
  --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control--inset--base);
17164
17164
  --pf-v6-c-form-control--PaddingLeft: var(--pf-v6-c-form-control--inset--base);
17165
17165
  --pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
@@ -17429,7 +17429,7 @@ select ~ .pf-v6-c-form-control__utilities {
17429
17429
  --pf-v6-c-hint__footer--MarginTop: var(--pf-t--global--spacer--sm);
17430
17430
  --pf-v6-c-hint__footer--child--MarginRight: var(--pf-t--global--spacer--md);
17431
17431
  --pf-v6-c-hint__actions--MarginLeft: var(--pf-t--global--spacer--2xl);
17432
- --pf-v6-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-v6-global--spacer--form-element) * -1);
17432
+ --pf-v6-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
17433
17433
  }
17434
17434
 
17435
17435
  .pf-v6-c-hint {
@@ -18017,8 +18017,8 @@ label.pf-v6-c-input-group__text {
18017
18017
  --pf-v6-c-jump-links__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
18018
18018
  --pf-v6-c-jump-links__label--MarginBottom: var(--pf-t--global--spacer--md);
18019
18019
  --pf-v6-c-jump-links__label--Display: block;
18020
- --pf-v6-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-v6-global--spacer--form-element));
18021
- --pf-v6-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-v6-global--spacer--form-element));
18020
+ --pf-v6-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
18021
+ --pf-v6-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
18022
18022
  --pf-v6-c-jump-links__toggle--MarginBottom: var(--pf-v6-c-jump-links__toggle--MarginBottom--base);
18023
18023
  --pf-v6-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-v6-c-jump-links__toggle--MarginBottom--base) + var(--pf-t--global--spacer--md));
18024
18024
  --pf-v6-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-t--global--spacer--md));
@@ -23562,7 +23562,7 @@ ul.pf-v6-c-list {
23562
23562
  --pf-v6-c-popover__arrow--m-inline-bottom--Bottom: var(--pf-t--global--border--radius--medium);
23563
23563
  --pf-v6-c-popover__arrow--m-block-left--Left: var(--pf-t--global--border--radius--medium);
23564
23564
  --pf-v6-c-popover__arrow--m-block-right--Right: var(--pf-t--global--border--radius--medium);
23565
- --pf-v6-c-popover__close--Top: calc(var(--pf-v6-c-popover__content--PaddingTop) - (var(--pf-t--global--spacer--xs) * 1.5));
23565
+ --pf-v6-c-popover__close--Top: calc(var(--pf-v6-c-popover__content--PaddingTop) - (var(--pf-t--global--spacer--control--vertical--compact) * 1.5));
23566
23566
  --pf-v6-c-popover__close--Right: var(--pf-v6-c-popover__content--PaddingRight);
23567
23567
  --pf-v6-c-popover__close--sibling--PaddingRight: var(--pf-t--global--spacer--2xl);
23568
23568
  --pf-v6-c-popover__header--MarginBottom: var(--pf-t--global--spacer--sm);
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -6889,8 +6889,8 @@ button) {
6889
6889
  --pf-v6-c-alert--PaddingBottom: var(--pf-t--global--spacer--md);
6890
6890
  --pf-v6-c-alert--PaddingLeft: var(--pf-t--global--spacer--md);
6891
6891
  --pf-v6-c-alert--FontSize: var(--pf-t--global--font--size--body--default);
6892
- --pf-v6-c-alert__toggle--MarginTop: calc(-1 * var(--pf-v6-global--spacer--form-element) - 0.0625rem);
6893
- --pf-v6-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-v6-global--spacer--form-element));
6892
+ --pf-v6-c-alert__toggle--MarginTop: calc(-1 * var(--pf-t--global--spacer--button--vertical--default) - 0.0625rem);
6893
+ --pf-v6-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
6894
6894
  --pf-v6-c-alert__toggle--MarginRight: var(--pf-t--global--spacer--sm);
6895
6895
  --pf-v6-c-alert__toggle-icon--Rotate: 0;
6896
6896
  --pf-v6-c-alert__toggle-icon--Transition: var(--pf-v6-global--Transition);
@@ -6904,8 +6904,8 @@ button) {
6904
6904
  --pf-v6-c-alert__title--LineHeight: var(--pf-t--global--font--line-height--heading);
6905
6905
  --pf-v6-c-alert__title--Color: var(--pf-t--global--text--color--regular);
6906
6906
  --pf-v6-c-alert__title--max-lines: 1;
6907
- --pf-v6-c-alert__action--MarginTop: calc(var(--pf-v6-global--spacer--form-element) * -1);
6908
- --pf-v6-c-alert__action--MarginBottom: calc(var(--pf-v6-global--spacer--form-element) * -1);
6907
+ --pf-v6-c-alert__action--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
6908
+ --pf-v6-c-alert__action--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
6909
6909
  --pf-v6-c-alert__action--TranslateY: 0.125rem;
6910
6910
  --pf-v6-c-alert__action--MarginRight: calc(var(--pf-t--global--spacer--sm) * -1);
6911
6911
  --pf-v6-c-alert__description--PaddingTop: var(--pf-t--global--spacer--xs);
@@ -7995,9 +7995,9 @@ button) {
7995
7995
  --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
7996
7996
  --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
7997
7997
  --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
7998
- --pf-v6-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
7998
+ --pf-v6-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
7999
7999
  --pf-v6-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-v6-c-breadcrumb__item--MarginRight) * -1);
8000
- --pf-v6-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1);
8000
+ --pf-v6-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8001
8001
  --pf-v6-c-breadcrumb__dropdown--MarginLeft: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginRight) * -1);
8002
8002
  --pf-v6-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-t--global--font--line-height--body);
8003
8003
  }
@@ -8884,11 +8884,11 @@ button.pf-v6-c-breadcrumb__link {
8884
8884
  --pf-v6-c-card__footer--Color: var(--pf-t--global--text--color--subtle);
8885
8885
  --pf-v6-c-card__actions--PaddingLeft: var(--pf-t--global--spacer--md);
8886
8886
  --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--sm);
8887
- --pf-v6-c-card__actions--MarginTop: calc(var(--pf-v6-global--spacer--form-element) * -1);
8888
- --pf-v6-c-card__actions--MarginBottom: calc(var(--pf-v6-global--spacer--form-element) * -1);
8889
- --pf-v6-c-card__header-toggle--MarginTop: calc(var(--pf-v6-global--spacer--form-element) * -1);
8887
+ --pf-v6-c-card__actions--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8888
+ --pf-v6-c-card__actions--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8889
+ --pf-v6-c-card__header-toggle--MarginTop: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
8890
8890
  --pf-v6-c-card__header-toggle--MarginRight: var(--pf-t--global--spacer--xs);
8891
- --pf-v6-c-card__header-toggle--MarginBottom: calc(var(--pf-v6-global--spacer--form-element) * -1);
8891
+ --pf-v6-c-card__header-toggle--MarginBottom: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
8892
8892
  --pf-v6-c-card__header-toggle--MarginLeft: calc(var(--pf-t--global--spacer--md) * -1);
8893
8893
  --pf-v6-c-card__header-toggle-icon--Transition: var(--pf-v6-global--Transition);
8894
8894
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
@@ -8930,7 +8930,7 @@ button.pf-v6-c-breadcrumb__link {
8930
8930
  --pf-v6-c-card--m-full-height--Height: 100%;
8931
8931
  --pf-v6-c-card--m-plain--BorderColor: transparent;
8932
8932
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
8933
- --pf-v6-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-v6-global--spacer--form-element) * -1);
8933
+ --pf-v6-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-t--global--spacer--button--horizontal--compact) * -1);
8934
8934
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-t--global--spacer--xs);
8935
8935
  }
8936
8936
 
@@ -10821,8 +10821,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
10821
10821
  --pf-v6-c-data-list--cell--WordBreak: normal;
10822
10822
  --pf-v6-c-data-list--cell--m-truncate--MinWidth: 5ch;
10823
10823
  --pf-v6-c-data-list__toggle--MarginLeft: calc(var(--pf-t--global--spacer--sm) * -1);
10824
- --pf-v6-c-data-list__toggle--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
10825
- --pf-v6-c-data-list__toggle--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1);
10824
+ --pf-v6-c-data-list__toggle--MarginTop: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
10825
+ --pf-v6-c-data-list__toggle--MarginBottom: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
10826
10826
  --pf-v6-c-data-list__toggle-icon--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
10827
10827
  --pf-v6-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
10828
10828
  --pf-v6-c-data-list__toggle-icon--Rotate: 0;
@@ -15020,8 +15020,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
15020
15020
  --pf-v6-c-drawer__splitter-handle--after--Height: 0.25rem;
15021
15021
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
15022
15022
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
15023
- --pf-v6-c-drawer__actions--MarginTop: calc(var(--pf-t--global--spacer--xs) * -1.5);
15024
- --pf-v6-c-drawer__actions--MarginRight: calc(var(--pf-t--global--spacer--xs) * -1.5);
15023
+ --pf-v6-c-drawer__actions--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--compact) * -1.5);
15024
+ --pf-v6-c-drawer__actions--MarginRight: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
15025
15025
  --pf-v6-c-drawer__panel--BoxShadow: none;
15026
15026
  --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--top);
15027
15027
  --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--divider--default);
@@ -17275,8 +17275,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
17275
17275
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
17276
17276
  --pf-v6-c-form-control--Width: 100%;
17277
17277
  --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--md);
17278
- --pf-v6-c-form-control--PaddingTop: var(--pf-t--global--spacer--sm);
17279
- --pf-v6-c-form-control--PaddingBottom: var(--pf-t--global--spacer--sm);
17278
+ --pf-v6-c-form-control--PaddingTop: var(--pf-t--global--spacer--control--vertical--default);
17279
+ --pf-v6-c-form-control--PaddingBottom: var(--pf-t--global--spacer--control--vertical--default);
17280
17280
  --pf-v6-c-form-control--PaddingRight: var(--pf-v6-c-form-control--inset--base);
17281
17281
  --pf-v6-c-form-control--PaddingLeft: var(--pf-v6-c-form-control--inset--base);
17282
17282
  --pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
@@ -17546,7 +17546,7 @@ select ~ .pf-v6-c-form-control__utilities {
17546
17546
  --pf-v6-c-hint__footer--MarginTop: var(--pf-t--global--spacer--sm);
17547
17547
  --pf-v6-c-hint__footer--child--MarginRight: var(--pf-t--global--spacer--md);
17548
17548
  --pf-v6-c-hint__actions--MarginLeft: var(--pf-t--global--spacer--2xl);
17549
- --pf-v6-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-v6-global--spacer--form-element) * -1);
17549
+ --pf-v6-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
17550
17550
  }
17551
17551
 
17552
17552
  .pf-v6-c-hint {
@@ -18134,8 +18134,8 @@ label.pf-v6-c-input-group__text {
18134
18134
  --pf-v6-c-jump-links__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
18135
18135
  --pf-v6-c-jump-links__label--MarginBottom: var(--pf-t--global--spacer--md);
18136
18136
  --pf-v6-c-jump-links__label--Display: block;
18137
- --pf-v6-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-v6-global--spacer--form-element));
18138
- --pf-v6-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-v6-global--spacer--form-element));
18137
+ --pf-v6-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
18138
+ --pf-v6-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
18139
18139
  --pf-v6-c-jump-links__toggle--MarginBottom: var(--pf-v6-c-jump-links__toggle--MarginBottom--base);
18140
18140
  --pf-v6-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-v6-c-jump-links__toggle--MarginBottom--base) + var(--pf-t--global--spacer--md));
18141
18141
  --pf-v6-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-t--global--spacer--md));
@@ -23679,7 +23679,7 @@ ul.pf-v6-c-list {
23679
23679
  --pf-v6-c-popover__arrow--m-inline-bottom--Bottom: var(--pf-t--global--border--radius--medium);
23680
23680
  --pf-v6-c-popover__arrow--m-block-left--Left: var(--pf-t--global--border--radius--medium);
23681
23681
  --pf-v6-c-popover__arrow--m-block-right--Right: var(--pf-t--global--border--radius--medium);
23682
- --pf-v6-c-popover__close--Top: calc(var(--pf-v6-c-popover__content--PaddingTop) - (var(--pf-t--global--spacer--xs) * 1.5));
23682
+ --pf-v6-c-popover__close--Top: calc(var(--pf-v6-c-popover__content--PaddingTop) - (var(--pf-t--global--spacer--control--vertical--compact) * 1.5));
23683
23683
  --pf-v6-c-popover__close--Right: var(--pf-v6-c-popover__content--PaddingRight);
23684
23684
  --pf-v6-c-popover__close--sibling--PaddingRight: var(--pf-t--global--spacer--2xl);
23685
23685
  --pf-v6-c-popover__header--MarginBottom: var(--pf-t--global--spacer--sm);