1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
const { parse_hex, format_hex, lrgb_from_any, rgb_from_any, oklab_from_any } = require("./colors.js")
const white = "#ffffff"
const black = "#000000"
function lerp(a, b, n) {
return a + (b - a) * n
}
function blend(a, b, n) {
a = lrgb_from_any(parse_hex(a))
b = lrgb_from_any(parse_hex(b))
return format_hex({
mode: "lrgb",
r: lerp(a.r, b.r, n),
g: lerp(a.g, b.g, n),
b: lerp(a.b, b.b, n)
})
}
function multiply_luminance(hex, m) {
let oklab = oklab_from_any(parse_hex(hex))
oklab.l = Math.max(0, Math.min(1, oklab.l * m))
return format_hex(oklab)
}
function add_luminance(hex, m) {
let oklab = oklab_from_any(parse_hex(hex))
oklab.l = Math.max(0, Math.min(1, oklab.l + m))
return format_hex(oklab)
}
function make_3d_colors(base) {
return [
base,
multiply_luminance(base, 0.9),
multiply_luminance(base, 0.8),
multiply_luminance(base, 0.7),
multiply_luminance(base, 0.4)
]
}
function make_2d_colors(base) {
return [
base,
multiply_luminance(base, 1.2),
multiply_luminance(base, 0.8),
multiply_luminance(base, 0.4)
]
}
function make_2d_colors_add(base) {
return [
base,
add_luminance(base, 0.2),
add_luminance(base, -0.2),
add_luminance(base, -0.5),
]
}
function print(x) {
console.log(x)
}
function gencss(color, sel) {
let [ bg, hi, lo, sh ] = make_2d_colors(color)
print(`${sel} { background-color: ${color}; border-color: ${hi} ${lo} ${lo} ${hi}; box-shadow: 0 0 0 1px ${sh}, 1px 2px 4px #0008; }`)
}
gencss("#bbbbbb", ".marker")
gencss("#c4e2f6", ".demInfl.ctl")
gencss("#c1272d", ".comInfl.ctl")
gencss("#147fc0", "#marker_action_round.com")
gencss("#c1272d", "#marker_action_round.dem")
gencss("#fadb04", "#marker_vp, #marker_turn")
gencss("#f26649", "#marker_com_tst")
gencss("#c4e2f4", "#marker_dem_tst")
|
