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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/components/Nav/nav.css +42 -40
  2. package/components/Nav/nav.scss +42 -42
  3. package/components/Page/page.css +81 -70
  4. package/components/Page/page.scss +82 -68
  5. package/docs/components/Nav/examples/Navigation.css +0 -5
  6. package/package.json +1 -1
  7. package/patternfly-no-globals.css +123 -110
  8. package/patternfly-theme-dark-unversioned.css +123 -110
  9. package/patternfly.css +123 -110
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
package/patternfly-no-globals.css CHANGED
@@ -11,7 +11,7 @@
11
11
  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
12
12
  }
13
13
 
14
- .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 {
14
+ .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 {
15
15
  --pf-v5-global--Color--100: var(--pf-v5-global--Color--light-100);
16
16
  --pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200);
17
17
  --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--light-100);
@@ -22,7 +22,7 @@
22
22
  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
23
23
  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
24
24
  }
25
- .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 {
25
+ .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 {
26
26
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
27
27
  }
28
28
 
@@ -19559,20 +19559,20 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
19559
19559
  --pf-v5-c-nav--Transition: var(--pf-v5-global--Transition);
19560
19560
  --pf-v5-c-nav--m-light__item--before--BorderColor: var(--pf-v5-global--BorderColor--300);
19561
19561
  --pf-v5-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
19562
- --pf-v5-c-nav--m-light__link--Color: var(--pf-v5-global--Color--dark-100);
19563
- --pf-v5-c-nav--m-light__link--hover--Color: var(--pf-v5-global--Color--dark-100);
19564
- --pf-v5-c-nav--m-light__link--focus--Color: var(--pf-v5-global--Color--dark-100);
19565
- --pf-v5-c-nav--m-light__link--active--Color: var(--pf-v5-global--Color--dark-100);
19566
- --pf-v5-c-nav--m-light__link--m-current--Color: var(--pf-v5-global--Color--dark-100);
19567
- --pf-v5-c-nav--m-light__link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
19568
- --pf-v5-c-nav--m-light__link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
19569
- --pf-v5-c-nav--m-light__link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
19570
- --pf-v5-c-nav--m-light__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
19562
+ --pf-v5-c-nav--m-light__link--Color: var(--pf-t--global--text--color--subtle);
19563
+ --pf-v5-c-nav--m-light__link--hover--Color: var(--pf-t--global--text--color--subtle);
19564
+ --pf-v5-c-nav--m-light__link--focus--Color: var(--pf-t--global--text--color--subtle);
19565
+ --pf-v5-c-nav--m-light__link--active--Color: var(--pf-t--global--text--color--subtle);
19566
+ --pf-v5-c-nav--m-light__link--m-current--Color: var(--pf-t--global--text--color--regular);
19567
+ --pf-v5-c-nav--m-light__link--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19568
+ --pf-v5-c-nav--m-light__link--focus--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19569
+ --pf-v5-c-nav--m-light__link--active--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19570
+ --pf-v5-c-nav--m-light__link--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19571
19571
  --pf-v5-c-nav--m-light__link--before--BorderColor: var(--pf-v5-global--BorderColor--300);
19572
19572
  --pf-v5-c-nav--m-light__link--after--BorderColor: var(--pf-v5-global--active-color--100);
19573
19573
  --pf-v5-c-nav--m-light__link--m-current--after--BorderColor: var(--pf-v5-global--active-color--100);
19574
- --pf-v5-c-nav--m-light__section-title--Color: var(--pf-v5-global--Color--dark-200);
19575
- --pf-v5-c-nav--m-light__section-title--BorderBottomColor: var(--pf-v5-global--BorderColor--300);
19574
+ --pf-v5-c-nav--m-light__section-title--Color: var(--pf-t--global--text--color--regular);
19575
+ --pf-v5-c-nav--m-light__section-title--BorderBottomColor: transparent;
19576
19576
  --pf-v5-c-nav--m-light--c-divider--BackgroundColor: var(--pf-v5-global--BorderColor--300);
19577
19577
  --pf-v5-c-nav--m-light__subnav__link--hover--after--BorderColor: var(--pf-v5-global--BorderColor--dark-100);
19578
19578
  --pf-v5-c-nav--m-light__subnav__link--focus--after--BorderColor: var(--pf-v5-global--BorderColor--dark-100);
@@ -19583,32 +19583,34 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
19583
19583
  --pf-v5-c-nav__item--MarginTop: 0;
19584
19584
  --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400);
