Responsive variables in vanilla-extract.style

[cojoclaudiu]

I think this will be useful and it took me few tryings until I've got the variable responsive.

I didn't find any similar example and I've decided to posed just in case some else needs to make CSS responsive variables using vanilla-extract.style

const breakpoints = {
	sm: "640px"
};

export const theme = createGlobalTheme(':root', {
	sizes: {
		navigation: '8.5rem',
	},
});

globalStyle(':root', {
	'@media': {
		[`screen and (max-width: ${breakpoints.sm})`]: {
			vars: { [theme.sizes.navigation]: '7rem' },
		},
	},
});