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