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

package/components/TextInputGroup/text-input-group.css

@@ -67,12 +67,12 @@
   --pf-v5-c-text-input-group__text-input--PaddingLeft: var(--pf-v5-c-text-input-group__main--m-icon__text-input--PaddingLeft);
 }
 .pf-v5-c-text-input-group__main > :first-child:not(.pf-v5-c-text-input-group__text) {
-  margin-left: var(--pf-v5-c-text-input-group__main--first-child--not--text-input--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-text-input-group__main--first-child--not--text-input--MarginLeft);
 }
 .pf-v5-c-text-input-group__main .pf-v5-c-chip-group__main {
-  padding-top: var(--pf-v5-c-text-input-group--c-chip-group__main--PaddingTop);
-  padding-right: var(--pf-v5-c-text-input-group--c-chip-group__main--PaddingRight);
-  padding-bottom: var(--pf-v5-c-text-input-group--c-chip-group__main--PaddingBottom);
+  padding-block-start: var(--pf-v5-c-text-input-group--c-chip-group__main--PaddingTop);
+  padding-block-end: var(--pf-v5-c-text-input-group--c-chip-group__main--PaddingBottom);
+  padding-inline-end: var(--pf-v5-c-text-input-group--c-chip-group__main--PaddingRight);
 }
 
 .pf-v5-c-text-input-group__text {
@@ -83,10 +83,7 @@
 }
 .pf-v5-c-text-input-group__text::before, .pf-v5-c-text-input-group__text::after {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   pointer-events: none;
   content: "";
 }
@@ -94,7 +91,7 @@
   border: var(--pf-v5-c-text-input-group__text--before--BorderWidth) solid var(--pf-v5-c-text-input-group__text--before--BorderColor);
 }
 .pf-v5-c-text-input-group__text::after {
-  border-bottom: var(--pf-v5-c-text-input-group__text--after--BorderBottomWidth) solid var(--pf-v5-c-text-input-group__text--after--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-text-input-group__text--after--BorderBottomWidth) solid var(--pf-v5-c-text-input-group__text--after--BorderBottomColor);
 }
 .pf-v5-c-text-input-group__text:focus-within {
   --pf-v5-c-text-input-group__text--after--BorderBottomWidth: var(--pf-v5-c-text-input-group__text--focus-within--after--BorderBottomWidth);
@@ -103,8 +100,8 @@
 
 .pf-v5-c-text-input-group__icon {
   position: absolute;
-  top: 50%;
-  left: var(--pf-v5-c-text-input-group__icon--Left);
+  inset-block-start: 50%;
+  inset-inline-start: var(--pf-v5-c-text-input-group__icon--Left);
   color: var(--pf-v5-c-text-input-group__icon--Color);
   transform: translateY(var(--pf-v5-c-text-input-group__icon--TranslateY));
 }
@@ -116,7 +113,10 @@
   position: relative;
   width: 100%;
   min-width: var(--pf-v5-c-text-input-group__text-input--MinWidth);
-  padding: var(--pf-v5-c-text-input-group__text-input--PaddingTop) var(--pf-v5-c-text-input-group__text-input--PaddingRight) var(--pf-v5-c-text-input-group__text-input--PaddingBottom) var(--pf-v5-c-text-input-group__text-input--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-text-input-group__text-input--PaddingTop);
+  padding-block-end: var(--pf-v5-c-text-input-group__text-input--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-text-input-group__text-input--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-text-input-group__text-input--PaddingRight);
   background-color: var(--pf-v5-c-text-input-group__text-input--BackgroundColor);
   border: 0;
 }
