atomicuilibrary 0.1.0 → 0.1.3

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

@@ -1,4 +1,3 @@
-// Knob Demo
 export function initKnobDemo() {
   const section = document.getElementById('knob');
   if (!section) return;
@@ -42,7 +41,7 @@ export function initKnobDemo() {
                     <div style="text-align: center;">
                         <ui-knob value="72" show-value="false" size="140" stroke-width="10" color="#f59e0b">
                             <div style="display: flex; flex-direction: column; align-items: center;">
-                                <span style="font-size: 28px; font-weight: bold; color: #f59e0b;">72°</span>
+                                <span style="font-size: 28px; font-weight: bold; color:var(--accent-yellow,#f59e0b);">72°</span>
                                 <span style="font-size: 12px; color: #9ca3af;">TARGET</span>
                             </div>
                         </ui-knob>
@@ -121,19 +120,19 @@ export function initKnobDemo() {
           <div style="display: flex; gap: 40px; flex-wrap: wrap; justify-content: center; padding: 20px;">
             <div style="text-align: center;">
               <ui-knob value="65" color='{"from": "#10b981", "to": "#8b5cf6"}' size="120" stroke-width="12" show-value="true"></ui-knob>
-              <p style="font-size: 11px; margin-top: 8px; color: #64748b;">Ocean Deep</p>
+              <p style="font-size: 11px; margin-top: 8px; color:var(--text-secondary,#64748b);">Ocean Deep</p>
             </div>
             <div style="text-align: center;">
               <ui-knob value="80" color='{"from": "#10b981", "to": "#10b981"}' size="120" stroke-width="12" show-value="true"></ui-knob>
-              <p style="font-size: 11px; margin-top: 8px; color: #64748b;">Arctic Ice</p>
+              <p style="font-size: 11px; margin-top: 8px; color:var(--text-secondary,#64748b);">Arctic Ice</p>
             </div>
             <div style="text-align: center;">
               <ui-knob value="45" color='{"from": "#f59e0b", "to": "#ef4444"}' size="120" stroke-width="12" show-value="true"></ui-knob>
-              <p style="font-size: 11px; margin-top: 8px; color: #64748b;">Sunburst</p>
+              <p style="font-size: 11px; margin-top: 8px; color:var(--text-secondary,#64748b);">Sunburst</p>
             </div>
             <div style="text-align: center;">
               <ui-knob value="90" color='{"from": "#6366f1", "to": "#ec4899"}' size="120" stroke-width="12" show-value="true"></ui-knob>
-              <p style="font-size: 11px; margin-top: 8px; color: #64748b;">Cyberpunk</p>
+              <p style="font-size: 11px; margin-top: 8px; color:var(--text-secondary,#64748b);">Cyberpunk</p>
             </div>
           </div>
         </div>
@@ -169,13 +168,13 @@ export function initKnobDemo() {
       container.innerHTML = `
         <div class="demo-block">
           <h3>Speedometer</h3>
-          <p style="color:#64748b;">Use buttons to accelerate/decelerate. Wheel and drag also work.</p>
+          <p style="color:var(--text-secondary,#64748b);">Use buttons to accelerate/decelerate. Wheel and drag also work.</p>
           <div style="display:flex; gap:24px; align-items:center; justify-content:center; flex-wrap:wrap; padding: 20px;">
             <div style="text-align:center;">
               <ui-knob id="speedKnob" value="0" min="0" max="240" step="10" size="180" stroke-width="10" color="#16a34a" track-color="#e5e7eb" show-value="true" value-suffix=" km/h" show-ticks="true" tick-count="12" tick-color="#94a3b8" tick-length="0.12" start-angle="135" end-angle="405"></ui-knob>
               <div style="margin-top:12px; display:flex; gap:12px; justify-content:center;">
-                <ui-button id="speedDec" style="padding:8px 14px; background:#374151; color:#fff; border:none; border-radius:6px; cursor:pointer;">Brake −</ui-button>
-                <ui-button id="speedInc" style="padding:8px 14px; background:#dc2626; color:#fff; border:none; border-radius:6px; cursor:pointer;">Gas +</ui-button>
+                <ui-button id="speedDec" >Brake −</ui-button>
+                <ui-button id="speedInc" >Gas +</ui-button>
               </div>
             </div>
           </div>
@@ -210,75 +209,75 @@ export function initKnobDemo() {
       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);">
           <h3>🎮 Interactive Playground</h3>
           <div style="display: flex; gap: 30px; flex-wrap: wrap; margin-top: 20px;">
             <div style="flex: 1; min-width: 300px;">
               <div style="display: flex; flex-direction: column; gap: 15px;">
                 <div style="display:flex; gap:8px; flex-wrap:wrap;">
-                  <ui-button type="button" onclick="applyKnobPreset('volume')" style="padding:6px 10px; background:#10b981; color:#fff; border:none; border-radius:6px; cursor:pointer;">Preset: Volume %</ui-button>
-                  <ui-button type="button" onclick="applyKnobPreset('temperature')" style="padding:6px 10px; background:#f59e0b; color:#fff; border:none; border-radius:6px; cursor:pointer;">Preset: Temp °C</ui-button>
-                  <ui-button type="button" onclick="applyKnobPreset('speed')" style="padding:6px 10px; background:#0ea5e9; color:#fff; border:none; border-radius:6px; cursor:pointer;">Preset: Speed km/h</ui-button>
-                  <ui-button type="button" onclick="applyKnobPreset('rpm')" style="padding:6px 10px; background:#9333ea; color:#fff; border:none; border-radius:6px; cursor:pointer;">Preset: Tachometer RPM</ui-button>
+                  <ui-button type="button" onclick="applyKnobPreset('volume')" >Preset: Volume %</ui-button>
+                  <ui-button type="button" onclick="applyKnobPreset('temperature')" >Preset: Temp °C</ui-button>
+                  <ui-button type="button" onclick="applyKnobPreset('speed')" >Preset: Speed km/h</ui-button>
+                  <ui-button type="button" onclick="applyKnobPreset('rpm')" >Preset: Tachometer RPM</ui-button>
                 </div>
                 <div>
                   <label style="display: block; margin-bottom: 5px; font-weight: 500;">Value:</label>
                   <ui-input type="number" id="knobValue" value="50" min="0" max="100" oninput="updateInteractiveKnob()"
-                    style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px;">
+                 >
                 </div>
                 
                 <div>
                   <label style="display: block; margin-bottom: 5px; font-weight: 500;">Min Value:</label>
                   <ui-input type="number" id="knobMin" value="0" oninput="updateInteractiveKnob()"
-                    style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px;">
+                    >
                 </div>
                 
                 <div>
                   <label style="display: block; margin-bottom: 5px; font-weight: 500;">Max Value:</label>
                   <ui-input type="number" id="knobMax" value="100" oninput="updateInteractiveKnob()"
-                    style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px;">
+                    >
                 </div>
                 
                 <div>
                   <label style="display: block; margin-bottom: 5px; font-weight: 500;">Step:</label>
                   <ui-input type="number" id="knobStep" value="1" min="1" oninput="updateInteractiveKnob()"
-                    style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px;">
+                    >
                 </div>
                 
                 <div>
                   <label style="display: block; margin-bottom: 5px; font-weight: 500;">Size:</label>
                   <ui-input type="number" id="knobSize" value="120" min="50" max="300" oninput="updateInteractiveKnob()"
-                    style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px;">
+                    >
                 </div>
                 <div style="display:flex; gap:12px;">
                   <div style="flex:1;">
                     <label style="display:block; margin-bottom:5px; font-weight:500;">Start Angle:</label>
                     <ui-input type="number" id="knobStartAngle" value="135" min="0" max="360" oninput="updateInteractiveKnob()"
-                      style="width:100%; padding:8px; border:1px solid #d1d5db; border-radius:4px;">
+                      >
                   </div>
                   <div style="flex:1;">
                     <label style="display:block; margin-bottom:5px; font-weight:500;">End Angle:</label>
                     <ui-input type="number" id="knobEndAngle" value="405" min="0" max="540" oninput="updateInteractiveKnob()"
-                      style="width:100%; padding:8px; border:1px solid #d1d5db; border-radius:4px;">
+                      >
                   </div>
                 </div>
                 
                 <div>
                   <label style="display: block; margin-bottom: 5px; font-weight: 500;">Stroke Width:</label>
                   <ui-input type="number" id="knobStrokeWidth" value="8" min="2" max="20" oninput="updateInteractiveKnob()"
-                    style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px;">
+                    >
                 </div>
                 
                 <div>
                   <label style="display: block; margin-bottom: 5px; font-weight: 500;">Color:</label>
                   <ui-input type="color" id="knobColor" value="#10b981" oninput="updateInteractiveKnob()"
-                    style="width: 100%; padding: 4px; border: 1px solid #d1d5db; border-radius: 4px; cursor: pointer;">
+                    >
                 </div>
                 
                 <div>
                   <label style="display: block; margin-bottom: 5px; font-weight: 500;">Value Suffix (unit):</label>
                   <ui-input type="text" id="knobValueSuffix" value="" oninput="updateInteractiveKnob()"
-                    style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px;" placeholder="e.g., %, km/h, °">
+                     placeholder="e.g., %, km/h, °">
                 </div>
                 
                 <ui-checkbox id="knobShowValue" checked label="Show Value" onCheckboxChange="updateInteractiveKnob()"></ui-checkbox>
@@ -297,17 +296,17 @@ export function initKnobDemo() {
                   <div style="flex:1; min-width:150px;">
                     <label style="display:block; margin-bottom:5px; font-weight:500;">Tick Count:</label>
                     <ui-input type="number" id="knobTickCount" value="10" min="2" max="60" oninput="updateInteractiveKnob()"
-                      style="width:100%; padding:8px; border:1px solid #d1d5db; border-radius:4px;">
+                      >
                   </div>
                   <div style="flex:1; min-width:150px;">
                     <label style="display:block; margin-bottom:5px; font-weight:500;">Tick Length:</label>
                     <ui-input type="number" id="knobTickLength" value="0.1" step="0.01" min="0.02" max="0.4" oninput="updateInteractiveKnob()"
-                      style="width:100%; padding:8px; border:1px solid #d1d5db; border-radius:4px;">
+                      >
                   </div>
                   <div style="flex:1; min-width:150px;">
                     <label style="display:block; margin-bottom:5px; font-weight:500;">Tick Color:</label>
                     <ui-input type="color" id="knobTickColor" value="#94a3b8" oninput="updateInteractiveKnob()"
-                      style="width:100%; padding:4px; border:1px solid #d1d5db; border-radius:4px; cursor:pointer;">
+                      >
                   </div>
                 </div>
                 
@@ -315,11 +314,11 @@ export function initKnobDemo() {
               </div>
             </div>
             
-            <div style="flex: 1; min-width: 300px; background-color: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb; display: flex; flex-direction: column; gap: 16px; justify-content: center; align-items: center;">
+            <div style="flex: 1; min-width: 300px; background-color: var(--bg-secondary, #f9fafb); padding: 20px; border-radius: 8px; border:1px solid var(--border-default,#e5e7eb); display: flex; flex-direction: column; gap: 16px; justify-content: center; align-items: center;">
               <div id="interactiveKnobContainer" tabindex="0" aria-label="Knob playground" style="outline:none;"></div>
               <div style="display:flex; gap:12px; align-items:center;">
-                <ui-button id="knobDecrementBtn" style="padding:8px 14px; background:#374151; color:#fff; border:none; border-radius:6px; cursor:pointer;">− Decrease</ui-button>
-                <ui-button id="knobIncrementBtn" style="padding:8px 14px; background:#2563eb; color:#fff; border:none; border-radius:6px; cursor:pointer;">+ Increase</ui-button>
+                <ui-button id="knobDecrementBtn" >− Decrease</ui-button>
+                <ui-button id="knobIncrementBtn" >+ Increase</ui-button>
               </div>
               
               <div style="margin-top: 20px; background: #1e293b; padding: 16px; border-radius: 8px; position: relative; width: 100%;">