🐛 fix(theme): 提升连接状态与 SQL 关键字辨识度

- 为亮暗主题和内置预设增加独立连接状态语义色
- 强化 Host、数据库状态点及双行页签字段对比度
- 为 Monaco SQL 关键字补充高对比加粗规则
- 增加基础主题与内置预设的对比度回归测试
This commit is contained in:
Syngnat
2026-07-13 09:54:23 +08:00
parent 7bdce19d01
commit 00473e7ac0
9 changed files with 229 additions and 30 deletions

View File

@@ -43,16 +43,17 @@ body[data-ui-version="v2"][data-theme="light"] {
--gn-br-2: rgba(15, 23, 42, 0.12);
--gn-br-3: rgba(15, 23, 42, 0.18);
--gn-accent: #16a34a;
--gn-accent-2: #15803d;
--gn-accent: #15803d;
--gn-accent-2: #166534;
--gn-accent-soft: #dcfce7;
--gn-info: #0284c7;
--gn-info: #0369a1;
--gn-info-soft: #e0f2fe;
--gn-warn: #d97706;
--gn-warn-soft: rgba(245, 158, 11, 0.14);
--gn-danger: #dc2626;
--gn-danger-strong: #dc2626;
--gn-danger-strong-hover: #b91c1c;
--gn-status-connected: #15803d;
--gn-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
--gn-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08);
@@ -97,6 +98,7 @@ body[data-ui-version="v2"][data-theme="dark"] {
--gn-danger: #f87171;
--gn-danger-strong: #dc2626;
--gn-danger-strong-hover: #b91c1c;
--gn-status-connected: #4ade80;
--gn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--gn-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
@@ -2073,7 +2075,7 @@ body[data-ui-version="v2"] .gn-v2-rail-status {
}
body[data-ui-version="v2"] .gn-v2-rail-status.is-live {
background: var(--gn-accent);
background: var(--gn-status-connected);
}
body[data-ui-version="v2"] .gn-v2-rail-status.is-error {
@@ -2150,16 +2152,19 @@ body[data-ui-version="v2"] .gn-v2-active-connection-trigger {
}
body[data-ui-version="v2"] .gn-v2-live-dot {
width: 7px;
height: 7px;
width: 10px;
height: 10px;
box-sizing: border-box;
border: 1.5px solid var(--gn-fg-4);
border-radius: 50%;
flex-shrink: 0;
background: var(--gn-fg-5);
background: transparent;
}
body[data-ui-version="v2"] .gn-v2-live-dot.is-live {
background: #22c55e;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
border: 0;
background: var(--gn-status-connected);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--gn-status-connected) 22%, transparent);
}
body[data-ui-version="v2"] .gn-v2-live-dot.is-loading {
@@ -2172,7 +2177,9 @@ body[data-ui-version="v2"] .gn-v2-live-dot.is-loading {
}
body[data-ui-version="v2"] .gn-v2-live-dot.is-error {
border: 0;
background: var(--gn-danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--gn-danger) 20%, transparent);
}
body[data-ui-version="v2"] .gn-v2-active-connection-copy {
@@ -2856,16 +2863,19 @@ body[data-ui-version="v2"] .gn-v2-tree-status {
body[data-ui-version="v2"] .gn-v2-tree-status::before {
content: '';
width: 7px;
height: 7px;
width: 9px;
height: 9px;
box-sizing: border-box;
border: 1.5px solid var(--gn-fg-4);
border-radius: 50%;
flex: 0 0 7px;
background: #b8c0cc;
flex: 0 0 9px;
background: transparent;
}
body[data-ui-version="v2"] .gn-v2-tree-status.is-success::before {
background: #22c55e;
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
border: 0;
background: var(--gn-status-connected);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--gn-status-connected) 22%, transparent);
}
body[data-ui-version="v2"] .gn-v2-tree-status.is-loading::before {
@@ -2880,8 +2890,9 @@ body[data-ui-version="v2"] .gn-v2-tree-status.is-loading::before {
}
body[data-ui-version="v2"] .gn-v2-tree-status.is-error::before {
border: 0;
background: var(--gn-danger);
box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.16);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--gn-danger) 20%, transparent);
}
@keyframes gn-v2-tree-status-spin {
@@ -3586,9 +3597,11 @@ body[data-ui-version="v2"] .gn-v2-tab-label-main {
body[data-ui-version="v2"] .gn-v2-tab-label-secondary {
min-width: 0;
display: block;
display: flex;
align-items: center;
gap: 4px;
overflow: hidden;
color: var(--gn-fg-5);
color: var(--gn-fg-4);
font-family: var(--gn-font-mono);
font-size: 10px;
font-weight: 650;
@@ -3626,6 +3639,19 @@ body[data-ui-version="v2"] .gn-v2-tab-label-part-schema {
max-width: 112px;
}
body[data-ui-version="v2"] .gn-v2-tab-label-part-host {
color: var(--gn-info);
}
body[data-ui-version="v2"] .gn-v2-tab-label-part-database {
color: var(--gn-accent);
}
body[data-ui-version="v2"] .gn-v2-tab-label-separator {
flex: 0 0 auto;
color: var(--gn-fg-5);
}
body[data-ui-version="v2"] .gn-v2-tab-kind-icon {
display: inline-flex;
color: var(--gn-accent);