Bug 1449707 - Port bug 1417883 and bug 1423757 to TB (theming improvements). r=jorgk
authorRichard Marti <richard.marti>
Sun, 01 Apr 2018 11:10:00 +0200
changeset 29410 9335b650974e2c9550900659278303531c398b29
parent 29409 1cf4c920817e23fbc521741ccc04d5189c2be71d
child 29411 90deaec8720133dcfa0a41782ed5e86227f3fd06
push idunknown
push userunknown
push dateunknown
reviewersjorgk
bugs1449707, 1417883, 1423757
Bug 1449707 - Port bug 1417883 and bug 1423757 to TB (theming improvements). r=jorgk Related bugs: bug 1417883: Allow theming autocomplete popups bug 1423757: Allow theming toolbar fields focused state
mail/base/modules/ThemeVariableMap.jsm
mail/themes/linux/mail/messenger.css
mail/themes/linux/mail/searchBox.css
mail/themes/osx/mail/messenger.css
mail/themes/osx/mail/searchBox.css
mail/themes/shared/mail/messenger.css
mail/themes/windows/mail/messenger.css
mail/themes/windows/mail/searchBox.css
--- a/mail/base/modules/ThemeVariableMap.jsm
+++ b/mail/base/modules/ThemeVariableMap.jsm
@@ -1,28 +1,94 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 var EXPORTED_SYMBOLS = ["ThemeVariableMap"];
 
 const ThemeVariableMap = [
-  ["--lwt-accent-color-inactive", "accentcolorInactive"],
-  ["--lwt-background-alignment", "backgroundsAlignment"],
-  ["--lwt-background-tiling", "backgroundsTiling"],
-  ["--tab-loading-fill", "tab_loading"],
-  ["--lwt-tab-text", "tab_text"],
-  ["--tab-line-color", "tab_line"],
-  ["--toolbar-bgcolor", "toolbarColor"],
-  ["--toolbar-color", "toolbar_text"],
-  ["--url-and-searchbar-background-color", "toolbar_field"],
-  ["--url-and-searchbar-color", "toolbar_field_text"],
-  ["--lwt-toolbar-field-border-color", "toolbar_field_border"],
-  ["--urlbar-separator-color", "toolbar_field_separator"],
-  ["--tabs-border-color", "toolbar_top_separator"],
-  ["--lwt-toolbar-vertical-separator", "toolbar_vertical_separator"],
-  ["--toolbox-border-bottom-color", "toolbar_bottom_separator"],
-  ["--lwt-toolbarbutton-icon-fill", "icon_color"],
-  ["--lwt-toolbarbutton-icon-fill-attention", "icon_attention_color"],
-  ["--lwt-toolbarbutton-hover-background", "button_background_hover"],
-  ["--lwt-toolbarbutton-active-background", "button_background_active"],
-  ["--lwt-selected-tab-background-color", "tab_selected"],
+  ["--lwt-accent-color-inactive", {
+    lwtProperty: "accentcolorInactive"
+  }],
+  ["--lwt-background-alignment", {
+    isColor: false,
+    lwtProperty: "backgroundsAlignment"
+  }],
+  ["--lwt-background-tiling", {
+    isColor: false,
+    lwtProperty: "backgroundsTiling"
+  }],
+  ["--tab-loading-fill", {
+    lwtProperty: "tab_loading",
+  }],
+  ["--lwt-tab-text", {
+    lwtProperty: "tab_text"
+  }],
+  ["--tab-line-color", {
+    lwtProperty: "tab_line",
+  }],
+  ["--toolbar-bgcolor", {
+    lwtProperty: "toolbarColor"
+  }],
+  ["--toolbar-color", {
+    lwtProperty: "toolbar_text"
+  }],
+  ["--url-and-searchbar-background-color", {
+    lwtProperty: "toolbar_field"
+  }],
+  ["--url-and-searchbar-color", {
+    lwtProperty: "toolbar_field_text"
+  }],
+  ["--lwt-toolbar-field-border-color", {
+    lwtProperty: "toolbar_field_border"
+  }],
+  ["--lwt-toolbar-field-focus", {
+    lwtProperty: "toolbar_field_focus"
+  }],
+  ["--lwt-toolbar-field-focus-color", {
+    lwtProperty: "toolbar_field_text_focus"
+  }],
+  ["--toolbar-field-focus-border-color", {
+    lwtProperty: "toolbar_field_border_focus"
+  }],
+  ["--urlbar-separator-color", {
+    lwtProperty: "toolbar_field_separator"
+  }],
+  ["--tabs-border-color", {
+    lwtProperty: "toolbar_top_separator",
+  }],
+  ["--lwt-toolbar-vertical-separator", {
+    lwtProperty: "toolbar_vertical_separator"
+  }],
+  ["--toolbox-border-bottom-color", {
+    lwtProperty: "toolbar_bottom_separator"
+  }],
+  ["--lwt-toolbarbutton-icon-fill", {
+    lwtProperty: "icon_color"
+  }],
+  ["--lwt-toolbarbutton-icon-fill-attention", {
+    lwtProperty: "icon_attention_color"
+  }],
+  ["--lwt-toolbarbutton-hover-background", {
+    lwtProperty: "button_background_hover"
+  }],
+  ["--lwt-toolbarbutton-active-background", {
+    lwtProperty: "button_background_active"
+  }],
+  ["--lwt-selected-tab-background-color", {
+    lwtProperty: "tab_selected"
+  }],
+  ["--autocomplete-popup-background", {
+    lwtProperty: "popup"
+  }],
+  ["--autocomplete-popup-color", {
+    lwtProperty: "popup_text"
+  }],
+  ["--autocomplete-popup-border-color", {
+    lwtProperty: "popup_border"
+  }],
+  ["--autocomplete-popup-highlight-background", {
+    lwtProperty: "popup_highlight"
+  }],
+  ["--autocomplete-popup-highlight-color", {
+    lwtProperty: "popup_highlight_text"
+  }],
 ];
