@patternfly/documentation-framework 6.0.0-alpha.10 → 6.0.0-alpha.12

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 (21) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/components/autoLinkHeader/autoLinkHeader.css +2 -2
  3. package/components/cssVariables/cssVariables.css +4 -4
  4. package/components/example/example.css +29 -29
  5. package/components/footer/footer.css +16 -16
  6. package/components/gdprBanner/gdprBanner.css +2 -2
  7. package/components/sectionGallery/sectionGallery.css +12 -12
  8. package/components/sectionGallery/sectionGalleryToolbar.js +1 -1
  9. package/components/sideNav/sideNav.css +12 -12
  10. package/components/sideNav/sideNav.js +2 -2
  11. package/components/tableOfContents/tableOfContents.css +23 -23
  12. package/layouts/sideNavLayout/sideNavLayout.css +14 -14
  13. package/layouts/sideNavLayout/sideNavLayout.js +1 -1
  14. package/package.json +7 -7
  15. package/pages/404/404.css +2 -2
  16. package/pages/404/index.js +1 -1
  17. package/pages/global-css-variables.md +16 -16
  18. package/scripts/writeScreenshots.js +1 -1
  19. package/templates/mdx.css +156 -156
  20. package/templates/mdx.js +6 -6
  21. package/versions.json +9 -8
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # 6.0.0-alpha.12 (2024-02-27)
7
+
8
+ **Note:** Version bump only for package @patternfly/documentation-framework
9
+
10
+
11
+
12
+
13
+
14
+ # 6.0.0-alpha.11 (2024-02-22)
15
+
16
+
17
+ ### Features
18
+
19
+ * pull in latest alpha with new v6 prefixes ([#3899](https://github.com/patternfly/patternfly-org/issues/3899)) ([8e57612](https://github.com/patternfly/patternfly-org/commit/8e57612b00b626a1d5b8d8762139a1499cf46aa3))
20
+
21
+
22
+
23
+
24
+
6
25
  # 6.0.0-alpha.10 (2024-02-01)
7
26
 
8
27
 
package/components/autoLinkHeader/autoLinkHeader.css CHANGED
@@ -3,8 +3,8 @@
3
3
  }
4
4
 
5
5
  .ws-heading-anchor {
6
- color: var(--pf-v5-global--Color--100);
7
- transform: translate(calc(-100% - var(--pf-v5-global--spacer--xs)), -50%);
6
+ color: var(--pf-v6-global--Color--100);
7
+ transform: translate(calc(-100% - var(--pf-v6-global--spacer--xs)), -50%);
8
8
  opacity: 0;
9
9
  position: absolute;
10
10
  left: 0;
package/components/cssVariables/cssVariables.css CHANGED
@@ -2,14 +2,14 @@
2
2
  display: inline-block;
3
3
  height: 18px;
4
4
  width: 18px;
5
- border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--200);
6
- border-radius: var(--pf-v5-global--BorderRadius--lg);
5
+ border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--BorderColor--200);
6
+ border-radius: var(--pf-v6-global--BorderRadius--lg);
7
7
  }
8
8
 
9
9
  .ws-td-text {
10
- font-size: var(--pf-v5-global--FontSize--sm) !important;
10
+ font-size: var(--pf-v6-global--FontSize--sm) !important;
11
11
  }
12
12
 
13
13
  .ws-css-property {
14
- padding: var(--pf-v5-global--spacer--xs) var(--pf-v5-global--spacer--md);
14
+ padding: var(--pf-v6-global--spacer--xs) var(--pf-v6-global--spacer--md);
15
15
  }
package/components/example/example.css CHANGED
@@ -3,52 +3,52 @@
3
3
  }
4
4
 
5
5
  .ws-example {
6
- margin-top: var(--pf-v5-global--spacer--lg);
7
- margin-bottom: var(--pf-v5-global--spacer--lg);
6
+ margin-top: var(--pf-v6-global--spacer--lg);
7
+ margin-bottom: var(--pf-v6-global--spacer--lg);
8
8
  }
9
9
 
10
10
  .ws-example > .ws-example-header {
11
- padding: var(--pf-v5-global--spacer--md);
11
+ padding: var(--pf-v6-global--spacer--md);
12
12
  }
13
13
 
14
14
  .ws-example-header > .ws-example-heading:not(:last-child) {
15
- margin-bottom: var(--pf-v5-global--spacer--md);
15
+ margin-bottom: var(--pf-v6-global--spacer--md);
16
16
  }
17
17
 
18
- .ws-code-editor:not(.ws-example-code-expanded) > .pf-v5-c-code-editor__header::before {
19
- --pf-v5-c-code-editor__header--before--BorderBottomWidth: 0;
18
+ .ws-code-editor:not(.ws-example-code-expanded) > .pf-v6-c-code-editor__header::before {
19
+ --pf-v6-c-code-editor__header--before--BorderBottomWidth: 0;
20
20
  }
21
21
 
22
22
  .ws-code-editor-control {
23
- --pf-v5-c-button--m-control--BackgroundColor: transparent;
24
- --pf-v5-c-button--m-control--active--BackgroundColor: transparent;
25
- --pf-v5-c-button--m-control--focus--BackgroundColor: transparent;
26
- --pf-v5-c-button--m-control--hover--BackgroundColor: transparent;
23
+ --pf-v6-c-button--m-control--BackgroundColor: transparent;
24
+ --pf-v6-c-button--m-control--active--BackgroundColor: transparent;
25
+ --pf-v6-c-button--m-control--focus--BackgroundColor: transparent;
26
+ --pf-v6-c-button--m-control--hover--BackgroundColor: transparent;
27
27
  }
28
28
 
29
- .ws-code-editor-control.pf-v5-c-button {
30
- --pf-v5-c-button--after--BorderWidth: 0;
29
+ .ws-code-editor-control.pf-v6-c-button {
30
+ --pf-v6-c-button--after--BorderWidth: 0;
31
31
  }
32
32
 
33
33
  .ws-preview {
34
- padding: var(--pf-v5-global--spacer--md);
35
- background-color: var(--pf-v5-global--BackgroundColor--100);
36
- border-bottom: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--300);
34
+ padding: var(--pf-v6-global--spacer--md);
35
+ background-color: var(--pf-v6-global--BackgroundColor--100);
36
+ border-bottom: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--BorderColor--300);
37
37
  transition: width .2s ease-in-out;
38
38
  }
39
39
 
40
40
  .ws-core-c-page.ws-preview > .ws-preview-html,
41
- .ws-react-c-page.ws-preview > .pf-v5-c-page {
41
+ .ws-react-c-page.ws-preview > .pf-v6-c-page {
42
42
  overflow: hidden;
43
43
  }
44
44
 
45
45
  .ws-editor {
46
- font-size: var(--pf-v5-global--FontSize--md);
46
+ font-size: var(--pf-v6-global--FontSize--md);
47
47
  }
48
48
 
49
49
  .ws-editor .token.punctuation,
50
50
  .ws-editor .token.operator {
51
- color: var(--pf-v5-global--danger-color--100);
51
+ color: var(--pf-v6-global--danger-color--100);
52
52
  }
53
53
 
54
54
  .ws-preview__thumbnail-link {
@@ -100,33 +100,33 @@
100
100
  color: rgba(255,255,255,.4);
101
101
  }
102
102
 
103
- .pf-v5-c-badge.ws-beta-badge {
104
- --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
105
- --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--primary-color--100);
106
- border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--primary-color--100);
103
+ .pf-v6-c-badge.ws-beta-badge {
104
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-v6-global--BackgroundColor--100);
105
+ --pf-v6-c-badge--m-unread--Color: var(--pf-v6-global--primary-color--100);
106
+ border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--primary-color--100);
107
107
  }
108
108
 
109
109
  .ws-prop-required {
110
- color: var(--pf-v5-global--danger-color--100);
110
+ color: var(--pf-v6-global--danger-color--100);
111
111
  }
112
112
 
113
113
  .ws-full-page-utils {
114
114
  position: fixed;
115
115
  right: 0;
116
116
  bottom: 0;
117
- padding: var(--pf-v5-global--spacer--lg);
118
- z-index: var(--pf-v5-global--ZIndex--2xl);
117
+ padding: var(--pf-v6-global--spacer--lg);
118
+ z-index: var(--pf-v6-global--ZIndex--2xl);
119
119
  }
120
120
 
121
121
  .ws-full-page-utils::before {
122
122
  position: absolute;
123
123
  inset: 0;
124
124
  content: "";
125
- background-color: var(--pf-v5-global--BackgroundColor--100);
125
+ background-color: var(--pf-v6-global--BackgroundColor--100);
126
126
  opacity: 0.8;
127
- box-shadow: var(--pf-v5-global--BoxShadow--sm);
127
+ box-shadow: var(--pf-v6-global--BoxShadow--sm);
128
128
  }
129
129
 
