Add autocommit styles to ace overrides (#5327) (#6660)

* Add autocommit styles to ace overrides Signed-off-by: Josh Romero <rmerqg@amazon.com> * update changelog Signed-off-by: Josh Romero <rmerqg@amazon.com> * ran yarn run lint:style --fix Signed-off-by: Kawika Avilla <kavilla414@gmail.com> --------- Signed-off-by: Josh Romero <rmerqg@amazon.com> Signed-off-by: Kawika Avilla <kavilla414@gmail.com> Co-authored-by: Kawika Avilla <kavilla414@gmail.com> (cherry picked from commit 460428c) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Apr 30, 2024 · 882412c · 882412c
1 parent 6e21d5e
commit 882412c
Showing 1 changed file with 40 additions and 10 deletions.
diff --git a/src/core/public/styles/_ace_overrides.scss b/src/core/public/styles/_ace_overrides.scss
@@ -9,6 +9,10 @@
 .coreSystemRootDomElement {
   .ace-tm {
     $aceBackground: tintOrShade($euiColorLightShade, 50%, 0%);
+    $aceActiveLineBackground: transparentize($euiColorLightShade, 0.3);
+    $aceUrlColor: makeHighContrastColor(#00a69b, $aceBackground);
+    $aceVarColor: makeHighContrastColor(#0079a5, $aceBackground);
+    $aceStringColor: makeHighContrastColor(#009926, $aceBackground);
 
     background-color: $euiColorLightestShade;
     color: $euiTextColor;
@@ -21,7 +25,7 @@
 
     .ace_gutter-active-line,
     .ace_marker-layer .ace_active-line {
-      background-color: transparentize($euiColorLightShade, 0.3);
+      background-color: $aceActiveLineBackground;
     }
 
     .ace_snippet-marker {
@@ -60,11 +64,11 @@
     .ace_url,
     .ace_start_triple_quote,
     .ace_end_triple_quote {
-      color: makeHighContrastColor(#00a69b, $aceBackground);
+      color: $aceUrlColor;
     }
 
     .ace_multi_string {
-      color: makeHighContrastColor(#009926, $aceBackground);
+      color: $aceStringColor;
       font-style: italic;
     }
 
@@ -93,7 +97,7 @@
 
     .ace_storage,
     .ace_keyword {
-      color: makeHighContrastColor(#0079a5, $aceBackground);
+      color: $aceVarColor;
     }
 
     .ace_constant {
@@ -109,7 +113,7 @@
     }
 
     .ace_constant.ace_library {
-      color: makeHighContrastColor(#009926, $aceBackground);
+      color: $aceStringColor;
     }
 
     .ace_invalid {
@@ -122,7 +126,7 @@
     }
 
     .ace_support.ace_constant {
-      color: makeHighContrastColor(#009926, $aceBackground);
+      color: $aceStringColor;
     }
 
     .ace_support.ace_type,
@@ -135,27 +139,27 @@
     }
 
     .ace_string {
-      color: makeHighContrastColor(#009926, $aceBackground);
+      color: $aceStringColor;
     }
 
     .ace_comment {
       color: makeHighContrastColor(rgb(76, 136, 107), $aceBackground);
     }
 
     .ace_comment.ace_doc {
-      color: makeHighContrastColor(#0079a5, $aceBackground);
+      color: $aceVarColor;
     }
 
     .ace_comment.ace_doc.ace_tag {
       color: makeHighContrastColor($euiColorMediumShade, $aceBackground);
     }
 
     .ace_constant.ace_numeric {
-      color: makeHighContrastColor(#0079a5, $aceBackground);
+      color: $aceVarColor;
     }
 
     .ace_variable {
-      color: makeHighContrastColor(#0079a5, $aceBackground);
+      color: $aceVarColor;
     }
 
     .ace_xml-pe {
@@ -207,5 +211,31 @@
       background: $euiColorLightestShade;
       border: $euiBorderThin;
     }
+
+    &.ace_editor.ace_autocomplete {
+      background-color: $euiColorLightestShade;
+      color:
+        makeHighContrastColor(
+          $euiTextColor,
+          $aceBackground
+        );
+
+      .ace_completion-highlight {
+        color: $aceUrlColor;
+      }
+
+      .ace_marker-layer .ace_active-line {
+        background-color: $aceActiveLineBackground;
+      }
+    }
+
+    .ace_rightAlignedText {
+      color: $aceVarColor;
+    }
+
+    .ace_tooltip {
+      background-color: $aceBackground;
+      color: $euiTextColor;
+    }
   }
 }