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

package/components/Page/page.scss

@@ -1,9 +1,13 @@
+// stylelint-disable
 $pf-c-page--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+// stylelint-enable
 
 // URL.com/guidelines#layout
 .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);
 
   // Header
   --pf-c-page__header--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
@@ -17,6 +21,7 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
 
   @media (min-width: $pf-global--breakpoint--xl) {
     --pf-c-page__header-brand--PaddingLeft: var(--pf-c-page__header-brand--xl--PaddingLeft);
+    --pf-c-page--inset: var(--pf-c-page--xl--inset);
   }
 
   // Toggle
@@ -84,10 +89,10 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
   --pf-c-page__sidebar--xl--TranslateX: 0;
 
   // Sidebar body
-  --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);
@@ -193,20 +198,20 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
 
   // Base
   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: $pf-global--breakpoint--xl) {
-    grid-template-columns: max-content 1fr;
     grid-template-areas:
       "header header"
       "nav main";
-  }
+    grid-template-columns: max-content 1fr;
+    }
 
   // full height
   &.pf-m-full-height {
@@ -219,15 +224,15 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
 // Header
 .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 {
   @include pf-t-dark; // force the container to follow the dark theme
 
-  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);
@@ -282,17 +287,17 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
 
 // Header navigation
 .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: $pf-global--breakpoint--xl) {
-    grid-column: 2 / 3;
     grid-row: 1 / 2;
+    grid-column: 2 / 3;
   }
 
   .pf-c-nav {
@@ -386,10 +391,14 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
 
 // Sidebar
 .pf-c-page__sidebar {
+  @include pf-t-dark;
+
+  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,13 +436,14 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
 }
 
 .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-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);
+  &:last-child {
+    flex-grow: 1;
+  }
 
+  &.pf-m-menu {
     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);
 
@@ -453,6 +463,24 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
       width: 100%;
     }
   }
+
+  &.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-m-inset-none {
+    --pf-c-page__sidebar-body--PaddingRight: 0;
+    --pf-c-page__sidebar-body--PaddingLeft: 0;
+  }
+
+  &.pf-m-fill {
+    flex-grow: 1;
+  }
+
+  &.pf-m-no-fill {
+    flex-grow: 0;
+  }
 }
 
 .pf-c-page__main-nav,
@@ -531,8 +559,8 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
 // Main & Drawer
 .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;

package/components/Pagination/pagination.css

@@ -145,8 +145,8 @@
     padding: var(--pf-c-pagination--m-bottom--md--PaddingTop) var(--pf-c-pagination--m-bottom--md--PaddingRight) var(--pf-c-pagination--m-bottom--md--PaddingBottom) var(--pf-c-pagination--m-bottom--md--PaddingLeft);
   }
   .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-first,
