As folhas de estilos do plugin devem usar propriedades personalizadas CSS para cores

Em poucos dias, vou mesclar este PR no núcleo, que altera a forma como as folhas de estilo dos plugins são compiladas. A mudança afeta as variáveis de cor SCSS usadas nas folhas de estilo dos plugins. O resumo é que elas precisam ser substituídas por propriedades personalizadas de CSS. A maioria dos plugins já foi atualizada e, em muitos casos, essa é uma mudança simples: a variável SCSS precisa ser substituída por uma propriedade personalizada de CSS:

-   background-color: $primary-low;
+   background-color: var(--primary-low);

O guia em Update themes and plugins to support automatic dark mode tem mais exemplos e também mostra como lidar com transformações de cor mais complexas. (Esse guia deve ser tudo o que os autores de plugins precisam para garantir que seus estilos funcionem corretamente.)


Se você está se perguntando por que estamos fazendo essa mudança, continue lendo.

Anteriormente, as folhas de estilo do núcleo e dos plugins eram compiladas por tema para incluir o esquema de cores do tema sempre que as variáveis de cor SCSS eram usadas. Isso significava que um site com muitos temas (ou um ambiente multissítio) levaria muito tempo para pré-compilar, pois teria que multiplicar o número de folhas de estilo do núcleo e dos plugins pelo número de temas ativos para cobrir todas as combinações necessárias.

Desde agosto de 2020, e para suportar a alternância automática de modo escuro, adicionamos uma folha de estilo de definições de cores separada que armazena as variáveis de cor como propriedades personalizadas de CSS. Essa mudança nos permitiu alternar esquemas de cores sob demanda, mas também abstraíu as cores da maioria das folhas de estilo. Graças à mágica das propriedades personalizadas de CSS, agora podemos referenciar cores em todos os lugares (núcleo, plugins, temas) sem precisar carregar cada tema quando a folha de estilo é compilada.

Nos últimos meses, temos convertido todos os plugins para usar propriedades personalizadas de CSS. A grande maioria dos plugins do Discourse já está atualizada, mas provavelmente existe algum plugin por aí que ainda usa variáveis SCSS para cores e precisará ser atualizado.

10 curtidas

Obrigado pela explicação clara. Até eu entendi a maior parte!

Isso vai fazer com que atualizações e reconstruções falhem em sites com componentes de tema que não seguem essas regras? Como aconteceu em Failed to Bootstrap, due to discourse-alt-logo theme component por outro motivo?

Se sim, há uma maneira de tornar a mensagem de erro mais clara (para quem não consegue entender os logs de build)? E algo como “remova o plugin X antes de tentar atualizar”. Ou, melhor ainda, há uma maneira de avisar as pessoas no painel de administração quando soubermos que uma mudança dessas está por vir? (Ou talvez já exista uma que ninguém lê).

2 curtidas

Não, isso não fará com que as reconstruções falhem. Isso apenas fará com que as cores fiquem incorretas em plugins que não foram atualizados. Isso deve acontecer apenas em plugins caseiros; revisei a maioria dos plugins publicados aqui no Meta e garanti que estejam atualizados.

O problema que você vinculou não tem nada a ver com essa alteração; trata-se de um componente de tema e atualmente bloqueamos as reconstruções se um componente de tema marcado para atualização automática não puder ser atualizado automaticamente.

4 curtidas

Ah. Ufa. Desculpe por isso. Ainda estou tentando entender essas peças.

2 curtidas

Ok, encontrei um problema no modo escuro. Onde/qual configuração de cor devo ajustar para o texto citado?

Está tudo bem nas categorias públicas, mas nas bolhas de mensagens privadas está ilegível.

Tentei algumas buscas, mas não consegui encontrar o termo correto.

Isso também afeta o link de um tópico.