@howssatoshi/quantumcss 1.7.2 → 1.7.4

package/examples/kitchen-sink.html

@@ -8,11 +8,11 @@
     <script src="../src/starlight.js"></script>
     <style>
         .token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
-        .swatch { height: 4rem; border-radius: 0.5rem; margin-bottom: 0.5rem; border: 1px solid rgba(0,0,0,0.1); }
+        .swatch { height: 4rem; border-radius: 0.5rem; margin-bottom: 0.5rem; border: 1px solid rgba(0, 0, 0, 0.1); }
         .spacing-bar { height: 1rem; background: var(--q-color-starlight-blue, #3b82f6); border-radius: 0.25rem; }
         section { margin-bottom: 4rem; }
-        h2 { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; border-bottom: 2px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem; }
-        body.light-mode h2 { border-bottom-color: rgba(0,0,0,0.1); }
+        h2 { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; border-bottom: 2px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.5rem; }
+        body.light-mode h2 { border-bottom-color: rgba(0, 0, 0, 0.1); }
         .token-name { font-family: monospace; font-size: 0.875rem; opacity: 0.7; }
         .token-value { font-size: 0.75rem; opacity: 0.5; }
         .ani-card { background: #0f172a; color: white; transition: all 0.3s; }
@@ -23,15 +23,46 @@
             position: fixed; top: 2rem; right: 2rem; z-index: 100; cursor: pointer; 
             width: 3rem; height: 3rem; border-radius: 50%; 
             display: flex; align-items: center; justify-content: center;
-            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); 
+            background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); 
             color: white; transition: all 0.3s ease; backdrop-filter: blur(10px); 
         }
         .theme-toggle:hover { background: rgba(255,255,255,0.15); transform: scale(1.1); }
