Design Tokens

1/* moco/ui — design tokens.
2   One-time setup: import this once (e.g. in your root layout / global css).
3   Every moco component styles itself exclusively from these variables —
4   override any of them to retheme the whole library.
5 
6   Light: warm paper, near-black ink, lime accent (fill-only on paper — the
7   dark lime --moco-accent-dk does text/stroke duty at 4.9:1).
8   Dark: warm near-black, paper ink, lime works as both fill and text. */
9 
10:root {
11  --moco-bg: #fcfbf9;
12  --moco-panel: #f4f2ee;
13  --moco-ink: rgba(0, 0, 0, 0.88);
14  --moco-body: rgba(0, 0, 0, 0.76);
15  --moco-muted: rgba(0, 0, 0, 0.6);
16  --moco-faint: rgba(0, 0, 0, 0.48);
17  --moco-line: rgba(0, 0, 0, 0.12);
18  --moco-accent: #c6f24e;
19  --moco-accent-dk: #5b770c;
20  --moco-on-accent: #14180a;
21  --moco-warn: #b8437a;
22  --moco-accent-wash: rgba(198, 242, 78, 0.34);
23  --moco-warn-wash: rgba(184, 67, 122, 0.1);
24  --moco-hover-wash: rgba(0, 0, 0, 0.04);
25  --moco-ease: cubic-bezier(0.23, 1, 0.32, 1);
26 
27  --moco-serif: ui-serif, Georgia, "Times New Roman", serif;
28  --moco-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
29  --moco-sans: ui-sans-serif, system-ui, sans-serif;
30  --moco-display: ui-serif, Georgia, serif;
31}
32 
33@media (prefers-color-scheme: dark) {
34  :root:not([data-theme="light"]) {
35    --moco-bg: #121110;
36    --moco-panel: #1d1c19;
37    --moco-ink: rgba(255, 255, 255, 0.92);
38    --moco-body: rgba(255, 255, 255, 0.78);
39    --moco-muted: rgba(255, 255, 255, 0.6);
40    --moco-faint: rgba(255, 255, 255, 0.45);
41    --moco-line: rgba(255, 255, 255, 0.14);
42    --moco-accent: #c6f24e;
43    --moco-accent-dk: #c6f24e;
44    --moco-on-accent: #14180a;
45    --moco-warn: #e06ba0;
46    --moco-accent-wash: rgba(198, 242, 78, 0.16);
47    --moco-warn-wash: rgba(224, 107, 160, 0.14);
48    --moco-hover-wash: rgba(255, 255, 255, 0.06);
49  }
50}
51 
52[data-theme="dark"] {
53  --moco-bg: #121110;
54  --moco-panel: #1d1c19;
55  --moco-ink: rgba(255, 255, 255, 0.92);
56  --moco-body: rgba(255, 255, 255, 0.78);
57  --moco-muted: rgba(255, 255, 255, 0.6);
58  --moco-faint: rgba(255, 255, 255, 0.45);
59  --moco-line: rgba(255, 255, 255, 0.14);
60  --moco-accent: #c6f24e;
61  --moco-accent-dk: #c6f24e;
62  --moco-on-accent: #14180a;
63  --moco-warn: #e06ba0;
64  --moco-accent-wash: rgba(198, 242, 78, 0.16);
65  --moco-warn-wash: rgba(224, 107, 160, 0.14);
66  --moco-hover-wash: rgba(255, 255, 255, 0.06);
67}