@keyfunc/keybricks-ds 2.4.8 → 2.4.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,17 @@
1
+ <!-- @dsCard group="Foundations" viewport="700x170" name="Motion" subtitle="120/160/240ms · ease-out — hover, rise, pulse, spin" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
4
+ <style>body{margin:0;padding:16px;font-family:var(--font-sans);background:var(--bg-surface);display:grid;grid-template-columns:repeat(4,1fr);gap:10px;box-sizing:border-box}
5
+ .c{border:1px solid var(--border-card);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
6
+ .n{font-size:var(--text-xs);font-weight:500;color:var(--text-heading)}.u{font-size:var(--text-xs);font-family:var(--font-sans);font-variant-numeric:tabular-nums;color:var(--text-secondary)}
7
+ .hov{height:30px;padding:0 12px;border-radius:8px;background:var(--bg-hover);color:var(--text-body);font-size:12px;display:inline-flex;align-items:center;transition:var(--t-hover)}
8
+ .hov:hover{background:var(--action-primary);color:var(--on-accent)}
9
+ .rise{width:100%;height:30px;border-radius:8px;background:var(--soft-bg);animation:kb-rise 1.6s var(--ease-out) infinite}
10
+ .pulse{width:100%;height:30px;border-radius:8px;background:var(--skeleton);animation:kb-pulse 1.4s var(--ease-in-out) infinite}
11
+ .spin{width:20px;height:20px;border-radius:999px;border:2px solid var(--track);border-top-color:var(--action-primary);animation:kb-spin .7s linear infinite}</style></head>
12
+ <body>
13
+ <div class="c"><span class="hov">Hover me</span><span class="n">Hover</span><span class="u">120ms ease-out</span></div>
14
+ <div class="c"><span class="rise"></span><span class="n">Rise</span><span class="u">160ms · menus, modals</span></div>
15
+ <div class="c"><span class="pulse"></span><span class="n">Pulse</span><span class="u">1.4s · skeletons</span></div>
16
+ <div class="c"><span class="spin"></span><span class="n">Spin</span><span class="u">700ms linear · running tasks</span></div>
17
+ </body></html>
@@ -0,0 +1,14 @@
1
+ <!-- @dsCard group="Foundations" viewport="700x200" name="Corner Radii" subtitle="4 controls · 8 buttons · 10 cards · 14/16 tiles & nodes · full circles" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
4
+ <style>body{margin:0;padding:16px;font-family:var(--font-sans);background:var(--bg-app);box-sizing:border-box}.row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.r{display:flex;flex-direction:column;align-items:center;gap:8px}.box{width:100%;aspect-ratio:1;background:var(--bg-inset);border:1px solid var(--border-control);box-sizing:border-box}.n{font-size:var(--text-xs);font-weight:500;color:var(--text-heading)}.u{font-size:var(--text-xs);color:var(--text-muted);text-align:center;line-height:1.4}</style></head>
5
+ <body>
6
+ <div class="row">
7
+ <div class="r"><div class="box" style="border-radius:4px"></div><span class="n">4</span><span class="u">steppers · selects · checkbox</span></div>
8
+ <div class="r"><div class="box" style="border-radius:8px"></div><span class="n">8</span><span class="u">buttons · inputs · nav · chips</span></div>
9
+ <div class="r"><div class="box" style="border-radius:10px"></div><span class="n">10</span><span class="u">cards · search · dropzone</span></div>
10
+ <div class="r"><div class="box" style="border-radius:14px"></div><span class="n">14</span><span class="u">40px palette tiles</span></div>
11
+ <div class="r"><div class="box" style="border-radius:16px"></div><span class="n">16</span><span class="u">nodes + 48px tiles</span></div>
12
+ <div class="r"><div class="box" style="border-radius:999px"></div><span class="n">full</span><span class="u">ports · steps · pills</span></div>
13
+ </div>
14
+ </body></html>
@@ -0,0 +1,88 @@
1
+ <!-- @dsCard group="Foundations" viewport="700x1340" name="Size Tiers" subtitle="sm 28 · md 32 · lg 40 — one tier per region, never mixed in a row; CJK one step larger at sm" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../_ds_bundle.js"></script>
8
+ <style>
9
+ body{margin:0;background:var(--bg-surface);padding:16px 20px;font-family:var(--font-sans);box-sizing:border-box;color:var(--text-primary)}
10
+ .sec{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:0;color:var(--text-muted);padding:14px 0 8px}
11
+ .sec:first-child{padding-top:0}
12
+ .tier{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-subtle)}
13
+ .tier:last-of-type{border-bottom:none}
14
+ .k{font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-muted);line-height:var(--leading-xs)}
15
+ .k b{display:block;font-family:var(--font-sans);font-weight:var(--weight-semibold);color:var(--text-heading);font-size:var(--text-base)}
16
+ .row{display:flex;align-items:center;gap:var(--control-gap);flex-wrap:wrap}
17
+ .grp{display:inline-flex;align-items:center;gap:var(--control-gap);margin-right:calc(var(--group-gap) - var(--control-gap))}
18
+ table{border-collapse:collapse;font-size:var(--text-xs);line-height:var(--leading-xs);font-variant-numeric:tabular-nums;width:100%}
19
+ th,td{text-align:left;padding:5px 10px 5px 0;border-bottom:1px solid var(--border-subtle);color:var(--text-body);white-space:nowrap;vertical-align:top}
20
+ th:last-child,td:last-child{white-space:normal;padding-right:0}
21
+ th{font-weight:var(--weight-semibold);color:var(--text-secondary)}
22
+ td:first-child{color:var(--text-heading);font-weight:var(--weight-medium)}
23
+ .note{font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary);padding-top:10px;max-width:70ch}
24
+ .note b{color:var(--text-heading);font-weight:var(--weight-medium)}
25
+ code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-heading)}
26
+ </style></head>
27
+ <body><div id="root"></div>
28
+ <script type="text/babel">
29
+ const { Button, Input, Select, SegmentedControl, Switch, Checkbox, Tag } = window.KeybricksDesignSystem_71231a;
30
+ const TIERS = [
31
+ ["sm", "28 / 36", "dense grids · controls inside pipeline nodes"],
32
+ ["md", "32 / 40", "app default · toolbars · filter bars · tables · long forms"],
33
+ ["lg", "40 / 48", "dialogs · short forms · wizards · settings pages"],
34
+ ];
35
+ function Row({ tier, lang }) {
36
+ const t = lang === "zh" ? { period: "会计期间", v: "2026年8月", ent: "实体", opts: ["全部实体", "上海子公司"], seg: ["月度", "季度"], sw: "显示抵销", cb: "含元数据", run: "运行校验", tag: "5 条待处理" }
37
+ : lang === "ja" ? { period: "会計期間", v: "2026年8月", ent: "事業体", opts: ["全事業体", "上海子会社"], seg: ["月次", "四半期"], sw: "消去を表示", cb: "メタデータ", run: "検証を実行", tag: "未処理 5 件" }
38
+ : lang === "ko" ? { period: "회계 기간", v: "2026년 8월", ent: "법인", opts: ["전체 법인", "상하이 법인"], seg: ["월별", "분기별"], sw: "제거 표시", cb: "메타데이터", run: "검증 실행", tag: "미처리 5건" }
39
+ : { period: "Period", v: "Aug 2026", ent: "Entity", opts: ["All entities", "Shanghai"], seg: ["Month", "Quarter"], sw: "Eliminations", cb: "Metadata", run: "Run check", tag: "5 open" };
40
+ const [sel, setSel] = React.useState(t.opts[0]);
41
+ const [seg, setSeg] = React.useState(t.seg[0]);
42
+ const [on, setOn] = React.useState(true);
43
+ const [ck, setCk] = React.useState(true);
44
+ return (
45
+ <div className="row" data-size={tier} lang={lang === "zh" ? "zh-CN" : lang}>
46
+ <span className="grp"><span style={{ fontSize: "var(--control-text)", lineHeight: "var(--control-leading)", letterSpacing: "var(--control-tracking)", fontWeight: "var(--weight-medium)", color: "var(--text-body)", whiteSpace: "nowrap" }}>{t.period}</span><Input defaultValue={t.v} style={{ width: 104 }} /></span>
47
+ <span className="grp"><Select options={t.opts} value={sel} onChange={(e) => setSel(e.target.value)} style={{ width: 140 }} /></span>
48
+ <span className="grp"><SegmentedControl options={t.seg} value={seg} onChange={setSeg} /></span>
49
+ <span className="grp"><Switch checked={on} onChange={setOn} label={t.sw} /></span>
50
+ <span className="grp"><Checkbox checked={ck} onChange={setCk} label={t.cb} /></span>
51
+ <span className="grp"><Tag tone="info">{t.tag}</Tag></span>
52
+ <Button icon="play">{t.run}</Button>
53
+ </div>
54
+ );
55
+ }
56
+ function App() {
57
+ return (
58
+ <div>
59
+ <div className="sec">One tier per region — every control inside reads the same height, text, icon and padding</div>
60
+ {TIERS.map(([tier, hb, use]) => (
61
+ <div className="tier" key={tier}>
62
+ <div className="k"><b>{tier}</b>{hb}<br />{use.split(" · ")[0]}</div>
63
+ <Row tier={tier} lang="en" />
64
+ </div>
65
+ ))}
66
+ <div className="sec">CJK — one rule for Chinese, Japanese and Korean. At sm the text is one step larger (13px, regular weight); at md and lg it is 14px with weight 500 (labels and headers alike). Tracking is 0 under <code>lang</code>.</div>
67
+ {[["sm", "zh"], ["sm", "ja"], ["sm", "ko"], ["md", "zh"], ["md", "ja"], ["md", "ko"]].map(([tier, lg]) => <div className="tier" key={tier + lg}><div className="k"><b>{tier}</b>{lg === "zh" ? "zh-CN" : lg}</div><Row tier={tier} lang={lg} /></div>)}
68
+ <div className="sec">What each tier sets (tokens/layout.css)</div>
69
+ <table>
70
+ <thead><tr><th>Token</th><th>sm</th><th>md</th><th>lg</th><th>Used by</th></tr></thead>
71
+ <tbody>
72
+ <tr><td>--control-h</td><td>28</td><td>32</td><td>40</td><td>buttons · inputs · selects · search · steppers · segmented · chips · pagination · menu rows</td></tr>
73
+ <tr><td>--control-text</td><td>12 (CJK 13)</td><td>14</td><td>14</td><td>text in controls, labels, table cells</td></tr>
74
+ <tr><td>--control-icon</td><td>14</td><td>16</td><td>16</td><td>icon inside a control</td></tr>
75
+ <tr><td>--control-px</td><td>8</td><td>12</td><td>16</td><td>horizontal padding of a control</td></tr>
76
+ <tr><td>--control-gap · --group-gap</td><td>8 · 12</td><td>8 · 16</td><td>8 · 24</td><td>inside a group · between groups in one bar</td></tr>
77
+ <tr><td>--bar-h</td><td>36</td><td>40</td><td>48</td><td>toolbar · filter bar · tab bar · table row · list row</td></tr>
78
+ <tr><td>--bar-card-h · --edge-pad</td><td>44 · 12</td><td>48 · 16</td><td>56 · 16</td><td>a bar inside a bordered card · card edge → first control</td></tr>
79
+ <tr><td>--check-size · --tag-h</td><td>14 · 20</td><td>16 · 24</td><td>16 · 24</td><td>checkbox and radio box · Tag (two sizes — lg keeps md)</td></tr>
80
+ <tr><td>--switch-w × --switch-h</td><td>28 × 16</td><td>32 × 18</td><td>32 × 18</td><td>Switch track (two sizes — lg keeps md)</td></tr>
81
+ </tbody>
82
+ </table>
83
+ <div className="note"><b>How to use it.</b> Put <code>data-size="sm" | "md" | "lg"</code> on the region — a toolbar, filter bar, form, table, dialog or drawer — and leave the controls' <code>size</code> prop unset so they inherit. <code>Table</code>, <code>FilterBar</code>, <code>Modal</code> (always lg), <code>Drawer</code>, <code>SmartTable</code> and <code>Spreadsheet</code> (sm) set their own region. The app root is md. Nothing interactive is smaller than 24px. A per-control <code>size</code> is only for a control that stands alone in its band.</div>
84
+ </div>
85
+ );
86
+ }
87
+ ReactDOM.createRoot(document.getElementById("root")).render(<App />);
88
+ </script></body></html>
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Foundations" viewport="700x170" name="Spacing" subtitle="4px family · page 24×32 · card 21 · section gap 24 · gaps 8 inside a group, 12/16/24 between groups" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
4
+ <style>body{margin:0;padding:16px;font-family:var(--font-sans);background:var(--bg-app);box-sizing:border-box}.bars{display:flex;gap:14px;align-items:flex-end}.b{display:flex;flex-direction:column;gap:5px;align-items:center}.b i{display:block;background:var(--soft-bg);border:1px solid var(--soft-border);border-radius:3px}.b span{font-size:var(--text-xs);font-family:var(--font-sans);font-variant-numeric:tabular-nums;color:var(--text-muted)}.note{margin-top:12px;font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-muted)}.note b{color:var(--text-heading);font-weight:500}</style></head>
5
+ <body>
6
+ <div class="bars">
7
+ <div class="b"><i style="width:2px;height:24px"></i><span>2</span></div>
8
+ <div class="b"><i style="width:4px;height:24px"></i><span>4</span></div>
9
+ <div class="b"><i style="width:6px;height:24px"></i><span>6</span></div>
10
+ <div class="b"><i style="width:8px;height:24px"></i><span>8</span></div>
11
+ <div class="b"><i style="width:10px;height:24px"></i><span>10</span></div>
12
+ <div class="b"><i style="width:12px;height:24px"></i><span>12</span></div>
13
+ <div class="b"><i style="width:16px;height:24px"></i><span>16</span></div>
14
+ <div class="b"><i style="width:21px;height:24px"></i><span>21</span></div>
15
+ <div class="b"><i style="width:24px;height:24px"></i><span>24</span></div>
16
+ <div class="b"><i style="width:32px;height:24px"></i><span>32</span></div>
17
+ </div>
18
+ <div class="note"><b>Page</b> 24 top × 32 sides · <b>card padding</b> 21 (dense 17) · <b>section gap</b> 24 · <b>row padding</b> 12×16 · <b>control gap</b> 8 inside a group · <b>group gap</b> 12 / 16 / 24 by tier · <b>card edge → first control</b> 16 (sm 12). Heights are declared, never emergent: controls 24 / 32 / 36, bars and rows 32 / 40 / 44 (see Size Tiers).</div>
19
+ </body></html>
@@ -0,0 +1,25 @@
1
+ <!-- @dsCard group="Foundations" viewport="700x570" name="Interaction States" subtitle="The five states every control carries — and where each one is defined" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
4
+ <style>
5
+ body{margin:0;padding:14px 16px;font-family:var(--font-sans);background:var(--bg-surface);box-sizing:border-box}
6
+ table{border-collapse:collapse;width:100%}
7
+ th{text-align:left;font-size:var(--text-xs);font-weight:600;color:var(--text-muted);padding:0 10px 7px 0;border-bottom:1px solid var(--border-control)}
8
+ td{padding:8px 10px 8px 0;border-bottom:1px solid var(--border-subtle);vertical-align:middle;font-size:var(--text-xs);color:var(--text-body);line-height:1.5}
9
+ td.s{font-weight:500;color:var(--text-heading);white-space:nowrap}
10
+ code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-secondary)}
11
+ .demo{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--radius-md);background:var(--action-primary);color:var(--on-accent);font-size:12px;white-space:nowrap}
12
+ .g{background:transparent;color:var(--text-body);border:1px solid var(--border-control)}
13
+ .note{font-size:var(--text-xs);color:var(--text-secondary);padding-top:12px;line-height:1.6}
14
+ </style></head>
15
+ <body>
16
+ <table>
17
+ <tr><th style="width:74px">State</th><th style="width:172px">Solid</th><th style="width:150px">Ghost / outline</th><th>Rule &amp; source</th></tr>
18
+ <tr><td class="s">Rest</td><td><span class="demo">Submit</span></td><td><span class="demo g">Cancel</span></td><td>Component's own inline style — <code>--action-primary</code> / transparent</td></tr>
19
+ <tr><td class="s">Hover</td><td><span class="demo" style="background:var(--action-primary-hover)">Submit</span></td><td><span class="demo g" style="background:var(--bg-hover)">Cancel</span></td><td>One step darker — <code>--action-primary-hover</code>, <code>--bg-hover</code>, <code>--soft-hover</code>. Field borders step to <code>--border-strong</code>; text-only controls to <code>--text-heading</code></td></tr>
20
+ <tr><td class="s">Press</td><td><span class="demo" style="background:var(--action-primary-active)">Submit</span></td><td><span class="demo g" style="background:var(--bg-press)">Cancel</span></td><td>Two steps — explicit tokens on Button/IconButton; everything else gets <code>filter:var(--press-filter)</code> from <code>tokens/interaction.css</code></td></tr>
21
+ <tr><td class="s">Focus</td><td><span class="demo" style="outline:2px solid var(--focus-border);outline-offset:2px">Submit</span></td><td><span class="demo g" style="outline:2px solid var(--focus-border);outline-offset:2px">Cancel</span></td><td><code>:focus-visible</code> only — 2px <code>--focus-border</code> outline, 2px offset</td></tr>
22
+ <tr><td class="s">Disabled</td><td><span class="demo" style="opacity:.55">Submit</span></td><td><span class="demo g" style="opacity:.55">Cancel</span></td><td>55% opacity (50% on icon buttons), default cursor</td></tr>
23
+ </table>
24
+ <div class="note">Press and focus are delivered by one global layer (<code>tokens/interaction.css</code>) rather than re-implemented per component: <code>filter</code> and <code>outline</code> are never set inline, so the rules compose over whatever a component is painting. Because a pointer press always follows hover, the filter multiplies the hover wash — a ghost row reads as “hover plus one more step” without needing its own press color. In dark mode the filter brightens instead of darkens, matching the surface ramp direction. No scale transforms, no shadow shifts. The same layer carries the hover step for controls whose rest colours are inline — field boxes, segments, text-only controls, table rows — through <code>data-field</code>, <code>data-wash</code>, <code>data-ink</code> and <code>data-row</code>.</div>
25
+ </body></html>
@@ -0,0 +1,11 @@
1
+ <!-- @dsCard group="Type" viewport="700x440" name="Display Scale" subtitle="Display sizes 24–60 — tracking follows the same size→tracking curve" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
4
+ <style>body{margin:0;padding:14px 16px;font-family:var(--font-sans);background:var(--bg-surface);box-sizing:border-box}.r{display:grid;grid-template-columns:150px 1fr 200px;gap:12px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--border-subtle)}.m{font-size:var(--text-xs);font-family:var(--font-sans);font-variant-numeric:tabular-nums;color:var(--text-muted)}.u{font-size:var(--text-xs);color:var(--text-secondary);text-align:right}</style></head>
5
+ <body>
6
+ <div class="r"><span class="m">--text-xl · 24/32</span><span style="font-size:var(--text-xl);line-height:var(--leading-xl);letter-spacing:var(--tracking-xl);font-weight:500;color:var(--text-primary)">Good evening, Felix</span><span class="u">greeting heading · page hero</span></div>
7
+ <div class="r"><span class="m">--text-2xl · 30/38</span><span style="font-size:var(--text-2xl);line-height:var(--leading-2xl);letter-spacing:var(--tracking-2xl);font-weight:500;color:var(--text-primary)">Consolidation Report</span><span class="u">modal / report hero headings</span></div>
8
+ <div class="r"><span class="m">--text-3xl · 38/46</span><span style="font-size:var(--text-3xl);line-height:var(--leading-3xl);letter-spacing:var(--tracking-3xl);font-weight:500;color:var(--text-primary)">August Close Review</span><span class="u">marketing headings · site hero</span></div>
9
+ <div class="r"><span class="m">--text-4xl · 48/56</span><span style="font-size:var(--text-4xl);line-height:var(--leading-4xl);letter-spacing:var(--tracking-4xl);font-weight:300;color:var(--text-primary)">$1,284,900</span><span class="u">dashboard hero numbers (300)</span></div>
10
+ <div class="r" style="border-bottom:none"><span class="m">--text-display · 60/68</span><span style="font-size:var(--text-display);line-height:var(--leading-display);letter-spacing:var(--tracking-display);font-weight:600;color:var(--text-primary)">Keybricks</span><span class="u">slides &amp; covers (600)</span></div>
11
+ </body></html>
@@ -0,0 +1,10 @@
1
+ <!-- @dsCard group="Type" viewport="700x170" name="Mono / Code Only" subtitle="Menlo for code blocks, logs, inline code and config-code chips — IDs and amounts stay in Inter with tabular figures" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
4
+ <style>body{margin:0;padding:16px;font-family:var(--font-sans);background:var(--bg-app);display:flex;gap:12px;box-sizing:border-box}.p{flex:1;min-width:0;border:1px solid var(--border-card);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px}.cap{font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-muted)}.codeblk{background:var(--bg-inset);border-radius:8px;padding:8px 10px;font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-primary);white-space:pre}.log{background:var(--bg-inset);border-radius:8px;padding:8px 10px;font-family:var(--font-mono);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary);display:flex;flex-direction:column}.ui{font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);color:var(--text-primary);font-variant-numeric:tabular-nums;display:flex;flex-direction:column}</style></head>
5
+ <body>
6
+ <div class="p"><span class="cap">Code — Menlo, 12px on --bg-inset</span><div class="codeblk">SELECT entity, SUM(amount)
7
+ FROM ledger GROUP BY 1;</div></div>
8
+ <div class="p"><span class="cap">Logs — Menlo, 12px on --bg-inset</span><div class="log"><span>[14:30] Task started: Import</span><span>[14:31] Parsing configuration...</span></div></div>
9
+ <div class="p"><span class="cap">Config codes — code chip, Menlo 12</span><span><code style="font-family:var(--font-mono);font-size:var(--text-code);line-height:var(--leading-code);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:4px;padding:1px 6px;color:var(--text-primary)">FIN_CURRENCY_DEFAULT</code></span><span class="cap">Amounts and IDs — Inter, tabular figures</span><span class="ui"><span>528563 · 4,100.00</span></span></div>
10
+ </body></html>
@@ -0,0 +1,15 @@
1
+ <!-- @dsCard group="Type" viewport="700x450" name="Type Scale" subtitle="Inter — the 14px scale: 12 captions · 14 body and controls · 16 section titles · 20 page titles; CJK one step larger below 14" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
4
+ <style>body{margin:0;padding:14px 16px;font-family:var(--font-sans);background:var(--bg-surface);box-sizing:border-box}.r{display:grid;grid-template-columns:150px 1fr 190px;gap:12px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--border-subtle)}.m{font-size:var(--text-xs);font-family:var(--font-sans);font-variant-numeric:tabular-nums;color:var(--text-muted)}.u{font-size:var(--text-xs);color:var(--text-secondary);text-align:right}</style></head>
5
+ <body>
6
+ <div class="r"><span class="m">24 / 32 / +.07 · 300</span><span style="font-size:var(--text-num);line-height:var(--leading-num);letter-spacing:var(--tracking-num);font-weight:300;color:var(--text-primary)">156</span><span class="u">stat numerals</span></div>
7
+ <div class="r"><span class="m">24 / 32 / −.54 · 500</span><span style="font-size:var(--text-xl);line-height:var(--leading-xl);letter-spacing:var(--tracking-xl);font-weight:500;color:var(--text-primary)">Good evening, Felix</span><span class="u">greeting heading · page hero</span></div>
8
+ <div class="r"><span class="m">20 / 28 / −.449 · 500</span><span style="font-size:var(--text-lg);line-height:var(--leading-lg);letter-spacing:var(--tracking-lg);font-weight:500;color:var(--text-primary)">System Migration</span><span class="u">page titles</span></div>
9
+ <div class="r"><span class="m">16 / 24 / −.28 · 500–600</span><span style="font-size:var(--text-md);line-height:var(--leading-md);letter-spacing:var(--tracking-md);font-weight:500;color:var(--text-heading)">Configuration Comparison</span><span class="u">section headings · 600 panel, card and dialog titles</span></div>
10
+ <div class="r"><span class="m">14 / 20 / −.15 · 400–600</span><span style="font-size:var(--text-base);line-height:var(--leading-base);letter-spacing:var(--tracking-base);font-weight:400;color:var(--text-heading)">Import and manage configuration migrations</span><span class="u">body · md/lg controls · labels · table cells · table header 600</span></div>
11
+ <div class="r"><span class="m">12 / 16 · 400–500</span><span style="font-size:var(--text-xs);line-height:var(--leading-xs);letter-spacing:var(--tracking-xs);font-weight:400;color:var(--text-secondary)">Last updated 2 hours ago · 3 differences · helper text</span><span class="u">captions · helper · badges · tags · sm controls</span></div>
12
+ <div class="r"><span class="m">11 / 16 / +.064 · 400</span><span style="font-size:var(--text-2xs);line-height:var(--leading-2xs);letter-spacing:var(--tracking-2xs);font-weight:400;color:var(--text-body)">Jan · Feb · Mar · Apr</span><span class="u">chart text only — nothing in the UI is smaller; chart numerals stay 11 in every language</span></div>
13
+ <div class="r" lang="zh-CN"><span class="m">CJK 13 / 18 · 400–500</span><span style="font-size:var(--text-xs);line-height:var(--leading-xs);letter-spacing:var(--tracking-xs);font-weight:400;color:var(--text-secondary)">2 小時前更新 · 3 項差異 · 輔助說明</span><span class="u">zh · ja · ko replace the 12 step</span></div>
14
+ <div class="r" lang="zh-CN" style="border:none"><span class="m">CJK 12 / 16 · 400</span><span style="font-size:var(--text-2xs);line-height:var(--leading-2xs);letter-spacing:var(--tracking-2xs);font-weight:400;color:var(--text-body)">一月 · 二月 · 三月 · 四月</span><span class="u">replaces the 11 step — nothing CJK is under 12</span></div>
15
+ </body></html>
@@ -0,0 +1,12 @@
1
+ <!-- @dsCard group="Type" viewport="700x280" name="Inter Weights" subtitle="300 numerals · 400 body · 500 UI-medium · 600 titles — 500 becomes 600 in Chinese, Japanese and Korean" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../components/_shared/frame-theme.js"></script><link rel="stylesheet" href="../styles.css"><link rel="stylesheet" href="../tokens/hover.css">
4
+ <style>body{margin:0;padding:16px;font-family:var(--font-sans);background:var(--bg-surface);display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-content:start;box-sizing:border-box}.w{border:1px solid var(--border-card);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:2px}.w b{font-size:var(--text-xl);line-height:var(--leading-xl);letter-spacing:var(--tracking-xl);color:var(--text-primary)}.w span{font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-secondary)}</style></head>
5
+ <body>
6
+ <div class="w"><b style="font-weight:300">Ag 156</b><span>Light 300 — big numerals only</span></div>
7
+ <div class="w"><b style="font-weight:400">Ag Body</b><span>Regular 400 — body & buttons</span></div>
8
+ <div class="w"><b style="font-weight:500">Ag Medium</b><span>Medium 500 — nav, headings, labels</span></div>
9
+ <div class="w"><b style="font-weight:600">Ag Title</b><span>Semibold 600 — node, panel and table-header titles</span></div>
10
+ <div class="w" lang="zh-CN" style="grid-column:1/3"><b style="font-weight:var(--weight-medium)">中等字重 标签</b><span>--weight-medium under lang=zh → 600: Microsoft YaHei has no 500 face, so 500 would fall back to regular on Windows</span></div>
11
+ <div class="w" lang="ja" style="grid-column:3/5"><b style="font-weight:var(--weight-medium)">ミディアム ラベル</b><span>--weight-medium under lang=ja → 600, letter-spacing 0 (kana and kanji take no Latin tracking)</span></div>
12
+ </body></html>