@doneisbetter/gds-theme 3.0.0 → 3.0.2

package/dist/chunk-E55P7FOX.mjs

@@ -0,0 +1,226 @@
+import {
+  applyGdsFontLane,
+  gdsTheme,
+  getGdsFontLanes,
+  getGdsThemePresets,
+  resolveGdsThemePreset
+} from "./chunk-TAPLA36E.mjs";
+
+// src/theme-runtime.ts
+import { useCallback, useEffect, useState } from "react";
+var defaultStorageKey = "gds-theme-preset-selection";
+function isThemePresetId(value) {
+  return typeof value === "string" && getGdsThemePresets().some((preset) => preset.id === value);
+}
+function isFontLaneId(value) {
+  return typeof value === "string" && getGdsFontLanes().some((lane) => lane.id === value);
+}
+function isScheme(value) {
+  return value === "light" || value === "dark" || value === "auto";
+}
+function resolveEffectiveScheme(preset, colorScheme) {
+  if (preset === "dark-public" || preset === "neon-night") {
+    return "dark";
+  }
+  return colorScheme;
+}
+function createGdsThemePresetSelection(stored = {}) {
+  const preset = isThemePresetId(stored.preset) ? stored.preset : "default";
+  const requestedColorScheme = isScheme(stored.colorScheme) ? stored.colorScheme : "light";
+  const colorScheme = resolveEffectiveScheme(preset, requestedColorScheme);
+  const fontLane = isFontLaneId(stored.fontLane) ? stored.fontLane : "inter";
+  const brandPrimary = typeof stored.brandPrimary === "string" ? stored.brandPrimary : "blue";
+  const brandFlatSurfaces = typeof stored.brandFlatSurfaces === "boolean" ? stored.brandFlatSurfaces : true;
+  const brandEditorialSerif = typeof stored.brandEditorialSerif === "boolean" ? stored.brandEditorialSerif : false;
+  const runtimeKey = `${preset}-${colorScheme}-${brandPrimary}-${brandFlatSurfaces}-${brandEditorialSerif}-${fontLane}`;
+  return {
+    preset,
+    colorScheme,
+    theme: applyGdsFontLane(resolveGdsThemePreset(preset, {
+      brandPrimary,
+      brandFlatSurfaces,
+      brandEditorialSerif
+    }), fontLane),
+    fontLane,
+    runtimeKey,
+    brandPrimary,
+    brandFlatSurfaces,
+    brandEditorialSerif
+  };
+}
+function readStoredSelection(storageKey, initialSelection) {
+  if (typeof window === "undefined") {
+    return createGdsThemePresetSelection(initialSelection);
+  }
+  try {
+    const stored = window.localStorage.getItem(storageKey);
+    return createGdsThemePresetSelection(stored ? JSON.parse(stored) : initialSelection);
+  } catch {
+    return createGdsThemePresetSelection(initialSelection);
+  }
+}
+function persistSelection(storageKey, selection) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const stored = {
+    preset: selection.preset,
+    colorScheme: selection.colorScheme,
+    fontLane: selection.fontLane,
+    runtimeKey: selection.runtimeKey,
+    brandPrimary: selection.brandPrimary,
+    brandFlatSurfaces: selection.brandFlatSurfaces,
+    brandEditorialSerif: selection.brandEditorialSerif
+  };
+  try {
+    window.localStorage.setItem(storageKey, JSON.stringify(stored));
+  } catch {
+  }
+}
+function resolveDocumentScheme(selection) {
+  if (selection.colorScheme !== "auto") {
+    return selection.colorScheme;
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function applyDocumentRuntime(selection) {
+  document.documentElement.setAttribute("data-mantine-color-scheme", resolveDocumentScheme(selection));
+  document.documentElement.setAttribute("data-gds-theme-runtime", selection.runtimeKey ?? `${selection.preset}-${selection.colorScheme}`);
+  document.documentElement.setAttribute("data-gds-font-lane", selection.fontLane);
+}
+function useGdsThemePresetState({
+  storageKey = defaultStorageKey,
+  initialSelection,
+  applyToDocument = true
+} = {}) {
+  const [selection, setSelection] = useState(() => readStoredSelection(storageKey, initialSelection));
+  useEffect(() => {
+    if (applyToDocument) {
+      applyDocumentRuntime(selection);
+    }
+    persistSelection(storageKey, selection);
+    if (!applyToDocument || selection.colorScheme !== "auto") {
+      return;
+    }
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => applyDocumentRuntime(selection);
+    mediaQuery.addEventListener("change", handleChange);
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, [applyToDocument, selection, storageKey]);
+  const setRuntimeSelection = useCallback((nextSelection) => {
+    setSelection(createGdsThemePresetSelection(nextSelection));
+  }, []);
+  const setPreset = useCallback((preset) => {
+    setSelection((current) => createGdsThemePresetSelection({ ...current, preset }));
+  }, []);
+  const setScheme = useCallback((colorScheme) => {
+    setSelection((current) => createGdsThemePresetSelection({ ...current, colorScheme }));
+  }, []);
+  const setFontLane = useCallback((fontLane) => {
+    setSelection((current) => createGdsThemePresetSelection({ ...current, fontLane }));
+  }, []);
+  const setBrandOptions = useCallback((options) => {
+    setSelection((current) => createGdsThemePresetSelection({ ...current, ...options }));
+  }, []);
+  const reset = useCallback(() => {
+    setSelection(createGdsThemePresetSelection(initialSelection));
+  }, [initialSelection]);
+  return {
+    selection,
+    setSelection: setRuntimeSelection,
+    setPreset,
+    setScheme,
+    setFontLane,
+    setBrandOptions,
+    reset
+  };
+}
+
+// src/i18n.ts
+import { createContext, useContext } from "react";
+var GdsI18nContext = createContext({
+  locale: "en",
+  messages: {}
+});
+function useGdsTranslation() {
+  const { messages, locale } = useContext(GdsI18nContext);
+  return {
+    t: (id, defaultMessage) => messages[id] || defaultMessage,
+    locale
+  };
+}
+
+// src/GdsProvider.tsx
+import { MantineProvider, DirectionProvider, Box } from "@mantine/core";
+import { ModalsProvider } from "@mantine/modals";
+import { Notifications } from "@mantine/notifications";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function GdsProvider({
+  children,
+  locale = "en",
+  messages = {},
+  theme = gdsTheme,
+  defaultColorScheme = "light",
+  forceColorScheme
+}) {
+  const isRtl = ["ar", "he"].includes(locale);
+  const dir = isRtl ? "rtl" : "ltr";
+  return /* @__PURE__ */ jsx(DirectionProvider, { initialDirection: dir, children: /* @__PURE__ */ jsx(GdsI18nContext.Provider, { value: { locale, messages }, children: /* @__PURE__ */ jsx(
+    MantineProvider,
+    {
+      theme,
+      withCssVariables: true,
+      withGlobalClasses: true,
+      defaultColorScheme,
+      forceColorScheme,
+      children: /* @__PURE__ */ jsx(ModalsProvider, { children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Notifications, {}),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            dir,
+            mih: "100vh",
+            h: "100%",
+            bg: "var(--mantine-color-body)",
+            c: "var(--mantine-color-text)",
+            style: { transition: "background-color 120ms ease, color 120ms ease" },
+            children
+          }
+        )
+      ] }) })
+    }
+  ) }) });
+}
+
+// src/notifications.ts
+import { notifications } from "@mantine/notifications";
+var toneColorMap = {
+  success: "teal",
+  error: "red",
+  warning: "yellow",
+  info: "blue",
+  neutral: "gray"
+};
+function showGdsNotification({
+  message,
+  title,
+  tone = "info",
+  autoClose
+}) {
+  notifications.show({
+    message,
+    title,
+    color: toneColorMap[tone],
+    autoClose
+  });
+}
+
+export {
+  createGdsThemePresetSelection,
+  useGdsThemePresetState,
+  useGdsTranslation,
+  GdsProvider,
+  showGdsNotification
+};

