wangjia
a642bf16a2
design/ 同步自最新设计导出，新增 ui_kits/tablet/ 平板分栏布局；todo/ 录入 18 个并行实施任务。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
20 lines
1.5 KiB
HTML
20 lines
1.5 KiB
HTML
<!doctype html>
|
|
<!-- @dsCard group="Colors" name="暗色主题表面" subtitle="暖 espresso 背景与表面层级" viewport="700x185" --><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
|
<style>
|
|
body{margin:0;font-family:var(--font-sans);padding:22px;background:var(--sand-950)}
|
|
[data-theme]{display:flex;gap:12px}
|
|
.card{flex:1;border-radius:var(--radius-lg);padding:16px;border:1px solid var(--border)}
|
|
.t1{color:var(--fg1);font-weight:700;font-size:15px}
|
|
.t2{color:var(--fg2);font-size:12px;margin-top:4px}
|
|
.t3{color:var(--fg3);font-size:11px;margin-top:2px}
|
|
.pill{display:inline-block;margin-top:12px;background:var(--accent);color:var(--fg-on-accent);font-weight:600;font-size:12px;padding:6px 12px;border-radius:var(--radius-full)}
|
|
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg3);margin-bottom:8px}
|
|
</style></head><body data-theme="dark">
|
|
<div class="lab" style="color:#897f6f">DARK THEME · 暗色主题 — 暖 espresso 表面层级</div>
|
|
<div data-theme="dark">
|
|
<div class="card" style="background:var(--bg)"><div class="t1">bg</div><div class="t2">应用画布</div><div class="t3">#14110E</div></div>
|
|
<div class="card" style="background:var(--surface)"><div class="t1">surface</div><div class="t2">卡片 / 面板</div><div class="t3">#221E19</div></div>
|
|
<div class="card" style="background:var(--surface-2)"><div class="t1">surface-2</div><div class="t2">嵌套层</div><div class="t3">#2A251F</div><span class="pill">Accent</span></div>
|
|
</div>
|
|
</body></html>
|