serv/surwiki
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Iterate on the color palettes

Browse source
This commit is contained in:
Magnus Hoff 2018-07-16 08:30:29 +02:00
parent c201bb4bc4
commit 05b12501a3
4 changed files with 57 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
assets/style.css
View file

@ -154,7 +154,7 @@ pre {
} }
a { a {
color: var(--theme-link); color: #1E88E5;
text-decoration: none; text-decoration: none;
} }
@ -213,6 +213,10 @@ footer {
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
} }
footer a {
color: var(--theme-link);
}
ul.dense { ul.dense {
list-style: none; list-style: none;
padding: 0; padding: 0;
@ -370,6 +374,7 @@ input[type="search"] {
margin: 0; margin: 0;
border: none; border: none;
background: var(--theme-input); background: var(--theme-input);
color: var(--theme-text);
font: inherit; font: inherit;
font-size: 18px; font-size: 18px;

5
assets/test-themes.html
View file

@ -3,6 +3,7 @@
<head> <head>
<title>Test themes &ndash; Sausagewiki</title> <title>Test themes &ndash; Sausagewiki</title>
<link href="themes.css" rel="stylesheet"> <link href="themes.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<style> <style>
.themed { .themed {
padding: 10px; padding: 10px;
@ -19,7 +20,8 @@
</head> </head>
<body> <body>
<div class="proto"> <div class="proto">
<div class="themed">The <span class="link">quick</span> brown <span class="link">dog</span> jumps over the lazy log</div> <div class="themed">The <span class="link">quick</span> brown <span class="link">dog</span> jumps over the lazy log <span class="theme-name"></span></div>
<div class="themed"><input type=search placeholder=placeholder> <input type=search value="Bacon"></div>
</div> </div>
<script> <script>
const themes = ["red", "pink", "purple", "deep-purple", "indigo", "blue", "light-blue", "cyan", "teal", "green", "light-green", "lime", "yellow", "amber", "orange", "deep-orange", "brown", "gray", "blue-gray"]; const themes = ["red", "pink", "purple", "deep-purple", "indigo", "blue", "light-blue", "cyan", "teal", "green", "light-green", "lime", "yellow", "amber", "orange", "deep-orange", "brown", "gray", "blue-gray"];
@ -28,6 +30,7 @@
for (theme of themes) { for (theme of themes) {
const block = proto.cloneNode(true); const block = proto.cloneNode(true);
block.className = `theme-${theme}`; block.className = `theme-${theme}`;
block.querySelector(".theme-name").textContent = theme;
body.appendChild(block); body.appendChild(block);
} }
</script> </script>

51
assets/themes.css
View file

@ -2,131 +2,132 @@
--theme-main: #F44336; --theme-main: #F44336;
--theme-text: white; --theme-text: white;
--theme-input: #E57373; --theme-input: #E57373;
--theme-link: #01579b; --theme-link: #90CAF9;
} }
.theme-pink { .theme-pink {
--theme-main: #E91E63; --theme-main: #E91E63;
--theme-text: white; --theme-text: white;
--theme-input: #F06292; --theme-input: #F06292;
--theme-link: #01579b; --theme-link: #90CAF9;
} }
.theme-purple { .theme-purple {
--theme-main: #9C27B0; --theme-main: #9C27B0;
--theme-text: white; --theme-text: white;
--theme-input: #BA68C8; --theme-input: #BA68C8;
--theme-link: #01579b; --theme-link: #90CAF9;
} }
.theme-deep-purple { .theme-deep-purple {
--theme-main: #673AB7; --theme-main: #673AB7;
--theme-text: white; --theme-text: white;
--theme-input: #9575CD; --theme-input: #9575CD;
--theme-link: #01579b; --theme-link: #90CAF9;
} }
.theme-indigo { .theme-indigo {
--theme-main: #3F51B5; --theme-main: #3F51B5;
--theme-text: white; --theme-text: white;
--theme-input: #7986CB; --theme-input: #7986CB;
--theme-link: #01579b; --theme-link: #90CAF9;
} }
.theme-blue { .theme-blue {
--theme-main: #2196F3; --theme-main: #2196F3;
--theme-text: white; --theme-text: white;
--theme-input: #64B5F6; --theme-input: #64B5F6;
--theme-link: #01579b; --theme-link: #90CAF9;
} }
.theme-light-blue { .theme-light-blue {
--theme-main: #03A9F4; --theme-main: #03A9F4;
--theme-text: white; --theme-text: white;
--theme-input: #4FC3F7; --theme-input: #4FC3F7;
--theme-link: #01579b; --theme-link: #90CAF9;
} }
.theme-cyan { .theme-cyan {
--theme-main: #00BCD4; --theme-main: #00BCD4;
--theme-text: white; --theme-text: white;
--theme-input: #4DD0E1; --theme-input: #4DD0E1;
--theme-link: #01579b; --theme-link: #90CAF9;
} }
.theme-teal { .theme-teal {
--theme-main: #009688; --theme-main: #009688;
--theme-text: white; --theme-text: white;
--theme-input: #4DB6AC; --theme-input: #4DB6AC;
--theme-link: #01579b; --theme-link: #90CAF9;
} }
.theme-green { .theme-green {
--theme-main: #4CAF50; --theme-main: #4CAF50;
--theme-text: white; --theme-text: white;
--theme-input: #81C784; --theme-input: #81C784;
--theme-link: #01579b; --theme-link: #90CAF9;
} }
.theme-light-green { .theme-light-green {
--theme-main: #8BC34A; --theme-main: #8BC34A;
--theme-text: white; --theme-text: white;
--theme-input: #AED581; --theme-input: #AED581;
--theme-link: #01579b; --theme-link: #90CAF9;
} }
.theme-lime { .theme-lime {
--theme-main: #CDDC39; --theme-main: #AFB42B;
--theme-text: white; --theme-text: white;
--theme-input: #DCE775; --theme-input: #CDDC39;
--theme-link: #01579b; --theme-link: #90CAF9;
} }
.theme-yellow { .theme-yellow {
--theme-main: #FBC02D; --theme-main: #FBC02D;
--theme-text: white; --theme-text: black;
--theme-input: #FFEB3B; --theme-input: #FFEB3B;
--theme-link: #01579b; --theme-link: #1E88E5;
} }
.theme-amber { .theme-amber {
--theme-main: #FFC107; --theme-main: #FFC107;
--theme-text: white; --theme-text: black;
--theme-input: #FFD54F; --theme-input: #FFD54F;
--theme-link: #01579b; --theme-link: #1E88E5;
} }
.theme-orange { .theme-orange {
--theme-main: #FF9800; --theme-main: #FF9800;
--theme-text: white; --theme-text: white;
--theme-input: #FFB74D; --theme-input: #FFB74D;
--theme-link: #01579b; --theme-link: #90CAF9;
} }
.theme-deep-orange { .theme-deep-orange {
--theme-main: #FF5722; --theme-main: #FF5722;
--theme-text: white; --theme-text: white;
--theme-input: #FF8A65; --theme-input: #FF8A65;
--theme-link: #01579b; --theme-link: #90CAF9;
} }
.theme-brown { .theme-brown {
--theme-main: #795548; --theme-main: #795548;
--theme-text: white; --theme-text: white;
--theme-input: #A1887F; --theme-input: #A1887F;
--theme-link: #01579b; --theme-link: #90CAF9;
} }
.theme-gray { .theme-gray {
--theme-main: #616161; --theme-main: #9E9E9E;
--theme-text: white; --theme-text: white;
--theme-input: #9E9E9E; --theme-input: #E0E0E0;
--theme-link: #01579b; --theme-link: #90CAF9;
} }
.theme-blue-gray { .theme-blue-gray {
--theme-main: #607D8B; --theme-main: #607D8B;
--theme-text: white; --theme-text: white;
--theme-input: #90A4AE; --theme-input: #90A4AE;
--theme-link: #01579b; --theme-link: #90CAF9;
} }

26
themes/generate.py Normal file → Executable file
View file

@ -8,21 +8,37 @@ palettes = colors['palettes']
def hex_to_rgb(h): def hex_to_rgb(h):
return tuple(int(h[i:i+2], 16) / 255 for i in (0, 2 ,4)) return tuple(int(h[i:i+2], 16) / 255 for i in (0, 2 ,4))
def to_linear(x):
if x < 0.04045:
return x / 12.92
else:
return pow((x + 0.055) / 1.055, 2.4)
def rgb_to_linear(rgb):
return [to_linear(x) for x in rgb]
def luma(rgb):
r, g, b = rgb_to_linear(rgb)
return (0.2126*r + 0.7152*g + 0.0722*b)
def prep(x): def prep(x):
cols = [x['colors'][5], x['colors'][7]] cols = [x['colors'][5], x['colors'][7]]
rgb = [hex_to_rgb(c[1:]) for c in cols] rgb = [hex_to_rgb(c[1:]) for c in cols]
hls = [colorsys.rgb_to_hls(*c) for c in rgb] brightness = [luma(c) for c in rgb]
main_index = 0 if hls[0][1] < 0.6 else 1 main_index = 0 if brightness[0] < 0.6 else 1
dark_main = hls[main_index][1] < 0.6 dark_main = brightness[main_index] < 0.5
return { return {
"name": x['shade'].lower().replace(' ', '-'), "name": x['shade'].lower().replace(' ', '-'),
"main": cols[main_index], "main": cols[main_index],
"input": x['colors'][3 if main_index == 0 else 5], "input": x['colors'][3 if main_index == 0 else 5],
"text": "white" if dark_main else "black", "text": "white" if dark_main else "black",
"link": blues[2] if dark_main else blues[6],
} }
blues = [x for x in palettes if x['shade'] == "Blue"][0]["colors"]
themes = [prep(palette) for palette in palettes] themes = [prep(palette) for palette in palettes]
print( print(
@ -32,10 +48,10 @@ print(
--theme-main: {main};\n\ --theme-main: {main};\n\
--theme-text: {text};\n\ --theme-text: {text};\n\
--theme-input: {input};\n\ --theme-input: {input};\n\
--theme-link: #01579b;\n\ --theme-link: {link};\n\
}}\n".format(**x) }}\n".format(**x)
for x in themes for x in themes
) )
) )
print("[" + ', '.join('"'+x['name']+'"' for x in themes) + "]") # print("[" + ', '.join('"'+x['name']+'"' for x in themes) + "]")