@patternfly/react-styles 6.0.0-alpha.1 → 6.0.0-alpha.3

package/css/components/Page/page.css

@@ -1,16 +1,4 @@
-.pf-v5-c-page__sidebar.pf-m-light {
-  --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
-  --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
-  --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
-  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
-  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
-  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
-  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
-  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
-}
-
-.pf-v5-c-page__main-section[class*=pf-m-dark-], .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector, .pf-v5-c-page__sidebar, .pf-v5-c-page__header {
+.pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector {
   --pf-v5-global--Color--100: var(--pf-v5-global--Color--light-100);
   --pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200);
   --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--light-100);
@@ -21,7 +9,7 @@
   --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
   --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
 }
-.pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button, .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button, .pf-v5-c-page__sidebar .pf-v5-c-button, .pf-v5-c-page__header .pf-v5-c-button {
+.pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button {
   --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
 }
 
@@ -75,119 +63,117 @@
 }
 
 :root {
-  --pf-v5-c-page--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
-  --pf-v5-c-page--inset: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page--xl--inset: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-page__header--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
+  --pf-v5-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-page--inset: var(--pf-t--global--spacer--md);
+  --pf-v5-c-page--xl--inset: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-page__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v5-c-page__header--ZIndex: var(--pf-v5-global--ZIndex--md);
   --pf-v5-c-page__header--MinHeight: 4.75rem;
-  --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__header-brand--xl--PaddingRight: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-page__header-brand--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-page__header-brand--xl--PaddingRight: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-page__header-brand--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight: var(--pf-t--global--spacer--md);
   --pf-v5-c-page__header-sidebar-toggle__c-button--MarginLeft: calc(var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft) * -1);
-  --pf-v5-c-page__header-sidebar-toggle__c-button--FontSize: var(--pf-v5-global--FontSize--2xl);
+  --pf-v5-c-page__header-sidebar-toggle__c-button--FontSize: var(--pf-t--global--icon--size--lg);
   --pf-v5-c-page__header-brand-link--c-brand--MaxHeight: 3.75rem;
-  --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
+  --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v5-c-page__header-nav--xl--BackgroundColor: transparent;
-  --pf-v5-c-page__header-nav--xl--PaddingRight: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-page__header-nav--xl--PaddingLeft: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-page__header-tools--MarginRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__header-tools--xl--MarginRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-page__header-tools--c-avatar--MarginLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__header-tools-group--MarginLeft: var(--pf-v5-global--spacer--xl);
+  --pf-v5-c-page__header-nav--xl--PaddingRight: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-page__header-nav--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-page__header-tools--MarginRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-page__header-tools--xl--MarginRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-page__header-tools--c-avatar--MarginLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-page__header-tools-group--MarginLeft: var(--pf-t--global--spacer--xl);
   --pf-v5-c-page__header-tools-group--Display: flex;
   --pf-v5-c-page__header-tools-item--Display: block;
-  --pf-v5-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
-  --pf-v5-c-page__header-tools--c-button--notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--primary-color--200);
-  --pf-v5-c-page__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
-  --pf-v5-c-page__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--primary-color--200);
-  --pf-v5-c-page__header-tools--c-button--m-selected--notification-badge--m-attention--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
   --pf-v5-c-page__header-tools--c-button--m-selected--before--Width: auto;
   --pf-v5-c-page__header-tools--c-button--m-selected--before--Height: auto;
-  --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
-  --pf-v5-c-page__header-tools--c-button--m-selected--before--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
-  --pf-v5-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor: transparent;
   --pf-v5-c-page__sidebar--ZIndex: var(--pf-v5-global--ZIndex--sm);
   --pf-v5-c-page__sidebar--Width: 18.125rem;
-  --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
-  --pf-v5-c-page__sidebar--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
-  --pf-v5-c-page__sidebar--m-light--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-page__sidebar--m-light--BorderRightColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-page__sidebar--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
+  --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-page__sidebar--BoxShadow: none;
   --pf-v5-c-page__sidebar--Transition: var(--pf-v5-global--Transition);
   --pf-v5-c-page__sidebar--TranslateX: -100%;
   --pf-v5-c-page__sidebar--TranslateZ: 0;
   --pf-v5-c-page__sidebar--m-expanded--TranslateX: 0;
   --pf-v5-c-page__sidebar--xl--TranslateX: 0;
