From af0f9aaa91960bd9d79399f4830acaee69615994 Mon Sep 17 00:00:00 2001
From: Reorx <novoreorx@gmail.com>
Date: Wed, 8 Feb 2023 00:43:12 +0800
Subject: [PATCH] add colors to app actions

---
 src/editor/index.html       |  6 +++---
 src/scss/_basic.scss        | 22 ++++++++++++++++++++++
 src/themes/reorx/index.scss |  2 ++
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/editor/index.html b/src/editor/index.html
index 7f850c0..86cedc4 100644
--- a/src/editor/index.html
+++ b/src/editor/index.html
@@ -20,11 +20,11 @@
         <button id="fn-show-json">Show JSON</button>
         <button id="fn-download-json">Download JSON</button>
         <button id="fn-download-html">Download HTML</button>
-        <button id="fn-new-data">New Data</button>
-        <button id="fn-upload-data">Upload Data</button>
         <button onclick="dialog.showModal()">PDF?</button>
+        <button id="fn-new-data" class="-green">New Data</button>
+        <button id="fn-upload-data" class="-green">Upload Data</button>
         <input type="file" name="upload-data" style="display: none;">
-        <button id="fn-load-sample">Load Sample</button>
+        <button id="fn-load-sample" class="-green">Load Sample</button>
       </div>
     </div>
     <div class="middle column editor-container"></div>
diff --git a/src/scss/_basic.scss b/src/scss/_basic.scss
index 356837d..4403713 100644
--- a/src/scss/_basic.scss
+++ b/src/scss/_basic.scss
@@ -42,4 +42,26 @@ button {
     position: relative;
     bottom: 1px;
   }
+
+  &.-text {
+    @include vars.text-button;
+  }
+  &.-red {
+    background-color: var(--red-0);
+    &:hover {
+      background-color: var(--red-1);
+    }
+  }
+  &.-green {
+    background-color: var(--green-0);
+    &:hover {
+      background-color: var(--green-1);
+    }
+  }
+  &.-yellow {
+    background-color: var(--yellow-0);
+    &:hover {
+      background-color: var(--yellow-1);
+    }
+  }
 }
diff --git a/src/themes/reorx/index.scss b/src/themes/reorx/index.scss
index 08e7331..258a2ff 100644
--- a/src/themes/reorx/index.scss
+++ b/src/themes/reorx/index.scss
@@ -1,3 +1,5 @@
+/* Naming convention: https://ricostacruz.com/rscss/ */
+
 $color-signature: #2A3FFB;
 $color-text-dim: #777;
 $color-border-dim: #aaa;