Modernizando o tema Foundation

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;
29 curtidas

o menu suspenso do botão de resumo tem uma barra de rolagem (talvez overflow na classe fk-d-menu?), e provavelmente não precisa da mesma min-width: 200px que outras classes dropdown-menu semelhantes.

editei: esquece, já corrigido :smiley:

6 curtidas

Eu consigo ver o tema de fundação moderno, mas por que eu ainda tenho o layout de categorias antigo?

Eu acho que a Meta não usa “Caixas com subcategorias”, mas sim “Apenas categorias” na configuração do site Estilo da página de categoria da área de trabalho.

1 curtida

Ops, eu presumi que as capturas de tela foram tiradas no meta, mas nem sequer pensei em verificar.


Comportamento pequeno, mas estranho. No tema normal, quando soltamos o botão do mouse em , ele aciona instantaneamente a animação de mostrar ou fechar a barra lateral.

No novo tema, quando soltamos o botão do mouse em quando a barra lateral está fechada, há uma fração de segundo de espera antes que a animação de deslizar seja acionada. Isso não acontece se clicarmos no ícone quando a barra lateral estiver visível.


Posso sair do grupo para comparar as alterações com o tema antigo? Não vejo a opção de sair.

2 curtidas

ah sim, corrigi isso… agora você deve conseguir sair à vontade

4 curtidas

Você poderia me permitir sair do grupo @modernized-foundation?
Edição: Agora, depois de sair do grupo, posso adicionar uma captura de tela de comparação do novo botão de tópico.
image

Parece que algumas cores de ícones não funcionam bem com a paleta wcag.
image

E, por exemplo, o seletor de grupo no canto superior esquerdo da página do grupo não suporta realmente 2 linhas.

É assim que fica quando eu saio.

2 curtidas

Gosto da maioria das mudanças. Elas são sutis. Algumas eu nem vejo a diferença a menos que eu olhe os valores do CSS :smile: (cores do ícone e do texto da barra lateral, cores de lido e não lido da lista de tópicos)

Antes / Depois
image image

Gosto do botão de novo tópico enfatizado. Eu, na verdade, o personalizei assim no meu fórum há muito tempo \u003csmall\u003e(até meu código quebrar e eu não me dar ao trabalho de consertá-lo)\u003c/small\u003e.


Antes / Depois


Eu também gosto disso; Pelo menos na paleta escura, o azul escuro sobre o cinza escuro era uma combinação estranha.


Antes / Depois

Embora eu goste do novo estilo dos botões, sinto que eles carecem de contraste com o fundo em certas áreas, especialmente no rodapé do tópico.
Parece confuso. Os botões não parecem pertencer a uma seção específica, ao contrário da versão anterior. Eles simplesmente… ficam ali. Não sei se faz sentido.

4 curtidas

Isso parece funcionar na atividade de leitura e tópicos em alguns tamanhos de tela

Mas assim que eu reduzo um pouco a largura, “Replies” e “activity” parecem muito grandes (Este também é um problema em /latest)

Existe um problema semelhante com “updated” e “activity” em /my/activity/bookmarks

Outro exemplo onde a cor do ícone e do texto não correspondem é o botão de expandir no meu perfil

É assim que fica quando eu saio do grupo:

Acho que você não mencionou que não apenas o tamanho da fonte dos cabeçalhos da tabela, mas também o tamanho dos números nas colunas Replies, Views e Activity, parecem ter sido diminuídos.

5 curtidas

Muito obrigado pelo antes/depois. Pensei que estivesse faltando no OP.

Ambas essas mudanças parecem estranhas: o lado do depois parece muito menos contrastado e pode causar problemas de A11y, ou?

Estou indo para o novo grupo para um test drive!

2 curtidas

A palavra “link” no mapa de tópicos é mostrada apenas parcialmente depois que eu me junto ao grupo:

Captura de tela tirada em Add link to sidebar category setting to new admin menu in categories section of the sidebar

E o texto neste modal é difícil de ler ao passar o mouse. Acho que o contraste estava melhor antes

Estou muito ansioso por esta alteração no estilo padrão, quando ela será lançada aproximadamente?

1 curtida

A entrada de pesquisa e o botão de envio estão espremidos!

squish!

edição: apenas no celular

3 curtidas

Todo ótimo feedback/encontro de bugs até agora. Obrigado pelas atualizações.

4 curtidas

Este é um bom ponto levantado. Eu também acho o novo estilo de botão bem legal, mas por algum motivo nesta seção (com tantos deles juntos), não parece muito certo.

4 curtidas

A fonte não lida é mais pesada do que a dos tópicos lidos.
Não percebi isso no desktop, mas vejo no celular.

Parece um pouco brusco para mim.

Eu gostava que o Discourse optasse principalmente apenas por uma mudança de cor, o que parecia mais elegante do que a diferença de peso canônica que vemos em muitos softwares de fórum.

Agora temos ambos. A diferença é sutil, mas eu preferiria apenas uma mudança de cor :paintbrush:

3 curtidas

A última rodada de alterações deve estar ativa em breve a partir da PR aqui: