@patternfly/patternfly 5.0.0-prerelease.1 → 5.0.0-prerelease.10

package/base/_common.scss

@@ -16,3 +16,10 @@
 .#{$pf-prefix}m-tabular-nums {
   font-variant-numeric: tabular-nums;
 }
+
+// Variable font opt-in
+.#{$pf-prefix}m-vf-font {
+  --#{$pf-global}--FontFamily--text: var(--#{$pf-global}--FontFamily--text--vf);
+  --#{$pf-global}--FontFamily--heading: var(--#{$pf-global}--FontFamily--heading--vf);
+  --#{$pf-global}--FontFamily--monospace: var(--#{$pf-global}--FontFamily--monospace--vf);
+}

package/base/_fonts.scss

@@ -27,7 +27,7 @@
 
 @font-face {
   font-family: RedHatDisplay;
-  font-style: normal;
+  font-style: italic;
   font-weight: 700;
   src:
     url("#{$pf-v5-global--font-path}/RedHatDisplay/RedHatDisplay-BoldItalic.woff2") format("woff2");

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};
@@ -280,13 +284,6 @@
   --#{$pf-global}--target-size--MinHeight: #{$pf-v5-global--target-size--MinHeight};
 }
 
-// Variable font opt-in
-.pf-m-vf-font {
-  --#{$pf-global}--FontFamily--text: var(--#{$pf-global}--FontFamily--text--vf);
-  --#{$pf-global}--FontFamily--heading: var(--#{$pf-global}--FontFamily--heading--vf);
-  --#{$pf-global}--FontFamily--monospace: var(--#{$pf-global}--FontFamily--monospace--vf);
-}
-
 // stylelint-disable no-invalid-position-at-import-rule
 @import "./themes/dark/variables";
 

package/base/patternfly-common.css

@@ -17,4 +17,10 @@
 
 .pf-v5-m-tabular-nums {
   font-variant-numeric: tabular-nums;
+}
+
+.pf-v5-m-vf-font {
+  --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
+  --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
+  --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
 }

package/base/patternfly-fonts.css

