@patternfly/patternfly 6.0.0-alpha.162 → 6.0.0-alpha.164

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 (11) hide show
  1. package/components/ClipboardCopy/clipboard-copy.css +11 -19
  2. package/components/ClipboardCopy/clipboard-copy.scss +12 -20
  3. package/components/JumpLinks/jump-links.css +4 -14
  4. package/components/JumpLinks/jump-links.scss +4 -15
  5. package/components/_index.css +15 -33
  6. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +7 -7
  7. package/package.json +1 -1
  8. package/patternfly-no-globals.css +15 -33
  9. package/patternfly.css +15 -33
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
package/components/ClipboardCopy/clipboard-copy.css CHANGED
@@ -15,18 +15,15 @@
15
15
  --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
16
16
  --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
17
17
  --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--xs);
18
- --pf-v6-c-clipboard-copy--m-inline--PaddingBlockStart: 0;
19
- --pf-v6-c-clipboard-copy--m-inline--PaddingBlockEnd: 0;
20
18
  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
19
+ --pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
21
20
  --pf-v6-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
21
+ --pf-v6-c-clipboard-copy__actions--Gap: var(--pf-t--global--spacer--sm);
22
+ --pf-v6-c-clipboard-copy__actions--MarginInlineStart: var(--pf-t--global--spacer--xs);
23
+ --pf-v6-c-clipboard-copy__actions-item--button--Color: var(--pf-t--global--icon--color--subtle);
24
+ --pf-v6-c-clipboard-copy__actions-item--button--hover--Color: var(--pf-t--global--icon--color--regular);
22
25
  --pf-v6-c-clipboard-copy__text--m-code--FontFamily: var(--pf-t--global--font--family--mono);
23
26
  --pf-v6-c-clipboard-copy__text--m-code--FontSize: var(--pf-t--global--font--size--body--default);
24
- --pf-v6-c-clipboard-copy__actions-item--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--xs));
25
- --pf-v6-c-clipboard-copy__actions-item--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--xs));
26
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
27
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
28
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
29
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
30
27
  }
31
28
 
32
29
  .pf-v6-c-clipboard-copy.pf-m-expanded .pf-v6-c-clipboard-copy__toggle-icon {
@@ -34,9 +31,8 @@
34
31
  }
35
32
  .pf-v6-c-clipboard-copy.pf-m-inline {
36
33
  display: inline;
37
- padding-block-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockStart);
38
- padding-block-end: var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockEnd);
39
34
  padding-inline-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart);
35
+ padding-inline-end: var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd);
40
36
  white-space: nowrap;
41
37
  background-color: var(--pf-v6-c-clipboard-copy--m-inline--BackgroundColor);
42
38
  }
@@ -91,15 +87,11 @@
91
87
 
92
88
  .pf-v6-c-clipboard-copy__actions {
93
89
  display: inline-flex;
90
+ gap: var(--pf-v6-c-clipboard-copy__actions--Gap);
91
+ margin-inline-start: var(--pf-v6-c-clipboard-copy__actions--MarginInlineStart);
94
92
  }
95
93
 
96
- .pf-v6-c-clipboard-copy__actions-item {
97
- margin-block-start: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart));
98
- margin-block-end: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd));
99
- }
100
- .pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button {
101
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart);
102
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineEnd);
103
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd);
104
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineStart);
94
+ .pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button.pf-m-plain {
95
+ --pf-v6-c-button--m-plain--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--Color);
96
+ --pf-v6-c-button--m-plain--hover--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--hover--Color);
105
97
  }
package/components/ClipboardCopy/clipboard-copy.scss CHANGED
@@ -24,22 +24,17 @@
24
24
  --#{$clipboard-copy}__group--Gap: var(--pf-t--global--spacer--xs);
25
25
 
26
26
  // Inline
27
- --#{$clipboard-copy}--m-inline--PaddingBlockStart: 0; // remove at breaking change
28
- --#{$clipboard-copy}--m-inline--PaddingBlockEnd: 0; // remove at breaking change
29
27
  --#{$clipboard-copy}--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
