@howssatoshi/quantumcss 1.8.0 → 1.10.1

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;
 }
@@ -584,6 +558,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 +566,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 +577,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 +751,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 +811,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 +866,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 +920,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 +962,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 +1049,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;
 }