@qball-inc/tokens 0.1.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/colors_and_type.css +454 -0
- package/components.css +848 -0
- package/package.json +36 -0
- package/theme.css +121 -0
- package/tokens.json +93 -0
|
@@ -0,0 +1,454 @@
|
|
|
1
|
+
/* ============================================================
|
|
2
|
+
ashaykubal.com — Colors & Type
|
|
3
|
+
Single source of truth for tokens used across the system.
|
|
4
|
+
============================================================ */
|
|
5
|
+
|
|
6
|
+
/* ---------- Display font ----------
|
|
7
|
+
The display family ships as Fira Code in this public repository.
|
|
8
|
+
The system's intended display face is Berkeley Mono (a commercial
|
|
9
|
+
typeface, https://usgraphics.com), which is NOT redistributed here.
|
|
10
|
+
To restore it: obtain a license, add the woff2 files under fonts/,
|
|
11
|
+
re-add the @font-face declarations, and put 'Berkeley Mono' first
|
|
12
|
+
in --font-display below. See README.md -> Display font.
|
|
13
|
+
----------------------------------------------------------------- */
|
|
14
|
+
|
|
15
|
+
/* ---------- Google Fonts (loaded by host page) ----------
|
|
16
|
+
Pages including this stylesheet should also import:
|
|
17
|
+
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Syne:wght@400;500;700;800&family=Instrument+Serif&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
18
|
+
--------------------------------------------------------- */
|
|
19
|
+
|
|
20
|
+
:root {
|
|
21
|
+
/* ===== Font families ===== */
|
|
22
|
+
--font-display: 'Fira Code', 'SF Mono', 'Cascadia Code', monospace;
|
|
23
|
+
--font-heading: 'Fira Code', 'SF Mono', 'Cascadia Code', monospace;
|
|
24
|
+
--font-body: 'Syne', 'Inter', system-ui, sans-serif;
|
|
25
|
+
--font-quote: 'Instrument Serif', 'Georgia', serif;
|
|
26
|
+
--font-code: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
|
|
27
|
+
--font-ui: 'Fira Code', 'SF Mono', monospace;
|
|
28
|
+
|
|
29
|
+
/* ===== Base type sizes ===== */
|
|
30
|
+
--size-h1: 56px;
|
|
31
|
+
--size-h2: 36px;
|
|
32
|
+
--size-h3: 24px;
|
|
33
|
+
--size-h4: 18px;
|
|
34
|
+
--size-body: 16px;
|
|
35
|
+
--size-quote: 20px;
|
|
36
|
+
--size-code: 14px;
|
|
37
|
+
--size-caption: 12px;
|
|
38
|
+
--size-tag: 11px;
|
|
39
|
+
--size-button: 13px;
|
|
40
|
+
|
|
41
|
+
/* ===== Light theme (default) ===== */
|
|
42
|
+
--bg-primary: #F7F3EE; /* Parchment */
|
|
43
|
+
--bg-surface: #EDE8E1; /* Surface */
|
|
44
|
+
--text-primary: #141414; /* Void */
|
|
45
|
+
--text-secondary: #57534E; /* Earth */
|
|
46
|
+
--text-muted: #78716C; /* Stone */
|
|
47
|
+
--color-signal: #3F6B5B; /* Sage */
|
|
48
|
+
--color-highlight: #B45309; /* Amber */
|
|
49
|
+
--color-error: #991B1B;
|
|
50
|
+
--color-success: #3F6B5B;
|
|
51
|
+
--color-warning: #B45309;
|
|
52
|
+
--color-info: #78716C;
|
|
53
|
+
--border-default: rgba(0, 0, 0, 0.06);
|
|
54
|
+
--border-strong: rgba(0, 0, 0, 0.14);
|
|
55
|
+
--signal-bg: rgba(63, 107, 91, 0.10);
|
|
56
|
+
--highlight-bg: rgba(180, 83, 9, 0.10);
|
|
57
|
+
/* Modal/overlay scrim — the brand's no-shadow lift partner (dims the page
|
|
58
|
+
behind a dialog). Theme-independent dark veil, matching the preview cards;
|
|
59
|
+
consumed by the .scrim class and the Scrim overlay component. */
|
|
60
|
+
--color-scrim: rgba(20, 20, 20, 0.45);
|
|
61
|
+
|
|
62
|
+
/* ===== Finance / data palette (traditional hues, warm-tuned) =====
|
|
63
|
+
Recognizable green/red/gold/blue for data semantics ONLY (gains,
|
|
64
|
+
losses, caution, info). Sage stays the brand signal for wayfinding;
|
|
65
|
+
these never take over links/CTAs. Tuned to sit on warm parchment. */
|
|
66
|
+
--data-up: #2E7D4F; /* Gain green */
|
|
67
|
+
--data-down: #B5342B; /* Loss red */
|
|
68
|
+
--data-warn: #9A7D0F; /* Caution gold */
|
|
69
|
+
--data-info: #2C6395; /* Info blue */
|
|
70
|
+
--data-flat: #78716C; /* Unchanged / neutral (Stone) */
|
|
71
|
+
--data-up-bg: rgba(46, 125, 79, 0.10);
|
|
72
|
+
--data-down-bg: rgba(181, 52, 43, 0.10);
|
|
73
|
+
--data-warn-bg: rgba(154, 125, 15, 0.12);
|
|
74
|
+
--data-info-bg: rgba(44, 99, 149, 0.10);
|
|
75
|
+
|
|
76
|
+
/* Annotation accent (grounding guardrail) — deliberately OUTSIDE the
|
|
77
|
+
finance palette so source/unverified never read as a price color.
|
|
78
|
+
Cool slate for cited sources; amber (brand highlight) for unverified. */
|
|
79
|
+
--anno-source: #4E6577;
|
|
80
|
+
--anno-source-bg: rgba(78, 101, 119, 0.12);
|
|
81
|
+
|
|
82
|
+
/* ===== Spacing scale (8px base) ===== */
|
|
83
|
+
--space-xs: 4px;
|
|
84
|
+
--space-sm: 8px;
|
|
85
|
+
--space-md: 16px;
|
|
86
|
+
--space-lg: 32px;
|
|
87
|
+
--space-xl: 64px;
|
|
88
|
+
--space-2xl: 128px;
|
|
89
|
+
|
|
90
|
+
/* ===== Radii ===== */
|
|
91
|
+
--radius-sm: 4px;
|
|
92
|
+
--radius-md: 8px;
|
|
93
|
+
--radius-lg: 12px;
|
|
94
|
+
|
|
95
|
+
/* ===== Content widths ===== */
|
|
96
|
+
--width-body: 720px;
|
|
97
|
+
--width-page: 1200px;
|
|
98
|
+
--width-code: 800px;
|
|
99
|
+
--width-quote: 480px;
|
|
100
|
+
|
|
101
|
+
/* ===== Motion ===== */
|
|
102
|
+
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
|
103
|
+
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
104
|
+
--dur-fast: 120ms;
|
|
105
|
+
--dur-base: 200ms;
|
|
106
|
+
--dur-slow: 360ms;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
[data-theme="dark"] {
|
|
110
|
+
--bg-primary: #1E1D1B; /* Charcoal */
|
|
111
|
+
--bg-surface: #2A2826;
|
|
112
|
+
--text-primary: #E7E0D6; /* Bone */
|
|
113
|
+
--text-secondary: #A8A29E; /* Stone */
|
|
114
|
+
--text-muted: #78716C; /* Ash */
|
|
115
|
+
--color-signal: #5B9E87; /* Sage (light) */
|
|
116
|
+
--color-highlight: #D97706; /* Amber (light) */
|
|
117
|
+
--color-error: #EF4444;
|
|
118
|
+
--color-success: #5B9E87;
|
|
119
|
+
--color-warning: #D97706;
|
|
120
|
+
--color-info: #A8A29E;
|
|
121
|
+
--border-default: rgba(255, 255, 255, 0.06);
|
|
122
|
+
--border-strong: rgba(255, 255, 255, 0.14);
|
|
123
|
+
--signal-bg: rgba(91, 158, 135, 0.15);
|
|
124
|
+
--highlight-bg: rgba(217, 119, 6, 0.15);
|
|
125
|
+
|
|
126
|
+
/* Finance / data palette — luminous for charcoal */
|
|
127
|
+
--data-up: #4FB07A;
|
|
128
|
+
--data-down: #E2705F;
|
|
129
|
+
--data-warn: #D9B43C;
|
|
130
|
+
--data-info: #5B9BD6;
|
|
131
|
+
--data-flat: #A8A29E;
|
|
132
|
+
--data-up-bg: rgba(79, 176, 122, 0.15);
|
|
133
|
+
--data-down-bg: rgba(226, 112, 95, 0.15);
|
|
134
|
+
--data-warn-bg: rgba(217, 180, 60, 0.16);
|
|
135
|
+
--data-info-bg: rgba(91, 155, 214, 0.15);
|
|
136
|
+
--anno-source: #93A7B5;
|
|
137
|
+
--anno-source-bg: rgba(147, 167, 181, 0.16);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
@media (prefers-color-scheme: dark) {
|
|
141
|
+
:root:not([data-theme="light"]) {
|
|
142
|
+
--bg-primary: #1E1D1B;
|
|
143
|
+
--bg-surface: #2A2826;
|
|
144
|
+
--text-primary: #E7E0D6;
|
|
145
|
+
--text-secondary: #A8A29E;
|
|
146
|
+
--text-muted: #78716C;
|
|
147
|
+
--color-signal: #5B9E87;
|
|
148
|
+
--color-highlight: #D97706;
|
|
149
|
+
--color-error: #EF4444;
|
|
150
|
+
--color-success: #5B9E87;
|
|
151
|
+
--color-warning: #D97706;
|
|
152
|
+
--color-info: #A8A29E;
|
|
153
|
+
--border-default: rgba(255, 255, 255, 0.06);
|
|
154
|
+
--border-strong: rgba(255, 255, 255, 0.14);
|
|
155
|
+
--signal-bg: rgba(91, 158, 135, 0.15);
|
|
156
|
+
--highlight-bg: rgba(217, 119, 6, 0.15);
|
|
157
|
+
--data-up: #4FB07A;
|
|
158
|
+
--data-down: #E2705F;
|
|
159
|
+
--data-warn: #D9B43C;
|
|
160
|
+
--data-info: #5B9BD6;
|
|
161
|
+
--data-flat: #A8A29E;
|
|
162
|
+
--data-up-bg: rgba(79, 176, 122, 0.15);
|
|
163
|
+
--data-down-bg: rgba(226, 112, 95, 0.15);
|
|
164
|
+
--data-warn-bg: rgba(217, 180, 60, 0.16);
|
|
165
|
+
--data-info-bg: rgba(91, 155, 214, 0.15);
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
/* ============================================================
|
|
170
|
+
Semantic element styles
|
|
171
|
+
============================================================ */
|
|
172
|
+
|
|
173
|
+
html, body {
|
|
174
|
+
background: var(--bg-primary);
|
|
175
|
+
color: var(--text-secondary);
|
|
176
|
+
font-family: var(--font-body);
|
|
177
|
+
font-size: var(--size-body);
|
|
178
|
+
line-height: 1.75;
|
|
179
|
+
-webkit-font-smoothing: antialiased;
|
|
180
|
+
text-rendering: optimizeLegibility;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
/* ---------- Scrollbars (theme-aware) ----------
|
|
184
|
+
Token-driven so the scrollbar tracks light/dark with the rest of
|
|
185
|
+
the UI instead of staying the OS default. */
|
|
186
|
+
html {
|
|
187
|
+
scrollbar-color: var(--text-muted) var(--bg-surface); /* Firefox: thumb track */
|
|
188
|
+
scrollbar-width: thin;
|
|
189
|
+
}
|
|
190
|
+
::-webkit-scrollbar { width: 12px; height: 12px; }
|
|
191
|
+
::-webkit-scrollbar-track { background: var(--bg-surface); }
|
|
192
|
+
::-webkit-scrollbar-thumb {
|
|
193
|
+
background: var(--text-muted);
|
|
194
|
+
border: 3px solid var(--bg-surface); /* inset thumb via matching border */
|
|
195
|
+
border-radius: var(--radius-sm);
|
|
196
|
+
}
|
|
197
|
+
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
|
|
198
|
+
|
|
199
|
+
h1, .h1 {
|
|
200
|
+
font-family: var(--font-display);
|
|
201
|
+
font-weight: 700;
|
|
202
|
+
font-size: var(--size-h1);
|
|
203
|
+
line-height: 1.0;
|
|
204
|
+
letter-spacing: -2px;
|
|
205
|
+
color: var(--text-primary);
|
|
206
|
+
margin: 0 0 var(--space-lg);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
h2, .h2 {
|
|
210
|
+
font-family: var(--font-display);
|
|
211
|
+
font-weight: 600;
|
|
212
|
+
font-size: var(--size-h2);
|
|
213
|
+
line-height: 1.1;
|
|
214
|
+
letter-spacing: -1px;
|
|
215
|
+
color: var(--text-primary);
|
|
216
|
+
margin: 0 0 var(--space-md);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
h3, .h3 {
|
|
220
|
+
font-family: var(--font-heading);
|
|
221
|
+
font-weight: 600;
|
|
222
|
+
font-size: var(--size-h3);
|
|
223
|
+
line-height: 1.2;
|
|
224
|
+
letter-spacing: -0.5px;
|
|
225
|
+
color: var(--text-primary);
|
|
226
|
+
margin: 0 0 var(--space-md);
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
h4, .h4 {
|
|
230
|
+
font-family: var(--font-heading);
|
|
231
|
+
font-weight: 500;
|
|
232
|
+
font-size: var(--size-h4);
|
|
233
|
+
line-height: 1.3;
|
|
234
|
+
letter-spacing: 0;
|
|
235
|
+
color: var(--text-primary);
|
|
236
|
+
margin: 0 0 var(--space-sm);
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
p, .body {
|
|
240
|
+
font-family: var(--font-body);
|
|
241
|
+
font-size: var(--size-body);
|
|
242
|
+
line-height: 1.75;
|
|
243
|
+
color: var(--text-secondary);
|
|
244
|
+
margin: 0 0 var(--space-md);
|
|
245
|
+
max-width: var(--width-body);
|
|
246
|
+
text-wrap: pretty;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
p strong, .body strong { font-weight: 500; color: var(--text-primary); }
|
|
250
|
+
|
|
251
|
+
blockquote, .pullquote {
|
|
252
|
+
font-family: var(--font-quote);
|
|
253
|
+
font-style: italic;
|
|
254
|
+
font-weight: 400;
|
|
255
|
+
font-size: var(--size-quote);
|
|
256
|
+
line-height: 1.45;
|
|
257
|
+
color: var(--text-primary);
|
|
258
|
+
border-left: 3px solid var(--color-signal);
|
|
259
|
+
border-radius: 0;
|
|
260
|
+
padding: 0 0 0 var(--space-md);
|
|
261
|
+
max-width: var(--width-quote);
|
|
262
|
+
margin: var(--space-lg) 0;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
code, .code {
|
|
266
|
+
font-family: var(--font-code);
|
|
267
|
+
font-size: var(--size-code);
|
|
268
|
+
color: var(--text-primary);
|
|
269
|
+
background: var(--signal-bg);
|
|
270
|
+
padding: 1px 6px;
|
|
271
|
+
border-radius: var(--radius-sm);
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
pre, .codeblock {
|
|
275
|
+
font-family: var(--font-code);
|
|
276
|
+
font-size: var(--size-code);
|
|
277
|
+
line-height: 1.7;
|
|
278
|
+
color: var(--text-primary);
|
|
279
|
+
background: var(--bg-surface);
|
|
280
|
+
border-left: 3px solid var(--color-signal);
|
|
281
|
+
border-radius: 0;
|
|
282
|
+
padding: 20px 24px;
|
|
283
|
+
margin: var(--space-md) 0;
|
|
284
|
+
overflow-x: auto;
|
|
285
|
+
max-width: var(--width-code);
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
pre code {
|
|
289
|
+
background: transparent;
|
|
290
|
+
padding: 0;
|
|
291
|
+
border-radius: 0;
|
|
292
|
+
font-size: inherit;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
a, .link {
|
|
296
|
+
color: var(--color-signal);
|
|
297
|
+
text-decoration: none;
|
|
298
|
+
border-bottom: 1px solid transparent;
|
|
299
|
+
transition: border-color var(--dur-base) var(--ease-out),
|
|
300
|
+
color var(--dur-base) var(--ease-out);
|
|
301
|
+
}
|
|
302
|
+
a:hover, .link:hover {
|
|
303
|
+
color: var(--color-highlight);
|
|
304
|
+
border-bottom-color: currentColor;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.caption, .meta {
|
|
308
|
+
font-family: var(--font-ui);
|
|
309
|
+
font-size: var(--size-caption);
|
|
310
|
+
line-height: 1.4;
|
|
311
|
+
letter-spacing: 1.25px;
|
|
312
|
+
text-transform: uppercase;
|
|
313
|
+
color: var(--text-muted);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.tag {
|
|
317
|
+
display: inline-block;
|
|
318
|
+
font-family: var(--font-ui);
|
|
319
|
+
font-size: var(--size-tag);
|
|
320
|
+
line-height: 1;
|
|
321
|
+
letter-spacing: 0;
|
|
322
|
+
padding: 4px 10px;
|
|
323
|
+
border-radius: var(--radius-sm);
|
|
324
|
+
color: var(--color-signal);
|
|
325
|
+
background: var(--signal-bg);
|
|
326
|
+
}
|
|
327
|
+
.tag--featured {
|
|
328
|
+
color: var(--color-highlight);
|
|
329
|
+
background: var(--highlight-bg);
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.btn {
|
|
333
|
+
display: inline-flex;
|
|
334
|
+
align-items: center;
|
|
335
|
+
gap: var(--space-sm);
|
|
336
|
+
font-family: var(--font-ui);
|
|
337
|
+
font-size: var(--size-button);
|
|
338
|
+
font-weight: 500;
|
|
339
|
+
line-height: 1;
|
|
340
|
+
padding: 8px 18px;
|
|
341
|
+
border-radius: var(--radius-sm);
|
|
342
|
+
border: 1px solid transparent;
|
|
343
|
+
cursor: pointer;
|
|
344
|
+
transition: opacity var(--dur-base) var(--ease-out),
|
|
345
|
+
background var(--dur-base) var(--ease-out),
|
|
346
|
+
color var(--dur-base) var(--ease-out);
|
|
347
|
+
}
|
|
348
|
+
.btn--primary {
|
|
349
|
+
background: var(--color-signal);
|
|
350
|
+
color: var(--bg-primary);
|
|
351
|
+
}
|
|
352
|
+
.btn--primary:hover { opacity: 0.88; }
|
|
353
|
+
.btn--secondary {
|
|
354
|
+
background: transparent;
|
|
355
|
+
color: var(--color-signal);
|
|
356
|
+
border-color: var(--color-signal);
|
|
357
|
+
}
|
|
358
|
+
.btn--secondary:hover { background: var(--signal-bg); }
|
|
359
|
+
.btn--tertiary {
|
|
360
|
+
background: transparent;
|
|
361
|
+
color: var(--color-highlight);
|
|
362
|
+
border-color: var(--color-highlight);
|
|
363
|
+
}
|
|
364
|
+
.btn--tertiary:hover { background: var(--highlight-bg); }
|
|
365
|
+
.btn:active { transform: translateY(1px); }
|
|
366
|
+
|
|
367
|
+
/* ----- Added button variants + states ----- */
|
|
368
|
+
.btn--ghost {
|
|
369
|
+
background: transparent;
|
|
370
|
+
color: var(--text-secondary);
|
|
371
|
+
border-color: transparent;
|
|
372
|
+
}
|
|
373
|
+
.btn--ghost:hover { background: var(--bg-surface); color: var(--color-signal); }
|
|
374
|
+
.btn--destructive {
|
|
375
|
+
background: var(--color-error);
|
|
376
|
+
color: var(--bg-primary);
|
|
377
|
+
}
|
|
378
|
+
.btn--destructive:hover { opacity: 0.88; }
|
|
379
|
+
.btn--icon {
|
|
380
|
+
padding: 8px;
|
|
381
|
+
width: 34px; height: 34px;
|
|
382
|
+
justify-content: center;
|
|
383
|
+
}
|
|
384
|
+
.btn--icon.btn--secondary, .btn--icon.btn--ghost { width: 34px; height: 34px; }
|
|
385
|
+
|
|
386
|
+
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] {
|
|
387
|
+
opacity: 0.4;
|
|
388
|
+
cursor: not-allowed;
|
|
389
|
+
pointer-events: none;
|
|
390
|
+
}
|
|
391
|
+
.btn:disabled:active, .btn[disabled]:active { transform: none; }
|
|
392
|
+
|
|
393
|
+
/* loading: hide the label, show a spinner. The one sanctioned loop —
|
|
394
|
+
a transient state indicator, not idle decoration. */
|
|
395
|
+
.btn--loading { position: relative; color: transparent !important; pointer-events: none; }
|
|
396
|
+
.btn--loading > * { visibility: hidden; }
|
|
397
|
+
.btn--loading::after {
|
|
398
|
+
content: "";
|
|
399
|
+
position: absolute;
|
|
400
|
+
width: 14px; height: 14px;
|
|
401
|
+
top: calc(50% - 7px); left: calc(50% - 7px);
|
|
402
|
+
border: 1.5px solid currentColor;
|
|
403
|
+
border-top-color: transparent;
|
|
404
|
+
border-radius: 50%;
|
|
405
|
+
color: var(--bg-primary);
|
|
406
|
+
animation: btn-spin 0.7s linear infinite;
|
|
407
|
+
}
|
|
408
|
+
.btn--secondary.btn--loading::after,
|
|
409
|
+
.btn--tertiary.btn--loading::after,
|
|
410
|
+
.btn--ghost.btn--loading::after { color: var(--color-signal); }
|
|
411
|
+
@keyframes btn-spin { to { transform: rotate(360deg); } }
|
|
412
|
+
/* Reduced-motion: stop the loop entirely (static ring, no spin) — NFR5. The
|
|
413
|
+
button is still visibly disabled (transparent label, blocked pointer). */
|
|
414
|
+
@media (prefers-reduced-motion: reduce) {
|
|
415
|
+
.btn--loading::after { animation: none; }
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
.card {
|
|
419
|
+
background: var(--bg-surface);
|
|
420
|
+
border: 0.5px solid var(--border-default);
|
|
421
|
+
border-radius: var(--radius-md);
|
|
422
|
+
padding: var(--space-md);
|
|
423
|
+
}
|
|
424
|
+
/* Interactive / selectable card states. A selectable card lifts its
|
|
425
|
+
border to sage on hover; the selected card carries a sage border + faint sage
|
|
426
|
+
tint. Static content cards (the default) keep the plain .card border. Lift via
|
|
427
|
+
border weight + tonal surface (No-Shadows); the 0.5px hairline width is kept. */
|
|
428
|
+
.card--interactive { cursor: pointer; }
|
|
429
|
+
.card--interactive:hover { border-color: var(--color-signal); }
|
|
430
|
+
.card--selected { border-color: var(--color-signal); background: var(--signal-bg); }
|
|
431
|
+
|
|
432
|
+
hr, .rule {
|
|
433
|
+
border: 0;
|
|
434
|
+
border-top: 1px solid var(--border-default);
|
|
435
|
+
margin: var(--space-lg) 0;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
::selection {
|
|
439
|
+
background: var(--signal-bg);
|
|
440
|
+
color: var(--text-primary);
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
/* ===== Numerics =====
|
|
444
|
+
Berkeley Mono for figures — keeps the display voice on prices, OHLC,
|
|
445
|
+
percentages. Tabular by default so columns of digits align. */
|
|
446
|
+
.num, .tabular {
|
|
447
|
+
font-family: var(--font-display);
|
|
448
|
+
font-variant-numeric: tabular-nums;
|
|
449
|
+
font-feature-settings: "tnum" 1;
|
|
450
|
+
letter-spacing: 0;
|
|
451
|
+
}
|
|
452
|
+
.num--up { color: var(--data-up); }
|
|
453
|
+
.num--down { color: var(--data-down); }
|
|
454
|
+
.num--flat { color: var(--data-flat); }
|