Closed github-learning-lab[bot] closed 4 years ago
:white_check_mark::white_check_mark::x::white_check_mark:
:white_check_mark: Getting the file
:white_check_mark: Code compilation
:x: You didn't make all the color changes required
:white_check_mark: Change the heading 1 size to 2.5rem
:white_check_mark::white_check_mark::white_check_mark::white_check_mark:
:white_check_mark: Getting the file
:white_check_mark: Code compilation
:white_check_mark: Make the correct color changes
:white_check_mark: Change the heading 1 size to 2.5rem
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 umaaction-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 paraaction-primary
emhover-background
ebackground
, 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
style.json
, substitua todas as ocorrências das cores que encontramos, trocando:O resultado esperado pode ser visto abaixo:
: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.