diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
index 3cb4518df30..2ab0af241e3 100644
--- a/packages/calcite-components/src/components/panel/panel.scss
+++ b/packages/calcite-components/src/components/panel/panel.scss
@@ -7,25 +7,27 @@
  * @prop --calcite-panel-heading-text-color: Specifies the text color of the component's `heading`.
  * @prop --calcite-panel-description-text-color: Specifies the text color of the component's `description`.
  * @prop --calcite-panel-border-color: Specifies the component's border color.
-
  * @prop --calcite-panel-background-color: Specifies the component's background color.
  * @prop --calcite-panel-header-background-color: Specifies the background color of the component's header.
  * @prop --calcite-panel-footer-background-color: Specifies the background color of the component's footer.
-
  * @prop --calcite-panel-space: Specifies the padding of the component's `"unnamed (default)"` slot.
  * @prop --calcite-panel-header-content-space: Specifies the padding of the `"header-content"` slot.
  * @prop --calcite-panel-footer-space: Specifies the padding of the component's footer.
-
  * @prop --calcite-action-background-color: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s.
  * @prop --calcite-action-background-color-hover: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
  * @prop --calcite-action-background-color-pressed: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
  * @prop --calcite-action-text-color-hover: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
  * @prop --calcite-action-text-color-pressed: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
  * @prop --calcite-popover-border-color: Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s.
-
  * @prop --calcite-panel-content-space: [Deprecated] Use `--calcite-panel-space` instead. Specifies the padding of the component's content.
  * @prop --calcite-panel-footer-padding: [Deprecated] Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer.
  * @prop --calcite-panel-header-border-block-end: [Deprecated] Use `--calcite-panel-border-color` instead. Specifies the component header's block end border.
+ * @prop --calcite-panel-header-action-background-color-hover: Specifies the background color of the component's `calcite-action` items  in the panel header when hovered.
+ * @prop --calcite-panel-header-action-background-color-press: Specifies the background color of the component's `calcite-action` items  in the panel header when pressed.
+ * @prop --calcite-panel-header-action-background-color: Specifies the background color of the component's `calcite-action` items  in the panel header.
+ * @prop --calcite-panel-header-action-indicator-color: Specifies the color of the component's `calcite-action` items' indicator in the panel header.
+ * @prop --calcite-panel-header-action-text-color-press: Specifies the text color of the component's `calcite-action` items in the panel header when pressed.
+ * @prop --calcite-panel-header-action-text-color: Specifies the text color of the component's `calcite-action` items in the panel header.
  */
 
 :host {
@@ -147,6 +149,15 @@
   margin-inline-end: auto;
   justify-content: center;
 
+  .header-actions {
+    --calcite-action-background-color-hover: var(--calcite-panel-header-action-background-color-hover);
+    --calcite-action-background-color-press: var(--calcite-panel-header-action-background-color-press);
+    --calcite-action-background-color: var(--calcite-panel-header-action-background-color);
+    --calcite-action-indicator-color: var(--calcite-panel-header-action-indicator-color);
+    --calcite-action-text-color-press: var(--calcite-panel-header-action-text-color-press);
+    --calcite-action-text-color: var(--calcite-panel-header-action-text-color);
+  }
+
   .heading,
   .description {
     @apply block