@patternfly/react-styles 6.0.0-alpha.2 → 6.0.0-alpha.21

package/css/components/BackgroundImage/background-image.js

@@ -2,6 +2,6 @@
 exports.__esModule = true;
 require('./background-image.css');
 exports.default = {
-  "backgroundImage": "pf-v5-c-background-image",
-  "dirRtl": "pf-v5-m-dir-rtl"
+  "backgroundImage": "pf-v6-c-background-image",
+  "dirRtl": "pf-v6-m-dir-rtl"
 };

package/css/components/BackgroundImage/background-image.mjs

@@ -1,5 +1,5 @@
 import './background-image.css';
 export default {
-  "backgroundImage": "pf-v5-c-background-image",
-  "dirRtl": "pf-v5-m-dir-rtl"
+  "backgroundImage": "pf-v6-c-background-image",
+  "dirRtl": "pf-v6-m-dir-rtl"
 };

package/css/components/Badge/badge.css

@@ -1,38 +1,46 @@
-.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);
+:where(:root, .pf-v6-c-badge) {
+  --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
+  --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
+  --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
+  --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
+  --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
+  --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
+  --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
+  --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
+}
+
+.pf-v6-c-badge {
   display: inline-block;
-  min-width: var(--pf-v5-c-badge--MinWidth);
-  padding-inline-start: var(--pf-v5-c-badge--PaddingLeft);
-  padding-inline-end: var(--pf-v5-c-badge--PaddingRight);
-  font-size: var(--pf-v5-c-badge--FontSize);
-  font-weight: var(--pf-v5-c-badge--FontWeight);
-  color: var(--pf-v5-c-badge--Color);
+  min-width: var(--pf-v6-c-badge--MinWidth);
+  padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
+  font-size: var(--pf-v6-c-badge--FontSize);
+  font-weight: var(--pf-v6-c-badge--FontWeight);
+  color: var(--pf-v6-c-badge--Color);
   text-align: center;
   white-space: nowrap;
-  background-color: var(--pf-v5-c-badge--BackgroundColor);
-  border-radius: var(--pf-v5-c-badge--BorderRadius);
+  background-color: var(--pf-v6-c-badge--BackgroundColor);
+  border-radius: var(--pf-v6-c-badge--BorderRadius);
 }
