@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.40

package/components/Nav/nav.scss

@@ -1069,11 +1069,11 @@
   --pf-c-nav__link--active--after--BorderLeftWidth: var(--pf-c-nav__section__link--active--after--BorderWidth);
   --pf-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-c-nav__section__link--m-current--after--BorderWidth);
 
-  margin-top: var(--pf-c-nav__section--MarginTop);
-
   // Divider
   --pf-c-nav--c-divider--MarginBottom: 0;
 
+  margin-top: var(--pf-c-nav__section--MarginTop);
+
   & + & {
     --pf-c-nav__section--MarginTop: var(--pf-c-nav__section--section--MarginTop);
   }

package/components/NotificationDrawer/notification-drawer.css

@@ -30,8 +30,8 @@
   --pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor: var(--pf-global--danger-color--100);
   --pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color: var(--pf-global--success-color--100);
   --pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor: var(--pf-global--success-color--100);
-  --pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color: var(--pf-global--default-color--200);
-  --pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor: var(--pf-global--default-color--200);
+  --pf-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color: var(--pf-global--custom-color--200);
+  --pf-c-notification-drawer__list-item--m-custom__list-item--before--BackgroundColor: var(--pf-global--custom-color--200);
   --pf-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-notification-drawer__list-item--m-read--BorderBottomColor: var(--pf-global--BorderColor--100);
   --pf-c-notification-drawer__list-item--m-read--before--Top: calc(var(--pf-c-notification-drawer__list-item--BorderBottomWidth) * -1);
@@ -146,9 +146,9 @@
   --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor);
   --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color);
 }
-.pf-c-notification-drawer__list-item.pf-m-default {
-  --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor);
-  --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color);
+.pf-c-notification-drawer__list-item.pf-m-custom {
+  --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-custom__list-item--before--BackgroundColor);
+  --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color);
 }
 .pf-c-notification-drawer__list-item.pf-m-read {
   --pf-c-notification-drawer__list-item--BorderBottomColor: var(--pf-c-notification-drawer__list-item--m-read--BorderBottomColor);
@@ -169,9 +169,9 @@
 
 .pf-c-notification-drawer__list-item-header {
   display: flex;
-  align-items: baseline;
-  grid-column: 1/2;
   grid-row: 1/2;
+  grid-column: 1/2;
+  align-items: baseline;
   margin-bottom: var(--pf-c-notification-drawer__list-item-header--MarginBottom);
 }
 
@@ -192,8 +192,8 @@
 }
 
 .pf-c-notification-drawer__list-item-action {
-  grid-column: 2/3;
   grid-row: 1/3;
+  grid-column: 2/3;
 }
 
 .pf-c-notification-drawer__list-item-description {

package/components/NotificationDrawer/notification-drawer.scss

@@ -38,8 +38,8 @@
   --pf-c-notification-drawer__list-item--m-danger__list-item--before--BackgroundColor: var(--pf-global--danger-color--100);
   --pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color: var(--pf-global--success-color--100);
   --pf-c-notification-drawer__list-item--m-success__list-item--before--BackgroundColor: var(--pf-global--success-color--100);
-  --pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color: var(--pf-global--default-color--200);
-  --pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor: var(--pf-global--default-color--200);
+  --pf-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color: var(--pf-global--custom-color--200);
+  --pf-c-notification-drawer__list-item--m-custom__list-item--before--BackgroundColor: var(--pf-global--custom-color--200);
   --pf-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-notification-drawer__list-item--m-read--BorderBottomColor: var(--pf-global--BorderColor--100);
   --pf-c-notification-drawer__list-item--m-read--before--Top: calc(var(--pf-c-notification-drawer__list-item--BorderBottomWidth) * -1);
@@ -183,9 +183,9 @@
     --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-success__list-item-header-icon--Color);
   }
 
