A equipe de design está em processo de fazer pequenas, mas poderosas, alterações/ajustes no tema foundation para se alinhar um pouco mais com os padrões modernos da web. Para ver essas alterações ao vivo no meta, junte-se a este grupo:
https://meta.discourse.org/g/modernized-foundation
Faremos essa alteração ao vivo através do novo recurso Upcoming Changes (Mudanças Futuras) disponível no Discourse. Isso permitirá que os proprietários do site ativem as alterações para qualquer grupo que especificarem, a fim de testar a implementação das alterações sem o medo de possivelmente quebrar temas ou personalizações atuais.
O que mudará?
O cabeçalho encolhe em altura
Diminuímos o tamanho do cabeçalho juntamente com alguns dos ícones e avatares ligeiramente para utilizar o espaço da tela.
Botões padrão
Estamos mudando de um fundo de botão cinza padrão para um fundo transparente / “secundário” com uma borda.
- remoção do fundo cinza
- adição de bordas
- cor do ícone corresponde à cor do texto
- botões agora têm uma altura definida
Botão Criar novo tópico na página da lista de tópicos
Correspondendo ao Horizon e dando a este uma cor de fundo “CTA” de tertiary (terciária)
Muita remoção de fundo cinza
Lista de tópicos
- remoção da borda superior grossa de 3 px
- diminuição do tamanho da fonte dos dados do cabeçalho da tabela
- cor consistente para itens de dados da tabela
- alteração do valor da cor para lido/não lido
- leve aumento no peso da fonte para não lido
Categorias
- alinhamento à esquerda do texto
- remoção da borda colorida grossa à esquerda
- emblemas ligeiramente arredondados
- borda mais fina na caixa
Barra de navegação
- As pílulas de navegação nas páginas da lista de tópicos terão a mesma altura dos botões nesta zona
- texto e ícone de cor mais escura no kit selecionado
Barra lateral
- ícone e texto correspondem à cor
- texto e ícones mais escuros
- fundo “ativo” mais claro
- peso da fonte ativa mais pesado
Banner de boas-vindas
- espaçamento equilibrado
- variáveis adicionadas para alinhamento esquerdo/direito/central mais fácil via personalização
- peso da fonte do cabeçalho diminuído
- diminuição do tamanho da fonte do subtítulo
Calendário
- fundo cinza removido dos “botões”
- uso de cinza apenas para significar “ativo”
- mudança para estilo de botão “transparente com borda”
Menus suspensos (Drop downs)
- preenchimento adicionado ao contêiner do menu suspenso
- altura, preenchimento, espaçamento agora correspondem aos itens da barra lateral
- unificação de “listas clicáveis”
- a borda herda a variável
--d-border-radius
Novas Variáveis
Algumas das mudanças aqui serão introduzidas através de variáveis adicionais adicionadas ao core.
Alinhamento do banner de boas-vindas
O alinhamento do banner de boas-vindas agora poderá ser alterado via:
// padrão
--welcome-banner-text-align: center;
--welcome-banner-search-menu-margin-inline: auto;
// customizado
--welcome-banner-text-align: left;
--welcome-banner-search-menu-margin-inline: 0 auto;
Altura do botão
Agora teremos uma altura de botão definida via:
// padrão
--button-height: var(--space-8);
Suavização de fonte (Font smoothing)
Já estamos fazendo isso no Horizon, faz sentido trazer para o foundation.
// novo padrão
--webkit-font-smoothing: antialiased;
