@howssatoshi/quantumcss 1.6.2 → 1.7.0

package/src/defaults.js

@@ -17,6 +17,21 @@ const defaultTheme = {
       100: '#d1fae5',
       500: '#10b981'
     },
+    purple: {
+      50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce'
+    },
+    yellow: {
+      50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207'
+    },
+    pink: {
+      50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d'
+    },
+    cyan: {
+      50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490'
+    },
+    indigo: {
+      50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca'
+    },
     starlight: {
       blue: '#00d4ff', peach: '#ffb38a', orange: '#ff7e5f', deep: '#08081a',
     },
@@ -65,6 +80,7 @@ const utilityMaps = {
   'min-w-0': { property: 'min-width', value: '0' },
   'overflow-hidden': { property: 'overflow', value: 'hidden' },
   'overflow-visible': { property: 'overflow', value: 'visible' },
+  'bg-clip-text': { property: ['background-clip', '-webkit-background-clip'], value: ['text', 'text'] },
   'border-none': { property: 'border-width', value: '0' },
   'bg-transparent': { property: 'background-color', value: 'transparent' },
   'relative': { property: 'position', value: 'relative' },
@@ -77,6 +93,49 @@ const utilityMaps = {
   'w-5': { property: 'width', value: '1.25rem' },
   'h-5': { property: 'height', value: '1.25rem' },
   'z-10': { property: 'z-index', value: '10' },
+  'svg-fluid': {
+    property: ['width', 'height', 'max-width', 'display'],
+    value: ['100%', 'auto', '100%', 'block']
+  },
+  'svg-contain': { property: 'object-fit', value: 'contain' },
+  'svg-cover': { property: 'object-fit', value: 'cover' },
+  'vector-non-scaling': { property: 'vector-effect', value: 'non-scaling-stroke' },
+  'overlay-base': {
+    property: ['position', 'top', 'left', 'transform'],
+    value: ['absolute', '50%', '50%', 'translate(-50%, -50%)']
+  },
+  'overlay-top-left': { property: ['position', 'top', 'left'], value: ['absolute', '0', '0'] },
+  'overlay-top-right': { property: ['position', 'top', 'right'], value: ['absolute', '0', '0'] },
+  'overlay-bottom-left': { property: ['position', 'bottom', 'left'], value: ['absolute', '0', '0'] },
+  'overlay-bottom-right': { property: ['position', 'bottom', 'right'], value: ['absolute', '0', '0'] },
+  'nav-base': {
+    property: ['display', 'flex-direction', 'align-items', 'width', 'position', 'top', 'z-index'],
+    value: ['flex', 'row', 'center', '100%', 'sticky', '0', '1000']
+  },
+  'card-base': {
+    property: ['display', 'flex-direction', 'align-items', 'padding', 'overflow', 'border-radius', 'transition', 'position'],
+    value: ['flex', 'column', 'stretch', 'var(--q-space-10)', 'hidden', 'var(--q-radius-lg)', 'all 0.3s ease', 'relative']
+  },
+  'btn-base': {
+    property: ['display', 'align-items', 'justify-content', 'cursor', 'transition', 'font-weight', 'border-radius', 'border'],
+    value: ['inline-flex', 'center', 'center', 'pointer', 'all 0.2s ease', '600', 'var(--q-radius-md)', 'none']
+  },
+  'input-base': {
+    property: ['display', 'width', 'appearance', 'transition', 'border-radius', 'border'],
+    value: ['block', '100%', 'none', 'all 0.2s ease', 'var(--q-radius-md)', 'none']
+  },
+  'dialog-base': {
+    property: ['display', 'flex-direction', 'align-items', 'padding', 'overflow-y', 'border-radius', 'position'],
+    value: ['flex', 'column', 'stretch', 'var(--q-space-10)', 'auto', 'var(--q-radius-xl)', 'relative']
+  },
+  'modal-fixed': {
+    property: ['position', 'top', 'left', 'transform', 'max-width', 'max-height', 'z-index'],
+    value: ['fixed', '50%', '50%', 'translate(-50%, -50%)', '90vw', '90vh', '2000']
+  },
+  'badge-base': {
+    property: ['display', 'align-items', 'justify-content', 'font-size', 'font-weight', 'text-transform', 'letter-spacing', 'border-radius', 'border'],
+    value: ['inline-flex', 'center', 'center', '0.75rem', '600', 'uppercase', '0.05em', 'var(--q-radius-sm)', 'none']
+  },
   'form-row': {
     property: ['display', 'justify-content', 'align-items', 'gap'],
     value: ['flex', 'space-between', 'center', '1rem']
@@ -89,45 +148,43 @@ const utilityMaps = {
     property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter', 'border-width', 'border-color'], 
     value: ['rgba(255, 255, 255, 0.03)', 'blur(16px)', 'blur(16px)', '1px', 'rgba(255, 255, 255, 0.1)'] 
   },
-  'glow-blue': { property: 'box-shadow', value: '0 0 30px rgba(0, 212, 255, 0.25)' },
-  'bg-starlight': { property: 'background', value: 'linear-gradient(135deg, #ffb38a 0%, #00d4ff 100%)' },
+  'bg-starlight': { property: 'background', value: 'linear-gradient(135deg, var(--q-color-starlight-peach) 0%, var(--q-color-starlight-blue) 100%)' },
   'text-gradient-starlight': {
     property: ['background', '-webkit-background-clip', '-webkit-text-fill-color', 'display'], 
-    value: ['linear-gradient(to right, #ffb38a, #00d4ff)', 'text', 'transparent', 'inline-block'] 
+    value: ['linear-gradient(to right, var(--q-color-starlight-peach), var(--q-color-starlight-blue))', 'text', 'transparent', 'inline-block'] 
   },
-  'btn-starlight': {
-    property: ['background', 'color', 'border', 'box-shadow', 'font-weight', 'transition', 'height', 'padding', 'display', 'align-items', 'justify-content', 'border-radius', 'cursor'],
-    value: ['linear-gradient(135deg, #ffb38a 0%, #00d4ff 100%)', '#000', 'none', '0 0 20px rgba(0, 212, 255, 0.3)', '700', 'all 0.2s ease', '3rem', '0 1.5rem', 'inline-flex', 'center', 'center', '0.5rem', 'pointer']
+  'theme-starlight': {
+    property: ['background', 'color', 'border-color', 'box-shadow'],
+    value: ['linear-gradient(135deg, var(--q-color-starlight-peach) 0%, var(--q-color-starlight-blue) 100%)', '#000', 'transparent', '0 0 30px rgba(0, 212, 255, 0.2)']
   },
-  'btn-secondary': {
-    property: ['background', 'color', 'border', 'font-weight', 'transition', 'height', 'padding', 'display', 'align-items', 'justify-content', 'border-radius', 'cursor', 'backdrop-filter', '-webkit-backdrop-filter'],
-    value: ['rgba(255, 255, 255, 0.05)', '#ffffff', '1px solid rgba(255, 255, 255, 0.15)', '700', 'all 0.2s ease', '3rem', '0 1.5rem', 'inline-flex', 'center', 'center', '0.5rem', 'pointer', 'blur(12px)', 'blur(12px)']
+  'theme-glass': {
+    property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter', 'border-color', 'border-width'],
+    value: ['rgba(255, 255, 255, 0.05)', 'blur(16px)', 'blur(16px)', 'rgba(255, 255, 255, 0.1)', '1px']
   },
-  'input-starlight': {
-    property: ['background-color', 'border', 'color', 'border-radius', 'padding', 'appearance', 'transition', 'height'],
-    value: ['rgba(255, 255, 255, 0.04)', '1px solid rgba(255, 255, 255, 0.15)', 'inherit', '0.75rem', '0 1rem', 'none', 'all 0.2s ease', '3rem']
+  'theme-glass-dark': {
+    property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter', 'border-color', 'border-width'],
+    value: ['rgba(255, 255, 255, 0.05)', 'blur(24px)', 'blur(24px)', 'rgba(255, 255, 255, 0.1)', '1px']
   },
-  'textarea-starlight': {
-    property: ['background-color', 'border', 'color', 'border-radius', 'padding', 'appearance', 'transition', 'min-height', 'width', 'display'],
-    value: ['rgba(255, 255, 255, 0.04)', '1px solid rgba(255, 255, 255, 0.15)', 'inherit', '0.75rem', '1rem', 'none', 'all 0.2s ease', '8rem', '100%', 'block']
-  },
-      'checkbox-starlight': {
-      property: ['appearance', 'width', 'height', 'background', 'border', 'border-radius', 'cursor', 'transition', 'position', 'display', 'align-items', 'justify-content'],
-      value: ['none', '1.25rem', '1.25rem', 'rgba(255, 255, 255, 0.05)', '1px solid rgba(255, 255, 255, 0.2)', '0.375rem', 'pointer', 'all 0.2s ease', 'relative', 'inline-flex', 'center', 'center']
-    },
-    'search-container': 'relative block w-full',
+  'glow-blue': { property: 'box-shadow', value: '0 0 30px rgba(0, 212, 255, 0.25)' },
+  'glow-starlight': { property: 'box-shadow', value: '0 0 30px rgba(0, 212, 255, 0.25)' },
+  'glow-peach': { property: 'box-shadow', value: '0 0 30px rgba(255, 179, 138, 0.25)' },
+  'glow-orange': { property: 'box-shadow', value: '0 0 30px rgba(255, 126, 95, 0.25)' },
+  'btn-starlight': 'btn-base theme-starlight h-12 px-6',
+  'btn-secondary': 'btn-base theme-glass-dark h-12 px-6 border-white/15',
+  'input-starlight': 'input-base theme-glass-dark h-12 px-4 border-white/15',
+  'textarea-starlight': 'input-base theme-glass-dark p-4 min-h-32 border-white/15',
+  'checkbox-starlight': 'btn-base theme-glass-dark w-5 h-5 border-white/20',
+  'search-container': 'relative block w-full',
     'search-input': 'pl-12 w-full',
     'search-icon': 'absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none z-10 w-5 h-5',
-    'nav-glass': {
-      property: ['background', 'backdrop-filter', '-webkit-backdrop-filter', 'border-bottom', 'width', 'display', 'flex-direction', 'padding', 'position', 'top', 'z-index'],
-      value: ['rgba(255, 255, 255, 0.05)', 'blur(24px)', 'blur(24px)', '1px solid rgba(255, 255, 255, 0.1)', '100%', 'flex', 'column', '0', 'sticky', '0', '1000']
-    },
-    'starlight-nav': 'nav-glass w-full sticky top-0 z-[1000]',
-    'starlight-search': 'search-container w-full max-w-144',
-    'starlight-dashboard': 'dashboard-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8',
-    'starlight-gallery': 'starlight-gallery grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4',
-    'starlight-form': 'starlight-card grid grid-cols-1 md:grid-cols-2 gap-8',
-    'starlight-dialog': 'starlight-dialog ani-scale-in'
+    'nav-glass': 'nav-base theme-glass-dark',
+    'starlight-card': 'card-base theme-glass-dark',
+    'starlight-nav': 'nav-base theme-glass-dark px-4 md:px-8',
+    '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': 'starlight-card grid grid-cols-1 md:grid-cols-2 gap-8 items-start',
+    'starlight-dialog': 'dialog-base modal-fixed theme-glass-dark ani-scale-in'
   };
   
   module.exports = { defaultTheme, utilityMaps };

package/src/generator.js

@@ -51,6 +51,22 @@ function generateCSS(configPath) {
     return null;
   }
 
+  const getRGBA = (color) => {
+    if (!color || color === 'transparent') return 'rgba(0,0,0,0)';
+    if (color.startsWith('rgba')) return color;
+    if (color.startsWith('#')) {
+      const hex = color.length === 4 ? `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}` : color;
+      const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+      return `rgba(${r}, ${g}, ${b}, 1)`;
+    }
+    return color;
+  };
+
+  const withOpacity = (rgba, alpha) => {
+    if (!rgba.startsWith('rgba')) return rgba;
+    return rgba.replace(/[\d.]+\)$/, `${alpha})`);
+  };
+
   const files = (config.content || []).flatMap(p => glob.sync(p));
   const rawClasses = new Set();
   const classAttrRegex = /class="([^"]+)"/g;
@@ -150,8 +166,42 @@ function generateCSS(configPath) {
       if (prefix === 'text') {
         if (theme.fontSize[valKey]) { property = ['font-size', 'line-height']; value = [theme.fontSize[valKey], (valKey.includes('xl') || parseInt(valKey) >= 3) ? '1.2' : '1.5']; }
         else { const color = resolveColor(valKey); if (color) { property = 'color'; value = color; } }
-      } else if (prefix === 'bg') { const color = resolveColor(valKey); if (color) { property = 'background-color'; value = color; } }
-      else if (prefix === 'z') { 
+      } else if (prefix === 'bg') {
+        if (cParts[1] === 'gradient' && cParts[2] === 'to') {
+          const dirMap = { r: 'to right', l: 'to left', t: 'to top', b: 'to bottom', tr: 'to top right', tl: 'to top left', br: 'to bottom right', bl: 'to bottom left' };
+          const dir = dirMap[cParts[3]];
+          if (dir) {
+            property = 'background-image';
+            value = `linear-gradient(${dir}, var(--q-gradient-stops))`;
+            const rules = [
+              '  --q-gradient-from-transparent: rgba(0,0,0,0);',
+              '  --q-gradient-to-transparent: rgba(0,0,0,0);',
+              `  ${property}: ${value};`,
+              '  --q-gradient-stops: var(--q-gradient-from, var(--q-gradient-from-transparent)), var(--q-gradient-to, var(--q-gradient-to-transparent));'
+            ];
+            return [{ breakpoint: null, variant: null, customSelector: null, rules }];
+          }
+        }
+        const color = resolveColor(valKey); 
+        if (color) { property = 'background-color'; value = color; } 
+      } else if (prefix === 'from') {
+        const color = resolveColor(valKey);
+        if (color) {
+          const rgba = getRGBA(color);
+          property = ['--q-gradient-from', '--q-gradient-to', '--q-gradient-from-transparent', '--q-gradient-stops'];
+          value = [rgba, withOpacity(rgba, 0), withOpacity(rgba, 0), 'var(--q-gradient-from), var(--q-gradient-to)'];
+        }
+      } else if (prefix === 'via') {
+        const color = resolveColor(valKey);
+        if (color) {
+          const rgba = getRGBA(color);
+          property = ['--q-gradient-to', '--q-gradient-to-transparent', '--q-gradient-stops'];
+          value = [withOpacity(rgba, 0), withOpacity(rgba, 0), `var(--q-gradient-from), ${rgba}, var(--q-gradient-to)`];
+        }
+      } else if (prefix === 'to') {
+        const color = resolveColor(valKey);
+        if (color) { property = '--q-gradient-to'; value = getRGBA(color); }
+      } else if (prefix === 'z') { 
         if (valKey.startsWith('[') && valKey.endsWith(']')) value = valKey.slice(1, -1);
         else value = isNeg ? `-${valKey}` : valKey;
         property = 'z-index';
@@ -259,11 +309,23 @@ function generateCSS(configPath) {
       if (variant) { if (variant === 'group-hover') selector = `.group:hover ${selector}`; else selector += `:${variant}`}
       
       if (breakpoint === 'light') {
-        const block = `body.light-mode ${selector} {
+        const block = `html[data-theme="light"] ${selector}, body.light-mode ${selector} {
+${rules.join('\n')}
+}
+`;
+        utilities.add(block);
+      } else if (breakpoint === 'dark') {
+        const block = `html[data-theme="dark"] ${selector}, body.dark-mode ${selector} {
 ${rules.join('\n')}
 }
 `;
         utilities.add(block);
+        // Also add to media query for system preference
+        const mediaBlock = `${selector} {
+${rules.join('\n')}
+}
+`;
+        responsiveUtils['dark'].add(mediaBlock);
       } else {
         const block = `${selector} {
 ${rules.join('\n')}
@@ -275,7 +337,39 @@ ${rules.join('\n')}
   }
 
   rawClasses.forEach(processClass);
-  let css = '/* Quantum CSS JIT Output */\n' + Array.from(utilities).join('\n');
+
+  let rootVariables = ':root {\n';
+  
+  // Recursively flatten theme for variables
+  const generateVars = (obj, prefix = '') => {
+    Object.entries(obj).forEach(([key, value]) => {
+      if (typeof value === 'string') {
+        rootVariables += `  --q-${prefix}${key}: ${value};\n`;
+      } else if (typeof value === 'object' && value !== null) {
+        generateVars(value, `${prefix}${key}-`);
+      }
+    });
+  };
+
+  // Map theme keys to standard prefixes
+  const themeMap = {
+    colors: 'color-',
+    spacing: 'space-',
+    borderRadius: 'radius-',
+    shadows: 'shadow-',
+    fontSize: 'size-',
+    maxWidth: 'max-w-'
+  };
+
+  Object.entries(themeMap).forEach(([themeKey, varPrefix]) => {
+    if (theme[themeKey]) {
+      generateVars(theme[themeKey], varPrefix);
+    }
+  });
+
+  rootVariables += '}\n\n';
+
+  let css = '/* Quantum CSS JIT Output */\n' + rootVariables + Array.from(utilities).join('\n');
   Object.entries(breakpoints).forEach(([name, width]) => {
     if (responsiveUtils[name] && responsiveUtils[name].size > 0) {
       css += `\n@media (min-width: ${width}) {\n${Array.from(responsiveUtils[name]).map(u => '  ' + u.replace(/\n/g, '\n  ')).join('\n').trimEnd()}\n}\n`;

package/src/starlight.js

@@ -7,15 +7,23 @@ const Starlight = {
   /**
    * Initializes a randomized star field in the target container.
    * @param {string} selector - CSS selector for the container (default: '.starlight-stars')
-   * @param {number} count - Number of stars to generate (default: 150)
+   * @param {number} count - Number of stars to generate (default: 100)
    */
-  initStars(selector = '.starlight-stars', count = 150) {
+  initStars(selector = '.starlight-stars', count = 100) {
     const containers = document.querySelectorAll(selector);
     
+    // Check for reduced motion preference
+    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    
     containers.forEach(container => {
       // Clear existing stars if any
       container.innerHTML = '';
       
+      // If user prefers reduced motion, maybe skip or show static stars
+      if (prefersReducedMotion) {
+        count = Math.floor(count / 2); // Show fewer stars if motion is reduced
+      }
+      
       for (let i = 0; i < count; i++) {
         const star = document.createElement('div');
         star.className = 'star';
@@ -30,7 +38,12 @@ const Starlight = {
         star.style.height = `${size}px`;
         
         // Randomize animation duration (2s to 5s)
-        star.style.setProperty('--duration', `${Math.random() * 3 + 2}s`);
+        if (!prefersReducedMotion) {
+          star.style.setProperty('--q-duration', `${Math.random() * 3 + 2}s`);
+        } else {
+          star.style.animation = 'none';
+          star.style.opacity = (Math.random() * 0.3 + 0.1).toString();
+        }
         
         container.appendChild(star);
       }
@@ -242,8 +255,11 @@ const Starlight = {
     });
     
     // Fallback for legacy accordion-header (backward compatibility)
+    // Only target headers that are NOT already managed by a data-accordion container
     const legacyHeaders = document.querySelectorAll('.accordion-header:not([data-accordion])');
     legacyHeaders.forEach(header => {
+      if (header.closest('[data-accordion]')) return;
+      
       const item = header.parentElement;
       const group = item.closest('.accordion-group');
       

package/src/styles/quantum-animations.css

@@ -43,11 +43,11 @@
 }
 
 .ani-twinkle {
-  animation: star-twinkle var(--twinkle-duration, 3s) ease-in-out infinite;
+  animation: star-twinkle var(--q-twinkle-duration, 3s) ease-in-out infinite;
 }
 
 .ani-orbit {
-  animation: orbit var(--orbit-duration, 10s) linear infinite;
+  animation: orbit var(--q-orbit-duration, 10s) linear infinite;
 }
 
 .ani-svg-draw {