@howssatoshi/quantumcss 1.8.0 → 1.10.1

package/examples/starlight.html

@@ -8,10 +8,11 @@
     <script src="../src/starlight.js"></script>
     <style>
         body {
-            background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 100%);
+            background: transparent !important;
             min-height: 100vh;
             overflow-x: hidden;
         }
+        header, main, section { position: relative; z-index: 1; }
         
         html[data-theme="dark"] {
             color: #f1f5f9;
@@ -36,7 +37,7 @@
             height: 50%;
             background: radial-gradient(circle, rgba(0, 212, 255, 0.15) 0%, transparent 70%);
             filter: blur(60px);
-            z-index: 0;
+            z-index: -1;
         }
 
         .hero-glow-2 {
@@ -47,7 +48,7 @@
             height: 50%;
             background: radial-gradient(circle, rgba(255, 179, 138, 0.1) 0%, transparent 70%);
             filter: blur(60px);
-            z-index: 0;
+            z-index: -1;
         }
 
         .float {

package/examples/travel/index.html

@@ -8,17 +8,22 @@
     <script src="../../src/starlight.js"></script>
     <style>
         body {
-            background: radial-gradient(circle at top right, #08081a, #000);
+            background: radial-gradient(circle at top right, var(--q-color-starlight-deep), #000);
             overflow-x: hidden;
             transition: background-color 0.5s ease, color 0.5s ease;
         }
         html[data-theme="dark"] {
-            color: #f1f5f9;
+            color: var(--q-text-primary);
         }
         html[data-theme="light"] {
-            background: #f1f5f9 !important;
-            color: #1e293b;
+            background: var(--q-light-bg) !important;
+            color: var(--q-light-text);
         }
+
+        html[data-theme="light"] body {
+            background: var(--q-light-bg) !important;
+        }
+
         .hero-glow {
             position: absolute;
             top: -10%;
@@ -27,7 +32,7 @@
             height: 60%;
             background: radial-gradient(circle, rgba(0, 212, 255, 0.15) 0%, transparent 70%);
             filter: blur(100px);
-            z-index: 0;
+            z-index: -1;
             transition: opacity 0.5s ease;
         }
 
@@ -57,19 +62,19 @@
         }
 
         html[data-theme="light"] .glass {
-            background: rgba(0, 0, 0, 0.03) !important;
-            border-color: rgba(0, 0, 0, 0.1) !important;
-            color: #1e293b !important;
+            background: var(--q-glass-bg) !important;
+            border-color: var(--q-glass-border) !important;
+            color: var(--q-light-text) !important;
         }
 
         html[data-theme="light"] .starlight-card p,
         html[data-theme="light"] header p,
         html[data-theme="light"] section p {
-            color: #475569;
+            color: var(--q-light-text-muted);
         }
 
         html[data-theme="light"] .btn-outline:hover {
-            background-color: #1e293b;
+            background-color: var(--q-light-text);
             color: white;
         }
 
@@ -86,15 +91,167 @@
         }
 
         html[data-theme="light"] input {
-            color: #1e293b !important;
+            color: var(--q-light-text) !important;
         }
 
         html[data-theme="light"] input::placeholder {
-            color: rgba(0, 0, 0, 0.3) !important;
+            color: var(--q-light-text-muted) !important;
         }
 
         html[data-theme="light"] .text-starlight-blue {
-            color: #2563eb !important;
+            color: var(--q-color-primary) !important;
+        }
+
+        html[data-theme="light"] .starlight-navbar {
+            background: var(--q-light-card-bg) !important;
+            border-bottom-color: var(--q-light-card-border) !important;
+        }
+
+        html[data-theme="light"] .starlight-navbar a {
+            color: var(--q-light-text-muted) !important;
+        }
+
+        html[data-theme="light"] .starlight-navbar a:hover {
+            color: var(--q-color-primary) !important;
+        }
+
+        html[data-theme="light"] .text-gradient-starlight {
+            background: none;
+            -webkit-text-fill-color: var(--q-light-text);
+            color: var(--q-light-text);
+        }
+
+        html[data-theme="light"] .nav-link {
+            color: var(--q-light-text-muted) !important;
+        }
+
+        html[data-theme="light"] .nav-link:hover {
+            color: var(--q-color-primary) !important;
+        }
+
+        html[data-theme="light"] .glass {
+            background: var(--q-light-card-bg) !important;
+            border-color: var(--q-light-card-border) !important;
+            color: var(--q-light-text) !important;
+        }
+
+        html[data-theme="light"] .glass input {
+            color: var(--q-light-text) !important;
+        }
+
+        html[data-theme="light"] .glass input::placeholder {
+            color: var(--q-light-text-muted) !important;
+        }
+
+        html[data-theme="light"] .glass .btn-starlight {
+            background: var(--q-light-text);
+            color: white;
+        }
+
+        html[data-theme="light"] .starlight-card {
+            background: var(--q-light-card-bg) !important;
+            border-color: var(--q-light-card-border) !important;
+        }
+
+        html[data-theme="light"] .starlight-card h3 {
+            color: var(--q-light-text) !important;
+        }
+
+        html[data-theme="light"] .starlight-card .text-slate-400 {
+            color: var(--q-light-text-muted) !important;
+        }
+
+        html[data-theme="light"] .btn-outline {
+            border-color: var(--q-light-text) !important;
+            color: var(--q-light-text) !important;
+        }
+
+        html[data-theme="light"] .btn-outline:hover {
+            background-color: var(--q-light-text) !important;
+            color: white !important;
+        }
+
+        html[data-theme="light"] .starlight-footer {
+            background: var(--q-light-bg) !important;
+            border-top-color: var(--q-light-card-border) !important;
+        }
+
+        html[data-theme="light"] .starlight-footer a {
+            color: var(--q-light-text-muted) !important;
+        }
+
+        html[data-theme="light"] .starlight-footer a:hover {
+            color: var(--q-color-primary) !important;
+        }
+
+        html[data-theme="light"] .starlight-footer p {
+            color: var(--q-light-text-muted) !important;
+        }
+
+        html[data-theme="light"] .badge-primary {
+            background-color: rgba(37, 99, 235, 0.1) !important;
+            color: var(--q-color-primary) !important;
+        }
+
+        html[data-theme="light"] .border-white_10 {
+            border-color: var(--q-light-card-border) !important;
+        }
+
+        html[data-theme="light"] .text-white {
+            color: var(--q-light-text) !important;
+        }
+
+        html[data-theme="light"] .text-white_10 {
+            color: var(--q-light-text-muted) !important;
+        }
+
+        html[data-theme="light"] .text-slate-400 {
+            color: var(--q-light-text-muted) !important;
+        }
+
+        html[data-theme="light"] .text-slate-500 {
+            color: var(--q-light-text-muted) !important;
+        }
+
+        html[data-theme="light"] .bg-white_5 {
+            background: var(--q-glass-bg) !important;
+        }
+
+        html[data-theme="light"] .border-white_10 {
+            border-color: var(--q-light-card-border) !important;
+        }
+
+        html[data-theme="light"] .border-white_5 {
+            border-color: var(--q-light-card-border) !important;
+        }
+
+        html[data-theme="light"] h1 {
+            color: var(--q-light-text) !important;
+        }
+
+        html[data-theme="light"] h2 {
+            color: var(--q-light-text) !important;
+        }
+
+        html[data-theme="light"] h3 {
+            color: var(--q-light-text) !important;
+        }
+
+        html[data-theme="light"] .bg-gray-800,
+        html[data-theme="light"] .bg-gray-700,
+        html[data-theme="light"] .bg-gray-900 {
+            background-color: var(--q-light-card-bg) !important;
+        }
+
+        /* Card image overlay text stays light due to dark gradient */
+        html[data-theme="light"] .starlight-card .absolute .badge,
+        html[data-theme="light"] .starlight-card .absolute h3 {
+            color: white !important;
+        }
+
+        /* Newsletter section text */
+        html[data-theme="light"] .bg-gradient-to-br {
+            background: linear-gradient(to bottom right, var(--q-color-primary-100), transparent) !important;
         }
     </style>
 </head>

package/examples/video-streaming.html

@@ -46,14 +46,21 @@
             margin: 0 2rem;
             display: flex;
         }