--- a/mail/themes/linux/mail/messenger.css
+++ b/mail/themes/linux/mail/messenger.css
@@ -37,16 +37,18 @@
   --toolbarbutton-active-boxshadow: 0 1px 1px rgba(0, 0, 0, .1) inset, 0 0 1px rgba(0, 0, 0, .3) inset;
 
   --toolbarbutton-checkedhover-backgroundcolor: rgba(200, 200, 200, .5);
   --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #0a84ff);
 
   --lwt-header-image: none;
   --arrowpanel-dimmed: hsla(0, 0%, 80%, .3);
   --arrowpanel-dimmed-further: hsla(0, 0%, 80%, .45);
+  --urlbar-popup-url-color: -moz-nativehyperlinktext;
+  --urlbar-popup-action-color: -moz-nativehyperlinktext;
 }
 
 :root:-moz-lwtheme {
   --toolbar-bgcolor: rgba(255,255,255,.4);
   --toolbar-bgimage: none;
 
   --toolbarbutton-icon-fill-opacity: 1;
 }
--- a/mail/themes/linux/mail/searchBox.css
+++ b/mail/themes/linux/mail/searchBox.css
@@ -1,13 +1,16 @@
 /*
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
+:root {
+  --toolbar-field-focus-border-color: Highlight;
+}
 
 .quick-search-textbox {
   padding-top: 1px;
 }
 
 .searchBox > hbox {
   -moz-box-ordinal-group: 1;
 }
@@ -72,74 +75,82 @@ textbox:not([searchbutton]) > .textbox-i
 }
 
 .searchBox[focused="true"],
 #view-task-edit-field[focused="true"],
 #unifinder-task-edit-field[focused="true"]  {
   border-color: Highlight;
 }
 
-/* special treatment because this boxes are on the main toolbars */
+/* special treatment because these boxes are on themable toolbars */
 #searchInput:-moz-lwtheme,
 #IMSearchInput:-moz-lwtheme,
 #peopleSearchInput:-moz-lwtheme,
 .remote-gloda-search:-moz-lwtheme {
   background-color: var(--url-and-searchbar-background-color, hsla(0,0%,100%,.8));
   color: var(--url-and-searchbar-color, black);
 }
 
 #searchInput:not([focused="true"]):-moz-lwtheme,
 #IMSearchInput:not([focused="true"]):-moz-lwtheme,
 #peopleSearchInput:not([focused="true"]):-moz-lwtheme,
 .remote-gloda-search:not([focused="true"]):-moz-lwtheme {
   border-color: var(--lwt-toolbar-field-border-color, hsla(240,5%,5%,.25));
 }