-.pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-last,
-.pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-page-select {
+  .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-last,
+  .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-page-select {
     display: block;
   }
   .pf-c-pagination.pf-m-bottom .pf-c-options-menu {
@@ -247,24 +247,6 @@
 .pf-c-pagination.pf-m-inset-2xl {
   --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
 }
-.pf-c-pagination.pf-m-inset-none {
-  --pf-c-pagination--inset: 0;
-}
-.pf-c-pagination.pf-m-inset-sm {
-  --pf-c-pagination--inset: var(--pf-global--spacer--sm);
-}
-.pf-c-pagination.pf-m-inset-md {
-  --pf-c-pagination--inset: var(--pf-global--spacer--md);
-}
-.pf-c-pagination.pf-m-inset-lg {
-  --pf-c-pagination--inset: var(--pf-global--spacer--lg);
-}
-.pf-c-pagination.pf-m-inset-xl {
-  --pf-c-pagination--inset: var(--pf-global--spacer--xl);
-}
-.pf-c-pagination.pf-m-inset-2xl {
-  --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
-}
 @media (min-width: 576px) {
   .pf-c-pagination.pf-m-display-summary-on-sm {
     --pf-c-pagination__nav--Display: var(--pf-c-pagination--m-display-summary__nav--Display);
@@ -294,24 +276,6 @@
   .pf-c-pagination.pf-m-inset-2xl-on-sm {
     --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
   }
-  .pf-c-pagination.pf-m-inset-none-on-sm {
-    --pf-c-pagination--inset: 0;
-  }
-  .pf-c-pagination.pf-m-inset-sm-on-sm {
-    --pf-c-pagination--inset: var(--pf-global--spacer--sm);
-  }
-  .pf-c-pagination.pf-m-inset-md-on-sm {
-    --pf-c-pagination--inset: var(--pf-global--spacer--md);
-  }
-  .pf-c-pagination.pf-m-inset-lg-on-sm {
-    --pf-c-pagination--inset: var(--pf-global--spacer--lg);
-  }
-  .pf-c-pagination.pf-m-inset-xl-on-sm {
-    --pf-c-pagination--inset: var(--pf-global--spacer--xl);
-  }
-  .pf-c-pagination.pf-m-inset-2xl-on-sm {
-    --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
-  }
 }
 @media (min-width: 768px) {
   .pf-c-pagination.pf-m-display-summary-on-md {
@@ -342,24 +306,6 @@
   .pf-c-pagination.pf-m-inset-2xl-on-md {
     --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
   }
-  .pf-c-pagination.pf-m-inset-none-on-md {
-    --pf-c-pagination--inset: 0;
-  }
-  .pf-c-pagination.pf-m-inset-sm-on-md {
-    --pf-c-pagination--inset: var(--pf-global--spacer--sm);
-  }
-  .pf-c-pagination.pf-m-inset-md-on-md {
-    --pf-c-pagination--inset: var(--pf-global--spacer--md);
-  }
-  .pf-c-pagination.pf-m-inset-lg-on-md {
-    --pf-c-pagination--inset: var(--pf-global--spacer--lg);
-  }
-  .pf-c-pagination.pf-m-inset-xl-on-md {
-    --pf-c-pagination--inset: var(--pf-global--spacer--xl);
-  }
-  .pf-c-pagination.pf-m-inset-2xl-on-md {
-    --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
-  }
 }
 @media (min-width: 992px) {
   .pf-c-pagination.pf-m-display-summary-on-lg {
@@ -390,24 +336,6 @@
   .pf-c-pagination.pf-m-inset-2xl-on-lg {
     --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
   }
-  .pf-c-pagination.pf-m-inset-none-on-lg {
-    --pf-c-pagination--inset: 0;
-  }
-  .pf-c-pagination.pf-m-inset-sm-on-lg {
-    --pf-c-pagination--inset: var(--pf-global--spacer--sm);
-  }
-  .pf-c-pagination.pf-m-inset-md-on-lg {
-    --pf-c-pagination--inset: var(--pf-global--spacer--md);
-  }
-  .pf-c-pagination.pf-m-inset-lg-on-lg {
-    --pf-c-pagination--inset: var(--pf-global--spacer--lg);
-  }
-  .pf-c-pagination.pf-m-inset-xl-on-lg {
-    --pf-c-pagination--inset: var(--pf-global--spacer--xl);
-  }
-  .pf-c-pagination.pf-m-inset-2xl-on-lg {
-    --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
-  }
 }
 @media (min-width: 1200px) {
   .pf-c-pagination.pf-m-display-summary-on-xl {
@@ -438,24 +366,6 @@
   .pf-c-pagination.pf-m-inset-2xl-on-xl {
     --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
   }
-  .pf-c-pagination.pf-m-inset-none-on-xl {
-    --pf-c-pagination--inset: 0;
-  }
-  .pf-c-pagination.pf-m-inset-sm-on-xl {
-    --pf-c-pagination--inset: var(--pf-global--spacer--sm);
-  }
-  .pf-c-pagination.pf-m-inset-md-on-xl {
-    --pf-c-pagination--inset: var(--pf-global--spacer--md);
-  }
-  .pf-c-pagination.pf-m-inset-lg-on-xl {
-    --pf-c-pagination--inset: var(--pf-global--spacer--lg);
-  }
-  .pf-c-pagination.pf-m-inset-xl-on-xl {
-    --pf-c-pagination--inset: var(--pf-global--spacer--xl);
-  }
-  .pf-c-pagination.pf-m-inset-2xl-on-xl {
-    --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
-  }
 }
 @media (min-width: 1450px) {
   .pf-c-pagination.pf-m-display-summary-on-2xl {
@@ -486,24 +396,6 @@
   .pf-c-pagination.pf-m-inset-2xl-on-2xl {
     --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
   }
-  .pf-c-pagination.pf-m-inset-none-on-2xl {
-    --pf-c-pagination--inset: 0;
-  }
-  .pf-c-pagination.pf-m-inset-sm-on-2xl {
-    --pf-c-pagination--inset: var(--pf-global--spacer--sm);
-  }
-  .pf-c-pagination.pf-m-inset-md-on-2xl {
-    --pf-c-pagination--inset: var(--pf-global--spacer--md);
-  }
-  .pf-c-pagination.pf-m-inset-lg-on-2xl {
-    --pf-c-pagination--inset: var(--pf-global--spacer--lg);
-  }
-  .pf-c-pagination.pf-m-inset-xl-on-2xl {
-    --pf-c-pagination--inset: var(--pf-global--spacer--xl);
-  }
-  .pf-c-pagination.pf-m-inset-2xl-on-2xl {
-    --pf-c-pagination--inset: var(--pf-global--spacer--2xl);
-  }
 }
 
 :where(.pf-theme-dark) .pf-c-pagination {

package/components/Pagination/pagination.scss

@@ -291,12 +291,6 @@ $pf-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl",
           --pf-c-pagination--inset: #{$spacer-value};
         }
       }
-
-      @each $spacer, $spacer-value in $pf-c-pagination--variable-map {
-        &.pf-m-inset-#{$spacer}#{$breakpoint-name} {
-          --pf-c-pagination--inset: #{$spacer-value};
-        }
-      }
     }
   }
 }

package/components/Popover/popover.css

@@ -7,12 +7,12 @@
   --pf-c-popover--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
   --pf-c-popover--m-success__title-icon--Color: var(--pf-global--success-color--100);
   --pf-c-popover--m-info__title-icon--Color: var(--pf-global--info-color--100);
-  --pf-c-popover--m-default__title-icon--Color: var(--pf-global--default-color--200);
+  --pf-c-popover--m-custom__title-icon--Color: var(--pf-global--custom-color--200);
   --pf-c-popover--m-danger__title-text--Color: var(--pf-global--danger-color--200);
   --pf-c-popover--m-warning__title-text--Color: var(--pf-global--warning-color--200);
   --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--200);
   --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--200);
-  --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--300);
+  --pf-c-popover--m-custom__title-text--Color: var(--pf-global--custom-color--300);
   --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-popover__content--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-popover__content--PaddingRight: var(--pf-global--spacer--md);
@@ -34,17 +34,16 @@
   --pf-c-popover__arrow--m-left--TranslateX: 50%;
   --pf-c-popover__arrow--m-left--TranslateY: -50%;
   --pf-c-popover__arrow--m-left--Rotate: 45deg;
-  --pf-c-popover--c-button--MarginLeft: var(--pf-global--spacer--sm);
-  --pf-c-popover--c-button--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element));
-  --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md));
-  --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
-  --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
-  --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);
-  --pf-c-popover__title--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-popover__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
-  --pf-c-popover__title--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-popover__close--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element));
+  --pf-c-popover__close--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md));
+  --pf-c-popover__close--sibling--PaddingRight: var(--pf-global--spacer--2xl);
+  --pf-c-popover__header--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-popover__title-text--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-popover__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-popover__title-text--FontSize: var(--pf-global--FontSize--md);
   --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
+  --pf-c-popover__title-icon--FontSize: var(--pf-global--FontSize--md);
   --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
   position: relative;
   min-width: var(--pf-c-popover--MinWidth);
@@ -108,9 +107,9 @@
   --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-success__title-icon--Color);
   --pf-c-popover__title-text--Color: var(--pf-c-popover--m-success__title-text--Color);
 }
-.pf-c-popover.pf-m-default {
-  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-default__title-icon--Color);
-  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-default__title-text--Color);
+.pf-c-popover.pf-m-custom {
+  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-custom__title-icon--Color);
+  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-custom__title-text--Color);
 }
 .pf-c-popover.pf-m-info {
   --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-info__title-icon--Color);
@@ -122,16 +121,14 @@
   padding: var(--pf-c-popover__content--PaddingTop) var(--pf-c-popover__content--PaddingRight) var(--pf-c-popover__content--PaddingBottom) var(--pf-c-popover__content--PaddingLeft);
   background-color: var(--pf-c-popover__content--BackgroundColor);
 }
