Andreas Reinhold / reiniandClaude Fable 5.1
7084aac788
The head script reads livewire-material.theme.contrast (standard, medium, high or system, kept under its own storage key), asks the operating system while the choice is system and follows it, and writes <html data-contrast> — nothing for standard, which is what the stylesheet's plain blocks already are. It writes <html data-motion="standard"> for motion.scheme, and both attributes, with the new choice and key ones, survive wire:navigate. $store.theme gains contrast, resolvedContrast and setContrast(); the theme-color meta takes its surface from the resolved level. Plan: docs/plans/material-3-alignment.md, steps 5 and 7 (core C2, C9). Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
208 lines
7.5 KiB
PHP
208 lines
7.5 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.
|
|
|
|
|
| 'contrast' is M3's contrast level, the same three the scheme is generated
|
|
| in: 'standard', 'medium' (3:1) or 'high' (7:1), or 'system' to follow the
|
|
| operating system's own contrast setting until the visitor chooses. The
|
|
| head script writes it to <html data-contrast> before the first paint —
|
|
| standard, having the plain blocks, writes no attribute.
|
|
|
|
|
*/
|
|
|
|
'theme' => [
|
|
'default' => 'system',
|
|
'storage_key' => 'material-theme',
|
|
'legacy_keys' => [],
|
|
'meta' => false,
|
|
'contrast' => [
|
|
'default' => 'system',
|
|
'storage_key' => 'material-contrast',
|
|
],
|
|
],
|
|
|
|
/*
|
|
|--------------------------------------------------------------------------
|
|
| Motion
|
|
|--------------------------------------------------------------------------
|
|
|
|
|
| M3's two motion schemes. 'expressive' (the default) is the bouncy one the
|
|
| library draws with; 'standard' is the restrained set, "minimal bounce,
|
|
| for utilitarian products" — the head script writes it to
|
|
| <html data-motion> before the first paint, and the spatial springs swap.
|
|
| The effects springs are the same in both.
|
|
|
|
|
*/
|
|
|
|
'motion' => [
|
|
'scheme' => 'expressive',
|
|
],
|
|
|
|
/*
|
|
|--------------------------------------------------------------------------
|
|
| 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'],
|
|
],
|
|
|
|
];
|