@patternfly/react-styles 5.0.0-prerelease.2 → 5.0.0-prerelease.4

package/css/components/AboutModalBox/about-modal-box.css

@@ -6,6 +6,11 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
+}
+.pf-v5-c-about-modal-box .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
 }
 
 .pf-v5-c-about-modal-box {
@@ -204,14 +209,8 @@
   --pf-v5-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-v5-c-about-modal-box__close--c-button--hover--BackgroundColor);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box {
-  --pf-v5-global--Color--100: #e0e0e0;
-  --pf-v5-global--Color--200: #aaabac;
-  --pf-v5-global--BorderColor--100: #444548;
-  --pf-v5-global--primary-color--100: #1fa7f8;
-  --pf-v5-global--link--Color: #1fa7f8;
-  --pf-v5-global--link--Color--hover: #73bcf7;
-  --pf-v5-global--BackgroundColor--100: #1b1d21;
+:where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box {

package/css/components/Accordion/accordion.css

@@ -6,6 +6,8 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
 }
 
 .pf-v5-c-accordion {

package/css/components/Alert/alert.css

@@ -6,6 +6,8 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
 }
 
 .pf-v5-c-alert {

package/css/components/Banner/banner.css

@@ -6,6 +6,8 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
 }
 
 .pf-v5-c-banner {
@@ -16,6 +18,11 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
+}
+.pf-v5-c-banner .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
 }
 
 .pf-v5-c-banner {
@@ -103,14 +110,8 @@
   cursor: not-allowed;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-banner {
-  --pf-v5-global--Color--100: #e0e0e0;
-  --pf-v5-global--Color--200: #aaabac;
-  --pf-v5-global--BorderColor--100: #444548;
-  --pf-v5-global--primary-color--100: #1fa7f8;
-  --pf-v5-global--link--Color: #1fa7f8;
-  --pf-v5-global--link--Color--hover: #73bcf7;
-  --pf-v5-global--BackgroundColor--100: #1b1d21;
+:where(.pf-v5-theme-dark) .pf-v5-c-banner .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-banner {

package/css/components/CalendarMonth/calendar-month.css

@@ -6,6 +6,8 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
 }
 
 .pf-v5-c-calendar-month {

package/css/components/Card/card.css

@@ -391,6 +391,10 @@
 :where(.pf-v5-theme-dark) .pf-v5-c-card,
 :where(.pf-v5-theme-dark) .pf-v5-c-card.pf-m-non-selectable-raised {
   --pf-v5-c-card--BoxShadow: var(--pf-v5-global--BoxShadow--md);
+  --pf-v5-c-card--m-selectable--m-disabled--BackgroundColor: var(--pf-v5-global--palette--black-700);
+  --pf-v5-c-card--m-selectable--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
+  --pf-v5-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
+  --pf-v5-c-card--m-selectable--focus--BackgroundColor: var(--pf-v5-global--palette--blue-600);
   --pf-v5-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
   --pf-v5-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
   --pf-v5-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-v5-global--BoxShadow--lg);

package/css/components/Chip/chip-group.css

@@ -6,6 +6,8 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
 }
 
 .pf-v5-c-chip-group {

package/css/components/Chip/chip.css

@@ -6,6 +6,8 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
 }
 
 .pf-v5-c-chip {

package/css/components/ContextSelector/context-selector.css

@@ -6,6 +6,8 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
 }
 
 .pf-v5-c-context-selector {

package/css/components/DataList/data-list.css

@@ -6,6 +6,8 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
 }
 
 .pf-v5-c-data-list__item-action {

package/css/components/FormControl/form-control.css

@@ -6,6 +6,8 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
 }
 
 .pf-v5-c-form-control {

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

@@ -6,6 +6,11 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
+}
+.pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
 }
 
 .pf-v5-c-log-viewer {
@@ -183,14 +188,8 @@
   font-weight: var(--pf-v5-c-log-viewer__timestamp--FontWeight);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main {
-  --pf-v5-global--Color--100: #e0e0e0;
-  --pf-v5-global--Color--200: #aaabac;
-  --pf-v5-global--BorderColor--100: #444548;
-  --pf-v5-global--primary-color--100: #1fa7f8;
-  --pf-v5-global--link--Color: #1fa7f8;
-  --pf-v5-global--link--Color--hover: #73bcf7;
-  --pf-v5-global--BackgroundColor--100: #1b1d21;
+:where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main {

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

@@ -1,5 +1,6 @@
 import './log-viewer.css';
 declare const _default: {
+  "button": "pf-v5-c-button",
   "logViewer": "pf-v5-c-log-viewer",
   "logViewerHeader": "pf-v5-c-log-viewer__header",
   "logViewerIndex": "pf-v5-c-log-viewer__index",

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

@@ -2,6 +2,7 @@
 exports.__esModule = true;
 require('./log-viewer.css');
 exports.default = {
+  "button": "pf-v5-c-button",
   "logViewer": "pf-v5-c-log-viewer",
   "logViewerHeader": "pf-v5-c-log-viewer__header",
   "logViewerIndex": "pf-v5-c-log-viewer__index",

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

@@ -1,5 +1,6 @@
 import './log-viewer.css';
 export default {
+  "button": "pf-v5-c-button",
   "logViewer": "pf-v5-c-log-viewer",
   "logViewerHeader": "pf-v5-c-log-viewer__header",
   "logViewerIndex": "pf-v5-c-log-viewer__index",

package/css/components/Login/login.css

@@ -6,6 +6,11 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
+}
+.pf-v5-c-login__footer .pf-v5-c-button, .pf-v5-c-login__header .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
 }
 
 .pf-v5-c-login {
@@ -272,15 +277,9 @@
   padding-top: var(--pf-v5-c-login__footer--c-list--PaddingTop);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-login__header,
-:where(.pf-v5-theme-dark) .pf-v5-c-login__footer {
-  --pf-v5-global--Color--100: #e0e0e0;
-  --pf-v5-global--Color--200: #aaabac;
-  --pf-v5-global--BorderColor--100: #444548;
-  --pf-v5-global--primary-color--100: #1fa7f8;
-  --pf-v5-global--link--Color: #1fa7f8;
-  --pf-v5-global--link--Color--hover: #73bcf7;
-  --pf-v5-global--BackgroundColor--100: #1b1d21;
+:where(.pf-v5-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,
+:where(.pf-v5-theme-dark) .pf-v5-c-login__footer .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-login {

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

@@ -1,6 +1,7 @@
 import './login.css';
 declare const _default: {
   "brand": "pf-v5-c-brand",
+  "button": "pf-v5-c-button",
   "dropdown": "pf-v5-c-dropdown",
   "list": "pf-v5-c-list",
   "login": "pf-v5-c-login",

package/css/components/Login/login.js

@@ -3,6 +3,7 @@ exports.__esModule = true;
 require('./login.css');
 exports.default = {
   "brand": "pf-v5-c-brand",
+  "button": "pf-v5-c-button",
   "dropdown": "pf-v5-c-dropdown",
   "list": "pf-v5-c-list",
   "login": "pf-v5-c-login",

package/css/components/Login/login.mjs

@@ -1,6 +1,7 @@
 import './login.css';
 export default {
   "brand": "pf-v5-c-brand",
+  "button": "pf-v5-c-button",
   "dropdown": "pf-v5-c-dropdown",
   "list": "pf-v5-c-list",
   "login": "pf-v5-c-login",

package/css/components/Masthead/masthead.css

@@ -6,6 +6,8 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
 }
 
 .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain, .pf-v5-c-masthead {
@@ -16,6 +18,11 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
+}
+.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain .pf-v5-c-button, .pf-v5-c-masthead .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
 }
 
 .pf-v5-c-masthead {
@@ -647,14 +654,8 @@
   }
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-masthead {
-  --pf-v5-global--Color--100: #e0e0e0;
-  --pf-v5-global--Color--200: #aaabac;
-  --pf-v5-global--BorderColor--100: #444548;
-  --pf-v5-global--primary-color--100: #1fa7f8;
-  --pf-v5-global--link--Color: #1fa7f8;
-  --pf-v5-global--link--Color--hover: #73bcf7;
-  --pf-v5-global--BackgroundColor--100: #1b1d21;
+:where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-masthead {

package/css/components/Menu/menu.css

@@ -6,6 +6,8 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
 }
 
 .pf-v5-c-menu__group, .pf-v5-c-menu__list-item, .pf-v5-c-menu__list {

package/css/components/Page/page.css

@@ -6,6 +6,8 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
 }
 
 .pf-v5-c-page__main-section[class*=pf-m-dark-], .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector, .pf-v5-c-page__sidebar, .pf-v5-c-page__header {
@@ -16,6 +18,11 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
+}
+.pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button, .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button, .pf-v5-c-page__sidebar .pf-v5-c-button, .pf-v5-c-page__header .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
 }
 
 .pf-v5-c-page__header-tools-item, .pf-v5-c-page__header-tools-group {
@@ -952,16 +959,10 @@
   flex: 1 0 auto;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
-:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-],
-:where(.pf-v5-theme-dark) .pf-v5-c-page__header {
-  --pf-v5-global--Color--100: #e0e0e0;
-  --pf-v5-global--Color--200: #aaabac;
-  --pf-v5-global--BorderColor--100: #444548;
-  --pf-v5-global--primary-color--100: #1fa7f8;
-  --pf-v5-global--link--Color: #1fa7f8;
-  --pf-v5-global--link--Color--hover: #73bcf7;
-  --pf-v5-global--BackgroundColor--100: #1b1d21;
+:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button,
+:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button,
+:where(.pf-v5-theme-dark) .pf-v5-c-page__header .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
 }
 
 :where(.pf-v5-theme-dark):root {

package/css/components/Select/select.css

@@ -6,6 +6,8 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
 }
 
 .pf-v5-c-select {

package/css/components/Switch/switch.css

@@ -6,6 +6,7 @@
   --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--Color--light-100);
   --pf-v5-c-switch__toggle-icon--Left: calc(var(--pf-v5-c-switch--FontSize) * .4);
   --pf-v5-c-switch__toggle-icon--Offset: 0.125rem;
+  --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--palette--black-150);
   --pf-v5-c-switch--LineHeight: var(--pf-v5-global--LineHeight--md);
   --pf-v5-c-switch--Height: auto;
   --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-v5-global--primary-color--100);
@@ -88,6 +89,7 @@
   cursor: not-allowed;
 }
 .pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__toggle {
+  --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-c-switch__input--disabled__toggle-icon--Color);
   cursor: not-allowed;
   background-color: var(--pf-v5-c-switch__input--disabled__toggle--BackgroundColor);
 }
@@ -140,4 +142,5 @@
   --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
   --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);
   --pf-v5-c-switch__toggle--before--BoxShadow: none;
+  --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
 }

package/css/components/Table/table.css

@@ -6,6 +6,8 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
 }
 
 .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > * {

package/css/components/TextInputGroup/text-input-group.css

@@ -19,8 +19,8 @@
   --pf-v5-c-text-input-group__text-input--PaddingBottom: var(--pf-v5-global--spacer--form-element);
   --pf-v5-c-text-input-group__text-input--PaddingLeft: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-text-input-group__text-input--MinWidth: 12ch;
-  --pf-v5-c-text-input-group__text-input--m-hint--Color: var(--pf-v5-global--Color--dark-200);
-  --pf-v5-c-text-input-group__text-input--placeholder--Color: var(--pf-v5-global--Color--dark-200);
+  --pf-v5-c-text-input-group__text-input--m-hint--Color: var(--pf-v5-global--Color--200);
+  --pf-v5-c-text-input-group__text-input--placeholder--Color: var(--pf-v5-global--Color--200);
   --pf-v5-c-text-input-group__text-input--BackgroundColor: transparent;
   --pf-v5-c-text-input-group__icon--Left: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-text-input-group__icon--Color: var(--pf-v5-global--icon--Color--dark);

package/css/components/Wizard/wizard.css

@@ -6,6 +6,11 @@
   --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
+  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--light);
+  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--light);
+}
+.pf-v5-c-wizard__header .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
 }
 
 .pf-v5-c-wizard {
@@ -497,14 +502,8 @@
   margin-left: var(--pf-v5-c-wizard__footer-cancel--MarginLeft);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-wizard__header {
-  --pf-v5-global--Color--100: #e0e0e0;
-  --pf-v5-global--Color--200: #aaabac;
-  --pf-v5-global--BorderColor--100: #444548;
-  --pf-v5-global--primary-color--100: #1fa7f8;
-  --pf-v5-global--link--Color: #1fa7f8;
-  --pf-v5-global--link--Color--hover: #73bcf7;
-  --pf-v5-global--BackgroundColor--100: #1b1d21;
+:where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-wizard {

package/css/components/Wizard/wizard.d.ts

@@ -1,5 +1,6 @@
 import './wizard.css';
 declare const _default: {
+  "button": "pf-v5-c-button",
   "drawer": "pf-v5-c-drawer",
   "modalBox": "pf-v5-c-modal-box",
   "modifiers": {

package/css/components/Wizard/wizard.js

@@ -2,6 +2,7 @@
 exports.__esModule = true;
 require('./wizard.css');
 exports.default = {
+  "button": "pf-v5-c-button",
   "drawer": "pf-v5-c-drawer",
   "modalBox": "pf-v5-c-modal-box",
   "modifiers": {

package/css/components/Wizard/wizard.mjs

@@ -1,5 +1,6 @@
 import './wizard.css';
 export default {
+  "button": "pf-v5-c-button",
   "drawer": "pf-v5-c-drawer",
   "modalBox": "pf-v5-c-modal-box",
   "modifiers": {

package/css/docs/components/Dropdown/deprecated/Dropdown.css

@@ -0,0 +1,64 @@
+#ws-html-deprecated-c-dropdown-badge-toggle,
+#ws-html-deprecated-c-dropdown-badge-drillup-toggle,
+#ws-html-deprecated-c-dropdown-expanded,
+#ws-html-deprecated-c-dropdown-kebab,
+#ws-html-deprecated-c-dropdown-kebab-align-right,
+#ws-html-deprecated-c-dropdown-align-right,
+#ws-html-deprecated-c-dropdown-align-on-different-breakpoint,
+#ws-html-deprecated-c-dropdown-align-top,
+#ws-html-deprecated-c-dropdown-primary-toggle,
+#ws-html-deprecated-c-dropdown-secondary-toggle,
+#ws-html-deprecated-c-dropdown-menu-item-icons,
+#ws-html-deprecated-c-dropdown-aria-disabled-items,
+#ws-html-deprecated-c-dropdown-plain-with-text {
+  min-height: 310px;
+}
+
+#ws-html-deprecated-c-dropdown-kebab-align-right,
+#ws-html-deprecated-c-dropdown-align-right {
+  display: flex;
+  justify-content: flex-end;
+}
+
+#ws-html-deprecated-c-dropdown-align-on-different-breakpoint {
+  display: flex;
+  justify-content: center;
+}
+
+#ws-html-deprecated-c-dropdown-align-top {
+  display: flex;
+  align-items: flex-end;
+}
+
+#ws-html-deprecated-c-dropdown-with-groups,
+#ws-html-deprecated-c-dropdown-with-groups-and-dividers-between-groups {
+  min-height: 440px;
+}
+
+#ws-html-deprecated-c-dropdown-with-groups-and-dividers-between-items {
+  min-height: 460px;
+}
+
+#ws-html-deprecated-c-dropdown-dropdown-with-image-and-text .ws-preview-html {
+  min-height: 19rem;
+}
+
+#ws-html-deprecated-c-dropdown-split-button-checkbox,
+#ws-html-deprecated-c-dropdown-split-button-action,
+#ws-html-deprecated-c-dropdown-split-button-primary-checkbox,
+#ws-html-deprecated-c-dropdown-split-button-primary-action,
+#ws-html-deprecated-c-dropdown-split-button-secondary-action {
+  min-height: 210px;
+}
+
+[id^="ws-html-deprecated-c-dropdown-split-button"] .pf-v5-c-dropdown:not(:last-child) {
+  margin-right: 4px;
+}
+
+#ws-html-deprecated-c-dropdown-panel {
+  min-height: 130px;
+}
+
+#ws-html-deprecated-c-dropdown-dropdown-with-description {
+  min-height: 400px;
+}