-
-#searchInput:not([focused="true"]):-moz-lwtheme:hover,
-#IMSearchInput:not([focused="true"]):-moz-lwtheme:hover,
-#peopleSearchInput:not([focused="true"]):-moz-lwtheme:hover,
-.remote-gloda-search:not([focused="true"]):-moz-lwtheme:hover {
-  border-color: var(--lwt-toolbar-field-border-color, hsla(240,5%,5%,.35));
+#searchInput:-moz-lwtheme:hover,
+#IMSearchInput:-moz-lwtheme:hover,
+#peopleSearchInput:-moz-lwtheme:hover,
+.remote-gloda-search:-moz-lwtheme:hover {
+  background-color: var(--url-and-searchbar-background-color, white);
 }
 
-#searchInput:-moz-lwtheme:hover,
 #searchInput:-moz-lwtheme[focused="true"],
-#IMSearchInput:-moz-lwtheme:hover,
 #IMSearchInput:-moz-lwtheme[focused="true"],
-#peopleSearchInput:-moz-lwtheme:hover,
 #peopleSearchInput:-moz-lwtheme[focused="true"],
-.remote-gloda-search:-moz-lwtheme:hover,
 .remote-gloda-search:-moz-lwtheme[focused="true"] {
-  background-color: var(--url-and-searchbar-background-color, white);
+  background-color: var(--lwt-toolbar-field-focus, var(--url-and-searchbar-background-color, white));
+  color: var(--lwt-toolbar-field-focus-color, var(--url-and-searchbar-color, black));
+  border-color: var(--toolbar-field-focus-border-color);
 }
 
 #PopupGlodaAutocomplete {
   margin-top: -1px;
   border: 1px solid ThreeDShadow;
-  color: -moz-FieldText;
-  background-color: -moz-Field;
+  background: var(--autocomplete-popup-background);
+  color: var(--autocomplete-popup-color);
+  border-color: var(--autocomplete-popup-border-color);
   -moz-appearance: none;
 }
 
 #PopupGlodaAutocomplete .ac-url {
   display: -moz-box;
   margin-bottom: 2px;
 }
 
+.ac-url:not([selected=true]) > .ac-url-text {
+  color: var(--urlbar-popup-url-color);
+}
+
+.ac-action:not([selected=true]) > .ac-url-text {
+  color: var(--urlbar-popup-action-color);
+}
+
 #PopupGlodaAutocomplete > .autocomplete-richlistbox {
   padding: 2px 0;
+  color: inherit;
+  background-color: inherit;
 }
 
 .autocomplete-richlistitem[type^="gloda-"] {
   margin-right: 2px;
   margin-left: 2px;
   padding-inline-start: 10px;
   border-radius: 2px;
 }
 
 .autocomplete-richlistitem[type^="gloda-"]:hover {
   background-color: hsla(0,0%,80%,.3);
 }
 
 .autocomplete-richlistitem[type^="gloda-"][selected] {
-  background-color: Highlight;
-  color: HighlightText;
+  background: var(--autocomplete-popup-highlight-background);
+  color: var(--autocomplete-popup-highlight-color);
 }
--- a/mail/themes/osx/mail/messenger.css
+++ b/mail/themes/osx/mail/messenger.css
@@ -42,16 +42,18 @@
   --toolbarbutton-inactive-bordercolor: rgba(0, 0, 0, 0.1);
   --toolbarbutton-inactive-boxshadow: 0 1px 0 hsla(0, 0%, 0%, .05) inset;
   --toolbarbutton-checkedhover-backgroundcolor: hsla(0, 0%, 0%, .09);
   --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #0a84ff);
 
   --lwt-header-image: none;
   --arrowpanel-dimmed: hsla(210, 4%, 10%, .07);
   --arrowpanel-dimmed-further: hsla(210, 4%, 10%, .12);
