@patternfly/react-styles 5.0.0-alpha.1 → 5.0.0-alpha.10

package/css/components/Tile/tile.css

@@ -1,144 +1,144 @@
-.pf-c-tile {
-  --pf-c-tile--PaddingTop: var(--pf-global--spacer--lg);
-  --pf-c-tile--PaddingRight: var(--pf-global--spacer--lg);
-  --pf-c-tile--PaddingBottom: var(--pf-global--spacer--lg);
-  --pf-c-tile--PaddingLeft: var(--pf-global--spacer--lg);
-  --pf-c-tile--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-tile--Transition: none;
-  --pf-c-tile--TranslateY: 0;
-  --pf-c-tile--before--BorderColor: var(--pf-global--BorderColor--100);
-  --pf-c-tile--before--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-tile--after--Height: var(--pf-global--BorderWidth--lg);
-  --pf-c-tile--after--BackgroundColor: transparent;
-  --pf-c-tile--after--Transition: none;
-  --pf-c-tile--after--ScaleY: 1;
-  --pf-c-tile--after--TranslateY: 0;
-  --pf-c-tile__icon--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-tile__icon--FontSize: var(--pf-global--icon--FontSize--md);
-  --pf-c-tile__icon--Color: var(--pf-global--Color--100);
-  --pf-c-tile__title--Color: var(--pf-global--Color--100);
-  --pf-c-tile__body--Color: var(--pf-global--Color--100);
-  --pf-c-tile__body--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-tile--hover--after--BackgroundColor: var(--pf-global--active-color--400);
-  --pf-c-tile--hover__icon--Color: var(--pf-global--primary-color--100);
-  --pf-c-tile--hover__title--Color: var(--pf-global--primary-color--100);
-  --pf-c-tile--focus--after--BackgroundColor: var(--pf-global--active-color--400);
-  --pf-c-tile--focus__icon--Color: var(--pf-global--primary-color--100);
-  --pf-c-tile--focus__title--Color: var(--pf-global--primary-color--100);
-  --pf-c-tile--m-selected--TranslateY: calc(-1 * var(--pf-c-tile--m-selected--after--ScaleY) * var(--pf-c-tile--m-selected--after--Height));
-  --pf-c-tile--m-selected--Transition: var(--pf-global--Transition);
-  --pf-c-tile--m-selected--after--Height: var(--pf-global--BorderWidth--lg);
-  --pf-c-tile--m-selected--after--BackgroundColor: var(--pf-global--active-color--100);
-  --pf-c-tile--m-selected--after--Transition: var(--pf-global--Transition);
-  --pf-c-tile--m-selected--after--ScaleY: 2;
-  --pf-c-tile--m-selected__icon--Color: var(--pf-global--primary-color--100);
-  --pf-c-tile--m-selected__title--Color: var(--pf-global--primary-color--100);
-  --pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
-  --pf-c-tile--m-disabled__icon--Color: var(--pf-global--disabled-color--100);
-  --pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--100);
-  --pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--100);
-  --pf-c-tile__header--m-stacked__icon--MarginBottom: var(--pf-global--spacer--xs);
-  --pf-c-tile__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--lg);
-  --pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--xl);
+.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);
+  --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);
   position: relative;
   display: inline-grid;
-  padding: var(--pf-c-tile--PaddingTop) var(--pf-c-tile--PaddingRight) var(--pf-c-tile--PaddingBottom) var(--pf-c-tile--PaddingLeft);
+  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;
   cursor: pointer;
-  background-color: var(--pf-c-tile--BackgroundColor);
-  grid-template-rows: min-content;
-  transition: var(--pf-c-tile--Transition);
-  transform: translateY(var(--pf-c-tile--TranslateY));
+  background-color: var(--pf-v5-c-tile--BackgroundColor);
+  transition: var(--pf-v5-c-tile--Transition);
+  transform: translateY(var(--pf-v5-c-tile--TranslateY));
 }
-.pf-c-tile::before, .pf-c-tile::after {
+.pf-v5-c-tile::before, .pf-v5-c-tile::after {
   position: absolute;
   pointer-events: none;
   content: "";
 }
-.pf-c-tile::before {
+.pf-v5-c-tile::before {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  border: var(--pf-c-tile--before--BorderWidth) solid var(--pf-c-tile--before--BorderColor);
+  border: var(--pf-v5-c-tile--before--BorderWidth) solid var(--pf-v5-c-tile--before--BorderColor);
 }
-.pf-c-tile::after {
+.pf-v5-c-tile::after {
   right: 0;
   bottom: 0;
   left: 0;
-  height: var(--pf-c-tile--after--Height);
-  background-color: var(--pf-c-tile--after--BackgroundColor);
-  transition: var(--pf-c-tile--after--Transition);
-  transform: scaleY(var(--pf-c-tile--after--ScaleY)) translateY(var(--pf-c-tile--after--TranslateY));
+  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));
 }
-.pf-c-tile:hover {
-  --pf-c-tile__title--Color: var(--pf-c-tile--hover__title--Color);
-  --pf-c-tile__icon--Color: var(--pf-c-tile--hover__icon--Color);
-  --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--hover--after--BackgroundColor);
+.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-c-tile:focus {
-  --pf-c-tile__title--Color: var(--pf-c-tile--focus__title--Color);
-  --pf-c-tile__icon--Color: var(--pf-c-tile--focus__icon--Color);
-  --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--focus--after--BackgroundColor);
+.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-c-tile:active, .pf-c-tile.pf-m-selected {
-  --pf-c-tile__title--Color: var(--pf-c-tile--m-selected__title--Color);
-  --pf-c-tile__icon--Color: var(--pf-c-tile--m-selected__icon--Color);
-  --pf-c-tile--TranslateY: var(--pf-c-tile--m-selected--TranslateY);
-  --pf-c-tile--Transition: var(--pf-c-tile--m-selected--Transition);
-  --pf-c-tile--after--Height: var(--pf-c-tile--m-selected--after--Height);
-  --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--m-selected--after--BackgroundColor);
-  --pf-c-tile--after--Transition: var(--pf-c-tile--m-selected--after--Transition);
-  --pf-c-tile--after--ScaleY: var(--pf-c-tile--m-selected--after--ScaleY);
+.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-c-tile.pf-m-disabled {
-  --pf-c-tile--BackgroundColor: var(--pf-c-tile--m-disabled--BackgroundColor);
-  --pf-c-tile__title--Color: var(--pf-c-tile--m-disabled__title--Color);
-  --pf-c-tile__body--Color: var(--pf-c-tile--m-disabled__body--Color);
-  --pf-c-tile--before--BorderWidth: 0;
-  --pf-c-tile__icon--Color: var(--pf-c-tile--m-disabled__icon--Color);
+.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__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-c-tile.pf-m-display-lg .pf-c-tile__header.pf-m-stacked {
-  --pf-c-tile__icon--FontSize: var(--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize);
+.pf-v5-c-tile.pf-m-display-lg .pf-v5-c-tile__header.pf-m-stacked {
+  --pf-v5-c-tile__icon--FontSize: var(--pf-v5-c-tile--m-display-lg__header--m-stacked__icon--FontSize);
 }
 
-.pf-c-tile__header {
+.pf-v5-c-tile__header {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.pf-c-tile__header.pf-m-stacked {
-  --pf-c-tile__icon--MarginRight: 0;
-  --pf-c-tile__icon--FontSize: var(--pf-c-tile__header--m-stacked__icon--FontSize);
+.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;
 }
-.pf-c-tile__header.pf-m-stacked .pf-c-tile__icon {
+.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-c-tile__header--m-stacked__icon--MarginBottom);
+  margin-bottom: var(--pf-v5-c-tile__header--m-stacked__icon--MarginBottom);
 }
 
-.pf-c-tile__title {
-  color: var(--pf-c-tile__title--Color);
+.pf-v5-c-tile__title {
+  color: var(--pf-v5-c-tile__title--Color);
 }
 
-.pf-c-tile__body {
-  font-size: var(--pf-c-tile__body--FontSize);
-  color: var(--pf-c-tile__body--Color);
+.pf-v5-c-tile__body {
+  font-size: var(--pf-v5-c-tile__body--FontSize);
+  color: var(--pf-v5-c-tile__body--Color);
 }
 
-.pf-c-tile__icon {
-  margin-right: var(--pf-c-tile__icon--MarginRight);
-  font-size: var(--pf-c-tile__icon--FontSize);
-  color: var(--pf-c-tile__icon--Color);
+.pf-v5-c-tile__icon {
+  margin-right: 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-theme-dark) .pf-c-tile {
-  --pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
-  --pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--300);
-  --pf-c-tile--m-disabled__icon--Color: var(--pf-global--disabled-color--300);
-  --pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--300);
+: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/css/components/Tile/tile.d.ts

@@ -6,11 +6,11 @@ declare const _default: {
     "displayLg": "pf-m-display-lg",
     "stacked": "pf-m-stacked"
   },
-  "themeDark": "pf-theme-dark",
-  "tile": "pf-c-tile",
-  "tileBody": "pf-c-tile__body",
-  "tileHeader": "pf-c-tile__header",
-  "tileIcon": "pf-c-tile__icon",
-  "tileTitle": "pf-c-tile__title"
+  "themeDark": "pf-v5-theme-dark",
+  "tile": "pf-v5-c-tile",
+  "tileBody": "pf-v5-c-tile__body",
+  "tileHeader": "pf-v5-c-tile__header",
+  "tileIcon": "pf-v5-c-tile__icon",
+  "tileTitle": "pf-v5-c-tile__title"
 };
 export default _default;

package/css/components/Tile/tile.js

@@ -8,10 +8,10 @@ exports.default = {
     "displayLg": "pf-m-display-lg",
     "stacked": "pf-m-stacked"
   },
-  "themeDark": "pf-theme-dark",
-  "tile": "pf-c-tile",
-  "tileBody": "pf-c-tile__body",
-  "tileHeader": "pf-c-tile__header",
-  "tileIcon": "pf-c-tile__icon",
-  "tileTitle": "pf-c-tile__title"
+  "themeDark": "pf-v5-theme-dark",
+  "tile": "pf-v5-c-tile",
+  "tileBody": "pf-v5-c-tile__body",
+  "tileHeader": "pf-v5-c-tile__header",
+  "tileIcon": "pf-v5-c-tile__icon",
+  "tileTitle": "pf-v5-c-tile__title"
 };

package/css/components/Tile/tile.mjs

@@ -6,10 +6,10 @@ export default {
     "displayLg": "pf-m-display-lg",
     "stacked": "pf-m-stacked"
   },
-  "themeDark": "pf-theme-dark",
-  "tile": "pf-c-tile",
-  "tileBody": "pf-c-tile__body",
-  "tileHeader": "pf-c-tile__header",
-  "tileIcon": "pf-c-tile__icon",
-  "tileTitle": "pf-c-tile__title"
+  "themeDark": "pf-v5-theme-dark",
+  "tile": "pf-v5-c-tile",
+  "tileBody": "pf-v5-c-tile__body",
+  "tileHeader": "pf-v5-c-tile__header",
+  "tileIcon": "pf-v5-c-tile__icon",
+  "tileTitle": "pf-v5-c-tile__title"
 };

package/css/components/Timestamp/timestamp.css

@@ -1,34 +1,34 @@
-.pf-c-timestamp {
-  --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-timestamp--Color: var(--pf-global--Color--200);
-  --pf-c-timestamp--OutlineOffset: 0.1875rem;
-  --pf-c-timestamp--m-help-text--TextDecorationLine: underline;
-  --pf-c-timestamp--m-help-text--TextDecorationStyle: dashed;
-  --pf-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
-  --pf-c-timestamp--m-help-text--TextUnderlineOffset: 0.25rem;
-  --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
-  --pf-c-timestamp--m-help-text--hover--Color: var(--pf-global--Color--100);
-  --pf-c-timestamp--m-help-text--focus--Color: var(--pf-global--Color--100);
-  --pf-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
-  --pf-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
+.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);
+  --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--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);
   display: inline-block;
-  font-size: var(--pf-c-timestamp--FontSize);
-  color: var(--pf-c-timestamp--Color);
-  outline-offset: var(--pf-c-timestamp--OutlineOffset);
+  font-size: var(--pf-v5-c-timestamp--FontSize);
+  color: var(--pf-v5-c-timestamp--Color);
+  outline-offset: var(--pf-v5-c-timestamp--OutlineOffset);
 }
-.pf-c-timestamp.pf-m-help-text {
+.pf-v5-c-timestamp.pf-m-help-text {
+  text-decoration-line: var(--pf-v5-c-timestamp--m-help-text--TextDecorationLine);
+  text-decoration-thickness: var(--pf-v5-c-timestamp--m-help-text--TextDecorationThickness);
+  text-decoration-style: var(--pf-v5-c-timestamp--m-help-text--TextDecorationStyle);
+  text-decoration-color: var(--pf-v5-c-timestamp--m-help-text--TextDecorationColor);
+  text-underline-offset: var(--pf-v5-c-timestamp--m-help-text--TextUnderlineOffset);
   cursor: pointer;
-  text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
-  text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
-  text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
-  text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
-  text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
 }
-.pf-c-timestamp.pf-m-help-text:hover {
-  --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);
-  --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--hover--TextDecorationColor);
+.pf-v5-c-timestamp.pf-m-help-text:hover {
+  --pf-v5-c-timestamp--Color: var(--pf-v5-c-timestamp--m-help-text--hover--Color);
+  --pf-v5-c-timestamp--m-help-text--TextDecorationColor: var(--pf-v5-c-timestamp--m-help-text--hover--TextDecorationColor);
 }
-.pf-c-timestamp.pf-m-help-text:focus {
-  --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--focus--Color);
-  --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--focus--TextDecorationColor);
+.pf-v5-c-timestamp.pf-m-help-text:focus {
+  --pf-v5-c-timestamp--Color: var(--pf-v5-c-timestamp--m-help-text--focus--Color);
+  --pf-v5-c-timestamp--m-help-text--TextDecorationColor: var(--pf-v5-c-timestamp--m-help-text--focus--TextDecorationColor);
 }

