diff --git a/CHANGELOG.md b/CHANGELOG.md index 9a94b7279bb9..5a7101f6342f 100644 --- 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 index e32d35cd05ba..4988a58e72c0 100644 --- 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,7 +139,7 @@ } .ace_string { - color: makeHighContrastColor(#009926, $aceBackground); + color: $aceStringColor; } .ace_comment { @@ -143,7 +147,7 @@ } .ace_comment.ace_doc { - color: makeHighContrastColor(#0079a5, $aceBackground); + color: $aceVarColor; } .ace_comment.ace_doc.ace_tag { @@ -151,11 +155,11 @@ } .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; + } } }