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

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);
@@ -47,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);
@@ -83,8 +91,4 @@
   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);
@@ -68,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);
@@ -107,10 +117,3 @@
   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;
-}

package/components/Popover/popover.css

@@ -1,27 +1,24 @@
 .pf-v5-c-popover {
-  --pf-v5-c-popover--FontSize: var(--pf-v5-global--FontSize--sm);
+  --pf-v5-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v5-c-popover--MinWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
   --pf-v5-c-popover--MaxWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
-  --pf-v5-c-popover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
-  --pf-v5-c-popover--m-danger__title-icon--Color: var(--pf-v5-global--danger-color--100);
-  --pf-v5-c-popover--m-warning__title-icon--Color: var(--pf-v5-global--warning-color--100);
-  --pf-v5-c-popover--m-success__title-icon--Color: var(--pf-v5-global--success-color--100);
-  --pf-v5-c-popover--m-info__title-icon--Color: var(--pf-v5-global--info-color--100);
-  --pf-v5-c-popover--m-custom__title-icon--Color: var(--pf-v5-global--custom-color--200);
-  --pf-v5-c-popover--m-danger__title-text--Color: var(--pf-v5-global--danger-color--200);
-  --pf-v5-c-popover--m-warning__title-text--Color: var(--pf-v5-global--warning-color--200);
-  --pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--200);
-  --pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--200);
-  --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--300);
-  --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-popover__content--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-popover__content--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-popover__content--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-popover__content--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-popover__arrow--Width: var(--pf-v5-global--arrow--width-lg);
-  --pf-v5-c-popover__arrow--Height: var(--pf-v5-global--arrow--width-lg);
-  --pf-v5-c-popover__arrow--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
-  --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-popover--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --pf-v5-c-popover--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-popover--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --pf-v5-c-popover--m-warning__title-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --pf-v5-c-popover--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+  --pf-v5-c-popover--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
+  --pf-v5-c-popover--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
+  --pf-v5-c-popover__content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --pf-v5-c-popover__content--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-popover__content--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-popover__content--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-popover__content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-popover__content--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-popover__arrow--Width: 0.9375rem;
+  --pf-v5-c-popover__arrow--Height: 0.9375rem;
+  --pf-v5-c-popover__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v5-c-popover__arrow--m-top--TranslateX: -50%;
   --pf-v5-c-popover__arrow--m-top--TranslateY: 50%;
   --pf-v5-c-popover__arrow--m-top--Rotate: 45deg;
@@ -34,21 +31,27 @@
   --pf-v5-c-popover__arrow--m-left--TranslateX: 50%;
   --pf-v5-c-popover__arrow--m-left--TranslateY: -50%;
   --pf-v5-c-popover__arrow--m-left--Rotate: 45deg;
-  --pf-v5-c-popover__close--Top: calc(var(--pf-v5-c-popover__content--PaddingTop) - var(--pf-v5-global--spacer--form-element));
-  --pf-v5-c-popover__close--Right: calc(var(--pf-v5-c-popover__content--PaddingRight) - var(--pf-v5-global--spacer--md));
-  --pf-v5-c-popover__close--sibling--PaddingRight: var(--pf-v5-global--spacer--2xl);
-  --pf-v5-c-popover__header--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-popover__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-popover__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
-  --pf-v5-c-popover__title-text--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-popover__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-popover__title-icon--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-popover__footer--MarginTop: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-popover__arrow--m-inline-top--Top: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-popover__arrow--m-inline-bottom--Bottom: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-popover__arrow--m-block-left--Left: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-popover__arrow--m-block-right--Right: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-popover__close--Top: calc(var(--pf-v5-c-popover__content--PaddingTop) - (var(--pf-t--global--spacer--xs) * 1.5));
+  --pf-v5-c-popover__close--Right: var(--pf-v5-c-popover__content--PaddingRight);
+  --pf-v5-c-popover__close--sibling--PaddingRight: var(--pf-t--global--spacer--2xl);
+  --pf-v5-c-popover__header--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-popover__title-text--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-popover__title-text--FontFamily: var(--pf-t--global--font--family--body);
+  --pf-v5-c-popover__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v5-c-popover__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v5-c-popover__title-icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-popover__title-icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-popover__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-popover__footer--MarginTop: var(--pf-t--global--spacer--md);
   position: relative;
   min-width: var(--pf-v5-c-popover--MinWidth);
   max-width: var(--pf-v5-c-popover--MaxWidth);
   font-size: var(--pf-v5-c-popover--FontSize);
