slidev-theme-entaina

Tema de marca Entaina para Slidev: look dirigido por tokens (mapeados del design system oficial), chrome de navegación propio y las tres variantes de pilar. Light-only por diseño.

Uso

npm i -D slidev-theme-entaina
# o, mientras no esté publicado en npm:
npm i -D github:Entaina/slidev-theme-entaina

---
theme: slidev-theme-entaina
---

Las fuentes (Lato, Comfortaa, JetBrains Mono, pesos 300–700) llegan como defaults del tema; el deck no necesita bloque fonts:.

Qué incluye

• styles/tokens.css — la paleta Entaina como defaults en :root, más las variantes de pilar: htmlAttrs: { data-theme: technology | innovation | people } en el headmatter del deck.
• styles/base.css — el look, 100% sobre tokens: atmósfera por layout, escala display, kickers .eyebrow/.cover-kicker, cover/section/quote estilizados, splits a sangre con .panel .panel-before/.panel-after, tablas, la portada oscura Full-Bleed (layout: cover + class: bleed) y el reveal de entrada escalonado (respeta prefers-reduced-motion y print). Cuando un src: import reemplaza la clase raíz, un descendiente .bleed-note es el marcador de compatibilidad soportado y activa la misma variante Full-Bleed.
• global-top.vue — chrome de navegación: barra de progreso, bolitas laterales que se expanden al hover o foco mostrando títulos y contador n / total · %. A partir de 50 diapositivas, el rail pasa automáticamente a modo compacto con scroll, manteniendo navegación por teclado, foco y etiquetas accesibles. Se oculta en export y en modo presentador. Anterior/siguiente, teclado, transiciones, overview (o) y export siguen siendo de Slidev (su propia barra de herramientas).
• Componentes (clases sobre HTML plano en las slides):
  • KPI dashboard: <div class="kpi-grid"><div class="kpi"><b>247</b><span>etiqueta</span></div>…</div> — cifras display con rotación de colores de pilar, etiquetas mono; valores hero breves (≤6 caracteres).
  • Código: los bloques fenced van en caja navy de marca con tokens oscuros (setup/shiki.ts, one-dark-pro en ambos esquemas) y soportan el resaltado de líneas de Slidev (```ts {2-3}). Chip de fichero flotante: <div class="code-file">worker.ts</div> justo antes del fence.
  • Kickers semánticos opt-in: .eyebrow.success / .danger / .warning — solo cuando el contenido afirma un estado.

Personalización

El contrato son 27 tokens CSS (ver styles/tokens.css y test/contract.test.mjs). Para otra paleta, redefine los tokens en el style.css del proyecto — las variables cascadan, no hay que tocar el tema:

/* style.css del deck: ejemplo de paleta alternativa */
:root {
  --bg: #ffffff;
  --accent: #2563eb;
  /* …resto del contrato… */
}

Reglas propias del deck: en su style.css, en rem ajustado al lienzo 980×552 de Slidev (nunca vw/vh — el lienzo escala con un transform y las unidades de viewport se escalan doble).

Qué pilar usar

• Technology (default): contenido técnico u operativo — sistemas, código, datos. En caso de duda, este.
• Innovation (data-theme: innovation): lo nuevo — estrategia, propuestas, visión, roadmaps.
• People (data-theme: people): personas en el centro — formación, talento, cultura, onboarding.

Un pilar por deck (los tres colores de pilar siguen disponibles como acentos en todas las variantes), y los colores semánticos (--green/--red/--orange) siguen significando estado, no pilar.

Notas

• Dos internals de Slidev ya resueltos por el CSS: layout: two-cols renderiza la clase .two-columns (slots en .col-left/.col-right) y layout: cover envuelve el contenido en un div.my-auto.
• Las bolitas toman los títulos del primer heading de cada slide; si el heading va dentro de HTML crudo, añade title: al frontmatter de esa slide.
• Export: el reveal de entrada anima al montar; si slidev export captura a medias, añade --wait 1000.

Desarrollo

npm install
npm run dev     # example.md con theme: ./
npm test        # contrato de tokens (node --test, sin dependencias)