atomicuilibrary 0.0.1 → 0.1.3

package/dist/collection/assets/js/demos/theme-selector-demo.js

@@ -56,13 +56,13 @@ export function initThemeSelectorDemo() {
               <p style="color: #6b7280; font-size: 15px; line-height: 1.5; margin: 0 0 16px;">Optimal for daytime use with high readability and a fresh, professional look.</p>
               
               <div style="display: flex; gap: 10px; margin-top: 16px;">
-                <div style="width: 32px; height: 32px; border-radius: 8px; background: #ffffff; border: 1px solid #e5e7eb;"></div>
-                <div style="width: 32px; height: 32px; border-radius: 8px; background: #f9fafb; border: 1px solid #e5e7eb;"></div>
+                <div style="width: 32px; height: 32px; border-radius: 8px; background:var(--bg-primary,#ffffff); border:1px solid var(--border-default,#e5e7eb);"></div>
+                <div style="width: 32px; height: 32px; border-radius: 8px; background:var(--bg-secondary,#f9fafb); border:1px solid var(--border-default,#e5e7eb);"></div>
                 <div style="width: 32px; height: 32px; border-radius: 8px; background: #10b981;"></div>
                 <div style="width: 32px; height: 32px; border-radius: 8px; background: #1f2937;"></div>
               </div>
               
-              ${currentTheme === 'light' ? '<div style="margin-top: 16px; padding: 10px; background: #ecfdf5; border-radius: 10px; text-align: center; font-size: 13px; color: #059669; font-weight: 600;">✓ Currently Active</div>' : ''}
+              ${currentTheme === 'light' ? '<div style="margin-top: 16px; padding: 10px; background: #ecfdf5; border-radius: 10px; text-align: center; font-size: 13px; color:var(--accent-green,#059669); font-weight: 600;">✓ Currently Active</div>' : ''}
             </div>
 
             <!-- Dark Theme Card -->
@@ -86,10 +86,10 @@ export function initThemeSelectorDemo() {
               <p style="color: #9ca3af; font-size: 15px; line-height: 1.5; margin: 0 0 16px;">Reduced eye strain with deep contrast, perfect for low-light environments.</p>
               
               <div style="display: flex; gap: 10px; margin-top: 16px;">
-                <div style="width: 32px; height: 32px; border-radius: 8px; background: #111827; border: 1px solid #374151;"></div>
+                <div style="width: 32px; height: 32px; border-radius: 8px; background:var(--bg-secondary,#f8fafc); border: 1px solid #374151;"></div>
                 <div style="width: 32px; height: 32px; border-radius: 8px; background: #1f2937; border: 1px solid #374151;"></div>
                 <div style="width: 32px; height: 32px; border-radius: 8px; background: #10b981;"></div>
-                <div style="width: 32px; height: 32px; border-radius: 8px; background: #6366f1;"></div>
+                <div style="width: 32px; height: 32px; border-radius: 8px; background: var(--accent-indigo,#6366f1);"></div>
               </div>
               
               ${currentTheme === 'dark' ? '<div style="margin-top: 16px; padding: 10px; background: rgba(16, 185, 129, 0.15); border-radius: 10px; text-align: center; font-size: 13px; color: #10b981; font-weight: 600;">✓ Currently Active</div>' : ''}
@@ -99,8 +99,8 @@ export function initThemeSelectorDemo() {
           <div style="margin-top: 32px; padding: 20px; background-color: #f0f9ff; border-radius: 12px; border: 1px solid #bfdbfe; display: flex; align-items: flex-start; gap: 16px;">
             <div style="font-size: 24px;">💡</div>
             <div>
-              <p style="margin: 0; color: #1e40af; font-size: 15px; font-weight: 500;">Tip</p>
-              <p style="margin: 4px 0 0; color: #1e40af; font-size: 14px; opacity: 0.8;">Your theme preference is saved automatically and will persist across browser sessions.</p>
+              <p style="margin: 0; color:var(--accent-blue,#1e40af); font-size: 15px; font-weight: 500;">Tip</p>
+              <p style="margin: 4px 0 0; color:var(--accent-blue,#1e40af); font-size: 14px; opacity: 0.8;">Your theme preference is saved automatically and will persist across browser sessions.</p>
             </div>
           </div>
         </div>
@@ -160,30 +160,30 @@ export function initThemeSelectorDemo() {
           <h3>Theme Customization</h3>
           <p style="color: #6b7280; margin-bottom: 24px;">Fine-tune your visual experience with these personalization settings.</p>
           
-          <div style="background-color: white; padding: 32px; border-radius: 16px; border: 1px solid #e5e7eb; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
+          <div style="background-color:var(--bg-primary,white); padding: 32px; border-radius: 16px; border:1px solid var(--border-default,#e5e7eb); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
             <h4 style="margin: 0 0 24px; color: #1f2937; font-weight: 600; font-size: 18px;">Accessibility & Preferences</h4>
             
             <div style="display: flex; flex-direction: column; gap: 20px;">
-              <div style="display: flex; justify-content: space-between; align-items: center; padding: 20px; background-color: #f9fafb; border-radius: 12px; border: 1px solid #f1f5f9;">
+              <div style="display: flex; justify-content: space-between; align-items: center; padding: 20px; background-color: #f9fafb; border-radius: 12px; border:1px solid var(--border-subtle,#f1f5f9);">
                 <div>
                   <h5 style="margin: 0 0 4px; color: #1f2937; font-size: 16px;">Auto Theme Switching</h5>
-                  <p style="margin: 0; font-size: 14px; color: #64748b;">Sync appearance with your system settings</p>
+                  <p style="margin: 0; font-size: 14px; color:var(--text-secondary,#64748b);">Sync appearance with your system settings</p>
                 </div>
                 <ui-checkbox id="autoTheme" label=""></ui-checkbox>
               </div>
               
-              <div style="display: flex; justify-content: space-between; align-items: center; padding: 20px; background-color: #f9fafb; border-radius: 12px; border: 1px solid #f1f5f9;">
+              <div style="display: flex; justify-content: space-between; align-items: center; padding: 20px; background-color: #f9fafb; border-radius: 12px; border:1px solid var(--border-subtle,#f1f5f9);">
                 <div>
                   <h5 style="margin: 0 0 4px; color: #1f2937; font-size: 16px;">High Contrast Mode</h5>
-                  <p style="margin: 0; font-size: 14px; color: #64748b;">Enhanced visibility for text and UI elements</p>
+                  <p style="margin: 0; font-size: 14px; color:var(--text-secondary,#64748b);">Enhanced visibility for text and UI elements</p>
                 </div>
                 <ui-checkbox id="highContrast" label=""></ui-checkbox>
               </div>
               
-              <div style="display: flex; justify-content: space-between; align-items: center; padding: 20px; background-color: #f9fafb; border-radius: 12px; border: 1px solid #f1f5f9;">
+              <div style="display: flex; justify-content: space-between; align-items: center; padding: 20px; background-color: #f9fafb; border-radius: 12px; border:1px solid var(--border-subtle,#f1f5f9);">
                 <div>
                   <h5 style="margin: 0 0 4px; color: #1f2937; font-size: 16px;">Reduced Motion</h5>
-                  <p style="margin: 0; font-size: 14px; color: #64748b;">Minimize unnecessary animations</p>
+                  <p style="margin: 0; font-size: 14px; color:var(--text-secondary,#64748b);">Minimize unnecessary animations</p>
                 </div>
                 <ui-checkbox id="reducedMotion" label=""></ui-checkbox>
               </div>
@@ -191,7 +191,7 @@ export function initThemeSelectorDemo() {
             
             <div style="margin-top: 32px; padding: 20px; background-color: #fff9eb; border-radius: 12px; border: 1px solid #fef3c7; display: flex; gap: 16px;">
               <div style="font-size: 24px;">⚙️</div>
-              <p style="margin: 0; color: #92400e; font-size: 14px; line-height: 1.5;">
+              <p style="margin: 0; color:var(--accent-yellow,#92400e); font-size: 14px; line-height: 1.5;">
                 <strong>Configuration Note:</strong> These toggles demonstrate how accessibility features can be integrated into your theme system.
               </p>
             </div>
@@ -278,7 +278,7 @@ window.showInteractiveTheme = function () {
   const currentTheme = document.documentElement.className || 'light';
 
   themeContainer.innerHTML = `
-    <div style="background-color: white; border-radius: 16px; padding: 32px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); border: 1px solid #e5e7eb;">
+    <div style="background-color:var(--bg-primary,white); border-radius: 16px; padding: 32px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); border:1px solid var(--border-default,#e5e7eb);">
       <div style="display: flex; gap: 40px; flex-wrap: wrap;">
         <div style="flex: 1; min-width: 300px;">
           <h3 style="margin-top: 0; font-size: 20px; font-weight: 700;">🎮 Interactive Playground</h3>
@@ -290,8 +290,8 @@ window.showInteractiveTheme = function () {
               data='[{"label": "☀️ Light", "value": "light"}, {"label": "🌙 Dark", "value": "dark"}]'
             ></ui-dropdown>
             
-            <div style="padding: 24px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0;">
-              <h5 style="margin: 0 0 16px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b;">Test Components</h5>
+            <div style="padding: 24px; background:var(--bg-secondary,#f8fafc); border-radius: 12px; border:1px solid var(--border-default,#e2e8f0);">
+              <h5 style="margin: 0 0 16px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color:var(--text-secondary,#64748b);">Test Components</h5>
               
               <div style="margin-bottom: 20px;">
                 <label style="display: block; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: #334155;">Status Badges</label>
@@ -324,21 +324,21 @@ window.showInteractiveTheme = function () {
               </div>
             </div>
             
-            <div style="padding: 16px; background: #eff6ff; border-radius: 10px; font-size: 14px; border-left: 4px solid #3b82f6;">
-              <span style="color: #1e40af;">Switch themes to see colors, shadows, and contrast update instantly.</span>
+            <div style="padding: 16px; background:var(--accent-blue-soft,#eff6ff); border-radius: 10px; font-size: 14px; border-left: 4px solid #3b82f6;">
+              <span style="color:var(--accent-blue,#1e40af);">Switch themes to see colors, shadows, and contrast update instantly.</span>
             </div>
           </div>
         </div>
         
-        <div style="flex: 1.5; min-width: 400px; background-color: #f1f5f9; padding: 24px; border-radius: 16px; border: 1px solid #e2e8f0;">
+        <div style="flex: 1.5; min-width: 400px; background-color:var(--text-primary,#1e293b); padding: 24px; border-radius: 16px; border:1px solid var(--border-default,#e2e8f0);">
           <h4 style="margin-top: 0; color: #475569; font-size: 16px; font-weight: 600;">Live Preview</h4>
-          <div id="interactiveThemePreview" style="margin-top: 20px; padding: 32px; border-radius: 12px; background: white; border: 1px solid #e2e8f0; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
-            <h3 style="margin: 0 0 16px; color: #1e293b; font-size: 24px; font-weight: 700;">Premium Interface</h3>
-            <p style="margin: 0 0 24px; color: #64748b; line-height: 1.6; font-size: 16px;">This preview demonstrates the dynamic adaptation of styles. Custom properties and token-based coloring ensure a seamless transition between themes.</p>
+          <div id="interactiveThemePreview" style="margin-top: 20px; padding: 32px; border-radius: 12px; background:var(--bg-primary,white); border:1px solid var(--border-default,#e2e8f0); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+            <h3 style="margin: 0 0 16px; color:var(--text-primary,#1e293b); font-size: 24px; font-weight: 700;">Premium Interface</h3>
+            <p style="margin: 0 0 24px; color:var(--text-secondary,#64748b); line-height: 1.6; font-size: 16px;">This preview demonstrates the dynamic adaptation of styles. Custom properties and token-based coloring ensure a seamless transition between themes.</p>
             
-            <div style="margin-top: 24px; padding: 24px; background: #f8fafc; border-radius: 12px; border: 1px solid #f1f5f9; box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);">
+            <div style="margin-top: 24px; padding: 24px; background:var(--bg-secondary,#f8fafc); border-radius: 12px; border:1px solid var(--border-subtle,#f1f5f9); box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);">
               <h4 style="margin: 0 0 12px; color: #334155; font-size: 18px; font-weight: 600;">Content Container</h4>
-              <p style="margin: 0; font-size: 15px; color: #64748b; line-height: 1.5;">Card backgrounds and border colors are calculated based on the active theme mode to maintain accessibility ratios.</p>
+              <p style="margin: 0; font-size: 15px; color:var(--text-secondary,#64748b); line-height: 1.5;">Card backgrounds and border colors are calculated based on the active theme mode to maintain accessibility ratios.</p>
             </div>
             
             <div style="margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap;">
@@ -348,7 +348,7 @@ window.showInteractiveTheme = function () {
               <ui-badge label="Danger" color="danger"></ui-badge>
             </div>
           </div>
-          <div id="themeOutput" style="margin-top: 24px; padding: 16px; background-color: #1e293b; color: #94a3b8; border-radius: 8px; font-family: 'Fira Code', monospace; font-size: 12px; border: 1px solid #334155;">
+          <div id="themeOutput" style="margin-top: 24px; padding: 16px; background-color:var(--text-primary,#1e293b); color:var(--text-secondary,#64748b); border-radius: 8px; font-family: 'Fira Code', monospace; font-size: 12px; border: 1px solid #334155;">
             $ theme: <span style="color: #60a5fa;">"${currentTheme}"</span>;
           </div>
         </div>

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

@@ -13,20 +13,27 @@ export function initTimelineDemo() {
     <p style="margin-top: 0; opacity: 0.7; font-size: 14px; margin-bottom: 24px;">Displays a sequence of events in vertical or horizontal orientation.</p>
 
     <div class="demo-controls" style="margin: 20px 0; display: flex; gap: 10px; flex-wrap: wrap;">
-      <ui-button label="🎮 Interactive Playground"  onclick="showInteractiveTimeline()" style="--ui-button-bg: #8b5cf6; --ui-button-text-color: white;" variant="outline"></ui-button>
-      <ui-button label="Vertical Layouts"  onclick="showVerticalTimeline()" variant="outline"></ui-button>
-      <ui-button label="Horizontal Layouts"  onclick="showHorizontalTimeline()" variant="outline"></ui-button>
-      <ui-button label="Overflow & Scroll"  onclick="showOverflowTimeline()" variant="outline"></ui-button>
-      <ui-button label="Multi-line Grid"  style="--ui-button-bg: #ec4899; --ui-button-text-color: white;" onclick="showMultilineTimeline()" variant="outline"></ui-button>
-      <ui-button label="Panels & Markers"  style="--ui-button-bg: #6366f1; --ui-button-text-color: white;" onclick="showAdvancedTimeline()" variant="outline"></ui-button>
-      <ui-button label="Filtering (Premium)"  style="--ui-button-bg: #f43f5e; --ui-button-text-color: white;" onclick="showFilteringTimeline()" variant="outline"></ui-button>
+      <ui-button label="🎮 Interactive Playground" data-demo="playground" onclick="showInteractiveTimeline()" style="--ui-button-bg: var(--accent-purple,#8b5cf6); --ui-button-text-color: white;" variant="outline"></ui-button>
+      <ui-button label="Vertical Layouts" data-demo="vertical" onclick="showVerticalTimeline()" variant="outline"></ui-button>
+      <ui-button label="Horizontal Layouts" data-demo="horizontal" onclick="showHorizontalTimeline()" variant="outline"></ui-button>
+      <ui-button label="Overflow & Scroll" data-demo="overflow" onclick="showOverflowTimeline()" variant="outline"></ui-button>
+      <ui-button label="Multi-line Grid" data-demo="multiline" style="--ui-button-bg: var(--accent-pink,#ec4899); --ui-button-text-color: white;" onclick="showMultilineTimeline()" variant="outline"></ui-button>
+      <ui-button label="Panels & Markers" data-demo="panels" style="--ui-button-bg: var(--accent-indigo,#6366f1); --ui-button-text-color: white;" onclick="showAdvancedTimeline()" variant="outline"></ui-button>
+      <ui-button label="Filtering (Premium)" data-demo="filtering" style="--ui-button-bg: #f43f5e; --ui-button-text-color: white;" onclick="showFilteringTimeline()" variant="outline"></ui-button>
     </div>
 
     <div id="timelineDemoContainer" style="margin-top: 20px;"></div>
   `;
 
+  const updateTimelineActiveBtn = demoName => {
+    section.querySelectorAll('.demo-controls ui-button').forEach(btn => {
+      btn.selected = btn.getAttribute('data-demo') === demoName;
+    });
+  };
+
   // Place showAdvancedTimeline here before others to minimize context shift issues
   window.showAdvancedTimeline = () => {
+    updateTimelineActiveBtn('panels');
     const container = document.getElementById('timelineDemoContainer');
     if (!container) return;
 
@@ -41,7 +48,7 @@ export function initTimelineDemo() {
       // Auto-numbering will use index, so 1, 2, 3
       { label: 'First Step', description: 'This shows number 1 in the dot.', status: 'success' },
       // Custom image (using placeholder)
-      { label: 'Profile Update', description: 'Shows user avatar.', image: 'https://i.pravatar.cc/150?img=12', status: 'active' },
+      { label: 'Profile Update', description: 'Shows user avatar.', image: '/build/assets/images/logo.png', status: 'active' },
       { label: 'Third Step', description: 'Resumes numbering (3).', status: 'pending' },
       { label: 'Rocket Launch', description: 'Explicit icon marker.', icon: '🚀', status: 'wait' },
     ];
@@ -69,6 +76,7 @@ export function initTimelineDemo() {
   };
 
   window.showInteractiveTimeline = () => {
+    updateTimelineActiveBtn('playground');
     const container = document.getElementById('timelineDemoContainer');
     if (!container) return;
 
@@ -115,6 +123,7 @@ export function initTimelineDemo() {
   };
 
   window.showMultilineTimeline = () => {
+    updateTimelineActiveBtn('multiline');
     const container = document.getElementById('timelineDemoContainer');
     if (!container) return;
 
@@ -140,6 +149,7 @@ export function initTimelineDemo() {
   };
 
   window.showOverflowTimeline = () => {
+    updateTimelineActiveBtn('overflow');
     const container = document.getElementById('timelineDemoContainer');
     if (!container) return;
 
@@ -281,6 +291,7 @@ export function initTimelineDemo() {
   };
 
   window.showFilteringTimeline = () => {
+    updateTimelineActiveBtn('filtering');
     const container = document.getElementById('timelineDemoContainer');
     if (!container) return;
 
@@ -294,7 +305,7 @@ export function initTimelineDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3 style="color: #f43f5e;">⚡ Premium Filtering & Actions</h3>
-        <p style="color: #6b7280; margin-bottom: 24px;">Integrated search and interactive items for large data sets.</p>
+        <p style="color: var(--text-secondary, #6b7280); margin-bottom: 24px;">Integrated search and interactive items for large data sets.</p>
 
         <ui-timeline 
           searchable="true" 
@@ -307,36 +318,38 @@ export function initTimelineDemo() {
   };
 
   window.showVerticalTimeline = () => {
+    updateTimelineActiveBtn('vertical');
     const container = document.getElementById('timelineDemoContainer');
     if (!container) return;
     container.innerHTML = `
       <div class="demo-block">
         <h3>Vertical: Left (Standard)</h3>
-        <p style="color: #6b7280; margin-bottom: 20px;">Default alignment with content on the right.</p>
+        <p style="color: var(--text-secondary, #6b7280); margin-bottom: 20px;">Default alignment with content on the right.</p>
         <ui-timeline align="left" events='${JSON.stringify(events)}'></ui-timeline>
       </div>
 
       <div class="demo-block">
         <h3>Vertical: Right</h3>
-        <p style="color: #6b7280; margin-bottom: 20px;">flipped alignment with content on the left.</p>
+        <p style="color: var(--text-secondary, #6b7280); margin-bottom: 20px;">flipped alignment with content on the left.</p>
         <ui-timeline align="right" events='${JSON.stringify(events)}'></ui-timeline>
       </div>
 
       <div class="demo-block">
         <h3>Vertical: Alternating</h3>
-        <p style="color: #6b7280; margin-bottom: 20px;">Events alternate sides for a balanced tree view.</p>
+        <p style="color: var(--text-secondary, #6b7280); margin-bottom: 20px;">Events alternate sides for a balanced tree view.</p>
         <ui-timeline align="alternate" events='${JSON.stringify(events)}'></ui-timeline>
       </div>
     `;
   };
 
   window.showHorizontalTimeline = () => {
+    updateTimelineActiveBtn('horizontal');
     const container = document.getElementById('timelineDemoContainer');
     if (!container) return;
     container.innerHTML = `
       <div class="demo-block" style="overflow-x: auto;">
         <h3>Horizontal: Bottom (Standard)</h3>
-        <p style="color: #6b7280; margin-bottom: 20px;"><strong>Block Below:</strong> Data appears below the timeline.</p>
+        <p style="color: var(--text-secondary, #6b7280); margin-bottom: 20px;"><strong>Block Below:</strong> Data appears below the timeline.</p>
         <div style="min-width: 600px;">
           <ui-timeline mode="horizontal" align="bottom" events='${JSON.stringify(events)}'></ui-timeline>
         </div>
@@ -344,7 +357,7 @@ export function initTimelineDemo() {
 
       <div class="demo-block" style="overflow-x: auto;">
         <h3>Horizontal: Top</h3>
-        <p style="color: #6b7280; margin-bottom: 20px;"><strong>Block Above:</strong> Data appears above the timeline.</p>
+        <p style="color: var(--text-secondary, #6b7280); margin-bottom: 20px;"><strong>Block Above:</strong> Data appears above the timeline.</p>
         <div style="min-width: 600px;">
           <ui-timeline mode="horizontal" align="top" events='${JSON.stringify(events)}'></ui-timeline>
         </div>

package/dist/collection/assets/js/demos/timeline-playground.js

@@ -1,4 +1,4 @@
-// Timeline Playground Demo
+// Timeline Playground Demo
 export function initTimelinePlayground() {
   const section = document.getElementById('timeline-playground');
   if (!section) return;
@@ -18,7 +18,7 @@ export function initTimelinePlayground() {
           <ui-button id="updateTimelineBtn" label="Update Timeline" color="success" variant="outline"></ui-button>
         </div>
       </div>
-      <div style="flex: 2; min-width: 400px; background-color: #f9fafb; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);">
+      <div style="flex: 2; min-width: 400px; background-color: #f9fafb; padding: 24px; border-radius: 12px; border:1px solid var(--border-default,#e5e7eb); box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);">
         <h4 style="margin-top: 0; color: #374151;">Preview Case</h4>
         <div style="margin-top: 20px;">
           <ui-timeline id="timelinePlaygroundComponent"></ui-timeline>

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

@@ -1,4 +1,4 @@
-// Timer Component Demo - Elite Features
+// Timer Component Demo - Elite Features
 export function initTimerDemo() {
   const section = document.getElementById('timer');
   if (!section) return;
@@ -59,9 +59,9 @@ window.showEliteDemo = function () {
       <div class="demo-block">
         <h3>🔔 Alerts & Notifications</h3>
         <p style="font-size: 13px; opacity: 0.7; margin-bottom: 20px;">Native browser notifications and buzzer sounds.</p>
-        <div style="padding: 20px; background: #f0fdf4; border-radius: 8px; border: 1px solid #10b981; text-align: center;">
+        <div style="padding: 20px; background:var(--accent-green-soft,#f0fdf4); border-radius: 8px; border: 1px solid #10b981; text-align: center;">
            <ui-timer enable-sound="true" enable-notifications="true" steps='[{"label": "Notice Me", "duration": 5}]' theme='{"--timer-primary-color": "#10b981"}'></ui-timer>
-           <p style="font-size: 11px; margin-top: 10px; color: #15803d;">Wait for 5s to hear chime and see notification.</p>
+           <p style="font-size: 11px; margin-top: 10px; color:var(--accent-green,#15803d);">Wait for 5s to hear chime and see notification.</p>
         </div>
       </div>
 
@@ -101,7 +101,7 @@ window.showTimerOverview = function () {
       <div class="demo-block" style="margin: 0;">
         <h3 style="margin-top: 0; display: flex; align-items: center; gap: 8px;">📅 Long-term Deadline</h3>
         <p style="font-size: 13px; opacity: 0.7; margin-bottom: 20px;">Target date countdown for events and releases.</p>
-        <div style="background: #f5f3ff; padding: 20px; border-radius: 8px; border: 1px solid #ddd6fe; display: flex; justify-content: center; align-items: center;">
+        <div style="background:var(--accent-purple-soft,#f5f3ff); padding: 20px; border-radius: 8px; border: 1px solid #ddd6fe; display: flex; justify-content: center; align-items: center;">
            <ui-timer id="date-deadline" theme='{"--timer-primary-color": "#10b981", "--timer-time-font-size": "26px"}'></ui-timer>
         </div>
       </div>
@@ -110,11 +110,11 @@ window.showTimerOverview = function () {
       <div class="demo-block" style="margin: 0;">
         <h3 style="margin-top: 0; display: flex; align-items: center; gap: 8px;">📥 Slot Customization</h3>
         <p style="font-size: 13px; opacity: 0.7; margin-bottom: 20px;">Inject custom icons or text into the timer center.</p>
-        <div style="background: #fdf2f8; padding: 20px; border-radius: 8px; border: 1px solid #fbcfe8;">
+        <div style="background:var(--accent-pink-soft,#fdf2f8); padding: 20px; border-radius: 8px; border: 1px solid #fbcfe8;">
           <ui-timer steps='[{"label": "Custom Slot", "duration": 60}]' theme='{"--timer-primary-color": "#10b981"}'>
              <div slot="content" style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
                 <span style="font-size: 24px;">🚀</span>
-                <span style="font-size: 14px; font-weight: 800; color: #be185d;">LAUNCHING</span>
+                <span style="font-size: 14px; font-weight: 800; color:var(--accent-pink,#be185d);">LAUNCHING</span>
              </div>
           </ui-timer>
         </div>
@@ -142,7 +142,7 @@ window.showTimerPlayground = function () {
       <p style="opacity: 0.7; margin-bottom: 20px;">Configure steps, modes, and behaviors in real-time.</p>
       
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-top: 20px;">
-        <div style="background: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb; max-height: 80vh; overflow-y: auto;">
+        <div style="background:var(--bg-secondary,#f9fafb); padding: 20px; border-radius: 8px; border:1px solid var(--border-default,#e5e7eb); max-height: 80vh; overflow-y: auto;">
           <h4 style="margin-top: 0; margin-bottom: 20px; co          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;">
             <ui-dropdown id="timerMode" label="Mode" options='[{"label": "Countdown", "value": "countdown"}, {"label": "Stopwatch", "value": "stopwatch"}]' value="countdown"></ui-dropdown>
             <ui-dropdown id="timerPrecision" label="Precision" options='[{"label": "Seconds", "value": "seconds"}, {"label": "Milliseconds", "value": "milliseconds"}]' value="seconds"></ui-dropdown>
@@ -175,11 +175,11 @@ window.showTimerPlayground = function () {
           <ui-button label="Apply Config & Reset" color="success" style="width: 100%;" onclick="updateTimerPlayground()"></ui-button>
         </div>
 
-        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 40px; min-height: 400px;">
+        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; background:var(--bg-primary,white); border:1px solid var(--border-default,#e5e7eb); border-radius: 8px; padding: 40px; min-height: 400px;">
           <div id="timerPreview" style="width: 100%; max-width: 400px;"></div>
           
-          <div id="timerLog" style="margin-top: 30px; width: 100%; padding: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; font-family: monospace; font-size: 12px; height: 100px; overflow-y: auto;">
-             <div style="color: #64748b; margin-bottom: 4px;">Event Log:</div>
+          <div id="timerLog" style="margin-top: 30px; width: 100%; padding: 12px; background:var(--bg-secondary,#f8fafc); border:1px solid var(--border-default,#e2e8f0); border-radius: 6px; font-family: monospace; font-size: 12px; height: 100px; overflow-y: auto;">
+             <div style="color:var(--text-secondary,#64748b); margin-bottom: 4px;">Event Log:</div>
              <div id="timer-log-content">Timer ready.</div>
           </div>
           

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

@@ -1,4 +1,4 @@
-// Toolbar Component Demo
+// Toolbar Component Demo
 export function initToolbarDemo() {
   const section = document.getElementById('toolbar');
   if (!section) return;
@@ -54,7 +54,7 @@ export function initToolbarDemo() {
   }
 
   function wrap(html) {
-    return `<div style="padding:16px;background:var(--bg-secondary,#f8fafc);border-radius:10px;border:1px solid #e2e8f0;">${html}</div>`;
+    return `<div style="padding:16px;background:var(--bg-secondary,#f8fafc);border-radius:10px;border:1px solid var(--border-default,#e2e8f0);">${html}</div>`;
   }
 
   function serialize(obj) {
@@ -76,7 +76,7 @@ export function initToolbarDemo() {
       { id: 'spc', type: 'spacer' },
       { id: 'search', type: 'search', placeholder: 'Search files…', priority: 5, minWidth: '160px' },
       { id: 'sep3', type: 'separator' },
-      { id: 'avt', type: 'avatar', src: 'https://i.pravatar.cc/150?img=12', name: 'Alice', status: 'online', size: '28px' },
+      { id: 'avt', type: 'avatar', src: '/build/assets/images/logo.png', name: 'Alice', status: 'online', size: '28px' },
     ];
 
     document.getElementById('toolbarDemoContent').innerHTML = `
@@ -202,7 +202,7 @@ export function initToolbarDemo() {
             },
             { id: 'spc', type: 'spacer' },
             { id: 'notif', type: 'button', icon: 'bell', variant: 'ghost', iconOnly: true, badge: 3, badgeColor: 'danger', tooltip: 'Notifications' },
-            { id: 'avt', type: 'avatar', src: 'https://i.pravatar.cc/150?img=33', name: 'Bob', size: '28px', clickable: true },
+            { id: 'avt', type: 'avatar', src: '/build/assets/images/logo.png', name: 'Bob', size: '28px', clickable: true },
           ])}"
         ></ui-toolbar>`),
       )}
@@ -274,7 +274,7 @@ export function initToolbarDemo() {
       { id: 'sep', type: 'separator' },
       { id: 'del', type: 'button', icon: 'trash-2', label: 'Delete', variant: 'danger' },
       { id: 'spc', type: 'spacer' },
-      { id: 'avt', type: 'avatar', src: 'https://i.pravatar.cc/150?img=5', size: '28px' },
+      { id: 'avt', type: 'avatar', src: '/build/assets/images/logo.png', size: '28px' },
     ];
 
     const variants = [
@@ -324,7 +324,7 @@ export function initToolbarDemo() {
         { id: 'notif', type: 'button', icon: 'bell', variant: 'ghost', iconOnly: true, badge: 2, badgeColor: 'danger' },
         { id: 'mode', type: 'button', icon: 'moon', variant: 'ghost', iconOnly: true, toggleable: true, tooltip: 'Dark mode' },
         { id: 'sep2', type: 'separator' },
-        { id: 'avt', type: 'avatar', src: 'https://i.pravatar.cc/150?img=44', name: 'Clara', size: '28px', clickable: true },
+        { id: 'avt', type: 'avatar', src: '/build/assets/images/logo.png', name: 'Clara', size: '28px', clickable: true },
       ],
     };
 
@@ -389,7 +389,7 @@ export function initToolbarDemo() {
       ${block(
         'Overflow — Dropdown Strategy',
         'Resize the window or drag the handle to see items collapse into the "More" button. Higher <code>priority</code> items stay visible longest. <code>pinToOverflow</code> items always appear in the overflow menu no matter what.',
-        `<div style="resize:horizontal;overflow:auto;min-width:200px;max-width:100%;padding:16px;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;">
+        `<div style="resize:horizontal;overflow:auto;min-width:200px;max-width:100%;padding:16px;background:var(--bg-secondary,#f8fafc);border:1px dashed #cbd5e1;border-radius:10px;">
           <ui-toolbar
             items="${serialize(items)}"
             overflow-strategy="dropdown"
@@ -436,11 +436,11 @@ export function initToolbarDemo() {
       ${block(
         'Vertical Toolbar',
         'Set <code>orientation="vertical"</code>. Icons are centred; separator becomes a horizontal rule.',
-        `<div style="display:flex;gap:24px;align-items:flex-start;padding:20px;background:#f8fafc;border-radius:10px;border:1px solid #e2e8f0;">
+        `<div style="display:flex;gap:24px;align-items:flex-start;padding:20px;background:var(--bg-secondary,#f8fafc);border-radius:10px;border:1px solid var(--border-default,#e2e8f0);">
           <ui-toolbar orientation="vertical" bordered rounded elevation="1" gap="2px" padding="8px 4px"
             items="${serialize(items)}" style="height:360px;">
           </ui-toolbar>
-          <div style="flex:1;background:#fff;border-radius:8px;border:1px solid #e2e8f0;min-height:360px;display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:13px;">Canvas area</div>
+          <div style="flex:1;background:#fff;border-radius:8px;border:1px solid var(--border-default,#e2e8f0);min-height:360px;display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:13px;">Canvas area</div>
         </div>`,
       )}
 
@@ -468,7 +468,7 @@ export function initToolbarDemo() {
         'Use named slots <code>left</code>, <code>center</code>, <code>right</code>, <code>before</code>, <code>after</code>, or the default slot to inject any custom HTML / components.',
         wrap(`<ui-toolbar bordered rounded>
           <div slot="left" style="display:flex;align-items:center;gap:12px;padding:0 4px;">
-            <span style="font-weight:700;font-size:15px;color:#2563eb;letter-spacing:-0.01em;">⚡ Studio</span>
+            <span style="font-weight:700;font-size:15px;color:var(--accent-blue,#2563eb);letter-spacing:-0.01em;">⚡ Studio</span>
           </div>
           <div slot="center" style="display:flex;align-items:center;gap:6px;">
             <ui-input id="slotSearch" placeholder="Search resources…" style="width:240px;"></ui-input>
@@ -476,7 +476,7 @@ export function initToolbarDemo() {
           <div slot="right" style="display:flex;align-items:center;gap:8px;">
             <ui-button icon="bell" icon-only variant="ghost" size="md" tooltip="Notifications"></ui-button>
             <ui-button icon="settings" icon-only variant="ghost" size="md" tooltip="Settings"></ui-button>
-            <ui-avatar src="https://i.pravatar.cc/150?img=22" size="32px" shape="circle" status="online" style="margin-left:4px;"></ui-avatar>
+            <ui-avatar src="/build/assets/images/logo.png" size="32px" shape="circle" status="online" style="margin-left:4px;"></ui-avatar>
           </div>
         </ui-toolbar>`),
       )}
@@ -544,9 +544,9 @@ export function initToolbarDemo() {
     document.getElementById('toolbarDemoContent').innerHTML = `
       <div class="demo-block">
         <h3>Interactive Playground</h3>
-        <p style="color: #64748b; margin-bottom: 24px;">Configure the toolbar system in real-time and monitor system events.</p>
+        <p style="color:var(--text-secondary,#64748b); margin-bottom: 24px;">Configure the toolbar system in real-time and monitor system events.</p>
 
-        <div style="display: flex; flex-direction: column; gap: 24px; background: #f8fafc; padding: 24px; border-radius: 16px; border: 1px solid #e2e8f0; margin-bottom: 32px;">
+        <div style="display: flex; flex-direction: column; gap: 24px; background:var(--bg-secondary,#f8fafc); padding: 24px; border-radius: 16px; border:1px solid var(--border-default,#e2e8f0); margin-bottom: 32px;">
           <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
             <ui-dropdown id="pg-variant" label="Visual Variant" value="default"
               data='[{"label": "Default", "value": "default"}, {"label": "Secondary", "value": "secondary"}, {"label": "Minimal", "value": "minimal"}, {"label": "Glass", "value": "glass"}, {"label": "Elevated", "value": "elevated"}, {"label": "Outlined", "value": "outlined"}, {"label": "Primary", "value": "primary"}, {"label": "Dark", "value": "dark"}]'
@@ -561,7 +561,7 @@ export function initToolbarDemo() {
             ></ui-dropdown>
           </div>
 
-          <div style="display: flex; gap: 20px; flex-wrap: wrap; padding: 16px; background: white; border-radius: 12px; border: 1px solid #e2e8f0;">
+          <div style="display: flex; gap: 20px; flex-wrap: wrap; padding: 16px; background:var(--bg-primary,white); border-radius: 12px; border:1px solid var(--border-default,#e2e8f0);">
             <ui-checkbox id="pg-rounded" checked label="Rounded Corners"></ui-checkbox>
             <ui-checkbox id="pg-bordered" checked label="Show Border"></ui-checkbox>
             <ui-checkbox id="pg-disabled" label="Disabled State"></ui-checkbox>
@@ -569,7 +569,7 @@ export function initToolbarDemo() {
           </div>
         </div>
 
-        <div id="pg-toolbar-wrap" style="padding:32px; background:white; border:1px solid #e2e8f0; border-radius:16px; margin-bottom: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
+        <div id="pg-toolbar-wrap" style="padding:32px; background:var(--bg-primary,white); border:1px solid var(--border-default,#e2e8f0); border-radius:16px; margin-bottom: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);">
           <ui-toolbar id="pg-toolbar"
             bordered rounded elevation="1"
             items="${serialize(pg)}"
@@ -582,7 +582,7 @@ export function initToolbarDemo() {
             <ui-button id="clearPgLog" label="Clear Logs" variant="outline" color="secondary" size="xxs"></ui-button>
           </div>
           <div id="pg-log" style="height: 160px; overflow-y: auto; background: #0f172a; color: #38bdf8; border-radius: 12px; padding: 16px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 13px; border: 1px solid #1e293b; line-height: 1.6;">
-             <div style="color: #64748b; border-bottom: 1px solid #1e293b; padding-bottom: 8px; margin-bottom: 8px;">Waiting for interaction...</div>
+             <div style="color:var(--text-secondary,#64748b); border-bottom: 1px solid #1e293b; padding-bottom: 8px; margin-bottom: 8px;">Waiting for interaction...</div>
           </div>
         </div>
       </div>
@@ -603,7 +603,7 @@ export function initToolbarDemo() {
       };
 
       document.getElementById('clearPgLog')?.addEventListener('click', () => {
-        log.innerHTML = '<div style="color: #64748b; border-bottom: 1px solid #1e293b; padding-bottom: 8px; margin-bottom: 8px;">Waiting for interaction...</div>';
+        log.innerHTML = '<div style="color:var(--text-secondary,#64748b); border-bottom: 1px solid #1e293b; padding-bottom: 8px; margin-bottom: 8px;">Waiting for interaction...</div>';
       });
 
       toolbar.addEventListener('toolbarItemClick', e => addLog(`click: ${e.detail.item.id}`));