From b0ee067fadaf9593ed2207f363a402eb9ab8d57a Mon Sep 17 00:00:00 2001 From: Marin Sokol Date: Thu, 30 Nov 2023 11:01:56 +0100 Subject: [PATCH] feat: adding CloudEditor theme (#5404) * feat: adding CloudEditor theme --- src/ext/themelist.js | 4 +- src/theme/cloud_editor-css.js | 185 ++++++++++++++++++++++++++++ src/theme/cloud_editor.js | 6 + src/theme/cloud_editor_dark-css.js | 188 +++++++++++++++++++++++++++++ src/theme/cloud_editor_dark.js | 6 + 5 files changed, 388 insertions(+), 1 deletion(-) create mode 100644 src/theme/cloud_editor-css.js create mode 100644 src/theme/cloud_editor.js create mode 100644 src/theme/cloud_editor_dark-css.js create mode 100644 src/theme/cloud_editor_dark.js diff --git a/src/ext/themelist.js b/src/ext/themelist.js index 9711895c973..770ceba8ba6 100644 --- a/src/ext/themelist.js +++ b/src/ext/themelist.js @@ -24,6 +24,7 @@ var themeData = [ ["Kuroir"], ["KatzenMilch"], ["SQL Server" ,"sqlserver" , "light"], + ["CloudEditor" ,"cloud_editor" , "light"], ["Ambiance" ,"ambiance" , "dark"], ["Chaos" ,"chaos" , "dark"], ["Clouds Midnight" ,"clouds_midnight" , "dark"], @@ -48,7 +49,8 @@ var themeData = [ ["Tomorrow Night 80s" ,"tomorrow_night_eighties" , "dark"], ["Twilight" ,"twilight" , "dark"], ["Vibrant Ink" ,"vibrant_ink" , "dark"], - ["GitHub Dark" ,"github_dark" , "dark"] + ["GitHub Dark" ,"github_dark" , "dark"], + ["CloudEditor Dark" ,"cloud_editor_dark" , "dark"] ]; diff --git a/src/theme/cloud_editor-css.js b/src/theme/cloud_editor-css.js new file mode 100644 index 00000000000..4ec44de04bd --- /dev/null +++ b/src/theme/cloud_editor-css.js @@ -0,0 +1,185 @@ +module.exports = ` +.ace-cloud_editor .ace_gutter { + background: #ffffff; + color: #3a3a42; +} + +.ace-cloud_editor .ace_tooltip-marker-error.ace_tooltip-marker { + background-color: #d13212; +} +.ace-cloud_editor .ace_tooltip-marker-warning.ace_tooltip-marker { + background-color: #906806; +} + +.ace-cloud_editor .ace_print-margin { + width: 1px; + background: #697077; +} + +.ace-cloud_editor { + background-color: #ffffff; + color: #3a3a42; +} + +.ace-cloud_editor .ace_cursor { + color: #3a3a42; +} + +.ace-cloud_editor .ace_marker-layer .ace_selection { + background: #bfceff; +} + +.ace-cloud_editor.ace_multiselect .ace_selection.ace_start { + box-shadow: 0 0 3px 0px #ffffff; + border-radius: 2px; +} + +.ace-cloud_editor .ace_marker-layer .ace_step { + background: #697077; +} + +.ace-cloud_editor .ace_marker-layer .ace_bracket { + margin: 0 0 0 -1px; + border: 1px solid #697077; +} + +.ace-cloud_editor .ace_marker-layer .ace_active-line { + box-sizing: border-box; + border-top: 1px solid #9191ac; + border-bottom: 1px solid #9191ac; +} + +.ace-cloud_editor .ace_gutter-cell_svg-icons { + box-sizing: border-box; + border-top: 1px solid #ffffff; + border-bottom: 1px solid #ffffff; +} + +.ace-cloud_editor .ace_gutter-active-line { + background-repeat: no-repeat; + box-sizing: border-box; + border-top: 1px solid #9191ac; + border-bottom: 1px solid #9191ac; +} + +.ace-cloud_editor .ace_marker-layer .ace_selected-word { + border: 1px solid #bfceff; +} + +.ace-cloud_editor .ace_fold { + background-color: #2963d6; + border-color: #3a3a42; +} + +.ace-cloud_editor .ace_keyword { + color: #9749d1; +} + +.ace-cloud_editor .ace_meta.ace_tag { + color: #d1000a; +} + +.ace-cloud_editor .ace_constant { + color: #a26202; +} + +.ace-cloud_editor .ace_constant.ace_numeric { + color: #a26202; +} + +.ace-cloud_editor .ace_constant.ace_character.ace_escape { + color: #d91792; +} + +.ace-cloud_editor .ace_support.ace_function { + color: #2963d6; +} + +.ace-cloud_editor .ace_support.ace_class { + color: #a26202; +} + +.ace-cloud_editor .ace_storage { + color: #9749d1; +} + +.ace-cloud_editor .ace_invalid.ace_illegal { + color: #ffffff; + background-color: #d1000a; +} + +.ace-cloud_editor .ace_invalid.ace_deprecated { + color: #ffffff; + background-color: #a26202; +} + +.ace-cloud_editor .ace_string { + color: #218000; +} + +.ace-cloud_editor .ace_string.ace_regexp { + color: #218000; +} + +.ace-cloud_editor .ace_comment, +.ace-cloud_editor .ace_ghost_text { + color: #697077; + opacity: 1; +} + +.ace-cloud_editor .ace_variable { + color: #d1000a; +} + +.ace-cloud_editor .ace_meta.ace_selector { + color: #9749d1; +} + +.ace-cloud_editor .ace_entity.ace_other.ace_attribute-name { + color: #a26202; +} + +.ace-cloud_editor .ace_entity.ace_name.ace_function { + color: #2963d6; +} + +.ace-cloud_editor .ace_entity.ace_name.ace_tag { + color: #d1000a; +} + +.ace-cloud_editor .ace_heading { + color: #2963d6; +} + +.ace-cloud_editor .ace_xml-pe { + color: #a26202; +} +.ace-cloud_editor .ace_doctype { + color: #d1000a; +} + +.ace-cloud_editor .ace_tooltip { + background-color: #ffffff; + color: #3a3a42; +} + +.ace-cloud_editor .ace_icon_svg.ace_error, +.ace-cloud_editor .ace_icon_svg.ace_error_fold { + background-color: #d13212; +} +.ace-cloud_editor .ace_icon_svg.ace_warning, +.ace-cloud_editor .ace_icon_svg.ace_warning_fold { + background-color: #906806; +} +.ace-cloud_editor .ace_icon_svg.ace_info { + background-color: #0073bb; +} +.ace-cloud_editor .ace_highlight-marker { + background: none; + border: #2963d6 1px solid; +} +.ace-cloud_editor .ace_tooltip.ace_hover-tooltip:focus > div { + outline: 1px solid #0073bb; +} + +`; \ No newline at end of file diff --git a/src/theme/cloud_editor.js b/src/theme/cloud_editor.js new file mode 100644 index 00000000000..23a5eb5a835 --- /dev/null +++ b/src/theme/cloud_editor.js @@ -0,0 +1,6 @@ +exports.isDark = false; +exports.cssClass = "ace-cloud_editor"; +exports.cssText = require("./cloud_editor-css"); + +var dom = require("../lib/dom"); +dom.importCssString(exports.cssText, exports.cssClass, false); diff --git a/src/theme/cloud_editor_dark-css.js b/src/theme/cloud_editor_dark-css.js new file mode 100644 index 00000000000..14df54d8437 --- /dev/null +++ b/src/theme/cloud_editor_dark-css.js @@ -0,0 +1,188 @@ +module.exports = ` +.ace-cloud_editor_dark .ace_gutter { + background: #282c34; + color: #8e96a9; +} + +.ace-cloud_editor_dark.ace_dark .ace_tooltip-marker-error.ace_tooltip-marker { + background-color: #ff5d64; +} +.ace-cloud_editor_dark.ace_dark .ace_tooltip-marker-warning.ace_tooltip-marker { + background-color: #e0ca57; +} + +.ace-cloud_editor_dark .ace_print-margin { + width: 1px; + background: #e8e8e8; +} + +.ace-cloud_editor_dark { + background-color: #282c34; + color: #dcdfe4; +} + +.ace-cloud_editor_dark .ace_cursor { + color: #66b2f0; +} + +.ace-cloud_editor_dark .ace_marker-layer .ace_selection { + background: #213a70; +} + +.ace-cloud_editor_dark.ace_multiselect .ace_selection.ace_start { + box-shadow: 0 0 3px 0px #8e96a9; + border-radius: 2px; +} + +.ace-cloud_editor_dark .ace_marker-layer .ace_step { + background: #6fb342; +} + +.ace-cloud_editor_dark .ace_marker-layer .ace_bracket { + margin: 0 0 0 -1px; + border: 1px solid #e8e8e8; +} + +.ace-cloud_editor_dark .ace_marker-layer .ace_active-line { + box-sizing: border-box; + border-top: 1px solid #75777a; + border-bottom: 1px solid #75777a; +} + +.ace-cloud_editor_dark .ace_gutter-cell_svg-icons { + box-sizing: border-box; + border-top: 1px solid #282c34; + border-bottom: 1px solid #282c34; +} + +.ace-cloud_editor_dark .ace_gutter-active-line { + background-repeat: no-repeat; + box-sizing: border-box; + border-top: 1px solid #75777a; + border-bottom: 1px solid #75777a; +} + +.ace-cloud_editor_dark .ace_marker-layer .ace_selected-word { + border: 1px solid #282c34; +} + +.ace-cloud_editor_dark .ace_fold { + background-color: #66b2f0; + border-color: #dcdfe4; +} + +.ace-cloud_editor_dark .ace_keyword { + color: #c674dc; +} + +.ace-cloud_editor_dark .ace_constant { + color: #e5c383; +} + +.ace-cloud_editor_dark .ace_constant.ace_numeric { + color: #e5c383; +} + +.ace-cloud_editor_dark .ace_constant.ace_character.ace_escape { + color: #71ccc7; +} + +.ace-cloud_editor_dark .ace_support.ace_function { + color: #66b2f0; +} + +.ace-cloud_editor_dark .ace_support.ace_class { + color: #e5c383; +} + +.ace-cloud_editor_dark .ace_storage { + color: #c674dc; +} + +.ace-cloud_editor_dark .ace_invalid.ace_illegal { + color: #dcdfe4; + background-color: #e76a71; +} + +.ace-cloud_editor_dark .ace_invalid.ace_deprecated { + color: #dcdfe4; + background-color: #e5c383; +} + +.ace-cloud_editor_dark .ace_string { + color: #6fb342; +} + +.ace-cloud_editor_dark .ace_string.ace_regexp { + color: #6fb342; +} + +.ace-cloud_editor_dark .ace_comment, +.ace-cloud_editor_dark .ace_ghost_text { + color: #b5bac0; + opacity: 1; +} + +.ace-cloud_editor_dark .ace_variable { + color: #e76a71; +} + +.ace-cloud_editor_dark .ace_meta.ace_selector { + color: #c674dc; +} + +.ace-cloud_editor_dark .ace_entity.ace_other.ace_attribute-name { + color: #e5c383; +} + +.ace-cloud_editor_dark .ace_entity.ace_name.ace_function { + color: #66b2f0; +} + +.ace-cloud_editor_dark .ace_entity.ace_name.ace_tag { + color: #e76a71; +} +.ace-cloud_editor_dark .ace_heading { + color: #66b2f0; +} + +.ace-cloud_editor_dark .ace_xml-pe { + color: #e5c383; +} +.ace-cloud_editor_dark .ace_doctype { + color: #e76a71; +} + +.ace-cloud_editor_dark .ace_entity.ace_name.ace_tag, +.ace-cloud_editor_dark .ace_entity.ace_other.ace_attribute-name, +.ace-cloud_editor_dark .ace_meta.ace_tag, +.ace-cloud_editor_dark .ace_string.ace_regexp, +.ace-cloud_editor_dark .ace_variable { + color: #e76a71; +} + +.ace-cloud_editor_dark .ace_tooltip { + background-color: #282c34; + color: #dcdfe4; +} + +.ace-cloud_editor_dark .ace_icon_svg.ace_error, +.ace-cloud_editor_dark .ace_icon_svg.ace_error_fold { + background-color: #ff5d64; +} +.ace-cloud_editor_dark .ace_icon_svg.ace_warning, +.ace-cloud_editor_dark .ace_icon_svg.ace_warning_fold { + background-color: #e0ca57; +} +.ace-cloud_editor_dark .ace_icon_svg.ace_info { + background-color: #44b9d6; +} +.ace-cloud_editor_dark .ace_highlight-marker { + background: none; + border: #66b2f0 1px solid; +} +.ace-cloud_editor_dark .ace_tooltip.ace_hover-tooltip:focus > div { + outline: 1px solid #44b9d6; +} + +`; \ No newline at end of file diff --git a/src/theme/cloud_editor_dark.js b/src/theme/cloud_editor_dark.js new file mode 100644 index 00000000000..9aa93b85cd3 --- /dev/null +++ b/src/theme/cloud_editor_dark.js @@ -0,0 +1,6 @@ +exports.isDark = true; +exports.cssClass = "ace-cloud_editor_dark"; +exports.cssText = require("./cloud_editor_dark-css"); + +var dom = require("../lib/dom"); +dom.importCssString(exports.cssText, exports.cssClass, false);