130
- .pf-v5-theme-dark .ws-theme-switch-full-page::before {
131
- background-color: var(--pf-v5-global--BackgroundColor--300);
130
+ .pf-v6-theme-dark .ws-theme-switch-full-page::before {
131
+ background-color: var(--pf-v6-global--BackgroundColor--300);
132
132
  }
package/components/footer/footer.css CHANGED
@@ -1,11 +1,11 @@
1
- .ws-org-pfsite-l-footer.pf-v5-c-page__main-section {
2
- font-family: var(--pf-v5-global--FontFamily--text);
1
+ .ws-org-pfsite-l-footer.pf-v6-c-page__main-section {
2
+ font-family: var(--pf-v6-global--FontFamily--text);
3
3
  font-weight: 300;
4
4
  background-color: #1a1a1a !important;
5
- --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-global--spacer--xl);
6
- --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-global--spacer--2xl);
7
- --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-global--spacer--2xl);
8
- --pf-v5-c-page__main-section--PaddingLeft: var(--pf-v5-global--spacer--2xl);
5
+ --pf-v6-c-page__main-section--PaddingTop: var(--pf-v6-global--spacer--xl);
6
+ --pf-v6-c-page__main-section--PaddingRight: var(--pf-v6-global--spacer--2xl);
7
+ --pf-v6-c-page__main-section--PaddingBottom: var(--pf-v6-global--spacer--2xl);
8
+ --pf-v6-c-page__main-section--PaddingLeft: var(--pf-v6-global--spacer--2xl);
9
9
  /* Hide long overflowing tocs */
10
10
  z-index: 1;
11
11
  }
@@ -34,8 +34,8 @@
34
34
  }
35
35
  }
36
36
  .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-social-links a {
37
- margin-right: var(--pf-v5-global--spacer--md);
38
- color: var(--pf-v5-global--Color--light-100) !important;
37
+ margin-right: var(--pf-v6-global--spacer--md);
38
+ color: var(--pf-v6-global--Color--light-100) !important;
39
39
  }
40
40
  .ws-org-pfsite-l-footer-column
41
41
  .ws-org-pfsite-footer-menu-social-links
@@ -43,8 +43,8 @@
43
43
  margin-right: 0;
44
44
  }
45
45
  .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-social-links {
46
- margin-top: var(--pf-v5-global--spacer--md);
47
- margin-bottom: var(--pf-v5-global--spacer--md);
46
+ margin-top: var(--pf-v6-global--spacer--md);
47
+ margin-bottom: var(--pf-v6-global--spacer--md);
48
48
  }
