[design] add more presets

Author: zombieFox

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 @@ <h1 class="menu-item-header-text">Presets</h1>
 <spanclass="button-text small">Snow Blue</span>
 </button>
 </div>
+<divclass="button-wrap form-inline">
+<buttonclass="control-theme-preset-chocorum theme-preset-button button mb-0" tabindex="-1">
+<divclass="theme-preset-preview">
+<spanclass="theme-preset-background-01 theme-preset-background-chocorum-01"></span>
+<spanclass="theme-preset-background-02 theme-preset-background-chocorum-02"></span>
+<spanclass="theme-preset-background-03 theme-preset-background-chocorum-03"></span>
+<spanclass="theme-preset-background-04 theme-preset-background-chocorum-04"></span>
+<spanclass="theme-preset-accent theme-preset-accent-chocorum"></span>
+</div>
+<spanclass="button-text small">Choco Rum</span>
+</button>
+</div>
 <divclass="button-wrap form-inline">
 <buttonclass="control-theme-preset-coralgreen theme-preset-button button mb-0" tabindex="-1">
 <divclass="theme-preset-preview">
@@ -1405,6 +1417,18 @@ <h1 class="menu-item-header-text">Presets</h1>
 <spanclass="button-text small">Hot Pepper</span>
 </button>
 </div>
+<divclass="button-wrap form-inline">
+<buttonclass="control-theme-preset-coldcube theme-preset-button button mb-0" tabindex="-1">
+<divclass="theme-preset-preview">
+<spanclass="theme-preset-background-01 theme-preset-background-coldcube-01"></span>
+<spanclass="theme-preset-background-02 theme-preset-background-coldcube-02"></span>
+<spanclass="theme-preset-background-03 theme-preset-background-coldcube-03"></span>
+<spanclass="theme-preset-background-04 theme-preset-background-coldcube-04"></span>
+<spanclass="theme-preset-accent theme-preset-accent-coldcube"></span>
+</div>
+<spanclass="button-text small">Cold Cube</span>
+</button>
+</div>
 </div>
 </div>
 <divclass="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"
 }
 };