@compose-market/theme 0.0.75 → 0.0.81

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.
@@ -4,13 +4,14 @@ export const shellCss = `/**
4
4
  */
5
5
 
6
6
  :root {
7
- --cm-shell-glow-primary: hsl(var(--primary) / 0.32);
8
- --cm-shell-glow-accent: hsl(314 100% 64% / 0.18);
9
- --cm-shell-surface: linear-gradient(180deg, hsl(var(--card) / 0.9), hsl(var(--background) / 0.92));
10
- --cm-shell-border: hsl(var(--border) / 0.78);
7
+ --cm-shell-glow-primary: hsl(var(--primary) / 0.24);
8
+ --cm-shell-glow-accent: hsl(var(--accent) / 0.14);
9
+ --cm-shell-surface:
10
+ linear-gradient(180deg, hsl(var(--card) / 0.96), hsl(var(--card) / 0.82));
11
+ --cm-shell-border: hsl(var(--border) / 0.92);
11
12
  --cm-shell-shadow:
12
- 0 24px 72px hsl(240 30% 2% / 0.45),
13
- inset 0 1px 0 hsl(0 0% 100% / 0.05);
13
+ 0 16px 48px hsl(240 30% 2% / 0.38),
14
+ inset 0 1px 0 hsl(0 0% 100% / 0.04);
14
15
  }
15
16
 
16
17
  .cm-shell-stack {
@@ -31,27 +32,31 @@ export const shellCss = `/**
31
32
  align-items: center;
32
33
  justify-content: center;
33
34
  gap: 0.55rem;
34
- min-height: 2.5rem;
35
- padding: 0 1rem;
36
- border-radius: 0.55rem;
37
- border: 1px solid transparent;
38
- background: transparent;
35
+ min-height: 2.3rem;
36
+ padding: 0 0.95rem;
37
+ border-radius: var(--radius, 0.25rem);
38
+ border: 1px solid hsl(var(--border) / 0.88);
39
+ background: hsl(var(--card) / 0.92);
39
40
  color: hsl(var(--foreground));
40
- font-family: var(--font-sans), sans-serif;
41
- font-size: 0.9rem;
41
+ font-family: var(--font-mono), monospace;
42
+ font-size: 0.76rem;
42
43
  font-weight: 600;
44
+ letter-spacing: 0.08em;
43
45
  line-height: 1;
46
+ text-transform: uppercase;
44
47
  cursor: pointer;
45
48
  transition:
46
- transform 180ms ease,
47
- background-color 180ms ease,
49
+ transform 160ms ease,
50
+ background-color 160ms ease,
48
51
  border-color 180ms ease,
49
52
  color 180ms ease,
50
53
  box-shadow 180ms ease;
54
+ box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.03);
51
55
  }
52
56
 
53
57
  .cm-shell-button:hover:not(:disabled) {
54
58
  transform: translateY(-1px);
59
+ border-color: hsl(var(--primary) / 0.38);
55
60
  }
56
61
 
57
62
  .cm-shell-button:disabled {
@@ -61,42 +66,45 @@ export const shellCss = `/**
61
66
 
62
67
  .cm-shell-button--primary {
63
68
  background:
64
- linear-gradient(135deg, hsl(var(--primary) / 0.9), hsl(314 100% 64% / 0.78));
69
+ linear-gradient(180deg, hsl(var(--primary)), hsl(188 95% 39%));
65
70
  color: hsl(var(--primary-foreground));
66
- border-color: hsl(var(--primary) / 0.42);
67
- box-shadow: 0 0 24px var(--cm-shell-glow-primary);
71
+ border-color: hsl(var(--primary) / 0.56);
72
+ box-shadow:
73
+ 0 0 0 1px hsl(var(--primary) / 0.16),
74
+ 0 0 20px var(--cm-shell-glow-primary);
68
75
  }
69
76
 
70
77
  .cm-shell-button--primary:hover:not(:disabled) {
71
78
  box-shadow:
72
- 0 0 30px var(--cm-shell-glow-primary),
73
- 0 0 22px var(--cm-shell-glow-accent);
79
+ 0 0 0 1px hsl(var(--primary) / 0.18),
80
+ 0 0 24px var(--cm-shell-glow-primary),
81
+ 0 0 18px var(--cm-shell-glow-accent);
74
82
  }
75
83
 
76
84
  .cm-shell-button--secondary {
77
- background: hsl(var(--muted) / 0.32);
85
+ background: hsl(var(--muted) / 0.28);
78
86
  border-color: hsl(var(--border) / 0.88);
79
87
  }
80
88
 
81
89
  .cm-shell-button--secondary:hover:not(:disabled) {
82
- border-color: hsl(var(--primary) / 0.4);
83
- background: hsl(var(--muted) / 0.52);
90
+ background: hsl(var(--muted) / 0.54);
84
91
  }
85
92
 
86
93
  .cm-shell-button--ghost {
87
94
  background: transparent;
88
95
  border-color: transparent;
89
96
  color: hsl(var(--muted-foreground));
97
+ box-shadow: none;
90
98
  }
91
99
 
92
100
  .cm-shell-button--ghost:hover:not(:disabled) {
93
101
  color: hsl(var(--foreground));
94
- background: hsl(var(--muted) / 0.2);
102
+ background: hsl(var(--muted) / 0.24);
95
103
  }
96
104
 
97
105
  .cm-shell-button--danger {
98
106
  background: hsl(var(--destructive) / 0.12);
99
- border-color: hsl(var(--destructive) / 0.3);
107
+ border-color: hsl(var(--destructive) / 0.42);
100
108
  color: hsl(var(--destructive-foreground));
101
109
  }
102
110
 
@@ -106,17 +114,18 @@ export const shellCss = `/**
106
114
 
107
115
  .cm-shell-button--sm {
108
116
  min-height: 2rem;
109
- padding: 0 0.8rem;
110
- font-size: 0.78rem;
117
+ padding: 0 0.75rem;
118
+ font-size: 0.7rem;
111
119
  }
112
120
 
113
121
  .cm-shell-button--lg {
114
- min-height: 2.9rem;
115
- padding: 0 1.15rem;
122
+ min-height: 2.65rem;
123
+ padding: 0 1.1rem;
124
+ font-size: 0.82rem;
116
125
  }
117
126
 
118
127
  .cm-shell-button--icon {
119
- width: 2.5rem;
128
+ width: 2.3rem;
120
129
  padding: 0;
121
130
  }
122
131
 
@@ -124,14 +133,15 @@ export const shellCss = `/**
124
133
  display: inline-flex;
125
134
  align-items: center;
126
135
  gap: 0.45rem;
127
- min-height: 1.9rem;
128
- padding: 0 0.8rem;
136
+ min-height: 1.75rem;
137
+ padding: 0 0.72rem;
129
138
  border-radius: 999px;
130
- border: 1px solid hsl(var(--border) / 0.72);
131
- background: hsl(var(--muted) / 0.28);
139
+ border: 1px solid hsl(var(--primary) / 0.18);
140
+ background: linear-gradient(180deg, hsl(var(--card) / 0.94), hsl(var(--muted) / 0.3));
132
141
  color: hsl(var(--muted-foreground));
133
- font-size: 0.76rem;
134
- letter-spacing: 0.02em;
142
+ font-family: var(--font-mono), monospace;
143
+ font-size: 0.68rem;
144
+ letter-spacing: 0.08em;
135
145
  text-transform: uppercase;
136
146
  }
137
147
 
@@ -140,17 +150,270 @@ export const shellCss = `/**
140
150
  color: inherit;
141
151
  }
142
152
 
153
+ .cm-wallet-connect-button {
154
+ transition:
155
+ background-color 160ms ease,
156
+ box-shadow 180ms ease,
157
+ transform 160ms ease;
158
+ }
159
+
160
+ .cm-wallet-connect-button:hover {
161
+ background: hsl(188 95% 49%);
162
+ transform: translateY(-1px);
163
+ }
164
+
165
+ .cm-wallet-details-button {
166
+ background: hsl(var(--primary) / 0.1);
167
+ border-color: hsl(var(--primary) / 0.3);
168
+ color: hsl(var(--primary));
169
+ border-radius: var(--radius, 0.25rem);
170
+ }
171
+
172
+ .cm-wallet-details-button:hover {
173
+ background: hsl(var(--primary) / 0.2);
174
+ border-color: hsl(var(--primary) / 0.45);
175
+ }
176
+
177
+ .cm-wallet-menu {
178
+ position: relative;
179
+ }
180
+
181
+ .cm-wallet-menu__trigger {
182
+ display: inline-flex;
183
+ align-items: center;
184
+ gap: 0.5rem;
185
+ min-height: 2.3rem;
186
+ padding: 0 0.8rem;
187
+ border-radius: var(--radius, 0.25rem);
188
+ border: 1px solid hsl(var(--primary) / 0.3);
189
+ background: hsl(var(--primary) / 0.1);
190
+ color: hsl(var(--primary));
191
+ font-family: var(--font-mono), monospace;
192
+ font-size: 0.78rem;
193
+ line-height: 1;
194
+ cursor: pointer;
195
+ transition:
196
+ transform 160ms ease,
197
+ background-color 160ms ease,
198
+ border-color 180ms ease;
199
+ }
200
+
201
+ .cm-wallet-menu__trigger:hover {
202
+ transform: translateY(-1px);
203
+ background: hsl(var(--primary) / 0.18);
204
+ border-color: hsl(var(--primary) / 0.46);
205
+ }
206
+
207
+ .cm-wallet-menu__trigger--red {
208
+ background: hsl(0 84% 60% / 0.09);
209
+ border-color: hsl(0 84% 60% / 0.3);
210
+ color: hsl(0 84% 72%);
211
+ }
212
+
213
+ .cm-wallet-menu__trigger--red:hover {
214
+ background: hsl(0 84% 60% / 0.15);
215
+ border-color: hsl(0 84% 60% / 0.48);
216
+ }
217
+
218
+ .cm-wallet-menu__trigger--blue {
219
+ background: hsl(212 95% 55% / 0.09);
220
+ border-color: hsl(212 95% 55% / 0.3);
221
+ color: hsl(203 95% 72%);
222
+ }
223
+
224
+ .cm-wallet-menu__trigger--blue:hover {
225
+ background: hsl(212 95% 55% / 0.15);
226
+ border-color: hsl(212 95% 55% / 0.48);
227
+ }
228
+
229
+ .cm-wallet-menu__trigger--yellow {
230
+ background: hsl(47 96% 56% / 0.1);
231
+ border-color: hsl(47 96% 56% / 0.3);
232
+ color: hsl(47 96% 72%);
233
+ }
234
+
235
+ .cm-wallet-menu__trigger--yellow:hover {
236
+ background: hsl(47 96% 56% / 0.18);
237
+ border-color: hsl(47 96% 56% / 0.48);
238
+ }
239
+
240
+ .cm-wallet-menu__trigger--neutral {
241
+ background: hsl(var(--muted) / 0.34);
242
+ border-color: hsl(var(--border) / 0.88);
243
+ color: hsl(var(--foreground));
244
+ }
245
+
246
+ .cm-wallet-menu__trigger--neutral:hover {
247
+ background: hsl(var(--muted) / 0.52);
248
+ border-color: hsl(var(--primary) / 0.24);
249
+ }
250
+
251
+ .cm-wallet-menu__dot {
252
+ width: 0.5rem;
253
+ height: 0.5rem;
254
+ border-radius: 999px;
255
+ background: hsl(var(--primary));
256
+ box-shadow: 0 0 12px hsl(var(--primary) / 0.44);
257
+ animation: cm-wallet-pulse 2.2s ease-in-out infinite;
258
+ }
259
+
260
+ .cm-wallet-menu__dot--red {
261
+ background: hsl(0 84% 60%);
262
+ box-shadow: 0 0 12px hsl(0 84% 60% / 0.44);
263
+ }
264
+
265
+ .cm-wallet-menu__dot--blue {
266
+ background: hsl(212 95% 55%);
267
+ box-shadow: 0 0 12px hsl(212 95% 55% / 0.44);
268
+ }
269
+
270
+ .cm-wallet-menu__dot--yellow {
271
+ background: hsl(47 96% 56%);
272
+ box-shadow: 0 0 12px hsl(47 96% 56% / 0.44);
273
+ }
274
+
275
+ .cm-wallet-menu__dot--neutral {
276
+ background: hsl(var(--muted-foreground));
277
+ box-shadow: none;
278
+ }
279
+
280
+ .cm-wallet-menu__balance {
281
+ font-weight: 600;
282
+ }
283
+
284
+ .cm-wallet-menu__address {
285
+ color: currentColor;
286
+ opacity: 0.58;
287
+ }
288
+
289
+ .cm-wallet-menu__caret {
290
+ display: inline-flex;
291
+ align-items: center;
292
+ color: currentColor;
293
+ opacity: 0.58;
294
+ }
295
+
296
+ .cm-wallet-menu__dropdown {
297
+ position: absolute;
298
+ right: 0;
299
+ top: calc(100% + 0.55rem);
300
+ width: 16rem;
301
+ z-index: 30;
302
+ }
303
+
304
+ .cm-wallet-menu__header {
305
+ padding: 0.85rem 0.85rem 0.7rem;
306
+ border-bottom: 1px solid hsl(var(--border) / 0.84);
307
+ display: grid;
308
+ gap: 0.45rem;
309
+ }
310
+
311
+ .cm-wallet-menu__title-row,
312
+ .cm-wallet-menu__row,
313
+ .cm-wallet-menu__address-row,
314
+ .cm-wallet-menu__action {
315
+ display: flex;
316
+ align-items: center;
317
+ justify-content: space-between;
318
+ gap: 0.65rem;
319
+ }
320
+
321
+ .cm-wallet-menu__title-row strong,
322
+ .cm-wallet-menu__row strong,
323
+ .cm-wallet-menu__address-value {
324
+ color: hsl(var(--foreground));
325
+ font-family: var(--font-mono), monospace;
326
+ font-size: 0.76rem;
327
+ }
328
+
329
+ .cm-wallet-menu__row span,
330
+ .cm-wallet-menu__hint,
331
+ .cm-wallet-menu__action span {
332
+ color: hsl(var(--muted-foreground));
333
+ font-family: var(--font-mono), monospace;
334
+ font-size: 0.66rem;
335
+ letter-spacing: 0.08em;
336
+ text-transform: uppercase;
337
+ }
338
+
339
+ .cm-wallet-menu__hint {
340
+ margin: 0.1rem 0 0;
341
+ letter-spacing: 0.04em;
342
+ text-transform: none;
343
+ }
344
+
345
+ .cm-wallet-menu__address-row {
346
+ padding: 0.75rem 0.85rem;
347
+ border-bottom: 1px solid hsl(var(--border) / 0.84);
348
+ }
349
+
350
+ .cm-wallet-menu__address-value {
351
+ overflow: hidden;
352
+ text-overflow: ellipsis;
353
+ white-space: nowrap;
354
+ }
355
+
356
+ .cm-wallet-menu__address-actions,
357
+ .cm-wallet-menu__actions {
358
+ display: grid;
359
+ }
360
+
361
+ .cm-wallet-menu__address-actions {
362
+ grid-auto-flow: column;
363
+ gap: 0.35rem;
364
+ }
365
+
366
+ .cm-wallet-menu__actions {
367
+ padding: 0.35rem 0;
368
+ }
369
+
370
+ .cm-wallet-menu__action {
371
+ appearance: none;
372
+ border: 0;
373
+ background: transparent;
374
+ padding: 0.7rem 0.85rem;
375
+ color: hsl(var(--foreground));
376
+ cursor: pointer;
377
+ justify-content: flex-start;
378
+ transition: background-color 160ms ease, color 160ms ease;
379
+ }
380
+
381
+ .cm-wallet-menu__action:hover {
382
+ background: hsl(var(--muted) / 0.3);
383
+ }
384
+
385
+ .cm-wallet-menu__action--danger {
386
+ color: hsl(var(--destructive-foreground));
387
+ }
388
+
389
+ .cm-wallet-menu__action--danger span {
390
+ color: inherit;
391
+ }
392
+
393
+ @keyframes cm-wallet-pulse {
394
+ 0%,
395
+ 100% {
396
+ transform: scale(1);
397
+ opacity: 0.92;
398
+ }
399
+
400
+ 50% {
401
+ transform: scale(1.18);
402
+ opacity: 1;
403
+ }
404
+ }
405
+
143
406
  .cm-shell-panel {
144
407
  border: 1px solid var(--cm-shell-border);
145
- border-radius: 1rem;
408
+ border-radius: max(var(--radius, 0.25rem), 0.3rem);
146
409
  background: var(--cm-shell-surface);
147
410
  box-shadow: var(--cm-shell-shadow);
148
- backdrop-filter: blur(14px);
411
+ backdrop-filter: blur(16px);
149
412
  }
150
413
 
151
414
  .cm-shell-panel--muted {
152
415
  background:
153
- linear-gradient(180deg, hsl(var(--muted) / 0.38), hsl(var(--background) / 0.84));
416
+ linear-gradient(180deg, hsl(var(--muted) / 0.34), hsl(var(--background) / 0.9));
154
417
  }
155
418
 
156
419
  .cm-shell-panel--ghost {
@@ -159,7 +422,7 @@ export const shellCss = `/**
159
422
  }
160
423
 
161
424
  .cm-shell-panel__body {
162
- padding: 1.2rem;
425
+ padding: 1rem;
163
426
  }
164
427
 
165
428
  .cm-shell-page-header {
@@ -167,34 +430,36 @@ export const shellCss = `/**
167
430
  align-items: flex-start;
168
431
  justify-content: space-between;
169
432
  gap: 1rem;
170
- padding: 1.35rem 1.45rem;
433
+ padding: 1rem 1.1rem;
171
434
  }
172
435
 
173
436
  .cm-shell-page-header__copy {
174
437
  display: flex;
175
438
  flex-direction: column;
176
- gap: 0.45rem;
439
+ gap: 0.32rem;
177
440
  }
178
441
 
179
442
  .cm-shell-page-header__eyebrow {
180
443
  color: hsl(var(--primary));
181
444
  font-family: var(--font-mono), monospace;
182
- font-size: 0.76rem;
183
- letter-spacing: 0.16em;
445
+ font-size: 0.68rem;
446
+ letter-spacing: 0.18em;
184
447
  text-transform: uppercase;
185
448
  }
186
449
 
187
450
  .cm-shell-page-header__title {
188
451
  color: hsl(var(--foreground));
189
452
  font-family: var(--font-display), sans-serif;
190
- font-size: clamp(1.2rem, 2vw, 1.65rem);
191
- letter-spacing: 0.02em;
453
+ font-size: clamp(1.12rem, 1.65vw, 1.52rem);
454
+ letter-spacing: 0.04em;
455
+ line-height: 1.02;
192
456
  }
193
457
 
194
458
  .cm-shell-page-header__subtitle {
195
459
  color: hsl(var(--muted-foreground));
196
- font-size: 0.92rem;
197
- max-width: 56rem;
460
+ font-size: 0.88rem;
461
+ line-height: 1.45;
462
+ max-width: 48rem;
198
463
  }
199
464
 
200
465
  .cm-shell-stat-grid {
@@ -207,34 +472,36 @@ export const shellCss = `/**
207
472
  display: flex;
208
473
  flex-direction: column;
209
474
  gap: 0.25rem;
210
- padding: 0.9rem 1rem;
475
+ padding: 0.85rem 0.9rem;
211
476
  }
212
477
 
213
478
  .cm-shell-stat__label {
214
479
  color: hsl(var(--muted-foreground));
215
- font-size: 0.76rem;
216
- letter-spacing: 0.08em;
480
+ font-family: var(--font-mono), monospace;
481
+ font-size: 0.66rem;
482
+ letter-spacing: 0.12em;
217
483
  text-transform: uppercase;
218
484
  }
219
485
 
220
486
  .cm-shell-stat__value {
221
487
  color: hsl(var(--foreground));
222
488
  font-family: var(--font-display), sans-serif;
223
- font-size: 1.1rem;
489
+ font-size: 1rem;
490
+ letter-spacing: 0.04em;
224
491
  }
225
492
 
226
493
  .cm-shell-stat__hint {
227
494
  color: hsl(var(--muted-foreground));
228
- font-size: 0.78rem;
495
+ font-size: 0.74rem;
229
496
  }
230
497
 
231
498
  .cm-shell-tab-strip {
232
499
  display: inline-flex;
233
500
  align-items: center;
234
501
  gap: 0.35rem;
235
- padding: 0.35rem;
502
+ padding: 0.25rem;
236
503
  border: 1px solid hsl(var(--border) / 0.75);
237
- border-radius: 999px;
504
+ border-radius: var(--radius, 0.25rem);
238
505
  background: hsl(var(--muted) / 0.16);
239
506
  }
240
507
 
@@ -242,15 +509,15 @@ export const shellCss = `/**
242
509
  display: inline-flex;
243
510
  align-items: center;
244
511
  gap: 0.5rem;
245
- min-height: 2.35rem;
246
- padding: 0 1rem;
247
- border-radius: 999px;
512
+ min-height: 2.1rem;
513
+ padding: 0 0.85rem;
514
+ border-radius: calc(var(--radius, 0.25rem) - 1px);
248
515
  border: 1px solid transparent;
249
516
  background: transparent;
250
517
  color: hsl(var(--muted-foreground));
251
518
  font-family: var(--font-mono), monospace;
252
- font-size: 0.76rem;
253
- letter-spacing: 0.08em;
519
+ font-size: 0.68rem;
520
+ letter-spacing: 0.12em;
254
521
  text-transform: uppercase;
255
522
  cursor: pointer;
256
523
  transition:
@@ -262,21 +529,25 @@ export const shellCss = `/**
262
529
 
263
530
  .cm-shell-tab:hover {
264
531
  color: hsl(var(--foreground));
532
+ border-color: hsl(var(--primary) / 0.18);
265
533
  }
266
534
 
267
535
  .cm-shell-tab[data-active="true"] {
268
- background: linear-gradient(135deg, hsl(var(--primary) / 0.22), hsl(314 100% 64% / 0.18));
269
- border-color: hsl(var(--primary) / 0.34);
536
+ background:
537
+ linear-gradient(180deg, hsl(var(--primary) / 0.18), hsl(var(--primary) / 0.1));
538
+ border-color: hsl(var(--primary) / 0.36);
270
539
  color: hsl(var(--foreground));
271
- box-shadow: 0 0 22px hsl(var(--primary) / 0.18);
540
+ box-shadow:
541
+ inset 0 1px 0 hsl(var(--primary) / 0.16),
542
+ 0 0 18px hsl(var(--primary) / 0.14);
272
543
  }
273
544
 
274
545
  .cm-shell-notice {
275
546
  display: flex;
276
547
  align-items: center;
277
548
  gap: 0.7rem;
278
- padding: 0.9rem 1rem;
279
- border-radius: 0.9rem;
549
+ padding: 0.8rem 0.95rem;
550
+ border-radius: max(var(--radius, 0.25rem), 0.3rem);
280
551
  border: 1px solid;
281
552
  }
282
553
 
@@ -309,7 +580,7 @@ export const shellCss = `/**
309
580
  align-items: center;
310
581
  justify-content: space-between;
311
582
  gap: 1rem;
312
- padding: 1rem 1.15rem;
583
+ padding: 0.95rem 1rem;
313
584
  }
314
585
 
315
586
  .cm-shell-banner__copy {
@@ -320,12 +591,15 @@ export const shellCss = `/**
320
591
 
321
592
  .cm-shell-banner__title {
322
593
  color: hsl(var(--foreground));
323
- font-weight: 700;
594
+ font-family: var(--font-display), sans-serif;
595
+ font-size: 0.98rem;
596
+ letter-spacing: 0.03em;
324
597
  }
325
598
 
326
599
  .cm-shell-banner__subtitle {
327
600
  color: hsl(var(--muted-foreground));
328
- font-size: 0.9rem;
601
+ font-size: 0.84rem;
602
+ line-height: 1.45;
329
603
  }
330
604
 
331
605
  .cm-shell-empty {
@@ -335,7 +609,7 @@ export const shellCss = `/**
335
609
  justify-content: center;
336
610
  gap: 0.75rem;
337
611
  min-height: 18rem;
338
- padding: 2.4rem 1.5rem;
612
+ padding: 2rem 1.25rem;
339
613
  text-align: center;
340
614
  }
341
615
 
@@ -346,12 +620,14 @@ export const shellCss = `/**
346
620
  .cm-shell-empty__title {
347
621
  color: hsl(var(--foreground));
348
622
  font-family: var(--font-display), sans-serif;
349
- font-size: 1.2rem;
623
+ font-size: 1.08rem;
624
+ letter-spacing: 0.04em;
350
625
  }
351
626
 
352
627
  .cm-shell-empty__description {
353
628
  color: hsl(var(--muted-foreground));
354
629
  max-width: 38rem;
630
+ line-height: 1.55;
355
631
  }
356
632
 
357
633
  .cm-shell-modal-overlay {
@@ -360,9 +636,9 @@ export const shellCss = `/**
360
636
  display: flex;
361
637
  align-items: center;
362
638
  justify-content: center;
363
- padding: 1.5rem;
364
- background: hsl(240 30% 2% / 0.68);
365
- backdrop-filter: blur(10px);
639
+ padding: 1rem;
640
+ background: hsl(240 30% 2% / 0.8);
641
+ backdrop-filter: blur(12px);
366
642
  z-index: 100;
367
643
  }
368
644
 
@@ -370,7 +646,7 @@ export const shellCss = `/**
370
646
  width: min(100%, 46rem);
371
647
  max-height: min(90vh, 56rem);
372
648
  overflow: auto;
373
- border-radius: 0.65rem;
649
+ border-radius: max(var(--radius, 0.25rem), 0.3rem);
374
650
  }
375
651
 
376
652
  .cm-shell-modal__header {
@@ -378,23 +654,25 @@ export const shellCss = `/**
378
654
  align-items: flex-start;
379
655
  justify-content: space-between;
380
656
  gap: 1rem;
381
- padding: 1.25rem 1.3rem 0;
657
+ padding: 1rem 1rem 0;
382
658
  }
383
659
 
384
660
  .cm-shell-modal__title {
385
661
  color: hsl(var(--foreground));
386
662
  font-family: var(--font-display), sans-serif;
387
- font-size: 1.1rem;
663
+ font-size: 1rem;
664
+ letter-spacing: 0.04em;
388
665
  }
389
666
 
390
667
  .cm-shell-modal__subtitle {
391
668
  color: hsl(var(--muted-foreground));
392
- font-size: 0.92rem;
393
- margin-top: 0.35rem;
669
+ font-size: 0.84rem;
670
+ margin-top: 0.3rem;
671
+ line-height: 1.45;
394
672
  }
395
673
 
396
674
  .cm-shell-modal__body {
397
- padding: 1.2rem 1.3rem 1.3rem;
675
+ padding: 1rem;
398
676
  }
399
677
 
400
678
  @media (max-width: 720px) {
@@ -412,19 +690,30 @@ export const shellCss = `/**
412
690
  width: 100%;
413
691
  overflow-x: auto;
414
692
  }
693
+
694
+ .cm-wallet-menu__address {
695
+ display: none;
696
+ }
697
+
698
+ .cm-wallet-menu__dropdown {
699
+ width: min(18rem, calc(100vw - 2rem));
700
+ }
415
701
  }
416
702
 
417
703
  /* ── Form Controls ── */
