pixies

1$dark-background: #0f1419
2$dark-light-gray: #2a3441
3$dark-dark-gray: #1a2029
4$dark-darker-gray: #151b23
5$dark-white: #e7edf4
6$dark-subtext: #8b99ab
7
8$light-background: #f8fafc
9$light-light-gray: #e2e8f0
10$light-dark-gray: #ffffff
11$light-darker-gray: #f1f5f9
12$light-white: #1e293b
13$light-subtext: #64748b
14
15$blue: #3b82f6
16$orange: #f59e0b
17$green: #10b981
18$red: #ef4444
19
20$cyan: #06b6d4
21$purple: #8b5cf6
22$pink: #ec4899
23$amber: #f59e0b
24
25:root
26  --background: #{$dark-background}
27  --light-gray: #{$dark-light-gray}
28  --dark-gray: #{$dark-dark-gray}
29  --darker-gray: #{$dark-darker-gray}
30  --white: #{$dark-white}
31  --subtext: #{$dark-subtext}
32  --blue: #{$blue}
33
34  --accent-primary: #{$green}
35  --accent-secondary: #{$cyan}
36  --accent-tertiary: #{$purple}
37  --accent-warning: #{$orange}
38  --accent-danger: #{$red}
39
40  --glass-bg: rgba(26, 32, 41, 0.6)
41
42  --chart-download: #{$cyan}
43  --chart-upload: #{$purple}
44  --chart-ping: #{$amber}
45  --chart-average: #{$pink}
46  --chart-grid: rgba(42, 52, 65, 0.6)
47  --chart-tooltip-bg: #{$dark-darker-gray}
48  --chart-tooltip-border: #{$dark-light-gray}
49
50[data-theme="light"]
51  --background: #{$light-background}
52  --light-gray: #{$light-light-gray}
53  --dark-gray: #{$light-dark-gray}
54  --darker-gray: #{$light-darker-gray}
55  --white: #{$light-white}
56  --subtext: #{$light-subtext}
57
58  --glass-bg: rgba(255, 255, 255, 0.85)
59
60  --chart-grid: rgba(226, 232, 240, 0.8)
61  --chart-tooltip-bg: #{$light-dark-gray}
62  --chart-tooltip-border: #{$light-light-gray}
63
64$background: var(--background)
65$light-gray: var(--light-gray)
66$dark-gray: var(--dark-gray)
67$darker-gray: var(--darker-gray)
68$white: var(--white)
69$subtext: var(--subtext)
70
71$accent-primary: var(--accent-primary)
72$accent-secondary: var(--accent-secondary)
73$accent-tertiary: var(--accent-tertiary)
74$accent-warning: var(--accent-warning)
75$accent-danger: var(--accent-danger)