@howssatoshi/quantumcss 1.7.7 → 1.10.1

package/src/styles/quantum-base.css

@@ -82,6 +82,7 @@
   --q-ease-in-out: cubic-bezier(0.4, 0, 0.2, 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 +91,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;
@@ -165,13 +168,14 @@
 }
 
 html {
+  scroll-behavior: smooth;
   line-height: 1.6;
   -webkit-text-size-adjust: 100%;
   font-family: Inter, system-ui, -apple-system, sans-serif;
   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;
 }
@@ -554,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; }
@@ -561,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); }
@@ -570,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); }
@@ -627,11 +636,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;
@@ -700,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; }
@@ -800,36 +913,98 @@ textarea {
 
 
 
-html[data-theme="light"],
-body.light-mode {
+html[data-theme="light"] {
   color-scheme: light;
 
   --q-bg-primary: var(--q-light-bg);
   --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;
 }
 
-html[data-theme="dark"],
-body.dark-mode {
+html[data-theme="dark"] {
   color-scheme: 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,
-body.light-mode {
-  background: var(--q-light-bg) !important;
+html[data-theme="light"] body {
+  background-color: var(--q-light-bg) !important;
   color: var(--q-light-text);
 }
 
-html[data-theme="dark"] body,
-body.dark-mode {
-  background: var(--q-color-starlight-deep) !important;
+html[data-theme="dark"] body {
+  background-color: var(--q-color-starlight-deep) !important;
   color: #f1f5f9;
 }
 
@@ -874,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;
 }