@patternfly/patternfly 4.196.0 → 4.196.3

package/components/Masthead/masthead.css

@@ -657,4 +657,36 @@
   .pf-c-masthead.pf-m-inset-2xl-on-2xl {
     --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
   }
+}
+
+:where(.pf-theme-dark) .pf-c-masthead {
+  --pf-global--Color--100: #fff;
+  --pf-global--Color--200: #aaabac;
+  --pf-global--BorderColor--100: #444548;
+  --pf-global--primary-color--100: #1fa7f8;
+  --pf-global--link--Color: #1fa7f8;
+  --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--BackgroundColor--100: #1b1d21;
+}
+:where(.pf-theme-dark) .pf-c-masthead .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-masthead {
+  --pf-c-masthead--BackgroundColor: var(--pf-global--palette--black-1000);
+  color: var(--pf-global--Color--100);
+}
+:where(.pf-theme-dark) .pf-c-masthead .pf-c-toolbar {
+  --pf-c-toolbar--BackgroundColor: var(--pf-global--palette--black-1000);
 }

package/components/Masthead/masthead.scss

@@ -355,3 +355,10 @@ $pf-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   }
 }
 // stylelint-enable
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/masthead";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-masthead;
+}

package/components/Masthead/themes/dark/masthead.scss

@@ -1,4 +1,6 @@
-@mixin masthead() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-masthead() {
   .pf-c-masthead {
     --pf-c-masthead--BackgroundColor: var(--pf-global--palette--black-1000);
 
@@ -6,6 +8,6 @@
       --pf-c-toolbar--BackgroundColor: var(--pf-global--palette--black-1000);
     }
 
-    @include pf-t-dark;
+    @include pf-theme-dark--t-dark;
   }
 }

package/components/Menu/menu.css

@@ -630,4 +630,13 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   content: "";
   border-top: var(--pf-c-menu__footer--after--BorderTopWidth) solid var(--pf-c-menu__footer--after--BorderTopColor);
   border-bottom: var(--pf-c-menu__footer--after--BorderBottomWidth) solid var(--pf-c-menu__footer--after--BorderBottomColor);
+}
+
+:where(.pf-theme-dark) .pf-c-menu {
+  --pf-c-menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--Color--200);
+  --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
+  --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
 }

package/components/Menu/menu.scss

@@ -742,3 +742,10 @@
     border-bottom: var(--pf-c-menu__footer--after--BorderBottomWidth) solid var(--pf-c-menu__footer--after--BorderBottomColor);
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/menu";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-menu;
+}

package/components/Menu/themes/dark/menu.scss

@@ -1,4 +1,6 @@
-@mixin menu() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-menu() {
   .pf-c-menu {
     --pf-c-menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
     --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);

package/components/MenuToggle/menu-toggle.css

@@ -390,4 +390,23 @@
 .pf-c-menu-toggle__toggle-icon {
   margin-right: var(--pf-c-menu-toggle__toggle-icon--MarginRight);
   color: var(--pf-c-menu-toggle__toggle-icon--Color, inherit);
+}
+
+:where(.pf-theme-dark) .pf-c-menu-toggle {
+  --pf-c-menu-toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-menu-toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-menu-toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-menu-toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-menu-toggle--before--BorderTopColor: transparent;
+  --pf-c-menu-toggle--before--BorderRightColor: transparent;
+  --pf-c-menu-toggle--before--BorderBottomColor: transparent;
+  --pf-c-menu-toggle--before--BorderLeftColor: transparent;
+  --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-global--BorderColor--400);
+  --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
+  --pf-c-menu-toggle--disabled--Color: var(--pf-global--palette--black-100);
+  --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
+}
+:where(.pf-theme-dark) .pf-c-menu-toggle.pf-m-plain {
+  background: transparent;
 }

package/components/MenuToggle/menu-toggle.scss

@@ -531,3 +531,10 @@
   margin-right: var(--pf-c-menu-toggle__toggle-icon--MarginRight);
   color: var(--pf-c-menu-toggle__toggle-icon--Color, inherit);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/menu-toggle";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-menu-toggle;
