Andreas Reinhold / reiniandClaude Opus 5
bcf0d4f4e3
An app installed as a PWA, and a mobile browser, colour their bar from <meta name="theme-color">, which the package left alone: the bar kept the server's one colour whatever theme the visitor chose. With the new `theme.meta` option (off by default), <x-theme-script> sets the content of every theme-color meta without a `media` attribute to the resolved theme's surface, from the scheme data and for the profile in <html data-scheme>, adding one to <head> when the page has none. A MutationObserver on <html> follows every later change of data-theme or data-scheme: $store.theme's set() and toggle(), an OS change while `system`, a profile preview, an application's own script. wire:navigate's head merge puts the next page's server-rendered meta in place, so it is painted again as the page is swapped in and on livewire:navigated. Turned off, the script is byte-for-byte what it was. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2
181 lines
6.4 KiB
PHP
181 lines
6.4 KiB
PHP
<?php
|
|
|
|
return [
|
|
|
|
/*
|
|
|--------------------------------------------------------------------------
|
|
| Component prefix
|
|
|--------------------------------------------------------------------------
|
|
|
|
|
| Every component is an anonymous Blade component. Without a prefix they are
|
|
| <x-button>, <x-card> and so on; set a prefix such as 'm' when a name
|
|
| clashes with one of the application's own components, and they become
|
|
| <x-m::button>, <x-m::card>. They are always <x-livewire-material::button>
|
|
| as well.
|
|
|
|
|
*/
|
|
|
|
'prefix' => '',
|
|
|
|
/*
|
|
|--------------------------------------------------------------------------
|
|
| Theme
|
|
|--------------------------------------------------------------------------
|
|
|
|
|
| The head script decides the theme before the first paint and writes it to
|
|
| <html data-theme>. 'default' is used until the visitor chooses: 'light',
|
|
| 'dark' or 'system' (follow the operating system). The choice is kept in
|
|
| localStorage under 'storage_key'; values found under 'legacy_keys' (an
|
|
| earlier theme toggle's key) are adopted once and then removed.
|
|
|
|
|
| 'meta' keeps <meta name="theme-color"> (the colour an installed web app
|
|
| or a mobile browser gives its bar) on the resolved theme's surface, and
|
|
| the active colour profile's: the head script sets it before the first
|
|
| paint, adds one when the page has none, and follows every later change,
|
|
| wire:navigate included. A theme-color meta with a `media` attribute is
|
|
| left alone.
|
|
|
|
|
*/
|
|
|
|
'theme' => [
|
|
'default' => 'system',
|
|
'storage_key' => 'material-theme',
|
|
'legacy_keys' => [],
|
|
'meta' => false,
|
|
],
|
|
|
|
/*
|
|
|--------------------------------------------------------------------------
|
|
| Navigation rail
|
|
|--------------------------------------------------------------------------
|
|
|
|
|
| Whether a collapsible navigation rail starts 'expanded' or 'collapsed'
|
|
| until the visitor toggles it. The head script applies the choice before
|
|
| the first paint, from localStorage under 'storage_key'.
|
|
|
|
|
*/
|
|
|
|
'rail' => [
|
|
'default' => 'expanded',
|
|
'storage_key' => 'material-rail',
|
|
],
|
|
|
|
/*
|
|
|--------------------------------------------------------------------------
|
|
| Fields
|
|
|--------------------------------------------------------------------------
|
|
|
|
|
| Text fields, selects and pickers come in M3's two styles: 'outlined' (a
|
|
| notched outline) and 'filled' (a tinted box with an indicator line). This
|
|
| is the style a field takes when its `variant` is not given.
|
|
|
|
|
*/
|
|
|
|
'fields' => [
|
|
'variant' => 'outlined',
|
|
],
|
|
|
|
/*
|
|
|--------------------------------------------------------------------------
|
|
| Pagination
|
|
|--------------------------------------------------------------------------
|
|
|
|
|
| Draw Laravel's and Livewire's paginators in M3: the package's views are
|
|
| put in front of `pagination::tailwind` and `livewire::tailwind` (and
|
|
| their simple versions). An application's own published pagination views
|
|
| still win.
|
|
|
|
|
*/
|
|
|
|
'pagination' => true,
|
|
|
|
/*
|
|
|--------------------------------------------------------------------------
|
|
| Node
|
|
|--------------------------------------------------------------------------
|
|
|
|
|
| `php artisan material:scheme` runs Google's colour utilities through Node.
|
|
| Set the binary when `node` is not on the PATH of the user running Artisan.
|
|
|
|
|
*/
|
|
|
|
'node' => env('MATERIAL_NODE', 'node'),
|
|
|
|
/*
|
|
|--------------------------------------------------------------------------
|
|
| Scheme data
|
|
|--------------------------------------------------------------------------
|
|
|
|
|
| The light and dark hexes `php artisan material:scheme` writes beside the
|
|
| stylesheet. The mail theme reads its colours here, and so does an error
|
|
| page when the build is missing; without the file both use the package's
|
|
| default scheme.
|
|
|
|
|
*/
|
|
|
|
'scheme' => resource_path('css/material-scheme.json'),
|
|
|
|
/*
|
|
|--------------------------------------------------------------------------
|
|
| Colour profiles
|
|
|--------------------------------------------------------------------------
|
|
|
|
|
| Named schemes an installation can switch between. Each one is a 'label',
|
|
| a 'seed' (#rrggbb), a 'variant' and an optional 'contrast'; 'spec'
|
|
| ('2025' or '2021') and the 'success', 'warning' and 'info' sources are
|
|
| optional too, taken from the command's options when left out. Without a
|
|
| seed, `php artisan material:scheme` generates every profile into one
|
|
| stylesheet keyed by <html data-scheme>. 'profile' names the default one
|
|
| (else the first); the application says which is active with
|
|
| Scheme::resolveProfileUsing(). Regenerate after changing either.
|
|
|
|
|
*/
|
|
|
|
'profiles' => [],
|
|
|
|
'profile' => null,
|
|
|
|
/*
|
|
|--------------------------------------------------------------------------
|
|
| Mail
|
|
|--------------------------------------------------------------------------
|
|
|
|
|
| Markdown mail takes the theme when `mail.markdown.theme` (MAIL_MARKDOWN_THEME)
|
|
| is 'livewire-material::mail.theme'. 'components' puts this package's mail
|
|
| header and message after the application's own mail components — or
|
|
| publish them with `vendor:publish --tag=livewire-material-mail` instead.
|
|
| 'logo' replaces the app name in that header with an image: an absolute
|
|
| 'src', with 'width' and 'height' in pixels, which Outlook sizes it by.
|
|
|
|
|
*/
|
|
|
|
'mail' => [
|
|
'components' => (bool) env('MATERIAL_MAIL_COMPONENTS', false),
|
|
'logo' => [
|
|
'src' => null,
|
|
'width' => null,
|
|
'height' => null,
|
|
],
|
|
],
|
|
|
|
/*
|
|
|--------------------------------------------------------------------------
|
|
| Showcase
|
|
|--------------------------------------------------------------------------
|
|
|
|
|
| Every component in every variant, rendered in the application's own
|
|
| scheme. Off unless the application runs locally. 'vite' names the entry
|
|
| points that import this package's CSS and JavaScript; the error pages
|
|
| load them too, showcase or not.
|
|
|
|
|
*/
|
|
|
|
'showcase' => [
|
|
'enabled' => (bool) env('MATERIAL_SHOWCASE', env('APP_ENV', 'production') === 'local'),
|
|
'path' => 'material',
|
|
'middleware' => ['web'],
|
|
'vite' => ['resources/css/app.css', 'resources/js/app.js'],
|
|
],
|
|
|
|
];
|