@patternfly/patternfly 6.3.0-prerelease.52 → 6.3.0-prerelease.54

package/base/tokens/tokens-local.scss

@@ -123,4 +123,43 @@
 
   // stylelint-disable custom-property-pattern
   --pf-t--temp--dev--tbd: #BC11E0;
+
+  // High contrast custom tokens - placeholders until they're in figma
+  --pf-t--global--high-contrast--border--width--action--clicked: 0;
+  --pf-t--global--high-contrast--border--width--action--default: 0;
+  --pf-t--global--high-contrast--border--width--action--hover: 0;
+  --pf-t--global--high-contrast--border--width--box--clicked: 0;
+  --pf-t--global--high-contrast--border--width--box--default: 0;
+  --pf-t--global--high-contrast--border--width--box--hover: 0;
+  --pf-t--global--high-contrast--border--width--box--status--default: 0;
+  --pf-t--global--high-contrast--border--width--box--status--read: 0;
+  --pf-t--global--high-contrast--border--width--control--clicked: 0;
+  --pf-t--global--high-contrast--border--width--control--default: 0;
+  --pf-t--global--high-contrast--border--width--control--hover: 0;
+  --pf-t--global--high-contrast--border--width--divider--clicked: 0;
+  --pf-t--global--high-contrast--border--width--divider--default: 0;
+  --pf-t--global--high-contrast--border--width--divider--hover: 0;
+  --pf-t--global--high-contrast--border--width--extra-strong: 0;
+  --pf-t--global--high-contrast--border--width--regular: 0;
+  --pf-t--global--high-contrast--border--width--strong: 0;
+
+  &:where(.pf-v6-theme-high-contrast) {
+    --pf-t--global--high-contrast--border--width--action--clicked: var(--pf-t--global--border--width--action--clicked);
+    --pf-t--global--high-contrast--border--width--action--default: var(--pf-t--global--border--width--action--default);
+    --pf-t--global--high-contrast--border--width--action--hover: var(--pf-t--global--border--width--action--hover);
+    --pf-t--global--high-contrast--border--width--box--clicked: var(--pf-t--global--border--width--box--clicked);
+    --pf-t--global--high-contrast--border--width--box--default: var(--pf-t--global--border--width--box--default);
+    --pf-t--global--high-contrast--border--width--box--hover: var(--pf-t--global--border--width--box--hover);
+    --pf-t--global--high-contrast--border--width--box--status--default: var(--pf-t--global--border--width--box--status--default);
+    --pf-t--global--high-contrast--border--width--box--status--read: var(--pf-t--global--border--width--box--status--read);
+    --pf-t--global--high-contrast--border--width--control--clicked: var(--pf-t--global--border--width--control--clicked);
+    --pf-t--global--high-contrast--border--width--control--default: var(--pf-t--global--border--width--control--default);
+    --pf-t--global--high-contrast--border--width--control--hover: var(--pf-t--global--border--width--control--hover);
+    --pf-t--global--high-contrast--border--width--divider--clicked: var(--pf-t--global--border--width--divider--clicked);
+    --pf-t--global--high-contrast--border--width--divider--default: var(--pf-t--global--border--width--divider--default);
+    --pf-t--global--high-contrast--border--width--divider--hover: var(--pf-t--global--border--width--divider--hover);
+    --pf-t--global--high-contrast--border--width--extra-strong: var(--pf-t--global--border--width--extra-strong);
+    --pf-t--global--high-contrast--border--width--regular: var(--pf-t--global--border--width--regular);
+    --pf-t--global--high-contrast--border--width--strong: var(--pf-t--global--border--width--strong);
+  }
 }

