@patternfly/patternfly 4.222.3 → 5.0.0-alpha.1

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 (172) hide show
  1. package/README.md +2 -2
  2. package/RELEASE-NOTES.md +0 -11
  3. package/base/_fonts.scss +0 -188
  4. package/base/_globals.scss +0 -6
  5. package/base/_icons.scss +28 -0
  6. package/base/_variables.scss +0 -14
  7. package/base/patternfly-fonts.css +0 -120
  8. package/base/patternfly-globals.css +0 -4
  9. package/base/patternfly-icons.scss +0 -28
  10. package/base/patternfly-variables.css +6 -19
  11. package/components/AboutModalBox/about-modal-box.css +1 -28
  12. package/components/AboutModalBox/about-modal-box.scss +1 -27
  13. package/components/Accordion/accordion.css +64 -62
  14. package/components/Accordion/accordion.scss +62 -64
  15. package/components/Alert/alert.css +0 -4
  16. package/components/Alert/alert.scss +0 -7
  17. package/components/Banner/banner.css +1 -1
  18. package/components/Banner/banner.scss +1 -1
  19. package/components/Breadcrumb/breadcrumb.css +0 -6
  20. package/components/Breadcrumb/breadcrumb.scss +0 -9
  21. package/components/Button/button.css +0 -4
  22. package/components/Button/button.scss +0 -7
  23. package/components/Card/card.css +0 -4
  24. package/components/Card/card.scss +0 -7
  25. package/components/Check/check.css +4 -2
  26. package/components/Check/check.scss +2 -2
  27. package/components/Content/content.css +1 -11
  28. package/components/Content/content.scss +1 -15
  29. package/components/DataList/data-list.css +0 -15
  30. package/components/Divider/divider.css +0 -16
  31. package/components/Divider/divider.scss +0 -1
  32. package/components/Drawer/drawer.css +0 -14
  33. package/components/Drawer/drawer.scss +0 -5
  34. package/components/Dropdown/dropdown.css +0 -15
  35. package/components/Dropdown/dropdown.scss +0 -20
  36. package/components/EmptyState/empty-state.css +0 -4
  37. package/components/EmptyState/empty-state.scss +0 -9
  38. package/components/ExpandableSection/expandable-section.css +0 -4
  39. package/components/ExpandableSection/expandable-section.scss +0 -7
  40. package/components/Form/form.css +0 -1
  41. package/components/Form/form.scss +0 -1
  42. package/components/FormControl/form-control.css +1 -1
  43. package/components/FormControl/themes/dark/form-control.scss +1 -1
  44. package/components/InlineEdit/inline-edit.css +1 -12
  45. package/components/InlineEdit/inline-edit.scss +1 -10
  46. package/components/InputGroup/input-group.css +0 -14
  47. package/components/InputGroup/input-group.scss +0 -9
  48. package/components/InputGroup/themes/dark/input-group.scss +0 -8
  49. package/components/JumpLinks/jump-links.css +0 -43
  50. package/components/JumpLinks/jump-links.scss +0 -13
  51. package/components/Label/label.css +0 -3
  52. package/components/Label/label.scss +0 -4
  53. package/components/Menu/menu.css +0 -20
  54. package/components/Menu/menu.scss +0 -6
  55. package/components/NotificationDrawer/notification-drawer.css +1 -0
  56. package/components/NotificationDrawer/notification-drawer.scss +1 -0
  57. package/components/Page/page.css +0 -15
  58. package/components/Pagination/pagination.css +0 -175
  59. package/components/Pagination/pagination.scss +1 -49
  60. package/components/Progress/progress.css +0 -1
  61. package/components/Progress/progress.scss +0 -1
  62. package/components/Radio/radio.css +4 -2
  63. package/components/Radio/radio.scss +2 -2
  64. package/components/SimpleList/simple-list.css +1 -1
  65. package/components/SimpleList/simple-list.scss +1 -1
  66. package/components/SkipToContent/skip-to-content.css +1 -1
  67. package/components/SkipToContent/skip-to-content.scss +1 -1
  68. package/components/Slider/slider.css +7 -0
  69. package/components/Slider/slider.scss +9 -0
  70. package/components/Switch/switch.css +0 -1
  71. package/components/Switch/switch.scss +0 -1
  72. package/components/Table/table-grid.css +0 -10
  73. package/components/Table/table-grid.scss +0 -2
  74. package/components/Table/table-tree-view.css +0 -16
  75. package/components/Table/table-tree-view.scss +0 -4
  76. package/components/Table/table.css +0 -16
  77. package/components/Table/table.scss +0 -1
  78. package/components/Tabs/tabs.css +1 -34
  79. package/components/Tabs/tabs.scss +0 -15
  80. package/components/Title/title.css +0 -5
  81. package/components/Title/title.scss +0 -8
  82. package/components/Toolbar/toolbar.css +0 -31
  83. package/components/Toolbar/toolbar.scss +0 -6
  84. package/components/Wizard/wizard.css +0 -9
  85. package/components/Wizard/wizard.scss +0 -9
  86. package/docs/components/AboutModalBox/examples/AboutModalBox.md +4 -15
  87. package/docs/components/Accordion/examples/Accordion.md +67 -67
  88. package/docs/components/Dropdown/examples/Dropdown.md +0 -216
  89. package/docs/components/InputGroup/examples/InputGroup.md +0 -1
  90. package/docs/components/Pagination/examples/Pagination.md +30 -129
  91. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -5
  92. package/docs/components/Slider/examples/Slider.md +6 -6
  93. package/docs/components/Tabs/examples/Tabs.md +1 -2
  94. package/docs/components/Wizard/examples/Wizard.md +6 -6
  95. package/docs/demos/AboutModal/examples/AboutModal.md +53 -49
  96. package/docs/demos/Alert/examples/Alert.md +18 -12
  97. package/docs/demos/BackToTop/examples/BackToTop.md +6 -4
  98. package/docs/demos/Banner/examples/Banner.md +14 -10
  99. package/docs/demos/Card/examples/Card.md +4 -4
  100. package/docs/demos/CardView/examples/CardView.md +6 -4
  101. package/docs/demos/ContextSelector/examples/ContextSelector.md +24 -16
  102. package/docs/demos/Dashboard/examples/Dashboard.md +7 -4
  103. package/docs/demos/DataList/examples/DataList.md +24 -16
  104. package/docs/demos/DescriptionList/examples/DescriptionList.md +18 -12
  105. package/docs/demos/Drawer/examples/Drawer.md +30 -20
  106. package/docs/demos/JumpLinks/examples/JumpLinks.md +36 -24
  107. package/docs/demos/Masthead/examples/Masthead.md +54 -36
  108. package/docs/demos/Modal/examples/Modal.md +36 -24
  109. package/docs/demos/Nav/examples/Nav.md +784 -721
  110. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +30 -20
  111. package/docs/demos/Page/examples/Page.md +54 -36
  112. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +44 -28
  113. package/docs/demos/Skeleton/examples/Skeleton.md +6 -4
  114. package/docs/demos/Table/examples/Table.md +84 -56
  115. package/docs/demos/Tabs/examples/Tabs.md +579 -70
  116. package/docs/demos/Toolbar/examples/Toolbar.md +6 -4
  117. package/docs/demos/Wizard/examples/Wizard.md +67 -45
  118. package/package.json +7 -6
  119. package/patternfly-base-no-reset.css +30 -139
  120. package/patternfly-base.css +30 -143
  121. package/patternfly-charts.css +1 -1
  122. package/patternfly-no-reset.css +118 -665
  123. package/patternfly.css +118 -669
  124. package/patternfly.min.css +1 -1
  125. package/patternfly.min.css.map +1 -1
  126. package/sass-utilities/mixins.scss +0 -6
  127. package/sass-utilities/placeholders.scss +0 -7
  128. package/sass-utilities/scss-variables.scss +6 -12
  129. package/assets/fonts/overpass-mono-webfont/example.html +0 -15
  130. package/assets/fonts/overpass-mono-webfont/overpass-mono-bold.woff +0 -0
  131. package/assets/fonts/overpass-mono-webfont/overpass-mono-bold.woff2 +0 -0
  132. package/assets/fonts/overpass-mono-webfont/overpass-mono-light.woff +0 -0
  133. package/assets/fonts/overpass-mono-webfont/overpass-mono-light.woff2 +0 -0
  134. package/assets/fonts/overpass-mono-webfont/overpass-mono-regular.woff +0 -0
  135. package/assets/fonts/overpass-mono-webfont/overpass-mono-regular.woff2 +0 -0
  136. package/assets/fonts/overpass-mono-webfont/overpass-mono-semibold.woff +0 -0
  137. package/assets/fonts/overpass-mono-webfont/overpass-mono-semibold.woff2 +0 -0
  138. package/assets/fonts/overpass-mono-webfont/overpass-mono.css +0 -39
  139. package/assets/fonts/overpass-webfont/example.html +0 -18
  140. package/assets/fonts/overpass-webfont/overpass-bold-italic.woff +0 -0
  141. package/assets/fonts/overpass-webfont/overpass-bold-italic.woff2 +0 -0
  142. package/assets/fonts/overpass-webfont/overpass-bold.woff +0 -0
  143. package/assets/fonts/overpass-webfont/overpass-bold.woff2 +0 -0
  144. package/assets/fonts/overpass-webfont/overpass-extrabold-italic.woff +0 -0
  145. package/assets/fonts/overpass-webfont/overpass-extrabold-italic.woff2 +0 -0
  146. package/assets/fonts/overpass-webfont/overpass-extrabold.woff +0 -0
  147. package/assets/fonts/overpass-webfont/overpass-extrabold.woff2 +0 -0
  148. package/assets/fonts/overpass-webfont/overpass-extralight-italic.woff +0 -0
  149. package/assets/fonts/overpass-webfont/overpass-extralight-italic.woff2 +0 -0
  150. package/assets/fonts/overpass-webfont/overpass-extralight.woff +0 -0
  151. package/assets/fonts/overpass-webfont/overpass-extralight.woff2 +0 -0
  152. package/assets/fonts/overpass-webfont/overpass-heavy-italic.woff +0 -0
  153. package/assets/fonts/overpass-webfont/overpass-heavy-italic.woff2 +0 -0
  154. package/assets/fonts/overpass-webfont/overpass-heavy.woff +0 -0
  155. package/assets/fonts/overpass-webfont/overpass-heavy.woff2 +0 -0
  156. package/assets/fonts/overpass-webfont/overpass-italic.woff +0 -0
  157. package/assets/fonts/overpass-webfont/overpass-italic.woff2 +0 -0
  158. package/assets/fonts/overpass-webfont/overpass-light-italic.woff +0 -0
  159. package/assets/fonts/overpass-webfont/overpass-light-italic.woff2 +0 -0
  160. package/assets/fonts/overpass-webfont/overpass-light.woff +0 -0
  161. package/assets/fonts/overpass-webfont/overpass-light.woff2 +0 -0
  162. package/assets/fonts/overpass-webfont/overpass-regular.woff +0 -0
  163. package/assets/fonts/overpass-webfont/overpass-regular.woff2 +0 -0
  164. package/assets/fonts/overpass-webfont/overpass-semibold-italic.woff +0 -0
  165. package/assets/fonts/overpass-webfont/overpass-semibold-italic.woff2 +0 -0
  166. package/assets/fonts/overpass-webfont/overpass-semibold.woff +0 -0
  167. package/assets/fonts/overpass-webfont/overpass-semibold.woff2 +0 -0
  168. package/assets/fonts/overpass-webfont/overpass-thin-italic.woff +0 -0
  169. package/assets/fonts/overpass-webfont/overpass-thin-italic.woff2 +0 -0
  170. package/assets/fonts/overpass-webfont/overpass-thin.woff +0 -0
  171. package/assets/fonts/overpass-webfont/overpass-thin.woff2 +0 -0
  172. package/assets/fonts/overpass-webfont/overpass.css +0 -141