package/dist/chunk-TAPLA36E.mjs

@@ -0,0 +1,354 @@
+// 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")
+};
+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)" }
+];
+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/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,
+  getGdsFontLanes,
+  resolveGdsFontLane,
+  applyGdsFontLane
+};

package/dist/client.d.mts

@@ -1,7 +1,38 @@
-export { createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, withGdsMotion } from './server.mjs';
+import { GdsThemePresetId, GdsFontLaneId } from './server.mjs';
+export { GdsFontLane, GdsThemePreset, applyGdsFontLane, createPublicBrandTheme, extendGdsTheme, gdsDarkPublicTheme, gdsEditorialPublicTheme, gdsFlatSurfaceTheme, gdsTheme, getGdsFontLanes, getGdsThemePresets, resolveGdsFontLane, resolveGdsThemePreset, withGdsMotion } from './server.mjs';
+import { MantineThemeOverride } from '@mantine/core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { MantineThemeOverride } from '@mantine/core';
+
+type GdsThemeScheme = 'light' | 'dark' | 'auto';
+interface GdsStoredThemePresetState {
+    preset: GdsThemePresetId;
+    colorScheme: GdsThemeScheme;
+    fontLane: GdsFontLaneId;
+    runtimeKey?: string;
+    brandPrimary?: string;
+    brandFlatSurfaces?: boolean;
+    brandEditorialSerif?: boolean;
+}
+interface GdsThemePresetSelection extends GdsStoredThemePresetState {
+    theme: MantineThemeOverride;
+}
+interface UseGdsThemePresetStateOptions {
+    storageKey?: string;
+    initialSelection?: Partial<GdsStoredThemePresetState>;
+    applyToDocument?: boolean;
+}
+interface UseGdsThemePresetStateResult {
+    selection: GdsThemePresetSelection;
+    setSelection: (selection: Partial<GdsStoredThemePresetState>) => void;
+    setPreset: (preset: GdsThemePresetId) => void;
+    setScheme: (scheme: GdsThemeScheme) => void;
+    setFontLane: (fontLane: GdsFontLaneId) => void;
+    setBrandOptions: (options: Pick<GdsStoredThemePresetState, 'brandPrimary' | 'brandFlatSurfaces' | 'brandEditorialSerif'>) => void;
+    reset: () => void;
+}
+declare function createGdsThemePresetSelection(stored?: Partial<GdsStoredThemePresetState>): GdsThemePresetSelection;
+declare function useGdsThemePresetState({ storageKey, initialSelection, applyToDocument, }?: UseGdsThemePresetStateOptions): UseGdsThemePresetStateResult;
 
 interface GdsProviderProps {
     children: React.ReactNode;
@@ -9,12 +40,13 @@ interface GdsProviderProps {
     messages?: Record<string, string>;
     theme?: MantineThemeOverride;
     defaultColorScheme?: 'light' | 'dark' | 'auto';
+    forceColorScheme?: 'light' | 'dark';
 }
 /**
  * GdsProvider is the single required root provider for any application
  * adopting the General Design System. It injects the strict Mantine theme.
  */
-declare function GdsProvider({ children, locale, messages, theme, defaultColorScheme, }: GdsProviderProps): react_jsx_runtime.JSX.Element;
+declare function GdsProvider({ children, locale, messages, theme, defaultColorScheme, forceColorScheme, }: GdsProviderProps): react_jsx_runtime.JSX.Element;
 
 /**
  * useGdsTranslation provides a lightweight translation hook.
@@ -35,4 +67,4 @@ interface GdsNotificationOptions {
 }
 declare function showGdsNotification({ message, title, tone, autoClose, }: GdsNotificationOptions): void;
 
-export { type GdsNotificationOptions, type GdsNotificationTone, GdsProvider, type GdsProviderProps, showGdsNotification, useGdsTranslation };
+export { GdsFontLaneId, type GdsNotificationOptions, type GdsNotificationTone, GdsProvider, type GdsProviderProps, type GdsStoredThemePresetState, GdsThemePresetId, type GdsThemePresetSelection, type GdsThemeScheme, type UseGdsThemePresetStateOptions, type UseGdsThemePresetStateResult, createGdsThemePresetSelection, showGdsNotification, useGdsThemePresetState, useGdsTranslation };