@patternfly/patternfly 6.0.0-alpha.171 → 6.0.0-alpha.173

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 (32) hide show
  1. package/assets/images/img_avatar-dark.svg +22 -16
  2. package/assets/images/img_avatar-light.svg +25 -18
  3. package/base/patternfly-variables.css +907 -906
  4. package/base/tokens/tokens-charts-dark.scss +153 -153
  5. package/base/tokens/tokens-charts.scss +153 -153
  6. package/base/tokens/tokens-dark.scss +301 -301
  7. package/base/tokens/tokens-default.scss +551 -550
  8. package/base/tokens/tokens-palette.scss +65 -65
  9. package/components/Button/button.css +6 -6
  10. package/components/Button/button.scss +6 -6
  11. package/components/Card/card.css +1 -1
  12. package/components/Card/card.scss +1 -1
  13. package/components/DataList/data-list.css +2 -2
  14. package/components/DataList/data-list.scss +2 -2
  15. package/components/Label/label.css +4 -4
  16. package/components/Label/label.scss +4 -4
  17. package/components/MenuToggle/menu-toggle.css +8 -8
  18. package/components/MenuToggle/menu-toggle.scss +8 -8
  19. package/components/Page/page.css +1 -1
  20. package/components/Page/page.scss +1 -1
  21. package/components/Wizard/wizard.css +5 -2
  22. package/components/Wizard/wizard.scss +5 -2
  23. package/components/_index.css +27 -24
  24. package/docs/components/MenuToggle/examples/MenuToggle.md +3 -3
  25. package/package.json +1 -1
  26. package/patternfly-base-no-globals.css +907 -906
  27. package/patternfly-base.css +907 -906
  28. package/patternfly-charts.css +311 -311
  29. package/patternfly-no-globals.css +934 -930
  30. package/patternfly.css +934 -930
  31. package/patternfly.min.css +1 -1
  32. package/patternfly.min.css.map +1 -1
package/base/tokens/tokens-palette.scss CHANGED
@@ -1,74 +1,74 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 13 Jun 2024 00:55:37 GMT
3
+ // Generated on Fri, 21 Jun 2024 21:25:19 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
- --pf-t--color--red--70: #5f0000;
7
- --pf-t--color--red--60: #a60000;
8
- --pf-t--color--red--50: #e00;
9
- --pf-t--color--red--40: #f56e6e;
10
- --pf-t--color--red--30: #f9a8a8;
11
- --pf-t--color--red--20: #fbc5c5;
12
- --pf-t--color--red--10: #fce3e3;
13
- --pf-t--color--purple--70: #21134d;
14
- --pf-t--color--purple--60: #3d2785;
15
- --pf-t--color--purple--50: #5e40be;
16
- --pf-t--color--purple--40: #876fd4;
17
- --pf-t--color--purple--30: #b6a6e9;
18
- --pf-t--color--purple--20: #d0c5f4;
6
+ --pf-t--color--black: #000;
7
+ --pf-t--color--blue--10: #e0f0ff;
8
+ --pf-t--color--blue--20: #b9dafc;
9
+ --pf-t--color--blue--30: #92c5f9;
10
+ --pf-t--color--blue--40: #4394e5;
11
+ --pf-t--color--blue--50: #06c;
12
+ --pf-t--color--blue--60: #004d99;
13
+ --pf-t--color--blue--70: #036;
14
+ --pf-t--color--gray--10: #f2f2f2;
15
+ --pf-t--color--gray--20: #e0e0e0;
16
+ --pf-t--color--gray--30: #c7c7c7;
17
+ --pf-t--color--gray--40: #a3a3a3;
18
+ --pf-t--color--gray--50: #707070;
19
+ --pf-t--color--gray--60: #4d4d4d;
20
+ --pf-t--color--gray--70: #383838;
21
+ --pf-t--color--gray--80: #292929;
22
+ --pf-t--color--gray--90: #1f1f1f;
23
+ --pf-t--color--gray--95: #151515;
24
+ --pf-t--color--green--10: #e9f7df;
25
+ --pf-t--color--green--20: #d1f1bb;
26
+ --pf-t--color--green--30: #afdc8f;
27
+ --pf-t--color--green--40: #87bb62;
28
+ --pf-t--color--green--50: #63993d;
29
+ --pf-t--color--green--60: #3d7317;
30
+ --pf-t--color--green--70: #204d00;
31
+ --pf-t--color--orange--10: #ffe8cc;
32
+ --pf-t--color--orange--20: #fccb8f;
33
+ --pf-t--color--orange--30: #f8ae54;
34
+ --pf-t--color--orange--40: #f5921b;
35
+ --pf-t--color--orange--50: #ca6c0f;
36
+ --pf-t--color--orange--60: #9e4a06;
37
+ --pf-t--color--orange--70: #732e00;
19
38
  --pf-t--color--purple--10: #ece6ff;
