useThemeToken is a custom hook used to resolve design tokens from the theme.

Import

import { useThemeToken } from '@passfort/castle'
content_copy
Copy

Return value

The useThemeToken hook retrieves whatever is in the theme at the given path(s).

Usage

function Example() {
  const [red100, blue200] = useThemeToken(
    // the key within the theme, in this case `theme.colors`
    'colors',
    // the subkey(s), resolving to `theme.colors.red.100`
    ['red.100', 'blue.200'],
    // a single fallback or fallback array matching the length of the previous arg
  )

  return (
    <Box p={4} boxShadow={`inset 0 4px 0 ${red100}, 0 0 8px ${blue200}`}>
      You can utilize <Code>useToken</Code> to create a <Code>boxShadow</Code>{' '}
      with colors from your theme.
    </Box>
  )
}
function Example() {
  const [red100, blue200] = useThemeToken(
    // the key within the theme, in this case `theme.colors`
    'colors',
    // the subkey(s), resolving to `theme.colors.red.100`
    ['red.100', 'blue.200'],
    // a single fallback or fallback array matching the length of the previous arg
  )

  return (
    <Box p={4} boxShadow={`inset 0 4px 0 ${red100}, 0 0 8px ${blue200}`}>
      You can utilize <Code>useToken</Code> to create a <Code>boxShadow</Code>{' '}
      with colors from your theme.
    </Box>
  )
}
content_copy
Copy
live example

Note that you can also use the sx prop to write styles freely using themes tokens.