-        body.light-mode .theme-toggle { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.1); color: #0f172a; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+        body.light-mode .theme-toggle { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.1); color: #0f172a; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
         body.light-mode .theme-toggle:hover { background: #f8fafc; }
         .sun-icon { display: none; }
         body.light-mode .sun-icon { display: block; }
         body.light-mode .moon-icon { display: none; }
+
+        /* Theme Designer Panel */
+        .designer-panel {
+            position: fixed; bottom: 2rem; right: 2rem; z-index: 1000;
+            width: 320px; background: rgba(8, 8, 26, 0.85);
+            backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
+            border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1.5rem;
+            padding: 1.5rem; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            transform: translateY(0);
+        }
+        .designer-panel.minimized { transform: translateY(calc(100% - 3.5rem)); }
+        .designer-header { 
+            display: flex; justify-content: space-between; align-items: center; 
+            margin-bottom: 1.5rem; cursor: pointer;
+        }
+        .designer-title { font-weight: 900; font-size: 0.75rem; text-transform: uppercase; tracking-widest; opacity: 0.8; }
+        .control-group { margin-bottom: 1.25rem; }
+        .control-label { display: flex; justify-content: space-between; font-size: 0.7rem; text-transform: uppercase; font-weight: 700; margin-bottom: 0.5rem; opacity: 0.6; }
+        .designer-slider { width: 100%; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; appearance: none; outline: none; }
+        .designer-slider::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; background: var(--q-color-starlight-blue, #00d4ff); border-radius: 50%; cursor: pointer; box-shadow: 0 0 10px var(--q-color-starlight-blue); }
+        .designer-btn { 
+            width: 100%; padding: 0.75rem; border-radius: 0.75rem; border: none; 
+            background: var(--q-color-starlight-blue); color: #000; font-weight: 800; 
+            font-size: 0.75rem; text-transform: uppercase; cursor: pointer; transition: all 0.2s;
+        }
+        .designer-btn:hover { filter: brightness(1.1); transform: scale(1.02); }
+        .designer-btn:active { transform: scale(0.98); }
+        
+        body.light-mode .designer-panel { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.1); color: #000; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
+        body.light-mode .designer-slider { background: rgba(0, 0, 0, 0.1); }
     </style>
 </head>
 <body class="p-8">
@@ -842,10 +873,10 @@
                             <span class="token-name">.btn-primary</span>
                             <span class="text-[10px] opacity-50 uppercase font-bold">Preset</span>
                         </div>
-                        <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg mb-4">
+                        <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl mb-4">
                             <button class="btn-primary">Preset Button</button>
                         </div>
-                        <div class="token-value text-xs bg-black/20 p-3 rounded font-mono">btn-starlight px-6 py-2 shadow-md hover:scale-105 active:scale-95</div>
+                        <div class="token-value text-xs bg-black_20 p-3 rounded font-mono">btn-starlight px-6 py-2 shadow-md hover:scale-105 active:scale-95</div>
                     </div>
                 
                     <div class="starlight-card p-6">
@@ -853,10 +884,10 @@
                             <span class="token-name">.btn-secondary</span>
                             <span class="text-[10px] opacity-50 uppercase font-bold">Preset</span>
                         </div>
-                        <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg mb-4">
+                        <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl mb-4">
                             <button class="btn-secondary">Preset Button</button>
                         </div>
-                        <div class="token-value text-xs bg-black/20 p-3 rounded font-mono">btn-base theme-glass px-6 py-2 shadow-md hover:bg-white/10 active:scale-95</div>
+                        <div class="token-value text-xs bg-black_20 p-3 rounded font-mono">btn-base theme-glass px-6 py-2 shadow-md hover:bg-white_10 active:scale-95</div>
                     </div>
                 
                     <div class="starlight-card p-6">
@@ -864,10 +895,10 @@
                             <span class="token-name">.card-premium</span>
                             <span class="text-[10px] opacity-50 uppercase font-bold">Preset</span>
                         </div>
-                        <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg mb-4">
+                        <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl mb-4">
                             <div class="card-premium"><h4 class="font-bold">Preset Card</h4><p class="text-sm opacity-70">Using card-premium</p></div>
                         </div>
-                        <div class="token-value text-xs bg-black/20 p-3 rounded font-mono">card-base theme-glass p-8 shadow-xl</div>
+                        <div class="token-value text-xs bg-black_20 p-3 rounded font-mono">card-base theme-glass p-8 shadow-xl</div>
                     </div>
                 
             </div>
@@ -880,49 +911,49 @@
             <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                 <div class="starlight-card p-6">
                     <div class="mb-4 token-name">btn-base</div>
-                    <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
+                    <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl">
                         <button class="btn-base">Button Example</button>
                     </div>
                 </div>
                 <div class="starlight-card p-6">
                     <div class="mb-4 token-name">input-base</div>
-                    <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
+                    <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl">
                         <input class="input-base" placeholder="Input Example">
                     </div>
                 </div>
                 <div class="starlight-card p-6">
                     <div class="mb-4 token-name">glass</div>
-                    <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
-                        <div class="glass p-8 rounded-xl border border-white/20">Glass Effect</div>
+                    <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl">
+                        <div class="glass p-8 rounded-xl">Glass Effect</div>
                     </div>
                 </div>
                 <div class="starlight-card p-6">
                     <div class="mb-4 token-name">bg-starlight</div>
-                    <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
+                    <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl">
                         <div class="bg-starlight p-8 rounded-xl w-full text-center">Example Block</div>
                     </div>
                 </div>
                 <div class="starlight-card p-6">
                     <div class="mb-4 token-name">text-gradient-starlight</div>
-                    <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
+                    <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl">
                         <div class="text-gradient-starlight p-8 rounded-xl w-full text-center">Example Block</div>
                     </div>
                 </div>
                 <div class="starlight-card p-6">
                     <div class="mb-4 token-name">btn-starlight</div>
-                    <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
+                    <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl">
                         <button class="btn-starlight">Button Example</button>
                     </div>
                 </div>
                 <div class="starlight-card p-6">
                     <div class="mb-4 token-name">btn-secondary</div>
-                    <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
+                    <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl">
                         <button class="btn-secondary">Button Example</button>
                     </div>
                 </div>
                 <div class="starlight-card p-6">
                     <div class="mb-4 token-name">input-starlight</div>
-                    <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
+                    <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl">
                         <input class="input-starlight" placeholder="Input Example">
                     </div>
                 </div>
@@ -936,12 +967,12 @@
             <div class="grid grid-cols-1 gap-12">
                 <!-- Navigation -->
                 <div class="starlight-card p-0 mb-12">
-                    <div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Navigation Menu (.starlight-nav)</div>
+                    <div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Navigation Menu (.starlight-nav)</div>
                     <div class="relative">
-                        <nav class="starlight-nav relative">
-                            <div class="p-4 md:px-8 flex justify-between items-center w-full">
+                        <nav class="starlight-nav w-full relative border-none shadow-none">
+                            <div class="nav-container">
                                 <div class="font-bold text-xl text-gradient-starlight">Starlight OS</div>
-                                <div class="flex items-center gap-8">
+                                <div class="flex items-center gap-8 ml-auto">
                                     <div class="nav-desktop">
                                         <ul class="nav-list">
                                             <li><a href="#" class="nav-link">Fleet</a></li>
@@ -980,15 +1011,15 @@
                                 </ul>
                             </div>
                         </nav>
-                        <div class="p-12 text-center opacity-50 italic text-sm border-t border-white/5 light:bg-slate-300">Horizontal layout (standard)</div>
+                        <div class="p-12 text-center opacity-50 italic text-sm border-t border-white_5 light:bg-slate-300">Horizontal layout (standard)</div>
                     </div>
                 </div>
 
                 <!-- Vertical Navigation -->
                 <div class="starlight-card p-0">
-                    <div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Vertical Sidebar (.starlight-nav.vertical)</div>
+                    <div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Vertical Sidebar (.starlight-nav.vertical)</div>
                     <div class="flex h-[400px] overflow-hidden">
-                        <nav class="starlight-nav vertical static border-r border-white/10">
+                        <nav class="starlight-nav vertical w-full static border-r border-white_10">
                             <div class="font-bold text-xl text-gradient-starlight mb-8">Starlight OS</div>
                             <div class="nav-desktop block w-full">
                                 <ul class="nav-list vertical w-full">
@@ -1013,7 +1044,7 @@
 
                 <!-- Search -->
                 <div class="starlight-card p-0 overflow-hidden">
-                    <div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Interactive Search (.starlight-search)</div>
+                    <div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Interactive Search (.starlight-search)</div>
                     <div class="p-12 flex flex-col items-center gap-6">
                         <div class="starlight-search">
                             <svg class="search-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
@@ -1025,7 +1056,7 @@
 
                 <!-- Dashboard -->
                 <div class="starlight-card p-0 overflow-hidden">
-                    <div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Dashboard Grid (.starlight-dashboard)</div>
+                    <div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Dashboard Grid (.starlight-dashboard)</div>
                     <div class="p-8">
                         <div class="starlight-dashboard">
                             <div class="starlight-card stat-card light:shadow-lg">
@@ -1058,7 +1089,7 @@
 
                 <!-- Gallery -->
                 <div class="starlight-card p-0 overflow-hidden">
-                    <div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Gallery Widget (.starlight-gallery)</div>
+                    <div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Gallery Widget (.starlight-gallery)</div>
                     <div class="p-8">
                         <div class="starlight-gallery">
                             <div class="gallery-item">
@@ -1083,7 +1114,7 @@
 
                 <!-- Form -->
                 <div class="starlight-card p-0 overflow-hidden">
-                    <div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Advanced Form (.starlight-form)</div>
+                    <div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Advanced Form (.starlight-form)</div>
                     <div class="p-8">
                         <div class="starlight-form">
                             <div class="flex flex-col gap-4">
@@ -1111,10 +1142,10 @@
 
                 <!-- Dialog -->
                 <div class="starlight-card p-0">
-                    <div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Dialog Window (.starlight-dialog)</div>
+                    <div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Dialog Window (.starlight-dialog)</div>
                     <div class="p-8">
                         <!-- Inline Preview -->
-                        <div class="dialog-base theme-glass-dark relative mx-auto mb-8 shadow-none border-white/10" style="max-width: 500px;">
+                        <div class="dialog-base theme-glass-dark relative mx-auto mb-8 shadow-none border-white_10" style="max-width: 500px;">
                             <h3 class="text-xl font-bold mb-4 text-gradient-starlight">System Preview</h3>
                             <p class="mb-6 opacity-70 text-sm">This is an inline preview of the dialog component. It scales to fit its container.</p>
                             <div class="flex gap-4">
@@ -1123,7 +1154,7 @@
                             </div>
                         </div>
                         
-                        <div class="text-center pt-4 border-t border-white/5">
+                        <div class="text-center pt-4">
                             <button class="btn-starlight" onclick="toggleDialog(true)">Launch Overlay Dialog</button>
                         </div>
                     </div>
@@ -1131,7 +1162,7 @@
 
                 <!-- Accordion -->
                 <div class="starlight-card p-0 overflow-hidden">
-                    <div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Accordion Group (.accordion-starlight)</div>
+                    <div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Accordion Group (.accordion-starlight)</div>
                     <div class="p-8">
                         <div class="max-w-2xl mx-auto" data-accordion>
                             <div class="accordion-item accordion-starlight active">
@@ -1158,7 +1189,7 @@
 
                 <!-- Tabs -->
                 <div class="starlight-card p-0 overflow-hidden">
-                    <div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Tab Interface (.tab-list)</div>
+                    <div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Tab Interface (.tab-list)</div>
                     <div class="p-8">
                         <div class="max-w-2xl mx-auto">
                             <div class="tab-list mb-4">
@@ -1193,7 +1224,7 @@
             </div>
         </section>
 
-        <footer class="mt-20 pt-8 border-t border-white/10 opacity-50 text-sm">
+        <footer class="mt-20 opacity-50 text-sm">
             Generated by Quantum CSS Dynamic Docs · 3/1/2026
         </footer>
     </div>
@@ -1206,7 +1237,7 @@
             </button>
             <h3 class="text-2xl font-bold mb-4 text-gradient-starlight">System Override</h3>
             <p class="mb-6 opacity-70">You are about to bypass safety protocols. This action is irreversible.</p>
-            <div class="bg-black/20 p-4 rounded-lg mb-6 font-mono text-xs border border-white/5">
+            <div class="bg-black/20 p-4 rounded-lg mb-6 font-mono text-xs border border-white_5">
                 <div class="text-success">> STATUS: AUTHORIZED</div>
                 <div class="text-success">> CORE: ACCESSIBLE</div>
             </div>
@@ -1217,7 +1248,102 @@
         </div>
     </div>
 
+    <!-- Theme Designer Panel -->
+    <div class="designer-panel" id="designerPanel">
+        <div class="designer-header" onclick="document.getElementById('designerPanel').classList.toggle('minimized')">
+            <div class="designer-title">Theme Designer</div>
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+        </div>
+        
+        <div class="control-group">
+            <div class="control-label"><span>Primary Hue</span> <span id="hueVal">217°</span></div>
+            <input type="range" class="designer-slider" id="hueSlider" min="0" max="360" value="217">
+        </div>
+
+        <div class="control-group">
+            <div class="control-label"><span>Glass Blur</span> <span id="blurVal">16px</span></div>
+            <input type="range" class="designer-slider" id="blurSlider" min="0" max="40" value="16">
+        </div>
+
+        <div class="control-group">
+            <div class="control-label"><span>Spacing Scale</span> <span id="spaceVal">1.0x</span></div>
+            <input type="range" class="designer-slider" id="spaceSlider" min="0.5" max="2" step="0.1" value="1">
+        </div>
+
+        <button class="designer-btn" onclick="copyConfig()">Copy quantum.config.json</button>
+    </div>
+
     <script>
+        // Theme Designer Logic
+        const root = document.documentElement;
+        const hueSlider = document.getElementById('hueSlider');
+        const blurSlider = document.getElementById('blurSlider');
+        const spaceSlider = document.getElementById('spaceSlider');
+
+        hueSlider.oninput = function() {
+            const h = this.value;
+            document.getElementById('hueVal').innerText = h + '°';
+            // Simple HSL to Hex approximation for primary-500
+            root.style.setProperty('--q-color-primary', 'hsl(' + h + ', 91%, 60%)');
+            root.style.setProperty('--q-color-starlight-blue', 'hsl(' + h + ', 100%, 50%)');
+        };
+
+        blurSlider.oninput = function() {
+            const b = this.value;
+            document.getElementById('blurVal').innerText = b + 'px';
+            root.style.setProperty('--q-glass-blur', 'blur(' + b + 'px)');
+            // Update all elements with inline glass overrides
+            document.querySelectorAll('.glass, .starlight-card, .starlight-nav').forEach(el => {
+                el.style.backdropFilter = 'blur(' + b + 'px)';
+                el.style.webkitBackdropFilter = 'blur(' + b + 'px)';
+            });
+        };
+
+        spaceSlider.oninput = function() {
+            const s = this.value;
+            document.getElementById('spaceVal').innerText = s + 'x';
+            // Update base spacing unit (0.25rem = 4px)
+            const base = 0.25 * s;
+            for(let i=1; i<=64; i++) {
+                root.style.setProperty('--q-space-' + i, (base * i) + 'rem');
+            }
+        };
+
+        function copyConfig() {
+            const h = hueSlider.value;
+            const b = blurSlider.value;
+            const config = {
+                theme: {
+                    extend: {
+                        colors: {
+                            primary: 'hsl(' + h + ', 91%, 60%)',
+                            starlight: 'hsl(' + h + ', 100%, 50%)'
+                        },
+                        glass: {
+                            blur: 'blur(' + b + 'px)'
+                        }
+                    }
+                }
+            };
+            navigator.clipboard.writeText(JSON.stringify(config, null, 2));
+            const btn = document.querySelector('.designer-btn');
+            const oldText = btn.innerText;
+            btn.innerText = 'COPIED!';
+            setTimeout(() => btn.innerText = oldText, 2000);
+        }
+
+        // Theme Toggle
+        function toggleTheme() {
+            const body = document.body;
+            if (body.classList.contains('light-mode')) {
+                body.classList.remove('light-mode');
+                document.documentElement.setAttribute('data-theme', 'dark');
+            } else {
+                body.classList.add('light-mode');
+                document.documentElement.setAttribute('data-theme', 'light');
+            }
+        }
+
         // Dialog Toggle
         function toggleDialog(show) {
             const dialog = document.getElementById('systemDialog');

package/examples/news-template.html

@@ -77,7 +77,7 @@
 
         nav {
             background-color: #020617 !important;
-            border-bottom-color: rgba(255, 255, 255, 0.1) !important;
+             ottom-color: rgba(255, 255, 255, 0.1) !important;
         }
 
         /* Light Mode Overrides */
@@ -110,7 +110,7 @@
 
         body.light-mode nav {
             background-color: #ffffff !important;
-            border-bottom-color: #0f172a !important;
+             ottom-color: #0f172a !important;
         }
 
         body.light-mode .theme-toggle {
@@ -131,12 +131,12 @@
         }
 
         /* Glassy Hover for Icons */
-        .hover\:glass-light:hover {
+        .hover\:glass-light="hover" {
             background-color: rgba(255, 255, 255, 0.1) !important;
             backdrop-filter: blur(4px);
         }
 
-        body.light-mode .hover\:glass-light:hover {
+        body.light-mode .hover\:glass-light="hover" {
             background-color: rgba(0, 0, 0, 0.05) !important;
             backdrop-filter: blur(4px);
         }
@@ -147,21 +147,21 @@
 </head>
 <body class="font-sans antialiased">
     <!-- Top Bar -->
-    <div class="border-b border-slate-100 py-2 bg-slate-50">
+    <div class="  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">
             <div>Monday, February 2, 2026</div>
             <div class="flex gap-6">
-                <a href="#" class="hover:text-slate-900">Archive</a>
-                <a href="#" class="hover:text-slate-900">Terminal</a>
-                <a href="#" class="hover:text-slate-900">Status: Stable</a>
+                <a href="#" class="hover="text-slate-900"">Archive</a>
+                <a href="#" class="hover="text-slate-900"">Terminal</a>
+                <a href="#" class="hover="text-slate-900"">Status: Stable</a>
             </div>
         </div>
     </div>
 
     <!-- Navigation -->
-    <nav class="border-b border-slate-900 border-b-4 sticky top-0 bg-white z-50">
+    <nav class="border-b border-slate-900 sticky top-0 bg-white z-50">
         <div class="container mx-auto px-6 py-6 flex flex-col md:flex-row justify-between items-center gap-6">
-            <div class="text-4xl font-black tracking-tighter uppercase italic text-primary">QUANTUM<span class="text-blue-600">NEWS</span></div>
+            <div class="text-2xl sm:text-4xl font-black tracking-tighter uppercase italic text-primary">QUANTUM<span class="text-blue-600">NEWS</span></div>
             <div class="flex flex-wrap justify-center gap-8 text-xs font-black uppercase tracking-widest">
                 <a href="#" class="border-b-2 border-transparent hover:border-blue-600 transition-colors">Quantum Computing</a>
                 <a href="#" class="border-b-2 border-transparent hover:border-blue-600 transition-colors">Neural Nets</a>
@@ -169,8 +169,8 @@
                 <a href="#" class="border-b-2 border-transparent hover:border-blue-600 transition-colors">Space-X</a>
                 <a href="#" class="text-blue-600">Live Updates</a>
             </div>
-            <div class="flex items-center gap-4">
-                <button class="w-10 h-10 flex items-center justify-center hover:glass-light rounded-full transition-colors text-primary">
+            <div class="flex items-center flex-wrap justify-center gap-4">
+                <button class="w-10 h-10 flex items-center justify-center hover:bg-slate-100 rounded-full transition-colors text-primary">
                     <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                 </button>
                 <div id="theme-btn" class="theme-toggle text-primary" title="Toggle Theme">
@@ -271,7 +271,7 @@
 
     <!-- Footer -->
     <footer class="bg-slate-900 text-white py-20 mt-24">
-        <div class="container mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-12 border-b border-slate-800 pb-16">
+        <div class="container mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-12 pb-16">
             <div class="col-span-1 md:col-span-2">
                 <div class="text-3xl font-black tracking-tighter uppercase italic mb-6 text-primary">QUANTUM<span class="text-blue-600">NEWS</span></div>
                 <p class="text-slate-400 max-w-md text-sm leading-relaxed">Reporting from the edge of tomorrow. We translate complex breakthroughs into human experience.</p>

package/examples/portfolio-resume.html

@@ -422,7 +422,7 @@
                 <li><a href="#contact">Contact</a></li>
             </ul>
             <button class="btn btn-secondary" onclick="toggleTheme()" style="padding: 0.5rem 1rem;">
-                <svg class="sun-icon" style="display:none;" width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
+                <svg class="sun-icon hidden" width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
                 <svg class="moon-icon" width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
             </button>
         </div>
@@ -638,15 +638,30 @@
 
     <script>
         function toggleTheme() {
-            document.body.classList.toggle('light-mode');
-            localStorage.setItem('theme', document.body.classList.contains('light-mode') ? 'light' : 'dark');
-            document.querySelector('.sun-icon').style.display = document.body.classList.contains('light-mode') ? 'inline' : 'none';
-            document.querySelector('.moon-icon').style.display = document.body.classList.contains('light-mode') ? 'none' : 'inline';
+            const isLight = document.body.classList.toggle('light-mode');
+            const theme = isLight ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', theme);
+            localStorage.setItem('theme', theme);
+            updateIcons(isLight);
         }
-        if (localStorage.getItem('theme') === 'light') {
+
+        function updateIcons(isLight) {
+            const sun = document.querySelector('.sun-icon');
+            const moon = document.querySelector('.moon-icon');
+            if (isLight) {
+                sun.classList.remove('hidden');
+                moon.classList.add('hidden');
+            } else {
+                sun.classList.add('hidden');
+                moon.classList.remove('hidden');
+            }
+        }
+
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme === 'light') {
             document.body.classList.add('light-mode');
-            document.querySelector('.sun-icon').style.display = 'inline';
-            document.querySelector('.moon-icon').style.display = 'none';
+            document.documentElement.setAttribute('data-theme', 'light');
+            updateIcons(true);
         }
     </script>
 </body>

package/examples/shopping/index.html

@@ -55,8 +55,8 @@
             color: #f1f5f9 !important;
         }
 
-        body.dark-mode .bg-white\/80,
-        html[data-theme="dark"] .bg-white\/80 {
+        body.dark-mode .bg-white\_80,
+        html[data-theme="dark"] .bg-white\_80 {
             background-color: rgba(2, 6, 23, 0.8) !important;
         }
 
@@ -141,7 +141,7 @@
     </div>
 
     <!-- Navigation -->
-    <nav class="bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-200">
+    <nav class="bg-white_80 backdrop-blur-md sticky top-0 z-50">
         <div class="max-w-[1440px] mx-auto px-8 py-4 flex justify-between items-center">
             <div class="text-2xl font-black tracking-tighter uppercase text-primary">QUANTUM<span class="text-orange-600">STORE</span></div>
             <div class="hidden lg:flex space-x-12 text-[11px] font-black uppercase tracking-[0.2em]">
@@ -166,7 +166,7 @@
     </nav>
 
     <!-- Header Section -->
-    <header class="bg-white border-b border-slate-100">
+    <header class="bg-white">
         <div class="max-w-[1440px] mx-auto px-8 py-12">
             <div class="flex flex-col md:flex-row justify-between items-end gap-12">
                 <div class="max-w-2xl">
@@ -176,7 +176,7 @@
                 </div>
                 <div class="flex items-center space-x-6">
                     <span class="text-xs font-bold text-slate-400 uppercase tracking-widest">Sort by</span>
-                    <select class="input-starlight h-14 min-w-56 text-slate-900 border-slate-200">
+                    <select class="input-starlight h-14 min-w-56 text-slate-900 border-none">
                         <option>Newest Arrivals</option>
                         <option>Price: Low to High</option>
                         <option>Price: High to Low</option>
@@ -213,7 +213,7 @@
                     <h4 class="font-black uppercase text-[10px] tracking-[0.3em] text-slate-400 mb-8">Color Way</h4>
                     <div class="flex flex-wrap gap-4" id="color-swatches">
                         <button class="w-10 h-10 rounded-full border-2 border-slate-900 color-swatch selected transition-transform" style="background-color: #0f172a;"></button>
-                        <button class="w-10 h-10 rounded-full border-2 border-slate-200 color-swatch transition-transform" style="background-color: #ffffff;"></button>
+                        <button class="w-10 h-10 rounded-full border-2 border-none color-swatch transition-transform" style="background-color: #ffffff;"></button>
                         <button class="w-10 h-10 rounded-full border-2 border-transparent color-swatch transition-transform" style="background-color: #ea580c;"></button>
                         <button class="w-10 h-10 rounded-full border-2 border-transparent color-swatch transition-transform" style="background-color: #2563eb;"></button>
                     </div>
@@ -225,7 +225,7 @@
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-8 gap-y-16">
                     <!-- Product 1 -->
                     <div class="product-card group cursor-pointer block">
-                        <div class="aspect-[3/4] bg-slate-100 relative overflow-hidden mb-6 rounded-2xl border border-slate-100">
+                        <div class="aspect-[3/4] bg-slate-100 relative overflow-hidden mb-6 rounded-2xl  ">
                             <img src="images/windbreaker.jpg" alt="Neon Pulse" class="product-image w-full h-full object-cover">
                             <div class="absolute top-4 left-4 flex flex-col space-y-2">
                                 <span class="badge badge-primary bg-orange-600 text-white border-none px-3 py-1 text-[9px] shadow-lg font-black tracking-widest">New Season</span>
@@ -245,10 +245,10 @@
 
                     <!-- Product 2 -->
                     <div class="product-card group cursor-pointer block">
-                        <div class="aspect-[3/4] bg-slate-100 relative overflow-hidden mb-6 rounded-2xl border border-slate-100">
+                        <div class="aspect-[3/4] bg-slate-100 relative overflow-hidden mb-6 rounded-2xl  ">
                             <img src="images/sneakers.jpg" alt="Gravity-Lock" class="product-image w-full h-full object-cover">
                             <div class="absolute top-4 left-4">
-                                <span class="badge badge-secondary bg-slate-900/80 text-white border-none px-3 py-1 text-[9px] backdrop-blur-md font-black tracking-widest">Best Seller</span>
+                                <span class="badge badge-secondary bg-slate-900_80 text-white border-none px-3 py-1 text-[9px] backdrop-blur-md font-black tracking-widest">Best Seller</span>
                             </div>
                             <div class="absolute inset-x-4 bottom-4 opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300">
                                 <button class="btn-starlight w-full border-none rounded-xl text-[9px] font-black uppercase tracking-widest py-4 shadow-2xl">Quick Add</button>
@@ -265,7 +265,7 @@
 
                     <!-- Product 3 -->
                     <div class="product-card group cursor-pointer block">
-                        <div class="aspect-[3/4] bg-slate-100 relative overflow-hidden mb-6 rounded-2xl border border-slate-100">
+                        <div class="aspect-[3/4] bg-slate-100 relative overflow-hidden mb-6 rounded-2xl  ">
                             <img src="images/headset.jpg" alt="Neural Link" class="product-image w-full h-full object-cover">
                             <div class="absolute top-4 left-4">
                                 <span class="badge badge-secondary bg-blue-600 text-white border-none px-3 py-1 text-[9px] shadow-lg font-black tracking-widest">Pre-Order</span>
@@ -285,8 +285,8 @@
                 </div>
 
                 <!-- Pagination -->
-                <div class="mt-20 flex justify-center items-center space-x-6 w-full border-t border-slate-100 pt-16">
-                    <button class="glass w-12 h-12 flex items-center justify-center p-0 text-base shadow-sm font-black border-blue-600/50">1</button>
+                <div class="mt-20 flex flex-wrap justify-center items-center gap-4 space-x-0 md:space-x-6 w-full pt-16">
+                    <button class="glass w-12 h-12 flex items-center justify-center p-0 text-base shadow-sm font-black border-none">1</button>
                     <button class="glass w-12 h-12 flex items-center justify-center p-0 text-slate-400 hover:text-slate-900 transition-all text-base opacity-60 hover:opacity-100">2</button>
                     <button class="glass w-12 h-12 flex items-center justify-center p-0 text-slate-400 hover:text-slate-900 transition-all text-base opacity-60 hover:opacity-100">3</button>
                     <div class="px-4 text-slate-200 font-black text-lg">/</div>
@@ -323,12 +323,12 @@
                 <div class="lg:col-span-4 space-y-8">
                     <h5 class="text-[10px] font-black uppercase tracking-[0.3em] text-slate-600">Neural Connect</h5>
                     <div class="flex flex-col space-y-4">
-                        <input type="email" class="input-starlight h-12 w-full bg-slate-900 border-slate-800 text-white placeholder:text-slate-600" placeholder="id@nexus.io">
-                        <button class="btn-starlight w-full h-12 text-[10px] font-black uppercase tracking-widest shadow-2xl shadow-orange-600/20">Sync Comms Link</button>
+                        <input type="email" class="input-starlight h-12 w-full bg-slate-900 border-none text-white placeholder:text-slate-600" placeholder="id@nexus.io">
+                        <button class="btn-starlight w-full h-12 text-[10px] font-black uppercase tracking-widest shadow-2xl shadow-orange-600_20">Sync Comms Link</button>
                     </div>
                 </div>
             </div>
-            <div class="mt-20 pt-12 border-t border-white/5 flex justify-between items-center text-[10px] font-bold text-slate-600 uppercase tracking-widest">
+            <div class="mt-20 pt-12   flex justify-between items-center text-[10px] font-bold text-slate-600 uppercase tracking-widest">
                 <p>© 2026 Quantum Store</p>
                 <p class="italic tracking-normal">Encrypted Connection Verified</p>
             </div>