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>

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

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;

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;