Gesso
Data

Category colors

How select, status, and multi-select values get their color.

The colored pills in the data grid are PropertyTags — categorical chips, not role-colored Chips. Each SelectOption carries a color: CategoryColor; the cell renders that option.

<PropertyTag color={option.color}>{option.label}</PropertyTag>

High in the projects demo is { label: "High", color: "orange" }.

Coloring modes

Role (Chip, Badge variants) uses theme tokens and repaints with the look.

Categorical (PropertyTag) must not. Hue and contrast tuning live on the Chip doc. Soft surfaces use --brand-secondary-subtle-* (see brand.css).

System tokens

Solid hues are primitives (--cat-orange and friends). System exposes --sys-cat-*:

--sys-cat-orange: oklch(from var(--cat-orange) l calc(c + var(--chrome-chroma-tag)) h);

Gray has no hue of its own, so it takes the room hue. A brand retune remaps --brand-* only; these primitives stay put. The cell (GridCell) has no color of its own.

On this page