@doneisbetter/gds-theme 3.0.2 → 3.0.4

package/dist/chunk-3QN7LJN7.mjs

@@ -0,0 +1,665 @@
+// src/theme.ts
+import { DEFAULT_THEME, createTheme, mergeMantineTheme, mergeThemeOverrides } from "@mantine/core";
+var baseTheme = mergeMantineTheme(DEFAULT_THEME, createTheme({
+  primaryColor: "violet",
+  fontFamily: "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif",
+  fontSmoothing: true,
+  defaultRadius: "md",
+  black: "#111827",
+  white: "#ffffff",
+  headings: {
+    fontFamily: "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif",
+    sizes: {
+      h1: { fontSize: "2.5rem", fontWeight: "800" },
+      h2: { fontSize: "1.75rem", fontWeight: "700" },
+      h3: { fontSize: "1.25rem", fontWeight: "600" }
+    }
+  },
+  shadows: {
+    md: "0 8px 24px rgba(15, 23, 42, 0.08)",
+    lg: "0 16px 40px rgba(15, 23, 42, 0.12)"
+  },
+  components: {
+    Button: {
+      defaultProps: {
+        radius: "md",
+        size: "sm",
+        fw: 600
+      }
+    },
+    Card: {
+      defaultProps: {
+        radius: "lg",
+        shadow: "sm",
+        withBorder: true
+      },
+      styles: {
+        root: {
+          background: "var(--mantine-color-body)"
+        }
+      }
+    },
+    Paper: {
+      defaultProps: {
+        radius: "lg",
+        withBorder: true
+      }
+    },
+    TextInput: {
+      defaultProps: {
+        radius: "md"
+      }
+    },
+    Table: {
+      defaultProps: {
+        highlightOnHover: true,
+        verticalSpacing: "md"
+      }
+    },
+    Badge: {
+      defaultProps: {
+        radius: "xl"
+      }
+    }
+  }
+}));
+var gdsTheme = baseTheme;
+var gdsDarkPublicTheme = extendGdsTheme({
+  primaryColor: "violet",
+  components: {
+    AppShell: {
+      styles: {
+        main: {
+          background: "var(--mantine-color-dark-8)"
+        }
+      }
+    },
+    Card: {
+      styles: {
+        root: {
+          background: "var(--mantine-color-dark-7)",
+          borderColor: "var(--mantine-color-dark-4)"
+        }
+      }
+    },
+    Paper: {
+      styles: {
+        root: {
+          background: "var(--mantine-color-dark-7)",
+          borderColor: "var(--mantine-color-dark-4)"
+        }
+      }
+    },
+    Table: {
+      styles: {
+        table: {
+          color: "var(--mantine-color-gray-0)"
+        }
+      }
+    }
+  }
+});
+var gdsFlatSurfaceTheme = extendGdsTheme({
+  shadows: {
+    xs: "none",
+    sm: "none",
+    md: "none",
+    lg: "none",
+    xl: "none"
+  },
+  components: {
+    Card: {
+      defaultProps: {
+        shadow: void 0,
+        withBorder: true
+      }
+    },
+    Paper: {
+      defaultProps: {
+        withBorder: true
+      }
+    }
+  }
+});
+var gdsEditorialPublicTheme = extendGdsTheme({
+  headings: {
+    fontFamily: '"Instrument Serif", Georgia, "Times New Roman", serif',
+    sizes: {
+      h1: { fontSize: "2.75rem", fontWeight: "700" },
+      h2: { fontSize: "2rem", fontWeight: "700" },
+      h3: { fontSize: "1.375rem", fontWeight: "600" }
+    }
+  },
+  shadows: {
+    xs: "none",
+    sm: "none",
+    md: "none",
+    lg: "none",
+    xl: "none"
+  },
+  components: {
+    Card: {
+      defaultProps: {
+        shadow: void 0,
+        withBorder: true
+      }
+    },
+    Paper: {
+      defaultProps: {
+        withBorder: true
+      }
+    }
+  }
+});
+function composeGdsTheme(overrides = {}) {
+  return mergeMantineTheme(baseTheme, overrides);
+}
+function createPublicBrandTheme({
+  editorialSerif = false,
+  flatSurfaces = false,
+  overrides = {}
+} = {}) {
+  const layeredOverrides = [];
+  if (flatSurfaces) {
+    layeredOverrides.push(gdsFlatSurfaceTheme);
+  }
+  if (editorialSerif) {
+    layeredOverrides.push(gdsEditorialPublicTheme);
+  }
+  layeredOverrides.push(overrides);
+  const mergedOverrides = layeredOverrides.reduce(
+    (theme, layer) => mergeThemeOverrides(theme, layer),
+    {}
+  );
+  return composeGdsTheme(mergedOverrides);
+}
+function extendGdsTheme(overrides = {}) {
+  return composeGdsTheme(overrides);
+}
+function withGdsMotion(overrides = {}) {
+  return extendGdsTheme(
+    mergeThemeOverrides(
+      {
+        components: {
+          Button: {
+            styles: {
+              root: {
+                transition: "transform 150ms ease, filter 120ms ease",
+                "&:hover": {
+                  transform: "translateY(-1px)",
+                  filter: "brightness(1.05)"
+                },
+                "&:active": {
+                  transform: "translateY(0)",
+                  filter: "brightness(0.95)"
+                }
+              }
+            }
+          },
+          Card: {
+            styles: {
+              root: {
+                transition: "transform 150ms ease, box-shadow 150ms ease"
+              }
+            }
+          }
+        }
+      },
+      overrides
+    )
+  );
+}
+
+// src/theme-presets.ts
+function createVibrantPresetTheme(primaryColor, options = {}) {
+  const darkSurface = options.darkForward ? `color-mix(in srgb, var(--mantine-color-${primaryColor}-9) 18%, var(--mantine-color-dark-8))` : "var(--mantine-color-dark-8)";
+  return extendGdsTheme({
+    primaryColor,
+    components: {
+      AppShell: {
+        styles: {
+          main: {
+            background: `light-dark(color-mix(in srgb, var(--mantine-color-${primaryColor}-0) 58%, var(--mantine-color-white)), ${darkSurface})`
+          },
+          header: {
+            background: `light-dark(color-mix(in srgb, var(--mantine-color-${primaryColor}-0) 68%, var(--mantine-color-white)), var(--mantine-color-dark-8))`,
+            borderColor: `light-dark(var(--mantine-color-${primaryColor}-2), var(--mantine-color-dark-5))`
+          },
+          navbar: {
+            background: `light-dark(color-mix(in srgb, var(--mantine-color-${primaryColor}-0) 48%, var(--mantine-color-white)), var(--mantine-color-dark-8))`,
+            borderColor: `light-dark(var(--mantine-color-${primaryColor}-2), var(--mantine-color-dark-5))`
+          }
+        }
+      },
+      Card: {
+        styles: {
+          root: {
+            background: `light-dark(var(--mantine-color-white), color-mix(in srgb, var(--mantine-color-${primaryColor}-9) 10%, var(--mantine-color-dark-7)))`,
+            borderColor: `light-dark(var(--mantine-color-${primaryColor}-2), var(--mantine-color-dark-4))`
+          }
+        }
+      },
+      Paper: {
+        styles: {
+          root: {
+            background: `light-dark(color-mix(in srgb, var(--mantine-color-${primaryColor}-0) 16%, var(--mantine-color-white)), color-mix(in srgb, var(--mantine-color-${primaryColor}-9) 8%, var(--mantine-color-dark-7)))`,
+            borderColor: `light-dark(var(--mantine-color-${primaryColor}-2), var(--mantine-color-dark-4))`
+          }
+        }
+      }
+    }
+  });
+}
+var customPresetThemes = {
+  sunset: createVibrantPresetTheme("orange"),
+  oceanic: createVibrantPresetTheme("cyan"),
+  forest: createVibrantPresetTheme("green"),
+  ruby: createVibrantPresetTheme("red"),
+  amber: createVibrantPresetTheme("yellow"),
+  "neon-night": createVibrantPresetTheme("lime", { darkForward: true }),
+  skyline: createVibrantPresetTheme("indigo"),
+  aurora: createVibrantPresetTheme("teal"),
+  coral: createVibrantPresetTheme("pink"),
+  mint: createVibrantPresetTheme("lime"),
+  orchid: createVibrantPresetTheme("grape"),
+  royal: createVibrantPresetTheme("violet"),
+  cosmic: createVibrantPresetTheme("violet", { darkForward: true })
+};
+var themePresetCatalog = [
+  { id: "default", label: "Default runtime theme", description: "Balanced, neutral baseline lane.", runtimeLane: "gdsTheme" },
+  { id: "dark-public", label: "Dark public theme", description: "Dark-first public lane.", runtimeLane: "gdsDarkPublicTheme" },
+  { id: "flat-surface", label: "Flat surface theme", description: "Lower-elevation operational lane.", runtimeLane: "gdsFlatSurfaceTheme" },
+  { id: "editorial", label: "Editorial serif theme", description: "Reading-first, serif headline lane.", runtimeLane: "gdsEditorialPublicTheme" },
+  { id: "brand", label: "Brand theme generator", description: "Governed brand composition lane.", runtimeLane: "createPublicBrandTheme(...)" },
+  { id: "sunset", label: "Sunset pulse", description: "Warm orange-magenta vibrant lane.", runtimeLane: "resolveGdsThemePreset(sunset)" },
+  { id: "oceanic", label: "Oceanic wave", description: "Cool cyan-blue vibrant lane.", runtimeLane: "resolveGdsThemePreset(oceanic)" },
+  { id: "forest", label: "Forest signal", description: "Natural emerald-driven vibrant lane.", runtimeLane: "resolveGdsThemePreset(forest)" },
+  { id: "ruby", label: "Ruby spark", description: "Bold red high-contrast lane.", runtimeLane: "resolveGdsThemePreset(ruby)" },
+  { id: "amber", label: "Amber glow", description: "Golden yellow energetic lane.", runtimeLane: "resolveGdsThemePreset(amber)" },
+  { id: "neon-night", label: "Neon night", description: "Lime-accented dark-forward lane.", runtimeLane: "resolveGdsThemePreset(neon-night)" },
+  { id: "skyline", label: "Skyline indigo", description: "Indigo technology-forward lane.", runtimeLane: "resolveGdsThemePreset(skyline)" },
+  { id: "aurora", label: "Aurora teal", description: "Fresh teal-cyan app lane for optimistic product surfaces.", runtimeLane: "resolveGdsThemePreset(aurora)" },
+  { id: "coral", label: "Coral bloom", description: "Expressive pink-coral lane for creator, commerce, and social products.", runtimeLane: "resolveGdsThemePreset(coral)" },
+  { id: "mint", label: "Mint circuit", description: "Clean green-mint lane for health, learning, and growth products.", runtimeLane: "resolveGdsThemePreset(mint)" },
+  { id: "orchid", label: "Orchid signal", description: "Purple-grape lane for editorial, culture, and premium tools.", runtimeLane: "resolveGdsThemePreset(orchid)" },
+  { id: "royal", label: "Royal violet", description: "Confident violet lane for SaaS dashboards and professional apps.", runtimeLane: "resolveGdsThemePreset(royal)" },
+  { id: "cosmic", label: "Cosmic burst", description: "Highly saturated blue-violet-cyan-magenta showcase lane for bold public apps and launch surfaces.", runtimeLane: "resolveGdsThemePreset(cosmic)" }
+];
+function getGdsThemePresets() {
+  return themePresetCatalog;
+}
+function resolveGdsThemePreset(id, options) {
+  switch (id) {
+    case "default":
+      return gdsTheme;
+    case "dark-public":
+      return gdsDarkPublicTheme;
+    case "flat-surface":
+      return gdsFlatSurfaceTheme;
+    case "editorial":
+      return gdsEditorialPublicTheme;
+    case "brand":
+      return createPublicBrandTheme({
+        editorialSerif: options?.brandEditorialSerif ?? false,
+        flatSurfaces: options?.brandFlatSurfaces ?? true,
+        overrides: { primaryColor: options?.brandPrimary ?? "blue" }
+      });
+    default:
+      return customPresetThemes[id] ?? gdsTheme;
+  }
+}
+
+// src/vibe-themes.ts
+var neutralVibe = {
+  id: "default",
+  label: "Default runtime theme",
+  primary: "#7c3aed",
+  accent: "#06b6d4",
+  glow: "rgba(124, 58, 237, 0.2)",
+  canvasLight: "#f8fafc",
+  canvasDark: "#0f172a",
+  shellLight: "rgba(255, 255, 255, 0.82)",
+  shellDark: "rgba(15, 23, 42, 0.84)",
+  surfaceLight: "rgba(255, 255, 255, 0.9)",
+  surfaceDark: "rgba(30, 41, 59, 0.82)",
+  borderLight: "rgba(124, 58, 237, 0.22)",
+  borderDark: "rgba(167, 139, 250, 0.28)",
+  textLight: "#111827",
+  textDark: "#f8fafc",
+  mutedLight: "#64748b",
+  mutedDark: "#cbd5e1",
+  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%)",
+  hero: "linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(6, 182, 212, 0.12))"
+};
+var vibeThemes = {
+  default: neutralVibe,
+  "dark-public": {
+    ...neutralVibe,
+    id: "dark-public",
+    label: "Dark public theme",
+    primary: "#8b5cf6",
+    accent: "#22d3ee",
+    canvasLight: "#f5f3ff",
+    canvasDark: "#050816",
+    shellDark: "rgba(8, 13, 32, 0.88)",
+    surfaceDark: "rgba(18, 24, 52, 0.86)",
+    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%)",
+    hero: "linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(34, 211, 238, 0.14))"
+  },
+  "flat-surface": {
+    ...neutralVibe,
+    id: "flat-surface",
+    label: "Flat surface theme",
+    primary: "#2563eb",
+    accent: "#14b8a6",
+    canvasLight: "#f8fafc",
+    canvasDark: "#111827",
+    shellLight: "rgba(248, 250, 252, 0.94)",
+    surfaceLight: "rgba(255, 255, 255, 0.94)",
+    gradient: "linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(20, 184, 166, 0.08))",
+    hero: "linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(20, 184, 166, 0.1))"
+  },
+  editorial: {
+    ...neutralVibe,
+    id: "editorial",
+    label: "Editorial serif theme",
+    primary: "#9a3412",
+    accent: "#be123c",
+    canvasLight: "#fff7ed",
+    canvasDark: "#1c1917",
+    shellLight: "rgba(255, 247, 237, 0.9)",
+    surfaceLight: "rgba(255, 251, 247, 0.92)",
+    borderLight: "rgba(154, 52, 18, 0.22)",
+    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%)",
+    hero: "linear-gradient(135deg, rgba(251, 146, 60, 0.18), rgba(190, 18, 60, 0.12))"
+  },
+  brand: {
+    ...neutralVibe,
+    id: "brand",
+    label: "Brand theme generator"
+  },
+  sunset: {
+    ...neutralVibe,
+    id: "sunset",
+    label: "Sunset pulse",
+    primary: "#f97316",
+    accent: "#ec4899",
+    glow: "rgba(249, 115, 22, 0.3)",
+    canvasLight: "#fff7ed",
+    canvasDark: "#211106",
+    shellLight: "rgba(255, 247, 237, 0.9)",
+    shellDark: "rgba(44, 18, 10, 0.88)",
+    surfaceLight: "rgba(255, 250, 245, 0.9)",
+    surfaceDark: "rgba(68, 24, 12, 0.78)",
+    borderLight: "rgba(249, 115, 22, 0.3)",
+    borderDark: "rgba(251, 146, 60, 0.36)",
+    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))",
+    hero: "linear-gradient(135deg, rgba(249, 115, 22, 0.26), rgba(236, 72, 153, 0.22))"
+  },
+  oceanic: {
+    ...neutralVibe,
+    id: "oceanic",
+    label: "Oceanic wave",
+    primary: "#0891b2",
+    accent: "#2563eb",
+    glow: "rgba(8, 145, 178, 0.28)",
+    canvasLight: "#ecfeff",
+    canvasDark: "#04131f",
+    shellLight: "rgba(236, 254, 255, 0.88)",
+    shellDark: "rgba(5, 26, 44, 0.88)",
+    surfaceLight: "rgba(248, 253, 255, 0.9)",
+    surfaceDark: "rgba(8, 47, 73, 0.78)",
+    borderLight: "rgba(8, 145, 178, 0.28)",
+    borderDark: "rgba(103, 232, 249, 0.28)",
+    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))",
+    hero: "linear-gradient(135deg, rgba(8, 145, 178, 0.24), rgba(37, 99, 235, 0.2))"
+  },
+  forest: {
+    ...neutralVibe,
+    id: "forest",
+    label: "Forest signal",
+    primary: "#16a34a",
+    accent: "#84cc16",
+    glow: "rgba(22, 163, 74, 0.28)",
+    canvasLight: "#f0fdf4",
+    canvasDark: "#06180d",
+    shellLight: "rgba(240, 253, 244, 0.9)",
+    shellDark: "rgba(8, 35, 19, 0.88)",
+    surfaceLight: "rgba(250, 255, 251, 0.9)",
+    surfaceDark: "rgba(20, 83, 45, 0.72)",
+    borderLight: "rgba(22, 163, 74, 0.26)",
+    borderDark: "rgba(134, 239, 172, 0.28)",
+    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%)",
+    hero: "linear-gradient(135deg, rgba(22, 163, 74, 0.22), rgba(132, 204, 22, 0.18))"
+  },
+  ruby: {
+    ...neutralVibe,
+    id: "ruby",
+    label: "Ruby spark",
+    primary: "#e11d48",
+    accent: "#f97316",
+    canvasLight: "#fff1f2",
+    canvasDark: "#22050c",
+    shellLight: "rgba(255, 241, 242, 0.9)",
+    shellDark: "rgba(50, 8, 18, 0.88)",
+    surfaceDark: "rgba(76, 20, 32, 0.76)",
+    borderLight: "rgba(225, 29, 72, 0.28)",
+    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%)",
+    hero: "linear-gradient(135deg, rgba(225, 29, 72, 0.24), rgba(249, 115, 22, 0.18))"
+  },
+  amber: {
+    ...neutralVibe,
+    id: "amber",
+    label: "Amber glow",
+    primary: "#d97706",
+    accent: "#eab308",
+    canvasLight: "#fffbeb",
+    canvasDark: "#1f1604",
+    shellLight: "rgba(255, 251, 235, 0.9)",
+    shellDark: "rgba(41, 29, 6, 0.88)",
+    surfaceDark: "rgba(69, 46, 10, 0.76)",
+    borderLight: "rgba(217, 119, 6, 0.28)",
+    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%)",
+    hero: "linear-gradient(135deg, rgba(217, 119, 6, 0.22), rgba(234, 179, 8, 0.2))"
+  },
+  "neon-night": {
+    ...neutralVibe,
+    id: "neon-night",
+    label: "Neon night",
+    primary: "#84cc16",
+    accent: "#22d3ee",
+    glow: "rgba(132, 204, 22, 0.34)",
+    canvasLight: "#f7fee7",
+    canvasDark: "#030712",
+    shellLight: "rgba(247, 254, 231, 0.88)",
+    shellDark: "rgba(5, 12, 24, 0.9)",
+    surfaceDark: "rgba(12, 23, 36, 0.86)",
+    borderLight: "rgba(132, 204, 22, 0.3)",
+    borderDark: "rgba(190, 242, 100, 0.34)",
+    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))",
+    hero: "linear-gradient(135deg, rgba(132, 204, 22, 0.28), rgba(34, 211, 238, 0.18))"
+  },
+  skyline: {
+    ...neutralVibe,
+    id: "skyline",
+    label: "Skyline indigo",
+    primary: "#4f46e5",
+    accent: "#0ea5e9",
+    canvasLight: "#eef2ff",
+    canvasDark: "#0b1026",
+    shellLight: "rgba(238, 242, 255, 0.9)",
+    shellDark: "rgba(13, 20, 52, 0.88)",
+    surfaceDark: "rgba(30, 41, 86, 0.78)",
+    borderLight: "rgba(79, 70, 229, 0.28)",
+    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%)",
+    hero: "linear-gradient(135deg, rgba(79, 70, 229, 0.24), rgba(14, 165, 233, 0.18))"
+  },
+  aurora: {
+    ...neutralVibe,
+    id: "aurora",
+    label: "Aurora teal",
+    primary: "#0d9488",
+    accent: "#a3e635",
+    canvasLight: "#f0fdfa",
+    canvasDark: "#04211f",
+    shellLight: "rgba(240, 253, 250, 0.9)",
+    shellDark: "rgba(5, 44, 42, 0.88)",
+    surfaceDark: "rgba(19, 78, 74, 0.76)",
+    borderLight: "rgba(13, 148, 136, 0.28)",
+    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%)",
+    hero: "linear-gradient(135deg, rgba(13, 148, 136, 0.24), rgba(163, 230, 53, 0.16))"
+  },
+  coral: {
+    ...neutralVibe,
+    id: "coral",
+    label: "Coral bloom",
+    primary: "#db2777",
+    accent: "#fb7185",
+    canvasLight: "#fdf2f8",
+    canvasDark: "#251021",
+    shellLight: "rgba(253, 242, 248, 0.9)",
+    shellDark: "rgba(50, 18, 43, 0.88)",
+    surfaceDark: "rgba(80, 28, 66, 0.76)",
+    borderLight: "rgba(219, 39, 119, 0.28)",
+    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%)",
+    hero: "linear-gradient(135deg, rgba(219, 39, 119, 0.22), rgba(251, 113, 133, 0.18))"
+  },
+  mint: {
+    ...neutralVibe,
+    id: "mint",
+    label: "Mint circuit",
+    primary: "#059669",
+    accent: "#14b8a6",
+    canvasLight: "#ecfdf5",
+    canvasDark: "#031c16",
+    shellLight: "rgba(236, 253, 245, 0.9)",
+    shellDark: "rgba(5, 42, 34, 0.88)",
+    surfaceDark: "rgba(6, 78, 59, 0.74)",
+    borderLight: "rgba(5, 150, 105, 0.28)",
+    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%)",
+    hero: "linear-gradient(135deg, rgba(5, 150, 105, 0.24), rgba(20, 184, 166, 0.16))"
+  },
+  orchid: {
+    ...neutralVibe,
+    id: "orchid",
+    label: "Orchid signal",
+    primary: "#9333ea",
+    accent: "#ec4899",
+    canvasLight: "#faf5ff",
+    canvasDark: "#1d0b2f",
+    shellLight: "rgba(250, 245, 255, 0.9)",
+    shellDark: "rgba(39, 15, 63, 0.88)",
+    surfaceDark: "rgba(59, 25, 94, 0.78)",
+    borderLight: "rgba(147, 51, 234, 0.28)",
+    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%)",
+    hero: "linear-gradient(135deg, rgba(147, 51, 234, 0.24), rgba(236, 72, 153, 0.18))"
+  },
+  royal: {
+    ...neutralVibe,
+    id: "royal",
+    label: "Royal violet",
+    primary: "#7c3aed",
+    accent: "#06b6d4",
+    canvasLight: "#f5f3ff",
+    canvasDark: "#100a2d",
+    shellLight: "rgba(245, 243, 255, 0.9)",
+    shellDark: "rgba(21, 13, 59, 0.88)",
+    surfaceDark: "rgba(46, 26, 104, 0.78)",
+    borderLight: "rgba(124, 58, 237, 0.3)",
+    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%)",
+    hero: "linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(6, 182, 212, 0.18), rgba(236, 72, 153, 0.18))"
+  },
+  cosmic: {
+    id: "cosmic",
+    label: "Cosmic burst",
+    primary: "#7c3cff",
+    accent: "#e018ff",
+    glow: "rgba(224, 24, 255, 0.36)",
+    canvasLight: "#071a80",
+    canvasDark: "#030018",
+    shellLight: "rgba(10, 18, 70, 0.72)",
+    shellDark: "rgba(8, 10, 42, 0.84)",
+    surfaceLight: "rgba(10, 18, 70, 0.62)",
+    surfaceDark: "rgba(9, 14, 54, 0.76)",
+    borderLight: "rgba(190, 160, 255, 0.45)",
+    borderDark: "rgba(190, 160, 255, 0.52)",
+    textLight: "#ffffff",
+    textDark: "#ffffff",
+    mutedLight: "rgba(235, 238, 255, 0.76)",
+    mutedDark: "rgba(235, 238, 255, 0.78)",
+    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%)",
+    hero: "linear-gradient(135deg, rgba(124, 60, 255, 0.84), rgba(224, 24, 255, 0.62), rgba(255, 155, 61, 0.72))"
+  }
+};
+function getGdsVibeThemes() {
+  return Object.values(vibeThemes);
+}
+function resolveGdsVibeTheme(id) {
+  return vibeThemes[id] ?? neutralVibe;
+}
+function getGdsVibeThemeCssVariables(id, colorScheme) {
+  const vibe = resolveGdsVibeTheme(id);
+  const dark = colorScheme === "dark";
+  return {
+    "--gds-vibe-primary": vibe.primary,
+    "--gds-vibe-accent": vibe.accent,
+    "--gds-vibe-glow": vibe.glow,
+    "--gds-vibe-canvas": dark ? vibe.canvasDark : vibe.canvasLight,
+    "--gds-vibe-shell": dark ? vibe.shellDark : vibe.shellLight,
+    "--gds-vibe-surface": dark ? vibe.surfaceDark : vibe.surfaceLight,
+    "--gds-vibe-border": dark ? vibe.borderDark : vibe.borderLight,
+    "--gds-vibe-text": dark ? vibe.textDark : vibe.textLight,
+    "--gds-vibe-muted": dark ? vibe.mutedDark : vibe.mutedLight,
+    "--gds-vibe-gradient": vibe.gradient,
+    "--gds-vibe-hero": vibe.hero
+  };
+}
+
+// src/font-lanes.ts
+import { mergeThemeOverrides as mergeThemeOverrides2 } from "@mantine/core";
+var lanes = [
+  { id: "inter", label: "Inter", body: "Inter, system-ui, sans-serif", heading: "Inter, system-ui, sans-serif", mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+  { id: "manrope", label: "Manrope", body: "Manrope, system-ui, sans-serif", heading: "Manrope, system-ui, sans-serif", mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+  { id: "space-grotesk", label: "Space Grotesk", body: '"Space Grotesk", Inter, system-ui, sans-serif', heading: '"Space Grotesk", Inter, system-ui, sans-serif', mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+  { id: "plus-jakarta", label: "Plus Jakarta Sans", body: '"Plus Jakarta Sans", Inter, system-ui, sans-serif', heading: '"Plus Jakarta Sans", Inter, system-ui, sans-serif', mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+  { id: "nunito", label: "Nunito", body: "Nunito, Inter, system-ui, sans-serif", heading: "Nunito, Inter, system-ui, sans-serif", mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+  { id: "work-sans", label: "Work Sans", body: '"Work Sans", Inter, system-ui, sans-serif', heading: '"Work Sans", Inter, system-ui, sans-serif', mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+  { id: "barlow", label: "Barlow", body: "Barlow, Inter, system-ui, sans-serif", heading: "Barlow, Inter, system-ui, sans-serif", mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+  { id: "dm-sans", label: "DM Sans", body: '"DM Sans", Inter, system-ui, sans-serif', heading: '"DM Sans", Inter, system-ui, sans-serif', mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+  { id: "instrument-serif", label: "Instrument Serif", body: "Inter, system-ui, sans-serif", heading: '"Instrument Serif", Georgia, serif', mono: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+  { id: "source-serif", label: "Source Serif", body: '"Source Serif 4", Georgia, serif', heading: '"Source Serif 4", Georgia, serif', mono: "ui-monospace, SFMono-Regular, Menlo, monospace" }
+];
+function getGdsFontLanes() {
+  return lanes;
+}
+function resolveGdsFontLane(id) {
+  return lanes.find((lane) => lane.id === id) ?? lanes[0];
+}
+function applyGdsFontLane(theme, laneId) {
+  const lane = resolveGdsFontLane(laneId);
+  return mergeThemeOverrides2(theme, {
+    fontFamily: lane.body,
+    fontFamilyMonospace: lane.mono,
+    headings: {
+      fontFamily: lane.heading
+    }
+  });
+}
+
+export {
+  gdsTheme,
+  gdsDarkPublicTheme,
+  gdsFlatSurfaceTheme,
+  gdsEditorialPublicTheme,
+  createPublicBrandTheme,
+  extendGdsTheme,
+  withGdsMotion,
+  getGdsThemePresets,
+  resolveGdsThemePreset,
+  getGdsVibeThemes,
+  resolveGdsVibeTheme,
+  getGdsVibeThemeCssVariables,
+  getGdsFontLanes,
+  resolveGdsFontLane,
+  applyGdsFontLane
+};

package/dist/{chunk-E55P7FOX.mjs → chunk-7XQ45NO6.mjs}

@@ -3,8 +3,9 @@ import {
   gdsTheme,
   getGdsFontLanes,
   getGdsThemePresets,
+  getGdsVibeThemeCssVariables,
   resolveGdsThemePreset
-} from "./chunk-TAPLA36E.mjs";
+} from "./chunk-3QN7LJN7.mjs";
 
 // src/theme-runtime.ts
 import { useCallback, useEffect, useState } from "react";
@@ -84,9 +85,15 @@ function resolveDocumentScheme(selection) {
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
 function applyDocumentRuntime(selection) {
-  document.documentElement.setAttribute("data-mantine-color-scheme", resolveDocumentScheme(selection));
+  const documentScheme = resolveDocumentScheme(selection);
+  const vibeVariables = getGdsVibeThemeCssVariables(selection.preset, documentScheme);
+  document.documentElement.setAttribute("data-mantine-color-scheme", documentScheme);
+  document.documentElement.setAttribute("data-gds-theme-preset", selection.preset);
   document.documentElement.setAttribute("data-gds-theme-runtime", selection.runtimeKey ?? `${selection.preset}-${selection.colorScheme}`);
   document.documentElement.setAttribute("data-gds-font-lane", selection.fontLane);
+  Object.entries(vibeVariables).forEach(([property, value]) => {
+    document.documentElement.style.setProperty(property, value);
+  });
 }
 function useGdsThemePresetState({
   storageKey = defaultStorageKey,