trc ui : nos composants React « noir profond » en open source

Le site que vous lisez est construit avec un style que nous appelons « noir profond » : des fonds quasi noirs, des cartes graphite, des titres fins et une seule couleur d'accent. Nous l'avons d'abord mis au point pour nos propres projets. Aujourd'hui, nous le publions en open source sous le nom de trc ui, une bibliothèque de composants React disponible sur npm sous licence MIT.

Ce que vous obtenez

trc ui repose sur quelques principes simples :

Sobre. Des fonds quasi noirs, des cartes graphite et une seule couleur d'accent. La profondeur vient des nuances de gris, pas des ombres.
Fin. Des titres en Montserrat léger, avec un mot d'accent par titre.
Vivant. Des boutons pilule qui s'étirent, des cartes qui s'éveillent au survol, un en-tête qui se floute au défilement.
Accessible. Des contrôles de formulaire natifs, des libellés et messages reliés automatiquement, le focus clavier partout et le mouvement réduit respecté.
Léger. Aucune dépendance en dehors de React, une seule feuille de style personnalisable avec des variables CSS.

Installation

trc ui demande React 18 ou plus récent.

Terminal

npm install trc-ui

Importez la feuille de style une seule fois, à la racine de votre application, et ajoutez la classe trc sur <body> :

TSX

import "trc-ui/styles.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <body className="trc">{children}</body>
    </html>
  );
}

Le design s'appuie sur la police Montserrat (graisses 300, 400 et 500), qui n'est pas incluse. Avec Next.js, chargez-la avec next/font :

TSX

import { Montserrat } from "next/font/google";

const montserrat = Montserrat({
  subsets: ["latin"],
  weight: ["300", "400", "500"],
  variable: "--font-montserrat",
});
// <html className={montserrat.variable}>

Puis indiquez-la à trc ui :

CSS

:root {
  --trc-font: var(--font-montserrat), ui-sans-serif, system-ui, sans-serif;
}

Sans Next.js, une balise <link> vers Google Fonts suffit : trc ui utilise "Montserrat" par défaut.

Premiers composants

Les titres mettent en couleur d'accent les mots placés entre astérisques :

TSX

import { Heading, PillButton, Text } from "trc-ui";

export function Welcome() {
  return (
    <section>
      <Heading as="h1" size="display">
        Bienvenue dans le *noir profond.*
      </Heading>
      <Text size="lg">Les mots entre astérisques prennent la couleur d'accent.</Text>
      <PillButton solid>Commencer</PillButton>
    </section>
  );
}

La bibliothèque couvre l'essentiel d'un site vitrine : titres et textes (Heading, Text, AccentText, StepNumber), boutons pilule (PillButton, PillLink), cartes et sections (Card, Section, Container), formulaires (Field, Input, Textarea, Select, Checkbox, Switch), en-tête et pied de page (SiteHeader, SiteFooter) et heros photo ou vidéo (PageHero, HeroVideo, BackToTop).

Avec un routeur

Les liens acceptent le composant de lien de votre routeur : as sur PillLink et Card, linkAs sur SiteHeader et SiteFooter.

TSX

import Link from "next/link";
import { PillLink } from "trc-ui";

<PillLink as={Link} href="/tarifs">
  Voir les tarifs
</PillLink>;

Les composants portent la directive "use client" et fonctionnent tels quels avec l'App Router de Next.js.

Changer la couleur d'accent

Chaque couleur, rayon et réglage d'animation est une variable CSS préfixée par --trc-. Pour changer l'accent :

CSS

:root {
  --trc-accent: #d41367;
  --trc-on-accent: #ffffff; /* texte sur l'accent : quasi noir par défaut */
}

Les variables suivent la cascade : vous pouvez aussi n'habiller qu'une zone, par exemple <div style={{ "--trc-accent": "#d41367" }}>. La documentation propose un générateur de couleurs qui construit une gamme de dix nuances à partir de votre couleur de marque, vérifie le contraste sur le noir et vous donne le code.

Compatibilité

trc ui utilise color-mix() et :has() : Chrome et Edge 111+, Safari 16.2+, Firefox 121+.

Pour aller plus loin

Documentation et démos : ui.theringconcept.com
Code source : github.com/aa404/trc-ui
Paquet npm : trc-ui

Les issues et les pull requests sont les bienvenues. Et si vous développez avec Flutter, trc ui existe aussi en version Flutter.