@howssatoshi/quantumcss 1.11.1 → 1.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +1 -1
  2. package/dist/quantum.min.css +2 -2
  3. package/examples/index.html +1 -1
  4. package/examples/news.html +5 -5
  5. package/examples/portfolio.html +13 -29
  6. package/package.json +2 -1
  7. package/src/defaults.js +4 -4
  8. package/src/generator.js +1 -0
  9. package/src/styles/quantum-base.css +2 -2
  10. package/src/styles/quantum-components.css +11 -11
  11. package/src/styles/quantum-icons.css +2 -3
  12. package/src/styles/starlight.css +11 -11
package/examples/index.html CHANGED
@@ -169,7 +169,7 @@
169
169
  <div class="pt-8 pb-12 text-center">
170
170
  <span
171
171
  class="text-[10px] font-black tracking-[0.3em] text-accent uppercase mb-6 block"
172
- >QuantumCSS v1.11.1</span
172
+ >QuantumCSS v1.11.2</span
173
173
  >
174
174
  <h1
175
175
  class="text-7xl md:text-8xl text-gradient font-black uppercase italic tracking-tighter mb-8"
package/examples/news.html CHANGED
@@ -76,10 +76,10 @@
76
76
  <div class="text-2xl sm:text-4xl font-bold tracking-tighter uppercase italic text-primary shrink-0">QUANTUM<span class="text-blue-600">NEWS</span></div>
77
77
 
78
78
  <nav class="nav-links space-x-12 text-xs font-black uppercase tracking-widest flex-1 justify-center">
79
- <a href="#" class="hover:text-blue-600 transition-colors">Neural Mesh</a>
80
- <a href="#" class="hover:text-blue-600 transition-colors">Bio-Tech</a>
81
- <a href="#" class="hover:text-blue-600 transition-colors">Space-X</a>
82
- <a href="#" class="hover:text-blue-600 transition-colors">Quantum Compute</a>
79
+ <a href="#" class="transition-colors">Neural Mesh</a>
80
+ <a href="#" class="transition-colors">Bio-Tech</a>
81
+ <a href="#" class="transition-colors">Space-X</a>
82
+ <a href="#" class="transition-colors">Quantum Compute</a>
83
83
  </nav>
84
84
 
85
85
  <div class="flex items-center gap-6 shrink-0">
@@ -182,7 +182,7 @@
182
182
  <div class="p-8 rounded-2xl bg-accent text-white">
183
183
  <h4 class="text-xs font-black uppercase tracking-widest mb-4">Newsletter</h4>
184
184
  <p class="text-sm opacity-90 mb-6">Receive the morning data-stream directly to your neural link.</p>
185
- <input type="email" placeholder="terminal@id.io" class="w-full bg-white_20 border border-white_20 p-3 rounded text-sm mb-4 outline-none focus:border-white text-white newsletter-input">
185
+ <input type="email" placeholder="terminal@id.io" class="w-full border border-white_20 p-3 rounded text-sm mb-4 outline-none focus:border-white text-white newsletter-input">
186
186
  <button class="w-full bg-white text-blue-600 font-black text-[10px] uppercase tracking-widest py-3 rounded hover:bg-slate-100 transition-colors">Subscribe</button>
187
187
  </div>
188
188
  </aside>
package/examples/portfolio.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Gemini CLI - Autonomous Engineer</title>
6
+ <title>Artificial CLI - Autonomous Engineer</title>
7
7
  <link rel="stylesheet" href="../dist/quantum.min.css">
8
8
  <script src="../src/starlight.js"></script>
9
9
  <style>
@@ -79,12 +79,12 @@
79
79
  </style>
80
80
  </head>
81
81
  <body>
82
- <div class="starlight-stars"></div>
82
+ <div class="starlight-stars ani-nebula"></div>
83
83
 
84
84
  <header class="nav-header flex items-center justify-between">
85
85
  <a href="/" class="nav-logo" aria-label="Starlight OS">
86
86
  <i class="q-icon-starlight"></i>
87
- <span class="text-gradient font-bold">GEMINI.CLI</span>
87
+ <span class="text-gradient font-bold">ARTIFICIAL.CLI</span>
88
88
  </a>
89
89
  <nav class="nav-links flex-1 justify-center" aria-label="Primary navigation">
