@patternfly/patternfly 6.0.0-alpha.9 → 6.0.0-alpha.90

package/components/BackToTop/back-to-top.scss

@@ -1,21 +1,22 @@
 // @debug $back-to-top; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$back-to-top} {
-  --#{$back-to-top}--Right: var(--#{$pf-global}--spacer--2xl);
-  --#{$back-to-top}--Bottom: var(--#{$pf-global}--spacer--lg);
-  --#{$back-to-top}--md--Bottom: var(--#{$pf-global}--spacer--2xl);
-  --#{$back-to-top}--c-button--FontSize: var(--#{$pf-global}--FontSize--xs);
-  --#{$back-to-top}--c-button--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
-  --#{$back-to-top}--c-button--PaddingTop: var(--#{$pf-global}--spacer--xs);
-  --#{$back-to-top}--c-button--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$back-to-top}--c-button--PaddingBottom: var(--#{$pf-global}--spacer--xs);
-  --#{$back-to-top}--c-button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$back-to-top}--c-button--BoxShadow: var(--#{$pf-global}--BoxShadow--lg-bottom);
+:root {
+  --#{$back-to-top}--Right: var(--pf-t--global--spacer--2xl);
+  --#{$back-to-top}--Bottom: var(--pf-t--global--spacer--lg);
+  --#{$back-to-top}--md--Bottom: var(--pf-t--global--spacer--2xl);
+  --#{$back-to-top}--c-button--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$back-to-top}--c-button--PaddingTop: var(--pf-t--global--spacer--xs);
+  --#{$back-to-top}--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$back-to-top}--c-button--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --#{$back-to-top}--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$back-to-top}--c-button--BoxShadow: var(--pf-t--global--box-shadow--sm);
 
   @media (min-width: $pf-v5-global--breakpoint--md) {
     --#{$back-to-top}--Bottom: var(--#{$back-to-top}--md--Bottom);
   }
+}
 
