Adds new theme

public/css/bundle.css

@@ -1029,45 +1029,45 @@ ul li {
   padding: 30px;
   font-family: 'MuseoSlab500Regular', serif;
 }
-#app.theme--monza #head {
-  background: #C1041C;
+#app.theme--status #head {
+  background: #4360df;
 }
-#app.theme--monza #head #icon {
-  background: #760211;
-  color: #C1041C;
+#app.theme--status #head #icon {
+  background: #1f3bb6;
+  color: #4360df;
 }
-#app.theme--monza #head .q .icon {
-  color: #C1041C;
+#app.theme--status #head .q .icon {
+  color: #4360df;
 }
-#app.theme--monza #head .q input {
-  background: #760211;
+#app.theme--status #head .q input {
+  background: #1f3bb6;
 }
-#app.theme--monza #head a {
-  color: #e0828e;
+#app.theme--status #head a {
+  color: #a1b0ef;
 }
-#app.theme--monza #head a.active,
-#app.theme--monza #head a:hover {
+#app.theme--status #head a.active,
+#app.theme--status #head a:hover {
   color: #fff;
 }
-#app.theme--monza #head .right {
-  color: #e0828e;
+#app.theme--status #head .right {
+  color: #a1b0ef;
 }
-#app.theme--monza #head .right .button {
-  background: #FFBB2A;
-  color: #C1041C;
+#app.theme--status #head .right .button {
+  background: #008bad;
+  color: #4360df;
 }
-#app.theme--monza #page #content #hero .content .cta a.primary {
-  background: #C1041C;
+#app.theme--status #page #content #hero .content .cta a.primary {
+  background: #4360df;
 }
-#app.theme--monza #page #content #hero .content .cta a.secondary {
-  color: #C1041C;
+#app.theme--status #page #content #hero .content .cta a.secondary {
+  color: #4360df;
 }
-#app.theme--monza #page #content #add .form a {
-  background: #C1041C;
+#app.theme--status #page #content #add .form a {
+  background: #4360df;
 }
-#app.theme--monza #page #content #projects table tr td .project .error {
-  color: #C1041C;
+#app.theme--status #page #content #projects table tr td .project .error {
+  color: #4360df;
 }
-#app.theme--monza #page #content #projects table tr td.action {
-  color: #760211;
+#app.theme--status #page #content #projects table tr td.action {
+  color: #1f3bb6;
 }

src/config.js

@@ -37,5 +37,5 @@ export default {
     "timeout": 1e4
   },
   // The app theme; 'monza' is the default red theme.
-  "theme": "monza"
+  "theme": "status"
 };

src/less/burnchart.less

@@ -12,4 +12,4 @@
 @import "app.less";
 
 // And the themes.
-@import "themes/monza.less";
+@import "themes/status.less";

src/less/themes/monza.less

@@ -1,83 +0,0 @@
-#app.theme--monza {
-  // Theme colors.
-  @strong_color: #C1041C;
-  @highlight_color: #FFBB2A;
-
-  #head {
-    background: @strong_color;
-
-    #icon {
-      background: darken(@strong_color, 15%);
-      color: @strong_color;
-    }
-
-    .q {
-      .icon {
-        color: @strong_color;
-      }
-
-      input {
-        background: darken(@strong_color, 15%);
-      }
-    }
-
-    a {
-      color: mix(@strong_color, #FFF, 50%);
-
-      &.active, &:hover {
-        color: #fff;
-      }
-    }
-
-    .right {
-      color: mix(@strong_color, #FFF, 50%);
-
-      .button {
-        background: @highlight_color;
-        color: @strong_color;
-      }
-    }
-  }
-
-  #page {
-    #content {
-      #hero {
-        .content {
-          .cta {
-            a {
-              &.primary {
-                background: @strong_color;
-              }
-
-              &.secondary {
-                color: @strong_color;
-              }
-            }
-          }
-        }
-      }
-
-      #add {
-        .form {
-          a {
-            background: @strong_color;
-          }
-        }
-      }
-
-      #projects {
-        table {
-          tr td {
-            .project .error {
-              color: @strong_color;
-            }
-
-            &.action {
-              color: darken(@strong_color, 15%);
-            }
-          }
-        }
-      }
-    }
-  }
-}

src/less/themes/status.less

@@ -0,0 +1,88 @@
+#app.theme--status {
+  // Theme colors.
+  @Status: rgba(67, 96, 223, 1);
+  @Incubate: rgba(0,139,173,1);
+  @Embark: rgba(54, 55, 99, 1);
+  @Studio: rgba(94, 193, 47, 1);
+  @Nimbus: rgba(255, 156, 0, 1);
+  @Hardwallet: rgba(127, 68, 223, 1);
+  @background: rgba(238, 242, 245, 1);
+
+  #head {
+    background: @Status;
+
+    #icon {
+      background: darken(@Status, 15%);
+      color: @Status;
+    }
+
+    .q {
+      .icon {
+        color: @Status;
+      }
+
+      input {
+        background: darken(@Status, 15%);
+      }
+    }
+
+    a {
+      color: mix(@Status, #FFF, 50%);
+
+      &.active, &:hover {
+        color: #fff;
+      }
+    }
+
+    .right {
+      color: mix(@Status, #FFF, 50%);
+
+      .button {
+        background: @Incubate;
+        color: @Status;
+      }
+    }
+  }
+
+  #page {
+    #content {
+      #hero {
+        .content {
+          .cta {
+            a {
+              &.primary {
+                background: @Status;
+              }
+
+              &.secondary {
+                color: @Status;
+              }
+            }
+          }
+        }
+      }
+
+      #add {
+        .form {
+          a {
+            background: @Status;
+          }
+        }
+      }
+
+      #projects {
+        table {
+          tr td {
+            .project .error {
+              color: @Status;
+            }
+
+            &.action {
+              color: darken(@Status, 15%);
+            }
+          }
+        }
+      }
+    }
+  }
+}