@gemka/design 0.3.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/README.md +40 -0
- package/chrome.css +581 -0
- package/package.json +14 -0
- package/tokens.css +38 -0
package/README.md
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
# @gemka/tokens
|
|
2
|
+
|
|
3
|
+
The **single source of truth** for GemKa's shared design tokens — the cream-paper
|
|
4
|
+
surfaces, oxblood accent, warm neutrals, and Inter + Fraunces type that every
|
|
5
|
+
GemKa product (GemTimer, IdeaKache, GemTodo, gemka.co, …) draws from.
|
|
6
|
+
|
|
7
|
+
It's intentionally tiny: one `tokens.css` file exposing a `:root` block of CSS
|
|
8
|
+
custom properties (`--gk-*`). No build step, no dependencies.
|
|
9
|
+
|
|
10
|
+
## Usage
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install @gemka/tokens
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
```css
|
|
17
|
+
@import "@gemka/tokens/tokens.css";
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Then reference the variables:
|
|
21
|
+
|
|
22
|
+
```css
|
|
23
|
+
.card {
|
|
24
|
+
background: var(--gk-paper);
|
|
25
|
+
color: var(--gk-ink);
|
|
26
|
+
border: 1px solid var(--gk-border);
|
|
27
|
+
font-family: var(--gk-font-sans);
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Changing a token
|
|
32
|
+
|
|
33
|
+
Tokens are canonical — change them here, never fork them per-app:
|
|
34
|
+
|
|
35
|
+
1. Edit `tokens.css`.
|
|
36
|
+
2. Bump the `version` in `package.json`.
|
|
37
|
+
3. `npm publish --access public`.
|
|
38
|
+
4. Bump the `@gemka/tokens` dependency in each consumer repo to the new version.
|
|
39
|
+
|
|
40
|
+
That keeps every product visually in lockstep from one place.
|
package/chrome.css
ADDED
|
@@ -0,0 +1,581 @@
|
|
|
1
|
+
/* ============================================================================
|
|
2
|
+
@gemka/design - chrome.css
|
|
3
|
+
Canonical shared chrome: the deep-dive analytics view + nav chrome, extracted
|
|
4
|
+
from GemTimer (index.html, source of truth).
|
|
5
|
+
|
|
6
|
+
GemTimer ships a single permanent look (html.theme-vintage is the only theme),
|
|
7
|
+
so every rule here is the FINAL rendered result: each html.theme-vintage
|
|
8
|
+
override has been folded into its base rule, hardcoded colors resolved to the
|
|
9
|
+
--gk-* tokens in tokens.css, and --vi-* aliases resolved to the underlying
|
|
10
|
+
--gk-* token they pointed at. These render pixel-identically to GemTimer today.
|
|
11
|
+
|
|
12
|
+
Requires tokens.css. Scope hook is .theme-vintage on a root ancestor (GemTimer
|
|
13
|
+
sets it on <html>). Class names match GemTimer exactly.
|
|
14
|
+
|
|
15
|
+
--vi-* -> --gk-* map used while folding:
|
|
16
|
+
--vi-canvas -> --gk-bg --vi-charcoal -> --gk-ink
|
|
17
|
+
--vi-track -> --gk-border --vi-muted -> --gk-muted-deep
|
|
18
|
+
--vi-hairline -> --gk-border-strong --vi-accent -> --gk-accent
|
|
19
|
+
============================================================================ */
|
|
20
|
+
|
|
21
|
+
/* ── Nav chrome ───────────────────────────────────────────────────────────── */
|
|
22
|
+
.theme-vintage nav {
|
|
23
|
+
position: relative;
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
justify-content: space-between;
|
|
27
|
+
padding: 12px 40px;
|
|
28
|
+
max-width: 1100px;
|
|
29
|
+
width: 100%;
|
|
30
|
+
box-sizing: border-box;
|
|
31
|
+
margin: 0 auto;
|
|
32
|
+
border-bottom: none;
|
|
33
|
+
}
|
|
34
|
+
.theme-vintage #appNav { max-width: 1200px; }
|
|
35
|
+
.theme-vintage nav::after {
|
|
36
|
+
content: '';
|
|
37
|
+
position: absolute;
|
|
38
|
+
bottom: 0;
|
|
39
|
+
left: 40px;
|
|
40
|
+
right: 40px;
|
|
41
|
+
border-bottom: var(--gk-nav-rule) solid var(--gk-accent);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.theme-vintage .nav-logo-btn {
|
|
45
|
+
background: none;
|
|
46
|
+
color: var(--gk-ink);
|
|
47
|
+
font-size: 20px;
|
|
48
|
+
font-weight: 500;
|
|
49
|
+
padding: 0;
|
|
50
|
+
border-radius: 0;
|
|
51
|
+
line-height: 1.2;
|
|
52
|
+
text-decoration: none;
|
|
53
|
+
letter-spacing: -0.5px;
|
|
54
|
+
white-space: nowrap;
|
|
55
|
+
}
|
|
56
|
+
.theme-vintage .nav-logo-btn span { color: var(--gk-accent); }
|
|
57
|
+
|
|
58
|
+
/* Centered date/time: uppercase, letter-spaced charcoal. */
|
|
59
|
+
.theme-vintage nav .nav-date {
|
|
60
|
+
position: absolute;
|
|
61
|
+
left: 50%;
|
|
62
|
+
transform: translateX(-50%);
|
|
63
|
+
display: flex;
|
|
64
|
+
gap: 1.25rem;
|
|
65
|
+
font-size: 14px;
|
|
66
|
+
font-weight: 400;
|
|
67
|
+
color: var(--gk-ink);
|
|
68
|
+
letter-spacing: 0.18em;
|
|
69
|
+
text-transform: uppercase;
|
|
70
|
+
font-variant-numeric: tabular-nums;
|
|
71
|
+
pointer-events: none;
|
|
72
|
+
}
|
|
73
|
+
.theme-vintage .clock-half { width: var(--gk-clock-half); }
|
|
74
|
+
.theme-vintage .clock-date { text-align: right; }
|
|
75
|
+
.theme-vintage .clock-time { text-align: left; }
|
|
76
|
+
|
|
77
|
+
/* Avatar: oxblood disc with cream initials. */
|
|
78
|
+
.theme-vintage .auth-avatar {
|
|
79
|
+
position: relative;
|
|
80
|
+
width: var(--gk-avatar);
|
|
81
|
+
height: var(--gk-avatar);
|
|
82
|
+
border-radius: 50%;
|
|
83
|
+
background: var(--gk-accent);
|
|
84
|
+
color: var(--gk-bg);
|
|
85
|
+
font-size: 0.7rem;
|
|
86
|
+
font-weight: 700;
|
|
87
|
+
display: flex;
|
|
88
|
+
align-items: center;
|
|
89
|
+
justify-content: center;
|
|
90
|
+
cursor: pointer;
|
|
91
|
+
transition: opacity 0.15s;
|
|
92
|
+
user-select: none;
|
|
93
|
+
letter-spacing: -0.04em;
|
|
94
|
+
}
|
|
95
|
+
.theme-vintage .auth-avatar:hover { opacity: 0.85; }
|
|
96
|
+
|
|
97
|
+
/* ── Deep dive: header, nav, range toggle ─────────────────────────────────── */
|
|
98
|
+
.theme-vintage .dd-header {
|
|
99
|
+
display: flex;
|
|
100
|
+
align-items: center;
|
|
101
|
+
gap: 0.75rem;
|
|
102
|
+
margin: 10px auto 10px;
|
|
103
|
+
max-width: 1200px;
|
|
104
|
+
width: 100%;
|
|
105
|
+
padding: 0 40px;
|
|
106
|
+
box-sizing: border-box;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* In-flow "Back to GemTimer" text link (oxblood). */
|
|
110
|
+
.theme-vintage .dd-close {
|
|
111
|
+
flex-shrink: 0;
|
|
112
|
+
background: none;
|
|
113
|
+
border: none;
|
|
114
|
+
padding: 0;
|
|
115
|
+
font-family: inherit;
|
|
116
|
+
font-size: 0.82rem;
|
|
117
|
+
font-weight: 500;
|
|
118
|
+
color: var(--gk-accent);
|
|
119
|
+
cursor: pointer;
|
|
120
|
+
white-space: nowrap;
|
|
121
|
+
transition: color 0.15s;
|
|
122
|
+
}
|
|
123
|
+
.theme-vintage .dd-close:hover { color: var(--gk-accent-deep); text-decoration: underline; }
|
|
124
|
+
|
|
125
|
+
.theme-vintage .dd-title {
|
|
126
|
+
flex: 1;
|
|
127
|
+
text-align: center;
|
|
128
|
+
font-size: 1.15rem;
|
|
129
|
+
color: var(--gk-ink);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.theme-vintage .dd-nav {
|
|
133
|
+
display: flex;
|
|
134
|
+
align-items: center;
|
|
135
|
+
justify-content: space-between;
|
|
136
|
+
position: relative;
|
|
137
|
+
max-width: 1200px;
|
|
138
|
+
width: 100%;
|
|
139
|
+
margin: 0 auto;
|
|
140
|
+
padding: 0 40px 12px;
|
|
141
|
+
box-sizing: border-box;
|
|
142
|
+
}
|
|
143
|
+
.theme-vintage .dd-nav::after {
|
|
144
|
+
content: '';
|
|
145
|
+
position: absolute;
|
|
146
|
+
bottom: 0;
|
|
147
|
+
left: 40px;
|
|
148
|
+
right: 40px;
|
|
149
|
+
border-bottom: var(--gk-nav-rule) solid var(--gk-accent);
|
|
150
|
+
}
|
|
151
|
+
.theme-vintage .dd-nav .nav-date {
|
|
152
|
+
position: absolute;
|
|
153
|
+
left: 50%;
|
|
154
|
+
transform: translateX(-50%);
|
|
155
|
+
display: flex;
|
|
156
|
+
gap: 1.25rem;
|
|
157
|
+
font-size: 14px;
|
|
158
|
+
font-weight: 400;
|
|
159
|
+
color: var(--gk-ink);
|
|
160
|
+
letter-spacing: 0.18em;
|
|
161
|
+
text-transform: uppercase;
|
|
162
|
+
font-variant-numeric: tabular-nums;
|
|
163
|
+
}
|
|
164
|
+
.theme-vintage .dd-nav .auth-avatar {
|
|
165
|
+
position: relative;
|
|
166
|
+
width: var(--gk-avatar);
|
|
167
|
+
height: var(--gk-avatar);
|
|
168
|
+
border-radius: 50%;
|
|
169
|
+
background: var(--gk-accent);
|
|
170
|
+
color: var(--gk-bg);
|
|
171
|
+
font-size: 0.7rem;
|
|
172
|
+
font-weight: 700;
|
|
173
|
+
display: flex;
|
|
174
|
+
align-items: center;
|
|
175
|
+
justify-content: center;
|
|
176
|
+
user-select: none;
|
|
177
|
+
letter-spacing: -0.04em;
|
|
178
|
+
cursor: pointer;
|
|
179
|
+
transition: opacity 0.15s;
|
|
180
|
+
}
|
|
181
|
+
.theme-vintage .dd-nav .auth-avatar:hover { opacity: 0.85; }
|
|
182
|
+
|
|
183
|
+
/* Time-range toggle: outlined charcoal pills, oxblood when active. */
|
|
184
|
+
.theme-vintage .dd-range-toggle {
|
|
185
|
+
display: flex;
|
|
186
|
+
gap: 6px;
|
|
187
|
+
background: transparent;
|
|
188
|
+
border-radius: 0;
|
|
189
|
+
padding: 0;
|
|
190
|
+
}
|
|
191
|
+
.theme-vintage .dd-range-btn {
|
|
192
|
+
background: transparent;
|
|
193
|
+
border: 0.6px solid var(--gk-ink);
|
|
194
|
+
border-radius: 3px;
|
|
195
|
+
padding: 0.35rem 0.85rem;
|
|
196
|
+
font-family: inherit;
|
|
197
|
+
font-size: 0.7rem;
|
|
198
|
+
font-weight: 500;
|
|
199
|
+
color: var(--gk-ink);
|
|
200
|
+
cursor: pointer;
|
|
201
|
+
transition: all 0.15s;
|
|
202
|
+
box-shadow: none;
|
|
203
|
+
}
|
|
204
|
+
.theme-vintage .dd-range-btn.active {
|
|
205
|
+
background: var(--gk-accent);
|
|
206
|
+
color: var(--gk-bg);
|
|
207
|
+
border-color: var(--gk-accent);
|
|
208
|
+
box-shadow: none;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
/* ── Deep dive: layout ────────────────────────────────────────────────────── */
|
|
212
|
+
.theme-vintage .dd-overlay-body {
|
|
213
|
+
max-width: 1200px;
|
|
214
|
+
margin: 0 auto;
|
|
215
|
+
display: flex;
|
|
216
|
+
flex-direction: column;
|
|
217
|
+
width: 100%;
|
|
218
|
+
box-sizing: border-box;
|
|
219
|
+
padding: 0 40px;
|
|
220
|
+
}
|
|
221
|
+
.theme-vintage .dd-overlay-grid {
|
|
222
|
+
display: grid;
|
|
223
|
+
grid-template-columns: 1fr 1fr;
|
|
224
|
+
gap: 8px 32px;
|
|
225
|
+
align-content: start;
|
|
226
|
+
}
|
|
227
|
+
.theme-vintage .dd-overlay-cell { min-width: 0; display: flex; flex-direction: column; }
|
|
228
|
+
|
|
229
|
+
/* ── Deep dive: stat cards ────────────────────────────────────────────────── */
|
|
230
|
+
.theme-vintage .dd-stats {
|
|
231
|
+
display: grid;
|
|
232
|
+
grid-template-columns: repeat(3, 1fr);
|
|
233
|
+
gap: 0.5rem;
|
|
234
|
+
margin-bottom: 0.5rem;
|
|
235
|
+
padding-top: 6px;
|
|
236
|
+
}
|
|
237
|
+
.theme-vintage .dd-stat-card {
|
|
238
|
+
min-width: 0;
|
|
239
|
+
background: var(--gk-surface-2);
|
|
240
|
+
border: 0.6px solid var(--gk-ink);
|
|
241
|
+
border-radius: 6px;
|
|
242
|
+
padding: var(--gk-stat-card-pad);
|
|
243
|
+
}
|
|
244
|
+
.theme-vintage .dd-stat-label {
|
|
245
|
+
font-size: 0.6rem;
|
|
246
|
+
color: var(--gk-muted-deep);
|
|
247
|
+
font-weight: 500;
|
|
248
|
+
margin-bottom: 0.15rem;
|
|
249
|
+
}
|
|
250
|
+
.theme-vintage .dd-stat-value {
|
|
251
|
+
font-size: 1.15rem;
|
|
252
|
+
font-weight: 500;
|
|
253
|
+
color: var(--gk-ink);
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
/* ── Deep dive: section titles ────────────────────────────────────────────── */
|
|
257
|
+
.theme-vintage .dd-section-title {
|
|
258
|
+
font-size: 0.72rem;
|
|
259
|
+
color: var(--gk-ink);
|
|
260
|
+
letter-spacing: 0;
|
|
261
|
+
border-bottom: 1px solid var(--gk-border-strong);
|
|
262
|
+
padding-bottom: 0.35rem;
|
|
263
|
+
margin: 0 0 0.55rem;
|
|
264
|
+
}
|
|
265
|
+
.theme-vintage .dd-section-title:first-child { margin-top: 0; }
|
|
266
|
+
|
|
267
|
+
/* ── Deep dive: peak-hour (time-of-day) cards ─────────────────────────────── */
|
|
268
|
+
.theme-vintage .dd-tod-grid {
|
|
269
|
+
display: grid;
|
|
270
|
+
grid-template-columns: 1fr 1fr;
|
|
271
|
+
gap: 0.35rem;
|
|
272
|
+
margin-bottom: 1rem;
|
|
273
|
+
padding-top: 2px;
|
|
274
|
+
}
|
|
275
|
+
.theme-vintage .dd-tod-card {
|
|
276
|
+
background: var(--gk-surface-2);
|
|
277
|
+
border: 0.6px solid var(--gk-ink);
|
|
278
|
+
border-radius: 6px;
|
|
279
|
+
padding: 0.6rem 0.75rem;
|
|
280
|
+
}
|
|
281
|
+
.theme-vintage .dd-tod-name {
|
|
282
|
+
font-size: 0.72rem;
|
|
283
|
+
font-weight: 500;
|
|
284
|
+
color: var(--gk-ink);
|
|
285
|
+
margin-bottom: 0.15rem;
|
|
286
|
+
}
|
|
287
|
+
.theme-vintage .dd-tod-hours {
|
|
288
|
+
font-size: 0.65rem;
|
|
289
|
+
color: var(--gk-muted-deep);
|
|
290
|
+
font-weight: 500;
|
|
291
|
+
margin-bottom: 0.35rem;
|
|
292
|
+
}
|
|
293
|
+
.theme-vintage .dd-tod-bar-bg {
|
|
294
|
+
height: 4px;
|
|
295
|
+
background: var(--gk-border);
|
|
296
|
+
border-radius: 2px;
|
|
297
|
+
overflow: hidden;
|
|
298
|
+
}
|
|
299
|
+
/* !important overrides the inline rgba() the JS render sets, so bars paint at
|
|
300
|
+
full oxblood saturation even at low values. */
|
|
301
|
+
.theme-vintage .dd-tod-bar {
|
|
302
|
+
height: 100%;
|
|
303
|
+
background: var(--gk-accent) !important;
|
|
304
|
+
border-radius: 2px;
|
|
305
|
+
transition: width 0.3s;
|
|
306
|
+
}
|
|
307
|
+
.theme-vintage .dd-tod-pct {
|
|
308
|
+
font-size: 0.85rem;
|
|
309
|
+
font-weight: 500;
|
|
310
|
+
color: var(--gk-ink);
|
|
311
|
+
margin-top: 0.3rem;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
/* ── Deep dive: hourly focus chart ────────────────────────────────────────── */
|
|
315
|
+
.theme-vintage .dd-hour-grid { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
|
|
316
|
+
.theme-vintage .dd-hour-row { display: flex; align-items: center; gap: 0.4rem; height: 14px; }
|
|
317
|
+
.theme-vintage .dd-hour-label {
|
|
318
|
+
width: 28px;
|
|
319
|
+
font-size: 0.6rem;
|
|
320
|
+
color: var(--gk-muted-deep);
|
|
321
|
+
font-weight: 500;
|
|
322
|
+
text-align: right;
|
|
323
|
+
flex-shrink: 0;
|
|
324
|
+
line-height: 1;
|
|
325
|
+
}
|
|
326
|
+
.theme-vintage .dd-hour-bar-bg {
|
|
327
|
+
flex: 1;
|
|
328
|
+
height: 6px;
|
|
329
|
+
background: var(--gk-border);
|
|
330
|
+
border-radius: 3px;
|
|
331
|
+
overflow: hidden;
|
|
332
|
+
display: flex;
|
|
333
|
+
}
|
|
334
|
+
.theme-vintage .dd-hour-bar-bg .dd-hour-bar { height: 100%; transition: width 0.3s; }
|
|
335
|
+
.theme-vintage .dd-hour-bar.deep { background: var(--gk-accent); }
|
|
336
|
+
.theme-vintage .dd-hour-bar.sustaining { background: var(--gk-ink); }
|
|
337
|
+
.theme-vintage .dd-hour-val {
|
|
338
|
+
font-size: 0.55rem;
|
|
339
|
+
color: var(--gk-muted-deep);
|
|
340
|
+
font-weight: 500;
|
|
341
|
+
flex-shrink: 0;
|
|
342
|
+
white-space: nowrap;
|
|
343
|
+
min-width: 52px;
|
|
344
|
+
text-align: right;
|
|
345
|
+
}
|
|
346
|
+
.theme-vintage .dd-hour-n {
|
|
347
|
+
color: var(--gk-muted-deep);
|
|
348
|
+
opacity: 0.7;
|
|
349
|
+
font-size: 0.5rem;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
/* ── Deep dive: activity breakdown ────────────────────────────────────────── */
|
|
353
|
+
.theme-vintage .dd-activity-list { display: flex; flex-direction: column; gap: 3px; }
|
|
354
|
+
.theme-vintage .dd-activity-row { display: flex; align-items: center; gap: 0.5rem; }
|
|
355
|
+
.theme-vintage .dd-activity-name {
|
|
356
|
+
font-size: 0.72rem;
|
|
357
|
+
color: var(--gk-ink);
|
|
358
|
+
font-weight: 500;
|
|
359
|
+
width: 30%;
|
|
360
|
+
max-width: 160px;
|
|
361
|
+
flex-shrink: 0;
|
|
362
|
+
overflow: hidden;
|
|
363
|
+
text-overflow: ellipsis;
|
|
364
|
+
white-space: nowrap;
|
|
365
|
+
cursor: default;
|
|
366
|
+
}
|
|
367
|
+
.theme-vintage .dd-activity-bar-wrap {
|
|
368
|
+
flex: 1;
|
|
369
|
+
min-width: 40px;
|
|
370
|
+
height: 8px;
|
|
371
|
+
background: var(--gk-border);
|
|
372
|
+
border-radius: 4px;
|
|
373
|
+
overflow: hidden;
|
|
374
|
+
display: flex;
|
|
375
|
+
}
|
|
376
|
+
.theme-vintage .dd-activity-bar { height: 100%; transition: width 0.3s; }
|
|
377
|
+
.theme-vintage .dd-activity-bar.deep { background: var(--gk-accent); }
|
|
378
|
+
.theme-vintage .dd-activity-bar.sustaining { background: var(--gk-ink); }
|
|
379
|
+
.theme-vintage .dd-activity-dur {
|
|
380
|
+
font-size: 0.68rem;
|
|
381
|
+
color: var(--gk-muted-deep);
|
|
382
|
+
font-weight: 500;
|
|
383
|
+
min-width: 36px;
|
|
384
|
+
text-align: right;
|
|
385
|
+
font-variant-numeric: tabular-nums;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
/* ── Deep dive: work-type panel ───────────────────────────────────────────── */
|
|
389
|
+
.theme-vintage .dd-type-section { margin-bottom: 0.5rem; }
|
|
390
|
+
.theme-vintage .dd-type-row {
|
|
391
|
+
display: flex;
|
|
392
|
+
align-items: center;
|
|
393
|
+
gap: 0.5rem;
|
|
394
|
+
padding: 0.35rem 0;
|
|
395
|
+
}
|
|
396
|
+
.theme-vintage .dd-type-label {
|
|
397
|
+
font-size: 0.68rem;
|
|
398
|
+
font-weight: 600;
|
|
399
|
+
letter-spacing: 0.02em;
|
|
400
|
+
width: 80px;
|
|
401
|
+
flex-shrink: 0;
|
|
402
|
+
}
|
|
403
|
+
.theme-vintage .dd-type-label.deep { color: var(--gk-ink); }
|
|
404
|
+
.theme-vintage .dd-type-label.sustaining { color: var(--gk-ink); }
|
|
405
|
+
.theme-vintage .dd-type-bar-wrap {
|
|
406
|
+
flex: 1;
|
|
407
|
+
height: 10px;
|
|
408
|
+
background: var(--gk-border);
|
|
409
|
+
border-radius: 5px;
|
|
410
|
+
overflow: hidden;
|
|
411
|
+
position: relative;
|
|
412
|
+
}
|
|
413
|
+
.theme-vintage .dd-type-bar { height: 100%; border-radius: 5px; transition: width 0.3s; }
|
|
414
|
+
.theme-vintage .dd-type-bar.deep { background: var(--gk-accent); }
|
|
415
|
+
.theme-vintage .dd-type-bar.sustaining { background: var(--gk-ink); }
|
|
416
|
+
.theme-vintage .dd-type-dur {
|
|
417
|
+
font-size: 0.75rem;
|
|
418
|
+
font-weight: 600;
|
|
419
|
+
color: var(--gk-ink);
|
|
420
|
+
font-variant-numeric: tabular-nums;
|
|
421
|
+
min-width: 42px;
|
|
422
|
+
text-align: right;
|
|
423
|
+
}
|
|
424
|
+
.theme-vintage .dd-type-pct {
|
|
425
|
+
font-size: 0.68rem;
|
|
426
|
+
color: var(--gk-muted-deep);
|
|
427
|
+
font-weight: 500;
|
|
428
|
+
min-width: 32px;
|
|
429
|
+
text-align: right;
|
|
430
|
+
}
|
|
431
|
+
.theme-vintage .dd-type-total {
|
|
432
|
+
display: flex;
|
|
433
|
+
align-items: center;
|
|
434
|
+
gap: 0.5rem;
|
|
435
|
+
padding-top: 0.35rem;
|
|
436
|
+
margin-top: 0.35rem;
|
|
437
|
+
border-top: 1px solid var(--gk-border-strong);
|
|
438
|
+
}
|
|
439
|
+
.theme-vintage .dd-type-total-label {
|
|
440
|
+
font-size: 0.68rem;
|
|
441
|
+
font-weight: 600;
|
|
442
|
+
color: var(--gk-ink);
|
|
443
|
+
letter-spacing: 0.02em;
|
|
444
|
+
width: 80px;
|
|
445
|
+
flex-shrink: 0;
|
|
446
|
+
}
|
|
447
|
+
.theme-vintage .dd-type-total-dur {
|
|
448
|
+
font-size: 0.75rem;
|
|
449
|
+
font-weight: 600;
|
|
450
|
+
color: var(--gk-ink);
|
|
451
|
+
font-variant-numeric: tabular-nums;
|
|
452
|
+
margin-left: auto;
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
/* ── Deep dive: heatmap ───────────────────────────────────────────────────── */
|
|
456
|
+
.theme-vintage .dd-heatmap-top { flex-shrink: 0; margin-bottom: 8px; }
|
|
457
|
+
.theme-vintage .dd-heatmap-card {
|
|
458
|
+
background: var(--gk-surface-2);
|
|
459
|
+
border: 0.6px solid var(--gk-ink);
|
|
460
|
+
border-radius: 6px;
|
|
461
|
+
padding: 0.75rem;
|
|
462
|
+
margin: 0 auto;
|
|
463
|
+
width: fit-content;
|
|
464
|
+
max-width: 100%;
|
|
465
|
+
}
|
|
466
|
+
.theme-vintage .dd-heatmap-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; }
|
|
467
|
+
.theme-vintage .dd-heatmap-title {
|
|
468
|
+
font-size: 0.8rem;
|
|
469
|
+
color: var(--gk-ink);
|
|
470
|
+
}
|
|
471
|
+
.theme-vintage .dd-heatmap-scroll { flex: 1; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
|
|
472
|
+
.theme-vintage .dd-heatmap-months {
|
|
473
|
+
display: flex;
|
|
474
|
+
font-size: 0.6rem;
|
|
475
|
+
color: var(--gk-muted-deep);
|
|
476
|
+
padding-left: 0;
|
|
477
|
+
margin-bottom: 3px;
|
|
478
|
+
gap: 3px;
|
|
479
|
+
}
|
|
480
|
+
.theme-vintage .dd-heatmap-months span {
|
|
481
|
+
text-align: left;
|
|
482
|
+
width: 17px;
|
|
483
|
+
color: var(--gk-muted-deep);
|
|
484
|
+
font-weight: 500;
|
|
485
|
+
}
|
|
486
|
+
.theme-vintage .dd-heatmap-body { display: flex; gap: 3px; }
|
|
487
|
+
.theme-vintage .dd-heatmap-days {
|
|
488
|
+
display: flex;
|
|
489
|
+
flex-direction: column;
|
|
490
|
+
gap: 3px;
|
|
491
|
+
padding-right: 4px;
|
|
492
|
+
padding-top: 15px;
|
|
493
|
+
justify-content: flex-start;
|
|
494
|
+
flex-shrink: 0;
|
|
495
|
+
}
|
|
496
|
+
.theme-vintage .dd-heatmap-days span {
|
|
497
|
+
font-size: 0.5rem;
|
|
498
|
+
color: var(--gk-muted-deep);
|
|
499
|
+
font-weight: 500;
|
|
500
|
+
height: var(--gk-heatmap-cell);
|
|
501
|
+
line-height: var(--gk-heatmap-cell);
|
|
502
|
+
text-align: right;
|
|
503
|
+
width: 26px;
|
|
504
|
+
}
|
|
505
|
+
.theme-vintage .dd-heatmap-grid { display: flex; gap: 3px; flex-shrink: 0; width: fit-content; }
|
|
506
|
+
.theme-vintage .dd-heatmap-col { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
|
|
507
|
+
.theme-vintage .dd-heatmap-cell {
|
|
508
|
+
width: var(--gk-heatmap-cell);
|
|
509
|
+
min-width: var(--gk-heatmap-cell);
|
|
510
|
+
max-width: var(--gk-heatmap-cell);
|
|
511
|
+
height: var(--gk-heatmap-cell);
|
|
512
|
+
border-radius: 2px;
|
|
513
|
+
background: var(--gk-border);
|
|
514
|
+
flex-shrink: 0;
|
|
515
|
+
}
|
|
516
|
+
.theme-vintage .dd-heatmap-cell[data-level="0"] { background: var(--gk-border); }
|
|
517
|
+
.theme-vintage .dd-heatmap-cell[data-level="1"] { background: rgba(200, 16, 46, 0.25); }
|
|
518
|
+
.theme-vintage .dd-heatmap-cell[data-level="2"] { background: rgba(200, 16, 46, 0.5); }
|
|
519
|
+
.theme-vintage .dd-heatmap-cell[data-level="3"] { background: rgba(200, 16, 46, 0.75); }
|
|
520
|
+
.theme-vintage .dd-heatmap-cell[data-level="4"] { background: var(--gk-accent); }
|
|
521
|
+
.theme-vintage .dd-heatmap-legend {
|
|
522
|
+
display: flex;
|
|
523
|
+
align-items: center;
|
|
524
|
+
justify-content: flex-end;
|
|
525
|
+
gap: 3px;
|
|
526
|
+
margin-top: 6px;
|
|
527
|
+
font-size: 0.55rem;
|
|
528
|
+
color: var(--gk-muted-deep);
|
|
529
|
+
font-weight: 500;
|
|
530
|
+
}
|
|
531
|
+
.theme-vintage .dd-heatmap-legend .dd-heatmap-cell { width: 12px; height: 12px; padding-bottom: 0; cursor: default; }
|
|
532
|
+
.theme-vintage .dd-heatmap-cell[title] { cursor: pointer; }
|
|
533
|
+
|
|
534
|
+
/* ── Deep dive: empty state ───────────────────────────────────────────────── */
|
|
535
|
+
.theme-vintage .dd-empty { text-align: center; color: var(--gk-muted-deep); font-size: 0.8rem; padding: 2rem 0; }
|
|
536
|
+
|
|
537
|
+
/* ── Fraunces display serif for the deep-dive headings ────────────────────── */
|
|
538
|
+
.theme-vintage .dd-title,
|
|
539
|
+
.theme-vintage .dd-section-title,
|
|
540
|
+
.theme-vintage .dd-heatmap-title {
|
|
541
|
+
font-family: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
|
|
542
|
+
font-weight: 500;
|
|
543
|
+
font-optical-sizing: auto;
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
/* ── Media variants ───────────────────────────────────────────────────────── */
|
|
547
|
+
/* Wide external monitors: widen only the signed-in frame so the nav line and
|
|
548
|
+
columns stay in register; landing <nav> stays at 1100px. */
|
|
549
|
+
@media (min-width: 1600px) {
|
|
550
|
+
.theme-vintage #appNav { max-width: 1600px; }
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
@media (max-width: 768px) {
|
|
554
|
+
.theme-vintage nav { padding: 10px 20px; }
|
|
555
|
+
.theme-vintage nav::after { left: 20px; right: 20px; }
|
|
556
|
+
.theme-vintage nav .nav-date { font-size: 0.65rem; }
|
|
557
|
+
/* Let each clock half hug its text instead of the fixed width on narrow phones. */
|
|
558
|
+
.theme-vintage nav .nav-date .clock-half { width: auto; }
|
|
559
|
+
.theme-vintage .nav-logo-btn { font-size: 1rem; }
|
|
560
|
+
|
|
561
|
+
.theme-vintage .dd-nav { padding: 0 20px 10px; }
|
|
562
|
+
.theme-vintage .dd-nav::after { left: 20px; right: 20px; }
|
|
563
|
+
.theme-vintage .dd-nav .nav-date { display: none; }
|
|
564
|
+
.theme-vintage .dd-header { padding: 0 20px; }
|
|
565
|
+
.theme-vintage .dd-header .dd-title { display: none; }
|
|
566
|
+
.theme-vintage .dd-header .dd-range-toggle { margin-left: auto; }
|
|
567
|
+
.theme-vintage .dd-activity-name { width: 45%; max-width: none; }
|
|
568
|
+
.theme-vintage .dd-overlay-body { padding: 0 20px; }
|
|
569
|
+
.theme-vintage .dd-overlay-grid { grid-template-columns: 1fr; }
|
|
570
|
+
.theme-vintage .dd-stats { grid-template-columns: repeat(2, 1fr); }
|
|
571
|
+
.theme-vintage .dd-tod-grid { grid-template-columns: 1fr; }
|
|
572
|
+
.theme-vintage .dd-hour-grid { overflow: visible; }
|
|
573
|
+
.theme-vintage .dd-hour-row { height: 12px; }
|
|
574
|
+
.theme-vintage .dd-hour-label { text-align: left; }
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
/* Prevent sticky hover states on touch devices. */
|
|
578
|
+
@media (hover: none) {
|
|
579
|
+
.theme-vintage .auth-avatar:hover { opacity: 1; }
|
|
580
|
+
.theme-vintage .nav-logo-btn:hover { opacity: 0.8; }
|
|
581
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@gemka/design",
|
|
3
|
+
"version": "0.3.0",
|
|
4
|
+
"description": "Canonical GemKa design tokens (cream paper, oxblood accent, warm neutrals, Inter + Fraunces).",
|
|
5
|
+
"license": "UNLICENSED",
|
|
6
|
+
"files": [
|
|
7
|
+
"tokens.css",
|
|
8
|
+
"chrome.css"
|
|
9
|
+
],
|
|
10
|
+
"exports": {
|
|
11
|
+
"./tokens.css": "./tokens.css",
|
|
12
|
+
"./chrome.css": "./chrome.css"
|
|
13
|
+
}
|
|
14
|
+
}
|
package/tokens.css
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* Surfaces — warm paper */
|
|
3
|
+
--gk-bg: #f1e9d2;
|
|
4
|
+
--gk-paper: #faf6ea;
|
|
5
|
+
--gk-surface-2: #ece3cb;
|
|
6
|
+
--gk-surface-3: #e6ddc4; /* darkest warm surface — reads against the page bg,
|
|
7
|
+
e.g. an empty chart-track channel */
|
|
8
|
+
|
|
9
|
+
/* Ink — warm, soft contrast (never pure black) */
|
|
10
|
+
--gk-ink: #1c1a14;
|
|
11
|
+
--gk-muted: #6b6354;
|
|
12
|
+
--gk-muted-deep: #4a4438;
|
|
13
|
+
--gk-faint: #9c8f6f;
|
|
14
|
+
|
|
15
|
+
/* Borders */
|
|
16
|
+
--gk-border: #d9cba8;
|
|
17
|
+
--gk-border-strong: #b8a87e;
|
|
18
|
+
|
|
19
|
+
/* Accent — oxblood */
|
|
20
|
+
--gk-accent: #c8102e;
|
|
21
|
+
--gk-accent-deep: #960c22;
|
|
22
|
+
--gk-accent-wash: rgba(200, 16, 46, 0.06);
|
|
23
|
+
--gk-accent-wash-hover: rgba(200, 16, 46, 0.10);
|
|
24
|
+
|
|
25
|
+
/* Shared row-hover tint */
|
|
26
|
+
--gk-hover-cream: #f0ece0;
|
|
27
|
+
|
|
28
|
+
/* Type */
|
|
29
|
+
--gk-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
30
|
+
--gk-font-serif: "Fraunces", Georgia, "Times New Roman", serif;
|
|
31
|
+
|
|
32
|
+
/* Chrome primitives: non-color dimensions consumed by chrome.css */
|
|
33
|
+
--gk-nav-rule: 1px; /* nav / dd-nav oxblood underline (base 2px folds to the vintage 1px) */
|
|
34
|
+
--gk-avatar: 30px; /* auth-avatar diameter */
|
|
35
|
+
--gk-clock-half: 5.5rem; /* nav clock date/time half width */
|
|
36
|
+
--gk-heatmap-cell: 14px; /* deep-dive heatmap cell + day-label row height */
|
|
37
|
+
--gk-stat-card-pad: 0.5rem 0.65rem; /* deep-dive stat / peak-hour card padding */
|
|
38
|
+
}
|