Theming

The whole design runs on CSS variables prefixed with --trc-. Override them to adapt trc-ui to your brand, globally or for a single area.

Change the accent

The accent is the only color of the design: pill dots, accent words, step numbers, focus rings. Set it once on :root, after importing trc-ui/styles.css.

:root {
  --trc-accent: #d41367;
}

Theme a single area

Variables cascade: set them on any element and every component inside follows.

<div style={{ "--trc-accent": "#d41367" }}>
  <Heading size="lg">A *magenta* section</Heading>
  <StepNumber n={1} />
  <PillButton>Continue</PillButton>
</div>

Light accents

Text on the accent uses --trc-on-accent, near black by default. It suits most bright accents; for a dark accent, switch it to white.

:root {
  --trc-accent: #f5c518;
  --trc-on-accent: #0b0c0f;
}

One accent, on purpose

Everything colored draws the eye, so color has to stay rare. trc-ui has no secondary color and no gradients: depth comes from shades of grey, emphasis from the accent alone.

Color tokens

Type, shape and motion