@patternfly/documentation-framework 6.0.0-alpha.22 → 6.0.0-alpha.24

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 (17) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/components/autoLinkHeader/autoLinkHeader.css +2 -2
  3. package/components/autoLinkHeader/autoLinkHeader.js +2 -2
  4. package/components/cssVariables/cssVariables.css +4 -4
  5. package/components/example/example.css +18 -18
  6. package/components/example/example.js +3 -3
  7. package/components/footer/footer.css +13 -13
  8. package/components/gdprBanner/gdprBanner.css +2 -2
  9. package/components/sectionGallery/sectionGallery.css +2 -2
  10. package/components/sideNav/sideNav.css +6 -6
  11. package/components/tableOfContents/tableOfContents.css +9 -9
  12. package/layouts/sideNavLayout/sideNavLayout.css +5 -5
  13. package/package.json +4 -4
  14. package/pages/404/404.css +2 -2
  15. package/pages/404/index.js +3 -1
  16. package/templates/mdx.css +80 -80
  17. package/templates/mdx.js +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
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.24 (2024-05-06)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **styles:** Remove and replace global styles ([#3996](https://github.com/patternfly/patternfly-org/issues/3996)) ([41fe3eb](https://github.com/patternfly/patternfly-org/commit/41fe3eba104cc7ef49898fc1b614777bdbd04b22))
12
+
13
+
14
+
15
+
16
+
17
+ # 6.0.0-alpha.23 (2024-05-02)
18
+
19
+
20
+ ### Features
21
+
22
+ * **docs:** update beta button style ([#3961](https://github.com/patternfly/patternfly-org/issues/3961)) ([8a68ab7](https://github.com/patternfly/patternfly-org/commit/8a68ab7852643aac54282923b34feff090be1101))
23
+
24
+
25
+
26
+
27
+
6
28
  # 6.0.0-alpha.22 (2024-04-23)
7
29
 
8
30
 
package/components/autoLinkHeader/autoLinkHeader.css CHANGED
@@ -3,8 +3,8 @@
3
3
  }
4
4
 
5
5
  .ws-heading-anchor {
6
- color: var(--pf-v6-global--Color--100);
7
- transform: translate(calc(-100% - var(--pf-v6-global--spacer--xs)), -50%);
6
+ /* color: var(--pf-v6-global--Color--100); */
7
+ transform: translate(calc(-100% - var(--pf-t--global--spacer--xs)), -50%);
8
8
  opacity: 0;
9
9
  position: absolute;
10
10
  left: 0;
package/components/autoLinkHeader/autoLinkHeader.js CHANGED
@@ -25,7 +25,7 @@ export const AutoLinkHeader = ({
25
25
  const slug = id || slugger(children);
26
26
 
27
27
  return (
28
- <Flex alignItems={{ default: 'alignItemsCenter'}} spaceItems={{ default: 'spaceItemsNone' }}>
28
+ <Flex alignItems={{ default: 'alignItemsCenter'}} spaceItems={{ default: "spaceItemsSm" }}>
29
29
  <FlexItem>
30
30
  <Title
31
31
  id={slug}
@@ -40,7 +40,7 @@ export const AutoLinkHeader = ({
40
40
  {children}
41
41
  </Title>
42
42
  </FlexItem>
43
- <FlexItem> {metaText}</FlexItem>
43
+ <FlexItem>{metaText}</FlexItem>
44
44
  </Flex>
45
45
  )
46
46
  };
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-v6-global--BorderWidth--sm) solid var(--pf-v6-global--BorderColor--200);
6
- border-radius: var(--pf-v6-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-v6-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-v6-global--spacer--xs) var(--pf-v6-global--spacer--md);
14
+ padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--md);
15
15
  }
package/components/example/example.css CHANGED
@@ -3,16 +3,16 @@
3
3
  }
4
4
 
5
5
  .ws-example {
6
- margin-top: var(--pf-v6-global--spacer--lg);
7
- margin-bottom: var(--pf-v6-global--spacer--lg);
6
+ margin-top: var(--pf-t--global--spacer--lg);
7
+ margin-bottom: var(--pf-t--global--spacer--lg);
8
8
  }
9
9
 
10
10
  .ws-example > .ws-example-header {
11
- padding: var(--pf-v6-global--spacer--md);
11
+ padding: var(--pf-t--global--spacer--md);
12
12
  }
13
13
 
14
14
  .ws-example-header > .ws-example-heading:not(:last-child) {
15
- margin-bottom: var(--pf-v6-global--spacer--md);
15
+ margin-bottom: var(--pf-t--global--spacer--md);
16
16
  }
17
17
 
18
18
  .ws-code-editor:not(.ws-example-code-expanded) > .pf-v6-c-code-editor__header::before {
@@ -31,9 +31,9 @@
31
31
  }
32
32
 
33
33
  .ws-preview {
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);
34
+ padding: var(--pf-t--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
 
@@ -43,12 +43,12 @@
43
43
  }
44
44
 
45
45
  .ws-editor {
46
- font-size: var(--pf-v6-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-v6-global--danger-color--100);
51
+ /* color: var(--pf-v6-global--danger-color--100); */
52
52
  }
53
53
 
54
54
  .ws-preview__thumbnail-link {
@@ -101,32 +101,32 @@
101
101
  }
102
102
 
103
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);
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-v6-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-v6-global--spacer--lg);
118
- z-index: var(--pf-v6-global--ZIndex--2xl);
117
+ padding: var(--pf-t--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-v6-global--BackgroundColor--100);
125
+ /* background-color: var(--pf-v6-global--BackgroundColor--100); */
126
126
  opacity: 0.8;
127
- box-shadow: var(--pf-v6-global--BoxShadow--sm);
127
+ /* box-shadow: var(--pf-v6-global--BoxShadow--sm); */
128
128
  }
