extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-26 18:13:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

[design] add theme presets previews

Browse Source
This commit is contained in:
zombieFox 2019-12-24 11:56:52 +00:00
parent e439e13651
commit 944b3da3aa
7 changed files with 411 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
gulpfile.js
View File

@ -64,6 +64,7 @@ const cssFiles = [
path.src + '/css/background.css',
path.src + '/css/group.css',
path.src + '/css/link.css',
path.src + '/css/theme.css',
path.src + '/css/auto-suggest.css',
path.src + '/css/fontawesome.css'
]

221
src/css/theme.css Normal file
View File

@ -0,0 +1,221 @@
.theme-preset-button {
padding: 0;
flex-direction: column;
justify-content: center;
overflow: hidden;
max-width: 6em;
}
.theme-preset-button .button-text {
margin-top: 0.75em;
margin-bottom: 1em;
margin-left: 0;
font-size: 0.75em;
}
.theme-preset-button:after {
content: none;
}
.theme-preset-preview {
width: 6em;
height: 6em;
position: relative;
}
.theme-preset-background-01,
.theme-preset-background-02,
.theme-preset-background-03,
.theme-preset-background-04,
.theme-preset-accent {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
}
.theme-preset-background-01 {
z-index: 1;
}
.theme-preset-background-02 {
z-index: 2;
clip-path: polygon(0 40%, 60% 100%, 100% 100%, 100% 0, 0 0);
}
.theme-preset-background-03 {
z-index: 3;
clip-path: polygon(0 0, 100% 100%, 100% 0);
}
.theme-preset-background-04 {
z-index: 4;
clip-path: polygon(40% 0, 100% 60%, 100% 0);
}
.theme-preset-accent {
z-index: 5;
clip-path: polygon(100% 50%, 100% 100%, 50% 100%);
}
.theme-preset-background-nighttab-01 {
background-color: rgb(var(--theme-preset-background-nighttab-01))
}
.theme-preset-background-nighttab-02 {
background-color: rgb(var(--theme-preset-background-nighttab-02))
}
.theme-preset-background-nighttab-03 {
background-color: rgb(var(--theme-preset-background-nighttab-03))
}
.theme-preset-background-nighttab-04 {
background-color: rgb(var(--theme-preset-background-nighttab-04))
}
.theme-preset-accent-nighttab {
background-color: rgb(var(--theme-preset-accent-nighttab))
}
.theme-preset-background-midnightblue-01 {
background-color: rgb(var(--theme-preset-background-midnightblue-01))
}
.theme-preset-background-midnightblue-02 {
background-color: rgb(var(--theme-preset-background-midnightblue-02))
}
.theme-preset-background-midnightblue-03 {
background-color: rgb(var(--theme-preset-background-midnightblue-03))
}
.theme-preset-background-midnightblue-04 {
background-color: rgb(var(--theme-preset-background-midnightblue-04))
}
.theme-preset-accent-midnightblue {
background-color: rgb(var(--theme-preset-accent-midnightblue))
}
.theme-preset-background-bluegum-01 {
background-color: rgb(var(--theme-preset-background-bluegum-01))
}
.theme-preset-background-bluegum-02 {
background-color: rgb(var(--theme-preset-background-bluegum-02))
}
.theme-preset-background-bluegum-03 {
background-color: rgb(var(--theme-preset-background-bluegum-03))
}
.theme-preset-background-bluegum-04 {
background-color: rgb(var(--theme-preset-background-bluegum-04))
}
.theme-preset-accent-bluegum {
background-color: rgb(var(--theme-preset-accent-bluegum))
}
.theme-preset-background-sharpmint-01 {
background-color: rgb(var(--theme-preset-background-sharpmint-01))
}
.theme-preset-background-sharpmint-02 {
background-color: rgb(var(--theme-preset-background-sharpmint-02))
}
.theme-preset-background-sharpmint-03 {
background-color: rgb(var(--theme-preset-background-sharpmint-03))
}
.theme-preset-background-sharpmint-04 {
background-color: rgb(var(--theme-preset-background-sharpmint-04))
}
.theme-preset-accent-sharpmint {
background-color: rgb(var(--theme-preset-accent-sharpmint))
}
.theme-preset-background-snowblue-01 {
background-color: rgb(var(--theme-preset-background-snowblue-01))
}
.theme-preset-background-snowblue-02 {
background-color: rgb(var(--theme-preset-background-snowblue-02))
}
.theme-preset-background-snowblue-03 {
background-color: rgb(var(--theme-preset-background-snowblue-03))
}
.theme-preset-background-snowblue-04 {
background-color: rgb(var(--theme-preset-background-snowblue-04))
}
.theme-preset-accent-snowblue {
background-color: rgb(var(--theme-preset-accent-snowblue))
}
.theme-preset-background-coralgreen-01 {
background-color: rgb(var(--theme-preset-background-coralgreen-01))
}
.theme-preset-background-coralgreen-02 {
background-color: rgb(var(--theme-preset-background-coralgreen-02))
}
.theme-preset-background-coralgreen-03 {
background-color: rgb(var(--theme-preset-background-coralgreen-03))
}
.theme-preset-background-coralgreen-04 {
background-color: rgb(var(--theme-preset-background-coralgreen-04))
}
.theme-preset-accent-coralgreen {
background-color: rgb(var(--theme-preset-accent-coralgreen))
}
.theme-preset-background-purplegem-01 {
background-color: rgb(var(--theme-preset-background-purplegem-01))
}
.theme-preset-background-purplegem-02 {
background-color: rgb(var(--theme-preset-background-purplegem-02))
}
.theme-preset-background-purplegem-03 {
background-color: rgb(var(--theme-preset-background-purplegem-03))
}
.theme-preset-background-purplegem-04 {
background-color: rgb(var(--theme-preset-background-purplegem-04))
}
.theme-preset-accent-purplegem {
background-color: rgb(var(--theme-preset-accent-purplegem))
}
.theme-preset-background-hotpepper-01 {
background-color: rgb(var(--theme-preset-background-hotpepper-01))
}
.theme-preset-background-hotpepper-02 {
background-color: rgb(var(--theme-preset-background-hotpepper-02))
}
.theme-preset-background-hotpepper-03 {
background-color: rgb(var(--theme-preset-background-hotpepper-03))
}
.theme-preset-background-hotpepper-04 {
background-color: rgb(var(--theme-preset-background-hotpepper-04))
}
.theme-preset-accent-hotpepper {
background-color: rgb(var(--theme-preset-accent-hotpepper))
}

