From 0957684bcecc761126890552ec78e4346bd7fd96 Mon Sep 17 00:00:00 2001
From: alex <48489896+devnaumov@users.noreply.github.com>
Date: Thu, 23 May 2024 15:49:43 +0200
Subject: [PATCH] CB-4868 extend editor highlight (#2647)

* CB-4868 extend editor highlight

* CB-4868 update colors

* CB-4868 fix variable

* CB-4868 increase contrast ratio

---------

Co-authored-by: Evgenia Bezborodova <139753579+EvgeniaBzzz@users.noreply.github.com>
---
 .../src/theme/_base-code-editor.scss          | 28 +++++++++++++++++++
 .../src/theme/dark.module.scss                |  9 +++++-
 .../src/theme/light.module.scss               |  9 +++++-
 3 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/webapp/packages/plugin-codemirror6/src/theme/_base-code-editor.scss b/webapp/packages/plugin-codemirror6/src/theme/_base-code-editor.scss
index 4e3643e6ab..68ee4ae329 100644
--- a/webapp/packages/plugin-codemirror6/src/theme/_base-code-editor.scss
+++ b/webapp/packages/plugin-codemirror6/src/theme/_base-code-editor.scss
@@ -218,4 +218,32 @@
   .editor .tok-type {
     color: $variable-3;
   }
+
+  .editor .tok-typeName {
+    color: $type-name;
+  }
+
+  .editor .tok-punctuation {
+    color: $punctuation;
+  }
+
+  .editor .tok-propertyName {
+    color: $property-name;
+  }
+
+  .editor .tok-className {
+    color: $class-name;
+  }
+
+  .editor .tok-bool {
+    color: $bool;
+  }
+
+  .editor .tok-variableName {
+    color: $variable-name;
+  }
+
+  .editor .tok-labelName {
+    color: $label-name;
+  }
 }
diff --git a/webapp/packages/plugin-codemirror6/src/theme/dark.module.scss b/webapp/packages/plugin-codemirror6/src/theme/dark.module.scss
index 64e9f2f922..d8ce497fb0 100644
--- a/webapp/packages/plugin-codemirror6/src/theme/dark.module.scss
+++ b/webapp/packages/plugin-codemirror6/src/theme/dark.module.scss
@@ -13,7 +13,7 @@
 
 $meta: #ff1717;
 $keyword: rgb(115, 158, 202);
-$atom: #604aff;
+$atom: #56c8d8;
 $number: rgb(192, 192, 192);
 $def: #00f;
 $variable: rgb(126, 186, 211);
@@ -34,6 +34,13 @@ $error: #f00;
 $delimiter: rgb(238, 204, 100);
 $cursor: #fff;
 $active-query: $color-positive;
+$type-name: #c586c0;
+$class-name: #c586c0;
+$punctuation: #ffffff8c;
+$property-name: #569cd6;
+$bool: #56c8d8;
+$variable-name: #56c8d8;
+$label-name: #cf6edf;
 
 :global .#{$theme-class} {
   @include base-code-editor;
diff --git a/webapp/packages/plugin-codemirror6/src/theme/light.module.scss b/webapp/packages/plugin-codemirror6/src/theme/light.module.scss
index 4981c84005..aad7e81507 100644
--- a/webapp/packages/plugin-codemirror6/src/theme/light.module.scss
+++ b/webapp/packages/plugin-codemirror6/src/theme/light.module.scss
@@ -22,7 +22,7 @@ $variable-3: #a8bd00;
 $property: black;
 $operator: #a67f59;
 $comment: #3f7f5f;
-$string: #690;
+$string: #1f8900;
 $string-2: #f50;
 $qualifier: #555;
 $builtin: #07a;
@@ -34,6 +34,13 @@ $error: #f00;
 $delimiter: rgb(238, 204, 100);
 $cursor: #000;
 $active-query: $color-positive;
+$type-name: #007acc;
+$class-name: #007acc;
+$punctuation: #6d6d6d;
+$property-name: #c42626;
+$bool: #905;
+$variable-name: #905;
+$label-name: #81a1c1;
 
 :global .#{$theme-class} {
   @include base-code-editor;