Nested use of variables in themes

[ksesong]

Hi,

I am trying to port an existing stylesheet into vanilla-extract, which uses a previously defined variable to define itself, something like:

:root {
  --rgb-white: 255, 255, 255;
  --color-background: rgb(var(--rgb-white));
}

How can I achieve this with vanilla-extract? I guess the option of globalStyle is still possible, but I wonder whether there is a better solution.

[tmm]

export const colorVars = createGlobalTheme(':root', {
  white: '255, 255, 255',
})

export const functionalColorVars = createGlobalTheme(':root', {
  background: `rgb(${colorVars.white})`,
})

[mattcompiles]

If you ever need just a single var you can also use the createVar API