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

package/components/Table/table.scss

@@ -11,13 +11,13 @@
   // ============================================================ //
 
   // Base
-  --#{$table}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$table}--BorderColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$table}--border-width--base: var(--#{$pf-global}--BorderWidth--sm);
+  --#{$table}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$table}--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$table}--border-width--base: var(--pf-t--global--border--width--divider--default);
 
   // Caption
-  --#{$table}__caption--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$table}__caption--Color: var(--#{$pf-global}--Color--200);
+  --#{$table}__caption--FontSize: var(--pf-t--global--font--size--body);
+  --#{$table}__caption--Color: var(--pf-t--global--text--color--subtle);
   --#{$table}__caption--PaddingTop: var(--#{$pf-global}--spacer--md);
   --#{$table}__caption--PaddingRight: var(--#{$pf-global}--spacer--lg);
   --#{$table}__caption--PaddingBottom: var(--#{$pf-global}--spacer--md);
@@ -31,21 +31,21 @@
   }
 
   // Thead
-  --#{$table}__thead--cell--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$table}__thead--cell--FontWeight: var(--#{$pf-global}--FontWeight--bold);
+  --#{$table}__thead--cell--FontSize: var(--pf-t--global--font--size--body);
+  --#{$table}__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
 
   // Tbody cell
-  --#{$table}__tbody--cell--PaddingTop: var(--#{$pf-global}--spacer--lg);
-  --#{$table}__tbody--cell--PaddingBottom: var(--#{$pf-global}--spacer--lg);
+  --#{$table}__tbody--cell--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$table}__tbody--cell--PaddingBottom: var(--pf-t--global--spacer--md);
 
   // Tr
   --#{$table}__tr--BoxShadow--top--base: 0 #{pf-size-prem(-3px)} #{pf-size-prem(4px)} #{pf-size-prem(-2px)} rgba(3,3,3,.08);
 
   // Th / td shared variables
   --#{$table}--cell--Padding--base: var(--#{$pf-global}--spacer--md);
-  --#{$table}--cell--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$table}--cell--FontWeight: var(--#{$pf-global}--FontWeight--normal);
-  --#{$table}--cell--Color: var(--#{$pf-global}--Color--100);
+  --#{$table}--cell--FontSize: var(--pf-t--global--font--size--body);
+  --#{$table}--cell--FontWeight: var(--pf-t--global--font--weight--body);
+  --#{$table}--cell--Color: var(--pf-t--global--text--color--regular);
   --#{$table}--cell--PaddingTop: var(--#{$table}--cell--Padding--base);
   --#{$table}--cell--PaddingRight: var(--#{$table}--cell--Padding--base);
   --#{$table}--cell--PaddingBottom: var(--#{$table}--cell--Padding--base);
@@ -66,10 +66,10 @@
   --#{$table}--cell--WordBreak: normal;
 
   // Border
-  --#{$table}--cell--m-border-right--before--BorderRightWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$table}--cell--m-border-right--before--BorderRightColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$table}--cell--m-border-left--before--BorderLeftWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$table}--cell--m-border-left--before--BorderLeftColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$table}--cell--m-border-right--before--BorderRightWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$table}--cell--m-border-right--before--BorderRightColor: var(--pf-t--global--border--color--default);
+  --#{$table}--cell--m-border-left--before--BorderLeftWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$table}--cell--m-border-left--before--BorderLeftColor: var(--pf-t--global--border--color--default);
 
   // Help
   --#{$table}--cell--m-help--MinWidth: 11ch;
@@ -95,10 +95,10 @@
 
   // Button
   --#{$table}__button--BackgroundColor: transparent;
-  --#{$table}__button--Color: var(--#{$pf-global}--Color--100);
-  --#{$table}__button--hover--Color: var(--#{$pf-global}--Color--100);
-  --#{$table}__button--focus--Color: var(--#{$pf-global}--Color--100);
-  --#{$table}__button--active--Color: var(--#{$pf-global}--Color--100);
+  --#{$table}__button--Color: var(--pf-t--global--text--color--regular);
+  --#{$table}__button--hover--Color: var(--pf-t--global--text--color--regular);
+  --#{$table}__button--focus--Color: var(--pf-t--global--text--color--regular);
+  --#{$table}__button--active--Color: var(--pf-t--global--text--color--regular);
   --#{$table}__button--OutlineOffset: calc(var(--#{$pf-global}--BorderWidth--lg) * -1);
 
   // Compact
@@ -107,21 +107,21 @@
 
   // Check
   --#{$table}__check--input--MarginTop: #{pf-size-prem(4px)};
-  --#{$table}__check--input--FontSize: var(--#{$pf-global}--FontSize--md);
+  --#{$table}__check--input--FontSize: var(--pf-t--global--font--size--body);
 
   // Favorite
-  --#{$table}--cell--m-favorite--Color: var(--#{$pf-global}--Color--light-300);
-  --#{$table}__favorite--c-button--Color: var(--#{$pf-global}--Color--light-300);
-  --#{$table}__favorite--c-button--FontSize: var(--#{$pf-global}--FontSize--sm);
+  --#{$table}--cell--m-favorite--Color: var(--pf-t--global--text--color--subtle);
+  --#{$table}__favorite--c-button--Color: var(--pf-t--global--text--color--subtle);
+  --#{$table}__favorite--c-button--FontSize: var(--pf-t--global--font--size--body);
   --#{$table}__favorite--c-button--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
   --#{$table}__favorite--c-button--MarginRight: calc(var(--#{$pf-global}--spacer--md) * -1);
   --#{$table}__favorite--c-button--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
   --#{$table}__favorite--c-button--MarginLeft: calc(var(--#{$pf-global}--spacer--md) * -1);
   --#{$table}__favorite--m-favorited--c-button--Color: var(--#{$pf-global}--palette--gold-400);
