-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
73 lines (69 loc) · 2.39 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=devicscale=1.0">
<title>Themes</title>
<link rel="stylesheet" href="./intergiro/index.css">
<style>
body>div {
display: flex;
flex-direction: column;
margin-bottom: 1em;
}
body>div>span {
display: flex;
justify-content: space-around;
padding: 0.25em 2em;
}
</style>
<script>
function RGBToHSL(rgb) {
// Make r, g, and b fractions of 1
const r = rgb[0] / 255;
const g = rgb[1] / 255;
const b = rgb[2] / 255;
// Find greatest and smallest channel values
let cmin = Math.min(r, g, b), cmax = Math.max(r, g, b), delta = cmax - cmin, h = 0, s = 0, l = 0;
// Calculate hue
h = Math.round(
(delta == 0
? 0
: cmax == r
? ((g - b) / delta) % 6
: cmax == g
? (b - r) / delta + 2
: h = (r - g) / delta + 4) * 60
)
if (h < 0)
h += 360;
// Calculate lightness
l = (cmax + cmin) / 2;
// Calculate saturation
s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
return `hsl(${h}, ${(s * 100).toFixed(1)}%, ${(l * 100).toFixed(1)}%)`;
}
window.onload = () => {
["default", "primary", "secondary", "tertiary", "medium", "success", "warning", "danger", "dark", "light"].forEach((a) => {
let div = document.createElement("div");
div.style.color = `rgb(var(--smoothly-${a}-contrast))`;
(["tint", "color", "shade"]).forEach(b => {
console.log(a, b)
let span = document.createElement("span")
const color = getComputedStyle(document.documentElement).getPropertyValue(`--smoothly-${a}-${b}`);
span.style.backgroundColor = `rgb(var(--smoothly-${a}-${b}))`
span.innerHTML = `<span>smoothly-${a}-${b}</span>`
span.innerHTML += `<span>${color}</span>`
span.innerHTML += `<span>#${color.split(",").map(c => Number(c).toString(16).padStart(2, "0").toUpperCase()).join("")}</span>`
span.innerHTML += `<span>${RGBToHSL(color.split(",").map(Number))}</span>`
div.appendChild(span)
})
document.body.appendChild(div)
})
}
</script>
</head>
<body style="font-family: var(--smoothly-font-family);">
</body>
</html>