Filament•3mo ago

How to refer to filament semantic color in blade file?

This is a example filament button component, which render a button with the 'success' color. The 'success' then can be set up to be whatever color from tailwind.

  <x-filament::button color="success">
      New Button
  </x-filament::button>

  <x-filament::button color="success">
      New Button
  </x-filament::button>

I want to be able to refer this 'success' color in my blade file, so I can make lets say make a 'alert' component that is the same as the rest.

  <div class="flex justify-between items-center flex-grow">
      New Alert
  </div>

  <div class="flex justify-between items-center flex-grow">
      New Alert
  </div>

Any help would be appreciated!

7 Replies

LeandroFerreira•3mo ago

I think you should create a custom theme and use this like text-success-500, bg-success-500..

Themes - Panel Builder - Filament

XiaohouOP•3mo ago

I do have the colors registered.

 FilamentColor::register([
      'danger' => Color::Red,
      'gray' => Color::Zinc,
      'info' => Color::Blue,
      'primary' => Color::Rose,
      'success' => Color::Green,
      'warning' => Color::Amber,
      'blue' => Color::Blue,
  ]);

 FilamentColor::register([
      'danger' => Color::Red,
      'gray' => Color::Zinc,
      'info' => Color::Blue,
      'primary' => Color::Rose,
      'success' => Color::Green,
      'warning' => Color::Amber,
      'blue' => Color::Blue,
  ]);

but i cant refer to them, for example this just render a div with no background color

<div class="bg-warning-500">
    This is a alert.
</div>

<div class="bg-warning-500">
    This is a alert.
</div>

LeandroFerreira•3mo ago

if you are using the Panel builder and registering these colors in the appserviceprovider, you should create a custom theme. This should be applied after compiling the css using npm run build

XiaohouOP•3mo ago

Thanks for helping me out, but I'm not sure if I understand correctly. I'm happy with the current colors, i don't need a custom theme to replace the default ones. I just need to render elements with the current registered color in filament. For example. i want to make a div with the 'warning' color filament has registered. without having to refer it as tailwind color. So when I change the filament register color from warning' => Color::Amber to warning => Color::Orange, my component color would update alone with filament.

LeandroFerreira•3mo ago

I think these classes are not automatically compiled by Tailwind CSS, so you’ll likely need to create a custom theme to recompile the CSS. If you’re using different Blade files, ensure that your content configuration in tailwind.config.js includes the correct directories or files to scan for the new Tailwind classes

XiaohouOP•3mo ago

I looked into the filament button blade file, it seems to use CSS variables to display to colors. You can get the variable by color use support method from filament.

$color = 'primary';
$styles = \Illuminate\Support\Arr::toCssStyles([
        \Filament\Support\get_color_css_variables($color, shades: [50, 400, 600]),
    ]);

$color = 'primary';
$styles = \Illuminate\Support\Arr::toCssStyles([
        \Filament\Support\get_color_css_variables($color, shades: [50, 400, 600]),
    ]);

it will give you the custom css variables, something like this --c-50:var(--primary-50);--c-400:var(--primary-400);--c-600:var(--primary-600); once you have the css variables by color, just apply the variables to html element, then you can use it by refering it as custom

<div class="bg-custom-50 text-custom-600 ring-custom-600/10 dark:bg-custom-400/10 dark:text-custom-400 dark:ring-custom-400/30" style="{{ $styles }}">
    content here
</div>

<div class="bg-custom-50 text-custom-600 ring-custom-600/10 dark:bg-custom-400/10 dark:text-custom-400 dark:ring-custom-400/30" style="{{ $styles }}">
    content here
</div>

Now if the primary color changes in filament, it will reflect in our custom component as well. I'm sure if this is the best way to use the color registered by filament, but I hope it can help anyone who has the same problem.

John•3mo ago

I was looking for this too, and came to the same conclusion. I borrowed some code from vendor/filament/forms/resources/views/components/field-wrapper/hint.blade.php and added this:

// resources/views/components/colored-content.blade.php
<span
    class="fi-color-custom text-custom-600 dark:text-custom-400"
    @style([
        \Filament\Support\get_color_css_variables(
            $color,
            shades: [400, 600],
        ),
    ])
>
    {{ $content }}
</span>

// resources/views/components/colored-content.blade.php
<span
    class="fi-color-custom text-custom-600 dark:text-custom-400"
    @style([
        \Filament\Support\get_color_css_variables(
            $color,
            shades: [400, 600],
        ),
    ])
>
    {{ $content }}
</span>

// Inside some Filament resource method
return new HtmlString('Add some '
    . view('components.colored-content', [
      'color' => 'danger',
      'content' => 'CoLoR!'
    ])->render());

// Inside some Filament resource method
return new HtmlString('Add some '
    . view('components.colored-content', [
      'color' => 'danger',
      'content' => 'CoLoR!'
    ])->render());

Gaming

Programming

How to refer to filament semantic color in blade file?