+  --pf-v5-c-page__sidebar--MarginRight: 0;
+  --pf-v5-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-page__sidebar--PaddingInlineStart: 0;
+  --pf-v5-c-page__sidebar-header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
+  --pf-v5-c-page__sidebar-header--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-page__sidebar-header--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-page__sidebar-header--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-page__sidebar-title--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-page__sidebar-title--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-page__sidebar-title--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-page__sidebar-title--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v5-c-page__sidebar-title--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-page__sidebar-body--PaddingRight: 0;
   --pf-v5-c-page__sidebar-body--PaddingLeft: 0;
   --pf-v5-c-page__sidebar-body--m-page-insets--PaddingRight: var(--pf-v5-c-page--inset);
   --pf-v5-c-page__sidebar-body--m-page-insets--PaddingLeft: var(--pf-v5-c-page--inset);
-  --pf-v5-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-v5-global--BackgroundColor--dark-200);
-  --pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-v5-global--BackgroundColor--dark-200);
+  --pf-v5-c-page__sidebar-body--m-menu--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-t--global--border--width--button--default);
+  --pf-v5-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-t--global--border--color--default);
   --pf-v5-c-page__main--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__main-section--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__main-section--xl--PaddingTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-page__main-section--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-page__main-section--xl--PaddingBottom: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-page__main-section--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
-  --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
-  --pf-v5-c-page__main-section--m-light-100--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
-  --pf-v5-c-page__main-section--m-dark-100--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-100);
-  --pf-v5-c-page__main-section--m-dark-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-200);
-  --pf-v5-c-page__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__main-nav--page__main-tabs--PaddingTop: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-page__main--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
+  --pf-v5-c-page__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-page__main--MarginInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-page__main--MarginInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-page__main--BorderRadius: var(--pf-t--global--border--radius--large);
+  --pf-v5-c-page__main--BorderWidth: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-page__main--BorderColor: var(--pf-v5-c-page__main--BackgroundColor);
+  --pf-v5-c-page__main-section--MarginTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-page__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-page__main-section--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v5-c-page__main--BorderWidth));
+  --pf-v5-c-page__main-section--PaddingBottom: 0;
+  --pf-v5-c-page__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v5-c-page__main--BorderWidth));
+  --pf-v5-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-page__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-page__main-nav--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
   --pf-v5-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v5-c-page__sidebar--Width));
   --pf-v5-c-page--section--m-sticky-top--ZIndex: var(--pf-v5-global--ZIndex--md);
-  --pf-v5-c-page--section--m-sticky-top--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
+  --pf-v5-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
   --pf-v5-c-page--section--m-sticky-bottom--ZIndex: var(--pf-v5-global--ZIndex--md);
-  --pf-v5-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
-  --pf-v5-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
+  --pf-v5-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
+  --pf-v5-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
   --pf-v5-c-page--section--m-shadow-bottom--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-page--section--m-shadow-top--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
+  --pf-v5-c-page--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
   --pf-v5-c-page--section--m-shadow-top--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
-  --pf-v5-c-page__main-nav--PaddingTop: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-page__main-nav--PaddingTop: var(--pf-t--global--spacer--md);
   --pf-v5-c-page__main-nav--PaddingRight: 0;
   --pf-v5-c-page__main-nav--PaddingLeft: 0;
-  --pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__main-nav--xl--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-page__main-nav--xl--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-page__main-subnav--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
-  --pf-v5-c-page__main-subnav--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-page__main-subnav--BorderTopColor: var(--pf-v5-global--palette--black-800);
+  --pf-v5-c-page__main-nav--m-sticky-top--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-page__main-nav--xl--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-page__main-nav--xl--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-page__main-subnav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-page__main-subnav--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
+  --pf-v5-c-page__main-subnav--BorderTopColor: var(--pf-t--global--border--color--default);
   --pf-v5-c-page__main-subnav--BorderLeftWidth: 0;
