[design] add more presets

src/css/theme.css

@@ -108,24 +108,24 @@
   background-color: rgb(var(--theme-preset-accent-nighttab))
 }
 
-.theme-preset-background-midnightblue-01 {
+.theme-preset-background-midnight-01 {
-  background-color: rgb(var(--theme-preset-background-midnightblue-01))
+  background-color: rgb(var(--theme-preset-background-midnight-01))
 }
 
-.theme-preset-background-midnightblue-02 {
+.theme-preset-background-midnight-02 {
-  background-color: rgb(var(--theme-preset-background-midnightblue-02))
+  background-color: rgb(var(--theme-preset-background-midnight-02))
 }
 
-.theme-preset-background-midnightblue-03 {
+.theme-preset-background-midnight-03 {
-  background-color: rgb(var(--theme-preset-background-midnightblue-03))
+  background-color: rgb(var(--theme-preset-background-midnight-03))
 }
 
-.theme-preset-background-midnightblue-04 {
+.theme-preset-background-midnight-04 {
-  background-color: rgb(var(--theme-preset-background-midnightblue-04))
+  background-color: rgb(var(--theme-preset-background-midnight-04))
 }
 
-.theme-preset-accent-midnightblue {
+.theme-preset-accent-midnight {
-  background-color: rgb(var(--theme-preset-accent-midnightblue))
+  background-color: rgb(var(--theme-preset-accent-midnight))
 }
 
 .theme-preset-background-bluegum-01 {
@@ -327,3 +327,43 @@
 .theme-preset-accent-outrun {
   background-color: rgb(var(--theme-preset-accent-outrun))
 }
+
+.theme-preset-background-pumpkin-01 {
+  background-color: rgb(var(--theme-preset-background-pumpkin-01))
+}
+
+.theme-preset-background-pumpkin-02 {
+  background-color: rgb(var(--theme-preset-background-pumpkin-02))
+}
+
+.theme-preset-background-pumpkin-03 {
+  background-color: rgb(var(--theme-preset-background-pumpkin-03))
+}
+
+.theme-preset-background-pumpkin-04 {
+  background-color: rgb(var(--theme-preset-background-pumpkin-04))
+}
+
+.theme-preset-accent-pumpkin {
+  background-color: rgb(var(--theme-preset-accent-pumpkin))
+}
+
+.theme-preset-background-whoosh-01 {
+  background-color: rgb(var(--theme-preset-background-whoosh-01))
+}
+
+.theme-preset-background-whoosh-02 {
+  background-color: rgb(var(--theme-preset-background-whoosh-02))
+}
+
+.theme-preset-background-whoosh-03 {
+  background-color: rgb(var(--theme-preset-background-whoosh-03))
+}
+
+.theme-preset-background-whoosh-04 {
+  background-color: rgb(var(--theme-preset-background-whoosh-04))
+}
+
+.theme-preset-accent-whoosh {
+  background-color: rgb(var(--theme-preset-accent-whoosh))
+}

src/css/variables.css

@@ -31,11 +31,11 @@
   --theme-preset-background-nighttab-03:                25, 25, 25;
   --theme-preset-background-nighttab-04:                25, 25, 25;
   --theme-preset-accent-nighttab:                       25, 25, 25;
-  --theme-preset-background-midnightblue-01:            25, 25, 25;
+  --theme-preset-background-midnight-01:                25, 25, 25;
-  --theme-preset-background-midnightblue-02:            25, 25, 25;
+  --theme-preset-background-midnight-02:                25, 25, 25;
-  --theme-preset-background-midnightblue-03:            25, 25, 25;
+  --theme-preset-background-midnight-03:                25, 25, 25;
-  --theme-preset-background-midnightblue-04:            25, 25, 25;
+  --theme-preset-background-midnight-04:                25, 25, 25;
-  --theme-preset-accent-midnightblue:                   25, 25, 25;
+  --theme-preset-accent-midnight:                       25, 25, 25;
   --theme-preset-background-bluegum-01:                 25, 25, 25;
   --theme-preset-background-bluegum-02:                 25, 25, 25;
   --theme-preset-background-bluegum-03:                 25, 25, 25;
@@ -86,6 +86,16 @@
   --theme-preset-background-outrun-03:                  25, 25, 25;
   --theme-preset-background-outrun-04:                  25, 25, 25;
   --theme-preset-accent-outrun:                         25, 25, 25;
+  --theme-preset-background-pumpkin-01:                 25, 25, 25;
+  --theme-preset-background-pumpkin-02:                 25, 25, 25;
+  --theme-preset-background-pumpkin-03:                 25, 25, 25;
+  --theme-preset-background-pumpkin-04:                 25, 25, 25;
+  --theme-preset-accent-pumpkin:                        25, 25, 25;
+  --theme-preset-background-whoosh-01:                  25, 25, 25;
+  --theme-preset-background-whoosh-02:                  25, 25, 25;
+  --theme-preset-background-whoosh-03:                  25, 25, 25;
+  --theme-preset-background-whoosh-04:                  25, 25, 25;
+  --theme-preset-accent-whoosh:                         25, 25, 25;
   --theme-preset-preview-size:                          6em;
   /* header */
   --header-area-width:                                  100%;

src/index.html

@@ -1322,15 +1322,15 @@
                 </button>
               </div>
               <div class="button-wrap form-inline">
-                <button class="control-theme-preset-midnightblue theme-preset-button button mb-0" tabindex="-1">
+                <button class="control-theme-preset-midnight theme-preset-button button mb-0" tabindex="-1">
                   <div class="theme-preset-preview">
-                    <span class="theme-preset-background-01 theme-preset-background-midnightblue-01"></span>
+                    <span class="theme-preset-background-01 theme-preset-background-midnight-01"></span>
-                    <span class="theme-preset-background-02 theme-preset-background-midnightblue-02"></span>
+                    <span class="theme-preset-background-02 theme-preset-background-midnight-02"></span>
-                    <span class="theme-preset-background-03 theme-preset-background-midnightblue-03"></span>
+                    <span class="theme-preset-background-03 theme-preset-background-midnight-03"></span>
-                    <span class="theme-preset-background-04 theme-preset-background-midnightblue-04"></span>
+                    <span class="theme-preset-background-04 theme-preset-background-midnight-04"></span>
-                    <span class="theme-preset-accent theme-preset-accent-midnightblue"></span>
+                    <span class="theme-preset-accent theme-preset-accent-midnight"></span>
                   </div>
-                  <span class="button-text small">Midnight Blue</span>
+                  <span class="button-text small">Midnight</span>
                 </button>
               </div>
               <div class="button-wrap form-inline">
@@ -1453,6 +1453,30 @@
                   <span class="button-text small">Outrun</span>
                 </button>
               </div>
+              <div class="button-wrap form-inline">
+                <button class="control-theme-preset-pumpkin theme-preset-button button mb-0" tabindex="-1">
+                  <div class="theme-preset-preview">
+                    <span class="theme-preset-background-01 theme-preset-background-pumpkin-01"></span>
+                    <span class="theme-preset-background-02 theme-preset-background-pumpkin-02"></span>
+                    <span class="theme-preset-background-03 theme-preset-background-pumpkin-03"></span>
+                    <span class="theme-preset-background-04 theme-preset-background-pumpkin-04"></span>
+                    <span class="theme-preset-accent theme-preset-accent-pumpkin"></span>
+                  </div>
+                  <span class="button-text small">Pumpkin</span>
+                </button>
+              </div>
+              <div class="button-wrap form-inline">
+                <button class="control-theme-preset-whoosh theme-preset-button button mb-0" tabindex="-1">
+                  <div class="theme-preset-preview">
+                    <span class="theme-preset-background-01 theme-preset-background-whoosh-01"></span>
+                    <span class="theme-preset-background-02 theme-preset-background-whoosh-02"></span>
+                    <span class="theme-preset-background-03 theme-preset-background-whoosh-03"></span>
+                    <span class="theme-preset-background-04 theme-preset-background-whoosh-04"></span>
+                    <span class="theme-preset-accent theme-preset-accent-whoosh"></span>
+                  </div>
+                  <span class="button-text small">Whoosh</span>
+                </button>
+              </div>
             </div>
           </div>
           <div class="menu-item">

src/js/control.js

@@ -2544,10 +2544,10 @@ var control = (function() {
       render.class();
     }
   }, {
-    element: helper.e(".control-theme-preset-midnightblue"),
+    element: helper.e(".control-theme-preset-midnight"),
     type: "button",
     func: function() {
-      theme.preset("midnightblue");
+      theme.preset("midnight");
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();
@@ -2686,6 +2686,32 @@ var control = (function() {
       render.update();
       render.class();
     }
+  }, {
+    element: helper.e(".control-theme-preset-pumpkin"),
+    type: "button",
+    func: function() {
+      theme.preset("pumpkin");
+      theme.style.check();
+      theme.render.color.shade();
+      theme.render.accent.color();
+      theme.render.radius();
+      link.groupAndItems();
+      render.update();
+      render.class();
+    }
+  }, {
+    element: helper.e(".control-theme-preset-whoosh"),
+    type: "button",
+    func: function() {
+      theme.preset("whoosh");
+      theme.style.check();
+      theme.render.color.shade();
+      theme.render.accent.color();
+      theme.render.radius();
+      link.groupAndItems();
+      render.update();
+      render.class();
+    }
   }, {
     element: helper.e(".control-theme-style-dark"),
     path: "theme.style",

src/js/state.js

@@ -389,7 +389,7 @@ var state = (function() {
       radius: 0.25,
       style: "dark"
     },
-    midnightblue: {
+    midnight: {
       color: {
         hsl: {
           h: 215,
@@ -572,7 +572,7 @@ var state = (function() {
       },
       accent: {
         r: 255,
-        g: 136,
+        g: 221,
         b: 0
       },
       radius: 0.6,
@@ -619,6 +619,48 @@ var state = (function() {
       },
       radius: 0,
       style: "dark"
+    },
+    pumpkin: {
+      color: {
+        hsl: {
+          h: 198,
+          s: 0,
+          l: 46
+        },
+        rgb: {
+          r: 117,
+          g: 117,
+          b: 117
+        }
+      },
+      accent: {
+        r: 238,
+        g: 119,
+        b: 34
+      },
+      radius: 0.2,
+      style: "dark"
+    },
+    whoosh: {
+      color: {
+        hsl: {
+          h: 307,
+          s: 100,
+          l: 59
+        },
+        rgb: {
+          r: 254,
+          g: 45,
+          b: 230
+        }
+      },
+      accent: {
+        r: 238,
+        g: 238,
+        b: 34
+      },
+      radius: 1.2,
+      style: "dark"
     }
   };