--- a/browser/components/nsBrowserGlue.js
+++ b/browser/components/nsBrowserGlue.js
@@ -738,16 +738,19 @@ BrowserGlue.prototype = {
 
     LightweightThemeManager.addBuiltInTheme({
       id: "firefox-compact-light@mozilla.org",
       name: gBrowserBundle.GetStringFromName("lightTheme.name"),
       description: gBrowserBundle.GetStringFromName("lightTheme.description"),
       iconURL: "resource:///chrome/browser/content/browser/defaultthemes/light.icon.svg",
       textcolor: "black",
       accentcolor: "white",
+      popup: "#fff",
+      popup_text: "#0c0c0d",
+      popup_border: "#ccc",
       author: vendorShortName,
     });
     LightweightThemeManager.addBuiltInTheme({
       id: "firefox-compact-dark@mozilla.org",
       name: gBrowserBundle.GetStringFromName("darkTheme.name"),
       description: gBrowserBundle.GetStringFromName("darkTheme.description"),
       iconURL: "resource:///chrome/browser/content/browser/defaultthemes/dark.icon.svg",
       textcolor: "white",

--- a/browser/modules/ThemeVariableMap.jsm
+++ b/browser/modules/ThemeVariableMap.jsm
@@ -72,38 +72,17 @@ const ThemeVariableMap = [
   }],
   ["--lwt-selected-tab-background-color", {
     lwtProperty: "tab_selected"
   }],
   ["--autocomplete-popup-background", {
     lwtProperty: "popup"
   }],
   ["--autocomplete-popup-color", {
-    lwtProperty: "popup_text",
-    processColor(rgbaChannels, element) {
-      const secondaryVariable = "--autocomplete-popup-secondary-color";
-
-      if (!rgbaChannels) {
-        element.removeAttribute("lwt-popup-brighttext");
-        element.style.removeProperty(secondaryVariable);
-        return null;
-      }
-
-      let {r, g, b, a} = rgbaChannels;
-      let luminance = 0.2125 * r + 0.7154 * g + 0.0721 * b;
-
-      if (luminance <= 110) {
-        element.removeAttribute("lwt-popup-brighttext");
-      } else {
-        element.setAttribute("lwt-popup-brighttext", "true");
-      }
-
-      element.style.setProperty(secondaryVariable, `rgba(${r}, ${g}, ${b}, 0.5)`);
-      return `rgba(${r}, ${g}, ${b}, ${a})`;
-    }
+    lwtProperty: "popup_text"
   }],
   ["--autocomplete-popup-border-color", {
     lwtProperty: "popup_border"
   }],
   ["--autocomplete-popup-highlight-background", {
     lwtProperty: "popup_highlight"
   }],
   ["--autocomplete-popup-highlight-color", {

--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -604,17 +604,17 @@ toolbarbutton[constrain-size="true"][cui
 .PanelUI-remotetabs-instruction-label {
   /* If you change the margin here, the min-height of the synced tabs panel
     (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
     need adjusting (see bug 1248506) */
   margin: 0;
   text-align: center;
   text-shadow: none;
   max-width: 15em;
-  color: GrayText;
+  color: var(--panel-disabled-color);
 }
 
 /* The boxes with "instructions" get extra top and bottom padding for space
    around the illustration and buttons */
 .PanelUI-remotetabs-instruction-box {
   /* If you change the padding here, the min-height of the synced tabs panel
     (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
     need adjusting (see bug 1248506) */
@@ -646,17 +646,17 @@ toolbarbutton[constrain-size="true"][cui
   background-color: #002275;
 }
 
 .remotetabs-promo-link {
   margin: 0;
 }
 
 .PanelUI-remotetabs-notabsforclient-label {
-  color: GrayText;
+  color: var(--panel-disabled-color);
   /* This margin is to line this label up with the labels in toolbarbuttons. */
   margin-left: 28px;
 }
 
 #PanelUI-remotetabs[mainview] .PanelUI-remotetabs-notabsforclient-label {
   margin-left: 32px;
 }
 
@@ -702,17 +702,17 @@ toolbarbutton[constrain-size="true"][cui
                    53px + /* margin of .fxaSyncIllustration */
                    30px + /* margin of .PanelUI-remotetabs-button */
                    16px + /* padding of .PanelUI-remotetabs-button */
                    30px + /* padding of .PanelUI-remotetabs-instruction-box */
                    11em);
 }
 
 #PanelUI-remotetabs-tabslist > label[itemtype="client"] {
-  color: GrayText;
+  color: var(--panel-disabled-color);
 }
 
 /* Collapse the non-active vboxes in the remotetabs deck to use only the
    height the active box needs */
 #PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane,
 #PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching,
 #PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane {
   visibility: collapse;
@@ -858,17 +858,17 @@ panelview .toolbarbutton-1,
 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
   font: menu;
 }
 
 .subviewbutton[shortcut]::after {
   content: attr(shortcut);
   float: right;
-  opacity: 0.5;
+  color: var(--panel-disabled-color);
 }
 
 .PanelUI-subView .subviewbutton-nav::after {
   -moz-context-properties: fill, fill-opacity;
   content: url(chrome://browser/skin/back-12.svg);
   fill: currentColor;
   fill-opacity: 0.6;
   float: right;
@@ -989,17 +989,17 @@ panelmultiview .toolbaritem-combined-but
 }
 
 .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
   font-size: 1em;
   padding-inline-start: 0;
 }
 
 .subview-subheader {
-  color: GrayText;
+  color: var(--panel-disabled-color);
 }
 
 .subview-subheader,
 .panel-subview-footer {
   font: menu;
 }
 
 panelview .toolbarbutton-1 {
@@ -1132,17 +1132,17 @@ menuitem.panel-subview-footer@menuStateA
   margin-inline-start: 6px;
   margin-inline-end: 7px;
 }
 
 .subviewbutton > .menu-accel-container {
   -moz-box-pack: end;
   margin-inline-start: 10px;
   margin-inline-end: auto;
-  color: GrayText;
+  color: var(--panel-disabled-color);
 }
 
 #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"],
 #PanelUI-historyItems > toolbarbutton {
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
   -moz-context-properties: fill;
   fill: currentColor;
 }
@@ -1374,17 +1374,17 @@ toolbarpaletteitem[place="menu-panel"] >
   border: 4px solid #177ee6;
 }
 
 #PanelUI-panic-explanations {
   padding: 10px 10px 0;
 }
 
 #PanelUI-panic-actionlist-main-label {