418
704
  .cm-form-group {
419
- margin-bottom: 16px;
705
+ margin-bottom: 14px;
420
706
  }
421
707
 
422
708
  .cm-form-group label {
423
709
  display: block;
424
710
  margin-bottom: 6px;
425
- font-size: 13px;
711
+ font-family: var(--font-mono), monospace;
712
+ font-size: 11px;
426
713
  color: hsl(var(--muted-foreground));
427
- font-weight: 500;
714
+ font-weight: 600;
715
+ letter-spacing: 0.12em;
716
+ text-transform: uppercase;
428
717
  }
429
718
 
430
719
  .cm-form-input,
@@ -432,13 +721,13 @@ export const shellCss = `/**
432
721
  .cm-form-select {
433
722
  width: 100%;
434
723
  padding: 10px 12px;
435
- background: hsl(var(--muted));
724
+ background: hsl(var(--input) / 0.92);
436
725
  border: 1px solid hsl(var(--border));
437
- border-radius: 6px;
726
+ border-radius: var(--radius, 0.25rem);
438
727
  color: hsl(var(--foreground));
439
728
  font-size: 14px;
440
729
  font-family: var(--font-sans), sans-serif;
441
- transition: border-color 0.2s;
730
+ transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
442
731
  }
443
732
 
444
733
  .cm-form-input:focus,
@@ -446,6 +735,8 @@ export const shellCss = `/**
446
735
  .cm-form-select:focus {
447
736
  outline: none;
448
737
  border-color: hsl(var(--primary));
738
+ box-shadow: 0 0 0 1px hsl(var(--primary) / 0.24);
739
+ background: hsl(var(--background) / 0.96);
449
740
  }
450
741
 
451
742
  .cm-form-input:disabled,
@@ -509,27 +800,31 @@ export const shellCss = `/**
509
800
  }
510
801
 
511
802
  .cm-nav-btn {
512
- padding: 8px 16px;
803
+ padding: 8px 14px;
513
804
  background: transparent;
514
- border: none;
805
+ border: 1px solid transparent;
515
806
  color: hsl(var(--muted-foreground));
516
807
  cursor: pointer;
517
- border-radius: 6px;
518
- font-size: 14px;
519
- font-weight: 500;
520
- font-family: var(--font-sans), sans-serif;
808
+ border-radius: var(--radius, 0.25rem);
809
+ font-size: 11px;
810
+ font-weight: 600;
811
+ font-family: var(--font-mono), monospace;
812
+ letter-spacing: 0.12em;
813
+ text-transform: uppercase;
521
814
  transition: all 0.2s;
522
815
  }
523
816
 
524
817
  .cm-nav-btn:hover {
525
818
  color: hsl(var(--foreground));
526
819
  background: hsl(var(--muted));
820
+ border-color: hsl(var(--primary) / 0.18);
527
821
  }
528
822
 
529
823
  .cm-nav-btn[data-active="true"],
530
824
  .cm-nav-btn.active {
531
825
  color: hsl(var(--primary));
532
- background: hsl(var(--primary) / 0.15);
826
+ background: hsl(var(--primary) / 0.12);
827
+ border-color: hsl(var(--primary) / 0.28);
533
828
  }
534
829
 
535
830
  /* ── Loading State ── */
