Gerar variáveis de css baseadas no style.json ou no estilo selecionado

[tiago-freire]

O style.json ou o estilo selecionado em /admin/cms/styles gera classes como:

• .c-on-base
• .c-on-base--inverted
• .t-heading-1
• .t-heading-2
• etc.

Na customização de componentes através do override de CSS, não é possível reaproveitar essas classes. Seria muito interessante se, na geração dessas classes, fossem geradas também variáveis de CSS. Dessa forma, as classes acima também teriam variáveis correspondentes para armazenar valores de cores, tamanhos etc. Assim, a geração dessas classes poderia ser assim:

:root {
  --c-on-base: #000; /* exemplo de valor da cor base */

  /* todas as outras variáveis aqui */
}

.c-on-base {
  color: var(--c-on-base);
}

  /* todas as outras classes aqui, utilizando as variáveis seguindo a mesma forma */

Assim, essas variáveis poderiam ser reutilizadas nos componentes customizados via override de CSS.

What problem are you trying to solve?. Não é possível reaproveitar estilos globais em componentes customizados via override de CSS.

Describe the solution you'd like Além das classes que já são geradas, gerar variáveis de CSS com os estilos globais.

Why do you think this feature should be available to all stores? Facilitar a reutilização de estilos globais.

[titaMidLevelFrontend]

holaa, tambien tengo el mismo problema, es imposible utilizar variables de css. y considero no deberian estar obsoletas u omitidas ya que eso es general y deberian poder utilizarse para no duplicar código y tener buenas prácticas del mismo.

Espero puedan solucionar esto pronto

[tiago-freire]

holaa, tambien tengo el mismo problema, es imposible utilizar variables de css. y considero no deberian estar obsoletas u omitidas ya que eso es general y deberian poder utilizarse para no duplicar código y tener buenas prácticas del mismo.

It's possible create css variables yet.

You can try:

:local(:root) {
    /* your variables here */
}

This code can stay in a vtex.store.css file and the variables will be available for any css file.

The current PR refers to generated styles created from styles/configs/styles.json