-  &.pf-m-default {
-    --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-default__list-item--before--BackgroundColor);
-    --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-default__list-item-header-icon--Color);
+  &.pf-m-custom {
+    --pf-c-notification-drawer__list-item--before--BackgroundColor: var(--pf-c-notification-drawer__list-item--m-custom__list-item--before--BackgroundColor);
+    --pf-c-notification-drawer__list-item-header-icon--Color: var(--pf-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color);
   }
 
   &.pf-m-read {
@@ -211,9 +211,9 @@
 
 .pf-c-notification-drawer__list-item-header {
   display: flex;
-  align-items: baseline;
-  grid-column: 1 / 2;
   grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-items: baseline;
   margin-bottom: var(--pf-c-notification-drawer__list-item-header--MarginBottom);
 }
 
@@ -232,8 +232,8 @@
 }
 
 .pf-c-notification-drawer__list-item-action {
-  grid-column: 2 / 3;
   grid-row: 1 / 3;
+  grid-column: 2 / 3;
 }
 
 .pf-c-notification-drawer__list-item-description {

package/components/OptionsMenu/options-menu.css

@@ -4,8 +4,8 @@
   --pf-c-options-menu__toggle--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
   --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-options-menu__toggle--ColumnGap: var(--pf-global--spacer--sm);
   --pf-c-options-menu__toggle--MinWidth: 0;
-  --pf-c-options-menu__toggle--LineHeight: var(--pf-global--LineHeight--md);
   --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
   --pf-c-options-menu__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
@@ -25,8 +25,8 @@
   --pf-c-options-menu__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
   --pf-c-options-menu__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-options-menu__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
+  --pf-c-options-menu__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-options-menu__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
   --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
   --pf-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -108,12 +108,11 @@
 .pf-c-options-menu__toggle {
   position: relative;
   display: flex;
+  column-gap: var(--pf-c-options-menu__toggle--ColumnGap);
   align-items: center;
-  justify-content: space-between;
   min-width: var(--pf-c-options-menu__toggle--MinWidth);
   max-width: 100%;
   padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
-  line-height: var(--pf-c-options-menu__toggle--LineHeight);
   color: var(--pf-c-options-menu__toggle--Color);
   background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
   border: none;
@@ -131,9 +130,6 @@
   display: inline-block;
   color: var(--pf-c-options-menu__toggle--m-plain--Color);
 }
-.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
-  line-height: var(--pf-c-options-menu__toggle--LineHeight);
-}
 .pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
   --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
   --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-c-options-menu--m-plain--hover__toggle-icon--Color);
@@ -165,6 +161,8 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex: 1 1 auto;
+  text-align: left;
 }
 
 .pf-c-options-menu__toggle-icon,