+  --urlbar-popup-url-color: hsl(210, 77%, 47%);
+  --urlbar-popup-action-color: hsl(178, 100%, 28%);
 }
 
 :root:-moz-window-inactive {
   --toolbar-bgcolor: -moz-mac-chrome-inactive;
 }
 
 :root:-moz-lwtheme {
   --toolbar-bgcolor: rgba(255,255,255,.4);
--- a/mail/themes/osx/mail/searchBox.css
+++ b/mail/themes/osx/mail/searchBox.css
@@ -1,14 +1,18 @@
 /*
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
 
+:root {
+  --toolbar-field-focus-border-color: -moz-mac-focusring;
+}
+
 .quick-search-button-image {
   padding: 0;
 }
 
 .searchBox {
   margin-top: 3px;
   margin-bottom: 2px;
   -moz-appearance: none;
@@ -29,17 +33,17 @@
   box-shadow: 0 1px 6px rgba(0,0,0,.1);
 }
 
 .searchBox[focused="true"] {
   border-color: -moz-mac-focusring;
   box-shadow: var(--focus-ring-box-shadow);
 }
 
-/* special treatment because this boxes are on the main toolbars */
+/* special treatment because these boxes are on themable toolbars */
 #searchInput,
 #IMSearchInput,
 #peopleSearchInput {
   margin-top: 2px;
   margin-bottom: 3px;
 }
 #searchInput:-moz-lwtheme,
 #IMSearchInput:-moz-lwtheme,
@@ -51,32 +55,32 @@
 
 #searchInput:not([focused="true"]):-moz-lwtheme,
 #IMSearchInput:not([focused="true"]):-moz-lwtheme,
 #peopleSearchInput:not([focused="true"]):-moz-lwtheme,
 .remote-gloda-search:not([focused="true"]):-moz-lwtheme {
   border-color: var(--lwt-toolbar-field-border-color, hsla(240,5%,5%,.25));
 }
 
-#searchInput:not([focused="true"]):-moz-lwtheme:hover,
-#IMSearchInput:not([focused="true"]):-moz-lwtheme:hover,
-#peopleSearchInput:not([focused="true"]):-moz-lwtheme:hover,
-.remote-gloda-search:not([focused="true"]):-moz-lwtheme:hover {
-  border-color: var(--lwt-toolbar-field-border-color, hsla(240,5%,5%,.35));
+#searchInput:-moz-lwtheme:hover,
+#IMSearchInput:-moz-lwtheme:hover,
+#peopleSearchInput:-moz-lwtheme:hover,
+.remote-gloda-search:-moz-lwtheme:hover {
+  background-color: var(--url-and-searchbar-background-color, white);
 }
 
-#searchInput:-moz-lwtheme:hover,
 #searchInput:-moz-lwtheme[focused="true"],
-#IMSearchInput:-moz-lwtheme:hover,
 #IMSearchInput:-moz-lwtheme[focused="true"],
-#peopleSearchInput:-moz-lwtheme:hover,
 #peopleSearchInput:-moz-lwtheme[focused="true"],
-.remote-gloda-search:-moz-lwtheme:hover,
 .remote-gloda-search:-moz-lwtheme[focused="true"] {
-  background-color: var(--url-and-searchbar-background-color, white);
+  background-color: var(--lwt-toolbar-field-focus, var(--url-and-searchbar-background-color, white));
+  color: var(--lwt-toolbar-field-focus-color, var(--url-and-searchbar-color, black));
+  border-color: var(--toolbar-field-focus-border-color);
+  box-shadow: 0 0 0 1px var(--toolbar-field-focus-border-color) inset,
+              0 0 0 1px var(--toolbar-field-focus-border-color);
 }
 
 .searchBox > .textbox-input-box:before {
   /* Because of bug 853415, we need to ordinal this to the first position: */
   -moz-box-ordinal-group: 0;
   content: '';
   display: block;
   -moz-box-align: center;
@@ -96,37 +100,48 @@
 
 .remote-gloda-search-container {
   padding-top: 1px;
   padding-bottom: 1px;
 }
 
 #PopupGlodaAutocomplete {
   margin-top: -1px;
-  color: -moz-FieldText;
-  background-color: -moz-Field;
+  background: var(--autocomplete-popup-background);
+  color: var(--autocomplete-popup-color);
+  border-color: var(--autocomplete-popup-border-color);
   -moz-appearance: none;
 }
 
 #PopupGlodaAutocomplete .ac-url {
   display: -moz-box;
   margin-bottom: 2px;
 }
 
