I want to use all variables name in my global file in my jsx. Pls how do I make this work

I have all colors variables in an array. And I want to loop through it to have the color in as a background on a div.

export const colorThemes = ['light-meadow-green', 'light-pebble-gray', 'light-olive-green', 'light-willow-green', 'light-platinum-white', 'dark-obsidian-blue', 'dark-jade-green', 'dark-ola-purple', 'dark-pine-green', 'dark-prussian-blue', 'dark-charcoal-black', 'dark-rich-black'] as const

<div className='grid border px-3 py-2 rounded-lg grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2'>
                {colorThemes?.map(theme => (
                    <div
                        key={theme}
                        className='flex rounded-sm gap-y-1 flex-col w-20 p-1 place-content-center items-center cursor-pointer hover:border-2 hover:border-zinc-200'
                    >
                        <div
                            className={cn('w-12 h-12 border mt-4 rounded-sm  mx-auto', theme)}
                            style={{
                                background: `var(--${theme}-background) !important`
                            }}
                            data-theme={theme}
                        />
                        <p className='text-xs w-12 text-center font-semibold'>
                            {theme
                                .replace(/-/g, ' ')
                                .toLowerCase()
                                .replace(/^\w/, c => c.toUpperCase())}
                        </p>
                    </div>
                ))}
            </div>

Then in the style.css, I have all style variable like this:

 .light-meadow-green,
    [data-theme='light-meadow-green'] {
        --background: 98 100% 95%;
        --foreground: 98 5% 0%;

        ...
    }

    /* And others css variable names in the array */