+}

package/components/MenuToggle/themes/dark/menu-toggle.scss

@@ -1,4 +1,6 @@
-@mixin menu-toggle() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-menu-toggle() {
   .pf-c-menu-toggle {
     --pf-c-menu-toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
     --pf-c-menu-toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);

package/components/ModalBox/modal-box.css

@@ -179,4 +179,8 @@
   .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
     --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-c-modal-box__footer--c-button--sm--MarginRight);
   }
+}
+
+:where(.pf-theme-dark) .pf-c-modal-box {
+  --pf-c-modal-box--BackgroundColor: var(--pf-global--BackgroundColor--300);
 }

package/components/ModalBox/modal-box.scss

@@ -216,3 +216,10 @@
     }
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/modal-box";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-modal-box;
+}

package/components/ModalBox/themes/dark/modal-box.scss

@@ -1,4 +1,6 @@
-@mixin modal-box() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-modal-box() {
   .pf-c-modal-box {
     --pf-c-modal-box--BackgroundColor: var(--pf-global--BackgroundColor--300);
   }

package/components/Nav/nav.css

@@ -925,4 +925,38 @@
 }
 .pf-c-nav__scroll-button:nth-of-type(2)::before {
   left: 0;
+}
+
+:where(.pf-theme-dark) .pf-c-nav {
+  --pf-c-nav__item--item__link--after--Top: -1px;
+  --pf-c-nav__item--before--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-nav__link--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-nav__link--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-nav__link--active--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-nav__link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-nav__link--before--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-nav--m-tertiary__scroll-button--before--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-nav__section-title--Color: var(--pf-global--Color--200);
+  --pf-c-nav__section-title--BorderBottomColor: var(--pf-global--BorderColor--100);
+  --pf-c-nav__scroll-button--before--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-nav--c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
+  --pf-c-nav__link--hover--before--BorderBottomWidth: 0;
+  --pf-c-nav__link--focus--before--BorderBottomWidth: 0;
+  --pf-c-nav__link--active--before--BorderBottomWidth: 0;
+  --pf-c-nav__link--m-current--before--BorderBottomWidth: 0;
+}
+:where(.pf-theme-dark) .pf-c-nav__link::before {
+  bottom: 0;
+}
+:where(.pf-theme-dark) .pf-c-nav__link::after {
+  top: var(--pf-c-nav__item--item__link--after--Top);
+}
+:where(.pf-theme-dark) .pf-c-nav__item + .pf-c-nav__item {
+  --pf-c-nav__link--after--Top: var(--pf-c-nav__item--item__link--after--Top);
+}
+:where(.pf-theme-dark) .pf-c-nav__subnav {
+  --pf-c-nav__item--item__link--after--Top: 0;
+}
+:where(.pf-theme-dark) .pf-c-nav__section {
+  --pf-c-nav__item--item__link--after--Top: 0;
 }

package/components/Nav/nav.scss

@@ -1150,3 +1150,10 @@
     }
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/nav";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-nav;
+}

package/components/Nav/themes/dark/nav.scss

@@ -1,4 +1,6 @@
-@mixin nav() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-nav() {
   .pf-c-nav {
     --pf-c-nav__item--item__link--after--Top: -1px;
     --pf-c-nav__item--before--BorderColor: var(--pf-global--BorderColor--100);

package/components/NotificationBadge/notification-badge.css

@@ -86,4 +86,8 @@
 
 .pf-c-notification-badge__count {
   margin-left: var(--pf-c-notification-badge__count--MarginLeft);
+}
+
+:where(.pf-theme-dark) .pf-c-notification-badge {
+  --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--primary-color--300);
 }

package/components/NotificationBadge/notification-badge.scss

@@ -116,3 +116,10 @@
 .pf-c-notification-badge__count {
   margin-left: var(--pf-c-notification-badge__count--MarginLeft);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/notification-badge";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-notification-badge;
+}

package/components/NotificationBadge/themes/dark/notification-badge.scss

@@ -1,4 +1,6 @@
-@mixin notification-badge() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-notification-badge() {
   .pf-c-notification-badge {
     --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--primary-color--300);
   }

package/components/NotificationDrawer/notification-drawer.css

@@ -259,4 +259,15 @@
 }
 .pf-c-notification-drawer__group.pf-m-expanded .pf-c-notification-drawer__group-toggle-icon {
   transform: rotate(var(--pf-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
+}
+
+:where(.pf-theme-dark) .pf-c-notification-drawer {
+  --pf-c-notification-drawer--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-notification-drawer__header--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-notification-drawer__list-item--BoxShadow: none;
+  --pf-c-notification-drawer__list-item--BorderBottomColor: var(--pf-global--BorderColor--100);
+  --pf-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow: none;
+  --pf-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-global--BackgroundColor--300);
 }

package/components/NotificationDrawer/notification-drawer.scss

@@ -303,3 +303,10 @@
     transform: rotate(var(--pf-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/notification-drawer";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-notification-drawer;
+}

package/components/NotificationDrawer/themes/dark/notification-drawer.scss

@@ -1,4 +1,6 @@
-@mixin notification-drawer() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-notification-drawer() {
   .pf-c-notification-drawer {
     --pf-c-notification-drawer--BackgroundColor: var(--pf-global--BackgroundColor--300);
     --pf-c-notification-drawer__header--BackgroundColor: var(--pf-global--BackgroundColor--300);

package/components/OptionsMenu/options-menu.css

@@ -241,4 +241,21 @@
   font-size: var(--pf-c-options-menu__group-title--FontSize);
   font-weight: var(--pf-c-options-menu__group-title--FontWeight);
   color: var(--pf-c-options-menu__group-title--Color);
+}
+
+:where(.pf-theme-dark) .pf-c-options-menu {
+  --pf-c-options-menu__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-options-menu__toggle--BorderTopColor: transparent;
+  --pf-c-options-menu__toggle--BorderRightColor: transparent;
+  --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-global--BorderColor--400);
+  --pf-c-options-menu__toggle--BorderLeftColor: transparent;
+  --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
+  --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
+  --pf-c-options-menu__menu--Top: 100%;
+}
+:where(.pf-theme-dark) .pf-c-options-menu__toggle.pf-m-plain {
+  background: transparent;
 }

package/components/OptionsMenu/options-menu.scss

@@ -299,3 +299,10 @@
   font-weight: var(--pf-c-options-menu__group-title--FontWeight);
   color: var(--pf-c-options-menu__group-title--Color);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/options-menu";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-options-menu;
+}

package/components/OptionsMenu/themes/dark/options-menu.scss

@@ -1,4 +1,6 @@
-@mixin options-menu() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-options-menu() {
   .pf-c-options-menu {
     --pf-c-options-menu__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
     --pf-c-options-menu__toggle--BorderTopColor: transparent;

package/components/Page/page.css

@@ -168,6 +168,7 @@
   --pf-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
   --pf-c-page__main-section--m-light--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
+  --pf-c-page__main-section--m-light-100--BackgroundColor: var(--pf-global--BackgroundColor--150);
   --pf-c-page__main-section--m-dark-100--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-100);
   --pf-c-page__main-section--m-dark-200--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
   --pf-c-page__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-global--spacer--md);
@@ -271,11 +272,11 @@
 .pf-c-page__header,
 .pf-c-page > .pf-c-masthead {
   grid-area: header;
+  z-index: var(--pf-c-page__header--ZIndex);
 }
 
 .pf-c-page__header {
   color: var(--pf-global--Color--100);
-  z-index: var(--pf-c-page__header--ZIndex);
   grid-template-columns: auto auto;
   display: grid;
   align-items: center;
@@ -640,6 +641,9 @@
 .pf-c-page__main-section.pf-m-light {
   --pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-light--BackgroundColor);
 }
+.pf-c-page__main-section.pf-m-light-100 {
+  --pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-light-100--BackgroundColor);
+}
 .pf-c-page__main-section[class*=pf-m-dark-] {
   color: var(--pf-global--Color--100);
 }