19585
19585
  --pf-v5-c-nav__link--m-current--not--m-expanded__link--after--BorderWidth: var(--pf-v5-global--BorderWidth--xl);
19586
- --pf-v5-c-nav__item__item__link--PaddingRight: var(--pf-v5-global--spacer--xl);
19586
+ --pf-v5-c-nav__item__item__link--PaddingRight: var(--pf-t--global--spacer--xl);
19587
19587
  --pf-v5-c-nav__item__item__toggle--FontSize: var(--pf-v5-global--FontSize--sm);
19588
19588
  --pf-v5-c-nav__item__toggle-icon--Rotate: 0;
19589
19589
  --pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
19590
+ --pf-v5-c-nav__item--BorderRadius: var(--pf-t--global--border--radius--small);
19590
19591
  --pf-v5-c-nav__item--before--BorderColor: var(--pf-v5-global--BackgroundColor--dark-200);
19591
19592
  --pf-v5-c-nav__item--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
19592
- --pf-v5-c-nav__link--FontSize: var(--pf-v5-global--FontSize--md);
19593
- --pf-v5-c-nav__link--FontWeight: var(--pf-v5-global--FontWeight--normal);
19594
- --pf-v5-c-nav__link--PaddingTop: var(--pf-v5-global--spacer--md);
19595
- --pf-v5-c-nav__link--PaddingRight: var(--pf-v5-global--spacer--md);
19596
- --pf-v5-c-nav__link--PaddingBottom: var(--pf-v5-global--spacer--md);
19597
- --pf-v5-c-nav__link--PaddingLeft: var(--pf-v5-global--spacer--md);
19598
- --pf-v5-c-nav__link--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
19599
- --pf-v5-c-nav__link--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
19600
- --pf-v5-c-nav__link--Color: var(--pf-v5-global--Color--light-100);
19601
- --pf-v5-c-nav__link--hover--Color: var(--pf-v5-global--Color--light-100);
19602
- --pf-v5-c-nav__link--focus--Color: var(--pf-v5-global--Color--light-100);
19603
- --pf-v5-c-nav__link--active--Color: var(--pf-v5-global--Color--light-100);
19604
- --pf-v5-c-nav__link--m-current--Color: var(--pf-v5-global--Color--light-100);
19593
+ --pf-v5-c-nav__link--FontSize: var(--pf-t--global--font--size--body);
19594
+ --pf-v5-c-nav__link--FontWeight: var(--pf-t--global--font--weight--body);
19595
+ --pf-v5-c-nav__link--PaddingTop: var(--pf-t--global--spacer--md);
19596
+ --pf-v5-c-nav__link--PaddingRight: var(--pf-t--global--spacer--md);
19597
+ --pf-v5-c-nav__link--PaddingBottom: var(--pf-t--global--spacer--md);
19598
+ --pf-v5-c-nav__link--PaddingLeft: var(--pf-t--global--spacer--md);
19599
+ --pf-v5-c-nav__link--BorderRadius: var(--pf-t--global--border--radius--small);
19600
+ --pf-v5-c-nav__link--xl--PaddingRight: var(--pf-t--global--spacer--lg);
19601
+ --pf-v5-c-nav__link--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
19602
+ --pf-v5-c-nav__link--Color: var(--pf-t--global--text--color--subtle);
19603
+ --pf-v5-c-nav__link--hover--Color: var(--pf-t--global--text--color--subtle);
19604
+ --pf-v5-c-nav__link--focus--Color: var(--pf-t--global--text--color--subtle);
19605
+ --pf-v5-c-nav__link--active--Color: var(--pf-t--global--text--color--subtle);
19606
+ --pf-v5-c-nav__link--m-current--Color: var(--pf-t--global--text--color--regular);
19605
19607
  --pf-v5-c-nav__link--BackgroundColor: transparent;
