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

package/components/Accordion/accordion.css

@@ -26,6 +26,10 @@
   --pf-v5-c-accordion__toggle--after--Width: var(--pf-v5-global--BorderWidth--lg);
   --pf-v5-c-accordion__toggle--m-expanded--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
   --pf-v5-c-accordion__toggle--BackgroundColor: transparent;
+  --pf-v5-c-accordion__toggle--JustifyContent: space-between;
+  --pf-v5-c-accordion__toggle--ColumnGap: 0;
+  --pf-v5-c-accordion--m-toggle-start__toggle--JustifyContent: start;
+  --pf-v5-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-v5-global--spacer--md);
   --pf-v5-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-v5-global--spacer--lg));
   --pf-v5-c-accordion__toggle--hover__toggle-text--Color: var(--pf-v5-global--link--Color);
   --pf-v5-c-accordion__toggle--active__toggle-text--Color: var(--pf-v5-global--link--Color);
@@ -79,6 +83,10 @@
   color: var(--pf-v5-global--Color--100);
   background-color: var(--pf-v5-c-accordion--BackgroundColor);
 }
+.pf-v5-c-accordion.pf-m-toggle-start {
+  --pf-v5-c-accordion__toggle--JustifyContent: var(--pf-v5-c-accordion--m-toggle-start__toggle--JustifyContent);
+  --pf-v5-c-accordion__toggle--ColumnGap: var(--pf-v5-c-accordion--m-toggle-start__toggle--ColumnGap);
+}
 .pf-v5-c-accordion.pf-m-display-lg {
   --pf-v5-c-accordion__toggle--PaddingTop: var(--pf-v5-c-accordion--m-display-lg__toggle--PaddingTop);
   --pf-v5-c-accordion__toggle--PaddingRight: var(--pf-v5-c-accordion--m-display-lg__toggle--PaddingRight);
@@ -105,39 +113,47 @@
 }
 .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 {
   position: relative;
   display: flex;
+  column-gap: var(--pf-v5-c-accordion__toggle--ColumnGap);
   align-items: center;
-  justify-content: space-between;
+  justify-content: var(--pf-v5-c-accordion__toggle--JustifyContent);
   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 +161,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 +209,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 +227,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

@@ -19,6 +19,12 @@
   --#{$accordion}__toggle--after--Width: var(--#{$pf-global}--BorderWidth--lg);
   --#{$accordion}__toggle--m-expanded--after--BackgroundColor: var(--#{$pf-global}--primary-color--100);
   --#{$accordion}__toggle--BackgroundColor: transparent;
+  --#{$accordion}__toggle--JustifyContent: space-between;
+  --#{$accordion}__toggle--ColumnGap: 0;
+
+  // Accordion toggle toggle-start modifier
+  --#{$accordion}--m-toggle-start__toggle--JustifyContent: start;
+  --#{$accordion}--m-toggle-start__toggle--ColumnGap: var(--#{$pf-global}--spacer--md);
 
   // accordion toggle text
   --#{$accordion}__toggle-text--MaxWidth: calc(100% - var(--#{$pf-global}--spacer--lg));
@@ -85,6 +91,11 @@
 
   background-color: var(--#{$accordion}--BackgroundColor);
 
+  &.pf-m-toggle-start {
+    --#{$accordion}__toggle--JustifyContent: var(--#{$accordion}--m-toggle-start__toggle--JustifyContent);
+    --#{$accordion}__toggle--ColumnGap: var(--#{$accordion}--m-toggle-start__toggle--ColumnGap);
+  }
+
   &.pf-m-display-lg {
     --#{$accordion}__toggle--PaddingTop: var(--#{$accordion}--m-display-lg__toggle--PaddingTop);
     --#{$accordion}__toggle--PaddingRight: var(--#{$accordion}--m-display-lg__toggle--PaddingRight);
@@ -114,18 +125,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 +154,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);
           }
         }
       }
@@ -157,10 +172,14 @@
 .#{$accordion}__toggle {
   position: relative;
   display: flex;
+  column-gap: var(--#{$accordion}__toggle--ColumnGap);
   align-items: center;
-  justify-content: space-between;
+  justify-content: var(--#{$accordion}__toggle--JustifyContent);
   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 +187,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 +242,8 @@
 }
 
 .#{$accordion}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   transition: var(--#{$accordion}__toggle-icon--Transition);
 }
 
@@ -242,13 +263,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);
   }