atomicuilibrary 0.1.0 → 0.1.3

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

@@ -7,68 +7,65 @@ export function initDividerDemo() {
     <p style="margin-top: 0; opacity: 0.7; font-size: 14px; margin-bottom: 24px;">Enhanced divider with 30+ features: animations, patterns, interactive capabilities, and more!</p>
 
     <div class="demo-controls" style="margin: 20px 0; display: flex; gap: 8px; flex-wrap: wrap;">
-       <ui-button id="btnApex" label="✨ Apex Suite"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnApex4" label="🌌 Apex 4.0"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnPlay" label="🎮 Playground"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnBasic" label="📐 Basic"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnSlots" label="🎯 Slots"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnAnim" label="✨ Animations"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnPatt" label="🎨 Patterns"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnInter" label="👆 Interactive"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnEff" label="💫 Effects"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnSpac" label="📏 Spacing"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnBdge" label="🔢 Badges"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnShap" label="🔺 Shapes"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnVert" label="I Vertical"  size="md"riant="outline"></ui-button>
-       <ui-button id="btnResp" label="📱 Responsive"  size="md"riant="outline"></ui-button>
+       <ui-button id="btnApex" label="✨ Apex Suite" size="md" variant="outline"></ui-button>
+       <ui-button id="btnApex4" label="🌌 Apex 4.0" size="md" variant="outline"></ui-button>
+       <ui-button id="btnPlay" label="🎮 Playground" size="md" variant="outline"></ui-button>
+       <ui-button id="btnBasic" label="📐 Basic" size="md" variant="outline"></ui-button>
+       <ui-button id="btnSlots" label="🎯 Slots" size="md" variant="outline"></ui-button>
+       <ui-button id="btnAnim" label="✨ Animations" size="md" variant="outline"></ui-button>
+       <ui-button id="btnPatt" label="🎨 Patterns" size="md" variant="outline"></ui-button>
+       <ui-button id="btnInter" label="👆 Interactive" size="md" variant="outline"></ui-button>
+       <ui-button id="btnEff" label="💫 Effects" size="md" variant="outline"></ui-button>
+       <ui-button id="btnSpac" label="📏 Spacing" size="md" variant="outline"></ui-button>
+       <ui-button id="btnBdge" label="🔢 Badges" size="md" variant="outline"></ui-button>
+       <ui-button id="btnShap" label="🔺 Shapes" size="md" variant="outline"></ui-button>
+       <ui-button id="btnVert" label="I Vertical" size="md" variant="outline"></ui-button>
+       <ui-button id="btnResp" label="📱 Responsive" size="md" variant="outline"></ui-button>
     </div>
 
     <div id="dividerDemoContainer" style="margin-top: 20px;"></div>
   `;
 
   const navMap = {
-    btnApex: 'showDividerLegendary',
-    btnApex4: 'showDividerApex4',
-    btnPlay: 'showDividerPlayground',
-    btnBasic: 'showDividerBasic',
-    btnSlots: 'showDividerSlots',
-    btnAnim: 'showDividerAnimations',
-    btnPatt: 'showDividerPatterns',
-    btnInter: 'showDividerInteractive',
-    btnEff: 'showDividerEffects',
-    btnSpac: 'showDividerSpacing',
-    btnBdge: 'showDividerBadges',
-    btnShap: 'showDividerShapesLines',
-    btnVert: 'showDividerVertical',
-    btnResp: 'showDividerResponsive',
+    btnApex: showDividerLegendary,
+    btnApex4: showDividerApex4,
+    btnPlay: showDividerPlayground,
+    btnBasic: showDividerBasic,
+    btnSlots: showDividerSlots,
+    btnAnim: showDividerAnimations,
+    btnPatt: showDividerPatterns,
+    btnInter: showDividerInteractive,
+    btnEff: showDividerEffects,
+    btnSpac: showDividerSpacing,
+    btnBdge: showDividerBadges,
+    btnShap: showDividerShapesLines,
+    btnVert: showDividerVertical,
+    btnResp: showDividerResponsive,
+  };
+
+  const updateActiveDemoButton = selectedId => {
+    Object.keys(navMap).forEach(id => {
+      const btn = document.getElementById(id);
+      if (btn) {
+        btn.selected = id === selectedId;
+      }
+    });
   };
 
   setTimeout(() => {
-    Object.entries(navMap).forEach(([id, funcName]) => {
+    Object.entries(navMap).forEach(([id, func]) => {
       const btn = document.getElementById(id);
       if (btn) {
         btn.addEventListener('click', () => {
-          const fn = {
-            showDividerLegendary,
-            showDividerApex4,
-            showDividerPlayground,
-            showDividerBasic,
-            showDividerSlots,
-            showDividerAnimations,
-            showDividerPatterns,
-            showDividerInteractive,
-            showDividerEffects,
-            showDividerSpacing,
-            showDividerBadges,
-            showDividerShapesLines,
-            showDividerVertical,
-            showDividerResponsive,
-          }[funcName];
-          if (fn) fn();
+          if (func) {
+            func();
+            updateActiveDemoButton(id);
+          }
         });
       }
     });
 
+    updateActiveDemoButton('btnApex');
     showDividerLegendary();
   }, 100);
 
@@ -80,7 +77,7 @@ export function initDividerDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3 style="margin-bottom: 30px;">Legendary Apex Suite</h3>
-        <div style="background: #0f172a; padding: 60px 40px; border-radius: 24px; color: white;">
+        <div style="background: var(--bg-secondary, #0f172a); border: 1px solid var(--border-default, #334155); padding: 60px 40px; border-radius: 24px; color: var(--text-primary, #ffffff);">
            <h4 style="margin-bottom: 24px; opacity: 0.6; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;">Aura Dynamic Flow</h4>
            <ui-divider text="SYSTEM STATUS: OPTIMIZED" aura="true" color="#10b981" thickness="2px"></ui-divider>
            <div style="height: 120px;"></div>
@@ -100,7 +97,7 @@ export function initDividerDemo() {
            <ui-divider text="NETWORK GRID 07" subtitle="Verified Quantum Encryption Protocol" color="primary"></ui-divider>
            <div style="height: 120px;"></div>
            <h4 style="margin-bottom: 24px; opacity: 0.6; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;">Crystal Mode (Glassmorphism)</h4>
-           <div style="position: relative; height: 220px; border-radius: 16px; overflow: hidden; background: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&q=80&w=1000') center/cover;">
+           <div style="position: relative; height: 220px; border-radius: 16px; overflow: hidden; background: url('/build/assets/images/nature_desert_3.png') center/cover;">
               <div style="position: absolute; inset: 0; background: rgba(15, 23, 42, 0.4); backdrop-filter: saturate(180%) blur(5px);"></div>
               <div style="position: absolute; width: 100%; top: 50%; transform: translateY(-50%);">
                  <ui-divider text="DEEP SPACE CLUSTER" glass="true" color="white" aura="true"></ui-divider>
@@ -123,7 +120,7 @@ export function initDividerDemo() {
       <div class="demo-block">
         <h3 style="margin-bottom: 30px;">🌌 Apex 4.0: Galactic Interaction Suite</h3>
         
-        <div style="background: #0f172a; padding: 60px 40px; border-radius: 24px; color: white; display: flex; flex-direction: column; gap: 80px;">
+        <div style="background: var(--bg-secondary, #0f172a); border: 1px solid var(--border-default, #334155); padding: 60px 40px; border-radius: 24px; color: var(--text-primary, #ffffff); display: flex; flex-direction: column; gap: 80px;">
            
            <div style="text-align: center;">
               <h4 style="margin-bottom: 24px; opacity: 0.6; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;">1. Cinematic Reveal (Scroll-Triggered)</h4>
@@ -135,7 +132,7 @@ export function initDividerDemo() {
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 60px;">
               <div>
                  <h4 style="margin-bottom: 40px; opacity: 0.6; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;">2. Physical Draggable (Scrubber)</h4>
-                 <div style="padding: 40px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 24px;">
+                 <div style="padding: 40px; background: var(--bg-tertiary, rgba(255, 255, 255, 0.02)); border: 1px solid var(--border-default, rgba(255, 255, 255, 0.05)); border-radius: 24px;">
                     <p style="font-size: 12px; margin-bottom: 20px; opacity: 0.7;">SCRUBBER VALUE: <span id="scrubVal" style="color: #60a5fa; font-weight: 800;">50%</span></p>
                     <ui-divider 
                       draggable="true" 
@@ -157,8 +154,8 @@ export function initDividerDemo() {
               </div>
            </div>
 
-           <div style="background: linear-gradient(135deg, #1e293b, #0f172a); padding: 50px; border-radius: 24px; border: 1px solid rgba(139, 92, 246, 0.3); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);">
-              <h4 style="margin-bottom: 30px; opacity: 0.8; font-size: 12px; font-weight: 800; color: #8b5cf6; text-align: center;">THE APEX 4.0 "GALACTIC" FUSION</h4>
+           <div style="background: linear-gradient(135deg, var(--bg-primary, #1e293b), var(--bg-secondary, #0f172a)); padding: 50px; border-radius: 24px; border: 1px solid rgba(139, 92, 246, 0.3); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);">
+              <h4 style="margin-bottom: 30px; opacity: 0.8; font-size: 12px; font-weight: 800; color:var(--accent-purple,#8b5cf6); text-align: center;">THE APEX 4.0 "GALACTIC" FUSION</h4>
               <ui-divider 
                 text="SYSTEM IMMORTAL" 
                 subtitle="Apex 4.0 Integration Protocol"
@@ -181,7 +178,7 @@ export function initDividerDemo() {
                 icon="🌌"
                 icon-animation="spin"
               ></ui-divider>
-              <div id="fusionStatus" style="margin-top: 24px; text-align: center; color: #8b5cf6; font-size: 12px; font-family: monospace;">FUSION PERCENT: 62% | CURRENT STEP: 5</div>
+              <div id="fusionStatus" style="margin-top: 24px; text-align: center; color:var(--accent-purple,#8b5cf6); font-size: 12px; font-family: monospace;">FUSION PERCENT: 62% | CURRENT STEP: 5</div>
            </div>
 
            <div style="padding: 40px; background: rgba(0,0,0,0.2); border-radius: 24px; border: 1px dashed rgba(255,255,255,0.1);">
@@ -320,12 +317,12 @@ export function initDividerDemo() {
           </div>
         </div>
         
-        <div class="playground-preview" style="padding: 40px; background: white; border: 1px dashed #d1d5db; border-radius: 8px; min-height: 150px; display: flex; align-items: center; justify-content: center;">
+        <div class="playground-preview" style="padding: 40px; min-height: 150px; display: flex; align-items: center; justify-content: center;">
           <div id="dividerPreview" style="width: 100%;"></div>
         </div>
         
-        <div id="dividerEventLog" style="margin-top: 16px; padding: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; font-family: monospace; font-size: 12px; max-height: 100px; overflow-y: auto;">
-          <div style="color: #64748b; margin-bottom: 4px;">Events Log:</div>
+        <div id="dividerEventLog" style="margin-top: 16px; padding: 12px; background: var(--bg-secondary, #f8fafc); border: 1px solid var(--border-default, #e2e8f0); border-radius: 6px; font-family: monospace; font-size: 12px; max-height: 100px; overflow-y: auto; color: var(--text-primary);">
+          <div style="color:var(--text-secondary,#64748b); margin-bottom: 4px;">Events Log:</div>
           <div id="pg-log-content"></div>
         </div>
         
@@ -504,7 +501,7 @@ export function initDividerDemo() {
           <div>
             <h4 style="margin-bottom: 12px;">Responsive (md)</h4>
             <p style="font-size: 13px; color: #6b7280; margin-bottom: 12px;">Horizontal on desktop, switches to Vertical on tablet/mobile.</p>
-            <div style="display: flex; align-items: center; border: 1px solid #e5e7eb; padding: 20px; border-radius: 8px; min-height: 60px;">
+            <div style="display: flex; align-items: center; border:1px solid var(--border-default,#e5e7eb); padding: 20px; border-radius: 8px; min-height: 60px;">
               <span>Left Content</span>
               <ui-divider responsive="md" text="OR" color="primary"></ui-divider>
               <span>Right Content</span>
@@ -514,7 +511,7 @@ export function initDividerDemo() {
           <div>
             <h4 style="margin-bottom: 12px;">Responsive (sm)</h4>
             <p style="font-size: 13px; color: #6b7280; margin-bottom: 12px;">Only switches on very small screens.</p>
-            <div style="display: flex; align-items: center; border: 1px solid #e5e7eb; padding: 20px; border-radius: 8px; min-height: 60px;">
+            <div style="display: flex; align-items: center; border:1px solid var(--border-default,#e5e7eb); padding: 20px; border-radius: 8px; min-height: 60px;">
               <span>Feature A</span>
               <ui-divider responsive="sm" icon="⚡" color="success"></ui-divider>
               <span>Feature B</span>
@@ -720,7 +717,7 @@ export function initDividerDemo() {
         <p style="opacity: 0.7; margin-bottom: 20px;">Spacing presets and inset options.</p>
         
         <h4 style="margin-top: 24px; margin-bottom: 12px;">Spacing Presets</h4>
-        <div style="background: #f9fafb; padding: 20px; border-radius: 8px;">
+        <div style="background:var(--bg-secondary,#f9fafb); padding: 20px; border-radius: 8px;">
           <p>Content before compact divider</p>
           <ui-divider text="Compact" spacing="compact" color="primary"></ui-divider>
           <p>Content after compact divider</p>
@@ -806,7 +803,7 @@ export function initDividerDemo() {
         <p style="opacity: 0.7; margin-bottom: 20px;">Vertical dividers for separating content in flex containers.</p>
         
         <h4 style="margin-top: 24px; margin-bottom: 12px;">Basic Vertical Divider</h4>
-        <div style="display: flex; align-items: center; height: 50px; border: 1px solid #e5e7eb; padding: 0 16px; border-radius: 6px;">
+        <div style="display: flex; align-items: center; height: 50px; border:1px solid var(--border-default,#e5e7eb); padding: 0 16px; border-radius: 6px;">
           <span>Item 1</span>
           <ui-divider orientation="vertical"></ui-divider>
           <span>Item 2</span>
@@ -815,14 +812,14 @@ export function initDividerDemo() {
         </div>
 
         <h4 style="margin-top: 24px; margin-bottom: 12px;">Vertical with Text</h4>
-        <div style="display: flex; align-items: center; height: 100px; border: 1px solid #e5e7eb; padding: 0 16px; border-radius: 6px;">
+        <div style="display: flex; align-items: center; height: 100px; border:1px solid var(--border-default,#e5e7eb); padding: 0 16px; border-radius: 6px;">
           <div style="flex: 1; text-align: center;">Left Content</div>
           <ui-divider orientation="vertical" text="OR" color="primary"></ui-divider>
           <div style="flex: 1; text-align: center;">Right Content</div>
         </div>
 
         <h4 style="margin-top: 24px; margin-bottom: 12px;">Vertical with Custom Height</h4>
-        <div style="display: flex; align-items: center; border: 1px solid #e5e7eb; padding: 16px; border-radius: 6px;">
+        <div style="display: flex; align-items: center; border:1px solid var(--border-default,#e5e7eb); padding: 16px; border-radius: 6px;">
           <span>Auto Height (Parent)</span>
           <ui-divider orientation="vertical" style="height: 40px; margin: 0 16px;"></ui-divider>
           <span>Explicit Prop Height</span>

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

@@ -8,12 +8,12 @@ export function initDockDemo() {
     <p>macOS-style dock with magnification effect and smooth animations.</p>
 
     <div class="demo-controls" style="margin: 20px 0; display: flex; gap: 10px; flex-wrap: wrap;">
-      <ui-button id="btnDockPlayground"  label="🎮 Interactive Playground" style="--btn-bg: #8b5cf6;" variant="outline"></ui-button>
+      <ui-button id="btnDockPlayground"  label="🎮 Interactive Playground" style="--btn-bg: var(--accent-purple,#8b5cf6);" variant="outline"></ui-button>
       <ui-button id="btnDockBasic"  label="Basic" variant="outline"></ui-button>
       <ui-button id="btnDockPositions"  label="Positions" variant="outline"></ui-button>
       <ui-button id="btnDockSizes"  label="Sizes" variant="outline"></ui-button>
       <ui-button id="btnDockBadges"  label="With Badges" variant="outline"></ui-button>
-      <ui-button id="btnDockPremium"  label="✨ OS Experience" style="--btn-bg: #ec4899;" variant="outline"></ui-button>
+      <ui-button id="btnDockPremium"  label="✨ OS Experience" style="--btn-bg: var(--accent-pink,#ec4899);" variant="outline"></ui-button>
     </div>
 
     <div id="dockDemoContainer" style="margin-top: 20px;"></div>
@@ -38,7 +38,7 @@ export function initDockDemo() {
       <div style="margin-bottom: 30px;">
         <h4>Bottom Dock (Default)</h4>
         <p style="color: #6b7280; font-size: 14px; margin-bottom: 16px;">Hover over icons to see magnification effect</p>
-        <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
+        <div style="display: flex; justify-content: center; padding: 40px; background-color: var(--bg-secondary, #f3f4f6); border-radius: 8px;">
           <ui-dock id="basicDock" icon-library="lucide"></ui-dock>
         </div>
       </div>
@@ -69,14 +69,14 @@ export function initDockDemo() {
     container.innerHTML = `
       <div style="margin-bottom: 30px;">
         <h4>Bottom Position</h4>
-        <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
+        <div style="display: flex; justify-content: center; padding: 40px; background-color: var(--bg-secondary, #f3f4f6); border-radius: 8px;">
           <ui-dock id="dockPosBottom" position="bottom" icon-library="lucide"></ui-dock>
         </div>
       </div>
 
       <div style="margin-bottom: 30px;">
         <h4>Top Position</h4>
-        <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
+        <div style="display: flex; justify-content: center; padding: 40px; background-color: var(--bg-secondary, #f3f4f6); border-radius: 8px;">
           <ui-dock id="dockPosTop" position="top" icon-library="lucide"></ui-dock>
         </div>
       </div>
@@ -120,21 +120,21 @@ export function initDockDemo() {
     container.innerHTML = `
       <div style="margin-bottom: 30px;">
         <h4>Small Size</h4>
-        <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
+        <div style="display: flex; justify-content: center; padding: 40px; background-color: var(--bg-secondary, #f3f4f6); border-radius: 8px;">
           <ui-dock id="dockSizeSm" size="sm" icon-library="lucide"></ui-dock>
         </div>
       </div>
 
       <div style="margin-bottom: 30px;">
         <h4>md Size (Default)</h4>
-        <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
+        <div style="display: flex; justify-content: center; padding: 40px; background-color: var(--bg-secondary, #f3f4f6); border-radius: 8px;">
           <ui-dock id="dockSizeMd" size="md" icon-library="lucide"></ui-dock>
         </div>
       </div>
 
       <div>
         <h4>Large Size</h4>
-        <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
+        <div style="display: flex; justify-content: center; padding: 40px; background-color: var(--bg-secondary, #f3f4f6); border-radius: 8px;">
           <ui-dock id="dockSizeLg" size="lg" icon-library="lucide"></ui-dock>
         </div>
       </div>
@@ -162,7 +162,7 @@ export function initDockDemo() {
       <div style="margin-bottom: 30px;">
         <h4>Dock with Badge Indicators</h4>
         <p style="color: #6b7280; font-size: 14px; margin-bottom: 16px;">Icons can display notification badges</p>
-        <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
+        <div style="display: flex; justify-content: center; padding: 40px; background-color: var(--bg-secondary, #f3f4f6); border-radius: 8px;">
           <ui-dock id="dockWithBadges" icon-library="lucide"></ui-dock>
         </div>
       </div>
@@ -260,7 +260,7 @@ export function initDockDemo() {
       <h3>🎮 Interactive Dock Playground</h3>
       <p style="color: #6b7280; margin-bottom: 20px;">Customize the dock in real-time</p>
 
-      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; padding: 20px; background-color: white; border-radius: 8px;">
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; padding: 20px; background-color:var(--bg-primary,white); border-radius: 8px;">
         <div>
           <label style="display: block; margin-bottom: 8px; font-weight: 600;">Position:</label>
           <ui-dropdown id="dockPosition" value="bottom" options='[
@@ -325,9 +325,9 @@ export function initDockDemo() {
         </div>
       </div>
 
-      <div id="dockPlaygroundPreview" style="display: flex; justify-content: center; align-items: center; min-height: 200px; padding: 60px; background-color: #f3f4f6; border-radius: 8px;"></div>
+      <div id="dockPlaygroundPreview" style="display: flex; justify-content: center; align-items: center; min-height: 200px; padding: 60px; background-color: var(--bg-secondary, #f3f4f6); border-radius: 8px;"></div>
 
-      <div id="dockClickLog" style="margin-top: 20px; padding: 16px; background-color: white; border-radius: 8px; border: 1px solid #e5e7eb;">
+      <div id="dockClickLog" style="margin-top: 20px; padding: 16px; background-color:var(--bg-primary,white); border-radius: 8px; border:1px solid var(--border-default,#e5e7eb);">
         <h4 style="margin: 0 0 12px;">Click Events Log:</h4>
         <div id="dockLogContent" style="color: #6b7280; font-size: 14px; font-family: monospace;">Click on dock items to see events...</div>
       </div>

package/dist/collection/assets/js/demos/dock-host-init.js

@@ -3,7 +3,7 @@ export function initDockHostDemo() {
   if (!container) return;
 
   container.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);">
       <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px;">
         <h2 style="margin: 0; display: flex; align-items: center; gap: 10px;">
           <span style="font-size: 24px;">⚓</span> Dock Host
@@ -15,11 +15,11 @@ export function initDockHostDemo() {
         </div>
       </div>
       
-      <p style="color: #64748b; margin-bottom: 30px;">
+      <p style="color:var(--text-secondary,#64748b); margin-bottom: 30px;">
         The <code>ui-dock-host</code> provides a persistent region for tools and panels. It supports <strong>relative positioning</strong> to stay within its parent container and a <strong>floating mode</strong> for multi-window experiences.
       </p>
 
-      <div id="dock-host-playground" style="position: relative; height: 600px; border: 2px solid #e2e8f0; border-radius: 16px; background: #f8fafc; overflow: hidden;">
+      <div id="dock-host-playground" style="position: relative; height: 600px; border: 2px solid #e2e8f0; border-radius: 16px; background:var(--bg-secondary,#f8fafc); overflow: hidden;">
         <ui-dock-host id="demoDockHost" dock="left" width="280px" height="100%" relative="true">
           <div slot="header">Project Explorer</div>
           
@@ -27,39 +27,39 @@ export function initDockHostDemo() {
           <div slot="main" style="padding: 40px; height: 100%;">
             <div style="max-width: 900px; margin: 0 auto;">
               <header style="margin-bottom: 30px;">
-                <h3 style="margin: 0; font-size: 24px; color: #1e293b;">Project Dashboard</h3>
-                <p style="color: #64748b; margin: 5px 0 0;">Welcome back! Here is what is happening with your library.</p>
+                <h3 style="margin: 0; font-size: 24px; color:var(--text-primary,#1e293b);">Project Dashboard</h3>
+                <p style="color:var(--text-secondary,#64748b); margin: 5px 0 0;">Welcome back! Here is what is happening with your library.</p>
               </header>
               
               <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px;">
-                <div style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 2px 4px rgba(0,0,0,0.02);">
-                   <div style="color: #64748b; font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px;">Total Components</div>
-                   <div style="font-size: 28px; font-weight: 800; color: #6366f1;">42</div>
+                <div style="background:var(--bg-primary,white); padding: 20px; border-radius: 12px; border:1px solid var(--border-default,#e2e8f0); box-shadow: 0 2px 4px rgba(0,0,0,0.02);">
+                   <div style="color:var(--text-secondary,#64748b); font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px;">Total Components</div>
+                   <div style="font-size: 28px; font-weight: 800; color:var(--accent-indigo,#6366f1);">42</div>
                    <div style="margin-top: 10px; font-size: 12px; color: #10b981;">↑ 12% from last month</div>
                 </div>
-                <div style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 2px 4px rgba(0,0,0,0.02);">
-                   <div style="color: #64748b; font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px;">Weekly Downloads</div>
-                   <div style="font-size: 28px; font-weight: 800; color: #8b5cf6;">1.2k</div>
+                <div style="background:var(--bg-primary,white); padding: 20px; border-radius: 12px; border:1px solid var(--border-default,#e2e8f0); box-shadow: 0 2px 4px rgba(0,0,0,0.02);">
+                   <div style="color:var(--text-secondary,#64748b); font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px;">Weekly Downloads</div>
+                   <div style="font-size: 28px; font-weight: 800; color:var(--accent-purple,#8b5cf6);">1.2k</div>
                    <div style="margin-top: 10px; font-size: 12px; color: #10b981;">↑ 8% from last week</div>
                 </div>
-                <div style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 2px 4px rgba(0,0,0,0.02);">
-                   <div style="color: #64748b; font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px;">Open Issues</div>
-                   <div style="font-size: 28px; font-weight: 800; color: #f59e0b;">5</div>
-                   <div style="margin-top: 10px; font-size: 12px; color: #ef4444;">↓ 2 from yesterday</div>
+                <div style="background:var(--bg-primary,white); padding: 20px; border-radius: 12px; border:1px solid var(--border-default,#e2e8f0); box-shadow: 0 2px 4px rgba(0,0,0,0.02);">
+                   <div style="color:var(--text-secondary,#64748b); font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px;">Open Issues</div>
+                   <div style="font-size: 28px; font-weight: 800; color:var(--accent-yellow,#f59e0b);">5</div>
+                   <div style="margin-top: 10px; font-size: 12px; color:var(--accent-red,#ef4444);">↓ 2 from yesterday</div>
                 </div>
               </div>
 
-              <div style="background: white; padding: 30px; border-radius: 16px; border: 1px solid #e2e8f0; height: 300px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;">
+              <div style="background:var(--bg-primary,white); padding: 30px; border-radius: 16px; border:1px solid var(--border-default,#e2e8f0); height: 300px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;">
                 <div style="flex: 1; display: flex; align-items: flex-end; gap: 15px; padding-bottom: 10px;">
-                   <div style="flex: 1; height: 40%; background: #eef2ff; border-radius: 4px; transition: height 0.5s;"></div>
-                   <div style="flex: 1; height: 65%; background: #eef2ff; border-radius: 4px; transition: height 0.5s;"></div>
-                   <div style="flex: 1; height: 45%; background: #eef2ff; border-radius: 4px; transition: height 0.5s;"></div>
-                   <div style="flex: 1; height: 85%; background: #6366f1; border-radius: 4px; transition: height 0.5s;"></div>
-                   <div style="flex: 1; height: 60%; background: #eef2ff; border-radius: 4px; transition: height 0.5s;"></div>
-                   <div style="flex: 1; height: 75%; background: #eef2ff; border-radius: 4px; transition: height 0.5s;"></div>
-                   <div style="flex: 1; height: 50%; background: #eef2ff; border-radius: 4px; transition: height 0.5s;"></div>
+                   <div style="flex: 1; height: 40%; background:var(--accent-indigo-soft,#eef2ff); border-radius: 4px; transition: height 0.5s;"></div>
+                   <div style="flex: 1; height: 65%; background:var(--accent-indigo-soft,#eef2ff); border-radius: 4px; transition: height 0.5s;"></div>
+                   <div style="flex: 1; height: 45%; background:var(--accent-indigo-soft,#eef2ff); border-radius: 4px; transition: height 0.5s;"></div>
+                   <div style="flex: 1; height: 85%; background: var(--accent-indigo,#6366f1); border-radius: 4px; transition: height 0.5s;"></div>
+                   <div style="flex: 1; height: 60%; background:var(--accent-indigo-soft,#eef2ff); border-radius: 4px; transition: height 0.5s;"></div>
+                   <div style="flex: 1; height: 75%; background:var(--accent-indigo-soft,#eef2ff); border-radius: 4px; transition: height 0.5s;"></div>
+                   <div style="flex: 1; height: 50%; background:var(--accent-indigo-soft,#eef2ff); border-radius: 4px; transition: height 0.5s;"></div>
                 </div>
-                <div style="display: flex; justify-content: space-between; color: #94a3b8; font-size: 12px; font-family: monospace;">
+                <div style="display: flex; justify-content: space-between; color:var(--text-secondary,#64748b); font-size: 12px; font-family: monospace;">
                    <span>MON</span><span>TUE</span><span>WED</span><span>THU</span><span>FRI</span><span>SAT</span><span>SUN</span>
                 </div>
               </div>
@@ -68,25 +68,25 @@ export function initDockHostDemo() {
           
           <!-- Dock Content Slot (named content or just children) -->
           <div style="padding: 20px;">
-            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 20px; color: #1e293b;">
+            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 20px; color:var(--text-primary,#1e293b);">
                <span style="font-size: 18px;">📁</span>
                <strong style="font-size: 1.1rem;">ui-ui-library</strong>
             </div>
             <ul style="list-style: none; padding: 0; font-family: monospace; font-size: 0.9rem; color: #475569; display: flex; flex-direction: column; gap: 10px;">
               <li style="display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer;" onmouseover="this.style.background='rgba(99, 102, 241, 0.05)'" onmouseout="this.style.background='transparent'">
-                <span style="color: #6366f1;">📄</span> index.html
+                <span style="color:var(--accent-indigo,#6366f1);">📄</span> index.html
               </li>
               <li style="display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer; background: rgba(99, 102, 241, 0.08); font-weight: 600;" onmouseover="this.style.background='rgba(99, 102, 241, 0.12)'" onmouseout="this.style.background='rgba(99, 102, 241, 0.08)'">
-                <span style="color: #6366f1;">📜</span> dock.css
+                <span style="color:var(--accent-indigo,#6366f1);">📜</span> dock.css
               </li>
               <li style="display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer;" onmouseover="this.style.background='rgba(99, 102, 241, 0.05)'" onmouseout="this.style.background='transparent'">
-                <span style="color: #6366f1;">TS</span> main.ts
+                <span style="color:var(--accent-indigo,#6366f1);">TS</span> main.ts
               </li>
             </ul>
             
-            <div style="margin-top: 40px; border-top: 1px solid #e2e8f0; padding-top: 20px;">
-              <span style="font-size: 12px; color: #94a3b8; font-weight: bold; text-transform: uppercase;">Features</span>
-              <p style="margin-top: 10px; font-size: 0.85rem; color: #64748b; line-height: 1.5;">
+            <div style="margin-top: 40px; border-top:1px solid var(--border-default,#e2e8f0); padding-top: 20px;">
+              <span style="font-size: 12px; color:var(--text-secondary,#64748b); font-weight: bold; text-transform: uppercase;">Features</span>
+              <p style="margin-top: 10px; font-size: 0.85rem; color:var(--text-secondary,#64748b); line-height: 1.5;">
                 • Auto-Responsive Layout<br>
                 • Flex Displacement<br>
                 • Shared Main Context