useThemeConfig

The useThemeConfig hook can be used within components that are shared between v2 and v3 apps, and thus can't be converted wholesale to v3. (A good example of this is the Artwork Filter, which is a complex component used in a couple different places.)

Usage

import { useThemeConfig, Box, Text, TextVariant } from "@artsy/palette"

const App = props => {
  const tokens = useThemeConfig({
    v2: {
      px: 5,
      variant: "title" as TextVariant,
    },
    v3: {
      px: 2,
      variant: "lg" as TextVariant,
    },
  })

  return (
    <Box px={tokens.px}>
      <Text variant={tokens.variant}>Hi</Text>
    </Box>
  )
}

What we're doing in the above is defining an object with two keys -- v2 and v3 -- and the useThemeConfig hook will then match against the keys depending on which theme context is currently being used and return the correct values. So you can see that

<Box px={tokens.px}>
  <Text variant={tokens.variant}>Hi</Text>
</Box>

Will return dynamic values for tokens.px -- either px={5} if v2, or px={2} if v3.

On this page
Usage