diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
index 0c6deb6620c..e1775e556ab 100644
--- a/packages/calcite-components/src/components/panel/panel.scss
+++ b/packages/calcite-components/src/components/panel/panel.scss
@@ -3,130 +3,186 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-panel-footer-padding: Specifies the padding of the component's footer.
- * @prop --calcite-panel-header-border-block-end: Specifies the component header's block end border.
+ * @prop --calcite-panel-background-color: Specifies the background color of the component.
+ * @prop --calcite-panel-border-color: Specifies the border color of the component.
+ * @prop --calcite-panel-description-text-color: Specifies the text color of the component's description.
+ * @prop --calcite-panel-fab-z-index: Specifies the component fab's z-index.
+ * @prop --calcite-panel-footer-background-color: Specifies the background color of the component's footer.
+ * @prop --calcite-panel-footer-padding: [Deprecated] Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer.
+ * @prop --calcite-panel-footer-space: Specifies the spacing of the component's footer.
+ * @prop --calcite-panel-header-background-color: Specifies the component header's background color.
+ * @prop --calcite-panel-header-border-block-end: [Deprecated] No longer necessary. Specifies the component header's block end border.
+ * @prop --calcite-panel-header-color: [Deprecated] Use `--calcite-panel-heading-text-color` instead. Specifies the component header's  color.
+ * @prop --calcite-panel-heading-text-color: Specifies the component's heading text color.
+ * @prop --calcite-panel-header-z-index: Specifies the component header's z-index.
  */
 
 :host {
   @extend %component-host;
-  @apply relative flex w-full h-full flex-auto;
+  position: relative;
+  display: flex;
+  inline-size: var(--calcite-container-size-content-fluid);
+  block-size: var(--calcite-container-size-content-fluid);
+  flex: 1 1 auto;
+  --calcite-internal-panel-transition: max-block-size var(--calcite-animation-timing),
+    inline-size var(--calcite-animation-timing);
 
-  --calcite-min-header-height: calc(var(--calcite-icon-size) * 3);
+  --calcite-panel-background-color: var(--calcite-color-background);
+  --calcite-panel-border-color: var(--calcite-color-border-3);
+  --calcite-panel-description-text-color: var(--calcite-color-text-2);
+  --calcite-panel-fab-z-index: var(--calcite-z-index-sticky);
+  --calcite-panel-footer-background-color: var(--calcite-color-foreground-1);
+  --calcite-panel-footer-space: var(--calcite-panel-footer-padding, var(--calcite-spacing-xxs));
+  --calcite-panel-heading-text-color: var(--calcite-panel-header-color, var(--calcite-color-text-2));
+  --calcite-panel-header-background-color: var(--calcite-color-foreground-1);
+  --calcite-panel-header-z-index: var(--calcite-z-index-header);
+  --calcite-panel-header-border-width: var(--calcite-border-width-sm);
+  --calcite-panel-header-border-block-end: var(--calcite-border-width-sm) solid var(--calcite-panel-border-color);
 }
 
 @include disabled();
 
-@import "../../assets/styles/header";
+.header {
+  color: var(--calcite-panel-heading-text-color);
+  margin: 0;
+  align-content: space-between;
+  align-items: center;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  z-index: var(--calcite-panel-header-z-index);
+  background-color: var(--calcite-panel-header-background-color);
+  border-block-end: var(
+    --calcite-panel-header-border-block-end,
+    var(--calcite-panel-header-border-width) solid var(--calcite-panel-border-color)
+  );
+}
 
