morgan pushed to branch tor-browser-140.2.0esr-15.0-1 at The Tor Project / Applications / Tor Browser Commits: 398f7ef4 by Henry Wilkes at 2025-09-01T15:08:11+00:00 fixup! TB 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection TB 42025: Use new purple colours. - - - - - ad2c3e94 by Henry Wilkes at 2025-09-01T15:08:11+00:00 fixup! TB 27476: Implement about:torconnect captive portal within Tor Browser TB 42025: Use new purple colours. - - - - - 3cf3111e by Henry Wilkes at 2025-09-01T15:08:11+00:00 fixup! TB 41817: tor-browser semantic colors. TB 42025: Use new purple colours. - - - - - 3 changed files: - browser/components/torpreferences/content/torPreferences.css - toolkit/components/torconnect/content/torConnectTitlebarStatus.css - toolkit/themes/shared/tor-colors.css Changes: ===================================== browser/components/torpreferences/content/torPreferences.css ===================================== @@ -20,7 +20,10 @@ button.spoof-button-disabled { width: 16px; height: 16px; -moz-context-properties: fill; - fill: var(--tor-accent-color); + /* Use --tor-text-color. This will have good contrast for this small icon + * against the background. And it will match the surrounding text for high + * contrast and forced colour themes. */ + fill: var(--tor-text-color); content: url("chrome://global/skin/icons/loading.svg"); } @@ -168,7 +171,7 @@ button.spoof-button-disabled { * using it for text colors, so we only enable these rules when not using a * high contrast theme or forced colors. */ .bridge-status-badge.bridge-status-connected { - color: var(--tor-accent-color); + color: var(--tor-text-color); } .bridge-status-badge.bridge-status-current-built-in { ===================================== toolkit/components/torconnect/content/torConnectTitlebarStatus.css ===================================== @@ -44,7 +44,7 @@ } #tor-connect-titlebar-status.tor-connect-status-connected { - color: var(--tor-accent-color); + color: var(--tor-text-color); } @keyframes onion-not-connected-to-connected { ===================================== toolkit/themes/shared/tor-colors.css ===================================== @@ -1,21 +1,13 @@ @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; :root { - /* Photon colors not available in Firefox. */ - --purple-30: #c069ff; - --purple-40: #ad3bff; - --purple-50: #9400ff; - --purple-60: #8000d7; - --purple-70: #6200a4; - --purple-80: #440071; - --purple-90: #25003e; - /* On light backgrounds. */ - --tor-accent-color-light: var(--purple-60); - --tor-accent-color-hover-light: var(--purple-70); - --tor-accent-color-active-light: var(--purple-80); - - /* Acorn color grey light 05. */ + --tor-accent-color-light: var(--color-purple-60); + --tor-accent-color-hover-light: var(--color-purple-70); + --tor-accent-color-active-light: var(--color-purple-80); + /* Color for text on --background-color-canvas. */ + --tor-text-color-light: var(--color-purple-60); + /* Buttons. */ --tor-button-text-color-light: var(--color-gray-05); --tor-button-text-color-hover-light: var(--color-gray-05); --tor-button-text-color-active-light: var(--color-gray-05); @@ -23,26 +15,27 @@ --tor-button-background-color-hover-light: var(--tor-accent-color-hover-light); --tor-button-background-color-active-light: var(--tor-accent-color-active-light); --tor-focus-outline-color-light: var(--tor-accent-color-light); + /* Links. */ --tor-link-color-light: var(--tor-accent-color-light); --tor-link-color-hover-light: var(--tor-accent-color-hover-light); --tor-link-color-active-light: var(--tor-accent-color-active-light); /* On dark backgrounds. */ - /* TODO: Need a dark theme purple color that gets *lighter* with hover and - * active states, see tor-browser#42025 */ - --tor-accent-color-dark: var(--purple-30); - --tor-accent-color-hover-dark: var(--purple-40); - --tor-accent-color-active-dark: var(--purple-50); - - /* TODO: Use a dark text color for dark theme. tor-browser#41787. */ - --tor-button-text-color-dark: var(--color-gray-05); - --tor-button-text-color-hover-dark: var(--color-gray-05); - --tor-button-text-color-active-dark: var(--color-gray-05); + --tor-accent-color-dark: var(--color-purple-30); + --tor-accent-color-hover-dark: var(--color-purple-20); + --tor-accent-color-active-dark: var(--color-purple-10); + /* Color for text on --background-color-canvas. */ + --tor-text-color-dark: var(--color-purple-20); + /* Buttons. */ + --tor-button-text-color-dark: var(--color-gray-100); + --tor-button-text-color-hover-dark: var(--color-gray-100); + --tor-button-text-color-active-dark: var(--color-gray-100); --tor-button-background-color-dark: var(--tor-accent-color-dark); --tor-button-background-color-hover-dark: var(--tor-accent-color-hover-dark); --tor-button-background-color-active-dark: var(--tor-accent-color-active-dark); --tor-focus-outline-color-dark: var(--tor-accent-color-dark); + /* Links. */ --tor-link-color-dark: var(--tor-accent-color-dark); --tor-link-color-hover-dark: var(--tor-accent-color-hover-dark); --tor-link-color-active-dark: var(--tor-accent-color-active-dark); @@ -61,6 +54,10 @@ var(--tor-accent-color-active-light), var(--tor-accent-color-active-dark) ); + --tor-text-color: light-dark( + var(--tor-text-color-light), + var(--tor-text-color-dark) + ); --tor-button-text-color: light-dark( var(--tor-button-text-color-light), var(--tor-button-text-color-dark) @@ -110,6 +107,9 @@ --tor-accent-color-hover: var(--color-accent-primary-hover); --tor-accent-color-active: var(--color-accent-primary-active); + /* Match surrounding text. */ + --tor-text-color: currentColor; + /* Use Firefox design system primary button colors. */ --tor-button-text-color: var(--button-text-color-primary); --tor-button-text-color-hover: var(--button-text-color-primary-hover); View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/2e79fc2... -- View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/2e79fc2... You're receiving this email because of your account on gitlab.torproject.org.