-  --pf-v5-c-page__main-subnav--BorderLeftColor: var(--pf-v5-global--palette--black-800);
-  --pf-v5-c-page__sidebar--main__main-subnav--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-page__main-subnav--BorderLeftColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-page__sidebar--main__main-subnav--BorderLeftWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v5-c-page__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth: 0;
-  --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
-  --pf-v5-c-page__main-breadcrumb--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-page__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-page__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v5-c-page__main--BorderWidth));
   --pf-v5-c-page__main-breadcrumb--PaddingBottom: 0;
-  --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__main-breadcrumb--m-sticky-top--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-page__main-breadcrumb--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-page__main-breadcrumb--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
+  --pf-v5-c-page__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v5-c-page__main--BorderWidth));
+  --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v5-c-page__main-tabs--PaddingTop: 0;
   --pf-v5-c-page__main-tabs--PaddingRight: 0;
   --pf-v5-c-page__main-tabs--PaddingBottom: 0;
-  --pf-v5-c-page__main-tabs--PaddingLeft: 0;
-  --pf-v5-c-page__main-tabs--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
-  --pf-v5-c-page__main-wizard--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
-  --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
+  --pf-v5-c-page__main-tabs--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-page__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-t--global--border--width--button--default);
 }
 @media (min-width: 1200px) {
   :root {
@@ -212,26 +198,6 @@
     --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--xl--TranslateX);
   }
 }
-@media screen and (min-width: 1200px) {
-  :root {
-    --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-c-page__main-section--xl--PaddingTop);
-    --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-c-page__main-section--xl--PaddingRight);
-    --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-c-page__main-section--xl--PaddingBottom);
-    --pf-v5-c-page__main-section--PaddingLeft: var(--pf-v5-c-page__main-section--xl--PaddingLeft);
-  }
-}
-@media screen and (min-width: 1200px) {
-  :root {
-    --pf-v5-c-page__main-nav--PaddingRight: var(--pf-v5-c-page__main-nav--xl--PaddingRight);
-    --pf-v5-c-page__main-nav--PaddingLeft: var(--pf-v5-c-page__main-nav--xl--PaddingLeft);
-  }
-}
-@media screen and (min-width: 1200px) {
-  :root {
-    --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingRight);
-    --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft);
-  }
-}
 
 .pf-v5-c-page {
   display: grid;
@@ -257,7 +223,6 @@
 }
 
 .pf-v5-c-page__header {
-  color: var(--pf-v5-global--Color--100);
   display: grid;
   grid-template-columns: auto auto;
   align-items: center;
@@ -353,38 +318,8 @@
 .pf-v5-c-page__header-tools-item {
   --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-page__header-tools-item--Display);
 }
-.pf-v5-c-page__header-tools-item .pf-v5-c-notification-badge.pf-m-read:hover {
-  --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor);
-}
-.pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button {
-  background-color: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
-  border-radius: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--BorderRadius);
-}
-.pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button::before {
-  position: absolute;
-  inset: 0;
-  width: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--Width);
-  height: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--Height);
-  content: "";
-}
-.pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge.pf-m-unread {
-  --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-page__header-tools--c-button--m-selected--notification-badge--m-unread--after--BackgroundColor);
-}
-.pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge.pf-m-unread::after {
-  border-color: var(--pf-v5-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor);
-}
-.pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge.pf-m-attention {
-  --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
-}
-.pf-v5-c-page__header-tools-item .pf-v5-c-button:focus .pf-v5-c-notification-badge.pf-m-unread {
-  --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-page__header-tools--c-button--notification-badge--m-unread--after--BackgroundColor);
-}
-.pf-v5-c-page__header-tools-item .pf-v5-c-button:focus .pf-v5-c-notification-badge.pf-m-attention {
-  --pf-v5-c-notification-badge--after--BackgroundColor: var(--pf-v5-c-page__header-tools--c-button--notification-badge--m-attention--after--BackgroundColor);
-}
 
 .pf-v5-c-page__sidebar {
-  color: var(--pf-v5-global--Color--100);
   z-index: var(--pf-v5-c-page__sidebar--ZIndex);
   display: flex;
   flex-direction: column;
@@ -392,6 +327,10 @@
   grid-row-start: 2;
   grid-column-start: 1;
   width: var(--pf-v5-c-page__sidebar--Width);
+  padding-block-start: 0;
+  padding-block-end: var(--pf-v5-c-page__sidebar--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v5-c-page__sidebar--PaddingInlineStart);
+  margin-inline-end: var(--pf-v5-c-page__sidebar--MarginRight);
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
@@ -416,10 +355,19 @@
   max-width: 0;
   overflow: hidden;
 }
