@dbcdk/react-components 0.0.172 → 0.0.174

package/dist/hooks/useTheme.d.ts

@@ -1,6 +1,18 @@
-import type { ThemeVariant } from '../utils/theme.constants';
-export type { ThemeVariant };
-export declare function useTheme(initialTheme?: ThemeVariant): {
-    theme: ThemeVariant | null;
-    switchTheme: (id: ThemeVariant) => ThemeVariant;
+import type { ThemeHrefs, ThemeId } from '../styles/themes/types';
+export type { ThemeHrefs, ThemeId };
+export interface UseThemeOptions {
+    /** The theme the app already loads via a normal static import — never
+     * fetched/linked dynamically, just applied via the attribute. */
+    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): {
+    theme: ThemeId | null;
+    switchTheme: (id: ThemeId) => void;
 };

package/dist/hooks/useTheme.js

@@ -1,33 +1,58 @@
 'use client';
 import { useEffect, useSyncExternalStore } from 'react';
-import { isThemeVariant, THEME_STORAGE_KEY } from '../utils/theme.constants';
+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';
 
-function getCookie(name) {
-  const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
-  return match ? decodeURIComponent(match[1]) : null;
-}
-function persistTheme(id) {
-  try {
-    localStorage.setItem(THEME_STORAGE_KEY, id);
-  } catch {
-    console.error("Failed to access localStorage");
-  }
-  try {
-    document.cookie = `${THEME_STORAGE_KEY}=${encodeURIComponent(
-      id
-    )}; Path=/; Max-Age=${60 * 60 * 24 * 365}`;
-  } catch {
-    console.error("Failed to set theme cookie");
-  }
+const PRELOAD_ID_PREFIX = "dbc-theme-preload-";
+function persistTheme(storageKey, id) {
+  writeLocalStorage(storageKey, id);
+  writeCookie(storageKey, id);
 }
 function getDomTheme() {
-  return document.documentElement.dataset.theme;
+  return document.documentElement.dataset.productTheme;
 }
 function applyTheme(id) {
-  document.documentElement.dataset.theme = 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);
 }
 let currentTheme = null;
 let resolved = false;
+let preloadScheduled = false;
 const listeners = /* @__PURE__ */ new Set();
 function notify() {
   listeners.forEach((listener) => listener());
@@ -44,44 +69,85 @@ function getSnapshot() {
 function getServerSnapshot() {
   return null;
 }
-function resolveInitialTheme(initialTheme) {
-  const themeFromDataAttributes = getDomTheme();
-  let resolvedTheme = isThemeVariant(themeFromDataAttributes) ? themeFromDataAttributes : initialTheme;
-  const fromCookie = getCookie(THEME_STORAGE_KEY);
-  if (isThemeVariant(fromCookie)) {
-    resolvedTheme = fromCookie;
-  } else {
-    try {
-      const fromStorage = localStorage.getItem(THEME_STORAGE_KEY);
-      if (isThemeVariant(fromStorage)) resolvedTheme = fromStorage;
-    } catch {
-      console.error("Failed to access localStorage");
-    }
-  }
-  return resolvedTheme;
+function resolveInitialTheme(storageKey, defaultTheme) {
+  const fromDom = getDomTheme();
+  if (fromDom) return fromDom;
+  const fromCookie = readCookie(storageKey);
+  if (fromCookie) return fromCookie;
+  const fromStorage = readLocalStorage(storageKey);
+  if (fromStorage) return fromStorage;
+  return defaultTheme;
 }
-function ensureResolved(initialTheme) {
+function ensureResolved(hrefs, defaultTheme, storageKey, linkId) {
   if (resolved) return;
   resolved = true;
-  const value = resolveInitialTheme(initialTheme);
-  applyTheme(value);
-  persistTheme(value);
-  currentTheme = value;
-  notify();
+  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);
 }
-function switchTheme(id) {
-  applyTheme(id);
-  persistTheme(id);
-  currentTheme = id;
-  resolved = true;
-  notify();
-  return id;
+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 useTheme(initialTheme = "system") {
+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 useTheme(options) {
+  const {
+    defaultTheme,
+    hrefs = {},
+    linkId = THEME_LINK_ID,
+    preloadOthers = true,
+    storageKey = THEME_STORAGE_KEY
+  } = options;
   useEffect(() => {
-    ensureResolved(initialTheme);
-  }, [initialTheme]);
+    ensureResolved(hrefs, defaultTheme, storageKey, linkId);
+    if (preloadOthers) schedulePreload(hrefs, defaultTheme);
+  }, []);
   const theme = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  function switchTheme(id) {
+    switchThemeInternal(hrefs, defaultTheme, storageKey, linkId, id);
+  }
   return { theme, switchTheme };
 }
 

package/dist/index.cjs

@@ -1,7 +1,9 @@
 'use strict';
 
+var colorScheme_constants = require('./utils/color-scheme.constants');
 var ThemeScript = require('./components/theme-script/ThemeScript');
 var theme_constants = require('./utils/theme.constants');
+var types = require('./styles/themes/types');
 var Icon = require('./components/icon/Icon');
 var UserDisplay = require('./components/user-display/UserDisplay');
 var Headline = require('./components/headline/Headline');
@@ -46,6 +48,12 @@ var CheckboxGroup = require('./components/forms/checkbox-group/CheckboxGroup');
 
 
 
+Object.keys(colorScheme_constants).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return colorScheme_constants[k]; }
+	});
+});
 Object.keys(ThemeScript).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,
