A website inspired by Last.fm that will keep track of your listening statistics
lastfm
music
statistics
Remove the user of color-mix and replace it with the newer relative color syntax
+18
-44
+1
-13
web/components/interaction/Select.svelte
+1
-13
web/components/interaction/Select.svelte
···
35
35
width: 100%;
36
36
box-shadow: var(--shadow-xs);
37
37
border-radius: var(--radius-interactive);
38
-
background-color: color-mix(
39
-
in srgb,
40
-
var(--color-base-100),
41
-
var(--mixin-color-light-200)
42
-
);
38
+
background-color: hsl(from var(--color-base-100) h s 90%);
43
39
font-size: var(--text-base);
44
40
line-height: var(--text-base--line-height);
45
-
46
-
@media (prefers-color-scheme: dark) {
47
-
background-color: color-mix(
48
-
in srgb,
49
-
var(--color-base-100),
50
-
var(--mixin-color-dark-100)
51
-
);
52
-
}
53
41
54
42
@media (width >= 40rem) {
55
43
height: var(--spacing-10);
+10
-7
web/styles/colors.css
+10
-7
web/styles/colors.css
···
1
1
@layer theme {
2
2
:root {
3
-
--mixin-color-light-100: #fff 20%;
4
-
--mixin-color-light-200: #fff 50%;
5
-
--mixin-color-light-300: #fff 80%;
6
-
7
-
--mixin-color-dark-100: #000 20%;
8
-
--mixin-color-dark-200: #000 50%;
9
-
--mixin-color-dark-300: #000 80%;
3
+
--relative-l-100: 98%;
4
+
--relative-l-200: 96%;
5
+
--relative-l-300: 94%;
6
+
--relative-l-400: 92%;
7
+
--relative-l-500: 90%;
8
+
--relative-l-600: 88%;
9
+
--relative-l-700: 86%;
10
+
--relative-l-800: 84%;
11
+
--relative-l-900: 82%;
12
+
--relative-l-950: 80%;
10
13
11
14
--theme-color-base-100: var(--color-gray-50);
12
15
--theme-color-base-200: var(--color-gray-100);