Best practice to use theme chart colors in ChartConfig

[mark-buhagiar]

As far as I was able to tell the docs does not cover this scenario, but maybe I misunderstood.

I have an array of chart colors defined in my css.

    --chart-1: 146, 43%, 36%;
    --chart-2: 12 76% 61%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;

These are exposed in my tailwind.config.ts

export default {
  darkMode: ['class'],
  content: ['./index.html', './src/**/*.{ts,tsx,js,jsx,mdx}'],
  theme: {
    extend: {      
      colors: {       
        chart: {
          1: 'hsl(var(--chart-1))',
          2: 'hsl(var(--chart-2))',
          3: 'hsl(var(--chart-3))',
          4: 'hsl(var(--chart-4))',
          5: 'hsl(var(--chart-5))',
        },
      },
    },
  },
}

What? I would like to use the color from the tailwind config without directly referencing the CSS variable.
Why? If that variable ever gets renamed (for whatever reason) I only want to need to update my reference in the tailwind cofig itself.

I've managed to get this to work by doing the following:

import resolveConfig from 'tailwindcss/resolveConfig';
const fullConfig = resolveConfig(tailwindConfig);


const chartConfig = {
  desktop: {
    label: 'Desktop',
    color: String((fullConfig.theme.colors as any).chart[2] ?? 'blue'),
  },
} as ChartConfig;

However, I am wondering if there is a better way to set this up?