# Tokens del tema

> Cada token de color y tamaño de un tema de Pyzed, qué pinta en la interfaz y su valor en One Dark y One Light.

Source: https://albakore.github.io/pyzed/es/theming/tokens/

Un tema es una lista de **tokens**: nombres como `accent` o `text_muted` con un color (o un tamaño) cada uno. Los
componentes nunca fijan colores a mano; le piden un token al tema. Por eso un solo cambio en el tema lo reestiliza
todo.

Los tokens se usan de dos formas:

```python
pz.text("Total").style(color="text_muted")                 # por nombre, en cualquier sitio donde va un color
pz.container(cuerpo, bg=self.resolved_theme().surface)       # como atributo del tema
```

Los colores son `#rrggbb` o `#rrggbbaa` (los dos últimos dígitos son la opacidad). Los nombres de tokens funcionan en
`style()`, en los parámetros `color=`/`tint=` de los componentes, en
[`pz.Paint`](https://albakore.github.io/pyzed/es/theming/styles/#gradientes-opacidad-y-máscaras) y en los campos de color del diseñador.

**Piensa en capas:**

De atrás hacia adelante: la **ventana** (`background`), las **superficies** sobre ella (`surface`, `panel`,
`elevated`), los **elementos** sobre ellas (`element`, `ghost_*`) y el **texto y los iconos** encima. Haz cada capa un
poco más clara (temas oscuros) o más oscura (temas claros) que la de atrás.

## Superficies

Las áreas grandes de la ventana, de atrás hacia adelante.

ui.card</code>), estadísticas y otras áreas elevadas.'],
['elevated', 'Lo que flota: menús, popovers, desplegables, tooltips, diálogos, toasts y la paleta de comandos.'],
['editor', 'Donde se escribe: campos de texto, el editor de código, el fondo de la terminal en temas generados.'],
['panel', 'Paneles laterales y docks de un workspace, el panel de ayuda.'],
['title_bar', 'La barra de título propia (<code>ui.title_bar</code>, <code>ui.window_frame</code>).'],
['status_bar', 'La barra de estado al pie de un workspace.'],
['tab_bar', 'La franja detrás de las pestañas.'],
['tab_active', 'La pestaña seleccionada.'],
['tab_inactive', 'Las demás pestañas.'],
['terminal', 'El fondo del widget de terminal.'],
]}
/>

## Bordes

## Elementos y elementos ghost

Los **elementos** son controles rellenos (el `ui.button` por defecto, chips, controles segmentados). Los elementos
**ghost** no tienen fondo hasta que pasas el puntero: filas de listas, botones ghost y de icono, ítems de menú, filas
de árboles.

## Texto, iconos y acento

solid</code>), interruptores, sliders, barras de progreso, casillas.'],
['on_accent', 'Texto e iconos dibujados sobre el acento (dentro de un botón solid o una insignia solid).'],
]}
/>

**Mantén legible on_accent:**

Si cambias `accent` a mano, cambia también `on_accent`, o usa `theme.with_accent(color)`, que elige un `on_accent`
legible (y actualiza anillos de foco, selección y enlaces) por ti.

## Estado

Los usa `tint=` (`ui.badge`, `ui.callout`, `ui.button`, `ui.progress`...), los toasts, los mensajes de validación y
los gráficos.

ui.stat</code>.'],
['info', 'Avisos informativos (el acento, por defecto).'],
['hint', 'Pistas, el aviso más discreto.'],
]}
/>

## Control de versiones

Para árboles de archivos, pestañas y diffs (`ui.tree`, `ui.diff_stat`, el margen del editor de código).

## Editor de código

Para [`pz.code_editor`](https://albakore.github.io/pyzed/es/library/editor/), `ui.terminal` y los bloques de código.

## Sintaxis, terminal y personas

Estos tres son colecciones en lugar de colores sueltos.

- **`syntax`**: un diccionario de un nombre de resaltado a un color, o a `(color, "italic")` / `(color, "bold")`. Los
  nombres principales son `primary`, `comment`, `comment.doc`, `keyword`, `function`, `type`, `string`,
  `string.escape`, `number`, `boolean`, `constant`, `property`, `attribute`, `operator`, `variable`,
  `variable.special`, `punctuation`, `punctuation.bracket`, `tag`, `title` y `link_uri`. Un nombre con punto que
  falta usa su primera parte (`string.escape` → `string`).
- **`ansi`**: los colores de la terminal: `black`, `red`, `green`, `yellow`, `blue`, `magenta`, `cyan`, `white`,
  `bright_black` y `dim`.
- **`players`**: una tupla de colores para avatares y colaboradores; `ui.avatar(index=n)` y `ui.facepile` toman el
  n-ésimo.

def</code>, <code>if</code>, <code>return</code>...'],
['syntax.function', 'Nombres de funciones.'],
['syntax.string', 'Cadenas.'],
['syntax.comment', 'Comentarios.'],
['syntax.type', 'Clases y tipos.'],
['syntax.number', 'Números.'],
['ansi.red', 'Texto rojo en la terminal (y así con cada color ANSI).'],
['players.0', 'El primer color de avatar (el acento, por defecto).'],
]}
/>

## Tamaños y metadatos

| Token | Por defecto | Qué fija |
| --- | --- | --- |
| `radius` | `6.0` | Radio de las esquinas de tarjetas, diálogos y superficies grandes (las tarjetas usan `radius + 2`). |
| `radius_sm` | `4.0` | Radio de botones, campos, chips y filas de listas. |
| `ui_font_size` | `14.0` | El tamaño base del texto de la interfaz; lo fijan el **Tamaño de fuente** de un formulario y el `size` del estilo global. |
| `buffer_font_size` | `14.0` | Tamaño del texto en el editor de código. |
| `name` | | El nombre que usan `pz.themes.get` y `theme = "..."`. |
| `appearance` | | `"dark"` o `"light"`; `theme.is_dark` lo lee. |

## Desde Python

```python
t = pz.themes.get("One Dark")
t.accent                 # '#74ade8'
t.color("text_muted")    # lo mismo que t.text_muted; los colores hex pasan sin cambios
t.tokens()               # todos los tokens como diccionario
t.to_dict()              # apto para JSON, el formato que escribe Theme.save
```

Los nombres siguen el formato de temas del editor Zed, así que los temas hechos para él se pueden importar (mira
[Crear temas](https://albakore.github.io/pyzed/es/theming/custom-themes/#importar-un-tema-de-zed)). La [API de temas](https://albakore.github.io/pyzed/es/reference/theme/)
lista cada método.