[feature] add more theme accent presets

This commit is contained in:
zombieFox 2020-05-01 20:40:26 +01:00
parent 02ecd77ac9
commit 54dd036c11
7 changed files with 748 additions and 219 deletions

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "nightTab",
"version": "5.29.0",
"version": "5.30.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

View File

@ -1,6 +1,6 @@
{
"name": "nightTab",
"version": "5.29.0",
"version": "5.30.0",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"main": "index.js",
"scripts": {

View File

@ -337,11 +337,11 @@
background-color: rgb(var(--theme-color-20));
}
.theme-accent-preset-grid {
.theme-accent-preset {
display: grid;
grid-gap: var(--form-wrap-space);
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-gap: calc(var(--form-wrap-space) / 2);
grid-template-rows: repeat(7, auto);
grid-auto-flow: column;
justify-items: center;
}
@ -350,8 +350,20 @@
padding: 0;
width: 1.5em;
height: 1.5em;
min-width: 1.5em;
min-height: 1.5em;
min-width: initial;
min-height: initial;
}
.theme-accent-preset-type-grey {
display: block;
}
.theme-accent-preset-type-primary {
display: block;
}
.theme-accent-preset-type-secondary {
display: none;
}
.theme-accent-preset-item:focus,
@ -360,20 +372,46 @@
background-color: hsl(var(--theme-accent-preset-item-color-h), calc(var(--theme-accent-preset-item-color-s) * 1%), calc(var(--theme-accent-preset-item-color-l) * 1%));
}
@media (min-width: 550px) {
.theme-accent-preset-item {
width: 1.25em;
height: 1.25em;
}
.theme-accent-preset-type-secondary {
display: block;
}
}
@media (min-width: 700px) {
.theme-accent-preset-item {
width: 2em;
height: 2em;
min-width: 2em;
min-height: 2em;
width: 1.5em;
height: 1.5em;
}
.theme-accent-preset-type-secondary {
display: none;
}
}
@media (min-width: 900px) {
.theme-accent-preset-item {
width: 2.5em;
height: 2.5em;
min-width: 2.5em;
min-height: 2.5em;
width: 1.25em;
height: 1.25em;
}
.theme-accent-preset-type-secondary {
display: block;
}
}
@media (min-width: 1100px) {
.theme-accent-preset-item {
width: 1.5em;
height: 1.5em;
}
.theme-accent-preset-type-secondary {
display: block;
}
}

View File

@ -5,7 +5,7 @@
@@include("./theme/saved.html")
@@include("./theme/fonts.html")
@@include("./theme/style.html")
@@include("./theme/color.html")

View File

