@patternfly/react-styles 6.0.0-alpha.6 → 6.0.0-alpha.8

package/css/components/Nav/nav.d.ts

@@ -1,40 +1,29 @@
 import './nav.css';
 declare const _default: {
+  "buttonIcon": "pf-v5-c-button__icon",
   "dirRtl": "pf-v5-m-dir-rtl",
-  "divider": "pf-v5-c-divider",
-  "menu": "pf-v5-c-menu",
-  "menuContent": "pf-v5-c-menu__content",
-  "menuItem": "pf-v5-c-menu__item",
-  "menuItemToggleIcon": "pf-v5-c-menu__item-toggle-icon",
-  "menuListItem": "pf-v5-c-menu__list-item",
   "modifiers": {
-    "flyout": "pf-m-flyout",
-    "top": "pf-m-top",
-    "left": "pf-m-left",
-    "current": "pf-m-current",
-    "drillUp": "pf-m-drill-up",
-    "horizontal": "pf-m-horizontal",
-    "tertiary": "pf-m-tertiary",
-    "horizontalSubnav": "pf-m-horizontal-subnav",
-    "light": "pf-m-light",
     "scrollable": "pf-m-scrollable",
     "overflowHidden": "pf-m-overflow-hidden",
-    "expandable": "pf-m-expandable",
+    "fullWidth": "pf-m-full-width",
+    "fill": "pf-m-fill",
     "expanded": "pf-m-expanded",
-    "drilldown": "pf-m-drilldown",
     "hover": "pf-m-hover",
-    "start": "pf-m-start"
+    "current": "pf-m-current",
+    "flyout": "pf-m-flyout",
+    "horizontal": "pf-m-horizontal",
+    "subnav": "pf-m-subnav"
   },
   "nav": "pf-v5-c-nav",
   "navItem": "pf-v5-c-nav__item",
   "navLink": "pf-v5-c-nav__link",
   "navList": "pf-v5-c-nav__list",
+  "navNav": "pf-v5-c-nav__nav",
   "navScrollButton": "pf-v5-c-nav__scroll-button",
   "navSection": "pf-v5-c-nav__section",
   "navSectionTitle": "pf-v5-c-nav__section-title",
   "navSubnav": "pf-v5-c-nav__subnav",
   "navToggle": "pf-v5-c-nav__toggle",
-  "navToggleIcon": "pf-v5-c-nav__toggle-icon",
-  "themeDark": "pf-v5-theme-dark"
+  "navToggleIcon": "pf-v5-c-nav__toggle-icon"
 };
 export default _default;

package/css/components/Nav/nav.js

@@ -2,40 +2,29 @@
 exports.__esModule = true;
 require('./nav.css');
 exports.default = {
+  "buttonIcon": "pf-v5-c-button__icon",
   "dirRtl": "pf-v5-m-dir-rtl",
-  "divider": "pf-v5-c-divider",
-  "menu": "pf-v5-c-menu",
-  "menuContent": "pf-v5-c-menu__content",
-  "menuItem": "pf-v5-c-menu__item",
-  "menuItemToggleIcon": "pf-v5-c-menu__item-toggle-icon",
-  "menuListItem": "pf-v5-c-menu__list-item",
   "modifiers": {
-    "flyout": "pf-m-flyout",
-    "top": "pf-m-top",
-    "left": "pf-m-left",
-    "current": "pf-m-current",
-    "drillUp": "pf-m-drill-up",
-    "horizontal": "pf-m-horizontal",
-    "tertiary": "pf-m-tertiary",
-    "horizontalSubnav": "pf-m-horizontal-subnav",
-    "light": "pf-m-light",
     "scrollable": "pf-m-scrollable",
     "overflowHidden": "pf-m-overflow-hidden",
-    "expandable": "pf-m-expandable",
+    "fullWidth": "pf-m-full-width",
+    "fill": "pf-m-fill",
     "expanded": "pf-m-expanded",
-    "drilldown": "pf-m-drilldown",
     "hover": "pf-m-hover",
-    "start": "pf-m-start"
+    "current": "pf-m-current",
+    "flyout": "pf-m-flyout",
+    "horizontal": "pf-m-horizontal",
+    "subnav": "pf-m-subnav"
   },
   "nav": "pf-v5-c-nav",
   "navItem": "pf-v5-c-nav__item",
   "navLink": "pf-v5-c-nav__link",
   "navList": "pf-v5-c-nav__list",
+  "navNav": "pf-v5-c-nav__nav",
   "navScrollButton": "pf-v5-c-nav__scroll-button",
   "navSection": "pf-v5-c-nav__section",
   "navSectionTitle": "pf-v5-c-nav__section-title",
   "navSubnav": "pf-v5-c-nav__subnav",
   "navToggle": "pf-v5-c-nav__toggle",
-  "navToggleIcon": "pf-v5-c-nav__toggle-icon",
-  "themeDark": "pf-v5-theme-dark"
+  "navToggleIcon": "pf-v5-c-nav__toggle-icon"
 };