package/components/Accordion/accordion.css CHANGED
@@ -14,35 +14,37 @@
14
14
  --pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md);
15
15
  --pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--sm);
16
16
  --pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--md);
17
- --pf-c-accordion__toggle--before--BackgroundColor: transparent;
18
17
  --pf-c-accordion__toggle--before--Top: 0;
18
+ --pf-c-accordion__toggle--after--Top: 0;
19
+ --pf-c-accordion__toggle--after--BackgroundColor: transparent;
19
20
  --pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
20
21
  --pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
21
22
  --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--200);
22
23
  --pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg);
23
- --pf-c-accordion__toggle--m-expanded--before--BackgroundColor: var(--pf-global--primary-color--100);
24
+ --pf-c-accordion__toggle--after--Width: var(--pf-global--BorderWidth--lg);
25
+ --pf-c-accordion__toggle--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
24
26
  --pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg));
25
27
  --pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-global--link--Color);
26
28
  --pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-global--link--Color);
27
- --pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
29
+ --pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--bold);
28
30
  --pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-global--link--Color);
29
- --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
31
+ --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--bold);
30
32
  --pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-global--link--Color);
31
- --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
33
+ --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--bold);
32
34
  --pf-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
33
35
  --pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
34
- --pf-c-accordion__expanded-content--Color: var(--pf-global--Color--200);
35
- --pf-c-accordion__expanded-content--FontSize: var(--pf-global--FontSize--sm);
36
- --pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor: var(--pf-global--primary-color--100);
37
- --pf-c-accordion__expanded-content--m-fixed--MaxHeight: 9.375rem;
38
- --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-global--spacer--sm);
39
- --pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-global--spacer--md);
40
- --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-global--spacer--sm);
41
- --pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-global--spacer--md);
42
- --pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop: 0;
43
- --pf-c-accordion__expanded-content-body--before--BackgroundColor: transparent;
44
- --pf-c-accordion__expanded-content-body--before--Width: var(--pf-global--BorderWidth--lg);
45
- --pf-c-accordion__expanded-content-body--before--Top: 0;
36
+ --pf-c-accordion__expandable-content--Color: var(--pf-global--Color--200);
37
+ --pf-c-accordion__expandable-content--FontSize: var(--pf-global--FontSize--sm);
38
+ --pf-c-accordion__expandable-content--m-expanded__expandable-content-body--after--BackgroundColor: var(--pf-global--primary-color--100);
39
+ --pf-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
40
+ --pf-c-accordion__expandable-content-body--PaddingTop: var(--pf-global--spacer--sm);
41
+ --pf-c-accordion__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
42
+ --pf-c-accordion__expandable-content-body--PaddingBottom: var(--pf-global--spacer--sm);
43
+ --pf-c-accordion__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
44
+ --pf-c-accordion__expandable-content-body--expandable-content-body--PaddingTop: 0;
45
+ --pf-c-accordion__expandable-content-body--after--BackgroundColor: transparent;
46
+ --pf-c-accordion__expandable-content-body--after--Width: var(--pf-global--BorderWidth--lg);
47
+ --pf-c-accordion__expandable-content-body--before--Top: 0;
46
48
  --pf-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