package/css/components/Timestamp/timestamp.d.ts

@@ -3,6 +3,6 @@ declare const _default: {
   "modifiers": {
     "helpText": "pf-m-help-text"
   },
-  "timestamp": "pf-c-timestamp"
+  "timestamp": "pf-v5-c-timestamp"
 };
 export default _default;

package/css/components/Timestamp/timestamp.js

@@ -5,5 +5,5 @@ exports.default = {
   "modifiers": {
     "helpText": "pf-m-help-text"
   },
-  "timestamp": "pf-c-timestamp"
+  "timestamp": "pf-v5-c-timestamp"
 };

package/css/components/Timestamp/timestamp.mjs

@@ -3,5 +3,5 @@ export default {
   "modifiers": {
     "helpText": "pf-m-help-text"
   },
-  "timestamp": "pf-c-timestamp"
+  "timestamp": "pf-v5-c-timestamp"
 };

package/css/components/Title/title.css

@@ -1,53 +1,53 @@
-.pf-c-title {
-  --pf-c-title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
-  --pf-c-title--m-4xl--LineHeight: var(--pf-global--LineHeight--sm);
-  --pf-c-title--m-4xl--FontSize: var(--pf-global--FontSize--4xl);
-  --pf-c-title--m-4xl--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-title--m-3xl--LineHeight: var(--pf-global--LineHeight--sm);
-  --pf-c-title--m-3xl--FontSize: var(--pf-global--FontSize--3xl);
-  --pf-c-title--m-3xl--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-title--m-2xl--LineHeight: var(--pf-global--LineHeight--sm);
-  --pf-c-title--m-2xl--FontSize: var(--pf-global--FontSize--2xl);
-  --pf-c-title--m-2xl--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-title--m-xl--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-title--m-xl--FontSize: var(--pf-global--FontSize--xl);
-  --pf-c-title--m-xl--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-title--m-lg--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-title--m-lg--FontSize: var(--pf-global--FontSize--lg);
-  --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-title--m-md--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-title--m-md--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--normal);
-  font-family: var(--pf-c-title--FontFamily);
+.pf-v5-c-title {
+  --pf-v5-c-title--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
+  --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;
 }
