La biblioteca
Los botones, los campos y las tablas de nuestros productos los hemos escrito nosotros. Es el mismo paquete que usa el asistente, y en el proyecto de un cliente se instala con su marca, sin arrastrar código que no controlemos.
Tócala
Lo que ves abajo funciona: son los componentes servidos desde el paquete publicado. Cambia el color de marca y fíjate en que cada rol mantiene su luminosidad y solo cambia el tono. Por eso un verde y un ámbar se leen igual de bien.
De tu hex salen tono 219.5° y croma 0.146. La luminosidad de cada rol no se toca: por eso el contraste aguanta.
Componentes reales, no una captura
Facturado este mes
12.480 €
+8,4 %sube
Por qué existe
npm es el almacén del que se descargan paquetes de código hechos por otros. El nuestro solo pide React (react y react-dom), la base sobre la que funciona, y nada más. Lo poco que necesitábamos de fuera está copiado dentro, con su licencia, así que tu proyecto no hereda actualizaciones, avisos de seguridad ni sorpresas de paquetes ajenos.
Le das los colores de tu marca en hexadecimal y escribe el tema completo. Resuelve los 41 roles de color, es decir, cada uso que tiene un color en la interfaz, en tema claro y en oscuro. Si una combinación no llega al contraste mínimo para leerse bien, se niega a escribirla.
Todos los componentes se usan con teclado, marcan dónde está el foco y funcionan con lector de pantalla, el programa que lee en voz alta para quien no ve la pantalla. Se comprueban con axe, un analizador automático, en escritorio, en móvil y en móvil táctil. Si algo falla, la versión no se publica.
Cada componente va en su propio fichero y no hace nada por su cuenta al cargarse, así que al preparar la aplicación solo entra lo que de verdad se usa. Una pantalla con un campo no carga también la tabla.
En números