Skip to main content

Sources

Docs: Panes, Preferences, and Policies. Web App: In Pieces, select a Pane and open its Palette panel.

Story

A Palette stores ordinary CSS. A Pane or Page 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

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. 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.

Storage

The Palette source is stored as a typed Preference containing CSS. The editor saves the authored stylesheet with the Parable’s draft, and its preview can show unsaved source. A previewed draft is not a saved change. A Palette source is capped at 256 KiB. Inspecting it uses view.palette; changing it uses edit.palette. The shared Preference storage does not let ordinary application-value permission 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.

Reference

Generated Workspace API reference for this Piece: