# Système de design B.C

## Aperçu de l’interface système de design B.C.

Passez du courriel au téléphone sans perdre les saisies, puis validez et consultez une préférence locale.

## Référence de conception système de design B.C.

Bibliothèque native @bcgov/design-system-react-components 0.8.1, jetons 5.0.0 et BC Sans 2.1.2.

### Rôles des surfaces et du texte

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --surface-color-primary-button-default | #013366 | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --surface-color-primary-button-hover | #1e5189 | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --surface-color-primary-button-disabled | #edebe9 | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --surface-color-background-white | #ffffff | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --surface-color-background-light-gray | #faf9f8 | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --surface-color-background-light-blue | #f1f8fe | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --surface-color-border-default | #d8d8d8 | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --surface-color-border-medium | #898785 | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --surface-color-border-active | #2e5dd7 | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --typography-color-primary | #2d2d2d | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --typography-color-secondary | #474543 | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --typography-color-link | #255a90 | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --typography-color-danger | #ce3e39 | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --typography-color-primary-invert | #ffffff | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
### Rythme de mise en page

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --layout-padding-hair | 0.125rem | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --layout-padding-xsmall | 0.25rem | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --layout-padding-small | 0.5rem | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --layout-padding-medium | 1rem | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --layout-padding-large | 1.5rem | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --layout-padding-xlarge | 2rem | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --layout-margin-medium | 1rem | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --layout-margin-large | 1.5rem | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --layout-margin-xlarge | 2rem | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --layout-margin-xxxlarge | 3rem | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --layout-border-radius-small | 2px | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --layout-border-radius-medium | 4px | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --layout-border-radius-large | 6px | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
### Échelle typographique

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --typography-font-size-small-body | 0.875rem | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --typography-font-size-body | 1rem | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --typography-font-size-large-body | 1.125rem | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --typography-font-size-h5 | 1.25rem | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --typography-font-size-h4 | 1.5rem | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --typography-font-size-h3 | 1.75rem | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --typography-font-size-h2 | 2rem | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --typography-font-size-h1 | 2.25rem | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
| --typography-font-size-display | 3rem | Rôle publié de la C.-B. ; utilisez-le selon sa fonction plutôt que de le remplacer par une couleur ou une dimension brute. |
## Guide complet système de design B.C.

Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.

Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.

## Système de design B.C. Bibliothèque et jetons actuels React

### Choisir l’implémentation maintenue

> La version actuelle de B.C. Design System fournit des composants React reposant sur React Aria. Cet exemple utilise react-components 0.8.1 et sa dépendance design-tokens 5.0.0. L’ancien dépôt B.C. Web Components est une implémentation historique distincte ; l’importer ne reproduit pas la bibliothèque React actuelle. Vérifiez que l’implémentation correspond à la documentation avant de reprendre un exemple.

### Importer la véritable police

Les composants attendent le nom de famille de police BC Sans, avec une espace. La version 2.1.2 fournit css/BC_Sans.css ; l’ancien fichier BCSans.css est indiqué comme obsolète et déclare un autre nom de famille. La présence de BC Sans sur le poste d’un développeur peut masquer l’absence d’importation de la police. L’exemple inclut la police publiée afin que le résultat ne dépende pas d’une installation locale.

## Rôles sémantiques des couleurs et de l’espacement de système de design B.C.

### Consulter le rôle avant de choisir la valeur

Les boutons principaux utilisent le fond bleu foncé réservé aux boutons principaux, tandis que le contenu complémentaire utilise typography-color-secondary. Les messages d’erreur utilisent typography-color-danger. Le tableau répertorie les noms exportés actuels de CSS ; le nom exprime une intention stable, même si un thème futur modifie la valeur sous-jacente. Ne confondez pas la couleur d’un contrôle inactif avec celle du texte complémentaire ordinaire.

### Soigner la géométrie

Le formulaire utilise un espacement de 24px entre les champs et un écart plus large de 48px entre la tâche principale et les explications complémentaires. Ces valeurs correspondent au rythme de la bibliothèque, tandis que la composition générale en deux colonnes a été conçue pour cet exemple. Sur mobile, les colonnes se replient sans réduire les libellés du formulaire ni transformer le texte explicatif en infobulle.

## Champs conditionnels et conservation des valeurs de système de design B.C.

### Valider uniquement la méthode de contact choisie

Un RadioGroup natif contrôle l’affichage du TextField « Adresse courriel » ou « Numéro de téléphone ». Les deux valeurs sont conservées dans l’état de React lorsque la méthode change, mais seule la valeur du champ sélectionné est validée lors de la vérification. Cela permet de conserver les saisies utiles tout en évitant qu’un champ masqué bloque la tâche en cours.

