dnftools/dcalc
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

init

Browse Source
This commit is contained in:
imelon
2026-08-04 17:57:01 +08:00
parent 768fd4a3a9
commit f77034edd7
641 changed files with 26137 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/src-web/foundations/component.js
+4
View File
File diff suppressed because one or more lines are too long
design/src-web/foundations/img/.gitkeep
View File
design/src-web/foundations/index.html
+131
View File
@@ -0,0 +1,131 @@
<!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&nbsp;&nbsp;24</div>
<div class="token-label">control/height/default&nbsp;&nbsp;30</div>
<div class="token-label">control/height/large&nbsp;&nbsp;&nbsp;&nbsp;44</div>
<div class="token-label">row/height/default&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;38</div>
<div class="token-label">stroke/hairline&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1</div>
<div class="token-label">radius/surface&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>
design/src-web/foundations/style/index.css
+65
View File
@@ -0,0 +1,65 @@
/* Source module: foundations.css */
.color-foundation-body { padding: 12px 16px 10px; }
.palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px 9px; }
.swatch {
height: 48px;
min-width: 0;
display: grid;
grid-template-columns: 26px 1fr;
grid-template-rows: 1fr 1fr;
column-gap: 7px;
padding: 5px 7px;
border: 1px solid #33352f;
background: #0a0b0a;
color: var(--text-2);
font-size: 9px;
text-shadow: 0 1px 2px #000;
}
.swatch i { grid-row: 1 / 3; width: 26px; border: 1px solid #524a39; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); }
.swatch span { align-self: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swatch code { align-self: start; color: var(--text-3); font: 8.5px/1.2 Consolas, monospace; }
.quality-strip { display: grid; grid-template-columns: 64px repeat(9, minmax(0,1fr)); gap: 7px; align-items: stretch; margin-top: 9px; }
.quality-label { display:flex;align-items:center;justify-content:center;border:1px solid #383a36;color:var(--text-3);font:9px/1 Consolas,monospace;letter-spacing:1px;background:#0a0b0a; }
.quality-chip { min-width:0;height:34px;padding:4px 6px;display:flex;flex-direction:column;justify-content:center;border:1px solid #30322e;background:#080908;font-size:10px;white-space:nowrap;overflow:hidden; }
.quality-chip code { margin-top:2px;color:var(--text-3);font:7.5px/1 Consolas,monospace;text-shadow:none; }
.q-normal { color: var(--quality-normal) !important; }
.q-advanced { color: var(--quality-advanced) !important; }
.q-rare { color: var(--quality-rare) !important; }
.q-artifact { color: var(--quality-artifact) !important; }
.q-legend { color: var(--quality-legend) !important; }
.q-epic { color: var(--quality-epic) !important; }
.q-chronicle { color: var(--quality-chronicle) !important; }
.q-myth { color:transparent !important;background-image:linear-gradient(to bottom,#f8c63d,#cc66e7);background-clip:text;-webkit-background-clip:text;text-shadow:none !important; }
.q-primeval { color:transparent !important;background-image:linear-gradient(to bottom,#5aff62,#58c6ff);background-clip:text;-webkit-background-clip:text;text-shadow:none !important; }
.quality-chip.q-myth, .quality-chip.q-primeval { background-color:#080908; }
.quality-chip.q-myth code, .quality-chip.q-primeval code { color:var(--text-3);-webkit-text-fill-color:var(--text-3); }
.skill-strip { display:grid;grid-template-columns:64px repeat(5,minmax(0,1fr));gap:7px;margin-top:7px; }
.semantic-content-strip { display:grid;grid-template-columns:64px repeat(5,minmax(0,1fr));gap:7px;margin-top:7px; }
.semantic-chip { height:34px;min-width:0;padding:4px 8px;display:flex;flex-direction:column;justify-content:center;border:1px solid #30322e;background:#080908;font-size:10px;white-space:nowrap;overflow:hidden; }
.semantic-chip code { margin-top:2px;color:var(--text-3);font:7.5px/1 Consolas,monospace; }
.skill-evolution { color:var(--skill-evolution);border-color:#4c235f;background:#120718; }
.skill-passive { color:var(--skill-passive);border-color:#1f5d22;background:#071407; }
.skill-active { color:var(--skill-active);border-color:#5c4d1f;background:#141107; }
.skill-awakening { color:var(--skill-awakening);border-color:#6a3409;background:#170b03; }
.skill-buff { color:var(--skill-buff);border-color:#285865;background:#061217; }
.attribute-label-tone { color:var(--attribute-label); }
.attribute-value-tone { color:var(--attribute-value); }
.disabled-tone { color:var(--disabled); }
.success-tone { color:var(--success); }
.danger-tone { color:var(--danger); }
.type-sample {
padding: 10px 12px;
border-left: 2px solid var(--brass);
background: #0a0b0b;
}
.type-sample + .type-sample { margin-top: 8px; }
.type-sample .zh { color: var(--gold); }
.type-sample .num { color: var(--text); float: right; }
.type-xs { font-size: 12px; }
.type-sm { font-size: 14px; }
.type-md { font-size: 16px; }
.type-lg { font-size: 20px; }
.glyph-select-2x { width:11px;height:6px; }
.glyph-close-2x { width:10px;height:9px; }