@patternfly/patternfly 6.0.0-alpha.170 → 6.0.0-alpha.172

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 (48) 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/Alert/alert.css +3 -9
  10. package/components/Alert/alert.scss +3 -9
  11. package/components/Button/button.css +6 -6
  12. package/components/Button/button.scss +6 -6
  13. package/components/Card/card.css +2 -2
  14. package/components/Card/card.scss +2 -2
  15. package/components/DataList/data-list.css +2 -2
  16. package/components/DataList/data-list.scss +2 -2
  17. package/components/Hint/hint.css +1 -7
  18. package/components/Hint/hint.scss +1 -7
  19. package/components/Label/label.css +4 -4
  20. package/components/Label/label.scss +4 -4
  21. package/components/MenuToggle/menu-toggle.css +8 -8
  22. package/components/MenuToggle/menu-toggle.scss +8 -8
  23. package/components/NotificationDrawer/notification-drawer.css +1 -7
  24. package/components/NotificationDrawer/notification-drawer.scss +1 -7
  25. package/components/Page/page.css +1 -1
  26. package/components/Page/page.scss +1 -1
  27. package/components/Popover/popover.css +3 -5
  28. package/components/Popover/popover.scss +4 -5
  29. package/components/Wizard/wizard.css +6 -1
  30. package/components/Wizard/wizard.scss +7 -1
  31. package/components/_index.css +37 -52
  32. package/docs/components/Accordion/examples/Accordion.md +1 -1
  33. package/docs/components/Button/examples/Button.md +1 -1
  34. package/docs/components/Label/examples/Label.md +5 -5
  35. package/docs/components/Menu/examples/Menu.md +19 -19
  36. package/docs/components/MenuToggle/examples/MenuToggle.md +4 -4
  37. package/docs/components/ModalBox/examples/ModalBox.md +1 -1
  38. package/docs/components/Nav/examples/Navigation.md +5 -5
  39. package/docs/components/Spinner/examples/Spinner.md +1 -1
  40. package/docs/components/Timestamp/examples/Timestamp.md +0 -1
  41. package/package.json +1 -1
  42. package/patternfly-base-no-globals.css +907 -906
  43. package/patternfly-base.css +907 -906
  44. package/patternfly-charts.css +311 -311
  45. package/patternfly-no-globals.css +957 -971
  46. package/patternfly.css +957 -971
  47. package/patternfly.min.css +1 -1
  48. 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/Alert/alert.css CHANGED
@@ -14,8 +14,8 @@
14
14
  --pf-v6-c-alert--PaddingBlockEnd: var(--pf-t--global--spacer--md);
15
15
  --pf-v6-c-alert--PaddingInlineStart: var(--pf-t--global--spacer--md);
16
16
  --pf-v6-c-alert--FontSize: var(--pf-t--global--font--size--body--default);
17
- --pf-v6-c-alert__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--button--vertical--default) - 0.0625rem);
18
- --pf-v6-c-alert__toggle--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
17
+ --pf-v6-c-alert__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
18
+ --pf-v6-c-alert__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
19
19
  --pf-v6-c-alert__toggle--MarginInlineEnd: var(--pf-t--global--spacer--sm);
20
20
  --pf-v6-c-alert__toggle-icon--Rotate: 0;
21
21
  --pf-v6-c-alert__toggle-icon--Transition: var(--pf-t--global--transition);
@@ -23,10 +23,7 @@
23
23
  --pf-v6-c-alert__icon--MarginBlockStart: 0.25rem;
24
24
  --pf-v6-c-alert__icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
25
25
  --pf-v6-c-alert__icon--FontSize: var(--pf-t--global--icon--size--md);
26
- --pf-v6-c-alert__title--FontFamily: var(--pf-t--global--font--family--heading);
27
- --pf-v6-c-alert__title--FontSize: var(--pf-t--global--font--size--heading--xs);
28
- --pf-v6-c-alert__title--FontWeight: var(--pf-t--global--font--weight--heading);
29
- --pf-v6-c-alert__title--LineHeight: var(--pf-t--global--font--line-height--heading);
26
+ --pf-v6-c-alert__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
30
27
  --pf-v6-c-alert__title--Color: var(--pf-t--global--text--color--regular);
31
28
  --pf-v6-c-alert__title--max-lines: 1;
32
29
  --pf-v6-c-alert__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
@@ -160,10 +157,7 @@
160
157
 
