morgan pushed to branch tor-browser-128.1.0esr-14.0-1 at The Tor Project / Applications / Tor Browser

Commits: a0742a1b by Henry Wilkes at 2024-08-21T02:05:06+00:00 Bug 41817: tor-browser semantic colors.

- - - - - 8639aaa5 by Henry Wilkes at 2024-08-21T02:05:06+00:00 fixup! Bug 7494: Create local home page for TBB.

Bug 41817: Use semantic tor color names in about:tor.

- - - - - 3cf73e78 by Henry Wilkes at 2024-08-21T02:05:06+00:00 fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection

Bug 41817: Use semantic color names for tor preferences.

- - - - - 2595f644 by Henry Wilkes at 2024-08-21T02:05:06+00:00 fixup! Bug 27476: Implement about:torconnect captive portal within Tor Browser

Bug 41817: Use semantic tor color names for tor buttons.

Also, for about:torconnect:

+ Use dark-mode variant for the buttons colors. + Add purple focus outline to the select element to match the buttons. + Stop applying the "primary" class to the cancel button. + Remove the checkbox styling since the checkbox was replaced with a moz-toggle-button. + Removed the "danger-button" class since it does not sufficiently telegraph a distinguished action, and has no dark-mode variant. + Use warning color from common-shared.css. + Drop --grey-40 for breadcrumb arrows, which did not adjust to theme.

- - - - - 6d76bafb by Henry Wilkes at 2024-08-21T02:05:06+00:00 fixup! Bug 21952: Implement Onion-Location

- - - - - 4eaccbd8 by Henry Wilkes at 2024-08-21T02:05:06+00:00 fixup! Bug 30237: Add v3 onion services client authentication prompt

Bug 41817: Drop browser-colors.css.

- - - - - 6be73a77 by Henry Wilkes at 2024-08-21T02:05:06+00:00 fixup! Bug 40925: Implemented the Security Level component

Bug 41817: Drop browser-colors.css.

- - - - - d45ef470 by Henry Wilkes at 2024-08-21T02:05:06+00:00 fixup! Bug 41659: Add canonical color definitions to base-browser

Bug 41817: Drop browser-colors.css.

- - - - -

16 changed files:

- browser/base/content/navigator-toolbox.inc.xhtml - browser/components/abouttor/content/aboutTor.css - browser/components/onionservices/content/authPreferences.css - browser/components/onionservices/content/onionlocation-urlbar.inc.xhtml - browser/components/securitylevel/content/securityLevelPanel.css - browser/components/torpreferences/content/torPreferences.css - browser/themes/shared/browser-shared.css - browser/themes/shared/tor-urlbar-button.css - toolkit/components/torconnect/content/aboutTorConnect.css - toolkit/components/torconnect/content/aboutTorConnect.html - toolkit/components/torconnect/content/aboutTorConnect.js - toolkit/components/torconnect/content/torConnectTitlebarStatus.css - − toolkit/themes/shared/browser-colors.css - toolkit/themes/shared/desktop-jar.inc.mn - toolkit/themes/shared/minimal-toolkit.jar.inc.mn - + toolkit/themes/shared/tor-colors.css

Changes:

===================================== browser/base/content/navigator-toolbox.inc.xhtml ===================================== @@ -431,7 +431,7 @@

<hbox id="tor-connect-urlbar-button" role="button" - class="tor-urlbar-button" + class="tor-button tor-urlbar-button" hidden="true"> <label id="tor-connect-urlbar-button-label"/> </hbox>

===================================== browser/components/abouttor/content/aboutTor.css ===================================== @@ -1,4 +1,4 @@ -@import url("chrome://global/skin/browser-colors.css"); +@import url("chrome://global/skin/tor-colors.css");

