@patternfly/patternfly 6.0.0-alpha.1 → 6.0.0-alpha.10

package/components/AboutModalBox/about-modal-box.scss

@@ -15,6 +15,13 @@
   --#{$about-modal-box}--sm--GridTemplateColumns: 5fr 1fr;
   --#{$about-modal-box}--lg--GridTemplateColumns: 1fr .6fr;
 
+  @include pf-v5-bidirectional-style(
+    $prop: --#{$about-modal-box}--BackgroundPosition,
+    $ltr-val: bottom right,
+    $rtl-val: bottom left
+  );
+
+
   // Brand
   --#{$about-modal-box}__brand--PaddingTop: var(--#{$pf-global}--spacer--2xl);
   --#{$about-modal-box}__brand--PaddingRight: var(--#{$pf-global}--spacer--xl);
@@ -137,7 +144,10 @@
 .#{$about-modal-box}__brand {
   display: flex;
   grid-area: brand;
-  padding: var(--#{$about-modal-box}__brand--PaddingTop) var(--#{$about-modal-box}__brand--PaddingRight) var(--#{$about-modal-box}__brand--PaddingBottom) var(--#{$about-modal-box}__brand--PaddingLeft);
+  padding-block-start: var(--#{$about-modal-box}__brand--PaddingTop);
+  padding-block-end: var(--#{$about-modal-box}__brand--PaddingBottom);
+  padding-inline-start: var(--#{$about-modal-box}__brand--PaddingLeft);
+  padding-inline-end: var(--#{$about-modal-box}__brand--PaddingRight);
 }
 
 .#{$about-modal-box}__brand-image {
@@ -149,15 +159,15 @@
   display: flex;
   flex-direction: column;
   grid-area: header;
-  padding-right: var(--#{$about-modal-box}__header--PaddingRight);
-  padding-bottom: var(--#{$about-modal-box}__header--PaddingBottom);
-  padding-left: var(--#{$about-modal-box}__header--PaddingLeft);
+  padding-block-end: var(--#{$about-modal-box}__header--PaddingBottom);
+  padding-inline-start: var(--#{$about-modal-box}__header--PaddingLeft);
+  padding-inline-end: var(--#{$about-modal-box}__header--PaddingRight);
 }
 
 // Strapline
 .#{$about-modal-box}__strapline {
-  padding-top: var(--#{$about-modal-box}__strapline--PaddingTop);
-  margin-top: auto;
+  padding-block-start: var(--#{$about-modal-box}__strapline--PaddingTop);
+  margin-block-start: auto;
   font-size: var(--#{$about-modal-box}__strapline--FontSize);
 }
 
@@ -166,12 +176,15 @@
   display: flex;
   flex-direction: column;
   grid-area: content;
-  margin: var(--#{$about-modal-box}__content--MarginTop) var(--#{$about-modal-box}__content--MarginRight) var(--#{$about-modal-box}__content--MarginBottom) var(--#{$about-modal-box}__content--MarginLeft); // Using margin instead of padding to prevent scrollbar extending to top of content block
+  margin-block-start: var(--#{$about-modal-box}__content--MarginTop);
+  margin-block-end: var(--#{$about-modal-box}__content--MarginBottom);
+  margin-inline-start: var(--#{$about-modal-box}__content--MarginLeft); // Using margin instead of padding to prevent scrollbar extending to top of content block
+  margin-inline-end: var(--#{$about-modal-box}__content--MarginRight);
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
-  -webkit-overflow-scrolling: touch;
   word-break: break-word;
+  -webkit-overflow-scrolling: touch;
 
   @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
     overflow: visible;
@@ -182,14 +195,14 @@
 // Close
 .#{$about-modal-box}__close {
   position: sticky;
-  top: 0;
+  inset-block-start: 0;
   display: flex;
   grid-area: close;
   align-items: flex-start;
   justify-content: flex-end;
-  padding-top: var(--#{$about-modal-box}__close--PaddingTop);
-  padding-right: var(--#{$about-modal-box}__close--PaddingRight);
-  padding-bottom: var(--#{$about-modal-box}__close--PaddingBottom);
+  padding-block-start: var(--#{$about-modal-box}__close--PaddingTop);
+  padding-block-end: var(--#{$about-modal-box}__close--PaddingBottom);
+  padding-inline-end: var(--#{$about-modal-box}__close--PaddingRight);
 
   @media only screen and (min-width: $pf-v5-global--breakpoint--sm) {
     grid-area: 1 / 2;

package/components/Accordion/accordion.css

@@ -105,30 +105,34 @@
 }
 .pf-v5-c-accordion.pf-m-bordered {
   --pf-v5-c-accordion__toggle--after--Top: var(--pf-v5-c-accordion--m-bordered__toggle--after--Top);
-  border-top: var(--pf-v5-c-accordion--m-bordered--BorderTopWidth) solid var(--pf-v5-c-accordion--m-bordered--BorderTopColor);
+  border-block-start: var(--pf-v5-c-accordion--m-bordered--BorderTopWidth) solid var(--pf-v5-c-accordion--m-bordered--BorderTopColor);
 }
 .pf-v5-c-accordion.pf-m-bordered .pf-v5-c-accordion__toggle::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   content: "";
-  border: solid var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderColor);
-  border-width: var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderTopWidth) 0 var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth);
+  border-color: var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderColor);
+  border-style: solid;
+  border-block-start-width: var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderTopWidth);
+  border-block-end-width: var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth);
+  border-inline-start-width: 0;
+  border-inline-end-width: 0;
 }
 .pf-v5-c-accordion.pf-m-bordered .pf-v5-c-accordion__toggle.pf-m-expanded {
   --pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth: 0;
 }
 .pf-v5-c-accordion.pf-m-bordered .pf-v5-c-accordion__expandable-content.pf-m-expanded .pf-v5-c-accordion__expandable-content-body:last-child::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   pointer-events: none;
   content: "";
-  border-bottom: var(--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
 }
 
 .pf-v5-c-accordion__toggle {
@@ -137,7 +141,10 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: var(--pf-v5-c-accordion__toggle--PaddingTop) var(--pf-v5-c-accordion__toggle--PaddingRight) var(--pf-v5-c-accordion__toggle--PaddingBottom) var(--pf-v5-c-accordion__toggle--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-accordion__toggle--PaddingTop);
+  padding-block-end: var(--pf-v5-c-accordion__toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-accordion__toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-accordion__toggle--PaddingRight);
   font-family: var(--pf-v5-c-accordion__toggle--FontFamily, inherit);
   font-size: var(--pf-v5-c-accordion__toggle--FontSize, inherit);
   background-color: var(--pf-v5-c-accordion__toggle--BackgroundColor);
@@ -145,9 +152,9 @@
 }
 .pf-v5-c-accordion__toggle::after {
   position: absolute;
-  top: var(--pf-v5-c-accordion__toggle--after--Top);
-  bottom: 0;
-  left: 0;
+  inset-block-start: var(--pf-v5-c-accordion__toggle--after--Top);
+  inset-block-end: 0;
+  inset-inline-start: 0;
   width: var(--pf-v5-c-accordion__toggle--after--Width);
   content: "";
   background-color: var(--pf-v5-c-accordion__toggle--after--BackgroundColor);
@@ -193,6 +200,9 @@
 .pf-v5-c-accordion__toggle-icon {
   transition: var(--pf-v5-c-accordion__toggle-icon--Transition);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-accordion__toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-accordion__expandable-content {
   font-size: var(--pf-v5-c-accordion__expandable-content--FontSize);
@@ -208,13 +218,16 @@
 
 .pf-v5-c-accordion__expandable-content-body {
   position: relative;
-  padding: var(--pf-v5-c-accordion__expandable-content-body--PaddingTop) var(--pf-v5-c-accordion__expandable-content-body--PaddingRight) var(--pf-v5-c-accordion__expandable-content-body--PaddingBottom) var(--pf-v5-c-accordion__expandable-content-body--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-accordion__expandable-content-body--PaddingTop);
+  padding-block-end: var(--pf-v5-c-accordion__expandable-content-body--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-accordion__expandable-content-body--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-accordion__expandable-content-body--PaddingRight);
 }
 .pf-v5-c-accordion__expandable-content-body::after {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
   width: var(--pf-v5-c-accordion__expandable-content-body--after--Width);
   content: "";
   background-color: var(--pf-v5-c-accordion__expandable-content-body--after--BackgroundColor);

package/components/Accordion/accordion.scss

@@ -114,18 +114,22 @@
   &.pf-m-bordered {
     --#{$accordion}__toggle--after--Top: var(--#{$accordion}--m-bordered__toggle--after--Top);
 
-    border-top: var(--#{$accordion}--m-bordered--BorderTopWidth) solid var(--#{$accordion}--m-bordered--BorderTopColor);
+    border-block-start: var(--#{$accordion}--m-bordered--BorderTopWidth) solid var(--#{$accordion}--m-bordered--BorderTopColor);
 
     .#{$accordion}__toggle {
       &::before {
         position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-block-end: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
         content: "";
-        border: solid var(--#{$accordion}--m-bordered__toggle--before--BorderColor);
-        border-width: var(--#{$accordion}--m-bordered__toggle--before--BorderTopWidth) 0 var(--#{$accordion}--m-bordered__toggle--before--BorderBottomWidth);
+        border-color: var(--#{$accordion}--m-bordered__toggle--before--BorderColor);
+        border-style: solid;
+        border-block-start-width: var(--#{$accordion}--m-bordered__toggle--before--BorderTopWidth);
+        border-block-end-width: var(--#{$accordion}--m-bordered__toggle--before--BorderBottomWidth);
+        border-inline-start-width: 0;
+        border-inline-end-width: 0;
       }
 
       &.pf-m-expanded {
@@ -139,13 +143,13 @@
         .#{$accordion}__expandable-content-body:last-child {
           &::before {
             position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
+            inset-block-start: 0;
+            inset-block-end: 0;
+            inset-inline-start: 0;
+            inset-inline-end: 0;
             pointer-events: none;
             content: "";
-            border-bottom: var(--#{$accordion}--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--#{$accordion}--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
+            border-block-end: var(--#{$accordion}--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--#{$accordion}--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
           }
         }
       }
@@ -160,7 +164,10 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: var(--#{$accordion}__toggle--PaddingTop) var(--#{$accordion}__toggle--PaddingRight) var(--#{$accordion}__toggle--PaddingBottom) var(--#{$accordion}__toggle--PaddingLeft);
+  padding-block-start: var(--#{$accordion}__toggle--PaddingTop);
+  padding-block-end: var(--#{$accordion}__toggle--PaddingBottom);
+  padding-inline-start: var(--#{$accordion}__toggle--PaddingLeft);
+  padding-inline-end: var(--#{$accordion}__toggle--PaddingRight);
   font-family: var(--#{$accordion}__toggle--FontFamily, inherit);
   font-size: var(--#{$accordion}__toggle--FontSize, inherit);
   background-color: var(--#{$accordion}__toggle--BackgroundColor);
@@ -168,9 +175,9 @@
 
   &::after {
     position: absolute;
-    top: var(--#{$accordion}__toggle--after--Top);
-    bottom: 0;
-    left: 0;
+    inset-block-start: var(--#{$accordion}__toggle--after--Top);
+    inset-block-end: 0;
+    inset-inline-start: 0;
     width: var(--#{$accordion}__toggle--after--Width);
     content: "";
     background-color: var(--#{$accordion}__toggle--after--BackgroundColor);
@@ -223,6 +230,8 @@
 }
 
 .#{$accordion}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   transition: var(--#{$accordion}__toggle-icon--Transition);
 }
 
@@ -242,13 +251,16 @@
 
 .#{$accordion}__expandable-content-body {
   position: relative;
-  padding: var(--#{$accordion}__expandable-content-body--PaddingTop) var(--#{$accordion}__expandable-content-body--PaddingRight) var(--#{$accordion}__expandable-content-body--PaddingBottom) var(--#{$accordion}__expandable-content-body--PaddingLeft);
+  padding-block-start: var(--#{$accordion}__expandable-content-body--PaddingTop);
+  padding-block-end: var(--#{$accordion}__expandable-content-body--PaddingBottom);
+  padding-inline-start: var(--#{$accordion}__expandable-content-body--PaddingLeft);
+  padding-inline-end: var(--#{$accordion}__expandable-content-body--PaddingRight);
 
   &::after {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
     width: var(--#{$accordion}__expandable-content-body--after--Width);
     content: "";
     background-color: var(--#{$accordion}__expandable-content-body--after--BackgroundColor);

package/components/ActionList/action-list.css

@@ -13,13 +13,13 @@
 }
 .pf-v5-c-action-list > * + *,
 .pf-v5-c-action-list__group > * + * {
-  margin-left: var(--pf-v5-c-action-list--child--spacer);
+  margin-inline-start: var(--pf-v5-c-action-list--child--spacer);
 }
 .pf-v5-c-action-list > * + .pf-v5-c-action-list__group,
 .pf-v5-c-action-list .pf-v5-c-action-list__group + *,
 .pf-v5-c-action-list__group > * + .pf-v5-c-action-list__group,
 .pf-v5-c-action-list__group .pf-v5-c-action-list__group + * {
-  margin-left: var(--pf-v5-c-action-list--group--spacer);
+  margin-inline-start: var(--pf-v5-c-action-list--group--spacer);
 }
 .pf-v5-c-action-list.pf-m-icons,
 .pf-v5-c-action-list__group.pf-m-icons {

package/components/ActionList/action-list.scss

@@ -15,12 +15,12 @@
   align-items: center;
 
   > * + * {
-    margin-left: var(--#{$action-list}--child--spacer);
+    margin-inline-start: var(--#{$action-list}--child--spacer);
   }
 
   > * + .#{$action-list}__group,
   .#{$action-list}__group + * {
-    margin-left: var(--#{$action-list}--group--spacer);
+    margin-inline-start: var(--#{$action-list}--group--spacer);
   }
 
   &.pf-m-icons {

package/components/Alert/alert-group.css

@@ -1,31 +1,33 @@
 .pf-v5-c-alert-group {
-  --pf-v5-c-alert-group__item--MarginTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-alert-group--m-toast--Top: var(--pf-v5-global--spacer--2xl);
-  --pf-v5-c-alert-group--m-toast--Right: var(--pf-v5-global--spacer--xl);
+  --pf-v5-c-alert-group__item--MarginTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-alert-group--m-toast--Top: var(--pf-t--global--spacer--2xl);
+  --pf-v5-c-alert-group--m-toast--Right: var(--pf-t--global--spacer--xl);
   --pf-v5-c-alert-group--m-toast--MaxWidth: 37.5rem;
   --pf-v5-c-alert-group--m-toast--ZIndex: var(--pf-v5-global--ZIndex--2xl);
   --pf-v5-c-alert-group__overflow-button--BorderWidth: 0;
-  --pf-v5-c-alert-group__overflow-button--PaddingTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-alert-group__overflow-button--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-alert-group__overflow-button--PaddingBottom: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-alert-group__overflow-button--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-alert-group__overflow-button--Color: var(--pf-v5-global--link--Color);
-  --pf-v5-c-alert-group__overflow-button--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
-  --pf-v5-c-alert-group__overflow-button--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-alert-group__overflow-button--hover--Color: var(--pf-v5-global--link--Color--hover);
-  --pf-v5-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-v5-global--BoxShadow--lg), var(--pf-v5-global--BoxShadow--lg-bottom);
-  --pf-v5-c-alert-group__overflow-button--focus--Color: var(--pf-v5-global--link--Color--hover);
-  --pf-v5-c-alert-group__overflow-button--focus--BoxShadow: var(--pf-v5-global--BoxShadow--lg), var(--pf-v5-global--BoxShadow--lg-bottom);
-  --pf-v5-c-alert-group__overflow-button--active--Color: var(--pf-v5-global--link--Color--hover);
-  --pf-v5-c-alert-group__overflow-button--active--BoxShadow: var(--pf-v5-global--BoxShadow--lg), var(--pf-v5-global--BoxShadow--lg-bottom);
+  --pf-v5-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-alert-group__overflow-button--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-alert-group__overflow-button--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-alert-group__overflow-button--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-alert-group__overflow-button--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-alert-group__overflow-button--Color: var(--pf-t--global--text--color--link--default);
+  --pf-v5-c-alert-group__overflow-button--BoxShadow: var(--pf-t--global--box-shadow--lg);
+  --pf-v5-c-alert-group__overflow-button--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --pf-v5-c-alert-group__overflow-button--hover--Color: var(--pf-t--global--text--color--link--hover);
+  --pf-v5-c-alert-group__overflow-button--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover);
+  --pf-v5-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
+  --pf-v5-c-alert-group__overflow-button--focus--Color: var(--pf-t--global--text--color--link--hover);
+  --pf-v5-c-alert-group__overflow-button--focus--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
+  --pf-v5-c-alert-group__overflow-button--active--Color: var(--pf-t--global--text--color--link--hover);
+  --pf-v5-c-alert-group__overflow-button--active--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
 }
 .pf-v5-c-alert-group > * + * {
-  margin-top: var(--pf-v5-c-alert-group__item--MarginTop);
+  margin-block-start: var(--pf-v5-c-alert-group__item--MarginTop);
 }
 .pf-v5-c-alert-group.pf-m-toast {
   position: fixed;
-  top: var(--pf-v5-c-alert-group--m-toast--Top);
-  right: var(--pf-v5-c-alert-group--m-toast--Right);
+  inset-block-start: var(--pf-v5-c-alert-group--m-toast--Top);
+  inset-inline-end: var(--pf-v5-c-alert-group--m-toast--Right);
   z-index: var(--pf-v5-c-alert-group--m-toast--ZIndex);
   width: calc(100% - var(--pf-v5-c-alert-group--m-toast--Right) * 2);
   max-width: var(--pf-v5-c-alert-group--m-toast--MaxWidth);
@@ -34,14 +36,19 @@
 .pf-v5-c-alert-group__overflow-button {
   position: relative;
   width: 100%;
-  padding: var(--pf-v5-c-alert-group__overflow-button--PaddingTop) var(--pf-v5-c-alert-group__overflow-button--PaddingRight) var(--pf-v5-c-alert-group__overflow-button--PaddingBottom) var(--pf-v5-c-alert-group__overflow-button--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-alert-group__overflow-button--PaddingTop);
+  padding-block-end: var(--pf-v5-c-alert-group__overflow-button--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-alert-group__overflow-button--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-alert-group__overflow-button--PaddingRight);
   color: var(--pf-v5-c-alert-group__overflow-button--Color);
   background-color: var(--pf-v5-c-alert-group__overflow-button--BackgroundColor);
   border-width: var(--pf-v5-c-alert-group__overflow-button--BorderWidth);
+  border-radius: var(--pf-v5-c-alert-group__overflow-button--BorderRadius);
   box-shadow: var(--pf-v5-c-alert-group__overflow-button--BoxShadow);
 }
 .pf-v5-c-alert-group__overflow-button:hover {
   --pf-v5-c-alert-group__overflow-button--Color: var(--pf-v5-c-alert-group__overflow-button--hover--Color);
+  --pf-v5-c-alert-group__overflow-button--BackgroundColor: var(--pf-v5-c-alert-group__overflow-button--hover--BackgroundColor);
   --pf-v5-c-alert-group__overflow-button--BoxShadow: var(--pf-v5-c-alert-group__overflow-button--hover--BoxShadow);
 }
 .pf-v5-c-alert-group__overflow-button:focus {

package/components/Alert/alert-group.scss

@@ -3,40 +3,42 @@
 // Tabs
 .#{$alert-group} {
   // Alert group variables
-  --#{$alert-group}__item--MarginTop: var(--#{$pf-global}--spacer--sm);
+  --#{$alert-group}__item--MarginTop: var(--pf-t--global--spacer--md);
 
   // Toast variables
-  --#{$alert-group}--m-toast--Top: var(--#{$pf-global}--spacer--2xl);
-  --#{$alert-group}--m-toast--Right: var(--#{$pf-global}--spacer--xl);
+  --#{$alert-group}--m-toast--Top: var(--pf-t--global--spacer--2xl);
+  --#{$alert-group}--m-toast--Right: var(--pf-t--global--spacer--xl);
   --#{$alert-group}--m-toast--MaxWidth: #{pf-size-prem(600px)};
   --#{$alert-group}--m-toast--ZIndex: var(--#{$pf-global}--ZIndex--2xl);
 
   // Overflow button
   --#{$alert-group}__overflow-button--BorderWidth: 0;
-  --#{$alert-group}__overflow-button--PaddingTop: var(--#{$pf-global}--spacer--lg);
-  --#{$alert-group}__overflow-button--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$alert-group}__overflow-button--PaddingBottom: var(--#{$pf-global}--spacer--lg);
-  --#{$alert-group}__overflow-button--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$alert-group}__overflow-button--Color: var(--#{$pf-global}--link--Color);
-  --#{$alert-group}__overflow-button--BoxShadow: var(--#{$pf-global}--BoxShadow--lg);
-  --#{$alert-group}__overflow-button--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$alert-group}__overflow-button--hover--Color: var(--#{$pf-global}--link--Color--hover);
-  --#{$alert-group}__overflow-button--hover--BoxShadow: var(--#{$pf-global}--BoxShadow--lg), var(--#{$pf-global}--BoxShadow--lg-bottom);
-  --#{$alert-group}__overflow-button--focus--Color: var(--#{$pf-global}--link--Color--hover);
-  --#{$alert-group}__overflow-button--focus--BoxShadow: var(--#{$pf-global}--BoxShadow--lg), var(--#{$pf-global}--BoxShadow--lg-bottom);
-  --#{$alert-group}__overflow-button--active--Color: var(--#{$pf-global}--link--Color--hover);
-  --#{$alert-group}__overflow-button--active--BoxShadow: var(--#{$pf-global}--BoxShadow--lg), var(--#{$pf-global}--BoxShadow--lg-bottom);
+  --#{$alert-group}__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --#{$alert-group}__overflow-button--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$alert-group}__overflow-button--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$alert-group}__overflow-button--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$alert-group}__overflow-button--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$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--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);
+  --#{$alert-group}__overflow-button--focus--Color: var(--pf-t--global--text--color--link--hover);
+  --#{$alert-group}__overflow-button--focus--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
+  --#{$alert-group}__overflow-button--active--Color: var(--pf-t--global--text--color--link--hover);
+  --#{$alert-group}__overflow-button--active--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
 
   // Spacing between alerts
   > * + * {
-    margin-top: var(--#{$alert-group}__item--MarginTop);
+    margin-block-start: var(--#{$alert-group}__item--MarginTop);
   }
 
   // Toast positioning modifier
   &.pf-m-toast {
     position: fixed;
-    top: var(--#{$alert-group}--m-toast--Top);
-    right: var(--#{$alert-group}--m-toast--Right);
+    inset-block-start: var(--#{$alert-group}--m-toast--Top);
+    inset-inline-end: var(--#{$alert-group}--m-toast--Right);
     z-index: var(--#{$alert-group}--m-toast--ZIndex);
     width: calc(100% - calc(var(--#{$alert-group}--m-toast--Right) * 2));
     max-width: var(--#{$alert-group}--m-toast--MaxWidth);
@@ -46,14 +48,19 @@
 .#{$alert-group}__overflow-button {
   position: relative;
   width: 100%;
-  padding: var(--#{$alert-group}__overflow-button--PaddingTop) var(--#{$alert-group}__overflow-button--PaddingRight) var(--#{$alert-group}__overflow-button--PaddingBottom) var(--#{$alert-group}__overflow-button--PaddingLeft);
+  padding-block-start: var(--#{$alert-group}__overflow-button--PaddingTop);
+  padding-block-end: var(--#{$alert-group}__overflow-button--PaddingBottom);
+  padding-inline-start: var(--#{$alert-group}__overflow-button--PaddingLeft);
+  padding-inline-end: var(--#{$alert-group}__overflow-button--PaddingRight);
   color: var(--#{$alert-group}__overflow-button--Color);
   background-color: var(--#{$alert-group}__overflow-button--BackgroundColor);
   border-width: var(--#{$alert-group}__overflow-button--BorderWidth);
+  border-radius: var(--#{$alert-group}__overflow-button--BorderRadius);
   box-shadow: var(--#{$alert-group}__overflow-button--BoxShadow);
 
   &:hover {
     --#{$alert-group}__overflow-button--Color: var(--#{$alert-group}__overflow-button--hover--Color);
+    --#{$alert-group}__overflow-button--BackgroundColor: var(--#{$alert-group}__overflow-button--hover--BackgroundColor);
     --#{$alert-group}__overflow-button--BoxShadow: var(--#{$alert-group}__overflow-button--hover--BoxShadow);
   }