search

L-Blondy / tw-colors

Tailwind plugin to easily add multiple color themes to your projects.
MIT License
456 stars 14 forks source link

Handle nested color objects #2

Closed tderkert closed 1 year ago

tderkert commented 1 year ago

Hi, this plugin looks very promising for creating themes without duplicating work in the markup. However, I instantly ran into an issue when trying it out: So I have a bunch of color object definitions I want to to handle in a theme. That syntax is supported in Tailwind CSS color definition, but didn't work with tw-colors.

Example:

colors: {
    foreground: {
        1000: 'rgba(255, 255, 255, 1)',
        700:  'rgba(255, 255, 255, 0.7)',
        600:  'rgba(255, 255, 255, 0.5)',
        500:  'rgba(255, 255, 255, 0.3)',
        200:  'rgba(255, 255, 255, 0.2)',
        100:  'rgba(255, 255, 255, 0.1)',
        50:  'rgba(255, 255, 255, 0.06)',
    },
}

I suppose I could flatten the values (foreground-100,foreground-200, ...), but ideally it should work just as Tailwind CSS config definition, right? What do you think?

I looked into the code to see if I could figure out how add this functionality, but couldn't figure it out.

L-Blondy commented 1 year ago

Definitely agree with you, I'll add support for nested objects in the next release. Thanks for your feedback

L-Blondy commented 1 year ago

Added support for nested color objects in version 1.1.0