feat(color): implement ColorResolver for flexible column color handling

ManukMinasyan · ManukMinasyan · commit 95a9c5e66c21 · 2025-09-27T17:08:50.000+04:00
diff --git a/docs/content/2.essentials/2.customization.md b/docs/content/2.essentials/2.customization.md
@@ -116,10 +116,67 @@ public function board(Board $board): Board
 Customize column appearance and behavior:
 
 ```php
+use Filament\Support\Colors\Color;
+
 Column::make('todo')
     ->label('To Do')
-    ->color('gray')        // gray, blue, red, green, amber, purple, pink
+    ->color('gray')        // Supports multiple color formats
     ->icon('heroicon-o-queue-list')
 ```
 
-Available colors: `gray`, `blue`, `red`, `green`, `amber`, `purple`, `pink`
+### Available Colors
+
+Flowforge supports four flexible ways to set column colors:
+
+#### 1. Semantic Colors (Filament registered)
+Use your application's theme colors:
+- `primary` - Your app's primary color
+- `secondary` - Secondary theme color
+- `success` - Green success color
+- `warning` - Yellow/amber warning color
+- `danger` - Red danger/error color
+- `info` - Blue informational color
+- `gray` - Neutral gray color
+
+#### 2. Filament Color Constants
+Use Filament's Color class constants directly:
+```php
+use Filament\Support\Colors\Color;
+
+Column::make('todo')->color(Color::Gray)
+Column::make('in_progress')->color(Color::Blue)
+Column::make('done')->color(Color::Green)
+```
+
+Available constants: `Color::Slate`, `Color::Gray`, `Color::Zinc`, `Color::Neutral`, `Color::Stone`, `Color::Red`, `Color::Orange`, `Color::Amber`, `Color::Yellow`, `Color::Lime`, `Color::Green`, `Color::Emerald`, `Color::Teal`, `Color::Cyan`, `Color::Sky`, `Color::Blue`, `Color::Indigo`, `Color::Violet`, `Color::Purple`, `Color::Fuchsia`, `Color::Pink`, `Color::Rose`
+
+#### 3. Tailwind CSS Color Names
+Use color names as strings (case-insensitive):
+```php
+Column::make('todo')->color('gray')
+Column::make('in_progress')->color('blue')
+Column::make('done')->color('green')
+```
+
+#### 4. Custom Hex Colors
+Any valid hex color code:
+```php
+Column::make('urgent')->color('#ff0000')
+Column::make('normal')->color('#3b82f6')
+Column::make('completed')->color('#22c55e')
+```
+
+### Complete Example
+```php
+use Filament\Support\Colors\Color;
+
+->columns([
+    Column::make('todo')
+        ->color('gray'),                    // Tailwind color name
+    Column::make('in_progress')
+        ->color(Color::Blue),                // Color constant
+    Column::make('review')
+        ->color('primary'),                  // Semantic color
+    Column::make('done')
+        ->color('#22c55e'),                  // Custom hex
+])
diff --git a/resources/views/livewire/column.blade.php b/resources/views/livewire/column.blade.php
@@ -1,18 +1,14 @@
 @props(['columnId', 'column', 'config'])
 
 @php
-    use Filament\Support\Colors\Color;use Filament\Support\Facades\FilamentColor;
+    use Relaticle\Flowforge\Support\ColorResolver;
 
-    $filamentColors = FilamentColor::getColors();
-    $nativeColor = null;
+    // Resolve the color once using our centralized resolver
+    $resolvedColor = ColorResolver::resolve($column['color']);
+    $isSemantic = ColorResolver::isSemantic($resolvedColor);
 
-    if(filled($column['color']) && isset($filamentColors[$column['color']])) {
-        $nativeColor = $column['color'];
-    }elseif(filled($column['color'])){
-        $color = Color::hex($column['color']);
-    }else{
-        $color = $filamentColors['primary'];
-    }
+    // For non-semantic colors, get the color array
+    $colorShades = $isSemantic ? null : $resolvedColor;
 @endphp
 
 <div
@@ -23,28 +19,34 @@ class="flowforge-column w-[300px] min-w-[300px] flex-shrink-0 border border-gray
             <h3 class="text-sm font-medium text-gray-700 dark:text-gray-200">
                 {{ $column['label'] }}
             </h3>
-            @if($nativeColor)
+
+            {{-- Count Badge --}}
+            @if($isSemantic)
+                {{-- Use native Filament badge for semantic colors --}}
                 <x-filament::badge
                     tag="div"
-                    :color="$nativeColor"
+                    :color="$resolvedColor"
                     class="ms-2"
                 >
                     {{ $column['total'] ?? (isset($column['items']) ? count($column['items']) : 0) }}
                 </x-filament::badge>
-            @else
+            @elseif($colorShades)
+                {{-- Custom badge for Color arrays --}}
                 <div
                     @style([
-                        "--light-bg-color: $color[50]",
-                        "--light-text-color: $color[700]",
-                        "--dark-bg-color: $color[600]",
-                        "--dark-text-color: $color[300]",
+                        Filament\Support\get_color_css_variables($resolvedColor, shades: [50, 300, 600, 700])
                     ])
                     @class([
-                    'ms-2 items-center border px-2 py-0.5 rounded-md text-xs font-semibold',
-                    "bg-[var(--light-bg-color)] dark:bg-[var(--dark-bg-color)]/20",
-                    "text-[var(--light-text-color)] dark:text-[var(--dark-text-color)]",
-                    'border-[var(--light-text-color)]/30 dark:border-[var(--dark-text-color)]/30',
-                ])>
+                        'ms-2 items-center border px-2 py-0.5 rounded-md text-xs font-semibold',
+                        'bg-custom-50 dark:bg-custom-600/20',
+                        'text-custom-700 dark:text-custom-300',
+                        'border-custom-700/30 dark:border-custom-300/30',
+                    ])>
+                    {{ $column['total'] ?? (isset($column['items']) ? count($column['items']) : 0) }}
+                </div>
+            @else
+                {{-- Fallback: simple gray badge if no color --}}
+                <div class="ms-2 items-center border px-2 py-0.5 rounded-md text-xs font-semibold bg-gray-50 dark:bg-gray-600/20 text-gray-700 dark:text-gray-300 border-gray-700/30 dark:border-gray-300/30">
                     {{ $column['total'] ?? (isset($column['items']) ? count($column['items']) : 0) }}
                 </div>
             @endif
@@ -114,4 +116,4 @@ class="text-xs text-primary-600 dark:text-primary-400 flex items-center justify-
             />
         @endif
     </div>
-</div>
+</div>
diff --git a/src/Support/ColorResolver.php b/src/Support/ColorResolver.php
@@ -0,0 +1,86 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Relaticle\Flowforge\Support;
+
+use Filament\Support\Colors\Color;
+use Filament\Support\Facades\FilamentColor;
+
+/**
+ * Resolves color values from various formats into a consistent structure.
+ *
+ * Supports:
+ * - Semantic colors (primary, danger, etc.)
+ * - Color constants (Color::Red arrays)
+ * - Tailwind color names (red, blue, etc.)
+ * - Hex colors (#ff0000)
+ */
+class ColorResolver
+{
+    /**
+     * Resolve a color value to either a semantic name or color array.
+     *
+     * @return string|array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string}|null
+     */
+    public static function resolve(mixed $color): string | array | null
+    {
+        if (blank($color)) {
+            return null;
+        }
+
+        // If it's already a Color constant array (has numeric keys for shades)
+        if (is_array($color) && isset($color[500])) {
+            return $color;
+        }
+
+        // If it's a string, check various formats
+        if (is_string($color)) {
+            // Check if it's a registered Filament semantic color
+            $filamentColors = FilamentColor::getColors();
+            if (isset($filamentColors[$color])) {
+                return $color; // Return semantic name for native Filament badge
+            }
+
+            // Try to get Tailwind color by name (case-insensitive)
+            $tailwindColor = self::getTailwindColor($color);
+            if ($tailwindColor !== null) {
+                return $tailwindColor;
+            }
+
+            // Try to parse as hex color (validate format first)
+            if (str_starts_with($color, '#') && preg_match('/^#[0-9A-Fa-f]{6}$/', $color)) {
+                try {
+                    return Color::hex($color);
+                } catch (\Exception) {
+                    // Invalid hex, will fall through to null
+                }
+            }
+        }
+
+        return null;
+    }
+
+    /**
+     * Check if the resolved color is a semantic Filament color.
+     */
+    public static function isSemantic(mixed $color): bool
+    {
+        return is_string($color) && isset(FilamentColor::getColors()[$color]);
+    }
+
+    /**
+     * Get a Tailwind color constant by name.
+     */
+    private static function getTailwindColor(string $name): ?array
+    {
+        $colorName = ucfirst(strtolower($name));
+
+        // Use reflection to check if the Color class has this constant
+        if (defined("Filament\\Support\\Colors\\Color::{$colorName}")) {
+            return constant("Filament\\Support\\Colors\\Color::{$colorName}");
+        }
+
+        return null;
+    }
+}
diff --git a/tests/Feature/ColumnColorTest.php b/tests/Feature/ColumnColorTest.php
@@ -0,0 +1,120 @@
+<?php
+
+declare(strict_types=1);
+
+use Filament\Support\Colors\Color;
+use Relaticle\Flowforge\Column;
+use Relaticle\Flowforge\Support\ColorResolver;
+
+describe('Column Color Handling', function () {
+    it('can set semantic colors on columns', function () {
+        $column = Column::make('test')
+            ->color('primary');
+
+        expect($column->getColor())->toBe('primary');
+    });
+
+    it('can set tailwind colors on columns by name', function () {
+        $colors = ['red', 'blue', 'green', 'amber', 'purple', 'pink', 'gray'];
+
+        foreach ($colors as $color) {
+            $column = Column::make('test')->color($color);
+            expect($column->getColor())->toBe($color);
+        }
+    });
+
+    it('can set Color constants directly', function () {
+        $column = Column::make('test')
+            ->color(Color::Red);
+
+        $color = $column->getColor();
+        expect($color)->toBeArray()
+            ->and($color)->toHaveKey(50)
+            ->and($color)->toHaveKey(500)
+            ->and($color)->toHaveKey(900);
+    });
+
+    it('can set hex colors on columns', function () {
+        $column = Column::make('test')
+            ->color('#ff0000');
+
+        expect($column->getColor())->toBe('#ff0000');
+    });
+
+    it('can set default color on columns', function () {
+        $column = Column::make('test')
+            ->defaultColor('gray');
+
+        expect($column->getColor())->toBe('gray');
+    });
+
+    it('uses default color when no color is set', function () {
+        $column = Column::make('test')
+            ->defaultColor('info');
+
+        expect($column->getColor())->toBe('info');
+    });
+
+    it('prefers explicit color over default color', function () {
+        $column = Column::make('test')
+            ->defaultColor('gray')
+            ->color('primary');
+
+        expect($column->getColor())->toBe('primary');
+    });
+});
+
+describe('ColorResolver', function () {
+    it('resolves semantic colors', function () {
+        expect(ColorResolver::resolve('primary'))->toBe('primary')
+            ->and(ColorResolver::resolve('danger'))->toBe('danger')
+            ->and(ColorResolver::resolve('success'))->toBe('success')
+            ->and(ColorResolver::isSemantic('primary'))->toBeTrue()
+            ->and(ColorResolver::isSemantic('danger'))->toBeTrue();
+    });
+
+    it('resolves Tailwind color names', function () {
+        $redColor = ColorResolver::resolve('red');
+        expect($redColor)->toBeArray()
+            ->and($redColor)->toHaveKey(500)
+            ->and($redColor[500])->toContain('oklch');
+
+        $blueColor = ColorResolver::resolve('blue');
+        expect($blueColor)->toBeArray()
+            ->and($blueColor)->toHaveKey(500);
+    });
+
+    it('resolves Color constants', function () {
+        $color = ColorResolver::resolve(Color::Green);
+        expect($color)->toBeArray()
+            ->and($color)->toBe(Color::Green)
+            ->and($color)->toHaveKey(500);
+    });
+
+    it('resolves hex colors', function () {
+        $color = ColorResolver::resolve('#ff0000');
+        expect($color)->toBeArray()
+            ->and($color)->toHaveKey(500);
+    });
+
+    it('handles invalid colors gracefully', function () {
+        expect(ColorResolver::resolve('invalid-color'))->toBeNull()
+            ->and(ColorResolver::resolve('not-a-color'))->toBeNull()
+            ->and(ColorResolver::resolve('#gggggg'))->toBeNull()
+            ->and(ColorResolver::resolve(''))->toBeNull()
+            ->and(ColorResolver::resolve(null))->toBeNull();
+    });
+
+    it('is case-insensitive for Tailwind colors', function () {
+        expect(ColorResolver::resolve('RED'))->toBeArray()
+            ->and(ColorResolver::resolve('Red'))->toBeArray()
+            ->and(ColorResolver::resolve('red'))->toBeArray();
+    });
+
+    it('correctly identifies semantic vs non-semantic colors', function () {
+        expect(ColorResolver::isSemantic('primary'))->toBeTrue()
+            ->and(ColorResolver::isSemantic(Color::Red))->toBeFalse()
+            ->and(ColorResolver::isSemantic('#ff0000'))->toBeFalse()
+            ->and(ColorResolver::isSemantic('red'))->toBeFalse();
+    });
+});