129
129
 
130
130
  .pf-v6-theme-dark .ws-theme-switch-full-page::before {
131
- background-color: var(--pf-v6-global--BackgroundColor--300);
131
+ /* background-color: var(--pf-v6-global--BackgroundColor--300); */
132
132
  }
package/components/example/example.js CHANGED
@@ -203,21 +203,21 @@ export const Example = ({
203
203
  <React.Fragment>
204
204
  {isBeta && (
205
205
  <Tooltip content="This beta component is currently under review and is still open for further evolution.">
206
- <Button variant="plain">
206
+ <Button variant="plain" hasNoPadding>
207
207
  <Label isCompact color="blue">Beta</Label>
208
208
  </Button>
209
209
  </Tooltip>
210
210
  )}
211
211
  {isDemo && (
212
212
  <Tooltip content="Demos show how multiple components can be used in a single design.">
213
- <Button variant="plain">
213
+ <Button variant="plain" hasNoPadding>
214
214
  <Label isCompact color="purple">Demo</Label>
215
215
  </Button>
216
216
  </Tooltip>
217
217
  )}
218
218
  {isDeprecated && (
219
219
  <Tooltip content="Deprecated components are available for use but are no longer being maintained or enhanced.">
220
- <Button variant="plain">
220
+ <Button variant="plain" hasNoPadding>
221
221
  <Label isCompact color="grey">Deprecated</Label>
222
222
  </Button>
223
223
  </Tooltip>
package/components/footer/footer.css CHANGED
@@ -1,11 +1,11 @@
1
1
  .ws-org-pfsite-l-footer.pf-v6-c-page__main-section {
2
- font-family: var(--pf-v6-global--FontFamily--text);
2
+ /* font-family: var(--pf-v6-global--FontFamily--text); */
3
3
  font-weight: 300;
4
4
  background-color: #1a1a1a !important;
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);
5
+ --pf-v6-c-page__main-section--PaddingTop: var(--pf-t--global--spacer--xl);
6
+ --pf-v6-c-page__main-section--PaddingRight: var(--pf-t--global--spacer--2xl);
7
+ --pf-v6-c-page__main-section--PaddingBottom: var(--pf-t--global--spacer--2xl);
8
+ --pf-v6-c-page__main-section--PaddingLeft: var(--pf-t--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-v6-global--spacer--md);
38
- color: var(--pf-v6-global--Color--light-100) !important;
37
+ margin-right: var(--pf-t--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-v6-global--spacer--md);
47
- margin-bottom: var(--pf-v6-global--spacer--md);
46
+ margin-top: var(--pf-t--global--spacer--md);
47
+ margin-bottom: var(--pf-t--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-v6-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 {
@@ -96,9 +96,9 @@
96
96
  color: #d2d2d2;
97
97
  }
98
98
  .ws-org-pfsite-l-footer-dark a {
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;
99
+ padding-right: var(--pf-t--global--spacer--sm);
100
+ padding-left: var(--pf-t--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-v6-global--BackgroundColor--100);
13
- border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-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
@@ -20,10 +20,10 @@
20
20
  .ws-section-gallery .pf-v6-c-toolbar {
21
21
  margin-left: calc(var(--pf-v6-c-page__main-section--PaddingLeft) * -1);
22
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);
23
+ margin-bottom: var(--pf-t--global--spacer--md);
24
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-v6-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 */
package/components/sideNav/sideNav.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .ws-page-sidebar .pf-v6-c-nav {
2
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);
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
7
  --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
8
8
  }
9
9
 
@@ -12,6 +12,6 @@
12
12
  }
13
13
 
14
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);
15
+ /* color: var(--ws-toc-link--Color, var(--pf-v6-global--Color--300)); */
16
+ /* font-size: var(--pf-v6-global--FontSize--sm); */
17
17
  }
package/components/tableOfContents/tableOfContents.css CHANGED
@@ -5,18 +5,18 @@
5
5
  background-color: var(--pf-t--global--background--color--primary--default);
6
6
  z-index: 501;
7
7
  margin-block-start: calc(var(--pf-v6-c-page__main-section--PaddingTop) * -1);
8
- margin-block-end: var(--pf-v6-global--spacer--md);
8
+ margin-block-end: var(--pf-t--global--spacer--md);
9
9
  margin-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingLeft) * -1);
