Theming

topi Elements has built-in theming options so you can match your branding.

Theming is based on CSS, which keeps JS and CSS concerns separate. You set specific CSS custom variables (also known as CSS custom properties), and topi Elements picks them up and uses them internally.

Font size

You can customise the base font size of topi Elements. To do this, set the following CSS variable anywhere on your page:

/* you can set this on any element */
:root {
  --topi-font-size-base: "20px";
}

All text content scales automatically according to this base font size.

Base font size?

You're setting the base font-size, from which all text content is scaled internally.

If you set the base font-size to 20px, not all text in topi Elements appears at 20px. Some text is set to 20px, while other text is scaled to a smaller or larger value.

Think of it as setting an internal value that becomes the basis for 1rem. The default value is 16px.

Supported units

Because this is CSS, you can use any units. In practice, only px and rem work.

Other relative units like %, vh, vw, and em produce inconsistent results because of how font sizes are set up internally in topi Elements.

Instance-specific font sizes

To set different font sizes for different elements, or for different instances of the same element, set a more specific CSS variable.

For example, say you have these requirements:

• The base font size for all elements should be 12px
• One particular instance of a Checkout Button should have a larger font size of 20px

You can accomplish this with idiomatic CSS:

page.css

:root {
  --topi-font-size-base: "12px";
}

.form-large {
  --topi-font-size-base: "20px";
}

page.html

<form>
  <!-- will have base font size of 12px -->
  <x-topi-checkout-button checkout-mode="cart"></x-topi-checkout-button>
</form>

<form class="form-large">
  <!-- will have base font size of 20px -->
  <x-topi-checkout-button checkout-mode="cart"></x-topi-checkout-button>
</form>