40
src/css/variables.css
View File

@ -26,6 +26,46 @@
--theme-shade-pos-08: 25, 25, 25;
--theme-shade-pos-09: 25, 25, 25;
--theme-shade-pos-10: 25, 25, 25;
--theme-preset-background-nighttab-01: 25, 25, 25;
--theme-preset-background-nighttab-02: 25, 25, 25;
--theme-preset-background-nighttab-03: 25, 25, 25;
--theme-preset-background-nighttab-04: 25, 25, 25;
--theme-preset-accent-nighttab: 25, 25, 25;
--theme-preset-background-midnightblue-01: 25, 25, 25;
--theme-preset-background-midnightblue-02: 25, 25, 25;
--theme-preset-background-midnightblue-03: 25, 25, 25;
--theme-preset-background-midnightblue-04: 25, 25, 25;
--theme-preset-accent-midnightblue: 25, 25, 25;
--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-background-sharpmint-01: 25, 25, 25;
--theme-preset-background-sharpmint-02: 25, 25, 25;
--theme-preset-background-sharpmint-03: 25, 25, 25;
--theme-preset-background-sharpmint-04: 25, 25, 25;
--theme-preset-accent-sharpmint: 25, 25, 25;
--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-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-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-background-hotpepper-01: 25, 25, 25;
--theme-preset-background-hotpepper-02: 25, 25, 25;
--theme-preset-background-hotpepper-03: 25, 25, 25;
--theme-preset-background-hotpepper-04: 25, 25, 25;
--theme-preset-accent-hotpepper: 25, 25, 25;
/* header */
--header-area-width: 100%;
--header-shade-color: var(--theme-color-01);

89
src/index.html
View File

