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

5
assets/test-themes.html
View file

@ -3,6 +3,7 @@
<head>
<title>Test themes &ndash; Sausagewiki</title>
<link href="themes.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<style>
.themed {
padding: 10px;
@ -19,7 +20,8 @@
</head>
<body>
<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>
<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"];
@ -28,6 +30,7 @@
for (theme of themes) {
const block = proto.cloneNode(true);
block.className = `theme-${theme}`;
block.querySelector(".theme-name").textContent = theme;
body.appendChild(block);
}
</script>

51
assets/themes.css
View file

@ -2,131 +2,132 @@
--theme-main: #F44336;
--theme-text: white;
--theme-input: #E57373;
--theme-link: #01579b;
--theme-link: #90CAF9;
}
.theme-pink {
--theme-main: #E91E63;
--theme-text: white;
--theme-input: #F06292;
--theme-link: #01579b;
--theme-link: #90CAF9;
}
.theme-purple {
--theme-main: #9C27B0;
--theme-text: white;
--theme-input: #BA68C8;
--theme-link: #01579b;
--theme-link: #90CAF9;
}
.theme-deep-purple {
--theme-main: #673AB7;
--theme-text: white;
--theme-input: #9575CD;
--theme-link: #01579b;
--theme-link: #90CAF9;
}
.theme-indigo {
--theme-main: #3F51B5;
--theme-text: white;
--theme-input: #7986CB;
--theme-link: #01579b;
--theme-link: #90CAF9;
}
.theme-blue {
--theme-main: #2196F3;
--theme-text: white;
--theme-input: #64B5F6;
--theme-link: #01579b;
--theme-link: #90CAF9;
}
.theme-light-blue {
--theme-main: #03A9F4;
--theme-text: white;
--theme-input: #4FC3F7;
--theme-link: #01579b;
--theme-link: #90CAF9;
}
.theme-cyan {
--theme-main: #00BCD4;
--theme-text: white;
--theme-input: #4DD0E1;
--theme-link: #01579b;
--theme-link: #90CAF9;
}
.theme-teal {
--theme-main: #009688;
--theme-text: white;
--theme-input: #4DB6AC;
--theme-link: #01579b;
--theme-link: #90CAF9;
}
.theme-green {
--theme-main: #4CAF50;
--theme-text: white;
--theme-input: #81C784;
--theme-link: #01579b;
--theme-link: #90CAF9;
}
.theme-light-green {
--theme-main: #8BC34A;
--theme-text: white;
--theme-input: #AED581;
--theme-link: #01579b;
--theme-link: #90CAF9;
}
.theme-lime {
--theme-main: #CDDC39;
--theme-main: #AFB42B;
--theme-text: white;
--theme-input: #DCE775;
--theme-link: #01579b;
--theme-input: #CDDC39;
--theme-link: #90CAF9;
}
.theme-yellow {
--theme-main: #FBC02D;
--theme-text: white;
--theme-text: black;
--theme-input: #FFEB3B;
--theme-link: #01579b;
--theme-link: #1E88E5;
}
.theme-amber {
--theme-main: #FFC107;
--theme-text: white;
--theme-text: black;
--theme-input: #FFD54F;
--theme-link: #01579b;
--theme-link: #1E88E5;
}
.theme-orange {
--theme-main: #FF9800;
--theme-text: white;
--theme-input: #FFB74D;
--theme-link: #01579b;
--theme-link: #90CAF9;
}
.theme-deep-orange {
--theme-main: #FF5722;
--theme-text: white;
--theme-input: #FF8A65;
--theme-link: #01579b;
--theme-link: #90CAF9;
}
.theme-brown {
--theme-main: #795548;
--theme-text: white;
--theme-input: #A1887F;
--theme-link: #01579b;
--theme-link: #90CAF9;
}
.theme-gray {
--theme-main: #616161;
--theme-main: #9E9E9E;
--theme-text: white;
--theme-input: #9E9E9E;
--theme-link: #01579b;
--theme-input: #E0E0E0;
--theme-link: #90CAF9;
}
.theme-blue-gray {
--theme-main: #607D8B;
--theme-text: white;
--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):
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):
cols = [x['colors'][5], x['colors'][7]]
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
dark_main = hls[main_index][1] < 0.6
main_index = 0 if brightness[0] < 0.6 else 1
dark_main = brightness[main_index] < 0.5
return {
"name": x['shade'].lower().replace(' ', '-'),
"main": cols[main_index],
"input": x['colors'][3 if main_index == 0 else 5],
"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]
print(
@ -32,10 +48,10 @@ print(
--theme-main: {main};\n\
--theme-text: {text};\n\
--theme-input: {input};\n\
--theme-link: #01579b;\n\
--theme-link: {link};\n\
}}\n".format(**x)
for x in themes
)
)
print("[" + ', '.join('"'+x['name']+'"' for x in themes) + "]")
# print("[" + ', '.join('"'+x['name']+'"' for x in themes) + "]")