+  border-radius: var(--pf-v5-c-popover--BorderRadius);
   box-shadow: var(--pf-v5-c-popover--BoxShadow);
 }
 .pf-v5-c-popover.pf-m-no-padding {
@@ -99,43 +102,38 @@
 }
 .pf-v5-c-popover:is(.pf-m-left-top,
 .pf-m-right-top) {
-  --pf-v5-c-popover__arrow--Top: 0;
+  --pf-v5-c-popover__arrow--Top: var(--pf-v5-c-popover__arrow--m-inline-top--Top);
   --pf-v5-c-popover__arrow--TranslateY: var(--pf-v5-c-popover__arrow--m-top--TranslateY);
 }
 .pf-v5-c-popover:is(.pf-m-left-bottom,
 .pf-m-right-bottom) {
   --pf-v5-c-popover__arrow--Top: auto;
-  --pf-v5-c-popover__arrow--Bottom: 0;
+  --pf-v5-c-popover__arrow--Bottom: var(--pf-v5-c-popover__arrow--m-inline-bottom--Bottom);
 }
 .pf-v5-c-popover:is(.pf-m-top-left,
 .pf-m-bottom-left) {
-  --pf-v5-c-popover__arrow--Left: 0;
+  --pf-v5-c-popover__arrow--Left: var(--pf-v5-c-popover__arrow--m-block-left--Left);
   --pf-v5-c-popover__arrow--TranslateX: var(--pf-v5-c-popover__arrow--m-left--TranslateX);
 }
 .pf-v5-c-popover:is(.pf-m-top-right,
 .pf-m-bottom-right) {
-  --pf-v5-c-popover__arrow--Right: 0;
+  --pf-v5-c-popover__arrow--Right: var(--pf-v5-c-popover__arrow--m-block-right--Right);
   --pf-v5-c-popover__arrow--Left: auto;
 }
 .pf-v5-c-popover.pf-m-danger {
   --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-danger__title-icon--Color);
-  --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-danger__title-text--Color);
 }
 .pf-v5-c-popover.pf-m-warning {
   --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-warning__title-icon--Color);
-  --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-warning__title-text--Color);
 }
 .pf-v5-c-popover.pf-m-success {
   --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-success__title-icon--Color);
-  --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-success__title-text--Color);
 }
 .pf-v5-c-popover.pf-m-custom {
   --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-custom__title-icon--Color);
-  --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-custom__title-text--Color);
 }
 .pf-v5-c-popover.pf-m-info {
   --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-info__title-icon--Color);
