Excelsior
Resumen
Excelsior es el design system React de Accentio Studios, sobre Base UI con theming por tokens en Tailwind 4. Nació dentro del sitio de Accentio Studios y pasó a ser una librería propia: 56 componentes entre átomos, moléculas, organismos y plantillas, una subruta por componente para que los React Server Components no entren a los bundles del cliente, un pipeline de tokens compartido con Flutter y una capa de accesibilidad que verifican las pruebas. Accentio Payments construye todo su panel de staff sobre él.
Puntos clave
Una subruta por componente60 subrutas de componentes, desde 7 al inicio de la librería
Exporté cada componente en su propia subruta y marqué como externas las importaciones entre componentes en el build, así ningún server component cae en un chunk de cliente; lo verifican una guarda y una prueba de render en servidor.
Tokens DTCG para dos plataformas420 tokens; 67 tokens semánticos por tema
Escribí los design tokens en JSON DTCG y los compilé con Style Dictionary a variables CSS y a un tokens.json que leen las apps Flutter, con snapshots golden y un chequeo del namespace de Tailwind.
Accesibilidad verificada por tests287 pares de contraste, verificados en los dos temas
Medí cada par de colores que pinta un componente sobre las capas translúcidas compuestas en su superficie real, en los dos temas, contra WCAG 2.1 (4,5:1 para texto, 3:1 para UI), y probé los anillos de foco.
Suite de pruebas y referencia142 archivos de Vitest con cerca de 2.170 casos de prueba y 20 specs de Playwright
Cubrí la librería con Vitest y Playwright e incluí 62 páginas de referencia dentro del paquete.