+.#{$back-to-top} {
   position: absolute;
   inset-block-end: var(--#{$back-to-top}--Bottom);
   inset-inline-end: var(--#{$back-to-top}--Right);
@@ -26,7 +27,6 @@
 
   .#{$button} {
     --#{$button}--FontSize: var(--#{$back-to-top}--c-button--FontSize);
-    --#{$button}--BorderRadius: var(--#{$back-to-top}--c-button--BorderRadius);
     --#{$button}--PaddingTop: var(--#{$back-to-top}--c-button--PaddingTop);
     --#{$button}--PaddingRight: var(--#{$back-to-top}--c-button--PaddingRight);
     --#{$button}--PaddingBottom: var(--#{$back-to-top}--c-button--PaddingBottom);

package/components/Backdrop/backdrop.css

@@ -1,7 +1,11 @@
+:root,
 .pf-v5-c-backdrop {
   --pf-v5-c-backdrop--Position: fixed;
-  --pf-v5-c-backdrop--ZIndex: var(--pf-v5-global--ZIndex--lg);
-  --pf-v5-c-backdrop--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-100);
+  --pf-v5-c-backdrop--ZIndex: var(--pf-t--global--Zindex--lg);
+  --pf-v5-c-backdrop--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
+}
+
+.pf-v5-c-backdrop {
   position: var(--pf-v5-c-backdrop--Position);
   inset-block-start: 0;
   inset-inline-start: 0;

package/components/Backdrop/backdrop.scss

@@ -1,10 +1,13 @@
 // @debug $backdrop; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
+:root,
 .#{$backdrop} {
   --#{$backdrop}--Position: fixed;
-  --#{$backdrop}--ZIndex: var(--#{$pf-global}--ZIndex--lg);
-  --#{$backdrop}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-transparent-100);
+  --#{$backdrop}--ZIndex: var(--pf-t--global--Zindex--lg);
+  --#{$backdrop}--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
+}
 
+.#{$backdrop} {
   position: var(--#{$backdrop}--Position);
   inset-block-start: 0;
   inset-inline-start: 0;

package/components/BackgroundImage/background-image.css

@@ -1,10 +1,14 @@
+:root,
 .pf-v5-c-background-image {
-  --pf-v5-c-background-image--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
+  --pf-v5-c-background-image--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v5-c-background-image--BackgroundImage: none;
   --pf-v5-c-background-image--BackgroundSize--min-width: 200px;
   --pf-v5-c-background-image--BackgroundSize--width: 60%;
   --pf-v5-c-background-image--BackgroundSize--max-width: 600px;
   --pf-v5-c-background-image--BackgroundSize: clamp(var(--pf-v5-c-background-image--BackgroundSize--min-width), var(--pf-v5-c-background-image--BackgroundSize--width), var(--pf-v5-c-background-image--BackgroundSize--max-width));
+}
+
+.pf-v5-c-background-image {
   --pf-v5-c-background-image--BackgroundPosition: bottom right;
   position: fixed;
   inset-block-start: 0;

package/components/BackgroundImage/background-image.scss

@@ -1,13 +1,17 @@
 // @debug $background-image; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
+:root,
 .#{$background-image} {
-  --#{$background-image}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-100);
+  --#{$background-image}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$background-image}--BackgroundImage: none;
   --#{$background-image}--BackgroundSize--min-width: 200px;
   --#{$background-image}--BackgroundSize--width: 60%;
   --#{$background-image}--BackgroundSize--max-width: 600px;
   --#{$background-image}--BackgroundSize: clamp(var(--#{$background-image}--BackgroundSize--min-width), var(--#{$background-image}--BackgroundSize--width), var(--#{$background-image}--BackgroundSize--max-width));
 
+}
+
+.#{$background-image} {
   @include pf-v5-bidirectional-style(
     $prop: --#{$background-image}--BackgroundPosition,
     $ltr-val: bottom right,

package/components/Badge/badge.css

@@ -1,15 +1,22 @@
+:root {
+  --pf-v5-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
+  --pf-v5-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v5-c-badge--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-badge--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
+  --pf-v5-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-badge__toggle-icon--MarginLeft: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
+  --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
+  --pf-v5-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
+  --pf-v5-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
+  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v5-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
+  --pf-v5-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
+}
+
 .pf-v5-c-badge {
-  --pf-v5-c-badge--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
-  --pf-v5-c-badge--FontSize: var(--pf-v5-global--FontSize--xs);
-  --pf-v5-c-badge--FontWeight: var(--pf-v5-global--FontWeight--bold);
-  --pf-v5-c-badge--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-badge--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-badge--Color: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-c-badge--MinWidth: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-badge--m-read--Color: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--Color--light-100);
   display: inline-block;
   min-width: var(--pf-v5-c-badge--MinWidth);
   padding-inline-start: var(--pf-v5-c-badge--PaddingLeft);
@@ -25,14 +32,15 @@
 .pf-v5-c-badge.pf-m-read {
   --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-read--Color);
   --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
+  --pf-v5-c-badge__toggle-icon--Color: var(--pf-v5-c-badge--m-read__toggle-icon--Color);
 }
 .pf-v5-c-badge.pf-m-unread {
   --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-unread--Color);
   --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-unread--BackgroundColor);
+  --pf-v5-c-badge__toggle-icon--Color: var(--pf-v5-c-badge--m-unread__toggle-icon--Color);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-badge {
-  --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--palette--black-500);
-  --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
-  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--300);
+.pf-v5-c-badge__toggle-icon {
+  margin-inline-start: var(--pf-v5-c-badge__toggle-icon--MarginLeft);
+  color: var(--pf-v5-c-badge__toggle-icon--Color);
 }

package/components/Badge/badge.scss

@@ -1,21 +1,29 @@
 // @debug $badge; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$badge} {
+:root {
   // Component
-  --#{$badge}--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
-  --#{$badge}--FontSize: var(--#{$pf-global}--FontSize--xs);
-  --#{$badge}--FontWeight: var(--#{$pf-global}--FontWeight--bold);
-  --#{$badge}--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$badge}--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$badge}--Color: var(--#{$pf-global}--Color--dark-100);
-  --#{$badge}--MinWidth: var(--#{$pf-global}--spacer--xl);
+  --#{$badge}--BorderRadius: var(--pf-t--global--border--radius--pill);
+  --#{$badge}--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$badge}--FontWeight: var(--pf-t--global--font--weight--body--bold); // TODO - design calls for 500/semi-bold, do we need a token for that or is bold ok
+  --#{$badge}--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$badge}--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$badge}--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
+  --#{$badge}--MinWidth: var(--pf-t--global--spacer--xl);
+
+  // Toggle icon
+  --#{$badge}__toggle-icon--MarginLeft: var(--pf-t--global--spacer--xs);
+  --#{$badge}__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
 
   // Modifiers
-  --#{$badge}--m-read--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-  --#{$badge}--m-read--Color: var(--#{$pf-global}--Color--dark-100);
-  --#{$badge}--m-unread--BackgroundColor: var(--#{$pf-global}--primary-color--100);
-  --#{$badge}--m-unread--Color: var(--#{$pf-global}--Color--light-100);
+  --#{$badge}--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
+  --#{$badge}--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
+  --#{$badge}--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
+  --#{$badge}--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --#{$badge}--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
+  --#{$badge}--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
+}
 
