@patternfly/patternfly 6.0.0-alpha.9 → 6.0.0-alpha.90

package/components/SimpleList/simple-list.css

@@ -1,31 +1,27 @@
-.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--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 {
@@ -36,29 +32,24 @@
   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: 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);
-}
 .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);
 }
@@ -75,15 +66,4 @@
 
 .pf-v5-c-simple-list__section + .pf-v5-c-simple-list__section {
   margin-block-start: 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);
 }

package/components/SimpleList/simple-list.scss

@@ -1,38 +1,36 @@
 // @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--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 {
@@ -43,33 +41,28 @@
   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: 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);
-  }
-
   &.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);
   }
@@ -87,11 +80,4 @@
 
 .#{$simple-list}__section + .#{$simple-list}__section {
   margin-block-start: 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;
-}
+}

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);
@@ -160,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);
@@ -207,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,7 +1,10 @@
-.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;
   inset-block-start: var(--pf-v5-c-skip-to-content--Top);
   inset-inline-start: -300%;

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;
- inset-block-start: var(--#{$skip-to-content}--Top);
- inset-inline-start: -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 {
-   inset-inline-start: var(--#{$skip-to-content}--focus--Left);
+    inset-inline-start: var(--#{$skip-to-content}--focus--Left);
   }
 }

package/components/Slider/slider.css

@@ -1,63 +1,67 @@
+:root,
 .pf-v5-c-slider {
   --pf-v5-c-slider--value: 0;
   --pf-v5-c-slider__step--Left: 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__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__rail-track--before--fill--direction: right;
-  --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 {