28
+ --#{$clipboard-copy}--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
30
29
  --#{$clipboard-copy}--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
30
+ --#{$clipboard-copy}__actions--Gap: var(--pf-t--global--spacer--sm);
31
+ --#{$clipboard-copy}__actions--MarginInlineStart: var(--pf-t--global--spacer--xs);
32
+ --#{$clipboard-copy}__actions-item--button--Color: var(--pf-t--global--icon--color--subtle);
33
+ --#{$clipboard-copy}__actions-item--button--hover--Color: var(--pf-t--global--icon--color--regular);
31
34
 
32
35
  // Text
33
36
  --#{$clipboard-copy}__text--m-code--FontFamily: var(--pf-t--global--font--family--mono);
34
37
  --#{$clipboard-copy}__text--m-code--FontSize: var(--pf-t--global--font--size--body--default);
35
-
36
- // Actions
37
- --#{$clipboard-copy}__actions-item--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--xs));
38
- --#{$clipboard-copy}__actions-item--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--xs));
39
- --#{$clipboard-copy}__actions-item--button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
40
- --#{$clipboard-copy}__actions-item--button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
41
- --#{$clipboard-copy}__actions-item--button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
42
- --#{$clipboard-copy}__actions-item--button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
43
38
  }
44
39
 
45
40
  .#{$clipboard-copy} {
@@ -52,9 +47,8 @@
52
47
 
