@patternfly/react-styles 6.0.0-alpha.10 → 6.0.0-alpha.12

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/TextInputGroup/text-input-group.css

@@ -25,8 +25,6 @@
   --pf-v5-c-text-input-group__icon--Left: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-text-input-group__icon--Color: var(--pf-v5-global--icon--Color--dark);
   --pf-v5-c-text-input-group__icon--TranslateY: -50%;
-  --pf-v5-c-text-input-group__utilities--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-text-input-group__utilities--MarginLeft: var(--pf-v5-global--spacer--xs);
   --pf-v5-c-text-input-group__utilities--child--MarginLeft: var(--pf-v5-global--spacer--xs);
   --pf-v5-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--xs);
   --pf-v5-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-v5-global--spacer--xs);
@@ -139,19 +137,7 @@
 .pf-v5-c-text-input-group__utilities > * + * {
   margin-inline-start: var(--pf-v5-c-text-input-group__utilities--child--MarginLeft);
 }
-.pf-v5-c-text-input-group__utilities .pf-v5-c-button {
-  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-text-input-group__utilities--c-button--PaddingRight);
-  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-text-input-group__utilities--c-button--PaddingLeft);
-}
 
 .pf-v5-c-text-input-group__group {
   display: flex;
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-text-input-group {
-  --pf-v5-c-text-input-group--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-  --pf-v5-c-text-input-group--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-text-input-group--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
-  --pf-v5-c-text-input-group__text--before--BorderWidth: 0;
-  --pf-v5-c-text-input-group__text--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
 }

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

@@ -1,6 +1,5 @@
 import './text-input-group.css';
 declare const _default: {
-  "button": "pf-v5-c-button",
   "chipGroupMain": "pf-v5-c-chip-group__main",
   "modifiers": {
     "disabled": "pf-m-disabled",
@@ -14,7 +13,6 @@ declare const _default: {
   "textInputGroupMain": "pf-v5-c-text-input-group__main",
   "textInputGroupText": "pf-v5-c-text-input-group__text",
   "textInputGroupTextInput": "pf-v5-c-text-input-group__text-input",
-  "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities",
-  "themeDark": "pf-v5-theme-dark"
+  "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities"
 };
 export default _default;

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

@@ -2,7 +2,6 @@
 exports.__esModule = true;
 require('./text-input-group.css');
 exports.default = {
-  "button": "pf-v5-c-button",
   "chipGroupMain": "pf-v5-c-chip-group__main",
   "modifiers": {
     "disabled": "pf-m-disabled",
@@ -16,6 +15,5 @@ exports.default = {
   "textInputGroupMain": "pf-v5-c-text-input-group__main",
   "textInputGroupText": "pf-v5-c-text-input-group__text",
   "textInputGroupTextInput": "pf-v5-c-text-input-group__text-input",
-  "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities",
-  "themeDark": "pf-v5-theme-dark"
+  "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities"
 };

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

@@ -1,6 +1,5 @@
 import './text-input-group.css';
 export default {
-  "button": "pf-v5-c-button",
   "chipGroupMain": "pf-v5-c-chip-group__main",
   "modifiers": {
     "disabled": "pf-m-disabled",
@@ -14,6 +13,5 @@ export default {
   "textInputGroupMain": "pf-v5-c-text-input-group__main",
   "textInputGroupText": "pf-v5-c-text-input-group__text",
   "textInputGroupTextInput": "pf-v5-c-text-input-group__text-input",
-  "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities",
-  "themeDark": "pf-v5-theme-dark"
+  "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities"
 };

package/css/components/Tile/tile.css

@@ -11,7 +11,7 @@
   --pf-v5-c-tile--before--BorderRadius: var(--pf-v5-c-tile--BorderRadius);
   --pf-v5-c-tile--after--BackgroundColor: transparent;
   --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--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);

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

@@ -12,8 +12,6 @@
   --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--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--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));
@@ -25,7 +23,13 @@
   --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-t--global--spacer--sm);
   --pf-v5-c-toggle-group--m-compact__button--PaddingBottom: 0;
@@ -78,7 +82,12 @@
   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:focus {
   --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--hover--BackgroundColor);
@@ -95,9 +104,19 @@
 .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);

package/css/components/TreeView/tree-view.css

@@ -1,117 +1,111 @@
-.pf-v5-c-tree-view {
-  --pf-v5-c-tree-view--PaddingTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tree-view--PaddingBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tree-view__node--indent--base: calc(var(--pf-v5-global--spacer--md) * 2 + var(--pf-v5-c-tree-view__node-toggle-icon--MinWidth));
-  --pf-v5-c-tree-view__node--nested-indent--base: calc(var(--pf-v5-c-tree-view__node--indent--base) - var(--pf-v5-global--spacer--md));
-  --pf-v5-c-tree-view__node--PaddingTop--base: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tree-view__node--PaddingTop: var(--pf-v5-c-tree-view__node--PaddingTop--base);
-  --pf-v5-c-tree-view__node--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tree-view__node--PaddingBottom: var(--pf-v5-global--spacer--sm);
+:where(:root),
+:where(.pf-v5-c-tree-view) {
+  --pf-v5-c-tree-view__node--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v5-c-tree-view__node-toggle-icon--MinWidth));
+  --pf-v5-c-tree-view__node--nested-indent--base: calc(var(--pf-v5-c-tree-view__node--indent--base) - var(--pf-t--global--spacer--md));
+  --pf-v5-c-tree-view__content--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v5-c-tree-view__node--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-tree-view__node--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-tree-view__node--PaddingBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-tree-view__node--PaddingLeft: var(--pf-v5-c-tree-view__node--indent--base);
-  --pf-v5-c-tree-view__node--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-tree-view__node--m-current--Color: var(--pf-v5-global--link--Color);
-  --pf-v5-c-tree-view__node--m-current--FontWeight: var(--pf-v5-global--FontWeight--bold);
+  --pf-v5-c-tree-view__node--Color: var(--pf-t--global--text--color--subtle);
   --pf-v5-c-tree-view__node--BackgroundColor: transparent;
+  --pf-v5-c-tree-view__node--m-current--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-tree-view__node--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
+  --pf-v5-c-tree-view__node--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
   --pf-v5-c-tree-view__node-container--Display: contents;
-  --pf-v5-c-tree-view__node-content--RowGap: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-tree-view__node-content--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v5-c-tree-view__node-content--Overflow: visible;
-  --pf-v5-c-tree-view__node--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-tree-view__node--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-v5-c-tree-view__node--PaddingTop--base);
+  --pf-v5-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-v5-c-tree-view__node--PaddingTop);
   --pf-v5-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-v5-c-tree-view__node--PaddingLeft);
   --pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
   --pf-v5-c-tree-view__node-toggle--Position: absolute;
-  --pf-v5-c-tree-view__node-toggle--Color--base: var(--pf-v5-global--Color--200);
+  --pf-v5-c-tree-view__node-toggle--Color--base: var(--pf-t--global--icon--color--subtle);
   --pf-v5-c-tree-view__node-toggle--Color: var(--pf-v5-c-tree-view__node-toggle--Color--base);
-  --pf-v5-c-tree-view__node-toggle--hover--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-tree-view__node-toggle--focus--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-tree-view__node-toggle--active--Color: var(--pf-v5-global--Color--100);
   --pf-v5-c-tree-view__node-toggle--BackgroundColor: transparent;
-  --pf-v5-c-tree-view__list-item--m-expanded__node-toggle--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-tree-view__node-toggle-icon--MinWidth: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-tree-view__node-toggle-icon--Transition: transform var(--pf-v5-global--TransitionDuration) var(--pf-v5-global--TimingFunction);
-  --pf-v5-c-tree-view__node-toggle-button--PaddingTop: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-tree-view__node-toggle-button--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-tree-view__node-toggle-button--PaddingBottom: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-tree-view__node-toggle-button--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-tree-view__node-toggle-button--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
-  --pf-v5-c-tree-view__node-toggle-button--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
-  --pf-v5-c-tree-view__node-check--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tree-view__node-count--MarginLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tree-view__node-count--c-badge--m-read--BackgroundColor: var(--pf-v5-global--disabled-color--200);
-  --pf-v5-c-tree-view__search--PaddingTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tree-view__search--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tree-view__search--PaddingBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tree-view__search--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tree-view__node-icon--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tree-view__node-icon--Color: var(--pf-v5-global--icon--Color--light);
+  --pf-v5-c-tree-view__list-item--m-expanded__node-toggle--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-tree-view__node-toggle-icon--MinWidth: var(--pf-t--global--icon--size--font--body--default);
+  --pf-v5-c-tree-view__node-toggle--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-tree-view__node-toggle--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-tree-view__node-toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-tree-view__node-toggle--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-tree-view__node-toggle--MarginTop: calc(var(--pf-v5-c-tree-view__node-toggle--PaddingTop) * -1);
+  --pf-v5-c-tree-view__node-toggle--MarginBottom: calc(var(--pf-v5-c-tree-view__node-toggle--PaddingTop) * -1);
+  --pf-v5-c-tree-view__node-check--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-tree-view__node-count--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-tree-view__search--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-tree-view__search--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-tree-view__search--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-tree-view__search--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-tree-view__node-icon--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-tree-view__node-icon--Color: var(--pf-t--global--icon--color--subtle);
   --pf-v5-c-tree-view__node-toggle-icon--base--Rotate: 0;
   --pf-v5-c-tree-view__node-toggle-icon--Rotate: var(--pf-v5-c-tree-view__node-toggle-icon--base--Rotate);
   --pf-v5-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;
   --pf-v5-c-tree-view__node-text--max-lines: 1;
