Theming Override tokens

Override tokens

Override individual --pretable-* tokens with plain CSS cascade — no preprocessor required.

The override story is plain CSS cascade. Pick a theme, redefine any of its 24 tokens in your own stylesheet, and your values win because they load after the theme.

Token overrides are the simplest path, but you can also override any rendered style with plain CSS — the grid's defaults are zero-specificity and layered, so your selectors win without !important. See Cascade & overrides.

The basic pattern

css

@import "@pretable/ui/themes/excel.css";
@import "@pretable/ui/grid.css";
 
:root {
  --pretable-accent: #ff5722;
  --pretable-rule: #cccccc;
}

Both your :root block and Excel's :root block declare CSS variables at the same specificity. Source order wins: your stylesheet imports after Excel's, so your values override.

Worked examples

Tweak the accent color

Most apps want the grid's accent to match their brand. Override one token:

css

@import "@pretable/ui/themes/excel.css";
@import "@pretable/ui/grid.css";
 
:root {
  --pretable-accent: var(--brand-primary);
}

The accent appears on focus rings, sort indicators, and selection highlights. One override, brand-consistent across the grid.

Swap the entire color palette

Pretable ships Excel and Material as concrete themes, but the token contract works for any palette. Define all the surface/text/line/state tokens to your brand:

css

@import "@pretable/ui/themes/excel.css";
@import "@pretable/ui/grid.css";
 
:root {
  /* Surfaces */
  --pretable-bg-grid: #0d1117;
  --pretable-bg-grid-alt: #161b22;
  --pretable-bg-header: #161b22;
 
  /* Text */
  --pretable-text-cell: #c9d1d9;
  --pretable-text-header: #8b949e;
 
  /* Lines */
  --pretable-rule: #30363d;
  --pretable-rule-strong: #484f58;
 
  /* State */
  --pretable-bg-hover: #161b22;
  --pretable-bg-selected: rgba(56, 139, 253, 0.15);
 
  /* Accent */
  --pretable-accent: #58a6ff;
}

You're effectively building a third theme on top of Excel as a base. If this is more than a one-off, see Custom themes for the cleaner pattern.

Change the corner radius

Excel ships with --pretable-radius: 0 (sharp corners). To round the grid container without writing a new theme:

css

@import "@pretable/ui/themes/excel.css";
@import "@pretable/ui/grid.css";
 
:root {
  --pretable-radius: 8px;
}

The grid container's outer border radius now reflects your value. Cells stay square — the radius applies only to the outermost wrapper.

Change density values

Density tokens follow the same rule. Override them at :root to tweak the dimensions a theme ships:

css

@import "@pretable/ui/themes/material.css";
@import "@pretable/ui/grid.css";
 
:root {
  /* Material's standard density is 48px row; tighten to 36px globally */
  --pretable-row-height: 36px;
  --pretable-header-height: 40px;
  --pretable-cell-padding-x: 12px;
  --pretable-cell-padding-y: 6px;
}

The engine's useResolvedHeights hook reads --pretable-row-height and --pretable-header-height directly from CSS, so the virtualizer respects your values without you passing props.

Token groups

The 24 tokens group by purpose. When overriding, think in groups:

Surfaces drive cell, header, and chrome backgrounds.
Text drives readable content color.
Lines drive gridline and container borders.
State drives hover, selection, focus interaction.
Accent is one token used in multiple places — sort indicators, focus rings, active filter tags.
Density drives row heights, padding, and font sizes.
Typography drives font family stacks (sans for chrome, mono for numeric cells).

See Token reference for the full list with descriptions, types, and example values.

Specificity tips

Override at :root — matches the theme's specificity, source order decides.
Don't use !important unless something else is fighting you. Cascade order should win cleanly.
Scope overrides if needed — to override per-section of your app, scope to a class or attribute: .dashboard { --pretable-accent: red; } .reports { --pretable-accent: blue; }. The grid inside each scope reads the locally scoped value.

Where to go next

Token reference — the canonical 24-token table.
Light / dark switching — runtime variant toggle.
Density switching — runtime density toggle.
Custom themes — when overrides grow into a full theme, switch to authoring one.