package/css/components/Nav/nav.mjs

@@ -1,39 +1,28 @@
 import './nav.css';
 export default {
+  "buttonIcon": "pf-v5-c-button__icon",
   "dirRtl": "pf-v5-m-dir-rtl",
-  "divider": "pf-v5-c-divider",
-  "menu": "pf-v5-c-menu",
-  "menuContent": "pf-v5-c-menu__content",
-  "menuItem": "pf-v5-c-menu__item",
-  "menuItemToggleIcon": "pf-v5-c-menu__item-toggle-icon",
-  "menuListItem": "pf-v5-c-menu__list-item",
   "modifiers": {
-    "flyout": "pf-m-flyout",
-    "top": "pf-m-top",
-    "left": "pf-m-left",
-    "current": "pf-m-current",
-    "drillUp": "pf-m-drill-up",
-    "horizontal": "pf-m-horizontal",
-    "tertiary": "pf-m-tertiary",
-    "horizontalSubnav": "pf-m-horizontal-subnav",
-    "light": "pf-m-light",
     "scrollable": "pf-m-scrollable",
     "overflowHidden": "pf-m-overflow-hidden",
-    "expandable": "pf-m-expandable",
+    "fullWidth": "pf-m-full-width",
+    "fill": "pf-m-fill",
     "expanded": "pf-m-expanded",
-    "drilldown": "pf-m-drilldown",
     "hover": "pf-m-hover",
-    "start": "pf-m-start"
+    "current": "pf-m-current",
+    "flyout": "pf-m-flyout",
+    "horizontal": "pf-m-horizontal",
+    "subnav": "pf-m-subnav"
   },
   "nav": "pf-v5-c-nav",
   "navItem": "pf-v5-c-nav__item",
   "navLink": "pf-v5-c-nav__link",
   "navList": "pf-v5-c-nav__list",
+  "navNav": "pf-v5-c-nav__nav",
   "navScrollButton": "pf-v5-c-nav__scroll-button",
   "navSection": "pf-v5-c-nav__section",
   "navSectionTitle": "pf-v5-c-nav__section-title",
   "navSubnav": "pf-v5-c-nav__subnav",
   "navToggle": "pf-v5-c-nav__toggle",
-  "navToggleIcon": "pf-v5-c-nav__toggle-icon",
-  "themeDark": "pf-v5-theme-dark"
+  "navToggleIcon": "pf-v5-c-nav__toggle-icon"
 };

package/css/components/NumberInput/number-input.css

@@ -6,12 +6,12 @@
   appearance: none;
 }
 
