@patternfly/patternfly 6.0.0-alpha.102 → 6.0.0-alpha.104

package/components/Check/check.css

@@ -2,7 +2,7 @@
 .pf-v6-c-check {
   --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
   --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
-  --pf-v6-c-check--Height: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
+  --pf-v6-c-check--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
   --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body);
@@ -25,7 +25,7 @@
 .pf-v6-c-check.pf-m-standalone {
   display: inline-grid;
   grid-template-columns: auto;
-  height: var(--pf-v6-c-check--Height);
+  min-height: var(--pf-v6-c-check--MinHeight);
 }
 .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
   align-self: center;

package/components/Check/check.scss

@@ -4,7 +4,7 @@
 .#{$check} {
   --#{$check}--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
   --#{$check}--AccentColor: var(--pf-t--global--color--brand--default);
-  --#{$check}--Height: calc(var(--#{$check}__label--FontSize) * var(--#{$check}__label--LineHeight));
+  --#{$check}--MinHeight: calc(var(--#{$check}__label--FontSize) * var(--#{$check}__label--LineHeight));
 
   // TODO: update to `--#{$check}--FontSize` `--#{$check}--LineHeight`
   --#{$check}__label--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -34,7 +34,7 @@
   &.pf-m-standalone {
     display: inline-grid;
     grid-template-columns: auto;
-    height: var(--#{$check}--Height);
+    min-height: var(--#{$check}--MinHeight);
 
     .#{$check}__input {
       align-self: center;

package/components/Drawer/drawer.css

@@ -3,7 +3,8 @@
   --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-drawer__content--FlexBasis: 100%;
-  --pf-v6-c-drawer__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-drawer__content--BackgroundColor: transparent;
+  --pf-v6-c-drawer__content--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-drawer__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-drawer__content--ZIndex: var(--pf-t--global--Zindex--xs);
   --pf-v6-c-drawer__panel--MinWidth: 50%;
@@ -204,12 +205,12 @@
   order: 0;
   background-color: var(--pf-v6-c-drawer__content--BackgroundColor);
 }
+.pf-v6-c-drawer__content.pf-m-primary {
+  --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-primary--BackgroundColor);
+}
 .pf-v6-c-drawer__content.pf-m-secondary {
   --pf-v6-c-drawer__content--BackgroundColor: var(--pf-v6-c-drawer__content--m-secondary--BackgroundColor);
 }
-.pf-v6-c-drawer__content.pf-m-no-background {
-  --pf-v6-c-drawer__content--BackgroundColor: transparent;
-}
 .pf-v6-c-drawer__content > .pf-v6-c-drawer__body {
   padding-block-start: var(--pf-v6-c-drawer__content__body--PaddingTop);
   padding-block-end: var(--pf-v6-c-drawer__content__body--PaddingBottom);

package/components/Drawer/drawer.scss

@@ -11,7 +11,8 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
   // Content
   --#{$drawer}__content--FlexBasis: 100%;
-  --#{$drawer}__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$drawer}__content--BackgroundColor: transparent;
+  --#{$drawer}__content--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$drawer}__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$drawer}__content--ZIndex: var(--pf-t--global--Zindex--xs);
 
@@ -266,14 +267,14 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   order: 0;
   background-color: var(--#{$drawer}__content--BackgroundColor);
   
-  &.pf-m-secondary {
-    --#{$drawer}__content--BackgroundColor: var(--#{$drawer}__content--m-secondary--BackgroundColor);
+  &.pf-m-primary {
+    --#{$drawer}__content--BackgroundColor: var(--#{$drawer}__content--m-primary--BackgroundColor);
   }
 
-  &.pf-m-no-background {
-    --#{$drawer}__content--BackgroundColor: transparent;
+  &.pf-m-secondary {
+    --#{$drawer}__content--BackgroundColor: var(--#{$drawer}__content--m-secondary--BackgroundColor);
   }
-
+  
   > .#{$drawer}__body {
     padding-block-start: var(--#{$drawer}__content__body--PaddingTop);
     padding-block-end: var(--#{$drawer}__content__body--PaddingBottom);

package/components/Page/page.css

@@ -121,19 +121,19 @@
   --pf-v6-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-t--global--border--width--button--default);
   --pf-v6-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-page__main--ZIndex: var(--pf-v6-global--ZIndex--xs);
-  --pf-v6-c-page__main--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
-  --pf-v6-c-page__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v6-c-page__main--MarginInlineStart: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-page__main--MarginInlineEnd: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-page__main--BorderRadius: var(--pf-t--global--border--radius--large);
-  --pf-v6-c-page__main--BorderWidth: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-page__main--BorderColor: var(--pf-v6-c-page__main--BackgroundColor);
+  --pf-v6-c-page__main-container--ZIndex: var(--pf-v6-global--ZIndex--xs);
+  --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
+  --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--large);
+  --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
   --pf-v6-c-page__main-section--MarginTop: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
   --pf-v6-c-page__main-section--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
   --pf-v6-c-page__main-section--PaddingBottom: 0;
-  --pf-v6-c-page__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
+  --pf-v6-c-page__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
   --pf-v6-c-page__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -161,9 +161,9 @@
   --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
   --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
   --pf-v6-c-page__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-page__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
+  --pf-v6-c-page__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
   --pf-v6-c-page__main-breadcrumb--PaddingBottom: 0;
-  --pf-v6-c-page__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
+  --pf-v6-c-page__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
   --pf-v6-c-page__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-page__main-tabs--PaddingTop: 0;
   --pf-v6-c-page__main-tabs--PaddingRight: 0;
@@ -209,7 +209,7 @@
 }
 @media (min-width: 1200px) {
   .pf-v6-c-page {
-    grid-template-areas: "header header" "nav main";
+    grid-template-areas: "header header" "sidebar main";
     grid-template-columns: max-content 1fr;
   }
 }
@@ -321,7 +321,7 @@
   z-index: var(--pf-v6-c-page__sidebar--ZIndex);
   display: flex;
   flex-direction: column;
-  grid-area: nav;
+  grid-area: sidebar;
   grid-row-start: 2;
   grid-column-start: 1;
   width: var(--pf-v6-c-page__sidebar--Width);
@@ -633,26 +633,27 @@
   }
 }
 
-.pf-v6-c-page__main {
+.pf-v6-c-page__main-container {
   align-self: start;
-  max-height: var(--pf-v6-c-page__main--MaxHeight);
+  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
   margin-block-start: 0;
-  margin-inline-start: var(--pf-v6-c-page__main--MarginInlineStart);
-  margin-inline-end: var(--pf-v6-c-page__main--MarginInlineEnd);
-  background: var(--pf-v6-c-page__main--BackgroundColor);
-  border: var(--pf-v6-c-page__main--BorderWidth) solid var(--pf-v6-c-page__main--BorderColor);
-  border-radius: var(--pf-v6-c-page__main--BorderRadius);
+  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
+  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
+  overflow: auto;
+  background: var(--pf-v6-c-page__main-container--BackgroundColor);
+  border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
+  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
 }
 
-.pf-v6-c-page__main,
+.pf-v6-c-page__main-container,
 .pf-v6-c-page__drawer {
-  z-index: var(--pf-v6-c-page__main--ZIndex);
+  z-index: var(--pf-v6-c-page__main-container--ZIndex);
   grid-area: main;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
-.pf-v6-c-page__main:focus,
+.pf-v6-c-page__main-container:focus,
 .pf-v6-c-page__drawer:focus {
   outline: 0;
 }

package/components/Page/page.scss

@@ -104,22 +104,22 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
     --#{$page}__sidebar--TranslateX: var(--#{$page}__sidebar--xl--TranslateX);
   }
 
-  // Main
-  --#{$page}__main--ZIndex: var(--#{$pf-global}--ZIndex--xs);
-  --#{$page}__main--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
-  --#{$page}__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --#{$page}__main--MarginInlineStart: var(--pf-t--global--spacer--lg);
-  --#{$page}__main--MarginInlineEnd: var(--pf-t--global--spacer--lg);
-  --#{$page}__main--BorderRadius: var(--pf-t--global--border--radius--large);
-  --#{$page}__main--BorderWidth: var(--pf-t--global--spacer--sm); // TODO Change to be a page outline token
-  --#{$page}__main--BorderColor: var(--#{$page}__main--BackgroundColor); // TODO Border should match the background to blend in - change to be a page outline token
+  // Container for the main content area (grid area)
+  --#{$page}__main-container--ZIndex: var(--#{$pf-global}--ZIndex--xs);
+  --#{$page}__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
+  --#{$page}__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$page}__main-container--MarginInlineStart: var(--pf-t--global--spacer--lg);
+  --#{$page}__main-container--MarginInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$page}__main-container--BorderRadius: var(--pf-t--global--border--radius--large);
+  --#{$page}__main-container--BorderWidth: var(--pf-t--global--spacer--sm); // TODO Change to be a page outline token
+  --#{$page}__main-container--BorderColor: var(--#{$page}__main-container--BackgroundColor); // TODO Border should match the background to blend in - change to be a page outline token
 
   // Main section
   --#{$page}__main-section--MarginTop: var(--pf-t--global--spacer--md);
   --#{$page}__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
   --#{$page}__main-section--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth)); // subtract the border of the main section - TODO, see if we can remove the need for this calc(), or possibly move it down to the property definition so a user can theme this without a calc()
   --#{$page}__main-section--PaddingBottom: 0;
-  --#{$page}__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth)); // subtract the border of the main section
+  --#{$page}__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section
   --#{$page}__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
   --#{$page}__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$page}__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -159,9 +159,9 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
   // Main section breadcrumb
   --#{$page}__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$page}__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth)); // subtract the border of the main section
+  --#{$page}__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section
   --#{$page}__main-breadcrumb--PaddingBottom: 0;
-  --#{$page}__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth)); // subtract the border of the main section
+  --#{$page}__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section
   --#{$page}__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 
   // Main section tabs
@@ -192,7 +192,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   @media (min-width: $pf-v5-global--breakpoint--xl) {
     grid-template-areas:
       "header header"
-      "nav main";
+      "sidebar main";
     grid-template-columns: max-content 1fr;
     }
 }
@@ -316,7 +316,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   z-index: var(--#{$page}__sidebar--ZIndex);
   display: flex;
   flex-direction: column;
-  grid-area: nav;
+  grid-area: sidebar;
   grid-row-start: 2;
   grid-column-start: 1;
   width: var(--#{$page}__sidebar--Width);
@@ -492,20 +492,21 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 }
 
 // Main & Drawer
-.#{$page}__main {
+.#{$page}__main-container {
   align-self: start;
-  max-height: var(--#{$page}__main--MaxHeight);
+  max-height: var(--#{$page}__main-container--MaxHeight);
   margin-block-start: 0;
-  margin-inline-start: var(--#{$page}__main--MarginInlineStart);
-  margin-inline-end: var(--#{$page}__main--MarginInlineEnd);
-  background: var(--#{$page}__main--BackgroundColor);
-  border: var(--#{$page}__main--BorderWidth) solid var(--#{$page}__main--BorderColor);
-  border-radius: var(--#{$page}__main--BorderRadius);
+  margin-inline-start: var(--#{$page}__main-container--MarginInlineStart);
+  margin-inline-end: var(--#{$page}__main-container--MarginInlineEnd);
+  overflow: auto;
+  background: var(--#{$page}__main-container--BackgroundColor);
+  border: var(--#{$page}__main-container--BorderWidth) solid var(--#{$page}__main-container--BorderColor);
+  border-radius: var(--#{$page}__main-container--BorderRadius);
 }
 
-.#{$page}__main,
+.#{$page}__main-container,
 .#{$page}__drawer {
-  z-index: var(--#{$page}__main--ZIndex);
+  z-index: var(--#{$page}__main-container--ZIndex);
   grid-area: main;
   overflow-x: hidden;
   overflow-y: auto;

package/components/Table/table.css

@@ -110,63 +110,38 @@
   --pf-v6-c-table__button--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-table__button--hover--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-table__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
-  --pf-v6-c-table--m-compact__toggle--PaddingTop: 0;
-  --pf-v6-c-table--m-compact__toggle--PaddingBottom: 0;
   --pf-v6-c-table__check--PaddingLeft: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__check--PaddingRight: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__favorite--c-button--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-table--cell--m-favorite--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-table__favorite--m-favorited--c-button--Color: var(--pf-t--global--color--favorite--clicked);
-  --pf-v6-c-table__favorite--m-favorited--c-button--hover--Color: var(--pf-t--global--color--favorite--clicked);
-  --pf-v6-c-table__sort--m-favorite__button__text--Color: var(--pf-t--global--text--color--subtle);
-  --pf-v6-c-table__sort--m-favorite__button--hover__text--Color: var(--pf-t--global--text--color--regular);
-  --pf-v6-c-table__draggable--c-button--MarginTop: calc(var(--pf-v6-c-button--PaddingTop) * -1);
-  --pf-v6-c-table__draggable--c-button--MarginRight: calc(var(--pf-v6-c-button--PaddingRight) * -1);
-  --pf-v6-c-table__draggable--c-button--MarginBottom: calc(var(--pf-v6-c-button--PaddingBottom) * -1);
-  --pf-v6-c-table__draggable--c-button--MarginLeft: calc(var(--pf-v6-c-button--PaddingLeft) * -1);
   --pf-v6-c-table__tr--m-ghost-row--Opacity: .4;
   --pf-v6-c-table__tr--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-table__action--PaddingTop: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__action--PaddingBottom: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__action--PaddingLeft: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__action--PaddingRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-table__inline-edit-action--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-table__inline-edit-action--PaddingBottom: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__expandable-row--Transition: var(--pf-v6-global--Transition);
   --pf-v6-c-table__expandable-row-content--PaddingTop: var(--pf-t--global--spacer--md);
   --pf-v6-c-table__expandable-row-content--PaddingBottom: var(--pf-t--global--spacer--md);
   --pf-v6-c-table__expandable-row-content--PaddingLeft: var(--pf-t--global--spacer--md);
   --pf-v6-c-table__expandable-row-content--PaddingRight: var(--pf-t--global--spacer--md);
   --pf-v6-c-table__expandable-row-content--BorderRadius: var(--pf-t--global--border--radius--small);
-  --pf-v6-c-table__expandable-row-content--Transition: var(--pf-v6-global--Transition);
   --pf-v6-c-table__control-row--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-table__control-row--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-table__control-row__tbody--BorderBottomColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-table__icon-inline--MarginRight: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__sort--MinWidth: calc(6ch + var(--pf-v6-c-table--cell--PaddingRight) + var(--pf-v6-c-table--cell--PaddingLeft) + var(--pf-v6-c-table__sort-indicator--MarginLeft));
-  --pf-v6-c-table__sort__button--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-table__sort__button--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-table__sort__button--PaddingLeft: var(--pf-t--global--spacer--md);
-  --pf-v6-c-table__sort__button--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-table__sort__button--MarginBottom: calc(var(--pf-v6-c-table__sort__button--PaddingBottom) * -1);
-  --pf-v6-c-table__sort__button--MarginLeft: calc(var(--pf-v6-c-table__sort__button--PaddingLeft) * -1);
-  --pf-v6-c-table__sort__button--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-table__sort--m-selected__button--Color: var(--pf-t--global--color--brand--clicked);
   --pf-v6-c-table__sort--m-help--MinWidth: 15ch;
   --pf-v6-c-table__sort__button__text--Color: currentcolor;
   --pf-v6-c-table__sort__button--hover__text--Color: currentcolor;
-  --pf-v6-c-table__sort--cell--PaddingLeft: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-table__sort--cell--PaddingRight: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__sort-indicator--Color: var(--pf-t--global--icon--color--subtle);
   --pf-v6-c-table__sort-indicator--MarginLeft: var(--pf-t--global--spacer--md);
   --pf-v6-c-table__sort--m-selected__sort-indicator--Color: var(--pf-t--global--color--brand--clicked);
   --pf-v6-c-table__sort__button--hover__sort-indicator--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-table__th--m-help--MinWidth: 11ch;
   --pf-v6-c-table__column-help--MarginLeft: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-table__column-help--c-button--MarginTop: calc(var(--pf-v6-c-button--PaddingTop) * -1);
-  --pf-v6-c-table__column-help--c-button--MarginBottom: calc(var(--pf-v6-c-button--PaddingBottom) * -1);
-  --pf-v6-c-table__column-help--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-table__column-help--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
   --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover);
@@ -174,39 +149,30 @@
   --pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-table__compound-expansion-toggle__button--after--BorderTopWidth: 0;
-  --pf-v6-c-table__compound-expansion-toggle__button--hover--BorderColor: var(--pf-t--global--border--color--hover);
   --pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderTopWidth: var(--pf-t--global--border--width--strong);
   --pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderTopWidth: var(--pf-t--global--border--width--strong);
   --pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
   --pf-v6-c-table--m-compact__th--PaddingTop: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs));
   --pf-v6-c-table--m-compact__th--PaddingBottom: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table--m-compact--cell--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-table--m-compact--cell--PaddingRight: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table--m-compact--cell--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-table--m-compact--cell--PaddingLeft: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table--m-compact__action--PaddingTop: var(--pf-t--global--spacer--xs);
   --pf-v6-c-table--m-compact__action--PaddingBottom: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-table--m-expandable__tbody--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
-  --pf-v6-c-table--m-expandable__tbody--BorderBottomColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-table__tr--m-clickable--BackgroundColor: transparent;
   --pf-v6-c-table__tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
   --pf-v6-c-table__tr--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
-  --pf-v6-c-table__tr--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
   --pf-v6-c-table__tr--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
   --pf-v6-c-table__tr--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
   --pf-v6-c-table__tbody--m-clickable--BackgroundColor: transparent;
   --pf-v6-c-table__tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
   --pf-v6-c-table__tbody--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
   --pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
-  --pf-v6-c-table__tbody--m-clickable--m-expanded--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-table__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
   --pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
   --pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
   --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingTop: var(--pf-t--global--spacer--xs);
   --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-table__subhead--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-table__subhead--PaddingRight: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__subhead--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-table__nested-column-header__button--PaddingLeft: calc(var(--pf-v6-c-table__button--PaddingLeft) - var(--pf-t--global--spacer--sm));
   --pf-v6-c-table__nested-column-header__button--PaddingRight: calc(var(--pf-v6-c-table__button--PaddingRight) - var(--pf-t--global--spacer--xs));
@@ -695,7 +661,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
 }
 .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__button {
   --pf-v6-c-table__sort-indicator--Color: var(--pf-v6-c-table__sort--m-selected__sort-indicator--Color);
-  --pf-v6-c-table__sort__button__text--Color: var(--pf-v6-c-table__sort--m-selected__button__text--Color);
   color: var(--pf-v6-c-table__sort--m-selected__button--Color);
 }
 .pf-v6-c-table__sort.pf-m-help {
@@ -709,7 +674,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   grid-column: 2;
   align-self: end;
   margin-inline-start: var(--pf-v6-c-table__sort-indicator--MarginLeft);
-  font-size: var(--pf-v6-c-table__sort-indicator--FontSize);
   color: var(--pf-v6-c-table__sort-indicator--Color);
   pointer-events: none;
 }
@@ -742,7 +706,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   padding-block-end: var(--pf-v6-c-table__expandable-row-content--PaddingBottom);
   padding-inline-start: var(--pf-v6-c-table__expandable-row-content--PaddingLeft);
   padding-inline-end: var(--pf-v6-c-table__expandable-row-content--PaddingRight);
-  background-color: var(--pf-v6-c-table__expandable-row-content--BackgroundColor);
   border-radius: var(--pf-v6-c-table__expandable-row-content--BorderRadius);
 }
 .pf-v6-c-table__expandable-row.pf-m-expanded {

package/components/Table/table.scss

@@ -95,10 +95,6 @@
   --#{$table}__button--hover--Color: var(--pf-t--global--text--color--regular);
   --#{$table}__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
 
-  // * Table compact
-  --#{$table}--m-compact__toggle--PaddingTop: 0;
-  --#{$table}--m-compact__toggle--PaddingBottom: 0;
-
   // * Table check
   --#{$table}__check--PaddingLeft: var(--pf-t--global--spacer--sm);
   --#{$table}__check--PaddingRight: var(--pf-t--global--spacer--sm);
@@ -107,15 +103,6 @@
   --#{$table}__favorite--c-button--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$table}--cell--m-favorite--Color: var(--pf-t--global--text--color--subtle);
   --#{$table}__favorite--m-favorited--c-button--Color: var(--pf-t--global--color--favorite--clicked);
-  --#{$table}__favorite--m-favorited--c-button--hover--Color: var(--pf-t--global--color--favorite--clicked);
-  --#{$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 draggable button
-  --#{$table}__draggable--c-button--MarginTop: calc(var(--#{$button}--PaddingTop) * -1);
-  --#{$table}__draggable--c-button--MarginRight: calc(var(--#{$button}--PaddingRight) * -1);
-  --#{$table}__draggable--c-button--MarginBottom: calc(var(--#{$button}--PaddingBottom) * -1);
-  --#{$table}__draggable--c-button--MarginLeft: calc(var(--#{$button}--PaddingLeft) * -1);
 
   // * Table ghost row
   --#{$table}__tr--m-ghost-row--Opacity: .4;
@@ -127,10 +114,6 @@
   --#{$table}__action--PaddingLeft: var(--pf-t--global--spacer--sm);
   --#{$table}__action--PaddingRight: var(--pf-t--global--spacer--sm);
 
-  // * Table inline edit action
-  --#{$table}__inline-edit-action--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$table}__inline-edit-action--PaddingBottom: var(--pf-t--global--spacer--sm);
-
   // * Table expandable row
   --#{$table}__expandable-row--Transition: var(--#{$pf-global}--Transition); // TODO: update to token when available
 
@@ -140,7 +123,6 @@
   --#{$table}__expandable-row-content--PaddingLeft: var(--pf-t--global--spacer--md);
   --#{$table}__expandable-row-content--PaddingRight: var(--pf-t--global--spacer--md);
   --#{$table}__expandable-row-content--BorderRadius: var(--pf-t--global--border--radius--small);
-  --#{$table}__expandable-row-content--Transition: var(--#{$pf-global}--Transition); // TODO: update to token when available
 
   // * Table control row
   --#{$table}__control-row--BackgroundColor: var(--pf-t--global--background--color--primary--default);
@@ -152,15 +134,6 @@
 
   // * Table sort cell
   --#{$table}__sort--MinWidth: calc(6ch + var(--#{$table}--cell--PaddingRight) + var(--#{$table}--cell--PaddingLeft) + var(--#{$table}__sort-indicator--MarginLeft));
-
-  // * Table sort button
-  --#{$table}__sort__button--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$table}__sort__button--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$table}__sort__button--PaddingLeft: var(--pf-t--global--spacer--md);
-  --#{$table}__sort__button--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$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-t--global--text--color--regular);
   --#{$table}__sort--m-selected__button--Color: var(--pf-t--global--color--brand--clicked);
   --#{$table}__sort--m-help--MinWidth: 15ch;
 
@@ -168,10 +141,6 @@
   --#{$table}__sort__button__text--Color: currentcolor;
   --#{$table}__sort__button--hover__text--Color: currentcolor;
 
-  // * Table sort cell
-  --#{$table}__sort--cell--PaddingLeft: var(--pf-t--global--spacer--xs);
-  --#{$table}__sort--cell--PaddingRight: var(--pf-t--global--spacer--sm);
-
   // * Table sort indicator
   --#{$table}__sort-indicator--Color: var(--pf-t--global--icon--color--subtle);
   --#{$table}__sort-indicator--MarginLeft: var(--pf-t--global--spacer--md);
@@ -183,10 +152,6 @@
 
   // * Table header popover
   --#{$table}__column-help--MarginLeft: var(--pf-t--global--spacer--sm);
-  --#{$table}__column-help--c-button--MarginTop: calc(var(--#{$button}--PaddingTop) * -1);
-  --#{$table}__column-help--c-button--MarginBottom: calc(var(--#{$button}--PaddingBottom) * -1);
-  --#{$table}__column-help--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
-  --#{$table}__column-help--c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
 
   // * Table compound expansion toggle button
   --#{$table}__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
@@ -198,7 +163,6 @@
   // * Table compound expansion toggle button after
   --#{$table}__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
   --#{$table}__compound-expansion-toggle__button--after--BorderTopWidth: 0;
-  --#{$table}__compound-expansion-toggle__button--hover--BorderColor: var(--pf-t--global--border--color--hover);
   --#{$table}__compound-expansion-toggle__button--hover--after--BorderTopWidth: var(--pf-t--global--border--width--strong);
   --#{$table}__compound-expansion-toggle--m-expanded__button--after--BorderTopWidth: var(--pf-t--global--border--width--strong);
 
@@ -211,18 +175,12 @@
 
   // * Table compact cell
   --#{$table}--m-compact--cell--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$table}--m-compact--cell--PaddingRight: var(--pf-t--global--spacer--sm);
   --#{$table}--m-compact--cell--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$table}--m-compact--cell--PaddingLeft: var(--pf-t--global--spacer--sm);
 
   // * Table compact action
   --#{$table}--m-compact__action--PaddingTop: var(--pf-t--global--spacer--xs);
   --#{$table}--m-compact__action--PaddingBottom: var(--pf-t--global--spacer--xs);
 
-  // * Table expandable tbody
-  --#{$table}--m-expandable__tbody--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
-  --#{$table}--m-expandable__tbody--BorderBottomColor: var(--pf-t--global--border--color--default);
-
   // * Table expandable row expanded
   --#{$table}__expandable-row--m-expanded--BorderBottomColor: var(--pf-t--global--border--color--default);
 
@@ -230,7 +188,6 @@
   --#{$table}__tr--m-clickable--BackgroundColor: transparent;
   --#{$table}__tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
   --#{$table}__tr--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
-  --#{$table}__tr--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
 
   // * Table tr selected
   --#{$table}__tr--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
@@ -241,7 +198,6 @@
   --#{$table}__tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
   --#{$table}__tbody--m-clickable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
   --#{$table}__tbody--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
-  --#{$table}__tbody--m-clickable--m-expanded--BorderColor: var(--pf-t--global--border--color--clicked);
 
   // * Table tbody selected
   --#{$table}__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
@@ -253,8 +209,6 @@
   --#{$table}__thead--m-nested-column-header__tr--PaddingBottom: var(--pf-t--global--spacer--md);
 
   // * Table subhead
-  --#{$table}__subhead--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --#{$table}__subhead--PaddingRight: var(--pf-t--global--spacer--sm);
   --#{$table}__subhead--Color: var(--pf-t--global--text--color--subtle);
 
   // * Table subhead button
@@ -942,7 +896,6 @@
 
   &.pf-m-selected .#{$table}__button {
     --#{$table}__sort-indicator--Color: var(--#{$table}__sort--m-selected__sort-indicator--Color);
-    --#{$table}__sort__button__text--Color: var(--#{$table}__sort--m-selected__button__text--Color);
 
     // override state colors on text
     color: var(--#{$table}__sort--m-selected__button--Color);
@@ -964,7 +917,6 @@
   grid-column: 2;
   align-self: end;
   margin-inline-start: var(--#{$table}__sort-indicator--MarginLeft); // TODO: update this to gap
-  font-size: var(--#{$table}__sort-indicator--FontSize);
   color: var(--#{$table}__sort-indicator--Color);
   pointer-events: none;
 }
@@ -1006,7 +958,6 @@
     padding-block-end: var(--#{$table}__expandable-row-content--PaddingBottom);
     padding-inline-start: var(--#{$table}__expandable-row-content--PaddingLeft);
     padding-inline-end: var(--#{$table}__expandable-row-content--PaddingRight);
-    background-color: var(--#{$table}__expandable-row-content--BackgroundColor);
     border-radius: var(--#{$table}__expandable-row-content--BorderRadius);
   }
 

package/docs/components/Drawer/examples/Drawer.md

@@ -775,7 +775,8 @@ cssPrefix: pf-v6-c-drawer
 | `.pf-m-no-border` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel border treatment to disable all border treatment. |
 | `.pf-m-padding` | `.pf-v6-c-drawer__body` | Modifies the element to add padding. |
 | `.pf-m-no-padding` | `.pf-v6-c-drawer__body` | Modifies the element to remove padding. |
-| `.pf-m-no-background` | `.pf-v6-c-drawer__section`, `.pf-v6-c-drawer__content`, `.pf-v6-c-drawer__panel` | Modifies the drawer element background color to transparent. |
+| `.pf-m-no-background` | `.pf-v6-c-drawer__section`, `.pf-v6-c-drawer__panel` | Modifies the drawer element background color to transparent. |
+| `.pf-m-primary` | `.pf-v6-c-drawer__content` | Modifies the drawer content to use the primary background color. |
 | `.pf-m-secondary` | `.pf-v6-c-drawer__section`, `.pf-v6-c-drawer__content`, `.pf-v6-c-drawer__panel` | Modifies the drawer element to use the secondary background color. |
 | `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 | `.pf-m-resizable` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel to be resizable. Intended for use with the `.pf-v6-c-drawer__splitter` element. |