47
49
  --pf-c-accordion--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md);
48
50
  --pf-c-accordion--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md);
@@ -56,21 +58,21 @@
56
58
  --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
57
59
  --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color: var(--pf-global--Color--100);
58
60
  --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
59
- --pf-c-accordion--m-display-lg__expanded-content--FontSize: var(--pf-global--FontSize--md);
60
- --pf-c-accordion--m-display-lg__expanded-content--Color: var(--pf-global--Color--100);
61
- --pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop: 0;
62
- --pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight: var(--pf-global--spacer--md);
63
- --pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom: var(--pf-global--spacer--md);
64
- --pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
65
- --pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft: var(--pf-global--spacer--lg);
61
+ --pf-c-accordion--m-display-lg__expandable-content--FontSize: var(--pf-global--FontSize--md);
62
+ --pf-c-accordion--m-display-lg__expandable-content--Color: var(--pf-global--Color--100);
63
+ --pf-c-accordion--m-display-lg__expandable-content-body--PaddingTop: 0;
64
+ --pf-c-accordion--m-display-lg__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
65
+ --pf-c-accordion--m-display-lg__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
66
+ --pf-c-accordion--m-display-lg__expandable-content-body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
67
+ --pf-c-accordion--m-display-lg__expandable-content-body--PaddingLeft: var(--pf-global--spacer--lg);
66
68
  --pf-c-accordion--m-bordered--BorderTopWidth: var(--pf-global--BorderWidth--sm);
67
69
  --pf-c-accordion--m-bordered--BorderTopColor: var(--pf-global--BorderColor--100);
68
- --pf-c-accordion--m-bordered__toggle--before--Top: calc(-1 * var(--pf-global--BorderWidth--sm));
69
- --pf-c-accordion--m-bordered__toggle--after--BorderColor: var(--pf-global--BorderColor--100);
70
- --pf-c-accordion--m-bordered__toggle--after--BorderTopWidth: 0;
71
- --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
72
- --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
73
- --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor: var(--pf-global--BorderColor--100);
70
+ --pf-c-accordion--m-bordered__toggle--after--Top: calc(-1 * var(--pf-global--BorderWidth--sm));
71
+ --pf-c-accordion--m-bordered__toggle--before--BorderColor: var(--pf-global--BorderColor--100);
72
+ --pf-c-accordion--m-bordered__toggle--before--BorderTopWidth: 0;
73
+ --pf-c-accordion--m-bordered__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
74
+ --pf-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
75
+ --pf-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor: var(--pf-global--BorderColor--100);
74
76
  color: var(--pf-global--Color--100);
75
77
  background-color: var(--pf-c-accordion--BackgroundColor);
76
78
  }
@@ -88,18 +90,18 @@
88
90
  --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight);
89
91
  --pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color);
90
92
  --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight);