161
158
  .pf-v6-c-alert__title {
162
159
  grid-area: title;
163
- font-family: var(--pf-v6-c-alert__title--FontFamily);
164
- font-size: var(--pf-v6-c-alert__title--FontSize);
165
160
  font-weight: var(--pf-v6-c-alert__title--FontWeight);
166
- line-height: var(--pf-v6-c-alert__title--LineHeight);
167
161
  color: var(--pf-v6-c-alert__title--Color);
168
162
  word-break: break-word;
169
163
  }
package/components/Alert/alert.scss CHANGED
@@ -19,8 +19,8 @@
19
19
  --#{$alert}--FontSize: var(--pf-t--global--font--size--body--default);
20
20
 
21
21
  // Toggle
22
- --#{$alert}__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--button--vertical--default) - #{pf-size-prem(1px)});
23
- --#{$alert}__toggle--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
22
+ --#{$alert}__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
23
+ --#{$alert}__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
24
24
  --#{$alert}__toggle--MarginInlineEnd: var(--pf-t--global--spacer--sm);
25
25
 
26
26
  // Toggle icon
@@ -34,10 +34,7 @@
34
34
  --#{$alert}__icon--FontSize: var(--pf-t--global--icon--size--md);
35
35
 
36
36
  // Title
37
- --#{$alert}__title--FontFamily: var(--pf-t--global--font--family--heading);
38
- --#{$alert}__title--FontSize: var(--pf-t--global--font--size--heading--xs);
39
- --#{$alert}__title--FontWeight: var(--pf-t--global--font--weight--heading);
40
- --#{$alert}__title--LineHeight: var(--pf-t--global--font--line-height--heading);
37
+ --#{$alert}__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
41
38
  --#{$alert}__title--Color: var(--pf-t--global--text--color--regular);
42
39
  --#{$alert}__title--max-lines: 1;
43
40
 
@@ -203,10 +200,7 @@
203
200
 
204
201
  .#{$alert}__title {
205
202
  grid-area: title;
