Color

Aquí tienes la traducción del archivo fuente de la guía de diseño al español, manteniendo un tono natural y conservando los componentes MDX, bloques de código y términos técnicos:

§Sistema de color de dos capas

Hay dos tipos de esquemas de color utilizados en la biblioteca: privados y semánticos. Estos dos esquemas de color, o paletas, varían en estructura y propósito. La paleta privada asigna valores RGBA a todos los tonos y matices de colores en todos los temas, mientras que la paleta semántica utiliza colores privados como valores y los aplica a elementos de UI específicos.

§Colores privados

Son las capas de color base en un sistema de diseño. No están diseñados para ser utilizados directamente dentro de los componentes. En su lugar, sirven como valores para variables semánticas que ya se utilizan en los componentes. Los valores de las variables privadas son colores RGBA/RGB.

Esta paleta incluye todos los tonos de cada color para cada tema, tanto con como sin canal alfa, con el prefijo Solid.

§Colores con canal alfa

Los colores alfa solo están disponibles para índices de 500 y menores. Se mezclan con el color de fondo, lo que permite una mejor legibilidad y contraste. Se sugiere que los uses:

1. para colores claros (de 50 a 300)
2. en proyectos relacionados con tipografía donde el texto puede mostrarse sobre fondos de cualquier color, ya que el uso de un canal alfa evita la pérdida de contraste.

§Colores sólidos

Utiliza colores sólidos cuando dos objetos puedan superponerse y quieras evitar la mezcla de colores en el lugar de la superposición. Los colores sólidos se seleccionan basándose en el fondo principal para el tema. Dado que los colores sólidos se pueden mostrar sobre fondos de cualquier color, su uso debe considerarse cuidadosamente.

Los tonos deben regenerarse cada vez que se cambie el color de fondo principal o secundario para mantener la consistencia visual entre los colores sólidos y los colores con canal alfa.

§Cómo crear tonos

El tono se crea a partir del centro de la escala, que en nuestro caso es un color con un índice de 550. Es el color principal que genera tonos menos saturados y más saturados. Las excepciones son el blanco y el negro, que están en el extremo de la escala y permiten la creación de más tonos y valores con canal alfa.

Los colores con un índice de 50 a 500 se crean reduciendo la opacidad del color base (550). Los colores con canal alfa solo se encuentran en este rango, a diferencia de los colores sólidos, que pueden tener valores en toda la escala.

Los colores con un índice de 600 a 1000 se crean mezclándose con un color de fondo que contrasta con el color principal para el tema seleccionado. Por ejemplo, el color de fondo principal de un tema claro es blanco, y el color contrastante es el fondo de un tema oscuro. Por lo tanto, este fondo contrastante se mezclará con el color para crear tonos más oscuros.

En un tema oscuro, el fondo principal es oscuro, y el fondo contrastante es el fondo de un tema claro, que es blanco. Por lo tanto, el blanco se mezclará con el color para crear tonos de alto índice.

Un script te permite generar rápidamente una paleta de colores para la entrega de desarrollo.

§Colores semánticos

Las variables de este grupo de colores se categorizan en grupos, que posteriormente se utilizan dentro de los componentes según su significado. Sus valores se configuran para cada tema utilizando variables privadas. Algunas variables semánticas a veces pueden usarse como valores para otras, pero esto debe hacerse con cuidado para evitar la recursión.

§Categorías basadas en tipos

En Figma, las variables se organizan en grupos para facilitar la navegación, como se enumera a continuación. Mientras que, en el código, la estructura es más sencilla. La marca (Branding) no se coloca en una categoría separada, y solo hay un grupo de variables Base. Figma y el código son equivalentes en términos de nombres de variables, estructura y significado, excepto cuando el nombre se optimiza para la legibilidad o la comprensión.

1. Branding

   Una colección de variables específicas de la marca de todas las categorías. Estos son colores básicos que te permiten aplicar rápidamente un estilo y ver el resultado. Este grupo es exclusivo de Figma. No está incluido en el código, y los colores se categorizan en sus propios grupos.

2. Text

   Un grupo de variables para el color del texto e iconos. Dado que el texto y los iconos a menudo se muestran juntos, tiene sentido mantener su consistencia visual.

3. Base

   Un grupo de colores para fondos, rellenos y superficies.

4. Base Semantic

   Colores de fondo con clasificaciones Info, Positivo, Advertencia, Peligro y Varios. Hay valores tanto para los estados Normal como de Hover. Puede funcionar para algunos tipos de infografías, pero no para todas. Este grupo es exclusivo de Figma. En el código, forma parte del grupo Base.

5. Base Float

   Colores de fondo de elementos que flotan sobre el fondo principal de la página. Este grupo es exclusivo de Figma. En el código, forma parte del grupo Base.

6. Line

   Colores de trazos, líneas, divisores, marcos y cualquier otro elemento delgado.

7. Effects

   Colores utilizados para oscurecer texto, aplicar sombras, etc.

8. Misc

   Un grupo de colores técnicos utilizados para barras de desplazamiento, ejes de gráficos y fondos de tooltips en gráficos.

Se puede encontrar más información sobre cada variable en la descripción del estilo de color de Figma o en el storybook.

§Categorías basadas en significado

Las variables de cada grupo pueden tener sus propios significados, que se determinan por los principios de aplicación de un grupo. Para textos, por ejemplo, tiene sentido usar categorías como principal y adicional. Sin embargo, no se pueden aplicar a ningún otro tipo de contenido.

Los siguientes son ejemplos de significados compartidos por diferentes categorías:

• éxito
• peligro
• advertencia
• neutral
• etc.

§Variables y estilos de color

Puedes trabajar con valores de color utilizando la interfaz de Variables Locales de Figma. Para ir allí, abre el archivo con la biblioteca, asegúrate de que no haya nada seleccionado en la página (puedes hacerlo haciendo clic en el fondo vacío del lienzo) y selecciona Variables Locales en el panel derecho.

Mientras las variables aún no están en beta, el sistema de diseño continúa utilizando estilos de color para definir directamente el color de un objeto. Ten en cuenta que el valor dentro del estilo de color está representado por la variable correspondiente. Lo que significa:

1. Para cambiar el color de un estilo de color, necesitas cambiar el color de la variable correspondiente.

2. Los estilos de color heredan las propiedades de las variables, en particular el soporte para temas de color. Como resultado, un objeto con un estilo de color aplicado puede cambiar el tema utilizando solo la funcionalidad de Figma.

   

§Temas

Gravity-UI soporta cuatro temas: claro, oscuro y versiones contrastantes de cada uno. El estándar actual de la industria requiere al menos dos: claro y oscuro. Dada la diversidad de preferencias de los usuarios, a veces es difícil elegir el mejor.

Los temas con mayor contraste se crearon para abordar la falta de contraste en los temas regulares, que puede ser causada por características del equipo como la calibración del monitor, el brillo configurado, el tipo de matriz y la reproducción del color (especialmente en televisores) o la iluminación de la habitación. Actualmente, estos temas no ofrecen una solución para abordar las preocupaciones de Accesibilidad.