@@ -594,10 +889,10 @@ export const shellCss = `/**
594
889
  display: flex;
595
890
  align-items: center;
596
891
  gap: 12px;
597
- padding: 12px 16px;
892
+ padding: 10px 12px;
598
893
  background: hsl(var(--card));
599
894
  border: 1px solid hsl(var(--border));
600
- border-radius: 8px;
895
+ border-radius: var(--radius, 0.25rem);
601
896
  }
602
897
 
603
898
  .cm-search-bar__icon {
@@ -624,10 +919,12 @@ export const shellCss = `/**
624
919
  padding: 6px 14px;
625
920
  background: hsl(var(--card));
626
921
  border: 1px solid hsl(var(--border));
627
- border-radius: 16px;
922
+ border-radius: 999px;
628
923
  color: hsl(var(--muted-foreground));
629
- font-size: 13px;
630
- font-family: var(--font-sans), sans-serif;
924
+ font-size: 11px;
925
+ font-family: var(--font-mono), monospace;
926
+ letter-spacing: 0.08em;
927
+ text-transform: uppercase;
631
928
  cursor: pointer;
632
929
  transition: all 0.2s;
633
930
  }
@@ -653,7 +950,7 @@ export const shellCss = `/**
653
950
  background: transparent;
654
951
  border: 1px solid hsl(var(--border));
655
952
  color: hsl(var(--muted-foreground));
656
- border-radius: 6px;
953
+ border-radius: var(--radius, 0.25rem);
657
954
  cursor: pointer;
658
955
  font-family: var(--font-sans), sans-serif;
659
956
  transition: all 0.2s;
@@ -672,10 +969,10 @@ export const shellCss = `/**
672
969
  /* ── Settings Section ── */
673
970
  .cm-settings-section {
674
971
  margin-bottom: 24px;
675
- padding: 20px;
972
+ padding: 16px;
676
973
  background: hsl(var(--card));
677
974
  border: 1px solid hsl(var(--border));
678
- border-radius: 8px;
975
+ border-radius: max(var(--radius, 0.25rem), 0.3rem);
679
976
  }
680
977
 
681
978
  .cm-settings-section__title {