pages-pick-color

Summary

Fill, Border or Text colour, picked from the product's own Styles in a picker beside the inspector, with a custom value when none fits.

Raw wireframe

• .context/designs/web/pages-edit/pages-pick-color.html

Why it is drawn this way

Styles first, a value last (owner, 2026-10-19). The inspector used to show rgba(0, 0, 0, 0) in a text box. A colour is now a swatch and a token name; pressing it opens the product's colours by family — Brand, Accent, Ink and ground, Status — with the one in use ringed. Find a color narrows them by name. Custom takes a hex value; Not set puts the product's own value back.

It writes to the draft the moment a swatch is pressed and shows in the frame at once. Esc or × closes it. The same picker serves a captured element and an element drawn in Trunk.

A colour picked from Styles follows the token (owner, 2026-10-19). It is saved as the token itself, token(<id>), not as its value. Every render — a page, a component's variant, an element drawn in Trunk — draws it as the token is in that view of the product (main, a branch, a draft), so changing the token changes every element that picked it. A token the product no longer has drops the edit, and the element shows what the product says. Review says the token's name. A custom hex is saved as itself. A token cannot stand for another token.

Related

• pages
• pages-edit
• shortcuts

Sources

• .context/designs/web/pages-edit/pages-pick-color.html