Crea tu sistema de diseño, parte 3: colores

En este artículo, veremos cómo configurar un sistema de color en CSS y cuáles son las mejores prácticas para garantizar que el sistema sea fácil de usar y mantener.

Este artículo es parte de una serie sobre sistemas de diseño inspirados en nuestra biblioteca de componentes web. La biblioteca se basa en un sistema sólido de globales CSS. ¡Así que somos nosotros compartiendo las cosas que hemos aprendido estableciendo el estilo global de nuestra biblioteca!

Serie de artículos:
- Parte 1: tipografía
- Parte 2: Cuadrícula y diseño
- Parte 3: colores
- Parte 4: Espaciado
- Parte 5: iconos
- Parte 6: Botones

¡Hemos lanzado el Editor de color! Una herramienta de diseño web que genera paletas de colores y temas compatibles con CodyHouse Framework.

Variables de color 101

A diferencia de otros globales de CSS, la creación de un sistema de color supone un 10% sobre codificación y un 90% sobre semántica. Mientras trabaja en su archivo _colors.scss, debe tener en cuenta los siguientes objetivos:

  1. Las variables de color deben ser fáciles de recordar → No desea comprobar el archivo global cada vez que tenga que elegir un color.
  2. El sistema debe ser fácil de actualizar → Agregará, eliminará y cambiará el nombre de los colores. Asegúrate de que hacerlo no sea complicado.
  3. El sistema debe incluir solo los colores esenciales → lo hemos escuchado tantas veces ... ¡pero siempre terminamos con más colores de los que necesitamos! La verdadera clave del éxito de un sistema de diseño es eliminar todo lo que no es necesario (colores incluidos).

Colores semánticos vs declarativos

Cuando se trata de establecer las variables de color, hay dos enfoques principales: colores semánticos y declarativos.

El enfoque semántico se ve así:

Si bien aquí hay un ejemplo de un enfoque declarativo:

Ninguno de los dos está equivocado. Elegir el que satisfaga sus necesidades depende de muchos factores (por ejemplo, tamaño del proyecto, relevancia de los colores de la marca, etc.).

Mientras trabajaba en el archivo _colors.scss de nuestro marco, tuve que tener en cuenta que los usuarios iban a editarlo (100%). Eso significa que incluso si el enfoque declarativo fue el más fácil de usar, tuve que mezclarlo con el enfoque semántico para obtener un sistema que también fuera fácil de mantener.

La paleta de colores esenciales.

El paso número uno fue declarar la cantidad mínima de colores necesarios para crear los componentes web. En general, la paleta de colores esenciales se compone de:

  1. El color principal / primario → utilizado para los enlaces, el color de fondo del botón, etc. En general, es el color principal del llamado a la acción.
  2. El color de acento → se usa para resaltar algo importante en la página. No debería ser una variación del color primario, sino un color complementario.
  3. Una escala de colores neutros → Generalmente es una escala de tonos en escala de grises, que se utilizará para elementos de texto, elementos sutiles, bordes, etc.
  4. Colores de retroalimentación → éxito, error, advertencia.

Algunos de estos colores necesitan una variación (versión más oscura / más clara), que a menudo se usa para resaltar la interactividad (por ejemplo, hover /: estados activos).

En CSS, esto se traduce en:

* nota: estamos utilizando el complemento postcss-color-mod-function para traducir las funciones de color en código RGBA compatible con todos los navegadores.

El fragmento de arriba representa la paleta de colores: todos los colores utilizados en todo el proyecto.

Las variaciones de los colores primarios y de acento se generan mediante funciones de color. Este enfoque es útil si tiene un archivo demo.html (y lo hacemos en nuestro marco) para que pueda ajustar los valores de las funciones hasta que esté satisfecho con los colores obtenidos. Los colores de sombras (o neutros) se generan utilizando chroma.js. En este caso, el uso de las funciones no era ideal, porque generalmente tiene dos colores opuestos (blanco y negro), y necesita generar una escala de valores basada en estos dos colores.

Agregar colores semánticos a la mezcla

Una vez que la paleta de colores está lista, podemos agregar colores semánticos. Crear colores semánticos no significa incrementar el número de colores, sino distribuir los colores usando referencias semánticas.

¿Por qué creo que este es un buen enfoque?

En primer lugar, este sistema se basa en dos colores esenciales: colores primarios y de acento. Eso significa que cuando necesite usar las variables de color, no le será difícil recordar lo que representan esas variables (incluso si no está usando nombres declarativos como "azul" y "rojo").

Es posible que su sistema necesite incluir más colores (por ejemplo, un color secundario). Todavía estás lidiando con solo tres colores. Administrar un sistema basado en más de 10 colores principales sería difícil, independientemente del enfoque que esté utilizando, por lo que puede considerar simplificarlo.

Los colores en escala de grises utilizan una convención de nomenclatura diferente: cuanto más alto es el número al final de la variable, más oscuro es el color.
Este enfoque resulta útil cuando no está seguro de qué color neutro desea aplicar. Si gray-2 parece demasiado sutil, puedes probar gray-3. Es posible que haya notado que faltan algunos tonos (por ejemplo, gris-5). No eran esenciales en nuestro caso (nunca los usamos al crear los componentes web), por lo que los eliminamos de la paleta de colores.

Los colores semánticos se agregan a la mezcla por tres razones principales:

  1. El archivo _colors.scss se convierte en la fuente de la verdad cada vez que necesita modificar un color. ¿Sientes que los elementos del encabezado del texto deberían ser más oscuros? Abra el archivo _colors.scss y edite la variable color-text-header.
  2. Si define un borde de color, por ejemplo, no necesitará buscar qué color gris ha estado usando en otros componentes la próxima vez que cree un elemento de borde. El mismo concepto se aplica a muchos elementos, no solo a las fronteras.
  3. Lo convierte en pan comido para crear y mantener diferentes temas.

Temática

Tan pronto como podamos usar variables CSS sin tener que depender de complementos o polyfill, ¡crear temas de color será súper simple *! ¿Eso significa que no podemos crear temas hoy? No podemos. Tenemos dos opciones

* en nuestro marco, utilizamos el complemento postcss-css-variables para compilar variables CSS. Actualmente no admite la actualización de variables en una clase CSS.

La opción 1 es actualizar las variables CSS de todos modos. Los navegadores que no admiten variables mostrarán el tema de color "predeterminado". Esto no es un problema, siempre y cuando el contenido sea accesible.

Por ejemplo, tiene un tema de color predeterminado → fondo blanco y color de texto negro, y .theme-dark → fondo negro y color de texto blanco. Luego crea dos componentes, uno con el tema predeterminado y el otro con el tema .dark. Si tener ambos componentes con el tema predeterminado no afecta la experiencia del usuario, puede considerar el tema .dark como una mejora (opcional). En este caso, tiene sentido actualizar las variables para crear diferentes temas, incluso si no son compatibles en todas partes.

Así es como se crea un nuevo tema actualizando algunas variables CSS clave:

Me encanta esta solución porque abstrae la corrección de color y le permite mantener sus temas de color en un solo archivo. Al hacerlo, podemos cambiar potencialmente el estado de cada componente (del tema-a al tema-b) simplemente aplicando una clase CSS.

La opción 2 estaría dirigida a todos los elementos cuya apariencia se ve afectada por el tema. La ventaja de este método es que es compatible con todos los navegadores. Sin embargo, no es tan fácil de mantener en comparación con el que se basa completamente en variables CSS.

Aquí hay un ejemplo de la opción 2 en acción:

¡Ahora ya sabe cómo planeamos manejar los colores en nuestro marco! Si tiene comentarios / sugerencias, ¡háganos saber en el comentario!

¡Espero que hayas disfrutado el artículo! Para obtener más pepitas de diseño web, síganos aquí en Medium o Twitter.