# Sistema de design B.C

## Prévia da interface de sistema de design B.C.

Alterne entre e-mail e telefone sem perder os dados digitados; depois, valide e revise uma preferência local.

## Sistema de design B.C. Referência de design

Componentes nativos de @bcgov/design-system-react-components 0.8.1, tokens 5.0.0 e BC Sans 2.1.2.

### Papéis de superfície e texto

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --surface-color-primary-button-default | #013366 | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --surface-color-primary-button-hover | #1e5189 | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --surface-color-primary-button-disabled | #edebe9 | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --surface-color-background-white | #ffffff | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --surface-color-background-light-gray | #faf9f8 | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --surface-color-background-light-blue | #f1f8fe | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --surface-color-border-default | #d8d8d8 | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --surface-color-border-medium | #898785 | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --surface-color-border-active | #2e5dd7 | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --typography-color-primary | #2d2d2d | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --typography-color-secondary | #474543 | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --typography-color-link | #255a90 | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --typography-color-danger | #ce3e39 | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --typography-color-primary-invert | #ffffff | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
### Ritmo do layout

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --layout-padding-hair | 0.125rem | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --layout-padding-xsmall | 0.25rem | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --layout-padding-small | 0.5rem | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --layout-padding-medium | 1rem | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --layout-padding-large | 1.5rem | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --layout-padding-xlarge | 2rem | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --layout-margin-medium | 1rem | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --layout-margin-large | 1.5rem | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --layout-margin-xlarge | 2rem | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --layout-margin-xxxlarge | 3rem | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --layout-border-radius-small | 2px | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --layout-border-radius-medium | 4px | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --layout-border-radius-large | 6px | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
### Escala tipográfica

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --typography-font-size-small-body | 0.875rem | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --typography-font-size-body | 1rem | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --typography-font-size-large-body | 1.125rem | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --typography-font-size-h5 | 1.25rem | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --typography-font-size-h4 | 1.5rem | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --typography-font-size-h3 | 1.75rem | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --typography-font-size-h2 | 2rem | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --typography-font-size-h1 | 2.25rem | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
| --typography-font-size-display | 3rem | Papel publicado da B.C.; use conforme a finalidade, em vez de substituí-lo por uma cor ou dimensão bruta. |
## Sistema de design B.C. Guia completo

Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.

Orientações completas, um ponto de partida para a implementação e links para o código-fonte.

## Biblioteca e tokens atuais de sistema de design B.C. React

### Escolha a implementação mantida

> A versão atual de B.C. Design System oferece componentes React criados com base em React Aria. Este exemplo fixa react-components 0.8.1 e sua dependência design-tokens 5.0.0. O antigo repositório B.C. Web Components é uma implementação legada independente; importá-lo não reproduz a biblioteca React atual. Confira se a implementação corresponde à documentação antes de copiar um exemplo.

### Importe a fonte correta

Os componentes esperam o nome de família BC Sans, com espaço. A versão 2.1.2 fornece css/BC_Sans.css; a entrada antiga BCSans.css está marcada como obsoleta e declara um nome de família diferente. Ter BC Sans instalada na máquina de desenvolvimento pode ocultar a falta de uma importação da fonte. O exemplo inclui a fonte publicada para que o resultado não dependa de uma instalação local.

## Sistema de design B.C. Papéis semânticos de cor e espaçamento

### Consulte o papel antes de escolher o valor

Os botões primários usam o preenchimento azul-escuro de botão primário, enquanto o conteúdo complementar usa typography-color-secondary. As mensagens de erro usam typography-color-danger. A tabela registra os nomes de exportação atuais de CSS; o nome expressa uma intenção estável, mesmo que um tema futuro altere o valor subjacente. Não confunda a cor de um controle inativo com a de um texto complementar comum.

### Defina a geometria com intenção

