feature: Support custom colors

2026-10-16 07:17:49 +08:00 · 2023-06-14 13:44:08 +01:00
parent 69f284169c
commit 645c00dc30
25 changed files with 332 additions and 443 deletions
@@ -132,16 +132,16 @@
        },
        {
            "name": "aws/aws-sdk-php",
-            "version": "3.272.1",
+            "version": "3.273.0",
            "source": {
                "type": "git",
                "url": "https://github.com/aws/aws-sdk-php.git",
-                "reference": "a0accaf4a16565c0b4438109c978602f27dff3a0"
+                "reference": "86078abfba43fce3f71a2714bb10a6b1baec1b78"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/a0accaf4a16565c0b4438109c978602f27dff3a0",
-                "reference": "a0accaf4a16565c0b4438109c978602f27dff3a0",
+                "url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/86078abfba43fce3f71a2714bb10a6b1baec1b78",
+                "reference": "86078abfba43fce3f71a2714bb10a6b1baec1b78",
                "shasum": ""
            },
            "require": {
@@ -221,9 +221,9 @@
            "support": {
                "forum": "https://forums.aws.amazon.com/forum.jspa?forumID=80",
                "issues": "https://github.com/aws/aws-sdk-php/issues",
-                "source": "https://github.com/aws/aws-sdk-php/tree/3.272.1"
+                "source": "https://github.com/aws/aws-sdk-php/tree/3.273.0"
            },
-            "time": "2023-06-09T18:21:02+00:00"
+            "time": "2023-06-13T18:22:02+00:00"
        },
        {
            "name": "blade-ui-kit/blade-heroicons",
@@ -1357,16 +1357,16 @@
        },
        {
            "name": "fakerphp/faker",
-            "version": "v1.22.0",
+            "version": "v1.23.0",
            "source": {
                "type": "git",
                "url": "https://github.com/FakerPHP/Faker.git",
-                "reference": "f85772abd508bd04e20bb4b1bbe260a68d0066d2"
+                "reference": "e3daa170d00fde61ea7719ef47bb09bb8f1d9b01"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/FakerPHP/Faker/zipball/f85772abd508bd04e20bb4b1bbe260a68d0066d2",
-                "reference": "f85772abd508bd04e20bb4b1bbe260a68d0066d2",
+                "url": "https://api.github.com/repos/FakerPHP/Faker/zipball/e3daa170d00fde61ea7719ef47bb09bb8f1d9b01",
+                "reference": "e3daa170d00fde61ea7719ef47bb09bb8f1d9b01",
                "shasum": ""
            },
            "require": {
@@ -1419,9 +1419,9 @@
            ],
            "support": {
                "issues": "https://github.com/FakerPHP/Faker/issues",
-                "source": "https://github.com/FakerPHP/Faker/tree/v1.22.0"
+                "source": "https://github.com/FakerPHP/Faker/tree/v1.23.0"
            },
-            "time": "2023-05-14T12:31:37+00:00"
+            "time": "2023-06-12T08:44:38+00:00"
        },
        {
            "name": "fidry/cpu-core-counter",
@@ -2401,16 +2401,16 @@
        },
        {
            "name": "laravel/cashier",
-            "version": "v14.12.2",
+            "version": "v14.12.3",
            "source": {
                "type": "git",
                "url": "https://github.com/laravel/cashier-stripe.git",
-                "reference": "318532636885606368835cd7c71c3879abd16b37"
+                "reference": "072e14c3a0248ff080f6c8f15322d6d6906ed8a1"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/laravel/cashier-stripe/zipball/318532636885606368835cd7c71c3879abd16b37",
-                "reference": "318532636885606368835cd7c71c3879abd16b37",
+                "url": "https://api.github.com/repos/laravel/cashier-stripe/zipball/072e14c3a0248ff080f6c8f15322d6d6906ed8a1",
+                "reference": "072e14c3a0248ff080f6c8f15322d6d6906ed8a1",
                "shasum": ""
            },
            "require": {
@@ -2484,7 +2484,7 @@
                "issues": "https://github.com/laravel/cashier/issues",
                "source": "https://github.com/laravel/cashier"
            },
-            "time": "2023-05-24T13:03:33+00:00"
+            "time": "2023-06-13T13:32:59+00:00"
        },
        {
            "name": "laravel/framework",
@@ -2688,16 +2688,16 @@
        },
        {
            "name": "laravel/pint",
-            "version": "v1.10.1",
+            "version": "v1.10.2",
            "source": {
                "type": "git",
                "url": "https://github.com/laravel/pint.git",
-                "reference": "d69f914aa347a448628b672ba90adf0b4ea0ce4a"
+                "reference": "f78de1a1bbab7aa41a6ea211c5962b0530d1a301"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/laravel/pint/zipball/d69f914aa347a448628b672ba90adf0b4ea0ce4a",
-                "reference": "d69f914aa347a448628b672ba90adf0b4ea0ce4a",
+                "url": "https://api.github.com/repos/laravel/pint/zipball/f78de1a1bbab7aa41a6ea211c5962b0530d1a301",
+                "reference": "f78de1a1bbab7aa41a6ea211c5962b0530d1a301",
                "shasum": ""
            },
            "require": {
@@ -2750,7 +2750,7 @@
                "issues": "https://github.com/laravel/pint/issues",
                "source": "https://github.com/laravel/pint"
            },
-            "time": "2023-06-03T15:01:17+00:00"
+            "time": "2023-06-12T10:50:04+00:00"
        },
        {
            "name": "laravel/serializable-closure",
@@ -4411,16 +4411,16 @@
        },
        {
            "name": "nunomaduro/larastan",
-            "version": "v2.6.2",
+            "version": "v2.6.3",
            "source": {
                "type": "git",
                "url": "https://github.com/nunomaduro/larastan.git",
-                "reference": "fd1b5c2560ccf4a2a0075a30524b63ebb142cd6c"
+                "reference": "73e5be5f5c732212ce6ca77ffd2753a136f36a23"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/nunomaduro/larastan/zipball/fd1b5c2560ccf4a2a0075a30524b63ebb142cd6c",
-                "reference": "fd1b5c2560ccf4a2a0075a30524b63ebb142cd6c",
+                "url": "https://api.github.com/repos/nunomaduro/larastan/zipball/73e5be5f5c732212ce6ca77ffd2753a136f36a23",
+                "reference": "73e5be5f5c732212ce6ca77ffd2753a136f36a23",
                "shasum": ""
            },
            "require": {
@@ -4483,7 +4483,7 @@
            ],
            "support": {
                "issues": "https://github.com/nunomaduro/larastan/issues",
-                "source": "https://github.com/nunomaduro/larastan/tree/v2.6.2"
+                "source": "https://github.com/nunomaduro/larastan/tree/v2.6.3"
            },
            "funding": [
                {
@@ -4503,7 +4503,7 @@
                    "type": "patreon"
                }
            ],
-            "time": "2023-06-10T17:23:14+00:00"
+            "time": "2023-06-13T21:39:27+00:00"
        },
        {
            "name": "nunomaduro/termwind",
@@ -4593,24 +4593,24 @@
        },
        {
            "name": "orchestra/testbench",
-            "version": "v8.5.6",
+            "version": "v8.5.8",
            "source": {
                "type": "git",
                "url": "https://github.com/orchestral/testbench.git",
-                "reference": "ad082f7dc468ffb879340421fc4d3db6cf5129b6"
+                "reference": "df6976dd3d50a5aabe78195b38ae6fd1d3abee7b"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/orchestral/testbench/zipball/ad082f7dc468ffb879340421fc4d3db6cf5129b6",
-                "reference": "ad082f7dc468ffb879340421fc4d3db6cf5129b6",
+                "url": "https://api.github.com/repos/orchestral/testbench/zipball/df6976dd3d50a5aabe78195b38ae6fd1d3abee7b",
+                "reference": "df6976dd3d50a5aabe78195b38ae6fd1d3abee7b",
                "shasum": ""
            },
            "require": {
                "composer-runtime-api": "^2.2",
                "fakerphp/faker": "^1.21",
-                "laravel/framework": ">=10.10.0 <10.15.0",
+                "laravel/framework": ">=10.13.5 <10.14.0",
                "mockery/mockery": "^1.5.1",
-                "orchestra/testbench-core": ">=8.5.6 <8.6.0",
+                "orchestra/testbench-core": ">=8.5.7 <8.6.0",
                "php": "^8.1",
                "phpunit/phpunit": "^9.6 || ^10.1",
                "spatie/laravel-ray": "^1.32.4",
@@ -4642,22 +4642,22 @@
            ],
            "support": {
                "issues": "https://github.com/orchestral/testbench/issues",
-                "source": "https://github.com/orchestral/testbench/tree/v8.5.6"
+                "source": "https://github.com/orchestral/testbench/tree/v8.5.8"
            },
-            "time": "2023-06-11T12:51:04+00:00"
+            "time": "2023-06-13T23:59:59+00:00"
        },
        {
            "name": "orchestra/testbench-core",
-            "version": "v8.5.6",
+            "version": "v8.5.7",
            "source": {
                "type": "git",
                "url": "https://github.com/orchestral/testbench-core.git",
-                "reference": "b9295f845d376d51e6a1629c116103e7a55c99c8"
+                "reference": "c300e901f434809e414fe83325d9750603a017cb"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/orchestral/testbench-core/zipball/b9295f845d376d51e6a1629c116103e7a55c99c8",
-                "reference": "b9295f845d376d51e6a1629c116103e7a55c99c8",
+                "url": "https://api.github.com/repos/orchestral/testbench-core/zipball/c300e901f434809e414fe83325d9750603a017cb",
+                "reference": "c300e901f434809e414fe83325d9750603a017cb",
                "shasum": ""
            },
            "require": {
@@ -4666,10 +4666,9 @@
            },
            "require-dev": {
                "fakerphp/faker": "^1.21",
-                "laravel/framework": "^10.10",
+                "laravel/framework": "^10.13.5",
                "laravel/pint": "^1.6",
                "mockery/mockery": "^1.5.1",
-                "orchestra/canvas": "^8.1",
                "phpstan/phpstan": "^1.10.7",
                "phpunit/phpunit": "^10.1",
                "spatie/laravel-ray": "^1.32.4",
@@ -4680,7 +4679,7 @@
            "suggest": {
                "brianium/paratest": "Allow using parallel tresting (^6.4 || ^7.1.4).",
                "fakerphp/faker": "Allow using Faker for testing (^1.21).",
-                "laravel/framework": "Required for testing (^10.10).",
+                "laravel/framework": "Required for testing (^10.13.5).",
                "mockery/mockery": "Allow using Mockery for testing (^1.5.1).",
                "nunomaduro/collision": "Allow using Laravel style tests output and parallel testing (^6.4 || ^7.4).",
                "orchestra/testbench-browser-kit": "Allow using legacy Laravel BrowserKit for testing (^8.0).",
@@ -4726,7 +4725,7 @@
                "issues": "https://github.com/orchestral/testbench/issues",
                "source": "https://github.com/orchestral/testbench-core"
            },
-            "time": "2023-06-08T06:22:10+00:00"
+            "time": "2023-06-13T06:23:28+00:00"
        },
        {
            "name": "pestphp/pest",
@@ -7728,16 +7727,16 @@
        },
        {
            "name": "spatie/backtrace",
-            "version": "1.4.0",
+            "version": "1.4.1",
            "source": {
                "type": "git",
                "url": "https://github.com/spatie/backtrace.git",
-                "reference": "ec4dd16476b802dbdc6b4467f84032837e316b8c"
+                "reference": "47794d19e3215ace9e005a8f200cd7cc7be52572"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/spatie/backtrace/zipball/ec4dd16476b802dbdc6b4467f84032837e316b8c",
-                "reference": "ec4dd16476b802dbdc6b4467f84032837e316b8c",
+                "url": "https://api.github.com/repos/spatie/backtrace/zipball/47794d19e3215ace9e005a8f200cd7cc7be52572",
+                "reference": "47794d19e3215ace9e005a8f200cd7cc7be52572",
                "shasum": ""
            },
            "require": {
@@ -7774,7 +7773,7 @@
                "spatie"
            ],
            "support": {
-                "source": "https://github.com/spatie/backtrace/tree/1.4.0"
+                "source": "https://github.com/spatie/backtrace/tree/1.4.1"
            },
            "funding": [
                {
@@ -7786,7 +7785,7 @@
                    "type": "other"
                }
            ],
-            "time": "2023-03-04T08:57:24+00:00"
+            "time": "2023-06-13T14:35:04+00:00"
        },
        {
            "name": "spatie/color",
@@ -12095,4 +12094,4 @@
    },
    "platform-dev": [],
    "plugin-api-version": "2.3.0"
-}
+}
@@ -8,7 +8,7 @@ use Filament\Http\Middleware\DispatchServingFilamentEvent;
 use Filament\Pages;
 use Filament\Panel;
 use Filament\PanelProvider;