-  --#{$table}__sort--m-favorite__button__text--Color: var(--#{$pf-global}--Color--200);
-  --#{$table}__sort--m-favorite__button--hover__text--Color: var(--#{$pf-global}--Color--100);
-  --#{$table}__sort--m-favorite__button--focus__text--Color: var(--#{$pf-global}--Color--100);
-  --#{$table}__sort--m-favorite__button--active__text--Color: var(--#{$pf-global}--Color--100);
+  --#{$table}__sort--m-favorite__button__text--Color: var(--pf-t--global--text--color--subtle);
+  --#{$table}__sort--m-favorite__button--hover__text--Color: var(--pf-t--global--text--color--regular);
+  --#{$table}__sort--m-favorite__button--focus__text--Color: var(--pf-t--global--text--color--regular);
+  --#{$table}__sort--m-favorite__button--active__text--Color: var(--pf-t--global--text--color--regular);
 
   // Draggable
   --#{$table}__draggable--c-button--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
@@ -131,7 +131,7 @@
 
   // Ghost row
   --#{$table}__tr--m-ghost-row--Opacity: .4;
-  --#{$table}__tr--m-ghost-row--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
+  --#{$table}__tr--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 
   // Action
   --#{$table}__action--PaddingTop: 0;
@@ -158,7 +158,7 @@
   --#{$table}__expandable-row--after--Bottom: calc(var(--#{$table}--border-width--base) * -1);
   --#{$table}__expandable-row--after--border-width--base: var(--#{$pf-global}--BorderWidth--lg);
   --#{$table}__expandable-row--after--BorderLeftWidth: 0;
-  --#{$table}__expandable-row--after--BorderColor: var(--#{$pf-global}--active-color--100);
+  --#{$table}__expandable-row--after--BorderColor: var(--pf-t--global--border--color--active);
 
   // Icon inline
   --#{$table}__icon-inline--MarginRight: var(--#{$pf-global}--spacer--sm);
@@ -174,8 +174,8 @@
   --#{$table}__sort__button--MarginTop: calc(var(--#{$table}__sort__button--PaddingTop) * -1);
   --#{$table}__sort__button--MarginBottom: calc(var(--#{$table}__sort__button--PaddingBottom) * -1);
   --#{$table}__sort__button--MarginLeft: calc(var(--#{$table}__sort__button--PaddingLeft) * -1);
-  --#{$table}__sort__button--Color: var(--#{$pf-global}--Color--100);
-  --#{$table}__sort--m-selected__button--Color: var(--#{$pf-global}--active-color--100);
+  --#{$table}__sort__button--Color: var(--pf-t--global--text--color--regular);
+  --#{$table}__sort--m-selected__button--Color: var(--pf-t--global--border--color--active);
   --#{$table}__sort--m-help--MinWidth: 15ch;
 
   // Sort text
@@ -185,12 +185,12 @@
   --#{$table}__sort__button--active__text--Color: currentcolor;
 
   // Sort indicator
-  --#{$table}__sort-indicator--Color: var(--#{$pf-global}--disabled-color--200);
+  --#{$table}__sort-indicator--Color: var(--pf-t--global--icon--color--subtle);
   --#{$table}__sort-indicator--MarginLeft: var(--#{$pf-global}--spacer--md);
-  --#{$table}__sort--m-selected__sort-indicator--Color: var(--#{$pf-global}--active-color--100);
-  --#{$table}__sort__button--hover__sort-indicator--Color: var(--#{$pf-global}--Color--100);
-  --#{$table}__sort__button--active__sort-indicator--Color: var(--#{$pf-global}--Color--100);
-  --#{$table}__sort__button--focus__sort-indicator--Color: var(--#{$pf-global}--Color--100);
+  --#{$table}__sort--m-selected__sort-indicator--Color: var(--pf-t--global--border--color--active);
+  --#{$table}__sort__button--hover__sort-indicator--Color: var(--pf-t--global--text--color--regular);
+  --#{$table}__sort__button--active__sort-indicator--Color: var(--pf-t--global--text--color--regular);
+  --#{$table}__sort__button--focus__sort-indicator--Color: var(--pf-t--global--text--color--regular);
 
   // Help
   --#{$table}__th--m-help--MinWidth: 11ch;
@@ -204,14 +204,14 @@
   --#{$table}__column-help--c-button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
 
   // Compound expansion toggle button
-  --#{$table}__compound-expansion-toggle__button--Color: var(--#{$pf-global}--active-color--100);
-  --#{$table}__compound-expansion-toggle__button--hover--Color: var(--#{$pf-global}--link--Color--hover);
-  --#{$table}__compound-expansion-toggle__button--focus--Color: var(--#{$pf-global}--link--Color--hover);
-  --#{$table}__compound-expansion-toggle__button--active--Color: var(--#{$pf-global}--link--Color--hover);
+  --#{$table}__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
+  --#{$table}__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover);
+  --#{$table}__compound-expansion-toggle__button--focus--Color: var(--pf-t--global--icon--color--brand--hover);
+  --#{$table}__compound-expansion-toggle__button--active--Color: var(--pf-t--global--icon--color--brand--active);
 
   // ::before border treatment