### Afficher des erreurs locales utiles

Le champ de courriel vérifie une forme d’adresse simple, et l’exemple de numéro de téléphone exige au moins dix chiffres. Il s’agit explicitement de règles d’exemple, et non d’un validateur international complet des coordonnées. Lors d’une vérification invalide, isInvalid est défini et un errorMessage propre au champ est fourni. L’absence de consentement entraîne l’affichage d’un message ; le premier contrôle invalide reçoit le focus.

## Contrats des composants React Aria de système de design B.C.

### Utiliser les valeurs contrôlées et les gestionnaires documentés

TextField reçoit value et onChange ; RadioGroup reçoit value et onChange ; Checkbox utilise isSelected et onChange. Ces gestionnaires reçoivent les valeurs documentées, et non un objet événement du navigateur qu’il faudrait toujours lire via event.target. Button utilise type=submit et l’événement submit du formulaire natif afin que l’envoi au clavier suive le même parcours de validation.

### Synchroniser les commentaires de vérification

La vérification de la préférence affiche un résumé local de la méthode de contact sélectionnée. Toute modification efface le résultat précédent et réinitialise l’état des erreurs soumises. L’exemple ne prétend pas qu’un courriel a été envoyé ni qu’un rappel a été programmé. Avant de faire de telles affirmations, un véritable service de notification nécessiterait un contrat distinct portant sur le consentement, la persistance et l’envoi.

## Noms accessibles et composition adaptative de système de design B.C.

### Relier les libellés, les descriptions et les erreurs

Les composants natifs fournissent les associations Aria de React pour les libellés, les textes d’aide et les messages d’erreur. L’application doit tout de même fournir des libellés pertinents, une description claire du groupe et des messages de validation compréhensibles. Les tests doivent vérifier que l’on peut cliquer sur les libellés radio visibles et utiliser le clavier ; le champ interne masqué visuellement n’est pas la cible visible.

### Séparer les conseils complémentaires du formulaire

L’encadré adjacent explique le fonctionnement local et comprend un élément natif de divulgation « details » avec des précisions sur la mise en œuvre. Sur les écrans étroits, il suit le formulaire dans l’ordre de lecture. Le symbole d’information est décoratif, car le titre en indique déjà le sens. Il n’est pas nécessaire d’utiliser un logo officiel de la C.-B. ni de prétendre qu’il s’agit d’un service gouvernemental pour étudier les composants.

## Système de design B.C. Implémentation complète de React

### Reproduire la source vérifiée

Créez un projet Vite React et installez les packages épinglés des composants, des jetons et des polices. Utilisez les fichiers main.jsx et bc.css fournis avec un élément racine de montage. Le bundle comprend le comportement natif des boutons radio, champs, cases à cocher et boutons, ainsi que l’ensemble de la validation locale et des transitions d’état. Aucun accès privé à API ni identifiant n’est nécessaire.

1. Installez les packages épinglés et importez css/BC_Sans.css.

2. Enregistrez main.jsx et bc.css en conservant l’élément racine de montage.

3. Soumettez le formulaire vide, puis corrigez le champ signalé.

4. Changez de méthode et vérifiez que la valeur précédente est conservée.

### Adaptez la validation conditionnelle à la méthode sélectionnée

Les gestionnaires onChange de RadioGroup et TextField reçoivent des valeurs, tandis que celui de Checkbox reçoit la valeur booléenne sélectionnée. Stockez ces valeurs directement au lieu d’appliquer à tous les composants un gestionnaire générique event.target.value. Les libellés visibles restent les cibles d’interaction, même lorsque React Aria masque visuellement un champ de saisie natif.

Lorsque la méthode de contact change, conservez les deux valeurs en cours de saisie, mais effacez l’ancien résultat et ne validez que la méthode choisie. Après la soumission, placez le focus sur le premier contrôle visible invalide. Ainsi, chacun peut comparer les options de contact sans perdre une adresse courriel ni être bloqué par un champ téléphonique invisible. La règle d’exemple exigeant dix chiffres pour le numéro de téléphone est volontairement propre à cette démonstration : elle doit être remplacée par les exigences réelles du service en matière de numéros internationaux.

- Seul le champ de contact sélectionné est validé.

- Toute modification efface les anciens messages de validation.

- Le résultat ne prétend pas qu’un rappel a été programmé.

## Système de design B.C. Exemples de composants du système de design