10
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);
11
+ padding-block-start: var(--pf-t--global--spacer--md);
12
+ padding-block-end: var(--pf-t--global--spacer--md);
13
+ padding-inline-start: var(--pf-t--global--spacer--md);
14
14
  padding-inline-end: 0;
15
- box-shadow: var(--pf-v6-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-v6-global--BoxShadow--sm-bottom)
19
+ /* box-shadow: var(--pf-v6-global--BoxShadow--sm-bottom) */
20
20
  }
21
21
 
22
22
  /* Mobile jumplinks */
@@ -51,7 +51,7 @@
51
51
  -ms-overflow-style: none;
52
52
  scrollbar-width: none;
53
53
  order: 1;
54
- padding: 0 var(--pf-v6-global--spacer--lg) var(--pf-v6-global--spacer--lg) var(--pf-v6-global--spacer--2xl);
54
+ padding: 0 var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--2xl);
55
55
  flex-grow: 1;
56
56
  background: none;
57
57
  margin: 0;
@@ -67,8 +67,8 @@
67
67
  .ws-toc-item .pf-v6-c-jump-links__link {
68
68
  position: relative;
69
69
  display: block;
70
- color: var(--ws-toc-link--Color, var(--pf-v6-global--Color--300));
71
- font-size: var(--pf-v6-global--FontSize--sm);
70
+ /* color: var(--ws-toc-link--Color, var(--pf-v6-global--Color--300)); */
71
+ /* font-size: var(--pf-v6-global--FontSize--sm); */
72
72
  margin: -4px 0;
73
73
  }
74
74
 
package/layouts/sideNavLayout/sideNavLayout.css CHANGED
@@ -9,7 +9,7 @@
9
9
  }
10
10
 
11
11
  .ws-switcher-divider {
12
- padding: 0 var(--pf-v6-global--spacer--md);
12
+ padding: 0 var(--pf-t--global--spacer--md);
13
13
  }
14
14
 
15
15
  @media (min-width: 1200px) {
@@ -19,7 +19,7 @@
19
19
  }
20
20
 
21
21
  .ws-page-sidebar > .pf-v6-c-page__sidebar-body {
22
- padding-top: var(--pf-v6-global--spacer--md);
22
+ padding-top: var(--pf-t--global--spacer--md);
23
23
  }
24
24
 
25
25
  /* Search */
@@ -39,12 +39,12 @@
39
39
 
40
40
  .ws-masthead .pf-v6-c-switch {
41
41
  align-items: center;
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);
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
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);
47
+ /* --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v6-global--palette--blue-400); */
48
48
  --pf-v6-c-toggle-group__button--focus--BackgroundColor: transparent;
49
49
  --pf-v6-c-toggle-group__button--hover--BackgroundColor: transparent;
50
50
  }
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.22",
4
+ "version": "6.0.0-alpha.24",
5
5
  "author": "Red Hat",
6
6
  "license": "MIT",
7
7
  "private": false,
@@ -13,7 +13,7 @@
13
13
  "@babel/preset-env": "^7.24.3",
14
14
  "@babel/preset-react": "^7.24.1",
