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>
14 lines
1.8 KiB
HTML
14 lines
1.8 KiB
HTML
<!-- @dsCard group="Colors" viewable="true" viewport="700x140" subtitle="信号色 7–8% 透明底 + dim 边框的 chip 配方" name="信号底 · Tints" -->
|
||
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
|
||
<link rel="stylesheet" href="../styles.css">
|
||
<style>body{margin:0;background:var(--bg);font-family:var(--mono);padding:20px;display:flex;gap:10px;flex-wrap:wrap;align-content:center}
|
||
.tile{flex:1;min-width:140px;height:96px;border:1px solid;border-radius:6px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}
|
||
.lab{font-size:10px;font-weight:700;letter-spacing:.14em;padding:1px 7px;border:1px solid;border-radius:3px}
|
||
.f{font-size:10px;color:var(--muted)}</style></head><body>
|
||
<div class="tile" style="background:rgba(95,221,125,.07);border-color:var(--green-dim)"><span class="lab" style="color:var(--green);border-color:var(--green-dim)">EASY</span><span class="f">rgba(green,.07)</span></div>
|
||
<div class="tile" style="background:rgba(240,180,41,.07);border-color:var(--amber-dim)"><span class="lab" style="color:var(--amber);border-color:var(--amber-dim)">MED</span><span class="f">rgba(amber,.07)</span></div>
|
||
<div class="tile" style="background:rgba(255,93,93,.07);border-color:var(--red-dim)"><span class="lab" style="color:var(--red);border-color:var(--red-dim)">HARD</span><span class="f">rgba(red,.07)</span></div>
|
||
<div class="tile" style="background:rgba(184,142,245,.08);border-color:var(--violet-dim)"><span class="lab" style="color:var(--violet);border-color:var(--violet-dim)">GATE</span><span class="f">rgba(violet,.08)</span></div>
|
||
<div class="tile" style="background:rgba(89,200,216,.07);border-color:var(--cyan-dim)"><span class="lab" style="color:var(--cyan);border-color:var(--cyan-dim)">RUN</span><span class="f">rgba(cyan,.07)</span></div>
|
||
</body></html>
|