@dbcdk/react-components 0.0.19 → 0.0.21

package/dist/components/table/table.utils.d.ts

@@ -2,7 +2,7 @@ import type { CSSProperties, ReactNode } from 'react';
 import type { ColumnItem } from './Table';
 export type SortDirection = 'asc' | 'desc' | null;
 export declare function getVisibleColumns<T>(columns: Array<ColumnItem<T>>): Array<ColumnItem<T>>;
-export declare function getColumnStyle(columnId: string, columnStyles: Partial<Record<string, CSSProperties>> | undefined, alignment?: 'left' | 'right' | 'center', verticalAlignment?: 'top' | 'middle' | 'bottom'): CSSProperties;
+export declare function getColumnStyle(columnId: string, columnStyles: Partial<Record<string, CSSProperties>> | undefined, alignment?: 'left' | 'right' | 'center', verticalAlignment?: 'top' | 'middle' | 'bottom', divider?: boolean): CSSProperties;
 export declare function getHeaderLabel(header: string | (() => ReactNode)): ReactNode;
 export declare function isActiveSort(sortById: string | undefined, columnId: string): boolean;
 export declare function getAriaSort(sortable: boolean | undefined, active: boolean, direction: SortDirection): 'ascending' | 'descending' | 'none';

package/dist/components/table/table.utils.js

@@ -1,15 +1,14 @@
 export function getVisibleColumns(columns) {
     return columns.filter(c => !c.hidden);
 }