-.pf-c-title.pf-m-4xl {
-  font-size: var(--pf-c-title--m-4xl--FontSize);
-  font-weight: var(--pf-c-title--m-4xl--FontWeight);
-  line-height: var(--pf-c-title--m-4xl--LineHeight);
+.pf-v5-c-title.pf-m-4xl {
+  font-size: var(--pf-v5-c-title--m-4xl--FontSize);
+  font-weight: var(--pf-v5-c-title--m-4xl--FontWeight);
+  line-height: var(--pf-v5-c-title--m-4xl--LineHeight);
 }
-.pf-c-title.pf-m-3xl {
-  font-size: var(--pf-c-title--m-3xl--FontSize);
-  font-weight: var(--pf-c-title--m-3xl--FontWeight);
-  line-height: var(--pf-c-title--m-3xl--LineHeight);
+.pf-v5-c-title.pf-m-3xl {
+  font-size: var(--pf-v5-c-title--m-3xl--FontSize);
+  font-weight: var(--pf-v5-c-title--m-3xl--FontWeight);
+  line-height: var(--pf-v5-c-title--m-3xl--LineHeight);
 }
-.pf-c-title.pf-m-2xl {
-  font-size: var(--pf-c-title--m-2xl--FontSize);
-  font-weight: var(--pf-c-title--m-2xl--FontWeight);
-  line-height: var(--pf-c-title--m-2xl--LineHeight);
+.pf-v5-c-title.pf-m-2xl {
+  font-size: var(--pf-v5-c-title--m-2xl--FontSize);
+  font-weight: var(--pf-v5-c-title--m-2xl--FontWeight);
+  line-height: var(--pf-v5-c-title--m-2xl--LineHeight);
 }
-.pf-c-title.pf-m-xl {
-  font-size: var(--pf-c-title--m-xl--FontSize);
-  font-weight: var(--pf-c-title--m-xl--FontWeight);
-  line-height: var(--pf-c-title--m-xl--LineHeight);
+.pf-v5-c-title.pf-m-xl {
+  font-size: var(--pf-v5-c-title--m-xl--FontSize);
+  font-weight: var(--pf-v5-c-title--m-xl--FontWeight);
+  line-height: var(--pf-v5-c-title--m-xl--LineHeight);
 }
-.pf-c-title.pf-m-lg {
-  font-size: var(--pf-c-title--m-lg--FontSize);
-  font-weight: var(--pf-c-title--m-lg--FontWeight);
-  line-height: var(--pf-c-title--m-lg--LineHeight);
+.pf-v5-c-title.pf-m-lg {
+  font-size: var(--pf-v5-c-title--m-lg--FontSize);
+  font-weight: var(--pf-v5-c-title--m-lg--FontWeight);
+  line-height: var(--pf-v5-c-title--m-lg--LineHeight);
 }
-.pf-c-title.pf-m-md {
-  font-size: var(--pf-c-title--m-md--FontSize);
-  font-weight: var(--pf-c-title--m-md--FontWeight);
-  line-height: var(--pf-c-title--m-md--LineHeight);
+.pf-v5-c-title.pf-m-md {
+  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);
 }

package/css/components/Title/title.d.ts

@@ -8,6 +8,6 @@ declare const _default: {
     "lg": "pf-m-lg",
     "md": "pf-m-md"
   },
-  "title": "pf-c-title"
+  "title": "pf-v5-c-title"
 };
 export default _default;

package/css/components/Title/title.js

@@ -10,5 +10,5 @@ exports.default = {
     "lg": "pf-m-lg",
     "md": "pf-m-md"
   },
-  "title": "pf-c-title"
+  "title": "pf-v5-c-title"
 };

package/css/components/Title/title.mjs

@@ -8,5 +8,5 @@ export default {
     "lg": "pf-m-lg",
     "md": "pf-m-md"
   },
-  "title": "pf-c-title"
+  "title": "pf-v5-c-title"
 };