@@ -173,8 +171,8 @@
 }
 
 .pf-c-options-menu__toggle-icon {
-  margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight);
-  margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft);
+  padding-right: var(--pf-c-options-menu__toggle-icon--PaddingRight);
+  padding-left: var(--pf-c-options-menu__toggle-icon--PaddingLeft);
 }
 .pf-c-options-menu.pf-m-top.pf-m-expanded .pf-c-options-menu__toggle-icon {
   transform: rotate(var(--pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate));

package/components/OptionsMenu/options-menu.scss

@@ -5,8 +5,8 @@
   --pf-c-options-menu__toggle--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
   --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-options-menu__toggle--ColumnGap: var(--pf-global--spacer--sm);
   --pf-c-options-menu__toggle--MinWidth: 0;
-  --pf-c-options-menu__toggle--LineHeight: var(--pf-global--LineHeight--md);
   --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
   --pf-c-options-menu__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
@@ -28,8 +28,8 @@
   --pf-c-options-menu__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
 
   // Toggle arrow
-  --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
+  --pf-c-options-menu__toggle-icon--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-options-menu__toggle-icon--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
   --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
   --pf-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -137,12 +137,11 @@
 .pf-c-options-menu__toggle {
   position: relative;
   display: flex;
+  column-gap: var(--pf-c-options-menu__toggle--ColumnGap);
   align-items: center;
-  justify-content: space-between;
   min-width: var(--pf-c-options-menu__toggle--MinWidth);
   max-width: 100%;
   padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
-  line-height: var(--pf-c-options-menu__toggle--LineHeight);
   color: var(--pf-c-options-menu__toggle--Color);
   background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
   border: none;
@@ -164,10 +163,6 @@
 
       display: inline-block;
       color: var(--pf-c-options-menu__toggle--m-plain--Color);
-
-      .pf-c-options-menu__toggle-button-icon {
-        line-height: var(--pf-c-options-menu__toggle--LineHeight);
-      }
     }
 
     &:hover,
@@ -212,6 +207,9 @@
 
 .pf-c-options-menu__toggle-text {
   @include pf-text-overflow;
+
+  flex: 1 1 auto;
+  text-align: left;
 }
 
 .pf-c-options-menu__toggle-icon,
@@ -220,8 +218,8 @@
 }
 
 .pf-c-options-menu__toggle-icon {
-  margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight);
-  margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft);
+  padding-right: var(--pf-c-options-menu__toggle-icon--PaddingRight);
+  padding-left: var(--pf-c-options-menu__toggle-icon--PaddingLeft);
 
   .pf-c-options-menu.pf-m-top.pf-m-expanded & {
     transform: rotate(var(--pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate));

package/components/Page/page.css

@@ -8,7 +8,7 @@
   --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
 }
 
