132 lines
10 KiB
HTML
132 lines
10 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=1920, initial-scale=1">
|
||
<base href="../../">
|
||
<title>foundations component catalog</title>
|
||
<link rel="stylesheet" href="src-web/index.css">
|
||
</head>
|
||
<body>
|
||
<!-- Root pages load individual templates through index.html#fragment references. -->
|
||
<template id="colors">
|
||
<div class="panel color-foundation" style="height:306px;margin-bottom:18px;">
|
||
<div class="panel-heading"><div class="panel-title">Color foundations / semantic roles</div><div class="panel-note">UI semantics and item quality are separate token groups</div></div>
|
||
<div class="panel-body color-foundation-body">
|
||
<div class="palette semantic-palette">
|
||
<div class="swatch" style="--swatch:#090808"><i></i><span>Surface / Window</span><code>#090808</code></div>
|
||
<div class="swatch" style="--swatch:#131515"><i></i><span>Surface / Panel</span><code>#131515</code></div>
|
||
<div class="swatch" style="--swatch:#1f1f1e"><i></i><span>Surface / Row</span><code>#1F1F1E</code></div>
|
||
<div class="swatch" style="--swatch:#1a2b4e"><i></i><span>Action / Primary · 主色</span><code>#1A2B4E</code></div>
|
||
<div class="swatch" style="--swatch:linear-gradient(#5a7099,#415272 55%,#313e58)"><i></i><span>Chrome / Titlebar</span><code>#5A7099 → #313E58</code></div>
|
||
<div class="swatch" style="--swatch:#907746"><i></i><span>Border / Brass</span><code>#907746</code></div>
|
||
<div class="swatch" style="--swatch:#daa41d"><i></i><span>State / Selected</span><code>#DAA41D</code></div>
|
||
<div class="swatch" style="--swatch:#4ba7d3"><i></i><span>State / Focus</span><code>#4BA7D3</code></div>
|
||
<div class="swatch light" style="--swatch:#f6f8f4"><i></i><span>Text / Primary · 主要文字</span><code>#F6F8F4</code></div>
|
||
<div class="swatch light" style="--swatch:#d6d3c6"><i></i><span>Text / Secondary · 次要文字</span><code>#D6D3C6</code></div>
|
||
<div class="swatch" style="--swatch:#a7a396"><i></i><span>Text / Muted</span><code>#A7A396</code></div>
|
||
<div class="swatch" style="--swatch:#4d4b4d"><i></i><span>Text / Disabled</span><code>#4D4B4D</code></div>
|
||
<div class="swatch" style="--swatch:#54c1db"><i></i><span>Status / Info · 信息</span><code>#54C1DB</code></div>
|
||
<div class="swatch" style="--swatch:#49a355"><i></i><span>Status / Success · 成功</span><code>#49A355</code></div>
|
||
<div class="swatch" style="--swatch:#c28954"><i></i><span>Status / Warning · 警告</span><code>#C28954</code></div>
|
||
<div class="swatch" style="--swatch:#bb3331"><i></i><span>Status / Danger · 失败</span><code>#BB3331</code></div>
|
||
</div>
|
||
<div class="quality-strip dnf-ui" aria-label="Item quality color tokens">
|
||
<span class="quality-label">QUALITY</span>
|
||
<span class="quality-chip q-normal">普通<code>#FFFFFF</code></span>
|
||
<span class="quality-chip q-advanced">高级<code>#68D5ED</code></span>
|
||
<span class="quality-chip q-rare">稀有<code>#9879DA</code></span>
|
||
<span class="quality-chip q-artifact">神器<code>#EF28C1</code></span>
|
||
<span class="quality-chip q-legend">传说<code>#FF7700</code></span>
|
||
<span class="quality-chip q-epic">史诗<code>#FCB600</code></span>
|
||
<span class="quality-chip q-chronicle">勇者<code>#FF6666</code></span>
|
||
<span class="quality-chip q-myth">神话<code>#F8C63D → #CC66E7</code></span>
|
||
<span class="quality-chip q-primeval">太初<code>#5AFF62 → #58C6FF</code></span>
|
||
</div>
|
||
<div class="skill-strip dnf-ui" aria-label="Skill semantic color tokens">
|
||
<span class="quality-label">SKILL</span>
|
||
<span class="semantic-chip skill-evolution">技能进化 / Evolution<code>#BB56F1</code></span>
|
||
<span class="semantic-chip skill-passive">被动技能 / Passive<code>#00CE08</code></span>
|
||
<span class="semantic-chip skill-active">主动技能 / Active<code>#B69B33</code></span>
|
||
<span class="semantic-chip skill-awakening">觉醒技能 / Awakening<code>#F27300</code></span>
|
||
<span class="semantic-chip skill-buff">Buff 技能 / Buff<code>#63C8E1</code></span>
|
||
</div>
|
||
<div class="semantic-content-strip dnf-ui" aria-label="Character and status text tokens">
|
||
<span class="quality-label">CONTENT</span>
|
||
<span class="semantic-chip attribute-label-tone">人物属性 / Label<code>#9A7D49</code></span>
|
||
<span class="semantic-chip attribute-value-tone">人物属性 / Value<code>#469B51</code></span>
|
||
<span class="semantic-chip disabled-tone">通用禁用 / Disabled<code>#4D4B4D</code></span>
|
||
<span class="semantic-chip success-tone">数值上升 / Success<code>#49A355</code></span>
|
||
<span class="semantic-chip danger-tone">数值下降 / Danger<code>#BB3331</code></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template id="typography">
|
||
<div class="panel">
|
||
<div class="panel-heading"><div class="panel-title">Typography & density</div><div class="panel-note">DNF density, product-level structure</div></div>
|
||
<div class="panel-body grid cols-2" style="gap:16px;">
|
||
<div class="dnf-ui">
|
||
<div class="type-sample type-xs"><span class="zh">设置行 / 辅助信息</span><span class="num">12 px</span></div>
|
||
<div class="type-sample type-sm"><span class="zh">控件标签 / 菜单项目</span><span class="num">14 px</span></div>
|
||
<div class="type-sample type-md"><span class="zh">面板标题 / 重点数据</span><span class="num">16 px</span></div>
|
||
<div class="type-sample type-lg"><span class="zh">窗口标题 / 关键状态</span><span class="num">20 px</span></div>
|
||
</div>
|
||
<div>
|
||
<div class="rule-label">Canonical density</div>
|
||
<div class="token-label">control/height/compact 24</div>
|
||
<div class="token-label">control/height/default 30</div>
|
||
<div class="token-label">control/height/large 44</div>
|
||
<div class="token-label">row/height/default 38</div>
|
||
<div class="token-label">stroke/hairline 1</div>
|
||
<div class="token-label">radius/surface 0–2</div>
|
||
<div class="divider"></div>
|
||
<div class="spec-row"><span class="spec-chip captured">CAPTURED GEOMETRY</span><span class="spec-chip derived">PRODUCT SIZE</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template id="architecture">
|
||
<div class="panel">
|
||
<div class="panel-heading"><div class="panel-title">Component property architecture</div><div class="panel-note">Prevent variant explosion</div></div>
|
||
<div class="panel-body">
|
||
<div class="grid cols-3" style="gap:10px;">
|
||
<div class="sample-cell"><div class="rule-label">Variant</div><div style="color:var(--gold)">Interaction</div><div class="token-label">Rest · Hover · Pressed<br>Focus · Disabled</div></div>
|
||
<div class="sample-cell"><div class="rule-label">Orthogonal</div><div style="color:var(--gold)">Value state</div><div class="token-label">Selected · Open<br>Checked · Expanded</div></div>
|
||
<div class="sample-cell"><div class="rule-label">Properties</div><div style="color:var(--gold)">Content</div><div class="token-label">Text · Boolean<br>Instance Swap</div></div>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div class="spec-row"><span class="spec-chip captured">Captured = screenshot evidence</span><span class="spec-chip derived">Derived = product completion</span></div>
|
||
<ul class="callout-list" style="margin-top:14px">
|
||
<li>Selected、Pressed、Focus 不再互相替代</li>
|
||
<li>连续 Slider 数值只做样例，不制造 101 个 variants</li>
|
||
<li>截图缺失状态会在 Spec 页标注 Derived</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template id="evidence">
|
||
<div class="panel">
|
||
<div class="panel-heading"><div class="panel-title">Evidence & implementation contract</div><div class="panel-note">Design now, Reka later</div></div>
|
||
<div class="panel-body">
|
||
<div class="spec-row"><span class="spec-chip captured">CAPTURED</span><span class="spec-chip derived">DERIVED</span><span class="spec-chip asset">ASSET-BUILT</span></div>
|
||
<div class="divider"></div>
|
||
<ul class="callout-list">
|
||
<li>Captured / Derived 只存在于 Spec 文档，不污染运行时 API</li>
|
||
<li>Checkbox、Radio、Switch、Slider、Select 对齐 Reka anatomy</li>
|
||
<li>TreeSelect = Popover + Tree，不做多列 Cascader</li>
|
||
<li>WindowDialog 与 UtilitySheet 共享 Chrome token，不合并 family</li>
|
||
<li>复杂界面由实例组合，不发布整窗截图组件</li>
|
||
<li>操作组件交互反馈：主要适用于 Button、IconButton、Tab Trigger、Select Arrow、Stepper 等离散操作控件。Hover 比 Rest 浅一档；Pressed 保持 Hover 色阶并下移约 1px。列表项、表格行、弹窗聚焦面等语义或容器状态不强制套用；其内部独立按钮或 Icon 仍适用。</li>
|
||
</ul>
|
||
<div class="divider"></div>
|
||
<div class="token-label">QA target<br>• native pixel grid<br>• 1 px strokes<br>• no clipped labels<br>• no unknown state presented as captured<br>• no screenshot content in component masters</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
|
||
</script>
|
||
</body>
|
||
</html>
|