Tone down result hover background color

lhsazevedo · lhsazevedo · commit 39bc2189c953 · 2024-10-22T20:26:18.000-03:00
Additionally, use brand blue as the selected color for search results
diff --git a/styles/theme-medium.css b/styles/theme-medium.css
@@ -621,11 +621,14 @@ div.warning a:focus {
 }
 
 .search-modal__result:hover {
-  background-color: var(--dark-blue-color);
+  /* Simulates 33% opacity by blending --dark-blue-color with --dark-grey-color.
+   * TODO: Use rgb(var(--dark-blue-color) / 33%) once widely supported.
+   * More info: https://caniuse.com/mdn-css_types_color_rgb_relative_syntax */
+  background-color: #3c4053;
 }
 
 .search-modal__result[aria-selected="true"] {
-  background-color: var(--dark-magenta-color);
+  background-color: var(--dark-blue-color);
 }
 
 .search-modal__result-content {

Original file line number	Diff line number	Diff line change
`@@ -621,11 +621,14 @@ div.warning a:focus {`
`621`	`621`	`}`
`622`	`622`
`623`	`623`	`.search-modal__result:hover {`
`624`		`- background-color: var(--dark-blue-color);`
	`624`	`+ /* Simulates 33% opacity by blending --dark-blue-color with --dark-grey-color.`
	`625`	`+ * TODO: Use rgb(var(--dark-blue-color) / 33%) once widely supported.`
	`626`	`+ * More info: https://caniuse.com/mdn-css_types_color_rgb_relative_syntax */`
	`627`	`+ background-color: #3c4053;`
`625`	`628`	`}`
`626`	`629`
`627`	`630`	`.search-modal__result[aria-selected="true"] {`
`628`		`- background-color: var(--dark-magenta-color);`
	`631`	`+ background-color: var(--dark-blue-color);`
`629`	`632`	`}`
`630`	`633`
`631`	`634`	`.search-modal__result-content {`