noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Put the mail card on M3's corner scale and its header at title-lg

Browse Source 
Plan step 19, containment.md C-27 and C-28. `.inner-body` was 24px, a
value not on M3's 0/4/8/12/16/20/28/32/48 scale; it is 28px, the
extra-large corner of the dialog and bottom-sheet surface it stands in
for. `.header a` is title-large at weight 400, which its own section
comment and the `h2` under it already said.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 06:10:02 +02:00
co-authored by Claude Opus 5
parent a237d33426
commit 657fa526fa
2 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/mail/theme.blade.php
+4 -4
View File
@@ -203,7 +203,7 @@ img {
width: 100%; width: 100%;
} }
/* Header: the app name in title-lg, or the configured logo */ /* Header: the app name in title-lg (22/28 at weight 400), or the configured logo */
.header { .header {
padding: 32px 0 24px; padding: 32px 0 24px;
@@ -213,7 +213,7 @@ img {
.header a { .header a {
color: {{ $role['on-surface'] }}; color: {{ $role['on-surface'] }};
font-size: 22px; font-size: 22px;
font-weight: 500; font-weight: 400;
letter-spacing: 0; letter-spacing: 0;
line-height: 28px; line-height: 28px;
text-decoration: none; text-decoration: none;
@@ -226,7 +226,7 @@ img {
margin: 0 auto; margin: 0 auto;
} }
/* Body: the card, separated from the page by tone alone */ /* Body: the card, separated from the page by tone alone, on M3's extra-large corner */
.body { .body {
-premailer-cellpadding: 0; -premailer-cellpadding: 0;
@@ -245,7 +245,7 @@ img {
-premailer-width: 570px; -premailer-width: 570px;
background-color: {{ $card }}; background-color: {{ $card }};
border: 0; border: 0;
border-radius: 24px; border-radius: 28px;
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
width: 570px; width: 570px;
tests/Feature/MailThemeTest.php
+14 -1
View File
@@ -118,7 +118,7 @@ it('inlines the application\'s scheme onto the mail', function () {
->toContain('border-top: 16px solid #123456') ->toContain('border-top: 16px solid #123456')
->toContain('color: #fefefe') ->toContain('color: #fefefe')
->toContain('border-radius: 9999px') ->toContain('border-radius: 9999px')
->and(inlineStyle($html, 'inner-body'))->toContain('background-color: #fdfdfd') ->and(inlineStyle($html, 'inner-body'))->toContain('background-color: #fdfdfd')->toContain('border-radius: 28px')
->and(inlineStyle($html, 'wrapper'))->toContain('background-color: #eeeeee') ->and(inlineStyle($html, 'wrapper'))->toContain('background-color: #eeeeee')
->and(inlineStyle($html, 'panel-content'))->toContain('background-color: #eeeeee') ->and(inlineStyle($html, 'panel-content'))->toContain('background-color: #eeeeee')
->and($html) ->and($html)
@@ -190,6 +190,19 @@ it('styles every button colour Laravel and M3 name', function () {
expect($css)->not->toContain('@media'); expect($css)->not->toContain('@media');
}); });
it('keeps every corner and weight on M3\'s scales', function () {
$css = view('livewire-material::mail.theme')->render();
preg_match_all('/border-radius: (\d+)px/', $css, $corners);
// M3's shape scale, plus the `full` corner a button draws as a large pixel value.
expect(array_unique($corners[1]))->each->toBeIn(['0', '4', '8', '12', '16', '20', '28', '32', '48', '9999'])
->and($css)->toContain(<<<'CSS'
.header a {
CSS)
->toMatch('/\.header a \{[^}]*font-weight: 400/');
});
it('leaves the application\'s mail components alone unless asked', function () { it('leaves the application\'s mail components alone unless asked', function () {
expect(config('mail.markdown.paths'))->not->toContain(LivewireMaterialServiceProvider::mailComponentPath()); expect(config('mail.markdown.paths'))->not->toContain(LivewireMaterialServiceProvider::mailComponentPath());