53
48
  &.pf-m-inline {
54
49
  display: inline;
55
- padding-block-start: var(--#{$clipboard-copy}--m-inline--PaddingBlockStart);
56
- padding-block-end: var(--#{$clipboard-copy}--m-inline--PaddingBlockEnd);
57
50
  padding-inline-start: var(--#{$clipboard-copy}--m-inline--PaddingInlineStart);
51
+ padding-inline-end: var(--#{$clipboard-copy}--m-inline--PaddingInlineEnd);
58
52
  white-space: nowrap;
59
53
  background-color: var(--#{$clipboard-copy}--m-inline--BackgroundColor);
60
54
 
@@ -114,17 +108,15 @@
114
108
 
115
109
  .#{$clipboard-copy}__actions {
116
110
  display: inline-flex;
111
+ gap: var(--#{$clipboard-copy}__actions--Gap);
112
+ margin-inline-start: var(--#{$clipboard-copy}__actions--MarginInlineStart);
117
113
  }
118
114
 
119
115
  .#{$clipboard-copy}__actions-item {
120
- margin-block-start: calc(-1 * var(--#{$clipboard-copy}__actions-item--button--PaddingBlockStart));
121
- margin-block-end: calc(-1 * var(--#{$clipboard-copy}__actions-item--button--PaddingBlockEnd));
122
-
123
- .#{$button} {
124
- --#{$button}--PaddingBlockStart: var(--#{$clipboard-copy}__actions-item--button--PaddingBlockStart);
125
- --#{$button}--PaddingInlineEnd: var(--#{$clipboard-copy}__actions-item--button--PaddingInlineEnd);
126
- --#{$button}--PaddingBlockEnd: var(--#{$clipboard-copy}__actions-item--button--PaddingBlockEnd);
127
- --#{$button}--PaddingInlineStart: var(--#{$clipboard-copy}__actions-item--button--PaddingInlineStart);
116
+
117
+ .#{$button}.pf-m-plain {
118
+ --#{$button}--m-plain--Color: var(--#{$clipboard-copy}__actions-item--button--Color);
119
+ --#{$button}--m-plain--hover--Color: var(--#{$clipboard-copy}__actions-item--button--hover--Color);
128
120
  }
129
121
  }
130
122
 
package/components/JumpLinks/jump-links.css CHANGED
@@ -41,18 +41,14 @@
41
41
  --pf-v6-c-jump-links__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
42
42
  --pf-v6-c-jump-links__label--MarginBlockEnd: var(--pf-t--global--spacer--md);
43
43
  --pf-v6-c-jump-links__label--Display: block;
44
- --pf-v6-c-jump-links__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
45
- --pf-v6-c-jump-links__toggle--MarginBlockEnd--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
46
- --pf-v6-c-jump-links__toggle--MarginBlockEnd: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd--base);
47
- --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: calc(var(--pf-v6-c-jump-links__toggle--MarginBlockEnd--base) + var(--pf-t--global--spacer--md));
48
- --pf-v6-c-jump-links__toggle--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--md));
44
+ --pf-v6-c-jump-links__toggle--MarginBlockEnd: 0;
45
+ --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: var(--pf-t--global--spacer--sm);
49
46
  --pf-v6-c-jump-links__toggle--Display: none;
50
- --pf-v6-c-jump-links__toggle-icon--Color: currentcolor;
47
+ --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
51
48
  --pf-v6-c-jump-links__toggle-icon--Transition: var(--pf-t--global--transition);
52
49
  --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
53
- --pf-v6-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
54
50
  --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
55
- --pf-v6-c-jump-links__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--md);
51
+ --pf-v6-c-jump-links__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
56
52
  --pf-v6-c-jump-links__toggle-text--Color: var(--pf-t--global--text--color--regular);
57
53
  }
58
54
 
@@ -236,13 +232,7 @@
236
232
 
237
233
  .pf-v6-c-jump-links__toggle {
238
234
  display: var(--pf-v6-c-jump-links__toggle--Display);
239
- margin-block-start: var(--pf-v6-c-jump-links__toggle--MarginBlockStart);
240
235
  margin-block-end: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd);
241
- margin-inline-start: var(--pf-v6-c-jump-links__toggle--MarginInlineStart);
242
- }
243
- .pf-v6-c-jump-links__toggle .pf-v6-c-button {
244
- display: flex;
245
- align-items: center;
246
236
  }
247
237
 
248
238
  .pf-v6-c-jump-links__toggle-icon {
package/components/JumpLinks/jump-links.scss CHANGED
@@ -56,22 +56,18 @@ $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--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
60
- --#{$jump-links}__toggle--MarginBlockEnd--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
61
- --#{$jump-links}__toggle--MarginBlockEnd: var(--#{$jump-links}__toggle--MarginBlockEnd--base);
62
- --#{$jump-links}--m-expanded__toggle--MarginBlockEnd: calc(var(--#{$jump-links}__toggle--MarginBlockEnd--base) + var(--pf-t--global--spacer--md));
63
- --#{$jump-links}__toggle--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--md));
59
+ --#{$jump-links}__toggle--MarginBlockEnd: 0;
60
+ --#{$jump-links}--m-expanded__toggle--MarginBlockEnd: var(--pf-t--global--spacer--sm);
64
61
  --#{$jump-links}__toggle--Display: none;
65
62
 
66
63
  // toggle icon
67
- --#{$jump-links}__toggle-icon--Color: currentcolor;
64
+ --#{$jump-links}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
68
65
  --#{$jump-links}__toggle-icon--Transition: var(--pf-t--global--transition);
69
66
  --#{$jump-links}__toggle-icon--Rotate: 0;
70
- --#{$jump-links}--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
71
67
  --#{$jump-links}--m-expanded__toggle-icon--Rotate: 90deg;
72
68
 
73
69
  // toggle text
74
- --#{$jump-links}__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--md);
70
+ --#{$jump-links}__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
75
71
  --#{$jump-links}__toggle-text--Color: var(--pf-t--global--text--color--regular);
76
72
  }
77
73
 
@@ -218,14 +214,7 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
218
214
 
219
215
  .#{$jump-links}__toggle {
220
216
  display: var(--#{$jump-links}__toggle--Display);
221
- margin-block-start: var(--#{$jump-links}__toggle--MarginBlockStart);
222
217
  margin-block-end: var(--#{$jump-links}__toggle--MarginBlockEnd);
223
- margin-inline-start: var(--#{$jump-links}__toggle--MarginInlineStart);
224
-
225
- .#{$button} {
226
- display: flex;
227
- align-items: center;
228
- }
229
218
  }
230
219
 
231
220
  .#{$jump-links}__toggle-icon {
package/components/_index.css CHANGED
@@ -2550,18 +2550,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2550
2550
  --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
2551
2551
  --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
2552
2552
  --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--xs);
2553
- --pf-v6-c-clipboard-copy--m-inline--PaddingBlockStart: 0;
2554
- --pf-v6-c-clipboard-copy--m-inline--PaddingBlockEnd: 0;
2555
2553
  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2554
+ --pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2556
2555
  --pf-v6-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
2556
+ --pf-v6-c-clipboard-copy__actions--Gap: var(--pf-t--global--spacer--sm);
2557
+ --pf-v6-c-clipboard-copy__actions--MarginInlineStart: var(--pf-t--global--spacer--xs);
2558
+ --pf-v6-c-clipboard-copy__actions-item--button--Color: var(--pf-t--global--icon--color--subtle);
2559
+ --pf-v6-c-clipboard-copy__actions-item--button--hover--Color: var(--pf-t--global--icon--color--regular);
2557
2560
  --pf-v6-c-clipboard-copy__text--m-code--FontFamily: var(--pf-t--global--font--family--mono);
2558
2561
  --pf-v6-c-clipboard-copy__text--m-code--FontSize: var(--pf-t--global--font--size--body--default);
2559
- --pf-v6-c-clipboard-copy__actions-item--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--xs));
2560
- --pf-v6-c-clipboard-copy__actions-item--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--xs));
2561
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2562
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2563
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2564
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2565
2562
  }
