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.
ajaxorg · Jan 29, 2024 · 273c7f1 · 273c7f1
1 parent 137aac1
commit 273c7f1
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git 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;
+}
+
 `;
diff --git 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;
+}
+
 `;