### main.jsx — exemple complet fonctionnel

Choisissez une préférence de contact et vérifiez-la. Le code ci-dessous constitue l’entrée React complète, avec toute la gestion d’état et la validation.

```
import React, { useState, useRef } from "react";
import { createRoot } from "react-dom/client";
import {
  Button,
  Radio,
  RadioGroup,
  TextField,
  Checkbox,
} from "@bcgov/design-system-react-components";
import "@bcgov/bc-sans/css/BC_Sans.css";
import "./bc.css";
function App() {
  const [method, setMethod] = useState("email"),
    [email, setEmail] = useState(""),
    [phone, setPhone] = useState(""),
    [consent, setConsent] = useState(false),
    [submitted, setSubmitted] = useState(false),
    [result, setResult] = useState("");
  const panel = useRef(null);
  const invalidEmail = !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email),
    invalidPhone = phone.replace(/\D/g, "").length < 10;
  function change(fn, value) {
    fn(value);
    setResult("");
    setSubmitted(false);
  }
  function review(e) {
    e.preventDefault();
    setSubmitted(true);
    if ((method === "email" ? invalidEmail : invalidPhone) || !consent) {
      requestAnimationFrame(() =>
        panel.current
          .querySelector(
            '[aria-invalid="true"] input,input[aria-invalid="true"],input[type=checkbox]:not(:checked)',
          )
          ?.focus(),
      );
      return;
    }
    setResult(
      `Local preference ready: ${method === "email" ? "Email to " + email : "Phone call to " + phone}. No reminder has been scheduled.`,
    );
  }
  return (
    <main>
      <header>
        <div className="eyebrow">
          SERVICE REMINDER / ORIGINAL APPLICATION STUDY
        </div>
        <h1>Choose how to hear from us</h1>
        <p>
          Set a sample reminder preference. Use fictional contact details in
          this local example.
        </p>
      </header>
      <div className="columns">
        <form onSubmit={review} noValidate ref={panel}>
          <RadioGroup
            label="Contact method"
            value={method}
            onChange={(v) => change(setMethod, v)}
            description="Choose one way to receive a reminder."
          >
            <Radio value="email">Email</Radio>
            <Radio value="phone">Phone call</Radio>
          </RadioGroup>
          <div className="field">
            {method === "email" ? (
              <TextField
                label="Email address"
                type="email"
                value={email}
                onChange={(v) => change(setEmail, v)}
                isRequired
                isInvalid={submitted && invalidEmail}
                errorMessage="Enter an email address in the format name@example.com."
                description="Use a sample address, such as alex@example.com."
              />
            ) : (
              <TextField
                label="Phone number"
                type="tel"
                value={phone}
                onChange={(v) => change(setPhone, v)}
                isRequired
                isInvalid={submitted && invalidPhone}
                errorMessage="Enter a phone number with at least 10 digits."
                description="Sample validation only; a real service needs a jurisdiction-aware phone rule."
              />
            )}
          </div>
          <div className="field">
            <Checkbox
              isSelected={consent}
              onChange={(v) => change(setConsent, v)}
              isInvalid={submitted && !consent}
            >
              I agree to use these details for this sample reminder
            </Checkbox>
            {submitted && !consent && (
              <p className="error" role="alert">
                Confirm the reminder preference before continuing.
              </p>
            )}
          </div>
          <Button type="submit" variant="primary">
            Review preference
          </Button>
          <p className="result" role="status">
            {result}
          </p>
        </form>
        <aside>
          <div className="status-mark" aria-hidden="true">
            i
          </div>
          <h2>What happens next</h2>
          <ol>
            <li>Choose a contact method.</li>
            <li>Review the sample details.</li>
            <li>Connect a real notification service before scheduling.</li>
          </ol>
          <p>
            This example keeps both fields while switching methods, but only
            reviews the selected method.
          </p>
          <details>
            <summary>About this specimen</summary>
            <p>
              Native B.C. React Aria components with BC Sans. The form is
              original and is not an official government service.
            </p>
          </details>
        </aside>
      </div>
    </main>
  );
}
createRoot(document.getElementById("root")).render(<App />);
```

Référence du code

- Créez un projet Vite React, conservez <div id="root"></div> et chargez ce fichier comme src/main.jsx.

### bc.css — composition adaptative d’origine

Mise en page de l’application construite autour des composants natifs.