2566
2563
 
2567
2564
  .pf-v6-c-clipboard-copy.pf-m-expanded .pf-v6-c-clipboard-copy__toggle-icon {
@@ -2569,9 +2566,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2569
2566
  }
2570
2567
  .pf-v6-c-clipboard-copy.pf-m-inline {
2571
2568
  display: inline;
2572
- padding-block-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockStart);
2573
- padding-block-end: var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockEnd);
2574
2569
  padding-inline-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart);
2570
+ padding-inline-end: var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd);
2575
2571
  white-space: nowrap;
2576
2572
  background-color: var(--pf-v6-c-clipboard-copy--m-inline--BackgroundColor);
2577
2573
  }
@@ -2626,17 +2622,13 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2626
2622
 
2627
2623
  .pf-v6-c-clipboard-copy__actions {
2628
2624
  display: inline-flex;
2625
+ gap: var(--pf-v6-c-clipboard-copy__actions--Gap);
2626
+ margin-inline-start: var(--pf-v6-c-clipboard-copy__actions--MarginInlineStart);
2629
2627
  }
2630
2628
 
2631
- .pf-v6-c-clipboard-copy__actions-item {
2632
- margin-block-start: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart));
2633
- margin-block-end: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd));
2634
- }
2635
- .pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button {
2636
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart);
2637
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineEnd);
2638
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd);
2639
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineStart);
2629
+ .pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button.pf-m-plain {
2630
+ --pf-v6-c-button--m-plain--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--Color);
2631
+ --pf-v6-c-button--m-plain--hover--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--hover--Color);
2640
2632
  }
2641
2633
 
2642
2634
  :where(:root, .pf-v6-c-code-block) {
@@ -7589,18 +7581,14 @@ label.pf-v6-c-input-group__text {
7589
7581
  --pf-v6-c-jump-links__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
7590
7582
  --pf-v6-c-jump-links__label--MarginBlockEnd: var(--pf-t--global--spacer--md);
7591
7583
  --pf-v6-c-jump-links__label--Display: block;
7592
- --pf-v6-c-jump-links__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
7593
- --pf-v6-c-jump-links__toggle--MarginBlockEnd--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
7594
- --pf-v6-c-jump-links__toggle--MarginBlockEnd: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd--base);
7595
- --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: calc(var(--pf-v6-c-jump-links__toggle--MarginBlockEnd--base) + var(--pf-t--global--spacer--md));
7596
- --pf-v6-c-jump-links__toggle--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--md));
7584
+ --pf-v6-c-jump-links__toggle--MarginBlockEnd: 0;
7585
+ --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: var(--pf-t--global--spacer--sm);
7597
7586
  --pf-v6-c-jump-links__toggle--Display: none;
