From 3ea18b11e2a140660fd42e70fb94604dc6f7ac33 Mon Sep 17 00:00:00 2001 From: zombieFox Date: Sun, 29 Dec 2019 08:50:05 -0700 Subject: [PATCH] [design] change theme preset names --- src/css/theme.css | 324 +++++++++++++++++++++++------------------- src/css/variables.css | 114 +++++++-------- src/index.html | 179 ++++++++++++----------- src/js/control.js | 51 ++++--- src/js/theme.js | 43 ++++-- 5 files changed, 399 insertions(+), 312 deletions(-) diff --git a/src/css/theme.css b/src/css/theme.css index 6f942345..786b709b 100644 --- a/src/css/theme.css +++ b/src/css/theme.css @@ -65,17 +65,19 @@ } .theme-preset-font { - z-index: 6; + padding: 0.25em; display: flex; flex-direction: column; justify-content: center; align-items: center; transform: scale(1); + white-space: initial; transition: transform var(--layout-timing-extra-fast); + z-index: 6; } .theme-preset-font-display { - font-size: 1.25em; + font-size: 1em; margin-bottom: 0.25em; } @@ -172,34 +174,64 @@ color: rgb(var(--theme-preset-font-color-midnight)); } -.theme-preset-background-bluegum-01 { - background-color: rgb(var(--theme-preset-background-bluegum-01)); +.theme-preset-background-pym-01 { + background-color: rgb(var(--theme-preset-background-pym-01)); } -.theme-preset-background-bluegum-02 { - background-color: rgb(var(--theme-preset-background-bluegum-02)); +.theme-preset-background-pym-02 { + background-color: rgb(var(--theme-preset-background-pym-02)); } -.theme-preset-background-bluegum-03 { - background-color: rgb(var(--theme-preset-background-bluegum-03)); +.theme-preset-background-pym-03 { + background-color: rgb(var(--theme-preset-background-pym-03)); } -.theme-preset-background-bluegum-04 { - background-color: rgb(var(--theme-preset-background-bluegum-04)); +.theme-preset-background-pym-04 { + background-color: rgb(var(--theme-preset-background-pym-04)); } -.theme-preset-accent-bluegum { - background-color: rgb(var(--theme-preset-accent-bluegum)); +.theme-preset-accent-pym { + background-color: rgb(var(--theme-preset-accent-pym)); } -.theme-preset-font-display-bluegum { - font-family: var(--theme-preset-font-display-bluegum); - color: rgb(var(--theme-preset-font-color-bluegum)); +.theme-preset-font-display-pym { + font-family: var(--theme-preset-font-display-pym); + color: rgb(var(--theme-preset-font-color-pym)); } -.theme-preset-font-ui-bluegum { - font-family: var(--theme-preset-font-ui-bluegum); - color: rgb(var(--theme-preset-font-color-bluegum)); +.theme-preset-font-ui-pym { + font-family: var(--theme-preset-font-ui-pym); + color: rgb(var(--theme-preset-font-color-pym)); +} + +.theme-preset-background-cruiser-01 { + background-color: rgb(var(--theme-preset-background-cruiser-01)); +} + +.theme-preset-background-cruiser-02 { + background-color: rgb(var(--theme-preset-background-cruiser-02)); +} + +.theme-preset-background-cruiser-03 { + background-color: rgb(var(--theme-preset-background-cruiser-03)); +} + +.theme-preset-background-cruiser-04 { + background-color: rgb(var(--theme-preset-background-cruiser-04)); +} + +.theme-preset-accent-cruiser { + background-color: rgb(var(--theme-preset-accent-cruiser)); +} + +.theme-preset-font-display-cruiser { + font-family: var(--theme-preset-font-display-cruiser); + color: rgb(var(--theme-preset-font-color-cruiser)); +} + +.theme-preset-font-ui-cruiser { + font-family: var(--theme-preset-font-ui-cruiser); + color: rgb(var(--theme-preset-font-color-cruiser)); } .theme-preset-background-sharpmint-01 { @@ -232,154 +264,154 @@ color: rgb(var(--theme-preset-font-color-sharpmint)); } -.theme-preset-background-snowblue-01 { - background-color: rgb(var(--theme-preset-background-snowblue-01)); +.theme-preset-background-snowglow-01 { + background-color: rgb(var(--theme-preset-background-snowglow-01)); } -.theme-preset-background-snowblue-02 { - background-color: rgb(var(--theme-preset-background-snowblue-02)); +.theme-preset-background-snowglow-02 { + background-color: rgb(var(--theme-preset-background-snowglow-02)); } -.theme-preset-background-snowblue-03 { - background-color: rgb(var(--theme-preset-background-snowblue-03)); +.theme-preset-background-snowglow-03 { + background-color: rgb(var(--theme-preset-background-snowglow-03)); } -.theme-preset-background-snowblue-04 { - background-color: rgb(var(--theme-preset-background-snowblue-04)); +.theme-preset-background-snowglow-04 { + background-color: rgb(var(--theme-preset-background-snowglow-04)); } -.theme-preset-accent-snowblue { - background-color: rgb(var(--theme-preset-accent-snowblue)); +.theme-preset-accent-snowglow { + background-color: rgb(var(--theme-preset-accent-snowglow)); } -.theme-preset-font-display-snowblue { - font-family: var(--theme-preset-font-display-snowblue); - color: rgb(var(--theme-preset-font-color-snowblue)); +.theme-preset-font-display-snowglow { + font-family: var(--theme-preset-font-display-snowglow); + color: rgb(var(--theme-preset-font-color-snowglow)); } -.theme-preset-font-ui-snowblue { - font-family: var(--theme-preset-font-ui-snowblue); - color: rgb(var(--theme-preset-font-color-snowblue)); +.theme-preset-font-ui-snowglow { + font-family: var(--theme-preset-font-ui-snowglow); + color: rgb(var(--theme-preset-font-color-snowglow)); } -.theme-preset-background-chocorum-01 { - background-color: rgb(var(--theme-preset-background-chocorum-01)); +.theme-preset-background-rumble-01 { + background-color: rgb(var(--theme-preset-background-rumble-01)); } -.theme-preset-background-chocorum-02 { - background-color: rgb(var(--theme-preset-background-chocorum-02)); +.theme-preset-background-rumble-02 { + background-color: rgb(var(--theme-preset-background-rumble-02)); } -.theme-preset-background-chocorum-03 { - background-color: rgb(var(--theme-preset-background-chocorum-03)); +.theme-preset-background-rumble-03 { + background-color: rgb(var(--theme-preset-background-rumble-03)); } -.theme-preset-background-chocorum-04 { - background-color: rgb(var(--theme-preset-background-chocorum-04)); +.theme-preset-background-rumble-04 { + background-color: rgb(var(--theme-preset-background-rumble-04)); } -.theme-preset-accent-chocorum { - background-color: rgb(var(--theme-preset-accent-chocorum)); +.theme-preset-accent-rumble { + background-color: rgb(var(--theme-preset-accent-rumble)); } -.theme-preset-font-display-chocorum { - font-family: var(--theme-preset-font-display-chocorum); - color: rgb(var(--theme-preset-font-color-chocorum)); +.theme-preset-font-display-rumble { + font-family: var(--theme-preset-font-display-rumble); + color: rgb(var(--theme-preset-font-color-rumble)); } -.theme-preset-font-ui-chocorum { - font-family: var(--theme-preset-font-ui-chocorum); - color: rgb(var(--theme-preset-font-color-chocorum)); +.theme-preset-font-ui-rumble { + font-family: var(--theme-preset-font-ui-rumble); + color: rgb(var(--theme-preset-font-color-rumble)); } -.theme-preset-background-sunburst-01 { - background-color: rgb(var(--theme-preset-background-sunburst-01)); +.theme-preset-background-sollight-01 { + background-color: rgb(var(--theme-preset-background-sollight-01)); } -.theme-preset-background-sunburst-02 { - background-color: rgb(var(--theme-preset-background-sunburst-02)); +.theme-preset-background-sollight-02 { + background-color: rgb(var(--theme-preset-background-sollight-02)); } -.theme-preset-background-sunburst-03 { - background-color: rgb(var(--theme-preset-background-sunburst-03)); +.theme-preset-background-sollight-03 { + background-color: rgb(var(--theme-preset-background-sollight-03)); } -.theme-preset-background-sunburst-04 { - background-color: rgb(var(--theme-preset-background-sunburst-04)); +.theme-preset-background-sollight-04 { + background-color: rgb(var(--theme-preset-background-sollight-04)); } -.theme-preset-accent-sunburst { - background-color: rgb(var(--theme-preset-accent-sunburst)); +.theme-preset-accent-sollight { + background-color: rgb(var(--theme-preset-accent-sollight)); } -.theme-preset-font-display-sunburst { - font-family: var(--theme-preset-font-display-sunburst); - color: rgb(var(--theme-preset-font-color-sunburst)); +.theme-preset-font-display-sollight { + font-family: var(--theme-preset-font-display-sollight); + color: rgb(var(--theme-preset-font-color-sollight)); } -.theme-preset-font-ui-sunburst { - font-family: var(--theme-preset-font-ui-sunburst); - color: rgb(var(--theme-preset-font-color-sunburst)); +.theme-preset-font-ui-sollight { + font-family: var(--theme-preset-font-ui-sollight); + color: rgb(var(--theme-preset-font-color-sollight)); } -.theme-preset-background-coralgreen-01 { - background-color: rgb(var(--theme-preset-background-coralgreen-01)); +.theme-preset-background-artdeco-01 { + background-color: rgb(var(--theme-preset-background-artdeco-01)); } -.theme-preset-background-coralgreen-02 { - background-color: rgb(var(--theme-preset-background-coralgreen-02)); +.theme-preset-background-artdeco-02 { + background-color: rgb(var(--theme-preset-background-artdeco-02)); } -.theme-preset-background-coralgreen-03 { - background-color: rgb(var(--theme-preset-background-coralgreen-03)); +.theme-preset-background-artdeco-03 { + background-color: rgb(var(--theme-preset-background-artdeco-03)); } -.theme-preset-background-coralgreen-04 { - background-color: rgb(var(--theme-preset-background-coralgreen-04)); +.theme-preset-background-artdeco-04 { + background-color: rgb(var(--theme-preset-background-artdeco-04)); } -.theme-preset-accent-coralgreen { - background-color: rgb(var(--theme-preset-accent-coralgreen)); +.theme-preset-accent-artdeco { + background-color: rgb(var(--theme-preset-accent-artdeco)); } -.theme-preset-font-display-coralgreen { - font-family: var(--theme-preset-font-display-coralgreen); - color: rgb(var(--theme-preset-font-color-coralgreen)); +.theme-preset-font-display-artdeco { + font-family: var(--theme-preset-font-display-artdeco); + color: rgb(var(--theme-preset-font-color-artdeco)); } -.theme-preset-font-ui-coralgreen { - font-family: var(--theme-preset-font-ui-coralgreen); - color: rgb(var(--theme-preset-font-color-coralgreen)); +.theme-preset-font-ui-artdeco { + font-family: var(--theme-preset-font-ui-artdeco); + color: rgb(var(--theme-preset-font-color-artdeco)); } -.theme-preset-background-purplegem-01 { - background-color: rgb(var(--theme-preset-background-purplegem-01)); +.theme-preset-background-macaroon-01 { + background-color: rgb(var(--theme-preset-background-macaroon-01)); } -.theme-preset-background-purplegem-02 { - background-color: rgb(var(--theme-preset-background-purplegem-02)); +.theme-preset-background-macaroon-02 { + background-color: rgb(var(--theme-preset-background-macaroon-02)); } -.theme-preset-background-purplegem-03 { - background-color: rgb(var(--theme-preset-background-purplegem-03)); +.theme-preset-background-macaroon-03 { + background-color: rgb(var(--theme-preset-background-macaroon-03)); } -.theme-preset-background-purplegem-04 { - background-color: rgb(var(--theme-preset-background-purplegem-04)); +.theme-preset-background-macaroon-04 { + background-color: rgb(var(--theme-preset-background-macaroon-04)); } -.theme-preset-accent-purplegem { - background-color: rgb(var(--theme-preset-accent-purplegem)); +.theme-preset-accent-macaroon { + background-color: rgb(var(--theme-preset-accent-macaroon)); } -.theme-preset-font-display-purplegem { - font-family: var(--theme-preset-font-display-purplegem); - color: rgb(var(--theme-preset-font-color-purplegem)); +.theme-preset-font-display-macaroon { + font-family: var(--theme-preset-font-display-macaroon); + color: rgb(var(--theme-preset-font-color-macaroon)); } -.theme-preset-font-ui-purplegem { - font-family: var(--theme-preset-font-ui-purplegem); - color: rgb(var(--theme-preset-font-color-purplegem)); +.theme-preset-font-ui-macaroon { + font-family: var(--theme-preset-font-ui-macaroon); + color: rgb(var(--theme-preset-font-color-macaroon)); } .theme-preset-background-hotpepper-01 { @@ -412,34 +444,34 @@ color: rgb(var(--theme-preset-font-color-hotpepper)); } -.theme-preset-background-steelgrey-01 { - background-color: rgb(var(--theme-preset-background-steelgrey-01)); +.theme-preset-background-steel-01 { + background-color: rgb(var(--theme-preset-background-steel-01)); } -.theme-preset-background-steelgrey-02 { - background-color: rgb(var(--theme-preset-background-steelgrey-02)); +.theme-preset-background-steel-02 { + background-color: rgb(var(--theme-preset-background-steel-02)); } -.theme-preset-background-steelgrey-03 { - background-color: rgb(var(--theme-preset-background-steelgrey-03)); +.theme-preset-background-steel-03 { + background-color: rgb(var(--theme-preset-background-steel-03)); } -.theme-preset-background-steelgrey-04 { - background-color: rgb(var(--theme-preset-background-steelgrey-04)); +.theme-preset-background-steel-04 { + background-color: rgb(var(--theme-preset-background-steel-04)); } -.theme-preset-accent-steelgrey { - background-color: rgb(var(--theme-preset-accent-steelgrey)); +.theme-preset-accent-steel { + background-color: rgb(var(--theme-preset-accent-steel)); } -.theme-preset-font-display-steelgrey { - font-family: var(--theme-preset-font-display-steelgrey); - color: rgb(var(--theme-preset-font-color-steelgrey)); +.theme-preset-font-display-steel { + font-family: var(--theme-preset-font-display-steel); + color: rgb(var(--theme-preset-font-color-steel)); } -.theme-preset-font-ui-steelgrey { - font-family: var(--theme-preset-font-ui-steelgrey); - color: rgb(var(--theme-preset-font-color-steelgrey)); +.theme-preset-font-ui-steel { + font-family: var(--theme-preset-font-ui-steel); + color: rgb(var(--theme-preset-font-color-steel)); } .theme-preset-background-outrun-01 { @@ -502,62 +534,62 @@ color: rgb(var(--theme-preset-font-color-pumpkin)); } -.theme-preset-background-whoosh-01 { - background-color: rgb(var(--theme-preset-background-whoosh-01)); +.theme-preset-background-bubblegum-01 { + background-color: rgb(var(--theme-preset-background-bubblegum-01)); } -.theme-preset-background-whoosh-02 { - background-color: rgb(var(--theme-preset-background-whoosh-02)); +.theme-preset-background-bubblegum-02 { + background-color: rgb(var(--theme-preset-background-bubblegum-02)); } -.theme-preset-background-whoosh-03 { - background-color: rgb(var(--theme-preset-background-whoosh-03)); +.theme-preset-background-bubblegum-03 { + background-color: rgb(var(--theme-preset-background-bubblegum-03)); } -.theme-preset-background-whoosh-04 { - background-color: rgb(var(--theme-preset-background-whoosh-04)); +.theme-preset-background-bubblegum-04 { + background-color: rgb(var(--theme-preset-background-bubblegum-04)); } -.theme-preset-accent-whoosh { - background-color: rgb(var(--theme-preset-accent-whoosh)); +.theme-preset-accent-bubblegum { + background-color: rgb(var(--theme-preset-accent-bubblegum)); } -.theme-preset-font-display-whoosh { - font-family: var(--theme-preset-font-display-whoosh); - color: rgb(var(--theme-preset-font-color-whoosh)); +.theme-preset-font-display-bubblegum { + font-family: var(--theme-preset-font-display-bubblegum); + color: rgb(var(--theme-preset-font-color-bubblegum)); } -.theme-preset-font-ui-whoosh { - font-family: var(--theme-preset-font-ui-whoosh); - color: rgb(var(--theme-preset-font-color-whoosh)); +.theme-preset-font-ui-bubblegum { + font-family: var(--theme-preset-font-ui-bubblegum); + color: rgb(var(--theme-preset-font-color-bubblegum)); } -.theme-preset-background-eldergold-01 { - background-color: rgb(var(--theme-preset-background-eldergold-01)); +.theme-preset-background-elderbean-01 { + background-color: rgb(var(--theme-preset-background-elderbean-01)); } -.theme-preset-background-eldergold-02 { - background-color: rgb(var(--theme-preset-background-eldergold-02)); +.theme-preset-background-elderbean-02 { + background-color: rgb(var(--theme-preset-background-elderbean-02)); } -.theme-preset-background-eldergold-03 { - background-color: rgb(var(--theme-preset-background-eldergold-03)); +.theme-preset-background-elderbean-03 { + background-color: rgb(var(--theme-preset-background-elderbean-03)); } -.theme-preset-background-eldergold-04 { - background-color: rgb(var(--theme-preset-background-eldergold-04)); +.theme-preset-background-elderbean-04 { + background-color: rgb(var(--theme-preset-background-elderbean-04)); } -.theme-preset-accent-eldergold { - background-color: rgb(var(--theme-preset-accent-eldergold)); +.theme-preset-accent-elderbean { + background-color: rgb(var(--theme-preset-accent-elderbean)); } -.theme-preset-font-display-eldergold { - font-family: var(--theme-preset-font-display-eldergold); - color: rgb(var(--theme-preset-font-color-eldergold)); +.theme-preset-font-display-elderbean { + font-family: var(--theme-preset-font-display-elderbean); + color: rgb(var(--theme-preset-font-color-elderbean)); } -.theme-preset-font-ui-eldergold { - font-family: var(--theme-preset-font-ui-eldergold); - color: rgb(var(--theme-preset-font-color-eldergold)); +.theme-preset-font-ui-elderbean { + font-family: var(--theme-preset-font-ui-elderbean); + color: rgb(var(--theme-preset-font-color-elderbean)); } diff --git a/src/css/variables.css b/src/css/variables.css index 2837dc6b..d8af2d27 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -40,13 +40,13 @@ --theme-preset-accent-midnight: 25, 25, 25; --theme-preset-font-display-midnight: sans-serif; --theme-preset-font-ui-midnight: sans-serif; - --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-font-display-bluegum: sans-serif; - --theme-preset-font-ui-bluegum: sans-serif; + --theme-preset-background-cruiser-01: 25, 25, 25; + --theme-preset-background-cruiser-02: 25, 25, 25; + --theme-preset-background-cruiser-03: 25, 25, 25; + --theme-preset-background-cruiser-04: 25, 25, 25; + --theme-preset-accent-cruiser: 25, 25, 25; + --theme-preset-font-display-cruiser: sans-serif; + --theme-preset-font-ui-cruiser: sans-serif; --theme-preset-background-sharpmint-01: 25, 25, 25; --theme-preset-background-sharpmint-02: 25, 25, 25; --theme-preset-background-sharpmint-03: 25, 25, 25; @@ -54,41 +54,41 @@ --theme-preset-accent-sharpmint: 25, 25, 25; --theme-preset-font-display-sharpmint: sans-serif; --theme-preset-font-ui-sharpmint: sans-serif; - --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-font-display-snowblue: sans-serif; - --theme-preset-font-ui-snowblue: sans-serif; - --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-font-display-chocorum: sans-serif; - --theme-preset-font-ui-chocorum: sans-serif; - --theme-preset-background-sunburst-01: 25, 25, 25; - --theme-preset-background-sunburst-02: 25, 25, 25; - --theme-preset-background-sunburst-03: 25, 25, 25; - --theme-preset-background-sunburst-04: 25, 25, 25; - --theme-preset-accent-sunburst: 25, 25, 25; - --theme-preset-font-display-sunburst: sans-serif; - --theme-preset-font-ui-sunburst: sans-serif; - --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-font-display-coralgreen: sans-serif; - --theme-preset-font-ui-coralgreen: sans-serif; - --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-font-display-purplegem: sans-serif; - --theme-preset-font-ui-purplegem: sans-serif; + --theme-preset-background-snowglow-01: 25, 25, 25; + --theme-preset-background-snowglow-02: 25, 25, 25; + --theme-preset-background-snowglow-03: 25, 25, 25; + --theme-preset-background-snowglow-04: 25, 25, 25; + --theme-preset-accent-snowglow: 25, 25, 25; + --theme-preset-font-display-snowglow: sans-serif; + --theme-preset-font-ui-snowglow: sans-serif; + --theme-preset-background-rumble-01: 25, 25, 25; + --theme-preset-background-rumble-02: 25, 25, 25; + --theme-preset-background-rumble-03: 25, 25, 25; + --theme-preset-background-rumble-04: 25, 25, 25; + --theme-preset-accent-rumble: 25, 25, 25; + --theme-preset-font-display-rumble: sans-serif; + --theme-preset-font-ui-rumble: sans-serif; + --theme-preset-background-sollight-01: 25, 25, 25; + --theme-preset-background-sollight-02: 25, 25, 25; + --theme-preset-background-sollight-03: 25, 25, 25; + --theme-preset-background-sollight-04: 25, 25, 25; + --theme-preset-accent-sollight: 25, 25, 25; + --theme-preset-font-display-sollight: sans-serif; + --theme-preset-font-ui-sollight: sans-serif; + --theme-preset-background-artdeco-01: 25, 25, 25; + --theme-preset-background-artdeco-02: 25, 25, 25; + --theme-preset-background-artdeco-03: 25, 25, 25; + --theme-preset-background-artdeco-04: 25, 25, 25; + --theme-preset-accent-artdeco: 25, 25, 25; + --theme-preset-font-display-artdeco: sans-serif; + --theme-preset-font-ui-artdeco: sans-serif; + --theme-preset-background-macaroon-01: 25, 25, 25; + --theme-preset-background-macaroon-02: 25, 25, 25; + --theme-preset-background-macaroon-03: 25, 25, 25; + --theme-preset-background-macaroon-04: 25, 25, 25; + --theme-preset-accent-macaroon: 25, 25, 25; + --theme-preset-font-display-macaroon: sans-serif; + --theme-preset-font-ui-macaroon: sans-serif; --theme-preset-background-hotpepper-01: 25, 25, 25; --theme-preset-background-hotpepper-02: 25, 25, 25; --theme-preset-background-hotpepper-03: 25, 25, 25; @@ -96,13 +96,13 @@ --theme-preset-accent-hotpepper: 25, 25, 25; --theme-preset-font-display-hotpepper: sans-serif; --theme-preset-font-ui-hotpepper: sans-serif; - --theme-preset-background-steelgrey-01: 25, 25, 25; - --theme-preset-background-steelgrey-02: 25, 25, 25; - --theme-preset-background-steelgrey-03: 25, 25, 25; - --theme-preset-background-steelgrey-04: 25, 25, 25; - --theme-preset-accent-steelgrey: 25, 25, 25; - --theme-preset-font-display-steelgrey: sans-serif; - --theme-preset-font-ui-steelgrey: sans-serif; + --theme-preset-background-steel-01: 25, 25, 25; + --theme-preset-background-steel-02: 25, 25, 25; + --theme-preset-background-steel-03: 25, 25, 25; + --theme-preset-background-steel-04: 25, 25, 25; + --theme-preset-accent-steel: 25, 25, 25; + --theme-preset-font-display-steel: sans-serif; + --theme-preset-font-ui-steel: sans-serif; --theme-preset-background-outrun-01: 25, 25, 25; --theme-preset-background-outrun-02: 25, 25, 25; --theme-preset-background-outrun-03: 25, 25, 25; @@ -117,14 +117,14 @@ --theme-preset-accent-pumpkin: 25, 25, 25; --theme-preset-font-display-pumpkin: sans-serif; --theme-preset-font-ui-pumpkin: sans-serif; - --theme-preset-background-whoosh-01: 25, 25, 25; - --theme-preset-background-whoosh-02: 25, 25, 25; - --theme-preset-background-whoosh-03: 25, 25, 25; - --theme-preset-background-whoosh-04: 25, 25, 25; - --theme-preset-accent-whoosh: 25, 25, 25; - --theme-preset-font-display-whoosh: sans-serif; - --theme-preset-font-ui-whoosh: sans-serif; - --theme-preset-preview-size: 7em; + --theme-preset-background-bubblegum-01: 25, 25, 25; + --theme-preset-background-bubblegum-02: 25, 25, 25; + --theme-preset-background-bubblegum-03: 25, 25, 25; + --theme-preset-background-bubblegum-04: 25, 25, 25; + --theme-preset-accent-bubblegum: 25, 25, 25; + --theme-preset-font-display-bubblegum: sans-serif; + --theme-preset-font-ui-bubblegum: sans-serif; + --theme-preset-preview-size: 6em; /* header */ --header-area-width: 100%; --header-shade-color: var(--theme-color-01); diff --git a/src/index.html b/src/index.html index 90b1b60e..14769ada 100644 --- a/src/index.html +++ b/src/index.html @@ -38,7 +38,7 @@ - + @@ -1344,16 +1344,31 @@
- +
+
+ @@ -1374,76 +1389,76 @@
-
-
-
-
- @@ -1464,16 +1479,16 @@
- @@ -1509,31 +1524,31 @@
-
- diff --git a/src/js/control.js b/src/js/control.js index cac08fa9..e0bb0d2a 100644 --- a/src/js/control.js +++ b/src/js/control.js @@ -2580,10 +2580,25 @@ var control = (function() { render.class(); } }, { - element: helper.e(".control-theme-preset-bluegum"), + element: helper.e(".control-theme-preset-pym"), type: "button", func: function() { - theme.preset("bluegum"); + theme.preset("pym"); + theme.render.font.display(); + theme.render.font.ui(); + 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-preset-cruiser"), + type: "button", + func: function() { + theme.preset("cruiser"); theme.render.font.display(); theme.render.font.ui(); theme.style.check(); @@ -2610,10 +2625,10 @@ var control = (function() { render.class(); } }, { - element: helper.e(".control-theme-preset-snowblue"), + element: helper.e(".control-theme-preset-snowglow"), type: "button", func: function() { - theme.preset("snowblue"); + theme.preset("snowglow"); theme.render.font.display(); theme.render.font.ui(); theme.style.check(); @@ -2625,10 +2640,10 @@ var control = (function() { render.class(); } }, { - element: helper.e(".control-theme-preset-chocorum"), + element: helper.e(".control-theme-preset-rumble"), type: "button", func: function() { - theme.preset("chocorum"); + theme.preset("rumble"); theme.render.font.display(); theme.render.font.ui(); theme.style.check(); @@ -2640,10 +2655,10 @@ var control = (function() { render.class(); } }, { - element: helper.e(".control-theme-preset-sunburst"), + element: helper.e(".control-theme-preset-sollight"), type: "button", func: function() { - theme.preset("sunburst"); + theme.preset("sollight"); theme.render.font.display(); theme.render.font.ui(); theme.style.check(); @@ -2655,10 +2670,10 @@ var control = (function() { render.class(); } }, { - element: helper.e(".control-theme-preset-coralgreen"), + element: helper.e(".control-theme-preset-artdeco"), type: "button", func: function() { - theme.preset("coralgreen"); + theme.preset("artdeco"); theme.render.font.display(); theme.render.font.ui(); theme.style.check(); @@ -2670,10 +2685,10 @@ var control = (function() { render.class(); } }, { - element: helper.e(".control-theme-preset-purplegem"), + element: helper.e(".control-theme-preset-macaroon"), type: "button", func: function() { - theme.preset("purplegem"); + theme.preset("macaroon"); theme.render.font.display(); theme.render.font.ui(); theme.style.check(); @@ -2700,10 +2715,10 @@ var control = (function() { render.class(); } }, { - element: helper.e(".control-theme-preset-steelgrey"), + element: helper.e(".control-theme-preset-steel"), type: "button", func: function() { - theme.preset("steelgrey"); + theme.preset("steel"); theme.render.font.display(); theme.render.font.ui(); theme.style.check(); @@ -2745,10 +2760,10 @@ var control = (function() { render.class(); } }, { - element: helper.e(".control-theme-preset-whoosh"), + element: helper.e(".control-theme-preset-bubblegum"), type: "button", func: function() { - theme.preset("whoosh"); + theme.preset("bubblegum"); theme.render.font.display(); theme.render.font.ui(); theme.style.check(); @@ -2760,10 +2775,10 @@ var control = (function() { render.class(); } }, { - element: helper.e(".control-theme-preset-eldergold"), + element: helper.e(".control-theme-preset-elderbean"), type: "button", func: function() { - theme.preset("eldergold"); + theme.preset("elderbean"); theme.render.font.display(); theme.render.font.ui(); theme.style.check(); diff --git a/src/js/theme.js b/src/js/theme.js index 33966f94..60dad9a1 100644 --- a/src/js/theme.js +++ b/src/js/theme.js @@ -191,7 +191,32 @@ var theme = (function() { radius: 0.5, style: "dark" }, - bluegum: { + pym: { + font: { + display: "Autour One", + ui: "Solway" + }, + color: { + hsl: { + h: 278, + s: 73, + l: 50 + }, + rgb: { + r: 153, + g: 34, + b: 221 + } + }, + accent: { + r: 0, + g: 255, + b: 170 + }, + radius: 0.1, + style: "dark" + }, + cruiser: { font: { display: "Alatsi", ui: "Source Sans Pro" @@ -241,7 +266,7 @@ var theme = (function() { radius: 0.8, style: "dark" }, - snowblue: { + snowglow: { font: { display: "Righteous", ui: "Raleway" @@ -266,7 +291,7 @@ var theme = (function() { radius: 0, style: "light" }, - chocorum: { + rumble: { font: { display: "Odibee Sans", ui: "Roboto Condensed" @@ -291,7 +316,7 @@ var theme = (function() { radius: 0.75, style: "dark" }, - sunburst: { + sollight: { font: { display: "Fredoka One", ui: "Muli" @@ -316,7 +341,7 @@ var theme = (function() { radius: 0.5, style: "light" }, - coralgreen: { + artdeco: { font: { display: "Poiret One", ui: "Lato" @@ -341,7 +366,7 @@ var theme = (function() { radius: 2, style: "dark" }, - purplegem: { + macaroon: { font: { display: "Calistoga", ui: "Source Sans Pro" @@ -391,7 +416,7 @@ var theme = (function() { radius: 0.6, style: "dark" }, - steelgrey: { + steel: { font: { display: "Abel", ui: "Raleway" @@ -466,7 +491,7 @@ var theme = (function() { radius: 0.2, style: "dark" }, - whoosh: { + bubblegum: { font: { display: "Monoton", ui: "Lato" @@ -491,7 +516,7 @@ var theme = (function() { radius: 1.2, style: "dark" }, - eldergold: { + elderbean: { font: { display: "Life Savers", ui: "Quicksand"