@dbcdk/react-components 0.0.173 → 0.0.175

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

@@ -0,0 +1,108 @@
+/* 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.
+ *
+ * Uses a split brand strategy:
+ * - light theme: semantic UI primary stays on blue for contrast and clarity
+ * - dark theme: the real Filmstriben yellow, which has enough contrast there
+ *
+ * Navbar/header identity still uses the raw yellow directly because it always
+ * sits on its own guaranteed dark background.
+ */
+
+: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);
+
+  /* Light-theme UI primary stays semantic and high-contrast; Filmstriben's
+     real yellow remains available for identity-bearing accents instead. */
+  --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));
+}
+
+:root[data-product-theme='filmstriben'][data-theme='dark'] {
+  /* Dark surfaces tuned to the navbar's grey-black identity instead of dbc's cooler blue darks. */
+  --filmstriben-surface-page: #212529;
+  --filmstriben-surface-subtle: #2a2f34;
+  --filmstriben-surface-strong: #161a1d;
+  --filmstriben-surface-hover: #343a40;
+  --filmstriben-surface-inverse: #34393f;
+  --filmstriben-table-row-alt: #1c2024;
+  --filmstriben-yellow-hover: #ffca2c;
+  --filmstriben-yellow-strong: #ffcd39;
+  --filmstriben-yellow-soft: #4a3a06;
+  --filmstriben-yellow-soft-hover: #5b4707;
+
+  --color-bg-page: var(--filmstriben-surface-page);
+  --color-bg-surface: var(--filmstriben-surface-page);
+  --color-bg-surface-subtle: var(--filmstriben-surface-subtle);
+  --color-bg-surface-strong: var(--filmstriben-surface-strong);
+  --color-bg-inverse: var(--filmstriben-surface-inverse);
+  --color-bg-toolbar: var(--filmstriben-surface-subtle);
+  --color-bg-toolbar-hover: var(--filmstriben-surface-hover);
+
+  --table-header-bg: var(--filmstriben-surface-subtle);
+  --table-row-bg: var(--filmstriben-surface-page);
+  --table-row-bg-alt: var(--filmstriben-table-row-alt);
+  --table-row-bg-hover: var(--filmstriben-surface-subtle);
+
+  /* In dark mode the Filmstriben yellow has enough contrast to become the primary brand color. */
+  --color-brand: var(--filmstriben-yellow);
+  --color-brand-hover: var(--filmstriben-yellow-hover);
+  --color-brand-strong: var(--filmstriben-yellow-strong);
+  --color-fg-on-brand: var(--filmstriben-black);
+  --color-border-selected: var(--color-brand);
+  --color-field-focus: var(--dbc-blue-300);
+  --color-focus-ring: var(--filmstriben-yellow);
+  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--filmstriben-yellow) 35%, transparent);
+
+  --color-bg-selected: var(--filmstriben-yellow-soft);
+  --color-bg-selected-hover: var(--filmstriben-yellow-soft-hover);
+  --color-chart-primary: color-mix(in srgb, var(--color-brand) 75%, rgb(255 255 255 / 0));
+}

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.173",
+  "version": "0.0.175",
   "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';