@dbcdk/react-components 0.0.169 → 0.0.170

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

@@ -0,0 +1,320 @@
+html {
+  /* ==========================================================================
+   * PRIMITIVES (THEME-DEPENDENT)
+   * ======================================================================= */
+
+  color-scheme: light dark;
+
+  /*@media (prefers-color-scheme: dark) {*/
+  /*  color-scheme: dark;*/
+  /*}*/
+
+  &[data-theme='dark'] {
+    color-scheme: dark;
+  }
+
+  &[data-theme='light'] {
+    color-scheme: light;
+  }
+
+  /* Brand blues */
+  --dbc-blue-500: light-dark(#0c3ee3, #3b82f6);
+  --dbc-blue-600: light-dark(#0932b6, #2563eb);
+  --dbc-blue-400: light-dark(#3b6ff5, #60a5fa);
+  --dbc-blue-300: light-dark(#7ea5ff, #93c5fd);
+  --dbc-blue-100: light-dark(#e8edfd, #0b1f3b);
+  --dbc-blue-150: light-dark(#dce5fc, #102a4d);
+
+  /* Neutrals */
+  --dbc-neutral-900: light-dark(#1a1a1a, #f9fafb);
+  --dbc-neutral-700: light-dark(#374151, #d1d5db);
+  --dbc-neutral-600: light-dark(#5f6368, #9ca3af);
+  --dbc-neutral-200: light-dark(#e8eaee, #374151);
+  --dbc-neutral-100: light-dark(#f3f4f6, #1f2937);
+
+  /* Added fixed surface neutrals */
+  --dbc-surface-muted: light-dark(#f8fafc, #1f2937);
+  --dbc-surface-strong: light-dark(#f3f4f6, #111827);
+
+  /* Contextual warm neutrals */
+  --dbc-contextual-200: light-dark(#f4f2ee, #1b1712);
+  --dbc-contextual-100: light-dark(#faf8f5, #15120e);
+
+  /* Accents */
+  --dbc-pink-500: light-dark(#ec4899, #f472b6);
+  --dbc-pink-600: light-dark(#be185d, #db2777);
+  --dbc-magenta-500: light-dark(#d946ef, #e879f9);
+  --dbc-magenta-100: light-dark(#fae8ff, #3b0a45);
+  --dbc-magenta-700: light-dark(#a21caf, #f5d0fe);
+
+  --dbc-gray-500: light-dark(#6b7280, #9ca3af);
+  --dbc-gray-600: light-dark(#4b5563, #6b7280);
+
+  /* Status colors */
+  --dbc-green-500: light-dark(#0da874, #22c55e);
+  --dbc-green-100: light-dark(#e6f9f3, #052e1f);
+  --dbc-green-700: light-dark(#065f46, #86efac);
+  --dbc-green-300: light-dark(#34d399, #4ade80);
+
+  --dbc-amber-700: light-dark(#b45309, #f59e0b);
+  --dbc-amber-100: light-dark(#fff7ed, #2b1b00);
+  /* Fixed (not light-dark): needs to stay a legible pale gold behind dark ink in both schemes */
+  --dbc-amber-200: #fde68a;
+  --dbc-amber-800: light-dark(#92400e, #fcd34d);
+  --dbc-amber-400: light-dark(#f59e0b, #fbbf24);
+
+  --dbc-red-600: light-dark(#dc2626, #ef4444);
+  --dbc-red-100: light-dark(#fef2f2, #2b0b0b);
+  --dbc-red-800: light-dark(#991b1b, #fecaca);
+  --dbc-red-300: light-dark(#f87171, #f87171);
+
+  --dbc-info-500: light-dark(#0ea5e9, #0ea5e9);
+  --dbc-info-100: light-dark(#e0f2fe, #042a3a);
+  --dbc-info-700: light-dark(#075985, #bae6fd);
+  --dbc-info-300: light-dark(#38bdf8, #38bdf8);
+
+  /* ==========================================================================
+   * SEMANTIC COLORS (THEME-DEPENDENT)
+   * ======================================================================= */
+
+  --color-brand: var(--dbc-blue-500);
+  --color-brand-hover: var(--dbc-blue-600);
+  --color-brand-strong: var(--dbc-blue-600);
+  --color-accent: var(--dbc-magenta-500);
+  --color-accent-bg: var(--dbc-magenta-100);
+  --color-accent-border: color-mix(in srgb, var(--dbc-magenta-500) 24%, transparent);
+  --color-accent-fg: var(--dbc-magenta-700);
+  --color-fg-on-accent: light-dark(#ffffff, #111827);
+
+  /* Backgrounds & surfaces */
+  --color-bg-page: light-dark(#ffffff, #111827);
+  --color-bg-surface: light-dark(#ffffff, #111827);
+  --color-bg-surface-subtle: var(--dbc-surface-muted);
+  --color-bg-surface-strong: var(--dbc-surface-strong);
+  --color-bg-inverse: light-dark(#1f2937, #2b3444);
+
+  --color-bg-toolbar: light-dark(#f3f4f6, #1f2937);
+  --color-bg-toolbar-hover: light-dark(#eef0f3, #263244);
+
+  /* Contextual surfaces */
+  --color-bg-contextual: var(--dbc-contextual-200);
+  --color-bg-contextual-subtle: var(--dbc-contextual-100);
+
+  /* Interaction backgrounds */
+  --color-bg-hover-subtle: var(--opac-bg-light);
+  --color-bg-pressed-subtle: var(--opac-bg-default);
+
+  /* Selected */
+  --color-bg-selected: var(--dbc-blue-100);
+  --color-bg-selected-hover: var(--dbc-blue-150);
+
+  /* Highlight */
+  --color-highlight-bg: var(--dbc-amber-200);
+  --color-highlight-fg: #1a1a1a;
+
+  --color-neutral: var(--dbc-neutral-200);
+
+  /* Borders */
+  --color-border-subtle: light-dark(#e5e7eb, rgba(255, 255, 255, 0.12));
+  --color-border-default: light-dark(#d1d5db, rgba(255, 255, 255, 0.18));
+  --color-border-strong: light-dark(#9ca3af, rgba(255, 255, 255, 0.28));
+  --color-border-selected: var(--color-brand);
+
+  /* Text */
+  --color-fg-default: var(--dbc-neutral-900);
+  --color-fg-muted: var(--dbc-neutral-700);
+  --color-fg-subtle: var(--dbc-neutral-600);
+  --color-fg-inverse: light-dark(#ffffff, #f9fafb);
+
+  --color-fg-on-strong: light-dark(#ffffff, #111827);
+  --color-fg-on-brand: light-dark(#ffffff, #111827);
+
+  /* Links */
+  --color-link: light-dark(var(--dbc-blue-500), var(--dbc-blue-300));
+  --color-link-hover: light-dark(var(--dbc-blue-600), #bfdbfe);
+
+  /* Status */
+  --color-status-success: var(--dbc-green-500);
+  --color-fg-on-status-success: light-dark(#ffffff, #f9fafb);
+  --color-status-success-bg: var(--dbc-green-100);
+  --color-status-success-border: color-mix(in srgb, var(--dbc-green-500) 24%, transparent);
+  --color-status-success-fg: var(--dbc-green-700);
+
+  --color-status-warning: var(--dbc-amber-700);
+  --color-fg-on-status-warning: light-dark(#ffffff, #f9fafb);
+  --color-status-warning-bg: var(--dbc-amber-100);
+  --color-status-warning-border: color-mix(in srgb, var(--dbc-amber-700) 24%, transparent);
+  --color-status-warning-fg: var(--dbc-amber-800);
+
+  --color-status-error: var(--dbc-red-600);
+  --color-fg-on-status-error: light-dark(#ffffff, #f9fafb);
+  --color-status-error-bg: var(--dbc-red-100);
+  --color-status-error-border: color-mix(in srgb, var(--dbc-red-600) 24%, transparent);
+  --color-status-error-fg: var(--dbc-red-800);
+
+  --color-status-info: var(--dbc-info-500);
+  --color-fg-on-status-info: light-dark(#ffffff, #f9fafb);
+  --color-status-info-bg: var(--dbc-info-100);
+  --color-status-info-border: color-mix(in srgb, var(--dbc-info-500) 24%, transparent);
+  --color-status-info-fg: var(--dbc-info-700);
+
+  /* Soft status surfaces — for compact chips/badges, not alerts */
+  --color-status-success-bg-soft: color-mix(
+    in srgb,
+    var(--color-status-success) 10%,
+    var(--color-bg-surface)
+  );
+  --color-status-warning-bg-soft: color-mix(
+    in srgb,
+    var(--color-status-warning) 10%,
+    var(--color-bg-surface)
+  );
+  --color-status-error-bg-soft: color-mix(
+    in srgb,
+    var(--color-status-error) 8%,
+    var(--color-bg-surface)
+  );
+  --color-status-info-bg-soft: color-mix(
+    in srgb,
+    var(--color-status-info) 10%,
+    var(--color-bg-surface)
+  );
+
+  --color-status-success-fg-soft: var(--color-status-success-fg);
+  --color-status-warning-fg-soft: var(--color-status-warning-fg);
+  --color-status-error-fg-soft: var(--color-status-error-fg);
+  --color-status-info-fg-soft: var(--color-status-info-fg);
+  --color-accent-bg-soft: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg-surface));
+  --color-accent-fg-soft: var(--color-accent-fg);
+
+  /* Chart colors */
+  --color-chart-empty: color-mix(in srgb, var(--color-fg-muted) 10%, rgb(255 255 255 / 0));
+  --color-chart-neutral: color-mix(in srgb, var(--color-fg-muted) 25%, rgb(255 255 255 / 0));
+  --color-chart-primary: color-mix(in srgb, var(--dbc-blue-500) 75%, rgb(255 255 255 / 0));
+  --color-chart-success: color-mix(in srgb, var(--dbc-green-500) 75%, rgb(255 255 255 / 0));
+  --color-chart-warning: color-mix(in srgb, var(--dbc-amber-400) 75%, rgb(255 255 255 / 0));
+  --color-chart-brand: color-mix(in srgb, var(--dbc-pink-500) 75%, rgb(255 255 255 / 0));
+  --color-chart-accent: color-mix(in srgb, var(--dbc-magenta-500) 75%, rgb(255 255 255 / 0));
+  --color-chart-info: color-mix(in srgb, var(--dbc-info-500) 75%, rgb(255 255 255 / 0));
+  --color-chart-error: color-mix(in srgb, var(--dbc-red-600) 75%, rgb(255 255 255 / 0));
+
+  /* Legacy aliases */
+  --color-chart-blue: var(--color-chart-primary);
+  --color-chart-green: var(--color-chart-success);
+  --color-chart-amber: var(--color-chart-warning);
+  --color-chart-pink: var(--color-chart-brand);
+  --color-chart-magenta: var(--color-chart-accent);
+  --color-chart-sky: var(--color-chart-info);
+  --color-chart-red: var(--color-chart-error);
+
+  /* Disabled */
+  --color-disabled-bg: var(--dbc-neutral-100);
+  --color-disabled-fg: light-dark(#9ca3af, #6b7280);
+  --color-disabled-border: var(--dbc-neutral-200);
+
+  /* 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));
+
+  /* Syntax (JSON viewer) */
+  --color-syntax-accent: var(--dbc-blue-300);
+  --color-syntax-string: var(--dbc-green-300);
+  --color-syntax-number: var(--dbc-amber-400);
+  --color-syntax-boolean: var(--dbc-pink-500);
+
+  /* ==========================================================================
+   * COMPONENT-LEVEL TOKENS (THEME-DEPENDENT COLORS)
+   * ======================================================================= */
+
+  /* Cards */
+  --card-bg-default: var(--color-bg-surface);
+  --card-bg-subtle: var(--color-bg-surface-subtle);
+  --card-bg-strong: var(--color-bg-surface-strong);
+
+  --card-fg-default: var(--color-fg-default);
+  --card-fg-on-strong: var(--color-fg-on-strong);
+
+  /* Buttons */
+  --button-bg-primary: var(--color-brand);
+  --button-bg-primary-hover: var(--color-brand-hover);
+  --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);
+  --color-logo-bg: color-mix(in srgb, var(--color-logo) 10%, var(--color-bg-surface));
+  --color-logo-fg: var(--color-fg-default);
+
+  /* Tables */
+  --table-header-bg: light-dark(#f3f4f6, #1b2533);
+  --table-row-bg: light-dark(#ffffff, #111827);
+  --table-row-bg-alt: light-dark(#f7f9fc, #141d2a);
+  --table-row-bg-hover: light-dark(#eef2f7, #172131);
+  --table-row-bg-selected: var(--dbc-blue-100);
+  --table-row-bg-selected-hover: var(--dbc-blue-150);
+
+  --table-border-subtle: light-dark(#eef1f4, rgba(255, 255, 255, 0.08));
+  --table-divider: light-dark(#e8ebef, rgba(255, 255, 255, 0.08));
+
+  --table-header-fg: var(--color-fg-subtle);
+  --table-cell-fg: var(--color-fg-default);
+
+  /* ==========================================================================
+   * THEME-SPECIFIC NON-COLOR TOKENS (VISUAL EFFECTS)
+   * ======================================================================= */
+
+  /* Opacities */
+  --opac-bg-light: light-dark(rgba(0, 0, 0, 0.025), rgba(255, 255, 255, 0.05));
+  --opac-bg-default: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.1));
+  --opac-bg-dark: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.15));
+  --opac-bg-brand: light-dark(rgba(49, 94, 251, 0.05), rgba(59, 130, 246, 0.12));
+  --opac-bg-light-invert: light-dark(rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.05));
+  --opac-bg-default-invert: light-dark(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
+  --opac-bg-dark-invert: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.15));
+
+  /* Shadows */
+
+  --shadow-xs: 0 1px 1px light-dark(rgba(0, 0, 0, 0.04), transparent);
+
+  --shadow-sm: 0 1px 2px light-dark(rgba(0, 0, 0, 0.06), transparent);
+
+  --shadow-md: 0 2px 6px light-dark(rgba(0, 0, 0, 0.08), transparent);
+
+  --shadow-lg: 0 4px 12px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35));
+
+  --shadow-xl: 0 8px 24px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.45));
+
+  /* Skeletons */
+  --skeleton-base: light-dark(#e5e7eb, #374151);
+  --skeleton-pulse: light-dark(#f3f4f6, #4b5563);
+}
+
+/* Inverse surface (dark background context) */
+[data-surface='inverse'] {
+  /* Text */
+  --color-fg-default: #ffffff;
+  --color-fg-muted: rgba(255, 255, 255, 0.7);
+  --color-fg-subtle: rgba(255, 255, 255, 0.5);
+
+  /* Borders */
+  --color-border-subtle: rgba(255, 255, 255, 0.15);
+  --color-border-default: rgba(255, 255, 255, 0.3);
+  --color-border-strong: rgba(255, 255, 255, 0.6);
+
+  /* Surfaces — keep controls visible on a dark backdrop */
+  --color-bg-surface: rgba(255, 255, 255, 0.08);
+  --color-bg-toolbar: rgba(255, 255, 255, 0.12);
+  --color-bg-toolbar-hover: rgba(255, 255, 255, 0.18);
+
+  /* Interaction */
+  --color-bg-hover-subtle: var(--opac-bg-light-invert);
+  --color-bg-pressed-subtle: var(--opac-bg-default-invert);
+
+  /* Opacity system override */
+  --opac-bg-default: var(--opac-bg-default-invert);
+  --opac-bg-dark: var(--opac-bg-dark-invert);
+
+  /* Focus */
+  --color-focus-ring: rgba(255, 255, 255, 0.5);
+  --focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.35);
+}

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

@@ -0,0 +1,22 @@
+/* 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/styles/themes/types.cjs

@@ -0,0 +1,2 @@
+'use strict';
+

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

@@ -0,0 +1,16 @@
+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;
+};

package/dist/styles/themes/types.js

@@ -0,0 +1 @@
+