[lensoverlay] Update dark mode specs.

Change-Id: I1fe7849b4f9ff43a567cb0e40e4ff80aa9d6761b
Bug: 374958996
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5962527
Reviewed-by: Duncan Mercer <mercerd@google.com>
Commit-Queue: Nihar Majmudar <niharm@google.com>
Cr-Commit-Position: refs/heads/main@{#1373922}

chrome/browser/resources/lens/overlay/side_panel/side_panel_app.html

@@ -128,24 +128,27 @@
       /* Colors used in the cr-searchbox results dropdown */
     --color-searchbox-answer-icon-background: #004a77ff;
     --color-searchbox-answer-icon-foreground: #c2e7ffff;
+    --color-searchbox-dropdown-divider: #444746;
     --color-searchbox-results-action-chip: #047db7ff;
     --color-searchbox-results-action-chip-icon: #a8c7faff;
     --color-searchbox-results-action-chip-focus-outline: #669df6ff;
-    --color-searchbox-results-background: #3c3c3cff;
-    --color-searchbox-results-background-hovered: #50504fff;
+    --color-searchbox-results-background: #28292A;
+    --color-searchbox-results-background-hovered: #3C4043;
     --color-searchbox-results-button-hover: #fdfcfb1a;
     --color-searchbox-results-dim-selected: #c7c7c7ff;
-    --color-searchbox-results-focus-indicator: #50504fff;
+    --color-searchbox-results-focus-indicator: #3C4043;
     --color-searchbox-results-foreground: #E8EAED;
     --color-searchbox-results-foreground-dimmed: #c7c7c7ff;
     --color-searchbox-results-icon: #c7c7c7ff;
-    --color-searchbox-results-icon-container-background: #303134;
+    --color-searchbox-results-icon-container-background: #1F1F1F;
     --color-searchbox-results-icon-focused-outline: #a8c7faff;
     --color-searchbox-results-icon-selected: #c7c7c7ff;
     --color-searchbox-results-typed-prefix: #9DA3A9;
     --color-searchbox-results-url: #a8c7faff;
     --color-searchbox-results-url-selected: #a8c7faff;
-    --color-searchbox-search-icon-background: #5F6368;;
+    --color-searchbox-search-icon-background: #70757A;
+    --color-searchbox-thumbnail-overlay: #8CB7FA66;
+    --color-searchbox-thumbnail-outline: #8CB7FA;
     /* Colors specific to the cr-searchbox input */
     --color-searchbox-background-hovered: #4a4a4aff;
     --color-searchbox-background: #303134;
@@ -153,6 +156,8 @@
     --color-searchbox-foreground: #BDC1C6;
     --color-searchbox-placeholder: ##9E9E9E;
     --color-searchbox-shadow: #20212451;
+    /* Colors for searchbox ghost loader */
+    --color-searchbox-ghost-loader-spinner: #70757A;
   }
 
   cr-icon-button.icon-arrow-back {

chrome/browser/resources/lens/shared/searchbox_ghost_loader.html

@@ -65,7 +65,7 @@
 }
 
 .spinner {
-  --cr-spinner-color: #DBDBDB;
+  --cr-spinner-color: var(--color-searchbox-ghost-loader-spinner);
   --cr-spinner-size: 20px;
 }
 

chrome/browser/resources/lens/shared/searchbox_shared_style.css

@@ -16,6 +16,7 @@
   /* Colors used in the cr-searchbox results dropdown */
   --color-searchbox-answer-icon-background: #d3e3fdff;
   --color-searchbox-answer-icon-foreground: #041e49ff;
+  --color-searchbox-dropdown-divider: #DADCE0;
   --color-searchbox-results-action-chip:#a8c7faff;
   --color-searchbox-results-action-chip-icon: #0b57d0ff;
   --color-searchbox-results-action-chip-focus-outline: #0b57d0ff;
@@ -33,6 +34,8 @@
   --color-searchbox-results-url: #1967d2ff;
   --color-searchbox-results-url-selected: #1967d2ff;
   --color-searchbox-search-icon-background: #5F6368;
+  --color-searchbox-thumbnail-overlay: #4285F466;
+  --color-searchbox-thumbnail-border: #4285F4;
   /* Colors specific to the cr-searchbox input */
   --color-searchbox-background-hovered: #F1F3F4;
   --color-searchbox-background: #F1F3F4;
@@ -40,6 +43,8 @@
   --color-searchbox-foreground: #3C4043;
   --color-searchbox-placeholder: #70757A;
   --color-searchbox-shadow: #20212451;
+  /* Colors for searchbox ghost loader */
+  --color-searchbox-ghost-loader-spinner: #DBDBDB;
   /* Variables used by cr-realbox */
   --cr-searchbox-height: 52px;
   --cr-searchbox-icon-left-position: 10px;

ui/webui/resources/cr_components/searchbox/searchbox_dropdown.html

@@ -81,7 +81,7 @@
     content: '';
     position: relative;
     height: 1px;
-    background-color: #DADCE0;
+    background-color: var(--color-searchbox-dropdown-divider);
     top: 0;
     width: calc(var(--cr-searchbox-width) - 24px);
     display: block;

ui/webui/resources/cr_components/searchbox/searchbox_thumbnail.html

@@ -39,7 +39,7 @@
 
   :host(:hover) .overlay,
   :host(:focus-visible) .overlay {
-    background-color: #4285F466;
+    background-color: var(--color-searchbox-thumbnail-overlay);
   }
 
   #remove {
@@ -52,7 +52,7 @@
   }
 
   :host(:focus-visible) #container {
-    border: solid 3px #4285F4;
+    border: solid 3px var(--color-searchbox-thumbnail-border);
     box-sizing: border-box;
   }