-  --#{$table}__compound-expansion-toggle__button--before--border-width--base: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$table}__compound-expansion-toggle__button--before--BorderColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$table}__compound-expansion-toggle__button--before--border-width--base: var(--pf-t--global--border--width--button--default);
+  --#{$table}__compound-expansion-toggle__button--before--BorderColor: var(--pf-t--global--border--color--default);
   --#{$table}__compound-expansion-toggle__button--before--BorderRightWidth: 0;
   --#{$table}__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
   --#{$table}__compound-expansion-toggle__button--before--Bottom: calc(var(--#{$table}__compound-expansion-toggle__button--before--border-width--base) * -1);
@@ -219,7 +219,7 @@
 
   // ::before border treatment
   --#{$table}__compound-expansion-toggle__button--after--border-width--base: var(--#{$pf-global}--BorderWidth--lg);
-  --#{$table}__compound-expansion-toggle__button--after--BorderColor: var(--#{$pf-global}--primary-color--100);
+  --#{$table}__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--active);
   --#{$table}__compound-expansion-toggle__button--after--BorderTopWidth: 0;
   --#{$table}__compound-expansion-toggle__button--after--Top: calc(var(--#{$table}__compound-expansion-toggle__button--before--border-width--base) * -1);
   --#{$table}__compound-expansion-toggle__button--after--Left: calc(var(--#{$table}__compound-expansion-toggle__button--before--border-width--base) * -1);
@@ -235,7 +235,7 @@
   --#{$table}--m-compact--cell--first-last-child--PaddingRight: var(--#{$pf-global}--spacer--md);
   --#{$table}--m-compact--cell--first-last-child--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
   --#{$table}--m-compact--cell--first-last-child--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$table}--m-compact--FontSize: var(--#{$pf-global}--FontSize--sm);
+  --#{$table}--m-compact--FontSize: var(--pf-t--global--font--size--body);
   --#{$table}--m-compact__expandable-row-content--PaddingTop: var(--#{$pf-global}--spacer--lg);
   --#{$table}--m-compact__expandable-row-content--PaddingRight: var(--#{$pf-global}--spacer--lg);
   --#{$table}--m-compact__expandable-row-content--PaddingBottom: var(--#{$pf-global}--spacer--lg);
@@ -246,56 +246,59 @@
   --#{$table}--nested--first-last-child--PaddingLeft: var(--#{$table}--m-compact--cell--first-last-child--PaddingRight);
 
   // Modifier - expandable row expanded
-  --#{$table}__expandable-row--m-expanded--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$table}__expandable-row--m-expanded--BorderBottomColor: var(--pf-t--global--border--color--default);
 
   // tr clickable
   --#{$table}__tr--m-clickable--BoxShadow--top: var(--#{$table}__tr--BoxShadow--top--base);
   --#{$table}__tr--m-clickable--BackgroundColor: transparent;
   --#{$table}__tr--m-clickable--BoxShadow: none;
+  --#{$table}__tr--m-clickable--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$table}__tr--m-clickable--OutlineOffset: calc(-1 * var(--#{$pf-global}--spacer--xs));
-  --#{$table}__tr--m-clickable--hover--BoxShadow: var(--#{$table}__tr--m-clickable--BoxShadow--top), var(--#{$pf-global}--BoxShadow--sm-bottom);
-  --#{$table}__tr--m-clickable--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$table}__tr--m-clickable--focus--BoxShadow: var(--#{$table}__tr--m-clickable--BoxShadow--top), var(--#{$pf-global}--BoxShadow--sm-bottom);
-  --#{$table}__tr--m-clickable--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$table}__tr--m-clickable--active--BoxShadow: var(--#{$table}__tr--m-clickable--BoxShadow--top), var(--#{$pf-global}--BoxShadow--sm-bottom);
-  --#{$table}__tr--m-clickable--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$table}__tr--m-clickable--m-selected--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-bottom) inset, var(--#{$pf-global}--BoxShadow--sm-bottom);
+
+  // TODO Shadow tokens START HERE AGAIN
+  --#{$table}__tr--m-clickable--hover--BoxShadow: var(--#{$table}__tr--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
+  --#{$table}__tr--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
+  --#{$table}__tr--m-clickable--focus--BoxShadow: var(--#{$table}__tr--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
+  --#{$table}__tr--m-clickable--focus--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
+  --#{$table}__tr--m-clickable--active--BoxShadow: var(--#{$table}__tr--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
+  --#{$table}__tr--m-clickable--active--BackgroundColor: var(--pf-t--global--background--color--primary--selected);
+  --#{$table}__tr--m-clickable--m-selected--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom) inset, var(--pf-t--global--box-shadow--sm--bottom);
 
   // tr selected
   --#{$table}__tr--m-selected--BoxShadow--top: var(--#{$table}__tr--BoxShadow--top--base);
