diff --git a/.claude/skills/livewire-material-development/SKILL.md b/.claude/skills/livewire-material-development/SKILL.md index 60f44f2..a294a87 100644 --- a/.claude/skills/livewire-material-development/SKILL.md +++ b/.claude/skills/livewire-material-development/SKILL.md @@ -46,6 +46,34 @@ php artisan material:scheme "#4f46e5" --variant=tonal-spot Variants: `tonal-spot` (M3's default), `vibrant`, `expressive`, `neutral`, `fidelity`, `content`, `monochrome`, `rainbow`, `fruit-salad`. `--success`, `--warning` and `--info` set the source of the state colours; `--contrast` goes from -1 to 1. The command also writes `material-scheme.json` beside the stylesheet. +### Colour profiles + +An installation that switches between several schemes lists them in `config/livewire-material.php` and runs the command without a seed, which generates every profile into the same stylesheet, keyed by ``: + +```php +'profiles' => [ + 'indigo' => ['label' => 'Indigo', 'seed' => '#4f46e5', 'variant' => 'vibrant'], + 'teal' => ['label' => 'Teal', 'seed' => '#00897b', 'variant' => 'vibrant'], +], +'profile' => 'indigo', // the default; else the first +``` + +```bash +php artisan material:scheme +``` + +- Names are lowercase letters, digits and dashes. Regenerate after changing the list; only generated profiles exist for the picker, the resolver and the stylesheet. +- The application says which profile is active, once, in a service provider. The closure runs every time a colour is drawn (head script, mail, error page), so it may read the database; a name that is not a generated profile, or a closure that throws, falls back to the default: + +```php +use NoNameWeb\LivewireMaterial\Support\Scheme; + +Scheme::resolveProfileUsing(fn (): ?string => Setting::get('color_profile')); +``` + +- `` writes the active profile to `` before the first paint; mails and error pages draw it too. `Scheme::profiles()` lists the generated profiles (name ⇒ label, light and dark roles) and `Scheme::profile()` names the active one — validate a stored choice with `Rule::in(array_keys(Scheme::profiles()))`. +- Choose with `` (see Components). Never set `data-scheme` on an element inside the page expecting a different profile there: profiles key on ``. + ## Tokens Tailwind's default palette is cleared: every colour class names an M3 role. `text-red-600`, `bg-base-200` or `text-gray-500` compile to nothing. @@ -62,7 +90,7 @@ Tailwind's default palette is cleared: every colour class names an M3 role. `tex ## Theme -`config/livewire-material.php` → `theme.default` (`light`, `dark` or `system`), `theme.storage_key`, `theme.legacy_keys`. In Alpine, `$store.theme` holds `choice` (what the visitor picked), `resolved` (`light` or `dark`, what shows), `set('light'|'dark'|'system')` and `toggle()`; `x-model="$store.theme.value"` binds a control. +`config/livewire-material.php` → `theme.default` (`light`, `dark` or `system`), `theme.storage_key`, `theme.legacy_keys`. In Alpine, `$store.theme` holds `choice` (what the visitor picked), `resolved` (`light` or `dark`, what shows), `set('light'|'dark'|'system')` and `toggle()`; `x-model="$store.theme.value"` binds a control. With colour profiles it also holds `scheme` (the profile on screen) and `previewScheme(name)`, which shows another profile on this page without storing anything. ## Toasts @@ -724,6 +752,14 @@ An avatar that opens a menu: `name`, `email`, `avatar` (image URL or initials; d Switches `$store.theme`: `mode="toggle"` (default, light/dark icon button), `cycle` (light → dark → system), `picker` (segmented buttons for settings pages). Every toggle on a page shares the store. +### `` + +A choice of colour profile (see Colour profiles): a swatch per generated profile — its name and its primary, secondary and tertiary colour — over native radios. `wire:model` or `x-model` (with `name`) binds the chosen name; choosing previews it on the page at once; storing it is the application's. `label`, `hint`, `name`, `profiles` (default `Scheme::profiles()`). A validation error for the bound property replaces the hint. Without profiles it renders nothing. + +```blade + +``` + ### ``, `` A data table: write plain ``, ``, ``, `` inside `` (`size="xs"` for a dense one); cell utilities (`text-end`, `whitespace-nowrap`) always win. Scrolling is yours: wrap it in `
`. A row that opens something is `data-list-row` with one `data-list-open` control; a selected row is `aria-selected="true"`. diff --git a/CLAUDE.md b/CLAUDE.md index 8997516..d9d9222 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -195,7 +195,7 @@ This application uses `nonameweb/livewire-material`: Material 3 Expressive compo - Components are anonymous Blade components, unprefixed unless `config/livewire-material.php` sets a `prefix`. Before writing or changing a view that uses them, activate the `livewire-material-development` skill for the props, slots and traps of each component. - Never write maryUI tags (``) or daisyUI classes (`btn`, `card`, `badge`, `bg-base-200`, `text-base-content`…). They compile to nothing and fail silently. -- Every layout includes `` in `` before `@vite`. The colour scheme is generated with `php artisan material:scheme` — never edit `resources/css/material-scheme.css` by hand. +- Every layout includes `` in `` before `@vite`. The colour scheme is generated with `php artisan material:scheme` — never edit `resources/css/material-scheme.css` by hand. With colour profiles (`livewire-material.profiles`), run it without a seed after changing them; the active profile comes from `Scheme::resolveProfileUsing()`. - While the application runs locally, every token and component renders in the application's own scheme at `/material` (the showcase). - HTTP error pages and the Markdown mail theme come from the package. Change error wording by publishing `--tag=livewire-material-errors`; select the mail theme with `MAIL_MARKDOWN_THEME=livewire-material::mail.theme`. diff --git a/composer.lock b/composer.lock index f8f247b..71d0670 100644 --- a/composer.lock +++ b/composer.lock @@ -2999,11 +2999,11 @@ }, { "name": "nonameweb/livewire-material", - "version": "1.0.1", + "version": "1.1.0", "source": { "type": "git", "url": "https://gitea.nonameweb.ch/noNameWEB/livewire-material.git", - "reference": "7798352cfc71643a88d4658f9704e65c4e24e8da" + "reference": "d805dbc4076dc06c4d7e5023f99be4c420219975" }, "require": { "laravel/framework": "^13.0", @@ -3083,7 +3083,7 @@ "material-design", "tailwindcss" ], - "time": "2026-09-13T09:16:52+00:00" + "time": "2026-09-13T12:39:26+00:00" }, { "name": "nunomaduro/termwind",