@patternfly/patternfly 5.0.0-alpha.56 → 5.0.0-alpha.58

package/components/DualListSelector/dual-list-selector.css

@@ -20,9 +20,9 @@
   --pf-v5-c-dual-list-selector__menu--MaxHeight: 20rem;
   --pf-v5-c-dual-list-selector__list-item-row--FontSize: var(--pf-v5-global--FontSize--sm);
   --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: transparent;
-  --pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
-  --pf-v5-c-dual-list-selector__list-item-row--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
-  --pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
+  --pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
+  --pf-v5-c-dual-list-selector__list-item-row--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
+  --pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
   --pf-v5-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-dual-list-selector__list-item--m-ghost-row--Opacity: .4;
   --pf-v5-c-dual-list-selector__item--PaddingTop: var(--pf-v5-global--spacer--sm);
@@ -295,4 +295,10 @@
 .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item {
   --pf-v5-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-v5-c-dual-list-selector__item--nested-indent--base) * 10 + var(--pf-v5-c-dual-list-selector__item--indent--base));
   --pf-v5-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-v5-c-dual-list-selector__item--PaddingLeft);
+}
+
+:where(.pf-v5-theme-dark) .pf-v5-c-dual-list-selector {
+  --pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
+  --pf-v5-c-dual-list-selector__list-item-row--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
+  --pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
 }

package/components/DualListSelector/dual-list-selector.scss

@@ -34,9 +34,9 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
   // List item
   --#{$dual-list-selector}__list-item-row--FontSize: var(--#{$pf-global}--FontSize--sm);
   --#{$dual-list-selector}__list-item-row--BackgroundColor: transparent;
-  --#{$dual-list-selector}__list-item-row--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
-  --#{$dual-list-selector}__list-item-row--focus-within--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
-  --#{$dual-list-selector}__list-item-row--m-selected--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
+  --#{$dual-list-selector}__list-item-row--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
+  --#{$dual-list-selector}__list-item-row--focus-within--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
+  --#{$dual-list-selector}__list-item-row--m-selected--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
   --#{$dual-list-selector}__list-item--m-ghost-row--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
   --#{$dual-list-selector}__list-item--m-ghost-row--Opacity: .4;
 
@@ -332,3 +332,10 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
   }
 }
 // stylelint-enable
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/dual-list-selector";
+
+@include pf-v5-theme-dark {
+  @include pf-v5-theme-dark-dual-list-selector;
+}

package/components/DualListSelector/themes/dark/dual-list-selector.scss

@@ -0,0 +1,9 @@
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-v5-theme-dark-dual-list-selector() {
+  .#{$dual-list-selector} {
+    --#{$dual-list-selector}__list-item-row--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
+    --#{$dual-list-selector}__list-item-row--focus-within--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
+    --#{$dual-list-selector}__list-item-row--m-selected--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
+  }
+}

package/components/EmptyState/empty-state.css

@@ -17,7 +17,7 @@
   --pf-v5-c-empty-state--m-xs__icon--MarginBottom: var(--pf-v5-global--spacer--md);
   --pf-v5-c-empty-state--m-xl__icon--MarginBottom: var(--pf-v5-global--spacer--xl);
   --pf-v5-c-empty-state--m-xl__icon--FontSize: 6.25rem;
-  --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
+  --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
   --pf-v5-c-empty-state__title-text--FontSize: var(--pf-v5-global--FontSize--xl);
   --pf-v5-c-empty-state__title-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-empty-state__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);

package/components/EmptyState/empty-state.scss

@@ -25,7 +25,7 @@
   --#{$empty-state}--m-xl__icon--FontSize: #{pf-size-prem(100px)};
 
   // Title text
-  --#{$empty-state}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading--sans-serif);
+  --#{$empty-state}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading);
   --#{$empty-state}__title-text--FontSize: var(--#{$pf-global}--FontSize--xl);
   --#{$empty-state}__title-text--FontWeight: var(--#{$pf-global}--FontWeight--normal);
   --#{$empty-state}__title-text--LineHeight: var(--#{$pf-global}--LineHeight--md);

