Sistema de Diseño · Plataforma Itrend

Referencia viva de tokens y componentes. Todo lo que ves usa las hojas compartidas reales (tokens.css + main.css + components.css) — no hay estilos inventados aquí. Copia los snippets tal cual.

Cómo llamar al CSS

Fija una versión (un tag) y enlaza el dist/. No necesitas Node ni este toolchain para consumir.

Opción A — un solo bundle

<link rel="stylesheet" href="dist/itrend-ui.css">

Opción B — capas por separado (respeta el orden)

<link rel="stylesheet" href="dist/tokens.css">      <!-- 1. variables -->
<link rel="stylesheet" href="dist/main.css">         <!-- 2. reset + layout -->
<link rel="stylesheet" href="dist/components.css">   <!-- 3. componentes -->

Opción C — npm por tag

npm install git+https://gitlab.com/spotmind/itrend/minecon-ui.git#v0.4.0

Regla de oro: usa siempre var(--color-*), var(--space-*)… nunca hardcodees. Para saber qué versión tienes cargada: lee --itrend-ui-version del CSS (getComputedStyle(document.documentElement).getPropertyValue("--itrend-ui-version")).

Colores semánticos

Nunca hardcodear: usar siempre var(--color-*). Fuente: design/tokens.json.

Dataviz

Paleta oficial de gráficos. Antes cada repo la derivaba con color-mix(); ahora son tokens. Categórica (--color-viz-1..6) para series distintas; secuencial (--color-viz-seq-1..5) para intensidad; más --color-viz-accent y --color-viz-grid.

Escala de espaciado

Tipografía

Radios

Iconos · dist/icons.svg

Sprite SVG (Lucide, ISC, trazo). Tamaño 1em + currentColor con la clase .icon. Uso: <svg class="icon"><use href="dist/icons.svg#pin"></use></svg>. En cada icono: copiar el SVG inline o el <use>, o descargar SVG/PNG.

Botones · main.css

Primario / Secundario

<button class="btn btn-primary">Simular impacto</button>
<button class="btn btn-secondary">Cancelar</button>

Tokens: --color-action · --color-action-hover · --color-action-text · --color-surface-alt

Estados comprometidos

Lo que el kit garantiza hoy. Las demostraciones reusan los mismos tokens del CSS real — puedes interactuar con los botones para verlo en vivo.

✓ definido en el CSS ⚠ aún no definido en el kit — no lo asumas al implementar

Primario · Default✓

fondo --color-action · texto --color-action-text · borde --color-action

Primario · Hover✓

fondo + borde --color-action-hover (transición .15s)

Primario · Focus✓

Anillo de foco por teclado: outline 2px --color-border-focus · outline-offset 2px (:focus-visible).

Primario · Active✓

Se hunde 1px al presionar (:active · translateY(1px)).

Primario · Disabled✓

Global: opacity .5 · cursor: not-allowed (:disabled / [disabled]).

Secundario · Default✓

fondo --color-surface-alt · texto --color-action-ghost-text · borde --color-action-ghost-border

Secundario · Hover✓

fondo --color-surface · borde --color-action.

Badges · main.css

Grandes Pymes

<span class="badge">Grandes</span>
<span class="badge outline">Pymes</span>

Tokens: --color-action · --color-action-text · --color-border · --radius-sm

Categóricos (soft)

Para etiquetar tipo de dato / sector, como en la maqueta de referencia.

Cosecha Impacto Procesamiento

<span class="badge cosecha">Cosecha</span>
<span class="badge impacto">Impacto</span>
<span class="badge proceso">Procesamiento</span>

Tokens: --color-cat-cosecha · --color-cat-impacto · --color-cat-proceso (+ sus -bg)

KPI cards · main.css

Los KPI protagonistas: PAE, pérdida en PB y pérdida en PIB. Siempre en CLP/USD, nunca solo %.

PAE

$4.820M

Pérdida Anual Esperada

Pérdida PB

$12.140M

Producción Bruta

Pérdida PIB

$6.310M

Valor agregado

<div class="kpi-grid">
  <div class="kpi-card">
    <div class="kpi-label">PAE</div>
    <div class="kpi-value">$4.820M</div>
    <div class="kpi-sub">Pérdida Anual Esperada</div>
  </div>
</div>

Tokens: --color-surface · --color-border · --shadow-card · --radius-lg

Campos (select / input) · main.css

Región

Amenaza

<div class="filter-row">
  <div class="field-group">
    <label>Región</label>
    <select><option>Maule</option></select>
  </div>
</div>

Tokens: --color-border · --color-border-focus · --color-surface · --radius-md

Estados comprometidos

Haz clic en un campo para ver el foco real. Las demostraciones reusan los mismos tokens del CSS.

✓ definido en el CSS ⚠ aún no definido en el kit

Default✓

borde --color-border · fondo --color-surface · radio --radius-md

Focus✓

borde --color-border-focus · outline:none

Disabled✓

fondo --color-surface-alt · texto --color-text-disabled · cursor: not-allowed.

Dialog · components.css

Diálogo modal de decisión (primer componente promovido). Para preguntas que deben responderse en el momento. Aquí se muestra estático; quien lo abre maneja foco/Esc.

¿Aplicar medidas de mitigación?

Se recalculará la pérdida anual esperada para el territorio seleccionado.

<div class="dialog-backdrop">
  <div class="dialog">
    <h3 class="dialog__title">¿Aplicar medidas de mitigación?</h3>
    <p class="dialog__desc">Se recalculará la pérdida…</p>
    <div class="dialog__actions">
      <button class="btn btn-secondary">Cancelar</button>
      <button class="btn btn-primary">Aplicar</button>
    </div>
  </div>
</div>

Tokens: --color-scrim · --color-surface · --shadow-card · --radius-lg

Drawer · components.css

Panel lateral (off-canvas) para contenido secundario extenso que acompaña la vista sin taparla — p. ej. la "Caracterización del sector". Entra desde la derecha. Aquí se muestra estático; quien lo abre maneja foco/Esc. Si es una decisión corta que bloquea, usa .dialog en su lugar.

Caracterización del sector

El sector forestal del Maule concentra el 38% de la producción bruta regional…

<div class="drawer-backdrop" hidden>
  <div class="drawer">
    <div class="drawer__head">
      <h3 class="drawer__title">Caracterización del sector</h3>
      <button class="drawer__close" aria-label="Cerrar">×</button>
    </div>
    <div class="drawer__body">…</div>
  </div>
</div>

Tokens: --color-scrim · --color-surface · --color-border · --shadow-card

Card + jerarquía de títulos · main.css

Configuración base

Define el territorio y el alcance del análisis de riesgo.

<div class="card">
  <div class="card-head">
    <div>
      <div class="card-title">Configuración base</div>
      <p class="card-lead">Define el territorio…</p>
    </div>
  </div>
</div>

Jerarquía: .section-title · .card-title · .block-label · .card-lead (ver DESIGN.md §6)

Help text · main.css

La PAE (Pérdida Anual Esperada) integra amenaza, exposición y vulnerabilidad por nivel de intensidad.

<p class="help-text">La PAE integra amenaza, exposición…</p>

⚠ Contraste text-muted sobre surface-alt = 4.22:1 (bajo AA 4.5). Pendiente de diseño.

Tabla de tokens

Relación variable CSS → valor (valores computados reales del :root). Fuente: design/tokens.json.

Variable CSS	Valor	Categoría