@howssatoshi/quantumcss 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@howssatoshi/quantumcss",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Advanced utility-first CSS framework with JIT generation and modern components",
   "main": "dist/quantum.min.css",
   "bin": {
@@ -16,12 +16,13 @@
     "build": "node scripts/build.js --minify",
     "build:dev": "node scripts/build.js",
     "watch": "node scripts/build.js --watch",
+    "docs": "node scripts/build.js --docs",
     "generate": "node src/cli.js",
     "generate:watch": "node src/cli.js --watch"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/macroadster/quantumcss.git"
+    "url": "git+https://github.com/macroadster/quantumcss.git"
   },
   "bugs": {
     "url": "https://github.com/macroadster/quantumcss/issues"

package/src/cli.js

@@ -20,8 +20,61 @@ function build(outputPath) {
   }
 }
 
+function scaffold(template, targetPath) {
+  const templatesDir = path.resolve(__dirname, '../examples');
+  const templateMap = {
+    gaming: 'gaming-template.html',
+    blog: 'blog-template.html',
+    travel: 'travel/index.html',
+    shopping: 'shopping/index.html',
+    starlight: 'starlight.html',
+    news: 'news-template.html',
+    docs: 'kitchen-sink.html',
+    demo: 'demo.html'
+  };
+
+  const templateFile = templateMap[template];
+  if (!templateFile) {
+    console.error(`❌ Error: Unknown template '${template}'. Available: ${Object.keys(templateMap).join(', ')}`);
+    process.exit(1);
+  }
+
+  const srcPath = path.join(templatesDir, templateFile);
+  if (!fs.existsSync(srcPath)) {
+    console.error(`❌ Error: Template file not found at ${srcPath}`);
+    process.exit(1);
+  }
+
+  let content = fs.readFileSync(srcPath, 'utf8');
+  
+  // Adjust stylesheet path in template
+  content = content.replace(/href="(\.\.\/)*dist\/quantum(\.min)?\.css"/, 'href="dist/quantum.css"');
+
+  const fullTargetPath = path.resolve(targetPath);
+  const targetDir = path.dirname(fullTargetPath);
+  if (!fs.existsSync(targetDir)) {
+    fs.mkdirSync(targetDir, { recursive: true });
+  }
+
+  fs.writeFileSync(fullTargetPath, content);
+  console.log(`🚀 Successfully scaffolded '${template}' template to ${targetPath}`);
+  console.log(`👉 Run 'quantumcss' to generate the required CSS.`);
+}
+
 function main() {
   const args = process.argv.slice(2);
+
+  if (args[0] === 'scaffold') {
+    const template = args[1];
+    const targetPath = args[2] || 'index.html';
+    if (!template) {
+      console.error('❌ Error: Please specify a template name (e.g., gaming, blog, travel)');
+      process.exit(1);
+    }
+    scaffold(template, targetPath);
+    return;
+  }
+
   const watch = args.includes('--watch') || args.includes('-w');
   const outputPath = args.find(a => !a.startsWith('-')) || 'dist/quantum.css';
 

package/src/defaults.js

@@ -77,8 +77,8 @@ const utilityMaps = {
     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.75rem', 'pointer']
   },
   'btn-secondary': {
-    property: ['background', 'color', 'border', 'font-weight', 'transition', 'height', 'padding', 'display', 'align-items', 'justify-content', 'border-radius', 'cursor'],
-    value: ['rgba(255, 255, 255, 0.05)', 'inherit', '1px solid rgba(255, 255, 255, 0.15)', '700', 'all 0.2s ease', '3rem', '0 1.5rem', 'inline-flex', 'center', 'center', '0.75rem', 'pointer']
+    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)', 'inherit', '1px solid rgba(255, 255, 255, 0.15)', '700', 'all 0.2s ease', '3rem', '0 1.5rem', 'inline-flex', 'center', 'center', '0.75rem', 'pointer', 'blur(12px)', 'blur(12px)']
   },
   'input-starlight': {
     property: ['background-color', 'border', 'color', 'border-radius', 'padding', 'appearance', 'transition', 'height'],

package/src/generator.js

@@ -62,7 +62,10 @@ function generateCSS(configPath) {
   });
 
   const utilities = new Set();