@ -267,254 +267,745 @@ var theme = (function() {
});
},
preset: {
all: [
colorscale: [
[{
name: "Extra light grey",
name: "Super extra light grey",
type: "grey",
hsl: {
h: 0,
s: 0,
l: 90
}
}, {
name: "Extra light grey",
type: "grey",
hsl: {
h: 0,
s: 0,
l: 77
}
}, {
name: "Light grey",
type: "grey",
hsl: {
h: 0,
s: 0,
l: 63
}
}, {
name: "Grey",
type: "grey",
hsl: {
h: 0,
s: 0,
l: 50
}
}, {
name: "Dark grey",
type: "grey",
hsl: {
h: 0,
s: 0,
l: 37
}
}, {
name: "Extra dark grey",
type: "grey",
hsl: {
h: 0,
s: 0,
l: 23
}
}, {
name: "Super Extra dark grey",
type: "grey",
hsl: {
h: 0,
s: 0,
l: 10
}
}],
[{
name: "Super extra light red",
type: "primary",
hsl: {
h: 0,
s: 40,
l: 90
}
}, {
name: "Extra light red",
type: "primary",
hsl: {
h: 0,
s: 60,
l: 77
}
}, {
name: "Light red",
type: "primary",
hsl: {
h: 0,
s: 80,
l: 63
}
}, {
name: "Red",
type: "primary",
hsl: {
h: 0,
s: 100,
l: 50
}
}, {
name: "Dark red",
type: "primary",
hsl: {
h: 0,
s: 80,
l: 37
}
}, {
name: "Extra dark red",
type: "primary",
hsl: {
h: 0,
s: 60,
l: 23
}
}, {
name: "Super extra dark red",
type: "primary",
hsl: {
h: 0,
s: 40,
l: 10
}
}],
[{
name: "Super extra light orange",
type: "secondary",
hsl: {
h: 30,
s: 40,
l: 90
}
}, {
name: "Extra light orange",
type: "secondary",
hsl: {
h: 30,
s: 60,
l: 77
}
}, {
name: "Light orange",
type: "secondary",
hsl: {
h: 30,
s: 80,
l: 63
}
}, {
name: "Orange",
type: "secondary",
hsl: {
h: 30,
s: 100,
l: 50
}
}, {
name: "Dark orange",
type: "secondary",
hsl: {
h: 30,
s: 80,
l: 37
}
}, {
name: "Extra dark orange",
type: "secondary",
hsl: {
h: 30,
s: 60,
l: 23
}
}, {
name: "Super extra dark orange",
type: "secondary",
hsl: {
h: 30,
s: 40,
l: 10
}
}],
[{
name: "Super extra light yellow",
type: "primary",
hsl: {
h: 60,
s: 40,
l: 90
}
}, {
name: "Extra light yellow",
type: "primary",
hsl: {
h: 60,
s: 60,
l: 77
}
}, {
name: "Light yellow",
type: "primary",
hsl: {
h: 60,
s: 80,
l: 63
}
}, {
name: "Yellow",
type: "primary",
hsl: {
h: 60,
s: 100,
l: 50
}
}, {
name: "Dark yellow",
type: "primary",
hsl: {
h: 60,
s: 80,
l: 37
}
}, {
name: "Extra dark yellow",
type: "primary",
hsl: {
h: 60,
s: 60,
l: 23
}
}, {
name: "Super extra dark yellow",
type: "primary",
hsl: {
h: 60,
s: 40,
l: 10
}
}],
[{
name: "Super extra light lime",
type: "secondary",
hsl: {
h: 90,
s: 40,
l: 90
}
}, {
name: "Extra light lime",
type: "secondary",
hsl: {
h: 90,
s: 60,
l: 77
}
}, {
name: "Light lime",
type: "secondary",
hsl: {
h: 90,
s: 80,
l: 63
}
}, {
name: "Lime",
type: "secondary",
hsl: {
h: 90,
s: 100,
l: 50
}
}, {
name: "Dark lime",
type: "secondary",
hsl: {
h: 90,
s: 80,
l: 37
}
}, {
name: "Extra dark lime",
type: "secondary",
hsl: {
h: 90,
s: 60,
l: 23
}
}, {
name: "Super extra dark lime",
type: "secondary",
hsl: {
h: 90,
s: 40,
l: 10
}
}],
[{
name: "Super extra light green",
type: "primary",
hsl: {
h: 120,
s: 40,
l: 90
}
}, {
name: "Extra light green",
type: "primary",
hsl: {
h: 120,
s: 60,
l: 77
}
}, {
name: "Light green",
type: "primary",
hsl: {
h: 120,
s: 80,
l: 63
}
}, {
name: "Green",
type: "primary",
hsl: {
h: 120,
s: 100,
l: 50
}
}, {
name: "Dark green",
type: "primary",
hsl: {
h: 120,
s: 80,
l: 37
}
}, {
name: "Extra dark green",
type: "primary",
hsl: {
h: 120,
s: 60,
l: 23
}
}, {
name: "Super extra dark green",
type: "primary",
hsl: {
h: 120,
s: 40,
l: 10
}
}],
[{
name: "Super extra light aqua",
type: "secondary",
hsl: {
h: 150,
s: 40,
l: 90
}
}, {
name: "Extra light aqua",
type: "secondary",
hsl: {
h: 150,
s: 60,
l: 77
}
}, {
name: "Light aqua",
type: "secondary",
hsl: {
h: 150,
s: 80,
l: 63
}
}, {
name: "Aqua",
type: "secondary",
hsl: {
h: 150,
s: 100,
l: 50
}
}, {
name: "Dark aqua",
type: "secondary",
hsl: {
h: 150,
s: 80,
l: 37
}
}, {
name: "Extra dark aqua",
type: "secondary",
hsl: {
h: 150,
s: 60,
l: 23
}
}, {
name: "Super extra dark aqua",
type: "secondary",
hsl: {
h: 150,
s: 40,
l: 10
}
}],
[{
name: "Super extra light cyan",
type: "primary",
hsl: {
h: 180,
s: 40,
l: 90
}
}, {
name: "Extra light cyan",
type: "primary",
hsl: {
h: 180,
s: 60,
l: 77
}
}, {
name: "Light cyan",
type: "primary",
hsl: {
h: 180,
s: 80,
l: 63
}
}, {
name: "Cyan",
type: "primary",
hsl: {
h: 180,
s: 100,
l: 50
}
}, {
name: "Dark cyan",
type: "primary",
hsl: {
h: 180,
s: 80,
l: 37
}
}, {
name: "Extra dark cyan",
type: "primary",
hsl: {
h: 180,
s: 60,
l: 23
}
}, {
name: "Super extra dark cyan",
type: "primary",
hsl: {
h: 180,
s: 40,
l: 10
}
}],
[{
name: "Super extra light teal",
type: "secondary",
hsl: {
h: 210,
s: 40,
l: 90
}
}, {
name: "Extra light teal",
type: "secondary",
hsl: {
h: 210,
s: 60,
l: 77
}
}, {
name: "Light teal",
type: "secondary",
hsl: {
h: 210,
s: 80,
l: 63
}
}, {
name: "Teal",
type: "secondary",
hsl: {
h: 210,
s: 100,
l: 50
}
}, {
name: "Dark teal",
type: "secondary",
hsl: {
h: 210,
s: 80,
l: 37
}
}, {
name: "Extra dark teal",
type: "secondary",
hsl: {
h: 210,
s: 60,
l: 23
}
}, {
name: "Super extra dark teal",
type: "secondary",
hsl: {
h: 210,
s: 40,
l: 10
}
}],
[{
name: "Super extra light blue",
type: "primary",
hsl: {
h: 240,
s: 40,
l: 90
}
}, {
name: "Extra light blue",
type: "primary",
hsl: {
h: 240,
s: 60,
l: 77
}
}, {
name: "Light blue",
type: "primary",
hsl: {
h: 240,
s: 80,
l: 63
}
}, {
name: "Blue",
type: "primary",
hsl: {
h: 240,
s: 100,
l: 50
}
}, {
name: "Dark blue",
type: "primary",
hsl: {
h: 240,
s: 80,
l: 37
}
}, {
name: "Extra dark blue",
type: "primary",
hsl: {
h: 240,
s: 60,
l: 23
}
}, {
name: "Super extra dark blue",
type: "primary",
hsl: {
h: 240,
s: 40,
l: 10
}
}],
[{
name: "Super extra light pruple",
type: "secondary",
hsl: {
h: 270,
s: 40,
l: 90
}
}, {
name: "Extra light pruple",
type: "secondary",
hsl: {
h: 270,
s: 60,
l: 77
}
}, {
name: "Light pruple",
type: "secondary",
hsl: {
h: 270,
s: 80,
l: 63
}
}, {
name: "Pruple",
type: "secondary",
hsl: {
h: 270,
s: 100,
l: 50
}
}, {
name: "Dark pruple",
type: "secondary",
hsl: {
h: 270,
s: 80,
l: 37
}
}, {
name: "Extra dark pruple",
type: "secondary",
hsl: {
h: 270,
s: 60,
l: 23
}
}, {
name: "Super extra dark pruple",
type: "secondary",
hsl: {
h: 270,
s: 40,
l: 10
}
}],
[{
name: "Super extra light magenta",
type: "primary",
hsl: {
h: 300,
s: 40,
l: 90
}
}, {
name: "Extra light magenta",
type: "primary",
hsl: {
h: 300,
s: 80,
l: 90
}
}],
[{
name: "Light grey",
hsl: {
h: 0,
s: 0,
l: 70
}
}, {
name: "Light red",
hsl: {
h: 0,
s: 80,
l: 70
}
}, {
name: "Light yellow",
hsl: {
h: 60,
s: 80,
l: 70
}
}, {
name: "Light green",
hsl: {
h: 120,
s: 80,
l: 70
}
}, {
name: "Light cyan",
hsl: {
h: 180,
s: 80,
l: 70
}
}, {
name: "Light blue",
hsl: {
h: 240,
s: 80,
l: 70
s: 60,
l: 77
}
}, {
name: "Light magenta",
type: "primary",
hsl: {
h: 300,
s: 80,
l: 70
}
}],
[{
name: "Grey",
hsl: {
h: 0,
s: 0,
l: 50
}
}, {
name: "Red",
hsl: {
h: 0,
s: 80,
l: 50
}
}, {
name: "Yellow",
hsl: {
h: 60,
s: 80,
l: 50
}
}, {
name: "Green",
hsl: {
h: 120,
s: 80,
l: 50
}
}, {
name: "Cyan",
hsl: {
h: 180,
s: 80,
l: 50
}
}, {
name: "Blue",
hsl: {
h: 240,
s: 80,
l: 50
l: 63
}
}, {
name: "Magenta",
type: "primary",
hsl: {
h: 300,
s: 80,
s: 100,
l: 50
}
}],
[{
name: "Dark grey",
hsl: {
h: 0,
s: 0,
l: 30
}
}, {
name: "Dark red",
hsl: {
h: 0,
s: 60,
l: 30
}
}, {
name: "Dark yellow",
hsl: {
h: 60,
s: 60,
l: 30
}
}, {
name: "Dark green",
hsl: {
h: 120,
s: 60,
l: 30
}
}, {
name: "Dark cyan",
hsl: {
h: 180,
s: 60,
l: 30
}
}, {
name: "Dark blue",
hsl: {
h: 240,
s: 60,
l: 30
}
}, {
name: "Dark magenta",
type: "primary",
hsl: {
h: 300,
s: 60,
l: 30
}
}],
[{
name: "Extra dark grey",
hsl: {
h: 0,
s: 0,
l: 10
}
}, {
name: "Extra dark red",
hsl: {
h: 0,
s: 20,
l: 10
}
}, {
name: "Extra dark yellow",
hsl: {
h: 60,
s: 20,
l: 10
}
}, {
name: "Extra dark green",
hsl: {
h: 120,
s: 20,
l: 10
}
}, {
name: "Extra dark cyan",
hsl: {
h: 180,
s: 20,
l: 10
}
}, {
name: "Extra dark blue",
hsl: {
h: 240,
s: 20,
l: 10
s: 80,
l: 37
}
}, {
name: "Extra dark magenta",
type: "primary",
hsl: {
h: 300,
s: 20,
s: 60,
l: 23
}
}, {
name: "Super extra dark magenta",
type: "primary",
hsl: {
h: 300,
s: 40,
l: 10
}
}],
[{
name: "Super extra light fuchsia",
type: "secondary",
hsl: {
h: 330,
s: 40,
l: 90
}
}, {
name: "Extra light fuchsia",
type: "secondary",
hsl: {
h: 330,
s: 60,
l: 77
}
}, {
name: "Light fuchsia",
type: "secondary",
hsl: {
h: 330,
s: 80,
l: 63
}
}, {
name: "Fuchsia",
type: "secondary",
hsl: {
h: 330,
s: 100,
l: 50
}
}, {
name: "Dark fuchsia",
type: "secondary",
hsl: {
h: 330,
s: 80,
l: 37
}
}, {
name: "Extra dark fuchsia",
type: "secondary",
hsl: {
h: 330,
s: 60,
l: 23
}
}, {
name: "Super extra dark fuchsia",
type: "secondary",
hsl: {
h: 330,
s: 40,
l: 10
}
}]
@ -2008,30 +2499,30 @@ var theme = (function() {
},
preset: function() {
var themeAccentPreset = helper.e(".theme-accent-preset");
var formWrap = helper.node("div|class:form-wrap");
var themeAccentPresetGrid = helper.node("div|class:theme-accent-preset-grid");
mod.accent.preset.all.forEach(function(arrayItem, index) {
var _makeAccentButton = function(preset) {
var themeAccentPresetItem = helper.node("button|class:theme-accent-preset-item theme-accent-preset-type-" + preset.type + " button button-block button-ring,title:" + preset.name + ",tabindex:-1");
var themeAccentPresetItemName = helper.node("span:" + preset.name + "|class:sr-only");
themeAccentPresetItem.appendChild(themeAccentPresetItemName);
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-h", preset.hsl.h);
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-s", preset.hsl.s);
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-l", preset.hsl.l);
themeAccentPresetItem.addEventListener("click", function() {
mod.accent.preset.set(preset.hsl);
data.save();
render.accent.color();
control.render.update.control.header();
control.render.update.control.menu();
});
return themeAccentPresetItem;
};
mod.accent.preset.colorscale.forEach(function(arrayItem, index) {
arrayItem.forEach(function(arrayItem, index) {
var themeAccentPresetItem = helper.node("button|class:theme-accent-preset-item button button-block button-ring,tabindex:-1");
var themeAccentPresetItemName = helper.node("span:" + arrayItem.name + "|class:sr-only");
themeAccentPresetItem.appendChild(themeAccentPresetItemName);
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-h", arrayItem.hsl.h);
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-s", arrayItem.hsl.s);
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-l", arrayItem.hsl.l);
themeAccentPresetItem.addEventListener("click", function() {
mod.accent.preset.set(arrayItem.hsl);
data.save();
render.accent.color();
control.render.update.control.header();
control.render.update.control.menu();
});
themeAccentPresetGrid.appendChild(themeAccentPresetItem);
themeAccentPreset.appendChild(_makeAccentButton(arrayItem));
});
});
formWrap.appendChild(themeAccentPresetGrid);
themeAccentPreset.appendChild(formWrap);
}
};

View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "5.29.0";
var current = "5.30.0";
var name = "Zonked Tarsier";

View File

@ -2,7 +2,7 @@
"name": "nightTab",
"short_name": "nightTab",
"description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"version": "5.29.0",
"version": "5.30.0",
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"