206
- font-family: var(--#{$alert}__title--FontFamily);
207
- font-size: var(--#{$alert}__title--FontSize);
208
203
  font-weight: var(--#{$alert}__title--FontWeight);
209
- line-height: var(--#{$alert}__title--LineHeight);
210
204
  color: var(--#{$alert}__title--Color);
211
205
  word-break: break-word;
212
206
 
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
@@ -12,7 +12,7 @@
12
12
  --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--md);
13
13
  --pf-v6-c-card__title-text--Color: var(--pf-t--global--text--color--regular);
14
14
  --pf-v6-c-card__title-text--FontFamily: var(--pf-t--global--font--family--heading);
15
- --pf-v6-c-card__title-text--FontSize: var(--pf-t--global--font--size--heading--sm);
15
+ --pf-v6-c-card__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
16
16
  --pf-v6-c-card__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
17
17
  --pf-v6-c-card__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
18
18
  --pf-v6-c-card--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
@@ -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
@@ -14,7 +14,7 @@
14
14
  --#{$card}__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--md);
15
15
  --#{$card}__title-text--Color: var(--pf-t--global--text--color--regular);
16
16
  --#{$card}__title-text--FontFamily: var(--pf-t--global--font--family--heading);
17
- --#{$card}__title-text--FontSize: var(--pf-t--global--font--size--heading--sm);
17
+ --#{$card}__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
18
18
  --#{$card}__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
19
19
  --#{$card}__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
20
20
  --#{$card}--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
@@ -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/Hint/hint.css CHANGED
@@ -9,10 +9,7 @@
9
9
  --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
10
10
  --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
11
11
  --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
12
- --pf-v6-c-hint__title--FontFamily: var(--pf-t--global--font--family--heading);
13
- --pf-v6-c-hint__title--FontSize: var(--pf-t--global--font--size--heading--xs);
14
- --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--heading);
15
- --pf-v6-c-hint__title--LineHeight: var(--pf-t--global--font--line-height--heading);
12
+ --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
16
13
  --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
17
14
  --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
18
15
  --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
@@ -60,10 +57,7 @@
60
57
 
61
58
  .pf-v6-c-hint__title {
62
59
  align-self: center;
63
- font-family: var(--pf-v6-c-hint__title--FontFamily);
64
- font-size: var(--pf-v6-c-hint__title--FontSize);
65
60
  font-weight: var(--pf-v6-c-hint__title--FontWeight);
66
- line-height: var(--pf-v6-c-hint__title--LineHeight);
67
61
  }
68
62
 
69
63
  .pf-v6-c-hint__body {
package/components/Hint/hint.scss CHANGED
@@ -13,10 +13,7 @@
13
13
  --#{$hint}--Color: var(--pf-t--global--text--color--regular);
14
14
 
15
15
  // Hint Title
16
- --#{$hint}__title--FontFamily: var(--pf-t--global--font--family--heading);
17
- --#{$hint}__title--FontSize: var(--pf-t--global--font--size--heading--xs);
18
- --#{$hint}__title--FontWeight: var(--pf-t--global--font--weight--heading);
19
- --#{$hint}__title--LineHeight: var(--pf-t--global--font--line-height--heading);
16
+ --#{$hint}__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
20
17
 
21
18
  // Hint Body
22
19
  --#{$hint}__body--FontSize: var(--pf-t--global--font--size--body--default);
@@ -74,10 +71,7 @@
74
71
 
75
72
  .#{$hint}__title {
76
73
  align-self: center;
77
- font-family: var(--#{$hint}__title--FontFamily);
78
- font-size: var(--#{$hint}__title--FontSize);
79
74
  font-weight: var(--#{$hint}__title--FontWeight);
80
- line-height: var(--#{$hint}__title--LineHeight);
81
75
  }
82
76
 
83
77
  .#{$hint}__body {
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/NotificationDrawer/notification-drawer.css CHANGED
@@ -44,10 +44,7 @@
44
44
  --pf-v6-c-notification-drawer__list-item-header--MarginBlockEnd: var(--pf-t--global--spacer--xs);
45
45
  --pf-v6-c-notification-drawer__list-item-header-icon--Color: inherit;
46
46
  --pf-v6-c-notification-drawer__list-item-header-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
47
- --pf-v6-c-notification-drawer__list-item-header-title--FontFamily: var(--pf-t--global--font--family--heading);
48
- --pf-v6-c-notification-drawer__list-item-header-title--FontSize: var(--pf-t--global--font--size--heading--xs);
49
- --pf-v6-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
50
- --pf-v6-c-notification-drawer__list-item-header-title--LineHeight: var(--pf-t--global--font--line-height--heading);
47
+ --pf-v6-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
51
48
  --pf-v6-c-notification-drawer__list-item-header-title--max-lines: 1;
52
49
  --pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd: var(--pf-t--global--spacer--sm);
53
50
  --pf-v6-c-notification-drawer__list-item-timestamp--Color: var(--pf-t--global--text--color--subtle);
@@ -186,10 +183,7 @@
186
183
  }
187
184
 
188
185
  .pf-v6-c-notification-drawer__list-item-header-title {
189
- font-family: var(--pf-v6-c-notification-drawer__list-item-header-title--FontFamily);
190
- font-size: var(--pf-v6-c-notification-drawer__list-item-header-title--FontSize);
191
186
  font-weight: var(--pf-v6-c-notification-drawer__list-item-header-title--FontWeight);
192
- line-height: var(--pf-v6-c-notification-drawer__list-item-header-title--LineHeight);
193
187
  word-break: break-word;
194
188
  }
195
189
  .pf-v6-c-notification-drawer__list-item-header-title.pf-m-truncate {
package/components/NotificationDrawer/notification-drawer.scss CHANGED
@@ -62,10 +62,7 @@
62
62
  --#{$notification-drawer}__list-item-header-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
63
63
 
64
64
  // List item header title
65
- --#{$notification-drawer}__list-item-header-title--FontFamily: var(--pf-t--global--font--family--heading);
66
- --#{$notification-drawer}__list-item-header-title--FontSize: var(--pf-t--global--font--size--heading--xs);
67
- --#{$notification-drawer}__list-item-header-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
68
- --#{$notification-drawer}__list-item-header-title--LineHeight: var(--pf-t--global--font--line-height--heading);
65
+ --#{$notification-drawer}__list-item-header-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
69
66
  --#{$notification-drawer}__list-item-header-title--max-lines: 1;
70
67
 
71
68
  // List item description
@@ -229,10 +226,7 @@
229
226
  }
230
227
 
231
228
  .#{$notification-drawer}__list-item-header-title {
232
- font-family: var(--#{$notification-drawer}__list-item-header-title--FontFamily);
233
- font-size: var(--#{$notification-drawer}__list-item-header-title--FontSize);
234
229
  font-weight: var(--#{$notification-drawer}__list-item-header-title--FontWeight);
235
- line-height: var(--#{$notification-drawer}__list-item-header-title--LineHeight);
236
230
  word-break: break-word;
237
231
 
238
232
  &.pf-m-truncate {
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) {