error Unable to parse color from string: var(--color-primary)

[ablfaxl]

I use hero ui in Truborepo and I want to configure theming with CSS variables but I got this error
error Unable to parse color from a string: var(--color-primary)

Do you have any suggestions on how I can fix it?

const baseConfig = require('../../packages/tailwind-config/tailwind.config.js')
const { heroui } = require('@heroui/react')

module.exports = {
  ...baseConfig,
  plugins: [
    ...(baseConfig.plugins || []),
    heroui({
      themes: {
        light: {
          colors: {
            primary: 'var(--color-primary)',
            background: '#ffffff',
            content1: '#e5e5e5'
          }
        },
        dark: {
          colors: {
            primary: '#0800f3',
            background: '#121212',
            content1: '#333333'
          }
        }
      }
    })
  ],
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        background: 'var(--color-background)',
        content1: 'var(--color-content1)'
      }
    }
  },
  content: [...(baseConfig.content || [])]
}

[linear]

ENG-2004 error Unable to parse color from string: var(--color-primary)