20
- --pf-t--color--red-orange--70: #731f00;
21
- --pf-t--color--red-orange--60: #b1380b;
22
- --pf-t--color--red-orange--50: #f0561d;
23
- --pf-t--color--red-orange--40: #f4784a;
24
- --pf-t--color--red-orange--30: #f89b78;
25
- --pf-t--color--red-orange--20: #fbbea8;
39
+ --pf-t--color--purple--20: #d0c5f4;
40
+ --pf-t--color--purple--30: #b6a6e9;
41
+ --pf-t--color--purple--40: #876fd4;
42
+ --pf-t--color--purple--50: #5e40be;
43
+ --pf-t--color--purple--60: #3d2785;
44
+ --pf-t--color--purple--70: #21134d;
45
+ --pf-t--color--red--10: #fce3e3;
46
+ --pf-t--color--red--20: #fbc5c5;
47
+ --pf-t--color--red--30: #f9a8a8;
48
+ --pf-t--color--red--40: #f56e6e;
49
+ --pf-t--color--red--50: #e00;
50
+ --pf-t--color--red--60: #a60000;
51
+ --pf-t--color--red--70: #5f0000;
26
52
  --pf-t--color--red-orange--10: #ffe3d9;
27
- --pf-t--color--orange--70: #732e00;
28
- --pf-t--color--orange--60: #9e4a06;
29
- --pf-t--color--orange--50: #ca6c0f;
30
- --pf-t--color--orange--40: #f5921b;
31
- --pf-t--color--orange--30: #f8ae54;
32
- --pf-t--color--orange--20: #fccb8f;
33
- --pf-t--color--orange--10: #ffe8cc;
34
- --pf-t--color--green--70: #204d00;
35
- --pf-t--color--green--60: #3d7317;
36
- --pf-t--color--green--50: #63993d;
37
- --pf-t--color--green--40: #87bb62;
38
- --pf-t--color--green--30: #afdc8f;
39
- --pf-t--color--green--20: #d1f1bb;
40
- --pf-t--color--green--10: #e9f7df;
41
- --pf-t--color--yellow--70: #73480b;
42
- --pf-t--color--yellow--60: #96640f;
43
- --pf-t--color--yellow--50: #b98412;
44
- --pf-t--color--yellow--40: #dca614;
45
- --pf-t--color--yellow--30: #ffcc17;
46
- --pf-t--color--yellow--20: #ffe072;
47
- --pf-t--color--yellow--10: #fff4cc;
48
- --pf-t--color--teal--70: #004d4d;
49
- --pf-t--color--teal--60: #147878;
50
- --pf-t--color--teal--50: #37a3a3;
51
- --pf-t--color--teal--40: #63bdbd;
52
- --pf-t--color--teal--30: #9ad8d8;
53
- --pf-t--color--teal--20: #b9e5e5;
53
+ --pf-t--color--red-orange--20: #fbbea8;
54
+ --pf-t--color--red-orange--30: #f89b78;
55
+ --pf-t--color--red-orange--40: #f4784a;
56
+ --pf-t--color--red-orange--50: #f0561d;
57
+ --pf-t--color--red-orange--60: #b1380b;
58
+ --pf-t--color--red-orange--70: #731f00;
54
59
  --pf-t--color--teal--10: #daf2f2;
