@patternfly/react-styles 6.0.0-alpha.1 → 6.0.0-alpha.11

package/css/components/Tabs/tabs.mjs

@@ -9,7 +9,7 @@ export default {
     "box": "pf-m-box",
     "vertical": "pf-m-vertical",
     "current": "pf-m-current",
-    "colorSchemeLight_300": "pf-m-color-scheme--light-300",
+    "secondary": "pf-m-secondary",
     "expandable": "pf-m-expandable",
     "nonExpandable": "pf-m-non-expandable",
     "expandableOnSm": "pf-m-expandable-on-sm",
@@ -23,11 +23,10 @@ export default {
     "expandableOn_2xl": "pf-m-expandable-on-2xl",
     "nonExpandableOn_2xl": "pf-m-non-expandable-on-2xl",
     "expanded": "pf-m-expanded",
-    "secondary": "pf-m-secondary",
+    "subtab": "pf-m-subtab",
     "pageInsets": "pf-m-page-insets",
     "overflow": "pf-m-overflow",
     "action": "pf-m-action",
-    "active": "pf-m-active",
     "disabled": "pf-m-disabled",
     "ariaDisabled": "pf-m-aria-disabled",
     "insetNone": "pf-m-inset-none",
@@ -72,7 +71,6 @@ export default {
   "tabsItem": "pf-v5-c-tabs__item",
   "tabsItemAction": "pf-v5-c-tabs__item-action",
   "tabsItemActionIcon": "pf-v5-c-tabs__item-action-icon",
-  "tabsItemIcon": "pf-v5-c-tabs__item-icon",
   "tabsItemText": "pf-v5-c-tabs__item-text",
   "tabsLink": "pf-v5-c-tabs__link",
   "tabsLinkToggleIcon": "pf-v5-c-tabs__link-toggle-icon",
@@ -81,6 +79,5 @@ export default {
   "tabsToggle": "pf-v5-c-tabs__toggle",
   "tabsToggleButton": "pf-v5-c-tabs__toggle-button",
   "tabsToggleIcon": "pf-v5-c-tabs__toggle-icon",
-  "tabsToggleText": "pf-v5-c-tabs__toggle-text",
-  "themeDark": "pf-v5-theme-dark"
+  "tabsToggleText": "pf-v5-c-tabs__toggle-text"
 };

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);

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

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

@@ -6,7 +6,13 @@ declare const _default: {
     "2xl": "pf-m-2xl",
     "xl": "pf-m-xl",
     "lg": "pf-m-lg",
-    "md": "pf-m-md"
+    "md": "pf-m-md",
+    "h1": "pf-m-h1",
+    "h2": "pf-m-h2",
+    "h3": "pf-m-h3",
+    "h4": "pf-m-h4",
+    "h5": "pf-m-h5",
+    "h6": "pf-m-h6"
   },
   "title": "pf-v5-c-title"
 };

package/css/components/Title/title.js

@@ -8,7 +8,13 @@ exports.default = {
     "2xl": "pf-m-2xl",
     "xl": "pf-m-xl",
     "lg": "pf-m-lg",
-    "md": "pf-m-md"
+    "md": "pf-m-md",
+    "h1": "pf-m-h1",
+    "h2": "pf-m-h2",
+    "h3": "pf-m-h3",
+    "h4": "pf-m-h4",
+    "h5": "pf-m-h5",
+    "h6": "pf-m-h6"
   },
   "title": "pf-v5-c-title"
 };

package/css/components/Title/title.mjs

@@ -6,7 +6,13 @@ export default {
     "2xl": "pf-m-2xl",
     "xl": "pf-m-xl",
     "lg": "pf-m-lg",
-    "md": "pf-m-md"
+    "md": "pf-m-md",
+    "h1": "pf-m-h1",
+    "h2": "pf-m-h2",
+    "h3": "pf-m-h3",
+    "h4": "pf-m-h4",
+    "h5": "pf-m-h5",
+    "h6": "pf-m-h6"
   },
   "title": "pf-v5-c-title"
 };

package/css/components/ToggleGroup/toggle-group.css

@@ -1,38 +1,43 @@
-.pf-v5-c-toggle-group {
-  --pf-v5-c-toggle-group__button--PaddingTop: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-toggle-group__button--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-toggle-group__button--PaddingBottom: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-toggle-group__button--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-toggle-group__button--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-toggle-group__button--LineHeight: calc(var(--pf-v5-global--FontSize--md) * var(--pf-v5-global--LineHeight--md));
-  --pf-v5-c-toggle-group__button--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+:where(:root),
+:where(.pf-v5-c-toggle-group) {
+  --pf-v5-c-toggle-group__button--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-toggle-group__button--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-toggle-group__button--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-toggle-group__button--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-toggle-group__button--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v5-c-toggle-group__button--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v5-c-toggle-group__button--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v5-c-toggle-group__button--ZIndex: auto;
-  --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-toggle-group__button--hover--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-toggle-group__button--hover--before--BorderColor: var(--pf-v5-global--BorderColor--200);
-  --pf-v5-c-toggle-group__button--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-toggle-group__button--focus--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-toggle-group__button--focus--before--BorderColor: var(--pf-v5-global--BorderColor--200);
-  --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
-  --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-v5-global--disabled-color--100);
-  --pf-v5-c-toggle-group__button--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-v5-global--BorderWidth--sm));
-  --pf-v5-c-toggle-group__item--first-child__button--BorderTopLeftRadius: var(--pf-v5-global--BorderRadius--sm);
-  --pf-v5-c-toggle-group__item--first-child__button--BorderBottomLeftRadius: var(--pf-v5-global--BorderRadius--sm);
-  --pf-v5-c-toggle-group__item--last-child__button--BorderTopRightRadius: var(--pf-v5-global--BorderRadius--sm);
-  --pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-v5-global--BorderRadius--sm);
-  --pf-v5-c-toggle-group__icon--text--MarginLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--palette--blue-50);
-  --pf-v5-c-toggle-group__button--m-selected--Color: initial;
-  --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-v5-global--ZIndex--xs);
+  --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
+  --pf-v5-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v5-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-t--global--border--width--control--default));
+  --pf-v5-c-toggle-group__item--first-child__button--BorderTopLeftRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v5-c-toggle-group__item--first-child__button--BorderBottomLeftRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v5-c-toggle-group__item--last-child__button--BorderTopRightRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v5-c-toggle-group__icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
+  --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
+  --pf-v5-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+  --pf-v5-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
+  --pf-v5-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--Zindex--xs);
   --pf-v5-c-toggle-group--m-compact__button--PaddingTop: 0;
-  --pf-v5-c-toggle-group--m-compact__button--PaddingRight: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-toggle-group--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
   --pf-v5-c-toggle-group--m-compact__button--PaddingBottom: 0;
-  --pf-v5-c-toggle-group--m-compact__button--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-toggle-group--m-compact__button--FontSize: var(--pf-v5-global--FontSize--xs);
+  --pf-v5-c-toggle-group--m-compact__button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
+}
+
+.pf-v5-c-toggle-group {
   display: flex;
 }
 .pf-v5-c-toggle-group.pf-m-compact {
@@ -77,19 +82,19 @@
   inset-inline-end: 0;
   pointer-events: none;
   content: "";
-  border: var(--pf-v5-c-toggle-group__button--before--BorderWidth) solid var(--pf-v5-c-toggle-group__button--before--BorderColor);
+  border-style: solid;
+  border-width: var(--pf-v5-c-toggle-group__button--before--BorderWidth);
+  border-block-start-color: var(--pf-v5-c-toggle-group__button--before--BorderBlockStartColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
+  border-block-end-color: var(--pf-v5-c-toggle-group__button--before--BorderBlockEndColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
+  border-inline-start-color: var(--pf-v5-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
+  border-inline-end-color: var(--pf-v5-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
 }
-.pf-v5-c-toggle-group__button:hover {
+.pf-v5-c-toggle-group__button:hover, .pf-v5-c-toggle-group__button:focus {
   --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--hover--BackgroundColor);
   --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--hover--ZIndex);
   --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--hover--before--BorderColor);
   text-decoration: none;
 }
-.pf-v5-c-toggle-group__button:focus {
-  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--focus--BackgroundColor);
-  --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--focus--ZIndex);
-  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--focus--before--BorderColor);
-}
 .pf-v5-c-toggle-group__button.pf-m-selected {
   --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--m-selected--BackgroundColor);
   --pf-v5-c-toggle-group__button--Color: var(--pf-v5-c-toggle-group__button--m-selected--Color, inherit);
@@ -99,19 +104,20 @@
 .pf-v5-c-toggle-group__button:disabled, .pf-v5-c-toggle-group__button.pf-m-disabled {
   --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--disabled--BackgroundColor);
   --pf-v5-c-toggle-group__button--Color: var(--pf-v5-c-toggle-group__button--disabled--Color);
+  --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--disabled--ZIndex);
+  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--disabled--before--BorderColor);
   pointer-events: none;
 }
 
+.pf-v5-c-toggle-group__item:has(.pf-m-selected) + .pf-v5-c-toggle-group__item:has(.pf-m-selected) {
+  --pf-v5-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v5-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor);
+}
+
+.pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
+  --pf-v5-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v5-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor);
+}
+
 .pf-v5-c-toggle-group__icon + .pf-v5-c-toggle-group__text,
 .pf-v5-c-toggle-group__text + .pf-v5-c-toggle-group__icon {
   margin-inline-start: var(--pf-v5-c-toggle-group__icon--text--MarginLeft);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-toggle-group {
-  --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-v5-global--palette--black-700);
-  --pf-v5-c-toggle-group__button--focus--BackgroundColor: var(--pf-v5-global--palette--black-700);
-  --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-v5-global--palette--black-600);
-  --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-v5-global--palette--black-100);
-  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--primary-color--300);
-  --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-v5-global--primary-color--400);
 }

package/css/components/ToggleGroup/toggle-group.d.ts

@@ -5,7 +5,6 @@ declare const _default: {
     "selected": "pf-m-selected",
     "disabled": "pf-m-disabled"
   },
-  "themeDark": "pf-v5-theme-dark",
   "toggleGroup": "pf-v5-c-toggle-group",
   "toggleGroupButton": "pf-v5-c-toggle-group__button",
   "toggleGroupIcon": "pf-v5-c-toggle-group__icon",

package/css/components/ToggleGroup/toggle-group.js

@@ -7,7 +7,6 @@ exports.default = {
     "selected": "pf-m-selected",
     "disabled": "pf-m-disabled"
   },
-  "themeDark": "pf-v5-theme-dark",
   "toggleGroup": "pf-v5-c-toggle-group",
   "toggleGroupButton": "pf-v5-c-toggle-group__button",
   "toggleGroupIcon": "pf-v5-c-toggle-group__icon",

package/css/components/ToggleGroup/toggle-group.mjs

@@ -5,7 +5,6 @@ export default {
     "selected": "pf-m-selected",
     "disabled": "pf-m-disabled"
   },
-  "themeDark": "pf-v5-theme-dark",
   "toggleGroup": "pf-v5-c-toggle-group",
   "toggleGroupButton": "pf-v5-c-toggle-group__button",
   "toggleGroupIcon": "pf-v5-c-toggle-group__icon",