@howssatoshi/quantumcss 1.7.7 → 1.8.0

package/src/styles/quantum-base.css

@@ -1,8 +1,12 @@
 /*!
- * QuantumCSS + Starlight UI
- * Advanced utility-first framework with ethereal cosmic aesthetics
- * Version: 1.7.3
- * Features: Modern CSS, JIT Engine, Starlight Components, Dark Mode
+ * 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.
  */
 
 @import 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap';
@@ -29,6 +33,29 @@
   --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;
@@ -67,21 +94,21 @@
   --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 */
-  --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;
+  /* Animation & Motion Tokens */
+  --q-duration-instant: 0ms;
+  --q-duration-fast: 150ms;
+  --q-duration-base: 250ms;
+  --q-duration-slow: 400ms;
+  --q-duration-slower: 700ms;
+
   --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);
   --q-color-starlight-blue: #00d4ff;
   --q-color-starlight-peach: #ffb38a;
   --q-color-starlight-orange: #ff7e5f;
@@ -90,6 +117,8 @@
   
   /* Semantic Background Colors */
   --q-bg-primary: var(--q-color-starlight-deep);
+  --q-card-bg: rgba(255 255 255 / 5%);
+  --q-card-border: rgba(255 255 255 / 8%);
   
   /* Semantic Text Colors */
   --q-text-primary: #f1f5f9;
@@ -109,9 +138,9 @@
   --q-glass-blur: blur(16px);
 
   /* Transitions */
-  --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;
+  --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);
 }
 
 /* High Contrast (Accessibility) Mode Support */
