@codemem/server 0.33.0-alpha.3 → 0.33.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +29 -1
- package/dist/index.js.map +1 -1
- package/dist/routes/sync.d.ts.map +1 -1
- package/package.json +2 -2
- package/static/app.js +444 -528
- package/static/index.html +340 -447
- package/static/themes.css +143 -0
- package/static/tokens.css +156 -0
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
/* ── Light theme overrides ─────────────────────────────────────────────────
|
|
2
|
+
* Applied two ways:
|
|
3
|
+
* 1. Explicit [data-theme="light"], set by the theme switcher or the inline
|
|
4
|
+
* boot script in index.html when localStorage says "light".
|
|
5
|
+
* 2. @media (prefers-color-scheme: light) whenever the user has not opted
|
|
6
|
+
* into dark — this gives live OS-theme-switch behavior and is resilient
|
|
7
|
+
* to JS failures.
|
|
8
|
+
*
|
|
9
|
+
* The two rule bodies are intentionally identical. If you change one, change
|
|
10
|
+
* the other. The duplication is preserved deliberately so each rule remains
|
|
11
|
+
* trivially auditable without depending on extra cascade tricks. */
|
|
12
|
+
|
|
13
|
+
[data-theme="light"] {
|
|
14
|
+
/* Surface */
|
|
15
|
+
--surface-0: #f7faf8;
|
|
16
|
+
--surface-1: #ffffff;
|
|
17
|
+
--surface-2: #eef5f1;
|
|
18
|
+
--surface-3: #e3ede7;
|
|
19
|
+
|
|
20
|
+
/* Text — warm-tinted near-black, never pure */
|
|
21
|
+
--text-primary: #0b1016;
|
|
22
|
+
--text-secondary: #3f4d5c;
|
|
23
|
+
--text-tertiary: #6b7985;
|
|
24
|
+
--text-inverse: #ffffff;
|
|
25
|
+
|
|
26
|
+
/* Accents — AA-safe evergreen on white */
|
|
27
|
+
--accent: #0f8a68;
|
|
28
|
+
--accent-hover: #0a6f53;
|
|
29
|
+
--accent-subtle: rgba(15, 138, 104, 0.10);
|
|
30
|
+
--accent-strong: rgba(15, 138, 104, 0.28);
|
|
31
|
+
--accent-warm: #c97a1f;
|
|
32
|
+
--accent-warm-subtle: rgba(201, 122, 31, 0.12);
|
|
33
|
+
--accent-cool: #3e5fa8;
|
|
34
|
+
--accent-cool-subtle: rgba(62, 95, 168, 0.10);
|
|
35
|
+
--accent-violet: #7f52c2;
|
|
36
|
+
--accent-violet-subtle: rgba(127, 82, 194, 0.12);
|
|
37
|
+
--accent-steel: #1a8a70;
|
|
38
|
+
--accent-steel-subtle: rgba(26, 138, 112, 0.12);
|
|
39
|
+
--accent-ochre: #b5832a;
|
|
40
|
+
--accent-ochre-subtle: rgba(181, 131, 42, 0.12);
|
|
41
|
+
--accent-neutral: #5d6a7c;
|
|
42
|
+
--accent-neutral-subtle: rgba(93, 106, 124, 0.10);
|
|
43
|
+
|
|
44
|
+
/* Status */
|
|
45
|
+
--status-healthy: #0f8a68;
|
|
46
|
+
--status-degraded: #c97a1f;
|
|
47
|
+
--status-attention: #b4411e;
|
|
48
|
+
|
|
49
|
+
/* Chrome */
|
|
50
|
+
--border: rgba(15, 138, 104, 0.16);
|
|
51
|
+
--border-strong: rgba(15, 138, 104, 0.30);
|
|
52
|
+
--border-hover: rgba(15, 138, 104, 0.24);
|
|
53
|
+
--focus-ring: rgba(15, 138, 104, 0.20);
|
|
54
|
+
--shadow-sm: 0 1px 3px rgba(11, 16, 22, 0.05);
|
|
55
|
+
--shadow-md: 0 8px 24px rgba(11, 16, 22, 0.08);
|
|
56
|
+
--shadow-lg: 0 18px 40px rgba(11, 16, 22, 0.12);
|
|
57
|
+
|
|
58
|
+
/* Body background */
|
|
59
|
+
--grad-1: rgba(15, 138, 104, 0.08);
|
|
60
|
+
--grad-2: rgba(62, 95, 168, 0.06);
|
|
61
|
+
--grad-3: rgba(15, 138, 104, 0.04);
|
|
62
|
+
--body-start: #f7faf8;
|
|
63
|
+
--body-mid: #eef5f1;
|
|
64
|
+
--body-end: #e6efe9;
|
|
65
|
+
--dot-color: rgba(11, 16, 22, 0.035);
|
|
66
|
+
--grid-color: rgba(11, 16, 22, 0.035);
|
|
67
|
+
|
|
68
|
+
/* Inputs & controls */
|
|
69
|
+
--input-bg: rgba(255, 255, 255, 0.9);
|
|
70
|
+
--control-bg: rgba(15, 138, 104, 0.08);
|
|
71
|
+
--control-border: rgba(15, 138, 104, 0.22);
|
|
72
|
+
--control-hover-bg: rgba(15, 138, 104, 0.14);
|
|
73
|
+
--control-hover-border: rgba(15, 138, 104, 0.4);
|
|
74
|
+
--control-text: var(--accent);
|
|
75
|
+
|
|
76
|
+
/* Toggles */
|
|
77
|
+
--toggle-active-bg: var(--accent-subtle);
|
|
78
|
+
--toggle-active-text: var(--accent);
|
|
79
|
+
--toggle-hover-bg: rgba(11, 16, 22, 0.04);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
@media (prefers-color-scheme: light) {
|
|
83
|
+
:root:not([data-theme="dark"]) {
|
|
84
|
+
--surface-0: #f7faf8;
|
|
85
|
+
--surface-1: #ffffff;
|
|
86
|
+
--surface-2: #eef5f1;
|
|
87
|
+
--surface-3: #e3ede7;
|
|
88
|
+
|
|
89
|
+
--text-primary: #0b1016;
|
|
90
|
+
--text-secondary: #3f4d5c;
|
|
91
|
+
--text-tertiary: #6b7985;
|
|
92
|
+
--text-inverse: #ffffff;
|
|
93
|
+
|
|
94
|
+
--accent: #0f8a68;
|
|
95
|
+
--accent-hover: #0a6f53;
|
|
96
|
+
--accent-subtle: rgba(15, 138, 104, 0.10);
|
|
97
|
+
--accent-strong: rgba(15, 138, 104, 0.28);
|
|
98
|
+
--accent-warm: #c97a1f;
|
|
99
|
+
--accent-warm-subtle: rgba(201, 122, 31, 0.12);
|
|
100
|
+
--accent-cool: #3e5fa8;
|
|
101
|
+
--accent-cool-subtle: rgba(62, 95, 168, 0.10);
|
|
102
|
+
--accent-violet: #7f52c2;
|
|
103
|
+
--accent-violet-subtle: rgba(127, 82, 194, 0.12);
|
|
104
|
+
--accent-steel: #1a8a70;
|
|
105
|
+
--accent-steel-subtle: rgba(26, 138, 112, 0.12);
|
|
106
|
+
--accent-ochre: #b5832a;
|
|
107
|
+
--accent-ochre-subtle: rgba(181, 131, 42, 0.12);
|
|
108
|
+
--accent-neutral: #5d6a7c;
|
|
109
|
+
--accent-neutral-subtle: rgba(93, 106, 124, 0.10);
|
|
110
|
+
|
|
111
|
+
--status-healthy: #0f8a68;
|
|
112
|
+
--status-degraded: #c97a1f;
|
|
113
|
+
--status-attention: #b4411e;
|
|
114
|
+
|
|
115
|
+
--border: rgba(15, 138, 104, 0.16);
|
|
116
|
+
--border-strong: rgba(15, 138, 104, 0.30);
|
|
117
|
+
--border-hover: rgba(15, 138, 104, 0.24);
|
|
118
|
+
--focus-ring: rgba(15, 138, 104, 0.20);
|
|
119
|
+
--shadow-sm: 0 1px 3px rgba(11, 16, 22, 0.05);
|
|
120
|
+
--shadow-md: 0 8px 24px rgba(11, 16, 22, 0.08);
|
|
121
|
+
--shadow-lg: 0 18px 40px rgba(11, 16, 22, 0.12);
|
|
122
|
+
|
|
123
|
+
--grad-1: rgba(15, 138, 104, 0.08);
|
|
124
|
+
--grad-2: rgba(62, 95, 168, 0.06);
|
|
125
|
+
--grad-3: rgba(15, 138, 104, 0.04);
|
|
126
|
+
--body-start: #f7faf8;
|
|
127
|
+
--body-mid: #eef5f1;
|
|
128
|
+
--body-end: #e6efe9;
|
|
129
|
+
--dot-color: rgba(11, 16, 22, 0.035);
|
|
130
|
+
--grid-color: rgba(11, 16, 22, 0.035);
|
|
131
|
+
|
|
132
|
+
--input-bg: rgba(255, 255, 255, 0.9);
|
|
133
|
+
--control-bg: rgba(15, 138, 104, 0.08);
|
|
134
|
+
--control-border: rgba(15, 138, 104, 0.22);
|
|
135
|
+
--control-hover-bg: rgba(15, 138, 104, 0.14);
|
|
136
|
+
--control-hover-border: rgba(15, 138, 104, 0.4);
|
|
137
|
+
--control-text: var(--accent);
|
|
138
|
+
|
|
139
|
+
--toggle-active-bg: var(--accent-subtle);
|
|
140
|
+
--toggle-active-text: var(--accent);
|
|
141
|
+
--toggle-hover-bg: rgba(11, 16, 22, 0.04);
|
|
142
|
+
}
|
|
143
|
+
}
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
/* ── Design Tokens ─────────────────────────────────────────────────────────
|
|
2
|
+
* Dark-first defaults. The :root rule below carries the dark palette plus
|
|
3
|
+
* every scale token (color, surface, accent, status, chrome, body bg, inputs,
|
|
4
|
+
* toggles, spacing, radii, typography, motion).
|
|
5
|
+
*
|
|
6
|
+
* Light-theme overrides live in themes.css (loaded after this file so the
|
|
7
|
+
* cascade resolves correctly: dark defaults here, light overrides next, then
|
|
8
|
+
* the per-component rules inside the inline <style> in index.html).
|
|
9
|
+
*
|
|
10
|
+
* Values come from the codemem design handoff (tokens/colors_and_type.css). */
|
|
11
|
+
|
|
12
|
+
:root {
|
|
13
|
+
/* Surface — deep ink */
|
|
14
|
+
--surface-0: #0b1016;
|
|
15
|
+
--surface-1: #0f1720;
|
|
16
|
+
--surface-2: #111c27;
|
|
17
|
+
--surface-3: #172332;
|
|
18
|
+
|
|
19
|
+
/* Text — cool blue-white, never pure */
|
|
20
|
+
--text-primary: #e7f0f7;
|
|
21
|
+
--text-secondary: #b7c5d3;
|
|
22
|
+
--text-tertiary: #8493a3;
|
|
23
|
+
--text-inverse: #0b1016;
|
|
24
|
+
|
|
25
|
+
/* Accents */
|
|
26
|
+
--accent: #7ef0c2;
|
|
27
|
+
--accent-hover: #9eff87;
|
|
28
|
+
--accent-subtle: rgba(126, 240, 194, 0.10);
|
|
29
|
+
--accent-strong: rgba(126, 240, 194, 0.28);
|
|
30
|
+
--accent-warm: #ffb454;
|
|
31
|
+
--accent-warm-subtle: rgba(255, 180, 84, 0.14);
|
|
32
|
+
--accent-cool: #86a9ff;
|
|
33
|
+
--accent-cool-subtle: rgba(134, 169, 255, 0.14);
|
|
34
|
+
--accent-violet: #c79bff;
|
|
35
|
+
--accent-violet-subtle: rgba(199, 155, 255, 0.14);
|
|
36
|
+
--accent-steel: #4dd4b4;
|
|
37
|
+
--accent-steel-subtle: rgba(77, 212, 180, 0.14);
|
|
38
|
+
--accent-ochre: #e2c07e;
|
|
39
|
+
--accent-ochre-subtle: rgba(226, 192, 126, 0.14);
|
|
40
|
+
--accent-neutral: #9ea7b7;
|
|
41
|
+
--accent-neutral-subtle: rgba(158, 167, 183, 0.14);
|
|
42
|
+
|
|
43
|
+
/* Status */
|
|
44
|
+
--status-healthy: #7ef0c2;
|
|
45
|
+
--status-degraded: #ffb454;
|
|
46
|
+
--status-attention: #ff7a50;
|
|
47
|
+
|
|
48
|
+
/* Chrome */
|
|
49
|
+
--border: rgba(126, 240, 194, 0.12);
|
|
50
|
+
--border-strong: rgba(126, 240, 194, 0.28);
|
|
51
|
+
--border-hover: rgba(126, 240, 194, 0.22);
|
|
52
|
+
--focus-ring: rgba(126, 240, 194, 0.35);
|
|
53
|
+
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
54
|
+
--shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
|
|
55
|
+
--shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.45);
|
|
56
|
+
|
|
57
|
+
/* Body background */
|
|
58
|
+
--grad-1: rgba(126, 240, 194, 0.08);
|
|
59
|
+
--grad-2: rgba(86, 145, 255, 0.08);
|
|
60
|
+
--grad-3: rgba(126, 240, 194, 0.04);
|
|
61
|
+
--body-start: #0b1016;
|
|
62
|
+
--body-mid: #0d131c;
|
|
63
|
+
--body-end: #091018;
|
|
64
|
+
--dot-color: rgba(126, 240, 194, 0.045);
|
|
65
|
+
--grid-color: rgba(126, 240, 194, 0.045);
|
|
66
|
+
|
|
67
|
+
/* Inputs & controls */
|
|
68
|
+
--input-bg: rgba(9, 15, 22, 0.55);
|
|
69
|
+
--control-bg: rgba(126, 240, 194, 0.06);
|
|
70
|
+
--control-border: rgba(126, 240, 194, 0.22);
|
|
71
|
+
--control-hover-bg: rgba(126, 240, 194, 0.12);
|
|
72
|
+
--control-hover-border: rgba(126, 240, 194, 0.4);
|
|
73
|
+
--control-text: var(--accent);
|
|
74
|
+
|
|
75
|
+
/* Toggles */
|
|
76
|
+
--toggle-active-bg: var(--accent-subtle);
|
|
77
|
+
--toggle-active-text: var(--accent);
|
|
78
|
+
--toggle-hover-bg: rgba(255, 255, 255, 0.04);
|
|
79
|
+
|
|
80
|
+
/* Spacing scale (4px base) */
|
|
81
|
+
--sp-1: 4px;
|
|
82
|
+
--sp-2: 8px;
|
|
83
|
+
--sp-3: 12px;
|
|
84
|
+
--sp-4: 16px;
|
|
85
|
+
--sp-5: 20px;
|
|
86
|
+
--sp-6: 24px;
|
|
87
|
+
--sp-8: 32px;
|
|
88
|
+
--sp-10: 40px;
|
|
89
|
+
--sp-12: 48px;
|
|
90
|
+
|
|
91
|
+
/* Radii */
|
|
92
|
+
--radius-sm: 10px;
|
|
93
|
+
--radius-md: 12px;
|
|
94
|
+
--radius-lg: 16px;
|
|
95
|
+
--radius-xl: 20px;
|
|
96
|
+
--radius-2xl: 24px;
|
|
97
|
+
--radius-pill: 999px;
|
|
98
|
+
|
|
99
|
+
/* Typography */
|
|
100
|
+
--font-sans: "Geist", system-ui, -apple-system, sans-serif;
|
|
101
|
+
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
102
|
+
|
|
103
|
+
/* Type scale — t-shirt sizes anchored at 14px body. Use these tokens
|
|
104
|
+
instead of raw px so future passes can rescale without sweeping the
|
|
105
|
+
whole file. Relative units (em/rem/inherit) are intentional and stay
|
|
106
|
+
as-is. */
|
|
107
|
+
--font-size-2xs: 10px;
|
|
108
|
+
--font-size-xs: 11px;
|
|
109
|
+
--font-size-sm: 12px;
|
|
110
|
+
--font-size-md: 13px;
|
|
111
|
+
--font-size-base: 14px;
|
|
112
|
+
--font-size-lg: 15px;
|
|
113
|
+
--font-size-xl: 16px;
|
|
114
|
+
--font-size-2xl: 18px;
|
|
115
|
+
--font-size-3xl: 20px;
|
|
116
|
+
|
|
117
|
+
/* Font weights — the only non-token weight allowed today is the
|
|
118
|
+
one-off 650 used by .project-inventory-title for an intentional
|
|
119
|
+
tighter-than-bold look. */
|
|
120
|
+
--font-weight-regular: 400;
|
|
121
|
+
--font-weight-medium: 500;
|
|
122
|
+
--font-weight-semibold: 600;
|
|
123
|
+
--font-weight-bold: 700;
|
|
124
|
+
|
|
125
|
+
/* Motion — durations and easings.
|
|
126
|
+
|
|
127
|
+
The hover/state transition tier uses a small scale
|
|
128
|
+
(instant/fast/base/medium). Named keyframe animations get
|
|
129
|
+
semantic tokens because their duration is coupled to a specific
|
|
130
|
+
timing curve and cannot be freely reshuffled. The three most
|
|
131
|
+
common timing functions (ease, ease-in-out, ease-out) are
|
|
132
|
+
tokenized; rare one-offs (linear, steps()) remain inline.
|
|
133
|
+
|
|
134
|
+
A global @media (prefers-reduced-motion: reduce) block at the
|
|
135
|
+
bottom of the inline stylesheet already collapses every
|
|
136
|
+
transition and finite animation to 0.01ms, plus the four reduce
|
|
137
|
+
blocks that null specific infinite animations. So tokenization
|
|
138
|
+
here is visually identical to current main. */
|
|
139
|
+
--duration-instant: 80ms;
|
|
140
|
+
--duration-fast: 140ms;
|
|
141
|
+
--duration-toast: 160ms;
|
|
142
|
+
--duration-base: 200ms;
|
|
143
|
+
--duration-medium: 250ms;
|
|
144
|
+
--duration-shake: 300ms;
|
|
145
|
+
--duration-fade-up: 400ms;
|
|
146
|
+
--duration-new-pulse: 420ms;
|
|
147
|
+
--duration-attention: 900ms;
|
|
148
|
+
--duration-blink: 1100ms;
|
|
149
|
+
--duration-pip: 1200ms;
|
|
150
|
+
--duration-shimmer: 1500ms;
|
|
151
|
+
--duration-pulse: 2400ms;
|
|
152
|
+
|
|
153
|
+
--ease-standard: ease;
|
|
154
|
+
--ease-in-out: ease-in-out;
|
|
155
|
+
--ease-out: ease-out;
|
|
156
|
+
}
|