55
- --pf-t--color--blue--70: #036;
56
- --pf-t--color--blue--60: #004d99;
57
- --pf-t--color--blue--50: #06c;
58
- --pf-t--color--blue--40: #4394e5;
59
- --pf-t--color--blue--30: #92c5f9;
60
- --pf-t--color--blue--20: #b9dafc;
61
- --pf-t--color--blue--10: #e0f0ff;
62
- --pf-t--color--black: #000;
63
- --pf-t--color--gray--95: #151515;
64
- --pf-t--color--gray--90: #1f1f1f;
65
- --pf-t--color--gray--80: #292929;
66
- --pf-t--color--gray--70: #383838;
67
- --pf-t--color--gray--60: #4d4d4d;
68
- --pf-t--color--gray--50: #707070;
69
- --pf-t--color--gray--40: #a3a3a3;
70
- --pf-t--color--gray--30: #c7c7c7;
71
- --pf-t--color--gray--20: #e0e0e0;
72
- --pf-t--color--gray--10: #f2f2f2;
60
+ --pf-t--color--teal--20: #b9e5e5;
61
+ --pf-t--color--teal--30: #9ad8d8;
62
+ --pf-t--color--teal--40: #63bdbd;
63
+ --pf-t--color--teal--50: #37a3a3;
64
+ --pf-t--color--teal--60: #147878;
65
+ --pf-t--color--teal--70: #004d4d;
73
66
  --pf-t--color--white: #fff;
67
+ --pf-t--color--yellow--10: #fff4cc;
68
+ --pf-t--color--yellow--20: #ffe072;
69
+ --pf-t--color--yellow--30: #ffcc17;
70
+ --pf-t--color--yellow--40: #dca614;
71
+ --pf-t--color--yellow--50: #b98412;
72
+ --pf-t--color--yellow--60: #96640f;
73
+ --pf-t--color--yellow--70: #73480b;
74
74
  }
package/components/Button/button.css CHANGED
@@ -13,7 +13,7 @@
13
13
  --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
14
14
  --pf-v6-c-button--BackgroundColor: transparent;
15
15
  --pf-v6-c-button--BorderColor: transparent;
16
- --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
16
+ --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
17
17
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
18
18
  --pf-v6-c-button--TextDecoration: none;
19
19
  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
@@ -21,11 +21,11 @@
21
21
  --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
22
22
  --pf-v6-c-button--hover--BackgroundColor: transparent;
23
23
  --pf-v6-c-button--hover--BorderColor: transparent;
24
- --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
24
+ --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
25
25
  --pf-v6-c-button--hover--TextDecoration: none;
26
26
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
27
27
  --pf-v6-c-button--m-clicked--BorderColor: transparent;
28
- --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--button--clicked);
28
+ --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
29
29
  --pf-v6-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
30
30
  --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
31
31
  --pf-v6-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
@@ -155,13 +155,13 @@
155
155
  --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
156
156
  --pf-v6-c-button--m-read--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
157
157
  --pf-v6-c-button--m-unread--Color: var(--pf-t--global--text--color--status--unread--on-default--default);
158
- --pf-v6-c-button--m-unread--BackgroundColor: var(--pf-t--global--color--status--unread--default--default);
158
+ --pf-v6-c-button--m-unread--BackgroundColor: var(--pf-t--global--color--status--unread--default);
159
159
  --pf-v6-c-button--m-unread__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--default);
160
160
  --pf-v6-c-button--m-unread--hover--Color: var(--pf-t--global--text--color--status--unread--on-default--hover);
161
- --pf-v6-c-button--m-unread--hover--BackgroundColor: var(--pf-t--global--color--status--unread--default--hover);
161
+ --pf-v6-c-button--m-unread--hover--BackgroundColor: var(--pf-t--global--color--status--unread--hover);
162
162
  --pf-v6-c-button--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--hover);
163
163
  --pf-v6-c-button--m-unread--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-default--clicked);
164
- --pf-v6-c-button--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--default--clicked);
164
+ --pf-v6-c-button--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--clicked);
165
165
  --pf-v6-c-button--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--clicked);
166
166
  --pf-v6-c-button--m-attention--Color: var(--pf-t--global--text--color--status--unread--on-attention--default);
167
167
  --pf-v6-c-button--m-attention--BackgroundColor: var(--pf-t--global--color--status--unread--attention--default);
package/components/Button/button.scss CHANGED
@@ -15,7 +15,7 @@
15
15
  --#{$button}--FontSize: var(--pf-t--global--font--size--body--default);
16
16
  --#{$button}--BackgroundColor: transparent;
17
17
  --#{$button}--BorderColor: transparent;
18
- --#{$button}--BorderWidth: var(--pf-t--global--border--width--button--default);
18
+ --#{$button}--BorderWidth: var(--pf-t--global--border--width--action--default);
19
19
  --#{$button}--BorderRadius: var(--pf-t--global--border--radius--pill);
20
20
  --#{$button}--TextDecoration: none;
21
21
  --#{$button}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
@@ -25,13 +25,13 @@
25
25
  // Hover
