@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.81

package/components/Tile/tile.css

@@ -1,45 +1,35 @@
-.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--font--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;
@@ -47,11 +37,9 @@
   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);
-  text-align: center;
   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;
@@ -61,42 +49,21 @@
 .pf-v5-c-tile::before {
   inset: 0;
   border: var(--pf-v5-c-tile--before--BorderWidth) solid var(--pf-v5-c-tile--before--BorderColor);
-}
-.pf-v5-c-tile::after {
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 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-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);
 }
 
@@ -134,11 +100,4 @@
   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,68 +1,55 @@
 // @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--font--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;
@@ -70,11 +57,9 @@
   padding-block-end: var(--#{$tile}--PaddingBottom);
   padding-inline-start: var(--#{$tile}--PaddingLeft);
   padding-inline-end: var(--#{$tile}--PaddingRight);
-  text-align: center;
   cursor: pointer;
   background-color: var(--#{$tile}--BackgroundColor);
-  transition: var(--#{$tile}--Transition);
-  transform: translateY(var(--#{$tile}--TranslateY));
+  border-radius: var(--#{$tile}--BorderRadius);
 
   &::before,
   &::after {
@@ -86,48 +71,24 @@
   &::before {
     inset: 0;
     border: var(--#{$tile}--before--BorderWidth) solid var(--#{$tile}--before--BorderColor);
-  }
-
-  &::after {
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    inset-inline-end: 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-block-end: var(--#{$tile}__header--m-stacked__icon--MarginBottom);
     }
   }
 }
 
 .#{$tile}__title {
+  font-weight: var(--#{$tile}__title--FontWeight);
   color: var(--#{$tile}__title--Color);
 }
 
@@ -175,9 +135,3 @@
   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);

package/components/Title/title.css

@@ -1,23 +1,44 @@
+:root {
+  --pf-v5-c-title--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v5-c-title--m-4xl--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-4xl--FontSize: var(--pf-t--global--font--size--heading--2xl);
+  --pf-v5-c-title--m-4xl--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-3xl--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-3xl--FontSize: var(--pf-t--global--font--size--heading--xl);
+  --pf-v5-c-title--m-3xl--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-2xl--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-2xl--FontSize: var(--pf-t--global--font--size--heading--lg);
+  --pf-v5-c-title--m-2xl--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-xl--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-xl--FontSize: var(--pf-t--global--font--size--heading--md);
+  --pf-v5-c-title--m-xl--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-lg--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-lg--FontSize: var(--pf-t--global--font--size--heading--sm);
+  --pf-v5-c-title--m-lg--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-md--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-md--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-title--m-md--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-h1--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-h1--FontSize: var(--pf-t--global--font--size--heading--h1);
+  --pf-v5-c-title--m-h1--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-h2--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-h2--FontSize: var(--pf-t--global--font--size--heading--h2);
+  --pf-v5-c-title--m-h2--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-h3--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-h3--FontSize: var(--pf-t--global--font--size--heading--h3);
+  --pf-v5-c-title--m-h3--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-h4--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-h4--FontSize: var(--pf-t--global--font--size--heading--h4);
+  --pf-v5-c-title--m-h4--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-h5--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-h5--FontSize: var(--pf-t--global--font--size--heading--h5);
+  --pf-v5-c-title--m-h5--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-title--m-h6--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-title--m-h6--FontSize: var(--pf-t--global--font--size--heading--h6);
+  --pf-v5-c-title--m-h6--FontWeight: var(--pf-t--global--font--weight--heading);
+}
+
 .pf-v5-c-title {
-  --pf-v5-c-title--FontFamily: var(--pf-v5-global--FontFamily--heading);
-  --pf-v5-c-title--m-4xl--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-title--m-4xl--FontSize: var(--pf-v5-global--FontSize--4xl);
-  --pf-v5-c-title--m-4xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-title--m-3xl--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-title--m-3xl--FontSize: var(--pf-v5-global--FontSize--3xl);
-  --pf-v5-c-title--m-3xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-title--m-2xl--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-title--m-2xl--FontSize: var(--pf-v5-global--FontSize--2xl);
-  --pf-v5-c-title--m-2xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-title--m-xl--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-title--m-xl--FontSize: var(--pf-v5-global--FontSize--xl);
-  --pf-v5-c-title--m-xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-title--m-lg--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-title--m-lg--FontSize: var(--pf-v5-global--FontSize--lg);
-  --pf-v5-c-title--m-lg--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-title--m-md--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-title--m-md--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-title--m-md--FontWeight: var(--pf-v5-global--FontWeight--normal);
   font-family: var(--pf-v5-c-title--FontFamily);
   word-break: break-word;
 }
@@ -50,4 +71,34 @@
   font-size: var(--pf-v5-c-title--m-md--FontSize);
   font-weight: var(--pf-v5-c-title--m-md--FontWeight);
   line-height: var(--pf-v5-c-title--m-md--LineHeight);
+}
+.pf-v5-c-title.pf-m-h1 {
+  font-size: var(--pf-v5-c-title--m-h1--FontSize);
+  font-weight: var(--pf-v5-c-title--m-h1--FontWeight);
+  line-height: var(--pf-v5-c-title--m-h1--LineHeight);
+}
+.pf-v5-c-title.pf-m-h2 {
+  font-size: var(--pf-v5-c-title--m-h2--FontSize);
+  font-weight: var(--pf-v5-c-title--m-h2--FontWeight);
+  line-height: var(--pf-v5-c-title--m-h2--LineHeight);
+}
+.pf-v5-c-title.pf-m-h3 {
+  font-size: var(--pf-v5-c-title--m-h3--FontSize);
+  font-weight: var(--pf-v5-c-title--m-h3--FontWeight);
+  line-height: var(--pf-v5-c-title--m-h3--LineHeight);
+}
+.pf-v5-c-title.pf-m-h4 {
+  font-size: var(--pf-v5-c-title--m-h4--FontSize);
+  font-weight: var(--pf-v5-c-title--m-h4--FontWeight);
+  line-height: var(--pf-v5-c-title--m-h4--LineHeight);
+}
+.pf-v5-c-title.pf-m-h5 {
+  font-size: var(--pf-v5-c-title--m-h5--FontSize);
+  font-weight: var(--pf-v5-c-title--m-h5--FontWeight);
+  line-height: var(--pf-v5-c-title--m-h5--LineHeight);
+}
+.pf-v5-c-title.pf-m-h6 {
+  font-size: var(--pf-v5-c-title--m-h6--FontSize);
+  font-weight: var(--pf-v5-c-title--m-h6--FontWeight);
+  line-height: var(--pf-v5-c-title--m-h6--LineHeight);
 }