# Sistema de diseño B.C

## Vista previa de interfaz de sistema de diseño B.C.

Alterna entre correo electrónico y teléfono conservando los datos ingresados; luego valida y revisa una preferencia local.

## Sistema de diseño B.C. Referencia de diseño

@bcgov/design-system-react-components 0.8.1 nativo, tokens de diseño 5.0.0 y BC Sans 2.1.2.

### Roles de superficie y texto

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --surface-color-primary-button-default | #013366 | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --surface-color-primary-button-hover | #1e5189 | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --surface-color-primary-button-disabled | #edebe9 | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --surface-color-background-white | #ffffff | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --surface-color-background-light-gray | #faf9f8 | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --surface-color-background-light-blue | #f1f8fe | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --surface-color-border-default | #d8d8d8 | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --surface-color-border-medium | #898785 | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --surface-color-border-active | #2e5dd7 | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --typography-color-primary | #2d2d2d | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --typography-color-secondary | #474543 | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --typography-color-link | #255a90 | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --typography-color-danger | #ce3e39 | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --typography-color-primary-invert | #ffffff | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
### Ritmo de la composición

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --layout-padding-hair | 0.125rem | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --layout-padding-xsmall | 0.25rem | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --layout-padding-small | 0.5rem | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --layout-padding-medium | 1rem | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --layout-padding-large | 1.5rem | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --layout-padding-xlarge | 2rem | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --layout-margin-medium | 1rem | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --layout-margin-large | 1.5rem | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --layout-margin-xlarge | 2rem | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --layout-margin-xxxlarge | 3rem | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --layout-border-radius-small | 2px | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --layout-border-radius-medium | 4px | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --layout-border-radius-large | 6px | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
### Escala tipográfica

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --typography-font-size-small-body | 0.875rem | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --typography-font-size-body | 1rem | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --typography-font-size-large-body | 1.125rem | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --typography-font-size-h5 | 1.25rem | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --typography-font-size-h4 | 1.5rem | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --typography-font-size-h3 | 1.75rem | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --typography-font-size-h2 | 2rem | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --typography-font-size-h1 | 2.25rem | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
| --typography-font-size-display | 3rem | Rol publicado de B.C.; úsalo según su propósito en lugar de sustituirlo por un color o una dimensión sin más. |
## Sistema de diseño B.C. Guía completa

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

## Sistema de diseño B.C.: biblioteca actual de React y tokens

### Elige la implementación mantenida

> La versión actual de B.C. Design System ofrece componentes React basados en React Aria. Este ejemplo fija react-components 0.8.1 y su dependencia design-tokens 5.0.0. El antiguo repositorio B.C. Web Components es una implementación heredada independiente; importarlo no reproduce la biblioteca actual de React. Antes de copiar un ejemplo, asegúrate de que la implementación coincida con la documentación.

### Importa la tipografía correcta

Los componentes esperan que el nombre de la familia tipográfica incluya un espacio: BC Sans. La versión 2.1.2 incluye css/BC_Sans.css; la antigua entrada BCSans.css está marcada como obsoleta y declara un nombre de familia diferente. Tener BC Sans instalada en el equipo de desarrollo puede ocultar que falta importar la fuente. Este ejemplo incluye la fuente publicada para que el resultado no dependa de una instalación local.

## Sistema de diseño B.C. Roles semánticos de color y espaciado

### Lee el rol antes de elegir el valor

Los botones principales usan el relleno azul oscuro para botones principales, mientras que el contenido complementario usa typography-color-secondary. Los mensajes de error usan typography-color-danger. La tabla registra los nombres de exportación actuales de CSS; cada nombre expresa una intención estable, aunque un tema futuro cambie el valor subyacente. No confundas el color de un control inactivo con el del texto complementario habitual.

### Aplica una geometría deliberada

El formulario usa un espaciado de 24px entre campos y una separación mayor, de 48px, entre la tarea principal y la explicación complementaria. Estos valores corresponden al ritmo de la biblioteca, mientras que la composición general en dos columnas está diseñada específicamente para este ejemplo. En móviles, las columnas se apilan sin reducir el tamaño de las etiquetas del formulario ni convertir el texto explicativo en información sobre herramientas.

