Theming Guide

BC Grid is visually part of BusinessCraft. It uses the same shadcn and Radix primitive set as @bsn/ui, then maps host tokens into grid-specific CSS variables for dense ERP tables.

Stylesheet#

Every host app that renders BC Grid imports the theme stylesheet once:

@import "@bc-grid/theming/styles.css";

The stylesheet defines grid chrome, row states, selection, active cell rings, validation markers, pinned regions, and density-specific spacing.

Host Tokens#

The grid reads host tokens such as --background, --foreground, --border, --muted, --accent, and --ring. BusinessCraft apps already expose those tokens through Tailwind v4 and @bsn/ui.

Override --bc-grid-* variables only when the grid needs a specific treatment that should not affect the rest of the app.

.workbench-grid {
  --bc-grid-row-hover-bg: color-mix(in oklch, var(--accent), transparent 50%);
  --bc-grid-focus-ring: var(--ring);
}

Density Modes#

Density is a grid-level choice:

• comfortable for the default ERP experience,
• normal for power users who want to reduce padding,
• compact for high-volume operational lists.

Use density as a view preference, not as a per-cell styling shortcut. Saved views can persist density alongside sort, filters, column state, and sidebar state.

Pinned And Nested Grids#

Pinned columns and nested detail grids need careful stacking and cascade behavior. The BC Grid stylesheet scopes row hover, selection, focus, dirty, pending, and error states so a parent row does not accidentally style a child grid rendered in a detail panel.

This matters for BusinessCraft master/detail screens where a parent list expands into child line items, contacts, or notes.

Practical Defaults#

For new screens:

• import the stylesheet once at the app level,
• let the grid use its comfortable default unless the screen has a deliberate density reason,
• prefer format and cellClassName over custom cell renderers for common styling,
• persist density through saved views when users are expected to revisit the screen.

The density demo shows the runtime controls. The saved views demo shows persistence of layout preferences.