Sistema de diseño
El diseño visual de Closegram está construido sobre una configuración compartida de Tailwind (packages/tailwind-config) con un sistema de tokens de variables CSS personalizado y theming de tres modos.
Modos de tema
El ThemeContext admite tres modos:
| Modo | Comportamiento |
|---|---|
light | Siempre claro |
dark | Siempre oscuro |
system | Sigue la preferencia del sistema operativo mediante prefers-color-scheme |
El tema resuelto (light u dark) se aplica alternando la clase en <html>. El modo se persiste en localStorage.
const { theme, mode, setTheme, toggleTheme } = useTheme();
// theme: 'light' | 'dark' (resolved)
// mode: 'light' | 'dark' | 'system'
Propiedades personalizadas de CSS
Definidas en apps/frontend-nextjs/src/app/globals.css y aplicadas globalmente:
| Token | Claro | Oscuro | Uso |
|---|---|---|---|
--color-background | #ffffff | #000000 | Fondo de página |
--color-foreground | #0f1419 | #e7e9ea | Texto del cuerpo |
--color-card | #ffffff | #16181c | Superficies de tarjetas |
--color-card-foreground | #0f1419 | #e7e9ea | Texto sobre tarjetas |
--color-border | #eff3f4 | #2f3336 | Divisores, contornos |
--color-input | #f7f9f9 | #16181c | Fondos de campos de entrada |
--color-muted | #f7f9f9 | #16181c | Fondos sutiles |
--color-muted-foreground | #536471 | #71767b | Texto secundario |
--color-primary | #1d9bf0 | #1d9bf0 | Azul de marca (interactivo) |
Colores de acento de marca
Definidos en packages/tailwind-config/shared-styles.css y extendidos en Tailwind:
| Token | Valor | Uso |
|---|---|---|
--color-blue-1000 | #2a8af6 | Destacados, enlaces |
--color-purple-1000 | #a853ba | Insignia de creador, degradado |
--color-red-1000 | #e92a67 | Reacciones, alertas |
Tokens de tarjeta (Tailwind colors.card)
| Clave | Valor |
|---|---|
card.light | #ffffff |
card.dark | #191c1f |
Color del logo
| Clave | Valor |
|---|---|
logo.light | #26292b |
logo.dark | #FFAA00 |
Tipografía
Pila de fuentes del cuerpo: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif.
Fuente de marca personalizada: BlueVinyl Bold (servida desde /assets/fonts/) — usada en los lockups del logo.
Navegación
La navegación principal (Navigation.tsx) es una barra lateral de íconos que:
- Se colapsa a solo íconos por defecto
- Se expande al pasar el mouse o cuando el menú "Más" está abierto
- Se colapsa a la fuerza si se establece la prop
collapsed - Resalta la ruta activa mediante
usePathname()
Elementos de navegación: Inicio, Buscar, Explorar, Mensajes, Notificaciones, Crear publicación, además de un menú desbordante "Más" con el selector de tema y cierre de sesión.
Rutas de la app
| Ruta | Página |
|---|---|
/home | Feed principal |
/search | Búsqueda |
/messages | Mensajes |
/coins | Monedas y transacciones |
/payments | Pagos |
/profile | Perfil propio |
/[username] | Perfil público |
/p/[postId] | Detalle de publicación |
/settings | Configuración |
/login | Inicio de sesión |
Paquetes compartidos
| Paquete | Propósito |
|---|---|
packages/tailwind-config | Configuración compartida de Tailwind + tokens de diseño |
packages/typescript-config | Bases compartidas de tsconfig.json |
packages/eslint-config | Reglas compartidas de ESLint |
packages/graphql | Única fuente de verdad — esquema GraphQL + operaciones (Web/Admin) |
packages/apollo-web | Cliente TS Apollo generado para frontend-nextjs (auth, ws, subida) |
packages/apollo-admin | Cliente TS Apollo generado para frontend-admin |
packages/apollo-swift | Módulo Swift ClosegramGraphQL generado para apps/ios |