[design] add theme presets previews

gulpfile.js

@@ -64,6 +64,7 @@ const cssFiles = [
   path.src + '/css/background.css',
   path.src + '/css/group.css',
   path.src + '/css/link.css',
+  path.src + '/css/theme.css',
   path.src + '/css/auto-suggest.css',
   path.src + '/css/fontawesome.css'
 ]

src/css/theme.css

@@ -0,0 +1,221 @@
+.theme-preset-button {
+  padding: 0;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  max-width: 6em;
+}
+
+.theme-preset-button .button-text {
+  margin-top: 0.75em;
+  margin-bottom: 1em;
+  margin-left: 0;
+  font-size: 0.75em;
+}
+
+.theme-preset-button:after {
+  content: none;
+}
+
+.theme-preset-preview {
+  width: 6em;
+  height: 6em;
+  position: relative;
+}
+
+.theme-preset-background-01,
+.theme-preset-background-02,
+.theme-preset-background-03,
+.theme-preset-background-04,
+.theme-preset-accent {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+}
+
+.theme-preset-background-01 {
+  z-index: 1;
+}
+
+.theme-preset-background-02 {
+  z-index: 2;
+  clip-path: polygon(0 40%, 60% 100%, 100% 100%, 100% 0, 0 0);
+}
+
+.theme-preset-background-03 {
+  z-index: 3;
+  clip-path: polygon(0 0, 100% 100%, 100% 0);
+}
+
+.theme-preset-background-04 {
+  z-index: 4;
+  clip-path: polygon(40% 0, 100% 60%, 100% 0);
+}
+
+.theme-preset-accent {
+  z-index: 5;
+  clip-path: polygon(100% 50%, 100% 100%, 50% 100%);
+}
+
+.theme-preset-background-nighttab-01 {
+  background-color: rgb(var(--theme-preset-background-nighttab-01))
+}
+
+.theme-preset-background-nighttab-02 {
+  background-color: rgb(var(--theme-preset-background-nighttab-02))
+}
+
+.theme-preset-background-nighttab-03 {
+  background-color: rgb(var(--theme-preset-background-nighttab-03))
+}
+
+.theme-preset-background-nighttab-04 {
+  background-color: rgb(var(--theme-preset-background-nighttab-04))
+}
+
+.theme-preset-accent-nighttab {
+  background-color: rgb(var(--theme-preset-accent-nighttab))
+}
+
+.theme-preset-background-midnightblue-01 {
+  background-color: rgb(var(--theme-preset-background-midnightblue-01))
+}
+
+.theme-preset-background-midnightblue-02 {
+  background-color: rgb(var(--theme-preset-background-midnightblue-02))
+}
+
+.theme-preset-background-midnightblue-03 {
+  background-color: rgb(var(--theme-preset-background-midnightblue-03))
+}
+
+.theme-preset-background-midnightblue-04 {
+  background-color: rgb(var(--theme-preset-background-midnightblue-04))
+}
+
+.theme-preset-accent-midnightblue {
+  background-color: rgb(var(--theme-preset-accent-midnightblue))
+}
+
+.theme-preset-background-bluegum-01 {
+  background-color: rgb(var(--theme-preset-background-bluegum-01))
+}
+
+.theme-preset-background-bluegum-02 {
+  background-color: rgb(var(--theme-preset-background-bluegum-02))
+}
+
+.theme-preset-background-bluegum-03 {
+  background-color: rgb(var(--theme-preset-background-bluegum-03))
+}
+
+.theme-preset-background-bluegum-04 {
+  background-color: rgb(var(--theme-preset-background-bluegum-04))
+}
+
+.theme-preset-accent-bluegum {
+  background-color: rgb(var(--theme-preset-accent-bluegum))
+}
+
+.theme-preset-background-sharpmint-01 {
+  background-color: rgb(var(--theme-preset-background-sharpmint-01))
+}
+
+.theme-preset-background-sharpmint-02 {
+  background-color: rgb(var(--theme-preset-background-sharpmint-02))
+}
+
+.theme-preset-background-sharpmint-03 {
+  background-color: rgb(var(--theme-preset-background-sharpmint-03))
+}
+
+.theme-preset-background-sharpmint-04 {
+  background-color: rgb(var(--theme-preset-background-sharpmint-04))
+}
+
+.theme-preset-accent-sharpmint {
+  background-color: rgb(var(--theme-preset-accent-sharpmint))
+}
+
+.theme-preset-background-snowblue-01 {
+  background-color: rgb(var(--theme-preset-background-snowblue-01))
+}
+
+.theme-preset-background-snowblue-02 {
+  background-color: rgb(var(--theme-preset-background-snowblue-02))
+}
+
+.theme-preset-background-snowblue-03 {
+  background-color: rgb(var(--theme-preset-background-snowblue-03))
+}
+
+.theme-preset-background-snowblue-04 {
+  background-color: rgb(var(--theme-preset-background-snowblue-04))
+}
+
+.theme-preset-accent-snowblue {
+  background-color: rgb(var(--theme-preset-accent-snowblue))
+}
+
+.theme-preset-background-coralgreen-01 {
+  background-color: rgb(var(--theme-preset-background-coralgreen-01))
+}
+
+.theme-preset-background-coralgreen-02 {
+  background-color: rgb(var(--theme-preset-background-coralgreen-02))
+}
+
+.theme-preset-background-coralgreen-03 {
+  background-color: rgb(var(--theme-preset-background-coralgreen-03))
+}
+
+.theme-preset-background-coralgreen-04 {
+  background-color: rgb(var(--theme-preset-background-coralgreen-04))
+}
+
+.theme-preset-accent-coralgreen {
+  background-color: rgb(var(--theme-preset-accent-coralgreen))
+}
+
+.theme-preset-background-purplegem-01 {
+  background-color: rgb(var(--theme-preset-background-purplegem-01))
+}
+
+.theme-preset-background-purplegem-02 {
+  background-color: rgb(var(--theme-preset-background-purplegem-02))
+}
+
+.theme-preset-background-purplegem-03 {
+  background-color: rgb(var(--theme-preset-background-purplegem-03))
+}
+
+.theme-preset-background-purplegem-04 {
+  background-color: rgb(var(--theme-preset-background-purplegem-04))
+}
+
+.theme-preset-accent-purplegem {
+  background-color: rgb(var(--theme-preset-accent-purplegem))
+}
+
+.theme-preset-background-hotpepper-01 {
+  background-color: rgb(var(--theme-preset-background-hotpepper-01))
+}
+
+.theme-preset-background-hotpepper-02 {
+  background-color: rgb(var(--theme-preset-background-hotpepper-02))
+}
+
+.theme-preset-background-hotpepper-03 {
+  background-color: rgb(var(--theme-preset-background-hotpepper-03))
+}
+
+.theme-preset-background-hotpepper-04 {
+  background-color: rgb(var(--theme-preset-background-hotpepper-04))
+}
+
+.theme-preset-accent-hotpepper {
+  background-color: rgb(var(--theme-preset-accent-hotpepper))
+}