package/components/FormControl/form-control.css

@@ -275,7 +275,7 @@
   --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
   --pf-v5-c-form-control--BorderLeftColor: transparent;
   --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-  --pf-v5-c-form-control--disabled--Color: var(--pf-v5-global--palette--black-300);
+  --pf-v5-c-form-control--disabled--Color: var(--pf-v5-global--disabled-color--300);
   --pf-v5-c-form-control--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
   --pf-v5-c-form-control--readonly--BackgroundColor: var(--pf-v5-global--disabled-color--200);
   color: var(--pf-v5-global--Color--100);

package/components/FormControl/themes/dark/form-control.scss

@@ -7,7 +7,7 @@
     --#{$form-control}--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
     --#{$form-control}--BorderLeftColor: transparent;
     --#{$form-control}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$form-control}--disabled--Color: var(--#{$pf-global}--palette--black-300);
+    --#{$form-control}--disabled--Color: var(--#{$pf-global}--disabled-color--300);
     --#{$form-control}--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
     --#{$form-control}--readonly--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
 

package/components/InputGroup/input-group.css

@@ -77,7 +77,7 @@ label.pf-v5-c-input-group__text {
   --pf-v5-c-input-group__item--m-box--BorderLeftColor: transparent;
   --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
   --pf-v5-c-input-group__item--m-disabled--BorderBottomColor: transparent;
-  --pf-v5-c-input-group__text--m-disabled--Color: var(--pf-v5-global--palette--black-100);
+  --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-v5-global--disabled-color--300);
 }
 :where(.pf-v5-theme-dark) .pf-v5-c-input-group > * + * {
   --pf-v5-c-input-group__item--m-box--BorderLeftColor: var(--pf-v5-c-input-group__item--BorderLeftColor);

package/components/InputGroup/themes/dark/input-group.scss

@@ -11,7 +11,7 @@
     --#{$input-group}__item--m-box--BorderLeftColor: transparent;
     --#{$input-group}__item--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
     --#{$input-group}__item--m-disabled--BorderBottomColor: transparent;
-    --#{$input-group}__text--m-disabled--Color: var(--#{$pf-global}--palette--black-100);
+    --#{$input-group}__item--m-disabled__text--Color: var(--#{$pf-global}--disabled-color--300);
 
     > * + * {
       --#{$input-group}__item--m-box--BorderLeftColor: var(--#{$input-group}__item--BorderLeftColor);

package/components/Label/label.css

@@ -413,6 +413,7 @@ button.pf-v5-c-label__content:focus {
   --pf-v5-c-label--m-red--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-label--m-purple--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-label--m-cyan--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
+  --pf-v5-c-label--m-gold--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-label__content--before--BorderWidth: 0;
   --pf-v5-c-label__content--before--BorderColor: transparent;
   --pf-v5-c-label__content--link--hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
@@ -447,4 +448,9 @@ button.pf-v5-c-label__content:focus {
   --pf-v5-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-v5-global--palette--cyan-100);
   --pf-v5-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-v5-global--palette--cyan-100);
   --pf-v5-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-v5-global--palette--cyan-100);
+  --pf-v5-c-label--m-gold__content--Color: var(--pf-v5-global--palette--gold-300);
+  --pf-v5-c-label--m-outline--m-gold__content--Color: var(--pf-v5-global--palette--gold-300);
+  --pf-v5-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-v5-global--palette--gold-100);
+  --pf-v5-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-v5-global--palette--gold-100);
+  --pf-v5-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-v5-global--palette--gold-100);
 }

package/components/Label/themes/dark/label.scss

@@ -9,6 +9,7 @@
     --#{$label}--m-red--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
     --#{$label}--m-purple--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
     --#{$label}--m-cyan--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
+    --#{$label}--m-gold--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
     --#{$label}__content--before--BorderWidth: 0;
     --#{$label}__content--before--BorderColor: transparent;
     --#{$label}__content--link--hover--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
