@patternfly/patternfly 5.0.0-prerelease.6 → 5.0.0-prerelease.8

package/base/_variables.scss

@@ -232,6 +232,10 @@
   // Icons
   --#{$pf-global}--icon--Color--light: #{$pf-v5-global--icon--Color--light};
   --#{$pf-global}--icon--Color--dark: #{$pf-v5-global--icon--Color--dark};
+  --#{$pf-global}--icon--Color--light--light: #{$pf-v5-global--icon--Color--light--light};
+  --#{$pf-global}--icon--Color--dark--light: #{$pf-v5-global--icon--Color--dark--light};
+  --#{$pf-global}--icon--Color--light--dark: #{$pf-v5-global--icon--Color--light--dark};
+  --#{$pf-global}--icon--Color--dark--dark: #{$pf-v5-global--icon--Color--dark--dark};
   --#{$pf-global}--icon--FontSize--sm: #{$pf-v5-global--icon--FontSize--sm};
   --#{$pf-global}--icon--FontSize--md: #{$pf-v5-global--icon--FontSize--md};
   --#{$pf-global}--icon--FontSize--lg: #{$pf-v5-global--icon--FontSize--lg};

package/base/patternfly-themes.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-t-dark {
@@ -16,6 +18,8 @@
   --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-t-dark .pf-v5-c-button {
   --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
@@ -29,6 +33,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-t-dark {
@@ -39,6 +45,8 @@
   --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-t-dark .pf-v5-c-button {
   --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);

package/base/patternfly-variables.css

@@ -198,6 +198,10 @@
   --pf-v5-global--BorderRadius--lg: 30em;
   --pf-v5-global--icon--Color--light: #6a6e73;
   --pf-v5-global--icon--Color--dark: #151515;
+  --pf-v5-global--icon--Color--light--light: #f0f0f0;
+  --pf-v5-global--icon--Color--dark--light: #fff;
+  --pf-v5-global--icon--Color--light--dark: #6a6e73;
+  --pf-v5-global--icon--Color--dark--dark: #151515;
   --pf-v5-global--icon--FontSize--sm: 0.75rem;
   --pf-v5-global--icon--FontSize--md: 1rem;
   --pf-v5-global--icon--FontSize--lg: 1.5rem;
@@ -286,6 +290,10 @@
   --pf-v5-global--link--Color--light--hover: #73bcf7;
   --pf-v5-global--link--Color--dark: #1fa7f8;
   --pf-v5-global--link--Color--dark--hover: #73bcf7;
+  --pf-v5-global--icon--Color--light--light: #aaabac;
+  --pf-v5-global--icon--Color--dark--light: #e0e0e0;
+  --pf-v5-global--icon--Color--light--dark: #aaabac;
+  --pf-v5-global--icon--Color--dark--dark: #e0e0e0;
   --pf-v5-global--BackgroundColor--light-100: #1b1d21;
   --pf-v5-global--BackgroundColor--light-200: #0f1214;
   --pf-v5-global--BackgroundColor--light-300: #26292d;

package/base/themes/dark/_variables.scss

@@ -65,6 +65,10 @@
   --#{$pf-global}--link--Color--light--hover: #{$pf-v5-global--link--Color--light--hover};
   --#{$pf-global}--link--Color--dark: #{$pf-v5-global--link--Color--dark};
   --#{$pf-global}--link--Color--dark--hover: #{$pf-v5-global--link--Color--dark--hover};
+  --#{$pf-global}--icon--Color--light--light: #{$pf-v5-global--icon--Color--light};
+  --#{$pf-global}--icon--Color--dark--light: #{$pf-v5-global--icon--Color--dark};
+  --#{$pf-global}--icon--Color--light--dark: #{$pf-v5-global--icon--Color--light};
+  --#{$pf-global}--icon--Color--dark--dark: #{$pf-v5-global--icon--Color--dark};
   --#{$pf-global}--BackgroundColor--light-100: #{$pf-v5-global--BackgroundColor--light-100};
   --#{$pf-global}--BackgroundColor--light-200: #{$pf-v5-global--BackgroundColor--light-200};
   --#{$pf-global}--BackgroundColor--light-300: #{$pf-v5-global--BackgroundColor--light-300};

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

@@ -6,6 +6,8 @@
   --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);
@@ -207,15 +209,6 @@
   --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);
 }

package/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/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/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,8 @@
   --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);
@@ -106,15 +110,6 @@
   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);
 }

package/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/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/components/Card/themes/dark/card.scss

@@ -5,7 +5,13 @@
   .#{$card}.pf-m-non-selectable-raised {
     --#{$card}--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
 