-  const responsiveUtils = { sm: new Set(), md: new Set(), lg: new Set(), xl: new Set(), '2xl': new Set() };
+  const responsiveUtils = { 
+    sm: new Set(), md: new Set(), lg: new Set(), xl: new Set(), '2xl': new Set(),
+    dark: new Set()
+  };
 
   const sideMap = {
     p: 'padding', pt: 'padding-top', pr: 'padding-right', pb: 'padding-bottom', pl: 'padding-left',
@@ -74,7 +77,7 @@ function generateCSS(configPath) {
     gap: 'gap', 'gap-x': 'column-gap', 'gap-y': 'row-gap'
   };
 
-  function processClass(fullCls) {
+  function getRulesForClass(fullCls) {
     let cls = fullCls, variant = null, breakpoint = null, isNeg = false;
     if (cls.startsWith('-')) { isNeg = true; cls = cls.substring(1); }
     const parts = cls.split(':');
@@ -82,11 +85,34 @@ function generateCSS(configPath) {
     while (currentPart < parts.length) {
       const p = parts[currentPart];
       if (breakpoints[p]) { breakpoint = p; }
+      else if (p === 'dark') { breakpoint = 'dark'; }
       else if (['hover', 'focus', 'placeholder', 'group-hover'].includes(p)) { variant = p; }
       else { cls = parts.slice(currentPart).join(':'); break; }
       currentPart++;
     }
 
+    // Check Presets
+    if (config.componentPresets && config.componentPresets[cls]) {
+      const presetClasses = config.componentPresets[cls].split(/\s+/);
+      let allGroups = [];
+      presetClasses.forEach(pCls => {
+        const subGroups = getRulesForClass(pCls);
+        if (subGroups) {
+          subGroups.forEach(group => {
+            // Apply the preset's own breakpoint/variant to sub-groups if they don't have one?
+            // Actually, usually presets are used as base classes.
+            // If someone does md:btn-primary, we want the md: to apply to all rules in the preset.
+            allGroups.push({
+              breakpoint: breakpoint || group.breakpoint,
+              variant: variant || group.variant,
+              rules: group.rules
+            });
+          });
+        }
+      });
+      return allGroups;
+    }
+
     let property = null, value = null, customSelector = null;
     if (utilityMaps[cls]) {
       const entry = utilityMaps[cls];
@@ -148,6 +174,11 @@ function generateCSS(configPath) {
       } else if (prefix === 'duration') {
         property = 'transition-duration';
         value = `${valKey}ms`;
+      } else if (prefix === 'backdrop' && cParts[1] === 'blur') {
+        property = ['backdrop-filter', '-webkit-backdrop-filter'];
+        const blurMap = { sm: '4px', md: '12px', lg: '16px', xl: '24px' };
+        const blurVal = blurMap[cParts[2]] || (isNaN(parseInt(cParts[2])) ? '8px' : `${cParts[2]}px`);
+        value = `blur(${blurVal})`;
       } else if (sideMap[prefix]) {
         property = sideMap[prefix];
         let v = valKey;
@@ -167,25 +198,53 @@ function generateCSS(configPath) {
     }
 
     if (property && value) {
+      let rules = Array.isArray(property) ? property.map((p, i) => `  ${p}: ${Array.isArray(value) ? value[i] : value};`) : [`  ${property}: ${value};`];
+      return [{ breakpoint, variant, customSelector, rules }];
+    }
+    return null;
+  }
+
+  function processClass(fullCls) {
+    const groups = getRulesForClass(fullCls);
+    if (!groups) return;
+
+    // Merge groups with same selector (breakpoint + variant)
+    const merged = new Map();
+    groups.forEach(group => {
+      const key = `${group.breakpoint || ''}|${group.variant || ''}|${group.customSelector || ''}`;
+      if (!merged.has(key)) {
+        merged.set(key, { ...group, rules: [...group.rules] });
+      } else {
+        merged.get(key).rules.push(...group.rules);
+      }
+    });
+
+    merged.forEach(group => {
+      const { breakpoint, variant, customSelector, rules } = group;
       const escapedFull = fullCls.replace(/([:[\/])/g, '\\$1');
       let selector = customSelector || `.${escapedFull}`;
       if (variant) { if (variant === 'group-hover') selector = `.group:hover ${selector}`; else selector += `:${variant}`}
-      let rules = Array.isArray(property) ? property.map((p, i) => `  ${p}: ${Array.isArray(value) ? value[i] : value};`).join('\n') : `  ${property}: ${value};`;
+      
       const block = `${selector} {
-${rules}
+${rules.join('\n')}
 }
 `;
       if (breakpoint) responsiveUtils[breakpoint].add(block); else utilities.add(block);
-    }
+    });
   }
 
   rawClasses.forEach(processClass);
   let css = '/* Quantum CSS JIT Output */\n' + Array.from(utilities).join('\n');
   Object.entries(breakpoints).forEach(([name, width]) => {
-    if (responsiveUtils[name].size > 0) {
+    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`;
     }
   });
+
+  if (responsiveUtils.dark && responsiveUtils.dark.size > 0) {
+    css += `\n@media (prefers-color-scheme: dark) {\n${Array.from(responsiveUtils.dark).map(u => '  ' + u.replace(/\n/g, '\n  ')).join('\n').trimEnd()}\n}\n`;
+  }
+
   return css;
 }
 

package/src/styles/quantum-animations.css

@@ -0,0 +1,73 @@
+/* Cosmic Animation Library */
+
+@keyframes nebula-drift {
+  0% { transform: translate(-5%, -5%) scale(1); opacity: 0.4; }
+  50% { transform: translate(5%, 5%) scale(1.2); opacity: 0.7; }
+  100% { transform: translate(-5%, -5%) scale(1); opacity: 0.4; }
+}
+
+@keyframes cosmic-pulse {
+  0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.2), 0 0 40px rgba(0, 212, 255, 0.1); }
+  50% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.5), 0 0 80px rgba(0, 212, 255, 0.2); }
+}
+
+@keyframes star-twinkle {
+  0%, 100% { opacity: 0.3; transform: scale(0.8); }
+  50% { opacity: 1; transform: scale(1.2); }
+}
+
+@keyframes orbit {
+  from { transform: rotate(0deg) translateX(20px) rotate(0deg); }
+  to { transform: rotate(360deg) translateX(20px) rotate(-360deg); }
+}
+
+@keyframes svg-draw {
+  from { stroke-dashoffset: 1000; }
+  to { stroke-dashoffset: 0; }
+}
+
+@keyframes float-y {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-20px); }
+}
+
+/* Animation Classes */
+
+.ani-nebula {
+  animation: nebula-drift 20s ease-in-out infinite;
+  will-change: transform, opacity;
+}
+
+.ani-cosmic-pulse {
+  animation: cosmic-pulse 4s ease-in-out infinite;
+}
+
+.ani-twinkle {
+  animation: star-twinkle var(--twinkle-duration, 3s) ease-in-out infinite;
+}
+
+.ani-orbit {
+  animation: orbit var(--orbit-duration, 10s) linear infinite;
+}
+
+.ani-svg-draw {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: svg-draw 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.ani-float {
+  animation: float-y 6s ease-in-out infinite;
+}
+
+/* Staggered Animations */
+.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: 0.5s !important; }
+.ani-slow { animation-duration: 8s !important; }
+.ani-slower { animation-duration: 15s !important; }

package/src/styles/quantum-components.css

@@ -102,14 +102,21 @@
 }
 
 .btn-secondary {
-  background-color: var(--color-secondary);
+  background-color: rgba(255, 255, 255, 0.05);
   color: white;
-  border-color: var(--color-secondary);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
 }
 
 .btn-secondary:hover {
-  background-color: var(--color-secondary-600);
-  border-color: var(--color-secondary-600);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+body.light-mode .btn-secondary {
+  background-color: rgba(0, 0, 0, 0.03);
+  color: #1e293b;
+  border-color: rgba(0, 0, 0, 0.1);
 }
 
 .btn-outline {
@@ -284,6 +291,37 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   border-color: rgba(239, 68, 68, 0.3);
 }
 
+/* Light Mode Overrides for Badges */
+body.light-mode .badge-primary {
+  background-color: rgba(59, 130, 246, 0.1);
+  color: #2563eb;
+  border-color: rgba(59, 130, 246, 0.2);
+}
+
+body.light-mode .badge-secondary {
+  background-color: rgba(0, 0, 0, 0.05);
+  color: #475569;
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+body.light-mode .badge-success {
+  background-color: rgba(16, 185, 129, 0.1);
+  color: #059669;
+  border-color: rgba(16, 185, 129, 0.2);
+}
+
+body.light-mode .badge-warning {
+  background-color: rgba(245, 158, 11, 0.1);
+  color: #d97706;
+  border-color: rgba(245, 158, 11, 0.2);
+}
+
+body.light-mode .badge-error {
+  background-color: rgba(239, 68, 68, 0.1);
+  color: #dc2626;
+  border-color: rgba(239, 68, 68, 0.2);
+}
+
 /* Alert Component */
 .alert {
   padding: var(--space-4);

package/src/styles/quantum.css

@@ -111,6 +111,40 @@
   --transition-slow: 400ms ease-in-out;
 }
 
+/* High Contrast (Accessibility) Mode Support */
+@media (prefers-contrast: more) {
+  :root {
+    --color-starlight-blue: #0088cc; /* Darkened for better contrast on light */
+    --color-starlight-orange: #d14d33;
+    --glass-bg: rgba(255, 255, 255, 0.1);
+    --glass-border: rgba(255, 255, 255, 0.4);
+    --text-muted: rgba(241, 245, 249, 0.8);
+  }
+}
+
+@media (forced-colors: active) {
+  :root {
+    --radius-none: 0;
+    --radius-sm: 0;
+    --radius-md: 0;
+    --radius-lg: 0;
+    --radius-xl: 0;
+    --radius-2xl: 0;
+    --radius-3xl: 0;
+    --radius-full: 0;
+  }
+  
+  .starlight-card, .glass, .q-card {
+    border: 2px solid CanvasText !important;
+  }
+  
+  .btn-starlight, .q-btn-primary {
+    background: ButtonFace !important;
+    color: ButtonText !important;
+    border: 2px solid ButtonText !important;
+  }
+}
+
 /* Dark Mode */
 @media (prefers-color-scheme: dark) {
   :root {
@@ -145,6 +179,8 @@ input, textarea, select, button {
   font-size: inherit;
   line-height: inherit;
   color: inherit;
+  border: none;
+  background: transparent;
 }
 
 textarea {
@@ -1057,21 +1093,39 @@ body.light-mode ::-webkit-scrollbar-thumb { border-color: var(--light-bg); }
 
 /* Starlight Focus Ring */
 
-:focus-visible {
+
+
+:focus, :focus-visible {
+
+
 
   outline: none;
 
+
+
   box-shadow: 0 0 0 2px var(--color-starlight-deep), 0 0 0 4px var(--color-starlight-blue);
 
+
+
   transition: box-shadow var(--transition-fast);
 
+
+
 }
 
 
 
-body.light-mode :focus-visible {
 
-  box-shadow: 0 0 0 2px var(--light-bg), 0 0 0 4px var(--color-starlight-blue);
+
+
+
+body.light-mode :focus, body.light-mode :focus-visible {
+
+
+
+  box-shadow: 0 0 0 2px var(--light-bg), 0 0 0 4px rgba(59, 130, 246, 0.4);
+
+
 
 }
 

package/src/styles/starlight-ui.css

@@ -235,25 +235,46 @@ body.light-mode .dropdown-item:hover {
   color: #1e293b;
 }
 
-/* 7. Textarea Fixes */
-textarea.input-starlight, .textarea-starlight {
+/* 7. Input & Glass Fixes */
+.input-starlight, .textarea-starlight {
   height: auto;
-  min-height: 120px;
   padding: 1rem;
   background-color: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 0.75rem;
   color: inherit;
   width: 100%;
+}
+
+textarea.input-starlight, .textarea-starlight {
+  min-height: 120px;
   display: block;
 }
 
-body.light-mode textarea.input-starlight, 
+body.light-mode .input-starlight, 
 body.light-mode .textarea-starlight {
   background-color: #ffffff;
   border-color: #cbd5e1;
 }
 
+body.light-mode .glass {
+  background-color: rgba(0, 0, 0, 0.02);
+  border-color: rgba(0, 0, 0, 0.05);
+}
+
+/* 8. Input Focus States */
+.input-starlight:focus, .textarea-starlight:focus {
+  outline: none;
+  border-color: var(--color-starlight-blue);
+  box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.1);
+}
+
+body.light-mode .input-starlight:focus,
+body.light-mode .textarea-starlight:focus {
+  border-color: #93c5fd;
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
+}
+
 /* 9. Code Interface Window */
 .code-window {
   background: rgba(0, 0, 0, 0.4);
@@ -382,3 +403,25 @@ body.light-mode .accordion-starlight .accordion-content {
   background: #f1f5f9 !important;
   color: #475569 !important;
 }
+
+@media (forced-colors: active) {
+  button:focus, input:focus, select:focus, textarea:focus {
+    outline: 2px solid SelectedItem !important;
+    outline-offset: 2px;
+  }
+  
+  .starlight-card:hover, .accordion-starlight.accordion-item:hover {
+    border-color: SelectedItem !important;
+  }
+
+  .text-gradient-starlight, .bg-starlight {
+    background: none !important;
+    -webkit-text-fill-color: CanvasText !important;
+    color: CanvasText !important;
+    text-decoration: underline;
+  }
+  
+  .btn-starlight {
+    border: 2px solid ButtonText !important;
+  }
+}