From 59560941d417d80b7acc2547d4112c15ce044957 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redhat.com>
Date: Wed, 1 Nov 2023 14:40:26 -0400
Subject: [PATCH] remove Page setion variants that are no longer needed and
 update snapshots

---
 .../components/Page/__tests__/Page.test.tsx   |  39 ----
 .../__snapshots__/Page.test.tsx.snap          | 195 ------------------
 .../__snapshots__/SearchInput.test.tsx.snap   |   2 +-
 packages/react-core/src/demos/Banner.md       |   6 +-
 .../src/demos/Card/examples/CardView.tsx      |  10 +-
 packages/react-core/src/demos/JumpLinks.md    |   2 +-
 packages/react-core/src/demos/Nav.md          |  40 ++--
 .../examples/NotificationDrawerBasic.tsx      |   5 +-
 .../react-core/src/demos/PrimaryDetail.md     |  11 +-
 packages/react-core/src/demos/Tabs.md         |  14 +-
 packages/react-core/src/demos/Toolbar.md      |   3 +-
 .../react-core/src/demos/Wizard/WizardDemo.md |  14 +-
 .../AlertGroupToastWithNotificationDrawer.tsx |   9 +-
 .../examples/BackToTop/BackToTopNameDemo.tsx  |   3 +-
 .../src/demos/examples/DashboardWrapper.js    |   2 +-
 .../examples/JumpLinks/JumpLinksWithDrawer.js |   7 +-
 .../examples/Page/PageStickySectionGroup.tsx  |   3 +-
 .../Page/PageStickySectionGroupAlternate.tsx  |   3 +-
 .../PrimaryDetailContentPadding.tsx           |   3 +-
 .../PrimaryDetail/PrimaryDetailFullPage.tsx   |   5 +-
 .../PrimaryDetailInlineModifier.tsx           |   5 +-
 .../src/demos/examples/Tabs/ModalTabs.tsx     |   3 +-
 .../examples/Tabs/NestedUnindentedTabs.tsx    |   4 +-
 .../src/demos/examples/Tabs/TabsAndTable.tsx  |   5 +-
 .../react-docs/patternfly-docs/pages/icons.js |   2 +-
 .../react-docs/patternfly-docs/pages/index.js |   2 +-
 .../cypress/integration/page.spec.ts          |   1 -
 .../pagemanagedsidebarclosed.spec.ts          |   1 -
 packages/react-table/src/docs/demos/Table.md  |   1 -
 .../demos/table-demos/SortableResponsive.jsx  |   3 +-
 30 files changed, 64 insertions(+), 339 deletions(-)

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 537f453438e..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>
     );
 
@@ -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 a1f5a60f8bd..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"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        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"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        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"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        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"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        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"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        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"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        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"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        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"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        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"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        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"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        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"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        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"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        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"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
diff --git a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
index bd29a38c8f3..24719463b95 100644
--- a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
+++ b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
@@ -293,7 +293,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
       data-popper-escaped="true"
       data-popper-placement="bottom-start"
       data-popper-reference-hidden="true"
-      style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); min-width: 0px; z-index: 9999; opacity: 0; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11);"
+      style="position: absolute; top: 0px; left: 0px; transform: translate(0px, 0px); min-width: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11);"
     >
       <div
         class="pf-v5-c-panel pf-m-raised"
diff --git a/packages/react-core/src/demos/Banner.md b/packages/react-core/src/demos/Banner.md
index 9420ee205d5..f00dd4eeded 100644
--- a/packages/react-core/src/demos/Banner.md
+++ b/packages/react-core/src/demos/Banner.md
@@ -19,7 +19,6 @@ import {
   Gallery,
   GalleryItem,
   PageSection,
-  PageSectionVariants,
   TextContent,
   Text
 } from '@patternfly/react-core';