91
- --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop);
92
- --pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight);
93
- --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom);
94
- --pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft);
95
- --pf-c-accordion__expanded-content--FontSize: var(--pf-c-accordion--m-display-lg__expanded-content--FontSize);
96
- --pf-c-accordion__expanded-content--Color: var(--pf-c-accordion--m-display-lg__expanded-content--Color);
93
+ --pf-c-accordion__expandable-content-body--PaddingTop: var(--pf-c-accordion--m-display-lg__expandable-content-body--PaddingTop);
94
+ --pf-c-accordion__expandable-content-body--PaddingRight: var(--pf-c-accordion--m-display-lg__expandable-content-body--PaddingRight);
95
+ --pf-c-accordion__expandable-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expandable-content-body--PaddingBottom);
96
+ --pf-c-accordion__expandable-content-body--PaddingLeft: var(--pf-c-accordion--m-display-lg__expandable-content-body--PaddingLeft);
97
+ --pf-c-accordion__expandable-content--FontSize: var(--pf-c-accordion--m-display-lg__expandable-content--FontSize);
98
+ --pf-c-accordion__expandable-content--Color: var(--pf-c-accordion--m-display-lg__expandable-content--Color);
97
99
  }
98
- .pf-c-accordion.pf-m-display-lg .pf-c-accordion__expanded-content-body:last-child {
99
- --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom);
100
+ .pf-c-accordion.pf-m-display-lg .pf-c-accordion__expandable-content-body:last-child {
101
+ --pf-c-accordion__expandable-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expandable-content-body--last-child--PaddingBottom);
100
102
  }
101
103
  .pf-c-accordion.pf-m-bordered {
102
- --pf-c-accordion__toggle--before--Top: var(--pf-c-accordion--m-bordered__toggle--before--Top);
104
+ --pf-c-accordion__toggle--after--Top: var(--pf-c-accordion--m-bordered__toggle--after--Top);
103
105
  border-top: var(--pf-c-accordion--m-bordered--BorderTopWidth) solid var(--pf-c-accordion--m-bordered--BorderTopColor);
104
106
  }
105
107
  .pf-c-accordion.pf-m-bordered .pf-c-accordion__toggle::before {
@@ -109,13 +111,13 @@
109
111
  bottom: 0;
110
112
  left: 0;
111
113
  content: "";
112
- border: solid var(--pf-c-accordion--m-bordered__toggle--after--BorderColor);
113
- border-width: var(--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth) 0 var(--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth);
114
+ border: solid var(--pf-c-accordion--m-bordered__toggle--before--BorderColor);
115
+ border-width: var(--pf-c-accordion--m-bordered__toggle--before--BorderTopWidth) 0 var(--pf-c-accordion--m-bordered__toggle--before--BorderBottomWidth);
114
116
  }
115
117
  .pf-c-accordion.pf-m-bordered .pf-c-accordion__toggle.pf-m-expanded {
116
- --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: 0;
118
+ --pf-c-accordion--m-bordered__toggle--before--BorderBottomWidth: 0;
117
119
  }
118
- .pf-c-accordion.pf-m-bordered .pf-c-accordion__expanded-content.pf-m-expanded .pf-c-accordion__expanded-content-body:last-child::before {
120
+ .pf-c-accordion.pf-m-bordered .pf-c-accordion__expandable-content.pf-m-expanded .pf-c-accordion__expandable-content-body:last-child::before {
119
121
  position: absolute;
120
122
  top: 0;
121
123
  right: 0;
@@ -123,7 +125,7 @@
123
125
  left: 0;
124
126
  pointer-events: none;
125
127
  content: "";
126
- border-bottom: var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth) solid var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor);
128
+ border-bottom: var(--pf-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--pf-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
127
129
  }
128
130
 
129
131
  .pf-c-accordion__toggle {
@@ -139,15 +141,15 @@
139
141
  }
140
142
  .pf-c-accordion__toggle::after {
141
143
  position: absolute;
142
- top: var(--pf-c-accordion__toggle--before--Top);
144
+ top: var(--pf-c-accordion__toggle--after--Top);
143
145
  bottom: 0;
144
146
  left: 0;
145
- width: var(--pf-c-accordion__toggle--before--Width);
147
+ width: var(--pf-c-accordion__toggle--after--Width);
146
148
  content: "";
147
- background-color: var(--pf-c-accordion__toggle--before--BackgroundColor);
149
+ background-color: var(--pf-c-accordion__toggle--after--BackgroundColor);
148
150
  }
149
151
  .pf-c-accordion__toggle.pf-m-expanded {
150
- --pf-c-accordion__toggle--before--BackgroundColor: var(--pf-c-accordion__toggle--m-expanded--before--BackgroundColor);
152
+ --pf-c-accordion__toggle--after--BackgroundColor: var(--pf-c-accordion__toggle--m-expanded--after--BackgroundColor);
151
153
  }