@@ -133,11 +133,11 @@
 .pf-v5-c-text-input-group__utilities {
   display: flex;
   align-items: center;
-  margin-right: var(--pf-v5-c-text-input-group__utilities--MarginRight);
-  margin-left: var(--pf-v5-c-text-input-group__utilities--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-text-input-group__utilities--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-text-input-group__utilities--MarginRight);
 }
 .pf-v5-c-text-input-group__utilities > * + * {
-  margin-left: var(--pf-v5-c-text-input-group__utilities--child--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-text-input-group__utilities--child--MarginLeft);
 }
 .pf-v5-c-text-input-group__utilities .pf-v5-c-button {
   --pf-v5-c-button--PaddingRight: var(--pf-v5-c-text-input-group__utilities--c-button--PaddingRight);

package/components/TextInputGroup/text-input-group.scss

@@ -95,13 +95,13 @@
   }
 
   > :first-child:not(.#{$text-input-group}__text) {
-    margin-left: var(--#{$text-input-group}__main--first-child--not--text-input--MarginLeft);
+    margin-inline-start: var(--#{$text-input-group}__main--first-child--not--text-input--MarginLeft);
   }
 
   .#{$chip-group}__main {
-    padding-top: var(--#{$text-input-group}--c-chip-group__main--PaddingTop);
-    padding-right: var(--#{$text-input-group}--c-chip-group__main--PaddingRight);
-    padding-bottom: var(--#{$text-input-group}--c-chip-group__main--PaddingBottom);
+    padding-block-start: var(--#{$text-input-group}--c-chip-group__main--PaddingTop);
+    padding-block-end: var(--#{$text-input-group}--c-chip-group__main--PaddingBottom);
+    padding-inline-end: var(--#{$text-input-group}--c-chip-group__main--PaddingRight);
   }
 }
 
@@ -114,10 +114,7 @@
   &::before,
   &::after {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     pointer-events: none;
     content: "";
   }
@@ -127,7 +124,7 @@
   }
 
   &::after {
-    border-bottom: var(--#{$text-input-group}__text--after--BorderBottomWidth) solid var(--#{$text-input-group}__text--after--BorderBottomColor);
+    border-block-end: var(--#{$text-input-group}__text--after--BorderBottomWidth) solid var(--#{$text-input-group}__text--after--BorderBottomColor);
   }
 
   &:focus-within {
@@ -138,8 +135,8 @@
 
 .#{$text-input-group}__icon {
   position: absolute;
-  top: 50%;
-  left: var(--#{$text-input-group}__icon--Left);
+ inset-block-start: 50%;
+ inset-inline-start: var(--#{$text-input-group}__icon--Left);
   color: var(--#{$text-input-group}__icon--Color);
   transform: translateY(var(--#{$text-input-group}__icon--TranslateY));
 }
@@ -150,7 +147,10 @@
   position: relative;
   width: 100%;
   min-width: var(--#{$text-input-group}__text-input--MinWidth);
-  padding: var(--#{$text-input-group}__text-input--PaddingTop) var(--#{$text-input-group}__text-input--PaddingRight) var(--#{$text-input-group}__text-input--PaddingBottom) var(--#{$text-input-group}__text-input--PaddingLeft);
+  padding-block-start: var(--#{$text-input-group}__text-input--PaddingTop);
+  padding-block-end: var(--#{$text-input-group}__text-input--PaddingBottom);
+  padding-inline-start: var(--#{$text-input-group}__text-input--PaddingLeft);
+  padding-inline-end: var(--#{$text-input-group}__text-input--PaddingRight);
   background-color: var(--#{$text-input-group}__text-input--BackgroundColor);
   border: 0;
 
@@ -171,11 +171,11 @@
 .#{$text-input-group}__utilities {
   display: flex;
   align-items: center;
-  margin-right: var(--#{$text-input-group}__utilities--MarginRight);
-  margin-left: var(--#{$text-input-group}__utilities--MarginLeft);
+  margin-inline-start: var(--#{$text-input-group}__utilities--MarginLeft);
+  margin-inline-end: var(--#{$text-input-group}__utilities--MarginRight);
 
   > * + * {
-    margin-left: var(--#{$text-input-group}__utilities--child--MarginLeft);
+    margin-inline-start: var(--#{$text-input-group}__utilities--child--MarginLeft);
   }
 
   .#{$button} {

package/components/Tile/tile.css

@@ -1,54 +1,45 @@
-.pf-v5-c-tile {
-  --pf-v5-c-tile--PaddingTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-tile--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-tile--PaddingBottom: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-tile--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-tile--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-tile--Transition: none;
-  --pf-v5-c-tile--TranslateY: 0;
-  --pf-v5-c-tile--before--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-tile--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-tile--after--Height: var(--pf-v5-global--BorderWidth--lg);
+:where(:root),
+:where(.pf-v5-c-tile) {
+  --pf-v5-c-tile--PaddingTop: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-tile--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-tile--PaddingBottom: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-tile--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-tile--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-tile--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-tile--before--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-tile--before--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v5-c-tile--before--BorderRadius: var(--pf-v5-c-tile--BorderRadius);
   --pf-v5-c-tile--after--BackgroundColor: transparent;
-  --pf-v5-c-tile--after--Transition: none;
-  --pf-v5-c-tile--after--ScaleY: 1;
-  --pf-v5-c-tile--after--TranslateY: 0;
-  --pf-v5-c-tile__icon--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tile__icon--FontSize: var(--pf-v5-global--icon--FontSize--md);
-  --pf-v5-c-tile__icon--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-tile__title--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-tile__body--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-tile__body--FontSize: var(--pf-v5-global--FontSize--xs);
-  --pf-v5-c-tile--hover--after--BackgroundColor: var(--pf-v5-global--active-color--400);
-  --pf-v5-c-tile--hover__icon--Color: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-tile--hover__title--Color: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-tile--focus--after--BackgroundColor: var(--pf-v5-global--active-color--400);
-  --pf-v5-c-tile--focus__icon--Color: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-tile--focus__title--Color: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-tile--m-selected--TranslateY: calc(-1 * var(--pf-v5-c-tile--m-selected--after--ScaleY) * var(--pf-v5-c-tile--m-selected--after--Height));
-  --pf-v5-c-tile--m-selected--Transition: var(--pf-v5-global--Transition);
-  --pf-v5-c-tile--m-selected--after--Height: var(--pf-v5-global--BorderWidth--lg);
-  --pf-v5-c-tile--m-selected--after--BackgroundColor: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-tile--m-selected--after--Transition: var(--pf-v5-global--Transition);
-  --pf-v5-c-tile--m-selected--after--ScaleY: 2;
-  --pf-v5-c-tile--m-selected__icon--Color: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-tile--m-selected__title--Color: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-tile--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-tile--m-disabled__icon--Color: var(--pf-v5-global--disabled-color--100);
-  --pf-v5-c-tile--m-disabled__title--Color: var(--pf-v5-global--disabled-color--100);
-  --pf-v5-c-tile--m-disabled__body--Color: var(--pf-v5-global--disabled-color--100);
-  --pf-v5-c-tile__header--m-stacked__icon--MarginBottom: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-tile__header--m-stacked__icon--FontSize: var(--pf-v5-global--icon--FontSize--lg);
-  --pf-v5-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-v5-global--icon--FontSize--xl);
+  --pf-v5-c-tile__icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-tile__icon--FontSize: var(--pf-t--global--icon--size--body--default);
+  --pf-v5-c-tile__icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-tile__title--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-tile__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v5-c-tile__body--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-tile__body--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-tile--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
+  --pf-v5-c-tile--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
+  --pf-v5-c-tile--m-selected--before--BorderWidth: var(--pf-t--global--border--width--box--clicked);
+  --pf-v5-c-tile--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --pf-v5-c-tile--m-disabled__title--Color: var(--pf-t--global--text--color--on-disabled);
+  --pf-v5-c-tile--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
+  --pf-v5-c-tile--m-disabled__body--Color: var(--pf-t--global--text--color--on-disabled);
+  --pf-v5-c-tile__header--m-stacked__icon--MarginBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-tile__header--m-stacked__icon--FontSize: var(--pf-t--global--icon--size--xl);
+  --pf-v5-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-t--global--icon--size--2xl);
+}
+
+.pf-v5-c-tile {
   position: relative;
   display: inline-grid;
   grid-template-rows: min-content;
-  padding: var(--pf-v5-c-tile--PaddingTop) var(--pf-v5-c-tile--PaddingRight) var(--pf-v5-c-tile--PaddingBottom) var(--pf-v5-c-tile--PaddingLeft);
-  text-align: center;
+  padding-block-start: var(--pf-v5-c-tile--PaddingTop);
+  padding-block-end: var(--pf-v5-c-tile--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-tile--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-tile--PaddingRight);
   cursor: pointer;
   background-color: var(--pf-v5-c-tile--BackgroundColor);
-  transition: var(--pf-v5-c-tile--Transition);
-  transform: translateY(var(--pf-v5-c-tile--TranslateY));
+  border-radius: var(--pf-v5-c-tile--BorderRadius);
 }
 .pf-v5-c-tile::before, .pf-v5-c-tile::after {
   position: absolute;
@@ -56,47 +47,23 @@
   content: "";
 }
 .pf-v5-c-tile::before {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   border: var(--pf-v5-c-tile--before--BorderWidth) solid var(--pf-v5-c-tile--before--BorderColor);
-}
-.pf-v5-c-tile::after {
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: var(--pf-v5-c-tile--after--Height);
-  background-color: var(--pf-v5-c-tile--after--BackgroundColor);
-  transition: var(--pf-v5-c-tile--after--Transition);
-  transform: scaleY(var(--pf-v5-c-tile--after--ScaleY)) translateY(var(--pf-v5-c-tile--after--TranslateY));
+  border-radius: var(--pf-v5-c-tile--before--BorderRadius);
 }
 .pf-v5-c-tile:hover {
-  --pf-v5-c-tile__title--Color: var(--pf-v5-c-tile--hover__title--Color);
-  --pf-v5-c-tile__icon--Color: var(--pf-v5-c-tile--hover__icon--Color);
-  --pf-v5-c-tile--after--BackgroundColor: var(--pf-v5-c-tile--hover--after--BackgroundColor);
+  --pf-v5-c-tile--before--BorderColor: var(--pf-v5-c-tile--hover--before--BorderColor);
 }
-.pf-v5-c-tile:focus {
-  --pf-v5-c-tile__title--Color: var(--pf-v5-c-tile--focus__title--Color);
-  --pf-v5-c-tile__icon--Color: var(--pf-v5-c-tile--focus__icon--Color);
-  --pf-v5-c-tile--after--BackgroundColor: var(--pf-v5-c-tile--focus--after--BackgroundColor);
-}
-.pf-v5-c-tile:active, .pf-v5-c-tile.pf-m-selected {
-  --pf-v5-c-tile__title--Color: var(--pf-v5-c-tile--m-selected__title--Color);
-  --pf-v5-c-tile__icon--Color: var(--pf-v5-c-tile--m-selected__icon--Color);
-  --pf-v5-c-tile--TranslateY: var(--pf-v5-c-tile--m-selected--TranslateY);
-  --pf-v5-c-tile--Transition: var(--pf-v5-c-tile--m-selected--Transition);
-  --pf-v5-c-tile--after--Height: var(--pf-v5-c-tile--m-selected--after--Height);
-  --pf-v5-c-tile--after--BackgroundColor: var(--pf-v5-c-tile--m-selected--after--BackgroundColor);
-  --pf-v5-c-tile--after--Transition: var(--pf-v5-c-tile--m-selected--after--Transition);
-  --pf-v5-c-tile--after--ScaleY: var(--pf-v5-c-tile--m-selected--after--ScaleY);
+.pf-v5-c-tile.pf-m-selected {
+  --pf-v5-c-tile--before--BorderColor: var(--pf-v5-c-tile--m-selected--before--BorderColor);
+  --pf-v5-c-tile--before--BorderWidth: var(--pf-v5-c-tile--m-selected--before--BorderWidth);
 }
 .pf-v5-c-tile.pf-m-disabled {
   --pf-v5-c-tile--BackgroundColor: var(--pf-v5-c-tile--m-disabled--BackgroundColor);
   --pf-v5-c-tile__title--Color: var(--pf-v5-c-tile--m-disabled__title--Color);
+  --pf-v5-c-tile__icon--Color: var(--pf-v5-c-tile--m-disabled__icon--Color);
   --pf-v5-c-tile__body--Color: var(--pf-v5-c-tile--m-disabled__body--Color);
   --pf-v5-c-tile--before--BorderWidth: 0;
-  --pf-v5-c-tile__icon--Color: var(--pf-v5-c-tile--m-disabled__icon--Color);
   pointer-events: none;
 }
 .pf-v5-c-tile.pf-m-display-lg .pf-v5-c-tile__header.pf-m-stacked {
@@ -106,22 +73,21 @@
 .pf-v5-c-tile__header {
   display: flex;
   align-items: center;
-  justify-content: center;
 }
 .pf-v5-c-tile__header.pf-m-stacked {
   --pf-v5-c-tile__icon--MarginRight: 0;
   --pf-v5-c-tile__icon--FontSize: var(--pf-v5-c-tile__header--m-stacked__icon--FontSize);
   flex-direction: column;
-  justify-content: initial;
+  align-items: flex-start;
 }
 .pf-v5-c-tile__header.pf-m-stacked .pf-v5-c-tile__icon {
   display: flex;
   align-items: center;
-  justify-content: center;
-  margin-bottom: var(--pf-v5-c-tile__header--m-stacked__icon--MarginBottom);
+  margin-block-end: var(--pf-v5-c-tile__header--m-stacked__icon--MarginBottom);
 }
 
 .pf-v5-c-tile__title {
+  font-weight: var(--pf-v5-c-tile__title--FontWeight);
   color: var(--pf-v5-c-tile__title--Color);
 }
 
@@ -131,14 +97,7 @@
 }
 
 .pf-v5-c-tile__icon {
-  margin-right: var(--pf-v5-c-tile__icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-tile__icon--MarginRight);
   font-size: var(--pf-v5-c-tile__icon--FontSize);
   color: var(--pf-v5-c-tile__icon--Color);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-tile {
-  --pf-v5-c-tile--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
-  --pf-v5-c-tile--m-disabled__title--Color: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-tile--m-disabled__icon--Color: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-tile--m-disabled__body--Color: var(--pf-v5-global--disabled-color--300);
 }

package/components/Tile/tile.scss

@@ -1,77 +1,65 @@
 // @debug $tile; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$tile} {
-  --#{$tile}--PaddingTop: var(--#{$pf-global}--spacer--lg);
-  --#{$tile}--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$tile}--PaddingBottom: var(--#{$pf-global}--spacer--lg);
-  --#{$tile}--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$tile}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$tile}--Transition: none;
-  --#{$tile}--TranslateY: 0;
+:where(:root),
+:where(.#{$tile}) {
+  --#{$tile}--PaddingTop: var(--pf-t--global--spacer--lg);
+  --#{$tile}--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$tile}--PaddingBottom: var(--pf-t--global--spacer--lg);
+  --#{$tile}--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$tile}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$tile}--BorderRadius: var(--pf-t--global--border--radius--medium);
 
   // borders
-  --#{$tile}--before--BorderColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$tile}--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$tile}--after--Height: var(--#{$pf-global}--BorderWidth--lg);
+  --#{$tile}--before--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$tile}--before--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --#{$tile}--before--BorderRadius: var(--#{$tile}--BorderRadius);
   --#{$tile}--after--BackgroundColor: transparent;
-  --#{$tile}--after--Transition: none;
-  --#{$tile}--after--ScaleY: 1;
-  --#{$tile}--after--TranslateY: 0;
 
   // icon
-  --#{$tile}__icon--MarginRight: var(--#{$pf-global}--spacer--sm);
-  --#{$tile}__icon--FontSize: var(--#{$pf-global}--icon--FontSize--md);
-  --#{$tile}__icon--Color: var(--#{$pf-global}--Color--100);
+  --#{$tile}__icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$tile}__icon--FontSize: var(--pf-t--global--icon--size--body--default);
+  --#{$tile}__icon--Color: var(--pf-t--global--icon--color--regular);
 
   // title
-  --#{$tile}__title--Color: var(--#{$pf-global}--Color--100);
+  --#{$tile}__title--Color: var(--pf-t--global--text--color--regular);
+  --#{$tile}__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
 
   // body
-  --#{$tile}__body--Color: var(--#{$pf-global}--Color--100);
-  --#{$tile}__body--FontSize: var(--#{$pf-global}--FontSize--xs);
+  --#{$tile}__body--Color: var(--pf-t--global--text--color--regular);
+  --#{$tile}__body--FontSize: var(--pf-t--global--font--size--body--sm);
 
   // hover
-  --#{$tile}--hover--after--BackgroundColor: var(--#{$pf-global}--active-color--400);
-  --#{$tile}--hover__icon--Color: var(--#{$pf-global}--primary-color--100);
-  --#{$tile}--hover__title--Color: var(--#{$pf-global}--primary-color--100);
-
-  // focus
-  --#{$tile}--focus--after--BackgroundColor: var(--#{$pf-global}--active-color--400);
-  --#{$tile}--focus__icon--Color: var(--#{$pf-global}--primary-color--100);
-  --#{$tile}--focus__title--Color: var(--#{$pf-global}--primary-color--100);
+  --#{$tile}--hover--before--BorderColor: var(--pf-t--global--border--color--hover);
 
   // selected
-  --#{$tile}--m-selected--TranslateY: calc(-1 * var(--#{$tile}--m-selected--after--ScaleY) * var(--#{$tile}--m-selected--after--Height));
-  --#{$tile}--m-selected--Transition: var(--#{$pf-global}--Transition);
-  --#{$tile}--m-selected--after--Height: var(--#{$pf-global}--BorderWidth--lg);
-  --#{$tile}--m-selected--after--BackgroundColor: var(--#{$pf-global}--active-color--100);
-  --#{$tile}--m-selected--after--Transition: var(--#{$pf-global}--Transition);
-  --#{$tile}--m-selected--after--ScaleY: 2;
-  --#{$tile}--m-selected__icon--Color: var(--#{$pf-global}--primary-color--100);
-  --#{$tile}--m-selected__title--Color: var(--#{$pf-global}--primary-color--100);
+  --#{$tile}--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
+  --#{$tile}--m-selected--before--BorderWidth: var(--pf-t--global--border--width--box--clicked);
 
   // disabled
-  --#{$tile}--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
-  --#{$tile}--m-disabled__icon--Color: var(--#{$pf-global}--disabled-color--100);
-  --#{$tile}--m-disabled__title--Color: var(--#{$pf-global}--disabled-color--100);
-  --#{$tile}--m-disabled__body--Color: var(--#{$pf-global}--disabled-color--100);
+  --#{$tile}--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --#{$tile}--m-disabled__title--Color: var(--pf-t--global--text--color--on-disabled);
+  --#{$tile}--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
+  --#{$tile}--m-disabled__body--Color: var(--pf-t--global--text--color--on-disabled);
 
   // Stacked variatiion
-  --#{$tile}__header--m-stacked__icon--MarginBottom: var(--#{$pf-global}--spacer--xs);
-  --#{$tile}__header--m-stacked__icon--FontSize: var(--#{$pf-global}--icon--FontSize--lg);
+  --#{$tile}__header--m-stacked__icon--MarginBottom: var(--pf-t--global--spacer--md);
+  --#{$tile}__header--m-stacked__icon--FontSize: var(--pf-t--global--icon--size--xl);
 
   // large variation
-  --#{$tile}--m-display-lg__header--m-stacked__icon--FontSize: var(--#{$pf-global}--icon--FontSize--xl);
+  --#{$tile}--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-t--global--icon--size--2xl);
+}
 
+.#{$tile} {
   position: relative;
   display: inline-grid;
   grid-template-rows: min-content;
-  padding: var(--#{$tile}--PaddingTop) var(--#{$tile}--PaddingRight) var(--#{$tile}--PaddingBottom) var(--#{$tile}--PaddingLeft);
-  text-align: center;
+  padding-block-start: var(--#{$tile}--PaddingTop);
+  padding-block-end: var(--#{$tile}--PaddingBottom);
+  padding-inline-start: var(--#{$tile}--PaddingLeft);
+  padding-inline-end: var(--#{$tile}--PaddingRight);
   cursor: pointer;
   background-color: var(--#{$tile}--BackgroundColor);
-  transition: var(--#{$tile}--Transition);
-  transform: translateY(var(--#{$tile}--TranslateY));
+  border-radius: var(--#{$tile}--BorderRadius);
 
   &::before,
   &::after {
@@ -81,53 +69,26 @@
   }
 
   &::before {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     border: var(--#{$tile}--before--BorderWidth) solid var(--#{$tile}--before--BorderColor);
-  }
-
-  &::after {
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: var(--#{$tile}--after--Height);
-    background-color: var(--#{$tile}--after--BackgroundColor);
-    transition: var(--#{$tile}--after--Transition);
-    transform: scaleY(var(--#{$tile}--after--ScaleY)) translateY(var(--#{$tile}--after--TranslateY));
+    border-radius: var(--#{$tile}--before--BorderRadius);
   }
 
   &:hover {
-    --#{$tile}__title--Color: var(--#{$tile}--hover__title--Color);
-    --#{$tile}__icon--Color: var(--#{$tile}--hover__icon--Color);
-    --#{$tile}--after--BackgroundColor: var(--#{$tile}--hover--after--BackgroundColor);
+    --#{$tile}--before--BorderColor: var(--#{$tile}--hover--before--BorderColor);
   }
 
-  &:focus {
-    --#{$tile}__title--Color: var(--#{$tile}--focus__title--Color);
-    --#{$tile}__icon--Color: var(--#{$tile}--focus__icon--Color);
-    --#{$tile}--after--BackgroundColor: var(--#{$tile}--focus--after--BackgroundColor);
-  }
-
-  &:active, // for demo purposes - will remove
   &.pf-m-selected {
-    --#{$tile}__title--Color: var(--#{$tile}--m-selected__title--Color);
-    --#{$tile}__icon--Color: var(--#{$tile}--m-selected__icon--Color);
-    --#{$tile}--TranslateY: var(--#{$tile}--m-selected--TranslateY);
-    --#{$tile}--Transition: var(--#{$tile}--m-selected--Transition);
-    --#{$tile}--after--Height: var(--#{$tile}--m-selected--after--Height);
-    --#{$tile}--after--BackgroundColor: var(--#{$tile}--m-selected--after--BackgroundColor);
-    --#{$tile}--after--Transition: var(--#{$tile}--m-selected--after--Transition);
-    --#{$tile}--after--ScaleY: var(--#{$tile}--m-selected--after--ScaleY);
+    --#{$tile}--before--BorderColor: var(--#{$tile}--m-selected--before--BorderColor);
+    --#{$tile}--before--BorderWidth: var(--#{$tile}--m-selected--before--BorderWidth);
   }
 
   &.pf-m-disabled {
     --#{$tile}--BackgroundColor: var(--#{$tile}--m-disabled--BackgroundColor);
     --#{$tile}__title--Color: var(--#{$tile}--m-disabled__title--Color);
+    --#{$tile}__icon--Color: var(--#{$tile}--m-disabled__icon--Color);
     --#{$tile}__body--Color: var(--#{$tile}--m-disabled__body--Color);
     --#{$tile}--before--BorderWidth: 0;
-    --#{$tile}__icon--Color: var(--#{$tile}--m-disabled__icon--Color);
 
     pointer-events: none;
   }
@@ -142,25 +103,24 @@
 .#{$tile}__header {
   display: flex;
   align-items: center;
-  justify-content: center;
 
   &.pf-m-stacked {
     --#{$tile}__icon--MarginRight: 0;
     --#{$tile}__icon--FontSize: var(--#{$tile}__header--m-stacked__icon--FontSize);
 
     flex-direction: column;
-    justify-content: initial;
+    align-items: flex-start;
 
     .#{$tile}__icon {
       display: flex;
       align-items: center;
-      justify-content: center;
-      margin-bottom: var(--#{$tile}__header--m-stacked__icon--MarginBottom);
+      margin-block-end: var(--#{$tile}__header--m-stacked__icon--MarginBottom);
     }
   }
 }
 
 .#{$tile}__title {
+  font-weight: var(--#{$tile}__title--FontWeight);
   color: var(--#{$tile}__title--Color);
 }
 
@@ -170,14 +130,8 @@
 }
 
 .#{$tile}__icon {
-  margin-right: var(--#{$tile}__icon--MarginRight);
+  margin-inline-end: var(--#{$tile}__icon--MarginRight);
   font-size: var(--#{$tile}__icon--FontSize);
   color: var(--#{$tile}__icon--Color);
 }
 
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/tile";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-tile;
-}

package/components/Timestamp/timestamp.css

@@ -1,16 +1,19 @@
-.pf-v5-c-timestamp {
-  --pf-v5-c-timestamp--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-timestamp--Color: var(--pf-v5-global--Color--200);
+:root, .pf-v5-c-timestamp {
+  --pf-v5-c-timestamp--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-timestamp--Color: var(--pf-t--global--text--color--subtle);
   --pf-v5-c-timestamp--OutlineOffset: 0.1875rem;
   --pf-v5-c-timestamp--m-help-text--TextDecorationLine: underline;
   --pf-v5-c-timestamp--m-help-text--TextDecorationStyle: dashed;
-  --pf-v5-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--regular);
   --pf-v5-c-timestamp--m-help-text--TextUnderlineOffset: 0.25rem;
-  --pf-v5-c-timestamp--m-help-text--TextDecorationColor: var(--pf-v5-global--BorderColor--200);
-  --pf-v5-c-timestamp--m-help-text--hover--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-timestamp--m-help-text--focus--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-v5-global--Color--100);
-  --pf-v5-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-v5-global--Color--100);
+  --pf-v5-c-timestamp--m-help-text--TextDecorationColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-timestamp--m-help-text--hover--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-timestamp--m-help-text--focus--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-t--global--text--color--regular);
+}
+
+.pf-v5-c-timestamp {
   display: inline-block;
   font-size: var(--pf-v5-c-timestamp--FontSize);
   color: var(--pf-v5-c-timestamp--Color);

package/components/Timestamp/timestamp.scss

@@ -1,21 +1,22 @@
 // @debug $timestamp; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-
-.#{$timestamp} {
-  --#{$timestamp}--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$timestamp}--Color: var(--#{$pf-global}--Color--200);
+:root, .#{$timestamp} {
+  --#{$timestamp}--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$timestamp}--Color: var(--pf-t--global--text--color--subtle);
   --#{$timestamp}--OutlineOffset: #{pf-size-prem(3px)};
 
   // Help text variables for the timestamp
   --#{$timestamp}--m-help-text--TextDecorationLine: underline;
   --#{$timestamp}--m-help-text--TextDecorationStyle: dashed;
-  --#{$timestamp}--m-help-text--TextDecorationThickness: var(--#{$pf-global}--BorderWidth--sm);
+  --#{$timestamp}--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--regular);
   --#{$timestamp}--m-help-text--TextUnderlineOffset: #{pf-size-prem(4px)};
-  --#{$timestamp}--m-help-text--TextDecorationColor: var(--#{$pf-global}--BorderColor--200);
-  --#{$timestamp}--m-help-text--hover--Color: var(--#{$pf-global}--Color--100);
-  --#{$timestamp}--m-help-text--focus--Color: var(--#{$pf-global}--Color--100);
-  --#{$timestamp}--m-help-text--hover--TextDecorationColor: var(--#{$pf-global}--Color--100);
-  --#{$timestamp}--m-help-text--focus--TextDecorationColor: var(--#{$pf-global}--Color--100);
+  --#{$timestamp}--m-help-text--TextDecorationColor: var(--pf-t--global--border--color--default);
+  --#{$timestamp}--m-help-text--hover--Color: var(--pf-t--global--text--color--regular);
+  --#{$timestamp}--m-help-text--focus--Color: var(--pf-t--global--text--color--regular);
+  --#{$timestamp}--m-help-text--hover--TextDecorationColor: var(--pf-t--global--text--color--regular);
+  --#{$timestamp}--m-help-text--focus--TextDecorationColor: var(--pf-t--global--text--color--regular);
+}
 
+.#{$timestamp} { 
   display: inline-block;
   font-size: var(--#{$timestamp}--FontSize);
   color: var(--#{$timestamp}--Color);