diff --git a/docs-assets/app/app/Providers/Filament/AdminPanelProvider.php b/docs-assets/app/app/Providers/Filament/AdminPanelProvider.php index 6a1e7ab70c..41b2a43094 100644 --- a/docs-assets/app/app/Providers/Filament/AdminPanelProvider.php +++ b/docs-assets/app/app/Providers/Filament/AdminPanelProvider.php @@ -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([ diff --git a/package-lock.json b/package-lock.json index 3eeb8d3df9..265afe8df2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2562,9 +2562,9 @@ } }, "node_modules/@types/eslint": { - "version": "8.40.1", - "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.40.1.tgz", - "integrity": "sha512-vRb792M4mF1FBT+eoLecmkpLXwxsBHvWWRGJjzbYANBM6DtiJc6yETyv4rqDA6QNjF1pkj1U7LMA6dGb3VYlHw==", + "version": "8.40.2", + "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.40.2.tgz", + "integrity": "sha512-PRVjQ4Eh9z9pmmtaq8nTjZjQwKFk7YIHIud3lRoKRBgUQjgjRmoGxxGEPXQkF+lH7QkHJRNr5F4aBgYCW0lqpQ==", "dev": true, "dependencies": { "@types/estree": "*", @@ -2712,9 +2712,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "20.3.0", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.0.tgz", - "integrity": "sha512-cumHmIAf6On83X7yP+LrsEyUOf/YlociZelmpRYaGFydoaPdxdt80MAbu6vWerQT2COCp2nPvHdsbD7tHn/YlQ==", + "version": "20.3.1", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.1.tgz", + "integrity": "sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==", "dev": true }, "node_modules/@types/parse-json": { @@ -3634,9 +3634,9 @@ } }, "node_modules/browserslist": { - "version": "4.21.7", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.7.tgz", - "integrity": "sha512-BauCXrQ7I2ftSqd2mvKHGo85XR0u7Ru3C/Hxsy/0TkfCtjrmAbPdzLGasmoiBxplpDXlPvdjX9u7srIMfgasNA==", + "version": "4.21.8", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.8.tgz", + "integrity": "sha512-j+7xYe+v+q2Id9qbBeCI8WX5NmZSRe8es1+0xntD/+gaWXznP8tFEkv5IgSaHf5dS1YwVMbX/4W6m937mj+wQw==", "dev": true, "funding": [ { @@ -3653,8 +3653,8 @@ } ], "dependencies": { - "caniuse-lite": "^1.0.30001489", - "electron-to-chromium": "^1.4.411", + "caniuse-lite": "^1.0.30001502", + "electron-to-chromium": "^1.4.428", "node-releases": "^2.0.12", "update-browserslist-db": "^1.0.11" }, @@ -3757,9 +3757,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001502", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001502.tgz", - "integrity": "sha512-AZ+9tFXw1sS0o0jcpJQIXvFTOB/xGiQ4OQ2t98QX3NDn2EZTSRBC801gxrsGgViuq2ak/NLkNgSNEPtCr5lfKg==", + "version": "1.0.30001503", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001503.tgz", + "integrity": "sha512-Sf9NiF+wZxPfzv8Z3iS0rXM1Do+iOy2Lxvib38glFX+08TCYYYGR5fRJXk4d77C4AYwhUjgYgMsMudbh2TqCKw==", "dev": true, "funding": [ { @@ -4307,9 +4307,9 @@ } }, "node_modules/css-loader/node_modules/schema-utils": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.2.0.tgz", - "integrity": "sha512-0zTyLGyDJYd/MBxG1AhJkKa6fpEBds4OQO2ut0w7OYG+ZGhGea09lijvzsqegYSik88zc7cUtIlnnO+/BvD6gQ==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz", + "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==", "dev": true, "dependencies": { "@types/json-schema": "^7.0.8", @@ -4783,9 +4783,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.4.427", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.427.tgz", - "integrity": "sha512-HK3r9l+Jm8dYAm1ctXEWIC+hV60zfcjS9UA5BDlYvnI5S7PU/yytjpvSrTNrSSRRkuu3tDyZhdkwIczh+0DWaw==", + "version": "1.4.430", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.430.tgz", + "integrity": "sha512-FytjTbGwz///F+ToZ5XSeXbbSaXalsVRXsz2mHityI5gfxft7ieW3HqFLkU5V1aIrY42aflICqbmFoDxW10etg==", "dev": true }, "node_modules/elliptic": { @@ -4834,9 +4834,9 @@ } }, "node_modules/enhanced-resolve": { - "version": "5.14.1", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.14.1.tgz", - "integrity": "sha512-Vklwq2vDKtl0y/vtwjSesgJ5MYS7Etuk5txS8VdKL4AOS1aUlD96zqIfsOSLQsdv3xgMRbtkWM8eG9XDfKUPow==", + "version": "5.15.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz", + "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==", "dev": true, "dependencies": { "graceful-fs": "^4.2.4", @@ -5360,9 +5360,9 @@ } }, "node_modules/file-loader/node_modules/schema-utils": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.2.0.tgz", - "integrity": "sha512-0zTyLGyDJYd/MBxG1AhJkKa6fpEBds4OQO2ut0w7OYG+ZGhGea09lijvzsqegYSik88zc7cUtIlnnO+/BvD6gQ==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz", + "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==", "dev": true, "dependencies": { "@types/json-schema": "^7.0.8", @@ -6026,10 +6026,20 @@ } }, "node_modules/html-entities": { - "version": "2.3.5", - "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.5.tgz", - "integrity": "sha512-72TJlcMkYsEJASa/3HnX7VT59htM7iSHbH59NSZbtc+22Ap0Txnlx91sfeB+/A7wNZg7UxtZdhAW4y+/jimrdg==", - "dev": true + "version": "2.3.6", + "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.6.tgz", + "integrity": "sha512-9o0+dcpIw2/HxkNuYKxSJUF/MMRZQECK4GnF+oQOmJ83yCVHTWgCH5aOXxK5bozNRmM8wtgryjHD3uloPBDEGw==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/mdevils" + }, + { + "type": "patreon", + "url": "https://patreon.com/mdevils" + } + ] }, "node_modules/html-loader": { "version": "1.3.2", @@ -6054,9 +6064,9 @@ } }, "node_modules/html-loader/node_modules/schema-utils": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.2.0.tgz", - "integrity": "sha512-0zTyLGyDJYd/MBxG1AhJkKa6fpEBds4OQO2ut0w7OYG+ZGhGea09lijvzsqegYSik88zc7cUtIlnnO+/BvD6gQ==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz", + "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==", "dev": true, "dependencies": { "@types/json-schema": "^7.0.8", @@ -7354,9 +7364,9 @@ } }, "node_modules/mini-css-extract-plugin/node_modules/schema-utils": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.2.0.tgz", - "integrity": "sha512-0zTyLGyDJYd/MBxG1AhJkKa6fpEBds4OQO2ut0w7OYG+ZGhGea09lijvzsqegYSik88zc7cUtIlnnO+/BvD6gQ==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz", + "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==", "dev": true, "dependencies": { "@types/json-schema": "^7.0.8", @@ -8950,9 +8960,9 @@ } }, "node_modules/pusher-js/node_modules/@types/node": { - "version": "14.18.50", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.50.tgz", - "integrity": "sha512-DdJP83r2Zp5x32la3jEzjIlB85+2gMPUHP1xFL2xFORzbJ94sNwh4b6ZBaF6EN/7BTII6mba3yakqfLEnt5eZg==", + "version": "14.18.51", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.51.tgz", + "integrity": "sha512-P9bsdGFPpVtofEKlhWMVS2qqx1A/rt9QBfihWlklfHHpUpjtYse5AzFz6j4DWrARLYh6gRnw9+5+DJcrq3KvBA==", "dev": true }, "node_modules/qs": { @@ -10068,9 +10078,9 @@ } }, "node_modules/style-loader/node_modules/schema-utils": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.2.0.tgz", - "integrity": "sha512-0zTyLGyDJYd/MBxG1AhJkKa6fpEBds4OQO2ut0w7OYG+ZGhGea09lijvzsqegYSik88zc7cUtIlnnO+/BvD6gQ==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz", + "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==", "dev": true, "dependencies": { "@types/json-schema": "^7.0.8", @@ -10314,9 +10324,9 @@ } }, "node_modules/terser": { - "version": "5.17.7", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.17.7.tgz", - "integrity": "sha512-/bi0Zm2C6VAexlGgLlVxA0P2lru/sdLyfCVaRMfKVo9nWxbmz7f/sD8VPybPeSUJaJcwmCJis9pBIhcVcG1QcQ==", + "version": "5.18.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.18.0.tgz", + "integrity": "sha512-pdL757Ig5a0I+owA42l6tIuEycRuM7FPY4n62h44mRLRfnOxJkkOHd6i89dOpwZlpF6JXBwaAHF6yWzFrt+QyA==", "dev": true, "dependencies": { "@jridgewell/source-map": "^0.3.3", @@ -10366,9 +10376,9 @@ } }, "node_modules/terser-webpack-plugin/node_modules/schema-utils": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.2.0.tgz", - "integrity": "sha512-0zTyLGyDJYd/MBxG1AhJkKa6fpEBds4OQO2ut0w7OYG+ZGhGea09lijvzsqegYSik88zc7cUtIlnnO+/BvD6gQ==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz", + "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==", "dev": true, "dependencies": { "@types/json-schema": "^7.0.8", @@ -11013,9 +11023,9 @@ "dev": true }, "node_modules/webpack-dev-middleware/node_modules/schema-utils": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.1.0.tgz", - "integrity": "sha512-Jw+GZVbP5IggB2WAn6UHI02LBwGmsIeYN/lNbSMZyDziQ7jmtAUrqKqDja+W89YHVs+KL/3IkIMltAklqB1vAw==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz", + "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==", "dev": true, "dependencies": { "@types/json-schema": "^7.0.9", @@ -11125,9 +11135,9 @@ "dev": true }, "node_modules/webpack-dev-server/node_modules/schema-utils": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.1.0.tgz", - "integrity": "sha512-Jw+GZVbP5IggB2WAn6UHI02LBwGmsIeYN/lNbSMZyDziQ7jmtAUrqKqDja+W89YHVs+KL/3IkIMltAklqB1vAw==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz", + "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==", "dev": true, "dependencies": { "@types/json-schema": "^7.0.9", @@ -11185,9 +11195,9 @@ } }, "node_modules/webpack/node_modules/schema-utils": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.2.0.tgz", - "integrity": "sha512-0zTyLGyDJYd/MBxG1AhJkKa6fpEBds4OQO2ut0w7OYG+ZGhGea09lijvzsqegYSik88zc7cUtIlnnO+/BvD6gQ==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz", + "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==", "dev": true, "dependencies": { "@types/json-schema": "^7.0.8", diff --git a/package.json b/package.json index db7df725f1..ff88e2c1bf 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "type": "module", "scripts": { "dev:js": "node bin/build.js --dev", - "dev:css": "npx tailwindcss -c ./packages/panels/tailwind.config.js -i ./packages/panels/resources/css/theme.css -o ./packages/panels/dist/theme.css --minify", + "dev:css": "npx tailwindcss -c ./packages/panels/tailwind.config.js -i ./packages/panels/resources/css/theme.css -o ./packages/panels/dist/theme.css --watch", "dev": "npm-run-all --parallel dev:*", "build:js": "node bin/build.js", "build:css": "npx tailwindcss -c ./packages/panels/tailwind.config.js -i ./packages/panels/resources/css/theme.css -o ./packages/panels/dist/theme.css --minify", diff --git a/packages/actions/src/ActionGroup.php b/packages/actions/src/ActionGroup.php index 2785f6b782..0eff62f0d0 100644 --- a/packages/actions/src/ActionGroup.php +++ b/packages/actions/src/ActionGroup.php @@ -4,7 +4,9 @@ namespace Filament\Actions; use Filament\Actions\Contracts\HasLivewire; use Filament\Support\Components\ViewComponent; +use Filament\Support\Concerns\HasColor; use Filament\Support\Concerns\HasExtraAttributes; +use Filament\Support\Concerns\HasIcon; use Livewire\Component; class ActionGroup extends ViewComponent implements HasLivewire @@ -15,17 +17,17 @@ class ActionGroup extends ViewComponent implements HasLivewire use Concerns\CanBeInline; use Concerns\CanBeLabeledFrom; use Concerns\CanBeOutlined; - use Concerns\HasColor; use Concerns\HasDropdown; use Concerns\HasGroupedIcon; - use Concerns\HasIcon { - getIcon as getBaseIcon; - } use Concerns\HasIndicator; use Concerns\HasLabel; use Concerns\HasSize; use Concerns\HasTooltip; + use HasColor; use HasExtraAttributes; + use HasIcon { + getIcon as getBaseIcon; + } /** * @var array diff --git a/packages/actions/src/Concerns/HasColor.php b/packages/actions/src/Concerns/HasColor.php deleted file mode 100644 index 4cb507593a..0000000000 --- a/packages/actions/src/Concerns/HasColor.php +++ /dev/null @@ -1,22 +0,0 @@ -color = $color; - - return $this; - } - - public function getColor(): ?string - { - return $this->evaluate($this->color); - } -} diff --git a/packages/actions/src/Concerns/HasIcon.php b/packages/actions/src/Concerns/HasIcon.php deleted file mode 100644 index 0b494c4903..0000000000 --- a/packages/actions/src/Concerns/HasIcon.php +++ /dev/null @@ -1,50 +0,0 @@ -icon = $icon; - - return $this; - } - - public function iconPosition(string | Closure | null $position): static - { - $this->iconPosition = $position; - - return $this; - } - - public function iconSize(string | Closure | null $size): static - { - $this->iconSize = $size; - - return $this; - } - - public function getIcon(): ?string - { - return $this->evaluate($this->icon); - } - - public function getIconPosition(): ?string - { - return $this->evaluate($this->iconPosition); - } - - public function getIconSize(): ?string - { - return $this->evaluate($this->iconSize); - } -} diff --git a/packages/actions/src/Concerns/HasIndicator.php b/packages/actions/src/Concerns/HasIndicator.php index 756c9611c3..57fba7d528 100644 --- a/packages/actions/src/Concerns/HasIndicator.php +++ b/packages/actions/src/Concerns/HasIndicator.php @@ -8,7 +8,10 @@ trait HasIndicator { protected string | Closure | null $indicator = null; - protected string | Closure | null $indicatorColor = 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 $indicatorColor = null; public function indicator(string | Closure | null $indicator): static { @@ -17,7 +20,10 @@ trait HasIndicator return $this; } - public function indicatorColor(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 indicatorColor(string | array | Closure | null $color): static { $this->indicatorColor = $color; @@ -29,7 +35,10 @@ trait HasIndicator return $this->evaluate($this->indicator); } - public function getIndicatorColor(): ?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 getIndicatorColor(): string | array | null { return $this->evaluate($this->indicatorColor); } diff --git a/packages/actions/src/StaticAction.php b/packages/actions/src/StaticAction.php index 439f0ac5e4..151378f481 100644 --- a/packages/actions/src/StaticAction.php +++ b/packages/actions/src/StaticAction.php @@ -3,7 +3,9 @@ namespace Filament\Actions; use Filament\Support\Components\ViewComponent; +use Filament\Support\Concerns\HasColor; use Filament\Support\Concerns\HasExtraAttributes; +use Filament\Support\Concerns\HasIcon; use Illuminate\Support\Collection; use Illuminate\Support\Js; use Illuminate\Support\Traits\Conditionable; @@ -22,9 +24,7 @@ class StaticAction extends ViewComponent use Concerns\CanSubmitForm; use Concerns\HasAction; use Concerns\HasArguments; - use Concerns\HasColor; use Concerns\HasGroupedIcon; - use Concerns\HasIcon; use Concerns\HasIndicator; use Concerns\HasKeyBindings; use Concerns\HasLabel; @@ -32,6 +32,8 @@ class StaticAction extends ViewComponent use Concerns\HasSize; use Concerns\HasTooltip; use Conditionable; + use HasColor; + use HasIcon; use HasExtraAttributes; public const BUTTON_VIEW = 'filament-actions::button-action'; diff --git a/packages/actions/src/Testing/TestsActions.php b/packages/actions/src/Testing/TestsActions.php index e8b82c6544..8df1485eac 100644 --- a/packages/actions/src/Testing/TestsActions.php +++ b/packages/actions/src/Testing/TestsActions.php @@ -363,7 +363,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 $name */ /** @phpstan-ignore-next-line */ $name = $this->parseNestedActionName($name); @@ -387,7 +387,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 $name */ /** @phpstan-ignore-next-line */ $name = $this->parseNestedActionName($name); diff --git a/packages/forms/resources/views/components/field-wrapper/hint.blade.php b/packages/forms/resources/views/components/field-wrapper/hint.blade.php index 2ccf4bd482..780ae27cd8 100644 --- a/packages/forms/resources/views/components/field-wrapper/hint.blade.php +++ b/packages/forms/resources/views/components/field-wrapper/hint.blade.php @@ -1,24 +1,18 @@ @props([ 'actions' => [], - 'color' => null, + 'color' => 'gray', 'icon' => null, ])
class([ - 'filament-forms-field-wrapper-hint flex items-center space-x-2 rtl:space-x-reverse', - match ($color) { - 'danger' => 'text-danger-500 dark:text-danger-300', - 'gray', null => 'text-gray-500 dark:text-gray-300', - 'info' => 'text-info-500 dark:text-info-300', - 'primary' => 'text-primary-500 dark:text-primary-300', - 'secondary' => 'text-secondary-500 dark:text-secondary-300', - 'success' => 'text-success-500 dark:text-success-300', - 'warning' => 'text-warning-500 dark:text-warning-300', - default => $color, - }, - ]) + $attributes + ->class([ + 'filament-forms-field-wrapper-hint flex items-center space-x-2 text-custom-500 rtl:space-x-reverse dark:text-custom-300', + ]) + ->style([ + \Filament\Support\get_color_css_variables($color, shades: [300, 500]), + ]) }} > @if ($slot->isNotEmpty()) diff --git a/packages/forms/resources/views/components/toggle.blade.php b/packages/forms/resources/views/components/toggle.blade.php index cf3abf70fd..0b07b01a36 100644 --- a/packages/forms/resources/views/components/toggle.blade.php +++ b/packages/forms/resources/views/components/toggle.blade.php @@ -1,7 +1,7 @@ @php - $offColor = $getOffColor(); - $onColor = $getOnColor(); + $offColor = $getOffColor() ?? 'gray'; + $onColor = $getOnColor() ?? 'primary'; $statePath = $getStatePath(); @endphp @@ -14,30 +14,22 @@ state ? '{{ match ($onColor) { - 'danger' => 'bg-danger-600', - 'gray' => 'bg-gray-600', - 'info' => 'bg-info-600', - 'primary', null => 'bg-primary-600', - 'secondary' => 'bg-secondary-600', - 'success' => 'bg-success-600', - 'warning' => 'bg-warning-600', - default => $onColor, + 'gray' => 'bg-gray-200 dark:bg-gray-700', + default => 'bg-custom-600', } }}' : '{{ match ($offColor) { - 'danger' => 'bg-danger-600', - 'gray' => 'bg-gray-600', - 'info' => 'bg-info-600', - 'primary' => 'bg-primary-600', - 'secondary' => 'bg-secondary-600', - 'success' => 'bg-success-600', - 'warning' => 'bg-warning-600', - null => 'bg-gray-200 dark:bg-gray-700', - default => $offColor, + 'gray' => 'bg-gray-200 dark:bg-gray-700', + default => 'bg-custom-600', } }}' " + x-bind:style=" + state + ? '{{ \Filament\Support\get_color_css_variables($onColor, shades: [600]) }}' + : '{{ \Filament\Support\get_color_css_variables($offColor, shades: [600]) }}' + " {{ $attributes ->merge([ @@ -75,15 +67,8 @@ :name="$getOffIcon()" alias="forms::components.toggle.off" :color="match ($offColor) { - 'danger' => 'text-danger-600', - 'gray' => 'text-gray-600', - 'info' => 'text-info-600', - 'primary' => 'text-primary-600', - 'secondary' => 'text-secondary-600', - 'success' => 'text-success-600', - 'warning' => 'text-warning-600', - null => 'text-gray-400 dark:text-gray-700', - default => $offColor, + 'gray' => 'text-gray-400 dark:text-gray-700', + default => 'text-custom-600', }" size="h-3 w-3" /> @@ -103,14 +88,8 @@ :name="$getOnIcon()" alias="forms::components.toggle.on" :color="match ($onColor) { - 'danger' => 'text-danger-600', - 'gray' => 'text-gray-600', - 'info' => 'text-info-600', - 'primary', null => 'text-primary-600', - 'secondary' => 'text-secondary-600', - 'success' => 'text-success-600', - 'warning' => 'text-warning-600', - default => $onColor, + 'gray' => 'text-gray-400 dark:text-gray-700', + default => 'text-custom-600', }" size="h-3 w-3" x-cloak="x-cloak" diff --git a/packages/forms/src/Components/Card.php b/packages/forms/src/Components/Card.php index cacd36044a..73579b1eda 100644 --- a/packages/forms/src/Components/Card.php +++ b/packages/forms/src/Components/Card.php @@ -23,9 +23,9 @@ class Card extends Component implements CanEntangleWithSingularRelationships } /** - * @param array $schema + * @param array | Closure $schema */ - public static function make(array $schema = []): static + public static function make(array | Closure $schema = []): static { $static = app(static::class, ['schema' => $schema]); $static->configure(); diff --git a/packages/forms/src/Components/Concerns/HasHint.php b/packages/forms/src/Components/Concerns/HasHint.php index fa36407082..63ddc6ac20 100644 --- a/packages/forms/src/Components/Concerns/HasHint.php +++ b/packages/forms/src/Components/Concerns/HasHint.php @@ -21,7 +21,10 @@ trait HasHint */ protected array $hintActions = []; - protected string | Closure | null $hintColor = 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 $hintColor = null; protected string | Closure | null $hintIcon = null; @@ -32,9 +35,12 @@ trait HasHint return $this; } - public function hintColor(string | Closure | null $hintColor): 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 hintColor(string | array | Closure | null $color): static { - $this->hintColor = $hintColor; + $this->hintColor = $color; return $this; } @@ -71,7 +77,10 @@ trait HasHint return $this->evaluate($this->hint); } - public function getHintColor(): ?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 getHintColor(): string | array | null { return $this->evaluate($this->hintColor); } diff --git a/packages/forms/src/Components/Concerns/HasToggleColors.php b/packages/forms/src/Components/Concerns/HasToggleColors.php index 28d6ddc9c7..57cb6222e2 100644 --- a/packages/forms/src/Components/Concerns/HasToggleColors.php +++ b/packages/forms/src/Components/Concerns/HasToggleColors.php @@ -6,30 +6,48 @@ use Closure; trait HasToggleColors { - protected string | Closure | null $offColor = 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 $offColor = null; - protected string | Closure | null $onColor = 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 $onColor = null; - public function offColor(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 offColor(string | array | Closure | null $color): static { $this->offColor = $color; return $this; } - public function onColor(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 onColor(string | array | Closure | null $color): static { $this->onColor = $color; return $this; } - public function getOffColor(): ?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 getOffColor(): string | array | null { return $this->evaluate($this->offColor); } - public function getOnColor(): ?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 getOnColor(): string | array | null { return $this->evaluate($this->onColor); } diff --git a/packages/forms/src/Components/Group.php b/packages/forms/src/Components/Group.php index 28f852be78..f2dc101cef 100644 --- a/packages/forms/src/Components/Group.php +++ b/packages/forms/src/Components/Group.php @@ -23,9 +23,9 @@ class Group extends Component implements CanEntangleWithSingularRelationships } /** - * @param array $schema + * @param array | Closure $schema */ - public static function make(array $schema = []): static + public static function make(array | Closure $schema = []): static { $static = app(static::class, ['schema' => $schema]); $static->configure(); diff --git a/packages/forms/src/Components/Tabs/Tab.php b/packages/forms/src/Components/Tabs/Tab.php index 92c7446bf5..2ce4a807a8 100644 --- a/packages/forms/src/Components/Tabs/Tab.php +++ b/packages/forms/src/Components/Tabs/Tab.php @@ -18,7 +18,10 @@ class Tab extends Component implements CanConcealComponents protected string | Closure | null $icon = null; - protected string | Closure | null $iconColor = 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 $iconColor = null; protected string | Closure | null $iconPosition = null; @@ -43,7 +46,10 @@ class Tab extends Component implements CanConcealComponents return $this; } - public function iconColor(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 iconColor(string | array | Closure | null $color): static { $this->iconColor = $color; @@ -87,7 +93,10 @@ class Tab extends Component implements CanConcealComponents return $this->evaluate($this->iconPosition) ?? 'before'; } - public function getIconColor(): ?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 getIconColor(): string | array | null { return $this->evaluate($this->iconColor); } diff --git a/packages/infolists/resources/views/components/entry-wrapper/hint.blade.php b/packages/infolists/resources/views/components/entry-wrapper/hint.blade.php index cad457cf3d..1d73cce807 100644 --- a/packages/infolists/resources/views/components/entry-wrapper/hint.blade.php +++ b/packages/infolists/resources/views/components/entry-wrapper/hint.blade.php @@ -1,24 +1,18 @@ @props([ 'actions' => [], - 'color' => null, + 'color' => 'gray', 'icon' => null, ])
class([ - 'filament-infolists-entry-wrapper-hint flex items-center space-x-2 rtl:space-x-reverse', - match ($color) { - 'danger' => 'text-danger-500 dark:text-danger-300', - 'gray', null => 'text-gray-500 dark:text-gray-300', - 'info' => 'text-info-500 dark:text-info-300', - 'primary' => 'text-primary-500 dark:text-primary-300', - 'secondary' => 'text-secondary-500 dark:text-secondary-300', - 'success' => 'text-success-500 dark:text-success-300', - 'warning' => 'text-warning-500 dark:text-warning-300', - default => $color, - }, - ]) + $attributes + ->class([ + 'filament-infolists-entry-wrapper-hint flex items-center space-x-2 text-custom-500 rtl:space-x-reverse dark:text-custom-300', + ]) + ->styles([ + \Filament\Support\get_color_css_variables($color, shades: [300, 500]), + ]) }} > @if ($slot->isNotEmpty()) diff --git a/packages/infolists/resources/views/components/icon-entry.blade.php b/packages/infolists/resources/views/components/icon-entry.blade.php index 607bb9af24..05ed5d1f1f 100644 --- a/packages/infolists/resources/views/components/icon-entry.blade.php +++ b/packages/infolists/resources/views/components/icon-entry.blade.php @@ -13,16 +13,7 @@ @endif @endforeach diff --git a/packages/infolists/resources/views/components/text-entry.blade.php b/packages/infolists/resources/views/components/text-entry.blade.php index 66f5bafefc..b5473392a8 100644 --- a/packages/infolists/resources/views/components/text-entry.blade.php +++ b/packages/infolists/resources/views/components/text-entry.blade.php @@ -60,6 +60,7 @@ @foreach ($arrayState as $state) @php $formattedState = $formatState($state); + $color = $getColor($state) ?? 'gray'; $icon = $getIcon($state); @endphp @@ -71,26 +72,14 @@ 'min-h-6 justify-center whitespace-nowrap rounded-xl px-2 py-0.5' => $isBadge, 'prose max-w-none dark:prose-invert' => $isProse, 'whitespace-normal' => $canWrap, - ($isBadge ? match ($color = $getColor($state)) { - 'danger' => 'bg-danger-500/10 text-danger-700 dark:text-danger-500', - 'gray', null => 'bg-gray-500/10 text-gray-700 dark:bg-gray-500/20 dark:text-gray-300', - 'info' => 'bg-info-500/10 text-info-700 dark:text-info-500', - 'primary' => 'bg-primary-500/10 text-primary-700 dark:text-primary-500', - 'secondary' => 'bg-secondary-500/10 text-secondary-700 dark:text-secondary-500', - 'success' => 'bg-success-500/10 text-success-700 dark:text-success-500', - 'warning' => 'bg-warning-500/10 text-warning-700 dark:text-warning-500', - default => $color, - } : null), - ((! ($isBadge || $url)) ? match ($color = $getColor($state)) { - 'danger' => 'text-danger-600', - 'gray' => 'text-gray-600 dark:text-gray-400', - 'info' => 'text-info-600', - 'primary' => 'text-primary-600', - 'secondary' => 'text-secondary-600', - 'success' => 'text-success-600', - 'warning' => 'text-warning-600', - default => $color, - } : null), + match ($color) { + 'gray' => 'bg-gray-500/10 text-gray-700 dark:bg-gray-500/20 dark:text-gray-300', + default => 'bg-custom-500/10 text-custom-700 dark:text-custom-500', + } => $isBadge, + match ($color) { + 'gray' => null, + default => 'text-custom-600', + } => ! ($isBadge || $url), ($isProse ? match ($size = $getSize($state)) { 'sm' => 'prose-sm', 'base', 'md', null => 'prose-base', @@ -121,6 +110,15 @@ default => null, }, ]) + @style([ + \Filament\Support\get_color_css_variables( + $color, + shades: match (true) { + $isBadge => [500, 700], + ! ($isBadge || $url) => [600], + }, + ) => $color !== 'gray', + ]) > @if ($icon && $iconPosition === 'before') $schema + * @param array | Closure $schema */ - public static function make(array $schema = []): static + public static function make(array | Closure $schema = []): static { $static = app(static::class, ['schema' => $schema]); $static->configure(); diff --git a/packages/infolists/src/Components/Concerns/HasColor.php b/packages/infolists/src/Components/Concerns/HasColor.php index c37ad98ba0..0fe7a32942 100644 --- a/packages/infolists/src/Components/Concerns/HasColor.php +++ b/packages/infolists/src/Components/Concerns/HasColor.php @@ -8,9 +8,15 @@ use Filament\Support\Contracts\HasColor as ColorInterface; trait HasColor { - protected string | bool | 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} | bool | Closure | null + */ + protected string | array | bool | Closure | null $color = null; - public function color(string | bool | 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} | bool | Closure | null $color + */ + public function color(string | array | bool | Closure | null $color): static { $this->color = $color; @@ -43,7 +49,10 @@ trait HasColor return $this; } - public function getColor(mixed $state): ?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(mixed $state): string | array | null { $color = $this->evaluate($this->color, [ 'state' => $state, diff --git a/packages/infolists/src/Components/Concerns/HasHint.php b/packages/infolists/src/Components/Concerns/HasHint.php index 43426e4e82..100f4e3eac 100644 --- a/packages/infolists/src/Components/Concerns/HasHint.php +++ b/packages/infolists/src/Components/Concerns/HasHint.php @@ -21,7 +21,10 @@ trait HasHint */ protected array $hintActions = []; - protected string | Closure | null $hintColor = 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 $hintColor = null; protected string | Closure | null $hintIcon = null; @@ -32,9 +35,12 @@ trait HasHint return $this; } - public function hintColor(string | Closure | null $hintColor): 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 hintColor(string | array | Closure | null $color): static { - $this->hintColor = $hintColor; + $this->hintColor = $color; return $this; } @@ -71,7 +77,10 @@ trait HasHint return $this->evaluate($this->hint); } - public function getHintColor(): ?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 getHintColor(): string | array | null { return $this->evaluate($this->hintColor); } diff --git a/packages/infolists/src/Components/Group.php b/packages/infolists/src/Components/Group.php index 106e86353a..2858793a49 100644 --- a/packages/infolists/src/Components/Group.php +++ b/packages/infolists/src/Components/Group.php @@ -22,9 +22,9 @@ class Group extends Component } /** - * @param array $schema + * @param array | Closure $schema */ - public static function make(array $schema = []): static + public static function make(array | Closure $schema = []): static { $static = app(static::class, ['schema' => $schema]); $static->configure(); diff --git a/packages/infolists/src/Components/IconEntry.php b/packages/infolists/src/Components/IconEntry.php index cef987d1b7..28704bac6a 100644 --- a/packages/infolists/src/Components/IconEntry.php +++ b/packages/infolists/src/Components/IconEntry.php @@ -21,11 +21,17 @@ class IconEntry extends Entry protected bool | Closure $isBoolean = false; - protected string | Closure | null $falseColor = 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 $falseColor = null; protected string | Closure | null $falseIcon = null; - protected string | Closure | null $trueColor = 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 $trueColor = null; protected string | Closure | null $trueIcon = null; @@ -36,7 +42,10 @@ class IconEntry extends Entry return $this; } - public function false(string | Closure | null $icon = null, string | Closure | null $color = null): 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 false(string | Closure | null $icon = null, string | array | Closure | null $color = null): static { $this->falseIcon($icon); $this->falseColor($color); @@ -44,7 +53,10 @@ class IconEntry extends Entry return $this; } - public function falseColor(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 falseColor(string | array | Closure | null $color): static { $this->boolean(); $this->falseColor = $color; @@ -60,7 +72,10 @@ class IconEntry extends Entry return $this; } - public function true(string | Closure | null $icon = null, string | Closure | null $color = null): 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 true(string | Closure | null $icon = null, string | array | Closure | null $color = null): static { $this->trueIcon($icon); $this->trueColor($color); @@ -68,7 +83,10 @@ class IconEntry extends Entry return $this; } - public function trueColor(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 trueColor(string | array | Closure | null $color): static { $this->boolean(); $this->trueColor = $color; @@ -101,7 +119,10 @@ class IconEntry extends Entry return $state ? $this->getTrueIcon() : $this->getFalseIcon(); } - public function getColor(mixed $state): ?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(mixed $state): string | array | null { if (filled($color = $this->getBaseColor($state))) { return $color; @@ -118,7 +139,10 @@ class IconEntry extends Entry return $state ? $this->getTrueColor() : $this->getFalseColor(); } - public function getFalseColor(): 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} + */ + public function getFalseColor(): string | array { return $this->evaluate($this->falseColor) ?? 'danger'; } @@ -128,7 +152,10 @@ class IconEntry extends Entry return $this->evaluate($this->falseIcon) ?? 'heroicon-o-x-circle'; } - public function getTrueColor(): 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} + */ + public function getTrueColor(): string | array { return $this->evaluate($this->trueColor) ?? 'success'; } diff --git a/packages/infolists/src/Components/Tabs/Tab.php b/packages/infolists/src/Components/Tabs/Tab.php index fd7329e667..daa0740461 100644 --- a/packages/infolists/src/Components/Tabs/Tab.php +++ b/packages/infolists/src/Components/Tabs/Tab.php @@ -4,10 +4,13 @@ namespace Filament\Infolists\Components\Tabs; use Closure; use Filament\Infolists\Components\Component; +use Filament\Support\Concerns\HasIcon; use Illuminate\Support\Str; class Tab extends Component { + use HasIcon; + /** * @var view-string */ @@ -15,12 +18,6 @@ class Tab extends Component protected string | Closure | null $badge = null; - protected string | Closure | null $icon = null; - - protected string | Closure | null $iconPosition = null; - - protected string | Closure | null $iconColor = null; - final public function __construct(string $label) { $this->label($label); @@ -35,27 +32,6 @@ class Tab extends Component return $static; } - public function icon(string | Closure | null $icon): static - { - $this->icon = $icon; - - return $this; - } - - public function iconPosition(string | Closure | null $position): static - { - $this->iconPosition = $position; - - return $this; - } - - public function iconColor(string | Closure | null $color): static - { - $this->iconColor = $color; - - return $this; - } - public function badge(string | Closure | null $badge): static { $this->badge = $badge; @@ -76,21 +52,6 @@ class Tab extends Component return $this->columns ?? $this->getContainer()->getColumnsConfig(); } - public function getIcon(): ?string - { - return $this->evaluate($this->icon); - } - - public function getIconPosition(): ?string - { - return $this->evaluate($this->iconPosition) ?? 'before'; - } - - public function getIconColor(): ?string - { - return $this->evaluate($this->iconColor); - } - public function getBadge(): ?string { return $this->evaluate($this->badge); diff --git a/packages/notifications/resources/views/components/icon.blade.php b/packages/notifications/resources/views/components/icon.blade.php index 78862e9e11..908ef34626 100644 --- a/packages/notifications/resources/views/components/icon.blade.php +++ b/packages/notifications/resources/views/components/icon.blade.php @@ -1,5 +1,5 @@ @props([ - 'color' => null, + 'color' => 'gray', 'name', 'size' => 'lg', ]) @@ -7,21 +7,20 @@ class(['filament-notifications-notification-icon']) + ->style([ + \Filament\Support\get_color_css_variables($color, shades: [400]), + ]) + }} + {{-- format-ignore-end --}} /> diff --git a/packages/notifications/resources/views/notification.blade.php b/packages/notifications/resources/views/notification.blade.php index 53b4923a2e..b1df1a1037 100644 --- a/packages/notifications/resources/views/notification.blade.php +++ b/packages/notifications/resources/views/notification.blade.php @@ -1,5 +1,5 @@ @php - $color = $getColor(); + $color = $getColor() ?? 'gray'; $isInline = $isInline(); @endphp @@ -27,18 +27,15 @@ false => [ 'max-w-sm rounded-xl bg-white shadow-lg ring-1 dark:bg-gray-800', match ($color) { - 'danger' => 'ring-danger-500/50', - 'gray' => 'ring-gray-500/50', - 'info' => 'ring-info-500/50', - 'primary' => 'ring-primary-500/50', - 'secondary' => 'ring-secondary-500/50', - 'success' => 'ring-success-500/50', - 'warning' => 'ring-warning-500/50', - default => 'ring-gray-950/5 dark:ring-white/20', + 'gray' => 'ring-gray-950/5 dark:ring-white/20', + default => 'ring-custom-500/50', }, ], }, ]) + @style([ + \Filament\Support\get_color_css_variables($color, shades: [500]) => ! ($isInline || $color === 'gray'), + ]) >
[ 'rounded-xl p-4', match ($color) { - 'danger' => 'bg-danger-500/10 dark:bg-danger-500/20', - 'gray' => 'bg-gray-500/10 dark:bg-gray-500/20', - 'info' => 'bg-info-500/10 dark:bg-info-500/20', - 'primary' => 'bg-primary-500/10 dark:bg-primary-500/20', - 'secondary' => 'bg-secondary-500/10 dark:bg-secondary-500/20', - 'success' => 'bg-success-500/10 dark:bg-success-500/20', - 'warning' => 'bg-warning-500/10 dark:bg-warning-500/20', - default => null, + 'gray' => null, + default => 'bg-custom-500/10 dark:bg-custom-500/20', }, ], }, ]) + @style([ + \Filament\Support\get_color_css_variables($color, shades: [500]) => ! ($isInline || $color === 'gray'), + ]) > @if ($icon = $getIcon()) color = $color; - - return $this; - } - - public function getColor(): ?string - { - return $this->evaluate($this->color); - } -} diff --git a/packages/notifications/src/Notification.php b/packages/notifications/src/Notification.php index 15f5a1fe8d..ba4d690c96 100644 --- a/packages/notifications/src/Notification.php +++ b/packages/notifications/src/Notification.php @@ -7,6 +7,7 @@ use Filament\Notifications\Actions\ActionGroup; use Filament\Notifications\Events\DatabaseNotificationsSent; use Filament\Notifications\Http\Livewire\Notifications; use Filament\Support\Components\ViewComponent; +use Filament\Support\Concerns\HasColor; use Filament\Support\Concerns\HasIcon; use Illuminate\Contracts\Auth\Authenticatable; use Illuminate\Contracts\Support\Arrayable; @@ -23,11 +24,11 @@ class Notification extends ViewComponent implements Arrayable use Concerns\CanBeInline; use Concerns\HasActions; use Concerns\HasBody; - use Concerns\HasColor; use Concerns\HasDate; use Concerns\HasDuration; use Concerns\HasId; use Concerns\HasTitle; + use HasColor; use HasIcon; /** diff --git a/packages/panels/docs/11-themes.md b/packages/panels/docs/11-themes.md index 7484d03100..ac2ef1570c 100644 --- a/packages/panels/docs/11-themes.md +++ b/packages/panels/docs/11-themes.md @@ -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') diff --git a/packages/panels/resources/views/components/layouts/app/sidebar/badge.blade.php b/packages/panels/resources/views/components/layouts/app/sidebar/badge.blade.php index 1d5a1841c2..84e5a01171 100644 --- a/packages/panels/resources/views/components/layouts/app/sidebar/badge.blade.php +++ b/packages/panels/resources/views/components/layouts/app/sidebar/badge.blade.php @@ -1,29 +1,26 @@ @props([ 'active' => false, 'badge' => null, - 'badgeColor' => null, + 'badgeColor' => 'primary', ]) isSidebarCollapsibleOnDesktop()) x-show="$store.sidebar.isOpen" @endif - @class([ - 'min-h-4 ms-auto inline-flex items-center justify-center whitespace-normal rounded-xl px-2 py-0.5 text-xs font-medium tracking-tight', - match ($active) { - true => 'bg-gray-900/10 text-white', - false => match ($badgeColor) { - 'danger' => 'bg-danger-500/10 text-danger-700 dark:text-danger-500', - 'gray' => 'bg-gray-500/10 text-gray-700 dark:text-gray-500', - 'info' => 'bg-info-500/10 text-info-700 dark:text-info-500', - 'primary', null => 'bg-primary-500/10 text-primary-700 dark:text-primary-500', - 'secondary' => 'bg-secondary-500/10 text-secondary-700 dark:text-secondary-500', - 'success' => 'bg-success-500/10 text-success-700 dark:text-success-500', - 'warning' => 'bg-warning-500/10 text-warning-700 dark:text-warning-500', - default => $badgeColor, - }, - }, - ]) + {{ + $attributes + ->class([ + 'min-h-4 ms-auto inline-flex items-center justify-center whitespace-normal rounded-xl px-2 py-0.5 text-xs font-medium tracking-tight', + match ($active) { + true => 'bg-gray-900/10 text-white', + false => 'bg-custom-500/10 text-custom-700 dark:text-custom-500', + }, + ]) + ->style([ + \Filament\Support\get_color_css_variables($badgeColor, shades: [500, 700]) => ! $active, + ]) + }} > {{ $badge }} diff --git a/packages/panels/resources/views/components/layouts/app/sidebar/item.blade.php b/packages/panels/resources/views/components/layouts/app/sidebar/item.blade.php index 2f4d530e32..10d97ba303 100644 --- a/packages/panels/resources/views/components/layouts/app/sidebar/item.blade.php +++ b/packages/panels/resources/views/components/layouts/app/sidebar/item.blade.php @@ -4,7 +4,7 @@ 'badge' => null, 'badgeColor' => null, 'icon', - 'iconColor' => null, + 'iconColor' => 'gray', 'shouldOpenUrlInNewTab' => false, 'url', ]) @@ -45,16 +45,11 @@ ! $active, + ]) />
false, 'badge' => null, - 'badgeColor' => null, + 'badgeColor' => 'primary', ]) 'bg-gray-900/10 text-white', - false => match ($badgeColor) { - 'danger' => 'bg-danger-500/10 text-danger-700 dark:text-danger-500', - 'gray' => 'bg-gray-500/10 text-gray-700 dark:text-gray-500', - 'info' => 'bg-info-500/10 text-info-700 dark:text-info-500', - 'primary', null => 'bg-primary-500/10 text-primary-700 dark:text-primary-500', - 'secondary' => 'bg-secondary-500/10 text-secondary-700 dark:text-secondary-500', - 'success' => 'bg-success-500/10 text-success-700 dark:text-success-500', - 'warning' => 'bg-warning-500/10 text-warning-700 dark:text-warning-500', - default => $badgeColor, - }, - }, - ]) + {{ + $attributes + ->class([ + 'min-h-4 ms-auto inline-flex items-center justify-center whitespace-normal rounded-xl px-2 py-0.5 text-xs font-medium tracking-tight', + match ($active) { + true => 'bg-gray-900/10 text-white', + false => 'bg-custom-500/10 text-custom-700 dark:text-custom-500', + }, + ]) + ->style([ + \Filament\Support\get_color_css_variables($badgeColor, shades: [500, 700]) => ! $active, + ]) + }} > {{ $badge }} diff --git a/packages/panels/resources/views/components/layouts/base.blade.php b/packages/panels/resources/views/components/layouts/base.blade.php index f43e9898b0..081b6f56f8 100644 --- a/packages/panels/resources/views/components/layouts/base.blade.php +++ b/packages/panels/resources/views/components/layouts/base.blade.php @@ -59,12 +59,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 } diff --git a/packages/panels/src/Facades/Filament.php b/packages/panels/src/Facades/Filament.php index 50db8a48b2..1722b324d0 100644 --- a/packages/panels/src/Facades/Filament.php +++ b/packages/panels/src/Facades/Filament.php @@ -27,17 +27,8 @@ use Illuminate\Support\Facades\Facade; * @method static array 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 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 $parameters = []) * @method static string getLogoutUrl(array $parameters = []) * @method static string | null getMaxContentWidth() @@ -61,18 +50,15 @@ use Illuminate\Support\Facades\Facade; * @method static array getNavigation() * @method static array getNavigationGroups() * @method static array getNavigationItems() - * @method static array getPages() + * @method static array getPages() * @method static Panel getPanel(?string $id = null) * @method static array 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 $parameters = []) * @method static string | null getRequestPasswordResetUrl(array $parameters = []) * @method static string getResetPasswordUrl(string $token, CanResetPassword | Model | Authenticatable $user, array $parameters = []) - * @method static array 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 array getResources() * @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 getUserTenants(HasTenants | Model | Authenticatable $user) * @method static string | null getUrl(Model | null $tenant = null) * @method static string getVerifyEmailUrl(MustVerifyEmail | Model | Authenticatable $user, array $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 getWidgets() * @method static bool hasBreadcrumbs() * @method static bool hasCollapsibleNavigationGroups() diff --git a/packages/panels/src/FilamentManager.php b/packages/panels/src/FilamentManager.php index f8bc3877d0..3591af0e82 100644 --- a/packages/panels/src/FilamentManager.php +++ b/packages/panels/src/FilamentManager.php @@ -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 $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 $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 */ diff --git a/packages/panels/src/Navigation/MenuItem.php b/packages/panels/src/Navigation/MenuItem.php index e0ddf4f308..6902d39fdd 100644 --- a/packages/panels/src/Navigation/MenuItem.php +++ b/packages/panels/src/Navigation/MenuItem.php @@ -6,7 +6,10 @@ use Closure; class MenuItem { - protected ?string $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} | null + */ + protected string | array | null $color = null; protected ?string $icon = null; @@ -25,7 +28,10 @@ class MenuItem return app(static::class); } - public function color(?string $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} | null $color + */ + public function color(string | array | null $color): static { $this->color = $color; @@ -60,7 +66,10 @@ class MenuItem 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->color; } diff --git a/packages/panels/src/Navigation/NavigationItem.php b/packages/panels/src/Navigation/NavigationItem.php index faf46d162c..b01fc65939 100644 --- a/packages/panels/src/Navigation/NavigationItem.php +++ b/packages/panels/src/Navigation/NavigationItem.php @@ -14,13 +14,19 @@ class NavigationItem protected ?string $activeIcon = null; - protected ?string $iconColor = 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} | null + */ + protected string | array | null $iconColor = null; protected string $label; protected ?string $badge = null; - protected ?string $badgeColor = 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} | null + */ + protected string | array | null $badgeColor = null; protected bool $shouldOpenUrlInNewTab = false; @@ -44,7 +50,10 @@ class NavigationItem return app(static::class, ['label' => $label]); } - public function badge(?string $badge, ?string $color = null): 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} | null $color + */ + public function badge(?string $badge, string | array | null $color = null): static { $this->badge = $badge; $this->badgeColor = $color; @@ -87,9 +96,12 @@ class NavigationItem return $this; } - public function iconColor(?string $iconColor): 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} | null $color + */ + public function iconColor(string | array | null $color): static { - $this->iconColor = $iconColor; + $this->iconColor = $color; return $this; } @@ -135,7 +147,10 @@ class NavigationItem return $this->badge; } - public function getBadgeColor(): ?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 getBadgeColor(): string | array | null { return $this->badgeColor; } @@ -169,7 +184,10 @@ class NavigationItem return $this->activeIcon; } - public function getIconColor(): ?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 getIconColor(): string | array | null { return $this->iconColor; } diff --git a/packages/panels/src/Pages/Page.php b/packages/panels/src/Pages/Page.php index 696f818b1d..9a14360f05 100644 --- a/packages/panels/src/Pages/Page.php +++ b/packages/panels/src/Pages/Page.php @@ -116,7 +116,10 @@ abstract class Page extends BasePage return null; } - public static function getNavigationBadgeColor(): ?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 static function getNavigationBadgeColor(): string | array | null { return null; } diff --git a/packages/panels/src/Panel.php b/packages/panels/src/Panel.php index 80c84962d5..0fc9714f0e 100644 --- a/packages/panels/src/Panel.php +++ b/packages/panels/src/Panel.php @@ -4,6 +4,7 @@ namespace Filament; use Closure; use Filament\Support\Components\Component; +use Filament\Support\Facades\FilamentColor; use Filament\Support\Facades\FilamentIcon; class Panel extends Component @@ -46,6 +47,8 @@ class Panel extends Component public function boot(): void { + FilamentColor::register($this->colors); + FilamentIcon::register($this->icons); $this->registerLivewireComponents(); diff --git a/packages/panels/src/Panel/Concerns/HasColors.php b/packages/panels/src/Panel/Concerns/HasColors.php index c16ced2e13..456dcdf7b5 100644 --- a/packages/panels/src/Panel/Concerns/HasColors.php +++ b/packages/panels/src/Panel/Concerns/HasColors.php @@ -2,209 +2,22 @@ namespace Filament\Panel\Concerns; -use Filament\Support\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 */ - 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 $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 $name => $color) { + $this->colors[$name] = $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(), - ]; - } } diff --git a/packages/panels/src/Resources/Pages/ListRecords/Tab.php b/packages/panels/src/Resources/Pages/ListRecords/Tab.php index 8ba5ad5264..72b2e98748 100644 --- a/packages/panels/src/Resources/Pages/ListRecords/Tab.php +++ b/packages/panels/src/Resources/Pages/ListRecords/Tab.php @@ -4,18 +4,15 @@ namespace Filament\Resources\Pages\ListRecords; use Closure; use Filament\Support\Components\Component; +use Filament\Support\Concerns\HasIcon; use Illuminate\Database\Eloquent\Builder; class Tab extends Component { + use HasIcon; + protected string | Closure | null $label = null; - protected string | Closure | null $icon = null; - - protected string | Closure | null $iconPosition = null; - - protected string | Closure | null $iconColor = null; - protected string | Closure | null $badge = null; protected ?Closure $modifyQueryUsing = null; @@ -40,27 +37,6 @@ class Tab extends Component return $this; } - public function icon(string | Closure | null $icon): static - { - $this->icon = $icon; - - return $this; - } - - public function iconPosition(string | Closure | null $position): static - { - $this->iconPosition = $position; - - return $this; - } - - public function iconColor(string | Closure | null $color): static - { - $this->iconColor = $color; - - return $this; - } - public function label(string | Closure | null $label): static { $this->label = $label; @@ -92,21 +68,6 @@ class Tab extends Component return $this->evaluate($this->badge); } - public function getIcon(): ?string - { - return $this->evaluate($this->icon); - } - - public function getIconPosition(): ?string - { - return $this->evaluate($this->iconPosition) ?? 'before'; - } - - public function getIconColor(): ?string - { - return $this->evaluate($this->iconColor); - } - public function modifyQuery(Builder $query): Builder { return $this->evaluate($this->modifyQueryUsing, [ diff --git a/packages/panels/src/Resources/RelationManagers/RelationGroup.php b/packages/panels/src/Resources/RelationManagers/RelationGroup.php index 42e5c82687..2c3d8a7572 100644 --- a/packages/panels/src/Resources/RelationManagers/RelationGroup.php +++ b/packages/panels/src/Resources/RelationManagers/RelationGroup.php @@ -4,15 +4,12 @@ namespace Filament\Resources\RelationManagers; use Closure; use Filament\Support\Components\Component; +use Filament\Support\Concerns\HasIcon; use Illuminate\Database\Eloquent\Model; class RelationGroup extends Component { - protected string | Closure | null $icon = null; - - protected string | Closure | null $iconPosition = null; - - protected string | Closure | null $iconColor = null; + use HasIcon; protected string | Closure | null $badge = null; @@ -61,27 +58,6 @@ class RelationGroup extends Component return $this; } - public function icon(string | Closure | null $icon): static - { - $this->icon = $icon; - - return $this; - } - - public function iconPosition(string | Closure | null $position): static - { - $this->iconPosition = $position; - - return $this; - } - - public function iconColor(string | Closure | null $color): static - { - $this->iconColor = $color; - - return $this; - } - public function getLabel(): string { return $this->evaluate($this->label); @@ -110,21 +86,6 @@ class RelationGroup extends Component return $this->evaluate($this->badge); } - public function getIcon(): ?string - { - return $this->evaluate($this->icon); - } - - public function getIconPosition(): ?string - { - return $this->evaluate($this->iconPosition) ?? 'before'; - } - - public function getIconColor(): ?string - { - return $this->evaluate($this->iconColor); - } - public function getOwnerRecord(): ?Model { return $this->ownerRecord; diff --git a/packages/panels/src/Resources/RelationManagers/RelationManager.php b/packages/panels/src/Resources/RelationManagers/RelationManager.php index b5b1c50811..cbd8237f7c 100644 --- a/packages/panels/src/Resources/RelationManagers/RelationManager.php +++ b/packages/panels/src/Resources/RelationManagers/RelationManager.php @@ -39,7 +39,10 @@ class RelationManager extends Component implements Forms\Contracts\HasForms, Tab protected static ?string $icon = null; - protected static ?string $iconColor = 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} | null + */ + protected static string | array | null $iconColor = null; protected static ?string $iconPosition = 'before'; @@ -327,7 +330,10 @@ class RelationManager extends Component implements Forms\Contracts\HasForms, Tab return static::$icon; } - public static function getIconColor(Model $ownerRecord, string $pageClass): ?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 static function getIconColor(Model $ownerRecord, string $pageClass): string | array | null { return static::$iconColor; } diff --git a/packages/panels/src/Resources/Resource.php b/packages/panels/src/Resources/Resource.php index d6c8f18e73..c3dbe67027 100644 --- a/packages/panels/src/Resources/Resource.php +++ b/packages/panels/src/Resources/Resource.php @@ -633,7 +633,10 @@ abstract class Resource return null; } - public static function getNavigationBadgeColor(): ?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 static function getNavigationBadgeColor(): string | array | null { return null; } diff --git a/packages/panels/stubs/PanelProvider.stub b/packages/panels/stubs/PanelProvider.stub index b036f85bdc..f847cc8544 100644 --- a/packages/panels/stubs/PanelProvider.stub +++ b/packages/panels/stubs/PanelProvider.stub @@ -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([ diff --git a/packages/panels/tailwind.config.preset.js b/packages/panels/tailwind.config.preset.js index 660530846d..a3e9737a1e 100644 --- a/packages/panels/tailwind.config.preset.js +++ b/packages/panels/tailwind.config.preset.js @@ -8,96 +8,109 @@ export default { theme: { extend: { colors: { + custom: { + 50: 'rgba(var(--c-50), )', + 100: 'rgba(var(--c-100), )', + 200: 'rgba(var(--c-200), )', + 300: 'rgba(var(--c-300), )', + 400: 'rgba(var(--c-400), )', + 500: 'rgba(var(--c-500), )', + 600: 'rgba(var(--c-600), )', + 700: 'rgba(var(--c-700), )', + 800: 'rgba(var(--c-800), )', + 900: 'rgba(var(--c-900), )', + 950: 'rgba(var(--c-950), )', + }, danger: { - 50: 'rgba(var(--danger-color-50), )', - 100: 'rgba(var(--danger-color-100), )', - 200: 'rgba(var(--danger-color-200), )', - 300: 'rgba(var(--danger-color-300), )', - 400: 'rgba(var(--danger-color-400), )', - 500: 'rgba(var(--danger-color-500), )', - 600: 'rgba(var(--danger-color-600), )', - 700: 'rgba(var(--danger-color-700), )', - 800: 'rgba(var(--danger-color-800), )', - 900: 'rgba(var(--danger-color-900), )', - 950: 'rgba(var(--danger-color-950), )', + 50: 'rgba(var(--danger-50), )', + 100: 'rgba(var(--danger-100), )', + 200: 'rgba(var(--danger-200), )', + 300: 'rgba(var(--danger-300), )', + 400: 'rgba(var(--danger-400), )', + 500: 'rgba(var(--danger-500), )', + 600: 'rgba(var(--danger-600), )', + 700: 'rgba(var(--danger-700), )', + 800: 'rgba(var(--danger-800), )', + 900: 'rgba(var(--danger-900), )', + 950: 'rgba(var(--danger-950), )', }, gray: { - 50: 'rgba(var(--gray-color-50), )', - 100: 'rgba(var(--gray-color-100), )', - 200: 'rgba(var(--gray-color-200), )', - 300: 'rgba(var(--gray-color-300), )', - 400: 'rgba(var(--gray-color-400), )', - 500: 'rgba(var(--gray-color-500), )', - 600: 'rgba(var(--gray-color-600), )', - 700: 'rgba(var(--gray-color-700), )', - 800: 'rgba(var(--gray-color-800), )', - 900: 'rgba(var(--gray-color-900), )', - 950: 'rgba(var(--gray-color-950), )', + 50: 'rgba(var(--gray-50), )', + 100: 'rgba(var(--gray-100), )', + 200: 'rgba(var(--gray-200), )', + 300: 'rgba(var(--gray-300), )', + 400: 'rgba(var(--gray-400), )', + 500: 'rgba(var(--gray-500), )', + 600: 'rgba(var(--gray-600), )', + 700: 'rgba(var(--gray-700), )', + 800: 'rgba(var(--gray-800), )', + 900: 'rgba(var(--gray-900), )', + 950: 'rgba(var(--gray-950), )', }, info: { - 50: 'rgba(var(--info-color-50), )', - 100: 'rgba(var(--info-color-100), )', - 200: 'rgba(var(--info-color-200), )', - 300: 'rgba(var(--info-color-300), )', - 400: 'rgba(var(--info-color-400), )', - 500: 'rgba(var(--info-color-500), )', - 600: 'rgba(var(--info-color-600), )', - 700: 'rgba(var(--info-color-700), )', - 800: 'rgba(var(--info-color-800), )', - 900: 'rgba(var(--info-color-900), )', - 950: 'rgba(var(--info-color-950), )', + 50: 'rgba(var(--info-50), )', + 100: 'rgba(var(--info-100), )', + 200: 'rgba(var(--info-200), )', + 300: 'rgba(var(--info-300), )', + 400: 'rgba(var(--info-400), )', + 500: 'rgba(var(--info-500), )', + 600: 'rgba(var(--info-600), )', + 700: 'rgba(var(--info-700), )', + 800: 'rgba(var(--info-800), )', + 900: 'rgba(var(--info-900), )', + 950: 'rgba(var(--info-950), )', }, primary: { - 50: 'rgba(var(--primary-color-50), )', - 100: 'rgba(var(--primary-color-100), )', - 200: 'rgba(var(--primary-color-200), )', - 300: 'rgba(var(--primary-color-300), )', - 400: 'rgba(var(--primary-color-400), )', - 500: 'rgba(var(--primary-color-500), )', - 600: 'rgba(var(--primary-color-600), )', - 700: 'rgba(var(--primary-color-700), )', - 800: 'rgba(var(--primary-color-800), )', - 900: 'rgba(var(--primary-color-900), )', - 950: 'rgba(var(--primary-color-950), )', + 50: 'rgba(var(--primary-50), )', + 100: 'rgba(var(--primary-100), )', + 200: 'rgba(var(--primary-200), )', + 300: 'rgba(var(--primary-300), )', + 400: 'rgba(var(--primary-400), )', + 500: 'rgba(var(--primary-500), )', + 600: 'rgba(var(--primary-600), )', + 700: 'rgba(var(--primary-700), )', + 800: 'rgba(var(--primary-800), )', + 900: 'rgba(var(--primary-900), )', + 950: 'rgba(var(--primary-950), )', }, secondary: { - 50: 'rgba(var(--secondary-color-50), )', - 100: 'rgba(var(--secondary-color-100), )', - 200: 'rgba(var(--secondary-color-200), )', - 300: 'rgba(var(--secondary-color-300), )', - 400: 'rgba(var(--secondary-color-400), )', - 500: 'rgba(var(--secondary-color-500), )', - 600: 'rgba(var(--secondary-color-600), )', - 700: 'rgba(var(--secondary-color-700), )', - 800: 'rgba(var(--secondary-color-800), )', - 900: 'rgba(var(--secondary-color-900), )', - 950: 'rgba(var(--secondary-color-950), )', + 50: 'rgba(var(--secondary-50), )', + 100: 'rgba(var(--secondary-100), )', + 200: 'rgba(var(--secondary-200), )', + 300: 'rgba(var(--secondary-300), )', + 400: 'rgba(var(--secondary-400), )', + 500: 'rgba(var(--secondary-500), )', + 600: 'rgba(var(--secondary-600), )', + 700: 'rgba(var(--secondary-700), )', + 800: 'rgba(var(--secondary-800), )', + 900: 'rgba(var(--secondary-900), )', + 950: 'rgba(var(--secondary-950), )', }, success: { - 50: 'rgba(var(--success-color-50), )', - 100: 'rgba(var(--success-color-100), )', - 200: 'rgba(var(--success-color-200), )', - 300: 'rgba(var(--success-color-300), )', - 400: 'rgba(var(--success-color-400), )', - 500: 'rgba(var(--success-color-500), )', - 600: 'rgba(var(--success-color-600), )', - 700: 'rgba(var(--success-color-700), )', - 800: 'rgba(var(--success-color-800), )', - 900: 'rgba(var(--success-color-900), )', - 950: 'rgba(var(--success-color-950), )', + 50: 'rgba(var(--success-50), )', + 100: 'rgba(var(--success-100), )', + 200: 'rgba(var(--success-200), )', + 300: 'rgba(var(--success-300), )', + 400: 'rgba(var(--success-400), )', + 500: 'rgba(var(--success-500), )', + 600: 'rgba(var(--success-600), )', + 700: 'rgba(var(--success-700), )', + 800: 'rgba(var(--success-800), )', + 900: 'rgba(var(--success-900), )', + 950: 'rgba(var(--success-950), )', }, warning: { - 50: 'rgba(var(--warning-color-50), )', - 100: 'rgba(var(--warning-color-100), )', - 200: 'rgba(var(--warning-color-200), )', - 300: 'rgba(var(--warning-color-300), )', - 400: 'rgba(var(--warning-color-400), )', - 500: 'rgba(var(--warning-color-500), )', - 600: 'rgba(var(--warning-color-600), )', - 700: 'rgba(var(--warning-color-700), )', - 800: 'rgba(var(--warning-color-800), )', - 900: 'rgba(var(--warning-color-900), )', - 950: 'rgba(var(--warning-color-950), )', + 50: 'rgba(var(--warning-50), )', + 100: 'rgba(var(--warning-100), )', + 200: 'rgba(var(--warning-200), )', + 300: 'rgba(var(--warning-300), )', + 400: 'rgba(var(--warning-400), )', + 500: 'rgba(var(--warning-500), )', + 600: 'rgba(var(--warning-600), )', + 700: 'rgba(var(--warning-700), )', + 800: 'rgba(var(--warning-800), )', + 900: 'rgba(var(--warning-900), )', + 950: 'rgba(var(--warning-950), )', }, }, fontFamily: { diff --git a/packages/support/resources/views/assets.blade.php b/packages/support/resources/views/assets.blade.php index a9fa6d9ee6..160738b4a9 100644 --- a/packages/support/resources/views/assets.blade.php +++ b/packages/support/resources/views/assets.blade.php @@ -7,3 +7,9 @@ @foreach ($assets as $asset) {{ $asset->getHtml() }} @endforeach + + diff --git a/packages/support/resources/views/components/button.blade.php b/packages/support/resources/views/components/button.blade.php index 10a6100bc6..07c7bae20a 100644 --- a/packages/support/resources/views/components/button.blade.php +++ b/packages/support/resources/views/components/button.blade.php @@ -18,9 +18,10 @@ ]) @php - $buttonClasses = [ + $buttonClasses = \Illuminate\Support\Arr::toCssClasses([ ...[ 'filament-button relative grid-flow-col items-center justify-center rounded-lg border font-medium outline-none transition-colors focus:ring-2 disabled:pointer-events-none disabled:opacity-70', + is_string($color) ? "filament-button-color-{$color}" : null, match ($size) { 'xs' => 'filament-button-size-xs gap-1.5 px-[calc(theme(spacing.3)-1px)] py-[calc(theme(spacing.2)-1px)] text-xs', 'sm' => 'filament-button-size-sm gap-1.5 px-[calc(theme(spacing.[3.5])-1px)] py-[calc(theme(spacing.2)-1px)] text-sm', @@ -43,31 +44,26 @@ ? [ 'filament-button-outlined', match ($color) { - 'danger' => 'filament-button-color-danger border-danger-600 text-danger-600 hover:bg-danger-500/10 focus:bg-danger-500/10 focus:ring-danger-500/50 dark:border-danger-400 dark:text-danger-400', - 'gray' => 'filament-button-color-gray border-gray-300 text-gray-700 hover:bg-gray-500/10 focus:bg-gray-500/10 focus:ring-primary-500/50 dark:border-gray-600 dark:text-gray-200', - 'info' => 'filament-button-color-info border-info-600 text-info-600 hover:bg-info-500/10 focus:bg-info-500/10 focus:ring-info-500/50 dark:border-info-400 dark:text-info-400', - 'primary' => 'filament-button-color-primary border-primary-600 text-primary-600 hover:bg-primary-500/10 focus:bg-primary-500/10 focus:ring-primary-500/50 dark:border-primary-400 dark:text-primary-400', - 'secondary' => 'filament-button-color-secondary border-secondary-600 text-secondary-600 hover:bg-secondary-500/10 focus:bg-secondary-500/10 focus:ring-secondary-500/50 dark:border-secondary-400 dark:text-secondary-400', - 'success' => 'filament-button-color-success border-success-600 text-success-600 hover:bg-success-500/10 focus:bg-success-500/10 focus:ring-success-500/50 dark:border-success-400 dark:text-success-400', - 'warning' => 'filament-button-color-warning border-warning-600 text-warning-600 hover:bg-warning-500/10 focus:bg-warning-500/10 focus:ring-warning-500/50 dark:border-warning-400 dark:text-warning-400', - default => $color, + 'gray' => 'border-gray-300 text-gray-700 hover:bg-gray-500/10 focus:bg-gray-500/10 focus:ring-primary-500/50 dark:border-gray-600 dark:text-gray-200', + default => 'border-custom-600 text-custom-600 hover:bg-custom-500/10 focus:bg-custom-500/10 focus:ring-custom-500/50 dark:border-custom-400 dark:text-custom-400', }, ] : [ 'shadow', match ($color) { - 'danger' => 'filament-button-color-danger border-transparent bg-danger-600 text-white hover:bg-danger-500 focus:bg-danger-500 focus:ring-danger-500/50', - 'gray' => 'filament-button-color-gray border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:border-transparent focus:bg-gray-50 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:bg-gray-700', - 'info' => 'filament-button-color-info border-transparent bg-info-600 text-white hover:bg-info-500 focus:bg-info-500 focus:ring-info-500/50', - 'primary' => 'filament-button-color-primary border-transparent bg-primary-600 text-white hover:bg-primary-500 focus:bg-primary-500 focus:ring-primary-500/50', - 'secondary' => 'filament-button-color-secondary border-transparent bg-secondary-600 text-white hover:bg-secondary-500 focus:bg-secondary-500 focus:ring-secondary-500/50', - 'success' => 'filament-button-color-success border-transparent bg-success-600 text-white hover:bg-success-500 focus:bg-success-500 focus:ring-success-500/50', - 'warning' => 'filament-button-color-warning border-transparent bg-warning-600 text-white hover:bg-warning-500 focus:bg-warning-500 focus:ring-warning-500/50', - default => $color, + 'gray' => 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:border-transparent focus:bg-gray-50 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:bg-gray-700', + default => 'border-transparent bg-custom-600 text-white hover:bg-custom-500 focus:bg-custom-500 focus:ring-custom-500/50', }, ] ), - ]; + ]); + + $buttonStyles = \Illuminate\Support\Arr::toCssStyles([ + \Filament\Support\get_color_css_variables( + $color, + shades: $outlined ? [400, 500, 600] : [500, 600], + ) => $color !== 'gray', + ]); $iconSize ??= match ($size) { 'xs', 'sm' => 'sm', @@ -105,19 +101,9 @@ } => ! $labelSrOnly, ]); - $indicatorClasses = \Illuminate\Support\Arr::toCssClasses([ - 'filament-button-indicator absolute -top-1 -end-1 inline-flex items-center justify-center h-4 w-4 rounded-full text-[0.5rem] font-medium text-white', - match ($indicatorColor) { - 'danger' => 'bg-danger-600', - 'gray' => 'bg-gray-600', - 'info' => 'bg-info-600', - 'primary' => 'bg-primary-600', - 'secondary' => 'bg-secondary-600', - 'success' => 'bg-success-600', - 'warning' => 'bg-warning-600', - default => $indicatorColor, - }, - ]); + $indicatorClasses = 'filament-button-indicator absolute -end-1 -top-1 inline-flex h-4 w-4 items-center justify-center rounded-full bg-custom-600 text-[0.5rem] font-medium text-white'; + + $indicatorStyles = \Filament\Support\get_color_css_variables($indicatorColor, shades: [600]); $labelClasses = \Illuminate\Support\Arr::toCssClasses([ 'filament-button-label truncate', @@ -199,7 +185,8 @@ 'wire:target' => ($hasLoadingIndicator && $loadingIndicatorTarget) ? $loadingIndicatorTarget : null, 'x-bind:disabled' => $hasFileUploadLoadingIndicator ? 'isUploadingFile' : false, ], escape: false) - ->class($buttonClasses) + ->class([$buttonClasses]) + ->style([$buttonStyles]) }} > @if ($iconPosition === 'before') @@ -276,7 +263,10 @@ @endif @if ($indicator) - + {{ $indicator }} @endif @@ -292,7 +282,11 @@ @if ($tooltip) x-tooltip.raw="{{ $tooltip }}" @endif - {{ $attributes->class($buttonClasses) }} + {{ + $attributes + ->class([$buttonClasses]) + ->style([$buttonStyles]) + }} > @if ($icon && $iconPosition === 'before') + {{ $indicator }} @endif diff --git a/packages/support/resources/views/components/dropdown/header.blade.php b/packages/support/resources/views/components/dropdown/header.blade.php index 9510b2d284..7438c9ed1d 100644 --- a/packages/support/resources/views/components/dropdown/header.blade.php +++ b/packages/support/resources/views/components/dropdown/header.blade.php @@ -1,24 +1,23 @@ @props([ - 'color' => 'primary', + 'color' => 'gray', 'icon' => null, 'tag' => 'div', ]) <{{ $tag }} {{ - $attributes->class([ - 'filament-dropdown-header flex w-full gap-2 p-3 text-sm', - match ($color) { - 'danger' => 'filament-dropdown-header-color-danger text-danger-600 dark:text-danger-400', - 'gray' => 'filament-dropdown-header-color-gray text-gray-700 dark:text-gray-200', - 'info' => 'filament-dropdown-header-color-info text-info-600 dark:text-info-400', - 'primary' => 'filament-dropdown-header-color-primary text-primary-600 dark:text-primary-400', - 'secondary' => 'filament-dropdown-header-color-secondary text-secondary-600 dark:text-secondary-400', - 'success' => 'filament-dropdown-header-color-success text-success-600 dark:text-success-400', - 'warning' => 'filament-dropdown-header-color-warning text-warning-600 dark:text-warning-400', - default => $color, - }, - ]) + $attributes + ->class([ + 'filament-dropdown-header flex w-full gap-2 p-3 text-sm', + is_string($color) ? "filament-dropdown-header-color-{$color}" : null, + match ($color) { + 'gray' => 'text-gray-700 dark:text-gray-200', + default => 'text-custom-600 dark:text-custom-400', + }, + ]) + ->style([ + \Filament\Support\get_color_css_variables($color, shades: [400, 600]) => $color !== 'gray', + ]) }} > @if ($icon) diff --git a/packages/support/resources/views/components/dropdown/list/item.blade.php b/packages/support/resources/views/components/dropdown/list/item.blade.php index 6330fcbe68..2ab64d3ebe 100644 --- a/packages/support/resources/views/components/dropdown/list/item.blade.php +++ b/packages/support/resources/views/components/dropdown/list/item.blade.php @@ -1,5 +1,5 @@ @props([ - 'color' => 'primary', + 'color' => 'gray', 'detail' => null, 'disabled' => false, 'icon' => null, @@ -12,18 +12,17 @@ @php $buttonClasses = \Illuminate\Support\Arr::toCssClasses([ 'filament-dropdown-list-item flex w-full items-center gap-2 whitespace-nowrap rounded-md p-2 text-sm transition-colors outline-none disabled:pointer-events-none disabled:opacity-70', + is_string($color) ? "filament-dropdown-list-item-color-{$color}" : null, match ($color) { - 'danger' => 'filament-dropdown-list-item-color-danger text-danger-600 hover:bg-danger-500/10 focus:bg-danger-500/10 dark:text-danger-400', 'gray' => 'filament-dropdown-list-item-color-gray text-gray-700 hover:bg-gray-500/10 focus:bg-gray-500/10 dark:text-gray-200', - 'info' => 'filament-dropdown-list-item-color-info text-info-600 hover:bg-info-500/10 focus:bg-info-500/10 dark:text-info-400', - 'primary' => 'filament-dropdown-list-item-color-primary text-primary-600 hover:bg-primary-500/10 focus:bg-primary-500/10 dark:text-primary-400', - 'secondary' => 'filament-dropdown-list-item-color-secondary text-secondary-600 hover:bg-secondary-500/10 focus:bg-secondary-500/10 dark:text-secondary-400', - 'success' => 'filament-dropdown-list-item-color-success text-success-600 hover:bg-success-500/10 focus:bg-success-500/10 dark:text-success-400', - 'warning' => 'filament-dropdown-list-item-color-warning text-warning-600 hover:bg-warning-500/10 focus:bg-warning-500/10 dark:text-warning-400', - default => $color, + default => 'filament-dropdown-list-item-color-custom text-custom-600 hover:bg-custom-500/10 focus:bg-custom-500/10 dark:text-custom-400', }, ]); + $buttonStyles = \Illuminate\Support\Arr::toCssStyles([ + \Filament\Support\get_color_css_variables($color, shades: [400, 500, 600]) => $color !== 'gray', + ]); + $iconSize = match ($iconSize) { 'sm' => 'h-4 w-4', 'md' => 'h-5 w-5', @@ -63,6 +62,7 @@ 'wire:target' => ($hasLoadingIndicator && $loadingIndicatorTarget) ? $loadingIndicatorTarget : null, ], escape: false) ->class([$buttonClasses]) + ->style([$buttonStyles]) }} > @if ($icon) @@ -107,7 +107,11 @@ x-data="{}" x-mousetrap.global.{{ collect($keyBindings)->map(fn (string $keyBinding): string => str_replace('+', '-', $keyBinding))->implode('.') }} @endif - {{ $attributes->class([$buttonClasses]) }} + {{ + $attributes + ->class([$buttonClasses]) + ->style([$buttonStyles]) + }} > @if ($icon) except(['action', 'class', 'method', 'wire:submit']) ->class([$buttonClasses]) + ->style([$buttonStyles]) }} > @if ($icon) diff --git a/packages/support/resources/views/components/icon-button.blade.php b/packages/support/resources/views/components/icon-button.blade.php index 29e429302c..bf1bb2e4d2 100644 --- a/packages/support/resources/views/components/icon-button.blade.php +++ b/packages/support/resources/views/components/icon-button.blade.php @@ -19,29 +19,9 @@ @php $iconSize ??= $size; - $buttonClasses = [ - 'filament-icon-button relative flex items-center justify-center outline-none transition disabled:pointer-events-none disabled:opacity-70', - 'rounded-full hover:bg-gray-500/5 dark:hover:bg-gray-300/5' => ! $inline, - match ($color) { - 'danger' => 'text-danger-500', - 'gray' => 'text-gray-500', - 'info' => 'text-info-500', - 'primary' => 'text-primary-500', - 'secondary' => 'text-secondary-500 dark:text-gray-400', - 'success' => 'text-success-500', - 'warning' => 'text-warning-500', - default => $color, - }, - match ($color) { - 'danger' => 'focus:bg-danger-500/10', - 'gray' => 'focus:bg-gray-500/10', - 'info' => 'focus:bg-info-500/10', - 'primary' => 'focus:bg-primary-500/10', - 'secondary' => 'focus:bg-secondary-500/10', - 'success' => 'focus:bg-success-500/10', - 'warning' => 'focus:bg-warning-500/10', - default => $color, - } => ! $inline, + $buttonClasses = \Illuminate\Support\Arr::toCssClasses([ + 'filament-icon-button relative flex items-center justify-center text-custom-500 outline-none transition disabled:pointer-events-none disabled:opacity-70', + 'rounded-full hover:bg-gray-500/5 focus:bg-custom-500/10 dark:hover:bg-gray-300/5' => ! $inline, match ($size) { 'sm' => 'h-8 w-8', 'sm md:md' => 'h-8 w-8 md:h-10 md:w-10', @@ -49,7 +29,9 @@ 'lg' => 'h-12 w-12', default => $size, }, - ]; + ]); + + $buttonStyles = \Filament\Support\get_color_css_variables($color, shades: [500]); $iconSize = match ($iconSize) { 'sm' => 'h-4 w-4', @@ -61,19 +43,9 @@ $iconClasses = 'filament-icon-button-icon'; - $indicatorClasses = \Illuminate\Support\Arr::toCssClasses([ - 'filament-icon-button-indicator absolute -top-0.5 -end-0.5 inline-flex items-center justify-center h-4 w-4 rounded-full text-[0.5rem] font-medium text-white', - match ($indicatorColor) { - 'danger' => 'bg-danger-600', - 'gray' => 'bg-gray-600', - 'info' => 'bg-info-600', - 'primary' => 'bg-primary-600', - 'secondary' => 'bg-secondary-600', - 'success' => 'bg-success-600', - 'warning' => 'bg-warning-600', - default => $indicatorColor, - }, - ]); + $indicatorClasses = 'filament-icon-button-indicator absolute -end-0.5 -top-0.5 inline-flex h-4 w-4 items-center justify-center rounded-full bg-custom-600 text-[0.5rem] font-medium text-white'; + + $indicatorStyles = \Filament\Support\get_color_css_variables($indicatorColor, shades: [600]); $wireTarget = $attributes->whereStartsWith(['wire:target', 'wire:click'])->first(); @@ -102,7 +74,8 @@ 'title' => $label, 'type' => $type, ], escape: false) - ->class($buttonClasses) + ->class([$buttonClasses]) + ->style([$buttonStyles]) }} > @if ($label) @@ -130,7 +103,10 @@ @endif @if ($indicator) - + {{ $indicator }} @endif @@ -151,7 +127,8 @@ ->merge([ 'title' => $label, ], escape: false) - ->class($buttonClasses) + ->class([$buttonClasses]) + ->style([$buttonStyles]) }} > @if ($label) @@ -168,7 +145,10 @@ /> @if ($indicator) - + {{ $indicator }} @endif diff --git a/packages/support/resources/views/components/link.blade.php b/packages/support/resources/views/components/link.blade.php index bc6fdee468..659ee3178e 100644 --- a/packages/support/resources/views/components/link.blade.php +++ b/packages/support/resources/views/components/link.blade.php @@ -17,26 +17,24 @@ @php $iconSize ??= $size; - $linkClasses = [ + $linkClasses = \Illuminate\Support\Arr::toCssClasses([ 'filament-link relative inline-flex items-center justify-center gap-0.5 font-medium outline-none hover:underline focus:underline disabled:pointer-events-none disabled:opacity-70', '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', 'md' => 'text-sm', 'lg' => 'text-base', }, - ]; + ]); + + $linkStyles = \Illuminate\Support\Arr::toCssStyles([ + \Filament\Support\get_color_css_variables($color, shades: [400, 500, 600]) => $color !== 'gray', + ]); $iconSize = match ($iconSize) { 'sm' => 'h-4 w-4', @@ -51,19 +49,9 @@ 'ms-1' => $iconPosition === 'after', ]); - $indicatorClasses = \Illuminate\Support\Arr::toCssClasses([ - 'filament-link-indicator absolute -top-1 -end-1 inline-flex items-center justify-center h-4 w-4 rounded-full text-[0.5rem] font-medium text-white', - match ($indicatorColor) { - 'danger' => 'bg-danger-600', - 'gray' => 'bg-gray-600', - 'info' => 'bg-info-600', - 'primary' => 'bg-primary-600', - 'secondary' => 'bg-secondary-600', - 'success' => 'bg-success-600', - 'warning' => 'bg-warning-600', - default => $indicatorColor, - }, - ]); + $indicatorClasses = 'filament-link-indicator absolute -end-1 -top-1 inline-flex h-4 w-4 items-center justify-center rounded-full bg-custom-600 text-[0.5rem] font-medium text-white'; + + $indicatorStyles = \Filament\Support\get_color_css_variables($color, shades: [600]); $wireTarget = $attributes->whereStartsWith(['wire:target', 'wire:click'])->first(); @@ -85,7 +73,11 @@ @if ($tooltip) x-tooltip.raw="{{ $tooltip }}" @endif - {{ $attributes->class($linkClasses) }} + {{ + $attributes + ->class([$linkClasses]) + ->style([$linkStyles]) + }} > @if ($icon && $iconPosition === 'before') + {{ $indicator }} @endif @@ -130,7 +125,8 @@ 'disabled' => $disabled, 'type' => $type, ], escape: false) - ->class($linkClasses) + ->class([$linkClasses]) + ->style([$linkStyles]) }} > @if ($iconPosition === 'before') @@ -178,7 +174,10 @@ @endif @if ($indicator) - + {{ $indicator }} @endif diff --git a/packages/support/resources/views/components/section.blade.php b/packages/support/resources/views/components/section.blade.php index ebd956afce..6208427c03 100644 --- a/packages/support/resources/views/components/section.blade.php +++ b/packages/support/resources/views/components/section.blade.php @@ -7,7 +7,7 @@ 'description' => null, 'heading', 'icon' => null, - 'iconColor' => null, + 'iconColor' => 'gray', 'iconSize' => 'md', ]) @@ -66,16 +66,7 @@ @endif diff --git a/packages/support/resources/views/components/tabs/item.blade.php b/packages/support/resources/views/components/tabs/item.blade.php index 46b602d46e..d11a665f25 100644 --- a/packages/support/resources/views/components/tabs/item.blade.php +++ b/packages/support/resources/views/components/tabs/item.blade.php @@ -3,23 +3,20 @@ 'alpineActive' => null, 'badge' => null, 'icon' => null, - 'iconColor' => null, + 'iconColor' => 'gray', 'iconPosition' => 'before', 'tag' => 'button', 'type' => 'button', ]) @php - $iconColorClasses = $active ? null : match ($iconColor) { - 'danger' => 'text-danger-600 dark:text-danger-400', - 'gray' => 'text-gray-600 dark:text-gray-400', - 'info' => 'text-info-600 dark:text-info-400', - 'primary' => 'text-primary-600 dark:text-primary-400', - 'secondary' => 'text-secondary-600 dark:text-secondary-400', - 'success' => 'text-success-600 dark:text-success-400', - 'warning' => 'text-warning-600 dark:text-warning-400', - default => $iconColor, - }; + $iconColorClasses = \Illuminate\Support\Arr::toCssClasses([ + 'text-custom-600 dark:text-custom-400' => $active, + ]); + + $iconStyles = \Illuminate\Support\Arr::toCssStyles([ + \Filament\Support\get_color_css_variables($iconColor, shades: [400, 600]) => $iconColorClasses, + ]); @endphp <{{ $tag }} @@ -51,6 +48,7 @@ :color="$iconColorClasses" alias="support::tabs.item" size="h-5 w-5" + :style="$iconStyles" x-bind:class="{ '{{ $iconColorClasses }}': ! ({{ $alpineActive }}), }" @@ -67,6 +65,7 @@ :color="$iconColorClasses" alias="support::tabs.item" size="h-5 w-5" + :style="$iconStyles" x-bind:class="{ '{{ $iconColorClasses }}': ! ({{ $alpineActive }}), }" diff --git a/packages/support/src/Assets/AssetManager.php b/packages/support/src/Assets/AssetManager.php index 081ff550cb..94fbf5e933 100644 --- a/packages/support/src/Assets/AssetManager.php +++ b/packages/support/src/Assets/AssetManager.php @@ -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 $name => $shades) { + foreach ($shades as $shade => $color) { + $variables["{$name}-{$shade}"] = $color; + } + } + return view('filament::assets', [ 'assets' => $this->getStyles($packages), + 'cssVariables' => $variables, ])->render(); } diff --git a/packages/support/src/Color.php b/packages/support/src/Colors/Color.php similarity index 99% rename from packages/support/src/Color.php rename to packages/support/src/Colors/Color.php index 9288106ecc..570dc08071 100644 --- a/packages/support/src/Color.php +++ b/packages/support/src/Colors/Color.php @@ -1,6 +1,6 @@ + */ + protected array $colors = []; + + /** + * @param array $colors + */ + public function register(array $colors): static + { + foreach ($colors as $name => $color) { + $this->colors[$name] = $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 + */ + 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, + ]; + } +} diff --git a/packages/support/src/Concerns/HasColor.php b/packages/support/src/Concerns/HasColor.php new file mode 100644 index 0000000000..884a080122 --- /dev/null +++ b/packages/support/src/Concerns/HasColor.php @@ -0,0 +1,31 @@ +color = $color; + + return $this; + } + + /** + * @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); + } +} diff --git a/packages/support/src/Concerns/HasIcon.php b/packages/support/src/Concerns/HasIcon.php index c7ccaaef87..c5a570dc7b 100644 --- a/packages/support/src/Concerns/HasIcon.php +++ b/packages/support/src/Concerns/HasIcon.php @@ -8,7 +8,12 @@ trait HasIcon { protected string | Closure | null $icon = null; - protected string | Closure | null $iconColor = 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 $iconColor = null; + + protected string | Closure | null $iconPosition = null; protected string | Closure | null $iconSize = null; @@ -19,13 +24,23 @@ trait HasIcon return $this; } - public function iconColor(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 iconColor(string | array | Closure | null $color): static { $this->iconColor = $color; return $this; } + public function iconPosition(string | Closure | null $position): static + { + $this->iconPosition = $position; + + return $this; + } + public function iconSize(string | Closure | null $size): static { $this->iconSize = $size; @@ -38,11 +53,19 @@ trait HasIcon return $this->evaluate($this->icon); } - public function getIconColor(): ?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 getIconColor(): string | array | null { return $this->evaluate($this->iconColor); } + public function getIconPosition(): ?string + { + return $this->evaluate($this->iconPosition) ?? 'before'; + } + public function getIconSize(): ?string { return $this->evaluate($this->iconSize); diff --git a/packages/support/src/Contracts/HasColor.php b/packages/support/src/Contracts/HasColor.php index 8d0ab8a4e2..a904de10f9 100644 --- a/packages/support/src/Contracts/HasColor.php +++ b/packages/support/src/Contracts/HasColor.php @@ -4,5 +4,8 @@ namespace Filament\Support\Contracts; interface HasColor { - 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; } diff --git a/packages/support/src/Facades/FilamentColor.php b/packages/support/src/Facades/FilamentColor.php new file mode 100644 index 0000000000..dd1ef45ffc --- /dev/null +++ b/packages/support/src/Facades/FilamentColor.php @@ -0,0 +1,20 @@ + getColors() + * + * @see ColorManager + */ +class FilamentColor extends Facade +{ + protected static function getFacadeAccessor(): string + { + return ColorManager::class; + } +} diff --git a/packages/support/src/SupportServiceProvider.php b/packages/support/src/SupportServiceProvider.php index 8c50a1fc18..b0d9997fbc 100644 --- a/packages/support/src/SupportServiceProvider.php +++ b/packages/support/src/SupportServiceProvider.php @@ -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; @@ -41,23 +42,22 @@ class SupportServiceProvider extends PackageServiceProvider { $this->app->scoped( AssetManager::class, - function () { - return new AssetManager(); - }, + fn () => new AssetManager(), + ); + + $this->app->scoped( + ColorManager::class, + fn () => new ColorManager(), ); $this->app->scoped( IconManager::class, - function () { - return new IconManager(); - }, + fn () => new IconManager(), ); $this->app->scoped( SanitizerInterface::class, - function () { - return Sanitizer::create(require __DIR__ . '/../config/html-sanitizer.php'); - }, + fn () => Sanitizer::create(require __DIR__ . '/../config/html-sanitizer.php'), ); } diff --git a/packages/support/src/helpers.php b/packages/support/src/helpers.php index 61046f7481..2976c514f1 100644 --- a/packages/support/src/helpers.php +++ b/packages/support/src/helpers.php @@ -45,6 +45,31 @@ 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 $shades + */ + function get_color_css_variables(string | array $color, array $shades): string + { + $variables = []; + + if (is_string($color)) { + foreach ($shades as $shade) { + $variables[] = "--c-{$shade}:var(--{$color}-{$shade})"; + } + } + + if (is_array($color)) { + foreach ($shades as $shade) { + $variables[] = "--c-{$shade}:{$color[$shade]}"; + } + } + + return implode(';', $variables); + } +} + if (! function_exists('Filament\Support\prepare_inherited_attributes')) { function prepare_inherited_attributes(ComponentAttributeBag $attributes): ComponentAttributeBag { diff --git a/packages/support/stubs/AdminPanelProvider.stub b/packages/support/stubs/AdminPanelProvider.stub index 1949e21866..058efbb33e 100644 --- a/packages/support/stubs/AdminPanelProvider.stub +++ b/packages/support/stubs/AdminPanelProvider.stub @@ -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([ diff --git a/packages/tables/.stubs.php b/packages/tables/.stubs.php index 8a235807e4..d19f1253ca 100644 --- a/packages/tables/.stubs.php +++ b/packages/tables/.stubs.php @@ -73,9 +73,9 @@ namespace Livewire\Features\SupportUnitTesting\Tests { public function assertTableActionDoesNotHaveLabel(string $name, string $label): static {} - public function assertTableActionHasColor(string $name, string $color): static {} + public function assertTableActionHasColor(string $name, string | array $color): static {} - public function assertTableActionDoesNotHaveColor(string $name, string $color): static {} + public function assertTableActionDoesNotHaveColor(string $name, string | array $color): static {} public function assertTableBulkActionHasIcon(string $name, string $icon): static {} @@ -85,9 +85,9 @@ namespace Livewire\Features\SupportUnitTesting\Tests { public function assertTableBulkActionDoesNotHaveLabel(string $name, string $label): static {} - public function assertTableBulkActionHasColor(string $name, string $color): static {} + public function assertTableBulkActionHasColor(string $name, string | array $color): static {} - public function assertTableBulkActionDoesNotHaveColor(string $name, string $color): static {} + public function assertTableBulkActionDoesNotHaveColor(string $name, string | array $color): static {} public function assertTableActionHasUrl(string $name, string $url): static {} diff --git a/packages/tables/resources/views/columns/icon-column.blade.php b/packages/tables/resources/views/columns/icon-column.blade.php index 6365b0b667..0b0263657e 100644 --- a/packages/tables/resources/views/columns/icon-column.blade.php +++ b/packages/tables/resources/views/columns/icon-column.blade.php @@ -14,16 +14,7 @@ @endif @endforeach diff --git a/packages/tables/resources/views/columns/summaries/icon-count.blade.php b/packages/tables/resources/views/columns/summaries/icon-count.blade.php index c60ac18770..6328c5b7d6 100644 --- a/packages/tables/resources/views/columns/summaries/icon-count.blade.php +++ b/packages/tables/resources/views/columns/summaries/icon-count.blade.php @@ -20,17 +20,9 @@
@endif diff --git a/packages/tables/resources/views/columns/text-column.blade.php b/packages/tables/resources/views/columns/text-column.blade.php index 4ed44b71be..2e776369e0 100644 --- a/packages/tables/resources/views/columns/text-column.blade.php +++ b/packages/tables/resources/views/columns/text-column.blade.php @@ -57,6 +57,7 @@ @foreach ($arrayState as $state) @php $formattedState = $formatState($state); + $color = $getColor($state) ?? 'gray'; $icon = $getIcon($state); @endphp @@ -67,26 +68,15 @@ 'inline-flex items-center space-x-1 rtl:space-x-reverse', 'filament-tables-text-column-badge min-h-6 justify-center whitespace-nowrap rounded-xl px-2 py-0.5' => $isBadge, 'whitespace-normal' => $canWrap, - ($isBadge ? match ($color = $getColor($state)) { - 'danger' => 'filament-tables-text-column-badge-color-danger bg-danger-500/10 text-danger-700 dark:text-danger-500', - 'gray', null => 'filament-tables-text-column-badge-color-gray bg-gray-500/10 text-gray-700 dark:bg-gray-500/20 dark:text-gray-300', - 'info' => 'filament-tables-text-column-badge-color-info bg-info-500/10 text-info-700 dark:text-info-500', - 'primary' => 'filament-tables-text-column-badge-color-primary bg-primary-500/10 text-primary-700 dark:text-primary-500', - 'secondary' => 'filament-tables-text-column-badge-color-secondary bg-secondary-500/10 text-secondary-700 dark:text-secondary-500', - 'success' => 'filament-tables-text-column-badge-color-success bg-success-500/10 text-success-700 dark:text-success-500', - 'warning' => 'filament-tables-text-column-badge-color-warning bg-warning-500/10 text-warning-700 dark:text-warning-500', - default => $color, - } : null), - ((! ($isBadge || $isClickable)) ? match ($color = $getColor($state)) { - 'danger' => 'text-danger-600', - 'gray' => 'text-gray-600 dark:text-gray-400', - 'info' => 'text-info-600', - 'primary' => 'text-primary-600', - 'secondary' => 'text-secondary-600', - 'success' => 'text-success-600', - 'warning' => 'text-warning-600', - default => $color, - } : null), + "filament-tables-text-column-badge-color-{$color}" => $isBadge && is_string($color), + match ($color) { + 'gray' => 'bg-gray-500/10 text-gray-700 dark:bg-gray-500/20 dark:text-gray-300', + default => 'bg-custom-500/10 text-custom-700 dark:text-custom-500', + } => $isBadge, + match ($color) { + 'gray' => null, + default => 'text-custom-600 dark:text-custom-400', + } => ! ($isBadge || $isClickable), match ($size = ($isBadge ? 'xs' : $getSize($state))) { 'xs' => 'text-xs', 'sm', null => 'text-sm', @@ -112,6 +102,16 @@ default => null, }, ]) + @style([ + \Filament\Support\get_color_css_variables( + $color, + shades: match (true) { + $isBadge => [500, 700], + ! ($isBadge || $isClickable) => [400, 600], + default => [], + }, + ) => $color !== 'gray', + ]) > @if ($icon && $iconPosition === 'before') @php - $offColor = $getOffColor(); - $onColor = $getOnColor(); + $offColor = $getOffColor() ?? 'gray'; + $onColor = $getOnColor() ?? 'primary'; @endphp