atomicuilibrary 0.1.0 → 0.1.3

package/dist/collection/assets/js/demos/meter-group-demo.js

@@ -1,4 +1,4 @@
-// Component Demo Functions
+// Component Demo Functions
 export function initMeterGroupDemo() {
   const section = document.getElementById('meter-group');
   if (!section) return;
@@ -264,14 +264,14 @@ export function initMeterGroupDemo() {
       if (!container) return;
 
       container.innerHTML = `
-      <div style="background-color: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
+      <div style="background-color:var(--bg-primary,white); border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
         <div style="display: flex; gap: 30px; flex-wrap: wrap;">
           <div style="flex: 1; min-width: 300px;">
             <h3>🎮 Interactive Playground</h3>
             <div style="display: flex; flex-direction: column; gap: 15px; margin-top: 20px;">
               <div>
                 <label style="display: block; margin-bottom: 5px; font-weight: 500;">Orientation:</label>
-                <ui-dropdown id="meterOrientation" onchange="updateInteractiveMeter()" style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer;">
+                <ui-dropdown id="meterOrientation" onchange="updateInteractiveMeter()">
                   <option value="horizontal" selected>Horizontal</option>
                   <option value="vertical">Vertical</option>
                 </ui-dropdown>
@@ -279,7 +279,7 @@ export function initMeterGroupDemo() {
               
               <div>
                 <label style="display: block; margin-bottom: 5px; font-weight: 500;">Shape:</label>
-                <ui-dropdown id="meterShape" onchange="updateInteractiveMeter()" style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer;">
+                <ui-dropdown id="meterShape" onchange="updateInteractiveMeter()">
                   <option value="line" selected>Line</option>
                   <option value="circle">Circle</option>
                 </ui-dropdown>
@@ -287,7 +287,7 @@ export function initMeterGroupDemo() {
               
               <div>
                 <label style="display: block; margin-bottom: 5px; font-weight: 500;">Size:</label>
-                <ui-dropdown id="meterSize" onchange="updateInteractiveMeter()" style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer;">
+                <ui-dropdown id="meterSize" onchange="updateInteractiveMeter()">
                   <option value="sm">Small</option>
                   <option value="md" selected>md</option>
                   <option value="lg">Large</option>
@@ -304,14 +304,12 @@ export function initMeterGroupDemo() {
               
               <div>
                 <label style="display: block; margin-bottom: 5px; font-weight: 500;">Min Value:</label>
-                <ui-input type="number" id="meterMin" value="0" onchange="updateInteractiveMeter()"
-                  style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px;">
+                <ui-input type="number" id="meterMin" value="0" onchange="updateInteractiveMeter()"></ui-input>
               </div>
               
               <div>
                 <label style="display: block; margin-bottom: 5px; font-weight: 500;">Max Value:</label>
-                <ui-input type="number" id="meterMax" value="100" onchange="updateInteractiveMeter()"
-                  style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px;">
+                <ui-input type="number" id="meterMax" value="100" onchange="updateInteractiveMeter()"></ui-input>
               </div>
               
               <div>
@@ -325,21 +323,21 @@ export function initMeterGroupDemo() {
               </div>
               
               <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-                <ui-button onclick="loadMeterPreset('storage')" style="padding: 6px 12px; background-color: #10b981; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">💾 Storage</ui-button>
-                <ui-button onclick="loadMeterPreset('resources')" style="padding: 6px 12px; background-color: #10b981; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">🖥️ Resources</ui-button>
-                <ui-button onclick="loadMeterPreset('progress')" style="padding: 6px 12px; background-color: #f59e0b; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">📊 Progress</ui-button>
-                <ui-button onclick="loadMeterPreset('budget')" style="padding: 6px 12px; background-color: #8b5cf6; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">💰 Budget</ui-button>
+                <ui-button onclick="loadMeterPreset('storage')" >💾 Storage</ui-button>
+                <ui-button onclick="loadMeterPreset('resources')">🖥️ Resources</ui-button>
+                <ui-button onclick="loadMeterPreset('progress')" >📊 Progress</ui-button>
+                <ui-button onclick="loadMeterPreset('budget')" >💰 Budget</ui-button>
               </div>
             </div>
           </div>
           
-          <div style="flex: 1; min-width: 300px; background-color: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb; min-height: 500px;">
+          <div style="flex: 1; min-width: 300px; background-color: #f9fafb; padding: 20px; border-radius: 8px; border:1px solid var(--border-default,#e5e7eb); min-height: 500px;">
             <h4 style="margin-top: 0;">Preview:</h4>
             <div id="interactiveMeterContainer" style="margin-top: 20px;"></div>
-            <div id="meterOutput" style="margin-top: 20px; padding: 10px; background-color: white; border-radius: 4px; font-family: monospace; font-size: 12px; color: #6b7280;"></div>
+            <div id="meterOutput" style="margin-top: 20px; padding: 10px; background-color:var(--bg-primary,white); border-radius: 4px; font-family: monospace; font-size: 12px; color: #6b7280;"></div>
             
             <div style="margin-top: 20px; background: #1e293b; padding: 16px; border-radius: 8px; position: relative;">
-              <ui-button onclick="copyMeterCode()" id="copyMeterBtn" style="position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.1); color: white; border: none; padding: 4px 10px; border-radius: 4px; font-size: 11px; cursor: pointer; transition: all 0.2s;">Copy</ui-button>
+              <ui-button onclick="copyMeterCode()" id="copyMeterBtn">Copy</ui-button>
               <code id="meterCodeBlock" style="color: #e2e8f0; font-family: monospace; font-size: 13px; display: block; overflow-x: auto; padding-right: 50px; white-space: pre-wrap;">
                 <ui-meter-group ...></ui-meter-group>
               </code>

package/dist/collection/assets/js/demos/multi-level-context-menu-demo.js

@@ -26,10 +26,10 @@ export function initMultiLevelContextMenuDemo() {
       <div style="max-width: 600px; margin: 0 auto;">
         <h4>Basic Multi-Level Menu</h4>
         <p style="color: #6b7280; font-size: 13px;">Simple cascading menu with multiple levels</p>
-        <div id="basicMultiTarget" style="min-height: 200px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f9fafb; cursor: context-menu; margin: 20px 0;">
+        <div id="basicMultiTarget" style="min-height: 200px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background:var(--bg-secondary,#f9fafb); cursor: context-menu; margin: 20px 0;">
           <div style="text-align: center;">
             <div style="margin-bottom: 10px;">
-              <ui-icon name="target" library="lucide" size="48px" style="color: #64748b;"></ui-icon>
+              <ui-icon name="target" library="lucide" size="48px" style="color:var(--text-secondary,#64748b);"></ui-icon>
             </div>
             <div style="color: #6b7280; font-size: 14px;">Right-click for basic menu</div>
           </div>
@@ -82,10 +82,10 @@ export function initMultiLevelContextMenuDemo() {
       <div style="max-width: 700px; margin: 0 auto;">
         <h4>4-Level Submenu</h4>
         <p style="color: #6b7280; font-size: 13px;">Cascading menu demonstrating 4 levels of nesting</p>
-        <div id="fourLevelMultiTarget" style="min-height: 220px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f9fafb; cursor: context-menu; margin: 20px 0;">
+        <div id="fourLevelMultiTarget" style="min-height: 220px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background:var(--bg-secondary,#f9fafb); cursor: context-menu; margin: 20px 0;">
           <div style="text-align: center;">
             <div style="margin-bottom: 10px;">
-              <ui-icon name="compass" library="lucide" size="48px" style="color: #64748b;"></ui-icon>
+              <ui-icon name="compass" library="lucide" size="48px" style="color:var(--text-secondary,#64748b);"></ui-icon>
             </div>
             <div style="color: #6b7280; font-size: 14px;">Right-click to explore 4 nested levels</div>
           </div>
@@ -173,10 +173,10 @@ export function initMultiLevelContextMenuDemo() {
       <div style="max-width: 700px; margin: 0 auto;">
         <h4>Deep Nested Menu (5 Levels)</h4>
         <p style="color: #6b7280; font-size: 13px;">Demonstrates unlimited nesting capability with 5+ levels</p>
-        <div id="deepNestedTarget" style="min-height: 200px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f9fafb; cursor: context-menu; margin: 20px 0;">
+        <div id="deepNestedTarget" style="min-height: 200px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background:var(--bg-secondary,#f9fafb); cursor: context-menu; margin: 20px 0;">
           <div style="text-align: center;">
             <div style="margin-bottom: 10px;">
-              <ui-icon name="network" library="lucide" size="48px" style="color: #64748b;"></ui-icon>
+              <ui-icon name="network" library="lucide" size="48px" style="color:var(--text-secondary,#64748b);"></ui-icon>
             </div>
             <div style="color: #6b7280; font-size: 14px;">Right-click for deep nested menu</div>
             <div style="color: #9ca3af; font-size: 12px; margin-top: 4px;">Explore 5 levels deep!</div>
@@ -259,10 +259,10 @@ export function initMultiLevelContextMenuDemo() {
       <div style="max-width: 700px; margin: 0 auto;">
         <h4>Advanced Options Menu</h4>
         <p style="color: #6b7280; font-size: 13px;">Complex menu structure with diverse options</p>
-        <div id="advancedTarget" style="min-height: 200px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f9fafb; cursor: context-menu; margin: 20px 0;">
+        <div id="advancedTarget" style="min-height: 200px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background:var(--bg-secondary,#f9fafb); cursor: context-menu; margin: 20px 0;">
           <div style="text-align: center;">
             <div style="margin-bottom: 10px;">
-              <ui-icon name="settings" library="lucide" size="48px" style="color: #64748b;"></ui-icon>
+              <ui-icon name="settings" library="lucide" size="48px" style="color:var(--text-secondary,#64748b);"></ui-icon>
             </div>
             <div style="color: #6b7280; font-size: 14px;">Right-click for advanced options</div>
           </div>
@@ -365,10 +365,10 @@ export function initMultiLevelContextMenuDemo() {
       <div style="max-width: 700px; margin: 0 auto;">
         <h4>Application Menu</h4>
         <p style="color: #6b7280; font-size: 13px;">Full application menu with file, edit, view, and help</p>
-        <div id="appTarget" style="min-height: 200px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f9fafb; cursor: context-menu; margin: 20px 0;">
+        <div id="appTarget" style="min-height: 200px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background:var(--bg-secondary,#f9fafb); cursor: context-menu; margin: 20px 0;">
           <div style="text-align: center;">
             <div style="margin-bottom: 10px;">
-              <ui-icon name="monitor" library="lucide" size="48px" style="color: #64748b;"></ui-icon>
+              <ui-icon name="monitor" library="lucide" size="48px" style="color:var(--text-secondary,#64748b);"></ui-icon>
             </div>
             <div style="color: #6b7280; font-size: 14px;">Right-click for application menu</div>
           </div>
@@ -484,10 +484,10 @@ export function initMultiLevelContextMenuDemo() {
       <div style="max-width: 700px; margin: 0 auto;">
         <h4>Developer Tools Menu</h4>
         <p style="color: #6b7280; font-size: 13px;">Developer-focused menu with debugging and tools</p>
-        <div id="devTarget" style="min-height: 200px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f9fafb; cursor: context-menu; margin: 20px 0;">
+        <div id="devTarget" style="min-height: 200px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background:var(--bg-secondary,#f9fafb); cursor: context-menu; margin: 20px 0;">
           <div style="text-align: center;">
             <div style="margin-bottom: 10px;">
-              <ui-icon name="terminal" library="lucide" size="48px" style="color: #64748b;"></ui-icon>
+              <ui-icon name="terminal" library="lucide" size="48px" style="color:var(--text-secondary,#64748b);"></ui-icon>
             </div>
             <div style="color: #6b7280; font-size: 14px;">Right-click for developer menu</div>
           </div>
@@ -590,7 +590,7 @@ export function initMultiLevelContextMenuDemo() {
         <p style="color: #6b7280; font-size: 13px;">Menu with persistent expansion (click arrows to toggle), close buttons, badges, and keyboard navigation</p>
         <div style="margin: 15px 0; padding: 12px; background: #f0f9ff; border-radius: 6px; border: 1px solid #bae6fd;">
           <strong style="color: #1e3a8a;">💡 Features:</strong>
-          <ul style="margin: 8px 0 0 0; padding-left: 20px; color: #1e40af; font-size: 13px;">
+          <ul style="margin: 8px 0 0 0; padding-left: 20px; color:var(--accent-blue,#1e40af); font-size: 13px;">
             <li>Click menu items with arrows to toggle submenus</li>
             <li>Submenus stay open until you click the × close button</li>
             <li>Use keyboard: ← → ↑ ↓ Enter Space Esc Home End</li>
@@ -599,31 +599,31 @@ export function initMultiLevelContextMenuDemo() {
           </ul>
         </div>
         <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 20px 0;">
-          <div id="topLeftTarget" style="min-height: 150px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #fef3c7; cursor: context-menu;">
+          <div id="topLeftTarget" style="min-height: 150px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background:var(--accent-yellow-soft,#fef3c7); cursor: context-menu;">
             <div style="text-align: center;">
               <div style="margin-bottom: 10px;">
                 <ui-icon name="arrow-up-left" library="lucide" size="32px"></ui-icon>
               </div>
-              <div style="color: #92400e; font-size: 12px; font-weight: 600;">Top-Left Corner</div>
+              <div style="color:var(--accent-yellow,#92400e); font-size: 12px; font-weight: 600;">Top-Left Corner</div>
             </div>
           </div>
-          <div id="topRightTarget" style="min-height: 150px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #dbeafe; cursor: context-menu;">
+          <div id="topRightTarget" style="min-height: 150px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background:var(--accent-blue-soft,#dbeafe); cursor: context-menu;">
             <div style="text-align: center;">
               <div style="margin-bottom: 10px;">
                 <ui-icon name="arrow-up-right" library="lucide" size="32px"></ui-icon>
               </div>
-              <div style="color: #1e40af; font-size: 12px; font-weight: 600;">Top-Right Corner</div>
+              <div style="color:var(--accent-blue,#1e40af); font-size: 12px; font-weight: 600;">Top-Right Corner</div>
             </div>
           </div>
-          <div id="bottomLeftTarget" style="min-height: 150px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #dcfce7; cursor: context-menu;">
+          <div id="bottomLeftTarget" style="min-height: 150px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background:var(--accent-green-soft,#dcfce7); cursor: context-menu;">
             <div style="text-align: center;">
              <div style="margin-bottom: 10px;">
                 <ui-icon name="arrow-down-left" library="lucide" size="32px"></ui-icon>
               </div>
-              <div style="color: #166534; font-size: 12px; font-weight: 600;">Bottom-Left Corner</div>
+              <div style="color: var(--accent-green,#166534); font-size: 12px; font-weight: 600;">Bottom-Left Corner</div>
             </div>
           </div>
-          <div id="bottomRightTarget" style="min-height: 150px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #fce7f3; cursor: context-menu;">
+          <div id="bottomRightTarget" style="min-height: 150px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background:var(--accent-pink-soft,#fce7f3); cursor: context-menu;">
             <div style="text-align: center;">
               <div style="margin-bottom: 10px;">
                 <ui-icon name="arrow-down-right" library="lucide" size="32px"></ui-icon>
@@ -788,7 +788,7 @@ window.showInteractiveMultiLevelMenu = function () {
   if (!container) return;
 
   container.innerHTML = `
-    <div style="background-color: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
+    <div style="background-color:var(--bg-primary,white); border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
       <div style="display: flex; gap: 30px; flex-wrap: wrap;">
         <div style="flex: 1; min-width: 250px;">
           <h3 style="margin-top: 0;">🎮 Interactive Playground</h3>
@@ -842,17 +842,17 @@ window.showInteractiveMultiLevelMenu = function () {
           </div>
         </div>
         
-        <div style="flex: 1; min-width: 300px; background-color: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb;">
+        <div style="flex: 1; min-width: 300px; background-color: #f9fafb; padding: 20px; border-radius: 8px; border:1px solid var(--border-default,#e5e7eb);">
           <h4 style="margin-top: 0;">Preview:</h4>
-          <div id="interactiveMultiLevelMenuTarget" style="margin-top: 20px; min-height: 300px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: white; cursor: context-menu;">
+          <div id="interactiveMultiLevelMenuTarget" style="margin-top: 20px; min-height: 300px; border: 2px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background:var(--bg-primary,white); cursor: context-menu;">
             <div style="text-align: center;">
               <div style="margin-bottom: 10px;">
-                <ui-icon name="mouse-pointer-2" library="lucide" size="48px" style="color: #64748b;"></ui-icon>
+                <ui-icon name="mouse-pointer-2" library="lucide" size="48px" style="color:var(--text-secondary,#64748b);"></ui-icon>
               </div>
               <div style="color: #6b7280; font-size: 14px;">Right-click here</div>
             </div>
           </div>
-          <div id="multiLevelMenuOutput" style="margin-top: 20px; padding: 10px; background-color: white; border-radius: 4px; font-family: monospace; font-size: 12px; display: none;"></div>
+          <div id="multiLevelMenuOutput" style="margin-top: 20px; padding: 10px; background-color:var(--bg-primary,white); border-radius: 4px; font-family: monospace; font-size: 12px; display: none;"></div>
         </div>
       </div>
     </div>

package/dist/collection/assets/js/demos/my-profile-demo.js

@@ -36,12 +36,12 @@ export function initMyProfileDemo() {
           <div style="
             position: relative;
             padding: 6px;
-            background: white;
+            background:var(--bg-primary,white);
             border-radius: 32px;
             box-shadow: 0 10px 25px rgba(0,0,0,0.1);
           ">
             <ui-avatar 
-              src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" 
+              src="/build/assets/images/nature_forest_1.png" 
               size="xl" 
               style="--avatar-size: 140px; border-radius: 26px;"
             ></ui-avatar>
@@ -66,7 +66,7 @@ export function initMyProfileDemo() {
         <!-- Action Buttons -->
         <div style="position: absolute; bottom: 24px; right: 40px; display: flex; gap: 12px;">
           <ui-button label="Message" variant="outline" style="--button-border-color: rgba(255,255,255,0.4); --button-text-color: white; backdrop-filter: blur(8px); background: rgba(255,255,255,0.1);"></ui-button>
-          <ui-button label="Edit Profile" variant="primary" style="background: white; color: #10b981; border: none;"></ui-button>
+          <ui-button label="Edit Profile" variant="primary" style="background:var(--bg-primary,white); color: #10b981; border: none;"></ui-button>
         </div>
       </div>
 
@@ -79,7 +79,7 @@ export function initMyProfileDemo() {
           <!-- About Section -->
           <ui-card style="--card-padding: 24px;">
             <h3 style="margin-top: 0; margin-bottom: 16px; font-size: 1.1rem; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 12px;">About</h3>
-            <p style="color: #64748b; font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px;">
+            <p style="color:var(--text-secondary,#64748b); font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px;">
               Passionate about building scalable design systems and beautiful user interfaces. Obsessed with typography, motion, and accessibility.
             </p>
             
@@ -99,12 +99,12 @@ export function initMyProfileDemo() {
           <!-- Stats Grid -->
           <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
             <ui-card style="--card-padding: 16px; text-align: center;">
-              <div style="font-size: 1.5rem; font-weight: 800; color: #0f172a;">1.2k</div>
-              <div style="font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px;">Followers</div>
+              <div style="font-size: 1.5rem; font-weight: 800; color:var(--text-primary,#0f172a);">1.2k</div>
+              <div style="font-size: 0.75rem; color:var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px;">Followers</div>
             </ui-card>
             <ui-card style="--card-padding: 16px; text-align: center;">
-              <div style="font-size: 1.5rem; font-weight: 800; color: #0f172a;">48</div>
-              <div style="font-size: 0.75rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px;">Projects</div>
+              <div style="font-size: 1.5rem; font-weight: 800; color:var(--text-primary,#0f172a);">48</div>
+              <div style="font-size: 0.75rem; color:var(--text-secondary,#64748b); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px;">Projects</div>
             </ui-card>
           </div>
 
@@ -112,12 +112,12 @@ export function initMyProfileDemo() {
           <ui-card style="--card-padding: 24px;">
             <h3 style="margin-top: 0; margin-bottom: 16px; font-size: 1.1rem; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 12px;">Skills</h3>
             <div style="display: flex; flex-wrap: wrap; gap: 8px;">
-              <ui-chip label="Design Systems" style="--chip-bg: #eff6ff; --chip-text: #10b981;"></ui-chip>
-              <ui-chip label="React" style="--chip-bg: #f5f3ff; --chip-text: #8b5cf6;"></ui-chip>
-              <ui-chip label="Stencil.js" style="--chip-bg: #fdf2f8; --chip-text: #ec4899;"></ui-chip>
+              <ui-chip label="Design Systems" style="--chip-bg: var(--accent-blue-soft,#eff6ff); --chip-text: #10b981;"></ui-chip>
+              <ui-chip label="React" style="--chip-bg: var(--accent-purple-soft,#f5f3ff); --chip-text: var(--accent-purple,#8b5cf6);"></ui-chip>
+              <ui-chip label="Stencil.js" style="--chip-bg: var(--accent-pink-soft,#fdf2f8); --chip-text: var(--accent-pink,#ec4899);"></ui-chip>
               <ui-chip label="TypeScript" style="--chip-bg: #ecfdf5; --chip-text: #10b981;"></ui-chip>
-              <ui-chip label="Figma" style="--chip-bg: #fff7ed; --chip-text: #f59e0b;"></ui-chip>
-              <ui-chip label="Interaction Design" style="--chip-bg: #f0f9ff; --chip-text: #0ea5e9;"></ui-chip>
+              <ui-chip label="Figma" style="--chip-bg: var(--accent-orange-soft,#fff7ed); --chip-text: var(--accent-yellow,#f59e0b);"></ui-chip>
+              <ui-chip label="Interaction Design" style="--chip-bg: #f0f9ff; --chip-text: var(--accent-cyan,#0ea5e9);"></ui-chip>
             </div>
           </ui-card>
         </div>
@@ -136,9 +136,9 @@ export function initMyProfileDemo() {
                   <div style="flex: 1;">
                     <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                       <div style="font-weight: 600;">Updated the Component Library Documentation</div>
-                      <span style="font-size: 0.8rem; color: #94a3b8;">2 hours ago</span>
+                      <span style="font-size: 0.8rem; color:var(--text-secondary,#64748b);">2 hours ago</span>
                     </div>
-                    <p style="font-size: 0.9rem; color: #64748b; line-height: 1.5; margin: 0;">
+                    <p style="font-size: 0.9rem; color:var(--text-secondary,#64748b); line-height: 1.5; margin: 0;">
                       Finished adding the new stack component documentation and examples.
                     </p>
                   </div>
@@ -147,20 +147,20 @@ export function initMyProfileDemo() {
 
               <ui-card style="--card-padding: 20px;">
                 <div style="display: flex; gap: 16px;">
-                  <ui-avatar label="JD" style="background: #8b5cf6; color: white;"></ui-avatar>
+                  <ui-avatar label="JD" style="background: var(--accent-purple,#8b5cf6); color: white;"></ui-avatar>
                   <div style="flex: 1;">
                     <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                       <div style="font-weight: 600;">Published a new blog post</div>
-                      <span style="font-size: 0.8rem; color: #94a3b8;">Yesterday</span>
+                      <span style="font-size: 0.8rem; color:var(--text-secondary,#64748b);">Yesterday</span>
                     </div>
-                    <p style="font-size: 0.9rem; color: #64748b; line-height: 1.5; margin: 0;">
+                    <p style="font-size: 0.9rem; color:var(--text-secondary,#64748b); line-height: 1.5; margin: 0;">
                       "Mastering Web Components with Stencil.js" is now live on md!
                     </p>
-                    <div style="margin-top: 12px; padding: 12px; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; display: flex; align-items: center; gap: 12px;">
+                    <div style="margin-top: 12px; padding: 12px; background:var(--bg-secondary,#f8fafc); border-radius: 8px; border:1px solid var(--border-default,#e2e8f0); display: flex; align-items: center; gap: 12px;">
                       <div style="font-size: 1.5rem;">📝</div>
                       <div>
                         <div style="font-weight: 500; font-size: 0.85rem;">Stencil Roadmap 2024</div>
-                        <div style="font-size: 0.75rem; color: #94a3b8;">md.com/design-tips</div>
+                        <div style="font-size: 0.75rem; color:var(--text-secondary,#64748b);">md.com/design-tips</div>
                       </div>
                     </div>
                   </div>
@@ -169,16 +169,16 @@ export function initMyProfileDemo() {
 
               <ui-card style="--card-padding: 20px;">
                 <div style="display: flex; gap: 16px;">
-                  <ui-avatar label="JD" style="background: #ec4899; color: white;"></ui-avatar>
+                  <ui-avatar label="JD" style="background: var(--accent-pink,#ec4899); color: white;"></ui-avatar>
                   <div style="flex: 1;">
                     <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                       <div style="font-weight: 600;">Collaborated on "UI Kit Alpha"</div>
-                      <span style="font-size: 0.8rem; color: #94a3b8;">3 days ago</span>
+                      <span style="font-size: 0.8rem; color:var(--text-secondary,#64748b);">3 days ago</span>
                     </div>
                     <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px;">
-                       <ui-avatar size="md" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100" style="--avatar-size: 24px;"></ui-avatar>
-                       <ui-avatar size="md" src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=100" style="--avatar-size: 24px;"></ui-avatar>
-                       <span style="font-size: 0.8rem; color: #64748b;">+4 other contributors</span>
+                       <ui-avatar size="md" src="/build/assets/images/nature_lake_2.png" style="--avatar-size: 24px;"></ui-avatar>
+                       <ui-avatar size="md" src="/build/assets/images/nature_ocean_4.png" style="--avatar-size: 24px;"></ui-avatar>
+                       <span style="font-size: 0.8rem; color:var(--text-secondary,#64748b);">+4 other contributors</span>
                     </div>
                   </div>
                 </div>
@@ -186,7 +186,7 @@ export function initMyProfileDemo() {
             </div>
             
             <!-- Portfolio Content (Projected via Slot) -->
-            <div slot="portfolio-content" style="padding: 20px; text-align: center; color: #64748b;">
+            <div slot="portfolio-content" style="padding: 20px; text-align: center; color:var(--text-secondary,#64748b);">
                 <p>Portfolio items would be displayed here.</p>
             </div>
           </ui-tabs>
@@ -222,7 +222,7 @@ export function initMyProfileDemo() {
           title: 'Followers',
           icon: 'users', // Lucide icon
           badge: '1.2k',
-          content: '<div style="padding: 20px; text-align: center; color: #64748b;">Followers list would be here.</div>'
+          content: '<div style="padding: 20px; text-align: center; color:var(--text-secondary,#64748b);">Followers list would be here.</div>'
         }
       ];
     }

package/dist/collection/assets/js/demos/nav-bar-demo.js

@@ -15,7 +15,7 @@ export function initNavBarDemo() {
     </div>
     
     <div id="navBarContainer" class="playground-preview" style="height: 600px; padding: 0; align-items: stretch; justify-content: flex-start; overflow: hidden;">
-       <nav-bar id="demoNavBar" app-title="App Store" logo-url="https://img.icons8.com/fluency/48/000000/apple-app-store.png" icon-library="lucide"></nav-bar>
+       <nav-bar id="demoNavBar" app-title="App Store" logo-url="/build/assets/images/logo.png" icon-library="lucide"></nav-bar>
        <div style="flex: 1; display: flex; flex-direction: column; min-width: 0;">
           <div style="height: 80px; border-bottom: 1px solid rgba(128,128,128,0.1); display: flex; align-items: center; padding: 0 32px; background: rgba(128,128,128,0.03);">
              <h3 style="margin: 0; font-size: 18px; font-weight: 600;">Dashboard</h3>