gradient semantic token not being resolved in component

[jim4067]

I'm trying to use a gradient token blackGradient (defined inside semanticTokens) field inside panda.config.ts as a CSS property but it's not working

here's how it looks

export default defineConfig({
 //---- snip
	theme: {
		extend: {
			semanticTokens: {
				gradients: {
	                                  blackGradient: {
		                                  value: "linear-gradient(98.29deg, #353535 -4.59%, #000000 100%)",
	                                  },
                                },
				fontSizes: {
					sm: { value: "12px" },
				},
			},
		},
	},
// ------ snip
});

However I cannot use blackGradient as a CSS property inside my components as illustrated below

export const PrimaryButton = styled(BaseButton, {
	base: {
		background: "blackGradient",
		// background: "var(--gradients-black-gradient)",
		border: "2px solid token(colors.primary)",
		_hover: {
			background: "black",
			color: "white",
		},
	},
});

Do I have to use the var() to resolve this or am I doing something wrong?

[astahmer]

that seems fine here https://play.panda-css.com/WUiYlvvV3i
can you make a minimal repro ?

[jim4067]

I was using background instead of bgGradient