README

A Filament v5 admin panel theme based on the .italia Design System by AGID (Agenzia per l'Italia Digitale).

Applies the official Italian public administration visual identity — colors, typography, border radii, and component styling — to any Filament panel, with zero npm dependencies and no Blade view overrides.

Requirements

• PHP 8.2+
• Laravel 11+
• Filament 5.x
• Tailwind CSS 4.x (via Vite)
• Node.js (for npm run build)

Installation

composer require robyconte/filament-italia
php artisan filament-italia:install
npm run build

The install command publishes the config file and a ready-to-use theme CSS entry point to resources/css/filament-italia/theme.css.

Panel Provider

Use FilamentItaliaTheme::applyTo() in your PanelProvider to apply the theme with a single call:

use RoBYCoNTe\FilamentItalia\FilamentItaliaTheme;

public function panel(Panel $panel): Panel
{
    return FilamentItaliaTheme::applyTo(
        $panel
            ->id('admin')
            ->path('admin')
            ->discoverResources(in: app_path('Filament/Admin/Resources'), for: 'App\Filament\Admin\Resources')
            ->discoverPages(in: app_path('Filament/Admin/Pages'), for: 'App\Filament\Admin\Pages')
            ->middleware([
                // ...
            ])
    );
}

applyTo() automatically configures:

• Theme CSS entry point (->viteTheme())
• Primary color from config (->colors())
• Light mode only (->darkMode(false))
• Self-hosted fonts: Titillium Web, Roboto Mono, Lora (->font(), ->monoFont(), ->serifFont())

Advanced: Custom Theme CSS

If you need to add custom @source directives or override specific styles, publish the theme CSS and edit it:

php artisan vendor:publish --tag=filament-italia-theme

Then edit resources/css/filament-italia/theme.css and add your customizations after the package imports.

Configuration

Publish the config file:

php artisan vendor:publish --tag=filament-italia-config

Primary Color

The default primary color is Blu Italia (#0066cc), the official color for national-level Italian public administration services.

You can customize it in two ways:

Via .env (recommended):

FILAMENT_ITALIA_PRIMARY_COLOR=#0066cc

Via config file (config/filament-italia.php):

'primary_color' => '#0066cc',

The package automatically generates a full 11-shade palette (50–950) from any hex color using HSL interpolation.

For local or territorial public services, AGID recommends using a dedicated primary color. See the AGID color guidelines.

What's Included

Typography

All fonts are self-hosted — no external CDN dependency. Font files are processed by Vite at build time.

Color Tokens

Full AGID-aligned color scales (11 shades each: 50–950):

Component Overrides

The theme overrides Filament's default component styling via un-layered CSS rules (which always beat Filament's @layer components):

Architecture

resources/css/
├── fonts.css       # @font-face declarations (self-hosted woff2)
├── theme.css       # @theme inline block — AGID color/radius/font tokens
└── overrides.css   # Un-layered component overrides

resources/fonts/    # Self-hosted woff2 font files (11 files)

CSS Cascade Strategy

1. fonts.css — @font-face declarations (no layer)
2. Tailwind CSS base layer
3. Filament theme CSS — all components in @layer components
4. theme.css — @theme inline overrides Tailwind's theme tokens
5. overrides.css — un-layered rules, always win over @layer components

This means overrides never need !important. Doubled selectors (e.g. .fi-topbar.fi-topbar) provide extra specificity insurance.

Limitations

• Light mode only — the AGID .italia design system does not define a dark mode palette.
• No npm dependency — all styling is pure CSS. No JavaScript runtime impact.
• No Blade overrides — the theme works entirely through CSS, preserving Filament's component structure for future compatibility.

Credits

• AGID — Agenzia per l'Italia Digitale
• .italia Design System
• Filament PHP

License

MIT