morgan pushed to branch mullvad-browser-152.0a1-16.0-2 at The Tor Project / Applications / Mullvad Browser Commits: 2fb7fedc by Henry Wilkes at 2026-06-11T17:52:50+00:00 fixup! BB 44522: Modify the about dialog. BB 44955: Only use branding colors when not in a high contrast theme. - - - - - 91d0ef9c by Henry Wilkes at 2026-06-11T17:52:50+00:00 fixup! MB 1: Mullvad Browser branding TB 44955: Use context-fill and context-stroke for about-wordmark.svg. Set the context-stroke using a branding variable. - - - - - 89db7721 by Henry Wilkes at 2026-06-11T17:52:50+00:00 fixup! MB 39: Add home page about:mullvad-browser TB 44955: Use both context-fill and context-stroke when using about-wordmark.svg. - - - - - 10 changed files: - browser/base/content/aboutDialog.css - browser/branding/mb-alpha/content/about-wordmark.svg - browser/branding/mb-alpha/content/aboutDialog.css - browser/branding/mb-alpha/content/mullvad-branding.css - browser/branding/mb-nightly/content/about-wordmark.svg - browser/branding/mb-nightly/content/aboutDialog.css - browser/branding/mb-nightly/content/mullvad-branding.css - browser/branding/mb-release/content/about-wordmark.svg - browser/branding/mb-release/content/aboutDialog.css - browser/components/mullvad-browser/content/aboutMullvadBrowser.css Changes: ===================================== browser/base/content/aboutDialog.css ===================================== @@ -195,12 +195,6 @@ display: none; } -#aboutDialogContainer { - background-color: var(--about-dialog-background-color); - color: var(--about-dialog-text-color); - color-scheme: var(--about-dialog-color-scheme); -} - #rightBox { padding-block-start: 38px; background-size: auto; @@ -208,13 +202,27 @@ } #bottomBox { - background-color: var(--about-dialog-background-color-bottom); padding: 15px 10px 15px; } #trademark { font-size: xx-small; text-align: center; - color: var(--about-dialog-text-color-trademark); margin-block: 10px; } + +@media not ((prefers-contrast) or (forced-colors)) { + #aboutDialogContainer { + background-color: var(--about-dialog-background-color); + color: var(--about-dialog-text-color); + color-scheme: var(--about-dialog-color-scheme); + } + + #bottomBox { + background-color: var(--about-dialog-background-color-bottom); + } + + #trademark { + color: var(--about-dialog-text-color-trademark); + } +} ===================================== browser/branding/mb-alpha/content/about-wordmark.svg ===================================== @@ -1,9 +1,5 @@ <svg width="559" height="32" viewBox="0 0 559 32" fill="none" xmlns="http://www.w3.org/2000/svg"> -<!-- NOTE: We use "context-fill white" and "context-fill #87FFD1", rather than - - "white" or "#87FFD1" to allow about:mullvad-browser to set the wordmark - - to a single specified color when using a contrast theme. - - If context-fill is not set, this will default to the second color. --> -<g fill="context-fill white"> +<g fill="context-fill"> <path d="M0 0.463318C0 0.185301 0.185367 0 0.463418 0H5.9614C6.33214 0 6.57918 0.123556 6.70254 0.463318L14.6716 18.4402H14.857L22.6718 0.463318C22.7955 0.154429 23.0425 0 23.4132 0H28.8185C29.0966 0 29.2819 0.185301 29.2819 0.463318V31.0425C29.2819 31.3206 29.0966 31.5059 28.8185 31.5059H23.5676C23.2895 31.5059 23.1042 31.3206 23.1042 31.0425V13.313H22.9188L17.0811 26.5947C16.8957 27.0271 16.6177 27.2125 16.2163 27.2125H13.0347C12.6333 27.2125 12.3552 27.0271 12.1699 26.5947L6.33214 13.313H6.14678V31.0425C6.14678 31.3206 5.96141 31.5059 5.68336 31.5059H0.463418C0.185367 31.5059 0 31.3206 0 31.0425V0.463318Z"/> <path d="M36.1389 19.9228V0.463318C36.1389 0.185301 36.3243 0 36.6023 0H42.4711C42.7491 0 42.9345 0.185301 42.9345 0.463318V20.1082C42.9345 23.8455 45.0349 25.9769 48.2161 25.9769C51.3667 25.9769 53.4364 23.8455 53.4364 20.1082V0.463318C53.4364 0.185301 53.6214 0 53.8995 0H59.7682C60.0462 0 60.2316 0.185301 60.2316 0.463318V19.9228C60.2316 27.7376 55.2277 32 48.1854 32C41.1428 32 36.1389 27.7376 36.1389 19.9228Z"/> <path d="M67.5519 0C67.2739 0 67.0889 0.185301 67.0889 0.463318V31.0118C67.0889 31.2895 67.2739 31.4749 67.5519 31.4749H88.0616C88.3397 31.4749 88.5251 31.2895 88.5251 31.0118V25.8842C88.5251 25.6062 88.3397 25.4208 88.0616 25.4208H74.1621C73.9768 25.4208 73.8841 25.3281 73.8841 25.1431V0.463318C73.8841 0.185301 73.6987 0 73.4207 0H67.5519Z"/> @@ -19,7 +15,7 @@ <path d="M359.125 31.4353V0.564697H376.914V3.8588H363.032V13.553H374.75V16.8942H363.032V28.0941H377.385V31.4353H359.125Z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M383.943 0.564697V31.4353H387.847V18.4001H393.451L400.884 31.4353H405.305L397.472 17.9624C398.07 17.8158 398.642 17.6322 399.187 17.4118C400.821 16.7215 402.09 15.7021 403.002 14.353C403.943 13.0039 404.413 11.2942 404.413 9.22364C404.413 7.09016 403.943 5.39605 403.002 4.14115C402.09 2.85486 400.821 1.94507 399.187 1.41175C397.557 0.847049 395.691 0.564697 393.59 0.564697H383.943ZM393.023 15.2001H387.847V3.71762H393.023C395.439 3.71762 397.292 4.14115 398.577 4.9882C399.863 5.80387 400.506 7.21563 400.506 9.22364C400.506 11.2316 399.863 12.7375 398.577 13.7413C397.292 14.7139 395.439 15.2001 393.023 15.2001Z"/> </g> -<g fill="context-fill #87FFD1"> +<g fill="context-stroke"> <path fill-rule="evenodd" clip-rule="evenodd" d="M415.513 31.1829C415.41 31.5055 415.651 31.8353 415.99 31.8353H421.422C421.647 31.8353 421.845 31.6848 421.904 31.4676L424.012 23.7843H434.193L436.301 31.4676C436.361 31.6848 436.558 31.8353 436.783 31.8353H442.459C442.797 31.8353 443.038 31.5055 442.935 31.1829L433.118 0.512381C433.052 0.305304 432.86 0.164795 432.642 0.164795H425.806C425.589 0.164795 425.396 0.305306 425.33 0.512383L415.513 31.1829ZM432.823 18.7888L431.892 15.3938C431.407 13.7448 430.938 12.0311 430.485 10.2528C430.072 8.50678 429.644 6.80751 429.2 5.15499C429.186 5.10087 429.137 5.0633 429.081 5.0633C429.023 5.0633 428.973 5.10336 428.96 5.15983C428.578 6.84252 428.165 8.55634 427.721 10.3013C427.268 12.0473 426.799 13.7448 426.314 15.3938L425.383 18.7888H432.823Z"/> <path d="M447.802 31.8353C447.526 31.8353 447.302 31.6114 447.302 31.3353V0.664794C447.302 0.388652 447.526 0.164795 447.802 0.164795H453.204C453.48 0.164795 453.704 0.388653 453.704 0.664795V25.9518C453.704 26.2279 453.928 26.4518 454.204 26.4518H466.008C466.284 26.4518 466.508 26.6757 466.508 26.9518V31.3353C466.508 31.6114 466.284 31.8353 466.008 31.8353H447.802Z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M472.526 31.3353C472.526 31.6114 472.75 31.8353 473.026 31.8353H478.428C478.704 31.8353 478.928 31.6114 478.928 31.3353V21.1318C478.928 20.8557 479.152 20.6318 479.428 20.6318H483.147C485.411 20.6318 487.464 20.26 489.307 19.5163C491.15 18.7726 492.621 17.6248 493.72 16.0728C494.82 14.5208 495.369 12.5485 495.369 10.1558C495.369 7.6338 494.82 5.66146 493.72 4.2388C492.621 2.7838 491.134 1.74913 489.258 1.1348C487.383 0.48813 485.281 0.164795 482.953 0.164795H473.026C472.75 0.164795 472.526 0.388652 472.526 0.664794V31.3353ZM479.428 15.5393C479.152 15.5393 478.928 15.3154 478.928 15.0393V5.7573C478.928 5.48115 479.152 5.2573 479.428 5.2573H482.517C484.683 5.2573 486.316 5.61296 487.415 6.3243C488.547 7.03563 489.113 8.3128 489.113 10.1558C489.113 11.9341 488.579 13.276 487.512 14.1813C486.478 15.0866 484.877 15.5393 482.711 15.5393H479.428Z"/> ===================================== browser/branding/mb-alpha/content/aboutDialog.css ===================================== @@ -2,6 +2,8 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +@import url("chrome://branding/content/mullvad-branding.css"); + :root { --about-dialog-background-color: #0b2138; --about-dialog-text-color: #fff; @@ -13,4 +15,13 @@ #rightBox { /* Increase the default width to fit the about-wordmark.svg width. */ max-width: 559px; + -moz-context-properties: fill, stroke; + fill: currentColor; + stroke: currentColor; +} + +@media not ((prefers-contrast) or (forced-colors)) { + #rightBox { + stroke: var(--branding-wordmark-accent); + } } ===================================== browser/branding/mb-alpha/content/mullvad-branding.css ===================================== @@ -9,4 +9,5 @@ --branding-link-color-hover: #b3ffe3; /* Green 10 */ --branding-link-color-active: #d1ffee; + --branding-wordmark-accent: #87ffd1; } ===================================== browser/branding/mb-nightly/content/about-wordmark.svg ===================================== @@ -1,9 +1,5 @@ <svg width="601" height="34" viewBox="0 0 601 34" fill="none" xmlns="http://www.w3.org/2000/svg"> -<!-- NOTE: We use "context-fill white" and "context-fill #80EBFF", rather than - - "white" or "#80EBFF" to allow about:mullvad-browser to set the wordmark - - to a single specified color when using a contrast theme. - - If context-fill is not set, this will default to the second color. --> -<g fill="context-fill white"> +<g fill="context-fill"> <path d="M0 1.46332C0 1.1853 0.185367 1 0.463418 1H5.9614C6.33214 1 6.57918 1.12356 6.70254 1.46332L14.6716 19.4402H14.857L22.6718 1.46332C22.7955 1.15443 23.0425 1 23.4132 1H28.8185C29.0966 1 29.2819 1.1853 29.2819 1.46332V32.0425C29.2819 32.3206 29.0966 32.5059 28.8185 32.5059H23.5676C23.2895 32.5059 23.1042 32.3206 23.1042 32.0425V14.313H22.9188L17.0811 27.5947C16.8957 28.0271 16.6177 28.2125 16.2163 28.2125H13.0347C12.6333 28.2125 12.3552 28.0271 12.1699 27.5947L6.33214 14.313H6.14678V32.0425C6.14678 32.3206 5.96141 32.5059 5.68336 32.5059H0.463418C0.185367 32.5059 0 32.3206 0 32.0425V1.46332Z"/> <path d="M36.1389 20.9228V1.46332C36.1389 1.1853 36.3243 1 36.6023 1H42.4711C42.7491 1 42.9345 1.1853 42.9345 1.46332V21.1082C42.9345 24.8455 45.0349 26.9769 48.2161 26.9769C51.3667 26.9769 53.4364 24.8455 53.4364 21.1082V1.46332C53.4364 1.1853 53.6214 1 53.8995 1H59.7682C60.0462 1 60.2316 1.1853 60.2316 1.46332V20.9228C60.2316 28.7376 55.2277 33 48.1854 33C41.1428 33 36.1389 28.7376 36.1389 20.9228Z"/> <path d="M67.5519 1C67.2739 1 67.0889 1.1853 67.0889 1.46332V32.0118C67.0889 32.2895 67.2739 32.4749 67.5519 32.4749H88.0616C88.3397 32.4749 88.5251 32.2895 88.5251 32.0118V26.8842C88.5251 26.6062 88.3397 26.4208 88.0616 26.4208H74.1621C73.9768 26.4208 73.8841 26.3281 73.8841 26.1431V1.46332C73.8841 1.1853 73.6987 1 73.4207 1H67.5519Z"/> @@ -19,7 +15,7 @@ <path d="M359.124 32.4353V1.5647H376.914V4.8588H363.031V14.553H374.749V17.8942H363.031V29.0941H377.384V32.4353H359.124Z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M383.942 1.5647V32.4353H387.846V19.4001H393.451L400.883 32.4353H405.304L397.471 18.9624C398.069 18.8158 398.641 18.6322 399.187 18.4118C400.82 17.7215 402.09 16.7021 403.001 15.353C403.942 14.0039 404.413 12.2942 404.413 10.2236C404.413 8.09016 403.942 6.39605 403.001 5.14115C402.09 3.85486 400.82 2.94507 399.187 2.41175C397.556 1.84705 395.69 1.5647 393.589 1.5647H383.942ZM393.023 16.2001H387.846V4.71762H393.023C395.439 4.71762 397.291 5.14115 398.577 5.9882C399.863 6.80387 400.506 8.21563 400.506 10.2236C400.506 12.2316 399.863 13.7375 398.577 14.7413C397.291 15.7139 395.439 16.2001 393.023 16.2001Z"/> </g> -<g fill="context-fill #80EBFF"> +<g fill="context-stroke"> <path d="M472.399 31.5743C474.695 32.8029 477.282 33.4173 480.159 33.4173C482.358 33.4173 484.347 33.0616 486.125 32.3503C487.853 31.6404 489.243 30.7833 490.293 29.779C490.389 29.6873 490.441 29.5598 490.441 29.4272V15.8268C490.441 15.5506 490.218 15.3268 489.941 15.3268H479.641C479.365 15.3268 479.141 15.5506 479.141 15.8268V20.0648C479.141 20.3409 479.365 20.5648 479.641 20.5648H484.267C484.543 20.5648 484.767 20.7886 484.767 21.0648V26.4812C484.767 26.6347 484.698 26.7811 484.571 26.8684C484.151 27.1593 483.634 27.4023 483.021 27.5973C482.31 27.7913 481.566 27.8883 480.79 27.8883C478.753 27.8883 477.039 27.4518 475.649 26.5788C474.291 25.7058 473.256 24.4609 472.545 22.8443C471.866 21.1953 471.526 19.2229 471.526 16.9273C471.526 14.6963 471.898 12.7724 472.642 11.1558C473.386 9.5391 474.42 8.29426 475.746 7.42126C477.072 6.54826 478.607 6.11176 480.353 6.11176C481.776 6.11176 482.972 6.3381 483.942 6.79076C484.754 7.14249 485.498 7.60743 486.174 8.18556C486.39 8.37084 486.718 8.35754 486.906 8.14303L489.658 4.99826C489.827 4.80454 489.823 4.51294 489.639 4.3328C488.655 3.36898 487.435 2.52313 485.979 1.79526C484.363 0.986929 482.423 0.582764 480.159 0.582764C478.058 0.582764 476.085 0.954596 474.242 1.69826C472.399 2.44193 470.783 3.5251 469.392 4.94776C468.002 6.37043 466.903 8.11643 466.094 10.1858C465.318 12.2228 464.93 14.5508 464.93 17.1698C464.93 20.6941 465.593 23.6688 466.919 26.0938C468.277 28.5188 470.104 30.3456 472.399 31.5743Z"/> <path d="M498.222 32.8353C497.946 32.8353 497.722 32.6114 497.722 32.3353V1.66479C497.722 1.38865 497.946 1.16479 498.222 1.16479H503.624C503.901 1.16479 504.124 1.38865 504.124 1.66479V13.1293C504.124 13.4054 504.348 13.6293 504.624 13.6293H515.507C515.783 13.6293 516.007 13.4054 516.007 13.1293V1.6648C516.007 1.38865 516.231 1.16479 516.507 1.16479H521.86C522.137 1.16479 522.36 1.38865 522.36 1.66479V32.3353C522.36 32.6114 522.137 32.8353 521.86 32.8353H516.507C516.231 32.8353 516.007 32.6114 516.007 32.3353V19.7068C516.007 19.4307 515.783 19.2068 515.507 19.2068H504.624C504.348 19.2068 504.124 19.4307 504.124 19.7068V32.3353C504.124 32.6114 503.901 32.8353 503.624 32.8353H498.222Z"/> <path d="M536.924 32.3353C536.924 32.6114 537.148 32.8353 537.424 32.8353H542.777C543.054 32.8353 543.277 32.6114 543.277 32.3353V7.0483C543.277 6.77215 543.501 6.5483 543.777 6.5483H551.75C552.026 6.5483 552.25 6.32444 552.25 6.0483V1.66479C552.25 1.38865 552.026 1.16479 551.75 1.16479H528.451C528.175 1.16479 527.951 1.38865 527.951 1.66479V6.0483C527.951 6.32444 528.175 6.5483 528.451 6.5483H536.424C536.7 6.5483 536.924 6.77215 536.924 7.0483V32.3353Z"/> ===================================== browser/branding/mb-nightly/content/aboutDialog.css ===================================== @@ -2,6 +2,8 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +@import url("chrome://branding/content/mullvad-branding.css"); + :root { --about-dialog-background-color: #0b2138; --about-dialog-text-color: #fff; @@ -13,4 +15,13 @@ #rightBox { /* Increase the default width to fit the about-wordmark.svg width. */ max-width: 601px; + -moz-context-properties: fill, stroke; + fill: currentColor; + stroke: currentColor; +} + +@media not ((prefers-contrast) or (forced-colors)) { + #rightBox { + stroke: var(--branding-wordmark-accent); + } } ===================================== browser/branding/mb-nightly/content/mullvad-branding.css ===================================== @@ -9,4 +9,5 @@ --branding-link-color-hover: #80ebff; /* Blue 05 */ --branding-link-color-active: #aaf2ff; + --branding-wordmark-accent: #80ebff; } ===================================== browser/branding/mb-release/content/about-wordmark.svg ===================================== @@ -1,9 +1,5 @@ <svg width="406" height="32" viewBox="0 0 406 32" fill="none" xmlns="http://www.w3.org/2000/svg"> -<!-- NOTE: We use "context-fill white", rather than "white" to allow - - about:mullvad-browser to set the wordmark to a specified color when using - - a contrast theme. - - If context-fill is not set, this will default to white. --> -<g fill="context-fill white"> +<g fill="context-fill"> <path d="M0 0.463318C0 0.185301 0.185367 0 0.463418 0H5.9614C6.33214 0 6.57918 0.123556 6.70254 0.463318L14.6716 18.4402H14.857L22.6718 0.463318C22.7955 0.154429 23.0425 0 23.4132 0H28.8185C29.0966 0 29.2819 0.185301 29.2819 0.463318V31.0425C29.2819 31.3206 29.0966 31.5059 28.8185 31.5059H23.5676C23.2895 31.5059 23.1042 31.3206 23.1042 31.0425V13.313H22.9188L17.0811 26.5947C16.8957 27.0271 16.6177 27.2125 16.2163 27.2125H13.0347C12.6333 27.2125 12.3552 27.0271 12.1699 26.5947L6.33214 13.313H6.14678V31.0425C6.14678 31.3206 5.96141 31.5059 5.68336 31.5059H0.463418C0.185367 31.5059 0 31.3206 0 31.0425V0.463318Z"/> <path d="M36.1389 19.9228V0.463318C36.1389 0.185301 36.3243 0 36.6023 0H42.4711C42.7491 0 42.9345 0.185301 42.9345 0.463318V20.1082C42.9345 23.8455 45.0349 25.9769 48.2161 25.9769C51.3667 25.9769 53.4364 23.8455 53.4364 20.1082V0.463318C53.4364 0.185301 53.6214 0 53.8995 0H59.7682C60.0462 0 60.2316 0.185301 60.2316 0.463318V19.9228C60.2316 27.7376 55.2277 32 48.1854 32C41.1428 32 36.1389 27.7376 36.1389 19.9228Z"/> <path d="M67.5519 0C67.2739 0 67.0889 0.185301 67.0889 0.463318V31.0118C67.0889 31.2895 67.2739 31.4749 67.5519 31.4749H88.0616C88.3397 31.4749 88.5251 31.2895 88.5251 31.0118V25.8842C88.5251 25.6062 88.3397 25.4208 88.0616 25.4208H74.1621C73.9768 25.4208 73.8841 25.3281 73.8841 25.1431V0.463318C73.8841 0.185301 73.6987 0 73.4207 0H67.5519Z"/> ===================================== browser/branding/mb-release/content/aboutDialog.css ===================================== @@ -9,3 +9,9 @@ --about-dialog-background-color-bottom: rgba(0, 0, 0, 0.2); --about-dialog-text-color-trademark: #999999; } + +#rightBox { + -moz-context-properties: fill, stroke; + fill: currentColor; + stroke: currentColor; +} ===================================== browser/components/mullvad-browser/content/aboutMullvadBrowser.css ===================================== @@ -50,10 +50,9 @@ body { #heading-wordmark { flex: 0 0 auto; height: 22.4px; - /* When using a contrast theme we want to replace the wordmark's default - * colors with the text color instead. */ - -moz-context-properties: fill; + -moz-context-properties: fill, stroke; fill: currentColor; + stroke: currentColor; } #mullvad-browser-update, @@ -104,9 +103,10 @@ body:not(.no-update) #mullvad-browser-intro { } #heading-wordmark { - /* Have a dark background, so can use about-wordmark.svg's default colors - * instead. */ - -moz-context-properties: none; + /* Have a dark background, so can use fixed colours. + * NOTE: For the stable release, there is no accent color. */ + fill: white; + stroke: var(--branding-wordmark-accent, white); } #footer { View it on GitLab: https://gitlab.torproject.org/tpo/applications/mullvad-browser/-/compare/247... -- View it on GitLab: https://gitlab.torproject.org/tpo/applications/mullvad-browser/-/compare/247... You're receiving this email because of your account on gitlab.torproject.org. Manage all notifications: https://gitlab.torproject.org/-/profile/notifications | Help: https://gitlab.torproject.org/help