@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.70

package/components/Pagination/pagination.scss

@@ -2,49 +2,25 @@
 $pf-v5-c-pagination--breakpoint-map: build-breakpoint-map();
 $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
-.#{$pagination} {
+:where(:root),
+:where(.#{$pagination}) {
   --#{$pagination}--inset: 0;
-  --#{$pagination}--PaddingRight: var(--#{$pagination}--inset);
-  --#{$pagination}--PaddingLeft: var(--#{$pagination}--inset);
+  --#{$pagination}--ColumnGap: var(--pf-t--global--spacer--lg);
 
   // Page insets
-  --#{$pagination}--m-page-insets--inset: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-page-insets--xl--inset: var(--#{$pf-global}--spacer--lg);
-
-  // children
-  --#{$pagination}--child--MarginRight: var(--#{$pf-global}--spacer--lg);
-  --#{$pagination}--m-bottom--child--MarginRight: 0;
-  --#{$pagination}--m-bottom--child--md--MarginRight: var(--#{$pf-global}--spacer--lg);
-  --#{$pagination}--m-compact--child--MarginRight: var(--#{$pf-global}--spacer--sm);
-
-  // dropdown
-  --#{$pagination}--c-menu-toggle--FontSize: var(--#{$pf-global}--FontSize--sm);
+  --#{$pagination}--m-page-insets--inset: var(--pf-t--global--spacer--md);
+  --#{$pagination}--m-page-insets--xl--inset: var(--pf-t--global--spacer--lg);
 
   // nav
   --#{$pagination}__nav--Display: none;
   --#{$pagination}--m-display-summary__nav--Display: none;
   --#{$pagination}--m-display-full__nav--Display: inline-flex;
-
-  // nav control
-  --#{$pagination}__nav-control--c-button--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$pagination}__nav-control--c-button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$pagination}__nav-control--c-button--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$pagination}--m-bottom__nav-control--c-button--OutlineOffset: calc(var(--#{$pf-global}--spacer--xs) * -1);
-  --#{$pagination}--m-bottom__nav-control--c-button--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-bottom__nav-control--c-button--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-bottom__nav-control--c-button--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-bottom__nav-control--c-button--md--PaddingTop: var(--#{$pf-global}--spacer--form-element);
-  --#{$pagination}--m-bottom__nav-control--c-button--md--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$pagination}--m-bottom__nav-control--c-button--md--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
-  --#{$pagination}--m-bottom__nav-control--c-button--md--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$pagination}--m-compact__nav-control--nav-control--MarginLeft: var(--#{$pf-global}--spacer--md);
+  --#{$pagination}__nav--ColumnGap: var(--pf-t--global--spacer--sm);
 
   // nav page select
-  --#{$pagination}__nav-page-select--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$pagination}__nav-page-select--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}__nav-page-select--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}__nav-page-select--child--MarginRight: var(--#{$pf-global}--spacer--xs);
-  --#{$pagination}__nav-page-select--c-form-control--width-base: calc(var(--#{$pf-global}--spacer--sm) * 2 + var(--#{$pf-global}--BorderWidth--sm) * 2);
+  --#{$pagination}__nav-page-select--FontSize: var(--pf-t--global--font--size--body--md);
+  --#{$pagination}__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
+  --#{$pagination}__nav-page-select--c-form-control--width-base: calc(var(--pf-t--global--spacer--sm) * 2 + var(--pf-t--global--border--width--100) * 2); // TODO: replace border width token with semantic token
   --#{$pagination}__nav-page-select--c-form-control--width-chars: 2;
   --#{$pagination}__nav-page-select--c-form-control--Width: calc(var(--#{$pagination}__nav-page-select--c-form-control--width-base) + (var(--#{$pagination}__nav-page-select--c-form-control--width-chars) * 1ch));
 
@@ -54,89 +30,69 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
   --#{$pagination}--m-display-full__total-items--Display: none;
 
   // top
-  --#{$pagination}--m-sticky--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$pagination}--m-sticky--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-bottom);
-  --#{$pagination}--m-sticky--md--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-sticky--md--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-sticky--md--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-sticky--md--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-sticky--ZIndex: var(--#{$pf-global}--ZIndex--xs);
+  --#{$pagination}--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$pagination}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
+  --#{$pagination}--m-sticky--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$pagination}--m-sticky--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$pagination}--m-sticky--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$pagination}--m-sticky--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$pagination}--m-sticky--ZIndex: 100; // TODO: replace with z-index token
   --#{$pagination}--m-sticky--Top: 0;
 
   // bottom
-  --#{$pagination}--m-bottom--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$pagination}--m-bottom--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top);
+  --#{$pagination}--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$pagination}--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
   --#{$pagination}--m-bottom--Bottom: 0;
-  --#{$pagination}--m-bottom--md--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-bottom--md--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-bottom--md--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-bottom--md--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$pagination}--m-bottom--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$pagination}--m-bottom--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top);
+  --#{$pagination}--m-bottom--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$pagination}--m-bottom--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$pagination}--m-bottom--md--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$pagination}--m-bottom--md--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$pagination}--m-bottom--xl--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$pagination}--m-bottom--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
 
   // options menu
-  --#{$pagination}--c-menu-toggle--Display: none;
-  --#{$pagination}--m-display-summary--c-menu-toggle--Display: none;
-  --#{$pagination}--m-display-full--c-menu-toggle--Display: inline-flex;
+  --#{$pagination}__page-menu--Display: none;
+  --#{$pagination}--m-display-summary__page-menu--Display: none;
+  --#{$pagination}--m-display-full__page-menu--Display: inline-flex;
 
   @media screen and (min-width: $pf-v5-global--breakpoint--md) {
-    --#{$pagination}--m-bottom__nav-control--c-button--PaddingTop: var(--#{$pagination}--m-bottom__nav-control--c-button--md--PaddingTop);
-    --#{$pagination}--m-bottom__nav-control--c-button--PaddingRight: var(--#{$pagination}--m-bottom__nav-control--c-button--md--PaddingRight);
-    --#{$pagination}--m-bottom__nav-control--c-button--PaddingBottom: var(--#{$pagination}--m-bottom__nav-control--c-button--md--PaddingBottom);
-    --#{$pagination}--m-bottom__nav-control--c-button--PaddingLeft: var(--#{$pagination}--m-bottom__nav-control--c-button--md--PaddingLeft);
-    --#{$pagination}--m-bottom--child--MarginRight: var(--#{$pagination}--m-bottom--child--md--MarginRight);
-    --#{$pagination}--m-bottom__nav-control--c-button--OutlineOffset: 0;
     --#{$pagination}--m-bottom--BoxShadow: none;
-    --#{$pagination}--c-menu-toggle--Display: inline-flex;
+    --#{$pagination}__page-menu--Display: inline-flex;
     --#{$pagination}__nav--Display: inline-flex;
     --#{$pagination}__total-items--Display: none;
   }
 
   @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
-    --#{$pagination}--m-bottom--md--PaddingRight: var(--#{$pagination}--m-bottom--xl--PaddingRight);
-    --#{$pagination}--m-bottom--md--PaddingLeft: var(--#{$pagination}--m-bottom--xl--PaddingLeft);
+    --#{$pagination}--m-bottom--PaddingRight: var(--#{$pagination}--m-bottom--xl--PaddingRight);
+    --#{$pagination}--m-bottom--PaddingLeft: var(--#{$pagination}--m-bottom--xl--PaddingLeft);
     --#{$pagination}__scroll-button--Width: var(--#{$pagination}__scroll-button--xl--Width);
     --#{$pagination}--m-page-insets--inset: var(--#{$pagination}--m-page-insets--xl--inset);
   }