body { margin: 0; @@ -179,7 +179,7 @@ body:not(.show-tor-check) #tor-check { /* On dark background */ :root { background-color: #2C0449; - --focus-outline-color: var(--purple-30); + --focus-outline-color: var(--tor-focus-outline-color-dark); --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); --in-content-focus-outline-color: var(--focus-outline-color); --in-content-focus-outline: var(--focus-outline); @@ -194,14 +194,9 @@ body:not(.show-tor-check) #tor-check { --in-content-page-color: #fbfbfe; --in-content-text-color: #fbfbfe; color: var(--in-content-text-color); - --link-color: var(--purple-30); - /* FIXME: Since we have a dark background, the color should get lighter on - * hover, but --purple-40 and --pruple-50 are darker than --purple-30. - * However, we do not have a standard lighter purple in our current set of - * Photon colors. - * See tor-browser#42025 */ - --link-color-hover: var(--purple-40); - --link-color-active: var(--purple-50); + --link-color: var(--tor-link-color-dark); + --link-color-hover: var(--tor-link-color-hover-dark); + --link-color-active: var(--tor-link-color-active-dark); }

#search-form { @@ -209,7 +204,9 @@ body:not(.show-tor-check) #tor-check { }

#search-form.search-input-focus-visible { - border-color: var(--purple-60); + /* Use a light-themed inner-border to contrast with the dark-themed + * focus outline. */ + border-color: var(--tor-focus-outline-color-light); }

#search-form.onionized-search:not(.search-input-focus-visible) { @@ -218,17 +215,17 @@ body:not(.show-tor-check) #tor-check {

/* Light background. */ #search-form > * { - --focus-outline-color: var(--purple-60); + --focus-outline-color: var(--tor-focus-outline-color-light); --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); --in-content-focus-outline-color: var(--focus-outline-color); --in-content-focus-outline: var(--focus-outline); /* Variables used for --toggle- variables. */ - --color-accent-primary: var(--purple-60); - --color-accent-primary-hover: var(--purple-70); - --color-accent-primary-active: var(--purple-80); + --color-accent-primary: var(--tor-button-background-color-light); + --color-accent-primary-hover: var(--tor-button-background-color-hover-light); + --color-accent-primary-active: var(--tor-button-background-color-active-light); }

#search-form.onionized-search #onionize-toggle { - color: var(--purple-60); + color: var(--tor-link-color-light); } }

===================================== browser/components/onionservices/content/authPreferences.css ===================================== @@ -1,7 +1,5 @@ /* Copyright (c) 2020, The Tor Project, Inc. */

-@import url("chrome://global/skin/browser-colors.css"); - #onionservices-savedkeys-dialog { min-width: 45em; } @@ -23,5 +21,5 @@ margin-inline-end: 4px; list-style-image: url("chrome://global/skin/icons/warning.svg"); -moz-context-properties: fill; - fill: var(--warning-color); + fill: var(--in-content-warning-icon-color); }

===================================== browser/components/onionservices/content/onionlocation-urlbar.inc.xhtml ===================================== @@ -1,7 +1,7 @@ # Copyright (c) 2020, The Tor Project, Inc.

<hbox id="onion-location-box" - class="tor-urlbar-button" + class="tor-button tor-urlbar-button" role="button" hidden="true" onclick="OnionLocationParent.buttonClick(event);">

===================================== browser/components/securitylevel/content/securityLevelPanel.css ===================================== @@ -51,7 +51,7 @@

#securityLevel-custom { border-radius: 4px; - background-color: var(--warning-color); + background-color: var(--warning-icon-bgcolor); color: black; padding: 0.4em 0.5em; margin-inline-start: 1em;

===================================== browser/components/torpreferences/content/torPreferences.css ===================================== @@ -1,4 +1,4 @@ -@import url("chrome://global/skin/browser-colors.css"); +@import url("chrome://global/skin/tor-colors.css");

#category-connection > .category-icon { @@ -137,13 +137,7 @@ button.spoof-button-disabled { }

.bridge-status-badge.bridge-status-connected { - color: var(--purple-60); -} - -@media (prefers-color-scheme: dark) { - .bridge-status-badge.bridge-status-connected { - color: var(--purple-30); - } + color: var(--tor-accent-color); }

.bridge-status-badge.bridge-status-current-built-in { @@ -990,7 +984,7 @@ hbox#torPreferences-requestBridge-incorrectCaptchaHbox { image#torPreferences-requestBridge-errorIcon { list-style-image: url("chrome://global/skin/icons/warning.svg"); -moz-context-properties: fill; - fill: var(--warning-color); + fill: var(--in-content-warning-icon-color); }

groupbox#torPreferences-bridges-group textarea {

===================================== browser/themes/shared/browser-shared.css ===================================== @@ -26,8 +26,8 @@ @import url("chrome://browser/skin/customizableui/customizeMode.css"); @import url("chrome://browser/skin/UITour.css"); @import url("chrome://browser/skin/formautofill-notification.css"); -@import url("chrome://global/skin/browser-colors.css"); @import url("chrome://browser/skin/tor-branding.css"); +@import url("chrome://global/skin/tor-colors.css"); @import url("chrome://browser/skin/tor-urlbar-button.css"); @import url("chrome://browser/skin/onionlocation.css");

===================================== browser/themes/shared/tor-urlbar-button.css ===================================== @@ -1,9 +1,4 @@ .tor-urlbar-button:not([hidden]) { - --tor-urlbar-button-background-color: var(--purple-60); - background-color: var(--tor-urlbar-button-background-color); - /* FIXME: Use different colors for light and dark theme, rather than "white". - * See tor-browser#41787 */ - color: white; display: flex; align-items: center; gap: 0.5em; @@ -31,8 +26,7 @@ * urlbar background, but we keep the rounded corners. */ outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); - /* Use the background color for the outline, same as in-content buttons. */ - outline-color: var(--tor-urlbar-button-background-color); + outline-color: var(--tor-focus-outline-color); /* Calculate the difference between the button's border area and the outline * area. */ --tor-urlbar-focus-outline-difference: calc( @@ -64,31 +58,9 @@ display: none; }

-.tor-urlbar-button:hover { - --tor-urlbar-button-background-color: var(--purple-70); -} - -.tor-urlbar-button:hover:active { - --tor-urlbar-button-background-color: var(--purple-80); -} - -@media (prefers-color-scheme: dark) { - .tor-urlbar-button { - --tor-urlbar-button-background-color: var(--purple-50); - } - - .tor-urlbar-button:hover { - --tor-urlbar-button-background-color: var(--purple-60); - } - - .tor-urlbar-button:hover:active { - --tor-urlbar-button-background-color: var(--purple-70); - } -} - /* Make the button look plain like the identity #urlbar-label-box. */ .tor-urlbar-button.tor-urlbar-button-plain { - --tor-urlbar-button-background-color: var(--urlbar-box-bgcolor); + background-color: var(--urlbar-box-bgcolor); color: var(--urlbar-box-text-color); }

@@ -97,11 +69,11 @@ }

.tor-urlbar-button.tor-urlbar-button-plain:hover { - --tor-urlbar-button-background-color: var(--urlbar-box-hover-bgcolor); + background-color: var(--urlbar-box-hover-bgcolor); color: var(--urlbar-box-hover-text-color); }

.tor-urlbar-button.tor-urlbar-button-plain:hover:active { - --tor-urlbar-button-background-color: var(--urlbar-box-active-bgcolor); + background-color: var(--urlbar-box-active-bgcolor); color: var(--urlbar-box-hover-text-color); }

===================================== toolkit/components/torconnect/content/aboutTorConnect.css ===================================== @@ -2,7 +2,7 @@ /* Copyright (c) 2021, The Tor Project, Inc. */

@import url("chrome://global/skin/error-pages.css"); -@import url("chrome://global/skin/browser-colors.css"); +@import url("chrome://global/skin/tor-colors.css");

:root { --onion-opacity: 1; @@ -14,23 +14,10 @@ html { height: 100%; }

-input[type="checkbox"]:focus, select:focus { - outline: none!important; - box-shadow: 0 0 0 3px var(--purple-30) !important; - border: 1px var(--purple-80) solid !important; -} - -@media (prefers-color-scheme: dark) { - input[type="checkbox"]:focus, select:focus { - box-shadow: 0 0 0 3px var(--purple-50)!important; - } -} - #breadcrumbs { display: flex; align-items: center; margin: 0 0 24px 0; - color: var(--grey-40); }

#breadcrumbs.hidden { @@ -129,23 +116,8 @@ input[type="checkbox"]:focus, select:focus { list-style-image: url("chrome://global/content/torconnect/bridge.svg"); }

-button { - --purple-button-text-color: rgb(251,251,254); - --in-content-primary-button-text-color: var(--purple-button-text-color); - --in-content-primary-button-background: var(--purple-60); - --in-content-primary-button-text-color-hover: var(--purple-button-text-color); - --in-content-primary-button-background-hover: var(--purple-70); - --in-content-primary-button-text-color-active: var(--purple-button-text-color); - --in-content-primary-button-background-active: var(--purple-80); - --in-content-focus-outline-color: var(--purple-60); - fill: white; -} - -#cancelButton { - color: var(--in-content-button-text-color); - border: 1px solid var(--in-content-button-border-color); - border-radius: 4px; - background-color: var(--in-content-button-background); +button, select { + --in-content-focus-outline-color: var(--tor-focus-outline-color); }

#locationDropdownLabel { @@ -157,18 +129,6 @@ button { color: var(--text-color-error) }

-#tryBridgeButton.danger-button { - background-color: var(--purple-70); -} - -#tryBridgeButton.danger-button:hover { - background-color: var(--purple-80); -} - -#tryBridgeButton.danger-button:active { - background-color: var(--purple-90); -} - /* this follows similar css in error-pages.css for buttons */ @media only screen and (min-width: 480px) { form#locationDropdown { @@ -195,35 +155,6 @@ form#locationDropdown select { font-weight: 700; }

-/* checkbox css */ -input[type="checkbox"]:not(:disabled) { - background-color: var(--grey-20)!important; -} - -input[type="checkbox"]:not(:disabled):checked { - background-color: var(--purple-60)!important; - color: white; - fill: white; -} - -input[type="checkbox"]:not(:disabled):hover { - /* override firefox's default blue border on hover */ - border-color: var(--purple-70); - background-color: var(--grey-30)!important; -} - -input[type="checkbox"]:not(:disabled):hover:checked { - background-color: var(--purple-70)!important; -} - -input[type="checkbox"]:not(:disabled):active { - background-color: var(--grey-40)!important; -} - -input[type="checkbox"]:not(:disabled):active:checked { - background-color: var(--purple-80)!important; -} - :root { --progressbar-shadow-start: rgba(255, 255, 255, 0.7); --progressbar-gradient: linear-gradient(90deg, #FC00FF 0%, #00DBDE 50%, #FC00FF 100%); @@ -352,7 +283,7 @@ body.aboutTorConnect .title {

.title.location { background-image: url("chrome://global/content/torconnect/connection-location.svg"); - stroke: var(--warning-color); + stroke: var(--in-content-warning-icon-color); }

:root {

===================================== toolkit/components/torconnect/content/aboutTorConnect.html ===================================== @@ -75,8 +75,8 @@ <button id="restartButton" hidden="true"></button> <button id="configureButton" hidden="true"></button> <button id="cancelButton" hidden="true"></button> - <button id="connectButton" class="primary" hidden="true"></button> - <button id="tryBridgeButton" class="primary" hidden="true"></button> + <button id="connectButton" hidden="true"></button> + <button id="tryBridgeButton" hidden="true"></button> </span> </div> </div>

===================================== toolkit/components/torconnect/content/aboutTorConnect.js ===================================== @@ -188,8 +188,9 @@ class AboutTorConnect { Element helper methods */

- show(element, primary) { - element.classList.toggle("primary", primary !== undefined && primary); + show(element, primary = false) { + element.classList.toggle("primary", primary); + element.classList.toggle("tor-button", primary); element.removeAttribute("hidden"); }

@@ -554,7 +555,7 @@ class AboutTorConnect { } else { this.hide(this.elements.viewLogButton); } - this.show(this.elements.cancelButton, true); + this.show(this.elements.cancelButton); if (state.StateChanged) { this.elements.cancelButton.focus(); } @@ -687,7 +688,6 @@ class AboutTorConnect { this.show(this.elements.locationDropdown); this.elements.locationDropdownLabel.classList.toggle("error", isError); this.show(this.elements.tryBridgeButton, true); - this.elements.tryBridgeButton.classList.toggle("danger-button", isError); if (buttonLabel !== undefined) { this.elements.tryBridgeButton.textContent = buttonLabel; }

===================================== toolkit/components/torconnect/content/torConnectTitlebarStatus.css ===================================== @@ -44,13 +44,7 @@ }

#tor-connect-titlebar-status.tor-connect-status-connected { - color: var(--purple-60); -} - -@media (prefers-color-scheme: dark) { - #tor-connect-titlebar-status.tor-connect-status-connected { - color: var(--purple-30); - } + color: var(--tor-accent-color); }

@keyframes onion-not-connected-to-connected {

===================================== toolkit/themes/shared/browser-colors.css deleted ===================================== @@ -1,97 +0,0 @@ -:root { - /* photon colors, not all of them are available for whatever reason - in firefox, so here they are */ - - --magenta-50: #ff1ad9; - --magenta-60: #ed00b5; - --magenta-70: #b5007f; - --magenta-80: #7d004f; - --magenta-90: #440027; - - --purple-30: #c069ff; - --purple-40: #ad3bff; - --purple-50: #9400ff; - --purple-60: #8000d7; - --purple-70: #6200a4; - --purple-80: #440071; - --purple-90: #25003e; - - --blue-40: #45a1ff; - --blue-50: #0a84ff; - --blue-50-a30: rgba(10, 132, 255, 0.3); - --blue-60: #0060df; - --blue-70: #003eaa; - --blue-80: #002275; - --blue-90: #000f40; - - --teal-50: #00feff; - --teal-60: #00c8d7; - --teal-70: #008ea4; - --teal-80: #005a71; - --teal-90: #002d3e; - - --green-50: #30e60b; - --green-60: #12bc00; - --green-70: #058b00; - --green-80: #006504; - --green-90: #003706; - - --yellow-50: #ffe900; - --yellow-60: #d7b600; - --yellow-70: #a47f00; - --yellow-80: #715100; - --yellow-90: #3e2800; - - --red-50: #ff0039; - --red-60: #d70022; - --red-70: #a4000f; - --red-80: #5a0002; - --red-90: #3e0200; - - --orange-50: #ff9400; - --orange-60: #d76e00; - --orange-70: #a44900; - --orange-80: #712b00; - --orange-90: #3e1300; - - --grey-10: #f9f9fa; - --grey-10-a10: rgba(249, 249, 250, 0.1); - --grey-10-a20: rgba(249, 249, 250, 0.2); - --grey-10-a40: rgba(249, 249, 250, 0.4); - --grey-10-a60: rgba(249, 249, 250, 0.6); - --grey-10-a80: rgba(249, 249, 250, 0.8); - --grey-20: #ededf0; - --grey-30: #d7d7db; - --grey-40: #b1b1b3; - --grey-50: #737373; - --grey-60: #4a4a4f; - --grey-70: #38383d; - --grey-80: #2a2a2e; - --grey-90: #0c0c0d; - --grey-90-a05: rgba(12, 12, 13, 0.05); - --grey-90-a10: rgba(12, 12, 13, 0.1); - --grey-90-a20: rgba(12, 12, 13, 0.2); - --grey-90-a30: rgba(12, 12, 13, 0.3); - --grey-90-a40: rgba(12, 12, 13, 0.4); - --grey-90-a50: rgba(12, 12, 13, 0.5); - --grey-90-a60: rgba(12, 12, 13, 0.6); - --grey-90-a70: rgba(12, 12, 13, 0.7); - --grey-90-a80: rgba(12, 12, 13, 0.8); - --grey-90-a90: rgba(12, 12, 13, 0.9); - - --ink-70: #363959; - --ink-80: #202340; - --ink-90: #0f1126; - - --white-100: #ffffff; - - /* TODO: Switch to some Firefox variable, once Mozilla adds one for this - color. Matches --warning-icon-bgcolor (but not on the dark theme variant). */ - --warning-color: #ffa436; -} - -@media (prefers-color-scheme: dark) { - :root { - --warning-color: #ffbd4f; - } -}

===================================== toolkit/themes/shared/desktop-jar.inc.mn ===================================== @@ -46,6 +46,7 @@ skin/classic/global/popupnotification.css (../../shared/popupnotification.css) skin/classic/global/splitter.css (../../shared/splitter.css) skin/classic/global/toolbarbutton.css (../../shared/toolbarbutton.css) + skin/classic/global/tor-colors.css (../../shared/tor-colors.css) skin/classic/global/tree/tree.css (../../shared/tree/tree.css) skin/classic/global/dirListing/dirListing.css (../../shared/dirListing/dirListing.css) #ifdef XP_MACOSX

===================================== toolkit/themes/shared/minimal-toolkit.jar.inc.mn ===================================== @@ -45,5 +45,3 @@ toolkit.jar: # Text recognition widget

skin/classic/global/media/textrecognition.css (../../shared/media/textrecognition.css) - - skin/classic/global/browser-colors.css (../../shared/browser-colors.css)

===================================== toolkit/themes/shared/tor-colors.css ===================================== @@ -0,0 +1,120 @@ +: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-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); + --tor-button-background-color-light: var(--tor-accent-color-light); + --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); + --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-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); + --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); + + + /* Generic colors that adapt to theme. */ + --tor-accent-color: light-dark( + var(--tor-accent-color-light), + var(--tor-accent-color-dark) + ); + --tor-accent-color-hover: light-dark( + var(--tor-accent-color-hover-light), + var(--tor-accent-color-hover-dark) + ); + --tor-accent-color-active: light-dark( + var(--tor-accent-color-active-light), + var(--tor-accent-color-active-dark) + ); + --tor-button-text-color: light-dark( + var(--tor-button-text-color-light), + var(--tor-button-text-color-dark) + ); + --tor-button-text-color-hover: light-dark( + var(--tor-button-text-color-hover-light), + var(--tor-button-text-color-hover-dark) + ); + --tor-button-text-color-active: light-dark( + var(--tor-button-text-color-active-light), + var(--tor-button-text-color-active-dark) + ); + --tor-button-background-color: light-dark( + var(--tor-button-background-color-light), + var(--tor-button-background-color-dark) + ); + --tor-button-background-color-hover: light-dark( + var(--tor-button-background-color-hover-light), + var(--tor-button-background-color-hover-dark) + ); + --tor-button-background-color-active: light-dark( + var(--tor-button-background-color-active-light), + var(--tor-button-background-color-active-dark) + ); + --tor-focus-outline-color: light-dark( + var(--tor-focus-outline-color-light), + var(--tor-focus-outline-color-dark) + ); + --tor-link-color: light-dark( + var(--tor-link-color-light), + var(--tor-link-color-dark) + ); + --tor-link-color-hover: light-dark( + var(--tor-link-color-hover-light), + var(--tor-link-color-hover-dark) + ); + --tor-link-color-active: light-dark( + var(--tor-link-color-active-light), + var(--tor-link-color-active-dark) + ); +} + +button.tor-button, +.tor-button { + color: var(--tor-button-text-color); + background-color: var(--tor-button-background-color); +} + +button.tor-button:hover, +.tor-button:hover { + color: var(--tor-button-text-color-hover); + background-color: var(--tor-button-background-color-hover); +} + +button.tor-button:hover:active, +.tor-button:hover:active { + color: var(--tor-button-text-color-active); + background-color: var(--tor-button-background-color-active); +}

View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/908dda0...