+.ac-url:not([selected=true]) > .ac-url-text {
+  color: var(--urlbar-popup-url-color);
+}
+
+.ac-action:not([selected=true]) > .ac-url-text {
+  color: var(--urlbar-popup-action-color);
+}
+
 #PopupGlodaAutocomplete > .autocomplete-richlistbox {
   padding: 2px 0;
+  color: inherit;
+  background-color: inherit;
 }
 
 .autocomplete-richlistitem[type^="gloda-"] {
   margin-right: 2px;
   margin-left: 2px;
   padding-inline-start: 13px;
   border-radius: 2px;
 }
 
 .autocomplete-richlistitem[type^="gloda-"]:hover {
   background-color: hsla(210,4%,10%,.07);
 }
 
 .autocomplete-richlistitem[type^="gloda-"][selected] {
-  background-color: Highlight;
-  color: HighlightText;
+  background: var(--autocomplete-popup-highlight-background);
+  color: var(--autocomplete-popup-highlight-color);
 }
--- a/mail/themes/shared/mail/messenger.css
+++ b/mail/themes/shared/mail/messenger.css
@@ -1,20 +1,37 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
+: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;
+}
+
 :root:-moz-lwtheme {
   --toolbarbutton-icon-fill-opacity: 1;
+  --autocomplete-popup-background: #fff;
+  --autocomplete-popup-color: #0c0c0d;
+  --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;
 }
 
 description.error {
-  color: #FF0000;
+  color: #f00;
 }
 
 toolbar[printpreview="true"] {
   -moz-binding: url("chrome://global/content/printPreviewBindings.xml#printpreviewtoolbar");
 }
 
 #tabbar-toolbar {
   -moz-appearance: none;
