Overwriting variables inline...

[magicspon]

Hello,

Loving panda.

Maybe i've missed something, but at the moment in order to overwrite a theme variables with an inline style I'm having to do this:

import type { Token } from '@spon/styled-system/tokens'
import { token } from '@spon/styled-system/tokens'

// convert var(--gary) to --gary
export function getTokenKey(input: Token) {
	const value = token.var(input)

	return value.replace('var(', '').replace(')', '')
}


function Waffles() {
	const token = getTokenKey('colors.accent')

	return <div style={{ [token]: 'blue' }}  />
}

Is there a native "panda css" way of doing this. (with hashing)?

ta

[anubra266]

@magicspon I'm not entirely sure what you're trying to do. But this might be helpful
https://panda-css.com/docs/concepts/virtual-color

[magicspon]

Say I've got a background colour coming from a cms.

const cmsValue = 'blue'

if i want to overwrite the color.background token, I need to get the variable name (--colors-background) and update the value

style={{ '--color-background': cmsValue }}

The string color-background is going to get hashed so I can't rely on that.

However token.var('color.background') will return the hash variable (var(--94hoda))

So I just need to get the --94hoda bit out of the value, and use in my style.

[astahmer]

your initial solution looks fine

[magicspon]

@astahmer

It's that what this tool does.
https://github.com/astahmer/pandabox?tab=readme-ov-file#pandaboxutils

assignInlineVars