-.pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector, .pf-c-page__header {
+.pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector, .pf-c-page__sidebar, .pf-c-page__header {
   --pf-global--Color--100: var(--pf-global--Color--light-100);
   --pf-global--Color--200: var(--pf-global--Color--light-200);
   --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -17,27 +17,6 @@
   --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
   --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
 }
-.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card, .pf-c-page__header .pf-c-card {
-  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
-}
-.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button, .pf-c-page__header .pf-c-button {
-  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
-  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
-}
 
 .pf-c-page__header-tools-item, .pf-c-page__header-tools-group {
   --pf-hidden-visible--hidden--Display: none;
@@ -90,6 +69,8 @@
 
 .pf-c-page {
   --pf-c-page--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
+  --pf-c-page--inset: var(--pf-global--spacer--md);
+  --pf-c-page--xl--inset: var(--pf-global--spacer--lg);
   --pf-c-page__header--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
   --pf-c-page__header--ZIndex: var(--pf-global--ZIndex--md);
   --pf-c-page__header--MinHeight: 4.75rem;
@@ -136,10 +117,10 @@
   --pf-c-page__sidebar--TranslateZ: 0;
   --pf-c-page__sidebar--m-expanded--TranslateX: 0;
   --pf-c-page__sidebar--xl--TranslateX: 0;
-  --pf-c-page__sidebar-body--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-page__sidebar-body--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-page__sidebar-body--m-menu--PaddingTop: 0;
-  --pf-c-page__sidebar-body--m-menu--PaddingBottom: 0;
+  --pf-c-page__sidebar-body--PaddingRight: 0;
+  --pf-c-page__sidebar-body--PaddingLeft: 0;
+  --pf-c-page__sidebar-body--m-page-insets--PaddingRight: var(--pf-c-page--inset);
+  --pf-c-page__sidebar-body--m-page-insets--PaddingLeft: var(--pf-c-page--inset);
   --pf-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-global--BackgroundColor--dark-200);
   --pf-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
@@ -201,15 +182,16 @@
   --pf-c-page__main-wizard--BorderTopWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
   display: grid;
-  height: 100%;
-  grid-template-columns: 1fr;
-  grid-template-rows: max-content 1fr;
   grid-template-areas: "header" "main";
+  grid-template-rows: max-content 1fr;
+  grid-template-columns: 1fr;
+  height: 100%;
   background-color: var(--pf-c-page--BackgroundColor);
 }
 @media (min-width: 1200px) {
   .pf-c-page {
     --pf-c-page__header-brand--PaddingLeft: var(--pf-c-page__header-brand--xl--PaddingLeft);
+    --pf-c-page--inset: var(--pf-c-page--xl--inset);
   }
 }
 @media screen and (min-width: 1200px) {
@@ -251,8 +233,8 @@
 }
 @media (min-width: 1200px) {
   .pf-c-page {
-    grid-template-columns: max-content 1fr;
     grid-template-areas: "header header" "nav main";
+    grid-template-columns: max-content 1fr;
   }
 }
 .pf-c-page.pf-m-full-height {
@@ -263,14 +245,14 @@
 
 .pf-c-page__header,
 .pf-c-page > .pf-c-masthead {
-  grid-area: header;
   z-index: var(--pf-c-page__header--ZIndex);
+  grid-area: header;
 }
 
 .pf-c-page__header {
   color: var(--pf-global--Color--100);
-  grid-template-columns: auto auto;
   display: grid;
+  grid-template-columns: auto auto;
   align-items: center;
   min-width: 0;
   min-height: var(--pf-c-page__header--MinHeight);
@@ -318,18 +300,18 @@
 }
 
 .pf-c-page__header-nav {
+  grid-row: 2/3;
+  grid-column: 1/-1;
   align-self: stretch;
   min-width: 0;
   padding-right: var(--pf-c-page__header-nav--PaddingRight);
   padding-left: var(--pf-c-page__header-nav--PaddingLeft);
   background-color: var(--pf-c-page__header-nav--BackgroundColor);
-  grid-column: 1/-1;
-  grid-row: 2/3;
 }
 @media screen and (min-width: 1200px) {
   .pf-c-page__header-nav {
-    grid-column: 2/3;
     grid-row: 1/2;
+    grid-column: 2/3;
   }
 }
 .pf-c-page__header-nav .pf-c-nav {
@@ -395,10 +377,13 @@
 }
 
 .pf-c-page__sidebar {
+  color: var(--pf-global--Color--100);
+  z-index: var(--pf-c-page__sidebar--ZIndex);
+  display: flex;
+  flex-direction: column;
   grid-area: nav;
   grid-row-start: 2;
   grid-column-start: 1;
-  z-index: var(--pf-c-page__sidebar--ZIndex);
   width: var(--pf-c-page__sidebar--Width);
   overflow-x: hidden;
   overflow-y: auto;
@@ -427,12 +412,13 @@
 }
 
 .pf-c-page__sidebar-body {
-  padding-top: var(--pf-c-page__sidebar-body--PaddingTop);
-  padding-bottom: var(--pf-c-page__sidebar-body--PaddingBottom);
+  padding-right: var(--pf-c-page__sidebar-body--PaddingRight);
+  padding-left: var(--pf-c-page__sidebar-body--PaddingLeft);
+}
+.pf-c-page__sidebar-body:last-child {
+  flex-grow: 1;
 }
 .pf-c-page__sidebar-body.pf-m-menu {
-  --pf-c-page__sidebar-body--PaddingTop: var(--pf-c-page__sidebar-body--m-menu--PaddingTop);
-  --pf-c-page__sidebar-body--PaddingBottom: var(--pf-c-page__sidebar-body--m-menu--PaddingBottom);
   background-color: var(--pf-global--palette--black-900);
   border-top: var(--pf-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-c-page__sidebar-body--m-menu--BorderTopColor);
 }
@@ -448,6 +434,20 @@
   color: var(--pf-global--Color--100);
   width: 100%;
 }
+.pf-c-page__sidebar-body.pf-m-page-insets {
+  --pf-c-page__sidebar-body--PaddingRight: var(--pf-c-page__sidebar-body--m-page-insets--PaddingRight);
+  --pf-c-page__sidebar-body--PaddingLeft: var(--pf-c-page__sidebar-body--m-page-insets--PaddingLeft);
+}
+.pf-c-page__sidebar-body.pf-m-inset-none {
+  --pf-c-page__sidebar-body--PaddingRight: 0;
+  --pf-c-page__sidebar-body--PaddingLeft: 0;
+}
+.pf-c-page__sidebar-body.pf-m-fill {
+  flex-grow: 1;
+}
+.pf-c-page__sidebar-body.pf-m-no-fill {
+  flex-grow: 0;
+}
 
 .pf-c-page__main-nav.pf-m-limit-width,
 .pf-c-page__main-breadcrumb.pf-m-limit-width,
@@ -547,24 +547,24 @@
 }
 @media (min-height: 0) {
   .pf-c-page__main-nav.pf-m-sticky-top-on-sm-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height,
-.pf-c-page__main-tabs.pf-m-sticky-top-on-sm-height,
-.pf-c-page__main-section.pf-m-sticky-top-on-sm-height,
-.pf-c-page__main-wizard.pf-m-sticky-top-on-sm-height,
-.pf-c-page__main-group.pf-m-sticky-top-on-sm-height,
-.pf-c-page__main-subnav.pf-m-sticky-top-on-sm-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height,
+  .pf-c-page__main-tabs.pf-m-sticky-top-on-sm-height,
+  .pf-c-page__main-section.pf-m-sticky-top-on-sm-height,
+  .pf-c-page__main-wizard.pf-m-sticky-top-on-sm-height,
+  .pf-c-page__main-group.pf-m-sticky-top-on-sm-height,
+  .pf-c-page__main-subnav.pf-m-sticky-top-on-sm-height {
     position: sticky;
     top: 0;
     z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
   }
   .pf-c-page__main-nav.pf-m-sticky-bottom-on-sm-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
-.pf-c-page__main-tabs.pf-m-sticky-bottom-on-sm-height,
-.pf-c-page__main-section.pf-m-sticky-bottom-on-sm-height,
-.pf-c-page__main-wizard.pf-m-sticky-bottom-on-sm-height,
-.pf-c-page__main-group.pf-m-sticky-bottom-on-sm-height,
-.pf-c-page__main-subnav.pf-m-sticky-bottom-on-sm-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
+  .pf-c-page__main-tabs.pf-m-sticky-bottom-on-sm-height,
+  .pf-c-page__main-section.pf-m-sticky-bottom-on-sm-height,
+  .pf-c-page__main-wizard.pf-m-sticky-bottom-on-sm-height,
+  .pf-c-page__main-group.pf-m-sticky-bottom-on-sm-height,
+  .pf-c-page__main-subnav.pf-m-sticky-bottom-on-sm-height {
     position: sticky;
     bottom: 0;
     z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
@@ -573,24 +573,24 @@
 }
 @media (min-height: 40rem) {
   .pf-c-page__main-nav.pf-m-sticky-top-on-md-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height,
-.pf-c-page__main-tabs.pf-m-sticky-top-on-md-height,
-.pf-c-page__main-section.pf-m-sticky-top-on-md-height,
-.pf-c-page__main-wizard.pf-m-sticky-top-on-md-height,
-.pf-c-page__main-group.pf-m-sticky-top-on-md-height,
-.pf-c-page__main-subnav.pf-m-sticky-top-on-md-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height,
+  .pf-c-page__main-tabs.pf-m-sticky-top-on-md-height,
+  .pf-c-page__main-section.pf-m-sticky-top-on-md-height,
+  .pf-c-page__main-wizard.pf-m-sticky-top-on-md-height,
+  .pf-c-page__main-group.pf-m-sticky-top-on-md-height,
+  .pf-c-page__main-subnav.pf-m-sticky-top-on-md-height {
     position: sticky;
     top: 0;
     z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
   }
   .pf-c-page__main-nav.pf-m-sticky-bottom-on-md-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
-.pf-c-page__main-tabs.pf-m-sticky-bottom-on-md-height,
-.pf-c-page__main-section.pf-m-sticky-bottom-on-md-height,
-.pf-c-page__main-wizard.pf-m-sticky-bottom-on-md-height,
-.pf-c-page__main-group.pf-m-sticky-bottom-on-md-height,
-.pf-c-page__main-subnav.pf-m-sticky-bottom-on-md-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
+  .pf-c-page__main-tabs.pf-m-sticky-bottom-on-md-height,
+  .pf-c-page__main-section.pf-m-sticky-bottom-on-md-height,
+  .pf-c-page__main-wizard.pf-m-sticky-bottom-on-md-height,
+  .pf-c-page__main-group.pf-m-sticky-bottom-on-md-height,
+  .pf-c-page__main-subnav.pf-m-sticky-bottom-on-md-height {
     position: sticky;
     bottom: 0;
     z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
@@ -599,24 +599,24 @@
 }
 @media (min-height: 48rem) {
   .pf-c-page__main-nav.pf-m-sticky-top-on-lg-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height,
-.pf-c-page__main-tabs.pf-m-sticky-top-on-lg-height,
-.pf-c-page__main-section.pf-m-sticky-top-on-lg-height,
-.pf-c-page__main-wizard.pf-m-sticky-top-on-lg-height,
-.pf-c-page__main-group.pf-m-sticky-top-on-lg-height,
-.pf-c-page__main-subnav.pf-m-sticky-top-on-lg-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height,
+  .pf-c-page__main-tabs.pf-m-sticky-top-on-lg-height,
+  .pf-c-page__main-section.pf-m-sticky-top-on-lg-height,
+  .pf-c-page__main-wizard.pf-m-sticky-top-on-lg-height,
+  .pf-c-page__main-group.pf-m-sticky-top-on-lg-height,
+  .pf-c-page__main-subnav.pf-m-sticky-top-on-lg-height {
     position: sticky;
     top: 0;
     z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
   }
   .pf-c-page__main-nav.pf-m-sticky-bottom-on-lg-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
-.pf-c-page__main-tabs.pf-m-sticky-bottom-on-lg-height,
-.pf-c-page__main-section.pf-m-sticky-bottom-on-lg-height,
-.pf-c-page__main-wizard.pf-m-sticky-bottom-on-lg-height,
-.pf-c-page__main-group.pf-m-sticky-bottom-on-lg-height,
-.pf-c-page__main-subnav.pf-m-sticky-bottom-on-lg-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
+  .pf-c-page__main-tabs.pf-m-sticky-bottom-on-lg-height,
+  .pf-c-page__main-section.pf-m-sticky-bottom-on-lg-height,
+  .pf-c-page__main-wizard.pf-m-sticky-bottom-on-lg-height,
+  .pf-c-page__main-group.pf-m-sticky-bottom-on-lg-height,
+  .pf-c-page__main-subnav.pf-m-sticky-bottom-on-lg-height {
     position: sticky;
     bottom: 0;
     z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
@@ -625,24 +625,24 @@
 }
 @media (min-height: 60rem) {
   .pf-c-page__main-nav.pf-m-sticky-top-on-xl-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height,
-.pf-c-page__main-tabs.pf-m-sticky-top-on-xl-height,
-.pf-c-page__main-section.pf-m-sticky-top-on-xl-height,
-.pf-c-page__main-wizard.pf-m-sticky-top-on-xl-height,
-.pf-c-page__main-group.pf-m-sticky-top-on-xl-height,
-.pf-c-page__main-subnav.pf-m-sticky-top-on-xl-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height,
+  .pf-c-page__main-tabs.pf-m-sticky-top-on-xl-height,
+  .pf-c-page__main-section.pf-m-sticky-top-on-xl-height,
+  .pf-c-page__main-wizard.pf-m-sticky-top-on-xl-height,
+  .pf-c-page__main-group.pf-m-sticky-top-on-xl-height,
+  .pf-c-page__main-subnav.pf-m-sticky-top-on-xl-height {
     position: sticky;
     top: 0;
     z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
   }
   .pf-c-page__main-nav.pf-m-sticky-bottom-on-xl-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
-.pf-c-page__main-tabs.pf-m-sticky-bottom-on-xl-height,
-.pf-c-page__main-section.pf-m-sticky-bottom-on-xl-height,
-.pf-c-page__main-wizard.pf-m-sticky-bottom-on-xl-height,
-.pf-c-page__main-group.pf-m-sticky-bottom-on-xl-height,
-.pf-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
+  .pf-c-page__main-tabs.pf-m-sticky-bottom-on-xl-height,
+  .pf-c-page__main-section.pf-m-sticky-bottom-on-xl-height,
+  .pf-c-page__main-wizard.pf-m-sticky-bottom-on-xl-height,
+  .pf-c-page__main-group.pf-m-sticky-bottom-on-xl-height,
+  .pf-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height {
     position: sticky;
     bottom: 0;
     z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
@@ -651,24 +651,24 @@
 }
 @media (min-height: 80rem) {
   .pf-c-page__main-nav.pf-m-sticky-top-on-2xl-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height,
-.pf-c-page__main-tabs.pf-m-sticky-top-on-2xl-height,
-.pf-c-page__main-section.pf-m-sticky-top-on-2xl-height,
-.pf-c-page__main-wizard.pf-m-sticky-top-on-2xl-height,
-.pf-c-page__main-group.pf-m-sticky-top-on-2xl-height,
-.pf-c-page__main-subnav.pf-m-sticky-top-on-2xl-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height,
+  .pf-c-page__main-tabs.pf-m-sticky-top-on-2xl-height,
+  .pf-c-page__main-section.pf-m-sticky-top-on-2xl-height,
+  .pf-c-page__main-wizard.pf-m-sticky-top-on-2xl-height,
+  .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height,
+  .pf-c-page__main-subnav.pf-m-sticky-top-on-2xl-height {
     position: sticky;
     top: 0;
     z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
   }
   .pf-c-page__main-nav.pf-m-sticky-bottom-on-2xl-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
-.pf-c-page__main-tabs.pf-m-sticky-bottom-on-2xl-height,
-.pf-c-page__main-section.pf-m-sticky-bottom-on-2xl-height,
-.pf-c-page__main-wizard.pf-m-sticky-bottom-on-2xl-height,
-.pf-c-page__main-group.pf-m-sticky-bottom-on-2xl-height,
-.pf-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
+  .pf-c-page__main-tabs.pf-m-sticky-bottom-on-2xl-height,
+  .pf-c-page__main-section.pf-m-sticky-bottom-on-2xl-height,
+  .pf-c-page__main-wizard.pf-m-sticky-bottom-on-2xl-height,
+  .pf-c-page__main-group.pf-m-sticky-bottom-on-2xl-height,
+  .pf-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height {
     position: sticky;
     bottom: 0;
     z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
@@ -678,8 +678,8 @@
 
 .pf-c-page__main,
 .pf-c-page__drawer {
-  grid-area: main;
   z-index: var(--pf-c-page__main--ZIndex);
+  grid-area: main;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
@@ -963,27 +963,6 @@
   --pf-global--link--Color--hover: #73bcf7;
   --pf-global--BackgroundColor--100: #1b1d21;
 }
-:where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card,
-:where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card,
-:where(.pf-theme-dark) .pf-c-page__header .pf-c-card {
-  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
-}
-:where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button,
-:where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button,
-:where(.pf-theme-dark) .pf-c-page__header .pf-c-button {
-  --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
-  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
-  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
-  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
-  --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
-  --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
-  --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
-  --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
-}
 
 :where(.pf-theme-dark) .pf-c-page {
   --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--200);