49
49
  @media (max-width: 768px) {
50
50
  .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-social-links {
@@ -71,7 +71,7 @@
71
71
  padding-right: 10px;
72
72
  }
73
73
  .ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-link {
74
- color: var(--pf-v5-global--Color--light-100);
74
+ color: var(--pf-v6-global--Color--light-100);
75
75
  font-size: 14px !important;
76
76
  }
77
77
  .ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-link:hover {
@@ -86,19 +86,19 @@
86
86
  .ws-org-pfsite-l-footer-dark {
87
87
  background: #151515 !important;
88
88
  }
89
- .pf-v5-c-page .pf-v5-c-page__main-section.ws-org-pfsite-l-footer-dark {
89
+ .pf-v6-c-page .pf-v6-c-page__main-section.ws-org-pfsite-l-footer-dark {
90
90
  /* Hide long overflowing tocs */
91
91
  z-index: 1;
92
92
  }
93
- .pf-v5-c-page__main-section.ws-org-pfsite-l-footer-dark > * {
93
+ .pf-v6-c-page__main-section.ws-org-pfsite-l-footer-dark > * {
94
94
  font-weight: 300;
95
95
  font-size: 12px;
96
96
  color: #d2d2d2;
97
97
  }
98
98
  .ws-org-pfsite-l-footer-dark a {
99
- padding-right: var(--pf-v5-global--spacer--sm);
100
- padding-left: var(--pf-v5-global--spacer--sm);
101
- border-right: var(--pf-v5-global--BorderWidth--sm) solid #d2d2d2;
99
+ padding-right: var(--pf-v6-global--spacer--sm);
100
+ padding-left: var(--pf-v6-global--spacer--sm);
101
+ border-right: var(--pf-v6-global--BorderWidth--sm) solid #d2d2d2;
102
102
  font-weight: 300;
103
103
  color: #d2d2d2;
104
104
  text-decoration: underline;
package/components/gdprBanner/gdprBanner.css CHANGED
@@ -9,6 +9,6 @@
9
9
  #ws-gdpr-banner {
10
10
  max-width: 95vw;
11
11
  flex-wrap: nowrap;
12
- background: var(--pf-v5-global--BackgroundColor--100);
13
- border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--Color--100);
12
+ background: var(--pf-v6-global--BackgroundColor--100);
13
+ border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--Color--100);
14
14
  }
package/components/sectionGallery/sectionGallery.css CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  .ws-section-gallery {
10
10
  /* top placement */
11
- margin-top: calc(var(--pf-v5-c-page__main-section--PaddingTop) * -1);
11
+ margin-top: calc(var(--pf-v6-c-page__main-section--PaddingTop) * -1);
12
12
  }
13
13
 
14
14
  * + .ws-section-gallery {
@@ -17,22 +17,22 @@
17
17
  }
18
18
 
19
19
  /* Toolbar styles */
20
- .ws-section-gallery .pf-v5-c-toolbar {
21
- margin-left: calc(var(--pf-v5-c-page__main-section--PaddingLeft) * -1);
22
- border-bottom: var(--pf-v5-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-v5-c-page__sidebar--m-light--BorderRightColor);
23
- margin-bottom: var(--pf-v5-global--spacer--md);
24
- width: calc(100% + var(--pf-v5-c-page__main-section--PaddingLeft) + var(--pf-v5-c-page__main-section--PaddingRight));
20
+ .ws-section-gallery .pf-v6-c-toolbar {
21
+ margin-left: calc(var(--pf-v6-c-page__main-section--PaddingLeft) * -1);
22
+ border-bottom: var(--pf-v6-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-v6-c-page__sidebar--m-light--BorderRightColor);
23
+ margin-bottom: var(--pf-v6-global--spacer--md);
24
+ width: calc(100% + var(--pf-v6-c-page__main-section--PaddingLeft) + var(--pf-v6-c-page__main-section--PaddingRight));
25
25
  /* avoid hoverable data list items overlapping toolbar */
26
- z-index: calc(var(--pf-v5-global--ZIndex--xs) + 2);
26
+ z-index: calc(var(--pf-v6-global--ZIndex--xs) + 2);
27
27
  }
28
28
 
29
29
  /* Match toolbar left-padding to gallery left-padding */
30
- .ws-section-gallery .pf-v5-c-toolbar .pf-v5-c-toolbar__content {
31
- --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-page__main-section--PaddingLeft);
30
+ .ws-section-gallery .pf-v6-c-toolbar .pf-v6-c-toolbar__content {
31
+ --pf-v6-c-toolbar__content--PaddingLeft: var(--pf-v6-c-page__main-section--PaddingLeft);
32
32
  }
33
33
 
34
34
  /* Avoid toolbar wrap on smaller screens */
35
- .ws-section-gallery .pf-v5-c-toolbar__content-section {
35
+ .ws-section-gallery .pf-v6-c-toolbar__content-section {
36
36
  flex-wrap: nowrap;
37
37
  }
38
38
 
@@ -43,11 +43,11 @@
43
43
  }
44
44
 
45
45
  /* Ensure same height for all cards in a gallery row */
46
- .ws-section-gallery .pf-v5-c-card {
46
+ .ws-section-gallery .pf-v6-c-card {
47
47
  height: 100%;
48
48
  }
49
49
 
50
50
  /* Limit width for data list view only */
51
- .ws-section-gallery .pf-v5-c-data-list {
51
+ .ws-section-gallery .pf-v6-c-data-list {
52
52
  max-width: 956px;
53
53
  }
package/components/sectionGallery/sectionGalleryToolbar.js CHANGED
@@ -30,7 +30,7 @@ export const SectionGalleryToolbar = ({
30
30
  </ToggleGroup>
31
31
  </ToolbarItem>
32
32
  </ToolbarGroup>
33
- <ToolbarItem variant="pagination" spacer={{default: 'spacerMd', md: 'spacerNone'}} style={{'--pf-v5-c-toolbar__item--MinWidth': "max-content"}}>
33
+ <ToolbarItem variant="pagination" spacer={{default: 'spacerMd', md: 'spacerNone'}} style={{'--pf-v6-c-toolbar__item--MinWidth': "max-content"}}>
34
34
  <Text component={TextVariants.small}>{ galleryItems.length }{ countText }</Text>
35
35
  </ToolbarItem>
36
36
  </ToolbarContent>
package/components/sideNav/sideNav.css CHANGED
@@ -1,21 +1,21 @@
1
- .ws-page-sidebar .pf-v5-c-nav {
2
- --pf-v5-c-nav__link--before--BorderBottomWidth: 0;
3
- --pf-v5-c-nav--m-light__link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
4
- --pf-v5-c-nav--m-light__link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
5
- --pf-v5-c-nav--m-light__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
6
- --pf-v5-c-nav--m-light__link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
7
- --pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
1
+ .ws-page-sidebar .pf-v6-c-nav {
2
+ --pf-v6-c-nav__link--before--BorderBottomWidth: 0;
3
+ --pf-v6-c-nav--m-light__link--hover--BackgroundColor: var(--pf-v6-global--BackgroundColor--light-200);
4
+ --pf-v6-c-nav--m-light__link--focus--BackgroundColor: var(--pf-v6-global--BackgroundColor--light-200);
5
+ --pf-v6-c-nav--m-light__link--m-current--BackgroundColor: var(--pf-v6-global--BackgroundColor--light-200);
6
+ --pf-v6-c-nav--m-light__link--active--BackgroundColor: var(--pf-v6-global--BackgroundColor--light-200);
7
+ --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-v6-global--BackgroundColor--200);
8
8
  }
9
9
 
10
- .ws-side-nav-list .pf-v5-c-nav__item.pf-m-expandable::before {
10
+ .ws-side-nav-list .pf-v6-c-nav__item.pf-m-expandable::before {
11
11
  border-bottom: 0;
12
12
  }
13
13
 
14
- .pf-v5-c-nav__subsection-title {
15
- color: var(--ws-toc-link--Color, var(--pf-v5-global--Color--300));
16
- font-size: var(--pf-v5-global--FontSize--sm);
14
+ .pf-v6-c-nav__subsection-title {
15
+ color: var(--ws-toc-link--Color, var(--pf-v6-global--Color--300));
16
+ font-size: var(--pf-v6-global--FontSize--sm);
17
17
  }
18
18
 
19
19
  #ws-sticky-nav-tabs {
20
- z-index: var(--pf-v5-global--ZIndex--2xl);
20
+ z-index: var(--pf-v6-global--ZIndex--2xl);
21
21
  }
package/components/sideNav/sideNav.js CHANGED
@@ -19,14 +19,14 @@ const NavItem = ({ text, href, isDeprecated, isBeta, isDemo }) => {
19
19
  return (
20
20
  <PageContextConsumer key={href + text}>
21
21
  {({onSidebarToggle, isSidebarOpen }) => (
22
- <li key={href + text} className="pf-v5-c-nav__item" onClick={() => isMobileView && onSidebarToggle && onSidebarToggle()}>
22
+ <li key={href + text} className="pf-v6-c-nav__item" onClick={() => isMobileView && onSidebarToggle && onSidebarToggle()}>
23
23
  <Link
24
24
  to={href}
25
25
  getProps={({ isCurrent, href, location }) => {
26
26
  const { pathname } = location;
27
27
  return {
28
28
  className: css(
29
- 'pf-v5-c-nav__link',
29
+ 'pf-v6-c-nav__link',
30
30
  (isCurrent || pathname.startsWith(href + '/')) && 'pf-m-current'
31
31
  )
32
32
  }}
package/components/tableOfContents/tableOfContents.css CHANGED
@@ -1,45 +1,45 @@
1
1
  .ws-toc {
2
2
  align-self: flex-start;
3
3
  position: sticky;
4
- width: calc(100% + var(--pf-v5-c-page__main-section--PaddingLeft) + var(--pf-v5-c-page__main-section--PaddingRight));
5
- background-color: var(--pf-v5-global--BackgroundColor--200);
4
+ width: calc(100% + var(--pf-v6-c-page__main-section--PaddingLeft) + var(--pf-v6-c-page__main-section--PaddingRight));
5
+ background-color: var(--pf-v6-global--BackgroundColor--200);
6
6
  z-index: 501;
7
- margin-block-start: calc(var(--pf-v5-c-page__main-section--PaddingTop) * -1);
8
- margin-block-end: var(--pf-v5-global--spacer--md);
9
- margin-inline-start: calc(var(--pf-v5-c-page__main-section--PaddingLeft) * -1);
10
- margin-inline-end: calc(var(--pf-v5-c-page__main-section--PaddingRight) * -2);
11
- padding-block-start: var(--pf-v5-global--spacer--md);
12
- padding-block-end: var(--pf-v5-global--spacer--md);
13
- padding-inline-start: var(--pf-v5-global--spacer--md);
7
+ margin-block-start: calc(var(--pf-v6-c-page__main-section--PaddingTop) * -1);
8
+ margin-block-end: var(--pf-v6-global--spacer--md);
9
+ margin-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingLeft) * -1);
10
+ margin-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingRight) * -2);
11
+ padding-block-start: var(--pf-v6-global--spacer--md);
12
+ padding-block-end: var(--pf-v6-global--spacer--md);
13
+ padding-inline-start: var(--pf-v6-global--spacer--md);
14
14
  padding-inline-end: 0;
15
- box-shadow: var(--pf-v5-global--BoxShadow--lg-bottom);
15
+ box-shadow: var(--pf-v6-global--BoxShadow--lg-bottom);
16
16
  }
17
17
 
18
18
  .ws-toc.pf-m-expanded {
19
- box-shadow: var(--pf-v5-global--BoxShadow--sm-bottom)
19
+ box-shadow: var(--pf-v6-global--BoxShadow--sm-bottom)
20
20
  }
21
21
 
22
22
  /* Mobile jumplinks */
23
23
  @media (max-width: 1450px) {
24
- .ws-toc.pf-m-expanded .pf-v5-c-jump-links__main {
24
+ .ws-toc.pf-m-expanded .pf-v6-c-jump-links__main {
25
25
  max-height: 65vh;
26
26
  overflow: auto;
27
27
  }
28
-
29
- .ws-toc .pf-v5-c-jump-links__header {
28
+
29
+ .ws-toc .pf-v6-c-jump-links__header {
30
30
  position: sticky;
31
31
  top: 0;
32
- background-color: var(--pf-v5-global--BackgroundColor--200);
32
+ background-color: var(--pf-v6-global--BackgroundColor--200);
33
33
  z-index: 2;
34
34
  }
35
35
  }
36
36
 
37
- .ws-toc .pf-v5-c-jump-links__main {
37
+ .ws-toc .pf-v6-c-jump-links__main {
38
38
  scrollbar-width: none;
39
39
  }
40
40
 
41
41
  /* Hide TOC scrollbar Chrome, Safari & Opera */
42
- .ws-toc .pf-v5-c-jump-links__main::-webkit-scrollbar {
42
+ .ws-toc .pf-v6-c-jump-links__main::-webkit-scrollbar {
43
43
  display: none;
44
44
  }
45
45
 
@@ -52,7 +52,7 @@
52
52
  -ms-overflow-style: none;
53
53
  scrollbar-width: none;
54
54
  order: 1;
55
- padding: 0 var(--pf-v5-global--spacer--lg) var(--pf-v5-global--spacer--lg) var(--pf-v5-global--spacer--2xl);
55
+ padding: 0 var(--pf-v6-global--spacer--lg) var(--pf-v6-global--spacer--lg) var(--pf-v6-global--spacer--2xl);
56
56
  flex-grow: 1;
57
57
  background: none;
58
58
  margin: 0;
@@ -65,18 +65,18 @@
65
65
  }
66
66
 
67
67
  /* .ws-toc-link { */
68
- .ws-toc-item .pf-v5-c-jump-links__link {
68
+ .ws-toc-item .pf-v6-c-jump-links__link {
69
69
  position: relative;
70
70
  display: block;
71
- color: var(--ws-toc-link--Color, var(--pf-v5-global--Color--300));
72
- font-size: var(--pf-v5-global--FontSize--sm);
71
+ color: var(--ws-toc-link--Color, var(--pf-v6-global--Color--300));
72
+ font-size: var(--pf-v6-global--FontSize--sm);
73
73
  margin: -4px 0;
74
74
  }
75
75
 
76
- .ws-toc-sublist > .ws-toc-item:first-child .pf-v5-c-jump-links__link {
76
+ .ws-toc-sublist > .ws-toc-item:first-child .pf-v6-c-jump-links__link {
77
77
  margin-top: 0;
78
78
  }
79
79
 
80
- .ws-toc-item.pf-m-current .pf-v5-c-jump-links__link::before {
80
+ .ws-toc-item.pf-m-current .pf-v6-c-jump-links__link::before {
81
81
  z-index: 1;
82
82
  }
package/layouts/sideNavLayout/sideNavLayout.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* Page layout */
2
- /* tells .pf-v5-c-page to consume the available space left over from the banners/footers */
2
+ /* tells .pf-v6-c-page to consume the available space left over from the banners/footers */
3
3
  #ws-router {
4
4
  display: flex;
5
5
  flex-direction: column;
@@ -9,7 +9,7 @@
9
9
  }
10
10
 
11
11
  .ws-switcher-divider {
12
- padding: 0 var(--pf-v5-global--spacer--md);
12
+ padding: 0 var(--pf-v6-global--spacer--md);
13
13
  }
14
14
 
15
15
  @media (min-width: 1200px) {
@@ -18,8 +18,8 @@
18
18
  }
19
19
  }
20
20
 
21
- .ws-page-sidebar > .pf-v5-c-page__sidebar-body {
22
- padding-top: var(--pf-v5-global--spacer--md);
21
+ .ws-page-sidebar > .pf-v6-c-page__sidebar-body {
22
+ padding-top: var(--pf-v6-global--spacer--md);
23
23
  }
24
24
 
25
25
  /* Search */
@@ -27,24 +27,24 @@
27
27
  /* Fix search results overflowing page */
28
28
  min-width: 480px !important;
29
29
  }
30
- .ws-global-search.pf-v5-c-input-group {
30
+ .ws-global-search.pf-v6-c-input-group {
31
31
  /* remove white background on dark Masthead */
32
- --pf-v5-c-input-group--BackgroundColor: none;
32
+ --pf-v6-c-input-group--BackgroundColor: none;
33
33
  }
34
34
 
35
35
  /* For tiny (200px) viewports */
36
- .ws-masthead .pf-v5-c-toolbar__item {
36
+ .ws-masthead .pf-v6-c-toolbar__item {
37
37
  min-width: 0;
38
38
  }
39
39
 
40
- .ws-masthead .pf-v5-c-switch {
40
+ .ws-masthead .pf-v6-c-switch {
41
41
  align-items: center;
42
- --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
43
- --pf-v5-c-switch__input--checked__label--Color: var(--pf-v5-global--Color--100);
42
+ --pf-v6-c-switch__input--not-checked__label--Color: var(--pf-v6-global--Color--100);
43
+ --pf-v6-c-switch__input--checked__label--Color: var(--pf-v6-global--Color--100);
44
44
  }
45
45
 
46
- .ws-masthead .pf-v5-c-toggle-group {
47
- --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--palette--blue-400);
48
- --pf-v5-c-toggle-group__button--focus--BackgroundColor: transparent;
49
- --pf-v5-c-toggle-group__button--hover--BackgroundColor: transparent;
46
+ .ws-masthead .pf-v6-c-toggle-group {
47
+ --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v6-global--palette--blue-400);
48
+ --pf-v6-c-toggle-group__button--focus--BackgroundColor: transparent;
49
+ --pf-v6-c-toggle-group__button--hover--BackgroundColor: transparent;
50
50
  }
package/layouts/sideNavLayout/sideNavLayout.js CHANGED
@@ -145,7 +145,7 @@ const HeaderTools = ({
145
145
  onClick={() => setDropdownOpen(!isDropdownOpen)}
146
146
  isExpanded={isDropdownOpen}
147
147
  >
148
- Release {initialVersion.name}
148
+ Current alphas
149
149
  </MenuToggle>
150
150
  )}
151
151
  >
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/documentation-framework",
3
3
  "description": "A framework to build documentation for PatternFly.",
4
- "version": "6.0.0-alpha.10",
4
+ "version": "6.0.0-alpha.12",
5
5
  "author": "Red Hat",
6
6
  "license": "MIT",
7
7
  "private": false,
@@ -17,7 +17,7 @@
17
17
  "@babel/plugin-transform-react-jsx": "7.17.12",
18
18
  "@babel/preset-env": "7.18.2",
19
19
  "@mdx-js/util": "1.6.16",
20
- "@patternfly/ast-helpers": "^1.3.15-alpha.9",
20
+ "@patternfly/ast-helpers": "^1.4.0-alpha.1",
21
21
  "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
22
22
  "autoprefixer": "9.8.6",
23
23
  "babel-loader": "9.1.2",
@@ -80,12 +80,12 @@
80
80
  "webpack-merge": "5.8.0"
81
81
  },
82
82
  "peerDependencies": {
83
- "@patternfly/patternfly": "6.0.0-alpha.38",
84
- "@patternfly/react-code-editor": "6.0.0-alpha.5",
85
- "@patternfly/react-core": "6.0.0-alpha.5",
86
- "@patternfly/react-table": "6.0.0-alpha.5",
83
+ "@patternfly/patternfly": "6.0.0-alpha.91",
84
+ "@patternfly/react-code-editor": "6.0.0-alpha.36",
85
+ "@patternfly/react-core": "6.0.0-alpha.36",
86
+ "@patternfly/react-table": "6.0.0-alpha.36",
87
87
  "react": "^17.0.0 || ^18.0.0",
88
88
  "react-dom": "^17.0.0 || ^18.0.0"
89
89
  },
90
- "gitHead": "db99b48deadb8e9dae5550cc9c8c462feb4b0830"
90
+ "gitHead": "25bff486fb56b1d13d79a23562854849559acb3f"
91
91
  }
package/pages/404/404.css CHANGED
@@ -5,12 +5,12 @@
5
5
  }
6
6
 
7
7
  .ws-404-card-header {
8
- padding: var(--pf-v5-global--spacer--lg);
8
+ padding: var(--pf-v6-global--spacer--lg);
9
9
  }
10
10
 
11
11
  div.ws-404-button-wrapper {
12
12
  width: 100%;
13
13
  display: flex;
14
14
  justify-content: center;
15
- padding: var(--pf-v5-global--spacer--xl);
15
+ padding: var(--pf-v6-global--spacer--xl);
16
16
  }
package/pages/404/index.js CHANGED
@@ -73,7 +73,7 @@ const Page404 = () => {
73
73
  <Title headingLevel="h1" size="2xl">
74
74
  404: That page no longer exists
75
75
  </Title>
76
- <p style={{ marginTop: 'var(--pf-v5-global--spacer--sm)' }}>
76
+ <p style={{ marginTop: 'var(--pf-v6-global--spacer--sm)' }}>
77
77
  Another page might have the information you need, so try searching PatternFly.
78
78
  </p>
79
79
  <EmptyStateBody>
package/pages/global-css-variables.md CHANGED
@@ -16,7 +16,7 @@ Global variables define and enforce global style elements (like values for color
16
16
 
17
17
  Global variables follow this formula:
18
18
 
19
- `--pf-v5-global--concept--PropertyCamelCase--modifier--state`
19
+ `--pf-v6-global--concept--PropertyCamelCase--modifier--state`
20
20
 
21
21
  Where...
22
22
 
@@ -30,8 +30,8 @@ Example:
30
30
  ```css
31
31
  :root {
32
32
  /* Default & hovered link colors */
33
- --pf-v5-global--link--Color: #06c;
34
- --pf-v5-global--link--Color--hover: #004080;
33
+ --pf-v6-global--link--Color: #06c;
34
+ --pf-v6-global--link--Color--hover: #004080;
35
35
  }
36
36
  ```
37
37
 
@@ -44,33 +44,33 @@ Component variables are used to define custom properties at the component-level.
44
44
 
45
45
  Component variables follow this formula:
46
46
 
47
- `--pf-v5-c-block__element--modifier--state--breakpoint--['child'|tag|c-component]pseudo-element--PropertyCamelCase`
47
+ `--pf-v6-c-block__element--modifier--state--breakpoint--['child'|tag|c-component]pseudo-element--PropertyCamelCase`
48
48
 
49
49
  Where...
50
50
 
51
- - `pf-v5-c-block` refers to the block, usually the component or layout name, like `pf-v5-c-alert`.
51
+ - `pf-v6-c-block` refers to the block, usually the component or layout name, like `pf-v6-c-alert`.
52
52
  - `__element` refers to the element inside of the block, like `__title`.
53
53
  - `modifier` is prefixed with`-m` and refers to a modifier class such as `.pf-m-danger`.
54
54
  - `state` is something like `hover` or `active`.
55
- - `breakpoint` is a media query breakpoint such as `sm` for `$pf-v5-global--breakpoint--xs`.
55
+ - `breakpoint` is a media query breakpoint such as `sm` for `$pf-v6-global--breakpoint--xs`.
56
56
  - `pseudo-element` is either `before` or `after`.
57
57
  - `child`, `tag`, or `c-component` refers to a child element. It could be a tag or component name, like `svg` or `c-menu`, or it could use `child` to refer to any child element. If any modifiers, states, breakpoints, or pseudo-elements are on the child, include those after this portion of the name.
58
58
 
59
59
  Example:
60
60
  - Note: component variables are scoped to the top-level component selector
61
61
  ```css
62
- .pf-v5-c-button {
62
+ .pf-v6-c-button {
63
63
  /* Default, primary, and primary hovered button background colors */
64
- --pf-v5-c-button--BackgroundColor: transparent;
65
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--100);
66
- --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--pf-v5-global--primary-color--200);
64
+ --pf-v6-c-button--BackgroundColor: transparent;
65
+ --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-global--primary-color--100);
66
+ --pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-v6-global--primary-color--200);
67
67
  }
68
68
  ```
69
69
 
70
70
  <br/>
71
71
  Component variables are listed at the bottom of each component page (for example, [button css variables](/components/button#css-variables)).
72
72
 
73
- Note that all component variables are declared at the top component level (for example, `.pf-v5-c-button`). The component variable table linked above also shows all usages of each variable and the values they evaluate to in each case - expand any component variable row to view the global variable it is mapped to.
73
+ Note that all component variables are declared at the top component level (for example, `.pf-v6-c-button`). The component variable table linked above also shows all usages of each variable and the values they evaluate to in each case - expand any component variable row to view the global variable it is mapped to.
74
74
 
75
75
  ![Component variable mapping](./img/component-variable-mapping.png)
76
76
 
@@ -78,25 +78,25 @@ Note that all component variables are declared at the top component level (for e
78
78
 
79
79
  PatternFly defines a number of standard breakpoints. These are always used as a `min-width` breakpoint; i.e. using the `-md` breakpoint would apply to everything at the `-md` width and wider. (There is one exception to this, which is in the responsive behavior of the [table component](/components/table).)
80
80
 
81
- Breakpoint suffixes are used in utility classes and layouts as well as in many components as a way to apply class styles at a specified breakpoint. When available, `{-on-[breakpoint]}` will be shown as an available suffix for the class in the usage section of the documentation. The breakpoint suffix is optional and if not specified, the base class will be used. There are breakpoints for `sm`, `md`, `lg`, `xl`, and `2xl`, and the values for the corresponding breakpoints are defined below in the global variables `—pf-v5-global—breakpoint—[breakpoint]`.
81
+ Breakpoint suffixes are used in utility classes and layouts as well as in many components as a way to apply class styles at a specified breakpoint. When available, `{-on-[breakpoint]}` will be shown as an available suffix for the class in the usage section of the documentation. The breakpoint suffix is optional and if not specified, the base class will be used. There are breakpoints for `sm`, `md`, `lg`, `xl`, and `2xl`, and the values for the corresponding breakpoints are defined below in the global variables `—pf-v6-global—breakpoint—[breakpoint]`.
82
82
 
83
83
  ### Using the variable system
84
84
 
85
85
  PatternFly 4 styles provide a default starting point. You can use the variable system to make adjustments to that default styling. When you change one or more elements, you should package those values into a new SCSS stylesheet to replace the default styling.
86
86
 
87
- Overrides to PatternFly variables should be made at the `:root` level for global variables or at the top-level component selector for component variables (for example, `.pf-v5-c-button`), as these overrides will cascade down to children elements accordingly.
87
+ Overrides to PatternFly variables should be made at the `:root` level for global variables or at the top-level component selector for component variables (for example, `.pf-v6-c-button`), as these overrides will cascade down to children elements accordingly.
88
88
 
89
89
  Example:
90
90
  - Change the global primary color to red, but keep the original primary blue color as the background for primary buttons.
91
91
  ```css
92
92
  /* Override global primary color 100 to red */
93
93
  :root {
94
- --pf-v5-global--primary-color--100: var(--pf-v5-global--palette--red-400);
94
+ --pf-v6-global--primary-color--100: var(--pf-v6-global--palette--red-400);
95
95
  }
96
96
 
97
97
  /* Override the above override for only the primary button background color */
98
- .pf-v5-c-button {
99
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--palette--blue-400);
98
+ .pf-v6-c-button {
99
+ --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-v6-global--palette--blue-400);
100
100
  }
101
101
  ```
102
102
 
package/scripts/writeScreenshots.js CHANGED
@@ -11,7 +11,7 @@ sharp.cache(false);
11
11
  async function writeScreenshot({ page, data: { url, urlPrefix } }) {
12
12
  await page.goto(url);
13
13
  await page.addStyleTag({content: '*,*::before,*::after{animation-delay:-1ms !important;animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:0s !important;transition-delay:0s !important;}'}); // disable animations/transitions so they don't interfere with screenshot tool
14
- await page.waitForSelector('.pf-v5-u-h-100');
14
+ await page.waitForSelector('.pf-v6-u-h-100');
15
15
  const outfile = path.join(
16
16
  screenshotBase,
17
17
  url.replace(`${urlPrefix}/`, '') + '.png'
package/templates/mdx.css CHANGED
@@ -5,49 +5,49 @@
5
5
  }
6
6
 
7
7
  .ws-release-notes-toc {
8
- margin-bottom: var(--pf-v5-global--spacer--lg);
8
+ margin-bottom: var(--pf-v6-global--spacer--lg);
9
9
  }
10
10
 
11
- .ws-release-notes-toc .pf-v5-c-card {
11
+ .ws-release-notes-toc .pf-v6-c-card {
12
12
  height: 100%;
13
13
  }
14
14
 
15
- .ws-release-notes-toc .pf-v5-c-card__title {
16
- padding-bottom: var(--pf-v5-global--spacer--xs);
15
+ .ws-release-notes-toc .pf-v6-c-card__title {
16
+ padding-bottom: var(--pf-v6-global--spacer--xs);
17
17
  }
18
18
 
19
- .ws-release-notes-toc .pf-v5-c-card__title .pf-v5-c-title {
19
+ .ws-release-notes-toc .pf-v6-c-card__title .pf-v6-c-title {
20
20
  display: inline;
21
21
  }
22
22
 
23
- .ws-release-notes-toc .pf-v5-c-card__title a {
24
- margin-right: var(--pf-v5-global--spacer--sm);
23
+ .ws-release-notes-toc .pf-v6-c-card__title a {
24
+ margin-right: var(--pf-v6-global--spacer--sm);
25
25
  }
26
26
 
27
- .ws-release-notes-toc .pf-v5-c-card__title .pf-v5-c-badge {
27
+ .ws-release-notes-toc .pf-v6-c-card__title .pf-v6-c-badge {
28
28
  vertical-align: text-top;
29
29
  }
30
30
 
31
- .ws-release-notes-toc .pf-v5-c-card__body {
31
+ .ws-release-notes-toc .pf-v6-c-card__body {
32
32
  color: #72767B;
33
- font-family: var(--pf-v5-global--FontFamily--text);
34
- font-size: var(--pf-v5-global--FontSize--md);
33
+ font-family: var(--pf-v6-global--FontFamily--text);
34
+ font-size: var(--pf-v6-global--FontSize--md);
35
35
  font-weight: 400;
36
36
  line-height: 1.5;
37
37
  }
38
38
 
39
39
  .ws-code {
40
40
  display: inline-block;
41
- background-color: var(--pf-v5-global--BackgroundColor--100);
42
- padding: 1px var(--pf-v5-global--spacer--sm);
43
- border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--300);
41
+ background-color: var(--pf-v6-global--BackgroundColor--100);
42
+ padding: 1px var(--pf-v6-global--spacer--sm);
43
+ border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--BorderColor--300);
44
44
  white-space: pre-wrap;
45
- font-size: var(--pf-v5-global--FontSize--sm);
46
- font-family: var(--pf-v5-global--FontFamily--monospace);
45
+ font-size: var(--pf-v6-global--FontSize--sm);
46
+ font-family: var(--pf-v6-global--FontFamily--monospace);
47
47
  }
48
48
 
49
49
  .ws-p + .ws-code {
50
- margin-bottom: var(--pf-v5-c-content--MarginBottom);
50
+ margin-bottom: var(--pf-v6-c-content--MarginBottom);
51
51
  }
52
52
 
53
53
  /* Table styles */
@@ -78,86 +78,86 @@
78
78
  }
79
79
 
80
80
  /*
81
- * Copied from pf-v5-c-content.
81
+ * Copied from pf-v6-c-content.
82
82
  */
83
83
  :root {
84
- --pf-v5-c-content--MarginBottom: var(--pf-v5-global--spacer--md);
85
- --pf-v5-c-content--LineHeight: var(--pf-v5-global--LineHeight--md);
86
- --pf-v5-c-content--FontSize: var(--pf-v5-global--FontSize--md);
87
- --pf-v5-c-content--FontWeight: var(--pf-v5-global--FontWeight--normal);
88
- --pf-v5-c-content--Color: var(--pf-v5-global--Color--100);
89
- --pf-v5-c-content--heading--FontFamily: var(--pf-v5-global--FontFamily--heading);
90
- --pf-v5-c-content--h1--MarginTop: var(--pf-v5-global--spacer--lg);
91
- --pf-v5-c-content--h1--MarginBottom: var(--pf-v5-global--spacer--sm);
92
- --pf-v5-c-content--h1--LineHeight: var(--pf-v5-global--LineHeight--sm);
93
- --pf-v5-c-content--h1--FontSize: var(--pf-v5-global--FontSize--2xl);
94
- --pf-v5-c-content--h1--FontWeight: var(--pf-v5-global--FontWeight--normal);
95
- --pf-v5-c-content--h2--MarginTop: var(--pf-v5-global--spacer--lg);
96
- --pf-v5-c-content--h2--MarginBottom: var(--pf-v5-global--spacer--sm);
97
- --pf-v5-c-content--h2--LineHeight: var(--pf-v5-global--LineHeight--sm);
98
- --pf-v5-c-content--h2--FontSize: var(--pf-v5-global--FontSize--xl);
99
- --pf-v5-c-content--h2--FontWeight: var(--pf-v5-global--FontWeight--normal);
100
- --pf-v5-c-content--h3--MarginTop: var(--pf-v5-global--spacer--lg);
101
- --pf-v5-c-content--h3--MarginBottom: var(--pf-v5-global--spacer--sm);
102
- --pf-v5-c-content--h3--LineHeight: var(--pf-v5-global--LineHeight--md);
103
- --pf-v5-c-content--h3--FontSize: var(--pf-v5-global--FontSize--lg);
104
- --pf-v5-c-content--h3--FontWeight: var(--pf-v5-global--FontWeight--normal);
105
- --pf-v5-c-content--h4--MarginTop: var(--pf-v5-global--spacer--lg);
106
- --pf-v5-c-content--h4--MarginBottom: var(--pf-v5-global--spacer--sm);
107
- --pf-v5-c-content--h4--LineHeight: var(--pf-v5-global--LineHeight--md);
108
- --pf-v5-c-content--h4--FontSize: var(--pf-v5-global--FontSize--md);
109
- --pf-v5-c-content--h4--FontWeight: var(--pf-v5-global--FontWeight--semi-bold);
110
- --pf-v5-c-content--h5--MarginTop: var(--pf-v5-global--spacer--lg);
111
- --pf-v5-c-content--h5--MarginBottom: var(--pf-v5-global--spacer--sm);
112
- --pf-v5-c-content--h5--LineHeight: var(--pf-v5-global--LineHeight--md);
113
- --pf-v5-c-content--h5--FontSize: var(--pf-v5-global--FontSize--md);
114
- --pf-v5-c-content--h5--FontWeight: var(--pf-v5-global--FontWeight--semi-bold);
115
- --pf-v5-c-content--h6--MarginTop: var(--pf-v5-global--spacer--lg);
116
- --pf-v5-c-content--h6--MarginBottom: var(--pf-v5-global--spacer--sm);
117
- --pf-v5-c-content--h6--LineHeight: var(--pf-v5-global--LineHeight--md);
118
- --pf-v5-c-content--h6--FontSize: var(--pf-v5-global--FontSize--md);
119
- --pf-v5-c-content--h6--FontWeight: var(--pf-v5-global--FontWeight--semi-bold);
120
- --pf-v5-c-content--small--MarginBottom: var(--pf-v5-global--spacer--md);
121
- --pf-v5-c-content--small--LineHeight: var(--pf-v5-global--LineHeight--md);
122
- --pf-v5-c-content--small--FontSize: var(--pf-v5-global--FontSize--sm);
123
- --pf-v5-c-content--small--Color: var(--pf-v5-global--Color--200);
124
- --pf-v5-c-content--small--FontWeight: var(--pf-v5-global--FontWeight--semi-bold);
125
- --pf-v5-c-content--a--Color: var(--pf-v5-global--link--Color);
126
- --pf-v5-c-content--a--TextDecoration: var(--pf-v5-global--link--TextDecoration);
127
- --pf-v5-c-content--a--hover--Color: var(--pf-v5-global--link--Color--hover);
128
- --pf-v5-c-content--a--hover--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
129
- --pf-v5-c-content--blockquote--PaddingTop: var(--pf-v5-global--spacer--md);
130
- --pf-v5-c-content--blockquote--PaddingRight: var(--pf-v5-global--spacer--md);
131
- --pf-v5-c-content--blockquote--PaddingBottom: var(--pf-v5-global--spacer--md);
132
- --pf-v5-c-content--blockquote--PaddingLeft: var(--pf-v5-global--spacer--md);
133
- --pf-v5-c-content--blockquote--FontWeight: var(--pf-v5-global--FontWeight--light);
134
- --pf-v5-c-content--blockquote--Color: var(--pf-v5-global--Color--200);
135
- --pf-v5-c-content--blockquote--BorderLeftColor: var(--pf-v5-global--BorderColor--100);
136
- --pf-v5-c-content--blockquote--BorderLeftWidth: var(--pf-v5-global--BorderWidth--lg);
137
- --pf-v5-c-content--ol--PaddingLeft: var(--pf-v5-global--spacer--lg);
138
- --pf-v5-c-content--ol--MarginTop: var(--pf-v5-global--spacer--md);
139
- --pf-v5-c-content--ol--MarginLeft: var(--pf-v5-global--spacer--lg);
140
- --pf-v5-c-content--ol--nested--MarginTop: var(--pf-v5-global--spacer--sm);
141
- --pf-v5-c-content--ol--nested--MarginLeft: var(--pf-v5-global--spacer--sm);
142
- --pf-v5-c-content--ul--PaddingLeft: var(--pf-v5-global--spacer--lg);
143
- --pf-v5-c-content--ul--MarginTop: var(--pf-v5-global--spacer--md);
144
- --pf-v5-c-content--ul--MarginLeft: var(--pf-v5-global--spacer--lg);
145
- --pf-v5-c-content--ul--nested--MarginTop: var(--pf-v5-global--spacer--sm);
146
- --pf-v5-c-content--ul--nested--MarginLeft: var(--pf-v5-global--spacer--sm);
147
- --pf-v5-c-content--ul--ListStyle: var(--pf-v5-global--ListStyle);
148
- --pf-v5-c-content--li--MarginTop: var(--pf-v5-global--spacer--sm);
149
- --pf-v5-c-content--dl--ColumnGap: var(--pf-v5-global--spacer--2xl);
150
- --pf-v5-c-content--dl--RowGap: var(--pf-v5-global--spacer--md);
151
- --pf-v5-c-content--dt--FontWeight: var(--pf-v5-global--FontWeight--semi-bold);
152
- --pf-v5-c-content--dt--MarginTop: var(--pf-v5-global--spacer--md);
153
- --pf-v5-c-content--dt--sm--MarginTop: 0;
154
- --pf-v5-c-content--hr--Height: var(--pf-v5-global--BorderWidth--sm);
155
- --pf-v5-c-content--hr--BackgroundColor: var(--pf-v5-global--BorderColor--100);
156
- font-size: var(--pf-v5-c-content--FontSize);
157
- line-height: var(--pf-v5-c-content--LineHeight);
158
- color: var(--pf-v5-c-content--Color); }
84
+ --pf-v6-c-content--MarginBottom: var(--pf-v6-global--spacer--md);
85
+ --pf-v6-c-content--LineHeight: var(--pf-v6-global--LineHeight--md);
86
+ --pf-v6-c-content--FontSize: var(--pf-v6-global--FontSize--md);
87
+ --pf-v6-c-content--FontWeight: var(--pf-v6-global--FontWeight--normal);
88
+ --pf-v6-c-content--Color: var(--pf-v6-global--Color--100);
89
+ --pf-v6-c-content--heading--FontFamily: var(--pf-v6-global--FontFamily--heading);
90
+ --pf-v6-c-content--h1--MarginTop: var(--pf-v6-global--spacer--lg);
91
+ --pf-v6-c-content--h1--MarginBottom: var(--pf-v6-global--spacer--sm);
92
+ --pf-v6-c-content--h1--LineHeight: var(--pf-v6-global--LineHeight--sm);
93
+ --pf-v6-c-content--h1--FontSize: var(--pf-v6-global--FontSize--2xl);
94
+ --pf-v6-c-content--h1--FontWeight: var(--pf-v6-global--FontWeight--normal);
95
+ --pf-v6-c-content--h2--MarginTop: var(--pf-v6-global--spacer--lg);
96
+ --pf-v6-c-content--h2--MarginBottom: var(--pf-v6-global--spacer--sm);
97
+ --pf-v6-c-content--h2--LineHeight: var(--pf-v6-global--LineHeight--sm);
98
+ --pf-v6-c-content--h2--FontSize: var(--pf-v6-global--FontSize--xl);
99
+ --pf-v6-c-content--h2--FontWeight: var(--pf-v6-global--FontWeight--normal);
100
+ --pf-v6-c-content--h3--MarginTop: var(--pf-v6-global--spacer--lg);
101
+ --pf-v6-c-content--h3--MarginBottom: var(--pf-v6-global--spacer--sm);
102
+ --pf-v6-c-content--h3--LineHeight: var(--pf-v6-global--LineHeight--md);
103
+ --pf-v6-c-content--h3--FontSize: var(--pf-v6-global--FontSize--lg);
104
+ --pf-v6-c-content--h3--FontWeight: var(--pf-v6-global--FontWeight--normal);
105
+ --pf-v6-c-content--h4--MarginTop: var(--pf-v6-global--spacer--lg);
106
+ --pf-v6-c-content--h4--MarginBottom: var(--pf-v6-global--spacer--sm);
107
+ --pf-v6-c-content--h4--LineHeight: var(--pf-v6-global--LineHeight--md);
108
+ --pf-v6-c-content--h4--FontSize: var(--pf-v6-global--FontSize--md);
109
+ --pf-v6-c-content--h4--FontWeight: var(--pf-v6-global--FontWeight--semi-bold);
110
+ --pf-v6-c-content--h5--MarginTop: var(--pf-v6-global--spacer--lg);
111
+ --pf-v6-c-content--h5--MarginBottom: var(--pf-v6-global--spacer--sm);
112
+ --pf-v6-c-content--h5--LineHeight: var(--pf-v6-global--LineHeight--md);
113
+ --pf-v6-c-content--h5--FontSize: var(--pf-v6-global--FontSize--md);
114
+ --pf-v6-c-content--h5--FontWeight: var(--pf-v6-global--FontWeight--semi-bold);
115
+ --pf-v6-c-content--h6--MarginTop: var(--pf-v6-global--spacer--lg);
116
+ --pf-v6-c-content--h6--MarginBottom: var(--pf-v6-global--spacer--sm);
117
+ --pf-v6-c-content--h6--LineHeight: var(--pf-v6-global--LineHeight--md);
118
+ --pf-v6-c-content--h6--FontSize: var(--pf-v6-global--FontSize--md);
119
+ --pf-v6-c-content--h6--FontWeight: var(--pf-v6-global--FontWeight--semi-bold);
120
+ --pf-v6-c-content--small--MarginBottom: var(--pf-v6-global--spacer--md);
121
+ --pf-v6-c-content--small--LineHeight: var(--pf-v6-global--LineHeight--md);
122
+ --pf-v6-c-content--small--FontSize: var(--pf-v6-global--FontSize--sm);
123
+ --pf-v6-c-content--small--Color: var(--pf-v6-global--Color--200);
124
+ --pf-v6-c-content--small--FontWeight: var(--pf-v6-global--FontWeight--semi-bold);
125
+ --pf-v6-c-content--a--Color: var(--pf-v6-global--link--Color);
126
+ --pf-v6-c-content--a--TextDecoration: var(--pf-v6-global--link--TextDecoration);
127
+ --pf-v6-c-content--a--hover--Color: var(--pf-v6-global--link--Color--hover);
128
+ --pf-v6-c-content--a--hover--TextDecoration: var(--pf-v6-global--link--TextDecoration--hover);
129
+ --pf-v6-c-content--blockquote--PaddingTop: var(--pf-v6-global--spacer--md);
130
+ --pf-v6-c-content--blockquote--PaddingRight: var(--pf-v6-global--spacer--md);
131
+ --pf-v6-c-content--blockquote--PaddingBottom: var(--pf-v6-global--spacer--md);
132
+ --pf-v6-c-content--blockquote--PaddingLeft: var(--pf-v6-global--spacer--md);
133
+ --pf-v6-c-content--blockquote--FontWeight: var(--pf-v6-global--FontWeight--light);
134
+ --pf-v6-c-content--blockquote--Color: var(--pf-v6-global--Color--200);
135
+ --pf-v6-c-content--blockquote--BorderLeftColor: var(--pf-v6-global--BorderColor--100);
136
+ --pf-v6-c-content--blockquote--BorderLeftWidth: var(--pf-v6-global--BorderWidth--lg);
137
+ --pf-v6-c-content--ol--PaddingLeft: var(--pf-v6-global--spacer--lg);
138
+ --pf-v6-c-content--ol--MarginTop: var(--pf-v6-global--spacer--md);
139
+ --pf-v6-c-content--ol--MarginLeft: var(--pf-v6-global--spacer--lg);
140
+ --pf-v6-c-content--ol--nested--MarginTop: var(--pf-v6-global--spacer--sm);
141
+ --pf-v6-c-content--ol--nested--MarginLeft: var(--pf-v6-global--spacer--sm);
142
+ --pf-v6-c-content--ul--PaddingLeft: var(--pf-v6-global--spacer--lg);
143
+ --pf-v6-c-content--ul--MarginTop: var(--pf-v6-global--spacer--md);
144
+ --pf-v6-c-content--ul--MarginLeft: var(--pf-v6-global--spacer--lg);
145
+ --pf-v6-c-content--ul--nested--MarginTop: var(--pf-v6-global--spacer--sm);
146
+ --pf-v6-c-content--ul--nested--MarginLeft: var(--pf-v6-global--spacer--sm);
147
+ --pf-v6-c-content--ul--ListStyle: var(--pf-v6-global--ListStyle);
148
+ --pf-v6-c-content--li--MarginTop: var(--pf-v6-global--spacer--sm);
149
+ --pf-v6-c-content--dl--ColumnGap: var(--pf-v6-global--spacer--2xl);
150
+ --pf-v6-c-content--dl--RowGap: var(--pf-v6-global--spacer--md);
151
+ --pf-v6-c-content--dt--FontWeight: var(--pf-v6-global--FontWeight--semi-bold);
152
+ --pf-v6-c-content--dt--MarginTop: var(--pf-v6-global--spacer--md);
153
+ --pf-v6-c-content--dt--sm--MarginTop: 0;
154
+ --pf-v6-c-content--hr--Height: var(--pf-v6-global--BorderWidth--sm);
155
+ --pf-v6-c-content--hr--BackgroundColor: var(--pf-v6-global--BorderColor--100);
156
+ font-size: var(--pf-v6-c-content--FontSize);
157
+ line-height: var(--pf-v6-c-content--LineHeight);
158
+ color: var(--pf-v6-c-content--Color); }
159
159
  .ws-li + li {
160
- margin-top: var(--pf-v5-c-content--li--MarginTop); }
160
+ margin-top: var(--pf-v6-c-content--li--MarginTop); }
161
161
  .ws-p:not(:last-child),
162
162
  .ws-dl:not(:last-child),
163
163
  .ws-ol:not(:last-child),
@@ -168,7 +168,7 @@
168
168
  .ws-hr:not(:last-child),
169
169
  .ws-table:not(:last-child),
170
170
  .ws-content-table:not(:last-child) {
171
- margin-bottom: var(--pf-v5-c-content--MarginBottom); }
171
+ margin-bottom: var(--pf-v6-c-content--MarginBottom); }
172
172
  .ws-h1,
173
173
  .ws-h2,
174
174
  .ws-h3,
@@ -176,103 +176,103 @@
176
176
  .ws-h5,
177
177
  .ws-h6 {
178
178
  margin: 0;
179
- font-family: var(--pf-v5-c-content--heading--FontFamily); }
179
+ font-family: var(--pf-v6-c-content--heading--FontFamily); }
180
180
  .ws-ol,
181
181
  .ws-ul {
182
182
  margin: 0; }
183
183
  .ws-h1 {
184
- margin-bottom: var(--pf-v5-c-content--h1--MarginBottom);
185
- font-size: var(--pf-v5-c-content--h1--FontSize);
186
- font-weight: var(--pf-v5-c-content--h1--FontWeight);
187
- line-height: var(--pf-v5-c-content--h1--LineHeight); }
184
+ margin-bottom: var(--pf-v6-c-content--h1--MarginBottom);
185
+ font-size: var(--pf-v6-c-content--h1--FontSize);
186
+ font-weight: var(--pf-v6-c-content--h1--FontWeight);
187
+ line-height: var(--pf-v6-c-content--h1--LineHeight); }
188
188
  .ws-h1:not(:first-child) {
189
- margin-top: var(--pf-v5-c-content--h1--MarginTop); }
189
+ margin-top: var(--pf-v6-c-content--h1--MarginTop); }
190
190
  .ws-h2 {
191
- margin-bottom: var(--pf-v5-c-content--h2--MarginBottom);
192
- font-size: var(--pf-v5-c-content--h2--FontSize);
193
- font-weight: var(--pf-v5-c-content--h2--FontWeight);
194
- line-height: var(--pf-v5-c-content--h2--LineHeight);
195
- margin-top: var(--pf-v5-c-content--h2--MarginTop); }
191
+ margin-bottom: var(--pf-v6-c-content--h2--MarginBottom);
192
+ font-size: var(--pf-v6-c-content--h2--FontSize);
193
+ font-weight: var(--pf-v6-c-content--h2--FontWeight);
194
+ line-height: var(--pf-v6-c-content--h2--LineHeight);
195
+ margin-top: var(--pf-v6-c-content--h2--MarginTop); }
196
196
  .ws-h3 {
197
- margin-bottom: var(--pf-v5-c-content--h3--MarginBottom);
198
- font-size: var(--pf-v5-c-content--h3--FontSize);
199
- font-weight: var(--pf-v5-c-content--h3--FontWeight);
200
- line-height: var(--pf-v5-c-content--h3--LineHeight); }
197
+ margin-bottom: var(--pf-v6-c-content--h3--MarginBottom);
198
+ font-size: var(--pf-v6-c-content--h3--FontSize);
199
+ font-weight: var(--pf-v6-c-content--h3--FontWeight);
200
+ line-height: var(--pf-v6-c-content--h3--LineHeight); }
201
201
  .ws-h3:not(:first-child) {
202
- margin-top: var(--pf-v5-c-content--h3--MarginTop); }
202
+ margin-top: var(--pf-v6-c-content--h3--MarginTop); }
203
203
  .ws-h4 {
204
- margin-bottom: var(--pf-v5-c-content--h4--MarginBottom);
205
- font-size: var(--pf-v5-c-content--h4--FontSize);
206
- font-weight: var(--pf-v5-c-content--h4--FontWeight);
207
- line-height: var(--pf-v5-c-content--h4--LineHeight); }
204
+ margin-bottom: var(--pf-v6-c-content--h4--MarginBottom);
205
+ font-size: var(--pf-v6-c-content--h4--FontSize);
206
+ font-weight: var(--pf-v6-c-content--h4--FontWeight);
207
+ line-height: var(--pf-v6-c-content--h4--LineHeight); }
208
208
  .ws-h4:not(:first-child) {
209
- margin-top: var(--pf-v5-c-content--h4--MarginTop); }
209
+ margin-top: var(--pf-v6-c-content--h4--MarginTop); }
210
210
  .ws-h5 {
211
- margin-bottom: var(--pf-v5-c-content--h5--MarginBottom);
212
- font-size: var(--pf-v5-c-content--h5--FontSize);
213
- font-weight: var(--pf-v5-c-content--h5--FontWeight);
214
- line-height: var(--pf-v5-c-content--h5--LineHeight); }
211
+ margin-bottom: var(--pf-v6-c-content--h5--MarginBottom);
212
+ font-size: var(--pf-v6-c-content--h5--FontSize);
213
+ font-weight: var(--pf-v6-c-content--h5--FontWeight);
214
+ line-height: var(--pf-v6-c-content--h5--LineHeight); }
215
215
  .ws-h5:not(:first-child) {
216
- margin-top: var(--pf-v5-c-content--h5--MarginTop); }
216
+ margin-top: var(--pf-v6-c-content--h5--MarginTop); }
217
217
  .ws-h6 {
218
- margin-bottom: var(--pf-v5-c-content--h6--MarginBottom);
219
- font-size: var(--pf-v5-c-content--h6--FontSize);
220
- font-weight: var(--pf-v5-c-content--h6--FontWeight);
221
- line-height: var(--pf-v5-c-content--h6--LineHeight); }
218
+ margin-bottom: var(--pf-v6-c-content--h6--MarginBottom);
219
+ font-size: var(--pf-v6-c-content--h6--FontSize);
220
+ font-weight: var(--pf-v6-c-content--h6--FontWeight);
221
+ line-height: var(--pf-v6-c-content--h6--LineHeight); }
222
222
  .ws-h6:not(:first-child) {
223
- margin-top: var(--pf-v5-c-content--h6--MarginTop); }
223
+ margin-top: var(--pf-v6-c-content--h6--MarginTop); }
224
224
  .ws-small {
225
225
  display: block;
226
- font-size: var(--pf-v5-c-content--small--FontSize);
227
- line-height: var(--pf-v5-c-content--small--LineHeight);
228
- color: var(--pf-v5-c-content--small--Color); }
226
+ font-size: var(--pf-v6-c-content--small--FontSize);
227
+ line-height: var(--pf-v6-c-content--small--LineHeight);
228
+ color: var(--pf-v6-c-content--small--Color); }
229
229
  .ws-small:not(:last-child) {
230
- margin-bottom: var(--pf-v5-c-content--small--MarginBottom); }
230
+ margin-bottom: var(--pf-v6-c-content--small--MarginBottom); }
231
231
  .ws-blockquote {
232
- padding: var(--pf-v5-c-content--blockquote--PaddingTop) var(--pf-v5-c-content--blockquote--PaddingRight) var(--pf-v5-c-content--blockquote--PaddingBottom) var(--pf-v5-c-content--blockquote--PaddingLeft);
233
- font-weight: var(--pf-v5-c-content--blockquote--FontWeight);
234
- color: var(--pf-v5-c-content--blockquote--Color);
235
- border-left: var(--pf-v5-c-content--blockquote--BorderLeftWidth) solid var(--pf-v5-c-content--blockquote--BorderLeftColor); }
232
+ padding: var(--pf-v6-c-content--blockquote--PaddingTop) var(--pf-v6-c-content--blockquote--PaddingRight) var(--pf-v6-c-content--blockquote--PaddingBottom) var(--pf-v6-c-content--blockquote--PaddingLeft);
233
+ font-weight: var(--pf-v6-c-content--blockquote--FontWeight);
234
+ color: var(--pf-v6-c-content--blockquote--Color);
235
+ border-left: var(--pf-v6-c-content--blockquote--BorderLeftWidth) solid var(--pf-v6-c-content--blockquote--BorderLeftColor); }
236
236
  .ws-hr {
237
- height: var(--pf-v5-c-content--hr--Height);
238
- background-color: var(--pf-v5-c-content--hr--BackgroundColor);
237
+ height: var(--pf-v6-c-content--hr--Height);
238
+ background-color: var(--pf-v6-c-content--hr--BackgroundColor);
239
239
  border: none; }
240
240
  .ws-ol {
241
- padding-left: var(--pf-v5-c-content--ol--PaddingLeft);
242
- margin-top: var(--pf-v5-c-content--ol--MarginTop);
243
- margin-left: var(--pf-v5-c-content--ol--MarginLeft); }
241
+ padding-left: var(--pf-v6-c-content--ol--PaddingLeft);
242
+ margin-top: var(--pf-v6-c-content--ol--MarginTop);
243
+ margin-left: var(--pf-v6-c-content--ol--MarginLeft); }
244
244
  .ws-ol ul {
245
- --pf-v5-c-content--ul--MarginTop: var(--pf-v5-c-content--ul--nested--MarginTop);
246
- --pf-v5-c-content--ul--MarginLeft: var(--pf-v5-c-content--ul--nested--MarginLeft); }
245
+ --pf-v6-c-content--ul--MarginTop: var(--pf-v6-c-content--ul--nested--MarginTop);
246
+ --pf-v6-c-content--ul--MarginLeft: var(--pf-v6-c-content--ul--nested--MarginLeft); }
247
247
  .ws-ol ol {
248
- --pf-v5-c-content--ol--MarginTop: var(--pf-v5-c-content--ol--nested--MarginTop);
249
- --pf-v5-c-content--ol--MarginLeft: var(--pf-v5-c-content--ol--nested--MarginLeft); }
248
+ --pf-v6-c-content--ol--MarginTop: var(--pf-v6-c-content--ol--nested--MarginTop);
249
+ --pf-v6-c-content--ol--MarginLeft: var(--pf-v6-c-content--ol--nested--MarginLeft); }
250
250
  .ws-ul {
251
- padding-left: var(--pf-v5-c-content--ul--PaddingLeft);
252
- margin-top: var(--pf-v5-c-content--ul--MarginTop);
253
- margin-left: var(--pf-v5-c-content--ul--MarginLeft);
254
- list-style: var(--pf-v5-c-content--ul--ListStyle); }
251
+ padding-left: var(--pf-v6-c-content--ul--PaddingLeft);
252
+ margin-top: var(--pf-v6-c-content--ul--MarginTop);
253
+ margin-left: var(--pf-v6-c-content--ul--MarginLeft);
254
+ list-style: var(--pf-v6-c-content--ul--ListStyle); }
255
255
  .ws-ul ul {
256
- --pf-v5-c-content--ul--MarginTop: var(--pf-v5-c-content--ul--nested--MarginTop);
257
- --pf-v5-c-content--ul--MarginLeft: var(--pf-v5-c-content--ul--nested--MarginLeft); }
256
+ --pf-v6-c-content--ul--MarginTop: var(--pf-v6-c-content--ul--nested--MarginTop);
257
+ --pf-v6-c-content--ul--MarginLeft: var(--pf-v6-c-content--ul--nested--MarginLeft); }
258
258
  .ws-ul ol {
259
- --pf-v5-c-content--ol--MarginTop: var(--pf-v5-c-content--ol--nested--MarginTop);
260
- --pf-v5-c-content--ol--MarginLeft: var(--pf-v5-c-content--ol--nested--MarginLeft); }
259
+ --pf-v6-c-content--ol--MarginTop: var(--pf-v6-c-content--ol--nested--MarginTop);
260
+ --pf-v6-c-content--ol--MarginLeft: var(--pf-v6-c-content--ol--nested--MarginLeft); }
261
261
  .ws-dl {
262
262
  display: grid;
263
263
  grid-template-columns: 1fr; }