-.pf-c-popover__content > .pf-c-title {
-  margin-bottom: var(--pf-c-popover--c-title--MarginBottom);
-}
-.pf-c-popover__content > .pf-c-button {
+
+.pf-c-popover__close {
   position: absolute;
-  top: var(--pf-c-popover--c-button--Top);
-  right: var(--pf-c-popover--c-button--Right);
+  top: var(--pf-c-popover__close--Top);
+  right: var(--pf-c-popover__close--Right);
 }
-.pf-c-popover__content > .pf-c-button + * {
-  padding-right: var(--pf-c-popover--c-button--sibling--PaddingRight);
+.pf-c-popover__close + * {
+  padding-right: var(--pf-c-popover__close--sibling--PaddingRight);
 }
 
 .pf-c-popover__arrow {
@@ -143,23 +140,25 @@
   box-shadow: var(--pf-c-popover__arrow--BoxShadow);
 }
 
-.pf-c-popover__title {
-  flex: 0 0 auto;
-  margin-bottom: var(--pf-c-popover__title--MarginBottom);
-  font-family: var(--pf-c-popover__title--FontFamily);
-  font-size: var(--pf-c-popover__title--FontSize);
-  line-height: var(--pf-c-popover__title--LineHeight);
+.pf-c-popover__header {
+  margin-bottom: var(--pf-c-popover__header--MarginBottom);
 }
-.pf-c-popover__title.pf-m-icon {
+
+.pf-c-popover__title {
   display: flex;
+  flex: 0 0 auto;
 }
 
 .pf-c-popover__title-icon {
   margin-right: var(--pf-c-popover__title-icon--MarginRight);
+  font-size: var(--pf-c-popover__title-icon--FontSize);
   color: var(--pf-c-popover__title-icon--Color);
 }
 
 .pf-c-popover__title-text {
+  font-family: var(--pf-c-popover__title-text--FontFamily);
+  font-size: var(--pf-c-popover__title-text--FontSize);
+  line-height: var(--pf-c-popover__title-text--LineHeight);
   color: var(--pf-c-popover__title-text--Color, inherit);
 }
 
@@ -172,14 +171,9 @@
 }
 
 :where(.pf-theme-dark) .pf-c-popover {
-  --pf-c-popover--BoxShadow: none;
-  --pf-c-popover__arrow--BoxShadow: none;
-  --pf-c-popover__arrow--BackgroundColor: var(--pf-c-popover__content--BackgroundColor);
-  --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
+  --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-popover--m-default__title-text--Color: var(--pf-global--custom-color--200);
   --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
   --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
-}
-:where(.pf-theme-dark) .pf-c-popover,
-:where(.pf-theme-dark) .pf-c-popover .pf-c-popover__arrow {
-  border: 4px solid var(--pf-global--BorderColor--400);
 }

package/components/Popover/popover.scss

@@ -10,14 +10,14 @@
   --pf-c-popover--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
   --pf-c-popover--m-success__title-icon--Color: var(--pf-global--success-color--100);
   --pf-c-popover--m-info__title-icon--Color: var(--pf-global--info-color--100);
-  --pf-c-popover--m-default__title-icon--Color: var(--pf-global--default-color--200);
+  --pf-c-popover--m-custom__title-icon--Color: var(--pf-global--custom-color--200);
 
   // Title text colors for states
   --pf-c-popover--m-danger__title-text--Color: var(--pf-global--danger-color--200);
   --pf-c-popover--m-warning__title-text--Color: var(--pf-global--warning-color--200);
   --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--200);
   --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--200);
-  --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--300);
+  --pf-c-popover--m-custom__title-text--Color: var(--pf-global--custom-color--300);
 
   // Content
   --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
@@ -45,23 +45,22 @@
   --pf-c-popover__arrow--m-left--Rotate: 45deg;
 
   // Close
-  --pf-c-popover--c-button--MarginLeft: var(--pf-global--spacer--sm);
-  --pf-c-popover--c-button--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element)); // align top of button with top of text
-  --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md)); // align right of content
-  --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
+  --pf-c-popover__close--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element)); // align top of button with top of text
+  --pf-c-popover__close--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md)); // align right of content
+  --pf-c-popover__close--sibling--PaddingRight: var(--pf-global--spacer--2xl);
 
   // Header
-  --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-popover__header--MarginBottom: var(--pf-global--spacer--sm);
 
-  // Title
-  --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);
-  --pf-c-popover__title--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-popover__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
-  --pf-c-popover__title--FontSize: var(--pf-global--FontSize--md);
+  // Title text
+  --pf-c-popover__title-text--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-popover__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-popover__title-text--FontSize: var(--pf-global--FontSize--md);
 
   // Title icon
   --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
+  --pf-c-popover__title-icon--FontSize: var(--pf-global--FontSize--md);
 
   // Footer
   --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
@@ -172,9 +171,9 @@
     --pf-c-popover__title-text--Color: var(--pf-c-popover--m-success__title-text--Color);
   }
 
-  &.pf-m-default {
-    --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-default__title-icon--Color);
-    --pf-c-popover__title-text--Color: var(--pf-c-popover--m-default__title-text--Color);
+  &.pf-m-custom {
+    --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-custom__title-icon--Color);
+    --pf-c-popover__title-text--Color: var(--pf-c-popover--m-custom__title-text--Color);
   }
 
   &.pf-m-info {
@@ -187,22 +186,17 @@
   position: relative;
   padding: var(--pf-c-popover__content--PaddingTop) var(--pf-c-popover__content--PaddingRight) var(--pf-c-popover__content--PaddingBottom) var(--pf-c-popover__content--PaddingLeft);
   background-color: var(--pf-c-popover__content--BackgroundColor);
+}
 
-  // Remove in breaking change
-  > .pf-c-title {
-    margin-bottom: var(--pf-c-popover--c-title--MarginBottom);
-  }
-
-  // Close button
-  > .pf-c-button {
-    position: absolute;
-    top: var(--pf-c-popover--c-button--Top);
-    right: var(--pf-c-popover--c-button--Right);
+// Close button
+.pf-c-popover__close {
+  position: absolute;
+  top: var(--pf-c-popover__close--Top);
+  right: var(--pf-c-popover__close--Right);
 
-    // Create room for the close button
-    + * {
-      padding-right: var(--pf-c-popover--c-button--sibling--PaddingRight);
-    }
+  // Create room for the close button
+  + * {
+    padding-right: var(--pf-c-popover__close--sibling--PaddingRight);
   }
 }
 
@@ -215,24 +209,25 @@
   box-shadow: var(--pf-c-popover__arrow--BoxShadow);
 }
 
+.pf-c-popover__header {
+  margin-bottom: var(--pf-c-popover__header--MarginBottom);
+}
+
 .pf-c-popover__title {
+  display: flex;
   flex: 0 0 auto;
-  margin-bottom: var(--pf-c-popover__title--MarginBottom);
-  font-family: var(--pf-c-popover__title--FontFamily);
-  font-size: var(--pf-c-popover__title--FontSize);
-  line-height: var(--pf-c-popover__title--LineHeight);
-
-  &.pf-m-icon {
-    display: flex;
-  }
 }
 
 .pf-c-popover__title-icon {
   margin-right: var(--pf-c-popover__title-icon--MarginRight);
+  font-size: var(--pf-c-popover__title-icon--FontSize);
   color: var(--pf-c-popover__title-icon--Color);
 }
 
 .pf-c-popover__title-text {
+  font-family: var(--pf-c-popover__title-text--FontFamily);
+  font-size: var(--pf-c-popover__title-text--FontSize);
+  line-height: var(--pf-c-popover__title-text--LineHeight);
   color: var(--pf-c-popover__title-text--Color, inherit);
 }
 

package/components/Popover/themes/dark/popover.scss

@@ -2,16 +2,10 @@
 
 @mixin pf-theme-dark-popover() {
   .pf-c-popover {
-    --pf-c-popover--BoxShadow: none;
-    --pf-c-popover__arrow--BoxShadow: none;
-    --pf-c-popover__arrow--BackgroundColor: var(--pf-c-popover__content--BackgroundColor);
-    --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
+    --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-popover--m-default__title-text--Color: var(--pf-global--custom-color--200);
     --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
     --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
-
-    &,
-    .pf-c-popover__arrow {
-      border: 4px solid var(--pf-global--BorderColor--400);
-    }
   }
 }