extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-20 09:37:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

[feature] add more theme accent presets

Browse Source
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
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.29.0", "version": "5.30.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.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.", "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": {

66
src/css/theme.css
View File

@ -337,11 +337,11 @@
background-color: rgb(var(--theme-color-20)); background-color: rgb(var(--theme-color-20));
} }
.theme-accent-preset-grid { .theme-accent-preset {
display: grid; display: grid;
grid-gap: var(--form-wrap-space); grid-gap: calc(var(--form-wrap-space) / 2);
grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, auto);
grid-template-rows: repeat(5, 1fr); grid-auto-flow: column;
justify-items: center; justify-items: center;
} }
@ -350,8 +350,20 @@
padding: 0; padding: 0;
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
min-width: 1.5em; min-width: initial;
min-height: 1.5em; 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, .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%)); 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) { @media (min-width: 700px) {
.theme-accent-preset-item { .theme-accent-preset-item {
width: 2em; width: 1.5em;
height: 2em; height: 1.5em;
min-width: 2em; }
min-height: 2em;
.theme-accent-preset-type-secondary {
display: none;
} }
} }
@media (min-width: 900px) { @media (min-width: 900px) {
.theme-accent-preset-item { .theme-accent-preset-item {
width: 2.5em; width: 1.25em;
height: 2.5em; height: 1.25em;
min-width: 2.5em; }
min-height: 2.5em;
.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;
} }
} }

879
src/js/theme.js
View File

@ -267,254 +267,745 @@ var theme = (function() {
}); });
}, },
preset: { preset: {
all: [ colorscale: [
[{ [{
name: "Extra light grey", name: "Super extra light grey",
type: "grey",
hsl: { hsl: {
h: 0, h: 0,
s: 0, s: 0,
l: 90 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", name: "Extra light red",
type: "primary",
hsl: {
h: 0,
s: 60,
l: 77
}
}, {
name: "Light red",
type: "primary",
hsl: { hsl: {
h: 0, h: 0,
s: 80, 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 l: 90
} }
}, { }, {
name: "Extra light yellow", name: "Extra light yellow",
type: "primary",
hsl: {
h: 60,
s: 60,
l: 77
}
}, {
name: "Light yellow",
type: "primary",
hsl: { hsl: {
h: 60, h: 60,
s: 80, 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 l: 90
} }
}, { }, {
name: "Extra light green", name: "Extra light green",
type: "primary",
hsl: {
h: 120,
s: 60,
l: 77
}
}, {
name: "Light green",
type: "primary",
hsl: { hsl: {
h: 120, h: 120,
s: 80, 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 l: 90
} }
}, { }, {
name: "Extra light cyan", name: "Extra light cyan",
type: "primary",
hsl: {
h: 180,
s: 60,
l: 77
}
}, {
name: "Light cyan",
type: "primary",
hsl: { hsl: {
h: 180, h: 180,
s: 80, 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 l: 90
} }
}, { }, {
name: "Extra light blue", name: "Extra light blue",
type: "primary",
hsl: {
h: 240,
s: 60,
l: 77
}
}, {
name: "Light blue",
type: "primary",
hsl: { hsl: {
h: 240, h: 240,
s: 80, 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 l: 90
} }
}, { }, {
name: "Extra light magenta", name: "Extra light magenta",
type: "primary",
hsl: { hsl: {
h: 300, h: 300,
s: 80, s: 60,
l: 90 l: 77
}
}],
[{
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
} }
}, { }, {
name: "Light magenta", name: "Light magenta",
type: "primary",
hsl: { hsl: {
h: 300, h: 300,
s: 80, s: 80,
l: 70 l: 63
}
}],
[{
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
} }
}, { }, {
name: "Magenta", name: "Magenta",
type: "primary",
hsl: { hsl: {
h: 300, h: 300,
s: 80, s: 100,
l: 50 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", name: "Dark magenta",
type: "primary",
hsl: { hsl: {
h: 300, h: 300,
s: 60, s: 80,
l: 30 l: 37
}
}],
[{
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
} }
}, { }, {
name: "Extra dark magenta", name: "Extra dark magenta",
type: "primary",
hsl: { hsl: {
h: 300, 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 l: 10
} }
}] }]
@ -2008,30 +2499,30 @@ var theme = (function() {
}, },
preset: function() { preset: function() {
var themeAccentPreset = helper.e(".theme-accent-preset"); 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) {
arrayItem.forEach(function(arrayItem, index) { 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 button button-block button-ring,tabindex:-1"); var themeAccentPresetItemName = helper.node("span:" + preset.name + "|class:sr-only");
var themeAccentPresetItemName = helper.node("span:" + arrayItem.name + "|class:sr-only");
themeAccentPresetItem.appendChild(themeAccentPresetItemName); themeAccentPresetItem.appendChild(themeAccentPresetItemName);
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-h", arrayItem.hsl.h); themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-h", preset.hsl.h);
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-s", arrayItem.hsl.s); themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-s", preset.hsl.s);
themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-l", arrayItem.hsl.l); themeAccentPresetItem.style.setProperty("--theme-accent-preset-item-color-l", preset.hsl.l);
themeAccentPresetItem.addEventListener("click", function() { themeAccentPresetItem.addEventListener("click", function() {
mod.accent.preset.set(arrayItem.hsl); mod.accent.preset.set(preset.hsl);
data.save(); data.save();
render.accent.color(); render.accent.color();
control.render.update.control.header(); control.render.update.control.header();
control.render.update.control.menu(); control.render.update.control.menu();
}); });
themeAccentPresetGrid.appendChild(themeAccentPresetItem); return themeAccentPresetItem;
};
mod.accent.preset.colorscale.forEach(function(arrayItem, index) {
arrayItem.forEach(function(arrayItem, index) {
themeAccentPreset.appendChild(_makeAccentButton(arrayItem));
}); });
}); });
formWrap.appendChild(themeAccentPresetGrid);
themeAccentPreset.appendChild(formWrap);
} }
}; };

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() { var version = (function() {
var current = "5.29.0"; var current = "5.30.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.29.0", "version": "5.30.0",
"manifest_version": 2, "manifest_version": 2,
"chrome_url_overrides": { "chrome_url_overrides": {
"newtab": "index.html" "newtab": "index.html"