src/css/variables.css

@@ -26,6 +26,46 @@
   --theme-shade-pos-08:                                 25, 25, 25;
   --theme-shade-pos-09:                                 25, 25, 25;
   --theme-shade-pos-10:                                 25, 25, 25;
+  --theme-preset-background-nighttab-01:                25, 25, 25;
+  --theme-preset-background-nighttab-02:                25, 25, 25;
+  --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-midnightblue-02:            25, 25, 25;
+  --theme-preset-background-midnightblue-03:            25, 25, 25;
+  --theme-preset-background-midnightblue-04:            25, 25, 25;
+  --theme-preset-accent-midnightblue:                   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;
+  --theme-preset-background-bluegum-04:                 25, 25, 25;
+  --theme-preset-accent-bluegum:                        25, 25, 25;
+  --theme-preset-background-sharpmint-01:               25, 25, 25;
+  --theme-preset-background-sharpmint-02:               25, 25, 25;
+  --theme-preset-background-sharpmint-03:               25, 25, 25;
+  --theme-preset-background-sharpmint-04:               25, 25, 25;
+  --theme-preset-accent-sharpmint:                      25, 25, 25;
+  --theme-preset-background-snowblue-01:                25, 25, 25;
+  --theme-preset-background-snowblue-02:                25, 25, 25;
+  --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-coralgreen-01:              25, 25, 25;
+  --theme-preset-background-coralgreen-02:              25, 25, 25;
+  --theme-preset-background-coralgreen-03:              25, 25, 25;
+  --theme-preset-background-coralgreen-04:              25, 25, 25;
+  --theme-preset-accent-coralgreen:                     25, 25, 25;
+  --theme-preset-background-purplegem-01:               25, 25, 25;
+  --theme-preset-background-purplegem-02:               25, 25, 25;
+  --theme-preset-background-purplegem-03:               25, 25, 25;
+  --theme-preset-background-purplegem-04:               25, 25, 25;
+  --theme-preset-accent-purplegem:                      25, 25, 25;
+  --theme-preset-background-hotpepper-01:               25, 25, 25;
+  --theme-preset-background-hotpepper-02:               25, 25, 25;
+  --theme-preset-background-hotpepper-03:               25, 25, 25;
+  --theme-preset-background-hotpepper-04:               25, 25, 25;
+  --theme-preset-accent-hotpepper:                      25, 25, 25;
   /* header */
   --header-area-width:                                  100%;
   --header-shade-color:                                 var(--theme-color-01);

