# Componentes

> Las piezas del sistema de diseño de Faber, tal y como se sirven en
> `@pantherkit/design-system`. Cada una tiene su gemelo en texto.

Todas son **CSS, no componentes React**. Se aplican poniendo clases en tu
propio marcado, y por eso la landing —Astro sin React— puede usarlas sin
pagar el peso de un framework. Los productos React envuelven estas mismas
clases.

```css
@import "@pantherkit/design-system/tokens.css";      /* siempre primero */
@import "@pantherkit/design-system/components.css";  /* botón, cristal, ficha, tira */
@import "@pantherkit/design-system/carrusel.css";    /* solo si lo quieres: ver abajo */
```

## Las piezas

| Pieza | Texto | Qué es | Cuándo NO |
| --- | --- | --- | --- |
| [Botón](/componentes/boton) | [`.md`](/componentes/boton.md) | El botón de cristal fluido: el reflejo persigue al cursor en vez de saltar a él. | Dos primarios en el mismo bloque. |
| [Cristal](/componentes/cristal) | [`.md`](/componentes/cristal.md) | El material, no la barra: velo, desenfoque, filo iluminado y un brillo que sigue al puntero. | En un pie de página. Se probó y se retiró. |
| [Ficha de proyecto](/componentes/ficha) | [`.md`](/componentes/ficha.md) | La hoja tipo App Store: la tarjeta no saca al visitante a otra pestaña en el primer clic. | Como diálogo de confirmación o formulario. |
| [Tira de logos](/componentes/tira) | [`.md`](/componentes/tira.md) | La prueba social. Son dos patrones, no uno: la tira estática y la cinta en bucle. | La cinta con pocos logos. |
| [Carrusel](/componentes/carrusel) | [`.md`](/componentes/carrusel.md) | La tira que se arrastra, con coverflow atado al scroll y sin una línea de JavaScript. No se importa solo. | Importándolo desde `components.css`. |

## Las dos reglas que se incumplen más

**El carrusel no se importa solo.** No entra en `components.css` a
propósito: sus selectores son globales y pisan el carrusel que el consumidor
ya tenga. En la landing se superpusieron dos coverflow y las tarjetas de los
lados salían lavadas. Quien lo quiere lo importa explícitamente.

**El cristal necesita algo detrás.** Un cristal se reconoce por cómo refleja
lo que tiene detrás; sobre un fondo plano y quieto es una caja gris. El
footer de cristal se probó y se retiró por esto exacto.

## Lo que ninguna pieza hace

- **Ni un color, radio, duración o curva propios.** Todo sale de
  `tokens.css`. Un valor literal dentro de un componente es deuda, y los que
  quedan están anotados en el apartado «lo que el sistema todavía no
  resuelve» de cada pieza.
- **Ninguna aporta semántica.** `.fbtn` no hace un botón: lo hace
  `<button>`. Las clases son material, no rol.
- **Ninguna trae JavaScript.** Lo que necesita guion —el reflejo del botón,
  el brillo del cristal, abrir la ficha, los mandos del carrusel— lo pone el
  consumidor, y todo funciona sin él salvo abrir la ficha.

---

Versión viva: <https://design.wearefaber.com/componentes>