From 2869f1ada029326b0e387534992f83e512691694 Mon Sep 17 00:00:00 2001 From: zombieFox Date: Tue, 24 Dec 2019 16:36:19 +0000 Subject: [PATCH] [design] add more and improve presets --- src/css/theme.css | 20 ++++++++++++++++++++ src/css/variables.css | 15 ++++++++++----- src/index.html | 12 ++++++++++++ src/js/control.js | 34 ++++++++++++++++++++++++++++++++++ src/js/state.js | 39 ++++++++++++++++++++++++++++++--------- 5 files changed, 106 insertions(+), 14 deletions(-) diff --git a/src/css/theme.css b/src/css/theme.css index c208243b..22625675 100644 --- a/src/css/theme.css +++ b/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)) +} diff --git a/src/css/variables.css b/src/css/variables.css index 573195a0..28963135 100644 --- a/src/css/variables.css +++ b/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%; diff --git a/src/index.html b/src/index.html index 8c7d24db..0e88c17f 100644 --- a/src/index.html +++ b/src/index.html @@ -1429,6 +1429,18 @@ Cold Cube +
+ +
diff --git a/src/js/control.js b/src/js/control.js index ef872c6b..15afc92b 100644 --- a/src/js/control.js +++ b/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"), diff --git a/src/js/state.js b/src/js/state.js index 174fe220..a782dc80 100644 --- a/src/js/state.js +++ b/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" } };