src/index.html

@@ -34,6 +34,7 @@
   <link rel="stylesheet" href="css/background.css">
   <link rel="stylesheet" href="css/group.css">
   <link rel="stylesheet" href="css/link.css">
+  <link rel="stylesheet" href="css/theme.css">
   <link rel="stylesheet" href="css/auto-suggest.css">
   <link rel="stylesheet" href="css/fontawesome.css">
   <!-- end-css-block -->
@@ -1309,28 +1310,100 @@
             </div>
             <div class="menu-item-form">
               <div class="button-wrap form-inline">
-                <button class="control-theme-preset-nighttab button mb-0" tabindex="-1">nightTab</button>
+                <button class="control-theme-preset-nighttab theme-preset-button button mb-0" tabindex="-1">
+                  <div class="theme-preset-preview">
+                    <span class="theme-preset-background-01 theme-preset-background-nighttab-01"></span>
+                    <span class="theme-preset-background-02 theme-preset-background-nighttab-02"></span>
+                    <span class="theme-preset-background-03 theme-preset-background-nighttab-03"></span>
+                    <span class="theme-preset-background-04 theme-preset-background-nighttab-04"></span>
+                    <span class="theme-preset-accent theme-preset-accent-nighttab"></span>
+                  </div>
+                  <span class="button-text">nightTab</span>
+                </button>
               </div>
               <div class="button-wrap form-inline">
-                <button class="control-theme-preset-nightingaleblue button mb-0" tabindex="-1">Nightingale Blue</button>
+                <button class="control-theme-preset-midnightblue 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-02 theme-preset-background-midnightblue-02"></span>
+                    <span class="theme-preset-background-03 theme-preset-background-midnightblue-03"></span>
+                    <span class="theme-preset-background-04 theme-preset-background-midnightblue-04"></span>
+                    <span class="theme-preset-accent theme-preset-accent-midnightblue"></span>
+                  </div>
+                  <span class="button-text">Midnight Blue</span>
+                </button>
               </div>
               <div class="button-wrap form-inline">
-                <button class="control-theme-preset-bluegum button mb-0" tabindex="-1">Blue Gum</button>
+                <button class="control-theme-preset-bluegum theme-preset-button button mb-0" tabindex="-1">
+                  <div class="theme-preset-preview">
+                    <span class="theme-preset-background-01 theme-preset-background-bluegum-01"></span>
+                    <span class="theme-preset-background-02 theme-preset-background-bluegum-02"></span>
+                    <span class="theme-preset-background-03 theme-preset-background-bluegum-03"></span>
+                    <span class="theme-preset-background-04 theme-preset-background-bluegum-04"></span>
+                    <span class="theme-preset-accent theme-preset-accent-bluegum"></span>
+                  </div>
+                  <span class="button-text">Blue Gum</span>
+                </button>
               </div>
               <div class="button-wrap form-inline">
