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

package/components/TabContent/tab-content.css

@@ -1,17 +1,23 @@
+:root,
 .pf-v5-c-tab-content {
   --pf-v5-c-tab-content__body--PaddingTop: 0;
   --pf-v5-c-tab-content__body--PaddingRight: 0;
   --pf-v5-c-tab-content__body--PaddingBottom: 0;
   --pf-v5-c-tab-content__body--PaddingLeft: 0;
-  --pf-v5-c-tab-content__body--m-padding--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-tab-content__body--m-padding--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-tab-content__body--m-padding--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-tab-content--m-light-300: var(--pf-v5-global--BackgroundColor--light-300);
+  --pf-v5-c-tab-content--BackgroundColor: transparent;
+  --pf-v5-c-tab-content__body--m-padding--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-tab-content__body--m-padding--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-tab-content__body--m-padding--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-tab-content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+}
+
+.pf-v5-c-tab-content {
+  background-color: var(--pf-v5-c-tab-content--BackgroundColor);
 }
 @media screen and (min-width: 1200px) {
   .pf-v5-c-tab-content {
@@ -21,8 +27,8 @@
     --pf-v5-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v5-c-tab-content__body--m-padding--xl--PaddingLeft);
   }
 }
-.pf-v5-c-tab-content.pf-m-light-300 {
-  background-color: var(--pf-v5-c-tab-content--m-light-300);
+.pf-v5-c-tab-content.pf-m-secondary {
+  --pf-v5-c-tab-content--BackgroundColor: var(--pf-v5-c-tab-content--m-secondary--BackgroundColor);
 }
 
 .pf-v5-c-tab-content__body {

package/components/TabContent/tab-content.scss

@@ -1,25 +1,30 @@
 // @debug $tab-content; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-
+:root,
 .#{$tab-content} {
   --#{$tab-content}__body--PaddingTop: 0;
   --#{$tab-content}__body--PaddingRight: 0;
   --#{$tab-content}__body--PaddingBottom: 0;
   --#{$tab-content}__body--PaddingLeft: 0;
+  --#{$tab-content}--BackgroundColor: transparent;
 
   // Padding
-  --#{$tab-content}__body--m-padding--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$tab-content}__body--m-padding--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$tab-content}__body--m-padding--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$tab-content}__body--m-padding--PaddingLeft: var(--#{$pf-global}--spacer--md);
+  --#{$tab-content}__body--m-padding--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$tab-content}__body--m-padding--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$tab-content}__body--m-padding--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$tab-content}__body--m-padding--PaddingLeft: var(--pf-t--global--spacer--md);
 
   // Match page padding
-  --#{$tab-content}__body--m-padding--xl--PaddingTop: var(--#{$pf-global}--spacer--lg);
-  --#{$tab-content}__body--m-padding--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$tab-content}__body--m-padding--xl--PaddingBottom: var(--#{$pf-global}--spacer--lg);
-  --#{$tab-content}__body--m-padding--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
+  --#{$tab-content}__body--m-padding--xl--PaddingTop: var(--pf-t--global--spacer--lg);
+  --#{$tab-content}__body--m-padding--xl--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$tab-content}__body--m-padding--xl--PaddingBottom: var(--pf-t--global--spacer--lg);
+  --#{$tab-content}__body--m-padding--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
 
-  // Light
-  --#{$tab-content}--m-light-300: var(--#{$pf-global}--BackgroundColor--light-300);
+  // Secondary modifier
+  --#{$tab-content}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+}
+
+.#{$tab-content} {
+  background-color: var(--#{$tab-content}--BackgroundColor);
 
   @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
     --#{$tab-content}__body--m-padding--PaddingTop: var(--#{$tab-content}__body--m-padding--xl--PaddingTop);
@@ -28,9 +33,8 @@
     --#{$tab-content}__body--m-padding--PaddingLeft: var(--#{$tab-content}__body--m-padding--xl--PaddingLeft);
   }
 
-
-  &.pf-m-light-300 {
-    background-color: var(--#{$tab-content}--m-light-300);
+  &.pf-m-secondary {
+    --#{$tab-content}--BackgroundColor: var(--#{$tab-content}--m-secondary--BackgroundColor);
   }
 }
 

package/components/Table/table-grid.css

@@ -1,27 +1,25 @@
 .pf-v5-c-table[class*=pf-m-grid] {
   --pf-v5-c-table--responsive--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v5-c-table__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
-  --pf-v5-c-table__tbody--after--border-width--base: var(--pf-v5-global--BorderWidth--lg);
+  --pf-v5-c-table__tbody--after--border-width--base: var(--pf-t--global--border--width--extra-strong);
   --pf-v5-c-table__tbody--after--BorderLeftWidth: 0;
   --pf-v5-c-table__tbody--after--BorderColor: var(--pf-t--global--border--color--active);
   --pf-v5-c-table__tr--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
-  --pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-table__tr--responsive--GridColumnGap: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-table__tr--responsive--MarginTop: var(--pf-t--global--border--width--divider--default);
-  --pf-v5-c-table__tr--responsive--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-table__tr--responsive--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-table__tr--responsive--xl--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-table__tr--responsive--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-table__tr--responsive--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-table__tr--responsive--xl--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-table__tr--responsive--nested-table--PaddingTop: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-table__tr--responsive--nested-table--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-table__tr--responsive--nested-table--PaddingBottom: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-table__tr--responsive--nested-table--PaddingLeft: var(--pf-v5-global--spacer--lg);
+  --pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth: var(--pf-v5-c-table__tbody--responsive--border-width--base);
+  --pf-v5-c-table__tr--responsive--GridColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-table__tr--responsive--MarginTop: var(--pf-v5-c-table__tbody--responsive--border-width--base);
+  --pf-v5-c-table__tr--responsive--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-table__tr--responsive--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-table__tr--responsive--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-table__tr--responsive--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-table__tr--responsive--nested-table--PaddingTop: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-table__tr--responsive--nested-table--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-table__tr--responsive--nested-table--PaddingBottom: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-table__tr--responsive--nested-table--PaddingLeft: var(--pf-t--global--spacer--lg);
   --pf-v5-c-table__tbody--after__tr--BorderLeftWidth: 0;
   --pf-v5-c-table__tbody--after__tr--BorderLeftColor: transparent;
   --pf-v5-c-table__tbody--m-expanded--after__tr--BorderLeftWidth: var(--pf-v5-c-table__expandable-row--after--border-width--base);
-  --pf-v5-c-table__tbody--m-expanded--after__tr--BorderLeftColor: var(--pf-v5-global--active-color--400);
+  --pf-v5-c-table__tbody--m-expanded--after__tr--BorderLeftColor: var(--pf-t--global--border--color--active);
   --pf-v5-c-table__tbody--m-selected--after__tr--BorderLeftWidth: var(--pf-v5-c-table__expandable-row--after--border-width--base);
   --pf-v5-c-table__tbody--m-selected--after__tr--BorderLeftColor: var(--pf-t--global--border--color--active);
   --pf-v5-c-table--m-grid--cell--hidden-visible--Display: grid;
@@ -29,48 +27,34 @@
   --pf-v5-c-table--m-grid--cell--PaddingRight: 0;
   --pf-v5-c-table--m-grid--cell--PaddingBottom: 0;
   --pf-v5-c-table--m-grid--cell--PaddingLeft: 0;
-  --pf-v5-c-table-td--responsive--GridColumnGap: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-table--cell--responsive--PaddingBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-table--cell--first-child--responsive--PaddingTop: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-table-td--responsive--GridColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-table--cell--responsive--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-table--cell--responsive--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-table--cell--first-child--responsive--PaddingTop: var(--pf-t--global--spacer--sm);
   --pf-v5-c-table--cell--responsive--PaddingRight: 0;
   --pf-v5-c-table--cell--responsive--PaddingLeft: 0;
-  --pf-v5-c-table--m-compact__tr--responsive--PaddingTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-table--m-compact__tr--responsive--PaddingBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-table--m-compact__tr__td--responsive--PaddingTop: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-table--m-compact__tr__td--responsive--PaddingBottom: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-table--m-compact__tr--responsive--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-table--m-compact__tr--responsive--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-table--m-compact__tr__td--responsive--PaddingTop: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-table--m-compact__tr__td--responsive--PaddingBottom: var(--pf-t--global--spacer--xs);
   --pf-v5-c-table--m-compact__check--responsive--MarginTop: 0.4375rem;
-  --pf-v5-c-table--m-compact__action--responsive--MarginTop: calc(var(--pf-v5-global--spacer--xs) * -1);
-  --pf-v5-c-table--m-compact__action--responsive--MarginBottom: calc(var(--pf-v5-global--spacer--xs) * -1);
+  --pf-v5-c-table--m-compact__action--responsive--MarginTop: calc(var(--pf-t--global--spacer--xs) * -1);
+  --pf-v5-c-table--m-compact__action--responsive--MarginBottom: calc(var(--pf-t--global--spacer--xs) * -1);
   --pf-v5-c-table--m-compact__toggle--c-button--responsive--MarginBottom: calc(0.375rem * -1);
-  --pf-v5-c-table__expandable-row-content--responsive--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-table__expandable-row-content--responsive--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-table__expandable-row-content--responsive--xl--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-table__expandable-row-content--responsive--xl--PaddingLeft: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-table__expandable-row-content--responsive--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-table__expandable-row-content--responsive--PaddingLeft: var(--pf-t--global--spacer--lg);
   --pf-v5-c-table__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v5-c-table__check--responsive--MarginLeft: var(--pf-t--global--border--width--divider--default);
+  --pf-v5-c-table__check--responsive--MarginLeft: var(--pf-v5-c-table__tbody--responsive--border-width--base);
   --pf-v5-c-table__check--responsive--MarginTop: 0.875rem;
   --pf-v5-c-table--m-grid__favorite--MarginTop: 0.5rem;
-  --pf-v5-c-table--m-grid__check--favorite--MarginLeft: var(--pf-v5-global--spacer--xl);
+  --pf-v5-c-table--m-grid__check--favorite--MarginLeft: var(--pf-t--global--spacer--xl);
   --pf-v5-c-table--m-grid__action--MarginTop: 0.375rem;
-  --pf-v5-c-table__action--responsive--MarginLeft: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-table--m-grid__favorite--action--MarginLeft: var(--pf-v5-global--spacer--2xl);
+  --pf-v5-c-table__action--responsive--MarginLeft: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-table--m-grid__favorite--action--MarginLeft: var(--pf-t--global--spacer--2xl);
   --pf-v5-c-table--m-grid__check--favorite--action--MarginLeft: calc(var(--pf-v5-c-table--m-grid__check--favorite--MarginLeft) + var(--pf-v5-c-table--m-grid__favorite--action--MarginLeft));
   --pf-v5-c-table__toggle__icon--Transition: .2s ease-in 0s;
   --pf-v5-c-table__toggle--m-expanded__icon--Rotate: 180deg;
 }
-@media screen and (max-width: 1200px) {
-  .pf-v5-c-table[class*=pf-m-grid] {
-    --pf-v5-c-table__tr--responsive--PaddingRight: var(--pf-v5-c-table__tr--responsive--xl--PaddingRight);
-    --pf-v5-c-table__tr--responsive--PaddingLeft: var(--pf-v5-c-table__tr--responsive--xl--PaddingLeft);
-  }
-}
-@media screen and (max-width: 1200px) {
-  .pf-v5-c-table[class*=pf-m-grid] {
-    --pf-v5-c-table__expandable-row-content--responsive--PaddingRight: var(--pf-v5-c-table__expandable-row-content--responsive--xl--PaddingRight);
-    --pf-v5-c-table__expandable-row-content--responsive--PaddingLeft: var(--pf-v5-c-table__expandable-row-content--responsive--xl--PaddingLeft);
-  }
-}
 
 .pf-m-grid.pf-v5-c-table {
   --pf-v5-c-table--cell--PaddingTop: var(--pf-v5-c-table--m-grid--cell--PaddingTop);

package/components/Table/table-grid.scss

@@ -42,37 +42,31 @@
 
   // Body
   --#{$table}__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
-  --#{$table}__tbody--after--border-width--base: var(--#{$pf-global}--BorderWidth--lg);
+  --#{$table}__tbody--after--border-width--base: var(--pf-t--global--border--width--extra-strong);
   --#{$table}__tbody--after--BorderLeftWidth: 0;
   --#{$table}__tbody--after--BorderColor: var(--pf-t--global--border--color--active);
 
   // Row
   --#{$table}__tr--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
-  --#{$table}__tr--responsive--last-child--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$table}__tr--responsive--GridColumnGap: var(--#{$pf-global}--spacer--md);
-  --#{$table}__tr--responsive--MarginTop: var(--pf-t--global--border--width--divider--default);
-  --#{$table}__tr--responsive--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$table}__tr--responsive--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$table}__tr--responsive--xl--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$table}__tr--responsive--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$table}__tr--responsive--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$table}__tr--responsive--xl--PaddingLeft: var(--#{$pf-global}--spacer--md);
-
-  @media screen and (max-width: $pf-v5-global--breakpoint--xl) {
-    --#{$table}__tr--responsive--PaddingRight: var(--#{$table}__tr--responsive--xl--PaddingRight);
-    --#{$table}__tr--responsive--PaddingLeft: var(--#{$table}__tr--responsive--xl--PaddingLeft);
-  }
-
-  --#{$table}__tr--responsive--nested-table--PaddingTop: var(--#{$pf-global}--spacer--xl);
-  --#{$table}__tr--responsive--nested-table--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$table}__tr--responsive--nested-table--PaddingBottom: var(--#{$pf-global}--spacer--xl);
-  --#{$table}__tr--responsive--nested-table--PaddingLeft: var(--#{$pf-global}--spacer--lg);
+  --#{$table}__tr--responsive--last-child--BorderBottomWidth: var(--#{$table}__tbody--responsive--border-width--base);
+  --#{$table}__tr--responsive--GridColumnGap: var(--pf-t--global--spacer--md);
+  --#{$table}__tr--responsive--MarginTop: var(--#{$table}__tbody--responsive--border-width--base);
+  --#{$table}__tr--responsive--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$table}__tr--responsive--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$table}__tr--responsive--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$table}__tr--responsive--PaddingLeft: var(--pf-t--global--spacer--lg);
+
+  // * Table tr responsive nested table
+  --#{$table}__tr--responsive--nested-table--PaddingTop: var(--pf-t--global--spacer--xl);
+  --#{$table}__tr--responsive--nested-table--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$table}__tr--responsive--nested-table--PaddingBottom: var(--pf-t--global--spacer--xl);
+  --#{$table}__tr--responsive--nested-table--PaddingLeft: var(--pf-t--global--spacer--lg);
 
   // expandable
   --#{$table}__tbody--after__tr--BorderLeftWidth: 0;
   --#{$table}__tbody--after__tr--BorderLeftColor: transparent;
   --#{$table}__tbody--m-expanded--after__tr--BorderLeftWidth: var(--#{$table}__expandable-row--after--border-width--base);
-  --#{$table}__tbody--m-expanded--after__tr--BorderLeftColor: var(--#{$pf-global}--active-color--400);
+  --#{$table}__tbody--m-expanded--after__tr--BorderLeftColor: var(--pf-t--global--border--color--active);
 
   // selected
   --#{$table}__tbody--m-selected--after__tr--BorderLeftWidth: var(--#{$table}__expandable-row--after--border-width--base);
@@ -88,47 +82,40 @@
   --#{$table}--m-grid--cell--PaddingLeft: 0;
 
   // Td
-  --#{$table}-td--responsive--GridColumnGap: var(--#{$pf-global}--spacer--md);
-  --#{$table}--cell--responsive--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$table}--cell--responsive--PaddingBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$table}--cell--first-child--responsive--PaddingTop: var(--#{$pf-global}--spacer--sm);
+  --#{$table}-td--responsive--GridColumnGap: var(--pf-t--global--spacer--md);
+  --#{$table}--cell--responsive--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$table}--cell--responsive--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$table}--cell--first-child--responsive--PaddingTop: var(--pf-t--global--spacer--sm);
   --#{$table}--cell--responsive--PaddingRight: 0;
   --#{$table}--cell--responsive--PaddingLeft: 0;
 
   // Compact table
-  --#{$table}--m-compact__tr--responsive--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$table}--m-compact__tr--responsive--PaddingBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$table}--m-compact__tr__td--responsive--PaddingTop: var(--#{$pf-global}--spacer--xs);
-  --#{$table}--m-compact__tr__td--responsive--PaddingBottom: var(--#{$pf-global}--spacer--xs);
+  --#{$table}--m-compact__tr--responsive--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$table}--m-compact__tr--responsive--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$table}--m-compact__tr__td--responsive--PaddingTop: var(--pf-t--global--spacer--xs);
+  --#{$table}--m-compact__tr__td--responsive--PaddingBottom: var(--pf-t--global--spacer--xs);
   --#{$table}--m-compact__check--responsive--MarginTop: #{pf-size-prem(7px)};
-  --#{$table}--m-compact__action--responsive--MarginTop: calc(var(--#{$pf-global}--spacer--xs) * -1);
-  --#{$table}--m-compact__action--responsive--MarginBottom: calc(var(--#{$pf-global}--spacer--xs) * -1);
+  --#{$table}--m-compact__action--responsive--MarginTop: calc(var(--pf-t--global--spacer--xs) * -1);
+  --#{$table}--m-compact__action--responsive--MarginBottom: calc(var(--pf-t--global--spacer--xs) * -1);
   --#{$table}--m-compact__toggle--c-button--responsive--MarginBottom: calc(#{pf-size-prem(6px)} * -1);
 
   // Expandable row content
-  --#{$table}__expandable-row-content--responsive--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$table}__expandable-row-content--responsive--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$table}__expandable-row-content--responsive--xl--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$table}__expandable-row-content--responsive--xl--PaddingLeft: var(--#{$pf-global}--spacer--md);
+  --#{$table}__expandable-row-content--responsive--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$table}__expandable-row-content--responsive--PaddingLeft: var(--pf-t--global--spacer--lg);
   --#{$table}__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 
-  @media screen and (max-width: $pf-v5-global--breakpoint--xl) {
-    --#{$table}__expandable-row-content--responsive--PaddingRight: var(--#{$table}__expandable-row-content--responsive--xl--PaddingRight);
-    --#{$table}__expandable-row-content--responsive--PaddingLeft: var(--#{$table}__expandable-row-content--responsive--xl--PaddingLeft);
-  }
-
   // Check
-  --#{$table}__check--responsive--MarginLeft: var(--pf-t--global--border--width--divider--default);
+  --#{$table}__check--responsive--MarginLeft: var(--#{$table}__tbody--responsive--border-width--base);
   --#{$table}__check--responsive--MarginTop: #{pf-size-prem(14px)};
 
   // Favorite
   --#{$table}--m-grid__favorite--MarginTop: #{pf-size-prem(8px)};
-  --#{$table}--m-grid__check--favorite--MarginLeft: var(--#{$pf-global}--spacer--xl);
+  --#{$table}--m-grid__check--favorite--MarginLeft: var(--pf-t--global--spacer--xl);
 
   // Action
   --#{$table}--m-grid__action--MarginTop: #{pf-size-prem(6px)};
-  --#{$table}__action--responsive--MarginLeft: var(--#{$pf-global}--spacer--xl);
-  --#{$table}--m-grid__favorite--action--MarginLeft: var(--#{$pf-global}--spacer--2xl);
+  --#{$table}__action--responsive--MarginLeft: var(--pf-t--global--spacer--xl);
+  --#{$table}--m-grid__favorite--action--MarginLeft: var(--pf-t--global--spacer--2xl);
   --#{$table}--m-grid__check--favorite--action--MarginLeft: calc(var(--#{$table}--m-grid__check--favorite--MarginLeft) + var(--#{$table}--m-grid__favorite--action--MarginLeft));
 
   // Toggle icons
@@ -335,9 +322,9 @@
 
     &::after {
       position: absolute;
-     inset-block-start: 0;
-     inset-block-end: 0;
-     inset-inline-start: 0;
+      inset-block-start: 0;
+      inset-block-end: 0;
+      inset-inline-start: 0;
       content: "";
       border: 0;
       border-inline-start: var(--#{$table}__tbody--after--BorderLeftWidth) solid var(--#{$table}__tbody--after--BorderColor);
@@ -423,9 +410,9 @@
     > tr:where(.#{$table}__tr)::after {
       content: '';
       position: absolute;
-     inset-block-start: 0;
-     inset-block-end: 0;
-     inset-inline-start: 0;
+      inset-block-start: 0;
+      inset-block-end: 0;
+      inset-inline-start: 0;
       width: var(--#{$table}__tbody--after__tr--BorderLeftWidth);
       background-color: var(--#{$table}__tbody--after__tr--BorderLeftColor);
     }
@@ -447,9 +434,9 @@
     &::after {
       content: '';
       position: absolute;
-     inset-block-start: 0;
-     inset-block-end: 0;
-     inset-inline-start: 0;
+      inset-block-start: 0;
+      inset-block-end: 0;
+      inset-inline-start: 0;
       width: var(--#{$table}__tr--m-selected--after--BorderLeftWidth);
       background-color: var(--#{$table}__tr--m-selected--after--BorderLeftColor);
     }

package/components/Table/table-scrollable.css

@@ -1,14 +1,14 @@
 .pf-v5-c-table {
   --pf-v5-c-table__sticky-cell--MinWidth--base: 12.5rem;
   --pf-v5-c-table__sticky-cell--MinWidth: var(--pf-v5-c-table__sticky-cell--MinWidth--base);
-  --pf-v5-c-table__sticky-cell--ZIndex: var(--pf-v5-global--ZIndex--xs);
+  --pf-v5-c-table__sticky-cell--ZIndex: var(--pf-t--global--Zindex--xs);
   --pf-v5-c-table__sticky-cell--Right: auto;
   --pf-v5-c-table__sticky-cell--Left: auto;
-  --pf-v5-c-table__sticky-cell--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-table__sticky-cell--m-border-right--before--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-table__sticky-cell--m-border-right--before--BorderRightColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftColor: var(--pf-v5-global--BorderColor--100);
+  --pf-v5-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-table__sticky-cell--m-border-right--before--BorderRightWidth: var(--pf-t--global--border--width--divider--default);
+  --pf-v5-c-table__sticky-cell--m-border-right--before--BorderRightColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftWidth: var(--pf-t--global--border--width--divider--default);
+  --pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftColor: var(--pf-t--global--border--color--default);
   --pf-v5-c-table__sticky-cell--m-right--Right: 0;
   --pf-v5-c-table__sticky-cell--m-left--Left: 0;
   --pf-v5-c-table--m-sticky-header__sticky-cell--ZIndex: calc(var(--pf-v5-c-table__sticky-cell--ZIndex) + 1);

package/components/Table/table-scrollable.scss

@@ -1,14 +1,14 @@
 .#{$table} {
   --#{$table}__sticky-cell--MinWidth--base: #{pf-size-prem(200px)};
   --#{$table}__sticky-cell--MinWidth: var(--#{$table}__sticky-cell--MinWidth--base);
-  --#{$table}__sticky-cell--ZIndex: var(--#{$pf-global}--ZIndex--xs);
+  --#{$table}__sticky-cell--ZIndex: var(--pf-t--global--Zindex--xs);
   --#{$table}__sticky-cell--Right: auto;
   --#{$table}__sticky-cell--Left: auto;
-  --#{$table}__sticky-cell--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$table}__sticky-cell--m-border-right--before--BorderRightWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$table}__sticky-cell--m-border-right--before--BorderRightColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$table}__sticky-cell--m-border-left--before--BorderLeftWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$table}__sticky-cell--m-border-left--before--BorderLeftColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$table}__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$table}__sticky-cell--m-border-right--before--BorderRightWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$table}__sticky-cell--m-border-right--before--BorderRightColor: var(--pf-t--global--border--color--default);
+  --#{$table}__sticky-cell--m-border-left--before--BorderLeftWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$table}__sticky-cell--m-border-left--before--BorderLeftColor: var(--pf-t--global--border--color--default);
   --#{$table}__sticky-cell--m-right--Right: 0;
   --#{$table}__sticky-cell--m-left--Left: 0;
   --#{$table}--m-sticky-header__sticky-cell--ZIndex: calc(var(--#{$table}__sticky-cell--ZIndex) + 1);
@@ -35,12 +35,12 @@
       --#{$table}--cell--m-border-left--before--BorderLeftColor: var(--#{$table}__sticky-cell--m-border-left--before--BorderLeftColor);
     }
 
-    &.pf-m-right, 
+    &.pf-m-right,
     &.pf-m-inline-end {
       --#{$table}__sticky-cell--Right: var(--#{$table}__sticky-cell--m-right--Right);
     }
 
-    &.pf-m-left, 
+    &.pf-m-left,
     &.pf-m-inline-start {
       --#{$table}__sticky-cell--Left: var(--#{$table}__sticky-cell--m-left--Left);
     }