Styling

readme.md

@@ -60,24 +60,8 @@ $panel->plugins([
 
 ### Colors
 
-You can overwrite the default colors if you want your own colors or need to add more. The color accepts any CSS color value or Filament's Color object.
+You can overwrite the default colors if you want your own colors or need to add more. The `->color()`method accepts any Filament's Color object or a closure that returns a color object.
 
-**CSS Value:**
-
-```php
-use pxlrbt\FilamentEnvironmentIndicator\EnvironmentIndicatorPlugin;
-
-$panel->plugins([
-    EnvironmentIndicatorPlugin::make()
-        ->color(fn () => match (app()->environment()) {
-            'production' => null,
-            'staging' => 'orange',
-            default => 'blue',
-        })
-]);
-```
-
-**Color Object:**
 ```php
 use pxlrbt\FilamentEnvironmentIndicator\EnvironmentIndicatorPlugin;
 use Filament\Support\Colors\Color;

resources/views/badge.blade.php

@@ -1,6 +1,17 @@
 <div
-    class="environment-indicator hidden sm:flex items-center h-10 rounded-lg px-3 text-white text-sm font-medium"
-    style="background-color: {{ $color }}; margin-right: 1rem;"
+    class="
+        environment-indicator hidden sm:flex items-center h-9 mr-4 px-3 text-sm font-medium
+        rounded-lg shadow-sm ring-1
+        ring-custom-600/20 bg-custom-50 text-custom-600
+        dark:ring-custom-400/30 dark:bg-custom-400/10 dark:text-custom-400
+    "
+    style="
+        --c-50: {{ $color[50] }};
+        --c-300: {{ $color[300] }};
+        --c-400: {{ $color[400] }};
+        --c-600: {{ $color[600] }};
+        margin-right: 1rem;
+    "
 >
     {{ $environment }}
 </div>

src/EnvironmentIndicatorPlugin.php

@@ -3,11 +3,9 @@
 namespace pxlrbt\FilamentEnvironmentIndicator;
 
 use Closure;
-use Filament\Facades\Filament;
 use Filament\Contracts\Plugin;
 use Filament\Panel;
 use Filament\Support\Colors\Color;
-use Filament\Support\Concerns\Configurable;
 use Filament\Support\Concerns\EvaluatesClosures;
 use Illuminate\Support\Facades\View;
 use Illuminate\Support\HtmlString;
@@ -20,7 +18,7 @@ class EnvironmentIndicatorPlugin implements Plugin
     public bool | Closure | null $showBadge = null;
     public bool | Closure | null $showBorder = null;
 
-    public string | Closure | null $color = null;
+    public array | Closure | null $color = null;
 
     public static function make(): static
     {
@@ -99,7 +97,7 @@ public function register(Panel $panel): void
                 <style>
                     .fi-topbar,
                     .fi-sidebar {
-                        border-top: 5px solid {$this->getColor()} !important;
+                        border-top: 5px solid rgb({$this->getColor()['500']}) !important;
                     }
 
                     .fi-topbar {
@@ -131,17 +129,15 @@ public function showBorder(bool|Closure $showBorder = true): static
         return $this;
     }
 
-    public function color(string|array|Closure $color = Color::Pink): static
+    public function color(array|Closure $color = Color::Pink): static
     {
         $this->color = $color;
 
         return $this;
     }
 
-    protected function getColor(): array|string
+    protected function getColor(): array
     {
-        $color = $this->evaluate($this->color);
-
-        return is_array($color) ? 'rgb(' . $color['500'] . ')' : $color;
+        return $this->evaluate($this->color);
     }
 }