[design] add theme accent preset names

This commit is contained in:
zombieFox 2020-04-22 17:32:12 +01:00
parent 494f1fc70b
commit 48bdb6ef9c
5 changed files with 220 additions and 113 deletions

2
package-lock.json generated
View File

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

View File

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

View File

@ -269,149 +269,254 @@ var theme = (function() {
preset: { preset: {
all: [ all: [
[{ [{
h: 0, name: "Extra light grey",
s: 0, hsl: {
l: 90 h: 0,
s: 0,
l: 90
}
}, { }, {
h: 0, name: "Extra light red",
s: 80, hsl: {
l: 90 h: 0,
s: 80,
l: 90
}
}, { }, {
h: 60, name: "Extra light yellow",
s: 80, hsl: {
l: 90 h: 60,
s: 80,
l: 90
}
}, { }, {
h: 120, name: "Extra light green",
s: 80, hsl: {
l: 90 h: 120,
s: 80,
l: 90
}
}, { }, {
h: 180, name: "Extra light cyan",
s: 80, hsl: {
l: 90 h: 180,
s: 80,
l: 90
}
}, { }, {
h: 240, name: "Extra light blue",
s: 80, hsl: {
l: 90 h: 240,
s: 80,
l: 90
}
}, { }, {
h: 300, name: "Extra light magenta",
s: 80, hsl: {
l: 90 h: 300,
s: 80,
l: 90
}
}], }],
[{ [{
h: 0, name: "Light grey",
s: 0, hsl: {
l: 70 h: 0,
s: 0,
l: 70
}
}, { }, {
h: 0, name: "Light red",
s: 80, hsl: {
l: 70 h: 0,
s: 80,
l: 70
}
}, { }, {
h: 60, name: "Light yellow",
s: 80, hsl: {
l: 70 h: 60,
s: 80,
l: 70
}
}, { }, {
h: 120, name: "Light green",
s: 80, hsl: {
l: 70 h: 120,
s: 80,
l: 70
}
}, { }, {
h: 180, name: "Light cyan",
s: 80, hsl: {
l: 70 h: 180,
s: 80,
l: 70
}
}, { }, {
h: 240, name: "Light blue",
s: 80, hsl: {
l: 70 h: 240,
s: 80,
l: 70
}
}, { }, {
h: 300, name: "Light magenta",
s: 80, hsl: {
l: 70 h: 300,
s: 80,
l: 70
}
}], }],
[{ [{
h: 0, name: "Grey",
s: 0, hsl: {
l: 50 h: 0,
s: 0,
l: 50
}
}, { }, {
h: 0, name: "Red",
s: 80, hsl: {
l: 50 h: 0,
s: 80,
l: 50
}
}, { }, {
h: 60, name: "Yellow",
s: 80, hsl: {
l: 50 h: 60,
s: 80,
l: 50
}
}, { }, {
h: 120, name: "Green",
s: 80, hsl: {
l: 50 h: 120,
s: 80,
l: 50
}
}, { }, {
h: 180, name: "Cyan",
s: 80, hsl: {
l: 50 h: 180,
s: 80,
l: 50
}
}, { }, {
h: 240, name: "Blue",
s: 80, hsl: {
l: 50 h: 240,
s: 80,
l: 50
}
}, { }, {
h: 300, name: "Magenta",
s: 80, hsl: {
l: 50 h: 300,
s: 80,
l: 50
}
}], }],
[{ [{
h: 0, name: "Dark grey",
s: 0, hsl: {
l: 30 h: 0,
s: 0,
l: 30
}
}, { }, {
h: 0, name: "Dark red",
s: 60, hsl: {
l: 30 h: 0,
s: 60,
l: 30
}
}, { }, {
h: 60, name: "Dark yellow",
s: 60, hsl: {
l: 30 h: 60,
s: 60,
l: 30
}
}, { }, {
h: 120, name: "Dark green",
s: 60, hsl: {
l: 30 h: 120,
s: 60,
l: 30
}
}, { }, {
h: 180, name: "Dark cyan",
s: 60, hsl: {
l: 30 h: 180,
s: 60,
l: 30
}
}, { }, {
h: 240, name: "Dark blue",
s: 60, hsl: {
l: 30 h: 240,
s: 60,
l: 30
}
}, { }, {
h: 300, name: "Dark magenta",
s: 60, hsl: {
l: 30 h: 300,
s: 60,
l: 30
}
}], }],
[{ [{
h: 0, name: "Extra dark grey",
s: 0, hsl: {
l: 10 h: 0,
s: 0,
l: 10
}
}, { }, {
h: 0, name: "Extra dark red",
s: 20, hsl: {
l: 10 h: 0,
s: 20,
l: 10
}
}, { }, {
h: 60, name: "Extra dark yellow",
s: 20, hsl: {
l: 10 h: 60,
s: 20,
l: 10
}
}, { }, {
h: 120, name: "Extra dark green",
s: 20, hsl: {
l: 10 h: 120,
s: 20,
l: 10
}
}, { }, {
h: 180, name: "Extra dark cyan",
s: 20, hsl: {
l: 10 h: 180,
s: 20,
l: 10
}
}, { }, {
h: 240, name: "Extra dark blue",
s: 20, hsl: {
l: 10 h: 240,
s: 20,
l: 10
}
}, { }, {
h: 300, name: "Extra dark magenta",
s: 20, hsl: {
l: 10 h: 300,
s: 20,
l: 10
}
}] }]
], ],
set: function(hsl) { set: function(hsl) {
@ -1909,11 +2014,13 @@ var theme = (function() {
mod.accent.preset.all.forEach(function(arrayItem, index) { mod.accent.preset.all.forEach(function(arrayItem, index) {
arrayItem.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 themeAccentPresetItem = helper.node("button|class:theme-accent-preset-item button button-block button-ring,tabindex:-1");
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-h", arrayItem.h); var themeAccentPresetItemName = helper.node("span:" + arrayItem.name + "|class:sr-only");
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-s", arrayItem.s); themeAccentPresetItem.appendChild(themeAccentPresetItemName);
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-l", arrayItem.l); 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() { themeAccentPresetItem.addEventListener("click", function() {
mod.accent.preset.set(arrayItem); mod.accent.preset.set(arrayItem.hsl);
data.save(); data.save();
render.accent.color(); render.accent.color();
control.render.update.control.header(); control.render.update.control.header();

View File

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

View File

@ -2,7 +2,7 @@
"name": "nightTab", "name": "nightTab",
"short_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.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"version": "5.19.0", "version": "5.20.0",
"manifest_version": 2, "manifest_version": 2,
"chrome_url_overrides": { "chrome_url_overrides": {
"newtab": "index.html" "newtab": "index.html"