+.#{$badge} {
   display: inline-block;
   min-width: var(--#{$badge}--MinWidth);
   padding-inline-start: var(--#{$badge}--PaddingLeft);
@@ -31,17 +39,17 @@
   &.pf-m-read {
     --#{$badge}--Color: var(--#{$badge}--m-read--Color);
     --#{$badge}--BackgroundColor: var(--#{$badge}--m-read--BackgroundColor);
+    --#{$badge}__toggle-icon--Color: var(--#{$badge}--m-read__toggle-icon--Color);
   }
 
   &.pf-m-unread {
     --#{$badge}--Color: var(--#{$badge}--m-unread--Color);
     --#{$badge}--BackgroundColor: var(--#{$badge}--m-unread--BackgroundColor);
+    --#{$badge}__toggle-icon--Color: var(--#{$badge}--m-unread__toggle-icon--Color);
   }
 }
 
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/badge";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-badge;
+.#{$badge}__toggle-icon {
+  margin-inline-start: var(--#{$badge}__toggle-icon--MarginLeft);
+  color: var(--#{$badge}__toggle-icon--Color);
 }

package/components/Banner/banner.css

@@ -1,56 +1,56 @@
-.pf-v5-c-banner.pf-m-gold, .pf-v5-c-banner.pf-m-blue {
-  --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
-  --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
-  --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
-  --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 {
-  --pf-v5-global--Color--100: var(--pf-v5-global--Color--light-100);
-  --pf-v5-global--Color--200: var(--pf-v5-global--Color--light-200);
-  --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--light-100);
-  --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--light-100);
-  --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 {
-  --pf-v5-c-banner--PaddingTop: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-banner--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-banner--md--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-banner--PaddingBottom: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-banner--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-banner--md--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-banner--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-banner--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-400);
+:root {
+  --pf-v5-c-banner--PaddingTop: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-banner--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-banner--md--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-banner--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-banner--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-banner--md--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-banner--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v5-c-banner--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
+  --pf-v5-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
   --pf-v5-c-banner--link--Color: var(--pf-v5-c-banner--Color);
   --pf-v5-c-banner--link--TextDecoration: underline;
   --pf-v5-c-banner--link--hover--Color: var(--pf-v5-c-banner--Color);
-  --pf-v5-c-banner--link--hover--FontWeight: var(--pf-v5-global--FontWeight--bold);
+  --pf-v5-c-banner--link--hover--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v5-c-banner--link--disabled--Color: var(--pf-v5-c-banner--Color);
   --pf-v5-c-banner--link--disabled--TextDecoration: none;
-  --pf-v5-c-banner--m-blue--BackgroundColor: var(--pf-v5-global--palette--blue-200);
-  --pf-v5-c-banner--m-red--BackgroundColor: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-banner--m-green--BackgroundColor: var(--pf-v5-global--success-color--100);
-  --pf-v5-c-banner--m-gold--BackgroundColor: var(--pf-v5-global--warning-color--100);
   --pf-v5-c-banner--m-sticky--ZIndex: var(--pf-v5-global--ZIndex--md);
-  --pf-v5-c-banner--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--md-bottom);
-  color: var(--pf-v5-global--Color--100);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  --pf-v5-c-banner--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --pf-v5-c-banner--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
+  --pf-v5-c-banner--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
+  --pf-v5-c-banner--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
+  --pf-v5-c-banner--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
+  --pf-v5-c-banner--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
+  --pf-v5-c-banner--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
+  --pf-v5-c-banner--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
+  --pf-v5-c-banner--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
+  --pf-v5-c-banner--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
+  --pf-v5-c-banner--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
+  --pf-v5-c-banner--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
+  --pf-v5-c-banner--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
+  --pf-v5-c-banner--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
+  --pf-v5-c-banner--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
+  --pf-v5-c-banner--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
+  --pf-v5-c-banner--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
+  --pf-v5-c-banner--m-gold--BackgroundColor: var(--pf-t--global--color--nonstatus--gold--default);
+  --pf-v5-c-banner--m-gold--Color: var(--pf-t--global--text--color--nonstatus--on-gold--default);
+  --pf-v5-c-banner--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
+  --pf-v5-c-banner--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
+  --pf-v5-c-banner--m-cyan--BackgroundColor: var(--pf-t--global--color--nonstatus--cyan--default);
+  --pf-v5-c-banner--m-cyan--Color: var(--pf-t--global--text--color--nonstatus--on-cyan--default);
+  --pf-v5-c-banner--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
+  --pf-v5-c-banner--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
+  --pf-v5-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
+  --pf-v5-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
+}
+@media (min-width: 768px) {
+  :root {
+    --pf-v5-c-banner--PaddingRight: var(--pf-v5-c-banner--md--PaddingRight);
+    --pf-v5-c-banner--PaddingLeft: var(--pf-v5-c-banner--md--PaddingLeft);
+  }
+}
+
+.pf-v5-c-banner {
   flex-shrink: 0;
   padding-block-start: var(--pf-v5-c-banner--PaddingTop);
   padding-block-end: var(--pf-v5-c-banner--PaddingBottom);
@@ -61,23 +61,57 @@
   white-space: nowrap;
   background-color: var(--pf-v5-c-banner--BackgroundColor);
 }
-@media (min-width: 768px) {
-  .pf-v5-c-banner {
-    --pf-v5-c-banner--PaddingRight: var(--pf-v5-c-banner--md--PaddingRight);
-    --pf-v5-c-banner--PaddingLeft: var(--pf-v5-c-banner--md--PaddingLeft);
-  }
+.pf-v5-c-banner.pf-m-danger {
+  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-danger--BackgroundColor);
+  --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-danger--Color);
 }
