From 597f3d0602061a680b9e9358400699f25e0e9050 Mon Sep 17 00:00:00 2001 From: Linus Pahl Date: Mon, 9 Feb 2026 12:17:40 +0100 Subject: [PATCH] First appraoch --- lib/styled-components/Sawmill.ts | 8 +- .../__snapshots__/Sawmill.test.ts.snap | 258 +++++++++++++----- .../component-styles/aceEditor.ts | 123 +++++++-- lib/styled-components/generated/theme.json | 4 +- 4 files changed, 291 insertions(+), 102 deletions(-) diff --git a/lib/styled-components/Sawmill.ts b/lib/styled-components/Sawmill.ts index 6e2757c..548f5aa 100644 --- a/lib/styled-components/Sawmill.ts +++ b/lib/styled-components/Sawmill.ts @@ -26,11 +26,13 @@ const Sawmill = (mantineTheme: MantineTheme): StyledComponentsTheme => { contrastingColor, }; + const components = hasCustomColors + ? { aceEditor: aceEditor(colors) } + : Theme.components[mantineTheme.colorScheme]; + return ({ breakpoints: Theme.breakpoints, - components: hasCustomColors ? { - aceEditor: aceEditor(colors), - } : Theme.components[mantineTheme.colorScheme], + components, colors, fonts: Theme.fonts, mode: mantineTheme.colorScheme, diff --git a/lib/styled-components/__snapshots__/Sawmill.test.ts.snap b/lib/styled-components/__snapshots__/Sawmill.test.ts.snap index 4b7bb64..fda578e 100644 --- a/lib/styled-components/__snapshots__/Sawmill.test.ts.snap +++ b/lib/styled-components/__snapshots__/Sawmill.test.ts.snap @@ -495,63 +495,63 @@ exports[`styled-components sawmill should generate dark theme based on custom co }, "components": { "aceEditor": " - .ace_editor { + .ace_editor { border: 1px solid rgba(183,183,183,0.74) !important; - border-radius: 0; - } - - .ace-graylog { - background-color: #0b42ff; - color: #f0f0f0; + border-radius: var(--ace-border-radius, 0); + background-color: var(--ace-bg); + color: var(--ace-text); &.ace_multiselect .ace_selection.ace_start { - box-shadow: 0 0 3px 0 #0b42ff; + box-shadow: 0 0 3px 0 var(--ace-selection-start-shadow, transparent); } .ace_gutter { - background: #5f5f5f; - color: #f0f0f0; + background: var(--ace-gutter-bg); + color: var(--ace-gutter-text); } .ace_print-margin { width: 1px; - background: #4b4b4b; + background: var(--ace-print-margin-bg); } .ace_cursor { - border-color: #5c6370; + border-color: var(--ace-cursor-border, currentColor); + color: var(--ace-cursor-color, currentColor); } .ace_marker-layer { .ace_selection { background: Highlight; + opacity: var(--ace-selection-opacity, 1); + border-radius: 0; } .ace_step { - background: rgb(255 255 0); + background: var(--ace-step-bg); } .ace_bracket { margin: -1px 0 0 -1px; - border: 1px solid #b0b0b0; + border: var(--ace-bracket-border); } .ace_selected-word { - border: 1px solid #bdbdbd; + border: var(--ace-selected-word-border); background: transparent; } .ace_active-line { - background: #4b4b4b; + background: var(--ace-active-line-bg); } } .ace_gutter-active-line { - background-color: #4b4b4b; + background-color: var(--ace-gutter-active-line-bg); } .ace_invisible { - color: #b0b0b0; + color: var(--ace-invisible-color); } .ace_keyword, @@ -559,11 +559,11 @@ exports[`styled-components sawmill should generate dark theme based on custom co .ace_storage, .ace_storage.ace_type, .ace_support.ace_type { - color: #8cb5ea; + color: var(--ace-token-keyword); } .ace_keyword.ace_operator { - color: #bfbfff; + color: var(--ace-token-operator); } .ace_constant.ace_character, @@ -572,43 +572,44 @@ exports[`styled-components sawmill should generate dark theme based on custom co .ace_keyword.ace_other.ace_unit, .ace_support.ace_constant, .ace_variable.ace_parameter { - color: #d1bfd1; + color: var(--ace-token-constant); } .ace_constant.ace_other { - color: #d1d1d1; + color: var(--ace-token-constant-other); } .ace_invalid { - color: #ffebeb; - background-color: #f20000; + color: var(--ace-token-invalid-color); + background-color: var(--ace-token-invalid-bg); } .ace_invalid.ace_deprecated { - color: #ffebeb; - background-color: #800080; + color: var(--ace-token-invalid-deprecated-color); + background-color: var(--ace-token-invalid-deprecated-bg); } .ace_fold { background-color: #0000FF; - border-color: #f0f0f0; + border-color: var(--ace-token-fold-border); } .ace_entity.ace_name.ace_function, .ace_support.ace_function, - .ace_variable { - color: #0000FF; + .ace_variable, + .ace_term { + color: var(--ace-token-function); } .ace_support.ace_class, .ace_support.ace_type { - color: #ffffbf; + color: var(--ace-token-class); } .ace_heading, .ace_markup.ace_heading, .ace_string { - color: #bfd1bf; + color: var(--ace-token-heading); } .ace_entity.ace_name.ace_tag, @@ -616,24 +617,82 @@ exports[`styled-components sawmill should generate dark theme based on custom co .ace_meta.ace_tag, .ace_string.ace_regexp, .ace_variable { - color: #f20000; + color: var(--ace-token-tag); } .ace_comment { - color: rgba(92,99,112,0.6); + color: var(--ace-token-comment); } .ace_tooltip { - background-color: #89a4ff; + background-color: var(--ace-tooltip-bg, transparent); padding: 4px; padding-left: 0; line-height: 1.5; - + .ace_icon { margin-right: 3px; } } } + + .ace-graylog { + --ace-bg: #0b42ff; + --ace-text: #f0f0f0; + --ace-selection-start-shadow: #0b42ff; + --ace-gutter-bg: #5f5f5f; + --ace-gutter-text: #f0f0f0; + --ace-print-margin-bg: #4b4b4b; + --ace-cursor-border: #5c6370; + --ace-step-bg: rgb(255 255 0); + --ace-bracket-border: 1px solid #b0b0b0; + --ace-selected-word-border: 1px solid #bdbdbd; + --ace-active-line-bg: #4b4b4b; + --ace-gutter-active-line-bg: #4b4b4b; + --ace-invisible-color: #b0b0b0; + --ace-token-keyword: #8cb5ea; + --ace-token-operator: #bfbfff; + --ace-token-constant: #d1bfd1; + --ace-token-constant-other: #d1d1d1; + --ace-token-invalid-color: #ffebeb; + --ace-token-invalid-bg: #f20000; + --ace-token-invalid-deprecated-color: #ffebeb; + --ace-token-invalid-deprecated-bg: #800080; + --ace-token-fold-border: #f0f0f0; + --ace-token-function: #0000FF; + --ace-token-class: #ffffbf; + --ace-token-heading: #bfd1bf; + --ace-token-tag: #f20000; + --ace-token-comment: rgba(92,99,112,0.6); + --ace-tooltip-bg: #89a4ff; + } + + .ace-queryinput { + --ace-bg: #1C2235; + --ace-selection-start-shadow: #1C2235; + --ace-gutter-bg: #1C2235; + --ace-print-margin-bg: #1C2235; + --ace-cursor-border: #cacaca; + --ace-cursor-color: #cacaca; + --ace-selection-opacity: 0.35; + --ace-step-bg: #FFFF00; + --ace-bracket-border: none; + --ace-selected-word-border: 0; + --ace-active-line-bg: #1C2235; + --ace-gutter-active-line-bg: #1C2235; + --ace-invisible-color: #1C2235; + --ace-token-keyword: #0000FF; + --ace-token-operator: #5c6370; + --ace-token-constant: #ff5f5f; + --ace-token-constant-other: #808080; + --ace-token-invalid-bg: #FF0000; + --ace-token-invalid-deprecated-bg: #985f98; + --ace-token-function: #bfbfff; + --ace-token-class: #ffff5f; + --ace-token-heading: #5f985f; + --ace-token-tag: #FF0000; + --ace-token-comment: #bdbdbd; + } ", }, "fonts": { @@ -1185,63 +1244,63 @@ exports[`styled-components sawmill should generate light theme based on custom c }, "components": { "aceEditor": " - .ace_editor { + .ace_editor { border: 1px solid #C1C7DC !important; - border-radius: 0; - } - - .ace-graylog { - background-color: #0b42ff; - color: #4b4b4b; + border-radius: var(--ace-border-radius, 0); + background-color: var(--ace-bg); + color: var(--ace-text); &.ace_multiselect .ace_selection.ace_start { - box-shadow: 0 0 3px 0 #0b42ff; + box-shadow: 0 0 3px 0 var(--ace-selection-start-shadow, transparent); } .ace_gutter { - background: #d1d1d1; - color: #4b4b4b; + background: var(--ace-gutter-bg); + color: var(--ace-gutter-text); } .ace_print-margin { width: 1px; - background: #f0f0f0; + background: var(--ace-print-margin-bg); } .ace_cursor { - border-color: #5c6370; + border-color: var(--ace-cursor-border, currentColor); + color: var(--ace-cursor-color, currentColor); } .ace_marker-layer { .ace_selection { background: Highlight; + opacity: var(--ace-selection-opacity, 1); + border-radius: 0; } .ace_step { - background: rgb(255 255 0); + background: var(--ace-step-bg); } .ace_bracket { margin: -1px 0 0 -1px; - border: 1px solid #b6b9c2; + border: var(--ace-bracket-border); } .ace_selected-word { - border: 1px solid #9ea2ad; + border: var(--ace-selected-word-border); background: transparent; } .ace_active-line { - background: #f0f0f0; + background: var(--ace-active-line-bg); } } .ace_gutter-active-line { - background-color: #f0f0f0; + background-color: var(--ace-gutter-active-line-bg); } .ace_invisible { - color: #b6b9c2; + color: var(--ace-invisible-color); } .ace_keyword, @@ -1249,11 +1308,11 @@ exports[`styled-components sawmill should generate light theme based on custom c .ace_storage, .ace_storage.ace_type, .ace_support.ace_type { - color: #8cb5ea; + color: var(--ace-token-keyword); } .ace_keyword.ace_operator { - color: #0000bd; + color: var(--ace-token-operator); } .ace_constant.ace_character, @@ -1262,43 +1321,44 @@ exports[`styled-components sawmill should generate light theme based on custom c .ace_keyword.ace_other.ace_unit, .ace_support.ace_constant, .ace_variable.ace_parameter { - color: #5f005f; + color: var(--ace-token-constant); } .ace_constant.ace_other { - color: #5f5f5f; + color: var(--ace-token-constant-other); } .ace_invalid { - color: #ffebeb; - background-color: #ff5f5f; + color: var(--ace-token-invalid-color); + background-color: var(--ace-token-invalid-bg); } .ace_invalid.ace_deprecated { - color: #ffebeb; - background-color: #800080; + color: var(--ace-token-invalid-deprecated-color); + background-color: var(--ace-token-invalid-deprecated-bg); } .ace_fold { background-color: #0000FF; - border-color: #4b4b4b; + border-color: var(--ace-token-fold-border); } .ace_entity.ace_name.ace_function, .ace_support.ace_function, - .ace_variable { - color: #0000FF; + .ace_variable, + .ace_term { + color: var(--ace-token-function); } .ace_support.ace_class, .ace_support.ace_type { - color: #bdbd00; + color: var(--ace-token-class); } .ace_heading, .ace_markup.ace_heading, .ace_string { - color: #005f00; + color: var(--ace-token-heading); } .ace_entity.ace_name.ace_tag, @@ -1306,24 +1366,82 @@ exports[`styled-components sawmill should generate light theme based on custom c .ace_meta.ace_tag, .ace_string.ace_regexp, .ace_variable { - color: #ff5f5f; + color: var(--ace-token-tag); } .ace_comment { - color: rgba(92,99,112,0.6); + color: var(--ace-token-comment); } .ace_tooltip { - background-color: #89a4ff; + background-color: var(--ace-tooltip-bg, transparent); padding: 4px; padding-left: 0; line-height: 1.5; - + .ace_icon { margin-right: 3px; } } } + + .ace-graylog { + --ace-bg: #0b42ff; + --ace-text: #4b4b4b; + --ace-selection-start-shadow: #0b42ff; + --ace-gutter-bg: #d1d1d1; + --ace-gutter-text: #4b4b4b; + --ace-print-margin-bg: #f0f0f0; + --ace-cursor-border: #5c6370; + --ace-step-bg: rgb(255 255 0); + --ace-bracket-border: 1px solid #b6b9c2; + --ace-selected-word-border: 1px solid #9ea2ad; + --ace-active-line-bg: #f0f0f0; + --ace-gutter-active-line-bg: #f0f0f0; + --ace-invisible-color: #b6b9c2; + --ace-token-keyword: #8cb5ea; + --ace-token-operator: #0000bd; + --ace-token-constant: #5f005f; + --ace-token-constant-other: #5f5f5f; + --ace-token-invalid-color: #ffebeb; + --ace-token-invalid-bg: #ff5f5f; + --ace-token-invalid-deprecated-color: #ffebeb; + --ace-token-invalid-deprecated-bg: #800080; + --ace-token-fold-border: #4b4b4b; + --ace-token-function: #0000FF; + --ace-token-class: #bdbd00; + --ace-token-heading: #005f00; + --ace-token-tag: #ff5f5f; + --ace-token-comment: rgba(92,99,112,0.6); + --ace-tooltip-bg: #89a4ff; + } + + .ace-queryinput { + --ace-bg: #0b42ff; + --ace-selection-start-shadow: #0b42ff; + --ace-gutter-bg: #0b42ff; + --ace-print-margin-bg: #0b42ff; + --ace-cursor-border: #868a99; + --ace-cursor-color: #868a99; + --ace-selection-opacity: 0.35; + --ace-step-bg: #FFFF00; + --ace-bracket-border: none; + --ace-selected-word-border: 0; + --ace-active-line-bg: #0b42ff; + --ace-gutter-active-line-bg: #0b42ff; + --ace-invisible-color: #0b42ff; + --ace-token-keyword: #0000FF; + --ace-token-operator: #5c6370; + --ace-token-constant: #f20000; + --ace-token-constant-other: #808080; + --ace-token-invalid-bg: #FF0000; + --ace-token-invalid-deprecated-bg: #790079; + --ace-token-function: #0000bd; + --ace-token-class: #f2f200; + --ace-token-heading: #007900; + --ace-token-tag: #FF0000; + --ace-token-comment: #9ea2ad; + } ", }, "fonts": { diff --git a/lib/styled-components/component-styles/aceEditor.ts b/lib/styled-components/component-styles/aceEditor.ts index 7b74b89..588e63f 100644 --- a/lib/styled-components/component-styles/aceEditor.ts +++ b/lib/styled-components/component-styles/aceEditor.ts @@ -1,40 +1,56 @@ import { StyledComponentsTheme } from '../types'; +import Theme from '../generated/theme.json'; const aceEditorStyles = (colors: StyledComponentsTheme['colors']) => ` - .ace_editor { + .ace_editor { border: 1px solid ${colors.input.border} !important; border-radius: 0; - } - - .ace-graylog { - background-color: ${colors.global.contentBackground}; + background-color: ${colors.input.background}; color: ${colors.variant.darkest.default}; &.ace_multiselect .ace_selection.ace_start { - box-shadow: 0 0 3px 0 ${colors.global.contentBackground}; + box-shadow: 0 0 3px 0 ${colors.input.background}; } .ace_gutter { - background: ${colors.variant.lighter.default}; - color: ${colors.variant.darkest.default}; + background: ${colors.input.background}; + color: ${colors.text.secondary}; + border-right: 1px solid ${colors.input.border}; } .ace_print-margin { width: 1px; - background: ${colors.variant.lightest.default}; + background: ${colors.input.background}; } .ace_cursor { border-color: ${colors.text.primary}; + color: ${colors.text.primary}; + } + + .ace_marker { + border-bottom: 2px dashed; + position: absolute; + border-radius: 0; + margin-top: 1px; + } + + .ace_marker.ace_validation_error { + border-color: ${colors.variant.danger}; + } + + .ace_marker.ace_validation_warning { + border-color: ${colors.variant.dark.warning}; } .ace_marker-layer { .ace_selection { background: Highlight; + border-radius: 0; } .ace_step { - background: rgb(255 255 0); + background: ${colors.variant.warning}; } .ace_bracket { @@ -48,7 +64,7 @@ const aceEditorStyles = (colors: StyledComponentsTheme['colors']) => ` } .ace_active-line { - background: ${colors.variant.lightest.default}; + background: var(--ace-active-line-bg, ${colors.input.background}); } } @@ -57,7 +73,25 @@ const aceEditorStyles = (colors: StyledComponentsTheme['colors']) => ` } .ace_invisible { - color: ${colors.gray[70]}; + color: var(--ace-invisible-color, ${colors.input.background}); + } + + .ace_placeholder { + left: 0; + right: 0; + padding: 0; + margin-top: 6px; + margin-left: 4px; + margin-right: 4px; + transform: none; + opacity: 1; + z-index: auto !important; + font-family: ${Theme.fonts.family.monospace} !important; + font-size: ${Theme.fonts.size.body}; + color: ${colors.input.placeholder}; + text-overflow: ellipsis; + max-width: 100%; + overflow: hidden; } .ace_keyword, @@ -65,11 +99,11 @@ const aceEditorStyles = (colors: StyledComponentsTheme['colors']) => ` .ace_storage, .ace_storage.ace_type, .ace_support.ace_type { - color: ${colors.global.link}; + color: var(--ace-token-keyword); } .ace_keyword.ace_operator { - color: ${colors.variant.darker.info}; + color: var(--ace-token-operator); } .ace_constant.ace_character, @@ -78,43 +112,44 @@ const aceEditorStyles = (colors: StyledComponentsTheme['colors']) => ` .ace_keyword.ace_other.ace_unit, .ace_support.ace_constant, .ace_variable.ace_parameter { - color: ${colors.variant.darker.primary}; + color: var(--ace-token-constant); } .ace_constant.ace_other { - color: ${colors.variant.darker.default}; + color: var(--ace-token-constant-other); } .ace_invalid { - color: ${colors.global.textAlt}; - background-color: ${colors.variant.light.danger}; + color: var(--ace-token-invalid-color); + background-color: var(--ace-token-invalid-bg); } .ace_invalid.ace_deprecated { - color: ${colors.global.textAlt}; - background-color: ${colors.variant.primary}; + color: var(--ace-token-invalid-deprecated-color); + background-color: var(--ace-token-invalid-deprecated-bg); } .ace_fold { background-color: ${colors.variant.info}; - border-color: ${colors.variant.darkest.default}; + border-color: var(--ace-token-fold-border); } .ace_entity.ace_name.ace_function, .ace_support.ace_function, - .ace_variable { - color: ${colors.variant.info}; + .ace_variable, + .ace_term { + color: var(--ace-token-function); } .ace_support.ace_class, .ace_support.ace_type { - color: ${colors.variant.darker.warning}; + color: var(--ace-token-class); } .ace_heading, .ace_markup.ace_heading, .ace_string { - color: ${colors.variant.darker.success}; + color: var(--ace-token-heading); } .ace_entity.ace_name.ace_tag, @@ -122,7 +157,7 @@ const aceEditorStyles = (colors: StyledComponentsTheme['colors']) => ` .ace_meta.ace_tag, .ace_string.ace_regexp, .ace_variable { - color: ${colors.variant.light.danger}; + color: var(--ace-token-tag); } .ace_comment { @@ -134,12 +169,46 @@ const aceEditorStyles = (colors: StyledComponentsTheme['colors']) => ` padding: 4px; padding-left: 0; line-height: 1.5; - + .ace_icon { margin-right: 3px; } } } + + .ace-graylog { + --ace-active-line-bg: ${colors.variant.lightest.default}; + --ace-invisible-color: ${colors.gray[70]}; + + // Code syntax highlighting + --ace-token-keyword: ${colors.global.link}; + --ace-token-operator: ${colors.variant.darker.info}; + --ace-token-constant: ${colors.variant.darker.primary}; + --ace-token-constant-other: ${colors.variant.darker.default}; + --ace-token-invalid-color: ${colors.global.textAlt}; + --ace-token-invalid-bg: ${colors.variant.light.danger}; + --ace-token-invalid-deprecated-color: ${colors.global.textAlt}; + --ace-token-invalid-deprecated-bg: ${colors.variant.primary}; + --ace-token-fold-border: ${colors.variant.darkest.default}; + --ace-token-function: ${colors.variant.info}; + --ace-token-class: ${colors.variant.darker.warning}; + --ace-token-heading: ${colors.variant.darker.success}; + --ace-token-tag: ${colors.variant.light.danger}; + } + + .ace-queryinput { + // Code syntax highlighting + --ace-token-keyword: ${colors.variant.info}; + --ace-token-operator: ${colors.text.primary}; + --ace-token-constant: ${colors.variant.dark.danger}; + --ace-token-constant-other: ${colors.variant.default}; + --ace-token-invalid-bg: ${colors.variant.danger}; + --ace-token-invalid-deprecated-bg: ${colors.variant.dark.primary}; + --ace-token-function: ${colors.variant.darker.info}; + --ace-token-class: ${colors.variant.dark.warning}; + --ace-token-heading: ${colors.variant.dark.success}; + --ace-token-tag: ${colors.variant.danger}; + } `; export default aceEditorStyles; diff --git a/lib/styled-components/generated/theme.json b/lib/styled-components/generated/theme.json index 152dc8f..f704ba9 100644 --- a/lib/styled-components/generated/theme.json +++ b/lib/styled-components/generated/theme.json @@ -997,10 +997,10 @@ }, "components": { "light": { - "aceEditor": "\n .ace_editor {\n border: 1px solid #C1C7DC !important;\n border-radius: 0;\n }\n\n .ace-graylog {\n background-color: #fff;\n color: #06050F;\n\n &.ace_multiselect .ace_selection.ace_start {\n box-shadow: 0 0 3px 0 #fff;\n }\n\n .ace_gutter {\n background: #CAC8D7;\n color: #06050F;\n }\n\n .ace_print-margin {\n width: 1px;\n background: #FAF9FF;\n }\n\n .ace_cursor {\n border-color: #252D47;\n }\n\n .ace_marker-layer {\n .ace_selection {\n background: Highlight;\n }\n\n .ace_step {\n background: rgb(255 255 0);\n }\n\n .ace_bracket {\n margin: -1px 0 0 -1px;\n border: 1px solid #b6b9c2;\n }\n\n .ace_selected-word {\n border: 1px solid #9ea2ad;\n background: transparent;\n }\n\n .ace_active-line {\n background: #FAF9FF;\n }\n }\n\n .ace_gutter-active-line {\n background-color: #FAF9FF;\n }\n\n .ace_invisible {\n color: #b6b9c2;\n }\n\n .ace_keyword,\n .ace_meta,\n .ace_storage,\n .ace_storage.ace_type,\n .ace_support.ace_type {\n color: #1877EF;\n }\n\n .ace_keyword.ace_operator {\n color: #006B8F;\n }\n\n .ace_constant.ace_character,\n .ace_constant.ace_language,\n .ace_constant.ace_numeric,\n .ace_keyword.ace_other.ace_unit,\n .ace_support.ace_constant,\n .ace_variable.ace_parameter {\n color: #083772;\n }\n\n .ace_constant.ace_other {\n color: #0D0A1F;\n }\n\n .ace_invalid {\n color: #fff;\n background-color: #FE6E6D;\n }\n\n .ace_invalid.ace_deprecated {\n color: #fff;\n background-color: #1877EF;\n }\n\n .ace_fold {\n background-color: #03C2FF;\n border-color: #06050F;\n }\n\n .ace_entity.ace_name.ace_function,\n .ace_support.ace_function,\n .ace_variable {\n color: #03C2FF;\n }\n\n .ace_support.ace_class,\n .ace_support.ace_type {\n color: #7A6000;\n }\n\n .ace_heading,\n .ace_markup.ace_heading,\n .ace_string {\n color: #128057;\n }\n\n .ace_entity.ace_name.ace_tag,\n .ace_entity.ace_other.ace_attribute-name,\n .ace_meta.ace_tag,\n .ace_string.ace_regexp,\n .ace_variable {\n color: #FE6E6D;\n }\n\n .ace_comment {\n color: rgba(37,45,71,0.6);\n }\n\n .ace_tooltip {\n background-color: #EEEDF6;\n padding: 4px;\n padding-left: 0;\n line-height: 1.5;\n \n .ace_icon {\n margin-right: 3px;\n }\n }\n }\n" + "aceEditor": "\n .ace_editor {\n border: 1px solid #C1C7DC !important;\n border-radius: 0;\n background-color: #fff;\n color: #06050F;\n\n &.ace_multiselect .ace_selection.ace_start {\n box-shadow: 0 0 3px 0 #fff;\n }\n\n .ace_gutter {\n background: #fff;\n color: rgba(37,45,71,0.6);\n border-right: 1px solid #C1C7DC;\n }\n\n .ace_print-margin {\n width: 1px;\n background: #fff;\n }\n\n .ace_cursor {\n border-color: #252D47;\n color: #252D47;\n }\n\n .ace_marker {\n border-bottom: 2px dashed;\n position: absolute;\n border-radius: 0;\n margin-top: 1px;\n }\n\n .ace_marker.ace_validation_error {\n border-color: #FE4A49;\n }\n\n .ace_marker.ace_validation_warning {\n border-color: #FFCA0A;\n }\n\n .ace_marker-layer {\n .ace_selection {\n background: Highlight;\n border-radius: 0;\n }\n\n .ace_step {\n background: #FFCA0A;\n }\n\n .ace_bracket {\n margin: -1px 0 0 -1px;\n border: 1px solid #b6b9c2;\n }\n\n .ace_selected-word {\n border: 1px solid #9ea2ad;\n background: transparent;\n }\n\n .ace_active-line {\n background: var(--ace-active-line-bg, #fff);\n }\n }\n\n .ace_gutter-active-line {\n background-color: #FAF9FF;\n }\n\n .ace_invisible {\n color: var(--ace-invisible-color, #fff);\n }\n\n .ace_placeholder {\n left: 0;\n right: 0;\n padding: 0;\n margin-top: 6px;\n margin-left: 4px;\n margin-right: 4px;\n transform: none;\n opacity: 1;\n z-index: auto !important;\n font-family: \"Ubuntu Mono\", Menlo, Monaco, Consolas, \"Courier New\", monospace !important;\n font-size: 1.000rem;\n color: #9ea2ad;\n text-overflow: ellipsis;\n max-width: 100%;\n overflow: hidden;\n }\n\n .ace_keyword,\n .ace_meta,\n .ace_storage,\n .ace_storage.ace_type,\n .ace_support.ace_type {\n color: var(--ace-token-keyword);\n }\n\n .ace_keyword.ace_operator {\n color: var(--ace-token-operator);\n }\n\n .ace_constant.ace_character,\n .ace_constant.ace_language,\n .ace_constant.ace_numeric,\n .ace_keyword.ace_other.ace_unit,\n .ace_support.ace_constant,\n .ace_variable.ace_parameter {\n color: var(--ace-token-constant);\n }\n\n .ace_constant.ace_other {\n color: var(--ace-token-constant-other);\n }\n\n .ace_invalid {\n color: var(--ace-token-invalid-color);\n background-color: var(--ace-token-invalid-bg);\n }\n\n .ace_invalid.ace_deprecated {\n color: var(--ace-token-invalid-deprecated-color);\n background-color: var(--ace-token-invalid-deprecated-bg);\n }\n\n .ace_fold {\n background-color: #03C2FF;\n border-color: var(--ace-token-fold-border);\n }\n\n .ace_entity.ace_name.ace_function,\n .ace_support.ace_function,\n .ace_variable,\n .ace_term {\n color: var(--ace-token-function);\n }\n\n .ace_support.ace_class,\n .ace_support.ace_type {\n color: var(--ace-token-class);\n }\n\n .ace_heading,\n .ace_markup.ace_heading,\n .ace_string {\n color: var(--ace-token-heading);\n }\n\n .ace_entity.ace_name.ace_tag,\n .ace_entity.ace_other.ace_attribute-name,\n .ace_meta.ace_tag,\n .ace_string.ace_regexp,\n .ace_variable {\n color: var(--ace-token-tag);\n }\n\n .ace_comment {\n color: rgba(37,45,71,0.6);\n }\n\n .ace_tooltip {\n background-color: #EEEDF6;\n padding: 4px;\n padding-left: 0;\n line-height: 1.5;\n\n .ace_icon {\n margin-right: 3px;\n }\n }\n }\n\n .ace-graylog {\n --ace-active-line-bg: #FAF9FF;\n --ace-invisible-color: #b6b9c2;\n\n // Code syntax highlighting\n --ace-token-keyword: #1877EF;\n --ace-token-operator: #006B8F;\n --ace-token-constant: #083772;\n --ace-token-constant-other: #0D0A1F;\n --ace-token-invalid-color: #fff;\n --ace-token-invalid-bg: #FE6E6D;\n --ace-token-invalid-deprecated-color: #fff;\n --ace-token-invalid-deprecated-bg: #1877EF;\n --ace-token-fold-border: #06050F;\n --ace-token-function: #03C2FF;\n --ace-token-class: #7A6000;\n --ace-token-heading: #128057;\n --ace-token-tag: #FE6E6D;\n }\n\n .ace-queryinput {\n // Code syntax highlighting\n --ace-token-keyword: #03C2FF;\n --ace-token-operator: #252D47;\n --ace-token-constant: #E74342;\n --ace-token-constant-other: #20194D;\n --ace-token-invalid-bg: #FE4A49;\n --ace-token-invalid-deprecated-bg: #1064CD;\n --ace-token-function: #006B8F;\n --ace-token-class: #FFCA0A;\n --ace-token-heading: #22B07A;\n --ace-token-tag: #FE4A49;\n }\n" }, "dark": { - "aceEditor": "\n .ace_editor {\n border: 1px solid rgba(141,138,169,0.74) !important;\n border-radius: 0;\n }\n\n .ace-graylog {\n background-color: #232B43;\n color: #FAF9FF;\n\n &.ace_multiselect .ace_selection.ace_start {\n box-shadow: 0 0 3px 0 #232B43;\n }\n\n .ace_gutter {\n background: #0D0A1F;\n color: #FAF9FF;\n }\n\n .ace_print-margin {\n width: 1px;\n background: #06050F;\n }\n\n .ace_cursor {\n border-color: #F6F7FC;\n }\n\n .ace_marker-layer {\n .ace_selection {\n background: Highlight;\n }\n\n .ace_step {\n background: rgb(255 255 0);\n }\n\n .ace_bracket {\n margin: -1px 0 0 -1px;\n border: 1px solid #b0b0b0;\n }\n\n .ace_selected-word {\n border: 1px solid #bdbdbd;\n background: transparent;\n }\n\n .ace_active-line {\n background: #06050F;\n }\n }\n\n .ace_gutter-active-line {\n background-color: #06050F;\n }\n\n .ace_invisible {\n color: #b0b0b0;\n }\n\n .ace_keyword,\n .ace_meta,\n .ace_storage,\n .ace_storage.ace_type,\n .ace_support.ace_type {\n color: #4396FF;\n }\n\n .ace_keyword.ace_operator {\n color: #85E0FF;\n }\n\n .ace_constant.ace_character,\n .ace_constant.ace_language,\n .ace_constant.ace_numeric,\n .ace_keyword.ace_other.ace_unit,\n .ace_support.ace_constant,\n .ace_variable.ace_parameter {\n color: #7FB8FF;\n }\n\n .ace_constant.ace_other {\n color: #CAC8D7;\n }\n\n .ace_invalid {\n color: #252D47;\n background-color: #E74342;\n }\n\n .ace_invalid.ace_deprecated {\n color: #252D47;\n background-color: #1877EF;\n }\n\n .ace_fold {\n background-color: #03C2FF;\n border-color: #FAF9FF;\n }\n\n .ace_entity.ace_name.ace_function,\n .ace_support.ace_function,\n .ace_variable {\n color: #03C2FF;\n }\n\n .ace_support.ace_class,\n .ace_support.ace_type {\n color: #FFEDAD;\n }\n\n .ace_heading,\n .ace_markup.ace_heading,\n .ace_string {\n color: #69F9C3;\n }\n\n .ace_entity.ace_name.ace_tag,\n .ace_entity.ace_other.ace_attribute-name,\n .ace_meta.ace_tag,\n .ace_string.ace_regexp,\n .ace_variable {\n color: #E74342;\n }\n\n .ace_comment {\n color: rgba(246,247,252,0.6);\n }\n\n .ace_tooltip {\n background-color: #12182B;\n padding: 4px;\n padding-left: 0;\n line-height: 1.5;\n \n .ace_icon {\n margin-right: 3px;\n }\n }\n }\n" + "aceEditor": "\n .ace_editor {\n border: 1px solid rgba(141,138,169,0.74) !important;\n border-radius: 0;\n background-color: #1C2235;\n color: #FAF9FF;\n\n &.ace_multiselect .ace_selection.ace_start {\n box-shadow: 0 0 3px 0 #1C2235;\n }\n\n .ace_gutter {\n background: #1C2235;\n color: rgba(246,247,252,0.6);\n border-right: 1px solid rgba(141,138,169,0.74);\n }\n\n .ace_print-margin {\n width: 1px;\n background: #1C2235;\n }\n\n .ace_cursor {\n border-color: #F6F7FC;\n color: #F6F7FC;\n }\n\n .ace_marker {\n border-bottom: 2px dashed;\n position: absolute;\n border-radius: 0;\n margin-top: 1px;\n }\n\n .ace_marker.ace_validation_error {\n border-color: #FE4A49;\n }\n\n .ace_marker.ace_validation_warning {\n border-color: #FFDC5C;\n }\n\n .ace_marker-layer {\n .ace_selection {\n background: Highlight;\n border-radius: 0;\n }\n\n .ace_step {\n background: #FFCA0A;\n }\n\n .ace_bracket {\n margin: -1px 0 0 -1px;\n border: 1px solid #b0b0b0;\n }\n\n .ace_selected-word {\n border: 1px solid #bdbdbd;\n background: transparent;\n }\n\n .ace_active-line {\n background: var(--ace-active-line-bg, #1C2235);\n }\n }\n\n .ace_gutter-active-line {\n background-color: #06050F;\n }\n\n .ace_invisible {\n color: var(--ace-invisible-color, #1C2235);\n }\n\n .ace_placeholder {\n left: 0;\n right: 0;\n padding: 0;\n margin-top: 6px;\n margin-left: 4px;\n margin-right: 4px;\n transform: none;\n opacity: 1;\n z-index: auto !important;\n font-family: \"Ubuntu Mono\", Menlo, Monaco, Consolas, \"Courier New\", monospace !important;\n font-size: 1.000rem;\n color: #bdbdbd;\n text-overflow: ellipsis;\n max-width: 100%;\n overflow: hidden;\n }\n\n .ace_keyword,\n .ace_meta,\n .ace_storage,\n .ace_storage.ace_type,\n .ace_support.ace_type {\n color: var(--ace-token-keyword);\n }\n\n .ace_keyword.ace_operator {\n color: var(--ace-token-operator);\n }\n\n .ace_constant.ace_character,\n .ace_constant.ace_language,\n .ace_constant.ace_numeric,\n .ace_keyword.ace_other.ace_unit,\n .ace_support.ace_constant,\n .ace_variable.ace_parameter {\n color: var(--ace-token-constant);\n }\n\n .ace_constant.ace_other {\n color: var(--ace-token-constant-other);\n }\n\n .ace_invalid {\n color: var(--ace-token-invalid-color);\n background-color: var(--ace-token-invalid-bg);\n }\n\n .ace_invalid.ace_deprecated {\n color: var(--ace-token-invalid-deprecated-color);\n background-color: var(--ace-token-invalid-deprecated-bg);\n }\n\n .ace_fold {\n background-color: #03C2FF;\n border-color: var(--ace-token-fold-border);\n }\n\n .ace_entity.ace_name.ace_function,\n .ace_support.ace_function,\n .ace_variable,\n .ace_term {\n color: var(--ace-token-function);\n }\n\n .ace_support.ace_class,\n .ace_support.ace_type {\n color: var(--ace-token-class);\n }\n\n .ace_heading,\n .ace_markup.ace_heading,\n .ace_string {\n color: var(--ace-token-heading);\n }\n\n .ace_entity.ace_name.ace_tag,\n .ace_entity.ace_other.ace_attribute-name,\n .ace_meta.ace_tag,\n .ace_string.ace_regexp,\n .ace_variable {\n color: var(--ace-token-tag);\n }\n\n .ace_comment {\n color: rgba(246,247,252,0.6);\n }\n\n .ace_tooltip {\n background-color: #12182B;\n padding: 4px;\n padding-left: 0;\n line-height: 1.5;\n\n .ace_icon {\n margin-right: 3px;\n }\n }\n }\n\n .ace-graylog {\n --ace-active-line-bg: #06050F;\n --ace-invisible-color: #b0b0b0;\n\n // Code syntax highlighting\n --ace-token-keyword: #4396FF;\n --ace-token-operator: #85E0FF;\n --ace-token-constant: #7FB8FF;\n --ace-token-constant-other: #CAC8D7;\n --ace-token-invalid-color: #252D47;\n --ace-token-invalid-bg: #E74342;\n --ace-token-invalid-deprecated-color: #252D47;\n --ace-token-invalid-deprecated-bg: #1877EF;\n --ace-token-fold-border: #FAF9FF;\n --ace-token-function: #03C2FF;\n --ace-token-class: #FFEDAD;\n --ace-token-heading: #69F9C3;\n --ace-token-tag: #E74342;\n }\n\n .ace-queryinput {\n // Code syntax highlighting\n --ace-token-keyword: #03C2FF;\n --ace-token-operator: #F6F7FC;\n --ace-token-constant: #FE6E6D;\n --ace-token-constant-other: #20194D;\n --ace-token-invalid-bg: #FE4A49;\n --ace-token-invalid-deprecated-bg: #4396FF;\n --ace-token-function: #85E0FF;\n --ace-token-class: #FFDC5C;\n --ace-token-heading: #45E5A8;\n --ace-token-tag: #FE4A49;\n }\n" } } } \ No newline at end of file