@howssatoshi/quantumcss 1.7.3 → 1.7.5

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 (27) hide show
  1. package/README.md +31 -27
  2. package/dist/quantum.css +2374 -0
  3. package/dist/quantum.min.css +1 -6473
  4. package/examples/admin-panel.html +12 -9
  5. package/examples/analytics-dashboard.html +53 -1
  6. package/examples/blog-template.html +34 -15
  7. package/examples/chat-messaging.html +7 -6
  8. package/examples/email-template.html +42 -19
  9. package/examples/gaming-template.html +7 -7
  10. package/examples/gradient-test.html +106 -30
  11. package/examples/index.html +17 -17
  12. package/examples/kitchen-sink.html +164 -38
  13. package/examples/news-template.html +13 -13
  14. package/examples/portfolio-resume.html +23 -8
  15. package/examples/shopping/index.html +15 -15
  16. package/examples/travel/index.html +61 -39
  17. package/examples/verify_fixes.html +2 -2
  18. package/examples/verify_presets.html +1 -1
  19. package/package.json +3 -1
  20. package/src/cli.js +160 -27
  21. package/src/defaults.js +40 -23
  22. package/src/generator.js +191 -45
  23. package/src/starlight.js +6 -0
  24. package/src/styles/quantum-base.css +12 -1
  25. package/src/styles/quantum-components.css +2 -70
  26. package/src/styles/starlight.css +64 -43
  27. package/src/styles/quantum-responsive.css +0 -363
package/examples/kitchen-sink.html CHANGED
@@ -8,11 +8,11 @@
8
8
  <script src="../src/starlight.js"></script>
9
9
  <style>
10
10
  .token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
11
- .swatch { height: 4rem; border-radius: 0.5rem; margin-bottom: 0.5rem; border: 1px solid rgba(0,0,0,0.1); }
11
+ .swatch { height: 4rem; border-radius: 0.5rem; margin-bottom: 0.5rem; border: 1px solid rgba(0, 0, 0, 0.1); }
12
12
  .spacing-bar { height: 1rem; background: var(--q-color-starlight-blue, #3b82f6); border-radius: 0.25rem; }
13
13
  section { margin-bottom: 4rem; }
14
- h2 { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; border-bottom: 2px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem; }
15
- body.light-mode h2 { border-bottom-color: rgba(0,0,0,0.1); }
14
+ h2 { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; border-bottom: 2px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.5rem; }
15
+ body.light-mode h2 { border-bottom-color: rgba(0, 0, 0, 0.1); }
16
16
  .token-name { font-family: monospace; font-size: 0.875rem; opacity: 0.7; }
17
17
  .token-value { font-size: 0.75rem; opacity: 0.5; }
18
18
  .ani-card { background: #0f172a; color: white; transition: all 0.3s; }
@@ -23,15 +23,46 @@
23
23
  position: fixed; top: 2rem; right: 2rem; z-index: 100; cursor: pointer;
24
24
  width: 3rem; height: 3rem; border-radius: 50%;
25
25
  display: flex; align-items: center; justify-content: center;
26
- background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
26
+ background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
27
27
  color: white; transition: all 0.3s ease; backdrop-filter: blur(10px);
28
28
  }
29
29
  .theme-toggle:hover { background: rgba(255,255,255,0.15); transform: scale(1.1); }
30
- body.light-mode .theme-toggle { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.1); color: #0f172a; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
30
+ body.light-mode .theme-toggle { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.1); color: #0f172a; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
31
31
  body.light-mode .theme-toggle:hover { background: #f8fafc; }
32
32
  .sun-icon { display: none; }
33
33
  body.light-mode .sun-icon { display: block; }
34
34
  body.light-mode .moon-icon { display: none; }
35
+
36
+ /* Theme Designer Panel */
37
+ .designer-panel {
38
+ position: fixed; bottom: 2rem; right: 2rem; z-index: 1000;
39
+ width: 320px; background: rgba(8, 8, 26, 0.85);
40
+ backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
41
+ border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1.5rem;
42
+ padding: 1.5rem; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
43
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
44
+ transform: translateY(0);
45
+ }
46
+ .designer-panel.minimized { transform: translateY(calc(100% - 3.5rem)); }
47
+ .designer-header {
48
+ display: flex; justify-content: space-between; align-items: center;
49
+ margin-bottom: 1.5rem; cursor: pointer;
50
+ }
51
+ .designer-title { font-weight: 900; font-size: 0.75rem; text-transform: uppercase; tracking-widest; opacity: 0.8; }
52
+ .control-group { margin-bottom: 1.25rem; }
53
+ .control-label { display: flex; justify-content: space-between; font-size: 0.7rem; text-transform: uppercase; font-weight: 700; margin-bottom: 0.5rem; opacity: 0.6; }
54
+ .designer-slider { width: 100%; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; appearance: none; outline: none; }
55
+ .designer-slider::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; background: var(--q-color-starlight-blue, #00d4ff); border-radius: 50%; cursor: pointer; box-shadow: 0 0 10px var(--q-color-starlight-blue); }
56
+ .designer-btn {
57
+ width: 100%; padding: 0.75rem; border-radius: 0.75rem; border: none;
58
+ background: var(--q-color-starlight-blue); color: #000; font-weight: 800;
59
+ font-size: 0.75rem; text-transform: uppercase; cursor: pointer; transition: all 0.2s;
60
+ }
61
+ .designer-btn:hover { filter: brightness(1.1); transform: scale(1.02); }
62
+ .designer-btn:active { transform: scale(0.98); }
63
+
64
+ body.light-mode .designer-panel { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.1); color: #000; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
65
+ body.light-mode .designer-slider { background: rgba(0, 0, 0, 0.1); }
35
66
  </style>
36
67
  </head>
37
68
  <body class="p-8">
@@ -842,10 +873,10 @@
842
873
  <span class="token-name">.btn-primary</span>
843
874
  <span class="text-[10px] opacity-50 uppercase font-bold">Preset</span>
844
875
  </div>
845
- <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg mb-4">
876
+ <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl mb-4">
846
877
  <button class="btn-primary">Preset Button</button>
847
878
  </div>
848
- <div class="token-value text-xs bg-black/20 p-3 rounded font-mono">btn-starlight px-6 py-2 shadow-md hover:scale-105 active:scale-95</div>
879
+ <div class="token-value text-xs bg-black_20 p-3 rounded font-mono">btn-starlight px-6 py-2 shadow-md hover:scale-105 active:scale-95</div>
849
880
  </div>
850
881
 
851
882
  <div class="starlight-card p-6">
@@ -853,10 +884,10 @@
853
884
  <span class="token-name">.btn-secondary</span>
854
885
  <span class="text-[10px] opacity-50 uppercase font-bold">Preset</span>
855
886
  </div>
856
- <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg mb-4">
887
+ <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl mb-4">
857
888
  <button class="btn-secondary">Preset Button</button>
858
889
  </div>
859
- <div class="token-value text-xs bg-black/20 p-3 rounded font-mono">btn-base theme-glass px-6 py-2 shadow-md hover:bg-white/10 active:scale-95</div>
890
+ <div class="token-value text-xs bg-black_20 p-3 rounded font-mono">btn-base theme-glass px-6 py-2 shadow-md hover:bg-white_10 active:scale-95</div>
860
891
  </div>
861
892
 
862
893
  <div class="starlight-card p-6">
@@ -864,10 +895,10 @@
864
895
  <span class="token-name">.card-premium</span>
865
896
  <span class="text-[10px] opacity-50 uppercase font-bold">Preset</span>
866
897
  </div>
867
- <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg mb-4">
898
+ <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl mb-4">
868
899
  <div class="card-premium"><h4 class="font-bold">Preset Card</h4><p class="text-sm opacity-70">Using card-premium</p></div>
869
900
  </div>
870
- <div class="token-value text-xs bg-black/20 p-3 rounded font-mono">card-base theme-glass p-8 shadow-xl</div>
901
+ <div class="token-value text-xs bg-black_20 p-3 rounded font-mono">card-base theme-glass p-8 shadow-xl</div>
871
902
  </div>
872
903
 
873
904
  </div>
@@ -880,49 +911,49 @@
880
911
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
881
912
  <div class="starlight-card p-6">
882
913
  <div class="mb-4 token-name">btn-base</div>
883
- <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
914
+ <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl">
884
915
  <button class="btn-base">Button Example</button>
885
916
  </div>
886
917
  </div>
887
918
  <div class="starlight-card p-6">
888
919
  <div class="mb-4 token-name">input-base</div>
889
- <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
920
+ <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl">
890
921
  <input class="input-base" placeholder="Input Example">
891
922
  </div>
892
923
  </div>
893
924
  <div class="starlight-card p-6">
894
925
  <div class="mb-4 token-name">glass</div>
895
- <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
896
- <div class="glass p-8 rounded-xl border border-white/20">Glass Effect</div>
926
+ <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl">
927
+ <div class="glass p-8 rounded-xl">Glass Effect</div>
897
928
  </div>
898
929
  </div>
899
930
  <div class="starlight-card p-6">
900
931
  <div class="mb-4 token-name">bg-starlight</div>
901
- <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
932
+ <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl">
902
933
  <div class="bg-starlight p-8 rounded-xl w-full text-center">Example Block</div>
903
934
  </div>
904
935
  </div>
905
936
  <div class="starlight-card p-6">
906
937
  <div class="mb-4 token-name">text-gradient-starlight</div>
907
- <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
938
+ <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl">
908
939
  <div class="text-gradient-starlight p-8 rounded-xl w-full text-center">Example Block</div>
909
940
  </div>
910
941
  </div>
911
942
  <div class="starlight-card p-6">
912
943
  <div class="mb-4 token-name">btn-starlight</div>
913
- <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
944
+ <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl">
914
945
  <button class="btn-starlight">Button Example</button>
915
946
  </div>
916
947
  </div>
917
948
  <div class="starlight-card p-6">
918
949
  <div class="mb-4 token-name">btn-secondary</div>
919
- <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
950
+ <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl">
920
951
  <button class="btn-secondary">Button Example</button>
921
952
  </div>
922
953
  </div>
923
954
  <div class="starlight-card p-6">
924
955
  <div class="mb-4 token-name">input-starlight</div>
925
- <div class="flex items-center justify-center p-8 bg-slate-500/10 rounded-lg">
956
+ <div class="flex items-center justify-center p-8 bg-black_20 rounded-xl">
926
957
  <input class="input-starlight" placeholder="Input Example">
927
958
  </div>
928
959
  </div>
@@ -936,12 +967,12 @@
936
967
  <div class="grid grid-cols-1 gap-12">
937
968
  <!-- Navigation -->
938
969
  <div class="starlight-card p-0 mb-12">
939
- <div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Navigation Menu (.starlight-nav)</div>
970
+ <div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Navigation Menu (.starlight-nav)</div>
940
971
  <div class="relative">
941
- <nav class="starlight-nav relative">
942
- <div class="p-4 md:px-8 flex justify-between items-center w-full">
972
+ <nav class="starlight-nav w-full relative border-none shadow-none">
973
+ <div class="nav-container">
943
974
  <div class="font-bold text-xl text-gradient-starlight">Starlight OS</div>
944
- <div class="flex items-center gap-8">
975
+ <div class="flex items-center gap-8 ml-auto">
945
976
  <div class="nav-desktop">
946
977
  <ul class="nav-list">
947
978
  <li><a href="#" class="nav-link">Fleet</a></li>
@@ -980,15 +1011,15 @@
980
1011
  </ul>
981
1012
  </div>
982
1013
  </nav>
983
- <div class="p-12 text-center opacity-50 italic text-sm border-t border-white/5 light:bg-slate-300">Horizontal layout (standard)</div>
1014
+ <div class="p-12 text-center opacity-50 italic text-sm border-t border-white_5 light:bg-slate-300">Horizontal layout (standard)</div>
984
1015
  </div>
985
1016
  </div>
986
1017
 
987
1018
  <!-- Vertical Navigation -->
988
1019
  <div class="starlight-card p-0">
989
- <div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Vertical Sidebar (.starlight-nav.vertical)</div>
1020
+ <div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Vertical Sidebar (.starlight-nav.vertical)</div>
990
1021
  <div class="flex h-[400px] overflow-hidden">
991
- <nav class="starlight-nav vertical static border-r border-white/10">
1022
+ <nav class="starlight-nav vertical w-full static border-r border-white_10">
992
1023
  <div class="font-bold text-xl text-gradient-starlight mb-8">Starlight OS</div>
993
1024
  <div class="nav-desktop block w-full">
994
1025
  <ul class="nav-list vertical w-full">
@@ -1013,7 +1044,7 @@
1013
1044
 
1014
1045
  <!-- Search -->
1015
1046
  <div class="starlight-card p-0 overflow-hidden">
1016
- <div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Interactive Search (.starlight-search)</div>
1047
+ <div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Interactive Search (.starlight-search)</div>
1017
1048
  <div class="p-12 flex flex-col items-center gap-6">
1018
1049
  <div class="starlight-search">
1019
1050
  <svg class="search-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
@@ -1025,7 +1056,7 @@
1025
1056
 
1026
1057
  <!-- Dashboard -->
1027
1058
  <div class="starlight-card p-0 overflow-hidden">
1028
- <div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Dashboard Grid (.starlight-dashboard)</div>
1059
+ <div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Dashboard Grid (.starlight-dashboard)</div>
1029
1060
  <div class="p-8">
1030
1061
  <div class="starlight-dashboard">
1031
1062
  <div class="starlight-card stat-card light:shadow-lg">
@@ -1058,7 +1089,7 @@
1058
1089
 
1059
1090
  <!-- Gallery -->
1060
1091
  <div class="starlight-card p-0 overflow-hidden">
1061
- <div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Gallery Widget (.starlight-gallery)</div>
1092
+ <div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Gallery Widget (.starlight-gallery)</div>
1062
1093
  <div class="p-8">
1063
1094
  <div class="starlight-gallery">
1064
1095
  <div class="gallery-item">
@@ -1083,7 +1114,7 @@
1083
1114
 
1084
1115
  <!-- Form -->
1085
1116
  <div class="starlight-card p-0 overflow-hidden">
1086
- <div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Advanced Form (.starlight-form)</div>
1117
+ <div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Advanced Form (.starlight-form)</div>
1087
1118
  <div class="p-8">
1088
1119
  <div class="starlight-form">
1089
1120
  <div class="flex flex-col gap-4">
@@ -1111,10 +1142,10 @@
1111
1142
 
1112
1143
  <!-- Dialog -->
1113
1144
  <div class="starlight-card p-0">
1114
- <div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Dialog Window (.starlight-dialog)</div>
1145
+ <div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Dialog Window (.starlight-dialog)</div>
1115
1146
  <div class="p-8">
1116
1147
  <!-- Inline Preview -->
1117
- <div class="dialog-base theme-glass-dark relative mx-auto mb-8 shadow-none border-white/10" style="max-width: 500px;">
1148
+ <div class="dialog-base theme-glass-dark relative mx-auto mb-8 shadow-none border-white_10" style="max-width: 500px;">
1118
1149
  <h3 class="text-xl font-bold mb-4 text-gradient-starlight">System Preview</h3>
1119
1150
  <p class="mb-6 opacity-70 text-sm">This is an inline preview of the dialog component. It scales to fit its container.</p>
1120
1151
  <div class="flex gap-4">
@@ -1123,7 +1154,7 @@
1123
1154
  </div>
1124
1155
  </div>
1125
1156
 
1126
- <div class="text-center pt-4 border-t border-white/5">
1157
+ <div class="text-center pt-4">
1127
1158
  <button class="btn-starlight" onclick="toggleDialog(true)">Launch Overlay Dialog</button>
1128
1159
  </div>
1129
1160
  </div>
@@ -1131,7 +1162,7 @@
1131
1162
 
1132
1163
  <!-- Accordion -->
1133
1164
  <div class="starlight-card p-0 overflow-hidden">
1134
- <div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Accordion Group (.accordion-starlight)</div>
1165
+ <div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Accordion Group (.accordion-starlight)</div>
1135
1166
  <div class="p-8">
1136
1167
  <div class="max-w-2xl mx-auto" data-accordion>
1137
1168
  <div class="accordion-item accordion-starlight active">
@@ -1158,7 +1189,7 @@
1158
1189
 
1159
1190
  <!-- Tabs -->
1160
1191
  <div class="starlight-card p-0 overflow-hidden">
1161
- <div class="p-4 border-b border-white/5 bg-white/5 text-[10px] uppercase font-bold tracking-widest opacity-50">Tab Interface (.tab-list)</div>
1192
+ <div class="p-4 border-b border-white_5 bg-white_5 text-[10px] uppercase font-bold tracking-widest opacity-50">Tab Interface (.tab-list)</div>
1162
1193
  <div class="p-8">
1163
1194
  <div class="max-w-2xl mx-auto">
1164
1195
  <div class="tab-list mb-4">
@@ -1193,7 +1224,7 @@
1193
1224
  </div>
1194
1225
  </section>
1195
1226
 
1196
- <footer class="mt-20 pt-8 border-t border-white/10 opacity-50 text-sm">
1227
+ <footer class="mt-20 opacity-50 text-sm">
1197
1228
  Generated by Quantum CSS Dynamic Docs · 3/1/2026
1198
1229
  </footer>
1199
1230
  </div>
@@ -1206,7 +1237,7 @@
1206
1237
  </button>
1207
1238
  <h3 class="text-2xl font-bold mb-4 text-gradient-starlight">System Override</h3>
1208
1239
  <p class="mb-6 opacity-70">You are about to bypass safety protocols. This action is irreversible.</p>
1209
- <div class="bg-black/20 p-4 rounded-lg mb-6 font-mono text-xs border border-white/5">
1240
+ <div class="bg-black/20 p-4 rounded-lg mb-6 font-mono text-xs border border-white_5">
1210
1241
  <div class="text-success">> STATUS: AUTHORIZED</div>
1211
1242
  <div class="text-success">> CORE: ACCESSIBLE</div>
1212
1243
  </div>
@@ -1217,7 +1248,102 @@
1217
1248
  </div>
1218
1249
  </div>
1219
1250
 
1251
+ <!-- Theme Designer Panel -->
1252
+ <div class="designer-panel" id="designerPanel">
1253
+ <div class="designer-header" onclick="document.getElementById('designerPanel').classList.toggle('minimized')">
1254
+ <div class="designer-title">Theme Designer</div>
1255
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
1256
+ </div>
1257
+
1258
+ <div class="control-group">
1259
+ <div class="control-label"><span>Primary Hue</span> <span id="hueVal">217°</span></div>
1260
+ <input type="range" class="designer-slider" id="hueSlider" min="0" max="360" value="217">
1261
+ </div>
1262
+
1263
+ <div class="control-group">
1264
+ <div class="control-label"><span>Glass Blur</span> <span id="blurVal">16px</span></div>
1265
+ <input type="range" class="designer-slider" id="blurSlider" min="0" max="40" value="16">
1266
+ </div>
1267
+
1268
+ <div class="control-group">
1269
+ <div class="control-label"><span>Spacing Scale</span> <span id="spaceVal">1.0x</span></div>
1270
+ <input type="range" class="designer-slider" id="spaceSlider" min="0.5" max="2" step="0.1" value="1">
1271
+ </div>
1272
+
1273
+ <button class="designer-btn" onclick="copyConfig()">Copy quantum.config.json</button>
1274
+ </div>
1275
+
1220
1276
  <script>
1277
+ // Theme Designer Logic
1278
+ const root = document.documentElement;
1279
+ const hueSlider = document.getElementById('hueSlider');
1280
+ const blurSlider = document.getElementById('blurSlider');
1281
+ const spaceSlider = document.getElementById('spaceSlider');
1282
+
1283
+ hueSlider.oninput = function() {
1284
+ const h = this.value;
1285
+ document.getElementById('hueVal').innerText = h + '°';
1286
+ // Simple HSL to Hex approximation for primary-500
1287
+ root.style.setProperty('--q-color-primary', 'hsl(' + h + ', 91%, 60%)');
1288
+ root.style.setProperty('--q-color-starlight-blue', 'hsl(' + h + ', 100%, 50%)');
1289
+ };
1290
+
1291
+ blurSlider.oninput = function() {
1292
+ const b = this.value;
1293
+ document.getElementById('blurVal').innerText = b + 'px';
1294
+ root.style.setProperty('--q-glass-blur', 'blur(' + b + 'px)');
1295
+ // Update all elements with inline glass overrides
1296
+ document.querySelectorAll('.glass, .starlight-card, .starlight-nav').forEach(el => {
1297
+ el.style.backdropFilter = 'blur(' + b + 'px)';
1298
+ el.style.webkitBackdropFilter = 'blur(' + b + 'px)';
1299
+ });
1300
+ };
1301
+
1302
+ spaceSlider.oninput = function() {
1303
+ const s = this.value;
1304
+ document.getElementById('spaceVal').innerText = s + 'x';
1305
+ // Update base spacing unit (0.25rem = 4px)
1306
+ const base = 0.25 * s;
1307
+ for(let i=1; i<=64; i++) {
1308
+ root.style.setProperty('--q-space-' + i, (base * i) + 'rem');
1309
+ }
1310
+ };
1311
+
1312
+ function copyConfig() {
1313
+ const h = hueSlider.value;
1314
+ const b = blurSlider.value;
1315
+ const config = {
1316
+ theme: {
1317
+ extend: {
1318
+ colors: {
1319
+ primary: 'hsl(' + h + ', 91%, 60%)',
1320
+ starlight: 'hsl(' + h + ', 100%, 50%)'
1321
+ },
1322
+ glass: {
1323
+ blur: 'blur(' + b + 'px)'
1324
+ }
1325
+ }
1326
+ }
1327
+ };
1328
+ navigator.clipboard.writeText(JSON.stringify(config, null, 2));
1329
+ const btn = document.querySelector('.designer-btn');
1330
+ const oldText = btn.innerText;
1331
+ btn.innerText = 'COPIED!';
1332
+ setTimeout(() => btn.innerText = oldText, 2000);
1333
+ }
1334
+
1335
+ // Theme Toggle
1336
+ function toggleTheme() {
1337
+ const body = document.body;
1338
+ if (body.classList.contains('light-mode')) {
1339
+ body.classList.remove('light-mode');
1340
+ document.documentElement.setAttribute('data-theme', 'dark');
1341
+ } else {
1342
+ body.classList.add('light-mode');
1343
+ document.documentElement.setAttribute('data-theme', 'light');
1344
+ }
1345
+ }
1346
+
1221
1347
  // Dialog Toggle
1222
1348
  function toggleDialog(show) {
1223
1349
  const dialog = document.getElementById('systemDialog');
package/examples/news-template.html CHANGED
@@ -77,7 +77,7 @@
77
77
 
78
78
  nav {
79
79
  background-color: #020617 !important;
80
- border-bottom-color: rgba(255, 255, 255, 0.1) !important;
80
+ ottom-color: rgba(255, 255, 255, 0.1) !important;
81
81
  }
82
82
 
83
83
  /* Light Mode Overrides */
@@ -110,7 +110,7 @@
110
110
 
111
111
  body.light-mode nav {
112
112
  background-color: #ffffff !important;
113
- border-bottom-color: #0f172a !important;
113
+ ottom-color: #0f172a !important;
114
114
  }
115
115
 
116
116
  body.light-mode .theme-toggle {
@@ -131,12 +131,12 @@
131
131
  }
132
132
 
133
133
  /* Glassy Hover for Icons */
134
- .hover\:glass-light:hover {
134
+ .hover\:glass-light="hover" {
135
135
  background-color: rgba(255, 255, 255, 0.1) !important;
136
136
  backdrop-filter: blur(4px);
137
137
  }
138
138
 
139
- body.light-mode .hover\:glass-light:hover {
139
+ body.light-mode .hover\:glass-light="hover" {
140
140
  background-color: rgba(0, 0, 0, 0.05) !important;
141
141
  backdrop-filter: blur(4px);
142
142
  }
@@ -147,21 +147,21 @@
147
147
  </head>
148
148
  <body class="font-sans antialiased">
149
149
  <!-- Top Bar -->
150
- <div class="border-b border-slate-100 py-2 bg-slate-50">
150
+ <div class=" border-slate-100 py-2 bg-slate-50">
151
151
  <div class="container mx-auto px-6 flex justify-between items-center text-[10px] font-bold uppercase tracking-widest text-slate-500">
152
152
  <div>Monday, February 2, 2026</div>
153
153
  <div class="flex gap-6">
154
- <a href="#" class="hover:text-slate-900">Archive</a>
155
- <a href="#" class="hover:text-slate-900">Terminal</a>
156
- <a href="#" class="hover:text-slate-900">Status: Stable</a>
154
+ <a href="#" class="hover="text-slate-900"">Archive</a>
155
+ <a href="#" class="hover="text-slate-900"">Terminal</a>
156
+ <a href="#" class="hover="text-slate-900"">Status: Stable</a>
157
157
  </div>
158
158
  </div>
159
159
  </div>
160
160
 
161
161
  <!-- Navigation -->
162
- <nav class="border-b border-slate-900 border-b-4 sticky top-0 bg-white z-50">
162
+ <nav class="border-b border-slate-900 sticky top-0 bg-white z-50">
163
163
  <div class="container mx-auto px-6 py-6 flex flex-col md:flex-row justify-between items-center gap-6">
164
- <div class="text-4xl font-black tracking-tighter uppercase italic text-primary">QUANTUM<span class="text-blue-600">NEWS</span></div>
164
+ <div class="text-2xl sm:text-4xl font-black tracking-tighter uppercase italic text-primary">QUANTUM<span class="text-blue-600">NEWS</span></div>
165
165
  <div class="flex flex-wrap justify-center gap-8 text-xs font-black uppercase tracking-widest">
166
166
  <a href="#" class="border-b-2 border-transparent hover:border-blue-600 transition-colors">Quantum Computing</a>
167
167
  <a href="#" class="border-b-2 border-transparent hover:border-blue-600 transition-colors">Neural Nets</a>
@@ -169,8 +169,8 @@
169
169
  <a href="#" class="border-b-2 border-transparent hover:border-blue-600 transition-colors">Space-X</a>
170
170
  <a href="#" class="text-blue-600">Live Updates</a>
171
171
  </div>
172
- <div class="flex items-center gap-4">
173
- <button class="w-10 h-10 flex items-center justify-center hover:glass-light rounded-full transition-colors text-primary">
172
+ <div class="flex items-center flex-wrap justify-center gap-4">
173
+ <button class="w-10 h-10 flex items-center justify-center hover:bg-slate-100 rounded-full transition-colors text-primary">
174
174
  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
175
175
  </button>
176
176
  <div id="theme-btn" class="theme-toggle text-primary" title="Toggle Theme">
@@ -271,7 +271,7 @@
271
271
 
272
272
  <!-- Footer -->
273
273
  <footer class="bg-slate-900 text-white py-20 mt-24">
274
- <div class="container mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-12 border-b border-slate-800 pb-16">
274
+ <div class="container mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-12 pb-16">
275
275
  <div class="col-span-1 md:col-span-2">
276
276
  <div class="text-3xl font-black tracking-tighter uppercase italic mb-6 text-primary">QUANTUM<span class="text-blue-600">NEWS</span></div>
277
277
  <p class="text-slate-400 max-w-md text-sm leading-relaxed">Reporting from the edge of tomorrow. We translate complex breakthroughs into human experience.</p>
package/examples/portfolio-resume.html CHANGED
@@ -422,7 +422,7 @@
422
422
  <li><a href="#contact">Contact</a></li>
423
423
  </ul>
424
424
  <button class="btn btn-secondary" onclick="toggleTheme()" style="padding: 0.5rem 1rem;">
425
- <svg class="sun-icon" style="display:none;" width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
425
+ <svg class="sun-icon hidden" width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
426
426
  <svg class="moon-icon" width="20" height="20" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
427
427
  </button>
428
428
  </div>
@@ -638,15 +638,30 @@
638
638
 
639
639
  <script>
640
640
  function toggleTheme() {
641
- document.body.classList.toggle('light-mode');
642
- localStorage.setItem('theme', document.body.classList.contains('light-mode') ? 'light' : 'dark');
643
- document.querySelector('.sun-icon').style.display = document.body.classList.contains('light-mode') ? 'inline' : 'none';
644
- document.querySelector('.moon-icon').style.display = document.body.classList.contains('light-mode') ? 'none' : 'inline';
641
+ const isLight = document.body.classList.toggle('light-mode');
642
+ const theme = isLight ? 'light' : 'dark';
643
+ document.documentElement.setAttribute('data-theme', theme);
644
+ localStorage.setItem('theme', theme);
645
+ updateIcons(isLight);
645
646
  }
646
- if (localStorage.getItem('theme') === 'light') {
647
+
648
+ function updateIcons(isLight) {
649
+ const sun = document.querySelector('.sun-icon');
650
+ const moon = document.querySelector('.moon-icon');
651
+ if (isLight) {
652
+ sun.classList.remove('hidden');
653
+ moon.classList.add('hidden');
654
+ } else {
655
+ sun.classList.add('hidden');
656
+ moon.classList.remove('hidden');
657
+ }
658
+ }
659
+
660
+ const savedTheme = localStorage.getItem('theme');
661
+ if (savedTheme === 'light') {
647
662
  document.body.classList.add('light-mode');
648
- document.querySelector('.sun-icon').style.display = 'inline';
649
- document.querySelector('.moon-icon').style.display = 'none';
663
+ document.documentElement.setAttribute('data-theme', 'light');
664
+ updateIcons(true);
650
665
  }
651
666
  </script>
652
667
  </body>
package/examples/shopping/index.html CHANGED
@@ -55,8 +55,8 @@
55
55
  color: #f1f5f9 !important;
56
56
  }
57
57
 
58
- body.dark-mode .bg-white\/80,
59
- html[data-theme="dark"] .bg-white\/80 {
58
+ body.dark-mode .bg-white\_80,
59
+ html[data-theme="dark"] .bg-white\_80 {
60
60
  background-color: rgba(2, 6, 23, 0.8) !important;
61
61
  }
62
62
 
@@ -141,7 +141,7 @@
141
141
  </div>
142
142
 
143
143
  <!-- Navigation -->
144
- <nav class="bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-200">
144
+ <nav class="bg-white_80 backdrop-blur-md sticky top-0 z-50">
145
145
  <div class="max-w-[1440px] mx-auto px-8 py-4 flex justify-between items-center">
146
146
  <div class="text-2xl font-black tracking-tighter uppercase text-primary">QUANTUM<span class="text-orange-600">STORE</span></div>
147
147
  <div class="hidden lg:flex space-x-12 text-[11px] font-black uppercase tracking-[0.2em]">
@@ -166,7 +166,7 @@
166
166
  </nav>
167
167
 
168
168
  <!-- Header Section -->
169
- <header class="bg-white border-b border-slate-100">
169
+ <header class="bg-white">
170
170
  <div class="max-w-[1440px] mx-auto px-8 py-12">
171
171
  <div class="flex flex-col md:flex-row justify-between items-end gap-12">
172
172
  <div class="max-w-2xl">
@@ -176,7 +176,7 @@
176
176
  </div>
177
177
  <div class="flex items-center space-x-6">
178
178
  <span class="text-xs font-bold text-slate-400 uppercase tracking-widest">Sort by</span>
179
- <select class="input-starlight h-14 min-w-56 text-slate-900 border-slate-200">
179
+ <select class="input-starlight h-14 min-w-56 text-slate-900 border-none">
180
180
  <option>Newest Arrivals</option>
181
181
  <option>Price: Low to High</option>
182
182
  <option>Price: High to Low</option>
@@ -213,7 +213,7 @@
213
213
  <h4 class="font-black uppercase text-[10px] tracking-[0.3em] text-slate-400 mb-8">Color Way</h4>
214
214
  <div class="flex flex-wrap gap-4" id="color-swatches">
215
215
  <button class="w-10 h-10 rounded-full border-2 border-slate-900 color-swatch selected transition-transform" style="background-color: #0f172a;"></button>
216
- <button class="w-10 h-10 rounded-full border-2 border-slate-200 color-swatch transition-transform" style="background-color: #ffffff;"></button>
216
+ <button class="w-10 h-10 rounded-full border-2 border-none color-swatch transition-transform" style="background-color: #ffffff;"></button>
217
217
  <button class="w-10 h-10 rounded-full border-2 border-transparent color-swatch transition-transform" style="background-color: #ea580c;"></button>
218
218
  <button class="w-10 h-10 rounded-full border-2 border-transparent color-swatch transition-transform" style="background-color: #2563eb;"></button>
219
219
  </div>
@@ -225,7 +225,7 @@
225
225
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-8 gap-y-16">
226
226
  <!-- Product 1 -->
227
227
  <div class="product-card group cursor-pointer block">
228
- <div class="aspect-[3/4] bg-slate-100 relative overflow-hidden mb-6 rounded-2xl border border-slate-100">
228
+ <div class="aspect-[3/4] bg-slate-100 relative overflow-hidden mb-6 rounded-2xl ">
229
229
  <img src="images/windbreaker.jpg" alt="Neon Pulse" class="product-image w-full h-full object-cover">
230
230
  <div class="absolute top-4 left-4 flex flex-col space-y-2">
231
231
  <span class="badge badge-primary bg-orange-600 text-white border-none px-3 py-1 text-[9px] shadow-lg font-black tracking-widest">New Season</span>
@@ -245,10 +245,10 @@
245
245
 
246
246
  <!-- Product 2 -->
247
247
  <div class="product-card group cursor-pointer block">
248
- <div class="aspect-[3/4] bg-slate-100 relative overflow-hidden mb-6 rounded-2xl border border-slate-100">
248
+ <div class="aspect-[3/4] bg-slate-100 relative overflow-hidden mb-6 rounded-2xl ">
249
249
  <img src="images/sneakers.jpg" alt="Gravity-Lock" class="product-image w-full h-full object-cover">
250
250
  <div class="absolute top-4 left-4">
251
- <span class="badge badge-secondary bg-slate-900/80 text-white border-none px-3 py-1 text-[9px] backdrop-blur-md font-black tracking-widest">Best Seller</span>
251
+ <span class="badge badge-secondary bg-slate-900_80 text-white border-none px-3 py-1 text-[9px] backdrop-blur-md font-black tracking-widest">Best Seller</span>
252
252
  </div>
253
253
  <div class="absolute inset-x-4 bottom-4 opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300">
254
254
  <button class="btn-starlight w-full border-none rounded-xl text-[9px] font-black uppercase tracking-widest py-4 shadow-2xl">Quick Add</button>
@@ -265,7 +265,7 @@
265
265
 
266
266
  <!-- Product 3 -->
267
267
  <div class="product-card group cursor-pointer block">
268
- <div class="aspect-[3/4] bg-slate-100 relative overflow-hidden mb-6 rounded-2xl border border-slate-100">
268
+ <div class="aspect-[3/4] bg-slate-100 relative overflow-hidden mb-6 rounded-2xl ">
269
269
  <img src="images/headset.jpg" alt="Neural Link" class="product-image w-full h-full object-cover">
270
270
  <div class="absolute top-4 left-4">
271
271
  <span class="badge badge-secondary bg-blue-600 text-white border-none px-3 py-1 text-[9px] shadow-lg font-black tracking-widest">Pre-Order</span>
@@ -285,8 +285,8 @@
285
285
  </div>
286
286
 
287
287
  <!-- Pagination -->
288
- <div class="mt-20 flex justify-center items-center space-x-6 w-full border-t border-slate-100 pt-16">
289
- <button class="glass w-12 h-12 flex items-center justify-center p-0 text-base shadow-sm font-black border-blue-600/50">1</button>
288
+ <div class="mt-20 flex flex-wrap justify-center items-center gap-4 space-x-0 md:space-x-6 w-full pt-16">
289
+ <button class="glass w-12 h-12 flex items-center justify-center p-0 text-base shadow-sm font-black border-none">1</button>
290
290
  <button class="glass w-12 h-12 flex items-center justify-center p-0 text-slate-400 hover:text-slate-900 transition-all text-base opacity-60 hover:opacity-100">2</button>
291
291
  <button class="glass w-12 h-12 flex items-center justify-center p-0 text-slate-400 hover:text-slate-900 transition-all text-base opacity-60 hover:opacity-100">3</button>
292
292
  <div class="px-4 text-slate-200 font-black text-lg">/</div>
@@ -323,12 +323,12 @@
323
323
  <div class="lg:col-span-4 space-y-8">
324
324
  <h5 class="text-[10px] font-black uppercase tracking-[0.3em] text-slate-600">Neural Connect</h5>
325
325
  <div class="flex flex-col space-y-4">
326
- <input type="email" class="input-starlight h-12 w-full bg-slate-900 border-slate-800 text-white placeholder:text-slate-600" placeholder="id@nexus.io">
327
- <button class="btn-starlight w-full h-12 text-[10px] font-black uppercase tracking-widest shadow-2xl shadow-orange-600/20">Sync Comms Link</button>
326
+ <input type="email" class="input-starlight h-12 w-full bg-slate-900 border-none text-white placeholder:text-slate-600" placeholder="id@nexus.io">
327
+ <button class="btn-starlight w-full h-12 text-[10px] font-black uppercase tracking-widest shadow-2xl shadow-orange-600_20">Sync Comms Link</button>
328
328
  </div>
329
329
  </div>
330
330
  </div>
331
- <div class="mt-20 pt-12 border-t border-white/5 flex justify-between items-center text-[10px] font-bold text-slate-600 uppercase tracking-widest">
331
+ <div class="mt-20 pt-12 flex justify-between items-center text-[10px] font-bold text-slate-600 uppercase tracking-widest">
332
332
  <p>© 2026 Quantum Store</p>
333
333
  <p class="italic tracking-normal">Encrypted Connection Verified</p>
334
334
  </div>