From a170a780da0b3a77a88434fe562e79477e173d00 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Sat, 18 Jul 2026 07:24:50 +0300
Subject: [PATCH] feat(ui): unify accent tokens and transparent-idle field
 colors

- Unify all blues to a single accent: panel-focus and panel-selected now
  derive from the brand accent instead of one-off #4c8dff / #0d64d8
- Make panel-field transparent at idle (hover/focus fill) for a quieter,
  Figma-grade properties panel; panel-field-hover becomes the intent fill
- Denser controls: --spacing-control 26px -> 24px, radius-panel 4px -> 5px
- Neutralize panel-selected-muted (de-blued) for inactive-pane selection
- Mirror the same structure in the light theme
---
 src/app.css | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/app.css b/src/app.css
index da781610b..c28c2fb55 100644
--- a/src/app.css
+++ b/src/app.css
@@ -29,26 +29,26 @@
 }
 
 @theme {
-  --spacing-control: 26px;
+  --spacing-control: 24px;
   --spacing-panel-x: 12px;
   --spacing-panel-y: 8px;
   --spacing-panel: 6px;
   --spacing-panel-rail: 26px;
   --spacing-panel-icon: 14px;
-  --radius-panel: 4px;
+  --radius-panel: 5px;
 
   --color-panel: #2a2a2a;
   --color-panel-secondary: #242424;
-  --color-panel-field: #333333;
-  --color-panel-field-hover: #3b3b3b;
-  --color-panel-focus: #4c8dff;
-  --color-panel-selected: #0d64d8;
-  --color-panel-selected-muted: #344054;
+  --color-panel-field: transparent;
+  --color-panel-field-hover: #383838;
+  --color-panel-focus: #3b82f6;
+  --color-panel-selected: #2f6fdd;
+  --color-panel-selected-muted: #3d4450;
   --color-canvas: #1e1e1e;
   --color-border: #3a3a3a;
   --color-hover: #353535;
   --color-accent: #3b82f6;
-  --color-surface: #e0e0e0;
+  --color-surface: #f0f0f0;
   --color-muted: #888888;
   --color-input: #1e1e1e;
   --color-component: #9747ff;
@@ -76,16 +76,16 @@
 html[data-theme='light'] {
   --color-panel: #ffffff;
   --color-panel-secondary: #f7f8fa;
-  --color-panel-field: #f0f1f3;
-  --color-panel-field-hover: #e7e9ed;
+  --color-panel-field: transparent;
+  --color-panel-field-hover: #eceef1;
   --color-panel-focus: #2563eb;
-  --color-panel-selected: #dbeafe;
+  --color-panel-selected: #2563eb;
   --color-panel-selected-muted: #e5e7eb;
   --color-canvas: #f3f4f6;
   --color-border: #d8dce3;
   --color-hover: #eef1f5;
   --color-accent: #2563eb;
-  --color-surface: #202124;
+  --color-surface: #1f2328;
   --color-muted: #6b7280;
   --color-input: #ffffff;
   --color-component: #7c3aed;