Colors

Los colores definidos en la librería movil siguen lo estipulado en el design system de Agave.

• Colores primario y secundario.
• Otros colores.

---

XML

Para proyectos con vistas XML tenemos la declaración de los colores definidos de la siguiente manera:

Nombre	Color	Hexadecimal
White		#FFFFFF
Transparent		#00000000
Primary 50		#F0F8E8
Primary 100		#DAEDC6
Primary 200		#C2E2A0
Primary 300		#AAD679
Primary 400		#97CD5D
Primary 500 Primario		#85C440
Primary 600		#7DBE3A
Primary 700		#72B632
Primary 800		#68AF2A
Primary 900		#55A21C
Secondary 50		#e3e7e9
Secondary 100		#b8c2c9
Secondary 200		#899aa5
Secondary 300		#597180
Secondary 400		#365265
Secondary 500 Secundario		#12344a
Secondary 600		#102f43
Secondary 700		#0d273a
Secondary 800		#0a2132
Secondary 900		#051522
Dark		#262927
light		#F5F5F5
Dalia		#EC645E
Lima		#ABDB40
Uva		#867AF9
Grey		#9697AF
Sky		#ADD8E5
Melón		#FBC30E
Sandía		#FB728C
Limón		#3FC468
Menta		#20C9A7
Error		#E83154
Alarm		#FFE41A

Llamarlo en el XML es muy fácil, solo busque el color name definido en la librería mediante el recurso de colores, @colors/primary500 por ejemplo.

Recuerde que el atributo de colores es aplicable a todo View que se puede plasmar en nuestros diseños.

Para este ejemplo cambiaremos el color de los TexView siguientes. Le daremos un estilo h4 solo con fines de resaltar los textos.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/h4"
    android:textColor="@color/primary500"
    android:text="Color primario"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/h4"
    android:textColor="@color/secondary500"
    android:text="Color secundario"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/h4"
    android:textColor="@color/menta"
    android:text="Color menta"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/h4"
    android:textColor="@color/dalia"
    android:text="Color dalia"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/h4"
    android:textColor="@color/error"
    android:text="Color error"/>

El resultado sería el siguiente.

Representar a la acción principal. Tiene mayor peso visual y ayuda al usuario a ejecutar una decisión.

Jetpack Compose

Al igual que en XML, los colores están definidos con el mismo nombre, pero usarlos es mucho más sencillo, solo busque el nombre del color declarado en la siguiente lista y úselo en cualquier parte de su proyecto

Variable	Color
val Primary25 = Color(0xffF9FCF5)
val Primary50 = Color(0xffF0F8E8)
val Primary100 = Color(0xffDAEDC6)
val Primary200 = Color(0xffC2E2A0)
val Primary300 = Color(0xffAAD679)
val Primary400 = Color(0xff97CD5D)
val Primary500 = Color(0xff85C440)
val Primary600 = Color(0xff7DBE3A)
val Primary700 = Color(0xff72B632)
val Primary800 = Color(0xff68AF2A)
val Primary900 = Color(0xff55A21C)
val Secondary50 = Color(0xffe3e7e9)
val Secondary100 = Color(0xffb8c2c9)
val Secondary200 = Color(0xff899aa5)
val Secondary300 = Color(0xff597180)
val Secondary400 = Color(0xff365265)
val Secondary500 = Color(0xff12344a)
val Secondary600 = Color(0xff102f43)
val Secondary700 = Color(0xff0d273a)
val Secondary800 = Color(0xff0a2132)
val Secondary900 = Color(0xff051522)
val Transparent = Color(0xff00000000)
val Dark = Color(0xff262927)
val White = Color(0xffFFFFFF)
val Green = Color(0xff6ace3b)
val Limon = Color(0xff3fc468)
val Menta = Color(0xff20c9a7)
val Light = Color(0xfff5f5f5)
val Sky = Color(0xffadd8e5)
val Melon = Color(0xfffbc30e)
val Sandia = Color(0xfffb728c)
val Uva = Color(0xff867af9)
val Lime = Color(0xffabdb40)
val Dalia = Color(0xffec645e)
val Error = Color(0xffe83154)
val Alarm = Color(0xffffe41a)

Ejemplo:

Usaremos el color Primary500 y Melon para nuestros Chips

Chip99(color = Primary500, text = "Creado") {

}

Chip99(color = Melon, text = "Recolectado") {

}

El resultado sería el siguiente.