26
26
  --#{$button}--hover--BackgroundColor: transparent;
27
27
  --#{$button}--hover--BorderColor: transparent;
28
- --#{$button}--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
28
+ --#{$button}--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
29
29
  --#{$button}--hover--TextDecoration: none;
30
30
 
31
31
  // Clicked
32
32
  --#{$button}--m-clicked--BackgroundColor: transparent;
33
33
  --#{$button}--m-clicked--BorderColor: transparent;
34
- --#{$button}--m-clicked--BorderWidth: var(--pf-t--global--border--width--button--clicked);
34
+ --#{$button}--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
35
35
 
36
36
  // Primary
37
37
  --#{$button}--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
@@ -185,13 +185,13 @@
185
185
 
186
186
  // Unread
187
187
  --#{$button}--m-unread--Color: var(--pf-t--global--text--color--status--unread--on-default--default);
188
- --#{$button}--m-unread--BackgroundColor: var(--pf-t--global--color--status--unread--default--default);
188
+ --#{$button}--m-unread--BackgroundColor: var(--pf-t--global--color--status--unread--default);
189
189
  --#{$button}--m-unread__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--default);
190
190
  --#{$button}--m-unread--hover--Color: var(--pf-t--global--text--color--status--unread--on-default--hover);
191
- --#{$button}--m-unread--hover--BackgroundColor: var(--pf-t--global--color--status--unread--default--hover);
191
+ --#{$button}--m-unread--hover--BackgroundColor: var(--pf-t--global--color--status--unread--hover);
192
192
  --#{$button}--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--hover);
193
193
  --#{$button}--m-unread--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-default--clicked);
194
- --#{$button}--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--default--clicked);
194
+ --#{$button}--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--clicked);
195
195
  --#{$button}--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--clicked);
196
196
 
197
197
  // Attention
package/components/Card/card.css CHANGED
@@ -67,7 +67,7 @@
67
67
  --pf-v6-c-card--m-full-height--Height: 100%;
68
68
  --pf-v6-c-card--m-plain--BorderColor: transparent;
69
69
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
70
- --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--button--horizontal--compact) * -1);
70
+ --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--compact) * -1);
71
71
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
72
72
  }
73
73
 
package/components/Card/card.scss CHANGED
@@ -98,7 +98,7 @@
98
98
  --#{$card}--m-plain--BackgroundColor: transparent;
99
99
 
100
100
  // Toggle right
101
- --#{$card}__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--button--horizontal--compact) * -1);
101
+ --#{$card}__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--compact) * -1);
102
102
  --#{$card}__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
103
103
  }
104
104
 
package/components/DataList/data-list.css CHANGED
@@ -440,8 +440,8 @@
440
440
  --pf-v6-c-data-list--cell--WordBreak: normal;
441
441
  --pf-v6-c-data-list--cell--m-truncate--MinWidth: 5ch;
442
442
  --pf-v6-c-data-list__toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--sm) * -1);
443
- --pf-v6-c-data-list__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
444
- --pf-v6-c-data-list__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
443
+ --pf-v6-c-data-list__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
444
+ --pf-v6-c-data-list__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
445
445
  --pf-v6-c-data-list__toggle-icon--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
446
446
  --pf-v6-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
447
447
  --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--MarginInlineStart: calc(var(--pf-t--global--spacer--sm) * -1); // offset toggle to align left
60
- --#{$data-list}__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
61
- --#{$data-list}__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
60
+ --#{$data-list}__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
61
+ --#{$data-list}__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
62
62
  --#{$data-list}__toggle-icon--Height: calc(var(--#{$data-list}--FontSize) * var(--#{$data-list}--LineHeight));
63
63
  --#{$data-list}__toggle-icon--Transition: .2s ease-in 0s;
64
64
  --#{$data-list}__toggle-icon--Rotate: 0;
package/components/Label/label.css CHANGED
@@ -134,12 +134,12 @@
134
134
  --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
135
135
  --pf-v6-c-label--m-clickable__content--Cursor: pointer;
136
136
  --pf-v6-c-label--m-filled__actions--c-button--Color: var(--pf-v6-c-label__icon--Color);
137
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--button--default);
137
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
138
138
  --pf-v6-c-label--m-outline--BackgroundColor: transparent;
139
139
  --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
140
140
  --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
141
141
  --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
142
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
142
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
143
143
  --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
144
144
  --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