-                <button class="control-theme-preset-sharpmint button mb-0" tabindex="-1">Sharp Mint</button>
+                <button class="control-theme-preset-sharpmint theme-preset-button button mb-0" tabindex="-1">
+                  <div class="theme-preset-preview">
+                    <span class="theme-preset-background-01 theme-preset-background-sharpmint-01"></span>
+                    <span class="theme-preset-background-02 theme-preset-background-sharpmint-02"></span>
+                    <span class="theme-preset-background-03 theme-preset-background-sharpmint-03"></span>
+                    <span class="theme-preset-background-04 theme-preset-background-sharpmint-04"></span>
+                    <span class="theme-preset-accent theme-preset-accent-sharpmint"></span>
+                  </div>
+                  <span class="button-text">Sharp Mint</span>
+                </button>
               </div>
               <div class="button-wrap form-inline">
-                <button class="control-theme-preset-snowblue button mb-0" tabindex="-1">Snow Blue</button>
+                <button class="control-theme-preset-snowblue theme-preset-button button mb-0" tabindex="-1">
+                  <div class="theme-preset-preview">
+                    <span class="theme-preset-background-01 theme-preset-background-snowblue-01"></span>
+                    <span class="theme-preset-background-02 theme-preset-background-snowblue-02"></span>
+                    <span class="theme-preset-background-03 theme-preset-background-snowblue-03"></span>
+                    <span class="theme-preset-background-04 theme-preset-background-snowblue-04"></span>
+                    <span class="theme-preset-accent theme-preset-accent-snowblue"></span>
+                  </div>
+                  <span class="button-text">Snow Blue</span>
+                </button>
               </div>
               <div class="button-wrap form-inline">
-                <button class="control-theme-preset-coralgreen button mb-0" tabindex="-1">Coral Green</button>
+                <button class="control-theme-preset-coralgreen theme-preset-button button mb-0" tabindex="-1">
+                  <div class="theme-preset-preview">
+                    <span class="theme-preset-background-01 theme-preset-background-coralgreen-01"></span>
+                    <span class="theme-preset-background-02 theme-preset-background-coralgreen-02"></span>
+                    <span class="theme-preset-background-03 theme-preset-background-coralgreen-03"></span>
+                    <span class="theme-preset-background-04 theme-preset-background-coralgreen-04"></span>
+                    <span class="theme-preset-accent theme-preset-accent-coralgreen"></span>
+                  </div>
+                  <span class="button-text">Coral Green</span>
+                </button>
               </div>
               <div class="button-wrap form-inline">
-                <button class="control-theme-preset-purplegem button mb-0" tabindex="-1">Purple Gem</button>
+                <button class="control-theme-preset-purplegem theme-preset-button button mb-0" tabindex="-1">
+                  <div class="theme-preset-preview">
+                    <span class="theme-preset-background-01 theme-preset-background-purplegem-01"></span>
+                    <span class="theme-preset-background-02 theme-preset-background-purplegem-02"></span>
+                    <span class="theme-preset-background-03 theme-preset-background-purplegem-03"></span>
+                    <span class="theme-preset-background-04 theme-preset-background-purplegem-04"></span>
+                    <span class="theme-preset-accent theme-preset-accent-purplegem"></span>
+                  </div>
+                  <span class="button-text">Purple Gem</span>
+                </button>
               </div>
               <div class="button-wrap form-inline">
-                <button class="control-theme-preset-hotpepper button mb-0" tabindex="-1">Hot Pepper</button>
+                <button class="control-theme-preset-hotpepper theme-preset-button button mb-0" tabindex="-1">
+                  <div class="theme-preset-preview">
+                    <span class="theme-preset-background-01 theme-preset-background-hotpepper-01"></span>
+                    <span class="theme-preset-background-02 theme-preset-background-hotpepper-02"></span>
+                    <span class="theme-preset-background-03 theme-preset-background-hotpepper-03"></span>
+                    <span class="theme-preset-background-04 theme-preset-background-hotpepper-04"></span>
+                    <span class="theme-preset-accent theme-preset-accent-hotpepper"></span>
+                  </div>
+                  <span class="button-text">Hot Pepper</span>
+                </button>
               </div>
             </div>
           </div>

src/js/control.js

@@ -2542,10 +2542,10 @@ var control = (function() {
       render.update();
     }
   }, {
-    element: helper.e(".control-theme-preset-nightingaleblue"),
+    element: helper.e(".control-theme-preset-midnightblue"),
     type: "button",
     func: function() {
-      theme.preset("nightingaleblue");
+      theme.preset("midnightblue");
       theme.style.check();
       theme.render.color.shade();
       theme.render.accent.color();

src/js/state.js

@@ -389,7 +389,7 @@ var state = (function() {
       radius: 0.25,
       style: "dark"
     },
-    nightingaleblue: {
+    midnightblue: {
       color: {
         hsl: {
           h: 220,
@@ -445,9 +445,9 @@ var state = (function() {
         }
       },
       accent: {
-        r: 255,
+        r: 94,
-        g: 10,
+        g: 255,
-        b: 178
+        b: 226
       },
       radius: 0.8,
       style: "dark"
@@ -456,18 +456,18 @@ var state = (function() {
       color: {
         hsl: {
           h: 197,
-          s: 14,
+          s: 25,
-          l: 61
+          l: 46
         },
         rgb: {
-          r: 141,
+          r: 87,
-          g: 161,
+          g: 130,
-          b: 169
+          b: 146
         }
       },
       accent: {
-        r: 105,
+        r: 59,
-        g: 183,
+        g: 207,
         b: 214
       },
       radius: 0,
@@ -497,23 +497,23 @@ var state = (function() {
     purplegem: {
       color: {
         hsl: {
-          h: 300,
+          h: 301,
-          s: 30,
+          s: 28,
-          l: 51
+          l: 56
         },
         rgb: {
-          r: 170,
+          r: 175,
-          g: 95,
+          g: 112,
-          b: 169
+          b: 173
         }
       },
       accent: {
-        r: 26,
+        r: 110,
-        g: 167,
+        g: 109,
-        b: 255
+        b: 208
       },
       radius: 0.40,
-      style: "dark"
+      style: "light"
     },
     hotpepper: {
       color: {

src/js/theme.js

@@ -240,6 +240,50 @@ var theme = (function() {
     }
   };
 
+  render.preset = function() {
+    var html = helper.e("html");
+    for (var key in state.get.preset()) {
+      var preset = state.get.preset()[key];
+      var shadeSteps = 4;
+      var lightShift = 12;
+      var hsl = helper.convertColor.rgb.hsl(preset.color.rgb);
+      var renderPreview = function(name, index, rgb) {
+        for (var key in rgb) {
+          if (rgb[key] < 0) {
+            rgb[key] = 0;
+          } else if (rgb[key] > 255) {
+            rgb[key] = 255;
+          };
+          rgb[key] = parseInt(rgb[key], 10);
+        };
+        if (index < 10) {
+          index = "0" + index;
+        } else {
+          index = index;
+        };
+        html.style.setProperty(name + index, rgb.r + ", " + rgb.g + ", " + rgb.b);
+      };
+      for (var i = 1; i <= shadeSteps; i++) {
+        var rgb;
+        if (preset.style == "dark") {
+          rgb = helper.convertColor.hsl.rgb({
+            h: hsl.h,
+            s: hsl.s,
+            l: hsl.l - (lightShift * i)
+          });
+        } else if (preset.style == "light") {
+          rgb = helper.convertColor.hsl.rgb({
+            h: hsl.h,
+            s: hsl.s,
+            l: hsl.l + (lightShift * i)
+          });
+        };
+        renderPreview("--theme-preset-background-" + key + "-", i, rgb);
+      };
+      html.style.setProperty("--theme-preset-accent-" + key, preset.accent.r + ", " + preset.accent.g + ", " + preset.accent.b);
+    };
+  };
+
   var accent = {
     random: function() {
       mod.accent.random();
@@ -283,6 +327,7 @@ var theme = (function() {
     render.color.shade();
     render.accent.color();
     render.radius();
+    render.preset();
   };
 
   // exposed methods