Thème

Tout le design repose sur des variables CSS préfixées par --trc-. Redéfinissez-les pour adapter trc-ui à votre marque, partout ou sur une seule zone.

Changer l'accent

L'accent est la seule couleur du design : pastilles des pilules, mots d'accent, numéros d'étape, anneaux de focus. Définissez-le une fois sur :root, après l'import de trc-ui/styles.css.

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

Thème d'une seule zone

Les variables se propagent : posez-les sur n'importe quel élément, et tous les composants qu'il contient suivent.

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

Accents clairs

Le texte posé sur l'accent utilise --trc-on-accent, quasi noir par défaut. Il convient à la plupart des accents vifs ; pour un accent sombre, passez-le en blanc.

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

Un seul accent, volontairement

Tout ce qui est coloré attire l'œil : la couleur doit donc rester rare. trc-ui n'a ni couleur secondaire ni dégradé : la profondeur vient des gris, l'insistance de l'accent seul.

Jetons de couleur

Typographie, formes et mouvement