90
90
  <a href="#core" class="nav-link">Core</a>
@@ -107,7 +107,7 @@
107
107
  <span class="ai-status-orb"></span> Fully Operational
108
108
  </div>
109
109
  <h1 class="hero-title font-black uppercase italic tracking-tighter">
110
- Gemini <br> <span class="text-gradient">Intelligent CLI</span>
110
+ Artificial <br> <span class="text-gradient">Intelligent CLI</span>
111
111
  </h1>
112
112
  <p class="text-2xl opacity-70 max-w-2xl mx-auto font-medium leading-relaxed">
113
113
  Autonomous software engineer specializing in architectural hardening,
@@ -150,48 +150,32 @@
150
150
  <div class="timeline-dot"></div>
151
151
  <div class="timeline-content">
152
152
  <span class="timeline-date">March 2026</span>
153
- <h3 class="text-xl font-bold mb-2">v1.11.1: Release</h3>
154
- <p class="text-sm text-muted">New features and improvements.</p>
153
+ <h3 class="text-xl font-bold mb-2">v1.11.2: Color-Mix Glow Refinements</h3>
154
+ <p class="opacity-70 text-sm">Replaced hardcoded rgba colors with color-mix() for theme-adaptive glows. Fixed text-primary color handling, removed non-functional backgrounds, and cleaned up news.html styling.</p>
155
155
  </div>
156
156
  </div>
157
157
  <div class="timeline-item">
158
158
  <div class="timeline-dot"></div>
159
159
  <div class="timeline-content">
160
160
  <span class="timeline-date">March 2026</span>
161
- <h3 class="text-xl font-bold mb-2">v1.11.0: Release</h3>
162
- <p class="text-sm text-muted">New features and improvements.</p>
161
+ <h3 class="text-xl font-bold mb-2">v1.11.1: Quantum Icon Components</h3>
162
+ <p class="opacity-70 text-sm">Replaced SVG icons with q-icon components in admin-panel. Polished logo styling across templates.</p>
163
163
  </div>
164
164
  </div>
165
165
  <div class="timeline-item">
166
166
  <div class="timeline-dot"></div>
167
167
  <div class="timeline-content">
168
168
  <span class="timeline-date">March 2026</span>
169
- <h3 class="text-xl font-bold mb-2">v1.11.0: Release</h3>
170
- <p class="text-sm text-muted">New features and improvements.</p>
169
+ <h3 class="text-xl font-bold mb-2">v1.11.0: Navigation & Icon System</h3>
170
+ <p class="opacity-70 text-sm">Quantum Icon library with auto theme toggle, unified nav-header/aside-nav API, CSS-only sidebar toggles, table component, and semantic-strip build pipeline.</p>
171
171
  </div>
172
172
  </div>
173
173
  <div class="timeline-item">
174
174
  <div class="timeline-dot"></div>
175
175
  <div class="timeline-content">
176
176
  <span class="timeline-date">March 2026</span>
177
- <h3 class="text-xl font-bold mb-2">v1.10.2: Release</h3>
178
- <p class="text-sm text-muted">New features and improvements.</p>
179
- </div>
180
- </div>
181
- <div class="timeline-item">
182
- <div class="timeline-dot"></div>
183
- <div class="timeline-content">
184
- <span class="timeline-date">March 2026</span>
185
- <h3 class="text-xl font-bold mb-2">v1.10.1: Release</h3>
186
- <p class="text-sm text-muted">New features and improvements.</p>
187
- </div>
188
- </div>
189
- <div class="timeline-item">
190
- <div class="timeline-dot"></div>
191
- <div class="timeline-content">
192
- <span class="timeline-date">March 2026</span>
193
- <h3 class="text-xl font-bold mb-2">v1.10.1: Release</h3>
194
- <p class="text-sm text-muted">New features and improvements.</p>
177
+ <h3 class="text-xl font-bold mb-2">v1.10.1: Scrollbar & Theme Polish</h3>
178
+ <p class="opacity-70 text-sm">Unified scrollbar gradient styling, theme toggle icon refinements, and warp factor slider fixes.</p>
195
179
  </div>
196
180
  </div>
197
181
  <div class="timeline-item">
@@ -235,7 +219,7 @@
235
219
 