@@ -165,6 +194,7 @@
 }
 
 html {
+  scroll-behavior: smooth;
   line-height: 1.6;
   -webkit-text-size-adjust: 100%;
   font-family: Inter, system-ui, -apple-system, sans-serif;
@@ -627,11 +657,113 @@ textarea {
 .w-screen { width: 100vw; }
 .w-fit { width: fit-content; }
 
+/* Width Scale */
+.w-0 { width: var(--q-space-0); }
+.w-1 { width: var(--q-space-1); }
+.w-2 { width: var(--q-space-2); }
+.w-3 { width: var(--q-space-3); }
+.w-4 { width: var(--q-space-4); }
+.w-5 { width: var(--q-space-5); }
+.w-6 { width: var(--q-space-6); }
+.w-8 { width: var(--q-space-8); }
+.w-10 { width: var(--q-space-10); }
+.w-12 { width: var(--q-space-12); }
+.w-16 { width: var(--q-space-16); }
+.w-20 { width: var(--q-space-20); }
+.w-24 { width: var(--q-space-24); }
+.w-32 { width: var(--q-space-32); }
+
+/* Height Scale */
 .h-auto { height: auto; }
 .h-full { height: 100%; }
 .h-screen { height: 100vh; }
 .h-fit { height: fit-content; }
 
+.h-0 { height: var(--q-space-0); }
+.h-1 { height: var(--q-space-1); }
+.h-2 { height: var(--q-space-2); }
+.h-3 { height: var(--q-space-3); }
+.h-4 { height: var(--q-space-4); }
+.h-5 { height: var(--q-space-5); }
+.h-6 { height: var(--q-space-6); }
+.h-8 { height: var(--q-space-8); }
+.h-10 { height: var(--q-space-10); }
+.h-12 { height: var(--q-space-12); }
+.h-16 { height: var(--q-space-16); }
+.h-20 { height: var(--q-space-20); }
+.h-24 { height: var(--q-space-24); }
+.h-32 { height: var(--q-space-32); }
+
+/* Min Width Scale */
+.min-w-0 { min-width: var(--q-space-0); }
+.min-w-1 { min-width: var(--q-space-1); }
+.min-w-2 { min-width: var(--q-space-2); }
+.min-w-3 { min-width: var(--q-space-3); }
+.min-w-4 { min-width: var(--q-space-4); }
+.min-w-5 { min-width: var(--q-space-5); }
+.min-w-6 { min-width: var(--q-space-6); }
+.min-w-8 { min-width: var(--q-space-8); }
+.min-w-10 { min-width: var(--q-space-10); }
+.min-w-12 { min-width: var(--q-space-12); }
+.min-w-16 { min-width: var(--q-space-16); }
+.min-w-20 { min-width: var(--q-space-20); }
+.min-w-24 { min-width: var(--q-space-24); }
+.min-w-32 { min-width: var(--q-space-32); }
+.min-w-full { min-width: 100%; }
+
+/* Min Height Scale */
+.min-h-0 { min-height: var(--q-space-0); }
+.min-h-1 { min-height: var(--q-space-1); }
+.min-h-2 { min-height: var(--q-space-2); }
+.min-h-3 { min-height: var(--q-space-3); }
+.min-h-4 { min-height: var(--q-space-4); }
+.min-h-5 { min-height: var(--q-space-5); }
+.min-h-6 { min-height: var(--q-space-6); }
+.min-h-8 { min-height: var(--q-space-8); }
+.min-h-10 { min-height: var(--q-space-10); }
+.min-h-12 { min-height: var(--q-space-12); }
+.min-h-16 { min-height: var(--q-space-16); }
+.min-h-20 { min-height: var(--q-space-20); }
+.min-h-24 { min-height: var(--q-space-24); }
+.min-h-32 { min-height: var(--q-space-32); }
+.min-h-full { min-height: 100%; }
+
+/* Max Width Scale */
+.max-w-0 { max-width: var(--q-space-0); }
+.max-w-1 { max-width: var(--q-space-1); }
+.max-w-2 { max-width: var(--q-space-2); }
+.max-w-3 { max-width: var(--q-space-3); }
+.max-w-4 { max-width: var(--q-space-4); }
+.max-w-5 { max-width: var(--q-space-5); }
+.max-w-6 { max-width: var(--q-space-6); }
+.max-w-8 { max-width: var(--q-space-8); }
+.max-w-10 { max-width: var(--q-space-10); }
+.max-w-12 { max-width: var(--q-space-12); }
+.max-w-16 { max-width: var(--q-space-16); }
+.max-w-20 { max-width: var(--q-space-20); }
+.max-w-24 { max-width: var(--q-space-24); }
+.max-w-32 { max-width: var(--q-space-32); }
+.max-w-full { max-width: 100%; }
+.max-w-screen { max-width: 100vw; }
+
+/* Max Height Scale */
+.max-h-0 { max-height: var(--q-space-0); }
+.max-h-1 { max-height: var(--q-space-1); }
+.max-h-2 { max-height: var(--q-space-2); }
+.max-h-3 { max-height: var(--q-space-3); }
+.max-h-4 { max-height: var(--q-space-4); }
+.max-h-5 { max-height: var(--q-space-5); }
+.max-h-6 { max-height: var(--q-space-6); }
+.max-h-8 { max-height: var(--q-space-8); }
+.max-h-10 { max-height: var(--q-space-10); }
+.max-h-12 { max-height: var(--q-space-12); }
+.max-h-16 { max-height: var(--q-space-16); }
+.max-h-20 { max-height: var(--q-space-20); }
+.max-h-24 { max-height: var(--q-space-24); }
+.max-h-32 { max-height: var(--q-space-32); }
+.max-h-full { max-height: 100%; }
+.max-h-screen { max-height: 100vh; }
+
 /* Transition Utilities */
 .transition-none {
   transition-property: none;
@@ -640,13 +772,13 @@ textarea {
 .transition-all {
   transition-property: all;
   transition-timing-function: var(--q-ease-in-out);
-  transition-duration: var(--q-duration-150);
+  transition-duration: var(--q-duration-fast);
 }
 
 .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-150);
+  transition-duration: var(--q-duration-fast);
 }
 
 /* Transform Utilities */
@@ -753,14 +885,12 @@ textarea {
   color: var(--q-color-primary-600);
 }
 
-/* Reduced Motion Support */
+/* Reduced Motion Compliance Layer */
 @media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
+  * {
+    animation-duration: 0ms !important;
     animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
+    transition-duration: 0ms !important;
     scroll-behavior: auto !important;
   }
 }
@@ -800,8 +930,7 @@ textarea {
 
 
 
-html[data-theme="light"],
-body.light-mode {
+html[data-theme="light"] {
   color-scheme: light;
 
   --q-bg-primary: var(--q-light-bg);
@@ -812,8 +941,7 @@ body.light-mode {
   scrollbar-color: var(--q-color-starlight-blue) transparent;
 }
 
-html[data-theme="dark"],
-body.dark-mode {
+html[data-theme="dark"] {
   color-scheme: dark;
 
   --q-bg-primary: var(--q-color-starlight-deep);
@@ -821,14 +949,12 @@ body.dark-mode {
 }
 
 /* Force theme colors on body to override template-specific hardcoded styles */
-html[data-theme="light"] body,
-body.light-mode {
+html[data-theme="light"] body {
   background: var(--q-light-bg) !important;
   color: var(--q-light-text);
 }
 
-html[data-theme="dark"] body,
-body.dark-mode {
+html[data-theme="dark"] body {
   background: var(--q-color-starlight-deep) !important;
   color: #f1f5f9;
 }