19606
- --pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
19607
- --pf-v5-c-nav__link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
19608
- --pf-v5-c-nav__link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
19609
- --pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400);
19608
+ --pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19609
+ --pf-v5-c-nav__link--focus--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19610
+ --pf-v5-c-nav__link--active--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19611
+ --pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19610
19612
  --pf-v5-c-nav__link--OutlineOffset: calc(var(--pf-v5-global--spacer--xs) * -1);
19611
- --pf-v5-c-nav__link--before--BorderColor: var(--pf-v5-global--BackgroundColor--dark-200);
19613
+ --pf-v5-c-nav__link--before--BorderColor: transparent;
19612
19614
  --pf-v5-c-nav__link--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
19613
19615
  --pf-v5-c-nav__link--hover--before--BorderBottomWidth: 0;
19614
19616
  --pf-v5-c-nav__link--focus--before--BorderBottomWidth: 0;
@@ -19748,16 +19750,16 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
19748
19750
  --pf-v5-c-nav__section__link--active--after--BorderWidth: 0;
19749
19751
  --pf-v5-c-nav__section__link--m-current--after--BorderWidth: var(--pf-v5-global--BorderWidth--xl);
19750
19752
  --pf-v5-c-nav__section--section--MarginTop: var(--pf-v5-global--spacer--xl);
19751
- --pf-v5-c-nav__section-title--PaddingTop: var(--pf-v5-global--spacer--sm);
19752
- --pf-v5-c-nav__section-title--PaddingRight: var(--pf-v5-global--spacer--md);
19753
- --pf-v5-c-nav__section-title--PaddingBottom: var(--pf-v5-global--spacer--sm);
19754
- --pf-v5-c-nav__section-title--PaddingLeft: var(--pf-v5-global--spacer--md);
19755
- --pf-v5-c-nav__section-title--MarginBottom: var(--pf-v5-global--spacer--sm);
19756
- --pf-v5-c-nav__section-title--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
19757
- --pf-v5-c-nav__section-title--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
19758
- --pf-v5-c-nav__section-title--FontSize: var(--pf-v5-global--FontSize--sm);
19759
- --pf-v5-c-nav__section-title--Color: var(--pf-v5-global--Color--light-100);
19760
- --pf-v5-c-nav__section-title--BorderBottomColor: var(--pf-v5-global--BackgroundColor--dark-200);
19753
+ --pf-v5-c-nav__section-title--PaddingTop: var(--pf-t--global--spacer--sm);
19754
+ --pf-v5-c-nav__section-title--PaddingRight: var(--pf-t--global--spacer--md);
19755
+ --pf-v5-c-nav__section-title--PaddingBottom: var(--pf-t--global--spacer--sm);
19756
+ --pf-v5-c-nav__section-title--PaddingLeft: var(--pf-t--global--spacer--md);
19757
+ --pf-v5-c-nav__section-title--MarginBottom: var(--pf-t--global--spacer--sm);
19758
+ --pf-v5-c-nav__section-title--xl--PaddingRight: var(--pf-t--global--spacer--xl);
19759
+ --pf-v5-c-nav__section-title--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
19760
+ --pf-v5-c-nav__section-title--FontSize: var(--pf-t--global--font--size--body);
19761
+ --pf-v5-c-nav__section-title--Color: var(--pf-t--global--text--color--regular);
19762
+ --pf-v5-c-nav__section-title--BorderBottomColor: transparent;
19761
19763
  --pf-v5-c-nav__section-title--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
19762
19764
  --pf-v5-c-nav__scroll-button--Color: var(--pf-v5-global--Color--light-100);
19763
19765
  --pf-v5-c-nav__scroll-button--hover--Color: var(--pf-v5-global--active-color--400);
@@ -21281,31 +21283,31 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21281
21283
  }
21282
21284
 
