@patternfly/documentation-framework 6.0.0-alpha.1 → 6.0.0-alpha.100

package/routes.js

@@ -83,7 +83,9 @@ const sourceOrder = {
   html: 3,
   'html-demos': 4,
   'design-guidelines': 99,
-  'accessibility': 100
+  'accessibility': 100,
+  'upgrade-guide': 101,
+  'release-notes': 102,
 };
 
 const sortSources = ({ source: s1 }, { source: s2 }) => {

package/scripts/md/anchor-header.js

@@ -42,7 +42,7 @@ function anchorHeader(tocCallback) {
         // Add to TOC for indexing
         addTOCItem(tocItem, node.tagName);
 
-        node.properties.size = node.tagName;
+        node.properties.headingLevel = node.tagName;
         node.properties.className = node.properties.className || '';
         node.properties.className += node.properties.className ? ' ' : '';
         node.properties.className += `ws-title ws-${node.tagName}`;

package/scripts/md/parseMD.js

@@ -105,6 +105,7 @@ function toReactComponent(mdFilePath, source, buildMode) {
         section: frontmatter.section || '',
         subsection: frontmatter.subsection || '',
         deprecated: frontmatter.deprecated || false,
+        template: frontmatter.template || false,
         beta: frontmatter.beta || false,
         demo: frontmatter.demo || false,
         newImplementationLink: frontmatter.newImplementationLink || false,
@@ -183,7 +184,7 @@ function toReactComponent(mdFilePath, source, buildMode) {
     .use(require('./mdx-ast-to-mdx-hast'), {
       watchExternal(file) {
         if (buildMode === 'start') {
-          const watcher = chokidar.watch(file, { ignoreInitial: true });
+          const watcher = chokidar.watch(globSync(file, { ignoreInitial: true}));
           watcher.on('change', () => {
             sourceMDFile(mdFilePath, source, buildMode);
             writeIndex();
@@ -213,24 +214,24 @@ function toReactComponent(mdFilePath, source, buildMode) {
           pageData.examples.push(node.title);
         }
         // Typecheck TS examples
-        if (node.properties.lang === 'ts') {
-          const typerrors = typecheck(
-            path.join(pageData.id, node.title + '.tsx'), // Needs to be unique per-example
-            node.properties.code
-          );
-          typerrors.forEach(({ line, character, message }) => {
-            line = node.position.start.line + line + 1;
-            const column = character;
-            if (buildMode === 'start') {
-              // Don't fail to start over types
-              file.message(`\u001b[31m THIS WILL FAIL THE BUILD\u001b[0m\n  ${message}`, { line, column });
-            } else {
-              console.log('\u001b[31m');
-              file.fail(`\n  ${message}\n`, { line, column });
-              console.log('\u001b[0m');
-            }
-          });
-        }
+        // if (node.properties.lang === 'ts') {
+        //   const typerrors = typecheck(
+        //     path.join(pageData.id, node.title + '.tsx'), // Needs to be unique per-example
+        //     node.properties.code
+        //   );
+        //   typerrors.forEach(({ line, character, message }) => {
+        //     line = node.position.start.line + line + 1;
+        //     const column = character;
+        //     if (buildMode === 'start') {
+        //       // Don't fail to start over types
+        //       file.message(`\u001b[31m THIS WILL FAIL THE BUILD\u001b[0m\n  ${message}`, { line, column });
+        //     } else {
+        //       console.log('\u001b[31m');
+        //       file.fail(`\n  ${message}\n`, { line, column });
+        //       console.log('\u001b[0m');
+        //     }
+        //   });
+        // }
       });
     })
     // Add custom PatternFly doc design things
@@ -295,6 +296,7 @@ function sourceMDFile(file, source, buildMode) {
       ...(pageData.hideNavItem && { hideNavItem: pageData.hideNavItem }),
       ...(pageData.beta && { beta: pageData.beta }),
       ...(pageData.deprecated && { deprecated: pageData.deprecated }),
+      ...(pageData.template && { template: pageData.template }),
       ...(pageData.demo && { demo: pageData.demo }),
       ...(pageData.sortValue && { sortValue: pageData.sortValue }),
       ...(pageData.subsectionSortValue && { subsectionSortValue: pageData.subsectionSortValue })
@@ -348,12 +350,12 @@ module.exports = {
   writeIndex,
   watchMD() {
     globs.props.forEach(({ glob, ignore }) => {
-      const propWatcher = chokidar.watch(glob, { ignored: ignore, ignoreInitial: true });
+      const propWatcher = chokidar.watch(globSync(glob, { ignored: ignore, ignoreInitial: true}));
       propWatcher.on('add', sourcePropsFile);
       propWatcher.on('change', sourcePropsFile);
     });
     globs.md.forEach(({ glob, source, ignore }) => {
-      const mdWatcher = chokidar.watch(glob, { ignored: ignore, ignoreInitial: true });
+      const mdWatcher = chokidar.watch(globSync(glob, { ignored: ignore, ignoreInitial: true }));
       function onMDFileChange(file) {
         sourceMDFile(file, source, 'start');
         writeIndex();

package/scripts/md/styled-tags.js

@@ -1,10 +1,8 @@
 const visit = require('unist-util-visit');
 
-const styledMdTags = [
+const contentStyledMdTags = [
   'p',
   'ul',
-  'ul',
-  'ul',
   'ol',
   'li',
   'dl',
@@ -12,35 +10,45 @@ const styledMdTags = [
   'small',
   'hr',
   'dt',
+  'dd'
+];
+
+const styledMdTags = [
+  ...contentStyledMdTags,
   'code',
   'table',
   'img'
-];
+]
 
 function styledTags() {
   return tree => {
     visit(tree, 'element', node => {
+      node.properties.className = node.properties.className || '';
+      
+      if (contentStyledMdTags.includes(node.tagName)) {
+        node.properties.className += `pf-v6-c-content--${node.tagName}`;
+      }
+
       if (styledMdTags.includes(node.tagName)) {
-        node.properties.className = node.properties.className || '';
         node.properties.className += node.properties.className ? ' ' : '';
-        node.properties.className += `ws-${node.tagName}`;
-        // Match pf-v5-c-table implementation
+        node.properties.className += `ws-${node.tagName} `;
+        // Match pf-v6-c-table implementation
         // https://pf4.patternfly.org/components/table/html/basic-table/
         if (node.tagName === 'table') {
-          node.properties.className += ' pf-v5-c-table pf-m-grid-lg pf-m-compact';
+          node.properties.className += ' pf-v6-c-table pf-m-grid-lg pf-m-compact';
           node.properties.role = 'grid';
           let columnHeaders = [];
           for (let child of node.children) {
             if (child.tagName === 'thead') {
-              child.properties.className = 'pf-v5-c-table__thead';
+              child.properties.className = 'pf-v6-c-table__thead';
               // Find column headers
               const tr = child.children.find(child => child.tagName === 'tr');
               tr.properties.role = 'row';
-              tr.properties.className = 'pf-v5-c-table__tr';
+              tr.properties.className = 'pf-v6-c-table__tr';
               tr.children
                 .filter(child => child.tagName === 'th')
                 .forEach(th => {
-                  th.properties.className = `${th.properties.className} pf-v5-c-table__th pf-m-wrap`;
+                  th.properties.className = `${th.properties.className} pf-v6-c-table__th pf-m-wrap`;
                   th.properties.role = 'columnheader';
                   th.properties.scope = 'col';
                   let colName = '';
@@ -57,17 +65,17 @@ function styledTags() {
             }
             else if (child.tagName === 'tbody') {
               child.properties.role = 'rowgroup';
-              child.properties.className = 'pf-v5-c-table__tbody';
+              child.properties.className = 'pf-v6-c-table__tbody';
               child.children
                 .filter(tr => tr.tagName === 'tr')
                 .forEach(tr => {
                   tr.properties.role = 'row';
-                  tr.properties.className = 'pf-v5-c-table__tr';
+                  tr.properties.className = 'pf-v6-c-table__tr';
                   tr.children
                     .filter(td => td.tagName === 'td')
                     .forEach((td, i) => {
                       td.properties.role = 'cell';
-                      td.properties.className = 'pf-v5-c-table__td';
+                      td.properties.className = 'pf-v6-c-table__td';
                       if (columnHeaders[i]) {
                         td.properties['data-label'] = columnHeaders[i];
                       }

package/scripts/md/typecheck.js

@@ -37,6 +37,7 @@ const reactStyles = globSync(path.join(reactStylesDir, 'css/**/*.d.ts'))
 const defaultImports = [
   'react',
   '@reach/router',
+  '@patternfly/react-charts/next',
   '@patternfly/react-core/next',
   '@patternfly/react-core/deprecated',
   '@patternfly/react-table/deprecated',

package/scripts/webpack/prerender.js

@@ -31,7 +31,8 @@ async function prerender(url) {
     // For react-consoles
     createElementNS: () => ({
       download: {}
-    })
+    }),
+    documentElement: { style: {} }
   };
   global.self = {
     // For react-console

package/scripts/webpack/webpack.base.config.js

@@ -2,7 +2,6 @@ const path = require('path');
 const webpack = require('webpack');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 module.exports = (_env, argv) => {
   const {
@@ -47,6 +46,7 @@ module.exports = (_env, argv) => {
             /react-[\w-]+\\src\\.*\\examples/, // fix for Windows
             /react-[\w-]+\/patternfly-docs\/.*\/examples/, //fixes for extensions
             /react-[\w-]+\\patternfly-docs\\.*\\examples/,
+            path.resolve(__dirname, '../../../../node_modules/@patternfly/design-tokens/patternfly-docs/content')
           ].concat(includePaths.map(path => new RegExp(path))),
           exclude: [
             path.resolve(__dirname, '../../node_modules'), // Temporarily compile theme using webpack for development
@@ -56,20 +56,12 @@ module.exports = (_env, argv) => {
             options: {
               cacheDirectory: '.cache/babel',
               cacheCompression: false,
-              presets: [['@babel/preset-env', {
-                loose: true,
-                corejs: 3,
-                useBuiltIns: 'entry',
-                exclude: ['transform-regenerator', 'transform-async-to-generator'],
-                modules: false,
-                targets: "> 0.25%, not dead"
-              }]],
-              plugins: [
-                '@babel/plugin-transform-react-jsx',
-                '@babel/plugin-proposal-class-properties',
-                '@babel/plugin-proposal-optional-chaining',
-                ["@babel/plugin-proposal-private-methods", { "loose": false }],
-                ["@babel/plugin-proposal-private-property-in-object", { "loose": false }]
+              presets: [
+                '@babel/preset-react',
+                ['@babel/preset-env', {
+                  loose: true,
+                  targets: '> 1%, not dead'
+                }],
               ],
             }
           },
@@ -155,9 +147,6 @@ module.exports = (_env, argv) => {
         patterns: [
           { from: path.join(__dirname, '../../assets'), to: 'assets' }
         ]
-      }),
-      new MonacoWebpackPlugin({
-        globalAPI: true,
       })
     ],
     stats: 'minimal'

package/scripts/writeScreenshots.js

@@ -11,7 +11,7 @@ sharp.cache(false);
 async function writeScreenshot({ page, data: { url, urlPrefix } }) {
   await page.goto(url);
   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
-  await page.waitForSelector('.pf-v5-u-h-100');
+  await page.waitForSelector('.pf-v6-u-h-100');
   const outfile = path.join(
     screenshotBase,
     url.replace(`${urlPrefix}/`, '') + '.png'
@@ -32,7 +32,7 @@ async function writeScreenshots({ urlPrefix, allRoutes, filterTerm }) {
     concurrency: Cluster.CONCURRENCY_CONTEXT,
     maxConcurrency: os.cpus().length,
     puppeteerOptions: {
-      headless: true, // set to false for testing...
+      headless: 'new', // set to false for testing...
       args: ["--no-sandbox", "--disable-setuid-sandbox"],
       defaultViewport: {width: 1920, height: 1080}
     }

package/templates/mdx.css

@@ -1,302 +1,25 @@
-#ws-page-content-router {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.ws-release-notes-toc {
-  margin-bottom: var(--pf-v5-global--spacer--lg);
-}
-
-.ws-release-notes-toc .pf-v5-c-card {
-  height: 100%;
-}
-
-.ws-release-notes-toc .pf-v5-c-card__title {
-  padding-bottom: var(--pf-v5-global--spacer--xs);
-}
-
-.ws-release-notes-toc .pf-v5-c-card__title .pf-v5-c-title {
-  display: inline;
-}
-
-.ws-release-notes-toc .pf-v5-c-card__title a {
-  margin-right: var(--pf-v5-global--spacer--sm);
-}
-
-.ws-release-notes-toc .pf-v5-c-card__title .pf-v5-c-badge {
-  vertical-align: text-top;
-}
-
-.ws-release-notes-toc .pf-v5-c-card__body {
-  color: #72767B;
-  font-family: var(--pf-v5-global--FontFamily--text);
-  font-size: var(--pf-v5-global--FontSize--md);
-  font-weight: 400;
-  line-height: 1.5;
+p.pf-v6-c-content--p.ws-p {
+  margin: 0;
 }
 
 .ws-code {
   display: inline-block;
-  background-color: var(--pf-v5-global--BackgroundColor--100);
-  padding: 1px var(--pf-v5-global--spacer--sm);
-  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--300);
+  background-color: var(--pf-t--global--background--color--secondary--default);
+  padding: 1px var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--nonstatus--gray--default);
   white-space: pre-wrap;
-  font-size: var(--pf-v5-global--FontSize--sm);
-  font-family: var(--pf-v5-global--FontFamily--monospace);
+  font-size: var(--pf-t--global--font--size--body--sm);
+  font-family: var(--pf-t--global--font--family--mono);
 }
 
-.ws-p + .ws-code {
-  margin-bottom: var(--pf-v5-c-content--MarginBottom);
-}
-
-/* Table styles */
-/* Undo patternfly reset to respect MD table styles */
-.ws-table td[align="center"],
-.ws-table th[align="center"] {
-  text-align: center;
-}
-.ws-table td[align="left"],
-.ws-table th[align="left"] {
-  text-align: left;
-}
-.ws-table td[align="right"],
-.ws-table th[align="right"] {
-  text-align: right;
-}
 .ws-content-table > .ws-table {
-  table-layout: fixed;
-  width: 100%;
-}
-.ws-table td > code,
-.ws-table th > code,
-.ws-table tr > code {
-  white-space: normal;
-}
-.ws-table tbody > tr > td {
-  vertical-align: top;
+  margin-bottom: var(--pf-t--global--spacer--md);
 }
 
-/*
- * Copied from pf-v5-c-content.
- */
-:root {
-  --pf-v5-c-content--MarginBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-content--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-content--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-content--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-content--heading--FontFamily: var(--pf-v5-global--FontFamily--heading);
-  --pf-v5-c-content--h1--MarginTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--h1--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--h1--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-content--h1--FontSize: var(--pf-v5-global--FontSize--2xl);
-  --pf-v5-c-content--h1--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-content--h2--MarginTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--h2--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--h2--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-content--h2--FontSize: var(--pf-v5-global--FontSize--xl);
-  --pf-v5-c-content--h2--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-content--h3--MarginTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--h3--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--h3--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-content--h3--FontSize: var(--pf-v5-global--FontSize--lg);
-  --pf-v5-c-content--h3--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-content--h4--MarginTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--h4--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--h4--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-content--h4--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-content--h4--FontWeight: var(--pf-v5-global--FontWeight--semi-bold);
-  --pf-v5-c-content--h5--MarginTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--h5--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--h5--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-content--h5--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-content--h5--FontWeight: var(--pf-v5-global--FontWeight--semi-bold);
-  --pf-v5-c-content--h6--MarginTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--h6--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--h6--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-content--h6--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-content--h6--FontWeight: var(--pf-v5-global--FontWeight--semi-bold);
-  --pf-v5-c-content--small--MarginBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--small--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-content--small--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-content--small--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-content--small--FontWeight: var(--pf-v5-global--FontWeight--semi-bold);
-  --pf-v5-c-content--a--Color: var(--pf-v5-global--link--Color);
-  --pf-v5-c-content--a--TextDecoration: var(--pf-v5-global--link--TextDecoration);
-  --pf-v5-c-content--a--hover--Color: var(--pf-v5-global--link--Color--hover);
-  --pf-v5-c-content--a--hover--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
-  --pf-v5-c-content--blockquote--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--blockquote--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--blockquote--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--blockquote--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--blockquote--FontWeight: var(--pf-v5-global--FontWeight--light);
-  --pf-v5-c-content--blockquote--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-content--blockquote--BorderLeftColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-content--blockquote--BorderLeftWidth: var(--pf-v5-global--BorderWidth--lg);
-  --pf-v5-c-content--ol--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--ol--MarginTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--ol--MarginLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--ol--nested--MarginTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--ol--nested--MarginLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--ul--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--ul--MarginTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--ul--MarginLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--ul--nested--MarginTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--ul--nested--MarginLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--ul--ListStyle: var(--pf-v5-global--ListStyle);
-  --pf-v5-c-content--li--MarginTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--dl--ColumnGap: var(--pf-v5-global--spacer--2xl);
-  --pf-v5-c-content--dl--RowGap: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--dt--FontWeight: var(--pf-v5-global--FontWeight--semi-bold);
-  --pf-v5-c-content--dt--MarginTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--dt--sm--MarginTop: 0;
-  --pf-v5-c-content--hr--Height: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-content--hr--BackgroundColor: var(--pf-v5-global--BorderColor--100);
-  font-size: var(--pf-v5-c-content--FontSize);
-  line-height: var(--pf-v5-c-content--LineHeight);
-  color: var(--pf-v5-c-content--Color); }
-.ws-li + li {
-  margin-top: var(--pf-v5-c-content--li--MarginTop); }
-.ws-p:not(:last-child),
-.ws-dl:not(:last-child),
-.ws-ol:not(:last-child),
-.ws-ul:not(:last-child),
-.ws-blockquote:not(:last-child),
-.ws-small:not(:last-child),
-.ws-pre:not(:last-child),
-.ws-hr:not(:last-child),
-.ws-table:not(:last-child),
-.ws-content-table:not(:last-child) {
-  margin-bottom: var(--pf-v5-c-content--MarginBottom); }
-.ws-h1,
-.ws-h2,
-.ws-h3,
-.ws-h4,
-.ws-h5,
-.ws-h6 {
-  margin: 0;
-  font-family: var(--pf-v5-c-content--heading--FontFamily); }
-.ws-ol,
-.ws-ul {
-  margin: 0; }
-.ws-h1 {
-  margin-bottom: var(--pf-v5-c-content--h1--MarginBottom);
-  font-size: var(--pf-v5-c-content--h1--FontSize);
-  font-weight: var(--pf-v5-c-content--h1--FontWeight);
-  line-height: var(--pf-v5-c-content--h1--LineHeight); }
-  .ws-h1:not(:first-child) {
-    margin-top: var(--pf-v5-c-content--h1--MarginTop); }
-.ws-h2 {
-  margin-bottom: var(--pf-v5-c-content--h2--MarginBottom);
-  font-size: var(--pf-v5-c-content--h2--FontSize);
-  font-weight: var(--pf-v5-c-content--h2--FontWeight);
-  line-height: var(--pf-v5-c-content--h2--LineHeight);
-    margin-top: var(--pf-v5-c-content--h2--MarginTop); }
-.ws-h3 {
-  margin-bottom: var(--pf-v5-c-content--h3--MarginBottom);
-  font-size: var(--pf-v5-c-content--h3--FontSize);
-  font-weight: var(--pf-v5-c-content--h3--FontWeight);
-  line-height: var(--pf-v5-c-content--h3--LineHeight); }
-  .ws-h3:not(:first-child) {
-    margin-top: var(--pf-v5-c-content--h3--MarginTop); }
-.ws-h4 {
-  margin-bottom: var(--pf-v5-c-content--h4--MarginBottom);
-  font-size: var(--pf-v5-c-content--h4--FontSize);
-  font-weight: var(--pf-v5-c-content--h4--FontWeight);
-  line-height: var(--pf-v5-c-content--h4--LineHeight); }
-  .ws-h4:not(:first-child) {
-    margin-top: var(--pf-v5-c-content--h4--MarginTop); }
-.ws-h5 {
-  margin-bottom: var(--pf-v5-c-content--h5--MarginBottom);
-  font-size: var(--pf-v5-c-content--h5--FontSize);
-  font-weight: var(--pf-v5-c-content--h5--FontWeight);
-  line-height: var(--pf-v5-c-content--h5--LineHeight); }
-  .ws-h5:not(:first-child) {
-    margin-top: var(--pf-v5-c-content--h5--MarginTop); }
-.ws-h6 {
-  margin-bottom: var(--pf-v5-c-content--h6--MarginBottom);
-  font-size: var(--pf-v5-c-content--h6--FontSize);
-  font-weight: var(--pf-v5-c-content--h6--FontWeight);
-  line-height: var(--pf-v5-c-content--h6--LineHeight); }
-  .ws-h6:not(:first-child) {
-    margin-top: var(--pf-v5-c-content--h6--MarginTop); }
-.ws-small {
-  display: block;
-  font-size: var(--pf-v5-c-content--small--FontSize);
-  line-height: var(--pf-v5-c-content--small--LineHeight);
-  color: var(--pf-v5-c-content--small--Color); }
-  .ws-small:not(:last-child) {
-    margin-bottom: var(--pf-v5-c-content--small--MarginBottom); }
-.ws-blockquote {
-  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);
-  font-weight: var(--pf-v5-c-content--blockquote--FontWeight);
-  color: var(--pf-v5-c-content--blockquote--Color);
-  border-left: var(--pf-v5-c-content--blockquote--BorderLeftWidth) solid var(--pf-v5-c-content--blockquote--BorderLeftColor); }
-.ws-hr {
-  height: var(--pf-v5-c-content--hr--Height);
-  background-color: var(--pf-v5-c-content--hr--BackgroundColor);
-  border: none; }
-.ws-ol {
-  padding-left: var(--pf-v5-c-content--ol--PaddingLeft);
-  margin-top: var(--pf-v5-c-content--ol--MarginTop);
-  margin-left: var(--pf-v5-c-content--ol--MarginLeft); }
-  .ws-ol ul {
-    --pf-v5-c-content--ul--MarginTop: var(--pf-v5-c-content--ul--nested--MarginTop);
-    --pf-v5-c-content--ul--MarginLeft: var(--pf-v5-c-content--ul--nested--MarginLeft); }
-  .ws-ol ol {
-    --pf-v5-c-content--ol--MarginTop: var(--pf-v5-c-content--ol--nested--MarginTop);
-    --pf-v5-c-content--ol--MarginLeft: var(--pf-v5-c-content--ol--nested--MarginLeft); }
-.ws-ul {
-  padding-left: var(--pf-v5-c-content--ul--PaddingLeft);
-  margin-top: var(--pf-v5-c-content--ul--MarginTop);
-  margin-left: var(--pf-v5-c-content--ul--MarginLeft);
-  list-style: var(--pf-v5-c-content--ul--ListStyle); }
-  .ws-ul ul {
-    --pf-v5-c-content--ul--MarginTop: var(--pf-v5-c-content--ul--nested--MarginTop);
-    --pf-v5-c-content--ul--MarginLeft: var(--pf-v5-c-content--ul--nested--MarginLeft); }
-  .ws-ul ol {
-    --pf-v5-c-content--ol--MarginTop: var(--pf-v5-c-content--ol--nested--MarginTop);
-    --pf-v5-c-content--ol--MarginLeft: var(--pf-v5-c-content--ol--nested--MarginLeft); }
-.ws-dl {
-  display: grid;
-  grid-template-columns: 1fr; }
-  @media screen and (min-width: 576px) {
-    .ws-dl {
-      grid-template: auto / auto 1fr;
-      grid-column-gap: var(--pf-v5-c-content--dl--ColumnGap);
-      grid-row-gap: var(--pf-v5-c-content--dl--RowGap); } }
-.ws-dt {
-  font-weight: var(--pf-v5-c-content--dt--FontWeight); }
-  .ws-dt:not(:first-child) {
-    margin-top: var(--pf-v5-c-content--dt--MarginTop); }
-    @media screen and (min-width: 576px) {
-      .ws-dt:not(:first-child) {
-        --pf-v5-c-content--dt--MarginTop: var(--pf-v5-c-content--dt--sm--MarginTop); } }
-  @media screen and (min-width: 576px) {
-    .ws-dt {
-      grid-column: 1; } }
-@media screen and (min-width: 576px) {
-  .ws-dd {
-    grid-column: 2; } }
-
-@media screen and (max-width: 1450px) {
-  .ws-mdx-child-template {
-    flex-direction: column;
-  }
-}
-
-.ws-mdx-content {
-  flex-grow: 1;
-  min-width: 0;
-}
-
-/* Design asked for this. A nice side effect is that the TOC doesn't "jump" between pages */
-.ws-mdx-content-content {
-  max-width: 832px;
+.ws-image {
+  text-align: center;
 }
 
-/* Overlay the footer */
 .ws-back-to-top {
-  z-index: 2;
+  z-index: var(--pf-t--global--z-index--2xl);
 }