-.container {
-  @apply bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0;
+.heading {
+  margin: 0;
+  padding: 0;
+  font-weight: var(--calcite-font-weight-medium);
+}
 
-  transition:
-    max-block-size var(--calcite-animation-timing),
-    inline-size var(--calcite-animation-timing);
+.header .heading {
+  flex: 1 1 auto;
+  padding: var(--calcite-spacing-xxs);
 }
 
-.container[hidden] {
-  @apply hidden;
+.container {
+  background-color: var(--calcite-panel-background-color);
+  margin: 0;
+  display: flex;
+  inline-size: var(--calcite-container-size-content-fluid);
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 0;
+  transition: var(--calcite-internal-panel-transition);
 }
 
-.header {
-  @apply bg-foreground-1 flex flex-col
-    z-header;
-  border-block-end: var(--calcite-panel-header-border-block-end, 1px solid var(--calcite-color-border-3));
+.container[hidden] {
+  display: none;
 }
 
 .header-container {
-  @apply flex flex-row w-full
-  items-stretch
-  justify-start;
+  display: flex;
+  flex-direction: row;
+  inline-size: var(--calcite-container-size-content-fluid);
+  align-items: stretch;
+  justify-content: flex-start;
   flex: 0 0 auto;
 }
 
 .header-container--border-end {
-  border-block-end: 1px solid var(--calcite-color-border-3);
+  border-block-end: var(--calcite-border-width-sm) solid var(--calcite-panel-border-color);
 }
 
 .action-bar-container {
-  @apply w-full;
+  inline-size: var(--calcite-container-size-content-fluid);
 }
 
 .action-bar-container ::slotted(calcite-action-bar) {
-  @apply w-full;
+  inline-size: var(--calcite-container-size-content-fluid);
 }
 
 .header-content {
-  @apply flex
-    flex-col
-    overflow-hidden
-    px-3
-    py-3.5;
+  flex-direction: column;
+  display: flex;
+  overflow: hidden;
+  padding-inline: var(--calcite-spacing-sm);
+  padding-block: var(--calcite-spacing-md);
   margin-inline-end: auto;
   .heading,
   .description {
-    @apply block
-      break-words
-      p-0;
+    display: block;
+    overflow-wrap: break-word;
+    padding: 0;
   }
   .heading {
-    @apply text-0h mx-0 mt-0 mb-1 font-medium;
+    margin-inline: 0px;
+    margin-block: 0px var(--calcite-spacing-xxs);
+    font-weight: var(--calcite-font-weight-medium);
+    font-size: var(--calcite-font-size-0);
+    line-height: var(--calcite-font-line-height-relative-tight);
     &:only-child {
-      @apply mb-0;
+      margin-block-end: 0;
     }
   }
   .description {
-    @apply text-color-2 text-n1h;
+    color: var(--calcite-panel-description-text-color);
+    font-size: var(--calcite-font-size--1);
+    line-height: var(--calcite-font-line-height-relative);
   }
 }
 
 .back-button {
-  @apply border-color-3
-  border-0
-  border-solid;
-  border-inline-end-width: theme("borderWidth.DEFAULT");
+  border-color: var(--calcite-panel-border-color);
+  border-style: solid;
+  border-width: 0px;
+  border-inline-end-width: var(--calcite-border-width-sm);
 }
 
 .header-actions {
-  @apply flex
-  flex-row
-  flex-nowrap
-  items-stretch;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: stretch;
 }
 
 .header-actions--end {
-  margin-inline-start: theme("margin.auto");
+  margin-inline-start: "auto";
 }
 
 .content-wrapper {
-  @apply flex
-  flex-auto
-  flex-col
-  flex-nowrap
-  items-stretch
-  bg-background
-  overflow-auto
-  h-full;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  background-color: var(--calcite-panel-background-color);
+  overflow: auto;
+  block-size: var(--calcite-container-size-content-fluid);
 }
 
 .footer {
-  @apply bg-foreground-1
-  flex
-  w-full
-  justify-evenly;
-
+  background-color: var(--calcite-panel-footer-background-color);
+  inline-size: var(--calcite-container-size-content-fluid);
+  display: flex;
+  justify-content: space-evenly;
   flex: 0 0 auto;
-  padding: var(--calcite-panel-footer-padding, theme("spacing.2"));
-  border-block-start: 1px solid var(--calcite-color-border-3);
+  padding: var(--calcite-panel-footer-space);
+  border-block-start: var(--calcite-border-width-sm) solid var(--calcite-panel-border-color);
 }
 
 .fab-container {
-  @apply sticky
-  bottom-0
-  my-0
-  mx-auto
-  block
-  p-2
-  z-sticky;
+  position: sticky;
+  inset-block-end: 0;
+  margin-inline: auto;
+  margin-block: 0;
+  display: block;
+  z-index: var(--calcite-panel-fab-z-index);
+  padding: var(--calcite-spacing-xxs);
   inset-inline: 0;
   inline-size: fit-content;
 }
diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index 8af9d8974a1..82ace54de38 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -446,3 +446,46 @@ export const withNoHeaderBorderBlockEnd_TestOnly = (): string =>
   html`<calcite-panel style="--calcite-panel-header-border-block-end:none;" height-scale="s" heading="My Panel"
     >Slotted content!</calcite-panel
   >`;
+
+export const theming_TestOnly = (): string => html`
+  <style>
+    .container {
+      max-height: 300px;
+      width: 300px;
+    }
+  </style>
+  <div class="container">
+    <calcite-panel
+      heading="My Panel"
+      description="My description"
+      style="
+      --calcite-panel-background-color: lightblue;
+      --calcite-panel-border-color: red;
+      --calcite-panel-description-color: purple;
+      --calcite-panel-footer-background-color: lightgreen;
+      --calcite-panel-footer-space: 24px;
+      --calcite-panel-header-background-color: yellow;
+      --calcite-panel-header-border-width: 1px;
+      --calcite-panel-heading-text-color: orange;
+      --calcite-panel-header-z-index: 999;
+      --calcite-panel-fab-z-index: 998;
+    "
+    >
+      <calcite-list>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+      </calcite-list>
+      <calcite-fab slot="fab"></calcite-fab>
+      ${footerHTML}
+    </calcite-panel>
+  </div>
+`;