1 files changed, 46 insertions, 4 deletions

diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css
index b62710cc71..8ed2ec042d 100644
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -3,12 +3,54 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import url("chrome://browser/skin/browser-shared.css");
-@import url("chrome://browser/skin/browser-custom-colors.css");
-
-@namespace html url("http://www.w3.org/1999/xhtml");
+/* stylelint-disable-next-line media-query-no-invalid */
+@import url("chrome://browser/skin/browser-custom-colors.css") not (-moz-bool-pref: "browser.theme.macos.native-theme");
 
 :root {
   --arrowpanel-field-background: light-dark(rgba(249, 249, 250, .3), rgba(12, 12, 13, .3));
+
+  /* On macOS, top level windows are always opaque. This gives us the right
+   * default background color, without confusing Gecko about whether the window
+   * is transparent or not. */
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-unified-toolbar-window;
+}
+
+/* stylelint-disable-next-line media-query-no-invalid */
+@media (-moz-bool-pref: "browser.theme.macos.native-theme") {
+  /* TODO: Share this with Linux, which effectively does ~the same */
+  @media not (prefers-contrast) {
+    :root:not([lwtheme]) {
+      --toolbar-field-border-color: transparent;
+      --toolbar-field-background-color: light-dark(rgba(0, 0, 0, .05), rgba(0, 0, 0, .3));
+      --toolbar-field-color: inherit;
+      @media (prefers-color-scheme: light) {
+        --toolbar-non-lwt-bgcolor: white;
+        --urlbar-box-bgcolor: #fafafa;
+      }
+      @media (prefers-color-scheme: dark) {
+        --tab-selected-bgcolor: color-mix(in srgb, -moz-dialog 75%, white);
+      }
+    }
+  }
+
+  /* Don't make the toolbox vibrant when in full-screen. macOS fullscreen has a
+   * native titlebar outside of the window (revealed on hover) anyways. */
+  :root[tabsintitlebar]:not([lwtheme], [macOSNativeFullscreen]) #navigator-toolbox {
+    background-color: transparent;
+
+    /* This is conceptually a background, but putting this on a
+     * pseudo-element avoids it from suppressing the chrome-content separator
+     * border, etc */
+    &::after {
+      -moz-default-appearance: -moz-window-titlebar;
+      appearance: auto;
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+    }
+  }
 }
 
 #browser,
@@ -231,7 +273,7 @@ moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left {
     text-shadow: inherit;
 
     @media (prefers-color-scheme: light) {
-      &:not(:-moz-lwtheme) {
+      :root:not([lwtheme]) & {
         /* overriding tabbox.css */
         color: hsl(240, 5%, 5%);
       }