-.pf-v5-c-page__sidebar.pf-m-light {
-  color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-c-page__sidebar--m-light--BackgroundColor);
-  border-inline-end: var(--pf-v5-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-v5-c-page__sidebar--m-light--BorderRightColor);
+
+.pf-v5-c-page__sidebar-header {
+  padding-block-start: var(--pf-v5-c-page__sidebar-header--PaddingTop);
+  padding-block-end: var(--pf-v5-c-page__sidebar-header--PaddingBottom);
+  border-block-end: var(--pf-v5-c-page__sidebar-header--BorderBottomWidth) solid var(--pf-v5-c-page__sidebar-header--BorderBottomColor);
+}
+
+.pf-v5-c-page__sidebar-title {
+  padding-inline-start: var(--pf-v5-c-page__sidebar-title--PaddingLeft);
+  font-family: var(--pf-v5-c-page__sidebar-title--FontFamily);
+  font-size: var(--pf-v5-c-page__sidebar-title--FontSize);
+  font-weight: var(--pf-v5-c-page__sidebar-title--FontWeight);
+  line-height: var(--pf-v5-c-page__sidebar-title--LineHeight);
 }
 
 .pf-v5-c-page__sidebar-body {
@@ -430,7 +378,7 @@
   flex-grow: 1;
 }
 .pf-v5-c-page__sidebar-body.pf-m-menu {
-  background-color: var(--pf-v5-global--palette--black-900);
+  background-color: var(--pf-v5-c-page__sidebar-body--m-menu--BackgroundColor);
   border-block-start: var(--pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-v5-c-page__sidebar-body--m-menu--BorderTopColor);
 }
 .pf-v5-c-page__sidebar-body.pf-m-menu + .pf-v5-c-page__sidebar-body.pf-m-menu {
@@ -687,6 +635,17 @@
   }
 }
 
