Filament•14mo ago

Tailwind colors in color()

Can I use tailwind shade when using custom color()? I would like to use yellow-50 in my component but can't work out how to use shade. This works but only for default yellow. Color configuration

    FilamentColor::register([
        'red' => Color::Red,
        'amber' => Color::Amber,
        'green' => Color::Green,
        'pressure'  => Color::Yellow,
    ]);

    FilamentColor::register([
        'red' => Color::Red,
        'amber' => Color::Amber,
        'green' => Color::Green,
        'pressure'  => Color::Yellow,
    ]);

Component

    Infolists\Components\TextEntry::make('pressure')
        ->label(false)
        ->icon('icon-gauge-outline')
        ->color('pressure)
        ->default('--'),

    Infolists\Components\TextEntry::make('pressure')
        ->label(false)
        ->icon('icon-gauge-outline')
        ->color('pressure)
        ->default('--'),

How do I add the shade?

4 Replies

awcodes•14mo ago

I don’t think this is going to work the way you’re trying to do it. But you could technically do something like

->color(
  Color::rgb(FilamentColor::getColors()[‘pressure’][50]);
)

->color(
  Color::rgb(FilamentColor::getColors()[‘pressure’][50]);
)

Or more simply, if you know the hex code:

->color(Color::hex(‘hexvalue’))

->color(Color::hex(‘hexvalue’))

wyChoong•14mo ago

Color::rgb(‘rgb(‘. Color::Yellow[50] .’)’)

harpsOP•14mo ago

So when I set the 'pressure' => Color::Yellow, that is an array of RGB values but then it's not possible to select which one to use when using the ->color('material') function on an infolist? How does it know which is the default for yellow? I can manually set the RGB value similar to @wyChoong suggests but I'm just trying to understand how it works 🙂

Dennis Koch•14mo ago

It selects the one according to the design system. So probably 700 for text

Gaming

Programming

Tailwind colors in color()