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

package/components/SimpleList/simple-list.scss

@@ -1,91 +1,87 @@
 // @debug $simple-list; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$simple-list} {
+:root, .#{$simple-list} {
   // Simple list item link
-  --#{$simple-list}__item-link--PaddingTop: var(--#{$pf-global}--spacer--xs);
-  --#{$simple-list}__item-link--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$simple-list}__item-link--PaddingBottom: var(--#{$pf-global}--spacer--xs);
-  --#{$simple-list}__item-link--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$simple-list}__item-link--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$simple-list}__item-link--Color: var(--#{$pf-global}--Color--100);
-  --#{$simple-list}__item-link--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$simple-list}__item-link--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
-  --#{$simple-list}__item-link--m-current--Color: var(--#{$pf-global}--link--Color);
-  --#{$simple-list}__item-link--m-current--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-  --#{$simple-list}__item-link--m-current--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
-  --#{$simple-list}__item-link--hover--Color: var(--#{$pf-global}--Color--100); // remove at breaking change
-  --#{$simple-list}__item-link--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-  --#{$simple-list}__item-link--focus--Color: var(--#{$pf-global}--Color--100); // remove at breaking change
-  --#{$simple-list}__item-link--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-  --#{$simple-list}__item-link--focus--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
-  --#{$simple-list}__item-link--active--Color: var(--#{$pf-global}--Color--100); // remove at breaking change
-  --#{$simple-list}__item-link--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-  --#{$simple-list}__item-link--active--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
+  --#{$simple-list}__item-link--PaddingTop: var(--pf-t--global--spacer--xs);
+  --#{$simple-list}__item-link--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$simple-list}__item-link--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --#{$simple-list}__item-link--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$simple-list}__item-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --#{$simple-list}__item-link--Color: var(--pf-t--global--text--color--subtle);
+  --#{$simple-list}__item-link--FontSize: var(--pf-t--global--font--size--body--default);
+  --#{$simple-list}__item-link--m-current--Color: var(--pf-t--global--text--color--regular);
+  --#{$simple-list}__item-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
+  --#{$simple-list}__item-link--hover--Color: var(--pf-t--global--text--color--subtle);
+  --#{$simple-list}__item-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+  --#{$simple-list}__item-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
+  --#{$simple-list}__item-link--BorderRadius: var(--pf-t--global--border--radius--tiny);
+
+  // Simple list item link
+  --#{$simple-list}__item-link--m-link--Color: var(--pf-t--global--text--color--link--default);
+  --#{$simple-list}__item-link--m-link--m-current--Color: var(--pf-t--global--text--color--link--hover);
+  --#{$simple-list}__item-link--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
 
   // Simple list title
-  --#{$simple-list}__title--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$simple-list}__title--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$simple-list}__title--PaddingBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$simple-list}__title--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$simple-list}__title--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$simple-list}__title--Color: var(--#{$pf-global}--Color--dark-200);
-  --#{$simple-list}__title--FontWeight: var(--#{$pf-global}--FontWeight--bold);
+  --#{$simple-list}__title--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$simple-list}__title--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$simple-list}__title--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$simple-list}__title--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$simple-list}__title--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$simple-list}__title--Color: var(--pf-t--global--text--color--regular);
+  --#{$simple-list}__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
 
   // Simple list section
-  --#{$simple-list}__section--section--MarginTop: var(--#{$pf-global}--spacer--sm);
+  --#{$simple-list}__section--section--MarginTop: var(--pf-t--global--spacer--sm);
 }
 
 .#{$simple-list}__item-link {
   display: block;
   width: 100%;
