@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

package/components/Backdrop/backdrop.scss

@@ -1,9 +1,8 @@
-// @debug $backdrop; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$backdrop} {
+@include pf-root($backdrop) {
   --#{$backdrop}--Position: fixed;
-  --#{$backdrop}--ZIndex: var(--pf-t--global--Zindex--lg);
+  --#{$backdrop}--ZIndex: var(--pf-t--global--z-index--lg);
   --#{$backdrop}--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
 }
 

package/components/BackgroundImage/background-image.scss

@@ -1,7 +1,6 @@
-// @debug $background-image; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$background-image} {
+@include pf-root($background-image) {
   --#{$background-image}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$background-image}--BackgroundImage: none;
   --#{$background-image}--BackgroundSize--min-width: 200px;
@@ -12,7 +11,7 @@
 }
 
 .#{$background-image} {
-  @include pf-v5-bidirectional-style(
+  @include pf-v6-bidirectional-style(
     $prop: --#{$background-image}--BackgroundPosition,
     $ltr-val: bottom right,
     $rtl-val: bottom left

package/components/Badge/badge.css

@@ -1,12 +1,15 @@
-:root {
+:root,
+.pf-v6-c-badge {
+  --pf-v6-c-badge--BorderColor: transparent;
+  --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
   --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--PaddingRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-badge--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --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--MarginLeft: var(--pf-t--global--spacer--xs);
+  --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);
@@ -14,13 +17,17 @@
   --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--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
+  --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
+  --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
 }
 
 .pf-v6-c-badge {
+  position: relative;
   display: inline-block;
   min-width: var(--pf-v6-c-badge--MinWidth);
-  padding-inline-start: var(--pf-v6-c-badge--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-badge--PaddingRight);
+  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);
@@ -29,6 +36,14 @@
   background-color: var(--pf-v6-c-badge--BackgroundColor);
   border-radius: var(--pf-v6-c-badge--BorderRadius);
 }
+.pf-v6-c-badge::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
+  border-radius: inherit;
+}
 .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);
@@ -39,8 +54,15 @@
   --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);
 }
+.pf-v6-c-badge.pf-m-disabled {
+  --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
+  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
+}
+.pf-v6-c-badge.pf-m-disabled::after {
+  border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
+}
 
 .pf-v6-c-badge__toggle-icon {
-  margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginLeft);
+  margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
   color: var(--pf-v6-c-badge__toggle-icon--Color);
 }

package/components/Badge/badge.scss

@@ -1,17 +1,19 @@
-// @debug $badge; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root {
+@include pf-root($badge) {
   // Component
+  --#{$badge}--BorderColor: transparent;
+  --#{$badge}--BorderWidth: var(--pf-t--global--border--width--regular);
   --#{$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}--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --#{$badge}--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$badge}--PaddingInlineStart: 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--MarginInlineStart: var(--pf-t--global--spacer--xs);
   --#{$badge}__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
 
   // Modifiers
@@ -21,13 +23,17 @@
   --#{$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}--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
+  --#{$badge}--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
+  --#{$badge}--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
 }
 
 .#{$badge} {
