@dbcdk/react-components 0.0.85 → 0.0.87

package/dist/components/forms/input/Input.js

@@ -45,6 +45,7 @@ export const Input = forwardRef(function Input({ label, error, helpText, orienta
         offset: 8,
         delayOpenMs: 0,
         focusOpenMode: tooltipOpenOnFocus ? 'any' : 'focus-visible',
+        closeOnPointerDown: false,
     });
     const trailingButtonVariant = variant === 'outlined' || variant === 'standalone' ? 'outlined' : 'default';
     return (_jsx(InputContainer, { label: label, htmlFor: inputId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, modified: modified, children: _jsxs("div", { style: rootStyle, className: [

package/dist/components/forms/text-area/Textarea.js

@@ -40,6 +40,7 @@ className, ...rest }) {
         offset: 8,
         delayOpenMs: 0,
         focusOpenMode: 'any',
+        closeOnPointerDown: false,
     });
     return (_jsx(InputContainer, { modified: modified, label: label, htmlFor: textareaId, error: error, helpText: helpText, helpTextAddition: showCount ? `${value === null || value === void 0 ? void 0 : value.length} tegn i denne boks` : undefined, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: _jsx("div", { className: [styles.container, modified ? styles.modified : ''].filter(Boolean).join(' '), children: _jsx("div", { ...(tooltipEnabled ? triggerProps : {}), children: inputField }) }) }));
 };

package/dist/components/overlay/tooltip/useTooltipTrigger.d.ts

@@ -10,6 +10,7 @@ type UseTooltipOptions = {
     delayOpenMs?: number;
     delayCloseMs?: number;
     focusOpenMode?: 'focus-visible' | 'any' | 'off';
+    closeOnPointerDown?: boolean;
 };
 export declare function useTooltipTrigger(options: UseTooltipOptions): {
     id: string;

package/dist/components/overlay/tooltip/useTooltipTrigger.js

@@ -4,7 +4,7 @@ export function useTooltipTrigger(options) {
     const ctx = useContext(TooltipContext);
     if (!ctx)
         throw new Error('useTooltipTrigger must be used within <TooltipProvider>.');
-    const { content, placement = 'top', offset = 8, open, defaultOpen = false, delayOpenMs = 150, delayCloseMs = 50, focusOpenMode = 'focus-visible', } = options;
+    const { content, placement = 'top', offset = 8, open, defaultOpen = false, delayOpenMs = 150, delayCloseMs = 50, focusOpenMode = 'focus-visible', closeOnPointerDown = true, } = options;
     const id = useId();
     const triggerElRef = useRef(null);
     const isControlled = open !== undefined;
@@ -82,7 +82,7 @@ export function useTooltipTrigger(options) {
     };
     const onPointerDown = () => {
         clearTimers();
-        if (!isControlled)
+        if (!isControlled && closeOnPointerDown)
             setOpen(false);
     };
     const onFocus = (e) => {

package/dist/components/theme-button/ThemeButton.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+import type { ButtonSize, ButtonVariant } from '../../components/button/Button';
+export interface ThemeButtonProps {
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+}
+export declare function ThemeButton({ size, variant }: ThemeButtonProps): JSX.Element;

package/dist/components/theme-button/ThemeButton.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Monitor, Moon, Palette, Sun } from 'lucide-react';
+import { Button } from '../../components/button/Button';
+import { Menu } from '../../components/menu/Menu';
+import { Popover } from '../../components/popover/Popover';
+import { useTheme } from '../../hooks/useTheme';
+const THEME_OPTIONS = [
+    { value: 'system', label: 'System', icon: _jsx(Monitor, { size: 16 }) },
+    { value: 'light', label: 'Lyst', icon: _jsx(Sun, { size: 16 }) },
+    { value: 'dark', label: 'Mørkt', icon: _jsx(Moon, { size: 16 }) },
+];
+export function ThemeButton({ size, variant = 'outlined' }) {
+    const { theme, switchTheme } = useTheme();
+    return (_jsx(Popover, { matchTriggerWidth: false, minWidth: "140px", trigger: (handleClick, chevron) => (_jsxs(Button, { variant: variant, size: size, onClick: handleClick, "aria-label": "Skift tema", "aria-haspopup": "menu", children: [_jsx(Palette, {}), chevron] })), children: close => (_jsxs(Menu, { children: [_jsx(Menu.Header, { children: "Udseende" }), THEME_OPTIONS.map(option => (_jsx(Menu.Item, { active: theme === option.value, children: _jsxs("button", { onClick: () => {
+                            switchTheme(option.value);
+                            close();
+                        }, children: [option.icon, option.label] }) }, option.value)))] })) }));
+}

package/dist/hooks/useTheme.d.ts

@@ -1,5 +1,7 @@
-export type ThemeVariant = 'light' | 'dark';
+declare const THEME_VARIANTS: readonly ["light", "dark", "system"];
+export type ThemeVariant = (typeof THEME_VARIANTS)[number];
 export declare function useTheme(initialTheme?: ThemeVariant): {
     theme: ThemeVariant | null;
     switchTheme: (id: ThemeVariant) => ThemeVariant;
 };
+export {};

package/dist/hooks/useTheme.js

@@ -1,6 +1,6 @@
 'use client';
 import { useCallback, useEffect, useState } from 'react';
-const THEME_VARIANTS = ['light', 'dark'];
+const THEME_VARIANTS = ['light', 'dark', 'system'];
 const STORAGE_KEY = 'dbc_theme';
 function isThemeVariant(x) {
     return !!x && THEME_VARIANTS.includes(x);
@@ -23,13 +23,19 @@ function persistTheme(id) {
         console.error('Failed to set theme cookie');
     }
 }
+function getTheme() {
+    return document.documentElement.dataset.theme;
+}
 function applyTheme(id) {
     document.documentElement.dataset.theme = id;
 }
-export function useTheme(initialTheme = 'light') {
+export function useTheme(initialTheme = 'system') {
     const [theme, setTheme] = useState(null);
     useEffect(() => {
-        let resolved = initialTheme;
+        const themeFromDataAttributes = getTheme();
+        let resolved = isThemeVariant(themeFromDataAttributes)
+            ? themeFromDataAttributes
+            : initialTheme;
         // Prefer cookie (SSR + client consistency)
         const fromCookie = getCookie(STORAGE_KEY);
         if (isThemeVariant(fromCookie)) {

package/dist/index.d.ts

@@ -70,3 +70,4 @@ export * from './components/state-page/StatePage';
 export * from './components/sticky-footer-layout/StickyFooterLayout';
 export * from './components/forms/typeahead/Typeahead';
 export * from './hooks/useDeviceSize';
+export * from './components/theme-button/ThemeButton';

package/dist/index.js

@@ -70,3 +70,4 @@ export * from './components/state-page/StatePage';
 export * from './components/sticky-footer-layout/StickyFooterLayout';
 export * from './components/forms/typeahead/Typeahead';
 export * from './hooks/useDeviceSize';
+export * from './components/theme-button/ThemeButton';

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

@@ -0,0 +1,242 @@
+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(#e5e7eb, #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-gray-500: light-dark(#6b7280, #9ca3af);
+  --dbc-gray-600: light-dark(#4b5563, #6b7280);
+
+  /* Status colors */
+  --dbc-green-500: light-dark(#10b981, #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);
+  --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);
+
+  /* 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(--color-bg-selected-hover);
+  --color-highlight-fg: var(--color-fg-default);
+
+  --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-status-success-bg: var(--dbc-green-100);
+  --color-status-success-border: var(--dbc-green-300);
+  --color-status-success-fg: var(--dbc-green-700);
+
+  --color-status-warning: var(--dbc-amber-700);
+  --color-status-warning-bg: var(--dbc-amber-100);
+  --color-status-warning-border: var(--dbc-amber-400);
+  --color-status-warning-fg: var(--dbc-amber-800);
+
+  --color-status-error: var(--dbc-red-600);
+  --color-status-error-bg: var(--dbc-red-100);
+  --color-status-error-border: var(--dbc-red-300);
+  --color-status-error-fg: var(--dbc-red-800);
+
+  --color-status-info: var(--dbc-info-500);
+  --color-status-info-bg: var(--dbc-info-100);
+  --color-status-info-border: var(--dbc-info-300);
+  --color-status-info-fg: var(--dbc-info-700);
+
+  /* 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);
+
+  /* Tables */
+  --table-header-bg: light-dark(#f5f6f8, #182230);
+  --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-border-header: light-dark(#e2e6ea, rgba(255, 255, 255, 0.12));
+  --table-divider: light-dark(#e8ebef, rgba(255, 255, 255, 0.08));
+
+  --table-header-fg: var(--color-fg-muted);
+  --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 2px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.18));
+  --shadow-sm: 0 1px 3px light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.24));
+  --shadow-md: 0 2px 6px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.32));
+  --shadow-lg: 0 4px 12px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
+  --shadow-xl: 0 8px 24px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.48));
+
+  /* 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);
+
+  /* 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/package.json

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

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

@@ -1,226 +0,0 @@
-html[data-theme='dark'] {
-  /* ==========================================================================
-   * PRIMITIVES (THEME-DEPENDENT)
-   * ======================================================================= */
-
-  /* Brand blues */
-  --dbc-blue-500: #3b82f6;
-  --dbc-blue-600: #2563eb;
-  --dbc-blue-400: #60a5fa;
-  --dbc-blue-300: #93c5fd;
-  --dbc-blue-100: #0b1f3b;
-  --dbc-blue-150: #102a4d;
-
-  /* Neutrals */
-  --dbc-neutral-900: #f9fafb;
-  --dbc-neutral-700: #d1d5db;
-  --dbc-neutral-600: #9ca3af;
-  --dbc-neutral-200: #374151;
-  --dbc-neutral-100: #1f2937;
-
-  /* Added fixed surface neutrals */
-  --dbc-surface-muted: #1f2937;
-  --dbc-surface-strong: #111827;
-
-  /* Contextual warm neutrals */
-  --dbc-contextual-200: #1b1712;
-  --dbc-contextual-100: #15120e;
-
-  /* Accents */
-  --dbc-pink-500: #f472b6;
-  --dbc-pink-600: #db2777;
-
-  --dbc-gray-500: #9ca3af;
-  --dbc-gray-600: #6b7280;
-
-  /* Status colors */
-  --dbc-green-500: #22c55e;
-  --dbc-green-100: #052e1f;
-  --dbc-green-700: #86efac;
-  --dbc-green-300: #4ade80;
-
-  --dbc-amber-700: #f59e0b;
-  --dbc-amber-100: #2b1b00;
-  --dbc-amber-800: #fcd34d;
-  --dbc-amber-400: #fbbf24;
-
-  --dbc-red-600: #ef4444;
-  --dbc-red-100: #2b0b0b;
-  --dbc-red-800: #fecaca;
-  --dbc-red-300: #f87171;
-
-  --dbc-info-500: #0ea5e9;
-  --dbc-info-100: #042a3a;
-  --dbc-info-700: #bae6fd;
-  --dbc-info-300: #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);
-
-  /* Backgrounds & surfaces */
-  --color-bg-page: #111827;
-  --color-bg-surface: #111827;
-  --color-bg-surface-subtle: var(--dbc-surface-muted);
-  --color-bg-surface-strong: var(--dbc-surface-strong);
-  --color-bg-inverse: #2b3444;
-
-  --color-bg-toolbar: #1f2937;
-  --color-bg-toolbar-hover: #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);
-  --color-highlight-bg: var(--color-bg-selected-hover);
-  --color-highlight-fg: var(--color-fg-default);
-
-  --color-neutral: var(--dbc-neutral-200);
-
-  /* Borders */
-  --color-border-subtle: rgba(255, 255, 255, 0.12);
-  --color-border-default: rgba(255, 255, 255, 0.18);
-  --color-border-strong: 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: #f9fafb;
-
-  --color-fg-on-strong: #111827;
-  --color-fg-on-brand: #111827;
-
-  /* Links */
-  --color-link: var(--dbc-blue-300);
-  --color-link-hover: #bfdbfe;
-
-  /* Status */
-  --color-status-success: var(--dbc-green-500);
-  --color-status-success-bg: var(--dbc-green-100);
-  --color-status-success-border: var(--dbc-green-300);
-  --color-status-success-fg: var(--dbc-green-700);
-
-  --color-status-warning: var(--dbc-amber-700);
-  --color-status-warning-bg: var(--dbc-amber-100);
-  --color-status-warning-border: var(--dbc-amber-400);
-  --color-status-warning-fg: var(--dbc-amber-800);
-
-  --color-status-error: var(--dbc-red-600);
-  --color-status-error-bg: var(--dbc-red-100);
-  --color-status-error-border: var(--dbc-red-300);
-  --color-status-error-fg: var(--dbc-red-800);
-
-  --color-status-info: var(--dbc-info-500);
-  --color-status-info-bg: var(--dbc-info-100);
-  --color-status-info-border: var(--dbc-info-300);
-  --color-status-info-fg: var(--dbc-info-700);
-
-  /* Disabled */
-  --color-disabled-bg: var(--dbc-neutral-100);
-  --color-disabled-fg: #6b7280;
-  --color-disabled-border: var(--dbc-neutral-200);
-
-  /* Focus */
-  --color-focus-ring: var(--dbc-blue-300);
-  --focus-ring: 0 0 0 3px 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);
-
-  /* Tables */
-  --table-header-bg: #182230;
-  --table-row-bg: #111827;
-  --table-row-bg-alt: #141d2a;
-  --table-row-bg-hover: #172131;
-  --table-row-bg-selected: var(--dbc-blue-100);
-  --table-row-bg-selected-hover: var(--dbc-blue-150);
-
-  --table-border-subtle: rgba(255, 255, 255, 0.08);
-  --table-border-header: rgba(255, 255, 255, 0.12);
-  --table-divider: rgba(255, 255, 255, 0.08);
-
-  --table-header-fg: var(--color-fg-muted);
-  --table-cell-fg: var(--color-fg-default);
-
-  /* ==========================================================================
-   * THEME-SPECIFIC NON-COLOR TOKENS (VISUAL EFFECTS)
-   * ======================================================================= */
-
-  /* Opacities */
-  --opac-bg-light: rgba(255, 255, 255, 0.05);
-  --opac-bg-default: rgba(255, 255, 255, 0.1);
-  --opac-bg-dark: rgba(255, 255, 255, 0.15);
-  --opac-bg-brand: rgba(59, 130, 246, 0.12);
-  --opac-bg-light-invert: rgba(0, 0, 0, 0.05);
-  --opac-bg-default-invert: rgba(0, 0, 0, 0.1);
-  --opac-bg-dark-invert: rgba(0, 0, 0, 0.15);
-
-  /* Shadows */
-  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.24);
-  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.32);
-  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
-  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.48);
-
-  /* Data viz */
-  --viz-cat-1: #2563eb;
-  --viz-cat-2: #16a34a;
-  --viz-cat-3: #f59e0b;
-  --viz-cat-4: #ef4444;
-  --viz-cat-5: #8b5cf6;
-  --viz-cat-6: #14b8a6;
-
-  --viz-seq-start: #1e3a8a;
-  --viz-seq-mid: #3b82f6;
-  --viz-seq-end: #93c5fd;
-
-  /* Skeletons */
-  --skeleton-base: #374151;
-  --skeleton-pulse: #4b5563;
-}
-
-/* High-contrast variant (theme override) */
-:root[data-theme='dark'][data-contrast='high'] {
-  --color-border-subtle: #9ca3af;
-  --color-border-default: #e5e7eb;
-  --color-border-strong: #f9fafb;
-
-  --table-border-subtle: #6b7280;
-  --table-border-header: #9ca3af;
-  --table-divider: #9ca3af;
-
-  --focus-ring: 0 0 0 3px #e5e7eb;
-}

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

@@ -1,220 +0,0 @@
-html[data-theme='light'] {
-  /* ==========================================================================
-   * PRIMITIVES (THEME-DEPENDENT)
-   * ======================================================================= */
-
-  /* Brand blues */
-  --dbc-blue-500: #0c3ee3;
-  --dbc-blue-600: #0932b6;
-  --dbc-blue-400: #3b6ff5;
-  --dbc-blue-300: #7ea5ff;
-  --dbc-blue-100: #e8edfd;
-  --dbc-blue-150: #dce5fc;
-
-  /* Neutrals */
-  --dbc-neutral-900: #1a1a1a;
-  --dbc-neutral-700: #374151;
-  --dbc-neutral-600: #5f6368;
-  --dbc-neutral-200: #e5e7eb;
-  --dbc-neutral-100: #f3f4f6;
-
-  /* Added fixed surface neutrals */
-  --dbc-surface-muted: #f8fafc;
-  --dbc-surface-strong: #f3f4f6;
-
-  /* Contextual warm neutrals */
-  --dbc-contextual-200: #f4f2ee;
-  --dbc-contextual-100: #faf8f5;
-
-  /* Accents */
-  --dbc-pink-500: #ec4899;
-  --dbc-pink-600: #be185d;
-
-  --dbc-gray-500: #6b7280;
-  --dbc-gray-600: #4b5563;
-
-  /* Status colors */
-  --dbc-green-500: #10b981;
-  --dbc-green-100: #e6f9f3;
-  --dbc-green-700: #065f46;
-  --dbc-green-300: #34d399;
-
-  --dbc-amber-700: #b45309;
-  --dbc-amber-100: #fff7ed;
-  --dbc-amber-800: #92400e;
-  --dbc-amber-400: #f59e0b;
-
-  --dbc-red-600: #dc2626;
-  --dbc-red-100: #fef2f2;
-  --dbc-red-800: #991b1b;
-  --dbc-red-300: #f87171;
-
-  --dbc-info-500: #0ea5e9;
-  --dbc-info-100: #e0f2fe;
-  --dbc-info-700: #075985;
-  --dbc-info-300: #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);
-
-  /* Backgrounds & surfaces */
-  --color-bg-page: #ffffff;
-  --color-bg-surface: #ffffff;
-  --color-bg-surface-subtle: var(--dbc-surface-muted);
-  --color-bg-surface-strong: var(--dbc-surface-strong);
-  --color-bg-inverse: #1f2937;
-
-  --color-bg-toolbar: #f3f4f6;
-  --color-bg-toolbar-hover: #eef0f3;
-
-  /* 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);
-  --color-highlight-bg: var(--color-bg-selected-hover);
-  --color-highlight-fg: var(--color-fg-default);
-
-  --color-neutral: var(--dbc-neutral-200);
-
-  /* Borders */
-  --color-border-subtle: #e5e7eb;
-  --color-border-default: #d1d5db;
-  --color-border-strong: #9ca3af;
-  --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: #ffffff;
-
-  --color-fg-on-strong: #ffffff;
-  --color-fg-on-brand: #ffffff;
-
-  /* Links */
-  --color-link: var(--dbc-blue-500);
-  --color-link-hover: var(--dbc-blue-600);
-
-  /* Status */
-  --color-status-success: var(--dbc-green-500);
-  --color-status-success-bg: var(--dbc-green-100);
-  --color-status-success-border: var(--dbc-green-300);
-  --color-status-success-fg: var(--dbc-green-700);
-
-  --color-status-warning: var(--dbc-amber-700);
-  --color-status-warning-bg: var(--dbc-amber-100);
-  --color-status-warning-border: var(--dbc-amber-400);
-  --color-status-warning-fg: var(--dbc-amber-800);
-
-  --color-status-error: var(--dbc-red-600);
-  --color-status-error-bg: var(--dbc-red-100);
-  --color-status-error-border: var(--dbc-red-300);
-  --color-status-error-fg: var(--dbc-red-800);
-
-  --color-status-info: var(--dbc-info-500);
-  --color-status-info-bg: var(--dbc-info-100);
-  --color-status-info-border: var(--dbc-info-300);
-  --color-status-info-fg: var(--dbc-info-700);
-
-  /* Disabled */
-  --color-disabled-bg: var(--dbc-neutral-100);
-  --color-disabled-fg: #9ca3af;
-  --color-disabled-border: var(--dbc-neutral-200);
-
-  /* Focus */
-  --color-focus-ring: var(--dbc-blue-300);
-  --focus-ring: 0 0 0 3px rgba(12, 62, 227, 0.25);
-
-  /* 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);
-
-  --table-header-bg: #f5f6f8;
-  --table-row-bg: #ffffff;
-  --table-row-bg-alt: #f7f9fc;
-  --table-row-bg-hover: #eef2f7;
-  --table-row-bg-selected: var(--dbc-blue-100);
-  --table-row-bg-selected-hover: var(--dbc-blue-150);
-
-  --table-border-subtle: #eef1f4;
-  --table-border-header: #e2e6ea;
-  --table-divider: #e8ebef;
-
-  --table-header-fg: var(--color-fg-muted);
-  --table-cell-fg: var(--color-fg-default);
-
-  /* ==========================================================================
-   * THEME-SPECIFIC NON-COLOR TOKENS (VISUAL EFFECTS)
-   * ======================================================================= */
-
-  /* Opacities */
-  --opac-bg-light: rgba(0, 0, 0, 0.025);
-  --opac-bg-default: rgba(0, 0, 0, 0.05);
-  --opac-bg-dark: rgba(0, 0, 0, 0.1);
-  --opac-bg-brand: rgba(49, 94, 251, 0.05);
-  --opac-bg-light-invert: rgba(255, 255, 255, 0.025);
-  --opac-bg-default-invert: rgba(255, 255, 255, 0.05);
-  --opac-bg-dark-invert: rgba(255, 255, 255, 0.1);
-
-  /* Shadows */
-  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
-  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
-  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12);
-
-  /* Data viz */
-  --viz-cat-1: #2563eb;
-  --viz-cat-2: #16a34a;
-  --viz-cat-3: #f59e0b;
-  --viz-cat-4: #ef4444;
-  --viz-cat-5: #8b5cf6;
-  --viz-cat-6: #14b8a6;
-
-  --viz-seq-start: #dbeafe;
-  --viz-seq-mid: #60a5fa;
-  --viz-seq-end: #1d4ed8;
-
-  /* Skeletons */
-  --skeleton-base: #e5e7eb;
-  --skeleton-pulse: #f3f4f6;
-}
-
-/* High-contrast variant (theme override) */
-:root[data-contrast='high'] {
-  --color-border-subtle: #4b5563;
-  --color-border-default: #374151;
-  --color-border-strong: #111827;
-  --focus-ring: 0 0 0 3px #111827;
-}