package/base/tokens/tokens-palette.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 23 Sep 2024 22:48:17 GMT
+// Generated on Tue, 02 Sep 2025 22:55:03 GMT
 
 @mixin pf-v6-tokens {
   --pf-t--color--black: #000000;
@@ -11,6 +11,7 @@
   --pf-t--color--blue--50: #0066cc;
   --pf-t--color--blue--60: #004d99;
   --pf-t--color--blue--70: #003366;
+  --pf-t--color--blue--80: #032142;
   --pf-t--color--gray--10: #f2f2f2;
   --pf-t--color--gray--20: #e0e0e0;
   --pf-t--color--gray--30: #c7c7c7;
@@ -28,6 +29,7 @@
   --pf-t--color--green--50: #63993d;
   --pf-t--color--green--60: #3d7317;
   --pf-t--color--green--70: #204d00;
+  --pf-t--color--green--80: #183301;
   --pf-t--color--orange--10: #ffe8cc;
   --pf-t--color--orange--20: #fccb8f;
   --pf-t--color--orange--30: #f8ae54;
@@ -35,6 +37,7 @@
   --pf-t--color--orange--50: #ca6c0f;
   --pf-t--color--orange--60: #9e4a06;
   --pf-t--color--orange--70: #732e00;
+  --pf-t--color--orange--80: #4d1f00;
   --pf-t--color--purple--10: #ece6ff;
   --pf-t--color--purple--20: #d0c5f4;
   --pf-t--color--purple--30: #b6a6e9;
@@ -42,6 +45,7 @@
   --pf-t--color--purple--50: #5e40be;
   --pf-t--color--purple--60: #3d2785;
   --pf-t--color--purple--70: #21134d;
+  --pf-t--color--purple--80: #1b0d33;
   --pf-t--color--red--10: #fce3e3;
   --pf-t--color--red--20: #fbc5c5;
   --pf-t--color--red--30: #f9a8a8;
@@ -49,6 +53,7 @@
   --pf-t--color--red--50: #ee0000;
   --pf-t--color--red--60: #a60000;
   --pf-t--color--red--70: #5f0000;
+  --pf-t--color--red--80: #3f0000;
   --pf-t--color--red-orange--10: #ffe3d9;
   --pf-t--color--red-orange--20: #fbbea8;
   --pf-t--color--red-orange--30: #f89b78;
@@ -56,6 +61,7 @@
   --pf-t--color--red-orange--50: #f0561d;
   --pf-t--color--red-orange--60: #b1380b;
   --pf-t--color--red-orange--70: #731f00;
+  --pf-t--color--red-orange--80: #4c1405;
   --pf-t--color--teal--10: #daf2f2;
   --pf-t--color--teal--20: #b9e5e5;
   --pf-t--color--teal--30: #9ad8d8;
@@ -63,6 +69,7 @@
   --pf-t--color--teal--50: #37a3a3;
   --pf-t--color--teal--60: #147878;
   --pf-t--color--teal--70: #004d4d;
+  --pf-t--color--teal--80: #003333;
   --pf-t--color--white: #ffffff;
   --pf-t--color--yellow--10: #fff4cc;
   --pf-t--color--yellow--20: #ffe072;
@@ -71,4 +78,5 @@
   --pf-t--color--yellow--50: #b98412;
   --pf-t--color--yellow--60: #96640f;
   --pf-t--color--yellow--70: #73480b;
+  --pf-t--color--yellow--80: #54330b;
 }

package/components/Accordion/accordion.css

@@ -13,6 +13,9 @@
   --pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --pf-v6-c-accordion__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-accordion__toggle--ZIndex: var(--pf-t--global--z-index--xs);
+  --pf-v6-c-accordion__toggle--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
+  --pf-v6-c-accordion__toggle--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-accordion__toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
   --pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-accordion__toggle-text--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -73,6 +76,11 @@
   --pf-v6-c-accordion--m-bordered--RowGap: 0;
   --pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-accordion__item--BorderWidth: 0;
+  --pf-v6-c-accordion__item--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-accordion__item--m-expanded--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
+  --pf-v6-c-accordion__expandable-content--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
+  --pf-v6-c-accordion__expandable-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
 }
 @media screen and (prefers-reduced-motion: no-preference) {
   .pf-v6-c-accordion {
@@ -111,6 +119,7 @@
   --pf-v6-c-accordion--RowGap: var(--pf-v6-c-accordion--m-bordered--RowGap);
   --pf-v6-c-accordion__item--BorderRadius: 0;
   --pf-v6-c-accordion__toggle--BorderRadius: 0;
+  --pf-v6-c-accordion__item--BorderWidth: 0;
 }
 .pf-v6-c-accordion.pf-m-bordered .pf-v6-c-accordion__item {
   border-block-end: var(--pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth) solid var(--pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor);
@@ -125,6 +134,7 @@
   pointer-events: none;
   content: "";
   background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
+  border: var(--pf-v6-c-accordion__item--BorderWidth) solid var(--pf-v6-c-accordion__item--BorderColor);
   border-radius: var(--pf-v6-c-accordion__item--BorderRadius);
   opacity: var(--pf-v6-c-accordion__item--before--Opacity);
   transition-timing-function: var(--pf-v6-c-accordion__item--before--TransitionTimingFunction);
@@ -139,6 +149,7 @@
   --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade);
   --pf-v6-c-accordion__item--before--Opacity: var(--pf-v6-c-accordion__item--m-expanded--before--Opacity);
   --pf-v6-c-accordion__item--before--TranslateY: var(--pf-v6-c-accordion__item--m-expanded--before--TranslateY);
+  --pf-v6-c-accordion__item--BorderWidth: var(--pf-v6-c-accordion__item--m-expanded--BorderWidth);
   --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide);
   --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade);
   --pf-v6-c-accordion__expandable-content--Opacity: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity);
