# Catálogo

Las piezas que no son de core, una hoja de estilos cada una: la navegación del sitio, las etiquetas con un script o una identidad propios, como la búsqueda y el consentimiento de cookies, y los patrones de una landing page, un blog, una app y un sitio de documentación.

Las piezas que no son de core, una hoja de estilos cada una: la navegación del sitio, las etiquetas con un script o una identidad propios, como la búsqueda y el consentimiento de cookies, y los patrones de una landing page, un blog, una app y un sitio de documentación, agrupados por lo que hacen.

Un sitio enlaza solo los archivos que usa, después de los de core. Cada página dice en qué tipo de sitio **encaja mejor** su pieza; *cualquier sitio* significa que no tiene un tipo propio.

Las etiquetas son `<luz-search>`, `<luz-cookie-consent>`, `<luz-theme-time>`, `<luz-lang-switch>`, `<luz-submenu>`, `<luz-announcement>`, `<luz-faq>`, `<luz-timeline>`, `<luz-embed>` y `<luz-chart>`: cada una funciona por sí sola, en cualquier cabecera o página. La barra de navegación, la barra lateral y la terminal son clases, sin etiqueta propia. Los patrones son clases: la estructura de página de una [landing page](https://nandovejer.github.io/luz/es/docs/kinds/landing/), un [blog](https://nandovejer.github.io/luz/es/docs/kinds/blog/), una [app](https://nandovejer.github.io/luz/es/docs/kinds/app/) o un [sitio de documentación](https://nandovejer.github.io/luz/es/docs/kinds/docs/), compuesta en el marcado con los objetos de core.

Todo lo demás es un **componente** de core: una pieza reutilizable que encaja en cualquier sitio; los componentes están en [Core](https://nandovejer.github.io/luz/es/docs/components/).

- Cada etiqueta es el bloque y sus partes siguen el patrón `.luz-<tag>__<part>`; todas las reglas usan solo tokens semánticos.
- La [página de inicio de LUZ](https://nandovejer.github.io/luz/es/) y esta documentación están hechas con ellos.
- ¿No sabes a qué paquete pertenece una pieza? [Qué necesita cada paquete](https://nandovejer.github.io/luz/es/docs/get-started/structure/#needs) enumera todas las piezas y el paquete que las contiene.

### Usa el catálogo cuando

- Quieres búsqueda del sitio, un banner de cookies o un selector de idioma sin tener que programarlos.
- Tu cabecera tiene varios enlaces agrupados bajo un botón.
- Necesitas un aviso breve encima de la cabecera en todas las páginas.

### Usa solo core cuando

- Solo necesitas componentes como botones, formularios y tarjetas.
- Tu sitio no tiene búsqueda ni cookies opcionales, y solo tiene un idioma.
- Creas un único widget, no una página completa.

### Tus propios componentes encima

Da estilo también a lo que añadas con tokens semánticos para que siga el modo de color y cualquier [tema propio](https://nandovejer.github.io/luz/es/docs/tokens/themes/).

Semantic tokens in an app-level component
```css
.my-panel {
  background: var(--luz-surface);
  border: 1px solid var(--luz-divider);
  color: var(--luz-text-primary);
}

.my-panel:hover {
  background: var(--luz-surface-muted);
  border-color: var(--luz-outline);
}

/* Not a primitive colour: it would stay the same in dark mode */
/* color: var(--luz-gray-100); */
```