Dropdown Select-kit: itens selecionados/destacados têm baixo contraste de cor, texto e ícones desaparecem

Ao usar o menu suspenso de notificação de tópico (Watching/Tracking/Normal/Muted), o texto e o ícone do item atualmente selecionado ficam invisíveis devido ao contraste insuficiente entre a cor de fundo da seleção e as cores de primeiro plano.

Passos para reproduzir

  1. Abra qualquer tópico

  2. Clique no botão do sino de notificação na parte inferior do tópico

  3. Observe o nível de notificação atualmente selecionado (ex: “Tracking”)

Comportamento esperado

O item selecionado deve ter texto e ícone claramente visíveis com bom contraste.

Comportamento atual

  • O rótulo de texto desaparece ou se torna muito difícil de ler

  • O ícone do sino fica invisível

  • O problema é mais perceptível em temas escuros, mas pode afetar qualquer tema dependendo da paleta de cores

Detalhes técnicos

Em app/assets/stylesheets/common/select-kit/select-kit.scss, o estado .is-selected define apenas a cor de fundo sem garantir o contraste de primeiro plano:

&.is-selected,
&.is-selected.is-highlighted {
  background: var(--d-selected);
  // Nenhuma substituição de cor para texto ou ícones
}

A variável CSS --d-selected vem da cor $selected do tema, mas o texto (.name, .desc) e os ícones (.d-icon) mantêm suas cores padrão, que podem não contrastar bem com o fundo da seleção.

Capturas de tela

Nota: Eu teria adicionado a outra imagem onde o ícone desaparece para o estado selecionado, mas sou novo e só posso adicionar uma imagem por vez.

Ambiente

  • Versão do Discourse: latest

  • Navegador: Edge

  • Tema: Tema Foundation

2 curtidas

Esta é uma restrição para novos usuários. Você pode navegar por alguns tópicos existentes para que seu nível de confiança aumente rapidamente para 1.

Não consigo reproduzir este bug.

@BrettH Isso acontece no modo de segurança?

Parece que sua paleta de cores não é atualizada há algum tempo, porque essa não é a cor de seleção normal. Quando foi a última vez que você atualizou seu fórum?

2 curtidas

Poderia estar relacionado a

?

Sim, este é provavelmente o caso — eu já vi situações como esta em que uma paleta de cores personalizada criada antes da adição de novas cores acaba com baixo contraste… @BrettH se você criar uma nova paleta de cores e usar essa, o problema persiste?

2 curtidas

Obrigado a todos pelas sugestões. Deixem-me responder às perguntas:

NateDhaliwal - Eu ainda não testei no modo de segurança, mas com base no que chapoi e Kris estão descrevendo, suspeito que o modo de segurança resolveria, pois voltaria para a paleta Light padrão em vez da minha personalizada.

@chapoi - Boa pergunta. Nossa paleta de cores foi criada há bastante tempo - definitivamente antes que as cores selected (selecionado) e hover (passar o mouse) fossem adicionadas à paleta base. Acredito que a paleta foi configurada quando lançamos a comunidade e não a atualizamos desde então.

@awesomerobot - Isso faz sentido. Olhando o código, posso ver que resolved_colors calcula valores de fallback (reserva) para hover e selected usando dark_light_diff se eles estiverem ausentes na paleta. Mas o problema é que as cores do texto (.name, .desc, .d-icon) ainda usam seus valores padrão, que foram projetados para a cor de seleção da paleta Light padrão - não para o fallback calculado para o meu tema mais escuro.

Vou criar uma nova paleta e definir explicitamente as cores selected e hover para valores que contrastem adequadamente. Suspeito que isso resolverá o problema.

Uma ideia enquanto estou testando: faria sentido o cálculo de fallback também considerar o contraste do texto? Dessa forma, paletas mais antigas lidariam graciosamente com novas adições de cores sem intervenção manual. Apenas uma ideia - eu sei que sistemas de cores são complicados de acertar, e a abordagem atual provavelmente cobre a maioria dos casos. Ficarei feliz em abrir uma solicitação de recurso separada se isso for útil.

Obrigado pela ajuda em rastrear isso!

2 curtidas