-.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-v6-c-badge.pf-m-read {
+  --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
+  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
+  --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-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-v6-c-badge.pf-m-unread {
+  --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
+  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
+  --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-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-v6-c-badge__toggle-icon {
+  margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
+  color: var(--pf-v6-c-badge__toggle-icon--Color);
 }

package/css/components/Badge/badge.d.ts

@@ -1,10 +1,10 @@
 import './badge.css';
 declare const _default: {
-  "badge": "pf-v5-c-badge",
+  "badge": "pf-v6-c-badge",
+  "badgeToggleIcon": "pf-v6-c-badge__toggle-icon",
   "modifiers": {
     "read": "pf-m-read",
     "unread": "pf-m-unread"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };
 export default _default;

package/css/components/Badge/badge.js

@@ -2,10 +2,10 @@
 exports.__esModule = true;
 require('./badge.css');
 exports.default = {
-  "badge": "pf-v5-c-badge",
+  "badge": "pf-v6-c-badge",
+  "badgeToggleIcon": "pf-v6-c-badge__toggle-icon",
   "modifiers": {
     "read": "pf-m-read",
     "unread": "pf-m-unread"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };

package/css/components/Badge/badge.mjs

@@ -1,9 +1,9 @@
 import './badge.css';
 export default {
-  "badge": "pf-v5-c-badge",
+  "badge": "pf-v6-c-badge",
+  "badgeToggleIcon": "pf-v6-c-badge__toggle-icon",
   "modifiers": {
     "read": "pf-m-read",
     "unread": "pf-m-unread"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };

package/css/components/Banner/banner.css

@@ -1,122 +1,148 @@
-.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);
+:where(:root, .pf-v6-c-banner) {
+  --pf-v6-c-banner--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-banner--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-banner--md--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-banner--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-banner--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-banner--md--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-banner--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v6-c-banner--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
+  --pf-v6-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
+  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
+  --pf-v6-c-banner--link--TextDecoration: underline;
+  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
+  --pf-v6-c-banner--link--hover--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v6-c-banner--link--disabled--Color: var(--pf-v6-c-banner--Color);
+  --pf-v6-c-banner--link--disabled--TextDecoration: none;
+  --pf-v6-c-banner--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
+  --pf-v6-c-banner--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --pf-v6-c-banner--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
+  --pf-v6-c-banner--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
+  --pf-v6-c-banner--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
+  --pf-v6-c-banner--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
+  --pf-v6-c-banner--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
+  --pf-v6-c-banner--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
+  --pf-v6-c-banner--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
+  --pf-v6-c-banner--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
+  --pf-v6-c-banner--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
+  --pf-v6-c-banner--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
+  --pf-v6-c-banner--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
+  --pf-v6-c-banner--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
+  --pf-v6-c-banner--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
+  --pf-v6-c-banner--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
+  --pf-v6-c-banner--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
+  --pf-v6-c-banner--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
+  --pf-v6-c-banner--m-gold--BackgroundColor: var(--pf-t--global--color--nonstatus--gold--default);
+  --pf-v6-c-banner--m-gold--Color: var(--pf-t--global--text--color--nonstatus--on-gold--default);
+  --pf-v6-c-banner--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
+  --pf-v6-c-banner--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
+  --pf-v6-c-banner--m-cyan--BackgroundColor: var(--pf-t--global--color--nonstatus--cyan--default);
+  --pf-v6-c-banner--m-cyan--Color: var(--pf-t--global--text--color--nonstatus--on-cyan--default);
+  --pf-v6-c-banner--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
+  --pf-v6-c-banner--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
+  --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
+  --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
 }
-
-.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);
+@media (min-width: 768px) {
+  :where(:root, .pf-v6-c-banner) {
+    --pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd);
+    --pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart);
+  }
 }
 
-.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);
-  --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--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-v6-c-banner {
   flex-shrink: 0;
-  padding-block-start: var(--pf-v5-c-banner--PaddingTop);
-  padding-block-end: var(--pf-v5-c-banner--PaddingBottom);
-  padding-inline-start: var(--pf-v5-c-banner--PaddingLeft);
-  padding-inline-end: var(--pf-v5-c-banner--PaddingRight);
-  font-size: var(--pf-v5-c-banner--FontSize);
-  color: var(--pf-v5-c-banner--Color);
+  padding-block-start: var(--pf-v6-c-banner--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-banner--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-banner--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-banner--PaddingInlineEnd);
+  font-size: var(--pf-v6-c-banner--FontSize);
+  color: var(--pf-v6-c-banner--Color);
   white-space: nowrap;
-  background-color: var(--pf-v5-c-banner--BackgroundColor);
+  background-color: var(--pf-v6-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-v6-c-banner.pf-m-danger {
+  --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-danger--BackgroundColor);
+  --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-danger--Color);
+}
+.pf-v6-c-banner.pf-m-success {
+  --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-success--BackgroundColor);
+  --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-success--Color);
+}
+.pf-v6-c-banner.pf-m-warning {
+  --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-warning--BackgroundColor);
+  --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-warning--Color);
+}
+.pf-v6-c-banner.pf-m-info {
+  --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-info--BackgroundColor);
+  --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-info--Color);
 }
-.pf-v5-c-banner.pf-m-blue {
-  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-blue--BackgroundColor);
+.pf-v6-c-banner.pf-m-custom {
+  --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-custom--BackgroundColor);
+  --pf-v6-c-banner--Color: var(--pf-v6-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-v6-c-banner.pf-m-red {
+  --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-red--BackgroundColor);
+  --pf-v6-c-banner--Color: var(--pf-v6-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-v6-c-banner.pf-m-orangered {
+  --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-orangered--BackgroundColor);
+  --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-orangered--Color);
 }
-.pf-v5-c-banner.pf-m-gold {
-  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-gold--BackgroundColor);
+.pf-v6-c-banner.pf-m-orange {
+  --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-orange--BackgroundColor);
+  --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-orange--Color);
 }
