Add autocommit styles to ace overrides (#5327)

* 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>
opensearch-project · Apr 27, 2024 · 460428c · 460428c
1 parent fea8202
commit 460428c
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -138,6 +138,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [BUG][Multiple Datasource] Validation succeed as long as status code in response is 200 ([#6399](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6399))
 - [BUG][Multiple Datasource] Fix on data source selectable and readonly component are not consistent ([#6545]https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6545)
 - [BUG][Multiple Datasource] Add validation for title length to be no longer than 32 characters [#6452](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6452))
+- [Dev Tool] Add additional themed styles to ace overrides ([#5327](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5327))
 
 ### 🚞 Infrastructure
 

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;
+    }
   }
 }