@patternfly/react-styles 4.71.0 → 4.71.1

package/css/components/LabelGroup/label-group.css

@@ -30,6 +30,7 @@
   --pf-c-label-group__textarea--PaddingBottom: 0;
   --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
   display: inline-flex;
+  align-items: center;
 }
 .pf-c-label-group.pf-m-category {
   padding-top: var(--pf-c-label-group--m-category--PaddingTop);

package/css/components/LogViewer/log-viewer.css

@@ -198,4 +198,32 @@
 
 .pf-c-log-viewer__timestamp {
   font-weight: var(--pf-c-log-viewer__timestamp--FontWeight);
+}
+
+:where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
+  --pf-global--Color--100: #e0e0e0;
+  --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-log-viewer.pf-m-dark .pf-c-log-viewer__main .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-log-viewer.pf-m-dark .pf-c-log-viewer__main {
+  color: var(--pf-global--Color--100);
 }

package/css/components/LogViewer/log-viewer.d.ts

@@ -21,6 +21,7 @@ declare const _default: {
     "current": "pf-m-current"
   },
   "searchInput": "pf-c-search-input",
+  "themeDark": "pf-theme-dark",
   "toolbar": "pf-c-toolbar",
   "toolbarContentSection": "pf-c-toolbar__content-section"
 };

package/css/components/LogViewer/log-viewer.js

@@ -23,6 +23,7 @@ exports.default = {
     "current": "pf-m-current"
   },
   "searchInput": "pf-c-search-input",
+  "themeDark": "pf-theme-dark",
   "toolbar": "pf-c-toolbar",
   "toolbarContentSection": "pf-c-toolbar__content-section"
 };

package/css/components/LogViewer/log-viewer.mjs

@@ -21,6 +21,7 @@ export default {
     "current": "pf-m-current"
   },
   "searchInput": "pf-c-search-input",
+  "themeDark": "pf-theme-dark",
   "toolbar": "pf-c-toolbar",
   "toolbarContentSection": "pf-c-toolbar__content-section"
 };

package/css/components/Login/login.css

