diff --git a/packages/app/docs/02-resources/01-getting-started.md b/packages/app/docs/02-resources/01-getting-started.md
index 7551a38d77..bf8a024a82 100644
--- a/packages/app/docs/02-resources/01-getting-started.md
+++ b/packages/app/docs/02-resources/01-getting-started.md
@@ -484,7 +484,7 @@ public static function getNavigationLabel(): string
### Icons
-The `$navigationIcon` property supports the name of any Blade component. By default, the [Blade Heroicons](https://github.com/blade-ui-kit/blade-heroicons) package is installed, so you may use the name of any [Heroicon](https://heroicons.com) out of the box. However, you may create your own custom icon components or install an alternative library if you wish.
+The `$navigationIcon` property supports the name of any Blade component. By default, the [Blade Heroicons v1](https://github.com/blade-ui-kit/blade-heroicons/tree/1.3.1) package is installed, so you may use the name of any [Heroicons v1](https://v1.heroicons.com) out of the box. However, you may create your own custom icon components or install an alternative library if you wish.
```php
protected static ?string $navigationIcon = 'heroicon-o-user-group';
diff --git a/packages/app/docs/03-pages/02-actions.md b/packages/app/docs/03-pages/02-actions.md
index ec33d48de7..7f3c376b62 100644
--- a/packages/app/docs/03-pages/02-actions.md
+++ b/packages/app/docs/03-pages/02-actions.md
@@ -80,7 +80,7 @@ protected function getHeaderActions(): array
}
```
-Buttons may also have an `icon()`, which is the name of any Blade component. By default, the [Blade Heroicons](https://github.com/blade-ui-kit/blade-heroicons) package is installed, so you may use the name of any [Heroicon](https://heroicons.com) out of the box. However, you may create your own custom icon components or install an alternative library if you wish.
+Buttons may also have an `icon()`, which is the name of any Blade component. By default, the [Blade Heroicons v1](https://github.com/blade-ui-kit/blade-heroicons/tree/1.3.1) package is installed, so you may use the name of any [Heroicons v1](https://v1.heroicons.com) out of the box. However, you may create your own custom icon components or install an alternative library if you wish.
```php
use Filament\Actions\Action;
diff --git a/packages/app/docs/05-navigation.md b/packages/app/docs/05-navigation.md
index a0f80f7257..585fec431a 100644
--- a/packages/app/docs/05-navigation.md
+++ b/packages/app/docs/05-navigation.md
@@ -14,7 +14,7 @@ protected static ?string $navigationLabel = 'Custom Navigation Label';
protected static ?int $navigationSort = 3;
```
-The `$navigationIcon` supports the name of any Blade component, and passes a set of formatting classes to it. By default, the [Blade Heroicons](https://github.com/blade-ui-kit/blade-heroicons) package is installed, so you may use the name of any [Heroicon](https://heroicons.com) out of the box. However, you may create your own custom icon components or install an alternative library if you wish.
+The `$navigationIcon` supports the name of any Blade component, and passes a set of formatting classes to it. By default, the [Blade Heroicons v1](https://github.com/blade-ui-kit/blade-heroicons/tree/1.3.1) package is installed, so you may use the name of any [Heroicons v1](https://v1.heroicons.com) out of the box. However, you may create your own custom icon components or install an alternative library if you wish.
## Navigation item badges
diff --git a/packages/app/resources/css/index.css b/packages/app/resources/css/index.css
index 73fd176dd5..22b4b9c2ca 100644
--- a/packages/app/resources/css/index.css
+++ b/packages/app/resources/css/index.css
@@ -1,35 +1,35 @@
-@import '../../../forms/dist/index.css';
+@import 'theme.css';
-@import 'tippy.js/dist/tippy.css';
-@import 'tippy.js/themes/light.css';
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
- html {
- -webkit-tap-highlight-color: transparent;
+@layer components {
+ .filament-card-layout {
+ @apply relative bg-no-repeat;
+ background-image: radial-gradient(
+ circle at top,
+ theme('colors.primary.100'),
+ theme('colors.white') 50%
+ );
}
- :root {
- --sidebar-width: 20rem;
- --collapsed-sidebar-width: 5.4rem;
- --font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
- --chart-font-family: var(--font-family);
+ .dark .filament-card-layout {
+ background-image: radial-gradient(
+ circle at top,
+ theme('colors.primary.800'),
+ theme('colors.gray.800'),
+ theme('colors.gray.900') 100%
+ );
}
- body {
- font-family: var(--font-family);
+ .filament-card-layout .filament-card-layout-card::before {
+ @apply absolute inset-x-0 mx-auto h-px w-2/3 bg-gradient-to-r from-gray-200 via-primary-400 to-gray-200 dark:from-gray-700 dark:via-primary-400 dark:to-gray-700;
+ content: '';
+ z-index: 1;
+ top: -1px;
}
- :root.dark {
- color-scheme: dark;
- }
-
- [dir='rtl'] select {
- background-position: left 0.5rem center !important;
- padding-left: 2.5rem;
- padding-right: 0.75rem;
+ .filament-sidebar-header::before {
+ @apply pointer-events-none absolute inset-x-0 mx-auto h-px w-full bg-gradient-to-r from-black/5 via-primary-400 to-gray-200 dark:from-gray-700 dark:via-primary-400 dark:to-gray-700;
+ content: '';
+ z-index: 1;
+ bottom: -1px;
}
}
diff --git a/packages/app/resources/css/theme.css b/packages/app/resources/css/theme.css
new file mode 100644
index 0000000000..d11a140bc9
--- /dev/null
+++ b/packages/app/resources/css/theme.css
@@ -0,0 +1,29 @@
+@import '../../../forms/dist/index.css';
+
+@import 'tippy.js/dist/tippy.css';
+@import 'tippy.js/themes/light.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ html {
+ -webkit-tap-highlight-color: transparent;
+ }
+
+ :root {
+ --sidebar-width: 20rem;
+ --collapsed-sidebar-width: 5.4rem;
+ }
+
+ :root.dark {
+ color-scheme: dark;
+ }
+
+ [dir='rtl'] select {
+ background-position: left 0.5rem center !important;
+ padding-left: 2.5rem;
+ padding-right: 0.75rem;
+ }
+}
diff --git a/packages/app/resources/views/components/layouts/base.blade.php b/packages/app/resources/views/components/layouts/base.blade.php
index 04059a6cab..6890aa8655 100644
--- a/packages/app/resources/views/components/layouts/base.blade.php
+++ b/packages/app/resources/views/components/layouts/base.blade.php
@@ -42,6 +42,8 @@
@endif
+ {{ filament()->getTheme()->getHtml() }}
+
@filamentStyles