15
15
  "@mdx-js/util": "1.6.16",
16
- "@patternfly/ast-helpers": "^1.4.0-alpha.11",
16
+ "@patternfly/ast-helpers": "^1.4.0-alpha.13",
17
17
  "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
18
18
  "autoprefixer": "9.8.6",
19
19
  "babel-loader": "^9.1.3",
@@ -73,12 +73,12 @@
73
73
  "webpack-merge": "5.8.0"
74
74
  },
75
75
  "peerDependencies": {
76
- "@patternfly/patternfly": "6.0.0-alpha.117",
76
+ "@patternfly/patternfly": "6.0.0-alpha.118",
77
77
  "@patternfly/react-code-editor": "6.0.0-alpha.50",
78
78
  "@patternfly/react-core": "6.0.0-alpha.50",
79
79
  "@patternfly/react-table": "6.0.0-alpha.50",
80
80
  "react": "^17.0.0 || ^18.0.0",
81
81
  "react-dom": "^17.0.0 || ^18.0.0"
82
82
  },
83
- "gitHead": "65ebcf7e38a208cb3fa313217ed971774d6805ca"
83
+ "gitHead": "9e2ca6aa58a6692e290b92890e2b033da23e2d41"
84
84
  }
package/pages/404/404.css CHANGED
@@ -5,12 +5,12 @@
5
5
  }
6
6
 
7
7
  .ws-404-card-header {
8
- padding: var(--pf-v6-global--spacer--lg);
8
+ padding: var(--pf-t--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-v6-global--spacer--xl);
15
+ padding: var(--pf-t--global--spacer--xl);
16
16
  }
package/pages/404/index.js CHANGED
@@ -73,7 +73,9 @@ 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-v6-global--spacer--sm)' }}>
76
+ <p
77
+ // style={{ marginTop: 'var(--pf-v6-global--spacer--sm)' }}
78
+ >
77
79
  Another page might have the information you need, so try searching PatternFly.
78
80
  </p>
79
81
  <EmptyStateBody>
package/templates/mdx.css CHANGED
@@ -6,7 +6,7 @@
6
6
  }
7
7
 
8
8
  .ws-release-notes-toc {
9
- margin-bottom: var(--pf-v6-global--spacer--lg);
9
+ margin-bottom: var(--pf-t--global--spacer--lg);
10
10
  }
11
11
 
12
12
  .ws-release-notes-toc .pf-v6-c-card {
@@ -14,7 +14,7 @@
14
14
  }
15
15
 
16
16
  .ws-release-notes-toc .pf-v6-c-card__title {
17
- padding-bottom: var(--pf-v6-global--spacer--xs);
17
+ padding-bottom: var(--pf-t--global--spacer--xs);
18
18
  }
19
19
 
20
20
  .ws-release-notes-toc .pf-v6-c-card__title .pf-v6-c-title {
@@ -22,7 +22,7 @@
22
22
  }
23
23
 
24
24
  .ws-release-notes-toc .pf-v6-c-card__title a {
25
- margin-right: var(--pf-v6-global--spacer--sm);
25
+ margin-right: var(--pf-t--global--spacer--sm);
26
26
  }
27
27
 
28
28
  .ws-release-notes-toc .pf-v6-c-card__title .pf-v6-c-badge {
@@ -31,8 +31,8 @@
31
31
 
32
32
  .ws-release-notes-toc .pf-v6-c-card__body {
33
33
  color: #72767B;
34
- font-family: var(--pf-v6-global--FontFamily--text);
35
- font-size: var(--pf-v6-global--FontSize--md);
34
+ /* font-family: var(--pf-v6-global--FontFamily--text); */
35
+ /* font-size: var(--pf-v6-global--FontSize--md); */
36
36
  font-weight: 400;
37
37
  line-height: 1.5;
38
38
  }
@@ -40,11 +40,11 @@
40
40
  .ws-code {
41
41
  display: inline-block;
42
42
  background-color: var(--pf-t--global--background--color--secondary--default);
43
- padding: 1px var(--pf-v6-global--spacer--sm);
44
- border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--BorderColor--300);
43
+ padding: 1px var(--pf-t--global--spacer--sm);
44
+ /* border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--BorderColor--300); */
45
45
  white-space: pre-wrap;
46
- font-size: var(--pf-v6-global--FontSize--sm);
47
- font-family: var(--pf-v6-global--FontFamily--monospace);
46
+ /* font-size: var(--pf-v6-global--FontSize--sm); */
47
+ /* font-family: var(--pf-v6-global--FontFamily--monospace); */
48
48
  }
