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