7598
- --pf-v6-c-jump-links__toggle-icon--Color: currentcolor;
7587
+ --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
7599
7588
  --pf-v6-c-jump-links__toggle-icon--Transition: var(--pf-t--global--transition);
7600
7589
  --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
7601
- --pf-v6-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
7602
7590
  --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
7603
- --pf-v6-c-jump-links__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--md);
7591
+ --pf-v6-c-jump-links__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
7604
7592
  --pf-v6-c-jump-links__toggle-text--Color: var(--pf-t--global--text--color--regular);
7605
7593
  }
7606
7594
 
@@ -7784,13 +7772,7 @@ label.pf-v6-c-input-group__text {
7784
7772
 
7785
7773
  .pf-v6-c-jump-links__toggle {
7786
7774
  display: var(--pf-v6-c-jump-links__toggle--Display);
7787
- margin-block-start: var(--pf-v6-c-jump-links__toggle--MarginBlockStart);
7788
7775
  margin-block-end: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd);
7789
- margin-inline-start: var(--pf-v6-c-jump-links__toggle--MarginInlineStart);
7790
- }
7791
- .pf-v6-c-jump-links__toggle .pf-v6-c-button {
7792
- display: flex;
7793
- align-items: center;
7794
7776
  }
7795
7777
 
7796
7778
  .pf-v6-c-jump-links__toggle-icon {
package/docs/components/ClipboardCopy/examples/ClipboardCopy.md CHANGED
@@ -329,7 +329,7 @@ cssPrefix: pf-v6-c-clipboard-copy
329
329
  <span class="pf-v6-c-clipboard-copy__actions">
330
330
  <span class="pf-v6-c-clipboard-copy__actions-item">
331
331
  <button
332
- class="pf-v6-c-button pf-m-plain"
332
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
333
333
  type="button"
334
334
  aria-label="Copy to clipboard"
335
335
  >
@@ -349,7 +349,7 @@ cssPrefix: pf-v6-c-clipboard-copy
349
349
  <span class="pf-v6-c-clipboard-copy__actions">
350
350
  <span class="pf-v6-c-clipboard-copy__actions-item">
351
351
  <button
352
- class="pf-v6-c-button pf-m-plain"
352
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
353
353
  type="button"
354
354
  aria-label="Copy to clipboard"
355
355
  >
@@ -369,7 +369,7 @@ cssPrefix: pf-v6-c-clipboard-copy
369
369
  <span class="pf-v6-c-clipboard-copy__actions">
370
370
  <span class="pf-v6-c-clipboard-copy__actions-item">
371
371
  <button
372
- class="pf-v6-c-button pf-m-plain"
372
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
373
373
  type="button"
374
374
  aria-label="Copy to clipboard"
375
375
  >
@@ -378,7 +378,7 @@ cssPrefix: pf-v6-c-clipboard-copy
378
378
  </span>
379
379
  <span class="pf-v6-c-clipboard-copy__actions-item">
380
380
  <button
381
- class="pf-v6-c-button pf-m-plain"
381
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
382
382
  type="button"
383
383
  aria-label="Run in web terminal"
384
384
  >
@@ -401,7 +401,7 @@ cssPrefix: pf-v6-c-clipboard-copy
401
401
  <span class="pf-v6-c-clipboard-copy__actions">
402
402
  <span class="pf-v6-c-clipboard-copy__actions-item">
403
403
  <button
404
- class="pf-v6-c-button pf-m-plain"
404
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
405
405
  type="button"
406
406
  aria-label="Copy to clipboard"
407
407
  >
@@ -424,7 +424,7 @@ cssPrefix: pf-v6-c-clipboard-copy
424
424
  <span class="pf-v6-c-clipboard-copy__actions">
425
425
  <span class="pf-v6-c-clipboard-copy__actions-item">
426
426
  <button
427
- class="pf-v6-c-button pf-m-plain"
427
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
428
428
  type="button"
429
429
  aria-label="Copy to clipboard"
430
430
  >
@@ -446,7 +446,7 @@ cssPrefix: pf-v6-c-clipboard-copy
446
446
  <span class="pf-v6-c-clipboard-copy__actions">
447
447
  <span class="pf-v6-c-clipboard-copy__actions-item">
448
448
  <button
449
- class="pf-v6-c-button pf-m-plain"
449
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
450
450
  type="button"
451
451
  aria-label="Copy to clipboard"
452
452
  >
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.162",
4
+ "version": "6.0.0-alpha.164",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -8588,18 +8588,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
8588
8588
  --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
8589
8589
  --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
8590
8590
  --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--xs);
