@patternfly/patternfly 6.0.0-alpha.5 → 6.0.0-alpha.50

package/components/Select/select.scss

@@ -218,8 +218,8 @@
   width: 100%;
 
   .#{$divider} {
-    margin-top: var(--#{$select}-menu--c-divider--MarginTop);
-    margin-bottom: var(--#{$select}-menu--c-divider--MarginBottom);
+    margin-block-start: var(--#{$select}-menu--c-divider--MarginTop);
+    margin-block-end: var(--#{$select}-menu--c-divider--MarginBottom);
 
     // Support divider as last item in group to separate groups
     &:last-child {
@@ -269,7 +269,10 @@
   justify-content: space-between;
   width: 100%;
   min-width: var(--#{$select}__toggle--MinWidth);
-  padding: var(--#{$select}__toggle--PaddingTop) var(--#{$select}__toggle--PaddingRight) var(--#{$select}__toggle--PaddingBottom) var(--#{$select}__toggle--PaddingLeft);
+  padding-block-start: var(--#{$select}__toggle--PaddingTop);
+  padding-block-end: var(--#{$select}__toggle--PaddingBottom);
+  padding-inline-start: var(--#{$select}__toggle--PaddingLeft);
+  padding-inline-end: var(--#{$select}__toggle--PaddingRight);
   font-size: var(--#{$select}__toggle--FontSize);
   font-weight: var(--#{$select}__toggle--FontWeight);
   line-height: var(--#{$select}__toggle--LineHeight);
@@ -294,14 +297,14 @@
     --#{$select}__toggle--before--BorderWidth-base: var(--#{$select}__toggle--before--BorderTopWidth) var(--#{$select}__toggle--before--BorderRightWidth) var(--#{$select}__toggle--before--BorderBottomWidth) var(--#{$select}__toggle--before--BorderLeftWidth); // remove at breaking change
 
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     content: "";
-    border-color: var(--#{$select}__toggle--before--BorderTopColor) var(--#{$select}__toggle--before--BorderRightColor) var(--#{$select}__toggle--before--BorderBottomColor) var(--#{$select}__toggle--before--BorderLeftColor);
     border-style: solid;
     border-width: var(--#{$select}__toggle--before--BorderWidth, var(--#{$select}__toggle--before--BorderWidth-base));
+    border-block-start-color: var(--#{$select}__toggle--before--BorderTopColor);
+    border-block-end-color: var(--#{$select}__toggle--before--BorderBottomColor);
+    border-inline-start-color: var(--#{$select}__toggle--before--BorderLeftColor);
+    border-inline-end-color: var(--#{$select}__toggle--before--BorderRightColor);
   }
 
   &:hover {
@@ -356,9 +359,9 @@
   }
 
   .#{$select}__toggle-clear {
-    padding-right: var(--#{$select}__toggle-clear--PaddingRight);
-    padding-left: var(--#{$select}__toggle-clear--PaddingLeft);
-    margin-left: auto;
+    padding-inline-start: var(--#{$select}__toggle-clear--PaddingLeft);
+    padding-inline-end: var(--#{$select}__toggle-clear--PaddingRight);
+    margin-inline-start: auto;
   }
 
   .#{$select}__toggle-button {
@@ -366,7 +369,7 @@
   }
 
   .#{$select}__toggle-clear + .#{$select}__toggle-button {
-    padding-left: var(--#{$select}__toggle-clear--toggle-button--PaddingLeft);
+    padding-inline-start: var(--#{$select}__toggle-clear--toggle-button--PaddingLeft);
   }
 
   &.pf-m-placeholder {
@@ -378,8 +381,8 @@
   color: var(--#{$select}__toggle-arrow--Color, inherit);
 
   * + & {
-    margin-right: var(--#{$select}__toggle-arrow--MarginRight);
-    margin-left: var(--#{$select}__toggle-arrow--MarginLeft);
+    margin-inline-start: var(--#{$select}__toggle-arrow--MarginLeft);
+    margin-inline-end: var(--#{$select}__toggle-arrow--MarginRight);
   }
   // stylelint-disable-next-line
   .#{$select}.pf-m-top.pf-m-expanded & {
@@ -408,33 +411,33 @@
 
   // Add space between children
   > :not(:last-child) {
-    margin-right: var(--#{$select}__toggle-wrapper--not-last-child--MarginRight);
+    margin-inline-end: var(--#{$select}__toggle-wrapper--not-last-child--MarginRight);
   }
 
   // a chip group needs a bottom margin to make some space between the chip group and typeahead input box if it wraps
   .#{$chip}-group {
-    margin-top: var(--#{$select}__toggle-wrapper--c-chip-group--MarginTop);
-    margin-bottom: var(--#{$select}__toggle-wrapper--c-chip-group--MarginBottom);
+    margin-block-start: var(--#{$select}__toggle-wrapper--c-chip-group--MarginTop);
+    margin-block-end: var(--#{$select}__toggle-wrapper--c-chip-group--MarginBottom);
   }
 
   // When the input is the first thing then use a negative left padding so it matches the toggle container
   > .#{$select}__toggle-typeahead:first-child {
-    margin-left: calc(-1 * var(--#{$select}__toggle--PaddingLeft));
+    margin-inline-start: calc(-1 * var(--#{$select}__toggle--PaddingLeft));
   }
 }
 
 .#{$select}__toggle-icon + .#{$select}__toggle-text {
-  margin-left: var(--#{$select}__toggle-icon--toggle-text--MarginLeft);
+  margin-inline-start: var(--#{$select}__toggle-icon--toggle-text--MarginLeft);
 }
 
 .#{$select}__toggle-status-icon {
-  margin-left: var(--#{$select}__toggle-status-icon--MarginLeft);
+  margin-inline-start: var(--#{$select}__toggle-status-icon--MarginLeft);
   color: var(--#{$select}__toggle-status-icon--Color);
 }
 
 .#{$select}__toggle-badge {
   display: flex;
-  padding-left: var(--#{$select}__toggle-badge--PaddingLeft);
+  padding-inline-start: var(--#{$select}__toggle-badge--PaddingLeft);
 }
 
 .#{$select}__toggle-typeahead {
@@ -455,22 +458,22 @@
 
 .#{$select}__menu {
   position: absolute;
-  top: var(--#{$select}__menu--Top);
+ inset-block-start: var(--#{$select}__menu--Top);
   z-index: var(--#{$select}__menu--ZIndex);
   width: var(--#{$select}__menu--Width);
   min-width: var(--#{$select}__menu--MinWidth);
-  padding-top: var(--#{$select}__menu--PaddingTop);
-  padding-bottom: var(--#{$select}__menu--PaddingBottom);
+  padding-block-start: var(--#{$select}__menu--PaddingTop);
+  padding-block-end: var(--#{$select}__menu--PaddingBottom);
   background-color: var(--#{$select}__menu--BackgroundColor);
   background-clip: padding-box;
   box-shadow: var(--#{$select}__menu--BoxShadow);
 
   &.pf-m-align-right {
-    right: 0;
+   inset-inline-end: 0;
   }
 
   .#{$select}.pf-m-top & {
-    top: 0;
+   inset-block-start: 0;
     transform: translateY(var(--#{$select}__menu--m-top--TranslateY));
   }
 
@@ -478,10 +481,7 @@
     --#{$select}__menu--m-top--TranslateY: 0;
 
     position: static;
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
+    inset: auto;
     z-index: auto;
     min-width: min-content;
   }
@@ -504,12 +504,15 @@
 .#{$select}__menu-item {
   position: relative;
   width: var(--#{$select}__menu-item--Width);
-  padding: var(--#{$select}__menu-item--PaddingTop) var(--#{$select}__menu-item--PaddingRight) var(--#{$select}__menu-item--PaddingBottom) var(--#{$select}__menu-item--PaddingLeft);
+  padding-block-start: var(--#{$select}__menu-item--PaddingTop);
+  padding-block-end: var(--#{$select}__menu-item--PaddingBottom);
+  padding-inline-start: var(--#{$select}__menu-item--PaddingLeft);
+  padding-inline-end: var(--#{$select}__menu-item--PaddingRight);
   font-size: var(--#{$select}__menu-item--FontSize);
   font-weight: var(--#{$select}__menu-item--FontWeight);
   line-height: var(--#{$select}__menu-item--LineHeight);
   color: var(--#{$select}__menu-item--Color);
-  text-align: left;
+  text-align: start;
   white-space: nowrap;
   background-color: transparent;
   border: none;
@@ -617,7 +620,7 @@
 
 .#{$select}__list-item {
   &.pf-m-loading {
-    padding-top: var(--#{$select}__list-item--m-loading--PaddingTop);
+    padding-block-start: var(--#{$select}__list-item--m-loading--PaddingTop);
     text-align: center;
   }
 }
@@ -625,7 +628,7 @@
 .#{$select}__menu-item-main {
   position: relative;
   display: block;
-  padding-right: var(--#{$select}__menu-item-main--PaddingRight);
+  padding-inline-end: var(--#{$select}__menu-item-main--PaddingRight);
   white-space: nowrap;
 }
 
@@ -639,22 +642,22 @@
 
 .#{$select}__menu-item-count {
   align-self: center;
-  margin-left: var(--#{$select}__menu-item-count--MarginLeft);
+  margin-inline-start: var(--#{$select}__menu-item-count--MarginLeft);
   font-size: var(--#{$select}__menu-item-count--FontSize);
   color: var(--#{$select}__menu-item-count--Color);
 }
 
 .#{$select}__menu-item-description {
   display: block;
-  padding-right: var(--#{$select}__menu-item-description--PaddingRight);
+  padding-inline-end: var(--#{$select}__menu-item-description--PaddingRight);
   font-size: var(--#{$select}__menu-item-description--FontSize);
   color: var(--#{$select}__menu-item-description--Color);
 }
 
 .#{$select}__menu-item-icon {
   position: absolute;
-  top: var(--#{$select}__menu-item-icon--Top);
-  right: var(--#{$select}__menu-item-icon--Right);
+  inset-block-start: var(--#{$select}__menu-item-icon--Top);
+  inset-inline-end: var(--#{$select}__menu-item-icon--Right);
   font-size: var(--#{$select}__menu-item-icon--FontSize);
   color: var(--#{$select}__menu-item-icon--Color);
   transform: translateY(var(--#{$select}__menu-item-icon--TranslateY));
@@ -672,27 +675,33 @@
 }
 
 .#{$select}__menu-group + .#{$select}__menu-group {
-  padding-top: var(--#{$select}__menu-group--menu-group--PaddingTop);
+  padding-block-start: var(--#{$select}__menu-group--menu-group--PaddingTop);
 }
 
 .#{$select}__menu-search {
-  padding: var(--#{$select}__menu-search--PaddingTop) var(--#{$select}__menu-search--PaddingRight) var(--#{$select}__menu-search--PaddingBottom) var(--#{$select}__menu-search--PaddingLeft);
+  padding-block-start: var(--#{$select}__menu-search--PaddingTop);
+  padding-block-end: var(--#{$select}__menu-search--PaddingBottom);
+  padding-inline-start: var(--#{$select}__menu-search--PaddingLeft);
+  padding-inline-end: var(--#{$select}__menu-search--PaddingRight);
 }
 
 .#{$select}__menu-group-title {
-  padding-top: var(--#{$select}__menu-group-title--PaddingTop);
-  padding-right: var(--#{$select}__menu-group-title--PaddingRight);
-  padding-bottom: var(--#{$select}__menu-group-title--PaddingBottom);
-  padding-left: var(--#{$select}__menu-group-title--PaddingLeft);
+  padding-block-start: var(--#{$select}__menu-group-title--PaddingTop);
+  padding-block-end: var(--#{$select}__menu-group-title--PaddingBottom);
+  padding-inline-start: var(--#{$select}__menu-group-title--PaddingLeft);
+  padding-inline-end: var(--#{$select}__menu-group-title--PaddingRight);
   font-size: var(--#{$select}__menu-group-title--FontSize);
   font-weight: var(--#{$select}__menu-group-title--FontWeight);
   color: var(--#{$select}__menu-group-title--Color);
 }
 
 .#{$select}__menu-footer {
-  padding: var(--#{$select}__menu-footer--PaddingTop) var(--#{$select}__menu-footer--PaddingRight) var(--#{$select}__menu-footer--PaddingBottom) var(--#{$select}__menu-footer--PaddingLeft);
-  margin-top: var(--#{$select}__menu-footer--MarginTop);
-  margin-bottom: var(--#{$select}__menu-footer--MarginBottom);
+  padding-block-start: var(--#{$select}__menu-footer--PaddingTop);
+  padding-block-end: var(--#{$select}__menu-footer--PaddingBottom);
+  padding-inline-start: var(--#{$select}__menu-footer--PaddingLeft);
+  padding-inline-end: var(--#{$select}__menu-footer--PaddingRight);
+  margin-block-start: var(--#{$select}__menu-footer--MarginTop);
+  margin-block-end: var(--#{$select}__menu-footer--MarginBottom);
   box-shadow: var(--#{$select}__menu-footer--BoxShadow);
 }
 

package/components/Sidebar/sidebar.css

@@ -25,7 +25,7 @@
   --pf-v5-c-sidebar__main--FlexDirection: column;
   --pf-v5-c-sidebar__main--md--FlexDirection: row;
   --pf-v5-c-sidebar__main--AlignItems: stretch;
-  --pf-v5-c-sidebar__main--md--AlignItems: start;
+  --pf-v5-c-sidebar__main--md--AlignItems: flex-start;
   --pf-v5-c-sidebar__main--child--MarginTop: 0;
   --pf-v5-c-sidebar--m-gutter__main--Gap: var(--pf-v5-c-sidebar--inset);
   --pf-v5-c-sidebar__main--m-border--before--Display: none;
@@ -41,7 +41,7 @@
   --pf-v5-c-sidebar--m-stack__panel--Top: 0;
   --pf-v5-c-sidebar--m-stack__panel--BoxShadow: var(--pf-v5-c-sidebar__panel--BoxShadow--base);
   --pf-v5-c-sidebar--m-stack--m-panel-right__panel--Order: -1;
-  --pf-v5-c-sidebar--m-split__main--AlignItems: start;
+  --pf-v5-c-sidebar--m-split__main--AlignItems: flex-start;
   --pf-v5-c-sidebar--m-split__main--FlexDirection: row;
   --pf-v5-c-sidebar--m-split__panel--Position: static;
   --pf-v5-c-sidebar--m-split__panel--Top: auto;
@@ -131,12 +131,15 @@
 
 .pf-v5-c-sidebar__panel {
   position: var(--pf-v5-c-sidebar__panel--Position);
-  top: var(--pf-v5-c-sidebar__panel--Top);
+  inset-block-start: var(--pf-v5-c-sidebar__panel--Top);
   z-index: var(--pf-v5-c-sidebar__panel--ZIndex);
   flex-basis: var(--pf-v5-c-sidebar__panel--FlexBasis);
   flex-shrink: 0;
   order: var(--pf-v5-c-sidebar__panel--Order);
-  padding: var(--pf-v5-c-sidebar__panel--PaddingTop) var(--pf-v5-c-sidebar__panel--PaddingRight) var(--pf-v5-c-sidebar__panel--PaddingBottom) var(--pf-v5-c-sidebar__panel--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-sidebar__panel--PaddingTop);
+  padding-block-end: var(--pf-v5-c-sidebar__panel--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-sidebar__panel--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-sidebar__panel--PaddingRight);
   background-color: var(--pf-v5-c-sidebar__panel--BackgroundColor);
   box-shadow: var(--pf-v5-c-sidebar__panel--BoxShadow);
 }
@@ -158,7 +161,10 @@
 .pf-v5-c-sidebar__content {
   flex-grow: 1;
   order: var(--pf-v5-c-sidebar__content--Order);
-  padding: var(--pf-v5-c-sidebar__content--PaddingTop) var(--pf-v5-c-sidebar__content--PaddingRight) var(--pf-v5-c-sidebar__content--PaddingBottom) var(--pf-v5-c-sidebar__content--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-sidebar__content--PaddingTop);
+  padding-block-end: var(--pf-v5-c-sidebar__content--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-sidebar__content--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-sidebar__content--PaddingRight);
   background-color: var(--pf-v5-c-sidebar__content--BackgroundColor);
 }
 .pf-v5-c-sidebar__content.pf-m-padding {

package/components/Sidebar/sidebar.scss

@@ -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;
@@ -164,12 +164,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);
 
@@ -194,7 +197,10 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 .#{$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 {

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--selected);
+  --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--selected);
+  --#{$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);
+}