Themes and tokens

Light and dark are built in. Every colour, font, space and radius is a design token you can read in CSS or JavaScript.

Light and dark

Dark follows the device setting. To choose a theme yourself, set data-theme on the root element.

html

<html data-theme="dark">   <!-- or "light"; leave it out to follow the device -->

Using tokens

Use the CSS variables in your own styles, so your screens change with the theme:

css

.panel {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  font-family: var(--font-body);
}

Token	Use it for
`--surface`, `--surface-alt`, `--surface-raised`	Page, panels and raised cards
`--ink`, `--ink-muted`	Text and secondary text
`--primary`, `--on-primary`	Main actions and the text on them
`--accent`	Links, highlights and the current page
`--border`, `--border-strong`, `--focus-ring`	Lines, field borders and focus
`--success`, `--danger`	Status
`--space-`, `--radius-`, `--shadow-card`	Spacing, corners and depth
`--font-display`, `--font-body`	Headings and body text

The same values are available in JavaScript, for charts or native code:

import { light, dark } from "@truvar-ai/design-system/tokens";

light.primary; // "#001250"

Fonts

By default, headings use Poppins and body text uses DM Sans, with Alexandria and IBM Plex Sans Arabic for Arabic. They come with the package in fonts.css. To use your own fonts, load them the way you like, leave out fonts.css, and set the two font tokens after styles.css:

app.css

:root {
  --font-display: "Inter", "Noto Kufi Arabic", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Noto Sans Arabic", "Helvetica Neue", Arial, sans-serif;
}

Keep an Arabic font second in each list. The browser uses the first font that has each letter, so English and Arabic text each get the right one.

To change fonts for one brand only, put the same lines under :root[data-brand="<name>"].

Brands

Truvar is the default brand. Another brand is a small file of token overrides: set data-brand="<name>" on the root element for its colours in both themes, and wrap the app in BrandProvider so Logo draws its mark.