@patternfly/patternfly 6.3.0-prerelease.55 → 6.3.0-prerelease.57

package/base/patternfly-variables.css

@@ -918,42 +918,6 @@
     var(--pf-t--global--box-shadow--color--lg--directional);
   --pf-t--global--list-style: disc outside;
   --pf-t--temp--dev--tbd: #BC11E0;
-  --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;
-}
-:root: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);
 }
 
 :root:where(.pf-v6-theme-dark) {

package/base/tokens/tokens-local.scss

@@ -124,42 +124,4 @@
   // 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/components/Accordion/accordion.css

@@ -78,8 +78,8 @@
   --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__item--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-accordion__expandable-content--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-accordion__expandable-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
 }
 @media screen and (prefers-reduced-motion: no-preference) {

package/components/Accordion/accordion.scss

@@ -113,10 +113,10 @@
   // 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);
+  --#{$accordion}__item--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
 
   // expandable content border for high contrast
-  --#{$accordion}__expandable-content--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
+  --#{$accordion}__expandable-content--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$accordion}__expandable-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
 }
 

package/components/Banner/banner.css

@@ -9,7 +9,7 @@
   --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--BorderWidth: var(--pf-t--global--border--width--high-contrast--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);

package/components/Banner/banner.scss

@@ -11,7 +11,7 @@
   --#{$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);
+  --#{$banner}--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
 
   @media (min-width: $pf-v6-global--breakpoint--md) {
     --#{$banner}--PaddingInlineEnd: var(--#{$banner}--md--PaddingInlineEnd);

package/components/CodeBlock/code-block.css

@@ -1,6 +1,6 @@
 .pf-v6-c-code-block {
   --pf-v6-c-code-block--BorderColor: var(--pf-t--global--border--color--high-contrast);
-  --pf-v6-c-code-block--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
+  --pf-v6-c-code-block--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-code-block--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-code-block__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);

package/components/CodeBlock/code-block.scss

@@ -2,7 +2,7 @@
 
 @include pf-root($code-block) {
   --#{$code-block}--BorderColor: var(--pf-t--global--border--color--high-contrast);
-  --#{$code-block}--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
+  --#{$code-block}--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$code-block}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$code-block}--BorderRadius: var(--pf-t--global--border--radius--medium);
   --#{$code-block}__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);

package/components/DatePicker/date-picker.css

@@ -5,6 +5,8 @@
   --pf-v6-c-date-picker__input--c-form-control--Width: calc(var(--pf-v6-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-v6-c-date-picker__input--c-form-control--width-base));
   --pf-v6-c-date-picker__input--c-form-control--width-base: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
   --pf-v6-c-date-picker__input--c-form-control--width-chars: 11;
+  --pf-v6-c-date-picker__calendar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-date-picker__calendar--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-date-picker__calendar--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-date-picker__calendar--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-date-picker__calendar--ZIndex: var(--pf-t--global--z-index--sm);
@@ -35,6 +37,7 @@
   inset-inline-end: var(--pf-v6-c-date-picker__calendar--InsetInlineEnd);
   z-index: var(--pf-v6-c-date-picker__calendar--ZIndex);
   background-color: var(--pf-v6-c-date-picker__calendar--BackgroundColor);
+  border: var(--pf-v6-c-date-picker__calendar--BorderWidth) solid var(--pf-v6-c-date-picker__calendar--BorderColor);
   box-shadow: var(--pf-v6-c-date-picker__calendar--BoxShadow);
 }
 .pf-v6-c-date-picker__calendar.pf-m-align-right {

package/components/DatePicker/date-picker.scss

@@ -7,6 +7,8 @@
   --#{$date-picker}__input--c-form-control--Width: calc(var(--#{$date-picker}__input--c-form-control--width-chars) * 1ch + var(--#{$date-picker}__input--c-form-control--width-base));
   --#{$date-picker}__input--c-form-control--width-base: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm)); // form control left/right padding + status icon width and spacer
   --#{$date-picker}__input--c-form-control--width-chars: 11;
+  --#{$date-picker}__calendar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --#{$date-picker}__calendar--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --#{$date-picker}__calendar--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --#{$date-picker}__calendar--BoxShadow: var(--pf-t--global--box-shadow--md);
   --#{$date-picker}__calendar--ZIndex: var(--pf-t--global--z-index--sm);
@@ -32,6 +34,7 @@
   }
 }
 
