Wireframe de referência
Design final da interface
O Desafio
O sexto desafio foi para criar um componente de calendário, mostrando o mês selecionado e a data.
Estrutura
Espaçamentos
Os espaçamentos foram definidos a partir da grade de 8 pontos, o que significa que todos os espaços entre elementos são múltiplos de 8.
Tipografia
Para a tipografia, escolhi a fonte Nunito em 3 pesos.
Para o mês e ano selecionados, tamanho 32 e peso bold (700) para criar hierarquia e dar ênfase.
Para os indicadores de dia da semana, as mesmas configurações, porém em tamanho menor, 20 pontos.
Para os dias selecionáveis e o botão "Cancelar", tamanho 20 e peso médio (500).
Para o dia selecionado, o mesmo tamanho 20 e peso ExtraBold (800), para dar ainda mais ênfase, junto ao fundo colorido.
Para os botões "Cancelar" e "OK", tamanho 24, sendo que o botão de "OK" também possui o peso ExtraBold (800) para destacar.
Cores
As cores são concisas, sendo um tom de roxo como cor primária e tons de cinza para os demais itens.
Para os textos, o meu queridinho grafite (#333333).
Para os ícones, botões e bordas (bem como o fundo do dia selecionado), o roxo (#9747FF).
Para o plano de fundo, o clássico branco puro (#FFFFFF). Já os divisores de linha ficam com o cinza clarinho (#EEEEEE) e os dias dos meses adjacentes, com um cinza levemente mais escuro (#CBCBCB) para um pouco mais de contraste.
Componentes
Os componentes consistem em apenas quatro ícones algumas bordas e fundos para o dia selecionado.
Os ícones de dropdown, que indicam a possibilidade de selecionar um item de uma lista, e os ícones de seta que permitem passar para os meses adjacentes, são, mais uma vez da Phosphor Icons. Eu amo essa biblioteca por possuir uma boa variedade de estilos e muitos ícones, das mais diversas categorias. Esses ícones estão com tamanho de 32 pontos, no estilo Bold.
Já para a diferenciação da data de hoje, temos uma singela borda de 2 pontos na cor primária da interface, com um raio de borda em 4 pontos.
O dia selecionado possui as mesmas características, com a diferença que seu fundo também é preenchido pela cor primária e, consequentemente, a cor do texto é alterada para o branco puro.
Variantes
