Standardized table chrome now comes from the shared primitive
This story re-skins the shared table chrome for firms, staff, support access, and the firm members roster without changing the TanStack table engine, URL state, filters, sorting, or pagination behavior.
What Changed
| Surface | Change |
|---|---|
src/app/globals.css |
Added table-scoped tokens for header surface, border, hover, and
header ink; set --radius-2xl to 16px; moved table
header tracking to .14em; moved table cell rhythm to
22px inline and 16px block.
|
src/components/ui/table.tsx |
Rows, headers, and footers now consume the table-scoped tokens. Header cells render 11px, 600 weight, uppercase, and token-backed muted ink. |
src/components/data-table/data-table.tsx |
The shared DataTable container uses the 16px standardized table radius and table border token. |
src/lib/data-table.ts |
Removed the inline column background style that was overriding the shared header surface token. |
Measured Chrome
Measurements below came from the rendered Storybook iframe after the final change. The before pass used the previous token values injected into the same stories to make the visual delta explicit.
| Metric | Before | After | Target |
|---|---|---|---|
| Container radius | 8px | 16px | 16px |
| Header background | rgb(245, 240, 235) |
rgb(250, 246, 239) |
#FAF6EF |
| Border / dividers | rgb(232, 228, 223) |
rgb(231, 224, 211) |
#E7E0D3 |
| Header tracking | 0.88px at 11px | 1.54px at 11px | .14em |
| Data cell padding | 12px inline / 8px block | 22px inline / 16px block | 16px vertical rhythm |
Four-Surface Visual Evidence
Firms table
Before - previous table token values
After - standardized table chrome
Staff table
Before - previous table token values
After - standardized table chrome
Support access table
Before - previous table token values
After - standardized table chrome
Firm members roster
Before - previous table token values
After - standardized table chrome
Storybook Coverage
| Story | Purpose | State |
|---|---|---|
Primitives/DataTable |
Captures populated, clickable, empty, loading, and single-row table chrome through the shared DataTable. | done |
UI/Table |
Captures populated, loading, and empty states at the primitive layer. | done |
Verification
| Command | Result |
|---|---|
pnpm exec tsc --noEmit |
passed |
pnpm run lint |
passed with existing TanStack React Compiler warnings |
pnpm run test |
passed - 93 files, 590 tests |
pnpm run test:storybook |
passed - 106 files, 377 tests |
No backend, contract, generated client, or per-feature table files changed. The table engine remains TanStack DataTable / useDataTable.