Theming

Want to control topi Elements to fit your branding? This is where our built-in theming options come in.

We've built theming to be based on CSS, so that there's separation of concerns between JS and CSS. This means that you set specific CSS custom variables (also known as CSS custom properties) and topi Elements will pick them up and use 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 will scale automatically according to this base font size!

Base font size?

What you're setting is the base font-size, from which all text content will be scaled internally.

This means that if you set the base font-size to 20px, not all text content in topi Elements will appear with 20px. Instead, some text content will be set to 20px, while others will be scaled to a smaller/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. However, in practice, only px and rem work.

Using other relative units like %, vh, vw, and em will lead to weird results because of the way font sizes are setup in topi Elements internally.

Instance-specific font sizes

If you ever need to set varying font sizes for different elements, or even different instances of the same element, you can do so by setting a more specific CSS variable.

Using a contrived example, let's say you have the following 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>