From 273c7f159ded7dc9403266c6501e16a35e4101c6 Mon Sep 17 00:00:00 2001
From: Alice Koreman <a.koreman@outlook.com>
Date: Mon, 29 Jan 2024 10:32:07 +0100
Subject: [PATCH] fix: Improve contrast of completion popup in CloudEditor
 theme (#5473)

Some parts of the default autocomplete popup did not meet accessibility contrast requirements. This improves the styling in our CloudEditor themes, which we use as our de-facto accessible themes.
---
 src/theme/cloud_editor-css.js      | 22 ++++++++++++++++++++++
 src/theme/cloud_editor_dark-css.js | 22 ++++++++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/src/theme/cloud_editor-css.js b/src/theme/cloud_editor-css.js
index 4ec44de04bd..5a1cfba743e 100644
--- a/src/theme/cloud_editor-css.js
+++ b/src/theme/cloud_editor-css.js
@@ -182,4 +182,26 @@ module.exports = `
     outline: 1px solid #0073bb;
 }
 
+.ace-cloud_editor.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
+    background-color: #f2f3f3;
+    border: #0F68AE 1.5px solid;
+}
+.ace-cloud_editor.ace_editor.ace_autocomplete .ace_line-hover {
+    border: 1px solid #16191f;
+    background: #f2f3f3;
+}
+.ace-cloud_editor.ace_editor.ace_autocomplete .ace_completion-meta {
+    color: #545b64;
+}
+.ace-cloud_editor.ace_editor.ace_autocomplete .ace_completion-highlight{
+    color: #0F68AE;
+}
+.ace-cloud_editor.ace_editor.ace_autocomplete {
+    box-shadow: 0 1px 1px 0 #001c244d, 1px 1px 1px 0 #001c2426, -1px 1px 1px 0 #001c2426;
+    line-height: 1.5;
+    border: 1px solid #eaeded;
+    background: #ffffff;
+    color: #16191f;
+}
+
 `;
\ No newline at end of file
diff --git a/src/theme/cloud_editor_dark-css.js b/src/theme/cloud_editor_dark-css.js
index 7ff37c1ae2b..c55a7ec384a 100644
--- a/src/theme/cloud_editor_dark-css.js
+++ b/src/theme/cloud_editor_dark-css.js
@@ -185,4 +185,26 @@ module.exports = `
     outline: 1px solid #44b9d6;
 }
 
+.ace-cloud_editor_dark.ace_dark.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
+    background-color: #272A30;
+    border: #299FBC 1.5px solid;
+}
+.ace-cloud_editor_dark.ace_dark.ace_editor.ace_autocomplete .ace_line-hover {
+    border: 1px solid #d5dbdb;
+    background: #272A30;
+}
+.ace-cloud_editor_dark.ace_dark.ace_editor.ace_autocomplete .ace_completion-meta {
+    color: #ACB8B9;
+}
+.ace-cloud_editor_dark.ace_dark.ace_editor.ace_autocomplete .ace_completion-highlight{
+    color: #2AA0BC;
+}
+.ace-cloud_editor_dark.ace_dark.ace_editor.ace_autocomplete {
+    box-shadow: 0 1px 1px 0 #001c244d, 1px 1px 1px 0 #001c2426, -1px 1px 1px 0 #001c2426;
+    line-height: 1.5;
+    border: 1px solid #2a2e33;
+    background: #050506;
+    color: #ffffff;
+}
+
 `;
\ No newline at end of file