From 190b0e27a72093c272d388e448dee67911448a4b Mon Sep 17 00:00:00 2001
From: Hirame1 <56225774+Hirame1@users.noreply.github.com>
Date: Sun, 8 May 2022 13:53:44 +0700
Subject: [PATCH] Dark tomato is darker, Light tomato is lighter

---
 public/stylesheets/automator.css              | 94 +++++++++++++++----
 public/stylesheets/codemirror/liquibyte.css   | 34 +++++--
 public/stylesheets/styles.css                 | 43 +++++++--
 .../modals/AutomatorScriptTemplate.vue        | 10 +-
 .../tabs/automator/AutomatorButton.vue        |  1 +
 .../automator/AutomatorDocsTemplateList.vue   |  3 +-
 .../tabs/automator/AutomatorEditor.vue        | 48 ++++++++++
 7 files changed, 192 insertions(+), 41 deletions(-)

diff --git a/public/stylesheets/automator.css b/public/stylesheets/automator.css
index 8659eee46..6e5d39451 100644
--- a/public/stylesheets/automator.css
+++ b/public/stylesheets/automator.css
@@ -1,6 +1,54 @@
+:root {
+  --color-automator-controls-background: lightgray;
+  --color-automator-splitter: gray;
+  --color-automator-active-line-background: rgba(178, 151, 214, 0.527);
+  --color-automator-active-line-outline: rgb(122, 73, 255);
+  --color-automator-event-background: rgb(0, 127, 0);
+  --color-automator-event-outline: rgb(25, 200, 25);
+  --color-automator-error-background: rgb(172, 6, 23);
+  --color-automator-error-outline: rgb(255, 0, 64);
+  --color-automator-docs-background: white;
+  --color-automator-docs-font: black;
+  --color-automator-error-underline: red;
+  --color-blockmator-block-border: #cfcfcf;
+  --color-blockmator-block-background: #f5f5f5;
+  --color-blockmator-block-font: #a142ff;
+  --color-blockmator-active-background: #b597d3;
+  --color-blockmator-editor-background: white;
+  --color-blockmator-editor-selection: #007f7f;
+  --color-blockmator-editor-input: rgb(0, 172, 0);
+  --color-blockmator-nested-block-border: #369b36;
+  --color-blockmator-block-delete: #ff3333;
+  --color-template-textbox-border: black;
+}
+
+:root .s-base--dark {
+  --color-automator-controls-background: #262626;
+  --color-automator-splitter: gray;
+  --color-automator-active-line-background: rgb(43, 6, 92);
+  --color-automator-active-line-outline: rgb(68, 0, 255);
+  --color-automator-event-background: rgb(0, 127, 0);
+  --color-automator-event-outline: rgb(25, 200, 25);
+  --color-automator-error-background: rgb(172, 6, 23);
+  --color-automator-error-outline: rgb(255, 0, 64);
+  --color-automator-docs-background: black;
+  --color-automator-docs-font: white;
+  --color-automator-error-underline: red;
+  --color-blockmator-block-border: #353535;
+  --color-blockmator-block-background: #000115;
+  --color-blockmator-block-font: #c080ff;
+  --color-blockmator-active-background: #50316f;
+  --color-blockmator-editor-background: black;
+  --color-blockmator-editor-selection: #01a1a1;
+  --color-blockmator-editor-input: #0f0;
+  --color-blockmator-nested-block-border: #55ff55;
+  --color-blockmator-block-delete: #ff3333;
+  --color-template-textbox-border: black;
+}
+
 ._-automator-split-pane-fix {
   width: 100%;
-  background-color: black;
+  background-color: var(--color-automator-splitter);
 }
 
 .c-automator-tab {
@@ -133,7 +181,7 @@
 }
 
 .c-automator__controls {
-  background-color: #262626;
+  background-color: var(--color-automator-controls-background);
 }
 
 .l-automator__controls {
@@ -169,46 +217,47 @@
 }
 
 .c-automator-editor__active-line {
-  background: rgb(43, 6, 92);
-  outline: 0.1rem solid rgb(68, 0, 255);
+  background: var(--color-automator-active-line-background);
+  outline: 0.1rem solid var(--color-automator-active-line-outline);
 }
 
 .c-automator-editor__active-line-gutter {
   font-weight: bold;
-  background: rgb(43, 6, 92);
-  outline: 0.1rem solid rgb(68, 0, 255);
+  background: var(--color-automator-active-line-background);
   filter: brightness(200%);
+  outline: 0.1rem solid var(--color-automator-active-line-outline);
 }
 
 .c-automator-editor__event-line {
-  background: rgb(0, 127, 0);
-  outline: 0.1rem solid rgb(25, 200, 25);
+  background: var(--color-automator-event-background);
+  outline: 0.1rem solid var(--color-automator-event-outline);
 }
 
 .c-automator-editor__event-line-gutter {
   font-weight: bold;
-  background: rgb(0, 127, 0);
-  outline: 0.1rem solid rgb(25, 200, 25);
+  background: var(--color-automator-event-background);
   filter: brightness(200%);
+  outline: 0.1rem solid var(--color-automator-event-outline);
 }
 
 .c-automator-editor__error-line {
-  background: rgb(172, 6, 23);
-  outline: 0.1rem solid rgb(255, 0, 64);
+  background: var(--color-automator-error-background);
+  outline: 0.1rem solid var(--color-automator-event-outline);
 }
 
 .c-automator-editor__error-line-gutter {
   font-weight: bold;
-  background: rgb(172, 6, 23);
-  outline: 0.1rem solid rgb(255, 0, 64);
+  background: var(--color-automator-error-background);
   filter: brightness(200%);
+  outline: 0.1rem solid var(--color-automator-event-outline);
 }
 
 .c-automator-editor {
   text-align: left;
   font-family: Typewriter, serif;
   font-size: 1.4rem;
-  border-bottom: 0.15rem solid #262626;
+  text-align: left;
+  border-bottom: 0.15rem solid var(--color-automator-controls-background);
 }
 
 .l-automator-editor {
@@ -246,12 +295,13 @@
 .c-automator-docs {
   overflow: auto;
   text-align: left;
-  font-size: 1.4rem;
-  color: black;
-  background-color: lightgray;
-  border-right: 0.15rem solid #262626;
-  border-bottom: 0.15rem solid #262626;
   padding-left: 1rem;
+  border-right: 0.15rem solid var(--color-automator-controls-background);
+  border-bottom: 0.15rem solid var(--color-automator-controls-background);
+  background-color: var(--color-automator-docs-background);
+  padding-left: 1rem;
+  font-size: 1.4rem;
+  color: var(--color-automator-docs-font);
 }
 
 .c-automator-docs-page {
@@ -286,6 +336,10 @@
 .o-automator-error-underline::before {
   content: "~~~~~~~~~~~~";
   overflow: hidden;
+  font-size: 0.6em;
+  font-weight: 700;
+  font-family: Times New Roman, Serif;
+  color: var(--color-automator-error-underline);
   width: 100%;
   position: absolute;
   top: 12px;
diff --git a/public/stylesheets/codemirror/liquibyte.css b/public/stylesheets/codemirror/liquibyte.css
index da8b2e82b..7c9496470 100644
--- a/public/stylesheets/codemirror/liquibyte.css
+++ b/public/stylesheets/codemirror/liquibyte.css
@@ -1,9 +1,13 @@
 .cm-s-liquibyte.CodeMirror {
-	background-color: #000;
-	color: #fff;
+	background-color: #fff;
+	color: #000;
 	line-height: 1.2em;
 	font-size: 1em;
 }
+.s-base--dark .cm-s-liquibyte.CodeMirror {
+	background-color: #000;
+	color: #fff;
+}
 .cm-s-liquibyte .CodeMirror-focused .cm-matchhighlight {
 	text-decoration: underline;
 	text-decoration-color: #0f0;
@@ -19,26 +23,36 @@
 	text-decoration-color: #404040;
 	text-decoration-style: dotted;
 }
-.cm-s-liquibyte .CodeMirror-gutters { background-color: #262626; border-right: 1px solid #505050; padding-right: 0.8em; }
+.cm-s-liquibyte .CodeMirror-gutters { background-color: #eee; border-right: 1px solid #999; padding-right: 0.8em; }
 .cm-s-liquibyte .CodeMirror-gutter-elt div { font-size: 1.2em; }
 .cm-s-liquibyte .CodeMirror-guttermarker {  }
 .cm-s-liquibyte .CodeMirror-guttermarker-subtle {  }
 .cm-s-liquibyte .CodeMirror-linenumber { color: #606060; padding-left: 0; }
-.cm-s-liquibyte .CodeMirror-cursor { border-left: 1px solid #eee; }
+.cm-s-liquibyte .CodeMirror-cursor { border-left: 1px solid #262626; }
+
+.s-base--dark .cm-s-liquibyte .CodeMirror-cursor { border-left: 1px solid #eee; }
+
+.s-base--dark .cm-s-liquibyte .CodeMirror-gutters { background-color: #262626; border-right: 1px solid #505050; }
 
 .cm-s-liquibyte span.cm-comment     { color: #008000; }
 .cm-s-liquibyte span.cm-def         { color: #ffaf40; font-weight: bold; }
-.cm-s-liquibyte span.cm-keyword     { color: #c080ff; font-weight: bold; }
+.cm-s-liquibyte span.cm-keyword     { color: #9d68d3; font-weight: bold; }
 .cm-s-liquibyte span.cm-builtin     { color: #ffaf40; font-weight: bold; }
 .cm-s-liquibyte span.cm-variable    { color: #5967ff; font-weight: bold; }
 .cm-s-liquibyte span.cm-string      { color: #ff8000; }
-.cm-s-liquibyte span.cm-number      { color: #0f0; font-weight: bold; }
+.cm-s-liquibyte span.cm-number      { color: rgb(0, 190, 0); font-weight: bold; }
 .cm-s-liquibyte span.cm-atom        { color: #bf3030; font-weight: bold; }
 
-.cm-s-liquibyte span.cm-variable-2  { color: #21a8a8; font-weight: bold; }
+.s-base--dark .cm-s-liquibyte span.cm-keyword     { color: #c080ff; }
+.s-base--dark .cm-s-liquibyte span.cm-number      { color: #0f0; }
+
+.cm-s-liquibyte span.cm-variable-2  { color: #1d9494; font-weight: bold; }
 .cm-s-liquibyte span.cm-variable-3, .cm-s-liquibyte span.cm-type { color: #c080ff; font-weight: bold; }
 .cm-s-liquibyte span.cm-property    { color: #999; font-weight: bold; }
-.cm-s-liquibyte span.cm-operator    { color: #fff; }
+.cm-s-liquibyte span.cm-operator    { color: #000; }
+
+.s-base--dark .cm-s-liquibyte span.cm-variable-2  { color: #21a8a8; }
+.s-base--dark .cm-s-liquibyte span.cm-operator    { color: #fff; }
 
 .cm-s-liquibyte span.cm-meta        { color: #0f0; }
 .cm-s-liquibyte span.cm-qualifier   { color: #fff700; font-weight: bold; }
@@ -48,7 +62,9 @@
 .cm-s-liquibyte span.cm-error       { color: #f00; }
 .cm-s-liquibyte span.cm-blob        { color: #fc2; }
 
-.cm-s-liquibyte div.CodeMirror-selected { background-color: rgba(255, 0, 0, 0.25); }
+.cm-s-liquibyte div.CodeMirror-selected { background-color: rgba(255, 0, 0, 0.1); }
+
+.s-base--dark .cm-s-liquibyte div.CodeMirror-selected { background-color: rgba(255, 0, 0, 0.25); }
 
 .cm-s-liquibyte span.cm-compilation { background-color: rgba(255, 255, 255, 0.12); }
 
diff --git a/public/stylesheets/styles.css b/public/stylesheets/styles.css
index 409f70e13..45322dc4d 100644
--- a/public/stylesheets/styles.css
+++ b/public/stylesheets/styles.css
@@ -8937,9 +8937,10 @@ kbd {
 .o-automator-command {
   display: inline-block;
   min-width: 8.5rem;
-  color: #c080ff;
-  background: #000115;
-  border: 0.1rem solid #353535;
+  border: 0.1rem solid var(--color-blockmator-block-border);
+  padding: 0.5rem;
+  background: var(--color-blockmator-block-background);
+  color: var(--color-blockmator-block-font);
   border-radius: var(--var-border-radius, 0.5rem);
   padding: 0.5rem;
   -webkit-user-select: none;
@@ -8974,7 +8975,7 @@ kbd {
 }
 
 .c-automator-block-row-active {
-  background: #50316f;
+  background: var(--color-blockmator-active-background);
 }
 
 .c-automator-block-row-ghost {
@@ -8986,6 +8987,19 @@ kbd {
   padding: 0.3rem 0.6rem;
 }
 
+.c-automator-block-editor {
+  overflow-y: scroll;
+  height: 100%;
+  background-color: var(--color-blockmator-editor-background);
+  border-left: 0.1rem solid var(--color-automator-controls-background);
+  border-bottom: 0.1rem solid var(--color-automator-controls-background);
+  box-sizing: border-box;
+  padding: 0.5rem;
+  tab-size: 1.5em;
+  -moz-tab-size: 1.5em;
+  -o-tab-size: 1.5em;
+}
+
 .s-base--metro .c-automator-block-editor::-webkit-scrollbar-thumb {
   border-radius: 0;
 }
@@ -8994,18 +9008,29 @@ kbd {
   display: inline-block;
   font-family: Typewriter, serif;
   font-size: 1.1rem;
-  color: #007f7f;
-  background: #000115;
-  border: 0.1rem solid #353535;
+  border: 0.1rem solid var(--color-blockmator-block-border);
+  padding: 0.5rem;
+  background: var(--color-blockmator-block-background);
+  color: var(--color-blockmator-editor-selection);
   border-radius: var(--var-border-radius, 0.5rem);
   padding: 0.5rem;
 }
 
 input.o-automator-block-input {
-  color: #00ff00;
+  color: var(--color-blockmator-editor-input);
+}
+
+.l-automator-nested-block {
+  width: fit-content;
+  padding: 1rem;
+  border: var(--var-border-width, 2px) dotted var(--color-blockmator-nested-block-border);
+  margin-left: 3rem;
+  margin-top: 0.5rem;
+  min-widtH: 30rem;
 }
 
 .o-automator-block-delete {
+  color: var(--color-blockmator-block-delete);
   font-size: 1.7rem;
   color: #ff3333;
   cursor: pointer;
@@ -9038,7 +9063,7 @@ input.o-automator-block-input {
 
 .c-automator-template-textbox {
   text-align: center;
-  border: 0.1rem solid black;
+  border: 0.1rem solid var(--color-template-textbox-border);
   border-radius: var(--var-border-radius, 0.3rem);
 }
 
diff --git a/src/components/modals/AutomatorScriptTemplate.vue b/src/components/modals/AutomatorScriptTemplate.vue
index c29823d67..ea870e702 100644
--- a/src/components/modals/AutomatorScriptTemplate.vue
+++ b/src/components/modals/AutomatorScriptTemplate.vue
@@ -140,13 +140,13 @@ export default {
       <button
         v-for="(preset, presetNumber) in presets"
         :key="preset.name"
-        class="o-primary-btn"
+        class="o-primary-btn o-load-preset-button-margin"
         @click="loadPreset(preset.name, presetNumber + 1)"
       >
         {{ preset.name ? preset.name : presetNumber + 1 }}
       </button>
       <button
-        class="o-primary-btn"
+        class="o-primary-btn o-load-preset-button-margin"
         @click="loadCurrent"
       >
         <i>Current Tree</i>
@@ -209,3 +209,9 @@ export default {
     </button>
   </ModalWrapper>
 </template>
+
+<style scoped>
+.o-load-preset-button-margin {
+  margin-right: 0.3rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tabs/automator/AutomatorButton.vue b/src/components/tabs/automator/AutomatorButton.vue
index 8323fff27..46a502a87 100644
--- a/src/components/tabs/automator/AutomatorButton.vue
+++ b/src/components/tabs/automator/AutomatorButton.vue
@@ -18,5 +18,6 @@ export default {
   border-radius: 0.3rem;
   margin: 0.4rem;
   cursor: pointer;
+  background-color: white;
 }
 </style>
diff --git a/src/components/tabs/automator/AutomatorDocsTemplateList.vue b/src/components/tabs/automator/AutomatorDocsTemplateList.vue
index 0ce610a61..272459dd7 100644
--- a/src/components/tabs/automator/AutomatorDocsTemplateList.vue
+++ b/src/components/tabs/automator/AutomatorDocsTemplateList.vue
@@ -31,8 +31,9 @@ export default {
 
 <style scoped>
 .c-automator-docs-template--button {
-  border-radius: 0.3rem;
   margin: 0.4rem;
+  border-radius: var(--var-border-radius, 0.4rem);
+  border-width: var(--var-border-width, 0.2rem);
   cursor: pointer;
 }
 </style>
diff --git a/src/components/tabs/automator/AutomatorEditor.vue b/src/components/tabs/automator/AutomatorEditor.vue
index 6266cbbcd..8f0dc8519 100644
--- a/src/components/tabs/automator/AutomatorEditor.vue
+++ b/src/components/tabs/automator/AutomatorEditor.vue
@@ -79,3 +79,51 @@ export default {
     <AutomatorBlockEditor v-if="!isTextAutomator" />
   </div>
 </template>
+
+<style scoped>
+.c-slider-toggle-button {
+  color: black;
+  background-color: #626262;
+  border: 0.2rem solid #767676;
+  border-radius: 0.2rem;
+  margin: 0.4rem;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 0.3rem 0;
+}
+
+.s.base--dark .c-slider-toggle-button {
+  background-color: #626262;
+}
+
+.c-slider-toggle-button .fas {
+  width: 3rem;
+  position: relative;
+  z-index: 1;
+}
+
+.c-slider-toggle-button:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 3rem;
+  height: 100%;
+  border-radius: 0.2rem;
+  transition: 0.3s ease all;
+  background-color: white;
+  z-index: 0;
+}
+
+.c-slider-toggle-button--right:before {
+  left: 3rem;
+  background-color: white;
+}
+
+.tutorial--glow:after {
+  z-index: 2;
+}
+</style>