-        .search-input {
+        .video-search-input {
             flex: 1;
-            padding: 0.625rem 1rem;
+            padding: 0.625rem 1.25rem;
             background: rgba(255, 255, 255, 0.05);
             border: 1px solid rgba(255, 255, 255, 0.1);
             border-radius: 0.5rem 0 0 0.5rem;
             color: var(--text-primary, #f1f5f9);
             font-size: 0.9375rem;
+            outline: none;
+            transition: all 0.2s;
+        }
+        .video-search-input:focus {
+            border-color: var(--color-starlight, #00d4ff);
+            background: rgba(255, 255, 255, 0.08);
+            box-shadow: 0 0 0 2px var(--q-color-starlight-deep), 0 0 0 4px var(--q-color-starlight-blue);
         }
         .search-btn {
             padding: 0 1.25rem;
@@ -344,7 +351,7 @@
                 <span>Starlight</span>
             </div>
             <div class="search-bar">
-                <input type="text" class="search-input" placeholder="Search">
+                <input type="text" class="video-search-input" placeholder="Search">
                 <button class="search-btn">🔍</button>
             </div>
             <div class="header-actions">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@howssatoshi/quantumcss",
-  "version": "1.8.0",
+  "version": "1.10.1",
   "description": "Advanced utility-first CSS framework with JIT generation and modern components",
   "main": "dist/quantum.min.css",
   "bin": {

package/src/defaults.js

@@ -35,6 +35,7 @@ const defaultTheme = {
     starlight: {
       blue: '#00d4ff', peach: '#ffb38a', orange: '#ff7e5f', deep: '#08081a',
     },
+    accent: '#00d4ff',
     transparent: 'transparent',
   },
   spacing: {

package/src/generator.js

@@ -122,6 +122,9 @@ function generateCSS(configPath) {
     regex: new RegExp(`\\s${v}="([^"]+)"`, 'g')
   }));
 
+  const jitLimit = (config.jit && config.jit.limit) || 10000;
+  const jitWarnAt = (config.jit && config.jit.warnAt) || (jitLimit * 0.8);
+
   files.forEach(file => {
     try {
       const content = fs.readFileSync(file, 'utf8');
@@ -129,7 +132,9 @@ function generateCSS(configPath) {
       // 1. Match standard class="..."
       let match;
       while ((match = classAttrRegex.exec(content)) !== null) {
-        match[1].split(/\s+/).forEach(cls => { if (cls) rawClasses.add(cls); });
+        match[1].split(/\s+/).forEach(cls => { 
+          if (cls && rawClasses.size < jitLimit) rawClasses.add(cls); 
+        });
       }
       
       // 2. Match attribute lanes (e.g., md="flex gap-4")
@@ -137,7 +142,7 @@ function generateCSS(configPath) {
         regex.lastIndex = 0;
         while ((match = regex.exec(content)) !== null) {
           match[1].split(/\s+/).forEach(cls => {
-            if (cls) {
+            if (cls && rawClasses.size < jitLimit) {
               // We convert attribute-based utilities to a canonical internal format
               // using the __ separator, which getRulesForClass already understands.
               rawClasses.add(`${variant}__${cls}`);
@@ -150,6 +155,10 @@ function generateCSS(configPath) {
     }
   });
 
+  if (rawClasses.size >= jitWarnAt) {
+    console.warn(`⚠️  JIT Warning: Generated ${rawClasses.size} utilities, approaching limit of ${jitLimit}.`);
+  }
+
   const utilities = new Set();
   const responsiveUtils = { 
     sm: new Set(), md: new Set(), lg: new Set(), xl: new Set(), '2xl': new Set(),
@@ -162,7 +171,7 @@ function generateCSS(configPath) {
    * @returns {string} The escaped selector
    */
   const escapeSelector = (cls) => {
-    return cls.replace(/([:.[\]\\])/g, '\\$1');
+    return cls.replace(/([:.[\]\\/])/g, '\\$1');
   };
 
   const sideMap = {

package/src/styles/quantum-animations.css

@@ -53,42 +53,42 @@
 .ani-svg-draw {
   stroke-dasharray: 1000;
   stroke-dashoffset: 1000;
-  animation: svg-draw var(--q-duration-slow) var(--q-ease-emphasized) forwards;
+  animation: svg-draw 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
 
 .ani-float {
-  animation: float-y 6s var(--q-ease-in-out) infinite;
+  animation: float-y 6s ease-in-out infinite;
 }
 
 .ani-fade-in {
-  animation: fadeIn var(--q-duration-base) var(--q-ease-out) forwards;
+  animation: fadeIn 0.3s ease-out forwards;
 }
 
 .ani-slide-up {
-  animation: slideUp var(--q-duration-base) var(--q-ease-out) forwards;
+  animation: slideUp 0.3s ease-out forwards;
 }
 
 .ani-slide-down {
-  animation: slideDown var(--q-duration-base) var(--q-ease-out) forwards;
+  animation: slideDown 0.3s ease-out forwards;
 }
 
 .ani-scale-in {
-  animation: scaleIn var(--q-duration-fast) var(--q-ease-out) forwards;
+  animation: scaleIn 0.2s ease-out forwards;
 }
 
 .ani-spin {
-  animation: spin 1s var(--q-ease-linear) infinite;
+  animation: spin 1s linear infinite;
 }
 
 /* Staggered Animations */
-.ani-stagger-1 { animation-delay: var(--q-duration-fast); }
-.ani-stagger-2 { animation-delay: var(--q-duration-base); }
-.ani-stagger-3 { animation-delay: var(--q-duration-slow); }
-.ani-stagger-4 { animation-delay: 500ms; }
-.ani-stagger-5 { animation-delay: var(--q-duration-slower); }
+.ani-stagger-1 { animation-delay: 0.1s; }
+.ani-stagger-2 { animation-delay: 0.2s; }
+.ani-stagger-3 { animation-delay: 0.3s; }
+.ani-stagger-4 { animation-delay: 0.4s; }
+.ani-stagger-5 { animation-delay: 0.5s; }
 
 /* Speed Modifiers */
-.ani-fast { animation-duration: var(--q-duration-fast) !important; }
+.ani-fast { animation-duration: 0.5s !important; }
 .ani-slow { animation-duration: 8s !important; }
 .ani-slower { animation-duration: 15s !important; }