-  --pf-v5-c-tree-view__node-title--FontWeight: var(--pf-v5-global--FontWeight--bold);
-  --pf-v5-c-tree-view__action--MarginLeft: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-tree-view__node-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v5-c-tree-view__action--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v5-c-tree-view--m-guides--guide--Left: var(--pf-v5-c-tree-view--m-guides--guide-left--base);
-  --pf-v5-c-tree-view--m-guides--guide-color--base: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-tree-view--m-guides--guide-width--base: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-tree-view--m-guides--guide-color--base: var(--pf-t--global--border--color--default);
+  --pf-v5-c-tree-view--m-guides--guide-width--base: var(--pf-t--global--border--width--divider--default);
   --pf-v5-c-tree-view--m-guides--guide-left--base: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-guides__list-node--guide-width--base));
   --pf-v5-c-tree-view--m-guides--guide-left--base--offset: calc(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--Left) + var(--pf-v5-c-tree-view__node-toggle-icon--MinWidth) / 2);
-  --pf-v5-c-tree-view--m-guides__list-node--guide-width--base: var(--pf-v5-global--spacer--lg);
+  --pf-v5-c-tree-view--m-guides__list-node--guide-width--base: var(--pf-t--global--spacer--lg);
   --pf-v5-c-tree-view--m-guides__list-item--before--Top: 0;
   --pf-v5-c-tree-view--m-guides__list-item--before--Width: var(--pf-v5-c-tree-view--m-guides--guide-width--base);
   --pf-v5-c-tree-view--m-guides__list-item--before--Height: 100%;
   --pf-v5-c-tree-view--m-guides__list-item--before--BackgroundColor: var(--pf-v5-c-tree-view--m-guides--guide-color--base);
   --pf-v5-c-tree-view--m-guides__list-item--last-child--before--Top: var(--pf-v5-c-tree-view--m-guides__node--before--Top);
   --pf-v5-c-tree-view--m-guides__list-item--last-child--before--Height: var(--pf-v5-c-tree-view--m-guides__list-item--last-child--before--Top);
