Temas y branding

Visión general

cmssy es headless - tu aplicación Next.js posee todo el estilo visual (colores, tipografía, modo oscuro) como Tailwind/CSS estándar en tu propio repositorio. cmssy no controla el aspecto de tu sitio. Lo que cmssy guarda por workspace es el branding: un nombre de marca y unos pocos assets compartidos que tú obtienes y aplicas. La referencia de estilos más abajo es para ese CSS, que es tuyo - consulta Funciones avanzadas de bloques para la configuración de Tailwind v4.

Branding

El branding vive en la config de sitio del workspace. Obténlo con fetchSiteConfig de @cmssy/react:

import { fetchSiteConfig } from "@cmssy/react";
import { cmssy } from "@/cmssy.config";

const { branding } = await fetchSiteConfig(cmssy);
// { brandName, logoUrl, faviconUrl, ogImageUrl } | null

Todos los campos son anulables - renderiza solo lo que esté definido. buildCmssyMetadata ya aplica el branding para SEO: brandName como título de respaldo y ogImageUrl como imagen Open Graph / Twitter por defecto. El favicon y el logo los aplicas tú:

import { fetchSiteConfig } from "@cmssy/react";
import { cmssy } from "@/cmssy.config";

export async function generateMetadata() {
  const { branding } = await fetchSiteConfig(cmssy);
  return branding?.faviconUrl ? { icons: { icon: branding.faviconUrl } } : {};
}

Sistema de colores

Un sitio cmssy típico usa valores de color OKLCH definidos como variables CSS en tu aplicación, divididos en tokens semánticos que se adaptan a los modos claro y oscuro:

• --background / --foreground — fondo de página y texto
• --primary / --primary-foreground — botones de acción principales
• --muted / --muted-foreground — fondos sutiles y texto auxiliar
• --card / --card-foreground — superficies de tarjetas
• --border — color de borde por defecto
• --destructive — estados de error y peligro

Personalizar colores

Edita el bloque :root en styles/main.css para cambiar tu paleta de colores. Usa valores OKLCH para la uniformidad perceptual:

Modo oscuro

El modo oscuro se controla con la clase .dark en el elemento raíz. Sobrescribe las mismas variables en el selector .dark:

Tailwind CSS v4

El proyecto usa Tailwind CSS v4 con configuración CSS-first. Diferencias clave respecto a v3:

• No hay tailwind.config.js — todo vive en el CSS
• @theme inline mapea variables CSS a utilidades de Tailwind
• Las directivas @source le dicen a Tailwind qué archivos escanear en busca de nombres de clase
• Las clases de degradado usan bg-linear-to-r en lugar de bg-gradient-to-r
• Escala de sombras desplazada: shadow-sm en v4 = el antiguo shadow a secas

Border Radius

El border radius usa una variable base --radius. Todos los tokens de radio se derivan de ella:

• rounded-sm = calc(var(--radius) - 4px)
• rounded-md = calc(var(--radius) - 2px)
• rounded-lg = var(--radius) (10px por defecto)
• rounded-xl = calc(var(--radius) + 4px)