Token reference

Pretable's public theming surface is 50 CSS variables, all --pretable-* prefixed. Each theme defines all 50 at :root. Three themes ship preset values — pretable, the house theme and the documented default, plus the Excel and Material 3 compatibility skins. Consumers override individual tokens at :root in their own stylesheet (see Override tokens).

Three tokens — --pretable-row-height, --pretable-header-height, and --pretable-group-panel-height — are read by the engine in JavaScript, because it needs them as numbers to lay out rows, the sticky header, and the group panel. The other 47 are CSS-only. The engine resolves the three against the grid's own element, so they inherit from wherever you set them — :root, or a wrapper — like every other token. Of the three, the first two are also readable from your own code via getDensityHeights in @pretable/ui, which takes the element to resolve against.

Surfaces (7)

Set --pretable-bg-grid-alt equal to --pretable-bg-grid when you do not want zebra striping; all three themes do.

Pinned body cells and group rows used to borrow --pretable-bg-header, which made it impossible to restyle a frozen data column without also restyling the header. They now have their own tokens. Excel and Material alias both back to the header value, so neither skin changes appearance; the pretable theme keeps pinned cells the same white as the rest of the data, because a pinned column is data rather than chrome, and marks the frozen edge with --pretable-seam-color instead.

Text (3)

Lines and radii (6)

--pretable-rule used to color both axes, so no theme could drop the column cage without also losing row separation. Splitting the vertical divider into its own token makes the two independent: Excel and Material alias vertical back to --pretable-rule and keep the full cage, while the pretable theme sets it to transparent for horizontal-only separation.

--pretable-rule-width governs only the per-cell row and column dividers. Frame, popover, menu, and editor borders stay 1px regardless.

--pretable-radius is the container radius, and applying it to a 14–18px control rounds that control into a circle. --pretable-radius-control is the separate, smaller step those affordances take: menu items, the funnel and ⋮ buttons, and the chip remove target.

State (4)

--pretable-bg-selected does not fill a selected cell, despite the name. The grid stylesheet reads it in exactly two places, both of them a highlighted option in a cell editor: the enum listbox and the date picker's day. The fill behind a selected cell or range is --pretable-selection-bg, in Grid controls below — it is a translucent tint, drawn as a background layer so a pinned cell keeps its opaque fill underneath. --pretable-text-selected is the one of the pair that does span both: it colors selected cell text as well as those two options.

Editing (2)

These tokens skin the inline cell editor (see Editing).

Accent (1)

The accent's direct reach is exactly those three marks — it is what the grid stylesheet reads --pretable-accent for, and nothing else. In particular it does not paint the sort indicator (the caret is drawn in currentColor, so it inherits --pretable-text-header, and the multi-sort priority badge takes --pretable-text-dim), the focus ring (--pretable-focus-ring), or the column drop indicator (--pretable-reorder-drop-indicator). Each of those owns its own token, and under the pretable theme in light mode the latter two are a literal #2554cf — a different, more saturated blue than the #3f5a7a accent. (Its dark block moves both to #8ab0ff, and the accent to #8fb2d9; the separation is the point, not the specific hex.) The two compatibility skins alias their control tokens back to the accent, so one override travels further there than it does under pretable; see Override tokens.

Semantic ramp (4)

These four are the ramp the delta, status, and badge cell presentations read — [data-pretable-delta], [data-pretable-status], and [data-pretable-badge][data-pretable-tone]. They carry meaning rather than decoration: a signed delta's direction, a status dot's state. Nothing here paints a surface or chrome, and all three themes ship the same light values.

The values were re-derived rather than taken from any reference palette, because the obvious hues fail WCAG AA at text sizes. Contrast is a property of the pair, so the ground matters: the light themes ship two, #ffffff under pretable and Excel and #fcfcfc under Material. A #16a34a green measures 3.30:1 on white and 3.21:1 on Material's ground; a #d97706 amber, 3.19:1 and 3.11:1. All four are under the 4.5 floor, and the choice of ground is not what saves them. They look fine in reference screenshots only because they sit inside chips and bold glyphs rather than 14px text. The shipped light values clear the floor on both grounds — 4.83–5.17 on white, 4.71–5.04 on #fcfcfc — and are held that close together on purpose, so that no one color reads as more urgent than its neighbours purely because its hue is darker.

