# Solar

> Sistema de diseño de la Cámara de Comercio de Santiago (CCS): componentes en HTML y Tailwind CSS, con tokens propios (ccs-*). Versión 0.4.0.

Cada componente tiene una versión en Markdown con su HTML exacto. Usa ese HTML tal cual.

## Reglas

- Usa solo los componentes y los tokens de Solar (ccs-*, definidos en ccs-tailwind-config.js). No uses colores, tamaños ni espaciados fijos.
- Si Solar no tiene un componente, dilo. No lo inventes ni crees una variante parecida.
- Fondo blanco (#FFFFFF). Las superficies se separan con bordes del token ccs-line, no con rellenos de color. Campos, selectores, casillas, radios e interruptores apagados usan ccs-line-strong (en oscuro, ccs-dark-line-strong). El fondo en hover de botones neutros usa ccs-hover.
- Tipografía: Work Sans para texto y JetBrains Mono para código. No uses otras.
- Tamaños de texto: títulos y párrafos de contenido con los estilos de Solar (text-ccs-h1-hero, text-ccs-h1, text-ccs-h2, text-ccs-h3, text-ccs-body-xl, text-ccs-body-l, text-ccs-body, text-ccs-caption; el H1 Hero va como text-ccs-h1-hero-sm lg:text-ccs-h1-hero; text-ccs-display es solo para el título de la portada), que ya traen tamaño, interlineado y peso: no les sumes font-* ni leading-*. Texto de interfaz (botones, campos, menús, tablas) con text-xs, text-sm o text-base de Tailwind. Nunca valores entre corchetes como text-[14px].
- Espacios y pesos con la escala de Tailwind (h-10, px-4, gap-2, font-medium). Solar crea un token solo si Tailwind no tiene el valor o si es una decisión de marca; criterio en https://utiliza.me/solar/documentacion.html#por-que-tailwind.
- Radio: rounded-ccs. Sombras: shadow-ccs o shadow-ccs-sm.
- Nada de gradientes genéricos: solo bg-ccs-banner y bg-ccs-icon.
- Accesibilidad: WCAG 2.2 nivel AA, salvo el contraste, que se mide con APCA-W3 0.1.9 (librería apca-w3), usando el valor Lc absoluto.
- Mínimos de contraste: Lc 75 texto de lectura (párrafos, descripciones, links dentro de un texto); 60 otros textos (botones, etiquetas, links sueltos); 45 texto grande (24px en negrita o 36px) e íconos de línea; 30 textos auxiliares (placeholder, deshabilitado, números en gráficos), íconos sólidos y bordes de campos; 15 líneas y divisores.
- Sobre un color, el texto va en blanco si alcanza el mínimo. Si no, usa el de mayor contraste o agranda el texto.
- Estados: usa los tokens de éxito, advertencia y error, nunca la paleta de Tailwind (rose, amber, green…). En claro: ccs-{estado} (texto), ccs-{estado}-fill y -fill-hover (relleno con texto blanco), ccs-{estado}-soft y -soft-hover (fondo suave) y ccs-{estado}-line (borde). Éxito y error tienen además ccs-{estado}-hover, el texto sobre -soft-hover. En oscuro: ccs-dark-{estado} (texto), ccs-dark-{estado}-fill y -fill-hover; fondo suave ccs-dark-{estado}-fill/10 (hover /20) y borde ccs-dark-{estado}/35. {estado} = success, warning o error.
- No cambies colores que APCA aprueba porque una herramienta de WCAG 2 (Lighthouse, axe) los marque como error de contraste.
- Modo oscuro: agrega variantes dark: con los tokens de la paleta oscura (las clases de cada color, en claro y en oscuro, están en https://utiliza.me/solar/component.html#color). Se activa con la clase .dark en <html>.
- Íconos: Solar Icons (Iconify, prefijo solar:). Dos familias. De interfaz (junto a un texto, 12 a 24 px): Bold hasta 16 px; Bold u Outline desde 20 px, una sola por pantalla. De contenido (cards, banners, estados vacíos, 32 px o más): Bold duotone, Line duotone, Bold u Outline. Los duotone nunca junto a texto ni en tamaños chicos. No uses Linear ni Broken.
- Íconos: tamaños 12, 14, 16, 20, 24, 32 y 48 px, sin tamaños intermedios. Heredan el color del texto (currentColor). En claro y en oscuro va la misma variante y solo cambia el color, con el token y su dark: (sin blanco puro). Lc mínimo 45 en íconos de línea y 30 en sólidos.
- Íconos: decorativo con aria-hidden="true"; botón solo ícono con aria-label y área de 40 px o más, solo para acciones muy conocidas (buscar, cerrar, menú, editar); informativo con role="img" y aria-label. Éxito, advertencia y error siempre con texto, no solo color.
- Íconos: si Solar Icons no tiene el ícono, usa Phosphor (ph:), Hugeicons, MingCute o Myna UI, con trazo y esquinas parecidos y una variante rellena para tamaños chicos. No mezcles familias en un mismo conjunto. Solar Icons es CC BY 4.0 de 480 Design: pide atribución.
- Textos en español de Chile, con tuteo y sin tecnicismos; primero qué pasó y luego qué hacer; botones con verbo y objeto. Detalle en https://utiliza.me/solar/documentacion.html#voz-y-tono.
- Antes de construir, pregunta por el problema, el usuario y el objetivo.

## Instalación

- [Instalación](https://utiliza.me/solar/instalacion.html): cómo cargar Tailwind, las fuentes y el CSS de Solar.
- [Tokens](https://utiliza.me/solar/assets/js/ccs-tailwind-config.js): colores, sombras, radios y tipografía.
- Tailwind por CDN es solo para prototipos. Para producción, usa un build precompilado de Tailwind.

## Componentes: Base

- [Color](https://utiliza.me/solar/components/color.md): Clases de color por función, en claro y en oscuro.
- [Textos y tipografías](https://utiliza.me/solar/components/tipografia.md): Escala tipográfica Work Sans, JetBrains Mono para datos técnicos y espacio entre párrafos y listas.
- [Iconografía](https://utiliza.me/solar/components/iconos.md): Cuándo y cómo usar Solar Icons: familias, tamaños, color, accesibilidad y catálogo.
- [Forma y sombra](https://utiliza.me/solar/components/radius.md): Radios y sombras institucionales.

## Componentes: Acción

- [Botones](https://utiliza.me/solar/components/botones.md): Primarios, secundarios, acentos, tamaños, solo ícono, estados, soft, link, block y con ceja.
- [Tags & Badges](https://utiliza.me/solar/components/badges.md): Etiquetas para categorizar contenido, estados y filtros: sólidas, suaves, con contorno, punteadas, con ícono, vacías y dentro de textos y botones.

## Componentes: Navegación

- [Barra de navegación](https://utiliza.me/solar/components/menus.md): Menú principal y subnav.
- [Breadcrumb](https://utiliza.me/solar/components/breadcrumb.md): Ruta jerárquica de navegación.
- [Tabs](https://utiliza.me/solar/components/tabs.md): Pestañas estándar y tipo pill.
- [Paginación](https://utiliza.me/solar/components/paginacion.md): Navegación entre páginas de resultados.
- [Sidebar](https://utiliza.me/solar/components/sidebar.md): Navegación lateral para apps, portales y dashboards.

## Componentes: Contenido

- [Cards](https://utiliza.me/solar/components/cards.md): Categoría, noticias/eventos, estadísticas y especializadas.
- [Listas](https://utiliza.me/solar/components/listas.md): Bulleted, numeradas, con check y de definición.
- [Tablas](https://utiliza.me/solar/components/tablas.md): Tabla con toolbar, estados y paginación.
- [Banners](https://utiliza.me/solar/components/banners.md): Campañas, inscripciones y comunicaciones.

## Componentes: Formularios

- [Inputs & controles](https://utiliza.me/solar/components/formularios.md): Inputs, select, error, textarea, checkbox, radio, toggle y file.

## Componentes: Feedback

- [Alertas](https://utiliza.me/solar/components/alertas.md): Avisos de información, éxito, advertencia y error: estados, estilos, íconos y accesibilidad.
- [Modal & Toast](https://utiliza.me/solar/components/modal.md): Diálogos modales y notificaciones efímeras.
- [Tooltip](https://utiliza.me/solar/components/tooltip.md): Texto corto que aparece al pasar el cursor o enfocar un elemento.
- [FAQ / Acordeón](https://utiliza.me/solar/components/faq.md): Preguntas frecuentes con expansión progresiva.

## Componentes: Estado & Progreso

- [Barras de progreso](https://utiliza.me/solar/components/progreso.md): Lineal, indeterminada, radial y segmentada.
- [Stepper](https://utiliza.me/solar/components/stepper.md): Procesos por etapas: horizontal, pill y vertical.
- [Loading](https://utiliza.me/solar/components/loading.md): Spinners, botones loading y overlays.
- [Skeletons](https://utiliza.me/solar/components/skeleton.md): Placeholders animados para contenido en carga.

## Componentes: Estructura

- [Header](https://utiliza.me/solar/components/header.md): Encabezado sticky con navegación y búsqueda.
- [Footer](https://utiliza.me/solar/components/footer.md): Pie de página institucional con contacto y enlaces.

## Optional

- [Cómo trabajar](https://utiliza.me/solar/documentacion.html#como-trabajar): rutas para crear o mejorar algo, reglas y prompts de revisión con IA
- [Documentación](https://utiliza.me/solar/documentacion.html): qué es Solar y fundamentos