Ability to Add New Colors

[MrVauxs]

Describe the feature in detail (code, mocks, or screenshots encouraged)

I have created a custom interact color palette to substitute the primary theme when it comes to interactable text, as it was too dark and I wanted it be a different color anyway.

I was able to go most of the way until the token utility classes. I have found that all you need to do is to add the new color name to the colorNames array in settings.cjs.

All that is needed really, is the ability to modify those settings in the skeleton config, as far as I have seen.

What type of pull request would this be?

New Feature

Provide relevant links or additional information.

No response

[MrVauxs]

For those who want to add new colors now, you can use npx patch-package @skeletonlabs/skeleton after modifying the settings in node_modules/@skeletonlabs/skeleton/dist/tailwind/settings.cjs. Then add a postinstall script to your package json so everyone cloning your repo can use it.

https://stackoverflow.com/questions/13300137/how-to-edit-a-node-module-installed-via-npm

[endigo9740]

All Skeleton does to inject colors is follow the instruction Tailwind provides here. The colors are provided to the Tailwind config through our plugin, but you're able to do the same directly:

https://tailwindcss.com/docs/customizing-colors#using-custom-colors

In our case, we specifically use CSS properties and the RGB format so we can support transparency:

https://tailwindcss.com/docs/customizing-colors#using-css-variables

You're right though - this won't expand our utility or token classes, because these are canned styles created before our build process and distribution of the package. But you can always review how we generate these classes and expand your project yourself as you wish. Just drop the extra classes into app.postcss or your own stylesheet you import.

It's never recommended to modify a node_modules package, because the moment you have to update the package it will nuke all your customizations. I'd definitely recommend against ever doing that.

That said, we do have some major changes coming to our Tailwind plugin in Skeleton v2:
#1660

@AdrianGonz97 might have some insight onto how we could potentially expand the utility classes via this. But off the top of my head it wouldn't be something added in the near future.

[MrVauxs]

Yeah, I have already done everything I could in Tailwind.

While I know modifying node modules is a bad idea, a single addition of a string to an array is unlikely to cause issues unless you delete settings.cjs entirely.

[endigo9740]

While I know modifying node modules is a bad idea, a single addition of a string to an array is unlikely to cause issues unless you delete settings.cjs entirely.

Sorry, but hard disagree here. Node modules are not intended to be modified. "Can" and "should" are two different things. You're welcome to do this in your own project as you wish, but we'll never condone this for users.

If Adrian can supply some ideas for providing support for this through the new plugin, we'll consider this feature. Otherwise we will not move forward with this request.

[endigo9740]

I think we've done everything we can now for this ticket. If Adrian gets some free time and wishes to review my proposed ideas in the future then I would welcome that. But as it stands your best means for expanding the color palette is via the standard Tailwind configuration methods.