@patternfly/documentation-framework 6.0.0-alpha.4 → 6.0.0-alpha.40

package/app.js

@@ -3,7 +3,6 @@ import { createRoot, hydrateRoot } from 'react-dom/client';
 import { Router, useLocation } from '@reach/router';
 import 'client-styles'; // Webpack replaces this import: patternfly-docs.css.js
 import { SideNavLayout } from '@patternfly/documentation-framework/layouts';
-import { Footer } from '@patternfly/documentation-framework/components';
 import { MDXTemplate } from '@patternfly/documentation-framework/templates/mdx';
 import { routes, groupedRoutes, fullscreenRoutes, getAsyncComponent } from './routes';
 import { trackEvent } from './helpers';
@@ -12,7 +11,6 @@ import './components/cssVariables/cssVariables.css';
 import './components/tableOfContents/tableOfContents.css';
 import './components/example/example.css';
 import './components/footer/footer.css';
-import './components/sideNav/sideNav.css';
 import './layouts/sideNavLayout/sideNavLayout.css';
 
 const AppRoute = ({ child, title, path }) => {
@@ -37,16 +35,15 @@ const AppRoute = ({ child, title, path }) => {
   return (
     <React.Fragment>
       {child}
-      {process.env.hasFooter && <Footer />}
     </React.Fragment>
   );
 }
 
 const SideNavRouter = () => {
-  const componentsData = process?.env?.componentsData;
+  const componentsData = process.env.componentsData;
   return (
     <SideNavLayout groupedRoutes={groupedRoutes} navOpen={true} >
-      <Router id="ws-page-content-router">
+      <Router id="ws-page-content-router" component="main">
         {Object.entries(routes)
           .map(([path, { Component, title, sources, id }]) => Component
             ? <AppRoute

package/components/autoLinkHeader/autoLinkHeader.css

@@ -3,8 +3,8 @@
 }
 
 .ws-heading-anchor {
-  color: var(--pf-v5-global--Color--100);
-  transform: translate(calc(-100% - var(--pf-v5-global--spacer--xs)), -50%);
+/*   color: var(--pf-v6-global--Color--100); */
+  transform: translate(calc(-100% - var(--pf-t--global--spacer--xs)), -50%);
   opacity: 0;
   position: absolute;
   left: 0;

package/components/autoLinkHeader/autoLinkHeader.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import { Title, Flex, FlexItem } from '@patternfly/react-core';
+import { Title, Flex, FlexItem, Text } from '@patternfly/react-core';
 import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon';
 import { Link } from '../link/link';
 import { slugger } from '../../helpers/slugger';
+import { css } from '@patternfly/react-styles';
 
 // "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"
 const sizes = {
@@ -25,13 +26,13 @@ export const AutoLinkHeader = ({
   const slug = id || slugger(children);
 
   return (
-    <Flex alignItems={{ default: 'alignItemsCenter'}} spaceItems={{ default: 'spaceItemsNone' }}>
+    <Flex alignItems={{ default: 'alignItemsCenter'}} spaceItems={{ default: "spaceItemsSm" }}>
       <FlexItem>
         <Title
           id={slug}
           size={sizes[size]}
           headingLevel={headingLevel || size}
-          className={`ws-heading ${className}`}
+          className={css('ws-heading', className)}
           tabIndex={-1}
         >
           <Link href={`#${slug}`} className="ws-heading-anchor" tabIndex="-1" aria-hidden>
@@ -40,7 +41,7 @@ export const AutoLinkHeader = ({
           {children}
         </Title>
       </FlexItem>
-      <FlexItem>  {metaText}</FlexItem>
+      <FlexItem>{metaText}</FlexItem>
     </Flex>
   )
 };

package/components/cssVariables/cssVariables.css

@@ -2,14 +2,14 @@
   display: inline-block;
   height: 18px;
   width: 18px;
-  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--200);
-  border-radius: var(--pf-v5-global--BorderRadius--lg);
+/*   border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--BorderColor--200); */
+/*   border-radius: var(--pf-v6-global--BorderRadius--lg); */
 }
 
 .ws-td-text {
-  font-size: var(--pf-v5-global--FontSize--sm) !important;
+/*   font-size: var(--pf-v6-global--FontSize--sm) !important; */
 }
 
 .ws-css-property {
-  padding: var(--pf-v5-global--spacer--xs) var(--pf-v5-global--spacer--md);
+  padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--md);
 }

package/components/cssVariables/cssVariables.js

@@ -62,7 +62,7 @@ const flattenList = files => {
 export class CSSVariables extends React.Component {
   constructor(props) {
     super(props);
-    const prefixToken = props.prefix.replace("pf-v5-", "").replace(/-+/g, "_");
+    const prefixToken = props.prefix.replace("pf-v6-", "").replace(/-+/g, "_");
     const applicableFiles = Object.entries(tokensModule)
       .filter(([key, val]) => prefixToken === key)
       .sort(([key1], [key2]) => key1.localeCompare(key2))
@@ -103,12 +103,12 @@ export class CSSVariables extends React.Component {
           <div key={rowKey}>
             <div
               key={`${rowKey}_1`}
-              className="pf-v5-l-flex pf-m-space-items-sm"
+              className="pf-v6-l-flex pf-m-space-items-sm"
             >
               {isColorRegex.test(value) && (
                 <div
                   key={`${rowKey}_2`}
-                  className="pf-v5-l-flex pf-m-column pf-m-align-self-center"
+                  className="pf-v6-l-flex pf-m-column pf-m-align-self-center"
                 >
                   <span
                     className="ws-color-box"
@@ -118,7 +118,7 @@ export class CSSVariables extends React.Component {
               )}
               <div
                 key={`${rowKey}_3`}
-                className="pf-v5-l-flex pf-m-column pf-m-align-self-center ws-td-text"
+                className="pf-v6-l-flex pf-m-column pf-m-align-self-center ws-td-text"
               >
                 {value}
               </div>
@@ -170,7 +170,7 @@ export class CSSVariables extends React.Component {
   render() {
     return (
       <React.Fragment>
-        {this.props.autoLinkHeader && <AutoLinkHeader size="h3" className="pf-v5-u-mt-lg pf-v5-u-mb-md">{`Prefixed with '${this.props.prefix}'`}</AutoLinkHeader>}
+        {this.props.autoLinkHeader && <AutoLinkHeader size="h3" className="pf-v6-u-mt-lg pf-v6-u-mb-md">{`Prefixed with '${this.props.prefix}'`}</AutoLinkHeader>}
         <CSSSearch getDebouncedFilteredRows={this.getDebouncedFilteredRows} />
         <Table
           variant="compact"
@@ -180,7 +180,7 @@ export class CSSVariables extends React.Component {
             <Tr>
               {!this.props.hideSelectorColumn && (
                 <React.Fragment>
-                  <Th />
+                  <Th screenReaderText="Expand or collapse column" />
                   <Th>Selector</Th>
                 </React.Fragment>
               )}

package/components/example/example.css

@@ -3,52 +3,52 @@
 }
 
 .ws-example {
-  margin-top: var(--pf-v5-global--spacer--lg);
-  margin-bottom: var(--pf-v5-global--spacer--lg);
+  margin-top: var(--pf-t--global--spacer--lg);
+  margin-bottom: var(--pf-t--global--spacer--lg);
 }
 
 .ws-example > .ws-example-header {
-  padding: var(--pf-v5-global--spacer--md);
+  padding: var(--pf-t--global--spacer--md);
 }
 
 .ws-example-header > .ws-example-heading:not(:last-child) {
-  margin-bottom: var(--pf-v5-global--spacer--md);
+  margin-bottom: var(--pf-t--global--spacer--md);
 }
 
-.ws-code-editor:not(.ws-example-code-expanded) > .pf-v5-c-code-editor__header::before {
-  --pf-v5-c-code-editor__header--before--BorderBottomWidth: 0;
+.ws-code-editor:not(.ws-example-code-expanded) > .pf-v6-c-code-editor__header::before {
+  --pf-v6-c-code-editor__header--before--BorderBottomWidth: 0;
 }
 
 .ws-code-editor-control {
-  --pf-v5-c-button--m-control--BackgroundColor: transparent;
-  --pf-v5-c-button--m-control--active--BackgroundColor: transparent;
-  --pf-v5-c-button--m-control--focus--BackgroundColor: transparent;
-  --pf-v5-c-button--m-control--hover--BackgroundColor: transparent;
+  --pf-v6-c-button--m-control--BackgroundColor: transparent;
+  --pf-v6-c-button--m-control--active--BackgroundColor: transparent;
+  --pf-v6-c-button--m-control--focus--BackgroundColor: transparent;
+  --pf-v6-c-button--m-control--hover--BackgroundColor: transparent;
 }
 
-.ws-code-editor-control.pf-v5-c-button {
-  --pf-v5-c-button--after--BorderWidth: 0;
+.ws-code-editor-control.pf-v6-c-button {
+  --pf-v6-c-button--after--BorderWidth: 0;
 }
 
 .ws-preview {
-  padding: var(--pf-v5-global--spacer--md);
-  background-color: var(--pf-v5-global--BackgroundColor--100);
-  border-bottom: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--300);
+  padding: var(--pf-t--global--spacer--md);
+/*   background-color: var(--pf-v6-global--BackgroundColor--100); */
+/*   border-bottom: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--BorderColor--300); */
   transition: width .2s ease-in-out;
 }
 
 .ws-core-c-page.ws-preview > .ws-preview-html,
-.ws-react-c-page.ws-preview > .pf-v5-c-page {
+.ws-react-c-page.ws-preview > .pf-v6-c-page {
   overflow: hidden;
 }
 
 .ws-editor {
-  font-size: var(--pf-v5-global--FontSize--md);
+/*   font-size: var(--pf-v6-global--FontSize--md); */
 }
 
 .ws-editor .token.punctuation,
 .ws-editor .token.operator {
-  color: var(--pf-v5-global--danger-color--100);
+/*   color: var(--pf-v6-global--danger-color--100); */
 }
 
 .ws-preview__thumbnail-link {
@@ -100,33 +100,33 @@
   color: rgba(255,255,255,.4);
 }
 
-.pf-v5-c-badge.ws-beta-badge {
-  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--primary-color--100);
-  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--primary-color--100);
+.pf-v6-c-badge.ws-beta-badge {
+/*   --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-v6-global--BackgroundColor--100); */
+/*   --pf-v6-c-badge--m-unread--Color: var(--pf-v6-global--primary-color--100); */
+/*   border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--primary-color--100); */
 }
 
 .ws-prop-required {
-  color: var(--pf-v5-global--danger-color--100);
+/*   color: var(--pf-v6-global--danger-color--100); */
 }
 
 .ws-full-page-utils {
   position: fixed;
   right: 0;
   bottom: 0;
-  padding: var(--pf-v5-global--spacer--lg);
-  z-index: var(--pf-v5-global--ZIndex--2xl);
+  padding: var(--pf-t--global--spacer--lg);
+/*   z-index: var(--pf-v6-global--ZIndex--2xl); */
 }
 
 .ws-full-page-utils::before {
   position: absolute;
   inset: 0;
   content: "";
-  background-color: var(--pf-v5-global--BackgroundColor--100);
+/*   background-color: var(--pf-v6-global--BackgroundColor--100); */
   opacity: 0.8;
-  box-shadow: var(--pf-v5-global--BoxShadow--sm);
+/*   box-shadow: var(--pf-v6-global--BoxShadow--sm); */
 }
 
-.pf-v5-theme-dark .ws-theme-switch-full-page::before {
-  background-color: var(--pf-v5-global--BackgroundColor--300);
+.pf-v6-theme-dark .ws-theme-switch-full-page::before {
+/*   background-color: var(--pf-v6-global--BackgroundColor--300); */
 }

package/components/example/example.js

@@ -1,6 +1,15 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { useLocation } from '@reach/router';
-import { Button, CodeBlock, Flex, CodeBlockCode, debounce, Label, Switch, Tooltip } from '@patternfly/react-core';
+import {
+  Button,
+  CodeBlock,
+  Flex,
+  CodeBlockCode,
+  debounce,
+  Label,
+  Switch,
+  Tooltip,
+} from '@patternfly/react-core';
 import * as reactCoreModule from '@patternfly/react-core';
 import * as reactCoreNextModule from '@patternfly/react-core/next';
 import * as reactCoreDeprecatedModule from '@patternfly/react-core/deprecated';
@@ -16,13 +25,13 @@ import {
   getReactParams,
   getExampleClassName,
   getExampleId,
-  liveCodeTypes
+  liveCodeTypes,
 } from '../../helpers';
 import { convertToReactComponent } from '@patternfly/ast-helpers';
 import missingThumbnail from './missing-thumbnail.jpg';
 import { RtlContext } from '../../layouts';
 
-const errorComponent = err => <pre>{err.toString()}</pre>;
+const errorComponent = (err) => <pre>{err.toString()}</pre>;
 
 class ErrorBoundary extends React.Component {
   constructor(props) {
@@ -34,7 +43,7 @@ class ErrorBoundary extends React.Component {
     errorInfo._suppressLogging = true;
     this.setState({
       error: error,
-      errorInfo: errorInfo
+      errorInfo: errorInfo,
     });
   }
 
@@ -94,15 +103,24 @@ export const Example = ({
   // md file location in node_modules, used to resolve relative import paths in examples
   relPath = '',
   // absolute url to hosted file
-  sourceLink = ''
+  sourceLink = '',
 }) => {
   if (isFullscreenPreview) {
     isFullscreen = false;
-    window.addEventListener('load', () => {
-      //append a class to the document body to indicate to screenshot/automated visual regression tools that the page has loaded
-      document.body.classList.add('page-loaded');
-    });
   }
+
+  //append a class to the document body on fullscreen examples to indicate to screenshot/automated visual regression tools that the page has loaded
+  const addPageLoadedClass = () => document.body.classList.add('page-loaded');
+  useEffect(() => {
+    if (!isFullscreenPreview) return;
+
+    document.readyState === 'complete'
+      ? addPageLoadedClass()
+      : window.addEventListener('load', addPageLoadedClass);
+
+    return () => window.removeEventListener('load', addPageLoadedClass);
+  }, []);
+
   if (!lang) {
     // Inline code
     return <code className="ws-code">{code}</code>;
@@ -124,20 +142,26 @@ export const Example = ({
     ...reactCoreModule,
     ...reactTableModule,
     ...(source === 'react-next' ? reactCoreNextModule : {}),
-    ...(source === 'react-deprecated' ? {...reactCoreDeprecatedModule, ...reactTableDeprecatedModule} : {})
+    ...(source === 'react-deprecated'
+      ? { ...reactCoreDeprecatedModule, ...reactTableDeprecatedModule }
+      : {}),
   };
 
   let livePreview = null;
   if (lang === 'html') {
     livePreview = (
       <div
-        className={css('ws-preview-html', isFullscreenPreview && 'pf-v5-u-h-100')}
+        className={css(
+          'ws-preview-html',
+          isFullscreenPreview && 'pf-v6-u-h-100'
+        )}
         dangerouslySetInnerHTML={{ __html: editorCode }}
       />
     );
   } else {
     try {
-      const { code: transformedCode, hasTS } = convertToReactComponent(editorCode);
+      const { code: transformedCode, hasTS } =
+        convertToReactComponent(editorCode);
       if (hasTS) {
         lang = 'ts';
       } else {
@@ -147,7 +171,11 @@ export const Example = ({
       const componentNames = Object.keys(scope);
       const componentValues = Object.values(scope);
 
-      const getPreviewComponent = new Function('React', ...componentNames, transformedCode);
+      const getPreviewComponent = new Function(
+        'React',
+        ...componentNames,
+        transformedCode
+      );
       const PreviewComponent = getPreviewComponent(React, ...componentValues);
 
       livePreview = (
@@ -164,20 +192,37 @@ export const Example = ({
 
   if (isFullscreenPreview) {
     return (
-      <div id={previewId} className={css(className, 'pf-v5-u-h-100')}>
+      <div id={previewId} className={css(className, 'pf-v6-u-h-100')}>
         {livePreview}
         {(hasDarkThemeSwitcher || hasRTLSwitcher) && (
-          <Flex direction={{ default: 'column' }} gap={{ default: 'gapLg' }} className="ws-full-page-utils pf-v5-m-dir-ltr ">
+          <Flex
+            direction={{ default: 'column' }}
+            gap={{ default: 'gapLg' }}
+            className="ws-full-page-utils pf-v6-m-dir-ltr "
+          >
             {hasDarkThemeSwitcher && (
-              <Switch id="ws-example-theme-switch" label="Dark theme" defaultChecked={false} onChange={() =>
-              document.querySelector('html').classList.toggle('pf-v5-theme-dark')} />
+              <Switch
+                id="ws-example-theme-switch"
+                label="Dark theme"
+                defaultChecked={false}
+                onChange={() =>
+                  document
+                    .querySelector('html')
+                    .classList.toggle('pf-v6-theme-dark')
+                }
+              />
             )}
             {hasRTLSwitcher && (
-              <Switch id="ws-example-rtl-switch" label="RTL" defaultChecked={false} onChange={() => {
-                const html = document.querySelector('html');
-                const curDir = html.dir;
-                html.dir = (curDir !== 'rtl') ? 'rtl' : 'ltr';
-            }} />
+              <Switch
+                id="ws-example-rtl-switch"
+                label="RTL"
+                defaultChecked={false}
+                onChange={() => {
+                  const html = document.querySelector('html');
+                  const curDir = html.dir;
+                  html.dir = curDir !== 'rtl' ? 'rtl' : 'ltr';
+                }}
+              />
             )}
           </Flex>
         )}
@@ -188,12 +233,21 @@ export const Example = ({
   const codeBoxParams = getParameters(
     lang === 'html'
       ? getStaticParams(title, editorCode)
-      : getReactParams(title, editorCode, scope, lang, relativeImports, relPath, sourceLink)
+      : getReactParams(
+          title,
+          editorCode,
+          scope,
+          lang,
+          relativeImports,
+          relPath,
+          sourceLink
+        )
   );
-  const fullscreenLink = loc.pathname.replace(/\/$/, '')
-    + (loc.pathname.endsWith(source) ? '' : `/${source}`)
-    + '/'
-    + slugger(title);
+  const fullscreenLink =
+    loc.pathname.replace(/\/$/, '') +
+    (loc.pathname.endsWith(source) ? '' : `/${source}`) +
+    '/' +
+    slugger(title);
 
   return (
     <div className="ws-example">
@@ -203,22 +257,28 @@ export const Example = ({
             <React.Fragment>
               {isBeta && (
                 <Tooltip content="This beta component is currently under review and is still open for further evolution.">
-                  <Button variant="plain">
-                    <Label isCompact color="blue">Beta</Label>
+                  <Button variant="plain" hasNoPadding>
+                    <Label isCompact color="blue">
+                      Beta
+                    </Label>
                   </Button>
                 </Tooltip>
               )}
               {isDemo && (
                 <Tooltip content="Demos show how multiple components can be used in a single design.">
-                  <Button variant="plain">
-                    <Label isCompact color="purple">Demo</Label>
+                  <Button variant="plain" hasNoPadding>
+                    <Label isCompact color="purple">
+                      Demo
+                    </Label>
                   </Button>
                 </Tooltip>
               )}
               {isDeprecated && (
                 <Tooltip content="Deprecated components are available for use but are no longer being maintained or enhanced.">
-                  <Button variant="plain">
-                    <Label isCompact color="grey">Deprecated</Label>
+                  <Button variant="plain" hasNoPadding>
+                    <Label isCompact color="grey">
+                      Deprecated
+                    </Label>
                   </Button>
                 </Tooltip>
               )}
@@ -232,28 +292,34 @@ export const Example = ({
         </AutoLinkHeader>
         {children}
       </div>
-      {isFullscreen
-        ? <div className="ws-preview">
-            <a
-              className="ws-preview__thumbnail-link"
-              href={fullscreenLink}
-              target="_blank"
-              aria-label={`Open fullscreen ${title} example`}
-            >
-              <img src={thumbnail.src} width={thumbnail.width} height={thumbnail.height} alt={`${title} screenshot`} />
-            </a>
-          </div>
-        : <div
-            id={previewId}
-            className={css(
-              className,
-              isFullscreen ? 'ws-preview-fullscreen' : 'ws-preview',
-              isRTL && 'pf-v5-m-dir-rtl')
-            }
+      {isFullscreen ? (
+        <div className="ws-preview">
+          <a
+            className="ws-preview__thumbnail-link"
+            href={fullscreenLink}
+            target="_blank"
+            aria-label={`Open fullscreen ${title} example`}
           >
-            {livePreview}
-          </div>
-      }
+            <img
+              src={thumbnail.src}
+              width={thumbnail.width}
+              height={thumbnail.height}
+              alt={`${title} screenshot`}
+            />
+          </a>
+        </div>
+      ) : (
+        <div
+          id={previewId}
+          className={css(
+            className,
+            isFullscreen ? 'ws-preview-fullscreen' : 'ws-preview',
+            isRTL && 'pf-v6-m-dir-rtl'
+          )}
+        >
+          {livePreview}
+        </div>
+      )}
       <ExampleToolbar
         lang={lang}
         isFullscreen={isFullscreen}
@@ -266,4 +332,4 @@ export const Example = ({
       />
     </div>
   );
-}
+};

package/components/example/exampleToolbar.js

@@ -103,7 +103,7 @@ export const ExampleToolbar = ({
             copyCode();
             trackEvent('code_editor_control_click', 'click_event', 'COPY_CODE');
           }}
-          variant="control"
+          variant="plain"
           aria-label={copyAriaLabel}
           className={editorControlProps.className}
         >
@@ -124,7 +124,7 @@ export const ExampleToolbar = ({
           >
             <Button
               aria-label={codesandboxAriaLabel}
-              variant="control"
+              variant="plain"
               type="submit"
               onClick={() => {
                 trackEvent('code_editor_control_click', 'click_event', 'CODESANDBOX_LINK');
@@ -218,6 +218,7 @@ export const ExampleToolbar = ({
       onEditorDidMount={onEditorDidMount}
       isReadOnly={isFullscreen}
       className={`${isEditorOpen ? 'ws-example-code-expanded ' : ''}ws-code-editor`}
+      isHeaderPlain
     />
   );
 }

package/components/footer/footer.css

@@ -1,11 +1,11 @@
-.ws-org-pfsite-l-footer.pf-v5-c-page__main-section {
-  font-family: var(--pf-v5-global--FontFamily--text);
+.ws-org-pfsite-l-footer.pf-v6-c-page__main-section {
+/*   font-family: var(--pf-v6-global--FontFamily--text); */
   font-weight: 300;
   background-color: #1a1a1a !important;
-  --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-global--spacer--2xl);
-  --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-global--spacer--2xl);
-  --pf-v5-c-page__main-section--PaddingLeft: var(--pf-v5-global--spacer--2xl);
+  --pf-v6-c-page__main-section--PaddingTop: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-page__main-section--PaddingRight: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-page__main-section--PaddingBottom: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-page__main-section--PaddingLeft: var(--pf-t--global--spacer--2xl);
   /* Hide long overflowing tocs */
   z-index: 1;
 }
@@ -34,8 +34,8 @@
   }
 }
 .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-social-links a {
-  margin-right: var(--pf-v5-global--spacer--md);
-  color: var(--pf-v5-global--Color--light-100) !important;
+  margin-right: var(--pf-t--global--spacer--md);
+/*   color: var(--pf-v6-global--Color--light-100) !important; */
 }
 .ws-org-pfsite-l-footer-column
   .ws-org-pfsite-footer-menu-social-links
@@ -43,8 +43,8 @@
   margin-right: 0;
 }
 .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-social-links {
-  margin-top: var(--pf-v5-global--spacer--md);
-  margin-bottom: var(--pf-v5-global--spacer--md);
+  margin-top: var(--pf-t--global--spacer--md);
+  margin-bottom: var(--pf-t--global--spacer--md);
 }
 @media (max-width: 768px) {
   .ws-org-pfsite-l-footer-column .ws-org-pfsite-footer-menu-social-links {
@@ -71,7 +71,7 @@
   padding-right: 10px;
 }
 .ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-link {
-  color: var(--pf-v5-global--Color--light-100);
+/*   color: var(--pf-v6-global--Color--light-100); */
   font-size: 14px !important;
 }
 .ws-org-pfsite-l-footer .ws-org-pfsite-footer-menu-link:hover {
@@ -86,19 +86,19 @@
 .ws-org-pfsite-l-footer-dark {
   background: #151515 !important;
 }
-.pf-v5-c-page .pf-v5-c-page__main-section.ws-org-pfsite-l-footer-dark {
+.pf-v6-c-page .pf-v6-c-page__main-section.ws-org-pfsite-l-footer-dark {
   /* Hide long overflowing tocs */
   z-index: 1;
 }
-.pf-v5-c-page__main-section.ws-org-pfsite-l-footer-dark > * {
+.pf-v6-c-page__main-section.ws-org-pfsite-l-footer-dark > * {
   font-weight: 300;
   font-size: 12px;
   color: #d2d2d2;
 }
 .ws-org-pfsite-l-footer-dark a {
-  padding-right: var(--pf-v5-global--spacer--sm);
-  padding-left: var(--pf-v5-global--spacer--sm);
-  border-right: var(--pf-v5-global--BorderWidth--sm) solid #d2d2d2;
+  padding-right: var(--pf-t--global--spacer--sm);
+  padding-left: var(--pf-t--global--spacer--sm);
+/*   border-right: var(--pf-v6-global--BorderWidth--sm) solid #d2d2d2; */
   font-weight: 300;
   color: #d2d2d2;
   text-decoration: underline;