extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-01-10 16:08:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

[refactor] improve theme accent preset names

Browse Source
This commit is contained in:
zombieFox 2020-05-01 23:56:20 +01:00
parent 54dd036c11
commit b9aee965f7
5 changed files with 446 additions and 756 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

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

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "nightTab", "name": "nightTab",
"version": "5.30.0", "version": "5.31.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": {

686
src/js/theme.js
View File

@ -267,749 +267,431 @@ var theme = (function() {
}); });
}, },
preset: { preset: {
colorscale: [ nameModifier: {
[{ "90": "Super extra light",
name: "Super extra light grey", "77": "Extra light",
"63": "Light",
"37": "Dark",
"23": "Extra dark",
"10": "Super extra dark"
},
all: [{
name: "Grey",
type: "grey", type: "grey",
hsl: { colors: [{
h: 0, h: 0,
s: 0, s: 0,
l: 90 l: 90
}
}, { }, {
name: "Extra light grey",
type: "grey",
hsl: {
h: 0, h: 0,
s: 0, s: 0,
l: 77 l: 77
}
}, { }, {
name: "Light grey",
type: "grey",
hsl: {
h: 0, h: 0,
s: 0, s: 0,
l: 63 l: 63
}
}, { }, {
name: "Grey",
type: "grey",
hsl: {
h: 0, h: 0,
s: 0, s: 0,
l: 50 l: 50
}
}, { }, {
name: "Dark grey",
type: "grey",
hsl: {
h: 0, h: 0,
s: 0, s: 0,
l: 37 l: 37
}
}, { }, {
name: "Extra dark grey",
type: "grey",
hsl: {
h: 0, h: 0,
s: 0, s: 0,
l: 23 l: 23
}
}, { }, {
name: "Super Extra dark grey",
type: "grey",
hsl: {
h: 0, h: 0,
s: 0, s: 0,
l: 10 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", name: "Red",
type: "primary", type: "primary",
hsl: { colors: [{
h: 0,
s: 40,
l: 90
}, {
h: 0,
s: 60,
l: 77
}, {
h: 0,
s: 80,
l: 63
}, {
h: 0, h: 0,
s: 100, s: 100,
l: 50 l: 50
}
}, { }, {
name: "Dark red",
type: "primary",
hsl: {
h: 0, h: 0,
s: 80, s: 80,
l: 37 l: 37
}
}, { }, {
name: "Extra dark red",
type: "primary",
hsl: {
h: 0, h: 0,
s: 60, s: 60,
l: 23 l: 23
}
}, { }, {
name: "Super extra dark red",
type: "primary",
hsl: {
h: 0, h: 0,
s: 40, s: 40,
l: 10 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", name: "Orange",
type: "secondary", type: "secondary",
hsl: { colors: [{
h: 30,
s: 40,
l: 90
}, {
h: 30,
s: 60,
l: 77
}, {
h: 30,
s: 80,
l: 63
}, {
h: 30, h: 30,
s: 100, s: 100,
l: 50 l: 50
}
}, { }, {
name: "Dark orange",
type: "secondary",
hsl: {
h: 30, h: 30,
s: 80, s: 80,
l: 37 l: 37
}
}, { }, {
name: "Extra dark orange",
type: "secondary",
hsl: {
h: 30, h: 30,
s: 60, s: 60,
l: 23 l: 23
}
}, { }, {
name: "Super extra dark orange",
type: "secondary",
hsl: {
h: 30, h: 30,
s: 40, s: 40,
l: 10 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", name: "Yellow",
type: "primary", type: "primary",
hsl: { colors: [{
h: 60,
s: 40,
l: 90
}, {
h: 60,
s: 60,
l: 77
}, {
h: 60,
s: 80,
l: 63
}, {
h: 60, h: 60,
s: 100, s: 100,
l: 50 l: 50
}
}, { }, {
name: "Dark yellow",
type: "primary",
hsl: {
h: 60, h: 60,
s: 80, s: 80,
l: 37 l: 37
}
}, { }, {
name: "Extra dark yellow",
type: "primary",
hsl: {
h: 60, h: 60,
s: 60, s: 60,
l: 23 l: 23
}
}, { }, {
name: "Super extra dark yellow",
type: "primary",
hsl: {
h: 60, h: 60,
s: 40, s: 40,
l: 10 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", name: "Lime",
type: "secondary", type: "secondary",
hsl: { colors: [{
h: 90,
s: 40,
l: 90
}, {
h: 90,
s: 60,
l: 77
}, {
h: 90,
s: 80,
l: 63
}, {
h: 90, h: 90,
s: 100, s: 100,
l: 50 l: 50
}
}, { }, {
name: "Dark lime",
type: "secondary",
hsl: {
h: 90, h: 90,
s: 80, s: 80,
l: 37 l: 37
}
}, { }, {
name: "Extra dark lime",
type: "secondary",
hsl: {
h: 90, h: 90,
s: 60, s: 60,
l: 23 l: 23
}
}, { }, {
name: "Super extra dark lime",
type: "secondary",
hsl: {
h: 90, h: 90,
s: 40, s: 40,
l: 10 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", name: "Green",
type: "primary", type: "primary",
hsl: { colors: [{
h: 120,
s: 40,
l: 90
}, {
h: 120,
s: 60,
l: 77
}, {
h: 120,
s: 80,
l: 63
}, {
h: 120, h: 120,
s: 100, s: 100,
l: 50 l: 50
}
}, { }, {
name: "Dark green",
type: "primary",
hsl: {
h: 120, h: 120,
s: 80, s: 80,
l: 37 l: 37
}
}, { }, {
name: "Extra dark green",
type: "primary",
hsl: {
h: 120, h: 120,
s: 60, s: 60,
l: 23 l: 23
}
}, { }, {
name: "Super extra dark green",
type: "primary",
hsl: {
h: 120, h: 120,
s: 40, s: 40,
l: 10 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", name: "Aqua",
type: "secondary", type: "secondary",
hsl: { colors: [{
h: 150,
s: 40,
l: 90
}, {
h: 150,
s: 60,
l: 77
}, {
h: 150,
s: 80,
l: 63
}, {
h: 150, h: 150,
s: 100, s: 100,
l: 50 l: 50
}
}, { }, {
name: "Dark aqua",
type: "secondary",
hsl: {
h: 150, h: 150,
s: 80, s: 80,
l: 37 l: 37
}
}, { }, {
name: "Extra dark aqua",
type: "secondary",
hsl: {
h: 150, h: 150,
s: 60, s: 60,
l: 23 l: 23
}
}, { }, {
name: "Super extra dark aqua",
type: "secondary",
hsl: {
h: 150, h: 150,
s: 40, s: 40,
l: 10 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", name: "Cyan",
type: "primary", type: "primary",
hsl: { colors: [{
h: 180,
s: 40,
l: 90
}, {
h: 180,
s: 60,
l: 77
}, {
h: 180,
s: 80,
l: 63
}, {
h: 180, h: 180,
s: 100, s: 100,
l: 50 l: 50
}
}, { }, {
name: "Dark cyan",
type: "primary",
hsl: {
h: 180, h: 180,
s: 80, s: 80,
l: 37 l: 37
}
}, { }, {
name: "Extra dark cyan",
type: "primary",
hsl: {
h: 180, h: 180,
s: 60, s: 60,
l: 23 l: 23
}
}, { }, {
name: "Super extra dark cyan",
type: "primary",
hsl: {
h: 180, h: 180,
s: 40, s: 40,
l: 10 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", name: "Teal",
type: "secondary", type: "secondary",
hsl: { colors: [{
h: 210,
s: 40,
l: 90
}, {
h: 210,
s: 60,
l: 77
}, {
h: 210,
s: 80,
l: 63
}, {
h: 210, h: 210,
s: 100, s: 100,
l: 50 l: 50
}
}, { }, {
name: "Dark teal",
type: "secondary",
hsl: {
h: 210, h: 210,
s: 80, s: 80,
l: 37 l: 37
}
}, { }, {
name: "Extra dark teal",
type: "secondary",
hsl: {
h: 210, h: 210,
s: 60, s: 60,
l: 23 l: 23
}
}, { }, {
name: "Super extra dark teal",
type: "secondary",
hsl: {
h: 210, h: 210,
s: 40, s: 40,
l: 10 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", name: "Blue",
type: "primary", type: "primary",
hsl: { colors: [{
h: 240,
s: 40,
l: 90
}, {
h: 240,
s: 60,
l: 77
}, {
h: 240,
s: 80,
l: 63
}, {
h: 240, h: 240,
s: 100, s: 100,
l: 50 l: 50
}
}, { }, {
name: "Dark blue",
type: "primary",
hsl: {
h: 240, h: 240,
s: 80, s: 80,
l: 37 l: 37
}
}, { }, {
name: "Extra dark blue",
type: "primary",
hsl: {
h: 240, h: 240,
s: 60, s: 60,
l: 23 l: 23
}
}, { }, {
name: "Super extra dark blue",
type: "primary",
hsl: {
h: 240, h: 240,
s: 40, s: 40,
l: 10 l: 10
} }]
}], }, {
[{ name: "Purple",
name: "Super extra light pruple",
type: "secondary", type: "secondary",
hsl: { colors: [{
h: 270, h: 270,
s: 40, s: 40,
l: 90 l: 90
}
}, { }, {
name: "Extra light pruple",
type: "secondary",
hsl: {
h: 270, h: 270,
s: 60, s: 60,
l: 77 l: 77
}
}, { }, {
name: "Light pruple",
type: "secondary",
hsl: {
h: 270, h: 270,
s: 80, s: 80,
l: 63 l: 63
}
}, { }, {
name: "Pruple",
type: "secondary",
hsl: {
h: 270, h: 270,
s: 100, s: 100,
l: 50 l: 50
}
}, { }, {
name: "Dark pruple",
type: "secondary",
hsl: {
h: 270, h: 270,
s: 80, s: 80,
l: 37 l: 37
}
}, { }, {
name: "Extra dark pruple",
type: "secondary",
hsl: {
h: 270, h: 270,
s: 60, s: 60,
l: 23 l: 23
}
}, { }, {
name: "Super extra dark pruple",
type: "secondary",
hsl: {
h: 270, h: 270,
s: 40, s: 40,
l: 10 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: 60,
l: 77
}
}, {
name: "Light magenta",
type: "primary",
hsl: {
h: 300,
s: 80,
l: 63
}
}, { }, {
name: "Magenta", name: "Magenta",
type: "primary", type: "primary",
hsl: { colors: [{
h: 300,
s: 40,
l: 90
}, {
h: 300,
s: 60,
l: 77
}, {
h: 300,
s: 80,
l: 63
}, {
h: 300, h: 300,
s: 100, s: 100,
l: 50 l: 50
}
}, { }, {
name: "Dark magenta",
type: "primary",
hsl: {
h: 300, h: 300,
s: 80, s: 80,
l: 37 l: 37
}
}, { }, {
name: "Extra dark magenta",
type: "primary",
hsl: {
h: 300, h: 300,
s: 60, s: 60,
l: 23 l: 23
}
}, { }, {
name: "Super extra dark magenta",
type: "primary",
hsl: {
h: 300, h: 300,
s: 40, s: 40,
l: 10 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", name: "Fuchsia",
type: "secondary", type: "secondary",
hsl: { colors: [{
h: 330,
s: 40,
l: 90
}, {
h: 330,
s: 60,
l: 77
}, {
h: 330,
s: 80,
l: 63
}, {
h: 330, h: 330,
s: 100, s: 100,
l: 50 l: 50
}
}, { }, {
name: "Dark fuchsia",
type: "secondary",
hsl: {
h: 330, h: 330,
s: 80, s: 80,
l: 37 l: 37
}
}, { }, {
name: "Extra dark fuchsia",
type: "secondary",
hsl: {
h: 330, h: 330,
s: 60, s: 60,
l: 23 l: 23
}
}, { }, {
name: "Super extra dark fuchsia",
type: "secondary",
hsl: {
h: 330, h: 330,
s: 40, s: 40,
l: 10 l: 10
}
}] }]
], }],
set: function(hsl) { set: function(hsl) {
var rgb = helper.convertColor.hsl.rgb(hsl); var rgb = helper.convertColor.hsl.rgb(hsl);
helper.setObject({ helper.setObject({
@ -2500,15 +2182,15 @@ var theme = (function() {
preset: function() { preset: function() {
var themeAccentPreset = helper.e(".theme-accent-preset"); var themeAccentPreset = helper.e(".theme-accent-preset");
var _makeAccentButton = function(preset) { var _makeAccentButton = function(name, type, hsl) {
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 themeAccentPresetItem = helper.node("button|class:theme-accent-preset-item theme-accent-preset-type-" + type + " button button-block button-ring,title:" + name + ",tabindex:-1");
var themeAccentPresetItemName = helper.node("span:" + preset.name + "|class:sr-only"); var themeAccentPresetItemName = helper.node("span:" + name + "|class:sr-only");
themeAccentPresetItem.appendChild(themeAccentPresetItemName); themeAccentPresetItem.appendChild(themeAccentPresetItemName);
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-h", preset.hsl.h); themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-h", hsl.h);
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-s", preset.hsl.s); themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-s", hsl.s);
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-l", preset.hsl.l); themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-l", hsl.l);
themeAccentPresetItem.addEventListener("click", function() { themeAccentPresetItem.addEventListener("click", function() {
mod.accent.preset.set(preset.hsl); mod.accent.preset.set(hsl);
data.save(); data.save();
render.accent.color(); render.accent.color();
control.render.update.control.header(); control.render.update.control.header();
@ -2517,9 +2199,17 @@ var theme = (function() {
return themeAccentPresetItem; return themeAccentPresetItem;
}; };
mod.accent.preset.colorscale.forEach(function(arrayItem, index) { mod.accent.preset.all.forEach(function(arrayItem, index) {
arrayItem.forEach(function(arrayItem, index) { var name = arrayItem.name;
themeAccentPreset.appendChild(_makeAccentButton(arrayItem)); var type = arrayItem.type;
arrayItem.colors.forEach(function(arrayItem, index) {
var fullName;
if (mod.accent.preset.nameModifier[arrayItem.l] != undefined) {
fullName = mod.accent.preset.nameModifier[arrayItem.l] + " " + name.toLowerCase();
} else {
fullName = name;
};
themeAccentPreset.appendChild(_makeAccentButton(fullName, type, arrayItem));
}); });
}); });

2
src/js/version.js
View File

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

2
src/manifest.json
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.30.0", "version": "5.31.0",
"manifest_version": 2, "manifest_version": 2,
"chrome_url_overrides": { "chrome_url_overrides": {
"newtab": "index.html" "newtab": "index.html"