Tenho uma cor primária padrão: #4d238c. O problema é que a cor gerada para $primary-medium (#a179de) não atende às diretrizes de acessibilidade, então preciso deixá-la mais escura.
Parece trabalhoso alterá-la em todos os lugares onde o sistema está usando a cor média, quando eu poderia simplesmente sobrescrever $primary-medium para, por exemplo, vermelho.
Sim, entendo perfeitamente. No momento, não há como substituir diretamente nenhuma das variáveis secundárias que geramos automaticamente, pois todas são definidas de forma fixa na construção do CSS. Portanto, a curto prazo, você precisará fazer essas alterações manualmente.
Alguma explicação:
Os esquemas de cores são projetados para ser uma maneira super simples de definir cores; qualquer coisa mais específica que isso precisa ser feita com CSS personalizado. Isso foi discutido um pouco mais aqui: Customizing colors - #2 by awesomerobot
Algumas coisas para refletirmos:
Não acho que um editor avançado de esquemas de cores que permita substituir essas variáveis secundárias seria uma má ideia, mas, como elas são usadas de forma tão ampla, você provavelmente ainda precisaria escrever algum CSS de qualquer maneira.
Por exemplo… você pode querer substituir todas as ocorrências de texto de $primary-medium… mas ela também aparece em locais para bordas e outros elementos onde o maior contraste de $primary-medium não seria desejável. Então, na melhor das hipóteses, um editor de cores avançado reduziria a necessidade de CSS personalizado, mas não a eliminaria completamente.
Dito isso… o principal problema aqui é o contraste do texto para acessibilidade, certo? Nossos estilos padrão falham em termos de contraste de texto em algumas áreas, e é possível que, se melhorarmos isso, esse nem seria um problema para você desde o início…
Portanto, acho que, num futuro próximo, nossa equipe pode analisar a acessibilidade padrão do texto e, mais adiante, podemos melhorar nossas ferramentas de esquemas de cores para considerar a acessibilidade (https://cloudflare.design/color/ é um experimento legal que leva em conta o contraste do texto, por exemplo).
Olá Kris,
Obrigado pela resposta tão rápida.
Sim, nossa principal preocupação é a acessibilidade, pois estamos utilizando seu produto em um contexto governamental.
Encontrei uma solução alternativa para a questão do contraste de forma passo a passo, mas, como conversamos, seria ideal que as cores padrão já fossem acessíveis.
O site, no entanto, não está falhando apenas no contraste; por exemplo, outros elementos que frequentemente falham são: itens de lista ( <li> ) que não estão contidos dentro de elementos pai <ul> ou <ol>.
Mas, por enquanto, o contraste é o único aspecto que consigo controlar, então está tudo bem até que uma correção seja implementada.
Deparamo-nos com este tópico devido a um problema semelhante. Resolvemos com uma solução alternativa adicionando o seguinte ao CSS comum do tema:
:root {
--primary-medium: #666666;
}