8591
- --pf-v6-c-clipboard-copy--m-inline--PaddingBlockStart: 0;
8592
- --pf-v6-c-clipboard-copy--m-inline--PaddingBlockEnd: 0;
8593
8591
  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
8592
+ --pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
8594
8593
  --pf-v6-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
8594
+ --pf-v6-c-clipboard-copy__actions--Gap: var(--pf-t--global--spacer--sm);
8595
+ --pf-v6-c-clipboard-copy__actions--MarginInlineStart: var(--pf-t--global--spacer--xs);
8596
+ --pf-v6-c-clipboard-copy__actions-item--button--Color: var(--pf-t--global--icon--color--subtle);
8597
+ --pf-v6-c-clipboard-copy__actions-item--button--hover--Color: var(--pf-t--global--icon--color--regular);
8595
8598
  --pf-v6-c-clipboard-copy__text--m-code--FontFamily: var(--pf-t--global--font--family--mono);
8596
8599
  --pf-v6-c-clipboard-copy__text--m-code--FontSize: var(--pf-t--global--font--size--body--default);
8597
- --pf-v6-c-clipboard-copy__actions-item--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--xs));
8598
- --pf-v6-c-clipboard-copy__actions-item--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--xs));
8599
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
8600
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
8601
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
8602
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
8603
8600
  }
8604
8601
 
8605
8602
  .pf-v6-c-clipboard-copy.pf-m-expanded .pf-v6-c-clipboard-copy__toggle-icon {
@@ -8607,9 +8604,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
8607
8604
  }
8608
8605
  .pf-v6-c-clipboard-copy.pf-m-inline {
8609
8606
  display: inline;
8610
- padding-block-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockStart);
8611
- padding-block-end: var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockEnd);
8612
8607
  padding-inline-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart);
8608
+ padding-inline-end: var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd);
8613
8609
  white-space: nowrap;
8614
8610
  background-color: var(--pf-v6-c-clipboard-copy--m-inline--BackgroundColor);
8615
8611
  }
@@ -8664,17 +8660,13 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
8664
8660
 
8665
8661
  .pf-v6-c-clipboard-copy__actions {
8666
8662
  display: inline-flex;
8663
+ gap: var(--pf-v6-c-clipboard-copy__actions--Gap);
8664
+ margin-inline-start: var(--pf-v6-c-clipboard-copy__actions--MarginInlineStart);
8667
8665
  }
8668
8666
 
8669
- .pf-v6-c-clipboard-copy__actions-item {
8670
- margin-block-start: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart));
8671
- margin-block-end: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd));
8672
- }
8673
- .pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button {
8674
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart);
8675
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineEnd);
8676
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd);
8677
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineStart);
8667
+ .pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button.pf-m-plain {
8668
+ --pf-v6-c-button--m-plain--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--Color);
8669
+ --pf-v6-c-button--m-plain--hover--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--hover--Color);
8678
8670
  }
8679
8671
 