-  --pf-v5-c-tree-view--m-guides__list-item--ZIndex: var(--pf-v5-global--ZIndex--xs);
+  --pf-v5-c-tree-view--m-guides__list-item--ZIndex: var(--pf-t--global--Zindex--xs);
   --pf-v5-c-tree-view--m-guides__node--before--Width: 1rem;
   --pf-v5-c-tree-view--m-guides__node--before--Height: var(--pf-v5-c-tree-view--m-guides--guide-width--base);
   --pf-v5-c-tree-view--m-guides__node--before--Top: 1.125rem;
   --pf-v5-c-tree-view--m-guides__node--before--BackgroundColor: var(--pf-v5-c-tree-view--m-guides--guide-color--base);
-  --pf-v5-c-tree-view--m-compact--base-border--Left--offset: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-tree-view--m-compact--base-border--Left--offset: var(--pf-t--global--spacer--md);
   --pf-v5-c-tree-view--m-compact--base-border--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--base-border--Left--offset));
   --pf-v5-c-tree-view--m-compact__node--indent--base: var(--pf-v5-c-tree-view__node--indent--base);
-  --pf-v5-c-tree-view--m-compact__node--nested-indent--base: var(--pf-v5-global--spacer--lg);
+  --pf-v5-c-tree-view--m-compact__node--nested-indent--base: var(--pf-t--global--spacer--lg);
   --pf-v5-c-tree-view--m-compact--border--Left: var(--pf-v5-c-tree-view--m-compact--base-border--Left);
+  --pf-v5-c-tree-view--m-compact__node--Color: var(--pf-t--global--text--color--regular);
   --pf-v5-c-tree-view--m-compact__node--PaddingTop: 0;
   --pf-v5-c-tree-view--m-compact__node--PaddingBottom: 0;
-  --pf-v5-c-tree-view--m-compact__node--nested--PaddingTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tree-view--m-compact__node--nested--PaddingBottom: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-tree-view--m-compact__node--nested--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-tree-view--m-compact__node--nested--PaddingBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-tree-view--m-compact__list-item__list-item__node-toggle--Top: calc(var(--pf-v5-c-tree-view--m-compact__node-container--PaddingTop));
-  --pf-v5-c-tree-view--m-compact__list-item--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-tree-view--m-compact__list-item--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
+  --pf-v5-c-tree-view--m-compact__list-item--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
+  --pf-v5-c-tree-view--m-compact__list-item--BorderBottomColor: var(--pf-t--global--border--color--default);
   --pf-v5-c-tree-view--m-compact__list-item--before--Top: 0;
   --pf-v5-c-tree-view--m-compact__list-item--last-child--before--Height: var(--pf-v5-c-tree-view--m-compact__node--before--Top);
-  --pf-v5-c-tree-view--m-compact__list-item--nested--before--Top: calc(var(--pf-v5-c-tree-view__node--PaddingTop--base) * -1);
-  --pf-v5-c-tree-view--m-compact__list-item--nested--last-child--before--Height: calc(var(--pf-v5-c-tree-view--m-compact__node--before--Top) + var(--pf-v5-c-tree-view__node--PaddingTop--base));
+  --pf-v5-c-tree-view--m-compact__list-item--nested--before--Top: calc(var(--pf-v5-c-tree-view--m-compact__node--nested--PaddingTop) * -1);
+  --pf-v5-c-tree-view--m-compact__list-item--nested--last-child--before--Height: calc(var(--pf-v5-c-tree-view--m-compact__node--before--Top) + var(--pf-v5-c-tree-view--m-compact__node--nested--PaddingTop));
   --pf-v5-c-tree-view--m-compact__node--PaddingLeft: var(--pf-v5-c-tree-view--m-compact__node--indent--base);
   --pf-v5-c-tree-view--m-compact__node--before--Top: calc(var(--pf-v5-c-tree-view--m-compact__node-container--PaddingTop) + var(--pf-v5-c-tree-view--m-compact__node--nested--PaddingTop) + 0.25rem);
   --pf-v5-c-tree-view--m-compact__node--level-2--PaddingLeft: var(--pf-v5-c-tree-view--m-compact__node--indent--base);
-  --pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginRight: calc(var(--pf-v5-c-tree-view__node-toggle-button--PaddingLeft) * -.5);
-  --pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginLeft: calc(var(--pf-v5-c-tree-view__node-toggle-button--PaddingLeft) * -1.5);
+  --pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginRight: calc(var(--pf-v5-c-tree-view__node-toggle--PaddingLeft) * -.5);
+  --pf-v5-c-tree-view--m-compact__node-toggle--nested--MarginLeft: calc(var(--pf-v5-c-tree-view__node-toggle--PaddingLeft) * -1.5);
   --pf-v5-c-tree-view--m-compact__node-container--Display: flex;
-  --pf-v5-c-tree-view--m-compact__node-container--PaddingBottom--base: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-tree-view--m-compact__node-container--PaddingTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-tree-view--m-compact__node-container--PaddingRight: var(--pf-v5-global--spacer--lg);
+  --pf-v5-c-tree-view--m-compact__node-container--PaddingBottom--base: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-tree-view--m-compact__node-container--PaddingTop: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-tree-view--m-compact__node-container--PaddingRight: var(--pf-t--global--spacer--lg);
   --pf-v5-c-tree-view--m-compact__node-container--PaddingBottom: var(--pf-v5-c-tree-view--m-compact__node-container--PaddingBottom--base);
-  --pf-v5-c-tree-view--m-compact__node-container--PaddingLeft: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
+  --pf-v5-c-tree-view--m-compact__node-container--PaddingLeft: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-tree-view--m-compact__node-container--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-tree-view--m-compact__node-container--nested--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v5-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBottom: 0;
   --pf-v5-c-tree-view--m-no-background__node-container--BackgroundColor: transparent;
-  --pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset: var(--pf-t--global--spacer--sm);
   --pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
   --pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base: var(--pf-v5-c-tree-view__node--indent--base);
-  --pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base: var(--pf-v5-global--spacer--2xl);
+  --pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base: var(--pf-t--global--spacer--2xl);
   --pf-v5-c-tree-view--m-compact--m-no-background__node--nested--PaddingTop: 0;
   --pf-v5-c-tree-view--m-compact--m-no-background__node--nested--PaddingBottom: 0;
   --pf-v5-c-tree-view--m-compact--m-no-background__node--before--Top: calc(var(--pf-v5-c-tree-view--m-compact__node-container--nested--PaddingTop) + var(--pf-v5-c-tree-view--m-compact__node--nested--PaddingTop) + 0.25rem);
-  padding-block-start: var(--pf-v5-c-tree-view--PaddingTop);
-  padding-block-end: var(--pf-v5-c-tree-view--PaddingBottom);
 }
+
 .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item, .pf-v5-c-tree-view.pf-m-guides .pf-v5-c-tree-view__list-item {
   position: relative;
 }