package/css/docs/components/Select/deprecated/Select.css

@@ -0,0 +1,56 @@
+#ws-html-deprecated-c-select-single-with-top-expanded,
+#ws-html-deprecated-c-select-single-expanded,
+#ws-html-deprecated-c-select-single-expanded-and-selected,
+#ws-html-deprecated-c-select-single-with-typeahead-expanded-and-selected,
+#ws-html-deprecated-c-select-plain-toggle-expanded,
+#ws-html-deprecated-c-select-view-more-menu-item,
+#ws-html-deprecated-c-select-loading-menu-item,
+#ws-html-deprecated-c-select-placeholder-expanded,
+#ws-html-deprecated-c-select-placeholder-item-disabled,
+#ws-html-deprecated-c-select-placeholder-item-enabled,
+#ws-html-deprecated-c-select-multi-with-typeahead-invalid {
+  min-height: 330px;
+}
+
+#ws-html-deprecated-c-select-single-with-top-expanded {
+  display: flex;
+  align-items: flex-end;
+  width: 100%;
+}
+
+#ws-html-deprecated-c-select-single-with-typeahead-expanded,
+#ws-html-deprecated-c-select-multi-with-typeahead-chip-group-collapsed {
+  min-height: 210px;
+}
+
+#ws-html-deprecated-c-select-checkbox-expanded,
+#ws-html-deprecated-c-select-checkbox-expanded-without-badge,
+#ws-html-deprecated-c-select-checkbox-with-counts {
+  min-height: 270px;
+}
+
+#ws-html-deprecated-c-select-multi-with-typeahead-chip-group-expanded,
+#ws-html-deprecated-c-select-menu-footer {
+  min-height: 365px;
+}
+
+#ws-html-deprecated-c-select-checkbox-expanded-and-selected-with-groups {
+  min-height: 460px;
+}
+
+#ws-html-deprecated-c-select-checkbox-expanded-and-selected-with-groups-and-filter {
+  min-height: 530px;
+}
+
+#ws-html-deprecated-c-select-panel-menu {
+  min-height: 120px;
+}
+
+#ws-html-deprecated-c-select-item-description,
+#ws-html-deprecated-c-select-checkbox-item-description {
+  min-height: 400px;
+}
+
+#ws-html-deprecated-c-select-menu-item-favorites {
+  min-height: 650px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "5.0.0-prerelease.2",
+  "version": "5.0.0-prerelease.4",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.0.0-prerelease.3",
+    "@patternfly/patternfly": "5.0.0-prerelease.8",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
@@ -29,5 +29,5 @@
     "typescript": "^4.7.4"
   },
   "license": "MIT",
-  "gitHead": "6760326224820a4684fc1f7b2e8cf48890085530"
+  "gitHead": "6b44876bfb15c8335fc6e263d63f41f55ae8636b"
 }