@patternfly/patternfly 5.2.0-prerelease.3 → 6.0.0-alpha.10

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
@@ -106,23 +106,22 @@
   --#{$table}--m-compact__toggle--PaddingBottom: 0;
 
   // Check
-  --#{$table}__check--input--MarginTop: #{pf-size-prem(3px)};
-  --#{$table}__thead__check--input--TranslateY: var(--#{$table}__check--input--MarginTop);
-  --#{$table}__check--input--FontSize: var(--#{$pf-global}--FontSize--md);
+  --#{$table}__check--input--MarginTop: #{pf-size-prem(4px)};
+  --#{$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);
@@ -132,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;
@@ -159,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);
@@ -175,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
@@ -186,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;
@@ -205,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);
@@ -220,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);
@@ -236,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);
@@ -247,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)};
@@ -304,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);
@@ -682,38 +684,32 @@
     }
   }
 
+  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
@@ -993,17 +989,12 @@
   }
 
   label {
-    display: inline-flex;
+    display: block;
     padding: inherit;
     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);
-
-  }
-
-  @at-root .#{$table}__thead .#{$check}.pf-m-standalone {
-    --#{$check}__input--TranslateY: var(--#{$table}__thead__check--input--TranslateY);
   }
 }
 

package/components/Toolbar/toolbar.css

@@ -47,9 +47,8 @@
   }
 }
 
