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

Font	Usage	Weights
Titillium Web	Body text, UI elements, headings	200, 300, 400, 600, 700 + italic 400
Lora	Serif (long-form reading)	400, 700 + italic 400
Roboto Mono	Monospace (code, data)	400, 500

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):

Token	Base Color	Use
`primary`	Blu Italia `#0066cc`	Interactive elements, links, active states
`danger`	Red `#cc334d`	Errors, destructive actions
`success`	Emerald `#008055`	Confirmations, positive states
`warning`	Orange `#cc7a00`	Warnings, alerts
`info`	Slate `#5c6f82`	Informational messages
`gray`	Neutral `#262626`	Text, borders, backgrounds

Component Overrides

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

Component Area	Override Details
Topbar	Primary blue background, white text/icons, ring removal
Sidebar	Dark blue (`primary-800`) background, white text, custom scrollbar
Buttons	`font-weight: 600`, `:active` state, no shadow on outlined, 150ms transition
Tabs	AGID underline style (flat, no card), full-width, left-aligned
Links	Primary color instead of gray
Inputs	AGID `border-radius: 4px`
Tables	Bold headers with 2px bottom border
Modals	`border-radius: 8px` (from Filament's 12px)
Pagination	Active page with `bg-primary-50`
Form editors	Toolbar border-radius matching inputs
Dropdowns	Tighter `border-radius: 4px`
Notifications	`border-radius: 8px`
Stats widgets	`border-radius: 8px`
Empty states	Primary-tinted icon background
Breadcrumbs	Primary color on hover
Badges	Light-on-dark styling in sidebar
Focus indicators	White outline on dark backgrounds (WCAG 2.4.7)

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

fonts.css — @font-face declarations (no layer)
Tailwind CSS base layer
Filament theme CSS — all components in @layer components
theme.css — @theme inline overrides Tailwind's theme tokens
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

License

MIT

robyconte / filament-italia

Maintainers

Package info

Statistics

Security