Estilos globales

[github-learning-lab[bot]]

Estilos globales

:sparkles: Branch: styles

Introducción

Además de css, que ya se aprendió anteriormente, Store Framework ofrece otro tipo de personalización de diseño, proporcionada a partir de style.json .

Estilización semántica

Todos los bloques de Store Framework utilizan las mismas definiciones semánticas de estilo, definidas usando Tachyons. En la práctica, esto significa que en lugar de tener que cambiar todos los fondos de los botones para usar el color que le interesa, apenas tiene que redefinir el color que tiene un background de una action-primary.

Las personalizaciones a través de style.json tienden a tener un impacto mucho mayor que a través de css, pues, en general, mantienen la identidad visual de la tienda a lo largo de todas las páginas siendo necesarios pocos cambios. Por esta razón, siempre que sea posible, se debe utilizar esta herramienta, evitando así overhead de css innecesario.

Investigando style.json

Colores

styles/configs/style.json puede ser confuso en un primer momento, por contener todas las definiciones de estilo que usan todos los bloques visuales de Store Framework. Sin embargo, un buen flujo para identificar qué estilos cambiar es mediante la inspección de elementos en el browser.

Por ejemplo, haga clic derecho en cualquier botón de la tienda y pulse inspeccionar.

Observando la barra lateral que abrió en Chrome es posible ver una serie de definiciones, una de estas es el color de background del botón (#0f3e99):

Además, si inspecciona en el momento en que está solamente pasando el mouse por encima del botón, descubrirá el color de hover (#072c75):

Si buscamos las ocurrencias de ambos colores en style.json, los colores que descubrimos son, respectivamente, los usados para acción-primaria en hover-background y background, por ejemplo. Esto nos da una mejor idea de dónde podemos encontrar otras ocurrencias de esta misma definición.

Tipografía

Para descubrir definiciones semánticas de texto y qué campos son editables, el proceso es el mismo que el anterior, podemos buscar atributos como tamaño de fuente, peso, familia.

En una cabecera nivel 1, por ejemplo, cuando inspeccionamos descubrimos que su tamaño se definió en 3 rem.

Actividad

1. En el archivo style.json, reemplace todas las ocurrencias de los colores que encontramos, cambiando:
   • #072c75 por #45a6a3
   • #0F3E99 por #52BAB7
2. Cambie el tamaño de la fuente heading level 1 para que ahora tenga 2.5 rem de altura.

---

:no_entry_sign: ¿Perdido?

¿Hay algún problema con este paso? ¿Qué tal si nos envía un feedback? :pray:

Crear feedback

---

Si aún tiene alguna duda sobre cómo enviar su respuesta, puede revisar aquí.

[github-learning-lab[bot]]

¡Ha completado este paso con éxito!

Vaya al siguiente paso:

Creando templates personalizados

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::x:

Tests

:white_check_mark: Code compilation :white_check_mark: Make the correct color changes :x: You didn't change the heading 1 size to 2.5rem

Try again :grin:

[vtex-course-hub[bot]]

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Code compilation :white_check_mark: Make the correct color changes :white_check_mark: Change the heading 1 size to 2.5rem