@@ -21,7 +21,7 @@
 }
 @font-face {
   font-family: RedHatDisplay;
-  font-style: normal;
+  font-style: italic;
   font-weight: 700;
   src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff2") format("woff2");
   font-display: fallback;

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,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-t-dark .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
 }
 
 .pf-v5-t-light {
@@ -26,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 {
@@ -36,6 +45,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-t-dark .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
 }
 
 .pf-v5-t-dark.pf-m-transparent {

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;
@@ -230,12 +234,6 @@
   --pf-v5-global--target-size--MinHeight: 44px;
 }
 
-.pf-m-vf-font {
-  --pf-v5-global--FontFamily--text: var(--pf-v5-global--FontFamily--text--vf);
-  --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--heading--vf);
-  --pf-v5-global--FontFamily--monospace: var(--pf-v5-global--FontFamily--monospace--vf);
-}
-
 :where(.pf-v5-theme-dark) {
   --pf-v5-global--palette--black-50: #e0e0e0;
   --pf-v5-global--palette--black-100: #c6c7c8;
@@ -292,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/_chart-globals.scss

@@ -1,7 +1,7 @@
 @import "../../../sass-utilities/colors";
 @import "../../../sass-utilities/scss-variables";
 // stylelint-disable scss/dollar-variable-pattern
-$chart: #{$pf-prefix} + 'c-chart';
+$chart: #{$pf-prefix} + 'chart';
 // stylelint-enable
 
 // Chart colors

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,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/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,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/components/CalendarMonth/calendar-month.css

@@ -6,9 +6,12 @@
   --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 {
+  --pf-v5-c-calendar-month--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-calendar-month--PaddingTop: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-calendar-month--PaddingRight: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-calendar-month--PaddingBottom: var(--pf-v5-global--spacer--md);
@@ -66,6 +69,7 @@
   flex-direction: column;
   padding: var(--pf-v5-c-calendar-month--PaddingTop) var(--pf-v5-c-calendar-month--PaddingRight) var(--pf-v5-c-calendar-month--PaddingBottom) var(--pf-v5-c-calendar-month--PaddingLeft);
   font-size: var(--pf-v5-c-calendar-month--FontSize);
+  background-color: var(--pf-v5-c-calendar-month--BackgroundColor);
 }
 
 .pf-v5-c-calendar-month__header {
@@ -197,6 +201,7 @@
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-calendar-month {
+  --pf-v5-c-calendar-month--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-calendar-month__dates-cell--m-current__date--BackgroundColor: var(--pf-v5-global--palette--black-500);
   --pf-v5-c-calendar-month__dates-cell--m-selected__date--BackgroundColor: var(--pf-v5-global--primary-color--300);
   --pf-v5-c-calendar-month__dates-cell--m-selected__date--Color: var(--pf-v5-global--primary-color--400);

package/components/CalendarMonth/calendar-month.scss

@@ -1,4 +1,5 @@
 .#{$calendar-month} {
+  --#{$calendar-month}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
   --#{$calendar-month}--PaddingTop: var(--#{$pf-global}--spacer--lg);
   --#{$calendar-month}--PaddingRight: var(--#{$pf-global}--spacer--lg);
   --#{$calendar-month}--PaddingBottom: var(--#{$pf-global}--spacer--md);
@@ -68,6 +69,7 @@
   flex-direction: column;
   padding: var(--#{$calendar-month}--PaddingTop) var(--#{$calendar-month}--PaddingRight) var(--#{$calendar-month}--PaddingBottom) var(--#{$calendar-month}--PaddingLeft);
   font-size: var(--#{$calendar-month}--FontSize);
+  background-color: var(--#{$calendar-month}--BackgroundColor);
 }
 
 .#{$calendar-month}__header {

package/components/CalendarMonth/themes/dark/calendar-month.scss

@@ -2,6 +2,10 @@
 
 @mixin pf-v5-theme-dark-calendar-month() {
   .#{$calendar-month} {
+    // calendar month background
+    --#{$calendar-month}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
+
+    // dates
     --#{$calendar-month}__dates-cell--m-current__date--BackgroundColor: var(--#{$pf-global}--palette--black-500);
     --#{$calendar-month}__dates-cell--m-selected__date--BackgroundColor: var(--#{$pf-global}--primary-color--300);
     --#{$calendar-month}__dates-cell--m-selected__date--Color: var(--#{$pf-global}--primary-color--400);

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,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/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/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 {
@@ -87,8 +94,6 @@
   --pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--item-border-color--base);
   --pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--item-border-color--base);
   --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
-  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
-  --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
   --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
   --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
   --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
@@ -193,10 +198,7 @@
   --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderTopColor);
   --pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderRightColor);
   --pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor);
-}
-.pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-full-height {
-  --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor);
-  --pf-v5-c-menu-toggle--before--BorderBottomColor: var(--pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
+  --pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: 0;
 }
 .pf-v5-c-masthead .pf-v5-c-context-selector {
   --pf-v5-c-context-selector--Width: var(--pf-v5-c-masthead--c-context-selector--Width);
@@ -652,18 +654,13 @@
   }
 }
 
-: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 {
   --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-global--palette--black-1000);
