styling and palette

Prezillo uses a cascading style system with global style definitions, inline overrides, and a document-wide color palette.

Style Resolution Cascade

Styles resolve in layers, with later layers overriding earlier ones:

graph LR
    D["Built-in Defaults"] --> S["Style Chain<br/>(si/ti → parent p)"]
    S --> O["Inline Override<br/>(s/ts on object)"]

    style D fill:#e8e8e8,stroke:#999
    style S fill:#d4e6f1,stroke:#2980b9
    style O fill:#d5f5e3,stroke:#27ae60

1. Built-in defaults: Hard-coded fallback values (e.g., fill #cccccc, strokeWidth 1)
2. Style chain: The object’s si (shape style) or ti (text style) references a global StoredStyle in the st map. That style may have a parent (p field), forming a chain. Properties are inherited up the chain until a value is found.
3. Inline overrides: The object’s s (shape style) or ts (text style) fields contain direct property overrides that take highest precedence.

StoredStyle Fields

Global styles are stored in the st map, keyed by StyleId.

Shape style properties (when t='S'):

Text style properties (when t='T'):

ShapeStyle and TextStyle (Inline)

The s and ts fields on objects use the same property names as StoredStyle, but without the n, t, and p fields. They contain only the properties being overridden.

// Example: object with style reference + inline override
{
  t: 'R',
  xy: [100, 200],
  wh: [300, 150],
  si: 'Nz9cK_vW3xRb',           // references "Primary" style
  s: { f: '#ff0000', sw: 3 }     // overrides fill and stroke width
}

Palette System

The palette provides a set of named color and gradient slots that can be referenced by any style or object. This allows changing the document’s color theme by updating a single palette entry.

StoredPalette Structure

The palette is stored as a single entry in the pl map under the key 'default':

Where StoredPaletteColor is simply { c: string } (a hex color).

Palette Slot Codes

Color slots:

Gradient slots:

StoredPaletteRef

A palette reference replaces a literal color value in any ColorValue field:

ColorValue Union

Any color field (f, s, fc, shadow color, etc.) accepts either a raw hex string or a palette reference:

type ColorValue = string | StoredPaletteRef

Examples:

// Raw hex color
{ f: '#4a90d9' }

// Palette reference: accent 1, full opacity
{ f: { pi: 'a1' } }

// Palette reference: text color at 50% opacity, slightly lighter
{ fc: { pi: 'tx', o: 0.5, t: 0.2 } }

When a palette slot is updated, all objects and styles referencing that slot automatically reflect the new color — resolution happens at render time.

Default Styles

A new document is initialized with these styles:

Shape styles:

Text styles:

Default Palette

See Also

• CRDT Design Guide > Style Inheritance — General pattern for style cascading in collaborative apps