atomicuilibrary 0.1.0 → 0.1.3

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

@@ -7,11 +7,11 @@ export function initProgressDemo() {
       <h2>Progress Indicators</h2>
       <div style="display: flex; gap: 8px;">
          <span style="padding: 4px 8px; background: #e0f2fe; color: #075985; border-radius: 4px; font-size: 11px; font-weight: 600;">NEW</span>
-         <span style="padding: 4px 8px; background: #dcfce7; color: #166534; border-radius: 4px; font-size: 11px; font-weight: 600;">PREMIUM</span>
+         <span style="padding: 4px 8px; background:var(--accent-green-soft,#dcfce7); color: var(--accent-green,#166534); border-radius: 4px; font-size: 11px; font-weight: 600;">PREMIUM</span>
       </div>
     </div>
 
-    <p style="color: #64748b; font-size: 15px; margin-bottom: 30px; line-height: 1.6;">
+    <p style="color:var(--text-secondary,#64748b); font-size: 15px; margin-bottom: 30px; line-height: 1.6;">
       Dynamic progress indicators including line, circle, and dashboard types with support for steppers, multi-segmented bars, and premium animations.
     </p>
 
@@ -29,7 +29,7 @@ export function initProgressDemo() {
       <ui-button onclick="showProgressStatusBar()" data-demo="statusbar" variant="outline">🏷️ Status Bar</ui-button>
     </div>
 
-    <div id="progressDemoContainer" style="margin-top: 40px; min-height: 400px; padding: 24px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0;"></div>
+    <div id="progressDemoContainer" style="margin-top: 40px; min-height: 400px; padding: 24px; background:var(--bg-secondary,#f8fafc); border-radius: 12px; border:1px solid var(--border-default,#e2e8f0);"></div>
   `;
 
   const updateProgressActiveBtn = demoName => {
@@ -46,14 +46,14 @@ export function initProgressDemo() {
         <h3 style="margin-bottom: 20px;">🎮 Progress Playground</h3>
         <div style="display: grid; grid-template-columns: 320px 1fr; gap: 30px;">
           <!-- Controls -->
-          <div style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 16px;">
+          <div style="background:var(--bg-primary,white); padding: 24px; border-radius: 12px; border:1px solid var(--border-default,#e2e8f0); display: flex; flex-direction: column; gap: 16px;">
             <label style="display: flex; flex-direction: column; gap: 4px;">
-              <span style="font-size: 12px; font-weight: 600; color: #64748b;">Percent (0-100)</span>
+              <span style="font-size: 12px; font-weight: 600; color:var(--text-secondary,#64748b);">Percent (0-100)</span>
               <ui-input type="range" id="progPercent" min="0" max="100" value="45" oninput="updateProgressPlayground()">
             </label>
             
             <label style="display: flex; flex-direction: column; gap: 4px;">
-              <span style="font-size: 12px; font-weight: 600; color: #64748b;">Type</span>
+              <span style="font-size: 12px; font-weight: 600; color:var(--text-secondary,#64748b);">Type</span>
               <ui-dropdown id="progType" onchange="updateProgressPlayground()" style="padding: 8px; border-radius: 6px; border: 1px solid #cbd5e1;">
                 <option value="line">Line (Default)</option>
                 <option value="circle">Circle</option>
@@ -63,7 +63,7 @@ export function initProgressDemo() {
             </label>
 
             <label style="display: flex; flex-direction: column; gap: 4px;">
-              <span style="font-size: 12px; font-weight: 600; color: #64748b;">Status</span>
+              <span style="font-size: 12px; font-weight: 600; color:var(--text-secondary,#64748b);">Status</span>
               <ui-dropdown id="progStatus" onchange="updateProgressPlayground()" style="padding: 8px; border-radius: 6px; border: 1px solid #cbd5e1;">
                 <option value="default">Default</option>
                 <option value="active">Active (Wavy)</option>
@@ -80,11 +80,11 @@ export function initProgressDemo() {
 
             <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
               <label style="display: flex; flex-direction: column; gap: 4px;">
-                <span style="font-size: 12px; font-weight: 600; color: #64748b;">Stroke Width</span>
+                <span style="font-size: 12px; font-weight: 600; color:var(--text-secondary,#64748b);">Stroke Width</span>
                 <ui-input type="number" id="progStrokeWidth" value="10" oninput="updateProgressPlayground()" style="padding: 8px; border-radius: 6px; border: 1px solid #cbd5e1;">
               </label>
               <label style="display: flex; flex-direction: column; gap: 4px;">
-                <span style="font-size: 12px; font-weight: 600; color: #64748b;">Decimal</span>
+                <span style="font-size: 12px; font-weight: 600; color:var(--text-secondary,#64748b);">Decimal</span>
                 <ui-input type="number" id="progDecimal" value="0" min="0" max="2" oninput="updateProgressPlayground()" style="padding: 8px; border-radius: 6px; border: 1px solid #cbd5e1;">
               </label>
             </div>
@@ -97,14 +97,14 @@ export function initProgressDemo() {
             </div>
 
             <label style="display: flex; flex-direction: column; gap: 4px;">
-              <span style="font-size: 12px; font-weight: 600; color: #64748b;">Custom Data Label</span>
+              <span style="font-size: 12px; font-weight: 600; color:var(--text-secondary,#64748b);">Custom Data Label</span>
               <ui-input type="text" id="progDataLabels" placeholder="e.g. 5.2 GB" onInputChange="updateProgressPlayground()"></ui-input>
             </label>
           </div>
 
           <!-- Preview -->
           <div style="display: flex; flex-direction: column; gap: 20px;">
-            <div id="progPreviewContainer" style="flex: 1; background: white; border-radius: 12px; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: center; min-height: 250px;">
+            <div id="progPreviewContainer" style="flex: 1; background:var(--bg-primary,white); border-radius: 12px; border:1px solid var(--border-default,#e2e8f0); display: flex; align-items: center; justify-content: center; min-height: 250px;">
               <ui-progress percent="45"></ui-progress>
             </div>
             <div style="background: #1e293b; color: #e2e8f0; padding: 16px; border-radius: 8px; font-family: monospace; font-size: 13px; line-height: 1.5; white-space: pre-wrap;">
@@ -153,70 +153,70 @@ export function initProgressDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3 style="margin-bottom: 8px;">🔄 Lifecycle Status Monitoring</h3>
-        <p style="font-size: 14px; color: #64748b; margin-bottom: 24px;">
+        <p style="font-size: 14px; color:var(--text-secondary,#64748b); margin-bottom: 24px;">
           Track system processes end-to-end using native status lifecycles: <code>empty</code>, <code>running</code>, <code>completed</code>, and <code>interrupted</code>.
         </p>
 
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 40px;">
           
           <!-- Empty State -->
-          <div style="background: white; border-radius: 12px; border: 1px solid #e2e8f0; padding: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
-            <h4 style="margin: 0 0 16px; font-size: 13px; color: #64748b; display: flex; align-items: center; justify-content: space-between;">
+          <div style="background:var(--bg-primary,white); border-radius: 12px; border:1px solid var(--border-default,#e2e8f0); padding: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
+            <h4 style="margin: 0 0 16px; font-size: 13px; color:var(--text-secondary,#64748b); display: flex; align-items: center; justify-content: space-between;">
               <span>Empty State</span>
-              <span style="font-size: 10px; font-weight: bold; background: #f1f5f9; color: #64748b; padding: 2px 8px; border-radius: 10px; text-transform: uppercase;">Awaiting</span>
+              <span style="font-size: 10px; font-weight: bold; background:var(--bg-tertiary,#f1f5f9); color:var(--text-secondary,#64748b); padding: 2px 8px; border-radius: 10px; text-transform: uppercase;">Awaiting</span>
             </h4>
             <ui-progress percent="0" status="empty" stroke-width="12"></ui-progress>
-            <p style="font-size: 12px; color: #94a3b8; margin-top: 12px; margin-bottom: 0;">Task queued, awaiting resource allocation.</p>
+            <p style="font-size: 12px; color:var(--text-secondary,#64748b); margin-top: 12px; margin-bottom: 0;">Task queued, awaiting resource allocation.</p>
           </div>
 
           <!-- Running State -->
-          <div style="background: white; border-radius: 12px; border: 1px solid #e2e8f0; padding: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
+          <div style="background:var(--bg-primary,white); border-radius: 12px; border:1px solid var(--border-default,#e2e8f0); padding: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
             <h4 style="margin: 0 0 16px; font-size: 13px; color: #1890ff; display: flex; align-items: center; justify-content: space-between;">
               <span>Running State</span>
               <span style="font-size: 10px; font-weight: bold; background: #e0f2fe; color: #0369a1; padding: 2px 8px; border-radius: 10px; text-transform: uppercase;">Active</span>
             </h4>
             <ui-progress percent="45" status="running" stroke-width="12"></ui-progress>
-            <p style="font-size: 12px; color: #94a3b8; margin-top: 12px; margin-bottom: 0;">Actively processing records. Wave pulse enabled.</p>
+            <p style="font-size: 12px; color:var(--text-secondary,#64748b); margin-top: 12px; margin-bottom: 0;">Actively processing records. Wave pulse enabled.</p>
           </div>
 
           <!-- Completed State -->
-          <div style="background: white; border-radius: 12px; border: 1px solid #e2e8f0; padding: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
+          <div style="background:var(--bg-primary,white); border-radius: 12px; border:1px solid var(--border-default,#e2e8f0); padding: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
             <h4 style="margin: 0 0 16px; font-size: 13px; color: #52c41a; display: flex; align-items: center; justify-content: space-between;">
               <span>Completed State</span>
-              <span style="font-size: 10px; font-weight: bold; background: #dcfce7; color: #15803d; padding: 2px 8px; border-radius: 10px; text-transform: uppercase;">Success</span>
+              <span style="font-size: 10px; font-weight: bold; background:var(--accent-green-soft,#dcfce7); color:var(--accent-green,#15803d); padding: 2px 8px; border-radius: 10px; text-transform: uppercase;">Success</span>
             </h4>
             <ui-progress percent="100" status="completed" stroke-width="12"></ui-progress>
-            <p style="font-size: 12px; color: #94a3b8; margin-top: 12px; margin-bottom: 0;">Operation finished successfully. Output generated.</p>
+            <p style="font-size: 12px; color:var(--text-secondary,#64748b); margin-top: 12px; margin-bottom: 0;">Operation finished successfully. Output generated.</p>
           </div>
 
           <!-- Interrupted State -->
-          <div style="background: white; border-radius: 12px; border: 1px solid #e2e8f0; padding: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
+          <div style="background:var(--bg-primary,white); border-radius: 12px; border:1px solid var(--border-default,#e2e8f0); padding: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
             <h4 style="margin: 0 0 16px; font-size: 13px; color: #ff4d4f; display: flex; align-items: center; justify-content: space-between;">
               <span>Interrupted State</span>
-              <span style="font-size: 10px; font-weight: bold; background: #fef2f2; color: #b91c1c; padding: 2px 8px; border-radius: 10px; text-transform: uppercase;">Halted</span>
+              <span style="font-size: 10px; font-weight: bold; background:var(--accent-red-soft,#fef2f2); color:var(--accent-red,#b91c1c); padding: 2px 8px; border-radius: 10px; text-transform: uppercase;">Halted</span>
             </h4>
             <ui-progress percent="70" status="interrupted" stroke-width="12"></ui-progress>
-            <p style="font-size: 12px; color: #94a3b8; margin-top: 12px; margin-bottom: 0;">Network loss detected. Thread execution suspended.</p>
+            <p style="font-size: 12px; color:var(--text-secondary,#64748b); margin-top: 12px; margin-bottom: 0;">Network loss detected. Thread execution suspended.</p>
           </div>
 
         </div>
 
         <!-- Dynamic Process Lifecycle Simulator -->
-        <div style="background: #1e293b; color: white; border-radius: 16px; padding: 32px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3);">
+        <div style="background: var(--bg-primary, #ffffff); color: var(--text-primary, #0f172a); border: 1px solid var(--border-default, #e2e8f0); border-radius: 16px; padding: 32px; box-shadow: 0 10px 15px -3px rgba(15,23,42,0.08);">
           <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
             <h4 style="margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0.02em;">⚡ Operation Lifecycle Simulator</h4>
-            <span id="lifecycleStateText" style="font-size: 11px; font-weight: bold; background: #475569; color: #f8fafc; padding: 6px 14px; border-radius: 20px; letter-spacing: 0.05em; text-transform: uppercase;">QUEUED</span>
+            <span id="lifecycleStateText" style="font-size: 11px; font-weight: bold; background: var(--bg-tertiary, #f1f5f9); color: var(--text-secondary, #64748b); border: 1px solid var(--border-default, #cbd5e1); padding: 6px 14px; border-radius: 20px; letter-spacing: 0.05em; text-transform: uppercase;">QUEUED</span>
           </div>
 
-          <div style="background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 24px; margin-bottom: 24px;">
+          <div style="background: var(--bg-secondary, #f8fafc); border: 1px solid var(--border-default, #e2e8f0); border-radius: 12px; padding: 24px; margin-bottom: 24px;">
             <ui-progress id="lifecycleProgress" percent="0" status="empty" stroke-width="16" decimal-precision="1"></ui-progress>
           </div>
 
           <div style="display: flex; gap: 12px; flex-wrap: wrap;">
-            <ui-button id="btnLifecycleInit" onclick="handleLifecycleAction('init')" variant="outline" style="--ui-button-border-color: #475569; --ui-button-color: #f8fafc;">🔌 Queue (Empty)</ui-button>
-            <ui-button id="btnLifecycleStart" onclick="handleLifecycleAction('start')" variant="outline" style="--ui-button-border-color: #475569; --ui-button-color: #f8fafc;">🚀 Start (Running)</ui-button>
-            <ui-button id="btnLifecycleInterrupt" onclick="handleLifecycleAction('interrupt')" variant="outline" style="--ui-button-border-color: #475569; --ui-button-color: #f8fafc;">🚫 Halt (Interrupt)</ui-button>
-            <ui-button id="btnLifecycleComplete" onclick="handleLifecycleAction('complete')" variant="outline" style="--ui-button-border-color: #475569; --ui-button-color: #f8fafc;">✨ Force Complete</ui-button>
+            <ui-button id="btnLifecycleInit" onclick="handleLifecycleAction('init')" variant="outline" style="--ui-button-border-color: var(--border-default, #cbd5e1); --ui-button-color: var(--text-primary, #0f172a);">🔌 Queue (Empty)</ui-button>
+            <ui-button id="btnLifecycleStart" onclick="handleLifecycleAction('start')" variant="outline" style="--ui-button-border-color: rgba(var(--color-primary-rgb, 24, 144, 255), 0.28); --ui-button-color: var(--color-primary, #1d4ed8);">🚀 Start (Running)</ui-button>
+            <ui-button id="btnLifecycleInterrupt" onclick="handleLifecycleAction('interrupt')" variant="outline" style="--ui-button-border-color: rgba(var(--color-danger-rgb, 255, 77, 79), 0.28); --ui-button-color: var(--color-danger, #b91c1c);">🚫 Halt (Interrupt)</ui-button>
+            <ui-button id="btnLifecycleComplete" onclick="handleLifecycleAction('complete')" variant="outline" style="--ui-button-border-color: rgba(var(--color-success-rgb, 16, 185, 129), 0.28); --ui-button-color: var(--color-success, #15803d);">✨ Force Complete</ui-button>
           </div>
         </div>
       </div>
@@ -238,11 +238,15 @@ export function initProgressDemo() {
         pBar.percent = 0;
         pBar.status = 'empty';
         stateText.innerText = 'QUEUED';
-        stateText.style.background = '#475569';
+        stateText.style.background = 'var(--bg-tertiary, #f1f5f9)';
+        stateText.style.color = 'var(--text-secondary, #64748b)';
+        stateText.style.borderColor = 'var(--border-default, #cbd5e1)';
       } else if (action === 'start') {
         pBar.status = 'running';
         stateText.innerText = 'RUNNING';
-        stateText.style.background = '#1d4ed8';
+        stateText.style.background = 'rgba(var(--color-primary-rgb, 24, 144, 255), 0.12)';
+        stateText.style.color = 'var(--color-primary, #1d4ed8)';
+        stateText.style.borderColor = 'rgba(var(--color-primary-rgb, 24, 144, 255), 0.24)';
         
         let current = parseFloat(pBar.percent) || 0;
         if (current >= 100) {
@@ -259,18 +263,24 @@ export function initProgressDemo() {
             pBar.percent = 100;
             pBar.status = 'completed';
             stateText.innerText = 'COMPLETED';
-            stateText.style.background = '#15803d';
+            stateText.style.background = 'rgba(var(--color-success-rgb, 16, 185, 129), 0.12)';
+            stateText.style.color = 'var(--color-success, #15803d)';
+            stateText.style.borderColor = 'rgba(var(--color-success-rgb, 16, 185, 129), 0.24)';
           }
         }, 100);
       } else if (action === 'interrupt') {
         pBar.status = 'interrupted';
         stateText.innerText = 'INTERRUPTED';
-        stateText.style.background = '#b91c1c';
+        stateText.style.background = 'rgba(var(--color-danger-rgb, 255, 77, 79), 0.12)';
+        stateText.style.color = 'var(--color-danger, #b91c1c)';
+        stateText.style.borderColor = 'rgba(var(--color-danger-rgb, 255, 77, 79), 0.24)';
       } else if (action === 'complete') {
         pBar.percent = 100;
         pBar.status = 'completed';
         stateText.innerText = 'COMPLETED';
-        stateText.style.background = '#15803d';
+        stateText.style.background = 'rgba(var(--color-success-rgb, 16, 185, 129), 0.12)';
+        stateText.style.color = 'var(--color-success, #15803d)';
+        stateText.style.borderColor = 'rgba(var(--color-success-rgb, 16, 185, 129), 0.24)';
       }
     };
   };
@@ -281,10 +291,10 @@ export function initProgressDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3>Standard Progress Matrix</h3>
-        <p style="font-size: 14px; color: #64748b; margin-bottom: 30px;">Every state. Every percent. Pure clarity.</p>
+        <p style="font-size: 14px; color:var(--text-secondary,#64748b); margin-bottom: 30px;">Every state. Every percent. Pure clarity.</p>
         <div style="display: flex; flex-direction: column; gap: 32px;">
-           <div class="demo-card" style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e2e8f0;">
-              <h4 style="margin: 0 0 16px; font-size: 13px; color: #94a3b8;">Status Hierarchy</h4>
+           <div class="demo-card" style="background:var(--bg-primary,white); padding: 24px; border-radius: 12px; border:1px solid var(--border-default,#e2e8f0);">
+              <h4 style="margin: 0 0 16px; font-size: 13px; color:var(--text-secondary,#64748b);">Status Hierarchy</h4>
               <div style="display: flex; flex-direction: column; gap: 20px;">
                  <ui-progress percent="30" data-labels="Initialization (30%)"></ui-progress>
                  <ui-progress percent="50" status="active" data-labels="Processing Data (50%)"></ui-progress>
@@ -294,8 +304,8 @@ export function initProgressDemo() {
               </div>
            </div>
 
-           <div class="demo-card" style="background: white; padding: 24px; border-radius: 12px; border: 1px solid #e2e8f0;">
-              <h4 style="margin: 0 0 16px; font-size: 13px; color: #94a3b8;">Stroke Variants</h4>
+           <div class="demo-card" style="background:var(--bg-primary,white); padding: 24px; border-radius: 12px; border:1px solid var(--border-default,#e2e8f0);">
+              <h4 style="margin: 0 0 16px; font-size: 13px; color:var(--text-secondary,#64748b);">Stroke Variants</h4>
               <div style="display: flex; flex-direction: column; gap: 24px;">
                  <ui-progress percent="60" stroke-width="4" stroke-linecap="square"></ui-progress>
                  <ui-progress percent="60" stroke-width="12" stroke-linecap="round"></ui-progress>
@@ -315,8 +325,8 @@ export function initProgressDemo() {
         <h3 style="margin-bottom: 24px;">Circular & Dashboard Telemetry</h3>
         <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 32px;">
            <!-- 1. Gap Configurations -->
-           <div style="background: white; border-radius: 16px; border: 1px solid #e2e8f0; padding: 32px;">
-              <h4 style="margin: 0 0 24px; font-size: 13px; color: #94a3b8;">Polar Gap Positioning</h4>
+           <div style="background:var(--bg-primary,white); border-radius: 16px; border:1px solid var(--border-default,#e2e8f0); padding: 32px;">
+              <h4 style="margin: 0 0 24px; font-size: 13px; color:var(--text-secondary,#64748b);">Polar Gap Positioning</h4>
               <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 32px; justify-items: center;">
                  <ui-progress type="dashboard" percent="75" gap-position="top" width="100" data-labels="TOP"></ui-progress>
                  <ui-progress type="dashboard" percent="75" gap-position="bottom" width="100" data-labels="BOT"></ui-progress>
@@ -326,8 +336,8 @@ export function initProgressDemo() {
            </div>
 
            <!-- 2. Circular Dynamics -->
-           <div style="background: white; border-radius: 16px; border: 1px solid #e2e8f0; padding: 32px;">
-              <h4 style="margin: 0 0 24px; font-size: 13px; color: #94a3b8;">Density & Precision</h4>
+           <div style="background:var(--bg-primary,white); border-radius: 16px; border:1px solid var(--border-default,#e2e8f0); padding: 32px;">
+              <h4 style="margin: 0 0 24px; font-size: 13px; color:var(--text-secondary,#64748b);">Density & Precision</h4>
               <div style="display: flex; flex-direction: column; gap: 40px; align-items: center;">
                  <div style="display: flex; gap: 40px; align-items: center;">
                     <ui-progress type="circle" percent="45" width="80" size="md"roke-width="12"></ui-progress>
@@ -348,26 +358,26 @@ export function initProgressDemo() {
       <div class="demo-block">
         <h3 style="margin-bottom: 24px;">✨ Visual Masterclass: Premium Synthesis</h3>
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 32px;">
-           <div style="background: white; border-radius: 16px; border: 1px solid #e2e8f0; padding: 32px;">
-              <h4 style="margin: 0 0 20px; font-size: 13px; color: #94a3b8;">Liquid Wave Telemetry</h4>
+           <div style="background:var(--bg-primary,white); border-radius: 16px; border:1px solid var(--border-default,#e2e8f0); padding: 32px;">
+              <h4 style="margin: 0 0 20px; font-size: 13px; color:var(--text-secondary,#64748b);">Liquid Wave Telemetry</h4>
               <ui-progress percent="65" liquid="true" stroke-color="#10b981" stroke-width="20" data-labels="COOLANT LEVEL"></ui-progress>
            </div>
 
-           <div style="background: #1e293b; border-radius: 16px; padding: 32px;">
-              <h4 style="margin: 0 0 20px; font-size: 13px; color: #475569;">Glassmorphic System</h4>
-              <ui-progress percent="50" glass="true" stroke-color="#10b981" trail-color="rgba(255,255,255,0.05)" stroke-width="20"></ui-progress>
+           <div style="background:var(--bg-primary,white); border-radius: 16px; border:1px solid var(--border-default,#e2e8f0); padding: 32px;">
+              <h4 style="margin: 0 0 20px; font-size: 13px; color:var(--text-secondary,#64748b);">Glassmorphic System</h4>
+              <ui-progress percent="50" glass="true" stroke-color="#10b981" stroke-width="20"></ui-progress>
            </div>
 
-           <div style="background: white; border-radius: 16px; border: 1px solid #e2e8f0; padding: 32px;">
-              <h4 style="margin: 0 0 20px; font-size: 13px; color: #94a3b8;">High-Energy Glow</h4>
+           <div style="background:var(--bg-primary,white); border-radius: 16px; border:1px solid var(--border-default,#e2e8f0); padding: 32px;">
+              <h4 style="margin: 0 0 20px; font-size: 13px; color:var(--text-secondary,#64748b);">High-Energy Glow</h4>
               <div style="display: flex; flex-direction: column; gap: 24px;">
                  <ui-progress percent="80" glow="true" stroke-color="#f43f5e" status="danger"></ui-progress>
                  <ui-progress percent="40" glow="true" stroke-color="#a855f7" vitality="true"></ui-progress>
               </div>
            </div>
 
-           <div style="background: white; border-radius: 16px; border: 1px solid #e2e8f0; padding: 32px;">
-              <h4 style="margin: 0 0 20px; font-size: 13px; color: #94a3b8;">Indeterminate Cycles</h4>
+           <div style="background:var(--bg-primary,white); border-radius: 16px; border:1px solid var(--border-default,#e2e8f0); padding: 32px;">
+              <h4 style="margin: 0 0 20px; font-size: 13px; color:var(--text-secondary,#64748b);">Indeterminate Cycles</h4>
               <div style="display: flex; gap: 40px; justify-content: center;">
                  <ui-progress type="circle" indeterminate="true" width="80"></ui-progress>
                  <ui-progress type="dashboard" indeterminate="true" width="80" stroke-color="#f59e0b"></ui-progress>
@@ -385,8 +395,8 @@ export function initProgressDemo() {
       <div class="demo-block">
         <h3 style="margin-bottom: 24px;">Advanced Forensic Logic</h3>
         <div style="display: flex; flex-direction: column; gap: 32px;">
-           <div style="background: white; border-radius: 16px; border: 1px solid #e2e8f0; padding: 32px;">
-              <h4 style="margin: 0 0 20px; font-size: 13px; color: #94a3b8;">Scale Ticks & Numeric Precision</h4>
+           <div style="background:var(--bg-primary,white); border-radius: 16px; border:1px solid var(--border-default,#e2e8f0); padding: 32px;">
+              <h4 style="margin: 0 0 20px; font-size: 13px; color:var(--text-secondary,#64748b);">Scale Ticks & Numeric Precision</h4>
               <div style="display: flex; flex-direction: column; gap: 32px;">
                  <ui-progress percent="45" ticks="10" stroke-width="16" data-labels="SENSOR_01: NOMINAL"></ui-progress>
                  <ui-progress percent="82" ticks="5" stroke-width="16" stroke-color="#f59e0b" data-labels="THERMAL_READOUT: 82.0°C"></ui-progress>
@@ -394,22 +404,22 @@ export function initProgressDemo() {
            </div>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 32px;">
-              <div style="background: white; border-radius: 16px; border: 1px solid #e2e8f0; padding: 32px;">
-                 <h4 style="margin: 0 0 20px; font-size: 13px; color: #94a3b8;">Milestone Lifecycles</h4>
+              <div style="background:var(--bg-primary,white); border-radius: 16px; border:1px solid var(--border-default,#e2e8f0); padding: 32px;">
+                 <h4 style="margin: 0 0 20px; font-size: 13px; color:var(--text-secondary,#64748b);">Milestone Lifecycles</h4>
                  <ui-progress 
                    percent="65" 
                    stroke-width="16"
                    milestones='[{"percent": 25, "label": "Dev"}, {"percent": 50, "label": "Test"}, {"percent": 75, "label": "Deploy"}]'
                  ></ui-progress>
               </div>
-              <div style="background: white; border-radius: 16px; border: 1px solid #e2e8f0; padding: 32px;">
-                 <h4 style="margin: 0 0 20px; font-size: 13px; color: #94a3b8;">Buffer & Success Ratios</h4>
+              <div style="background:var(--bg-primary,white); border-radius: 16px; border:1px solid var(--border-default,#e2e8f0); padding: 32px;">
+                 <h4 style="margin: 0 0 20px; font-size: 13px; color:var(--text-secondary,#64748b);">Buffer & Success Ratios</h4>
                  <ui-progress percent="85" show-buffer="true" buffer="95" success='{"percent": 40}' stroke-width="24" stroke-linecap="square"></ui-progress>
               </div>
            </div>
 
-           <div style="background: white; border-radius: 16px; border: 1px solid #e2e8f0; padding: 32px;">
-              <h4 style="margin: 0 0 20px; font-size: 13px; color: #94a3b8;">High-Fidelity Gradients</h4>
+           <div style="background:var(--bg-primary,white); border-radius: 16px; border:1px solid var(--border-default,#e2e8f0); padding: 32px;">
+              <h4 style="margin: 0 0 20px; font-size: 13px; color:var(--text-secondary,#64748b);">High-Fidelity Gradients</h4>
               <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 32px;">
                  <div style="display: flex; flex-direction: column; gap: 20px;">
                     <ui-progress percent="90" stroke-color='{"from": "#10b981", "to": "#8b5cf6"}' stroke-width="12" data-labels="Ocean Gradient"></ui-progress>
@@ -433,14 +443,14 @@ export function initProgressDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3 style="margin-bottom: 24px;">🛡️ Industrial Telemetry & Mission Control</h3>
-        <p style="font-size: 14px; color: #64748b; margin-bottom: 30px;">
+        <p style="font-size: 14px; color:var(--text-secondary,#64748b); margin-bottom: 30px;">
           High-fidelity segmented monitoring with autonomous status evolution and forensic tracking.
         </p>
         
         <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px;">
            <!-- 1. Real-time Rack Monitor -->
-           <div style="background: white; border-radius: 16px; border: 1px solid #e2e8f0; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);">
-              <h4 style="margin: 0 0 16px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: #94a3b8;">Rack #04 Status</h4>
+           <div style="background:var(--bg-primary,white); border-radius: 16px; border:1px solid var(--border-default,#e2e8f0); padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);">
+              <h4 style="margin: 0 0 16px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color:var(--text-secondary,#64748b);">Rack #04 Status</h4>
               <ui-progress 
                  id="industrialRack"
                  type="industrial" 
@@ -451,14 +461,14 @@ export function initProgressDemo() {
                  thresholds='[{"percent": 80, "status": "danger"}, {"percent": 60, "status": "warning"}]'
               ></ui-progress>
               <div style="margin-top: 16px; display: flex; justify-content: space-between;">
-                 <ui-button onclick="updateIndPercent(-5)" style="background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 4px; padding: 4px 12px; font-size: 11px; cursor: pointer;">Decrease Load</ui-button>
-                 <ui-button onclick="updateIndPercent(5)" style="background: #1e293b; color: white; border: none; border-radius: 4px; padding: 4px 12px; font-size: 11px; cursor: pointer;">Increase Load</ui-button>
+                 <ui-button onclick="updateIndPercent(-5)">Decrease Load</ui-button>
+                 <ui-button onclick="updateIndPercent(5)" >Increase Load</ui-button>
               </div>
            </div>
 
            <!-- 2. Memory Forensics -->
-           <div style="background: white; border-radius: 16px; border: 1px solid #e2e8f0; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);">
-              <h4 style="margin: 0 0 16px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: #94a3b8;">Memory Peak Tracker</h4>
+           <div style="background:var(--bg-primary,white); border-radius: 16px; border:1px solid var(--border-default,#e2e8f0); padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);">
+              <h4 style="margin: 0 0 16px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color:var(--text-secondary,#64748b);">Memory Peak Tracker</h4>
               <ui-progress 
                 id="memoryForensics"
                 type="line"
@@ -467,15 +477,15 @@ export function initProgressDemo() {
                 stroke-color="#10b981"
                 data-labels="6.4 GB / 32 GB"
               ></ui-progress>
-              <p style="font-size: 11px; color: #94a3b8; margin-top: 12px;">The blue marker tracks the maximum load reached this session.</p>
+              <p style="font-size: 11px; color:var(--text-secondary,#64748b); margin-top: 12px;">The blue marker tracks the maximum load reached this session.</p>
            </div>
         </div>
 
         <!-- 3. Stress Test Center -->
-        <div style="margin-top: 40px; background: #0f172a; border-radius: 16px; padding: 32px; color: white;">
+        <div style="margin-top: 40px; background: var(--bg-primary, white); border: 1px solid var(--border-default, #e2e8f0); border-radius: 16px; padding: 32px; color: var(--text-primary, #0f172a);">
            <h4 style="margin: 0 0 20px; font-size: 15px; display: flex; align-items: center; gap: 8px;">
              ⚡ Thermal Stress Simulator
-             <span id="stressStatus" style="font-size: 11px; background: #334155; padding: 4px 10px; border-radius: 20px;">NOMINAL</span>
+             <span id="stressStatus" style="font-size: 11px; background: var(--bg-tertiary, #f1f5f9); color: var(--text-secondary, #64748b); border: 1px solid var(--border-default, #cbd5e1); padding: 4px 10px; border-radius: 20px;">NOMINAL</span>
            </h4>
            <ui-progress 
              id="stressTest"
@@ -486,7 +496,7 @@ export function initProgressDemo() {
              vitality="true"
              thresholds='[{"percent": 85, "status": "danger"}, {"percent": 70, "status": "warning"}]'
            ></ui-progress>
-           <ui-button onclick="startStressTest()" style="margin-top: 24px; width: 100%; padding: 12px; background: #ef4444; border: none; border-radius: 8px; font-weight: 700; color: white; cursor: pointer;">START THERMAL RAMP</ui-button>
+           <ui-button onclick="startStressTest()" style="margin-top: 24px; width: 100%; padding: 12px; background: var(--accent-red,#ef4444); border: none; border-radius: 8px; font-weight: 700; color: white; cursor: pointer;">START THERMAL RAMP</ui-button>
         </div>
       </div>
     `;
@@ -509,11 +519,15 @@ export function initProgressDemo() {
         el.percent = current;
         if (current >= 70 && current < 85) {
           status.innerText = 'WARNING';
-          status.style.background = '#854d0e';
+          status.style.background = 'rgba(var(--color-warning-rgb, 245, 158, 11), 0.12)';
+          status.style.color = 'var(--color-warning, #b45309)';
+          status.style.borderColor = 'rgba(var(--color-warning-rgb, 245, 158, 11), 0.24)';
         }
         if (current >= 85) {
           status.innerText = 'CRITICAL THERMAL PRESSURE';
-          status.style.background = '#991b1b';
+          status.style.background = 'rgba(var(--color-danger-rgb, 255, 77, 79), 0.12)';
+          status.style.color = 'var(--color-danger, #b91c1c)';
+          status.style.borderColor = 'rgba(var(--color-danger-rgb, 255, 77, 79), 0.24)';
         }
         if (current >= 100) {
           clearInterval(interval);
@@ -539,11 +553,11 @@ export function initProgressDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3 style="margin-bottom: 24px;">🕹️ Control Suite: Reactive Scripting</h3>
-        <p style="font-size: 14px; color: #64748b; margin-bottom: 30px;">
+        <p style="font-size: 14px; color:var(--text-secondary,#64748b); margin-bottom: 30px;">
           Dynamic progress bars converted into primary system configuration controls via the <code>interactive</code> prop.
         </p>
 
-        <div style="background: white; border-radius: 16px; padding: 40px; border: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 40px;">
+        <div style="background:var(--bg-primary,white); border-radius: 16px; padding: 40px; border:1px solid var(--border-default,#e2e8f0); display: flex; flex-direction: column; gap: 40px;">
            <div>
               <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                  <label style="font-weight: 600; font-size: 13px;">Manual Fan Speed Configuration</label>
@@ -597,7 +611,7 @@ export function initProgressDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3 style="margin-bottom: 24px;">↕️ High-Density Vertical Racks</h3>
-        <div style="display: flex; gap: 40px; justify-content: center; height: 350px; padding: 40px; background: white; border-radius: 16px; border: 1px solid #e2e8f0;">
+        <div style="display: flex; gap: 40px; justify-content: center; height: 350px; padding: 40px; background:var(--bg-primary,white); border-radius: 16px; border:1px solid var(--border-default,#e2e8f0);">
            <ui-progress orientation="vertical" percent="80" height="100%" stroke-width="24" stroke-color="#f43f5e" vitality="true" glow="true" data-labels="THERMAL"></ui-progress>
            <ui-progress orientation="vertical" percent="60" height="100%" stroke-width="24" stroke-color="#10b981" ticks="20" data-labels="NETWORK"></ui-progress>
             <ui-progress orientation="vertical" percent="40" height="100%" stroke-width="24" stroke-color="#10b981" type="industrial" data-labels="POWER"></ui-progress>
@@ -614,15 +628,15 @@ export function initProgressDemo() {
       <div class="demo-block" style="font-family: inherit;">
         <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
           <div>
-            <h3 style="margin: 0; font-size: 20px; font-weight: 700; color: #0f172a;">🔍 Cybernetic Device Scanner</h3>
-            <p style="margin: 4px 0 0; font-size: 14px; color: #64748b;">Automated sector, memory, and threat scanning telemetry.</p>
+            <h3 style="margin: 0; font-size: 20px; font-weight: 700; color:var(--text-primary,#0f172a);">🔍 Cybernetic Device Scanner</h3>
+            <p style="margin: 4px 0 0; font-size: 14px; color:var(--text-secondary,#64748b);">Automated sector, memory, and threat scanning telemetry.</p>
           </div>
-          <span id="scanStatusBadge" style="font-size: 11px; font-weight: 700; background: #f1f5f9; color: #64748b; padding: 4px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em;">AWAITING COMMAND</span>
+          <span id="scanStatusBadge" style="font-size: 11px; font-weight: 700; background:var(--bg-tertiary,#f1f5f9); color:var(--text-secondary,#64748b); padding: 4px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em;">AWAITING COMMAND</span>
         </div>
 
         <div style="display: grid; grid-template-columns: 280px 1fr; gap: 32px; margin-bottom: 32px;">
           <!-- Left Panel: Dial & Actions -->
-          <div style="background: white; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
+          <div style="background:var(--bg-primary,white); border:1px solid var(--border-default,#e2e8f0); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
             <div style="position: relative; width: 160px; height: 160px; display: flex; align-items: center; justify-content: center;">
               <ui-progress 
                 id="scanCircularProgress" 
@@ -643,7 +657,7 @@ export function initProgressDemo() {
               <ui-button id="btnStartScan" onclick="handleScanAction('start')" variant="primary" style="width: 100%;">⚡ Start Full Scan</ui-button>
               <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
                 <ui-button id="btnPauseScan" onclick="handleScanAction('pause')" variant="outline" style="font-size: 12px;">⏸️ Pause</ui-button>
-                <ui-button id="btnHaltScan" onclick="handleScanAction('halt')" variant="outline" style="font-size: 12px; --ui-button-color: #ef4444; --ui-button-border-color: #fecaca;">🚫 Abort</ui-button>
+                <ui-button id="btnHaltScan" onclick="handleScanAction('halt')" variant="outline" style="font-size: 12px; --ui-button-color:var(--accent-red,#ef4444); --ui-button-border-color: #fecaca;">🚫 Abort</ui-button>
               </div>
               <ui-button id="btnResetScan" onclick="handleScanAction('reset')" variant="ghost" style="width: 100%; font-size: 12px;">🔄 Reset Console</ui-button>
             </div>
@@ -653,31 +667,31 @@ export function initProgressDemo() {
           <div style="display: flex; flex-direction: column; gap: 20px;">
             <!-- Telemetry Cards -->
             <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
-              <div style="background: white; border: 1px solid #e2e8f0; padding: 16px; border-radius: 12px; text-align: center;">
-                <span style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; font-weight: 600;">Sectors Checked</span>
-                <h4 id="sectorsCount" style="margin: 8px 0 0; font-size: 24px; font-weight: 800; color: #0f172a;">0</h4>
+              <div style="background:var(--bg-primary,white); border:1px solid var(--border-default,#e2e8f0); padding: 16px; border-radius: 12px; text-align: center;">
+                <span style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color:var(--text-secondary,#64748b); font-weight: 600;">Sectors Checked</span>
+                <h4 id="sectorsCount" style="margin: 8px 0 0; font-size: 24px; font-weight: 800; color:var(--text-primary,#0f172a);">0</h4>
               </div>
-              <div style="background: white; border: 1px solid #e2e8f0; padding: 16px; border-radius: 12px; text-align: center;">
-                <span style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; font-weight: 600;">Threats Detected</span>
-                <h4 id="threatsCount" style="margin: 8px 0 0; font-size: 24px; font-weight: 800; color: #0f172a;">0</h4>
+              <div style="background:var(--bg-primary,white); border:1px solid var(--border-default,#e2e8f0); padding: 16px; border-radius: 12px; text-align: center;">
+                <span style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color:var(--text-secondary,#64748b); font-weight: 600;">Threats Detected</span>
+                <h4 id="threatsCount" style="margin: 8px 0 0; font-size: 24px; font-weight: 800; color:var(--text-primary,#0f172a);">0</h4>
               </div>
-              <div style="background: white; border: 1px solid #e2e8f0; padding: 16px; border-radius: 12px; text-align: center;">
-                <span style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; font-weight: 600;">Scan Time</span>
-                <h4 id="elapsedScanTime" style="margin: 8px 0 0; font-size: 24px; font-weight: 800; color: #0f172a;">0.0s</h4>
+              <div style="background:var(--bg-primary,white); border:1px solid var(--border-default,#e2e8f0); padding: 16px; border-radius: 12px; text-align: center;">
+                <span style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color:var(--text-secondary,#64748b); font-weight: 600;">Scan Time</span>
+                <h4 id="elapsedScanTime" style="margin: 8px 0 0; font-size: 24px; font-weight: 800; color:var(--text-primary,#0f172a);">0.0s</h4>
               </div>
             </div>
 
             <!-- Terminal Console Logs -->
             <div style="background: #0f172a; color: #38bdf8; border-radius: 16px; padding: 20px; font-family: 'Courier New', Courier, monospace; font-size: 12px; height: 180px; overflow-y: auto; border: 1px solid #1e293b; box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);" id="scanTerminalConsole">
-              <div style="color: #64748b;">[SCAN ENGINE v4.2.1] INITIALIZED...</div>
-              <div style="color: #64748b;">[CONSOLE] READY FOR HARDWARE RAMP...</div>
+              <div style="color:var(--text-secondary,#64748b);">[SCAN ENGINE v4.2.1] INITIALIZED...</div>
+              <div style="color:var(--text-secondary,#64748b);">[CONSOLE] READY FOR HARDWARE RAMP...</div>
             </div>
           </div>
         </div>
 
         <!-- Linear Sub-System Feed -->
-        <div style="background: white; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
-          <h4 style="margin: 0 0 16px; font-size: 13px; text-transform: uppercase; color: #64748b; font-weight: 700; letter-spacing: 0.05em;">Memory Buffer Allocation Check</h4>
+        <div style="background:var(--bg-primary,white); border:1px solid var(--border-default,#e2e8f0); border-radius: 16px; padding: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);">
+          <h4 style="margin: 0 0 16px; font-size: 13px; text-transform: uppercase; color:var(--text-secondary,#64748b); font-weight: 700; letter-spacing: 0.05em;">Memory Buffer Allocation Check</h4>
           <ui-progress id="scanLinearBuffer" percent="0" status="empty" stroke-width="16" vitality="true"></ui-progress>
         </div>
       </div>
@@ -849,8 +863,8 @@ export function initProgressDemo() {
         statusBadge.style.color = '';
         
         term.innerHTML = `
-          <div style="color: #64748b;">[SCAN ENGINE v4.2.1] INITIALIZED...</div>
-          <div style="color: #64748b;">[CONSOLE] READY FOR HARDWARE RAMP...</div>
+          <div style="color:var(--text-secondary,#64748b);">[SCAN ENGINE v4.2.1] INITIALIZED...</div>
+          <div style="color:var(--text-secondary,#64748b);">[CONSOLE] READY FOR HARDWARE RAMP...</div>
         `;
         log('SCAN TELEMETRY CLEARED AND RESET.', '#64748b');
       }
@@ -863,31 +877,31 @@ export function initProgressDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3 style="margin-bottom:6px;">🏷️ Status Bar Variant</h3>
-        <p style="font-size:13px; color:#64748b; margin:0 0 28px; line-height:1.6;">Add <code>status-bar</code> to any <code>ui-progress</code> line bar. The status badge and percentage are derived automatically from <code>percent</code> and <code>status</code>. Use <code>status-bar-align</code> to position the label and <code>status-labels</code> to override any text.</p>
+        <p style="font-size:13px; color:var(--text-secondary,#64748b); margin:0 0 28px; line-height:1.6;">Add <code>status-bar</code> to any <code>ui-progress</code> line bar. The status badge and percentage are derived automatically from <code>percent</code> and <code>status</code>. Use <code>status-bar-align</code> to position the label and <code>status-labels</code> to override any text.</p>
 
         <!-- Custom labels showcase -->
-        <h4 style="font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; margin:0 0 14px;">Custom Labels</h4>
+        <h4 style="font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary,#64748b); margin:0 0 14px;">Custom Labels</h4>
         <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-bottom:36px;">
 
-          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+          <div style="background:var(--bg-primary,white); padding:18px 20px; border-radius:12px; border:1px solid var(--border-default,#e2e8f0);">
             <span style="font-size:11px; font-weight:700; color:#cbd5e1; display:block; margin-bottom:10px;">Deploy pipeline labels</span>
             <ui-progress percent="0"  status-bar stroke-width="6"
               status-labels='{"notStarted":"Queued","running":"Deploying","interrupted":"Rolled Back","completed":"Live"}'></ui-progress>
           </div>
 
-          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+          <div style="background:var(--bg-primary,white); padding:18px 20px; border-radius:12px; border:1px solid var(--border-default,#e2e8f0);">
             <span style="font-size:11px; font-weight:700; color:#cbd5e1; display:block; margin-bottom:10px;">File transfer labels</span>
             <ui-progress percent="55" status-bar stroke-width="6" stroke-color="#3b82f6"
               status-labels='{"notStarted":"Pending","running":"Uploading","interrupted":"Paused","completed":"Sent"}'></ui-progress>
           </div>
 
-          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+          <div style="background:var(--bg-primary,white); padding:18px 20px; border-radius:12px; border:1px solid var(--border-default,#e2e8f0);">
             <span style="font-size:11px; font-weight:700; color:#cbd5e1; display:block; margin-bottom:10px;">Partial override (running only)</span>
             <ui-progress percent="72" status-bar stroke-width="6" stroke-color="#8b5cf6"
               status-labels='{"running":"In Progress"}'></ui-progress>
           </div>
 
-          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+          <div style="background:var(--bg-primary,white); padding:18px 20px; border-radius:12px; border:1px solid var(--border-default,#e2e8f0);">
             <span style="font-size:11px; font-weight:700; color:#cbd5e1; display:block; margin-bottom:10px;">Interrupted — custom label</span>
             <ui-progress percent="41" status="interrupted" status-bar stroke-width="6" stroke-color="#f59e0b"
               status-labels='{"interrupted":"On Hold"}'></ui-progress>
@@ -895,149 +909,149 @@ export function initProgressDemo() {
         </div>
 
         <!-- Badge Alignment showcase -->
-        <h4 style="font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; margin:0 0 14px;">Chip Alignment</h4>
+        <h4 style="font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary,#64748b); margin:0 0 14px;">Chip Alignment</h4>
         <div style="display:flex; flex-direction:column; gap:12px; margin-bottom:36px;">
 
-          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+          <div style="background:var(--bg-primary,white); padding:18px 20px; border-radius:12px; border:1px solid var(--border-default,#e2e8f0);">
             <span style="font-size:11px; font-weight:700; color:#cbd5e1; display:block; margin-bottom:10px;">LEFT (default) — chip anchored to left edge</span>
             <ui-progress percent="60" status-bar status-bar-align="left" stroke-width="7" stroke-color="#3b82f6"></ui-progress>
           </div>
 
-          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+          <div style="background:var(--bg-primary,white); padding:18px 20px; border-radius:12px; border:1px solid var(--border-default,#e2e8f0);">
             <span style="font-size:11px; font-weight:700; color:#cbd5e1; display:block; margin-bottom:10px;">CENTER — chip centered on bar</span>
             <ui-progress percent="60" status-bar status-bar-align="center" stroke-width="7" stroke-color="#8b5cf6"></ui-progress>
           </div>
 
-          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+          <div style="background:var(--bg-primary,white); padding:18px 20px; border-radius:12px; border:1px solid var(--border-default,#e2e8f0);">
             <span style="font-size:11px; font-weight:700; color:#cbd5e1; display:block; margin-bottom:10px;">RIGHT — chip anchored to right edge</span>
             <ui-progress percent="60" status-bar status-bar-align="right" stroke-width="7" stroke-color="#22c55e"></ui-progress>
           </div>
         </div>
 
         <!-- All 4 lifecycle states -->
-        <h4 style="font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; margin:0 0 14px;">Lifecycle States</h4>
+        <h4 style="font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary,#64748b); margin:0 0 14px;">Lifecycle States</h4>
         <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-bottom:36px;">
 
-          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+          <div style="background:var(--bg-primary,white); padding:18px 20px; border-radius:12px; border:1px solid var(--border-default,#e2e8f0);">
             <ui-progress percent="0" status-bar stroke-width="6"></ui-progress>
           </div>
-          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+          <div style="background:var(--bg-primary,white); padding:18px 20px; border-radius:12px; border:1px solid var(--border-default,#e2e8f0);">
             <ui-progress percent="45" status-bar stroke-width="6" stroke-color="#3b82f6"></ui-progress>
           </div>
-          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+          <div style="background:var(--bg-primary,white); padding:18px 20px; border-radius:12px; border:1px solid var(--border-default,#e2e8f0);">
             <ui-progress percent="72" status="interrupted" status-bar stroke-width="6" stroke-color="#f59e0b"></ui-progress>
           </div>
-          <div style="background:white; padding:18px 20px; border-radius:12px; border:1px solid #e2e8f0;">
+          <div style="background:var(--bg-primary,white); padding:18px 20px; border-radius:12px; border:1px solid var(--border-default,#e2e8f0);">
             <ui-progress percent="100" status-bar stroke-width="6" stroke-color="#22c55e"></ui-progress>
           </div>
         </div>
 
         <!-- Real-world context cards -->
-        <h4 style="font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; margin:0 0 14px;">Real-World Usage</h4>
+        <h4 style="font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary,#64748b); margin:0 0 14px;">Real-World Usage</h4>
         <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-bottom:36px;">
 
-          <div style="background:white; padding:20px; border-radius:12px; border:1px solid #e2e8f0;">
+          <div style="background:var(--bg-primary,white); padding:20px; border-radius:12px; border:1px solid var(--border-default,#e2e8f0);">
             <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;">
               <div>
-                <p style="margin:0; font-size:13px; font-weight:700; color:#0f172a;">CI/CD Pipeline</p>
-                <p style="margin:2px 0 0; font-size:11px; color:#64748b;">main → production</p>
+                <p style="margin:0; font-size:13px; font-weight:700; color:var(--text-primary,#0f172a);">CI/CD Pipeline</p>
+                <p style="margin:2px 0 0; font-size:11px; color:var(--text-secondary,#64748b);">main → production</p>
               </div>
-              <span style="font-size:10px; font-weight:700; background:#eff6ff; color:#3b82f6; padding:3px 8px; border-radius:20px;">DEPLOY</span>
+              <span style="font-size:10px; font-weight:700; background:var(--accent-blue-soft,#eff6ff); color:var(--accent-blue,#3b82f6); padding:3px 8px; border-radius:20px;">DEPLOY</span>
             </div>
             <ui-progress percent="68" status-bar stroke-width="7" stroke-color="#3b82f6"></ui-progress>
           </div>
 
-          <div style="background:white; padding:20px; border-radius:12px; border:1px solid #e2e8f0;">
+          <div style="background:var(--bg-primary,white); padding:20px; border-radius:12px; border:1px solid var(--border-default,#e2e8f0);">
             <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;">
               <div>
-                <p style="margin:0; font-size:13px; font-weight:700; color:#0f172a;">File Upload</p>
-                <p style="margin:2px 0 0; font-size:11px; color:#64748b;">design-assets-v3.zip</p>
+                <p style="margin:0; font-size:13px; font-weight:700; color:var(--text-primary,#0f172a);">File Upload</p>
+                <p style="margin:2px 0 0; font-size:11px; color:var(--text-secondary,#64748b);">design-assets-v3.zip</p>
               </div>
-              <span style="font-size:10px; font-weight:700; background:#f0fdf4; color:#16a34a; padding:3px 8px; border-radius:20px;">DONE</span>
+              <span style="font-size:10px; font-weight:700; background:var(--accent-green-soft,#f0fdf4); color:#16a34a; padding:3px 8px; border-radius:20px;">DONE</span>
             </div>
             <ui-progress percent="100" status-bar status-bar-align="right" stroke-width="7" stroke-color="#22c55e"></ui-progress>
           </div>
 
-          <div style="background:white; padding:20px; border-radius:12px; border:1px solid #e2e8f0;">
+          <div style="background:var(--bg-primary,white); padding:20px; border-radius:12px; border:1px solid var(--border-default,#e2e8f0);">
             <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;">
               <div>
-                <p style="margin:0; font-size:13px; font-weight:700; color:#0f172a;">Database Migration</p>
-                <p style="margin:2px 0 0; font-size:11px; color:#64748b;">prod_db → replica_eu</p>
+                <p style="margin:0; font-size:13px; font-weight:700; color:var(--text-primary,#0f172a);">Database Migration</p>
+                <p style="margin:2px 0 0; font-size:11px; color:var(--text-secondary,#64748b);">prod_db → replica_eu</p>
               </div>
-              <span style="font-size:10px; font-weight:700; background:#fffbeb; color:#d97706; padding:3px 8px; border-radius:20px;">PAUSED</span>
+              <span style="font-size:10px; font-weight:700; background:var(--accent-yellow-soft,#fffbeb); color:var(--accent-yellow,#d97706); padding:3px 8px; border-radius:20px;">PAUSED</span>
             </div>
             <ui-progress percent="41" status="interrupted" status-bar stroke-width="7" stroke-color="#f59e0b"></ui-progress>
           </div>
 
-          <div style="background:white; padding:20px; border-radius:12px; border:1px solid #e2e8f0;">
+          <div style="background:var(--bg-primary,white); padding:20px; border-radius:12px; border:1px solid var(--border-default,#e2e8f0);">
             <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;">
               <div>
-                <p style="margin:0; font-size:13px; font-weight:700; color:#0f172a;">Scheduled Backup</p>
-                <p style="margin:2px 0 0; font-size:11px; color:#64748b;">Starts at 03:00 UTC</p>
+                <p style="margin:0; font-size:13px; font-weight:700; color:var(--text-primary,#0f172a);">Scheduled Backup</p>
+                <p style="margin:2px 0 0; font-size:11px; color:var(--text-secondary,#64748b);">Starts at 03:00 UTC</p>
               </div>
-              <span style="font-size:10px; font-weight:700; background:#f1f5f9; color:#64748b; padding:3px 8px; border-radius:20px;">QUEUED</span>
+              <span style="font-size:10px; font-weight:700; background:var(--bg-tertiary,#f1f5f9); color:var(--text-secondary,#64748b); padding:3px 8px; border-radius:20px;">QUEUED</span>
             </div>
             <ui-progress percent="0" status-bar status-bar-align="center" stroke-width="7"></ui-progress>
           </div>
         </div>
 
         <!-- Interactive demo -->
-        <h4 style="font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; margin:0 0 14px;">Interactive</h4>
-        <div style="background:white; padding:24px; border-radius:12px; border:1px solid #e2e8f0;">
+        <h4 style="font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary,#64748b); margin:0 0 14px;">Interactive</h4>
+        <div style="background:var(--bg-primary,white); padding:24px; border-radius:12px; border:1px solid var(--border-default,#e2e8f0);">
           <div style="display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px;">
-            <label style="font-size:13px; font-weight:600; white-space:nowrap; color:#0f172a;">Progress: <span id="sb-val">0</span>%</label>
+            <label style="font-size:13px; font-weight:600; white-space:nowrap; color:var(--text-primary,#0f172a);">Progress: <span id="sb-val">0</span>%</label>
             <input type="range" id="sb-slider" min="0" max="100" value="0" style="flex:1; min-width:140px;">
-            <ui-button id="sb-btn-interrupt" variant="outline" style="--ui-button-color:#d97706; --ui-button-border-color:#fde68a;">⛔ Interrupt</ui-button>
+            <ui-button id="sb-btn-interrupt" variant="outline" style="--ui-button-color:var(--accent-yellow,#d97706); --ui-button-border-color:#fde68a;">⛔ Interrupt</ui-button>
             <ui-button id="sb-btn-reset" variant="ghost">↺ Reset</ui-button>
           </div>
           <div style="display:flex; align-items:center; gap:8px; margin-bottom:16px;">
-            <span style="font-size:12px; font-weight:600; color:#64748b;">Align:</span>
-            <button id="sb-align-left"   data-align="left"   style="padding:3px 12px; font-size:12px; font-weight:600; border-radius:6px; border:1.5px solid #3b82f6; background:#eff6ff; color:#2563eb; cursor:pointer;">Left</button>
-            <button id="sb-align-center" data-align="center" style="padding:3px 12px; font-size:12px; font-weight:600; border-radius:6px; border:1.5px solid #e2e8f0; background:#f8fafc; color:#475569; cursor:pointer;">Center</button>
-            <button id="sb-align-right"  data-align="right"  style="padding:3px 12px; font-size:12px; font-weight:600; border-radius:6px; border:1.5px solid #e2e8f0; background:#f8fafc; color:#475569; cursor:pointer;">Right</button>
+            <span style="font-size:12px; font-weight:600; color:var(--text-secondary,#64748b);">Align:</span>
+            <button id="sb-align-left"   data-align="left"   style="padding:3px 12px; font-size:12px; font-weight:600; border-radius:6px; border:1.5px solid #3b82f6; background:var(--accent-blue-soft,#eff6ff); color:var(--accent-blue,#2563eb); cursor:pointer;">Left</button>
+            <button id="sb-align-center" data-align="center" style="padding:3px 12px; font-size:12px; font-weight:600; border-radius:6px; border:1.5px solid #e2e8f0; background:var(--bg-secondary,#f8fafc); color:#475569; cursor:pointer;">Center</button>
+            <button id="sb-align-right"  data-align="right"  style="padding:3px 12px; font-size:12px; font-weight:600; border-radius:6px; border:1.5px solid #e2e8f0; background:var(--bg-secondary,#f8fafc); color:#475569; cursor:pointer;">Right</button>
           </div>
           <!-- Position and Height controls -->
-          <div style="display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:16px; padding:12px; background:#f8fafc; border-radius:8px; border:1px solid #e2e8f0;">
+          <div style="display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:16px; padding:12px; background:var(--bg-secondary,#f8fafc); border-radius:8px; border:1px solid var(--border-default,#e2e8f0);">
             <div style="display:flex; align-items:center; gap:8px;">
-              <span style="font-size:12px; font-weight:600; color:#64748b;">Position:</span>
-              <button id="sb-pos-inside" data-pos="inside" style="padding:3px 12px; font-size:12px; font-weight:600; border-radius:6px; border:1.5px solid #3b82f6; background:#eff6ff; color:#2563eb; cursor:pointer;">Inside Bar</button>
-              <button id="sb-pos-top"    data-pos="top"    style="padding:3px 12px; font-size:12px; font-weight:600; border-radius:6px; border:1.5px solid #e2e8f0; background:#f8fafc; color:#475569; cursor:pointer;">On Top</button>
+              <span style="font-size:12px; font-weight:600; color:var(--text-secondary,#64748b);">Position:</span>
+              <button id="sb-pos-inside" data-pos="inside" style="padding:3px 12px; font-size:12px; font-weight:600; border-radius:6px; border:1.5px solid #3b82f6; background:var(--accent-blue-soft,#eff6ff); color:var(--accent-blue,#2563eb); cursor:pointer;">Inside Bar</button>
+              <button id="sb-pos-top"    data-pos="top"    style="padding:3px 12px; font-size:12px; font-weight:600; border-radius:6px; border:1.5px solid #e2e8f0; background:var(--bg-secondary,#f8fafc); color:#475569; cursor:pointer;">On Top</button>
             </div>
             <div style="display:flex; align-items:center; gap:8px; flex:1; min-width:200px;">
-              <span style="font-size:12px; font-weight:600; color:#64748b; white-space:nowrap;">Bar Height: <span id="sb-height-val">8</span>px</span>
+              <span style="font-size:12px; font-weight:600; color:var(--text-secondary,#64748b); white-space:nowrap;">Bar Height: <span id="sb-height-val">8</span>px</span>
               <input type="range" id="sb-height-slider" min="2" max="40" value="8" style="flex:1; cursor:pointer;">
             </div>
           </div>
           <!-- Custom label inputs -->
-          <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin-bottom:20px; padding:16px; background:#f8fafc; border-radius:8px; border:1px solid #e2e8f0;">
-            <label style="display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.05em;">
+          <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin-bottom:20px; padding:16px; background:var(--bg-secondary,#f8fafc); border-radius:8px; border:1px solid var(--border-default,#e2e8f0);">
+            <label style="display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:var(--text-secondary,#64748b); text-transform:uppercase; letter-spacing:.05em;">
               Not Started
-              <input id="sb-lbl-notStarted" type="text" placeholder="Not Started" value="" style="padding:5px 8px; font-size:12px; border-radius:6px; border:1px solid #e2e8f0; outline:none; background:white;">
+              <input id="sb-lbl-notStarted" type="text" placeholder="Not Started" value="" style="padding:5px 8px; font-size:12px; border-radius:6px; border:1px solid var(--border-default,#e2e8f0); outline:none; background:var(--bg-primary,white);">
             </label>
-            <label style="display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.05em;">
+            <label style="display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:var(--text-secondary,#64748b); text-transform:uppercase; letter-spacing:.05em;">
               Running
-              <input id="sb-lbl-running" type="text" placeholder="Running" value="" style="padding:5px 8px; font-size:12px; border-radius:6px; border:1px solid #e2e8f0; outline:none; background:white;">
+              <input id="sb-lbl-running" type="text" placeholder="Running" value="" style="padding:5px 8px; font-size:12px; border-radius:6px; border:1px solid var(--border-default,#e2e8f0); outline:none; background:var(--bg-primary,white);">
             </label>
-            <label style="display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.05em;">
+            <label style="display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:var(--text-secondary,#64748b); text-transform:uppercase; letter-spacing:.05em;">
               Interrupted
-              <input id="sb-lbl-interrupted" type="text" placeholder="Interrupted" value="" style="padding:5px 8px; font-size:12px; border-radius:6px; border:1px solid #e2e8f0; outline:none; background:white;">
+              <input id="sb-lbl-interrupted" type="text" placeholder="Interrupted" value="" style="padding:5px 8px; font-size:12px; border-radius:6px; border:1px solid var(--border-default,#e2e8f0); outline:none; background:var(--bg-primary,white);">
             </label>
-            <label style="display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.05em;">
+            <label style="display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:var(--text-secondary,#64748b); text-transform:uppercase; letter-spacing:.05em;">
               Completed
-              <input id="sb-lbl-completed" type="text" placeholder="Completed" value="" style="padding:5px 8px; font-size:12px; border-radius:6px; border:1px solid #e2e8f0; outline:none; background:white;">
+              <input id="sb-lbl-completed" type="text" placeholder="Completed" value="" style="padding:5px 8px; font-size:12px; border-radius:6px; border:1px solid var(--border-default,#e2e8f0); outline:none; background:var(--bg-primary,white);">
             </label>
           </div>
           <ui-progress id="sb-bar" percent="0" status-bar status-bar-align="left" stroke-width="8"></ui-progress>
         </div>
 
         <!-- Usage snippet -->
-        <h4 style="font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; margin:28px 0 14px;">Usage</h4>
+        <h4 style="font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary,#64748b); margin:28px 0 14px;">Usage</h4>
         <div style="background:#0f172a; border-radius:10px; padding:18px 22px; font-family:'Courier New',monospace; font-size:12px; line-height:1.9; color:#e2e8f0; overflow-x:auto;">
-          <span style="color:#64748b;">/* default labels (rendered inside, forces minimum 32px height) */</span><br>
+          <span style="color:var(--text-secondary,#64748b);">/* default labels (rendered inside, forces minimum 32px height) */</span><br>
           <span style="color:#7dd3fc;">&lt;ui-progress</span><span style="color:#86efac;"> percent</span><span style="color:#f8fafc;">="45"</span><span style="color:#86efac;"> status-bar</span><span style="color:#7dd3fc;">&gt;&lt;/ui-progress&gt;</span><br><br>
-          <span style="color:#64748b;">/* status bar on top (allows custom/reduced height via stroke-width) */</span><br>
+          <span style="color:var(--text-secondary,#64748b);">/* status bar on top (allows custom/reduced height via stroke-width) */</span><br>
           <span style="color:#7dd3fc;">&lt;ui-progress</span><span style="color:#86efac;"> percent</span><span style="color:#f8fafc;">="60"</span><span style="color:#86efac;"> status-bar</span><span style="color:#86efac;"> status-bar-position</span><span style="color:#f8fafc;">="top"</span><span style="color:#86efac;"> stroke-width</span><span style="color:#f8fafc;">="4"</span><span style="color:#7dd3fc;">&gt;&lt;/ui-progress&gt;</span><br><br>
-          <span style="color:#64748b;">/* custom all 4 labels */</span><br>
+          <span style="color:var(--text-secondary,#64748b);">/* custom all 4 labels */</span><br>
           <span style="color:#7dd3fc;">&lt;ui-progress</span><span style="color:#86efac;"> percent</span><span style="color:#f8fafc;">="55"</span><span style="color:#86efac;"> status-bar</span><br>
           &nbsp;&nbsp;<span style="color:#86efac;"> status-labels</span><span style="color:#f8fafc;">='{"notStarted":"Queued","running":"Uploading","interrupted":"Paused","completed":"Sent"}'</span><span style="color:#7dd3fc;">&gt;&lt;/ui-progress&gt;</span>
         </div>