@@ -168,8 +179,17 @@
   border: 0;
   border-radius: var(--pf-v6-c-accordion__toggle--BorderRadius);
 }
+.pf-v6-c-accordion__toggle::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border: var(--pf-v6-c-accordion__toggle--BorderWidth) solid var(--pf-v6-c-accordion__toggle--BorderColor);
+  border-radius: inherit;
+}
 .pf-v6-c-accordion__toggle:is(:hover, :focus) {
   --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-v6-c-accordion__toggle--hover--BackgroundColor);
+  --pf-v6-c-accordion__toggle--BorderWidth: var(--pf-v6-c-accordion__toggle--hover--BorderWidth);
 }
 
 .pf-v6-c-accordion__toggle-text {
@@ -202,6 +222,7 @@
   color: var(--pf-v6-c-accordion__expandable-content--Color);
   visibility: var(--pf-v6-c-accordion__expandable-content--Visibility);
   background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
+  border: var(--pf-v6-c-accordion__expandable-content--BorderWidth) solid var(--pf-v6-c-accordion__expandable-content--BorderColor);
   border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
   opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
   transition-delay: 0s, 0s, var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade);

package/components/Accordion/accordion.scss

@@ -20,6 +20,9 @@
   --#{$accordion}__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --#{$accordion}__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$accordion}__toggle--ZIndex: var(--pf-t--global--z-index--xs);
+  --#{$accordion}__toggle--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
+  --#{$accordion}__toggle--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$accordion}__toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
 
   // Accordion toggle toggle-start modifier
   // This decreases the gap between icon and text, alternative is calc it to * 2 the token or create a new token
@@ -106,6 +109,15 @@
   --#{$accordion}--m-bordered--RowGap: 0;
   --#{$accordion}__item--m-bordered--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
   --#{$accordion}__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
+  
+  // accordion item border for high contrast
+  --#{$accordion}__item--BorderWidth: 0;
+  --#{$accordion}__item--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$accordion}__item--m-expanded--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
+
+  // expandable content border for high contrast
+  --#{$accordion}__expandable-content--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
+  --#{$accordion}__expandable-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
 }
 
 .#{$accordion} {
@@ -136,7 +148,8 @@
     --#{$accordion}--RowGap: var(--#{$accordion}--m-bordered--RowGap);
     --#{$accordion}__item--BorderRadius: 0;
     --#{$accordion}__toggle--BorderRadius: 0;
-
+    --#{$accordion}__item--BorderWidth: 0;
+  
     .#{$accordion}__item {
       border-block-end: var(--#{$accordion}__item--m-bordered--BorderBlockEndWidth) solid var(--#{$accordion}__item--m-bordered--BorderBlockEndColor);
     }