@@ -145,11 +139,11 @@
   --pf-v5-c-tree-view--m-compact__list-item--BorderBottomWidth: 0;
 }
 .pf-v5-c-tree-view.pf-m-compact {
+  --pf-v5-c-tree-view__node--Color: var(--pf-v5-c-tree-view--m-compact__node--Color);
   --pf-v5-c-tree-view__node--PaddingTop: var(--pf-v5-c-tree-view--m-compact__node--PaddingTop);
   --pf-v5-c-tree-view__node--PaddingBottom: var(--pf-v5-c-tree-view--m-compact__node--PaddingBottom);
   --pf-v5-c-tree-view__node-container--Display: var(--pf-v5-c-tree-view--m-compact__node-container--Display);
   --pf-v5-c-tree-view__node--hover--BackgroundColor: transparent;
-  --pf-v5-c-tree-view__node--focus--BackgroundColor: transparent;
   --pf-v5-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-v5-c-tree-view--m-compact__list-item__list-item__node-toggle--Top);
 }
 .pf-v5-c-tree-view.pf-m-compact .pf-v5-c-tree-view__list-item {
@@ -226,7 +220,6 @@
   display: inline-block;
   min-width: var(--pf-v5-c-tree-view__node-toggle-icon--MinWidth);
   text-align: center;
-  transition: var(--pf-v5-c-tree-view__node-toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-tree-view__node-toggle-icon--Rotate));
 }
 :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle-icon {
@@ -264,30 +257,15 @@
 }
 .pf-v5-c-tree-view__node.pf-m-current {
   --pf-v5-c-tree-view__node--Color: var(--pf-v5-c-tree-view__node--m-current--Color);
-  font-weight: var(--pf-v5-c-tree-view__node--m-current--FontWeight);
-}
-.pf-v5-c-tree-view__node:focus {
-  --pf-v5-c-tree-view__node--BackgroundColor: var(--pf-v5-c-tree-view__node--focus--BackgroundColor);
 }
 .pf-v5-c-tree-view__node .pf-v5-c-tree-view__node-count {
   margin-inline-start: var(--pf-v5-c-tree-view__node-count--MarginLeft);
 }
-.pf-v5-c-tree-view__node .pf-v5-c-tree-view__node-count .pf-v5-c-badge.pf-m-read {
-  --pf-v5-c-badge--m-read--BackgroundColor: var(--pf-v5-c-tree-view__node-count--c-badge--m-read--BackgroundColor);
-}
-.pf-v5-c-tree-view__node:not(.pf-m-selectable):hover, .pf-v5-c-tree-view__node.pf-m-selectable .pf-v5-c-tree-view__node-toggle:hover {
-  --pf-v5-c-tree-view__node-toggle--Color: var(--pf-v5-c-tree-view__node-toggle--hover--Color);
-}
-.pf-v5-c-tree-view__node:not(.pf-m-selectable):focus, .pf-v5-c-tree-view__node.pf-m-selectable .pf-v5-c-tree-view__node-toggle:focus {
-  --pf-v5-c-tree-view__node-toggle--Color: var(--pf-v5-c-tree-view__node-toggle--focus--Color);
-}
-.pf-v5-c-tree-view__node:not(.pf-m-selectable):active, .pf-v5-c-tree-view__node.pf-m-selectable .pf-v5-c-tree-view__node-toggle:active {
-  --pf-v5-c-tree-view__node-toggle--Color: var(--pf-v5-c-tree-view__node-toggle--active--Color);
-}
 
 .pf-v5-c-tree-view__node-container {
   display: var(--pf-v5-c-tree-view__node-container--Display);
   flex-grow: 1;
+  border-radius: var(--pf-v5-c-tree-view--m-compact__node-container--BorderRadius);
 }
 
 .pf-v5-c-tree-view__node-content {
@@ -310,12 +288,12 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding-block-start: var(--pf-v5-c-tree-view__node-toggle-button--PaddingTop);
-  padding-block-end: var(--pf-v5-c-tree-view__node-toggle-button--PaddingBottom);
-  padding-inline-start: var(--pf-v5-c-tree-view__node-toggle-button--PaddingLeft);
-  padding-inline-end: var(--pf-v5-c-tree-view__node-toggle-button--PaddingRight);
-  margin-block-start: var(--pf-v5-c-tree-view__node-toggle-button--MarginTop);
-  margin-block-end: var(--pf-v5-c-tree-view__node-toggle-button--MarginBottom);
+  padding-block-start: var(--pf-v5-c-tree-view__node-toggle--PaddingTop);
+  padding-block-end: var(--pf-v5-c-tree-view__node-toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-tree-view__node-toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-tree-view__node-toggle--PaddingRight);
+  margin-block-start: var(--pf-v5-c-tree-view__node-toggle--MarginTop);
+  margin-block-end: var(--pf-v5-c-tree-view__node-toggle--MarginBottom);
   color: var(--pf-v5-c-tree-view__node-toggle--Color);
   background-color: var(--pf-v5-c-tree-view__node-toggle--BackgroundColor);
   border: 0;
@@ -370,6 +348,8 @@ label.pf-v5-c-tree-view__node-text {
 .pf-v5-c-tree-view__content {
   display: flex;
   align-items: center;
+  background-color: var(--pf-v5-c-tree-view__content--BackgroundColor);
+  border-radius: var(--pf-v5-c-tree-view__content--BorderRadius);
 }
 
 .pf-v5-c-tree-view__content:hover,
@@ -378,7 +358,11 @@ label.pf-v5-c-tree-view__node-text {
 }
 
 .pf-v5-c-tree-view__action {
-  margin-inline-start: var(--pf-v5-c-tree-view__action--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-tree-view__action--MarginInlineEnd);
+}
+
+.pf-v5-c-tree-view__content:has(> .pf-v5-c-tree-view__node.pf-m-current) {
+  --pf-v5-c-tree-view__content--BackgroundColor: var(--pf-v5-c-tree-view__node--m-current--BackgroundColor);
 }
 
 .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item {
@@ -466,9 +450,4 @@ label.pf-v5-c-tree-view__node-text {
   --pf-v5-c-tree-view--m-compact--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--base-border--Left--offset));
   --pf-v5-c-tree-view--m-compact--m-no-background__node--PaddingLeft: calc(var(--pf-v5-c-tree-view--m-compact--m-no-background__node--nested-indent--base) * 9 + var(--pf-v5-c-tree-view--m-compact--m-no-background__node--indent--base));
   --pf-v5-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-tree-view {
-  --pf-v5-c-tree-view__node--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-  --pf-v5-c-tree-view__node--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }

package/css/components/TreeView/tree-view.d.ts

@@ -1,6 +1,5 @@
 import './tree-view.css';
 declare const _default: {
-  "badge": "pf-v5-c-badge",
   "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "compact": "pf-m-compact",
@@ -8,11 +7,8 @@ declare const _default: {
     "expanded": "pf-m-expanded",
     "noBackground": "pf-m-no-background",
     "current": "pf-m-current",
-    "read": "pf-m-read",
-    "selectable": "pf-m-selectable",
     "truncate": "pf-m-truncate"
   },
-  "themeDark": "pf-v5-theme-dark",
   "treeView": "pf-v5-c-tree-view",
   "treeViewAction": "pf-v5-c-tree-view__action",
   "treeViewContent": "pf-v5-c-tree-view__content",

package/css/components/TreeView/tree-view.js

@@ -2,7 +2,6 @@
 exports.__esModule = true;
 require('./tree-view.css');
 exports.default = {
-  "badge": "pf-v5-c-badge",
   "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "compact": "pf-m-compact",
@@ -10,11 +9,8 @@ exports.default = {
     "expanded": "pf-m-expanded",
     "noBackground": "pf-m-no-background",
     "current": "pf-m-current",
-    "read": "pf-m-read",
-    "selectable": "pf-m-selectable",
     "truncate": "pf-m-truncate"
   },
-  "themeDark": "pf-v5-theme-dark",
   "treeView": "pf-v5-c-tree-view",
   "treeViewAction": "pf-v5-c-tree-view__action",
   "treeViewContent": "pf-v5-c-tree-view__content",

package/css/components/TreeView/tree-view.mjs

@@ -1,6 +1,5 @@
 import './tree-view.css';
 export default {
-  "badge": "pf-v5-c-badge",
   "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "compact": "pf-m-compact",
@@ -8,11 +7,8 @@ export default {
     "expanded": "pf-m-expanded",
     "noBackground": "pf-m-no-background",
     "current": "pf-m-current",
-    "read": "pf-m-read",
-    "selectable": "pf-m-selectable",
     "truncate": "pf-m-truncate"
   },
-  "themeDark": "pf-v5-theme-dark",
   "treeView": "pf-v5-c-tree-view",
   "treeViewAction": "pf-v5-c-tree-view__action",
   "treeViewContent": "pf-v5-c-tree-view__content",