Skip to main content

​
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 elements className 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 that Page or Pane and deleted with it. New Palettes open as palette.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. Write Palette content as CSS. The renderer applies only CSS stylesheets.

​
Where a Palette applies

A Pane’s Palette styles three places:
  • the Pane itself;
  • the Panes it draws inside itself, so a Pane can adjust a Pane it places;
  • every Page and Pane that declares it, directly or through other Panes. Declaring a Pane lets your code use its exports and its class names, so the Palette of a shared Pane whose cards and charts other Panes import styles them in every Pane that declares it.
It never reaches a Pane that neither declares it nor is drawn inside it, such as another Pane beside it on the Page. Two such Panes can use the same class name, and each keeps its own rules. A Page’s Palette styles the whole Page. Menus, popovers, dialogs and tooltips that a Pane opens are drawn at the end of the document, outside every Pane, so every Palette on the Page reaches them. Give their classes names no other Pane uses. Rules for :root, html and body reach the whole document. A selector keeps its specificity. The renderer draws each Pane inside an element of its own with display: contents, which adds no box and carries a data-parable-pane attribute. A child combinator (>) or a sibling combinator (+, ~) from a Pane’s element to the root of a Pane drawn inside it does not match through that element. Write a descendant selector instead: .toolbar .filter, not .toolbar > .filter. The editing preview of unsaved code applies these rules too, so a rule reaches the same Panes before and after you save.

​
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 the view.palette of its Page or Pane; 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.