152
154
  .pf-c-accordion__toggle.pf-m-expanded .pf-c-accordion__toggle-text {
153
155
  font-weight: var(--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
@@ -188,33 +190,33 @@
188
190
  transition: var(--pf-c-accordion__toggle-icon--Transition);
189
191
  }
190
192
 
191
- .pf-c-accordion__expanded-content {
192
- font-size: var(--pf-c-accordion__expanded-content--FontSize);
193
- color: var(--pf-c-accordion__expanded-content--Color);
193
+ .pf-c-accordion__expandable-content {
194
+ font-size: var(--pf-c-accordion__expandable-content--FontSize);
195
+ color: var(--pf-c-accordion__expandable-content--Color);
194
196
  }
195
- .pf-c-accordion__expanded-content.pf-m-fixed {
196
- max-height: var(--pf-c-accordion__expanded-content--m-fixed--MaxHeight);
197
+ .pf-c-accordion__expandable-content.pf-m-fixed {
198
+ max-height: var(--pf-c-accordion__expandable-content--m-fixed--MaxHeight);
197
199
  overflow-y: auto;
198
200
  }
199
- .pf-c-accordion__expanded-content.pf-m-expanded {
200
- --pf-c-accordion__expanded-content-body--before--BackgroundColor: var(--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor);
201
+ .pf-c-accordion__expandable-content.pf-m-expanded {
202
+ --pf-c-accordion__expandable-content-body--after--BackgroundColor: var(--pf-c-accordion__expandable-content--m-expanded__expandable-content-body--after--BackgroundColor);
201
203
  }
202
204
 
203
- .pf-c-accordion__expanded-content-body {
205
+ .pf-c-accordion__expandable-content-body {
204
206
  position: relative;
205
- padding: var(--pf-c-accordion__expanded-content-body--PaddingTop) var(--pf-c-accordion__expanded-content-body--PaddingRight) var(--pf-c-accordion__expanded-content-body--PaddingBottom) var(--pf-c-accordion__expanded-content-body--PaddingLeft);
207
+ padding: var(--pf-c-accordion__expandable-content-body--PaddingTop) var(--pf-c-accordion__expandable-content-body--PaddingRight) var(--pf-c-accordion__expandable-content-body--PaddingBottom) var(--pf-c-accordion__expandable-content-body--PaddingLeft);
206
208
  }
207
- .pf-c-accordion__expanded-content-body::after {
209
+ .pf-c-accordion__expandable-content-body::after {
208
210
  position: absolute;
209
211
  top: 0;
210
212
  bottom: 0;
211
213
  left: 0;
212
- width: var(--pf-c-accordion__expanded-content-body--before--Width);
214
+ width: var(--pf-c-accordion__expandable-content-body--after--Width);
213
215
  content: "";
214
- background-color: var(--pf-c-accordion__expanded-content-body--before--BackgroundColor);
216
+ background-color: var(--pf-c-accordion__expandable-content-body--after--BackgroundColor);
215
217
  }
216
- .pf-c-accordion__expanded-content-body + .pf-c-accordion__expanded-content-body {
217
- --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop);
218
+ .pf-c-accordion__expandable-content-body + .pf-c-accordion__expandable-content-body {
219
+ --pf-c-accordion__expandable-content-body--PaddingTop: var(--pf-c-accordion__expandable-content-body--expandable-content-body--PaddingTop);
218
220
  }
219
221
 
220
222
  :where(.pf-theme-dark) .pf-c-accordion {
package/components/Accordion/accordion.scss CHANGED
@@ -7,41 +7,43 @@
7
7
  --pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md);
8
8
  --pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--sm);
9
9
  --pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--md);
10
- --pf-c-accordion__toggle--before--BackgroundColor: transparent;
11
10
  --pf-c-accordion__toggle--before--Top: 0;
11
+ --pf-c-accordion__toggle--after--Top: 0;
12
+ --pf-c-accordion__toggle--after--BackgroundColor: transparent;
12
13
  --pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
13
14
  --pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
14
15
  --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--200);
15
16
  --pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg);
16
- --pf-c-accordion__toggle--m-expanded--before--BackgroundColor: var(--pf-global--primary-color--100);
17
+ --pf-c-accordion__toggle--after--Width: var(--pf-global--BorderWidth--lg);
18
+ --pf-c-accordion__toggle--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
17
19
 
18
20
  // accordion toggle text
19
21
  --pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg));
20
22
  --pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-global--link--Color);
21
23
  --pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-global--link--Color);
22
- --pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
24
+ --pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--bold);
23
25
  --pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-global--link--Color);
24
- --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
26
+ --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--bold);
25
27
  --pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-global--link--Color);
26
- --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold);
28
+ --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--bold);
27
29
 
28
30
  // accordion toggle icon
29
31
  --pf-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
30
32
  --pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
31
33
 
32
34
  // accordion expanded content
33
- --pf-c-accordion__expanded-content--Color: var(--pf-global--Color--200);
34
- --pf-c-accordion__expanded-content--FontSize: var(--pf-global--FontSize--sm);
35
- --pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor: var(--pf-global--primary-color--100);
36
- --pf-c-accordion__expanded-content--m-fixed--MaxHeight: #{pf-size-prem(150px)};
37
- --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-global--spacer--sm);
38
- --pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-global--spacer--md);
39
- --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-global--spacer--sm);
40
- --pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-global--spacer--md);
41
- --pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop: 0;
42
- --pf-c-accordion__expanded-content-body--before--BackgroundColor: transparent;
43
- --pf-c-accordion__expanded-content-body--before--Width: var(--pf-global--BorderWidth--lg);
44
- --pf-c-accordion__expanded-content-body--before--Top: 0;
35
+ --pf-c-accordion__expandable-content--Color: var(--pf-global--Color--200);
36
+ --pf-c-accordion__expandable-content--FontSize: var(--pf-global--FontSize--sm);
37
+ --pf-c-accordion__expandable-content--m-expanded__expandable-content-body--after--BackgroundColor: var(--pf-global--primary-color--100);
38
+ --pf-c-accordion__expandable-content--m-fixed--MaxHeight: #{pf-size-prem(150px)};
39
+ --pf-c-accordion__expandable-content-body--PaddingTop: var(--pf-global--spacer--sm);
40
+ --pf-c-accordion__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
41
+ --pf-c-accordion__expandable-content-body--PaddingBottom: var(--pf-global--spacer--sm);
42
+ --pf-c-accordion__expandable-content-body--PaddingLeft: var(--pf-global--spacer--md);
43
+ --pf-c-accordion__expandable-content-body--expandable-content-body--PaddingTop: 0;
44
+ --pf-c-accordion__expandable-content-body--after--BackgroundColor: transparent;
45
+ --pf-c-accordion__expandable-content-body--after--Width: var(--pf-global--BorderWidth--lg);
46
+ --pf-c-accordion__expandable-content-body--before--Top: 0;
45
47
 
46
48
  // large
47
49
  --pf-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md);
@@ -57,23 +59,23 @@
57
59
  --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
58
60
  --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color: var(--pf-global--Color--100);
59
61
  --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--normal);