@@ -43,5 +44,10 @@
     --#{$label}--m-outline--m-cyan__content--before--BorderColor: var(--#{$pf-global}--palette--cyan-100);
     --#{$label}--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--cyan-100);
     --#{$label}--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--cyan-100);
+    --#{$label}--m-gold__content--Color: var(--#{$pf-global}--palette--gold-300);
+    --#{$label}--m-outline--m-gold__content--Color: var(--#{$pf-global}--palette--gold-300);
+    --#{$label}--m-outline--m-gold__content--before--BorderColor: var(--#{$pf-global}--palette--gold-100);
+    --#{$label}--m-outline--m-gold__content--link--hover--before--BorderColor: var(--#{$pf-global}--palette--gold-100);
+    --#{$label}--m-outline--m-gold__content--link--focus--before--BorderColor: var(--#{$pf-global}--palette--gold-100);
   }
 }

package/components/Menu/menu.css

@@ -625,5 +625,4 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-v5-c-menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-menu__list-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
   --pf-v5-c-menu__list-item--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-  --pf-v5-c-menu__list-item--m-disabled__item--Color: var(--pf-v5-global--Color--200);
 }

package/components/Menu/themes/dark/menu.scss

@@ -5,6 +5,5 @@
     --#{$menu}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
     --#{$menu}__list-item--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
     --#{$menu}__list-item--focus-within--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$menu}__list-item--m-disabled__item--Color: var(--#{$pf-global}--Color--200); // global var?
   }
 }

package/components/MenuToggle/menu-toggle.css

@@ -83,7 +83,7 @@
   --pf-v5-c-menu-toggle--m-full-height--active--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
   --pf-v5-c-menu-toggle--m-split-button--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-menu-toggle--m-split-button--child--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-v5-global--Color--dark-200);
+  --pf-v5-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-v5-global--disabled-color--100);
   --pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
   --pf-v5-c-menu-toggle--m-split-button--first-child--PaddingRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-menu-toggle--m-split-button--last-child--PaddingLeft: 0;
@@ -271,6 +271,7 @@
   --pf-v5-c-menu-toggle--PaddingRight: 0;
   --pf-v5-c-check__input--MarginTop: 0;
   --pf-v5-c-check__label--Color: currentcolor;
+  --pf-v5-c-check__label--disabled--Color: currentcolor;
   align-items: center;
   align-self: stretch;
 }
