wangjia
5a1e185b1a
phosphor console v1.1 设计系统（从现网 web/style.css 演化）：tokens(colors/effects/ typography/fonts) + components(core/forms/surfaces .jsx) + ui_kits(console + console_mobile) + assets/icons(15 双色 SVG) + guidelines + CLAUDE/SKILL/readme。供 B1–B6 重构任务对照实现。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
27 lines
2.2 KiB
HTML
27 lines
2.2 KiB
HTML
<!-- @dsCard group="Colors" viewport="700x180" subtitle="Light 主题：<html data-theme="light"> 激活，信号色加深保对比" name="Light 主题" -->
|
|
<!doctype html><html lang="zh-CN" data-theme="light"><head><meta charset="utf-8">
|
|
<link rel="stylesheet" href="../styles.css">
|
|
<style>body{margin:0;background:var(--bg);font-family:var(--mono);color:var(--ink);padding:16px;display:grid;gap:12px}
|
|
.row{display:flex;gap:10px}
|
|
.sw{flex:1;height:56px;border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;justify-content:flex-end;padding:6px 9px}
|
|
.n{font-size:10px;font-weight:600;letter-spacing:.06em}
|
|
.demo{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
|
|
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:1px 8px;border:1px solid;border-radius:3px}
|
|
.chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}</style></head><body>
|
|
<div class="row">
|
|
<div class="sw" style="background:var(--bg-deep)"><span class="n">--bg-deep</span></div>
|
|
<div class="sw" style="background:var(--bg)"><span class="n">--bg</span></div>
|
|
<div class="sw" style="background:var(--panel)"><span class="n">--panel</span></div>
|
|
<div class="sw" style="background:var(--panel-2)"><span class="n">--panel-2</span></div>
|
|
<div class="sw" style="background:var(--line)"><span class="n">--line</span></div>
|
|
</div>
|
|
<div class="demo">
|
|
<button style="font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;background:var(--green);color:var(--bg-deep);border:1px solid var(--green);border-radius:4px;padding:6px 14px">创建任务</button>
|
|
<span class="chip" style="color:var(--violet);border-color:var(--violet-dim)">待审/合</span>
|
|
<span class="chip" style="color:var(--cyan);border-color:var(--cyan)">执行中</span>
|
|
<span class="chip" style="color:var(--red);border-color:var(--red-dim)">失败</span>
|
|
<span style="font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--amber);border:1px solid var(--amber-dim);border-radius:3px;padding:1px 7px">MED</span>
|
|
<span style="font-size:13px;font-weight:700;letter-spacing:.28em;color:var(--green);text-shadow:var(--glow-green)">MAESTRO▮</span>
|
|
</div>
|
|
</body></html>
|