@howssatoshi/quantumcss 1.3.1 → 1.4.0

package/src/styles/{quantum.css → quantum-base.css}

@@ -1,14 +1,15 @@
 /*!
- * QuantumCSS - Utility-First CSS Framework
- * Advanced utility framework with modern CSS features
- * Version: 1.0.0
- * Features: Modern CSS, Container Queries, Logical Properties, Dark Mode, etc.
+ * QuantumCSS + Starlight UI
+ * Advanced utility-first framework with ethereal cosmic aesthetics
+ * Version: 1.4.0
+ * Features: Modern CSS, JIT Engine, Starlight Components, Dark Mode
  */
 
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 
 /* CSS Custom Properties (Design Tokens) */
 :root {
+  color-scheme: dark;
   /* Colors */
   --color-primary: #3b82f6;
   --color-primary-50: #eff6ff;
@@ -134,11 +135,11 @@
     --radius-full: 0;
   }
   
-  .starlight-card, .glass, .q-card {
+  .starlight-card, .glass {
     border: 2px solid CanvasText !important;
   }
   
-  .btn-starlight, .q-btn-primary {
+  .btn-starlight {
     background: ButtonFace !important;
     color: ButtonText !important;
     border: 2px solid ButtonText !important;
@@ -168,6 +169,9 @@ html {
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: var(--color-starlight-deep);
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-starlight-blue) transparent;
 }
 
 body {
@@ -191,11 +195,17 @@ textarea {
 /* Layout Utilities */
 .container {
   width: 100%;
-  max-width: 1200px;
+  max-width: 1100px;
   margin-left: auto;
   margin-right: auto;
-  padding-left: var(--space-4);
-  padding-right: var(--space-4);
+  padding-left: var(--space-8);
+  padding-right: var(--space-8);
+}
+
+.grid-3 {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: var(--space-8);
 }
 
 @container (min-width: 640px) {
@@ -462,435 +472,6 @@ textarea {
 
 /* ====== QUANTUM CSS ENHANCEMENTS ====== */
 
-/* Responsive Design System - Better Breakpoints */
-@media (max-width: 639px) {
-  .q-sm\:block { display: block; }
-  .q-sm\:hidden { display: none; }
-  .q-sm\:text-center { text-align: center; }
-  .q-sm\:flex-col { flex-direction: column; }
-}
-
-@media (min-width: 640px) {
-  .q-md\:block { display: block; }
-  .q-md\:hidden { display: none; }
-  .q-md\:flex-row { flex-direction: row; }
-}
-
-@media (min-width: 768px) {
-  .q-lg\:block { display: block; }
-  .q-lg\:hidden { display: none; }
-  .q-lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-}
-
-@media (min-width: 1024px) {
-  .q-xl\:block { display: block; }
-  .q-xl\:hidden { display: none; }
-  .q-xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-}
-
-@media (min-width: 1280px) {
-  .q-2xl\:block { display: block; }
-  .q-2xl\:hidden { display: none; }
-  .q-2xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
-}
-
-/* Component Utilities - Semantic & Reusable */
-.q-card {
-  background: white;
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-md);
-  padding: var(--space-6);
-  border: 1px solid var(--color-neutral);
-  transition: var(--duration-200) all var(--ease-in-out);
-}
-
-.q-card:hover {
-  box-shadow: var(--shadow-lg);
-  transform: translateY(-2px);
-}
-
-.q-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-2);
-  padding: var(--space-3) var(--space-6);
-  border-radius: var(--radius-md);
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  transition: all var(--duration-150) var(--ease-in-out);
-  cursor: pointer;
-  border: none;
-  text-decoration: none;
-  position: relative;
-  overflow: hidden;
-}
-
-.q-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.q-btn-primary {
-  background-color: var(--color-primary);
-  color: white;
-}
-
-.q-btn-primary:hover:not(:disabled) {
-  background-color: var(--color-primary-600);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
-}
-
-.q-btn-secondary {
-  background-color: var(--color-neutral);
-  color: white;
-}
-
-.q-btn-outline {
-  background-color: transparent;
-  border: 1px solid var(--color-primary);
-  color: var(--color-primary);
-}
-
-.q-btn-outline:hover:not(:disabled) {
-  background-color: var(--color-primary);
-  color: white;
-}
-
-.q-input {
-  display: block;
-  width: 100%;
-  padding: var(--space-3) var(--space-4);
-  border: 1px solid var(--color-neutral);
-  border-radius: var(--radius-md);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  transition: all var(--duration-150) var(--ease-in-out);
-  background-color: white;
-}
-
-.q-input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.q-input-error {
-  border-color: var(--color-error);
-}
-
-.q-input-error:focus {
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
-}
-
-.q-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: var(--space-1) var(--space-3);
-  border-radius: var(--radius-full);
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.q-badge-primary {
-  background-color: var(--color-primary-100);
-  color: var(--color-primary-800);
-}
-
-.q-badge-success {
-  background-color: #dcfce7;
-  color: #166534;
-}
-
-.q-badge-warning {
-  background-color: #fef3c7;
-  color: #92400e;
-}
-
-.q-badge-error {
-  background-color: #fee2e2;
-  color: #991b1b;
-}
-
-/* Advanced Layout Patterns */
-.q-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.q-stack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-}
-
-.q-cluster {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-4);
-  align-items: flex-start;
-}
-
-.q-switcher {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-2);
-}
-
-.q-sidebar {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: var(--space-6);
-}
-
-.q-cover {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.q-frame {
-  position: relative;
-  overflow: hidden;
-}
-
-/* Smart Spacing - Logical Properties */
-.q-space-y > * + * {
-  margin-top: var(--space-4);
-}
-
-.q-space-y-2 > * + * {
-  margin-top: var(--space-2);
-}
-
-.q-space-y-6 > * + * {
-  margin-top: var(--space-6);
-}
-
-.q-space-x > * + * {
-  margin-left: var(--space-4);
-}
-
-.q-space-x-2 > * + * {
-  margin-left: var(--space-2);
-}
-
-.q-space-x-6 > * + * {
-  margin-left: var(--space-6);
-}
-
-/* Animation Utilities */
-.q-animate-fade-in {
-  animation: fadeIn var(--duration-300) var(--ease-out);
-}
-
-.q-animate-slide-up {
-  animation: slideUp var(--duration-300) var(--ease-out);
-}
-
-.q-animate-slide-down {
-  animation: slideDown var(--duration-300) var(--ease-out);
-}
-
-.q-animate-scale-in {
-  animation: scaleIn var(--duration-200) var(--ease-out);
-}
-
-.q-animate-spin {
-  animation: spin 1s linear infinite;
-}
-
-.q-animate-ping {
-  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
-}
-
-.q-animate-pulse {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-.q-animate-bounce {
-  animation: bounce 1s infinite;
-}
-
-/* Keyframes */
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes slideUp {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes slideDown {
-  from { opacity: 0; transform: translateY(-20px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes scaleIn {
-  from { opacity: 0; transform: scale(0.95); }
-  to { opacity: 1; transform: scale(1); }
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-@keyframes ping {
-  75%, 100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(-25%);
-    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
-  }
-  50% {
-    transform: none;
-    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  }
-}
-
-/* Interactive States */
-.q-hover-lift:hover {
-  transform: translateY(-4px);
-  box-shadow: var(--shadow-lg);
-}
-
-.q-hover-scale:hover {
-  transform: scale(1.05);
-}
-
-.q-hover-rotate:hover {
-  transform: rotate(1deg);
-}
-
-.q-hover-glow:hover {
-  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
-}
-
-.q-active:active {
-  transform: scale(0.98);
-}
-
-.q-focus-ring:focus {
-  outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
-}
-
-/* Form States */
-.q-required::after {
-  content: " *";
-  color: var(--color-error);
-}
-
-.q-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.q-loading {
-  position: relative;
-  overflow: hidden;
-}
-
-.q-loading::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(255, 255, 255, 0.2),
-    transparent
-  );
-  animation: loading 1.5s infinite;
-}
-
-@keyframes loading {
-  to { left: 100%; }
-}
-
-/* Visual Feedback */
-.q-success {
-  border-color: var(--color-success) !important;
-  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
-}
-
-.q-warning {
-  border-color: var(--color-warning) !important;
-  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
-}
-
-.q-error {
-  border-color: var(--color-error) !important;
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
-}
-
-.q-info {
-  border-color: var(--color-primary) !important;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
-}
-
-/* Dark Mode Enhancements */
-@media (prefers-color-scheme: dark) {
-  .q-card {
-    background-color: #1f2937;
-    border-color: #374151;
-  }
-  
-  .q-input {
-    background-color: #1f2937;
-    border-color: #374151;
-    color: #f9fafb;
-  }
-  
-  .q-dark\:text-white { color: #ffffff !important; }
-  .q-dark\:bg-gray-800 { background-color: #1f2937 !important; }
-  .q-dark\:bg-gray-900 { background-color: #111827 !important; }
-  .q-dark\:border-gray-700 { border-color: #374151 !important; }
-}
-
-/* Print Styles */
-@media print {
-  .q-print-hidden {
-    display: none !important;
-  }
-  
-  .q-print-block {
-    display: block !important;
-  }
-  
-  .q-no-shadow {
-    box-shadow: none !important;
-  }
-  
-  .q-black-text {
-    color: black !important;
-  }
-}
-
 /* Utility for Quick Prototyping */
 .prose {
   max-width: 65ch;
@@ -925,34 +506,6 @@ textarea {
   color: var(--color-primary-600);
 }
 
-/* Performance Optimizations */
-.q-will-change-transform {
-  will-change: transform;
-}
-
-.q-will-change-opacity {
-  will-change: opacity;
-}
-
-.q-gpu-accelerated {
-  transform: translateZ(0);
-  backface-visibility: hidden;
-  perspective: 1000px;
-}
-
-/* Container Queries - Future Ready */
-@container (min-width: 320px) {
-  .q-cq-sm\:flex { display: flex; }
-}
-
-@container (min-width: 640px) {
-  .q-cq-md\:grid { display: grid; }
-}
-
-@container (min-width: 1024px) {
-  .q-cq-lg\:block { display: block; }
-}
-
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
   *,
@@ -965,129 +518,69 @@ textarea {
   }
 }
 
-/* High Contrast Mode Support */
-@media (prefers-contrast: high) {
-  .q-card {
-    border-width: 2px;
-  }
-  
-  .q-btn {
-    border: 2px solid;
-  }
-}
+/* --- Restored Core Styles --- */
 
-/* Focus Visible Support */
-.q-focus-visible:focus-visible {
-  outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
-}
 
-/* Modern CSS Features */
-.q-backdrop-blur-sm {
-  backdrop-filter: blur(4px);
-}
 
-.q-backdrop-blur {
-  backdrop-filter: blur(8px);
-}
+/* Nebula Scrollbar */
 
-.q-backdrop-blur-md {
-  backdrop-filter: blur(12px);
-}
 
-.q-backdrop-blur-lg {
-  backdrop-filter: blur(16px);
-}
 
-.q-text-shadow-sm {
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
+::-webkit-scrollbar { width: 8px; }
 
-.q-text-shadow {
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
 
-.q-text-shadow-lg {
-  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
 
-/* Gradient Utilities */
-.q-gradient-primary {
-  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-600) 100%);
-}
 
-.q-gradient-secondary {
-  background: linear-gradient(135deg, var(--color-secondary) 0%, #475569 100%);
-}
 
-.q-gradient-radial {
-  background: radial-gradient(circle at center, var(--color-primary) 0%, var(--color-primary-600) 100%);
-}
 
-.q-gradient-text {
-  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-600) 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
 
-/* Scrollbar Styling */
-.q-scrollbar-thin {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-neutral) transparent;
-}
+::-webkit-scrollbar-track { background: transparent; }
 
-.q-scrollbar-thin::-webkit-scrollbar {
-  width: 6px;
-}
 
-.q-scrollbar-thin::-webkit-scrollbar-track {
-  background: transparent;
-}
 
-.q-scrollbar-thin::-webkit-scrollbar-thumb {
-  background-color: var(--color-neutral);
-  border-radius: 3px;
-}
 
-.q-scrollbar-none {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
 
-.q-scrollbar-none::-webkit-scrollbar {
 
-  display: none;
 
-}
+::-webkit-scrollbar-thumb { 
 
 
 
-/* --- Restored Core Styles --- */
+  background: linear-gradient(135deg, var(--color-starlight-peach) 0%, var(--color-starlight-blue) 100%); 
 
 
 
-/* Nebula Scrollbar */
+  border-radius: 10px;
 
-::-webkit-scrollbar { width: 8px; }
 
-::-webkit-scrollbar-track { background: var(--color-starlight-deep); }
 
-body.light-mode ::-webkit-scrollbar-track { background: var(--light-bg); }
+  border: 2px solid var(--color-starlight-deep);
 
 
 
-::-webkit-scrollbar-thumb { 
+}
 
-  background: linear-gradient(to bottom, var(--color-starlight-peach), var(--color-starlight-blue)); 
 
-  border-radius: 10px;
 
-  border: 2px solid var(--color-starlight-deep);
+body.light-mode,
+
+html.light-mode {
+
+  scrollbar-color: var(--color-starlight-blue) transparent;
 
 }
 
-body.light-mode ::-webkit-scrollbar-thumb { border-color: var(--light-bg); }
+
+
+body.light-mode::-webkit-scrollbar-thumb,
+
+body.light-mode ::-webkit-scrollbar-thumb { 
+
+  background: linear-gradient(135deg, var(--color-starlight-peach) 40%, var(--color-starlight-blue) 100%);
+
+  border-color: var(--light-bg); 
+
+}
 
 
 
@@ -1167,7 +660,9 @@ body {
 
 
 
-body.light-mode {
+body.light-mode,
+html.light-mode {
+  color-scheme: light;
   background-color: var(--light-bg);
   color: var(--light-text);
   --text-primary: var(--light-text);