README

Official Finatto UI theme for Filament v5: color palettes, IBM Plex Sans typography, disabled dark mode, and a stylesheet of fi-* hook-class overrides. Light-only by design.

Install

composer require finatto/filament-theme

Apply it to any panel with a single line:

use Finatto\FilamentTheme\FinattoTheme;

$panel->plugin(FinattoTheme::make());

The plugin registers the color palettes (primary, brand, semantic set), the IBM Plex Sans font, darkMode(false) and defaultThemeMode(Light). Publish the stylesheet asset after install/deploy:

php artisan filament:assets

No Vite step required: the CSS is plain fi-* hook-class overrides on top of Filament's own compiled theme.

Brand golden rule

Red #E51A31 is brand, not semantics. Black is the action color (primary): CTAs, focus rings, toggles, selection. Red never colors an action button, a link, or body text — only graphic accents (active sidebar blade, badges, active-tab underline, loaders, chart accents). Destructive actions keep Filament's danger.

Red text uses only: brand-400 #F16A79 (dark bg) / brand-700 #C01128 (white bg).

Design tokens

Every rule references --fn-* custom properties declared atop resources/dist/theme.css — the single source of truth. No component rule contains a hardcoded hex.

Padrões de tela Finatto

Regras normativas de composição de tela — valem para todo Resource, Relation Manager e Page dos painéis Finatto.

1. Visualização é Infolist. Página View usa infolist(); form com campos disabled é proibido. Vazio renderiza — (->placeholder('—')).
2. A linha abre o registro (->recordUrl(...)). No máximo uma ação inline por linha, e só se for rotina (ex.: Atualizar KM). O resto vai num ActionGroup (menu ⋯).
3. Destrutiva sempre em menu + ->requiresConfirmation(). Vermelho exposto só em contexto de decisão — nunca um Delete vermelho por linha.
4. Badge = enum com cor semântica; identificador = texto. Enums de estado implementam HasLabel/HasColor e usam ->badge(). Placa/código são texto (FontFamily::Mono), nunca badge. Coluna primária = valor em peso 600 + ->description(...).
5. Toda tabela tem empty state com ação (emptyStateHeading + emptyStateDescription + emptyStateActions).
6. Form tem largura máxima; tabela é fluida. Layout: ->columns(3) com seções columnSpan(2)/columnSpan(1).
7. Toda string visível em pt-BR. Numéricos alinhados à direita com unidade como sufixo.

Cor → significado (badges/ícones de estado)

Vermelho (danger) é reservado a falha/perigo. Ausência de dado é cinza/—.