## Sistema de diseño B.C. Campos condicionales y valores conservados

### Valida únicamente el método de contacto elegido

Un RadioGroup nativo controla si se muestra el TextField de correo electrónico o el de número de teléfono. Los dos valores se conservan en el estado de React al cambiar de método, pero solo el campo seleccionado se valida durante la revisión. Así se conservan los datos útiles y se evita que un campo oculto impida completar la tarea actual.

### Muestra errores locales útiles

El campo de correo electrónico comprueba un formato sencillo de dirección y el ejemplo de teléfono exige al menos diez dígitos. Se trata explícitamente de reglas de ejemplo, no de un validador internacional completo de datos de contacto. Si la revisión detecta datos no válidos, establece isInvalid y proporciona un mensaje de error específico para el campo mediante errorMessage. Si falta la aceptación, se muestra un mensaje; el foco pasa al primer control no válido.

## Contratos de componentes de sistema de diseño B.C. React Aria

### Usa valores controlados y los controladores documentados

TextField recibe value y onChange; RadioGroup recibe value y onChange; Checkbox usa isSelected y onChange. Estos controladores reciben los valores documentados, no un objeto de evento del navegador que siempre haya que leer mediante event.target. Button usa type=submit y el evento de envío del formulario nativo para que el envío con el teclado siga la misma ruta de validación.

### Mantén sincronizados los comentarios de revisión

La opción Revisar preferencia muestra un resumen local del método de contacto seleccionado. Cualquier cambio borra el resultado anterior y restablece el estado de error del envío. El ejemplo no afirma que se haya enviado un correo electrónico ni programado un recordatorio. Para hacer esas afirmaciones, un servicio de notificaciones real requeriría un acuerdo independiente sobre consentimiento, persistencia y entrega.

## Sistema de diseño B.C. Nombres accesibles y composición adaptable

### Mantén vinculadas las etiquetas, descripciones y errores

Los componentes nativos proporcionan las relaciones de React Aria entre las etiquetas, el texto de ayuda y los mensajes de error. La aplicación sigue teniendo que proporcionar etiquetas significativas, una descripción clara del grupo y mensajes de validación comprensibles. Las pruebas deben hacer clic en las etiquetas de radio visibles y usar el teclado; el campo de entrada interno oculto visualmente no es el objetivo visible.

### Separa las indicaciones complementarias del formulario

El recuadro contiguo explica el flujo de trabajo local e incluye un elemento details nativo que revela información sobre la implementación. En pantallas estrechas, aparece después del formulario en el orden de lectura. El símbolo de información es decorativo porque el encabezado comunica el significado. No hace falta un logotipo oficial de B.C. ni afirmar que se trata de un servicio gubernamental para estudiar los componentes.

## Sistema de diseño B.C. Implementación completa de React

### Reproduce la fuente verificada

Crea un proyecto de Vite React e instala los paquetes fijados de componentes, tokens y tipografía. Usa los archivos main.jsx y bc.css proporcionados junto con un elemento raíz para el montaje. El paquete incluye el comportamiento nativo de radio, campo, casilla y botón, además de la validación local completa y las transiciones de estado. No necesitas ningún API privado ni credenciales.

1. Instala los paquetes fijados e importa css/BC_Sans.css.

2. Guarda main.jsx y bc.css, y conserva el elemento raíz para el montaje.

3. Envía el formulario vacío y, luego, corrige el campo visible.

4. Cambia de método y confirma que se conserve el valor anterior.

### Ajusta la validación condicional al método seleccionado

Los controladores onChange de RadioGroup y TextField reciben valores, mientras que el de Checkbox recibe el booleano seleccionado. Guarda esos valores directamente en lugar de aplicar un controlador genérico event.target.value a todos los componentes. Las etiquetas visibles siguen siendo los objetivos de interacción, incluso cuando React Aria oculta visualmente un campo de entrada nativo.

