Getting Started

Minimal Setup

Installation

composer require filafly/brisk

Publish the theme assets (if not auto-published):

php artisan vendor:publish --tag="brisk-assets"

Enable in Filament Add to config/filament.php under panels.default.theme:
```
'theme' => \Filafly\Brisk\BriskTheme::class,
```
First Use Case Restart your Laravel dev server (php artisan serve) and refresh your Filament admin panel. The UI should immediately reflect Brisk’s clean, friendly aesthetic.

Key Files to Review

resources/views/vendor/filament/brisk/ – Theme templates (customize here for overrides).
config/filafly/brisk.php – Configuration options (e.g., colors, spacing).
vendor/filafly/brisk/src/BriskTheme.php – Core theme logic (extend for customizations).

Implementation Patterns

1. Theming Workflows

Override Default Views: Copy templates from vendor/filafly/brisk/resources/views to resources/views/vendor/filament/brisk/ to customize without forking. Example: Override the dashboard layout:
```
// resources/views/vendor/filament/brisk/layouts/dashboard.blade.php
@extends('filament::brisk.layouts.base')
```

Dynamic Theming: Use Brisk’s config to toggle between light/dark modes or color schemes:

// config/filafly/brisk.php
'colors' => [
    'primary' => '#3b82f6', // Tailwind color
],

2. Integration with Filament Features

Widgets: Brisk’s card-based widgets (e.g., StatsOverviewWidget) inherit Filament’s styling but with Brisk’s rounded corners and subtle shadows. Extend with:

use Filafly\Brisk\Widgets\StatsOverviewWidget;

StatsOverviewWidget::make('Users', '1,234')
    ->color('blue.500') // Brisk-compatible color
    ->extraAttributes(['class' => 'brisk-card']);

Forms/Tables: Leverage Brisk’s pre-styled components (e.g., brisk-input, brisk-table). Add classes to Filament’s native components:
```
TextInput::make('name')
    ->extraAttributes(['class' => 'brisk-input']),
```

3. Asset Management

Custom CSS/JS: Publish Brisk’s assets and extend them:
```
php artisan vendor:publish --tag="brisk-assets" --force
```
Add custom styles to resources/css/filament/brisk/extensions.css and compile with Laravel Mix.

4. Multi-Panel Support

Configure Brisk per panel in config/filament.php:

'panels' => [
    'admin' => [
        'theme' => \Filafly\Brisk\BriskTheme::class,
        'brisk' => [
            'dark_mode' => true,
        ],
    ],
],

Gotchas and Tips

Pitfalls

Asset Caching

After publishing assets, clear Laravel’s cache and view cache:
```
php artisan cache:clear
php artisan view:clear
```

Brisk uses Tailwind, so ensure your tailwind.config.js includes Brisk’s colors:

module.exports = {
  theme: {
    extend: {
      colors: require('filafly/brisk/resources/css/colors.js'),
    },
  },
};

Component Conflicts
- If Brisk’s styles clash with Filament plugins, use !important sparingly. Instead, target specific classes:
```
/* Override Brisk’s button padding */
.brisk-button { padding: 0.5rem 1rem !important; }
```
- Debug with browser dev tools to inspect which CSS rules are being overridden.
Dark Mode Quirks
- Brisk’s dark mode relies on Tailwind’s dark: variants. Ensure your layout includes:
```
<html class="dark">
```
- Test dark mode toggling with:
```
// config/filafly/brisk.php
'dark_mode' => env('BRISK_DARK_MODE', false),
```

Debugging Tips

Template Overrides: Use php artisan filament:discover to regenerate views if custom templates aren’t loading.
Color Palette: Brisk uses a predefined palette. To add custom colors, extend the config:
```
'colors' => [
    'custom' => '#ff00ff',
],
```
Then reference in Blade:
```
<div class="bg-custom-500">...</div>
```

Extension Points

Custom Components Create a Brisk-compatible component by extending Filament’s base classes and applying Brisk’s utility classes:

use Filament\Forms\Components\TextInput;

class BriskTextInput extends TextInput {
    protected function getExtraAttributes(): array {
        return array_merge(parent::getExtraAttributes(), [
            'class' => 'brisk-input',
        ]);
    }
}

Hooks for Layouts Override Brisk’s layouts by publishing and modifying:
```
php artisan vendor:publish --tag="brisk-layouts"
```
Key files:
- resources/views/vendor/filament/brisk/layouts/app.blade.php
- resources/views/vendor/filament/brisk/layouts/navigation.blade.php

Localization Brisk supports localization via Filament’s translation system. Add translations to:

resources/lang/{locale}/filament/brisk.php

Example:

return [
    'dashboard' => [
        'welcome' => 'Welcome back!',
    ],
];

Brisk Laravel Package