@howssatoshi/quantumcss 1.4.2 → 1.5.0

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 (25) hide show
  1. package/README.md +8 -7
  2. package/dist/quantum.min.css +1 -4678
  3. package/examples/blog-template.html +268 -0
  4. package/examples/gaming-template.html +355 -0
  5. package/examples/images/starlight.jpg +0 -0
  6. package/examples/index.html +138 -0
  7. package/examples/kitchen-sink.html +1012 -0
  8. package/examples/news-template.html +320 -0
  9. package/examples/shopping/images/headset.jpg +0 -0
  10. package/examples/shopping/images/sneakers.jpg +0 -0
  11. package/examples/shopping/images/windbreaker.jpg +0 -0
  12. package/examples/shopping/index.html +330 -0
  13. package/examples/starlight.html +161 -0
  14. package/examples/theme-test.html +174 -0
  15. package/examples/travel/index.html +254 -0
  16. package/examples/verify_fixes.html +52 -0
  17. package/examples/verify_presets.html +32 -0
  18. package/package.json +8 -1
  19. package/src/generator.js +19 -8
  20. package/src/starlight.js +406 -15
  21. package/src/styles/quantum-animations.css +3 -2
  22. package/src/styles/quantum-base.css +295 -91
  23. package/src/styles/quantum-components.css +47 -47
  24. package/src/styles/quantum-responsive.css +5 -4
  25. package/src/styles/starlight.css +184 -184
package/src/styles/quantum-components.css CHANGED
@@ -6,8 +6,8 @@
6
6
  /* Hover State Utilities */
7
7
  .hover\:text-primary:hover { color: var(--color-primary); }
8
8
  .hover\:text-secondary:hover { color: var(--color-secondary); }
9
- .hover\:text-white:hover { color: #ffffff; }
10
- .hover\:text-black:hover { color: #000000; }
9
+ .hover\:text-white:hover { color: #fff; }
10
+ .hover\:text-black:hover { color: #000; }
11
11
 
12
12
  .hover\:bg-primary:hover { background-color: var(--color-primary); }
13
13
  .hover\:bg-secondary:hover { background-color: var(--color-secondary); }
@@ -59,7 +59,7 @@
59
59
 
60
60
  /* Group Hover Utilities */
61
61
  .group:hover .group-hover\:text-primary { color: var(--color-primary); }
62
- .group:hover .group-hover\:text-white { color: #ffffff; }
62
+ .group:hover .group-hover\:text-white { color: #fff; }
63
63
 
64
64
  .group:hover .group-hover\:bg-primary { background-color: var(--color-primary); }
65
65
  .group:hover .group-hover\:bg-secondary { background-color: var(--color-secondary); }
@@ -102,21 +102,21 @@
102
102
  }
103
103
 
104
104
  .btn-secondary {
105
- background-color: rgba(255, 255, 255, 0.05);
105
+ background-color: rgb(255 255 255 / 5%);
106
106
  color: white;
107
- border: 1px solid rgba(255, 255, 255, 0.1);
107
+ border: 1px solid rgb(255 255 255 / 10%);
108
108
  backdrop-filter: blur(12px);
109
109
  -webkit-backdrop-filter: blur(12px);
110
110
  }
111
111
 
112
112
  .btn-secondary:hover {
113
- background-color: rgba(255, 255, 255, 0.1);
113
+ background-color: rgb(255 255 255 / 10%);
114
114
  }
115
115
 
116
116
  body.light-mode .btn-secondary {
117
- background-color: rgba(0, 0, 0, 0.03);
117
+ background-color: rgb(0 0 0 / 3%);
118
118
  color: #1e293b;
119
- border-color: rgba(0, 0, 0, 0.1);
119
+ border-color: rgb(0 0 0 / 10%);
120
120
  }
121
121
 
122
122
  .btn-outline {
@@ -285,64 +285,64 @@ body.light-mode .input:disabled {
285
285
  }
286
286
 
287
287
  .badge-primary {
288
- background-color: rgba(0, 212, 255, 0.15);
288
+ background-color: rgb(0 212 255 / 15%);
289
289
  color: #00d4ff;
290
- border-color: rgba(0, 212, 255, 0.3);
290
+ border-color: rgb(0 212 255 / 30%);
291
291
  }
292
292
 
293
293
  .badge-secondary {
294
- background-color: rgba(255, 255, 255, 0.05);
295
- color: rgba(255, 255, 255, 0.8);
296
- border-color: rgba(255, 255, 255, 0.1);
294
+ background-color: rgb(255 255 255 / 5%);
295
+ color: rgb(255 255 255 / 80%);
296
+ border-color: rgb(255 255 255 / 10%);
297
297
  }
298
298
 
299
299
  .badge-success {
300
- background-color: rgba(16, 185, 129, 0.15);
300
+ background-color: rgb(16 185 129 / 15%);
301
301
  color: #10b981;
302
- border-color: rgba(16, 185, 129, 0.3);
302
+ border-color: rgb(16 185 129 / 30%);
303
303
  }
304
304
 
305
305
  .badge-warning {
306
- background-color: rgba(245, 158, 11, 0.15);
306
+ background-color: rgb(245 158 11 / 15%);
307
307
  color: #f59e0b;
308
- border-color: rgba(245, 158, 11, 0.3);
308
+ border-color: rgb(245 158 11 / 30%);
309
309
  }
310
310
 
311
311
  .badge-error {
312
- background-color: rgba(239, 68, 68, 0.15);
312
+ background-color: rgb(239 68 68 / 15%);
313
313
  color: #ef4444;
314
- border-color: rgba(239, 68, 68, 0.3);
314
+ border-color: rgb(239 68 68 / 30%);
315
315
  }
316
316
 
317
317
  /* Light Mode Overrides for Badges */
318
- body.light-mode .badge-primary {
319
- background-color: rgba(59, 130, 246, 0.1);
318
+ html[data-theme="light"] .badge-primary {
319
+ background-color: rgb(59 130 246 / 10%);
320
320
  color: #2563eb;
321
- border-color: rgba(59, 130, 246, 0.2);
321
+ border-color: rgb(59 130 246 / 20%);
322
322
  }
323
323
 
324
- body.light-mode .badge-secondary {
325
- background-color: rgba(0, 0, 0, 0.05);
324
+ html[data-theme="light"] .badge-secondary {
325
+ background-color: rgb(0 0 0 / 5%);
326
326
  color: #475569;
327
- border-color: rgba(0, 0, 0, 0.1);
327
+ border-color: rgb(0 0 0 / 10%);
328
328
  }
329
329
 
330
- body.light-mode .badge-success {
331
- background-color: rgba(16, 185, 129, 0.1);
330
+ html[data-theme="light"] .badge-success {
331
+ background-color: rgb(16 185 129 / 10%);
332
332
  color: #059669;
333
- border-color: rgba(16, 185, 129, 0.2);
333
+ border-color: rgb(16 185 129 / 20%);
334
334
  }
335
335
 
336
- body.light-mode .badge-warning {
337
- background-color: rgba(245, 158, 11, 0.1);
336
+ html[data-theme="light"] .badge-warning {
337
+ background-color: rgb(245 158 11 / 10%);
338
338
  color: #d97706;
339
- border-color: rgba(245, 158, 11, 0.2);
339
+ border-color: rgb(245 158 11 / 20%);
340
340
  }
341
341
 
342
- body.light-mode .badge-error {
343
- background-color: rgba(239, 68, 68, 0.1);
342
+ html[data-theme="light"] .badge-error {
343
+ background-color: rgb(239 68 68 / 10%);
344
344
  color: #dc2626;
345
- border-color: rgba(239, 68, 68, 0.2);
345
+ border-color: rgb(239 68 68 / 20%);
346
346
  }
347
347
 
348
348
  /* Alert Component */
@@ -380,7 +380,7 @@ body.light-mode .badge-error {
380
380
  .modal-overlay {
381
381
  position: fixed;
382
382
  inset: 0;
383
- background-color: rgba(0, 0, 0, 0.5);
383
+ background-color: rgb(0 0 0 / 50%);
384
384
  display: flex;
385
385
  align-items: center;
386
386
  justify-content: center;
@@ -407,7 +407,7 @@ body.light-mode .modal-content {
407
407
  display: inline-block;
408
408
  width: 1.5rem;
409
409
  height: 1.5rem;
410
- border: 2px solid rgba(255, 255, 255, 0.1);
410
+ border: 2px solid rgb(255 255 255 / 10%);
411
411
  border-top-color: var(--color-primary);
412
412
  border-radius: 50%;
413
413
  animation: spin 1s linear infinite;
@@ -419,7 +419,7 @@ body.light-mode .modal-content {
419
419
 
420
420
  /* Skeleton Loading */
421
421
  .skeleton {
422
- background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
422
+ background: linear-gradient(90deg, rgb(255 255 255 / 5%) 25%, rgb(255 255 255 / 10%) 50%, rgb(255 255 255 / 5%) 75%);
423
423
  background-size: 200% 100%;
424
424
  animation: shimmer 2s infinite;
425
425
  border-radius: var(--radius-md);
@@ -586,7 +586,7 @@ body.light-mode .accordion-content {
586
586
  /* Tab Component */
587
587
  .tab-list {
588
588
  display: flex;
589
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
589
+ border-bottom: 1px solid rgb(255 255 255 / 10%);
590
590
  }
591
591
 
592
592
  .tab-button {
@@ -601,7 +601,7 @@ body.light-mode .accordion-content {
601
601
  }
602
602
 
603
603
  .tab-button:hover {
604
- background-color: rgba(255, 255, 255, 0.05);
604
+ background-color: rgb(255 255 255 / 5%);
605
605
  color: var(--text-primary);
606
606
  }
607
607
 
@@ -678,7 +678,7 @@ body.light-mode .tab-button.active {
678
678
  border-radius: var(--radius-full);
679
679
  }
680
680
 
681
- .toggle-slider:before {
681
+ .toggle-slider::before {
682
682
  position: absolute;
683
683
  content: "";
684
684
  height: 1.25rem;
@@ -694,7 +694,7 @@ body.light-mode .tab-button.active {
694
694
  background-color: var(--color-primary);
695
695
  }
696
696
 
697
- .toggle-input:checked + .toggle-slider:before {
697
+ .toggle-input:checked + .toggle-slider::before {
698
698
  transform: translateX(1.5rem);
699
699
  }
700
700
 
@@ -756,7 +756,7 @@ body.light-mode .tab-button.active {
756
756
  }
757
757
 
758
758
  .table-wrapper::-webkit-scrollbar-track {
759
- background: rgba(255, 255, 255, 0.05);
759
+ background: rgb(255 255 255 / 5%);
760
760
  border-radius: 4px;
761
761
  }
762
762
 
@@ -766,7 +766,7 @@ body.light-mode .tab-button.active {
766
766
  }
767
767
 
768
768
  body.light-mode .table-wrapper::-webkit-scrollbar-track {
769
- background: rgba(0, 0, 0, 0.05);
769
+ background: rgb(0 0 0 / 5%);
770
770
  }
771
771
 
772
772
  .table {
@@ -780,19 +780,19 @@ body.light-mode .table-wrapper::-webkit-scrollbar-track {
780
780
  .table th {
781
781
  padding: var(--space-3) var(--space-4);
782
782
  font-weight: 600;
783
- background-color: rgba(255, 255, 255, 0.05);
784
- border-bottom: 2px solid rgba(255, 255, 255, 0.1);
783
+ background-color: rgb(255 255 255 / 5%);
784
+ border-bottom: 2px solid rgb(255 255 255 / 10%);
785
785
  color: var(--text-primary);
786
786
  }
787
787
 
788
788
  .table td {
789
789
  padding: var(--space-3) var(--space-4);
790
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
790
+ border-bottom: 1px solid rgb(255 255 255 / 10%);
791
791
  color: var(--text-secondary);
792
792
  }
793
793
 
794
794
  .table tbody tr:hover {
795
- background-color: rgba(255, 255, 255, 0.03);
795
+ background-color: rgb(255 255 255 / 3%);
796
796
  }
797
797
 
798
798
  /* Light Mode Table Styles */
package/src/styles/quantum-responsive.css CHANGED
@@ -4,6 +4,7 @@
4
4
  */
5
5
 
6
6
  /* Modern Responsive Breakpoints */
7
+
7
8
  /* Using logical properties and container queries */
8
9
 
9
10
  @custom-media --sm (min-width: 640px);
@@ -325,7 +326,7 @@
325
326
  }
326
327
 
327
328
  /* High DPI Display Utilities */
328
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
329
+ @media (min-resolution: 2dppx), (min-resolution: 192dpi) {
329
330
  .retina\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
330
331
  .retina\:border { border-width: 0.5px; }
331
332
  }
@@ -339,7 +340,7 @@
339
340
 
340
341
  /* Dark Mode Utilities */
341
342
  @media (prefers-color-scheme: dark) {
342
- .dark\:text-white { color: #ffffff; }
343
+ .dark\:text-white { color: #fff; }
343
344
  .dark\:text-gray-200 { color: #e5e7eb; }
344
345
  .dark\:text-gray-300 { color: #d1d5db; }
345
346
  .dark\:bg-gray-900 { background-color: #111827; }
@@ -351,10 +352,10 @@
351
352
 
352
353
  /* Light Mode Utilities */
353
354
  @media (prefers-color-scheme: light) {
354
- .light\:text-black { color: #000000; }
355
+ .light\:text-black { color: #000; }
355
356
  .light\:text-gray-800 { color: #1f2937; }
356
357
  .light\:text-gray-700 { color: #374151; }
357
- .light\:bg-white { background-color: #ffffff; }
358
+ .light\:bg-white { background-color: #fff; }
358
359
  .light\:bg-gray-50 { background-color: #f9fafb; }
359
360
  .light\:bg-gray-100 { background-color: #f3f4f6; }
360
361
  .light\:border-gray-300 { border-color: #d1d5db; }