---
name: tokens
kind: component
lang: cpp
domain: core
version: "1.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 dashboards ImGui. Inspirados en @fn_library (Mantine v9) — dark theme con indigo primary. Reemplaza hardcode de ImVec4(...) por constantes semánticas."
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`, `primary_hover`, `success`, `warning`, `error`, `info`, `bg`, `surface`, `surface_hover`, `text`, `text_muted`, `text_dim`, `border` |
| `fn_tokens::spacing` | `xs=4`, `sm=8`, `md=12`, `lg=16`, `xl=24` (px) |
| `fn_tokens::radius` | `none=0`, `sm=3`, `md=5`, `lg=8`, `xl=12` (px) |
| `fn_tokens::font_size` | `xs=10`, `sm=12`, `md=14`, `lg=18`, `xl=24`, `xxl=32` (px) |

## Uso

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

// Al arrancar la app (una vez, después de ImGui::CreateContext)
fn_tokens::apply_dark_theme();

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

## Notas

- **Dark by default** como en el DESIGN_SYSTEM (§2, §8). Si algún día queremos light, se añade `apply_light_theme()`.
- Los valores semánticos (success/warning/error/info) se usan en `badge`, `kpi_card` para deltas, y gráficos de estado.
- **No duplicar** estas constantes en componentes — siempre importar de aquí. Si se detecta un `ImVec4` hardcodeado en un componente del registry es candidato a migrar.
- Compatible con `plot_theme_cpp_core` (para ImPlot charts) — los colors del palette se pueden derivar de estos tokens si se quiere coherencia total.