@@ -152,6 +165,7 @@
     pointer-events: none;
     content: "";
     background-color: var(--#{$accordion}__item--m-expanded--BackgroundColor);
+    border: var(--#{$accordion}__item--BorderWidth) solid var(--#{$accordion}__item--BorderColor);
     border-radius: var(--#{$accordion}__item--BorderRadius);
     opacity: var(--#{$accordion}__item--before--Opacity);
     transition-timing-function: var(--#{$accordion}__item--before--TransitionTimingFunction);
@@ -167,6 +181,7 @@
     --#{$accordion}__item--before--TransitionDuration--fade: var(--#{$accordion}__item--before--TransitionDuration--expand--fade);
     --#{$accordion}__item--before--Opacity: var(--#{$accordion}__item--m-expanded--before--Opacity);
     --#{$accordion}__item--before--TranslateY: var(--#{$accordion}__item--m-expanded--before--TranslateY);
+    --#{$accordion}__item--BorderWidth: var(--#{$accordion}__item--m-expanded--BorderWidth);
     --#{$accordion}__expandable-content--TransitionDuration--slide: var(--#{$accordion}__expandable-content--TransitionDuration--expand--slide);
     --#{$accordion}__expandable-content--TransitionDuration--fade: var(--#{$accordion}__expandable-content--TransitionDuration--expand--fade);
     --#{$accordion}__expandable-content--Opacity: var(--#{$accordion}__item--m-expanded__expandable-content--Opacity);
@@ -197,8 +212,18 @@
   border: 0;
   border-radius: var(--#{$accordion}__toggle--BorderRadius);
 
+  &::after {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    content: "";
+    border: var(--#{$accordion}__toggle--BorderWidth) solid var(--#{$accordion}__toggle--BorderColor);
+    border-radius: inherit;
+  }
+
   &:is(:hover, :focus) {
     --#{$accordion}__toggle--BackgroundColor: var(--#{$accordion}__toggle--hover--BackgroundColor);
+    --#{$accordion}__toggle--BorderWidth: var(--#{$accordion}__toggle--hover--BorderWidth);
   }
 }
 
@@ -230,6 +255,7 @@
   color: var(--#{$accordion}__expandable-content--Color);
   visibility:  var(--#{$accordion}__expandable-content--Visibility);
   background-color: var(--#{$accordion}__expandable-content--BackgroundColor);
+  border: var(--#{$accordion}__expandable-content--BorderWidth) solid var(--#{$accordion}__expandable-content--BorderColor);
   border-radius: var(--#{$accordion}__expandable-content--BorderRadius);
   opacity: var(--#{$accordion}__expandable-content--Opacity);
   transition-delay: 0s, 0s, var(--#{$accordion}__expandable-content--TransitionDuration--fade), var(--#{$accordion}__expandable-content--TransitionDuration--fade), var(--#{$accordion}__expandable-content--TransitionDuration--fade);

package/components/Alert/alert-group.css

@@ -64,7 +64,8 @@
   --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: initial;
   --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: initial;
   --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: initial;
-  --pf-v6-c-alert-group__overflow-button--BorderWidth: 0;
+  --pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
+  --pf-v6-c-alert-group__overflow-button--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-alert-group__overflow-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -73,6 +74,7 @@
   --pf-v6-c-alert-group__overflow-button--Color: var(--pf-t--global--text--color--link--default);
   --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-t--global--box-shadow--lg);
   --pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --pf-v6-c-alert-group__overflow-button--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
   --pf-v6-c-alert-group__overflow-button--hover--Color: var(--pf-t--global--text--color--link--hover);
   --pf-v6-c-alert-group__overflow-button--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover);
   --pf-v6-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
@@ -103,10 +105,21 @@
   padding-inline-end: var(--pf-v6-c-alert-group__overflow-button--PaddingInlineEnd);
   color: var(--pf-v6-c-alert-group__overflow-button--Color);
   background-color: var(--pf-v6-c-alert-group__overflow-button--BackgroundColor);
-  border-width: var(--pf-v6-c-alert-group__overflow-button--BorderWidth);
+  border: 0;
   border-radius: var(--pf-v6-c-alert-group__overflow-button--BorderRadius);
   box-shadow: var(--pf-v6-c-alert-group__overflow-button--BoxShadow);
 }
+.pf-v6-c-alert-group__overflow-button::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border: var(--pf-v6-c-alert-group__overflow-button--BorderWidth) solid var(--pf-v6-c-alert-group__overflow-button--BorderColor);
+  border-radius: inherit;
+}
+.pf-v6-c-alert-group__overflow-button:hover, .pf-v6-c-alert-group__overflow-button:focus {
+  --pf-v6-c-alert-group__overflow-button--BorderWidth: var(--pf-v6-c-alert-group__overflow-button--hover--BorderWidth);
+}
 
 .pf-v6-c-alert-group__item {
   display: grid;

package/components/Alert/alert-group.scss

@@ -90,7 +90,8 @@
   --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--Transition: initial;
 
     // Overflow button
-  --#{$alert-group}__overflow-button--BorderWidth: 0;
+  --#{$alert-group}__overflow-button--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
+  --#{$alert-group}__overflow-button--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --#{$alert-group}__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
   --#{$alert-group}__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --#{$alert-group}__overflow-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -99,6 +100,7 @@
   --#{$alert-group}__overflow-button--Color: var(--pf-t--global--text--color--link--default);
   --#{$alert-group}__overflow-button--BoxShadow: var(--pf-t--global--box-shadow--lg);
   --#{$alert-group}__overflow-button--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --#{$alert-group}__overflow-button--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
   --#{$alert-group}__overflow-button--hover--Color: var(--pf-t--global--text--color--link--hover);
   --#{$alert-group}__overflow-button--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover);
   --#{$alert-group}__overflow-button--hover--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
@@ -134,9 +136,23 @@
   padding-inline-end: var(--#{$alert-group}__overflow-button--PaddingInlineEnd);
   color: var(--#{$alert-group}__overflow-button--Color);
   background-color: var(--#{$alert-group}__overflow-button--BackgroundColor);
-  border-width: var(--#{$alert-group}__overflow-button--BorderWidth);
+  border: 0;
   border-radius: var(--#{$alert-group}__overflow-button--BorderRadius);
   box-shadow: var(--#{$alert-group}__overflow-button--BoxShadow);
+
+  &::after {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    content: "";
+    border: var(--#{$alert-group}__overflow-button--BorderWidth) solid var(--#{$alert-group}__overflow-button--BorderColor);
+    border-radius: inherit;
+  }
+
+  &:hover,
+  &:focus {
+    --#{$alert-group}__overflow-button--BorderWidth: var(--#{$alert-group}__overflow-button--hover--BorderWidth);
+  }
 }
 
 .#{$alert-group}__item {

package/components/Badge/badge.css

@@ -12,6 +12,7 @@
   --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--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --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);
@@ -44,6 +45,7 @@
   border-radius: inherit;
 }
 .pf-v6-c-badge.pf-m-read {
+  --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
   --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);

package/components/Badge/badge.scss

@@ -19,6 +19,7 @@
   // Modifiers
   --#{$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--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --#{$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);
@@ -52,6 +53,7 @@
   }
 
   &.pf-m-read {
+    --#{$badge}--BorderColor: var(--#{$badge}--m-read--BorderColor);
     --#{$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);

package/components/Banner/banner.css

@@ -8,6 +8,8 @@
   --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--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-banner--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
   --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);
@@ -58,6 +60,8 @@
   color: var(--pf-v6-c-banner--Color);
   white-space: nowrap;
   background-color: var(--pf-v6-c-banner--BackgroundColor);
+  border-block-start: var(--pf-v6-c-banner--BorderWidth) solid var(--pf-v6-c-banner--BorderColor);
+  border-block-end: var(--pf-v6-c-banner--BorderWidth) solid var(--pf-v6-c-banner--BorderColor);
 }
 .pf-v6-c-banner.pf-m-danger {
   --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-danger--BackgroundColor);

package/components/Banner/banner.scss

@@ -10,6 +10,8 @@
   --#{$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);
+  --#{$banner}--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$banner}--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
 
   @media (min-width: $pf-v6-global--breakpoint--md) {
     --#{$banner}--PaddingInlineEnd: var(--#{$banner}--md--PaddingInlineEnd);
@@ -67,6 +69,8 @@
   color: var(--#{$banner}--Color);
   white-space: nowrap;
   background-color: var(--#{$banner}--BackgroundColor);
+  border-block-start: var(--#{$banner}--BorderWidth) solid var(--#{$banner}--BorderColor);
+  border-block-end: var(--#{$banner}--BorderWidth) solid var(--#{$banner}--BorderColor);
 
   &.pf-m-danger {
     --#{$banner}--BackgroundColor: var(--#{$banner}--m-danger--BackgroundColor);

package/components/Button/button.css

@@ -25,6 +25,7 @@
   --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
   --pf-v6-c-button--ScaleX: 1;
   --pf-v6-c-button--ScaleY: 1;
+  --pf-v6-c-button--border--offset: 0;
   --pf-v6-c-button--hover--BackgroundColor: transparent;
   --pf-v6-c-button--hover--BorderColor: transparent;
   --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
@@ -88,6 +89,12 @@
   --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
   --pf-v6-c-button--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
   --pf-v6-c-button--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+  --pf-v6-c-button--m-link--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
+  --pf-v6-c-button--m-link--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
+  --pf-v6-c-button--m-link--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
+  --pf-v6-c-button--m-link--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-button--m-link--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-button--m-link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
   --pf-v6-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
@@ -138,6 +145,12 @@
   --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent;
   --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
   --pf-v6-c-button--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+  --pf-v6-c-button--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
+  --pf-v6-c-button--m-plain--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
+  --pf-v6-c-button--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
+  --pf-v6-c-button--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-button--m-plain--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-button--m-plain--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-button--m-plain--m-no-padding--MinWidth: auto;
   --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: 0;
   --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: 0;
@@ -150,7 +163,7 @@
   --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor: transparent;
   --pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
-  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
+  --pf-v6-c-button--m-plain--m-no-padding--border--offset: calc(0.125rem * -1);
   --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
   --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
@@ -285,7 +298,7 @@
   --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
   --pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
   --pf-v6-c-button--m-settings--hover__icon--Rotate: 60deg;
-  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--alt);
   --pf-v6-c-button--m-block--Display: flex;
   --pf-v6-c-button--m-block--Width: 100%;
   --pf-v6-c-button--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
@@ -341,7 +354,7 @@
 }
 .pf-v6-c-button::after {
   position: absolute;
-  inset: 0;
+  inset: var(--pf-v6-c-button--border--offset);
   pointer-events: none;
   content: "";
   border: var(--pf-v6-c-button--BorderWidth) solid;
@@ -405,6 +418,12 @@
   --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--PaddingInlineEnd);
   --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--PaddingInlineStart);
   --pf-v6-c-button--Color: var(--pf-v6-c-button--m-link--Color);
+  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-link--BorderWidth);
+  --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-link--hover--BorderColor);
+  --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-link--hover--BorderWidth);
+  --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-link--m-clicked--BorderColor);
+  --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-link--m-clicked--BorderWidth);
+  --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-link--BorderColor);
   --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-link--BorderRadius);
   --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-link--BackgroundColor);
   --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-link__icon--Color);
@@ -444,6 +463,9 @@
   --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
   --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
   --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
+  --pf-v6-c-button--BorderWidth: 0;
+  --pf-v6-c-button--hover--BorderWidth: 0;
+  --pf-v6-c-button--m-clicked--BorderWidth: 0;
   text-align: start;
   white-space: normal;
   background: transparent;
@@ -551,6 +573,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
 }
 .pf-v6-c-button.pf-m-plain {
+  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-plain--BorderWidth);
+  --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-plain--hover--BorderColor);
+  --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-plain--hover--BorderWidth);
+  --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-plain--m-clicked--BorderColor);
+  --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-plain--m-clicked--BorderWidth);
+  --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-plain--BorderColor);
   --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-plain--BorderRadius);
   --pf-v6-c-button--Color: var(--pf-v6-c-button--m-plain--Color);
   --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain__icon--Color);
@@ -579,6 +607,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart);
   --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
   --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
+  --pf-v6-c-button--border--offset: var(--pf-v6-c-button--m-plain--m-no-padding--border--offset);
   min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
   background: var(--pf-v6-c-button--BackgroundColor);
 }

package/components/Button/button.scss

@@ -27,6 +27,7 @@
   --#{$button}--TransitionProperty: color, background, border-width, border-color;
   --#{$button}--ScaleX: 1;
   --#{$button}--ScaleY: 1;
+  --#{$button}--border--offset: 0;
 
   // Hover
   --#{$button}--hover--BackgroundColor: transparent;
@@ -102,6 +103,12 @@
   --#{$button}--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
   --#{$button}--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
   --#{$button}--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+  --#{$button}--m-link--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
+  --#{$button}--m-link--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
+  --#{$button}--m-link--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
+  --#{$button}--m-link--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$button}--m-link--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$button}--m-link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
 
   // Link danger
   --#{$button}--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
@@ -158,6 +165,12 @@
   --#{$button}--m-plain--disabled--BackgroundColor: transparent;
   --#{$button}--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
   --#{$button}--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+  --#{$button}--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
+  --#{$button}--m-plain--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
+  --#{$button}--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
+  --#{$button}--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$button}--m-plain--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$button}--m-plain--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
 
   // Plain no padding
   --#{$button}--m-plain--m-no-padding--MinWidth: auto;