@ -34,6 +34,7 @@
<link rel="stylesheet" href="css/background.css">
<link rel="stylesheet" href="css/group.css">
<link rel="stylesheet" href="css/link.css">
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/auto-suggest.css">
<link rel="stylesheet" href="css/fontawesome.css">
<!-- end-css-block -->
@ -1309,28 +1310,100 @@
</div>
<div class="menu-item-form">
<div class="button-wrap form-inline">
<button class="control-theme-preset-nighttab button mb-0" tabindex="-1">nightTab</button>
<button class="control-theme-preset-nighttab theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-nighttab-01"></span>
<span class="theme-preset-background-02 theme-preset-background-nighttab-02"></span>
<span class="theme-preset-background-03 theme-preset-background-nighttab-03"></span>
<span class="theme-preset-background-04 theme-preset-background-nighttab-04"></span>
<span class="theme-preset-accent theme-preset-accent-nighttab"></span>
</div>
<span class="button-text">nightTab</span>
</button>
</div>
<div class="button-wrap form-inline">
<button class="control-theme-preset-nightingaleblue button mb-0" tabindex="-1">Nightingale Blue</button>
<button class="control-theme-preset-midnightblue theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-midnightblue-01"></span>
<span class="theme-preset-background-02 theme-preset-background-midnightblue-02"></span>
<span class="theme-preset-background-03 theme-preset-background-midnightblue-03"></span>
<span class="theme-preset-background-04 theme-preset-background-midnightblue-04"></span>
<span class="theme-preset-accent theme-preset-accent-midnightblue"></span>
</div>
<span class="button-text">Midnight Blue</span>
</button>
</div>
<div class="button-wrap form-inline">
<button class="control-theme-preset-bluegum button mb-0" tabindex="-1">Blue Gum</button>
<button class="control-theme-preset-bluegum theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-bluegum-01"></span>
<span class="theme-preset-background-02 theme-preset-background-bluegum-02"></span>
<span class="theme-preset-background-03 theme-preset-background-bluegum-03"></span>
<span class="theme-preset-background-04 theme-preset-background-bluegum-04"></span>
<span class="theme-preset-accent theme-preset-accent-bluegum"></span>
</div>
<span class="button-text">Blue Gum</span>
</button>
</div>
<div class="button-wrap form-inline">
<button class="control-theme-preset-sharpmint button mb-0" tabindex="-1">Sharp Mint</button>
<button class="control-theme-preset-sharpmint theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-sharpmint-01"></span>
<span class="theme-preset-background-02 theme-preset-background-sharpmint-02"></span>
<span class="theme-preset-background-03 theme-preset-background-sharpmint-03"></span>
<span class="theme-preset-background-04 theme-preset-background-sharpmint-04"></span>
<span class="theme-preset-accent theme-preset-accent-sharpmint"></span>
</div>
<span class="button-text">Sharp Mint</span>
</button>
</div>
<div class="button-wrap form-inline">
<button class="control-theme-preset-snowblue button mb-0" tabindex="-1">Snow Blue</button>
<button class="control-theme-preset-snowblue theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-snowblue-01"></span>
<span class="theme-preset-background-02 theme-preset-background-snowblue-02"></span>
<span class="theme-preset-background-03 theme-preset-background-snowblue-03"></span>
<span class="theme-preset-background-04 theme-preset-background-snowblue-04"></span>
<span class="theme-preset-accent theme-preset-accent-snowblue"></span>
</div>
<span class="button-text">Snow Blue</span>
</button>
</div>
<div class="button-wrap form-inline">
<button class="control-theme-preset-coralgreen button mb-0" tabindex="-1">Coral Green</button>
<button class="control-theme-preset-coralgreen theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-coralgreen-01"></span>
<span class="theme-preset-background-02 theme-preset-background-coralgreen-02"></span>
<span class="theme-preset-background-03 theme-preset-background-coralgreen-03"></span>
<span class="theme-preset-background-04 theme-preset-background-coralgreen-04"></span>
<span class="theme-preset-accent theme-preset-accent-coralgreen"></span>
</div>
<span class="button-text">Coral Green</span>
</button>
</div>
<div class="button-wrap form-inline">
<button class="control-theme-preset-purplegem button mb-0" tabindex="-1">Purple Gem</button>
<button class="control-theme-preset-purplegem theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-purplegem-01"></span>
<span class="theme-preset-background-02 theme-preset-background-purplegem-02"></span>
<span class="theme-preset-background-03 theme-preset-background-purplegem-03"></span>
<span class="theme-preset-background-04 theme-preset-background-purplegem-04"></span>
<span class="theme-preset-accent theme-preset-accent-purplegem"></span>
</div>
<span class="button-text">Purple Gem</span>
</button>
</div>
<div class="button-wrap form-inline">
<button class="control-theme-preset-hotpepper button mb-0" tabindex="-1">Hot Pepper</button>
<button class="control-theme-preset-hotpepper theme-preset-button button mb-0" tabindex="-1">
<div class="theme-preset-preview">
<span class="theme-preset-background-01 theme-preset-background-hotpepper-01"></span>
<span class="theme-preset-background-02 theme-preset-background-hotpepper-02"></span>
<span class="theme-preset-background-03 theme-preset-background-hotpepper-03"></span>
<span class="theme-preset-background-04 theme-preset-background-hotpepper-04"></span>
<span class="theme-preset-accent theme-preset-accent-hotpepper"></span>
</div>
<span class="button-text">Hot Pepper</span>
</button>
</div>
</div>
</div>

