@dbcdk/react-components 0.0.168 → 0.0.169

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

@@ -1,320 +0,0 @@
-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

@@ -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/styles/themes/types.cjs

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

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

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

@@ -1 +0,0 @@
-