Sources
Docs: Panes, Pages, and Policies. Web App: In Pieces, select a Page or Pane and open its Palette tab.Story
A Palette stores ordinary CSS for one Page or Pane. The Page or Pane gives its elementsclassName values, and the preview loads the selected Palette
stylesheet. Styling is a renderer attachment; it is not application data passed
into the ReactPlot.
Structure
A Palette is its own Piece. It belongs to one Page or Pane: it is created with its owner and deleted with it. New Palettes open aspalette.css. Write
selectors for the classes in the React source. The shared design system
supplies the base styling; Palette CSS can use ordinary selectors and CSS
custom properties.
Panes on the same Page share the preview document and its normal CSS cascade.
Use specific class names to keep a Pane’s rules local; global selectors such
as :root deliberately affect the shared document.
Author new Palette content as CSS. The renderer applies CSS stylesheets; a
TypeScript styling library is not a second Palette execution path.
A theme that someone makes while using an app is a Palette that belongs to
that person or Workspace, not to the app’s definition. There are no screens for
making one yet.
Chart colors
The Pane document defines the design system’s chart tokens for both themes. Each one repaints when the reader switches between Ivory and Obsidian, so a Palette names the token and never a literal color.CHART_PALETTES and getColorByIndex from parable/panes/placeholders
return the same var() references for React code. A token name the Pane
document does not define resolves to nothing, so every series falls back to
one color.
Storage
The CSS is the Palette’s source, saved with the Parable’s draft and versioned with it. The preview can show unsaved source. A previewed draft is not a saved change. Inspecting a Palette uses its owner’sview.palette; changing it uses
edit.palette. Permission to change settings (edit.preferences) does not
authorize CSS changes.
CSS is attached to the selected renderer rather than passed as an editable
Palette prop. Styles delivered to a browser cannot be kept secret by hiding
the source editor.