atomicuilibrary 0.1.0 → 0.1.3

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

@@ -18,6 +18,7 @@ export function initRadioDemo() {
       <ui-button label="🎬 Staggered Reveal"  onclick="showRadioRevealAnimations()" variant="outline"></ui-button>
       <ui-button label="📖 Contextual Layouts"  onclick="showRadioContextual()" variant="outline"></ui-button>
       <ui-button label="States"  onclick="showRadioStates()" variant="outline"></ui-button>
+      <ui-button label="🃏 Variants" onclick="showRadioVariants()" variant="outline"></ui-button>
     </div>
 
     <div id="radioDemoContainer" style="margin-top: 20px;"></div>
@@ -30,7 +31,7 @@ export function initRadioDemo() {
     container.innerHTML = `
       <div class="demo-block reveal-fade-in">
         <h3 class="specimen-title">🎮 Interactive Playground</h3>
-        <div class="playground-settings" style="background: rgba(var(--primary-rgb, 139, 92, 246), 0.03); padding: 24px; border-radius: 16px; border: 1px solid rgba(0,0,0,0.05); margin-bottom: 24px;">
+        <div class="playground-settings" style="padding: 24px; border-radius: 16px; margin-bottom: 24px;">
           <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px;">
             <div class="form-group">
                <ui-input label="Label Text" id="radLabel" value="Tactical Priority" variant="outline" size="md"></ui-input>
@@ -87,7 +88,7 @@ export function initRadioDemo() {
           </div>
         </div>
 
-        <div class="playground-preview" style="padding: 60px; background: var(--bg-page, white); border: 1px dashed #e2e8f0; border-radius: 24px; display: flex; justify-content: center; min-height: 200px; position: relative; overflow: hidden;">
+        <div class="playground-preview" style="padding: 60px; min-height: 200px; position: relative; overflow: hidden;">
           <div id="radInteractivePreview"></div>
         </div>
 
@@ -170,7 +171,7 @@ export function initRadioDemo() {
         <p class="specimen-description">High-end filtering for rapid selection in dense data environments.</p>
         
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 40px;">
-           <div style="padding: 32px; background: white; border: 1px solid #f1f5f9; border-radius: 24px;">
+           <div style="padding: 32px; background: var(--bg-primary, white); border:1px solid var(--border-subtle,#f1f5f9); border-radius: 24px;">
               <h4 style="margin: 0 0 16px 0; font-size: 13px; opacity: 0.5;">Searchable Radio Cluster</h4>
               <ui-radio-group 
                 id="supremeRadioGroup"
@@ -219,8 +220,8 @@ export function initRadioDemo() {
            <div style="padding: 24px; background: rgba(var(--primary-rgb, 139, 92, 246), 0.03); border-radius: 16px;">
               <h4 style="margin: 0 0 16px 0; font-size: 13px; opacity: 0.5;">Visual Identity (Images)</h4>
               <ui-radio-group value="user" size="md">
-                 <ui-radio label="Profile Authenticated" custom-image="https://cdn-icons-png.flaticon.com/512/7641/7641727.png" color="info" value="user" checked haptic size="md"></ui-radio>
-                 <ui-radio label="Global Node" custom-image="https://cdn-icons-png.flaticon.com/512/2991/2991148.png" color="primary" value="global" size="md"></ui-radio>
+                 <ui-radio label="Profile Authenticated" custom-image="/build/assets/images/logo.png" color="info" value="user" checked haptic size="md"></ui-radio>
+                 <ui-radio label="Global Node" custom-image="/build/assets/images/logo.png" color="primary" value="global" size="md"></ui-radio>
               </ui-radio-group>
            </div>
         </div>
@@ -282,7 +283,7 @@ export function initRadioDemo() {
         <p class="specimen-description">High-fidelity radio archetypes for exclusive state management.</p>
         
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px;">
-           <div style="padding: 32px; background: #0f172a; border-radius: 20px; color: white; --label-color: white; --label-subtitle-color: rgba(255,255,255,0.7); --text-primary: white; --text-secondary: rgba(255,255,255,0.7);">
+           <div style="padding: 32px; background: var(--bg-tertiary, #f1f5f9); border-radius: 20px; color: var(--text-primary); border: 1px solid var(--border-default);">
               <h4 style="margin: 0 0 20px 0; font-size: 14px; opacity: 0.6; text-transform: uppercase;">Glassmorphism</h4>
               <ui-radio 
                 label="Frosted Sphere" 
@@ -292,12 +293,12 @@ export function initRadioDemo() {
                 glow 
                 checked>
               </ui-radio>
-              <div style="margin-top: 16px; padding: 12px; background: rgba(255,255,255,0.05); border-radius: 8px; font-size: 12px;">
+              <div style="margin-top: 16px; padding: 12px; background: var(--bg-secondary, rgba(0,0,0,0.04)); border-radius: 8px; font-size: 12px;">
                  Atmospheric glow effects transition smoothly between states.
               </div>
            </div>
 
-           <div style="padding: 32px; background: #f8fafc; border-radius: 20px; border: 1px solid #e2e8f0;">
+           <div style="padding: 32px; background: var(--bg-secondary, #f8fafc); border-radius: 20px; border:1px solid var(--border-default,#e2e8f0);">
               <h4 style="margin: 0 0 20px 0; font-size: 14px; opacity: 0.6; text-transform: uppercase;">Raised Relief</h4>
               <ui-radio 
                 label="Physical Toggle" 
@@ -307,7 +308,7 @@ export function initRadioDemo() {
                 glow 
                 checked>
               </ui-radio>
-              <div style="margin-top: 16px; padding: 12px; background: white; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 12px;">
+              <div style="margin-top: 16px; padding: 12px; background: var(--bg-primary, white); border:1px solid var(--border-default,#e2e8f0); border-radius: 8px; font-size: 12px;">
                  Tactile sensation reinforced by liquid spring physics.
               </div>
            </div>
@@ -365,7 +366,7 @@ export function initRadioDemo() {
         <h3 class="specimen-title">📖 Advanced Contextual Layouts</h3>
         
         <div style="max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px;">
-           <div style="padding: 24px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff;">
+           <div style="padding: 24px; border:1px solid var(--border-default,#e2e8f0); border-radius: 16px; background: var(--bg-primary, #fff);">
               <h4 style="margin: 0 0 16px 0; font-size: 13px; opacity: 0.5;">Side-Metadata (Dense Mode)</h4>
               <ui-radio-group value="stable">
                  <ui-radio label="Stable Release" description="• v1.0.4" description-position="side" color="success" checked haptic value="stable"></ui-radio>
@@ -374,7 +375,7 @@ export function initRadioDemo() {
               </ui-radio-group>
            </div>
 
-           <div style="padding: 24px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff;">
+           <div style="padding: 24px; border:1px solid var(--border-default,#e2e8f0); border-radius: 16px; background: var(--bg-primary, #fff);">
               <h4 style="margin: 0 0 16px 0; font-size: 13px; opacity: 0.5;">Premium Cards</h4>
               <ui-radio-group value="card1">
                  <ui-radio value="card1" label="Hardware Isolation" description="Dedicated silicon-level security boundary" variant="card" color="primary"></ui-radio>
@@ -391,7 +392,7 @@ export function initRadioDemo() {
     container.innerHTML = `
       <div class="demo-block reveal-slide-up">
         <h3 class="specimen-title">Standard Interactive States</h3>
-        <div style="display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding: 20px; background: #f8fafc; border-radius: 12px;">
+        <div style="display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding: 20px; background: var(--bg-secondary, #f8fafc); border-radius: 12px;">
           <ui-radio label="Default" size="md"></ui-radio>
           <ui-radio label="Checked" checked size="md"></ui-radio>
           <ui-radio label="Disabled" disabled size="md"></ui-radio>
@@ -409,5 +410,65 @@ export function initRadioDemo() {
     `;
   };
 
+  window.showRadioVariants = function () {
+    const container = document.getElementById('radioDemoContainer');
+    if (!container) return;
+    container.innerHTML = `
+      <div style="display: flex; flex-direction: column; gap: 40px;">
+
+        <div class="demo-block">
+          <h3 class="specimen-title">🃏 All Variants Side-by-Side</h3>
+          <p class="specimen-description">Every built-in <code>variant</code> shown in default and checked states.</p>
+          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px;">
+            ${['default','bordered','underlined','card','glass','raised'].map(v => `
+            <div style="padding: 20px; background: ${v === 'glass' ? '#1e293b' : 'var(--bg-secondary,#f8fafc)'}; border-radius: 12px; border: 1px solid var(--border-default,#e2e8f0);" ${v === 'glass' ? 'class="dark"' : ''}>
+              <p style="font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: ${v === 'glass' ? 'rgba(255,255,255,0.4)' : 'var(--text-secondary,#64748b)'}; margin: 0 0 12px;">${v}</p>
+              <div style="display: flex; flex-direction: column; gap: 10px;">
+                <ui-radio label="Unchecked" variant="${v}" color="primary"></ui-radio>
+                <ui-radio label="Checked" variant="${v}" color="primary" checked></ui-radio>
+              </div>
+            </div>`).join('')}
+          </div>
+        </div>
+
+        <div class="demo-block">
+          <h3 class="specimen-title">🔘 Button Mode (<code>is-button</code>)</h3>
+          <p class="specimen-description">Renders radios as a segmented button group — ideal for settings panels and toolbars.</p>
+          <div style="display: flex; flex-direction: column; gap: 20px; padding: 24px; background: var(--bg-secondary,#f8fafc); border-radius: 12px;">
+            <div>
+              <p style="font-size: 11px; font-weight: 700; color: var(--text-secondary,#64748b); margin: 0 0 10px;">Horizontal button group</p>
+              <div style="display: flex; gap: 0;">
+                <ui-radio name="view" value="grid" label="Grid" is-button checked></ui-radio>
+                <ui-radio name="view" value="list" label="List" is-button></ui-radio>
+                <ui-radio name="view" value="card" label="Card" is-button></ui-radio>
+              </div>
+            </div>
+            <div>
+              <p style="font-size: 11px; font-weight: 700; color: var(--text-secondary,#64748b); margin: 0 0 10px;">With icons</p>
+              <div style="display: flex; gap: 0;">
+                <ui-radio name="theme" value="light" label="Light" is-button icon="sun" checked color="warning"></ui-radio>
+                <ui-radio name="theme" value="dark" label="Dark" is-button icon="moon" color="warning"></ui-radio>
+                <ui-radio name="theme" value="auto" label="Auto" is-button icon="contrast" color="warning"></ui-radio>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="demo-block">
+          <h3 class="specimen-title">🏷️ Label Positions</h3>
+          <p class="specimen-description">The <code>label-position</code> prop controls where the label appears relative to the radio dot.</p>
+          <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 24px; background: var(--bg-secondary,#f8fafc); border-radius: 12px;">
+            ${['right','left','top','bottom'].map(pos => `
+            <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+              <span style="font-size: 10px; font-weight: 700; color: var(--text-secondary,#64748b); font-family: monospace;">${pos}</span>
+              <ui-radio label="Option" label-position="${pos}" checked color="primary"></ui-radio>
+            </div>`).join('')}
+          </div>
+        </div>
+
+      </div>
+    `;
+  };
+
   setTimeout(() => window.showInteractiveRadio(), 50);
 }

package/dist/collection/assets/js/demos/range-slider-demo.js

@@ -141,7 +141,7 @@ export function initRangeSliderDemo() {
             end-value="800"
             display-format="$\${value}"
             color="#10b981"></ui-range-slider>
-          <div id="rangeValue" style="margin-top: 12px; padding: 10px; background: #dcfce7; border-radius: 6px; text-align: center;">
+          <div id="rangeValue" style="margin-top: 12px; padding: 10px; background:var(--accent-green-soft,#dcfce7); border-radius: 6px; text-align: center;">
             Range: <strong>$200 - $800</strong>
           </div>
         </div>
@@ -235,7 +235,7 @@ export function initRangeSliderDemo() {
               .map(
                 s => `
               <div style="display: flex; align-items: center; gap: 16px;">
-                <span style="width: 80px; font-size: 11px; font-weight: 800; color: #64748b; text-transform: uppercase;">${s}</span>
+                <span style="width: 80px; font-size: 11px; font-weight: 800; color:var(--text-secondary,#64748b); text-transform: uppercase;">${s}</span>
                 <ui-range-slider size="${s}" value="${Math.floor(Math.random() * 100)}" style="flex: 1;"></ui-range-slider>
               </div>
             `,
@@ -261,19 +261,19 @@ export function initRangeSliderDemo() {
           <ui-range-slider value="70" color="#10b981"></ui-range-slider>
         </div>
         <div>
-          <h4 style="color: #f59e0b;">Orange</h4>
+          <h4 style="color:var(--accent-yellow,#f59e0b);">Orange</h4>
           <ui-range-slider value="50" color="#f59e0b"></ui-range-slider>
         </div>
         <div>
-          <h4 style="color: #ef4444;">Red</h4>
+          <h4 style="color:var(--accent-red,#ef4444);">Red</h4>
           <ui-range-slider value="80" color="#ef4444"></ui-range-slider>
         </div>
         <div>
-          <h4 style="color: #8b5cf6;">Purple</h4>
+          <h4 style="color:var(--accent-purple,#8b5cf6);">Purple</h4>
           <ui-range-slider value="45" color="#8b5cf6"></ui-range-slider>
         </div>
         <div>
-          <h4 style="color: #ec4899;">Pink</h4>
+          <h4 style="color:var(--accent-pink,#ec4899);">Pink</h4>
           <ui-range-slider value="65" color="#ec4899"></ui-range-slider>
         </div>
         <div>
@@ -363,7 +363,7 @@ export function initRangeSliderDemo() {
               color="#10b981"
               start-icon="🔇"
               end-icon="🔊"></ui-range-slider>
-            <div id="volumeValue" style="padding: 8px 16px; background: #dbeafe; border-radius: 6px; font-size: 14px;">
+            <div id="volumeValue" style="padding: 8px 16px; background:var(--accent-blue-soft,#dbeafe); border-radius: 6px; font-size: 14px;">
               <strong>70%</strong>
             </div>
           </div>
@@ -379,7 +379,7 @@ export function initRangeSliderDemo() {
               color="#f59e0b"
               start-icon="🌙"
               end-icon="☀️"></ui-range-slider>
-            <div id="brightnessValue" style="padding: 8px 16px; background: #fef3c7; border-radius: 6px; font-size: 14px;">
+            <div id="brightnessValue" style="padding: 8px 16px; background:var(--accent-yellow-soft,#fef3c7); border-radius: 6px; font-size: 14px;">
               <strong>60%</strong>
             </div>
           </div>
@@ -395,7 +395,7 @@ export function initRangeSliderDemo() {
               start-value="30"
               end-value="70"
               color="#ef4444"></ui-range-slider>
-            <div id="tempValue" style="padding: 8px 16px; background: #fee2e2; border-radius: 6px; font-size: 14px;">
+            <div id="tempValue" style="padding: 8px 16px; background:var(--accent-red-soft,#fee2e2); border-radius: 6px; font-size: 14px;">
               <strong>30-70°C</strong>
             </div>
           </div>
@@ -411,7 +411,7 @@ export function initRangeSliderDemo() {
               step="1"
               show-marks="true"
               color="#8b5cf6"></ui-range-slider>
-            <div id="priorityValue" style="padding: 8px 16px; background: #ede9fe; border-radius: 6px; font-size: 14px;">
+            <div id="priorityValue" style="padding: 8px 16px; background:var(--accent-purple-soft,#ede9fe); border-radius: 6px; font-size: 14px;">
               <strong>md</strong>
             </div>
           </div>
@@ -428,13 +428,13 @@ export function initRangeSliderDemo() {
               size="md"
               start-icon="🐢"
               end-icon="🚀"></ui-range-slider>
-            <div id="speedValue" style="padding: 8px 16px; background: #d1fae5; border-radius: 6px; font-size: 14px;">
+            <div id="speedValue" style="padding: 8px 16px; background:var(--accent-green-soft,#d1fae5); border-radius: 6px; font-size: 14px;">
               <strong>45%</strong>
             </div>
           </div>
         </div>
         
-        <div style="margin-top: 30px; padding: 20px; background-color: white; border-radius: 8px; border: 1px solid #e5e7eb;">
+        <div style="margin-top: 30px; padding: 20px; background-color:var(--bg-primary,white); border-radius: 8px; border:1px solid var(--border-default,#e5e7eb);">
           <h4>Different Sizes</h4>
           <div style="display: flex; gap: 40px; align-items: flex-end; justify-content: center; padding: 20px;">
             <div style="display: flex; flex-direction: column; align-items: center; gap: 12px;">
@@ -529,7 +529,7 @@ export function initRangeSliderDemo() {
         <h3>🎮 Interactive Playground</h3>
         <p style="color: #6b7280; margin-bottom: 16px;">Customize the slider properties and see changes in real-time!</p>
         
-        <div style="background-color: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #e5e7eb;">
+        <div style="background-color:var(--bg-primary,white); padding: 20px; border-radius: 8px; margin-bottom: 20px; border:1px solid var(--border-default,#e5e7eb);">
           <h4 style="margin: 0 0 16px;">Settings</h4>
           <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
             <label style="display: flex; flex-direction: column; gap: 4px;">
@@ -677,9 +677,9 @@ export function initRangeSliderDemo() {
           </div>
         </div>
         
-        <div style="padding: 20px; background-color: #f9fafb; border-radius: 8px; border: 1px solid #e5e7eb;">
+        <div style="padding: 20px; background-color: #f9fafb; border-radius: 8px; border:1px solid var(--border-default,#e5e7eb);">
           <div id="interactiveSliderContainer" style="min-height: 100px; display: flex; align-items: center; justify-content: center;"></div>
-          <div id="sliderCurrentValue" style="margin-top: 16px; padding: 12px; background-color: #dbeafe; border-radius: 6px; text-align: center; font-family: monospace;">
+          <div id="sliderCurrentValue" style="margin-top: 16px; padding: 12px; background-color: var(--accent-blue-soft,#dbeafe); border-radius: 6px; text-align: center; font-family: monospace;">
             Value: <strong>50</strong>
           </div>
           
@@ -885,7 +885,7 @@ export function initRangeSliderDemo() {
             value="2"
             show-marks="true"
             color="#10b981"></ui-range-slider>
-          <div id="sizeValue" style="margin-top: 12px; padding: 10px; background: #dbeafe; border-radius: 6px; text-align: center;">
+          <div id="sizeValue" style="margin-top: 12px; padding: 10px; background:var(--accent-blue-soft,#dbeafe); border-radius: 6px; text-align: center;">
             Size: <strong>M</strong>
           </div>
         </div>
@@ -899,7 +899,7 @@ export function initRangeSliderDemo() {
             value="2"
             show-marks="true"
             color="#ef4444"></ui-range-slider>
-          <div id="priorityValue" style="margin-top: 12px; padding: 10px; background: #fee2e2; border-radius: 6px; text-align: center;">
+          <div id="priorityValue" style="margin-top: 12px; padding: 10px; background:var(--accent-red-soft,#fee2e2); border-radius: 6px; text-align: center;">
             Priority: <strong>md</strong>
           </div>
         </div>
@@ -959,19 +959,19 @@ export function initRangeSliderDemo() {
           <ui-range-slider value="70" color="#10b981"></ui-range-slider>
         </div>
         <div>
-          <h4 style="color: #f59e0b;">Orange</h4>
+          <h4 style="color:var(--accent-yellow,#f59e0b);">Orange</h4>
           <ui-range-slider value="50" color="#f59e0b"></ui-range-slider>
         </div>
         <div>
-          <h4 style="color: #ef4444;">Red</h4>
+          <h4 style="color:var(--accent-red,#ef4444);">Red</h4>
           <ui-range-slider value="80" color="#ef4444"></ui-range-slider>
         </div>
         <div>
-          <h4 style="color: #8b5cf6;">Purple</h4>
+          <h4 style="color:var(--accent-purple,#8b5cf6);">Purple</h4>
           <ui-range-slider value="45" color="#8b5cf6"></ui-range-slider>
         </div>
         <div>
-          <h4 style="color: #ec4899;">Pink</h4>
+          <h4 style="color:var(--accent-pink,#ec4899);">Pink</h4>
           <ui-range-slider value="65" color="#ec4899"></ui-range-slider>
         </div>
         <div>
@@ -1082,8 +1082,8 @@ export function initRangeSliderDemo() {
           
           <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 32px;">
             <!-- Detailed Single -->
-            <div style="background: white; padding: 32px; border-radius: 28px; border: 1px solid #e2e8f0; box-shadow: 0 10px 40px rgba(0,0,0,0.04);">
-              <h4 style="margin: 0 0 24px 0; color: #1e293b; font-size: 18px; font-weight: 800;">Atmospheric Control</h4>
+            <div style="background:var(--bg-primary,white); padding: 32px; border-radius: 28px; border:1px solid var(--border-default,#e2e8f0); box-shadow: 0 10px 40px rgba(0,0,0,0.04);">
+              <h4 style="margin: 0 0 24px 0; color:var(--text-primary,#1e293b); font-size: 18px; font-weight: 800;">Atmospheric Control</h4>
               <ui-range-slider variant="detailed" label="OXYGEN LEVEL" value="82" suffix-text="%" gradient-track="true" show-tooltip="true" tooltip-always-visible="true"></ui-range-slider>
               <div style="margin-top: 40px;">
                 <ui-range-slider variant="detailed" label="THERMAL INTENSITY" value="45" suffix-text="°C" color="#f43f5e" gradient-track="true" show-tooltip="true" tooltip-always-visible="true"></ui-range-slider>
@@ -1091,16 +1091,16 @@ export function initRangeSliderDemo() {
             </div>
 
             <!-- Detailed Range -->
-            <div style="background: white; padding: 32px; border-radius: 28px; border: 1px solid #e2e8f0; box-shadow: 0 10px 40px rgba(0,0,0,0.04);">
-              <h4 style="margin: 0 0 24px 0; color: #1e293b; font-size: 18px; font-weight: 800;">Bandwidth Allocation</h4>
+            <div style="background:var(--bg-primary,white); padding: 32px; border-radius: 28px; border:1px solid var(--border-default,#e2e8f0); box-shadow: 0 10px 40px rgba(0,0,0,0.04);">
+              <h4 style="margin: 0 0 24px 0; color:var(--text-primary,#1e293b); font-size: 18px; font-weight: 800;">Bandwidth Allocation</h4>
               <ui-range-slider variant="detailed" range="true" label="DATA PIPELINE" start-value="250" end-value="750" min="0" max="1000" suffix-text="MB" gradient-track="true" show-tooltip="true" tooltip-always-visible="true" show-marks="true" marks='[{"value":0},{"value":250},{"value":500},{"value":750},{"value":1000}]'></ui-range-slider>
             </div>
 
             <!-- Glass Slider -->
-            <div style="background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); padding: 32px; border-radius: 28px; box-shadow: 0 20px 50px rgba(0,0,0,0.2);">
-              <h4 style="margin: 0 0 24px 0; color: white; font-size: 18px; font-weight: 800;">Cinematic Glass</h4>
+              <div style="background:var(--bg-primary,white); padding: 32px; border-radius: 28px; border:1px solid var(--border-default,#e2e8f0); box-shadow: 0 10px 40px rgba(0,0,0,0.04);">
+              <h4 style="margin: 0 0 24px 0; color:var(--text-primary,#1e293b); font-size: 18px; font-weight: 800;">Cinematic Glass</h4>
               <ui-range-slider variant="glass" label="NEBULA DENSITY" value="65" suffix-text="μ" show-tooltip="true" tooltip-always-visible="true" size="md"></ui-range-slider>
-              <p style="margin-top: 20px; font-size: 12px; color: #94a3b8;">Frost-grade backdrop filter with atomic saturation.</p>
+              <p style="margin-top: 20px; font-size: 12px; color:var(--text-secondary,#64748b);">Frost-grade backdrop filter with atomic saturation.</p>
             </div>
           </div>
         </div>
@@ -1171,8 +1171,8 @@ export function initRangeSliderDemo() {
       if (!container) return;
       container.innerHTML = `
         <div style="max-width: 550px; margin: 0 auto;">
-          <h4 style="font-weight: 800; color: #1e293b;">Dual Range with Dynamic Step</h4>
-          <p style="color:#64748b; font-size: 13px; margin-bottom: 24px;">Adjust both boundaries. Step size adapts as handles cross threshold regions.</p>
+          <h4 style="font-weight: 800; color:var(--text-primary,#1e293b);">Dual Range with Dynamic Step</h4>
+          <p style="color:var(--text-secondary,#64748b); font-size: 13px; margin-bottom: 24px;">Adjust both boundaries. Step size adapts as handles cross threshold regions.</p>
           
           <ui-range-slider 
             id="minMaxSlider" 
@@ -1186,8 +1186,8 @@ export function initRangeSliderDemo() {
             variant="success"
           ></ui-range-slider>
 
-          <div id="minMaxSliderValue" style="padding: 14px; background: #f0fdf4; border: 1px solid #dcfce7; border-radius: 12px; text-align: center; margin-top: 20px;">
-            Range: <span style="font-weight: 800; color: #166534;">10 – 90</span>
+          <div id="minMaxSliderValue" style="padding: 14px; background:var(--accent-green-soft,#f0fdf4); border: 1px solid #dcfce7; border-radius: 12px; text-align: center; margin-top: 20px;">
+            Range: <span style="font-weight: 800; color: var(--accent-green,#166534);">10 – 90</span>
           </div>
         </div>
       `;
@@ -1207,7 +1207,7 @@ export function initRangeSliderDemo() {
           else if (avg < 75) slider.step = 10;
           else slider.step = 25;
 
-          valueDiv.innerHTML = `Range: <span style="font-weight: 800; color: #166534;">${start} – ${end}</span>`;
+          valueDiv.innerHTML = `Range: <span style="font-weight: 800; color: var(--accent-green,#166534);">${start} – ${end}</span>`;
         });
       }, 100);
     };

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

@@ -1,4 +1,4 @@
-// Component Demo Functions
+// Component Demo Functions
 export function initRatingDemo() {
   const section = document.getElementById('rating');
   if (!section) return;
@@ -31,7 +31,7 @@ export function initRatingDemo() {
     container.innerHTML = `
       <div class="demo-block reveal-fade-in">
         <h3 class="specimen-title">🎮 Interactive Playground</h3>
-        <div class="playground-settings" style="background: rgba(var(--primary-rgb, 139, 92, 246), 0.03); padding: 24px; border-radius: 16px; border: 1px solid rgba(0,0,0,0.05); margin-bottom: 24px;">
+        <div class="playground-settings" style="padding: 24px; border-radius: 16px; margin-bottom: 24px;">
           <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px;">
             <div class="form-group">
                <label>Rating Type</label>
@@ -126,7 +126,7 @@ export function initRatingDemo() {
           </div>
         </div>
 
-        <div class="playground-preview" style="padding: 60px; background: white; border: 1px dashed #e2e8f0; border-radius: 24px; display: flex; justify-content: center; min-height: 200px; position: relative; overflow: hidden;">
+        <div class="playground-preview" style="padding: 60px; min-height: 200px; position: relative; overflow: hidden;">
           <ui-rating id="playgroundRating" value="3.5" allow-half glow victory-glow></ui-rating>
         </div>
 
@@ -141,20 +141,20 @@ export function initRatingDemo() {
   window.showEliteRatingSpecimens = function() {
     const container = document.getElementById('ratingDemoContainer');
     container.innerHTML = `
-      <div class="demo-block reveal-slide-up" style="background: #f8fafc; padding: 40px; border-radius: 32px; border: 1px solid #e2e8f0;">
+      <div class="demo-block reveal-slide-up" style="background:var(--bg-secondary,#f8fafc); padding: 40px; border-radius: 32px; border:1px solid var(--border-default,#e2e8f0);">
         <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
            <span style="font-size: 2rem;">⭐</span>
-           <h2 style="font-size: 2.25rem; font-weight: 800; color: #1e293b; margin: 0;">Rating & Feedback</h2>
+           <h2 style="font-size: 2.25rem; font-weight: 800; color:var(--text-primary,#1e293b); margin: 0;">Rating & Feedback</h2>
         </div>
-        <p style="color: #64748b; font-size: 1.1rem; margin-bottom: 40px; max-width: 800px;">
+        <p style="color:var(--text-secondary,#64748b); font-size: 1.1rem; margin-bottom: 40px; max-width: 800px;">
            Versatile feedback components supporting stars, smilies, and thumbs. Includes support for half-ratings and custom labels.
         </p>
         
         <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 24px; margin-bottom: 24px;">
            <!-- Star System -->
-           <div style="background: white; border-radius: 20px; padding: 24px; border: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 32px;">
+           <div style="background:var(--bg-primary,white); border-radius: 20px; padding: 24px; border:1px solid var(--border-default,#e2e8f0); display: flex; flex-direction: column; gap: 32px;">
               <div>
-                 <h4 style="color: #1e293b; font-weight: 700; margin-bottom: 16px;">Star System</h4>
+                 <h4 style="color:var(--text-primary,#1e293b); font-weight: 700; margin-bottom: 16px;">Star System</h4>
                  <div style="margin-bottom: 24px;">
                     <p style="color: #10b981; font-weight: 700; font-size: 13px; margin-bottom: 12px; text-transform: uppercase;">Standard Rating</p>
                     <ui-rating value="3" color="warning" size="md"></ui-rating>
@@ -174,9 +174,9 @@ export function initRatingDemo() {
            </div>
 
            <!-- Alternate Feedback -->
-           <div style="background: white; border-radius: 20px; padding: 24px; border: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: 32px;">
+           <div style="background:var(--bg-primary,white); border-radius: 20px; padding: 24px; border:1px solid var(--border-default,#e2e8f0); display: flex; flex-direction: column; gap: 32px;">
               <div>
-                 <h4 style="color: #1e293b; font-weight: 700; margin-bottom: 16px;">Alternate Feedback Types</h4>
+                 <h4 style="color:var(--text-primary,#1e293b); font-weight: 700; margin-bottom: 16px;">Alternate Feedback Types</h4>
                  <div style="margin-bottom: 24px;">
                     <p style="color: #10b981; font-weight: 700; font-size: 13px; margin-bottom: 12px; text-transform: uppercase;">How satisfied are you?</p>
                     <ui-rating 
@@ -188,7 +188,7 @@ export function initRatingDemo() {
                     ></ui-rating>
                  </div>
                  <div style="border-top: 1px solid #f1f5f9; padding-top: 24px;">
-                    <p style="color: #6366f1; font-weight: 700; font-size: 13px; margin-bottom: 12px; text-transform: uppercase;">Legacy Emoji Vibe (from DreamUI)</p>
+                    <p style="color:var(--accent-indigo,#6366f1); font-weight: 700; font-size: 13px; margin-bottom: 12px; text-transform: uppercase;">Legacy Emoji Vibe (from DreamUI)</p>
                     <ui-rating 
                       type="smiley" 
                       use-emoji
@@ -206,23 +206,23 @@ export function initRatingDemo() {
         </div>
 
         <!-- Footnote comparison -->
-        <div style="background: white; border-radius: 20px; padding: 32px; border: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px;">
+        <div style="background:var(--bg-primary,white); border-radius: 20px; padding: 32px; border:1px solid var(--border-default,#e2e8f0); display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px;">
            <div style="display: flex; gap: 60px; align-items: flex-end;">
               <div style="text-align: center;">
                  <ui-rating value="3" color="warning" size="md" style="margin-bottom: 8px;"></ui-rating>
-                 <p style="color: #1e293b; font-size: 14px; font-weight: 600;">Small</p>
+                 <p style="color:var(--text-primary,#1e293b); font-size: 14px; font-weight: 600;">Small</p>
               </div>
               <div style="text-align: center;">
                  <ui-rating value="4" color="warning" size="md" style="margin-bottom: 8px;"></ui-rating>
-                 <p style="color: #1e293b; font-size: 14px; font-weight: 600;">md</p>
+                 <p style="color:var(--text-primary,#1e293b); font-size: 14px; font-weight: 600;">md</p>
               </div>
               <div style="text-align: center;">
                  <ui-rating value="5" color="warning" size="lg" style="margin-bottom: 8px;"></ui-rating>
-                 <p style="color: #1e293b; font-size: 14px; font-weight: 600;">Large</p>
+                 <p style="color:var(--text-primary,#1e293b); font-size: 14px; font-weight: 600;">Large</p>
               </div>
            </div>
            <div style="text-align: right;">
-              <p style="color: #1e293b; font-weight: 700; font-size: 13px; margin-bottom: 12px;">Required Field <span style="color: #ef4444;">*</span></p>
+              <p style="color:var(--text-primary,#1e293b); font-weight: 700; font-size: 13px; margin-bottom: 12px;">Required Field <span style="color:var(--accent-red,#ef4444);">*</span></p>
               <ui-rating value="0" invalid error-message="Please provide a rating" size="md"></ui-rating>
            </div>
         </div>
@@ -236,7 +236,7 @@ export function initRatingDemo() {
       <div class="demo-block reveal-slide-up">
         <h3 class="specimen-title">⭐ Precision Star Engine</h3>
         <p class="specimen-description">Sub-pixel clipping for accurate fractional selection.</p>
-        <div style="display: flex; flex-direction: column; gap: 24px; padding: 32px; background: white; border-radius: 16px; border: 1px solid #f1f5f9;">
+        <div style="display: flex; flex-direction: column; gap: 24px; padding: 32px; background:var(--bg-primary,white); border-radius: 16px; border:1px solid var(--border-subtle,#f1f5f9);">
            <ui-rating value="1" color="warning" show-value labels='["Terrible", "Bad", "Average", "Good", "Excellent"]'></ui-rating>
            <ui-rating value="2.5" allow-half color="warning" show-value labels='["Terrible", "Bad", "Average", "Good", "Excellent"]'></ui-rating>
            <ui-rating value="4" color="warning" show-value labels='["Terrible", "Bad", "Average", "Good", "Excellent"]'></ui-rating>
@@ -252,7 +252,7 @@ export function initRatingDemo() {
       <div class="demo-block reveal-slide-up">
         <h3 class="specimen-title">😊 Expressive Smiley Sets</h3>
         <p class="specimen-description">Lucide vector smileys with magnetic hover states.</p>
-        <div style="padding: 32px; background: white; border-radius: 16px; border: 1px solid #f1f5f9;">
+        <div style="padding: 32px; background:var(--bg-primary,white); border-radius: 16px; border:1px solid var(--border-subtle,#f1f5f9);">
            <ui-rating type="smiley" size="lg" color="primary" value="3" show-value labels='["Awful", "Poor", "Neutral", "Great", "Elite"]'></ui-rating>
         </div>
       </div>
@@ -264,7 +264,7 @@ export function initRatingDemo() {
     container.innerHTML = `
       <div class="demo-block reveal-slide-up">
         <h3 class="specimen-title">👍 Sentinel Sentiment</h3>
-        <div style="padding: 32px; background: white; border-radius: 16px; border: 1px solid #f1f5f9; display: flex; gap: 32px;">
+        <div style="padding: 32px; background:var(--bg-primary,white); border-radius: 16px; border:1px solid var(--border-subtle,#f1f5f9); display: flex; gap: 32px;">
            <ui-rating type="thumb" size="lg" color="success" value="1" haptic></ui-rating>
            <ui-rating type="thumb" size="lg" color="danger" value="-1" haptic></ui-rating>
         </div>

package/dist/collection/assets/js/demos/scroll-top-demo.js

@@ -1,4 +1,4 @@
-// Component Demo Functions
+// Component Demo Functions
 export function initScrollTopDemo() {
   const section = document.getElementById('scroll-top');
   if (!section) return;
@@ -10,10 +10,9 @@ export function initScrollTopDemo() {
     </div>
 
     <div class="demo-controls" style="margin: 20px 0; display: flex; gap: 10px; flex-wrap: wrap;">
-      <ui-button onclick="showScrollTopStandard()" class="demo-btn secondary" variant="outline">Standard</ui-button>
-      <ui-button onclick="showScrollTopFeatures()" class="demo-btn secondary" variant="outline">Advanced Features</ui-button>
-      <ui-button onclick="showSTInContainer()" style="padding: 8px 16px; background-color: #8b5cf6; color: white; border: none; border-radius: 6px; cursor: pointer;" variant="outline">In-Container</ui-button>
-      <ui-button onclick="showInteractiveST()" style="padding: 8px 16px; background-color: #ec4899; color: white; border: none; border-radius: 6px; cursor: pointer;" variant="outline">🎮 Interactive Playground</ui-button>
+      <ui-button onclick="showScrollTopStandard()"  variant="outline">Standard</ui-button>
+      <ui-button onclick="showScrollTopFeatures()"  variant="outline">Advanced Features</ui-button>
+      <ui-button onclick="showSTInContainer()"  variant="outline">In-Container</ui-button>
     </div>
 
     <div id="scrollTopDemoContainer" class="demo-container"></div>
@@ -24,8 +23,8 @@ export function initScrollTopDemo() {
       .demo-btn.secondary { background: #f3f4f6; color: #374151; }
       .demo-btn.secondary:hover { background: #e5e7eb; }
       .demo-container { margin-top: 24px; }
-      .demo-card { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
-      .scroll-box { position: relative; height: 350px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; background: #f9fafb; }
+      .demo-card { background:var(--bg-primary,white); border:1px solid var(--border-default,#e5e7eb); border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+      .scroll-box { position: relative; height: 350px; overflow-y: auto; border:1px solid var(--border-default,#e5e7eb); border-radius: 8px; padding: 20px; background:var(--bg-secondary,#f9fafb); }
       <section id="features-section" style="padding: 100px 0; border-bottom: 1px solid #eee;">
         <h2 id="features">✨ Dynamic Features</h2>
         <p>Explore the premium features of out Apex Tier components.</p>
@@ -247,7 +246,7 @@ export function initScrollTopDemo() {
           
           <div style="flex: 1.5; min-width: 350px;">
             <div id="stPreviewContainer" class="scroll-box" style="height: 450px;">
-              <h4 style="position: sticky; top: 0; background: #f9fafb; margin: 0; padding: 10px 0; z-index: 5;">Preview Area (Scroll Down)</h4>
+              <h4 style="position: sticky; top: 0; background:var(--bg-secondary,#f9fafb); margin: 0; padding: 10px 0; z-index: 5;">Preview Area (Scroll Down)</h4>
               ${Array.from({ length: 80 }, (_, i) => `<p>Content line ${i + 1} - Notice the behavior as you scroll.</p>`).join('')}
             </div>
             <pre id="stCode" style="background: #1e293b; color: #f8fafc; padding: 16px; border-radius: 8px; font-size: 13px; margin-top: 16px; overflow-x: auto;"></pre>
@@ -274,7 +273,7 @@ export function initScrollTopDemo() {
       <div style="text-align: center; padding: 20px;">
         <h4>In-Container Navigation</h4>
         <p style="color: #6b7280; margin-bottom: 20px;">Button stays relative to this box, not the screen</p>
-        <div id="scrollBoxDemo" style="position: relative; height: 300px; overflow-y: auto; border: 2px dashed #ccc; border-radius: 12px; background: white; margin: 0 auto; max-width: 500px;">
+        <div id="scrollBoxDemo" style="position: relative; height: 300px; overflow-y: auto; border: 2px dashed #ccc; border-radius: 12px; background:var(--bg-primary,white); margin: 0 auto; max-width: 500px;">
            <div style="height: 1500px; padding: 20px; background: linear-gradient(to bottom, #fff, #f3f4f6);">
               <p>Scroll down inside this box...</p>
               <h1 id="box-top">Box Top</h1>