@howssatoshi/quantumcss 1.0.2 → 1.2.0

package/src/generator.js

@@ -3,181 +3,249 @@ const path = require('path');
 const { glob } = require('glob');
 const { defaultTheme, utilityMaps } = require('./defaults');
 
-const breakpoints = {
-  sm: '640px',
-  md: '768px',
-  lg: '1024px',
-  xl: '1280px',
-};
+const breakpoints = { sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px' };
 
 function generateCSS(configPath) {
-  delete require.cache[path.resolve(configPath)];
-  const config = require(path.resolve(configPath));
+  const resolvedPath = path.resolve(configPath);
+  if (fs.existsSync(resolvedPath)) delete require.cache[resolvedPath];
+  const config = fs.existsSync(resolvedPath) ? require(resolvedPath) : { content: [], theme: {} };
   
-  const contentPaths = config.content || [];
-  const theme = { ...defaultTheme };
-  if (config.theme) {
-    if (config.theme.extend) {
-      theme.colors = { ...theme.colors, ...config.theme.extend.colors };
-      theme.spacing = { ...theme.spacing, ...config.theme.extend.spacing };
-      theme.fontSize = { ...theme.fontSize, ...config.theme.extend.fontSize };
-      theme.shadows = { ...theme.shadows, ...config.theme.extend.shadows };
-    } else {
-      Object.assign(theme, config.theme);
-    }
+  const theme = JSON.parse(JSON.stringify(defaultTheme || {}));
+  theme.colors = theme.colors || {};
+  theme.spacing = theme.spacing || {};
+  theme.borderRadius = theme.borderRadius || {};
+  theme.fontSize = theme.fontSize || {};
+
+  if (config.theme && config.theme.extend) {
+    const ext = config.theme.extend;
+    if (ext.colors) Object.assign(theme.colors, ext.colors);
+    if (ext.spacing) Object.assign(theme.spacing, ext.spacing);
+    if (ext.borderRadius) Object.assign(theme.borderRadius, ext.borderRadius);
+    if (ext.fontSize) Object.assign(theme.fontSize, ext.fontSize);
   }
 
   const flattenedColors = {};
   Object.entries(theme.colors).forEach(([name, value]) => {
-    if (typeof value === 'string') {
-      flattenedColors[name] = value;
-    } else {
-      Object.entries(value).forEach(([shade, hex]) => {
-        flattenedColors[`${name}-${shade}`] = hex;
-      });
+    if (typeof value === 'string') flattenedColors[name] = value;
+    else {
+      Object.entries(value || {}).forEach(([shade, hex]) => { flattenedColors[`${name}-${shade}`] = hex; });
+      if (value && value['500']) flattenedColors[name] = value['500'];
     }
   });
 
-  const files = contentPaths.flatMap(p => glob.sync(p));
+  function resolveColor(key) {
+    if (!key) return null;
+    if (flattenedColors[key]) return flattenedColors[key];
+    if (key.includes('/')) {
+      const [base, opacity] = key.split('/');
+      const color = flattenedColors[base] || flattenedColors[`${base}-500`];
+      if (color && color.startsWith('#')) {
+        const r = parseInt(color.slice(1, 3), 16), g = parseInt(color.slice(3, 5), 16), b = parseInt(color.slice(5, 7), 16);
+        return `rgba(${r}, ${g}, ${b}, ${parseInt(opacity) / 100})`;
+      }
+    }
+    return null;
+  }
+
+  const files = (config.content || []).flatMap(p => glob.sync(p));
   const rawClasses = new Set();
+  const classAttrRegex = /class="([^"]+)"/g;
 
   files.forEach(file => {
-    const content = fs.readFileSync(file, 'utf8');
-    const matches = content.match(/[a-z0-9\-\/:]+/g);
-    if (matches) {
-      matches.forEach(cls => rawClasses.add(cls));
-    }
+    try {
+      const content = fs.readFileSync(file, 'utf8');
+      let match;
+      while ((match = classAttrRegex.exec(content)) !== null) {
+        match[1].split(/\s+/).forEach(cls => { if (cls) rawClasses.add(cls); });
+      }
+    } catch (e) {}
   });
 
-  let css = '/* Quantum CSS - High Performance Output */\n';
-  css += '*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; }\n';
-  css += 'html { line-height: 1.5; -webkit-text-size-adjust: 100%; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }\n';
-  css += 'body { margin: 0; line-height: inherit; }\n';
-  css += 'img { display: block; max-width: 100%; height: auto; }\n';
-  css += 'button { cursor: pointer; background: transparent; padding: 0; color: inherit; font: inherit; }\n\n';
-
   const utilities = new Set();
-  const responsiveUtils = { sm: new Set(), md: new Set(), lg: new Set(), xl: new Set() };
-
-  function processClass(fullCls) {
-    let cls = fullCls;
-    let variant = null;
-    let breakpoint = null;
-
+  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',
+    px: ['padding-left', 'padding-right'], py: ['padding-top', 'padding-bottom'],
+    m: 'margin', mt: 'margin-top', mr: 'margin-right', mb: 'margin-bottom', ml: 'margin-left',
+    mx: ['margin-left', 'margin-right'], my: ['margin-top', 'margin-bottom'],
+    w: 'width', h: 'height', top: 'top', right: 'right', bottom: 'bottom', left: 'left',
+    'max-w': 'max-width', 'max-h': 'max-height', 'min-w': 'min-width', 'min-h': 'min-height',
+    gap: 'gap', 'gap-x': 'column-gap', 'gap-y': 'row-gap'
+  };
+
+  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(':');
-    if (parts.length > 1) {
-      if (breakpoints[parts[0]]) {
-        breakpoint = parts[0];
-        cls = parts.slice(1).join(':');
-      }
-      const subParts = cls.split(':');
-      if (subParts.length > 1) {
-        variant = subParts[0];
-        cls = subParts[1];
-      } else if (!breakpoint) {
-        variant = parts[0];
-        cls = parts[1];
-      }
+    let currentPart = 0;
+    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++;
     }
 
-    let property = null;
-    let value = null;
+    // 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]) {
-      if (typeof utilityMaps[cls] === 'object' && !Array.isArray(utilityMaps[cls])) {
-        property = utilityMaps[cls].property;
-        value = utilityMaps[cls].value;
-      } else {
-        property = utilityMaps[cls];
-      }
+      const entry = utilityMaps[cls];
+      if (typeof entry === 'object' && !Array.isArray(entry)) { property = entry.property; value = entry.value; }
+      else { property = entry; }
     }
 
     if (!property || !value) {
       const cParts = cls.split('-');
-      const prefix = cParts[0];
-      const valKey = cParts.slice(1).join('-');
+      let prefix = cParts[0], valKey = cParts.slice(1).join('-');
+      
+      if ((prefix === 'max' || prefix === 'min' || prefix === 'gap' || prefix === 'gap-x' || prefix === 'gap-y') && cParts[1]) {
+        if (['w', 'h', 'x', 'y'].includes(cParts[1])) {
+          prefix = `${cParts[0]}-${cParts[1]}`;
+          valKey = cParts.slice(2).join('-');
+        }
+      }
 
       if (prefix === 'text') {
-        if (theme.fontSize[valKey]) { property = 'font-size'; value = theme.fontSize[valKey]; } 
-        else if (flattenedColors[valKey]) { property = 'color'; value = flattenedColors[valKey]; }
-      } else if (prefix === 'bg') {
-        property = 'background-color'; value = flattenedColors[valKey];
-      } else if (prefix === 'shadow') {
-        property = 'box-shadow'; value = theme.shadows[valKey] || theme.shadows.md;
+        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') { property = 'z-index'; value = isNeg ? `-${valKey}` : valKey; }
+      else if (prefix === 'aspect') {
+        property = ['aspect-ratio', 'width', 'height'];
+        let ratio = 'auto';
+        if (valKey.startsWith('[') && valKey.endsWith(']')) ratio = valKey.slice(1, -1).replace(/\//g, ' / ');
+        else if (valKey === 'video') ratio = '16 / 9';
+        else if (valKey === 'square') ratio = '1 / 1';
+        else ratio = valKey.replace(/\//g, ' / ');
+        value = [ratio, '100%', 'auto'];
+      } else if (prefix === 'grid' && cParts[1] === 'cols') {
+        property = 'grid-template-columns'; value = `repeat(${cParts[2]}, minmax(0, 1fr))`;
+      } else if (prefix === 'col' && cParts[1] === 'span') {
+        property = 'grid-column'; value = `span ${cParts[2]} / span ${cParts[2]}`;
+      } else if (prefix === 'space') {
+        const amount = theme.spacing[cParts[2]] || `${parseInt(cParts[2]) * 0.25}rem`;
+        const escaped = fullCls.replace(/([:[\/])/g, '\\$1');
+        customSelector = `.${escaped} > * + *`;
+        property = cParts[1] === 'y' ? 'margin-top' : 'margin-left';
+        value = isNeg ? `-${amount}` : amount;
       } else if (prefix === 'rounded') {
         property = 'border-radius';
-        if (valKey === 'lg') value = '0.5rem';
-        else if (valKey === 'full') value = '9999px';
-        else value = theme.spacing[valKey] || (valKey ? `${parseInt(valKey) * 0.125}rem` : '0.25rem');
-      } else if (prefix === 'border') {
-          if (flattenedColors[valKey]) {
-            property = 'border-color'; value = flattenedColors[valKey];
-          } else if (cParts[1] === 'l' || cParts[1] === 'r' || cParts[1] === 't' || cParts[1] === 'b') {
-             const sideMap = { l: 'left', r: 'right', t: 'top', b: 'bottom' };
-             property = `border-${sideMap[cParts[1]]}-width`;
-             value = `${cParts[2]}px`;
-          }
-      } else if (prefix === 'gap') {
-        property = 'gap'; value = theme.spacing[valKey] || (valKey ? (isNaN(valKey) ? valKey : `${valKey}rem`) : '0px');
-      } else if (prefix === 'grid' && cParts[1] === 'cols') {
-        property = 'grid-template-columns';
-        value = `repeat(${cParts[2]}, minmax(0, 1fr))`;
-      } else if (prefix === 'flex' && cParts[1] === 'row') {
-        property = 'flex-direction';
-        value = 'row';
-      } else if (prefix === 'w' || prefix === 'h') {
-        property = utilityMaps[prefix];
-        if (valKey.includes('/')) {
-            const [n, d] = valKey.split('/');
-            value = `${(parseInt(n)/parseInt(d)*100).toFixed(2)}%`;
-        } else {
-            value = theme.spacing[valKey] || valKey;
-        }
-      } else if (utilityMaps[prefix]) {
-        const mapEntry = utilityMaps[prefix];
-        if (typeof mapEntry === 'object' && !Array.isArray(mapEntry)) {
-          property = mapEntry.property;
-          value = mapEntry.value;
-        } else {
-          property = mapEntry;
-          value = theme.spacing[valKey] || valKey;
+        if (valKey.startsWith('[') && valKey.endsWith(']')) value = valKey.slice(1, -1);
+        else if (theme.borderRadius[valKey]) value = theme.borderRadius[valKey];
+        else {
+          const num = parseInt(valKey);
+          value = isNaN(num) ? '0.375rem' : `${num * 0.125}rem`;
         }
+      } else if (prefix === 'scale') {
+        property = 'transform';
+        value = `scale(${parseInt(valKey) / 100})`;
+      } else if (prefix === 'transition') {
+        property = 'transition-property';
+        if (valKey === 'all') value = 'all';
+        else if (valKey === 'colors') value = 'color, background-color, border-color, text-decoration-color, fill, stroke';
+        else if (valKey === 'transform') value = 'transform';
+        else value = valKey;
+      } 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;
+        if (v.startsWith('[') && v.endsWith(']')) v = v.slice(1, -1);
+        else if (v.includes('/')) v = `${(parseInt(v.split('/')[0])/parseInt(v.split('/')[1])*100).toFixed(2)}%`;
+        else v = theme.spacing[v] || v;
+        value = isNeg ? (Array.isArray(v) ? v.map(x => `-${x}`) : `-${v}`) : v;
+      } else if (prefix === 'border') {
+        const color = resolveColor(valKey);
+        if (color) { property = 'border-color'; value = color; }
+        else if (['l', 'r', 't', 'b'].includes(cParts[1])) {
+          const sideMapSide = { l: 'left', r: 'right', t: 'top', b: 'bottom' };
+          property = `border-${sideMapSide[cParts[1]]}-width`;
+          value = `${cParts[2]}px`;
+        } else if (!isNaN(parseInt(valKey))) { property = 'border-width'; value = `${parseInt(valKey)}px`; }
       }
     }
 
     if (property && value) {
-      let selector = `.${fullCls.replace(/:/g, '\\:').replace(/\//g, '\\/')}`;
-      if (variant === 'hover' || variant === 'focus') selector += `:${variant}`;
-      
-      let rules = '';
-      if (Array.isArray(property)) {
-        if (Array.isArray(value)) {
-          rules = property.map((p, i) => `  ${p}: ${value[i]};`).join('\n');
-        } else {
-          rules = property.map(p => `  ${p}: ${value};`).join('\n');
-        }
+      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 {
-        rules = `  ${property}: ${value};`;
+        merged.get(key).rules.push(...group.rules);
       }
+    });
 
-      const cssBlock = `${selector} {\n${rules}\n}\n`;
-      if (breakpoint) { responsiveUtils[breakpoint].add(cssBlock); } 
-      else { utilities.add(cssBlock); }
-    }
+    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}`}
+      
+      const block = `${selector} {
+${rules.join('\n')}
+}
+`;
+      if (breakpoint) responsiveUtils[breakpoint].add(block); else utilities.add(block);
+    });
   }
 
   rawClasses.forEach(processClass);
-
-  css += Array.from(utilities).join('\n');
+  let css = '/* Quantum CSS JIT Output */\n' + Array.from(utilities).join('\n');
   Object.entries(breakpoints).forEach(([name, width]) => {
-    if (responsiveUtils[name].size > 0) {
-      css += `\n@media (min-width: ${width}) {\n`;
-      css += Array.from(responsiveUtils[name]).map(u => '  ' + u.replace(/\n/g, '\n  ')).join('\n').trimEnd();
-      css += '\n}\n';
+    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;
 }
 
-module.exports = { generateCSS };
+module.exports = { generateCSS };

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 {
@@ -189,12 +196,41 @@
   transition: all var(--duration-150) var(--ease-in-out);
 }
 
+textarea.input {
+  min-height: 100px;
+}
+
 .input:focus {
   outline: none;
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px var(--color-primary);
 }
 
+/* Date & Time Input Specifics */
+input[type="date"].input,
+input[type="datetime-local"].input,
+input[type="time"].input {
+  appearance: none;
+  -webkit-appearance: none;
+  min-height: 2.5rem;
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Ensure dark-mode calendar picker */
+.glass input[type="date"],
+.starlight-card input[type="date"],
+[class*="dark"] input[type="date"] {
+  color-scheme: dark;
+}
+
+/* Fix for alignment in flex containers */
+input[type="date"]::-webkit-calendar-picker-indicator {
+  cursor: pointer;
+  filter: invert(0.5);
+  margin-left: 0.5rem;
+}
+
 .input:disabled {
   background-color: #f3f4f6;
   color: #6b7280;
@@ -214,37 +250,76 @@
 .badge {
   display: inline-flex;
   align-items: center;
-  padding: var(--space-1) var(--space-2);
-  border-radius: var(--radius-full);
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.375rem;
   font-size: 0.75rem;
-  font-weight: 500;
+  font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
+  border: 1px solid;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
 }
 
 .badge-primary {
-  background-color: var(--color-primary-100);
-  color: var(--color-primary-800);
+  background-color: rgba(0, 212, 255, 0.15);
+  color: #00d4ff;
+  border-color: rgba(0, 212, 255, 0.3);
 }
 
 .badge-secondary {
-  background-color: #e5e7eb;
-  color: #374151;
+  background-color: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.8);
+  border-color: rgba(255, 255, 255, 0.1);
 }
 
 .badge-success {
-  background-color: #d1fae5;
-  color: #065f46;
+  background-color: rgba(16, 185, 129, 0.15);
+  color: #10b981;
+  border-color: rgba(16, 185, 129, 0.3);
 }
 
 .badge-warning {
-  background-color: #fed7aa;
-  color: #92400e;
+  background-color: rgba(245, 158, 11, 0.15);
+  color: #f59e0b;
+  border-color: rgba(245, 158, 11, 0.3);
 }
 
 .badge-error {
-  background-color: #fee2e2;
-  color: #991b1b;
+  background-color: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
+  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 */
@@ -303,8 +378,8 @@
   display: inline-block;
   width: 1.5rem;
   height: 1.5rem;
-  border: 2px solid transparent;
-  border-top-color: currentColor;
+  border: 2px solid rgba(255, 255, 255, 0.1);
+  border-top-color: var(--color-primary);
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }
@@ -313,29 +388,24 @@
   to { transform: rotate(360deg); }
 }
 
-.spinner-sm {
-  width: 1rem;
-  height: 1rem;
-}
-
-.spinner-lg {
-  width: 2rem;
-  height: 2rem;
-}
-
 /* Skeleton Loading */
 .skeleton {
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
   background-size: 200% 100%;
-  animation: loading 1.5s infinite;
+  animation: shimmer 2s infinite;
   border-radius: var(--radius-md);
 }
 
-@keyframes loading {
+@keyframes shimmer {
   0% { background-position: 200% 0; }
   100% { background-position: -200% 0; }
 }
 
+body.light-mode .skeleton {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+}
+
 /* Tooltip Component */
 .tooltip {
   position: relative;