> ## Documentation Index
> Fetch the complete documentation index at: https://learn.catalogbuilderapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Variables del Tema (Colores y Tipografías)

> Domina el estilo global en CatalogBuilderApp: crea, edita y elimina colores y tipografías personalizados que se propagan automáticamente en cada elemento de la plantilla.

Las **Variables del Tema** constituyen los cimientos del sistema de diseño en CatalogBuilderApp. En lugar de configurar manualmente colores y fuentes en cada elemento, forma, capa de texto o ficha de producto, las Variables del Tema crean una guía de estilo centralizada que actúa como única fuente de verdad para todo el catálogo.

<Frame caption="Paneles de Theme Colors y Theme Fonts en el Editor de Plantillas — Modos Claro y Oscuro">
  <img className="block dark:hidden rounded-lg max-w-sm mx-auto shadow-md" src="https://mintcdn.com/catalog-builder-app/UQegYxYgA66MpEc3/images/template-builder/theme-variables-light.png?fit=max&auto=format&n=UQegYxYgA66MpEc3&q=85&s=a4e6b90f9d1106ef4d3c26ea47b0c607" alt="Variables del Tema Modo Claro" width="608" height="696" data-path="images/template-builder/theme-variables-light.png" />

  <img className="hidden dark:block rounded-lg max-w-sm mx-auto shadow-md" src="https://mintcdn.com/catalog-builder-app/UQegYxYgA66MpEc3/images/template-builder/theme-variables-dark.png?fit=max&auto=format&n=UQegYxYgA66MpEc3&q=85&s=c8c35a523bfee7cfc4d83e766c0f0513" alt="Variables del Tema Modo Oscuro" width="598" height="694" data-path="images/template-builder/theme-variables-dark.png" />
</Frame>

***

## ¿Por qué usar Variables del Tema?

Al diseñar catálogos de decenas o cientos de páginas y productos, modificar un color corporativo o cambiar de tipografía elemento por elemento resulta tedioso y propenso a inconsistencias.

Gracias a las Variables del Tema:

* **Actualizaciones en Cascada Instantáneas**: Ajusta una muestra de color o una fuente una sola vez y todos los elementos vinculados en el catálogo se actualizan en tiempo real.
* **Coherencia de Marca Total**: Garantiza que cada tarjeta de producto, etiqueta de precio, encabezado y línea divisoria cumpla estrictamente con la identidad de tu empresa.
* **Libertad Ilimitada**: Crea, renombra, edita o elimina tantos colores y roles tipográficos como necesite tu publicación.

***

## Colores del Tema (Theme Colors)

El acordeón **Theme Colors** en la barra lateral izquierda gestiona todas las muestras de color globales.

### 1. Colores Base del Sistema

Toda plantilla incluye una paleta predeterminada:

* **Primary**: Color de acento principal de la marca, aplicado a encabezados, títulos destacados y botones de acción.
* **Secondary**: Tono complementario utilizado en insignias secundarias, resaltados de precios y bordes decorativos.
* **Background**: Tono base del lienzo de las páginas y contenedores (ej. blanco puro, crema cálido o pizarra moderno).
* **Subtle Text**: Tono tenue para números de referencia SKU, dimensiones, etiquetas de especificaciones y notas al pie.

### 2. Creación de Colores Personalizados

Puedes crear tantos colores personalizados como desees:

1. Haz clic en el botón naranja **`+`** en la cabecera de **THEME COLORS**.
2. Se generará un nuevo token de color dinámico.
3. Haz clic en el recuadro de color para abrir el selector visual (*color picker*).
4. Elige el tono deseado o introduce el código hexadecimal exacto (ej. `#192C4D`).

### 3. Edición y Cambio de Nombre