Cuando cambie el método de contacto, conserva ambos valores del borrador, pero borra la revisión anterior y valida solo el método elegido. Después del envío, mueve el foco al primer control visible no válido. Así, la persona puede comparar las opciones de contacto sin perder una dirección de correo electrónico ni quedar bloqueada por un campo de teléfono invisible. La regla de diez dígitos del teléfono de este ejemplo es deliberadamente local y debe sustituirse por los requisitos internacionales reales del servicio.

- Solo se valida el campo de contacto seleccionado.

- Al editar cualquier opción, se borra la retroalimentación de la revisión anterior.

- El resultado no afirma que se haya programado un recordatorio.

## Ejemplos de componentes del sistema de diseño sistema de diseño B.C.

### main.jsx — ejemplo completo y funcional

Elige una preferencia de contacto y revísala. El código siguiente es la entrada completa de React, incluidos todos los estados y la validación.

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

Referencia de código

- Crea un proyecto Vite React, conserva <div id="root"></div> y cárgalo como src/main.jsx.

### bc.css — composición adaptable original

Diseño de la aplicación con capas alrededor de los 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;
  }
}
```

Referencia de código

- Guárdalo junto a main.jsx. Estas reglas de composición personalizadas se distinguen de la referencia de tokens de la biblioteca.

## Configuración del agente sistema de diseño B.C.

### Punto de partida para la implementación

El ejemplo nativo fijado se empaquetó y se comprobó localmente en el navegador. El ejemplo utiliza únicamente el estado local de la aplicación.

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

### Una instrucción para tu proyecto

```
Crea el formulario de recordatorio con componentes B.C. React 0.8.1 y BC Sans 2.1.2. Conserva la validación condicional, los datos introducidos, los errores visibles y la eliminación de resultados obsoletos. Usa los nombres actuales de los tokens y el nombre de familia tipográfica con los espacios correctos. Mantén el ejemplo local hasta que exista un contrato de notificación real.
```

## Fuentes y alcance de sistema de diseño B.C.

Estudio de una aplicación OpenDesign que utiliza la biblioteca pública actual B.C. React. Este es un formulario local original, no un servicio oficial del gobierno; usa datos de contacto ficticios.

- Código fuente actual del componente Biblioteca Aria React y límites del paquete.

- Tokens de diseño Modelo semántico de tokens y valores actuales.

- Tipografía Fundamentos y uso de BC Sans.

- Código fuente de BC Sans Familia tipográfica pública y punto de entrada correcto de CSS.

## Recursos relacionados con sistema de diseño B.C.

### Canada.ca sistema de diseño

Explora la tipografía, los tokens semánticos y los componentes web nativos de GC Design System mediante una guía de preparación completa y con búsqueda, comportamientos de divulgación y estados vacíos.

### CFPB sistema de diseño

Implementa la cuadrícula editorial, la tipografía actual y los componentes Expandables nativos de CFPB con una hoja de trabajo de lectura funcional, API de paquetes verificadas y límites de identidad explícitos.

### CMS sistema de diseño

Implementa CMS Core con variables de tema versionadas, API reales del componente Review y un flujo funcional de edición y revisión que conserva las respuestas del usuario y el foco.


- [Referencia de implementación](https://github.com/bcgov/design-system/)
- [Fuente](https://www2.gov.bc.ca/gov/content/digital/design-system/foundations/design-tokens)
- [Referencia de código](https://github.com/bcgov/design-system/)
- [Código fuente actual del componente Biblioteca Aria React y límites del paquete.](https://github.com/bcgov/design-system/)
- [Tokens de diseño Modelo semántico de tokens y valores actuales.](https://www2.gov.bc.ca/gov/content/digital/design-system/foundations/design-tokens)
- [Tipografía Fundamentos y uso de BC Sans.](https://www2.gov.bc.ca/gov/content/digital/design-system/foundations/typography)
- [Código fuente de BC Sans Familia tipográfica pública y punto de entrada correcto de CSS.](https://github.com/bcgov/bc-sans)