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>
29 lines
4.9 KiB
HTML
29 lines
4.9 KiB
HTML
<!-- @dsCard group="Brand" viewport="700x280" subtitle="双色调图标集：基础笔画中性灰 + 语义元素信号色 · 24×24 · 2px 圆头描边 · assets/icons/" name="图标 · Icons" -->
|
|
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
|
|
<link rel="stylesheet" href="../styles.css">
|
|
<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:16px;display:grid;gap:10px}
|
|
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
|
|
.g{border:1px solid var(--line-soft);border-radius:6px;padding:12px 4px 8px;text-align:center;color:var(--muted)}
|
|
.g svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
|
.f{font-size:9.5px;color:var(--muted);letter-spacing:.04em;margin-top:6px}
|
|
.note{font-size:10px;color:var(--faint);letter-spacing:.06em;line-height:1.6}</style></head><body>
|
|
<div class="grid">
|
|
<div class="g" style="--icon-accent:var(--violet)"><svg viewBox="0 0 24 24"><path d="M12 3 L22 21 L2 21 Z"/><line x1="12" y1="10" x2="12" y2="14" stroke="var(--icon-accent)"/><line x1="12" y1="17.5" x2="12" y2="17.51" stroke="var(--icon-accent)"/></svg><div class="f">gate 待审批</div></div>
|
|
<div class="g" style="--icon-accent:var(--green)"><svg viewBox="0 0 24 24"><path d="M7 4 L19 12 L7 20 Z" stroke="var(--icon-accent)"/></svg><div class="f">ready 可执行</div></div>
|
|
<div class="g" style="--icon-accent:var(--cyan)"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3" fill="var(--icon-accent)" stroke="none"/></svg><div class="f">running 执行中</div></div>
|
|
<div class="g" style="--icon-accent:var(--cyan)"><svg viewBox="0 0 24 24"><polyline points="2 12 7 12 10 5 14 19 17 12 22 12" stroke="var(--icon-accent)"/></svg><div class="f">event 事件</div></div>
|
|
<div class="g" style="--icon-accent:var(--green)"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2.5"/><polyline points="8 12 11 15 16 9" stroke="var(--icon-accent)"/></svg><div class="f">task 任务</div></div>
|
|
<div class="g" style="--icon-accent:var(--amber)"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/><line x1="10" y1="10" x2="14" y2="14" stroke="var(--icon-accent)"/></svg><div class="f">deps 依赖</div></div>
|
|
<div class="g" style="--icon-accent:var(--amber)"><svg viewBox="0 0 24 24"><polyline points="5 4 5 14 18 14"/><polyline points="13 9 18 14 13 19" stroke="var(--icon-accent)"/></svg><div class="f">reason 原因</div></div>
|
|
<div class="g" style="--icon-accent:var(--cyan)"><svg viewBox="0 0 24 24"><line x1="4" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18" stroke="var(--icon-accent)"/></svg><div class="f">flow 流转</div></div>
|
|
<div class="g" style="--icon-accent:var(--green)"><svg viewBox="0 0 24 24"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9" stroke="var(--icon-accent)"/></svg><div class="f">git 项目仓库</div></div>
|
|
<div class="g"><svg viewBox="0 0 24 24"><path d="M3 7 a2 2 0 0 1 2-2 h4 l2 3 h8 a2 2 0 0 1 2 2 v8 a2 2 0 0 1-2 2 H5 a2 2 0 0 1-2-2 Z"/></svg><div class="f">project 项目</div></div>
|
|
<div class="g" style="--icon-accent:var(--green)"><svg viewBox="0 0 24 24"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5" stroke="var(--icon-accent)"/></svg><div class="f">sync 同步</div></div>
|
|
<div class="g" style="--icon-accent:var(--green)"><svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="12" y2="6"/><circle cx="15" cy="6" r="2.5" stroke="var(--icon-accent)"/><line x1="18" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="5.5" y2="12"/><circle cx="9" cy="12" r="2.5" stroke="var(--icon-accent)"/><line x1="12.5" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="12.5" y2="18"/><circle cx="16" cy="18" r="2.5" stroke="var(--icon-accent)"/><line x1="19.5" y1="18" x2="21" y2="18"/></svg><div class="f">config 配置</div></div>
|
|
<div class="g" style="--icon-accent:var(--green)"><svg viewBox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5"/><line x1="15.5" y1="15.5" x2="21" y2="21" stroke="var(--icon-accent)"/></svg><div class="f">search 搜索</div></div>
|
|
<div class="g" style="--icon-accent:var(--green)"><svg viewBox="0 0 24 24"><line x1="12" y1="4" x2="12" y2="20" stroke="var(--icon-accent)"/><line x1="4" y1="12" x2="20" y2="12" stroke="var(--icon-accent)"/></svg><div class="f">add 新建</div></div>
|
|
<div class="g"><svg viewBox="0 0 24 24"><line x1="5" y1="5" x2="19" y2="19"/><line x1="19" y1="5" x2="5" y2="19"/></svg><div class="f">close 关闭</div></div>
|
|
</div>
|
|
<div class="note">双色调规则：基础笔画 currentColor（默认 --muted）；语义元素 stroke=var(--icon-accent, 信号色回退)——内联使用时按语境覆盖，<img> 引用时用内置回退色。纯工具图标（project/close）保持单色。文件：assets/icons/<name>.svg · ▍/▮ 为品牌字符保留</div>
|
|
</body></html>
|