Styling
The board sits on the page the way a Filament table does: a container with a rounded border and a shadow, a toolbar on top (the focus-mode toggle at the start; the search, the filters, the density toggle and the columns manager at the end), the selection strip under it, then the columns on a soft surface. Every control in the toolbar and every menu is one of Filament's own components (button, icon button, input, select, date picker, toggle, badge, dropdown, tabs), so a panel theme restyles them with the rest of the panel.
The stylesheet is plain CSS on Filament's colour variables (--gray-*, --primary-*, --danger-*) and follows the panel's theme and dark mode without compiling anything. Restyle it with the --ps-kanban-* variables on .ps-kanban from your theme, prefixed so they win over the plugin's stylesheet:
.fi-body .ps-kanban {
--ps-kanban-col-width: 20rem;
--ps-kanban-col-radius: 0.75rem;
--ps-kanban-ring: var(--primary-500);
--ps-kanban-height: 40rem; /* the board's height; pages fit it to the window by default */
}
| Variable | What it sets |
|---|---|
--ps-kanban-bg, --ps-kanban-surface, --ps-kanban-border, --ps-kanban-line |
The container's background, the columns' surface, borders and lines. |
--ps-kanban-text, --ps-kanban-muted, --ps-kanban-soft |
Text colours. |
--ps-kanban-ring, --ps-kanban-radius, --ps-kanban-shadow, --ps-kanban-outline, --ps-kanban-mono |
Focus rings and drop targets, the container's corners, shadow and ring, the monospaced font of eyebrows. |
--ps-kanban-col-bg, --ps-kanban-col-border, --ps-kanban-col-radius, --ps-kanban-col-width, --ps-kanban-folded-width, --ps-kanban-gap |
Columns. |
--ps-kanban-card-bg, --ps-kanban-card-border, --ps-kanban-card-hover, --ps-kanban-card-radius |
Cards. |
--ps-kanban-height |
The board's height; the page sets it to fill the window below the toolbar. |
The first group is the scheme Filament Gantt (--ps-gantt-*) and Filament Spreadsheet (--ps-sheet-*) share, with the same names and the same values, so the three plugins look like one family and like a table on the same page.
Classes are prefixed ps-kanban- (ps-kanban-toolbar, ps-kanban-col, ps-kanban-card, ps-kanban-card-selected, ps-kanban-col-target while a card is dragged over a column it may enter…) for your own rules. The focus mode puts ps-kanban-focus on <body> (ps-kanban-focus-sidebar while the user brought the sidebar back).
Dark mode
Handled: the variables are redefined under .dark .ps-kanban. Override them there for your own dark palette.
Dates
A date-range filter's pickers display date_format from config/packstub-kanban.php (M j, Y when null) and start their weeks on first_day_of_week (1 = Monday … 7 = Sunday). Publish the file to change them:
php artisan vendor:publish --tag=packstub-kanban-config
Translations
Every string is in resources/lang/{en,ro,ru,de}/kanban.php. Publish them to change or add a language:
php artisan vendor:publish --tag=packstub-kanban-translations