Estilos globais

[github-learning-lab[bot]]

Estilos globais

:sparkles: Branch: styles

Introdução

Além do css, que já foi aprendido anteriormente, o Store Framework oferece um outro tipo de customização de design, provida a partir do style.json.

Estilização semântica

Todos os blocos do Store Framework se alavancam das mesmas definições semânticas de estilo, definidas usando o Tachyons. Na prática, isso significa que ao invés de precisar mudar todos os fundos de botões para usar a cor que se interessa, é necessário apenas redefinir a cor que um background de uma action-primary tem.

Customizações através do style.json tendem a ter um impacto muito maior que através de css, pois, em geral, mantém a identidade visual da loja ao longo de todas as páginas sendo necessárias poucas mudanças. Por esse motivo, sempre que possível, essa ferramenta deve ser usada, evitando assim overhead de css desnecessário.

Investigando o style.json

Cores

O styles/configs/style.json pode ser confuso em primeiro momento, por conter todas as definições de estilo que todos os blocos visuais do Store Framework usam. No entanto, um bom fluxo para identificar que estilos mudar, é através da inspeção de elementos no browser.

Por exemplo, clique com o botão direito em cima de qualquer botão da loja aperte em inspecionar.

Observando a barra lateral no Chrome que abriu é possível ver uma série de definições, uma delas é a de cor do background do botão (#0f3e99):

Além dela, se você inspecionar no momento em que estiver somente passando o mouse em cima do botão, descobrirá a cor de hover (#072c75):

Se fizermos uma busca pelas ocorrências de ambas as cores no style.json, as cores que descobrimos são, respectivamente, as usadas para action-primary em hover-background e background, por exemplo. Isso nos dá uma ideia melhor de onde poderemos achar outras ocorrências dessa mesma definição.

Tipografia

Para descobrir definições semânticas de texto e quais campos são editáveis, o processo é o mesmo do anterior, podemos buscar atributos como tamanho da fonte, peso, família.

Em um cabeçalho nível 1, por exemplo, ao inspecionar descobrimos que seu tamanho foi definido como 3 rem.

Atividade

1. No arquivo style.json, substitua todas as ocorrências das cores que encontramos, trocando:
   • #072c75 por #45a6a3
   • #0F3E99 por #52BAB7
2. Mude o tamanho da fonte heading level 1 para que agora tenha 2.5 rem de altura

---

:no_entry_sign: Perdido?

Há algum problema com esse passo? Que tal nos enviar um feedback? :pray:

Criar feedback

---

Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.

[github-learning-lab[bot]]

Você terminou este passo com sucesso!

Vá para o próximo passo:

Criando templates customizados

[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