@comty.io/core 0.1.0 → 0.1.2

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.
Files changed (9) hide show
  1. package/README.md +6 -29
  2. package/comty-sdk.js +1046 -210
  3. package/package.json +2 -2
  4. package/src/browser.js +531 -99
  5. package/src/capture.js +104 -1
  6. package/src/dev.mjs +3 -2
  7. package/src/measurements.js +209 -0
  8. package/src/style.js +203 -111
  9. package/src/vite.mjs +3 -2
package/src/style.js CHANGED
@@ -1,11 +1,14 @@
1
1
  export function getComtyStyle() {
2
+ const toolbarSurface = "#2b2d2f";
3
+ const toolbarMuted = "#b8babb";
2
4
  const commentCursor = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path d="M20 2C30 2 38 10 38 20S30 38 20 38H3V28C2 25 2 23 2 20 2 10 10 2 20 2Z" fill="white" stroke="#d6dbe2"/><circle cx="20" cy="20" r="14" fill="#e6e6e6"/><path d="M20 14v12m-6-6h12" fill="none" stroke="#404040" stroke-width="2.5" stroke-linecap="round"/></svg>`;
5
+ const typographyCursor = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect x="8" y="8" width="23" height="23" rx="7" fill="${toolbarSurface}" stroke="${toolbarMuted}" stroke-width=".75"/><path d="m14 25 5.5-12L25 25m-8.5-4h6M13 25h4m5 0h4" fill="none" stroke="${toolbarMuted}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="m2 2 2 15 4-5 6-3Z" fill="${toolbarSurface}" stroke="${toolbarMuted}" stroke-width="1.5" stroke-linejoin="round"/></svg>`;
3
6
  return `
4
7
  #comty-root {
5
- --comty-surface: #262626;
6
- --comty-hover-surface: #393939;
8
+ --comty-surface: var(--comty-toolbar-surface);
9
+ --comty-hover-surface: var(--comty-toolbar-selected);
7
10
  --comty-foreground: #fafafa;
8
- --comty-muted: #a3a3a3;
11
+ --comty-muted: var(--comty-toolbar-muted);
9
12
  --comty-accent: #55aaf5;
10
13
  --comty-agent-warning: #e9b86d;
11
14
  --comty-agent-success: #80c9a4;
@@ -13,8 +16,8 @@ export function getComtyStyle() {
13
16
  --comty-outline: oklch(0.62 0.18 255);
14
17
  --comty-paper: #fff;
15
18
  --comty-ink: #171717;
16
- --comty-border: #e5e5e5;
17
- --comty-field-surface: #f5f5f5;
19
+ --comty-border: #434649;
20
+ --comty-field-surface: var(--comty-toolbar-group);
18
21
  --comty-xray: #0000ff;
19
22
  --comty-guide: #ff0000;
20
23
  --comty-margin-fill: rgb(246 172 88 / .45);
@@ -23,15 +26,48 @@ export function getComtyStyle() {
23
26
  --comty-floating-shadow: 0 .25rem 1rem rgb(0 0 0 / .16);
24
27
  --comty-tool-size: 2.375rem;
25
28
  --comty-toolbar-padding: .375rem;
29
+ --comty-toolbar-gap: .375rem;
30
+ --comty-toolbar-grip-width: .6rem;
31
+ --comty-toolbar-grip-gap: .25rem;
32
+ --comty-magnifier-size: 5.375rem;
33
+ --comty-magnifier-rim: .625rem;
34
+ --comty-magnifier-line: .125rem;
35
+ --comty-magnifier-grid-line: .03125rem;
36
+ --comty-magnifier-dark: #111;
37
+ --comty-magnifier-gray: #999;
38
+ --comty-magnifier-shadow: 0 .0625rem .375rem rgb(0 0 0 / .5);
39
+ --comty-property-width: 16rem;
40
+ --comty-property-swatch: 2rem;
41
+ --comty-property-font-size: .6875rem;
42
+ --comty-property-row-height: 1.375rem;
43
+ --comty-toolbar-surface: ${toolbarSurface};
44
+ --comty-toolbar-group: #202224;
45
+ --comty-toolbar-selected: #505457;
46
+ --comty-toolbar-muted: ${toolbarMuted};
47
+ --comty-measure: #ff3b30;
48
+ --comty-font: "Inter", ui-sans-serif, system-ui, sans-serif;
49
+ --comty-dialog-surface: var(--comty-surface);
50
+ --comty-dialog-ink: var(--comty-foreground);
51
+ --comty-dialog-soft: var(--comty-muted);
52
+ --comty-dialog-field: var(--comty-field-surface);
53
+ --comty-dialog-line: var(--comty-border);
54
+ --comty-dialog-backdrop: rgb(0 0 0 / .4);
55
+ --comty-dialog-radius: 2rem;
56
+ --comty-dialog-width: 32rem;
57
+ --comty-dialog-shadow: 0 1.5rem 4rem rgb(0 0 0 / .16);
26
58
  --comty-motion-duration: 220ms;
59
+ --comty-working-dot-size: .25em;
60
+ --comty-working-dot-gap: .125em;
27
61
  --comty-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
62
+ --comty-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
28
63
  position: fixed;
29
64
  inset: 0;
30
65
  width: 100%; height: 100%; max-width: none; max-height: none;
31
66
  margin: 0; padding: 0; border: 0; overflow: visible; background: transparent;
32
67
  z-index: 2147483647;
33
68
  pointer-events: none;
34
- font-family: ui-sans-serif, system-ui, sans-serif;
69
+ font-family: var(--comty-font);
70
+ color-scheme: dark;
35
71
  }
36
72
  html.comty-agent-enabled body { transition: margin-left 220ms cubic-bezier(0.23, 1, 0.32, 1), margin-right 220ms cubic-bezier(0.23, 1, 0.32, 1); }
37
73
  html.comty-agent-docked[data-comty-agent-side="left"] body { margin-left: 22rem; }
@@ -57,7 +93,9 @@ export function getComtyStyle() {
57
93
  .comty-agent-row { position: relative; display: flex; align-items: center; gap: .625rem; min-height: 2rem; padding: .25rem .5rem; border-radius: .5rem; color: var(--comty-foreground); }
58
94
  .comty-agent-row:hover { background: var(--comty-hover-surface); }
59
95
  .comty-agent-dot { width: .4375rem; height: .4375rem; flex: 0 0 auto; border-radius: 50%; background: var(--comty-muted); }
60
- .comty-agent-dot[data-status="working"] { background: var(--comty-accent); animation: comty-agent-pulse 1.4s ease-in-out infinite; }
96
+ .comty-working-indicator { display: inline-grid; grid-template-columns: repeat(3, var(--comty-working-dot-size)); gap: var(--comty-working-dot-gap); flex: 0 0 auto; color: var(--comty-foreground); }
97
+ .comty-working-indicator > i { display: block; width: var(--comty-working-dot-size); height: var(--comty-working-dot-size); border-radius: 50%; background: currentColor; opacity: .25; transition: opacity 150ms linear; }
98
+ .comty-working-indicator > i[data-active] { opacity: 1; }
61
99
  .comty-agent-dot[data-status="success"] { background: var(--comty-agent-success); }
62
100
  .comty-agent-dot[data-status="error"] { background: var(--comty-agent-error); }
63
101
  .comty-agent-row-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
@@ -67,7 +105,7 @@ export function getComtyStyle() {
67
105
  @media (hover: none) { .comty-agent-row-actions { position: static; opacity: 1; pointer-events: auto; transform: none; background: transparent; } }
68
106
  .comty-agent-panel .comty-agent-row-actions .comty-agent-action { min-height: 1.5rem; padding: .125rem .375rem; border-radius: .25rem; background: transparent; color: var(--comty-muted); font-size: .875rem; }
69
107
  .comty-agent-panel .comty-agent-row-actions .comty-agent-action:hover { color: var(--comty-foreground); background: var(--comty-surface); }
70
- .comty-agent-error-popover { position: fixed; z-index: 2147483647; width: min(20rem, calc(100vw - 1rem)); max-height: calc(100vh - 1rem); overflow: auto; padding: .75rem .875rem; border: .0625rem solid var(--comty-hover-surface); border-radius: .625rem; background: var(--comty-surface); box-shadow: var(--comty-floating-shadow); color: var(--comty-foreground); font: .875rem/1.4 ui-sans-serif, system-ui, sans-serif; pointer-events: none; color-scheme: dark; }
108
+ .comty-agent-error-popover { position: fixed; z-index: 2147483647; width: min(20rem, calc(100vw - 1rem)); max-height: calc(100vh - 1rem); overflow: auto; padding: .75rem .875rem; border: 0; border-radius: .625rem; background: var(--comty-surface); box-shadow: var(--comty-floating-shadow); color: var(--comty-foreground); font: .875rem/1.4 ui-sans-serif, system-ui, sans-serif; pointer-events: none; color-scheme: dark; }
71
109
  .comty-agent-error-popover strong { display: block; font-weight: 600; }
72
110
  .comty-agent-error-popover p { margin: .375rem 0 0; color: var(--comty-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
73
111
  .comty-agent-panel p { margin: .5rem 0 0; font: inherit; color: var(--comty-muted); }
@@ -91,10 +129,8 @@ export function getComtyStyle() {
91
129
  .comty-agent-empty strong { font-size: .875rem; font-weight: 500; }
92
130
  .comty-agent-empty p { max-width: 15rem; margin: .5rem auto 0; font-size: .875rem; }
93
131
  .comty-agent-working { position: fixed; z-index: 1; box-sizing: border-box; border: 2px solid var(--comty-accent); border-radius: .25rem; pointer-events: none; }
94
- .comty-agent-working span { position: absolute; left: -.125rem; bottom: 100%; padding: .25rem .5rem; border-radius: .375rem .375rem 0 0; background: var(--comty-accent); color: var(--comty-paper); font: 600 .6875rem/1.4 ui-sans-serif, system-ui, sans-serif; white-space: nowrap; }
95
- .comty-agent-working[data-badge-below] span { bottom: auto; top: 100%; border-radius: 0 0 .375rem .375rem; }
96
- .comty-agent-working span::before { content: ""; display: inline-block; width: .4rem; height: .4rem; margin-right: .4rem; border-radius: 50%; background: currentColor; animation: comty-agent-pulse 1.4s ease-in-out infinite; }
97
- @keyframes comty-agent-pulse { 50% { opacity: .3; } }
132
+ .comty-agent-working-badge { position: absolute; left: -.125rem; bottom: 100%; display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .5rem; border-radius: .375rem .375rem 0 0; background: var(--comty-surface); color: var(--comty-foreground); font: 600 .6875rem/1.4 ui-sans-serif, system-ui, sans-serif; white-space: nowrap; }
133
+ .comty-agent-working[data-badge-below] .comty-agent-working-badge { bottom: auto; top: 100%; border-radius: 0 0 .375rem .375rem; }
98
134
  #comty-root { cursor: default; }
99
135
  #comty-root::backdrop { background: transparent; pointer-events: none; }
100
136
  html.comty-comment-placement,
@@ -112,22 +148,24 @@ export function getComtyStyle() {
112
148
  z-index: 2147483647;
113
149
  display: flex;
114
150
  align-items: center;
115
- gap: .125rem;
151
+ gap: var(--comty-toolbar-gap);
116
152
  max-width: calc(100vw - 2rem);
117
153
  padding: var(--comty-toolbar-padding);
118
- border-radius: .9375rem;
119
- color: var(--comty-foreground);
154
+ border-radius: 1.125rem;
155
+ color: var(--comty-toolbar-muted);
120
156
  opacity: 0;
121
157
  visibility: hidden;
122
158
  pointer-events: none;
123
159
  touch-action: none;
124
160
  user-select: none;
125
- cursor: pointer;
161
+ cursor: default;
126
162
  isolation: isolate;
127
163
  transition: opacity 180ms ease, visibility 0s linear 180ms;
128
164
  }
129
165
  #comty-root.comty-active .comty-toolbar { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
130
- .comty-toolbar-surface { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--comty-surface); box-shadow: var(--comty-floating-shadow); transform-origin: top left; pointer-events: none; }
166
+ .comty-toolbar-surface { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--comty-toolbar-surface); box-shadow: var(--comty-floating-shadow); transform-origin: top left; pointer-events: none; }
167
+ .comty-toolbar-grip { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--comty-toolbar-grip-width); height: var(--comty-tool-size); margin-inline-end: calc(var(--comty-toolbar-grip-gap) - var(--comty-toolbar-gap)); color: inherit; cursor: grab; }
168
+ .comty-toolbar-grip svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
131
169
  .comty-toolbar[data-dragging], .comty-toolbar[data-dragging] * { cursor: grabbing; }
132
170
  .comty-toolbar:focus-visible { outline: .125rem solid var(--comty-accent); outline-offset: .125rem; }
133
171
  .comty-control-button {
@@ -151,13 +189,14 @@ export function getComtyStyle() {
151
189
  }
152
190
  .comty-control-button svg { width: 1.125rem; height: 1.125rem; }
153
191
  .comty-control-button:hover { background: var(--comty-hover-surface); }
154
- .comty-control-button[aria-pressed="true"] { background: var(--comty-accent); color: var(--comty-paper); }
192
+ .comty-control-button[aria-pressed="true"] { background: var(--comty-toolbar-selected); color: var(--comty-foreground); }
155
193
  .comty-control-button:focus-visible, .comty-filter-dot:focus-visible {
156
- outline: .125rem solid var(--comty-accent);
194
+ outline: .125rem solid var(--comty-foreground);
157
195
  outline-offset: .125rem;
158
196
  }
159
- .comty-tool-context { display: flex; align-items: center; gap: .125rem; }
160
- .comty-tool-divider { width: .0625rem; height: 1.25rem; margin-inline: .375rem; background: var(--comty-hover-surface); }
197
+ .comty-tool-primary, .comty-tool-context { display: flex; align-items: center; gap: .125rem; padding: .125rem; border-radius: .875rem; background: var(--comty-toolbar-group); }
198
+ .comty-tool-primary { position: relative; z-index: 1; }
199
+ .comty-tool-divider { display: none; }
161
200
  .comty-filter-controls { display: flex; align-items: center; gap: .375rem; padding-inline: .5rem; }
162
201
  .comty-filter-dot { flex-shrink: 0; width: .625rem; height: .625rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; }
163
202
  .comty-filter-dot-muted { opacity: .35; }
@@ -165,7 +204,7 @@ export function getComtyStyle() {
165
204
  [data-comty-anchor-hidden] { visibility: hidden !important; pointer-events: none !important; }
166
205
  @media (prefers-reduced-motion: reduce) {
167
206
  html.comty-agent-enabled body { transition: none; }
168
- .comty-toolbar, .comty-control-button, .comty-sidepanel, .comty-pin, .comty-bubble, .comty-agent-panel, .comty-agent-action, .comty-agent-dot, .comty-agent-working span::before { transition: none !important; animation: none !important; }
207
+ .comty-toolbar, .comty-control-button, .comty-sidepanel, .comty-pin, .comty-bubble, .comty-agent-panel, .comty-agent-action, .comty-agent-dot, .comty-working-indicator > i { transition: none !important; animation: none !important; }
169
208
  }
170
209
 
171
210
  .comty-sidepanel {
@@ -180,9 +219,9 @@ export function getComtyStyle() {
180
219
  display: flex;
181
220
  flex-direction: column;
182
221
  overflow: hidden;
183
- background: white;
184
- color: #111;
185
- border: 1px solid rgba(17,24,39,.12);
222
+ background: var(--comty-surface);
223
+ color: var(--comty-foreground);
224
+ border: 1px solid var(--comty-border);
186
225
  border-radius: 18px;
187
226
  box-shadow: 0 1.5rem 4rem rgb(23 32 29 / 0.12);
188
227
  font-family: sans-serif;
@@ -205,7 +244,7 @@ export function getComtyStyle() {
205
244
  align-items: center;
206
245
  gap: 12px;
207
246
  padding: 8px;
208
- border-bottom: 1px solid rgba(17,24,39,.1);
247
+ border-bottom: 1px solid var(--comty-border);
209
248
  }
210
249
 
211
250
  .comty-sidepanel-header-filters {
@@ -222,15 +261,15 @@ export function getComtyStyle() {
222
261
  height: 32px;
223
262
  border: none;
224
263
  border-radius: 8px;
225
- background: #f4f4f5;
226
- color: #111;
264
+ background: var(--comty-field-surface);
265
+ color: var(--comty-foreground);
227
266
  padding: 0 12px;
228
267
  font: 14px/1 sans-serif;
229
268
  outline: none;
230
269
  }
231
270
 
232
271
  .comty-sidepanel-search::placeholder {
233
- color: #9ca3af;
272
+ color: var(--comty-muted);
234
273
  }
235
274
 
236
275
  .comty-sidepanel-search::-webkit-search-cancel-button {
@@ -249,14 +288,14 @@ export function getComtyStyle() {
249
288
  border: none;
250
289
  border-radius: 8px;
251
290
  background: transparent;
252
- color: #111;
291
+ color: var(--comty-foreground);
253
292
  cursor: pointer;
254
293
  appearance: none;
255
294
  }
256
295
 
257
296
  .comty-sidepanel-icon-button:hover,
258
297
  .comty-sidepanel-icon-button:focus-visible {
259
- background: #f4f4f5;
298
+ background: var(--comty-field-surface);
260
299
  outline: none;
261
300
  }
262
301
 
@@ -282,7 +321,7 @@ export function getComtyStyle() {
282
321
  .comty-sidepanel-empty {
283
322
  display: flex;
284
323
  gap: 14px;
285
- color: #111;
324
+ color: var(--comty-foreground);
286
325
  padding: 22px 12px;
287
326
  font: 14px/1.45 sans-serif;
288
327
  }
@@ -302,7 +341,7 @@ export function getComtyStyle() {
302
341
  border: none;
303
342
  border-radius: 10px;
304
343
  background: transparent;
305
- color: #111;
344
+ color: var(--comty-foreground);
306
345
  font: 14px/1.35 sans-serif;
307
346
  text-align: left;
308
347
  cursor: pointer;
@@ -312,7 +351,7 @@ export function getComtyStyle() {
312
351
 
313
352
  .comty-sidepanel-item:hover,
314
353
  .comty-sidepanel-item:focus-visible {
315
- background: #f4f4f5;
354
+ background: var(--comty-field-surface);
316
355
  outline: none;
317
356
  }
318
357
 
@@ -340,7 +379,7 @@ export function getComtyStyle() {
340
379
  .comty-sidepanel-item-meta {
341
380
  display: block;
342
381
  margin-top: 6px;
343
- color: #6b7280;
382
+ color: var(--comty-muted);
344
383
  font: 11px/1.2 sans-serif;
345
384
  overflow: hidden;
346
385
  text-overflow: ellipsis;
@@ -392,9 +431,9 @@ export function getComtyStyle() {
392
431
  }
393
432
 
394
433
  .comty-pin.comty-pin-with-avatar {
395
- background: #fff;
396
- color: #1f1f1f;
397
- border: 2px solid #fff;
434
+ background: var(--comty-surface);
435
+ color: var(--comty-foreground);
436
+ border: 2px solid var(--comty-border);
398
437
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
399
438
  filter: none;
400
439
  transition:
@@ -442,9 +481,9 @@ export function getComtyStyle() {
442
481
  .comty-bubble {
443
482
  position: fixed;
444
483
  z-index: 2147483646;
445
- background: white;
446
- color: #1f1f1f;
447
- border: 1px solid rgba(0,0,0,.08);
484
+ background: var(--comty-surface);
485
+ color: var(--comty-foreground);
486
+ border: 0;
448
487
  box-shadow: 0 10px 28px rgba(0,0,0,.2);
449
488
  padding: 0;
450
489
  border-radius: 14px;
@@ -483,12 +522,12 @@ export function getComtyStyle() {
483
522
  gap: 12px;
484
523
  min-height: 40px;
485
524
  padding: 0 16px;
486
- border-bottom: 1px solid rgba(0,0,0,.1);
525
+ border-bottom: 1px solid var(--comty-border);
487
526
  }
488
527
 
489
528
  .comty-bubble-title {
490
529
  margin: 0;
491
- color: #1f1f1f;
530
+ color: var(--comty-foreground);
492
531
  font-size: 12px;
493
532
  font-weight: 600;
494
533
  line-height: 1;
@@ -503,7 +542,7 @@ export function getComtyStyle() {
503
542
 
504
543
  .comty-bubble-content {
505
544
  flex: 1;
506
- color: #1f1f1f;
545
+ color: var(--comty-foreground);
507
546
  font-size: 14px;
508
547
  line-height: 1.45;
509
548
  overflow-wrap: anywhere;
@@ -520,7 +559,7 @@ export function getComtyStyle() {
520
559
  border: none;
521
560
  padding: 0;
522
561
  background: transparent;
523
- color: #1f1f1f;
562
+ color: var(--comty-foreground);
524
563
  cursor: text;
525
564
  font: 14px/1.45 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
526
565
  outline: none;
@@ -545,7 +584,7 @@ export function getComtyStyle() {
545
584
  overflow-y: auto;
546
585
  overscroll-behavior: contain;
547
586
  scrollbar-width: thin;
548
- scrollbar-color: rgba(0,0,0,.22) transparent;
587
+ scrollbar-color: var(--comty-hover-surface) transparent;
549
588
  box-sizing: border-box;
550
589
  }
551
590
 
@@ -577,7 +616,7 @@ export function getComtyStyle() {
577
616
  .comty-comment-author-name {
578
617
  min-width: 0;
579
618
  overflow: hidden;
580
- color: #1f1f1f;
619
+ color: var(--comty-foreground);
581
620
  font-size: 14px;
582
621
  font-weight: 600;
583
622
  line-height: 1.25;
@@ -587,7 +626,7 @@ export function getComtyStyle() {
587
626
 
588
627
  .comty-comment-time {
589
628
  flex: 0 0 auto;
590
- color: #b3b3b3;
629
+ color: var(--comty-muted);
591
630
  font-size: 13px;
592
631
  font-weight: 400;
593
632
  line-height: 1.25;
@@ -600,8 +639,8 @@ export function getComtyStyle() {
600
639
  height: 24px;
601
640
  overflow: hidden;
602
641
  border-radius: 50%;
603
- background: #e6e6e6;
604
- color: #404040;
642
+ background: var(--comty-field-surface);
643
+ color: var(--comty-foreground);
605
644
  font-size: 10px;
606
645
  font-weight: 600;
607
646
  line-height: 1;
@@ -637,7 +676,7 @@ export function getComtyStyle() {
637
676
  border: 0;
638
677
  border-radius: 6px;
639
678
  background: transparent;
640
- color: #1f1f1f;
679
+ color: var(--comty-foreground);
641
680
  cursor: pointer;
642
681
  appearance: none;
643
682
  transition:
@@ -647,7 +686,7 @@ export function getComtyStyle() {
647
686
 
648
687
  .comty-icon-button:hover,
649
688
  .comty-icon-button:focus-visible {
650
- background: #f2f2f2;
689
+ background: var(--comty-hover-surface);
651
690
  outline: none;
652
691
  }
653
692
 
@@ -656,7 +695,7 @@ export function getComtyStyle() {
656
695
  }
657
696
 
658
697
  .comty-icon-button:disabled {
659
- color: #b3b3b3;
698
+ color: var(--comty-muted);
660
699
  cursor: default;
661
700
  }
662
701
 
@@ -679,7 +718,7 @@ export function getComtyStyle() {
679
718
  border: 0;
680
719
  border-radius: 6px;
681
720
  background: transparent;
682
- color: #1f1f1f;
721
+ color: var(--comty-foreground);
683
722
  cursor: pointer;
684
723
  appearance: none;
685
724
  font: 600 12px/1 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -690,7 +729,7 @@ export function getComtyStyle() {
690
729
 
691
730
  .comty-status-trigger:hover,
692
731
  .comty-status-trigger:focus-visible {
693
- background: #f2f2f2;
732
+ background: var(--comty-hover-surface);
694
733
  outline: none;
695
734
  }
696
735
 
@@ -699,7 +738,7 @@ export function getComtyStyle() {
699
738
  }
700
739
 
701
740
  .comty-status-trigger:disabled {
702
- color: #8c8c8c;
741
+ color: var(--comty-muted);
703
742
  cursor: default;
704
743
  }
705
744
 
@@ -726,12 +765,12 @@ export function getComtyStyle() {
726
765
  }
727
766
 
728
767
  .comty-popover-item.comty-popover-item-destructive {
729
- color: #dc2626;
768
+ color: var(--comty-agent-error);
730
769
  }
731
770
 
732
771
  .comty-popover-item.comty-popover-item-destructive:hover,
733
772
  .comty-popover-item.comty-popover-item-destructive:focus-visible {
734
- background: #fef2f2;
773
+ background: color-mix(in srgb, var(--comty-agent-error) 12%, var(--comty-surface));
735
774
  outline: none;
736
775
  }
737
776
 
@@ -749,7 +788,7 @@ export function getComtyStyle() {
749
788
  min-height: 36px;
750
789
  padding: 4px 8px 4px 16px;
751
790
  border-radius: 14px;
752
- background: #f5f5f5;
791
+ background: var(--comty-field-surface);
753
792
  box-sizing: border-box;
754
793
  transition: box-shadow 160ms ease;
755
794
  }
@@ -764,13 +803,13 @@ export function getComtyStyle() {
764
803
  padding: 0;
765
804
  border: 0;
766
805
  background: transparent;
767
- color: #1f1f1f;
806
+ color: var(--comty-foreground);
768
807
  font: 14px/1.3 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
769
808
  outline: none;
770
809
  }
771
810
 
772
811
  .comty-reply-input::placeholder {
773
- color: #b3b3b3;
812
+ color: var(--comty-muted);
774
813
  }
775
814
 
776
815
  .comty-reply-button {
@@ -800,7 +839,7 @@ export function getComtyStyle() {
800
839
  }
801
840
 
802
841
  .comty-reply-button:disabled {
803
- background: #d9d9d9;
842
+ background: var(--comty-hover-surface);
804
843
  cursor: default;
805
844
  }
806
845
 
@@ -818,7 +857,7 @@ export function getComtyStyle() {
818
857
  padding: 4px 16px;
819
858
  border: 0;
820
859
  border-radius: 14px;
821
- background: #f5f5f5;
860
+ background: var(--comty-field-surface);
822
861
  color: #0d99ff;
823
862
  text-align: left;
824
863
  font: 600 14px/1.3 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -826,7 +865,7 @@ export function getComtyStyle() {
826
865
  transition: background-color 160ms ease;
827
866
  }
828
867
 
829
- .comty-sign-in-reply:hover { background: #ececec; }
868
+ .comty-sign-in-reply:hover { background: var(--comty-hover-surface); }
830
869
  .comty-sign-in-reply:focus-visible { outline: 2px solid #0d99ff; outline-offset: 2px; }
831
870
 
832
871
  .comty-hover-bubble {
@@ -870,15 +909,32 @@ export function getComtyStyle() {
870
909
  font-size: 12px;
871
910
  }
872
911
 
873
- .comty-auth-backdrop { position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.35); font-family: sans-serif; }
874
- .comty-auth-dialog { width: min(360px, 100%); padding: 20px; border: 1px solid #ddd; border-radius: 12px; background: #fff; color: #111; box-shadow: 0 16px 48px rgba(0,0,0,.2); }
875
- .comty-auth-dialog h2 { margin: 0; font-size: 18px; line-height: 1.2; }
876
- .comty-auth-dialog p { margin: 7px 0 0; color: #6b7280; font-size: 14px; line-height: 1.45; }
877
- .comty-auth-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
878
- .comty-auth-actions button { padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 7px; background: #fff; color: #111; font: 600 13px/1 sans-serif; cursor: pointer; }
879
- .comty-auth-actions .comty-auth-primary { border-color: #111; background: #111; color: #fff; }
880
- .comty-auth-actions button:disabled { opacity: .6; cursor: wait; }
881
- .comty-auth-toast { position: fixed; top: 16px; left: 50%; z-index: 2147483647; transform: translateX(-50%); padding: 9px 12px; border: 1px solid #ddd; border-radius: 8px; background: #fff; color: #111; box-shadow: 0 8px 24px rgba(0,0,0,.15); font: 600 12px/1 sans-serif; }
912
+ .comty-auth-backdrop { position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center; padding: 1rem; background: var(--comty-dialog-backdrop); font-family: var(--comty-font); }
913
+ .comty-auth-dialog { box-sizing: border-box; width: min(var(--comty-dialog-width), 100%); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.75rem; border: 0; border-radius: var(--comty-dialog-radius); background: var(--comty-dialog-surface); color: var(--comty-dialog-ink); box-shadow: var(--comty-dialog-shadow); text-align: left; outline: none; }
914
+ .comty-auth-dialog *, .comty-auth-dialog *::before, .comty-auth-dialog *::after { box-sizing: border-box; }
915
+ .comty-auth-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
916
+ .comty-auth-icon, .comty-auth-close { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; background: var(--comty-dialog-field); color: var(--comty-dialog-ink); }
917
+ .comty-auth-icon { border-radius: .75rem; }
918
+ .comty-auth-close { border-radius: 50%; cursor: pointer; }
919
+ .comty-auth-header svg { width: 1.25rem; height: 1.25rem; }
920
+ .comty-auth-dialog h2 { margin: 0; color: inherit; font: 600 1.5rem/1.25 var(--comty-font); letter-spacing: -.025em; }
921
+ .comty-auth-dialog p { margin: 1rem 0 0; color: var(--comty-dialog-soft); font: 400 .875rem/1.65 var(--comty-font); }
922
+ .comty-auth-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: .0625rem solid var(--comty-dialog-line); }
923
+ .comty-auth-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; margin: 0; padding: .625rem 1rem; border: 0; border-radius: 999rem; background: transparent; color: var(--comty-dialog-soft); font: 500 .875rem/1.25 var(--comty-font); cursor: pointer; }
924
+ .comty-auth-actions button:hover, .comty-auth-close:hover { background: var(--comty-dialog-field); color: var(--comty-dialog-ink); }
925
+ .comty-auth-actions .comty-auth-primary { border-color: transparent; background: var(--comty-dialog-ink); color: var(--comty-dialog-surface); }
926
+ .comty-auth-actions .comty-auth-primary:hover { background: var(--comty-dialog-soft); color: var(--comty-dialog-surface); }
927
+ .comty-auth-dialog button:focus-visible { outline: .125rem solid var(--comty-dialog-ink); outline-offset: .1875rem; }
928
+ .comty-auth-dialog button:disabled { opacity: .5; cursor: wait; }
929
+ .comty-distance-layer { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--comty-measure); }
930
+ .comty-distance-line, .comty-distance-extension { stroke: currentColor; stroke-width: 1; fill: none; shape-rendering: crispEdges; }
931
+ .comty-distance-extension { stroke-dasharray: 3 3; opacity: .65; }
932
+ .comty-distance-arrow, .comty-distance-label, .comty-distance-snap { fill: currentColor; }
933
+ .comty-distance-value { fill: var(--comty-paper); font: 500 .75rem var(--comty-font); }
934
+ .comty-distance-announcement { position: absolute; width: .0625rem; height: .0625rem; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
935
+ html.comty-measure-vertical, html.comty-measure-vertical body *:not(#comty-root):not(#comty-root *) { cursor: ns-resize !important; }
936
+ html.comty-measure-horizontal, html.comty-measure-horizontal body *:not(#comty-root):not(#comty-root *) { cursor: ew-resize !important; }
937
+ .comty-auth-toast { position: fixed; top: 16px; left: 50%; z-index: 2147483647; transform: translateX(-50%); padding: 9px 12px; border: 0; border-radius: 8px; background: var(--comty-surface); color: var(--comty-foreground); box-shadow: 0 8px 24px rgba(0,0,0,.15); font: 600 12px/1 sans-serif; }
882
938
  .comty-auth-toast button { margin-left: .5rem; padding: .375rem .5rem; border: 0; border-radius: .375rem; background: var(--comty-accent); color: var(--comty-paper); cursor: pointer; font: inherit; }
883
939
 
884
940
  .comty-close {
@@ -891,7 +947,7 @@ export function getComtyStyle() {
891
947
  border: none;
892
948
  border-radius: 6px;
893
949
  background: transparent;
894
- color: #555;
950
+ color: var(--comty-muted);
895
951
  cursor: pointer;
896
952
  appearance: none;
897
953
  font: 18px/1 sans-serif;
@@ -899,8 +955,8 @@ export function getComtyStyle() {
899
955
 
900
956
  .comty-close:hover,
901
957
  .comty-close:focus-visible {
902
- background: #f3f4f6;
903
- color: #111;
958
+ background: var(--comty-field-surface);
959
+ color: var(--comty-foreground);
904
960
  outline: none;
905
961
  }
906
962
 
@@ -917,10 +973,10 @@ export function getComtyStyle() {
917
973
  max-width: 100%;
918
974
  min-height: 18px;
919
975
  padding: 2px 7px;
920
- border: 1px solid #e5e7eb;
976
+ border: 0;
921
977
  border-radius: 6px;
922
- background: #f8fafc;
923
- color: #475569;
978
+ background: var(--comty-field-surface);
979
+ color: var(--comty-muted);
924
980
  font-size: 11px;
925
981
  font-weight: 500;
926
982
  line-height: 1;
@@ -936,11 +992,11 @@ export function getComtyStyle() {
936
992
  gap: 8px;
937
993
  margin-top: 12px;
938
994
  padding-top: 10px;
939
- border-top: 1px solid #eef2f7;
995
+ border-top: 1px solid var(--comty-border);
940
996
  }
941
997
 
942
998
  .comty-status-label {
943
- color: #64748b;
999
+ color: var(--comty-muted);
944
1000
  font-size: 11px;
945
1001
  font-weight: 600;
946
1002
  }
@@ -965,10 +1021,10 @@ export function getComtyStyle() {
965
1021
  align-items: center;
966
1022
  gap: 6px;
967
1023
  min-height: 30px;
968
- border: 1px solid #e5e7eb;
1024
+ border: 0;
969
1025
  border-radius: 7px;
970
- background: white;
971
- color: #111827;
1026
+ background: var(--comty-surface);
1027
+ color: var(--comty-foreground);
972
1028
  padding: 4px 8px;
973
1029
  font: 600 12px/1.2 sans-serif;
974
1030
  cursor: pointer;
@@ -976,8 +1032,8 @@ export function getComtyStyle() {
976
1032
 
977
1033
  .comty-status-button:hover,
978
1034
  .comty-status-button:focus-visible {
979
- border-color: #d1d5db;
980
- background: #f9fafb;
1035
+ border-color: var(--comty-muted);
1036
+ background: var(--comty-hover-surface);
981
1037
  outline: none;
982
1038
  }
983
1039
 
@@ -1000,8 +1056,8 @@ export function getComtyStyle() {
1000
1056
  .comty-popover {
1001
1057
  position: fixed;
1002
1058
  z-index: 2147483646;
1003
- background: white;
1004
- border: 1px solid rgba(0,0,0,0.05);
1059
+ background: var(--comty-surface);
1060
+ border: 0;
1005
1061
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
1006
1062
  border-radius: 8px;
1007
1063
  padding: 4px;
@@ -1028,7 +1084,7 @@ export function getComtyStyle() {
1028
1084
  border-radius: 6px;
1029
1085
  cursor: pointer;
1030
1086
  font-size: 13px;
1031
- color: #111827;
1087
+ color: var(--comty-foreground);
1032
1088
  text-align: left;
1033
1089
  position: relative;
1034
1090
  }
@@ -1038,25 +1094,25 @@ export function getComtyStyle() {
1038
1094
  right: 8px;
1039
1095
  width: 14px;
1040
1096
  height: 14px;
1041
- color: #111827;
1097
+ color: var(--comty-foreground);
1042
1098
  }
1043
1099
 
1044
1100
  .comty-popover-item:hover {
1045
- background: #f3f4f6;
1101
+ background: var(--comty-field-surface);
1046
1102
  }
1047
1103
 
1048
1104
  .comty-popover-header {
1049
1105
  padding: 6px 8px;
1050
1106
  font-size: 11px;
1051
1107
  font-weight: 600;
1052
- color: #6b7280;
1108
+ color: var(--comty-muted);
1053
1109
  text-transform: uppercase;
1054
1110
  letter-spacing: 0.05em;
1055
1111
  }
1056
1112
 
1057
1113
  .comty-popover-divider {
1058
1114
  height: 1px;
1059
- background: #e5e7eb;
1115
+ background: var(--comty-border);
1060
1116
  margin: 4px 0;
1061
1117
  }
1062
1118
 
@@ -1078,9 +1134,14 @@ export function getComtyStyle() {
1078
1134
  .comty-layout-guide { display: grid; box-sizing: border-box; }
1079
1135
  .comty-layout-guide > span { background: var(--guide-color); min-width: 0; min-height: 0; }
1080
1136
  .comty-layout-grid { background-image: linear-gradient(to right, var(--guide-color) 1px, transparent 1px), linear-gradient(to bottom, var(--guide-color) 1px, transparent 1px); }
1081
- .comty-tool-panel { position: fixed; right: 1rem; bottom: 5rem; width: 18rem; max-width: calc(100vw - 2rem); max-height: calc(100vh - 7rem); overflow: auto; box-sizing: border-box; padding: .75rem; border: .0625rem solid var(--comty-border); border-radius: .75rem; background: var(--comty-paper); color: var(--comty-ink); box-shadow: var(--comty-floating-shadow); font: .8125rem/1.5 ui-sans-serif, system-ui, sans-serif; pointer-events: auto; z-index: 2147483647; }
1137
+ .comty-tool-panel { position: fixed; right: 1rem; bottom: 5rem; width: 18rem; max-width: calc(100vw - 2rem); max-height: calc(100vh - 7rem); overflow: auto; box-sizing: border-box; padding: .75rem; border: 0; border-radius: .75rem; background: var(--comty-surface); color: var(--comty-foreground); box-shadow: var(--comty-floating-shadow); font: .8125rem/1.5 ui-sans-serif, system-ui, sans-serif; pointer-events: auto; z-index: 2147483647; }
1082
1138
  .comty-tool-panel-header, .comty-guide-row { display: flex; align-items: center; gap: .5rem; }
1083
1139
  .comty-tool-panel-header { margin-bottom: .5rem; }
1140
+ .comty-tool-panel .comty-guide-select { justify-content: space-between; gap: .75rem; min-width: 6.5rem; padding: .375rem .5rem; border: 0; border-radius: .375rem; background: var(--comty-field-surface); }
1141
+ .comty-guide-select:focus-visible, .comty-guide-popover .comty-popover-item:focus-visible { outline: .125rem solid var(--comty-accent); outline-offset: .125rem; }
1142
+ .comty-guide-popover .comty-popover-item { justify-content: flex-start; padding: .375rem 2rem .375rem .5rem; }
1143
+ .comty-guide-popover .comty-popover-item-check svg { width: 100%; height: 100%; }
1144
+ .comty-guide-align { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
1084
1145
  .comty-tool-panel-header strong { flex: 1; white-space: nowrap; }
1085
1146
  .comty-tool-panel button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .375rem; border: 0; border-radius: .375rem; color: inherit; background: transparent; font: inherit; cursor: pointer; }
1086
1147
  .comty-tool-panel button:hover { background: var(--comty-border); }
@@ -1091,9 +1152,9 @@ export function getComtyStyle() {
1091
1152
  .comty-guide-item + .comty-guide-item { margin-top: .375rem; }
1092
1153
  .comty-guide-fields { display: grid; gap: .5rem; margin-block: .5rem; padding: .5rem; border-radius: .375rem; background: var(--comty-field-surface); }
1093
1154
  .comty-guide-fields label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
1094
- .comty-tool-panel input, .comty-tool-panel select { min-width: 0; width: 6rem; box-sizing: border-box; border: .0625rem solid var(--comty-border); border-radius: .25rem; padding: .25rem; background: var(--comty-paper); color: var(--comty-ink); font: inherit; }
1155
+ .comty-tool-panel input, .comty-tool-panel select { min-width: 0; width: 6rem; box-sizing: border-box; border: 0; border-radius: .25rem; padding: .25rem; background: var(--comty-surface); color: var(--comty-foreground); font: inherit; }
1095
1156
  .comty-tool-panel input[type="color"] { height: 1.75rem; padding: .125rem; }
1096
- .comty-ruler { position: fixed; background: var(--comty-paper); pointer-events: auto; touch-action: none; }
1157
+ .comty-ruler { position: fixed; background: var(--comty-surface); pointer-events: auto; touch-action: none; }
1097
1158
  .comty-ruler-horizontal { left: 0; top: 0; width: 100vw; height: 1.125rem; border-bottom: .0625rem solid var(--comty-border); cursor: ns-resize; }
1098
1159
  .comty-ruler-vertical { left: 0; top: 0; height: 100vh; width: 1.125rem; border-right: .0625rem solid var(--comty-border); cursor: ew-resize; }
1099
1160
  .comty-ruler-guide { position: fixed; padding: 0; margin: 0; border: 0; background: transparent; color: var(--comty-outline); pointer-events: auto; touch-action: none; }
@@ -1107,14 +1168,43 @@ export function getComtyStyle() {
1107
1168
  .comty-ruler-guide span { position: absolute; padding: .125rem .375rem; border-radius: .25rem; color: var(--comty-paper); background: var(--comty-ink); font: .625rem/1.5 ui-monospace, monospace; }
1108
1169
  .comty-ruler-guide-horizontal span { left: 1.5rem; top: .5rem; }
1109
1170
  .comty-ruler-guide-vertical span { top: 1.5rem; left: .5rem; }
1110
- .comty-tool-panel.comty-color-toast { display: flex; align-items: center; gap: .75rem; width: max-content; max-width: calc(100vw - 1rem); padding: .75rem; border: 0; border-radius: .9375rem; overflow: hidden; background: var(--comty-surface); color: var(--comty-foreground); }
1111
- .comty-color-toast[hidden] { display: none; }
1112
- .comty-color-content { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
1113
- .comty-color-token { color: var(--comty-muted); font: .75rem/1.5 ui-monospace, monospace; }
1114
- .comty-color-values { display: flex; align-items: center; gap: .375rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
1115
- .comty-color-rgb, .comty-color-separator, .comty-color-status { color: var(--comty-muted); }
1116
- .comty-color-status { font-size: .75rem; }
1117
- .comty-color-swatch { flex: 0 0 2.375rem; width: 2.375rem; height: 2.375rem; border: 0; border-radius: .375rem; }
1171
+ .comty-property-panel { position: fixed; z-index: 2147483646; width: max-content; max-width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); box-sizing: border-box; margin: 0; padding: .375rem; border: 0; border-radius: 1rem; background: var(--comty-toolbar-group); color: var(--comty-foreground); box-shadow: var(--comty-floating-shadow); font: var(--comty-property-font-size)/1.4 var(--comty-font); pointer-events: auto; overflow-x: hidden; overflow-y: auto; }
1172
+ html[data-comty-property-picking="color"], html[data-comty-property-picking="color"] body, html[data-comty-property-picking="color"] body :not(#comty-root):not(#comty-root *) { cursor: none !important; }
1173
+ html[data-comty-property-picking="font"] body :not(#comty-root):not(#comty-root *) { cursor: url("data:image/svg+xml,${encodeURIComponent(typographyCursor)}") 2 2, default !important; }
1174
+ .comty-property-panel[data-expanded] { width: var(--comty-property-width); }
1175
+ .comty-property-panel[hidden] { display: none; }
1176
+ .comty-color-magnifier { --comty-lens-rim: var(--comty-paper); --comty-lens-line: var(--comty-magnifier-gray); position: fixed; z-index: 2147483647; width: var(--comty-magnifier-size); height: var(--comty-magnifier-size); padding: var(--comty-magnifier-rim); box-sizing: border-box; border-radius: 50%; background: var(--comty-lens-rim); box-shadow: var(--comty-magnifier-shadow); transform: translate(-50%, -50%); pointer-events: none; }
1177
+ .comty-color-magnifier[data-tone="dark"] { --comty-lens-rim: var(--comty-magnifier-dark); --comty-lens-line: var(--comty-paper); }
1178
+ .comty-color-magnifier-glass { position: relative; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden; border: var(--comty-magnifier-line) solid var(--comty-lens-line); border-radius: 50%; }
1179
+ .comty-color-magnifier canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
1180
+ .comty-color-magnifier-glass::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--comty-lens-line) var(--comty-magnifier-grid-line), transparent var(--comty-magnifier-grid-line)), linear-gradient(to bottom, var(--comty-lens-line) var(--comty-magnifier-grid-line), transparent var(--comty-magnifier-grid-line)); background-size: calc(100% / 9) calc(100% / 9); opacity: .8; }
1181
+ .comty-color-magnifier-glass > span { position: absolute; z-index: 1; left: 50%; top: 50%; width: calc(100% / 9); height: calc(100% / 9); box-sizing: content-box; border: var(--comty-magnifier-line) solid var(--comty-lens-line); border-radius: .125rem; transform: translate(-50%, -50%); }
1182
+ .comty-property-panel button { display: inline-flex; align-items: center; justify-content: center; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
1183
+ .comty-property-panel button:focus-visible { outline: .0625rem solid var(--comty-accent); outline-offset: .0625rem; }
1184
+ .comty-property-detail { margin-bottom: .375rem; }
1185
+ .comty-property-rows { padding: .25rem .625rem .375rem; border-radius: .5rem; background: var(--comty-toolbar-surface); }
1186
+ .comty-property-row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: center; gap: .5rem; min-height: var(--comty-property-row-height); }
1187
+ .comty-property-row > span { color: var(--comty-muted); }
1188
+ .comty-property-row button { justify-content: space-between; gap: .5rem; text-align: left; }
1189
+ .comty-property-row button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
1190
+ .comty-property-row button[aria-label^="Copy Colour"] > span::before { content: ""; display: inline-block; width: .75rem; height: .75rem; margin-right: .375rem; border: .0625rem solid var(--comty-border); border-radius: .1875rem; background: var(--comty-picked-color); vertical-align: -.0625rem; }
1191
+ .comty-property-copy-icon { position: relative; flex: 0 0 .75rem; width: .75rem; height: .75rem; color: var(--comty-muted); opacity: .65; }
1192
+ .comty-property-row button:hover .comty-property-copy-icon, .comty-property-row button[data-copied] .comty-property-copy-icon { opacity: 1; }
1193
+ .comty-property-copy-icon svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 150ms var(--comty-ease-out), transform 150ms var(--comty-ease-out); }
1194
+ .comty-property-copy-icon svg:last-child { opacity: 0; transform: scale(.5); }
1195
+ .comty-property-row button[data-copied] svg:first-child { opacity: 0; transform: scale(.5); }
1196
+ .comty-property-row button[data-copied] svg:last-child { opacity: 1; transform: scale(1); }
1197
+ @media (prefers-reduced-motion: reduce) { .comty-property-copy-icon svg { transition: none; } }
1198
+ .comty-property-row button[disabled] { cursor: default; opacity: .5; }
1199
+ .comty-property-strip { display: flex; align-items: center; justify-content: center; gap: .375rem; }
1200
+ .comty-property-recent, .comty-property-empty { flex: 0 0 var(--comty-property-swatch); width: var(--comty-property-swatch); height: var(--comty-property-swatch); box-sizing: border-box; border-radius: .5rem; }
1201
+ .comty-property-panel .comty-property-recent { border: .0625rem solid var(--comty-border); font: 600 .875rem/1 var(--comty-font); }
1202
+ .comty-property-panel[data-kind="font"] .comty-property-recent { background: var(--comty-toolbar-surface); }
1203
+ .comty-property-panel .comty-property-recent[aria-pressed="true"] { outline: .0625rem solid var(--comty-muted); outline-offset: .0625rem; }
1204
+ .comty-property-panel .comty-property-recent[aria-pressed="true"]:focus-visible { outline-color: var(--comty-accent); }
1205
+ .comty-property-empty { border: .0625rem dashed var(--comty-border); }
1206
+ .comty-font-target { position: fixed; box-sizing: border-box; border: .0625rem solid var(--comty-accent); pointer-events: none; }
1207
+ .comty-property-feedback { display: block; height: 0; overflow: hidden; }
1118
1208
  .comty-motion-panel { width: 17.5rem; max-width: calc(100vw - 1rem); padding: var(--comty-toolbar-padding); border: 0; border-radius: .9375rem; background: var(--comty-surface); color: var(--comty-foreground); }
1119
1209
  .comty-motion-panel [hidden] { display: none !important; }
1120
1210
  .comty-motion-row { display: flex; align-items: center; gap: .375rem; }
@@ -1152,11 +1242,11 @@ export function getComtyStyle() {
1152
1242
  .comty-inspect-margin { --comty-spacing-color: var(--comty-margin-fill); }
1153
1243
  .comty-inspect-padding { --comty-spacing-color: var(--comty-padding-fill); }
1154
1244
  .comty-inspect-gap { --comty-spacing-color: var(--comty-gap-fill); }
1155
- .comty-inspect-spacing span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding-inline: .2rem; border-radius: .2rem; background: var(--comty-spacing-color); color: var(--comty-ink); font: 600 .625rem/1.3 ui-monospace, monospace; white-space: nowrap; }
1245
+ .comty-inspect-spacing span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding-inline: .2rem; border-radius: .2rem; background: var(--comty-spacing-color); color: var(--comty-foreground); font: 600 .625rem/1.3 ui-monospace, monospace; white-space: nowrap; }
1156
1246
  .comty-inspector {
1157
1247
  position: fixed; width: 15rem; max-width: calc(100vw - 1rem);
1158
1248
  padding-block: .5rem; border-radius: .5rem;
1159
- color: var(--comty-ink); background: var(--comty-paper);
1249
+ color: var(--comty-foreground); background: var(--comty-surface);
1160
1250
  box-shadow: var(--comty-floating-shadow); font: .625rem/1.5 ui-sans-serif, system-ui, sans-serif;
1161
1251
  pointer-events: none; box-sizing: border-box;
1162
1252
  }
@@ -1171,6 +1261,8 @@ export function getComtyStyle() {
1171
1261
  .comty-inspector button:focus-visible { outline: .125rem solid var(--comty-accent); outline-offset: .125rem; }
1172
1262
  .comty-inspector-value { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
1173
1263
  .comty-inspector-value > button, .comty-inspector-tokens button { max-width: 100%; }
1264
+ .comty-inspector-picker { display: inline-flex; align-items: center; gap: .25rem; }
1265
+ .comty-inspector-swatch { display: inline-block; flex: 0 0 .625rem; width: .625rem; height: .625rem; border: .0625rem solid var(--comty-border); border-radius: .1875rem; }
1174
1266
  .comty-inspector-tokens { display: flex; flex-direction: column; align-items: flex-end; max-width: 100%; }
1175
1267
  .comty-inspector-tokens button { font-family: ui-monospace, monospace; color: var(--comty-muted); }
1176
1268
  .comty-inspector-details { max-height: 50vh; overflow-y: auto; }
@@ -1181,8 +1273,8 @@ export function getComtyStyle() {
1181
1273
  .comty-create-bubble {
1182
1274
  position: fixed;
1183
1275
  z-index: 2147483647;
1184
- background: white;
1185
- border: 1px solid rgba(0,0,0,0.05);
1276
+ background: var(--comty-surface);
1277
+ border: 0;
1186
1278
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
1187
1279
  border-radius: 999px;
1188
1280
  width: 320px;
@@ -1216,13 +1308,13 @@ export function getComtyStyle() {
1216
1308
  outline: none;
1217
1309
  background: transparent;
1218
1310
  overflow-y: auto;
1219
- color: #111827;
1311
+ color: var(--comty-foreground);
1220
1312
  scrollbar-width: thin;
1221
1313
  scrollbar-color: gray transparent;
1222
1314
  }
1223
1315
 
1224
1316
  .comty-create-textarea::placeholder {
1225
- color: #9ca3af;
1317
+ color: var(--comty-muted);
1226
1318
  }
1227
1319
 
1228
1320
  .comty-create-actions {
@@ -1239,7 +1331,7 @@ export function getComtyStyle() {
1239
1331
  height: 32px;
1240
1332
  padding: 0;
1241
1333
  border-radius: 50%;
1242
- background: #e5e7eb;
1334
+ background: var(--comty-border);
1243
1335
  color: white;
1244
1336
  border: none;
1245
1337
  cursor: pointer;