@doneisbetter/gds-theme 3.0.2 → 3.0.4

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/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,
@@ -304,7 +307,8 @@ var customPresetThemes = {
304
307
  coral: createVibrantPresetTheme("pink"),
305
308
  mint: createVibrantPresetTheme("lime"),
306
309
  orchid: createVibrantPresetTheme("grape"),
307
- royal: createVibrantPresetTheme("violet")
310
+ royal: createVibrantPresetTheme("violet"),
311
+ cosmic: createVibrantPresetTheme("violet", { darkForward: true })
308
312
  };
309
313
  var themePresetCatalog = [
310
314
  { id: "default", label: "Default runtime theme", description: "Balanced, neutral baseline lane.", runtimeLane: "gdsTheme" },
@@ -323,7 +327,8 @@ var themePresetCatalog = [
323
327
  { id: "coral", label: "Coral bloom", description: "Expressive pink-coral lane for creator, commerce, and social products.", runtimeLane: "resolveGdsThemePreset(coral)" },
324
328
  { id: "mint", label: "Mint circuit", description: "Clean green-mint lane for health, learning, and growth products.", runtimeLane: "resolveGdsThemePreset(mint)" },
325
329
  { id: "orchid", label: "Orchid signal", description: "Purple-grape lane for editorial, culture, and premium tools.", runtimeLane: "resolveGdsThemePreset(orchid)" },
326
- { id: "royal", label: "Royal violet", description: "Confident violet lane for SaaS dashboards and professional apps.", runtimeLane: "resolveGdsThemePreset(royal)" }
330
+ { id: "royal", label: "Royal violet", description: "Confident violet lane for SaaS dashboards and professional apps.", runtimeLane: "resolveGdsThemePreset(royal)" },
331
+ { id: "cosmic", label: "Cosmic burst", description: "Highly saturated blue-violet-cyan-magenta showcase lane for bold public apps and launch surfaces.", runtimeLane: "resolveGdsThemePreset(cosmic)" }
327
332
  ];
328
333
  function getGdsThemePresets() {
329
334
  return themePresetCatalog;
@@ -349,6 +354,312 @@ function resolveGdsThemePreset(id, options) {
349
354
  }
350
355
  }
351
356
 
357
+ // src/vibe-themes.ts
358
+ var neutralVibe = {
359
+ id: "default",
360
+ label: "Default runtime theme",
361
+ primary: "#7c3aed",
362
+ accent: "#06b6d4",
363
+ glow: "rgba(124, 58, 237, 0.2)",
364
+ canvasLight: "#f8fafc",
365
+ canvasDark: "#0f172a",
366
+ shellLight: "rgba(255, 255, 255, 0.82)",
367
+ shellDark: "rgba(15, 23, 42, 0.84)",
368
+ surfaceLight: "rgba(255, 255, 255, 0.9)",
369
+ surfaceDark: "rgba(30, 41, 59, 0.82)",
370
+ borderLight: "rgba(124, 58, 237, 0.22)",
371
+ borderDark: "rgba(167, 139, 250, 0.28)",
372
+ textLight: "#111827",
373
+ textDark: "#f8fafc",
374
+ mutedLight: "#64748b",
375
+ mutedDark: "#cbd5e1",
376
+ 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%)",
377
+ hero: "linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(6, 182, 212, 0.12))"
378
+ };
379
+ var vibeThemes = {
380
+ default: neutralVibe,
381
+ "dark-public": {
382
+ ...neutralVibe,
383
+ id: "dark-public",
384
+ label: "Dark public theme",
385
+ primary: "#8b5cf6",
386
+ accent: "#22d3ee",
387
+ canvasLight: "#f5f3ff",
388
+ canvasDark: "#050816",
389
+ shellDark: "rgba(8, 13, 32, 0.88)",
390
+ surfaceDark: "rgba(18, 24, 52, 0.86)",
391
+ 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%)",
392
+ hero: "linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(34, 211, 238, 0.14))"
393
+ },
394
+ "flat-surface": {
395
+ ...neutralVibe,
396
+ id: "flat-surface",
397
+ label: "Flat surface theme",
398
+ primary: "#2563eb",
399
+ accent: "#14b8a6",
400
+ canvasLight: "#f8fafc",
401
+ canvasDark: "#111827",
402
+ shellLight: "rgba(248, 250, 252, 0.94)",
403
+ surfaceLight: "rgba(255, 255, 255, 0.94)",
404
+ gradient: "linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(20, 184, 166, 0.08))",
405
+ hero: "linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(20, 184, 166, 0.1))"
406
+ },
407
+ editorial: {
408
+ ...neutralVibe,
409
+ id: "editorial",
410
+ label: "Editorial serif theme",
411
+ primary: "#9a3412",
412
+ accent: "#be123c",
413
+ canvasLight: "#fff7ed",
414
+ canvasDark: "#1c1917",
415
+ shellLight: "rgba(255, 247, 237, 0.9)",
416
+ surfaceLight: "rgba(255, 251, 247, 0.92)",
417
+ borderLight: "rgba(154, 52, 18, 0.22)",
418
+ 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%)",
419
+ hero: "linear-gradient(135deg, rgba(251, 146, 60, 0.18), rgba(190, 18, 60, 0.12))"
420
+ },
421
+ brand: {
422
+ ...neutralVibe,
423
+ id: "brand",
424
+ label: "Brand theme generator"
425
+ },
426
+ sunset: {
427
+ ...neutralVibe,
428
+ id: "sunset",
429
+ label: "Sunset pulse",
430
+ primary: "#f97316",
431
+ accent: "#ec4899",
432
+ glow: "rgba(249, 115, 22, 0.3)",
433
+ canvasLight: "#fff7ed",
434
+ canvasDark: "#211106",
435
+ shellLight: "rgba(255, 247, 237, 0.9)",
436
+ shellDark: "rgba(44, 18, 10, 0.88)",
437
+ surfaceLight: "rgba(255, 250, 245, 0.9)",
438
+ surfaceDark: "rgba(68, 24, 12, 0.78)",
439
+ borderLight: "rgba(249, 115, 22, 0.3)",
440
+ borderDark: "rgba(251, 146, 60, 0.36)",
441
+ 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))",
442
+ hero: "linear-gradient(135deg, rgba(249, 115, 22, 0.26), rgba(236, 72, 153, 0.22))"
443
+ },
444
+ oceanic: {
445
+ ...neutralVibe,
446
+ id: "oceanic",
447
+ label: "Oceanic wave",
448
+ primary: "#0891b2",
449
+ accent: "#2563eb",
450
+ glow: "rgba(8, 145, 178, 0.28)",
451
+ canvasLight: "#ecfeff",
452
+ canvasDark: "#04131f",
453
+ shellLight: "rgba(236, 254, 255, 0.88)",
454
+ shellDark: "rgba(5, 26, 44, 0.88)",
455
+ surfaceLight: "rgba(248, 253, 255, 0.9)",
456
+ surfaceDark: "rgba(8, 47, 73, 0.78)",
457
+ borderLight: "rgba(8, 145, 178, 0.28)",
458
+ borderDark: "rgba(103, 232, 249, 0.28)",
459
+ 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))",
460
+ hero: "linear-gradient(135deg, rgba(8, 145, 178, 0.24), rgba(37, 99, 235, 0.2))"
461
+ },
462
+ forest: {
463
+ ...neutralVibe,
464
+ id: "forest",
465
+ label: "Forest signal",
466
+ primary: "#16a34a",
467
+ accent: "#84cc16",
468
+ glow: "rgba(22, 163, 74, 0.28)",
469
+ canvasLight: "#f0fdf4",
470
+ canvasDark: "#06180d",
471
+ shellLight: "rgba(240, 253, 244, 0.9)",
472
+ shellDark: "rgba(8, 35, 19, 0.88)",
473
+ surfaceLight: "rgba(250, 255, 251, 0.9)",
474
+ surfaceDark: "rgba(20, 83, 45, 0.72)",
475
+ borderLight: "rgba(22, 163, 74, 0.26)",
476
+ borderDark: "rgba(134, 239, 172, 0.28)",
477
+ 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%)",
478
+ hero: "linear-gradient(135deg, rgba(22, 163, 74, 0.22), rgba(132, 204, 22, 0.18))"
479
+ },
480
+ ruby: {
481
+ ...neutralVibe,
482
+ id: "ruby",
483
+ label: "Ruby spark",
484
+ primary: "#e11d48",
485
+ accent: "#f97316",
486
+ canvasLight: "#fff1f2",
487
+ canvasDark: "#22050c",
488
+ shellLight: "rgba(255, 241, 242, 0.9)",
489
+ shellDark: "rgba(50, 8, 18, 0.88)",
490
+ surfaceDark: "rgba(76, 20, 32, 0.76)",
491
+ borderLight: "rgba(225, 29, 72, 0.28)",
492
+ 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%)",
493
+ hero: "linear-gradient(135deg, rgba(225, 29, 72, 0.24), rgba(249, 115, 22, 0.18))"
494
+ },
495
+ amber: {
496
+ ...neutralVibe,
497
+ id: "amber",
498
+ label: "Amber glow",
499
+ primary: "#d97706",
500
+ accent: "#eab308",
501
+ canvasLight: "#fffbeb",
502
+ canvasDark: "#1f1604",
503
+ shellLight: "rgba(255, 251, 235, 0.9)",
504
+ shellDark: "rgba(41, 29, 6, 0.88)",
505
+ surfaceDark: "rgba(69, 46, 10, 0.76)",
506
+ borderLight: "rgba(217, 119, 6, 0.28)",
507
+ 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%)",
508
+ hero: "linear-gradient(135deg, rgba(217, 119, 6, 0.22), rgba(234, 179, 8, 0.2))"
509
+ },
510
+ "neon-night": {
511
+ ...neutralVibe,
512
+ id: "neon-night",
513
+ label: "Neon night",
514
+ primary: "#84cc16",
515
+ accent: "#22d3ee",
516
+ glow: "rgba(132, 204, 22, 0.34)",
517
+ canvasLight: "#f7fee7",
518
+ canvasDark: "#030712",
519
+ shellLight: "rgba(247, 254, 231, 0.88)",
520
+ shellDark: "rgba(5, 12, 24, 0.9)",
521
+ surfaceDark: "rgba(12, 23, 36, 0.86)",
522
+ borderLight: "rgba(132, 204, 22, 0.3)",
523
+ borderDark: "rgba(190, 242, 100, 0.34)",
524
+ 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))",
525
+ hero: "linear-gradient(135deg, rgba(132, 204, 22, 0.28), rgba(34, 211, 238, 0.18))"
526
+ },
527
+ skyline: {
528
+ ...neutralVibe,
529
+ id: "skyline",
530
+ label: "Skyline indigo",
531
+ primary: "#4f46e5",
532
+ accent: "#0ea5e9",
533
+ canvasLight: "#eef2ff",
534
+ canvasDark: "#0b1026",
535
+ shellLight: "rgba(238, 242, 255, 0.9)",
536
+ shellDark: "rgba(13, 20, 52, 0.88)",
537
+ surfaceDark: "rgba(30, 41, 86, 0.78)",
538
+ borderLight: "rgba(79, 70, 229, 0.28)",
539
+ 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%)",
540
+ hero: "linear-gradient(135deg, rgba(79, 70, 229, 0.24), rgba(14, 165, 233, 0.18))"
541
+ },
542
+ aurora: {
543
+ ...neutralVibe,
544
+ id: "aurora",
545
+ label: "Aurora teal",
546
+ primary: "#0d9488",
547
+ accent: "#a3e635",
548
+ canvasLight: "#f0fdfa",
549
+ canvasDark: "#04211f",
550
+ shellLight: "rgba(240, 253, 250, 0.9)",
551
+ shellDark: "rgba(5, 44, 42, 0.88)",
552
+ surfaceDark: "rgba(19, 78, 74, 0.76)",
553
+ borderLight: "rgba(13, 148, 136, 0.28)",
554
+ 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%)",
555
+ hero: "linear-gradient(135deg, rgba(13, 148, 136, 0.24), rgba(163, 230, 53, 0.16))"
556
+ },
557
+ coral: {
558
+ ...neutralVibe,
559
+ id: "coral",
560
+ label: "Coral bloom",
561
+ primary: "#db2777",
562
+ accent: "#fb7185",
563
+ canvasLight: "#fdf2f8",
564
+ canvasDark: "#251021",
565
+ shellLight: "rgba(253, 242, 248, 0.9)",
566
+ shellDark: "rgba(50, 18, 43, 0.88)",
567
+ surfaceDark: "rgba(80, 28, 66, 0.76)",
568
+ borderLight: "rgba(219, 39, 119, 0.28)",
569
+ 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%)",
570
+ hero: "linear-gradient(135deg, rgba(219, 39, 119, 0.22), rgba(251, 113, 133, 0.18))"
571
+ },
572
+ mint: {
573
+ ...neutralVibe,
574
+ id: "mint",
575
+ label: "Mint circuit",
576
+ primary: "#059669",
577
+ accent: "#14b8a6",
578
+ canvasLight: "#ecfdf5",
579
+ canvasDark: "#031c16",
580
+ shellLight: "rgba(236, 253, 245, 0.9)",
581
+ shellDark: "rgba(5, 42, 34, 0.88)",
582
+ surfaceDark: "rgba(6, 78, 59, 0.74)",
583
+ borderLight: "rgba(5, 150, 105, 0.28)",
584
+ 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%)",
585
+ hero: "linear-gradient(135deg, rgba(5, 150, 105, 0.24), rgba(20, 184, 166, 0.16))"
586
+ },
587
+ orchid: {
588
+ ...neutralVibe,
589
+ id: "orchid",
590
+ label: "Orchid signal",
591
+ primary: "#9333ea",
592
+ accent: "#ec4899",
593
+ canvasLight: "#faf5ff",
594
+ canvasDark: "#1d0b2f",
595
+ shellLight: "rgba(250, 245, 255, 0.9)",
596
+ shellDark: "rgba(39, 15, 63, 0.88)",
597
+ surfaceDark: "rgba(59, 25, 94, 0.78)",
598
+ borderLight: "rgba(147, 51, 234, 0.28)",
599
+ 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%)",
600
+ hero: "linear-gradient(135deg, rgba(147, 51, 234, 0.24), rgba(236, 72, 153, 0.18))"
601
+ },
602
+ royal: {
603
+ ...neutralVibe,
604
+ id: "royal",
605
+ label: "Royal violet",
606
+ primary: "#7c3aed",
607
+ accent: "#06b6d4",
608
+ canvasLight: "#f5f3ff",
609
+ canvasDark: "#100a2d",
610
+ shellLight: "rgba(245, 243, 255, 0.9)",
611
+ shellDark: "rgba(21, 13, 59, 0.88)",
612
+ surfaceDark: "rgba(46, 26, 104, 0.78)",
613
+ borderLight: "rgba(124, 58, 237, 0.3)",
614
+ 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%)",
615
+ hero: "linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(6, 182, 212, 0.18), rgba(236, 72, 153, 0.18))"
616
+ },
617
+ cosmic: {
618
+ id: "cosmic",
619
+ label: "Cosmic burst",
620
+ primary: "#7c3cff",
621
+ accent: "#e018ff",
622
+ glow: "rgba(224, 24, 255, 0.36)",
623
+ canvasLight: "#071a80",
624
+ canvasDark: "#030018",
625
+ shellLight: "rgba(10, 18, 70, 0.72)",
626
+ shellDark: "rgba(8, 10, 42, 0.84)",
627
+ surfaceLight: "rgba(10, 18, 70, 0.62)",
628
+ surfaceDark: "rgba(9, 14, 54, 0.76)",
629
+ borderLight: "rgba(190, 160, 255, 0.45)",
630
+ borderDark: "rgba(190, 160, 255, 0.52)",
631
+ textLight: "#ffffff",
632
+ textDark: "#ffffff",
633
+ mutedLight: "rgba(235, 238, 255, 0.76)",
634
+ mutedDark: "rgba(235, 238, 255, 0.78)",
635
+ gradient: "radial-gradient(circle at 92% 32%, rgba(255, 180, 70, 0.95) 0 8%, transparent 22%), radial-gradient(circle at 84% 42%, rgba(255, 45, 190, 0.75) 0 12%, transparent 28%), radial-gradient(circle at 72% 18%, rgba(0, 220, 255, 0.55) 0 11%, transparent 28%), radial-gradient(circle at 22% 82%, rgba(255, 60, 210, 0.35) 0 5%, transparent 16%), linear-gradient(135deg, #19005c 0%, #071a80 38%, #003fd1 63%, #4d08a8 100%)",
636
+ hero: "linear-gradient(135deg, rgba(124, 60, 255, 0.84), rgba(224, 24, 255, 0.62), rgba(255, 155, 61, 0.72))"
637
+ }
638
+ };
639
+ function getGdsVibeThemes() {
640
+ return Object.values(vibeThemes);
641
+ }
642
+ function resolveGdsVibeTheme(id) {
643
+ return vibeThemes[id] ?? neutralVibe;
644
+ }
645
+ function getGdsVibeThemeCssVariables(id, colorScheme) {
646
+ const vibe = resolveGdsVibeTheme(id);
647
+ const dark = colorScheme === "dark";
648
+ return {
649
+ "--gds-vibe-primary": vibe.primary,
650
+ "--gds-vibe-accent": vibe.accent,
651
+ "--gds-vibe-glow": vibe.glow,
652
+ "--gds-vibe-canvas": dark ? vibe.canvasDark : vibe.canvasLight,
653
+ "--gds-vibe-shell": dark ? vibe.shellDark : vibe.shellLight,
654
+ "--gds-vibe-surface": dark ? vibe.surfaceDark : vibe.surfaceLight,
655
+ "--gds-vibe-border": dark ? vibe.borderDark : vibe.borderLight,
656
+ "--gds-vibe-text": dark ? vibe.textDark : vibe.textLight,
657
+ "--gds-vibe-muted": dark ? vibe.mutedDark : vibe.mutedLight,
658
+ "--gds-vibe-gradient": vibe.gradient,
659
+ "--gds-vibe-hero": vibe.hero
660
+ };
661
+ }
662
+
352
663
  // src/font-lanes.ts