8680
8672
  :where(:root, .pf-v6-c-code-block) {
@@ -13627,18 +13619,14 @@ label.pf-v6-c-input-group__text {
13627
13619
  --pf-v6-c-jump-links__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
13628
13620
  --pf-v6-c-jump-links__label--MarginBlockEnd: var(--pf-t--global--spacer--md);
13629
13621
  --pf-v6-c-jump-links__label--Display: block;
13630
- --pf-v6-c-jump-links__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
13631
- --pf-v6-c-jump-links__toggle--MarginBlockEnd--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
13632
- --pf-v6-c-jump-links__toggle--MarginBlockEnd: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd--base);
13633
- --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: calc(var(--pf-v6-c-jump-links__toggle--MarginBlockEnd--base) + var(--pf-t--global--spacer--md));
13634
- --pf-v6-c-jump-links__toggle--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--md));
13622
+ --pf-v6-c-jump-links__toggle--MarginBlockEnd: 0;
13623
+ --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: var(--pf-t--global--spacer--sm);
13635
13624
  --pf-v6-c-jump-links__toggle--Display: none;
13636
- --pf-v6-c-jump-links__toggle-icon--Color: currentcolor;
13625
+ --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
13637
13626
  --pf-v6-c-jump-links__toggle-icon--Transition: var(--pf-t--global--transition);
13638
13627
  --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
13639
- --pf-v6-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
13640
13628
  --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
13641
- --pf-v6-c-jump-links__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--md);
13629
+ --pf-v6-c-jump-links__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
13642
13630
  --pf-v6-c-jump-links__toggle-text--Color: var(--pf-t--global--text--color--regular);
13643
13631
  }
13644
13632
 
@@ -13822,13 +13810,7 @@ label.pf-v6-c-input-group__text {
13822
13810
 
13823
13811
  .pf-v6-c-jump-links__toggle {
13824
13812
  display: var(--pf-v6-c-jump-links__toggle--Display);
13825
- margin-block-start: var(--pf-v6-c-jump-links__toggle--MarginBlockStart);
13826
13813
  margin-block-end: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd);
13827
- margin-inline-start: var(--pf-v6-c-jump-links__toggle--MarginInlineStart);
13828
- }
13829
- .pf-v6-c-jump-links__toggle .pf-v6-c-button {
13830
- display: flex;
13831
- align-items: center;
13832
13814
  }
13833
13815
 
13834
13816
  .pf-v6-c-jump-links__toggle-icon {
package/patternfly.css CHANGED
@@ -8709,18 +8709,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
8709
8709
  --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
8710
8710
  --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
8711
8711
  --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--xs);
8712
- --pf-v6-c-clipboard-copy--m-inline--PaddingBlockStart: 0;
8713
- --pf-v6-c-clipboard-copy--m-inline--PaddingBlockEnd: 0;
8714
8712
  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
8713
+ --pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
8715
8714
  --pf-v6-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
8715
+ --pf-v6-c-clipboard-copy__actions--Gap: var(--pf-t--global--spacer--sm);
8716
+ --pf-v6-c-clipboard-copy__actions--MarginInlineStart: var(--pf-t--global--spacer--xs);
8717
+ --pf-v6-c-clipboard-copy__actions-item--button--Color: var(--pf-t--global--icon--color--subtle);
8718
+ --pf-v6-c-clipboard-copy__actions-item--button--hover--Color: var(--pf-t--global--icon--color--regular);
8716
8719
  --pf-v6-c-clipboard-copy__text--m-code--FontFamily: var(--pf-t--global--font--family--mono);
8717
8720
  --pf-v6-c-clipboard-copy__text--m-code--FontSize: var(--pf-t--global--font--size--body--default);
8718
- --pf-v6-c-clipboard-copy__actions-item--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--xs));
8719
- --pf-v6-c-clipboard-copy__actions-item--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--xs));
8720
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
8721
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
8722
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
8723
- --pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
8724
8721
  }
8725
8722
 
8726
8723
  .pf-v6-c-clipboard-copy.pf-m-expanded .pf-v6-c-clipboard-copy__toggle-icon {
@@ -8728,9 +8725,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
8728
8725
  }
