Color

Colores del Kit Digital USS

Los colores del Kit Digital USS se definen en tokens de color. Estos tokens se pueden usar en cualquier parte de la aplicación, como en los estilos de texto, los fondos, los bordes, etc. Su principal funcion es manejar el correcto uso del color en las aplicaciones desarrolladas con el Kit Digital USS.

El Kit Digital USS maneja dos modos de color light mode y dark mode. el modo por defecto se define en base al preferred-color-scheme del navegador, si este no está definido, se utiliza el light mode por defecto. Se puede alternar entre light y dark mode pulsando la tecla T o haciendo click en el botón toggle ubicado en la barra de navegación.

Los semantic tokens son tokens de color que tienen un significado semántico, es decir, que tienen un significado en el contexto de la aplicación. Por ejemplo, los tokens surface se utilizan para definir el color de fondo de los componentes, el token text se utiliza para definir el color de texto de los componentes, etc.

A continuacion se listan todos los tokens semanticos:

Corresponde a los colores de fondo de la aplicacion. Se usan en los fondos de las paginas, los modales, los popups, etc.

Corresponde a los colores de fondo de los componentes. Se usan en los fondos de los botones, los inputs, los cards, etc.

Corresponde a los colores de los bordes de los componentes. Se usan en los bordes de los botones, los inputs, los cards, etc.

Corresponde a los colores de los textos de la aplicacion. Se utilizan para los textos de los botones, los inputs, los cards, etc.

Corresponde a los colores de los botones de la aplicacion. Se usan en los botones primarios, secundarios, etc.

Corresponde a los colores de los íconos de la aplicacion. Se usan en los íconos de los botones, los inputs, los cards, etc.

Corresponde a los colores de los bordes de los componentes cuando estan en foco.

Corresponde a los colores de elevaciones, es decir, los colores de los "sombreados" de los componentes en dark mode.