@@ -172,7 +185,7 @@
   --#{$button}--m-plain--m-no-padding--hover__icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$button}--m-plain--m-no-padding--hover--BackgroundColor: transparent;
   --#{$button}--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
-  --#{$button}__progress--Color: var(--#{$button}__icon--Color);
+  --#{$button}--m-plain--m-no-padding--border--offset: calc(#{pf-size-prem(2px)} * -1);
 
   // Control
   --#{$button}--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -337,7 +350,7 @@
   --#{$button}--m-settings--hover__icon--Rotate: 60deg;
 
   // Count
-  --#{$button}--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$button}--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--alt);
 
   // Block
   --#{$button}--m-block--Display: flex;
@@ -399,7 +412,7 @@
 
   &::after {
     position: absolute;
-    inset: 0;
+    inset: var(--#{$button}--border--offset);
     pointer-events: none;
     content: "";
     border: var(--#{$button}--BorderWidth) solid;
@@ -473,6 +486,12 @@
     --#{$button}--PaddingInlineEnd: var(--#{$button}--m-link--PaddingInlineEnd);
     --#{$button}--PaddingInlineStart: var(--#{$button}--m-link--PaddingInlineStart);
     --#{$button}--Color: var(--#{$button}--m-link--Color);
+    --#{$button}--BorderWidth: var(--#{$button}--m-link--BorderWidth);
+    --#{$button}--hover--BorderColor: var(--#{$button}--m-link--hover--BorderColor);
+    --#{$button}--hover--BorderWidth: var(--#{$button}--m-link--hover--BorderWidth);
+    --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-link--m-clicked--BorderColor);
+    --#{$button}--m-clicked--BorderWidth: var(--#{$button}--m-link--m-clicked--BorderWidth);
+    --#{$button}--BorderColor: var(--#{$button}--m-link--BorderColor);
     --#{$button}--BorderRadius: var(--#{$button}--m-link--BorderRadius);
     --#{$button}--BackgroundColor: var(--#{$button}--m-link--BackgroundColor);
     --#{$button}__icon--Color: var(--#{$button}--m-link__icon--Color);
@@ -484,7 +503,7 @@
     --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-link--m-clicked__icon--Color);
     --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-link--m-small--PaddingInlineEnd);
     --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-link--m-small--PaddingInlineStart);