264
264
  @media screen and (min-width: 576px) {
265
265
  .ws-dl {
266
266
  grid-template: auto / auto 1fr;
267
- grid-column-gap: var(--pf-v5-c-content--dl--ColumnGap);
268
- grid-row-gap: var(--pf-v5-c-content--dl--RowGap); } }
267
+ grid-column-gap: var(--pf-v6-c-content--dl--ColumnGap);
268
+ grid-row-gap: var(--pf-v6-c-content--dl--RowGap); } }
269
269
  .ws-dt {
270
- font-weight: var(--pf-v5-c-content--dt--FontWeight); }
270
+ font-weight: var(--pf-v6-c-content--dt--FontWeight); }
271
271
  .ws-dt:not(:first-child) {
272
- margin-top: var(--pf-v5-c-content--dt--MarginTop); }
272
+ margin-top: var(--pf-v6-c-content--dt--MarginTop); }
273
273
  @media screen and (min-width: 576px) {
274
274
  .ws-dt:not(:first-child) {
275
- --pf-v5-c-content--dt--MarginTop: var(--pf-v5-c-content--dt--sm--MarginTop); } }
275
+ --pf-v6-c-content--dt--MarginTop: var(--pf-v6-c-content--dt--sm--MarginTop); } }
276
276
  @media screen and (min-width: 576px) {
277
277
  .ws-dt {
278
278
  grid-column: 1; } }
