[design] add more preset themes

src/index.html

@@ -1313,7 +1313,7 @@
             </div>
             <div class="menu-item-form">
               <div class="theme-preset"></div>
-              <p class="control-theme-font-ui-helper form-helper small">Applying a Preset will replace the current Colour, Accent, Font, Style and Radius.</p>
+              <p class="control-theme-preset-helper form-helper small">Applying a Preset will replace the current Colour, Accent, Font, Style and Radius.</p>
             </div>
           </div>
           <div class="menu-item">
@@ -1330,7 +1330,7 @@
                   <button class="control-theme-custom-edit button mb-0" tabindex="-1">Edit</button>
                 </div>
               </div>
-              <p class="control-theme-font-ui-helper form-helper small">Saving a Theme will record the current Colour, Accent, Font, Style and Radius.</p>
+              <p class="control-theme-custom-helper form-helper small">Saving a Theme will record the current Colour, Accent, Font, Style and Radius.</p>
             </div>
           </div>
           <div class="menu-item">
@@ -1346,7 +1346,7 @@
                 <input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="-1">
                 <label for="control-theme-style-light"><span class="label-icon"></span> Light</label>
               </div>
-              <p class="control-theme-style-light-helper form-helper small">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
+              <p class="control-theme-style-helper form-helper small">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
             </div>
           </div>
           <div class="menu-item">

src/js/theme.js

@@ -792,6 +792,39 @@ var theme = (function() {
       },
       radius: 0.4,
       style: "dark"
+    }, {
+      name: "Dash",
+      font: {
+        display: {
+          name: "Fredericka the Great",
+          weight: 400,
+          style: "normal"
+        },
+        ui: {
+          name: "Oswald",
+          weight: 400,
+          style: "normal"
+        }
+      },
+      color: {
+        hsl: {
+          h: 211,
+          s: 7,
+          l: 53
+        },
+        rgb: {
+          r: 126,
+          g: 134,
+          b: 143
+        }
+      },
+      accent: {
+        r: 187,
+        g: 17,
+        b: 68
+      },
+      radius: 0,
+      style: "light"
     }, {
       name: "Savage",
       font: {
@@ -825,6 +858,105 @@ var theme = (function() {
       },
       radius: 0,
       style: "dark"
+    }, {
+      name: "Trine",
+      font: {
+        display: {
+          name: "Josefin Sans",
+          weight: 300,
+          style: "normal"
+        },
+        ui: {
+          name: "Roboto Slab",
+          weight: 400,
+          style: "normal"
+        }
+      },
+      color: {
+        hsl: {
+          h: 228,
+          s: 71,
+          l: 47
+        },
+        rgb: {
+          r: 34,
+          g: 68,
+          b: 204
+        }
+      },
+      accent: {
+        r: 0,
+        g: 255,
+        b: 255
+      },
+      radius: 0.5,
+      style: "dark"
+    }, {
+      name: "Obsidian",
+      font: {
+        display: {
+          name: "Zilla Slab",
+          weight: 900,
+          style: "normal"
+        },
+        ui: {
+          name: "Montserrat",
+          weight: 400,
+          style: "normal"
+        }
+      },
+      color: {
+        hsl: {
+          h: 200,
+          s: 10,
+          l: 43
+        },
+        rgb: {
+          r: 98,
+          g: 113,
+          b: 120
+        }
+      },
+      accent: {
+        r: 0,
+        g: 255,
+        b: 255
+      },
+      radius: 0.25,
+      style: "dark"
+    }, {
+      name: "Earthquake",
+      font: {
+        display: {
+          name: "Tulpen One",
+          weight: 400,
+          style: "normal"
+        },
+        ui: {
+          name: "Barlow Condensed",
+          weight: 400,
+          style: "normal"
+        }
+      },
+      color: {
+        hsl: {
+          h: 31,
+          s: 22,
+          l: 48
+        },
+        rgb: {
+          r: 149,
+          g: 123,
+          b: 95
+        }
+      },
+      accent: {
+        r: 241,
+        g: 255,
+        b: 0
+      },
+      radius: 0.80,
+      style: "dark"
     }]
   };