How to style a list of components with global theme values?

[dpnunez]

I'm creating some test scenarios to get experience with vanilla-extract. One of the tests would be to dynamically style a list of components with the theme values, I tried to style using createVar, but it can only be used for one style.

I set up a way that works but I don't believe it's the best possible way.

I assembled the codes in React/Vite:

App.tsx

import React from 'react'
import { buttonStyles } from './app.css'
import { vars } from './theme.css'

interface ButtonProps {
  children: React.ReactNode
  bgColor: keyof typeof vars.colors
}

const Button = ({ children, bgColor }: ButtonProps) => {
  return (
    <button
      className={buttonStyles}
      style={{
        backgroundColor: vars.colors[bgColor],
      }}
    >
      {children}
    </button>
  )
}

function App() {
  return (
    <div className="App">
      {Array.from({ length: 10 }).map((_, i) => {
        const color: keyof typeof vars.colors =
          i % 2 === 0 ? 'primary' : 'secondary'

        return (
          <Button bgColor={color} key={i}>
            Button {i}
          </Button>
        )
      })}
    </div>
  )
}

export default App

theme.css.ts

import { createGlobalTheme } from '@vanilla-extract/css'

export const vars = createGlobalTheme(':root', {
  colors: {
    primary: 'red',
    secondary: 'blue',
  },
})

The idea of ​​the application is:
if the iteration index is even, put the primary color, if odd the secondary