@howssatoshi/quantumcss 1.8.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@howssatoshi/quantumcss",
-  "version": "1.8.0",
+  "version": "1.11.0",
   "description": "Advanced utility-first CSS framework with JIT generation and modern components",
   "main": "dist/quantum.min.css",
   "bin": {
@@ -19,7 +19,9 @@
     "watch": "node scripts/build.js --watch",
     "docs": "node scripts/build.js --docs",
     "generate": "node src/cli.js",
-    "generate:watch": "node src/cli.js --watch"
+    "generate:watch": "node src/cli.js --watch",
+    "harvest:icons": "node scripts/harvest-icons.js",
+    "release": "node scripts/release.js"
   },
   "repository": {
     "type": "git",
@@ -44,8 +46,12 @@
     "node": ">=14.0.0"
   },
   "dependencies": {
+    "autoprefixer": "^10.4.27",
     "chokidar": "^5.0.0",
-    "glob": "^13.0.0"
+    "cssnano": "^7.1.3",
+    "glob": "^13.0.0",
+    "parse5": "^8.0.0",
+    "postcss": "^8.5.8"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",

package/src/cli.js

@@ -115,12 +115,12 @@ function build(outputPath = 'dist/quantum.css') {
 function scaffold(template, targetPath = 'index.html') {
   const templatesDir = path.resolve(__dirname, '../examples');
   const templateMap = {
-    gaming: 'gaming-template.html',
-    blog: 'blog-template.html',
-    travel: 'travel/index.html',
-    shopping: 'shopping/index.html',
+    gaming: 'gaming-portal.html',
+    blog: 'blog.html',
+    travel: 'travel.html',
+    shopping: 'shopping.html',
     starlight: 'starlight.html',
-    news: 'news-template.html',
+    news: 'news.html',
     docs: 'kitchen-sink.html'
   };
 

package/src/defaults.js

@@ -35,6 +35,7 @@ const defaultTheme = {
     starlight: {
       blue: '#00d4ff', peach: '#ffb38a', orange: '#ff7e5f', deep: '#08081a',
     },
+    accent: '#00d4ff',
     transparent: 'transparent',
   },
   spacing: {
@@ -149,7 +150,7 @@ const utilityMaps = {
     value: ['rgba(255, 255, 255, 0.03)', 'blur(16px)', 'blur(16px)', '1px', 'solid', 'rgba(255, 255, 255, 0.1)'] 
   },
   'bg-starlight': { property: 'background', value: 'linear-gradient(135deg, var(--q-color-starlight-peach) 0%, var(--q-color-starlight-blue) 100%)' },
-  'text-gradient-starlight': {
+  'text-gradient': {
     property: ['background', '-webkit-background-clip', '-webkit-text-fill-color', 'display'], 
     value: ['linear-gradient(to right, var(--q-color-starlight-peach), var(--q-color-starlight-blue))', 'text', 'transparent', 'inline-block'] 
   },
@@ -162,10 +163,10 @@ const utilityMaps = {
     value: ['rgba(255, 255, 255, 0.05)', 'blur(16px)', 'blur(16px)', 'rgba(255, 255, 255, 0.1)', '1px', 'solid']
   },
   'theme-glass-dark': {
-    property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter', 'border-color', 'border-width', 'border-style'],
-    value: ['rgba(255, 255, 255, 0.05)', 'blur(16px)', 'blur(16px)', 'rgba(255, 255, 255, 0.1)', '1px', 'solid']
+    property: ['background-color', 'border-color', 'border-width', 'border-style'],
+    value: ['rgba(255, 255, 255, 0.05)', 'rgba(255, 255, 255, 0.1)', '1px', 'solid']
   },
-  'starlight-dialog-bg': { 
+  'dialog-bg': { 
     property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter'], 
     value: ['rgba(8, 8, 26, 0.05) !important', 'blur(24px) !important', 'blur(24px) !important'] 
   },
@@ -186,22 +187,24 @@ const utilityMaps = {
   'search-container': 'relative block w-full h-12',
     'search-input': 'pl-12 w-full h-12',
     'search-icon': 'absolute left-4 top-1_2 -translate-y-1_2 pointer-events-none z-10 w-5 h-5',
-    'nav-glass': 'nav-base theme-glass-dark',
+    'nav-glass': 'nav-base theme-glass-dark border-b',
     'starlight-card': 'card-base theme-glass-dark',
     'starlight-card-interactive': 'card-base theme-glass-dark hover:border-white_20 hover:-translate-y-1 transition-all duration-300',
-    'starlight-nav': 'nav-base theme-glass-dark w-full',
-    'starlight-navbar': 'nav-base theme-glass-dark w-full sticky top-0 z-50 border-b border-white_10',
+    'nav-header': 'nav-base theme-glass-dark w-full sticky top-0 z-50 border-b',
+    'starlight-nav': 'nav-header',
+    'starlight-navbar': 'nav-header border-white_10',
     'starlight-hero': 'container mx-auto px-6 py-16 md:py-24 text-center relative overflow-hidden',
     'starlight-footer': 'border-t border-white_10 py-12 mt-20 bg-black_20 backdrop-blur-md',
-    'starlight-sidebar-nav': 'flex flex-col h-full p-6 bg-black_40 backdrop-blur-xl border-r border-white_10',
+    'aside-nav': 'flex flex-col h-full backdrop-blur-xl border-r border-white_10',
+    'starlight-sidebar-nav': 'aside-nav p-6',
     'nav-reverse': { property: 'flex-direction', value: 'row-reverse' },
     'nav-center': { property: 'display', value: 'grid' },
     'hamburger-left': { property: 'order', value: '-1' },
-    'starlight-search': 'search-container theme-glass-dark rounded-xl',
-    'starlight-dashboard': 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8',
-    'starlight-gallery': 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4',
-    'starlight-form': 'card-base theme-glass-dark grid grid-cols-1 md:grid-cols-2 gap-8 items-start',
-    'starlight-dialog': 'dialog-base modal-fixed theme-glass-dark starlight-dialog-bg ani-scale-in',
+    'search': 'search-container theme-glass-dark rounded-xl',
+    'dashboard': 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8',
+    'gallery': 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4',
+    'form': 'card-base theme-glass-dark grid grid-cols-1 md:grid-cols-2 gap-8 items-start',
+    'dialog': 'dialog-base modal-fixed theme-glass-dark dialog-bg ani-scale-in',
     'starlight-sidebar': 'flex flex-col h-screen w-72 fixed left-0 top-0 bg-black_40 backdrop-blur-xl border-r border-white_10 p-6 z-40',
     'starlight-feed-card': 'flex flex-col bg-white_03 backdrop-blur-md border border-white_10 rounded-2xl p-6 transition-all duration-300 ease',
     'starlight-auth-form': 'flex flex-col max-w-md mx-auto bg-white_05 backdrop-blur-xl border border-white_10 rounded-2xl p-10 shadow-2xl',
@@ -262,9 +265,9 @@ const utilityMaps = {
     'starlight-breadcrumb-separator': 'text-white_40',
     'starlight-breadcrumb-current': 'font-medium',
 
-    'starlight-gallery-grid': 'grid gap-4',
-    'starlight-gallery-item': 'relative aspect-video rounded-lg overflow-hidden',
-    'starlight-gallery-overlay': 'absolute inset-0 flex items-end p-4 bg-gradient-to-t from-black_80 to-transparent opacity-0 transition-opacity',
+    'gallery-grid': 'grid gap-4',
+    'gallery-item': 'relative aspect-video rounded-lg overflow-hidden',
+    'gallery-overlay': 'absolute inset-0 flex items-end p-4 bg-gradient-to-t from-black_80 to-transparent opacity-0 transition-opacity',
 
     'starlight-progress': 'flex items-center gap-3',
     'starlight-progress-bar': 'flex-1 h-2 bg-white_10 rounded-full overflow-hidden',

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/starlight.js

@@ -439,7 +439,7 @@ const Starlight = {
       iconSelector: {
         light: '.sun-icon, [data-theme-icon="light"]',
         dark: '.moon-icon, [data-theme-icon="dark"]',
-        auto: '.system-icon, [data-theme-icon="auto"]'
+        auto: '.q-icon-display, [data-theme-icon="auto"]'
       },
       autoDetect: true
     };
@@ -457,25 +457,30 @@ const Starlight = {
      * @param {string} effectiveTheme - The actual theme being displayed
      */
     const updateIcons = (theme, effectiveTheme) => {
-      const hasAutoIcon = document.querySelector(config.iconSelector.auto) !== null;
+      const autoIconSelector = config.iconSelector.auto;
+      const hasAutoIcon = autoIconSelector && document.querySelector(autoIconSelector) !== null;
       
+      if (theme === 'auto' && hasAutoIcon) {
+        // Auto mode with auto icon: show only auto icon
+        document.querySelectorAll(autoIconSelector).forEach(icon => {
+          icon.classList.remove('hidden');
+        });
+        // Hide light/dark icons
+        const lightSelector = config.iconSelector.light;
+        const darkSelector = config.iconSelector.dark;
+        document.querySelectorAll(`${lightSelector}, ${darkSelector}`).forEach(icon => {
+          icon.classList.add('hidden');
+        });
+        return;
+      }
+      
+      // Otherwise use normal theme-based visibility
       config.themes.forEach(t => {
         const selector = config.iconSelector[t];
         if (selector) {
           document.querySelectorAll(selector).forEach(icon => {
-            if (theme === 'auto') {
-              // In auto mode, show system icon if it exists, otherwise show the effective theme icon
-              const isAutoIcon = t === 'auto';
-              const isEffectiveIcon = t === effectiveTheme;
-              
-              if (hasAutoIcon) {
-                icon.classList.toggle('hidden', !isAutoIcon);
-              } else {
-                icon.classList.toggle('hidden', !isEffectiveIcon);
-              }
-            } else {
-              icon.classList.toggle('hidden', t !== theme);
-            }
+            const isEffective = theme === 'auto' ? t === effectiveTheme : t === theme;
+            icon.classList.toggle('hidden', !isEffective);
           });
         }
       });

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; }
 

package/src/styles/quantum-base.css

@@ -1,12 +1,8 @@
 /*!
- * QuantumCSS Core
- * Layer: Core / Tokens & Base
- * 
- * ARCHITECTURAL CONTRACT:
- * 1. Core layer MUST NEVER reference brand-specific tokens (e.g., --q-color-starlight).
- * 2. Core layer MUST ONLY use semantic tokens (e.g., --q-color-primary, --q-color-bg).
- * 3. Aesthetics (gradients, specific colors) are injected by the Theme layer.
- * 4. This file contains the non-optional compliance and reset layers.
+ * QuantumCSS + Starlight UI
+ * Advanced utility-first framework with ethereal cosmic aesthetics
+ * Version: 1.7.3
+ * Features: Modern CSS, JIT Engine, Starlight Components, Dark Mode
  */
 
 @import 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap';
@@ -33,29 +29,6 @@
   --q-color-error: #ef4444;
   --q-color-neutral: #6b7280;
 
-  /* Semantic Color Tokens (Core Layer) */
-  --q-color-bg: var(--q-bg-primary);
-  --q-color-bg-muted: color-mix(in srgb, var(--q-color-bg), var(--q-color-neutral) 5%);
-  --q-color-surface: var(--q-card-bg);
-  --q-color-surface-elevated: color-mix(in srgb, var(--q-color-surface), white 2%);
-  --q-color-border: var(--q-card-border);
-  --q-color-border-strong: color-mix(in srgb, var(--q-color-border), white 10%);
-
-  --q-color-text: var(--q-text-primary);
-  --q-color-text-muted: var(--q-text-secondary);
-  --q-color-text-inverse: #000;
-
-  --q-color-primary-hover: var(--q-color-primary-600);
-  --q-color-success-soft: color-mix(in srgb, var(--q-color-success) 15%, transparent);
-  --q-color-warning-soft: color-mix(in srgb, var(--q-color-warning) 15%, transparent);
-  --q-color-danger: var(--q-color-error);
-  --q-color-danger-soft: color-mix(in srgb, var(--q-color-danger) 15%, transparent);
-  --q-color-info: var(--q-color-primary);
-  --q-color-info-soft: color-mix(in srgb, var(--q-color-info) 15%, transparent);
-
-  --q-color-link: var(--q-color-primary);
-  --q-color-link-hover: var(--q-color-primary-hover);
-
   /* Typography */
   --q-font-sans: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   --q-font-serif: Georgia, Cambria, serif;
@@ -94,18 +67,19 @@
   --q-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
   --q-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);
 
-  /* Animation & Motion Tokens */
-  --q-duration-instant: 0ms;
-  --q-duration-fast: 150ms;
-  --q-duration-base: 250ms;
-  --q-duration-slow: 400ms;
-  --q-duration-slower: 700ms;
-
+  /* Animation */
+  --q-duration-75: 75ms;
+  --q-duration-100: 100ms;
+  --q-duration-150: 150ms;
+  --q-duration-200: 200ms;
+  --q-duration-300: 300ms;
+  --q-duration-500: 500ms;
+  --q-duration-700: 700ms;
+  --q-duration-1000: 1000ms;
   --q-ease-linear: linear;
   --q-ease-in: cubic-bezier(0.4, 0, 1, 1);
   --q-ease-out: cubic-bezier(0, 0, 0.2, 1);
   --q-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-  --q-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
 
   /* --- Starlight Specific Tokens --- */
   --q-color-starlight: var(--q-color-starlight-blue);
@@ -138,9 +112,9 @@
   --q-glass-blur: blur(16px);
 
   /* Transitions */
-  --q-transition-fast: var(--q-duration-fast) var(--q-ease-in-out);
-  --q-transition-base: var(--q-duration-base) var(--q-ease-in-out);
-  --q-transition-slow: var(--q-duration-slow) var(--q-ease-in-out);
+  --q-transition-fast: 150ms ease-in-out;
+  --q-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --q-transition-slow: 400ms ease-in-out;
 }
 
 /* High Contrast (Accessibility) Mode Support */
@@ -201,7 +175,7 @@ html {
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: var(--q-color-starlight-deep);
+  background-color: var(--q-bg-primary);
   scrollbar-width: thin;
   scrollbar-color: var(--q-color-starlight-blue) transparent;
 }
@@ -210,6 +184,10 @@ body {
   line-height: inherit;
 }
 
+ul, ol {
+  list-style: none;
+}
+
 input, textarea, select, button {
   font-family: inherit;
   font-size: inherit;
@@ -584,6 +562,7 @@ textarea {
 .font-semibold { font-weight: 600; }
 .font-bold { font-weight: 700; }
 .font-extrabold { font-weight: 800; }
+.font-black { font-weight: 900; }
 
 .text-left { text-align: left; }
 .text-center { text-align: center; }
@@ -591,8 +570,10 @@ textarea {
 .text-justify { text-align: justify; }
 
 /* Color Utilities */
-.text-primary { color: var(--q-color-primary); }
-.text-secondary { color: var(--q-color-secondary); }
+.text-primary { color: var(--q-text-primary); }
+.text-secondary { color: var(--q-text-secondary); }
+.text-muted { color: var(--q-text-muted); }
+.text-accent { color: var(--q-color-primary); }
 .text-success { color: var(--q-color-success); }
 .text-warning { color: var(--q-color-warning); }
 .text-error { color: var(--q-color-error); }
@@ -600,7 +581,9 @@ textarea {
 .text-white { color: #fff; }
 .text-black { color: #000; }
 
-.bg-primary { background-color: var(--q-color-primary); }
+.bg-primary { background-color: var(--q-bg-primary); }
+.bg-surface { background-color: var(--q-color-surface); }
+.bg-accent { background-color: var(--q-color-primary); }
 .bg-secondary { background-color: var(--q-color-secondary); }
 .bg-success { background-color: var(--q-color-success); }
 .bg-warning { background-color: var(--q-color-warning); }
@@ -772,13 +755,13 @@ textarea {
 .transition-all {
   transition-property: all;
   transition-timing-function: var(--q-ease-in-out);
-  transition-duration: var(--q-duration-fast);
+  transition-duration: var(--q-duration-150);
 }
 
 .transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: var(--q-ease-in-out);
-  transition-duration: var(--q-duration-fast);
+  transition-duration: var(--q-duration-150);
 }
 
 /* Transform Utilities */
@@ -832,6 +815,8 @@ textarea {
 
 /* Z-Index Utilities */
 .z-auto { z-index: auto; }
+.z-n10 { z-index: -10; }
+.z-n1 { z-index: -1; }
 .z-0 { z-index: 0; }
 .z-10 { z-index: 10; }
 .z-20 { z-index: 20; }
@@ -885,12 +870,14 @@ textarea {
   color: var(--q-color-primary-600);
 }
 
-/* Reduced Motion Compliance Layer */
+/* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
-  * {
-    animation-duration: 0ms !important;
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
-    transition-duration: 0ms !important;
+    transition-duration: 0.01ms !important;
     scroll-behavior: auto !important;
   }
 }
@@ -937,6 +924,39 @@ html[data-theme="light"] {
   --q-text-primary: var(--q-light-text);
   --q-text-secondary: var(--q-light-text-muted);
   --q-text-muted: var(--q-light-text-muted);
+  
+  --q-card-bg: color-mix(in srgb, #fff, transparent 5%);
+  --q-card-border: color-mix(in srgb, #000, transparent 90%);
+  --q-card-shadow: 0 10px 40px rgb(0 0 0 / 10%);
+  
+  --q-btn-primary-bg: linear-gradient(135deg, var(--q-color-starlight-peach) 40%, var(--q-color-starlight-blue) 100%);
+  --q-btn-primary-hover-bg: linear-gradient(135deg, var(--q-color-starlight-peach) 50%, var(--q-color-starlight-blue) 110%);
+  --q-btn-primary-color: #fff;
+  
+  --q-input-bg: #fff;
+  --q-input-border: #cbd5e1;
+  
+  --q-dropdown-bg: rgba(255, 255, 255, 0.98);
+  --q-dropdown-border: color-mix(in srgb, #000, transparent 82%);
+  --q-dropdown-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
+  
+  --q-glass-bg: color-mix(in srgb, #fff, transparent 15%);
+  --q-glass-border: color-mix(in srgb, #000, transparent 82%);
+  
+  --q-color-bg: var(--q-bg-primary);
+  --q-color-surface: var(--q-card-bg);
+  --q-color-border: var(--q-card-border);
+  --q-color-border-strong: color-mix(in srgb, var(--q-color-border), black 15%);
+  --q-color-text: var(--q-text-primary);
+  
+  --q-color-bg-muted: color-mix(in srgb, var(--q-color-bg), black 10%);
+  
+  --q-skeleton-bg: color-mix(in srgb, var(--q-color-bg), black 10%);
+  --q-skeleton-shimmer: color-mix(in srgb, var(--q-color-bg), black 5%);
+  
+  /* Highlights & Highlights Transparency */
+  --q-highlight-bg: color-mix(in srgb, var(--q-color-primary), transparent 80%);
+  --q-highlight-border: color-mix(in srgb, var(--q-color-primary), transparent 60%);
 
   scrollbar-color: var(--q-color-starlight-blue) transparent;
 }
@@ -946,16 +966,49 @@ html[data-theme="dark"] {
 
   --q-bg-primary: var(--q-color-starlight-deep);
   --q-text-primary: #f1f5f9;
+  
+  --q-card-bg: color-mix(in srgb, #fff, transparent 94%);
+  --q-card-border: color-mix(in srgb, #fff, transparent 88%);
+  --q-card-shadow: 0 25px 50px -12px rgb(0 0 0 / 60%);
+  
+  --q-btn-primary-bg: #00d4ff;
+  --q-btn-primary-hover-bg: #00b8e6;
+  --q-btn-primary-color: #fff;
+  
+  --q-input-bg: color-mix(in srgb, #fff, transparent 92%);
+  --q-input-border: color-mix(in srgb, #fff, transparent 75%);
+  
+  --q-dropdown-bg: color-mix(in srgb, #08081a, transparent 15%);
+  --q-dropdown-border: color-mix(in srgb, #fff, transparent 80%);
+  --q-dropdown-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
+  
+  --q-glass-bg: color-mix(in srgb, #fff, transparent 90%);
+  --q-glass-border: color-mix(in srgb, #fff, transparent 85%);
+  
+  --q-color-bg: var(--q-bg-primary);
+  --q-color-surface: var(--q-card-bg);
+  --q-color-border: var(--q-card-border);
+  --q-color-border-strong: color-mix(in srgb, var(--q-color-border), white 15%);
+  --q-color-text: var(--q-text-primary);
+  
+  --q-color-bg-muted: color-mix(in srgb, var(--q-color-bg), white 10%);
+  
+  --q-skeleton-bg: color-mix(in srgb, var(--q-color-surface), white 5%);
+  --q-skeleton-shimmer: color-mix(in srgb, var(--q-color-surface), white 10%);
+  
+  /* Highlights & Highlights Transparency */
+  --q-highlight-bg: color-mix(in srgb, var(--q-color-primary), transparent 60%);
+  --q-highlight-border: color-mix(in srgb, var(--q-color-primary), transparent 40%);
 }
 
 /* Force theme colors on body to override template-specific hardcoded styles */
 html[data-theme="light"] body {
-  background: var(--q-light-bg) !important;
+  background-color: var(--q-light-bg) !important;
   color: var(--q-light-text);
 }
 
 html[data-theme="dark"] body {
-  background: var(--q-color-starlight-deep) !important;
+  background-color: var(--q-color-starlight-deep) !important;
   color: #f1f5f9;
 }
 
@@ -1000,12 +1053,11 @@ html[data-theme="light"] :focus, html[data-theme="light"] :focus-visible {
 body {
   margin: 0;
   min-height: 100vh;
-  background-color: var(--q-bg-primary);
+  background-color: transparent;
   color: var(--q-text-primary);
   transition: background-color var(--q-transition-slow), color var(--q-transition-slow);
-
-
-
+  position: relative;
+  z-index: 1;
 }