-.pf-v5-c-toolbar {
+:root {
   --pf-v5-c-toolbar--AlignItems--base: flex-start;
-  --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-toolbar--RowGap--base: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-toolbar--RowGap: var(--pf-v5-c-toolbar--RowGap--base);
   --pf-v5-c-toolbar--PaddingTop: var(--pf-v5-global--spacer--md);
@@ -115,9 +114,6 @@
   --pf-v5-c-toolbar__item--m-label--spacer: var(--pf-v5-c-toolbar__item--spacer);
   --pf-v5-c-toolbar__item--m-label--TranslateY: var(--pf-v5-global--spacer--form-element);
   --pf-v5-c-toolbar__item--m-label--FontWeight: var(--pf-v5-global--FontWeight--bold);
-  --pf-v5-c-toolbar__item--m-form-element--spacer: var(--pf-v5-c-toolbar__item--spacer);
-  --pf-v5-c-toolbar__item--m-form-element--TranslateY: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-toolbar__item--m-form-element--FontWeight: var(--pf-v5-global--FontWeight--bold);
   --pf-v5-c-toolbar__item--m-form-control--TranslateY: var(--pf-v5-global--spacer--form-element);
   --pf-v5-c-toolbar__expandable-content__item--m-label--MarginBottom: calc(-1 * var(--pf-v5-c-toolbar__expandable-content--m-expanded--GridRowGap) + var(--pf-v5-global--spacer--sm));
   --pf-v5-c-toolbar__expandable-content__item--m-label--FontSize: var(--pf-v5-global--FontSize--sm);
@@ -127,6 +123,9 @@
   --pf-v5-c-toolbar--m-full-height--PaddingBottom: 0;
   --pf-v5-c-toolbar--m-full-height__item--Display: flex;
   --pf-v5-c-toolbar--m-full-height__item--AlignItems: center;
+}
+
+.pf-v5-c-toolbar {
   position: relative;
   display: grid;
   row-gap: var(--pf-v5-c-toolbar--RowGap);
@@ -364,12 +363,7 @@
 .pf-v5-c-toolbar__item.pf-m-label {
   --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__item--m-label--spacer);
   font-weight: var(--pf-v5-c-toolbar__item--m-label--FontWeight);
-  transform: translateY(var(--pf-v5-c-toolbar__item--m-label--TranslateY));
-}
-.pf-v5-c-toolbar__item.pf-m-form-element {
-  --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__item--m-form-element--spacer);
-  font-weight: var(--pf-v5-c-toolbar__item--m-form-element--FontWeight);
-  transform: translateY(var(--pf-v5-c-toolbar__item--m-form-element--TranslateY));
+  transform: translateY(var(--pf-v5-global--spacer--form-element));
 }
 .pf-v5-c-toolbar__item.pf-m-pagination {
   margin-inline-start: auto;

package/components/Toolbar/toolbar.scss

@@ -5,9 +5,8 @@ $pf-v5-c-toolbar--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg",
 $pf-v5-c-toolbar--spacer-map: build-spacer-map("none", "sm", "md", "lg");
 $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
-.#{$toolbar} {
+:root {
   --#{$toolbar}--AlignItems--base: flex-start;
-  --#{$toolbar}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
   --#{$toolbar}--RowGap--base: var(--#{$pf-global}--spacer--lg); // row-gap between toolbar content elements
   --#{$toolbar}--RowGap: var(--#{$toolbar}--RowGap--base);
   --#{$toolbar}--PaddingTop: var(--#{$pf-global}--spacer--md);
@@ -117,16 +116,11 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
 
   // Label
   --#{$toolbar}__item--m-label--spacer: var(--#{$toolbar}__item--spacer);
-  --#{$toolbar}__item--m-label--TranslateY: var(--#{$pf-global}--spacer--form-element);
+  --#{$toolbar}__item--m-label--TranslateY: var(--pf-v5-global--spacer--form-element);
   --#{$toolbar}__item--m-label--FontWeight: var(--#{$pf-global}--FontWeight--bold);
 
-  // Form control inline
-  --#{$toolbar}__item--m-form-element--spacer: var(--#{$toolbar}__item--spacer);
-  --#{$toolbar}__item--m-form-element--TranslateY: var(--#{$pf-global}--spacer--form-element);
-  --#{$toolbar}__item--m-form-element--FontWeight: var(--#{$pf-global}--FontWeight--bold);
-
   // Input
-  --#{$toolbar}__item--m-form-control--TranslateY: var(--#{$pf-global}--spacer--form-element);
+  --#{$toolbar}__item--m-form-control--TranslateY: var(--pf-v5-global--spacer--form-element);
 
   // Label in expanded content
   --#{$toolbar}__expandable-content__item--m-label--MarginBottom: calc(-1 * var(--#{$toolbar}__expandable-content--m-expanded--GridRowGap) + var(--#{$pf-global}--spacer--sm));
@@ -143,7 +137,9 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   --#{$toolbar}--m-full-height--PaddingBottom: 0;
   --#{$toolbar}--m-full-height__item--Display: flex;
   --#{$toolbar}--m-full-height__item--AlignItems: center;
+}
 
+.#{$toolbar} {
   @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
     --#{$toolbar}__expandable-content--PaddingRight: var(--#{$toolbar}__expandable-content--lg--PaddingRight);
     --#{$toolbar}__expandable-content--PaddingBottom: var(--#{$toolbar}__expandable-content--lg--PaddingBottom);
@@ -168,7 +164,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
 
   &.pf-m-sticky {
     position: sticky;
-   inset-block-start: 0;
+    inset-block-start: 0;
     z-index: var(--#{$toolbar}--m-sticky--ZIndex);
     box-shadow: var(--#{$toolbar}--m-sticky--BoxShadow);
   }
@@ -384,15 +380,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
     --#{$toolbar}--spacer: var(--#{$toolbar}__item--m-label--spacer);
 
     font-weight: var(--#{$toolbar}__item--m-label--FontWeight);
-    transform: translateY(var(--#{$toolbar}__item--m-label--TranslateY));
-  }
-
-  // Form element
-  &.pf-m-form-element {
-    --#{$toolbar}--spacer: var(--#{$toolbar}__item--m-form-element--spacer);
-
-    font-weight: var(--#{$toolbar}__item--m-form-element--FontWeight);
-    transform: translateY(var(--#{$toolbar}__item--m-form-element--TranslateY));
+    transform: translateY(var(--#{$pf-global}--spacer--form-element));
   }
 
   // Total items

package/docs/components/Alert/examples/Alert.md

@@ -392,7 +392,7 @@ cssPrefix: ['pf-v5-c-alert','pf-v5-c-alert-group']
   </div>
   <p class="pf-v5-c-alert__title">
     <span class="pf-v5-screen-reader">Success alert:</span>
-    Success alert title
+    Success alert title (inline)
   </p>
 </div>
 

package/docs/components/Brand/examples/Brand.md

@@ -1,91 +1,48 @@
 ---
 id: Brand
 section: components
----import './Brand.css'
-
-## Examples
+---## Examples
 
 ### Basic
 
 ```html
-<div class="show-light">
-  <img
-    class="pf-v5-c-brand"
-    src="/assets/images/pf_logo.svg"
-    alt="PatternFly logo"
-  />
-</div>
-
-<div class="show-dark">
-  <img
-    class="pf-v5-c-brand"
-    src="/assets/images/pf_logo_white.svg"
-    alt="PatternFly logo"
-  />
-</div>
+<img
+  class="pf-v5-c-brand"
+  src="/assets/images/pf_logo.svg"
+  alt="PatternFly logo"
+/>
 
 ```
 
 ### Responsive
 
 ```html
-<div class="show-light">
-  <picture
-    class="pf-v5-c-brand pf-m-picture"
-    style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-sm: 60px; --pf-v5-c-brand--Width-on-md: 220px;"
-  >
-    <source
-      media="(min-width: 1200px)"
-      srcset="/assets/images/pf-c-brand__logo-on-xl.svg"
-    />
-    <source
-      media="(min-width: 992px)"
-      srcset="/assets/images/pf-c-brand__logo-on-lg.svg"
-    />
-    <source
-      media="(min-width: 768px)"
-      srcset="/assets/images/pf-c-brand__logo-on-md.svg"
-    />
-    <source
-      media="(min-width: 576px)"
-      srcset="/assets/images/pf-c-brand__logo-on-sm.svg"
-    />
-    <source srcset="/assets/images/pf-c-brand__logo.svg" />
-    <img
-      src="/assets/images/pf_logo.svg"
-      alt="Fallback patternFly default logo"
-    />
-  </picture>
-</div>
-
-<div class="show-dark">
-  <picture
-    class="pf-v5-c-brand pf-m-picture"
-    style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-sm: 60px; --pf-v5-c-brand--Width-on-md: 220px;"
-  >
-    <source
-      media="(min-width: 1200px)"
-      srcset="/assets/images/pf-c-brand__logo-on-xl-white.svg"
-    />
-    <source
-      media="(min-width: 992px)"
-      srcset="/assets/images/pf-c-brand__logo-on-lg-white.svg"
-    />
-    <source
-      media="(min-width: 768px)"
-      srcset="/assets/images/pf-c-brand__logo-on-md-white.svg"
-    />
-    <source
-      media="(min-width: 576px)"
-      srcset="/assets/images/pf-c-brand__logo-on-sm-white.svg"
-    />
-    <source srcset="/assets/images/pf-c-brand__logo-white.svg" />
-    <img
-      src="/assets/images/pf_logo-white.svg"
-      alt="Fallback patternFly default logo"
-    />
-  </picture>
-</div>
+<picture
+  class="pf-v5-c-brand pf-m-picture"
+  style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-sm: 60px; --pf-v5-c-brand--Width-on-md: 220px;"
+>
+  <source
+    media="(min-width: 1200px)"
+    srcset="/assets/images/pf-c-brand__logo-on-xl.svg"
+  />
+  <source
+    media="(min-width: 992px)"
+    srcset="/assets/images/pf-c-brand__logo-on-lg.svg"
+  />
+  <source
+    media="(min-width: 768px)"
+    srcset="/assets/images/pf-c-brand__logo-on-md.svg"
+  />
+  <source
+    media="(min-width: 576px)"
+    srcset="/assets/images/pf-c-brand__logo-on-sm.svg"
+  />
+  <source srcset="/assets/images/pf-c-brand__logo.svg" />
+  <img
+    src="/assets/images/pf-c-brand__logo-base.jpg"
+    alt="Fallback patternFly default logo"
+  />
+</picture>
 
 ```