--- a/mail/themes/windows/mail/messenger.css
+++ b/mail/themes/windows/mail/messenger.css
@@ -45,16 +45,26 @@
 @media (-moz-windows-default-theme) {
   :root {
     --tabs-border-color: rgba(0,0,0,.3);
     --tabline-color: #0a84ff;
 
     --toolbar-non-lwt-bgcolor: #f9f9fa;
     --toolbar-non-lwt-textcolor: #0c0c0d;
     --toolbar-non-lwt-bgimage: none;
+
+    --urlbar-popup-url-color: hsl(210, 77%, 47%);
+    --urlbar-popup-action-color: hsl(178, 100%, 28%);
+  }
+}
+
+@media (-moz-windows-default-theme: 0) {
+  :root {
+    --urlbar-popup-url-color: -moz-nativehyperlinktext;
+    --urlbar-popup-action-color: -moz-nativehyperlinktext;
   }
 }
 
 :root:-moz-lwtheme {
   --tabs-border-color: rgba(0,0,0,.3);
 
   --toolbar-bgcolor: rgba(255,255,255,.4);
   --toolbar-bgimage: none;
--- a/mail/themes/windows/mail/searchBox.css
+++ b/mail/themes/windows/mail/searchBox.css
@@ -1,12 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+:root {
+  --toolbar-field-focus-border-color: Highlight;
+}
+
 /*
  * The emptytext style would appear to use italics.  This is causing
  * problems for the search box because it has no minwidth and is flexy, so
  * removing the emptytext causes the size of the box to change and this is silly
  * and undesirable.  This change is being made to maintain the generally
  * accepted status quo while reducing breakage.  This will cause visual
  * inconsistency with the quick filter bar unless it gets a change like this
  * too.
@@ -114,17 +118,17 @@ textbox:not([searchbutton]) > .textbox-i
 }
 
 .searchBox[focused="true"],
 #view-task-edit-field[focused="true"],
 #unifinder-task-edit-field[focused="true"]  {
   border-color: Highlight;
 }
 
-/* special treatment because this boxes are on the main toolbars */
+/* special treatment because these boxes are on themable toolbars */
 #searchInput,
 #IMSearchInput,
 #peopleSearchInput,
 .remote-gloda-search {
   min-height: 26px;
 }
 
 #searchInput:-moz-lwtheme,
@@ -137,57 +141,66 @@ textbox:not([searchbutton]) > .textbox-i
 
 #searchInput:not([focused="true"]):-moz-lwtheme,
 #IMSearchInput:not([focused="true"]):-moz-lwtheme,
 #peopleSearchInput:not([focused="true"]):-moz-lwtheme,
 .remote-gloda-search:not([focused="true"]):-moz-lwtheme {
   border-color: var(--lwt-toolbar-field-border-color, hsla(240,5%,5%,.25));
 }
 
-#searchInput:not([focused="true"]):-moz-lwtheme:hover,
-#IMSearchInput:not([focused="true"]):-moz-lwtheme:hover,
-#peopleSearchInput:not([focused="true"]):-moz-lwtheme:hover,
-.remote-gloda-search:not([focused="true"]):-moz-lwtheme:hover {
-  border-color: var(--lwt-toolbar-field-border-color, hsla(240,5%,5%,.35));
+#searchInput:-moz-lwtheme:hover,
+#IMSearchInput:-moz-lwtheme:hover,
+#peopleSearchInput:-moz-lwtheme:hover,
+.remote-gloda-search:-moz-lwtheme:hover {
+  background-color: var(--url-and-searchbar-background-color, white);
 }
 
-#searchInput:-moz-lwtheme:hover,
 #searchInput:-moz-lwtheme[focused="true"],
-#IMSearchInput:-moz-lwtheme:hover,
 #IMSearchInput:-moz-lwtheme[focused="true"],
-#peopleSearchInput:-moz-lwtheme:hover,
 #peopleSearchInput:-moz-lwtheme[focused="true"],
-.remote-gloda-search:-moz-lwtheme:hover,
 .remote-gloda-search:-moz-lwtheme[focused="true"] {
-  background-color: var(--url-and-searchbar-background-color, white);
+  background-color: var(--lwt-toolbar-field-focus, var(--url-and-searchbar-background-color, white));
+  color: var(--lwt-toolbar-field-focus-color, var(--url-and-searchbar-color, black));
+  border-color: var(--toolbar-field-focus-border-color);
 }
 
 #PopupGlodaAutocomplete {
   -moz-appearance: none;
   margin-top: -1px;
-  background-color: -moz-Field;
-  color: -moz-FieldText;
+  background: var(--autocomplete-popup-background);
+  color: var(--autocomplete-popup-color);
+  border-color: var(--autocomplete-popup-border-color);
 }
 
 #PopupGlodaAutocomplete > .autocomplete-richlistbox {
   padding: 2px 0;
+  color: inherit;
+  background-color: inherit;
 }
 
 #PopupGlodaAutocomplete .ac-url {
   display: -moz-box;
   margin-bottom: 2px;
 }
 
+.ac-url:not([selected=true]) > .ac-url-text {
+  color: var(--urlbar-popup-url-color);
+}
+
+.ac-action:not([selected=true]) > .ac-url-text {
+  color: var(--urlbar-popup-action-color);
+}
+
 .autocomplete-richlistitem[type^="gloda-"] {
   margin-right: 2px;
   margin-left: 2px;
   padding-inline-start: 12px;
   border-radius: 2px;
 }
 
 .autocomplete-richlistitem[type^="gloda-"]:hover {
   background-color: hsla(0,0%,80%,.3);
 }
 
 .autocomplete-richlistitem[type^="gloda-"][selected] {
-  background-color: Highlight;
-  color: HighlightText;
+  background: var(--autocomplete-popup-highlight-background);
+  color: var(--autocomplete-popup-highlight-color);
 }