Theming Token reference
Token reference
The 36-token --pretable-* surface, with shape, default, and purpose for each.
Pretable's public theming surface is 36 CSS variables, all --pretable-* prefixed. Each theme defines all 36 at :root. Excel and Material 3 ship preset values; consumers override individual tokens at :root in their own stylesheet (see Override tokens).
Two tokens —
--pretable-row-heightand--pretable-header-height— are read by the engine in JavaScript via theuseResolvedHeightshook. The other 34 are CSS-only.
Surfaces (5)
| Token | Description | Type | Excel | Material 3 (light) |
|---|---|---|---|---|
--pretable-bg-grid | Body cell background | color | #ffffff | #fef7ff (surface) |
--pretable-bg-grid-alt | Alternate (zebra) row background; equal to bg-grid if no zebra desired | color | #ffffff | #fef7ff |
--pretable-bg-header | Header row background; pinned cells reuse this | color | #f3f3f3 | #f3edf7 (surface-container) |
--pretable-bg-toolbar | Toolbar + status/pagination bar background | color | #f3f3f3 | #f3edf7 |
--pretable-bg-tooltip | Tooltip / column menu / filter popover background | color | #ffffff | #f3edf7 |
Text (3)
| Token | Description | Type | Excel | Material 3 (light) |
|---|---|---|---|---|
--pretable-text-cell | Body cell text color | color | #1f1f1f | #1d1b20 (on-surface) |
--pretable-text-header | Header text color | color | #5c5c5c | #49454f (on-surface-variant) |
--pretable-text-dim | Secondary text (toolbar labels, empty-state body, status text) | color | #5c5c5c | #49454f |
Lines (3)
| Token | Description | Type | Excel | Material 3 (light) |
|---|---|---|---|---|
--pretable-rule | Gridline color (between cells) | color | #d4d4d4 | #cac4d0 (outline-variant) |
--pretable-rule-strong | Container outer edge + header bottom border | color | #a6a6a6 | #79747e (outline) |
--pretable-radius | Container border radius | length | 0 | 12px (M3 medium shape scale) |
State (4)
| Token | Description | Type | Excel | Material 3 (light) |
|---|---|---|---|---|
--pretable-bg-hover | Row hover background | color | transparent (no hover) | rgba(29, 27, 32, 0.08) (on-surface @ 8%) |
--pretable-bg-selected | Selected cell/row background | color | rgba(16, 124, 65, 0.10) | #e8def8 (secondary-container) |
--pretable-text-selected | Selected cell/row text color | color | #1f1f1f | #1d192b (on-secondary-container) |
--pretable-focus-ring | Focus outline color (cell focus, kbd nav) | color | #107c41 (Excel green) | #6750a4 (primary) |
Editing (2)
These tokens skin the inline cell editor (see Editing).
| Token | Description | Type | Excel | Material 3 (light) |
|---|---|---|---|---|
--pretable-edit-bg | Editor field surface (matches the grid background) | color | #ffffff | #fcfcfc (N99) |
--pretable-text-error | Invalid-input outline + inline error-message text | color | #b91c1c | #b3261e (error) |
Accent (1)
| Token | Description | Type | Excel | Material 3 (light) |
|---|---|---|---|---|
--pretable-accent | Sort indicator, active filter tag, focus highlights, drag indicators | color | #107c41 | #6750a4 (primary) |
Density (6)
The first two are read by the engine in JavaScript. The other four are CSS-only.
| Token | Description | Type | Excel | Material 3 (standard) | Engine reads? |
|---|---|---|---|---|---|
--pretable-row-height | Body row height | length | 20px | 48px | yes |
--pretable-header-height | Header row height | length | 24px | 52px | yes |
--pretable-cell-padding-x | Body cell horizontal padding | length | 6px | 16px | — |
--pretable-cell-padding-y | Body cell vertical padding | length | 2px | 12px | — |
--pretable-font-size-cell | Body cell font size | length | 15px | 14px | — |
--pretable-font-size-header | Header font size | length | 13px | 14px | — |
Density tokens vary by tier. The values shown above are each theme's natural default (
:root). When[data-density="..."]is set on<html>, the corresponding override block adjusts these tokens — see Density switching.
Typography (2)
| Token | Description | Type | Excel | Material 3 |
|---|---|---|---|---|
--pretable-font-sans | Primary sans-serif family stack | font | "Aptos Narrow", "Aptos", "Segoe UI", -apple-system, … | "Roboto Flex", "Roboto", system-ui, … |
--pretable-font-mono | Monospace family stack (numeric cells, code) | font | ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace | "Roboto Mono", ui-monospace, monospace |
Grid controls (10)
These tokens control the visual appearance of interactive grid elements: row-selection checkboxes, cell-range selection overlays, column resize handles, and column reorder drag-and-drop indicators. Most derive from the theme's --pretable-accent, --pretable-bg-grid, --pretable-rule-strong, and --pretable-bg-header, so overriding those upstream tokens recolors the controls coherently; --pretable-checkbox-checked-fg and --pretable-reorder-ghost-shadow are standalone constants (#fff and a box-shadow value) that you must override explicitly if needed.
| Token | Description | Type | Excel | Material 3 (light) |
|---|---|---|---|---|
--pretable-selection-bg | Range-selection overlay background ([aria-selected] cells) | color | color-mix(in srgb, var(--pretable-accent) 8%, transparent) | color-mix(in srgb, var(--pretable-accent) 8%, transparent) |
--pretable-checkbox-bg | Row-select checkbox background | color | var(--pretable-bg-grid) | var(--pretable-bg-grid) |
--pretable-checkbox-border | Row-select checkbox border | color | var(--pretable-rule-strong) | var(--pretable-rule-strong) |
--pretable-checkbox-checked-bg | Row-select checkbox background when checked | color | var(--pretable-accent) | var(--pretable-accent) |
--pretable-checkbox-checked-fg | Row-select checkmark color | color | #fff | #fff |
--pretable-resize-handle | Column resize handle (idle) | color | transparent | transparent |
--pretable-resize-handle-hover | Column resize handle (hover/dragging) | color | var(--pretable-accent) | var(--pretable-accent) |
--pretable-reorder-ghost-bg | Column drag ghost background | color | var(--pretable-bg-header) | var(--pretable-bg-header) |
--pretable-reorder-ghost-shadow | Column drag ghost shadow | shadow | 0 4px 12px rgb(0 0 0 / 0.12) | 0 4px 12px rgb(0 0 0 / 0.12) |
--pretable-reorder-drop-indicator | Column drop-position indicator | color | var(--pretable-accent) | var(--pretable-accent) |
Stability
@pretable/ui is at version 0.0.x. Token names may rename or remove in any patch release. Each release's CHANGELOG.md describes the deltas. Override at your own risk; the contract solidifies post-1.0.
Where to go next
- Override tokens — recipes for changing values.
- Theming Overview — the architectural model.
- Custom themes — author your own theme file.