49
49
 
50
50
  .ws-p + .ws-code {
@@ -93,78 +93,78 @@
93
93
  * Copied from pf-v6-c-content.
94
94
  */
95
95
  :root {
96
- --pf-v6-c-content--MarginBottom: var(--pf-v6-global--spacer--md);
97
- --pf-v6-c-content--LineHeight: var(--pf-v6-global--LineHeight--md);
98
- --pf-v6-c-content--FontSize: var(--pf-v6-global--FontSize--md);
99
- --pf-v6-c-content--FontWeight: var(--pf-v6-global--FontWeight--normal);
100
- --pf-v6-c-content--Color: var(--pf-v6-global--Color--100);
101
- --pf-v6-c-content--heading--FontFamily: var(--pf-v6-global--FontFamily--heading);
102
- --pf-v6-c-content--h1--MarginTop: var(--pf-v6-global--spacer--lg);
103
- --pf-v6-c-content--h1--MarginBottom: var(--pf-v6-global--spacer--sm);
104
- --pf-v6-c-content--h1--LineHeight: var(--pf-v6-global--LineHeight--sm);
105
- --pf-v6-c-content--h1--FontSize: var(--pf-v6-global--FontSize--2xl);
106
- --pf-v6-c-content--h1--FontWeight: var(--pf-v6-global--FontWeight--normal);
107
- --pf-v6-c-content--h2--MarginTop: var(--pf-v6-global--spacer--lg);
108
- --pf-v6-c-content--h2--MarginBottom: var(--pf-v6-global--spacer--sm);
109
- --pf-v6-c-content--h2--LineHeight: var(--pf-v6-global--LineHeight--sm);
110
- --pf-v6-c-content--h2--FontSize: var(--pf-v6-global--FontSize--xl);
111
- --pf-v6-c-content--h2--FontWeight: var(--pf-v6-global--FontWeight--normal);
112
- --pf-v6-c-content--h3--MarginTop: var(--pf-v6-global--spacer--lg);
113
- --pf-v6-c-content--h3--MarginBottom: var(--pf-v6-global--spacer--sm);
114
- --pf-v6-c-content--h3--LineHeight: var(--pf-v6-global--LineHeight--md);
115
- --pf-v6-c-content--h3--FontSize: var(--pf-v6-global--FontSize--lg);
116
- --pf-v6-c-content--h3--FontWeight: var(--pf-v6-global--FontWeight--normal);
117
- --pf-v6-c-content--h4--MarginTop: var(--pf-v6-global--spacer--lg);
118
- --pf-v6-c-content--h4--MarginBottom: var(--pf-v6-global--spacer--sm);
119
- --pf-v6-c-content--h4--LineHeight: var(--pf-v6-global--LineHeight--md);
120
- --pf-v6-c-content--h4--FontSize: var(--pf-v6-global--FontSize--md);
121
- --pf-v6-c-content--h4--FontWeight: var(--pf-v6-global--FontWeight--semi-bold);
122
- --pf-v6-c-content--h5--MarginTop: var(--pf-v6-global--spacer--lg);
123
- --pf-v6-c-content--h5--MarginBottom: var(--pf-v6-global--spacer--sm);
124
- --pf-v6-c-content--h5--LineHeight: var(--pf-v6-global--LineHeight--md);
125
- --pf-v6-c-content--h5--FontSize: var(--pf-v6-global--FontSize--md);
126
- --pf-v6-c-content--h5--FontWeight: var(--pf-v6-global--FontWeight--semi-bold);
127
- --pf-v6-c-content--h6--MarginTop: var(--pf-v6-global--spacer--lg);
128
- --pf-v6-c-content--h6--MarginBottom: var(--pf-v6-global--spacer--sm);
129
- --pf-v6-c-content--h6--LineHeight: var(--pf-v6-global--LineHeight--md);
130
- --pf-v6-c-content--h6--FontSize: var(--pf-v6-global--FontSize--md);
131
- --pf-v6-c-content--h6--FontWeight: var(--pf-v6-global--FontWeight--semi-bold);
132
- --pf-v6-c-content--small--MarginBottom: var(--pf-v6-global--spacer--md);
133
- --pf-v6-c-content--small--LineHeight: var(--pf-v6-global--LineHeight--md);
134
- --pf-v6-c-content--small--FontSize: var(--pf-v6-global--FontSize--sm);
135
- --pf-v6-c-content--small--Color: var(--pf-v6-global--Color--200);
136
- --pf-v6-c-content--small--FontWeight: var(--pf-v6-global--FontWeight--semi-bold);
137
- --pf-v6-c-content--a--Color: var(--pf-v6-global--link--Color);
138
- --pf-v6-c-content--a--TextDecoration: var(--pf-v6-global--link--TextDecoration);
139
- --pf-v6-c-content--a--hover--Color: var(--pf-v6-global--link--Color--hover);
140
- --pf-v6-c-content--a--hover--TextDecoration: var(--pf-v6-global--link--TextDecoration--hover);
141
- --pf-v6-c-content--blockquote--PaddingTop: var(--pf-v6-global--spacer--md);
142
- --pf-v6-c-content--blockquote--PaddingRight: var(--pf-v6-global--spacer--md);
143
- --pf-v6-c-content--blockquote--PaddingBottom: var(--pf-v6-global--spacer--md);
144
- --pf-v6-c-content--blockquote--PaddingLeft: var(--pf-v6-global--spacer--md);
145
- --pf-v6-c-content--blockquote--FontWeight: var(--pf-v6-global--FontWeight--light);
146
- --pf-v6-c-content--blockquote--Color: var(--pf-v6-global--Color--200);
147
- --pf-v6-c-content--blockquote--BorderLeftColor: var(--pf-v6-global--BorderColor--100);
148
- --pf-v6-c-content--blockquote--BorderLeftWidth: var(--pf-v6-global--BorderWidth--lg);
149
- --pf-v6-c-content--ol--PaddingLeft: var(--pf-v6-global--spacer--lg);
150
- --pf-v6-c-content--ol--MarginTop: var(--pf-v6-global--spacer--md);
151
- --pf-v6-c-content--ol--MarginLeft: var(--pf-v6-global--spacer--lg);
152
- --pf-v6-c-content--ol--nested--MarginTop: var(--pf-v6-global--spacer--sm);
153
- --pf-v6-c-content--ol--nested--MarginLeft: var(--pf-v6-global--spacer--sm);
154
- --pf-v6-c-content--ul--PaddingLeft: var(--pf-v6-global--spacer--lg);
155
- --pf-v6-c-content--ul--MarginTop: var(--pf-v6-global--spacer--md);
156
- --pf-v6-c-content--ul--MarginLeft: var(--pf-v6-global--spacer--lg);
157
- --pf-v6-c-content--ul--nested--MarginTop: var(--pf-v6-global--spacer--sm);
158
- --pf-v6-c-content--ul--nested--MarginLeft: var(--pf-v6-global--spacer--sm);
159
- --pf-v6-c-content--ul--ListStyle: var(--pf-v6-global--ListStyle);
160
- --pf-v6-c-content--li--MarginTop: var(--pf-v6-global--spacer--sm);
161
- --pf-v6-c-content--dl--ColumnGap: var(--pf-v6-global--spacer--2xl);
162
- --pf-v6-c-content--dl--RowGap: var(--pf-v6-global--spacer--md);
163
- --pf-v6-c-content--dt--FontWeight: var(--pf-v6-global--FontWeight--semi-bold);
164
- --pf-v6-c-content--dt--MarginTop: var(--pf-v6-global--spacer--md);
96
+ --pf-v6-c-content--MarginBottom: var(--pf-t--global--spacer--md);
97
+ /* --pf-v6-c-content--LineHeight: var(--pf-v6-global--LineHeight--md); */
98
+ /* --pf-v6-c-content--FontSize: var(--pf-v6-global--FontSize--md); */
99
+ /* --pf-v6-c-content--FontWeight: var(--pf-v6-global--FontWeight--normal); */
100
+ /* --pf-v6-c-content--Color: var(--pf-v6-global--Color--100); */
101
+ /* --pf-v6-c-content--heading--FontFamily: var(--pf-v6-global--FontFamily--heading); */
102
+ --pf-v6-c-content--h1--MarginTop: var(--pf-t--global--spacer--lg);
103
+ --pf-v6-c-content--h1--MarginBottom: var(--pf-t--global--spacer--sm);
104
+ /* --pf-v6-c-content--h1--LineHeight: var(--pf-v6-global--LineHeight--sm); */
105
+ /* --pf-v6-c-content--h1--FontSize: var(--pf-v6-global--FontSize--2xl); */
106
+ /* --pf-v6-c-content--h1--FontWeight: var(--pf-v6-global--FontWeight--normal); */
107
+ --pf-v6-c-content--h2--MarginTop: var(--pf-t--global--spacer--lg);
108
+ --pf-v6-c-content--h2--MarginBottom: var(--pf-t--global--spacer--sm);
109
+ /* --pf-v6-c-content--h2--LineHeight: var(--pf-v6-global--LineHeight--sm); */
110
+ /* --pf-v6-c-content--h2--FontSize: var(--pf-v6-global--FontSize--xl); */
111
+ /* --pf-v6-c-content--h2--FontWeight: var(--pf-v6-global--FontWeight--normal); */
112
+ --pf-v6-c-content--h3--MarginTop: var(--pf-t--global--spacer--lg);
113
+ --pf-v6-c-content--h3--MarginBottom: var(--pf-t--global--spacer--sm);
114
+ /* --pf-v6-c-content--h3--LineHeight: var(--pf-v6-global--LineHeight--md); */
115
+ /* --pf-v6-c-content--h3--FontSize: var(--pf-v6-global--FontSize--lg); */
116
+ /* --pf-v6-c-content--h3--FontWeight: var(--pf-v6-global--FontWeight--normal); */
117
+ --pf-v6-c-content--h4--MarginTop: var(--pf-t--global--spacer--lg);
118
+ --pf-v6-c-content--h4--MarginBottom: var(--pf-t--global--spacer--sm);
119
+ /* --pf-v6-c-content--h4--LineHeight: var(--pf-v6-global--LineHeight--md); */
120
+ /* --pf-v6-c-content--h4--FontSize: var(--pf-v6-global--FontSize--md); */
121
+ /* --pf-v6-c-content--h4--FontWeight: var(--pf-v6-global--FontWeight--semi-bold); */
122
+ --pf-v6-c-content--h5--MarginTop: var(--pf-t--global--spacer--lg);
123
+ --pf-v6-c-content--h5--MarginBottom: var(--pf-t--global--spacer--sm);
124
+ /* --pf-v6-c-content--h5--LineHeight: var(--pf-v6-global--LineHeight--md); */
125
+ /* --pf-v6-c-content--h5--FontSize: var(--pf-v6-global--FontSize--md); */
126
+ /* --pf-v6-c-content--h5--FontWeight: var(--pf-v6-global--FontWeight--semi-bold); */
127
+ --pf-v6-c-content--h6--MarginTop: var(--pf-t--global--spacer--lg);
128
+ --pf-v6-c-content--h6--MarginBottom: var(--pf-t--global--spacer--sm);
129
+ /* --pf-v6-c-content--h6--LineHeight: var(--pf-v6-global--LineHeight--md); */
130
+ /* --pf-v6-c-content--h6--FontSize: var(--pf-v6-global--FontSize--md); */
131
+ /* --pf-v6-c-content--h6--FontWeight: var(--pf-v6-global--FontWeight--semi-bold); */
132
+ --pf-v6-c-content--small--MarginBottom: var(--pf-t--global--spacer--md);
133
+ /* --pf-v6-c-content--small--LineHeight: var(--pf-v6-global--LineHeight--md); */
134
+ /* --pf-v6-c-content--small--FontSize: var(--pf-v6-global--FontSize--sm); */
135
+ /* --pf-v6-c-content--small--Color: var(--pf-v6-global--Color--200); */
136
+ /* --pf-v6-c-content--small--FontWeight: var(--pf-v6-global--FontWeight--semi-bold); */
137
+ /* --pf-v6-c-content--a--Color: var(--pf-v6-global--link--Color); */
138
+ /* --pf-v6-c-content--a--TextDecoration: var(--pf-v6-global--link--TextDecoration); */
139
+ /* --pf-v6-c-content--a--hover--Color: var(--pf-v6-global--link--Color--hover); */
140
+ /* --pf-v6-c-content--a--hover--TextDecoration: var(--pf-v6-global--link--TextDecoration--hover); */
141
+ --pf-v6-c-content--blockquote--PaddingTop: var(--pf-t--global--spacer--md);
142
+ --pf-v6-c-content--blockquote--PaddingRight: var(--pf-t--global--spacer--md);
143
+ --pf-v6-c-content--blockquote--PaddingBottom: var(--pf-t--global--spacer--md);
144
+ --pf-v6-c-content--blockquote--PaddingLeft: var(--pf-t--global--spacer--md);
145
+ /* --pf-v6-c-content--blockquote--FontWeight: var(--pf-v6-global--FontWeight--light); */
146
+ /* --pf-v6-c-content--blockquote--Color: var(--pf-v6-global--Color--200); */
147
+ /* --pf-v6-c-content--blockquote--BorderLeftColor: var(--pf-v6-global--BorderColor--100); */
148
+ /* --pf-v6-c-content--blockquote--BorderLeftWidth: var(--pf-v6-global--BorderWidth--lg); */
149
+ --pf-v6-c-content--ol--PaddingLeft: var(--pf-t--global--spacer--lg);
150
+ --pf-v6-c-content--ol--MarginTop: var(--pf-t--global--spacer--md);
151
+ --pf-v6-c-content--ol--MarginLeft: var(--pf-t--global--spacer--lg);
152
+ --pf-v6-c-content--ol--nested--MarginTop: var(--pf-t--global--spacer--sm);
153
+ --pf-v6-c-content--ol--nested--MarginLeft: var(--pf-t--global--spacer--sm);
154
+ --pf-v6-c-content--ul--PaddingLeft: var(--pf-t--global--spacer--lg);
155
+ --pf-v6-c-content--ul--MarginTop: var(--pf-t--global--spacer--md);
156
+ --pf-v6-c-content--ul--MarginLeft: var(--pf-t--global--spacer--lg);
157
+ --pf-v6-c-content--ul--nested--MarginTop: var(--pf-t--global--spacer--sm);
158
+ --pf-v6-c-content--ul--nested--MarginLeft: var(--pf-t--global--spacer--sm);
159
+ /* --pf-v6-c-content--ul--ListStyle: var(--pf-v6-global--ListStyle); */
160
+ --pf-v6-c-content--li--MarginTop: var(--pf-t--global--spacer--sm);
161
+ --pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
162
+ --pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--md);
163
+ /* --pf-v6-c-content--dt--FontWeight: var(--pf-v6-global--FontWeight--semi-bold); */
164
+ --pf-v6-c-content--dt--MarginTop: var(--pf-t--global--spacer--md);
165
165
  --pf-v6-c-content--dt--sm--MarginTop: 0;
166
- --pf-v6-c-content--hr--Height: var(--pf-v6-global--BorderWidth--sm);
167
- --pf-v6-c-content--hr--BackgroundColor: var(--pf-v6-global--BorderColor--100);
166
+ /* --pf-v6-c-content--hr--Height: var(--pf-v6-global--BorderWidth--sm); */
167
+ /* --pf-v6-c-content--hr--BackgroundColor: var(--pf-v6-global--BorderColor--100); */
168
168
  font-size: var(--pf-v6-c-content--FontSize);
169
169
  line-height: var(--pf-v6-c-content--LineHeight);
170
170
  color: var(--pf-v6-c-content--Color); }