-  color: GrayText;
+  color: var(--panel-disabled-color);
   font-size: 0.9em;
 }
 
 .PanelUI-panic-actionlist {
   padding-inline-start: 20px;
   padding-top: 2px;
   padding-bottom: 2px;
   background-size: 16px 16px;
@@ -1543,17 +1543,17 @@ toolbarpaletteitem[place="menu-panel"] >
 }
 
 .subviewbutton.download > .toolbarbutton-icon {
   width: 32px;
   height: 32px;
 }
 
 .subviewbutton.download > .toolbarbutton-text > .status-text {
-  color: GrayText;
+  color: var(--panel-disabled-color);
   font-size: .9em;
 }
 
 .subviewbutton.download > .action-button {
   -moz-appearance: none; /* To avoid native Windows hover styling */
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: 1;

--- a/browser/themes/shared/searchbar.inc.css
+++ b/browser/themes/shared/searchbar.inc.css
@@ -44,17 +44,17 @@
 }
 
 .search-panel-header {
   font-weight: normal;
   background-color: var(--arrowpanel-dimmed);
   border-top: 1px solid var(--panel-separator-color);
   margin: 0;
   padding: 3px 6px;
-  color: var(--autocomplete-popup-secondary-color);
+  color: var(--panel-disabled-color);
 }
 
 .search-panel-header > label {
   margin-top: 2px !important;
   margin-bottom: 1px !important;
 }
 
 .search-panel-current-input > label {
@@ -79,17 +79,17 @@
   min-width: 48px;
   height: 32px;
   margin: 0;
   padding: 0;
   background: linear-gradient(transparent 15%, var(--panel-separator-color) 15%, var(--panel-separator-color) 85%, transparent 85%);
   background-size: 1px auto;
   background-repeat: no-repeat;
   background-position: right center;
-  color: var(--autocomplete-popup-secondary-color);
+  color: var(--panel-disabled-color);
 }
 
 .searchbar-engine-one-off-item:-moz-locale-dir(rtl) {
   background-position-x: left;
 }
 
 .searchbar-engine-one-off-item:not(.last-row) {
   box-sizing: content-box;

--- a/browser/themes/shared/urlbar-autocomplete.inc.css
+++ b/browser/themes/shared/urlbar-autocomplete.inc.css
@@ -5,23 +5,19 @@
 %endif
 
 :root {
   --autocomplete-popup-background: -moz-field;
   --autocomplete-popup-color: -moz-fieldtext;
   --autocomplete-popup-border-color: ThreeDShadow;
   --autocomplete-popup-highlight-background: Highlight;
   --autocomplete-popup-highlight-color: HighlightText;
-  --autocomplete-popup-secondary-color: GrayText;
 }
 
-:root:-moz-lwtheme {
-  --autocomplete-popup-background: #fff;
-  --autocomplete-popup-color: #0c0c0d;
-  --autocomplete-popup-secondary-color: #737373;
+:root[lwt-popup-darktext] {
   --urlbar-popup-url-color: hsl(210, 77%, 47%);
   --urlbar-popup-action-color: hsl(178, 100%, 28%);
 }
 
 :root[lwt-popup-brighttext] {
   --urlbar-popup-url-color: #0a84ff;
   --urlbar-popup-action-color: #30e60b;
 }
@@ -59,17 +55,17 @@
 
 :root[uidensity=touch] #PopupAutoCompleteRichResult .autocomplete-richlistitem {
   min-height: 40px;
 }
 
 /* Awesomebar popup items */
 
 .ac-separator:not([selected=true]) {
-  color: var(--autocomplete-popup-secondary-color);
+  color: var(--panel-disabled-color);
 }
 
 .ac-url:not([selected=true]) {
   color: var(--urlbar-popup-url-color);
 }
 
 .ac-action:not([selected=true]) {
   color: var(--urlbar-popup-action-color);

--- a/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js
@@ -159,19 +159,26 @@ add_task(async function test_popup_url()
   Assert.equal(window.getComputedStyle(actionText).color,
                `rgb(${hexToRGB(POPUP_ACTION_COLOR_DARK).join(", ")})`,
                `Urlbar popup action color should be set to ${POPUP_ACTION_COLOR_DARK}`);
 
   let root = document.documentElement;
   Assert.equal(root.getAttribute("lwt-popup-brighttext"),
                "",
                "brighttext should not be set!");
+  Assert.equal(root.getAttribute("lwt-popup-darktext"),
+               "true",
+               "darktext should be set!");
 
   await extension.unload();
 
+  Assert.equal(root.hasAttribute("lwt-popup-darktext"),
+               false,
+               "lwt-popup-darktext attribute should be removed");
+
   // Load a manifest with popup_text being bright. Test for bright text properties.
   extension = ExtensionTestUtils.loadExtension({
     manifest: {
       "theme": {
         "images": {
           "headerURL": "image1.png",
         },
         "colors": {
@@ -211,24 +218,30 @@ add_task(async function test_popup_url()
   let separator = document.getAnonymousElementByAttribute(results[1], "anonid", "separator");
   Assert.equal(window.getComputedStyle(separator).color,
                `rgba(${hexToRGB(POPUP_TEXT_COLOR_BRIGHT).join(", ")}, 0.5)`,
                `Urlbar popup separator color should be set to ${POPUP_TEXT_COLOR_BRIGHT} with alpha`);
 
   Assert.equal(root.getAttribute("lwt-popup-brighttext"),
                "true",
                "brighttext should be set to true!");
+  Assert.equal(root.getAttribute("lwt-popup-darktext"),
+               "",
+               "darktext should not be set!");
 
   await extension.unload();
 
   // Check to see if popup-brighttext and secondary color are not set after
   // unload of theme
   Assert.equal(root.getAttribute("lwt-popup-brighttext"),
                "",
                "brighttext should not be set!");
+  Assert.equal(root.getAttribute("lwt-popup-dakrtext"),
+               "",
+               "darktext should not be set!");
 
   // Calculate what GrayText should be. May differ between platforms.
   let span = document.createElement("span");
   span.style.color = "GrayText";
   let GRAY_TEXT = window.getComputedStyle(span).color;
 
   separator = document.getAnonymousElementByAttribute(results[1], "anonid", "separator");
   Assert.equal(window.getComputedStyle(separator).color,

--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -23,43 +23,64 @@ const toolkitVariableMap = [
   ["--lwt-text-color", {
     lwtProperty: "textcolor",
     processColor(rgbaChannels, element) {
       if (!rgbaChannels) {
         rgbaChannels = {r: 0, g: 0, b: 0};
       }
       // Remove the alpha channel
       const {r, g, b} = rgbaChannels;
-      const luminance = _getLuminance(r, g, b);
-      element.setAttribute("lwthemetextcolor", luminance <= 110 ? "dark" : "bright");
+      element.setAttribute("lwthemetextcolor", _isTextColorDark(r, g, b) ? "dark" : "bright");
       return `rgba(${r}, ${g}, ${b})`;
     }
   }],
   ["--arrowpanel-background", {
     lwtProperty: "popup"
   }],
   ["--arrowpanel-color", {
-    lwtProperty: "popup_text"
+    lwtProperty: "popup_text",
+    processColor(rgbaChannels, element) {
+      const disabledColorVariable = "--panel-disabled-color";
+
+      if (!rgbaChannels) {
+        element.removeAttribute("lwt-popup-brighttext");
+        element.removeAttribute("lwt-popup-darktext");
+        element.style.removeProperty(disabledColorVariable);
+        return null;
+      }
+
+      let {r, g, b, a} = rgbaChannels;
+
+      if (_isTextColorDark(r, g, b)) {
+        element.removeAttribute("lwt-popup-brighttext");
+        element.setAttribute("lwt-popup-darktext", "true");
+      } else {
+        element.removeAttribute("lwt-popup-darktext");
+        element.setAttribute("lwt-popup-brighttext", "true");
+      }
+
+      element.style.setProperty(disabledColorVariable, `rgba(${r}, ${g}, ${b}, 0.5)`);
+      return `rgba(${r}, ${g}, ${b}, ${a})`;
+    }
   }],
   ["--arrowpanel-border-color", {
     lwtProperty: "popup_border"
   }],
   ["--lwt-toolbar-field-background-color", {
     lwtProperty: "toolbar_field"
   }],
   ["--lwt-toolbar-field-color", {
     lwtProperty: "toolbar_field_text",
     processColor(rgbaChannels, element) {
       if (!rgbaChannels) {
         element.removeAttribute("lwt-toolbar-field-brighttext");
         return null;
       }
       const {r, g, b, a} = rgbaChannels;
-      const luminance = _getLuminance(r, g, b);
-      if (luminance <= 110) {
+      if (_isTextColorDark(r, g, b)) {
         element.removeAttribute("lwt-toolbar-field-brighttext");
       } else {
         element.setAttribute("lwt-toolbar-field-brighttext", "true");
       }
       return `rgba(${r}, ${g}, ${b}, ${a})`;
     }
   }],
 ];
@@ -258,11 +279,11 @@ function _parseRGBA(aColorString) {
   return {
     r: rgba[0],
     g: rgba[1],
     b: rgba[2],
     a: 3 in rgba ? rgba[3] : 1,
   };
 }
 
-function _getLuminance(r, g, b) {
-  return 0.2125 * r + 0.7154 * g + 0.0721 * b;
+function _isTextColorDark(r, g, b) {
+  return (0.2125 * r + 0.7154 * g + 0.0721 * b) <= 110;
 }

--- a/toolkit/themes/linux/global/global.css
+++ b/toolkit/themes/linux/global/global.css
@@ -28,16 +28,17 @@ progressmeter[mode="undetermined"] {
 }
 
 /* ::::: Variables ::::: */
 :root {
   --arrowpanel-padding: 10px;
   --arrowpanel-background: -moz-field;
   --arrowpanel-color: -moz-fieldText;
   --arrowpanel-border-color: ThreeDShadow;
+  --panel-disabled-color: GrayText;
 }
 
 /* ::::: root elements ::::: */
 
 window,
 page,
 dialog,
 wizard {

--- a/toolkit/themes/osx/global/global.css
+++ b/toolkit/themes/osx/global/global.css
@@ -16,16 +16,18 @@ menulist > menupopup {
 
 /* ::::: Variables ::::: */
 :root {
   --arrowpanel-padding: 16px;
   --arrowpanel-background: hsla(0,0%,99%,.975);
   --arrowpanel-color: hsl(0,0%,10%);
   --arrowpanel-border-color: hsla(210,4%,10%,.05);
   --arrowpanel-border-radius: 3.5px;
+  --panel-disabled-color: GrayText;
+
   --focus-ring-box-shadow: @focusRingShadow@;
 }
 
 /* ::::: root elements ::::: */
 
 window,
 page,
 dialog,

--- a/toolkit/themes/windows/global/global.css
+++ b/toolkit/themes/windows/global/global.css
@@ -18,16 +18,17 @@ menulist > menupopup {
 }
 
 /* ::::: Variables ::::: */
 :root {
   --arrowpanel-padding: 10px;
   --arrowpanel-background: -moz-field;
   --arrowpanel-color: -moz-FieldText;
   --arrowpanel-border-color: ThreeDShadow;
+  --panel-disabled-color: GrayText;
 }
 
 @media (-moz-windows-default-theme) {
   :root {
     --arrowpanel-border-color: hsla(210,4%,10%,.2);
   }
 }