145
145
  --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
@@ -149,11 +149,11 @@
149
149
  --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
150
150
  --pf-v6-c-label--m-add--BackgroundColor: transparent;
151
151
  --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
152
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--button--default);
152
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
153
153
  --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
154
154
  --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
155
155
  --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
156
- --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
156
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
157
157
  --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
158
158
  --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
159
159
  --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
package/components/Label/label.scss CHANGED
@@ -170,12 +170,12 @@
170
170
  --#{$label}--m-filled__actions--c-button--Color: var(--#{$label}__icon--Color);
171
171
 
172
172
  // Outline
173
- --#{$label}--m-outline--BorderWidth: var(--pf-t--global--border--width--button--default);
173
+ --#{$label}--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
174
174
  --#{$label}--m-outline--BackgroundColor: transparent;
175
175
  --#{$label}--m-outline--Color: var(--pf-t--global--text--color--regular);
176
176
  --#{$label}--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
177
177
  --#{$label}--m-outline--m-clickable--hover--BackgroundColor: transparent;
178
- --#{$label}--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
178
+ --#{$label}--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
179
179
  --#{$label}--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
180
180
  --#{$label}--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
181
181
 
@@ -189,11 +189,11 @@
189
189
  --#{$label}--m-add--Color: var(--pf-t--global--text--color--brand--default);
190
190
  --#{$label}--m-add--BackgroundColor: transparent;
191
191
  --#{$label}--m-add--BorderColor: var(--pf-t--global--border--color--default);
192
- --#{$label}--m-add--BorderWidth: var(--pf-t--global--border--width--button--default);
192
+ --#{$label}--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
193
193
  --#{$label}--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
194
194
  --#{$label}--m-add--hover--BackgroundColor: transparent;
195
195
  --#{$label}--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
196
- --#{$label}--m-add--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
196
+ --#{$label}--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
197
197
 
198
198
  // Compact
199
199
  --#{$label}--m-compact--PaddingBlockStart: 0;
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -11,22 +11,22 @@
11
11
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
12
12
  --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
13
13
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
14
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--button--default);
14
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--action--default);
15
15
  --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
16
16
  --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
17
17
  --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
18
18
  --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
19
19
  --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
20
20
  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
21
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--button--default);
21
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--default);
22
22
  --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
23
23
  --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
24
24
  --pf-v6-c-menu-toggle--active--BackgroundColor: var(--pf-t--global--background--color--control--default);
25
- --pf-v6-c-menu-toggle--active--BorderWidth: var(--pf-t--global--border--width--button--clicked);
25
+ --pf-v6-c-menu-toggle--active--BorderWidth: var(--pf-t--global--border--width--action--clicked);
26
26
  --pf-v6-c-menu-toggle--active--BorderColor: var(--pf-t--global--border--color--clicked);
27
27
  --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
28
28
  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
29
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--button--clicked);
29
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
30
30
  --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
31
31
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
32
32
  --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
@@ -66,13 +66,13 @@
66
66
  --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
67
67
  --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
68
68
  --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
69
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
69
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
70
70
  --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
71
71
  --pf-v6-c-menu-toggle--m-secondary--active--Color: var(--pf-t--global--text--color--brand--clicked);
72
- --pf-v6-c-menu-toggle--m-secondary--active--BorderWidth: var(--pf-t--global--border--width--button--clicked);
72
+ --pf-v6-c-menu-toggle--m-secondary--active--BorderWidth: var(--pf-t--global--border--width--action--clicked);
73
73
  --pf-v6-c-menu-toggle--m-secondary--active--BorderColor: var(--pf-t--global--border--color--brand--clicked);
74
74
  --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
75
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--button--clicked);
75
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
76
76
  --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
77
77
  --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
78
78
  --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
@@ -82,7 +82,7 @@
82
82
  --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--lg);
83
83
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
84
84
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
85
- --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartWidth: var(--pf-t--global--border--width--button--default);
85
+ --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
86
86
  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
87
87
  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
88
88
  --pf-v6-c-menu-toggle--m-split-button--m-action--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -21,7 +21,7 @@
21
21
  --#{$menu-toggle}--BackgroundColor: var(--pf-t--global--background--color--control--default);
22
22
  --#{$menu-toggle}--BorderRadius: var(--pf-t--global--border--radius--small);
23
23
  --#{$menu-toggle}--BorderColor: var(--pf-t--global--border--color--default);
