flags: Increase contrast of placeholder text on search input

Bug: 1083307
Change-Id: I5bcc6fb7ca061db2b43c5f8a87876ef0f30a4cf2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2580427Reviewed-by: dpapad <dpapad@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#835365}

components/flags_ui/resources/flags.css

@@ -23,11 +23,13 @@ html {
   --google-blue-600: rgb(26, 115, 232);
   --google-blue-700: rgb(25, 103, 210);
   --google-grey-100: rgb(241, 243, 244);
-  --google-grey-200: rgb(232, 234, 237);
+  --google-grey-200-rgb: 232, 234, 237;
+  --google-grey-200: rgb(var(--google-grey-200-rgb));
   --google-grey-300: rgb(218, 220, 224);
   --google-grey-500: rgb(154, 160, 166);
   --google-grey-700: rgb(95, 99, 104);
-  --google-grey-900: rgb(32, 33, 36);
+  --google-grey-900-rgb: 32, 33, 36;
+  --google-grey-900: rgb(var(--google-grey-900-rgb));
   /* --google-grey-900 + 4% white blended together. */
   --google-grey-900-white-4-percent: #292a2d;
   --google-red-300: rgb(242, 139, 130);
@@ -180,10 +182,18 @@ button {
   width: 100%;
 }
 
+#search::placeholder {
+  color: rgba(var(--google-grey-900-rgb), .71);
+}
+
 @media (prefers-color-scheme: dark) {
   #search {
     background-image: url(../../../ui/webui/resources/images/dark/icon_search.svg);
   }
+
+  #search::placeholder {
+    color: rgba(var(--google-grey-200-rgb), .51);
+  }
 }
 
 #search:focus {