diff --git a/components/lib/theme/aura/global.js b/components/lib/theme/aura/global.js
index 508d1a2c4..fbb879db1 100644
--- a/components/lib/theme/aura/global.js
+++ b/components/lib/theme/aura/global.js
@@ -1,22 +1,5 @@
 export default {
     css: `
-@font-face {
-    font-family: "Inter var";
-    font-weight: 100 900;
-    font-display: swap;
-    font-style: normal;
-    font-named-instance: "Regular";
-    src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
-}
-@font-face {
-    font-family: "Inter var";
-    font-weight: 100 900;
-    font-display: swap;
-    font-style: italic;
-    font-named-instance: "Italic";
-    src: url("./fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
-}
-
 .p-component,
 .p-component * {
     box-sizing: border-box;
diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js
index 51631db2f..92d0f7340 100644
--- a/components/lib/theme/aura/index.js
+++ b/components/lib/theme/aura/index.js
@@ -29,8 +29,6 @@ export default {
                 bg: 'rgba(0,0,0,0.4)'
             },
             colors: {
-                white: '#ffffff',
-                black: '#000000',
                 emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' },
                 green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' },
                 lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' },
@@ -71,6 +69,7 @@ export default {
         colorScheme: {
             light: {
                 surface: {
+                    0: '#ffffff',
                     50: '{slate.50}',
                     100: '{slate.100}',
                     200: '{slate.200}',
@@ -116,8 +115,8 @@ export default {
                     inverseColor: '{surface.900}'
                 },
                 text: {
-                    color: '{surface.700}',
-                    secondaryColor: '{surface.500}'
+                    color: '{surface.0}',
+                    secondaryColor: '{surface.400}'
                 },
                 highlight: {
                     background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
diff --git a/components/lib/theme/aura/panel/index.js b/components/lib/theme/aura/panel/index.js
index 6a7b1ebf6..299babe41 100644
--- a/components/lib/theme/aura/panel/index.js
+++ b/components/lib/theme/aura/panel/index.js
@@ -4,24 +4,36 @@ export default {
         colorScheme: {
             light: {
                 root: {
-                    borderColor: '{surface.200}',
-                    backgroundColor: '{white}'
+                    border: '1px solid {surface.200}',
+                    background: '{surface.0}',
+                    textColor: '{surface.700}'
+                },
+                headerIcon: {
+                    color: '{surface.500}',
+                    colorHover: '{surface.600}',
+                    backgroundHover: '{surface.100}'
                 }
             },
             dark: {
                 root: {
-                    borderColor: '{surface.700}',
-                    backgroundColor: '{surface.0}'
+                    border: '1px solid {surface.700}',
+                    background: '{surface.900}',
+                    textColor: '{text.color}'
+                },
+                headerIcon: {
+                    color: '{surface.400}',
+                    colorHover: '{surface.300}',
+                    backgroundHover: '{surface.800}'
                 }
             }
         }
     },
     css: `
 .p-panel {
-    border: 1px solid var(--p-panel-border-color);
+    border: var(--p-panel-border);
     border-radius: var(--p-border-radius);
-    background: var(--p-dark-surface-900, var(--p-white));
-    color: var(--p-dark-surface-0, var(--p-surface-700));
+    background: var(--p-panel-background);
+    color: var(--p-panel-text-color);
 }
 
 .p-panel-header {
@@ -48,7 +60,7 @@ export default {
     width: 1.75rem;
     height: 1.75rem;
     position: relative;
-    color: var(--p-dark-surface-400, var(--p-surface-500));
+    color: var(--p-panel-header-icon-color);
     border: 0 none;
     background: transparent;
     border-radius: 50%;
@@ -57,8 +69,8 @@ export default {
 }
 
 .p-panel-header-icon:enabled:hover {
-    color: var(--p-dark-surface-300, var(--p-surface-600));
-    background: var(--p-dark-surface-800, var(--p-surface-100));
+    color: var(--p-panel-header-icon-color-hover);
+    background: var(--p-panel-header-icon-background-hover);
 }
 
 .p-panel-header-icon:focus-visible {