Does createVar() work in createTheme()?

[cojoclaudiu]

Hello, I have this situation when I'm creating a theme,

I've got this theme where I'm using a createVar() inside createTheme().

when I assignInline the padding_top and padding_bottom the value is not updated and I still see the same fallback value

import {
  createTheme,
  createThemeContract,
  createVar,
  fallbackVar,
  globalStyle,
} from '@vanilla-extract/css';

const padding_top = createVar();
const padding_bottom = createVar();

const TOP = fallbackVar(padding_top, '6rem');
const BOTTOM = fallbackVar(padding_bottom, '6rem');

const themeBase = createThemeContract({
  paddingX: null,
  paddingY: null,
  paddingXY: null,
});

const dynamicTheme = createTheme(themeBase, {
  paddingX: '10rem',
  paddingY: `${TOP} 0 ${BOTTOM} 0`,
  paddingXY: `${TOP} 10rem ${BOTTOM} 10rem`,
});

export const styles = {
  theme: dynamicTheme,
  vars: {
    padding_top,
    padding_bottom
  }
};

the createTheme is added to the class name attr on the parent element and the padding top and bottom are updated using assignInlineVars.

I see the variables are updated but when I'm using paddingXY the block doesn't updates with that values.

[askoufis]

This is just a quirk of how CSS custom properties work.

When defining dynamicTheme at the parent level, it uses the values of TOP and BOTTOM as currently defined, because you haven't set padding_top or padding_bottom. When you set padding_top or padding_bottom in a child, that doesn't force the already computed TOP or BOTTOM variables to update.

This can be clearly seen in Chrome devtools:

Firefox actually displays this incorrectly. It thinks that the defined padding_top and padding_bottom variables are defined in the dynamic theme, but they're not (couldn't screenshot the hover tooltip in firefox):

[askoufis]

Seems the user resolved this a while ago. https://discord.com/channels/885877446098964512/1214606893197299822/1214977235249791009