-use Filament\Support\Color;
+use Filament\Support\Colors\Color;
 use Filament\Widgets;
 use Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse;
 use Illuminate\Cookie\Middleware\EncryptCookies;
@@ -29,7 +29,9 @@ class AdminPanelProvider extends PanelProvider
            ->id('admin')
            ->path('admin')
            ->login()
-            ->primaryColor(Color::Amber)
+            ->colors([
+                'primary' => Color::Amber,
+            ])
            ->discoverResources(in: app_path('Filament/Resources'), for: 'App\\Filament\\Resources')
            ->discoverPages(in: app_path('Filament/Pages'), for: 'App\\Filament\\Pages')
            ->pages([
@@ -6,16 +6,25 @@ use Closure;

 trait HasColor
 {
-    protected string | Closure | null $color = null;
+    /**
+     * @var string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null
+     */
+    protected string | array | Closure | null $color = null;

-    public function color(string | Closure | null $color): static
+    /**
+     * @param string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | Closure | null $color
+     */
+    public function color(string | array | Closure | null $color): static
    {
        $this->color = $color;

        return $this;
    }

-    public function getColor(): ?string
+    /**
+     * @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 function getColor(): string | array | null
    {
        return $this->evaluate($this->color);
    }
@@ -366,7 +366,7 @@ class TestsActions

    public function assertActionHasColor(): Closure
    {
-        return function (string | array $name, string $color, $record = null): static {
+        return function (string | array $name, string | array $color, $record = null): static {
            /** @var array<string> $name */
            /** @phpstan-ignore-next-line */
            $name = $this->parseNestedActionName($name);
@@ -390,7 +390,7 @@ class TestsActions

    public function assertActionDoesNotHaveColor(): Closure
    {
-        return function (string | array $name, string $color, $record = null): static {
+        return function (string | array $name, string | array $color, $record = null): static {
            /** @var array<string> $name */
            /** @phpstan-ignore-next-line */
            $name = $this->parseNestedActionName($name);
@@ -8,7 +8,7 @@ In the [configuration](configuration), you can easily change the colors that are

 ```php
 use Filament\Panel;
-use Filament\Support\Color;
+use Filament\Support\Colors\Color;

 public function panel(Panel $panel): Panel
 {
@@ -24,7 +24,7 @@ public function panel(Panel $panel): Panel
 }
 ```

-The `Filament\Support\Color` class contains color options for all [Tailwind CSS color palettes](https://tailwindcss.com/docs/customizing-colors).
+The `Filament\Support\Colors\Color` class contains color options for all [Tailwind CSS color palettes](https://tailwindcss.com/docs/customizing-colors).

 Alternatively, you may pass your own palette in as an array of RGB values:

@@ -49,7 +49,7 @@ $panel->primaryColor([
 If you want us to attempt to generate a palette for you based on a singular hex or RGB value, you can pass that in:

 ```php
-use Filament\Support\Color;
+use Filament\Support\Colors\Color;

 $panel->primaryColor('#6366f1')

@@ -60,12 +60,6 @@
                --filament-widgets-chart-font-family: var(--font-family);
                --sidebar-width: {{ filament()->getSidebarWidth() }};
                --collapsed-sidebar-width: {{ filament()->getCollapsedSidebarWidth() }};
-
-                @foreach (filament()->getColors() as $key => $palette)
-                    @foreach ($palette as $shade => $color)
-                        --{{ $key }}-color-{{ $shade }}: {{ $color }};
-                    @endforeach
-                @endforeach
            }
        </style>

@@ -27,17 +27,8 @@ use Illuminate\Support\Facades\Facade;
 * @method static array<NavigationGroup> buildNavigation()
 * @method static string getAuthGuard()
 * @method static string getBrandName()
- * @method static array{
- *     'primary': array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null,
- *     'secondary': array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null,
- *     'gray': array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null,
- *     'danger': array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null,
- *     'warning': array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null,
- *     'success': array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null,
- * } getColors()
 * @method static string getCollapsedSidebarWidth()
 * @method static Panel | null getCurrentPanel()
- * @method static array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} getDangerColor()
 * @method static string | null getDatabaseNotificationsPollingInterval()
 * @method static string getDefaultAvatarProvider()
 * @method static Panel getDefaultPanel()
@@ -50,9 +41,7 @@ use Illuminate\Support\Facades\Facade;
 * @method static string | null getFontUrl()
 * @method static array<string> getGlobalSearchKeyBindings()
 * @method static GlobalSearchProvider | null getGlobalSearchProvider()
- * @method static array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} getGrayColor()
 * @method static string | null getHomeUrl()
- * @method static array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} getInfoColor()
 * @method static string | null getLoginUrl(array<mixed> $parameters = [])
 * @method static string getLogoutUrl(array<mixed> $parameters = [])
 * @method static string | null getMaxContentWidth()
@@ -65,14 +54,11 @@ use Illuminate\Support\Facades\Facade;
 * @method static Panel getPanel(?string $id = null)
 * @method static array<string, Panel> getPanels()
 * @method static Plugin getPlugin(string $id)
- * @method static array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} getPrimaryColor()
 * @method static string | null getRegistrationUrl(array<mixed> $parameters = [])
 * @method static string | null getRequestPasswordResetUrl(array<mixed> $parameters = [])
 * @method static string getResetPasswordUrl(string $token, CanResetPassword | Model | Authenticatable $user, array<mixed> $parameters = [])
 * @method static array<class-string> getResources()
- * @method static array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} getSecondaryColor()
 * @method static string getSidebarWidth()
- * @method static array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} getSuccessColor()
 * @method static Model | null getTenant()
 * @method static string | null getTenantAvatarUrl(Model $tenant)
 * @method static BillingProvider | null getTenantBillingProvider()
@@ -91,7 +77,6 @@ use Illuminate\Support\Facades\Facade;
 * @method static array<Model> getUserTenants(HasTenants | Model | Authenticatable $user)
 * @method static string | null getUrl(Model | null $tenant = null)
 * @method static string getVerifyEmailUrl(MustVerifyEmail | Model | Authenticatable $user, array<mixed> $parameters = [])
- * @method static array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} getWarningColor()
 * @method static array<class-string> getWidgets()
 * @method static bool hasBreadcrumbs()
 * @method static bool hasCollapsibleNavigationGroups()
@@ -69,22 +69,6 @@ class FilamentManager
        return $this->getCurrentPanel()->getBrandName();
    }

-    /**
-     * @return array{
-     *     'danger': array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null,
-     *     'gray': array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null,
-     *     'info': array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null,
-     *     'primary': array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null,
-     *     'secondary': array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null,
-     *     'success': array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null,
-     *     'warning': 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 function getColors(): array
-    {
-        return $this->getCurrentPanel()->getColors();
-    }
-
    public function getCollapsedSidebarWidth(): string
    {
        return $this->getCurrentPanel()->getCollapsedSidebarWidth();
@@ -95,14 +79,6 @@ class FilamentManager
        return $this->currentPanel ?? null;
    }

-    /**
-     * @return array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string}
-     */
-    public function getDangerColor(): array
-    {
-        return $this->getCurrentPanel()->getDangerColor();
-    }
-
    public function getDatabaseNotificationsPollingInterval(): ?string
    {
        return $this->getCurrentPanel()->getDatabaseNotificationsPollingInterval();
@@ -176,27 +152,11 @@ class FilamentManager
        return $this->getCurrentPanel()->getGlobalSearchProvider();
    }

-    /**
-     * @return array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string}
-     */
-    public function getGrayColor(): array
-    {
-        return $this->getCurrentPanel()->getGrayColor();
-    }
-
    public function getHomeUrl(): ?string
    {
        return $this->getCurrentPanel()->getHomeUrl() ?? $this->getCurrentPanel()->getUrl();
    }

-    /**
-     * @return array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string}
-     */
-    public function getInfoColor(): array
-    {
-        return $this->getCurrentPanel()->getInfoColor();
-    }
-
    /**
     * @param  array<mixed>  $parameters
     */
@@ -282,14 +242,6 @@ class FilamentManager
        return $this->getCurrentPanel()->getPlugin($id);
    }

-    /**
-     * @return array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string}
-     */
-    public function getPrimaryColor(): array
-    {
-        return $this->getCurrentPanel()->getPrimaryColor();
-    }
-
    /**
     * @param  array<mixed>  $parameters
     */
@@ -322,27 +274,11 @@ class FilamentManager
        return $this->getCurrentPanel()->getResources();
    }

-    /**
-     * @return array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string}
-     */
-    public function getSecondaryColor(): array
-    {
-        return $this->getCurrentPanel()->getSecondaryColor();
-    }
-
    public function getSidebarWidth(): string
    {
        return $this->getCurrentPanel()->getSidebarWidth();
    }

-    /**
-     * @return array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string}
-     */
-    public function getSuccessColor(): array
-    {
-        return $this->getCurrentPanel()->getSuccessColor();
-    }
-
    public function getTenant(): ?Model
    {
        return $this->tenant;
@@ -498,14 +434,6 @@ class FilamentManager
        return $this->getCurrentPanel()->getVerifyEmailUrl($user, $parameters);
    }

-    /**
-     * @return array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string}
-     */
-    public function getWarningColor(): array
-    {
-        return $this->getCurrentPanel()->getWarningColor();
-    }
-
    /**
     * @return array<class-string>
     */
@@ -3,7 +3,9 @@
 namespace Filament;

 use Closure;
+use Filament\Support\Colors\Concerns\CanConfigureColors;
 use Filament\Support\Components\Component;
+use Filament\Support\Facades\FilamentColor;
 use Filament\Support\Facades\FilamentIcon;

 class Panel extends Component
@@ -46,6 +48,8 @@ class Panel extends Component

    public function boot(): void
    {
+        FilamentColor::register($this->colors);
+
        FilamentIcon::register($this->icons);
        $this->registerLivewireComponents();

@@ -2,209 +2,24 @@

 namespace Filament\Panel\Concerns;

-use Filament\Support\Color;
+use Filament\Support\Colors\Color;

 trait HasColors
 {
    /**
-     * @var array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null
+     * @var array<string, array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | string>
     */
-    protected ?array $dangerColor = null;
+    protected array $colors = [];

    /**
-     * @var array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null
+     * @param array<string, array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | string> $colors
     */
-    protected ?array $grayColor = null;
-
-    /**
-     * @var array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null
-     */
-    protected ?array $infoColor = null;
-
-    /**
-     * @var array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null
-     */
-    protected ?array $primaryColor = null;
-
-    /**
-     * @var array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null
-     */
-    protected ?array $secondaryColor = null;
-
-    /**
-     * @var array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null
-     */
-    protected ?array $successColor = null;
-
-    /**
-     * @var array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null
-     */
-    protected ?array $warningColor = null;
-
-    /**
-     * @param  array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | string  $color
-     * @return array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | string
-     */
-    public function processColor(array | string $color): array | string
+    public function colors(array $colors): static
    {
-        if (is_string($color) && str_starts_with($color, '#')) {
-            return Color::hex($color);
+        foreach ($colors as $colorName => $color) {
+            $this->colors[$colorName] = $color;
        }

-        if (is_string($color) && str_starts_with($color, 'rgb')) {
-            return Color::rgb($color);
-        }
-
-        return $color;
-    }
-
-    /**
-     * @param  array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | string | null  $color
-     */
-    public function dangerColor(array | string | null $color): static
-    {
-        $this->dangerColor = $this->processColor($color);
-
        return $this;
    }
-
-    /**
-     * @return array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string}
-     */
-    public function getDangerColor(): array
-    {
-        return $this->dangerColor ?? Color::Red;
-    }
-
-    /**
-     * @param  array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | string | null  $color
-     */
-    public function grayColor(array | string | null $color): static
-    {
-        $this->grayColor = $this->processColor($color);
-
-        return $this;
-    }
-
-    /**
-     * @return array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string}
-     */
-    public function getGrayColor(): array
-    {
-        return $this->grayColor ?? Color::Gray;
-    }
-
-    /**
-     * @param  array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | string | null  $color
-     */
-    public function infoColor(array | string | null $color): static
-    {
-        $this->infoColor = $this->processColor($color);
-
-        return $this;
-    }
-
-    /**
-     * @return array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string}
-     */
-    public function getInfoColor(): array
-    {
-        return $this->infoColor ?? Color::Blue;
-    }
-
-    /**
-     * @param  array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | string | null  $color
-     */
-    public function primaryColor(array | string | null $color): static
-    {
-        $this->primaryColor = $this->processColor($color);
-
-        return $this;
-    }
-
-    /**
-     * @return array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string}
-     */
-    public function getPrimaryColor(): array
-    {
-        return $this->primaryColor ?? Color::Amber;
-    }
-
-    /**
-     * @param  array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | string | null  $color
-     */
-    public function secondaryColor(array | string | null $color): static
-    {
-        $this->secondaryColor = $this->processColor($color);
-
-        return $this;
-    }
-
-    /**
-     * @return array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string}
-     */
-    public function getSecondaryColor(): array
-    {
-        return $this->secondaryColor ?? Color::Gray;
-    }
-
-    /**
-     * @param  array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | string | null  $color
-     */
-    public function successColor(array | string | null $color): static
-    {
-        $this->successColor = $this->processColor($color);
-
-        return $this;
-    }
-
-    /**
-     * @return array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string}
-     */
-    public function getSuccessColor(): array
-    {
-        return $this->successColor ?? Color::Green;
-    }
-
-    /**
-     * @param  array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | string | null  $color
-     */
-    public function warningColor(array | string | null $color): static
-    {
-        $this->warningColor = $this->processColor($color);
-
-        return $this;
-    }
-
-    /**
-     * @return array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string}
-     */
-    public function getWarningColor(): array
-    {
-        return $this->warningColor ?? Color::Amber;
-    }
-
-    /**
-     * @return array{
-     *     'danger': array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null,
-     *     'gray': array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null,
-     *     'info': array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null,
-     *     'primary': array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null,
-     *     'secondary': array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null,
-     *     'success': array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | null,
-     *     'warning': 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 function getColors(): array
-    {
-        return [
-            'danger' => $this->getDangerColor(),
-            'gray' => $this->getGrayColor(),
-            'info' => $this->getInfoColor(),
-            'primary' => $this->getPrimaryColor(),
-            'secondary' => $this->getSecondaryColor(),
-            'success' => $this->getSuccessColor(),
-            'warning' => $this->getWarningColor(),
-        ];
-    }
 }
@@ -8,7 +8,7 @@ use Filament\Http\Middleware\DispatchServingFilamentEvent;
 use Filament\Pages;
 use Filament\Panel;
 use Filament\PanelProvider;
-use Filament\Support\Color;
+use Filament\Support\Colors\Color;
 use Filament\Widgets;
 use Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse;
 use Illuminate\Cookie\Middleware\EncryptCookies;
@@ -25,7 +25,9 @@ class {{ class }} extends PanelProvider
        return $panel
            ->id('{{ id }}')
            ->path('{{ id }}')
-            ->primaryColor(Color::Amber)
+            ->colors([
+                'primary' => Color::Amber,
+            ])
            ->discoverResources(in: app_path('Filament/{{ directory }}/Resources'), for: 'App\\Filament\\{{ directory }}\\Resources')
            ->discoverPages(in: app_path('Filament/{{ directory }}/Pages'), for: 'App\\Filament\\{{ directory }}\\Pages')
            ->pages([
@@ -8,96 +8,109 @@ export default {
    theme: {
        extend: {
            colors: {
+                custom: {
+                    50: 'rgba(var(--c-50), <alpha-value>)',
+                    100: 'rgba(var(--c-100), <alpha-value>)',
+                    200: 'rgba(var(--c-200), <alpha-value>)',
+                    300: 'rgba(var(--c-300), <alpha-value>)',
+                    400: 'rgba(var(--c-400), <alpha-value>)',
+                    500: 'rgba(var(--c-500), <alpha-value>)',
+                    600: 'rgba(var(--c-600), <alpha-value>)',
+                    700: 'rgba(var(--c-700), <alpha-value>)',
+                    800: 'rgba(var(--c-800), <alpha-value>)',
+                    900: 'rgba(var(--c-900), <alpha-value>)',
+                    950: 'rgba(var(--c-950), <alpha-value>)',
+                },
                danger: {
-                    50: 'rgba(var(--danger-color-50), <alpha-value>)',
-                    100: 'rgba(var(--danger-color-100), <alpha-value>)',
-                    200: 'rgba(var(--danger-color-200), <alpha-value>)',
-                    300: 'rgba(var(--danger-color-300), <alpha-value>)',
-                    400: 'rgba(var(--danger-color-400), <alpha-value>)',
-                    500: 'rgba(var(--danger-color-500), <alpha-value>)',
-                    600: 'rgba(var(--danger-color-600), <alpha-value>)',
-                    700: 'rgba(var(--danger-color-700), <alpha-value>)',
-                    800: 'rgba(var(--danger-color-800), <alpha-value>)',
-                    900: 'rgba(var(--danger-color-900), <alpha-value>)',
-                    950: 'rgba(var(--danger-color-950), <alpha-value>)',
+                    50: 'rgba(var(--danger-50), <alpha-value>)',
+                    100: 'rgba(var(--danger-100), <alpha-value>)',
+                    200: 'rgba(var(--danger-200), <alpha-value>)',
+                    300: 'rgba(var(--danger-300), <alpha-value>)',
+                    400: 'rgba(var(--danger-400), <alpha-value>)',
+                    500: 'rgba(var(--danger-500), <alpha-value>)',
+                    600: 'rgba(var(--danger-600), <alpha-value>)',
+                    700: 'rgba(var(--danger-700), <alpha-value>)',
+                    800: 'rgba(var(--danger-800), <alpha-value>)',
+                    900: 'rgba(var(--danger-900), <alpha-value>)',
+                    950: 'rgba(var(--danger-950), <alpha-value>)',
                },
                gray: {
-                    50: 'rgba(var(--gray-color-50), <alpha-value>)',
-                    100: 'rgba(var(--gray-color-100), <alpha-value>)',
-                    200: 'rgba(var(--gray-color-200), <alpha-value>)',
-                    300: 'rgba(var(--gray-color-300), <alpha-value>)',
-                    400: 'rgba(var(--gray-color-400), <alpha-value>)',
-                    500: 'rgba(var(--gray-color-500), <alpha-value>)',
-                    600: 'rgba(var(--gray-color-600), <alpha-value>)',
-                    700: 'rgba(var(--gray-color-700), <alpha-value>)',
-                    800: 'rgba(var(--gray-color-800), <alpha-value>)',
-                    900: 'rgba(var(--gray-color-900), <alpha-value>)',
-                    950: 'rgba(var(--gray-color-950), <alpha-value>)',
+                    50: 'rgba(var(--gray-50), <alpha-value>)',
+                    100: 'rgba(var(--gray-100), <alpha-value>)',
+                    200: 'rgba(var(--gray-200), <alpha-value>)',
+                    300: 'rgba(var(--gray-300), <alpha-value>)',
+                    400: 'rgba(var(--gray-400), <alpha-value>)',
+                    500: 'rgba(var(--gray-500), <alpha-value>)',
+                    600: 'rgba(var(--gray-600), <alpha-value>)',
+                    700: 'rgba(var(--gray-700), <alpha-value>)',
+                    800: 'rgba(var(--gray-800), <alpha-value>)',
+                    900: 'rgba(var(--gray-900), <alpha-value>)',
+                    950: 'rgba(var(--gray-950), <alpha-value>)',
                },
                info: {
-                    50: 'rgba(var(--info-color-50), <alpha-value>)',
-                    100: 'rgba(var(--info-color-100), <alpha-value>)',
-                    200: 'rgba(var(--info-color-200), <alpha-value>)',
-                    300: 'rgba(var(--info-color-300), <alpha-value>)',
-                    400: 'rgba(var(--info-color-400), <alpha-value>)',
-                    500: 'rgba(var(--info-color-500), <alpha-value>)',
-                    600: 'rgba(var(--info-color-600), <alpha-value>)',
-                    700: 'rgba(var(--info-color-700), <alpha-value>)',
-                    800: 'rgba(var(--info-color-800), <alpha-value>)',
-                    900: 'rgba(var(--info-color-900), <alpha-value>)',
-                    950: 'rgba(var(--info-color-950), <alpha-value>)',
+                    50: 'rgba(var(--info-50), <alpha-value>)',
+                    100: 'rgba(var(--info-100), <alpha-value>)',
+                    200: 'rgba(var(--info-200), <alpha-value>)',
+                    300: 'rgba(var(--info-300), <alpha-value>)',
+                    400: 'rgba(var(--info-400), <alpha-value>)',
+                    500: 'rgba(var(--info-500), <alpha-value>)',
+                    600: 'rgba(var(--info-600), <alpha-value>)',
+                    700: 'rgba(var(--info-700), <alpha-value>)',
+                    800: 'rgba(var(--info-800), <alpha-value>)',
+                    900: 'rgba(var(--info-900), <alpha-value>)',
+                    950: 'rgba(var(--info-950), <alpha-value>)',
                },
                primary: {
-                    50: 'rgba(var(--primary-color-50), <alpha-value>)',
-                    100: 'rgba(var(--primary-color-100), <alpha-value>)',
-                    200: 'rgba(var(--primary-color-200), <alpha-value>)',
-                    300: 'rgba(var(--primary-color-300), <alpha-value>)',
-                    400: 'rgba(var(--primary-color-400), <alpha-value>)',
-                    500: 'rgba(var(--primary-color-500), <alpha-value>)',
-                    600: 'rgba(var(--primary-color-600), <alpha-value>)',
-                    700: 'rgba(var(--primary-color-700), <alpha-value>)',
-                    800: 'rgba(var(--primary-color-800), <alpha-value>)',
-                    900: 'rgba(var(--primary-color-900), <alpha-value>)',
-                    950: 'rgba(var(--primary-color-950), <alpha-value>)',
+                    50: 'rgba(var(--primary-50), <alpha-value>)',
+                    100: 'rgba(var(--primary-100), <alpha-value>)',
+                    200: 'rgba(var(--primary-200), <alpha-value>)',
+                    300: 'rgba(var(--primary-300), <alpha-value>)',
+                    400: 'rgba(var(--primary-400), <alpha-value>)',
+                    500: 'rgba(var(--primary-500), <alpha-value>)',
+                    600: 'rgba(var(--primary-600), <alpha-value>)',
+                    700: 'rgba(var(--primary-700), <alpha-value>)',
+                    800: 'rgba(var(--primary-800), <alpha-value>)',
+                    900: 'rgba(var(--primary-900), <alpha-value>)',
+                    950: 'rgba(var(--primary-950), <alpha-value>)',
                },
                secondary: {
-                    50: 'rgba(var(--secondary-color-50), <alpha-value>)',
-                    100: 'rgba(var(--secondary-color-100), <alpha-value>)',
-                    200: 'rgba(var(--secondary-color-200), <alpha-value>)',
-                    300: 'rgba(var(--secondary-color-300), <alpha-value>)',
-                    400: 'rgba(var(--secondary-color-400), <alpha-value>)',
-                    500: 'rgba(var(--secondary-color-500), <alpha-value>)',
-                    600: 'rgba(var(--secondary-color-600), <alpha-value>)',
-                    700: 'rgba(var(--secondary-color-700), <alpha-value>)',
-                    800: 'rgba(var(--secondary-color-800), <alpha-value>)',
-                    900: 'rgba(var(--secondary-color-900), <alpha-value>)',
-                    950: 'rgba(var(--secondary-color-950), <alpha-value>)',
+                    50: 'rgba(var(--secondary-50), <alpha-value>)',
+                    100: 'rgba(var(--secondary-100), <alpha-value>)',
+                    200: 'rgba(var(--secondary-200), <alpha-value>)',
+                    300: 'rgba(var(--secondary-300), <alpha-value>)',
+                    400: 'rgba(var(--secondary-400), <alpha-value>)',
+                    500: 'rgba(var(--secondary-500), <alpha-value>)',
+                    600: 'rgba(var(--secondary-600), <alpha-value>)',
+                    700: 'rgba(var(--secondary-700), <alpha-value>)',
+                    800: 'rgba(var(--secondary-800), <alpha-value>)',
+                    900: 'rgba(var(--secondary-900), <alpha-value>)',
+                    950: 'rgba(var(--secondary-950), <alpha-value>)',
                },
                success: {
-                    50: 'rgba(var(--success-color-50), <alpha-value>)',
-                    100: 'rgba(var(--success-color-100), <alpha-value>)',
-                    200: 'rgba(var(--success-color-200), <alpha-value>)',
-                    300: 'rgba(var(--success-color-300), <alpha-value>)',
-                    400: 'rgba(var(--success-color-400), <alpha-value>)',
-                    500: 'rgba(var(--success-color-500), <alpha-value>)',
-                    600: 'rgba(var(--success-color-600), <alpha-value>)',
-                    700: 'rgba(var(--success-color-700), <alpha-value>)',
-                    800: 'rgba(var(--success-color-800), <alpha-value>)',
-                    900: 'rgba(var(--success-color-900), <alpha-value>)',
-                    950: 'rgba(var(--success-color-950), <alpha-value>)',
+                    50: 'rgba(var(--success-50), <alpha-value>)',
+                    100: 'rgba(var(--success-100), <alpha-value>)',
+                    200: 'rgba(var(--success-200), <alpha-value>)',
+                    300: 'rgba(var(--success-300), <alpha-value>)',
+                    400: 'rgba(var(--success-400), <alpha-value>)',
+                    500: 'rgba(var(--success-500), <alpha-value>)',
+                    600: 'rgba(var(--success-600), <alpha-value>)',
+                    700: 'rgba(var(--success-700), <alpha-value>)',
+                    800: 'rgba(var(--success-800), <alpha-value>)',
+                    900: 'rgba(var(--success-900), <alpha-value>)',
+                    950: 'rgba(var(--success-950), <alpha-value>)',
                },
                warning: {
-                    50: 'rgba(var(--warning-color-50), <alpha-value>)',
-                    100: 'rgba(var(--warning-color-100), <alpha-value>)',
-                    200: 'rgba(var(--warning-color-200), <alpha-value>)',
-                    300: 'rgba(var(--warning-color-300), <alpha-value>)',
-                    400: 'rgba(var(--warning-color-400), <alpha-value>)',
-                    500: 'rgba(var(--warning-color-500), <alpha-value>)',
-                    600: 'rgba(var(--warning-color-600), <alpha-value>)',
-                    700: 'rgba(var(--warning-color-700), <alpha-value>)',
-                    800: 'rgba(var(--warning-color-800), <alpha-value>)',
-                    900: 'rgba(var(--warning-color-900), <alpha-value>)',
-                    950: 'rgba(var(--warning-color-950), <alpha-value>)',
+                    50: 'rgba(var(--warning-50), <alpha-value>)',
+                    100: 'rgba(var(--warning-100), <alpha-value>)',
+                    200: 'rgba(var(--warning-200), <alpha-value>)',
+                    300: 'rgba(var(--warning-300), <alpha-value>)',
+                    400: 'rgba(var(--warning-400), <alpha-value>)',
+                    500: 'rgba(var(--warning-500), <alpha-value>)',
+                    600: 'rgba(var(--warning-600), <alpha-value>)',
+                    700: 'rgba(var(--warning-700), <alpha-value>)',
+                    800: 'rgba(var(--warning-800), <alpha-value>)',
+                    900: 'rgba(var(--warning-900), <alpha-value>)',
+                    950: 'rgba(var(--warning-950), <alpha-value>)',
                },
            },
            fontFamily: {
@@ -7,3 +7,9 @@
@foreach ($assets as $asset)
    {{ $asset->getHtml() }}
@endforeach
+
+<style>
+    :root {
+        @foreach ($cssVariables ?? [] as $cssVariableName => $cssVariableValue) --{{ $cssVariableName }}: {{ $cssVariableValue }}; @endforeach
+    }
+</style>
@@ -22,14 +22,8 @@
        'pe-4' => $indicator,
        'pointer-events-none opacity-70' => $disabled,
        match ($color) {
-            'danger' => 'text-danger-600 hover:text-danger-500 dark:text-danger-500 dark:hover:text-danger-400',
            'gray' => 'text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200',
-            'info' => 'text-info-600 hover:text-info-500 dark:text-info-500 dark:hover:text-info-400',
-            'primary' => 'text-primary-600 hover:text-primary-500 dark:text-primary-500 dark:hover:text-primary-400',
-            'secondary' => 'text-secondary-600 hover:text-secondary-500 dark:text-secondary-500 dark:hover:text-secondary-400',
-            'success' => 'text-success-600 hover:text-success-500 dark:text-success-500 dark:hover:text-success-400',
-            'warning' => 'text-warning-600 hover:text-warning-500 dark:text-warning-500 dark:hover:text-warning-400',
-            default => $color,
+            default => 'text-custom-600 hover:text-custom-500 dark:text-custom-500 dark:hover:text-custom-400',
        },
        match ($size) {
            'sm' => 'text-sm',
@@ -38,6 +32,8 @@
        },
    ];

+    $cssVariables = Filament\Support\get_color_css_variables($color, shades: [400, 500, 600], except: ['gray']);
+
    $iconSize = match ($iconSize) {
        'sm' => 'h-4 w-4',
        'md' => 'h-5 w-5',
@@ -85,6 +81,7 @@
        @if ($tooltip)
            x-tooltip.raw="{{ $tooltip }}"
        @endif
+        style="{{ $cssVariables }}"
        {{ $attributes->class($linkClasses) }}
    >
        @if ($icon && $iconPosition === 'before')
@@ -3,6 +3,7 @@
 namespace Filament\Support\Assets;

 use Exception;
+use Filament\Support\Facades\FilamentColor;
 use Illuminate\Support\Arr;

 class AssetManager
@@ -198,8 +199,17 @@ class AssetManager
     */
    public function renderStyles(?array $packages = null): string
    {
+        $variables = [];
+
+        foreach (FilamentColor::getColors() as $colorName => $colorShades) {
+            foreach ($colorShades as $shade => $color) {
+                $variables["{$colorName}-{$shade}"] = $color;
+            }
+        }
+
        return view('filament::assets', [
            'assets' => $this->getStyles($packages),
+            'cssVariables' => $variables,
        ])->render();
    }

@@ -1,6 +1,6 @@
 <?php

-namespace Filament\Support;
+namespace Filament\Support\Colors;

 use Spatie\Color\Hex;
 use Spatie\Color\Rgb;
@@ -0,0 +1,60 @@
+<?php
+
+namespace Filament\Support\Colors;
+
+use Filament\Support\Colors\Color;
+use Filament\Support\Colors\Concerns\CanConfigureColors;
+
+class ColorManager
+{
+    /**
+     * @var array<string, array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string}>
+     */
+    protected array $colors = [];
+
+    /**
+     * @param array<string, array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | string> $colors
+     */
+    public function register(array $colors): static
+    {
+        foreach ($colors as $colorName => $color) {
+            $this->colors[$colorName] = $this->processColor($color);
+        }
+
+        return $this;
+    }
+
+    /**
+     * @param  array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | string  $color
+     * @return array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} | string
+     */
+    public function processColor(array | string $color): array | string
+    {
+        if (is_string($color) && str_starts_with($color, '#')) {
+            return Color::hex($color);
+        }
+
+        if (is_string($color) && str_starts_with($color, 'rgb')) {
+            return Color::rgb($color);
+        }
+
+        return $color;
+    }
+
+    /**
+     * @return array<string, array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string}>
+     */
+    public function getColors(): array
+    {
+        return [
+            'danger' => Color::Red,
+            'gray' => Color::Gray,
+            'info' => Color::Blue,
+            'primary' => Color::Amber,
+            'secondary' => Color::Gray,
+            'success' => Color::Green,
+            'warning' => Color::Amber,
+            ...$this->colors,
+        ];
+    }
+}
@@ -0,0 +1,22 @@
+<?php
+
+namespace Filament\Support\Facades;
+
+use Filament\Support\Colors\ColorManager;
+use Filament\Support\Icons\Icon;
+use Filament\Support\Icons\IconManager;
+use Illuminate\Support\Facades\Facade;
+
+/**
+ * @method static void register(array $colors)
+ * @method static array<string, array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string}> getColors()
+ *
+ * @see ColorManager
+ */
+class FilamentColor extends Facade
+{
+    protected static function getFacadeAccessor(): string
+    {
+        return ColorManager::class;
+    }
+}
@@ -5,6 +5,7 @@ namespace Filament\Support;
 use Composer\InstalledVersions;
 use Filament\Support\Assets\AssetManager;
 use Filament\Support\Assets\Js;
+use Filament\Support\Colors\ColorManager;
 use Filament\Support\Commands\AssetsCommand;
 use Filament\Support\Commands\CheckTranslationsCommand;
 use Filament\Support\Commands\InstallCommand;
@@ -46,6 +47,13 @@ class SupportServiceProvider extends PackageServiceProvider
            },
        );

+        $this->app->scoped(
+            ColorManager::class,
+            function () {
+                return new ColorManager();
+            },
+        );
+
        $this->app->scoped(
            IconManager::class,
            function () {
@@ -45,6 +45,37 @@ if (! function_exists('Filament\Support\locale_has_pluralization')) {
    }
 }

+if (! function_exists('Filament\Support\get_color_css_variables')) {
+    /**
+     * @param string | array{50: string, 100: string, 200: string, 300: string, 400: string, 500: string, 600: string, 700: string, 800: string, 900: string, 950: string} $color
+     * @param array<int> $shades
+     * @param array<string> $except
+     * @return string
+     */
+    function get_color_css_variables(string | array $color, array $shades, array $except = []): string
+    {
+        if (in_array($color, $except)) {
+            return '';
+        }
+
+        $variables = [];
+
+        if (is_string($color)) {
+            foreach ($shades as $shade) {
+                $variables[] = "--c-{$shade}:var(--{$color}-{$shade})";
+            }
+        }
+
+        if (is_array($color)) {
+            foreach ($color as $shade => $shadeColor) {
+                $variables[] = "--c-{$shade}: {$shadeColor}";
+            }
+        }
+
+        return implode(';', $variables);
+    }
+}
+
 if (! function_exists('Filament\Support\prepare_inherited_attributes')) {
    function prepare_inherited_attributes(ComponentAttributeBag $attributes): ComponentAttributeBag
    {
@@ -8,7 +8,7 @@ use Filament\Http\Middleware\DispatchServingFilamentEvent;
 use Filament\Pages;
 use Filament\Panel;
 use Filament\PanelProvider;
-use Filament\Support\Color;
+use Filament\Support\Colors\Color;
 use Filament\Widgets;
 use Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse;
 use Illuminate\Cookie\Middleware\EncryptCookies;
@@ -27,7 +27,9 @@ class AdminPanelProvider extends PanelProvider
            ->id('admin')
            ->path('admin')
            ->login()
-            ->primaryColor(Color::Amber)
+            ->colors([
+                'primary' => Color::Amber,
+            ])
            ->discoverResources(in: app_path('Filament/Resources'), for: 'App\\Filament\\Resources')
            ->discoverPages(in: app_path('Filament/Pages'), for: 'App\\Filament\\Pages')
            ->pages([
@@ -444,7 +444,7 @@ class TestsActions

    public function assertTableActionHasColor(): Closure
    {
-        return function (string | array $name, string $color, $record = null): static {
+        return function (string | array $name, string | array $color, $record = null): static {
            $name = $this->parseNestedActionName($name);

            /** @phpstan-ignore-next-line */
@@ -473,7 +473,7 @@ class TestsActions

    public function assertTableActionDoesNotHaveColor(): Closure
    {
-        return function (string | array $name, string $color, $record = null): static {
+        return function (string | array $name, string | array $color, $record = null): static {
            $name = $this->parseNestedActionName($name);

            /** @phpstan-ignore-next-line */
@@ -350,7 +350,7 @@ class TestsBulkActions

    public function assertTableBulkActionHasColor(): Closure
    {
-        return function (string $name, string $color, $record = null): static {
+        return function (string $name, string | array $color, $record = null): static {
            $name = $this->parseActionName($name);

            /** @phpstan-ignore-next-line */
@@ -371,7 +371,7 @@ class TestsBulkActions

    public function assertTableBulkActionDoesNotHaveColor(): Closure
    {
-        return function (string $name, string $color, $record = null): static {
+        return function (string $name, string | array $color, $record = null): static {
            $name = $this->parseActionName($name);

            /** @phpstan-ignore-next-line */
@@ -58,7 +58,7 @@ use Filament\Navigation\NavigationGroup;
 use Filament\Pages;
 use Filament\Panel;
 use Filament\PanelProvider;
-use Filament\Support\Color;
+use Filament\Support\Colors\Color;
 use Filament\Widgets;
 use Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse;
 use Illuminate\Cookie\Middleware\EncryptCookies;
@@ -77,7 +77,9 @@ class {$className} extends PanelProvider
            ->id('{$id}')
            ->path({$pathPhp}){$domainPhp}
            ->login(){$authGuardPhp}
-            ->primaryColor(Color::Amber)
+            ->colors([
+                'primary' => Color::Amber,
+            ])
            ->discoverResources(in: {$resourcesPathPhp}, for: {$resourcesNamespacePhp})
            ->discoverPages(in: {$pagesPathPhp}, for: {$pagesNamespacePhp})
            ->pages([