+// TODO - remove in breaking change
 .#{$date-picker}__calendar {
   position: absolute;
   inset-block-start: var(--#{$date-picker}__calendar--InsetBlockStart);
@@ -39,6 +42,7 @@
   inset-inline-end: var(--#{$date-picker}__calendar--InsetInlineEnd);
   z-index: var(--#{$date-picker}__calendar--ZIndex);
   background-color: var(--#{$date-picker}__calendar--BackgroundColor);
+  border: var(--#{$date-picker}__calendar--BorderWidth) solid var(--#{$date-picker}__calendar--BorderColor);
   box-shadow: var(--#{$date-picker}__calendar--BoxShadow);
 
   &.pf-m-align-right {

package/components/Drawer/drawer.css

@@ -110,9 +110,9 @@
   --pf-v6-c-drawer__actions--MarginInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
   --pf-v6-c-drawer__panel--BoxShadow: none;
   --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--md--top);
-  --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--high-contrast--border--width--divider--default);
+  --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-t--global--border--width--divider--default);
-  --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--high-contrast--border--width--divider--default);
+  --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-drawer__panel--after--BackgroundColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-drawer--m-inline__panel--PaddingInlineStart: 0;

package/components/Drawer/drawer.scss

@@ -168,9 +168,9 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
   // Divider 
   // TODO remove these variables in a breaking change in favor of setting the border variables directly
-  --#{$drawer}__panel--after--Width: var(--pf-t--global--high-contrast--border--width--divider--default);
+  --#{$drawer}__panel--after--Width: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$drawer}--m-inline__panel--after--Width: var(--pf-t--global--border--width--divider--default); // TODO this turns on border always for inline
-  --#{$drawer}--m-panel-bottom__panel--after--Height: var(--pf-t--global--high-contrast--border--width--divider--default);
+  --#{$drawer}--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$drawer}__panel--after--BackgroundColor: var(--pf-t--global--border--color--high-contrast);
   --#{$drawer}--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
   --#{$drawer}--m-inline__panel--PaddingInlineStart: 0; // no padding needed now

package/components/Login/login.css

@@ -17,7 +17,7 @@
   --pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-login__main--MarginBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-login__main--BorderRadius: var(--pf-t--global--border--radius--large);
-  --pf-v6-c-login__main--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
+  --pf-v6-c-login__main--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-login__main--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-login__main-header--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);

package/components/Login/login.scss

@@ -40,7 +40,7 @@
   --#{$login}__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$login}__main--MarginBlockEnd: var(--pf-t--global--spacer--lg);
   --#{$login}__main--BorderRadius: var(--pf-t--global--border--radius--large);
-  --#{$login}__main--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
+  --#{$login}__main--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$login}__main--BorderColor: var(--pf-t--global--border--color--high-contrast);
 
   @media (min-width: $pf-v6-global--breakpoint--xl) {

package/components/Menu/menu.css

@@ -7,7 +7,7 @@
   --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular);
-  --pf-v6-c-menu--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
+  --pf-v6-c-menu--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-menu--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);

package/components/Menu/menu.scss

@@ -10,7 +10,7 @@
   --#{$menu}--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --#{$menu}--BoxShadow: var(--pf-t--global--box-shadow--md);
   --#{$menu}--Color: var(--pf-t--global--text--color--regular);
-  --#{$menu}--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
+  --#{$menu}--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$menu}--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --#{$menu}--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$menu}--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);

package/components/ModalBox/modal-box.css

@@ -1,7 +1,7 @@
 .pf-v6-c-modal-box {
   --pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-modal-box--BorderColor: var(--pf-t--global--border--color--high-contrast);
-  --pf-v6-c-modal-box--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
+  --pf-v6-c-modal-box--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v6-c-modal-box--BoxShadow: var(--pf-t--global--box-shadow--lg);
   --pf-v6-c-modal-box--ZIndex: var(--pf-t--global--z-index--xl);

package/components/ModalBox/modal-box.scss

@@ -3,7 +3,7 @@
 @include pf-root($modal-box) {
   --#{$modal-box}--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --#{$modal-box}--BorderColor: var(--pf-t--global--border--color--high-contrast);
-  --#{$modal-box}--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
+  --#{$modal-box}--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$modal-box}--BorderRadius: var(--pf-t--global--border--radius--large);
   --#{$modal-box}--BoxShadow: var(--pf-t--global--box-shadow--lg);
   --#{$modal-box}--ZIndex: var(--pf-t--global--z-index--xl); // TODO use a z-index token

package/components/Pagination/pagination.css

@@ -1,6 +1,9 @@
 .pf-v6-c-pagination {
   --pf-v6-c-pagination--inset: 0;
   --pf-v6-c-pagination--ColumnGap: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-pagination--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-pagination--BorderBlockStartWidth: 0;
+  --pf-v6-c-pagination--BorderBlockEndWidth: 0;
   --pf-v6-c-pagination--m-page-insets--inset: var(--pf-t--global--spacer--lg);
   --pf-v6-c-pagination__nav--Display: none;
   --pf-v6-c-pagination--m-display-summary__nav--Display: none;
@@ -22,14 +25,17 @@
   --pf-v6-c-pagination--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-pagination--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-pagination--m-sticky--InsetBlockStart: 0;
+  --pf-v6-c-pagination--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
   --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
   --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
+  --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart: var(--pf-t--global--spacer--gap--group--vertical);
   --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
   --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -44,6 +50,7 @@
 @media screen and (min-width: 48rem) {
   .pf-v6-c-pagination {
     --pf-v6-c-pagination--m-bottom--BoxShadow: none;
+    --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
     --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
     --pf-v6-c-pagination__nav--Display: inline-flex;
     --pf-v6-c-pagination__total-items--Display: none;
@@ -63,6 +70,9 @@
   justify-content: flex-end;
   padding-inline-start: var(--pf-v6-c-pagination--inset);
   padding-inline-end: var(--pf-v6-c-pagination--inset);
+  border: 0 solid var(--pf-v6-c-pagination--BorderColor);
+  border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
+  border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
 }
 .pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
   display: var(--pf-v6-c-pagination__page-menu--Display);
@@ -70,6 +80,7 @@
 .pf-v6-c-pagination.pf-m-bottom {
   --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow);
   --pf-v6-c-pagination--m-sticky--InsetBlockStart: auto;
+  --pf-v6-c-pagination--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--BorderBlockStartWidth);
   position: sticky;
   inset-block-end: var(--pf-v6-c-pagination--m-bottom--InsetBlockEnd);
   justify-content: center;
@@ -96,7 +107,6 @@
 }
 @media screen and (min-width: 48rem) {
   .pf-v6-c-pagination.pf-m-bottom {
-    --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
     --pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
     --pf-v6-c-pagination--m-bottom--InsetBlockEnd: auto;
     position: relative;
@@ -128,10 +138,13 @@
   padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd);
+  border: 0;
   box-shadow: none;
 }
 .pf-v6-c-pagination.pf-m-sticky {
   --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
+  --pf-v6-c-pagination--BorderBlockEndWidth: var(--pf-v6-c-pagination--m-sticky--BorderBlockEndWidth);
+  --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth);
   position: sticky;
   inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
   z-index: var(--pf-v6-c-pagination--m-sticky--ZIndex);

package/components/Pagination/pagination.scss

@@ -6,6 +6,9 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
 @include pf-root($pagination) {
   --#{$pagination}--inset: 0;
   --#{$pagination}--ColumnGap: var(--pf-t--global--spacer--lg);
+  --#{$pagination}--BorderColor: var(--pf-t--global--border--color--high-contrast);
+  --#{$pagination}--BorderBlockStartWidth: 0;
+  --#{$pagination}--BorderBlockEndWidth: 0;
 
   // Page insets
   --#{$pagination}--m-page-insets--inset: var(--pf-t--global--spacer--lg);
@@ -37,16 +40,19 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
   --#{$pagination}--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --#{$pagination}--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$pagination}--m-sticky--InsetBlockStart: 0;
+  --#{$pagination}--m-sticky--BorderBlockEndWidth:  var(--pf-t--global--border--width--high-contrast--regular);
 
   // bottom
   --#{$pagination}--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$pagination}--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
   --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
   --#{$pagination}--m-bottom--InsetBlockEnd: 0;
+  --#{$pagination}--m-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$pagination}--m-bottom--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --#{$pagination}--m-bottom--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --#{$pagination}--m-bottom--m-sticky--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$pagination}--m-bottom--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$pagination}--m-bottom--m-sticky--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$pagination}--m-bottom--m-static--PaddingBlockStart: var(--pf-t--global--spacer--gap--group--vertical);
   --#{$pagination}--m-bottom--m-static--PaddingBlockEnd: 0;
   --#{$pagination}--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -62,6 +68,7 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
 
   @media screen and (min-width: $pf-v6-global--breakpoint--md) {
     --#{$pagination}--m-bottom--BoxShadow: none;
+    --#{$pagination}--m-bottom--BorderBlockStartWidth: 0;
     --#{$pagination}__page-menu--Display: var(--#{$pagination}__page-menu--md--Display);
     --#{$pagination}__nav--Display: inline-flex;
     --#{$pagination}__total-items--Display: none;
@@ -80,6 +87,9 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
   justify-content: flex-end;
   padding-inline-start: var(--#{$pagination}--inset);
   padding-inline-end: var(--#{$pagination}--inset);
+  border: 0 solid var(--#{$pagination}--BorderColor);
+  border-block-start-width: var(--#{$pagination}--BorderBlockStartWidth);
+  border-block-end-width: var(--#{$pagination}--BorderBlockEndWidth);
 
   .#{$pagination}__page-menu {
     display: var(--#{$pagination}__page-menu--Display);
@@ -88,6 +98,7 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
   &.pf-m-bottom {
     --#{$pagination}--m-sticky--BoxShadow: var(--#{$pagination}--m-bottom--m-sticky--BoxShadow);
     --#{$pagination}--m-sticky--InsetBlockStart: auto;
+    --#{$pagination}--BorderBlockStartWidth: var(--#{$pagination}--m-bottom--BorderBlockStartWidth);
 
     position: sticky;
     inset-block-end: var(--#{$pagination}--m-bottom--InsetBlockEnd);
@@ -117,7 +128,6 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
     }
 
     @media screen and (min-width: $pf-v6-global--breakpoint--md) {
-      --#{$pagination}--m-bottom--BorderBlockStartWidth: 0;
       --#{$pagination}--m-bottom--MarginBlockStart: 0;
       --#{$pagination}--m-bottom--InsetBlockEnd: auto;
 
@@ -155,11 +165,14 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
     padding-block-end: var(--#{$pagination}--m-bottom--m-static--PaddingBlockEnd);
     padding-inline-start: var(--#{$pagination}--m-bottom--m-static--PaddingInlineStart);
     padding-inline-end: var(--#{$pagination}--m-bottom--m-static--PaddingInlineEnd);
+    border: 0;
     box-shadow: none;
   }
 
   &.pf-m-sticky {
     --#{$pagination}--m-bottom--InsetBlockEnd: 0;
+    --#{$pagination}--BorderBlockEndWidth: var(--#{$pagination}--m-sticky--BorderBlockEndWidth);
+    --#{$pagination}--m-bottom--BorderBlockStartWidth: var(--#{$pagination}--m-bottom--m-sticky--BorderBlockStartWidth);
 
     position: sticky;
     inset-block-start: var(--#{$pagination}--m-sticky--InsetBlockStart);

package/components/Popover/popover.css

@@ -3,7 +3,7 @@
   --pf-v6-c-popover--MinWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
   --pf-v6-c-popover--MaxWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
   --pf-v6-c-popover--BoxShadow: var(--pf-t--global--box-shadow--md);
-  --pf-v6-c-popover--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
+  --pf-v6-c-popover--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-popover--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-popover--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-popover--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);

package/components/Popover/popover.scss

@@ -6,7 +6,7 @@
   --#{$popover}--MinWidth: calc(var(--#{$popover}__content--PaddingInlineStart) + var(--#{$popover}__content--PaddingInlineEnd) + #{pf-size-prem(300px)});
   --#{$popover}--MaxWidth: calc(var(--#{$popover}__content--PaddingInlineStart) + var(--#{$popover}__content--PaddingInlineEnd) + #{pf-size-prem(300px)});
   --#{$popover}--BoxShadow: var(--pf-t--global--box-shadow--md);
-  --#{$popover}--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
+  --#{$popover}--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$popover}--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --#{$popover}--BorderRadius: var(--pf-t--global--border--radius--medium);
 

package/components/Table/table.css

@@ -121,7 +121,7 @@
   --pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
   --pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
   --pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
-  --pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
+  --pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-table--m-compact__th--PaddingBlockStart: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs));
   --pf-v6-c-table--m-compact__th--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table--m-compact--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);

package/components/Table/table.scss

@@ -194,7 +194,7 @@
 
   // * Compound expandable
   --#{$table}--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
-  --#{$table}--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
+  --#{$table}--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
 
   // * Table compact th
   --#{$table}--m-compact__th--PaddingBlockStart: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs));