Preparando tu aplicación para la actualización de color del Lightning Design System ☁️

En 2023, Salesforce planea actualizar los colores en nuestra interfaz de usuario de iluminación para que sean más accesibles para las personas con baja visión y para cumplir con las Pautas de accesibilidad de contenido web (WCAG) para el contraste de color que no es de texto y el contraste de color de texto. WCAG es un estándar de accesibilidad moderno requerido por numerosos órganos de gobierno de todo el mundo.

Para hacer esto, actualizaremos las plataformas en las que se crea nuestra interfaz de usuario Lightning: Salesforce Lightning Design System (SLDS) y Base Lightning Components (ambas versiones, Aura y Lightning Web Component). En estas plataformas, actualizaremos componentes, tokens de diseño, ganchos de estilo e íconos. Estos cambios no solo aparecerán en los productos de Salesforce, como Sales Cloud y Service Cloud, sino que también aparecerán en cualquier interfaz de usuario personalizada que haya creado con SLDS o Base Lightning Components.

Para obtener más detalles y ejemplos visuales de las actualizaciones, eche un vistazo a las publicaciones del blog de administración y noticias de Salesforce.

¿Cuál es el motivo de la actualización?

Con los colores actuales en Salesforce, los usuarios con problemas de visión tienen dificultades para reconocer los elementos clave de la interfaz de usuario, lo que no solo los frustra, sino que también les impide adoptar Salesforce. Además, Salesforce y sus clientes enfrentan problemas de cumplimiento clave debido a que un número cada vez mayor de gobiernos en todo el mundo, incluida la Unión Europea (UE) , requieren contraste de color de acuerdo con WCAG 2.1 . WCAG 2.1 ha requerido que los sitios web de las empresas usen texto que cumpla con un contraste de color de 4.5: 1 de su fondo y elementos funcionales que no sean texto que cumplan con un contraste de color de 3: 1 . Aumentar nuestro contraste de color para cumplir con estos estándares nos permitirá brindar una mejor experiencia a los usuarios con baja visión y permitirá a las empresas que usan nuestros productos evitar fuertes multas por accesibilidad.

¿Cuándo está ocurriendo la actualización?

Todos los íconos se actualizarán como parte del lanzamiento de Summer '23. Las páginas de inicio de registros seleccionados, incluidos los LWC incrustados en las páginas, se actualizarán como parte del lanzamiento de Summer '23. Todas las demás páginas, SLDS y los componentes básicos de Lightning se actualizarán como parte de la versión Winter '24.

¿Qué es lo que hay que hacer?

Si descargó íconos de Salesforce y seleccionó íconos específicos para usarlos como recursos estáticos, asegúrese de actualizarlos con los nuevos íconos . Si está utilizando nuestro paquete SLDS NPM , actualice ese paquete a la última versión para ver los cambios. Si tiene páginas personalizadas desarrolladas con SLDS, vea cuáles de los siguientes escenarios se aplican a su base de código y realice los cambios correspondientes.

1. Componente base Lightning/Aura

Utiliza un componente Lightning sin anulaciones adicionales. Su código podría verse como el Ejemplo 1 a continuación.

¿Qué es lo que hay que hacer?

1. Nada. Las actualizaciones de color se realizan de forma gratuita a medida que Lightning Base Components implementa un plan SLDS .
2. Se aplican excepciones a algunos componentes a continuación.

Ejemplo 1

<dx-code-block title language="html" code-block="
Save
«>

2. Componente personalizado con plano SLDS

Utiliza un componente personalizado que implementa un modelo SLDS y solo usa clases SLDS para diseñar. Su código podría verse como el Ejemplo 2 a continuación.

¿Qué es lo que hay que hacer?

1. Nada. Las actualizaciones de color se realizan de forma gratuita si su componente implementa exactamente un modelo SLDS .

Ejemplo 2

<dx-code-block title language="html" code-block="
Save
«>

3. Componente personalizado con plano parcial de SLDS

Similar a 2. Componente personalizado con modelo SLDS , pero en este caso, usa un componente personalizado que implementa parcialmente un modelo SLDS o usa más clases de SLDS para diseñar. Su código podría verse como el Ejemplo 3 a continuación.

¿Qué es lo que hay que hacer?

1. Es posible que deba actualizar los colores en su CSS personalizado si ve regresiones visuales.
   1. Si existe un componente base Lightning para ese modelo y variante, recomendamos reemplazar su componente personalizado con el componente base Lightning.
      1. Si necesita personalizar el estilo de los componentes, le recomendamos que utilice los nuevos ganchos de estilo --slds para cualquier valor de color codificado. Si el valor de color codificado no tiene una coincidencia exacta en términos de ganchos de estilo, querrá considerar usar el gancho de estilo más parecido.
   2. Es posible que desee verificar si hay suficiente contraste de color para el componente antes de actualizar el valor codificado a un gancho de estilo.
2. Los cambios de color en las clases de SLDS se realizan de forma gratuita. Debido a que los cambios se limitan al color, estas clases deberían continuar funcionando como se esperaba.

Ejemplo 3

<dx-code-block title language="html" code-block="
Save
«><dx-code-block title language="css" code-block="/* CSS */
.my-class { color: #ccc;

En este caso, la clase de CSS personalizada .my-class anula un valor de .slds-button_neutral . Este valor no solo debe actualizarse para tener un mejor contraste, sino que toda la implementación también sería más fácil de mantener si se reemplazara con un componente base Lightning y luego se usara el enlace de estilo --slds-c-button-text-color para hacer una anulación accesible.

Nota: Si no existe un gancho de estilo para el valor codificado, recomendamos usar el gancho de estilo más cercano disponible.

<dx-code-block title language="html" code-block="
Save
«>

4. Componente personalizado con tokens o clases SLDS

Está usando un componente personalizado que usa directamente tokens SLDS dentro de CSS personalizado o usa clases SLDS en el marcado. Su código podría verse como el Ejemplo 4 a continuación.

¿Qué es lo que hay que hacer?

1. Es posible que deba reemplazar los tokens que está utilizando en CSS personalizado con los ganchos de estilo global relevantes según sea necesario.
   1. Consulte el ejemplo 4 a continuación.

Ejemplo 4

<dx-code-block title language="html" code-block="
Save
«>

En este ejemplo, el token t(colorBorder) está diseñado para bordes decorativos como tarjetas y divisores. Debe reemplazarse con un gancho de estilo que esté alineado con el plano del botón SLDS.

5. Componente personalizado con fichas personalizadas

Está usando un componente personalizado que usa tokens personalizados. Su código podría verse como el Ejemplo 5 a continuación.

¿Qué es lo que hay que hacer?

Recomendamos reemplazar tokens personalizados con ganchos de estilo SLDS cuando sea posible. Cuando use ganchos de estilo, asegúrese de usar ganchos que tengan el contexto semántico correcto. Por ejemplo, un gancho como --slds-g-color-border-base-1 solo debe usarse para bordes. Esto ayudará a garantizar que su producto siga siendo coherente con el estilo de Salesforce a medida que se produzcan futuras actualizaciones de color.

Si debe mantener su token personalizado por cualquier motivo, vuelva a verificar que su token personalizado no haya experimentado ninguna regresión visual.

Ejemplo 5

<dx-code-block title language="html" code-block="

«><dx-code-block title language="html" code-block="

«>

En este ejemplo, el token t(myBackgroundColor) usa un valor de color desactualizado de SLDS. El lenguaje visual Lightning actual ya no usa este color. El token personalizado debe reemplazarse con el color más parecido de la lista de ganchos de estilo. En este ejemplo, —slds-g-color-neutral-base-95: #f3f3f3 es el gancho de estilo SLDS más parecido.

6. Componente personalizado con valores codificados

Está usando un componente personalizado que usa un valor de color codificado como #444 o rgb(68,68,68) . Su código podría parecerse al Ejemplo 3 anterior.

¿Qué es lo que hay que hacer?

1. Recomendamos reemplazar los colores codificados con ganchos de estilo si existe un color análogo. Al seleccionar tokens, asegúrese de usar tokens semánticos de manera que conserven su significado. Por ejemplo, --slds-g-color-border-base-1 solo debe usarse como el color del borde de los elementos del formulario. Si desea mantener su valor de color codificado, verifique que estos colores no hayan experimentado ninguna regresión visual.
   Nota: Los valores alternativos pueden permanecer como valores de color codificados.

7. Componente base con anulación --lwc

Está utilizando un componente Lightning o Aura base y está anulando un token --lwc para personalizar el estilo de uno o más componentes. Su código podría verse como el Ejemplo 7.

NOTA: Esta no es una forma recomendada de personalizar componentes y no hay garantía de que las personalizaciones realizadas de esta manera continúen funcionando.

¿Qué es lo que hay que hacer?

1. Verifique si está anulando y --lwc tokens para cualquiera de estos componentes .
   1. Reemplace el token --lwc que se anula con el enlace de estilo actualizado --slds introducido.

Ejemplo 7

<dx-code-block title language="html" code-block="

«>

En este ejemplo, al anular —lwc-colorBorder a rojo, todos los bordes de los botones se vuelven rojos. El equipo de SLDS actualizó esta variante de componente para usar un enlace de estilo global, por lo que esta anulación dejará de funcionar. En este caso, simplemente use --slds-g-color-border-base-4 en el ámbito del selector para anular el color del borde.

Mejores prácticas

• Reemplace los valores de color codificados de forma rígida con ganchos de estilo globales cuando sea posible (los valores de colores codificados de forma rígida están bien como valores alternativos).
• Reemplace los tokens de diseño con ganchos de estilo global donde sea posible.
• Reemplace los ganchos de estilo --lwc con ganchos de estilo globales.
• Elija ganchos de estilo que correspondan al contexto de uso. Por ejemplo, al reemplazar el valor codificado de #747474 que se usa para un borde con un gancho de estilo, hay dos alternativas para elegir: --slds-g-color-border-base-4 o --slds-g-color-neutral-base-50 . Se recomienda usar --slds-g-color-border-base-4 para el contexto de estilo CSS de "border" en lugar de --slds-g-color-neutral-base-50 .
• Use declaraciones var(..) y coloque valores de color codificados como respaldo en caso de que un navegador heredado no pueda leer el enlace de estilo o el token de diseño. Esto es opcional.
  • background: var(—slds-g-color-neutral-base-50, #747474);
• Intente que sus personalizaciones de color cumplan con los estándares de contraste de color de texto y no texto de WCAG 2.1.

Más recursos

Sobre el Autor

Timothy Yeh es Gerente de Producto para Sistemas de Diseño en Salesforce, enfocado en ayudar a los clientes a construir una interfaz de usuario de mayor calidad más rápido al proporcionar sistemas sólidos de patrones.