@@ -337,8 +338,6 @@
   --pf-v5-c-menu-toggle--after--BorderBottomColor: transparent;
 }
 .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-disabled, .pf-v5-c-menu-toggle.pf-m-split-button:disabled {
-  --pf-v5-c-menu-toggle--m-split-button--child--BackgroundColor: var(--pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
-  --pf-v5-c-menu-toggle--m-split-button--child--Color: var(--pf-v5-c-menu-toggle--m-split-button--child--disabled--Color);
   --pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: transparent;
 }
 .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-disabled::before, .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-disabled::after, .pf-v5-c-menu-toggle.pf-m-split-button:disabled::before, .pf-v5-c-menu-toggle.pf-m-split-button:disabled::after {
@@ -409,9 +408,12 @@
   --pf-v5-c-menu-toggle--before--BorderBottomColor: transparent;
   --pf-v5-c-menu-toggle--before--BorderLeftColor: transparent;
   --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
-  --pf-v5-c-menu-toggle--disabled--BackgroundColor: var(--pf-v5-global--palette--black-500);
-  --pf-v5-c-menu-toggle--disabled--Color: var(--pf-v5-global--palette--black-100);
   --pf-v5-c-menu-toggle--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
+  --pf-v5-c-menu-toggle--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
+  --pf-v5-c-menu-toggle--disabled--Color: var(--pf-v5-global--disabled-color--300);
+  --pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-v5-global--primary-color--300);
+  --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 {
   background: transparent;

package/components/MenuToggle/menu-toggle.scss

@@ -120,7 +120,7 @@
 
   // Split button, child
   --#{$menu-toggle}--m-split-button--child--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--#{$pf-global}--Color--dark-200);
+  --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--#{$pf-global}--disabled-color--100);
   --#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
   --#{$menu-toggle}--m-split-button--first-child--PaddingRight: var(--#{$pf-global}--spacer--sm);
   --#{$menu-toggle}--m-split-button--last-child--PaddingLeft: 0;
@@ -363,6 +363,7 @@
       --#{$menu-toggle}--PaddingRight: 0;
       --#{$check}__input--MarginTop: 0;
       --#{$check}__label--Color: currentcolor;
+      --#{$check}__label--disabled--Color: currentcolor;
 
       align-items: center;
       align-self: stretch;
@@ -469,8 +470,6 @@
     // disable accent border
     &.pf-m-disabled,
     &:disabled {
-      --#{$menu-toggle}--m-split-button--child--BackgroundColor: var(--#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor);
-      --#{$menu-toggle}--m-split-button--child--Color: var(--#{$menu-toggle}--m-split-button--child--disabled--Color);
       --#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor: transparent;
 
       &::before,

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

@@ -1,20 +1,23 @@
 @import "../../../../sass-utilities/themes/dark/all";
 
 @mixin pf-v5-theme-dark-menu-toggle() {
-  .#{$menu}-toggle {
-    --#{$menu}-toggle--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$menu}-toggle--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$menu}-toggle--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$menu}-toggle--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$menu}-toggle--m-expanded--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$menu}-toggle--before--BorderTopColor: transparent;
-    --#{$menu}-toggle--before--BorderRightColor: transparent;
-    --#{$menu}-toggle--before--BorderBottomColor: transparent;
-    --#{$menu}-toggle--before--BorderLeftColor: transparent;
-    --#{$menu}-toggle--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
-    --#{$menu}-toggle--disabled--BackgroundColor: var(--#{$pf-global}--palette--black-500);
-    --#{$menu}-toggle--disabled--Color: var(--#{$pf-global}--palette--black-100);
-    --#{$menu}-toggle--m-primary--BackgroundColor: var(--#{$pf-global}--primary-color--300);
+  .#{$menu-toggle} {
+    --#{$menu-toggle}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
+    --#{$menu-toggle}--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
+    --#{$menu-toggle}--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
+    --#{$menu-toggle}--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
+    --#{$menu-toggle}--m-expanded--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
+    --#{$menu-toggle}--before--BorderTopColor: transparent;
+    --#{$menu-toggle}--before--BorderRightColor: transparent;
+    --#{$menu-toggle}--before--BorderBottomColor: transparent;
+    --#{$menu-toggle}--before--BorderLeftColor: transparent;
+    --#{$menu-toggle}--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
+    --#{$menu-toggle}--m-primary--BackgroundColor: var(--#{$pf-global}--primary-color--300);
+    --#{$menu-toggle}--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
+    --#{$menu-toggle}--disabled--Color: var(--#{$pf-global}--disabled-color--300);
+    --#{$menu-toggle}--m-split-button--m-action--m-primary--child--BackgroundColor: var(--#{$pf-global}--primary-color--300);
+    --#{$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 {
       background: transparent;

package/components/ModalBox/modal-box.css

@@ -23,7 +23,7 @@
   --pf-v5-c-modal-box__header--PaddingLeft: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-modal-box__header--last-child--PaddingBottom: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-modal-box__title--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-modal-box__title--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
+  --pf-v5-c-modal-box__title--FontFamily: var(--pf-v5-global--FontFamily--heading);
   --pf-v5-c-modal-box__title--FontSize: var(--pf-v5-global--FontSize--2xl);
   --pf-v5-c-modal-box__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-global--Color--100);

package/components/ModalBox/modal-box.scss

@@ -35,7 +35,7 @@
 
   // Title
   --#{$modal-box}__title--LineHeight: var(--#{$pf-global}--LineHeight--sm);
-  --#{$modal-box}__title--FontFamily: var(--#{$pf-global}--FontFamily--heading--sans-serif);
+  --#{$modal-box}__title--FontFamily: var(--#{$pf-global}--FontFamily--heading);
   --#{$modal-box}__title--FontSize: var(--#{$pf-global}--FontSize--2xl);
 
   // Title icon

package/components/Nav/nav.css

@@ -73,7 +73,7 @@
   --pf-v5-c-nav--m-horizontal__link--lg--PaddingBottom: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-nav--m-horizontal__link--Right: var(--pf-v5-global--spacer--md);
   --pf-v5-c-nav--m-horizontal__link--Left: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-nav--m-horizontal__link--Color: var(--pf-v5-global--Color--light-300);
+  --pf-v5-c-nav--m-horizontal__link--Color: var(--pf-v5-global--Color--light-200);
   --pf-v5-c-nav--m-horizontal__link--hover--Color: var(--pf-v5-global--active-color--400);
   --pf-v5-c-nav--m-horizontal__link--focus--Color: var(--pf-v5-global--active-color--400);
   --pf-v5-c-nav--m-horizontal__link--active--Color: var(--pf-v5-global--active-color--400);

package/components/Nav/nav.scss

@@ -91,7 +91,7 @@
   --#{$nav}--m-horizontal__link--lg--PaddingBottom: var(--#{$pf-global}--spacer--lg);
   --#{$nav}--m-horizontal__link--Right: var(--#{$pf-global}--spacer--md);
   --#{$nav}--m-horizontal__link--Left: var(--#{$pf-global}--spacer--md);
-  --#{$nav}--m-horizontal__link--Color: var(--#{$pf-global}--Color--light-300);
+  --#{$nav}--m-horizontal__link--Color: var(--#{$pf-global}--Color--light-200);
   --#{$nav}--m-horizontal__link--hover--Color: var(--#{$pf-global}--active-color--400);
   --#{$nav}--m-horizontal__link--focus--Color: var(--#{$pf-global}--active-color--400);
   --#{$nav}--m-horizontal__link--active--Color: var(--#{$pf-global}--active-color--400);

package/components/NotificationBadge/notification-badge.css

@@ -100,6 +100,7 @@
 
 :where(.pf-v5-theme-dark) .pf-v5-c-notification-badge {
   --pf-v5-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
+  --pf-v5-c-notification-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
   --pf-v5-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-v5-global--primary-color--300);
   --pf-v5-c-notification-badge--m-attention--Color: var(--pf-v5-global--palette--black-900);
 }

package/components/NotificationBadge/themes/dark/notification-badge.scss

@@ -3,6 +3,7 @@
 @mixin pf-v5-theme-dark-notification-badge() {
   .#{$notification-badge} {
     --#{$notification-badge}--m-read--m-expanded--after--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
+    --#{$notification-badge}--m-unread--Color: var(--#{$pf-global}--primary-color--400);
     --#{$notification-badge}--m-unread--after--BackgroundColor: var(--#{$pf-global}--primary-color--300);
     --#{$notification-badge}--m-attention--Color: var(--#{$pf-global}--palette--black-900);
   }

package/components/Panel/panel.css

@@ -10,6 +10,7 @@
   --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
   --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-v5-global--BoxShadow--md);
   --pf-v5-c-panel--m-raised--ZIndex: var(--pf-v5-global--ZIndex--sm);
+  --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-panel__header--PaddingTop: var(--pf-v5-global--spacer--md);
   --pf-v5-c-panel__header--PaddingRight: var(--pf-v5-global--spacer--md);
   --pf-v5-c-panel__header--PaddingBottom: var(--pf-v5-global--spacer--md);
@@ -50,6 +51,7 @@
   --pf-v5-c-panel--before--BorderWidth: var(--pf-v5-c-panel--m-bordered--before--BorderWidth);
 }
 .pf-v5-c-panel.pf-m-raised {
+  --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-raised--BackgroundColor);
   --pf-v5-c-panel--BoxShadow: var(--pf-v5-c-panel--m-raised--BoxShadow);
   --pf-v5-c-panel--ZIndex: var(--pf-v5-c-panel--m-raised--ZIndex);
 }