-.pf-v5-c-banner.pf-m-sticky {
+.pf-v6-c-banner.pf-m-gold {
+  --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-gold--BackgroundColor);
+  --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-gold--Color);
+}
+.pf-v6-c-banner.pf-m-green {
+  --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-green--BackgroundColor);
+  --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-green--Color);
+}
+.pf-v6-c-banner.pf-m-cyan {
+  --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-cyan--BackgroundColor);
+  --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-cyan--Color);
+}
+.pf-v6-c-banner.pf-m-blue {
+  --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-blue--BackgroundColor);
+  --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-blue--Color);
+}
+.pf-v6-c-banner.pf-m-purple {
+  --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-purple--BackgroundColor);
+  --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-purple--Color);
+}
+.pf-v6-c-banner.pf-m-sticky {
   position: sticky;
   inset-block-start: 0;
-  z-index: var(--pf-v5-c-banner--m-sticky--ZIndex);
-  box-shadow: var(--pf-v5-c-banner--m-sticky--BoxShadow);
+  z-index: var(--pf-v6-c-banner--m-sticky--ZIndex);
+  box-shadow: var(--pf-v6-c-banner--m-sticky--BoxShadow);
 }
-.pf-v5-c-banner a {
-  color: var(--pf-v5-c-banner--link--Color);
-  text-decoration: var(--pf-v5-c-banner--link--TextDecoration);
+.pf-v6-c-banner a {
+  color: var(--pf-v6-c-banner--link--Color);
+  text-decoration: var(--pf-v6-c-banner--link--TextDecoration);
 }
-.pf-v5-c-banner a:hover:not(.pf-m-disabled) {
-  --pf-v5-c-banner--link--Color: var(--pf-v5-c-banner--link--hover--Color);
-  font-weight: var(--pf-v5-c-banner--link--hover--FontWeight);
+.pf-v6-c-banner a:hover:not(.pf-m-disabled) {
+  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
+  font-weight: var(--pf-v6-c-banner--link--hover--FontWeight);
 }
-.pf-v5-c-banner a.pf-m-disabled {
-  --pf-v5-c-banner--link--Color: var(--pf-v5-c-banner--link--disabled--Color);
-  --pf-v5-c-banner--link--TextDecoration: var(--pf-v5-c-banner--link--disabled--TextDecoration);
+.pf-v6-c-banner a.pf-m-disabled {
+  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--disabled--Color);
+  --pf-v6-c-banner--link--TextDecoration: var(--pf-v6-c-banner--link--disabled--TextDecoration);
   cursor: not-allowed;
 }
-.pf-v5-c-banner .pf-v5-c-button.pf-m-inline {
-  --pf-v5-c-button--m-link--Color: var(--pf-v5-c-banner--link--Color);
-  --pf-v5-c-button--m-link--m-inline--hover--Color: var(--pf-v5-c-banner--link--hover--Color);
-  --pf-v5-c-button--disabled--Color: var(--pf-v5-c-banner--link--disabled--Color);
-  text-decoration: var(--pf-v5-c-banner--link--TextDecoration);
+.pf-v6-c-banner .pf-v6-c-button.pf-m-inline {
+  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-banner--link--Color);
+  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
+  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
+  text-decoration: var(--pf-v6-c-banner--link--TextDecoration);
 }
-.pf-v5-c-banner .pf-v5-c-button.pf-m-inline:hover {
-  --pf-v5-c-banner--link--Color: var(--pf-v5-c-banner--link--hover--Color);
-  font-weight: var(--pf-v5-c-banner--link--hover--FontWeight);
+.pf-v6-c-banner .pf-v6-c-button.pf-m-inline:hover {
+  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
+  font-weight: var(--pf-v6-c-banner--link--hover--FontWeight);
 }
-.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);
+.pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled, .pf-v6-c-banner .pf-v6-c-button.pf-m-inline.pf-m-disabled {
+  --pf-v6-c-banner--link--TextDecoration: var(--pf-v6-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/css/components/Banner/banner.d.ts

@@ -1,16 +1,24 @@
 import './banner.css';
 declare const _default: {
-  "banner": "pf-v5-c-banner",
-  "button": "pf-v5-c-button",
+  "banner": "pf-v6-c-banner",
+  "button": "pf-v6-c-button",
   "modifiers": {
-    "gold": "pf-m-gold",
-    "blue": "pf-m-blue",
+    "danger": "pf-m-danger",
+    "success": "pf-m-success",
+    "warning": "pf-m-warning",
+    "info": "pf-m-info",
+    "custom": "pf-m-custom",
     "red": "pf-m-red",
+    "orangered": "pf-m-orangered",
+    "orange": "pf-m-orange",
+    "gold": "pf-m-gold",
     "green": "pf-m-green",
+    "cyan": "pf-m-cyan",
+    "blue": "pf-m-blue",
+    "purple": "pf-m-purple",
     "sticky": "pf-m-sticky",
     "disabled": "pf-m-disabled",
     "inline": "pf-m-inline"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };
 export default _default;

package/css/components/Banner/banner.js

@@ -2,16 +2,24 @@
 exports.__esModule = true;
 require('./banner.css');
 exports.default = {
-  "banner": "pf-v5-c-banner",
-  "button": "pf-v5-c-button",
+  "banner": "pf-v6-c-banner",
+  "button": "pf-v6-c-button",
   "modifiers": {
-    "gold": "pf-m-gold",
-    "blue": "pf-m-blue",
+    "danger": "pf-m-danger",
+    "success": "pf-m-success",
+    "warning": "pf-m-warning",
+    "info": "pf-m-info",
+    "custom": "pf-m-custom",
     "red": "pf-m-red",
+    "orangered": "pf-m-orangered",
+    "orange": "pf-m-orange",
+    "gold": "pf-m-gold",
     "green": "pf-m-green",
+    "cyan": "pf-m-cyan",
+    "blue": "pf-m-blue",
+    "purple": "pf-m-purple",
     "sticky": "pf-m-sticky",
     "disabled": "pf-m-disabled",
     "inline": "pf-m-inline"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };

package/css/components/Banner/banner.mjs

@@ -1,15 +1,23 @@
 import './banner.css';
 export default {
-  "banner": "pf-v5-c-banner",
-  "button": "pf-v5-c-button",
+  "banner": "pf-v6-c-banner",
+  "button": "pf-v6-c-button",
   "modifiers": {
-    "gold": "pf-m-gold",
-    "blue": "pf-m-blue",
+    "danger": "pf-m-danger",
+    "success": "pf-m-success",
+    "warning": "pf-m-warning",
+    "info": "pf-m-info",
+    "custom": "pf-m-custom",
     "red": "pf-m-red",
+    "orangered": "pf-m-orangered",
+    "orange": "pf-m-orange",
+    "gold": "pf-m-gold",
     "green": "pf-m-green",
+    "cyan": "pf-m-cyan",
+    "blue": "pf-m-blue",
+    "purple": "pf-m-purple",
     "sticky": "pf-m-sticky",
     "disabled": "pf-m-disabled",
     "inline": "pf-m-inline"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };

package/css/components/Brand/brand.css

@@ -1,62 +1,62 @@
-.pf-v5-c-brand {
-  --pf-v5-c-brand--Width: auto;
-  --pf-v5-c-brand--Height: auto;
-  width: var(--pf-v5-c-brand--Width--base);
-  height: var(--pf-v5-c-brand--Height--base);
-  --pf-v5-c-brand--Width--base: var(--pf-v5-c-brand--Width);
-  --pf-v5-c-brand--Height--base: var(--pf-v5-c-brand--Height);
+.pf-v6-c-brand {
+  --pf-v6-c-brand--Width: auto;
+  --pf-v6-c-brand--Height: auto;
+  width: var(--pf-v6-c-brand--Width--base);
+  height: var(--pf-v6-c-brand--Height--base);
+  --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width);
+  --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height);
 }
 @media (min-width: 576px) {
-  .pf-v5-c-brand {
-    --pf-v5-c-brand--Width--base: var(--pf-v5-c-brand--Width-on-sm, var(--pf-v5-c-brand--Width));
+  .pf-v6-c-brand {
+    --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width));
   }
 }
 @media (min-width: 768px) {
-  .pf-v5-c-brand {
-    --pf-v5-c-brand--Width--base: var(--pf-v5-c-brand--Width-on-md, var(--pf-v5-c-brand--Width-on-sm, var(--pf-v5-c-brand--Width)));
+  .pf-v6-c-brand {
+    --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width)));
   }
 }
 @media (min-width: 992px) {
-  .pf-v5-c-brand {
-    --pf-v5-c-brand--Width--base: var(--pf-v5-c-brand--Width-on-lg, var(--pf-v5-c-brand--Width-on-md, var(--pf-v5-c-brand--Width-on-sm, var(--pf-v5-c-brand--Width))));
+  .pf-v6-c-brand {
+    --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))));
   }
 }
 @media (min-width: 1200px) {
-  .pf-v5-c-brand {
-    --pf-v5-c-brand--Width--base: var(--pf-v5-c-brand--Width-on-xl, var(--pf-v5-c-brand--Width-on-lg, var(--pf-v5-c-brand--Width-on-md, var(--pf-v5-c-brand--Width-on-sm, var(--pf-v5-c-brand--Width)))));
+  .pf-v6-c-brand {
+    --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width)))));
   }
 }
 @media (min-width: 1450px) {
-  .pf-v5-c-brand {
-    --pf-v5-c-brand--Width--base: var(--pf-v5-c-brand--Width-on-2xl, var(--pf-v5-c-brand--Width-on-xl, var(--pf-v5-c-brand--Width-on-lg, var(--pf-v5-c-brand--Width-on-md, var(--pf-v5-c-brand--Width-on-sm, var(--pf-v5-c-brand--Width))))));
+  .pf-v6-c-brand {
+    --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-2xl, var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))))));
   }
 }
 @media (min-width: 576px) {
-  .pf-v5-c-brand {
-    --pf-v5-c-brand--Height--base: var(--pf-v5-c-brand--Height-on-sm, var(--pf-v5-c-brand--Height));
+  .pf-v6-c-brand {
+    --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height));
   }
 }
 @media (min-width: 768px) {
-  .pf-v5-c-brand {
-    --pf-v5-c-brand--Height--base: var(--pf-v5-c-brand--Height-on-md, var(--pf-v5-c-brand--Height-on-sm, var(--pf-v5-c-brand--Height)));
+  .pf-v6-c-brand {
+    --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height)));
   }
 }
 @media (min-width: 992px) {
-  .pf-v5-c-brand {
-    --pf-v5-c-brand--Height--base: var(--pf-v5-c-brand--Height-on-lg, var(--pf-v5-c-brand--Height-on-md, var(--pf-v5-c-brand--Height-on-sm, var(--pf-v5-c-brand--Height))));
+  .pf-v6-c-brand {
+    --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height))));
   }
 }
 @media (min-width: 1200px) {
-  .pf-v5-c-brand {
-    --pf-v5-c-brand--Height--base: var(--pf-v5-c-brand--Height-on-xl, var(--pf-v5-c-brand--Height-on-lg, var(--pf-v5-c-brand--Height-on-md, var(--pf-v5-c-brand--Height-on-sm, var(--pf-v5-c-brand--Height)))));
+  .pf-v6-c-brand {
+    --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-xl, var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height)))));
   }
 }
 @media (min-width: 1450px) {
-  .pf-v5-c-brand {
-    --pf-v5-c-brand--Height--base: var(--pf-v5-c-brand--Height-on-2xl, var(--pf-v5-c-brand--Height-on-xl, var(--pf-v5-c-brand--Height-on-lg, var(--pf-v5-c-brand--Height-on-md, var(--pf-v5-c-brand--Height-on-sm, var(--pf-v5-c-brand--Height))))));
+  .pf-v6-c-brand {
+    --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-2xl, var(--pf-v6-c-brand--Height-on-xl, var(--pf-v6-c-brand--Height-on-lg, var(--pf-v6-c-brand--Height-on-md, var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height))))));
   }
 }
-.pf-v5-c-brand.pf-m-picture {
+.pf-v6-c-brand.pf-m-picture {
   display: inline-flex;
   max-width: 100%;
 }

package/css/components/Brand/brand.d.ts

@@ -1,6 +1,6 @@
 import './brand.css';
 declare const _default: {
-  "brand": "pf-v5-c-brand",
+  "brand": "pf-v6-c-brand",
   "modifiers": {
     "picture": "pf-m-picture"
   }

package/css/components/Brand/brand.js

@@ -2,7 +2,7 @@
 exports.__esModule = true;
 require('./brand.css');
 exports.default = {
-  "brand": "pf-v5-c-brand",
+  "brand": "pf-v6-c-brand",
   "modifiers": {
     "picture": "pf-m-picture"
   }

package/css/components/Brand/brand.mjs

@@ -1,6 +1,6 @@
 import './brand.css';
 export default {
-  "brand": "pf-v5-c-brand",
+  "brand": "pf-v6-c-brand",
   "modifiers": {
     "picture": "pf-m-picture"
   }