forked from cory/tildefriends
ssb: Experimenting with generating the w3 css theme colors.
This commit is contained in:
parent
5af3533598
commit
42da5d8d32
@ -1,5 +1,5 @@
|
||||
{
|
||||
"type": "tildefriends-app",
|
||||
"emoji": "🦀",
|
||||
"previous": "&Us7cb8UfbwNoFVPQXDnGBdGDmxQwPdNwcNjaiai80YA=.sha256"
|
||||
"previous": "&ZVNlEr66wkhZpf06nJJgIEBxO0LK+nvSnJ6vgD9JPkg=.sha256"
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {css} from './lit-all.min.js';
|
||||
import {css, unsafeCSS} from './lit-all.min.js';
|
||||
|
||||
const tf = css`
|
||||
img {
|
||||
@ -285,30 +285,159 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
|
||||
.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}
|
||||
`;
|
||||
|
||||
// prettier-ignore
|
||||
const w3_2016_snorkel_blue = css`
|
||||
.w3-theme-l5 {color:#000 !important; background-color:#e9f5ff !important}
|
||||
.w3-theme-l4 {color:#000 !important; background-color:#b5dffd !important}
|
||||
.w3-theme-l3 {color:#000 !important; background-color:#6bc0fc !important}
|
||||
.w3-theme-l2 {color:#fff !important; background-color:#21a0fa !important}
|
||||
.w3-theme-l1 {color:#fff !important; background-color:#0479cc !important}
|
||||
.w3-theme-d1 {color:#fff !important; background-color:#024575 !important}
|
||||
.w3-theme-d2 {color:#fff !important; background-color:#023e68 !important}
|
||||
.w3-theme-d3 {color:#fff !important; background-color:#02365b !important}
|
||||
.w3-theme-d4 {color:#fff !important; background-color:#022e4e !important}
|
||||
.w3-theme-d5 {color:#fff !important; background-color:#012641 !important}
|
||||
function rgb_to_hsl(r, g, b) {
|
||||
let min,
|
||||
max,
|
||||
i,
|
||||
l,
|
||||
s,
|
||||
maxcolor,
|
||||
h,
|
||||
rgb = [];
|
||||
rgb[0] = r / 255;
|
||||
rgb[1] = g / 255;
|
||||
rgb[2] = b / 255;
|
||||
min = rgb[0];
|
||||
max = rgb[0];
|
||||
maxcolor = 0;
|
||||
for (i = 0; i < rgb.length - 1; i++) {
|
||||
if (rgb[i + 1] <= min) {
|
||||
min = rgb[i + 1];
|
||||
}
|
||||
if (rgb[i + 1] >= max) {
|
||||
max = rgb[i + 1];
|
||||
maxcolor = i + 1;
|
||||
}
|
||||
}
|
||||
if (maxcolor == 0) {
|
||||
h = (rgb[1] - rgb[2]) / (max - min);
|
||||
}
|
||||
if (maxcolor == 1) {
|
||||
h = 2 + (rgb[2] - rgb[0]) / (max - min);
|
||||
}
|
||||
if (maxcolor == 2) {
|
||||
h = 4 + (rgb[0] - rgb[1]) / (max - min);
|
||||
}
|
||||
if (isNaN(h)) {
|
||||
h = 0;
|
||||
}
|
||||
h = h * 60;
|
||||
if (h < 0) {
|
||||
h = h + 360;
|
||||
}
|
||||
l = (min + max) / 2;
|
||||
if (min == max) {
|
||||
s = 0;
|
||||
} else {
|
||||
if (l < 0.5) {
|
||||
s = (max - min) / (max + min);
|
||||
} else {
|
||||
s = (max - min) / (2 - max - min);
|
||||
}
|
||||
}
|
||||
s = s;
|
||||
return [h, s, l];
|
||||
}
|
||||
|
||||
.w3-theme-light {color:#000 !important; background-color:#e9f5ff !important}
|
||||
.w3-theme-dark {color:#fff !important; background-color:#012641 !important}
|
||||
.w3-theme-action {color:#fff !important; background-color:#012641 !important}
|
||||
function hex_to_rgb(hex) {
|
||||
if (hex.charAt(0) == '#') {
|
||||
hex = hex.substring(1);
|
||||
}
|
||||
return [
|
||||
parseInt(hex.substring(0, 2), 16),
|
||||
parseInt(hex.substring(2, 4), 16),
|
||||
parseInt(hex.substring(4, 6), 16),
|
||||
];
|
||||
}
|
||||
|
||||
.w3-theme {color:#fff !important; background-color:#034f84 !important}
|
||||
.w3-text-theme {color:#034f84 !important}
|
||||
.w3-border-theme {border-color:#034f84 !important}
|
||||
function hsl_to_rgb(hue, sat, light) {
|
||||
let t2;
|
||||
hue /= 60;
|
||||
if (light <= 0.5) {
|
||||
t2 = light * (sat + 1);
|
||||
} else {
|
||||
t2 = light + sat - light * sat;
|
||||
}
|
||||
let t1 = light * 2 - t2;
|
||||
return [
|
||||
hue_to_rgb(t1, t2, hue + 2) * 255,
|
||||
hue_to_rgb(t1, t2, hue) * 255,
|
||||
hue_to_rgb(t1, t2, hue - 2) * 255,
|
||||
];
|
||||
}
|
||||
function hue_to_rgb(t1, t2, hue) {
|
||||
if (hue < 0) {
|
||||
hue += 6;
|
||||
}
|
||||
if (hue >= 6) {
|
||||
hue -= 6;
|
||||
}
|
||||
if (hue < 1) {
|
||||
return (t2 - t1) * hue + t1;
|
||||
} else if (hue < 3) {
|
||||
return t2;
|
||||
} else if (hue < 4) {
|
||||
return (t2 - t1) * (4 - hue) + t1;
|
||||
} else {
|
||||
return t1;
|
||||
}
|
||||
}
|
||||
|
||||
.w3-hover-theme:hover {color:#fff !important; background-color:#034f84 !important}
|
||||
.w3-hover-text-theme:hover {color:#034f84 !important}
|
||||
.w3-hover-border-theme:hover {border-color:#034f84 !important}
|
||||
`;
|
||||
function rgb_to_hex(rgb) {
|
||||
const hex_pair = (x) => Math.floor(x).toString(16).padStart(2, '0');
|
||||
return `#${hex_pair(rgb[0])}${hex_pair(rgb[1])}${hex_pair(rgb[2])}`;
|
||||
}
|
||||
|
||||
export let styles = [tf, w3, w3_2016_snorkel_blue];
|
||||
function is_dark(hex, value) {
|
||||
let [r, g, b] = hex_to_rgb(hex);
|
||||
return (r * 299 + g * 587 + b * 114) / 1000 < value;
|
||||
}
|
||||
|
||||
function generated() {
|
||||
let k_color = '#034f84';
|
||||
//let k_color = rgb_to_hex([Math.random() * 256, Math.random() * 256, Math.random() * 256]);
|
||||
let [r, g, b] = hex_to_rgb(k_color);
|
||||
let [h, s, l] = rgb_to_hsl(r, g, b);
|
||||
|
||||
let theme1 = {
|
||||
l5: rgb_to_hex(hsl_to_rgb(h, s, l + ((1.0 - l) / 5) * 4.7)),
|
||||
l4: rgb_to_hex(hsl_to_rgb(h, s, l + ((1.0 - l) / 5) * 4)),
|
||||
l3: rgb_to_hex(hsl_to_rgb(h, s, l + ((1.0 - l) / 5) * 3)),
|
||||
l2: rgb_to_hex(hsl_to_rgb(h, s, l + ((1.0 - l) / 5) * 2)),
|
||||
l1: rgb_to_hex(hsl_to_rgb(h, s, l + ((1.0 - l) / 5) * 1)),
|
||||
d0: rgb_to_hex(hsl_to_rgb(h, s, l)),
|
||||
d1: rgb_to_hex(hsl_to_rgb(h, s, l - (l / 5) * 0.5)),
|
||||
d2: rgb_to_hex(hsl_to_rgb(h, s, l - (l / 5) * 1)),
|
||||
d3: rgb_to_hex(hsl_to_rgb(h, s, l - (l / 5) * 1.5)),
|
||||
d4: rgb_to_hex(hsl_to_rgb(h, s, l - (l / 5) * 2)),
|
||||
d5: rgb_to_hex(hsl_to_rgb(h, s, l - (l / 5) * 2.5)),
|
||||
};
|
||||
for (let [k, v] of Object.entries(theme1)) {
|
||||
theme1['t' + k] = is_dark(v, 165) ? '#fff' : '#000';
|
||||
}
|
||||
|
||||
let result = `
|
||||
.w3-theme-l5 {color: ${theme1.tl5} !important; background-color: ${theme1.l5} !important}
|
||||
.w3-theme-l4 {color: ${theme1.tl4} !important; background-color: ${theme1.l4} !important}
|
||||
.w3-theme-l3 {color: ${theme1.tl3} !important; background-color: ${theme1.l3} !important}
|
||||
.w3-theme-l2 {color: ${theme1.tl2} !important; background-color: ${theme1.l2} !important}
|
||||
.w3-theme-l1 {color: ${theme1.tl1} !important; background-color: ${theme1.l1} !important}
|
||||
.w3-theme-d1 {color: ${theme1.td1} !important; background-color: ${theme1.d1} !important}
|
||||
.w3-theme-d2 {color: ${theme1.td2} !important; background-color: ${theme1.d2} !important}
|
||||
.w3-theme-d3 {color: ${theme1.td3} !important; background-color: ${theme1.d3} !important}
|
||||
.w3-theme-d4 {color: ${theme1.td4} !important; background-color: ${theme1.d4} !important}
|
||||
.w3-theme-d5 {color: ${theme1.td5} !important; background-color: ${theme1.d5} !important}
|
||||
.w3-theme-light {color: ${theme1.tl5} !important; background-color: ${theme1.l5} !important}
|
||||
.w3-theme-dark {color: ${theme1.td5} !important; background-color: ${theme1.d5} !important}
|
||||
.w3-theme-action {color: ${theme1.td5} !important; background-color: ${theme1.d5} !important}
|
||||
.w3-theme {color: ${theme1.td0} !important; background-color: ${theme1.d0} !important}
|
||||
.w3-text-theme {color: ${theme1.d0} !important}
|
||||
.w3-border-theme {border-color: ${theme1.d0} !important}
|
||||
.w3-hover-theme:hover {color: ${theme1.td0} !important; background-color: ${theme1.d0} !important}
|
||||
.w3-hover-text-theme:hover {color: ${theme1.d0} !important}
|
||||
.w3-hover-border-theme:hover {border-color: ${theme1.d0} !important}
|
||||
`;
|
||||
return unsafeCSS(result);
|
||||
}
|
||||
|
||||
export let styles = [tf, w3, generated()];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user