Utility focus ring not working

[FilipePfluck]

Description

I tried to create a focusRing utility like this:

focusRing: {
values: ['1px', '2px', '4px'],
shorthand: 'ring',
transform(value: string) {
return {
_focusVisible: {
outlineWidth: value,
outlineStyle: 'solid',
outlineColor: 'blue.500',
outlineOffset: value,
},
}
},
},

when I try to use it anywhere, Vscode does suggest this property. But it does not work, instead, it shows the default browser focus indicator. If I use just

_focusVisible: {
outlineWidth: '2px',
outlineStyle: 'solid',
outlineColor: 'blue.500',
},

then it works

Link to Reproduction

https://github.com/FilipePfluck/my-components

Steps to reproduce

go to globalCss.ts and try substituting the focus indicator css with the custom property ring
run storybook
see it doesn't work

JS Framework

React (TS)

Panda CSS Version

0.4.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[FilipePfluck]

Update: thanks to @Freddie on discord, I solved this one by changing to
'&:focus-visible': {
outlineWidth: value,
outlineStyle: 'solid',
outlineColor: 'token(colors.blue.500)',
outlineOffset: value,
},
I still think this is worth for the mantainers to take a look, as the "default" sintax doesn't seem to work here. I mean the _focusVisible and the color token without the token() wrapping the value.

[anubra266]

@FilipePfluck

• Utilities should resolve to raw css objects. We convert them straight to css without processing them. SO focusVisible or other conditions can't work there
• Outline color works fine