@@ -773,4 +777,65 @@
 }
 .pf-c-page__drawer > .pf-c-drawer {
   flex: 1 0 auto;
+}
+
+:where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
+:where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
+:where(.pf-theme-dark) .pf-c-page__header {
+  --pf-global--Color--100: #fff;
+  --pf-global--Color--200: #aaabac;
+  --pf-global--BorderColor--100: #444548;
+  --pf-global--primary-color--100: #1fa7f8;
+  --pf-global--link--Color: #1fa7f8;
+  --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-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);
+  --pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-page__header--BackgroundColor: var(--pf-global--palette--black-1000);
+}
+:where(.pf-theme-dark) .pf-c-page__header-tools-item.pf-m-selected .pf-c-button {
+  color: var(--pf-global--Color--100);
+}
+:where(.pf-theme-dark) .pf-c-page__header-tools-item.pf-m-selected .pf-c-button .pf-c-notification-badge:hover::before {
+  background-color: var(--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
+}
+:where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-nav.pf-m-sticky-bottom {
+  --pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
+}
+:where(.pf-theme-dark) .pf-c-page__main-breadcrumb.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-breadcrumb.pf-m-sticky-bottom {
+  --pf-c-page__main-breadcrumb--BackgroundColor: var(--pf-global--BackgroundColor--300);
+}
+:where(.pf-theme-dark) .pf-c-page__main-group.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-group.pf-m-sticky-bottom {
+  --pf-c-page__main-section--m-light--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-page__main-breadcrumb--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
+}
+:where(.pf-theme-dark) .pf-c-page__main-section.pf-m-sticky-top, :where(.pf-theme-dark) .pf-c-page__main-section.pf-m-sticky-bottom {
+  --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--300);
+}
+:where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
+:where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
+:where(.pf-theme-dark) .pf-c-page__header {
+  color: var(--pf-global--Color--100);
 }

package/components/Page/page.scss

@@ -108,6 +108,7 @@ $pf-c-page--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl",
   --pf-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
   --pf-c-page__main-section--m-light--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
+  --pf-c-page__main-section--m-light-100--BackgroundColor: var(--pf-global--BackgroundColor--150);
   --pf-c-page__main-section--m-dark-100--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-100);
   --pf-c-page__main-section--m-dark-200--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
   --pf-c-page__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-global--spacer--md);
@@ -209,12 +210,12 @@ $pf-c-page--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl",
 .pf-c-page__header,
 .pf-c-page > .pf-c-masthead {
   grid-area: header;
+  z-index: var(--pf-c-page__header--ZIndex);
 }
 
 .pf-c-page__header {
   @include pf-t-dark; // force the container to follow the dark theme
 
-  z-index: var(--pf-c-page__header--ZIndex);
   grid-template-columns: auto auto;
   display: grid;
   align-items: center;
@@ -607,6 +608,10 @@ $pf-c-page--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl",
     --pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-light--BackgroundColor);
   }
 
+  &.pf-m-light-100 {
+    --pf-c-page__main-section--BackgroundColor: var(--pf-c-page__main-section--m-light-100--BackgroundColor);
+  }
+
   &[class*="pf-m-dark-"] {
     @include pf-t-dark; // force the container to follow the dark theme
   }
@@ -697,3 +702,10 @@ $pf-c-page--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl",
     flex: 1 0 auto;
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/page";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-page;
+}

package/components/Page/themes/dark/page.scss

@@ -1,4 +1,6 @@
-@mixin page() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-page() {
   .pf-c-page {
     --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--200);
     --pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-global--BackgroundColor--300);
@@ -58,6 +60,6 @@
   .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
   .pf-c-page__main-section[class*="pf-m-dark-"],
   .pf-c-page__header {
-    @include pf-t-dark;
+    @include pf-theme-dark--t-dark;
   }
 }