+}
 
+.#{$pagination} {
   display: flex;
   flex-wrap: wrap;
+  column-gap: var(--#{$pagination}--ColumnGap);
   align-items: center;
   justify-content: flex-end;
-  padding-right: var(--#{$pagination}--PaddingRight);
-  padding-left: var(--#{$pagination}--PaddingLeft);
+  padding-inline-start: var(--#{$pagination}--inset);
+  padding-inline-end: var(--#{$pagination}--inset);
 
-  // stylelint-disable selector-not-notation
-  // update to single :not() in breaking change
-  > *:not(:last-child):not(.#{$pagination}__total-items) {
-    margin-right: var(--#{$pagination}--child--MarginRight);
-  }
-
-  .#{$menu-toggle} {
-    display: var(--#{$pagination}--c-menu-toggle--Display);
-    font-size: var(--#{$pagination}--c-menu-toggle--FontSize);
+  .#{$pagination}__page-menu {
+    display: var(--#{$pagination}__page-menu--Display);
   }
 
   &.pf-m-bottom {
-    --#{$pagination}--child--MarginRight: var(--#{$pagination}--m-bottom--child--MarginRight);
-    --#{$pagination}__nav-control--c-button--PaddingRight: var(--#{$pagination}--m-bottom__nav-control--c-button--PaddingRight);
-    --#{$pagination}__nav-control--c-button--PaddingLeft: var(--#{$pagination}--m-bottom__nav-control--c-button--PaddingRight);
     --#{$pagination}--m-sticky--BoxShadow: var(--#{$pagination}--m-bottom--m-sticky--BoxShadow);
     --#{$pagination}--m-sticky--Top: auto;
 
-    .#{$pagination}__nav-control {
-      .#{$button} {
-        --#{$button}--PaddingTop: var(--#{$pagination}--m-bottom__nav-control--c-button--PaddingTop);
-        --#{$button}--PaddingBottom: var(--#{$pagination}--m-bottom__nav-control--c-button--PaddingBottom);
-
-        outline-offset: var(--#{$pagination}--m-bottom__nav-control--c-button--OutlineOffset);
-      }
-    }
-
     position: sticky;
-    bottom: var(--#{$pagination}--m-bottom--Bottom);
+    inset-block-end: var(--#{$pagination}--m-bottom--Bottom);
     justify-content: center;
+    padding-inline-start: var(--#{$pagination}--m-bottom--PaddingLeft);
+    padding-inline-end: var(--#{$pagination}--m-bottom--PaddingRight);
     background-color: var(--#{$pagination}--m-bottom--BackgroundColor);
     box-shadow: var(--#{$pagination}--m-bottom--BoxShadow);
 
@@ -154,7 +110,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
       display: none;
     }
 
-    .#{$menu-toggle} {
+    .#{$pagination}__page-menu {
       position: absolute;
       display: block;
     }
@@ -172,7 +128,8 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
 
       position: relative;
       justify-content: flex-end;
-      padding: var(--#{$pagination}--m-bottom--md--PaddingTop) var(--#{$pagination}--m-bottom--md--PaddingRight) var(--#{$pagination}--m-bottom--md--PaddingBottom) var(--#{$pagination}--m-bottom--md--PaddingLeft);
+      padding-block-start: var(--#{$pagination}--m-bottom--md--PaddingTop);
+      padding-block-end: var(--#{$pagination}--m-bottom--md--PaddingBottom);
 
       .#{$pagination}__nav-control.pf-m-first,
       .#{$pagination}__nav-control.pf-m-last,
@@ -184,7 +141,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
         display: inline-flex;
       }
 
-      .#{$menu-toggle} {
+      .#{$pagination}__page-menu {
         position: relative;
       }
 
@@ -199,22 +156,14 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
     --#{$pagination}--m-bottom--Bottom: 0;
 
     position: sticky;
-    top: var(--#{$pagination}--m-sticky--Top);
+    inset-block-start: var(--#{$pagination}--m-sticky--Top);
     z-index: var(--#{$pagination}--m-sticky--ZIndex);
-    padding-top: var(--#{$pagination}--m-sticky--PaddingTop);
-    padding-right: var(--#{$pagination}--m-sticky--PaddingRight);
-    padding-bottom: var(--#{$pagination}--m-sticky--PaddingBottom);
-    padding-left: var(--#{$pagination}--m-sticky--PaddingLeft);
+    padding-block-start: var(--#{$pagination}--m-sticky--PaddingTop);
+    padding-block-end: var(--#{$pagination}--m-sticky--PaddingBottom);
+    padding-inline-start: var(--#{$pagination}--m-sticky--PaddingLeft);
+    padding-inline-end: var(--#{$pagination}--m-sticky--PaddingRight);
     background-color: var(--#{$pagination}--m-sticky--BackgroundColor);
     box-shadow: var(--#{$pagination}--m-sticky--BoxShadow);
-
-    @media screen and (min-width: $pf-v5-global--breakpoint--md) {
-      padding: var(--#{$pagination}--m-sticky--md--PaddingTop) var(--#{$pagination}--m-sticky--md--PaddingRight) var(--#{$pagination}--m-sticky--md--PaddingBottom) var(--#{$pagination}--m-sticky--md--PaddingLeft);
-    }
-  }
-
-  &.pf-m-compact {
-    --#{$pagination}--child--MarginRight: var(--#{$pagination}--m-compact--child--MarginRight);
   }
 
   &.pf-m-page-insets {
@@ -226,36 +175,24 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
 // nav
 .#{$pagination}__nav {
   display: var(--#{$pagination}__nav--Display);
+  column-gap: var(--#{$pagination}__nav--ColumnGap);
   justify-content: flex-end;
 }
 
 // nav control
 .#{$pagination}__nav-control {
-  .#{$button} {
-    padding-right: var(--#{$pagination}__nav-control--c-button--PaddingRight);
-    padding-left: var(--#{$pagination}__nav-control--c-button--PaddingLeft);
-    font-size: var(--#{$pagination}__nav-control--c-button--FontSize);
-  }
-
-  .#{$pagination}.pf-m-compact & + & {
-    margin-left: var(--#{$pagination}--m-compact__nav-control--nav-control--MarginLeft);
-  }
+  @include pf-v5-mirror-inline-on-rtl;
 }
 
 // nav page element
 .#{$pagination}__nav-page-select {
   display: flex;
+  column-gap: var(--#{$pagination}__nav-page-select--ColumnGap);
   align-items: center;
-  padding-right: var(--#{$pagination}__nav-page-select--PaddingRight);
-  padding-left: var(--#{$pagination}__nav-page-select--PaddingLeft);
 
   > * {
     font-size: var(--#{$pagination}__nav-page-select--FontSize);
     white-space: nowrap;
-
-    &:not(:last-child) {
-      margin-right: var(--#{$pagination}__nav-page-select--child--MarginRight);
-    }
   }
 
   .#{$form-control} {
@@ -280,13 +217,13 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
     @include pf-v5-apply-breakpoint($breakpoint) {
       &.pf-m-display-summary#{$breakpoint-name} {
         --#{$pagination}__nav--Display: var(--#{$pagination}--m-display-summary__nav--Display);
-        --#{$pagination}--c-menu-toggle--Display: var(--#{$pagination}--m-display-summary--c-menu-toggle--Display);
+        --#{$pagination}__page-menu--Display: var(--#{$pagination}--m-display-summary__page-menu--Display);
         --#{$pagination}__total-items--Display: var(--#{$pagination}--m-display-summary__total-items--Display);
       }
 
       &.pf-m-display-full#{$breakpoint-name} {
         --#{$pagination}__nav--Display: var(--#{$pagination}--m-display-full__nav--Display);
-        --#{$pagination}--c-menu-toggle--Display: var(--#{$pagination}--m-display-full--c-menu-toggle--Display);
+        --#{$pagination}__page-menu--Display: var(--#{$pagination}--m-display-full__page-menu--Display);
         --#{$pagination}__total-items--Display: var(--#{$pagination}--m-display-full__total-items--Display);
       }
 
@@ -299,10 +236,3 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
   }
 }
 // stylelint-enable
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/pagination";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-pagination;
-}

package/components/Panel/panel.css

@@ -1,34 +1,39 @@
+:root,
 .pf-v5-c-panel {
   --pf-v5-c-panel--Width: auto;
   --pf-v5-c-panel--MinWidth: auto;
   --pf-v5-c-panel--MaxWidth: none;
   --pf-v5-c-panel--ZIndex: auto;
-  --pf-v5-c-panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v5-c-panel--BoxShadow: none;
   --pf-v5-c-panel--before--BorderWidth: 0;
-  --pf-v5-c-panel--before--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-v5-global--BoxShadow--md);
-  --pf-v5-c-panel--m-raised--ZIndex: var(--pf-v5-global--ZIndex--sm);
-  --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-panel__header--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-panel__header--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-panel__header--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-panel__header--PaddingLeft: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --pf-v5-c-panel--m-raised--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --pf-v5-c-panel__header--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-panel__header--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-panel__header--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-panel__header--PaddingLeft: var(--pf-t--global--spacer--md);
   --pf-v5-c-panel__main--MaxHeight: none;
   --pf-v5-c-panel__main--Overflow: visible;
-  --pf-v5-c-panel__main-body--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-panel__main-body--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-panel__footer--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-panel__footer--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-panel__footer--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-panel__footer--PaddingLeft: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-panel__main-body--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-panel__main-body--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-panel__footer--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-panel__footer--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-panel__footer--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-panel__footer--PaddingLeft: var(--pf-t--global--spacer--md);
   --pf-v5-c-panel__footer--BoxShadow: none;
   --pf-v5-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
   --pf-v5-c-panel--m-scrollable__main--Overflow: auto;
-  --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
+  --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
+}
+
+.pf-v5-c-panel {
   position: relative;
   z-index: var(--pf-v5-c-panel--ZIndex);
   width: var(--pf-v5-c-panel--Width);
@@ -39,10 +44,7 @@
 }
 .pf-v5-c-panel::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   pointer-events: none;
   content: "";
   border: var(--pf-v5-c-panel--before--BorderWidth) solid var(--pf-v5-c-panel--before--BorderColor);
@@ -50,6 +52,9 @@
 .pf-v5-c-panel.pf-m-bordered {
   --pf-v5-c-panel--before--BorderWidth: var(--pf-v5-c-panel--m-bordered--before--BorderWidth);
 }
+.pf-v5-c-panel.pf-m-secondary {
+  --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-secondary--BackgroundColor);
+}
 .pf-v5-c-panel.pf-m-raised {
   --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-raised--BackgroundColor);
   --pf-v5-c-panel--BoxShadow: var(--pf-v5-c-panel--m-raised--BoxShadow);
@@ -62,7 +67,10 @@
 }
 
 .pf-v5-c-panel__header {
-  padding: var(--pf-v5-c-panel__header--PaddingTop) var(--pf-v5-c-panel__header--PaddingRight) var(--pf-v5-c-panel__header--PaddingBottom) var(--pf-v5-c-panel__header--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-panel__header--PaddingTop);
+  padding-block-end: var(--pf-v5-c-panel__header--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-panel__header--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-panel__header--PaddingRight);
 }
 
 .pf-v5-c-panel__main {
@@ -71,14 +79,16 @@
 }
 
 .pf-v5-c-panel__main-body {
-  padding: var(--pf-v5-c-panel__main-body--PaddingTop) var(--pf-v5-c-panel__main-body--PaddingRight) var(--pf-v5-c-panel__main-body--PaddingBottom) var(--pf-v5-c-panel__main-body--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-panel__main-body--PaddingTop);
+  padding-block-end: var(--pf-v5-c-panel__main-body--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-panel__main-body--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-panel__main-body--PaddingRight);
 }
 
 .pf-v5-c-panel__footer {
-  padding: var(--pf-v5-c-panel__footer--PaddingTop) var(--pf-v5-c-panel__footer--PaddingRight) var(--pf-v5-c-panel__footer--PaddingBottom) var(--pf-v5-c-panel__footer--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-panel__footer--PaddingTop);
+  padding-block-end: var(--pf-v5-c-panel__footer--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-panel__footer--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-panel__footer--PaddingRight);
   box-shadow: var(--pf-v5-c-panel__footer--BoxShadow);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-panel {
-  --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }

package/components/Panel/panel.scss

@@ -1,53 +1,59 @@
 // @debug $panel; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
+:root,
 .#{$panel} {
   --#{$panel}--Width: auto;
   --#{$panel}--MinWidth: auto;
   --#{$panel}--MaxWidth: none;
   --#{$panel}--ZIndex: auto;
-  --#{$panel}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
+  --#{$panel}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$panel}--BoxShadow: none;
 
   // border
   --#{$panel}--before--BorderWidth: 0;
-  --#{$panel}--before--BorderColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$panel}--before--BorderColor: var(--pf-t--global--border--color--default);
+
+  // secondary modifier
+  --#{$panel}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 
   // bordered
-  --#{$panel}--m-bordered--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
+  --#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
 
   // raised
-  --#{$panel}--m-raised--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
-  --#{$panel}--m-raised--ZIndex: var(--#{$pf-global}--ZIndex--sm);
-  --#{$panel}--m-raised--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
+  --#{$panel}--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --#{$panel}--m-raised--ZIndex: var(--pf-t--global--Zindex--sm);
+  --#{$panel}--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
 
   // header
-  --#{$panel}__header--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$panel}__header--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$panel}__header--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$panel}__header--PaddingLeft: var(--#{$pf-global}--spacer--md);
+  --#{$panel}__header--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$panel}__header--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$panel}__header--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$panel}__header--PaddingLeft: var(--pf-t--global--spacer--md);
 
   // main
   --#{$panel}__main--MaxHeight: none;
   --#{$panel}__main--Overflow: visible;
 
   // body
-  --#{$panel}__main-body--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$panel}__main-body--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$panel}__main-body--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$panel}__main-body--PaddingLeft: var(--#{$pf-global}--spacer--md);
+  --#{$panel}__main-body--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$panel}__main-body--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$panel}__main-body--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$panel}__main-body--PaddingLeft: var(--pf-t--global--spacer--md);
 
   // footer
-  --#{$panel}__footer--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$panel}__footer--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$panel}__footer--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$panel}__footer--PaddingLeft: var(--#{$pf-global}--spacer--md);
+  --#{$panel}__footer--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$panel}__footer--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$panel}__footer--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$panel}__footer--PaddingLeft: var(--pf-t--global--spacer--md);
   --#{$panel}__footer--BoxShadow: none;
 
   // scrollable
   --#{$panel}--m-scrollable__main--MaxHeight: #{pf-size-prem(300px)};
   --#{$panel}--m-scrollable__main--Overflow: auto;
-  --#{$panel}--m-scrollable__footer--BoxShadow: 0 #{pf-size-prem(-5px)} #{pf-size-prem(4px)} #{pf-size-prem(-4px)} #{rgba($pf-v5-color-black-1000, .16)}; // insets the shadow so it doesn't show on left/right sides
+  --#{$panel}--m-scrollable__footer--BoxShadow: 0 #{pf-size-prem(-5px)} #{pf-size-prem(4px)} #{pf-size-prem(-4px)} rgba(0 0 0 / 16%); // insets the shadow so it doesn't show on left/right sides
+}
 
+.#{$panel} {
   position: relative;
   z-index: var(--#{$panel}--ZIndex);
   width: var(--#{$panel}--Width);
@@ -58,10 +64,7 @@
 
   &::before {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     pointer-events: none;
     content: "";
     border: var(--#{$panel}--before--BorderWidth) solid var(--#{$panel}--before--BorderColor);
@@ -71,6 +74,10 @@
     --#{$panel}--before--BorderWidth: var(--#{$panel}--m-bordered--before--BorderWidth);
   }
 
+  &.pf-m-secondary {
+    --#{$panel}--BackgroundColor: var(--#{$panel}--m-secondary--BackgroundColor);
+  }
+
   &.pf-m-raised {
     --#{$panel}--BackgroundColor: var(--#{$panel}--m-raised--BackgroundColor);
     --#{$panel}--BoxShadow: var(--#{$panel}--m-raised--BoxShadow);
@@ -85,7 +92,10 @@
 }
 
 .#{$panel}__header {
-  padding: var(--#{$panel}__header--PaddingTop) var(--#{$panel}__header--PaddingRight) var(--#{$panel}__header--PaddingBottom) var(--#{$panel}__header--PaddingLeft);
+  padding-block-start: var(--#{$panel}__header--PaddingTop);
+  padding-block-end: var(--#{$panel}__header--PaddingBottom);
+  padding-inline-start: var(--#{$panel}__header--PaddingLeft);
+  padding-inline-end: var(--#{$panel}__header--PaddingRight);
 }
 
 .#{$panel}__main {
@@ -94,17 +104,16 @@
 }
 
 .#{$panel}__main-body {
-  padding: var(--#{$panel}__main-body--PaddingTop) var(--#{$panel}__main-body--PaddingRight) var(--#{$panel}__main-body--PaddingBottom) var(--#{$panel}__main-body--PaddingLeft);
+  padding-block-start: var(--#{$panel}__main-body--PaddingTop);
+  padding-block-end: var(--#{$panel}__main-body--PaddingBottom);
+  padding-inline-start: var(--#{$panel}__main-body--PaddingLeft);
+  padding-inline-end: var(--#{$panel}__main-body--PaddingRight);
 }
 
 .#{$panel}__footer {
-  padding: var(--#{$panel}__footer--PaddingTop) var(--#{$panel}__footer--PaddingRight) var(--#{$panel}__footer--PaddingBottom) var(--#{$panel}__footer--PaddingLeft);
+  padding-block-start: var(--#{$panel}__footer--PaddingTop);
+  padding-block-end: var(--#{$panel}__footer--PaddingBottom);
+  padding-inline-start: var(--#{$panel}__footer--PaddingLeft);
+  padding-inline-end: var(--#{$panel}__footer--PaddingRight);
   box-shadow: var(--#{$panel}__footer--BoxShadow);
 }
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/panel";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-panel;
-}