errorBorderColor & focusBorderColor couldn't be set using semantic tokens

Description

By using the semantic tokens feature introduced in v1.8+, I’m unable to set the focusBorderColor, or errorBorderColor properties to components like Input etc. I’m using Next.JS v12

Link to Reproduction

https://codesandbox.io/s/compassionate-cray-e534ez?file=/src/index.js

Steps to reproduce

1. _app.js : (Theme setup)

import { extendTheme, ChakraProvider } from '@chakra-ui/react'

const theme = extendTheme({
  semanticTokens: {
    colors: {
	  primary: {
        default: "red.200",
      	_light: "red.500",
      },
  	},
  },
})

export default function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider resetCSS theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

1. login.js : (Doesn’t work)

...

<Input
  type="text"
  focusBorderColor="primary"
/>

...

1. Tentative Solution :

...

<Input
  type="text"
  focusBorderColor="red.200"
  _light={{
    _focus: {
	  borderColor: "red.500",
    },
  }}
/>

...

Chakra UI Version

1.8.3

Browser

Google Chrome v98.0.4

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[TimKolberger]

tldr;

It is currently not possible to use semantic tokens in focusBorderColor and errorBorderColor. A workaround is to extend the theme, which is quite a lot code: See CodeSandbox

Long explanation

The theme styles for the Input component uses getColor to retrieve the color value from the theme:

https://github.com/chakra-ui/chakra-ui/blob/27eec8de744d05eef5bcbd2de651f3a37370ff2c/packages/theme/src/components/input.ts#L98-L106

The semantic tokens rely heavily on CSS variables, which can change with a CSS media query or selector like our dark mode selector. Here is an example of the implementation detail:

--chakra-colors-my-focus-color: #FF0000;
html[data-theme="dark"] {
  --chakra-colors-my-focus-color: #DD0000;  
}

Because of the ambiguity of semantic tokens it is not possible to retrieve an actual color value for it.

Proposed Solution or API

The theme needs a new mechanism to retrieve theme tokens which should replace the usage of getColor() in the theme object.

const reference = getToken(theme, token, fallback)
//  => var(--chakra-<token>)

This way we would be able to reference every token and semantic token in the theme, e.g.:

 _invalid: { 
   borderColor: ec, 
   boxShadow: `0 0 0 1px ${getToken(theme, `colors.${ec}`, ec)}`, 
 }, 
 _focus: { 
   zIndex: 1, 
   borderColor: fc, 
   boxShadow: `0 0 0 1px ${getToken(theme, `colors.${fc}`, fc)}`, 
 }, 

[anapaulalemos]

Hey @anapaulalemos I would use CSS tokens. like this

const theme = extendTheme({
  semanticTokens: {
    colors: {
      gradient: {
        default: "linear-gradient(90deg, var(--chakra-colors-red-500) 0%, var(--chakra-colors-red-200) 100%)"
      }
    }
  }
});

This is the way I’m doing now. Nice. Thanks!