blob: 08188b7a554cbc5b00b05a63b79746a5c022456f (
plain)
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
|
:root{
--dark-theme-check: 1;
--theme-color-check: 0;
--accent-color-check: 0;
--theme-hue: 0;
--accent-hue: 0;
/* Contrast hue - the color for hyperlinks and selection.
Default hue is 210, but we want it the +180 opposite hue of theme if there is a theme color.*/
--theme-contrast-hue: calc(calc(var(--theme-hue) + 180) * var(--theme-color-check));
--default-contrast-hue: calc(210 - calc(var(--theme-color-check) * 210));
--contrast-hue: calc(var(--theme-contrast-hue) + var(--default-contrast-hue));
--foreground-lightness: calc(0% + calc(var(--dark-theme-check) * 90%));
--background-lightness: calc(100% - calc(var(--dark-theme-check) * 90%));
--contrast-lightness: calc(50% + calc(var(--dark-theme-check) * 0%));
/* Accent hue - the color for all other elements beside <p> foreground and the main background.
We want to inherit the theme hue if accent color is disabled.*/
--theme-accent-hue: calc(var(--theme-hue) * calc(1 - var(--accent-color-check)));
--accent-check-hue: calc(var(--accent-hue) * var(--accent-color-check));
--applied-accent-hue: calc(var(--theme-accent-hue) + var(--accent-check-hue));
--accent-saturation: calc(
max(var(--accent-color-check), var(--theme-color-check)) *
calc(75% - calc(var(--dark-theme-check) * 20%))
);
--contrast-saturation: calc(100% - calc(var(--dark-theme-check) * 10%));
--foreground-theme-color: hsl(
var(--theme-hue),
calc(var(--theme-color-check) * 75%),
var(--foreground-lightness)
);
--background-theme-color: hsl(
var(--theme-hue),
calc(var(--theme-color-check) * 25%),
var(--background-lightness)
);
--foreground-accent-color: hsl(
var(--applied-accent-hue),
var(--accent-saturation),
var(--contrast-lightness)
);
--background-accent-color: hsl(
var(--applied-accent-hue),
calc(var(--accent-color-check) * 25%),
var(--background-lightness)
);
--contrast-color: hsl(
var(--contrast-hue),
var(--contrast-saturation),
var(--contrast-lightness)
);
}
|