@@ -43,7 +42,7 @@ class BannerDemo extends React.Component {
               <div className="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Ned Username</div>
             </Flex>
           </Banner>
-          <PageSection variant={PageSectionVariants.light}>
+          <PageSection>
             <TextContent>
               <Text component="h1">Main title</Text>
               <Text component="p">
@@ -83,7 +82,6 @@ import {
   Gallery,
   GalleryItem,
   PageSection,
-  PageSectionVariants,
   TextContent,
   Text
 } from '@patternfly/react-core';
@@ -116,7 +114,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/Card/examples/CardView.tsx b/packages/react-core/src/demos/Card/examples/CardView.tsx
index de4f2dd0867..c117194c2ec 100644
--- a/packages/react-core/src/demos/Card/examples/CardView.tsx
+++ b/packages/react-core/src/demos/Card/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/JumpLinks.md b/packages/react-core/src/demos/JumpLinks.md
index a112b0f47c2..583c6cc4435 100644
--- a/packages/react-core/src/demos/JumpLinks.md
+++ b/packages/react-core/src/demos/JumpLinks.md
@@ -63,7 +63,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/Nav.md b/packages/react-core/src/demos/Nav.md
index e92da757907..f503a403de4 100644
--- a/packages/react-core/src/demos/Nav.md
+++ b/packages/react-core/src/demos/Nav.md
@@ -30,7 +30,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
@@ -97,7 +96,7 @@ class PageLayoutDefaultNav extends React.Component {
           breadcrumb={DashboardBreadcrumb}
           mainContainerId={pageId}
         >
-          <PageSection variant={PageSectionVariants.light}>
+          <PageSection>
             <TextContent>
               <Text component="h1">Main title</Text>
               <Text component="p">
@@ -134,7 +133,6 @@ import {
   NavItem,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
@@ -213,7 +211,7 @@ class PageLayoutGroupsNav extends React.Component {
           skipToContent={PageSkipToContent}
           mainContainerId={pageId}
         >
-          <PageSection variant={PageSectionVariants.light}>
+          <PageSection>
             <TextContent>
               <Text component="h1">Main title</Text>
               <Text component="p">
@@ -222,9 +220,9 @@ class PageLayoutGroupsNav extends React.Component {
               </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>
       </React.Fragment>
@@ -248,7 +246,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
@@ -338,7 +335,7 @@ class PageLayoutExpandableNav extends React.Component {
           breadcrumb={DashboardBreadcrumb}
           mainContainerId={pageId}
         >
-          <PageSection variant={PageSectionVariants.light}>
+          <PageSection>
             <TextContent>
               <Text component="h1">Main title</Text>
               <Text component="p">
@@ -391,7 +388,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   SkipToContent,
   TextContent,
   Text,
@@ -611,7 +607,7 @@ class PageLayoutHorizontalNav extends React.Component {
           breadcrumb={DashboardBreadcrumb}
           mainContainerId={pageId}
         >
-          <PageSection variant={PageSectionVariants.light}>
+          <PageSection>
             <TextContent>
               <Text component="h1">Main title</Text>
               <Text component="p">
@@ -652,7 +648,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
@@ -759,7 +754,7 @@ class VerticalNavWithSubnav extends React.Component {
           <PageSection type={PageSectionTypes.breadcrumb} isWidthLimited>
             {DashboardBreadcrumb}
           </PageSection>
-          <PageSection variant={PageSectionVariants.light}>
+          <PageSection>
             <TextContent>
               <Text component="h1">Main title</Text>
               <Text component="p">
@@ -812,7 +807,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSectionTypes,
   SkipToContent,
   TextContent,
@@ -1081,7 +1075,7 @@ class HorizontalNavWithSubnav extends React.Component {
           <PageSection type={PageSectionTypes.breadcrumb} isWidthLimited>
             {DashboardBreadcrumb}
           </PageSection>
-          <PageSection variant={PageSectionVariants.light}>
+          <PageSection>
             <TextContent>
               <Text component="h1">Main title</Text>
               <Text component="p">
@@ -1122,7 +1116,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   SkipToContent,
   TextContent,
   Text
@@ -1183,7 +1176,7 @@ class PageLayoutTertiaryNav extends React.Component {
           skipToContent={PageSkipToContent}
           mainContainerId={pageId}
         >
-          <PageSection variant={PageSectionVariants.light}>
+          <PageSection>
             <TextContent>
               <Text component="h1">Main title</Text>
               <Text component="p">
@@ -1224,7 +1217,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
@@ -1289,7 +1281,7 @@ class PageLayoutLightNav extends React.Component {
           skipToContent={PageSkipToContent}
           mainContainerId={pageId}
         >
-          <PageSection variant={PageSectionVariants.light}>
+          <PageSection>
             <TextContent>
               <Text component="h1">Main title</Text>
               <Text component="p">
@@ -1342,7 +1334,6 @@ import {
   NavList,
   Page,
   PageSection,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
@@ -1603,7 +1594,7 @@ class PageLayoutManualNav extends React.Component {
           skipToContent={PageSkipToContent}
           mainContainerId={pageId}
         >
-          <PageSection variant={PageSectionVariants.light}>
+          <PageSection>
             <TextContent>
               <Text component="h1">Main title</Text>
               <Text component="p">
@@ -1642,7 +1633,6 @@ import {
   PageSidebar,
   PageSidebarBody,
   PageSection,
-  PageSectionVariants,
   Menu,
   MenuContent,
   MenuList,
@@ -1719,9 +1709,9 @@ class VerticalPage extends React.Component {
 
     return (
       <Page header={<DashboardHeader />} sidebar={Sidebar} isManagedSidebar>
-        <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/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/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md
index cf06304627f..82687906ff3 100644
--- a/packages/react-core/src/demos/PrimaryDetail.md
+++ b/packages/react-core/src/demos/PrimaryDetail.md
@@ -67,7 +67,6 @@ import {
   MenuToggle,
   MenuToggleCheckbox,
   PageSection,
-  PageSectionVariants,
   Pagination,
   Progress,
   TextContent,
@@ -598,7 +597,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>
@@ -617,7 +616,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}
@@ -652,7 +651,6 @@ import {
   Flex,
   FlexItem,
   PageSection,
-  PageSectionVariants,
   Progress,
   SimpleList,
   SimpleListGroup,
@@ -763,7 +761,7 @@ class PrimaryDetailSimpleListInCard extends React.Component {
 
     return (
       <DashboardWrapper>
-        <PageSection variant={PageSectionVariants.light}>
+        <PageSection>
           <TextContent>
             <Text component="h1">Main title</Text>
             <Text component="p">
@@ -818,7 +816,6 @@ import {
   FlexItem,
   MenuToggle,
   PageSection,
-  PageSectionVariants,
   Progress,
   Text,
   TextContent,
@@ -1001,7 +998,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 92dea5b1f6b..84a05d7fc61 100644
--- a/packages/react-core/src/demos/Tabs.md
+++ b/packages/react-core/src/demos/Tabs.md
@@ -21,7 +21,6 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 import React from 'react';
 import {
   PageSection,
-  PageSectionVariants,
   PageBreadcrumb,
   Breadcrumb,
   BreadcrumbItem,
@@ -155,7 +154,7 @@ TabsOpenDemo = () => {
   return (
     <DashboardWrapper hasNoBreadcrumb>
       {tabsBreadcrumb}
-      <PageSection isWidthLimited variant={PageSectionVariants.light}>
+      <PageSection isWidthLimited>
         <Flex
           spaceItems={{ default: 'spaceItemsMd' }}
           alignItems={{ default: 'alignItemsFlexStart' }}
@@ -174,7 +173,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}`} />
@@ -183,7 +182,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>
@@ -211,7 +210,6 @@ TabsOpenDemo = () => {
 import React from 'react';
 import {
   PageSection,
-  PageSectionVariants,
   PageBreadcrumb,
   Breadcrumb,
   BreadcrumbItem,
@@ -351,7 +349,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
   return (
     <DashboardWrapper hasNoBreadcrumb>
       {tabsBreadcrumb}
-      <PageSection isWidthLimited variant={PageSectionVariants.light}>
+      <PageSection isWidthLimited>
         <Flex
           spaceItems={{ default: 'spaceItemsMd' }}
           alignItems={{ default: 'alignItemsFlexStart' }}
@@ -370,7 +368,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}`} />
@@ -379,7 +377,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/Toolbar.md b/packages/react-core/src/demos/Toolbar.md
index 6e9e67ae874..6159db1555a 100644
--- a/packages/react-core/src/demos/Toolbar.md
+++ b/packages/react-core/src/demos/Toolbar.md
@@ -31,7 +31,6 @@ import {
   SelectList,
   SelectOption,
   PageSection,
-  PageSectionVariants,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -566,7 +565,7 @@ class ConsoleLogViewerToolbar extends React.Component {
     );
     return (
       <DashboardWrapper sidebarNavOpen={!mobileView} onPageResize={this.onPageResize}>
-        <PageSection variant={PageSectionVariants.light}>{toolbar}</PageSection>
+        <PageSection>{toolbar}</PageSection>
       </DashboardWrapper>
     );
   }
diff --git a/packages/react-core/src/demos/Wizard/WizardDemo.md b/packages/react-core/src/demos/Wizard/WizardDemo.md
index 2082fdadce7..1b530439fa3 100644
--- a/packages/react-core/src/demos/Wizard/WizardDemo.md
+++ b/packages/react-core/src/demos/Wizard/WizardDemo.md
@@ -352,7 +352,7 @@ class WizardModalWithDrawerInfoStepDemo extends React.Component {
 
 ```js isFullscreen
 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/examples/DashboardWrapper';
 
 class WizardFullPage extends React.Component {
@@ -363,7 +363,7 @@ class WizardFullPage extends React.Component {
     return (
       <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>
@@ -416,7 +416,6 @@ import {
   Page,
   PageSection,
   PageSectionTypes,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
@@ -555,13 +554,13 @@ class WizardFullPageWithDrawerDemo extends React.Component {
           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')}
@@ -614,7 +613,6 @@ import {
   Page,
   PageSection,
   PageSectionTypes,
-  PageSectionVariants,
   PageSidebar,
   PageSidebarBody,
   SkipToContent,
@@ -757,13 +755,13 @@ class WizardFullPageWithDrawerInfoStepDemo extends React.Component {
           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/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
index 0c2d9a80b0c..18ccd05c321 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 c204f658482..0af3b00a17e 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
index 817d719ef3c..980eef3abc5 100644
--- a/packages/react-core/src/demos/examples/DashboardWrapper.js
+++ b/packages/react-core/src/demos/examples/DashboardWrapper.js
@@ -27,7 +27,7 @@ export const DashboardBreadcrumb = (
 );
 
 export 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/examples/JumpLinks/JumpLinksWithDrawer.js b/packages/react-core/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js
index ba40e791d4e..688ba2340ba 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,
@@ -69,7 +68,7 @@ export const JumpLinksWithDrawer = () => {
           <DrawerContentBody>
             <Sidebar>
               <SidebarPanel variant="sticky">
-                <PageSection variant={PageSectionVariants.light}>
+                <PageSection>
                   <JumpLinks
                     isVertical={true}
                     label="Jump to section"
@@ -87,10 +86,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/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 3fd6991a2bf..04dddc7d168 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 0a441fb8ea6..6109d22081e 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 485172283c0..176b88252f7 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 3f114b3e8a7..14e588a4c5c 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 edb8a842cc1..5bea3357e4c 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 f8f6f654519..8ae2b6bd6d0 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,
@@ -390,12 +389,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-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-integration/cypress/integration/page.spec.ts b/packages/react-integration/cypress/integration/page.spec.ts
index 7c3682b5b85..3d021e91e6d 100644
--- a/packages/react-integration/cypress/integration/page.spec.ts
+++ b/packages/react-integration/cypress/integration/page.spec.ts
@@ -15,7 +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-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 ec26152506d..e739c8313bc 100644
--- a/packages/react-integration/cypress/integration/pagemanagedsidebarclosed.spec.ts
+++ b/packages/react-integration/cypress/integration/pagemanagedsidebarclosed.spec.ts
@@ -14,7 +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-light').should('exist');
     });
   });
 });
diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index 967d23c2f05..c58eef29723 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 c83212033d5..89bd86cb3d0 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">