60
- --pf-c-accordion--m-display-lg__expanded-content--FontSize: var(--pf-global--FontSize--md);
61
- --pf-c-accordion--m-display-lg__expanded-content--Color: var(--pf-global--Color--100);
62
- --pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop: 0;
63
- --pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight: var(--pf-global--spacer--md);
64
- --pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom: var(--pf-global--spacer--md);
65
- --pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
66
- --pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft: var(--pf-global--spacer--lg);
62
+ --pf-c-accordion--m-display-lg__expandable-content--FontSize: var(--pf-global--FontSize--md);
63
+ --pf-c-accordion--m-display-lg__expandable-content--Color: var(--pf-global--Color--100);
64
+ --pf-c-accordion--m-display-lg__expandable-content-body--PaddingTop: 0;
65
+ --pf-c-accordion--m-display-lg__expandable-content-body--PaddingRight: var(--pf-global--spacer--md);
66
+ --pf-c-accordion--m-display-lg__expandable-content-body--PaddingBottom: var(--pf-global--spacer--md);
67
+ --pf-c-accordion--m-display-lg__expandable-content-body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
68
+ --pf-c-accordion--m-display-lg__expandable-content-body--PaddingLeft: var(--pf-global--spacer--lg);
67
69
 
68
70
  // bordered
69
71
  --pf-c-accordion--m-bordered--BorderTopWidth: var(--pf-global--BorderWidth--sm);
70
72
  --pf-c-accordion--m-bordered--BorderTopColor: var(--pf-global--BorderColor--100);
71
- --pf-c-accordion--m-bordered__toggle--before--Top: calc(-1 * var(--pf-global--BorderWidth--sm));
72
- --pf-c-accordion--m-bordered__toggle--after--BorderColor: var(--pf-global--BorderColor--100);
73
- --pf-c-accordion--m-bordered__toggle--after--BorderTopWidth: 0;
74
- --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
75
- --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
76
- --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor: var(--pf-global--BorderColor--100);
73
+ --pf-c-accordion--m-bordered__toggle--after--Top: calc(-1 * var(--pf-global--BorderWidth--sm));
74
+ --pf-c-accordion--m-bordered__toggle--before--BorderColor: var(--pf-global--BorderColor--100);
75
+ --pf-c-accordion--m-bordered__toggle--before--BorderTopWidth: 0;
76
+ --pf-c-accordion--m-bordered__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
77
+ --pf-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
78
+ --pf-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor: var(--pf-global--BorderColor--100);
77
79
 
78
80
  // This component always needs to be light
79
81
  @include pf-t-light;
@@ -94,24 +96,23 @@
94
96
  --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight);
95
97
  --pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color);
96
98
  --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight);
97
- --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop);
98
- --pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight);
99
- --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom);
100
- --pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft);
101
- --pf-c-accordion__expanded-content--FontSize: var(--pf-c-accordion--m-display-lg__expanded-content--FontSize);
102
- --pf-c-accordion__expanded-content--Color: var(--pf-c-accordion--m-display-lg__expanded-content--Color);
103
-
104
- .pf-c-accordion__expanded-content-body:last-child {
105
- --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom);
99
+ --pf-c-accordion__expandable-content-body--PaddingTop: var(--pf-c-accordion--m-display-lg__expandable-content-body--PaddingTop);
100
+ --pf-c-accordion__expandable-content-body--PaddingRight: var(--pf-c-accordion--m-display-lg__expandable-content-body--PaddingRight);
101
+ --pf-c-accordion__expandable-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expandable-content-body--PaddingBottom);
102
+ --pf-c-accordion__expandable-content-body--PaddingLeft: var(--pf-c-accordion--m-display-lg__expandable-content-body--PaddingLeft);
103
+ --pf-c-accordion__expandable-content--FontSize: var(--pf-c-accordion--m-display-lg__expandable-content--FontSize);
104
+ --pf-c-accordion__expandable-content--Color: var(--pf-c-accordion--m-display-lg__expandable-content--Color);
105
+
106
+ .pf-c-accordion__expandable-content-body:last-child {
107
+ --pf-c-accordion__expandable-content-body--PaddingBottom: var(--pf-c-accordion--m-display-lg__expandable-content-body--last-child--PaddingBottom);
106
108
  }
107
109
  }
108
110
 