+:root,
 .pf-v5-c-number-input {
-  --pf-v5-c-number-input__unit--c-input-group--MarginLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-number-input__icon--FontSize: var(--pf-v5-global--FontSize--xs);
-  --pf-v5-c-number-input--c-form-control--width-base: calc(var(--pf-v5-global--spacer--sm) * 2 + var(--pf-v5-global--BorderWidth--sm) * 2);
-  --pf-v5-c-number-input--c-form-control--width-icon: 0px;
-  --pf-v5-c-number-input--m-status--c-form-control--width-icon: var(--pf-v5-global--spacer--xl);
+  --pf-v5-c-number-input__unit--c-input-group--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-number-input__icon--FontSize: var(--pf-t--global--font--size--xs);
+  --pf-v5-c-number-input--c-form-control--width-base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-t--global--border--width--box--default) * 2);
+  --pf-v5-c-number-input--c-form-control--width-icon: var(--pf-t--global--spacer--xl);
   --pf-v5-c-number-input--c-form-control--width-chars: 4;
   --pf-v5-c-number-input--c-form-control--Width:
     calc(
@@ -19,12 +19,12 @@
         var(--pf-v5-c-number-input--c-form-control--width-base) + var(--pf-v5-c-number-input--c-form-control--width-chars) * 1ch
       ) + var(--pf-v5-c-number-input--c-form-control--width-icon)
     );
+}
+
+.pf-v5-c-number-input {
   display: inline-flex;
   align-items: center;
 }
-.pf-v5-c-number-input.pf-m-status {
-  --pf-v5-c-number-input--c-form-control--width-icon: var(--pf-v5-c-number-input--m-status--c-form-control--width-icon);
-}
 .pf-v5-c-number-input .pf-v5-c-form-control {
   width: var(--pf-v5-c-number-input--c-form-control--Width);
 }

package/css/components/NumberInput/number-input.d.ts

