style sql editor and add saturated colors

frontend/src/metabase/css/core/colors.css

@@ -28,6 +28,13 @@
   --color-shadow: rgba(0, 0, 0, 0.08);
   --color-border: #d7dbde;
 
+  /* saturated colors for sql editor */
+  --color-saturated-brand: #2D86D4;
+  --color-saturated-green: #70A63A;
+  --color-saturated-purple: #885AB1;
+  --color-saturated-red: #ED6E6E;
+  --color-saturated-yellow: #F9CF48;
+
   /* night mode colors */
   --night-mode-color: color(var(--color-text-white) alpha(-14%));
   --night-mode-card: #42484e;

frontend/src/metabase/lib/colors.js

@@ -39,6 +39,11 @@ const colors = {
   "bg-white": "#FFFFFF",
   shadow: "rgba(0,0,0,0.08)",
   border: "#D7DBDE",
+  "saturated-brand": "#2D86D4",
+  "saturated-green": "#70A63A",
+  "saturated-purple": "#885AB1",
+  "saturated-red": "#ED6E6E",
+  "saturated-yellow": "#F9CF48",
 };
 /* eslint-enable no-color-literals */
 export default colors;

frontend/src/metabase/query_builder/components/NativeQueryEditor.css

 .NativeQueryEditor .ace_editor {
   height: 100%;
+  background-color: var(--color-bg-light);
+  color: var(--color-text-dark);
+}
+.NativeQueryEditor .ace_editor .ace_keyword {
+  color: var(--color-saturated-purple);
+}
+.NativeQueryEditor .ace_editor .ace_function {
+  color: var(--color-saturated-brand);
+}
+.NativeQueryEditor .ace_editor .ace_constant,
+.NativeQueryEditor .ace_editor .ace_type {
+  color: var(--color-saturated-red);
+}
+.NativeQueryEditor .ace_editor .ace_string,
+.NativeQueryEditor .ace_editor .ace_variable {
+  color: var(--color-saturated-green);
 }
 
 .NativeQueryEditor .react-resizable {
@@ -22,7 +38,7 @@
   padding-top: 2px;
   font-size: 10px;
   font-weight: 700;
-  color: var(--color-text-medium);
+  color: var(--color-text-light);
   padding-left: 0;
   padding-right: 0;
   display: block;