+.pf-v5-c-page__main {
+  align-self: start;
+  max-height: var(--pf-v5-c-page__main--MaxHeight);
+  margin-block-start: 0;
+  margin-inline-start: var(--pf-v5-c-page__main--MarginInlineStart);
+  margin-inline-end: var(--pf-v5-c-page__main--MarginInlineEnd);
+  background: var(--pf-v5-c-page__main--BackgroundColor);
+  border: var(--pf-v5-c-page__main--BorderWidth) solid var(--pf-v5-c-page__main--BorderColor);
+  border-radius: var(--pf-v5-c-page__main--BorderRadius);
+}
+
 .pf-v5-c-page__main,
 .pf-v5-c-page__drawer {
   z-index: var(--pf-v5-c-page__main--ZIndex);
@@ -702,7 +661,8 @@
 
 .pf-v5-c-page__main,
 .pf-v5-c-page__main-drawer,
-.pf-v5-c-page__main-group {
+.pf-v5-c-page__main-group,
+.pf-v5-c-page__main-list {
   display: flex;
   flex-direction: column;
 }
@@ -831,20 +791,8 @@
   padding-inline-end: var(--pf-v5-c-page__main-section--PaddingRight);
   background-color: var(--pf-v5-c-page__main-section--BackgroundColor);
 }
-.pf-v5-c-page__main-section.pf-m-light {
-  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-light--BackgroundColor);
-}
-.pf-v5-c-page__main-section.pf-m-light-100 {
-  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-light-100--BackgroundColor);
-}
-.pf-v5-c-page__main-section[class*=pf-m-dark-] {
-  color: var(--pf-v5-global--Color--100);
-}
-.pf-v5-c-page__main-section.pf-m-dark-100 {
-  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-dark-100--BackgroundColor);
-}
-.pf-v5-c-page__main-section.pf-m-dark-200 {
-  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-dark-200--BackgroundColor);
+.pf-v5-c-page__main-section.pf-m-secondary {
+  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-c-page__main-section--m-secondary--BackgroundColor);
 }
 .pf-v5-c-page__main-section.pf-m-padding {
   padding-block-start: var(--pf-v5-c-page__main-section--PaddingTop);
@@ -974,9 +922,6 @@
 .pf-v5-c-page__main-wizard:first-child {
   --pf-v5-c-page__main-wizard--BorderTopWidth: 0;
 }
-.pf-v5-c-page__main-wizard.pf-m-light-200 {
-  --pf-v5-c-page__main-wizard--BackgroundColor: var(--pf-v5-c-page__main-wizard--m-light-200--BackgroundColor);
-}
 
 .pf-v5-c-page__main-wizard .pf-v5-c-page__main-body {
   min-height: 0;
@@ -1015,46 +960,4 @@
 }
 .pf-v5-c-page__drawer > .pf-v5-c-drawer {
   flex: 1 0 auto;
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button,
-:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button,
-:where(.pf-v5-theme-dark) .pf-v5-c-page__header .pf-v5-c-button {
-  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
-}
-
-:where(.pf-v5-theme-dark):root {
-  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-  --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-page__header--BackgroundColor: var(--pf-v5-global--palette--black-1000);
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button {
-  color: var(--pf-v5-global--Color--100);
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-page__header-tools-item.pf-m-selected .pf-v5-c-button .pf-v5-c-notification-badge:hover::before {
-  background-color: var(--pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar {
-  border-inline-end: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-nav.pf-m-sticky-bottom {
-  --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-page__main-breadcrumb.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-breadcrumb.pf-m-sticky-bottom {
-  --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-page__main-group.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-group.pf-m-sticky-bottom {
-  --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-  --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-  --pf-v5-c-page__main-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section.pf-m-sticky-top, :where(.pf-v5-theme-dark) .pf-v5-c-page__main-section.pf-m-sticky-bottom {
-  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
-:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
-:where(.pf-v5-theme-dark) .pf-v5-c-page__header {
-  color: var(--pf-v5-global--Color--100);
 }

package/css/components/Page/page.d.ts

@@ -8,7 +8,6 @@ declare const _default: {
   "drawer": "pf-v5-c-drawer",
   "masthead": "pf-v5-c-masthead",
   "modifiers": {
-    "light": "pf-m-light",
     "menu": "pf-m-menu",
     "hidden": "pf-m-hidden",
     "hiddenOnSm": "pf-m-hidden-on-sm",
@@ -21,10 +20,6 @@ declare const _default: {
     "visibleOnXl": "pf-m-visible-on-xl",
     "hiddenOn_2xl": "pf-m-hidden-on-2xl",
     "visibleOn_2xl": "pf-m-visible-on-2xl",
-    "read": "pf-m-read",
-    "selected": "pf-m-selected",
-    "unread": "pf-m-unread",
-    "attention": "pf-m-attention",
     "expanded": "pf-m-expanded",
     "collapsed": "pf-m-collapsed",
     "pageInsets": "pf-m-page-insets",
@@ -48,9 +43,7 @@ declare const _default: {
     "stickyBottomOnXlHeight": "pf-m-sticky-bottom-on-xl-height",
     "stickyTopOn_2xlHeight": "pf-m-sticky-top-on-2xl-height",
     "stickyBottomOn_2xlHeight": "pf-m-sticky-bottom-on-2xl-height",
-    "light_100": "pf-m-light-100",
-    "dark_100": "pf-m-dark-100",
-    "dark_200": "pf-m-dark-200",
+    "secondary": "pf-m-secondary",
     "padding": "pf-m-padding",
     "noPadding": "pf-m-no-padding",
     "paddingOnSm": "pf-m-padding-on-sm",
@@ -62,11 +55,9 @@ declare const _default: {
     "paddingOnXl": "pf-m-padding-on-xl",
     "noPaddingOnXl": "pf-m-no-padding-on-xl",
     "paddingOn_2xl": "pf-m-padding-on-2xl",
-    "noPaddingOn_2xl": "pf-m-no-padding-on-2xl",
-    "light_200": "pf-m-light-200"
+    "noPaddingOn_2xl": "pf-m-no-padding-on-2xl"
   },
   "nav": "pf-v5-c-nav",
-  "notificationBadge": "pf-v5-c-notification-badge",
   "page": "pf-v5-c-page",
   "pageDrawer": "pf-v5-c-page__drawer",
   "pageHeader": "pf-v5-c-page__header",
@@ -82,6 +73,7 @@ declare const _default: {
   "pageMainBreadcrumb": "pf-v5-c-page__main-breadcrumb",
   "pageMainDrawer": "pf-v5-c-page__main-drawer",
   "pageMainGroup": "pf-v5-c-page__main-group",
+  "pageMainList": "pf-v5-c-page__main-list",
   "pageMainNav": "pf-v5-c-page__main-nav",
   "pageMainSection": "pf-v5-c-page__main-section",
   "pageMainSubnav": "pf-v5-c-page__main-subnav",
@@ -89,6 +81,7 @@ declare const _default: {
   "pageMainWizard": "pf-v5-c-page__main-wizard",
   "pageSidebar": "pf-v5-c-page__sidebar",
   "pageSidebarBody": "pf-v5-c-page__sidebar-body",
-  "themeDark": "pf-v5-theme-dark"
+  "pageSidebarHeader": "pf-v5-c-page__sidebar-header",
+  "pageSidebarTitle": "pf-v5-c-page__sidebar-title"
 };
 export default _default;

package/css/components/Page/page.js

@@ -10,7 +10,6 @@ exports.default = {
   "drawer": "pf-v5-c-drawer",
   "masthead": "pf-v5-c-masthead",
   "modifiers": {
-    "light": "pf-m-light",
     "menu": "pf-m-menu",
     "hidden": "pf-m-hidden",
     "hiddenOnSm": "pf-m-hidden-on-sm",
@@ -23,10 +22,6 @@ exports.default = {
     "visibleOnXl": "pf-m-visible-on-xl",
     "hiddenOn_2xl": "pf-m-hidden-on-2xl",
     "visibleOn_2xl": "pf-m-visible-on-2xl",
-    "read": "pf-m-read",
-    "selected": "pf-m-selected",
-    "unread": "pf-m-unread",
-    "attention": "pf-m-attention",
     "expanded": "pf-m-expanded",
     "collapsed": "pf-m-collapsed",
     "pageInsets": "pf-m-page-insets",
@@ -50,9 +45,7 @@ exports.default = {
     "stickyBottomOnXlHeight": "pf-m-sticky-bottom-on-xl-height",
     "stickyTopOn_2xlHeight": "pf-m-sticky-top-on-2xl-height",
     "stickyBottomOn_2xlHeight": "pf-m-sticky-bottom-on-2xl-height",
-    "light_100": "pf-m-light-100",
-    "dark_100": "pf-m-dark-100",
-    "dark_200": "pf-m-dark-200",
+    "secondary": "pf-m-secondary",
     "padding": "pf-m-padding",
     "noPadding": "pf-m-no-padding",
     "paddingOnSm": "pf-m-padding-on-sm",
@@ -64,11 +57,9 @@ exports.default = {
     "paddingOnXl": "pf-m-padding-on-xl",
     "noPaddingOnXl": "pf-m-no-padding-on-xl",
     "paddingOn_2xl": "pf-m-padding-on-2xl",
-    "noPaddingOn_2xl": "pf-m-no-padding-on-2xl",
-    "light_200": "pf-m-light-200"
+    "noPaddingOn_2xl": "pf-m-no-padding-on-2xl"
   },
   "nav": "pf-v5-c-nav",
-  "notificationBadge": "pf-v5-c-notification-badge",
   "page": "pf-v5-c-page",
   "pageDrawer": "pf-v5-c-page__drawer",
   "pageHeader": "pf-v5-c-page__header",
@@ -84,6 +75,7 @@ exports.default = {
   "pageMainBreadcrumb": "pf-v5-c-page__main-breadcrumb",
   "pageMainDrawer": "pf-v5-c-page__main-drawer",
   "pageMainGroup": "pf-v5-c-page__main-group",
+  "pageMainList": "pf-v5-c-page__main-list",
   "pageMainNav": "pf-v5-c-page__main-nav",
   "pageMainSection": "pf-v5-c-page__main-section",
   "pageMainSubnav": "pf-v5-c-page__main-subnav",
@@ -91,5 +83,6 @@ exports.default = {
   "pageMainWizard": "pf-v5-c-page__main-wizard",
   "pageSidebar": "pf-v5-c-page__sidebar",
   "pageSidebarBody": "pf-v5-c-page__sidebar-body",
-  "themeDark": "pf-v5-theme-dark"
+  "pageSidebarHeader": "pf-v5-c-page__sidebar-header",
+  "pageSidebarTitle": "pf-v5-c-page__sidebar-title"
 };

package/css/components/Page/page.mjs

@@ -8,7 +8,6 @@ export default {
   "drawer": "pf-v5-c-drawer",
   "masthead": "pf-v5-c-masthead",
   "modifiers": {
-    "light": "pf-m-light",
     "menu": "pf-m-menu",
     "hidden": "pf-m-hidden",
     "hiddenOnSm": "pf-m-hidden-on-sm",
@@ -21,10 +20,6 @@ export default {
     "visibleOnXl": "pf-m-visible-on-xl",
     "hiddenOn_2xl": "pf-m-hidden-on-2xl",
     "visibleOn_2xl": "pf-m-visible-on-2xl",
-    "read": "pf-m-read",
-    "selected": "pf-m-selected",
-    "unread": "pf-m-unread",
-    "attention": "pf-m-attention",
     "expanded": "pf-m-expanded",
     "collapsed": "pf-m-collapsed",
     "pageInsets": "pf-m-page-insets",
@@ -48,9 +43,7 @@ export default {
     "stickyBottomOnXlHeight": "pf-m-sticky-bottom-on-xl-height",
     "stickyTopOn_2xlHeight": "pf-m-sticky-top-on-2xl-height",
     "stickyBottomOn_2xlHeight": "pf-m-sticky-bottom-on-2xl-height",
-    "light_100": "pf-m-light-100",
-    "dark_100": "pf-m-dark-100",
-    "dark_200": "pf-m-dark-200",
+    "secondary": "pf-m-secondary",
     "padding": "pf-m-padding",
     "noPadding": "pf-m-no-padding",
     "paddingOnSm": "pf-m-padding-on-sm",
@@ -62,11 +55,9 @@ export default {
     "paddingOnXl": "pf-m-padding-on-xl",
     "noPaddingOnXl": "pf-m-no-padding-on-xl",
     "paddingOn_2xl": "pf-m-padding-on-2xl",
-    "noPaddingOn_2xl": "pf-m-no-padding-on-2xl",
-    "light_200": "pf-m-light-200"
+    "noPaddingOn_2xl": "pf-m-no-padding-on-2xl"
   },
   "nav": "pf-v5-c-nav",
-  "notificationBadge": "pf-v5-c-notification-badge",
   "page": "pf-v5-c-page",
   "pageDrawer": "pf-v5-c-page__drawer",
   "pageHeader": "pf-v5-c-page__header",
@@ -82,6 +73,7 @@ export default {
   "pageMainBreadcrumb": "pf-v5-c-page__main-breadcrumb",
   "pageMainDrawer": "pf-v5-c-page__main-drawer",
   "pageMainGroup": "pf-v5-c-page__main-group",
+  "pageMainList": "pf-v5-c-page__main-list",
   "pageMainNav": "pf-v5-c-page__main-nav",
   "pageMainSection": "pf-v5-c-page__main-section",
   "pageMainSubnav": "pf-v5-c-page__main-subnav",
@@ -89,5 +81,6 @@ export default {
   "pageMainWizard": "pf-v5-c-page__main-wizard",
   "pageSidebar": "pf-v5-c-page__sidebar",
   "pageSidebarBody": "pf-v5-c-page__sidebar-body",
-  "themeDark": "pf-v5-theme-dark"
+  "pageSidebarHeader": "pf-v5-c-page__sidebar-header",
+  "pageSidebarTitle": "pf-v5-c-page__sidebar-title"
 };