@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.71

package/components/Sidebar/sidebar.scss

@@ -2,12 +2,12 @@
 $pf-v5-c-sidebar--breakpoint-map--width: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 
-.#{$sidebar} {
-  --#{$sidebar}--inset: var(--#{$pf-global}--spacer--md);
-  --#{$sidebar}--xl--inset: var(--#{$pf-global}--spacer--lg);
-  --#{$sidebar}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$sidebar}--BorderWidth--base: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$sidebar}--BorderColor--base: var(--#{$pf-global}--BorderColor--100);
+:root,
+:where(.#{$sidebar}) {
+  --#{$sidebar}--inset: var(--pf-t--global--spacer--md);
+  --#{$sidebar}--xl--inset: var(--pf-t--global--spacer--lg);
+  --#{$sidebar}--BorderWidth--base: var(--pf-t--global--border--width--regular);
+  --#{$sidebar}--BorderColor--base: var(--pf-t--global--border--color--default);
 
   // Panel
   --#{$sidebar}__panel--PaddingTop: 0;
@@ -39,7 +39,7 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --#{$sidebar}__main--FlexDirection: column;
   --#{$sidebar}__main--md--FlexDirection: row;
   --#{$sidebar}__main--AlignItems: stretch;
-  --#{$sidebar}__main--md--AlignItems: start;
+  --#{$sidebar}__main--md--AlignItems: flex-start;
   --#{$sidebar}__main--child--MarginTop: 0;
 
   // Gutter
@@ -65,7 +65,7 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --#{$sidebar}--m-stack--m-panel-right__panel--Order: -1;
 
   // Split
-  --#{$sidebar}--m-split__main--AlignItems: start;
+  --#{$sidebar}--m-split__main--AlignItems: flex-start;
   --#{$sidebar}--m-split__main--FlexDirection: row;
   --#{$sidebar}--m-split__panel--Position: static;
   --#{$sidebar}--m-split__panel--Top: auto;
@@ -85,15 +85,21 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --#{$sidebar}__panel--md--FlexBasis: #{pf-size-prem(250px)};
   --#{$sidebar}__panel--m-split--FlexBasis: #{pf-size-prem(250px)};
   --#{$sidebar}__panel--m-stack--FlexBasis: auto;
-  --#{$sidebar}__panel--ZIndex: var(--#{$pf-global}--ZIndex--xs);
-  --#{$sidebar}__panel--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
+  --#{$sidebar}__panel--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$sidebar}__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$sidebar}__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 
   // Content
-  --#{$sidebar}__content--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
+  --#{$sidebar}__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$sidebar}__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 
   // Sticky
   --#{$sidebar}__panel--m-sticky--Top: 0;
   --#{$sidebar}__panel--m-sticky--Position: sticky;
+}
+
+.#{$sidebar} {
+  height: 100%;
 
   @media (min-width: $pf-v5-global--breakpoint--md) {
     --#{$sidebar}__main--FlexDirection: var(--#{$sidebar}__main--md--FlexDirection);
@@ -144,8 +150,6 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
     --#{$sidebar}__main--m-border--before--Display: var(--#{$sidebar}--m-split__main--m-border--before--Display);
     --#{$sidebar}--m-panel-right__panel--Order: var(--#{$sidebar}--m-split--m-panel-right__panel--Order);
   }
-
-  height: 100%;
 }
 
 .#{$sidebar}__main {
