Mercurial

comparison design_system/src/styles/tokens.css @ 251:117c4d53c9a4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add HTML-first Web Component system Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 09:14:57 -0700
parents
children 7a7581f040e8
comparison
equal deleted inserted replaced
250:745fd127b2a1 251:117c4d53c9a4
1 :root {
2 color-scheme: light;
3
4 --zen-color-canvas: #f7f3e8;
5 --zen-color-surface: #fffdf6;
6 --zen-color-surface-raised: #ffffff;
7 --zen-color-text: #171a21;
8 --zen-color-text-muted: #5f6470;
9 --zen-color-border: #272b35;
10 --zen-color-accent: #ffb000;
11 --zen-color-accent-hover: #ffca4a;
12 --zen-color-info: #2764d7;
13 --zen-color-success: #18794e;
14 --zen-color-warning: #9a5b00;
15 --zen-color-danger: #c62f3e;
16 --zen-color-on-danger: #ffffff;
17 --zen-color-focus: #7c3aed;
18
19 --zen-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
20 --zen-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
21 --zen-font-size-xs: 0.75rem;
22 --zen-font-size-sm: 0.875rem;
23 --zen-font-size-md: 1rem;
24 --zen-font-size-lg: 1.25rem;
25 --zen-font-size-xl: clamp(1.75rem, 4vw, 3rem);
26 --zen-line-height: 1.55;
27
28 --zen-space-1: 0.25rem;
29 --zen-space-2: 0.5rem;
30 --zen-space-3: 0.75rem;
31 --zen-space-4: 1rem;
32 --zen-space-5: 1.5rem;
33 --zen-space-6: 2rem;
34 --zen-space-7: 3rem;
35
36 --zen-radius-sm: 0.35rem;
37 --zen-radius-md: 0.7rem;
38 --zen-radius-lg: 1rem;
39 --zen-border-width: 2px;
40 --zen-shadow-sm: 3px 3px 0 rgba(23, 26, 33, 0.16);
41 --zen-shadow-md: 7px 7px 0 rgba(23, 26, 33, 0.16);
42 --zen-motion-fast: 120ms;
43 --zen-content-width: 76rem;
44 }
45
46 :root[data-zen-theme="dark"] {
47 color-scheme: dark;
48 --zen-color-canvas: #101218;
49 --zen-color-surface: #181b23;
50 --zen-color-surface-raised: #222631;
51 --zen-color-text: #f5f1e8;
52 --zen-color-text-muted: #b9bdc7;
53 --zen-color-border: #f5f1e8;
54 --zen-color-accent: #ffc247;
55 --zen-color-accent-hover: #ffd77d;
56 --zen-color-info: #8ab4ff;
57 --zen-color-success: #65d6a3;
58 --zen-color-warning: #ffc66d;
59 --zen-color-danger: #ff8792;
60 --zen-color-on-danger: #171a21;
61 --zen-color-focus: #c4a5ff;
62 --zen-shadow-sm: 3px 3px 0 rgba(0, 0, 0, 0.5);
63 --zen-shadow-md: 7px 7px 0 rgba(0, 0, 0, 0.5);
64 }
65
66 @media (prefers-color-scheme: dark) {
67 :root:not([data-zen-theme="light"]) {
68 color-scheme: dark;
69 --zen-color-canvas: #101218;
70 --zen-color-surface: #181b23;
71 --zen-color-surface-raised: #222631;
72 --zen-color-text: #f5f1e8;
73 --zen-color-text-muted: #b9bdc7;
74 --zen-color-border: #f5f1e8;
75 --zen-color-accent: #ffc247;
76 --zen-color-accent-hover: #ffd77d;
77 --zen-color-info: #8ab4ff;
78 --zen-color-success: #65d6a3;
79 --zen-color-warning: #ffc66d;
80 --zen-color-danger: #ff8792;
81 --zen-color-on-danger: #171a21;
82 --zen-color-focus: #c4a5ff;
83 }
84 }