Styling & Motion

Política de stack visual

No se usan Tailwind, GSAP ni otros frameworks de UI. Los componentes Chroma siguen usando cva/cx del motor WASM con presets de Chroma-Style.

Chroma-Style

Declarado en chroma.json:

"plugins": ["chroma-fs", "chroma-t2t", "chroma-style"]

plugins/loader.js inyecta tokens.css y utilities.css vía injectStyles(). Los estilos de app se cargan con <link rel="stylesheet"> en index.html (el servidor Chroma sirve .css como text/css, no como módulos ES):

<link rel="stylesheet" href="./plugins/chroma-style/tokens.css" />
<link rel="stylesheet" href="./plugins/chroma-style/utilities.css" />
<link rel="stylesheet" href="./src/styles/theme.css" />
<link rel="stylesheet" href="./src/styles/layout.css" />
<link rel="stylesheet" href="./src/styles/finance.css" />

En src/main.js:

import { cva, cx } from "../pkg/chroma.js";
import { loadPlugins } from "../plugins/loader.js";

const plugins = await loadPlugins();
globalThis.__chromaStyle = plugins.style.bootstrapStyle({ cva, cx });

Paleta de marca (TargApps)

src/styles/theme.css define los mismos tokens que plugins/chroma-style/tokens.css para evitar flash sin estilo. Variables canónicas --cs-* (hex); alias semánticos (--background, --primary, …) alimentan utilidades y componentes.

Tipografía (Grift)

--font-sans es Grift Variable, autoalojada en fonts/Grift Variable-VF.ttf. El @font-face vive en src/styles/theme.css (pesos 100–900). Display y cuerpo usan la misma familia con pesos distintos: titular de auth a 750, labels a 550, texto a 400.

Tema: data-theme="light|dark" en <html> o preferencia del sistema (logic/theme.js). Versión del plugin: 0.1.2.

Presets disponibles: presets.button, presets.card, presets.badge, presets.input.

Clases para Anime.js

Chroma-Style expone selectores explícitos (válidos para querySelector):

Utilidades atómicas (bg-card, text-sm, rounded-lg, …) siguen disponibles. Ver Chroma-Style.

Anime.js

CDN en index.html:

<script src="https://unpkg.com/animejs@4.5.0/dist/bundles/anime.umd.min.js"></script>

Helpers en src/animations.js — importar desde páginas o el shell cuando haga falta re-animar tras cambio de ruta:

import { initAnimations, refreshAnimations, animateCards, pressButton, CS_SELECTORS } from "./animations.js";

Respeta prefers-reduced-motion: reduce.

ECharts

CDN en index.html:

<script src="https://cdn.jsdelivr.net/npm/echarts@6.1.0/dist/echarts.min.js" integrity="sha256-tmslrrTfhOMxmdwhaUAU0zbSIsvZ3rDlp8FL1qoND9A=" crossorigin="anonymous"></script>

En componentes de gráficos (TAF-013+), usar globalThis.echarts — p. ej. echarts.init(dom) con option de bar, line o pie. Colores desde tokens CSS vía getChartTheme() en chartStyles.js. No añadir npm deps de gráficos ni React.

CSS de app

index.html enlaza, en orden: theme.css (tokens de marca), layout.css (shell y layout), finance.css (componentes y charts). Tokens canónicos también en plugins/chroma-style/tokens.css (data-theme="dark"). No usar import "*.css" en JS — Chroma dev no los sirve como módulos ES.

Tokens compartidos (redesign foundation)

Definidos en finance.css (:root) para shell y páginas:

Clases base reutilizables:

Iconos Lucide (UMD + data-lucide)

Lucide se carga como script UMD en index.html (sin lucide-react ni dependencia npm):

<script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.js"></script>

src/icons.js renderiza placeholders <i data-lucide="icon-name"> dentro de un wrapper .taf-icon con tamaño en px. Tras cada actualización del DOM, refreshLucideIcons() llama a globalThis.lucide.createIcons().

import { Icon, IconSizes, refreshLucideIcons } from "./src/icons.js";

e(Icon, { name: "settings", size: IconSizes.md })   // 20px
e(Icon, { name: "sun", size: 16 })
e(Icon, { name: "arrowLeftRight", size: 14 })         // alias → arrow-left-right

Hook de re-render: AppShell en src/App.js ejecuta refreshLucideIcons() en useLayoutEffect (cada ciclo de render). src/main.js también lo llama tras el render inicial.

Nombres en kebab-case (layout-dashboard, chart-column) o camelCase con alias (pieChart → chart-pie, barChart3 → chart-column, building2 → building-2). Catálogo completo en lucide.dev/icons.

ThemeToggle y páginas usan Icon / LucideIcon — no emojis en el chrome compartido. NavBar es solo texto.

Formularios (FormField)

Controles nativos usan clases en finance.css (no utilidades sueltas):

inputClass(invalid, variant) en src/components/FormField.js compone clases para texto/textarea (variant: text | textarea). Los desplegables usan <Select> (src/components/Select.js) o FormField con variant="select". Las fechas usan <DatePicker> (src/components/DatePicker.js) o FormField con variant="date" — ver DatePicker.

Select custom (Select.js)

Reemplaza <select> nativo en toda la app. API:

Comportamiento: teclado (↑/↓, Enter, Escape, Home/End, typeahead), click fuera para cerrar, animación open/close vía animateSelectOpen / animateSelectClose en src/animations.js. El menú se ancla con CSS (top: calc(100% + 2px), left: -2px) al wrapper .taf-select para alinear bordes con el trigger; Select.js solo ajusta max-height y voltea arriba (.taf-select-menu--above) si no hay espacio en viewport. Al abrir, .taf-form-field / .taf-filter-field / .settings-form-row que contienen el select suben a z-index: 1300 para que el listbox no quede tapado por campos o acciones posteriores en el formulario. ARIA: role="listbox" / role="option", aria-expanded, aria-labelledby.

Estados hover/focus usan --cs-border y anillo --cs-primary.

Iconos Lucide (LucideIcon.js)

Re-export de Icon desde src/icons.js. Misma API UMD + data-lucide:

import { LucideIcon } from "../src/components/LucideIcon.js";
e(LucideIcon, { name: "plus", size: 16 })

Catálogo usado en transacciones/recurrentes: filter, search, pencil, arrowLeftRight, repeat, pause, play, trash2, x, etc.

Páginas Transacciones y Recurrentes

Convención para agentes

1. Componer UI con utilidades Chroma-Style + presets cva.
2. Añadir .cs-card / .cs-btn-* cuando el elemento deba animarse.
3. Marcar entradas con data-animate en lugar de estilos inline iniciales.
4. Gráficos solo vía ECharts UMD; animaciones solo vía Anime.js.