@patternfly/patternfly 6.0.0-alpha.5 → 6.0.0-alpha.6

package/patternfly.css

@@ -11,7 +11,7 @@
   --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
 }
 
-.pf-v5-c-wizard__header, .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-masthead .pf-v5-c-button.pf-m-plain, .pf-v5-c-masthead, .pf-v5-c-login__footer, .pf-v5-c-login__header, .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main, .pf-v5-c-banner, .pf-v5-c-about-modal-box, .pf-v5-t-dark {
+.pf-v5-c-wizard__header, .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__header, .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain, .pf-v5-c-masthead, .pf-v5-c-login__footer, .pf-v5-c-login__header, .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main, .pf-v5-c-banner, .pf-v5-c-about-modal-box, .pf-v5-t-dark {
   --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);
@@ -22,7 +22,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-wizard__header .pf-v5-c-button, .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-masthead .pf-v5-c-button.pf-m-plain .pf-v5-c-button, .pf-v5-c-masthead .pf-v5-c-button, .pf-v5-c-login__footer .pf-v5-c-button, .pf-v5-c-login__header .pf-v5-c-button, .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button, .pf-v5-c-banner .pf-v5-c-button, .pf-v5-c-about-modal-box .pf-v5-c-button, .pf-v5-t-dark .pf-v5-c-button {
+.pf-v5-c-wizard__header .pf-v5-c-button, .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__header .pf-v5-c-button, .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain .pf-v5-c-button, .pf-v5-c-masthead .pf-v5-c-button, .pf-v5-c-login__footer .pf-v5-c-button, .pf-v5-c-login__header .pf-v5-c-button, .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button, .pf-v5-c-banner .pf-v5-c-button, .pf-v5-c-about-modal-box .pf-v5-c-button, .pf-v5-t-dark .pf-v5-c-button {
   --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
 }
 
@@ -19675,20 +19675,20 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   --pf-v5-c-nav--Transition: var(--pf-v5-global--Transition);
   --pf-v5-c-nav--m-light__item--before--BorderColor: var(--pf-v5-global--BorderColor--300);
   --pf-v5-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
-  --pf-v5-c-nav--m-light__link--Color: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-c-nav--m-light__link--hover--Color: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-c-nav--m-light__link--focus--Color: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-c-nav--m-light__link--active--Color: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-c-nav--m-light__link--m-current--Color: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-c-nav--m-light__link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
-  --pf-v5-c-nav--m-light__link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
-  --pf-v5-c-nav--m-light__link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
-  --pf-v5-c-nav--m-light__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
+  --pf-v5-c-nav--m-light__link--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-nav--m-light__link--hover--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-nav--m-light__link--focus--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-nav--m-light__link--active--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-nav--m-light__link--m-current--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-nav--m-light__link--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-nav--m-light__link--focus--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-nav--m-light__link--active--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-nav--m-light__link--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v5-c-nav--m-light__link--before--BorderColor: var(--pf-v5-global--BorderColor--300);
   --pf-v5-c-nav--m-light__link--after--BorderColor: var(--pf-v5-global--active-color--100);
   --pf-v5-c-nav--m-light__link--m-current--after--BorderColor: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-nav--m-light__section-title--Color: var(--pf-v5-global--Color--dark-200);
-  --pf-v5-c-nav--m-light__section-title--BorderBottomColor: var(--pf-v5-global--BorderColor--300);
+  --pf-v5-c-nav--m-light__section-title--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-nav--m-light__section-title--BorderBottomColor: transparent;
   --pf-v5-c-nav--m-light--c-divider--BackgroundColor: var(--pf-v5-global--BorderColor--300);
   --pf-v5-c-nav--m-light__subnav__link--hover--after--BorderColor: var(--pf-v5-global--BorderColor--dark-100);
   --pf-v5-c-nav--m-light__subnav__link--focus--after--BorderColor: var(--pf-v5-global--BorderColor--dark-100);
@@ -19699,32 +19699,34 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   --pf-v5-c-nav__item--MarginTop: 0;
   --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400);
   --pf-v5-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-v5-global--BorderWidth--xl);
-  --pf-v5-c-nav__item__item__link--PaddingRight: var(--pf-v5-global--spacer--xl);
+  --pf-v5-c-nav__item__item__link--PaddingRight: var(--pf-t--global--spacer--xl);
   --pf-v5-c-nav__item__item__toggle--FontSize: var(--pf-v5-global--FontSize--sm);
   --pf-v5-c-nav__item__toggle-icon--Rotate: 0;
   --pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
+  --pf-v5-c-nav__item--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v5-c-nav__item--before--BorderColor: var(--pf-v5-global--BackgroundColor--dark-200);
   --pf-v5-c-nav__item--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-nav__link--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-nav__link--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-nav__link--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-nav__link--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-nav__link--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-nav__link--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-nav__link--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-nav__link--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-nav__link--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-nav__link--hover--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-nav__link--focus--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-nav__link--active--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-nav__link--m-current--Color: var(--pf-v5-global--Color--light-100);
+  --pf-v5-c-nav__link--FontSize: var(--pf-t--global--font--size--body);
+  --pf-v5-c-nav__link--FontWeight: var(--pf-t--global--font--weight--body);
+  --pf-v5-c-nav__link--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-nav__link--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-nav__link--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-nav__link--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-nav__link--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v5-c-nav__link--xl--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-nav__link--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-nav__link--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-nav__link--hover--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-nav__link--focus--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-nav__link--active--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-nav__link--m-current--Color: var(--pf-t--global--text--color--regular);
   --pf-v5-c-nav__link--BackgroundColor: transparent;