21283
21285
  :root {
21284
- --pf-v5-c-page--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
21285
- --pf-v5-c-page--inset: var(--pf-v5-global--spacer--md);
21286
- --pf-v5-c-page--xl--inset: var(--pf-v5-global--spacer--lg);
21287
- --pf-v5-c-page__header--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
21286
+ --pf-v5-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
21287
+ --pf-v5-c-page--inset: var(--pf-t--global--spacer--md);
21288
+ --pf-v5-c-page--xl--inset: var(--pf-t--global--spacer--xl);
21289
+ --pf-v5-c-page__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
21288
21290
  --pf-v5-c-page__header--ZIndex: var(--pf-v5-global--ZIndex--md);
21289
21291
  --pf-v5-c-page__header--MinHeight: 4.75rem;
21290
- --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-v5-global--spacer--md);
21291
- --pf-v5-c-page__header-brand--xl--PaddingRight: var(--pf-v5-global--spacer--xl);
21292
- --pf-v5-c-page__header-brand--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
21293
- --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop: var(--pf-v5-global--spacer--sm);
21294
- --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
21295
- --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom: var(--pf-v5-global--spacer--sm);
21296
- --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
21297
- --pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight: var(--pf-v5-global--spacer--md);
21292
+ --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-t--global--spacer--md);
21293
+ --pf-v5-c-page__header-brand--xl--PaddingRight: var(--pf-t--global--spacer--xl);
21294
+ --pf-v5-c-page__header-brand--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
21295
+ --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingTop: var(--pf-t--global--spacer--sm);
21296
+ --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingRight: var(--pf-t--global--spacer--sm);
21297
+ --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingBottom: var(--pf-t--global--spacer--sm);
21298
+ --pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
21299
+ --pf-v5-c-page__header-sidebar-toggle__c-button--MarginRight: var(--pf-t--global--spacer--md);
21298
21300
  --pf-v5-c-page__header-sidebar-toggle__c-button--MarginLeft: calc(var(--pf-v5-c-page__header-sidebar-toggle__c-button--PaddingLeft) * -1);
21299
- --pf-v5-c-page__header-sidebar-toggle__c-button--FontSize: var(--pf-v5-global--FontSize--2xl);
21301
+ --pf-v5-c-page__header-sidebar-toggle__c-button--FontSize: var(--pf-t--global--icon--size--lg);
21300
21302
  --pf-v5-c-page__header-brand-link--c-brand--MaxHeight: 3.75rem;
21301
- --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
21303
+ --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
21302
21304
  --pf-v5-c-page__header-nav--xl--BackgroundColor: transparent;
21303
- --pf-v5-c-page__header-nav--xl--PaddingRight: var(--pf-v5-global--spacer--xl);
21304
- --pf-v5-c-page__header-nav--xl--PaddingLeft: var(--pf-v5-global--spacer--xl);
21305
- --pf-v5-c-page__header-tools--MarginRight: var(--pf-v5-global--spacer--md);
21306
- --pf-v5-c-page__header-tools--xl--MarginRight: var(--pf-v5-global--spacer--lg);
21307
- --pf-v5-c-page__header-tools--c-avatar--MarginLeft: var(--pf-v5-global--spacer--md);
21308
- --pf-v5-c-page__header-tools-group--MarginLeft: var(--pf-v5-global--spacer--xl);
21305
+ --pf-v5-c-page__header-nav--xl--PaddingRight: var(--pf-t--global--spacer--xl);
21306
+ --pf-v5-c-page__header-nav--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
21307
+ --pf-v5-c-page__header-tools--MarginRight: var(--pf-t--global--spacer--md);
21308
+ --pf-v5-c-page__header-tools--xl--MarginRight: var(--pf-t--global--spacer--lg);
21309
+ --pf-v5-c-page__header-tools--c-avatar--MarginLeft: var(--pf-t--global--spacer--md);
21310
+ --pf-v5-c-page__header-tools-group--MarginLeft: var(--pf-t--global--spacer--xl);
21309
21311
  --pf-v5-c-page__header-tools-group--Display: flex;
21310
21312
  --pf-v5-c-page__header-tools-item--Display: block;
21311
21313
  --pf-v5-c-page__header-tools-item--c-notification-badge--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-200);
