Neutralidad del Sistema de Estilos

Solidiom no toma partido en el debate CSS-vs-Tailwind-vs-utilidades. Soporta los tres con igual fidelidad a través del sistema de recetas.

#El Problema

La mayoría de las bibliotecas de componentes fuerzan una elección de estilizado:

• Las bibliotecas de Tailwind requieren Tailwind
• Las bibliotecas CSS-in-JS requieren un runtime
• Las bibliotecas headless no te dan nada — estilizas todo desde cero

Los equipos cambian de opinión. Los proyectos tienen restricciones. Una biblioteca no debería ser la restricción.

#La Arquitectura de Recetas

Solidiom separa el comportamiento del estilizado a nivel de arquitectura:

Primitive (behavior) → Recipe (styling) → Component (composed)

• Los primitivos usan atributos de datos semánticos (data-state, data-disabled, data-expanded)
• Las recetas apuntan a esos atributos con reglas de estilo
• Los componentes componen primitivos + recetas en unidades instalables

Se incluyen tres perfiles de receta:

#Cómo Se Aplica la Paridad

La auditoría de paridad de recetas (pnpm run audit:recipe-parity) asegura:

1. Los tres perfiles cubren los mismos slots de primitivo
2. Los tres perfiles manejan los mismos estados (hover, foco, disabled, loading, error)
3. La salida visual es equivalente entre perfiles (verificado por comparación de computed-style)
4. Ningún perfil tiene funciones que los otros carezcan

Esto significa que cambiar de Tailwind a CSS puro es un cambio de configuración, no una reescritura.

#Elegir un Perfil

Establece tu perfil una vez en .solidiom/config.json:

{
  "stylingProfile": "tailwind"
}

O por comando:

solidiom add button --styling css

#La Capa de Temas

Los temas son agnósticos al perfil. Los mismos valores de tokens --ui-* pueden ser consumidos por las recetas CSS, Tailwind y UnoCSS. El paquete @solidiom/themes entrega puntos de entrada CSS y Tailwind para cinco temas: Solidiom Default, Ocean, Forest, Slate y Aurora.

/* El espacio de nombres compartido por las recetas */
:root {
  --ui-primary: oklch(0.6 0.2 250);
}

## Extender Recetas

Las recetas tienen propiedad del codigo fuente. Para personalizar:

1. Instala en modo fuente: `solidiom add button --mode source`
2. Modifica directamente los archivos de código fuente materializados
3. El estilizado permanece conectado a los atributos de datos de la primitiva

Nunca estás atrapado en nuestras decisiones de diseño. La receta es un punto de partida, no una jaula.

## Optimización en Tiempo de Compilación

La Fase 3A introduce transformaciones opcionales en tiempo de compilación:

- **Extracción de recetas** — mueve los estilos de receta a CSS estático en tiempo de build
- **Eliminación de partes muertas** — elimina slots de componente no utilizados del bundle
- **Expansión de variantes** — pre-calcula combinaciones de variantes

Estas optimizaciones funcionan de manera idéntica en los tres perfiles porque operan sobre el contrato de atributos de datos, no sobre detalles de implementación de estilizado.