---
name: tokens
kind: component
lang: cpp
domain: core
version: "2.0.0"
purity: pure
signature: "namespace fn_tokens { namespace colors/spacing/radius/font_size { constexpr ... }; void apply_dark_theme(); }"
description: "Design tokens (colors, spacing, radius, font_size) para apps ImGui. Valores exactos de Mantine v9 dark + indigo — identidad unica del registry. Aplicados por defecto via fn::run_app. Ver cpp/DESIGN_SYSTEM.md."
tags: [imgui, theme, tokens, colors, spacing, radius, dark, design-system]
uses_functions: []
uses_types: []
returns: []
returns_optional: false
error_type: ""
imports: [imgui]
tested: false
tests: []
test_file_path: ""
file_path: "cpp/functions/core/tokens.cpp"
framework: imgui
params: []
output: "Tokens constexpr accesibles como fn_tokens::colors::*, spacing::*, radius::*, font_size::*. apply_dark_theme() aplica los tokens al ImGuiStyle global."
---

# tokens

Design tokens para todos los dashboards ImGui del registry. Traducción del DESIGN_SYSTEM.md de `@fn_library` al mundo C++/ImGui: mismos principios (dark-first, paleta semántica, escala consistente de espaciado y radios) pero con `constexpr ImVec4` en lugar de CSS variables.

## Namespaces

| Namespace | Valores |
|-----------|---------|
| `fn_tokens::colors` | `primary` (indigo.6), `primary_hover` (indigo.5), `primary_light` (indigo.4), `primary_active` (indigo.7), `success` (green.6), `warning` (yellow.6), `error` (red.6), `info` (blue.6), `bg` (dark.7), `surface` (dark.6), `surface_hover` (dark.5), `surface_active` (dark.4), `border` (dark.4), `border_strong` (dark.3), `text` (dark.0), `text_muted` (dark.2), `text_dim` (dark.3) |
| `fn_tokens::spacing` | `xs=4`, `sm=8`, `md=12`, `lg=16`, `xl=24` (densificado respecto a CSS Mantine) |
| `fn_tokens::radius` | `none=0`, `xs=2`, `sm=4`, `md=8`, `lg=12`, `xl=16` (md = defaultRadius Mantine) |
| `fn_tokens::font_size` | `xs=10`, `sm=12`, `md=14`, `lg=18`, `xl=24`, `xxl=32` |

## Uso normal: nada, lo aplica el framework

```cpp
#include "app_base.h"
fn::run_app({.title="app", .width=1400, .height=900}, render);
// run_app llama a fn_tokens::apply_dark_theme() una vez. No hace falta mas.
```

## Uso en componentes

```cpp
#include "core/tokens.h"

ImGui::PushStyleColor(ImGuiCol_Text, fn_tokens::colors::text_muted);
ImGui::Dummy(ImVec2(0, fn_tokens::spacing::md));
ImGui::PopStyleColor();
```

## Detalles de `apply_dark_theme()`

- Valores alineados 1:1 con Mantine v9 dark (dark.0-9) + indigo (4-7).
- Aplica ~50 ImGuiCol_*, rounding (Window/Child/Popup/Frame/Grab/Scrollbar/Tab), paddings y bordes.
- Si `ImPlot` esta linkado, tambien estiliza su frame/plot/axis/legend.
- No toca `io.ConfigFlags`, backends, fuentes ni contexto — las capacidades de ImGui (docking, viewports, nav teclado) quedan intactas.
- Idempotente.

## Notas

- **No duplicar** constantes en componentes — importar siempre de aqui. Si detectas un `ImVec4(...)` hardcoded en el registry, es candidato a migrar.
- Para temas alternativos (dev/debug) usar `fn::AppConfig::theme = fn::ThemeMode::ImGuiDark`.
- Compatible con `plot_theme_cpp_core` — `apply_dark_theme` ya setea los `ImPlotCol_*` base.