@atezer/figma-mcp-bridge 1.7.12 → 1.7.14

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 (7) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/README.md +4 -1
  3. package/dist/core/plugin-bridge-server.js +1 -1
  4. package/dist/local-plugin-only.js +1 -1
  5. package/dist/local.js +1 -1
  6. package/f-mcp-plugin/ui.html +195 -52
  7. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -12,6 +12,42 @@ Bu dosya [Keep a Changelog](https://keepachangelog.com/tr/1.1.0/) biçimine uygu
12
12
 
13
13
  Bu changelog'a ekleme öncesi sürümlerin tam ayrıntıları için `git log` kullanılabilir.
14
14
 
15
+ ## [1.7.14] - 2026-04-07
16
+
17
+ ### Kurulum Deneyimi Iyilestirmesi
18
+
19
+ Kaynak: `fmcp-feedback.md` — terminal bilgisi olmayan kullanicinin kurulum zorlugu feedback'i.
20
+
21
+ - **`scripts/setup.sh`** eklendi: Node.js kontrolu, build, MCP config otomatik ayari — tek komutla kurulum
22
+ - **`scripts/setup-npx.sh`** eklendi: NPX ile kurulum — repo indirmeden, config otomatik
23
+ - **Plugin UI:** "auto port" → "otomatik baglanti aktif" mesaji; port input title'lari daha aciklayici
24
+ - **README.md** guncellendi: Otomatik kurulum bolumu
25
+ - **ONBOARDING.md** guncellendi: Tek komutluk kurulum referansi
26
+ - **KURULUM.md** guncellendi: Script referansi, surum guncelleme
27
+ - **FUTURE.md** guncellendi: Kurulum deneyimi hedefleri (pre-built binary, GUI installer)
28
+ - **TEST_REPORT.md** surum guncellendi
29
+
30
+ ## [1.7.13] - 2026-04-07
31
+
32
+ ### Plugin UI: Dark/Light Tema Uyumu ve Font Okunabilirliği
33
+
34
+ **Kök neden düzeltmesi:**
35
+ - **`@media (prefers-color-scheme: light)` kaldırıldı:** Figma plugin iframe'inde bu media query çalışmıyor. Figma `themeColors: true` ile `<html>` elementine `.figma-light` / `.figma-dark` class ekler — artık resmi Figma tema sistemi kullanılıyor.
36
+ - **`@media` fallback eklendi:** Browser preview ve Figma dışı ortamlarda da light tema çalışır (`:root:not(.figma-dark)` selector ile).
37
+
38
+ **Renk düzeltmeleri:**
39
+ - **17 CSS custom property tanımlandı:** `--fmcp-bg-subtle`, `--fmcp-text-secondary`, `--fmcp-border-light` vb. Dark tema varsayılan, `.figma-light` ve `@media light` ile override.
40
+ - **Tüm hardcoded `rgba(255,255,255,...)` inline renkler** CSS variable'lara çevrildi — light temada artık okunaklı.
41
+ - **Tüm `color: inherit` ve `color: #fff`** kaldırıldı, tema-uyumlu `var()` fallback'lere çevrildi.
42
+ - **Figma `--figma-color-*` variable fallback'leri** `var(--fmcp-*)` ile değiştirildi — Figma variable inject etmediğinde bile doğru renk.
43
+ - **3 JS dinamik renk** (`updateTokenUI`, `updatePortLabel`) `fmcpVar()` helper ile tema-uyumlu.
44
+
45
+ **Font okunabilirliği:**
46
+ - **Tüm font boyutları +2px büyütüldü:** body 11→13, label/toggle 10→12, info 9→11, note 8→10, icon 7→9.
47
+ - **Icon boyutları da +2px:** info butonları 13→15px, rate-limit info 11→13px (line-height uyumlu).
48
+
49
+ **Etkilenen alanlar:** Status bar, Advanced panel, Host/Port input, Port switcher, API Token section, Rate limit bar, Connections panel — tümü dark ve light temada okunaklı.
50
+
15
51
  ## [1.7.10] - 2026-04-05
16
52
 
17
53
  ### Doküman: Kapsamlı Güncelleme Rehberi
package/README.md CHANGED
@@ -34,6 +34,9 @@ Her şey **bilgisayarınızda** kalır. Tasarım verileriniz internete gönderil
34
34
  > 💡 **En kolay yol:** AI aracınıza (Claude, Cursor) şunu söyleyin:
35
35
  > *"@atezer/figma-mcp-bridge paketini kur ve Figma'ya bağlan"*
36
36
  > AI config'i ayarlar, bağlantıyı kurar. Aşağıdaki adımlar elle yapmak isteyenler için.
37
+ >
38
+ > **Otomatik kurulum:** Repo'yu clone ettiyseniz tek komutla: `bash scripts/setup.sh`
39
+ > (Node.js kontrolü, build, MCP config — hepsini otomatik yapar)
37
40
 
38
41
  ### 1. Node.js kurun (bir kerelik)
39
42
 
@@ -175,7 +178,7 @@ Detaylı sorun giderme: [TROUBLESHOOTING.md](docs/TROUBLESHOOTING.md)
175
178
 
176
179
  | Bilgi | Kaynak |
177
180
  |-------|--------|
178
- | Güncel sürüm | **1.7.10** ([package.json](package.json)) |
181
+ | Güncel sürüm | **1.7.14** ([package.json](package.json)) |
179
182
  | Değişiklik geçmişi | [CHANGELOG.md](CHANGELOG.md) |
180
183
  | GitHub sürümleri | [Releases](https://github.com/atezer/FMCP/releases) |
181
184
  | npm paketi | [@atezer/figma-mcp-bridge](https://www.npmjs.com/package/@atezer/figma-mcp-bridge) |
package/dist/core/plugin-bridge-server.js CHANGED
@@ -326,7 +326,7 @@ export class PluginBridgeServer {
326
326
  logger.info({ clientId, fileKey: incomingFileKey, fileName: incomingFileName }, "Plugin bridge: client registered (fileKey=%s, fileName=%s)", incomingFileKey, incomingFileName);
327
327
  ws.send(JSON.stringify({
328
328
  type: "welcome",
329
- bridgeVersion: "1.7.12",
329
+ bridgeVersion: "1.7.14",
330
330
  port: this.port,
331
331
  clientId,
332
332
  multiClient: true,
package/dist/local-plugin-only.js CHANGED
@@ -89,7 +89,7 @@ export async function main() {
89
89
  bridge.start();
90
90
  const server = new McpServer({
91
91
  name: "F-MCP ATezer Bridge (Plugin-only)",
92
- version: "1.7.12",
92
+ version: "1.7.14",
93
93
  });
94
94
  // ---- figma_list_connected_files (multi-client discovery) ----
95
95
  server.registerTool("figma_list_connected_files", {
package/dist/local.js CHANGED
@@ -48,7 +48,7 @@ class LocalFigmaMCP {
48
48
  this.variablesCache = new Map();
49
49
  this.server = new McpServer({
50
50
  name: "F-MCP ATezer (Local)",
51
- version: "1.7.12",
51
+ version: "1.7.14",
52
52
  });
53
53
  }
54
54
  /**
package/f-mcp-plugin/ui.html CHANGED
@@ -3,6 +3,25 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <style>
6
+ :root {
7
+ --fmcp-bg-subtle: rgba(255,255,255,0.06);
8
+ --fmcp-bg-panel: rgba(255,255,255,0.04);
9
+ --fmcp-bg-tip: rgba(255,255,255,0.05);
10
+ --fmcp-border-light: rgba(255,255,255,0.1);
11
+ --fmcp-border-subtle: rgba(255,255,255,0.08);
12
+ --fmcp-border-faint: rgba(255,255,255,0.25);
13
+ --fmcp-text-input: #fff;
14
+ --fmcp-text-secondary: rgba(255,255,255,0.5);
15
+ --fmcp-text-tertiary: rgba(255,255,255,0.4);
16
+ --fmcp-text-muted: rgba(255,255,255,0.35);
17
+ --fmcp-text-dim: rgba(255,255,255,0.3);
18
+ --fmcp-text-ghost: rgba(255,255,255,0.2);
19
+ --fmcp-text-select: rgba(255,255,255,0.6);
20
+ --fmcp-clear-bg: rgba(255,100,100,0.15);
21
+ --fmcp-clear-border: rgba(255,100,100,0.2);
22
+ --fmcp-clear-text: rgba(255,100,100,0.8);
23
+ }
24
+
6
25
  * {
7
26
  box-sizing: border-box;
8
27
  margin: 0;
@@ -18,9 +37,9 @@
18
37
 
19
38
  body {
20
39
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
21
- font-size: 11px;
40
+ font-size: 13px;
22
41
  background: var(--figma-color-bg, #2c2c2c);
23
- color: var(--figma-color-text, rgba(255, 255, 255, 0.9));
42
+ color: var(--figma-color-text, var(--fmcp-text-input));
24
43
  width: 100%;
25
44
  max-width: 100%;
26
45
  height: auto;
@@ -85,11 +104,11 @@
85
104
  }
86
105
 
87
106
  .status-text .label {
88
- color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.7));
107
+ color: var(--figma-color-text-secondary, var(--fmcp-text-secondary));
89
108
  }
90
109
 
91
110
  .status-text .state {
92
- color: var(--figma-color-text, rgba(255, 255, 255, 0.9));
111
+ color: var(--figma-color-text, var(--fmcp-text-input));
93
112
  margin-left: 4px;
94
113
  }
95
114
 
@@ -103,16 +122,16 @@
103
122
  .advanced-toggle {
104
123
  border: 1px solid var(--figma-color-border, #4a4a4a);
105
124
  background: transparent;
106
- color: inherit;
125
+ color: var(--figma-color-text, var(--fmcp-text-input));
107
126
  border-radius: 6px;
108
- font-size: 10px;
127
+ font-size: 12px;
109
128
  padding: 4px 8px;
110
129
  cursor: pointer;
111
130
  }
112
131
 
113
132
  .advanced-state {
114
- font-size: 10px;
115
- color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.7));
133
+ font-size: 12px;
134
+ color: var(--figma-color-text-secondary, var(--fmcp-text-secondary));
116
135
  }
117
136
 
118
137
  .advanced-panel {
@@ -133,10 +152,10 @@
133
152
  display: flex;
134
153
  align-items: center;
135
154
  gap: 6px;
136
- font-size: 10px;
155
+ font-size: 12px;
137
156
  }
138
157
  .bridge-host label, .bridge-port label {
139
- color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.7));
158
+ color: var(--figma-color-text-secondary, var(--fmcp-text-secondary));
140
159
  }
141
160
  .bridge-host input {
142
161
  width: 90px;
@@ -144,8 +163,8 @@
144
163
  background: var(--figma-color-bg-tertiary, #1e1e1e);
145
164
  border: 1px solid var(--figma-color-border, #4a4a4a);
146
165
  border-radius: 3px;
147
- color: inherit;
148
- font-size: 11px;
166
+ color: var(--figma-color-text, var(--fmcp-text-input));
167
+ font-size: 13px;
149
168
  }
150
169
  .bridge-port input {
151
170
  width: 56px;
@@ -153,17 +172,17 @@
153
172
  background: var(--figma-color-bg-tertiary, #1e1e1e);
154
173
  border: 1px solid var(--figma-color-border, #4a4a4a);
155
174
  border-radius: 3px;
156
- color: inherit;
157
- font-size: 11px;
175
+ color: var(--figma-color-text, var(--fmcp-text-input));
176
+ font-size: 13px;
158
177
  }
159
178
 
160
179
  .auto-port-reset {
161
180
  align-self: flex-start;
162
181
  border: 1px solid var(--figma-color-border, #4a4a4a);
163
182
  background: transparent;
164
- color: inherit;
183
+ color: var(--figma-color-text, var(--fmcp-text-input));
165
184
  border-radius: 6px;
166
- font-size: 10px;
185
+ font-size: 12px;
167
186
  padding: 4px 8px;
168
187
  cursor: pointer;
169
188
  }
@@ -172,26 +191,143 @@
172
191
  opacity: 0.9;
173
192
  }
174
193
 
175
- /* Light theme support */
194
+ /* Light theme — .figma-light: Figma injects on <html> when themeColors:true
195
+ @media fallback: browser preview & non-Figma environments */
196
+ .figma-light,
197
+ .fmcp-light {
198
+ --fmcp-bg-subtle: rgba(0,0,0,0.05);
199
+ --fmcp-bg-panel: rgba(0,0,0,0.03);
200
+ --fmcp-bg-tip: rgba(0,0,0,0.04);
201
+ --fmcp-border-light: rgba(0,0,0,0.12);
202
+ --fmcp-border-subtle: rgba(0,0,0,0.08);
203
+ --fmcp-border-faint: rgba(0,0,0,0.2);
204
+ --fmcp-text-input: #222;
205
+ --fmcp-text-secondary: #555;
206
+ --fmcp-text-tertiary: #666;
207
+ --fmcp-text-muted: #777;
208
+ --fmcp-text-dim: #888;
209
+ --fmcp-text-ghost: #999;
210
+ --fmcp-text-select: #444;
211
+ --fmcp-clear-bg: rgba(220,50,50,0.1);
212
+ --fmcp-clear-border: rgba(220,50,50,0.2);
213
+ --fmcp-clear-text: rgba(200,50,50,0.85);
214
+ }
176
215
  @media (prefers-color-scheme: light) {
177
- body {
216
+ :root:not(.figma-dark) {
217
+ --fmcp-bg-subtle: rgba(0,0,0,0.05);
218
+ --fmcp-bg-panel: rgba(0,0,0,0.03);
219
+ --fmcp-bg-tip: rgba(0,0,0,0.04);
220
+ --fmcp-border-light: rgba(0,0,0,0.12);
221
+ --fmcp-border-subtle: rgba(0,0,0,0.08);
222
+ --fmcp-border-faint: rgba(0,0,0,0.2);
223
+ --fmcp-text-input: #222;
224
+ --fmcp-text-secondary: #555;
225
+ --fmcp-text-tertiary: #666;
226
+ --fmcp-text-muted: #777;
227
+ --fmcp-text-dim: #888;
228
+ --fmcp-text-ghost: #999;
229
+ --fmcp-text-select: #444;
230
+ --fmcp-clear-bg: rgba(220,50,50,0.1);
231
+ --fmcp-clear-border: rgba(220,50,50,0.2);
232
+ --fmcp-clear-text: rgba(200,50,50,0.85);
233
+ }
234
+ }
235
+ .figma-light body,
236
+ .fmcp-light body {
237
+ background: var(--figma-color-bg, #f5f5f5);
238
+ color: var(--figma-color-text, #333);
239
+ }
240
+ @media (prefers-color-scheme: light) {
241
+ :root:not(.figma-dark) body {
178
242
  background: #f5f5f5;
179
243
  color: #333;
180
244
  }
181
- .bridge-status {
245
+ }
246
+ .figma-light .bridge-status,
247
+ .fmcp-light .bridge-status {
248
+ background: var(--figma-color-bg-secondary, #fff);
249
+ border-color: var(--figma-color-border, #e0e0e0);
250
+ }
251
+ .figma-light .advanced-panel,
252
+ .fmcp-light .advanced-panel {
253
+ background: var(--figma-color-bg-secondary, #fff);
254
+ border-color: var(--figma-color-border, #e0e0e0);
255
+ }
256
+ .figma-light .advanced-toggle,
257
+ .fmcp-light .advanced-toggle {
258
+ border-color: var(--figma-color-border, #ccc);
259
+ }
260
+ .figma-light .status-text .label,
261
+ .fmcp-light .status-text .label {
262
+ color: var(--figma-color-text-secondary, #666);
263
+ }
264
+ .figma-light .status-text .state,
265
+ .fmcp-light .status-text .state {
266
+ color: var(--figma-color-text, #333);
267
+ }
268
+ .figma-light .bridge-host input,
269
+ .figma-light .bridge-port input,
270
+ .fmcp-light .bridge-host input,
271
+ .fmcp-light .bridge-port input {
272
+ background: var(--figma-color-bg-tertiary, #f0f0f0);
273
+ border-color: var(--figma-color-border, #ccc);
274
+ color: var(--figma-color-text, #333);
275
+ }
276
+ .figma-light .auto-port-reset,
277
+ .fmcp-light .auto-port-reset {
278
+ border-color: var(--figma-color-border, #ccc);
279
+ }
280
+ .figma-light .advanced-state,
281
+ .fmcp-light .advanced-state {
282
+ color: var(--figma-color-text-secondary, #666);
283
+ }
284
+ .figma-light .advanced-toggle,
285
+ .fmcp-light .advanced-toggle {
286
+ color: var(--figma-color-text, #333);
287
+ }
288
+ .figma-light .bridge-host label,
289
+ .figma-light .bridge-port label,
290
+ .fmcp-light .bridge-host label,
291
+ .fmcp-light .bridge-port label {
292
+ color: var(--figma-color-text-secondary, #666);
293
+ }
294
+ @media (prefers-color-scheme: light) {
295
+ :root:not(.figma-dark) .bridge-status {
182
296
  background: #fff;
183
- border-color: #e5e5e5;
297
+ border-color: #e0e0e0;
184
298
  }
185
- .advanced-panel {
299
+ :root:not(.figma-dark) .advanced-panel {
186
300
  background: #fff;
187
- border-color: #e5e5e5;
301
+ border-color: #e0e0e0;
302
+ }
303
+ :root:not(.figma-dark) .advanced-toggle {
304
+ border-color: #ccc;
305
+ }
306
+ :root:not(.figma-dark) .status-text .label {
307
+ color: #666;
308
+ }
309
+ :root:not(.figma-dark) .status-text .state {
310
+ color: #333;
311
+ }
312
+ :root:not(.figma-dark) .bridge-host input,
313
+ :root:not(.figma-dark) .bridge-port input {
314
+ background: #f0f0f0;
315
+ border-color: #ccc;
316
+ color: #333;
317
+ }
318
+ :root:not(.figma-dark) .auto-port-reset {
319
+ border-color: #ccc;
188
320
  }
189
- .status-text .label {
321
+ :root:not(.figma-dark) .advanced-state {
190
322
  color: #666;
191
323
  }
192
- .status-text .state {
324
+ :root:not(.figma-dark) .advanced-toggle {
193
325
  color: #333;
194
326
  }
327
+ :root:not(.figma-dark) .bridge-host label,
328
+ :root:not(.figma-dark) .bridge-port label {
329
+ color: #666;
330
+ }
195
331
  }
196
332
  </style>
197
333
  </head>
@@ -202,73 +338,80 @@
202
338
  <div class="status-text">
203
339
  <span class="label">MCP</span>
204
340
  <span class="state" id="status-state">connecting</span>
205
- <span id="status-info-btn" onclick="var p=document.getElementById('connections-panel');if(p){p.style.display=p.style.display==='block'?'none':'block';requestUiResize();}" style="display:none;cursor:pointer;margin-left:4px;font-size:9px;width:13px;height:13px;border-radius:50%;border:1px solid rgba(255,255,255,0.25);color:rgba(255,255,255,0.4);text-align:center;line-height:13px;user-select:none;">i</span>
341
+ <span id="status-info-btn" onclick="var p=document.getElementById('connections-panel');if(p){p.style.display=p.style.display==='block'?'none':'block';requestUiResize();}" style="display:none;cursor:pointer;margin-left:4px;font-size:11px;width:15px;height:15px;border-radius:50%;border:1px solid var(--fmcp-border-faint);color:var(--fmcp-text-tertiary);text-align:center;line-height:15px;user-select:none;">i</span>
206
342
  </div>
207
343
  </div>
208
- <div id="connections-panel" style="display:none;padding:6px 10px;background:rgba(255,255,255,0.04);border-radius:5px;font-size:9px;color:rgba(255,255,255,0.4);line-height:1.6;">
344
+ <div id="connections-panel" style="display:none;padding:6px 10px;background:var(--fmcp-bg-panel);border-radius:5px;font-size:11px;color:var(--fmcp-text-tertiary);line-height:1.6;">
209
345
  <div id="connections-panel-list">—</div>
210
346
  </div>
211
347
  <div class="advanced-wrap">
212
348
  <button id="advanced-toggle" class="advanced-toggle" type="button">Advanced</button>
213
- <span id="advanced-state" class="advanced-state">auto port</span>
349
+ <span id="advanced-state" class="advanced-state">otomatik bağlantı aktif</span>
214
350
  </div>
215
351
  <div id="advanced-panel" class="advanced-panel">
216
352
  <div class="bridge-host" title="Host: localhost (aynı makine) veya IP adresi (uzak makine). Browser Figma'da da çalışır.">
217
353
  <label for="mcp-host">Host</label>
218
354
  <input type="text" id="mcp-host" value="localhost" placeholder="localhost" aria-label="MCP bridge host (localhost veya IP)" />
219
355
  </div>
220
- <div class="bridge-port" title="Port elle belirtilmezse bridge'in dinlediği porta otomatik bağlanır (5454-5470 aralığı).">
356
+ <div class="bridge-port" title="Port otomatik bulunur (5454-5470). Elle değiştirmeniz gerekmez — sadece sorun yaşarsanız kullanın.">
221
357
  <label for="mcp-port">Port</label>
222
- <input type="number" id="mcp-port" min="5454" max="5470" value="5454" aria-label="MCP bridge port (auto fallback 5454-5470)" title="Elle değiştirirseniz tek porta kilitlenir; Otomatik tara veya Advanced'ı kapatın." />
358
+ <input type="number" id="mcp-port" min="5454" max="5470" value="5454" aria-label="MCP bridge port (auto fallback 5454-5470)" title="Normalde değiştirmeniz gerekmez. Elle değiştirirseniz otomatik tarama durur — Advanced'ı kapatarak sıfırlayabilirsiniz." />
223
359
  </div>
224
360
  <div id="port-switcher" style="display:flex;align-items:center;gap:4px;margin-top:4px;">
225
- <button type="button" id="port-prev" onclick="switchActivePort(-1)" style="font-size:10px;padding:1px 5px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:3px;color:rgba(255,255,255,0.5);cursor:pointer;">◀</button>
226
- <span id="port-label" style="font-size:10px;color:rgba(255,255,255,0.4);flex:1;text-align:center;">—</span>
227
- <button type="button" id="port-next" onclick="switchActivePort(1)" style="font-size:10px;padding:1px 5px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:3px;color:rgba(255,255,255,0.5);cursor:pointer;">▶</button>
361
+ <button type="button" id="port-prev" onclick="switchActivePort(-1)" style="font-size:12px;padding:1px 5px;background:var(--fmcp-bg-subtle);border:1px solid var(--fmcp-border-light);border-radius:3px;color:var(--fmcp-text-secondary);cursor:pointer;">◀</button>
362
+ <span id="port-label" style="font-size:12px;color:var(--fmcp-text-tertiary);flex:1;text-align:center;">—</span>
363
+ <button type="button" id="port-next" onclick="switchActivePort(1)" style="font-size:12px;padding:1px 5px;background:var(--fmcp-bg-subtle);border:1px solid var(--fmcp-border-light);border-radius:3px;color:var(--fmcp-text-secondary);cursor:pointer;">▶</button>
228
364
  </div>
229
- <div class="api-token-section" style="margin-top:8px;border-top:1px solid rgba(255,255,255,0.08);padding-top:8px;">
365
+ <div class="api-token-section" style="margin-top:8px;border-top:1px solid var(--fmcp-border-subtle);padding-top:8px;">
230
366
  <div style="display:flex;align-items:center;gap:6px;">
231
- <label for="figma-token" style="font-size:11px;color:rgba(255,255,255,0.5);white-space:nowrap;">API Token</label>
232
- <input type="password" id="figma-token" placeholder="figd_..." style="flex:1;min-width:0;font-size:11px;padding:3px 6px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:4px;color:#fff;outline:none;" aria-label="Figma REST API token" />
233
- <select id="token-expiry" style="font-size:10px;padding:2px 3px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:3px;color:rgba(255,255,255,0.6);outline:none;" title="Token süresi (Figma'da seçtiğiniz süre)">
367
+ <label for="figma-token" style="font-size:13px;color:var(--fmcp-text-secondary);white-space:nowrap;">API Token</label>
368
+ <input type="password" id="figma-token" placeholder="figd_..." style="flex:1;min-width:0;font-size:13px;padding:3px 6px;background:var(--fmcp-bg-subtle);border:1px solid var(--fmcp-border-light);border-radius:4px;color:var(--fmcp-text-input);outline:none;" aria-label="Figma REST API token" />
369
+ <select id="token-expiry" style="font-size:12px;padding:2px 3px;background:var(--fmcp-bg-subtle);border:1px solid var(--fmcp-border-light);border-radius:3px;color:var(--fmcp-text-select);outline:none;" title="Token süresi (Figma'da seçtiğiniz süre)">
234
370
  <option value="90">90g</option>
235
371
  <option value="30">30g</option>
236
372
  <option value="7">7g</option>
237
373
  <option value="1">1g</option>
238
374
  </select>
239
- <button type="button" id="clear-token" style="font-size:10px;padding:2px 6px;background:rgba(255,100,100,0.15);border:1px solid rgba(255,100,100,0.2);border-radius:3px;color:rgba(255,100,100,0.8);cursor:pointer;" title="Token'ı temizle">x</button>
375
+ <button type="button" id="clear-token" style="font-size:12px;padding:2px 6px;background:var(--fmcp-clear-bg);border:1px solid var(--fmcp-clear-border);border-radius:3px;color:var(--fmcp-clear-text);cursor:pointer;" title="Token'ı temizle">x</button>
240
376
  </div>
241
- <div id="token-status" style="font-size:10px;color:rgba(255,255,255,0.35);margin-top:3px;display:none;"></div>
242
- <div id="token-expiry-info" style="font-size:9px;color:rgba(255,255,255,0.3);margin-top:2px;display:none;"></div>
243
- <div id="token-expiry-note" style="font-size:8px;color:rgba(255,255,255,0.2);margin-top:1px;display:none;">Figma'daki token suresiyle eslestiginden emin olun</div>
377
+ <div id="token-status" style="font-size:12px;color:var(--fmcp-text-muted);margin-top:3px;display:none;"></div>
378
+ <div id="token-expiry-info" style="font-size:11px;color:var(--fmcp-text-dim);margin-top:2px;display:none;"></div>
379
+ <div id="token-expiry-note" style="font-size:10px;color:var(--fmcp-text-ghost);margin-top:1px;display:none;">Figma'daki token suresiyle eslestiginden emin olun</div>
244
380
  <div id="rate-limit-bar" style="display:none;margin-top:4px;">
245
- <div style="display:flex;justify-content:space-between;align-items:center;font-size:9px;color:rgba(255,255,255,0.4);">
246
- <span style="display:flex;align-items:center;gap:3px;">API Limit <span id="rate-limit-info" onclick="var t=document.getElementById('rate-limit-tip');if(t)t.style.display=t.style.display==='block'?'none':'block';" style="cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:11px;height:11px;border-radius:50%;border:1px solid rgba(255,255,255,0.25);font-size:7px;color:rgba(255,255,255,0.4);user-select:none;">i</span></span>
381
+ <div style="display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--fmcp-text-tertiary);">
382
+ <span style="display:flex;align-items:center;gap:3px;">API Limit <span id="rate-limit-info" onclick="var t=document.getElementById('rate-limit-tip');if(t)t.style.display=t.style.display==='block'?'none':'block';" style="cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:50%;border:1px solid var(--fmcp-border-faint);font-size:9px;color:var(--fmcp-text-tertiary);user-select:none;">i</span></span>
247
383
  <span id="rate-limit-text">—</span>
248
384
  </div>
249
- <div id="rate-limit-tip" style="display:none;font-size:8px;color:rgba(255,255,255,0.35);margin-top:3px;padding:4px 6px;background:rgba(255,255,255,0.05);border-radius:3px;line-height:1.5;">
250
- <div style="margin-bottom:3px;color:rgba(255,255,255,0.5);">Limiti ne tuketir?</div>
385
+ <div id="rate-limit-tip" style="display:none;font-size:10px;color:var(--fmcp-text-muted);margin-top:3px;padding:4px 6px;background:var(--fmcp-bg-tip);border-radius:3px;line-height:1.5;">
386
+ <div style="margin-bottom:3px;color:var(--fmcp-text-secondary);">Limiti ne tuketir?</div>
251
387
  <div>&#x25CB; Yorum okuma/yazma</div>
252
388
  <div>&#x25CB; Versiyon gecmisi</div>
253
389
  <div>&#x25CB; Gorsel export (REST ile)</div>
254
390
  <div>&#x25CB; Dosya bilgisi (REST ile)</div>
255
- <div style="margin-top:3px;color:rgba(255,255,255,0.5);">Limiti tuketmeyen (sinirsiz):</div>
391
+ <div style="margin-top:3px;color:var(--fmcp-text-secondary);">Limiti tuketmeyen (sinirsiz):</div>
256
392
  <div>&#x25CF; Dosya okuma, yazma, silme</div>
257
393
  <div>&#x25CF; Variable/token yonetimi</div>
258
394
  <div>&#x25CF; Bilesen arama, export (plugin)</div>
259
395
  <div>&#x25CF; Screenshot, frame olusturma</div>
260
396
  </div>
261
- <div style="height:3px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden;margin-top:2px;">
397
+ <div style="height:3px;background:var(--fmcp-border-subtle);border-radius:2px;overflow:hidden;margin-top:2px;">
262
398
  <div id="rate-limit-fill" style="height:100%;background:#4ecdc4;border-radius:2px;transition:width 0.3s;width:100%;"></div>
263
399
  </div>
264
- <div id="rate-limit-note" style="font-size:8px;color:rgba(255,255,255,0.2);margin-top:2px;display:none;">REST API cagrisi sonrasi guncellenir</div>
265
- <div id="rate-limit-warning" style="display:none;font-size:9px;margin-top:2px;font-weight:600;"></div>
400
+ <div id="rate-limit-note" style="font-size:10px;color:var(--fmcp-text-ghost);margin-top:2px;display:none;">REST API cagrisi sonrasi guncellenir</div>
401
+ <div id="rate-limit-warning" style="display:none;font-size:11px;margin-top:2px;font-weight:600;"></div>
266
402
  </div>
267
403
  </div>
268
404
  </div>
269
405
  </div>
270
406
 
271
407
  <script>
408
+ // ============================================================================
409
+ // THEME HELPER — read CSS custom properties for dark/light compat
410
+ // ============================================================================
411
+ function fmcpVar(name) {
412
+ return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
413
+ }
414
+
272
415
  // ============================================================================
273
416
  // GLOBAL STATE - Data storage for Puppeteer/MCP access
274
417
  // ============================================================================
@@ -948,7 +1091,7 @@
948
1091
  panel.classList.toggle('is-open', !!open);
949
1092
  }
950
1093
  if (state) {
951
- state.textContent = open ? 'manual controls' : 'auto port';
1094
+ state.textContent = open ? 'manuel kontrol' : 'otomatik bağlantı aktif';
952
1095
  }
953
1096
  try { localStorage.setItem(MCP_ADVANCED_OPEN_KEY, open ? '1' : '0'); } catch (e) {}
954
1097
  if (open) {
@@ -972,7 +1115,7 @@
972
1115
  if (statusEl) {
973
1116
  statusEl.style.display = 'block';
974
1117
  statusEl.textContent = hasToken ? 'Token aktif' : 'Token yok';
975
- statusEl.style.color = hasToken ? 'rgba(78,205,196,0.8)' : 'rgba(255,255,255,0.35)';
1118
+ statusEl.style.color = hasToken ? 'rgba(78,205,196,0.8)' : fmcpVar('--fmcp-text-muted');
976
1119
  }
977
1120
  // Expiry countdown
978
1121
  if (expiryEl) {
@@ -988,7 +1131,7 @@
988
1131
  expiryEl.style.display = 'block';
989
1132
  var expDate = new Date(expiresAt);
990
1133
  expiryEl.textContent = daysLeft + ' gun kaldi (' + expDate.toLocaleDateString('tr-TR') + ')';
991
- expiryEl.style.color = daysLeft <= 7 ? 'rgba(249,193,79,0.8)' : 'rgba(255,255,255,0.35)';
1134
+ expiryEl.style.color = daysLeft <= 7 ? 'rgba(249,193,79,0.8)' : fmcpVar('--fmcp-text-muted');
992
1135
  }
993
1136
  } else {
994
1137
  expiryEl.style.display = 'none';
@@ -1740,7 +1883,7 @@
1740
1883
  });
1741
1884
  if (ports.length === 0) {
1742
1885
  label.textContent = '—';
1743
- label.style.color = 'rgba(255,255,255,0.3)';
1886
+ label.style.color = fmcpVar('--fmcp-text-dim');
1744
1887
  } else if (ports.length === 1) {
1745
1888
  label.textContent = ports[0].port + ' (' + ports[0].clientName + ')';
1746
1889
  label.style.color = 'rgba(78,205,196,0.8)';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atezer/figma-mcp-bridge",
3
- "version": "1.7.12",
3
+ "version": "1.7.14",
4
4
  "description": "F-MCP ATezer: MCP server and Figma plugin bridge for Claude/Cursor. No REST token required.",
5
5
  "type": "module",
6
6
  "main": "dist/local.js",