@@ -58,6 +66,12 @@ Object.keys(theme_constants).forEach(function (k) {
 		get: function () { return theme_constants[k]; }
 	});
 });
+Object.keys(types).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return types[k]; }
+	});
+});
 Object.keys(Icon).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/index.d.ts

@@ -1,5 +1,7 @@
+export * from './utils/color-scheme.constants';
 export * from './components/theme-script/ThemeScript';
 export * from './utils/theme.constants';
+export * from './styles/themes/types';
 export * from './components/icon/Icon';
 export * from './components/user-display/UserDisplay';
 export * from './components/headline/Headline';

package/dist/index.js

@@ -1,5 +1,7 @@
+export * from './utils/color-scheme.constants';
 export * from './components/theme-script/ThemeScript';
 export * from './utils/theme.constants';
+export * from './styles/themes/types';
 export * from './components/icon/Icon';
 export * from './components/user-display/UserDisplay';
 export * from './components/headline/Headline';

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

@@ -240,11 +240,22 @@ 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-budget/theme.css) */
-  --color-logo: var(--color-brand);
+     override these tokens only (see e.g. filmstriben/theme.css) */
+  --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);
 
+  /* Navbar */
+  --color-navbar-bg: var(--color-bg-surface);
+  --color-navbar-fg: var(--color-fg-default);
+  --color-navbar-fg-muted: var(--color-fg-muted);
+  --color-navbar-border: var(--color-border-default);
+  /* Active nav-link accent — deliberately its own token, not --color-logo:
+     the two happen to agree in some themes (filmstriben: both yellow) but
+     not others (dbc: logo is neutral fg-default, but the active link should
+     still read as brand-colored, not the same shade as inactive text) */
+  --color-navbar-brand: var(--color-brand);
+
   /* Tables */
   --table-header-bg: light-dark(#f3f4f6, #1b2533);
   --table-row-bg: light-dark(#ffffff, #111827);

package/dist/styles/themes/filmstriben/theme.css

@@ -0,0 +1,55 @@
+/* Filmstriben theme entrypoint.
+ *
+ * Usage in the consuming app:
+ *   - Simplest: import the convenience bundle instead of this file directly —
+ *     @import '@dbcdk/react-components/themes/filmstriben.css';
+ *     (bundles dbc/base.css + dbc/colors.css + this file + the shared index.css)
+ *   - Or, for runtime theme switching (see useTheme/ThemeScript), import
+ *     dbc's base + colors as your permanent foundation, then load this
+ *     file — just the delta below — only when this theme is actually active:
+ *       @import '@dbcdk/react-components/styles/themes/dbc/base.css';
+ *       @import '@dbcdk/react-components/styles/themes/dbc/colors.css';
+ *       @import '@dbcdk/react-components/styles/themes/filmstriben/theme.css';
+ *
+ * This file deliberately does NOT import dbc/colors.css itself (unlike a
+ * typical single-theme entrypoint) and scopes every override behind
+ * [data-product-theme='filmstriben'] instead of a bare :root — both are what
+ * let it be safely loaded *alongside* dbc's palette and toggled at runtime by
+ * flipping that attribute, without re-declaring or clobbering the whole dbc
+ * palette a second time.
+ *
+ * Only overrides the navbar/header identity (fixed dark bar + logo lockup).
+ * General-purpose brand tokens (--color-brand and everything derived from it
+ * — buttons, links, tabs, chips, alerts, focus rings, charts) are
+ * deliberately left on the shared DBC blue: #ffc107 doesn't have a value
+ * that works well both as flat text/borders on white AND as a vivid identity
+ * color (see TASK_filmstriben_theme.md for the contrast math and the
+ * earlier, abandoned attempt at a mixed "text-safe gold"). Scoping the
+ * yellow to the navbar/logo — where it always sits on its own guaranteed
+ * background — sidesteps that tradeoff entirely instead of picking a
+ * compromise shade.
+ */
+
+:root[data-product-theme='filmstriben'] {
+  --filmstriben-yellow: #ffc107;
+  --filmstriben-black: #212529;
+
+  /* Navbar — fixed dark bar regardless of light/dark color-scheme */
+  --color-navbar-bg: var(--filmstriben-black);
+  --color-navbar-fg: #ffffff;
+  --color-navbar-fg-muted: rgba(255, 255, 255, 0.9);
+  /* Softer than full navbar-fg at rest — header components escalate to full
+     strength on hover/focus (see Button/Input/FormSelect's .header variant) */
+  --color-navbar-border: color-mix(in srgb, var(--color-navbar-fg) 25%, transparent);
+  /* Active nav-link accent — the raw vivid yellow is safe here specifically
+     because it always sits on this fixed dark bar, unlike --color-brand
+     (which follows light-dark() for the page's own background) */
+  --color-navbar-brand: var(--filmstriben-yellow);
+
+  /* Logo lockup — sits on the light page surface (via --color-logo-bg's
+     tint) or the dark navbar, never as flat text on a plain white bg, so
+     the raw vivid yellow is safe here unlike a general --color-brand value */
+  --color-logo: var(--filmstriben-yellow);
+  --color-logo-bg: color-mix(in srgb, var(--color-logo) 10%, var(--color-bg-surface));
+  --color-logo-fg: var(--filmstriben-black);
+}

package/dist/styles/themes/types.cjs

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

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

@@ -1,16 +1,24 @@
-export type ThemeId = string;
-export type ThemeUrls = Record<ThemeId, string>;
-export type ResolveThemeHref = (id: ThemeId) => string | null;
-export type ThemeControllerOptions = {
-    /** Provide either `urls` OR `resolveHref` */
-    urls?: ThemeUrls;
-    resolveHref?: ResolveThemeHref;
-    /** DOM id for the <link> we manage */
-    linkId?: string;
-    /** Preload other themes once the first theme is set */
-    preloadOthers?: boolean;
-    /** Persist selection in localStorage */
-    persist?: boolean;
-    /** LocalStorage key */
-    storageKey?: string;
-};
+/**
+ * Every product theme this library ships (folders under
+ * `src/styles/themes/`). A closed set on purpose, mirroring `ColorScheme`
+ * (`'light' | 'dark' | 'system'`) for the color-scheme axis: the library
+ * owns which themes exist and what they're called, so consuming apps never
+ * need to invent their own labels or types for them — just pass ids.
+ * 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 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>>;

package/dist/styles/themes/types.js

@@ -1 +1,7 @@
+const THEME_IDS = ["dbc", "filmstriben"];
+const THEME_LABELS = {
+  dbc: "DBC",
+  filmstriben: "Filmstriben"
+};
 
+export { THEME_IDS, THEME_LABELS };

package/dist/themes/filmstriben.css

@@ -0,0 +1,4 @@
+@import '../styles/themes/dbc/base.css';
+@import '../styles/themes/dbc/colors.css';
+@import '../styles/themes/filmstriben/theme.css';
+@import '../index.css';

package/dist/utils/color-scheme.constants.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const COLOR_SCHEMES = ["light", "dark", "system"];
+const COLOR_SCHEME_STORAGE_KEY = "dbc_theme";
+function isColorScheme(x) {
+  return !!x && COLOR_SCHEMES.includes(x);
+}
+
+exports.COLOR_SCHEMES = COLOR_SCHEMES;
+exports.COLOR_SCHEME_STORAGE_KEY = COLOR_SCHEME_STORAGE_KEY;
+exports.isColorScheme = isColorScheme;

package/dist/utils/color-scheme.constants.d.ts

@@ -0,0 +1,4 @@
+export declare const COLOR_SCHEMES: readonly ["light", "dark", "system"];
+export type ColorScheme = (typeof COLOR_SCHEMES)[number];
+export declare const COLOR_SCHEME_STORAGE_KEY = "dbc_theme";
+export declare function isColorScheme(x: string | null | undefined): x is ColorScheme;

package/dist/utils/color-scheme.constants.js

@@ -0,0 +1,7 @@
+const COLOR_SCHEMES = ["light", "dark", "system"];
+const COLOR_SCHEME_STORAGE_KEY = "dbc_theme";
+function isColorScheme(x) {
+  return !!x && COLOR_SCHEMES.includes(x);
+}
+
+export { COLOR_SCHEMES, COLOR_SCHEME_STORAGE_KEY, isColorScheme };

package/dist/utils/theme.constants.cjs

@@ -1,11 +1,7 @@
 'use strict';
 
-const THEME_VARIANTS = ["light", "dark", "system"];
-const THEME_STORAGE_KEY = "dbc_theme";
-function isThemeVariant(x) {
-  return !!x && THEME_VARIANTS.includes(x);
-}
+const THEME_STORAGE_KEY = "dbc_product_theme";
+const THEME_LINK_ID = "dbc-theme-link";
 
+exports.THEME_LINK_ID = THEME_LINK_ID;
 exports.THEME_STORAGE_KEY = THEME_STORAGE_KEY;
-exports.THEME_VARIANTS = THEME_VARIANTS;
-exports.isThemeVariant = isThemeVariant;

package/dist/utils/theme.constants.d.ts

@@ -1,4 +1,2 @@
-export declare const THEME_VARIANTS: readonly ["light", "dark", "system"];
-export type ThemeVariant = (typeof THEME_VARIANTS)[number];
-export declare const THEME_STORAGE_KEY = "dbc_theme";
-export declare function isThemeVariant(x: string | null | undefined): x is ThemeVariant;
+export declare const THEME_STORAGE_KEY = "dbc_product_theme";
+export declare const THEME_LINK_ID = "dbc-theme-link";

package/dist/utils/theme.constants.js

@@ -1,7 +1,4 @@
-const THEME_VARIANTS = ["light", "dark", "system"];
-const THEME_STORAGE_KEY = "dbc_theme";
-function isThemeVariant(x) {
-  return !!x && THEME_VARIANTS.includes(x);
-}
+const THEME_STORAGE_KEY = "dbc_product_theme";
+const THEME_LINK_ID = "dbc-theme-link";
 
-export { THEME_STORAGE_KEY, THEME_VARIANTS, isThemeVariant };
+export { THEME_LINK_ID, THEME_STORAGE_KEY };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.172",
+  "version": "0.0.174",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",

package/dist/styles/themes/filmstriben-budget/theme.css

@@ -1,22 +0,0 @@
-/* Filmstriben Budget theme entrypoint.
- *
- * Usage in the consuming app — only two imports needed:
- *   @import '@dbcdk/react-components/styles/themes/dbc/base.css';
- *   @import '@dbcdk/react-components/styles/themes/filmstriben-budget/theme.css';
- *
- * Pulls in the shared DBC color layer, then overrides only the
- * --color-logo-* tokens. --color-brand and every other semantic/app color
- * stay on the shared DBC palette — buttons, links, focus rings, selected
- * states, charts, and warnings are unaffected.
- */
-
-@import '../dbc/colors.css';
-
-:root {
-  --filmstriben-yellow: #ffc107;
-  --filmstriben-black: #212529;
-
-  --color-logo: var(--filmstriben-yellow);
-  --color-logo-bg: color-mix(in srgb, var(--color-logo) 10%, var(--color-bg-surface));
-  --color-logo-fg: var(--filmstriben-black);
-}

package/dist/themes/filmstriben-budget.css

@@ -1,3 +0,0 @@
-@import '../styles/themes/dbc/base.css';
-@import '../styles/themes/filmstriben-budget/theme.css';
-@import '../index.css';