@@ -21320,16 +21322,24 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21320
21322
  --pf-v5-c-page__header-tools--c-button--m-selected--c-notification-badge--m-unread--after--BorderColor: transparent;
21321
21323
  --pf-v5-c-page__sidebar--ZIndex: var(--pf-v5-global--ZIndex--sm);
21322
21324
  --pf-v5-c-page__sidebar--Width: 18.125rem;
21323
- --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-300);
21325
+ --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
21324
21326
  --pf-v5-c-page__sidebar--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
21325
21327
  --pf-v5-c-page__sidebar--m-light--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
21326
21328
  --pf-v5-c-page__sidebar--m-light--BorderRightColor: var(--pf-v5-global--BorderColor--100);
21327
- --pf-v5-c-page__sidebar--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
21329
+ --pf-v5-c-page__sidebar--BoxShadow: none;
21328
21330
  --pf-v5-c-page__sidebar--Transition: var(--pf-v5-global--Transition);
21329
21331
  --pf-v5-c-page__sidebar--TranslateX: -100%;
21330
21332
  --pf-v5-c-page__sidebar--TranslateZ: 0;
21331
21333
  --pf-v5-c-page__sidebar--m-expanded--TranslateX: 0;
21332
21334
  --pf-v5-c-page__sidebar--xl--TranslateX: 0;
21335
+ --pf-v5-c-page__sidebar-header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
21336
+ --pf-v5-c-page__sidebar-header--BorderBottomColor: var(--pf-t--global--border--color--default);
21337
+ --pf-v5-c-page__sidebar-header--PaddingTop: var(--pf-t--global--spacer--sm);
21338
+ --pf-v5-c-page__sidebar-header--PaddingBottom: var(--pf-t--global--spacer--md);
21339
+ --pf-v5-c-page__sidebar-title--FontSize: var(--pf-t--global--font--size--heading--xs);
21340
+ --pf-v5-c-page__sidebar-title--LineHeight: var(--pf-t--global--font--line-height--heading);
21341
+ --pf-v5-c-page__sidebar-title--FontFamily: var(--pf-t--global--font--family--heading);
21342
+ --pf-v5-c-page__sidebar-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
21333
21343
  --pf-v5-c-page__sidebar-body--PaddingRight: 0;
21334
21344
  --pf-v5-c-page__sidebar-body--PaddingLeft: 0;
21335
21345
  --pf-v5-c-page__sidebar-body--m-page-insets--PaddingRight: var(--pf-v5-c-page--inset);
@@ -21338,22 +21348,19 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21338
21348
  --pf-v5-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
21339
21349
  --pf-v5-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-v5-global--BackgroundColor--dark-200);
21340
21350
  --pf-v5-c-page__main--ZIndex: var(--pf-v5-global--ZIndex--xs);
21341
- --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-global--spacer--md);
21342
- --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-global--spacer--md);
21343
- --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-global--spacer--md);
21344
- --pf-v5-c-page__main-section--PaddingLeft: var(--pf-v5-global--spacer--md);
21345
- --pf-v5-c-page__main-section--xl--PaddingTop: var(--pf-v5-global--spacer--lg);
21346
- --pf-v5-c-page__main-section--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
21347
- --pf-v5-c-page__main-section--xl--PaddingBottom: var(--pf-v5-global--spacer--lg);
21348
- --pf-v5-c-page__main-section--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
21349
- --pf-v5-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-v5-global--spacer--md);
21350
- --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
21351
- --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
21352
- --pf-v5-c-page__main-section--m-light-100--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
21353
- --pf-v5-c-page__main-section--m-dark-100--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-100);
21354
- --pf-v5-c-page__main-section--m-dark-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-200);
21355
- --pf-v5-c-page__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-v5-global--spacer--md);
21356
- --pf-v5-c-page__main-nav--page__main-tabs--PaddingTop: var(--pf-v5-global--spacer--md);
21351
+ --pf-v5-c-page__main-section--MarginTop: var(--pf-t--global--spacer--md);
21352
+ --pf-v5-c-page__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
21353
+ --pf-v5-c-page__main-section--PaddingRight: var(--pf-t--global--spacer--lg);
21354
+ --pf-v5-c-page__main-section--PaddingBottom: 0;
21355
+ --pf-v5-c-page__main-section--PaddingLeft: var(--pf-t--global--spacer--lg);
21356
+ --pf-v5-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
21357
+ --pf-v5-c-page__main-section--BackgroundColor: transparent;
21358
+ --pf-v5-c-page__main-section--m-light--BackgroundColor: transparent;
21359
+ --pf-v5-c-page__main-section--m-light-100--BackgroundColor: transparent;
21360
+ --pf-v5-c-page__main-section--m-dark-100--BackgroundColor: transparent;
21361
+ --pf-v5-c-page__main-section--m-dark-200--BackgroundColor: transparent;
21362
+ --pf-v5-c-page__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
21363
+ --pf-v5-c-page__main-nav--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
21357
21364
  --pf-v5-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v5-c-page__sidebar--Width));