@@ -294,4 +294,35 @@
 }
 .pf-c-login__footer .pf-c-list:not(:only-child) {
   padding-top: var(--pf-c-login__footer--c-list--PaddingTop);
+}
+
+:where(.pf-theme-dark) .pf-c-login__header,
+:where(.pf-theme-dark) .pf-c-login__footer {
+  --pf-global--Color--100: #e0e0e0;
+  --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-login__header .pf-c-button,
+:where(.pf-theme-dark) .pf-c-login__footer .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-login__header,
+:where(.pf-theme-dark) .pf-c-login__footer {
+  color: var(--pf-global--Color--100);
 }

package/css/components/Login/login.d.ts

@@ -19,6 +19,7 @@ declare const _default: {
   "loginMainHeader": "pf-c-login__main-header",
   "loginMainHeaderDesc": "pf-c-login__main-header-desc",
   "loginMainHeaderUtilities": "pf-c-login__main-header-utilities",
+  "themeDark": "pf-theme-dark",
   "title": "pf-c-title"
 };
 export default _default;

package/css/components/Login/login.js

@@ -21,5 +21,6 @@ exports.default = {
   "loginMainHeader": "pf-c-login__main-header",
   "loginMainHeaderDesc": "pf-c-login__main-header-desc",
   "loginMainHeaderUtilities": "pf-c-login__main-header-utilities",
+  "themeDark": "pf-theme-dark",
   "title": "pf-c-title"
 };

package/css/components/Login/login.mjs

@@ -19,5 +19,6 @@ export default {
   "loginMainHeader": "pf-c-login__main-header",
   "loginMainHeaderDesc": "pf-c-login__main-header-desc",
   "loginMainHeaderUtilities": "pf-c-login__main-header-utilities",
+  "themeDark": "pf-theme-dark",
   "title": "pf-c-title"
 };

package/css/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: #e0e0e0;
+  --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/css/components/Masthead/masthead.d.ts

@@ -68,6 +68,7 @@ declare const _default: {
   },
   "nav": "pf-c-nav",
   "page": "pf-c-page",
+  "themeDark": "pf-theme-dark",
   "toolbar": "pf-c-toolbar",
   "toolbarContentSection": "pf-c-toolbar__content-section",
   "toolbarExpandableContent": "pf-c-toolbar__expandable-content"

package/css/components/Masthead/masthead.js

@@ -70,6 +70,7 @@ exports.default = {
   },
   "nav": "pf-c-nav",
   "page": "pf-c-page",
+  "themeDark": "pf-theme-dark",
   "toolbar": "pf-c-toolbar",
   "toolbarContentSection": "pf-c-toolbar__content-section",
   "toolbarExpandableContent": "pf-c-toolbar__expandable-content"

package/css/components/Masthead/masthead.mjs

@@ -68,6 +68,7 @@ export default {
   },
   "nav": "pf-c-nav",
   "page": "pf-c-page",
+  "themeDark": "pf-theme-dark",
   "toolbar": "pf-c-toolbar",
   "toolbarContentSection": "pf-c-toolbar__content-section",
   "toolbarExpandableContent": "pf-c-toolbar__expandable-content"

package/css/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/css/components/Menu/menu.d.ts

@@ -52,6 +52,7 @@ declare const _default: {
     "selected": "pf-m-selected",
     "favorite": "pf-m-favorite",
     "favorited": "pf-m-favorited"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/Menu/menu.js

@@ -54,5 +54,6 @@ exports.default = {
     "selected": "pf-m-selected",
     "favorite": "pf-m-favorite",
     "favorited": "pf-m-favorited"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Menu/menu.mjs

@@ -52,5 +52,6 @@ export default {
     "selected": "pf-m-selected",
     "favorite": "pf-m-favorite",
     "favorited": "pf-m-favorited"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/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/css/components/MenuToggle/menu-toggle.d.ts

@@ -22,6 +22,7 @@ declare const _default: {
     "active": "pf-m-active",
     "fullWidth": "pf-m-full-width"
   },
-  "textInputGroup": "pf-c-text-input-group"
+  "textInputGroup": "pf-c-text-input-group",
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/MenuToggle/menu-toggle.js

@@ -24,5 +24,6 @@ exports.default = {
     "active": "pf-m-active",
     "fullWidth": "pf-m-full-width"
   },
-  "textInputGroup": "pf-c-text-input-group"
+  "textInputGroup": "pf-c-text-input-group",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/MenuToggle/menu-toggle.mjs

@@ -22,5 +22,6 @@ export default {
     "active": "pf-m-active",
     "fullWidth": "pf-m-full-width"
   },
-  "textInputGroup": "pf-c-text-input-group"
+  "textInputGroup": "pf-c-text-input-group",
+  "themeDark": "pf-theme-dark"
 };

package/css/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/css/components/ModalBox/modal-box.d.ts

@@ -22,6 +22,7 @@ declare const _default: {
     "info": "pf-m-info",
     "help": "pf-m-help",
     "icon": "pf-m-icon"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/ModalBox/modal-box.js

@@ -24,5 +24,6 @@ exports.default = {
     "info": "pf-m-info",
     "help": "pf-m-help",
     "icon": "pf-m-icon"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/components/ModalBox/modal-box.mjs

@@ -22,5 +22,6 @@ export default {
     "info": "pf-m-info",
     "help": "pf-m-help",
     "icon": "pf-m-icon"
-  }
+  },
+  "themeDark": "pf-theme-dark"
 };

package/css/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/css/components/Nav/nav.d.ts

@@ -34,6 +34,7 @@ declare const _default: {
   "navSectionTitle": "pf-c-nav__section-title",
   "navSubnav": "pf-c-nav__subnav",
   "navToggle": "pf-c-nav__toggle",
-  "navToggleIcon": "pf-c-nav__toggle-icon"
+  "navToggleIcon": "pf-c-nav__toggle-icon",
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/Nav/nav.js

@@ -36,5 +36,6 @@ exports.default = {
   "navSectionTitle": "pf-c-nav__section-title",
   "navSubnav": "pf-c-nav__subnav",
   "navToggle": "pf-c-nav__toggle",
-  "navToggleIcon": "pf-c-nav__toggle-icon"
+  "navToggleIcon": "pf-c-nav__toggle-icon",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Nav/nav.mjs

@@ -34,5 +34,6 @@ export default {
   "navSectionTitle": "pf-c-nav__section-title",
   "navSubnav": "pf-c-nav__subnav",
   "navToggle": "pf-c-nav__toggle",
-  "navToggleIcon": "pf-c-nav__toggle-icon"
+  "navToggleIcon": "pf-c-nav__toggle-icon",
+  "themeDark": "pf-theme-dark"
 };

package/css/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/css/components/NotificationBadge/notification-badge.d.ts

@@ -8,6 +8,7 @@ declare const _default: {
     "attention": "pf-m-attention"
   },
   "notificationBadge": "pf-c-notification-badge",
-  "notificationBadgeCount": "pf-c-notification-badge__count"
+  "notificationBadgeCount": "pf-c-notification-badge__count",
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/NotificationBadge/notification-badge.js

@@ -10,5 +10,6 @@ exports.default = {
     "attention": "pf-m-attention"
   },
   "notificationBadge": "pf-c-notification-badge",
-  "notificationBadgeCount": "pf-c-notification-badge__count"
+  "notificationBadgeCount": "pf-c-notification-badge__count",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/NotificationBadge/notification-badge.mjs

@@ -8,5 +8,6 @@ export default {
     "attention": "pf-m-attention"
   },
   "notificationBadge": "pf-c-notification-badge",
-  "notificationBadgeCount": "pf-c-notification-badge__count"
+  "notificationBadgeCount": "pf-c-notification-badge__count",
+  "themeDark": "pf-theme-dark"
 };

package/css/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/css/components/NotificationDrawer/notification-drawer.d.ts

@@ -29,6 +29,7 @@ declare const _default: {
   "notificationDrawerListItemHeader": "pf-c-notification-drawer__list-item-header",
   "notificationDrawerListItemHeaderIcon": "pf-c-notification-drawer__list-item-header-icon",
   "notificationDrawerListItemHeaderTitle": "pf-c-notification-drawer__list-item-header-title",
-  "notificationDrawerListItemTimestamp": "pf-c-notification-drawer__list-item-timestamp"
+  "notificationDrawerListItemTimestamp": "pf-c-notification-drawer__list-item-timestamp",
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/NotificationDrawer/notification-drawer.js

@@ -31,5 +31,6 @@ exports.default = {
   "notificationDrawerListItemHeader": "pf-c-notification-drawer__list-item-header",
   "notificationDrawerListItemHeaderIcon": "pf-c-notification-drawer__list-item-header-icon",
   "notificationDrawerListItemHeaderTitle": "pf-c-notification-drawer__list-item-header-title",
-  "notificationDrawerListItemTimestamp": "pf-c-notification-drawer__list-item-timestamp"
+  "notificationDrawerListItemTimestamp": "pf-c-notification-drawer__list-item-timestamp",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/NotificationDrawer/notification-drawer.mjs

@@ -29,5 +29,6 @@ export default {
   "notificationDrawerListItemHeader": "pf-c-notification-drawer__list-item-header",
   "notificationDrawerListItemHeaderIcon": "pf-c-notification-drawer__list-item-header-icon",
   "notificationDrawerListItemHeaderTitle": "pf-c-notification-drawer__list-item-header-title",
-  "notificationDrawerListItemTimestamp": "pf-c-notification-drawer__list-item-timestamp"
+  "notificationDrawerListItemTimestamp": "pf-c-notification-drawer__list-item-timestamp",
+  "themeDark": "pf-theme-dark"
 };

package/css/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/css/components/OptionsMenu/options-menu.d.ts

@@ -20,6 +20,7 @@ declare const _default: {
   "optionsMenuToggleButton": "pf-c-options-menu__toggle-button",
   "optionsMenuToggleButtonIcon": "pf-c-options-menu__toggle-button-icon",
   "optionsMenuToggleIcon": "pf-c-options-menu__toggle-icon",
-  "optionsMenuToggleText": "pf-c-options-menu__toggle-text"
+  "optionsMenuToggleText": "pf-c-options-menu__toggle-text",
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/OptionsMenu/options-menu.js

@@ -22,5 +22,6 @@ exports.default = {
   "optionsMenuToggleButton": "pf-c-options-menu__toggle-button",
   "optionsMenuToggleButtonIcon": "pf-c-options-menu__toggle-button-icon",
   "optionsMenuToggleIcon": "pf-c-options-menu__toggle-icon",
-  "optionsMenuToggleText": "pf-c-options-menu__toggle-text"
+  "optionsMenuToggleText": "pf-c-options-menu__toggle-text",
+  "themeDark": "pf-theme-dark"
 };

package/css/components/OptionsMenu/options-menu.mjs

@@ -20,5 +20,6 @@ export default {
   "optionsMenuToggleButton": "pf-c-options-menu__toggle-button",
   "optionsMenuToggleButtonIcon": "pf-c-options-menu__toggle-button-icon",
   "optionsMenuToggleIcon": "pf-c-options-menu__toggle-icon",
-  "optionsMenuToggleText": "pf-c-options-menu__toggle-text"
+  "optionsMenuToggleText": "pf-c-options-menu__toggle-text",
+  "themeDark": "pf-theme-dark"
 };

package/css/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: #e0e0e0;
+  --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);
 }