search

JavierM42 / tailwind-material-colors

TailwindCSS Plugin to use the Material 3 Color System with Tailwind, including Dynamic Color support.
57 stars 11 forks source link

Allow to darken / lighten result in config #1

Closed aliyss closed 1 year ago

aliyss commented 1 year ago

Hiya

First of all thanks for the package.

I wanted to ask if it is already possible or if one could extend the package, so that it allows for a config, where one could fine grain the output by passing in a darkener / lightener to generate the results.

Here's an example of the output I am trying to achieve:

Default image

Darker image

I saw that there is a Scheme.dark function which leads to material-color-utilities being called, but that can't be extended. So in my opinion the colors would have to be changed after they are generated.

JavierM42 commented 1 year ago

Hi! Well, first of all thank you for trying it out :)

Initially, your post tempted me to say "sure, let's build ways to fine-tune the color palette right into the plugin". However, I see no clear line between what should be included and what shouldn't. Lightening or darkening one of the palettes could be useful, but then... why not allow a config option to lighten/darken just one of the colors instead of all of them at once, or perform other operations over them such as changing saturation?

Also, as soon as we start fine-tuning the colors, we invalidate Google's color research into safe contrast, which may be dangerous to do dynamically based on user input.

I see two routes you can take:

  1. You can fork the project. Then, transform the colors object in line 7 of index.js to apply color operations over the resulting colors (I've used chroma-js for these before, but there's lots of packages you can use) . If you keep to hex color format, the rest of the plugin should work. For dynamic colors, do the same after the tailwindThemeFromColor function is called in the updateTheme.js file.

  2. If your project doesn't really need dynamic color and you want to fine-tune the palette just once, you can just use the Material Theme Builder as a starter, build the theme object manually, tweak the HEX values by hand, then use tailwind-material-surfaces and tailwind-mode-aware-colors packages instead of this one, as you won't be generating any new palettes but using a hardcoded one.

Please let me know if this makes sense, I'm glad to help if you need me to.

aliyss commented 1 year ago

Thanks a lot for the explanation. I see that it might not make sense for the colors to be modified.

I do need the dynamic colours, so will probably opt for option 1. Thanks for the hints.