+  --pf-v5-c-masthead--item-border-color--base: var(--pf-v5-global--BorderColor--100);
   color: var(--pf-v5-global--Color--100);
 }
 :where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-toolbar {

package/components/Masthead/masthead.scss

@@ -135,8 +135,6 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   --#{$masthead}--c-menu-toggle--before--BorderTopColor: var(--#{$masthead}--item-border-color--base);
   --#{$masthead}--c-menu-toggle--before--BorderRightColor: var(--#{$masthead}--item-border-color--base);
   --#{$masthead}--c-menu-toggle--before--BorderLeftColor: var(--#{$masthead}--item-border-color--base);
-  --#{$masthead}--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
-  --#{$masthead}--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
 
   // Toolbar
   --#{$masthead}--c-toolbar--BackgroundColor: var(--#{$masthead}--BackgroundColor);
@@ -225,11 +223,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
     --#{$menu-toggle}--before--BorderTopColor: var(--#{$masthead}--c-menu-toggle--before--BorderTopColor);
     --#{$menu-toggle}--before--BorderRightColor: var(--#{$masthead}--c-menu-toggle--before--BorderRightColor);
     --#{$menu-toggle}--before--BorderLeftColor: var(--#{$masthead}--c-menu-toggle--before--BorderLeftColor);
-
-    &.pf-m-full-height {
-      --#{$menu-toggle}--before--BorderTopColor: var(--#{$masthead}--c-menu-toggle--m-full-height--before--BorderTopColor);
-      --#{$menu-toggle}--before--BorderBottomColor: var(--#{$masthead}--c-menu-toggle--m-full-height--before--BorderBottomColor);
-    }
+    --#{$menu-toggle}--m-full-height__toggle--after--BorderBottomWidth: 0;
   }
 
   .#{$context-selector} {

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

@@ -3,6 +3,7 @@
 @mixin pf-v5-theme-dark-masthead() {
   .#{$masthead} {
     --#{$masthead}--BackgroundColor: var(--#{$pf-global}--palette--black-1000);
+    --#{$masthead}--item-border-color--base: var(--#{$pf-global}--BorderColor--100);
 
     .#{$toolbar} {
       --#{$toolbar}--BackgroundColor: var(--#{$pf-global}--palette--black-1000);

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/MenuToggle/menu-toggle.css

@@ -77,6 +77,7 @@
   --pf-v5-c-menu-toggle--m-full-height--PaddingRight: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-menu-toggle--m-full-height--PaddingLeft: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth: 0;
+  --pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
   --pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
   --pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
   --pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
@@ -197,6 +198,17 @@
   display: inline-block;
   color: var(--pf-v5-c-menu-toggle--m-plain--Color);
 }
+.pf-v5-c-menu-toggle.pf-m-full-height {
+  --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-c-menu-toggle--m-full-height--PaddingRight);
+  --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-v5-c-menu-toggle--m-full-height--PaddingLeft);
+  --pf-v5-c-menu-toggle--before--BorderTopWidth: var(--pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth);
+  --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth);
+  --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth);
+  --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth);
+  --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth);
+  --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
+  height: 100%;
+}
 .pf-v5-c-menu-toggle:hover {
   --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-c-menu-toggle--hover--BackgroundColor);
   --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--hover--after--BorderBottomWidth);
@@ -235,16 +247,6 @@
 .pf-v5-c-menu-toggle.pf-m-primary::before, .pf-v5-c-menu-toggle.pf-m-primary::after, .pf-v5-c-menu-toggle.pf-m-plain::before, .pf-v5-c-menu-toggle.pf-m-plain::after, .pf-v5-c-menu-toggle:disabled::before, .pf-v5-c-menu-toggle:disabled::after {
   border: 0;
 }
-.pf-v5-c-menu-toggle.pf-m-full-height {
-  --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-c-menu-toggle--m-full-height--PaddingRight);
-  --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-v5-c-menu-toggle--m-full-height--PaddingLeft);
-  --pf-v5-c-menu-toggle--before--BorderTopWidth: var(--pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth);
-  --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth);
-  --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth);
-  --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth);
-  --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
-  height: 100%;
-}
 .pf-v5-c-menu-toggle.pf-m-typeahead {
   --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight);
   --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft);
@@ -419,6 +421,6 @@
   --pf-v5-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-v5-global--disabled-color--300);
   --pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
 }
-:where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle.pf-m-plain {
+:where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle.pf-m-plain, :where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle.pf-m-full-height {
   background: transparent;
 }