styled-components / xstyled

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
https://xstyled.dev
MIT License
2.27k stars 107 forks source link

Are nested color objects in theme supported? #413

Open YassienW opened 10 months ago

YassienW commented 10 months ago

I wasn't sure if i should file a bug report or not, so i'm asking first. I organize my colors as follows:

const theme: AppTheme = {
  colors: {
    blue: {
      1: '#83879c',
      2: '#B6B9CB'
      //3: etc..
    }
  }
}

Considering a simple button component that uses the xstyled color prop:

<Button color="blue.1"/>

I get this typescript error:

image

Should i change the way i organize my colors because this is expected? Or should it not throw a type error? The color itself works as it should, but the type is causing the problem