-.pf-v5-c-banner.pf-m-blue {
-  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-blue--BackgroundColor);
+.pf-v5-c-banner.pf-m-success {
+  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-success--BackgroundColor);
+  --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-success--Color);
+}
+.pf-v5-c-banner.pf-m-warning {
+  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-warning--BackgroundColor);
+  --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-warning--Color);
+}
+.pf-v5-c-banner.pf-m-info {
+  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-info--BackgroundColor);
+  --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-info--Color);
+}
+.pf-v5-c-banner.pf-m-custom {
+  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-custom--BackgroundColor);
+  --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-custom--Color);
 }
 .pf-v5-c-banner.pf-m-red {
   --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-red--BackgroundColor);
+  --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-red--Color);
 }
-.pf-v5-c-banner.pf-m-green {
-  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-green--BackgroundColor);
+.pf-v5-c-banner.pf-m-orangered {
+  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-orangered--BackgroundColor);
+  --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-orangered--Color);
+}
+.pf-v5-c-banner.pf-m-orange {
+  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-orange--BackgroundColor);
+  --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-orange--Color);
 }
 .pf-v5-c-banner.pf-m-gold {
   --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-gold--BackgroundColor);
+  --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-gold--Color);
+}
+.pf-v5-c-banner.pf-m-green {
+  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-green--BackgroundColor);
+  --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-green--Color);
+}
+.pf-v5-c-banner.pf-m-cyan {
+  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-cyan--BackgroundColor);
+  --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-cyan--Color);
+}
+.pf-v5-c-banner.pf-m-blue {
+  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-blue--BackgroundColor);
+  --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-blue--Color);
+}
+.pf-v5-c-banner.pf-m-purple {
+  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-purple--BackgroundColor);
+  --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-purple--Color);
 }
 .pf-v5-c-banner.pf-m-sticky {
   position: sticky;
@@ -111,12 +145,4 @@
 .pf-v5-c-banner .pf-v5-c-button.pf-m-inline:disabled, .pf-v5-c-banner .pf-v5-c-button.pf-m-inline.pf-m-disabled {
   --pf-v5-c-banner--link--TextDecoration: var(--pf-v5-c-banner--link--disabled--TextDecoration);
   cursor: not-allowed;
-}
-
-: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.pf-m-blue, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-red, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-green, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-gold {
-  --pf-v5-c-banner--Color: var(--pf-v5-global--palette--black-900);
 }

package/components/Banner/banner.scss

@@ -1,15 +1,15 @@
 // @debug $banner; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$banner} {
-  --#{$banner}--PaddingTop: var(--#{$pf-global}--spacer--xs);
-  --#{$banner}--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$banner}--md--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$banner}--PaddingBottom: var(--#{$pf-global}--spacer--xs);
-  --#{$banner}--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$banner}--md--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$banner}--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$banner}--Color: var(--#{$pf-global}--Color--100);
-  --#{$banner}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-400);
+:root {
+  --#{$banner}--PaddingTop: var(--pf-t--global--spacer--xs);
+  --#{$banner}--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$banner}--md--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$banner}--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --#{$banner}--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$banner}--md--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$banner}--FontSize: var(--pf-t--global--font--size--body--default);
+  --#{$banner}--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
+  --#{$banner}--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
 
   @media (min-width: $pf-v5-global--breakpoint--md) {
     --#{$banner}--PaddingRight: var(--#{$banner}--md--PaddingRight);
@@ -20,21 +20,46 @@
   --#{$banner}--link--Color: var(--#{$banner}--Color);
   --#{$banner}--link--TextDecoration: underline;
   --#{$banner}--link--hover--Color: var(--#{$banner}--Color);
-  --#{$banner}--link--hover--FontWeight: var(--#{$pf-global}--FontWeight--bold);
+  --#{$banner}--link--hover--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --#{$banner}--link--disabled--Color: var(--#{$banner}--Color);
   --#{$banner}--link--disabled--TextDecoration: none;
 
   // modifier variables
-  --#{$banner}--m-blue--BackgroundColor: var(--#{$pf-global}--palette--blue-200);
-  --#{$banner}--m-red--BackgroundColor: var(--#{$pf-global}--danger-color--100);
-  --#{$banner}--m-green--BackgroundColor: var(--#{$pf-global}--success-color--100);
-  --#{$banner}--m-gold--BackgroundColor: var(--#{$pf-global}--warning-color--100);
   --#{$banner}--m-sticky--ZIndex: var(--#{$pf-global}--ZIndex--md);
-  --#{$banner}--m-sticky--BoxShadow: var(--#{$pf-global}--BoxShadow--md-bottom);
-
-  @include pf-v5-t-dark;
-  @include pf-v5-text-overflow;
+  --#{$banner}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
+
+  // status modifier variables
+  --#{$banner}--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
+  --#{$banner}--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
+  --#{$banner}--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
+  --#{$banner}--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
+  --#{$banner}--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
+  --#{$banner}--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
+  --#{$banner}--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
+  --#{$banner}--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
+  --#{$banner}--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
+  --#{$banner}--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
+
+  // nonstatus modifier variables
+  --#{$banner}--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
+  --#{$banner}--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
+  --#{$banner}--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
+  --#{$banner}--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
+  --#{$banner}--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
+  --#{$banner}--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
+  --#{$banner}--m-gold--BackgroundColor: var(--pf-t--global--color--nonstatus--gold--default);
+  --#{$banner}--m-gold--Color: var(--pf-t--global--text--color--nonstatus--on-gold--default);
+  --#{$banner}--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
+  --#{$banner}--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
+  --#{$banner}--m-cyan--BackgroundColor: var(--pf-t--global--color--nonstatus--cyan--default);
+  --#{$banner}--m-cyan--Color: var(--pf-t--global--text--color--nonstatus--on-cyan--default);
+  --#{$banner}--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
+  --#{$banner}--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
+  --#{$banner}--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
+  --#{$banner}--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
+}
 
+.#{$banner} {
   flex-shrink: 0;
   padding-block-start: var(--#{$banner}--PaddingTop);
   padding-block-end: var(--#{$banner}--PaddingBottom);
@@ -45,24 +70,69 @@
   white-space: nowrap;
   background-color: var(--#{$banner}--BackgroundColor);
 
-  &.pf-m-blue {
-    @include pf-v5-t-light(false);
+  &.pf-m-danger {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-danger--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-danger--Color);
+  }
 
-    --#{$banner}--BackgroundColor: var(--#{$banner}--m-blue--BackgroundColor);
+  &.pf-m-success {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-success--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-success--Color);
+  }
+
+  &.pf-m-warning {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-warning--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-warning--Color);
+  }
+
+  &.pf-m-info {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-info--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-info--Color);
+  }
+
+  &.pf-m-custom {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-custom--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-custom--Color);
   }
 
   &.pf-m-red {
     --#{$banner}--BackgroundColor: var(--#{$banner}--m-red--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-red--Color);
+  }
+  
+  &.pf-m-orangered {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-orangered--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-orangered--Color);
+  }
+
+  &.pf-m-orange {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-orange--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-orange--Color);
+  }
+
+  &.pf-m-gold {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-gold--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-gold--Color);
   }
 
   &.pf-m-green {
     --#{$banner}--BackgroundColor: var(--#{$banner}--m-green--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-green--Color);
   }
 
-  &.pf-m-gold {
-    @include pf-v5-t-light(false);
+  &.pf-m-cyan {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-cyan--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-cyan--Color);
+  }
 
-    --#{$banner}--BackgroundColor: var(--#{$banner}--m-gold--BackgroundColor);
+  &.pf-m-blue {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-blue--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-blue--Color);
+  }
+
+  &.pf-m-purple {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-purple--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-purple--Color);
   }
 
   &.pf-m-sticky {
@@ -113,10 +183,3 @@
     }
   }
 }
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/banner";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-banner;
-}