-export function getColumnStyle(columnId, columnStyles, alignment, verticalAlignment) {
-    var _a;
+export function getColumnStyle(columnId, columnStyles, alignment, verticalAlignment, divider) {
     const baseStyle = columnStyles === null || columnStyles === void 0 ? void 0 : columnStyles[columnId];
     return {
         ...(baseStyle !== null && baseStyle !== void 0 ? baseStyle : {}),
         ...(alignment === 'right' ? { fontVariantNumeric: 'tabular-nums' } : null),
         verticalAlign: verticalAlignment !== null && verticalAlignment !== void 0 ? verticalAlignment : 'top',
         textAlign: alignment !== null && alignment !== void 0 ? alignment : 'left',
-        minWidth: (_a = baseStyle === null || baseStyle === void 0 ? void 0 : baseStyle.minWidth) !== null && _a !== void 0 ? _a : 0,
+        ...(divider ? { borderLeft: '1px solid var(--color-border-subtle)' } : null),
     };
 }
 export function getHeaderLabel(header) {

package/dist/components/table/tanstackTable.utils.d.ts

@@ -1,5 +1,4 @@
-import type { ColumnDef, SortingState, VisibilityState, Column } from '@tanstack/react-table';
-import type { CSSProperties } from 'react';
+import type { ColumnDef, ColumnSizingState, SortingState, VisibilityState } from '@tanstack/react-table';
 import type { ColumnItem } from './Table';
 type AnyRecord = Record<string, any>;
 export declare function getColumnId<T>(def: ColumnDef<T, any>, index: number): string;
@@ -10,13 +9,13 @@ export declare function getSortPropsFromSorting(sorting: SortingState): {
     sortById?: string;
     sortDirection: 'asc' | 'desc' | null;
 };
-/**
- * Builds `columnStyles` where TanStack is source of truth.
- * Keep this util pure by passing in the leaf columns and the set of allowed IDs.
- */
-export declare function buildColumnStyles(leafColumns: Array<Pick<Column<any, any>, 'id' | 'getSize' | 'columnDef'>>, allowedIds: Set<string>, defaults?: {
-    minWidth: number;
-    maxWidth: number;
-}): Record<string, CSSProperties>;
 export declare function columnItemsToIdSet<T>(items: Array<ColumnItem<T>>): Set<string>;
+export declare function buildDistributedGridTemplateColumns(args: {
+    table: any;
+    allowedIds: Set<string>;
+    hasSelection: boolean;
+    selectionPx: number;
+    defaultMinPx: number;
+    columnSizing: ColumnSizingState;
+}): string;
 export {};

package/dist/components/table/tanstackTable.utils.js

@@ -1,8 +1,8 @@
 export function getColumnId(def, index) {
     const d = def;
-    if (d.id != null && String(d.id).length)
+    if (d.id != null && String(d.id).length > 0)
         return String(d.id);
-    if (d.accessorKey != null && String(d.accessorKey).length)
+    if (d.accessorKey != null && String(d.accessorKey).length > 0)
         return String(d.accessorKey);
     return `col_${index}`;
 }
@@ -19,11 +19,12 @@ export function buildColumnVisibilityFromVisibleIds(defs, visibleColumnIds) {
 }
 export function mapDefsToColumnItems(defs, columnVisibility) {
     return defs.map((def, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a, _b, _c, _d, _e, _f;
         const id = getColumnId(def, index);
         const accessorKey = def.accessorKey;
         const accessorFn = def.accessorFn;
         const cell = def.cell;
+        const meta = (_b = ((_a = def.meta) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : {};
         let render;
         if (typeof cell === 'function') {
             render = (row) => cell({
@@ -44,19 +45,20 @@ export function mapDefsToColumnItems(defs, columnVisibility) {
         else {
             render = () => null;
         }
-        const isVisible = (_a = columnVisibility[id]) !== null && _a !== void 0 ? _a : true;
+        const isVisible = (_c = columnVisibility[id]) !== null && _c !== void 0 ? _c : true;
         return {
             id,
             header: def.header,
             accessor: accessorKey,
-            sortable: (_b = def.enableSorting) !== null && _b !== void 0 ? _b : !!accessorKey,
+            sortable: (_d = def.enableSorting) !== null && _d !== void 0 ? _d : !!accessorKey,
             render,
             hidden: !isVisible,
-            align: (_d = (_c = def.meta) === null || _c === void 0 ? void 0 : _c.align) !== null && _d !== void 0 ? _d : undefined,
-            verticalAlign: (_f = (_e = def.meta) === null || _e === void 0 ? void 0 : _e.verticalAlign) !== null && _f !== void 0 ? _f : undefined,
-            emptyPlaceholder: (_h = (_g = def.meta) === null || _g === void 0 ? void 0 : _g.emptyPlaceholder) !== null && _h !== void 0 ? _h : '-',
-            allowWrap: (_k = (_j = def.meta) === null || _j === void 0 ? void 0 : _j.allowWrap) !== null && _k !== void 0 ? _k : false,
-            severity: (_m = (_l = def.meta) === null || _l === void 0 ? void 0 : _l.severity) !== null && _m !== void 0 ? _m : undefined,
+            align: meta.align,
+            verticalAlign: meta.verticalAlign,
+            emptyPlaceholder: (_e = meta.emptyPlaceholder) !== null && _e !== void 0 ? _e : '-',
+            allowWrap: (_f = meta.allowWrap) !== null && _f !== void 0 ? _f : false,
+            severity: meta.severity,
+            divider: meta.divider,
         };
     });
 }
@@ -76,29 +78,47 @@ export function getSortPropsFromSorting(sorting) {
         sortDirection: s ? (s.desc ? 'desc' : 'asc') : null,
     };
 }
-/**
- * Builds `columnStyles` where TanStack is source of truth.
- * Keep this util pure by passing in the leaf columns and the set of allowed IDs.
- */
-export function buildColumnStyles(leafColumns, allowedIds, defaults = { minWidth: 80, maxWidth: 800 }) {
-    var _a, _b;
-    const styles = {};
-    for (const c of leafColumns) {
-        const id = c.id;
-        if (!allowedIds.has(id))
-            continue;
-        const anyDef = c.columnDef;
-        styles[id] = {
-            width: c.getSize(),
-            minWidth: (_a = anyDef.minSize) !== null && _a !== void 0 ? _a : defaults.minWidth,
-            maxWidth: (_b = anyDef.maxSize) !== null && _b !== void 0 ? _b : defaults.maxWidth,
-        };
-    }
-    return styles;
-}
 export function columnItemsToIdSet(items) {
     const s = new Set();
     for (const c of items)
         s.add(c.id);
     return s;
 }
+function clamp(value, min, max) {
+    const lowerBounded = Math.max(min, value);
+    if (max == null || !Number.isFinite(max))
+        return lowerBounded;
+    return Math.min(lowerBounded, max);
+}
+export function buildDistributedGridTemplateColumns(args) {
+    var _a, _b, _c, _d;
+    const { table, allowedIds, hasSelection, selectionPx, defaultMinPx, columnSizing } = args;
+    const parts = [];
+    const leaf = table.getVisibleLeafColumns().filter((c) => allowedIds.has(c.id));
+    if (hasSelection)
+        parts.push(`${selectionPx}px`);
+    for (const c of leaf) {
+        const def = c.columnDef;
+        const meta = ((_b = ((_a = def.meta) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : {});
+        const min = Math.max(1, Number((_c = def.minSize) !== null && _c !== void 0 ? _c : defaultMinPx));
+        const hasMax = def.maxSize != null;
+        const max = hasMax ? Math.max(min, Number(def.maxSize)) : undefined;
+        const weight = Math.max(1, Number((_d = meta.weight) !== null && _d !== void 0 ? _d : 1));
+        const resizedPxRaw = columnSizing[c.id];
+        const resizedPx = resizedPxRaw != null ? Math.round(clamp(Number(resizedPxRaw), min, max)) : undefined;
+        if (resizedPx != null) {
+            parts.push(`${resizedPx}px`);
+            continue;
+        }
+        if (hasMax && max === min) {
+            parts.push(`${Math.round(min)}px`);
+            continue;
+        }
+        if (hasMax && max != null) {
+            parts.push(`minmax(${Math.round(min)}px, ${Math.round(max)}px)`);
+            continue;
+        }
+        parts.push(`minmax(${Math.round(min)}px, ${weight}fr)`);
+    }
+    return parts.join(' ');
+}

package/dist/hooks/useViewportFill.d.ts

@@ -3,12 +3,13 @@ type Options = {
     bottomOffset?: number;
     min?: number;
     includeMarginTop?: boolean;
+    /**
+     * Optional element to observe in addition to the target itself.
+     * Useful when a nearby wrapper changes height and pushes the table.
+     */
+    watchRef?: RefObject<HTMLElement | null>;
 };
-/**
- * Computes the remaining viewport space below the element and returns a style
- * with `maxHeight` + `overflow: auto`.
- */
-export declare function useViewportFill<T extends HTMLElement>(ref: RefObject<T>, { bottomOffset, min, includeMarginTop }?: Options): {
+export declare function useViewportFill<T extends HTMLElement>(ref: RefObject<T>, { bottomOffset, min, includeMarginTop, watchRef }?: Options): {
     maxHeight: number;
     style: CSSProperties;
     recompute: () => void;

package/dist/hooks/useViewportFill.js

@@ -1,12 +1,8 @@
 'use client';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-/**
- * Computes the remaining viewport space below the element and returns a style
- * with `maxHeight` + `overflow: auto`.
- */
-export function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop = false } = {}) {
-    const [maxHeight, setMaxHeight] = useState(0);
+export function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop = false, watchRef } = {}) {
+    const [maxHeight, setMaxHeight] = useState(min);
     const raf = useRef(null);
     const measure = useCallback(() => {
         if (typeof window === 'undefined' || !ref.current)
@@ -15,56 +11,62 @@ export function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMargi
         const rect = el.getBoundingClientRect();
         let top = rect.top;
         if (includeMarginTop) {
-            const mt = parseFloat(getComputedStyle(el).marginTop || '0') || 0;
+            const mt = parseFloat(window.getComputedStyle(el).marginTop || '0') || 0;
             top -= mt;
         }
-        const raw = window.innerHeight - bottomOffset - top;
-        const next = Math.max(min, Math.floor(raw));
-        setMaxHeight(next);
+        const next = Math.max(min, Math.floor(window.innerHeight - bottomOffset - top));
+        setMaxHeight(prev => (prev !== next ? next : prev));
     }, [ref, bottomOffset, min, includeMarginTop]);
-    // Initial + dependency-triggered measurement
+    const scheduleMeasure = useCallback(() => {
+        if (typeof window === 'undefined')
+            return;
+        if (raf.current != null)
+            cancelAnimationFrame(raf.current);
+        raf.current = window.requestAnimationFrame(measure);
+    }, [measure]);
     useIsomorphicLayoutEffect(() => {
         measure();
     }, [measure]);
     useEffect(() => {
-        if (typeof window === 'undefined')
+        var _a;
+        if (typeof window === 'undefined' || !ref.current)
             return;
-        const onFrame = () => {
-            if (raf.current)
-                cancelAnimationFrame(raf.current);
-            raf.current = requestAnimationFrame(measure);
-        };
-        window.addEventListener('scroll', onFrame, { passive: true });
-        window.addEventListener('resize', onFrame);
+        const target = ref.current;
+        const extra = (_a = watchRef === null || watchRef === void 0 ? void 0 : watchRef.current) !== null && _a !== void 0 ? _a : null;
+        const parent = target.parentElement;
+        const onResizeOrScroll = () => scheduleMeasure();
+        const onTransitionOrAnimationEnd = () => scheduleMeasure();
+        window.addEventListener('resize', onResizeOrScroll);
+        window.addEventListener('scroll', onResizeOrScroll, { passive: true });
+        // Cheap and often enough for collapsible filter panels.
+        document.addEventListener('transitionend', onTransitionOrAnimationEnd, true);
+        document.addEventListener('animationend', onTransitionOrAnimationEnd, true);
         let ro = null;
-        if ('ResizeObserver' in window && ref.current) {
-            ro = new ResizeObserver(onFrame);
-            ro.observe(ref.current);
-        }
-        // MutationObserver to detect DOM changes that may affect position
-        let mo = null;
-        if ('MutationObserver' in window && ref.current) {
-            mo = new MutationObserver(onFrame);
-            // Observe parent node for subtree changes
-            const parent = ref.current.parentNode;
-            if (parent) {
-                mo.observe(parent, { childList: true, subtree: true });
-            }
+        if ('ResizeObserver' in window) {
+            ro = new ResizeObserver(() => scheduleMeasure());
+            ro.observe(target);
+            if (parent && parent !== target)
+                ro.observe(parent);
+            if (extra && extra !== target && extra !== parent)
+                ro.observe(extra);
         }
         return () => {
-            window.removeEventListener('scroll', onFrame);
-            window.removeEventListener('resize', onFrame);
-            if (ro)
-                ro.disconnect();
-            if (mo)
-                mo.disconnect();
-            if (raf.current)
+            window.removeEventListener('resize', onResizeOrScroll);
+            window.removeEventListener('scroll', onResizeOrScroll);
+            document.removeEventListener('transitionend', onTransitionOrAnimationEnd, true);
+            document.removeEventListener('animationend', onTransitionOrAnimationEnd, true);
+            ro === null || ro === void 0 ? void 0 : ro.disconnect();
+            if (raf.current != null) {
                 cancelAnimationFrame(raf.current);
+            }
         };
-    }, [measure, ref]);
+    }, [ref, watchRef, scheduleMeasure]);
     return {
         maxHeight,
-        style: { height: maxHeight, overflow: 'auto' },
+        style: {
+            maxHeight,
+            overflow: 'auto',
+        },
         recompute: measure,
     };
 }

package/dist/src/styles/styles.css

@@ -54,24 +54,30 @@ body.dbc-app {
   max-width: 1600px;
 }
 
+.dbc-overflow-auto {
+  overflow: auto;
+}
+
 .dbc-font-mono {
   font-family: monospace;
 }
 
 .dbc-table {
   --card-label-width: 260px;
-
   border-collapse: collapse;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
 }
 
+.dbc-table--hover tr:hover {
+  background-color: var(--color-bg-contextual);
+}
+
 .dbc-table tr + tr th,
 .dbc-table tr + tr td {
   padding-block: var(--spacing-xxs);
 }
 
-/* LABELS (th) → match .metaLabel */
 .dbc-table th {
   white-space: nowrap;
   text-align: left;
@@ -118,7 +124,7 @@ body.dbc-app {
   color: var(--color-fg-subtle);
 }
 
-.dbc-small-text {
+.dbc-sm-text {
   font-size: var(--font-size-xs);
 }
 

package/dist/styles/styles.css

@@ -54,24 +54,30 @@ body.dbc-app {
   max-width: 1600px;
 }
 
+.dbc-overflow-auto {
+  overflow: auto;
+}
+
 .dbc-font-mono {
   font-family: monospace;
 }
 
 .dbc-table {
   --card-label-width: 260px;
-
   border-collapse: collapse;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
 }
 
+.dbc-table--hover tr:hover {
+  background-color: var(--color-bg-contextual);
+}
+
 .dbc-table tr + tr th,
 .dbc-table tr + tr td {
   padding-block: var(--spacing-xxs);
 }
 
-/* LABELS (th) → match .metaLabel */
 .dbc-table th {
   white-space: nowrap;
   text-align: left;
@@ -118,7 +124,7 @@ body.dbc-app {
   color: var(--color-fg-subtle);
 }
 
-.dbc-small-text {
+.dbc-sm-text {
   font-size: var(--font-size-xs);
 }
 

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

@@ -118,9 +118,6 @@
   /* Skeletons & loaders (structure shared; colors overridden per theme if desired) */
   --spinner-size: 16px;
   --spinner-stroke: 2px;
-
-  /* Logical spacing */
-  --space-inline-sm: 8px;
 }
 
 /* Reduced motion (shared) */

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

@@ -1,6 +1,6 @@
 html[data-theme='dark'] {
   /* ==========================================================================
-   * PRIMITIVES
+   * PRIMITIVES (THEME-DEPENDENT)
    * ======================================================================= */
 
   /* Brand blues */
@@ -18,6 +18,14 @@ html[data-theme='dark'] {
   --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;
@@ -47,7 +55,7 @@ html[data-theme='dark'] {
   --dbc-info-300: #38bdf8;
 
   /* ==========================================================================
-   * SEMANTIC COLORS
+   * SEMANTIC COLORS (THEME-DEPENDENT)
    * ======================================================================= */
 
   --color-brand: var(--dbc-blue-500);
@@ -57,11 +65,15 @@ html[data-theme='dark'] {
   /* Backgrounds & surfaces */
   --color-bg-page: #111827;
   --color-bg-surface: #111827;
-  --color-bg-surface-subtle: rgba(255, 255, 255, 0.05);
-  --color-bg-surface-strong: #0f172a;
+  --color-bg-surface-subtle: var(--dbc-surface-muted);
+  --color-bg-surface-strong: var(--dbc-surface-strong);
 
-  --color-bg-contextual: #0b1220;
-  --color-bg-contextual-subtle: #0f172a;
+  --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);
@@ -73,10 +85,10 @@ html[data-theme='dark'] {
 
   --color-neutral: var(--dbc-neutral-200);
 
-  /* Borders (mirror light’s alpha approach, but with white) */
+  /* Borders */
   --color-border-subtle: rgba(255, 255, 255, 0.12);
-  --color-border-default: rgba(255, 255, 255, 0.12);
-  --color-border-strong: rgba(255, 255, 255, 0.24);
+  --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 */
@@ -138,6 +150,21 @@ html[data-theme='dark'] {
   --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)
    * ======================================================================= */
@@ -151,14 +178,14 @@ html[data-theme='dark'] {
   --opac-bg-default-invert: rgba(0, 0, 0, 0.1);
   --opac-bg-dark-invert: rgba(0, 0, 0, 0.15);
 
-  /* Shadows (stronger for dark surfaces) */
+  /* Shadows */
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
   --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.32);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.45);
 
-  /* Data viz (invert sequential so it reads on dark bg) */
+  /* Data viz */
   --viz-cat-1: #2563eb;
   --viz-cat-2: #16a34a;
   --viz-cat-3: #f59e0b;
@@ -175,10 +202,15 @@ html[data-theme='dark'] {
   --skeleton-pulse: #4b5563;
 }
 
-/* High-contrast variant */
+/* 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

@@ -18,6 +18,14 @@ html[data-theme='light'] {
   --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;
@@ -57,11 +65,15 @@ html[data-theme='light'] {
   /* Backgrounds & surfaces */
   --color-bg-page: #ffffff;
   --color-bg-surface: #ffffff;
-  --color-bg-surface-subtle: rgba(0, 0, 0, 0.02);
-  --color-bg-surface-strong: #f9fafb;
+  --color-bg-surface-subtle: var(--dbc-surface-muted);
+  --color-bg-surface-strong: var(--dbc-surface-strong);
+
+  --color-bg-toolbar: #f3f4f6;
+  --color-bg-toolbar-hover: #eef0f3;
 
-  --color-bg-contextual: #f4f2ee;
-  --color-bg-contextual-subtle: #faf8f5;
+  /* 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);
@@ -74,9 +86,9 @@ html[data-theme='light'] {
   --color-neutral: var(--dbc-neutral-200);
 
   /* Borders */
-  --color-border-subtle: rgba(0, 0, 0, 0.12);
-  --color-border-default: rgba(0, 0, 0, 0.12);
-  --color-border-strong: rgba(0, 0, 0, 0.24);
+  --color-border-subtle: #e5e7eb;
+  --color-border-default: #d1d5db;
+  --color-border-strong: #9ca3af;
   --color-border-selected: var(--color-brand);
 
   /* Text */
@@ -138,6 +150,20 @@ html[data-theme='light'] {
   --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: #f6f8fb;
+  --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)
    * ======================================================================= */

package/package.json

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