-  --pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
-  --pf-v5-c-nav__link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
-  --pf-v5-c-nav__link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
-  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400);
+  --pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-nav__link--focus--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-nav__link--active--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v5-c-nav__link--OutlineOffset: calc(var(--pf-v5-global--spacer--xs) * -1);
-  --pf-v5-c-nav__link--before--BorderColor: var(--pf-v5-global--BackgroundColor--dark-200);
+  --pf-v5-c-nav__link--before--BorderColor: transparent;
   --pf-v5-c-nav__link--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
   --pf-v5-c-nav__link--hover--before--BorderBottomWidth: 0;
   --pf-v5-c-nav__link--focus--before--BorderBottomWidth: 0;
@@ -19864,16 +19866,16 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   --pf-v5-c-nav__section__link--active--after--BorderWidth: 0;
   --pf-v5-c-nav__section__link--m-current--after--BorderWidth: var(--pf-v5-global--BorderWidth--xl);
   --pf-v5-c-nav__section--section--MarginTop: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-nav__section-title--PaddingTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-nav__section-title--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-nav__section-title--PaddingBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-nav__section-title--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-nav__section-title--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-nav__section-title--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-nav__section-title--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-nav__section-title--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-nav__section-title--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-nav__section-title--BorderBottomColor: var(--pf-v5-global--BackgroundColor--dark-200);
+  --pf-v5-c-nav__section-title--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-nav__section-title--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-nav__section-title--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-nav__section-title--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-nav__section-title--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-nav__section-title--xl--PaddingRight: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-nav__section-title--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-nav__section-title--FontSize: var(--pf-t--global--font--size--body);
+  --pf-v5-c-nav__section-title--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-nav__section-title--BorderBottomColor: transparent;
   --pf-v5-c-nav__section-title--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
   --pf-v5-c-nav__scroll-button--Color: var(--pf-v5-global--Color--light-100);
   --pf-v5-c-nav__scroll-button--hover--Color: var(--pf-v5-global--active-color--400);
@@ -21397,31 +21399,31 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
 }
 
 :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);
@@ -21436,16 +21438,24 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   --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--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --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--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-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--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--bold);
   --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);
@@ -21454,22 +21464,19 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   --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__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-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: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-page__main-section--PaddingBottom: 0;
+  --pf-v5-c-page__main-section--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-page__main-section--BackgroundColor: transparent;
+  --pf-v5-c-page__main-section--m-light--BackgroundColor: transparent;
+  --pf-v5-c-page__main-section--m-light-100--BackgroundColor: transparent;
+  --pf-v5-c-page__main-section--m-dark-100--BackgroundColor: transparent;
+  --pf-v5-c-page__main-section--m-dark-200--BackgroundColor: transparent;
+  --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);
@@ -21493,19 +21500,14 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   --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__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: var(--pf-t--global--spacer--md);
   --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: var(--pf-t--global--spacer--lg);
   --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);
@@ -21534,26 +21536,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
     --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;
@@ -21574,6 +21556,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
 
 .pf-v5-c-page__header,
 .pf-v5-c-page > .pf-v5-c-masthead {
+  --pf-v5-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v5-c-page__sidebar--Width) 1fr;
   z-index: var(--pf-v5-c-page__header--ZIndex);
   grid-area: header;
 }
@@ -21706,7 +21689,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
 }
 
 .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;
@@ -21714,6 +21696,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   grid-row-start: 2;
   grid-column-start: 1;
   width: var(--pf-v5-c-page__sidebar--Width);
+  padding-top: 0;
+  padding-bottom: var(--pf-t--global--spacer--lg);
+  padding-left: var(--pf-t--global--spacer--lg);
+  margin-right: var(--pf-v5-c-page__sidebar--MarginRight);
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
@@ -21740,6 +21726,19 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   border-right: 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-top: var(--pf-v5-c-page__sidebar-header--PaddingTop);
+  padding-bottom: var(--pf-v5-c-page__sidebar-header--PaddingBottom);
+  border-bottom: var(--pf-v5-c-page__sidebar-header--BorderBottomWidth) solid var(--pf-v5-c-page__sidebar-header--BorderBottomColor);
+}
+
+.pf-v5-c-page__sidebar-title {
+  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 {
   padding-right: var(--pf-v5-c-page__sidebar-body--PaddingRight);
   padding-left: var(--pf-v5-c-page__sidebar-body--PaddingLeft);
@@ -22005,6 +22004,19 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
   }
 }
 
+.pf-v5-c-page__main {
+  margin-top: 0;
+  margin-right: var(--pf-t--global--spacer--lg);
+  margin-left: var(--pf-t--global--spacer--lg);
+}
+
+.pf-v5-c-page__main-list {
+  padding-bottom: var(--pf-t--global--spacer--lg);
+  margin-bottom: var(--pf-t--global--spacer--lg);
+  background-color: var(--pf-t--global--background--color--primary--default);
+  border-radius: var(--pf-t--global--border--radius--large);
+}
+
 .pf-v5-c-page__main,
 .pf-v5-c-page__drawer {
   z-index: var(--pf-v5-c-page__main--ZIndex);
@@ -22020,7 +22032,8 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
 
 .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;
 }