-    // Hoverable/selectable raised
+    // Selectable
+    --#{$card}--m-selectable--m-disabled--BackgroundColor: var(--#{$pf-global}--palette--black-700);
+    --#{$card}--m-selectable--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--150);
+    --#{$card}--m-selectable--m-clickable--m-current--BackgroundColor: var(--#{$pf-global}--BackgroundColor--150);
+    --#{$card}--m-selectable--focus--BackgroundColor: var(--#{$pf-global}--palette--blue-600);
+
+    // Hoverable/selectable raised - deprecated
     --#{$card}--m-hoverable-raised--hover--BoxShadow: var(--#{$pf-global}--BoxShadow--lg);
     --#{$card}--m-selectable-raised--hover--BoxShadow: var(--#{$pf-global}--BoxShadow--lg);
     --#{$card}--m-selectable-raised--focus--BoxShadow: var(--#{$pf-global}--BoxShadow--lg);

package/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/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/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/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/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/components/LogViewer/log-viewer.css

@@ -6,6 +6,8 @@
   --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);
@@ -186,15 +188,6 @@
   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);
 }

package/components/Login/login.css

@@ -6,6 +6,8 @@
   --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);
@@ -275,16 +277,6 @@
   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);

package/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,8 @@
   --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);
@@ -650,15 +654,6 @@
   }
 }
 
-: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);
 }

package/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/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,8 @@
   --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);
@@ -955,17 +959,6 @@
   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 {

package/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/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/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/components/TextInputGroup/text-input-group.scss

@@ -31,8 +31,8 @@
   --#{$text-input-group}__text-input--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
   --#{$text-input-group}__text-input--PaddingLeft: var(--#{$pf-global}--spacer--sm);
   --#{$text-input-group}__text-input--MinWidth: 12ch;
-  --#{$text-input-group}__text-input--m-hint--Color: var(--#{$pf-global}--Color--dark-200); // matches placeholder text color
-  --#{$text-input-group}__text-input--placeholder--Color: var(--#{$pf-global}--Color--dark-200);
+  --#{$text-input-group}__text-input--m-hint--Color: var(--#{$pf-global}--Color--200); // matches placeholder text color
+  --#{$text-input-group}__text-input--placeholder--Color: var(--#{$pf-global}--Color--200);
   --#{$text-input-group}__text-input--BackgroundColor: transparent;
 
   // Icon

package/components/Wizard/wizard.css

@@ -6,6 +6,8 @@
   --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);
@@ -500,15 +502,6 @@
   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);
 }

package/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/docs/components/Dropdown/{examples → deprecated}/Dropdown.md

@@ -3,6 +3,7 @@ id: Dropdown
 section: components
 subsection: menus
 cssPrefix: pf-v5-c-dropdown
+deprecated: true
 ---import './Dropdown.css'
 
 ## Examples

package/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/docs/components/Select/{examples → deprecated}/Select.md

@@ -3,6 +3,7 @@ id: Select
 section: components
 subsection: menus
 cssPrefix: pf-v5-c-select
+deprecated: true
 ---import './Select.css'
 
 ## Single

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "5.0.0-prerelease.6",
+  "version": "5.0.0-prerelease.8",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-base-no-globals-theme-dark-unversioned.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-t-dark {
@@ -16,6 +18,8 @@
   --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-t-dark .pf-v5-c-button {
   --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
@@ -221,6 +225,10 @@
   --pf-v5-global--BorderRadius--lg: 30em;
   --pf-v5-global--icon--Color--light: #6a6e73;
   --pf-v5-global--icon--Color--dark: #151515;
+  --pf-v5-global--icon--Color--light--light: #f0f0f0;
+  --pf-v5-global--icon--Color--dark--light: #fff;
+  --pf-v5-global--icon--Color--light--dark: #6a6e73;
+  --pf-v5-global--icon--Color--dark--dark: #151515;
   --pf-v5-global--icon--FontSize--sm: 0.75rem;
   --pf-v5-global--icon--FontSize--md: 1rem;
   --pf-v5-global--icon--FontSize--lg: 1.5rem;
@@ -309,6 +317,10 @@
   --pf-v5-global--link--Color--light--hover: #73bcf7;
   --pf-v5-global--link--Color--dark: #1fa7f8;
   --pf-v5-global--link--Color--dark--hover: #73bcf7;
+  --pf-v5-global--icon--Color--light--light: #aaabac;
+  --pf-v5-global--icon--Color--dark--light: #e0e0e0;
+  --pf-v5-global--icon--Color--light--dark: #aaabac;
+  --pf-v5-global--icon--Color--dark--dark: #e0e0e0;
   --pf-v5-global--BackgroundColor--light-100: #1b1d21;
   --pf-v5-global--BackgroundColor--light-200: #0f1214;
   --pf-v5-global--BackgroundColor--light-300: #26292d;