-
+  
     &.pf-m-inline {
       @at-root span#{&} {
         --#{$button}--m-link--m-inline--Display: var(--#{$button}--span--m-link--m-inline--Display);
@@ -518,6 +537,9 @@
       --#{$button}--hover--TextDecorationColor: var(--#{$button}--m-link--m-inline--hover--TextDecorationColor);
       --#{$button}--m-link--hover--Color: var(--#{$button}--m-link--m-inline--hover--Color);
       --#{$button}--m-link--hover__icon--Color: var(--#{$button}--m-link--m-inline--hover__icon--Color);
+      --#{$button}--BorderWidth: 0;
+      --#{$button}--hover--BorderWidth: 0;
+      --#{$button}--m-clicked--BorderWidth: 0;
 
       text-align: start;
       white-space: normal;
@@ -639,6 +661,12 @@
 
   // Icon buttons
   &.pf-m-plain {
+    --#{$button}--BorderWidth: var(--#{$button}--m-plain--BorderWidth);
+    --#{$button}--hover--BorderColor: var(--#{$button}--m-plain--hover--BorderColor);
+    --#{$button}--hover--BorderWidth: var(--#{$button}--m-plain--hover--BorderWidth);
+    --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-plain--m-clicked--BorderColor);
+    --#{$button}--m-clicked--BorderWidth: var(--#{$button}--m-plain--m-clicked--BorderWidth);
+    --#{$button}--BorderColor: var(--#{$button}--m-plain--BorderColor);
     --#{$button}--BorderRadius: var(--#{$button}--m-plain--BorderRadius);
     --#{$button}--Color: var(--#{$button}--m-plain--Color);
     --#{$button}__icon--Color: var(--#{$button}--m-plain__icon--Color);
@@ -667,7 +695,8 @@
       --#{$button}--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--PaddingInlineStart);
       --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineEnd);
       --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineStart);
-  
+      --#{$button}--border--offset: var(--#{$button}--m-plain--m-no-padding--border--offset);
+
       min-width: var(--#{$button}--m-plain--m-no-padding--MinWidth);
       background: var(--#{$button}--BackgroundColor); // override the ripple background
     }