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

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/_variables.scss

@@ -280,13 +280,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-themes.css

@@ -17,6 +17,9 @@
   --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-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 {
   --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
@@ -37,6 +40,9 @@
   --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-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 {
   background-color: transparent;

package/base/patternfly-variables.css

@@ -230,12 +230,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;

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

@@ -7,6 +7,9 @@
   --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-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 {
   --pf-v5-c-about-modal-box--BackgroundColor: var(--pf-v5-global--palette--black-1000);
@@ -213,6 +216,9 @@
   --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 {
   color: var(--pf-v5-global--Color--100);

package/components/Banner/banner.css

@@ -17,6 +17,9 @@
   --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-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 {
   --pf-v5-c-banner--PaddingTop: var(--pf-v5-global--spacer--xs);
@@ -112,6 +115,9 @@
   --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 {
   color: var(false);

package/components/LogViewer/log-viewer.css

@@ -7,6 +7,9 @@
   --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-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 {
   --pf-v5-c-log-viewer--Height: 100%;
@@ -192,6 +195,9 @@
   --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 {
   color: var(--pf-v5-global--Color--100);

package/components/Login/login.css

@@ -7,6 +7,9 @@
   --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-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 {
   --pf-v5-c-login--PaddingTop: var(--pf-v5-global--spacer--lg);
@@ -282,6 +285,10 @@
   --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 {
   --pf-v5-c-login__main--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);

package/components/Masthead/masthead.css

@@ -17,6 +17,9 @@
   --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-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 {
   --pf-v5-c-masthead--PaddingLeft: var(--pf-v5-c-masthead--inset);
@@ -87,8 +90,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 +194,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);
@@ -661,9 +659,13 @@
   --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/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;
 }

package/components/MenuToggle/menu-toggle.scss

@@ -110,6 +110,7 @@
   --#{$menu-toggle}--m-full-height--PaddingRight: var(--#{$pf-global}--spacer--lg);
   --#{$menu-toggle}--m-full-height--PaddingLeft: var(--#{$pf-global}--spacer--lg);
   --#{$menu-toggle}--m-full-height__toggle--before--BorderTopWidth: 0;
+  --#{$menu-toggle}--m-full-height__toggle--after--BorderBottomWidth:  var(--#{$pf-global}--BorderWidth--sm);
   --#{$menu-toggle}--m-full-height--m-expanded--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--xl);
   --#{$menu-toggle}--m-full-height--hover--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--xl);
   --#{$menu-toggle}--m-full-height--focus--after--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--xl);
@@ -264,6 +265,19 @@
     }
   }
 
+  &.pf-m-full-height {
+    --#{$menu-toggle}--PaddingRight: var(--#{$menu-toggle}--m-full-height--PaddingRight);
+    --#{$menu-toggle}--PaddingLeft: var(--#{$menu-toggle}--m-full-height--PaddingLeft);
+    --#{$menu-toggle}--before--BorderTopWidth: var(--#{$menu-toggle}--m-full-height__toggle--before--BorderTopWidth);
+    --#{$menu-toggle}--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height__toggle--after--BorderBottomWidth);
+    --#{$menu-toggle}--m-expanded--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--m-expanded--after--BorderBottomWidth);
+    --#{$menu-toggle}--hover--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--hover--after--BorderBottomWidth);
+    --#{$menu-toggle}--focus--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--focus--after--BorderBottomWidth);
+    --#{$menu-toggle}--active--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--active--after--BorderBottomWidth);
+
+    height: 100%;
+  }
+
   &:hover {
     --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--hover--BackgroundColor);
     --#{$menu-toggle}--after--BorderBottomWidth: var(--#{$menu-toggle}--hover--after--BorderBottomWidth);
@@ -316,18 +330,6 @@
     }
   }
 
-  &.pf-m-full-height {
-    --#{$menu-toggle}--PaddingRight: var(--#{$menu-toggle}--m-full-height--PaddingRight);
-    --#{$menu-toggle}--PaddingLeft: var(--#{$menu-toggle}--m-full-height--PaddingLeft);
-    --#{$menu-toggle}--before--BorderTopWidth: var(--#{$menu-toggle}--m-full-height__toggle--before--BorderTopWidth);
-    --#{$menu-toggle}--m-expanded--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--m-expanded--after--BorderBottomWidth);
-    --#{$menu-toggle}--hover--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--hover--after--BorderBottomWidth);
-    --#{$menu-toggle}--focus--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--focus--after--BorderBottomWidth);
-    --#{$menu-toggle}--active--after--BorderBottomWidth: var(--#{$menu-toggle}--m-full-height--active--after--BorderBottomWidth);
-
-    height: 100%;
-  }
-
   &.pf-m-typeahead {
     --#{$menu-toggle}__button__controls--MarginRight: var(--#{$menu-toggle}--m-typeahead__controls--MarginRight);
     --#{$menu-toggle}__button__controls--MarginLeft: var(--#{$menu-toggle}--m-typeahead__controls--MarginLeft);

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

@@ -19,7 +19,8 @@
     --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--#{$pf-global}--disabled-color--300);
     --#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
 
-    &.pf-m-plain {
+    &.pf-m-plain,
+    &.pf-m-full-height {
       background: transparent;
     }
   }

package/components/Page/page.css

@@ -17,6 +17,9 @@
   --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-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 {
   --pf-v5-hidden-visible--hidden--Display: none;
@@ -963,6 +966,11 @@
   --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 {
   --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);

package/components/Wizard/wizard.css

@@ -7,6 +7,9 @@
   --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-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 {
   --pf-v5-c-wizard--Height: 100%;
@@ -506,6 +509,9 @@
   --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 {
   --pf-v5-c-wizard__header--BackgroundColor: var(--pf-v5-global--palette--black-1000);