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.

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/themes/shared/tor-urlbar-button.css

 .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 {