109
111
  &.pf-m-bordered {
110
- --pf-c-accordion__toggle--before--Top: var(--pf-c-accordion--m-bordered__toggle--before--Top);
112
+ --pf-c-accordion__toggle--after--Top: var(--pf-c-accordion--m-bordered__toggle--after--Top);
111
113
 
112
114
  border-top: var(--pf-c-accordion--m-bordered--BorderTopWidth) solid var(--pf-c-accordion--m-bordered--BorderTopColor);
113
115
 
114
- // rename --after vars to --before in breaking change release
115
116
  .pf-c-accordion__toggle {
116
117
  &::before {
117
118
  position: absolute;
@@ -120,20 +121,19 @@
120
121
  bottom: 0;
121
122
  left: 0;
122
123
  content: "";
123
- border: solid var(--pf-c-accordion--m-bordered__toggle--after--BorderColor);
124
- border-width: var(--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth) 0 var(--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth);
124
+ border: solid var(--pf-c-accordion--m-bordered__toggle--before--BorderColor);
125
+ border-width: var(--pf-c-accordion--m-bordered__toggle--before--BorderTopWidth) 0 var(--pf-c-accordion--m-bordered__toggle--before--BorderBottomWidth);
125
126
  }
126
127
 
127
128
  &.pf-m-expanded {
128
- --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: 0;
129
+ --pf-c-accordion--m-bordered__toggle--before--BorderBottomWidth: 0;
129
130
  }
130
131
  }
131
132
 
132
- // rename --after vars to --before in breaking change release
133
133
  // stylelint-disable selector-max-class, max-nesting-depth
134
- .pf-c-accordion__expanded-content {
134
+ .pf-c-accordion__expandable-content {
135
135
  &.pf-m-expanded {
136
- .pf-c-accordion__expanded-content-body:last-child {
136
+ .pf-c-accordion__expandable-content-body:last-child {
137
137
  &::before {
138
138
  position: absolute;
139
139
  top: 0;
@@ -142,7 +142,7 @@
142
142
  left: 0;
143
143
  pointer-events: none;
144
144
  content: "";
145
- border-bottom: var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth) solid var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor);
145
+ border-bottom: var(--pf-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--pf-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
146
146
  }
147
147
  }
148
148
  }
@@ -162,19 +162,18 @@
162
162
  font-size: var(--pf-c-accordion__toggle--FontSize, inherit);
163
163
  border: 0;
164
164
 
165
- // rename --before vars to --after in breaking change release
166
165
  &::after {
167
166
  position: absolute;
168
- top: var(--pf-c-accordion__toggle--before--Top);
167
+ top: var(--pf-c-accordion__toggle--after--Top);
169
168
  bottom: 0;
170
169
  left: 0;
171
- width: var(--pf-c-accordion__toggle--before--Width);
170
+ width: var(--pf-c-accordion__toggle--after--Width);
172
171
  content: "";
173
- background-color: var(--pf-c-accordion__toggle--before--BackgroundColor);
172
+ background-color: var(--pf-c-accordion__toggle--after--BackgroundColor);
174
173
  }
175
174
 
176
175
  &.pf-m-expanded {
177
- --pf-c-accordion__toggle--before--BackgroundColor: var(--pf-c-accordion__toggle--m-expanded--before--BackgroundColor);
176
+ --pf-c-accordion__toggle--after--BackgroundColor: var(--pf-c-accordion__toggle--m-expanded--after--BackgroundColor);
178
177
 
179
178
  .pf-c-accordion__toggle-text {
180
179
  font-weight: var(--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
@@ -223,37 +222,36 @@
223
222
  transition: var(--pf-c-accordion__toggle-icon--Transition);
224
223
  }
225
224
 
226
- .pf-c-accordion__expanded-content {
227
- font-size: var(--pf-c-accordion__expanded-content--FontSize);
228
- color: var(--pf-c-accordion__expanded-content--Color);
225
+ .pf-c-accordion__expandable-content {
226
+ font-size: var(--pf-c-accordion__expandable-content--FontSize);
227
+ color: var(--pf-c-accordion__expandable-content--Color);
229
228
 
230
229
  &.pf-m-fixed {
231
- max-height: var(--pf-c-accordion__expanded-content--m-fixed--MaxHeight);
230
+ max-height: var(--pf-c-accordion__expandable-content--m-fixed--MaxHeight);
232
231
  overflow-y: auto;
233
232
  }
234
233
 
235
234
  &.pf-m-expanded {
236
- --pf-c-accordion__expanded-content-body--before--BackgroundColor: var(--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor);
235
+ --pf-c-accordion__expandable-content-body--after--BackgroundColor: var(--pf-c-accordion__expandable-content--m-expanded__expandable-content-body--after--BackgroundColor);
237
236
  }
238
237
  }
239
238
 
240
- .pf-c-accordion__expanded-content-body {
239
+ .pf-c-accordion__expandable-content-body {
241
240
  position: relative;
242
- padding: var(--pf-c-accordion__expanded-content-body--PaddingTop) var(--pf-c-accordion__expanded-content-body--PaddingRight) var(--pf-c-accordion__expanded-content-body--PaddingBottom) var(--pf-c-accordion__expanded-content-body--PaddingLeft);
241
+ padding: var(--pf-c-accordion__expandable-content-body--PaddingTop) var(--pf-c-accordion__expandable-content-body--PaddingRight) var(--pf-c-accordion__expandable-content-body--PaddingBottom) var(--pf-c-accordion__expandable-content-body--PaddingLeft);
243
242
 
244
- // rename --before vars to --after in breaking change release
245
243
  &::after {
246
244
  position: absolute;
247
245
  top: 0;
248
246
  bottom: 0;
249
247
  left: 0;
250
- width: var(--pf-c-accordion__expanded-content-body--before--Width);
248
+ width: var(--pf-c-accordion__expandable-content-body--after--Width);
251
249
  content: "";
252
- background-color: var(--pf-c-accordion__expanded-content-body--before--BackgroundColor);
250
+ background-color: var(--pf-c-accordion__expandable-content-body--after--BackgroundColor);
253
251
  }
254
252
 
255
253
  & + & {
256
- --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop);
254
+ --pf-c-accordion__expandable-content-body--PaddingTop: var(--pf-c-accordion__expandable-content-body--expandable-content-body--PaddingTop);
257
255
  }
258
256
  }
259
257
 
package/components/Alert/alert.css CHANGED
@@ -199,10 +199,6 @@
199
199
  margin-right: var(--pf-c-alert__action-group__c-button--not-last-child--MarginRight);
200
200
  }
201
201
 
202
- .pf-m-overpass-font .pf-c-alert__title {
203
- --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--normal);
204
- }
205
-
206
202
  :where(.pf-theme-dark) .pf-c-alert {
207
203
  --pf-c-alert--BackgroundColor: var(--pf-global--palette--black-600);
208
204
  --pf-c-alert__title--Color: var(--pf-global--default-color--200);
package/components/Alert/alert.scss CHANGED
@@ -240,13 +240,6 @@
240
240
  }
241
241
  }
242
242
 
243
- // RedHat Font overrides
244
- @include pf-m-overpass-font {
245
- .pf-c-alert__title {
246
- --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--normal);
247
- }
248
- }
249
-
250
243
  // stylelint-disable no-invalid-position-at-import-rule
251
244
  @import "themes/dark/alert";
252
245
 
package/components/Banner/banner.css CHANGED
@@ -52,7 +52,7 @@
52
52
  --pf-c-banner--link--Color: var(--pf-c-banner--Color);
53
53
  --pf-c-banner--link--TextDecoration: underline;
54
54
  --pf-c-banner--link--hover--Color: var(--pf-c-banner--Color);
55
- --pf-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--semi-bold);
55
+ --pf-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--bold);
56
56
  --pf-c-banner--link--disabled--Color: var(--pf-c-banner--Color);
57
57
  --pf-c-banner--link--disabled--TextDecoration: none;