Elevation (3)

The scale is named for what is lifted, not for the one control that happened to need a shadow first. --pretable-shadow-overlay is the shadow on everything that leaves the plane: the filter menu, the column menu, the enum listbox, the date popover, and the column drag ghost.

Renamed. --pretable-shadow-overlay used to be named for the drag ghost: reorder-ghost-shadow, carrying the usual --pretable- prefix. Four of its five uses are popovers rather than drag ghosts, so the old name described the least representative one. That name no longer resolves to anything — if your stylesheet still sets it, rename it to --pretable-shadow-overlay.

--pretable-shadow-card lets a theme separate the grid from the host page with elevation instead of a drawn frame. Both compatibility skins set it to none and draw the frame instead; the pretable theme uses a hairline plus real elevation.

--pretable-seam-color is a color, not a whole shadow, because the right-hand frozen edge needs the mirror of the left one's offset and a single box-shadow value cannot be flipped. The grid stylesheet owns that geometry; the theme owns the strength. Both compatibility skins opt out with transparent, since each already marks the frozen edge with a tone step on --pretable-bg-pinned plus a vertical rule.

Density (8)

The first three are read by the engine in JavaScript; the other five are CSS-only.

Density tokens vary by tier. The values shown above are each theme's natural default (:root) — standard for pretable and Material, compact for Excel. When [data-density="..."] is set on <html> — or on any wrapper element — the corresponding override block adjusts these tokens — see Density switching.

--pretable-group-indent is the step, not the total: a row at depth n is indented n × the token, applied as padding inside the group cell so that a pinned group column keeps its indent when the grid scrolls. Both group header rows and their leaf rows read it, which is what keeps the two columns of text aligned. It is the one density token the grid stylesheet reads with a literal fallback — var(--pretable-group-indent, 16px) — so a theme written before the token existed still renders a visible hierarchy instead of collapsing grouped rows into a flat list. --pretable-icon-size is read the same way, for the same reason.

Icons (1)

Deliberately not density-scoped: the chrome glyphs are affordances rather than text, so they hold one size across every tier. Each theme picks a size that sits correctly beside its own header text — 12px under Excel's dense 13px header, 16px under Material's 14px one.

Typography (2)

The stacks are elided above; each theme declares its full list at :root in packages/ui/themes/<theme>.css.

The pretable theme ships no webfont on purpose: a house theme that carries a font dependency cannot disappear into a host application, and it costs a network request before first paint. The stack resolves to whatever the platform already renders its UI in.

Grid controls (9)

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. In the two compatibility skins seven of the nine derive from --pretable-accent, --pretable-bg-grid, --pretable-rule-strong, and --pretable-bg-header, so overriding those upstream tokens recolors the controls coherently. The remaining two are literal in those skins: --pretable-checkbox-checked-fg is a flat #fff, so recoloring the accent moves the checked box out from under a checkmark that stays white and you must override the checkmark yourself; and --pretable-resize-handle is transparent — the idle handle is deliberately invisible, so there is no color there to keep in step with anything. The pretable theme writes all nine as literals, so that its dark block can move an affordance independently of the decorative token it would otherwise have inherited. The drag ghost's shadow is no longer here — it comes from --pretable-shadow-overlay, in Elevation above.

The checkmark is the one to watch in dark mode. --pretable-checkbox-checked-fg has to stay legible against --pretable-checkbox-checked-bg, and a dark theme that lightens the checked box without touching the checkmark leaves white ink on a pale chip. Both dark themes restate it: pretable uses #10131c on its #8ab0ff box, and Material uses #003258 — M3's dark on-primary — on its #9ecaff one, 7.73:1. Material shipped without that line for a while and drew white on light blue at 1.70:1, which is what the CI contrast check on this pair now exists to prevent. Excel is light-only, so the case never arises there. If you author a dark variant, restate this token; see Light and dark.

Stability

@pretable/ui is pre-1.0. Token names may be renamed or removed in any release, so this page is the list as of the version you have installed rather than a promise about the next one — each release's CHANGELOG.md describes the deltas. Override at your own risk; the contract solidifies at 1.0.

Where to go next

• Override tokens — recipes for changing values.
• Theming Overview — the architectural model.
• Custom themes — author your own theme file.