[design] add more and improve presets

Author: zombieFox

src/css/theme.css

@@ -287,3 +287,23 @@
 .theme-preset-accent-coldcube{
 background-color:rgb(var(--theme-preset-accent-coldcube))
 }
+
+.theme-preset-background-outrun-01{
+background-color:rgb(var(--theme-preset-background-outrun-01))
+}
+
+.theme-preset-background-outrun-02{
+background-color:rgb(var(--theme-preset-background-outrun-02))
+}
+
+.theme-preset-background-outrun-03{
+background-color:rgb(var(--theme-preset-background-outrun-03))
+}
+
+.theme-preset-background-outrun-04{
+background-color:rgb(var(--theme-preset-background-outrun-04))
+}
+
+.theme-preset-accent-outrun{
+background-color:rgb(var(--theme-preset-accent-outrun))
+}

src/css/variables.css

@@ -71,11 +71,16 @@
 --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-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-background-outrun-01:25,25,25;
+--theme-preset-background-outrun-02:25,25,25;
+--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-preview-size:6em;
 /* header */
 --header-area-width:100%;

src/index.html

@@ -1429,6 +1429,18 @@ <h1 class="menu-item-header-text">Presets</h1>
 <spanclass="button-text small">Cold Cube</span>
 </button>
 </div>
+<divclass="button-wrap form-inline">
+<buttonclass="control-theme-preset-outrun theme-preset-button button mb-0" tabindex="-1">
+<divclass="theme-preset-preview">
+<spanclass="theme-preset-background-01 theme-preset-background-outrun-01"></span>
+<spanclass="theme-preset-background-02 theme-preset-background-outrun-02"></span>
+<spanclass="theme-preset-background-03 theme-preset-background-outrun-03"></span>
+<spanclass="theme-preset-background-04 theme-preset-background-outrun-04"></span>
+<spanclass="theme-preset-accent theme-preset-accent-outrun"></span>
+</div>
+<spanclass="button-text small">Outrun</span>
+</button>
+</div>
 </div>
 </div>
 <divclass="menu-item">

src/js/control.js

@@ -2539,7 +2539,9 @@ var control = (function(){
 theme.render.color.shade();
 theme.render.accent.color();
 theme.render.radius();
+link.groupAndItems();
 render.update();
+render.class();
 }
 },{
 element: helper.e(".control-theme-preset-midnightblue"),
@@ -2550,7 +2552,9 @@ var control = (function(){
 theme.render.color.shade();
 theme.render.accent.color();
 theme.render.radius();
+link.groupAndItems();
 render.update();
+render.class();
 }
 },{
 element: helper.e(".control-theme-preset-bluegum"),
@@ -2561,7 +2565,9 @@ var control = (function(){
 theme.render.color.shade();
 theme.render.accent.color();
 theme.render.radius();
+link.groupAndItems();
 render.update();
+render.class();
 }
 },{
 element: helper.e(".control-theme-preset-sharpmint"),
@@ -2572,7 +2578,9 @@ var control = (function(){
 theme.render.color.shade();
 theme.render.accent.color();
 theme.render.radius();
+link.groupAndItems();
 render.update();
+render.class();
 }
 },{
 element: helper.e(".control-theme-preset-snowblue"),
@@ -2583,7 +2591,9 @@ var control = (function(){
 theme.render.color.shade();
 theme.render.accent.color();
 theme.render.radius();
+link.groupAndItems();
 render.update();
+render.class();
 }
 },{
 element: helper.e(".control-theme-preset-chocorum"),
@@ -2594,7 +2604,9 @@ var control = (function(){
 theme.render.color.shade();
 theme.render.accent.color();
 theme.render.radius();
+link.groupAndItems();
 render.update();
+render.class();
 }
 },{
 element: helper.e(".control-theme-preset-coralgreen"),
@@ -2605,7 +2617,9 @@ var control = (function(){
 theme.render.color.shade();
 theme.render.accent.color();
 theme.render.radius();
+link.groupAndItems();
 render.update();
+render.class();
 }
 },{
 element: helper.e(".control-theme-preset-purplegem"),
@@ -2616,7 +2630,9 @@ var control = (function(){
 theme.render.color.shade();
 theme.render.accent.color();
 theme.render.radius();
+link.groupAndItems();
 render.update();
+render.class();
 }
 },{
 element: helper.e(".control-theme-preset-hotpepper"),
@@ -2627,7 +2643,9 @@ var control = (function(){
 theme.render.color.shade();
 theme.render.accent.color();
 theme.render.radius();
+link.groupAndItems();
 render.update();
+render.class();
 }
 },{
 element: helper.e(".control-theme-preset-coldcube"),
@@ -2638,7 +2656,22 @@ var control = (function(){
 theme.render.color.shade();
 theme.render.accent.color();
 theme.render.radius();
+link.groupAndItems();
+render.update();
+render.class();
+}
+},{
+element: helper.e(".control-theme-preset-outrun"),
+type: "button",
+func: function(){
+theme.preset("outrun");
+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"),
@@ -2824,6 +2857,7 @@ var control = (function(){
 theme.render.accent.input.picker();
 theme.render.accent.input.quick();
 link.groupAndItems();
+render.update();
 }
 },{
 element: helper.e(".control-theme-accent-random-active"),

src/js/state.js

@@ -392,20 +392,20 @@ var state = (function(){
 midnightblue: {
 color: {
 hsl: {
-h: 220,
-s: 60,
-l: 50
+h: 215,
+s: 41,
+l: 48
 },
 rgb: {
-r: 51,
-g: 102,
-b: 204
+r: 72,
+g: 114,
+b: 172
 }
 },
 accent: {
-r: 255,
-g: 0,
-b: 119
+r: 37,
+g: 55,
+b: 134
 },
 radius: 0.5,
 style: "dark"
@@ -577,6 +577,27 @@ var state = (function(){
 },
 radius: 0.1,
 style: "light"
+},
+outrun: {
+color: {
+hsl: {
+h: 227,
+s: 52,
+l: 55
+},
+rgb: {
+r: 80,
+g: 106,
+b: 199
+}
+},
+accent: {
+r: 255,
+g: 0,
+b: 187
+},
+radius: 0,
+style: "dark"
 }
 };