+  position: relative;
   display: inline-block;
   min-width: var(--#{$badge}--MinWidth);
-  padding-inline-start: var(--#{$badge}--PaddingLeft);
-  padding-inline-end: var(--#{$badge}--PaddingRight);
+  padding-inline-start: var(--#{$badge}--PaddingInlineStart);
+  padding-inline-end: var(--#{$badge}--PaddingInlineEnd);
   font-size: var(--#{$badge}--FontSize);
   font-weight: var(--#{$badge}--FontWeight);
   color: var(--#{$badge}--Color);
@@ -36,6 +42,15 @@
   background-color: var(--#{$badge}--BackgroundColor);
   border-radius: var(--#{$badge}--BorderRadius);
 
+  &::after {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    content: "";
+    border: var(--#{$badge}--BorderWidth) solid var(--#{$badge}--BorderColor);
+    border-radius: inherit;
+  }
+
   &.pf-m-read {
     --#{$badge}--Color: var(--#{$badge}--m-read--Color);
     --#{$badge}--BackgroundColor: var(--#{$badge}--m-read--BackgroundColor);
@@ -47,9 +62,18 @@
     --#{$badge}--BackgroundColor: var(--#{$badge}--m-unread--BackgroundColor);
     --#{$badge}__toggle-icon--Color: var(--#{$badge}--m-unread__toggle-icon--Color);
   }
+
+  &.pf-m-disabled {
+    --#{$badge}--Color: var(--#{$badge}--m-disabled--Color);
+    --#{$badge}--BackgroundColor: var(--#{$badge}--m-disabled--BackgroundColor);
+
+    &::after {
+      border-color: var(--#{$badge}--m-disabled--BorderColor);
+    }
+  }
 }
 
 .#{$badge}__toggle-icon {
-  margin-inline-start: var(--#{$badge}__toggle-icon--MarginLeft);
+  margin-inline-start: var(--#{$badge}__toggle-icon--MarginInlineStart);
   color: var(--#{$badge}__toggle-icon--Color);
 }

package/components/Banner/banner.css

@@ -1,20 +1,19 @@
-:root {
-  --pf-v6-c-banner--PaddingTop: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-banner--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-banner--md--PaddingRight: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-banner--PaddingBottom: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-banner--PaddingLeft: var(--pf-t--global--spacer--md);
-  --pf-v6-c-banner--md--PaddingLeft: var(--pf-t--global--spacer--lg);
+: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-v6-global--ZIndex--md);
+  --pf-v6-c-banner--link--disabled--Color: var(--pf-t--global--text--color--disabled);
+  --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);
@@ -32,30 +31,31 @@
   --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-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
+  --pf-v6-c-banner--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--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-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
+  --pf-v6-c-banner--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--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);
 }
-@media (min-width: 768px) {
-  :root {
-    --pf-v6-c-banner--PaddingRight: var(--pf-v6-c-banner--md--PaddingRight);
-    --pf-v6-c-banner--PaddingLeft: var(--pf-v6-c-banner--md--PaddingLeft);
+@media (min-width: 48rem) {
+  :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-v6-c-banner {
   flex-shrink: 0;
-  padding-block-start: var(--pf-v6-c-banner--PaddingTop);
-  padding-block-end: var(--pf-v6-c-banner--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-banner--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-banner--PaddingRight);
+  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;
@@ -93,17 +93,17 @@
   --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-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-yellow {
+  --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-yellow--BackgroundColor);
+  --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-yellow--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-teal {
+  --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-teal--BackgroundColor);
+  --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-teal--Color);
 }
 .pf-v6-c-banner.pf-m-blue {
   --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-blue--BackgroundColor);
@@ -125,24 +125,17 @@
 }
 .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-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-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--m-link--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-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-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;
 }

package/components/Banner/banner.scss

@@ -1,31 +1,29 @@
-// @debug $banner; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-
-: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);
+@use '../../sass-utilities' as *;
+
+@include pf-root($banner) {
+  --#{$banner}--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --#{$banner}--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$banner}--md--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$banner}--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --#{$banner}--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --#{$banner}--md--PaddingInlineStart: 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);
-    --#{$banner}--PaddingLeft: var(--#{$banner}--md--PaddingLeft);
+  @media (min-width: $pf-v6-global--breakpoint--md) {
+    --#{$banner}--PaddingInlineEnd: var(--#{$banner}--md--PaddingInlineEnd);
+    --#{$banner}--PaddingInlineStart: var(--#{$banner}--md--PaddingInlineStart);
   }
 
   // banner link variables
   --#{$banner}--link--Color: var(--#{$banner}--Color);
   --#{$banner}--link--TextDecoration: underline;
   --#{$banner}--link--hover--Color: var(--#{$banner}--Color);
-  --#{$banner}--link--hover--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --#{$banner}--link--disabled--Color: var(--#{$banner}--Color);
-  --#{$banner}--link--disabled--TextDecoration: none;
+  --#{$banner}--link--disabled--Color: var(--pf-t--global--text--color--disabled);
 
   // modifier variables
-  --#{$banner}--m-sticky--ZIndex: var(--#{$pf-global}--ZIndex--md);
+  --#{$banner}--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
   --#{$banner}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
 
   // status modifier variables
@@ -47,12 +45,12 @@
   --#{$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-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
+  --#{$banner}--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--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-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
+  --#{$banner}--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--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);
@@ -61,10 +59,10 @@
 
 .#{$banner} {
   flex-shrink: 0;
-  padding-block-start: var(--#{$banner}--PaddingTop);
-  padding-block-end: var(--#{$banner}--PaddingBottom);
-  padding-inline-start: var(--#{$banner}--PaddingLeft);
-  padding-inline-end: var(--#{$banner}--PaddingRight);
+  padding-block-start: var(--#{$banner}--PaddingBlockStart);
+  padding-block-end: var(--#{$banner}--PaddingBlockEnd);
+  padding-inline-start: var(--#{$banner}--PaddingInlineStart);
+  padding-inline-end: var(--#{$banner}--PaddingInlineEnd);
   font-size: var(--#{$banner}--FontSize);
   color: var(--#{$banner}--Color);
   white-space: nowrap;
@@ -99,7 +97,7 @@
     --#{$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);
@@ -110,9 +108,9 @@
     --#{$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-yellow {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-yellow--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-yellow--Color);
   }
 
   &.pf-m-green {
@@ -120,9 +118,9 @@
     --#{$banner}--Color: var(--#{$banner}--m-green--Color);
   }
 
-  &.pf-m-cyan {
-    --#{$banner}--BackgroundColor: var(--#{$banner}--m-cyan--BackgroundColor);
-    --#{$banner}--Color: var(--#{$banner}--m-cyan--Color);
+  &.pf-m-teal {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-teal--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-teal--Color);
   }
 
   &.pf-m-blue {
@@ -148,14 +146,11 @@
 
     &:hover:not(.pf-m-disabled) {
       --#{$banner}--link--Color: var(--#{$banner}--link--hover--Color);
-
-      font-weight: var(--#{$banner}--link--hover--FontWeight);
     }
 
     // stylelint-disable selector-no-qualifying-type
     &.pf-m-disabled {
       --#{$banner}--link--Color: var(--#{$banner}--link--disabled--Color);
-      --#{$banner}--link--TextDecoration: var(--#{$banner}--link--disabled--TextDecoration);
 
       cursor: not-allowed;
     }
@@ -164,21 +159,13 @@
 
   .#{$button}.pf-m-inline {
     --#{$button}--m-link--Color: var(--#{$banner}--link--Color);
-    --#{$button}--m-link--m-inline--hover--Color: var(--#{$banner}--link--hover--Color);
+    --#{$button}--m-link--hover--Color: var(--#{$banner}--link--hover--Color);
     --#{$button}--disabled--Color: var(--#{$banner}--link--disabled--Color);
 
     text-decoration: var(--#{$banner}--link--TextDecoration);
 
-    &:hover {
-      --#{$banner}--link--Color: var(--#{$banner}--link--hover--Color);
-
-      font-weight: var(--#{$banner}--link--hover--FontWeight);
-    }
-
     &:disabled,
     &.pf-m-disabled {
-      --#{$banner}--link--TextDecoration: var(--#{$banner}--link--disabled--TextDecoration);
-
       cursor: not-allowed;
     }
   }

package/components/Brand/brand.css

@@ -1,57 +1,61 @@
+:root,
 .pf-v6-c-brand {
   --pf-v6-c-brand--Width: auto;
   --pf-v6-c-brand--Height: auto;
+}
+
+.pf-v6-c-brand {
   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) {
+@media (min-width: 36rem) {
   .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) {
+@media (min-width: 48rem) {
   .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) {
+@media (min-width: 62rem) {
   .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) {
+@media (min-width: 75rem) {
   .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) {
+@media (min-width: 90.625rem) {
   .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) {
+@media (min-width: 36rem) {
   .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) {
+@media (min-width: 48rem) {
   .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) {
+@media (min-width: 62rem) {
   .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) {
+@media (min-width: 75rem) {
   .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) {
+@media (min-width: 90.625rem) {
   .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))))));
   }

package/components/Brand/brand.scss

@@ -1,15 +1,18 @@
-// @debug $brand; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-brand--breakpoint-map: build-breakpoint-map();
+@use '../../sass-utilities' as *;
 
-.#{$brand} {
+$pf-v6-c-brand--breakpoint-map: build-breakpoint-map();
+
+@include pf-root($brand) {
   --#{$brand}--Width: auto;
   --#{$brand}--Height: auto;
+}
 
+.#{$brand} {
   width: var(--#{$brand}--Width--base);
   height: var(--#{$brand}--Height--base);
 
-  @include pf-v5-build-css-variable-stack("--#{$brand}--Width--base", "--#{$brand}--Width", $pf-v5-c-brand--breakpoint-map);
-  @include pf-v5-build-css-variable-stack("--#{$brand}--Height--base", "--#{$brand}--Height", $pf-v5-c-brand--breakpoint-map);
+  @include pf-v6-build-css-variable-stack("--#{$brand}--Width--base", "--#{$brand}--Width", $pf-v6-c-brand--breakpoint-map);
+  @include pf-v6-build-css-variable-stack("--#{$brand}--Height--base", "--#{$brand}--Height", $pf-v6-c-brand--breakpoint-map);
 
   &.pf-m-picture {
     display: inline-flex;

package/components/Breadcrumb/breadcrumb.css

@@ -1,25 +1,26 @@
-:where(:root),
-:where(.pf-v6-c-breadcrumb) {
+:root,
+.pf-v6-c-breadcrumb {
   --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
-  --pf-v6-c-breadcrumb__item--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
-  --pf-v6-c-breadcrumb__item-divider--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
   --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
-  --pf-v6-c-breadcrumb__link--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
+  --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
   --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
-  --pf-v6-c-breadcrumb__link--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
+  --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
+  --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
   --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
   --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
-  --pf-v6-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
-  --pf-v6-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-v6-c-breadcrumb__item--MarginRight) * -1);
-  --pf-v6-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1);
-  --pf-v6-c-breadcrumb__dropdown--MarginLeft: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginRight) * -1);
-  --pf-v6-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
 }
 
 .pf-v6-c-breadcrumb {
@@ -45,11 +46,11 @@
   --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
 }
 .pf-v6-c-breadcrumb__item:not(:last-child) {
-  margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginRight);
+  margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
 }
 
 .pf-v6-c-breadcrumb__item-divider {
-  margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginRight);
+  margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
   font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
   line-height: 1;
   color: var(--pf-v6-c-breadcrumb__item-divider--Color);
@@ -65,18 +66,19 @@
   font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
   line-height: inherit;
   color: var(--pf-v6-c-breadcrumb__link--Color);
-  text-decoration: var(--pf-v6-c-breadcrumb__link--TextDecoration);
+  text-decoration: var(--pf-v6-c-breadcrumb__link--TextDecorationLine) var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
   word-break: break-word;
   background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
 }
-.pf-v6-c-breadcrumb__link:hover {
+.pf-v6-c-breadcrumb__link:is(:hover, :focus) {
   --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
-  --pf-v6-c-breadcrumb__link--TextDecoration: var(--pf-v6-c-breadcrumb__link--hover--TextDecoration);
+  --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
+  --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
 }
 .pf-v6-c-breadcrumb__link.pf-m-current {
   cursor: default;
 }
-.pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:hover {
+.pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
   color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
   text-decoration: none;
 }
@@ -85,13 +87,10 @@ button.pf-v6-c-breadcrumb__link {
 }
 
 .pf-v6-c-breadcrumb__dropdown {
-  margin-block-start: var(--pf-v6-c-breadcrumb__dropdown--MarginTop);
-  margin-block-end: var(--pf-v6-c-breadcrumb__dropdown--MarginBottom);
-  margin-inline-start: var(--pf-v6-c-breadcrumb__dropdown--MarginLeft);
-  margin-inline-end: var(--pf-v6-c-breadcrumb__dropdown--MarginRight);
-}
-.pf-v6-c-breadcrumb__dropdown .pf-v6-c-dropdown__toggle {
-  line-height: var(--pf-v6-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight);
+  margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
+  margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
+  margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
 }
 
 .pf-v6-c-breadcrumb__heading {