focusBorderColor does not work with semanticTokens

[mhamid3d]

Description

When I use a color value that is defined in semanticTokens of my theme, it is ignored by focusBorderColor. However if I use a color defined in the colors of my theme, it will work. This in unexpected because it was shown as an example to be working here:

#7708 (comment)

Link to Reproduction

https://codesandbox.io/p/sandbox/chakra-focusbordercolor-zcm8wq?file=%2Fsrc%2Findex.tsx%3A13%2C45

Steps to reproduce

1. Create a theme
2. Make a custom color in semantic tokens
3. Use that color as a prop for focusBorderColor

Chakra UI Version

2.8.2