353
664
  var import_core2 = require("@mantine/core");
354
665
  var lanes = [
@@ -458,9 +769,15 @@ function resolveDocumentScheme(selection) {
458
769
  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
459
770
  }
460
771
  function applyDocumentRuntime(selection) {
461
- document.documentElement.setAttribute("data-mantine-color-scheme", resolveDocumentScheme(selection));
772
+ const documentScheme = resolveDocumentScheme(selection);
773
+ const vibeVariables = getGdsVibeThemeCssVariables(selection.preset, documentScheme);
774
+ document.documentElement.setAttribute("data-mantine-color-scheme", documentScheme);
775
+ document.documentElement.setAttribute("data-gds-theme-preset", selection.preset);
462
776
  document.documentElement.setAttribute("data-gds-theme-runtime", selection.runtimeKey ?? `${selection.preset}-${selection.colorScheme}`);
463
777
  document.documentElement.setAttribute("data-gds-font-lane", selection.fontLane);
778
+ Object.entries(vibeVariables).forEach(([property, value]) => {
779
+ document.documentElement.style.setProperty(property, value);
780
+ });
464
781
  }
465
782
  function useGdsThemePresetState({
466
783
  storageKey = defaultStorageKey,
@@ -605,8 +922,11 @@ function showGdsNotification({
605
922
  gdsTheme,
606
923
  getGdsFontLanes,
607
924
  getGdsThemePresets,
925
+ getGdsVibeThemeCssVariables,
926
+ getGdsVibeThemes,
608
927
  resolveGdsFontLane,
609
928
  resolveGdsThemePreset,
929
+ resolveGdsVibeTheme,
610
930
  showGdsNotification,
611
931
  useGdsThemePresetState,
612
932
  useGdsTranslation,
package/dist/client.mjs CHANGED
@@ -4,7 +4,7 @@ import {
4
4
  showGdsNotification,
5
5
  useGdsThemePresetState,
6
6
  useGdsTranslation
7
- } from "./chunk-E55P7FOX.mjs";
7
+ } from "./chunk-7XQ45NO6.mjs";
8
8
  import {
9
9
  applyGdsFontLane,
10
10
  createPublicBrandTheme,
@@ -15,10 +15,13 @@ import {
15
15
  gdsTheme,
16
16
  getGdsFontLanes,
17
17
  getGdsThemePresets,
18
+ getGdsVibeThemeCssVariables,
19
+ getGdsVibeThemes,
18
20
  resolveGdsFontLane,
19
21
  resolveGdsThemePreset,
22
+ resolveGdsVibeTheme,
20
23
  withGdsMotion
21
- } from "./chunk-TAPLA36E.mjs";
24
+ } from "./chunk-3QN7LJN7.mjs";
22
25
  export {
23
26
  GdsProvider,
24
27
  applyGdsFontLane,
@@ -31,8 +34,11 @@ export {
31
34
  gdsTheme,
32
35
  getGdsFontLanes,
33
36
  getGdsThemePresets,
37
+ getGdsVibeThemeCssVariables,
38
+ getGdsVibeThemes,
34
39
  resolveGdsFontLane,
35
40
  resolveGdsThemePreset,
41
+ resolveGdsVibeTheme,
36
42
  showGdsNotification,
37
43
  useGdsThemePresetState,
38
44
  useGdsTranslation,
package/dist/index.d.mts CHANGED
@@ -1,4 +1,4 @@
1
- export { GdsFontLane, GdsFontLaneId, GdsThemePreset, GdsThemePresetId, applyGdsFontLane, createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, getGdsFontLanes, getGdsThemePresets, resolveGdsFontLane, resolveGdsThemePreset, withGdsMotion } from './server.mjs';
1
+ export { GdsFontLane, GdsFontLaneId, GdsThemePreset, GdsThemePresetId, GdsVibeTheme, applyGdsFontLane, createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, getGdsFontLanes, getGdsThemePresets, getGdsVibeThemeCssVariables, getGdsVibeThemes, resolveGdsFontLane, resolveGdsThemePreset, resolveGdsVibeTheme, withGdsMotion } from './server.mjs';
2
2
  export { GdsNotificationOptions, GdsNotificationTone, GdsProvider, GdsProviderProps, GdsStoredThemePresetState, GdsThemePresetSelection, GdsThemeScheme, UseGdsThemePresetStateOptions, UseGdsThemePresetStateResult, createGdsThemePresetSelection, showGdsNotification, useGdsThemePresetState, useGdsTranslation } from './client.mjs';
3
3
  import '@mantine/core';
4
4
  import 'react/jsx-runtime';
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export { GdsFontLane, GdsFontLaneId, GdsThemePreset, GdsThemePresetId, applyGdsFontLane, createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, getGdsFontLanes, getGdsThemePresets, resolveGdsFontLane, resolveGdsThemePreset, withGdsMotion } from './server.js';
1
+ export { GdsFontLane, GdsFontLaneId, GdsThemePreset, GdsThemePresetId, GdsVibeTheme, applyGdsFontLane, createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, getGdsFontLanes, getGdsThemePresets, getGdsVibeThemeCssVariables, getGdsVibeThemes, resolveGdsFontLane, resolveGdsThemePreset, resolveGdsVibeTheme, withGdsMotion } from './server.js';
2
2
  export { GdsNotificationOptions, GdsNotificationTone, GdsProvider, GdsProviderProps, GdsStoredThemePresetState, GdsThemePresetSelection, GdsThemeScheme, UseGdsThemePresetStateOptions, UseGdsThemePresetStateResult, createGdsThemePresetSelection, showGdsNotification, useGdsThemePresetState, useGdsTranslation } from './client.js';
3
3
  import '@mantine/core';
4
4
  import 'react/jsx-runtime';