-  --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-info__title-text--Color);
 }
 
 .pf-v5-c-popover__content {
@@ -145,6 +143,7 @@
   padding-inline-start: var(--pf-v5-c-popover__content--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-popover__content--PaddingRight);
   background-color: var(--pf-v5-c-popover__content--BackgroundColor);
+  border-radius: var(--pf-v5-c-popover__content--BorderRadius);
 }
 
 .pf-v5-c-popover__close {
@@ -158,12 +157,10 @@
 
 .pf-v5-c-popover__arrow {
   position: absolute;
-  /* stylelint-disable liberty/use-logical-spec */
   top: var(--pf-v5-c-popover__arrow--Top, auto);
   right: var(--pf-v5-c-popover__arrow--Right, auto);
   bottom: var(--pf-v5-c-popover__arrow--Bottom, auto);
   left: var(--pf-v5-c-popover__arrow--Left, auto);
-  /* stylelint-enable */
   width: var(--pf-v5-c-popover__arrow--Width);
   height: var(--pf-v5-c-popover__arrow--Height);
   pointer-events: none;
@@ -190,8 +187,8 @@
 .pf-v5-c-popover__title-text {
   font-family: var(--pf-v5-c-popover__title-text--FontFamily);
   font-size: var(--pf-v5-c-popover__title-text--FontSize);
-  line-height: var(--pf-v5-c-popover__title-text--LineHeight);
-  color: var(--pf-v5-c-popover__title-text--Color, inherit);
+  font-weight: var(--pf-v5-c-popover__title-text--FontWeight);
+  color: var(--pf-v5-c-popover__title-text--Color);
 }
 
 .pf-v5-c-popover__body {
@@ -200,12 +197,4 @@
 
 .pf-v5-c-popover__footer {
   margin-block-start: var(--pf-v5-c-popover__footer--MarginTop);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-popover {
-  --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-  --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-  --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--200);
-  --pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--100);
-  --pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--100);
 }

package/components/Popover/popover.scss

@@ -2,37 +2,33 @@
 
 .#{$popover} {
   // Component
-  --#{$popover}--FontSize: var(--#{$pf-global}--FontSize--sm);
+  --#{$popover}--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$popover}--MinWidth: calc(var(--#{$popover}__content--PaddingLeft) + var(--#{$popover}__content--PaddingRight) + #{pf-size-prem(300px)});
   --#{$popover}--MaxWidth: calc(var(--#{$popover}__content--PaddingLeft) + var(--#{$popover}__content--PaddingRight) + #{pf-size-prem(300px)});
-  --#{$popover}--BoxShadow: var(--#{$pf-global}--BoxShadow--lg);
+  --#{$popover}--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --#{$popover}--BorderRadius: var(--pf-t--global--border--radius--medium);
+
 
   // Title icon colors for states
-  --#{$popover}--m-danger__title-icon--Color: var(--#{$pf-global}--danger-color--100);
-  --#{$popover}--m-warning__title-icon--Color: var(--#{$pf-global}--warning-color--100);
-  --#{$popover}--m-success__title-icon--Color: var(--#{$pf-global}--success-color--100);
-  --#{$popover}--m-info__title-icon--Color: var(--#{$pf-global}--info-color--100);
-  --#{$popover}--m-custom__title-icon--Color: var(--#{$pf-global}--custom-color--200);
-
-  // Title text colors for states
-  --#{$popover}--m-danger__title-text--Color: var(--#{$pf-global}--danger-color--200);
-  --#{$popover}--m-warning__title-text--Color: var(--#{$pf-global}--warning-color--200);
-  --#{$popover}--m-success__title-text--Color: var(--#{$pf-global}--success-color--200);
-  --#{$popover}--m-info__title-text--Color: var(--#{$pf-global}--info-color--200);
-  --#{$popover}--m-custom__title-text--Color: var(--#{$pf-global}--custom-color--300);
+  --#{$popover}--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --#{$popover}--m-warning__title-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --#{$popover}--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+  --#{$popover}--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
+  --#{$popover}--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
 
   // Content
-  --#{$popover}__content--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$popover}__content--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$popover}__content--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$popover}__content--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$popover}__content--PaddingLeft: var(--#{$pf-global}--spacer--md);
+  --#{$popover}__content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --#{$popover}__content--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$popover}__content--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$popover}__content--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$popover}__content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$popover}__content--BorderRadius: var(--pf-t--global--border--radius--medium);
 
   // Arrow
-  --#{$popover}__arrow--Width: var(--#{$pf-global}--arrow--width-lg);
-  --#{$popover}__arrow--Height: var(--#{$pf-global}--arrow--width-lg);
-  --#{$popover}__arrow--BoxShadow: var(--#{$pf-global}--BoxShadow--lg);
-  --#{$popover}__arrow--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
+  --#{$popover}__arrow--Width: #{pf-size-prem(15px)};
+  --#{$popover}__arrow--Height: #{pf-size-prem(15px)};
+  --#{$popover}__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --#{$popover}__arrow--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --#{$popover}__arrow--m-top--TranslateX: -50%;
   --#{$popover}__arrow--m-top--TranslateY: 50%;
   --#{$popover}__arrow--m-top--Rotate: 45deg;
@@ -45,32 +41,38 @@
   --#{$popover}__arrow--m-left--TranslateX: 50%;
   --#{$popover}__arrow--m-left--TranslateY: -50%;
   --#{$popover}__arrow--m-left--Rotate: 45deg;
+  --#{$popover}__arrow--m-inline-top--Top: var(--pf-t--global--border--radius--medium);
+  --#{$popover}__arrow--m-inline-bottom--Bottom: var(--pf-t--global--border--radius--medium);
+  --#{$popover}__arrow--m-block-left--Left: var(--pf-t--global--border--radius--medium);
+  --#{$popover}__arrow--m-block-right--Right: var(--pf-t--global--border--radius--medium);
 
   // Close
-  --#{$popover}__close--Top: calc(var(--#{$popover}__content--PaddingTop) - var(--#{$pf-global}--spacer--form-element)); // align top of button with top of text
-  --#{$popover}__close--Right: calc(var(--#{$popover}__content--PaddingRight) - var(--#{$pf-global}--spacer--md)); // align right of content
-  --#{$popover}__close--sibling--PaddingRight: var(--#{$pf-global}--spacer--2xl);
+  --#{$popover}__close--Top: calc(var(--#{$popover}__content--PaddingTop) - (var(--pf-t--global--spacer--xs) * 1.5)); // align top of button with top of text - TODO: replace with form element token
+  --#{$popover}__close--Right: var(--#{$popover}__content--PaddingRight); // align right of content
+  --#{$popover}__close--sibling--PaddingRight: var(--pf-t--global--spacer--2xl);
 
   // Header
-  --#{$popover}__header--MarginBottom: var(--#{$pf-global}--spacer--sm);
+  --#{$popover}__header--MarginBottom: var(--pf-t--global--spacer--sm);
 
   // Title text
-  --#{$popover}__title-text--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$popover}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading);
-  --#{$popover}__title-text--FontSize: var(--#{$pf-global}--FontSize--md);
+  --#{$popover}__title-text--Color: var(--pf-t--global--text--color--regular);
+  --#{$popover}__title-text--FontFamily: var(--pf-t--global--font--family--body);
+  --#{$popover}__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
+  --#{$popover}__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
 
   // Title icon
-  --#{$popover}__title-icon--MarginRight: var(--#{$pf-global}--spacer--sm);
-  --#{$popover}__title-icon--Color: var(--#{$pf-global}--Color--100);
-  --#{$popover}__title-icon--FontSize: var(--#{$pf-global}--FontSize--md);
+  --#{$popover}__title-icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$popover}__title-icon--Color: var(--pf-t--global--icon--color--regular);
+  --#{$popover}__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
 
   // Footer
-  --#{$popover}__footer--MarginTop: var(--#{$pf-global}--spacer--md);
+  --#{$popover}__footer--MarginTop: var(--pf-t--global--spacer--md);
 
   position: relative;
   min-width: var(--#{$popover}--MinWidth);
   max-width: var(--#{$popover}--MaxWidth);
   font-size: var(--#{$popover}--FontSize);
+  border-radius: var(--#{$popover}--BorderRadius);
   box-shadow: var(--#{$popover}--BoxShadow);
 
   &.pf-m-no-padding {
@@ -104,7 +106,7 @@
     .pf-m-bottom,
     .pf-m-bottom-left,
     .pf-m-bottom-right
-   ) {
+  ) {
     --#{$popover}__arrow--Top: var(--#{$popover}--m-bottom--Top, 0);
     --#{$popover}__arrow--Left: var(--#{$popover}--m-bottom--Left, 50%);
     --#{$popover}__arrow--TranslateX: var(--#{$popover}__arrow--m-bottom--TranslateX);
@@ -140,7 +142,7 @@
     .pf-m-left-top,
     .pf-m-right-top
   ) {
-    --#{$popover}__arrow--Top: 0;
+    --#{$popover}__arrow--Top: var(--#{$popover}__arrow--m-inline-top--Top);
     --#{$popover}__arrow--TranslateY: var(--#{$popover}__arrow--m-top--TranslateY);
   }
 
@@ -149,14 +151,14 @@
     .pf-m-right-bottom
   ) {
     --#{$popover}__arrow--Top: auto;
-    --#{$popover}__arrow--Bottom: 0;
+    --#{$popover}__arrow--Bottom: var(--#{$popover}__arrow--m-inline-bottom--Bottom);
   }
 
   &:is(
     .pf-m-top-left,
     .pf-m-bottom-left
   ) {
-    --#{$popover}__arrow--Left: 0;
+    --#{$popover}__arrow--Left: var(--#{$popover}__arrow--m-block-left--Left);
     --#{$popover}__arrow--TranslateX: var(--#{$popover}__arrow--m-left--TranslateX);
   }
 
@@ -164,33 +166,28 @@
     .pf-m-top-right,
     .pf-m-bottom-right
   ) {
-    --#{$popover}__arrow--Right: 0;
+    --#{$popover}__arrow--Right: var(--#{$popover}__arrow--m-block-right--Right);
     --#{$popover}__arrow--Left: auto;
   }
 
   &.pf-m-danger {
     --#{$popover}__title-icon--Color: var(--#{$popover}--m-danger__title-icon--Color);
-    --#{$popover}__title-text--Color: var(--#{$popover}--m-danger__title-text--Color);
   }
 
   &.pf-m-warning {
     --#{$popover}__title-icon--Color: var(--#{$popover}--m-warning__title-icon--Color);
-    --#{$popover}__title-text--Color: var(--#{$popover}--m-warning__title-text--Color);
   }
 
   &.pf-m-success {
     --#{$popover}__title-icon--Color: var(--#{$popover}--m-success__title-icon--Color);
-    --#{$popover}__title-text--Color: var(--#{$popover}--m-success__title-text--Color);
   }
 
   &.pf-m-custom {
     --#{$popover}__title-icon--Color: var(--#{$popover}--m-custom__title-icon--Color);
-    --#{$popover}__title-text--Color: var(--#{$popover}--m-custom__title-text--Color);
   }
 
   &.pf-m-info {
     --#{$popover}__title-icon--Color: var(--#{$popover}--m-info__title-icon--Color);
-    --#{$popover}__title-text--Color: var(--#{$popover}--m-info__title-text--Color);
   }
 }
 
@@ -201,6 +198,7 @@
   padding-inline-start: var(--#{$popover}__content--PaddingLeft);
   padding-inline-end: var(--#{$popover}__content--PaddingRight);
   background-color: var(--#{$popover}__content--BackgroundColor);
+  border-radius: var(--#{$popover}__content--BorderRadius);
 }
 
 // Close button
@@ -217,12 +215,12 @@
 
 .#{$popover}__arrow {
   position: absolute;
-  /* stylelint-disable liberty/use-logical-spec */
+  // stylelint-disable liberty/use-logical-spec
   top: var(--#{$popover}__arrow--Top, auto);
   right: var(--#{$popover}__arrow--Right, auto);
   bottom: var(--#{$popover}__arrow--Bottom, auto);
   left: var(--#{$popover}__arrow--Left, auto);
-  /* stylelint-enable */
+  // stylelint-enable
   width: var(--#{$popover}__arrow--Width);
   height: var(--#{$popover}__arrow--Height);
   pointer-events: none;
@@ -249,8 +247,8 @@
 .#{$popover}__title-text {
   font-family: var(--#{$popover}__title-text--FontFamily);
   font-size: var(--#{$popover}__title-text--FontSize);
-  line-height: var(--#{$popover}__title-text--LineHeight);
-  color: var(--#{$popover}__title-text--Color, inherit);
+  font-weight: var(--#{$popover}__title-text--FontWeight);
+  color: var(--#{$popover}__title-text--Color);
 }
 
 // Body
@@ -261,10 +259,3 @@
 .#{$popover}__footer {
   margin-block-start: var(--#{$popover}__footer--MarginTop);
 }
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/popover";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-popover;
-}