-  padding: var(--#{$simple-list}__item-link--PaddingTop) var(--#{$simple-list}__item-link--PaddingRight) var(--#{$simple-list}__item-link--PaddingBottom) var(--#{$simple-list}__item-link--PaddingLeft);
+  padding-block-start: var(--#{$simple-list}__item-link--PaddingTop);
+  padding-block-end: var(--#{$simple-list}__item-link--PaddingBottom);
+  padding-inline-start: var(--#{$simple-list}__item-link--PaddingLeft);
+  padding-inline-end: var(--#{$simple-list}__item-link--PaddingRight);
   font-size: var(--#{$simple-list}__item-link--FontSize);
-  font-weight: var(--#{$simple-list}__item-link--FontWeight);
   color: var(--#{$simple-list}__item-link--Color);
-  text-align: left;
+  text-align: start;
+  text-decoration: none;
   background-color: var(--#{$simple-list}__item-link--BackgroundColor);
   border: none;
+  border-radius: var(--#{$simple-list}__item-link--BorderRadius);
+  
+  &.pf-m-link {
+    --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--m-link--Color);
+    --#{$simple-list}__item-link--hover--Color: var(--#{$simple-list}__item-link--m-link--m-current--Color);
+    --#{$simple-list}__item-link--m-current--Color:  var(--#{$simple-list}__item-link--m-link--hover--Color);
+  }
 
-  &:hover {
+  &:hover,
+  &:focus {
     --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--hover--BackgroundColor);
     --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--hover--Color);
 
     text-decoration: none;
-  }
-
-  &:focus {
-    --#{$simple-list}__item-link--FontWeight: var(--#{$simple-list}__item-link--focus--FontWeight);
-    --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--focus--BackgroundColor);
-    --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--focus--Color);
-  }
-
-  &:active {
-    --#{$simple-list}__item-link--FontWeight: var(--#{$simple-list}__item-link--active--FontWeight);
-    --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--active--BackgroundColor);
-    --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--active--Color);
+    mix-blend-mode: var(--#{$simple-list}__item-link--MixBlendMode);
   }
 
   &.pf-m-current {
-    --#{$simple-list}__item-link--FontWeight: var(--#{$simple-list}__item-link--m-current--FontWeight);
     --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--m-current--BackgroundColor);
     --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--m-current--Color);
+
+    mix-blend-mode: var(--#{$simple-list}__item-link--MixBlendMode);
   }
 }
 
 .#{$simple-list}__title {
-  padding: var(--#{$simple-list}__title--PaddingTop) var(--#{$simple-list}__title--PaddingRight) var(--#{$simple-list}__title--PaddingBottom) var(--#{$simple-list}__title--PaddingLeft);
+  padding-block-start: var(--#{$simple-list}__title--PaddingTop);
+  padding-block-end: var(--#{$simple-list}__title--PaddingBottom);
+  padding-inline-start: var(--#{$simple-list}__title--PaddingLeft);
+  padding-inline-end: var(--#{$simple-list}__title--PaddingRight);
   font-size: var(--#{$simple-list}__title--FontSize);
   font-weight: var(--#{$simple-list}__title--FontWeight);
   color: var(--#{$simple-list}__title--Color);
 }
 
 .#{$simple-list}__section + .#{$simple-list}__section {
-  margin-top: var(--#{$simple-list}__section--section--MarginTop);
-}
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/simple-list";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-simple-list;
-}
+  margin-block-start: var(--#{$simple-list}__section--section--MarginTop);
+}

package/components/Skeleton/skeleton.css

@@ -1,31 +1,32 @@
 @charset "UTF-8";
+:root,
 .pf-v5-c-skeleton {
-  --pf-v5-c-skeleton--BackgroundColor: var(--pf-v5-global--palette--black-150);
+  --pf-v5-c-skeleton--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v5-c-skeleton--Width: auto;
   --pf-v5-c-skeleton--Height: auto;
-  --pf-v5-c-skeleton--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
+  --pf-v5-c-skeleton--BorderRadius: var(--pf-t--global--spacer--sm);
   --pf-v5-c-skeleton--before--PaddingBottom: 0;
   --pf-v5-c-skeleton--before--Height: auto;
   --pf-v5-c-skeleton--before--Content: " ";
   --pf-v5-c-skeleton--after--LinearGradientAngle: 90deg;
-  --pf-v5-c-skeleton--after--LinearGradientColorStop1: var(--pf-v5-global--palette--black-150);
-  --pf-v5-c-skeleton--after--LinearGradientColorStop2: #ededed;
-  --pf-v5-c-skeleton--after--LinearGradientColorStop3: var(--pf-v5-global--palette--black-150);
+  --pf-v5-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
+  --pf-v5-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
   --pf-v5-c-skeleton--after--TranslateX: -100%;
   --pf-v5-c-skeleton--after--AnimationName: pf-v5-c-skeleton-loading;
-  --pf-v5-c-skeleton--after--AnimationDuration: 2s;
+  --pf-v5-c-skeleton--after--AnimationDuration: 3s;
   --pf-v5-c-skeleton--after--AnimationIterationCount: infinite;
   --pf-v5-c-skeleton--after--AnimationTimingFunction: linear;
   --pf-v5-c-skeleton--after--AnimationDelay: .5s;
-  --pf-v5-c-skeleton--m-circle--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
+  --pf-v5-c-skeleton--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v5-c-skeleton--m-circle--before--PaddingBottom: 100%;
-  --pf-v5-c-skeleton--m-text-4xl--Height: calc(var(--pf-v5-global--FontSize--4xl) * var(--pf-v5-global--LineHeight--sm));
-  --pf-v5-c-skeleton--m-text-3xl--Height: calc(var(--pf-v5-global--FontSize--3xl) * var(--pf-v5-global--LineHeight--sm));
-  --pf-v5-c-skeleton--m-text-2xl--Height: calc(var(--pf-v5-global--FontSize--2xl) * var(--pf-v5-global--LineHeight--sm));
-  --pf-v5-c-skeleton--m-text-xl--Height: calc(var(--pf-v5-global--FontSize--xl) * var(--pf-v5-global--LineHeight--sm));
-  --pf-v5-c-skeleton--m-text-lg--Height: calc(var(--pf-v5-global--FontSize--lg) * var(--pf-v5-global--LineHeight--md));
-  --pf-v5-c-skeleton--m-text-md--Height: calc(var(--pf-v5-global--FontSize--md) * var(--pf-v5-global--LineHeight--md));
-  --pf-v5-c-skeleton--m-text-sm--Height: calc(var(--pf-v5-global--FontSize--sm) * var(--pf-v5-global--LineHeight--md));
+  --pf-v5-c-skeleton--m-text-4xl--Height: calc(var(--pf-t--global--font--size--4xl) * var(--pf-t--global--font--line-height--heading));
+  --pf-v5-c-skeleton--m-text-3xl--Height: calc(var(--pf-t--global--font--size--3xl) * var(--pf-t--global--font--line-height--heading));
+  --pf-v5-c-skeleton--m-text-2xl--Height: calc(var(--pf-t--global--font--size--2xl) * var(--pf-t--global--font--line-height--heading));
+  --pf-v5-c-skeleton--m-text-xl--Height: calc(var(--pf-t--global--font--size--xl) * var(--pf-t--global--font--line-height--heading));
+  --pf-v5-c-skeleton--m-text-lg--Height: calc(var(--pf-t--global--font--size--lg) * var(--pf-t--global--font--line-height--body));
+  --pf-v5-c-skeleton--m-text-md--Height: calc(var(--pf-t--global--font--size--md) * var(--pf-t--global--font--line-height--body));
+  --pf-v5-c-skeleton--m-text-sm--Height: calc(var(--pf-t--global--font--size--sm) * var(--pf-t--global--font--line-height--body));
   --pf-v5-c-skeleton--m-width-sm--Width: 6.25rem;
   --pf-v5-c-skeleton--m-width-md--Width: 12.5rem;
   --pf-v5-c-skeleton--m-width-lg--Width: 18.75rem;
@@ -43,6 +44,9 @@
   --pf-v5-c-skeleton--m-height-66--Height: calc(100% / 3 * 2);
   --pf-v5-c-skeleton--m-height-75--Height: 75%;
   --pf-v5-c-skeleton--m-height-100--Height: 100%;
+}
+
+.pf-v5-c-skeleton {
   position: relative;
   width: var(--pf-v5-c-skeleton--Width);
   height: var(--pf-v5-c-skeleton--Height);
@@ -54,21 +58,22 @@
 .pf-v5-c-skeleton::before {
   display: block;
   height: var(--pf-v5-c-skeleton--before--Height);
-  padding-bottom: var(--pf-v5-c-skeleton--before--PaddingBottom);
+  padding-block-end: var(--pf-v5-c-skeleton--before--PaddingBottom);
   content: var(--pf-v5-c-skeleton--before--Content);
 }
 .pf-v5-c-skeleton::after {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   display: block;
   content: "";
   background: linear-gradient(var(--pf-v5-c-skeleton--after--LinearGradientAngle), var(--pf-v5-c-skeleton--after--LinearGradientColorStop1), var(--pf-v5-c-skeleton--after--LinearGradientColorStop2), var(--pf-v5-c-skeleton--after--LinearGradientColorStop3));
   transform: translate3d(var(--pf-v5-c-skeleton--after--TranslateX), 0, 0);
   animation: var(--pf-v5-c-skeleton--after--AnimationName) var(--pf-v5-c-skeleton--after--AnimationDuration) var(--pf-v5-c-skeleton--after--AnimationTimingFunction) var(--pf-v5-c-skeleton--after--AnimationDelay) var(--pf-v5-c-skeleton--after--AnimationIterationCount);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-skeleton::after {
+  scale: -1 1;
+}
+
 .pf-v5-c-skeleton.pf-m-circle {
   --pf-v5-c-skeleton--BorderRadius: var(--pf-v5-c-skeleton--m-circle--BorderRadius);
 }
@@ -159,10 +164,4 @@
   100% {
     transform: translateX(100%);
   }
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-skeleton {
-  --pf-v5-c-skeleton--BackgroundColor: var(--pf-v5-global--palette--black-600);
-  --pf-v5-c-skeleton--after--LinearGradientColorStop1: var(--pf-v5-global--palette--black-600);
-  --pf-v5-c-skeleton--after--LinearGradientColorStop2: var(--pf-v5-global--palette--black-500);
-  --pf-v5-c-skeleton--after--LinearGradientColorStop3: var(--pf-v5-global--palette--black-600);
 }

package/components/Skeleton/skeleton.scss

@@ -1,10 +1,11 @@
 // @debug $skeleton; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
+:root,
 .#{$skeleton} {
-  --#{$skeleton}--BackgroundColor: var(--#{$pf-global}--palette--black-150);
+  --#{$skeleton}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$skeleton}--Width: auto;
   --#{$skeleton}--Height: auto;
-  --#{$skeleton}--BorderRadius: var(--#{$pf-global}--BorderRadius--sm);
+  --#{$skeleton}--BorderRadius: var(--pf-t--global--spacer--sm);
 
   // Before
   --#{$skeleton}--before--PaddingBottom: 0;
@@ -13,28 +14,28 @@
 
   // After
   --#{$skeleton}--after--LinearGradientAngle: 90deg;
-  --#{$skeleton}--after--LinearGradientColorStop1: var(--#{$pf-global}--palette--black-150);
-  --#{$skeleton}--after--LinearGradientColorStop2: #ededed;
-  --#{$skeleton}--after--LinearGradientColorStop3: var(--#{$pf-global}--palette--black-150);
+  --#{$skeleton}--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
+  --#{$skeleton}--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover); // TODO: replace with new token
+  --#{$skeleton}--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
   --#{$skeleton}--after--TranslateX: -100%;
   --#{$skeleton}--after--AnimationName: #{$skeleton}-loading;
-  --#{$skeleton}--after--AnimationDuration: 2s;
+  --#{$skeleton}--after--AnimationDuration: 3s;
   --#{$skeleton}--after--AnimationIterationCount: infinite;
   --#{$skeleton}--after--AnimationTimingFunction: linear;
   --#{$skeleton}--after--AnimationDelay: .5s;
 
   // Circle
-  --#{$skeleton}--m-circle--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
+  --#{$skeleton}--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$skeleton}--m-circle--before--PaddingBottom: 100%;
 
   // Text modifiers
-  --#{$skeleton}--m-text-4xl--Height: calc(var(--#{$pf-global}--FontSize--4xl) * var(--#{$pf-global}--LineHeight--sm));
-  --#{$skeleton}--m-text-3xl--Height: calc(var(--#{$pf-global}--FontSize--3xl) * var(--#{$pf-global}--LineHeight--sm));
-  --#{$skeleton}--m-text-2xl--Height: calc(var(--#{$pf-global}--FontSize--2xl) * var(--#{$pf-global}--LineHeight--sm));
-  --#{$skeleton}--m-text-xl--Height: calc(var(--#{$pf-global}--FontSize--xl) * var(--#{$pf-global}--LineHeight--sm));
-  --#{$skeleton}--m-text-lg--Height: calc(var(--#{$pf-global}--FontSize--lg) * var(--#{$pf-global}--LineHeight--md));
-  --#{$skeleton}--m-text-md--Height: calc(var(--#{$pf-global}--FontSize--md) * var(--#{$pf-global}--LineHeight--md));
-  --#{$skeleton}--m-text-sm--Height: calc(var(--#{$pf-global}--FontSize--sm) * var(--#{$pf-global}--LineHeight--md));
+  --#{$skeleton}--m-text-4xl--Height: calc(var(--pf-t--global--font--size--4xl) * var(--pf-t--global--font--line-height--heading));
+  --#{$skeleton}--m-text-3xl--Height: calc(var(--pf-t--global--font--size--3xl) * var(--pf-t--global--font--line-height--heading));
+  --#{$skeleton}--m-text-2xl--Height: calc(var(--pf-t--global--font--size--2xl) * var(--pf-t--global--font--line-height--heading));
+  --#{$skeleton}--m-text-xl--Height: calc(var(--pf-t--global--font--size--xl) * var(--pf-t--global--font--line-height--heading));
+  --#{$skeleton}--m-text-lg--Height: calc(var(--pf-t--global--font--size--lg) * var(--pf-t--global--font--line-height--body));
+  --#{$skeleton}--m-text-md--Height: calc(var(--pf-t--global--font--size--md) * var(--pf-t--global--font--line-height--body));
+  --#{$skeleton}--m-text-sm--Height: calc(var(--pf-t--global--font--size--sm) * var(--pf-t--global--font--line-height--body));
 
   // Width
   --#{$skeleton}--m-width-sm--Width: #{pf-size-prem(100px)};
@@ -56,7 +57,9 @@
   --#{$skeleton}--m-height-66--Height: calc(100% / 3 * 2);
   --#{$skeleton}--m-height-75--Height: 75%;
   --#{$skeleton}--m-height-100--Height: 100%;
+}
 
+.#{$skeleton} {
   position: relative;
   width: var(--#{$skeleton}--Width);
   height: var(--#{$skeleton}--Height);
@@ -68,16 +71,15 @@
   &::before {
     display: block;
     height: var(--#{$skeleton}--before--Height);
-    padding-bottom: var(--#{$skeleton}--before--PaddingBottom);
+    padding-block-end: var(--#{$skeleton}--before--PaddingBottom);
     content: var(--#{$skeleton}--before--Content);
   }
 
   &::after {
+    @include pf-v5-mirror-inline-on-rtl;
+
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     display: block;
     content: "";
     background: linear-gradient(var(--#{$skeleton}--after--LinearGradientAngle), var(--#{$skeleton}--after--LinearGradientColorStop1), var(--#{$skeleton}--after--LinearGradientColorStop2), var(--#{$skeleton}--after--LinearGradientColorStop3));
@@ -208,10 +210,3 @@
     transform: translateX(100%);
   }
 }
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/skeleton";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-skeleton;
-}

package/components/SkipToContent/skip-to-content.css

@@ -1,12 +1,15 @@
-.pf-v5-c-skip-to-content {
-  --pf-v5-c-skip-to-content--Top: var(--pf-v5-global--spacer--md);
+:root {
+  --pf-v5-c-skip-to-content--Top: var(--pf-t--global--spacer--md);
   --pf-v5-c-skip-to-content--ZIndex: var(--pf-v5-global--ZIndex--2xl);
-  --pf-v5-c-skip-to-content--focus--Left: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-skip-to-content--focus--Left: var(--pf-t--global--spacer--md);
+}
+
+.pf-v5-c-skip-to-content {
   position: absolute;
-  top: var(--pf-v5-c-skip-to-content--Top);
-  left: -300%;
+  inset-block-start: var(--pf-v5-c-skip-to-content--Top);
+  inset-inline-start: -300%;
   z-index: var(--pf-v5-c-skip-to-content--ZIndex);
 }
 .pf-v5-c-skip-to-content:focus-within {
-  left: var(--pf-v5-c-skip-to-content--focus--Left);
+  inset-inline-start: var(--pf-v5-c-skip-to-content--focus--Left);
 }

package/components/SkipToContent/skip-to-content.scss

@@ -1,16 +1,18 @@
 // @debug $skip-to-content; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$skip-to-content} {
-  --#{$skip-to-content}--Top: var(--#{$pf-global}--spacer--md);
+:root {
+  --#{$skip-to-content}--Top: var(--pf-t--global--spacer--md);
   --#{$skip-to-content}--ZIndex: var(--#{$pf-global}--ZIndex--2xl);
-  --#{$skip-to-content}--focus--Left: var(--#{$pf-global}--spacer--md);
+  --#{$skip-to-content}--focus--Left: var(--pf-t--global--spacer--md);
+}
 
+.#{$skip-to-content} {
   position: absolute;
-  top: var(--#{$skip-to-content}--Top);
-  left: -300%; // moves off screen
+  inset-block-start: var(--#{$skip-to-content}--Top);
+  inset-inline-start: -300%; // moves off screen
   z-index: var(--#{$skip-to-content}--ZIndex);
 
   &:focus-within {
-    left: var(--#{$skip-to-content}--focus--Left);
+    inset-inline-start: var(--#{$skip-to-content}--focus--Left);
   }
 }

package/components/Slider/slider.css

@@ -1,63 +1,73 @@
+:root,
 .pf-v5-c-slider {
   --pf-v5-c-slider--value: 0;
-  --pf-v5-c-slider__rail--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-slider__rail--PaddingBottom: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-slider__step--Left: 0;
+  --pf-v5-c-slider__rail--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-slider__rail--PaddingBottom: var(--pf-t--global--spacer--md);
   --pf-v5-c-slider__rail-track--Height: 0.25rem;
-  --pf-v5-c-slider__rail-track--before--base--BackgroundColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-global--active-color--300);
-  --pf-v5-c-slider__rail-track--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
+  --pf-v5-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
+  --pf-v5-c-slider__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
   --pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v5-c-slider--value);
-  --pf-v5-c-slider__steps--FontSize: var(--pf-v5-global--FontSize--sm);
+  --pf-v5-c-slider__steps--FontSize: var(--pf-t--global--font--size--sm);
   --pf-v5-c-slider__steps--Height: var(--pf-v5-c-slider__steps--FontSize);
-  --pf-v5-c-slider__step-tick--Top: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-slider__step-tick--Top: var(--pf-t--global--spacer--md);
   --pf-v5-c-slider__step-tick--Width: 0.25rem;
   --pf-v5-c-slider__step-tick--Height: 0.25rem;
-  --pf-v5-c-slider__step-tick--BackgroundColor: var(--pf-v5-global--BorderColor--200);
+  --pf-v5-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--subtle);
   --pf-v5-c-slider__step-tick--TranslateX: -50%;
-  --pf-v5-c-slider__step-tick--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
-  --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-global--primary-color--100);
+  --pf-v5-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--large);
+  --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--brand--clicked);
   --pf-v5-c-slider__step--first-child__step-tick--TranslateX: 0;
   --pf-v5-c-slider__step--last-child__step-tick--TranslateX: -100%;
   --pf-v5-c-slider__step-label--TranslateX: -50%;
-  --pf-v5-c-slider__step-label--Top: calc(var(--pf-v5-global--spacer--xl) + var(--pf-v5-c-slider__rail-track--Height));
+  --pf-v5-c-slider__step-label--Top: calc(var(--pf-t--global--spacer--xl) + var(--pf-v5-c-slider__rail-track--Height));
   --pf-v5-c-slider__step--first-child__step-label--TranslateX: 0;
   --pf-v5-c-slider__step--last-child__step-label--TranslateX: -100%;
-  --pf-v5-c-slider__thumb--Top: calc(var(--pf-v5-c-slider__rail-track--Height) / 2 + var(--pf-v5-global--spacer--md));
+  --pf-v5-c-slider__thumb--Top: calc(var(--pf-v5-c-slider__rail-track--Height) / 2 + var(--pf-t--global--spacer--md));
   --pf-v5-c-slider__thumb--Width: 1rem;
   --pf-v5-c-slider__thumb--Height: 1rem;
   --pf-v5-c-slider__thumb--Left: var(--pf-v5-c-slider--value);
-  --pf-v5-c-slider__thumb--BackgroundColor: var(--pf-v5-global--primary-color--100);
+  --pf-v5-c-slider__thumb--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v5-c-slider__thumb--TranslateX: -50%;
   --pf-v5-c-slider__thumb--TranslateY: -50%;
-  --pf-v5-c-slider__thumb--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
+  --pf-v5-c-slider__thumb--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v5-c-slider__thumb--BoxShadow--base:
-    0 0 0 2px var(--pf-v5-global--BackgroundColor--100),
-    0 0 0 3px var(--pf-v5-global--primary-color--100);
+    0 0 0 2px var(--pf-t--global--background--color--primary--default),
+    0 0 0 3px var(--pf-t--global--color--brand--default);
   --pf-v5-c-slider__thumb--hover--BoxShadow: var(--pf-v5-c-slider__thumb--BoxShadow--base);
   --pf-v5-c-slider__thumb--focus--BoxShadow: var(--pf-v5-c-slider__thumb--BoxShadow--base);
   --pf-v5-c-slider__thumb--active--BoxShadow:
     var(--pf-v5-c-slider__thumb--BoxShadow--base),
-    0 0 2px 5px var(--pf-v5-global--active-color--200);
-  --pf-v5-c-slider__thumb--before--Width: var(--pf-v5-global--target-size--MinWidth);
-  --pf-v5-c-slider__thumb--before--Height: var(--pf-v5-global--target-size--MinHeight);
-  --pf-v5-c-slider__thumb--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
+    0 0 2px 5px var(--pf-t--global--color--nonstatus--blue--clicked);
+  --pf-v5-c-slider__thumb--before--Width: 44px;
+  --pf-v5-c-slider__thumb--before--Height: var(--pf-v5-c-slider__thumb--before--Width);
+  --pf-v5-c-slider__thumb--before--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v5-c-slider__thumb--before--TranslateX: -50%;
   --pf-v5-c-slider__thumb--before--TranslateY: -50%;
-  --pf-v5-c-slider__value--MarginLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-slider__value--c-form-control--width-base: 3.5ch;
+  --pf-v5-c-slider__value--MarginLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-slider__value--c-form-control--width-base: calc(var(--pf-v5-c-form-control--PaddingLeft) + var(--pf-v5-c-form-control--PaddingRight) + 1.25rem);
   --pf-v5-c-slider__value--c-form-control--width-chars: 3;
-  --pf-v5-c-slider__value--c-form-control--Width: calc(var(--pf-v5-c-slider__value--c-form-control--width-base) + (var(--pf-v5-c-slider__value--c-form-control--width-chars) * 1ch));
+  --pf-v5-c-slider__value--c-form-control--Width: calc(var(--pf-v5-c-slider__value--c-form-control--width-base) + var(--pf-v5-c-slider__value--c-form-control--width-chars) * 1ch);
   --pf-v5-c-slider__value--m-floating--TranslateX: -50%;
   --pf-v5-c-slider__value--m-floating--TranslateY: -100%;
   --pf-v5-c-slider__value--m-floating--Left: var(--pf-v5-c-slider--value);
-  --pf-v5-c-slider__value--m-floating--ZIndex: var(--pf-v5-global--ZIndex--sm);
-  --pf-v5-c-slider__actions--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-slider__main--actions--MarginLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-v5-global--palette--black-500);
-  --pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-global--palette--black-700);
-  --pf-v5-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-v5-global--palette--black-700);
+  --pf-v5-c-slider__value--m-floating--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v5-c-slider__actions--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-slider__main--actions--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--disabled);
+  --pf-v5-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+}
+
+.pf-v5-c-slider {
+  --pf-v5-c-slider__rail-track--before--fill--direction: right;
   display: flex;
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider {
+  --pf-v5-c-slider__rail-track--before--fill--direction: left;
+}
+
 .pf-v5-c-slider.pf-m-disabled {
   --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
   --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
@@ -77,8 +87,8 @@
 }
 
 .pf-v5-c-slider__rail {
-  padding-top: var(--pf-v5-c-slider__rail--PaddingTop);
-  padding-bottom: var(--pf-v5-c-slider__rail--PaddingBottom);
+  padding-block-start: var(--pf-v5-c-slider__rail--PaddingTop);
+  padding-block-end: var(--pf-v5-c-slider__rail--PaddingBottom);
 }
 
 .pf-v5-c-slider__rail-track {
@@ -87,12 +97,9 @@
 }
 .pf-v5-c-slider__rail-track::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   content: "";
-  background: linear-gradient(to right, var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-v5-c-slider__rail-track--before--base--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
+  background: linear-gradient(to var(--pf-v5-c-slider__rail-track--before--fill--direction), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-v5-c-slider__rail-track--before--base--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
   border-radius: var(--pf-v5-c-slider__rail-track--before--BorderRadius);
 }
 
@@ -104,8 +111,8 @@
 
 .pf-v5-c-slider__step {
   position: absolute;
-  top: 0;
-  left: var(--pf-v5-c-slider__step--Left);
+  inset-block-start: 0;
+  inset-inline-start: var(--pf-v5-c-slider__step--Left);
   content: "";
 }
 .pf-v5-c-slider__step.pf-m-active {
@@ -121,45 +128,59 @@
 }
 
 .pf-v5-c-slider__step-tick {
+  transform: translateX(var(--pf-v5-c-slider__step-tick--TranslateX));
   position: absolute;
-  top: var(--pf-v5-c-slider__step-tick--Top);
-  left: 0;
+  inset-block-start: var(--pf-v5-c-slider__step-tick--Top);
+  inset-inline-start: 0;
   width: var(--pf-v5-c-slider__step-tick--Width);
   height: var(--pf-v5-c-slider__step-tick--Height);
   background-color: var(--pf-v5-c-slider__step-tick--BackgroundColor);
   border-radius: var(--pf-v5-c-slider__step-tick--BorderRadius);
-  transform: translateX(var(--pf-v5-c-slider__step-tick--TranslateX));
+}
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__step-tick {
+  transform: translateX(calc(var(--pf-v5-c-slider__step-tick--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
 }
 
 .pf-v5-c-slider__step-label {
+  transform: translateX(var(--pf-v5-c-slider__step-label--TranslateX));
   position: absolute;
-  top: var(--pf-v5-c-slider__step-label--Top);
+  inset-block-start: var(--pf-v5-c-slider__step-label--Top);
   word-break: normal;
-  transform: translateX(var(--pf-v5-c-slider__step-label--TranslateX));
+}
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__step-label {
+  transform: translateX(calc(var(--pf-v5-c-slider__step-label--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
 }
 
 .pf-v5-c-slider__thumb {
+  transform: translate(var(--pf-v5-c-slider__thumb--TranslateX), var(--pf-v5-c-slider__thumb--TranslateY));
   position: absolute;
-  top: var(--pf-v5-c-slider__thumb--Top);
-  left: var(--pf-v5-c-slider__thumb--Left);
+  inset-block-start: var(--pf-v5-c-slider__thumb--Top);
+  inset-inline-start: var(--pf-v5-c-slider__thumb--Left);
   width: var(--pf-v5-c-slider__thumb--Width);
   height: var(--pf-v5-c-slider__thumb--Height);
   cursor: pointer;
   background-color: var(--pf-v5-c-slider__thumb--BackgroundColor);
   border-radius: var(--pf-v5-c-slider__thumb--BorderRadius);
   box-shadow: var(--pf-v5-c-slider__thumb--BoxShadow);
-  transform: translate(var(--pf-v5-c-slider__thumb--TranslateX), var(--pf-v5-c-slider__thumb--TranslateY));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__thumb {
+  transform: translate(calc(var(--pf-v5-c-slider__thumb--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__thumb--TranslateY));
+}
+
 .pf-v5-c-slider__thumb::before {
+  transform: translate(var(--pf-v5-c-slider__thumb--before--TranslateX), var(--pf-v5-c-slider__thumb--before--TranslateY));
   position: absolute;
-  top: 50%;
-  left: 50%;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
   width: var(--pf-v5-c-slider__thumb--before--Width);
   height: var(--pf-v5-c-slider__thumb--before--Height);
   content: "";
   border-radius: var(--pf-v5-c-slider__thumb--before--BorderRadius);
-  transform: translate(var(--pf-v5-c-slider__thumb--before--TranslateX), var(--pf-v5-c-slider__thumb--before--TranslateY));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__thumb::before {
+  transform: translate(calc(var(--pf-v5-c-slider__thumb--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__thumb--before--TranslateY));
+}
+
 .pf-v5-c-slider__thumb:hover {
   --pf-v5-c-slider__thumb--BoxShadow: var(--pf-v5-c-slider__thumb--hover--BoxShadow);
 }
@@ -172,25 +193,29 @@
 }
 
 .pf-v5-c-slider__value {
-  margin-left: var(--pf-v5-c-slider__value--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-slider__value--MarginLeft);
 }
 .pf-v5-c-slider__value.pf-m-floating {
+  transform: translate(var(--pf-v5-c-slider__value--m-floating--TranslateX), var(--pf-v5-c-slider__value--m-floating--TranslateY));
   --pf-v5-c-slider__value--MarginLeft: 0;
   position: absolute;
-  top: 0;
-  left: var(--pf-v5-c-slider__value--m-floating--Left);
+  inset-block-start: 0;
+  inset-inline-start: var(--pf-v5-c-slider__value--m-floating--Left);
   z-index: var(--pf-v5-c-slider__value--m-floating--ZIndex);
-  transform: translate(var(--pf-v5-c-slider__value--m-floating--TranslateX), var(--pf-v5-c-slider__value--m-floating--TranslateY));
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__value.pf-m-floating {
+  transform: translate(calc(var(--pf-v5-c-slider__value--m-floating--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__value--m-floating--TranslateY));
+}
+
 .pf-v5-c-slider__value .pf-v5-c-form-control {
   width: var(--pf-v5-c-slider__value--c-form-control--Width);
 }
 
 .pf-v5-c-slider__actions {
   display: flex;
-  margin-right: var(--pf-v5-c-slider__actions--MarginRight);
+  margin-inline-end: var(--pf-v5-c-slider__actions--MarginRight);
 }
 .pf-v5-c-slider__main ~ .pf-v5-c-slider__actions {
   --pf-v5-c-slider__actions--MarginRight: 0;
-  margin-left: var(--pf-v5-c-slider__main--actions--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-slider__main--actions--MarginLeft);
 }