package/components/Pagination/pagination.css

@@ -331,4 +331,8 @@
     --pf-c-pagination__total-items--Display: var(--pf-c-pagination--m-display-full__total-items--Display);
     --pf-c-pagination__total-items--Visibility: var(--pf-c-pagination--m-display-full__total-items--Visibility);
   }
+}
+
+:where(.pf-theme-dark) .pf-c-pagination {
+  --pf-c-pagination--m-sticky--BackgroundColor: var(--pf-global--BackgroundColor--300);
 }

package/components/Pagination/pagination.scss

@@ -295,3 +295,10 @@ $pf-c-pagination--breakpoint-map: build-breakpoint-map();
   }
 }
 // stylelint-enable
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/pagination";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-pagination;
+}

package/components/Pagination/themes/dark/pagination.scss

@@ -1,4 +1,6 @@
-@mixin pagination() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-pagination() {
   .pf-c-pagination {
     --pf-c-pagination--m-sticky--BackgroundColor: var(--pf-global--BackgroundColor--300);
   }

package/components/Popover/popover.css

@@ -169,4 +169,17 @@
 
 .pf-c-popover__footer {
   margin-top: var(--pf-c-popover__footer--MarginTop);
+}
+
+: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--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

@@ -244,3 +244,10 @@
 .pf-c-popover__footer {
   margin-top: var(--pf-c-popover__footer--MarginTop);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/popover";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-popover;
+}

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

@@ -1,4 +1,6 @@
-@mixin popover() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-popover() {
   .pf-c-popover {
     --pf-c-popover--BoxShadow: none;
     --pf-c-popover__arrow--BoxShadow: none;

package/components/Progress/progress.css

@@ -154,4 +154,10 @@
   left: 0;
   height: var(--pf-c-progress__indicator--Height);
   background-color: var(--pf-c-progress__indicator--BackgroundColor);
+}
+
+:where(.pf-theme-dark) .pf-c-progress {
+  --pf-c-progress--m-inside__measure--Color: var(--pf-global--palette--black-900);
+  --pf-c-progress--m-success--m-inside__measure--Color: var(--pf-global--palette--black-900);
+  --pf-c-progress--m-warning--m-inside__measure--Color: var(--pf-global--palette--black-900);
 }

package/components/Progress/progress.scss

@@ -200,3 +200,10 @@
   height: var(--pf-c-progress__indicator--Height);
   background-color: var(--pf-c-progress__indicator--BackgroundColor);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/progress";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-progress;
+}

package/components/Progress/themes/dark/progress.scss

@@ -1,4 +1,6 @@
-@mixin progress() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-progress() {
   .pf-c-progress {
     --pf-c-progress--m-inside__measure--Color: var(--pf-global--palette--black-900);
     --pf-c-progress--m-success--m-inside__measure--Color: var(--pf-global--palette--black-900);

package/components/SearchInput/search-input.css

@@ -175,4 +175,13 @@
 
 .pf-c-search-input__menu-item-text {
   flex-grow: 1;
+}
+
+:where(.pf-theme-dark) .pf-c-search-input {
+  --pf-c-search-input__text--before--BorderColor: transparent;
+  --pf-c-search-input__text--after--BorderBottomColor: var(--pf-global--BorderColor--400);
+  background-color: var(--pf-global--BackgroundColor--400);
+}
+:where(.pf-theme-dark) .pf-c-search-input__text::before {
+  border-bottom-color: var(--pf-global--BorderColor--400);
 }

package/components/SearchInput/search-input.scss

@@ -206,3 +206,10 @@
 .pf-c-search-input__menu-item-text {
   flex-grow: 1;
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/search-input";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-search-input;
+}

package/components/SearchInput/themes/dark/search-input.scss

@@ -1,4 +1,6 @@
-@mixin search-input() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-search-input() {
   .pf-c-search-input {
     --pf-c-search-input__text--before--BorderColor: transparent;
     --pf-c-search-input__text--after--BorderBottomColor: var(--pf-global--BorderColor--400);