@@ -75,4 +77,8 @@
 .pf-v5-c-panel__footer {
   padding: var(--pf-v5-c-panel__footer--PaddingTop) var(--pf-v5-c-panel__footer--PaddingRight) var(--pf-v5-c-panel__footer--PaddingBottom) var(--pf-v5-c-panel__footer--PaddingLeft);
   box-shadow: var(--pf-v5-c-panel__footer--BoxShadow);
+}
+
+:where(.pf-v5-theme-dark) .pf-v5-c-panel {
+  --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }

package/components/Panel/panel.scss

@@ -18,6 +18,7 @@
   // raised
   --#{$panel}--m-raised--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
   --#{$panel}--m-raised--ZIndex: var(--#{$pf-global}--ZIndex--sm);
+  --#{$panel}--m-raised--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
 
   // header
   --#{$panel}__header--PaddingTop: var(--#{$pf-global}--spacer--md);
@@ -71,6 +72,7 @@
   }
 
   &.pf-m-raised {
+    --#{$panel}--BackgroundColor: var(--#{$panel}--m-raised--BackgroundColor);
     --#{$panel}--BoxShadow: var(--#{$panel}--m-raised--BoxShadow);
     --#{$panel}--ZIndex: var(--#{$panel}--m-raised--ZIndex);
   }
