Filament•13mo 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 Chaney•13mo 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•13mo 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 Chaney•13mo ago

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

Patrick Boivin•13mo ago

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

Mark Chaney•13mo 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•13mo ago

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

Mark Chaney•13mo ago

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

Patrick Boivin•13mo ago

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

Mark Chaney•13mo 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•13mo ago

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

Mark Chaney•13mo 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 Chaney•13mo 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•13mo 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 Chaney•13mo ago

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

Patrick Boivin•13mo ago

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

Gaming

Programming

Available Colors from new Color class to array?