58
58
  --pf-c-banner--m-info--BackgroundColor: var(--pf-global--palette--blue-200);
package/components/Banner/banner.scss CHANGED
@@ -18,7 +18,7 @@
18
18
  --pf-c-banner--link--Color: var(--pf-c-banner--Color);
19
19
  --pf-c-banner--link--TextDecoration: underline;
20
20
  --pf-c-banner--link--hover--Color: var(--pf-c-banner--Color);
21
- --pf-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--semi-bold);
21
+ --pf-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--bold);
22
22
  --pf-c-banner--link--disabled--Color: var(--pf-c-banner--Color);
23
23
  --pf-c-banner--link--disabled--TextDecoration: none;
24
24
 
package/components/Breadcrumb/breadcrumb.css CHANGED
@@ -85,14 +85,8 @@ button.pf-c-breadcrumb__link {
85
85
  white-space: normal;
86
86
  }
87
87
 
88
- .pf-m-overpass-font .pf-c-breadcrumb__link,
89
- .pf-m-overpass-font .pf-c-breadcrumb__item {
90
- font-weight: var(--pf-global--FontWeight--semi-bold);
91
- }
92
-
93
88
  .pf-c-breadcrumb__list > :first-child .pf-c-breadcrumb__item-divider {
94
89
  display: none;
95
- visibility: hidden;
96
90
  }
97
91
 
98
92
  :where(.pf-theme-dark) .pf-c-breadcrumb {
package/components/Breadcrumb/breadcrumb.scss CHANGED
@@ -111,19 +111,10 @@
111
111
  white-space: normal;
112
112
  }
113
113
 
114
- // RedHat Font overrides
115
- @include pf-m-overpass-font {
116
- .pf-c-breadcrumb__link,
117
- .pf-c-breadcrumb__item {
118
- font-weight: var(--pf-global--FontWeight--semi-bold);
119
- }
120
- }
121
-
122
114
  // Hide divider of first child - required for react since dividers are included in each item
123
115
  // Consider revisiting this in a breaking change release
124
116
  .pf-c-breadcrumb__list > :first-child .pf-c-breadcrumb__item-divider {
125
117
  display: none;
126
- visibility: hidden;
127
118
  }
128
119
 
129
120
  // stylelint-disable no-invalid-position-at-import-rule
package/components/Button/button.css CHANGED
@@ -501,10 +501,6 @@
501
501
  margin-left: var(--pf-c-button__count--MarginLeft);
502
502
  }
503
503
 
504
- .pf-m-overpass-font .pf-c-button {
505
- --pf-c-button--FontWeight: var(--pf-global--FontWeight--semi-bold);
506
- }
507
-
508
504
  :where(.pf-theme-dark) .pf-c-button {
509
505
  --pf-c-button--disabled--Color: var(--pf-global--disabled-color--300);
510
506
  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
package/components/Button/button.scss CHANGED
@@ -652,13 +652,6 @@
652
652
  margin-left: var(--pf-c-button__count--MarginLeft);
653
653
  }
654
654
 
655
- // RedHat Font overrides
656
- @include pf-m-overpass-font {
657
- .pf-c-button {
658
- --pf-c-button--FontWeight: var(--pf-global--FontWeight--semi-bold);
659
- }
660
- }
661
-
662
655
  // stylelint-disable no-invalid-position-at-import-rule
663
656
  @import "themes/dark/button";
664
657
 
package/components/Card/card.css CHANGED
@@ -323,10 +323,6 @@
323
323
  border: var(--pf-c-card__input--focus--BorderWidth) solid var(--pf-c-card__input--focus--BorderColor);
324
324
  }
325
325
 
326
- .pf-m-overpass-font .pf-c-card .pf-c-card__title {
327
- font-weight: var(--pf-global--FontWeight--normal);
328
- }
329
-
330
326
  :where(.pf-theme-dark) .pf-c-card,
331
327
  :where(.pf-theme-dark) .pf-c-card.pf-m-non-selectable-raised {
332
328
  --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md);
package/components/Card/card.scss CHANGED
@@ -395,13 +395,6 @@
395
395
  border: var(--pf-c-card__input--focus--BorderWidth) solid var(--pf-c-card__input--focus--BorderColor);
396
396
  }
397
397
 
398
- // RedHat Font overrides
399
- @include pf-m-overpass-font {
400
- .pf-c-card .pf-c-card__title {
401
- font-weight: var(--pf-global--FontWeight--normal);
402
- }
403
- }
404
-
405
398
  // stylelint-disable no-invalid-position-at-import-rule
406
399
  @import "themes/dark/card";
407
400
 
package/components/Check/check.css CHANGED
@@ -16,8 +16,6 @@
16
16
  display: grid;
17
17
  grid-template-columns: auto 1fr;
18
18
  grid-gap: var(--pf-c-check--GridGap);
19
- align-items: start;
20
- justify-items: start;
21
19
  }
22
20
  .pf-c-check.pf-m-standalone {
23
21
  --pf-c-check--GridGap: 0;
@@ -50,6 +48,10 @@
50
48
  margin-top: var(--pf-c-check__body--MarginTop);
51
49
  }
52
50
 
51
+ .pf-c-check__label,
52
+ .pf-c-check__input {
53
+ justify-self: start;
54
+ }
53
55
  label.pf-c-check, .pf-c-check__label,
54
56
  .pf-c-check__input {
55
57
  cursor: pointer;
package/components/Check/check.scss CHANGED
@@ -19,8 +19,6 @@
19
19
  display: grid;
20
20
  grid-template-columns: auto 1fr;
21
21
  grid-gap: var(--pf-c-check--GridGap);
22
- align-items: start;
23
- justify-items: start;
24
22
 
25
23
  &.pf-m-standalone {
26
24
  --pf-c-check--GridGap: 0;
@@ -57,6 +55,8 @@
57
55
 
58
56
  .pf-c-check__label,
59
57
  .pf-c-check__input {
58
+ justify-self: start;
59
+
60
60
  @at-root label.pf-c-check,
61
61
  & {
62
62
  cursor: pointer;