atomicuilibrary 0.0.1 → 0.1.3

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

@@ -48,14 +48,14 @@ export function initAsidePanelDemo() {
          <h4 style="margin: 0 0 8px; font-size: 10px; text-transform: uppercase; color: var(--text-secondary); letter-spacing: 0.1em;">🎬 Animation Mastery</h4>
          <div style="display: grid; grid-template-columns: 1fr; gap: 6px;">
            <div style="display: flex; gap: 4px;">
-             <ui-button id="btnAnimSlide" variant="outline" color="success" label="Slide In-Out" size="md"yle="flex:1"></ui-button>
-             <ui-button id="btnAnimFade" variant="outline" color="secondary" label="Fade" size="md"yle="flex:1"></ui-button>
-             <ui-button id="btnAnimScale" variant="outline" color="secondary" label="Scale" size="md"yle="flex:1"></ui-button>
+             <ui-button id="btnAnimSlide" variant="outline" color="success" label="Slide In-Out" size="md" style="flex:1"></ui-button>
+             <ui-button id="btnAnimFade" variant="outline" color="secondary" label="Fade" size="md" style="flex:1"></ui-button>
+             <ui-button id="btnAnimScale" variant="outline" color="secondary" label="Scale" size="md" style="flex:1"></ui-button>
            </div>
            <div style="display: flex; gap: 4px;">
-             <ui-button id="btnSpeed01" variant="outline" color="secondary" label="⚡ 0.1s" size="md"yle="flex:1"></ui-button>
-             <ui-button id="btnSpeed1" variant="outline" color="success" label="🎯 1s" size="md"yle="flex:1"></ui-button>
-             <ui-button id="btnSpeed2" variant="outline" color="secondary" label="🎬 2s" size="md"yle="flex:1"></ui-button>
+             <ui-button id="btnSpeed01" variant="outline" color="secondary" label="⚡ 0.1s" size="md" style="flex:1"></ui-button>
+             <ui-button id="btnSpeed1" variant="outline" color="success" label="🎯 1s" size="md" style="flex:1"></ui-button>
+             <ui-button id="btnSpeed2" variant="outline" color="secondary" label="🎬 2s" size="md" style="flex:1"></ui-button>
            </div>
          </div>
        </div>
@@ -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>