4
src/js/control.js
View File

@ -2542,10 +2542,10 @@ var control = (function() {
render.update();
}
}, {
element: helper.e(".control-theme-preset-nightingaleblue"),
element: helper.e(".control-theme-preset-midnightblue"),
type: "button",
func: function() {
theme.preset("nightingaleblue");
theme.preset("midnightblue");
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();

42
src/js/state.js
View File

@ -389,7 +389,7 @@ var state = (function() {
radius: 0.25,
style: "dark"
},
nightingaleblue: {
midnightblue: {
color: {
hsl: {
h: 220,
@ -445,9 +445,9 @@ var state = (function() {
}
},
accent: {
r: 255,
g: 10,
b: 178
r: 94,
g: 255,
b: 226
},
radius: 0.8,
style: "dark"
@ -456,18 +456,18 @@ var state = (function() {
color: {
hsl: {
h: 197,
s: 14,
l: 61
s: 25,
l: 46
},
rgb: {
r: 141,
g: 161,
b: 169
r: 87,
g: 130,
b: 146
}
},
accent: {
r: 105,
g: 183,
r: 59,
g: 207,
b: 214
},
radius: 0,
@ -497,23 +497,23 @@ var state = (function() {
purplegem: {
color: {
hsl: {
h: 300,
s: 30,
l: 51
h: 301,
s: 28,
l: 56
},
rgb: {
r: 170,
g: 95,
b: 169
r: 175,
g: 112,
b: 173
}
},
accent: {
r: 26,
g: 167,
b: 255
r: 110,
g: 109,
b: 208
},
radius: 0.40,
style: "dark"
style: "light"
},
hotpepper: {
color: {

45
src/js/theme.js
View File

@ -240,6 +240,50 @@ var theme = (function() {
}
};
render.preset = function() {
var html = helper.e("html");
for (var key in state.get.preset()) {
var preset = state.get.preset()[key];
var shadeSteps = 4;
var lightShift = 12;
var hsl = helper.convertColor.rgb.hsl(preset.color.rgb);
var renderPreview = function(name, index, rgb) {
for (var key in rgb) {
if (rgb[key] < 0) {
rgb[key] = 0;
} else if (rgb[key] > 255) {
rgb[key] = 255;
};
rgb[key] = parseInt(rgb[key], 10);
};
if (index < 10) {
index = "0" + index;
} else {
index = index;
};
html.style.setProperty(name + index, rgb.r + ", " + rgb.g + ", " + rgb.b);
};
for (var i = 1; i <= shadeSteps; i++) {
var rgb;
if (preset.style == "dark") {
rgb = helper.convertColor.hsl.rgb({
h: hsl.h,
s: hsl.s,
l: hsl.l - (lightShift * i)
});
} else if (preset.style == "light") {
rgb = helper.convertColor.hsl.rgb({
h: hsl.h,
s: hsl.s,
l: hsl.l + (lightShift * i)
});
};
renderPreview("--theme-preset-background-" + key + "-", i, rgb);
};
html.style.setProperty("--theme-preset-accent-" + key, preset.accent.r + ", " + preset.accent.g + ", " + preset.accent.b);
};
};
var accent = {
random: function() {
mod.accent.random();
@ -283,6 +327,7 @@ var theme = (function() {
render.color.shade();
render.accent.color();
render.radius();
render.preset();
};
// exposed methods