@wycm9527/morganite 0.0.0-stage → 0.3.4
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.
- package/CHANGELOG.md +171 -0
- package/LICENSE +33 -0
- package/README.md +62 -2
- package/bridge/base.css +138 -0
- package/bridge/echarts.d.ts +44 -0
- package/bridge/echarts.js +217 -0
- package/bridge/element-plus.css +785 -0
- package/bridge/fonts.css +124 -0
- package/bridge/icon-merge.d.ts +5 -0
- package/bridge/icon-merge.js +103 -0
- package/bridge/iconpark.config.ts +75 -0
- package/bridge/iconpark.css +29 -0
- package/bridge/react/ConfirmBar.tsx +43 -0
- package/bridge/react/EChart.tsx +45 -0
- package/bridge/react/PageHeader.tsx +24 -0
- package/bridge/react/SectionHeader.tsx +17 -0
- package/bridge/react/StatCard.tsx +33 -0
- package/bridge/react/TableSkeleton.tsx +11 -0
- package/bridge/react/TrendChart.tsx +8 -0
- package/bridge/recipes.css +444 -0
- package/bridge/shadcn-globals.css +6 -0
- package/bridge/shadcn.css +238 -0
- package/bridge/vue/ConfirmBar.vue +23 -0
- package/bridge/vue/EChart.vue +43 -0
- package/bridge/vue/KitchenSink.vue +507 -0
- package/bridge/vue/PageHeader.vue +23 -0
- package/bridge/vue/SectionHeader.vue +15 -0
- package/bridge/vue/StatCard.vue +33 -0
- package/bridge/vue/TableSkeleton.vue +14 -0
- package/bridge/vue/TrendChart.vue +11 -0
- package/bridge/vue/confirm.js +18 -0
- package/bridge/vue/inlineConfirm.js +21 -0
- package/design-system/AUDIT.md +277 -0
- package/design-system/DESIGN.md +176 -0
- package/design-system/contrast.md +71 -0
- package/design-system/preview/drawer.html +38 -0
- package/design-system/preview/form.html +40 -0
- package/design-system/preview/index.html +21 -0
- package/design-system/preview/preview.css +190 -0
- package/design-system/preview/preview.local.css +17 -0
- package/design-system/preview/shell.html +50 -0
- package/design-system/scope-map.json +4 -0
- package/design-system/style-dictionary.config.mjs +172 -0
- package/design-system/theme-map.json +16 -0
- package/design-system/themes/dark/THEME.md +29 -0
- package/design-system/themes/dark/tokens/semantic.tokens.json +354 -0
- package/design-system/token-board.html +137 -0
- package/design-system/tokens/primitives.tokens.json +1898 -0
- package/design-system/tokens/semantic.tokens.json +1080 -0
- package/design-system.json +217 -0
- package/migration/roles.json +743 -0
- package/package.json +82 -4
- package/templates/AGENTS.md +13 -0
- package/templates/KitchenSink.tsx +179 -0
- package/templates/accept.config.mjs +28 -0
- package/templates/entry-css.css +6 -0
- package/templates/entry-element-plus.css +9 -0
- package/templates/entry-shadcn.css +7 -0
- package/templates/notes-css.md +4 -0
- package/templates/notes-element-plus.md +7 -0
- package/templates/notes-shadcn.md +7 -0
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>morganite · Token 预览板</title>
|
|
6
|
+
<link rel="stylesheet" href="dist/index.css">
|
|
7
|
+
<style>
|
|
8
|
+
/* 预览板自身的壳层样式全部引用 token 变量,缺失的角色由后备值兜底 */
|
|
9
|
+
/* vw 缩放的 rem 站点会带 layout.root.font-size:预览板按它渲染 rem 尺寸,否则按 16px */
|
|
10
|
+
:root { color-scheme: light dark; font-size: var(--layout-root-font-size, 16px); }
|
|
11
|
+
* { box-sizing: border-box; }
|
|
12
|
+
body { margin: 0; background: var(--color-bg-page, #f5f5f5); color: var(--color-text-primary, #111); font-family: var(--font-family-body, system-ui, sans-serif); font-size: var(--text-body-size, 14px); line-height: var(--text-body-line-height, 1.6); }
|
|
13
|
+
header { position: sticky; top: 0; z-index: var(--layer-sticky, 2); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px 32px; background: var(--color-bg-surface, #fff); border-bottom: var(--border-width-default, 1px) solid var(--color-border-default, #ddd); }
|
|
14
|
+
header h1 { margin: 0; font-size: var(--text-title-size, 16px); font-weight: var(--text-weight-strong, 600); }
|
|
15
|
+
header .meta { color: var(--color-text-muted, #666); font-size: var(--text-small-size, 12px); }
|
|
16
|
+
header button, .btn { height: var(--control-height-md, 36px); padding: 0 16px; border-radius: var(--radius-md, 8px); border: var(--border-width-default, 1px) solid var(--color-border-strong, #ccc); background: var(--color-bg-surface, #fff); color: var(--color-text-primary, #111); font: inherit; font-weight: var(--text-weight-label, 500); cursor: pointer; transition: background-color var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease); }
|
|
17
|
+
header button:hover, .btn:hover { background: var(--color-action-secondary-hover, var(--color-bg-hover, #eee)); }
|
|
18
|
+
.hint { color: var(--color-text-muted, #666); font-size: var(--text-small-size, 12px); }
|
|
19
|
+
main { max-width: var(--layout-container-max-width, 1200px); margin: 0 auto; padding: var(--space-gutter, 32px); display: grid; gap: var(--space-stack, 24px); }
|
|
20
|
+
section { background: var(--color-bg-surface, #fff); border: var(--border-width-default, 1px) solid var(--color-border-default, #ddd); border-radius: var(--radius-lg, 12px); padding: var(--space-card, 24px); box-shadow: 0 var(--elevation-card-y, 1px) var(--elevation-card-blur, 3px) var(--elevation-card-color, rgba(0,0,0,.06)); }
|
|
21
|
+
h2 { margin: 0 0 16px; font-size: var(--text-heading-size, 20px); line-height: var(--text-heading-line-height, 1.3); font-weight: var(--text-weight-strong, 600); }
|
|
22
|
+
h2 small, h3 small { color: var(--color-text-muted, #666); font-weight: var(--font-weight-regular, 400); font-size: var(--text-small-size, 12px); }
|
|
23
|
+
h3 { margin: 16px 0 8px; font-size: var(--text-title-sm-size, 15px); font-weight: var(--text-weight-label, 500); color: var(--color-text-secondary, #444); }
|
|
24
|
+
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-inline, 8px); }
|
|
25
|
+
.sw { display: grid; grid-template-rows: 56px auto auto; gap: 4px; font-size: var(--text-small-size, 12px); }
|
|
26
|
+
.sw i { display: block; border-radius: var(--radius-sm, 6px); border: var(--border-width-default, 1px) solid var(--color-border-default, #ddd); }
|
|
27
|
+
.sw i.radius { background: var(--color-bg-subtle, #eee); border: var(--border-width-active, 2px) solid var(--color-border-strong, #999); }
|
|
28
|
+
.sw b { font-weight: var(--text-weight-label, 500); word-break: break-all; }
|
|
29
|
+
.sw span { color: var(--color-text-muted, #666); word-break: break-all; }
|
|
30
|
+
.family + .family { margin-top: 8px; }
|
|
31
|
+
.ladder-row, .type-row { display: grid; grid-template-columns: 220px 1fr auto; gap: 12px; align-items: center; padding: 6px 0; border-bottom: var(--border-width-default, 1px) solid var(--color-border-default, #eee); }
|
|
32
|
+
.ladder-row span.px { display: block; height: 12px; width: var(--w); background: var(--color-action-primary, #333); border-radius: var(--radius-xs, 2px); }
|
|
33
|
+
.ladder-row span.bw { display: block; height: 0; border-top: var(--w) solid var(--color-text-primary, #111); }
|
|
34
|
+
.type-row span { color: var(--color-text-primary, #111); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
35
|
+
code, small { font-family: var(--font-family-code, ui-monospace, monospace); font-size: var(--text-small-size, 12px); }
|
|
36
|
+
small { color: var(--color-text-muted, #666); }
|
|
37
|
+
.elevs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-stack, 24px); }
|
|
38
|
+
.elev { padding: var(--space-card, 24px); border-radius: var(--radius-lg, 12px); background: var(--color-bg-elevated, var(--color-bg-surface, #fff)); }
|
|
39
|
+
.elev b { display: block; font-weight: var(--text-weight-label, 500); }
|
|
40
|
+
table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm-size, 13px); }
|
|
41
|
+
th { text-align: left; font-weight: var(--text-weight-label, 500); color: var(--color-text-secondary, #444); background: var(--color-bg-subtle, #f5f5f5); padding: var(--table-cell-padding-y, 10px) var(--table-cell-padding-x, 12px); border-bottom: var(--border-width-default, 1px) solid var(--color-border-default, #ddd); }
|
|
42
|
+
td { padding: var(--table-cell-padding-y, 10px) var(--table-cell-padding-x, 12px); border-bottom: var(--border-width-default, 1px) solid var(--color-border-default, #eee); vertical-align: top; }
|
|
43
|
+
tr:hover td { background: var(--color-bg-hover, #f7f7f7); }
|
|
44
|
+
td.changed { color: var(--color-text-link, inherit); font-weight: var(--text-weight-label, 500); }
|
|
45
|
+
td.desc { color: var(--color-text-muted, #666); font-size: var(--text-small-size, 12px); max-width: 420px; }
|
|
46
|
+
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; border: 1px solid var(--color-border-default, #ddd); vertical-align: middle; }
|
|
47
|
+
.samples { display: flex; flex-wrap: wrap; gap: var(--space-stack, 24px); align-items: flex-start; }
|
|
48
|
+
.sample-card { flex: 1 1 320px; display: grid; gap: var(--space-inline, 8px); }
|
|
49
|
+
.btn.primary { background: var(--color-action-primary); color: var(--color-text-on-primary, #fff); border-color: transparent; }
|
|
50
|
+
.btn.primary:hover { background: var(--color-action-primary-hover, var(--color-action-primary)); }
|
|
51
|
+
.btn.danger { background: var(--color-action-danger); color: var(--color-text-on-danger, #fff); border-color: transparent; }
|
|
52
|
+
.btn.quiet { background: var(--color-action-quiet, transparent); border-color: transparent; color: var(--color-text-link, inherit); }
|
|
53
|
+
.btn[disabled] { opacity: var(--opacity-disabled, .5); cursor: not-allowed; }
|
|
54
|
+
.btn:focus-visible, .input:focus-visible { outline: var(--focus-ring-width, 3px) solid var(--color-focus-ring, #888); outline-offset: 2px; }
|
|
55
|
+
.input { height: var(--control-height-md, 36px); padding: 0 12px; border-radius: var(--radius-md, 8px); border: var(--border-width-default, 1px) solid var(--color-border-input, #ccc); background: var(--color-bg-input, #fff); color: var(--color-text-primary, #111); font: inherit; width: 100%; }
|
|
56
|
+
.input::placeholder { color: var(--color-text-placeholder, #999); }
|
|
57
|
+
.input:focus { border-color: var(--color-border-focus, #333); outline: none; box-shadow: 0 0 0 var(--focus-ring-width, 3px) var(--color-focus-ring, rgba(0,0,0,.15)); }
|
|
58
|
+
.badge { display: inline-flex; align-items: center; height: var(--control-height-xs, 22px); padding: 0 var(--spacing-2, 8px); border-radius: var(--radius-full, 999px); font-size: var(--text-caption-size, 12px); font-weight: var(--font-weight-regular, 400); }
|
|
59
|
+
.badge.success { background: var(--color-status-success-bg); color: var(--color-status-success); }
|
|
60
|
+
.badge.warning { background: var(--color-status-warning-bg); color: var(--color-status-warning); }
|
|
61
|
+
.badge.error { background: var(--color-status-error-bg); color: var(--color-status-error); }
|
|
62
|
+
.badge.info { background: var(--color-status-info-bg); color: var(--color-status-info); }
|
|
63
|
+
.badge.neutral { background: var(--color-status-neutral-bg); color: var(--color-status-neutral); }
|
|
64
|
+
.tooltip { display: inline-block; background: var(--color-bg-inverse, #111); color: var(--color-text-inverse, #fff); padding: 6px 10px; border-radius: var(--radius-sm, 6px); font-size: var(--text-small-size, 12px); }
|
|
65
|
+
.card-sample { border: var(--border-width-default, 1px) solid var(--color-border-default, #ddd); border-radius: var(--radius-lg, 12px); padding: var(--space-card, 24px); background: var(--color-bg-surface, #fff); box-shadow: 0 var(--elevation-card-y, 1px) var(--elevation-card-blur, 3px) var(--elevation-card-color, rgba(0,0,0,.06)); }
|
|
66
|
+
.card-sample p { margin: 4px 0 0; color: var(--color-text-secondary, #444); }
|
|
67
|
+
.card-sample small { display: block; margin-top: 8px; }
|
|
68
|
+
a { color: var(--color-text-link, inherit); text-decoration: var(--text-link-decoration, underline); }
|
|
69
|
+
a:hover { color: var(--color-text-link-hover, inherit); }
|
|
70
|
+
.search { margin-bottom: 12px; }
|
|
71
|
+
</style>
|
|
72
|
+
</head>
|
|
73
|
+
<body>
|
|
74
|
+
<header>
|
|
75
|
+
<h1>morganite · Token 预览板</h1>
|
|
76
|
+
<span class="meta">359 个 Core token · Theme:dark(66 条 delta) · 样式来自 dist/index.css</span>
|
|
77
|
+
<button type="button" data-theme-id="dark" data-kind="class" data-attribute="">切换 dark</button>
|
|
78
|
+
</header>
|
|
79
|
+
<main>
|
|
80
|
+
<section>
|
|
81
|
+
<h2>组件样例 <small>只用语义变量拼出来的,缺角色会露出后备值 · 系统类型 中后台(admin)</small></h2>
|
|
82
|
+
<div class="samples">
|
|
83
|
+
<div class="sample-card">
|
|
84
|
+
<div style="display:flex;gap:8px;flex-wrap:wrap">
|
|
85
|
+
<button class="btn primary" type="button">主按钮</button>
|
|
86
|
+
<button class="btn" type="button">次要按钮</button>
|
|
87
|
+
<button class="btn quiet" type="button">文字按钮</button>
|
|
88
|
+
<button class="btn danger" type="button">危险</button>
|
|
89
|
+
<button class="btn primary" type="button" disabled>禁用</button>
|
|
90
|
+
</div>
|
|
91
|
+
<input class="input" placeholder="占位符 · color.text.placeholder">
|
|
92
|
+
<div style="display:flex;gap:8px;flex-wrap:wrap">
|
|
93
|
+
<span class="badge success">已通过</span><span class="badge warning">待审批</span><span class="badge error">已驳回</span><span class="badge info">提示</span><span class="badge neutral">草稿</span>
|
|
94
|
+
</div>
|
|
95
|
+
<div><span class="tooltip">Tooltip · bg.inverse + text.inverse</span></div>
|
|
96
|
+
<p>正文 <a href="#">内容型链接</a> · <span style="color:var(--color-text-secondary)">次要文字</span> · <span style="color:var(--color-text-muted)">弱化文字</span> · <span style="color:var(--color-text-danger)">危险文字</span></p>
|
|
97
|
+
</div>
|
|
98
|
+
<div class="sample-card">
|
|
99
|
+
<div class="card-sample">
|
|
100
|
+
<b style="font-size:var(--text-title-size);font-weight:var(--text-weight-strong)">卡片标题 · text.title</b>
|
|
101
|
+
<p>bg.surface + border.default + elevation.card;内边距 space.card。</p>
|
|
102
|
+
<small>说明文字 · text.small + text.muted</small>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="card-sample" style="background:var(--color-bg-subtle)"><small>bg.subtle 浅分区底</small></div>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</section>
|
|
108
|
+
<section><h2>底色 <small>20</small></h2><div class="grid"><div class="sw"><i style="background:var(--color-bg-brand)"></i><b>bg.brand</b><span>→ brand.500 #B98D44</span></div><div class="sw"><i style="background:var(--color-bg-chip)"></i><b>bg.chip</b><span>→ brand.600-a10 #8A65301A</span></div><div class="sw"><i style="background:var(--color-bg-elevated)"></i><b>bg.elevated</b><span>→ white #FFFFFF</span></div><div class="sw"><i style="background:var(--color-bg-hover)"></i><b>bg.hover</b><span>→ neutral.black-a4 #0000000A</span></div><div class="sw"><i style="background:var(--color-bg-input)"></i><b>bg.input</b><span>→ neutral.black-a4 #0000000A</span></div><div class="sw"><i style="background:var(--color-bg-inverse)"></i><b>bg.inverse</b><span>→ neutral.black-a85 #000000D9</span></div><div class="sw"><i style="background:var(--color-bg-mask)"></i><b>bg.mask</b><span>→ neutral.white-a50 #FFFFFF80</span></div><div class="sw"><i style="background:var(--color-bg-overlay)"></i><b>bg.overlay</b><span>→ neutral.black-a45 #00000073</span></div><div class="sw"><i style="background:var(--color-bg-page)"></i><b>bg.page</b><span>→ neutral.100 #F5F5F5</span></div><div class="sw"><i style="background:var(--color-bg-readonly)"></i><b>bg.readonly</b><span>→ neutral.black-a4 #0000000A</span></div><div class="sw"><i style="background:var(--color-bg-selected)"></i><b>bg.selected</b><span>→ neutral.black-a4 #0000000A</span></div><div class="sw"><i style="background:var(--color-bg-selected-hover)"></i><b>bg.selected-hover</b><span>→ neutral.black-a6 #0000000F</span></div><div class="sw"><i style="background:var(--color-bg-selected-subtle)"></i><b>bg.selected-subtle</b><span>→ brand.50 #FDF4DE</span></div><div class="sw"><i style="background:var(--color-bg-sidebar)"></i><b>bg.sidebar</b><span>→ white #FFFFFF</span></div><div class="sw"><i style="background:var(--color-bg-sidebar-hover)"></i><b>bg.sidebar-hover</b><span>→ neutral.black-a3 #00000008</span></div><div class="sw"><i style="background:var(--color-bg-sidebar-selected)"></i><b>bg.sidebar-selected</b><span>→ brand.500 #B98D44</span></div><div class="sw"><i style="background:var(--color-bg-skeleton)"></i><b>bg.skeleton</b><span>→ neutral.black-a6 #0000000F</span></div><div class="sw"><i style="background:var(--color-bg-skeleton-highlight)"></i><b>bg.skeleton-highlight</b><span>→ neutral.black-a15 #00000026</span></div><div class="sw"><i style="background:var(--color-bg-subtle)"></i><b>bg.subtle</b><span>→ neutral.100 #F5F5F5</span></div><div class="sw"><i style="background:var(--color-bg-surface)"></i><b>bg.surface</b><span>→ white #FFFFFF</span></div></div></section><section><h2>文字 <small>20</small></h2><div class="grid"><div class="sw"><i style="background:var(--color-text-brand)"></i><b>text.brand</b><span>→ brand.500 #B98D44</span></div><div class="sw"><i style="background:var(--color-text-card-title)"></i><b>text.card-title</b><span>→ neutral.875 #212121</span></div><div class="sw"><i style="background:var(--color-text-danger)"></i><b>text.danger</b><span>→ red.7 #CF1322</span></div><div class="sw"><i style="background:var(--color-text-inverse)"></i><b>text.inverse</b><span>→ white #FFFFFF</span></div><div class="sw"><i style="background:var(--color-text-link)"></i><b>text.link</b><span>→ brand.600 #8A6530</span></div><div class="sw"><i style="background:var(--color-text-link-hover)"></i><b>text.link-hover</b><span>→ brand.700 #63441E</span></div><div class="sw"><i style="background:var(--color-text-muted)"></i><b>text.muted</b><span>→ neutral.black-a58 #00000094</span></div><div class="sw"><i style="background:var(--color-text-on-brand)"></i><b>text.on-brand</b><span>→ white #FFFFFF</span></div><div class="sw"><i style="background:var(--color-text-on-danger)"></i><b>text.on-danger</b><span>→ white #FFFFFF</span></div><div class="sw"><i style="background:var(--color-text-on-overlay)"></i><b>text.on-overlay</b><span>→ neutral.black-a88 #000000E0</span></div><div class="sw"><i style="background:var(--color-text-on-primary)"></i><b>text.on-primary</b><span>→ white #FFFFFF</span></div><div class="sw"><i style="background:var(--color-text-on-selected)"></i><b>text.on-selected</b><span>→ neutral.black-a88 #000000E0</span></div><div class="sw"><i style="background:var(--color-text-placeholder)"></i><b>text.placeholder</b><span>→ neutral.black-a45 #00000073</span></div><div class="sw"><i style="background:var(--color-text-primary)"></i><b>text.primary</b><span>→ neutral.black-a88 #000000E0</span></div><div class="sw"><i style="background:var(--color-text-secondary)"></i><b>text.secondary</b><span>→ neutral.black-a65 #000000A6</span></div><div class="sw"><i style="background:var(--color-text-selected)"></i><b>text.selected</b><span>→ brand.600 #8A6530</span></div><div class="sw"><i style="background:var(--color-text-sidebar)"></i><b>text.sidebar</b><span>→ neutral.black-a65 #000000A6</span></div><div class="sw"><i style="background:var(--color-text-sidebar-muted)"></i><b>text.sidebar-muted</b><span>→ neutral.black-a58 #00000094</span></div><div class="sw"><i style="background:var(--color-text-sidebar-selected)"></i><b>text.sidebar-selected</b><span>→ white #FFFFFF</span></div><div class="sw"><i style="background:var(--color-text-sidebar-strong)"></i><b>text.sidebar-strong</b><span>→ neutral.black-a88 #000000E0</span></div></div></section><section><h2>操作面 <small>10</small></h2><div class="grid"><div class="sw"><i style="background:var(--color-action-danger)"></i><b>action.danger</b><span>→ red.7 #CF1322</span></div><div class="sw"><i style="background:var(--color-action-danger-active)"></i><b>action.danger-active</b><span>→ red.9 #820014</span></div><div class="sw"><i style="background:var(--color-action-danger-hover)"></i><b>action.danger-hover</b><span>→ red.8 #A8071A</span></div><div class="sw"><i style="background:var(--color-action-primary)"></i><b>action.primary</b><span>→ brand.500 #B98D44</span></div><div class="sw"><i style="background:var(--color-action-primary-active)"></i><b>action.primary-active</b><span>→ brand.600 #8A6530</span></div><div class="sw"><i style="background:var(--color-action-primary-hover)"></i><b>action.primary-hover</b><span>→ brand.550 #B1863D</span></div><div class="sw"><i style="background:var(--color-action-quiet)"></i><b>action.quiet</b><span>→ neutral.transparent #00000000</span></div><div class="sw"><i style="background:var(--color-action-quiet-hover)"></i><b>action.quiet-hover</b><span>→ neutral.black-a4 #0000000A</span></div><div class="sw"><i style="background:var(--color-action-secondary-hover)"></i><b>action.secondary-hover</b><span>→ neutral.black-a4 #0000000A</span></div><div class="sw"><i style="background:var(--color-action-selected)"></i><b>action.selected</b><span>→ white #FFFFFF</span></div></div></section><section><h2>边线 <small>6</small></h2><div class="grid"><div class="sw"><i style="background:var(--color-border-current)"></i><b>border.current</b><span>→ brand.500 #B98D44</span></div><div class="sw"><i style="background:var(--color-border-default)"></i><b>border.default</b><span>→ neutral.black-a6 #0000000F</span></div><div class="sw"><i style="background:var(--color-border-focus)"></i><b>border.focus</b><span>→ brand.600 #8A6530</span></div><div class="sw"><i style="background:var(--color-border-input)"></i><b>border.input</b><span>→ neutral.transparent #00000000</span></div><div class="sw"><i style="background:var(--color-border-sidebar)"></i><b>border.sidebar</b><span>→ neutral.split #0505050F</span></div><div class="sw"><i style="background:var(--color-border-strong)"></i><b>border.strong</b><span>→ neutral.300 #D8D8D8</span></div></div></section><section><h2>焦点 <small>1</small></h2><div class="grid"><div class="sw"><i style="background:var(--color-focus-ring)"></i><b>focus.ring</b><span>→ brand.600 #8A6530</span></div></div></section><section><h2>状态 <small>10</small></h2><div class="grid"><div class="sw"><i style="background:var(--color-status-error)"></i><b>status.error</b><span>→ red.7 #CF1322</span></div><div class="sw"><i style="background:var(--color-status-error-bg)"></i><b>status.error-bg</b><span>→ red.1 #FFF1F0</span></div><div class="sw"><i style="background:var(--color-status-info)"></i><b>status.info</b><span>→ blue.7 #0958D9</span></div><div class="sw"><i style="background:var(--color-status-info-bg)"></i><b>status.info-bg</b><span>→ blue.1 #E6F4FF</span></div><div class="sw"><i style="background:var(--color-status-neutral)"></i><b>status.neutral</b><span>→ neutral.black-a65 #000000A6</span></div><div class="sw"><i style="background:var(--color-status-neutral-bg)"></i><b>status.neutral-bg</b><span>→ neutral.black-a6 #0000000F</span></div><div class="sw"><i style="background:var(--color-status-success)"></i><b>status.success</b><span>→ emerald.700 #2E7D52</span></div><div class="sw"><i style="background:var(--color-status-success-bg)"></i><b>status.success-bg</b><span>→ emerald.50 #EDF7F1</span></div><div class="sw"><i style="background:var(--color-status-warning)"></i><b>status.warning</b><span>→ orange.8 #AD4E00</span></div><div class="sw"><i style="background:var(--color-status-warning-bg)"></i><b>status.warning-bg</b><span>→ orange.1 #FFF7E6</span></div></div></section><section><h2>品牌 <small>1</small></h2><div class="grid"><div class="sw"><i style="background:var(--color-brand-indicator)"></i><b>brand.indicator</b><span>→ brand.500 #B98D44</span></div></div></section><section><h2>图标 <small>4</small></h2><div class="grid"><div class="sw"><i style="background:var(--color-icon-brand)"></i><b>icon.brand</b><span>→ brand.500 #B98D44</span></div><div class="sw"><i style="background:var(--color-icon-default)"></i><b>icon.default</b><span>→ neutral.black-a65 #000000A6</span></div><div class="sw"><i style="background:var(--color-icon-muted)"></i><b>icon.muted</b><span>→ neutral.black-a45 #00000073</span></div><div class="sw"><i style="background:var(--color-icon-two-tone)"></i><b>icon.two-tone</b><span>→ brand.50 #FDF4DE</span></div></div></section><section><h2>图表 <small>15</small></h2><div class="grid"><div class="sw"><i style="background:var(--color-chart-1)"></i><b>chart.1</b><span>→ brand.500 #B98D44</span></div><div class="sw"><i style="background:var(--color-chart-2)"></i><b>chart.2</b><span>→ cat.charcoal #595959</span></div><div class="sw"><i style="background:var(--color-chart-3)"></i><b>chart.3</b><span>→ brand.200 #DDB67B</span></div><div class="sw"><i style="background:var(--color-chart-4)"></i><b>chart.4</b><span>→ cat.gray #8C8C8C</span></div><div class="sw"><i style="background:var(--color-chart-5)"></i><b>chart.5</b><span>→ cat.silver #CFCFCF</span></div><div class="sw"><i style="background:var(--color-chart-6)"></i><b>chart.6</b><span>→ emerald.500 #4E9A6A</span></div><div class="sw"><i style="background:var(--color-chart-area)"></i><b>chart.area</b><span>→ brand.500-a16 #B98D4429</span></div><div class="sw"><i style="background:var(--color-chart-gradient-end)"></i><b>chart.gradient.end</b><span>→ brand.250 #D8AC63</span></div><div class="sw"><i style="background:var(--color-chart-gradient-start)"></i><b>chart.gradient.start</b><span>→ brand.550 #B1863D</span></div><div class="sw"><i style="background:var(--color-chart-sequential-1)"></i><b>chart.sequential.1</b><span>→ neutral.200 #F0F0F0</span></div><div class="sw"><i style="background:var(--color-chart-sequential-2)"></i><b>chart.sequential.2</b><span>→ neutral.300 #D8D8D8</span></div><div class="sw"><i style="background:var(--color-chart-sequential-3)"></i><b>chart.sequential.3</b><span>→ neutral.500 #A6A6A6</span></div><div class="sw"><i style="background:var(--color-chart-sequential-4)"></i><b>chart.sequential.4</b><span>→ cat.charcoal #595959</span></div><div class="sw"><i style="background:var(--color-chart-sequential-5)"></i><b>chart.sequential.5</b><span>→ brand.500 #B98D44</span></div><div class="sw"><i style="background:var(--color-chart-tooltip)"></i><b>chart.tooltip</b><span>→ white #FFFFFF</span></div></div></section><section><h2>数据 <small>3</small></h2><div class="grid"><div class="sw"><i style="background:var(--color-data-decrease)"></i><b>data.decrease</b><span>→ red.7 #CF1322</span></div><div class="sw"><i style="background:var(--color-data-inactive)"></i><b>data.inactive</b><span>→ neutral.black-a25 #00000040</span></div><div class="sw"><i style="background:var(--color-data-increase)"></i><b>data.increase</b><span>→ emerald.700 #2E7D52</span></div></div></section>
|
|
109
|
+
<section><h2>Primitive 色族 <small>black / blue / brand / cat / emerald / neutral / orange / red / white</small></h2><div class="family"><h3>black</h3><div class="grid"><div class="sw"><i style="background:var(--color-black)"></i><b></b><span>#000000</span></div></div></div><div class="family"><h3>blue</h3><div class="grid"><div class="sw"><i style="background:var(--color-blue-1)"></i><b>1</b><span>#E6F4FF</span></div><div class="sw"><i style="background:var(--color-blue-4)"></i><b>4</b><span>#69B1FF</span></div><div class="sw"><i style="background:var(--color-blue-7)"></i><b>7</b><span>#0958D9</span></div><div class="sw"><i style="background:var(--color-blue-dark-1)"></i><b>dark-1</b><span>#111A2C</span></div></div></div><div class="family"><h3>brand</h3><div class="grid"><div class="sw"><i style="background:var(--color-brand-100)"></i><b>100</b><span>#F9EDD3</span></div><div class="sw"><i style="background:var(--color-brand-200)"></i><b>200</b><span>#DDB67B</span></div><div class="sw"><i style="background:var(--color-brand-250)"></i><b>250</b><span>#D8AC63</span></div><div class="sw"><i style="background:var(--color-brand-300)"></i><b>300</b><span>#D1AB62</span></div><div class="sw"><i style="background:var(--color-brand-300-a10)"></i><b>300-a10</b><span>#D1AB621A</span></div><div class="sw"><i style="background:var(--color-brand-400)"></i><b>400</b><span>#C4A56D</span></div><div class="sw"><i style="background:var(--color-brand-50)"></i><b>50</b><span>#FDF4DE</span></div><div class="sw"><i style="background:var(--color-brand-500)"></i><b>500</b><span>#B98D44</span></div><div class="sw"><i style="background:var(--color-brand-500-a16)"></i><b>500-a16</b><span>#B98D4429</span></div><div class="sw"><i style="background:var(--color-brand-500-a24)"></i><b>500-a24</b><span>#B98D443D</span></div><div class="sw"><i style="background:var(--color-brand-550)"></i><b>550</b><span>#B1863D</span></div><div class="sw"><i style="background:var(--color-brand-600)"></i><b>600</b><span>#8A6530</span></div><div class="sw"><i style="background:var(--color-brand-600-a10)"></i><b>600-a10</b><span>#8A65301A</span></div><div class="sw"><i style="background:var(--color-brand-700)"></i><b>700</b><span>#63441E</span></div><div class="sw"><i style="background:var(--color-brand-800)"></i><b>800</b><span>#433724</span></div><div class="sw"><i style="background:var(--color-brand-900)"></i><b>900</b><span>#32291C</span></div></div></div><div class="family"><h3>cat</h3><div class="grid"><div class="sw"><i style="background:var(--color-cat-charcoal)"></i><b>charcoal</b><span>#595959</span></div><div class="sw"><i style="background:var(--color-cat-charcoal-dark)"></i><b>charcoal-dark</b><span>#BFBFBF</span></div><div class="sw"><i style="background:var(--color-cat-gray)"></i><b>gray</b><span>#8C8C8C</span></div><div class="sw"><i style="background:var(--color-cat-silver)"></i><b>silver</b><span>#CFCFCF</span></div><div class="sw"><i style="background:var(--color-cat-silver-dark)"></i><b>silver-dark</b><span>#4A4A4A</span></div></div></div><div class="family"><h3>emerald</h3><div class="grid"><div class="sw"><i style="background:var(--color-emerald-300)"></i><b>300</b><span>#5FBF86</span></div><div class="sw"><i style="background:var(--color-emerald-50)"></i><b>50</b><span>#EDF7F1</span></div><div class="sw"><i style="background:var(--color-emerald-500)"></i><b>500</b><span>#4E9A6A</span></div><div class="sw"><i style="background:var(--color-emerald-700)"></i><b>700</b><span>#2E7D52</span></div><div class="sw"><i style="background:var(--color-emerald-dark-1)"></i><b>dark-1</b><span>#13261B</span></div></div></div><div class="family"><h3>neutral</h3><div class="grid"><div class="sw"><i style="background:var(--color-neutral-100)"></i><b>100</b><span>#F5F5F5</span></div><div class="sw"><i style="background:var(--color-neutral-200)"></i><b>200</b><span>#F0F0F0</span></div><div class="sw"><i style="background:var(--color-neutral-300)"></i><b>300</b><span>#D8D8D8</span></div><div class="sw"><i style="background:var(--color-neutral-50)"></i><b>50</b><span>#FAFAFA</span></div><div class="sw"><i style="background:var(--color-neutral-500)"></i><b>500</b><span>#A6A6A6</span></div><div class="sw"><i style="background:var(--color-neutral-600)"></i><b>600</b><span>#6E6E6E</span></div><div class="sw"><i style="background:var(--color-neutral-700)"></i><b>700</b><span>#424242</span></div><div class="sw"><i style="background:var(--color-neutral-800)"></i><b>800</b><span>#303030</span></div><div class="sw"><i style="background:var(--color-neutral-850)"></i><b>850</b><span>#262626</span></div><div class="sw"><i style="background:var(--color-neutral-875)"></i><b>875</b><span>#212121</span></div><div class="sw"><i style="background:var(--color-neutral-900)"></i><b>900</b><span>#1F1F1F</span></div><div class="sw"><i style="background:var(--color-neutral-950)"></i><b>950</b><span>#141414</span></div><div class="sw"><i style="background:var(--color-neutral-950-a50)"></i><b>950-a50</b><span>#14141480</span></div><div class="sw"><i style="background:var(--color-neutral-black-a15)"></i><b>black-a15</b><span>#00000026</span></div><div class="sw"><i style="background:var(--color-neutral-black-a25)"></i><b>black-a25</b><span>#00000040</span></div><div class="sw"><i style="background:var(--color-neutral-black-a3)"></i><b>black-a3</b><span>#00000008</span></div><div class="sw"><i style="background:var(--color-neutral-black-a4)"></i><b>black-a4</b><span>#0000000A</span></div><div class="sw"><i style="background:var(--color-neutral-black-a45)"></i><b>black-a45</b><span>#00000073</span></div><div class="sw"><i style="background:var(--color-neutral-black-a58)"></i><b>black-a58</b><span>#00000094</span></div><div class="sw"><i style="background:var(--color-neutral-black-a6)"></i><b>black-a6</b><span>#0000000F</span></div><div class="sw"><i style="background:var(--color-neutral-black-a65)"></i><b>black-a65</b><span>#000000A6</span></div><div class="sw"><i style="background:var(--color-neutral-black-a85)"></i><b>black-a85</b><span>#000000D9</span></div><div class="sw"><i style="background:var(--color-neutral-black-a88)"></i><b>black-a88</b><span>#000000E0</span></div><div class="sw"><i style="background:var(--color-neutral-black-a95)"></i><b>black-a95</b><span>#000000F2</span></div><div class="sw"><i style="background:var(--color-neutral-shadow-a12)"></i><b>shadow-a12</b><span>#0000001F</span></div><div class="sw"><i style="background:var(--color-neutral-shadow-a5)"></i><b>shadow-a5</b><span>#0000000D</span></div><div class="sw"><i style="background:var(--color-neutral-shadow-a8)"></i><b>shadow-a8</b><span>#00000014</span></div><div class="sw"><i style="background:var(--color-neutral-split)"></i><b>split</b><span>#0505050F</span></div><div class="sw"><i style="background:var(--color-neutral-transparent)"></i><b>transparent</b><span>#00000000</span></div><div class="sw"><i style="background:var(--color-neutral-white-a12)"></i><b>white-a12</b><span>#FDFDFD1F</span></div><div class="sw"><i style="background:var(--color-neutral-white-a25)"></i><b>white-a25</b><span>#FFFFFF40</span></div><div class="sw"><i style="background:var(--color-neutral-white-a3)"></i><b>white-a3</b><span>#FFFFFF08</span></div><div class="sw"><i style="background:var(--color-neutral-white-a4)"></i><b>white-a4</b><span>#FFFFFF0A</span></div><div class="sw"><i style="background:var(--color-neutral-white-a45)"></i><b>white-a45</b><span>#FFFFFF73</span></div><div class="sw"><i style="background:var(--color-neutral-white-a50)"></i><b>white-a50</b><span>#FFFFFF80</span></div><div class="sw"><i style="background:var(--color-neutral-white-a65)"></i><b>white-a65</b><span>#FFFFFFA6</span></div><div class="sw"><i style="background:var(--color-neutral-white-a8)"></i><b>white-a8</b><span>#FFFFFF14</span></div><div class="sw"><i style="background:var(--color-neutral-white-a85)"></i><b>white-a85</b><span>#FFFFFFD9</span></div></div></div><div class="family"><h3>orange</h3><div class="grid"><div class="sw"><i style="background:var(--color-orange-1)"></i><b>1</b><span>#FFF7E6</span></div><div class="sw"><i style="background:var(--color-orange-4)"></i><b>4</b><span>#FFC069</span></div><div class="sw"><i style="background:var(--color-orange-8)"></i><b>8</b><span>#AD4E00</span></div><div class="sw"><i style="background:var(--color-orange-dark-1)"></i><b>dark-1</b><span>#2B1D11</span></div></div></div><div class="family"><h3>red</h3><div class="grid"><div class="sw"><i style="background:var(--color-red-1)"></i><b>1</b><span>#FFF1F0</span></div><div class="sw"><i style="background:var(--color-red-4)"></i><b>4</b><span>#FF7875</span></div><div class="sw"><i style="background:var(--color-red-7)"></i><b>7</b><span>#CF1322</span></div><div class="sw"><i style="background:var(--color-red-8)"></i><b>8</b><span>#A8071A</span></div><div class="sw"><i style="background:var(--color-red-9)"></i><b>9</b><span>#820014</span></div><div class="sw"><i style="background:var(--color-red-dark-1)"></i><b>dark-1</b><span>#2A1215</span></div></div></div><div class="family"><h3>white</h3><div class="grid"><div class="sw"><i style="background:var(--color-white)"></i><b></b><span>#FFFFFF</span></div></div></div></section>
|
|
110
|
+
<section><h2>字号阶梯与字体</h2><div class="type-row"><code>text.caption.size</code><span style="font-size:var(--text-caption-size);line-height:1.25">设计系统 Design System 0123</span><small>12px</small></div><div class="type-row"><code>text.small.size</code><span style="font-size:var(--text-small-size);line-height:1.25">设计系统 Design System 0123</span><small>12px</small></div><div class="type-row"><code>text.body-sm.size</code><span style="font-size:var(--text-body-sm-size);line-height:1.25">设计系统 Design System 0123</span><small>12px</small></div><div class="type-row"><code>text.body.size</code><span style="font-size:var(--text-body-size);line-height:1.25">设计系统 Design System 0123</span><small>14px</small></div><div class="type-row"><code>text.title-sm.size</code><span style="font-size:var(--text-title-sm-size);line-height:1.25">设计系统 Design System 0123</span><small>16px</small></div><div class="type-row"><code>text.title.size</code><span style="font-size:var(--text-title-size);line-height:1.25">设计系统 Design System 0123</span><small>20px</small></div><div class="type-row"><code>text.heading.size</code><span style="font-size:var(--text-heading-size);line-height:1.25">设计系统 Design System 0123</span><small>24px</small></div><div class="type-row"><code>text.display.size</code><span style="font-size:var(--text-display-size);line-height:1.25">设计系统 Design System 0123</span><small>30px</small></div><div class="type-row"><code>text.hero.size</code><span style="font-size:var(--text-hero-size);line-height:1.25">设计系统 Design System 0123</span><small>38px</small></div><div class="type-row"><code>font.family.body</code><span style="font-family:var(--font-family-body)">字体栈 The quick brown fox 0123</span><small>-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji</small></div><div class="type-row"><code>font.family.code</code><span style="font-family:var(--font-family-code)">字体栈 The quick brown fox 0123</span><small>SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace</small></div><div class="type-row"><code>font.family.mono</code><span style="font-family:var(--font-family-mono)">字体栈 The quick brown fox 0123</span><small>SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace</small></div><div class="type-row"><code>font.family.numeric</code><span style="font-family:var(--font-family-numeric)">字体栈 The quick brown fox 0123</span><small>D-DIN-PRO, D-DIN, Bahnschrift, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif</small></div><div class="type-row"><code>font.family.sans</code><span style="font-family:var(--font-family-sans)">字体栈 The quick brown fox 0123</span><small>-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji</small></div><div class="type-row"><code>text.display.family</code><span style="font-family:var(--text-display-family)">字体栈 The quick brown fox 0123</span><small>D-DIN-PRO, D-DIN, Bahnschrift, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif</small></div><div class="type-row"><code>text.numeric.family</code><span style="font-family:var(--text-numeric-family)">字体栈 The quick brown fox 0123</span><small>-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji</small></div><table><thead><tr><th>token</th><th>类型</th><th>值</th></tr></thead><tbody><tr><td><code>font.line-height.display</code></td><td>number</td><td>1.2667</td></tr><tr><td><code>font.line-height.heading</code></td><td>number</td><td>1.3333</td></tr><tr><td><code>font.line-height.hero</code></td><td>number</td><td>1.2105</td></tr><tr><td><code>font.line-height.normal</code></td><td>number</td><td>1.5714</td></tr><tr><td><code>font.weight.medium</code></td><td>fontWeight</td><td>500</td></tr><tr><td><code>font.weight.regular</code></td><td>fontWeight</td><td>400</td></tr><tr><td><code>font.weight.semibold</code></td><td>fontWeight</td><td>600</td></tr><tr><td><code>text.body.line-height</code></td><td>number</td><td>1.5714 <small>→ font.line-height.normal</small></td></tr><tr><td><code>text.display.line-height</code></td><td>number</td><td>1.2667 <small>→ font.line-height.display</small></td></tr><tr><td><code>text.display.weight</code></td><td>fontWeight</td><td>600 <small>→ font.weight.semibold</small></td></tr><tr><td><code>text.heading.line-height</code></td><td>number</td><td>1.3333 <small>→ font.line-height.heading</small></td></tr><tr><td><code>text.hero.line-height</code></td><td>number</td><td>1.2105 <small>→ font.line-height.hero</small></td></tr><tr><td><code>text.link.decoration</code></td><td>string</td><td>none <small>→ decoration.none</small></td></tr><tr><td><code>text.link.style</code></td><td>string</td><td>normal <small>→ font.style.normal</small></td></tr><tr><td><code>text.numeric.variant</code></td><td>string</td><td>tabular-nums <small>→ font.numeric.tabular</small></td></tr><tr><td><code>text.paragraph.line-height</code></td><td>number</td><td>1.5714 <small>→ font.line-height.normal</small></td></tr><tr><td><code>text.weight.brand</code></td><td>fontWeight</td><td>600 <small>→ font.weight.semibold</small></td></tr><tr><td><code>text.weight.label</code></td><td>fontWeight</td><td>400 <small>→ font.weight.regular</small></td></tr><tr><td><code>text.weight.logo</code></td><td>fontWeight</td><td>600 <small>→ font.weight.semibold</small></td></tr><tr><td><code>text.weight.nav</code></td><td>fontWeight</td><td>500 <small>→ font.weight.medium</small></td></tr><tr><td><code>text.weight.strong</code></td><td>fontWeight</td><td>600 <small>→ font.weight.semibold</small></td></tr></tbody></table></section>
|
|
111
|
+
<section><h2>间距</h2><div class="ladder-row"><code>spacing.0-5</code><span class="px" style="--w:var(--spacing-0-5)"></span><small>2px</small></div><div class="ladder-row"><code>spacing.1</code><span class="px" style="--w:var(--spacing-1)"></span><small>4px</small></div><div class="ladder-row"><code>spacing.1-5</code><span class="px" style="--w:var(--spacing-1-5)"></span><small>6px</small></div><div class="ladder-row"><code>spacing.2</code><span class="px" style="--w:var(--spacing-2)"></span><small>8px</small></div><div class="ladder-row"><code>spacing.2-5</code><span class="px" style="--w:var(--spacing-2-5)"></span><small>10px</small></div><div class="ladder-row"><code>spacing.3</code><span class="px" style="--w:var(--spacing-3)"></span><small>12px</small></div><div class="ladder-row"><code>spacing.3-5</code><span class="px" style="--w:var(--spacing-3-5)"></span><small>14px</small></div><div class="ladder-row"><code>spacing.4</code><span class="px" style="--w:var(--spacing-4)"></span><small>16px</small></div><div class="ladder-row"><code>spacing.5</code><span class="px" style="--w:var(--spacing-5)"></span><small>20px</small></div><div class="ladder-row"><code>spacing.6</code><span class="px" style="--w:var(--spacing-6)"></span><small>24px</small></div><div class="ladder-row"><code>spacing.8</code><span class="px" style="--w:var(--spacing-8)"></span><small>32px</small></div><div class="ladder-row"><code>spacing.10</code><span class="px" style="--w:var(--spacing-10)"></span><small>40px</small></div><h3>语义留白</h3><div class="ladder-row"><code>space.inline</code><span class="px" style="--w:var(--space-inline)"></span><small>8px → spacing.2</small></div><div class="ladder-row"><code>space.stack</code><span class="px" style="--w:var(--space-stack)"></span><small>16px → spacing.4</small></div><div class="ladder-row"><code>space.gutter</code><span class="px" style="--w:var(--space-gutter)"></span><small>24px → spacing.6</small></div><div class="ladder-row"><code>space.card</code><span class="px" style="--w:var(--space-card)"></span><small>24px → spacing.6</small></div></section>
|
|
112
|
+
<section><h2>圆角与线宽</h2><div class="grid"><div class="sw"><i class="radius" style="border-radius:var(--radius-full)"></i><b>radius.full</b><span>999px</span></div><div class="sw"><i class="radius" style="border-radius:var(--radius-lg)"></i><b>radius.lg</b><span>12px</span></div><div class="sw"><i class="radius" style="border-radius:var(--radius-md)"></i><b>radius.md</b><span>8px</span></div><div class="sw"><i class="radius" style="border-radius:var(--radius-sm)"></i><b>radius.sm</b><span>4px</span></div><div class="sw"><i class="radius" style="border-radius:var(--radius-xl)"></i><b>radius.xl</b><span>16px</span></div><div class="sw"><i class="radius" style="border-radius:var(--radius-xs)"></i><b>radius.xs</b><span>4px</span></div></div><h3>线宽</h3><div class="ladder-row"><code>border.width.thin</code><span class="bw" style="--w:var(--border-width-thin)"></span><small>0.6px</small></div><div class="ladder-row"><code>border.width.bold</code><span class="bw" style="--w:var(--border-width-bold)"></span><small>2px</small></div><div class="ladder-row"><code>border.width.ring</code><span class="bw" style="--w:var(--border-width-ring)"></span><small>3px</small></div></section>
|
|
113
|
+
<section><h2>层级阴影</h2><div class="elevs"><div class="elev" style="box-shadow:0 var(--elevation-card-y) var(--elevation-card-blur) var(--elevation-card-color)"><b>elevation.card</b><small>4px / 16px / #00000000</small></div><div class="elev" style="box-shadow:0 var(--elevation-popover-y) var(--elevation-popover-blur) var(--elevation-popover-color)"><b>elevation.popover</b><small>6px / 16px / #00000014</small></div><div class="elev" style="box-shadow:0 var(--elevation-modal-y) var(--elevation-modal-blur) var(--elevation-modal-color)"><b>elevation.modal</b><small>6px / 16px / #00000014</small></div></div></section>
|
|
114
|
+
<section><h2>控件 / 图标 / 布局尺寸</h2><div class="ladder-row"><code>size.icon.xs</code><span class="px" style="--w:var(--size-icon-xs)"></span><small>11px</small></div><div class="ladder-row"><code>size.icon.sm</code><span class="px" style="--w:var(--size-icon-sm)"></span><small>12px</small></div><div class="ladder-row"><code>size.icon.md</code><span class="px" style="--w:var(--size-icon-md)"></span><small>14px</small></div><div class="ladder-row"><code>size.icon.lg</code><span class="px" style="--w:var(--size-icon-lg)"></span><small>16px</small></div><div class="ladder-row"><code>size.icon.xl</code><span class="px" style="--w:var(--size-icon-xl)"></span><small>20px</small></div><div class="ladder-row"><code>size.control.xs</code><span class="px" style="--w:var(--size-control-xs)"></span><small>22px</small></div><div class="ladder-row"><code>size.avatar.sm</code><span class="px" style="--w:var(--size-avatar-sm)"></span><small>24px</small></div><div class="ladder-row"><code>size.control.sm</code><span class="px" style="--w:var(--size-control-sm)"></span><small>24px</small></div><div class="ladder-row"><code>size.hit-min</code><span class="px" style="--w:var(--size-hit-min)"></span><small>24px</small></div><div class="ladder-row"><code>size.icon.2xl</code><span class="px" style="--w:var(--size-icon-2xl)"></span><small>24px</small></div><div class="ladder-row"><code>size.avatar.md</code><span class="px" style="--w:var(--size-avatar-md)"></span><small>32px</small></div><div class="ladder-row"><code>size.control.md</code><span class="px" style="--w:var(--size-control-md)"></span><small>32px</small></div><div class="ladder-row"><code>size.control.lg</code><span class="px" style="--w:var(--size-control-lg)"></span><small>40px</small></div><div class="ladder-row"><code>size.control.touch</code><span class="px" style="--w:var(--size-control-touch)"></span><small>40px</small></div><div class="ladder-row"><code>size.topbar</code><span class="px" style="--w:var(--size-topbar)"></span><small>56px</small></div><div class="ladder-row"><code>size.sidebar-collapsed</code><span class="px" style="--w:var(--size-sidebar-collapsed)"></span><small>64px</small></div><div class="ladder-row"><code>size.illustration</code><span class="px" style="--w:var(--size-illustration)"></span><small>100px</small></div><div class="ladder-row"><code>size.form.label</code><span class="px" style="--w:var(--size-form-label)"></span><small>120px</small></div><div class="ladder-row"><code>size.sidebar</code><span class="px" style="--w:var(--size-sidebar)"></span><small>208px</small></div><div class="ladder-row"><code>size.search</code><span class="px" style="--w:var(--size-search)"></span><small>216px</small></div><div class="ladder-row"><code>size.modal.sm</code><span class="px" style="--w:var(--size-modal-sm)"></span><small>416px</small></div><div class="ladder-row"><code>size.modal.md</code><span class="px" style="--w:var(--size-modal-md)"></span><small>520px</small></div><div class="ladder-row"><code>size.drawer</code><span class="px" style="--w:var(--size-drawer)"></span><small>600px</small></div><div class="ladder-row"><code>size.form.max</code><span class="px" style="--w:var(--size-form-max)"></span><small>600px</small></div><div class="ladder-row"><code>size.viewport.mobile</code><span class="px" style="--w:var(--size-viewport-mobile)"></span><small>768px</small></div><div class="ladder-row"><code>size.viewport.narrow</code><span class="px" style="--w:var(--size-viewport-narrow)"></span><small>992px</small></div></section>
|
|
115
|
+
<section><h2>动效 · 层级 · 透明度 · 其他</h2><table><thead><tr><th>token</th><th>类型</th><th>值</th></tr></thead><tbody><tr><td><code>duration.fast</code></td><td>duration</td><td>100ms</td></tr><tr><td><code>duration.normal</code></td><td>duration</td><td>200ms</td></tr><tr><td><code>duration.slow</code></td><td>duration</td><td>300ms</td></tr><tr><td><code>easing.enter</code></td><td>cubicBezier</td><td>cubic-bezier(0.215, 0.61, 0.355, 1)</td></tr><tr><td><code>easing.exit</code></td><td>cubicBezier</td><td>cubic-bezier(0.55, 0.055, 0.675, 0.19)</td></tr><tr><td><code>easing.standard</code></td><td>cubicBezier</td><td>cubic-bezier(0.25, 0.1, 0.25, 1)</td></tr><tr><td><code>icon.library</code></td><td>string</td><td>IconPark <small>→ icon.set.iconpark</small></td></tr><tr><td><code>icon.set.antd</code></td><td>string</td><td>@ant-design/icons</td></tr><tr><td><code>icon.set.iconpark</code></td><td>string</td><td>IconPark</td></tr><tr><td><code>layer.dropdown</code></td><td>number</td><td>1050 <small>→ z.1050</small></td></tr><tr><td><code>layer.modal</code></td><td>number</td><td>1000 <small>→ z.1000</small></td></tr><tr><td><code>layer.sticky</code></td><td>number</td><td>100 <small>→ z.100</small></td></tr><tr><td><code>layer.toast</code></td><td>number</td><td>1010 <small>→ z.1010</small></td></tr><tr><td><code>motion.duration.fast</code></td><td>duration</td><td>100ms <small>→ duration.fast</small></td></tr><tr><td><code>motion.duration.normal</code></td><td>duration</td><td>200ms <small>→ duration.normal</small></td></tr><tr><td><code>motion.duration.slow</code></td><td>duration</td><td>300ms <small>→ duration.slow</small></td></tr><tr><td><code>motion.easing.enter</code></td><td>cubicBezier</td><td>cubic-bezier(0.215, 0.61, 0.355, 1) <small>→ easing.enter</small></td></tr><tr><td><code>motion.easing.exit</code></td><td>cubicBezier</td><td>cubic-bezier(0.55, 0.055, 0.675, 0.19) <small>→ easing.exit</small></td></tr><tr><td><code>motion.easing.standard</code></td><td>cubicBezier</td><td>cubic-bezier(0.25, 0.1, 0.25, 1) <small>→ easing.standard</small></td></tr><tr><td><code>opacity.100</code></td><td>number</td><td>1</td></tr><tr><td><code>opacity.40</code></td><td>number</td><td>0.4</td></tr><tr><td><code>opacity.disabled</code></td><td>number</td><td>0.4 <small>→ opacity.40</small></td></tr><tr><td><code>opacity.on-primary-muted</code></td><td>number</td><td>1 <small>→ opacity.100</small></td></tr><tr><td><code>stroke-width.3</code></td><td>number</td><td>3</td></tr><tr><td><code>z.100</code></td><td>number</td><td>100</td></tr><tr><td><code>z.1000</code></td><td>number</td><td>1000</td></tr><tr><td><code>z.1010</code></td><td>number</td><td>1010</td></tr><tr><td><code>z.1050</code></td><td>number</td><td>1050</td></tr></tbody></table></section>
|
|
116
|
+
<section>
|
|
117
|
+
<h2>全部 token <small>359</small></h2>
|
|
118
|
+
<input class="input search" id="q" placeholder="按路径过滤,例如 color.text 或 spacing">
|
|
119
|
+
<table><thead><tr><th>路径</th><th>类型</th><th>别名</th><th>默认值</th><th>dark</th><th>说明</th></tr></thead><tbody id="rows"><tr data-q="avatar.size.md"><td><code>avatar.size.md</code></td><td>dimension</td><td><code>{size.avatar.md}</code></td><td>32px</td><td class=""></td><td class="desc">[确认] 头像 32px(2026-10-09 用户确认)</td></tr><tr data-q="avatar.size.sm"><td><code>avatar.size.sm</code></td><td>dimension</td><td><code>{size.avatar.sm}</code></td><td>24px</td><td class=""></td><td class="desc">[确认] 小头像 24px(2026-10-09 用户确认)</td></tr><tr data-q="border.width.active"><td><code>border.width.active</code></td><td>dimension</td><td><code>{border.width.bold}</code></td><td>2px</td><td class=""></td><td class="desc">[确认] 页签墨条 / 选中下划线 2px(2026-10-09 用户确认)</td></tr><tr data-q="border.width.bold"><td><code>border.width.bold</code></td><td>dimension</td><td></td><td>2px</td><td class=""></td><td class="desc">[确认] 页签墨条 / 选中下划线(antd lineWidthBold 2px)(2026-10-09 用户确认)</td></tr><tr data-q="border.width.control"><td><code>border.width.control</code></td><td>dimension</td><td><code>{border.width.thin}</code></td><td>0.6px</td><td class=""></td><td class="desc">[确认] 勾选框 / 单选框边线:跟随全站 0.6px 描边(用户决定),1 倍屏上渲染为 1px(2026-10-09 用户确认)</td></tr><tr data-q="border.width.default"><td><code>border.width.default</code></td><td>dimension</td><td><code>{border.width.thin}</code></td><td>0.6px</td><td class=""></td><td class="desc">[观察] 最常见的边线宽 1px,88 处</td></tr><tr data-q="border.width.indicator"><td><code>border.width.indicator</code></td><td>dimension</td><td><code>{border.width.bold}</code></td><td>2px</td><td class=""></td><td class="desc">[确认] 指示条 2px(2026-10-09 用户确认)</td></tr><tr data-q="border.width.ring"><td><code>border.width.ring</code></td><td>dimension</td><td></td><td>3px</td><td class=""></td><td class="desc">[观察] 焦点 outline 3px(offset 1px),焦点探针全部元素一致</td></tr><tr data-q="border.width.thin"><td><code>border.width.thin</code></td><td>dimension</td><td></td><td>0.6px</td><td class=""></td><td class="desc">[确认] 全站描边 0.6px(用户决定,配合加深后的边线色):高分屏上是一条设备像素细线,普通屏由浏览器按 1px 画;观察值 1px,88 处</td></tr><tr data-q="chart.baseline.dash"><td><code>chart.baseline.dash</code></td><td>dimension</td><td><code>{spacing.1}</code></td><td>4px</td><td class=""></td><td class="desc">[确认] 曲线图底线(x 轴线)的虚线:线段与间隔都是 4px(数值借用 spacing.1),线宽 border.width.default(0.6px)、颜色 color.border.default,同网格线(用户 2026-10-12:曲线图的底线用 0.6px 虚线)。柱状图的基线保持实线</td></tr><tr data-q="chart.gradient.saturation"><td><code>chart.gradient.saturation</code></td><td>number</td><td><code>{opacity.40}</code></td><td>0.4</td><td class=""></td><td class="desc">[确认] 品牌金以外的数据填充(状态色、中性色、分类色)用同色饱和度渐变:浅端把饱和度降到原色的 0.4 倍,HSB 明度不变(数值借用 opacity.40;2026-10-09 用户确认)。方向与品牌金渐变一致,起点深、末端浅:竖柱上浅下深,进度条与横柱左深右浅(2026-10-12 用户指定品牌金两色时统一;原记录的进度条左浅右深与用户最初「起始点到终止点的深浅渐变」不符,已更正)。品牌金填充用 color.chart.gradient.start → end</td></tr><tr data-q="color.action.danger"><td><code>color.action.danger</code></td><td>color</td><td><code>{color.red.7}</code></td><td><i class="dot" style="background:#CF1322"></i>#CF1322</td><td class=""></td><td class="desc">[确认] antd 危险色 #ff4d4f 白字 3.25:1,压深到 red-7 #cf1322(5.57:1)</td></tr><tr data-q="color.action.danger-active"><td><code>color.action.danger-active</code></td><td>color</td><td><code>{color.red.9}</code></td><td><i class="dot" style="background:#820014"></i>#820014</td><td class=""></td><td class="desc">[确认] 按下 red-9 #820014</td></tr><tr data-q="color.action.danger-hover"><td><code>color.action.danger-hover</code></td><td>color</td><td><code>{color.red.8}</code></td><td><i class="dot" style="background:#A8071A"></i>#A8071A</td><td class=""></td><td class="desc">[确认] 悬停加深到 red-8 #a8071a(antd 悬停变浅会低于 4.5)</td></tr><tr data-q="color.action.primary"><td><code>color.action.primary</code></td><td>color</td><td><code>{color.brand.500}</code></td><td><i class="dot" style="background:#B98D44"></i>#B98D44</td><td class=""></td><td class="desc">[确认] 品牌决定:主按钮玫瑰金 #b98d44(用户初定 #ae8a50,2026-10-09 提亮),上放白字(用户 2026-10-09 指定);演示站为主色 #1890ff</td></tr><tr data-q="color.action.primary-active"><td><code>color.action.primary-active</code></td><td>color</td><td><code>{color.brand.600}</code></td><td><i class="dot" style="background:#8A6530"></i>#8A6530</td><td class=""></td><td class="desc">[确认] 按下再深一档 #8a6530(与 antd 算法第 7 阶同深),白字 5.27:1</td></tr><tr data-q="color.action.primary-hover"><td><code>color.action.primary-hover</code></td><td>color</td><td><code>{color.brand.550}</code></td><td><i class="dot" style="background:#B1863D"></i>#B1863D</td><td class=""></td><td class="desc">[确认] 悬停加深一点 #b1863d:金底白字变浅会更难读(变浅到 #c4a56d 时白字只有 2.35:1),改为变深;白字 3.31:1</td></tr><tr data-q="color.action.quiet"><td><code>color.action.quiet</code></td><td>color</td><td><code>{color.neutral.transparent}</code></td><td><i class="dot" style="background:#00000000"></i>#00000000</td><td class=""></td><td class="desc">[观察] 文字按钮静息透明:工作台「今日 / 本周 / 本月 / 本年」(antd text 按钮;与 Citrine「quiet 必须有浅底」不同)</td></tr><tr data-q="color.action.quiet-hover"><td><code>color.action.quiet-hover</code></td><td>color</td><td><code>{color.neutral.black-a4}</code></td><td><i class="dot" style="background:#0000000A"></i>#0000000A</td><td class="changed">#FFFFFF14</td><td class="desc">[观察] 文字按钮悬停 rgba(0,0,0,0.04)(悬停探针)</td></tr><tr data-q="color.action.secondary-hover"><td><code>color.action.secondary-hover</code></td><td>color</td><td><code>{color.neutral.black-a4}</code></td><td><i class="dot" style="background:#0000000A"></i>#0000000A</td><td class="changed">#FFFFFF14</td><td class="desc">[确认] 次要按钮悬停底 rgba(0,0,0,0.04)(悬停探针);antd 描边按钮悬停改的是边线与文字色,桥接用底色表达(2026-10-09 用户确认)</td></tr><tr data-q="color.action.selected"><td><code>color.action.selected</code></td><td>color</td><td><code>{color.white}</code></td><td><i class="dot" style="background:#FFFFFF"></i>#FFFFFF</td><td class="changed">#424242</td><td class="desc">[观察] 分段选择器当前项白底(轨道 rgba(0,0,0,0.04)),工作台「全部渠道 / 线上 / 门店」</td></tr><tr data-q="color.bg.brand"><td><code>color.bg.brand</code></td><td>color</td><td><code>{color.brand.500}</code></td><td><i class="dot" style="background:#B98D44"></i>#B98D44</td><td class=""></td><td class="desc">[确认] 品牌决定:玫瑰金主色 #b98d44(用户初定 #ae8a50,2026-10-09 提高饱和度与明度)</td></tr><tr data-q="color.bg.chip"><td><code>color.bg.chip</code></td><td>color</td><td><code>{color.brand.600-a10}</code></td><td><i class="dot" style="background:#8A65301A"></i>#8A65301A</td><td class="changed">#D1AB621A</td><td class="desc">[确认] 筹码(已选条件胶囊)底:用户 2026-10-09 指定 #8A6530 10%,即筹码字色 color.text.selected 的同色 10% 浅底,叠在卡片白底上约 #F3F0EA;原用 color.bg.selected(4% 黑)。批量条、图标按钮选中、进度条轨道等其余小面积选中仍是中性浅灰</td></tr><tr data-q="color.bg.elevated"><td><code>color.bg.elevated</code></td><td>color</td><td><code>{color.white}</code></td><td><i class="dot" style="background:#FFFFFF"></i>#FFFFFF</td><td class="changed">#1F1F1F</td><td class="desc">[观察] 弹窗 .ant-modal-container / 抽屉 .ant-drawer-section 白底;与卡片同色、靠阴影区分(antd 表面三层)</td></tr><tr data-q="color.bg.hover"><td><code>color.bg.hover</code></td><td>color</td><td><code>{color.neutral.black-a4}</code></td><td><i class="dot" style="background:#0000000A"></i>#0000000A</td><td class="changed">#FFFFFF14</td><td class="desc">[观察] 悬停探针:文字按钮 / 分段项 hover 底 rgba(0,0,0,0.04)</td></tr><tr data-q="color.bg.input"><td><code>color.bg.input</code></td><td>color</td><td><code>{color.neutral.black-a4}</code></td><td><i class="dot" style="background:#0000000A"></i>#0000000A</td><td class="changed">#FFFFFF14</td><td class="desc">[确认] 填充式输入框(用户选择 Pro v6 原样):演示站 ProForm 输入框 / 文本域底 rgba(0,0,0,0.04)、无边线</td></tr><tr data-q="color.bg.inverse"><td><code>color.bg.inverse</code></td><td>color</td><td><code>{color.neutral.black-a85}</code></td><td><i class="dot" style="background:#000000D9"></i>#000000D9</td><td class="changed">#424242</td><td class="desc">[观察] Tooltip 反色底 rgba(0,0,0,0.85),3 处</td></tr><tr data-q="color.bg.mask"><td><code>color.bg.mask</code></td><td>color</td><td><code>{color.neutral.white-a50}</code></td><td><i class="dot" style="background:#FFFFFF80"></i>#FFFFFF80</td><td class="changed">#14141480</td><td class="desc">[确认] antd Spin 局部加载遮罩:容器底白 50%(2026-10-09 用户确认)</td></tr><tr data-q="color.bg.overlay"><td><code>color.bg.overlay</code></td><td>color</td><td><code>{color.neutral.black-a45}</code></td><td><i class="dot" style="background:#00000073"></i>#00000073</td><td class=""></td><td class="desc">[观察] 弹窗与抽屉遮罩 rgba(0,0,0,0.45)</td></tr><tr data-q="color.bg.page"><td><code>color.bg.page</code></td><td>color</td><td><code>{color.neutral.100}</code></td><td><i class="dot" style="background:#F5F5F5"></i>#F5F5F5</td><td class="changed">#000000</td><td class="desc">[观察] ProLayout bgLayout 渐变 #fff → #f5f5f5(28%)的终点;渐变不进 token,页面底取纯色</td></tr><tr data-q="color.bg.readonly"><td><code>color.bg.readonly</code></td><td>color</td><td><code>{color.neutral.black-a4}</code></td><td><i class="dot" style="background:#0000000A"></i>#0000000A</td><td class="changed">#FFFFFF14</td><td class="desc">[确认] antd 禁用 / 只读容器底 colorBgContainerDisabled rgba(0,0,0,0.04)(2026-10-09 用户确认)</td></tr><tr data-q="color.bg.selected"><td><code>color.bg.selected</code></td><td>color</td><td><code>{color.neutral.black-a4}</code></td><td><i class="dot" style="background:#0000000A"></i>#0000000A</td><td class="changed">#FFFFFF14</td><td class="desc">[观察] 小面积选中(当前导航项 / 批量条)用中性底:ProLayout colorBgMenuItemSelected = 文字基色 4%</td></tr><tr data-q="color.bg.selected-hover"><td><code>color.bg.selected-hover</code></td><td>color</td><td><code>{color.neutral.black-a6}</code></td><td><i class="dot" style="background:#0000000F"></i>#0000000F</td><td class="changed">#FDFDFD1F</td><td class="desc">[确认] 表格选中行再悬停:选中行已与悬停同色(用户 2026-10-09 决定),再悬停深一档用 6% 黑(原为金色 20% 浅底)(2026-10-09 用户确认)</td></tr><tr data-q="color.bg.selected-subtle"><td><code>color.bg.selected-subtle</code></td><td>color</td><td><code>{color.brand.50}</code></td><td><i class="dot" style="background:#FDF4DE"></i>#FDF4DE</td><td class="changed">#32291C</td><td class="desc">[确认] 奶油金浅底:强调徽标、Element 主色浅底(primary-light-9);2026-10-09 起表格选中行改用 color.bg.hover,不再用它</td></tr><tr data-q="color.bg.sidebar"><td><code>color.bg.sidebar</code></td><td>color</td><td><code>{color.white}</code></td><td><i class="dot" style="background:#FFFFFF"></i>#FFFFFF</td><td class="changed">#000000</td><td class="desc">[确认] 侧栏纯白底:用户指定(2026-10-09;原为 ProLayout 侧栏透明、透出页面底 #f5f5f5),与顶栏、卡片同色,和浅灰页面底分开</td></tr><tr data-q="color.bg.sidebar-hover"><td><code>color.bg.sidebar-hover</code></td><td>color</td><td><code>{color.neutral.black-a3}</code></td><td><i class="dot" style="background:#00000008"></i>#00000008</td><td class="changed">#FFFFFF08</td><td class="desc">[观察] ProLayout sider.colorBgMenuItemHover = 文字基色 3%</td></tr><tr data-q="color.bg.sidebar-selected"><td><code>color.bg.sidebar-selected</code></td><td>color</td><td><code>{color.brand.500}</code></td><td><i class="dot" style="background:#B98D44"></i>#B98D44</td><td class="changed">#32291C</td><td class="desc">[确认] 侧栏当前项(亮色)用主色底块:用户指定(2026-10-09,替代预期预览图的奶油金底);暗色保持金色暗底</td></tr><tr data-q="color.bg.skeleton"><td><code>color.bg.skeleton</code></td><td>color</td><td><code>{color.neutral.black-a6}</code></td><td><i class="dot" style="background:#0000000F"></i>#0000000F</td><td class="changed">#FFFFFF14</td><td class="desc">[确认] antd Skeleton 底 rgba(0,0,0,0.06)(2026-10-09 用户确认)</td></tr><tr data-q="color.bg.skeleton-highlight"><td><code>color.bg.skeleton-highlight</code></td><td>color</td><td><code>{color.neutral.black-a15}</code></td><td><i class="dot" style="background:#00000026"></i>#00000026</td><td class="changed">#FDFDFD1F</td><td class="desc">[确认] antd Skeleton 流光 rgba(0,0,0,0.15)(2026-10-09 用户确认)</td></tr><tr data-q="color.bg.subtle"><td><code>color.bg.subtle</code></td><td>color</td><td><code>{color.neutral.100}</code></td><td><i class="dot" style="background:#F5F5F5"></i>#F5F5F5</td><td class="changed">#FFFFFF0A</td><td class="desc">[确认] 表头 / 次级容器底:预期预览图表头比卡片深一档(取样 #f2f2ee);演示站为 #fafafa</td></tr><tr data-q="color.bg.surface"><td><code>color.bg.surface</code></td><td>color</td><td><code>{color.white}</code></td><td><i class="dot" style="background:#FFFFFF"></i>#FFFFFF</td><td class="changed">#141414</td><td class="desc">[观察] 卡片 / 表格 / 表单容器底,118 处</td></tr><tr data-q="color.black"><td><code>color.black</code></td><td>color</td><td></td><td><i class="dot" style="background:#000000"></i>#000000</td><td class=""></td><td class="desc">[确认] 暗色页面底:ProLayout 暗色 bgLayout 渐变终点(antd 暗色 colorBgLayout)(2026-10-09 用户确认)</td></tr><tr data-q="color.blue.1"><td><code>color.blue.1</code></td><td>color</td><td></td><td><i class="dot" style="background:#E6F4FF"></i>#E6F4FF</td><td class=""></td><td class="desc">[确认] antd blue-1:信息浅底</td></tr><tr data-q="color.blue.4"><td><code>color.blue.4</code></td><td>color</td><td></td><td><i class="dot" style="background:#69B1FF"></i>#69B1FF</td><td class=""></td><td class="desc">[确认] antd blue-4:暗色信息文字</td></tr><tr data-q="color.blue.7"><td><code>color.blue.7</code></td><td>color</td><td></td><td><i class="dot" style="background:#0958D9"></i>#0958D9</td><td class=""></td><td class="desc">[确认] antd blue-7:信息文字(对浅底 5.6:1)</td></tr><tr data-q="color.blue.dark-1"><td><code>color.blue.dark-1</code></td><td>color</td><td></td><td><i class="dot" style="background:#111A2C"></i>#111A2C</td><td class=""></td><td class="desc">[确认] antd 暗色 blue-1:暗色信息浅底</td></tr><tr data-q="color.border.current"><td><code>color.border.current</code></td><td>color</td><td><code>{color.brand.500}</code></td><td><i class="dot" style="background:#B98D44"></i>#B98D44</td><td class=""></td><td class="desc">[确认] 页签墨条等当前指示线:演示站为主色;换金 #b98d44(对白 3.02:1 ≥ 3)</td></tr><tr data-q="color.border.default"><td><code>color.border.default</code></td><td>color</td><td><code>{color.neutral.black-a6}</code></td><td><i class="dot" style="background:#0000000F"></i>#0000000F</td><td class="changed">#303030</td><td class="desc">[确认] 卡片 / 容器 / 表格分隔线:用户指定 6% 黑(2026-10-09,替代此前「过 1.3 底线、与控件描边同档」的决定);对页面底低于 1.3 的可辨底线,已登记例外,回补路径:指回 color.neutral.300</td></tr><tr data-q="color.border.focus"><td><code>color.border.focus</code></td><td>color</td><td><code>{color.brand.600}</code></td><td><i class="dot" style="background:#8A6530"></i>#8A6530</td><td class="changed">#B98D44</td><td class="desc">[确认] 焦点边线金色深一档 #8a6530(对白 5.27:1);演示站为主色浅环 #91d5ff</td></tr><tr data-q="color.border.input"><td><code>color.border.input</code></td><td>color</td><td><code>{color.neutral.transparent}</code></td><td><i class="dot" style="background:#00000000"></i>#00000000</td><td class=""></td><td class="desc">[确认] 填充式输入框静息无边线(演示站 border-color transparent);悬停 / 焦点边线由 border.strong / border.focus 表达</td></tr><tr data-q="color.border.sidebar"><td><code>color.border.sidebar</code></td><td>color</td><td><code>{color.neutral.split}</code></td><td><i class="dot" style="background:#0505050F"></i>#0505050F</td><td class="changed">#FDFDFD1F</td><td class="desc">[观察] 侧栏 / 顶栏分隔线 rgba(5,5,5,0.06)</td></tr><tr data-q="color.border.strong"><td><code>color.border.strong</code></td><td>color</td><td><code>{color.neutral.300}</code></td><td><i class="dot" style="background:#D8D8D8"></i>#D8D8D8</td><td class="changed">#424242</td><td class="desc">[确认] 控件 / 按钮 / 勾选框描边(观察 #d9d9d9,加深一级);2026-10-09 卡片边线改为 6% 黑后,两档重新分开(同 antd colorBorder / colorBorderSecondary)</td></tr><tr data-q="color.brand.100"><td><code>color.brand.100</code></td><td>color</td><td></td><td><i class="dot" style="background:#F9EDD3"></i>#F9EDD3</td><td class=""></td><td class="desc">[确认] 奶油金深一档:原为表格选中行悬停;2026-10-09 表格选中行改用悬停色后暂不引用,保留备回退</td></tr><tr data-q="color.brand.200"><td><code>color.brand.200</code></td><td>color</td><td></td><td><i class="dot" style="background:#DDB67B"></i>#DDB67B</td><td class=""></td><td class="desc">[确认] 浅金:图表第三色(预期预览图环图 / 柱状取样,随主色提亮)</td></tr><tr data-q="color.brand.250"><td><code>color.brand.250</code></td><td>color</td><td></td><td><i class="dot" style="background:#D8AC63"></i>#D8AC63</td><td class=""></td><td class="desc">[确认] 数据填充渐变的浅端:用户 2026-10-12 指定 hsl(37.3228deg 59.5252% 61.7469%),按 8 位 sRGB 取 #D8AC63(进度条 / 柱状图品牌金渐变的末端,起点是 brand.550)</td></tr><tr data-q="color.brand.300"><td><code>color.brand.300</code></td><td>color</td><td></td><td><i class="dot" style="background:#D1AB62"></i>#D1AB62</td><td class=""></td><td class="desc">[确认] 亮金:暗色链接悬停 / 选中文字(对 #141414 8.52:1)</td></tr><tr data-q="color.brand.300-a10"><td><code>color.brand.300-a10</code></td><td>color</td><td></td><td><i class="dot" style="background:#D1AB621A"></i>#D1AB621A</td><td class=""></td><td class="desc">[确认] 暗色筹码底(用户 2026-10-09 确认):暗色筹码字色亮金 #D1AB62 的 10%,与亮色「字色同色 10%」同一规则</td></tr><tr data-q="color.brand.400"><td><code>color.brand.400</code></td><td>color</td><td></td><td><i class="dot" style="background:#C4A56D"></i>#C4A56D</td><td class=""></td><td class="desc">[确认] 原主按钮悬停(比主色浅一档);2026-10-09 主按钮改白字后悬停改为加深,暂不引用,保留备回退</td></tr><tr data-q="color.brand.50"><td><code>color.brand.50</code></td><td>color</td><td></td><td><i class="dot" style="background:#FDF4DE"></i>#FDF4DE</td><td class=""></td><td class="desc">[确认] 奶油金浅底:强调徽标 / Element 主色浅底 / two-tone 图标填充(表格选中行 2026-10-09 起改用悬停色)(预期预览图选中块取样 #fcf4dc;侧栏当前项 2026-10-09 起改用主色底块);主色提亮后明度不变、彩度随主色略增</td></tr><tr data-q="color.brand.500"><td><code>color.brand.500</code></td><td>color</td><td></td><td><i class="dot" style="background:#B98D44"></i>#B98D44</td><td class=""></td><td class="desc">[确认] 品牌主色:用户初定 #AE8A50,2026-10-09 按用户要求提高饱和度与明度(HSB 54% / 68% → 63% / 73%),明度停在对白底 3:1 以内(3.02:1),对 #141414 6.10:1。金底上放白字(用户 2026-10-09 指定;白字 3.02:1 低于 4.5,已登记例外;深字 #1f1f1f 为 5.46:1)。整条色阶按原色阶在 OKLCH 里的位置推导:色相随主色,彩度随主色放大(深阶按平方根),浅底与深阶明度不变</td></tr><tr data-q="color.brand.500-a16"><td><code>color.brand.500-a16</code></td><td>color</td><td></td><td><i class="dot" style="background:#B98D4429"></i>#B98D4429</td><td class=""></td><td class="desc">[确认] 图表面积填充(品牌金 16%,网格线透得出来)(2026-10-09 用户确认)</td></tr><tr data-q="color.brand.500-a24"><td><code>color.brand.500-a24</code></td><td>color</td><td></td><td><i class="dot" style="background:#B98D443D"></i>#B98D443D</td><td class=""></td><td class="desc">[确认] 暗色图表面积填充(品牌金 24%)(2026-10-09 用户确认)</td></tr><tr data-q="color.brand.550"><td><code>color.brand.550</code></td><td>color</td><td></td><td><i class="dot" style="background:#B1863D"></i>#B1863D</td><td class=""></td><td class="desc">[确认] 主按钮悬停:比主色深一点(白字 3.31:1);2026-10-12 起兼作数据填充渐变的起点(用户指定 #B1863D)</td></tr><tr data-q="color.brand.600"><td><code>color.brand.600</code></td><td>color</td><td></td><td><i class="dot" style="background:#8A6530"></i>#8A6530</td><td class=""></td><td class="desc">[确认] 深金:链接 / 选中文字 / 焦点 / 提示气泡底 / 主按钮按下(对白 5.27:1,对奶油金底 4.81:1)</td></tr><tr data-q="color.brand.600-a10"><td><code>color.brand.600-a10</code></td><td>color</td><td></td><td><i class="dot" style="background:#8A65301A"></i>#8A65301A</td><td class=""></td><td class="desc">[确认] 筹码(已选条件胶囊)底:品牌金深一档 #8A6530 的 10%(用户 2026-10-09 指定),与筹码字色同色</td></tr><tr data-q="color.brand.700"><td><code>color.brand.700</code></td><td>color</td><td></td><td><i class="dot" style="background:#63441E"></i>#63441E</td><td class=""></td><td class="desc">[确认] 更深一档:链接悬停(对白 8.84:1)</td></tr><tr data-q="color.brand.800"><td><code>color.brand.800</code></td><td>color</td><td></td><td><i class="dot" style="background:#433724"></i>#433724</td><td class=""></td><td class="desc">[确认] 金色暗阶(明度同 antd 暗色算法第 3 阶):原为暗色表格选中行悬停;2026-10-09 起暂不引用,保留备回退</td></tr><tr data-q="color.brand.900"><td><code>color.brand.900</code></td><td>color</td><td></td><td><i class="dot" style="background:#32291C"></i>#32291C</td><td class=""></td><td class="desc">[确认] 金色暗阶:暗色侧栏当前项 / 强调徽标 / Element 主色浅底(明度同 antd 暗色算法第 2 阶;亮金字压上去 6.61:1)</td></tr><tr data-q="color.brand.indicator"><td><code>color.brand.indicator</code></td><td>color</td><td><code>{color.brand.500}</code></td><td><i class="dot" style="background:#B98D44"></i>#B98D44</td><td class=""></td><td class="desc">[确认] 品牌指示条 / 数据卡描边用品牌金(对白 3.02:1)</td></tr><tr data-q="color.cat.charcoal"><td><code>color.cat.charcoal</code></td><td>color</td><td></td><td><i class="dot" style="background:#595959"></i>#595959</td><td class=""></td><td class="desc">[确认] 图表深灰(预期预览图环图深色扇区取样 #646464)</td></tr><tr data-q="color.cat.charcoal-dark"><td><code>color.cat.charcoal-dark</code></td><td>color</td><td></td><td><i class="dot" style="background:#BFBFBF"></i>#BFBFBF</td><td class=""></td><td class="desc">[确认] 暗色图表「深灰」位(深底上反过来取浅灰)</td></tr><tr data-q="color.cat.gray"><td><code>color.cat.gray</code></td><td>color</td><td></td><td><i class="dot" style="background:#8C8C8C"></i>#8C8C8C</td><td class=""></td><td class="desc">[确认] 图表中灰(进度条深灰填充取样 #7c7c7c)</td></tr><tr data-q="color.cat.silver"><td><code>color.cat.silver</code></td><td>color</td><td></td><td><i class="dot" style="background:#CFCFCF"></i>#CFCFCF</td><td class=""></td><td class="desc">[确认] 图表浅灰(环图浅灰扇区取样 #dcdcd4)</td></tr><tr data-q="color.cat.silver-dark"><td><code>color.cat.silver-dark</code></td><td>color</td><td></td><td><i class="dot" style="background:#4A4A4A"></i>#4A4A4A</td><td class=""></td><td class="desc">[确认] 暗色图表「浅灰」位</td></tr><tr data-q="color.chart.1"><td><code>color.chart.1</code></td><td>color</td><td><code>{color.brand.500}</code></td><td><i class="dot" style="background:#B98D44"></i>#B98D44</td><td class=""></td><td class="desc">[确认] 品牌金领衔(预期预览图折线 / 环图主色)</td></tr><tr data-q="color.chart.2"><td><code>color.chart.2</code></td><td>color</td><td><code>{color.cat.charcoal}</code></td><td><i class="dot" style="background:#595959"></i>#595959</td><td class="changed">#BFBFBF</td><td class="desc">[确认] 深灰(预期预览图环图第二色)</td></tr><tr data-q="color.chart.3"><td><code>color.chart.3</code></td><td>color</td><td><code>{color.brand.200}</code></td><td><i class="dot" style="background:#DDB67B"></i>#DDB67B</td><td class=""></td><td class="desc">[确认] 浅金(预期预览图环图 / 柱状)</td></tr><tr data-q="color.chart.4"><td><code>color.chart.4</code></td><td>color</td><td><code>{color.cat.gray}</code></td><td><i class="dot" style="background:#8C8C8C"></i>#8C8C8C</td><td class=""></td><td class="desc">[确认] 中灰</td></tr><tr data-q="color.chart.5"><td><code>color.chart.5</code></td><td>color</td><td><code>{color.cat.silver}</code></td><td><i class="dot" style="background:#CFCFCF"></i>#CFCFCF</td><td class="changed">#4A4A4A</td><td class="desc">[确认] 浅灰(预期预览图环图浅灰扇区)</td></tr><tr data-q="color.chart.6"><td><code>color.chart.6</code></td><td>color</td><td><code>{color.emerald.500}</code></td><td><i class="dot" style="background:#4E9A6A"></i>#4E9A6A</td><td class="changed">#5FBF86</td><td class="desc">[确认] 绿(预期预览图市场情绪柱);不与「涨」混用时才作分类色</td></tr><tr data-q="color.chart.area"><td><code>color.chart.area</code></td><td>color</td><td><code>{color.brand.500-a16}</code></td><td><i class="dot" style="background:#B98D4429"></i>#B98D4429</td><td class="changed">#B98D443D</td><td class="desc">[确认] 面积填充:品牌金 16%(2026-10-09 用户确认);也是图表悬停竖条,盖住悬停的那一格(用户 2026-10-12:悬停用浅色柱状图,浅金与浅灰 color.bg.hover 实测对比后选浅金)</td></tr><tr data-q="color.chart.gradient.end"><td><code>color.chart.gradient.end</code></td><td>color</td><td><code>{color.brand.250}</code></td><td><i class="dot" style="background:#D8AC63"></i>#D8AC63</td><td class=""></td><td class="desc">[确认] 品牌金数据填充渐变的末端(浅端):进度条右端、竖柱顶端、横柱数值端(用户 2026-10-12 指定 hsl(37.3228deg 59.5252% 61.7469%) ≈ #D8AC63)</td></tr><tr data-q="color.chart.gradient.start"><td><code>color.chart.gradient.start</code></td><td>color</td><td><code>{color.brand.550}</code></td><td><i class="dot" style="background:#B1863D"></i>#B1863D</td><td class=""></td><td class="desc">[确认] 品牌金数据填充渐变的起点(深端):进度条左端、竖柱底端、横柱基线端(用户 2026-10-12 指定 #B1863D)</td></tr><tr data-q="color.chart.sequential.1"><td><code>color.chart.sequential.1</code></td><td>color</td><td><code>{color.neutral.200}</code></td><td><i class="dot" style="background:#F0F0F0"></i>#F0F0F0</td><td class="changed">#262626</td><td class="desc">[确认] 顺序色:四档灰 + 品牌金封顶(与 Citrine 用法一致),按离散分段使用(2026-10-09 用户确认)</td></tr><tr data-q="color.chart.sequential.2"><td><code>color.chart.sequential.2</code></td><td>color</td><td><code>{color.neutral.300}</code></td><td><i class="dot" style="background:#D8D8D8"></i>#D8D8D8</td><td class="changed">#424242</td><td class="desc">[确认] 顺序色第二档(排行榜非前三名)(2026-10-09 用户确认)</td></tr><tr data-q="color.chart.sequential.3"><td><code>color.chart.sequential.3</code></td><td>color</td><td><code>{color.neutral.500}</code></td><td><i class="dot" style="background:#A6A6A6"></i>#A6A6A6</td><td class="changed">#6E6E6E</td><td class="desc">[确认] 顺序色第三档(2026-10-09 用户确认)</td></tr><tr data-q="color.chart.sequential.4"><td><code>color.chart.sequential.4</code></td><td>color</td><td><code>{color.cat.charcoal}</code></td><td><i class="dot" style="background:#595959"></i>#595959</td><td class="changed">#A6A6A6</td><td class="desc">[确认] 顺序色第四档(2026-10-09 用户确认)</td></tr><tr data-q="color.chart.sequential.5"><td><code>color.chart.sequential.5</code></td><td>color</td><td><code>{color.brand.500}</code></td><td><i class="dot" style="background:#B98D44"></i>#B98D44</td><td class=""></td><td class="desc">[确认] 顺序色封顶:品牌金(排行榜前三名)(2026-10-09 用户确认)</td></tr><tr data-q="color.chart.tooltip"><td><code>color.chart.tooltip</code></td><td>color</td><td><code>{color.white}</code></td><td><i class="dot" style="background:#FFFFFF"></i>#FFFFFF</td><td class="changed">#1F1F1F</td><td class="desc">[确认] 图表提示气泡底:白底浮层(同 color.bg.elevated,暗色覆写为浮层色),配 color.text.primary 字、color.border.default 细边与 elevation.tooltip 大投影(用户 2026-10-12:hover 浮窗用白色底 + 大投影);原为深金底 color.brand.600 + 白字</td></tr><tr data-q="color.control.knob"><td><code>color.control.knob</code></td><td>color</td><td><code>{color.white}</code></td><td><i class="dot" style="background:#FFFFFF"></i>#FFFFFF</td><td class=""></td><td class="desc">[确认] 开关滑块白色(antd Switch handle)(2026-10-09 用户确认)</td></tr><tr data-q="color.data.decrease"><td><code>color.data.decrease</code></td><td>color</td><td><code>{color.red.7}</code></td><td><i class="dot" style="background:#CF1322"></i>#CF1322</td><td class="changed">#FF7875</td><td class="desc">[确认] 跌用红(对白 5.57:1)</td></tr><tr data-q="color.data.inactive"><td><code>color.data.inactive</code></td><td>color</td><td><code>{color.neutral.black-a25}</code></td><td><i class="dot" style="background:#00000040"></i>#00000040</td><td class="changed">#FFFFFF40</td><td class="desc">[确认] 已结束的进度条用禁用色 rgba(0,0,0,0.25)(2026-10-09 用户确认)</td></tr><tr data-q="color.data.increase"><td><code>color.data.increase</code></td><td>color</td><td><code>{color.emerald.700}</code></td><td><i class="dot" style="background:#2E7D52"></i>#2E7D52</td><td class="changed">#5FBF86</td><td class="desc">[确认] 用户决定绿涨红跌(预期预览图);涨幅文字可读 5.03:1</td></tr><tr data-q="color.emerald.300"><td><code>color.emerald.300</code></td><td>color</td><td></td><td><i class="dot" style="background:#5FBF86"></i>#5FBF86</td><td class=""></td><td class="desc">[确认] 暗色「涨」/ 成功文字(对 #141414 8.1:1)</td></tr><tr data-q="color.emerald.50"><td><code>color.emerald.50</code></td><td>color</td><td></td><td><i class="dot" style="background:#EDF7F1"></i>#EDF7F1</td><td class=""></td><td class="desc">[确认] 成功浅底(与涨同一绿)(2026-10-09 用户确认)</td></tr><tr data-q="color.emerald.500"><td><code>color.emerald.500</code></td><td>color</td><td></td><td><i class="dot" style="background:#4E9A6A"></i>#4E9A6A</td><td class=""></td><td class="desc">[确认] 图表绿(预期预览图柱状取样 #6cb47c 压深,对白 3.41:1)</td></tr><tr data-q="color.emerald.700"><td><code>color.emerald.700</code></td><td>color</td><td></td><td><i class="dot" style="background:#2E7D52"></i>#2E7D52</td><td class=""></td><td class="desc">[确认] 「涨」/ 成功文字(预期预览图涨幅字取样 #5ca47c 对白仅 2.98:1,压深到 5.03:1)</td></tr><tr data-q="color.emerald.dark-1"><td><code>color.emerald.dark-1</code></td><td>color</td><td></td><td><i class="dot" style="background:#13261B"></i>#13261B</td><td class=""></td><td class="desc">[确认] 暗色成功浅底(2026-10-09 用户确认)</td></tr><tr data-q="color.focus.ring"><td><code>color.focus.ring</code></td><td>color</td><td><code>{color.brand.600}</code></td><td><i class="dot" style="background:#8A6530"></i>#8A6530</td><td class="changed">#B98D44</td><td class="desc">[确认] 焦点环金色深一档 #8a6530;演示站 outline 3px #91d5ff(对白 1.7:1,达不到 3:1)。只给按钮、链接、菜单项这类,输入类控件聚焦不加环(2026-10-09)</td></tr><tr data-q="color.icon.brand"><td><code>color.icon.brand</code></td><td>color</td><td><code>{color.brand.500}</code></td><td><i class="dot" style="background:#B98D44"></i>#B98D44</td><td class=""></td><td class="desc">[确认] two-tone 图标描边用品牌金(antd two-tone 默认取主色)</td></tr><tr data-q="color.icon.default"><td><code>color.icon.default</code></td><td>color</td><td><code>{color.neutral.black-a65}</code></td><td><i class="dot" style="background:#000000A6"></i>#000000A6</td><td class="changed">#FFFFFFA6</td><td class="desc">[观察] 菜单 / 表格操作图标随次要文字 rgba(0,0,0,0.65)</td></tr><tr data-q="color.icon.muted"><td><code>color.icon.muted</code></td><td>color</td><td><code>{color.neutral.black-a45}</code></td><td><i class="dot" style="background:#00000073"></i>#00000073</td><td class="changed">#FFFFFF73</td><td class="desc">[观察] 顶栏操作图标 colorTextTertiary(ProLayout colorTextRightActionsItem),对白 3.36:1</td></tr><tr data-q="color.icon.two-tone"><td><code>color.icon.two-tone</code></td><td>color</td><td><code>{color.brand.50}</code></td><td><i class="dot" style="background:#FDF4DE"></i>#FDF4DE</td><td class="changed">#32291C</td><td class="desc">[确认] two-tone 图标填充用品牌金浅底(antd 取主色 1 阶)</td></tr><tr data-q="color.neutral.100"><td><code>color.neutral.100</code></td><td>color</td><td></td><td><i class="dot" style="background:#F5F5F5"></i>#F5F5F5</td><td class=""></td><td class="desc">[观察] 页面底:ProLayout bgLayout = linear-gradient(#fff, #f5f5f5 28%) 的终点(antd design.md surface-layout)</td></tr><tr data-q="color.neutral.200"><td><code>color.neutral.200</code></td><td>color</td><td></td><td><i class="dot" style="background:#F0F0F0"></i>#F0F0F0</td><td class=""></td><td class="desc">[观察] antd colorBorderSecondary #f0f0f0(表格行分隔线原值);现用作顺序色第一档</td></tr><tr data-q="color.neutral.300"><td><code>color.neutral.300</code></td><td>color</td><td></td><td><i class="dot" style="background:#D8D8D8"></i>#D8D8D8</td><td class=""></td><td class="desc">[确认] 控件描边(color.border.strong):观察值 #d9d9d9(69 处,antd colorBorder)对页面底 1.29:1,加深一级到 #d8d8d8(1.31:1);2026-10-09 起卡片 / 分隔线改用 color.neutral.black-a6,不再与控件描边同档</td></tr><tr data-q="color.neutral.50"><td><code>color.neutral.50</code></td><td>color</td><td></td><td><i class="dot" style="background:#FAFAFA"></i>#FAFAFA</td><td class=""></td><td class="desc">[观察] 表头 / 次级容器浅底,25 处(antd design.md surface-container)</td></tr><tr data-q="color.neutral.500"><td><code>color.neutral.500</code></td><td>color</td><td></td><td><i class="dot" style="background:#A6A6A6"></i>#A6A6A6</td><td class=""></td><td class="desc">[确认] 顺序色第三档(四档灰 + 品牌金封顶,对齐 Citrine 顺序色的用法)(2026-10-09 用户确认)</td></tr><tr data-q="color.neutral.600"><td><code>color.neutral.600</code></td><td>color</td><td></td><td><i class="dot" style="background:#6E6E6E"></i>#6E6E6E</td><td class=""></td><td class="desc">[确认] 暗色顺序色第三档(2026-10-09 用户确认)</td></tr><tr data-q="color.neutral.700"><td><code>color.neutral.700</code></td><td>color</td><td></td><td><i class="dot" style="background:#424242"></i>#424242</td><td class=""></td><td class="desc">[观察] 暗色控件边线(antd 暗色 colorBorder),暗黑取证 3 处</td></tr><tr data-q="color.neutral.800"><td><code>color.neutral.800</code></td><td>color</td><td></td><td><i class="dot" style="background:#303030"></i>#303030</td><td class=""></td><td class="desc">[确认] 暗色边线:antd 暗色 colorBorderSecondary #303030(对 #000 1.59:1);原观察值 rgba(253,253,253,0.12) 对页面底 1.27:1,用户决定过线</td></tr><tr data-q="color.neutral.850"><td><code>color.neutral.850</code></td><td>color</td><td></td><td><i class="dot" style="background:#262626"></i>#262626</td><td class=""></td><td class="desc">[确认] 暗色顺序色第一档(2026-10-09 用户确认)</td></tr><tr data-q="color.neutral.875"><td><code>color.neutral.875</code></td><td>color</td><td></td><td><i class="dot" style="background:#212121"></i>#212121</td><td class=""></td><td class="desc">[确认] 卡片标题文字色(用户 2026-10-13 指定 #212121);介于 850 #262626 与 900 #1F1F1F 之间</td></tr><tr data-q="color.neutral.900"><td><code>color.neutral.900</code></td><td>color</td><td></td><td><i class="dot" style="background:#1F1F1F"></i>#1F1F1F</td><td class=""></td><td class="desc">[观察] 暗色浮层 / 顶栏底(antd 暗色 colorBgElevated);亮色 on-surface 合成值,用作金底上的深字</td></tr><tr data-q="color.neutral.950"><td><code>color.neutral.950</code></td><td>color</td><td></td><td><i class="dot" style="background:#141414"></i>#141414</td><td class=""></td><td class="desc">[观察] 暗色卡片底(antd 暗色 colorBgContainer),暗黑取证 16 处</td></tr><tr data-q="color.neutral.950-a50"><td><code>color.neutral.950-a50</code></td><td>color</td><td></td><td><i class="dot" style="background:#14141480"></i>#14141480</td><td class=""></td><td class="desc">[确认] 暗色局部加载遮罩(antd Spin:容器底 50%)(2026-10-09 用户确认)</td></tr><tr data-q="color.neutral.black-a15"><td><code>color.neutral.black-a15</code></td><td>color</td><td></td><td><i class="dot" style="background:#00000026"></i>#00000026</td><td class=""></td><td class="desc">[确认] 骨架屏流光(antd Skeleton gradientToColor)(2026-10-09 用户确认)</td></tr><tr data-q="color.neutral.black-a25"><td><code>color.neutral.black-a25</code></td><td>color</td><td></td><td><i class="dot" style="background:#00000040"></i>#00000040</td><td class=""></td><td class="desc">[观察] 禁用文字 / 演示站占位符原值(antd colorTextQuaternary),16 处</td></tr><tr data-q="color.neutral.black-a3"><td><code>color.neutral.black-a3</code></td><td>color</td><td></td><td><i class="dot" style="background:#00000008"></i>#00000008</td><td class=""></td><td class="desc">[观察] 侧栏项悬停:ProLayout sider.colorBgMenuItemHover = 文字基色 3%</td></tr><tr data-q="color.neutral.black-a4"><td><code>color.neutral.black-a4</code></td><td>color</td><td></td><td><i class="dot" style="background:#0000000A"></i>#0000000A</td><td class=""></td><td class="desc">[观察] 悬停底 / 侧栏当前项 / 分段轨道,26 处(悬停探针 rgba(0,0,0,0.04))</td></tr><tr data-q="color.neutral.black-a45"><td><code>color.neutral.black-a45</code></td><td>color</td><td></td><td><i class="dot" style="background:#00000073"></i>#00000073</td><td class=""></td><td class="desc">[观察] 第三档文字与弹窗遮罩(antd colorTextTertiary / colorBgMask),41 处</td></tr><tr data-q="color.neutral.black-a58"><td><code>color.neutral.black-a58</code></td><td>color</td><td></td><td><i class="dot" style="background:#00000094"></i>#00000094</td><td class=""></td><td class="desc">[确认] 弱化文字对比度校正:antd 第三档原值 rgba(0,0,0,0.45) 对白 3.36:1、对 #f5f5f5 3.07:1,压到 0.58(对白 5.3:1、对页面底 5.2:1)(2026-10-09 用户确认)</td></tr><tr data-q="color.neutral.black-a6"><td><code>color.neutral.black-a6</code></td><td>color</td><td></td><td><i class="dot" style="background:#0000000F"></i>#0000000F</td><td class=""></td><td class="desc">[观察] 骨架屏底(antd Skeleton gradientFromColor),1 处;2026-10-09 起兼作卡片 / 容器 / 表格分隔线(用户指定 6% 黑,与 antd 分隔线同一量级);2026-10-09 起兼作中性标签 / 中性状态胶囊底</td></tr><tr data-q="color.neutral.black-a65"><td><code>color.neutral.black-a65</code></td><td>color</td><td></td><td><i class="dot" style="background:#000000A6"></i>#000000A6</td><td class=""></td><td class="desc">[观察] 第二档文字,79 处(antd colorTextSecondary)</td></tr><tr data-q="color.neutral.black-a85"><td><code>color.neutral.black-a85</code></td><td>color</td><td></td><td><i class="dot" style="background:#000000D9"></i>#000000D9</td><td class=""></td><td class="desc">[观察] 反色底(Tooltip),3 处(antd design.md tooltip)</td></tr><tr data-q="color.neutral.black-a88"><td><code>color.neutral.black-a88</code></td><td>color</td><td></td><td><i class="dot" style="background:#000000E0"></i>#000000E0</td><td class=""></td><td class="desc">[观察] 正文,413 处 / 约 2715 字(antd colorText)</td></tr><tr data-q="color.neutral.black-a95"><td><code>color.neutral.black-a95</code></td><td>color</td><td></td><td><i class="dot" style="background:#000000F2"></i>#000000F2</td><td class=""></td><td class="desc">[观察] 侧栏当前项文字:ProLayout colorTextMenuSelected = 文字基色 95%,5 处</td></tr><tr data-q="color.neutral.shadow-a12"><td><code>color.neutral.shadow-a12</code></td><td>color</td><td></td><td><i class="dot" style="background:#0000001F"></i>#0000001F</td><td class=""></td><td class="desc">[确认] 大投影色 rgba(0,0,0,0.12):图表提示气泡(用户 2026-10-12:hover 浮窗用白色底 + 大投影)</td></tr><tr data-q="color.neutral.shadow-a5"><td><code>color.neutral.shadow-a5</code></td><td>color</td><td></td><td><i class="dot" style="background:#0000000D"></i>#0000000D</td><td class=""></td><td class="desc">[确认] 原卡片阴影色(按预期预览图的大而柔投影);2026-10-09 卡片改为不投影后不再被引用,保留备回退</td></tr><tr data-q="color.neutral.shadow-a8"><td><code>color.neutral.shadow-a8</code></td><td>color</td><td></td><td><i class="dot" style="background:#00000014"></i>#00000014</td><td class=""></td><td class="desc">[观察] 浮层 / 弹窗阴影色:boxShadowSecondary 第一层 0 6px 16px 0 rgba(0,0,0,0.08)</td></tr><tr data-q="color.neutral.split"><td><code>color.neutral.split</code></td><td>color</td><td></td><td><i class="dot" style="background:#0505050F"></i>#0505050F</td><td class=""></td><td class="desc">[观察] 侧栏 / 顶栏分隔线(antd colorSplit),7 处</td></tr><tr data-q="color.neutral.transparent"><td><code>color.neutral.transparent</code></td><td>color</td><td></td><td><i class="dot" style="background:#00000000"></i>#00000000</td><td class=""></td><td class="desc">[确认] 填充式输入框静息边线透明(用户选择 Pro v6 原样)</td></tr><tr data-q="color.neutral.white-a12"><td><code>color.neutral.white-a12</code></td><td>color</td><td></td><td><i class="dot" style="background:#FDFDFD1F"></i>#FDFDFD1F</td><td class=""></td><td class="desc">[观察] 暗色边线 / 分隔线(antd 暗色 colorSplit)</td></tr><tr data-q="color.neutral.white-a25"><td><code>color.neutral.white-a25</code></td><td>color</td><td></td><td><i class="dot" style="background:#FFFFFF40"></i>#FFFFFF40</td><td class=""></td><td class="desc">[观察] 暗色禁用文字,暗黑取证 13 处</td></tr><tr data-q="color.neutral.white-a3"><td><code>color.neutral.white-a3</code></td><td>color</td><td></td><td><i class="dot" style="background:#FFFFFF08"></i>#FFFFFF08</td><td class=""></td><td class="desc">[确认] 暗色侧栏项悬停:ProLayout 同算法(文字基色 #fff 的 3%)(2026-10-09 用户确认)</td></tr><tr data-q="color.neutral.white-a4"><td><code>color.neutral.white-a4</code></td><td>color</td><td></td><td><i class="dot" style="background:#FFFFFF0A"></i>#FFFFFF0A</td><td class=""></td><td class="desc">[确认] 暗色浅分区 / 表头底(antd 暗色 colorFillAlter)(2026-10-09 用户确认)</td></tr><tr data-q="color.neutral.white-a45"><td><code>color.neutral.white-a45</code></td><td>color</td><td></td><td><i class="dot" style="background:#FFFFFF73"></i>#FFFFFF73</td><td class=""></td><td class="desc">[观察] 暗色第三档文字,暗黑取证 56 处</td></tr><tr data-q="color.neutral.white-a50"><td><code>color.neutral.white-a50</code></td><td>color</td><td></td><td><i class="dot" style="background:#FFFFFF80"></i>#FFFFFF80</td><td class=""></td><td class="desc">[确认] 暗色弱化文字校正(0.45 → 0.5,对 #141414 5.3:1、对浅分区 4.9:1);亮色局部加载遮罩(antd Spin:白 50%)(2026-10-09 用户确认)</td></tr><tr data-q="color.neutral.white-a65"><td><code>color.neutral.white-a65</code></td><td>color</td><td></td><td><i class="dot" style="background:#FFFFFFA6"></i>#FFFFFFA6</td><td class=""></td><td class="desc">[观察] 暗色第二档文字,暗黑取证 96 字</td></tr><tr data-q="color.neutral.white-a8"><td><code>color.neutral.white-a8</code></td><td>color</td><td></td><td><i class="dot" style="background:#FFFFFF14"></i>#FFFFFF14</td><td class=""></td><td class="desc">[观察] 暗色悬停 / 选中底,暗黑取证 6 处</td></tr><tr data-q="color.neutral.white-a85"><td><code>color.neutral.white-a85</code></td><td>color</td><td></td><td><i class="dot" style="background:#FFFFFFD9"></i>#FFFFFFD9</td><td class=""></td><td class="desc">[观察] 暗色正文,暗黑取证 499 字</td></tr><tr data-q="color.orange.1"><td><code>color.orange.1</code></td><td>color</td><td></td><td><i class="dot" style="background:#FFF7E6"></i>#FFF7E6</td><td class=""></td><td class="desc">[确认] antd orange-1:警示浅底(2026-10-09 用户确认)</td></tr><tr data-q="color.orange.4"><td><code>color.orange.4</code></td><td>color</td><td></td><td><i class="dot" style="background:#FFC069"></i>#FFC069</td><td class=""></td><td class="desc">[确认] antd orange-4:暗色警示文字(2026-10-09 用户确认)</td></tr><tr data-q="color.orange.8"><td><code>color.orange.8</code></td><td>color</td><td></td><td><i class="dot" style="background:#AD4E00"></i>#AD4E00</td><td class=""></td><td class="desc">[确认] antd orange-8:警示文字(对浅底 5.09:1)。antd 默认警示为 gold #faad14,与品牌金 #b98d44 同色相(约 40° / 37°),改用橙色系(2026-10-09 用户确认)</td></tr><tr data-q="color.orange.dark-1"><td><code>color.orange.dark-1</code></td><td>color</td><td></td><td><i class="dot" style="background:#2B1D11"></i>#2B1D11</td><td class=""></td><td class="desc">[确认] antd 暗色 orange-1:暗色警示浅底(2026-10-09 用户确认)</td></tr><tr data-q="color.red.1"><td><code>color.red.1</code></td><td>color</td><td></td><td><i class="dot" style="background:#FFF1F0"></i>#FFF1F0</td><td class=""></td><td class="desc">[确认] antd red-1:错误浅底</td></tr><tr data-q="color.red.4"><td><code>color.red.4</code></td><td>color</td><td></td><td><i class="dot" style="background:#FF7875"></i>#FF7875</td><td class=""></td><td class="desc">[确认] antd red-4:暗色危险 / 错误文字(对 #141414 7.2:1)</td></tr><tr data-q="color.red.7"><td><code>color.red.7</code></td><td>color</td><td></td><td><i class="dot" style="background:#CF1322"></i>#CF1322</td><td class=""></td><td class="desc">[确认] antd red-7:错误文字 / 危险按钮(白字 5.57:1;antd colorError #ff4d4f 白字仅 3.25:1)</td></tr><tr data-q="color.red.8"><td><code>color.red.8</code></td><td>color</td><td></td><td><i class="dot" style="background:#A8071A"></i>#A8071A</td><td class=""></td><td class="desc">[确认] antd red-8:危险按钮悬停(加深,保持白字对比)</td></tr><tr data-q="color.red.9"><td><code>color.red.9</code></td><td>color</td><td></td><td><i class="dot" style="background:#820014"></i>#820014</td><td class=""></td><td class="desc">[确认] antd red-9:危险按钮按下</td></tr><tr data-q="color.red.dark-1"><td><code>color.red.dark-1</code></td><td>color</td><td></td><td><i class="dot" style="background:#2A1215"></i>#2A1215</td><td class=""></td><td class="desc">[确认] antd 暗色 red-1:暗色错误浅底</td></tr><tr data-q="color.status.error"><td><code>color.status.error</code></td><td>color</td><td><code>{color.red.7}</code></td><td><i class="dot" style="background:#CF1322"></i>#CF1322</td><td class="changed">#FF7875</td><td class="desc">[确认] antd red-7 #cf1322(对浅底 5.07:1);演示站状态点 #ff4d4f</td></tr><tr data-q="color.status.error-bg"><td><code>color.status.error-bg</code></td><td>color</td><td><code>{color.red.1}</code></td><td><i class="dot" style="background:#FFF1F0"></i>#FFF1F0</td><td class="changed">#2A1215</td><td class="desc">[确认] antd red-1 #fff1f0</td></tr><tr data-q="color.status.info"><td><code>color.status.info</code></td><td>color</td><td><code>{color.blue.7}</code></td><td><i class="dot" style="background:#0958D9"></i>#0958D9</td><td class="changed">#69B1FF</td><td class="desc">[确认] antd blue-7 #0958d9(design.md tag-blue 文字)</td></tr><tr data-q="color.status.info-bg"><td><code>color.status.info-bg</code></td><td>color</td><td><code>{color.blue.1}</code></td><td><i class="dot" style="background:#E6F4FF"></i>#E6F4FF</td><td class="changed">#111A2C</td><td class="desc">[确认] antd blue-1 #e6f4ff(design.md alert-info)</td></tr><tr data-q="color.status.neutral"><td><code>color.status.neutral</code></td><td>color</td><td><code>{color.neutral.black-a65}</code></td><td><i class="dot" style="background:#000000A6"></i>#000000A6</td><td class="changed">#FFFFFFA6</td><td class="desc">[确认] 中性状态文字借用次要文字 0.65(2026-10-09 用户确认)</td></tr><tr data-q="color.status.neutral-bg"><td><code>color.status.neutral-bg</code></td><td>color</td><td><code>{color.neutral.black-a6}</code></td><td><i class="dot" style="background:#0000000F"></i>#0000000F</td><td class="changed">#FFFFFF14</td><td class="desc">[确认] 中性标签 / 中性状态胶囊浅底:用户 2026-10-09 选 6% 黑(原借用浅分区 #fafafa,白卡上看不出底);半透明,压在表格悬停行、表头上仍比底深一档;Element 里与它同值的标签边线改为透明,免得叠出深一圈</td></tr><tr data-q="color.status.success"><td><code>color.status.success</code></td><td>color</td><td><code>{color.emerald.700}</code></td><td><i class="dot" style="background:#2E7D52"></i>#2E7D52</td><td class="changed">#5FBF86</td><td class="desc">[确认] 成功与「涨」统一成预期预览图的祖母绿(对浅底 4.6:1);原为 antd green-8 #237804(2026-10-09 用户确认)</td></tr><tr data-q="color.status.success-bg"><td><code>color.status.success-bg</code></td><td>color</td><td><code>{color.emerald.50}</code></td><td><i class="dot" style="background:#EDF7F1"></i>#EDF7F1</td><td class="changed">#13261B</td><td class="desc">[确认] 成功浅底(与涨同一绿)(2026-10-09 用户确认)</td></tr><tr data-q="color.status.warning"><td><code>color.status.warning</code></td><td>color</td><td><code>{color.orange.8}</code></td><td><i class="dot" style="background:#AD4E00"></i>#AD4E00</td><td class="changed">#FFC069</td><td class="desc">[确认] antd orange-8 #ad4e00(对浅底 5.09:1);antd 默认警示 gold 与品牌金同色相,改用橙色系(2026-10-09 用户确认)</td></tr><tr data-q="color.status.warning-bg"><td><code>color.status.warning-bg</code></td><td>color</td><td><code>{color.orange.1}</code></td><td><i class="dot" style="background:#FFF7E6"></i>#FFF7E6</td><td class="changed">#2B1D11</td><td class="desc">[确认] antd orange-1 #fff7e6(2026-10-09 用户确认)</td></tr><tr data-q="color.text.brand"><td><code>color.text.brand</code></td><td>color</td><td><code>{color.brand.500}</code></td><td><i class="dot" style="background:#B98D44"></i>#B98D44</td><td class=""></td><td class="desc">[确认] ≥ 20px 的展示字用品牌金(对白 3.02:1,满足大字 3:1)</td></tr><tr data-q="color.text.card-title"><td><code>color.text.card-title</code></td><td>color</td><td><code>{color.neutral.875}</code></td><td><i class="dot" style="background:#212121"></i>#212121</td><td class="changed">#FFFFFFD9</td><td class="desc">[确认] 卡片标题 #212121(用户 2026-10-13 指定,配 text.body.size 14px;原为 color.text.secondary 的分区标签样式),对白 16.1:1</td></tr><tr data-q="color.text.danger"><td><code>color.text.danger</code></td><td>color</td><td><code>{color.red.7}</code></td><td><i class="dot" style="background:#CF1322"></i>#CF1322</td><td class="changed">#FF7875</td><td class="desc">[确认] antd 错误色压深到 red-7 #cf1322(对白 5.57:1)</td></tr><tr data-q="color.text.inverse"><td><code>color.text.inverse</code></td><td>color</td><td><code>{color.white}</code></td><td><i class="dot" style="background:#FFFFFF"></i>#FFFFFF</td><td class=""></td><td class="desc">[确认] Tooltip / 反色底上的白字(2026-10-09 用户确认)</td></tr><tr data-q="color.text.link"><td><code>color.text.link</code></td><td>color</td><td><code>{color.brand.600}</code></td><td><i class="dot" style="background:#8A6530"></i>#8A6530</td><td class="changed">#B98D44</td><td class="desc">[确认] 链接取金色深一档 #8a6530(对白 5.27:1);演示站链接为主色 #1677ff,79 处</td></tr><tr data-q="color.text.link-hover"><td><code>color.text.link-hover</code></td><td>color</td><td><code>{color.brand.700}</code></td><td><i class="dot" style="background:#63441E"></i>#63441E</td><td class="changed">#D1AB62</td><td class="desc">[确认] 链接悬停再深一档 #63441e:antd 悬停变浅,金色变浅会低于 4.5,改为变深</td></tr><tr data-q="color.text.muted"><td><code>color.text.muted</code></td><td>color</td><td><code>{color.neutral.black-a58}</code></td><td><i class="dot" style="background:#00000094"></i>#00000094</td><td class="changed">#FFFFFF80</td><td class="desc">[确认] antd 第三档 rgba(0,0,0,0.45) 达不到弱化文字 4.5:1,压到 0.58(2026-10-09 用户确认)</td></tr><tr data-q="color.text.on-brand"><td><code>color.text.on-brand</code></td><td>color</td><td><code>{color.white}</code></td><td><i class="dot" style="background:#FFFFFF"></i>#FFFFFF</td><td class=""></td><td class="desc">[确认] 品牌金面上的白字(与主按钮同一规则,用户 2026-10-09 指定金底放白字);正文对主色 3.02:1 不达 4.5,品牌面上的正文宜用 ≥ 24px 的大字</td></tr><tr data-q="color.text.on-danger"><td><code>color.text.on-danger</code></td><td>color</td><td><code>{color.white}</code></td><td><i class="dot" style="background:#FFFFFF"></i>#FFFFFF</td><td class=""></td><td class="desc">[确认] 危险按钮白字(对 #cf1322 5.57:1)(2026-10-09 用户确认)</td></tr><tr data-q="color.text.on-overlay"><td><code>color.text.on-overlay</code></td><td>color</td><td><code>{color.neutral.black-a88}</code></td><td><i class="dot" style="background:#000000E0"></i>#000000E0</td><td class="changed">#FFFFFFD9</td><td class="desc">[确认] 遮罩 45% 黑叠在 #f5f5f5 上偏浅(合成 #878787),用正文色(2026-10-09 用户确认)</td></tr><tr data-q="color.text.on-primary"><td><code>color.text.on-primary</code></td><td>color</td><td><code>{color.white}</code></td><td><i class="dot" style="background:#FFFFFF"></i>#FFFFFF</td><td class=""></td><td class="desc">[确认] 金底白字:主按钮 / 分页当前页 / 步骤当前步 / 勾选标记 / logo 底块(用户指定 2026-10-09:深字显脏);对主色 3.02:1,低于 4.5,已登记例外</td></tr><tr data-q="color.text.on-selected"><td><code>color.text.on-selected</code></td><td>color</td><td><code>{color.neutral.black-a88}</code></td><td><i class="dot" style="background:#000000E0"></i>#000000E0</td><td class="changed">#FFFFFFD9</td><td class="desc">[观察] 分段选择器当前项(白底)上的正文色</td></tr><tr data-q="color.text.placeholder"><td><code>color.text.placeholder</code></td><td>color</td><td><code>{color.neutral.black-a45}</code></td><td><i class="dot" style="background:#00000073"></i>#00000073</td><td class="changed">#FFFFFF73</td><td class="desc">[确认] 演示站占位符 rgba(0,0,0,0.25) 对白 1.84:1(低于占位符底线 3);改用 antd 第三档 0.45(3.36:1)(2026-10-09 用户确认)</td></tr><tr data-q="color.text.primary"><td><code>color.text.primary</code></td><td>color</td><td><code>{color.neutral.black-a88}</code></td><td><i class="dot" style="background:#000000E0"></i>#000000E0</td><td class="changed">#FFFFFFD9</td><td class="desc">[观察] 承载最多文字(约 2715 字)rgba(0,0,0,0.88),对白 16.5:1</td></tr><tr data-q="color.text.secondary"><td><code>color.text.secondary</code></td><td>color</td><td><code>{color.neutral.black-a65}</code></td><td><i class="dot" style="background:#000000A6"></i>#000000A6</td><td class="changed">#FFFFFFA6</td><td class="desc">[观察] 第二档文字 rgba(0,0,0,0.65),对白 7:1</td></tr><tr data-q="color.text.selected"><td><code>color.text.selected</code></td><td>color</td><td><code>{color.brand.600}</code></td><td><i class="dot" style="background:#8A6530"></i>#8A6530</td><td class="changed">#D1AB62</td><td class="desc">[确认] 排序激活 / 当前页签文字:演示站为主色;换金后取深一档保证 ≥ 4.5</td></tr><tr data-q="color.text.sidebar"><td><code>color.text.sidebar</code></td><td>color</td><td><code>{color.neutral.black-a65}</code></td><td><i class="dot" style="background:#000000A6"></i>#000000A6</td><td class="changed">#FFFFFFA6</td><td class="desc">[观察] ProLayout sider.colorTextMenu = colorTextSecondary(0.65)</td></tr><tr data-q="color.text.sidebar-muted"><td><code>color.text.sidebar-muted</code></td><td>color</td><td><code>{color.neutral.black-a58}</code></td><td><i class="dot" style="background:#00000094"></i>#00000094</td><td class="changed">#FFFFFF80</td><td class="desc">[确认] 侧栏分组标题 / 页脚:ProLayout sider.colorTextMenuSecondary 原为 0.45,压侧栏底 #f5f5f5 只有 3.31:1(12px 不达 4.5),与 color.text.muted 同取 0.58(5.19:1)(2026-10-09 用户确认)</td></tr><tr data-q="color.text.sidebar-selected"><td><code>color.text.sidebar-selected</code></td><td>color</td><td><code>{color.white}</code></td><td><i class="dot" style="background:#FFFFFF"></i>#FFFFFF</td><td class="changed">#D1AB62</td><td class="desc">[确认] 侧栏当前项白字 / 白图标(亮色,用户指定 2026-10-09):对主色底块 3.02:1,低于 14px 文字的 4.5,已登记例外;回补路径:底块改用 color.brand.600(白字 5.27:1),或恢复奶油金底配深金字</td></tr><tr data-q="color.text.sidebar-strong"><td><code>color.text.sidebar-strong</code></td><td>color</td><td><code>{color.neutral.black-a88}</code></td><td><i class="dot" style="background:#000000E0"></i>#000000E0</td><td class="changed">#FFFFFFD9</td><td class="desc">[观察] ProLayout 菜单悬停 / 标题 = colorText(0.88);悬停探针 0.65 → 0.88</td></tr><tr data-q="color.white"><td><code>color.white</code></td><td>color</td><td></td><td><i class="dot" style="background:#FFFFFF"></i>#FFFFFF</td><td class=""></td><td class="desc">[观察] 卡片 / 表格 / 弹窗 / 抽屉底,118 处</td></tr><tr data-q="control.height.lg"><td><code>control.height.lg</code></td><td>dimension</td><td><code>{size.control.lg}</code></td><td>40px</td><td class=""></td><td class="desc">[确认] 大控件 40px(antd controlHeightLG)(2026-10-09 用户确认)</td></tr><tr data-q="control.height.md"><td><code>control.height.md</code></td><td>dimension</td><td><code>{size.control.md}</code></td><td>32px</td><td class=""></td><td class="desc">[观察] 按钮 / 输入框 32px,11 处</td></tr><tr data-q="control.height.sm"><td><code>control.height.sm</code></td><td>dimension</td><td><code>{size.control.sm}</code></td><td>24px</td><td class=""></td><td class="desc">[观察] 小按钮 / 分页项 24px,8 处</td></tr><tr data-q="control.height.xs"><td><code>control.height.xs</code></td><td>dimension</td><td><code>{size.control.xs}</code></td><td>22px</td><td class=""></td><td class="desc">[观察] 标签 / 状态徽标 22px,20 处</td></tr><tr data-q="control.hit-min"><td><code>control.hit-min</code></td><td>dimension</td><td><code>{size.hit-min}</code></td><td>24px</td><td class=""></td><td class="desc">[确认] 图标控件最小命中区 24px(2026-10-09 用户确认)</td></tr><tr data-q="control.hit-touch"><td><code>control.hit-touch</code></td><td>dimension</td><td><code>{size.control.touch}</code></td><td>40px</td><td class=""></td><td class="desc">[确认] 触屏命中区 40px(2026-10-09 用户确认)</td></tr><tr data-q="control.segmented-inset"><td><code>control.segmented-inset</code></td><td>dimension</td><td><code>{spacing.0-5}</code></td><td>2px</td><td class=""></td><td class="desc">[确认] 分段选择器内衬 2px(antd Segmented trackPadding)(2026-10-09 用户确认)</td></tr><tr data-q="decoration.none"><td><code>decoration.none</code></td><td>string</td><td></td><td>none</td><td class=""></td><td class="desc">[观察] 链接无下划线:演示站文字装饰统计为空,链接 79 处都靠颜色区分</td></tr><tr data-q="duration.fast"><td><code>duration.fast</code></td><td>duration</td><td></td><td>100ms</td><td class=""></td><td class="desc">[观察] 100ms,43 处(antd motionDurationFast)</td></tr><tr data-q="duration.normal"><td><code>duration.normal</code></td><td>duration</td><td></td><td>200ms</td><td class=""></td><td class="desc">[观察] 200ms,1123 处(antd motionDurationMid)</td></tr><tr data-q="duration.slow"><td><code>duration.slow</code></td><td>duration</td><td></td><td>300ms</td><td class=""></td><td class="desc">[观察] 300ms,745 处(antd motionDurationSlow)</td></tr><tr data-q="easing.enter"><td><code>easing.enter</code></td><td>cubicBezier</td><td></td><td>cubic-bezier(0.215, 0.61, 0.355, 1)</td><td class=""></td><td class="desc">[观察] cubic-bezier(0.215, 0.61, 0.355, 1),93 处(antd motionEaseOut)</td></tr><tr data-q="easing.exit"><td><code>easing.exit</code></td><td>cubicBezier</td><td></td><td>cubic-bezier(0.55, 0.055, 0.675, 0.19)</td><td class=""></td><td class="desc">[确认] 退场加速(antd motionEaseIn)(2026-10-09 用户确认)</td></tr><tr data-q="easing.standard"><td><code>easing.standard</code></td><td>cubicBezier</td><td></td><td>cubic-bezier(0.25, 0.1, 0.25, 1)</td><td class=""></td><td class="desc">[观察] ease,1594 处</td></tr><tr data-q="elevation.card.blur"><td><code>elevation.card.blur</code></td><td>dimension</td><td><code>{shadow.blur.1}</code></td><td>16px</td><td class=""></td><td class="desc">[确认] 同上</td></tr><tr data-q="elevation.card.color"><td><code>elevation.card.color</code></td><td>color</td><td><code>{color.neutral.transparent}</code></td><td><i class="dot" style="background:#00000000"></i>#00000000</td><td class=""></td><td class="desc">[确认] 卡片不投影(用户决定 2026-10-09,替代按预期预览图加的大而柔投影):取透明,卡片靠底色差与 color.border.default 定形</td></tr><tr data-q="elevation.card.y"><td><code>elevation.card.y</code></td><td>dimension</td><td><code>{shadow.y.1}</code></td><td>4px</td><td class=""></td><td class="desc">[确认] 卡片不投影(2026-10-09,颜色取透明);尺寸保留,主按钮按下的内阴影借用</td></tr><tr data-q="elevation.modal.blur"><td><code>elevation.modal.blur</code></td><td>dimension</td><td><code>{shadow.blur.2}</code></td><td>16px</td><td class=""></td><td class="desc">[观察] 同上</td></tr><tr data-q="elevation.modal.color"><td><code>elevation.modal.color</code></td><td>color</td><td><code>{color.neutral.shadow-a8}</code></td><td><i class="dot" style="background:#00000014"></i>#00000014</td><td class=""></td><td class="desc">[观察] 同上</td></tr><tr data-q="elevation.modal.y"><td><code>elevation.modal.y</code></td><td>dimension</td><td><code>{shadow.y.2}</code></td><td>6px</td><td class=""></td><td class="desc">[观察] 弹窗与浮层同用 boxShadowSecondary(.ant-modal-container 实测)</td></tr><tr data-q="elevation.popover.blur"><td><code>elevation.popover.blur</code></td><td>dimension</td><td><code>{shadow.blur.2}</code></td><td>16px</td><td class=""></td><td class="desc">[观察] 下拉 / 气泡</td></tr><tr data-q="elevation.popover.color"><td><code>elevation.popover.color</code></td><td>color</td><td><code>{color.neutral.shadow-a8}</code></td><td><i class="dot" style="background:#00000014"></i>#00000014</td><td class=""></td><td class="desc">[观察] rgba(0,0,0,0.08)</td></tr><tr data-q="elevation.popover.y"><td><code>elevation.popover.y</code></td><td>dimension</td><td><code>{shadow.y.2}</code></td><td>6px</td><td class=""></td><td class="desc">[观察] boxShadowSecondary 第一层</td></tr><tr data-q="elevation.tooltip.blur"><td><code>elevation.tooltip.blur</code></td><td>dimension</td><td><code>{shadow.blur.3}</code></td><td>32px</td><td class=""></td><td class="desc">[确认] 图表提示气泡阴影模糊(用户 2026-10-12:hover 浮窗用白色底 + 大投影)</td></tr><tr data-q="elevation.tooltip.color"><td><code>elevation.tooltip.color</code></td><td>color</td><td><code>{color.neutral.shadow-a12}</code></td><td><i class="dot" style="background:#0000001F"></i>#0000001F</td><td class=""></td><td class="desc">[确认] 图表提示气泡阴影色(用户 2026-10-12:hover 浮窗用白色底 + 大投影)</td></tr><tr data-q="elevation.tooltip.y"><td><code>elevation.tooltip.y</code></td><td>dimension</td><td><code>{shadow.y.3}</code></td><td>12px</td><td class=""></td><td class="desc">[确认] 图表提示气泡阴影 y:大投影,比 elevation.popover 大一档(用户 2026-10-12:hover 浮窗用白色底 + 大投影)</td></tr><tr data-q="focus.ring.width"><td><code>focus.ring.width</code></td><td>dimension</td><td><code>{border.width.ring}</code></td><td>3px</td><td class=""></td><td class="desc">[观察] 焦点 outline 3px(offset 1px);输入类控件聚焦不用(2026-10-09)</td></tr><tr data-q="font.family.body"><td><code>font.family.body</code></td><td>fontFamily</td><td><code>{font.family.sans}</code></td><td>-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji</td><td class=""></td><td class="desc">[观察] body 字体栈(去掉网络字体 AlibabaSans)</td></tr><tr data-q="font.family.code"><td><code>font.family.code</code></td><td>fontFamily</td><td><code>{font.family.mono}</code></td><td>SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace</td><td class=""></td><td class="desc">[观察] 等宽字体栈</td></tr><tr data-q="font.family.mono"><td><code>font.family.mono</code></td><td>fontFamily</td><td></td><td>SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace</td><td class=""></td><td class="desc">[观察] 等宽字体栈(antd design.md code)</td></tr><tr data-q="font.family.numeric"><td><code>font.family.numeric</code></td><td>fontFamily</td><td></td><td>D-DIN-PRO, D-DIN, Bahnschrift, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif</td><td class=""></td><td class="desc">[确认] 数据大字字体栈(用户 2026-10-09 指定 D-DIN-PRO;同日改定只给 text.display.family,小号数字回到正文字体):D-DIN-PRO 有 400–900 六档字重;没装时用 D-DIN——桥接 fonts.css 内嵌 Datto 原版 D-DIN(400 / 700,SIL OFL 1.1;2026-10-26 用户决定随系统分发),三个桥接入口都会引入,所以各端一致;只引 dist、不引桥接,或 CSP 不允许 data: 字体时,才退到 Windows 自带的 Bahnschrift(DIN 1451 系)与正文无衬线。不放 macOS 的 DIN Alternate——只有 Bold 面,会让正文数字全变粗。D-DIN-PRO 是第三方在 D-DIN 上的扩展,名字含 D-DIN 的保留名,授权链说不清,不随系统分发。D-DIN-PRO 与 D-DIN 都没有等宽数字,tabular-nums 对它们不生效</td></tr><tr data-q="font.family.sans"><td><code>font.family.sans</code></td><td>fontFamily</td><td></td><td>-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji</td><td class=""></td><td class="desc">[观察] 演示站 body 字体栈去掉首位网络字体 AlibabaSans(种子不带正文字体文件),与 antd design.md 系统字体栈一致</td></tr><tr data-q="font.letter-spacing.caps"><td><code>font.letter-spacing.caps</code></td><td>dimension</td><td></td><td>0.06em</td><td class=""></td><td class="desc">[确认] 分区标签的大写小字字距(预期预览图 PORTFOLIO PERFORMANCE 一类标题)</td></tr><tr data-q="font.letter-spacing.none"><td><code>font.letter-spacing.none</code></td><td>dimension</td><td></td><td>0em</td><td class=""></td><td class="desc">[确认] 数据大字不调字距(antd Statistic 无字距)(2026-10-09 用户确认)</td></tr><tr data-q="font.line-height.display"><td><code>font.line-height.display</code></td><td>number</td><td></td><td>1.2667</td><td class=""></td><td class="desc">[确认] 统计数字行高 38 / 30(antd headline-lg)(2026-10-09 用户确认)</td></tr><tr data-q="font.line-height.heading"><td><code>font.line-height.heading</code></td><td>number</td><td></td><td>1.3333</td><td class=""></td><td class="desc">[确认] 标题行高 32 / 24(antd headline-md)(2026-10-09 用户确认)</td></tr><tr data-q="font.line-height.hero"><td><code>font.line-height.hero</code></td><td>number</td><td></td><td>1.2105</td><td class=""></td><td class="desc">[确认] 大字行高 46 / 38(antd display-lg)(2026-10-09 用户确认)</td></tr><tr data-q="font.line-height.normal"><td><code>font.line-height.normal</code></td><td>number</td><td></td><td>1.5714</td><td class=""></td><td class="desc">[观察] 正文行高 22 / 14(观察 1.57,644 处)</td></tr><tr data-q="font.numeric.tabular"><td><code>font.numeric.tabular</code></td><td>string</td><td></td><td>tabular-nums</td><td class=""></td><td class="desc">[确认] 金额 / 单号 / 统计数字等宽对齐(2026-10-09 用户确认)</td></tr><tr data-q="font.size.2xl"><td><code>font.size.2xl</code></td><td>dimension</td><td></td><td>24px</td><td class=""></td><td class="desc">[确认] 页头大标题 24px(antd headline-md)(2026-10-09 用户确认)</td></tr><tr data-q="font.size.3xl"><td><code>font.size.3xl</code></td><td>dimension</td><td></td><td>30px</td><td class=""></td><td class="desc">[观察] 工作台统计数字 30px,4 处</td></tr><tr data-q="font.size.4xl"><td><code>font.size.4xl</code></td><td>dimension</td><td></td><td>38px</td><td class=""></td><td class="desc">[确认] 结果页 / 登录页大字 38px(antd display-lg)(2026-10-09 用户确认)</td></tr><tr data-q="font.size.lg"><td><code>font.size.lg</code></td><td>dimension</td><td></td><td>16px</td><td class=""></td><td class="desc">[观察] 卡片标题 16px,34 处</td></tr><tr data-q="font.size.md"><td><code>font.size.md</code></td><td>dimension</td><td></td><td>14px</td><td class=""></td><td class="desc">[观察] 正文 14px,688 处(antd fontSize)</td></tr><tr data-q="font.size.sm"><td><code>font.size.sm</code></td><td>dimension</td><td></td><td>12px</td><td class=""></td><td class="desc">[观察] 小字 / 辅助说明 12px(antd fontSizeSM)</td></tr><tr data-q="font.size.xl"><td><code>font.size.xl</code></td><td>dimension</td><td></td><td>20px</td><td class=""></td><td class="desc">[观察] 页面标题 20px(antd headline-sm)</td></tr><tr data-q="font.style.normal"><td><code>font.style.normal</code></td><td>string</td><td></td><td>normal</td><td class=""></td><td class="desc">[观察] 链接不用斜体</td></tr><tr data-q="font.weight.medium"><td><code>font.weight.medium</code></td><td>fontWeight</td><td></td><td>500</td><td class=""></td><td class="desc">[观察] 中等字重 500,1 处(工作台 h4「门店销售额排名」);antd 界面主要只用 400 / 600</td></tr><tr data-q="font.weight.regular"><td><code>font.weight.regular</code></td><td>fontWeight</td><td></td><td>400</td><td class=""></td><td class="desc">[观察] 正文 / 按钮 / 标签 400,711 处</td></tr><tr data-q="font.weight.semibold"><td><code>font.weight.semibold</code></td><td>fontWeight</td><td></td><td>600</td><td class=""></td><td class="desc">[观察] 表头 / 标题 600,52 处(antd 只用 400 与 600 两档)</td></tr><tr data-q="icon.library"><td><code>icon.library</code></td><td>string</td><td><code>{icon.set.iconpark}</code></td><td>IconPark</td><td class=""></td><td class="desc">[确认] IconPark 描边型线性图标,配合 icon.stroke.width 与 mergeIcons();shadcn 栈跟随 shadcn/ui 用 lucide-react(同为描边型,同样按 icon.stroke.width 画)。用户 2026-10-14 确认登记为实际在用的图标库;原为演示站观察到的 @ant-design/icons(anticon 148 处),填充路径,用不上描边粗细</td></tr><tr data-q="icon.set.antd"><td><code>icon.set.antd</code></td><td>string</td><td></td><td>@ant-design/icons</td><td class=""></td><td class="desc">[确认] 0.2.0 起不再被引用(icon.library 改指 icon.set.iconpark),按版本策略留到下个大版本再删。原为演示站观察到的线性图标(anticon,148 处 outline),是填充路径,用不上 icon.stroke.width</td></tr><tr data-q="icon.set.iconpark"><td><code>icon.set.iconpark</code></td><td>string</td><td></td><td>IconPark</td><td class=""></td><td class="desc">[确认] 字节跳动 IconPark(Apache-2.0)描边型线性图标:Vue 3 用 @icon-park/vue-next,React 用 @icon-park/react,静态页用 @icon-park/svg;Element Plus 桥接 iconpark.css / iconpark.config 按它写。种子不带图标资源,接入方自行安装(用户 2026-10-14:图标库登记改为实际在用的 IconPark)</td></tr><tr data-q="icon.size.2xl"><td><code>icon.size.2xl</code></td><td>dimension</td><td><code>{size.icon.2xl}</code></td><td>24px</td><td class=""></td><td class="desc">[确认] 结果页 / 提示卡大图标 24px(2026-10-09 用户确认)</td></tr><tr data-q="icon.size.lg"><td><code>icon.size.lg</code></td><td>dimension</td><td><code>{size.icon.lg}</code></td><td>16px</td><td class=""></td><td class="desc">[观察] 16px,14 处</td></tr><tr data-q="icon.size.md"><td><code>icon.size.md</code></td><td>dimension</td><td><code>{size.icon.md}</code></td><td>14px</td><td class=""></td><td class="desc">[观察] 14px,98 处</td></tr><tr data-q="icon.size.sm"><td><code>icon.size.sm</code></td><td>dimension</td><td><code>{size.icon.sm}</code></td><td>12px</td><td class=""></td><td class="desc">[观察] 12px,28 处</td></tr><tr data-q="icon.size.xl"><td><code>icon.size.xl</code></td><td>dimension</td><td><code>{size.icon.xl}</code></td><td>20px</td><td class=""></td><td class="desc">[观察] 20px,3 处</td></tr><tr data-q="icon.size.xs"><td><code>icon.size.xs</code></td><td>dimension</td><td><code>{size.icon.xs}</code></td><td>11px</td><td class=""></td><td class="desc">[观察] 11px</td></tr><tr data-q="icon.stroke.width"><td><code>icon.stroke.width</code></td><td>dimension</td><td><code>{stroke-width.1-4}</code></td><td>1.4px</td><td class=""></td><td class="desc">[确认] 线性图标描边 1.4px:屏幕上的实际粗细,各档尺寸一样粗(vector-effect: non-scaling-stroke);多段描边合并成一个形状再上一次色,半透明的图标色在交叠处不叠深(用户 2026-10-12:icon 描边粗细改为 1.4px 并合并栅格化)。原为 IconPark 48 网格里的 3,14px 图标上约 0.9px</td></tr><tr data-q="illustration.size.md"><td><code>illustration.size.md</code></td><td>dimension</td><td><code>{size.illustration}</code></td><td>100px</td><td class=""></td><td class="desc">[确认] 空状态 / 结果页插图 100px(2026-10-09 用户确认)</td></tr><tr data-q="layer.dropdown"><td><code>layer.dropdown</code></td><td>number</td><td><code>{z.1050}</code></td><td>1050</td><td class=""></td><td class="desc">[确认] 下拉 / 气泡 1050(antd:高于弹窗)(2026-10-09 用户确认)</td></tr><tr data-q="layer.modal"><td><code>layer.modal</code></td><td>number</td><td><code>{z.1000}</code></td><td>1000</td><td class=""></td><td class="desc">[观察] 弹窗 / 抽屉 1000</td></tr><tr data-q="layer.sticky"><td><code>layer.sticky</code></td><td>number</td><td><code>{z.100}</code></td><td>100</td><td class=""></td><td class="desc">[观察] 顶栏 / 固定层 100</td></tr><tr data-q="layer.toast"><td><code>layer.toast</code></td><td>number</td><td><code>{z.1010}</code></td><td>1010</td><td class=""></td><td class="desc">[观察] 全局提示 1010(antd message)</td></tr><tr data-q="layout.breakpoint.mobile"><td><code>layout.breakpoint.mobile</code></td><td>dimension</td><td><code>{size.viewport.mobile}</code></td><td>768px</td><td class=""></td><td class="desc">[观察] 768px</td></tr><tr data-q="layout.breakpoint.narrow"><td><code>layout.breakpoint.narrow</code></td><td>dimension</td><td><code>{size.viewport.narrow}</code></td><td>992px</td><td class=""></td><td class="desc">[观察] 992px</td></tr><tr data-q="layout.drawer.width"><td><code>layout.drawer.width</code></td><td>dimension</td><td><code>{size.drawer}</code></td><td>600px</td><td class=""></td><td class="desc">[观察] 详情抽屉 600px</td></tr><tr data-q="layout.form.label-width"><td><code>layout.form.label-width</code></td><td>dimension</td><td><code>{size.form.label}</code></td><td>120px</td><td class=""></td><td class="desc">[观察] 查询表格筛选栏 labelWidth 120px(源码)</td></tr><tr data-q="layout.form.max-width"><td><code>layout.form.max-width</code></td><td>dimension</td><td><code>{size.form.max}</code></td><td>600px</td><td class=""></td><td class="desc">[观察] 基础表单 maxWidth 600px(源码)</td></tr><tr data-q="layout.modal.width.md"><td><code>layout.modal.width.md</code></td><td>dimension</td><td><code>{size.modal.md}</code></td><td>520px</td><td class=""></td><td class="desc">[确认] 表单弹窗 520px(antd Modal 默认)(2026-10-09 用户确认)</td></tr><tr data-q="layout.modal.width.sm"><td><code>layout.modal.width.sm</code></td><td>dimension</td><td><code>{size.modal.sm}</code></td><td>416px</td><td class=""></td><td class="desc">[确认] 确认弹窗 416px(antd Modal.confirm)(2026-10-09 用户确认)</td></tr><tr data-q="layout.search.width"><td><code>layout.search.width</code></td><td>dimension</td><td><code>{size.search}</code></td><td>216px</td><td class=""></td><td class="desc">[确认] 筛选栏搜索框 216px(2026-10-09 用户确认)</td></tr><tr data-q="layout.sidebar.collapsed-width"><td><code>layout.sidebar.collapsed-width</code></td><td>dimension</td><td><code>{size.sidebar-collapsed}</code></td><td>64px</td><td class=""></td><td class="desc">[观察] 折叠 64px(源码默认值)</td></tr><tr data-q="layout.sidebar.item-gap"><td><code>layout.sidebar.item-gap</code></td><td>dimension</td><td><code>{spacing.2}</code></td><td>8px</td><td class=""></td><td class="desc">[确认] 同一分组里相邻两个侧栏菜单项的间距 8px:用户 2026-10-15 指定(先定 12px,评审中收到 8px;原 spacing.0-5 2px);分组标题自带上下留白,不受影响;折叠后标题隐藏,组与组之间也用它</td></tr><tr data-q="layout.sidebar.item-height"><td><code>layout.sidebar.item-height</code></td><td>dimension</td><td><code>{size.control.lg}</code></td><td>40px</td><td class=""></td><td class="desc">[确认] 侧栏菜单项高 40px:用户 2026-10-15 指定(原借按钮 / 输入框的 control.height.md 32px,按钮与输入框不变)</td></tr><tr data-q="layout.sidebar.width"><td><code>layout.sidebar.width</code></td><td>dimension</td><td><code>{size.sidebar}</code></td><td>208px</td><td class=""></td><td class="desc">[确认] 侧栏 208px:用户决定收窄(2026-10-09,原观察值 256px)</td></tr><tr data-q="layout.topbar.height"><td><code>layout.topbar.height</code></td><td>dimension</td><td><code>{size.topbar}</code></td><td>56px</td><td class=""></td><td class="desc">[观察] 顶栏 56px</td></tr><tr data-q="motion.duration.fast"><td><code>motion.duration.fast</code></td><td>duration</td><td><code>{duration.fast}</code></td><td>100ms</td><td class=""></td><td class="desc">[观察] 100ms</td></tr><tr data-q="motion.duration.normal"><td><code>motion.duration.normal</code></td><td>duration</td><td><code>{duration.normal}</code></td><td>200ms</td><td class=""></td><td class="desc">[观察] 200ms</td></tr><tr data-q="motion.duration.slow"><td><code>motion.duration.slow</code></td><td>duration</td><td><code>{duration.slow}</code></td><td>300ms</td><td class=""></td><td class="desc">[观察] 300ms</td></tr><tr data-q="motion.easing.enter"><td><code>motion.easing.enter</code></td><td>cubicBezier</td><td><code>{easing.enter}</code></td><td>cubic-bezier(0.215, 0.61, 0.355, 1)</td><td class=""></td><td class="desc">[观察] antd motionEaseOut</td></tr><tr data-q="motion.easing.exit"><td><code>motion.easing.exit</code></td><td>cubicBezier</td><td><code>{easing.exit}</code></td><td>cubic-bezier(0.55, 0.055, 0.675, 0.19)</td><td class=""></td><td class="desc">[确认] antd motionEaseIn(2026-10-09 用户确认)</td></tr><tr data-q="motion.easing.standard"><td><code>motion.easing.standard</code></td><td>cubicBezier</td><td><code>{easing.standard}</code></td><td>cubic-bezier(0.25, 0.1, 0.25, 1)</td><td class=""></td><td class="desc">[观察] ease</td></tr><tr data-q="opacity.100"><td><code>opacity.100</code></td><td>number</td><td></td><td>1</td><td class=""></td><td class="desc">[确认] 不压透明度:金底深字对比 5.14:1,次要文字压到 0.9 就只剩 4.46:1(2026-10-09 用户确认)</td></tr><tr data-q="opacity.40"><td><code>opacity.40</code></td><td>number</td><td></td><td>0.4</td><td class=""></td><td class="desc">[确认] 禁用态透明度:antd 用禁用色表达(文字 25% 黑 + 4% 黑底),桥接用透明度实现时取 0.4 近似(2026-10-09 用户确认)</td></tr><tr data-q="opacity.disabled"><td><code>opacity.disabled</code></td><td>number</td><td><code>{opacity.40}</code></td><td>0.4</td><td class=""></td><td class="desc">[确认] 禁用态 0.4(antd 用禁用色,桥接用透明度近似)(2026-10-09 用户确认)</td></tr><tr data-q="opacity.on-primary-muted"><td><code>opacity.on-primary-muted</code></td><td>number</td><td><code>{opacity.100}</code></td><td>1</td><td class=""></td><td class="desc">[确认] 金底上的次要文字不压透明度(对比余量不足)(2026-10-09 用户确认)</td></tr><tr data-q="radius.full"><td><code>radius.full</code></td><td>dimension</td><td></td><td>999px</td><td class=""></td><td class="desc">[观察] 徽标点 / 头像全圆,81 处</td></tr><tr data-q="radius.lg"><td><code>radius.lg</code></td><td>dimension</td><td></td><td>12px</td><td class=""></td><td class="desc">[确认] 卡片 / 弹窗 / 抽屉圆角:按预期预览图加大(观察值 8px,44 处,antd borderRadiusLG)</td></tr><tr data-q="radius.md"><td><code>radius.md</code></td><td>dimension</td><td></td><td>8px</td><td class=""></td><td class="desc">[确认] 按钮 / 输入框圆角:按预期预览图加大(观察值 6px,226 处,antd borderRadius)</td></tr><tr data-q="radius.sm"><td><code>radius.sm</code></td><td>dimension</td><td></td><td>4px</td><td class=""></td><td class="desc">[观察] 标签 / 小控件圆角,72 处(antd borderRadiusSM)</td></tr><tr data-q="radius.xl"><td><code>radius.xl</code></td><td>dimension</td><td></td><td>16px</td><td class=""></td><td class="desc">[确认] 整块面板 / 大容器圆角(预期预览图)</td></tr><tr data-q="radius.xs"><td><code>radius.xs</code></td><td>dimension</td><td></td><td>4px</td><td class=""></td><td class="desc">[确认] 勾选框等 ≤ 16px 的小元素圆角:antd 勾选框 borderRadiusSM 4px(与 radius.sm 同值;用户 2026-10-14 确认)</td></tr><tr data-q="shadow.blur.1"><td><code>shadow.blur.1</code></td><td>dimension</td><td></td><td>16px</td><td class=""></td><td class="desc">[确认] 卡片阴影模糊(原 2px);卡片已不投影,仍被主按钮按下的内阴影借用</td></tr><tr data-q="shadow.blur.2"><td><code>shadow.blur.2</code></td><td>dimension</td><td></td><td>16px</td><td class=""></td><td class="desc">[观察] 浮层 / 弹窗阴影模糊(弹窗与浮层同式)</td></tr><tr data-q="shadow.blur.3"><td><code>shadow.blur.3</code></td><td>dimension</td><td></td><td>32px</td><td class=""></td><td class="desc">[确认] 大投影模糊:图表提示气泡,比浮层 / 弹窗的 shadow.blur.2 大一档(用户 2026-10-12:hover 浮窗用白色底 + 大投影)</td></tr><tr data-q="shadow.y.1"><td><code>shadow.y.1</code></td><td>dimension</td><td></td><td>4px</td><td class=""></td><td class="desc">[确认] 卡片阴影 y(按预期预览图加大,原 1px);卡片已不投影,仍被主按钮按下的内阴影借用</td></tr><tr data-q="shadow.y.2"><td><code>shadow.y.2</code></td><td>dimension</td><td></td><td>6px</td><td class=""></td><td class="desc">[观察] 浮层 / 弹窗阴影 y:boxShadowSecondary 第一层(原式三层 0 6px 16px 0 / 0 3px 6px -4px / 0 9px 28px 8px)</td></tr><tr data-q="shadow.y.3"><td><code>shadow.y.3</code></td><td>dimension</td><td></td><td>12px</td><td class=""></td><td class="desc">[确认] 大投影 y:图表提示气泡,比浮层 / 弹窗的 shadow.y.2 大一档(用户 2026-10-12:hover 浮窗用白色底 + 大投影)</td></tr><tr data-q="size.avatar.md"><td><code>size.avatar.md</code></td><td>dimension</td><td></td><td>32px</td><td class=""></td><td class="desc">[确认] 头像 32px(antd Avatar default)(2026-10-09 用户确认)</td></tr><tr data-q="size.avatar.sm"><td><code>size.avatar.sm</code></td><td>dimension</td><td></td><td>24px</td><td class=""></td><td class="desc">[确认] 小头像 24px(antd Avatar small)(2026-10-09 用户确认)</td></tr><tr data-q="size.control.lg"><td><code>size.control.lg</code></td><td>dimension</td><td></td><td>40px</td><td class=""></td><td class="desc">[确认] 大控件 40px(antd controlHeightLG;演示站未出现)(2026-10-09 用户确认)</td></tr><tr data-q="size.control.md"><td><code>size.control.md</code></td><td>dimension</td><td></td><td>32px</td><td class=""></td><td class="desc">[观察] 按钮 / 输入框 32px,11 处(antd controlHeight)</td></tr><tr data-q="size.control.sm"><td><code>size.control.sm</code></td><td>dimension</td><td></td><td>24px</td><td class=""></td><td class="desc">[观察] 小按钮 / 分页项 24px,8 处(antd controlHeightSM)</td></tr><tr data-q="size.control.touch"><td><code>size.control.touch</code></td><td>dimension</td><td></td><td>40px</td><td class=""></td><td class="desc">[确认] 触屏命中区 40px(pointer: coarse;取 antd controlHeightLG)(2026-10-09 用户确认)</td></tr><tr data-q="size.control.xs"><td><code>size.control.xs</code></td><td>dimension</td><td></td><td>22px</td><td class=""></td><td class="desc">[观察] 标签 / 状态徽标高 22px,20 处</td></tr><tr data-q="size.drawer"><td><code>size.drawer</code></td><td>dimension</td><td></td><td>600px</td><td class=""></td><td class="desc">[观察] 抽屉宽 600px(演示站详情抽屉)</td></tr><tr data-q="size.form.label"><td><code>size.form.label</code></td><td>dimension</td><td></td><td>120px</td><td class=""></td><td class="desc">[观察] 横向表单标签列宽 120px(Pro 查询表格 search.labelWidth 源码)</td></tr><tr data-q="size.form.max"><td><code>size.form.max</code></td><td>dimension</td><td></td><td>600px</td><td class=""></td><td class="desc">[观察] 单列表单最大宽 600px(Pro 基础表单源码 maxWidth: 600,竖向布局)</td></tr><tr data-q="size.hit-min"><td><code>size.hit-min</code></td><td>dimension</td><td></td><td>24px</td><td class=""></td><td class="desc">[确认] 图标控件最小命中区(2026-10-09 用户确认)</td></tr><tr data-q="size.icon.2xl"><td><code>size.icon.2xl</code></td><td>dimension</td><td></td><td>24px</td><td class=""></td><td class="desc">[确认] 大图标 24px(antd 带描述的 Alert 图标)(2026-10-09 用户确认)</td></tr><tr data-q="size.icon.lg"><td><code>size.icon.lg</code></td><td>dimension</td><td></td><td>16px</td><td class=""></td><td class="desc">[观察] 图标 16px,14 处</td></tr><tr data-q="size.icon.md"><td><code>size.icon.md</code></td><td>dimension</td><td></td><td>14px</td><td class=""></td><td class="desc">[观察] 图标 14px,98 处(与正文同高)</td></tr><tr data-q="size.icon.sm"><td><code>size.icon.sm</code></td><td>dimension</td><td></td><td>12px</td><td class=""></td><td class="desc">[观察] 图标 12px,28 处</td></tr><tr data-q="size.icon.xl"><td><code>size.icon.xl</code></td><td>dimension</td><td></td><td>20px</td><td class=""></td><td class="desc">[观察] 图标 20px,3 处</td></tr><tr data-q="size.icon.xs"><td><code>size.icon.xs</code></td><td>dimension</td><td></td><td>11px</td><td class=""></td><td class="desc">[观察] 图标 11px(排序 / 下拉箭头)</td></tr><tr data-q="size.illustration"><td><code>size.illustration</code></td><td>dimension</td><td></td><td>100px</td><td class=""></td><td class="desc">[确认] 空状态 / 结果页插图 100px(antd Empty 图片高)(2026-10-09 用户确认)</td></tr><tr data-q="size.modal.md"><td><code>size.modal.md</code></td><td>dimension</td><td></td><td>520px</td><td class=""></td><td class="desc">[确认] 表单弹窗宽 520px(antd Modal 默认;演示站「新建规则」两字段弹窗为 400px)(2026-10-09 用户确认)</td></tr><tr data-q="size.modal.sm"><td><code>size.modal.sm</code></td><td>dimension</td><td></td><td>416px</td><td class=""></td><td class="desc">[确认] 确认弹窗宽 416px(antd Modal.confirm 默认)(2026-10-09 用户确认)</td></tr><tr data-q="size.search"><td><code>size.search</code></td><td>dimension</td><td></td><td>216px</td><td class=""></td><td class="desc">[确认] 筛选栏搜索框宽 216px(ProForm 宽度档 sm)(2026-10-09 用户确认)</td></tr><tr data-q="size.sidebar"><td><code>size.sidebar</code></td><td>dimension</td><td></td><td>208px</td><td class=""></td><td class="desc">[确认] 侧栏宽 208px:用户决定收窄(2026-10-09,侧栏内容不多;原为 ProLayout siderWidth 256px)。208 是 Ant Design Pro 早期默认 siderWidth,正好放下现有最宽的侧栏内容(预览页 207px)</td></tr><tr data-q="size.sidebar-collapsed"><td><code>size.sidebar-collapsed</code></td><td>dimension</td><td></td><td>64px</td><td class=""></td><td class="desc">[观察] 侧栏折叠宽 64px(ProComponents SiderMenu 源码 collapsedWidth 默认值)</td></tr><tr data-q="size.topbar"><td><code>size.topbar</code></td><td>dimension</td><td></td><td>56px</td><td class=""></td><td class="desc">[观察] 顶栏高 56px(ProLayout heightLayoutHeader)</td></tr><tr data-q="size.viewport.mobile"><td><code>size.viewport.mobile</code></td><td>dimension</td><td></td><td>768px</td><td class=""></td><td class="desc">[观察] 断点 768px,42 次(antd md)</td></tr><tr data-q="size.viewport.narrow"><td><code>size.viewport.narrow</code></td><td>dimension</td><td></td><td>992px</td><td class=""></td><td class="desc">[观察] 断点 992px,18 次(antd lg)</td></tr><tr data-q="space.card"><td><code>space.card</code></td><td>dimension</td><td><code>{spacing.6}</code></td><td>24px</td><td class=""></td><td class="desc">[确认] antd Card 内边距 24px(design.md);演示站数据卡为 20px 24px(2026-10-09 用户确认)</td></tr><tr data-q="space.gutter"><td><code>space.gutter</code></td><td>dimension</td><td><code>{spacing.6}</code></td><td>24px</td><td class=""></td><td class="desc">[确认] 内容区四周留白 24px,与卡片内边距 space.card 同宽(用户 2026-10-14 与 space.stack 一起收紧);原为 ProLayout 页面容器左右内边距 40px(上下 32px)</td></tr><tr data-q="space.inline"><td><code>space.inline</code></td><td>dimension</td><td><code>{spacing.2}</code></td><td>8px</td><td class=""></td><td class="desc">[观察] 最常见的小 gap 8px,378 处</td></tr><tr data-q="space.stack"><td><code>space.stack</code></td><td>dimension</td><td><code>{spacing.4}</code></td><td>16px</td><td class=""></td><td class="desc">[确认] 板块之间 16px,比卡片内边距 space.card 窄一档(用户 2026-10-14:板块间距稍微紧凑一些,三种收法对比后选定);原为演示站工作台卡片栅格 gutter 24px(103 处)</td></tr><tr data-q="spacing.0-5"><td><code>spacing.0-5</code></td><td>dimension</td><td></td><td>2px</td><td class=""></td><td class="desc">[观察] 间距阶梯 2px(4px 网格)</td></tr><tr data-q="spacing.1"><td><code>spacing.1</code></td><td>dimension</td><td></td><td>4px</td><td class=""></td><td class="desc">[观察] 间距阶梯 4px(4px 网格)</td></tr><tr data-q="spacing.1-5"><td><code>spacing.1-5</code></td><td>dimension</td><td></td><td>6px</td><td class=""></td><td class="desc">[观察] 间距阶梯 6px(4px 网格)</td></tr><tr data-q="spacing.10"><td><code>spacing.10</code></td><td>dimension</td><td></td><td>40px</td><td class=""></td><td class="desc">[观察] 间距阶梯 40px(4px 网格)</td></tr><tr data-q="spacing.2"><td><code>spacing.2</code></td><td>dimension</td><td></td><td>8px</td><td class=""></td><td class="desc">[观察] 间距阶梯 8px(4px 网格)</td></tr><tr data-q="spacing.2-5"><td><code>spacing.2-5</code></td><td>dimension</td><td></td><td>10px</td><td class=""></td><td class="desc">[观察] 10px 间距(导航图标与文字间距、筹码 / 批量条内边距)</td></tr><tr data-q="spacing.3"><td><code>spacing.3</code></td><td>dimension</td><td></td><td>12px</td><td class=""></td><td class="desc">[观察] 间距阶梯 12px(4px 网格)</td></tr><tr data-q="spacing.3-5"><td><code>spacing.3-5</code></td><td>dimension</td><td></td><td>14px</td><td class=""></td><td class="desc">[确认] 14px 间距:配方步长(导航分组上内边距、表单底栏、分段项),演示站无对应值(用户 2026-10-14 确认)</td></tr><tr data-q="spacing.4"><td><code>spacing.4</code></td><td>dimension</td><td></td><td>16px</td><td class=""></td><td class="desc">[观察] 间距阶梯 16px(4px 网格)</td></tr><tr data-q="spacing.5"><td><code>spacing.5</code></td><td>dimension</td><td></td><td>20px</td><td class=""></td><td class="desc">[观察] 间距阶梯 20px(4px 网格)</td></tr><tr data-q="spacing.6"><td><code>spacing.6</code></td><td>dimension</td><td></td><td>24px</td><td class=""></td><td class="desc">[观察] 间距阶梯 24px(4px 网格)</td></tr><tr data-q="spacing.8"><td><code>spacing.8</code></td><td>dimension</td><td></td><td>32px</td><td class=""></td><td class="desc">[观察] 间距阶梯 32px(4px 网格)</td></tr><tr data-q="stroke-width.1-4"><td><code>stroke-width.1-4</code></td><td>dimension</td><td></td><td>1.4px</td><td class=""></td><td class="desc">[确认] 图标描边 1.4px:屏幕上的实际粗细,不随图标尺寸缩放(用户 2026-10-12:icon 描边粗细改为 1.4px)</td></tr><tr data-q="stroke-width.3"><td><code>stroke-width.3</code></td><td>number</td><td></td><td>3</td><td class=""></td><td class="desc">[确认] 0.2.0 起不再被引用(icon.stroke.width 改为屏幕上的 1.4px,见 stroke-width.1-4),按版本策略留到下个大版本再删。原为 IconPark 48 网格里的描边 3,14px 图标上约 0.9px(2026-10-09 用户确认)</td></tr><tr data-q="table.cell.padding-x"><td><code>table.cell.padding-x</code></td><td>dimension</td><td><code>{spacing.2}</code></td><td>8px</td><td class=""></td><td class="desc">[观察] th / td 横向 8px</td></tr><tr data-q="table.cell.padding-y"><td><code>table.cell.padding-y</code></td><td>dimension</td><td><code>{spacing.3}</code></td><td>12px</td><td class=""></td><td class="desc">[观察] th / td 纵向 12px(ProTable middle)</td></tr><tr data-q="text.body-sm.size"><td><code>text.body-sm.size</code></td><td>dimension</td><td><code>{font.size.sm}</code></td><td>12px</td><td class=""></td><td class="desc">[观察] 12px</td></tr><tr data-q="text.body.line-height"><td><code>text.body.line-height</code></td><td>number</td><td><code>{font.line-height.normal}</code></td><td>1.5714</td><td class=""></td><td class="desc">[观察] 22 / 14</td></tr><tr data-q="text.body.size"><td><code>text.body.size</code></td><td>dimension</td><td><code>{font.size.md}</code></td><td>14px</td><td class=""></td><td class="desc">[观察] 承载最多文字的字号 14px</td></tr><tr data-q="text.caption.size"><td><code>text.caption.size</code></td><td>dimension</td><td><code>{font.size.sm}</code></td><td>12px</td><td class=""></td><td class="desc">[确认] 最小字号 12px(国内中后台下限 / antd fontSizeSM);演示站 11px 只见于页脚版本号等 8 处(2026-10-09 用户确认)</td></tr><tr data-q="text.display.family"><td><code>text.display.family</code></td><td>fontFamily</td><td><code>{font.family.numeric}</code></td><td>D-DIN-PRO, D-DIN, Bahnschrift, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif</td><td class=""></td><td class="desc">[确认] 数据大字(统计卡、KPI、el-statistic、状态条数字)用 D-DIN 系:装了 D-DIN-PRO 用它,没装用随桥接分发的 D-DIN(用户 2026-10-09 指定 D-DIN-PRO,原为正文字体栈;2026-10-26 起随系统分发 D-DIN)</td></tr><tr data-q="text.display.line-height"><td><code>text.display.line-height</code></td><td>number</td><td><code>{font.line-height.display}</code></td><td>1.2667</td><td class=""></td><td class="desc">[确认] 38 / 30(2026-10-09 用户确认)</td></tr><tr data-q="text.display.size"><td><code>text.display.size</code></td><td>dimension</td><td><code>{font.size.3xl}</code></td><td>30px</td><td class=""></td><td class="desc">[观察] 工作台统计数字 30px</td></tr><tr data-q="text.display.tracking"><td><code>text.display.tracking</code></td><td>dimension</td><td><code>{font.letter-spacing.none}</code></td><td>0em</td><td class=""></td><td class="desc">[确认] 数据大字不调字距(2026-10-09 用户确认)</td></tr><tr data-q="text.display.weight"><td><code>text.display.weight</code></td><td>fontWeight</td><td><code>{font.weight.semibold}</code></td><td>600</td><td class=""></td><td class="desc">[确认] KPI 大数字加粗(预期预览图);antd 只用 400 / 600,取 600</td></tr><tr data-q="text.heading.line-height"><td><code>text.heading.line-height</code></td><td>number</td><td><code>{font.line-height.heading}</code></td><td>1.3333</td><td class=""></td><td class="desc">[确认] 32 / 24(2026-10-09 用户确认)</td></tr><tr data-q="text.heading.size"><td><code>text.heading.size</code></td><td>dimension</td><td><code>{font.size.2xl}</code></td><td>24px</td><td class=""></td><td class="desc">[确认] 页头大标题 24px(antd headline-md)(2026-10-09 用户确认)</td></tr><tr data-q="text.hero.line-height"><td><code>text.hero.line-height</code></td><td>number</td><td><code>{font.line-height.hero}</code></td><td>1.2105</td><td class=""></td><td class="desc">[确认] 46 / 38(2026-10-09 用户确认)</td></tr><tr data-q="text.hero.size"><td><code>text.hero.size</code></td><td>dimension</td><td><code>{font.size.4xl}</code></td><td>38px</td><td class=""></td><td class="desc">[确认] 结果页 / 登录页大字 38px(antd display-lg)(2026-10-09 用户确认)</td></tr><tr data-q="text.link.decoration"><td><code>text.link.decoration</code></td><td>string</td><td><code>{decoration.none}</code></td><td>none</td><td class=""></td><td class="desc">[观察] 链接不加下划线,靠金色深一档区分(对白 5.27:1)</td></tr><tr data-q="text.link.style"><td><code>text.link.style</code></td><td>string</td><td><code>{font.style.normal}</code></td><td>normal</td><td class=""></td><td class="desc">[观察] 链接不用斜体(Citrine 内容型链接为斜体)</td></tr><tr data-q="text.numeric.family"><td><code>text.numeric.family</code></td><td>fontFamily</td><td><code>{font.family.body}</code></td><td>-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji</td><td class=""></td><td class="desc">[确认] 小号数字数据(表格金额与日期、百分比、涨跌、图表数值、页码)用正文字体,配 text.numeric.variant 等宽数字:用户 2026-10-09 先定 D-DIN-PRO,同日看过 12px 表格后改回正文字体(D-DIN-PRO 窄体细笔画在中文旁显得小而轻);数据大字仍用 D-DIN-PRO(text.display.family);单号、代码用等宽字体</td></tr><tr data-q="text.numeric.variant"><td><code>text.numeric.variant</code></td><td>string</td><td><code>{font.numeric.tabular}</code></td><td>tabular-nums</td><td class=""></td><td class="desc">[确认] 金额 / 单号 / 表格数字用 tabular-nums:正文字体有等宽数字,金额列小数点上下对齐;数据大字的 D-DIN-PRO 与 D-DIN 都没有等宽数字,这条对它们不生效(2026-10-09 用户确认)</td></tr><tr data-q="text.paragraph.line-height"><td><code>text.paragraph.line-height</code></td><td>number</td><td><code>{font.line-height.normal}</code></td><td>1.5714</td><td class=""></td><td class="desc">[确认] 成段说明同正文行高(antd)(2026-10-09 用户确认)</td></tr><tr data-q="text.small.size"><td><code>text.small.size</code></td><td>dimension</td><td><code>{font.size.sm}</code></td><td>12px</td><td class=""></td><td class="desc">[观察] 12px</td></tr><tr data-q="text.title-sm.size"><td><code>text.title-sm.size</code></td><td>dimension</td><td><code>{font.size.lg}</code></td><td>16px</td><td class=""></td><td class="desc">[观察] 卡片标题 16px</td></tr><tr data-q="text.title.size"><td><code>text.title.size</code></td><td>dimension</td><td><code>{font.size.xl}</code></td><td>20px</td><td class=""></td><td class="desc">[观察] 页面标题 20px</td></tr><tr data-q="text.tracking.caps"><td><code>text.tracking.caps</code></td><td>dimension</td><td><code>{font.letter-spacing.caps}</code></td><td>0.06em</td><td class=""></td><td class="desc">[确认] 分区标签(.section-label,次要分组)的大写小字字距(预期预览图);中文标签只取小号、半粗、次要色。卡片标题 2026-10-13 起改为 14px 深色标题、看板板块标题 2026-10-14 起改为 16px 的 H2(用户指定),都不再用它</td></tr><tr data-q="text.weight.brand"><td><code>text.weight.brand</code></td><td>fontWeight</td><td><code>{font.weight.semibold}</code></td><td>600</td><td class=""></td><td class="desc">[确认] 品牌字重 600(antd 不用 700)(2026-10-09 用户确认)</td></tr><tr data-q="text.weight.label"><td><code>text.weight.label</code></td><td>fontWeight</td><td><code>{font.weight.regular}</code></td><td>400</td><td class=""></td><td class="desc">[观察] 按钮 / 表单标签 400(antd 只用 400 与 600)</td></tr><tr data-q="text.weight.logo"><td><code>text.weight.logo</code></td><td>fontWeight</td><td><code>{font.weight.semibold}</code></td><td>600</td><td class=""></td><td class="desc">[观察] 顶栏 Logo 文字 18px / 600</td></tr><tr data-q="text.weight.nav"><td><code>text.weight.nav</code></td><td>fontWeight</td><td><code>{font.weight.medium}</code></td><td>500</td><td class=""></td><td class="desc">[确认] 导航菜单(侧栏、横向菜单)文字 500:用户 2026-10-15 指定侧栏文字加粗一级(原随正文 400);当前项同字重,不额外加粗。Windows 的微软雅黑没有 500,按字体匹配规则显示成 400</td></tr><tr data-q="text.weight.strong"><td><code>text.weight.strong</code></td><td>fontWeight</td><td><code>{font.weight.semibold}</code></td><td>600</td><td class=""></td><td class="desc">[观察] 表头 / 标题 600</td></tr><tr data-q="z.100"><td><code>z.100</code></td><td>number</td><td></td><td>100</td><td class=""></td><td class="desc">[观察] 顶栏 / 固定层 z-index 100,8 处</td></tr><tr data-q="z.1000"><td><code>z.1000</code></td><td>number</td><td></td><td>1000</td><td class=""></td><td class="desc">[观察] 弹窗 / 抽屉 z-index 1000,5 处(antd zIndexPopupBase)</td></tr><tr data-q="z.1010"><td><code>z.1010</code></td><td>number</td><td></td><td>1010</td><td class=""></td><td class="desc">[观察] 全局提示 z-index 1010,1 处(antd message)</td></tr><tr data-q="z.1050"><td><code>z.1050</code></td><td>number</td><td></td><td>1050</td><td class=""></td><td class="desc">[确认] 下拉 / 气泡 z-index 1050(antd Dropdown:高于弹窗,弹窗里的下拉才能展开)(2026-10-09 用户确认)</td></tr></tbody></table>
|
|
120
|
+
</section>
|
|
121
|
+
</main>
|
|
122
|
+
<script>
|
|
123
|
+
for (const button of document.querySelectorAll("header button[data-theme-id]")) {
|
|
124
|
+
button.addEventListener("click", () => {
|
|
125
|
+
const html = document.documentElement;
|
|
126
|
+
const { themeId, kind, attribute } = button.dataset;
|
|
127
|
+
if (kind === "class") html.classList.toggle(themeId);
|
|
128
|
+
else if (kind === "data-attribute") html.getAttribute(attribute) === themeId ? html.removeAttribute(attribute) : html.setAttribute(attribute, themeId);
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
document.getElementById("q").addEventListener("input", (event) => {
|
|
132
|
+
const needle = event.target.value.trim().toLowerCase();
|
|
133
|
+
for (const row of document.querySelectorAll("#rows tr")) row.hidden = needle ? !row.dataset.q.includes(needle) : false;
|
|
134
|
+
});
|
|
135
|
+
</script>
|
|
136
|
+
</body>
|
|
137
|
+
</html>
|