21358
21365
  --pf-v5-c-page--section--m-sticky-top--ZIndex: var(--pf-v5-global--ZIndex--md);
21359
21366
  --pf-v5-c-page--section--m-sticky-top--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
@@ -21377,19 +21384,14 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21377
21384
  --pf-v5-c-page__main-subnav--BorderLeftColor: var(--pf-v5-global--palette--black-800);
21378
21385
  --pf-v5-c-page__sidebar--main__main-subnav--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
21379
21386
  --pf-v5-c-page__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth: 0;
21380
- --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
21381
- --pf-v5-c-page__main-breadcrumb--PaddingTop: var(--pf-v5-global--spacer--md);
21382
- --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-global--spacer--md);
21387
+ --pf-v5-c-page__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);
21388
+ --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-t--global--spacer--md);
21383
21389
  --pf-v5-c-page__main-breadcrumb--PaddingBottom: 0;
21384
- --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-global--spacer--md);
21385
- --pf-v5-c-page__main-breadcrumb--m-sticky-top--PaddingBottom: var(--pf-v5-global--spacer--md);
21386
- --pf-v5-c-page__main-breadcrumb--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
21387
- --pf-v5-c-page__main-breadcrumb--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
21390
+ --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-t--global--spacer--lg);
21388
21391
  --pf-v5-c-page__main-tabs--PaddingTop: 0;
21389
21392
  --pf-v5-c-page__main-tabs--PaddingRight: 0;
21390
21393
  --pf-v5-c-page__main-tabs--PaddingBottom: 0;
21391
21394
  --pf-v5-c-page__main-tabs--PaddingLeft: 0;
21392
- --pf-v5-c-page__main-tabs--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
21393
21395
  --pf-v5-c-page__main-wizard--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
21394
21396
  --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-v5-global--BorderColor--100);
21395
21397
  --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
@@ -21418,26 +21420,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21418
21420
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--xl--TranslateX);
21419
21421
  }
21420
21422
  }
21421
- @media screen and (min-width: 1200px) {
21422
- :root {
21423
- --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-c-page__main-section--xl--PaddingTop);
21424
- --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-c-page__main-section--xl--PaddingRight);
21425
- --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-c-page__main-section--xl--PaddingBottom);
21426
- --pf-v5-c-page__main-section--PaddingLeft: var(--pf-v5-c-page__main-section--xl--PaddingLeft);
21427
- }
21428
- }
21429
- @media screen and (min-width: 1200px) {
21430
- :root {
21431
- --pf-v5-c-page__main-nav--PaddingRight: var(--pf-v5-c-page__main-nav--xl--PaddingRight);
21432
- --pf-v5-c-page__main-nav--PaddingLeft: var(--pf-v5-c-page__main-nav--xl--PaddingLeft);
21433
- }
21434
- }
21435
- @media screen and (min-width: 1200px) {
21436
- :root {
21437
- --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingRight);
21438
- --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft);
21439
- }
21440
- }
21441
21423
 
21442
21424
  .pf-v5-c-page {
21443
21425
  display: grid;
@@ -21458,6 +21440,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21458
21440
 
21459
21441
  .pf-v5-c-page__header,
21460
21442
  .pf-v5-c-page > .pf-v5-c-masthead {
21443
+ --pf-v5-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v5-c-page__sidebar--Width) 1fr;
21461
21444
  z-index: var(--pf-v5-c-page__header--ZIndex);
21462
21445
  grid-area: header;
21463
21446
  }
