atomicuilibrary 0.1.0 → 0.1.3

package/dist/collection/assets/js/demos/anchor-demo.js

@@ -1,4 +1,4 @@
-// Enhanced Anchor Component Demo
+// Enhanced Anchor Component Demo
 export function initAnchorDemo() {
   const section = document.getElementById('anchor');
   if (!section) return;
@@ -8,8 +8,7 @@ export function initAnchorDemo() {
       <h2 style="margin: 0;">⚓ Anchor Component</h2>
       <div style="display: flex; gap: 10px;">
         <ui-button id="openPlaygroundBtn" variant="outline" color="primary" label="🎮 Open Playground" size="md"ui-button>
-        <ui-button id="backHomeBtn" variant="outline" color="neutral" label="← Back to Home" size="md"ui-button>
-      </div>
+             </div>
     </div>
     <p>Smooth scrolling navigation links with active indicator. Perfect for documentation pages and long content.</p>
 
@@ -34,7 +33,7 @@ export function initAnchorDemo() {
     advancedModeBtn: () => showAdvancedFeatures(),
     playgroundModeBtn: () => showAnchorPlayground(),
     openPlaygroundBtn: () => window.open('/index-anchor-playground.html', '_blank'),
-    backHomeBtn: () => window.showSection('home'),
+  
   };
 
   setTimeout(() => {
@@ -52,7 +51,7 @@ export function initAnchorDemo() {
     if (!anchorDemoContainer) return;
 
     anchorDemoContainer.innerHTML = `
-      <div class="demo-block" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
+      <div class="demo-block" style="background:var(--bg-primary,white); border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
         <h3 style="margin-top: 0; display: flex; align-items: center; gap: 10px;">
           <span style="font-size: 24px;">📍</span>
           Vertical Anchor Navigation
@@ -60,7 +59,7 @@ export function initAnchorDemo() {
         <p style="color: #6b7280;">Classic vertical navigation with active indicator line - perfect for sidebar navigation.</p>
         
         <div style="display: grid; grid-template-columns: 220px 1fr; gap: 40px; margin-top: 30px; min-height: 600px;">
-          <div style="position: sticky; top: 20px; height: fit-content; background: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb;">
+          <div style="position: sticky; top: 20px; height: fit-content; background:var(--bg-secondary,#f9fafb); padding: 20px; border-radius: 8px; border:1px solid var(--border-default,#e5e7eb);">
             <h4 style="margin: 0 0 15px 0; color: #374151; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;">Navigation</h4>
             <ui-anchor id="verticalAnchor" scroll-container=".section-container"></ui-anchor>
           </div>
@@ -98,7 +97,7 @@ export function initAnchorDemo() {
               <h3 style="margin-top: 0; font-size: 28px;">💻 Basic Usage</h3>
               <p style="font-size: 16px; line-height: 1.8;">Get started with the anchor component in seconds:</p>
               
-              <div style="background: white; padding: 20px; border-radius: 8px; margin-top: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+              <div style="background:var(--bg-primary,white); padding: 20px; border-radius: 8px; margin-top: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
                 <pre style="background: #1a202c; color: #fbbf24; padding: 18px; border-radius: 6px; overflow-x: auto;"><code>&lt;ui-anchor
   links='[{"id":"1","label":"Section 1","target":"v-intro"}]'
   orientation="vertical"
@@ -137,7 +136,7 @@ export function initAnchorDemo() {
     if (!anchorDemoContainer) return;
 
     anchorDemoContainer.innerHTML = `
-      <div class="demo-block" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
+      <div class="demo-block" style="background:var(--bg-primary,white); border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
         <h3 style="margin-top: 0; display: flex; align-items: center; gap: 10px;">
           <span style="font-size: 24px;">↔️</span>
           Horizontal Anchor Navigation
@@ -145,7 +144,7 @@ export function initAnchorDemo() {
         <p style="color: #6b7280;">Tab-style navigation that sticks to the top - ideal for content sections and landing pages.</p>
         
         <div style="margin-top: 30px;">
-          <div style="position: sticky; top: 0; background: white; z-index: 10; padding: 20px; border-bottom: 2px solid #e5e7eb; margin-bottom: 30px; margin-left: -30px; margin-right: -30px; padding-left: 30px; padding-right: 30px; box-shadow: 0 4px 6px rgba(0,0,0,0.05);">
+          <div style="position: sticky; top: 0; background:var(--bg-primary,white); z-index: 10; padding: 20px; border-bottom: 2px solid #e5e7eb; margin-bottom: 30px; margin-left: -30px; margin-right: -30px; padding-left: 30px; padding-right: 30px; box-shadow: 0 4px 6px rgba(0,0,0,0.05);">
             <ui-anchor id="horizontalAnchor" orientation="horizontal" scroll-container=".section-container"></ui-anchor>
           </div>
 
@@ -189,19 +188,19 @@ export function initAnchorDemo() {
     if (!anchorDemoContainer) return;
 
     anchorDemoContainer.innerHTML = `
-      <div class="demo-block" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
+      <div class="demo-block" style="background:var(--bg-primary,white); border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
         <h3 style="margin-top: 0; display: flex; align-items: center; gap: 10px;">
           <span style="font-size: 24px;">📚</span>
           Documentation Style Navigation
         </h3>
         <p style="color: #6b7280;">Professional documentation layout with sidebar navigation - perfect for technical docs and guides.</p>
         
-        <div style="display: grid; grid-template-columns: 270px 1fr; gap: 35px; margin-top: 30px; background: #f9fafb; padding: 30px; border-radius: 12px;">
-          <div style="position: sticky; top: 20px; height: fit-content; background: white; padding: 25px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
+        <div style="display: grid; grid-template-columns: 270px 1fr; gap: 35px; margin-top: 30px; background:var(--bg-secondary,#f9fafb); padding: 30px; border-radius: 12px;">
+          <div style="position: sticky; top: 20px; height: fit-content; background:var(--bg-primary,white); padding: 25px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
             <ui-anchor id="docsAnchor" scroll-container=".section-container"></ui-anchor>
           </div>
 
-          <div style="background: white; padding: 45px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
+          <div style="background:var(--bg-primary,white); padding: 45px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
             <div id="doc-getting-started" style="margin-bottom: 60px; min-height: 400px;">
               <h2 style="color: #1f2937; border-bottom: 3px solid #10b981; padding-bottom: 12px; margin-top: 0; font-size: 32px;">Getting Started</h2>
               <p>Built with performance and accessibility in mind.</p>
@@ -247,7 +246,7 @@ export function initAnchorDemo() {
     if (!anchorDemoContainer) return;
 
     anchorDemoContainer.innerHTML = `
-      <div class="demo-block" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
+      <div class="demo-block" style="background:var(--bg-primary,white); border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
         <h3 style="margin-top: 0; display: flex; align-items: center; gap: 10px;">
           <span style="font-size: 24px;">🔄</span>
           Side by Side Comparison
@@ -255,12 +254,12 @@ export function initAnchorDemo() {
         <p style="color: #6b7280;">Compare vertical and horizontal orientations.</p>
         
         <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 30px;">
-          <div style="background: #f9fafb; padding: 25px; border-radius: 10px; border: 2px solid #e5e7eb;">
+          <div style="background:var(--bg-secondary,#f9fafb); padding: 25px; border-radius: 10px; border: 2px solid #e5e7eb;">
             <ui-anchor id="comparisonVertical" scroll-container=".section-container"></ui-anchor>
             <div id="comp-v-1" style="margin-top: 20px; height: 300px; background: #667eea; border-radius: 8px;"></div>
             <div id="comp-v-2" style="margin-top: 20px; height: 300px; background: #f093fb; border-radius: 8px;"></div>
           </div>
-          <div style="background: #f9fafb; padding: 25px; border-radius: 10px; border: 2px solid #e5e7eb;">
+          <div style="background:var(--bg-secondary,#f9fafb); padding: 25px; border-radius: 10px; border: 2px solid #e5e7eb;">
             <ui-anchor id="comparisonHorizontal" orientation="horizontal" scroll-container=".section-container"></ui-anchor>
             <div id="comp-h-1" style="margin-top: 20px; height: 300px; background: #ffecd2; border-radius: 8px;"></div>
             <div id="comp-h-2" style="margin-top: 20px; height: 300px; background: #a8edea; border-radius: 8px;"></div>
@@ -292,7 +291,7 @@ export function initAnchorDemo() {
     if (!anchorDemoContainer) return;
 
     anchorDemoContainer.innerHTML = `
-      <div class="demo-block" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
+      <div class="demo-block" style="background:var(--bg-primary,white); border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
         <h3 style="margin-top: 0; display: flex; align-items: center; gap: 10px;">
           <span style="font-size: 24px;">⚡</span>
           Advanced Features & Use Cases
@@ -301,19 +300,19 @@ export function initAnchorDemo() {
         <div style="display: grid; grid-template-columns: 250px 1fr; gap: 35px; margin-top: 30px;">
           <div style="position: sticky; top: 20px; height: fit-content;">
              <div style="margin-bottom: 20px;">
-               <h4 style="font-size: 11px; color: #64748b; margin-bottom: 5px; text-transform: uppercase;">Standard Line</h4>
+               <h4 style="font-size: 11px; color:var(--text-secondary,#64748b); margin-bottom: 5px; text-transform: uppercase;">Standard Line</h4>
                <ui-anchor id="advancedAnchor" scroll-container=".section-container"></ui-anchor>
              </div>
              <div>
-               <h4 style="font-size: 11px; color: #64748b; margin-bottom: 5px; text-transform: uppercase;">Premium Dots</h4>
+               <h4 style="font-size: 11px; color:var(--text-secondary,#64748b); margin-bottom: 5px; text-transform: uppercase;">Premium Dots</h4>
                <ui-anchor id="dotAnchor" type="dot" show-progress="true" scroll-container=".section-container"></ui-anchor>
              </div>
           </div>
 
           <div>
-            <div id="adv-autogen" style="background: white; border: 1px solid #e5e7eb; padding: 35px; border-radius: 12px; margin-bottom: 30px;">
+            <div id="adv-autogen" style="background:var(--bg-primary,white); border:1px solid var(--border-default,#e5e7eb); padding: 35px; border-radius: 12px; margin-bottom: 30px;">
               <h3 style="margin: 0 0 15px 0; font-size: 24px; color: #f43f5e;">✨ Auto-generation</h3>
-              <div id="auto-gen-target" style="padding: 20px; background: #f9fafb; border-radius: 8px;">
+              <div id="auto-gen-target" style="padding: 20px; background:var(--bg-secondary,#f9fafb); border-radius: 8px;">
                 <h1 id="gen-title">1. Automated Heading</h1>
                 <p>Detected via <code>auto-gen-container</code>.</p>
                 <h1 id="gen-other">2. Another Heading</h1>
@@ -362,14 +361,14 @@ export function initAnchorDemo() {
     if (!anchorDemoContainer) return;
 
     anchorDemoContainer.innerHTML = `
-      <div class="demo-block" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
+      <div class="demo-block" style="background:var(--bg-primary,white); border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
         <h3 style="margin-top: 0; display: flex; align-items: center; gap: 10px;">
           <span style="font-size: 24px;">🎮</span>
           Interactive Playground
         </h3>
         
         <div style="display: grid; grid-template-columns: 280px 1fr; gap: 30px; margin-top: 25px;">
-          <div style="background: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb; height: fit-content;">
+          <div style="background:var(--bg-secondary,#f9fafb); padding: 20px; border-radius: 8px; border:1px solid var(--border-default,#e5e7eb); height: fit-content;">
             <h4 style="margin: 0 0 15px 0;">Settings</h4>
             
             <div style="display: flex; flex-direction: column; gap: 16px;">
@@ -405,21 +404,21 @@ export function initAnchorDemo() {
 
           <div>
             <h4 style="margin: 0 0 10px;">Preview</h4>
-            <div style="border: 1px solid #e5e7eb; border-radius: 8px; height: 500px; overflow: hidden; display: flex;">
+            <div style="border:1px solid var(--border-default,#e5e7eb); border-radius: 8px; height: 500px; overflow: hidden; display: flex;">
                <!-- Preview Layout depends on orientation -->
                <div id="playgroundPreviewArea" style="width: 100%; height: 100%; overflow: auto; scroll-behavior: smooth; position: relative;">
                   <div style="padding: 20px;">
-                      <div id="play-anchor-container" style="position: sticky; top: 0; z-index: 10; padding: 10px; background: white; margin-bottom: 20px;"></div>
+                      <div id="play-anchor-container" style="position: sticky; top: 0; z-index: 10; padding: 10px; background:var(--bg-primary,white); margin-bottom: 20px;"></div>
                       
-                      <div id="play-s1" style="height: 400px; background: #fee2e2; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
+                      <div id="play-s1" style="height: 400px; background:var(--accent-red-soft,#fee2e2); border-radius: 8px; padding: 20px; margin-bottom: 20px;">
                          <h3>Section 1</h3>
                          <p>Scroll content...</p>
                       </div>
-                      <div id="play-s2" style="height: 400px; background: #fef3c7; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
+                      <div id="play-s2" style="height: 400px; background:var(--accent-yellow-soft,#fef3c7); border-radius: 8px; padding: 20px; margin-bottom: 20px;">
                          <h3>Section 2</h3>
                          <p>Scroll content...</p>
                       </div>
-                      <div id="play-s3" style="height: 400px; background: #d1fae5; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
+                      <div id="play-s3" style="height: 400px; background:var(--accent-green-soft,#d1fae5); border-radius: 8px; padding: 20px; margin-bottom: 20px;">
                          <h3>Section 3</h3>
                          <p>Scroll content...</p>
                       </div>

package/dist/collection/assets/js/demos/animate-on-scroll-demo.js

@@ -24,7 +24,7 @@ export function initAnimateOnScrollDemo() {
           </ui-animate-on-scroll>
           
           <ui-animate-on-scroll enter-class="blur-reveal" blur-amount="20px" duration="1200">
-            <div class="demo-box" style="background: #8b5cf6;">Blur Reveal</div>
+            <div class="demo-box" style="background: var(--accent-purple,#8b5cf6);">Blur Reveal</div>
           </ui-animate-on-scroll>
         </div>
         <pre class="demo-code"><code>&lt;ui-animate-on-scroll enter-class="blur-reveal"&gt;...&lt;/ui-animate-on-scroll&gt;</code></pre>
@@ -36,13 +36,13 @@ export function initAnimateOnScrollDemo() {
         <p>Utilize the perspective engine for high-end 3D transitions.</p>
         <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px;">
           <ui-animate-on-scroll enter-class="flip-in-x" perspective="800px">
-            <div class="demo-box" style="background: #f59e0b; height: 80px;">Flip X</div>
+            <div class="demo-box" style="background: var(--accent-yellow,#f59e0b); height: 80px;">Flip X</div>
           </ui-animate-on-scroll>
           <ui-animate-on-scroll enter-class="flip-in-y" perspective="800px">
-            <div class="demo-box" style="background: #ef4444; height: 80px;">Flip Y</div>
+            <div class="demo-box" style="background: var(--accent-red,#ef4444); height: 80px;">Flip Y</div>
           </ui-animate-on-scroll>
           <ui-animate-on-scroll enter-class="roll-in">
-            <div class="demo-box" style="background: #ec4899; height: 80px;">Roll In</div>
+            <div class="demo-box" style="background: var(--accent-pink,#ec4899); height: 80px;">Roll In</div>
           </ui-animate-on-scroll>
           <ui-animate-on-scroll enter-class="zoom-in-up">
             <div class="demo-box" style="background: #06b6d4; height: 80px;">Zoom In Up</div>
@@ -91,7 +91,7 @@ export function initAnimateOnScrollDemo() {
 
       <!-- 5. Back Effects (Premium) -->
       <div class="demo-card">
-        <div class="badge" style="float: right; background: #6366f1; color: white; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700;">PREMIUM</div>
+        <div class="badge" style="float: right; background: var(--accent-indigo,#6366f1); color: white; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700;">PREMIUM</div>
         <h3>Back Entrance Effects</h3>
         <p>High-end entrance animations with a slight overshoot for a physical feel.</p>
         <div style="display: flex; flex-direction: column; gap: 16px; margin-top: 24px;">
@@ -107,14 +107,14 @@ export function initAnimateOnScrollDemo() {
 
       <!-- 6. Parallax Scrubbing -->
       <div class="demo-card">
-        <div class="badge" style="float: right; background: #ec4899; color: white; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700;">SCROLL SYNC</div>
+        <div class="badge" style="float: right; background: var(--accent-pink,#ec4899); color: white; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700;">SCROLL SYNC</div>
         <h3>Parallax Scrubbing</h3>
         <p>Animation progress is mapped directly to your scroll position. Now features smooth LERP interpolation.</p>
-        <div style="background: #f8fafc; border-radius: 12px; padding: 40px; margin-top: 24px; text-align: center; overflow: hidden;">
+        <div style="background:var(--bg-secondary,#f8fafc); border-radius: 12px; padding: 40px; margin-top: 24px; text-align: center; overflow: hidden;">
           <ui-animate-on-scroll scrub="true" enter-class="rotate-in" duration="1000">
             <div style="font-size: 80px;">⚙️</div>
           </ui-animate-on-scroll>
-          <p style="margin-top: 16px; font-weight: 600; color: #64748b;">(Scroll the page to rotate me smoothly)</p>
+          <p style="margin-top: 16px; font-weight: 600; color:var(--text-secondary,#64748b);">(Scroll the page to rotate me smoothly)</p>
         </div>
         <pre class="demo-code"><code>&lt;ui-animate-on-scroll scrub="true"&gt;...&lt;/ui-animate-on-scroll&gt;</code></pre>
       </div>
@@ -134,14 +134,14 @@ export function initAnimateOnScrollDemo() {
           <div class="demo-card-inner">
             <h4>Mirror Reset</h4>
             <ui-animate-on-scroll enter-class="zoom-in" mirror="true" duration="800">
-              <div class="demo-box" style="background: #f59e0b;">Resets on Scroll Up</div>
+              <div class="demo-box" style="background: var(--accent-yellow,#f59e0b);">Resets on Scroll Up</div>
             </ui-animate-on-scroll>
           </div>
 
           <div class="demo-card-inner">
             <h4>Transform Origin</h4>
             <ui-animate-on-scroll enter-class="flip-in-x" transform-origin="top" duration="1000">
-              <div class="demo-box" style="background: #ef4444;">Top Hinged Flip</div>
+              <div class="demo-box" style="background: var(--accent-red,#ef4444);">Top Hinged Flip</div>
             </ui-animate-on-scroll>
           </div>
         </div>
@@ -160,8 +160,8 @@ export function initAnimateOnScrollDemo() {
         box-shadow: 0 4px 12px rgba(0,0,0,0.1);
       }
       .demo-item {
-        background: white;
-        border: 1px solid #e2e8f0;
+        background:var(--bg-primary,white);
+        border:1px solid var(--border-default,#e2e8f0);
         padding: 24px;
         border-radius: 12px;
         text-align: center;

package/dist/collection/assets/js/demos/aside-panel-demo.js

@@ -85,7 +85,7 @@ export function initAsidePanelDemo() {
         <p style="opacity: 0.7; margin-bottom: 24px;">The apex of technical workspace orchestration. Hands-free voice control and 3D depth tilt.</p>
         
         <div class="demo-mastery-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-bottom: 32px;">
-          <div style="background: #f8fafc; border: 1px solid #e2e8f0; padding: 24px; border-radius: 16px;">
+          <div style="background:var(--bg-secondary,#f8fafc); border:1px solid var(--border-default,#e2e8f0); padding: 24px; border-radius: 16px;">
             <h4 style="margin-top:0;">🤖 Industrial Control</h4>
             <div style="display: flex; flex-direction: column; gap: 10px;">
               <ui-button id="btnTogglePrimary" variant="outline" color="success" label="⚡ Toggle Primary Panel"></ui-button>
@@ -93,7 +93,7 @@ export function initAsidePanelDemo() {
               <ui-button id="btnInitVoice" variant="outline" color="success" label="🎙️ Audio Commands: ENABLE" style="font-family: monospace;"></ui-button>
             </div>
           </div>
-          <div style="background: #f8fafc; border: 1px solid #e2e8f0; padding: 24px; border-radius: 16px;">
+          <div style="background:var(--bg-secondary,#f8fafc); border:1px solid var(--border-default,#e2e8f0); padding: 24px; border-radius: 16px;">
             <h4 style="margin-top:0;">✨ High-Fidelity Themes</h4>
             <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
               <ui-button id="themeDefault" variant="outline" color="secondary" label="Default"></ui-button>
@@ -116,9 +116,9 @@ export function initAsidePanelDemo() {
                 > STREAMING TELEMETRY (98.2kbps)
              </div>
              <p style="margin-top:20px; font-size:14px;">Try the <b>Voice Commands</b>:<br> "Open Panel", "Collapse Panel", "Expand Side", "Close Side".</p>
-             <div style="margin-top:20px; padding:15px; border:1px solid #e2e8f0; border-radius:10px;">
+             <div style="margin-top:20px; padding:15px; border:1px solid var(--border-default,#e2e8f0); border-radius:10px;">
                 <h4 style="margin:0 0 10px; font-size:12px; text-transform:uppercase;">3D Depth Sensor</h4>
-                <p style="margin:0; font-size:12px; color:#64748b;">The content tilts in 3D space based on your mouse coordinates.</p>
+                <p style="margin:0; font-size:12px; color:var(--text-secondary,#64748b);">The content tilts in 3D space based on your mouse coordinates.</p>
              </div>
           </div>
           <div slot="footer">
@@ -216,7 +216,7 @@ export function initAsidePanelDemo() {
             </div>
             <div slot="content">
               <p>Try resizing this panel or closing it, then refresh the page. It will remember its exact state!</p>
-              <div style="background: #f1f5f9; padding: 15px; border-radius: 8px; margin-top: 20px;">
+              <div style="background:var(--bg-tertiary,#f1f5f9); padding: 15px; border-radius: 8px; margin-top: 20px;">
                 <p style="margin: 0; font-size: 13px; color: #475569;">Uses <code>localStorage</code> linked to the <code>persist-key</code> property.</p>
               </div>
             </div>
@@ -311,7 +311,7 @@ export function initAsidePanelDemo() {
               <ui-button id="btnSubmitFeedback" variant="outline" color="success" label="Submit" style="flex: 1"></ui-button>
            </div>
            
-           <p style="text-align: center; font-size: 11px; color: #94a3b8; margin-top: 24px;">Powered by <b>Medallia</b></p>
+           <p style="text-align: center; font-size: 11px; color:var(--text-secondary,#64748b); margin-top: 24px;">Powered by <b>Medallia</b></p>
         </div>
       </ui-aside-panel>
 
@@ -332,8 +332,8 @@ export function initAsidePanelDemo() {
            </div>
         </div>
         <div slot="content">
-           <p style="color: #64748b; font-size: 14px; line-height: 1.6;">This panel is vertically centered on the screen edge using <code>floating-align="center"</code>.</p>
-           <div style="margin-top: 20px; padding: 16px; background: #f1f5f9; border-radius: 12px; font-size: 13px;">
+           <p style="color:var(--text-secondary,#64748b); font-size: 14px; line-height: 1.6;">This panel is vertically centered on the screen edge using <code>floating-align="center"</code>.</p>
+           <div style="margin-top: 20px; padding: 16px; background:var(--bg-tertiary,#f1f5f9); border-radius: 12px; font-size: 13px;">
               Perfect for quick tool selections or contextual utilities.
            </div>
         </div>
@@ -368,8 +368,8 @@ export function initAsidePanelDemo() {
          <ui-button id="btnFlyBottom" variant="outline" color="danger" label="⬇️ Fly Bottom" style="height: 60px;"></ui-button>
       </div>
       
-      <div style="background: #fff; padding: 30px; border-radius: 16px; border: 1px solid #e2e8f0; text-align: center;">
-         <p style="color: #64748b; font-size: 14px;">Click the buttons above to trigger the respective directional flyouts.<br>They are configured with <code>variant="floating"</code> and <code>floating-align="center"</code>.</p>
+      <div style="background: var(--bg-primary, #fff); padding: 30px; border-radius: 16px; border:1px solid var(--border-default,#e2e8f0); text-align: center;">
+         <p style="color:var(--text-secondary,#64748b); font-size: 14px;">Click the buttons above to trigger the respective directional flyouts.<br>They are configured with <code>variant="floating"</code> and <code>floating-align="center"</code>.</p>
       </div>
 
       <ui-aside-panel id="flyLeft" direction="left" variant="floating" floating-align="center" size="320px" secondary-size="450px" transition-duration="0.5s">
@@ -378,37 +378,37 @@ export function initAsidePanelDemo() {
             <h3 style="margin:0;">Left Centered</h3>
          </div>
          <div slot="content">
-            <p style="color: #64748b;">A floating utility panel sliding smoothly from the left edge. The 0.5s transition ensures a premium feel.</p>
+            <p style="color:var(--text-secondary,#64748b);">A floating utility panel sliding smoothly from the left edge. The 0.5s transition ensures a premium feel.</p>
          </div>
       </ui-aside-panel>
 
       <ui-aside-panel id="flyRight" direction="right" variant="floating" floating-align="center" size="320px" secondary-size="450px" transition-duration="0.5s">
          <div slot="header" style="display: flex; align-items: center; gap: 10px;">
-            <div style="width: 8px; height: 24px; background: #8b5cf6; border-radius: 99px;"></div>
+            <div style="width: 8px; height: 24px; background: var(--accent-purple,#8b5cf6); border-radius: 99px;"></div>
             <h3 style="margin:0;">Right Centered</h3>
          </div>
          <div slot="content">
-            <p style="color: #64748b;">The symmetrical counterpart for the right side of the workspace.</p>
+            <p style="color:var(--text-secondary,#64748b);">The symmetrical counterpart for the right side of the workspace.</p>
          </div>
       </ui-aside-panel>
 
       <ui-aside-panel id="flyTop" direction="top" variant="floating" floating-align="center" size="160px" secondary-size="600px" transition-duration="0.6s">
          <div slot="header" style="display: flex; align-items: center; gap: 10px;">
-            <div style="width: 24px; height: 8px; background: #f59e0b; border-radius: 99px;"></div>
+            <div style="width: 24px; height: 8px; background: var(--accent-yellow,#f59e0b); border-radius: 99px;"></div>
             <h3 style="margin:0;">Top Banner</h3>
          </div>
          <div slot="content">
-            <p style="color: #64748b; margin: 0;">A horizontal floating notification bar sliding from the top edge. Perfect for priority broadcasts.</p>
+            <p style="color:var(--text-secondary,#64748b); margin: 0;">A horizontal floating notification bar sliding from the top edge. Perfect for priority broadcasts.</p>
          </div>
       </ui-aside-panel>
 
       <ui-aside-panel id="flyBottom" direction="bottom" variant="floating" floating-align="center" size="160px" secondary-size="600px" transition-duration="0.6s">
          <div slot="header" style="display: flex; align-items: center; gap: 10px;">
-            <div style="width: 24px; height: 8px; background: #ef4444; border-radius: 999px;"></div>
+            <div style="width: 24px; height: 8px; background: var(--accent-red,#ef4444); border-radius: 999px;"></div>
             <h3 style="margin:0;">Bottom Toolbar</h3>
          </div>
          <div slot="content">
-            <p style="color: #64748b; margin: 0;">Floating contextual controls appearing from the bottom. Great for secondary actions or player controls.</p>
+            <p style="color:var(--text-secondary,#64748b); margin: 0;">Floating contextual controls appearing from the bottom. Great for secondary actions or player controls.</p>
          </div>
       </ui-aside-panel>
     </div>
@@ -471,14 +471,14 @@ export function initAsidePanelDemo() {
               <h3>1. Overview</h3>
               <p>The Sovereign Aside Panel is a high-fidelity workspace component designed for technical orchestration.</p>
               
-              <div style="background: #f1f5f9; padding: 15px; border-radius: 8px; border-left: 4px solid #10b981; margin: 20px 0;">
+              <div style="background:var(--bg-tertiary,#f1f5f9); padding: 15px; border-radius: 8px; border-left: 4px solid #10b981; margin: 20px 0;">
                 <h4 style="margin:0 0 5px; color: #1e3a8a;">Pro Tip</h4>
                 <p style="margin:0; font-size: 13px;">Use the Alt + Arrows shortcut to resize the panel while it is open.</p>
               </div>
 
               <h3>2. Attributes</h3>
               <table style="width: 100%; border-collapse: collapse; font-size: 13px;">
-                <tr style="background: #f8fafc; border-bottom: 1px solid #e2e8f0;"><th style="padding:10px; text-align:left;">Prop</th><th style="padding:10px; text-align:left;">Description</th></tr>
+                <tr style="background:var(--bg-secondary,#f8fafc); border-bottom:1px solid var(--border-default,#e2e8f0);"><th style="padding:10px; text-align:left;">Prop</th><th style="padding:10px; text-align:left;">Description</th></tr>
                 <tr style="border-bottom: 1px solid #f1f5f9;"><td style="padding:10px;"><code>direction</code></td><td style="padding:10px;">Edge of origin</td></tr>
                 <tr style="border-bottom: 1px solid #f1f5f9;"><td style="padding:10px;"><code>variant</code></td><td style="padding:10px;">Thematic engine</td></tr>
                 <tr style="border-bottom: 1px solid #f1f5f9;"><td style="padding:10px;"><code>resizable</code></td><td style="padding:10px;">Enable UX scaling</td></tr>
@@ -534,7 +534,7 @@ export function initAsidePanelDemo() {
            <div slot="header"><h3>Motion Engine</h3></div>
            <div slot="content">
               <p>Current kinetics: <b>${type}</b></p>
-              <p style="font-size: 13px; color: #64748b;">The transition engine scales the opacity and transform based on this mode.</p>
+              <p style="font-size: 13px; color:var(--text-secondary,#64748b);">The transition engine scales the opacity and transform based on this mode.</p>
            </div>
         </ui-aside-panel>
       </div>
@@ -558,7 +558,7 @@ export function initAsidePanelDemo() {
            <div slot="header"><h3>Transition Timing</h3></div>
            <div slot="content">
               <p>Current timing: <b>${speed}</b></p>
-              <p style="font-size: 13px; color: #64748b;">Adjust the industrial speed of the Kinetic engine.</p>
+              <p style="font-size: 13px; color:var(--text-secondary,#64748b);">Adjust the industrial speed of the Kinetic engine.</p>
            </div>
         </ui-aside-panel>
       </div>
@@ -663,20 +663,20 @@ export function initAsidePanelDemo() {
 
           <ui-aside-panel id="rightPanel" direction="right" size="400px">
             <div slot="header">
-              <h3 style="margin: 0 0 8px; font-size: 20px; color: #1f2937;">Right Panel</h3>
-              <p style="margin: 0; color: #6b7280; font-size: 14px;">Panel with header, content, and footer slots</p>
+              <h3 style="margin: 0 0 8px; font-size: 20px; color: var(--text-primary);">Right Panel</h3>
+              <p style="margin: 0; color: var(--text-secondary); font-size: 14px;">Panel with header, content, and footer slots</p>
             </div>
             
             <div slot="content">
-              <p style="color: #6b7280; margin-bottom: 16px;">This panel demonstrates the slot-based structure:</p>
-              <div style="padding: 12px; background-color: #dbeafe; border-radius: 6px; margin-bottom: 12px;">
-                <p style="margin: 0; color: #1e40af; font-size: 14px;"><strong>Header Slot:</strong> For titles and descriptions</p>
+              <p style="color: var(--text-secondary); margin-bottom: 16px;">This panel demonstrates the slot-based structure:</p>
+              <div style="padding: 12px; background-color: var(--color-primary-subtle, #dbeafe); border-radius: 6px; margin-bottom: 12px;">
+                <p style="margin: 0; color: var(--color-primary, #1e40af); font-size: 14px;"><strong>Header Slot:</strong> For titles and descriptions</p>
               </div>
-              <div style="padding: 12px; background-color: #f0fdf4; border-radius: 6px; margin-bottom: 12px;">
-                <p style="margin: 0; color: #166534; font-size: 14px;"><strong>Content Slot:</strong> For main panel content</p>
+              <div style="padding: 12px; background-color: var(--color-success-subtle, #f0fdf4); border-radius: 6px; margin-bottom: 12px;">
+                <p style="margin: 0; color: var(--color-success, #166534); font-size: 14px;"><strong>Content Slot:</strong> For main panel content</p>
               </div>
-              <div style="padding: 12px; background-color: #fef3c7; border-radius: 6px;">
-                <p style="margin: 0; color: #92400e; font-size: 14px;"><strong>Footer Slot:</strong> For actions and buttons</p>
+              <div style="padding: 12px; background-color: var(--color-warning-subtle, #fef3c7); border-radius: 6px;">
+                <p style="margin: 0; color: var(--color-warning, #92400e); font-size: 14px;"><strong>Footer Slot:</strong> For actions and buttons</p>
               </div>
             </div>
             
@@ -690,13 +690,13 @@ export function initAsidePanelDemo() {
 
           <ui-aside-panel id="leftPanel" direction="left" size="350px">
             <div slot="header">
-              <h3 style="margin: 0; font-size: 18px; color: #1f2937;">Navigation Menu</h3>
+              <h3 style="margin: 0; font-size: 18px; color: var(--text-primary);">Navigation Menu</h3>
             </div>
             <div slot="content">
               <ul style="margin: 0; padding: 0; list-style: none;">
-                <li style="padding: 12px; border-bottom: 1px solid #e5e7eb; cursor: pointer;">🏠 Dashboard</li>
-                <li style="padding: 12px; border-bottom: 1px solid #e5e7eb; cursor: pointer;">📊 Analytics</li>
-                <li style="padding: 12px; border-bottom: 1px solid #e5e7eb; cursor: pointer;">⚙️ Settings</li>
+                <li style="padding: 12px; border-bottom: 1px solid var(--border-subtle, #e5e7eb); cursor: pointer;">🏠 Dashboard</li>
+                <li style="padding: 12px; border-bottom: 1px solid var(--border-subtle, #e5e7eb); cursor: pointer;">📊 Analytics</li>
+                <li style="padding: 12px; border-bottom: 1px solid var(--border-subtle, #e5e7eb); cursor: pointer;">⚙️ Settings</li>
               </ul>
             </div>
           </ui-aside-panel>
@@ -722,29 +722,29 @@ export function initAsidePanelDemo() {
 
           <ui-aside-panel id="topPanel" direction="top" size="250px">
             <div style="padding: 20px;">
-              <h3 style="margin: 0 0 12px;">Top Panel</h3>
-              <p style="color: #6b7280; margin: 0;">Useful for notifications, banners, or temporary messages.</p>
+              <h3 style="margin: 0 0 12px; color: var(--text-primary);">Top Panel</h3>
+              <p style="color: var(--text-secondary); margin: 0;">Useful for notifications, banners, or temporary messages.</p>
             </div>
           </ui-aside-panel>
 
           <ui-aside-panel id="rightPanel2" direction="right" size="320px">
             <div style="padding: 20px;">
-              <h3 style="margin: 0 0 12px;">Right Panel</h3>
-              <p style="color: #6b7280; margin: 0;">Common for settings, filters, or additional details.</p>
+              <h3 style="margin: 0 0 12px; color: var(--text-primary);">Right Panel</h3>
+              <p style="color: var(--text-secondary); margin: 0;">Common for settings, filters, or additional details.</p>
             </div>
           </ui-aside-panel>
 
           <ui-aside-panel id="bottomPanel" direction="bottom" size="200px">
             <div style="padding: 20px;">
-              <h3 style="margin: 0 0 12px;">Bottom Panel</h3>
-              <p style="color: #6b7280; margin: 0;">Great for cookie notices, chat widgets, or player controls.</p>
+              <h3 style="margin: 0 0 12px; color: var(--text-primary);">Bottom Panel</h3>
+              <p style="color: var(--text-secondary); margin: 0;">Great for cookie notices, chat widgets, or player controls.</p>
             </div>
           </ui-aside-panel>
 
           <ui-aside-panel id="leftPanel2" direction="left" size="300px">
             <div style="padding: 20px;">
-              <h3 style="margin: 0 0 12px;">Left Panel</h3>
-              <p style="color: #6b7280; margin: 0;">Perfect for navigation menus or tool palettes.</p>
+              <h3 style="margin: 0 0 12px; color: var(--text-primary);">Left Panel</h3>
+              <p style="color: var(--text-secondary); margin: 0;">Perfect for navigation menus or tool palettes.</p>
             </div>
           </ui-aside-panel>
         </div>
@@ -856,8 +856,8 @@ export function initAsidePanelDemo() {
     if (!container) return;
 
     container.innerHTML = `
-        <div class="demo-block master-playground" style="background: white; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.05); overflow: hidden; border: 1px solid #e2e8f0;">
-          <div style="background: #0f172a; padding: 24px; color: white;">
+        <div class="demo-block master-playground" style="background:var(--bg-primary,white); border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.05); overflow: hidden; border:1px solid var(--border-default,#e2e8f0);">
+          <div style="background: var(--bg-secondary, #f8fafc); padding: 24px; color: var(--text-primary); border-bottom: 1px solid var(--border-default);">
             <h3 style="margin:0; display: flex; align-items: center; gap: 10px;">🎮 Grand Maestro Control Center</h3>
             <p style="margin: 8px 0 0; opacity: 0.7; font-size: 14px;">Orchestrate every Sovereign-tier parameter in real-time.</p>
           </div>
@@ -866,7 +866,7 @@ export function initAsidePanelDemo() {
             <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; margin-bottom: 32px;">
               <!-- Section 1: Spatial Layout -->
               <div class="control-card">
-                <h4 style="margin: 0 0 16px; font-size: 13px; text-transform: uppercase; color: #64748b; border-bottom: 1px solid #f1f5f9; padding-bottom: 8px;">📐 Spatial Layout</h4>
+                <h4 style="margin: 0 0 16px; font-size: 13px; text-transform: uppercase; color:var(--text-secondary,#64748b); border-bottom: 1px solid #f1f5f9; padding-bottom: 8px;">📐 Spatial Layout</h4>
                 <div style="display: flex; flex-direction: column; gap: 12px;">
                    <ui-dropdown label="Direction" id="asideDirection" value="right" options='[{"label":"Right","value":"right"},{"label":"Left","value":"left"},{"label":"Top","value":"top"},{"label":"Bottom","value":"bottom"}]'></ui-dropdown>
                    <ui-input label="Base Size" id="asideSize" value="400px"></ui-input>
@@ -880,7 +880,7 @@ export function initAsidePanelDemo() {
 
               <!-- Section 2: Visual High-Fidelity -->
               <div class="control-card">
-                <h4 style="margin: 0 0 16px; font-size: 13px; text-transform: uppercase; color: #64748b; border-bottom: 1px solid #f1f5f9; padding-bottom: 8px;">✨ Visual Fidelity</h4>
+                <h4 style="margin: 0 0 16px; font-size: 13px; text-transform: uppercase; color:var(--text-secondary,#64748b); border-bottom: 1px solid #f1f5f9; padding-bottom: 8px;">✨ Visual Fidelity</h4>
                 <div style="display: flex; flex-direction: column; gap: 12px;">
                    <ui-dropdown label="Theme Engine" id="asideTheme" value="default" options='[{"label":"Default","value":"default"},{"label":"Glass","value":"glass"},{"label":"Radiant","value":"radiant"},{"label":"Zenith","value":"zenith"},{"label":"None (Transparent)","value":"none"}]'></ui-dropdown>
                    <ui-input label="Backdrop Blur" id="asideBlur" value="0" placeholder="e.g., 8px"></ui-input>
@@ -901,7 +901,7 @@ export function initAsidePanelDemo() {
 
               <!-- Section 3: Industrial & Sovereign -->
               <div class="control-card">
-                <h4 style="margin: 0 0 16px; font-size: 13px; text-transform: uppercase; color: #64748b; border-bottom: 1px solid #f1f5f9; padding-bottom: 8px;">👑 Sovereign Controls</h4>
+                <h4 style="margin: 0 0 16px; font-size: 13px; text-transform: uppercase; color:var(--text-secondary,#64748b); border-bottom: 1px solid #f1f5f9; padding-bottom: 8px;">👑 Sovereign Controls</h4>
                 <div style="display: flex; flex-direction: column; gap: 12px;">
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                       <ui-checkbox label="Haptics 🔊" id="asideHaptic"></ui-checkbox>
@@ -919,7 +919,7 @@ export function initAsidePanelDemo() {
 
               <!-- Section 4: Safety & Workflow -->
               <div class="control-card">
-                <h4 style="margin: 0 0 16px; font-size: 13px; text-transform: uppercase; color: #64748b; border-bottom: 1px solid #f1f5f9; padding-bottom: 8px;">🛡️ Safety & Workflow</h4>
+                <h4 style="margin: 0 0 16px; font-size: 13px; text-transform: uppercase; color:var(--text-secondary,#64748b); border-bottom: 1px solid #f1f5f9; padding-bottom: 8px;">🛡️ Safety & Workflow</h4>
                 <div style="display: flex; flex-direction: column; gap: 12px;">
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                       <ui-checkbox label="Locked 🔒" id="asidePinned"></ui-checkbox>
@@ -945,7 +945,7 @@ export function initAsidePanelDemo() {
 
               <!-- Section 5: Metadata & Limits -->
               <div class="control-card">
-                <h4 style="margin: 0 0 16px; font-size: 13px; text-transform: uppercase; color: #64748b; border-bottom: 1px solid #f1f5f9; padding-bottom: 8px;">📊 Constraints & Meta</h4>
+                <h4 style="margin: 0 0 16px; font-size: 13px; text-transform: uppercase; color:var(--text-secondary,#64748b); border-bottom: 1px solid #f1f5f9; padding-bottom: 8px;">📊 Constraints & Meta</h4>
                 <div style="display: flex; flex-direction: column; gap: 12px;">
                    <ui-input label="Status Badge" id="asideBadge" placeholder="LIVE"></ui-input>
                    <ui-input label="Sync Group" id="asideSync" placeholder="diag-stream"></ui-input>
@@ -958,7 +958,7 @@ export function initAsidePanelDemo() {
             
             <div style="display: flex; gap: 16px;">
               <ui-button id="openInteractivePanel" variant="outline" color="success" label="🚀 SUMMON CONFIGURED ENGINE" size="large" style="flex: 2;"></ui-button>
-              <ui-button id="dismissInteractivePanel" variant="outline" color="secondary" label="DISMISS" size="large" style="flex: 1; border: 1px solid #e2e8f0;"></ui-button>
+              <ui-button id="dismissInteractivePanel" variant="outline" color="secondary" label="DISMISS" size="large" style="flex: 1; border:1px solid var(--border-default,#e2e8f0);"></ui-button>
             </div>
           </div>
 
@@ -969,7 +969,7 @@ export function initAsidePanelDemo() {
             </div>
             <div slot="content">
                <p>This panel is linked to the <b>Grand Maestro Control Center</b>. Adjust the parameters above to see real-time updates to layout, aesthetics, and industrial behaviors.</p>
-               <div style="height: 1000px; background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0;">
+               <div style="height: 1000px; background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); padding: 20px; border-radius: 8px; border:1px solid var(--border-default,#e2e8f0);">
                   <h4>Diagnostic Scroll Region</h4>
                   <p>Test backdrop filters, sticky content, and parallax behavior here.</p>
                </div>