egutierrez
e39445dd55
Trasladar principios del DESIGN_SYSTEM.md de @fn_library (Mantine/React)
al mundo C++/ImGui sin añadir deps externas:
cpp/functions/core/
tokens — colors/spacing/radius/font_size como constexpr +
apply_dark_theme() al ImGuiStyle global. Dark + indigo
primary (Mantine-inspired).
badge — etiqueta inline 6 variantes (Default/Success/Warning/
Error/Info/Outline). <Badge> de @fn_library en C++.
empty_state — placeholder centrado para tablas/listas vacías.
page_header — header con title + subtitle + separator + hueco
para acciones (patrón begin/end).
Scope limitado (KISS) a fases 1-2 del plan: tokens + 3 primitivos.
No se duplica dashboard_panel con un "card" — el existente ya cumple
el rol. Fases 3-5 (charts ImPlot line/area, app_shell con navbar,
toast/alert) quedan fuera hasta que el dashboard crezca en alcance.
Resultado:
- 869 funciones (+4) en registry.db.
- Dashboard con header homogéneo y empty states en todas las tablas.
- Sin hardcode de ImVec4 disperso en views.cpp.
Diary + CHANGELOG actualizados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2.5 KiB
2.5 KiB
name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, tested, tests, test_file_path, file_path, framework, params, output
| name | kind | lang | domain | version | purity | signature | description | tags | uses_functions | uses_types | returns | returns_optional | error_type | imports | tested | tests | test_file_path | file_path | framework | params | output | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| tokens | component | cpp | core | 1.0.0 | pure | namespace fn_tokens { namespace colors/spacing/radius/font_size { constexpr ... }; void apply_dark_theme(); } | 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. |
|
false |
|
false | cpp/functions/core/tokens.cpp | imgui | 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
#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_cardpara deltas, y gráficos de estado. - No duplicar estas constantes en componentes — siempre importar de aquí. Si se detecta un
ImVec4hardcodeado 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.