Merge pull request #9297 from metabase/ace-editor-styling

SQL/native editor syntax highlight styling

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 the SQL editor. Shouldn't be used elsewhere since they're not white-labelable. */
+  --color-saturated-blue: #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,12 @@ const colors = {
   "bg-white": "#FFFFFF",
   shadow: "rgba(0,0,0,0.08)",
   border: "#D7DBDE",
+  /* Saturated colors for the SQL editor. Shouldn't be used elsewhere since they're not white-labelable. */
+  "saturated-blue": "#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,
+.NativeQueryEditor .ace_editor .ace_variable {
+  color: var(--color-saturated-blue);
+}
+.NativeQueryEditor .ace_editor .ace_constant,
+.NativeQueryEditor .ace_editor .ace_type {
+  color: var(--color-saturated-red);
+}
+.NativeQueryEditor .ace_editor .ace_string {
+  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;