Descripción general del estilo de la UI para extensiones de Docker

Nuestro sistema de diseño (Design System) es un conjunto de especificaciones en constante evolución que tiene como objetivo garantizar la consistencia visual en todos los productos de Docker y cumplir con los estándares de accesibilidad de nivel AA. Hemos abierto partes del mismo a los autores de extensiones, documentando estilos básicos (color, tipografía) y componentes. Consulta: Docker Extensions Styleguide.

Requerimos que las extensiones coincidan hasta cierto punto con la interfaz de usuario general de Docker Desktop, y nos reservamos el derecho de hacer esto más estricto en el futuro.

Para comenzar con tu UI, sigue los pasos a continuación.

Paso uno: Elige tu framework

Recomendado: React+MUI, utilizando nuestro tema

La UI de Docker Desktop está escrita en React y MUI (específicamente utilizando Material UI). Este es el único framework oficialmente admitido para construir extensiones, y el que el comando init configura automáticamente para ti. Su uso aporta beneficios significativos a los autores:

• Puedes usar nuestro tema de Material UI para replicar automáticamente la apariencia y el estilo de Docker Desktop.
• En el futuro, lanzaremos utilidades y componentes dirigidos específicamente a esta combinación (por ejemplo, componentes MUI personalizados o React hooks para interactuar con Docker).

Lee nuestra guía de mejores prácticas de MUI para aprender formas preparadas para el futuro de usar MUI con Docker Desktop.

No recomendado: Otro framework

Es posible que prefieras utilizar otro framework, tal vez porque tú o tu equipo están más familiarizados con él o porque tienes recursos existentes que deseas reutilizar. Esto es posible, pero se desaconseja encarecidamente. Significa que:

• Tendrás que replicar manualmente la apariencia y el estilo de Docker Desktop. Esto requiere mucho esfuerzo y, si no te adaptas lo suficiente a nuestro tema, a los usuarios les resultará discordante tu extensión y podríamos pedirte que realices cambios durante un proceso de revisión.
• Tendrás una mayor carga de mantenimiento. Cada vez que el tema de Docker Desktop cambie (lo cual podría ocurrir en cualquier versión), deberás cambiar manualmente tu extensión para adaptarla.
• Si tu extensión es de código abierto, evitar deliberadamente las convenciones comunes hará que sea más difícil para la comunidad contribuir a ella.

Paso dos: Sigue las siguientes recomendaciones

Sigue nuestras mejores prácticas de MUI (si corresponde)

Consulta nuestro artículo sobre mejores prácticas de MUI.

Utiliza únicamente colores de nuestra paleta

Con pequeñas excepciones, como mostrar tu logotipo, solo debes usar colores de nuestra paleta. Estos se pueden encontrar en nuestro documento de guía de estilo, y pronto también estarán disponibles en nuestro tema MUI y a través de variables CSS.

Utiliza colores equivalentes en modo claro/oscuro

Nuestros colores se han elegido de modo que los colores equivalentes en cada variante de la paleta tengan las mismas características esenciales. En cualquier lugar donde uses red-300 en modo claro, también deberías usar red-300 en modo oscuro.

¿Qué sigue?

• Echa un vistazo a nuestras mejores prácticas de MUI.
• Aprende cómo publicar tu extensión.