v0.4.0 · dark blueprint
@codigosinsiesta/theme
Sistema de diseño V4 compartido entre las presentaciones de Código Sin Siesta. Tokens CSS + chrome global + Tailwind preset + 6 componentes-átomo Svelte + 5 slide-shells canónicos. Mismo stack Astro 5 + Svelte 5 + Tailwind 4 que los decks consumidores — lo que ves aquí funciona idéntico en producción.
Empieza aquí
Instala el theme en tu deck (Astro o Svelte) — basta con la dependencia git URL hasta que se publique en npm:
terminal
$ pnpm add github:CodigoSinSiesta/themeEn tu CSS global:
src/styles/global.css
@import '@codigosinsiesta/theme/all.css';Componentes-átomo (v0.2.0+)
Primitivas reutilizables. Pásales props con el contenido y obtienes el patrón canónico del kit V4.
Eyebrow Barra horizontal 24×2px + texto mono uppercase. Acompaña el header de cada slide. Callout Aside box con kind semántico (info/ok/warn/err). Border-left + icono + título + body. ToolCard Card con accent bar + icon box 42×42 + tag pill + meta strip opcional. TerminalLine Una línea individual de terminal con tipos cmd/out/ok/err/comment. TerminalWindow Caja Mac-style (titlebar + 3 dots) que envuelve TerminalLine. QRCode Placeholder 21×21 determinístico (NO escaneable). Decoración para slides finales.
Slide-shells canónicos (v0.3.0+)
Composiciones completas de slide. Pásales data y obtienes un slide pixel-perfect.
SlideShell Wrapper base con .swiper-slide + 7 bg presets (azul / identidad / verde / cierre / lila / naranja / none) + slot. SlideHero Portada completa: eyebrow + title con highlight + subtitle + intro + tools + author card + 3 orbs. SlideTOC Agenda con chapter cards en grid 2-cols. Estados current/past/future. SlideTerminal Hands-on con TerminalWindow + narración paso a paso lateral + Pro tip Callout. SlideResources Cierre con takeaways grid arriba + links + QR placeholder abajo.