Sistema de diseño centralizado para el ecosistema de aplicaciones Gaia. Construido sobre Material UI v7+, este paquete provee una integración "Plug & Play" con tokens de diseño, tipografía fluida, paletas de colores extendidas y utilidades de animación.
- React >= 17
- @mui/material >= 6.0.0
- @emotion/react
- @emotion/styled
Este paquete se distribuye a través de Git y se consume desde la versión compilada (dist). Debido a cómo NPM gestiona la caché de dependencias Git, es importante usar el siguiente comando específico.
Para instalar el paquete por primera vez o para traer los últimos cambios (ignorando la caché local), ejecuta:
npm install git+https://github.com/ceicol/Gaia_Theme.git#build --forceNota: El flag
--forcees necesario para asegurar que NPM descargue la última versión del código compilado, ya que a veces NPM no detecta cambios en repositorios Git si la versión delpackage.jsonno ha cambiado.
El sistema depende de las librerías base de MUI. Asegúrate de tenerlas:
npm install @mui/material @emotion/react @emotion/styled El sistema Gaia no instala fuentes por NPM.
Las tipografías se cargan vía Google Fonts para garantizar consistencia visual entre proyectos.
Debes incluir el siguiente bloque en el <head> de tu index.html:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">📌 Sin este paso, el theme no se verá correctamente.
En tu archivo principal (main.tsx o App.tsx), envuelve tu aplicación con el ThemeProvider y CssBaseline.
import React from 'react';
import { ThemeProvider, CssBaseline } from '@mui/material';
import { AppTheme } from 'theme-gaia';
const App = () => {
return (
<ThemeProvider theme={AppTheme}>
<CssBaseline />
<TuAplicacion />
</ThemeProvider>
);
};Los colores son accesibles vía color="..." en componentes o palette.nombre en sx.
| Nombre Semántico | Token Figma | Propiedades Extra |
|---|---|---|
tertiary |
tertiary | .main, .light, .glass |
secondary |
secondary | .main, .light, .glass |
primary |
primary | .main, .light, .glass |
cta |
cta | .main, .light |
green |
green | .main, .light, .glass, .button |
brown |
brown | .main, .light, .glass |
link |
link | .main |
textPrimary |
text | .primary |
textSecondary |
text | .secondary |
Ejemplo de uso:
<Button variant="contained" color="tertiary">Botón Jaguares</Button>
<Box sx={{ bgcolor: 'green.glass', color: 'green.button' }}>Contenido</Box>Usamos Fluid Typography (clamp). El tamaño se ajusta automáticamente entre Móvil y Desktop.
Fuente Títulos: Barlow Condensed | Fuente Cuerpo: Raleway.
| Variante | Descripción |
|---|---|
h1xxlBold |
64px Bold |
h1xlBold |
52px Bold |
h1lgBold |
40px Bold |
h1Bold |
36px Bold |
h2xxlSemibold |
32px Semibold |
h2xxlMedium |
32px Medium |
h2lgMedium |
28px Medium |
h2Bold |
28px Bold |
h3xxlSemibold |
28px Semibold |
h3xlRegular |
24px Regular |
h3xlSemibold |
24px Semibold |
h3xlMedium |
24px Medium |
h3lgSemibold |
20px Semibold |
h3Medium |
18px Medium |
| Variante | Descripción |
|---|---|
bodyxxlRegular |
24px Regular |
bodyxxlRegularSpacing |
24px Regular (+ LineHeight) |
bodyxxlSemiboldSpacing |
24px Semibold (+ LineHeight) |
bodyxlBoldSpacing |
18px Bold (+ LineHeight) |
bodyxlBold |
18px Bold |
bodyxlMedium |
18px Medium |
bodyxlMediumSpacing |
18px Medium (+ LineHeight) |
bodyxlRegular |
18px Regular |
bodylgMedium |
16px Medium |
bodylgRegular |
16px Regular |
bodyRegular |
14px Regular |
bodyRegularSpacing |
14px Regular (+ Spacing) |
bodyMedium |
14px Medium |
Ejemplo de uso:
<Typography variant="h1xxlBold">Título Principal</Typography>
<Typography variant="bodyxxlRegularSpacing">Texto destacado</Typography>Importa las constantes para mantener la consistencia. Los valores son fijos en píxeles.
Espaciado (spacingConstants):
min: 8pxsm: 12pxbase: 16pxmd: 24pxlg: 48pxxl: 96pxxxl: 198px
Bordes (borderRadius):
sm: 6pxmd: 12px (Default)lg: 24pxpill: 9999px
Ejemplo de uso:
import { spacingConstants, borderRadius } from 'theme-gaia';
<Box sx={{
p: spacingConstants.lg, // Padding 48px
gap: spacingConstants.sm, // Gap 12px
borderRadius: borderRadius.lg // Radio 24px
}}>Sombras (shadows):
sm: Sombra pequeña.md: Sombra mediana.lg: Sombra larga (elevación alta).
Glassmorphism (glassEffect):
Objeto helper que aplica background semi-transparente, blur y borde.
Ejemplo de uso:
import { glassEffect, shadows } from 'theme-gaia';
<Box sx={{
...glassEffect, // Aplica el efecto de vidrio
boxShadow: shadows.md, // Aplica sombra mediana
}}>Transiciones sincronizadas con las curvas de Figma.
transitionStyles.smooth: 800ms (Smart Animate). Ideal para hovers suaves o cambios de tamaño grandes.transitionStyles.bounce: 600ms (BackOut). Ideal para botones, modales o elementos que "rebotan" al aparecer.
Ejemplo de uso:
import { transitionStyles } from 'theme-gaia';
<Button sx={{
transition: transitionStyles.bounce,
'&:hover': { transform: 'scale(1.05)' }
}}>
Botón con Rebote
</Button>El tema incluye 4 variantes de botones prediseñadas para casos de uso específicos (Iconos y CTAs).
| Variante | Uso | Apariencia |
|---|---|---|
gaia-icon-glass |
Iconos de acción | Circular, fondo claro. Active: Efecto Glass + Borde Primary. |
gaia-icon-outline |
Iconos secundarios | Circular, borde Primary. Active: Fondo sólido, texto claro. |
gaia-cta-contained |
Acción Principal | Rectangular, fondo Gold. Active: Sombra interna (Inset). |
gaia-cta-outlined |
Acción Secundaria | Rectangular, borde Gold. Active: Fondo claro + Borde. |
Ejemplo de uso:
// Botón Circular con Icono (Glass)
<Tooltip title="Descargar">
<Button variant="gaia-icon-glass">
<DownloadIcon />
</Button>
</Tooltip>
// Botón de Llamada a la Acción (CTA)
<Button variant="gaia-cta-contained">
Comenzar Ahora
</Button>Botones circulares especializados para la navegación o selección de regiones en mapas. Tienen un fondo con gradiente radial, un estado activo sólido y una etiqueta flotante (tooltip) integrada que aparece suavemente al hacer hover.
| Variante | Tema de Color | Estado Active |
|---|---|---|
gaia-panamazonia |
Gradiente Verde Claro | Borde + Fondo green.light |
gaia-amazonia |
Gradiente Primary (Oscuro) | Borde primary.main + Fondo primary.light |
gaia-macroterritorio |
Gradiente Dorado (CTA) | Borde cta.main + Fondo cta.light |
Estos botones requieren la propiedad data-label para generar la etiqueta de texto flotante.
Características automáticas:
- Iconos: Cualquier SVG o Icono dentro del botón se pintará automáticamente de color claro (text.light).
- Etiqueta: El texto en
data-labelse auto-balancea (text-wrap: balance) para evitar palabras huérfanas y crece hacia la derecha sin desplazar el botón.
import { Button } from '@mui/material';
import { PanamazoniaIcon, JaguarIcon } from './icons'; // Tus iconos
// 1. Panamazonia
<Button
variant="gaia-panamazonia"
data-label="Panamazonia"
>
<PanamazoniaIcon />
</Button>
// 2. Amazonia (Con texto largo)
<Button
variant="gaia-amazonia"
data-label="Amazonia colombiana"
>
<AmazoniaIcon />
</Button>
// 3. Macroterritorio
<Button
variant="gaia-macroterritorio"
data-label="Macroterritorio Jaguares de Yuruparí"
>
<JaguarIcon />
</Button>Los cambios no se reflejan:
Ejecuta de nuevo el comando de instalación con --force para limpiar la caché de Git en tu proyecto.
npm install git+https://github.com/ceicol/Gaia_Theme.git#build --force