O formulário usa um espaçamento de 24px entre campos e uma distância maior, de 48px, entre a tarefa principal e a explicação complementar. Esses valores correspondem ao ritmo da biblioteca, enquanto a composição geral em duas colunas foi criada especificamente para este exemplo. No layout para dispositivos móveis, as colunas se empilham sem reduzir os rótulos do formulário nem transformar o texto explicativo em uma dica de ferramenta.

## Sistema de design B.C. Campos condicionais e valores preservados

### Valide somente o método de contato escolhido

Um RadioGroup nativo controla se o TextField de endereço de e-mail ou o de número de telefone fica visível. Os dois valores permanecem no estado de React quando o método muda, mas somente o campo selecionado participa da validação da revisão. Assim, os dados úteis são preservados e um campo invisível não impede a conclusão da tarefa atual.

### Exiba erros locais úteis

O campo de e-mail verifica um formato básico de endereço, e o exemplo de telefone exige pelo menos dez dígitos. Essas são regras ilustrativas, não um validador internacional completo de contatos. Ao revisar dados inválidos, defina isInvalid e forneça um errorMessage específico para o campo. A falta de consentimento exibe uma mensagem visível; o foco vai para o primeiro controle inválido.

## Sistema de design B.C. Contratos dos componentes React Aria

### Use valores controlados e manipuladores documentados

TextField recebe value e onChange; RadioGroup recebe value e onChange; Checkbox usa isSelected e onChange. Esses manipuladores recebem os valores documentados, não um objeto de evento do navegador que sempre precise ser lido por meio de event.target. Button usa type=submit e o evento de envio do formulário nativo, para que o envio pelo teclado siga o mesmo fluxo de validação.

### Mantenha o feedback da revisão sincronizado

A opção Revisar preferência exibe um resumo local do método de contato selecionado. Qualquer alteração limpa o resultado anterior e redefine o estado de erro de envio. O exemplo não afirma que um e-mail foi enviado nem que um lembrete foi agendado. Um serviço de notificações real exigiria contratos separados de consentimento, persistência e entrega antes que essas afirmações pudessem ser feitas.

## Sistema de design B.C. Nomes acessíveis e composição responsiva

### Mantenha rótulos, descrições e erros associados

Os componentes nativos fornecem as relações de React Aria entre rótulos, textos de ajuda e mensagens de erro. Ainda cabe à aplicação fornecer rótulos claros, uma descrição compreensível do grupo e mensagens de validação fáceis de entender. Nos testes, clique nos rótulos visíveis dos botões de opção e use o teclado; a entrada interna, visualmente oculta, não é o alvo visível.

### Separe as orientações complementares do formulário

O painel adjacente explica o fluxo de trabalho local e inclui um elemento details nativo com contexto de implementação. Em telas estreitas, ele aparece depois do formulário na ordem de leitura. O símbolo de informação é decorativo, pois o título já transmite o significado. Não é necessário usar um logotipo oficial da B.C. nem alegar que se trata de um serviço governamental para estudar os componentes.

## Sistema de design B.C. Implementação completa de React

### Reproduza a implementação verificada

Crie um projeto Vite React e instale os pacotes fixados de componentes, tokens e fontes. Use os arquivos main.jsx e bc.css fornecidos com um elemento raiz de montagem. O pacote inclui o comportamento nativo de botões de opção, campos, caixas de seleção e botões, além de toda a validação local e das transições de estado. Não é necessário ter um API privado nem credenciais.

1. Instale os pacotes fixados e importe css/BC_Sans.css.

2. Salve main.jsx e bc.css, mantendo o elemento raiz de montagem.

3. Envie o formulário vazio e, em seguida, corrija o campo visível.

4. Alterne os métodos e confirme que o valor anterior foi preservado.

### Mantenha a validação condicional alinhada ao método selecionado

Os manipuladores onChange de RadioGroup e TextField recebem valores, enquanto o onChange de Checkbox recebe o valor booleano selecionado. Armazene esses valores diretamente, em vez de aplicar a todos os componentes um manipulador genérico que use event.target.value. Os rótulos visíveis continuam sendo os alvos de interação, mesmo quando React Aria oculta visualmente uma entrada nativa.

