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

Dependents: 0

Suggesters: 0

Stars: 0

Open Issues: 0

Security

Advisories: 0

Aikido package health analysis

v1.0.0 2026-07-07 22:03 UTC

Requires

proprietary b1c2ec8915075ca278c15a514028230f6234c11b

themefilamentfilament-pluginfinatto

Published on Packagist.org on 2026-07-07 22:09 UTC

This package is auto-updated.

Last update: 2026-07-07 22:09:52 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. 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)

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/—.