package/templates/mdx.js CHANGED
@@ -88,7 +88,7 @@ const MDXChildTemplate = ({
88
88
  );
89
89
  // Create dynamic component for @reach/router
90
90
  const ChildComponent = () => (
91
- <div className="pf-v5-u-display-flex ws-mdx-child-template">
91
+ <div className="pf-v6-u-display-flex ws-mdx-child-template">
92
92
  {toc.length > 1 && (
93
93
  <TableOfContents items={toc} />
94
94
  )}
@@ -296,19 +296,19 @@ export const MDXTemplate = ({
296
296
  </PageSection>
297
297
  { showTabs && (
298
298
  <PageSection id="ws-sticky-nav-tabs" stickyOnBreakpoint={{'default':'top'}} type="tabs">
299
- <div className="pf-v5-c-tabs pf-m-page-insets pf-m-no-border-bottom">
300
- <ul className="pf-v5-c-tabs__list">
299
+ <div className="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom">
300
+ <ul className="pf-v6-c-tabs__list">
301
301
  {sourceKeys.map((source, index) => (
302
302
  <li
303
303
  key={source}
304
304
  className={css(
305
- 'pf-v5-c-tabs__item',
305
+ 'pf-v6-c-tabs__item',
306
306
  activeSource === source && 'pf-m-current'
307
307
  )}
308
308
  // Send clicked tab name for analytics
309
309
  onClick={() => trackEvent('tab_click', 'click_event', source.toUpperCase())}
310
310
  >
311
- <Link className="pf-v5-c-tabs__link" to={`${path}${index === 0 ? '' : '/' + source}`}>
311
+ <Link className="pf-v6-c-tabs__link" to={`${path}${index === 0 ? '' : '/' + source}`}>
312
312
  {tabNames[source]}
313
313
  </Link>
314
314
  </li>
@@ -320,7 +320,7 @@ export const MDXTemplate = ({
320
320
  <PageSection id="main-content" isFilled className="pf-m-light-100">
321
321
  {isSinglePage && <MDXChildTemplate {...sources[0]} id={id}/>}
322
322
  {!isSinglePage && (
323
- <Router className="pf-v5-u-h-100" primary={false}>
323
+ <Router className="pf-v6-u-h-100" primary={false}>
324
324
  {sources
325
325
  .map((source, index) => {
326
326
  source.index = index;
package/versions.json CHANGED
@@ -5,16 +5,16 @@
5
5
  "date": "2023-12-03",
6
6
  "latest": true,
7
7
  "versions": {
8
- "@patternfly/patternfly": "6.0.0-alpha.38",
8
+ "@patternfly/patternfly": "6.0.0-alpha.91",
9
9
  "@patternfly/react-catalog-view-extension": "5.0.0",
10
- "@patternfly/react-charts": "8.0.0-alpha.4",
11
- "@patternfly/react-code-editor": "6.0.0-alpha.5",
12
- "@patternfly/react-core": "6.0.0-alpha.5",
13
- "@patternfly/react-drag-drop": "6.0.0-alpha.0",
14
- "@patternfly/react-icons": "6.0.0-alpha.4",
10
+ "@patternfly/react-charts": "8.0.0-alpha.14",
11
+ "@patternfly/react-code-editor": "6.0.0-alpha.36",
12
+ "@patternfly/react-core": "6.0.0-alpha.36",
13
+ "@patternfly/react-drag-drop": "6.0.0-alpha.17",
14
+ "@patternfly/react-icons": "6.0.0-alpha.14",
15
15
  "@patternfly/react-log-viewer": "5.0.0",
16
- "@patternfly/react-styles": "6.0.0-alpha.4",
17
- "@patternfly/react-table": "6.0.0-alpha.5",
16
+ "@patternfly/react-styles": "6.0.0-alpha.14",
17
+ "@patternfly/react-table": "6.0.0-alpha.36",
18
18
  "@patternfly/react-tokens": "5.1.0",
19
19
  "@patternfly/react-topology": "5.1.0",
20
20
  "@patternfly/quickstarts": "5.1.0",
@@ -24,6 +24,7 @@
24
24
  {
25
25
  "name": "5.1.0",
26
26
  "date": "2023-10-06",
27
+ "hidden": true,
27
28
  "versions": {
28
29
  "@patternfly/patternfly": "5.1.0",
29
30
  "@patternfly/react-charts": "7.1.1",