@@ -2,9 +2,6 @@ import './number-input.css';
 declare const _default: {
   "formControl": "pf-v5-c-form-control",
   "inputGroup": "pf-v5-c-input-group",
-  "modifiers": {
-    "status": "pf-m-status"
-  },
   "numberInput": "pf-v5-c-number-input",
   "numberInputIcon": "pf-v5-c-number-input__icon",
   "numberInputUnit": "pf-v5-c-number-input__unit"

package/css/components/NumberInput/number-input.js

@@ -4,9 +4,6 @@ require('./number-input.css');
 exports.default = {
   "formControl": "pf-v5-c-form-control",
   "inputGroup": "pf-v5-c-input-group",
-  "modifiers": {
-    "status": "pf-m-status"
-  },
   "numberInput": "pf-v5-c-number-input",
   "numberInputIcon": "pf-v5-c-number-input__icon",
   "numberInputUnit": "pf-v5-c-number-input__unit"

package/css/components/NumberInput/number-input.mjs

@@ -2,9 +2,6 @@ import './number-input.css';
 export default {
   "formControl": "pf-v5-c-form-control",
   "inputGroup": "pf-v5-c-input-group",
-  "modifiers": {
-    "status": "pf-m-status"
-  },
   "numberInput": "pf-v5-c-number-input",
   "numberInputIcon": "pf-v5-c-number-input__icon",
   "numberInputUnit": "pf-v5-c-number-input__unit"

package/css/components/Sidebar/sidebar.css

@@ -1,9 +1,9 @@
-.pf-v5-c-sidebar {
-  --pf-v5-c-sidebar--inset: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-sidebar--xl--inset: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-sidebar--BorderWidth--base: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-sidebar--BorderColor--base: var(--pf-v5-global--BorderColor--100);
+:root,
+:where(.pf-v5-c-sidebar) {
+  --pf-v5-c-sidebar--inset: var(--pf-t--global--spacer--md);
+  --pf-v5-c-sidebar--xl--inset: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-sidebar--BorderWidth--base: var(--pf-t--global--border--width--regular);
+  --pf-v5-c-sidebar--BorderColor--base: var(--pf-t--global--border--color--default);
   --pf-v5-c-sidebar__panel--PaddingTop: 0;
   --pf-v5-c-sidebar__panel--PaddingRight: 0;
   --pf-v5-c-sidebar__panel--PaddingBottom: 0;
@@ -59,11 +59,16 @@
   --pf-v5-c-sidebar__panel--md--FlexBasis: 15.625rem;
   --pf-v5-c-sidebar__panel--m-split--FlexBasis: 15.625rem;
   --pf-v5-c-sidebar__panel--m-stack--FlexBasis: auto;
-  --pf-v5-c-sidebar__panel--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-sidebar__panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-sidebar__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-sidebar__panel--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v5-c-sidebar__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-sidebar__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-sidebar__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-sidebar__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v5-c-sidebar__panel--m-sticky--Top: 0;
   --pf-v5-c-sidebar__panel--m-sticky--Position: sticky;
+}
+
+.pf-v5-c-sidebar {
   height: 100%;
 }
 @media (min-width: 768px) {
@@ -157,6 +162,9 @@
   --pf-v5-c-sidebar__panel--Position: static;
   --pf-v5-c-sidebar__panel--Top: auto;
 }
+.pf-v5-c-sidebar__panel.pf-m-secondary {
+  --pf-v5-c-sidebar__panel--BackgroundColor: var(--pf-v5-c-sidebar__panel--m-secondary--BackgroundColor);
+}
 
 .pf-v5-c-sidebar__content {
   flex-grow: 1;
@@ -176,6 +184,9 @@
 .pf-v5-c-sidebar__content.pf-m-no-background {
   --pf-v5-c-sidebar__content--BackgroundColor: transparent;
 }
+.pf-v5-c-sidebar__content.pf-m-secondary {
+  --pf-v5-c-sidebar__content--BackgroundColor: var(--pf-v5-c-sidebar__content--m-secondary--BackgroundColor);
+}
 .pf-v5-c-sidebar__content + .pf-v5-c-sidebar__panel {
   --pf-v5-c-sidebar__panel--Order: 1;
 }

package/css/components/Sidebar/sidebar.d.ts

@@ -9,6 +9,7 @@ declare const _default: {
     "padding": "pf-m-padding",
     "sticky": "pf-m-sticky",
     "static": "pf-m-static",
+    "secondary": "pf-m-secondary",
     "noBackground": "pf-m-no-background",
     "widthDefault": "pf-m-width-default",
     "width_25": "pf-m-width-25",

package/css/components/Sidebar/sidebar.js

@@ -11,6 +11,7 @@ exports.default = {
     "padding": "pf-m-padding",
     "sticky": "pf-m-sticky",
     "static": "pf-m-static",
+    "secondary": "pf-m-secondary",
     "noBackground": "pf-m-no-background",
     "widthDefault": "pf-m-width-default",
     "width_25": "pf-m-width-25",

package/css/components/Sidebar/sidebar.mjs

@@ -9,6 +9,7 @@ export default {
     "padding": "pf-m-padding",
     "sticky": "pf-m-sticky",
     "static": "pf-m-static",
+    "secondary": "pf-m-secondary",
     "noBackground": "pf-m-no-background",
     "widthDefault": "pf-m-width-default",
     "width_25": "pf-m-width-25",

package/css/components/SimpleList/simple-list.css

@@ -7,7 +7,7 @@
   --pf-v5-c-simple-list__item-link--Color: var(--pf-t--global--text--color--subtle);
   --pf-v5-c-simple-list__item-link--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-t--global--text--color--regular);
-  --pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--selected);
+  --pf-v5-c-simple-list__item-link--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--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);

package/css/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--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/css/components/Tile/tile.d.ts

@@ -6,7 +6,6 @@ declare const _default: {
     "displayLg": "pf-m-display-lg",
     "stacked": "pf-m-stacked"
   },
-  "themeDark": "pf-v5-theme-dark",
   "tile": "pf-v5-c-tile",
   "tileBody": "pf-v5-c-tile__body",
   "tileHeader": "pf-v5-c-tile__header",

package/css/components/Tile/tile.js

@@ -8,7 +8,6 @@ exports.default = {
     "displayLg": "pf-m-display-lg",
     "stacked": "pf-m-stacked"
   },
-  "themeDark": "pf-v5-theme-dark",
   "tile": "pf-v5-c-tile",
   "tileBody": "pf-v5-c-tile__body",
   "tileHeader": "pf-v5-c-tile__header",

package/css/components/Tile/tile.mjs

@@ -6,7 +6,6 @@ export default {
     "displayLg": "pf-m-display-lg",
     "stacked": "pf-m-stacked"
   },
-  "themeDark": "pf-v5-theme-dark",
   "tile": "pf-v5-c-tile",
   "tileBody": "pf-v5-c-tile__body",
   "tileHeader": "pf-v5-c-tile__header",

package/css/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);