feat(tokens): 设计令牌落地 + 浅色主题骨架 [tsk_pusPU3oCPVfc]

在 web/style.css :root 补全缺失令牌： - --violet / --violet-dim（磷光紫，审批闸色） - --glow-green/violet/cyan/red（辉光 shadow 值） - --radius-xs/sm/md/lg/dot（圆角阶梯） - --space-1..9（间距阶） - --pad-btn/btn-xs/input/chip/card（控件内边距） - --shadow-pop/modal/toast（浮层阴影） - --surface-*/--text-*/--border-*/--accent*/--status-go|gate|bad|run（语义别名）新增 [data-theme="light"] 完整块，覆盖全部底色、文字、信号色与辉光变量，确保浅色切换不崩版。现有 --green/amber/red/cyan 及 @keyframes blink/pulse/rise 均未改动，暗色主题视觉零影响。 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-13 14:32:29 +08:00
parent 5a1e185b1a
commit 4be02cbf0f
1 changed files with 85 additions and 0 deletions
@@ -16,6 +16,8 @@

  --green:     #5fdd7d;
  --green-dim: #2e6b3d;
+  --violet:    #b88ef5;
+  --violet-dim:#503070;
  --amber:     #f0b429;
  --amber-dim: #6b5414;
  --red:       #ff5d5d;
@@ -23,9 +25,92 @@
  --cyan:      #59c8d8;
  --cyan-dim:  #1e4e57;

+  /* ── 辉光（text-shadow / box-shadow 用） ── */
+  --glow-green:  0 0 12px rgba(95, 221, 125, .45);
+  --glow-violet: 0 0 14px rgba(184, 142, 245, .4);
+  --glow-cyan:   0 0 18px rgba(89, 200, 216, .5);
+  --glow-red:    0 0 14px rgba(255, 93, 93, .3);
+
+  /* ── 圆角 ── */
+  --radius-xs:  3px;
+  --radius-sm:  4px;
+  --radius-md:  6px;
+  --radius-lg:  10px;
+  --radius-dot: 50%;
+
+  /* ── 间距阶（px） ── */
+  --space-1: 4px;
+  --space-2: 6px;
+  --space-3: 8px;
+  --space-4: 10px;
+  --space-5: 12px;
+  --space-6: 14px;
+  --space-7: 16px;
+  --space-8: 20px;
+  --space-9: 22px;
+
+  /* ── 控件内边距 ── */
+  --pad-btn:    6px 14px;
+  --pad-btn-xs: 2px 8px;
+  --pad-input:  7px 10px;
+  --pad-chip:   1px 8px;
+  --pad-card:   12px 14px;
+
+  /* ── 浮层阴影 ── */
+  --shadow-pop:   0 10px 30px rgba(0, 0, 0, .65);
+  --shadow-modal: 0 18px 60px rgba(0, 0, 0, .6);
+  --shadow-toast: 0 8px 30px rgba(0, 0, 0, .55);
+
+  /* ── 语义别名 ── */
+  --surface-page:   var(--bg);
+  --surface-rail:   var(--bg-deep);
+  --surface-card:   var(--panel);
+  --surface-raised: var(--panel-2);
+  --text-body:      var(--ink);
+  --text-secondary: var(--muted);
+  --text-disabled:  var(--faint);
+  --border-default: var(--line);
+  --border-soft:    var(--line-soft);
+  --accent:         var(--green);
+  --accent-dim:     var(--green-dim);
+  --status-go:      var(--green);
+  --status-gate:    var(--violet);
+  --status-bad:     var(--red);
+  --status-run:     var(--cyan);
+
  --mono: 'IBM Plex Mono', 'Noto Sans SC', ui-monospace, monospace;
 }

+/* ── Light 主题：<html data-theme="light"> 激活 — 纸白底，信号色加深保对比，-dim 变淡色底 ── */
+[data-theme="light"] {
+  --bg:        #f3f6f1;
+  --bg-deep:   #e9eee6;
+  --panel:     #fcfdfb;
+  --panel-2:   #e4ebe1;
+  --line:      #c9d4c6;
+  --line-soft: #dbe3d8;
+
+  --ink:       #1d251b;
+  --muted:     #5c6b57;
+  --faint:     #92a08c;
+
+  --green:     #1b8f46;
+  --green-dim: #b5e2c3;
+  --violet:    #7747d1;
+  --violet-dim:#dcccf6;
+  --amber:     #946d06;
+  --amber-dim: #ecd9a0;
+  --red:       #cd3434;
+  --red-dim:   #f2baba;
+  --cyan:      #0b7488;
+  --cyan-dim:  #b2dfe7;
+
+  --glow-green:  0 0 10px rgba(27, 143, 70, .25);
+  --glow-violet: 0 0 10px rgba(119, 71, 209, .22);
+  --glow-cyan:   0 0 12px rgba(11, 116, 136, .25);
+  --glow-red:    0 0 10px rgba(205, 52, 52, .2);
+}
+
 * { box-sizing: border-box; margin: 0; padding: 0; }

 html, body { height: 100%; }