@howssatoshi/quantumcss 1.10.1 → 1.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@howssatoshi/quantumcss",
-  "version": "1.10.1",
+  "version": "1.11.1",
   "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

@@ -150,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'] 
   },
@@ -163,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'] 
   },
@@ -187,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',
@@ -263,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/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-base.css

@@ -184,6 +184,10 @@ body {
   line-height: inherit;
 }
 
+ul, ol {
+  list-style: none;
+}
+
 input, textarea, select, button {
   font-family: inherit;
   font-size: inherit;