@@ -99,3 +101,10 @@
   padding: var(--#{$panel}__footer--PaddingTop) var(--#{$panel}__footer--PaddingRight) var(--#{$panel}__footer--PaddingBottom) var(--#{$panel}__footer--PaddingLeft);
   box-shadow: var(--#{$panel}__footer--BoxShadow);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/panel";
+
+@include pf-v5-theme-dark {
+  @include pf-v5-theme-dark-panel;
+}

package/components/Panel/themes/dark/panel.scss

@@ -0,0 +1,7 @@
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-v5-theme-dark-panel() {
+  .#{$panel} {
+    --#{$panel}--m-raised--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
+  }
+}

package/components/Popover/popover.css

@@ -39,7 +39,7 @@
   --pf-v5-c-popover__close--sibling--PaddingRight: var(--pf-v5-global--spacer--2xl);
   --pf-v5-c-popover__header--MarginBottom: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-popover__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-popover__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
+  --pf-v5-c-popover__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
   --pf-v5-c-popover__title-text--FontSize: var(--pf-v5-global--FontSize--md);
   --pf-v5-c-popover__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-popover__title-icon--Color: var(--pf-v5-global--Color--100);
@@ -173,7 +173,7 @@
 :where(.pf-v5-theme-dark) .pf-v5-c-popover {
   --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-  --pf-v5-c-popover--m-default__title-text--Color: var(--pf-v5-global--custom-color--200);
+  --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--200);
   --pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--100);
   --pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--100);
 }

package/components/Popover/popover.scss

@@ -56,7 +56,7 @@
 
   // Title text
   --#{$popover}__title-text--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$popover}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading--sans-serif);
+  --#{$popover}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading);
   --#{$popover}__title-text--FontSize: var(--#{$pf-global}--FontSize--md);
 
   // Title icon

package/components/Popover/themes/dark/popover.scss

@@ -4,7 +4,7 @@
   .#{$popover} {
     --#{$popover}__content--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
     --#{$popover}__arrow--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$popover}--m-default__title-text--Color: var(--#{$pf-global}--custom-color--200);
+    --#{$popover}--m-custom__title-text--Color: var(--#{$pf-global}--custom-color--200);
     --#{$popover}--m-info__title-text--Color: var(--#{$pf-global}--info-color--100);
     --#{$popover}--m-success__title-text--Color: var(--#{$pf-global}--success-color--100);
   }

package/components/ProgressStepper/progress-stepper.css

@@ -298,6 +298,7 @@
   font-weight: var(--pf-v5-c-progress-stepper__step-title--FontWeight);
   color: var(--pf-v5-c-progress-stepper__step-title--Color);
   text-align: var(--pf-v5-c-progress-stepper__step-title--TextAlign);
+  background: none;
   border: 0;
 }
 .pf-v5-c-progress-stepper__step-title.pf-m-help-text {