@patternfly/patternfly 6.0.0-alpha.6 → 6.0.0-alpha.60

package/components/AppLauncher/app-launcher.css

@@ -70,15 +70,18 @@
   color: var(--pf-v5-c-app-launcher__toggle--m-expanded--Color);
 }
 .pf-v5-c-app-launcher .pf-v5-c-divider {
-  margin-top: var(--pf-v5-c-app-launcher--c-divider--MarginTop);
-  margin-bottom: var(--pf-v5-c-app-launcher--c-divider--MarginBottom);
+  margin-block-start: var(--pf-v5-c-app-launcher--c-divider--MarginTop);
+  margin-block-end: var(--pf-v5-c-app-launcher--c-divider--MarginBottom);
 }
 .pf-v5-c-app-launcher .pf-v5-c-divider:last-child {
   --pf-v5-c-app-launcher--c-divider--MarginBottom: 0;
 }
 
 .pf-v5-c-app-launcher__toggle {
-  padding: var(--pf-v5-c-app-launcher__toggle--PaddingTop) var(--pf-v5-c-app-launcher__toggle--PaddingRight) var(--pf-v5-c-app-launcher__toggle--PaddingBottom) var(--pf-v5-c-app-launcher__toggle--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-app-launcher__toggle--PaddingTop);
+  padding-block-end: var(--pf-v5-c-app-launcher__toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-app-launcher__toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-app-launcher__toggle--PaddingRight);
   color: var(--pf-v5-c-app-launcher__toggle--Color);
   background-color: var(--pf-v5-c-app-launcher__toggle--BackgroundColor);
   border: none;
@@ -99,17 +102,17 @@
 
 .pf-v5-c-app-launcher__menu {
   position: absolute;
-  top: var(--pf-v5-c-app-launcher__menu--Top);
+  inset-block-start: var(--pf-v5-c-app-launcher__menu--Top);
   z-index: var(--pf-v5-c-app-launcher__menu--ZIndex);
   min-width: 100%;
-  padding-top: var(--pf-v5-c-app-launcher__menu--PaddingTop);
-  padding-bottom: var(--pf-v5-c-app-launcher__menu--PaddingBottom);
+  padding-block-start: var(--pf-v5-c-app-launcher__menu--PaddingTop);
+  padding-block-end: var(--pf-v5-c-app-launcher__menu--PaddingBottom);
   background-color: var(--pf-v5-c-app-launcher__menu--BackgroundColor);
   background-clip: padding-box;
   box-shadow: var(--pf-v5-c-app-launcher__menu--BoxShadow);
 }
 .pf-v5-c-app-launcher__menu.pf-m-align-right {
-  right: 0;
+  inset-inline-end: 0;
 }
 .pf-v5-c-app-launcher.pf-m-top .pf-v5-c-app-launcher__menu {
   --pf-v5-c-app-launcher__menu--Top: var(--pf-v5-c-app-launcher--m-top__menu--Top);
@@ -118,18 +121,21 @@
 .pf-v5-c-app-launcher__menu.pf-m-static {
   --pf-v5-c-app-launcher--m-top__menu--TranslateY: 0;
   position: static;
-  top: auto;
-  right: auto;
-  bottom: auto;
-  left: auto;
+  inset-block-start: auto;
+  inset-block-end: auto;
+  inset-inline-start: auto;
+  inset-inline-end: auto;
   z-index: auto;
   min-width: min-content;
 }
 
 .pf-v5-c-app-launcher__menu-search {
-  padding: var(--pf-v5-c-app-launcher__menu-search--PaddingTop) var(--pf-v5-c-app-launcher__menu-search--PaddingRight) var(--pf-v5-c-app-launcher__menu-search--PaddingBottom) var(--pf-v5-c-app-launcher__menu-search--PaddingLeft);
-  margin-bottom: var(--pf-v5-c-app-launcher__menu-search--MarginBottom);
-  border-bottom: var(--pf-v5-c-app-launcher__menu-search--BottomBorderWidth) solid var(--pf-v5-c-app-launcher__menu-search--BottomBorderColor);
+  padding-block-start: var(--pf-v5-c-app-launcher__menu-search--PaddingTop);
+  padding-block-end: var(--pf-v5-c-app-launcher__menu-search--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-app-launcher__menu-search--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-app-launcher__menu-search--PaddingRight);
+  margin-block-end: var(--pf-v5-c-app-launcher__menu-search--MarginBottom);
+  border-block-end: var(--pf-v5-c-app-launcher__menu-search--BottomBorderWidth) solid var(--pf-v5-c-app-launcher__menu-search--BottomBorderColor);
 }
 
 .pf-v5-c-app-launcher__menu-wrapper {
@@ -144,7 +150,10 @@
   display: flex;
   align-items: center;
   width: var(--pf-v5-c-app-launcher__menu-item--Width);
-  padding: var(--pf-v5-c-app-launcher__menu-item--PaddingTop) var(--pf-v5-c-app-launcher__menu-item--PaddingRight) var(--pf-v5-c-app-launcher__menu-item--PaddingBottom) var(--pf-v5-c-app-launcher__menu-item--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-app-launcher__menu-item--PaddingTop);
+  padding-block-end: var(--pf-v5-c-app-launcher__menu-item--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-app-launcher__menu-item--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-app-launcher__menu-item--PaddingRight);
   font-weight: var(--pf-v5-c-app-launcher__menu-item--FontWeight);
   color: var(--pf-v5-c-app-launcher__menu-item--Color);
   white-space: nowrap;
@@ -194,7 +203,7 @@
   justify-content: center;
   width: var(--pf-v5-c-app-launcher__menu-item-icon--Width);
   height: var(--pf-v5-c-app-launcher__menu-item-icon--Height);
-  margin-right: var(--pf-v5-c-app-launcher__menu-item-icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-app-launcher__menu-item-icon--MarginRight);
 }
 .pf-v5-c-app-launcher__menu-item-icon > * {
   max-width: 100%;
@@ -202,8 +211,8 @@
 }
 
 .pf-v5-c-app-launcher__menu-item-external-icon {
-  padding-left: var(--pf-v5-c-app-launcher__menu-item-external-icon--PaddingLeft);
-  margin-left: auto;
+  padding-inline-start: var(--pf-v5-c-app-launcher__menu-item-external-icon--PaddingLeft);
+  margin-inline-start: auto;
   font-size: var(--pf-v5-c-app-launcher__menu-item-external-icon--FontSize);
   color: var(--pf-v5-c-app-launcher__menu-item-external-icon--Color);
   opacity: 0;
@@ -211,14 +220,14 @@
 }
 
 .pf-v5-c-app-launcher__group + .pf-v5-c-app-launcher__group {
-  padding-top: var(--pf-v5-c-app-launcher__group--group--PaddingTop);
+  padding-block-start: var(--pf-v5-c-app-launcher__group--group--PaddingTop);
 }
 
 .pf-v5-c-app-launcher__group-title {
-  padding-top: var(--pf-v5-c-app-launcher__group-title--PaddingTop);
-  padding-right: var(--pf-v5-c-app-launcher__group-title--PaddingRight);
-  padding-bottom: var(--pf-v5-c-app-launcher__group-title--PaddingBottom);
-  padding-left: var(--pf-v5-c-app-launcher__group-title--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-app-launcher__group-title--PaddingTop);
+  padding-block-end: var(--pf-v5-c-app-launcher__group-title--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-app-launcher__group-title--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-app-launcher__group-title--PaddingRight);
   font-size: var(--pf-v5-c-app-launcher__group-title--FontSize);
   font-weight: var(--pf-v5-c-app-launcher__group-title--FontWeight);
   color: var(--pf-v5-c-app-launcher__group-title--Color);

package/components/AppLauncher/app-launcher.scss

@@ -93,8 +93,8 @@
   }
 
   .#{$divider} {
-    margin-top: var(--#{$app-launcher}--c-divider--MarginTop);
-    margin-bottom: var(--#{$app-launcher}--c-divider--MarginBottom);
+    margin-block-start: var(--#{$app-launcher}--c-divider--MarginTop);
+    margin-block-end: var(--#{$app-launcher}--c-divider--MarginBottom);
 
     // Support divider as last item in group to separate groups
     &:last-child {
@@ -104,7 +104,10 @@
 }
 
 .#{$app-launcher}__toggle {
-  padding: var(--#{$app-launcher}__toggle--PaddingTop) var(--#{$app-launcher}__toggle--PaddingRight) var(--#{$app-launcher}__toggle--PaddingBottom) var(--#{$app-launcher}__toggle--PaddingLeft);
+  padding-block-start: var(--#{$app-launcher}__toggle--PaddingTop);
+  padding-block-end: var(--#{$app-launcher}__toggle--PaddingBottom);
+  padding-inline-start: var(--#{$app-launcher}__toggle--PaddingLeft);
+  padding-inline-end: var(--#{$app-launcher}__toggle--PaddingRight);
   color: var(--#{$app-launcher}__toggle--Color);
   background-color: var(--#{$app-launcher}__toggle--BackgroundColor);
   border: none;
@@ -131,17 +134,17 @@
 
 .#{$app-launcher}__menu {
   position: absolute;
-  top: var(--#{$app-launcher}__menu--Top);
+  inset-block-start: var(--#{$app-launcher}__menu--Top);
   z-index: var(--#{$app-launcher}__menu--ZIndex);
   min-width: 100%;
-  padding-top: var(--#{$app-launcher}__menu--PaddingTop);
-  padding-bottom: var(--#{$app-launcher}__menu--PaddingBottom);
+  padding-block-start: var(--#{$app-launcher}__menu--PaddingTop);
+  padding-block-end: var(--#{$app-launcher}__menu--PaddingBottom);
   background-color: var(--#{$app-launcher}__menu--BackgroundColor);
   background-clip: padding-box;
   box-shadow: var(--#{$app-launcher}__menu--BoxShadow);
 
   &.pf-m-align-right {
-    right: 0;
+   inset-inline-end: 0;
   }
 
   .#{$app-launcher}.pf-m-top & {
@@ -154,19 +157,22 @@
     --#{$app-launcher}--m-top__menu--TranslateY: 0;
 
     position: static;
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
+    inset-block-start: auto;
+    inset-block-end: auto;
+    inset-inline-start: auto;
+    inset-inline-end: auto;
     z-index: auto;
     min-width: min-content;
   }
 }
 
 .#{$app-launcher}__menu-search {
-  padding: var(--#{$app-launcher}__menu-search--PaddingTop) var(--#{$app-launcher}__menu-search--PaddingRight) var(--#{$app-launcher}__menu-search--PaddingBottom) var(--#{$app-launcher}__menu-search--PaddingLeft);
-  margin-bottom: var(--#{$app-launcher}__menu-search--MarginBottom);
-  border-bottom: var(--#{$app-launcher}__menu-search--BottomBorderWidth) solid var(--#{$app-launcher}__menu-search--BottomBorderColor);
+  padding-block-start: var(--#{$app-launcher}__menu-search--PaddingTop);
+  padding-block-end: var(--#{$app-launcher}__menu-search--PaddingBottom);
+  padding-inline-start: var(--#{$app-launcher}__menu-search--PaddingLeft);
+  padding-inline-end: var(--#{$app-launcher}__menu-search--PaddingRight);
+  margin-block-end: var(--#{$app-launcher}__menu-search--MarginBottom);
+  border-block-end: var(--#{$app-launcher}__menu-search--BottomBorderWidth) solid var(--#{$app-launcher}__menu-search--BottomBorderColor);
 }
 
 .#{$app-launcher}__menu-wrapper {
@@ -182,7 +188,10 @@
   display: flex;
   align-items: center;
   width: var(--#{$app-launcher}__menu-item--Width);
-  padding: var(--#{$app-launcher}__menu-item--PaddingTop) var(--#{$app-launcher}__menu-item--PaddingRight) var(--#{$app-launcher}__menu-item--PaddingBottom) var(--#{$app-launcher}__menu-item--PaddingLeft);
+  padding-block-start: var(--#{$app-launcher}__menu-item--PaddingTop);
+  padding-block-end: var(--#{$app-launcher}__menu-item--PaddingBottom);
+  padding-inline-start: var(--#{$app-launcher}__menu-item--PaddingLeft);
+  padding-inline-end: var(--#{$app-launcher}__menu-item--PaddingRight);
   font-weight: var(--#{$app-launcher}__menu-item--FontWeight);
   color: var(--#{$app-launcher}__menu-item--Color);
   white-space: nowrap;
@@ -258,7 +267,7 @@
   justify-content: center;
   width: var(--#{$app-launcher}__menu-item-icon--Width);
   height: var(--#{$app-launcher}__menu-item-icon--Height);
-  margin-right: var(--#{$app-launcher}__menu-item-icon--MarginRight);
+  margin-inline-end: var(--#{$app-launcher}__menu-item-icon--MarginRight);
 
   > * {
     max-width: 100%;
@@ -267,8 +276,8 @@
 }
 
 .#{$app-launcher}__menu-item-external-icon {
-  padding-left: var(--#{$app-launcher}__menu-item-external-icon--PaddingLeft);
-  margin-left: auto;
+  padding-inline-start: var(--#{$app-launcher}__menu-item-external-icon--PaddingLeft);
+  margin-inline-start: auto;
   font-size: var(--#{$app-launcher}__menu-item-external-icon--FontSize);
   color: var(--#{$app-launcher}__menu-item-external-icon--Color);
   opacity: 0;
@@ -277,15 +286,15 @@
 
 .#{$app-launcher}__group {
   & + & {
-    padding-top: var(--#{$app-launcher}__group--group--PaddingTop);
+    padding-block-start: var(--#{$app-launcher}__group--group--PaddingTop);
   }
 }
 
 .#{$app-launcher}__group-title {
-  padding-top: var(--#{$app-launcher}__group-title--PaddingTop);
-  padding-right: var(--#{$app-launcher}__group-title--PaddingRight);
-  padding-bottom: var(--#{$app-launcher}__group-title--PaddingBottom);
-  padding-left: var(--#{$app-launcher}__group-title--PaddingLeft);
+  padding-block-start: var(--#{$app-launcher}__group-title--PaddingTop);
+  padding-block-end: var(--#{$app-launcher}__group-title--PaddingBottom);
+  padding-inline-start: var(--#{$app-launcher}__group-title--PaddingLeft);
+  padding-inline-end: var(--#{$app-launcher}__group-title--PaddingRight);
   font-size: var(--#{$app-launcher}__group-title--FontSize);
   font-weight: var(--#{$app-launcher}__group-title--FontWeight);
   color: var(--#{$app-launcher}__group-title--Color);

package/components/Avatar/avatar.css

@@ -1,7 +1,7 @@
-.pf-v5-c-avatar {
+:root, .pf-v5-c-avatar {
   --pf-v5-c-avatar--BorderColor: transparent;
   --pf-v5-c-avatar--BorderWidth: 0;
-  --pf-v5-c-avatar--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
+  --pf-v5-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v5-c-avatar--Width: 2.25rem;
   --pf-v5-c-avatar--Height: 2.25rem;
   --pf-v5-c-avatar--m-sm--Width: 1.5rem;
@@ -12,22 +12,19 @@
   --pf-v5-c-avatar--m-lg--Height: 4.5rem;
   --pf-v5-c-avatar--m-xl--Width: 8rem;
   --pf-v5-c-avatar--m-xl--Height: 8rem;
-  --pf-v5-c-avatar--m-light--BorderColor: var(--pf-v5-global--BorderColor--dark-100);
-  --pf-v5-c-avatar--m-light--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-avatar--m-dark--BorderColor: var(--pf-v5-global--palette--black-700);
-  --pf-v5-c-avatar--m-dark--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-avatar--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-avatar--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
+}
+
+.pf-v5-c-avatar {
   width: var(--pf-v5-c-avatar--Width);
   height: var(--pf-v5-c-avatar--Height);
   border: var(--pf-v5-c-avatar--BorderWidth) solid var(--pf-v5-c-avatar--BorderColor);
   border-radius: var(--pf-v5-c-avatar--BorderRadius);
 }
-.pf-v5-c-avatar.pf-m-light {
-  --pf-v5-c-avatar--BorderColor: var(--pf-v5-c-avatar--m-light--BorderColor);
-  --pf-v5-c-avatar--BorderWidth: var(--pf-v5-c-avatar--m-light--BorderWidth);
-}
-.pf-v5-c-avatar.pf-m-dark {
-  --pf-v5-c-avatar--BorderColor: var(--pf-v5-c-avatar--m-dark--BorderColor);
-  --pf-v5-c-avatar--BorderWidth: var(--pf-v5-c-avatar--m-dark--BorderWidth);
+.pf-v5-c-avatar.pf-m-bordered {
+  --pf-v5-c-avatar--BorderColor: var(--pf-v5-c-avatar--m-bordered--BorderColor);
+  --pf-v5-c-avatar--BorderWidth: var(--pf-v5-c-avatar--m-bordered--BorderWidth);
 }
 .pf-v5-c-avatar.pf-m-sm {
   --pf-v5-c-avatar--Width: var(--pf-v5-c-avatar--m-sm--Width);

package/components/Avatar/avatar.scss

@@ -2,10 +2,10 @@
 $pf-v5-c-avatar--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 $pf-v5-c-avatar--sizes: "sm", "md", "lg", "xl";
 
-.#{$avatar} {
+:root, .#{$avatar} {
   --#{$avatar}--BorderColor: transparent;
   --#{$avatar}--BorderWidth: 0;
-  --#{$avatar}--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
+  --#{$avatar}--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$avatar}--Width: #{pf-size-prem(36px)};
   --#{$avatar}--Height: #{pf-size-prem(36px)};
   --#{$avatar}--m-sm--Width: #{pf-size-prem(24px)};
@@ -17,27 +17,20 @@ $pf-v5-c-avatar--sizes: "sm", "md", "lg", "xl";
   --#{$avatar}--m-xl--Width: #{pf-size-prem(128px)};
   --#{$avatar}--m-xl--Height: #{pf-size-prem(128px)};
 
-  // Light
-  --#{$avatar}--m-light--BorderColor: var(--#{$pf-global}--BorderColor--dark-100);
-  --#{$avatar}--m-light--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-
-  // Dark
-  --#{$avatar}--m-dark--BorderColor: var(--#{$pf-global}--palette--black-700);
-  --#{$avatar}--m-dark--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
+  // Bordered
+  --#{$avatar}--m-bordered--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$avatar}--m-bordered--BorderWidth: var(--pf-t--global--border--width--box--default);
+}
 
+.#{$avatar} {
   width: var(--#{$avatar}--Width);
   height: var(--#{$avatar}--Height);
   border: var(--#{$avatar}--BorderWidth) solid var(--#{$avatar}--BorderColor);
   border-radius: var(--#{$avatar}--BorderRadius);
 
-  &.pf-m-light {
-    --#{$avatar}--BorderColor: var(--#{$avatar}--m-light--BorderColor);
-    --#{$avatar}--BorderWidth: var(--#{$avatar}--m-light--BorderWidth);
-  }
-
-  &.pf-m-dark {
-    --#{$avatar}--BorderColor: var(--#{$avatar}--m-dark--BorderColor);
-    --#{$avatar}--BorderWidth: var(--#{$avatar}--m-dark--BorderWidth);
+  &.pf-m-bordered {
+    --#{$avatar}--BorderColor: var(--#{$avatar}--m-bordered--BorderColor);
+    --#{$avatar}--BorderWidth: var(--#{$avatar}--m-bordered--BorderWidth);
   }
 
   @each $size in $pf-v5-c-avatar--sizes {

package/components/BackToTop/back-to-top.css

@@ -1,23 +1,25 @@
-.pf-v5-c-back-to-top {
-  --pf-v5-c-back-to-top--Right: var(--pf-v5-global--spacer--2xl);
-  --pf-v5-c-back-to-top--Bottom: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-back-to-top--md--Bottom: var(--pf-v5-global--spacer--2xl);
-  --pf-v5-c-back-to-top--c-button--FontSize: var(--pf-v5-global--FontSize--xs);
-  --pf-v5-c-back-to-top--c-button--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
-  --pf-v5-c-back-to-top--c-button--PaddingTop: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-back-to-top--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-back-to-top--c-button--PaddingBottom: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-back-to-top--c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-back-to-top--c-button--BoxShadow: var(--pf-v5-global--BoxShadow--lg-bottom);
-  position: absolute;
-  right: var(--pf-v5-c-back-to-top--Right);
-  bottom: var(--pf-v5-c-back-to-top--Bottom);
+:root {
+  --pf-v5-c-back-to-top--Right: var(--pf-t--global--spacer--2xl);
+  --pf-v5-c-back-to-top--Bottom: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-back-to-top--md--Bottom: var(--pf-t--global--spacer--2xl);
+  --pf-v5-c-back-to-top--c-button--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-back-to-top--c-button--PaddingTop: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-back-to-top--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-back-to-top--c-button--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-back-to-top--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-back-to-top--c-button--BoxShadow: var(--pf-t--global--box-shadow--sm);
 }
 @media (min-width: 768px) {
-  .pf-v5-c-back-to-top {
+  :root {
     --pf-v5-c-back-to-top--Bottom: var(--pf-v5-c-back-to-top--md--Bottom);
   }
 }
+
+.pf-v5-c-back-to-top {
+  position: absolute;
+  inset-block-end: var(--pf-v5-c-back-to-top--Bottom);
+  inset-inline-end: var(--pf-v5-c-back-to-top--Right);
+}
 .pf-v5-c-back-to-top.pf-m-hidden {
   display: none;
 }

package/components/BackToTop/back-to-top.scss

@@ -1,24 +1,25 @@
 // @debug $back-to-top; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$back-to-top} {
-  --#{$back-to-top}--Right: var(--#{$pf-global}--spacer--2xl);
-  --#{$back-to-top}--Bottom: var(--#{$pf-global}--spacer--lg);
-  --#{$back-to-top}--md--Bottom: var(--#{$pf-global}--spacer--2xl);
-  --#{$back-to-top}--c-button--FontSize: var(--#{$pf-global}--FontSize--xs);
-  --#{$back-to-top}--c-button--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
-  --#{$back-to-top}--c-button--PaddingTop: var(--#{$pf-global}--spacer--xs);
-  --#{$back-to-top}--c-button--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$back-to-top}--c-button--PaddingBottom: var(--#{$pf-global}--spacer--xs);
-  --#{$back-to-top}--c-button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$back-to-top}--c-button--BoxShadow: var(--#{$pf-global}--BoxShadow--lg-bottom);
+:root {
+  --#{$back-to-top}--Right: var(--pf-t--global--spacer--2xl);
+  --#{$back-to-top}--Bottom: var(--pf-t--global--spacer--lg);
+  --#{$back-to-top}--md--Bottom: var(--pf-t--global--spacer--2xl);
+  --#{$back-to-top}--c-button--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$back-to-top}--c-button--PaddingTop: var(--pf-t--global--spacer--xs);
+  --#{$back-to-top}--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$back-to-top}--c-button--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --#{$back-to-top}--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$back-to-top}--c-button--BoxShadow: var(--pf-t--global--box-shadow--sm);
 
   @media (min-width: $pf-v5-global--breakpoint--md) {
     --#{$back-to-top}--Bottom: var(--#{$back-to-top}--md--Bottom);
   }
+}
 
+.#{$back-to-top} {
   position: absolute;
-  right: var(--#{$back-to-top}--Right);
-  bottom: var(--#{$back-to-top}--Bottom);
+  inset-block-end: var(--#{$back-to-top}--Bottom);
+  inset-inline-end: var(--#{$back-to-top}--Right);
 
   &.pf-m-hidden {
     display: none;

package/components/Backdrop/backdrop.css

@@ -1,10 +1,14 @@
+:root,
 .pf-v5-c-backdrop {
   --pf-v5-c-backdrop--Position: fixed;
-  --pf-v5-c-backdrop--ZIndex: var(--pf-v5-global--ZIndex--lg);
-  --pf-v5-c-backdrop--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-100);
+  --pf-v5-c-backdrop--ZIndex: var(--pf-t--global--Zindex--lg);
+  --pf-v5-c-backdrop--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
+}
+
+.pf-v5-c-backdrop {
   position: var(--pf-v5-c-backdrop--Position);
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: var(--pf-v5-c-backdrop--ZIndex);
   width: 100%;
   height: 100%;

package/components/Backdrop/backdrop.scss

@@ -1,13 +1,16 @@
 // @debug $backdrop; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
+:root,
 .#{$backdrop} {
   --#{$backdrop}--Position: fixed;
-  --#{$backdrop}--ZIndex: var(--#{$pf-global}--ZIndex--lg);
-  --#{$backdrop}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-transparent-100);
+  --#{$backdrop}--ZIndex: var(--pf-t--global--Zindex--lg);
+  --#{$backdrop}--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
+}
 
+.#{$backdrop} {
   position: var(--#{$backdrop}--Position);
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: var(--#{$backdrop}--ZIndex);
   width: 100%;
   height: 100%;

package/components/BackgroundImage/background-image.css

@@ -1,14 +1,18 @@
+:root,
 .pf-v5-c-background-image {
-  --pf-v5-c-background-image--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
+  --pf-v5-c-background-image--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v5-c-background-image--BackgroundImage: none;
-  --pf-v5-c-background-image--BackgroundPosition: bottom right;
   --pf-v5-c-background-image--BackgroundSize--min-width: 200px;
   --pf-v5-c-background-image--BackgroundSize--width: 60%;
   --pf-v5-c-background-image--BackgroundSize--max-width: 600px;
   --pf-v5-c-background-image--BackgroundSize: clamp(var(--pf-v5-c-background-image--BackgroundSize--min-width), var(--pf-v5-c-background-image--BackgroundSize--width), var(--pf-v5-c-background-image--BackgroundSize--max-width));
+}
+
+.pf-v5-c-background-image {
+  --pf-v5-c-background-image--BackgroundPosition: bottom right;
   position: fixed;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: -1;
   width: 100%;
   height: 100%;
@@ -17,4 +21,7 @@
   background-repeat: no-repeat;
   background-position: var(--pf-v5-c-background-image--BackgroundPosition);
   background-size: var(--pf-v5-c-background-image--BackgroundSize);
+}
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-background-image {
+  --pf-v5-c-background-image--BackgroundPosition: bottom left;
 }

package/components/BackgroundImage/background-image.scss

@@ -1,17 +1,26 @@
 // @debug $background-image; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
+:root,
 .#{$background-image} {
-  --#{$background-image}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-100);
+  --#{$background-image}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$background-image}--BackgroundImage: none;
-  --#{$background-image}--BackgroundPosition: bottom right;
   --#{$background-image}--BackgroundSize--min-width: 200px;
   --#{$background-image}--BackgroundSize--width: 60%;
   --#{$background-image}--BackgroundSize--max-width: 600px;
   --#{$background-image}--BackgroundSize: clamp(var(--#{$background-image}--BackgroundSize--min-width), var(--#{$background-image}--BackgroundSize--width), var(--#{$background-image}--BackgroundSize--max-width));
 
+}
+
+.#{$background-image} {
+  @include pf-v5-bidirectional-style(
+    $prop: --#{$background-image}--BackgroundPosition,
+    $ltr-val: bottom right,
+    $rtl-val: bottom left
+  );
+
   position: fixed;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: -1;
   width: 100%;
   height: 100%;

package/components/Badge/badge.css

@@ -1,19 +1,26 @@
+:root {
+  --pf-v5-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
+  --pf-v5-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v5-c-badge--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-badge--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
+  --pf-v5-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-badge__toggle-icon--MarginLeft: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
+  --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
+  --pf-v5-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
+  --pf-v5-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
+  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v5-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
+  --pf-v5-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
+}
+
 .pf-v5-c-badge {
-  --pf-v5-c-badge--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
-  --pf-v5-c-badge--FontSize: var(--pf-v5-global--FontSize--xs);
-  --pf-v5-c-badge--FontWeight: var(--pf-v5-global--FontWeight--bold);
-  --pf-v5-c-badge--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-badge--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-badge--Color: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-c-badge--MinWidth: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-badge--m-read--Color: var(--pf-v5-global--Color--dark-100);
-  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--Color--light-100);
   display: inline-block;
   min-width: var(--pf-v5-c-badge--MinWidth);
-  padding-right: var(--pf-v5-c-badge--PaddingRight);
-  padding-left: var(--pf-v5-c-badge--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-badge--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-badge--PaddingRight);
   font-size: var(--pf-v5-c-badge--FontSize);
   font-weight: var(--pf-v5-c-badge--FontWeight);
   color: var(--pf-v5-c-badge--Color);
@@ -25,14 +32,15 @@
 .pf-v5-c-badge.pf-m-read {
   --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-read--Color);
   --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-read--BackgroundColor);
+  --pf-v5-c-badge__toggle-icon--Color: var(--pf-v5-c-badge--m-read__toggle-icon--Color);
 }
 .pf-v5-c-badge.pf-m-unread {
   --pf-v5-c-badge--Color: var(--pf-v5-c-badge--m-unread--Color);
   --pf-v5-c-badge--BackgroundColor: var(--pf-v5-c-badge--m-unread--BackgroundColor);
+  --pf-v5-c-badge__toggle-icon--Color: var(--pf-v5-c-badge--m-unread__toggle-icon--Color);
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-badge {
-  --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-global--palette--black-500);
-  --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--primary-color--400);
-  --pf-v5-c-badge--m-unread--BackgroundColor: var(--pf-v5-global--primary-color--300);
+.pf-v5-c-badge__toggle-icon {
+  margin-inline-start: var(--pf-v5-c-badge__toggle-icon--MarginLeft);
+  color: var(--pf-v5-c-badge__toggle-icon--Color);
 }