@dbcdk/react-components 0.0.174 → 0.0.176

package/dist/hooks/useTheme.d.ts

@@ -1,15 +1,8 @@
-import type { ThemeHrefs, ThemeId } from '../styles/themes/types';
-export type { ThemeHrefs, ThemeId };
+import type { ThemeId } from '../styles/themes/types';
+export type { ThemeId };
 export interface UseThemeOptions {
-    /** The theme the app already loads via a normal static import — never
-     * fetched/linked dynamically, just applied via the attribute. */
+    /** The theme the app should fall back to when nothing is stored yet. */
     defaultTheme: ThemeId;
-    /** Per-theme CSS URL, for any theme not already loaded some other way. */
-    hrefs?: ThemeHrefs;
-    /** DOM id for the `<link>` element used for the currently active non-default theme. */
-    linkId?: string;
-    /** Warm the browser cache for every other theme at idle time. Default true. */
-    preloadOthers?: boolean;
     storageKey?: string;
 }
 export declare function useTheme(options: UseThemeOptions): {

package/dist/hooks/useTheme.js

@@ -1,10 +1,10 @@
 'use client';
 import { useEffect, useSyncExternalStore } from 'react';
+import { applyProductTheme } from '../styles/themes/apply-product-theme';
 import { readCookie, writeCookie } from '../utils/cookie.utils';
 import { readLocalStorage, writeLocalStorage } from '../utils/localStorage.utils';
-import { THEME_STORAGE_KEY, THEME_LINK_ID } from '../utils/theme.constants';
+import { THEME_STORAGE_KEY } from '../utils/theme.constants';
 
-const PRELOAD_ID_PREFIX = "dbc-theme-preload-";
 function persistTheme(storageKey, id) {
   writeLocalStorage(storageKey, id);
   writeCookie(storageKey, id);
@@ -12,47 +12,16 @@ function persistTheme(storageKey, id) {
 function getDomTheme() {
   return document.documentElement.dataset.productTheme;
 }
+function getDomColorScheme() {
+  return document.documentElement.dataset.theme;
+}
 function applyTheme(id) {
   document.documentElement.dataset.productTheme = id;
-}
-function findLink(linkId) {
-  return document.getElementById(linkId);
-}
-function findPreloadLink(id) {
-  return document.getElementById(`${PRELOAD_ID_PREFIX}${id}`);
-}
-function ensureStylesheet(id, href, linkId, onReady) {
-  var _a;
-  if (!href) {
-    onReady();
-    return;
-  }
-  const active = findLink(linkId);
-  if (active && active.getAttribute("href") === href && active.rel === "stylesheet") {
-    onReady();
-    return;
-  }
-  const preload = findPreloadLink(id);
-  const link = (_a = active != null ? active : preload) != null ? _a : document.createElement("link");
-  const wasConnected = link.isConnected;
-  link.id = linkId;
-  link.rel = "stylesheet";
-  link.removeAttribute("as");
-  link.href = href;
-  if (preload && preload !== link) preload.remove();
-  let settled = false;
-  const finish = () => {
-    if (settled) return;
-    settled = true;
-    onReady();
-  };
-  link.addEventListener("load", finish, { once: true });
-  link.addEventListener("error", finish, { once: true });
-  if (!wasConnected) document.head.appendChild(link);
+  applyProductTheme(id, getDomColorScheme());
 }
 let currentTheme = null;
 let resolved = false;
-let preloadScheduled = false;
+let observerAttached = false;
 const listeners = /* @__PURE__ */ new Set();
 function notify() {
   listeners.forEach((listener) => listener());
@@ -78,75 +47,43 @@ function resolveInitialTheme(storageKey, defaultTheme) {
   if (fromStorage) return fromStorage;
   return defaultTheme;
 }
-function ensureResolved(hrefs, defaultTheme, storageKey, linkId) {
+function ensureResolved(defaultTheme, storageKey) {
   if (resolved) return;
   resolved = true;
   const value = resolveInitialTheme(storageKey, defaultTheme);
-  const finish = () => {
-    applyTheme(value);
-    persistTheme(storageKey, value);
-    currentTheme = value;
-    notify();
-  };
-  if (value === defaultTheme) {
-    finish();
-    return;
-  }
-  ensureStylesheet(value, hrefs[value], linkId, finish);
+  applyTheme(value);
+  persistTheme(storageKey, value);
+  currentTheme = value;
+  notify();
 }
-function schedulePreload(hrefs, defaultTheme) {
-  if (preloadScheduled) return;
-  preloadScheduled = true;
-  const run = () => {
-    var _a;
-    for (const [id, href] of Object.entries(hrefs)) {
-      if (id === defaultTheme || !href) continue;
-      if (((_a = findLink(THEME_LINK_ID)) == null ? void 0 : _a.getAttribute("href")) === href) continue;
-      if (findPreloadLink(id)) continue;
-      const link = document.createElement("link");
-      link.id = `${PRELOAD_ID_PREFIX}${id}`;
-      link.rel = "preload";
-      link.as = "style";
-      link.href = href;
-      document.head.appendChild(link);
-    }
-  };
-  const requestIdle = window.requestIdleCallback;
-  if (typeof requestIdle === "function") {
-    requestIdle(run);
-  } else {
-    setTimeout(run, 1);
-  }
+function ensureColorSchemeObserver() {
+  if (observerAttached) return;
+  observerAttached = true;
+  const observer = new MutationObserver(() => {
+    if (!currentTheme) return;
+    applyProductTheme(currentTheme, getDomColorScheme());
+  });
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-theme"]
+  });
 }
-function switchThemeInternal(hrefs, defaultTheme, storageKey, linkId, id) {
-  const finish = () => {
-    applyTheme(id);
-    persistTheme(storageKey, id);
-    currentTheme = id;
-    resolved = true;
-    notify();
-  };
-  if (id === defaultTheme) {
-    finish();
-    return;
-  }
-  ensureStylesheet(id, hrefs[id], linkId, finish);
+function switchThemeInternal(storageKey, id) {
+  applyTheme(id);
+  persistTheme(storageKey, id);
+  currentTheme = id;
+  resolved = true;
+  notify();
 }
 function useTheme(options) {
-  const {
-    defaultTheme,
-    hrefs = {},
-    linkId = THEME_LINK_ID,
-    preloadOthers = true,
-    storageKey = THEME_STORAGE_KEY
-  } = options;
+  const { defaultTheme, storageKey = THEME_STORAGE_KEY } = options;
   useEffect(() => {
-    ensureResolved(hrefs, defaultTheme, storageKey, linkId);
-    if (preloadOthers) schedulePreload(hrefs, defaultTheme);
-  }, []);
+    ensureColorSchemeObserver();
+    ensureResolved(defaultTheme, storageKey);
+  }, [defaultTheme, storageKey]);
   const theme = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
   function switchTheme(id) {
-    switchThemeInternal(hrefs, defaultTheme, storageKey, linkId, id);
+    switchThemeInternal(storageKey, id);
   }
   return { theme, switchTheme };
 }

package/dist/styles/themes/apply-product-theme.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var productThemeTokens = require('./product-theme-tokens');
+var productThemes = require('./product-themes');
+
+function clearProductThemeTokens(target) {
+  for (const token of productThemeTokens.PRODUCT_THEME_TOKEN_NAMES) {
+    target.style.removeProperty(token);
+  }
+}
+function applyProductTheme(themeId, colorScheme, target = document.documentElement) {
+  clearProductThemeTokens(target);
+  const tokens = productThemes.getProductThemeTokens(themeId, colorScheme);
+  for (const [token, value] of Object.entries(tokens)) {
+    if (!value) continue;
+    target.style.setProperty(token, value);
+  }
+}
+
+exports.applyProductTheme = applyProductTheme;

package/dist/styles/themes/apply-product-theme.d.ts

@@ -0,0 +1,3 @@
+import type { ColorScheme } from '../../utils/color-scheme.constants';
+import type { ThemeId } from './types';
+export declare function applyProductTheme(themeId: ThemeId, colorScheme: ColorScheme | undefined, target?: HTMLElement): void;

package/dist/styles/themes/apply-product-theme.js

@@ -0,0 +1,18 @@
+import { PRODUCT_THEME_TOKEN_NAMES } from './product-theme-tokens';
+import { getProductThemeTokens } from './product-themes';
+
+function clearProductThemeTokens(target) {
+  for (const token of PRODUCT_THEME_TOKEN_NAMES) {
+    target.style.removeProperty(token);
+  }
+}
+function applyProductTheme(themeId, colorScheme, target = document.documentElement) {
+  clearProductThemeTokens(target);
+  const tokens = getProductThemeTokens(themeId, colorScheme);
+  for (const [token, value] of Object.entries(tokens)) {
+    if (!value) continue;
+    target.style.setProperty(token, value);
+  }
+}
+
+export { applyProductTheme };

package/dist/styles/themes/dbc/colors.css

@@ -215,6 +215,7 @@ html {
   /* Focus */
   --color-focus-ring: var(--dbc-blue-300);
   --focus-ring: 0 0 0 3px light-dark(rgba(12, 62, 227, 0.25), rgba(59, 130, 246, 0.35));
+  --color-field-focus: var(--color-brand);
 
   /* Syntax (JSON viewer) */
   --color-syntax-accent: var(--dbc-blue-300);
@@ -240,7 +241,7 @@ html {
   --button-fg-primary: var(--color-fg-on-brand);
 
   /* Product / logo lockup — generic defaults; apps with a custom identity
-     override these tokens only (see e.g. filmstriben/theme.css) */
+     override these tokens only via the product-theme token registry. */
   --color-logo: var(--color-fg-default);
   --color-logo-bg: color-mix(in srgb, var(--color-logo) 10%, var(--color-bg-surface));
   --color-logo-fg: var(--color-fg-default);

package/dist/styles/themes/product-theme-tokens.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+const PRODUCT_THEME_TOKEN_NAMES = [
+  "--color-brand",
+  "--color-brand-hover",
+  "--color-brand-strong",
+  "--color-fg-on-brand",
+  "--color-border-selected",
+  "--color-link",
+  "--color-link-hover",
+  "--color-bg-selected",
+  "--color-bg-selected-hover",
+  "--color-chart-primary",
+  "--color-chart-brand",
+  "--color-navbar-bg",
+  "--color-navbar-fg",
+  "--color-navbar-fg-muted",
+  "--color-navbar-border",
+  "--color-navbar-brand",
+  "--color-logo",
+  "--color-logo-bg",
+  "--color-logo-fg",
+  "--color-field-focus",
+  "--color-focus-ring",
+  "--focus-ring",
+  "--color-bg-page",
+  "--color-bg-surface",
+  "--color-bg-surface-subtle",
+  "--color-bg-surface-strong",
+  "--color-bg-inverse",
+  "--color-bg-toolbar",
+  "--color-bg-toolbar-hover",
+  "--table-header-bg",
+  "--table-row-bg",
+  "--table-row-bg-alt",
+  "--table-row-bg-hover"
+];
+
+exports.PRODUCT_THEME_TOKEN_NAMES = PRODUCT_THEME_TOKEN_NAMES;

package/dist/styles/themes/product-theme-tokens.d.ts

@@ -0,0 +1,3 @@
+export declare const PRODUCT_THEME_TOKEN_NAMES: readonly ["--color-brand", "--color-brand-hover", "--color-brand-strong", "--color-fg-on-brand", "--color-border-selected", "--color-link", "--color-link-hover", "--color-bg-selected", "--color-bg-selected-hover", "--color-chart-primary", "--color-chart-brand", "--color-navbar-bg", "--color-navbar-fg", "--color-navbar-fg-muted", "--color-navbar-border", "--color-navbar-brand", "--color-logo", "--color-logo-bg", "--color-logo-fg", "--color-field-focus", "--color-focus-ring", "--focus-ring", "--color-bg-page", "--color-bg-surface", "--color-bg-surface-subtle", "--color-bg-surface-strong", "--color-bg-inverse", "--color-bg-toolbar", "--color-bg-toolbar-hover", "--table-header-bg", "--table-row-bg", "--table-row-bg-alt", "--table-row-bg-hover"];
+export type ProductThemeTokenName = (typeof PRODUCT_THEME_TOKEN_NAMES)[number];
+export type ProductThemeTokens = Partial<Record<ProductThemeTokenName, string>>;

package/dist/styles/themes/product-theme-tokens.js

@@ -0,0 +1,37 @@
+const PRODUCT_THEME_TOKEN_NAMES = [
+  "--color-brand",
+  "--color-brand-hover",
+  "--color-brand-strong",
+  "--color-fg-on-brand",
+  "--color-border-selected",
+  "--color-link",
+  "--color-link-hover",
+  "--color-bg-selected",
+  "--color-bg-selected-hover",
+  "--color-chart-primary",
+  "--color-chart-brand",
+  "--color-navbar-bg",
+  "--color-navbar-fg",
+  "--color-navbar-fg-muted",
+  "--color-navbar-border",
+  "--color-navbar-brand",
+  "--color-logo",
+  "--color-logo-bg",
+  "--color-logo-fg",
+  "--color-field-focus",
+  "--color-focus-ring",
+  "--focus-ring",
+  "--color-bg-page",
+  "--color-bg-surface",
+  "--color-bg-surface-subtle",
+  "--color-bg-surface-strong",
+  "--color-bg-inverse",
+  "--color-bg-toolbar",
+  "--color-bg-toolbar-hover",
+  "--table-header-bg",
+  "--table-row-bg",
+  "--table-row-bg-alt",
+  "--table-row-bg-hover"
+];
+
+export { PRODUCT_THEME_TOKEN_NAMES };

package/dist/styles/themes/product-themes.cjs

@@ -0,0 +1,143 @@
+'use strict';
+
+const PRODUCT_THEMES = {
+  dbc: {
+    label: "DBC"
+  },
+  filmstriben: {
+    label: "Filmstriben",
+    base: {
+      "--color-navbar-bg": "#212529",
+      "--color-navbar-fg": "#ffffff",
+      "--color-navbar-fg-muted": "rgba(255, 255, 255, 0.9)",
+      "--color-navbar-border": "color-mix(in srgb, var(--color-navbar-fg) 25%, transparent)",
+      "--color-navbar-brand": "#ffc107",
+      "--color-logo": "#ffc107",
+      "--color-logo-bg": "color-mix(in srgb, var(--color-logo) 10%, var(--color-bg-surface))",
+      "--color-logo-fg": "#212529"
+    },
+    light: {
+      "--color-brand": "var(--dbc-blue-500)",
+      "--color-brand-hover": "var(--dbc-blue-600)",
+      "--color-brand-strong": "var(--dbc-blue-600)",
+      "--color-fg-on-brand": "#ffffff",
+      "--color-border-selected": "var(--color-brand)",
+      "--color-field-focus": "var(--dbc-blue-500)",
+      "--color-focus-ring": "var(--dbc-blue-300)",
+      "--focus-ring": "0 0 0 3px rgba(12, 62, 227, 0.25)",
+      "--color-link": "var(--dbc-blue-500)",
+      "--color-link-hover": "var(--dbc-blue-600)",
+      "--color-bg-selected": "var(--dbc-blue-100)",
+      "--color-bg-selected-hover": "var(--dbc-blue-150)",
+      "--color-chart-primary": "color-mix(in srgb, var(--color-brand) 75%, rgb(255 255 255 / 0))"
+    },
+    dark: {
+      "--color-bg-page": "#212529",
+      "--color-bg-surface": "#212529",
+      "--color-bg-surface-subtle": "#2a2f34",
+      "--color-bg-surface-strong": "#161a1d",
+      "--color-bg-inverse": "#34393f",
+      "--color-bg-toolbar": "#2a2f34",
+      "--color-bg-toolbar-hover": "#343a40",
+      "--table-header-bg": "#2a2f34",
+      "--table-row-bg": "#212529",
+      "--table-row-bg-alt": "#1c2024",
+      "--table-row-bg-hover": "#2a2f34",
+      "--color-brand": "#ffc107",
+      "--color-brand-hover": "#ffca2c",
+      "--color-brand-strong": "#ffcd39",
+      "--color-fg-on-brand": "#212529",
+      "--color-border-selected": "var(--color-brand)",
+      "--color-field-focus": "var(--dbc-blue-300)",
+      "--color-focus-ring": "#ffc107",
+      "--focus-ring": "0 0 0 3px color-mix(in srgb, #ffc107 35%, transparent)",
+      "--color-bg-selected": "#4a3a06",
+      "--color-bg-selected-hover": "#5b4707",
+      "--color-chart-primary": "color-mix(in srgb, var(--color-brand) 75%, rgb(255 255 255 / 0))"
+    }
+  },
+  valentines: {
+    label: "Valentines",
+    light: {
+      "--color-navbar-bg": "linear-gradient(90deg, #fff1f5 0%, #ffe4ec 52%, #f5ecff 100%)",
+      "--color-navbar-fg": "#3f1d2e",
+      "--color-navbar-fg-muted": "color-mix(in srgb, #3f1d2e 72%, white)",
+      "--color-navbar-border": "color-mix(in srgb, #e11d48 18%, transparent)",
+      "--color-navbar-brand": "#e11d48",
+      "--color-logo": "#e11d48",
+      "--color-logo-bg": "color-mix(in srgb, #e11d48 16%, white)",
+      "--color-logo-fg": "#ffffff",
+      "--color-bg-page": "#fff5f8",
+      "--color-bg-surface": "#fff0f5",
+      "--color-bg-surface-subtle": "#fff8fb",
+      "--color-bg-surface-strong": "#ffe2eb",
+      "--color-bg-inverse": "#3f1d2e",
+      "--color-bg-toolbar": "#ffdce8",
+      "--color-bg-toolbar-hover": "#ffcddd",
+      "--table-header-bg": "#ffe2eb",
+      "--table-row-bg": "#fff0f5",
+      "--table-row-bg-alt": "#fff7fa",
+      "--table-row-bg-hover": "#ffe8f0",
+      "--color-brand": "#e11d48",
+      "--color-brand-hover": "#be123c",
+      "--color-brand-strong": "#9f1239",
+      "--color-fg-on-brand": "#ffffff",
+      "--color-border-selected": "var(--color-brand)",
+      "--color-field-focus": "#4c1d95",
+      "--color-focus-ring": "#4c1d95",
+      "--focus-ring": "0 0 0 3px color-mix(in srgb, #4c1d95 28%, transparent)",
+      "--color-link": "#4c1d95",
+      "--color-link-hover": "color-mix(in srgb, #4c1d95 86%, black)",
+      "--color-bg-selected": "#ffe4ec",
+      "--color-bg-selected-hover": "#ffd3e0",
+      "--color-chart-primary": "color-mix(in srgb, var(--color-brand) 78%, rgb(255 255 255 / 0))",
+      "--color-chart-brand": "color-mix(in srgb, #4c1d95 76%, rgb(255 255 255 / 0))"
+    },
+    dark: {
+      "--color-navbar-bg": "linear-gradient(90deg, #4c1d95 0%, #7e22ce 35%, #be185d 100%)",
+      "--color-navbar-fg": "#fff7fb",
+      "--color-navbar-fg-muted": "rgba(255, 247, 251, 0.82)",
+      "--color-navbar-border": "rgba(255, 247, 251, 0.18)",
+      "--color-navbar-brand": "#ffd6e7",
+      "--color-logo": "#ffd6e7",
+      "--color-logo-bg": "color-mix(in srgb, #ffd6e7 18%, var(--color-bg-surface))",
+      "--color-logo-fg": "#4c1d95",
+      "--color-bg-page": "#241326",
+      "--color-bg-surface": "#241326",
+      "--color-bg-surface-subtle": "#301836",
+      "--color-bg-surface-strong": "#1a0d1d",
+      "--color-bg-inverse": "#fdf2f8",
+      "--color-bg-toolbar": "#301836",
+      "--color-bg-toolbar-hover": "#43204b",
+      "--table-header-bg": "#301836",
+      "--table-row-bg": "#241326",
+      "--table-row-bg-alt": "#2a142f",
+      "--table-row-bg-hover": "#301836",
+      "--color-brand": "#fb7185",
+      "--color-brand-hover": "#f43f5e",
+      "--color-brand-strong": "#e11d48",
+      "--color-fg-on-brand": "#2c1022",
+      "--color-border-selected": "var(--color-brand)",
+      "--color-field-focus": "#c4b5fd",
+      "--color-focus-ring": "#f9a8d4",
+      "--focus-ring": "0 0 0 3px color-mix(in srgb, #f9a8d4 36%, transparent)",
+      "--color-link": "#f9a8d4",
+      "--color-link-hover": "#fbcfe8",
+      "--color-bg-selected": "#4a1730",
+      "--color-bg-selected-hover": "#5a1c3a",
+      "--color-chart-primary": "color-mix(in srgb, var(--color-brand) 78%, rgb(255 255 255 / 0))",
+      "--color-chart-brand": "color-mix(in srgb, #c4b5fd 76%, rgb(255 255 255 / 0))"
+    }
+  }
+};
+function getProductThemeTokens(themeId, colorScheme) {
+  const definition = PRODUCT_THEMES[themeId];
+  if (!definition) return {};
+  return {
+    ...definition.base,
+    ...colorScheme === "dark" ? definition.dark : definition.light
+  };
+}
+
+exports.PRODUCT_THEMES = PRODUCT_THEMES;
+exports.getProductThemeTokens = getProductThemeTokens;

package/dist/styles/themes/product-themes.d.ts

@@ -0,0 +1,11 @@
+import type { ColorScheme } from '../../utils/color-scheme.constants';
+import type { ProductThemeTokens } from './product-theme-tokens';
+import type { ThemeId } from './types';
+export interface ProductThemeDefinition {
+    label: string;
+    base?: ProductThemeTokens;
+    light?: ProductThemeTokens;
+    dark?: ProductThemeTokens;
+}
+export declare const PRODUCT_THEMES: Record<ThemeId, ProductThemeDefinition>;
+export declare function getProductThemeTokens(themeId: ThemeId, colorScheme: ColorScheme | undefined): ProductThemeTokens;

package/dist/styles/themes/product-themes.js

@@ -0,0 +1,140 @@
+const PRODUCT_THEMES = {
+  dbc: {
+    label: "DBC"
+  },
+  filmstriben: {
+    label: "Filmstriben",
+    base: {
+      "--color-navbar-bg": "#212529",
+      "--color-navbar-fg": "#ffffff",
+      "--color-navbar-fg-muted": "rgba(255, 255, 255, 0.9)",
+      "--color-navbar-border": "color-mix(in srgb, var(--color-navbar-fg) 25%, transparent)",
+      "--color-navbar-brand": "#ffc107",
+      "--color-logo": "#ffc107",
+      "--color-logo-bg": "color-mix(in srgb, var(--color-logo) 10%, var(--color-bg-surface))",
+      "--color-logo-fg": "#212529"
+    },
+    light: {
+      "--color-brand": "var(--dbc-blue-500)",
+      "--color-brand-hover": "var(--dbc-blue-600)",
+      "--color-brand-strong": "var(--dbc-blue-600)",
+      "--color-fg-on-brand": "#ffffff",
+      "--color-border-selected": "var(--color-brand)",
+      "--color-field-focus": "var(--dbc-blue-500)",
+      "--color-focus-ring": "var(--dbc-blue-300)",
+      "--focus-ring": "0 0 0 3px rgba(12, 62, 227, 0.25)",
+      "--color-link": "var(--dbc-blue-500)",
+      "--color-link-hover": "var(--dbc-blue-600)",
+      "--color-bg-selected": "var(--dbc-blue-100)",
+      "--color-bg-selected-hover": "var(--dbc-blue-150)",
+      "--color-chart-primary": "color-mix(in srgb, var(--color-brand) 75%, rgb(255 255 255 / 0))"
+    },
+    dark: {
+      "--color-bg-page": "#212529",
+      "--color-bg-surface": "#212529",
+      "--color-bg-surface-subtle": "#2a2f34",
+      "--color-bg-surface-strong": "#161a1d",
+      "--color-bg-inverse": "#34393f",
+      "--color-bg-toolbar": "#2a2f34",
+      "--color-bg-toolbar-hover": "#343a40",
+      "--table-header-bg": "#2a2f34",
+      "--table-row-bg": "#212529",
+      "--table-row-bg-alt": "#1c2024",
+      "--table-row-bg-hover": "#2a2f34",
+      "--color-brand": "#ffc107",
+      "--color-brand-hover": "#ffca2c",
+      "--color-brand-strong": "#ffcd39",
+      "--color-fg-on-brand": "#212529",
+      "--color-border-selected": "var(--color-brand)",
+      "--color-field-focus": "var(--dbc-blue-300)",
+      "--color-focus-ring": "#ffc107",
+      "--focus-ring": "0 0 0 3px color-mix(in srgb, #ffc107 35%, transparent)",
+      "--color-bg-selected": "#4a3a06",
+      "--color-bg-selected-hover": "#5b4707",
+      "--color-chart-primary": "color-mix(in srgb, var(--color-brand) 75%, rgb(255 255 255 / 0))"
+    }
+  },
+  valentines: {
+    label: "Valentines",
+    light: {
+      "--color-navbar-bg": "linear-gradient(90deg, #fff1f5 0%, #ffe4ec 52%, #f5ecff 100%)",
+      "--color-navbar-fg": "#3f1d2e",
+      "--color-navbar-fg-muted": "color-mix(in srgb, #3f1d2e 72%, white)",
+      "--color-navbar-border": "color-mix(in srgb, #e11d48 18%, transparent)",
+      "--color-navbar-brand": "#e11d48",
+      "--color-logo": "#e11d48",
+      "--color-logo-bg": "color-mix(in srgb, #e11d48 16%, white)",
+      "--color-logo-fg": "#ffffff",
+      "--color-bg-page": "#fff5f8",
+      "--color-bg-surface": "#fff0f5",
+      "--color-bg-surface-subtle": "#fff8fb",
+      "--color-bg-surface-strong": "#ffe2eb",
+      "--color-bg-inverse": "#3f1d2e",
+      "--color-bg-toolbar": "#ffdce8",
+      "--color-bg-toolbar-hover": "#ffcddd",
+      "--table-header-bg": "#ffe2eb",
+      "--table-row-bg": "#fff0f5",
+      "--table-row-bg-alt": "#fff7fa",
+      "--table-row-bg-hover": "#ffe8f0",
+      "--color-brand": "#e11d48",
+      "--color-brand-hover": "#be123c",
+      "--color-brand-strong": "#9f1239",
+      "--color-fg-on-brand": "#ffffff",
+      "--color-border-selected": "var(--color-brand)",
+      "--color-field-focus": "#4c1d95",
+      "--color-focus-ring": "#4c1d95",
+      "--focus-ring": "0 0 0 3px color-mix(in srgb, #4c1d95 28%, transparent)",
+      "--color-link": "#4c1d95",
+      "--color-link-hover": "color-mix(in srgb, #4c1d95 86%, black)",
+      "--color-bg-selected": "#ffe4ec",
+      "--color-bg-selected-hover": "#ffd3e0",
+      "--color-chart-primary": "color-mix(in srgb, var(--color-brand) 78%, rgb(255 255 255 / 0))",
+      "--color-chart-brand": "color-mix(in srgb, #4c1d95 76%, rgb(255 255 255 / 0))"
+    },
+    dark: {
+      "--color-navbar-bg": "linear-gradient(90deg, #4c1d95 0%, #7e22ce 35%, #be185d 100%)",
+      "--color-navbar-fg": "#fff7fb",
+      "--color-navbar-fg-muted": "rgba(255, 247, 251, 0.82)",
+      "--color-navbar-border": "rgba(255, 247, 251, 0.18)",
+      "--color-navbar-brand": "#ffd6e7",
+      "--color-logo": "#ffd6e7",
+      "--color-logo-bg": "color-mix(in srgb, #ffd6e7 18%, var(--color-bg-surface))",
+      "--color-logo-fg": "#4c1d95",
+      "--color-bg-page": "#241326",
+      "--color-bg-surface": "#241326",
+      "--color-bg-surface-subtle": "#301836",
+      "--color-bg-surface-strong": "#1a0d1d",
+      "--color-bg-inverse": "#fdf2f8",
+      "--color-bg-toolbar": "#301836",
+      "--color-bg-toolbar-hover": "#43204b",
+      "--table-header-bg": "#301836",
+      "--table-row-bg": "#241326",
+      "--table-row-bg-alt": "#2a142f",
+      "--table-row-bg-hover": "#301836",
+      "--color-brand": "#fb7185",
+      "--color-brand-hover": "#f43f5e",
+      "--color-brand-strong": "#e11d48",
+      "--color-fg-on-brand": "#2c1022",
+      "--color-border-selected": "var(--color-brand)",
+      "--color-field-focus": "#c4b5fd",
+      "--color-focus-ring": "#f9a8d4",
+      "--focus-ring": "0 0 0 3px color-mix(in srgb, #f9a8d4 36%, transparent)",
+      "--color-link": "#f9a8d4",
+      "--color-link-hover": "#fbcfe8",
+      "--color-bg-selected": "#4a1730",
+      "--color-bg-selected-hover": "#5a1c3a",
+      "--color-chart-primary": "color-mix(in srgb, var(--color-brand) 78%, rgb(255 255 255 / 0))",
+      "--color-chart-brand": "color-mix(in srgb, #c4b5fd 76%, rgb(255 255 255 / 0))"
+    }
+  }
+};
+function getProductThemeTokens(themeId, colorScheme) {
+  const definition = PRODUCT_THEMES[themeId];
+  if (!definition) return {};
+  return {
+    ...definition.base,
+    ...colorScheme === "dark" ? definition.dark : definition.light
+  };
+}
+
+export { PRODUCT_THEMES, getProductThemeTokens };

package/dist/styles/themes/types.cjs

@@ -1,9 +1,10 @@
 'use strict';
 
-const THEME_IDS = ["dbc", "filmstriben"];
+const THEME_IDS = ["dbc", "filmstriben", "valentines"];
 const THEME_LABELS = {
   dbc: "DBC",
-  filmstriben: "Filmstriben"
+  filmstriben: "Filmstriben",
+  valentines: "Valentines"
 };
 
 exports.THEME_IDS = THEME_IDS;

package/dist/styles/themes/types.d.ts

@@ -7,18 +7,6 @@
  * TypeScript-only enforcement; add an id here (and to `THEME_LABELS`)
  * whenever a new theme folder is added.
  */
-export declare const THEME_IDS: readonly ["dbc", "filmstriben"];
+export declare const THEME_IDS: readonly ["dbc", "filmstriben", "valentines"];
 export type ThemeId = (typeof THEME_IDS)[number];
 export declare const THEME_LABELS: Record<ThemeId, string>;
-/**
- * Per-theme override for where to fetch its CSS from at runtime. Only
- * needed for a theme whose CSS isn't already loaded some other way by the
- * app — omit an id (or leave its value `''`/unset) for a theme that's
- * already bundled statically alongside whatever the app already imports.
- *
- * This is the only piece of theme data `ThemeScript`/`useTheme` actually
- * need at runtime (which id to inject a `<link>` for, and its URL) — they
- * don't need the full enumerated id list or labels, only whichever UI
- * renders the switcher (`ThemeButton`/`ThemeMenuSection`) does.
- */
-export type ThemeHrefs = Partial<Record<ThemeId, string>>;