8729
8726
  .pf-v6-c-clipboard-copy.pf-m-inline {
8730
8727
  display: inline;
8731
- padding-block-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockStart);
8732
- padding-block-end: var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockEnd);
8733
8728
  padding-inline-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart);
8729
+ padding-inline-end: var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd);
8734
8730
  white-space: nowrap;
8735
8731
  background-color: var(--pf-v6-c-clipboard-copy--m-inline--BackgroundColor);
8736
8732
  }
@@ -8785,17 +8781,13 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
8785
8781
 
8786
8782
  .pf-v6-c-clipboard-copy__actions {
8787
8783
  display: inline-flex;
8784
+ gap: var(--pf-v6-c-clipboard-copy__actions--Gap);
8785
+ margin-inline-start: var(--pf-v6-c-clipboard-copy__actions--MarginInlineStart);
8788
8786
  }
8789
8787
 
8790
- .pf-v6-c-clipboard-copy__actions-item {
8791
- margin-block-start: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart));
8792
- margin-block-end: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd));
8793
- }
8794
- .pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button {
8795
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart);
8796
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineEnd);
8797
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd);
8798
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineStart);
8788
+ .pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button.pf-m-plain {
8789
+ --pf-v6-c-button--m-plain--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--Color);
8790
+ --pf-v6-c-button--m-plain--hover--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--hover--Color);
8799
8791
  }
8800
8792
 
8801
8793
  :where(:root, .pf-v6-c-code-block) {
@@ -13748,18 +13740,14 @@ label.pf-v6-c-input-group__text {
13748
13740
  --pf-v6-c-jump-links__item--m-current__link-text--Color: var(--pf-t--global--text--color--regular);
13749
13741
  --pf-v6-c-jump-links__label--MarginBlockEnd: var(--pf-t--global--spacer--md);
13750
13742
  --pf-v6-c-jump-links__label--Display: block;
13751
- --pf-v6-c-jump-links__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
13752
- --pf-v6-c-jump-links__toggle--MarginBlockEnd--base: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
13753
- --pf-v6-c-jump-links__toggle--MarginBlockEnd: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd--base);
13754
- --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: calc(var(--pf-v6-c-jump-links__toggle--MarginBlockEnd--base) + var(--pf-t--global--spacer--md));
13755
- --pf-v6-c-jump-links__toggle--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--md));
13743
+ --pf-v6-c-jump-links__toggle--MarginBlockEnd: 0;
13744
+ --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: var(--pf-t--global--spacer--sm);
13756
13745
  --pf-v6-c-jump-links__toggle--Display: none;
13757
- --pf-v6-c-jump-links__toggle-icon--Color: currentcolor;
13746
+ --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
13758
13747
  --pf-v6-c-jump-links__toggle-icon--Transition: var(--pf-t--global--transition);
13759
13748
  --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
13760
- --pf-v6-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
13761
13749
  --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
13762
- --pf-v6-c-jump-links__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--md);
13750
+ --pf-v6-c-jump-links__toggle-text--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
13763
13751
  --pf-v6-c-jump-links__toggle-text--Color: var(--pf-t--global--text--color--regular);
13764
13752
  }
13765
13753
 
@@ -13943,13 +13931,7 @@ label.pf-v6-c-input-group__text {
13943
13931
 
13944
13932
  .pf-v6-c-jump-links__toggle {
13945
13933
  display: var(--pf-v6-c-jump-links__toggle--Display);
13946
- margin-block-start: var(--pf-v6-c-jump-links__toggle--MarginBlockStart);
13947
13934
  margin-block-end: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd);
13948
- margin-inline-start: var(--pf-v6-c-jump-links__toggle--MarginInlineStart);
13949
- }
13950
- .pf-v6-c-jump-links__toggle .pf-v6-c-button {
13951
- display: flex;
13952
- align-items: center;
13953
13935
  }
13954
13936
 
13955
13937
  .pf-v6-c-jump-links__toggle-icon {