Quando o método de contato mudar, mantenha os dois valores em rascunho, mas limpe a revisão anterior e valide apenas o método escolhido. Após o envio, mova o foco para o primeiro controle visível inválido. Assim, a pessoa pode comparar as opções de contato sem perder um endereço de e-mail nem ser impedida por um campo de telefone invisível. A regra de telefone com dez dígitos deste exemplo é intencionalmente local e deve ser substituída pelos requisitos internacionais reais do serviço.

- Somente o campo de contato selecionado é validado.

- Alterar qualquer opção limpa as mensagens de revisão anteriores.

- O resultado não afirma que um lembrete foi agendado.

## Exemplos de componentes do sistema de design sistema de design B.C.

### main.jsx — exemplo funcional completo

Escolha e revise uma preferência de contato. O código-fonte abaixo é a entrada completa de React, incluindo todo o estado e a validação.

```
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 />);
```

Referência de código

- Crie um projeto Vite React, mantenha <div id="root"></div> e carregue este arquivo como src/main.jsx.

### bc.css — composição responsiva original

Layout da aplicação organizado em torno dos componentes nativos.

```
* {
  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;
  }
}
```

Referência de código

- Salve junto de main.jsx. Estas regras de composição personalizadas são distintas da referência de tokens da biblioteca.

## Configuração do agente de IA sistema de design B.C.

### Ponto de partida para implementação

O exemplo nativo com versões fixadas foi empacotado e verificado localmente no navegador. O exemplo usa apenas o estado local da aplicação.

```
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
```

### Um prompt para seu projeto

```
Crie o formulário de lembrete com os componentes B.C. React 0.8.1 e BC Sans 2.1.2. Preserve a validação condicional, os dados mantidos, os erros visíveis e a limpeza de resultados desatualizados. Use os nomes atuais dos tokens e o nome correto da família tipográfica, com espaços. Mantenha o exemplo local até que exista um contrato de notificação real.
```

## Fontes e escopo de sistema de design B.C.

Um estudo de aplicação de OpenDesign que usa a biblioteca pública atual B.C. React. Este é um formulário local original, não um serviço oficial do governo; use dados de contato fictícios.

- Código-fonte atual dos componentes Biblioteca Aria de React e limites dos pacotes.

- Tokens de design Modelo de tokens semânticos e valores atuais.

- Tipografia Base e uso de BC Sans.

- Código-fonte de BC Sans Família tipográfica pública e ponto de entrada correto de CSS.

## Recursos relacionados a sistema de design B.C.

### Canada.ca sistema de design

Explore a tipografia, os tokens semânticos e os componentes web nativos do GC Design System por meio de um guia de preparação completo e pesquisável, com comportamento de divulgação e estado vazio.

### CFPB sistema de design

Implemente a grade editorial, a tipografia atual e os componentes Expandables nativos do CFPB com uma planilha de leitura funcional, APIs de pacotes verificadas e limites de identidade explícitos.

### CMS sistema de design

Implemente o CMS Core com variáveis de tema versionadas, APIs reais do componente Review e um fluxo funcional de edição e revisão que preserve as respostas do usuário e o foco.


- [Referência de implementação](https://github.com/bcgov/design-system/)
- [Fonte](https://www2.gov.bc.ca/gov/content/digital/design-system/foundations/design-tokens)
- [Referência de código](https://github.com/bcgov/design-system/)
- [Código-fonte atual dos componentes Biblioteca Aria de React e limites dos pacotes.](https://github.com/bcgov/design-system/)
- [Tokens de design Modelo de tokens semânticos e valores atuais.](https://www2.gov.bc.ca/gov/content/digital/design-system/foundations/design-tokens)
- [Tipografia Base e uso de BC Sans.](https://www2.gov.bc.ca/gov/content/digital/design-system/foundations/typography)
- [Código-fonte de BC Sans Família tipográfica pública e ponto de entrada correto de CSS.](https://github.com/bcgov/bc-sans)