Bug 1704073: Make the contrast of placeholders and labels on searchbar stronger.r=mak

Since the opacity is not 0 for placeholder originaly[1], just changing the color
does not make the same color as figma, we set the opacity as well.
[1] https://searchfox.org/mozilla-central/rev/d9f6cded535d202a9ade4a530e653e659bcb5bbd/layout/style/res/forms.css#214

Differential Revision: https://phabricator.services.mozilla.com/D111784

browser/themes/shared/searchbar.inc.css

@@ -26,6 +26,13 @@
   opacity: .6;
 }
 
+/* Make the contrast stronger in dark mode */
+@media (-moz-proton) {
+:root[lwt-toolbar-field-focus-brighttext] .search-panel-header > label {
+  opacity: 1;
+}
+}
+
 /**
  * The borders of the various elements are specified as follows.
  *

browser/themes/shared/urlbar-searchbar.inc.css

@@ -1067,3 +1067,12 @@ moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left::after {
 .searchbar-engine-one-off-add-engine[image]:hover > .button-box > .button-icon {
   opacity: 1;
 }
+
+/* Set opacity of placeholder for urlbar and searchbar in dark mode during
+   focusing on to make the contrast stronger */
+@media (-moz-proton) {
+:root[lwt-toolbar-field-focus-brighttext] #urlbar[focused="true"] #urlbar-input::placeholder,
+:root[lwt-toolbar-field-focus-brighttext] #searchbar:focus-within .searchbar-textbox::placeholder {
+  opacity: 1;
+}
+}