Tokens

Tokens are the CSS custom properties that hold the design's values. Use them in your own CSS and style attributes instead of fixed values, so your styles follow the theme and the Appearance page: color: var(--fz-color-text-muted). Sizes are given at the default settings; they are in rem, so they grow with the browser's font size.

• Colour
• Type
• Spacing and sizes
• Shape, depth and motion
• Tuning properties
• Set by the classes
• Component sizes
• Component fonts, colours and corners

Colour

The theme's palette, including any colours set on the Appearance page.

Type

Fonts, text sizes (each with a line height), weights and line heights. The sizes are Tailwind's, plus xs-plus and sm-plus.

Spacing and sizes

One step that every space and size is a multiple of, as in Tailwind: calc(var(--fz-spacing) * 4) is 1rem, 16px. It is fixed, like the text sizes: the Appearance page's looks change the component sizes, not the step.

Shape, depth and motion

Corner radii, shadows, the focus ring, and the timing of transitions.

Tuning properties

Custom properties you can set on an element, in a style attribute, to adjust a layout class or component.

Set by the classes

Custom properties the classes set for their own use. Don't set these yourself: use the classes that set them.

Component sizes

The sizes of the parts of the interface: titles, labels and field text, the heights of fields, buttons and list rows, the space in forms, cards and the drawer, the size and spacing of written content (fz-content and fz-prose), and the side menu's (--fz-sidemenu-*, for a theme's menu of links down the side of the page). The components use them. The Appearance page's looks (Default, Compact, Comfortable, and any made in its advanced editor) change them. Steps are spacing steps, 4px each at the default settings.

• Use them in your own CSS so it matches the components and follows the site's look: gap: var(--fz-field-gap), height: var(--fz-control-height).
• To change a size for one part of a page, set the token on its container, in a style attribute. Everything inside uses that size; the rest of the page keeps the site's.

<div class="fz-auto-grid fz-auto-grid--max-2">
  <table class="fz-table">
    <thead><tr><th>Name</th><th>Grade</th></tr></thead>
    <tbody><tr><td>Ada</td><td>7</td></tr><tr><td>Grace</td><td>8</td></tr></tbody>
  </table>
  <table class="fz-table" style="--fz-row-height: calc(var(--fz-spacing) * 8)">
    <thead><tr><th>Name</th><th>Grade</th></tr></thead>
    <tbody><tr><td>Ada</td><td>7</td></tr><tr><td>Grace</td><td>8</td></tr></tbody>
  </table>
</div>

Component fonts, colours and corners

Which font each kind of text is set in, the colours of the parts of the interface, and their corners; and for written content, its link underlines, list markers and the thickness of its lines; and the side menu's fonts, colours and corners. The components use them. Each follows one of the look's branding settings on the Appearance page (the main or secondary font, one of the colours) until the Appearance page's advanced editor gives that part its own.

• Use them in your own CSS so it matches the components: background: var(--fz-button-primary-bg), border-radius: var(--fz-field-radius), font-family: var(--fz-label-font).

<div class="fz-cluster">
  <button type="button" class="fz-btn fz-btn--primary">Save</button>
  <button type="button" class="fz-btn fz-btn--primary" style="--fz-button-primary-bg: var(--fz-color-success); --fz-button-primary-hover: var(--fz-color-success); --fz-button-radius: var(--fz-radius-full)">Approve</button>
</div>