finatto/filament-theme

Finatto UI — official Filament v5 theme plugin (light-only, black primary, red brand accent).

Maintainers

Package info

github.com/finattogroup/filament-theme

pkg:composer/finatto/filament-theme

Transparency log

Statistics

Installs: 149

Dependents: 0

Suggesters: 0

Stars: 0

Open Issues: 0

Security

Advisories: 0

Aikido package health analysis

1.1.0 2026-07-10 16:21 UTC

Requires

proprietary 025bf35fcffa0372318786199c048e2e84e98f4f

themefilamentfilament-pluginfinatto

Published on Packagist.org on 2026-07-21 23:38 UTC

This package is auto-updated.

Last update: 2026-07-21 23:47:34 UTC

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. Páginas de form/view usam o trait ConstrainsContentWidth (Width::FiveExtraLarge). Layout de registro (canônico): Grid de 3 colunas contendo exatamente DOIS Group — principal columnSpan(2) e lateral columnSpan(1); as Section empilham SEMPRE dentro do seu Group, nunca soltas no grid raiz. Section solta no grid raiz vira item de linha e desalinha com a coluna vizinha (vão fantasma). A raiz do schema deve ser 1 coluna ($schema->columns(1)->components([...])): o schema default de Resource é 2 colunas e espreme o Grid(3) na metade, colapsando a coluna lateral. Nenhum input acima de ~40rem.
  7. Toda string visível em pt-BR. Numéricos alinhados à direita com unidade como sufixo.

Cor → significado (badges/ícones de estado)

Cor Significado
success ok / operacional
info estado neutro/operacional
warning requer atenção
danger falha / perigo
gray inativo / ausência / arquivado (—)

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