atomicuilibrary 0.1.0 → 0.1.3

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

@@ -1,4 +1,4 @@
-// Loader Component Demo
+// Loader Component Demo
 export function initLoaderDemo() {
   const section = document.getElementById('loader');
   if (!section) return;
@@ -24,7 +24,7 @@ export function initLoaderDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3>Animation Types</h3>
-        <p style="font-size: 13px; color: #64748b; margin-bottom: 24px;">Explore our library of 34 high-fidelity, high-performance animation patterns.</p>
+        <p style="font-size: 13px; color:var(--text-secondary,#64748b); margin-bottom: 24px;">Explore our library of 34 high-fidelity, high-performance animation patterns.</p>
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; text-align: center; padding: 20px;">
           ${[
             'spinner',
@@ -64,9 +64,9 @@ export function initLoaderDemo() {
           ]
             .map(
               type => `
-              <div style="padding: 25px; border: 1px solid #e2e8f0; border-radius: 12px; background: white; transition: transform 0.2s, box-shadow 0.2s; cursor: default;" onmouseover="this.style.transform='translateY(-4px)';this.style.boxShadow='0 10px 15px -3px rgba(0,0,0,0.1)';" onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='none';">
-                <ui-loader type="${type}" color="primary" size="xl"></ui-loader>
-                <p style="margin-top: 15px; font-size: 11px; font-weight: 800; text-transform: uppercase; color: #1e293b; letter-spacing: 0.05em;">${type.replace('-', ' ')}</p>
+              <div style="padding: 25px; border:1px solid var(--border-default,#e2e8f0); border-radius: 12px; background:var(--bg-primary,white); transition: transform 0.2s, box-shadow 0.2s; cursor: default;" onmouseover="this.style.transform='translateY(-4px)';this.style.boxShadow='0 10px 15px -3px rgba(0,0,0,0.1)';" onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='none';">
+                <ui-loader type="${type}" color="success" size="xl"></ui-loader>
+                <p style="margin-top: 15px; font-size: 11px; font-weight: 800; text-transform: uppercase; color:var(--text-primary,#1e293b); letter-spacing: 0.05em;">${type.replace('-', ' ')}</p>
               </div>
             `,
             )
@@ -82,13 +82,13 @@ export function initLoaderDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3>Size Variants</h3>
-        <p style="font-size: 13px; color: #64748b; margin-bottom: 24px;">From micro-indicators (3XS) to massive full-screen attention grabbers (Jumbo).</p>
-        <div style="display: flex; gap: 30px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 40px; background: white; border-radius: 12px; border: 1px solid #e2e8f0;">
+        <p style="font-size: 13px; color:var(--text-secondary,#64748b); margin-bottom: 24px;">From micro-indicators (3XS) to massive full-screen attention grabbers (Jumbo).</p>
+        <div style="display: flex; gap: 30px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 40px; background:var(--bg-primary,white); border-radius: 12px; border:1px solid var(--border-default,#e2e8f0);">
           ${['3xs', 'xs', 'small', 'md', 'large', 'xl', '3xl', 'jumbo']
             .map(
               size => `
               <div style="text-align: center;">
-                <ui-loader size="${size}" color="primary" type="spinner"></ui-loader>
+                <ui-loader size="${size}" color="success" type="spinner"></ui-loader>
                 <p style="margin-top: 10px; font-size: 10px; font-weight: bold; opacity: 0.6; text-transform: uppercase;">${size}</p>
               </div>
             `,
@@ -105,17 +105,17 @@ export function initLoaderDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3>Color Palette Showcase</h3>
-        <p style="font-size: 13px; color: #64748b; margin-bottom: 24px;">Built-in variants and any custom HEX / Gradients.</p>
+        <p style="font-size: 13px; color:var(--text-secondary,#64748b); margin-bottom: 24px;">Built-in variants and any custom HEX / Gradients.</p>
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 20px;">
           ${['primary', 'secondary', 'success', 'danger', 'info', '#ff00ff', 'linear-gradient(90deg, #4facfe 0%, #00f2fe 100%)']
             .map(
               color => `
-              <div style="padding: 24px; background: white; border-radius: 12px; border: 1px solid #e2e8f0; display: flex; flex-direction: column; align-items: center; gap: 12px;">
+              <div style="padding: 24px; background:var(--bg-primary,white); border-radius: 12px; border:1px solid var(--border-default,#e2e8f0); display: flex; flex-direction: column; align-items: center; gap: 12px;">
                 <div style="display: flex; gap: 16px;">
                   <ui-loader color="${color}" size="md" type="${color.includes('gradient') ? 'dots' : 'spinner'}"></ui-loader>
                   <ui-loader color="${color}" size="md" type="${color.includes('gradient') ? 'bar' : 'dots'}"></ui-loader>
                 </div>
-                <p style="font-family: monospace; font-size: 11px; color: #64748b; margin: 0;">${color}</p>
+                <p style="font-family: monospace; font-size: 11px; color:var(--text-secondary,#64748b); margin: 0;">${color}</p>
               </div>
             `,
             )
@@ -131,15 +131,15 @@ export function initLoaderDemo() {
     container.innerHTML = `
       <div style="display: flex; flex-direction: column; gap: 40px;">
         <!-- Status Messages Rotation -->
-        <div class="demo-block" style="padding: 30px; border: 1px solid #e2e8f0; border-radius: 12px; background: white;">
-          <h4 style="margin: 0 0 10px 0; color: #8b5cf6;">🗣️ Intelligent Message Rotation</h4>
-          <p style="font-size: 14px; color: #64748b; margin-bottom: 24px;">Enhance perceived performance by rotating through status updates. Perfect for long processes.</p>
+        <div class="demo-block" style="padding: 30px; border:1px solid var(--border-default,#e2e8f0); border-radius: 12px; background:var(--bg-primary,white);">
+          <h4 style="margin: 0 0 10px 0; color:var(--accent-purple,#8b5cf6);">🗣️ Intelligent Message Rotation</h4>
+          <p style="font-size: 14px; color:var(--text-secondary,#64748b); margin-bottom: 24px;">Enhance perceived performance by rotating through status updates. Perfect for long processes.</p>
           
           <div style="display: flex; justify-content: center; min-height: 150px;">
             <ui-loader 
               id="messageLoader"
               type="pulse" 
-              color="primary" 
+              color="success" 
               label="System Booting" 
               description="Please wait..."
             ></ui-loader>
@@ -147,9 +147,9 @@ export function initLoaderDemo() {
         </div>
 
         <!-- Predictive Progress -->
-        <div class="demo-block" style="padding: 30px; border: 1px solid #e2e8f0; border-radius: 12px; background: white;">
-          <h4 style="margin: 0 0 10px 0; color: #8b5cf6;">🔋 Weighted Predictive Progress</h4>
-          <p style="font-size: 14px; color: #64748b; margin-bottom: 24px;">The progress bar automatically "crawls" at realistic, non-linear speeds towards 95%, keeping users engaged.</p>
+        <div class="demo-block" style="padding: 30px; border:1px solid var(--border-default,#e2e8f0); border-radius: 12px; background:var(--bg-primary,white);">
+          <h4 style="margin: 0 0 10px 0; color:var(--accent-purple,#8b5cf6);">🔋 Weighted Predictive Progress</h4>
+          <p style="font-size: 14px; color:var(--text-secondary,#64748b); margin-bottom: 24px;">The progress bar automatically "crawls" at realistic, non-linear speeds towards 95%, keeping users engaged.</p>
           
           <div style="display: flex; flex-direction: column; gap: 20px; align-items: center;">
             <ui-loader 
@@ -165,12 +165,12 @@ export function initLoaderDemo() {
         </div>
 
         <!-- Linear Strip & Haptics -->
-        <div class="demo-block" style="padding: 30px; border: 1px solid #e2e8f0; border-radius: 12px; background: white;">
-          <h4 style="margin: 0 0 10px 0; color: #8b5cf6;">📐 Linear Strip Variant</h4>
-          <p style="font-size: 14px; color: #64748b; margin-bottom: 24px;">Minimalist top-bar progress, similar to YouTube or GitHub navigation.</p>
+        <div class="demo-block" style="padding: 30px; border:1px solid var(--border-default,#e2e8f0); border-radius: 12px; background:var(--bg-primary,white);">
+          <h4 style="margin: 0 0 10px 0; color:var(--accent-purple,#8b5cf6);">📐 Linear Strip Variant</h4>
+          <p style="font-size: 14px; color:var(--text-secondary,#64748b); margin-bottom: 24px;">Minimalist top-bar progress, similar to YouTube or GitHub navigation.</p>
           
           <div style="position: relative; height: 100px; border: 1px dashed #cbd5e1; border-radius: 8px; display: flex; align-items: center; justify-content: center;">
-            <p style="font-size: 12px; color: #94a3b8;">(See the thin success line at the top of this box)</p>
+            <p style="font-size: 12px; color:var(--text-secondary,#64748b);">(See the thin success line at the top of this box)</p>
             <ui-loader 
               variant="linear-strip" 
               status="loading"
@@ -206,14 +206,14 @@ export function initLoaderDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3>🎮 Universal Loader Playground</h3>
-        <p style="margin-bottom: 20px; font-size: 14px; color: #666;">Configure every single property of the <code>ui-loader</code> component in real-time.</p>
+        <p style="margin-bottom: 20px; font-size: 14px; color: var(--text-secondary, #666);">Configure every single property of the <code>ui-loader</code> component in real-time.</p>
         
         <div class="playground-layout" style="display: grid; grid-template-columns: 350px 1fr; gap: 30px;">
           <!-- Controls Panel -->
-          <div class="controls-panel" style="background: #f8fafc; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0; max-height: 80vh; overflow-y: auto;">
+          <div class="controls-panel" style="padding: 20px; border-radius: 12px; max-height: 80vh; overflow-y: auto;">
             
             <section style="margin-bottom: 24px;">
-              <h4 style="margin: 0 0 12px 0; font-size: 13px; text-transform: uppercase; color: #64748b; letter-spacing: 0.05em;">Core Settings</h4>
+              <h4 style="margin: 0 0 12px 0; font-size: 13px; text-transform: uppercase; color: var(--text-secondary, #64748b); letter-spacing: 0.05em;">Core Settings</h4>
               <div style="display: grid; gap: 12px;">
                 <div>
                   <label style="display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px;">Animation Type</label>
@@ -258,7 +258,7 @@ export function initLoaderDemo() {
             </section>
 
             <section style="margin-bottom: 24px;">
-              <h4 style="margin: 0 0 12px 0; font-size: 13px; text-transform: uppercase; color: #64748b; letter-spacing: 0.05em;">Content & Text</h4>
+              <h4 style="margin: 0 0 12px 0; font-size: 13px; text-transform: uppercase; color: var(--text-secondary, #64748b); letter-spacing: 0.05em;">Content & Text</h4>
               <div style="display: grid; gap: 12px;">
                 <div>
                   <label style="display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px;">Main Label</label>
@@ -278,7 +278,7 @@ export function initLoaderDemo() {
             </section>
 
             <section style="margin-bottom: 24px;">
-              <h4 style="margin: 0 0 12px 0; font-size: 13px; text-transform: uppercase; color: #64748b; letter-spacing: 0.05em;">Behavior</h4>
+              <h4 style="margin: 0 0 12px 0; font-size: 13px; text-transform: uppercase; color: var(--text-secondary, #64748b); letter-spacing: 0.05em;">Behavior</h4>
               <div style="display: grid; gap: 12px;">
                 <div style="display: flex; gap: 10px; align-items: center;">
                   <ui-checkbox id="pVisible" checked label="Visible"></ui-checkbox>
@@ -297,8 +297,8 @@ export function initLoaderDemo() {
               </div>
             </section>
 
-            <section>
-              <h4 style="margin: 0 0 12px 0; font-size: 13px; text-transform: uppercase; color: #64748b; letter-spacing: 0.05em;">Premium & Advanced</h4>
+            <section style="margin-bottom: 24px;">
+              <h4 style="margin: 0 0 12px 0; font-size: 13px; text-transform: uppercase; color: var(--text-secondary, #64748b); letter-spacing: 0.05em;">Premium & Advanced</h4>
               <div style="display: grid; gap: 12px;">
                 <div>
                   <label style="display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px;">Variant Style</label>
@@ -320,7 +320,7 @@ export function initLoaderDemo() {
                 </div>
                 <div>
                   <label style="display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px;">Status Image URL</label>
-                  <ui-input type="text" id="pImage" value="https://cdn-icons-png.flaticon.com/512/9333/9333991.png" >
+                  <ui-input type="text" id="pImage" value="/build/assets/images/logo.png" >
                 </div>
                 <div id="rainOptionsWrap" style="display:none;">
                   <label style="display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px;">Rain Text (characters pool)</label>
@@ -334,7 +334,7 @@ export function initLoaderDemo() {
 
           <!-- Preview & Code -->
           <div class="display-panel" style="display: flex; flex-direction: column; gap: 20px;">
-            <div id="pReviewContainer" style="flex: 1; min-height: 400px; background: white; border: 1px solid #e2e8f0; border-radius: 12px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background-image: radial-gradient(#e2e8f0 1px, transparent 1px); background-size: 20px 20px;">
+            <div id="pReviewContainer" class="playground-preview" style="flex: 1; min-height: 400px; position: relative; overflow: hidden;">
                <div id="pOutput"></div>
             </div>
             <div style="background: #1e293b; color: #f8fafc; padding: 20px; border-radius: 12px; font-family: monospace; font-size: 13px; white-space: pre-wrap; word-break: break-all;" id="pCode"></div>
@@ -419,32 +419,32 @@ export function initLoaderDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3>🌧 Raining Letters</h3>
-        <p style="font-size: 13px; color: #64748b; margin-bottom: 24px;">Use <code>rain-text</code> to define which characters rain and <code>rain-columns</code> to control column count.</p>
+        <p style="font-size: 13px; color:var(--text-secondary,#64748b); margin-bottom: 24px;">Use <code>rain-text</code> to define which characters rain and <code>rain-columns</code> to control column count.</p>
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; text-align: center; padding: 20px;">
-          <div style="padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px; background: white;">
-            <ui-loader type="raining-letters" size="xl" color="primary"></ui-loader>
-            <p style="margin-top: 12px; font-size: 11px; font-weight: 700; color: #64748b;">Default (A–Z 0–9)</p>
-            <code style="font-size: 10px; color: #94a3b8;">type="raining-letters"</code>
+          <div style="padding: 24px; border:1px solid var(--border-default,#e2e8f0); border-radius: 12px; background:var(--bg-primary,white);">
+            <ui-loader type="raining-letters" size="xl" color="success"></ui-loader>
+            <p style="margin-top: 12px; font-size: 11px; font-weight: 700; color:var(--text-secondary,#64748b);">Default (A–Z 0–9)</p>
+            <code style="font-size: 10px; color:var(--text-secondary,#64748b);">type="raining-letters"</code>
           </div>
-          <div style="padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px; background: white;">
+          <div style="padding: 24px; border:1px solid var(--border-default,#e2e8f0); border-radius: 12px; background:var(--bg-primary,white);">
             <ui-loader type="raining-letters" size="xl" color="#10b981" rain-text="01"></ui-loader>
-            <p style="margin-top: 12px; font-size: 11px; font-weight: 700; color: #64748b;">Binary Matrix</p>
-            <code style="font-size: 10px; color: #94a3b8;">rain-text="01"</code>
+            <p style="margin-top: 12px; font-size: 11px; font-weight: 700; color:var(--text-secondary,#64748b);">Binary Matrix</p>
+            <code style="font-size: 10px; color:var(--text-secondary,#64748b);">rain-text="01"</code>
           </div>
-          <div style="padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px; background: white;">
+          <div style="padding: 24px; border:1px solid var(--border-default,#e2e8f0); border-radius: 12px; background:var(--bg-primary,white);">
             <ui-loader type="raining-letters" size="xl" color="#8b5cf6" rain-text="★♦♣♠♥" rain-columns="5"></ui-loader>
-            <p style="margin-top: 12px; font-size: 11px; font-weight: 700; color: #64748b;">Symbols</p>
-            <code style="font-size: 10px; color: #94a3b8;">rain-text="★♦♣♠♥"</code>
+            <p style="margin-top: 12px; font-size: 11px; font-weight: 700; color:var(--text-secondary,#64748b);">Symbols</p>
+            <code style="font-size: 10px; color:var(--text-secondary,#64748b);">rain-text="★♦♣♠♥"</code>
           </div>
-          <div style="padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px; background: white;">
+          <div style="padding: 24px; border:1px solid var(--border-default,#e2e8f0); border-radius: 12px; background:var(--bg-primary,white);">
             <ui-loader type="raining-letters" size="xl" color="#ef4444" rain-text="Loading" rain-columns="7"></ui-loader>
-            <p style="margin-top: 12px; font-size: 11px; font-weight: 700; color: #64748b;">Custom word, 7 cols</p>
-            <code style="font-size: 10px; color: #94a3b8;">rain-text="Loading" rain-columns="7"</code>
+            <p style="margin-top: 12px; font-size: 11px; font-weight: 700; color:var(--text-secondary,#64748b);">Custom word, 7 cols</p>
+            <code style="font-size: 10px; color:var(--text-secondary,#64748b);">rain-text="Loading" rain-columns="7"</code>
           </div>
-          <div style="padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px; background: white;">
+          <div style="padding: 24px; border:1px solid var(--border-default,#e2e8f0); border-radius: 12px; background:var(--bg-primary,white);">
             <ui-loader type="raining-letters" size="xl" color="#f59e0b" rain-text="ABCDEF" rain-columns="3"></ui-loader>
-            <p style="margin-top: 12px; font-size: 11px; font-weight: 700; color: #64748b;">3 columns</p>
-            <code style="font-size: 10px; color: #94a3b8;">rain-columns="3"</code>
+            <p style="margin-top: 12px; font-size: 11px; font-weight: 700; color:var(--text-secondary,#64748b);">3 columns</p>
+            <code style="font-size: 10px; color:var(--text-secondary,#64748b);">rain-columns="3"</code>
           </div>
         </div>
       </div>