@doneisbetter/gds-theme 3.0.2 → 3.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/{chunk-E55P7FOX.mjs → chunk-G42DZXE5.mjs} +9 -2
  2. package/dist/{chunk-TAPLA36E.mjs → chunk-OMSQVRZK.mjs} +288 -0
  3. package/dist/client.d.mts +1 -1
  4. package/dist/client.d.ts +1 -1
  5. package/dist/client.js +298 -1
  6. package/dist/client.mjs +8 -2
  7. package/dist/index.d.mts +1 -1
  8. package/dist/index.d.ts +1 -1
  9. package/dist/index.js +298 -1
  10. package/dist/index.mjs +8 -2
  11. package/dist/server.d.mts +38 -1
  12. package/dist/server.d.ts +38 -1
  13. package/dist/server.js +291 -0
  14. package/dist/server.mjs +7 -1
  15. package/package.json +1 -1
  16. package/styles.css +233 -0
package/dist/{chunk-E55P7FOX.mjs → chunk-G42DZXE5.mjs} RENAMED
@@ -3,8 +3,9 @@ import {
3
3
  gdsTheme,
4
4
  getGdsFontLanes,
5
5
  getGdsThemePresets,
6
+ getGdsVibeThemeCssVariables,
6
7
  resolveGdsThemePreset
7
- } from "./chunk-TAPLA36E.mjs";
8
+ } from "./chunk-OMSQVRZK.mjs";
8
9
 
9
10
  // src/theme-runtime.ts
10
11
  import { useCallback, useEffect, useState } from "react";
@@ -84,9 +85,15 @@ function resolveDocumentScheme(selection) {
84
85
  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
85
86
  }
86
87
  function applyDocumentRuntime(selection) {
87
- document.documentElement.setAttribute("data-mantine-color-scheme", resolveDocumentScheme(selection));
88
+ const documentScheme = resolveDocumentScheme(selection);
89
+ const vibeVariables = getGdsVibeThemeCssVariables(selection.preset, documentScheme);
90
+ document.documentElement.setAttribute("data-mantine-color-scheme", documentScheme);
91
+ document.documentElement.setAttribute("data-gds-theme-preset", selection.preset);
88
92
  document.documentElement.setAttribute("data-gds-theme-runtime", selection.runtimeKey ?? `${selection.preset}-${selection.colorScheme}`);
89
93
  document.documentElement.setAttribute("data-gds-font-lane", selection.fontLane);
94
+ Object.entries(vibeVariables).forEach(([property, value]) => {
95
+ document.documentElement.style.setProperty(property, value);
96
+ });
90
97
  }
91
98
  function useGdsThemePresetState({
92
99
  storageKey = defaultStorageKey,
package/dist/{chunk-TAPLA36E.mjs → chunk-OMSQVRZK.mjs} RENAMED
@@ -307,6 +307,291 @@ function resolveGdsThemePreset(id, options) {
307
307
  }
308
308
  }
309
309
 
310
+ // src/vibe-themes.ts
311
+ var neutralVibe = {
312
+ id: "default",
313
+ label: "Default runtime theme",
314
+ primary: "#7c3aed",
315
+ accent: "#06b6d4",
316
+ glow: "rgba(124, 58, 237, 0.2)",
317
+ canvasLight: "#f8fafc",
318
+ canvasDark: "#0f172a",
319
+ shellLight: "rgba(255, 255, 255, 0.82)",
320
+ shellDark: "rgba(15, 23, 42, 0.84)",
321
+ surfaceLight: "rgba(255, 255, 255, 0.9)",
322
+ surfaceDark: "rgba(30, 41, 59, 0.82)",
323
+ borderLight: "rgba(124, 58, 237, 0.22)",
324
+ borderDark: "rgba(167, 139, 250, 0.28)",
325
+ textLight: "#111827",
326
+ textDark: "#f8fafc",
327
+ mutedLight: "#64748b",
328
+ mutedDark: "#cbd5e1",
329
+ gradient: "radial-gradient(circle at 18% 12%, rgba(124, 58, 237, 0.18), transparent 28%), radial-gradient(circle at 82% 8%, rgba(6, 182, 212, 0.16), transparent 30%)",
330
+ hero: "linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(6, 182, 212, 0.12))"
331
+ };
332
+ var vibeThemes = {
333
+ default: neutralVibe,
334
+ "dark-public": {
335
+ ...neutralVibe,
336
+ id: "dark-public",
337
+ label: "Dark public theme",
338
+ primary: "#8b5cf6",
339
+ accent: "#22d3ee",
340
+ canvasLight: "#f5f3ff",
341
+ canvasDark: "#050816",
342
+ shellDark: "rgba(8, 13, 32, 0.88)",
343
+ surfaceDark: "rgba(18, 24, 52, 0.86)",
344
+ gradient: "radial-gradient(circle at 20% 12%, rgba(139, 92, 246, 0.34), transparent 30%), radial-gradient(circle at 82% 16%, rgba(34, 211, 238, 0.2), transparent 28%)",
345
+ hero: "linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(34, 211, 238, 0.14))"
346
+ },
347
+ "flat-surface": {
348
+ ...neutralVibe,
349
+ id: "flat-surface",
350
+ label: "Flat surface theme",
351
+ primary: "#2563eb",
352
+ accent: "#14b8a6",
353
+ canvasLight: "#f8fafc",
354
+ canvasDark: "#111827",
355
+ shellLight: "rgba(248, 250, 252, 0.94)",
356
+ surfaceLight: "rgba(255, 255, 255, 0.94)",
357
+ gradient: "linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(20, 184, 166, 0.08))",
358
+ hero: "linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(20, 184, 166, 0.1))"
359
+ },
360
+ editorial: {
361
+ ...neutralVibe,
362
+ id: "editorial",
363
+ label: "Editorial serif theme",
364
+ primary: "#9a3412",
365
+ accent: "#be123c",
366
+ canvasLight: "#fff7ed",
367
+ canvasDark: "#1c1917",
368
+ shellLight: "rgba(255, 247, 237, 0.9)",
369
+ surfaceLight: "rgba(255, 251, 247, 0.92)",
370
+ borderLight: "rgba(154, 52, 18, 0.22)",
371
+ gradient: "radial-gradient(circle at 12% 12%, rgba(251, 146, 60, 0.22), transparent 28%), radial-gradient(circle at 84% 10%, rgba(190, 18, 60, 0.12), transparent 28%)",
372
+ hero: "linear-gradient(135deg, rgba(251, 146, 60, 0.18), rgba(190, 18, 60, 0.12))"
373
+ },
374
+ brand: {
375
+ ...neutralVibe,
376
+ id: "brand",
377
+ label: "Brand theme generator"
378
+ },
379
+ sunset: {
380
+ ...neutralVibe,
381
+ id: "sunset",
382
+ label: "Sunset pulse",
383
+ primary: "#f97316",
384
+ accent: "#ec4899",
385
+ glow: "rgba(249, 115, 22, 0.3)",
386
+ canvasLight: "#fff7ed",
387
+ canvasDark: "#211106",
388
+ shellLight: "rgba(255, 247, 237, 0.9)",
389
+ shellDark: "rgba(44, 18, 10, 0.88)",
390
+ surfaceLight: "rgba(255, 250, 245, 0.9)",
391
+ surfaceDark: "rgba(68, 24, 12, 0.78)",
392
+ borderLight: "rgba(249, 115, 22, 0.3)",
393
+ borderDark: "rgba(251, 146, 60, 0.36)",
394
+ gradient: "radial-gradient(circle at 14% 8%, rgba(251, 146, 60, 0.38), transparent 28%), radial-gradient(circle at 88% 18%, rgba(236, 72, 153, 0.32), transparent 32%), linear-gradient(135deg, rgba(255, 247, 237, 0.96), rgba(253, 242, 248, 0.86))",
395
+ hero: "linear-gradient(135deg, rgba(249, 115, 22, 0.26), rgba(236, 72, 153, 0.22))"
396
+ },
397
+ oceanic: {
398
+ ...neutralVibe,
399
+ id: "oceanic",
400
+ label: "Oceanic wave",
401
+ primary: "#0891b2",
402
+ accent: "#2563eb",
403
+ glow: "rgba(8, 145, 178, 0.28)",
404
+ canvasLight: "#ecfeff",
405
+ canvasDark: "#04131f",
406
+ shellLight: "rgba(236, 254, 255, 0.88)",
407
+ shellDark: "rgba(5, 26, 44, 0.88)",
408
+ surfaceLight: "rgba(248, 253, 255, 0.9)",
409
+ surfaceDark: "rgba(8, 47, 73, 0.78)",
410
+ borderLight: "rgba(8, 145, 178, 0.28)",
411
+ borderDark: "rgba(103, 232, 249, 0.28)",
412
+ gradient: "radial-gradient(circle at 18% 8%, rgba(34, 211, 238, 0.32), transparent 30%), radial-gradient(circle at 86% 14%, rgba(37, 99, 235, 0.28), transparent 32%), linear-gradient(135deg, rgba(236, 254, 255, 0.96), rgba(239, 246, 255, 0.9))",
413
+ hero: "linear-gradient(135deg, rgba(8, 145, 178, 0.24), rgba(37, 99, 235, 0.2))"
414
+ },
415
+ forest: {
416
+ ...neutralVibe,
417
+ id: "forest",
418
+ label: "Forest signal",
419
+ primary: "#16a34a",
420
+ accent: "#84cc16",
421
+ glow: "rgba(22, 163, 74, 0.28)",
422
+ canvasLight: "#f0fdf4",
423
+ canvasDark: "#06180d",
424
+ shellLight: "rgba(240, 253, 244, 0.9)",
425
+ shellDark: "rgba(8, 35, 19, 0.88)",
426
+ surfaceLight: "rgba(250, 255, 251, 0.9)",
427
+ surfaceDark: "rgba(20, 83, 45, 0.72)",
428
+ borderLight: "rgba(22, 163, 74, 0.26)",
429
+ borderDark: "rgba(134, 239, 172, 0.28)",
430
+ gradient: "radial-gradient(circle at 18% 10%, rgba(34, 197, 94, 0.28), transparent 28%), radial-gradient(circle at 84% 14%, rgba(132, 204, 22, 0.24), transparent 30%)",
431
+ hero: "linear-gradient(135deg, rgba(22, 163, 74, 0.22), rgba(132, 204, 22, 0.18))"
432
+ },
433
+ ruby: {
434
+ ...neutralVibe,
435
+ id: "ruby",
436
+ label: "Ruby spark",
437
+ primary: "#e11d48",
438
+ accent: "#f97316",
439
+ canvasLight: "#fff1f2",
440
+ canvasDark: "#22050c",
441
+ shellLight: "rgba(255, 241, 242, 0.9)",
442
+ shellDark: "rgba(50, 8, 18, 0.88)",
443
+ surfaceDark: "rgba(76, 20, 32, 0.76)",
444
+ borderLight: "rgba(225, 29, 72, 0.28)",
445
+ gradient: "radial-gradient(circle at 18% 8%, rgba(225, 29, 72, 0.32), transparent 28%), radial-gradient(circle at 86% 18%, rgba(249, 115, 22, 0.22), transparent 30%)",
446
+ hero: "linear-gradient(135deg, rgba(225, 29, 72, 0.24), rgba(249, 115, 22, 0.18))"
447
+ },
448
+ amber: {
449
+ ...neutralVibe,
450
+ id: "amber",
451
+ label: "Amber glow",
452
+ primary: "#d97706",
453
+ accent: "#eab308",
454
+ canvasLight: "#fffbeb",
455
+ canvasDark: "#1f1604",
456
+ shellLight: "rgba(255, 251, 235, 0.9)",
457
+ shellDark: "rgba(41, 29, 6, 0.88)",
458
+ surfaceDark: "rgba(69, 46, 10, 0.76)",
459
+ borderLight: "rgba(217, 119, 6, 0.28)",
460
+ gradient: "radial-gradient(circle at 14% 10%, rgba(251, 191, 36, 0.34), transparent 30%), radial-gradient(circle at 84% 12%, rgba(217, 119, 6, 0.22), transparent 28%)",
461
+ hero: "linear-gradient(135deg, rgba(217, 119, 6, 0.22), rgba(234, 179, 8, 0.2))"
462
+ },
463
+ "neon-night": {
464
+ ...neutralVibe,
465
+ id: "neon-night",
466
+ label: "Neon night",
467
+ primary: "#84cc16",
468
+ accent: "#22d3ee",
469
+ glow: "rgba(132, 204, 22, 0.34)",
470
+ canvasLight: "#f7fee7",
471
+ canvasDark: "#030712",
472
+ shellLight: "rgba(247, 254, 231, 0.88)",
473
+ shellDark: "rgba(5, 12, 24, 0.9)",
474
+ surfaceDark: "rgba(12, 23, 36, 0.86)",
475
+ borderLight: "rgba(132, 204, 22, 0.3)",
476
+ borderDark: "rgba(190, 242, 100, 0.34)",
477
+ gradient: "radial-gradient(circle at 16% 8%, rgba(132, 204, 22, 0.36), transparent 26%), radial-gradient(circle at 86% 12%, rgba(34, 211, 238, 0.28), transparent 30%), linear-gradient(135deg, rgba(3, 7, 18, 0.96), rgba(8, 47, 73, 0.74))",
478
+ hero: "linear-gradient(135deg, rgba(132, 204, 22, 0.28), rgba(34, 211, 238, 0.18))"
479
+ },
480
+ skyline: {
481
+ ...neutralVibe,
482
+ id: "skyline",
483
+ label: "Skyline indigo",
484
+ primary: "#4f46e5",
485
+ accent: "#0ea5e9",
486
+ canvasLight: "#eef2ff",
487
+ canvasDark: "#0b1026",
488
+ shellLight: "rgba(238, 242, 255, 0.9)",
489
+ shellDark: "rgba(13, 20, 52, 0.88)",
490
+ surfaceDark: "rgba(30, 41, 86, 0.78)",
491
+ borderLight: "rgba(79, 70, 229, 0.28)",
492
+ gradient: "radial-gradient(circle at 18% 8%, rgba(79, 70, 229, 0.32), transparent 28%), radial-gradient(circle at 84% 12%, rgba(14, 165, 233, 0.28), transparent 30%)",
493
+ hero: "linear-gradient(135deg, rgba(79, 70, 229, 0.24), rgba(14, 165, 233, 0.18))"
494
+ },
495
+ aurora: {
496
+ ...neutralVibe,
497
+ id: "aurora",
498
+ label: "Aurora teal",
499
+ primary: "#0d9488",
500
+ accent: "#a3e635",
501
+ canvasLight: "#f0fdfa",
502
+ canvasDark: "#04211f",
503
+ shellLight: "rgba(240, 253, 250, 0.9)",
504
+ shellDark: "rgba(5, 44, 42, 0.88)",
505
+ surfaceDark: "rgba(19, 78, 74, 0.76)",
506
+ borderLight: "rgba(13, 148, 136, 0.28)",
507
+ gradient: "radial-gradient(circle at 16% 8%, rgba(45, 212, 191, 0.32), transparent 28%), radial-gradient(circle at 84% 14%, rgba(163, 230, 53, 0.22), transparent 30%)",
508
+ hero: "linear-gradient(135deg, rgba(13, 148, 136, 0.24), rgba(163, 230, 53, 0.16))"
509
+ },
510
+ coral: {
511
+ ...neutralVibe,
512
+ id: "coral",
513
+ label: "Coral bloom",
514
+ primary: "#db2777",
515
+ accent: "#fb7185",
516
+ canvasLight: "#fdf2f8",
517
+ canvasDark: "#251021",
518
+ shellLight: "rgba(253, 242, 248, 0.9)",
519
+ shellDark: "rgba(50, 18, 43, 0.88)",
520
+ surfaceDark: "rgba(80, 28, 66, 0.76)",
521
+ borderLight: "rgba(219, 39, 119, 0.28)",
522
+ gradient: "radial-gradient(circle at 16% 8%, rgba(219, 39, 119, 0.3), transparent 28%), radial-gradient(circle at 84% 14%, rgba(251, 113, 133, 0.24), transparent 30%)",
523
+ hero: "linear-gradient(135deg, rgba(219, 39, 119, 0.22), rgba(251, 113, 133, 0.18))"
524
+ },
525
+ mint: {
526
+ ...neutralVibe,
527
+ id: "mint",
528
+ label: "Mint circuit",
529
+ primary: "#059669",
530
+ accent: "#14b8a6",
531
+ canvasLight: "#ecfdf5",
532
+ canvasDark: "#031c16",
533
+ shellLight: "rgba(236, 253, 245, 0.9)",
534
+ shellDark: "rgba(5, 42, 34, 0.88)",
535
+ surfaceDark: "rgba(6, 78, 59, 0.74)",
536
+ borderLight: "rgba(5, 150, 105, 0.28)",
537
+ gradient: "radial-gradient(circle at 16% 8%, rgba(16, 185, 129, 0.3), transparent 28%), radial-gradient(circle at 84% 14%, rgba(20, 184, 166, 0.22), transparent 30%)",
538
+ hero: "linear-gradient(135deg, rgba(5, 150, 105, 0.24), rgba(20, 184, 166, 0.16))"
539
+ },
540
+ orchid: {
541
+ ...neutralVibe,
542
+ id: "orchid",
543
+ label: "Orchid signal",
544
+ primary: "#9333ea",
545
+ accent: "#ec4899",
546
+ canvasLight: "#faf5ff",
547
+ canvasDark: "#1d0b2f",
548
+ shellLight: "rgba(250, 245, 255, 0.9)",
549
+ shellDark: "rgba(39, 15, 63, 0.88)",
550
+ surfaceDark: "rgba(59, 25, 94, 0.78)",
551
+ borderLight: "rgba(147, 51, 234, 0.28)",
552
+ gradient: "radial-gradient(circle at 16% 8%, rgba(147, 51, 234, 0.32), transparent 28%), radial-gradient(circle at 84% 14%, rgba(236, 72, 153, 0.24), transparent 30%)",
553
+ hero: "linear-gradient(135deg, rgba(147, 51, 234, 0.24), rgba(236, 72, 153, 0.18))"
554
+ },
555
+ royal: {
556
+ ...neutralVibe,
557
+ id: "royal",
558
+ label: "Royal violet",
559
+ primary: "#7c3aed",
560
+ accent: "#06b6d4",
561
+ canvasLight: "#f5f3ff",
562
+ canvasDark: "#100a2d",
563
+ shellLight: "rgba(245, 243, 255, 0.9)",
564
+ shellDark: "rgba(21, 13, 59, 0.88)",
565
+ surfaceDark: "rgba(46, 26, 104, 0.78)",
566
+ borderLight: "rgba(124, 58, 237, 0.3)",
567
+ gradient: "radial-gradient(circle at 15% 9%, rgba(124, 58, 237, 0.34), transparent 28%), radial-gradient(circle at 82% 12%, rgba(6, 182, 212, 0.28), transparent 30%), radial-gradient(circle at 92% 72%, rgba(236, 72, 153, 0.2), transparent 26%)",
568
+ hero: "linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(6, 182, 212, 0.18), rgba(236, 72, 153, 0.18))"
569
+ }
570
+ };
571
+ function getGdsVibeThemes() {
572
+ return Object.values(vibeThemes);
573
+ }
574
+ function resolveGdsVibeTheme(id) {
575
+ return vibeThemes[id] ?? neutralVibe;
576
+ }
577
+ function getGdsVibeThemeCssVariables(id, colorScheme) {
578
+ const vibe = resolveGdsVibeTheme(id);
579
+ const dark = colorScheme === "dark";
580
+ return {
581
+ "--gds-vibe-primary": vibe.primary,
582
+ "--gds-vibe-accent": vibe.accent,
583
+ "--gds-vibe-glow": vibe.glow,
584
+ "--gds-vibe-canvas": dark ? vibe.canvasDark : vibe.canvasLight,
585
+ "--gds-vibe-shell": dark ? vibe.shellDark : vibe.shellLight,
586
+ "--gds-vibe-surface": dark ? vibe.surfaceDark : vibe.surfaceLight,
587
+ "--gds-vibe-border": dark ? vibe.borderDark : vibe.borderLight,
588
+ "--gds-vibe-text": dark ? vibe.textDark : vibe.textLight,
589
+ "--gds-vibe-muted": dark ? vibe.mutedDark : vibe.mutedLight,
590
+ "--gds-vibe-gradient": vibe.gradient,
591
+ "--gds-vibe-hero": vibe.hero
592
+ };
593
+ }
594
+
310
595
  // src/font-lanes.ts
311
596
  import { mergeThemeOverrides as mergeThemeOverrides2 } from "@mantine/core";
312
597
  var lanes = [
@@ -348,6 +633,9 @@ export {
348
633
  withGdsMotion,
349
634
  getGdsThemePresets,
350
635
  resolveGdsThemePreset,
636
+ getGdsVibeThemes,
637
+ resolveGdsVibeTheme,
638
+ getGdsVibeThemeCssVariables,
351
639
  getGdsFontLanes,
352
640
  resolveGdsFontLane,
353
641
  applyGdsFontLane
package/dist/client.d.mts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { GdsThemePresetId, GdsFontLaneId } from './server.mjs';
2
- export { GdsFontLane, GdsThemePreset, applyGdsFontLane, createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, getGdsFontLanes, getGdsThemePresets, resolveGdsFontLane, resolveGdsThemePreset, withGdsMotion } from './server.mjs';
2
+ export { GdsFontLane, GdsThemePreset, GdsVibeTheme, applyGdsFontLane, createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, getGdsFontLanes, getGdsThemePresets, getGdsVibeThemeCssVariables, getGdsVibeThemes, resolveGdsFontLane, resolveGdsThemePreset, resolveGdsVibeTheme, withGdsMotion } from './server.mjs';
3
3
  import { MantineThemeOverride } from '@mantine/core';
4
4
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
  import React from 'react';
package/dist/client.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { GdsThemePresetId, GdsFontLaneId } from './server.js';
2
- export { GdsFontLane, GdsThemePreset, applyGdsFontLane, createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, getGdsFontLanes, getGdsThemePresets, resolveGdsFontLane, resolveGdsThemePreset, withGdsMotion } from './server.js';
2
+ export { GdsFontLane, GdsThemePreset, GdsVibeTheme, applyGdsFontLane, createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, getGdsFontLanes, getGdsThemePresets, getGdsVibeThemeCssVariables, getGdsVibeThemes, resolveGdsFontLane, resolveGdsThemePreset, resolveGdsVibeTheme, withGdsMotion } from './server.js';
3
3
  import { MantineThemeOverride } from '@mantine/core';
4
4
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
  import React from 'react';
package/dist/client.js CHANGED
@@ -31,8 +31,11 @@ __export(client_exports, {
31
31
  gdsTheme: () => gdsTheme,
32
32
  getGdsFontLanes: () => getGdsFontLanes,
33
33
  getGdsThemePresets: () => getGdsThemePresets,
34
+ getGdsVibeThemeCssVariables: () => getGdsVibeThemeCssVariables,
35
+ getGdsVibeThemes: () => getGdsVibeThemes,
34
36
  resolveGdsFontLane: () => resolveGdsFontLane,
35
37
  resolveGdsThemePreset: () => resolveGdsThemePreset,
38
+ resolveGdsVibeTheme: () => resolveGdsVibeTheme,
36
39
  showGdsNotification: () => showGdsNotification,
37
40
  useGdsThemePresetState: () => useGdsThemePresetState,
38
41
  useGdsTranslation: () => useGdsTranslation,
@@ -349,6 +352,291 @@ function resolveGdsThemePreset(id, options) {
349
352
  }
350
353
  }
351
354
 
355
+ // src/vibe-themes.ts
356
+ var neutralVibe = {
357
+ id: "default",
358
+ label: "Default runtime theme",
359
+ primary: "#7c3aed",
360
+ accent: "#06b6d4",
361
+ glow: "rgba(124, 58, 237, 0.2)",
362
+ canvasLight: "#f8fafc",
363
+ canvasDark: "#0f172a",
364
+ shellLight: "rgba(255, 255, 255, 0.82)",
365
+ shellDark: "rgba(15, 23, 42, 0.84)",
366
+ surfaceLight: "rgba(255, 255, 255, 0.9)",
367
+ surfaceDark: "rgba(30, 41, 59, 0.82)",
368
+ borderLight: "rgba(124, 58, 237, 0.22)",
369
+ borderDark: "rgba(167, 139, 250, 0.28)",
370
+ textLight: "#111827",
371
+ textDark: "#f8fafc",
372
+ mutedLight: "#64748b",
373
+ mutedDark: "#cbd5e1",
374
+ gradient: "radial-gradient(circle at 18% 12%, rgba(124, 58, 237, 0.18), transparent 28%), radial-gradient(circle at 82% 8%, rgba(6, 182, 212, 0.16), transparent 30%)",
375
+ hero: "linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(6, 182, 212, 0.12))"
376
+ };
377
+ var vibeThemes = {
378
+ default: neutralVibe,
379
+ "dark-public": {
380
+ ...neutralVibe,
381
+ id: "dark-public",
382
+ label: "Dark public theme",
383
+ primary: "#8b5cf6",
384
+ accent: "#22d3ee",
385
+ canvasLight: "#f5f3ff",
386
+ canvasDark: "#050816",
387
+ shellDark: "rgba(8, 13, 32, 0.88)",
388
+ surfaceDark: "rgba(18, 24, 52, 0.86)",
389
+ gradient: "radial-gradient(circle at 20% 12%, rgba(139, 92, 246, 0.34), transparent 30%), radial-gradient(circle at 82% 16%, rgba(34, 211, 238, 0.2), transparent 28%)",
390
+ hero: "linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(34, 211, 238, 0.14))"
391
+ },
392
+ "flat-surface": {
393
+ ...neutralVibe,
394
+ id: "flat-surface",
395
+ label: "Flat surface theme",
396
+ primary: "#2563eb",
397
+ accent: "#14b8a6",
398
+ canvasLight: "#f8fafc",
399
+ canvasDark: "#111827",
400
+ shellLight: "rgba(248, 250, 252, 0.94)",
401
+ surfaceLight: "rgba(255, 255, 255, 0.94)",
402
+ gradient: "linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(20, 184, 166, 0.08))",
403
+ hero: "linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(20, 184, 166, 0.1))"
404
+ },
405
+ editorial: {
406
+ ...neutralVibe,
407
+ id: "editorial",
408
+ label: "Editorial serif theme",
409
+ primary: "#9a3412",
410
+ accent: "#be123c",
411
+ canvasLight: "#fff7ed",
412
+ canvasDark: "#1c1917",
413
+ shellLight: "rgba(255, 247, 237, 0.9)",
414
+ surfaceLight: "rgba(255, 251, 247, 0.92)",
415
+ borderLight: "rgba(154, 52, 18, 0.22)",
416
+ gradient: "radial-gradient(circle at 12% 12%, rgba(251, 146, 60, 0.22), transparent 28%), radial-gradient(circle at 84% 10%, rgba(190, 18, 60, 0.12), transparent 28%)",
417
+ hero: "linear-gradient(135deg, rgba(251, 146, 60, 0.18), rgba(190, 18, 60, 0.12))"
418
+ },
419
+ brand: {
420
+ ...neutralVibe,
421
+ id: "brand",
422
+ label: "Brand theme generator"
423
+ },
424
+ sunset: {
425
+ ...neutralVibe,
426
+ id: "sunset",
427
+ label: "Sunset pulse",
428
+ primary: "#f97316",
429
+ accent: "#ec4899",
430
+ glow: "rgba(249, 115, 22, 0.3)",
431
+ canvasLight: "#fff7ed",
432
+ canvasDark: "#211106",
433
+ shellLight: "rgba(255, 247, 237, 0.9)",
434
+ shellDark: "rgba(44, 18, 10, 0.88)",
435
+ surfaceLight: "rgba(255, 250, 245, 0.9)",
436
+ surfaceDark: "rgba(68, 24, 12, 0.78)",
437
+ borderLight: "rgba(249, 115, 22, 0.3)",
438
+ borderDark: "rgba(251, 146, 60, 0.36)",
439
+ gradient: "radial-gradient(circle at 14% 8%, rgba(251, 146, 60, 0.38), transparent 28%), radial-gradient(circle at 88% 18%, rgba(236, 72, 153, 0.32), transparent 32%), linear-gradient(135deg, rgba(255, 247, 237, 0.96), rgba(253, 242, 248, 0.86))",
440
+ hero: "linear-gradient(135deg, rgba(249, 115, 22, 0.26), rgba(236, 72, 153, 0.22))"
441
+ },
442
+ oceanic: {
443
+ ...neutralVibe,
444
+ id: "oceanic",
445
+ label: "Oceanic wave",
446
+ primary: "#0891b2",
447
+ accent: "#2563eb",
448
+ glow: "rgba(8, 145, 178, 0.28)",
449
+ canvasLight: "#ecfeff",
450
+ canvasDark: "#04131f",
451
+ shellLight: "rgba(236, 254, 255, 0.88)",
452
+ shellDark: "rgba(5, 26, 44, 0.88)",
453
+ surfaceLight: "rgba(248, 253, 255, 0.9)",
454
+ surfaceDark: "rgba(8, 47, 73, 0.78)",
455
+ borderLight: "rgba(8, 145, 178, 0.28)",
456
+ borderDark: "rgba(103, 232, 249, 0.28)",
457
+ gradient: "radial-gradient(circle at 18% 8%, rgba(34, 211, 238, 0.32), transparent 30%), radial-gradient(circle at 86% 14%, rgba(37, 99, 235, 0.28), transparent 32%), linear-gradient(135deg, rgba(236, 254, 255, 0.96), rgba(239, 246, 255, 0.9))",
458
+ hero: "linear-gradient(135deg, rgba(8, 145, 178, 0.24), rgba(37, 99, 235, 0.2))"
459
+ },
460
+ forest: {
461
+ ...neutralVibe,
462
+ id: "forest",
463
+ label: "Forest signal",
464
+ primary: "#16a34a",
465
+ accent: "#84cc16",
466
+ glow: "rgba(22, 163, 74, 0.28)",
467
+ canvasLight: "#f0fdf4",
468
+ canvasDark: "#06180d",
469
+ shellLight: "rgba(240, 253, 244, 0.9)",
470
+ shellDark: "rgba(8, 35, 19, 0.88)",
471
+ surfaceLight: "rgba(250, 255, 251, 0.9)",
472
+ surfaceDark: "rgba(20, 83, 45, 0.72)",
473
+ borderLight: "rgba(22, 163, 74, 0.26)",
474
+ borderDark: "rgba(134, 239, 172, 0.28)",
475
+ gradient: "radial-gradient(circle at 18% 10%, rgba(34, 197, 94, 0.28), transparent 28%), radial-gradient(circle at 84% 14%, rgba(132, 204, 22, 0.24), transparent 30%)",
476
+ hero: "linear-gradient(135deg, rgba(22, 163, 74, 0.22), rgba(132, 204, 22, 0.18))"
477
+ },
478
+ ruby: {
479
+ ...neutralVibe,
480
+ id: "ruby",
481
+ label: "Ruby spark",
482
+ primary: "#e11d48",
483
+ accent: "#f97316",
484
+ canvasLight: "#fff1f2",
485
+ canvasDark: "#22050c",
486
+ shellLight: "rgba(255, 241, 242, 0.9)",
487
+ shellDark: "rgba(50, 8, 18, 0.88)",
488
+ surfaceDark: "rgba(76, 20, 32, 0.76)",
489
+ borderLight: "rgba(225, 29, 72, 0.28)",
490
+ gradient: "radial-gradient(circle at 18% 8%, rgba(225, 29, 72, 0.32), transparent 28%), radial-gradient(circle at 86% 18%, rgba(249, 115, 22, 0.22), transparent 30%)",
491
+ hero: "linear-gradient(135deg, rgba(225, 29, 72, 0.24), rgba(249, 115, 22, 0.18))"
492
+ },
493
+ amber: {
494
+ ...neutralVibe,
495
+ id: "amber",
496
+ label: "Amber glow",
497
+ primary: "#d97706",
498
+ accent: "#eab308",
499
+ canvasLight: "#fffbeb",
500
+ canvasDark: "#1f1604",
501
+ shellLight: "rgba(255, 251, 235, 0.9)",
502
+ shellDark: "rgba(41, 29, 6, 0.88)",
503
+ surfaceDark: "rgba(69, 46, 10, 0.76)",
504
+ borderLight: "rgba(217, 119, 6, 0.28)",
505
+ gradient: "radial-gradient(circle at 14% 10%, rgba(251, 191, 36, 0.34), transparent 30%), radial-gradient(circle at 84% 12%, rgba(217, 119, 6, 0.22), transparent 28%)",
506
+ hero: "linear-gradient(135deg, rgba(217, 119, 6, 0.22), rgba(234, 179, 8, 0.2))"
507
+ },
508
+ "neon-night": {
509
+ ...neutralVibe,
510
+ id: "neon-night",
511
+ label: "Neon night",
512
+ primary: "#84cc16",
513
+ accent: "#22d3ee",
514
+ glow: "rgba(132, 204, 22, 0.34)",
515
+ canvasLight: "#f7fee7",
516
+ canvasDark: "#030712",
517
+ shellLight: "rgba(247, 254, 231, 0.88)",
518
+ shellDark: "rgba(5, 12, 24, 0.9)",
519
+ surfaceDark: "rgba(12, 23, 36, 0.86)",
520
+ borderLight: "rgba(132, 204, 22, 0.3)",
521
+ borderDark: "rgba(190, 242, 100, 0.34)",
522
+ gradient: "radial-gradient(circle at 16% 8%, rgba(132, 204, 22, 0.36), transparent 26%), radial-gradient(circle at 86% 12%, rgba(34, 211, 238, 0.28), transparent 30%), linear-gradient(135deg, rgba(3, 7, 18, 0.96), rgba(8, 47, 73, 0.74))",
523
+ hero: "linear-gradient(135deg, rgba(132, 204, 22, 0.28), rgba(34, 211, 238, 0.18))"
524
+ },
525
+ skyline: {
526
+ ...neutralVibe,
527
+ id: "skyline",
528
+ label: "Skyline indigo",
529
+ primary: "#4f46e5",
530
+ accent: "#0ea5e9",
531
+ canvasLight: "#eef2ff",
532
+ canvasDark: "#0b1026",
533
+ shellLight: "rgba(238, 242, 255, 0.9)",
534
+ shellDark: "rgba(13, 20, 52, 0.88)",
535
+ surfaceDark: "rgba(30, 41, 86, 0.78)",
536
+ borderLight: "rgba(79, 70, 229, 0.28)",
537
+ gradient: "radial-gradient(circle at 18% 8%, rgba(79, 70, 229, 0.32), transparent 28%), radial-gradient(circle at 84% 12%, rgba(14, 165, 233, 0.28), transparent 30%)",
538
+ hero: "linear-gradient(135deg, rgba(79, 70, 229, 0.24), rgba(14, 165, 233, 0.18))"
539
+ },
540
+ aurora: {
541
+ ...neutralVibe,
542
+ id: "aurora",
543
+ label: "Aurora teal",
544
+ primary: "#0d9488",
545
+ accent: "#a3e635",
546
+ canvasLight: "#f0fdfa",
547
+ canvasDark: "#04211f",
548
+ shellLight: "rgba(240, 253, 250, 0.9)",
549
+ shellDark: "rgba(5, 44, 42, 0.88)",
550
+ surfaceDark: "rgba(19, 78, 74, 0.76)",
551
+ borderLight: "rgba(13, 148, 136, 0.28)",
552
+ gradient: "radial-gradient(circle at 16% 8%, rgba(45, 212, 191, 0.32), transparent 28%), radial-gradient(circle at 84% 14%, rgba(163, 230, 53, 0.22), transparent 30%)",
553
+ hero: "linear-gradient(135deg, rgba(13, 148, 136, 0.24), rgba(163, 230, 53, 0.16))"
554
+ },
555
+ coral: {
556
+ ...neutralVibe,
557
+ id: "coral",
558
+ label: "Coral bloom",
559
+ primary: "#db2777",
560
+ accent: "#fb7185",
561
+ canvasLight: "#fdf2f8",
562
+ canvasDark: "#251021",
563
+ shellLight: "rgba(253, 242, 248, 0.9)",
564
+ shellDark: "rgba(50, 18, 43, 0.88)",
565
+ surfaceDark: "rgba(80, 28, 66, 0.76)",
566
+ borderLight: "rgba(219, 39, 119, 0.28)",
567
+ gradient: "radial-gradient(circle at 16% 8%, rgba(219, 39, 119, 0.3), transparent 28%), radial-gradient(circle at 84% 14%, rgba(251, 113, 133, 0.24), transparent 30%)",
568
+ hero: "linear-gradient(135deg, rgba(219, 39, 119, 0.22), rgba(251, 113, 133, 0.18))"
569
+ },
570
+ mint: {
571
+ ...neutralVibe,
572
+ id: "mint",
573
+ label: "Mint circuit",
574
+ primary: "#059669",
575
+ accent: "#14b8a6",
576
+ canvasLight: "#ecfdf5",
577
+ canvasDark: "#031c16",
578
+ shellLight: "rgba(236, 253, 245, 0.9)",
579
+ shellDark: "rgba(5, 42, 34, 0.88)",
580
+ surfaceDark: "rgba(6, 78, 59, 0.74)",
581
+ borderLight: "rgba(5, 150, 105, 0.28)",
582
+ gradient: "radial-gradient(circle at 16% 8%, rgba(16, 185, 129, 0.3), transparent 28%), radial-gradient(circle at 84% 14%, rgba(20, 184, 166, 0.22), transparent 30%)",
583
+ hero: "linear-gradient(135deg, rgba(5, 150, 105, 0.24), rgba(20, 184, 166, 0.16))"
584
+ },
585
+ orchid: {
586
+ ...neutralVibe,
587
+ id: "orchid",
588
+ label: "Orchid signal",
589
+ primary: "#9333ea",
590
+ accent: "#ec4899",
591
+ canvasLight: "#faf5ff",
592
+ canvasDark: "#1d0b2f",
593
+ shellLight: "rgba(250, 245, 255, 0.9)",
594
+ shellDark: "rgba(39, 15, 63, 0.88)",
595
+ surfaceDark: "rgba(59, 25, 94, 0.78)",
596
+ borderLight: "rgba(147, 51, 234, 0.28)",
597
+ gradient: "radial-gradient(circle at 16% 8%, rgba(147, 51, 234, 0.32), transparent 28%), radial-gradient(circle at 84% 14%, rgba(236, 72, 153, 0.24), transparent 30%)",
598
+ hero: "linear-gradient(135deg, rgba(147, 51, 234, 0.24), rgba(236, 72, 153, 0.18))"
599
+ },
600
+ royal: {
601
+ ...neutralVibe,
602
+ id: "royal",
603
+ label: "Royal violet",
604
+ primary: "#7c3aed",
605
+ accent: "#06b6d4",
606
+ canvasLight: "#f5f3ff",
607
+ canvasDark: "#100a2d",
608
+ shellLight: "rgba(245, 243, 255, 0.9)",
609
+ shellDark: "rgba(21, 13, 59, 0.88)",
610
+ surfaceDark: "rgba(46, 26, 104, 0.78)",
611
+ borderLight: "rgba(124, 58, 237, 0.3)",
612
+ gradient: "radial-gradient(circle at 15% 9%, rgba(124, 58, 237, 0.34), transparent 28%), radial-gradient(circle at 82% 12%, rgba(6, 182, 212, 0.28), transparent 30%), radial-gradient(circle at 92% 72%, rgba(236, 72, 153, 0.2), transparent 26%)",
613
+ hero: "linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(6, 182, 212, 0.18), rgba(236, 72, 153, 0.18))"
614
+ }
615
+ };
616
+ function getGdsVibeThemes() {
617
+ return Object.values(vibeThemes);
618
+ }
619
+ function resolveGdsVibeTheme(id) {
620
+ return vibeThemes[id] ?? neutralVibe;
621
+ }
622
+ function getGdsVibeThemeCssVariables(id, colorScheme) {
623
+ const vibe = resolveGdsVibeTheme(id);
624
+ const dark = colorScheme === "dark";
625
+ return {
626
+ "--gds-vibe-primary": vibe.primary,
627
+ "--gds-vibe-accent": vibe.accent,
628
+ "--gds-vibe-glow": vibe.glow,
629
+ "--gds-vibe-canvas": dark ? vibe.canvasDark : vibe.canvasLight,
630
+ "--gds-vibe-shell": dark ? vibe.shellDark : vibe.shellLight,
631
+ "--gds-vibe-surface": dark ? vibe.surfaceDark : vibe.surfaceLight,
632
+ "--gds-vibe-border": dark ? vibe.borderDark : vibe.borderLight,
633
+ "--gds-vibe-text": dark ? vibe.textDark : vibe.textLight,
634
+ "--gds-vibe-muted": dark ? vibe.mutedDark : vibe.mutedLight,
635
+ "--gds-vibe-gradient": vibe.gradient,
636
+ "--gds-vibe-hero": vibe.hero
637
+ };
638
+ }
639
+
352
640
  // src/font-lanes.ts
353
641
  var import_core2 = require("@mantine/core");
354
642
  var lanes = [
@@ -458,9 +746,15 @@ function resolveDocumentScheme(selection) {
458
746
  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
459
747
  }
460
748
  function applyDocumentRuntime(selection) {
461
- document.documentElement.setAttribute("data-mantine-color-scheme", resolveDocumentScheme(selection));
749
+ const documentScheme = resolveDocumentScheme(selection);
750
+ const vibeVariables = getGdsVibeThemeCssVariables(selection.preset, documentScheme);
751
+ document.documentElement.setAttribute("data-mantine-color-scheme", documentScheme);
752
+ document.documentElement.setAttribute("data-gds-theme-preset", selection.preset);
462
753
  document.documentElement.setAttribute("data-gds-theme-runtime", selection.runtimeKey ?? `${selection.preset}-${selection.colorScheme}`);
463
754
  document.documentElement.setAttribute("data-gds-font-lane", selection.fontLane);
755
+ Object.entries(vibeVariables).forEach(([property, value]) => {
756
+ document.documentElement.style.setProperty(property, value);
757
+ });
464
758
  }
465
759
  function useGdsThemePresetState({
466
760
  storageKey = defaultStorageKey,
@@ -605,8 +899,11 @@ function showGdsNotification({
605
899
  gdsTheme,
606
900
  getGdsFontLanes,
607
901
  getGdsThemePresets,
902
+ getGdsVibeThemeCssVariables,
903
+ getGdsVibeThemes,
608
904
  resolveGdsFontLane,
609
905
  resolveGdsThemePreset,
906
+ resolveGdsVibeTheme,
610
907
  showGdsNotification,
611
908
  useGdsThemePresetState,
612
909
  useGdsTranslation,