refactor(theme): 工作区/连接侧栏/命令面板颜色语义变量化（徽章文本按 -fg 分流）

src/renderer/src/commands/commands.css

@@ -50,24 +50,24 @@
   flex: 1 1 auto;
   font-size: 11px;
   font-weight: 600;
-  color: #8a8a8a;
+  color: var(--ot-text-muted, #8a8a8a);
   letter-spacing: 0.6px;
 }
 
 .commands-clear-btn {
-  color: #8a8a8a;
+  color: var(--ot-text-muted, #8a8a8a);
   font-size: 11px;
   padding: 0 2px;
 }
 
 .commands-clear-btn:hover {
-  color: #cf6679 !important;
+  color: var(--ot-danger-fg, #cf6679) !important;
 }
 
 .commands-empty {
   padding: 20px 8px;
   text-align: center;
-  color: #8a8a8a;
+  color: var(--ot-text-muted, #8a8a8a);
   font-size: 12px;
 }
 
@@ -110,7 +110,7 @@
 
 .commands-row-sub {
   font-size: 11px;
-  color: #8a8a8a;
+  color: var(--ot-text-muted, #8a8a8a);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -120,7 +120,7 @@
 .commands-row-del {
   flex: 0 0 auto;
   display: none;
-  color: #9a9a9a;
+  color: var(--ot-text-muted, #9a9a9a);
 }
 
 .commands-row:hover .commands-row-del {
@@ -128,7 +128,7 @@
 }
 
 .commands-row-del:hover {
-  color: #cf6679 !important;
+  color: var(--ot-danger-fg, #cf6679) !important;
 }
 
 /* ---- add-library modal ---- */
@@ -141,7 +141,7 @@
 /* IPC/store failure during save: shown inside the dialog (in the app's danger
    colour) so a failed save is visible instead of a silent no-op. */
 .commands-save-error {
-  color: #f85149;
+  color: var(--ot-danger-fg, #f85149);
   font-size: 12px;
   word-break: break-all;
 }

src/renderer/src/connections/connections.css

@@ -70,15 +70,15 @@
 .connections-group-count {
   flex: 0 0 auto;
   font-size: 11px;
-  color: #8a8a8a;
+  color: var(--ot-text-muted, #8a8a8a);
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--ot-hover, rgba(255, 255, 255, 0.08));
   border-radius: 9px;
   padding: 0 7px;
   line-height: 18px;
 }
 
 .connections-collapse .ant-collapse-item {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid var(--ot-border, rgba(255, 255, 255, 0.05));
 }
 
 .connections-collapse .ant-collapse-item:last-child {
@@ -129,7 +129,7 @@
 
 .connections-row-sub {
   font-size: 11px;
-  color: #8a8a8a;
+  color: var(--ot-text-muted, #8a8a8a);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -143,8 +143,8 @@
   line-height: 1;
   padding: 2px 5px;
   border-radius: 4px;
-  color: #9a9a9a;
+  color: var(--ot-text-muted, #9a9a9a);
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--ot-hover, rgba(255, 255, 255, 0.08));
 }
 
 .connections-row-actions {
@@ -159,12 +159,12 @@
 }
 
 .connections-row-actions .ant-btn {
-  color: #9a9a9a;
+  color: var(--ot-text-muted, #9a9a9a);
 }
 
 .connections-row-actions .ant-btn-text:hover {
-  color: #ffffff;
+  color: var(--ot-text, #ffffff);
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--ot-hover, rgba(255, 255, 255, 0.1));
 }
 
 /* ---------- empty state ---------- */
@@ -172,7 +172,7 @@
 .connections-empty {
   padding: 28px 8px;
   text-align: center;
-  color: #8a8a8a;
+  color: var(--ot-text-muted, #8a8a8a);
   font-size: 12px;
   line-height: 20px;
 }
@@ -186,14 +186,14 @@
 }
 
 .connections-form-section {
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  border-top: 1px solid var(--ot-border, rgba(255, 255, 255, 0.08));
   padding-top: 8px;
 }
 
 .connections-form-section-title {
   font-size: 12px;
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.55);
+  color: var(--ot-text-secondary, rgba(255, 255, 255, 0.55));
   letter-spacing: 0.5px;
   margin: 10px 0 0;
 }
@@ -207,12 +207,12 @@
 }
 
 .connections-switch-label {
-  color: rgba(255, 255, 255, 0.88);
+  color: var(--ot-text, rgba(255, 255, 255, 0.88));
   font-size: 13px;
 }
 
 .connections-switch-hint {
-  color: rgba(255, 255, 255, 0.45);
+  color: var(--ot-text-muted, rgba(255, 255, 255, 0.45));
   font-size: 12px;
   margin-top: 2px;
 }
@@ -245,7 +245,7 @@
   flex: 1 1 auto;
   min-width: 0;
   font-size: 12px;
-  color: #cf6679;
+  color: var(--ot-danger-fg, #cf6679);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -255,7 +255,7 @@
 .connections-empty-create {
   border: none;
   background: none;
-  color: #8a8a8a;
+  color: var(--ot-text-muted, #8a8a8a);
   font: inherit;
   cursor: pointer;
   padding: 4px 8px;
@@ -263,7 +263,7 @@
 }
 
 .connections-empty-create:hover {
-  color: #ffffff;
+  color: var(--ot-text, #ffffff);
   background: var(--chrome-hover);
 }
 
@@ -292,15 +292,15 @@
   flex: 1 1 auto;
   font-size: 11px;
   font-weight: 600;
-  color: #8a8a8a;
+  color: var(--ot-text-muted, #8a8a8a);
   letter-spacing: 0.6px;
 }
 
 .connections-section-count {
   flex: 0 0 auto;
   font-size: 11px;
-  color: #8a8a8a;
+  color: var(--ot-text-muted, #8a8a8a);
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--ot-hover, rgba(255, 255, 255, 0.08));
   border-radius: 9px;
   padding: 0 7px;
   line-height: 18px;
@@ -308,7 +308,7 @@
 
 .connections-section-empty {
   padding: 10px 8px;
-  color: #6a6a6a;
+  color: var(--ot-text-muted, #6a6a6a);
   font-size: 12px;
 }
 
@@ -332,7 +332,7 @@
 }
 
 .connections-local-list::-webkit-scrollbar-thumb {
-  background: rgba(121, 121, 121, 0.45);
+  background: var(--ot-scrollbar, rgba(121, 121, 121, 0.45));
   border-radius: 4px;
 }
 
@@ -370,8 +370,8 @@
   line-height: 1;
   padding: 2px 5px;
   border-radius: 4px;
-  color: #9a9a9a;
+  color: var(--ot-text-muted, #9a9a9a);
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--ot-hover, rgba(255, 255, 255, 0.08));
 }
 
 /* recent sessions */
@@ -386,7 +386,7 @@
 .connections-recent-title {
   font-size: 11px;
   font-weight: 600;
-  color: #8a8a8a;
+  color: var(--ot-text-muted, #8a8a8a);
   letter-spacing: 0.6px;
 }
 
@@ -422,7 +422,7 @@
 .connections-recent-time {
   flex: 0 0 auto;
   font-size: 11px;
-  color: #6a6a6a;
+  color: var(--ot-text-muted, #6a6a6a);
 }
 
 /* [M5] command history/library sidebar section fills the rest of the list. */

src/renderer/src/workspace/workspace.css

@@ -79,10 +79,10 @@
   display: flex;
   flex-direction: column;
   gap: 2px;
-  background: #1f1f1f;
+  background: var(--ot-surface-raised, #1f1f1f);
   border: 1px solid var(--chrome-border);
   border-radius: 8px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+  box-shadow: 0 8px 24px var(--ot-shadow, rgba(0, 0, 0, 0.45));
 }
 
 .workspace-flyout-item {
@@ -93,7 +93,7 @@
   border: none;
   border-radius: 5px;
   background: transparent;
-  color: rgba(255, 255, 255, 0.85);
+  color: var(--ot-text, rgba(255, 255, 255, 0.85));
   font-size: 13px;
   text-align: left;
   white-space: nowrap;
@@ -102,7 +102,7 @@
 
 .workspace-flyout-item:hover {
   background: var(--chrome-hover);
-  color: #ffffff;
+  color: var(--ot-text, #ffffff);
 }
 
 .workspace-flyout-divider {
@@ -177,8 +177,8 @@
   --dv-tabs-and-actions-container-height: 28px;
   --dv-tab-divider-color: transparent;
   /* Pane split dividers: soft slate band at rest, accent blue on hover/drag. */
-  --dv-sash-color: rgba(148, 163, 184, 0.28);
+  --dv-sash-color: var(--ot-border, rgba(148, 163, 184, 0.28));
-  --dv-active-sash-color: rgba(59, 142, 234, 0.75);
+  --dv-active-sash-color: var(--ot-info, rgba(59, 142, 234, 0.75));
   /* Tab surfaces. Dockview paints tabs through group-scoped rules that
      outspecify our .dv-tab rules, so theme the tabs via the vars those rules
      consume — otherwise the abyss defaults (dark navy) leak onto light themes. */
@@ -276,13 +276,13 @@
 }
 
 .workspace-empty-title {
-  color: #8a8a8a;
+  color: var(--ot-text-muted, #8a8a8a);
   font-size: 14px;
   user-select: none;
 }
 
 .workspace-empty-hint {
-  color: #6a6a6a;
+  color: var(--ot-text-muted, #6a6a6a);
   font-size: 12px;
   user-select: none;
 }
@@ -339,13 +339,13 @@
   top: 4px;
   right: 4px;
   z-index: 4;
-  color: #8a8a8a;
+  color: var(--ot-text-muted, #8a8a8a);
   font-size: 13px;
 }
 
 .workspace-terminal-monitor-toggle:hover {
-  color: #ffffff;
+  color: var(--ot-text, #ffffff);
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--ot-hover, rgba(255, 255, 255, 0.1));
 }
 
 /* ---- SSH bottom file browser (M8, FileZilla-style resizable bottom panel) ----
@@ -553,13 +553,13 @@ body.ssh-resizing .ssh-bottom-divider {
 .workspace-bcast-pop-empty {
   padding: 10px 0;
   text-align: center;
-  color: #8a8a8a;
+  color: var(--ot-text-muted, #8a8a8a);
   font-size: 12px;
 }
 
 .workspace-bcast-pop-hint {
   font-size: 11px;
-  color: #8a8a8a;
+  color: var(--ot-text-muted, #8a8a8a);
   line-height: 1.4;
   border-top: 1px solid var(--chrome-border);
   padding-top: 6px;
@@ -658,7 +658,7 @@ body.ssh-resizing .ssh-bottom-divider {
 }
 
 .workspace-template-time {
-  color: #8a8a8a;
+  color: var(--ot-text-muted, #8a8a8a);
   font-size: 12px;
   margin-top: 2px;
 }
@@ -666,7 +666,7 @@ body.ssh-resizing .ssh-bottom-divider {
 .workspace-template-empty {
   padding: 24px 0;
   text-align: center;
-  color: #8a8a8a;
+  color: var(--ot-text-muted, #8a8a8a);
 }
 
 /* ---- SSH connect flow modals ---- */
@@ -702,7 +702,7 @@ body.ssh-resizing .ssh-bottom-divider {
 }
 
 .hostkey-changed-title {
-  color: #ff4d4f;
+  color: var(--ot-danger-fg, #ff4d4f);
   font-weight: 600;
 }
 
@@ -722,7 +722,7 @@ body.ssh-resizing .ssh-bottom-divider {
 .connections-mode-title {
   font-size: 11px;
   letter-spacing: 0.4px;
-  color: #8a8a8a;
+  color: var(--ot-text-muted, #8a8a8a);
   padding: 10px 14px 2px;
   user-select: none;
 }
@@ -736,7 +736,7 @@ body.ssh-resizing .ssh-bottom-divider {
 }
 .commands-mode-badge-text {
   font-size: 11px;
-  color: #8a8a8a;
+  color: var(--ot-text-muted, #8a8a8a);
   letter-spacing: 0.4px;
 }
 .commands-mode-badge-tag {
@@ -747,10 +747,10 @@ body.ssh-resizing .ssh-bottom-divider {
   line-height: 16px;
 }
 .commands-mode-badge--terminal .commands-mode-badge-tag {
-  color: #4cc38a;
+  color: var(--ot-success-fg, #4cc38a);
-  background: rgba(76, 195, 138, 0.14);
+  background: color-mix(in srgb, var(--ot-success, #3fb950) 14%, transparent);
 }
 .commands-mode-badge--ssh .commands-mode-badge-tag {
-  color: #6aa9ff;
+  color: var(--ot-info-fg, #6aa9ff);
-  background: rgba(106, 169, 255, 0.14);
+  background: color-mix(in srgb, var(--ot-info, #58a6ff) 14%, transparent);
 }