@@ -21590,7 +21573,6 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21590
21573
  }
21591
21574
 
21592
21575
  .pf-v5-c-page__sidebar {
21593
- color: var(--pf-v5-global--Color--100);
21594
21576
  z-index: var(--pf-v5-c-page__sidebar--ZIndex);
21595
21577
  display: flex;
21596
21578
  flex-direction: column;
@@ -21598,6 +21580,10 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21598
21580
  grid-row-start: 2;
21599
21581
  grid-column-start: 1;
21600
21582
  width: var(--pf-v5-c-page__sidebar--Width);
21583
+ padding-top: 0;
21584
+ padding-bottom: var(--pf-t--global--spacer--lg);
21585
+ padding-left: var(--pf-t--global--spacer--lg);
21586
+ margin-right: var(--pf-v5-c-page__sidebar--MarginRight);
21601
21587
  overflow-x: hidden;
21602
21588
  overflow-y: auto;
21603
21589
  -webkit-overflow-scrolling: touch;
@@ -21624,6 +21610,19 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21624
21610
  border-right: var(--pf-v5-c-page__sidebar--m-light--BorderRightWidth) solid var(--pf-v5-c-page__sidebar--m-light--BorderRightColor);
21625
21611
  }
21626
21612
 
21613
+ .pf-v5-c-page__sidebar-header {
21614
+ padding-top: var(--pf-v5-c-page__sidebar-header--PaddingTop);
21615
+ padding-bottom: var(--pf-v5-c-page__sidebar-header--PaddingBottom);
21616
+ border-bottom: var(--pf-v5-c-page__sidebar-header--BorderBottomWidth) solid var(--pf-v5-c-page__sidebar-header--BorderBottomColor);
21617
+ }
21618
+
21619
+ .pf-v5-c-page__sidebar-title {
21620
+ font-family: var(--pf-v5-c-page__sidebar-title--FontFamily);
21621
+ font-size: var(--pf-v5-c-page__sidebar-title--FontSize);
21622
+ font-weight: var(--pf-v5-c-page__sidebar-title--FontWeight);
21623
+ line-height: var(--pf-v5-c-page__sidebar-title--LineHeight);
21624
+ }
21625
+
21627
21626
  .pf-v5-c-page__sidebar-body {
21628
21627
  padding-right: var(--pf-v5-c-page__sidebar-body--PaddingRight);
21629
21628
  padding-left: var(--pf-v5-c-page__sidebar-body--PaddingLeft);
@@ -21889,6 +21888,19 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21889
21888
  }
21890
21889
  }
21891
21890
 
21891
+ .pf-v5-c-page__main {
21892
+ margin-top: 0;
21893
+ margin-right: var(--pf-t--global--spacer--lg);
21894
+ margin-left: var(--pf-t--global--spacer--lg);
21895
+ }
21896
+
21897
+ .pf-v5-c-page__main-list {
21898
+ padding-bottom: var(--pf-t--global--spacer--lg);
21899
+ margin-bottom: var(--pf-t--global--spacer--lg);
21900
+ background-color: var(--pf-t--global--background--color--primary--default);
21901
+ border-radius: var(--pf-t--global--border--radius--large);
21902
+ }
21903
+
21892
21904
  .pf-v5-c-page__main,
21893
21905
  .pf-v5-c-page__drawer {
21894
21906
  z-index: var(--pf-v5-c-page__main--ZIndex);
@@ -21904,7 +21916,8 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled, .pf-m-aria-disab
21904
21916
 
21905
21917
  .pf-v5-c-page__main,
21906
21918
  .pf-v5-c-page__main-drawer,
21907
- .pf-v5-c-page__main-group {
21919
+ .pf-v5-c-page__main-group,
21920
+ .pf-v5-c-page__main-list {
21908
21921
  display: flex;
21909
21922
  flex-direction: column;
21910
21923
  }