É possível sobrescrever as variáveis do Discourse?

Suporte
1

Olá,

Estou tentando alterar a tipografia, como font-family, font-weight e tamanhos de fonte, usando variáveis do Discourse.

$base-font-family: var(--font-family) !default;
$heading-font-family: var(--heading-font-family) !default;

Então, como posso alterar a variável heading-font-family, como em $heading-font-family: Arial;? Tentei vários métodos, mas as alterações não estão visíveis.

$heading-font-family: Arial;

:root {
  --heading-font-family: Arial;
}

Alguma ideia?

2

Talvez dê uma olhada em https://meta.discourse.org/t/selectable-font-family-component/117493?

3

Obrigado pela resposta.

Na verdade, existe um recurso padrão do Discourse para isso. Mas eu quero fazer uma customização de tipografia mais detalhada.

image
image1480×436 20.6 KB

Então, estou procurando uma maneira de alterar os valores das variáveis. Por isso, pensei que poderia alterar facilmente toda a tipografia.

A partir do variables.scss

// Fontes
// --------------------------------------------------

$base-font-size-smallest: 0.815em !default; // eq. a 13px
$base-font-size-smaller: 0.875em !default; // eq. a 14px
$base-font-size: 0.938em !default; // eq. a 15px
$base-font-size-larger: 1.063em !default; // eq. a 17px
$base-font-size-largest: 1.118em !default; // eq. a 19px
$base-font-family: var(--font-family) !default;
$heading-font-family: var(--heading-font-family) !default;

// Definições de tamanho de fonte, multiplicador ^ (passo / intervalo)
$font-up-6: 2.296em;
$font-up-5: 2em;
$font-up-4: 1.7511em;
$font-up-3: 1.5157em;
$font-up-2: 1.3195em;
$font-up-1: 1.1487em; // 2^(1/5)
$font-0: 1em;
$font-down-1: 0.8706em; // 2^(-1/5)
$font-down-2: 0.7579em; // Menor tamanho que usamos com base no 1em
$font-down-3: 0.6599em;
$font-down-4: 0.5745em;
$font-down-5: 0.5em;
$font-down-6: 0.4355em;

Você acha que é possível alterar essas variáveis?

4

Ah. Eu achei que aquilo parecia antigo e que agora havia uma maneira melhor. Desculpe por isso.

5

Obrigado pela resposta @pfaffman. Espero que haja alguma maneira de sobrescrever essas variáveis. Caso contrário, terei que alterar as classes CSS.

6

Execute novamente o assistente de configuração. A partir da versão beta 2.6, a seleção de fontes agora é uma etapa do assistente de configuração.

7

Obrigado pela resposta @codinghorror. Dessa forma, só podemos escolher certas fontes, certo? E aprendi que essas variáveis não podem ser sobrescritas. Está correto?

8

@bekircem Acabei de testar o assistente na versão 2.7.0.beta1 e as fontes disponíveis são as mesmas das configurações do site que você postou acima (pode ser que eu esteja perdendo algo).

Você provavelmente já descobriu, mas só para garantir, você pode usar o Google Fonts ou substituir as variáveis CSS exatamente como fez no seu OP — o que deveria ter funcionado.

Estou usando este CSS na minha instância e funciona (carregando a fonte via <link/> ou @include).

:root {
  --heading-font-family: 'Inter', sans-serif;
  --font-family: 'Inter', sans-serif;
}