Paletas de cores carregando incorretamente com 2.7.0.beta5

Atualizado para a versão 2.7.0.beta5 esta manhã e muitas cores mudaram. Parece que a Paleta de Cores não está sendo lida corretamente e, em vez disso, está sendo usada a paleta de cores padrão que você obtém ao clicar em Nova Paleta. Os dois temas abaixo utilizam duas paletas de cores diferentes, mas ambos acabam com a paleta “Nova Paleta de Cores” do Discourse → Paleta Base: Clara definida na primeira linha do CSS.

Exemplo 1:
Esta é a Paleta de Cores do tema:

Aqui está a primeira linha do CSS:

$primary: #222222 !default; $secondary: #ffffff !default; $tertiary: #0088cc !default; $quaternary: #e45735 !default; $header_background: #ffffff !default; $header_primary: #333333 !default; $highlight: #ffff4d !default; $danger: #e45735 !default; $success: #009900 !default; $love: #fa6c8d !default;

Exemplo 2:
Esta é a Paleta de Cores do tema:

Aqui está a primeira linha do CSS:

$primary: #222222 !default; $secondary: #ffffff !default; $tertiary: #0088cc !default; $quaternary: #e45735 !default; $header_background: #ffffff !default; $header_primary: #333333 !default; $highlight: #ffff4d !default; $danger: #e45735 !default; $success: #009900 !default; $love: #fa6c8d !default;

Se eu começar com um tema novo em branco e adicionar uma paleta, funciona como esperado, mas para meus temas existentes, a Paleta Clara Padrão é carregada em vez da Paleta atribuída.

1 curtida

Até agora, a única maneira que encontrei de contornar isso é adicionar manualmente as variáveis de cor do Sass que desejo a cada tema e componente.

1 curtida

Não consegui reproduzir esse problema… se você alterar a paleta de cores em um tema existente, ela permanece incorreta?

3 curtidas

Parece que temos o mesmo problema. Atualizamos para a versão 2.7.0.beta5 (6c57f6f49d) e o esquema de cores não foi mais aplicado em nosso componente de tema.

Usamos:

#meta-links {
    background-color: $header_background;
}

mas a cor de fundo era #fff em vez da cor definida no esquema de cores.

Tentei:

  • reatribuir o esquema de cores ao tema
  • copiar o esquema de cores e atribuir a cópia ao tema
  • reatribuir o componente de tema ao tema

mas nada pareceu funcionar. A solução alternativa atual é definir manualmente a cor no CSS.

2 curtidas

Parece que o que está acontecendo é que o tema base carrega a paleta correta, mas nenhum dos componentes o faz. Assim, as partes da página que não usam componentes exibem as cores corretas, mas as partes que dependem de componentes carregam a paleta padrão “Light” do Discourse em vez de usar a paleta atribuída ao Tema.

Das Ferramentas de Desenvolvedor:
color_definitions.scss tem a paleta correta

desktop.scss tem a paleta correta
image

theme_174.scss, que é um componente, usa a paleta Light padrão
image

theme_171 é um componente que consiste apenas nestas linhas de CSS em common.css e nada mais:

#banner {
    margin: auto 20px;
    background-color: $primary-low;
    max-width: 880px;
    border: 1px solid #999 ;
}
2 curtidas

Obrigado @gkln e @smrtey pelos detalhes adicionais… uma coisa a tentar é desativar os componentes um por um para ver se isso altera algo… É possível que haja um erro silencioso que não está sendo apontado em algum lugar, e isso pode estar quebrando o CSS dos componentes.

Parece que isso acontece com qualquer componente que usa variáveis de cor SCSS. Tudo funciona perfeitamente se eu adicionar manualmente as cores a cada componente individualmente:

$primary: #22262a !important; $secondary: #fefefe !important; $tertiary: #2572e4 !important; $quaternary: #518ee9 !important; $header_background: #1550a7 !important; $header_primary: #fcfcfc !important; $highlight: #9edaf5 !important; $danger: #ff7114 !important; $success: #85cc54 !important; $love: #de0100 !important;

mas isso está longe de ser uma solução ideal. Não vejo como posso solucionar esse problema. Não há absolutamente nenhuma maneira de eu ter capacidade para descobrir o que poderia fazer o Discourse carregar uma paleta de cores diferente.

1 curtida

Ok, @pmusaraj olhou mais de perto e encontrou o bug… ele foi corrigido aqui:

…então atualizar seus sites novamente deve resolver o problema.

Se esses forem componentes de tema que você criou, recomendamos atualizá-los para usar propriedades personalizadas de CSS em vez de nossas variáveis SCSS. A mudança significa que você pode usar o modo escuro automático e torna as substituições de cores mais fáceis. Mais detalhes aqui:

6 curtidas