24
- --#{$menu-toggle}--BorderWidth: var(--pf-t--global--border--width--button--default);
24
+ --#{$menu-toggle}--BorderWidth: var(--pf-t--global--border--width--action--default);
25
25
  --#{$menu-toggle}--border--ZIndex: var(--pf-t--global--z-index--xs); // add z-index for toggle border to render above other borders
26
26
  --#{$menu-toggle}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
27
27
  --#{$menu-toggle}--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
@@ -30,19 +30,19 @@
30
30
  // * Menu toggle hover
31
31
  --#{$menu-toggle}--hover--Color: var(--pf-t--global--text--color--regular);
32
32
  --#{$menu-toggle}--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
33
- --#{$menu-toggle}--hover--BorderWidth: var(--pf-t--global--border--width--button--default);
33
+ --#{$menu-toggle}--hover--BorderWidth: var(--pf-t--global--border--width--action--default);
34
34
  --#{$menu-toggle}--hover--BorderColor: var(--pf-t--global--border--color--hover);
35
35
  --#{$menu-toggle}--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
36
36
 
37
37
  // * Menu toggle active
38
38
  --#{$menu-toggle}--active--BackgroundColor: var(--pf-t--global--background--color--control--default);
39
- --#{$menu-toggle}--active--BorderWidth: var(--pf-t--global--border--width--button--clicked);
39
+ --#{$menu-toggle}--active--BorderWidth: var(--pf-t--global--border--width--action--clicked);
40
40
  --#{$menu-toggle}--active--BorderColor: var(--pf-t--global--border--color--clicked);
41
41
 
42
42
  // * Menu toggle expanded
43
43
  --#{$menu-toggle}--expanded--Color: var(--pf-t--global--text--color--regular);
44
44
  --#{$menu-toggle}--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
45
- --#{$menu-toggle}--expanded--BorderWidth: var(--pf-t--global--border--width--button--clicked);
45
+ --#{$menu-toggle}--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
46
46
  --#{$menu-toggle}--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
47
47
  --#{$menu-toggle}--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
48
48
 
@@ -102,13 +102,13 @@
102
102
  --#{$menu-toggle}--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
103
103
  --#{$menu-toggle}--m-secondary--BorderRadius: var(--#{$menu-toggle}--m-button--BorderRadius);
104
104
  --#{$menu-toggle}--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
105
- --#{$menu-toggle}--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
105
+ --#{$menu-toggle}--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
106
106
  --#{$menu-toggle}--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
107
107
  --#{$menu-toggle}--m-secondary--active--Color: var(--pf-t--global--text--color--brand--clicked);
108
- --#{$menu-toggle}--m-secondary--active--BorderWidth: var(--pf-t--global--border--width--button--clicked);
108
+ --#{$menu-toggle}--m-secondary--active--BorderWidth: var(--pf-t--global--border--width--action--clicked);
109
109
  --#{$menu-toggle}--m-secondary--active--BorderColor: var(--pf-t--global--border--color--brand--clicked);
110
110
  --#{$menu-toggle}--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
111
- --#{$menu-toggle}--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--button--clicked);
111
+ --#{$menu-toggle}--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
112
112
  --#{$menu-toggle}--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
113
113
  --#{$menu-toggle}--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
114
114
  --#{$menu-toggle}--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
@@ -126,7 +126,7 @@
126
126
  --#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
127
127
 
128
128
  // Split button, action
129
- --#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartWidth: var(--pf-t--global--border--width--button--default);
129
+ --#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
130
130
  --#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
131
131
  --#{$menu-toggle}--m-split-button--m-action--child--BorderRadius: var(--#{$menu-toggle}--m-button--BorderRadius);
132
132
  --#{$menu-toggle}--m-split-button--m-action--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
package/components/Page/page.css CHANGED
@@ -79,7 +79,7 @@
79
79
  --pf-v6-c-page__main-tabs--BackgroundColor: var(--pf-t--global--background--color--primary--default);
80
80
  --pf-v6-c-page__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
81
81
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
82
- --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--button--default);
82
+ --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
83
83
  }
84
84
  @media (min-width: 1200px) {
85
85
  :where(:root, .pf-v6-c-page) {
package/components/Page/page.scss CHANGED
@@ -123,7 +123,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
123
123
  // Wizard main section
124
124
  --#{$page}__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
125
125
  --#{$page}__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
126
- --#{$page}__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--button--default);
126
+ --#{$page}__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
127
127
  }
128
128
 
129
129
  .#{$page} {
package/components/Wizard/wizard.css CHANGED
@@ -8,6 +8,8 @@
8
8
  --pf-v6-c-wizard__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
9
9
  --pf-v6-c-wizard__header--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
10
10
  --pf-v6-c-wizard__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
11
+ --pf-v6-c-wizard__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
12
+ --pf-v6-c-wizard__header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
11
13
  --pf-v6-c-wizard__close--InsetBlockStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-button--m-plain--PaddingBlockStart));
12
14
  --pf-v6-c-wizard__close--InsetInlineEnd: var(--pf-t--global--spacer--sm);
13
15
  --pf-v6-c-wizard__close--FontSize: var(--pf-t--global--font--size--xl);
@@ -61,7 +63,7 @@
61
63
  --pf-v6-c-wizard__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
62
64
  --pf-v6-c-wizard__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
63
65
  --pf-v6-c-wizard__toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
64
- --pf-v6-c-wizard__toggle--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
66
+ --pf-v6-c-wizard__toggle--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
65
67
  --pf-v6-c-wizard__toggle--BorderBlockEndColor: var(--pf-t--global--border--color--default);
66
68
  --pf-v6-c-wizard__toggle-num--InsetBlockStart: 0;
67
69
  --pf-v6-c-wizard__toggle-list-item--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--sm);
@@ -82,7 +84,7 @@
82
84
  --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
83
85
  --pf-v6-c-wizard__nav--Width: 100%;
84
86
  --pf-v6-c-wizard__nav--lg--Width: 15.625rem;
85
- --pf-v6-c-wizard__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
87
+ --pf-v6-c-wizard__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
86
88
  --pf-v6-c-wizard__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
87
89
  --pf-v6-c-wizard__nav-list--PaddingBlockStart: var(--pf-t--global--spacer--lg);
88
90
  --pf-v6-c-wizard__nav-list--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -145,6 +147,7 @@
145
147
  padding-inline-start: var(--pf-v6-c-wizard__header--PaddingInlineStart);
146
148
  padding-inline-end: var(--pf-v6-c-wizard__header--PaddingInlineEnd);
147
149
  background-color: var(--pf-v6-c-wizard__header--BackgroundColor);
150
+ border-block-end: var(--pf-v6-c-wizard__header--BorderBlockEndWidth) solid var(--pf-v6-c-wizard__header--BorderBlockEndColor);
148
151
  }
149
152
  .pf-v6-c-wizard__header .pf-v6-c-wizard__close {
150
153
  position: absolute;
package/components/Wizard/wizard.scss CHANGED
@@ -12,6 +12,8 @@
12
12
  --#{$wizard}__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
13
13
  --#{$wizard}__header--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
14
14
  --#{$wizard}__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
15
+ --#{$wizard}__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
16
+ --#{$wizard}__header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
15
17
 
16
18
  // Close
17
19
  --#{$wizard}__close--InsetBlockStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$button}--m-plain--PaddingBlockStart));
@@ -91,7 +93,7 @@
91
93
  --#{$wizard}__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
92
94
  --#{$wizard}__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
93
95
  --#{$wizard}__toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
94
- --#{$wizard}__toggle--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
96
+ --#{$wizard}__toggle--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
95
97
  --#{$wizard}__toggle--BorderBlockEndColor: var(--pf-t--global--border--color--default);
96
98
 
97
99
  // Toggle number
@@ -126,7 +128,7 @@
126
128
  --#{$wizard}__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
127
129
  --#{$wizard}__nav--Width: 100%;
128
130
  --#{$wizard}__nav--lg--Width: #{pf-size-prem(250px)};
129
- --#{$wizard}__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
131
+ --#{$wizard}__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
130
132
  --#{$wizard}__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
131
133
 
132
134
  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
@@ -207,6 +209,7 @@
207
209
  padding-inline-start: var(--#{$wizard}__header--PaddingInlineStart);
208
210
  padding-inline-end: var(--#{$wizard}__header--PaddingInlineEnd);
209
211
  background-color: var(--#{$wizard}__header--BackgroundColor);
212
+ border-block-end: var(--#{$wizard}__header--BorderBlockEndWidth) solid var(--#{$wizard}__header--BorderBlockEndColor);
210
213
 
211
214
  // Nested selector to match button component color specificity
212
215
  .#{$wizard}__close {