diff --git a/apps/web/public/brand/marka/marka-favicon-dark.png b/apps/web/public/brand/marka/marka-favicon-dark.png index 3763b556b..228aa974c 100644 Binary files a/apps/web/public/brand/marka/marka-favicon-dark.png and b/apps/web/public/brand/marka/marka-favicon-dark.png differ diff --git a/apps/web/public/brand/marka/marka-favicon-light.png b/apps/web/public/brand/marka/marka-favicon-light.png index 0e25d1202..ea05feb81 100644 Binary files a/apps/web/public/brand/marka/marka-favicon-light.png and b/apps/web/public/brand/marka/marka-favicon-light.png differ diff --git a/assets/brand/marka/manifest.json b/assets/brand/marka/manifest.json index da959c464..a2bf6af8d 100644 --- a/assets/brand/marka/manifest.json +++ b/assets/brand/marka/manifest.json @@ -4,7 +4,7 @@ "source": "assets/brand/marka/source/marka-navy-mark.png", "crop": { "left": 285, "top": 178, "width": 715, "height": 882 }, "foreground": "#03132F", - "background": "#FFFFFF", + "background": "transparent", "padding": 0.16, "outputs": [ { "path": "apps/web/public/brand/marka/marka-favicon-light.png", "width": 48, "height": 48, "source": "assets/brand/marka/source/marka-navy-mark.png", "cornerRadius": 9 } @@ -42,7 +42,7 @@ "source": "assets/brand/marka/source/marka-white-mark.png", "crop": { "left": 339, "top": 252, "width": 629, "height": 750 }, "foreground": "#FFFFFF", - "background": "#03132F", + "background": "transparent", "padding": 0.16, "outputs": [ { "path": "apps/web/public/brand/marka/marka-favicon-dark.png", "width": 48, "height": 48, "source": "assets/brand/marka/source/marka-white-mark.png", "cornerRadius": 9 } diff --git a/scripts/generate-marka-assets.test.mjs b/scripts/generate-marka-assets.test.mjs index c45c0a6e9..3f92210d4 100644 --- a/scripts/generate-marka-assets.test.mjs +++ b/scripts/generate-marka-assets.test.mjs @@ -191,7 +191,7 @@ test("declares and applies ImageMagick trimming to transparent wordmark outputs" } }); -test("generates rounded-square favicon tiles with transparent outer corners", async () => { +test("generates favicon tiles with transparent backgrounds", async () => { const outputRoot = await mkdtemp(join(tmpdir(), "marka-assets-")); await generateAssets({ outputRoot, writeIco: false }); @@ -222,18 +222,12 @@ test("generates rounded-square favicon tiles with transparent outer corners", as assert.equal(pixelAt(data, info, x, y)[3], 0, `${name} at ${x},${y}`); } - assert.equal(pixelAt(data, info, 0, Math.floor(info.height / 2))[3], 255); - assert.equal(pixelAt(data, info, Math.floor(info.width / 2), 0)[3], 255); - assert.ok(pixelAt(data, info, 2, 2)[3] < 255); - assert.equal(pixelAt(data, info, 10, 0)[3], 255); - assert.equal( - pixelAt( - data, - info, - Math.floor(info.width / 2), - Math.floor(info.height / 2), - )[3], - 255, - ); + const alphaValues = []; + for (let index = 0; index < data.length; index += info.channels) { + alphaValues.push(data[index + 3]); + } + + assert.ok(alphaValues.some((alpha) => alpha === 0), `${name} background`); + assert.ok(alphaValues.some((alpha) => alpha > 0), `${name} logo`); } });