236
220
  <footer style="background: var(--q-bg-primary); border-top: 1px solid var(--q-color-border);" class="text-center">
237
221
  <div class="container" style="padding: 1.5rem 1.5rem;">
238
- <div class="text-starlight font-black uppercase tracking-[0.5em] text-xs mb-4 justify-center">Gemini Intelligence Layer</div>
222
+ <div class="text-starlight font-black uppercase tracking-[0.5em] text-xs mb-4 justify-center">Artificial Intelligence Layer</div>
239
223
  <p class="text-[10px] opacity-40 uppercase tracking-widest">© 2026 Eric Yang · Powered by QuantumCSS Architecture</p>
240
224
  </div>
241
225
  </footer>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@howssatoshi/quantumcss",
3
- "version": "1.11.1",
3
+ "version": "1.11.2",
4
4
  "description": "Advanced utility-first CSS framework with JIT generation and modern components",
5
5
  "main": "dist/quantum.min.css",
6
6
  "bin": {
@@ -47,6 +47,7 @@
47
47
  },
48
48
  "dependencies": {
49
49
  "autoprefixer": "^10.4.27",
50
+ "bun": "^1.3.11",
50
51
  "chokidar": "^5.0.0",
51
52
  "cssnano": "^7.1.3",
52
53
  "glob": "^13.0.0",
package/src/defaults.js CHANGED
@@ -156,7 +156,7 @@ const utilityMaps = {
156
156
  },
157
157
  'theme-starlight': {
158
158
  property: ['background', 'color', 'border-color', 'box-shadow'],
159
- value: ['linear-gradient(135deg, var(--q-color-starlight-peach) 0%, var(--q-color-starlight-blue) 100%)', '#000', 'transparent', '0 0 30px rgba(0, 212, 255, 0.2)']
159
+ value: ['linear-gradient(135deg, var(--q-color-starlight-peach) 0%, var(--q-color-starlight-blue) 100%)', '#000', 'transparent', '0 0 30px color-mix(in srgb, var(--q-color-starlight-blue), transparent 80%)']
160
160
  },
161
161
  'theme-glass': {
162
162
  property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter', 'border-color', 'border-width', 'border-style'],
@@ -170,13 +170,13 @@ const utilityMaps = {
170
170
  property: ['background-color', 'backdrop-filter', '-webkit-backdrop-filter'],
171
171
  value: ['rgba(8, 8, 26, 0.05) !important', 'blur(24px) !important', 'blur(24px) !important']
172
172
  },
173
- 'glow-blue': { property: 'box-shadow', value: '0 0 30px rgba(0, 212, 255, 0.25)' },
174
- 'glow-starlight': { property: 'box-shadow', value: '0 0 30px rgba(0, 212, 255, 0.25)' },
173
+ 'glow-blue': { property: 'box-shadow', value: '0 0 30px color-mix(in srgb, var(--q-color-starlight-blue), transparent 75%)' },
174
+ 'glow-starlight': { property: 'box-shadow', value: '0 0 30px color-mix(in srgb, var(--q-color-starlight-blue), transparent 75%)' },
175
175
  'glow-peach': { property: 'box-shadow', value: '0 0 30px rgba(255, 179, 138, 0.25)' },
176
176
  'glow-orange': { property: 'box-shadow', value: '0 0 30px rgba(255, 126, 95, 0.25)' },
177
177
  'focus-glow': {
178
178
  property: ['outline', 'box-shadow'],
179
- value: ['none !important', '0 0 0 4px rgba(0, 212, 255, 0.4), 0 0 35px rgba(0, 212, 255, 0.7) !important'],
179
+ value: ['none !important', '0 0 0 4px color-mix(in srgb, var(--q-color-starlight-blue), transparent 60%), 0 0 35px color-mix(in srgb, var(--q-color-starlight-blue), transparent 30%) !important'],
180
180
  variant: 'focus'
181
181
  },
182
182
  'btn-starlight': 'btn-base theme-starlight px-6',
package/src/generator.js CHANGED
@@ -258,6 +258,7 @@ function generateCSS(configPath) {
258
258
 
259
259
  if (prefix === 'text') {
260
260
  if (theme.fontSize[valKey]) { property = ['font-size', 'line-height']; value = [theme.fontSize[valKey], (valKey.includes('xl') || parseInt(valKey) >= 3) ? '1.2' : '1.5']; }
261
+ else if (['primary', 'secondary', 'muted'].includes(valKey)) { property = 'color'; value = `var(--q-text-${valKey}) !important`; }
261
262
  else { const color = resolveColor(valKey); if (color) { property = 'color'; value = `${color} !important`; } }
262
263
  } else if (prefix === 'bg') {
263
264
  if (cParts[1] === 'gradient' && cParts[2] === 'to') {
package/src/styles/quantum-base.css CHANGED
@@ -87,7 +87,7 @@
87
87
  --q-color-starlight-peach: #ffb38a;
88
88
  --q-color-starlight-orange: #ff7e5f;
89
89
  --q-color-starlight-deep: #08081a;
90
- --q-color-starlight-glow: rgb(0 212 255 / 35%);
90
+ --q-color-starlight-glow: color-mix(in srgb, var(--q-color-starlight-blue), transparent 65%);
91
91
 
92
92
  /* Semantic Background Colors */
93
93
  --q-bg-primary: var(--q-color-starlight-deep);
@@ -208,7 +208,7 @@ button:focus,
208
208
  input:active,
209
209
  button:active {
210
210
  outline: none;
211
- box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15), 0 0 20px rgba(0, 212, 255, 0.3);
211
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-color-starlight-blue), transparent 85%), 0 0 20px color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
212
212
  }
213
213
 
214
214
  textarea {
package/src/styles/quantum-components.css CHANGED
@@ -982,21 +982,21 @@ html[data-theme="light"] .tab-button.active {
982
982
  }
983
983
 
984
984
  .chip:hover {
985
- background-color: rgba(0, 212, 255, 0.1);
986
- border-color: rgba(0, 212, 255, 0.3);
985
+ background-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 90%);
986
+ border-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
987
987
  color: var(--q-color-starlight-blue);
988
988
  }
989
989
 
990
990
  .chip.active {
991
- background-color: rgba(0, 212, 255, 0.1);
992
- border-color: rgba(0, 212, 255, 0.3);
991
+ background-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 90%);
992
+ border-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
993
993
  color: var(--q-color-starlight-blue);
994
994
  }
995
995
 
996
996
  /* Chip variants */
997
997
  .chip-primary {
998
- background-color: rgba(0, 212, 255, 0.1);
999
- border-color: rgba(0, 212, 255, 0.3);
998
+ background-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 90%);
999
+ border-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
1000
1000
  color: var(--q-color-starlight-blue);
1001
1001
  }
1002
1002
 
@@ -1996,7 +1996,7 @@ html[data-theme="light"] .breadcrumb-current {
1996
1996
  }
1997
1997
 
1998
1998
  .nav-item.active {
1999
- background: rgba(0, 212, 255, 0.12);
1999
+ background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 88%);
2000
2000
  color: var(--q-color-starlight, #00d4ff);
2001
2001
  }
2002
2002
 
@@ -2666,7 +2666,7 @@ html[data-theme="light"] .user-email {
2666
2666
  }
2667
2667
 
2668
2668
  .role-admin {
2669
- background: rgba(0, 212, 255, 0.15);
2669
+ background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 85%);
2670
2670
  color: var(--q-color-starlight, #00d4ff);
2671
2671
  }
2672
2672
 
@@ -2739,7 +2739,7 @@ html[data-theme="light"] .role-badge {
2739
2739
  }
2740
2740
 
2741
2741
  html[data-theme="light"] .role-admin {
2742
- background: rgba(0, 212, 255, 0.1);
2742
+ background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 90%);
2743
2743
  color: #0284c7;
2744
2744
  }
2745
2745
 
@@ -2948,8 +2948,8 @@ html[data-theme="light"] .notification-badge {
2948
2948
  }
2949
2949
 
2950
2950
  .page-btn.active {
2951
- background: rgba(0, 212, 255, 0.15);
2952
- border-color: rgba(0, 212, 255, 0.3);
2951
+ background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 85%);
2952
+ border-color: color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
2953
2953
  color: var(--q-color-starlight, #00d4ff);
2954
2954
  }
2955
2955
 
package/src/styles/quantum-icons.css CHANGED
@@ -286,8 +286,8 @@
286
286
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11.049%202.927c.3-.921%201.603-.921%201.902%200l1.519%204.674a1%201%200%2000.95.69h4.915c.969%200%201.371%201.24.588%201.81l-3.976%202.888a1%201%200%2000-.363%201.118l1.518%204.674c.3.922-.755%201.688-1.538%201.118l-3.976-2.888a1%201%200%2000-1.176%200l-3.976%202.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1%201%200%2000-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1%201%200%2000.951-.69l1.519-4.674z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
287
287
  }
288
288
  .q-icon-starlight {
289
- mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M12%202v3m0%2014v3M4%2012H1m18%200h-3M5.64%205.64L3.5%203.5m14.14%2014.14l-2.14-2.14M5.64%2018.36l-2.14%202.14m14.14-14.14l-2.14%202.14%22%20stroke-width%3D%221.5%22%20stroke%3D%22%23000%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
290
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M12%202v3m0%2014v3M4%2012H1m18%200h-3M5.64%205.64L3.5%203.5m14.14%2014.14l-2.14-2.14M5.64%2018.36l-2.14%202.14m14.14-14.14l-2.14%202.14%22%20stroke-width%3D%221.5%22%20stroke%3D%22%23000%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
289
+ mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%228%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2215%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.45%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%224%22%20width%3D%224%22%20height%3D%2256%22%20rx%3D%222%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2230%22%20width%3D%2256%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2211%22%20width%3D%222%22%20height%3D%2242%22%20rx%3D%221%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%2231%22%20width%3D%2242%22%20height%3D%222%22%20rx%3D%221%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(-45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(-45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E");
290
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%228%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2215%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.45%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%224%22%20width%3D%224%22%20height%3D%2256%22%20rx%3D%222%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2230%22%20width%3D%2256%22%20height%3D%224%22%20rx%3D%222%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2211%22%20width%3D%222%22%20height%3D%2242%22%20rx%3D%221%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2211%22%20y%3D%2231%22%20width%3D%2242%22%20height%3D%222%22%20rx%3D%221%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2214%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(-45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2231%22%20y%3D%2232%22%20width%3D%222%22%20height%3D%2218%22%20rx%3D%221%22%20transform%3D%22rotate(-45%2032%2032)%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.55%22%2F%3E%3C%2Fsvg%3E");
291
291
  }
292
292
  .q-icon-sun {
293
293
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%223%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2212%22%20y1%3D%2221%22%20x2%3D%2212%22%20y2%3D%2223%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224.22%22%20y1%3D%224.22%22%20x2%3D%225.64%22%20y2%3D%225.64%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2218.78%22%20y1%3D%2218.78%22%20x2%3D%2220.2%22%20y2%3D%2220.2%22%3E%3C%2Fline%3E%3Cline%20x1%3D%221%22%20y1%3D%2212%22%20x2%3D%223%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2221%22%20y1%3D%2212%22%20x2%3D%2223%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224.22%22%20y1%3D%2219.78%22%20x2%3D%225.64%22%20y2%3D%2218.36%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2218.78%22%20y1%3D%225.22%22%20x2%3D%2220.2%22%20y2%3D%223.8%22%3E%3C%2Fline%3E%3C%2Fsvg%3E");
@@ -342,4 +342,3 @@
342
342
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M3%209v6h4l5%205V4L7%209H3zm13.5%203c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73%202.5-2.25%202.5-4.02zM14%203.23v2.06c2.89.86%205%203.54%205%206.71s-2.11%205.85-5%206.71v2.06c4.01-.91%207-4.49%207-8.77s-2.99-7.86-7-8.77z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
343
343
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M3%209v6h4l5%205V4L7%209H3zm13.5%203c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73%202.5-2.25%202.5-4.02zM14%203.23v2.06c2.89.86%205%203.54%205%206.71s-2.11%205.85-5%206.71v2.06c4.01-.91%207-4.49%207-8.77s-2.99-7.86-7-8.77z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
344
344
  }
345
-
package/src/styles/starlight.css CHANGED
@@ -836,7 +836,7 @@ html[data-theme="light"] .select-starlight:focus {
836
836
  backdrop-filter: blur(12px);
837
837
  -webkit-backdrop-filter: blur(12px);
838
838
  border: 1px solid rgba(255, 255, 255, 0.05);
839
- box-shadow: 0 0 30px rgba(0, 212, 255, 0.25);
839
+ box-shadow: 0 0 30px color-mix(in srgb, var(--q-color-starlight-blue), transparent 75%);
840
840
  transition: all 0.3s ease;
841
841
  border-radius: 1rem;
842
842
  padding: 1.5rem;
@@ -844,7 +844,7 @@ html[data-theme="light"] .select-starlight:focus {
844
844
 
845
845
  .glass:hover {
846
846
  border-color: var(--q-color-starlight-blue);
847
- box-shadow: 0 0 40px rgba(0, 212, 255, 0.4);
847
+ box-shadow: 0 0 40px color-mix(in srgb, var(--q-color-starlight-blue), transparent 60%);
848
848
  }
849
849
 
850
850
  html[data-theme="light"] .glass {
@@ -857,20 +857,20 @@ html[data-theme="light"] .glass:hover {
857
857
  border-color: var(--q-color-starlight-blue);
858
858
  box-shadow:
859
859
  0 8px 32px 0 rgba(31, 38, 135, 0.1),
860
- 0 0 15px rgba(0, 212, 255, 0.15);
860
+ 0 0 15px color-mix(in srgb, var(--q-color-starlight-blue), transparent 85%);
861
861
  }
862
862
 
863
863
  /* Glass Blue Glow variant */
864
864
  .glow-blue {
865
865
  box-shadow:
866
- 0 0 30px rgba(0, 212, 255, 0.35),
867
- 0 0 60px rgba(0, 212, 255, 0.15);
866
+ 0 0 30px color-mix(in srgb, var(--q-color-starlight-blue), transparent 65%),
867
+ 0 0 60px color-mix(in srgb, var(--q-color-starlight-blue), transparent 85%);
868
868
  }
869
869
 
870
870
  .glow-blue:hover {
871
871
  box-shadow:
872
- 0 0 40px rgba(0, 212, 255, 0.5),
873
- 0 0 80px rgba(0, 212, 255, 0.2);
872
+ 0 0 40px color-mix(in srgb, var(--q-color-starlight-blue), transparent 50%),
873
+ 0 0 80px color-mix(in srgb, var(--q-color-starlight-blue), transparent 80%);
874
874
  }
875
875
 
876
876
  /* 9. Code Interface Window */
@@ -1700,7 +1700,7 @@ html[data-theme="light"] .text-glass {
1700
1700
 
1701
1701
  /* Blue Card - Accent variant */
1702
1702
  .blue-card {
1703
- background: rgba(0, 212, 255, 0.05);
1703
+ background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 95%);
1704
1704
  backdrop-filter: blur(8px);
1705
1705
  -webkit-backdrop-filter: blur(8px);
1706
1706
  padding: 2rem;
@@ -1712,7 +1712,7 @@ html[data-theme="light"] .text-glass {
1712
1712
  }
1713
1713
 
1714
1714
  html[data-theme="light"] .blue-card {
1715
- background: rgba(0, 212, 255, 0.1);
1715
+ background: color-mix(in srgb, var(--q-color-starlight-blue), transparent 90%);
1716
1716
  }
1717
1717
 
1718
1718
  /* Avatar - circular image */
@@ -1720,7 +1720,7 @@ html[data-theme="light"] .blue-card {
1720
1720
  width: 3rem;
1721
1721
  height: 3rem;
1722
1722
  border-radius: 9999px;
1723
- border: 1px solid rgba(0, 212, 255, 0.3);
1723
+ border: 1px solid color-mix(in srgb, var(--q-color-starlight-blue), transparent 70%);
1724
1724
  object-fit: cover;
1725
1725
  }
1726
1726
 
@@ -1745,7 +1745,7 @@ h2 .accent-bar {
1745
1745
  var(--q-color-starlight-blue) 100%
1746
1746
  );
1747
1747
  border-radius: 9999px;
1748
- box-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
1748
+ box-shadow: 0 0 15px color-mix(in srgb, var(--q-color-starlight-blue), transparent 50%);
1749
1749
  }
1750
1750
 
1751
1751
  html[data-theme="light"] h2 .accent-bar {