Migrate NativeQueryBuilder and ExpressionEditor to JS colors (#23996)

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

@@ -7,15 +7,12 @@
   --color-accent1: #88bf4d;
   --color-accent2: #a989c5;
   --color-accent4: #f9d45c;
-  --color-accent5: #f2a86f;
-  --color-accent6: #98d9d9;
   --color-accent7: #7172ad;
   --color-admin-navbar: #7172ad;
   --color-white: #ffffff;
   --color-black: #2e353b;
   --color-success: #84bb4c;
   --color-error: #ed6e6e;
-  --color-error-background: #ed6e6e55;
   --color-warning: #f9cf48;
   --color-text-dark: #4c5773;
   --color-text-medium: #949aab;
@@ -31,58 +28,8 @@
   --color-shadow: rgba(0, 0, 0, 0.13);
   --color-border: #eeecec;
   --color-border-dark: #c9ced3;
-
-  /* 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;
 }
 
-/* NOTE: DEPRECATED, replaced with colors above
-:root {
-  --brand-color: var(--color-brand);
-  --brand-light-color: var(--color-text-light);
-  --brand-saturated-color: var(--color-brand);
-
-  --base-grey: var(--color-bg-light);
-  --grey-5percent: var(--color-bg-medium);
-  --grey-1: var(--color-text-light);
-  --grey-2: var(--color-text-light);
-  --grey-3: var(--color-text-medium);
-  --grey-4: var(--color-text-medium);
-  --grey-5: var(--color-text-medium);
-
-  --grey-text-color: var(--color-text-medium);
-  --alt-color: var(--color-bg-light);
-  --alt-bg-color: var(--color-bg-light);
-
-  --success-color: var(--color-success);
-  --headsup-color: var(--color-warning);
-
-  --gold-color: var(--color-accent4);
-  --orange-color: var(--color-warning);
-  --purple-color: var(--color-accent2);
-  --green-color: var(--color-accent1);
-  --green-saturated-color: var(--color-accent1);
-  --dark-color: var(--color-text-dark);
-  --slate-color: var(--color-text-medium);
-  --slate-light-color: var(--color-text-light);
-  --slate-almost-extra-light-color: var(--color-bg-medium);
-  --slate-extra-light-color: var(--color-bg-light);
-
-  --error-color: var(--color-error);
-
-  --metric-color: var(--color-accent1);
-  --segment-color: var(--color-accent2);
-  --pulse-color: var(--color-accent4);
-  --dashboard-color: var(--color-brand);
-  --data-color: var(--color-accent1);
-  --question-color: var(--color-text-medium);
-}
-*/
-
 .text-default,
 :local(.text-default) {
   color: var(--color-text-dark);

frontend/src/metabase/lib/colors/palette.ts

@@ -36,6 +36,7 @@ export const colors: ColorPalette = {
   "bg-white": "#FFFFFF",
   "bg-yellow": "#FFFCF2",
   "bg-night": "#42484E",
+  "bg-error": "#ED6E6E55",
   shadow: "rgba(0,0,0,0.08)",
   border: "#EEECEC",
   "border-dark": "#C9CED3",

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 .ace_editor .ace_templateTag {
-  color: var(--color-brand);
-}
-
-.NativeQueryEditor .react-resizable {
-  position: relative;
-}
-
-.NativeQueryEditor .react-resizable-handle {
-  position: absolute;
-  width: 100%;
-  height: 10px;
-  bottom: -5px;
-  cursor: ns-resize;
-}
-
-.NativeQueryEditor .ace_editor.read-only .ace_cursor {
-  display: none;
-}
-
-.NativeQueryEditor .ace_editor .ace_gutter-cell {
-  padding-top: 2px;
-  font-size: 10px;
-  font-weight: 700;
-  color: var(--color-text-light);
-  padding-left: 0;
-  padding-right: 7px;
-  display: block;
-  text-align: center;
-}
-
-.NativeQueryEditor .ace_editor .ace_gutter {
-  background-color: var(--color-bg-light);
-}
-
-/* ace UI element styling */
-
-/* overall dropdown */
 .ace_editor.ace_autocomplete {
   border: none;
   box-shadow: 0 2px 3px 2px rgba(0, 0, 0, 0.08);

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

@@ -38,6 +38,7 @@ import {
 } from "./NativeQueryEditor/utils";
 
 import "./NativeQueryEditor.css";
+import { NativeQueryEditorRoot } from "./NativeQueryEditor.styled";
 
 const AUTOCOMPLETE_DEBOUNCE_DURATION = 700;
 const AUTOCOMPLETE_CACHE_DURATION = AUTOCOMPLETE_DEBOUNCE_DURATION * 1.2; // tolerate 20%
@@ -416,7 +417,7 @@ class NativeQueryEditor extends Component {
     );
 
     return (
-      <div className="NativeQueryEditor bg-light full">
+      <NativeQueryEditorRoot className="NativeQueryEditor bg-light full">
         {hasTopBar && (
           <div className="flex align-center" data-testid="native-query-top-bar">
             <div className={!isNativeEditorOpen ? "hide sm-show" : ""}>
@@ -496,7 +497,7 @@ class NativeQueryEditor extends Component {
             />
           )}
         </ResizableBox>
-      </div>
+      </NativeQueryEditorRoot>
     );
   }
 }

frontend/src/metabase/query_builder/components/NativeQueryEditor.styled.tsx

+import styled from "@emotion/styled";
+import { color } from "metabase/lib/colors";
+
+export const NativeQueryEditorRoot = styled.div`
+  .ace_editor {
+    height: 100%;
+    background-color: ${color("bg-light")};
+    color: ${color("text-dark")};
+  }
+
+  .ace_editor .ace_keyword {
+    color: ${color("saturated-purple")};
+  }
+
+  .ace_editor .ace_function,
+  .ace_editor .ace_variable {
+    color: ${color("saturated-blue")};
+  }
+
+  .ace_editor .ace_constant,
+  .ace_editor .ace_type {
+    color: ${color("saturated-red")};
+  }
+
+  .ace_editor .ace_string {
+    color: ${color("saturated-green")};
+  }
+
+  .ace_editor .ace_templateTag {
+    color: ${color("brand")};
+  }
+
+  .react-resizable {
+    position: relative;
+  }
+
+  .react-resizable-handle {
+    position: absolute;
+    width: 100%;
+    height: 10px;
+    bottom: -5px;
+    cursor: ns-resize;
+  }
+
+  .ace_editor.read-only .ace_cursor {
+    display: none;
+  }
+
+  .ace_editor .ace_gutter-cell {
+    padding-top: 2px;
+    font-size: 10px;
+    font-weight: 700;
+    color: ${color("text-light")};
+    padding-left: 0;
+    padding-right: 7px;
+    display: block;
+    text-align: center;
+  }
+
+  .ace_editor .ace_gutter {
+    background-color: ${color("bg-light")};
+  }
+`;

frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx

@@ -25,8 +25,6 @@ import {
 
 import ExpressionMode from "./ExpressionMode";
 
-import "./expressions.css";
-
 import * as ace from "ace-builds/src-noconflict/ace";
 
 ace.config.set("basePath", "/assets/ui/");

frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.styled.jsx

@@ -29,6 +29,51 @@ export const EditorContainer = styled.div`
   @media (prefers-reduced-motion) {
     transition: none;
   }
+
+  .ace_editor {
+    overflow: initial;
+  }
+
+  textarea {
+    min-height: 5px;
+  }
+
+  .ace_content * {
+    font-family: monospace !important;
+  }
+
+  .ace_hidpi .ace_content {
+    color: ${color("text-dark")};
+    font-weight: 700;
+  }
+
+  .ace-tm .ace_keyword,
+  .ace-tm .ace_constant.ace_numeric {
+    color: ${color("text-dark")};
+  }
+
+  .ace-tm .ace_variable {
+    color: ${color("brand")};
+  }
+
+  .ace-tm .ace_string {
+    color: ${color("accent5")};
+  }
+
+  .ace_cursor {
+    border-left-width: 1px;
+  }
+
+  .ace_hidden-cursors .ace_cursor {
+    opacity: 0;
+  }
+
+  .ace_content .error {
+    position: absolute;
+    border-bottom: 2px solid ${color("error")};
+    border-radius: 0px;
+    background-color: ${color("bg-error")};
+  }
 `;
 
 EditorContainer.defaultProps = {

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

-.expression-editor-textfield .ace_editor {
-  overflow: initial;
-}
-
-.expression-editor-textfield textarea {
-  min-height: 5px;
-}
-
-.expression-editor-textfield .ace_content * {
-  font-family: monospace !important;
-}
-
-.expression-editor-textfield .ace_hidpi .ace_content {
-  color: #4c5773;
-  font-weight: 700;
-}
-
-.expression-editor-textfield .ace-tm .ace_keyword,
-.expression-editor-textfield .ace-tm .ace_constant.ace_numeric {
-  color: #4c5773;
-}
-
-.expression-editor-textfield .ace-tm .ace_variable {
-  color: var(--color-brand);
-}
-
-.expression-editor-textfield .ace-tm .ace_string {
-  color: var(--color-accent5);
-}
-
-.expression-editor-textfield .ace_cursor {
-  border-left-width: 1px;
-}
-
-.expression-editor-textfield .ace_hidden-cursors .ace_cursor {
-  opacity: 0;
-}
-
-.expression-editor-textfield .ace_content .error {
-  position: absolute;
-  border-bottom: 2px solid var(--color-error);
-  border-radius: 0px;
-  background-color: var(--color-error-background);
-}