diff --git a/resources/views/mail/theme.blade.php b/resources/views/mail/theme.blade.php index 910d6527..3dff94a4 100644 --- a/resources/views/mail/theme.blade.php +++ b/resources/views/mail/theme.blade.php @@ -203,7 +203,7 @@ img { 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 { padding: 32px 0 24px; @@ -213,7 +213,7 @@ img { .header a { color: {{ $role['on-surface'] }}; font-size: 22px; - font-weight: 500; + font-weight: 400; letter-spacing: 0; line-height: 28px; text-decoration: none; @@ -226,7 +226,7 @@ img { 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 { -premailer-cellpadding: 0; @@ -245,7 +245,7 @@ img { -premailer-width: 570px; background-color: {{ $card }}; border: 0; - border-radius: 24px; + border-radius: 28px; margin: 0 auto; padding: 0; width: 570px; diff --git a/tests/Feature/MailThemeTest.php b/tests/Feature/MailThemeTest.php index cc4dca63..ee8a1dfe 100644 --- a/tests/Feature/MailThemeTest.php +++ b/tests/Feature/MailThemeTest.php @@ -118,7 +118,7 @@ it('inlines the application\'s scheme onto the mail', function () { ->toContain('border-top: 16px solid #123456') ->toContain('color: #fefefe') ->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, 'panel-content'))->toContain('background-color: #eeeeee') ->and($html) @@ -190,6 +190,19 @@ it('styles every button colour Laravel and M3 name', function () { 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 () { expect(config('mail.markdown.paths'))->not->toContain(LivewireMaterialServiceProvider::mailComponentPath());