@howssatoshi/quantumcss 1.4.3 → 1.5.0

package/examples/blog-template.html

@@ -260,22 +260,8 @@
   </footer>
 
   <script>
-    // Theme Toggle Logic
-    const themeBtn = document.getElementById('theme-btn');
-    if (themeBtn) {
-        themeBtn.addEventListener('click', () => {
-            document.body.classList.toggle('light-mode');
-            const isLight = document.body.classList.contains('light-mode');
-            
-            // Update all icons
-            document.querySelectorAll('.sun-icon').forEach(icon => {
-                icon.classList.toggle('hidden', !isLight);
-            });
-            document.querySelectorAll('.moon-icon').forEach(icon => {
-                icon.classList.toggle('hidden', isLight);
-            });
-        });
-    }
+    // Theme initialization is handled automatically by starlight.js
+    // Custom template logic can go here
   </script>
 
 </body>

package/examples/gaming-template.html

@@ -333,26 +333,6 @@
 
     <script src="../src/starlight.js"></script>
     <script>
-        const themeBtns = [document.getElementById('theme-btn'), document.getElementById('theme-btn-mobile')];
-        
-        // Theme Toggle Logic
-        themeBtns.forEach(btn => {
-            if (btn) {
-                btn.addEventListener('click', () => {
-                    document.body.classList.toggle('light-mode');
-                    const isLight = document.body.classList.contains('light-mode');
-                    
-                    // Update all icons
-                    document.querySelectorAll('.sun-icon').forEach(icon => {
-                        icon.classList.toggle('hidden', !isLight);
-                    });
-                    document.querySelectorAll('.moon-icon').forEach(icon => {
-                        icon.classList.toggle('hidden', isLight);
-                    });
-                });
-            }
-        });
-
         // Accordion Logic
         document.querySelectorAll('.accordion-header').forEach(header => {
             header.addEventListener('click', () => {

package/examples/index.html

@@ -19,7 +19,7 @@
             flex-shrink: 0;
         }
         .theme-toggle:hover { background: rgba(255,255,255,0.1); transform: scale(1.05); }
-        body.light-mode .theme-toggle { background: #fff; border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
+        html[data-theme="light"] .theme-toggle { background: #fff; border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
         .theme-toggle svg { width: 1.5rem; height: 1.5rem; }
         .hidden { display: none; }
     </style>
@@ -61,7 +61,7 @@
 
     <header class="hero container">
         <div class="pt-8 pb-12 text-center">
-            <span class="text-[10px] font-black tracking-[0.3em] text-starlight uppercase mb-6 block">QuantumCSS v1.4.2</span>
+            <span class="text-[10px] font-black tracking-[0.3em] text-starlight uppercase mb-6 block">QuantumCSS v1.5.0</span>
             <h1 class="text-7xl md:text-8xl text-gradient-starlight font-black uppercase italic tracking-tighter mb-8">Starlight Design</h1>
             <p class="text-xl text-slate-400 max-w-3xl mx-auto mb-12 font-medium leading-relaxed">
                 A standardized, high-performance UI library. 
@@ -128,14 +128,11 @@
     </main>
 
     <script>
-        function toggleTheme() { 
-            document.body.classList.toggle('light-mode');
-            const isLight = document.body.classList.contains('light-mode');
-            document.querySelector('.sun-icon').classList.toggle('hidden', !isLight);
-            document.querySelector('.moon-icon').classList.toggle('hidden', isLight);
-        }
         function openDialog() { document.getElementById('dialog').style.display = 'flex'; }
         function closeDialog() { document.getElementById('dialog').style.display = 'none'; }
+        
+        // Theme initialization and system preference detection are now handled 
+        // automatically by Starlight.initTheme() in starlight.js
     </script>
 </body>
 </html>

package/examples/news-template.html

@@ -5,9 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Quantum News | Decoding the Future</title>
     <link rel="stylesheet" href="../dist/quantum.min.css">
+    <script src="../src/starlight.js"></script>
     <style>
         body { background-color: #020617; color: #f1f5f9; transition: background-color 0.5s ease, color 0.5s ease; }
-        body.light-mode { background-color: #ffffff; color: #0f172a; }
+        html[data-theme="light"] body { background-color: #ffffff; color: #0f172a; }
         .news-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
         @media (min-width: 1024px) {
             .news-grid { grid-template-columns: 3fr 1fr; }
@@ -147,7 +148,7 @@
         .sun-icon { display: none; }
     </style>
 </head>
-<body class="font-sans antialiased light-mode">
+<body class="font-sans antialiased">
     <!-- Top Bar -->
     <div class="border-b border-slate-100 py-2 bg-slate-50">
         <div class="container mx-auto px-6 flex justify-between items-center text-[10px] font-bold uppercase tracking-widest text-slate-500">
@@ -312,22 +313,8 @@
         }
     </style>
     <script>
-        // Theme Toggle Logic
-        const themeBtn = document.getElementById('theme-btn');
-        if (themeBtn) {
-            themeBtn.addEventListener('click', () => {
-                document.body.classList.toggle('light-mode');
-                const isLight = document.body.classList.contains('light-mode');
-                
-                // Update all icons
-                document.querySelectorAll('.sun-icon').forEach(icon => {
-                    icon.style.display = isLight ? 'block' : 'none';
-                });
-                document.querySelectorAll('.moon-icon').forEach(icon => {
-                    icon.style.display = isLight ? 'none' : 'block';
-                });
-            });
-        }
+        // Theme initialization and management is now handled 
+        // automatically by Starlight.initTheme() in starlight.js
     </script>
 </body>
 </html>

package/examples/shopping/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Quantum Store | Future of Fashion</title>
     <link rel="stylesheet" href="../../dist/quantum.min.css">
+    <script src="../../src/starlight.js"></script>
     <style>
         body { background-color: #f8fafc; color: #0f172a; transition: background-color 0.5s ease, color 0.5s ease; }
         body.dark-mode { background-color: #020617; color: #f1f5f9; }
@@ -111,7 +112,7 @@
         .moon-icon { display: none; }
     </style>
 </head>
-<body class="light-mode">
+<body class="">
     <!-- Announcement Bar -->
     <div class="bg-slate-900 text-white py-3 text-center text-[10px] font-black tracking-[0.3em] uppercase">
         Interstellar Shipping Enabled • New Drops Every Sunday
@@ -313,24 +314,6 @@
     </footer>
 
     <script>
-        // Theme Toggle Logic
-        const themeBtn = document.getElementById('theme-btn');
-        if (themeBtn) {
-            themeBtn.addEventListener('click', () => {
-                document.body.classList.toggle('light-mode');
-                document.body.classList.toggle('dark-mode');
-                const isDark = document.body.classList.contains('dark-mode');
-                
-                // Update all icons
-                document.querySelectorAll('.sun-icon').forEach(icon => {
-                    icon.style.display = isDark ? 'none' : 'block';
-                });
-                document.querySelectorAll('.moon-icon').forEach(icon => {
-                    icon.style.display = isDark ? 'block' : 'none';
-                });
-            });
-        }
-
         // Color Swatch Selection
         const swatches = document.querySelectorAll('.color-swatch');
         swatches.forEach(swatch => {
@@ -339,6 +322,9 @@
                 swatch.classList.add('selected');
             });
         });
+
+        // Theme initialization and management is now handled 
+        // automatically by Starlight.initTheme() in starlight.js
     </script>
 </body>
 </html>

package/examples/starlight.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Starlight AI - Design System</title>
     <link rel="stylesheet" href="../dist/quantum.min.css">
+    <script src="../src/starlight.js"></script>
     <style>
         body {
             background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 100%);
@@ -153,22 +154,8 @@
     </div>
 
     <script>
-        // Theme Toggle Logic
-        const themeBtn = document.getElementById('theme-btn');
-        if (themeBtn) {
-            themeBtn.addEventListener('click', () => {
-                document.body.classList.toggle('light-mode');
-                const isLight = document.body.classList.contains('light-mode');
-                
-                // Update all icons
-                document.querySelectorAll('.sun-icon').forEach(icon => {
-                    icon.classList.toggle('hidden', !isLight);
-                });
-                document.querySelectorAll('.moon-icon').forEach(icon => {
-                    icon.classList.toggle('hidden', isLight);
-                });
-            });
-        }
+        // Theme initialization and management is now handled 
+        // automatically by Starlight.initTheme() in starlight.js
     </script>
 </body>
 </html>

package/examples/theme-test.html

@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Theme Auto-Detection Test</title>
+    <link rel="stylesheet" href="../dist/quantum.min.css">
+    <script src="../src/starlight.js"></script>
+    <style>
+        body { min-height: 100vh; }
+        .demo-section { 
+            margin: 2rem auto; 
+            max-width: 600px; 
+            padding: 2rem; 
+        }
+        .theme-controls { 
+            display: flex; 
+            gap: 1rem; 
+            margin-bottom: 2rem; 
+            justify-content: center; 
+        }
+        .status-message {
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
+            border-radius: var(--radius-lg);
+            padding: 1rem;
+            margin-top: 1rem;
+            font-family: monospace;
+            font-size: 0.875rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="starlight-stars" id="stars"></div>
+    
+    <div class="demo-section starlight-card">
+        <h1>🎨 Theme Auto-Detection Test</h1>
+        
+        <div class="theme-controls">
+            <button class="btn-starlight" onclick="setTheme('light')">☀️ Light</button>
+            <button class="btn-secondary" onclick="setTheme('dark')">🌙 Dark</button>
+            <button class="btn-outline" onclick="setTheme('auto')">🖥️ Follow System</button>
+            <button class="btn-ghost" onclick="toggleTheme()">🔄 Cycle</button>
+            <button class="btn-success" onclick="resetToAuto()">🔄 Reset to Auto</button>
+            <button class="btn-warning" onclick="forceRefresh()">🔃 Force Refresh</button>
+        </div>
+        
+        <div class="status-message" id="status">
+            Loading theme information...
+        </div>
+        
+        <h3>Instructions:</h3>
+        <ol>
+            <li>Click "Follow System" to enable automatic theme switching</li>
+            <li>Change your OS theme (macOS: System Settings → Appearance, Windows: Settings → Personalization → Colors)</li>
+            <li>The webpage should automatically switch to match your OS</li>
+            <li>Try "Cycle" to rotate through all available themes</li>
+        </ol>
+        
+        <h3>Current State:</h3>
+        <div id="current-state"></div>
+    </div>
+    
+    <script>
+        // Monitor theme changes
+        function updateStatus() {
+            const html = document.documentElement;
+            const currentTheme = html.getAttribute('data-theme');
+            const savedTheme = localStorage.getItem('theme');
+            const effectiveTheme = localStorage.getItem('theme-effective');
+            const systemPrefers = window.matchMedia('(prefers-color-scheme: light)').matches;
+            
+            const statusEl = document.getElementById('status');
+            const stateEl = document.getElementById('current-state');
+            
+            // Debug information
+            console.log('Theme Debug:', {
+                currentTheme,
+                savedTheme,
+                effectiveTheme,
+                systemPrefers,
+                htmlDataTheme: html.getAttribute('data-theme'),
+                htmlAttributes: Object.keys(html.attributes).map(attr => `${attr}: ${html.getAttribute(attr)}`)
+            });
+            
+            statusEl.innerHTML = `
+                <strong>Current Theme:</strong> ${currentTheme || 'null'}<br>
+                <strong>Saved Preference:</strong> ${savedTheme || 'none'}<br>
+                <strong>Effective Theme:</strong> ${effectiveTheme || currentTheme || 'null'}<br>
+                <strong>System Prefers:</strong> ${systemPrefers ? 'light' : 'dark'}
+            `;
+            
+            stateEl.innerHTML = `
+                <div class="starlight-card" style="padding: 1rem; margin-top: 1rem;">
+                    <h4>🎯 Theme Configuration:</h4>
+                    <p><strong>html[data-theme]:</strong> ${currentTheme}</p>
+                    <p><strong>localStorage theme:</strong> ${savedTheme || 'null'}</p>
+                    <p><strong>localStorage theme-effective:</strong> ${effectiveTheme || 'null'}</p>
+                    <p><strong>System prefers-color-scheme:</strong> ${systemPrefers ? 'light' : 'dark'}</p>
+                    
+                    <h5>💡 How this works:</h5>
+                    <ul>
+                        <li>If theme is "auto", the system preference is followed</li>
+                        <li>System theme changes are automatically detected</li>
+                        <li>Your manual choice is saved and restored</li>
+                    </ul>
+                </div>
+            `;
+        }
+        
+        // Listen for theme changes
+        window.addEventListener('themechange', (e) => {
+            console.log('Theme changed:', e.detail);
+            updateStatus();
+        });
+        
+        // Listen for system theme changes
+        window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
+            console.log('System theme changed to:', e.matches ? 'light' : 'dark');
+            updateStatus();
+        });
+        
+        // Initial update - wait for first themechange event or timeout
+        let themeInitialized = false;
+        const firstThemeChange = (e) => {
+            if (!themeInitialized) {
+                themeInitialized = true;
+                window.removeEventListener('themechange', firstThemeChange);
+                updateStatus();
+            }
+        };
+        
+        window.addEventListener('themechange', firstThemeChange);
+        
+        document.addEventListener('DOMContentLoaded', () => {
+            // Wait for Starlight to initialize, then check status
+            setTimeout(() => {
+                if (!themeInitialized) {
+                    // If no themechange event fired yet, check current state
+                    themeInitialized = true;
+                    window.removeEventListener('themechange', firstThemeChange);
+                    updateStatus();
+                }
+            }, 500); // Longer delay to ensure Starlight initialization
+        });
+        
+        // Reset to auto function
+        function resetToAuto() {
+            console.log('Resetting to auto theme...');
+            if (typeof setTheme === 'function') {
+                setTheme('auto');
+                updateStatus();
+            } else {
+                console.error('setTheme function not available');
+            }
+        }
+        
+        // Also update every 2 seconds to show real-time changes
+        setInterval(updateStatus, 2000);
+        
+        // Force refresh function
+        function forceRefresh() {
+            console.log('Forcing theme refresh...');
+            // Manually trigger Starlight theme initialization
+            if (window.Starlight && window.Starlight.initTheme) {
+                window.Starlight.initTheme();
+                setTimeout(updateStatus, 100);
+            } else {
+                console.error('Starlight not available');
+            }
+        }
+    </script>
+</body>
+</html>

package/examples/travel/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Nebula Voyage | Starlight Travel</title>
     <link rel="stylesheet" href="../../dist/quantum.min.css">
+    <script src="../../src/starlight.js"></script>
     <style>
         body {
             background: radial-gradient(circle at top right, #08081a, #000);
@@ -246,22 +247,8 @@
     </footer>
 
     <script>
-        // Theme Toggle Logic
-        const themeBtn = document.getElementById('theme-btn');
-        if (themeBtn) {
-            themeBtn.addEventListener('click', () => {
-                document.body.classList.toggle('light-mode');
-                const isLight = document.body.classList.contains('light-mode');
-                
-                // Update all icons
-                document.querySelectorAll('.sun-icon').forEach(icon => {
-                    icon.classList.toggle('hidden', !isLight);
-                });
-                document.querySelectorAll('.moon-icon').forEach(icon => {
-                    icon.classList.toggle('hidden', isLight);
-                });
-            });
-        }
+        // Theme initialization and management is now handled 
+        // automatically by Starlight.initTheme() in starlight.js
     </script>
 </body>
 </html>

package/examples/verify_fixes.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>Verification of Fixes</title>
     <link rel="stylesheet" href="../dist/quantum.min.css">
+    <script src="../src/starlight.js"></script>
 </head>
 <body class="p-10 space-y-8 bg-black text-white">
     <nav class="sticky top-0 z-50 glass p-4 mb-8">

package/examples/verify_presets.html

@@ -4,7 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Quantum CSS - Verify Presets</title>
-    <link rel="stylesheet" href="../dist/quantum.css">
+    <link rel="stylesheet" href="../dist/quantum.min.css">
+    <script src="../src/starlight.js"></script>
 </head>
 <body class="bg-gray-50 p-12">
     <div class="max-w-4xl mx-auto space-y-12">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@howssatoshi/quantumcss",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "description": "Advanced utility-first CSS framework with JIT generation and modern components",
   "main": "dist/quantum.min.css",
   "bin": {
@@ -46,5 +46,11 @@
   "dependencies": {
     "chokidar": "^5.0.0",
     "glob": "^13.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "eslint": "^9.39.2",
+    "stylelint": "^17.1.1",
+    "stylelint-config-standard": "^40.0.0"
   }
 }

package/src/generator.js

@@ -58,7 +58,9 @@ function generateCSS(configPath) {
       while ((match = classAttrRegex.exec(content)) !== null) {
         match[1].split(/\s+/).forEach(cls => { if (cls) rawClasses.add(cls); });
       }
-    } catch (e) {}
+    } catch {
+      // Ignore errors reading files
+    }
   });
 
   const utilities = new Set();
@@ -67,6 +69,15 @@ function generateCSS(configPath) {
     dark: new Set()
   };
 
+  /**
+   * Escapes a class name for use in a CSS selector
+   * @param {string} cls - The raw class name
+   * @returns {string} The escaped selector
+   */
+  const escapeSelector = (cls) => {
+    return cls.replace(/([:[\]/.\\])/g, '\\$1');
+  };
+
   const sideMap = {
     p: 'padding', pt: 'padding-top', pr: 'padding-right', pb: 'padding-bottom', pl: 'padding-left',
     px: ['padding-left', 'padding-right'], py: ['padding-top', 'padding-bottom'],
@@ -159,8 +170,8 @@ function generateCSS(configPath) {
       } else if (prefix === 'col' && cParts[1] === 'span') {
         property = 'grid-column'; value = `span ${cParts[2]} / span ${cParts[2]}`;
       } else if (prefix === 'space') {
-        const amount = theme.spacing[cParts[2]] || `${parseInt(cParts[2]) * 0.25}rem`;
-        const escaped = fullCls.replace(/([:[\/])/g, '\\$1');
+        const amount = theme.spacing[cParts[2]] || `${parseFloat(cParts[2]) * 0.25}rem`;
+        const escaped = escapeSelector(fullCls);
         customSelector = `.${escaped} > * + *`;
         property = cParts[1] === 'y' ? 'margin-top' : 'margin-left';
         value = isNeg ? `-${amount}` : amount;
@@ -169,12 +180,12 @@ function generateCSS(configPath) {
         if (valKey.startsWith('[') && valKey.endsWith(']')) value = valKey.slice(1, -1);
         else if (theme.borderRadius[valKey]) value = theme.borderRadius[valKey];
         else {
-          const num = parseInt(valKey);
+          const num = parseFloat(valKey);
           value = isNaN(num) ? '0.375rem' : `${num * 0.125}rem`;
         }
       } else if (prefix === 'scale') {
         property = 'transform';
-        value = `scale(${parseInt(valKey) / 100})`;
+        value = `scale(${parseFloat(valKey) / 100})`;
       } else if (prefix === 'transition') {
         property = 'transition-property';
         if (valKey === 'all') value = 'all';
@@ -193,8 +204,8 @@ function generateCSS(configPath) {
         property = sideMap[prefix];
         let v = valKey;
         if (v.startsWith('[') && v.endsWith(']')) v = v.slice(1, -1);
-        else if (v.includes('/')) v = `${(parseInt(v.split('/')[0])/parseInt(v.split('/')[1])*100).toFixed(2)}%`;
-        else v = theme.spacing[v] || v;
+        else if (v.includes('/')) v = `${(parseFloat(v.split('/')[0])/parseFloat(v.split('/')[1])*100).toFixed(2)}%`;
+        else v = theme.spacing[v] || (isNaN(parseFloat(v)) ? v : `${parseFloat(v) * 0.25}rem`);
         value = isNeg ? (Array.isArray(v) ? v.map(x => `-${x}`) : `-${v}`) : v;
       } else if (prefix === 'shadow') {
         if (theme.shadows[valKey]) { property = 'box-shadow'; value = theme.shadows[valKey]; }
@@ -235,7 +246,7 @@ function generateCSS(configPath) {
 
     merged.forEach(group => {
       const { breakpoint, variant, customSelector, rules } = group;
-      const escapedFull = fullCls.replace(/([:[\/])/g, '\\$1');
+      const escapedFull = escapeSelector(fullCls);
       let selector = customSelector || `.${escapedFull}`;
       if (variant) { if (variant === 'group-hover') selector = `.group:hover ${selector}`; else selector += `:${variant}`}