@@ -164,12 +168,15 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 
 .#{$sidebar}__panel {
   position: var(--#{$sidebar}__panel--Position);
-  top: var(--#{$sidebar}__panel--Top);
+  inset-block-start: var(--#{$sidebar}__panel--Top);
   z-index: var(--#{$sidebar}__panel--ZIndex);
   flex-basis: var(--#{$sidebar}__panel--FlexBasis);
   flex-shrink: 0;
   order: var(--#{$sidebar}__panel--Order);
-  padding: var(--#{$sidebar}__panel--PaddingTop) var(--#{$sidebar}__panel--PaddingRight) var(--#{$sidebar}__panel--PaddingBottom) var(--#{$sidebar}__panel--PaddingLeft);
+  padding-block-start: var(--#{$sidebar}__panel--PaddingTop);
+  padding-block-end: var(--#{$sidebar}__panel--PaddingBottom);
+  padding-inline-start: var(--#{$sidebar}__panel--PaddingLeft);
+  padding-inline-end: var(--#{$sidebar}__panel--PaddingRight);
   background-color: var(--#{$sidebar}__panel--BackgroundColor);
   box-shadow: var(--#{$sidebar}__panel--BoxShadow);
 
@@ -189,12 +196,19 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
     --#{$sidebar}__panel--Position: static;
     --#{$sidebar}__panel--Top: auto;
   }
+
+  &.pf-m-secondary {
+    --#{$sidebar}__panel--BackgroundColor: var(--#{$sidebar}__panel--m-secondary--BackgroundColor);
+  }
 }
 
 .#{$sidebar}__content {
   flex-grow: 1;
   order: var(--#{$sidebar}__content--Order);
-  padding: var(--#{$sidebar}__content--PaddingTop) var(--#{$sidebar}__content--PaddingRight) var(--#{$sidebar}__content--PaddingBottom) var(--#{$sidebar}__content--PaddingLeft);
+  padding-block-start: var(--#{$sidebar}__content--PaddingTop);
+  padding-block-end: var(--#{$sidebar}__content--PaddingBottom);
+  padding-inline-start: var(--#{$sidebar}__content--PaddingLeft);
+  padding-inline-end: var(--#{$sidebar}__content--PaddingRight);
   background-color: var(--#{$sidebar}__content--BackgroundColor);
 
   &.pf-m-padding {
@@ -208,6 +222,10 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
     --#{$sidebar}__content--BackgroundColor: transparent;
   }
 
+  &.pf-m-secondary {
+    --#{$sidebar}__content--BackgroundColor: var(--#{$sidebar}__content--m-secondary--BackgroundColor);
+  }
+
   & + .#{$sidebar}__panel {
     --#{$sidebar}__panel--Order: 1;
   }

package/components/SimpleList/simple-list.css

@@ -1,83 +1,72 @@
-.pf-v5-c-simple-list {
-  --pf-v5-c-simple-list__item-link--PaddingTop: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-simple-list__item-link--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-simple-list__item-link--PaddingBottom: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-simple-list__item-link--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-simple-list__item-link--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-v5-global--link--Color);
-  --pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-simple-list__item-link--m-current--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-simple-list__item-link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-simple-list__item-link--focus--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-simple-list__item-link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-simple-list__item-link--focus--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-simple-list__item-link--active--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-simple-list__item-link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-simple-list__item-link--active--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-simple-list__title--PaddingTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-simple-list__title--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-simple-list__title--PaddingBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-simple-list__title--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-simple-list__title--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-simple-list__title--Color: var(--pf-v5-global--Color--dark-200);
-  --pf-v5-c-simple-list__title--FontWeight: var(--pf-v5-global--FontWeight--bold);
-  --pf-v5-c-simple-list__section--section--MarginTop: var(--pf-v5-global--spacer--sm);
+:root, .pf-v5-c-simple-list {
+  --pf-v5-c-simple-list__item-link--PaddingTop: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-simple-list__item-link--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-simple-list__item-link--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-simple-list__item-link--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --pf-v5-c-simple-list__item-link--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-simple-list__item-link--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
+  --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-simple-list__item-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+  --pf-v5-c-simple-list__item-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
+  --pf-v5-c-simple-list__item-link--BorderRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v5-c-simple-list__item-link--m-link--Color: var(--pf-t--global--text--color--link--default);
+  --pf-v5-c-simple-list__item-link--m-link--m-current--Color: var(--pf-t--global--text--color--link--hover);
+  --pf-v5-c-simple-list__item-link--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
+  --pf-v5-c-simple-list__title--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-simple-list__title--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-simple-list__title--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-simple-list__title--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-simple-list__title--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-simple-list__title--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-simple-list__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v5-c-simple-list__section--section--MarginTop: var(--pf-t--global--spacer--sm);
 }
 
 .pf-v5-c-simple-list__item-link {
   display: block;
   width: 100%;
-  padding: var(--pf-v5-c-simple-list__item-link--PaddingTop) var(--pf-v5-c-simple-list__item-link--PaddingRight) var(--pf-v5-c-simple-list__item-link--PaddingBottom) var(--pf-v5-c-simple-list__item-link--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-simple-list__item-link--PaddingTop);
+  padding-block-end: var(--pf-v5-c-simple-list__item-link--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-simple-list__item-link--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-simple-list__item-link--PaddingRight);
   font-size: var(--pf-v5-c-simple-list__item-link--FontSize);
-  font-weight: var(--pf-v5-c-simple-list__item-link--FontWeight);
   color: var(--pf-v5-c-simple-list__item-link--Color);
-  text-align: left;
+  text-align: start;
+  text-decoration: none;
   background-color: var(--pf-v5-c-simple-list__item-link--BackgroundColor);
   border: none;
+  border-radius: var(--pf-v5-c-simple-list__item-link--BorderRadius);
+}
+.pf-v5-c-simple-list__item-link.pf-m-link {
+  --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--m-link--Color);
+  --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-v5-c-simple-list__item-link--m-link--m-current--Color);
+  --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-v5-c-simple-list__item-link--m-link--hover--Color);
 }
-.pf-v5-c-simple-list__item-link:hover {
+.pf-v5-c-simple-list__item-link:hover, .pf-v5-c-simple-list__item-link:focus {
   --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--hover--BackgroundColor);
   --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--hover--Color);
   text-decoration: none;
-}
-.pf-v5-c-simple-list__item-link:focus {
-  --pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-c-simple-list__item-link--focus--FontWeight);
-  --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--focus--BackgroundColor);
-  --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--focus--Color);
-}
-.pf-v5-c-simple-list__item-link:active {
-  --pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-c-simple-list__item-link--active--FontWeight);
-  --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--active--BackgroundColor);
-  --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--active--Color);
+  mix-blend-mode: var(--pf-v5-c-simple-list__item-link--MixBlendMode);
 }
 .pf-v5-c-simple-list__item-link.pf-m-current {
-  --pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-c-simple-list__item-link--m-current--FontWeight);
   --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--m-current--BackgroundColor);
   --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--m-current--Color);
+  mix-blend-mode: var(--pf-v5-c-simple-list__item-link--MixBlendMode);
 }
 
 .pf-v5-c-simple-list__title {
-  padding: var(--pf-v5-c-simple-list__title--PaddingTop) var(--pf-v5-c-simple-list__title--PaddingRight) var(--pf-v5-c-simple-list__title--PaddingBottom) var(--pf-v5-c-simple-list__title--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-simple-list__title--PaddingTop);
+  padding-block-end: var(--pf-v5-c-simple-list__title--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-simple-list__title--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-simple-list__title--PaddingRight);
   font-size: var(--pf-v5-c-simple-list__title--FontSize);
   font-weight: var(--pf-v5-c-simple-list__title--FontWeight);
   color: var(--pf-v5-c-simple-list__title--Color);
 }
 
 .pf-v5-c-simple-list__section + .pf-v5-c-simple-list__section {
-  margin-top: var(--pf-v5-c-simple-list__section--section--MarginTop);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-simple-list {
-  --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-  --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-simple-list__item-link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-  --pf-v5-c-simple-list__item-link--focus--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-simple-list__item-link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-  --pf-v5-c-simple-list__item-link--active--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-simple-list__item-link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
+  margin-block-start: var(--pf-v5-c-simple-list__section--section--MarginTop);
 }

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);
 }