* **Modificar Color**: Haz clic en la muestra de color en cualquier momento para elegir otro tono o escribir un nuevo código HEX.
* **Renombrar Variable**: Haz doble clic en el nombre o haz clic en el icono del lápiz (`✎`) que aparece al pasar el cursor. Escribe un nombre descriptivo (ej. *Dorado Premium*, *Insignia Oferta*, *Borde Divisorio*). Los espacios se formatean automáticamente para garantizar compatibilidad técnica.
* **Inspección HEX en Vivo**: Al colocar el cursor sobre cualquier fila de color, se muestra su código hexadecimal en el lateral derecho (ej. `#192C4D`).

### 4. Eliminación de Colores Personalizados

* Pasa el cursor sobre la fila del color personalizado para ver el icono de la papelera roja (`🗑️`).
* Haz clic en la papelera para eliminar permanentemente la variable.
* *(Nota: Los colores base del sistema como `Primary`, `Secondary` y `Background` están protegidos contra eliminación accidental para preservar la integridad visual de la plantilla).*

***

## Tipografías del Tema (Theme Fonts)

La sección **Theme Fonts** define la jerarquía tipográfica maestra de tu catálogo.

### 1. Roles Tipográficos Predeterminados

* **Display Font**: Tipografía expresiva y de gran impacto visual, seleccionada para portadas, títulos principales y nombres de colecciones (ej. *Playfair Display*, *Cinzel*, *Montserrat*).
* **Body Font**: Fuente limpia, moderna y altamente legible, diseñada para descripciones de producto, fichas técnicas, precios e índices (ej. *Inter*, *Roboto*, *Outfit*).

### 2. Creación de Nuevos Roles Tipográficos

¿Necesitas fuentes especiales para citas, notas legales o etiquetas de descuento? Puedes crear todas las tipografías que quieras:

1. Haz clic en el botón naranja **`+`** en la cabecera de **THEME FONTS**.
2. Se creará una nueva variable tipográfica personalizada.
3. Selecciona la familia de fuentes en el menú desplegable.
4. Haz doble clic en el nombre o pulsa el icono del lápiz (`✎`) para asignarle un rol (ej. *Fuente de Precios*, *Texto Legal*, *Insignias*).

### 3. Edición y Eliminación de Tipografías

* **Cambiar Familia**: Despliega el selector para elegir entre fuentes web profesionales y Google Fonts optimizadas para pantalla e impresión.
* **Variantes y Pesos**: Selecciona el grosor deseado (Regular, Medium, Bold, Extra Bold).
* **Eliminar Tipografía**: Pasa el cursor sobre cualquier rol personalizado y haz clic en la papelera (`🗑️`) para borrarlo.

***

## Cómo Vincular Variables a Elementos del Lienzo

Una vez definidas tus variables, vincularlas a los elementos de tu diseño es muy sencillo:

<Steps>
  <Step title="Selecciona un Elemento">
    Haz clic sobre cualquier cuadro de texto, figura geométrica, rectángulo o ficha de producto en el lienzo central.
  </Step>

  <Step title="Abre el Panel Inspector">
    Observa el panel lateral derecho (**Inspector**) donde se muestran las propiedades de estilo.
  </Step>

  <Step title="Vincula la Variable">
    En las opciones de **Fill Color** (relleno), **Stroke Color** (trazo) o **Font Family** (fuente), elige el nombre de tu variable en lugar de escribir un valor estático.
  </Step>

  <Step title="Propagación Instantánea">
    ¡Listo! Cada vez que modifiques ese color o fuente en el panel izquierdo, el elemento se actualizará de forma automática en todas las páginas.
  </Step>
</Steps>

***

## Buenas Prácticas

<CardGroup cols={2}>
  <Card title="Contraste Claro y Oscuro" icon="circle-half-stroke">
    Asegúrate de que tus colores de `Background` y `Subtle Text` ofrezcan un contraste de lectura óptimo tanto en el visor de flipbook claro como oscuro.
  </Card>

  <Card title="Unificación de Fichas de Producto" icon="clone">
    Vincula los componentes de tarjetas de productos a variables globales para que todos los artículos compartan estilos de precio y tipografías idénticos.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.