Filament Editorial Theme

#Filament Editorial Theme

Editorial Terminal — a paper + terminal theme for Filament 3, 4 and 5, the one behind jeffersongoncalves.dev.br.

Fraunces (display), DM Sans (UI) and JetBrains Mono (code), bundled — no Google Fonts request
Ink / paper / amber palette with dark (default) and light schemes driven by semantic tokens
Paper-grain overlay, amber scrollbars, sidebar layout fixes for Livewire morphing
Footer and sidebar-status partials, external links opened in a new tab
Optional terminal-style login with a typewriter intro

#Compatibility

Branch	Filament	Package version
1.x	3.x	`^1.1`
2.x	4.x	`^2.0`
3.x	5.x	`^3.0`

1.0.0 was a Filament 5 build published before the branches were split — on Filament 5 require ^3.0.

#Installation

composer require jeffersongoncalves/filament-editorial-theme:"^1.1"

The theme ships as CSS that your panel's Vite theme imports. If the panel has no custom theme yet, create one with php artisan make:filament-theme, then add the theme import right after Filament's in resources/css/filament/admin/theme.css:

@import '/vendor/filament/filament/resources/css/theme.css';
@import '/vendor/jeffersongoncalves/filament-editorial-theme/resources/css/theme.css';

@config 'tailwind.config.js';

/* Your overrides below */

Add the theme's partials to the content of resources/css/filament/admin/tailwind.config.js so Tailwind keeps their utilities:

content: [
    './app/Filament/**/*.php',
    './resources/views/filament/**/*.blade.php',
    './vendor/filament/**/*.blade.php',
    './vendor/jeffersongoncalves/filament-editorial-theme/resources/views/**/*.blade.php',
],

Make sure the file is a Vite input and the panel uses it (->viteTheme('resources/css/filament/admin/theme.css')), then build with pnpm run build (or npm run build).

#Usage

use JeffersonGoncalves\FilamentEditorialTheme\EditorialThemePlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->viteTheme('resources/css/filament/admin/theme.css')
        ->plugin(
            EditorialThemePlugin::make()
                ->logo(fn () => asset('img/logo.svg'))
                ->brandName('Acme Inc.')
                ->terminalLogin(),
        );
}

#Options

Method	Default
`primaryColor(array $color)`	amber	Panel primary palette (e.g. `Color::Green`)
`grayColor(array $color)`	ink/paper	Panel gray palette
`logo(string\|Htmlable\|Closure)` / `brandName(string\|Closure)`	—	Shortcuts for the panel brand
`terminalLogin(bool)`	off	Terminal-style login page (`Pages\Auth\Login`)
`footer(bool)`	on	Footer partial
`footerCopyright(…)` / `footerRight(…)`	`© {year} · {app.name}` / empty	Footer contents (string, HTML or Closure)
`sidebarStatus(bool)`	on	"status · production/local" block pinned to the bottom of the sidebar
`sidebarStatusVersion(…)`	—	Version shown next to the status, e.g. `fn () => config('app.version')`
`externalLinks(bool)`	on	Open cross-host links in a new tab (`noopener noreferrer`)
`paperGrain(float $opacity)`	0.06 dark / 0.04 light	Paper-grain overlay opacity
`textOnAccent(string $color)`	ink (dark) / `#fff` (light)	Text color on primary buttons — set it when your `primaryColor()` needs a different contrast

Everything else is a CSS token: override --surface-*, --text-*, --accent, the fonts (--font-serif, --font-sans, --font-mono) and the rest below the @import in your theme file.

#Terminal login

->terminalLogin() swaps the panel login for the bundled page. To customize it, extend it and point the panel at your class:

namespace App\Filament\Admin\Pages\Auth;

class Login extends \JeffersonGoncalves\FilamentEditorialTheme\Pages\Auth\Login
{
    protected function getCredentialsFromFormData(array $data): array
    {
        return [...parent::getCredentialsFromFormData($data), 'status' => true];
    }
}

$panel->login(\App\Filament\Admin\Pages\Auth\Login::class);

Behind the terminal you can show a blurred preview of any view (your public homepage, for instance) — publish the config and set login.preview_view:

php artisan vendor:publish --tag=filament-editorial-theme-config

The login, footer and status strings ship in English, Spanish and Brazilian Portuguese.

#Gotchas

The theme includes layout fixes that look unusual but exist for concrete reasons — keep them if you copy the CSS:

Filament 3 skips the fixed-sidebar fixes: they work around Filament 4/5 Livewire morphing; Filament 3 keeps the sidebar in the normal flex flow.
Sidebar layout fixes are desktop-only (Filament 4/5) (@media (min-width: 1024px)): on mobile the sidebar is a drawer; pinning the wrapper to 81px would leave an empty gutter.
min-height: 0 on .fi-sidebar-nav is what lets overflow-y: auto clip — without it the sidebar footer scrolls off-screen.
--text-on-accent is #fff in the light scheme because amber-600 is too dark for ink text to read well.
Outlined primary buttons keep currentColor icons instead of --text-on-accent, so the icon matches the label on a transparent background.
Scrollbars use tokens (--accent on --surface-base) — they're part of the visual identity.

#Requirements

PHP 8.2 or higher
Filament 3.x

#Testing

composer test

#Changelog

Please see CHANGELOG for more information on what has changed recently.

#Contributing

Please see CONTRIBUTING for details.

#Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

#Credits

#License

The MIT License (MIT). Please see License File for more information. The bundled fonts are licensed under the SIL Open Font License 1.1 — see resources/fonts/OFL.md.