@patternfly/documentation-framework 2.0.0-alpha.32 → 2.0.0-alpha.34

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 2.0.0-alpha.34 (2023-05-05)
+
+
+### Features
+
+* **docs:** Update docs framework with latest react code ([#3517](https://github.com/patternfly/patternfly-org/issues/3517)) ([2df0147](https://github.com/patternfly/patternfly-org/commit/2df014737dbbe35033d0b28ee71b40d5fbe22ed2))
+
+
+
+
+
+# 2.0.0-alpha.33 (2023-05-04)
+
+
+### Bug Fixes
+
+* **css:** update css selectors for v5 versioning ([#3516](https://github.com/patternfly/patternfly-org/issues/3516)) ([f681945](https://github.com/patternfly/patternfly-org/commit/f681945e2de1200fbb7d2d6ab8262091b1e72a8e))
+
+
+
+
+
 # 2.0.0-alpha.32 (2023-05-02)
 
 **Note:** Version bump only for package @patternfly/documentation-framework

package/components/autoLinkHeader/autoLinkHeader.css

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

package/components/cssVariables/cssVariables.css

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

package/components/example/example.css

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

package/components/example/example.js

@@ -119,7 +119,7 @@ export const Example = ({
   if (lang === 'html') {
     livePreview = (
       <div
-        className={css('ws-preview-html', isFullscreenPreview && 'pf-u-h-100')}
+        className={css('ws-preview-html', isFullscreenPreview && 'pf-v5-u-h-100')}
         dangerouslySetInnerHTML={{ __html: editorCode }}
       />
     );
@@ -152,7 +152,7 @@ export const Example = ({
 
   if (isFullscreenPreview) {
     return (
-      <div id={previewId} className={css(className, 'pf-u-h-100')}>
+      <div id={previewId} className={css(className, 'pf-v5-u-h-100')}>
         {livePreview}
         {hasDarkThemeSwitcher && (
           <div className="ws-theme-switch-full-page">
@@ -178,7 +178,7 @@ export const Example = ({
     <div className="ws-example">
       <div className="ws-example-header">
         <AutoLinkHeader
-          metaText={isBeta && <Badge className="ws-beta-badge pf-u-ml-xs">Beta</Badge>}
+          metaText={isBeta && <Badge className="ws-beta-badge pf-v5-u-ml-xs">Beta</Badge>}
           size="h4"
           headingLevel="h3"
           className="ws-example-heading"

package/components/footer/footer.css

@@ -1,11 +1,11 @@
-.ws-org-pfsite-l-footer.pf-c-page__main-section {
+.ws-org-pfsite-l-footer.pf-v5-c-page__main-section {
   font-family: "RedHatText";
   font-weight: 300;
   background-color: #1a1a1a !important;
-  --pf-c-page__main-section--PaddingTop: var(--pf-global--spacer--xl);
-  --pf-c-page__main-section--PaddingRight: var(--pf-global--spacer--2xl);
-  --pf-c-page__main-section--PaddingBottom: var(--pf-global--spacer--2xl);
-  --pf-c-page__main-section--PaddingLeft: var(--pf-global--spacer--2xl);
+  --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);
   /* 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-global--spacer--md);
-  color: var(--pf-global--Color--light-100) !important;
+  margin-right: var(--pf-v5-global--spacer--md);
+  color: var(--pf-v5-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-global--spacer--md);
-  margin-bottom: var(--pf-global--spacer--md);
+  margin-top: var(--pf-v5-global--spacer--md);
+  margin-bottom: var(--pf-v5-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-global--Color--light-100);
+  color: var(--pf-v5-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-c-page .pf-c-page__main-section.ws-org-pfsite-l-footer-dark {
+.pf-v5-c-page .pf-v5-c-page__main-section.ws-org-pfsite-l-footer-dark {
   /* Hide long overflowing tocs */
   z-index: 1;
 }
-.pf-c-page__main-section.ws-org-pfsite-l-footer-dark > * {
+.pf-v5-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-global--spacer--sm);
-  padding-left: var(--pf-global--spacer--sm);
-  border-right: var(--pf-global--BorderWidth--sm) solid #d2d2d2;
+  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;
   font-weight: 300;
   color: #d2d2d2;
   text-decoration: underline;

package/components/footer/footer.js

@@ -19,12 +19,12 @@ export const Footer = () => (
           sm={12}
           md={6}
           mdOffset={1}
-          className="pf-u-mb-lg pf-u-mb-0-on-sm"
+          className="pf-v5-u-mb-lg pf-v5-u-mb-0-on-sm"
         >
-          <Grid className="pf-u-py-xl">
-            <GridItem sm={6} md={4} className="pf-u-ml-md pf-u-ml-0-on-md pf-u-mb-xl pf-u-mb-0-on-md">
+          <Grid className="pf-v5-u-py-xl">
+            <GridItem sm={6} md={4} className="pf-v5-u-ml-md pf-v5-u-ml-0-on-md pf-v5-u-mb-xl pf-v5-u-mb-0-on-md">
               <p
-                className="pf-c-title ws-org-pfsite-footer-menu-list-title"
+                className="pf-v5-c-title ws-org-pfsite-footer-menu-list-title"
               >
                 QUICKLINKS
               </p>
@@ -82,10 +82,10 @@ export const Footer = () => (
             <GridItem
               sm={6}
               md={4}
-              className="pf-u-mt-lg pf-u-mt-0-on-sm pf-u-ml-md pf-u-ml-0-on-md pf-u-mb-xl pf-u-mb-0-on-md"
+              className="pf-v5-u-mt-lg pf-v5-u-mt-0-on-sm pf-v5-u-ml-md pf-v5-u-ml-0-on-md pf-v5-u-mb-xl pf-v5-u-mb-0-on-md"
             >
               <p
-                className="pf-c-title ws-org-pfsite-footer-menu-list-title"
+                className="pf-v5-c-title ws-org-pfsite-footer-menu-list-title"
               >
                 CONTRIBUTE
               </p>
@@ -125,7 +125,7 @@ export const Footer = () => (
             <GridItem
               sm={6}
               md={4}
-              className="pf-u-mt-lg pf-u-mt-0-on-md pf-u-ml-md pf-u-ml-0-on-md"
+              className="pf-v5-u-mt-lg pf-v5-u-mt-0-on-md pf-v5-u-ml-md pf-v5-u-ml-0-on-md"
             >
               <p
                 className="ws-org-pfsite-footer-menu-list-title"
@@ -180,10 +180,10 @@ export const Footer = () => (
           </Grid>
         </GridItem>
         <GridItem sm={12} md={4}>
-          <Grid className="pf-u-pt-xl ws-org-pfsite-l-footer-column">
-            <GridItem className="pf-u-px-xl">
+          <Grid className="pf-v5-u-pt-xl ws-org-pfsite-l-footer-column">
+            <GridItem className="pf-v5-u-px-xl">
               <Link
-                className="pf-c-page__header-brand-link pf-c-brand ws-org-pfsite-footer-menu-about-logo pf-u-pb-md"
+                className="pf-v5-c-page__header-brand-link pf-v5-c-brand ws-org-pfsite-footer-menu-about-logo pf-v5-u-pb-md"
                 to="/"
               >
                 <Brand src={logo} alt="Patternfly Logo" />
@@ -192,7 +192,7 @@ export const Footer = () => (
                 PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.
               </p>
             </GridItem>
-            <GridItem className="ws-org-pfsite-footer-menu-social-links pf-u-px-xl">
+            <GridItem className="ws-org-pfsite-footer-menu-social-links pf-v5-u-px-xl">
               <Link
                 to="//github.com/patternfly"
                 target="top"
@@ -213,7 +213,7 @@ export const Footer = () => (
       </Grid>
     </PageSection>
     <PageSection key="footer-2" className="ws-org-pfsite-l-footer-dark pf-m-no-fill">
-      <Grid className="pf-u-py-xl-on-sm pf-u-py-0-on-md pf-u-align-items-center">
+      <Grid className="pf-v5-u-py-xl-on-sm pf-v5-u-py-0-on-md pf-v5-u-align-items-center">
         <GridItem md={2} mdOffset={1}>
           <Link
             to="//www.redhat.com"
@@ -233,7 +233,7 @@ export const Footer = () => (
             Copyright &copy; 2022 Red Hat, Inc.
           </span>
         </GridItem>
-        <GridItem md={4} lg={5} className="pf-u-ml-xl-on-xl">
+        <GridItem md={4} lg={5} className="pf-v5-u-ml-xl-on-xl">
           <Link
             to="//www.redhat.com/en/about/privacy-policy"
             target="top"

package/components/gdprBanner/gdprBanner.css

@@ -9,6 +9,6 @@
 #ws-gdpr-banner {
   max-width: 95vw;
   flex-wrap: nowrap;
-  background: var(--pf-global--BackgroundColor--100);
-  border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--Color--100);
+  background: var(--pf-v5-global--BackgroundColor--100);
+  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--Color--100);
 }

package/components/gdprBanner/gdprBanner.js

@@ -14,8 +14,8 @@ export const GdprBanner = () => {
 
   return !isBannerOpen ? null : (
     <div className="ws-gdpr-banner-container pf-l-flex">
-      <div id="ws-gdpr-banner" className="pf-l-flex pf-u-py-md pf-m-align-items-center">
-        <p id="ws-gdpr-banner-text" className="pf-u-ml-xl">
+      <div id="ws-gdpr-banner" className="pf-l-flex pf-v5-u-py-md pf-m-align-items-center">
+        <p id="ws-gdpr-banner-text" className="pf-v5-u-ml-xl">
           We use cookies on our websites to deliver our online services.
           Details about how we use cookies and how you may disable them are set out in our <a href="//www.redhat.com/en/about/privacy-policy">Privacy Statement</a>.
           By using this website you agree to our use of cookies.

package/components/inlineAlert/inlineAlert.js

@@ -9,7 +9,7 @@ export const InlineAlert = ({
   <Alert
     variant={variant}
     title={title}
-    className="pf-u-my-md"
+    className="pf-v5-u-my-md"
     style={{ marginBottom: '1rem' }}
     isInline
     component="h2"

package/components/propsTable/propsTable.js

@@ -18,9 +18,9 @@ import accessibleStyles from "@patternfly/react-styles/css/utilities/Accessibili
 export const PropsTable = ({ title, description, rows, allPropComponents }) => (
   <React.Fragment>
     <AutoLinkHeader size="h3">{title}</AutoLinkHeader>
-    <Table className="pf-u-mt-md pf-u-mb-lg" variant="compact" aria-label={title} gridBreakPoint="grid-lg">
+    <Table className="pf-v5-u-mt-md pf-v5-u-mb-lg" variant="compact" aria-label={title} gridBreakPoint="grid-lg">
       <Caption>
-        {description && <div className="pf-u-mb-md">{description}</div>}
+        {description && <div className="pf-v5-u-mb-md">{description}</div>}
         <div>
           <span className="ws-prop-required">*</span>required
         </div>
@@ -64,7 +64,7 @@ export const PropsTable = ({ title, description, rows, allPropComponents }) => (
                   {row.beta && (
                     <Badge
                       key={`${row.name}-${idx}`}
-                      className="ws-beta-badge pf-u-ml-sm"
+                      className="ws-beta-badge pf-v5-u-ml-sm"
                     >
                       Beta
                     </Badge>

package/components/sectionGallery/sectionDataListLayout.js

@@ -37,7 +37,7 @@ export const SectionDataListLayout = ({ galleryItems, layoutView }) => {
                   )}
                 </DataListCell>,
                 <DataListCell width={5} key="text-description">
-                  <Split className="pf-u-mb-md">
+                  <Split className="pf-v5-u-mb-md">
                     <SplitItem isFilled>
                       <TextContent>
                         <Text component={TextVariants.h2}>

package/components/sectionGallery/sectionGallery.css

@@ -4,26 +4,26 @@
 
 .ws-section-gallery {
   /* top placement */
-  margin-top: calc(var(--pf-c-page__main-section--PaddingTop) * -1);
+  margin-top: calc(var(--pf-v5-c-page__main-section--PaddingTop) * -1);
 }
 
 /* Toolbar styles */
-.ws-section-gallery .pf-c-toolbar {
-  margin-left: calc(var(--pf-c-page__main-section--PaddingLeft) * -1);
-  border-bottom: var(--pf-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-c-page__sidebar--m-light--BorderRightColor);
-  margin-bottom: var(--pf-global--spacer--md);
-  width: calc(100% + var(--pf-c-page__main-section--PaddingLeft) + var(--pf-c-page__main-section--PaddingRight));
+.ws-section-gallery .pf-v5-c-toolbar {
+  margin-left: calc(var(--pf-v5-c-page__main-section--PaddingLeft) * -1);
+  border-bottom: var(--pf-v5-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-v5-c-page__sidebar--m-light--BorderRightColor);
+  margin-bottom: var(--pf-v5-global--spacer--md);
+  width: calc(100% + var(--pf-v5-c-page__main-section--PaddingLeft) + var(--pf-v5-c-page__main-section--PaddingRight));
   /* avoid hoverable data list items overlapping toolbar */
-  z-index: calc(var(--pf-global--ZIndex--xs) + 2);
+  z-index: calc(var(--pf-v5-global--ZIndex--xs) + 2);
 }
 
 /* Match toolbar left-padding to gallery left-padding */
-.ws-section-gallery .pf-c-toolbar .pf-c-toolbar__content {
-  --pf-c-toolbar__content--PaddingLeft: var(--pf-c-page__main-section--PaddingLeft);
+.ws-section-gallery .pf-v5-c-toolbar .pf-v5-c-toolbar__content {
+  --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-page__main-section--PaddingLeft);
 }
 
 /* Avoid toolbar wrap on smaller screens */
-.ws-section-gallery .pf-c-toolbar__content-section {
+.ws-section-gallery .pf-v5-c-toolbar__content-section {
   flex-wrap: nowrap;
 }
 
@@ -34,11 +34,11 @@
 }
 
 /* Ensure same height for all cards in a gallery row */
-.ws-section-gallery .pf-c-card {
+.ws-section-gallery .pf-v5-c-card {
   height: 100%;
 }
 
 /* Limit width for data list view only */
-.ws-section-gallery .pf-c-data-list {
+.ws-section-gallery .pf-v5-c-data-list {
   max-width: 956px;
 }

package/components/sectionGallery/sectionGalleryToolbar.js

@@ -22,7 +22,7 @@ export const SectionGalleryToolbar = ({ galleryItems, searchTerm, setSearchTerm,
           </ToggleGroup>
         </ToolbarItem>
       </ToolbarGroup>
-      <ToolbarItem variant="pagination" spacer={{default: 'spacerMd', md: 'spacerNone'}} style={{'--pf-c-toolbar__item--MinWidth': "max-content"}}>
+      <ToolbarItem variant="pagination" spacer={{default: 'spacerMd', md: 'spacerNone'}} style={{'--pf-v5-c-toolbar__item--MinWidth': "max-content"}}>
         <Text component={TextVariants.small}>{ galleryItems.length }{ countText }</Text>
       </ToolbarItem>
     </ToolbarContent>

package/components/sideNav/sideNav.css

@@ -1,21 +1,21 @@
-.ws-page-sidebar .pf-c-nav {
-  --pf-c-nav__link--before--BorderBottomWidth: 0;
-  --pf-c-nav--m-light__link--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
-  --pf-c-nav--m-light__link--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
-  --pf-c-nav--m-light__link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
-  --pf-c-nav--m-light__link--active--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
-  --pf-c-nav__link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--200);
+.ws-page-sidebar .pf-v5-c-nav {
+  --pf-v5-c-nav__link--before--BorderBottomWidth: 0;
+  --pf-v5-c-nav--m-light__link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
+  --pf-v5-c-nav--m-light__link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
+  --pf-v5-c-nav--m-light__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
+  --pf-v5-c-nav--m-light__link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-200);
+  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
 }
 
-.ws-side-nav-list .pf-c-nav__item.pf-m-expandable::before {
+.ws-side-nav-list .pf-v5-c-nav__item.pf-m-expandable::before {
   border-bottom: 0;
 }
 
-.pf-c-nav__subsection-title {
-  color: var(--ws-toc-link--Color, var(--pf-global--Color--300));
-  font-size: var(--pf-global--FontSize--sm);
+.pf-v5-c-nav__subsection-title {
+  color: var(--ws-toc-link--Color, var(--pf-v5-global--Color--300));
+  font-size: var(--pf-v5-global--FontSize--sm);
 }
 
 #ws-sticky-nav-tabs {
-  z-index: var(--pf-global--ZIndex--2xl);
+  z-index: var(--pf-v5-global--ZIndex--2xl);
 }

package/components/sideNav/sideNav.js

@@ -19,14 +19,14 @@ const NavItem = ({ text, href }) => {
   return (
     <PageContextConsumer key={href + text}>
       {({onNavToggle, isNavOpen }) => (
-          <li key={href + text} className="pf-c-nav__item" onClick={() => isMobileView && onNavToggle()}>
+          <li key={href + text} className="pf-v5-c-nav__item" onClick={() => isMobileView && onNavToggle()}>
             <Link
               to={href}
               getProps={({ isCurrent, href, location }) => {
                 const { pathname } = location;
                 return {
                   className: css(
-                    'pf-c-nav__link',
+                    'pf-v5-c-nav__link',
                     (isCurrent || pathname.startsWith(href + '/')) && 'pf-m-current'
                   )
                 }}

package/components/tableOfContents/tableOfContents.css

@@ -1,39 +1,39 @@
 .ws-toc {
   align-self: flex-start;
   position: sticky;
-  width: calc(100% + var(--pf-c-page__main-section--PaddingLeft) + var(--pf-c-page__main-section--PaddingRight));
-  background-color: var(--pf-global--BackgroundColor--200);
+  width: calc(100% + var(--pf-v5-c-page__main-section--PaddingLeft) + var(--pf-v5-c-page__main-section--PaddingRight));
+  background-color: var(--pf-v5-global--BackgroundColor--200);
   z-index: 501;
-  margin: calc(var(--pf-c-page__main-section--PaddingTop) * -1) calc(var(--pf-c-page__main-section--PaddingRight) * -2) var(--pf-global--spacer--md) calc(var(--pf-c-page__main-section--PaddingLeft) * -1);
-  padding: var(--pf-global--spacer--md) 0 var(--pf-global--spacer--md) var(--pf-global--spacer--md);
-  box-shadow: var(--pf-global--BoxShadow--lg-bottom);
+  margin: calc(var(--pf-v5-c-page__main-section--PaddingTop) * -1) calc(var(--pf-v5-c-page__main-section--PaddingRight) * -2) var(--pf-v5-global--spacer--md) calc(var(--pf-v5-c-page__main-section--PaddingLeft) * -1);
+  padding: var(--pf-v5-global--spacer--md) 0 var(--pf-v5-global--spacer--md) var(--pf-v5-global--spacer--md);
+  box-shadow: var(--pf-v5-global--BoxShadow--lg-bottom);
 }
 
 .ws-toc.pf-m-expanded {
-  box-shadow: var(--pf-global--BoxShadow--sm-bottom)
+  box-shadow: var(--pf-v5-global--BoxShadow--sm-bottom)
 }
 
 /* Mobile jumplinks */
 @media (max-width: 1450px) {
-  .ws-toc.pf-m-expanded .pf-c-jump-links__main {
+  .ws-toc.pf-m-expanded .pf-v5-c-jump-links__main {
     max-height: 65vh;
     overflow: auto;
   }
   
-  .ws-toc .pf-c-jump-links__header {
+  .ws-toc .pf-v5-c-jump-links__header {
     position: sticky;
     top: 0;
-    background-color: var(--pf-global--BackgroundColor--200);
+    background-color: var(--pf-v5-global--BackgroundColor--200);
     z-index: 2;
   }
 }
 
-.ws-toc .pf-c-jump-links__main {
+.ws-toc .pf-v5-c-jump-links__main {
   scrollbar-width: none;
 }
 
 /* Hide TOC scrollbar Chrome, Safari & Opera */
-.ws-toc .pf-c-jump-links__main::-webkit-scrollbar {
+.ws-toc .pf-v5-c-jump-links__main::-webkit-scrollbar {
   display: none;
 }
 
@@ -46,7 +46,7 @@
     -ms-overflow-style: none;
     scrollbar-width: none;
     order: 1;
-    padding: 0 var(--pf-global--spacer--lg) var(--pf-global--spacer--lg) var(--pf-global--spacer--2xl);
+    padding: 0 var(--pf-v5-global--spacer--lg) var(--pf-v5-global--spacer--lg) var(--pf-v5-global--spacer--2xl);
     flex-grow: 1;
     background: none;
     margin: 0;
@@ -59,18 +59,18 @@
 }
 
 /* .ws-toc-link { */
-.ws-toc-item .pf-c-jump-links__link {
+.ws-toc-item .pf-v5-c-jump-links__link {
   position: relative;
   display: block;
-  color: var(--ws-toc-link--Color, var(--pf-global--Color--300));
-  font-size: var(--pf-global--FontSize--sm);
+  color: var(--ws-toc-link--Color, var(--pf-v5-global--Color--300));
+  font-size: var(--pf-v5-global--FontSize--sm);
   margin: -4px 0;
 }
 
-.ws-toc-sublist > .ws-toc-item:first-child .pf-c-jump-links__link {
+.ws-toc-sublist > .ws-toc-item:first-child .pf-v5-c-jump-links__link {
   margin-top: 0;
 }
 
-.ws-toc-item.pf-m-current .pf-c-jump-links__link::before {
+.ws-toc-item.pf-m-current .pf-v5-c-jump-links__link::before {
   z-index: 1;
 }