search

skeletonlabs / skeleton

A complete design system and component solution, built on Tailwind.
https://skeleton.dev
MIT License
5.09k stars 320 forks source link

Support extra colours being added to the theme #2964

Open liamwh opened 7 hours ago

liamwh commented 7 hours ago

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 commented 6 hours ago

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!