diff --git a/frontend/src/metabase/css/core/colors.css b/frontend/src/metabase/css/core/colors.css
index 20473f9c52d4a5e976761030bf601f35863cc35f..73b698e32fc397ee9f522e2923779ccd5dd28102 100644
--- a/frontend/src/metabase/css/core/colors.css
+++ b/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);
diff --git a/frontend/src/metabase/lib/colors/palette.ts b/frontend/src/metabase/lib/colors/palette.ts
index faac2718e7aafd2ddc3af554c697e0505c02048c..99c5c347425810e2b609f0a1571c9a1a73cab3fb 100644
--- a/frontend/src/metabase/lib/colors/palette.ts
+++ b/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",
diff --git a/frontend/src/metabase/query_builder/components/NativeQueryEditor.css b/frontend/src/metabase/query_builder/components/NativeQueryEditor.css
index e6d966d96e3d00f213e6b92b061f9ecab0bb4027..b64765b1122fe9ed3a0962b1ba4d84a442c382af 100644
--- a/frontend/src/metabase/query_builder/components/NativeQueryEditor.css
+++ b/frontend/src/metabase/query_builder/components/NativeQueryEditor.css
@@ -1,60 +1,3 @@
-.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);
diff --git a/frontend/src/metabase/query_builder/components/NativeQueryEditor.jsx b/frontend/src/metabase/query_builder/components/NativeQueryEditor.jsx
index 638c1073c8298a4cee21e83f54353a65bd7629e2..9f82676e1ae4b6680597ba0141b948e714562bea 100644
--- a/frontend/src/metabase/query_builder/components/NativeQueryEditor.jsx
+++ b/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>
);
}
}
diff --git a/frontend/src/metabase/query_builder/components/NativeQueryEditor.styled.tsx b/frontend/src/metabase/query_builder/components/NativeQueryEditor.styled.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dac4cd9d9e488f324ac284056e981ed0ef1ddaf3
--- /dev/null
+++ b/frontend/src/metabase/query_builder/components/NativeQueryEditor.styled.tsx
@@ -0,0 +1,63 @@
+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")};
+ }
+`;
diff --git a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx b/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx
index 8e422ffe3b597ea528c24c4f20a6096a768faa6a..bf6577585b528e54054750005295646a87b57c06 100644
--- a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.jsx
+++ b/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/");
diff --git a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.styled.jsx b/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.styled.jsx
index ec0b098119139eb156bc20176834b6f4ce8d5b71..b6933be262f25174ae88ddb2d4f6c74c1fea5fcb 100644
--- a/frontend/src/metabase/query_builder/components/expressions/ExpressionEditorTextfield.styled.jsx
+++ b/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 = {
diff --git a/frontend/src/metabase/query_builder/components/expressions/expressions.css b/frontend/src/metabase/query_builder/components/expressions/expressions.css
deleted file mode 100644
index 815f828834829f07317a36d470aa85af9d81fb64..0000000000000000000000000000000000000000
--- a/frontend/src/metabase/query_builder/components/expressions/expressions.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.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);
-}