Palettes

Use tokens in code

<h1 className="tpz-prm-clr">Welcome back</h1>

<div className="tpz-bg-clr tpz-brdr-clr tpz-txt-clr">
  Card content
</div>

<div style={{ background: "var(--tpz-surface-color)", color: "var(--tpz-text-color)", borderColor: "var(--tpz-border-color)" }}>
  Card content
</div>

const paletteStyle = {
  background: "var(--tpz-surface-color)",
  color: "var(--tpz-text-color)",
  borderColor: "var(--tpz-border-color)",
};

<div style={paletteStyle}>Card content</div>

Change values in engine

From your /dashboard on tapuz.io, open any project and click Manage tokens to launch the tapuz engine. The engine displays the token values of the currently active palette only. To switch which palette is active, use the editor. Changes to token values are saved automatically and take effect instantly.

Change values via editor

Open the editor locally from any project page by typing /?tapuz-edit OR via the project slot in your /dashboard in tapuz.io and go to the Palette tab. Here you can select the active palette and edit its color values. Changes update in real time. When you are ready, click Save to make your changes permanent. For online editing read here.

Full palette tokens