Botones, iconos y campos
Primary action button
Configuraciones del botón primario, como es el caso de Add to card, Checkout, Create account, Login, entre otros.
Button text color
Type:
Color
Default value:
#ffffff
Color del texto en un botón principal, en el ejemplo, se estableció rojo:

Button text hover color
Type:
Color
Default value:
#ffffff
Color del texto al pasar el mouse sobre un botón primario.
Button text active color
Type:
Color
Default value:
#ffffff
Color del texto de un botón principal cuando es seleccionado.
Button background
Type:
Color
Default value:
#444444
Fondo de un botón principal, en el ejemplo, se estableció verde:

Button background hover
Type:
Color
Default value:
#666666
Color del fondo de un botón principal cuando se pasa el mouse por arriba del mismo.
Button background active
Type:
Color
Default value:
#000000
Color del fondo de un botón principal cuando se hace clic en el mismo.
Botón de acción secundario
Button text color
Type:
Color
Default value:
#666666
Color del texto en un botón secundario, en el ejemplo, se estableció verde:

Button text hover color
Type:
Color
Default value:
#333333
Color del texto al pasar el mouse sobre un botón secundario.
Button text active color
Type:
Color
Default value:
#000000
Color del texto de un botón secundario cuando es seleccionado (se hace clic en el mismo).
Button background
Type:
Color
Default value:
#000000
Fondo de un botón secundario, en el ejemplo, se estableció amarillo:

Button border
Type:
Color
Default value:
#8F8F8F
Color del borde de un botón secundario, en el ejemplo, se estableció rojo:

Button border hover
Type:
Color
Default value:
#474747
Color del borde de un botón secundario cuando se pasa el mouse sobre el mismo.
Button border active
Type:
Color
Default value:
#757575
Color del borde de un botón secundario cuando es seleccionado, se hace clic en el mismo.
Botón desactivado
Button text color
Type:
Color
Default value:
#ffffff
Color del texto de un botón deshabilitado.
Button background
Type:
Color
Default value:
#cccccc
Color del fondo de un botón deshabilitado.
Button border
Type:
Color
Default value:
transparent
Color del borde de un botón deshabilitado.
Iconos
Icon
Type:
Color
Default value:
#757575
Color de los íconos: botón para cerrar las ventanas emergentes, los íconos del paginados, los íconos para compartir en las redes sociales en las páginas de producto y blog, entre otros.
En el ejemplo, se estableció rojo:

Icon hover
Type:
Color
Default value:
#999999
Color alternativo de los íconos al pasar el muse por enciama en los botones para cerrar las ventanas emergentes, los íconos del paginados, los íconos para compartir en las redes sociales en las páginas de producto y blog, entre otros.
En el ejemplo, se estableció azul y el mouse está sobre el ícono de impresora:

Star review icon (full)
Type:
Color
Default value:
#474747
Color de las estrellas completadas, en el ejemplo, se estableció verde:
![]()
Star review icon (empty)
Type:
Color
Default value:
#8F8F8F
Color de las estrellas no completadas, en el ejemplo, se estableció amarillo:
![]()
Campos de entrada de formularios
Label text color
Type:
Color
Default value:
#a330dd
Color de las etiquetas de los campos en un formulario, en el ejemplo que se muestra arriba, se estableció negro:
![]()
Form text color
Type:
Color
Default value:
#a33000
Color del texto del formulario, en el ejemplo que se muestra arriba, se estableció rosado:

Uncompleted field text color
Type:
Color
Default value:
#000000
Color del texto de los campos que no han sido completados, en el ejemplo que se muestra arriba, se estableció azul:
![]()
En este caso, "Enter your text", es el texto de ayuda que desaparece cuando empieza a escribir el usuario, por eso el campo se muestra como no completado:

Uncompleted field background color
Type:
Color
Default value:
#ffffff
Color de fondo del campo que no ha sido completado, en el ejemplo que se muestra arriba, se estableció gris claro:

En este caso, "Enter your text", es el texto de ayuda que desaparece cuando empieza a escribir el usuario, por eso el campo se muestra como no completado.
Uncompleted field border color
Type:
Color
Default value:
#ff00a1
Color del borde de los campos que no han sido completados, en el ejemplo que se muestra arriba, se estableció amarillo:
![]()
En este caso, "Enter your text", es el texto de ayuda que desaparece cuando empieza a escribir el usuario, por eso el campo se muestra como no completado:

Completed field text color
Type:
Color
Default value:
#885dff
Color del texto de los campos que han sido completados, en el ejemplo que se muestra arriba, se estableció blanco:

Completed field background color
Type:
Color
Default value:
#D0D364
Color de fondo de los campos que han sido completados, en el ejemplo que se muestra arriba, se estableció gris oscuro:

Complete field border color
Type:
Color
Default value:
#4f00ff
Color del borde de los campos que han sido completados, en el ejemplo que se muestra arriba, se estableció verde:

Field border active
Type:
Color
Default value:
#0bc2c5
Borde del campo en el que está posicionado el usuario, en el ejemplo que se muestra arriba, se estableció rojo:
