atomicuilibrary 0.1.0 → 0.1.3

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

@@ -41,22 +41,22 @@ window.showHorizontalSplitter = function () {
   if (!container) return;
 
   container.innerHTML = `
-    <div class="demo-block" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
+    <div class="demo-block" style="background:var(--bg-primary,white); border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
       <h3 style="margin-top: 0; display: flex; align-items: center; gap: 10px;">
         <span style="font-size: 24px;">⚖️</span>
         Proportional Horizontal Splitter
       </h3>
       <p style="color: #6b7280; margin-bottom: 20px;">Two side-by-side content containers. Grab the vertical bar and drag left or right.</p>
       
-      <div style="border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; height: 350px; background: #0f172a;">
+      <div style="border:1px solid var(--border-default,#e2e8f0); border-radius: 8px; overflow: hidden; height: 350px; background: var(--bg-tertiary, #f1f5f9);">
         <ui-splitter direction="horizontal" gutter-size="10" gutter-color="#1e293b" gutter-hover-color="#3b82f6" snap-threshold="15">
           <div slot="panel-0" style="padding: 24px; background: #1e293b; color: white; height: 100%; box-sizing: border-box;">
-            <h4 style="margin-top: 0; color: #3b82f6;">Left Panel</h4>
-            <p style="font-size: 14px; color: #94a3b8; line-height: 1.6;">This is the left zone. Dragging the center splitter handles resizing in real-time using proportional percentage calculation.</p>
+            <h4 style="margin-top: 0; color:var(--accent-blue,#3b82f6);">Left Panel</h4>
+            <p style="font-size: 14px; color:var(--text-secondary,#64748b); line-height: 1.6;">This is the left zone. Dragging the center splitter handles resizing in real-time using proportional percentage calculation.</p>
           </div>
           <div slot="panel-1" style="padding: 24px; background: #0f172a; color: white; height: 100%; box-sizing: border-box;">
             <h4 style="margin-top: 0; color: #10b981;">Right Panel</h4>
-            <p style="font-size: 14px; color: #94a3b8; line-height: 1.6;">This is the right zone. It automatically shrinks or expands to occupy all remaining width space in the parent component.</p>
+            <p style="font-size: 14px; color:var(--text-secondary,#64748b); line-height: 1.6;">This is the right zone. It automatically shrinks or expands to occupy all remaining width space in the parent component.</p>
           </div>
         </ui-splitter>
       </div>
@@ -70,22 +70,22 @@ window.showVerticalSplitter = function () {
   if (!container) return;
 
   container.innerHTML = `
-    <div class="demo-block" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
+    <div class="demo-block" style="background:var(--bg-primary,white); border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
       <h3 style="margin-top: 0; display: flex; align-items: center; gap: 10px;">
         <span style="font-size: 24px;">↕️</span>
         Vertical Stack Splitter
       </h3>
       <p style="color: #6b7280; margin-bottom: 20px;">Top and bottom stacked containers divided by a horizontal gutter. Drag up or down.</p>
       
-      <div style="border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; height: 350px; background: #0f172a;">
+      <div style="border:1px solid var(--border-default,#e2e8f0); border-radius: 8px; overflow: hidden; height: 350px; background: var(--bg-tertiary, #f1f5f9);">
         <ui-splitter direction="vertical" gutter-size="10" gutter-color="#1e293b" gutter-hover-color="#10b981" snap-threshold="15">
           <div slot="panel-0" style="padding: 24px; background: #1e293b; color: white; height: 100%; box-sizing: border-box;">
             <h4 style="margin-top: 0; color: #10b981;">Top Console</h4>
-            <p style="font-size: 14px; color: #94a3b8; line-height: 1.6;">This is the upper console pane. Excellent for code, workspace canvases, or visualization boards.</p>
+            <p style="font-size: 14px; color:var(--text-secondary,#64748b); line-height: 1.6;">This is the upper console pane. Excellent for code, workspace canvases, or visualization boards.</p>
           </div>
           <div slot="panel-1" style="padding: 24px; background: #0f172a; color: white; height: 100%; box-sizing: border-box;">
-            <h4 style="margin-top: 0; color: #f59e0b;">Bottom Terminal Output</h4>
-            <p style="font-size: 14px; color: #94a3b8; line-height: 1.6;">This is the lower output pane. Ideal for terminal interfaces, logs, build stats, and problems lists.</p>
+            <h4 style="margin-top: 0; color:var(--accent-yellow,#f59e0b);">Bottom Terminal Output</h4>
+            <p style="font-size: 14px; color:var(--text-secondary,#64748b); line-height: 1.6;">This is the lower output pane. Ideal for terminal interfaces, logs, build stats, and problems lists.</p>
           </div>
         </ui-splitter>
       </div>
@@ -99,14 +99,14 @@ window.showNestedSplitter = function () {
   if (!container) return;
 
   container.innerHTML = `
-    <div class="demo-block" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
+    <div class="demo-block" style="background:var(--bg-primary,white); border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
       <h3 style="margin-top: 0; display: flex; align-items: center; gap: 10px;">
         <span style="font-size: 24px;">💠</span>
         Nested Layout Zones
       </h3>
       <p style="color: #6b7280; margin-bottom: 20px;">Combining horizontal and vertical splitters inside each other to create complete app workspace mockups.</p>
       
-      <div style="border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; height: 400px; background: #0f172a;">
+      <div style="border:1px solid var(--border-default,#e2e8f0); border-radius: 8px; overflow: hidden; height: 400px; background: var(--bg-tertiary, #f1f5f9);">
         <ui-splitter direction="horizontal" gutter-size="8" gutter-color="#0f172a" gutter-hover-color="#a855f7">
           <!-- Sidebar -->
           <div slot="panel-0" style="padding: 20px; background: #1e1b4b; color: white; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; border-right: 1px solid #312e81;">
@@ -119,14 +119,14 @@ window.showNestedSplitter = function () {
           <div slot="panel-1" style="height: 100%;">
             <ui-splitter direction="vertical" gutter-size="8" gutter-color="#0f172a" gutter-hover-color="#3b82f6">
               <div slot="panel-0" style="padding: 24px; background: #1e293b; color: white; height: 100%; box-sizing: border-box;">
-                <h4 style="margin-top: 0; color: #3b82f6;">Code Editor Workspace</h4>
+                <h4 style="margin-top: 0; color:var(--accent-blue,#3b82f6);">Code Editor Workspace</h4>
                 <pre style="margin: 10px 0; padding: 12px; background: #0f172a; border-radius: 6px; color: #38bdf8; font-family: monospace; font-size: 13px;">const splitter = document.querySelector('ui-splitter');</pre>
               </div>
               <div slot="panel-1" style="padding: 20px; background: #0f172a; color: white; height: 100%; box-sizing: border-box; border-top: 1px solid #1e293b;">
                 <h5 style="margin-top: 0; color: #f43f5e; display: flex; align-items: center; gap: 6px;">
                   <ui-icon name="terminal" library="lucide" size="14px"></ui-icon> Terminal Console
                 </h5>
-                <span style="font-size: 12px; color: #94a3b8; font-family: monospace;">$ npm run dev --host</span>
+                <span style="font-size: 12px; color:var(--text-secondary,#64748b); font-family: monospace;">$ npm run dev --host</span>
               </div>
             </ui-splitter>
           </div>

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

@@ -32,7 +32,7 @@ window.showStackPlayground = function () {
     <div class="demo-block">
       <h3>Interactive Playground</h3>
       <div style="display: grid; grid-template-columns: 320px 1fr; gap: 32px;">
-        <div class="control-panel" style="padding: 24px; background: #f9fafb; border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; gap: 20px;">
+        <div class="control-panel" style="padding: 24px; background:var(--bg-secondary,#f9fafb); border-radius: 12px; border:1px solid var(--border-default,#e5e7eb); box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; gap: 20px;">
           <ui-dropdown 
             id="stackDirection" 
             label="Direction" 
@@ -81,11 +81,11 @@ window.showStackPlayground = function () {
           </div>
         </div>
 
-        <div id="stackContainerWrapper" style="padding: 48px; background: white; border-radius: 16px; border: 1px dashed #cbd5e1; min-height: 400px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
+        <div id="stackContainerWrapper" style="padding: 48px; background:var(--bg-primary,white); border-radius: 16px; border: 1px dashed #cbd5e1; min-height: 400px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
           <ui-stack id="stackPlayground" direction="horizontal" spacing="8px" align="center" justify="start">
             <div style="width: 48px; height: 48px; background: #10b981; color: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">1</div>
             <div style="width: 48px; height: 48px; background: #10b981; color: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">2</div>
-            <div style="width: 48px; height: 48px; background: #f59e0b; color: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">3</div>
+            <div style="width: 48px; height: 48px; background: var(--accent-yellow,#f59e0b); color: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">3</div>
           </ui-stack>
         </div>
       </div>
@@ -156,22 +156,22 @@ window.showStackValidation = function () {
   container.innerHTML = `
     <div class="demo-block">
       <h3>Feature Showcase (Resolved Gaps)</h3>
-      <p style="color: #64748b; margin-bottom: 32px;">Validating enhanced logic for wrapping, dividers, and interactive overflow.</p>
+      <p style="color:var(--text-secondary,#64748b); margin-bottom: 32px;">Validating enhanced logic for wrapping, dividers, and interactive overflow.</p>
 
       <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 32px;">
         <!-- Case 1: Wrap Support -->
-        <div style="padding: 24px; border: 1px solid #dcfce7; border-radius: 16px; background-color: #f0fdf4; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
-          <h5 style="margin: 0 0 12px; color: #166534; font-size: 18px;">Wrapping Support</h5>
-          <p style="font-size: 14px; color: #15803d; margin-bottom: 20px; line-height: 1.5;">
+        <div style="padding: 24px; border: 1px solid #dcfce7; border-radius: 16px; background-color:var(--accent-green-soft,#f0fdf4); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
+          <h5 style="margin: 0 0 12px; color: var(--accent-green,#166534); font-size: 18px;">Wrapping Support</h5>
+          <p style="font-size: 14px; color:var(--accent-green,#15803d); margin-bottom: 20px; line-height: 1.5;">
             Content now flows naturally across multiple lines when it exceeds the parent container's width.
           </p>
-          <div style="width: 240px; border: 2px dashed #22c55e; overflow: hidden; padding: 12px; border-radius: 12px; background: white;">
+          <div style="width: 240px; border: 2px dashed #22c55e; overflow: hidden; padding: 12px; border-radius: 12px; background:var(--bg-primary,white);">
             <ui-stack spacing="10px" wrap="wrap">
               <div style="width: 60px; height: 35px; background: #10b981; border-radius: 6px;"></div>
               <div style="width: 60px; height: 35px; background: #10b981; border-radius: 6px;"></div>
-              <div style="width: 60px; height: 35px; background: #f59e0b; border-radius: 6px;"></div>
-              <div style="width: 60px; height: 35px; background: #ef4444; border-radius: 6px;"></div>
-              <div style="width: 60px; height: 35px; background: #8b5cf6; border-radius: 6px;"></div>
+              <div style="width: 60px; height: 35px; background: var(--accent-yellow,#f59e0b); border-radius: 6px;"></div>
+              <div style="width: 60px; height: 35px; background: var(--accent-red,#ef4444); border-radius: 6px;"></div>
+              <div style="width: 60px; height: 35px; background: var(--accent-purple,#8b5cf6); border-radius: 6px;"></div>
             </ui-stack>
           </div>
         </div>
@@ -182,44 +182,44 @@ window.showStackValidation = function () {
           <p style="font-size: 14px; color: #0369a1; margin-bottom: 20px; line-height: 1.5;">
             The <code>max</code> property limits visible items and displays a clickable counter for the remainder.
           </p>
-          <div style="background: white; padding: 16px; border-radius: 12px;">
+          <div style="background:var(--bg-primary,white); padding: 16px; border-radius: 12px;">
             <ui-stack max="2" spacing="12px">
               <div style="width: 44px; height: 44px; background: #10b981; border-radius: 8px;"></div>
               <div style="width: 44px; height: 44px; background: #10b981; border-radius: 8px;"></div>
-              <div style="width: 44px; height: 44px; background: #f59e0b; border-radius: 8px;"></div>
-              <div style="width: 44px; height: 44px; background: #ef4444; border-radius: 8px;"></div>
-              <div style="width: 44px; height: 44px; background: #8b5cf6; border-radius: 8px;"></div>
+              <div style="width: 44px; height: 44px; background: var(--accent-yellow,#f59e0b); border-radius: 8px;"></div>
+              <div style="width: 44px; height: 44px; background: var(--accent-red,#ef4444); border-radius: 8px;"></div>
+              <div style="width: 44px; height: 44px; background: var(--accent-purple,#8b5cf6); border-radius: 8px;"></div>
             </ui-stack>
           </div>
           <p style="font-size: 11px; color: #0284c7; margin-top: 12px; font-weight: 600;">(Try clicking the +3 badge)</p>
         </div>
 
         <!-- Case 3: Divider Support -->
-        <div style="padding: 24px; border: 1px solid #fef3c7; border-radius: 16px; background-color: #fffbeb; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
-          <h5 style="margin: 0 0 12px; color: #92400e; font-size: 18px;">Built-in Dividers</h5>
-          <p style="font-size: 14px; color: #b45309; margin-bottom: 20px; line-height: 1.5;">
+        <div style="padding: 24px; border: 1px solid #fef3c7; border-radius: 16px; background-color:var(--accent-yellow-soft,#fffbeb); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
+          <h5 style="margin: 0 0 12px; color:var(--accent-yellow,#92400e); font-size: 18px;">Built-in Dividers</h5>
+          <p style="font-size: 14px; color:var(--accent-yellow,#b45309); margin-bottom: 20px; line-height: 1.5;">
             Clean separators are automatically injected between items, respecting direction and alignment.
           </p>
-          <div style="background: white; padding: 20px; border-radius: 12px;">
+          <div style="background:var(--bg-primary,white); padding: 20px; border-radius: 12px;">
             <ui-stack spacing="20px" align="center" show-dividers="true" divider-type="solid">
-              <span style="font-weight: 600; color: #1e293b;">Settings</span>
-              <span style="font-weight: 600; color: #1e293b;">Security</span>
-              <span style="font-weight: 600; color: #1e293b;">Logout</span>
+              <span style="font-weight: 600; color:var(--text-primary,#1e293b);">Settings</span>
+              <span style="font-weight: 600; color:var(--text-primary,#1e293b);">Security</span>
+              <span style="font-weight: 600; color:var(--text-primary,#1e293b);">Logout</span>
             </ui-stack>
           </div>
         </div>
 
         <!-- Case 4: Overlap Elevation -->
-        <div style="padding: 24px; border: 1px solid #f5f3ff; border-radius: 16px; background-color: #f5f3ff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
+        <div style="padding: 24px; border: 1px solid #f5f3ff; border-radius: 16px; background-color:var(--accent-purple-soft,#f5f3ff); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
           <h5 style="margin: 0 0 12px; color: #5b21b6; font-size: 18px;">Overlap Depth</h5>
-          <p style="font-size: 14px; color: #6d28d9; margin-bottom: 20px; line-height: 1.5;">
+          <p style="font-size: 14px; color:var(--accent-purple,#6d28d9); margin-bottom: 20px; line-height: 1.5;">
             Stacked items use negative spacing and elevation tokens to create complex depth effects.
           </p>
           <ui-stack overlap spacing="-18px">
             <div style="width: 54px; height: 54px; background: #10b981; border-radius: 50%; border: 4px solid white; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);"></div>
-            <div style="width: 54px; height: 54px; background: #3b82f6; border-radius: 50%; border: 4px solid white; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);"></div>
-            <div style="width: 54px; height: 54px; background: #f59e0b; border-radius: 50%; border: 4px solid white; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);"></div>
-            <div style="width: 54px; height: 54px; background: #ef4444; border-radius: 50%; border: 4px solid white; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);"></div>
+            <div style="width: 54px; height: 54px; background: var(--accent-blue,#3b82f6); border-radius: 50%; border: 4px solid white; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);"></div>
+            <div style="width: 54px; height: 54px; background: var(--accent-yellow,#f59e0b); border-radius: 50%; border: 4px solid white; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);"></div>
+            <div style="width: 54px; height: 54px; background: var(--accent-red,#ef4444); border-radius: 50%; border: 4px solid white; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);"></div>
           </ui-stack>
         </div>
       </div>

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

@@ -7,10 +7,10 @@ export function initStepperDemo() {
     <p style="margin-top: 0; opacity: 0.7; font-size: 14px; margin-bottom: 24px;">Flexible step navigation with multiple styles, orientations, and progress modes.</p>
 
     <div class="demo-controls" style="margin: 20px 0; display: flex; gap: 8px; flex-wrap: wrap;">
-      <ui-button label="🎮 Playground"  onclick="showInteractiveStepper()" style="--ui-button-bg: #8b5cf6; --ui-button-text-color: white;" variant="outline"></ui-button>
-      <ui-button label="✨ Premium Styles"  style="--ui-button-border-color: #db2777; --ui-button-text-color: #db2777;" onclick="showPremiumThemesStepper()" variant="outline"></ui-button>
+      <ui-button label="🎮 Playground"  onclick="showInteractiveStepper()" style="--ui-button-bg: var(--accent-purple,#8b5cf6); --ui-button-text-color: white;" variant="outline"></ui-button>
+      <ui-button label="✨ Premium Styles"  style="--ui-button-border-color:var(--accent-pink,#db2777); --ui-button-text-color:var(--accent-pink,#db2777);" onclick="showPremiumThemesStepper()" variant="outline"></ui-button>
       <ui-button label="📑 Form Flow"  style="--ui-button-border-color: #0d9488; --ui-button-text-color: #0d9488;" onclick="showContentNavigationStepper()" variant="outline"></ui-button>
-      <ui-button label="⚡ 25-Step Stress Test"  style="--ui-button-border-color: #2563eb; --ui-button-text-color: #2563eb;" onclick="showDemo25Stepper()" variant="outline"></ui-button>
+      <ui-button label="⚡ 25-Step Stress Test"  style="--ui-button-border-color:var(--accent-blue,#2563eb); --ui-button-text-color:var(--accent-blue,#2563eb);" onclick="showDemo25Stepper()" variant="outline"></ui-button>
       <ui-button label="🏷️ Label Sides"  onclick="showLabelPositionStepper()" variant="outline"></ui-button>
       <ui-button label="📜 Compact Scroll"  onclick="showCompactScrollableStepper()" variant="outline"></ui-button>
       
@@ -35,12 +35,12 @@ export function initStepperDemo() {
     </div>
 
     <style>
-        .demo-controls .demo-btn { padding: 10px 18px; border-radius: 8px; border: 1px solid #e2e8f0; background: white; cursor: pointer; transition: all 0.2s; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
+        .demo-controls .demo-btn { padding: 10px 18px; border-radius: 8px; border:1px solid var(--border-default,#e2e8f0); background:var(--bg-primary,white); cursor: pointer; transition: all 0.2s; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
         .demo-btn.sm { padding: 6px 12px; font-size: 12px; border-radius: 6px; }
         .demo-btn.primary { background: #1677ff; color: white; border: none; }
         .demo-btn:hover { border-color: #1677ff; color: #1677ff; background: #f0f7ff; }
         .demo-btn.primary:hover { background: #4096ff; color: white; box-shadow: 0 4px 10px rgba(22, 119, 255, 0.2); }
-        .demo-select { width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 8px; background: white; font-size: 14px; }
+        .demo-select { width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 8px; background:var(--bg-primary,white); font-size: 14px; }
     </style>
 
     <div id="stepperDemoContainer" style="margin-top: 20px;"></div>
@@ -55,10 +55,10 @@ export function initStepperDemo() {
     const container = document.getElementById('stepperDemoContainer');
     if (!container) return;
     container.innerHTML = `
-      <div style="max-width: 900px; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+      <div style="max-width: 900px; padding: 20px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
         <h4>Basic Stepper</h4>
         <ui-stepper id="basicStepper" active-step="1" icon-library="lucide"></ui-stepper>
-        <div style="margin-top: 24px; padding: 20px; background: #f9fafb; border-radius: 8px; text-align: center;">
+        <div style="margin-top: 24px; padding: 20px; background:var(--bg-secondary,#f9fafb); border-radius: 8px; text-align: center;">
             <p id="basicStepContent">Current Step: Profile Details</p>
             <div style="display: flex; gap: 10px; justify-content: center; margin-top: 10px;">
                 <ui-button label="Previous" variant="outline" onclick="handleStep('basicStepper', 'prev')"></ui-button>
@@ -82,7 +82,7 @@ export function initStepperDemo() {
     const container = document.getElementById('stepperDemoContainer');
     if (!container) return;
     container.innerHTML = `
-      <div style="max-width: 900px; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+      <div style="max-width: 900px; padding: 20px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
         <h4>Progress Dot Mode</h4>
         <ui-stepper id="dotStepper" active-step="0" progress-dot="true" label-placement="vertical" icon-library="lucide"></ui-stepper>
       </div>
@@ -103,7 +103,7 @@ export function initStepperDemo() {
     const container = document.getElementById('stepperDemoContainer');
     if (!container) return;
     container.innerHTML = `
-      <div style="max-width: 900px; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+      <div style="max-width: 900px; padding: 20px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
         <h4>Navigation Style Stepper</h4>
         <p style="color: #6b7280; font-size: 13px; margin-bottom: 20px;">Ideal for page headers or multi-step form navigation</p>
         <ui-stepper id="navStepper" active-step="0" variant="navigation" icon-library="lucide"></ui-stepper>
@@ -123,7 +123,7 @@ export function initStepperDemo() {
     const container = document.getElementById('stepperDemoContainer');
     if (!container) return;
     container.innerHTML = `
-      <div style="max-width: 900px; padding: 24px; background: white; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);">
+      <div style="max-width: 900px; padding: 24px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);">
         <h4>Panel Style Steps</h4>
         <p style="color: #6b7280; font-size: 13px; margin-bottom: 20px;">Each step is a distinct card-like panel</p>
         <ui-stepper id="panelStepper" active-step="1" variant="panel" show-descriptions="true" icon-library="lucide"></ui-stepper>
@@ -143,7 +143,7 @@ export function initStepperDemo() {
     const container = document.getElementById('stepperDemoContainer');
     if (!container) return;
     container.innerHTML = `
-      <div style="max-width: 900px; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+      <div style="max-width: 900px; padding: 20px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
         <h4>Inline Stepper</h4>
         <p style="color: #6b7280; font-size: 13px; margin-bottom: 20px;">Compact inline variant for restricted spaces</p>
         <ui-stepper id="inlineStepper" active-step="1" variant="inline" icon-library="lucide"></ui-stepper>
@@ -163,7 +163,7 @@ export function initStepperDemo() {
     const container = document.getElementById('stepperDemoContainer');
     if (!container) return;
     container.innerHTML = `
-      <div style="max-width: 900px; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+      <div style="max-width: 900px; padding: 20px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
         <h4>Stepper with Progress Percent</h4>
         <p style="color: #6b7280; font-size: 13px; margin-bottom: 20px;">Show fine-grained progress on the active step icon</p>
         <ui-stepper id="percentStepper" active-step="1" icon-library="lucide"></ui-stepper>
@@ -197,7 +197,7 @@ export function initStepperDemo() {
     const container = document.getElementById('stepperDemoContainer');
     if (!container) return;
     container.innerHTML = `
-      <div style="max-width: 800px; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+      <div style="max-width: 800px; padding: 20px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
         <h4>Nested Steps (Vertical)</h4>
         <p style="color: #6b7280; font-size: 13px; margin-bottom: 20px;">Define hierarchical sub-tasks within main steps</p>
         <ui-stepper id="nestedStepper" orientation="vertical" active-step="1" show-descriptions="true" icon-library="lucide"></ui-stepper>
@@ -227,7 +227,7 @@ export function initStepperDemo() {
     const container = document.getElementById('stepperDemoContainer');
     if (!container) return;
     container.innerHTML = `
-      <div style="max-width: 900px; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+      <div style="max-width: 900px; padding: 20px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
         <h4>Custom Icons (Emoji, Images, SVG)</h4>
         <p style="color: #6b7280; font-size: 13px; margin-bottom: 20px;">Use custom icons, images, or inline SVG in step markers</p>
         <ui-stepper id="customIconStepper" active-step="1" show-descriptions="true" icon-library="lucide"></ui-stepper>
@@ -253,7 +253,7 @@ export function initStepperDemo() {
     const container = document.getElementById('stepperDemoContainer');
     if (!container) return;
     container.innerHTML = `
-      <div style="max-width: 600px; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+      <div style="max-width: 600px; padding: 20px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
         <h4>Vertical Stepper</h4>
         <ui-stepper id="verticalStepper" orientation="vertical" active-step="1" show-descriptions="true" icon-library="lucide"></ui-stepper>
       </div>
@@ -273,7 +273,7 @@ export function initStepperDemo() {
     const container = document.getElementById('stepperDemoContainer');
     if (!container) return;
     container.innerHTML = `
-      <div style="max-width: 900px; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+      <div style="max-width: 900px; padding: 20px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
         <h4>Error States</h4>
         <ui-stepper id="errorStepper" active-step="1" icon-library="lucide"></ui-stepper>
       </div>
@@ -292,7 +292,7 @@ export function initStepperDemo() {
     const container = document.getElementById('stepperDemoContainer');
     if (!container) return;
     container.innerHTML = `
-      <div style="max-width: 900px; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+      <div style="max-width: 900px; padding: 20px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
         <h4>Extra Statuses</h4>
         <p style="color: #6b7280; font-size: 13px; margin-bottom: 20px;">Support for Info, Warning, Waiting, and Disabled states</p>
         <ui-stepper id="extraStatesStepper" active-step="2" show-descriptions="true" icon-library="lucide"></ui-stepper>
@@ -314,7 +314,7 @@ export function initStepperDemo() {
     const container = document.getElementById('stepperDemoContainer');
     if (!container) return;
     container.innerHTML = `
-      <div style="max-width: 900px; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+      <div style="max-width: 900px; padding: 20px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
         <h4>Step Form Content</h4>
         <p style="color: #6b7280; font-size: 13px; margin-bottom: 20px;">Inject custom form content directly into steps using slots</p>
         
@@ -323,14 +323,14 @@ export function initStepperDemo() {
         </div>
 
         <ui-stepper id="contentStepper" orientation="vertical" active-step="0" icon-library="lucide">
-            <div slot="content-1" style="padding: 16px; background: #f9fafb; border-radius: 8px; border: 1px solid #e5e7eb;">
+            <div slot="content-1" style="padding: 16px; background:var(--bg-secondary,#f9fafb); border-radius: 8px; border:1px solid var(--border-default,#e5e7eb);">
                 <h5 style="margin-top: 0;">Personal Details</h5>
                 <ui-input placeholder="Full Name" style="width: 100%; margin-bottom: 10px;"></ui-input>
                 <ui-input type="email" placeholder="Email Address" style="width: 100%; margin-bottom: 10px;"></ui-input>
                 <ui-button label="Save & Next" color="primary" onclick="handleStep('contentStepper', 'next')"></ui-button>
             </div>
             
-            <div slot="content-2" style="padding: 16px; background: #f9fafb; border-radius: 8px; border: 1px solid #e5e7eb;">
+            <div slot="content-2" style="padding: 16px; background:var(--bg-secondary,#f9fafb); border-radius: 8px; border:1px solid var(--border-default,#e5e7eb);">
                  <h5 style="margin-top: 0;">Account Setup</h5>
                 <ui-checkbox label="Subscribe to newsletter" style="margin-bottom: 8px;"></ui-checkbox>
                 <ui-checkbox label="Enable notifications" checked style="margin-bottom: 8px;"></ui-checkbox>
@@ -369,7 +369,7 @@ window.showSnackStepper = function () {
   const container = document.getElementById('stepperDemoContainer');
   if (!container) return;
   container.innerHTML = `
-      <div style="max-width: 900px; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+      <div style="max-width: 900px; padding: 20px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
         <h4>Snake Layout (Snack Variant)</h4>
         <p style="color: #6b7280; font-size: 13px; margin-bottom: 20px;">Use the 'snack' variant along with horizontal orientation to display a multi-line wrapping progress layout with a global progress bar.</p>
         <ui-stepper id="snackStepper" active-step="6" variant="snack" orientation="horizontal" show-progress="true" steps-per-page="5" icon-library="lucide"></ui-stepper>
@@ -393,32 +393,32 @@ window.showLabelPositionStepper = function () {
   const container = document.getElementById('stepperDemoContainer');
   if (!container) return;
   container.innerHTML = `
-      <div style="max-width: 1100px; padding: 30px; background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+      <div style="max-width: 1100px; padding: 30px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
         <h3 style="margin-top: 0;">🏷️ Label Positions</h3>
-        <p style="color: #64748b; font-size: 14px; margin-bottom: 30px;">Labels can be positioned relative to the icon: Right (default), Bottom, Left, or Top.</p>
+        <p style="color:var(--text-secondary,#64748b); font-size: 14px; margin-bottom: 30px;">Labels can be positioned relative to the icon: Right (default), Bottom, Left, or Top.</p>
         
         <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px;">
            <div>
               <h5 style="margin-bottom: 20px;">1. Default (Right)</h5>
-              <div style="padding: 20px; border: 1px solid #f1f5f9; border-radius: 8px;">
+              <div style="padding: 20px; border:1px solid var(--border-subtle,#f1f5f9); border-radius: 8px;">
                 <ui-stepper id="labelRight" label-position="right"></ui-stepper>
               </div>
            </div>
            <div>
               <h5 style="margin-bottom: 20px;">2. Bottom (Vertical Layout)</h5>
-              <div style="padding: 20px; border: 1px solid #f1f5f9; border-radius: 8px;">
+              <div style="padding: 20px; border:1px solid var(--border-subtle,#f1f5f9); border-radius: 8px;">
                 <ui-stepper id="labelBottom" label-position="bottom"></ui-stepper>
               </div>
            </div>
            <div>
               <h5 style="margin-bottom: 20px;">3. Left Position</h5>
-              <div style="padding: 20px; border: 1px solid #f1f5f9; border-radius: 8px;">
+              <div style="padding: 20px; border:1px solid var(--border-subtle,#f1f5f9); border-radius: 8px;">
                 <ui-stepper id="labelLeft" label-position="left"></ui-stepper>
               </div>
            </div>
            <div>
               <h5 style="margin-bottom: 20px;">4. Top Position</h5>
-              <div style="padding: 20px; border: 1px solid #f1f5f9; border-radius: 8px;">
+              <div style="padding: 20px; border:1px solid var(--border-subtle,#f1f5f9); border-radius: 8px;">
                 <ui-stepper id="labelTop" label-position="top"></ui-stepper>
               </div>
            </div>
@@ -442,21 +442,21 @@ window.showContentNavigationStepper = function () {
   const container = document.getElementById('stepperDemoContainer');
   if (!container) return;
   container.innerHTML = `
-      <div style="max-width: 900px; padding: 24px; background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+      <div style="max-width: 900px; padding: 24px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
         <h3 style="margin-top: 0;">📑 Content Area & Navigation</h3>
-        <p style="color: #64748b; font-size: 14px; margin-bottom: 24px;">Multi-step form with complex nested content and custom navigation buttons.</p>
+        <p style="color:var(--text-secondary,#64748b); font-size: 14px; margin-bottom: 24px;">Multi-step form with complex nested content and custom navigation buttons.</p>
         
         <ui-stepper id="navFlowStepper" orientation="horizontal" active-step="0" show-descriptions="true">
             <div slot="content-1" style="padding: 24px; background: #fafafa; border-radius: 8px; border: 1px dashed #e2e8f0; margin-top: 16px;">
                 <h4 style="margin-top: 0;">Step 1: Account Type</h4>
                 <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0;">
-                    <div style="padding: 16px; border: 2px solid #10b981; border-radius: 8px; background: #eff6ff; cursor: pointer;">
+                    <div style="padding: 16px; border: 2px solid #10b981; border-radius: 8px; background:var(--accent-blue-soft,#eff6ff); cursor: pointer;">
                         <h5 style="margin: 0;">Personal</h5>
-                        <p style="font-size: 12px; color: #64748b;">Free for individuals</p>
+                        <p style="font-size: 12px; color:var(--text-secondary,#64748b);">Free for individuals</p>
                     </div>
-                    <div style="padding: 16px; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer;">
+                    <div style="padding: 16px; border:1px solid var(--border-default,#e2e8f0); border-radius: 8px; cursor: pointer;">
                         <h5 style="margin: 0;">Business</h5>
-                        <p style="font-size: 12px; color: #64748b;">$25/mo for teams</p>
+                        <p style="font-size: 12px; color:var(--text-secondary,#64748b);">$25/mo for teams</p>
                     </div>
                 </div>
                 <div style="display: flex; justify-content: flex-end; gap: 10px;">
@@ -476,13 +476,13 @@ window.showContentNavigationStepper = function () {
                 </div>
             </div>
 
-            <div slot="content-3" style="padding: 40px; text-align: center; background: #fdf2f8; border-radius: 8px; border: 1px solid #fbcfe8; margin-top: 16px;">
+            <div slot="content-3" style="padding: 40px; text-align: center; background:var(--accent-pink-soft,#fdf2f8); border-radius: 8px; border: 1px solid #fbcfe8; margin-top: 16px;">
                 <div style="font-size: 48px; margin-bottom: 16px;">🎉</div>
                 <h3>Ready to Launch!</h3>
-                <p style="color: #be185d;">Your profile is all set up. Click finish to create your account.</p>
+                <p style="color:var(--accent-pink,#be185d);">Your profile is all set up. Click finish to create your account.</p>
                 <div style="display: flex; justify-content: center; gap: 10px; margin-top: 30px;">
                     <ui-button label="Edit Profile" variant="outline" onclick="document.getElementById('navFlowStepper').prev()"></ui-button>
-                    <ui-button label="Finish Setup" color="danger" style="--ui-button-bg: #db2777;" onclick="alert('Account Created!')"></ui-button>
+                    <ui-button label="Finish Setup" color="danger" style="--ui-button-bg: var(--accent-pink,#db2777);" onclick="alert('Account Created!')"></ui-button>
                 </div>
             </div>
         </ui-stepper>
@@ -502,9 +502,9 @@ window.showCompactScrollableStepper = function () {
   const container = document.getElementById('stepperDemoContainer');
   if (!container) return;
   container.innerHTML = `
-      <div style="max-width: 900px; padding: 24px; background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+      <div style="max-width: 900px; padding: 24px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
         <h3 style="margin-top: 0;">📜 Compact + Scrollable (20 Steps)</h3>
-        <p style="color: #64748b; font-size: 14px; margin-bottom: 24px;">Perfect for many steps in tight spaces. Use horizontal scroll with compact markers.</p>
+        <p style="color:var(--text-secondary,#64748b); font-size: 14px; margin-bottom: 24px;">Perfect for many steps in tight spaces. Use horizontal scroll with compact markers.</p>
         
         <div style="margin-bottom: 20px; display: flex; align-items: flex-end; gap: 20px;">
             <div style="width: 100px;">
@@ -514,7 +514,7 @@ window.showCompactScrollableStepper = function () {
             <ui-button label="Next" color="primary" onclick="document.getElementById('scrollStepper').next()"></ui-button>
         </div>
 
-        <div style="padding: 20px; background: #f8fafc; border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0;">
+        <div style="padding: 20px; background:var(--bg-secondary,#f8fafc); border-radius: 12px; overflow: hidden; border:1px solid var(--border-default,#e2e8f0);">
             <ui-stepper id="scrollStepper" active-step="0" compact="true" scrollable="true" orientation="horizontal"></ui-stepper>
         </div>
       </div>
@@ -532,14 +532,14 @@ window.showPremiumThemesStepper = function () {
   const container = document.getElementById('stepperDemoContainer');
   if (!container) return;
   container.innerHTML = `
-      <div style="max-width: 900px; padding: 24px; background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+      <div style="max-width: 900px; padding: 24px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
         <h3 style="margin-top: 0;">✨ Premium Themes & Variants</h3>
-        <p style="color: #64748b; font-size: 14px; margin-bottom: 30px;">Mix and match variants, shapes, and colors for a premium look.</p>
+        <p style="color:var(--text-secondary,#64748b); font-size: 14px; margin-bottom: 30px;">Mix and match variants, shapes, and colors for a premium look.</p>
         
         <div style="display: flex; flex-direction: column; gap: 40px;">
             <div>
                 <h5 style="margin-bottom: 12px; color: #52c41a;">🟢 Square-Active Shape (Requested Highlight)</h5>
-                <p style="font-size: 13px; color: #64748b; margin-bottom: 16px;">Only the active step has a premium square border, matching the customized highlight requirements.</p>
+                <p style="font-size: 13px; color:var(--text-secondary,#64748b); margin-bottom: 16px;">Only the active step has a premium square border, matching the customized highlight requirements.</p>
                 <ui-stepper id="theme1" active-step="0" step-shape="square-active" label-position="bottom" icon-library="lucide"></ui-stepper>
             </div>
             
@@ -549,12 +549,12 @@ window.showPremiumThemesStepper = function () {
             </div>
             
             <div>
-                <h5 style="margin-bottom: 12px; color: #b91c1c;">🔺 Minimal Error State with Progress Dot</h5>
+                <h5 style="margin-bottom: 12px; color:var(--accent-red,#b91c1c);">🔺 Minimal Error State with Progress Dot</h5>
                 <ui-stepper id="theme3" active-step="2" progress-dot="true" variant="minimal" color-scheme="danger"></ui-stepper>
             </div>
 
             <div>
-                 <h5 style="margin-bottom: 12px; color: #1e293b;">⬛ Solid Dark Filled Variant</h5>
+                 <h5 style="margin-bottom: 12px; color:var(--text-primary,#1e293b);">⬛ Solid Dark Filled Variant</h5>
                  <div style="background: #1e293b; padding: 30px; border-radius: 12px;">
                     <ui-stepper id="theme4" active-step="1" variant="filled" icon-library="lucide"></ui-stepper>
                  </div>
@@ -586,9 +586,9 @@ window.showDemo25Stepper = function () {
   const container = document.getElementById('stepperDemoContainer');
   if (!container) return;
   container.innerHTML = `
-      <div style="max-width: 1000px; padding: 24px; background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+      <div style="max-width: 1000px; padding: 24px; background:var(--bg-primary,white); border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
         <h3 style="margin-top: 0;">🎮 25-Step Stress Test Demo</h3>
-        <p style="color: #64748b; font-size: 14px; margin-bottom: 24px;">Testing the component with many steps using snack variant and scrollable layouts.</p>
+        <p style="color:var(--text-secondary,#64748b); font-size: 14px; margin-bottom: 24px;">Testing the component with many steps using snack variant and scrollable layouts.</p>
         
         <div style="display: flex; gap: 10px; margin-bottom: 30px;">
             <ui-button label="Previous Step" variant="outline" onclick="handle25Step('prev')"></ui-button>
@@ -602,7 +602,7 @@ window.showDemo25Stepper = function () {
 
         <div style="margin-top: 40px;">
             <p style="font-weight: 600; margin-bottom: 15px;">2. Premium Square-Active Style (Scrollable):</p>
-            <div style="padding: 20px; background: #fafafa; border-radius: 8px; border: 1px solid #e2e8f0;">
+            <div style="padding: 20px; background: #fafafa; border-radius: 8px; border:1px solid var(--border-default,#e2e8f0);">
                 <ui-stepper id="stressNormal" active-step="0" scrollable="true" step-shape="square-active" icon-library="lucide"></ui-stepper>
             </div>
         </div>
@@ -640,7 +640,7 @@ window.showInteractiveStepper = function () {
   if (!container) return;
 
   container.innerHTML = `
-    <div style="background-color: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
+    <div style="background-color:var(--bg-primary,white); border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);">
       <div style="display: flex; gap: 30px; flex-wrap: wrap;">
         <div style="flex: 1; min-width: 280px;">
           <h3 style="margin-top: 0;">🎮 Interactive Playground</h3>
@@ -678,7 +678,7 @@ window.showInteractiveStepper = function () {
             </div>
           </div>
         </div>
-        <div style="flex: 2; min-width: 400px; background-color: #f9fafb; padding: 40px; border-radius: 12px; border: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center;">
+        <div style="flex: 2; min-width: 400px; background-color: #f9fafb; padding: 40px; border-radius: 12px; border:1px solid var(--border-default,#e5e7eb); display: flex; align-items: center; justify-content: center;">
           <ui-stepper id="interactiveStepper" style="width: 100%;" icon-library="lucide"></ui-stepper>
         </div>
       </div>