add colors to app actions

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>

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);
+    }
+  }
 }

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;