diff --git a/components/lib/theme/lara/index.js b/components/lib/theme/lara/index.js
index 33da9eeae..d70f763e0 100644
--- a/components/lib/theme/lara/index.js
+++ b/components/lib/theme/lara/index.js
@@ -83,43 +83,84 @@ export default {
         }
     },
     semantic: {
-        primary: {
-            50: '{emerald.50}',
-            100: '{emerald.100}',
-            200: '{emerald.200}',
-            300: '{emerald.300}',
-            400: '{emerald.400}',
-            500: '{emerald.500}',
-            600: '{emerald.600}',
-            700: '{emerald.700}',
-            800: '{emerald.800}',
-            900: '{emerald.900}',
-            950: '{emerald.950}'
+        colorScheme: {
+            light: {
+                primary: {
+                    50: '{emerald.50}',
+                    100: '{emerald.100}',
+                    200: '{emerald.200}',
+                    300: '{emerald.300}',
+                    400: '{emerald.400}',
+                    500: '{emerald.500}',
+                    600: '{emerald.600}',
+                    700: '{emerald.700}',
+                    800: '{emerald.800}',
+                    900: '{emerald.900}',
+                    950: '{emerald.950}'
+                },
+                surface: {
+                    0: '#ffffff',
+                    50: '{slate.50}',
+                    100: '{slate.100}',
+                    200: '{slate.200}',
+                    300: '{slate.300}',
+                    400: '{slate.400}',
+                    500: '{slate.500}',
+                    600: '{slate.600}',
+                    700: '{slate.700}',
+                    800: '{slate.800}',
+                    900: '{slate.900}',
+                    950: '{slate.950}'
+                },
+                textColor: '{surface.700}',
+                textSecondaryColor: '{surface.500}',
+                borderColor: '{surface.300}'
+            },
+            dark: {
+                primary: {
+                    50: '{emerald.50}',
+                    100: '{emerald.100}',
+                    200: '{emerald.200}',
+                    300: '{emerald.300}',
+                    400: '{emerald.400}',
+                    500: '{emerald.500}',
+                    600: '{emerald.600}',
+                    700: '{emerald.700}',
+                    800: '{emerald.800}',
+                    900: '{emerald.900}',
+                    950: '{emerald.950}'
+                },
+                surface: {
+                    0: '#ffffff',
+                    50: '{zinc.50}',
+                    100: '{zinc.100}',
+                    200: '{zinc.200}',
+                    300: '{zinc.300}',
+                    400: '{zinc.400}',
+                    500: '{zinc.500}',
+                    600: '{zinc.600}',
+                    700: '{zinc.700}',
+                    800: '{zinc.800}',
+                    900: '{zinc.900}',
+                    950: '{zinc.950}'
+                },
+                textColor: '{dark.surface.0}',
+                textSecondaryColor: '{dark.surface.500}',
+                borderColor: '{dark.surface.700}'
+            },
         },
-        surface: {
-            0: '#ffffff',
-            50: '{slate.50}',
-            100: '{slate.100}',
-            200: '{slate.200}',
-            300: '{slate.300}',
-            400: '{slate.400}',
-            500: '{slate.500}',
-            600: '{slate.600}',
-            700: '{slate.700}',
-            800: '{slate.800}',
-            900: '{slate.900}',
-            950: '{slate.950}'
-        },
-        fontFamily: '"Inter var", sans-serif',
-        borderRadius: '6px',
-        inlineGap: '{gap.2}', // inline-spacing
-        transitionDuration: '.2s',
-        transition: 'background-color {transitionDuration}, color {transitionDuration}, box-shadow {transitionDuration}, border-color {transitionDuration}, outline-color {transitionDuration}',
-        focusRing: {
-            width: '2px',
-            style: 'solid',
-            color: '{primary.500}',
-            offset: '2px'
+        common: {
+            fontFamily: '"Inter var", sans-serif',
+            borderRadius: '6px',
+            inlineGap: '{gap.2}', // inline-spacing
+            transitionDuration: '.2s',
+            transition: 'background-color {transitionDuration}, color {transitionDuration}, box-shadow {transitionDuration}, border-color {transitionDuration}, outline-color {transitionDuration}',
+            focusRing: {
+                width: '2px',
+                style: 'solid',
+                color: '{primary.500}',
+                offset: '2px'
+            }
         }
     },
     components: {
diff --git a/components/lib/theme/lara/panel/index.js b/components/lib/theme/lara/panel/index.js
index c96fee885..e278d7f4d 100644
--- a/components/lib/theme/lara/panel/index.js
+++ b/components/lib/theme/lara/panel/index.js
@@ -1,96 +1,4 @@
 export default {
-    variables: {
-        common: {
-            header: {
-                borderWidth: '1px',
-                borderStyle: 'solid',
-                paddingX: '{p.5}',
-                paddingY: '{p.5}',
-                fontWeight: 700
-            },
-            headerIcon: {
-                width: '2rem',
-                height: '2rem',
-                borderWidth: '0',
-                borderStyle: 'none',
-                borderRadius: '50%'
-            },
-            toggleableHeader: {
-                paddingX: '{p.5}',
-                paddingY: '{p.3}'
-            },
-            content: {
-                paddingX: '{p.5}',
-                paddingY: '{p.5}',
-                borderWidth: '1px',
-                borderStyle: 'solid'
-            },
-            footer: {
-                paddingX: '{p.5}',
-                paddingY: '{p.3}',
-                borderWidth: '1px',
-                borderStyle: 'solid'
-            }
-        },
-        light: {
-            header: {
-                borderColor: '{surface.200}',
-                background: '{surface.50}',
-                color: '{surface.700}'
-            },
-            headerIcon: {
-                color: '{surface.600}',
-                borderColor: 'transparent',
-                background: 'transparent',
-                states: {
-                    hover: {
-                        color: '{surface.800}',
-                        borderColor: 'transparent',
-                        background: '{surface.100}'
-                    }
-                }
-            },
-            content: {
-                borderColor: '{surface.200}',
-                background: '{surface.0}',
-                color: '{surface.700}'
-            },
-            footer: {
-                borderColor: '{surface.200}',
-                background: '{surface.0}',
-                color: '{surface.700}'
-            }
-        },
-        dark: {
-            header: {
-                borderColor: '{surface.200}',
-                background: '{surface.50}',
-                color: '{surface.700}'
-            },
-            headerIcon: {
-                color: '{surface.600}',
-                borderColor: 'transparent',
-                background: 'transparent',
-                states: {
-                    hover: {
-                        color: '{surface.800}',
-                        borderColor: 'transparent',
-                        background: '{surface.100}'
-                    }
-                }
-            },
-            content: {
-                borderColor: '{surface.200}',
-                background: '{surface.0}',
-                color: '{surface.700}'
-            },
-            footer: {
-                borderColor: '{surface.200}',
-                background: '{surface.0}',
-                color: '{surface.700}'
-            }
-        }
-    },
     css: `
 .p-panel-header {
     display: flex;
@@ -98,7 +6,7 @@ export default {
     align-items: center;
     border: var(--p-panel-header-border-width) var(--p-panel-header-border-style) var(--p-panel-header-border-color);
     padding: var(--p-panel-header-padding-y) var(--p-panel-header-padding-x);
-    background: var(--p-panel-header-background);
+    background: var(--p-surface-100, --p-dark-surface-900);
     color: var(--p-panel-header-color);
     border-top-right-radius: var(--p-border-radius);
     border-top-left-radius: var(--p-border-radius);