@howssatoshi/quantumcss 1.4.3 → 1.5.1

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 (22) hide show
  1. package/README.md +8 -7
  2. package/dist/quantum.min.css +588 -381
  3. package/examples/blog-template.html +2 -16
  4. package/examples/gaming-template.html +0 -20
  5. package/examples/index.html +5 -8
  6. package/examples/kitchen-sink.html +1 -1
  7. package/examples/news-template.html +64 -80
  8. package/examples/shopping/index.html +48 -40
  9. package/examples/starlight.html +6 -73
  10. package/examples/theme-test.html +174 -0
  11. package/examples/travel/index.html +7 -17
  12. package/examples/verify_fixes.html +1 -0
  13. package/examples/verify_presets.html +2 -1
  14. package/package.json +7 -1
  15. package/src/defaults.js +5 -0
  16. package/src/generator.js +27 -8
  17. package/src/starlight.js +406 -15
  18. package/src/styles/quantum-animations.css +3 -2
  19. package/src/styles/quantum-base.css +299 -95
  20. package/src/styles/quantum-components.css +51 -50
  21. package/src/styles/quantum-responsive.css +5 -4
  22. 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,22 @@
102
102
  }
103
103
 
104
104
  .btn-secondary {
105
- background-color: rgba(255, 255, 255, 0.05);
106
- color: white;
107
- border: 1px solid rgba(255, 255, 255, 0.1);
105
+ background-color: rgb(255 255 255 / 8%);
106
+ color: #ffffff !important;
107
+ border: 1px solid rgb(255 255 255 / 15%);
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
- body.light-mode .btn-secondary {
117
- background-color: rgba(0, 0, 0, 0.03);
118
- color: #1e293b;
119
- border-color: rgba(0, 0, 0, 0.1);
116
+ body.light-mode .btn-secondary,
117
+ html[data-theme="light"] .btn-secondary {
118
+ background-color: rgb(0 0 0 / 3%);
119
+ color: #1e293b !important;
120
+ border-color: rgb(0 0 0 / 10%);
120
121
  }
121
122
 
122
123
  .btn-outline {
@@ -285,64 +286,64 @@ body.light-mode .input:disabled {
285
286
  }
286
287
 
287
288
  .badge-primary {
288
- background-color: rgba(0, 212, 255, 0.15);
289
+ background-color: rgb(0 212 255 / 15%);
289
290
  color: #00d4ff;
290
- border-color: rgba(0, 212, 255, 0.3);
291
+ border-color: rgb(0 212 255 / 30%);
291
292
  }
292
293
 
293
294
  .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);
295
+ background-color: rgb(255 255 255 / 5%);
296
+ color: rgb(255 255 255 / 80%);
297
+ border-color: rgb(255 255 255 / 10%);
297
298
  }
298
299
 
299
300
  .badge-success {
300
- background-color: rgba(16, 185, 129, 0.15);
301
+ background-color: rgb(16 185 129 / 15%);
301
302
  color: #10b981;
302
- border-color: rgba(16, 185, 129, 0.3);
303
+ border-color: rgb(16 185 129 / 30%);
303
304
  }
304
305
 
305
306
  .badge-warning {
306
- background-color: rgba(245, 158, 11, 0.15);
307
+ background-color: rgb(245 158 11 / 15%);
307
308
  color: #f59e0b;
308
- border-color: rgba(245, 158, 11, 0.3);
309
+ border-color: rgb(245 158 11 / 30%);
309
310
  }
310
311
 
311
312
  .badge-error {
312
- background-color: rgba(239, 68, 68, 0.15);
313
+ background-color: rgb(239 68 68 / 15%);
313
314
  color: #ef4444;
314
- border-color: rgba(239, 68, 68, 0.3);
315
+ border-color: rgb(239 68 68 / 30%);
315
316
  }
316
317
 
317
318
  /* Light Mode Overrides for Badges */
318
- body.light-mode .badge-primary {
319
- background-color: rgba(59, 130, 246, 0.1);
319
+ html[data-theme="light"] .badge-primary {
320
+ background-color: rgb(59 130 246 / 10%);
320
321
  color: #2563eb;
321
- border-color: rgba(59, 130, 246, 0.2);
322
+ border-color: rgb(59 130 246 / 20%);
322
323
  }
323
324
 
324
- body.light-mode .badge-secondary {
325
- background-color: rgba(0, 0, 0, 0.05);
325
+ html[data-theme="light"] .badge-secondary {
326
+ background-color: rgb(0 0 0 / 5%);
326
327
  color: #475569;
327
- border-color: rgba(0, 0, 0, 0.1);
328
+ border-color: rgb(0 0 0 / 10%);
328
329
  }
329
330
 
330
- body.light-mode .badge-success {
331
- background-color: rgba(16, 185, 129, 0.1);
331
+ html[data-theme="light"] .badge-success {
332
+ background-color: rgb(16 185 129 / 10%);
332
333
  color: #059669;
333
- border-color: rgba(16, 185, 129, 0.2);
334
+ border-color: rgb(16 185 129 / 20%);
334
335
  }
335
336
 
336
- body.light-mode .badge-warning {
337
- background-color: rgba(245, 158, 11, 0.1);
337
+ html[data-theme="light"] .badge-warning {
338
+ background-color: rgb(245 158 11 / 10%);
338
339
  color: #d97706;
339
- border-color: rgba(245, 158, 11, 0.2);
340
+ border-color: rgb(245 158 11 / 20%);
340
341
  }
341
342
 
342
- body.light-mode .badge-error {
343
- background-color: rgba(239, 68, 68, 0.1);
343
+ html[data-theme="light"] .badge-error {
344
+ background-color: rgb(239 68 68 / 10%);
344
345
  color: #dc2626;
345
- border-color: rgba(239, 68, 68, 0.2);
346
+ border-color: rgb(239 68 68 / 20%);
346
347
  }
347
348
 
348
349
  /* Alert Component */
@@ -380,7 +381,7 @@ body.light-mode .badge-error {
380
381
  .modal-overlay {
381
382
  position: fixed;
382
383
  inset: 0;
383
- background-color: rgba(0, 0, 0, 0.5);
384
+ background-color: rgb(0 0 0 / 50%);
384
385
  display: flex;
385
386
  align-items: center;
386
387
  justify-content: center;
@@ -407,7 +408,7 @@ body.light-mode .modal-content {
407
408
  display: inline-block;
408
409
  width: 1.5rem;
409
410
  height: 1.5rem;
410
- border: 2px solid rgba(255, 255, 255, 0.1);
411
+ border: 2px solid rgb(255 255 255 / 10%);
411
412
  border-top-color: var(--color-primary);
412
413
  border-radius: 50%;
413
414
  animation: spin 1s linear infinite;
@@ -419,7 +420,7 @@ body.light-mode .modal-content {
419
420
 
420
421
  /* Skeleton Loading */
421
422
  .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%);
423
+ background: linear-gradient(90deg, rgb(255 255 255 / 5%) 25%, rgb(255 255 255 / 10%) 50%, rgb(255 255 255 / 5%) 75%);
423
424
  background-size: 200% 100%;
424
425
  animation: shimmer 2s infinite;
425
426
  border-radius: var(--radius-md);
@@ -586,7 +587,7 @@ body.light-mode .accordion-content {
586
587
  /* Tab Component */
587
588
  .tab-list {
588
589
  display: flex;
589
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
590
+ border-bottom: 1px solid rgb(255 255 255 / 10%);
590
591
  }
591
592
 
592
593
  .tab-button {
@@ -601,7 +602,7 @@ body.light-mode .accordion-content {
601
602
  }
602
603
 
603
604
  .tab-button:hover {
604
- background-color: rgba(255, 255, 255, 0.05);
605
+ background-color: rgb(255 255 255 / 5%);
605
606
  color: var(--text-primary);
606
607
  }
607
608
 
@@ -678,7 +679,7 @@ body.light-mode .tab-button.active {
678
679
  border-radius: var(--radius-full);
679
680
  }
680
681
 
681
- .toggle-slider:before {
682
+ .toggle-slider::before {
682
683
  position: absolute;
683
684
  content: "";
684
685
  height: 1.25rem;
@@ -694,7 +695,7 @@ body.light-mode .tab-button.active {
694
695
  background-color: var(--color-primary);
695
696
  }
696
697
 
697
- .toggle-input:checked + .toggle-slider:before {
698
+ .toggle-input:checked + .toggle-slider::before {
698
699
  transform: translateX(1.5rem);
699
700
  }
700
701
 
@@ -756,7 +757,7 @@ body.light-mode .tab-button.active {
756
757
  }
757
758
 
758
759
  .table-wrapper::-webkit-scrollbar-track {
759
- background: rgba(255, 255, 255, 0.05);
760
+ background: rgb(255 255 255 / 5%);
760
761
  border-radius: 4px;
761
762
  }
762
763
 
@@ -766,7 +767,7 @@ body.light-mode .tab-button.active {
766
767
  }
767
768
 
768
769
  body.light-mode .table-wrapper::-webkit-scrollbar-track {
769
- background: rgba(0, 0, 0, 0.05);
770
+ background: rgb(0 0 0 / 5%);
770
771
  }
771
772
 
772
773
  .table {
@@ -780,19 +781,19 @@ body.light-mode .table-wrapper::-webkit-scrollbar-track {
780
781
  .table th {
781
782
  padding: var(--space-3) var(--space-4);
782
783
  font-weight: 600;
783
- background-color: rgba(255, 255, 255, 0.05);
784
- border-bottom: 2px solid rgba(255, 255, 255, 0.1);
784
+ background-color: rgb(255 255 255 / 5%);
785
+ border-bottom: 2px solid rgb(255 255 255 / 10%);
785
786
  color: var(--text-primary);
786
787
  }
787
788
 
788
789
  .table td {
789
790
  padding: var(--space-3) var(--space-4);
790
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
791
+ border-bottom: 1px solid rgb(255 255 255 / 10%);
791
792
  color: var(--text-secondary);
792
793
  }
793
794
 
794
795
  .table tbody tr:hover {
795
- background-color: rgba(255, 255, 255, 0.03);
796
+ background-color: rgb(255 255 255 / 3%);
796
797
  }
797
798
 
798
799
  /* 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; }