[design] add more presets

src/css/theme.css

@@ -188,6 +188,26 @@
   background-color: rgb(var(--theme-preset-accent-snowblue))
 }
 
+.theme-preset-background-chocorum-01 {
+  background-color: rgb(var(--theme-preset-background-chocorum-01))
+}
+
+.theme-preset-background-chocorum-02 {
+  background-color: rgb(var(--theme-preset-background-chocorum-02))
+}
+
+.theme-preset-background-chocorum-03 {
+  background-color: rgb(var(--theme-preset-background-chocorum-03))
+}
+
+.theme-preset-background-chocorum-04 {
+  background-color: rgb(var(--theme-preset-background-chocorum-04))
+}
+
+.theme-preset-accent-chocorum {
+  background-color: rgb(var(--theme-preset-accent-chocorum))
+}
+
 .theme-preset-background-coralgreen-01 {
   background-color: rgb(var(--theme-preset-background-coralgreen-01))
 }
@@ -247,3 +267,23 @@
 .theme-preset-accent-hotpepper {
   background-color: rgb(var(--theme-preset-accent-hotpepper))
 }
+
+.theme-preset-background-coldcube-01 {
+  background-color: rgb(var(--theme-preset-background-coldcube-01))
+}
+
+.theme-preset-background-coldcube-02 {
+  background-color: rgb(var(--theme-preset-background-coldcube-02))
+}
+
+.theme-preset-background-coldcube-03 {
+  background-color: rgb(var(--theme-preset-background-coldcube-03))
+}
+
+.theme-preset-background-coldcube-04 {
+  background-color: rgb(var(--theme-preset-background-coldcube-04))
+}
+
+.theme-preset-accent-coldcube {
+  background-color: rgb(var(--theme-preset-accent-coldcube))
+}

src/css/variables.css

@@ -51,6 +51,11 @@
   --theme-preset-background-snowblue-03:                25, 25, 25;
   --theme-preset-background-snowblue-04:                25, 25, 25;
   --theme-preset-accent-snowblue:                       25, 25, 25;
+  --theme-preset-background-chocorum-01:                25, 25, 25;
+  --theme-preset-background-chocorum-02:                25, 25, 25;
+  --theme-preset-background-chocorum-03:                25, 25, 25;
+  --theme-preset-background-chocorum-04:                25, 25, 25;
+  --theme-preset-accent-chocorum:                       25, 25, 25;
   --theme-preset-background-coralgreen-01:              25, 25, 25;
   --theme-preset-background-coralgreen-02:              25, 25, 25;
   --theme-preset-background-coralgreen-03:              25, 25, 25;
@@ -66,6 +71,11 @@
   --theme-preset-background-hotpepper-03:               25, 25, 25;
   --theme-preset-background-hotpepper-04:               25, 25, 25;
   --theme-preset-accent-hotpepper:                      25, 25, 25;
+  --theme-preset-background-coldcube-01:               25, 25, 25;
+  --theme-preset-background-coldcube-02:               25, 25, 25;
+  --theme-preset-background-coldcube-03:               25, 25, 25;
+  --theme-preset-background-coldcube-04:               25, 25, 25;
+  --theme-preset-accent-coldcube:                      25, 25, 25;
   --theme-preset-preview-size:                          6em;
   /* header */
   --header-area-width:                                  100%;

src/index.html

@@ -1369,6 +1369,18 @@
                   <span class="button-text small">Snow Blue</span>
                 </button>
               </div>
+              <div class="button-wrap form-inline">
+                <button class="control-theme-preset-chocorum theme-preset-button button mb-0" tabindex="-1">
+                  <div class="theme-preset-preview">
+                    <span class="theme-preset-background-01 theme-preset-background-chocorum-01"></span>
+                    <span class="theme-preset-background-02 theme-preset-background-chocorum-02"></span>
+                    <span class="theme-preset-background-03 theme-preset-background-chocorum-03"></span>
+                    <span class="theme-preset-background-04 theme-preset-background-chocorum-04"></span>
+                    <span class="theme-preset-accent theme-preset-accent-chocorum"></span>
+                  </div>
+                  <span class="button-text small">Choco Rum</span>
+                </button>
+              </div>
               <div class="button-wrap form-inline">
                 <button class="control-theme-preset-coralgreen theme-preset-button button mb-0" tabindex="-1">
                   <div class="theme-preset-preview">
@@ -1405,6 +1417,18 @@
                   <span class="button-text small">Hot Pepper</span>
                 </button>
               </div>
+              <div class="button-wrap form-inline">
+                <button class="control-theme-preset-coldcube theme-preset-button button mb-0" tabindex="-1">
+                  <div class="theme-preset-preview">
+                    <span class="theme-preset-background-01 theme-preset-background-coldcube-01"></span>
+                    <span class="theme-preset-background-02 theme-preset-background-coldcube-02"></span>
+                    <span class="theme-preset-background-03 theme-preset-background-coldcube-03"></span>
+                    <span class="theme-preset-background-04 theme-preset-background-coldcube-04"></span>
+                    <span class="theme-preset-accent theme-preset-accent-coldcube"></span>
+                  </div>
+                  <span class="button-text small">Cold Cube</span>
+                </button>
+              </div>
             </div>
           </div>
           <div class="menu-item">

src/js/control.js

@@ -2585,6 +2585,17 @@ var control = (function() {
       theme.render.radius();
       render.update();
     }
+  }, {
+    element: helper.e(".control-theme-preset-chocorum"),
+    type: "button",
+    func: function() {
+      theme.preset("chocorum");
+      theme.style.check();
+      theme.render.color.shade();
+      theme.render.accent.color();
+      theme.render.radius();
+      render.update();
+    }
   }, {
     element: helper.e(".control-theme-preset-coralgreen"),
     type: "button",
@@ -2618,6 +2629,17 @@ var control = (function() {
       theme.render.radius();
       render.update();
     }
+  }, {
+    element: helper.e(".control-theme-preset-coldcube"),
+    type: "button",
+    func: function() {
+      theme.preset("coldcube");
+      theme.style.check();
+      theme.render.color.shade();
+      theme.render.accent.color();
+      theme.render.radius();
+      render.update();
+    }
   }, {
     element: helper.e(".control-theme-style-dark"),
     path: "theme.style",

src/js/state.js

@@ -473,6 +473,27 @@ var state = (function() {
       radius: 0,
       style: "light"
     },
+    chocorum: {
+      color: {
+        hsl: {
+          h: 25,
+          s: 29,
+          l: 48
+        },
+        rgb: {
+          r: 159,
+          g: 118,
+          b: 87
+        }
+      },
+      accent: {
+        r: 196,
+        g: 0,
+        b: 66
+      },
+      radius: 0.75,
+      style: "dark"
+    },
     coralgreen: {
       color: {
         hsl: {
@@ -535,6 +556,27 @@ var state = (function() {
       },
       radius: 0.6,
       style: "dark"
+    },
+    coldcube: {
+      color: {
+        hsl: {
+          h: 203,
+          s: 30,
+          l: 50
+        },
+        rgb: {
+          r: 89,
+          g: 136,
+          b: 165
+        }
+      },
+      accent: {
+        r: 74,
+        g: 120,
+        b: 148
+      },
+      radius: 0.1,
+      style: "light"
     }
   };