Olá,
Tentei substituir as novas variáveis de border-radius com um tema remoto, mas parece que as variáveis :root principais são sempre priorizadas. Posso substituí-las se criar um componente de tema no admin. Existe alguma maneira de substituí-las com um tema? O que estou perdendo? 
Essa pequena mudança é tão útil, muito obrigado! 
Ok, funciona como esperado, apenas meu site de teste estava me enganando.
Ah, parece que não foi uma piada 
Com o tema remoto, só consigo substituí-lo se usar !important.
Se eu usar assim 
$border-radius: 2em !important;
:root {
--d-button-border-radius: #{$border-radius};
--d-input-border-radius: #{$border-radius};
}
Caso contrário, se eu tentar assim
:root {
--d-button-border-radius: 2em;
--d-input-border-radius: 2em;
}
Então as variáveis :root principais têm prioridade.
O que estou perdendo? 
Obrigado!
Está funcionando quando eu testo em um tema… a raiz principal é substituída pela raiz do tema, como esperado.
Você pode mostrar mais informações? Onde você define sua raiz? Como está o seu inspetor?
Olá Charlie,
Obrigado por verificar isso
Tentei adicionar em scss/custom-variables.scss e importá-lo para common.scss. E também tentei adicionar diretamente a common.scss.
Só percebi agora que funciona se não houver outro componente (criado no admin) atribuído ao tema. Se eu criar um componente no admin com algum CSS na seção comum. Então ele não substituirá as variáveis raiz principais para mim.
Funciona se o tema não tiver componente ou se o componente Comum / CSS estiver vazio.
Se eu criar um componente com algum Comum / CSS e ativá-lo para o tema.
Então não está funcionando para mim.
O d-default-border-radius e d-select-body-border-radius são personalizados.
Obrigado pela ajuda!
Entendi. Muito interessante. Obrigado pelas instruções claras.
Vou ver o que consigo fazer. No momento, estou cético quanto a uma solução diferente do !important que você já está usando, mas será bom saber como/por que isso está funcionando assim.
hmm sim, eu consigo reproduzir isso… é um pouco estranho.
Eu tenho um tema remoto e tudo o que common.scss contém é:
:root {
--d-border-radius: 100px;
}
isso funciona e eu obtenho botões arredondados e outros elementos:
Assim que eu adiciono um componente de tema local que contém CSS, ele quebra. Eu criei um componente de tema local que contém apenas isso em common.scss:
body {
background: red;
}
Eu obtenho o fundo vermelho, mas o border-radius desapareceu:
O mesmo componente funciona bem remotamente. Eu obtenho tanto o fundo vermelho quanto as bordas arredondadas.
@david/@pmusaraj isso tem algo a ver com a ordem de como temas remotos e locais são compilados?
Acho que isso tem a ver com a nossa injeção mágica de variables.scss em todos os arquivos CSS de tema. Agora, temos isto em variables.scss:
:root {
--topic-body-width: #{$topic-body-width};
--topic-body-width-padding: #{$topic-body-width-padding};
--topic-avatar-width: #{$topic-avatar-width};
--d-border-radius: initial;
--d-nav-pill-border-radius: var(--d-border-radius);
--d-button-border-radius: var(--d-border-radius);
--d-input-border-radius: var(--d-border-radius);
}
E como injetamos esse arquivo SCSS em todos os arquivos SCSS de tema e plugin, ele é repetido várias e várias vezes:
A única maneira de substituí-lo atualmente é adicionar a substituição à última folha de estilo do tema, somente então ela é gerada por último.
Acho que precisamos mover essa declaração :root para algum lugar global fora de variables.scss no core.
Aha! muito obrigado, eu nunca realmente processei por que eles são repetidos e simplesmente os ignorei completamente.
Relocuei-os para outro arquivo para que não sejam repetidos e confirmei que isso resolve o problema.