-  --#{$table}__tr--m-selected--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$table}__tr--m-selected--BoxShadow: var(--#{$table}__tr--m-selected--BoxShadow--top), var(--#{$pf-global}--BoxShadow--sm-bottom);
-  --#{$table}__tr--m-selected--OutlineOffset: calc(-1 * var(--#{$pf-global}--spacer--xs));
+  --#{$table}__tr--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
+  --#{$table}__tr--m-selected--BoxShadow: var(--#{$table}__tr--m-selected--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
+  --#{$table}__tr--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
   --#{$table}__tr--m-selected--after--BorderLeftWidth: calc(2 * var(--#{$table}__expandable-row--after--border-width--base));
   --#{$table}__tr--m-selected--after--BorderLeftColor: var(--#{$pf-global}--active-color--100);
-  --#{$table}__tr--m-selected--m-selected--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-bottom);
-  --#{$table}__tr--m-selected--hover__tr--m-selected--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-bottom) inset, var(--#{$pf-global}--BoxShadow--sm-bottom);
-  --#{$table}__tr--m-selected__tr--m-selected--hover--BoxShadow: var(--#{$table}__tr--m-selected--BoxShadow--top), var(--#{$pf-global}--BoxShadow--sm-bottom);
+  --#{$table}__tr--m-selected--m-selected--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
+  --#{$table}__tr--m-selected--hover__tr--m-selected--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom) inset, var(--pf-t--global--box-shadow--sm--bottom);
+  --#{$table}__tr--m-selected__tr--m-selected--hover--BoxShadow: var(--#{$table}__tr--m-selected--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
 
   // tbody clickable
   --#{$table}__tbody--m-clickable--BoxShadow--top: var(--#{$table}__tr--BoxShadow--top--base);
   --#{$table}__tbody--m-clickable--BoxShadow: none;
   --#{$table}__tbody--m-clickable--BackgroundColor: transparent;
   --#{$table}__tbody--m-clickable--OutlineOffset: calc(-1 * var(--#{$pf-global}--spacer--xs));
-  --#{$table}__tbody--m-clickable--hover--BoxShadow: var(--#{$table}__tbody--m-clickable--BoxShadow--top), var(--#{$pf-global}--BoxShadow--sm-bottom);
-  --#{$table}__tbody--m-clickable--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$table}__tbody--m-clickable--focus--BoxShadow: var(--#{$table}__tbody--m-clickable--BoxShadow--top), var(--#{$pf-global}--BoxShadow--sm-bottom);
-  --#{$table}__tbody--m-clickable--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$table}__tbody--m-clickable--active--BoxShadow: var(--#{$table}__tbody--m-clickable--BoxShadow--top), var(--#{$pf-global}--BoxShadow--sm-bottom);
-  --#{$table}__tbody--m-clickable--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$table}__tbody--m-clickable--m-expanded--BorderColor: var(--#{$pf-global}--active-color--400);
-  --#{$table}__tbody--m-clickable--m-selected--hover__tr--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-bottom) inset, var(--#{$pf-global}--BoxShadow--sm-bottom);
+  --#{$table}__tbody--m-clickable--hover--BoxShadow: var(--#{$table}__tbody--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
+  --#{$table}__tbody--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$table}__tbody--m-clickable--focus--BoxShadow: var(--#{$table}__tbody--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
+  --#{$table}__tbody--m-clickable--focus--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$table}__tbody--m-clickable--active--BoxShadow: var(--#{$table}__tbody--m-clickable--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
+  --#{$table}__tbody--m-clickable--active--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$table}__tbody--m-clickable--m-expanded--BorderColor: var(--pf-t--global--border--color--active);
+  --#{$table}__tbody--m-clickable--m-selected--hover__tr--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom) inset, var(--pf-t--global--box-shadow--sm--bottom);
 
   // tbody selected
-  --#{$table}__tbody--m-selected--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
+  --#{$table}__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$table}__tbody--m-selected--BoxShadow--top: var(--#{$table}__tr--BoxShadow--top--base);
-  --#{$table}__tbody--m-selected--BoxShadow: var(--#{$table}__tbody--m-selected--BoxShadow--top), var(--#{$pf-global}--BoxShadow--sm-bottom);
+  --#{$table}__tbody--m-selected--BoxShadow: var(--#{$table}__tbody--m-selected--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
   --#{$table}__tbody--m-selected--OutlineOffset: calc(-1 * var(--#{$pf-global}--spacer--xs));
   --#{$table}__tbody--m-selected--after--BorderLeftWidth: calc(2 * var(--#{$table}__expandable-row--after--border-width--base));
-  --#{$table}__tbody--m-selected--after--BorderLeftColor: var(--#{$pf-global}--active-color--100);
-  --#{$table}__tbody--m-selected--m-selected--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-bottom);
-  --#{$table}__tbody--m-selected--hover__tbody--m-selected--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-bottom) inset, var(--#{$pf-global}--BoxShadow--sm-bottom);
-  --#{$table}__tbody--m-selected__tbody--m-selected--hover--BoxShadow: var(--#{$table}__tr--m-selected--BoxShadow--top), var(--#{$pf-global}--BoxShadow--sm-bottom);
+  --#{$table}__tbody--m-selected--after--BorderLeftColor: var(--pf-t--global--border--color--active);
+  --#{$table}__tbody--m-selected--m-selected--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
+  --#{$table}__tbody--m-selected--hover__tbody--m-selected--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom) inset, var(--pf-t--global--box-shadow--sm--bottom);
+  --#{$table}__tbody--m-selected__tbody--m-selected--hover--BoxShadow: var(--#{$table}__tr--m-selected--BoxShadow--top), var(--pf-t--global--box-shadow--sm--bottom);
 
   // Nested column header
   --#{$table}__thead--m-nested-column-header--button--OutlineOffset: #{pf-size-prem(-3px)};
