Support extra colours being added to the theme

[liamwh]

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

I want to be able to extend the number of colours in the theme, so that after adding the the inform colours to the theme, the following works:

<button type="button" class="btn preset-filled-inform-500">Button</button>
<button type="button" class="btn preset-inform-primary">Button</button>
<button type="button" class="btn preset-outlined-inform-500">Button</button>

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

No response

[endigo9740]

Hey @liamwh this is very much a feature I'd love to see added in the future. To set expectations, it likely won't make it by the upcoming Skeleton v3 release. There's two primary reasons for this:

1. I'm not sure there's a technical way to do this in Tailwind yet. The reason being is we need some way to ingest the color names through the plugin, pass that to the scripts that generate our classes, and ensure your theme is extended with the matching color values.
2. The upcoming Tailwind v4 release is a HUGE change that will likely be the focus of our next potential major release. It will change a lot about how we interact with and expand Tailwind via plugins, etc. Including how we might provide additional color values.

To give you a more concrete example, here's how we inform Tailwind's built-in features (ex: bg-, fill-, etc) of the new available colors:
https://github.com/skeletonlabs/skeleton/blob/next/packages/skeleton/src/plugin/extends/colors.ts#L9

We essentially loop through our combination or color names and shade values (50-950) to ensure Tailwind is aware of the new color values. Then the Skeleton theme inserts the matching CSS Custom Properties (aka variables) that provides the actual color value in an RGB format. So that part is straight forward.

Additionally we follow a similar process to generate additional utility classes that Tailwind does not include by default. Examples being presets like you mention above. These follow a similar process where they are generated with a loop:
https://github.com/skeletonlabs/skeleton/blob/next/packages/skeleton/src/plugin/utilities/presets.ts

So again, there's the possibly we could pass in additional color names via the plugin, include those in the source array for color names, and then allow these loops to generate the extra values. However, that's all theoretical. I have no idea if it's possible in practice! :)

But even if it is, it may be more conducive to wait until Tailwind reconfigures things in their v4 release, and then implement it then. So with that said, I will mark this as part of our "future updates" milestone.

Thanks for the suggestion!

[MrVauxs]

I think a nice alternative would be to provide exported utility functions that recreate your tailwind styles generation, so the end-developer can use it with their own list of colors and a name for it, while still outside of Skeleton's theme-space.

[endigo9740]

@MrVauxs that only solves half the problem though - you get more colors for Tailwind native utilities, but you don't get them for any internal Skeleton features.

If you're goal is to expand your Tailwind color palette, beyond what Tailwind and Skeleton provide, we're not a limiting factor for that. You can do that right now using the same mechanisms we do (in your tailwind.config or a custom plugin):
https://tailwindcss.com/docs/customizing-colors#using-css-variables

And if you need a tool to generate a similar palette set, you can do that using the existing Theme Generator:

1. Open the generator
2. Generate your new palette using primary, or any color
3. Export and copy the values
4. Rename from primary -> whatever
5. Then convert the key/value pairs from JS -> CSS custom properties (11 shades in total)

But again, you only get these color utilities:

accent, bg, border, caret, decoration, divide, fill, outline, ring, shadow, stroke, text

You get no expansion to Skeleton's utility classes (color pairings, presets, color contrasts values, etc).

I just don't think folks would be satisfied with that. But if they are, it's 100% possible today.