diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index 55628712808..8ccb4e0c4e6 100644
--- a/packages/react-core/package.json
+++ b/packages/react-core/package.json
@@ -54,7 +54,7 @@
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.2.0-prerelease.3",
+    "@patternfly/patternfly": "6.0.0-alpha.12",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
diff --git a/packages/react-core/src/components/Masthead/Masthead.tsx b/packages/react-core/src/components/Masthead/Masthead.tsx
index 897f7e2f0c5..990c6fc353b 100644
--- a/packages/react-core/src/components/Masthead/Masthead.tsx
+++ b/packages/react-core/src/components/Masthead/Masthead.tsx
@@ -9,8 +9,6 @@ export interface MastheadProps extends React.DetailedHTMLProps<React.HTMLProps<H
   children?: React.ReactNode;
   /** Additional classes added to the masthead */
   className?: string;
-  /** Background theme color of the masthead */
-  backgroundColor?: 'dark' | 'light' | 'light200';
   /** Display type at various breakpoints */
   display?: {
     default?: 'inline' | 'stack';
@@ -34,7 +32,6 @@ export interface MastheadProps extends React.DetailedHTMLProps<React.HTMLProps<H
 export const Masthead: React.FunctionComponent<MastheadProps> = ({
   children,
   className,
-  backgroundColor = 'dark',
   display = {
     md: 'inline'
   },
@@ -48,8 +45,6 @@ export const Masthead: React.FunctionComponent<MastheadProps> = ({
         styles.masthead,
         formatBreakpointMods(display, styles, 'display-', getBreakpoint(width)),
         formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
-        backgroundColor === 'light' && styles.modifiers.light,
-        backgroundColor === 'light200' && styles.modifiers.light_200,
         className
       )}
       {...props}
diff --git a/packages/react-core/src/components/Masthead/examples/Masthead.md b/packages/react-core/src/components/Masthead/examples/Masthead.md
index 5a6215bc494..94563b6cd8e 100644
--- a/packages/react-core/src/components/Masthead/examples/Masthead.md
+++ b/packages/react-core/src/components/Masthead/examples/Masthead.md
@@ -140,50 +140,6 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 </Masthead>;
 ```
 
-### Light variant
-
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="light-masthead" backgroundColor="light">
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
-```
-
-### Light 200 variant
-
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="light200-masthead" backgroundColor="light200">
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
-```
-
 ### Inset
 
 ```ts
diff --git a/packages/react-core/src/components/NotificationBadge/NotificationBadge.tsx b/packages/react-core/src/components/NotificationBadge/NotificationBadge.tsx
index dbc08233a55..34d00d83357 100644
--- a/packages/react-core/src/components/NotificationBadge/NotificationBadge.tsx
+++ b/packages/react-core/src/components/NotificationBadge/NotificationBadge.tsx
@@ -54,7 +54,7 @@ export const NotificationBadge: React.FunctionComponent<NotificationBadgeProps>
         className={css(styles.notificationBadge, styles.modifiers[variant], isExpanded && styles.modifiers.expanded)}
       >
         {notificationChild}
-        {count > 0 && <span className={css(styles.notificationBadgeCount)}>{count}</span>}
+        {count > 0 && <span className={css(`${styles.notificationBadge}__count`)}>{count}</span>}
       </span>
     </Button>
   );
diff --git a/packages/react-core/src/components/Page/PageSection.tsx b/packages/react-core/src/components/Page/PageSection.tsx
index 0793f85d83e..b3b7ed03c92 100644
--- a/packages/react-core/src/components/Page/PageSection.tsx
+++ b/packages/react-core/src/components/Page/PageSection.tsx
@@ -5,10 +5,7 @@ import { formatBreakpointMods } from '../../helpers/util';
 import { PageContext } from './PageContext';
 
 export enum PageSectionVariants {
-  default = 'default',
-  light = 'light',
-  dark = 'dark',
-  darker = 'darker'
+  default = 'default'
 }
 
 export enum PageSectionTypes {
@@ -26,7 +23,7 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the section */
   className?: string;
   /** Section background color variant */
-  variant?: 'default' | 'light' | 'dark' | 'darker';
+  variant?: 'default';
   /** Section type variant */
   type?: 'default' | 'nav' | 'subnav' | 'breadcrumb' | 'tabs' | 'wizard';
   /** Enables the page section to fill the available vertical space */
@@ -77,10 +74,7 @@ const variantType = {
 };
 
 const variantStyle = {
-  [PageSectionVariants.default]: '',
-  [PageSectionVariants.light]: styles.modifiers.light,
-  [PageSectionVariants.dark]: styles.modifiers.dark_200,
-  [PageSectionVariants.darker]: styles.modifiers.dark_100
+  [PageSectionVariants.default]: ''
 };
 
 export const PageSection: React.FunctionComponent<PageSectionProps> = ({
diff --git a/packages/react-core/src/components/Page/PageSidebar.tsx b/packages/react-core/src/components/Page/PageSidebar.tsx
index 8e5f6a610a9..df6b5f63bbe 100644
--- a/packages/react-core/src/components/Page/PageSidebar.tsx
+++ b/packages/react-core/src/components/Page/PageSidebar.tsx
@@ -15,8 +15,6 @@ export interface PageSidebarProps extends React.HTMLProps<HTMLDivElement> {
   isManagedSidebar?: boolean;
   /** Programmatically manage if the sidebar is shown, if isManagedSidebar is set to true in the Page component, this prop is managed */
   isSidebarOpen?: boolean;
-  /** Indicates the color scheme of the sidebar */
-  theme?: 'dark' | 'light';
   /** Sidebar id */
   id?: string;
 }
@@ -33,7 +31,6 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
   className = '',
   children,
   isSidebarOpen = true,
-  theme = 'dark',
   id = 'page-sidebar',
   ...props
 }: PageSidebarProps) => (
@@ -46,7 +43,6 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
           id={id}
           className={css(
             styles.pageSidebar,
-            theme === 'light' && styles.modifiers.light,
             sidebarOpen && styles.modifiers.expanded,
             !sidebarOpen && styles.modifiers.collapsed,
             className
diff --git a/packages/react-core/src/components/Page/__tests__/Generated/PageSidebar.test.tsx b/packages/react-core/src/components/Page/__tests__/Generated/PageSidebar.test.tsx
index 6653c233175..27317fbcfe0 100644
--- a/packages/react-core/src/components/Page/__tests__/Generated/PageSidebar.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/Generated/PageSidebar.test.tsx
@@ -9,7 +9,7 @@ import {} from '../..';
 
 it('PageSidebar should match snapshot (auto-generated)', () => {
   const { asFragment } = render(
-    <PageSidebar className={"''"} isManagedSidebar={true} isSidebarOpen={true} theme={'dark'}>
+    <PageSidebar className={"''"} isManagedSidebar={true} isSidebarOpen={true}>
       <div>ReactNode</div>
     </PageSidebar>
   );
diff --git a/packages/react-core/src/components/Page/__tests__/Page.test.tsx b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
index 4bcee0f4cc8..761f5fe8d2c 100644
--- a/packages/react-core/src/components/Page/__tests__/Page.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/Page.test.tsx
@@ -32,9 +32,6 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -44,7 +41,7 @@ describe('Page', () => {
   test('Check dark page against snapshot', () => {
     const Header = <PageHeader logo="Logo" headerTools="PageHeaderTools | Avatar" onNavToggle={() => undefined} />;
     const Sidebar = (
-      <PageSidebar isSidebarOpen theme="dark">
+      <PageSidebar isSidebarOpen>
         <PageSidebarBody>Navigation</PageSidebarBody>
       </PageSidebar>
     );
@@ -52,9 +49,6 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -68,9 +62,6 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar}>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -94,9 +85,6 @@ describe('Page', () => {
     const { asFragment } = render(
       <Page {...props} header={Header} sidebar={Sidebar} breadcrumb={<PageBreadcrumb />}>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -127,9 +115,6 @@ describe('Page', () => {
         breadcrumbProps={{ stickyOnBreakpoint: { sm: 'top', md: 'top', lg: 'top', xl: 'top', '2xl': 'top' } }}
       >
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -162,9 +147,6 @@ describe('Page', () => {
         }}
       >
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -189,9 +171,6 @@ describe('Page', () => {
           </Breadcrumb>
         </PageBreadcrumb>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -216,9 +195,6 @@ describe('Page', () => {
           </Breadcrumb>
         </PageBreadcrumb>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -245,9 +221,6 @@ describe('Page', () => {
           </Breadcrumb>
         </PageBreadcrumb>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -275,9 +248,6 @@ describe('Page', () => {
           </Nav>
         </PageNavigation>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -317,9 +287,6 @@ describe('Page', () => {
           </PageNavigation>
         </PageGroup>
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -373,9 +340,6 @@ describe('Page', () => {
         }}
       >
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
@@ -411,9 +375,6 @@ describe('Page', () => {
         data-testid="page-test-id"
       >
         <PageSection variant="default">Section with default background</PageSection>
-        <PageSection variant="light">Section with light background</PageSection>
-        <PageSection variant="dark">Section with dark background</PageSection>
-        <PageSection variant="darker">Section with darker background</PageSection>
       </Page>
     );
 
diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
index 1843b06aabc..6b5798ff1ca 100644
--- a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
+++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap
@@ -41,21 +41,6 @@ exports[`Page Check dark page against snapshot 1`] = `
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -101,21 +86,6 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -265,21 +235,6 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -429,21 +384,6 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -713,21 +653,6 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -1004,21 +929,6 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -1180,21 +1090,6 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -1360,21 +1255,6 @@ exports[`Page Check page to verify skip to content points to main content region
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -1421,21 +1301,6 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -1585,21 +1450,6 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -1749,21 +1599,6 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -1913,21 +1748,6 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -2077,21 +1897,6 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
diff --git a/packages/react-core/src/components/Page/examples/PageGroupSection.tsx b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
index 9256bbceea2..2aac5d0c8b7 100644
--- a/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
+++ b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx
@@ -12,7 +12,6 @@ import {
   PageGroup,
   PageBreadcrumb,
   PageNavigation,
-  PageSectionVariants,
   PageToggleButton,
   Breadcrumb,
   BreadcrumbItem,
@@ -102,10 +101,10 @@ export const PageGroupSection: React.FunctionComponent = () => {
             </BreadcrumbItem>
           </Breadcrumb>
         </PageBreadcrumb>
-        <PageSection variant={PageSectionVariants.light}>Grouped section</PageSection>
+        <PageSection>Grouped section</PageSection>
       </PageGroup>
-      <PageSection variant={PageSectionVariants.dark}>Section 1</PageSection>
-      <PageSection variant={PageSectionVariants.dark}>Section 2</PageSection>
+      <PageSection>Section 1</PageSection>
+      <PageSection>Section 2</PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx b/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx
index d252e937f01..b3c26ba24cc 100644
--- a/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx
+++ b/packages/react-core/src/components/Page/examples/PageHorizontalNav.tsx
@@ -6,7 +6,6 @@ import {
   MastheadBrand,
   MastheadContent,
   PageSection,
-  PageSectionVariants,
   Toolbar,
   ToolbarContent,
   ToolbarItem
@@ -35,9 +34,9 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
 
   return (
     <Page header={header}>
-      <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
-      <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
-      <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
+      <PageSection>Section 1</PageSection>
+      <PageSection>Section 2</PageSection>
+      <PageSection>Section 3</PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx b/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
index 72372668cf9..cc2d3cdfcb9 100644
--- a/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
+++ b/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx
@@ -9,7 +9,6 @@ import {
   PageSidebar,
   PageSidebarBody,
   PageSection,
-  PageSectionVariants,
   PageToggleButton,
   Toolbar,
   ToolbarContent,
@@ -63,13 +62,9 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
   return (
     <Page header={header} sidebar={sidebar}>
       <PageSection>Section with default padding</PageSection>
-      <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
-        Section with no padding
-      </PageSection>
+      <PageSection padding={{ default: 'noPadding' }}>Section with no padding</PageSection>
       <PageSection padding={{ default: 'noPadding', md: 'padding' }}>Section with padding on medium</PageSection>
-      <PageSection variant={PageSectionVariants.light} padding={{ md: 'noPadding' }}>
-        Section with no padding on medium
-      </PageSection>
+      <PageSection padding={{ md: 'noPadding' }}>Section with no padding on medium</PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx b/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx
index ac2b5ac5162..eacf5f12b53 100644
--- a/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx
+++ b/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx
@@ -9,7 +9,6 @@ import {
   PageSidebar,
   PageSidebarBody,
   PageSection,
-  PageSectionVariants,
   PageToggleButton,
   Toolbar,
   ToolbarContent,
@@ -66,9 +65,9 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
 
   return (
     <Page header={header} sidebar={sidebar}>
-      <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
-      <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
-      <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
+      <PageSection>Section 1</PageSection>
+      <PageSection>Section 2</PageSection>
+      <PageSection>Section 3</PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/components/Page/examples/PageTertiaryNav.tsx b/packages/react-core/src/components/Page/examples/PageTertiaryNav.tsx
index b5a11180563..2795e8f9da4 100644
--- a/packages/react-core/src/components/Page/examples/PageTertiaryNav.tsx
+++ b/packages/react-core/src/components/Page/examples/PageTertiaryNav.tsx
@@ -6,7 +6,6 @@ import {
   MastheadBrand,
   MastheadContent,
   PageSection,
-  PageSectionVariants,
   Toolbar,
   ToolbarContent,
   ToolbarItem
@@ -34,9 +33,9 @@ export const PageTertiaryNav: React.FunctionComponent = () => {
 
   return (
     <Page header={header} tertiaryNav="Navigation">
-      <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
-      <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
-      <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
+      <PageSection>Section 1</PageSection>
+      <PageSection>Section 2</PageSection>
+      <PageSection>Section 3</PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx b/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx
index fbd539b1685..4357d19b541 100644
--- a/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx
+++ b/packages/react-core/src/components/Page/examples/PageUncontrolledNav.tsx
@@ -9,7 +9,6 @@ import {
   PageSidebar,
   PageSidebarBody,
   PageSection,
-  PageSectionVariants,
   PageToggleButton,
   Toolbar,
   ToolbarContent,
@@ -50,9 +49,9 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
 
   return (
     <Page isManagedSidebar header={header} sidebar={sidebar}>
-      <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
-      <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
-      <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
+      <PageSection>Section 1</PageSection>
+      <PageSection>Section 2</PageSection>
+      <PageSection>Section 3</PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx b/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
index fb699c4dd27..a1248de01c1 100644
--- a/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
+++ b/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx
@@ -9,7 +9,6 @@ import {
   PageSidebar,
   PageSidebarBody,
   PageSection,
-  PageSectionVariants,
   PageToggleButton,
   Toolbar,
   ToolbarContent,
@@ -62,9 +61,9 @@ export const PageVerticalNav: React.FunctionComponent = () => {
 
   return (
     <Page header={header} sidebar={sidebar}>
-      <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
-      <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
-      <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
+      <PageSection>Section 1</PageSection>
+      <PageSection>Section 2</PageSection>
+      <PageSection>Section 3</PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/demos/Banner.md b/packages/react-core/src/demos/Banner.md
index 13fa3742747..60d3cb79dc1 100644
--- a/packages/react-core/src/demos/Banner.md
+++ b/packages/react-core/src/demos/Banner.md
@@ -20,7 +20,6 @@ import {
   Gallery,
   GalleryItem,
   PageSection,
-  PageSectionVariants,
   TextContent,
   Text
 } from '@patternfly/react-core';
@@ -47,7 +46,7 @@ class BannerDemo extends React.Component {
               <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
             </Flex>
           </Banner>
-          <PageSection variant={PageSectionVariants.light}>
+          <PageSection>
             <TextContent>
               <Text component="h1">Main title</Text>
               <Text component="p">
@@ -87,7 +86,6 @@ import {
   Gallery,
   GalleryItem,
   PageSection,
-  PageSectionVariants,
   TextContent,
   Text
 } from '@patternfly/react-core';
@@ -122,7 +120,7 @@ class BannerDemo extends React.Component {
           </FlexItem>
           <FlexItem grow={{ default: 'grow' }} style={{ minHeight: 0 }}>
             <DashboardWrapper breadcrumb={null}>
-              <PageSection variant={PageSectionVariants.light}>
+              <PageSection>
                 <TextContent>
                   <Text component="h1">Main title</Text>
                   <Text component="p">
diff --git a/packages/react-core/src/demos/CardView/examples/CardView.tsx b/packages/react-core/src/demos/CardView/examples/CardView.tsx
index 61eac10e41f..8e6d004f9ef 100644
--- a/packages/react-core/src/demos/CardView/examples/CardView.tsx
+++ b/packages/react-core/src/demos/CardView/examples/CardView.tsx
@@ -25,7 +25,6 @@ import {
   OverflowMenuDropdownItem,
   OverflowMenuItem,
   PageSection,
-  PageSectionVariants,
   Pagination,
   TextContent,
   Text,
@@ -472,7 +471,7 @@ export const CardViewBasic: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}>
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Projects</Text>
             <Text component="p">This is a demo that showcases PatternFly cards.</Text>
@@ -554,12 +553,7 @@ export const CardViewBasic: React.FunctionComponent = () => {
             ))}
           </Gallery>
         </PageSection>
-        <PageSection
-          isFilled={false}
-          stickyOnBreakpoint={{ default: 'bottom' }}
-          padding={{ default: 'noPadding' }}
-          variant="light"
-        >
+        <PageSection isFilled={false} stickyOnBreakpoint={{ default: 'bottom' }} padding={{ default: 'noPadding' }}>
           <Pagination
             itemCount={totalItemCount}
             page={page}
diff --git a/packages/react-core/src/demos/DashboardWrapper.tsx b/packages/react-core/src/demos/DashboardWrapper.tsx
index da2de39d5a4..73a35d7219b 100644
--- a/packages/react-core/src/demos/DashboardWrapper.tsx
+++ b/packages/react-core/src/demos/DashboardWrapper.tsx
@@ -37,7 +37,7 @@ export const DashboardBreadcrumb = (
 );
 
 const PageTemplateTitle = (
-  <PageSection variant="light">
+  <PageSection>
     <TextContent>
       <Text component="h1">Main title</Text>
       <Text component="p">This is a full page demo.</Text>
diff --git a/packages/react-core/src/demos/JumpLinks.md b/packages/react-core/src/demos/JumpLinks.md
index 2e20acb7e55..3ebb8a360fd 100644
--- a/packages/react-core/src/demos/JumpLinks.md
+++ b/packages/react-core/src/demos/JumpLinks.md
@@ -64,7 +64,7 @@ ScrollspyH2 = () => {
 
   return (
     <DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
-      <PageSection variant="light">
+      <PageSection>
         <Title headingLevel="h1" size="2xl">
           Main title
         </Title>
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
index 721e40cdb1f..c421679018c 100644
--- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
+++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
@@ -31,7 +31,6 @@ import {
   NotificationDrawerListItemHeader,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
@@ -541,7 +540,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
         breadcrumb={PageBreadcrumb}
         mainContainerId={pageId}
       >
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">
@@ -550,7 +549,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
             </Text>
           </TextContent>
         </PageSection>
-        <PageSection variant={PageSectionVariants.light}>Panel section content</PageSection>
+        <PageSection>Panel section content</PageSection>
       </Page>
     </React.Fragment>
   );
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
index e1bf93e05c9..34377b28e49 100644
--- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
+++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
@@ -33,7 +33,6 @@ import {
   NotificationDrawerListItemHeader,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
@@ -780,7 +779,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
         breadcrumb={PageBreadcrumb}
         mainContainerId={pageId}
       >
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">
@@ -789,7 +788,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
             </Text>
           </TextContent>
         </PageSection>
-        <PageSection variant={PageSectionVariants.light}>Panel section content</PageSection>
+        <PageSection>Panel section content</PageSection>
       </Page>
     </React.Fragment>
   );
diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md
index 732b5c4e3f0..df8f6489d1c 100644
--- a/packages/react-core/src/demos/PrimaryDetail.md
+++ b/packages/react-core/src/demos/PrimaryDetail.md
@@ -66,7 +66,6 @@ import {
   MenuToggle,
   MenuToggleCheckbox,
   PageSection,
-  PageSectionVariants,
   Pagination,
   Progress,
   TextContent,
@@ -597,7 +596,7 @@ class PrimaryDetailCardView extends React.Component {
 
     return (
       <DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}>
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Projects</Text>
             <Text component="p">This is a demo that showcases Patternfly Cards.</Text>
@@ -616,7 +615,7 @@ class PrimaryDetailCardView extends React.Component {
             </DrawerContent>
           </Drawer>
         </PageSection>
-        <PageSection isFilled={false} sticky="bottom" padding={{ default: 'noPadding' }} variant="light">
+        <PageSection isFilled={false} sticky="bottom" padding={{ default: 'noPadding' }}>
           <Pagination
             itemCount={filtered.length}
             page={this.state.page}
@@ -651,7 +650,6 @@ import {
   Flex,
   FlexItem,
   PageSection,
-  PageSectionVariants,
   Progress,
   SimpleList,
   SimpleListGroup,
@@ -762,7 +760,7 @@ class PrimaryDetailSimpleListInCard extends React.Component {
 
     return (
       <DashboardWrapper>
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">
@@ -817,7 +815,6 @@ import {
   FlexItem,
   MenuToggle,
   PageSection,
-  PageSectionVariants,
   Progress,
   Text,
   TextContent,
@@ -1000,7 +997,7 @@ class PrimaryDetailDataListInCard extends React.Component {
 
     return (
       <DashboardWrapper>
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">
diff --git a/packages/react-core/src/demos/Tabs.md b/packages/react-core/src/demos/Tabs.md
index dff0305efec..613c17a0ffd 100644
--- a/packages/react-core/src/demos/Tabs.md
+++ b/packages/react-core/src/demos/Tabs.md
@@ -21,7 +21,6 @@ import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import React from 'react';
 import {
   PageSection,
-  PageSectionVariants,
   PageBreadcrumb,
   Breadcrumb,
   BreadcrumbItem,
@@ -157,7 +156,7 @@ TabsOpenDemo = () => {
   return (
     <DashboardWrapper hasNoBreadcrumb>
       {tabsBreadcrumb}
-      <PageSection isWidthLimited variant={PageSectionVariants.light}>
+      <PageSection isWidthLimited>
         <Flex
           spaceItems={{ default: 'spaceItemsMd' }}
           alignItems={{ default: 'alignItemsFlexStart' }}
@@ -176,7 +175,7 @@ TabsOpenDemo = () => {
           </FlexItem>
         </Flex>
       </PageSection>
-      <PageSection type="tabs" variant={PageSectionVariants.light} isWidthLimited>
+      <PageSection type="tabs" isWidthLimited>
         <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="open-tabs-example-tabs-list">
           <Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} tabContentId={`tabContent${0}`} />
           <Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} tabContentId={`tabContent${1}`} />
@@ -185,7 +184,7 @@ TabsOpenDemo = () => {
           <Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />
         </Tabs>
       </PageSection>
-      <PageSection isWidthLimited variant={PageSectionVariants.light}>
+      <PageSection isWidthLimited>
         <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
           <TabContentBody>{tabContent}</TabContentBody>
         </TabContent>
@@ -213,7 +212,6 @@ TabsOpenDemo = () => {
 import React from 'react';
 import {
   PageSection,
-  PageSectionVariants,
   PageBreadcrumb,
   Breadcrumb,
   BreadcrumbItem,
@@ -354,7 +352,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
   return (
     <DashboardWrapper hasNoBreadcrumb>
       {tabsBreadcrumb}
-      <PageSection isWidthLimited variant={PageSectionVariants.light}>
+      <PageSection isWidthLimited>
         <Flex
           spaceItems={{ default: 'spaceItemsMd' }}
           alignItems={{ default: 'alignItemsFlexStart' }}
@@ -373,7 +371,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
           </FlexItem>
         </Flex>
       </PageSection>
-      <PageSection type="tabs" variant={PageSectionVariants.light} isWidthLimited>
+      <PageSection type="tabs" isWidthLimited>
         <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="open-tabs-example-tabs-list">
           <Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} tabContentId={`tabContent${0}`} />
           <Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} tabContentId={`tabContent${1}`} />
@@ -382,7 +380,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
           <Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />
         </Tabs>
       </PageSection>
-      <PageSection isWidthLimited variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
+      <PageSection isWidthLimited padding={{ default: 'noPadding' }}>
         <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
           <TabContentBody>
             <Tabs
diff --git a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
index 97f12acb3db..0be2c8e014c 100644
--- a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
+++ b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
@@ -15,7 +15,6 @@ import {
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader,
   PageSection,
-  PageSectionVariants,
   TextContent,
   Text,
   EmptyStateVariant,
@@ -318,7 +317,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
       notificationDrawer={notificationDrawer}
       isNotificationDrawerExpanded={isDrawerExpanded}
     >
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <TextContent>
           <Text component="h1">Alert Group with Notification Drawer demo</Text>
           <Text component="p">
@@ -330,7 +329,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
         </TextContent>
       </PageSection>
 
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <Button variant="secondary" onClick={() => addNewNotification('success')} style={alertButtonStyle}>
           Add toast success alert
         </Button>
@@ -350,7 +349,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
         </Button>
       </PageSection>
 
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <TextContent>
           <br />
           <Text component="h2">Max displayed alerts</Text>
@@ -370,7 +369,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
           style={{ margin: '12px 0' }}
         />
       </PageSection>
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <AlertGroup isToast isLiveRegion onOverflowClick={onAlertGroupOverflowClick} overflowMessage={overflowMessage}>
           {alerts.slice(0, maxDisplayed)}
         </AlertGroup>
diff --git a/packages/react-core/src/demos/examples/BackToTop/BackToTopNameDemo.tsx b/packages/react-core/src/demos/examples/BackToTop/BackToTopNameDemo.tsx
index 14a1973345b..4c82e61445c 100644
--- a/packages/react-core/src/demos/examples/BackToTop/BackToTopNameDemo.tsx
+++ b/packages/react-core/src/demos/examples/BackToTop/BackToTopNameDemo.tsx
@@ -6,7 +6,6 @@ import {
   Gallery,
   GalleryItem,
   PageSection,
-  PageSectionVariants,
   TextContent,
   Text,
   Page,
@@ -24,7 +23,7 @@ export const Name = () => {
   return (
     <DashboardWrapper breadcrumb={null}>
       <Page>
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">
diff --git a/packages/react-core/src/demos/examples/DashboardWrapper.js b/packages/react-core/src/demos/examples/DashboardWrapper.js
new file mode 100644
index 00000000000..980eef3abc5
--- /dev/null
+++ b/packages/react-core/src/demos/examples/DashboardWrapper.js
@@ -0,0 +1,127 @@
+import React from 'react';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  PageSidebar,
+  PageSidebarBody,
+  SkipToContent,
+  Text,
+  TextContent
+} from '@patternfly/react-core';
+import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
+
+export const DashboardBreadcrumb = (
+  <Breadcrumb>
+    <BreadcrumbItem>Section home</BreadcrumbItem>
+    <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+    <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+    <BreadcrumbItem to="#" isActive>
+      Section landing
+    </BreadcrumbItem>
+  </Breadcrumb>
+);
+
+export const PageTemplateTitle = (
+  <PageSection>
+    <TextContent>
+      <Text component="h1">Main title</Text>
+      <Text component="p">This is a full page demo.</Text>
+    </TextContent>
+  </PageSection>
+);
+
+export default class DashboardWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeItem: 1
+    };
+
+    this.onNavSelect = (_event, result) => {
+      this.setState({
+        activeItem: result.itemId
+      });
+    };
+  }
+
+  render() {
+    const { activeItem } = this.state;
+    const {
+      children,
+      mainContainerId,
+      breadcrumb,
+      header,
+      sidebar,
+      sidebarNavOpen,
+      onPageResize = () => {},
+      hasNoBreadcrumb,
+      notificationDrawer,
+      isNotificationDrawerExpanded,
+      hasPageTemplateTitle,
+      ...pageProps
+    } = this.props;
+
+    let renderedBreadcrumb;
+    if (!hasNoBreadcrumb) {
+      renderedBreadcrumb = breadcrumb !== undefined ? breadcrumb : DashboardBreadcrumb;
+    }
+
+    const PageNav = (
+      <Nav onSelect={this.onNavSelect} aria-label="Nav">
+        <NavList>
+          <NavItem itemId={0} isActive={activeItem === 0} to="#system-panel">
+            System panel
+          </NavItem>
+          <NavItem itemId={1} isActive={activeItem === 1} to="#policy">
+            Policy
+          </NavItem>
+          <NavItem itemId={2} isActive={activeItem === 2} to="#auth">
+            Authentication
+          </NavItem>
+          <NavItem itemId={3} isActive={activeItem === 3} to="#network">
+            Network services
+          </NavItem>
+          <NavItem itemId={4} isActive={activeItem === 4} to="#server">
+            Server
+          </NavItem>
+        </NavList>
+      </Nav>
+    );
+
+    const _sidebar = (
+      <PageSidebar isSidebarOpen={sidebarNavOpen || false}>
+        <PageSidebarBody>{PageNav}</PageSidebarBody>
+      </PageSidebar>
+    );
+    const PageSkipToContent = (
+      <SkipToContent href={`#${mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}`}>
+        Skip to content
+      </SkipToContent>
+    );
+
+    return (
+      <Page
+        header={header !== undefined ? header : <DashboardHeader />}
+        sidebar={sidebar !== undefined ? sidebar : _sidebar}
+        isManagedSidebar
+        skipToContent={PageSkipToContent}
+        breadcrumb={renderedBreadcrumb}
+        mainContainerId={mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}
+        notificationDrawer={notificationDrawer}
+        isNotificationDrawerExpanded={isNotificationDrawerExpanded}
+        {...(typeof onPageResize === 'function' && {
+          onPageResize: (event, resizeObject) => onPageResize(event, resizeObject)
+        })}
+        {...pageProps}
+      >
+        {hasPageTemplateTitle && PageTemplateTitle}
+        {children}
+      </Page>
+    );
+  }
+}
diff --git a/packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js b/packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js
index 14884c5e051..6ef02f253a8 100644
--- a/packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js
+++ b/packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js
@@ -12,7 +12,6 @@ import {
   JumpLinksItem,
   JumpLinksList,
   PageSection,
-  PageSectionVariants,
   Sidebar,
   SidebarContent,
   SidebarPanel,
@@ -70,7 +69,7 @@ export const JumpLinksWithDrawer = () => {
           <DrawerContentBody>
             <Sidebar>
               <SidebarPanel variant="sticky">
-                <PageSection variant={PageSectionVariants.light}>
+                <PageSection>
                   <JumpLinks
                     isVertical={true}
                     label="Jump to section"
@@ -88,10 +87,10 @@ export const JumpLinksWithDrawer = () => {
                 </PageSection>
               </SidebarPanel>
               <SidebarContent>
-                <PageSection id="drawer-toggle" stickyOnBreakpoint={{ default: 'top' }} variant="light">
+                <PageSection id="drawer-toggle" stickyOnBreakpoint={{ default: 'top' }}>
                   <Button onClick={onToggleClick}>Toggle drawer</Button>
                 </PageSection>
-                <PageSection variant={PageSectionVariants.light}>
+                <PageSection>
                   <TextContent>
                     {headings.map((heading) => (
                       <div key={heading} style={{ maxWidth: '800px', marginBottom: '32px' }}>
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
index eac1d3ac227..5e2d2f669c2 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
@@ -31,7 +31,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   PageToggleButton,
@@ -533,7 +532,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       isTertiaryNavGrouped
       isBreadcrumbGrouped
       additionalGroupedContent={
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">This is a full page demo.</Text>
diff --git a/packages/react-core/src/demos/examples/Nav/NavDefault.tsx b/packages/react-core/src/demos/examples/Nav/NavDefault.tsx
index e6ed9631325..e7d68ad6b47 100644
--- a/packages/react-core/src/demos/examples/Nav/NavDefault.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavDefault.tsx
@@ -9,7 +9,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
@@ -72,7 +71,7 @@ export const NavDefault: React.FunctionComponent = () => {
         breadcrumb={DashboardBreadcrumb}
         mainContainerId={pageId}
       >
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">
diff --git a/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx b/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx
index 93ac5f83eba..feb86363a60 100644
--- a/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx
@@ -10,7 +10,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
@@ -98,7 +97,7 @@ export const NavExpandableDemo: React.FunctionComponent = () => {
         breadcrumb={DashboardBreadcrumb}
         mainContainerId={pageId}
       >
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">
diff --git a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
index ba2e6a5a78a..f15bbaf36d6 100644
--- a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
@@ -24,7 +24,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   PageToggleButton,
@@ -270,9 +269,9 @@ export const NavFlyout: React.FunctionComponent = () => {
       skipToContent={PageSkipToContent}
       mainContainerId={pageId}
     >
-      <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
-      <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
-      <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
+      <PageSection>Section 1</PageSection>
+      <PageSection>Section 2</PageSection>
+      <PageSection>Section 3</PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx b/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx
index 9a480ed8cc3..296edfb0b2c 100644
--- a/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx
@@ -5,7 +5,6 @@ import {
   NavItem,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
@@ -80,7 +79,7 @@ export const NavGrouped: React.FunctionComponent = () => {
         skipToContent={PageSkipToContent}
         mainContainerId={pageId}
       >
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">
@@ -89,9 +88,9 @@ export const NavGrouped: React.FunctionComponent = () => {
             </Text>
           </TextContent>
         </PageSection>
-        <PageSection variant={PageSectionVariants.light}>Light</PageSection>
-        <PageSection variant={PageSectionVariants.dark}>Dark</PageSection>
-        <PageSection variant={PageSectionVariants.darker}>Darker</PageSection>
+        <PageSection>Section 1</PageSection>
+        <PageSection>Section 2</PageSection>
+        <PageSection>Section 3</PageSection>
         <PageSection>Content</PageSection>
       </Page>
     </>
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
index 7c9c41c4662..62216b3cb53 100644
--- a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
@@ -23,7 +23,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   SkipToContent,
   TextContent,
   Text,
@@ -211,7 +210,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <Page header={Header} skipToContent={PageSkipToContent} breadcrumb={DashboardBreadcrumb} mainContainerId={pageId}>
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
index 63465716fd9..4a5d9794886 100644
--- a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
@@ -24,7 +24,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSectionTypes,
   PageToggleButton,
   SkipToContent,
@@ -271,7 +270,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
         <PageSection type={PageSectionTypes.breadcrumb} isWidthLimited>
           {DashboardBreadcrumb}
         </PageSection>
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">
diff --git a/packages/react-core/src/demos/examples/Nav/NavManual.tsx b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
index 6824ed0d2ec..836c857957e 100644
--- a/packages/react-core/src/demos/examples/Nav/NavManual.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
@@ -24,7 +24,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   PageToggleButton,
@@ -247,7 +246,7 @@ export const NavManual: React.FunctionComponent = () => {
         skipToContent={PageSkipToContent}
         mainContainerId={pageId}
       >
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">
diff --git a/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx
index ac0624f4394..ca3ea656cf0 100644
--- a/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx
@@ -10,7 +10,6 @@ import {
   Page,
   PageSection,
   PageSectionTypes,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
@@ -116,7 +115,7 @@ export const NavWithSubnav: React.FunctionComponent = () => {
         <PageSection type={PageSectionTypes.breadcrumb} isWidthLimited>
           {DashboardBreadcrumb}
         </PageSection>
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">
diff --git a/packages/react-core/src/demos/examples/Nav/deprecated/NavLight.tsx b/packages/react-core/src/demos/examples/Nav/deprecated/NavLight.tsx
index 2ccaf374bc2..73735bb6d0b 100644
--- a/packages/react-core/src/demos/examples/Nav/deprecated/NavLight.tsx
+++ b/packages/react-core/src/demos/examples/Nav/deprecated/NavLight.tsx
@@ -9,7 +9,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
@@ -70,7 +69,7 @@ export const NavLight: React.FunctionComponent = () => {
         skipToContent={PageSkipToContent}
         mainContainerId={pageId}
       >
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">
diff --git a/packages/react-core/src/demos/examples/Nav/deprecated/NavTertiary.tsx b/packages/react-core/src/demos/examples/Nav/deprecated/NavTertiary.tsx
index 8ec5467f62d..e7315b8ac91 100644
--- a/packages/react-core/src/demos/examples/Nav/deprecated/NavTertiary.tsx
+++ b/packages/react-core/src/demos/examples/Nav/deprecated/NavTertiary.tsx
@@ -9,7 +9,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   SkipToContent,
   TextContent,
   Text
@@ -66,7 +65,7 @@ export const NavTertiary: React.FunctionComponent = () => {
         skipToContent={PageSkipToContent}
         mainContainerId={pageId}
       >
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
index 183ad9c1834..a8063d08d3e 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
@@ -27,7 +27,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   PageToggleButton,
@@ -270,7 +269,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
         }
       }}
     >
-      <PageSection variant={PageSectionVariants.light} isWidthLimited>
+      <PageSection isWidthLimited>
         <TextContent>
           <Text component="h1">Main title</Text>
           <Text component="p">This is a full page demo.</Text>
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
index 91d632ceaa1..1056cb4c9a7 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
@@ -27,7 +27,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   PageToggleButton,
@@ -266,7 +265,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
       isBreadcrumbWidthLimited
       isBreadcrumbGrouped
       additionalGroupedContent={
-        <PageSection variant={PageSectionVariants.light} isWidthLimited>
+        <PageSection isWidthLimited>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">This is a full page demo.</Text>
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
index b94b797c6b5..f04fc8c2e28 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
@@ -29,7 +29,6 @@ import {
   PageBreadcrumb,
   PageGroup,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   PageToggleButton,
@@ -266,7 +265,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
             </BreadcrumbItem>
           </Breadcrumb>
         </PageBreadcrumb>
-        <PageSection variant={PageSectionVariants.light} isWidthLimited>
+        <PageSection isWidthLimited>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">This is a full page demo.</Text>
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
index 5e510c4acc8..c75ca4aab99 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx
@@ -27,7 +27,6 @@ import {
   InputGroup,
   InputGroupItem,
   PageSection,
-  PageSectionVariants,
   Progress,
   Stack,
   StackItem,
@@ -421,7 +420,7 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper>
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <TextContent>
           <Text component="h1">Main title</Text>
           <Text component="p">
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
index 812a44690bc..aaada4e2242 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx
@@ -27,7 +27,6 @@ import {
   InputGroup,
   InputGroupItem,
   PageSection,
-  PageSectionVariants,
   Progress,
   Stack,
   StackItem,
@@ -421,7 +420,7 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper mainContainerId="main-content-page-layout-default-nav">
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <TextContent>
           <Text component="h1">Main title</Text>
           <Text component="p">
@@ -431,7 +430,7 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
         </TextContent>
       </PageSection>
       <Divider component="div" />
-      <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
+      <PageSection padding={{ default: 'noPadding' }}>
         <Drawer isExpanded={isDrawerExpanded}>
           <DrawerContent panelContent={panelContent}>
             <DrawerContentBody>{drawerContent}</DrawerContentBody>
diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
index bcbe877128d..2197695f6e7 100644
--- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
+++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx
@@ -27,7 +27,6 @@ import {
   InputGroup,
   InputGroupItem,
   PageSection,
-  PageSectionVariants,
   Progress,
   Stack,
   StackItem,
@@ -421,7 +420,7 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper>
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <TextContent>
           <Text component="h1">Main title</Text>
           <Text component="p">
@@ -431,7 +430,7 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
         </TextContent>
       </PageSection>
       <Divider component="div" />
-      <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
+      <PageSection padding={{ default: 'noPadding' }}>
         <Drawer isExpanded={isDrawerExpanded} isInline>
           <DrawerContent panelContent={panelContent}>
             <DrawerContentBody>{drawerContent}</DrawerContentBody>
diff --git a/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx b/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx
index 355f6f62826..051385b75af 100644
--- a/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx
@@ -8,7 +8,6 @@ import {
   Card,
   CardBody,
   CardTitle,
-  PageSectionVariants,
   Modal,
   ModalVariant,
   Tab,
@@ -82,7 +81,7 @@ export const ModalTabs: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <DashboardWrapper mainContainerId="main-content-card-view-default-nav">
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Projects</Text>
             <Text component="p">Click any project card to view Tabs within Modals.</Text>
diff --git a/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx b/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx
index 7c6b051140f..adead442a75 100644
--- a/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx
@@ -127,7 +127,7 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection type="tabs" isWidthLimited variant="light">
+      <PageSection type="tabs" isWidthLimited>
         <Tabs
           activeKey={activeTabKey}
           onSelect={(_event, tabIndex) => handleTabClick(Number(tabIndex))}
@@ -140,7 +140,7 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
           <Tab eventKey={3} title={<TabTitleText>Support</TabTitleText>} tabContentId={`tabContent${3}`} />
         </Tabs>
       </PageSection>
-      <PageSection isWidthLimited variant="light">
+      <PageSection isWidthLimited>
         <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
           <TabContentBody>What's new panel</TabContentBody>
         </TabContent>
diff --git a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
index f5e2230410d..8f72becb6a7 100644
--- a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
@@ -24,7 +24,6 @@ import {
   OverflowMenuGroup,
   OverflowMenuItem,
   PageSection,
-  PageSectionVariants,
   Progress,
   ProgressSize,
   Tabs,
@@ -391,12 +390,12 @@ export const TablesAndTabs = () => {
   return (
     <DashboardWrapper>
       <React.Fragment>
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <Title headingLevel="h1" size="2xl">
             Nodes
           </Title>
         </PageSection>
-        <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
+        <PageSection padding={{ default: 'noPadding' }}>
           {toolbar}
           <Divider />
           {tabContent}
diff --git a/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx b/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx
index e8014f1b798..01f4cf3ff21 100644
--- a/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx
+++ b/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx
@@ -8,7 +8,6 @@ import {
   SelectList,
   SelectOption,
   PageSection,
-  PageSectionVariants,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -483,7 +482,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
 
   return (
     <DashboardWrapper sidebarNavOpen={!mobileView} onPageResize={onPageResize}>
-      <PageSection variant={PageSectionVariants.light}>
+      <PageSection>
         <Toolbar id="log-viewer-toolbar" inset={{ default: 'insetNone' }}>
           <ToolbarContent>{items}</ToolbarContent>
         </Toolbar>
diff --git a/packages/react-core/src/demos/examples/Wizard/InPage.tsx b/packages/react-core/src/demos/examples/Wizard/InPage.tsx
index d410b70f568..74cb069056f 100644
--- a/packages/react-core/src/demos/examples/Wizard/InPage.tsx
+++ b/packages/react-core/src/demos/examples/Wizard/InPage.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { PageSection, PageSectionTypes, PageSectionVariants, Wizard, WizardStep } from '@patternfly/react-core';
+import { PageSection, PageSectionTypes, Wizard, WizardStep } from '@patternfly/react-core';
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 export const WizardFullPage: React.FunctionComponent = () => (
   <React.Fragment>
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
+      <PageSection type={PageSectionTypes.wizard}>
         <Wizard>
           <WizardStep name="Information" id="wizard-step-1">
             <p>Step 1 content</p>
diff --git a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx
index 6fe3d7e1cd5..4e106a3cdc5 100644
--- a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx
+++ b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx
@@ -17,7 +17,6 @@ import {
   Page,
   PageSection,
   PageSectionTypes,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
@@ -159,13 +158,13 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
         breadcrumb={PageBreadcrumb}
         mainContainerId={pageId}
       >
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">A demo of a wizard in a page.</Text>
           </TextContent>
         </PageSection>
-        <PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
+        <PageSection type={PageSectionTypes.wizard}>
           <Wizard>
             <WizardStep body={null} name="Information" id="wizard-step-1">
               {createStepContentWithDrawer('Information step')}
diff --git a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx
index 1a641a40ebd..6cc5afd3a4e 100644
--- a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx
+++ b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx
@@ -18,7 +18,6 @@ import {
   Page,
   PageSection,
   PageSectionTypes,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
@@ -164,13 +163,13 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
         breadcrumb={PageBreadcrumb}
         mainContainerId={pageId}
       >
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">A demo of a wizard in a page.</Text>
           </TextContent>
         </PageSection>
-        <PageSection type={PageSectionTypes.wizard} variant={PageSectionVariants.light}>
+        <PageSection type={PageSectionTypes.wizard} ß>
           <Wizard>
             <WizardStep body={null} name="Information" id="wizard-step-1">
               {createStepContentWithDrawer('Information step')}
diff --git a/packages/react-core/src/deprecated/components/PageHeader/PageHeaderToolsItem.tsx b/packages/react-core/src/deprecated/components/PageHeader/PageHeaderToolsItem.tsx
index 0403389ff53..56fce766e17 100644
--- a/packages/react-core/src/deprecated/components/PageHeader/PageHeaderToolsItem.tsx
+++ b/packages/react-core/src/deprecated/components/PageHeader/PageHeaderToolsItem.tsx
@@ -20,8 +20,6 @@ export interface PageHeaderToolsItemProps extends React.HTMLProps<HTMLDivElement
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
-  /** True to make an icon button appear selected */
-  isSelected?: boolean;
 }
 
 export const PageHeaderToolsItem: React.FunctionComponent<PageHeaderToolsItemProps> = ({
@@ -29,7 +27,6 @@ export const PageHeaderToolsItem: React.FunctionComponent<PageHeaderToolsItemPro
   id,
   className,
   visibility,
-  isSelected,
   ...props
 }: PageHeaderToolsItemProps) => {
   const { width, getBreakpoint } = React.useContext(PageContext);
@@ -37,7 +34,6 @@ export const PageHeaderToolsItem: React.FunctionComponent<PageHeaderToolsItemPro
     <div
       className={css(
         styles.pageHeaderToolsItem,
-        isSelected && styles.modifiers.selected,
         formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
         className
       )}
diff --git a/packages/react-core/src/deprecated/components/PageHeader/examples/PageVerticalNavUsingPageHeaderComponent.tsx b/packages/react-core/src/deprecated/components/PageHeader/examples/PageVerticalNavUsingPageHeaderComponent.tsx
index d6a9ef284c4..5b372f6c9fc 100644
--- a/packages/react-core/src/deprecated/components/PageHeader/examples/PageVerticalNavUsingPageHeaderComponent.tsx
+++ b/packages/react-core/src/deprecated/components/PageHeader/examples/PageVerticalNavUsingPageHeaderComponent.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Page, PageSidebar, PageSidebarBody, PageSection, PageSectionVariants } from '@patternfly/react-core';
+import { Page, PageSidebar, PageSidebarBody, PageSection } from '@patternfly/react-core';
 import { PageHeader as PageHeaderDeprecated, PageHeaderTools } from '@patternfly/react-core/deprecated';
 
 export const PageVerticalNavUsingPageHeaderComponent: React.FunctionComponent = () => {
@@ -34,9 +34,9 @@ export const PageVerticalNavUsingPageHeaderComponent: React.FunctionComponent =
 
   return (
     <Page header={header} sidebar={sidebar}>
-      <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
-      <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
-      <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
+      <PageSection>Section 1</PageSection>
+      <PageSection>Section 2</PageSection>
+      <PageSection>Section 3</PageSection>
     </Page>
   );
 };
diff --git a/packages/react-core/src/deprecated/components/PageHeader/tests/PageHeaderToolsItem.test.tsx b/packages/react-core/src/deprecated/components/PageHeader/tests/PageHeaderToolsItem.test.tsx
index 9010c9c1be5..0c359d7e24d 100644
--- a/packages/react-core/src/deprecated/components/PageHeader/tests/PageHeaderToolsItem.test.tsx
+++ b/packages/react-core/src/deprecated/components/PageHeader/tests/PageHeaderToolsItem.test.tsx
@@ -9,9 +9,7 @@ import {} from '../..';
 
 it('PageHeaderToolsItem should match snapshot (auto-generated)', () => {
   const { asFragment } = render(
-    <PageHeaderToolsItem className={'string'} isSelected={true}>
-      children={<div>ReactNode</div>}
-    </PageHeaderToolsItem>
+    <PageHeaderToolsItem className={'string'}>children={<div>ReactNode</div>}</PageHeaderToolsItem>
   );
   expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/deprecated/components/PageHeader/tests/__snapshots__/PageHeaderToolsItem.test.tsx.snap b/packages/react-core/src/deprecated/components/PageHeader/tests/__snapshots__/PageHeaderToolsItem.test.tsx.snap
index a8abc7f5f07..5d704dab277 100644
--- a/packages/react-core/src/deprecated/components/PageHeader/tests/__snapshots__/PageHeaderToolsItem.test.tsx.snap
+++ b/packages/react-core/src/deprecated/components/PageHeader/tests/__snapshots__/PageHeaderToolsItem.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`PageHeaderToolsItem should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-page__header-tools-item pf-m-selected string"
+    class="pf-v5-c-page__header-tools-item string"
   >
     children=
     <div>
diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index 520f80ff5f2..d0a629a6b96 100644
--- a/packages/react-docs/package.json
+++ b/packages/react-docs/package.json
@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "5.2.0-prerelease.3",
+    "@patternfly/patternfly": "6.0.0-alpha.12",
     "@patternfly/react-charts": "^8.0.0-alpha.1",
     "@patternfly/react-code-editor": "^6.0.0-alpha.1",
     "@patternfly/react-core": "^6.0.0-alpha.1",
diff --git a/packages/react-docs/patternfly-docs/pages/icons.js b/packages/react-docs/patternfly-docs/pages/icons.js
index 90556d33002..d5fa2e5bb4e 100644
--- a/packages/react-docs/patternfly-docs/pages/icons.js
+++ b/packages/react-docs/patternfly-docs/pages/icons.js
@@ -35,7 +35,7 @@ const iconsPage = () => {
   };
 
   return (
-    <PageSection variant="light">
+    <PageSection>
       <Text>
         These are all of the icons available for use in PatternFly React. For recommended icon usage, see our{' '}
         <a href="https://www.patternfly.org/v4/guidelines/icons">icon usage guidelines</a>.
diff --git a/packages/react-docs/patternfly-docs/pages/index.js b/packages/react-docs/patternfly-docs/pages/index.js
index ee57e975bd1..426faebea86 100644
--- a/packages/react-docs/patternfly-docs/pages/index.js
+++ b/packages/react-docs/patternfly-docs/pages/index.js
@@ -16,7 +16,7 @@ const IndexPage = () => {
   };
 
   return (
-    <PageSection variant="light" style={centerStyle}>
+    <PageSection style={centerStyle}>
       <div style={{ flex: 'none', textAlign: 'center' }}>
         <Title size="4xl" headingLevel="h1">
           PatternFly 4 React Docs
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
index a8edba50dff..770bce6d262 100644
--- a/packages/react-icons/package.json
+++ b/packages/react-icons/package.json
@@ -33,7 +33,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/free-regular-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
-    "@patternfly/patternfly": "5.2.0-prerelease.3",
+    "@patternfly/patternfly": "6.0.0-alpha.12",
     "fs-extra": "^11.1.1",
     "glob": "^7.1.2",
     "rimraf": "^2.6.2",
diff --git a/packages/react-integration/cypress/integration/dropdown.spec.ts b/packages/react-integration/cypress/integration/dropdown.spec.ts
index 18b0dc0a38f..72d7d51e246 100644
--- a/packages/react-integration/cypress/integration/dropdown.spec.ts
+++ b/packages/react-integration/cypress/integration/dropdown.spec.ts
@@ -13,13 +13,13 @@ describe('Dropdown demo test', () => {
 
   it('closes dropdown when clicked outside', () => {
     cy.get('[data-cy="toggle"]').click();
-    cy.get('main').click(0, 0);
+    cy.get('main').click('center');
     cy.get('[data-cy="toggle"]').should('not.have.class', 'pf-m-expanded');
   });
 
   it('closes dropdown when dropdown item clicked', () => {
     cy.get('[data-cy="toggle"]').click();
-    cy.get('[data-cy="dropdown-item"]').click();
+    cy.get('[data-cy=dropdown-item] > .pf-v5-c-menu__item').click({ force: true });
     cy.get('[data-cy="toggle"]').should('not.have.class', 'pf-m-expanded');
   });
 
diff --git a/packages/react-integration/cypress/integration/page.spec.ts b/packages/react-integration/cypress/integration/page.spec.ts
index fe6c5488765..3d021e91e6d 100644
--- a/packages/react-integration/cypress/integration/page.spec.ts
+++ b/packages/react-integration/cypress/integration/page.spec.ts
@@ -15,9 +15,6 @@ describe('Page Demo Test', () => {
       cy.get('#page-demo-header').should('not.have.attr', 'role');
       cy.get('#page-demo-page-id').should('not.have.attr', 'role');
       cy.get('div[class="pf-v5-c-page__header-brand-link"]').invoke('text').should('eq', "Logo that's a <div>");
-      cy.get('.pf-v5-c-page__main-section.pf-m-dark-100').should('exist');
-      cy.get('.pf-v5-c-page__main-section.pf-m-dark-200').should('exist');
-      cy.get('.pf-v5-c-page__main-section.pf-m-light').should('exist');
       cy.get('.pf-v5-c-page__main-section.pf-m-no-padding').should('exist');
       cy.get('.pf-v5-c-page__main-section.pf-m-no-padding-on-md').should('exist');
     });
diff --git a/packages/react-integration/cypress/integration/pagemanagedsidebarclosed.spec.ts b/packages/react-integration/cypress/integration/pagemanagedsidebarclosed.spec.ts
index bb2c555676e..e739c8313bc 100644
--- a/packages/react-integration/cypress/integration/pagemanagedsidebarclosed.spec.ts
+++ b/packages/react-integration/cypress/integration/pagemanagedsidebarclosed.spec.ts
@@ -14,9 +14,6 @@ describe('Page Managed Sidebar Closed Demo Test', () => {
       });
       cy.get('div[class="pf-v5-c-masthead__brand"]').invoke('text').should('eq', "Logo that's a div");
       cy.get('.pf-v5-c-masthead__content').invoke('text').should('contain', 'header-tools | Avatar');
-      cy.get('.pf-v5-c-page__main-section.pf-m-dark-100').should('exist');
-      cy.get('.pf-v5-c-page__main-section.pf-m-dark-200').should('exist');
-      cy.get('.pf-v5-c-page__main-section.pf-m-light').should('exist');
     });
   });
 });
diff --git a/packages/react-integration/cypress/integration/searchinput.spec.ts b/packages/react-integration/cypress/integration/searchinput.spec.ts
index e4dd83d93f1..c13402efcec 100644
--- a/packages/react-integration/cypress/integration/searchinput.spec.ts
+++ b/packages/react-integration/cypress/integration/searchinput.spec.ts
@@ -62,13 +62,13 @@ describe('Search Input Demo Test', () => {
     cy.get('#enabled-search .pf-v5-c-form-control > input').eq(1).should('have.value', 'hi');
     cy.get('#enabled-search .pf-v5-c-form-control > input').eq(2).should('have.value', 'another test');
 
-    cy.get('#enabled-search .pf-v5-c-form__actions button').eq(1).click();
+    cy.get('#enabled-search .pf-v5-c-form__actions button').eq(1).click({ force: true });
     cy.get('#enabled-search .pf-v5-c-text-input-group__text-input').should('have.value', '');
     cy.get('#enabled-search .pf-v5-c-form-control > input').eq(1).should('have.value', '');
     cy.get('#enabled-search .pf-v5-c-form-control > input').eq(2).should('have.value', '');
 
     cy.get('#enabled-search .pf-v5-c-form-control > input').eq(0).type('test');
-    cy.get('#enabled-search .pf-v5-c-form__actions button').eq(0).click();
+    cy.get('#enabled-search .pf-v5-c-form__actions button').eq(0).click({ force: true });
     cy.get('#enabled-search .pf-v5-c-form input').should('not.exist');
     cy.get('#enabled-search .pf-v5-c-text-input-group__text-input').should('have.value', 'username:test');
   });
diff --git a/packages/react-integration/cypress/integration/tableeditablecompoundexpandable.spec.ts b/packages/react-integration/cypress/integration/tableeditablecompoundexpandable.spec.ts
index 65d860ae65c..7a0339674ee 100644
--- a/packages/react-integration/cypress/integration/tableeditablecompoundexpandable.spec.ts
+++ b/packages/react-integration/cypress/integration/tableeditablecompoundexpandable.spec.ts
@@ -4,9 +4,9 @@ describe('Table Compound Expandable Test', () => {
   });
 
   it('Test expandable/collapsible', () => {
-    cy.get('button.pf-v5-c-table__button').first().click();
+    cy.get('#expandable-toggle-0-1').first().click();
 
-    cy.get('button.pf-v5-c-table__button').first().click();
+    cy.get('#expandable-toggle-0-1').first().click();
 
     // should not have changed the url
     cy.url().should('eq', 'http://localhost:3000/table-editable-compound-expandable-demo-nav-link');
diff --git a/packages/react-integration/demo-app-ts/src/App.tsx b/packages/react-integration/demo-app-ts/src/App.tsx
index a7c82228bdc..e75cd75a3a8 100755
--- a/packages/react-integration/demo-app-ts/src/App.tsx
+++ b/packages/react-integration/demo-app-ts/src/App.tsx
@@ -42,8 +42,8 @@ class App extends React.Component<{}, AppState> {
   };
 
   private onNavToggle = (_event: React.MouseEvent) => {
-    this.setState({ isNavOpen: !this.state.isNavOpen })
-  }
+    this.setState({ isNavOpen: !this.state.isNavOpen });
+  };
 
   private onThemeSelect = (isDarkTheme: boolean) => {
     this.setState({ isDarkTheme });
@@ -65,9 +65,7 @@ class App extends React.Component<{}, AppState> {
           <Route
             path={`/${demo.id}-nav-link`}
             render={() => (
-              <PageSection style={{ zIndex: 2 }} id={`/${demo.id}-page-section`}>
-                {React.createElement(demo.componentType)}
-              </PageSection>
+              <PageSection id={`/${demo.id}-page-section`}>{React.createElement(demo.componentType)}</PageSection>
             )}
             key={demo.id}
           />
@@ -76,7 +74,7 @@ class App extends React.Component<{}, AppState> {
           <Route
             path="/"
             render={() => (
-              <PageSection style={{ zIndex: 2 }} id={`/${defaultDemo.id}-page-section`}>
+              <PageSection id={`/${defaultDemo.id}-page-section`}>
                 {React.createElement(defaultDemo.componentType)}
               </PageSection>
             )}
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/BackToTopDemo/BackToTopDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/BackToTopDemo/BackToTopDemo.tsx
index 71fbc88b94f..1625932fcd8 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/BackToTopDemo/BackToTopDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/BackToTopDemo/BackToTopDemo.tsx
@@ -6,7 +6,6 @@ import {
   Gallery,
   GalleryItem,
   PageSection,
-  PageSectionVariants,
   TextContent,
   Text,
   Page
@@ -14,7 +13,7 @@ import {
 
 export const BackToTopDemo = () => (
   <Page>
-    <PageSection variant={PageSectionVariants.light}>
+    <PageSection>
       <TextContent>
         <Text component="h1">Main title</Text>
         <Text component="p">
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/LoginPageDemo/LoginPageDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/LoginPageDemo/LoginPageDemo.tsx
index f7979edaaee..698480f1a66 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/LoginPageDemo/LoginPageDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/LoginPageDemo/LoginPageDemo.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { Component } from 'react';
 /* eslint-disable camelcase */
 const brandImg = require('../../../assets/images/brandImgColor.svg') as string;
 const pfbg_icon = require('../../../assets/images/pfbg-icon.svg') as string;
@@ -23,7 +23,7 @@ export interface LoginPageDemoState {
   isRememberMeChecked: boolean;
 }
 
-export class LoginPageDemo extends React.Component<React.HTMLProps<HTMLDivElement>, LoginPageDemoState> {
+export class LoginPageDemo extends Component<React.HTMLProps<HTMLDivElement>, LoginPageDemoState> {
   static displayName = 'LoginPageDemo';
   state = {
     showHelperText: false,
@@ -143,22 +143,24 @@ export class LoginPageDemo extends React.Component<React.HTMLProps<HTMLDivElemen
     );
 
     return (
-      <LoginPage
-        footerListVariants={ListVariant.inline}
-        brandImgSrc={brandImg}
-        brandImgAlt="PatternFly logo"
-        backgroundImgSrc={pfbg_icon}
-        footerListItems={listItems}
-        textContent="This is placeholder text only. Use this area to place any information or introductory message about your
-        application that may be relevant to users."
-        loginTitle="Log in to your account"
-        loginSubtitle="Please use your single sign-on LDAP credentials"
-        socialMediaLoginContent={socialMediaLoginContent}
-        signUpForAccountMessage={signUpForAccountMessage}
-        forgotCredentials={forgotCredentials}
-      >
-        {loginForm}
-      </LoginPage>
+      <div style={{ isolation: 'isolate' }}>
+        <LoginPage
+          footerListVariants={ListVariant.inline}
+          brandImgSrc={brandImg}
+          brandImgAlt="PatternFly logo"
+          backgroundImgSrc={pfbg_icon}
+          footerListItems={listItems}
+          textContent="This is placeholder text only. Use this area to place any information or introductory message about your
+          application that may be relevant to users."
+          loginTitle="Log in to your account"
+          loginSubtitle="Please use your single sign-on LDAP credentials"
+          socialMediaLoginContent={socialMediaLoginContent}
+          signUpForAccountMessage={signUpForAccountMessage}
+          forgotCredentials={forgotCredentials}
+        >
+          {loginForm}
+        </LoginPage>
+      </div>
     );
   }
 }
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx
index 79de679b844..ef1dff63d2b 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import {
   Avatar,
   Button,
@@ -6,7 +6,6 @@ import {
   PageSidebar,
   PageSidebarBody,
   PageSection,
-  PageSectionVariants,
   SkipToContent,
   Dropdown,
   DropdownItem,
@@ -25,7 +24,7 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-
 import imgAvatar from '@patternfly/react-integration/demo-app-ts/src/assets/images/imgAvatar.svg';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
-export class PageDemo extends React.Component {
+export class PageDemo extends Component {
   static displayName = 'PageDemo';
   state = {
     isNavOpen: true,
@@ -125,9 +124,9 @@ export class PageDemo extends React.Component {
             <Dropdown
               onSelect={this.onKebabDropdownSelect}
               isOpen={isKebabDropdownOpen}
-              onOpenChange={(isOpen) => this.setState({ isKebabDropdownOpen: isOpen })}
+              onOpenChange={(isOpen: any) => this.setState({ isKebabDropdownOpen: isOpen })}
               popperProps={{ position: 'right' }}
-              toggle={(toggleRef) => (
+              toggle={(toggleRef: any) => (
                 <MenuToggle
                   variant="plain"
                   ref={toggleRef}
@@ -154,9 +153,9 @@ export class PageDemo extends React.Component {
             <Dropdown
               onSelect={this.onDropdownSelect}
               isOpen={isDropdownOpen}
-              onOpenChange={(isOpen) => this.setState({ isDropdownOpen: isOpen })}
+              onOpenChange={(isOpen: any) => this.setState({ isDropdownOpen: isOpen })}
               popperProps={{ position: 'right' }}
-              toggle={(toggleRef) => (
+              toggle={(toggleRef: any) => (
                 <MenuToggle ref={toggleRef} onClick={this.onDropdownToggle} isExpanded={isDropdownOpen}>
                   John Smith
                 </MenuToggle>
@@ -201,11 +200,9 @@ export class PageDemo extends React.Component {
         skipToContent={PageSkipToContent}
         mainAriaLabel="page demo"
       >
-        <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
-        <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
-        <PageSection variant={PageSectionVariants.light} isWidthLimited>
-          Section with light background
-        </PageSection>
+        <PageSection>Section 1</PageSection>
+        <PageSection>Section 2</PageSection>
+        <PageSection>Section 3</PageSection>
         <PageSection
           padding={{
             default: 'noPadding',
@@ -215,9 +212,7 @@ export class PageDemo extends React.Component {
         >
           Section with padding only on medium/large
         </PageSection>
-        <PageSection variant={PageSectionVariants.light} padding={{ md: 'noPadding' }}>
-          Section with no padding on medium
-        </PageSection>
+        <PageSection padding={{ md: 'noPadding' }}>Section with no padding on medium</PageSection>
       </Page>
     );
   }
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarClosedDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarClosedDemo.tsx
index 742fc3bb257..606fb4db097 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarClosedDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarClosedDemo.tsx
@@ -9,7 +9,6 @@ import {
   PageSidebar,
   PageSidebarBody,
   PageSection,
-  PageSectionVariants,
   PageToggleButton,
   Toolbar,
   ToolbarContent,
@@ -48,9 +47,7 @@ export const PageManagedSidebarClosedDemo: React.FunctionComponent = () => {
 
   return (
     <Page id="page-managed-sidebar-closed-demo" isManagedSidebar header={header} sidebar={sidebar}>
-      <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
-      <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
-      <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
+      <PageSection>Section </PageSection>
     </Page>
   );
 };
diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json
index 33d52d5d9ca..11cc8c9abeb 100644
--- a/packages/react-styles/package.json
+++ b/packages/react-styles/package.json
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.2.0-prerelease.3",
+    "@patternfly/patternfly": "6.0.0-alpha.12",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index 6aebb44de5b..4a30bbc87cc 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -20,7 +20,6 @@ SkipToContent,
 Breadcrumb,
 BreadcrumbItem,
 Page,
-PageSectionVariants,
 TextContent,
 Text,
 Divider } from '@patternfly/react-core';
diff --git a/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx b/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx
index bc7978746af..7cc2ce757f9 100644
--- a/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx
+++ b/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx
@@ -17,7 +17,6 @@ import {
   OverflowMenuGroup,
   OverflowMenuItem,
   PageSection,
-  PageSectionVariants,
   Pagination,
   Select,
   SelectOption,
@@ -231,7 +230,7 @@ export const ComposableTableSortable = () => {
   return (
     <React.Fragment>
       <DashboardWrapper>
-        <PageSection isWidthLimited variant={PageSectionVariants.light}>
+        <PageSection isWidthLimited>
           <TextContent>
             <Text component="h1">Table demos</Text>
             <Text component="p">
diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json
index 409db237c11..8e8ae1a80a8 100644
--- a/packages/react-tokens/package.json
+++ b/packages/react-tokens/package.json
@@ -29,7 +29,7 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.2.0-prerelease.3",
+    "@patternfly/patternfly": "6.0.0-alpha.12",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
     "glob": "^7.1.2",
diff --git a/packages/react-tokens/scripts/generateTokens.js b/packages/react-tokens/scripts/generateTokens.js
index 78d6fa18397..b633519fa32 100644
--- a/packages/react-tokens/scripts/generateTokens.js
+++ b/packages/react-tokens/scripts/generateTokens.js
@@ -6,7 +6,7 @@ const { readFileSync } = require('fs');
 const pfStylesDir = dirname(require.resolve('@patternfly/patternfly/patternfly.css'));
 
 // Helpers
-const formatCustomPropertyName = (key) => key.replace('--pf-v5-', '').replace(/-+/g, '_');
+const formatCustomPropertyName = (key) => key.replace('--pf-v5-', '').replace('--pf-t--', '').replace(/-+/g, '_');
 
 const getRegexMatches = (string, regex) => {
   const res = {};
@@ -51,6 +51,11 @@ const getLocalVarsMap = (cssFiles) => {
           ...res[property],
           [parent.selectors[0]]: value
         };
+      } else if (property.startsWith('--pf-t')) {
+        res[property] = {
+          ...res[property],
+          [parent.selectors[0]]: value
+        };
       }
     });
   });
diff --git a/yarn.lock b/yarn.lock
index ade3ebd7fa7..f77b33ad41f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3909,10 +3909,10 @@
     puppeteer-cluster "^0.23.0"
     xmldoc "^1.1.2"
 
-"@patternfly/patternfly@5.2.0-prerelease.3":
-  version "5.2.0-prerelease.3"
-  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-5.2.0-prerelease.3.tgz#d114fbe3c03e98d1ca9e20447fd8beaf1a4d2ddc"
-  integrity sha512-TTiK+QLC+TP/Gyn6uJPDIwvYhKM/gifoJ2bi9ZY186OCHddOTdG5qwKQA83a0tK08O0d4hr/Ep76HUpc5MDIfw==
+"@patternfly/patternfly@6.0.0-alpha.12":
+  version "6.0.0-alpha.12"
+  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.12.tgz#99ac69ae0a41b43cf1a78a109facae935001f2d1"
+  integrity sha512-8oUTBLXmdzVidxWvkXS2fCUYi4vmbgDBCdFmur8i4T4ssa+qH+0NZLN4kCPfVkgNY7RVcL6ISs1GIP6du6UacQ==
 
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"