-
Notifications
You must be signed in to change notification settings - Fork 0
/
dynamic-colors.scss
113 lines (97 loc) · 2.9 KB
/
dynamic-colors.scss
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
/* Dynamic colors
Inspired and a variant of Obsidian Minimal:
- https://github.com/kepano/obsidian-minimal/blob/master/src/scss/variables/dynamic-color.scss
- https://minimal.guide/plugins/style-settings
Most colors are driven from the following values, meaning that
the backgrounds, borders, and various shades are
automatically generated.
- Base color is used for the backgrounds, text and borders.
- Accent color is used for links and some interactive elements.
The colors use HSL (hue, saturation, lightness)
- Hue (0-360 degrees):0 is red, 120 is green, and 240 is blue
- Saturation (0-100%):0% is desaturated, 100% is full saturation
- Lightness (0-100%):0% is black, 100% is white
- bg1 primary
- bg secondary
- bg3 active
- ui1 primary
- ui2 highlighted
- ui3 active
- ax1 strong
- ax2 body
- ax3 faded
- ax4 blend/faint
- fg1 strong
- fg2 body
- fg3 faded
- fg4 blend/faint
- fg9 opposite contrast
`--m` is the light/dark Mode coefficient
- is used to flip the +/-ve direction of lightness modifiers
-> dark mode: 1 (emphasis gets lighter against dark bg)
-> light mode: -1 (emphasis gets darker against light bg)
- technically, could use decimal numbers to tweak lightness-contrast
`--a-l` is the accent lightness coefficient
- is used to increase difference between accent shades
- particularly for light mode with light bg, since accents also have high lightness
*/
@mixin config() {
--bg1: hsl(var(--base-h), var(--base-s), var(--base-l));
// don't invert for bg2 — bg2 is always darker than bg1
--bg2: hsl(var(--base-h), var(--base-s), calc(var(--base-l) - 4%));
--bg3: hsla(
var(--base-h),
var(--base-s),
calc(var(--base-l) + 40% * var(--m)),
0.12
);
--ui1: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 6% * var(--m)));
--ui2: hsl(
var(--base-h),
var(--base-s),
calc(var(--base-l) + 12% * var(--m))
);
--ui3: hsl(
var(--base-h),
var(--base-s),
calc(var(--base-l) + 20% * var(--m))
);
--fg1: hsl(var(--base-h), calc(var(--base-s) - 10%), calc(100% * var(--m)));
--fg2: hsl(
var(--base-h),
calc(var(--base-s) - 10%),
calc(var(--base-l) + 70% * var(--m))
);
--fg3: hsl(
var(--base-h),
calc(var(--base-s) - 10%),
calc(var(--base-l) + 40% * var(--m))
);
--fg4: hsl(
var(--base-h),
calc(var(--base-s) - 5%),
calc(var(--base-l) + 20% * var(--m))
);
--fg9: hsl(
var(--base-h),
calc(var(--base-s)),
calc(var(--base-l) - 15% * var(--m))
);
--ax1: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
--ax2: hsl(
var(--accent-h),
calc(var(--accent-s) - 35%),
calc(var(--accent-l) - 13% * var(--m) * var(--a-l))
);
--ax3: hsl(
var(--accent-h),
calc(var(--accent-s) - 50%),
calc(var(--accent-l) - 20% * var(--m) * var(--a-l))
);
--ax4: hsla(
var(--accent-h),
calc(var(--accent-s) - 50%),
calc(var(--accent-l) - 30% * var(--m) * var(--a-l)),
0.5
);
}