sass/_tokens.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

:root {
  color-scheme: light;
  --color-bg: #f6f5f1;
  --color-surface: #fbfaf7;
  --color-text: #202124;
  --color-muted: #666b70;
  --color-border: #d6d8da;
  --color-link: #315f82;
  --color-link-hover: #244a67;
  --color-focus: #1e668f;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --content-max: 72ch;
  --site-max: 72rem;
  --rule: 1px solid var(--color-border);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #17191b;
  --color-surface: #1d2022;
  --color-text: #e9e9e6;
  --color-muted: #a0a3a6;
  --color-border: #363a3e;
  --color-link: #86b6d8;
  --color-link-hover: #add3ed;
  --color-focus: #86b6d8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #17191b;
    --color-surface: #1d2022;
    --color-text: #e9e9e6;
    --color-muted: #a0a3a6;
    --color-border: #363a3e;
    --color-link: #86b6d8;
    --color-link-hover: #add3ed;
    --color-focus: #86b6d8;
  }
}