```
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font:
    16px/1.5 "BC Sans",
    sans-serif;
  color: var(--typography-color-primary, #2d2d2d);
  background: white;
}
main {
  padding: 32px;
}
header {
  border-top: 6px solid #fcba19;
  border-bottom: 1px solid #d8d8d8;
  padding: 24px 0;
  margin-bottom: 32px;
}
.eyebrow {
  font-size: 13px;
  color: #474543;
}
h1 {
  font-size: 32px;
  line-height: 1.25;
  margin: 8px 0 16px;
}
h2 {
  font-size: 24px;
  margin: 0 0 16px;
}
p {
  margin: 8px 0 16px;
}
.columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
}
form {
  max-width: 620px;
}
.field {
  margin: 24px 0;
}
aside {
  padding: 24px;
  background: #f1f8fe;
  border-left: 4px solid #1a5a96;
  align-self: start;
}
.status-mark {
  background: #1a5a96;
  color: white;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-weight: bold;
  margin-bottom: 16px;
}
ol {
  padding-left: 24px;
}
li {
  padding-left: 4px;
  margin: 12px 0;
}
.error {
  color: #ce3e39;
  font-size: 14px;
}
.result {
  margin-top: 24px;
  color: #24613b;
}
summary {
  cursor: pointer;
  text-decoration: underline;
  color: #1a5a96;
}
details {
  margin-top: 24px;
}
details p {
  font-size: 14px;
}
@media (max-width: 767px) {
  main {
    padding: 16px;
  }
  .columns {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  h1 {
    font-size: 28px;
  }
  aside {
    padding: 16px;
  }
}
```

Référence du code

- Enregistrez ce fichier à côté de main.jsx. Ces règles de composition personnalisées se distinguent de la référence des jetons de la bibliothèque.

## Configuration de l’agent système de design B.C.

### Point de départ de l’implémentation

L’exemple natif épinglé a été assemblé et vérifié localement dans un navigateur. Cet exemple utilise uniquement l’état local de l’application.

```
npm create vite@latest bc-reminder -- --template react
cd bc-reminder
npm install
npm install @bcgov/design-system-react-components@0.8.1 @bcgov/design-tokens@5.0.0 @bcgov/bc-sans@2.1.2
# Replace src/main.jsx and add src/bc.css using the complete examples.
npm run dev
```

### Un prompt pour votre projet

```
Créez le formulaire de rappel avec les composants B.C. React 0.8.1 et BC Sans 2.1.2. Préservez la validation conditionnelle, les saisies conservées, les erreurs visibles et l’effacement des résultats obsolètes. Utilisez les noms de jetons actuels et le nom de famille de polices avec l’espacement approprié. Gardez l’exemple local tant qu’il n’existe pas de véritable contrat de notification.
```

## Système de design B.C. Sources et portée

Étude d’application OpenDesign utilisant la bibliothèque publique B.C. React actuelle. Il s’agit d’un formulaire local original, et non d’un service gouvernemental officiel. Utilisez des coordonnées fictives.

- Source actuelle des composants Bibliothèque Aria React et limites des packages.

- Jetons de design Modèle de jetons sémantiques et valeurs actuelles.

- Typographie Bases et utilisation de BC Sans.

- Source de BC Sans Famille de polices publique et point d’entrée CSS approprié.

## Système de design B.C. Ressources connexes

### Canada.ca système de design

Découvrez la typographie, les jetons sémantiques et les composants Web natifs de GC Design System grâce à un guide de préparation complet avec recherche, divulgation et gestion de l’état vide.

### CFPB système de design

Mettez en œuvre la grille éditoriale, la typographie actuelle et les composants Expandables natifs de CFPB avec une fiche de lecture fonctionnelle, des API de paquet vérifiées et des limites d’identité clairement définies.

### CMS système de design

Implémentez CMS Core avec des variables de thème versionnées, les véritables API du composant Review et un flux fonctionnel de modification et de révision qui préserve les réponses saisies et le focus.


- [Référence de mise en œuvre](https://github.com/bcgov/design-system/)
- [Source](https://www2.gov.bc.ca/gov/content/digital/design-system/foundations/design-tokens)
- [Référence du code](https://github.com/bcgov/design-system/)
- [Source actuelle des composants Bibliothèque Aria React et limites des packages.](https://github.com/bcgov/design-system/)
- [Jetons de design Modèle de jetons sémantiques et valeurs actuelles.](https://www2.gov.bc.ca/gov/content/digital/design-system/foundations/design-tokens)
- [Typographie Bases et utilisation de BC Sans.](https://www2.gov.bc.ca/gov/content/digital/design-system/foundations/typography)
- [Source de BC Sans Famille de polices publique et point d’entrée CSS approprié.](https://github.com/bcgov/bc-sans)