@@ -303,10 +306,10 @@
   --#{$table}__thead--m-nested-column-header__tr--PaddingBottom: var(--#{$pf-global}--spacer--xs);
 
   // Subhead
-  --#{$table}__subhead--Color: var(--#{$pf-global}--Color--200);
+  --#{$table}__subhead--Color: var(--pf-t--global--text--color--subtle);
 
   // Striped
-  --#{$table}--m-striped__tr--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-200);
+  --#{$table}--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 
   // Sticky
   --#{$table}--m-sticky-header--cell--ZIndex: var(--#{$pf-global}--ZIndex--xs);
@@ -332,7 +335,7 @@
     position: relative;
 
     thead:where(.#{$table}__thead) tr:where(.#{$table}__tr) {
-      border-bottom: 0;
+      border-block-end: 0;
 
       > * {
         z-index: var(--#{$table}--m-sticky-header--cell--ZIndex); // set z-index here to allow sticky column to override
@@ -343,17 +346,17 @@
     > thead:where(.#{$table}__thead):not(.pf-m-nested-column-header) {
       > tr:where(.#{$table}__tr) > * {
         position: sticky;
-        top: 0;
+       inset-block-start: 0;
         background: var(--#{$table}--BackgroundColor);
 
         // stylelint-disable-next-line
         &::after {
           position: absolute;
-          right: 0;
-          bottom: 0;
-          left: 0;
+          inset-block-end: 0;
+          inset-inline-start: 0;
+          inset-inline-end: 0;
           content: "";
-          border-bottom: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
+          border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
         }
       }
     }
@@ -361,7 +364,7 @@
     // nested column header
     > .pf-m-nested-column-header {
       position: sticky;
-      top: 0;
+     inset-block-start: 0;
       z-index: var(--#{$pf-global}--ZIndex--xs);
       background: var(--#{$table}--BackgroundColor);
 
@@ -385,7 +388,7 @@
 
   &:not(.pf-m-sticky-header) > .pf-m-nested-column-header {
     tr:where(.#{$table}__tr):not(:last-child) {
-      border-bottom: 0; // hard reset tr borders in nested headers
+      border-block-end: 0; // hard reset tr borders in nested headers
 
       // stylelint-disable max-nesting-depth
       th:where(.#{$table}__th),
@@ -414,7 +417,7 @@
   // Standard table row (non-expandable)
   // exclude expandable rows
   tr:where(.#{$table}__tr):not(.#{$table}__expandable-row) {
-    border-bottom: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
+    border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
 
     // stylelint-disable-next-line
     &.pf-m-ghost-row {
@@ -432,7 +435,10 @@
     width: var(--#{$table}--cell--Width);
     min-width: var(--#{$table}--cell--MinWidth);
     max-width: var(--#{$table}--cell--MaxWidth);
-    padding: var(--#{$table}--cell--PaddingTop) var(--#{$table}--cell--PaddingRight) var(--#{$table}--cell--PaddingBottom) var(--#{$table}--cell--PaddingLeft);
+    padding-block-start: var(--#{$table}--cell--PaddingTop);
+    padding-block-end: var(--#{$table}--cell--PaddingBottom);
+    padding-inline-start: var(--#{$table}--cell--PaddingLeft);
+    padding-inline-end: var(--#{$table}--cell--PaddingRight);
 
     // default settings
     overflow: var(--#{$table}--cell--Overflow);
@@ -477,31 +483,31 @@
     &.pf-m-border-right::before,
     &.pf-m-border-left::before {
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset-block-start: 0;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+      inset-inline-end: 0;
       pointer-events: none;
       content: "";
     }
 
     &.pf-m-border-right::before {
-      border-right: var(--#{$table}--cell--m-border-right--before--BorderRightWidth) solid var(--#{$table}--cell--m-border-right--before--BorderRightColor);
+      border-inline-end: var(--#{$table}--cell--m-border-right--before--BorderRightWidth) solid var(--#{$table}--cell--m-border-right--before--BorderRightColor);
     }
 
     &.pf-m-border-left::before {
-      border-left: var(--#{$table}--cell--m-border-left--before--BorderLeftWidth) solid var(--#{$table}--cell--m-border-left--before--BorderLeftColor);
+      border-inline-start: var(--#{$table}--cell--m-border-left--before--BorderLeftWidth) solid var(--#{$table}--cell--m-border-left--before--BorderLeftColor);
     }
   }
 
   // Table caption
   caption:where(.#{$table}__caption) {
-    padding-top: var(--#{$table}__caption--PaddingTop);
-    padding-bottom: var(--#{$table}__caption--PaddingBottom);
-    padding-left: var(--#{$table}__caption--PaddingLeft);
+    padding-block-start: var(--#{$table}__caption--PaddingTop);
+    padding-block-end: var(--#{$table}__caption--PaddingBottom);
+    padding-inline-start: var(--#{$table}__caption--PaddingLeft);
     font-size: var(--#{$table}__caption--FontSize);
     color: var(--#{$table}__caption--Color);
-    text-align: left;
+    text-align: start;
     background-color: var(--#{$table}--BackgroundColor);
   }
 
@@ -564,26 +570,26 @@
       position: absolute;
 
       // offset top to extend above tr border
-      top: var(--#{$table}__expandable-row--after--Top);
-      bottom: var(--#{$table}__expandable-row--after--Bottom);
-      left: 0;
+     inset-block-start: var(--#{$table}__expandable-row--after--Top);
+     inset-block-end: var(--#{$table}__expandable-row--after--Bottom);
+     inset-inline-start: 0;
       content: "";
 
       // add border left
       background-color: transparent;
-      border-left: var(--#{$table}__expandable-row--after--BorderLeftWidth) solid var(--#{$table}__expandable-row--after--BorderColor);
+      border-inline-start: var(--#{$table}__expandable-row--after--BorderLeftWidth) solid var(--#{$table}__expandable-row--after--BorderColor);
     }
 
     // Check table cell
     .#{$table}__check {
       input:where(.#{$check}__input) {
-        margin-top: var(--#{$table}__check--input--MarginTop);
+        margin-block-start: var(--#{$table}__check--input--MarginTop);
         vertical-align: top;
       }
     }
 
     &.pf-m-expanded > :first-child:not(.#{$table}__control-row) {
-      border-bottom-width: 0;
+      border-block-end-width: 0;
     }
   }
   // stylelint-enable
@@ -658,10 +664,10 @@
   // stylelint-disable selector-no-qualifying-type, selector-max-compound-selectors
   &.pf-m-no-border-rows > tbody:where(.#{$table}__tbody) {
     > tr:where(.#{$table}__tr) {
-      border-bottom: 0;
+      border-block-end: 0;
 
       > :first-child::after {
-        border-left: 0;
+        border-inline-start: 0;
       }
     }
 
@@ -670,46 +676,40 @@
     }
 
     &.pf-m-expanded > .#{$table}__control-row {
-      border-bottom: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
+      border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
     }
 
     .#{$table}__control-row > .#{$table}__compound-expansion-toggle:first-child > ::before {
-      border-left-width: 0;
+      border-inline-start-width: 0;
     }
   }
 
+  tr.pf-m-clickable:last-child {
+    border-block-end-color: transparent;
+  }
+
   // tr clickable
   tr:where(.#{$table}__tr) {
+    position: relative;
+
+    &::before {
+      position: absolute;
+      inset:0;
+      content: "";
+      background-color: var(--#{$table}__tr--m-clickable--BackgroundColor);
+      border-radius: var(--#{$table}__tr--m-clickable--BorderRadius);
+    }
+
     &.pf-m-clickable {
       cursor: pointer;
-      background-color: var(--#{$table}__tr--m-clickable--BackgroundColor);
       outline-offset: var(--#{$table}__tr--m-clickable--OutlineOffset);
       box-shadow: var(--#{$table}__tr--m-clickable--BoxShadow);
 
       &:hover,
       &:focus,
       &:active {
-        // stylelint-disable max-nesting-depth
-        &:not(.pf-m-selected) + tr:where(.#{$table}__tr).pf-m-selected {
-          box-shadow: var(--#{$table}__tr--m-clickable--m-selected--BoxShadow);
-        }
-        // stylelint-enable
-      }
-
-      &:hover {
-        --#{$table}__tr--m-clickable--BoxShadow: var(--#{$table}__tr--m-clickable--hover--BoxShadow);
         --#{$table}__tr--m-clickable--BackgroundColor: var(--#{$table}__tr--m-clickable--hover--BackgroundColor);
       }
-
-      &:focus {
-        --#{$table}__tr--m-clickable--BoxShadow: var(--#{$table}__tr--m-clickable--focus--BoxShadow);
-        --#{$table}__tr--m-clickable--BackgroundColor: var(--#{$table}__tr--m-clickable--focus--BackgroundColor);
-      }
-
-      &:active {
-        --#{$table}__tr--m-clickable--BoxShadow: var(--#{$table}__tr--m-clickable--active--BoxShadow);
-        --#{$table}__tr--m-clickable--BackgroundColor: var(--#{$table}__tr--m-clickable--active--BackgroundColor);
-      }
     }
 
     // tr selected
@@ -839,11 +839,14 @@
 .#{$table}__button {
   position: static;
   width: 100%;
-  padding: var(--#{$table}--cell--PaddingTop) var(--#{$table}--cell--PaddingRight) var(--#{$table}--cell--PaddingBottom) var(--#{$table}--cell--PaddingLeft);
+  padding-block-start: var(--#{$table}--cell--PaddingTop);
+  padding-block-end: var(--#{$table}--cell--PaddingBottom);
+  padding-inline-start: var(--#{$table}--cell--PaddingLeft);
+  padding-inline-end: var(--#{$table}--cell--PaddingRight);
   font-size: inherit;
   font-weight: inherit;
   color: var(--#{$table}__button--Color);
-  text-align: left;
+  text-align: start;
   white-space: inherit;
   user-select: text;
   background-color: var(--#{$table}__button--BackgroundColor);
@@ -852,10 +855,10 @@
   // Define clickable area with invisible ::before pseudo
   &::before {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     cursor: pointer;
     content: "";
   }
@@ -954,8 +957,8 @@
   vertical-align: top;
 
   .#{$button} {
-    margin-top: var(--#{$table}__toggle--c-button--MarginTop);
-    margin-bottom: var(--#{$table}__toggle--c-button--MarginBottom);
+    margin-block-start: var(--#{$table}__toggle--c-button--MarginTop);
+    margin-block-end: var(--#{$table}__toggle--c-button--MarginBottom);
 
     &.pf-m-expanded {
       .#{$table}__toggle-icon {
@@ -965,6 +968,8 @@
   }
 
   .#{$table}__toggle-icon {
+    @include pf-v5-mirror-inline-on-rtl;
+
     transition: var(--#{$table}__toggle--c-button__toggle-icon--Transition);
     transform: rotate(var(--#{$table}__toggle--c-button__toggle-icon--Rotate));
   }
@@ -986,7 +991,10 @@
   label {
     display: block;
     padding: inherit;
-    margin: calc(var(--#{$table}--cell--PaddingTop) * -1) calc(var(--#{$table}--cell--PaddingRight) * -1) calc(var(--#{$table}--cell--PaddingBottom) * -1) calc(var(--#{$table}--cell--PaddingLeft) * -1);
+    margin-block-start: calc(var(--#{$table}--cell--PaddingTop) * -1);
+    margin-block-end: calc(var(--#{$table}--cell--PaddingBottom) * -1);
+    margin-inline-start: calc(var(--#{$table}--cell--PaddingLeft) * -1);
+    margin-inline-end: calc(var(--#{$table}--cell--PaddingRight) * -1);
   }
 }
 
@@ -996,7 +1004,10 @@
     --#{$button}--m-plain--Color: var(--#{$table}__favorite--c-button--Color);
     --#{$button}--FontSize: var(--#{$table}__favorite--c-button--FontSize);
 
-    margin: var(--#{$table}__favorite--c-button--MarginTop) var(--#{$table}__favorite--c-button--MarginRight) var(--#{$table}__favorite--c-button--MarginBottom) var(--#{$table}__favorite--c-button--MarginLeft);
+    margin-block-start: var(--#{$table}__favorite--c-button--MarginTop);
+    margin-block-end: var(--#{$table}__favorite--c-button--MarginBottom);
+    margin-inline-start: var(--#{$table}__favorite--c-button--MarginLeft);
+    margin-inline-end: var(--#{$table}__favorite--c-button--MarginRight);
 
     @at-root .pf-m-favorited#{&} {
       --#{$button}--m-plain--Color: var(--#{$table}__favorite--m-favorited--c-button--Color);
@@ -1007,7 +1018,10 @@
 // Draggable
 .#{$table}__draggable {
   .#{$button} {
-    margin: var(--#{$table}__draggable--c-button--MarginTop) var(--#{$table}__draggable--c-button--MarginRight) var(--#{$table}__draggable--c-button--MarginBottom) var(--#{$table}__draggable--c-button--MarginLeft);
+    margin-block-start: var(--#{$table}__draggable--c-button--MarginTop);
+    margin-block-end: var(--#{$table}__draggable--c-button--MarginBottom);
+    margin-inline-start: var(--#{$table}__draggable--c-button--MarginLeft);
+    margin-inline-end: var(--#{$table}__draggable--c-button--MarginRight);
     cursor: grab;
 
     &:active {
@@ -1024,13 +1038,13 @@
   --#{$table}--cell--PaddingBottom: 0;
   --#{$table}--cell--PaddingLeft: var(--#{$table}__action--PaddingLeft);
 
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-block-start: 0;
+  padding-block-end: 0;
   vertical-align: middle;
 }
 
 .#{$table}__action {
-  text-align: right;
+  text-align: end;
 }
 
 // Inline edit
@@ -1038,7 +1052,7 @@
   --#{$table}--cell--PaddingLeft: 0;
   --#{$table}--cell--PaddingRight: 0;
 
-  text-align: right;
+  text-align: end;
 }
 
 // Compound expansion toggle
@@ -1071,28 +1085,28 @@
   .#{$table}__button::before,
   .#{$table}__button::after {
     position: absolute;
-    right: 0;
+   inset-inline-end: 0;
     content: "";
     border-style: solid;
     border-width: 0;
   }
 
   .#{$table}__button::before {
-    top: 0;
-    bottom: var(--#{$table}__compound-expansion-toggle__button--before--Bottom);
-    left: var(--#{$table}__compound-expansion-toggle__button--before--Left);
+   inset-block-start: 0;
+   inset-block-end: var(--#{$table}__compound-expansion-toggle__button--before--Bottom);
+   inset-inline-start: var(--#{$table}__compound-expansion-toggle__button--before--Left);
     border-color: var(--#{$table}__compound-expansion-toggle__button--before--BorderColor);
-    border-right-width: var(--#{$table}__compound-expansion-toggle__button--before--BorderRightWidth);
-    border-left-width: var(--#{$table}__compound-expansion-toggle__button--before--BorderLeftWidth);
+    border-inline-start-width: var(--#{$table}__compound-expansion-toggle__button--before--BorderLeftWidth);
+    border-inline-end-width: var(--#{$table}__compound-expansion-toggle__button--before--BorderRightWidth);
   }
 
   .#{$table}__button::after {
     // overlap previous row's border
-    top: var(--#{$table}__compound-expansion-toggle__button--after--Top);
-    left: var(--#{$table}__compound-expansion-toggle__button--after--Left);
+   inset-block-start: var(--#{$table}__compound-expansion-toggle__button--after--Top);
+   inset-inline-start: var(--#{$table}__compound-expansion-toggle__button--after--Left);
     pointer-events: none;
     border-color: var(--#{$table}__compound-expansion-toggle__button--after--BorderColor);
-    border-top-width: var(--#{$table}__compound-expansion-toggle__button--after--BorderTopWidth);
+    border-block-start-width: var(--#{$table}__compound-expansion-toggle__button--after--BorderTopWidth);
   }
 
   &:hover,
@@ -1110,7 +1124,7 @@
 
   &.pf-m-expanded {
     .#{$table}__button::before {
-      border-bottom: var(--#{$table}--BackgroundColor) solid var(--#{$table}__compound-expansion-toggle__button--before--border-width--base);
+      border-block-end: var(--#{$table}--BackgroundColor) solid var(--#{$table}__compound-expansion-toggle__button--before--border-width--base);
     }
 
     &:first-child {
@@ -1131,15 +1145,15 @@
 }
 
 .#{$table}__column-help-action {
-  margin-left: var(--#{$table}__column-help--MarginLeft);
+  margin-inline-start: var(--#{$table}__column-help--MarginLeft);
   transform: translateY(var(--#{$table}__column-help--TranslateY));
 
   .#{$button} {
     --#{$button}--PaddingRight: var(--#{$table}__column-help--c-button--PaddingRight);
     --#{$button}--PaddingLeft: var(--#{$table}__column-help--c-button--PaddingLeft);
 
-    margin-top: var(--#{$table}__column-help--c-button--MarginTop);
-    margin-bottom: var(--#{$table}__column-help--c-button--MarginBottom);
+    margin-block-start: var(--#{$table}__column-help--c-button--MarginTop);
+    margin-block-end: var(--#{$table}__column-help--c-button--MarginBottom);
     font-size: inherit;
     line-height: 1;
   }
@@ -1156,9 +1170,9 @@
 
     display: flex;
     width: auto;
-    margin-top: var(--#{$table}__sort__button--MarginTop);
-    margin-bottom: var(--#{$table}__sort__button--MarginBottom);
-    margin-left: var(--#{$table}__sort__button--MarginLeft);
+    margin-block-start: var(--#{$table}__sort__button--MarginTop);
+    margin-block-end: var(--#{$table}__sort__button--MarginBottom);
+    margin-inline-start: var(--#{$table}__sort__button--MarginLeft);
 
     &:hover {
       --#{$table}__sort-indicator--Color: var(--#{$table}__sort__button--hover__sort-indicator--Color);
@@ -1204,7 +1218,7 @@
 // Sort indicator
 .#{$table}__sort-indicator {
   grid-column: 2;
-  margin-left: var(--#{$table}__sort-indicator--MarginLeft);
+  margin-inline-start: var(--#{$table}__sort-indicator--MarginLeft);
   color: var(--#{$table}__sort-indicator--Color);
   pointer-events: none;
 }
@@ -1216,7 +1230,7 @@
   --#{$table}--cell--PaddingBottom: 0;
 
   position: relative;
-  border-bottom: 0 solid transparent;
+  border-block-end: 0 solid transparent;
   box-shadow: 0 0 0 0 transparent;
 
   &,
@@ -1228,7 +1242,10 @@
   td:where(.#{$table}__td),
   th:where(.#{$table}__th) {
     &.pf-m-no-padding {
-      padding: 0 0 0 var(--#{$table}__expandable-row--after--border-width--base); // set padding-left to adjust for left border.
+      padding-block-start: 0;
+      padding-inline-end: 0;
+      padding-block-end: 0;
+      padding-inline-start: var(--#{$table}__expandable-row--after--border-width--base); // set padding-left to adjust for left border.
 
       .#{$table}__expandable-row-content {
         padding: 0;
@@ -1238,14 +1255,14 @@
   // stylelint-enable
 
   .#{$table}__expandable-row-content {
-    padding-top: var(--#{$table}__expandable-row-content--PaddingTop);
-    padding-bottom: var(--#{$table}__expandable-row-content--PaddingBottom);
+    padding-block-start: var(--#{$table}__expandable-row-content--PaddingTop);
+    padding-block-end: var(--#{$table}__expandable-row-content--PaddingBottom);
   }
 
   // Modifier - Expanded tr
   &.pf-m-expanded {
-    border-bottom-color: var(--#{$table}__expandable-row--m-expanded--BorderBottomColor);
-    border-bottom-width: var(--#{$table}--border-width--base);
+    border-block-end-color: var(--#{$table}__expandable-row--m-expanded--BorderBottomColor);
+    border-block-end-width: var(--#{$table}--border-width--base);
     box-shadow: var(--#{$table}__expandable-row--m-expanded--BoxShadow);
   }
 
@@ -1352,7 +1369,7 @@
   align-items: center;
 
   > :not(:last-child) {
-    margin-right: var(--#{$table}__icon-inline--MarginRight);
+    margin-inline-end: var(--#{$table}__icon-inline--MarginRight);
   }
 }