Filament•16mo ago

Available Colors from new Color class to array?

Is there a way to get an array of all the available tailwind colors at shade 500 using this new Color class? Just trying to find a simple way to have some options for a color picker thats just buttons with the different colors. Also, do all the colors have to be registered or can we access all the core tailwind colors directly?

20 Replies

Mark ChaneyOP•16mo ago

hmm, trying to think how i would want to store it in the db. im basically looking at having preselected colors options for categories that will show as badges. So obviousyl the color choice would use shade 500/10 for background and 700 for the text

Patrick Boivin•16mo ago

Is there a way to get an array of all the available tailwind colors at shade 500 using this new Color class?

Something like this?

$availableColors = collect(\Filament\Support\Colors\Color::all())
    ->filter(fn ($color) => $color[500] ?? false)
    ->all();

$availableColors = collect(\Filament\Support\Colors\Color::all())
    ->filter(fn ($color) => $color[500] ?? false)
    ->all();

Mark ChaneyOP•16mo ago

Maybe it’s my version, but couldn’t use all() or any type of query on it.

Patrick Boivin•16mo ago

Looks like all() was added in v3.0.15 if I'm reading this corectly: https://github.com/filamentphp/filament/commit/e069570d773040dc972d8ec85bbaac984bf4bc79

Mark ChaneyOP•16mo ago

yep, just saw that. thanks! Guess i need to extend the alpha version and add that method. Also, looks like it should be:

$availableColors = collect(\Filament\Support\Colors\Color::all())
    ->filter(fn ($color) => isset($color[500]))
    ->map(fn ($color) => $color[500])
    ->all();

$availableColors = collect(\Filament\Support\Colors\Color::all())
    ->filter(fn ($color) => isset($color[500]))
    ->map(fn ($color) => $color[500])
    ->all();

Patrick Boivin•16mo ago

I think your filter() does the same but obviously you know what you're doing 😜

Mark ChaneyOP•16mo ago

@Patrick Boivin one worked in tinker, the other return all colors and all their shades 😛

Patrick Boivin•16mo ago

Yes, that's what your map() is fixing if I'm reading this right

Mark ChaneyOP•16mo ago

correct. That you were implying a change wasnt needed. I get that isset() and ?? false are the same though. With that said, im not sure this is even useful to me as I need to store the color so i can use with ->color() on class, but i dont think thats possible as those require class names. i think im just going to have to add whatever 8-12 colors to my tailwind config. ugh

Patrick Boivin•16mo ago

Do you mean referencing the Color class constants? Like Color::Blue, etc.

Mark ChaneyOP•16mo ago

yes, just created a basic color selector that looks like. I did something like

ColorPalette::make('color')
    ->options([
        Color::Blue[500] => 'Blue',
        Color::Red[500] => 'Red',
        Color::Orange[500] => 'Orange',
        Color::Green[500] => 'Green',
        Color::Yellow[500] => 'Yellow',
        Color::Indigo[500] => 'Indigo',
        Color::Purple[500] => 'Purple',
        Color::Pink[500] => 'Pink',
        Color::Teal[500] => 'Teal',
        Color::Cyan[500] => 'Cyan',
        Color::Gray[500] => 'Gray',
    ]),

ColorPalette::make('color')
    ->options([
        Color::Blue[500] => 'Blue',
        Color::Red[500] => 'Red',
        Color::Orange[500] => 'Orange',
        Color::Green[500] => 'Green',
        Color::Yellow[500] => 'Yellow',
        Color::Indigo[500] => 'Indigo',
        Color::Purple[500] => 'Purple',
        Color::Pink[500] => 'Pink',
        Color::Teal[500] => 'Teal',
        Color::Cyan[500] => 'Cyan',
        Color::Gray[500] => 'Gray',
    ]),

, but now that i stored the value of 'Red' or if i stored the rgb value instead, i still really have no way to utilize those in lets say a BadgeColumn:make()->color() or within a blade component that has a :class

Mark ChaneyOP•16mo ago

make sense? i think its simply not a use case for the color class and im simply forced to have precreated classes in the tailwind config

Patrick Boivin•16mo ago

Ok yeah, makes sense Have you explored FilamentColor::register()? Not sure if you could register custom aliases for the specific colors you want

Mark ChaneyOP•16mo ago

Im sure i could, but im not sure what value that gives me over simply adding them to the tailwind config

Patrick Boivin•16mo ago

I think it would make the colors available in ->color(), without having to update the tailwind config

Mark ChaneyOP•16mo ago

right, but how is updating the tailwind config any harder than updating FilamentColor::register()?

Patrick Boivin•16mo ago

Sorry Mark, do you already have a solution you're happy with? I'm not sure if I'm actually helping at this point...

Mark ChaneyOP•16mo ago

@Patrick Boivin i do not and thats fine too. Hope it doesnt sound like im frustrated with you as I am not. I do really appreciate the help. I do though think that new color class is only useful for plugin devs. If it does provide value to just regular developers, than I would love to learn how I can tap into it. I just havent seen the value yet. I mean, if they are writing a bunch of custom components that use the new format, then yes, could be used there. But not really with existing form fields and table columns, etc.

Patrick Boivin•16mo ago

Hope it doesnt sound like im frustrated with you as I am not

Not at all, I think I enjoy brainstorming and sometimes I loose track of the fact that we may have the answer already. 😅️ I'll admit I'm in the same boat... still figuring out the new theming/color utilities and experimenting.

Mark ChaneyOP•16mo ago

I have gotten a little frustrated in more just the fact that ive spent a decent amount of time trying to get it to work for me and havent had success. Also remember that using FilamentColor::register() only gives you access to it within filament and you still have to add to your tailwind config if you want to use within your blade files in a normal fashion hmm, colors actually seem to get purged out still hmm, should FilamentColor::getColors(); return all available registered colors? actually it does, i was in the wrong tinker tab. lol

Gaming

Programming

Available Colors from new Color class to array?