@tenerife.music/ui 1.0.16 → 1.1.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.
- package/dist/{index-DPWxsWs3.d.cts → index-Cj8oRSOc.d.cts} +2 -156
- package/dist/{index-DPWxsWs3.d.ts → index-Cj8oRSOc.d.ts} +2 -156
- package/dist/index.cjs +4251 -6733
- package/dist/index.d.cts +1154 -1479
- package/dist/index.d.ts +1154 -1479
- package/dist/index.mjs +4263 -6719
- package/dist/preset.cjs +6 -6
- package/dist/preset.mjs +6 -6
- package/dist/styles.css +10 -150
- package/dist/theme/index.cjs +1306 -1306
- package/dist/theme/index.mjs +1306 -1306
- package/dist/tokens/index.cjs +32 -222
- package/dist/tokens/index.d.cts +1 -1
- package/dist/tokens/index.d.ts +1 -1
- package/dist/tokens/index.mjs +33 -222
- package/package.json +50 -41
package/dist/theme/index.mjs
CHANGED
|
@@ -115,1071 +115,7 @@ var init_default = __esm({
|
|
|
115
115
|
}
|
|
116
116
|
});
|
|
117
117
|
|
|
118
|
-
// src/
|
|
119
|
-
var minimalBrand = {
|
|
120
|
-
id: "minimal",
|
|
121
|
-
name: "Minimal",
|
|
122
|
-
description: "Clean, minimal brand theme with muted colors, light typography, and compact spacing",
|
|
123
|
-
namespace: "minimal",
|
|
124
|
-
version: "1.0.0",
|
|
125
|
-
author: "Tenerife UI",
|
|
126
|
-
themes: [
|
|
127
|
-
{
|
|
128
|
-
id: "minimal-day",
|
|
129
|
-
name: "Minimal Day",
|
|
130
|
-
description: "Light minimal theme with grayscale colors and subtle accents",
|
|
131
|
-
mode: "day",
|
|
132
|
-
overrides: {
|
|
133
|
-
name: "minimal-day",
|
|
134
|
-
description: "Light minimal theme for day mode",
|
|
135
|
-
// Muted, low-saturation color overrides
|
|
136
|
-
primaryColors: {
|
|
137
|
-
400: "0 0% 60%",
|
|
138
|
-
// Muted gray
|
|
139
|
-
500: "0 0% 50%",
|
|
140
|
-
// Neutral gray (#808080)
|
|
141
|
-
600: "0 0% 40%",
|
|
142
|
-
700: "0 0% 30%"
|
|
143
|
-
},
|
|
144
|
-
accentColors: {
|
|
145
|
-
400: "210 20% 70%",
|
|
146
|
-
// Muted blue-gray
|
|
147
|
-
500: "210 20% 60%",
|
|
148
|
-
// Subtle blue-gray
|
|
149
|
-
600: "210 20% 50%",
|
|
150
|
-
700: "210 20% 40%"
|
|
151
|
-
},
|
|
152
|
-
secondaryColors: {
|
|
153
|
-
400: "0 0% 70%",
|
|
154
|
-
// Light gray
|
|
155
|
-
500: "0 0% 65%",
|
|
156
|
-
// Neutral light gray
|
|
157
|
-
600: "0 0% 55%",
|
|
158
|
-
700: "0 0% 45%"
|
|
159
|
-
},
|
|
160
|
-
// Muted base colors for day mode
|
|
161
|
-
baseColorsDay: {
|
|
162
|
-
primary: "0 0% 50%",
|
|
163
|
-
// Neutral gray
|
|
164
|
-
primaryForeground: "0 0% 100%",
|
|
165
|
-
secondary: "0 0% 96%",
|
|
166
|
-
// Very light gray
|
|
167
|
-
secondaryForeground: "0 0% 20%",
|
|
168
|
-
accent: "210 20% 60%",
|
|
169
|
-
// Subtle blue-gray
|
|
170
|
-
accentForeground: "0 0% 100%"
|
|
171
|
-
},
|
|
172
|
-
// Subtle semantic colors
|
|
173
|
-
semanticColorsDay: {
|
|
174
|
-
success: "140 30% 45%",
|
|
175
|
-
// Muted green
|
|
176
|
-
info: "210 30% 50%",
|
|
177
|
-
// Muted blue
|
|
178
|
-
warning: "40 30% 50%",
|
|
179
|
-
// Muted orange
|
|
180
|
-
error: "0 40% 55%"
|
|
181
|
-
// Muted red
|
|
182
|
-
},
|
|
183
|
-
// Typography overrides - lighter and smaller
|
|
184
|
-
typography: {
|
|
185
|
-
fontWeight: {
|
|
186
|
-
normal: "400",
|
|
187
|
-
// Normal weight
|
|
188
|
-
medium: "500",
|
|
189
|
-
semibold: "600",
|
|
190
|
-
// Lighter than default
|
|
191
|
-
bold: "700"
|
|
192
|
-
// Standard bold
|
|
193
|
-
},
|
|
194
|
-
fontSize: {
|
|
195
|
-
xs: [
|
|
196
|
-
"clamp(0.6875rem, 0.65rem + 0.125vw, 0.75rem)",
|
|
197
|
-
{ lineHeight: "1rem", letterSpacing: "0.05em" }
|
|
198
|
-
],
|
|
199
|
-
// Smaller
|
|
200
|
-
sm: [
|
|
201
|
-
"clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem)",
|
|
202
|
-
{ lineHeight: "1.25rem", letterSpacing: "0.025em" }
|
|
203
|
-
],
|
|
204
|
-
// Smaller
|
|
205
|
-
base: [
|
|
206
|
-
"clamp(0.9375rem, 0.875rem + 0.25vw, 1rem)",
|
|
207
|
-
{ lineHeight: "1.5rem", letterSpacing: "0em" }
|
|
208
|
-
],
|
|
209
|
-
// Smaller
|
|
210
|
-
lg: [
|
|
211
|
-
"clamp(1.0625rem, 0.95rem + 0.5vw, 1.125rem)",
|
|
212
|
-
{ lineHeight: "1.75rem", letterSpacing: "-0.025em" }
|
|
213
|
-
],
|
|
214
|
-
// Smaller
|
|
215
|
-
xl: [
|
|
216
|
-
"clamp(1.1875rem, 1rem + 0.75vw, 1.375rem)",
|
|
217
|
-
{ lineHeight: "1.75rem", letterSpacing: "-0.025em" }
|
|
218
|
-
]
|
|
219
|
-
// Smaller
|
|
220
|
-
}
|
|
221
|
-
},
|
|
222
|
-
// Spacing overrides - compact spacing for tight layout
|
|
223
|
-
spacing: {
|
|
224
|
-
semanticSpacing: {
|
|
225
|
-
xs: "0.125rem",
|
|
226
|
-
// 2px (was 4px)
|
|
227
|
-
sm: "0.25rem",
|
|
228
|
-
// 4px (was 8px)
|
|
229
|
-
md: "0.5rem",
|
|
230
|
-
// 8px (was 16px)
|
|
231
|
-
lg: "0.75rem",
|
|
232
|
-
// 12px (was 24px)
|
|
233
|
-
xl: "1rem",
|
|
234
|
-
// 16px (was 32px)
|
|
235
|
-
"2xl": "1.5rem"
|
|
236
|
-
// 24px (was 48px)
|
|
237
|
-
}
|
|
238
|
-
},
|
|
239
|
-
// Shadow overrides - subtle and minimal
|
|
240
|
-
shadows: {
|
|
241
|
-
elevationShadows: {
|
|
242
|
-
xs: "0 1px 1px 0 rgb(0 0 0 / 0.03)",
|
|
243
|
-
sm: "0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 1px -1px rgb(0 0 0 / 0.05)",
|
|
244
|
-
md: "0 2px 4px -1px rgb(0 0 0 / 0.05), 0 1px 2px -2px rgb(0 0 0 / 0.05)",
|
|
245
|
-
lg: "0 4px 8px -2px rgb(0 0 0 / 0.05), 0 2px 4px -3px rgb(0 0 0 / 0.05)",
|
|
246
|
-
xl: "0 8px 12px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05)"
|
|
247
|
-
},
|
|
248
|
-
glowEffects: {
|
|
249
|
-
"glow-primary": "0 0 8px 0 hsl(0 0% 50% / 0.2)",
|
|
250
|
-
"glow-primary-subtle": "0 0 4px 0 hsl(0 0% 50% / 0.15)",
|
|
251
|
-
"glow-primary-medium": "0 0 8px 0 hsl(0 0% 50% / 0.25)",
|
|
252
|
-
"glow-primary-strong": "0 0 12px 0 hsl(0 0% 50% / 0.3)"
|
|
253
|
-
}
|
|
254
|
-
},
|
|
255
|
-
// Radius overrides - smaller, sharper corners
|
|
256
|
-
radius: {
|
|
257
|
-
borderRadius: {
|
|
258
|
-
xs: "0.0625rem",
|
|
259
|
-
// 1px
|
|
260
|
-
sm: "0.125rem",
|
|
261
|
-
// 2px (was 4px)
|
|
262
|
-
md: "0.1875rem",
|
|
263
|
-
// 3px (was 6px)
|
|
264
|
-
lg: "0.25rem",
|
|
265
|
-
// 4px (was 8px)
|
|
266
|
-
xl: "0.375rem",
|
|
267
|
-
// 6px (was 12px)
|
|
268
|
-
"2xl": "0.5rem"
|
|
269
|
-
// 8px (was 16px)
|
|
270
|
-
},
|
|
271
|
-
componentRadius: {
|
|
272
|
-
button: {
|
|
273
|
-
sm: "0.125rem",
|
|
274
|
-
// 2px
|
|
275
|
-
md: "0.1875rem",
|
|
276
|
-
// 3px
|
|
277
|
-
lg: "0.25rem"
|
|
278
|
-
// 4px
|
|
279
|
-
},
|
|
280
|
-
card: {
|
|
281
|
-
sm: "0.1875rem",
|
|
282
|
-
// 3px
|
|
283
|
-
md: "0.25rem",
|
|
284
|
-
// 4px
|
|
285
|
-
lg: "0.375rem",
|
|
286
|
-
// 6px
|
|
287
|
-
xl: "0.5rem"
|
|
288
|
-
// 8px
|
|
289
|
-
},
|
|
290
|
-
input: {
|
|
291
|
-
sm: "0.125rem",
|
|
292
|
-
// 2px
|
|
293
|
-
md: "0.1875rem",
|
|
294
|
-
// 3px
|
|
295
|
-
lg: "0.25rem"
|
|
296
|
-
// 4px
|
|
297
|
-
},
|
|
298
|
-
badge: {
|
|
299
|
-
sm: "0.0625rem",
|
|
300
|
-
// 1px
|
|
301
|
-
md: "0.125rem",
|
|
302
|
-
// 2px
|
|
303
|
-
lg: "0.1875rem"
|
|
304
|
-
// 3px
|
|
305
|
-
}
|
|
306
|
-
}
|
|
307
|
-
}
|
|
308
|
-
}
|
|
309
|
-
},
|
|
310
|
-
{
|
|
311
|
-
id: "minimal-night",
|
|
312
|
-
name: "Minimal Night",
|
|
313
|
-
description: "Dark minimal theme with muted grayscale colors",
|
|
314
|
-
mode: "night",
|
|
315
|
-
overrides: {
|
|
316
|
-
name: "minimal-night",
|
|
317
|
-
description: "Dark minimal theme for night mode",
|
|
318
|
-
// Muted colors for night mode (slightly lighter than day for contrast)
|
|
319
|
-
primaryColors: {
|
|
320
|
-
400: "0 0% 65%",
|
|
321
|
-
// Lighter gray for night
|
|
322
|
-
500: "0 0% 55%",
|
|
323
|
-
// Neutral gray
|
|
324
|
-
600: "0 0% 45%",
|
|
325
|
-
700: "0 0% 35%"
|
|
326
|
-
},
|
|
327
|
-
accentColors: {
|
|
328
|
-
400: "210 20% 75%",
|
|
329
|
-
// Lighter blue-gray
|
|
330
|
-
500: "210 20% 65%",
|
|
331
|
-
// Subtle blue-gray
|
|
332
|
-
600: "210 20% 55%",
|
|
333
|
-
700: "210 20% 45%"
|
|
334
|
-
},
|
|
335
|
-
secondaryColors: {
|
|
336
|
-
400: "0 0% 75%",
|
|
337
|
-
// Light gray
|
|
338
|
-
500: "0 0% 70%",
|
|
339
|
-
// Neutral light gray
|
|
340
|
-
600: "0 0% 60%",
|
|
341
|
-
700: "0 0% 50%"
|
|
342
|
-
},
|
|
343
|
-
// Darker base colors for night mode
|
|
344
|
-
baseColorsNight: {
|
|
345
|
-
background: "240 10% 8%",
|
|
346
|
-
// Dark gray background
|
|
347
|
-
foreground: "0 0% 95%",
|
|
348
|
-
card: "240 10% 10%",
|
|
349
|
-
cardForeground: "0 0% 95%"
|
|
350
|
-
},
|
|
351
|
-
surfaceColorsNight: {
|
|
352
|
-
base: "240 10% 8%",
|
|
353
|
-
elevated1: "240 10% 10%",
|
|
354
|
-
elevated2: "240 10% 12%",
|
|
355
|
-
elevated3: "240 10% 14%"
|
|
356
|
-
},
|
|
357
|
-
// Subtle semantic colors for night
|
|
358
|
-
semanticColorsNight: {
|
|
359
|
-
success: "140 30% 50%",
|
|
360
|
-
// Muted green
|
|
361
|
-
info: "210 30% 55%",
|
|
362
|
-
// Muted blue
|
|
363
|
-
warning: "40 30% 55%",
|
|
364
|
-
// Muted orange
|
|
365
|
-
error: "0 40% 60%"
|
|
366
|
-
// Muted red
|
|
367
|
-
},
|
|
368
|
-
// Typography overrides - same as day
|
|
369
|
-
typography: {
|
|
370
|
-
fontWeight: {
|
|
371
|
-
normal: "400",
|
|
372
|
-
medium: "500",
|
|
373
|
-
semibold: "600",
|
|
374
|
-
bold: "700"
|
|
375
|
-
},
|
|
376
|
-
fontSize: {
|
|
377
|
-
xs: [
|
|
378
|
-
"clamp(0.6875rem, 0.65rem + 0.125vw, 0.75rem)",
|
|
379
|
-
{ lineHeight: "1rem", letterSpacing: "0.05em" }
|
|
380
|
-
],
|
|
381
|
-
sm: [
|
|
382
|
-
"clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem)",
|
|
383
|
-
{ lineHeight: "1.25rem", letterSpacing: "0.025em" }
|
|
384
|
-
],
|
|
385
|
-
base: [
|
|
386
|
-
"clamp(0.9375rem, 0.875rem + 0.25vw, 1rem)",
|
|
387
|
-
{ lineHeight: "1.5rem", letterSpacing: "0em" }
|
|
388
|
-
],
|
|
389
|
-
lg: [
|
|
390
|
-
"clamp(1.0625rem, 0.95rem + 0.5vw, 1.125rem)",
|
|
391
|
-
{ lineHeight: "1.75rem", letterSpacing: "-0.025em" }
|
|
392
|
-
],
|
|
393
|
-
xl: [
|
|
394
|
-
"clamp(1.1875rem, 1rem + 0.75vw, 1.375rem)",
|
|
395
|
-
{ lineHeight: "1.75rem", letterSpacing: "-0.025em" }
|
|
396
|
-
]
|
|
397
|
-
}
|
|
398
|
-
},
|
|
399
|
-
// Spacing overrides - same as day
|
|
400
|
-
spacing: {
|
|
401
|
-
semanticSpacing: {
|
|
402
|
-
xs: "0.125rem",
|
|
403
|
-
sm: "0.25rem",
|
|
404
|
-
md: "0.5rem",
|
|
405
|
-
lg: "0.75rem",
|
|
406
|
-
xl: "1rem",
|
|
407
|
-
"2xl": "1.5rem"
|
|
408
|
-
}
|
|
409
|
-
},
|
|
410
|
-
// Shadow overrides - subtle for night
|
|
411
|
-
shadows: {
|
|
412
|
-
elevationShadows: {
|
|
413
|
-
xs: "0 1px 2px 0 rgb(0 0 0 / 0.15)",
|
|
414
|
-
sm: "0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2)",
|
|
415
|
-
md: "0 2px 5px -1px rgb(0 0 0 / 0.2), 0 1px 3px -2px rgb(0 0 0 / 0.2)",
|
|
416
|
-
lg: "0 4px 10px -2px rgb(0 0 0 / 0.2), 0 2px 5px -3px rgb(0 0 0 / 0.2)",
|
|
417
|
-
xl: "0 8px 15px -3px rgb(0 0 0 / 0.2), 0 4px 8px -4px rgb(0 0 0 / 0.2)"
|
|
418
|
-
},
|
|
419
|
-
glowEffects: {
|
|
420
|
-
"glow-primary": "0 0 8px 0 hsl(0 0% 55% / 0.25)",
|
|
421
|
-
"glow-primary-subtle": "0 0 4px 0 hsl(0 0% 55% / 0.2)",
|
|
422
|
-
"glow-primary-medium": "0 0 8px 0 hsl(0 0% 55% / 0.3)",
|
|
423
|
-
"glow-primary-strong": "0 0 12px 0 hsl(0 0% 55% / 0.35)"
|
|
424
|
-
}
|
|
425
|
-
},
|
|
426
|
-
// Radius overrides - same as day
|
|
427
|
-
radius: {
|
|
428
|
-
borderRadius: {
|
|
429
|
-
xs: "0.0625rem",
|
|
430
|
-
sm: "0.125rem",
|
|
431
|
-
md: "0.1875rem",
|
|
432
|
-
lg: "0.25rem",
|
|
433
|
-
xl: "0.375rem",
|
|
434
|
-
"2xl": "0.5rem"
|
|
435
|
-
},
|
|
436
|
-
componentRadius: {
|
|
437
|
-
button: {
|
|
438
|
-
sm: "0.125rem",
|
|
439
|
-
md: "0.1875rem",
|
|
440
|
-
lg: "0.25rem"
|
|
441
|
-
},
|
|
442
|
-
card: {
|
|
443
|
-
sm: "0.1875rem",
|
|
444
|
-
md: "0.25rem",
|
|
445
|
-
lg: "0.375rem",
|
|
446
|
-
xl: "0.5rem"
|
|
447
|
-
},
|
|
448
|
-
input: {
|
|
449
|
-
sm: "0.125rem",
|
|
450
|
-
md: "0.1875rem",
|
|
451
|
-
lg: "0.25rem"
|
|
452
|
-
},
|
|
453
|
-
badge: {
|
|
454
|
-
sm: "0.0625rem",
|
|
455
|
-
md: "0.125rem",
|
|
456
|
-
lg: "0.1875rem"
|
|
457
|
-
}
|
|
458
|
-
}
|
|
459
|
-
}
|
|
460
|
-
}
|
|
461
|
-
}
|
|
462
|
-
]
|
|
463
|
-
};
|
|
464
|
-
|
|
465
|
-
// src/themes/neon.ts
|
|
466
|
-
var neonBrand = {
|
|
467
|
-
id: "neon",
|
|
468
|
-
name: "Neon",
|
|
469
|
-
description: "Vibrant brand theme with high-saturation neon colors, bold typography, and enhanced visual effects",
|
|
470
|
-
namespace: "neon",
|
|
471
|
-
version: "1.0.0",
|
|
472
|
-
author: "Tenerife UI",
|
|
473
|
-
themes: [
|
|
474
|
-
{
|
|
475
|
-
id: "neon-day",
|
|
476
|
-
name: "Neon Day",
|
|
477
|
-
description: "Bright neon theme for day mode with vibrant cyan, magenta, and yellow accents",
|
|
478
|
-
mode: "day",
|
|
479
|
-
overrides: {
|
|
480
|
-
name: "neon-day",
|
|
481
|
-
description: "Bright neon theme for day mode",
|
|
482
|
-
// Vibrant neon color overrides
|
|
483
|
-
primaryColors: {
|
|
484
|
-
400: "180 100% 50%",
|
|
485
|
-
// Bright cyan
|
|
486
|
-
500: "180 100% 45%",
|
|
487
|
-
// Vibrant cyan (#00e6ff)
|
|
488
|
-
600: "180 95% 40%",
|
|
489
|
-
700: "180 90% 35%"
|
|
490
|
-
},
|
|
491
|
-
accentColors: {
|
|
492
|
-
400: "320 100% 60%",
|
|
493
|
-
// Bright magenta
|
|
494
|
-
500: "320 100% 55%",
|
|
495
|
-
// Vibrant magenta (#ff00cc)
|
|
496
|
-
600: "320 95% 50%",
|
|
497
|
-
700: "320 90% 45%"
|
|
498
|
-
},
|
|
499
|
-
secondaryColors: {
|
|
500
|
-
400: "60 100% 60%",
|
|
501
|
-
// Bright yellow
|
|
502
|
-
500: "60 100% 55%",
|
|
503
|
-
// Vibrant yellow (#ffff00)
|
|
504
|
-
600: "60 95% 50%",
|
|
505
|
-
700: "60 90% 45%"
|
|
506
|
-
},
|
|
507
|
-
// Enhanced base colors for day mode
|
|
508
|
-
baseColorsDay: {
|
|
509
|
-
primary: "180 100% 45%",
|
|
510
|
-
// Neon cyan
|
|
511
|
-
primaryForeground: "0 0% 100%",
|
|
512
|
-
accent: "320 100% 55%",
|
|
513
|
-
// Neon magenta
|
|
514
|
-
accentForeground: "0 0% 100%"
|
|
515
|
-
},
|
|
516
|
-
// Semantic colors with neon accents
|
|
517
|
-
semanticColorsDay: {
|
|
518
|
-
success: "145 80% 45%",
|
|
519
|
-
// Neon green
|
|
520
|
-
info: "180 100% 45%",
|
|
521
|
-
// Neon cyan
|
|
522
|
-
warning: "60 100% 55%",
|
|
523
|
-
// Neon yellow
|
|
524
|
-
error: "0 100% 60%"
|
|
525
|
-
// Bright red
|
|
526
|
-
},
|
|
527
|
-
// Typography overrides - bolder and larger
|
|
528
|
-
typography: {
|
|
529
|
-
fontWeight: {
|
|
530
|
-
normal: "500",
|
|
531
|
-
// Heavier than default (400)
|
|
532
|
-
medium: "600",
|
|
533
|
-
// Heavier
|
|
534
|
-
semibold: "700",
|
|
535
|
-
// Bold
|
|
536
|
-
bold: "800"
|
|
537
|
-
// Extra bold
|
|
538
|
-
},
|
|
539
|
-
fontSize: {
|
|
540
|
-
xs: [
|
|
541
|
-
"clamp(0.875rem, 0.8rem + 0.25vw, 1rem)",
|
|
542
|
-
{ lineHeight: "1.25rem", letterSpacing: "0.025em" }
|
|
543
|
-
],
|
|
544
|
-
// Larger than default
|
|
545
|
-
sm: [
|
|
546
|
-
"clamp(1rem, 0.95rem + 0.25vw, 1.125rem)",
|
|
547
|
-
{ lineHeight: "1.5rem", letterSpacing: "0em" }
|
|
548
|
-
],
|
|
549
|
-
// Larger
|
|
550
|
-
base: [
|
|
551
|
-
"clamp(1.125rem, 1rem + 0.5vw, 1.25rem)",
|
|
552
|
-
{ lineHeight: "1.75rem", letterSpacing: "-0.025em" }
|
|
553
|
-
],
|
|
554
|
-
// Larger
|
|
555
|
-
lg: [
|
|
556
|
-
"clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)",
|
|
557
|
-
{ lineHeight: "1.75rem", letterSpacing: "-0.025em" }
|
|
558
|
-
],
|
|
559
|
-
// Larger
|
|
560
|
-
xl: [
|
|
561
|
-
"clamp(1.5rem, 1.25rem + 1.25vw, 2rem)",
|
|
562
|
-
{ lineHeight: "2rem", letterSpacing: "-0.05em" }
|
|
563
|
-
]
|
|
564
|
-
// Larger
|
|
565
|
-
}
|
|
566
|
-
},
|
|
567
|
-
// Spacing overrides - larger spacing for breathing room
|
|
568
|
-
spacing: {
|
|
569
|
-
semanticSpacing: {
|
|
570
|
-
xs: "0.5rem",
|
|
571
|
-
// 8px (was 4px)
|
|
572
|
-
sm: "1rem",
|
|
573
|
-
// 16px (was 8px)
|
|
574
|
-
md: "1.5rem",
|
|
575
|
-
// 24px (was 16px)
|
|
576
|
-
lg: "2rem",
|
|
577
|
-
// 32px (was 24px)
|
|
578
|
-
xl: "3rem",
|
|
579
|
-
// 48px (was 32px)
|
|
580
|
-
"2xl": "4rem"
|
|
581
|
-
// 64px (was 48px)
|
|
582
|
-
}
|
|
583
|
-
},
|
|
584
|
-
// Shadow overrides - stronger and more prominent
|
|
585
|
-
shadows: {
|
|
586
|
-
elevationShadows: {
|
|
587
|
-
xs: "0 2px 4px 0 rgb(0 0 0 / 0.1)",
|
|
588
|
-
sm: "0 2px 6px 0 rgb(0 0 0 / 0.15), 0 2px 4px -1px rgb(0 0 0 / 0.15)",
|
|
589
|
-
md: "0 6px 10px -1px rgb(0 0 0 / 0.15), 0 4px 6px -2px rgb(0 0 0 / 0.15)",
|
|
590
|
-
lg: "0 12px 20px -3px rgb(0 0 0 / 0.15), 0 6px 10px -4px rgb(0 0 0 / 0.15)",
|
|
591
|
-
xl: "0 24px 32px -5px rgb(0 0 0 / 0.15), 0 10px 14px -6px rgb(0 0 0 / 0.15)"
|
|
592
|
-
},
|
|
593
|
-
glowEffects: {
|
|
594
|
-
"glow-primary": "0 0 30px 0 hsl(180 100% 45% / 0.7), 0 0 60px 0 hsl(180 100% 45% / 0.4)",
|
|
595
|
-
"glow-primary-subtle": "0 0 12px 0 hsl(180 100% 45% / 0.5)",
|
|
596
|
-
"glow-primary-medium": "0 0 24px 0 hsl(180 100% 45% / 0.7)",
|
|
597
|
-
"glow-primary-strong": "0 0 36px 0 hsl(180 100% 45% / 0.8)",
|
|
598
|
-
"glow-accent": "0 0 30px 0 hsl(320 100% 55% / 0.7), 0 0 60px 0 hsl(320 100% 55% / 0.4)",
|
|
599
|
-
"glow-accent-subtle": "0 0 12px 0 hsl(320 100% 55% / 0.5)",
|
|
600
|
-
"glow-accent-medium": "0 0 24px 0 hsl(320 100% 55% / 0.7)",
|
|
601
|
-
"glow-accent-strong": "0 0 36px 0 hsl(320 100% 55% / 0.8)"
|
|
602
|
-
}
|
|
603
|
-
},
|
|
604
|
-
// Radius overrides - more rounded corners
|
|
605
|
-
radius: {
|
|
606
|
-
borderRadius: {
|
|
607
|
-
sm: "0.375rem",
|
|
608
|
-
// 6px (was 4px)
|
|
609
|
-
md: "0.5rem",
|
|
610
|
-
// 8px (was 6px)
|
|
611
|
-
lg: "0.75rem",
|
|
612
|
-
// 12px (was 8px)
|
|
613
|
-
xl: "1rem",
|
|
614
|
-
// 16px (was 12px)
|
|
615
|
-
"2xl": "1.5rem",
|
|
616
|
-
// 24px (was 16px)
|
|
617
|
-
"3xl": "2rem"
|
|
618
|
-
// 32px (was 24px)
|
|
619
|
-
},
|
|
620
|
-
componentRadius: {
|
|
621
|
-
button: {
|
|
622
|
-
sm: "0.5rem",
|
|
623
|
-
// 8px
|
|
624
|
-
md: "0.75rem",
|
|
625
|
-
// 12px
|
|
626
|
-
lg: "1rem"
|
|
627
|
-
// 16px
|
|
628
|
-
},
|
|
629
|
-
card: {
|
|
630
|
-
sm: "0.75rem",
|
|
631
|
-
// 12px
|
|
632
|
-
md: "1rem",
|
|
633
|
-
// 16px
|
|
634
|
-
lg: "1.25rem",
|
|
635
|
-
// 20px
|
|
636
|
-
xl: "1.5rem"
|
|
637
|
-
// 24px
|
|
638
|
-
},
|
|
639
|
-
input: {
|
|
640
|
-
sm: "0.5rem",
|
|
641
|
-
// 8px
|
|
642
|
-
md: "0.75rem",
|
|
643
|
-
// 12px
|
|
644
|
-
lg: "1rem"
|
|
645
|
-
// 16px
|
|
646
|
-
},
|
|
647
|
-
badge: {
|
|
648
|
-
sm: "0.375rem",
|
|
649
|
-
// 6px
|
|
650
|
-
md: "0.5rem",
|
|
651
|
-
// 8px
|
|
652
|
-
lg: "0.75rem"
|
|
653
|
-
// 12px
|
|
654
|
-
}
|
|
655
|
-
}
|
|
656
|
-
}
|
|
657
|
-
}
|
|
658
|
-
},
|
|
659
|
-
{
|
|
660
|
-
id: "neon-night",
|
|
661
|
-
name: "Neon Night",
|
|
662
|
-
description: "Dark neon theme for night mode with glowing neon accents on dark backgrounds",
|
|
663
|
-
mode: "night",
|
|
664
|
-
overrides: {
|
|
665
|
-
name: "neon-night",
|
|
666
|
-
description: "Dark neon theme for night mode",
|
|
667
|
-
// Vibrant neon color overrides (same as day but with different base)
|
|
668
|
-
primaryColors: {
|
|
669
|
-
400: "180 100% 55%",
|
|
670
|
-
// Brighter cyan for night
|
|
671
|
-
500: "180 100% 50%",
|
|
672
|
-
// Vibrant cyan
|
|
673
|
-
600: "180 95% 45%",
|
|
674
|
-
700: "180 90% 40%"
|
|
675
|
-
},
|
|
676
|
-
accentColors: {
|
|
677
|
-
400: "320 100% 65%",
|
|
678
|
-
// Brighter magenta for night
|
|
679
|
-
500: "320 100% 60%",
|
|
680
|
-
// Vibrant magenta
|
|
681
|
-
600: "320 95% 55%",
|
|
682
|
-
700: "320 90% 50%"
|
|
683
|
-
},
|
|
684
|
-
secondaryColors: {
|
|
685
|
-
400: "60 100% 65%",
|
|
686
|
-
// Brighter yellow for night
|
|
687
|
-
500: "60 100% 60%",
|
|
688
|
-
// Vibrant yellow
|
|
689
|
-
600: "60 95% 55%",
|
|
690
|
-
700: "60 90% 50%"
|
|
691
|
-
},
|
|
692
|
-
// Darker base colors for night mode
|
|
693
|
-
baseColorsNight: {
|
|
694
|
-
background: "240 10% 5%",
|
|
695
|
-
// Very dark background
|
|
696
|
-
foreground: "0 0% 98%",
|
|
697
|
-
card: "240 10% 6%",
|
|
698
|
-
cardForeground: "0 0% 98%"
|
|
699
|
-
},
|
|
700
|
-
surfaceColorsNight: {
|
|
701
|
-
base: "240 10% 5%",
|
|
702
|
-
// Very dark
|
|
703
|
-
elevated1: "240 10% 7%",
|
|
704
|
-
elevated2: "240 10% 9%",
|
|
705
|
-
elevated3: "240 10% 11%"
|
|
706
|
-
},
|
|
707
|
-
// Semantic colors with neon accents for night
|
|
708
|
-
semanticColorsNight: {
|
|
709
|
-
success: "145 75% 50%",
|
|
710
|
-
// Neon green
|
|
711
|
-
info: "180 100% 50%",
|
|
712
|
-
// Neon cyan
|
|
713
|
-
warning: "60 100% 60%",
|
|
714
|
-
// Neon yellow
|
|
715
|
-
error: "0 100% 65%"
|
|
716
|
-
// Bright red
|
|
717
|
-
},
|
|
718
|
-
// Typography overrides - same as day
|
|
719
|
-
typography: {
|
|
720
|
-
fontWeight: {
|
|
721
|
-
normal: "500",
|
|
722
|
-
medium: "600",
|
|
723
|
-
semibold: "700",
|
|
724
|
-
bold: "800"
|
|
725
|
-
},
|
|
726
|
-
fontSize: {
|
|
727
|
-
xs: [
|
|
728
|
-
"clamp(0.875rem, 0.8rem + 0.25vw, 1rem)",
|
|
729
|
-
{ lineHeight: "1.25rem", letterSpacing: "0.025em" }
|
|
730
|
-
],
|
|
731
|
-
sm: [
|
|
732
|
-
"clamp(1rem, 0.95rem + 0.25vw, 1.125rem)",
|
|
733
|
-
{ lineHeight: "1.5rem", letterSpacing: "0em" }
|
|
734
|
-
],
|
|
735
|
-
base: [
|
|
736
|
-
"clamp(1.125rem, 1rem + 0.5vw, 1.25rem)",
|
|
737
|
-
{ lineHeight: "1.75rem", letterSpacing: "-0.025em" }
|
|
738
|
-
],
|
|
739
|
-
lg: [
|
|
740
|
-
"clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)",
|
|
741
|
-
{ lineHeight: "1.75rem", letterSpacing: "-0.025em" }
|
|
742
|
-
],
|
|
743
|
-
xl: [
|
|
744
|
-
"clamp(1.5rem, 1.25rem + 1.25vw, 2rem)",
|
|
745
|
-
{ lineHeight: "2rem", letterSpacing: "-0.05em" }
|
|
746
|
-
]
|
|
747
|
-
}
|
|
748
|
-
},
|
|
749
|
-
// Spacing overrides - same as day
|
|
750
|
-
spacing: {
|
|
751
|
-
semanticSpacing: {
|
|
752
|
-
xs: "0.5rem",
|
|
753
|
-
sm: "1rem",
|
|
754
|
-
md: "1.5rem",
|
|
755
|
-
lg: "2rem",
|
|
756
|
-
xl: "3rem",
|
|
757
|
-
"2xl": "4rem"
|
|
758
|
-
}
|
|
759
|
-
},
|
|
760
|
-
// Shadow overrides - even stronger glow for night
|
|
761
|
-
shadows: {
|
|
762
|
-
elevationShadows: {
|
|
763
|
-
xs: "0 2px 4px 0 rgb(0 0 0 / 0.2)",
|
|
764
|
-
sm: "0 2px 6px 0 rgb(0 0 0 / 0.25), 0 2px 4px -1px rgb(0 0 0 / 0.25)",
|
|
765
|
-
md: "0 6px 10px -1px rgb(0 0 0 / 0.25), 0 4px 6px -2px rgb(0 0 0 / 0.25)",
|
|
766
|
-
lg: "0 12px 20px -3px rgb(0 0 0 / 0.25), 0 6px 10px -4px rgb(0 0 0 / 0.25)",
|
|
767
|
-
xl: "0 24px 32px -5px rgb(0 0 0 / 0.25), 0 10px 14px -6px rgb(0 0 0 / 0.25)"
|
|
768
|
-
},
|
|
769
|
-
glowEffects: {
|
|
770
|
-
"glow-primary": "0 0 40px 0 hsl(180 100% 50% / 0.8), 0 0 80px 0 hsl(180 100% 50% / 0.5)",
|
|
771
|
-
"glow-primary-subtle": "0 0 16px 0 hsl(180 100% 50% / 0.6)",
|
|
772
|
-
"glow-primary-medium": "0 0 32px 0 hsl(180 100% 50% / 0.8)",
|
|
773
|
-
"glow-primary-strong": "0 0 48px 0 hsl(180 100% 50% / 0.9)",
|
|
774
|
-
"glow-accent": "0 0 40px 0 hsl(320 100% 60% / 0.8), 0 0 80px 0 hsl(320 100% 60% / 0.5)",
|
|
775
|
-
"glow-accent-subtle": "0 0 16px 0 hsl(320 100% 60% / 0.6)",
|
|
776
|
-
"glow-accent-medium": "0 0 32px 0 hsl(320 100% 60% / 0.8)",
|
|
777
|
-
"glow-accent-strong": "0 0 48px 0 hsl(320 100% 60% / 0.9)"
|
|
778
|
-
}
|
|
779
|
-
},
|
|
780
|
-
// Radius overrides - same as day
|
|
781
|
-
radius: {
|
|
782
|
-
borderRadius: {
|
|
783
|
-
sm: "0.375rem",
|
|
784
|
-
md: "0.5rem",
|
|
785
|
-
lg: "0.75rem",
|
|
786
|
-
xl: "1rem",
|
|
787
|
-
"2xl": "1.5rem",
|
|
788
|
-
"3xl": "2rem"
|
|
789
|
-
},
|
|
790
|
-
componentRadius: {
|
|
791
|
-
button: {
|
|
792
|
-
sm: "0.5rem",
|
|
793
|
-
md: "0.75rem",
|
|
794
|
-
lg: "1rem"
|
|
795
|
-
},
|
|
796
|
-
card: {
|
|
797
|
-
sm: "0.75rem",
|
|
798
|
-
md: "1rem",
|
|
799
|
-
lg: "1.25rem",
|
|
800
|
-
xl: "1.5rem"
|
|
801
|
-
},
|
|
802
|
-
input: {
|
|
803
|
-
sm: "0.5rem",
|
|
804
|
-
md: "0.75rem",
|
|
805
|
-
lg: "1rem"
|
|
806
|
-
},
|
|
807
|
-
badge: {
|
|
808
|
-
sm: "0.375rem",
|
|
809
|
-
md: "0.5rem",
|
|
810
|
-
lg: "0.75rem"
|
|
811
|
-
}
|
|
812
|
-
}
|
|
813
|
-
}
|
|
814
|
-
}
|
|
815
|
-
}
|
|
816
|
-
]
|
|
817
|
-
};
|
|
818
|
-
|
|
819
|
-
// src/themes/brand_engine.ts
|
|
820
|
-
var brandRegistry = /* @__PURE__ */ new Map();
|
|
821
|
-
var activeBrand = null;
|
|
822
|
-
var activeNamespace = null;
|
|
823
|
-
var brandCache = /* @__PURE__ */ new Map();
|
|
824
|
-
function validateBrand(brand) {
|
|
825
|
-
const errors = [];
|
|
826
|
-
const warnings = [];
|
|
827
|
-
if (!brand || typeof brand !== "object") {
|
|
828
|
-
return {
|
|
829
|
-
valid: false,
|
|
830
|
-
errors: ["Brand must be an object"],
|
|
831
|
-
warnings: []
|
|
832
|
-
};
|
|
833
|
-
}
|
|
834
|
-
const brandObj = brand;
|
|
835
|
-
const requiredFields = ["id", "name", "namespace"];
|
|
836
|
-
for (const field of requiredFields) {
|
|
837
|
-
if (!(field in brandObj) || !brandObj[field]) {
|
|
838
|
-
errors.push(`Missing required field: ${field}`);
|
|
839
|
-
}
|
|
840
|
-
}
|
|
841
|
-
if (brandObj.id && typeof brandObj.id === "string") {
|
|
842
|
-
const idRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
|
|
843
|
-
if (!idRegex.test(brandObj.id)) {
|
|
844
|
-
errors.push(
|
|
845
|
-
`Invalid brand ID format: "${brandObj.id}". Must be kebab-case (e.g., "neon-brand")`
|
|
846
|
-
);
|
|
847
|
-
}
|
|
848
|
-
}
|
|
849
|
-
if (brandObj.namespace && typeof brandObj.namespace === "string") {
|
|
850
|
-
const namespaceRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
|
|
851
|
-
if (!namespaceRegex.test(brandObj.namespace)) {
|
|
852
|
-
errors.push(
|
|
853
|
-
`Invalid namespace format: "${brandObj.namespace}". Must be kebab-case (e.g., "neon")`
|
|
854
|
-
);
|
|
855
|
-
}
|
|
856
|
-
}
|
|
857
|
-
if (brandObj.themes) {
|
|
858
|
-
if (!Array.isArray(brandObj.themes)) {
|
|
859
|
-
errors.push("Brand themes must be an array");
|
|
860
|
-
} else {
|
|
861
|
-
const themes2 = brandObj.themes;
|
|
862
|
-
if (themes2.length === 0) {
|
|
863
|
-
warnings.push("Brand has no themes defined");
|
|
864
|
-
}
|
|
865
|
-
themes2.forEach((theme, index) => {
|
|
866
|
-
if (!theme || typeof theme !== "object") {
|
|
867
|
-
errors.push(`Theme at index ${index} must be an object`);
|
|
868
|
-
return;
|
|
869
|
-
}
|
|
870
|
-
const themeObj = theme;
|
|
871
|
-
if (!themeObj.id || typeof themeObj.id !== "string") {
|
|
872
|
-
errors.push(`Theme at index ${index} is missing required field: id`);
|
|
873
|
-
}
|
|
874
|
-
if (!themeObj.name || typeof themeObj.name !== "string") {
|
|
875
|
-
errors.push(`Theme at index ${index} is missing required field: name`);
|
|
876
|
-
}
|
|
877
|
-
if (!themeObj.mode || !["day", "night"].includes(themeObj.mode)) {
|
|
878
|
-
errors.push(`Theme at index ${index} must have mode set to "day" or "night"`);
|
|
879
|
-
}
|
|
880
|
-
if (!themeObj.overrides || typeof themeObj.overrides !== "object") {
|
|
881
|
-
errors.push(`Theme at index ${index} is missing required field: overrides`);
|
|
882
|
-
}
|
|
883
|
-
});
|
|
884
|
-
}
|
|
885
|
-
} else {
|
|
886
|
-
errors.push("Brand must have at least one theme");
|
|
887
|
-
}
|
|
888
|
-
if (brandObj.version && typeof brandObj.version === "string") {
|
|
889
|
-
const semverRegex = /^\d+\.\d+\.\d+$/;
|
|
890
|
-
if (!semverRegex.test(brandObj.version)) {
|
|
891
|
-
warnings.push(
|
|
892
|
-
`Invalid version format: "${brandObj.version}". Should be semver (e.g., "1.0.0")`
|
|
893
|
-
);
|
|
894
|
-
}
|
|
895
|
-
}
|
|
896
|
-
if (brandObj.themes && Array.isArray(brandObj.themes)) {
|
|
897
|
-
const themeIds = brandObj.themes.map(
|
|
898
|
-
(theme) => theme?.id
|
|
899
|
-
);
|
|
900
|
-
const uniqueIds = new Set(themeIds);
|
|
901
|
-
if (themeIds.length !== uniqueIds.size) {
|
|
902
|
-
errors.push("Brand contains duplicate theme IDs");
|
|
903
|
-
}
|
|
904
|
-
}
|
|
905
|
-
return {
|
|
906
|
-
valid: errors.length === 0,
|
|
907
|
-
errors,
|
|
908
|
-
warnings
|
|
909
|
-
};
|
|
910
|
-
}
|
|
911
|
-
function registerBrand(brand, options) {
|
|
912
|
-
const validation = validateBrand(brand);
|
|
913
|
-
if (!validation.valid) {
|
|
914
|
-
throw new Error(`Invalid brand "${brand.id}": ${validation.errors.join(", ")}`);
|
|
915
|
-
}
|
|
916
|
-
if (validation.warnings.length > 0) {
|
|
917
|
-
console.warn(`Brand "${brand.id}" validation warnings:`, validation.warnings.join(", "));
|
|
918
|
-
}
|
|
919
|
-
const existingEntry = brandRegistry.get(brand.id);
|
|
920
|
-
if (existingEntry && existingEntry.brand.namespace === brand.namespace) {
|
|
921
|
-
return;
|
|
922
|
-
}
|
|
923
|
-
if (brandRegistry.has(brand.id)) {
|
|
924
|
-
throw new Error(`Brand "${brand.id}" is already registered`);
|
|
925
|
-
}
|
|
926
|
-
const existingBrand = Array.from(brandRegistry.values()).find(
|
|
927
|
-
(entry) => entry.brand.namespace === brand.namespace
|
|
928
|
-
);
|
|
929
|
-
if (existingBrand) {
|
|
930
|
-
throw new Error(
|
|
931
|
-
`Brand namespace "${brand.namespace}" is already used by brand "${existingBrand.brand.id}"`
|
|
932
|
-
);
|
|
933
|
-
}
|
|
934
|
-
brandRegistry.set(brand.id, {
|
|
935
|
-
brand,
|
|
936
|
-
enabled: options?.enabled !== false,
|
|
937
|
-
loader: options?.loader
|
|
938
|
-
});
|
|
939
|
-
}
|
|
940
|
-
async function loadBrand(brandId) {
|
|
941
|
-
if (brandCache.has(brandId)) {
|
|
942
|
-
return brandCache.get(brandId);
|
|
943
|
-
}
|
|
944
|
-
const entry = brandRegistry.get(brandId);
|
|
945
|
-
if (!entry) {
|
|
946
|
-
throw new Error(`Brand "${brandId}" not found in registry`);
|
|
947
|
-
}
|
|
948
|
-
if (entry.enabled === false) {
|
|
949
|
-
throw new Error(`Brand "${brandId}" is disabled`);
|
|
950
|
-
}
|
|
951
|
-
if (entry.loader) {
|
|
952
|
-
try {
|
|
953
|
-
const module = await entry.loader();
|
|
954
|
-
const loadedBrand = module.default;
|
|
955
|
-
const validation = validateBrand(loadedBrand);
|
|
956
|
-
if (!validation.valid) {
|
|
957
|
-
throw new Error(`Invalid loaded brand "${brandId}": ${validation.errors.join(", ")}`);
|
|
958
|
-
}
|
|
959
|
-
brandCache.set(brandId, loadedBrand);
|
|
960
|
-
return loadedBrand;
|
|
961
|
-
} catch (error) {
|
|
962
|
-
throw new Error(
|
|
963
|
-
`Failed to load brand "${brandId}": ${error instanceof Error ? error.message : String(error)}`
|
|
964
|
-
);
|
|
965
|
-
}
|
|
966
|
-
}
|
|
967
|
-
brandCache.set(brandId, entry.brand);
|
|
968
|
-
return entry.brand;
|
|
969
|
-
}
|
|
970
|
-
function getActiveBrand() {
|
|
971
|
-
return activeBrand;
|
|
972
|
-
}
|
|
973
|
-
function setActiveBrand(brand) {
|
|
974
|
-
activeBrand = brand;
|
|
975
|
-
activeNamespace = brand?.namespace || null;
|
|
976
|
-
}
|
|
977
|
-
function clearActiveBrand() {
|
|
978
|
-
activeBrand = null;
|
|
979
|
-
activeNamespace = null;
|
|
980
|
-
}
|
|
981
|
-
function getBrandTheme(brand, mode) {
|
|
982
|
-
return brand.themes.find((theme) => theme.mode === mode);
|
|
983
|
-
}
|
|
984
|
-
function applyBrandOverrides(brand, mode) {
|
|
985
|
-
if (typeof document === "undefined") return;
|
|
986
|
-
const theme = getBrandTheme(brand, mode);
|
|
987
|
-
if (!theme) {
|
|
988
|
-
console.warn(`Brand "${brand.id}" has no theme for mode "${mode}"`);
|
|
989
|
-
return;
|
|
990
|
-
}
|
|
991
|
-
const root = document.documentElement;
|
|
992
|
-
const { namespace } = brand;
|
|
993
|
-
const { overrides } = theme;
|
|
994
|
-
if (overrides.primaryColors) {
|
|
995
|
-
Object.entries(overrides.primaryColors).forEach(([key, value]) => {
|
|
996
|
-
root.style.setProperty(`--brand-${namespace}-primary-${key}`, value);
|
|
997
|
-
});
|
|
998
|
-
}
|
|
999
|
-
if (overrides.accentColors) {
|
|
1000
|
-
Object.entries(overrides.accentColors).forEach(([key, value]) => {
|
|
1001
|
-
root.style.setProperty(`--brand-${namespace}-accent-${key}`, value);
|
|
1002
|
-
});
|
|
1003
|
-
}
|
|
1004
|
-
if (overrides.secondaryColors) {
|
|
1005
|
-
Object.entries(overrides.secondaryColors).forEach(([key, value]) => {
|
|
1006
|
-
root.style.setProperty(`--brand-${namespace}-secondary-${key}`, value);
|
|
1007
|
-
});
|
|
1008
|
-
}
|
|
1009
|
-
const modeColors = mode === "day" ? overrides.baseColorsDay : overrides.baseColorsNight;
|
|
1010
|
-
if (modeColors) {
|
|
1011
|
-
Object.entries(modeColors).forEach(([key, value]) => {
|
|
1012
|
-
root.style.setProperty(`--brand-${namespace}-${key}`, value);
|
|
1013
|
-
});
|
|
1014
|
-
}
|
|
1015
|
-
if (overrides.typography) {
|
|
1016
|
-
if (overrides.typography.fontFamily) {
|
|
1017
|
-
Object.entries(overrides.typography.fontFamily).forEach(([key, value]) => {
|
|
1018
|
-
root.style.setProperty(
|
|
1019
|
-
`--brand-${namespace}-font-${key}`,
|
|
1020
|
-
Array.isArray(value) ? value.join(", ") : value
|
|
1021
|
-
);
|
|
1022
|
-
});
|
|
1023
|
-
}
|
|
1024
|
-
if (overrides.typography.fontSize) {
|
|
1025
|
-
Object.entries(overrides.typography.fontSize).forEach(([key, value]) => {
|
|
1026
|
-
const fontSizeValue = typeof value === "string" ? value : value[0];
|
|
1027
|
-
root.style.setProperty(`--brand-${namespace}-font-size-${key}`, fontSizeValue);
|
|
1028
|
-
});
|
|
1029
|
-
}
|
|
1030
|
-
if (overrides.typography.fontWeight) {
|
|
1031
|
-
Object.entries(overrides.typography.fontWeight).forEach(([key, value]) => {
|
|
1032
|
-
root.style.setProperty(`--brand-${namespace}-font-weight-${key}`, value);
|
|
1033
|
-
});
|
|
1034
|
-
}
|
|
1035
|
-
if (overrides.typography.lineHeight) {
|
|
1036
|
-
Object.entries(overrides.typography.lineHeight).forEach(([key, value]) => {
|
|
1037
|
-
root.style.setProperty(`--brand-${namespace}-line-height-${key}`, value);
|
|
1038
|
-
});
|
|
1039
|
-
}
|
|
1040
|
-
if (overrides.typography.letterSpacing) {
|
|
1041
|
-
Object.entries(overrides.typography.letterSpacing).forEach(([key, value]) => {
|
|
1042
|
-
root.style.setProperty(`--brand-${namespace}-letter-spacing-${key}`, value);
|
|
1043
|
-
});
|
|
1044
|
-
}
|
|
1045
|
-
}
|
|
1046
|
-
if (overrides.spacing) {
|
|
1047
|
-
if (overrides.spacing.semanticSpacing) {
|
|
1048
|
-
Object.entries(overrides.spacing.semanticSpacing).forEach(([key, value]) => {
|
|
1049
|
-
root.style.setProperty(`--brand-${namespace}-spacing-${key}`, value);
|
|
1050
|
-
});
|
|
1051
|
-
}
|
|
1052
|
-
if (overrides.spacing.layoutSpacing) {
|
|
1053
|
-
const layout = overrides.spacing.layoutSpacing;
|
|
1054
|
-
if (layout.section) {
|
|
1055
|
-
Object.entries(layout.section).forEach(([key, value]) => {
|
|
1056
|
-
if (typeof value === "string") {
|
|
1057
|
-
root.style.setProperty(`--brand-${namespace}-layout-section-${key}`, value);
|
|
1058
|
-
}
|
|
1059
|
-
});
|
|
1060
|
-
}
|
|
1061
|
-
if (layout.container) {
|
|
1062
|
-
Object.entries(layout.container).forEach(([key, value]) => {
|
|
1063
|
-
if (typeof value === "string") {
|
|
1064
|
-
root.style.setProperty(`--brand-${namespace}-layout-container-${key}`, value);
|
|
1065
|
-
}
|
|
1066
|
-
});
|
|
1067
|
-
}
|
|
1068
|
-
if (layout.grid) {
|
|
1069
|
-
Object.entries(layout.grid).forEach(([key, value]) => {
|
|
1070
|
-
if (typeof value === "string") {
|
|
1071
|
-
root.style.setProperty(`--brand-${namespace}-layout-grid-${key}`, value);
|
|
1072
|
-
}
|
|
1073
|
-
});
|
|
1074
|
-
}
|
|
1075
|
-
if (layout.stack) {
|
|
1076
|
-
Object.entries(layout.stack).forEach(([key, value]) => {
|
|
1077
|
-
if (typeof value === "string") {
|
|
1078
|
-
root.style.setProperty(`--brand-${namespace}-layout-stack-${key}`, value);
|
|
1079
|
-
}
|
|
1080
|
-
});
|
|
1081
|
-
}
|
|
1082
|
-
if (layout.component) {
|
|
1083
|
-
Object.entries(layout.component).forEach(([key, value]) => {
|
|
1084
|
-
if (typeof value === "string") {
|
|
1085
|
-
root.style.setProperty(`--brand-${namespace}-layout-component-${key}`, value);
|
|
1086
|
-
}
|
|
1087
|
-
});
|
|
1088
|
-
}
|
|
1089
|
-
}
|
|
1090
|
-
}
|
|
1091
|
-
if (overrides.shadows) {
|
|
1092
|
-
if (overrides.shadows.elevationShadows) {
|
|
1093
|
-
Object.entries(overrides.shadows.elevationShadows).forEach(([key, value]) => {
|
|
1094
|
-
root.style.setProperty(`--brand-${namespace}-shadow-${key}`, value);
|
|
1095
|
-
});
|
|
1096
|
-
}
|
|
1097
|
-
if (overrides.shadows.primaryColoredShadows) {
|
|
1098
|
-
Object.entries(overrides.shadows.primaryColoredShadows).forEach(([key, value]) => {
|
|
1099
|
-
root.style.setProperty(`--brand-${namespace}-shadow-primary-${key}`, value);
|
|
1100
|
-
});
|
|
1101
|
-
}
|
|
1102
|
-
if (overrides.shadows.accentColoredShadows) {
|
|
1103
|
-
Object.entries(overrides.shadows.accentColoredShadows).forEach(([key, value]) => {
|
|
1104
|
-
root.style.setProperty(`--brand-${namespace}-shadow-accent-${key}`, value);
|
|
1105
|
-
});
|
|
1106
|
-
}
|
|
1107
|
-
if (overrides.shadows.glowEffects) {
|
|
1108
|
-
Object.entries(overrides.shadows.glowEffects).forEach(([key, value]) => {
|
|
1109
|
-
root.style.setProperty(`--brand-${namespace}-glow-${key}`, value);
|
|
1110
|
-
});
|
|
1111
|
-
}
|
|
1112
|
-
if (overrides.shadows.focusRings) {
|
|
1113
|
-
Object.entries(overrides.shadows.focusRings).forEach(([key, value]) => {
|
|
1114
|
-
root.style.setProperty(`--brand-${namespace}-focus-ring-${key}`, value);
|
|
1115
|
-
});
|
|
1116
|
-
}
|
|
1117
|
-
}
|
|
1118
|
-
if (overrides.radius) {
|
|
1119
|
-
if (overrides.radius.borderRadius) {
|
|
1120
|
-
Object.entries(overrides.radius.borderRadius).forEach(([key, value]) => {
|
|
1121
|
-
root.style.setProperty(`--brand-${namespace}-radius-${key}`, value);
|
|
1122
|
-
});
|
|
1123
|
-
}
|
|
1124
|
-
if (overrides.radius.componentRadius) {
|
|
1125
|
-
const { componentRadius: componentRadius2 } = overrides.radius;
|
|
1126
|
-
if (componentRadius2.button) {
|
|
1127
|
-
Object.entries(componentRadius2.button).forEach(([key, value]) => {
|
|
1128
|
-
root.style.setProperty(`--brand-${namespace}-radius-button-${key}`, value);
|
|
1129
|
-
});
|
|
1130
|
-
}
|
|
1131
|
-
if (componentRadius2.card) {
|
|
1132
|
-
Object.entries(componentRadius2.card).forEach(([key, value]) => {
|
|
1133
|
-
root.style.setProperty(`--brand-${namespace}-radius-card-${key}`, value);
|
|
1134
|
-
});
|
|
1135
|
-
}
|
|
1136
|
-
if (componentRadius2.input) {
|
|
1137
|
-
Object.entries(componentRadius2.input).forEach(([key, value]) => {
|
|
1138
|
-
root.style.setProperty(`--brand-${namespace}-radius-input-${key}`, value);
|
|
1139
|
-
});
|
|
1140
|
-
}
|
|
1141
|
-
}
|
|
1142
|
-
}
|
|
1143
|
-
setActiveBrand(brand);
|
|
1144
|
-
root.setAttribute("data-brand", brand.id);
|
|
1145
|
-
root.setAttribute("data-brand-namespace", namespace);
|
|
1146
|
-
}
|
|
1147
|
-
function removeBrandOverrides(namespace) {
|
|
1148
|
-
if (typeof document === "undefined") return;
|
|
1149
|
-
const root = document.documentElement;
|
|
1150
|
-
const { style } = root;
|
|
1151
|
-
const propsToRemove = [];
|
|
1152
|
-
for (let i = 0; i < style.length; i++) {
|
|
1153
|
-
const prop = style.item(i);
|
|
1154
|
-
if (prop && prop.startsWith(`--brand-${namespace}-`)) {
|
|
1155
|
-
propsToRemove.push(prop);
|
|
1156
|
-
}
|
|
1157
|
-
}
|
|
1158
|
-
propsToRemove.forEach((prop) => {
|
|
1159
|
-
style.removeProperty(prop);
|
|
1160
|
-
});
|
|
1161
|
-
root.removeAttribute("data-brand");
|
|
1162
|
-
root.removeAttribute("data-brand-namespace");
|
|
1163
|
-
if (activeNamespace === namespace) {
|
|
1164
|
-
clearActiveBrand();
|
|
1165
|
-
}
|
|
1166
|
-
}
|
|
1167
|
-
|
|
1168
|
-
// src/themes/index.ts
|
|
1169
|
-
var themes = {
|
|
1170
|
-
default: () => Promise.resolve().then(() => (init_default(), default_exports)).then((m) => m.defaultTheme),
|
|
1171
|
-
dark: () => Promise.resolve().then(() => (init_dark(), dark_exports)).then((m) => m.darkTheme),
|
|
1172
|
-
brand: () => Promise.resolve().then(() => (init_brand(), brand_exports)).then((m) => m.brandTheme)
|
|
1173
|
-
};
|
|
1174
|
-
async function getTheme(name) {
|
|
1175
|
-
const themeLoader = themes[name];
|
|
1176
|
-
if (!themeLoader) {
|
|
1177
|
-
throw new Error(`Theme "${name}" not found`);
|
|
1178
|
-
}
|
|
1179
|
-
return await themeLoader();
|
|
1180
|
-
}
|
|
1181
|
-
|
|
1182
|
-
// src/tokens/colors.ts
|
|
118
|
+
// src/FOUNDATION/tokens/colors.ts
|
|
1183
119
|
var primaryColors = {
|
|
1184
120
|
50: "210 40% 98%",
|
|
1185
121
|
// Lightest blue
|
|
@@ -1581,7 +517,7 @@ var tailwindThemeColors = {
|
|
|
1581
517
|
}
|
|
1582
518
|
};
|
|
1583
519
|
|
|
1584
|
-
// src/tokens/motion/v2.ts
|
|
520
|
+
// src/FOUNDATION/tokens/motion/v2.ts
|
|
1585
521
|
var motionV2Durations = {
|
|
1586
522
|
fast: "150ms",
|
|
1587
523
|
// Quick interactions
|
|
@@ -1625,7 +561,7 @@ var motionV2CSSVariables = {
|
|
|
1625
561
|
"--motion-transition-reduced": motionV2Transitions.reduced
|
|
1626
562
|
};
|
|
1627
563
|
|
|
1628
|
-
// src/tokens/motion.ts
|
|
564
|
+
// src/FOUNDATION/tokens/motion.ts
|
|
1629
565
|
var durations = {
|
|
1630
566
|
instant: "0ms",
|
|
1631
567
|
fast: "150ms",
|
|
@@ -1737,7 +673,7 @@ var motionCSSVariables = {
|
|
|
1737
673
|
"--transition-elastic": transitions.elastic
|
|
1738
674
|
};
|
|
1739
675
|
|
|
1740
|
-
// src/tokens/radius.ts
|
|
676
|
+
// src/FOUNDATION/tokens/radius.ts
|
|
1741
677
|
var borderRadius = {
|
|
1742
678
|
// No radius
|
|
1743
679
|
none: "0",
|
|
@@ -1831,7 +767,7 @@ var radiusCSSVariables = {
|
|
|
1831
767
|
"--radius-image": componentRadius.image.md
|
|
1832
768
|
};
|
|
1833
769
|
|
|
1834
|
-
// src/tokens/shadows.ts
|
|
770
|
+
// src/FOUNDATION/tokens/shadows.ts
|
|
1835
771
|
var shadowBase = {
|
|
1836
772
|
black: "0 0 0"};
|
|
1837
773
|
var shadowOpacity = {
|
|
@@ -1925,7 +861,7 @@ var shadowCSSVariables = {
|
|
|
1925
861
|
"--focus-accent": focusRings["focus-accent"]
|
|
1926
862
|
};
|
|
1927
863
|
|
|
1928
|
-
// src/tokens/spacing.ts
|
|
864
|
+
// src/FOUNDATION/tokens/spacing.ts
|
|
1929
865
|
var spacing = {
|
|
1930
866
|
// Zero spacing
|
|
1931
867
|
0: "0",
|
|
@@ -2140,7 +1076,7 @@ var spacingCSSVariables = {
|
|
|
2140
1076
|
"--layout-component-xl": layoutSpacing.component.xl
|
|
2141
1077
|
};
|
|
2142
1078
|
|
|
2143
|
-
// src/tokens/typography.ts
|
|
1079
|
+
// src/FOUNDATION/tokens/typography.ts
|
|
2144
1080
|
var fontFamily = {
|
|
2145
1081
|
// Primary font - Inter (default sans)
|
|
2146
1082
|
sans: [
|
|
@@ -2198,243 +1134,1307 @@ var fontFamily = {
|
|
|
2198
1134
|
"monospace"
|
|
2199
1135
|
]
|
|
2200
1136
|
};
|
|
2201
|
-
var fontSize = {
|
|
2202
|
-
// text-xs: 12px base, scales from 0.75rem to 0.875rem
|
|
2203
|
-
xs: [
|
|
2204
|
-
"clamp(0.75rem, 0.7rem + 0.125vw, 0.875rem)",
|
|
2205
|
-
{ lineHeight: "1rem", letterSpacing: "0.05em" }
|
|
2206
|
-
],
|
|
2207
|
-
// text-sm: 14px base, scales from 0.875rem to 1rem
|
|
2208
|
-
sm: [
|
|
2209
|
-
"clamp(0.875rem, 0.8rem + 0.25vw, 1rem)",
|
|
2210
|
-
{ lineHeight: "1.25rem", letterSpacing: "0.025em" }
|
|
2211
|
-
],
|
|
2212
|
-
// text-base: 16px base, scales from 1rem to 1.125rem
|
|
2213
|
-
base: ["clamp(1rem, 0.95rem + 0.25vw, 1.125rem)", { lineHeight: "1.5rem", letterSpacing: "0em" }],
|
|
2214
|
-
// text-lg: 18px base, scales from 1.125rem to 1.25rem
|
|
2215
|
-
lg: [
|
|
2216
|
-
"clamp(1.125rem, 1rem + 0.5vw, 1.25rem)",
|
|
2217
|
-
{ lineHeight: "1.75rem", letterSpacing: "-0.025em" }
|
|
2218
|
-
],
|
|
2219
|
-
// text-xl: 20px base, scales from 1.25rem to 1.5rem
|
|
2220
|
-
xl: [
|
|
2221
|
-
"clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)",
|
|
2222
|
-
{ lineHeight: "1.75rem", letterSpacing: "-0.025em" }
|
|
2223
|
-
],
|
|
2224
|
-
// text-2xl: 24px base, scales from 1.5rem to 2rem
|
|
2225
|
-
"2xl": [
|
|
2226
|
-
"clamp(1.5rem, 1.25rem + 1.25vw, 2rem)",
|
|
2227
|
-
{ lineHeight: "2rem", letterSpacing: "-0.05em" }
|
|
2228
|
-
],
|
|
2229
|
-
// text-3xl: 30px base, scales from 1.875rem to 2.5rem
|
|
2230
|
-
"3xl": [
|
|
2231
|
-
"clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem)",
|
|
2232
|
-
{ lineHeight: "2.25rem", letterSpacing: "-0.05em" }
|
|
2233
|
-
],
|
|
2234
|
-
// text-4xl: 36px base, scales from 2.25rem to 3rem
|
|
2235
|
-
"4xl": [
|
|
2236
|
-
"clamp(2.25rem, 1.75rem + 2.5vw, 3rem)",
|
|
2237
|
-
{ lineHeight: "2.5rem", letterSpacing: "-0.025em" }
|
|
2238
|
-
],
|
|
2239
|
-
// text-5xl: 48px base, scales from 3rem to 4rem
|
|
2240
|
-
"5xl": ["clamp(3rem, 2rem + 5vw, 4rem)", { lineHeight: "1", letterSpacing: "-0.025em" }],
|
|
2241
|
-
// text-6xl: 60px base, scales from 3.75rem to 5rem
|
|
2242
|
-
"6xl": ["clamp(3.75rem, 2.5rem + 6.25vw, 5rem)", { lineHeight: "1", letterSpacing: "-0.05em" }],
|
|
2243
|
-
// text-7xl: 72px base (optional, for hero sections)
|
|
2244
|
-
"7xl": ["clamp(4.5rem, 3rem + 7.5vw, 6rem)", { lineHeight: "1", letterSpacing: "-0.05em" }],
|
|
2245
|
-
// text-8xl: 96px base (optional, for hero sections)
|
|
2246
|
-
"8xl": ["clamp(6rem, 4rem + 10vw, 8rem)", { lineHeight: "1", letterSpacing: "-0.05em" }],
|
|
2247
|
-
// text-9xl: 128px base (optional, for hero sections)
|
|
2248
|
-
"9xl": ["clamp(8rem, 5rem + 15vw, 12rem)", { lineHeight: "1", letterSpacing: "-0.05em" }]
|
|
2249
|
-
};
|
|
2250
|
-
var fontWeight = {
|
|
2251
|
-
thin: "100",
|
|
2252
|
-
extralight: "200",
|
|
2253
|
-
light: "300",
|
|
2254
|
-
normal: "400",
|
|
2255
|
-
medium: "500",
|
|
2256
|
-
semibold: "600",
|
|
2257
|
-
bold: "700",
|
|
2258
|
-
extrabold: "800",
|
|
2259
|
-
black: "900"
|
|
2260
|
-
};
|
|
2261
|
-
var lineHeight = {
|
|
2262
|
-
none: "1",
|
|
2263
|
-
tight: "1.25",
|
|
2264
|
-
snug: "1.375",
|
|
2265
|
-
normal: "1.5",
|
|
2266
|
-
relaxed: "1.625",
|
|
2267
|
-
loose: "2"
|
|
2268
|
-
};
|
|
2269
|
-
var letterSpacing = {
|
|
2270
|
-
tighter: "-0.05em",
|
|
2271
|
-
tight: "-0.025em",
|
|
2272
|
-
normal: "0em",
|
|
2273
|
-
wide: "0.025em",
|
|
2274
|
-
wider: "0.05em",
|
|
2275
|
-
widest: "0.1em"
|
|
2276
|
-
};
|
|
2277
|
-
var typographyCSSVariables = {
|
|
2278
|
-
// Font families
|
|
2279
|
-
"--font-sans": fontFamily.sans.join(", "),
|
|
2280
|
-
"--font-satoshi": fontFamily.satoshi.join(", "),
|
|
2281
|
-
"--font-display": fontFamily.display.join(", "),
|
|
2282
|
-
"--font-serif": fontFamily.serif.join(", "),
|
|
2283
|
-
"--font-mono": fontFamily.mono.join(", "),
|
|
2284
|
-
// Font sizes (using clamp values)
|
|
2285
|
-
"--font-size-xs": fontSize.xs[0],
|
|
2286
|
-
"--font-size-sm": fontSize.sm[0],
|
|
2287
|
-
"--font-size-base": fontSize.base[0],
|
|
2288
|
-
"--font-size-lg": fontSize.lg[0],
|
|
2289
|
-
"--font-size-xl": fontSize.xl[0],
|
|
2290
|
-
"--font-size-2xl": fontSize["2xl"][0],
|
|
2291
|
-
"--font-size-3xl": fontSize["3xl"][0],
|
|
2292
|
-
"--font-size-4xl": fontSize["4xl"][0],
|
|
2293
|
-
"--font-size-5xl": fontSize["5xl"][0],
|
|
2294
|
-
"--font-size-6xl": fontSize["6xl"][0],
|
|
2295
|
-
// Font weights
|
|
2296
|
-
"--font-weight-thin": fontWeight.thin,
|
|
2297
|
-
"--font-weight-extralight": fontWeight.extralight,
|
|
2298
|
-
"--font-weight-light": fontWeight.light,
|
|
2299
|
-
"--font-weight-normal": fontWeight.normal,
|
|
2300
|
-
"--font-weight-medium": fontWeight.medium,
|
|
2301
|
-
"--font-weight-semibold": fontWeight.semibold,
|
|
2302
|
-
"--font-weight-bold": fontWeight.bold,
|
|
2303
|
-
"--font-weight-extrabold": fontWeight.extrabold,
|
|
2304
|
-
"--font-weight-black": fontWeight.black,
|
|
2305
|
-
// Line heights
|
|
2306
|
-
"--line-height-none": lineHeight.none,
|
|
2307
|
-
"--line-height-tight": lineHeight.tight,
|
|
2308
|
-
"--line-height-snug": lineHeight.snug,
|
|
2309
|
-
"--line-height-normal": lineHeight.normal,
|
|
2310
|
-
"--line-height-relaxed": lineHeight.relaxed,
|
|
2311
|
-
"--line-height-loose": lineHeight.loose,
|
|
2312
|
-
// Letter spacing
|
|
2313
|
-
"--letter-spacing-tighter": letterSpacing.tighter,
|
|
2314
|
-
"--letter-spacing-tight": letterSpacing.tight,
|
|
2315
|
-
"--letter-spacing-normal": letterSpacing.normal,
|
|
2316
|
-
"--letter-spacing-wide": letterSpacing.wide,
|
|
2317
|
-
"--letter-spacing-wider": letterSpacing.wider,
|
|
2318
|
-
"--letter-spacing-widest": letterSpacing.widest
|
|
1137
|
+
var fontSize = {
|
|
1138
|
+
// text-xs: 12px base, scales from 0.75rem to 0.875rem
|
|
1139
|
+
xs: [
|
|
1140
|
+
"clamp(0.75rem, 0.7rem + 0.125vw, 0.875rem)",
|
|
1141
|
+
{ lineHeight: "1rem", letterSpacing: "0.05em" }
|
|
1142
|
+
],
|
|
1143
|
+
// text-sm: 14px base, scales from 0.875rem to 1rem
|
|
1144
|
+
sm: [
|
|
1145
|
+
"clamp(0.875rem, 0.8rem + 0.25vw, 1rem)",
|
|
1146
|
+
{ lineHeight: "1.25rem", letterSpacing: "0.025em" }
|
|
1147
|
+
],
|
|
1148
|
+
// text-base: 16px base, scales from 1rem to 1.125rem
|
|
1149
|
+
base: ["clamp(1rem, 0.95rem + 0.25vw, 1.125rem)", { lineHeight: "1.5rem", letterSpacing: "0em" }],
|
|
1150
|
+
// text-lg: 18px base, scales from 1.125rem to 1.25rem
|
|
1151
|
+
lg: [
|
|
1152
|
+
"clamp(1.125rem, 1rem + 0.5vw, 1.25rem)",
|
|
1153
|
+
{ lineHeight: "1.75rem", letterSpacing: "-0.025em" }
|
|
1154
|
+
],
|
|
1155
|
+
// text-xl: 20px base, scales from 1.25rem to 1.5rem
|
|
1156
|
+
xl: [
|
|
1157
|
+
"clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)",
|
|
1158
|
+
{ lineHeight: "1.75rem", letterSpacing: "-0.025em" }
|
|
1159
|
+
],
|
|
1160
|
+
// text-2xl: 24px base, scales from 1.5rem to 2rem
|
|
1161
|
+
"2xl": [
|
|
1162
|
+
"clamp(1.5rem, 1.25rem + 1.25vw, 2rem)",
|
|
1163
|
+
{ lineHeight: "2rem", letterSpacing: "-0.05em" }
|
|
1164
|
+
],
|
|
1165
|
+
// text-3xl: 30px base, scales from 1.875rem to 2.5rem
|
|
1166
|
+
"3xl": [
|
|
1167
|
+
"clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem)",
|
|
1168
|
+
{ lineHeight: "2.25rem", letterSpacing: "-0.05em" }
|
|
1169
|
+
],
|
|
1170
|
+
// text-4xl: 36px base, scales from 2.25rem to 3rem
|
|
1171
|
+
"4xl": [
|
|
1172
|
+
"clamp(2.25rem, 1.75rem + 2.5vw, 3rem)",
|
|
1173
|
+
{ lineHeight: "2.5rem", letterSpacing: "-0.025em" }
|
|
1174
|
+
],
|
|
1175
|
+
// text-5xl: 48px base, scales from 3rem to 4rem
|
|
1176
|
+
"5xl": ["clamp(3rem, 2rem + 5vw, 4rem)", { lineHeight: "1", letterSpacing: "-0.025em" }],
|
|
1177
|
+
// text-6xl: 60px base, scales from 3.75rem to 5rem
|
|
1178
|
+
"6xl": ["clamp(3.75rem, 2.5rem + 6.25vw, 5rem)", { lineHeight: "1", letterSpacing: "-0.05em" }],
|
|
1179
|
+
// text-7xl: 72px base (optional, for hero sections)
|
|
1180
|
+
"7xl": ["clamp(4.5rem, 3rem + 7.5vw, 6rem)", { lineHeight: "1", letterSpacing: "-0.05em" }],
|
|
1181
|
+
// text-8xl: 96px base (optional, for hero sections)
|
|
1182
|
+
"8xl": ["clamp(6rem, 4rem + 10vw, 8rem)", { lineHeight: "1", letterSpacing: "-0.05em" }],
|
|
1183
|
+
// text-9xl: 128px base (optional, for hero sections)
|
|
1184
|
+
"9xl": ["clamp(8rem, 5rem + 15vw, 12rem)", { lineHeight: "1", letterSpacing: "-0.05em" }]
|
|
1185
|
+
};
|
|
1186
|
+
var fontWeight = {
|
|
1187
|
+
thin: "100",
|
|
1188
|
+
extralight: "200",
|
|
1189
|
+
light: "300",
|
|
1190
|
+
normal: "400",
|
|
1191
|
+
medium: "500",
|
|
1192
|
+
semibold: "600",
|
|
1193
|
+
bold: "700",
|
|
1194
|
+
extrabold: "800",
|
|
1195
|
+
black: "900"
|
|
1196
|
+
};
|
|
1197
|
+
var lineHeight = {
|
|
1198
|
+
none: "1",
|
|
1199
|
+
tight: "1.25",
|
|
1200
|
+
snug: "1.375",
|
|
1201
|
+
normal: "1.5",
|
|
1202
|
+
relaxed: "1.625",
|
|
1203
|
+
loose: "2"
|
|
1204
|
+
};
|
|
1205
|
+
var letterSpacing = {
|
|
1206
|
+
tighter: "-0.05em",
|
|
1207
|
+
tight: "-0.025em",
|
|
1208
|
+
normal: "0em",
|
|
1209
|
+
wide: "0.025em",
|
|
1210
|
+
wider: "0.05em",
|
|
1211
|
+
widest: "0.1em"
|
|
1212
|
+
};
|
|
1213
|
+
var typographyCSSVariables = {
|
|
1214
|
+
// Font families
|
|
1215
|
+
"--font-sans": fontFamily.sans.join(", "),
|
|
1216
|
+
"--font-satoshi": fontFamily.satoshi.join(", "),
|
|
1217
|
+
"--font-display": fontFamily.display.join(", "),
|
|
1218
|
+
"--font-serif": fontFamily.serif.join(", "),
|
|
1219
|
+
"--font-mono": fontFamily.mono.join(", "),
|
|
1220
|
+
// Font sizes (using clamp values)
|
|
1221
|
+
"--font-size-xs": fontSize.xs[0],
|
|
1222
|
+
"--font-size-sm": fontSize.sm[0],
|
|
1223
|
+
"--font-size-base": fontSize.base[0],
|
|
1224
|
+
"--font-size-lg": fontSize.lg[0],
|
|
1225
|
+
"--font-size-xl": fontSize.xl[0],
|
|
1226
|
+
"--font-size-2xl": fontSize["2xl"][0],
|
|
1227
|
+
"--font-size-3xl": fontSize["3xl"][0],
|
|
1228
|
+
"--font-size-4xl": fontSize["4xl"][0],
|
|
1229
|
+
"--font-size-5xl": fontSize["5xl"][0],
|
|
1230
|
+
"--font-size-6xl": fontSize["6xl"][0],
|
|
1231
|
+
// Font weights
|
|
1232
|
+
"--font-weight-thin": fontWeight.thin,
|
|
1233
|
+
"--font-weight-extralight": fontWeight.extralight,
|
|
1234
|
+
"--font-weight-light": fontWeight.light,
|
|
1235
|
+
"--font-weight-normal": fontWeight.normal,
|
|
1236
|
+
"--font-weight-medium": fontWeight.medium,
|
|
1237
|
+
"--font-weight-semibold": fontWeight.semibold,
|
|
1238
|
+
"--font-weight-bold": fontWeight.bold,
|
|
1239
|
+
"--font-weight-extrabold": fontWeight.extrabold,
|
|
1240
|
+
"--font-weight-black": fontWeight.black,
|
|
1241
|
+
// Line heights
|
|
1242
|
+
"--line-height-none": lineHeight.none,
|
|
1243
|
+
"--line-height-tight": lineHeight.tight,
|
|
1244
|
+
"--line-height-snug": lineHeight.snug,
|
|
1245
|
+
"--line-height-normal": lineHeight.normal,
|
|
1246
|
+
"--line-height-relaxed": lineHeight.relaxed,
|
|
1247
|
+
"--line-height-loose": lineHeight.loose,
|
|
1248
|
+
// Letter spacing
|
|
1249
|
+
"--letter-spacing-tighter": letterSpacing.tighter,
|
|
1250
|
+
"--letter-spacing-tight": letterSpacing.tight,
|
|
1251
|
+
"--letter-spacing-normal": letterSpacing.normal,
|
|
1252
|
+
"--letter-spacing-wide": letterSpacing.wide,
|
|
1253
|
+
"--letter-spacing-wider": letterSpacing.wider,
|
|
1254
|
+
"--letter-spacing-widest": letterSpacing.widest
|
|
1255
|
+
};
|
|
1256
|
+
({
|
|
1257
|
+
// Display styles (for hero sections)
|
|
1258
|
+
display: {
|
|
1259
|
+
fontSize: fontSize["6xl"][0]},
|
|
1260
|
+
// Heading styles
|
|
1261
|
+
h1: {
|
|
1262
|
+
fontSize: fontSize["5xl"][0]},
|
|
1263
|
+
h2: {
|
|
1264
|
+
fontSize: fontSize["4xl"][0]},
|
|
1265
|
+
h3: {
|
|
1266
|
+
fontSize: fontSize["3xl"][0]},
|
|
1267
|
+
h4: {
|
|
1268
|
+
fontSize: fontSize["2xl"][0]},
|
|
1269
|
+
h5: {
|
|
1270
|
+
fontSize: fontSize.xl[0]},
|
|
1271
|
+
h6: {
|
|
1272
|
+
fontSize: fontSize.lg[0]},
|
|
1273
|
+
// Body text styles
|
|
1274
|
+
body: {
|
|
1275
|
+
fontSize: fontSize.base[0]},
|
|
1276
|
+
"body-sm": {
|
|
1277
|
+
fontSize: fontSize.sm[0]},
|
|
1278
|
+
"body-xs": {
|
|
1279
|
+
fontSize: fontSize.xs[0]},
|
|
1280
|
+
// Label styles
|
|
1281
|
+
label: {
|
|
1282
|
+
fontSize: fontSize.sm[0]},
|
|
1283
|
+
"label-sm": {
|
|
1284
|
+
fontSize: fontSize.xs[0]},
|
|
1285
|
+
// Caption styles
|
|
1286
|
+
caption: {
|
|
1287
|
+
fontSize: fontSize.xs[0]}
|
|
1288
|
+
});
|
|
1289
|
+
({
|
|
1290
|
+
fontSize: {
|
|
1291
|
+
xs: [
|
|
1292
|
+
fontSize.xs[0],
|
|
1293
|
+
{ lineHeight: fontSize.xs[1].lineHeight, letterSpacing: fontSize.xs[1].letterSpacing }
|
|
1294
|
+
],
|
|
1295
|
+
sm: [
|
|
1296
|
+
fontSize.sm[0],
|
|
1297
|
+
{ lineHeight: fontSize.sm[1].lineHeight, letterSpacing: fontSize.sm[1].letterSpacing }
|
|
1298
|
+
],
|
|
1299
|
+
md: [
|
|
1300
|
+
fontSize.base[0],
|
|
1301
|
+
{ lineHeight: fontSize.base[1].lineHeight, letterSpacing: fontSize.base[1].letterSpacing }
|
|
1302
|
+
],
|
|
1303
|
+
base: [
|
|
1304
|
+
fontSize.base[0],
|
|
1305
|
+
{ lineHeight: fontSize.base[1].lineHeight, letterSpacing: fontSize.base[1].letterSpacing }
|
|
1306
|
+
],
|
|
1307
|
+
lg: [
|
|
1308
|
+
fontSize.lg[0],
|
|
1309
|
+
{ lineHeight: fontSize.lg[1].lineHeight, letterSpacing: fontSize.lg[1].letterSpacing }
|
|
1310
|
+
],
|
|
1311
|
+
xl: [
|
|
1312
|
+
fontSize.xl[0],
|
|
1313
|
+
{ lineHeight: fontSize.xl[1].lineHeight, letterSpacing: fontSize.xl[1].letterSpacing }
|
|
1314
|
+
],
|
|
1315
|
+
"2xl": [
|
|
1316
|
+
fontSize["2xl"][0],
|
|
1317
|
+
{
|
|
1318
|
+
lineHeight: fontSize["2xl"][1].lineHeight,
|
|
1319
|
+
letterSpacing: fontSize["2xl"][1].letterSpacing
|
|
1320
|
+
}
|
|
1321
|
+
],
|
|
1322
|
+
"3xl": [
|
|
1323
|
+
fontSize["3xl"][0],
|
|
1324
|
+
{
|
|
1325
|
+
lineHeight: fontSize["3xl"][1].lineHeight,
|
|
1326
|
+
letterSpacing: fontSize["3xl"][1].letterSpacing
|
|
1327
|
+
}
|
|
1328
|
+
],
|
|
1329
|
+
"4xl": [
|
|
1330
|
+
fontSize["4xl"][0],
|
|
1331
|
+
{
|
|
1332
|
+
lineHeight: fontSize["4xl"][1].lineHeight,
|
|
1333
|
+
letterSpacing: fontSize["4xl"][1].letterSpacing
|
|
1334
|
+
}
|
|
1335
|
+
],
|
|
1336
|
+
"5xl": [
|
|
1337
|
+
fontSize["5xl"][0],
|
|
1338
|
+
{
|
|
1339
|
+
lineHeight: fontSize["5xl"][1].lineHeight,
|
|
1340
|
+
letterSpacing: fontSize["5xl"][1].letterSpacing
|
|
1341
|
+
}
|
|
1342
|
+
],
|
|
1343
|
+
"6xl": [
|
|
1344
|
+
fontSize["6xl"][0],
|
|
1345
|
+
{
|
|
1346
|
+
lineHeight: fontSize["6xl"][1].lineHeight,
|
|
1347
|
+
letterSpacing: fontSize["6xl"][1].letterSpacing
|
|
1348
|
+
}
|
|
1349
|
+
],
|
|
1350
|
+
"7xl": [
|
|
1351
|
+
fontSize["7xl"][0],
|
|
1352
|
+
{
|
|
1353
|
+
lineHeight: fontSize["7xl"][1].lineHeight,
|
|
1354
|
+
letterSpacing: fontSize["7xl"][1].letterSpacing
|
|
1355
|
+
}
|
|
1356
|
+
],
|
|
1357
|
+
"8xl": [
|
|
1358
|
+
fontSize["8xl"][0],
|
|
1359
|
+
{
|
|
1360
|
+
lineHeight: fontSize["8xl"][1].lineHeight,
|
|
1361
|
+
letterSpacing: fontSize["8xl"][1].letterSpacing
|
|
1362
|
+
}
|
|
1363
|
+
],
|
|
1364
|
+
"9xl": [
|
|
1365
|
+
fontSize["9xl"][0],
|
|
1366
|
+
{
|
|
1367
|
+
lineHeight: fontSize["9xl"][1].lineHeight,
|
|
1368
|
+
letterSpacing: fontSize["9xl"][1].letterSpacing
|
|
1369
|
+
}
|
|
1370
|
+
]
|
|
1371
|
+
}});
|
|
1372
|
+
|
|
1373
|
+
// src/themes/minimal.ts
|
|
1374
|
+
var minimalBrand = {
|
|
1375
|
+
id: "minimal",
|
|
1376
|
+
name: "Minimal",
|
|
1377
|
+
description: "Clean, minimal brand theme with muted colors, light typography, and compact spacing",
|
|
1378
|
+
namespace: "minimal",
|
|
1379
|
+
version: "1.0.0",
|
|
1380
|
+
author: "Tenerife UI",
|
|
1381
|
+
themes: [
|
|
1382
|
+
{
|
|
1383
|
+
id: "minimal-day",
|
|
1384
|
+
name: "Minimal Day",
|
|
1385
|
+
description: "Light minimal theme with grayscale colors and subtle accents",
|
|
1386
|
+
mode: "day",
|
|
1387
|
+
overrides: {
|
|
1388
|
+
name: "minimal-day",
|
|
1389
|
+
description: "Light minimal theme for day mode",
|
|
1390
|
+
// Muted, low-saturation color overrides
|
|
1391
|
+
primaryColors: {
|
|
1392
|
+
400: "0 0% 60%",
|
|
1393
|
+
// Muted gray
|
|
1394
|
+
500: "0 0% 50%",
|
|
1395
|
+
// Neutral gray (#808080)
|
|
1396
|
+
600: "0 0% 40%",
|
|
1397
|
+
700: "0 0% 30%"
|
|
1398
|
+
},
|
|
1399
|
+
accentColors: {
|
|
1400
|
+
400: "210 20% 70%",
|
|
1401
|
+
// Muted blue-gray
|
|
1402
|
+
500: "210 20% 60%",
|
|
1403
|
+
// Subtle blue-gray
|
|
1404
|
+
600: "210 20% 50%",
|
|
1405
|
+
700: "210 20% 40%"
|
|
1406
|
+
},
|
|
1407
|
+
secondaryColors: {
|
|
1408
|
+
400: "0 0% 70%",
|
|
1409
|
+
// Light gray
|
|
1410
|
+
500: "0 0% 65%",
|
|
1411
|
+
// Neutral light gray
|
|
1412
|
+
600: "0 0% 55%",
|
|
1413
|
+
700: "0 0% 45%"
|
|
1414
|
+
},
|
|
1415
|
+
// Muted base colors for day mode
|
|
1416
|
+
baseColorsDay: {
|
|
1417
|
+
primary: "0 0% 50%",
|
|
1418
|
+
// Neutral gray
|
|
1419
|
+
primaryForeground: "0 0% 100%",
|
|
1420
|
+
secondary: "0 0% 96%",
|
|
1421
|
+
// Very light gray
|
|
1422
|
+
secondaryForeground: "0 0% 20%",
|
|
1423
|
+
accent: "210 20% 60%",
|
|
1424
|
+
// Subtle blue-gray
|
|
1425
|
+
accentForeground: "0 0% 100%"
|
|
1426
|
+
},
|
|
1427
|
+
// Subtle semantic colors
|
|
1428
|
+
semanticColorsDay: {
|
|
1429
|
+
success: "140 30% 45%",
|
|
1430
|
+
// Muted green
|
|
1431
|
+
info: "210 30% 50%",
|
|
1432
|
+
// Muted blue
|
|
1433
|
+
warning: "40 30% 50%",
|
|
1434
|
+
// Muted orange
|
|
1435
|
+
error: "0 40% 55%"
|
|
1436
|
+
// Muted red
|
|
1437
|
+
},
|
|
1438
|
+
// Typography overrides - lighter and smaller
|
|
1439
|
+
typography: {
|
|
1440
|
+
fontWeight: {
|
|
1441
|
+
normal: "400",
|
|
1442
|
+
// Normal weight
|
|
1443
|
+
medium: "500",
|
|
1444
|
+
semibold: "600",
|
|
1445
|
+
// Lighter than default
|
|
1446
|
+
bold: "700"
|
|
1447
|
+
// Standard bold
|
|
1448
|
+
},
|
|
1449
|
+
fontSize: {
|
|
1450
|
+
xs: [
|
|
1451
|
+
"clamp(0.6875rem, 0.65rem + 0.125vw, 0.75rem)",
|
|
1452
|
+
{ lineHeight: "1rem", letterSpacing: "0.05em" }
|
|
1453
|
+
],
|
|
1454
|
+
// Smaller
|
|
1455
|
+
sm: [
|
|
1456
|
+
"clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem)",
|
|
1457
|
+
{ lineHeight: "1.25rem", letterSpacing: "0.025em" }
|
|
1458
|
+
],
|
|
1459
|
+
// Smaller
|
|
1460
|
+
base: [
|
|
1461
|
+
"clamp(0.9375rem, 0.875rem + 0.25vw, 1rem)",
|
|
1462
|
+
{ lineHeight: "1.5rem", letterSpacing: "0em" }
|
|
1463
|
+
],
|
|
1464
|
+
// Smaller
|
|
1465
|
+
lg: [
|
|
1466
|
+
"clamp(1.0625rem, 0.95rem + 0.5vw, 1.125rem)",
|
|
1467
|
+
{ lineHeight: "1.75rem", letterSpacing: "-0.025em" }
|
|
1468
|
+
],
|
|
1469
|
+
// Smaller
|
|
1470
|
+
xl: [
|
|
1471
|
+
"clamp(1.1875rem, 1rem + 0.75vw, 1.375rem)",
|
|
1472
|
+
{ lineHeight: "1.75rem", letterSpacing: "-0.025em" }
|
|
1473
|
+
]
|
|
1474
|
+
// Smaller
|
|
1475
|
+
}
|
|
1476
|
+
},
|
|
1477
|
+
// Spacing overrides - compact spacing for tight layout
|
|
1478
|
+
spacing: {
|
|
1479
|
+
semanticSpacing: {
|
|
1480
|
+
xs: "0.125rem",
|
|
1481
|
+
// 2px (was 4px)
|
|
1482
|
+
sm: "0.25rem",
|
|
1483
|
+
// 4px (was 8px)
|
|
1484
|
+
md: "0.5rem",
|
|
1485
|
+
// 8px (was 16px)
|
|
1486
|
+
lg: "0.75rem",
|
|
1487
|
+
// 12px (was 24px)
|
|
1488
|
+
xl: "1rem",
|
|
1489
|
+
// 16px (was 32px)
|
|
1490
|
+
"2xl": "1.5rem"
|
|
1491
|
+
// 24px (was 48px)
|
|
1492
|
+
}
|
|
1493
|
+
},
|
|
1494
|
+
// Shadow overrides - subtle and minimal
|
|
1495
|
+
shadows: {
|
|
1496
|
+
elevationShadows: {
|
|
1497
|
+
xs: "0 1px 1px 0 rgb(0 0 0 / 0.03)",
|
|
1498
|
+
sm: "0 1px 2px 0 rgb(0 0 0 / 0.05), 0 1px 1px -1px rgb(0 0 0 / 0.05)",
|
|
1499
|
+
md: "0 2px 4px -1px rgb(0 0 0 / 0.05), 0 1px 2px -2px rgb(0 0 0 / 0.05)",
|
|
1500
|
+
lg: "0 4px 8px -2px rgb(0 0 0 / 0.05), 0 2px 4px -3px rgb(0 0 0 / 0.05)",
|
|
1501
|
+
xl: "0 8px 12px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05)"
|
|
1502
|
+
},
|
|
1503
|
+
glowEffects: {
|
|
1504
|
+
"glow-primary": "0 0 8px 0 hsl(0 0% 50% / 0.2)",
|
|
1505
|
+
"glow-primary-subtle": "0 0 4px 0 hsl(0 0% 50% / 0.15)",
|
|
1506
|
+
"glow-primary-medium": "0 0 8px 0 hsl(0 0% 50% / 0.25)",
|
|
1507
|
+
"glow-primary-strong": "0 0 12px 0 hsl(0 0% 50% / 0.3)"
|
|
1508
|
+
}
|
|
1509
|
+
},
|
|
1510
|
+
// Radius overrides - smaller, sharper corners
|
|
1511
|
+
radius: {
|
|
1512
|
+
borderRadius: {
|
|
1513
|
+
xs: "0.0625rem",
|
|
1514
|
+
// 1px
|
|
1515
|
+
sm: "0.125rem",
|
|
1516
|
+
// 2px (was 4px)
|
|
1517
|
+
md: "0.1875rem",
|
|
1518
|
+
// 3px (was 6px)
|
|
1519
|
+
lg: "0.25rem",
|
|
1520
|
+
// 4px (was 8px)
|
|
1521
|
+
xl: "0.375rem",
|
|
1522
|
+
// 6px (was 12px)
|
|
1523
|
+
"2xl": "0.5rem"
|
|
1524
|
+
// 8px (was 16px)
|
|
1525
|
+
},
|
|
1526
|
+
componentRadius: {
|
|
1527
|
+
button: {
|
|
1528
|
+
sm: "0.125rem",
|
|
1529
|
+
// 2px
|
|
1530
|
+
md: "0.1875rem",
|
|
1531
|
+
// 3px
|
|
1532
|
+
lg: "0.25rem"
|
|
1533
|
+
// 4px
|
|
1534
|
+
},
|
|
1535
|
+
card: {
|
|
1536
|
+
sm: "0.1875rem",
|
|
1537
|
+
// 3px
|
|
1538
|
+
md: "0.25rem",
|
|
1539
|
+
// 4px
|
|
1540
|
+
lg: "0.375rem",
|
|
1541
|
+
// 6px
|
|
1542
|
+
xl: "0.5rem"
|
|
1543
|
+
// 8px
|
|
1544
|
+
},
|
|
1545
|
+
input: {
|
|
1546
|
+
sm: "0.125rem",
|
|
1547
|
+
// 2px
|
|
1548
|
+
md: "0.1875rem",
|
|
1549
|
+
// 3px
|
|
1550
|
+
lg: "0.25rem"
|
|
1551
|
+
// 4px
|
|
1552
|
+
},
|
|
1553
|
+
badge: {
|
|
1554
|
+
sm: "0.0625rem",
|
|
1555
|
+
// 1px
|
|
1556
|
+
md: "0.125rem",
|
|
1557
|
+
// 2px
|
|
1558
|
+
lg: "0.1875rem"
|
|
1559
|
+
// 3px
|
|
1560
|
+
}
|
|
1561
|
+
}
|
|
1562
|
+
}
|
|
1563
|
+
}
|
|
1564
|
+
},
|
|
1565
|
+
{
|
|
1566
|
+
id: "minimal-night",
|
|
1567
|
+
name: "Minimal Night",
|
|
1568
|
+
description: "Dark minimal theme with muted grayscale colors",
|
|
1569
|
+
mode: "night",
|
|
1570
|
+
overrides: {
|
|
1571
|
+
name: "minimal-night",
|
|
1572
|
+
description: "Dark minimal theme for night mode",
|
|
1573
|
+
// Muted colors for night mode (slightly lighter than day for contrast)
|
|
1574
|
+
primaryColors: {
|
|
1575
|
+
400: "0 0% 65%",
|
|
1576
|
+
// Lighter gray for night
|
|
1577
|
+
500: "0 0% 55%",
|
|
1578
|
+
// Neutral gray
|
|
1579
|
+
600: "0 0% 45%",
|
|
1580
|
+
700: "0 0% 35%"
|
|
1581
|
+
},
|
|
1582
|
+
accentColors: {
|
|
1583
|
+
400: "210 20% 75%",
|
|
1584
|
+
// Lighter blue-gray
|
|
1585
|
+
500: "210 20% 65%",
|
|
1586
|
+
// Subtle blue-gray
|
|
1587
|
+
600: "210 20% 55%",
|
|
1588
|
+
700: "210 20% 45%"
|
|
1589
|
+
},
|
|
1590
|
+
secondaryColors: {
|
|
1591
|
+
400: "0 0% 75%",
|
|
1592
|
+
// Light gray
|
|
1593
|
+
500: "0 0% 70%",
|
|
1594
|
+
// Neutral light gray
|
|
1595
|
+
600: "0 0% 60%",
|
|
1596
|
+
700: "0 0% 50%"
|
|
1597
|
+
},
|
|
1598
|
+
// Darker base colors for night mode
|
|
1599
|
+
baseColorsNight: {
|
|
1600
|
+
background: "240 10% 8%",
|
|
1601
|
+
// Dark gray background
|
|
1602
|
+
foreground: "0 0% 95%",
|
|
1603
|
+
card: "240 10% 10%",
|
|
1604
|
+
cardForeground: "0 0% 95%"
|
|
1605
|
+
},
|
|
1606
|
+
surfaceColorsNight: {
|
|
1607
|
+
base: "240 10% 8%",
|
|
1608
|
+
elevated1: "240 10% 10%",
|
|
1609
|
+
elevated2: "240 10% 12%",
|
|
1610
|
+
elevated3: "240 10% 14%"
|
|
1611
|
+
},
|
|
1612
|
+
// Subtle semantic colors for night
|
|
1613
|
+
semanticColorsNight: {
|
|
1614
|
+
success: "140 30% 50%",
|
|
1615
|
+
// Muted green
|
|
1616
|
+
info: "210 30% 55%",
|
|
1617
|
+
// Muted blue
|
|
1618
|
+
warning: "40 30% 55%",
|
|
1619
|
+
// Muted orange
|
|
1620
|
+
error: "0 40% 60%"
|
|
1621
|
+
// Muted red
|
|
1622
|
+
},
|
|
1623
|
+
// Typography overrides - same as day
|
|
1624
|
+
typography: {
|
|
1625
|
+
fontWeight: {
|
|
1626
|
+
normal: "400",
|
|
1627
|
+
medium: "500",
|
|
1628
|
+
semibold: "600",
|
|
1629
|
+
bold: "700"
|
|
1630
|
+
},
|
|
1631
|
+
fontSize: {
|
|
1632
|
+
xs: [
|
|
1633
|
+
"clamp(0.6875rem, 0.65rem + 0.125vw, 0.75rem)",
|
|
1634
|
+
{ lineHeight: "1rem", letterSpacing: "0.05em" }
|
|
1635
|
+
],
|
|
1636
|
+
sm: [
|
|
1637
|
+
"clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem)",
|
|
1638
|
+
{ lineHeight: "1.25rem", letterSpacing: "0.025em" }
|
|
1639
|
+
],
|
|
1640
|
+
base: [
|
|
1641
|
+
"clamp(0.9375rem, 0.875rem + 0.25vw, 1rem)",
|
|
1642
|
+
{ lineHeight: "1.5rem", letterSpacing: "0em" }
|
|
1643
|
+
],
|
|
1644
|
+
lg: [
|
|
1645
|
+
"clamp(1.0625rem, 0.95rem + 0.5vw, 1.125rem)",
|
|
1646
|
+
{ lineHeight: "1.75rem", letterSpacing: "-0.025em" }
|
|
1647
|
+
],
|
|
1648
|
+
xl: [
|
|
1649
|
+
"clamp(1.1875rem, 1rem + 0.75vw, 1.375rem)",
|
|
1650
|
+
{ lineHeight: "1.75rem", letterSpacing: "-0.025em" }
|
|
1651
|
+
]
|
|
1652
|
+
}
|
|
1653
|
+
},
|
|
1654
|
+
// Spacing overrides - same as day
|
|
1655
|
+
spacing: {
|
|
1656
|
+
semanticSpacing: {
|
|
1657
|
+
xs: "0.125rem",
|
|
1658
|
+
sm: "0.25rem",
|
|
1659
|
+
md: "0.5rem",
|
|
1660
|
+
lg: "0.75rem",
|
|
1661
|
+
xl: "1rem",
|
|
1662
|
+
"2xl": "1.5rem"
|
|
1663
|
+
}
|
|
1664
|
+
},
|
|
1665
|
+
// Shadow overrides - subtle for night
|
|
1666
|
+
shadows: {
|
|
1667
|
+
elevationShadows: {
|
|
1668
|
+
xs: "0 1px 2px 0 rgb(0 0 0 / 0.15)",
|
|
1669
|
+
sm: "0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2)",
|
|
1670
|
+
md: "0 2px 5px -1px rgb(0 0 0 / 0.2), 0 1px 3px -2px rgb(0 0 0 / 0.2)",
|
|
1671
|
+
lg: "0 4px 10px -2px rgb(0 0 0 / 0.2), 0 2px 5px -3px rgb(0 0 0 / 0.2)",
|
|
1672
|
+
xl: "0 8px 15px -3px rgb(0 0 0 / 0.2), 0 4px 8px -4px rgb(0 0 0 / 0.2)"
|
|
1673
|
+
},
|
|
1674
|
+
glowEffects: {
|
|
1675
|
+
"glow-primary": "0 0 8px 0 hsl(0 0% 55% / 0.25)",
|
|
1676
|
+
"glow-primary-subtle": "0 0 4px 0 hsl(0 0% 55% / 0.2)",
|
|
1677
|
+
"glow-primary-medium": "0 0 8px 0 hsl(0 0% 55% / 0.3)",
|
|
1678
|
+
"glow-primary-strong": "0 0 12px 0 hsl(0 0% 55% / 0.35)"
|
|
1679
|
+
}
|
|
1680
|
+
},
|
|
1681
|
+
// Radius overrides - same as day
|
|
1682
|
+
radius: {
|
|
1683
|
+
borderRadius: {
|
|
1684
|
+
xs: "0.0625rem",
|
|
1685
|
+
sm: "0.125rem",
|
|
1686
|
+
md: "0.1875rem",
|
|
1687
|
+
lg: "0.25rem",
|
|
1688
|
+
xl: "0.375rem",
|
|
1689
|
+
"2xl": "0.5rem"
|
|
1690
|
+
},
|
|
1691
|
+
componentRadius: {
|
|
1692
|
+
button: {
|
|
1693
|
+
sm: "0.125rem",
|
|
1694
|
+
md: "0.1875rem",
|
|
1695
|
+
lg: "0.25rem"
|
|
1696
|
+
},
|
|
1697
|
+
card: {
|
|
1698
|
+
sm: "0.1875rem",
|
|
1699
|
+
md: "0.25rem",
|
|
1700
|
+
lg: "0.375rem",
|
|
1701
|
+
xl: "0.5rem"
|
|
1702
|
+
},
|
|
1703
|
+
input: {
|
|
1704
|
+
sm: "0.125rem",
|
|
1705
|
+
md: "0.1875rem",
|
|
1706
|
+
lg: "0.25rem"
|
|
1707
|
+
},
|
|
1708
|
+
badge: {
|
|
1709
|
+
sm: "0.0625rem",
|
|
1710
|
+
md: "0.125rem",
|
|
1711
|
+
lg: "0.1875rem"
|
|
1712
|
+
}
|
|
1713
|
+
}
|
|
1714
|
+
}
|
|
1715
|
+
}
|
|
1716
|
+
}
|
|
1717
|
+
]
|
|
1718
|
+
};
|
|
1719
|
+
|
|
1720
|
+
// src/themes/neon.ts
|
|
1721
|
+
var neonBrand = {
|
|
1722
|
+
id: "neon",
|
|
1723
|
+
name: "Neon",
|
|
1724
|
+
description: "Vibrant brand theme with high-saturation neon colors, bold typography, and enhanced visual effects",
|
|
1725
|
+
namespace: "neon",
|
|
1726
|
+
version: "1.0.0",
|
|
1727
|
+
author: "Tenerife UI",
|
|
1728
|
+
themes: [
|
|
1729
|
+
{
|
|
1730
|
+
id: "neon-day",
|
|
1731
|
+
name: "Neon Day",
|
|
1732
|
+
description: "Bright neon theme for day mode with vibrant cyan, magenta, and yellow accents",
|
|
1733
|
+
mode: "day",
|
|
1734
|
+
overrides: {
|
|
1735
|
+
name: "neon-day",
|
|
1736
|
+
description: "Bright neon theme for day mode",
|
|
1737
|
+
// Vibrant neon color overrides
|
|
1738
|
+
primaryColors: {
|
|
1739
|
+
400: "180 100% 50%",
|
|
1740
|
+
// Bright cyan
|
|
1741
|
+
500: "180 100% 45%",
|
|
1742
|
+
// Vibrant cyan (#00e6ff)
|
|
1743
|
+
600: "180 95% 40%",
|
|
1744
|
+
700: "180 90% 35%"
|
|
1745
|
+
},
|
|
1746
|
+
accentColors: {
|
|
1747
|
+
400: "320 100% 60%",
|
|
1748
|
+
// Bright magenta
|
|
1749
|
+
500: "320 100% 55%",
|
|
1750
|
+
// Vibrant magenta (#ff00cc)
|
|
1751
|
+
600: "320 95% 50%",
|
|
1752
|
+
700: "320 90% 45%"
|
|
1753
|
+
},
|
|
1754
|
+
secondaryColors: {
|
|
1755
|
+
400: "60 100% 60%",
|
|
1756
|
+
// Bright yellow
|
|
1757
|
+
500: "60 100% 55%",
|
|
1758
|
+
// Vibrant yellow (#ffff00)
|
|
1759
|
+
600: "60 95% 50%",
|
|
1760
|
+
700: "60 90% 45%"
|
|
1761
|
+
},
|
|
1762
|
+
// Enhanced base colors for day mode
|
|
1763
|
+
baseColorsDay: {
|
|
1764
|
+
primary: "180 100% 45%",
|
|
1765
|
+
// Neon cyan
|
|
1766
|
+
primaryForeground: "0 0% 100%",
|
|
1767
|
+
accent: "320 100% 55%",
|
|
1768
|
+
// Neon magenta
|
|
1769
|
+
accentForeground: "0 0% 100%"
|
|
1770
|
+
},
|
|
1771
|
+
// Semantic colors with neon accents
|
|
1772
|
+
semanticColorsDay: {
|
|
1773
|
+
success: "145 80% 45%",
|
|
1774
|
+
// Neon green
|
|
1775
|
+
info: "180 100% 45%",
|
|
1776
|
+
// Neon cyan
|
|
1777
|
+
warning: "60 100% 55%",
|
|
1778
|
+
// Neon yellow
|
|
1779
|
+
error: "0 100% 60%"
|
|
1780
|
+
// Bright red
|
|
1781
|
+
},
|
|
1782
|
+
// Typography overrides - bolder and larger
|
|
1783
|
+
typography: {
|
|
1784
|
+
fontWeight: {
|
|
1785
|
+
normal: "500",
|
|
1786
|
+
// Heavier than default (400)
|
|
1787
|
+
medium: "600",
|
|
1788
|
+
// Heavier
|
|
1789
|
+
semibold: "700",
|
|
1790
|
+
// Bold
|
|
1791
|
+
bold: "800"
|
|
1792
|
+
// Extra bold
|
|
1793
|
+
},
|
|
1794
|
+
fontSize: {
|
|
1795
|
+
xs: [
|
|
1796
|
+
"clamp(0.875rem, 0.8rem + 0.25vw, 1rem)",
|
|
1797
|
+
{ lineHeight: "1.25rem", letterSpacing: "0.025em" }
|
|
1798
|
+
],
|
|
1799
|
+
// Larger than default
|
|
1800
|
+
sm: [
|
|
1801
|
+
"clamp(1rem, 0.95rem + 0.25vw, 1.125rem)",
|
|
1802
|
+
{ lineHeight: "1.5rem", letterSpacing: "0em" }
|
|
1803
|
+
],
|
|
1804
|
+
// Larger
|
|
1805
|
+
base: [
|
|
1806
|
+
"clamp(1.125rem, 1rem + 0.5vw, 1.25rem)",
|
|
1807
|
+
{ lineHeight: "1.75rem", letterSpacing: "-0.025em" }
|
|
1808
|
+
],
|
|
1809
|
+
// Larger
|
|
1810
|
+
lg: [
|
|
1811
|
+
"clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)",
|
|
1812
|
+
{ lineHeight: "1.75rem", letterSpacing: "-0.025em" }
|
|
1813
|
+
],
|
|
1814
|
+
// Larger
|
|
1815
|
+
xl: [
|
|
1816
|
+
"clamp(1.5rem, 1.25rem + 1.25vw, 2rem)",
|
|
1817
|
+
{ lineHeight: "2rem", letterSpacing: "-0.05em" }
|
|
1818
|
+
]
|
|
1819
|
+
// Larger
|
|
1820
|
+
}
|
|
1821
|
+
},
|
|
1822
|
+
// Spacing overrides - larger spacing for breathing room
|
|
1823
|
+
spacing: {
|
|
1824
|
+
semanticSpacing: {
|
|
1825
|
+
xs: "0.5rem",
|
|
1826
|
+
// 8px (was 4px)
|
|
1827
|
+
sm: "1rem",
|
|
1828
|
+
// 16px (was 8px)
|
|
1829
|
+
md: "1.5rem",
|
|
1830
|
+
// 24px (was 16px)
|
|
1831
|
+
lg: "2rem",
|
|
1832
|
+
// 32px (was 24px)
|
|
1833
|
+
xl: "3rem",
|
|
1834
|
+
// 48px (was 32px)
|
|
1835
|
+
"2xl": "4rem"
|
|
1836
|
+
// 64px (was 48px)
|
|
1837
|
+
}
|
|
1838
|
+
},
|
|
1839
|
+
// Shadow overrides - stronger and more prominent
|
|
1840
|
+
shadows: {
|
|
1841
|
+
elevationShadows: {
|
|
1842
|
+
xs: "0 2px 4px 0 rgb(0 0 0 / 0.1)",
|
|
1843
|
+
sm: "0 2px 6px 0 rgb(0 0 0 / 0.15), 0 2px 4px -1px rgb(0 0 0 / 0.15)",
|
|
1844
|
+
md: "0 6px 10px -1px rgb(0 0 0 / 0.15), 0 4px 6px -2px rgb(0 0 0 / 0.15)",
|
|
1845
|
+
lg: "0 12px 20px -3px rgb(0 0 0 / 0.15), 0 6px 10px -4px rgb(0 0 0 / 0.15)",
|
|
1846
|
+
xl: "0 24px 32px -5px rgb(0 0 0 / 0.15), 0 10px 14px -6px rgb(0 0 0 / 0.15)"
|
|
1847
|
+
},
|
|
1848
|
+
glowEffects: {
|
|
1849
|
+
"glow-primary": "0 0 30px 0 hsl(180 100% 45% / 0.7), 0 0 60px 0 hsl(180 100% 45% / 0.4)",
|
|
1850
|
+
"glow-primary-subtle": "0 0 12px 0 hsl(180 100% 45% / 0.5)",
|
|
1851
|
+
"glow-primary-medium": "0 0 24px 0 hsl(180 100% 45% / 0.7)",
|
|
1852
|
+
"glow-primary-strong": "0 0 36px 0 hsl(180 100% 45% / 0.8)",
|
|
1853
|
+
"glow-accent": "0 0 30px 0 hsl(320 100% 55% / 0.7), 0 0 60px 0 hsl(320 100% 55% / 0.4)",
|
|
1854
|
+
"glow-accent-subtle": "0 0 12px 0 hsl(320 100% 55% / 0.5)",
|
|
1855
|
+
"glow-accent-medium": "0 0 24px 0 hsl(320 100% 55% / 0.7)",
|
|
1856
|
+
"glow-accent-strong": "0 0 36px 0 hsl(320 100% 55% / 0.8)"
|
|
1857
|
+
}
|
|
1858
|
+
},
|
|
1859
|
+
// Radius overrides - more rounded corners
|
|
1860
|
+
radius: {
|
|
1861
|
+
borderRadius: {
|
|
1862
|
+
sm: "0.375rem",
|
|
1863
|
+
// 6px (was 4px)
|
|
1864
|
+
md: "0.5rem",
|
|
1865
|
+
// 8px (was 6px)
|
|
1866
|
+
lg: "0.75rem",
|
|
1867
|
+
// 12px (was 8px)
|
|
1868
|
+
xl: "1rem",
|
|
1869
|
+
// 16px (was 12px)
|
|
1870
|
+
"2xl": "1.5rem",
|
|
1871
|
+
// 24px (was 16px)
|
|
1872
|
+
"3xl": "2rem"
|
|
1873
|
+
// 32px (was 24px)
|
|
1874
|
+
},
|
|
1875
|
+
componentRadius: {
|
|
1876
|
+
button: {
|
|
1877
|
+
sm: "0.5rem",
|
|
1878
|
+
// 8px
|
|
1879
|
+
md: "0.75rem",
|
|
1880
|
+
// 12px
|
|
1881
|
+
lg: "1rem"
|
|
1882
|
+
// 16px
|
|
1883
|
+
},
|
|
1884
|
+
card: {
|
|
1885
|
+
sm: "0.75rem",
|
|
1886
|
+
// 12px
|
|
1887
|
+
md: "1rem",
|
|
1888
|
+
// 16px
|
|
1889
|
+
lg: "1.25rem",
|
|
1890
|
+
// 20px
|
|
1891
|
+
xl: "1.5rem"
|
|
1892
|
+
// 24px
|
|
1893
|
+
},
|
|
1894
|
+
input: {
|
|
1895
|
+
sm: "0.5rem",
|
|
1896
|
+
// 8px
|
|
1897
|
+
md: "0.75rem",
|
|
1898
|
+
// 12px
|
|
1899
|
+
lg: "1rem"
|
|
1900
|
+
// 16px
|
|
1901
|
+
},
|
|
1902
|
+
badge: {
|
|
1903
|
+
sm: "0.375rem",
|
|
1904
|
+
// 6px
|
|
1905
|
+
md: "0.5rem",
|
|
1906
|
+
// 8px
|
|
1907
|
+
lg: "0.75rem"
|
|
1908
|
+
// 12px
|
|
1909
|
+
}
|
|
1910
|
+
}
|
|
1911
|
+
}
|
|
1912
|
+
}
|
|
1913
|
+
},
|
|
1914
|
+
{
|
|
1915
|
+
id: "neon-night",
|
|
1916
|
+
name: "Neon Night",
|
|
1917
|
+
description: "Dark neon theme for night mode with glowing neon accents on dark backgrounds",
|
|
1918
|
+
mode: "night",
|
|
1919
|
+
overrides: {
|
|
1920
|
+
name: "neon-night",
|
|
1921
|
+
description: "Dark neon theme for night mode",
|
|
1922
|
+
// Vibrant neon color overrides (same as day but with different base)
|
|
1923
|
+
primaryColors: {
|
|
1924
|
+
400: "180 100% 55%",
|
|
1925
|
+
// Brighter cyan for night
|
|
1926
|
+
500: "180 100% 50%",
|
|
1927
|
+
// Vibrant cyan
|
|
1928
|
+
600: "180 95% 45%",
|
|
1929
|
+
700: "180 90% 40%"
|
|
1930
|
+
},
|
|
1931
|
+
accentColors: {
|
|
1932
|
+
400: "320 100% 65%",
|
|
1933
|
+
// Brighter magenta for night
|
|
1934
|
+
500: "320 100% 60%",
|
|
1935
|
+
// Vibrant magenta
|
|
1936
|
+
600: "320 95% 55%",
|
|
1937
|
+
700: "320 90% 50%"
|
|
1938
|
+
},
|
|
1939
|
+
secondaryColors: {
|
|
1940
|
+
400: "60 100% 65%",
|
|
1941
|
+
// Brighter yellow for night
|
|
1942
|
+
500: "60 100% 60%",
|
|
1943
|
+
// Vibrant yellow
|
|
1944
|
+
600: "60 95% 55%",
|
|
1945
|
+
700: "60 90% 50%"
|
|
1946
|
+
},
|
|
1947
|
+
// Darker base colors for night mode
|
|
1948
|
+
baseColorsNight: {
|
|
1949
|
+
background: "240 10% 5%",
|
|
1950
|
+
// Very dark background
|
|
1951
|
+
foreground: "0 0% 98%",
|
|
1952
|
+
card: "240 10% 6%",
|
|
1953
|
+
cardForeground: "0 0% 98%"
|
|
1954
|
+
},
|
|
1955
|
+
surfaceColorsNight: {
|
|
1956
|
+
base: "240 10% 5%",
|
|
1957
|
+
// Very dark
|
|
1958
|
+
elevated1: "240 10% 7%",
|
|
1959
|
+
elevated2: "240 10% 9%",
|
|
1960
|
+
elevated3: "240 10% 11%"
|
|
1961
|
+
},
|
|
1962
|
+
// Semantic colors with neon accents for night
|
|
1963
|
+
semanticColorsNight: {
|
|
1964
|
+
success: "145 75% 50%",
|
|
1965
|
+
// Neon green
|
|
1966
|
+
info: "180 100% 50%",
|
|
1967
|
+
// Neon cyan
|
|
1968
|
+
warning: "60 100% 60%",
|
|
1969
|
+
// Neon yellow
|
|
1970
|
+
error: "0 100% 65%"
|
|
1971
|
+
// Bright red
|
|
1972
|
+
},
|
|
1973
|
+
// Typography overrides - same as day
|
|
1974
|
+
typography: {
|
|
1975
|
+
fontWeight: {
|
|
1976
|
+
normal: "500",
|
|
1977
|
+
medium: "600",
|
|
1978
|
+
semibold: "700",
|
|
1979
|
+
bold: "800"
|
|
1980
|
+
},
|
|
1981
|
+
fontSize: {
|
|
1982
|
+
xs: [
|
|
1983
|
+
"clamp(0.875rem, 0.8rem + 0.25vw, 1rem)",
|
|
1984
|
+
{ lineHeight: "1.25rem", letterSpacing: "0.025em" }
|
|
1985
|
+
],
|
|
1986
|
+
sm: [
|
|
1987
|
+
"clamp(1rem, 0.95rem + 0.25vw, 1.125rem)",
|
|
1988
|
+
{ lineHeight: "1.5rem", letterSpacing: "0em" }
|
|
1989
|
+
],
|
|
1990
|
+
base: [
|
|
1991
|
+
"clamp(1.125rem, 1rem + 0.5vw, 1.25rem)",
|
|
1992
|
+
{ lineHeight: "1.75rem", letterSpacing: "-0.025em" }
|
|
1993
|
+
],
|
|
1994
|
+
lg: [
|
|
1995
|
+
"clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)",
|
|
1996
|
+
{ lineHeight: "1.75rem", letterSpacing: "-0.025em" }
|
|
1997
|
+
],
|
|
1998
|
+
xl: [
|
|
1999
|
+
"clamp(1.5rem, 1.25rem + 1.25vw, 2rem)",
|
|
2000
|
+
{ lineHeight: "2rem", letterSpacing: "-0.05em" }
|
|
2001
|
+
]
|
|
2002
|
+
}
|
|
2003
|
+
},
|
|
2004
|
+
// Spacing overrides - same as day
|
|
2005
|
+
spacing: {
|
|
2006
|
+
semanticSpacing: {
|
|
2007
|
+
xs: "0.5rem",
|
|
2008
|
+
sm: "1rem",
|
|
2009
|
+
md: "1.5rem",
|
|
2010
|
+
lg: "2rem",
|
|
2011
|
+
xl: "3rem",
|
|
2012
|
+
"2xl": "4rem"
|
|
2013
|
+
}
|
|
2014
|
+
},
|
|
2015
|
+
// Shadow overrides - even stronger glow for night
|
|
2016
|
+
shadows: {
|
|
2017
|
+
elevationShadows: {
|
|
2018
|
+
xs: "0 2px 4px 0 rgb(0 0 0 / 0.2)",
|
|
2019
|
+
sm: "0 2px 6px 0 rgb(0 0 0 / 0.25), 0 2px 4px -1px rgb(0 0 0 / 0.25)",
|
|
2020
|
+
md: "0 6px 10px -1px rgb(0 0 0 / 0.25), 0 4px 6px -2px rgb(0 0 0 / 0.25)",
|
|
2021
|
+
lg: "0 12px 20px -3px rgb(0 0 0 / 0.25), 0 6px 10px -4px rgb(0 0 0 / 0.25)",
|
|
2022
|
+
xl: "0 24px 32px -5px rgb(0 0 0 / 0.25), 0 10px 14px -6px rgb(0 0 0 / 0.25)"
|
|
2023
|
+
},
|
|
2024
|
+
glowEffects: {
|
|
2025
|
+
"glow-primary": "0 0 40px 0 hsl(180 100% 50% / 0.8), 0 0 80px 0 hsl(180 100% 50% / 0.5)",
|
|
2026
|
+
"glow-primary-subtle": "0 0 16px 0 hsl(180 100% 50% / 0.6)",
|
|
2027
|
+
"glow-primary-medium": "0 0 32px 0 hsl(180 100% 50% / 0.8)",
|
|
2028
|
+
"glow-primary-strong": "0 0 48px 0 hsl(180 100% 50% / 0.9)",
|
|
2029
|
+
"glow-accent": "0 0 40px 0 hsl(320 100% 60% / 0.8), 0 0 80px 0 hsl(320 100% 60% / 0.5)",
|
|
2030
|
+
"glow-accent-subtle": "0 0 16px 0 hsl(320 100% 60% / 0.6)",
|
|
2031
|
+
"glow-accent-medium": "0 0 32px 0 hsl(320 100% 60% / 0.8)",
|
|
2032
|
+
"glow-accent-strong": "0 0 48px 0 hsl(320 100% 60% / 0.9)"
|
|
2033
|
+
}
|
|
2034
|
+
},
|
|
2035
|
+
// Radius overrides - same as day
|
|
2036
|
+
radius: {
|
|
2037
|
+
borderRadius: {
|
|
2038
|
+
sm: "0.375rem",
|
|
2039
|
+
md: "0.5rem",
|
|
2040
|
+
lg: "0.75rem",
|
|
2041
|
+
xl: "1rem",
|
|
2042
|
+
"2xl": "1.5rem",
|
|
2043
|
+
"3xl": "2rem"
|
|
2044
|
+
},
|
|
2045
|
+
componentRadius: {
|
|
2046
|
+
button: {
|
|
2047
|
+
sm: "0.5rem",
|
|
2048
|
+
md: "0.75rem",
|
|
2049
|
+
lg: "1rem"
|
|
2050
|
+
},
|
|
2051
|
+
card: {
|
|
2052
|
+
sm: "0.75rem",
|
|
2053
|
+
md: "1rem",
|
|
2054
|
+
lg: "1.25rem",
|
|
2055
|
+
xl: "1.5rem"
|
|
2056
|
+
},
|
|
2057
|
+
input: {
|
|
2058
|
+
sm: "0.5rem",
|
|
2059
|
+
md: "0.75rem",
|
|
2060
|
+
lg: "1rem"
|
|
2061
|
+
},
|
|
2062
|
+
badge: {
|
|
2063
|
+
sm: "0.375rem",
|
|
2064
|
+
md: "0.5rem",
|
|
2065
|
+
lg: "0.75rem"
|
|
2066
|
+
}
|
|
2067
|
+
}
|
|
2068
|
+
}
|
|
2069
|
+
}
|
|
2070
|
+
}
|
|
2071
|
+
]
|
|
2319
2072
|
};
|
|
2320
|
-
|
|
2321
|
-
|
|
2322
|
-
|
|
2323
|
-
|
|
2324
|
-
|
|
2325
|
-
|
|
2326
|
-
|
|
2327
|
-
|
|
2328
|
-
|
|
2329
|
-
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
|
|
2340
|
-
|
|
2341
|
-
|
|
2342
|
-
|
|
2343
|
-
|
|
2344
|
-
|
|
2345
|
-
|
|
2346
|
-
|
|
2347
|
-
|
|
2348
|
-
|
|
2349
|
-
|
|
2350
|
-
|
|
2351
|
-
|
|
2352
|
-
|
|
2353
|
-
({
|
|
2354
|
-
|
|
2355
|
-
|
|
2356
|
-
|
|
2357
|
-
|
|
2358
|
-
|
|
2359
|
-
|
|
2360
|
-
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
|
|
2364
|
-
|
|
2365
|
-
|
|
2366
|
-
|
|
2367
|
-
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
|
|
2372
|
-
|
|
2373
|
-
|
|
2374
|
-
|
|
2375
|
-
|
|
2376
|
-
|
|
2377
|
-
|
|
2378
|
-
|
|
2379
|
-
|
|
2380
|
-
|
|
2381
|
-
|
|
2382
|
-
|
|
2383
|
-
|
|
2073
|
+
|
|
2074
|
+
// src/themes/brand_engine.ts
|
|
2075
|
+
var brandRegistry = /* @__PURE__ */ new Map();
|
|
2076
|
+
var activeBrand = null;
|
|
2077
|
+
var activeNamespace = null;
|
|
2078
|
+
var brandCache = /* @__PURE__ */ new Map();
|
|
2079
|
+
function validateBrand(brand) {
|
|
2080
|
+
const errors = [];
|
|
2081
|
+
const warnings = [];
|
|
2082
|
+
if (!brand || typeof brand !== "object") {
|
|
2083
|
+
return {
|
|
2084
|
+
valid: false,
|
|
2085
|
+
errors: ["Brand must be an object"],
|
|
2086
|
+
warnings: []
|
|
2087
|
+
};
|
|
2088
|
+
}
|
|
2089
|
+
const brandObj = brand;
|
|
2090
|
+
const requiredFields = ["id", "name", "namespace"];
|
|
2091
|
+
for (const field of requiredFields) {
|
|
2092
|
+
if (!(field in brandObj) || !brandObj[field]) {
|
|
2093
|
+
errors.push(`Missing required field: ${field}`);
|
|
2094
|
+
}
|
|
2095
|
+
}
|
|
2096
|
+
if (brandObj.id && typeof brandObj.id === "string") {
|
|
2097
|
+
const idRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
|
|
2098
|
+
if (!idRegex.test(brandObj.id)) {
|
|
2099
|
+
errors.push(
|
|
2100
|
+
`Invalid brand ID format: "${brandObj.id}". Must be kebab-case (e.g., "neon-brand")`
|
|
2101
|
+
);
|
|
2102
|
+
}
|
|
2103
|
+
}
|
|
2104
|
+
if (brandObj.namespace && typeof brandObj.namespace === "string") {
|
|
2105
|
+
const namespaceRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
|
|
2106
|
+
if (!namespaceRegex.test(brandObj.namespace)) {
|
|
2107
|
+
errors.push(
|
|
2108
|
+
`Invalid namespace format: "${brandObj.namespace}". Must be kebab-case (e.g., "neon")`
|
|
2109
|
+
);
|
|
2110
|
+
}
|
|
2111
|
+
}
|
|
2112
|
+
if (brandObj.themes) {
|
|
2113
|
+
if (!Array.isArray(brandObj.themes)) {
|
|
2114
|
+
errors.push("Brand themes must be an array");
|
|
2115
|
+
} else {
|
|
2116
|
+
const themes2 = brandObj.themes;
|
|
2117
|
+
if (themes2.length === 0) {
|
|
2118
|
+
warnings.push("Brand has no themes defined");
|
|
2119
|
+
}
|
|
2120
|
+
themes2.forEach((theme, index) => {
|
|
2121
|
+
if (!theme || typeof theme !== "object") {
|
|
2122
|
+
errors.push(`Theme at index ${index} must be an object`);
|
|
2123
|
+
return;
|
|
2124
|
+
}
|
|
2125
|
+
const themeObj = theme;
|
|
2126
|
+
if (!themeObj.id || typeof themeObj.id !== "string") {
|
|
2127
|
+
errors.push(`Theme at index ${index} is missing required field: id`);
|
|
2128
|
+
}
|
|
2129
|
+
if (!themeObj.name || typeof themeObj.name !== "string") {
|
|
2130
|
+
errors.push(`Theme at index ${index} is missing required field: name`);
|
|
2131
|
+
}
|
|
2132
|
+
if (!themeObj.mode || !["day", "night"].includes(themeObj.mode)) {
|
|
2133
|
+
errors.push(`Theme at index ${index} must have mode set to "day" or "night"`);
|
|
2134
|
+
}
|
|
2135
|
+
if (!themeObj.overrides || typeof themeObj.overrides !== "object") {
|
|
2136
|
+
errors.push(`Theme at index ${index} is missing required field: overrides`);
|
|
2137
|
+
}
|
|
2138
|
+
});
|
|
2139
|
+
}
|
|
2140
|
+
} else {
|
|
2141
|
+
errors.push("Brand must have at least one theme");
|
|
2142
|
+
}
|
|
2143
|
+
if (brandObj.version && typeof brandObj.version === "string") {
|
|
2144
|
+
const semverRegex = /^\d+\.\d+\.\d+$/;
|
|
2145
|
+
if (!semverRegex.test(brandObj.version)) {
|
|
2146
|
+
warnings.push(
|
|
2147
|
+
`Invalid version format: "${brandObj.version}". Should be semver (e.g., "1.0.0")`
|
|
2148
|
+
);
|
|
2149
|
+
}
|
|
2150
|
+
}
|
|
2151
|
+
if (brandObj.themes && Array.isArray(brandObj.themes)) {
|
|
2152
|
+
const themeIds = brandObj.themes.map(
|
|
2153
|
+
(theme) => theme?.id
|
|
2154
|
+
);
|
|
2155
|
+
const uniqueIds = new Set(themeIds);
|
|
2156
|
+
if (themeIds.length !== uniqueIds.size) {
|
|
2157
|
+
errors.push("Brand contains duplicate theme IDs");
|
|
2158
|
+
}
|
|
2159
|
+
}
|
|
2160
|
+
return {
|
|
2161
|
+
valid: errors.length === 0,
|
|
2162
|
+
errors,
|
|
2163
|
+
warnings
|
|
2164
|
+
};
|
|
2165
|
+
}
|
|
2166
|
+
function registerBrand(brand, options) {
|
|
2167
|
+
const validation = validateBrand(brand);
|
|
2168
|
+
if (!validation.valid) {
|
|
2169
|
+
throw new Error(`Invalid brand "${brand.id}": ${validation.errors.join(", ")}`);
|
|
2170
|
+
}
|
|
2171
|
+
if (validation.warnings.length > 0) {
|
|
2172
|
+
console.warn(`Brand "${brand.id}" validation warnings:`, validation.warnings.join(", "));
|
|
2173
|
+
}
|
|
2174
|
+
const existingEntry = brandRegistry.get(brand.id);
|
|
2175
|
+
if (existingEntry && existingEntry.brand.namespace === brand.namespace) {
|
|
2176
|
+
return;
|
|
2177
|
+
}
|
|
2178
|
+
if (brandRegistry.has(brand.id)) {
|
|
2179
|
+
throw new Error(`Brand "${brand.id}" is already registered`);
|
|
2180
|
+
}
|
|
2181
|
+
const existingBrand = Array.from(brandRegistry.values()).find(
|
|
2182
|
+
(entry) => entry.brand.namespace === brand.namespace
|
|
2183
|
+
);
|
|
2184
|
+
if (existingBrand) {
|
|
2185
|
+
throw new Error(
|
|
2186
|
+
`Brand namespace "${brand.namespace}" is already used by brand "${existingBrand.brand.id}"`
|
|
2187
|
+
);
|
|
2188
|
+
}
|
|
2189
|
+
brandRegistry.set(brand.id, {
|
|
2190
|
+
brand,
|
|
2191
|
+
enabled: options?.enabled !== false,
|
|
2192
|
+
loader: options?.loader
|
|
2193
|
+
});
|
|
2194
|
+
}
|
|
2195
|
+
async function loadBrand(brandId) {
|
|
2196
|
+
if (brandCache.has(brandId)) {
|
|
2197
|
+
return brandCache.get(brandId);
|
|
2198
|
+
}
|
|
2199
|
+
const entry = brandRegistry.get(brandId);
|
|
2200
|
+
if (!entry) {
|
|
2201
|
+
throw new Error(`Brand "${brandId}" not found in registry`);
|
|
2202
|
+
}
|
|
2203
|
+
if (entry.enabled === false) {
|
|
2204
|
+
throw new Error(`Brand "${brandId}" is disabled`);
|
|
2205
|
+
}
|
|
2206
|
+
if (entry.loader) {
|
|
2207
|
+
try {
|
|
2208
|
+
const module = await entry.loader();
|
|
2209
|
+
const loadedBrand = module.default;
|
|
2210
|
+
const validation = validateBrand(loadedBrand);
|
|
2211
|
+
if (!validation.valid) {
|
|
2212
|
+
throw new Error(`Invalid loaded brand "${brandId}": ${validation.errors.join(", ")}`);
|
|
2213
|
+
}
|
|
2214
|
+
brandCache.set(brandId, loadedBrand);
|
|
2215
|
+
return loadedBrand;
|
|
2216
|
+
} catch (error) {
|
|
2217
|
+
throw new Error(
|
|
2218
|
+
`Failed to load brand "${brandId}": ${error instanceof Error ? error.message : String(error)}`
|
|
2219
|
+
);
|
|
2220
|
+
}
|
|
2221
|
+
}
|
|
2222
|
+
brandCache.set(brandId, entry.brand);
|
|
2223
|
+
return entry.brand;
|
|
2224
|
+
}
|
|
2225
|
+
function getActiveBrand() {
|
|
2226
|
+
return activeBrand;
|
|
2227
|
+
}
|
|
2228
|
+
function setActiveBrand(brand) {
|
|
2229
|
+
activeBrand = brand;
|
|
2230
|
+
activeNamespace = brand?.namespace || null;
|
|
2231
|
+
}
|
|
2232
|
+
function clearActiveBrand() {
|
|
2233
|
+
activeBrand = null;
|
|
2234
|
+
activeNamespace = null;
|
|
2235
|
+
}
|
|
2236
|
+
function getBrandTheme(brand, mode) {
|
|
2237
|
+
return brand.themes.find((theme) => theme.mode === mode);
|
|
2238
|
+
}
|
|
2239
|
+
function applyBrandOverrides(brand, mode) {
|
|
2240
|
+
if (typeof document === "undefined") return;
|
|
2241
|
+
const theme = getBrandTheme(brand, mode);
|
|
2242
|
+
if (!theme) {
|
|
2243
|
+
console.warn(`Brand "${brand.id}" has no theme for mode "${mode}"`);
|
|
2244
|
+
return;
|
|
2245
|
+
}
|
|
2246
|
+
const root = document.documentElement;
|
|
2247
|
+
const { namespace } = brand;
|
|
2248
|
+
const { overrides } = theme;
|
|
2249
|
+
if (overrides.primaryColors) {
|
|
2250
|
+
Object.entries(overrides.primaryColors).forEach(([key, value]) => {
|
|
2251
|
+
root.style.setProperty(`--brand-${namespace}-primary-${key}`, value);
|
|
2252
|
+
});
|
|
2253
|
+
}
|
|
2254
|
+
if (overrides.accentColors) {
|
|
2255
|
+
Object.entries(overrides.accentColors).forEach(([key, value]) => {
|
|
2256
|
+
root.style.setProperty(`--brand-${namespace}-accent-${key}`, value);
|
|
2257
|
+
});
|
|
2258
|
+
}
|
|
2259
|
+
if (overrides.secondaryColors) {
|
|
2260
|
+
Object.entries(overrides.secondaryColors).forEach(([key, value]) => {
|
|
2261
|
+
root.style.setProperty(`--brand-${namespace}-secondary-${key}`, value);
|
|
2262
|
+
});
|
|
2263
|
+
}
|
|
2264
|
+
const modeColors = mode === "day" ? overrides.baseColorsDay : overrides.baseColorsNight;
|
|
2265
|
+
if (modeColors) {
|
|
2266
|
+
Object.entries(modeColors).forEach(([key, value]) => {
|
|
2267
|
+
root.style.setProperty(`--brand-${namespace}-${key}`, value);
|
|
2268
|
+
});
|
|
2269
|
+
}
|
|
2270
|
+
if (overrides.typography) {
|
|
2271
|
+
if (overrides.typography.fontFamily) {
|
|
2272
|
+
Object.entries(overrides.typography.fontFamily).forEach(([key, value]) => {
|
|
2273
|
+
root.style.setProperty(
|
|
2274
|
+
`--brand-${namespace}-font-${key}`,
|
|
2275
|
+
Array.isArray(value) ? value.join(", ") : value
|
|
2276
|
+
);
|
|
2277
|
+
});
|
|
2278
|
+
}
|
|
2279
|
+
if (overrides.typography.fontSize) {
|
|
2280
|
+
Object.entries(overrides.typography.fontSize).forEach(([key, value]) => {
|
|
2281
|
+
const fontSizeValue = typeof value === "string" ? value : value[0];
|
|
2282
|
+
root.style.setProperty(`--brand-${namespace}-font-size-${key}`, fontSizeValue);
|
|
2283
|
+
});
|
|
2284
|
+
}
|
|
2285
|
+
if (overrides.typography.fontWeight) {
|
|
2286
|
+
Object.entries(overrides.typography.fontWeight).forEach(([key, value]) => {
|
|
2287
|
+
root.style.setProperty(`--brand-${namespace}-font-weight-${key}`, value);
|
|
2288
|
+
});
|
|
2289
|
+
}
|
|
2290
|
+
if (overrides.typography.lineHeight) {
|
|
2291
|
+
Object.entries(overrides.typography.lineHeight).forEach(([key, value]) => {
|
|
2292
|
+
root.style.setProperty(`--brand-${namespace}-line-height-${key}`, value);
|
|
2293
|
+
});
|
|
2294
|
+
}
|
|
2295
|
+
if (overrides.typography.letterSpacing) {
|
|
2296
|
+
Object.entries(overrides.typography.letterSpacing).forEach(([key, value]) => {
|
|
2297
|
+
root.style.setProperty(`--brand-${namespace}-letter-spacing-${key}`, value);
|
|
2298
|
+
});
|
|
2299
|
+
}
|
|
2300
|
+
}
|
|
2301
|
+
if (overrides.spacing) {
|
|
2302
|
+
if (overrides.spacing.semanticSpacing) {
|
|
2303
|
+
Object.entries(overrides.spacing.semanticSpacing).forEach(([key, value]) => {
|
|
2304
|
+
root.style.setProperty(`--brand-${namespace}-spacing-${key}`, value);
|
|
2305
|
+
});
|
|
2306
|
+
}
|
|
2307
|
+
if (overrides.spacing.layoutSpacing) {
|
|
2308
|
+
const layout = overrides.spacing.layoutSpacing;
|
|
2309
|
+
if (layout.section) {
|
|
2310
|
+
Object.entries(layout.section).forEach(([key, value]) => {
|
|
2311
|
+
if (typeof value === "string") {
|
|
2312
|
+
root.style.setProperty(`--brand-${namespace}-layout-section-${key}`, value);
|
|
2313
|
+
}
|
|
2314
|
+
});
|
|
2384
2315
|
}
|
|
2385
|
-
|
|
2386
|
-
|
|
2387
|
-
|
|
2388
|
-
|
|
2389
|
-
|
|
2390
|
-
|
|
2316
|
+
if (layout.container) {
|
|
2317
|
+
Object.entries(layout.container).forEach(([key, value]) => {
|
|
2318
|
+
if (typeof value === "string") {
|
|
2319
|
+
root.style.setProperty(`--brand-${namespace}-layout-container-${key}`, value);
|
|
2320
|
+
}
|
|
2321
|
+
});
|
|
2391
2322
|
}
|
|
2392
|
-
|
|
2393
|
-
|
|
2394
|
-
|
|
2395
|
-
|
|
2396
|
-
|
|
2397
|
-
|
|
2323
|
+
if (layout.grid) {
|
|
2324
|
+
Object.entries(layout.grid).forEach(([key, value]) => {
|
|
2325
|
+
if (typeof value === "string") {
|
|
2326
|
+
root.style.setProperty(`--brand-${namespace}-layout-grid-${key}`, value);
|
|
2327
|
+
}
|
|
2328
|
+
});
|
|
2398
2329
|
}
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
|
|
2402
|
-
|
|
2403
|
-
|
|
2404
|
-
|
|
2330
|
+
if (layout.stack) {
|
|
2331
|
+
Object.entries(layout.stack).forEach(([key, value]) => {
|
|
2332
|
+
if (typeof value === "string") {
|
|
2333
|
+
root.style.setProperty(`--brand-${namespace}-layout-stack-${key}`, value);
|
|
2334
|
+
}
|
|
2335
|
+
});
|
|
2405
2336
|
}
|
|
2406
|
-
|
|
2407
|
-
|
|
2408
|
-
|
|
2409
|
-
|
|
2410
|
-
|
|
2411
|
-
|
|
2337
|
+
if (layout.component) {
|
|
2338
|
+
Object.entries(layout.component).forEach(([key, value]) => {
|
|
2339
|
+
if (typeof value === "string") {
|
|
2340
|
+
root.style.setProperty(`--brand-${namespace}-layout-component-${key}`, value);
|
|
2341
|
+
}
|
|
2342
|
+
});
|
|
2412
2343
|
}
|
|
2413
|
-
|
|
2414
|
-
|
|
2415
|
-
|
|
2416
|
-
|
|
2417
|
-
|
|
2418
|
-
|
|
2344
|
+
}
|
|
2345
|
+
}
|
|
2346
|
+
if (overrides.shadows) {
|
|
2347
|
+
if (overrides.shadows.elevationShadows) {
|
|
2348
|
+
Object.entries(overrides.shadows.elevationShadows).forEach(([key, value]) => {
|
|
2349
|
+
root.style.setProperty(`--brand-${namespace}-shadow-${key}`, value);
|
|
2350
|
+
});
|
|
2351
|
+
}
|
|
2352
|
+
if (overrides.shadows.primaryColoredShadows) {
|
|
2353
|
+
Object.entries(overrides.shadows.primaryColoredShadows).forEach(([key, value]) => {
|
|
2354
|
+
root.style.setProperty(`--brand-${namespace}-shadow-primary-${key}`, value);
|
|
2355
|
+
});
|
|
2356
|
+
}
|
|
2357
|
+
if (overrides.shadows.accentColoredShadows) {
|
|
2358
|
+
Object.entries(overrides.shadows.accentColoredShadows).forEach(([key, value]) => {
|
|
2359
|
+
root.style.setProperty(`--brand-${namespace}-shadow-accent-${key}`, value);
|
|
2360
|
+
});
|
|
2361
|
+
}
|
|
2362
|
+
if (overrides.shadows.glowEffects) {
|
|
2363
|
+
Object.entries(overrides.shadows.glowEffects).forEach(([key, value]) => {
|
|
2364
|
+
root.style.setProperty(`--brand-${namespace}-glow-${key}`, value);
|
|
2365
|
+
});
|
|
2366
|
+
}
|
|
2367
|
+
if (overrides.shadows.focusRings) {
|
|
2368
|
+
Object.entries(overrides.shadows.focusRings).forEach(([key, value]) => {
|
|
2369
|
+
root.style.setProperty(`--brand-${namespace}-focus-ring-${key}`, value);
|
|
2370
|
+
});
|
|
2371
|
+
}
|
|
2372
|
+
}
|
|
2373
|
+
if (overrides.radius) {
|
|
2374
|
+
if (overrides.radius.borderRadius) {
|
|
2375
|
+
Object.entries(overrides.radius.borderRadius).forEach(([key, value]) => {
|
|
2376
|
+
root.style.setProperty(`--brand-${namespace}-radius-${key}`, value);
|
|
2377
|
+
});
|
|
2378
|
+
}
|
|
2379
|
+
if (overrides.radius.componentRadius) {
|
|
2380
|
+
const { componentRadius: componentRadius2 } = overrides.radius;
|
|
2381
|
+
if (componentRadius2.button) {
|
|
2382
|
+
Object.entries(componentRadius2.button).forEach(([key, value]) => {
|
|
2383
|
+
root.style.setProperty(`--brand-${namespace}-radius-button-${key}`, value);
|
|
2384
|
+
});
|
|
2419
2385
|
}
|
|
2420
|
-
|
|
2421
|
-
|
|
2422
|
-
|
|
2423
|
-
|
|
2424
|
-
lineHeight: fontSize["8xl"][1].lineHeight,
|
|
2425
|
-
letterSpacing: fontSize["8xl"][1].letterSpacing
|
|
2386
|
+
if (componentRadius2.card) {
|
|
2387
|
+
Object.entries(componentRadius2.card).forEach(([key, value]) => {
|
|
2388
|
+
root.style.setProperty(`--brand-${namespace}-radius-card-${key}`, value);
|
|
2389
|
+
});
|
|
2426
2390
|
}
|
|
2427
|
-
|
|
2428
|
-
|
|
2429
|
-
|
|
2430
|
-
|
|
2431
|
-
lineHeight: fontSize["9xl"][1].lineHeight,
|
|
2432
|
-
letterSpacing: fontSize["9xl"][1].letterSpacing
|
|
2391
|
+
if (componentRadius2.input) {
|
|
2392
|
+
Object.entries(componentRadius2.input).forEach(([key, value]) => {
|
|
2393
|
+
root.style.setProperty(`--brand-${namespace}-radius-input-${key}`, value);
|
|
2394
|
+
});
|
|
2433
2395
|
}
|
|
2434
|
-
|
|
2435
|
-
}
|
|
2396
|
+
}
|
|
2397
|
+
}
|
|
2398
|
+
setActiveBrand(brand);
|
|
2399
|
+
root.setAttribute("data-brand", brand.id);
|
|
2400
|
+
root.setAttribute("data-brand-namespace", namespace);
|
|
2401
|
+
}
|
|
2402
|
+
function removeBrandOverrides(namespace) {
|
|
2403
|
+
if (typeof document === "undefined") return;
|
|
2404
|
+
const root = document.documentElement;
|
|
2405
|
+
const { style } = root;
|
|
2406
|
+
const propsToRemove = [];
|
|
2407
|
+
for (let i = 0; i < style.length; i++) {
|
|
2408
|
+
const prop = style.item(i);
|
|
2409
|
+
if (prop && prop.startsWith(`--brand-${namespace}-`)) {
|
|
2410
|
+
propsToRemove.push(prop);
|
|
2411
|
+
}
|
|
2412
|
+
}
|
|
2413
|
+
propsToRemove.forEach((prop) => {
|
|
2414
|
+
style.removeProperty(prop);
|
|
2415
|
+
});
|
|
2416
|
+
root.removeAttribute("data-brand");
|
|
2417
|
+
root.removeAttribute("data-brand-namespace");
|
|
2418
|
+
if (activeNamespace === namespace) {
|
|
2419
|
+
clearActiveBrand();
|
|
2420
|
+
}
|
|
2421
|
+
}
|
|
2422
|
+
|
|
2423
|
+
// src/themes/index.ts
|
|
2424
|
+
var themes = {
|
|
2425
|
+
default: () => Promise.resolve().then(() => (init_default(), default_exports)).then((m) => m.defaultTheme),
|
|
2426
|
+
dark: () => Promise.resolve().then(() => (init_dark(), dark_exports)).then((m) => m.darkTheme),
|
|
2427
|
+
brand: () => Promise.resolve().then(() => (init_brand(), brand_exports)).then((m) => m.brandTheme)
|
|
2428
|
+
};
|
|
2429
|
+
async function getTheme(name) {
|
|
2430
|
+
const themeLoader = themes[name];
|
|
2431
|
+
if (!themeLoader) {
|
|
2432
|
+
throw new Error(`Theme "${name}" not found`);
|
|
2433
|
+
}
|
|
2434
|
+
return await themeLoader();
|
|
2435
|
+
}
|
|
2436
2436
|
|
|
2437
|
-
// src/tokens/state-matrix.ts
|
|
2437
|
+
// src/FOUNDATION/tokens/state-matrix.ts
|
|
2438
2438
|
function getStateVariableName(component, variant, state, property) {
|
|
2439
2439
|
const propertyMap = {
|
|
2440
2440
|
background: "bg",
|
|
@@ -2470,7 +2470,7 @@ function flattenStateMatrix(stateMatrix) {
|
|
|
2470
2470
|
return variables;
|
|
2471
2471
|
}
|
|
2472
2472
|
|
|
2473
|
-
// src/tokens/states.ts
|
|
2473
|
+
// src/FOUNDATION/tokens/states.ts
|
|
2474
2474
|
function getButtonStateMatrix(mode, baseColors2, surfaceColors2) {
|
|
2475
2475
|
const primaryBase = primaryColors[600];
|
|
2476
2476
|
const primaryHover = primaryColors[700];
|
|
@@ -2600,7 +2600,7 @@ function getButtonStateMatrix(mode, baseColors2, surfaceColors2) {
|
|
|
2600
2600
|
};
|
|
2601
2601
|
}
|
|
2602
2602
|
|
|
2603
|
-
// src/theme/applyStateMatrix.ts
|
|
2603
|
+
// src/FOUNDATION/theme/applyStateMatrix.ts
|
|
2604
2604
|
function getMergedBaseTokens(_mode) {
|
|
2605
2605
|
return {
|
|
2606
2606
|
baseColors,
|
|
@@ -2671,7 +2671,7 @@ function updateStateMatrixFromTokens(mode) {
|
|
|
2671
2671
|
}
|
|
2672
2672
|
}
|
|
2673
2673
|
|
|
2674
|
-
// src/theme/applyMode.ts
|
|
2674
|
+
// src/FOUNDATION/theme/applyMode.ts
|
|
2675
2675
|
var MODE_ATTRIBUTE = "data-mode";
|
|
2676
2676
|
var THEME_ATTRIBUTE = "data-theme-name";
|
|
2677
2677
|
var MODE_THEME_ATTRIBUTE = "data-theme";
|
|
@@ -3084,7 +3084,7 @@ function persistBrand(brandId, storageKey = "tm_brand") {
|
|
|
3084
3084
|
}
|
|
3085
3085
|
}
|
|
3086
3086
|
|
|
3087
|
-
// src/theme/registry.ts
|
|
3087
|
+
// src/FOUNDATION/theme/registry.ts
|
|
3088
3088
|
var themeRegistry = /* @__PURE__ */ new Map();
|
|
3089
3089
|
function registerTheme(entry) {
|
|
3090
3090
|
themeRegistry.set(entry.metadata.id, entry);
|
|
@@ -3164,7 +3164,7 @@ function initializeDefaultThemes() {
|
|
|
3164
3164
|
}
|
|
3165
3165
|
initializeDefaultThemes();
|
|
3166
3166
|
|
|
3167
|
-
// src/theme/schema.ts
|
|
3167
|
+
// src/FOUNDATION/theme/schema.ts
|
|
3168
3168
|
var REQUIRED_FIELDS = ["id", "name"];
|
|
3169
3169
|
function validateThemeSchema(theme) {
|
|
3170
3170
|
const errors = [];
|
|
@@ -3258,7 +3258,7 @@ function createMinimalThemeSchema(id, name) {
|
|
|
3258
3258
|
};
|
|
3259
3259
|
}
|
|
3260
3260
|
|
|
3261
|
-
// src/theme/loader.ts
|
|
3261
|
+
// src/FOUNDATION/theme/loader.ts
|
|
3262
3262
|
var DEFAULT_OPTIONS = {
|
|
3263
3263
|
fallbackThemeId: "default",
|
|
3264
3264
|
validate: true,
|
|
@@ -3335,7 +3335,7 @@ async function canLoadTheme(themeId) {
|
|
|
3335
3335
|
}
|
|
3336
3336
|
}
|
|
3337
3337
|
|
|
3338
|
-
// src/theme/spacing.ts
|
|
3338
|
+
// src/FOUNDATION/theme/spacing.ts
|
|
3339
3339
|
var spacing2 = {
|
|
3340
3340
|
none: "0",
|
|
3341
3341
|
xs: "0.25rem",
|
|
@@ -3691,7 +3691,7 @@ function useTheme() {
|
|
|
3691
3691
|
return context;
|
|
3692
3692
|
}
|
|
3693
3693
|
|
|
3694
|
-
// src/theme/typography.ts
|
|
3694
|
+
// src/FOUNDATION/theme/typography.ts
|
|
3695
3695
|
var fontFamilies = {
|
|
3696
3696
|
sans: [
|
|
3697
3697
|
"ui-sans-serif",
|