package/templates/mdx.js CHANGED
@@ -270,7 +270,7 @@ export const MDXTemplate = ({
270
270
  {isDeprecated && (
271
271
  <FlexItem spacer={{ default: 'spacerSm' }}>
272
272
  <Tooltip content="Deprecated components are available for use but are no longer being maintained or enhanced.">
273
- <Button isInline component="span" variant="link">
273
+ <Button variant="plain" hasNoPadding>
274
274
  <Label color="grey">Deprecated</Label>
275
275
  </Button>
276
276
  </Tooltip>
@@ -279,7 +279,7 @@ export const MDXTemplate = ({
279
279
  {isDemo && (
280
280
  <FlexItem spacer={{ default: 'spacerSm' }}>
281
281
  <Tooltip content="Demos show how multiple components can be used in a single design.">
282
- <Button isInline component="span" variant="link">
282
+ <Button variant="plain" hasNoPadding>
283
283
  <Label color="purple">Demo</Label>
284
284
  </Button>
285
285
  </Tooltip>
@@ -288,7 +288,7 @@ export const MDXTemplate = ({
288
288
  {isBeta && (
289
289
  <FlexItem spacer={{ default: 'spacerSm' }}>
290
290
  <Tooltip content="This beta component is currently under review and is still open for further evolution.">
291
- <Button isInline component="span" variant="link">
291
+ <Button variant="plain" hasNoPadding>
292
292
  <Label color="blue">Beta</Label>
293
293
  </Button>
294
294
  </Tooltip>