@deernova/style 0.1.0 → 0.3.0

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.
Files changed (215) hide show
  1. package/README.md +8 -6
  2. package/bin/cli.mjs +212 -29
  3. package/package.json +3 -4
  4. package/skill/SKILL.md +91 -21
  5. package/skill/assets/DeernovaTokens.swift +376 -0
  6. package/skill/assets/screens/iphone-button-sizes-dark.png +0 -0
  7. package/skill/assets/screens/iphone-button-sizes-light.png +0 -0
  8. package/skill/assets/screens/iphone-screens-dark.png +0 -0
  9. package/skill/assets/screens/iphone-screens-light.png +0 -0
  10. package/skill/assets/screens/mac-window-dark.png +0 -0
  11. package/skill/assets/screens/mac-window-light.png +0 -0
  12. package/skill/assets/tailwind.css +106 -0
  13. package/skill/assets/tokens.css +533 -0
  14. package/skill/assets/tokens.json +1686 -0
  15. package/skill/manifest.json +2 -22
  16. package/skill/references/components/banner.md +95 -0
  17. package/skill/references/components/button.md +181 -0
  18. package/skill/references/components/card.md +89 -0
  19. package/skill/references/components/code-block.md +77 -0
  20. package/skill/references/components/composer.md +206 -0
  21. package/skill/references/components/empty-state.md +63 -0
  22. package/skill/references/components/glass-controls.md +127 -0
  23. package/skill/references/components/list.md +130 -0
  24. package/skill/references/components/message.md +94 -0
  25. package/skill/references/components/segmented.md +79 -0
  26. package/skill/references/components/sheet.md +84 -0
  27. package/skill/references/components/sidebar.md +139 -0
  28. package/skill/references/components/step-row.md +135 -0
  29. package/skill/references/components/tag.md +86 -0
  30. package/skill/references/components/task-list.md +83 -0
  31. package/skill/references/components/text-field.md +86 -0
  32. package/skill/references/components/toolbar.md +139 -0
  33. package/skill/references/foundations/accessibility.md +27 -0
  34. package/skill/references/foundations/color.md +58 -0
  35. package/skill/references/foundations/elevation.md +17 -0
  36. package/skill/references/foundations/glass.md +36 -0
  37. package/skill/references/foundations/iconography.md +44 -0
  38. package/skill/references/foundations/motion.md +22 -0
  39. package/skill/references/foundations/radius.md +31 -0
  40. package/skill/references/foundations/spacing.md +38 -0
  41. package/skill/references/foundations/stroke.md +35 -0
  42. package/skill/references/foundations/typography.md +54 -0
  43. package/skill/references/foundations/writing.md +10 -0
  44. package/skill/references/review.md +26 -13
  45. package/skill/references/scenes/ios.md +61 -0
  46. package/skill/references/scenes/ipados.md +42 -0
  47. package/skill/references/scenes/macos.md +65 -0
  48. package/skill/references/scenes/swiftui.md +94 -0
  49. package/skill/references/scenes/web-marketing.md +32 -0
  50. package/skill/references/scenes/web.md +83 -0
  51. package/skill/references/tokens.md +441 -74
  52. package/skill/assets/design/README.md +0 -170
  53. package/skill/assets/design/components/Banner/README.md +0 -33
  54. package/skill/assets/design/components/Banner/preview.html +0 -26
  55. package/skill/assets/design/components/Button/README.md +0 -59
  56. package/skill/assets/design/components/Button/preview.html +0 -27
  57. package/skill/assets/design/components/Card/README.md +0 -31
  58. package/skill/assets/design/components/Card/preview.html +0 -24
  59. package/skill/assets/design/components/CodeBlock/README.md +0 -34
  60. package/skill/assets/design/components/CodeBlock/preview.html +0 -16
  61. package/skill/assets/design/components/Composer/README.md +0 -42
  62. package/skill/assets/design/components/Composer/preview.html +0 -28
  63. package/skill/assets/design/components/Cover/preview.html +0 -53
  64. package/skill/assets/design/components/EmptyState/README.md +0 -28
  65. package/skill/assets/design/components/EmptyState/preview.html +0 -16
  66. package/skill/assets/design/components/GlassControls/README.md +0 -43
  67. package/skill/assets/design/components/GlassControls/preview.html +0 -40
  68. package/skill/assets/design/components/ListGroup/README.md +0 -39
  69. package/skill/assets/design/components/ListGroup/preview.html +0 -22
  70. package/skill/assets/design/components/MacWindow/README.md +0 -27
  71. package/skill/assets/design/components/MacWindow/preview.html +0 -70
  72. package/skill/assets/design/components/Message/README.md +0 -31
  73. package/skill/assets/design/components/Message/preview.html +0 -21
  74. package/skill/assets/design/components/PhoneScreen/README.md +0 -25
  75. package/skill/assets/design/components/PhoneScreen/preview.html +0 -74
  76. package/skill/assets/design/components/Segmented/README.md +0 -21
  77. package/skill/assets/design/components/Segmented/preview.html +0 -21
  78. package/skill/assets/design/components/Sheet/README.md +0 -29
  79. package/skill/assets/design/components/Sheet/preview.html +0 -31
  80. package/skill/assets/design/components/Sidebar/README.md +0 -36
  81. package/skill/assets/design/components/Sidebar/preview.html +0 -20
  82. package/skill/assets/design/components/StepRow/README.md +0 -35
  83. package/skill/assets/design/components/StepRow/preview.html +0 -17
  84. package/skill/assets/design/components/Tag/README.md +0 -36
  85. package/skill/assets/design/components/Tag/preview.html +0 -22
  86. package/skill/assets/design/components/TextField/README.md +0 -29
  87. package/skill/assets/design/components/TextField/preview.html +0 -28
  88. package/skill/assets/design/components/bundle.css +0 -189
  89. package/skill/assets/design/design-system.json +0 -25
  90. package/skill/assets/design/images/Banner-dark.png +0 -0
  91. package/skill/assets/design/images/Banner-light.png +0 -0
  92. package/skill/assets/design/images/Button-dark.png +0 -0
  93. package/skill/assets/design/images/Button-light.png +0 -0
  94. package/skill/assets/design/images/Card-dark.png +0 -0
  95. package/skill/assets/design/images/Card-light.png +0 -0
  96. package/skill/assets/design/images/CodeBlock-dark.png +0 -0
  97. package/skill/assets/design/images/CodeBlock-light.png +0 -0
  98. package/skill/assets/design/images/Composer-dark.png +0 -0
  99. package/skill/assets/design/images/Composer-light.png +0 -0
  100. package/skill/assets/design/images/Cover-dark.png +0 -0
  101. package/skill/assets/design/images/Cover-light.png +0 -0
  102. package/skill/assets/design/images/EmptyState-dark.png +0 -0
  103. package/skill/assets/design/images/EmptyState-light.png +0 -0
  104. package/skill/assets/design/images/Example-iOSButtonsInPhone-dark.png +0 -0
  105. package/skill/assets/design/images/Example-iOSButtonsInPhone-light.png +0 -0
  106. package/skill/assets/design/images/GlassControls-dark.png +0 -0
  107. package/skill/assets/design/images/GlassControls-light.png +0 -0
  108. package/skill/assets/design/images/ListGroup-dark.png +0 -0
  109. package/skill/assets/design/images/ListGroup-light.png +0 -0
  110. package/skill/assets/design/images/MacWindow-dark.png +0 -0
  111. package/skill/assets/design/images/MacWindow-light.png +0 -0
  112. package/skill/assets/design/images/Message-dark.png +0 -0
  113. package/skill/assets/design/images/Message-light.png +0 -0
  114. package/skill/assets/design/images/PhoneScreen-dark.png +0 -0
  115. package/skill/assets/design/images/PhoneScreen-light.png +0 -0
  116. package/skill/assets/design/images/Segmented-dark.png +0 -0
  117. package/skill/assets/design/images/Segmented-light.png +0 -0
  118. package/skill/assets/design/images/Sheet-dark.png +0 -0
  119. package/skill/assets/design/images/Sheet-light.png +0 -0
  120. package/skill/assets/design/images/Sidebar-dark.png +0 -0
  121. package/skill/assets/design/images/Sidebar-light.png +0 -0
  122. package/skill/assets/design/images/StepRow-dark.png +0 -0
  123. package/skill/assets/design/images/StepRow-light.png +0 -0
  124. package/skill/assets/design/images/Tag-dark.png +0 -0
  125. package/skill/assets/design/images/Tag-light.png +0 -0
  126. package/skill/assets/design/images/TextField-dark.png +0 -0
  127. package/skill/assets/design/images/TextField-light.png +0 -0
  128. package/skill/assets/design/tokens.css +0 -187
  129. package/skill/assets/design/tokens.json +0 -142
  130. package/skill/references/components.md +0 -648
  131. package/skill/references/foundations.md +0 -170
  132. package/skill/references/native.md +0 -7
  133. package/skill/references/web.md +0 -11
  134. package/template/app.js +0 -7
  135. package/template/index.html +0 -1290
  136. package/template/manifest.json +0 -24
  137. package/template/project/README.md +0 -170
  138. package/template/project/components/Banner/README.md +0 -33
  139. package/template/project/components/Banner/preview.html +0 -26
  140. package/template/project/components/Button/README.md +0 -59
  141. package/template/project/components/Button/preview.html +0 -27
  142. package/template/project/components/Card/README.md +0 -31
  143. package/template/project/components/Card/preview.html +0 -24
  144. package/template/project/components/CodeBlock/README.md +0 -34
  145. package/template/project/components/CodeBlock/preview.html +0 -16
  146. package/template/project/components/Composer/README.md +0 -42
  147. package/template/project/components/Composer/preview.html +0 -28
  148. package/template/project/components/Cover/preview.html +0 -53
  149. package/template/project/components/EmptyState/README.md +0 -28
  150. package/template/project/components/EmptyState/preview.html +0 -16
  151. package/template/project/components/GlassControls/README.md +0 -43
  152. package/template/project/components/GlassControls/preview.html +0 -40
  153. package/template/project/components/ListGroup/README.md +0 -39
  154. package/template/project/components/ListGroup/preview.html +0 -22
  155. package/template/project/components/MacWindow/README.md +0 -27
  156. package/template/project/components/MacWindow/preview.html +0 -70
  157. package/template/project/components/Message/README.md +0 -31
  158. package/template/project/components/Message/preview.html +0 -21
  159. package/template/project/components/PhoneScreen/README.md +0 -25
  160. package/template/project/components/PhoneScreen/preview.html +0 -74
  161. package/template/project/components/Segmented/README.md +0 -21
  162. package/template/project/components/Segmented/preview.html +0 -21
  163. package/template/project/components/Sheet/README.md +0 -29
  164. package/template/project/components/Sheet/preview.html +0 -31
  165. package/template/project/components/Sidebar/README.md +0 -36
  166. package/template/project/components/Sidebar/preview.html +0 -20
  167. package/template/project/components/StepRow/README.md +0 -35
  168. package/template/project/components/StepRow/preview.html +0 -17
  169. package/template/project/components/Tag/README.md +0 -36
  170. package/template/project/components/Tag/preview.html +0 -22
  171. package/template/project/components/TextField/README.md +0 -29
  172. package/template/project/components/TextField/preview.html +0 -28
  173. package/template/project/components/bundle.css +0 -189
  174. package/template/project/design-system.json +0 -25
  175. package/template/project/images/Banner-dark.png +0 -0
  176. package/template/project/images/Banner-light.png +0 -0
  177. package/template/project/images/Button-dark.png +0 -0
  178. package/template/project/images/Button-light.png +0 -0
  179. package/template/project/images/Card-dark.png +0 -0
  180. package/template/project/images/Card-light.png +0 -0
  181. package/template/project/images/CodeBlock-dark.png +0 -0
  182. package/template/project/images/CodeBlock-light.png +0 -0
  183. package/template/project/images/Composer-dark.png +0 -0
  184. package/template/project/images/Composer-light.png +0 -0
  185. package/template/project/images/Cover-dark.png +0 -0
  186. package/template/project/images/Cover-light.png +0 -0
  187. package/template/project/images/EmptyState-dark.png +0 -0
  188. package/template/project/images/EmptyState-light.png +0 -0
  189. package/template/project/images/Example-iOSButtonsInPhone-dark.png +0 -0
  190. package/template/project/images/Example-iOSButtonsInPhone-light.png +0 -0
  191. package/template/project/images/GlassControls-dark.png +0 -0
  192. package/template/project/images/GlassControls-light.png +0 -0
  193. package/template/project/images/ListGroup-dark.png +0 -0
  194. package/template/project/images/ListGroup-light.png +0 -0
  195. package/template/project/images/MacWindow-dark.png +0 -0
  196. package/template/project/images/MacWindow-light.png +0 -0
  197. package/template/project/images/Message-dark.png +0 -0
  198. package/template/project/images/Message-light.png +0 -0
  199. package/template/project/images/PhoneScreen-dark.png +0 -0
  200. package/template/project/images/PhoneScreen-light.png +0 -0
  201. package/template/project/images/Segmented-dark.png +0 -0
  202. package/template/project/images/Segmented-light.png +0 -0
  203. package/template/project/images/Sheet-dark.png +0 -0
  204. package/template/project/images/Sheet-light.png +0 -0
  205. package/template/project/images/Sidebar-dark.png +0 -0
  206. package/template/project/images/Sidebar-light.png +0 -0
  207. package/template/project/images/StepRow-dark.png +0 -0
  208. package/template/project/images/StepRow-light.png +0 -0
  209. package/template/project/images/Tag-dark.png +0 -0
  210. package/template/project/images/Tag-light.png +0 -0
  211. package/template/project/images/TextField-dark.png +0 -0
  212. package/template/project/images/TextField-light.png +0 -0
  213. package/template/project/tokens.css +0 -187
  214. package/template/project/tokens.json +0 -142
  215. package/template/style.css +0 -1
@@ -0,0 +1,1686 @@
1
+ {
2
+ "name": "Deernova",
3
+ "version": 4,
4
+ "themes": [
5
+ {
6
+ "id": "light",
7
+ "name": "浅色"
8
+ },
9
+ {
10
+ "id": "dark",
11
+ "name": "深色"
12
+ }
13
+ ],
14
+ "densities": [
15
+ {
16
+ "id": "desktop",
17
+ "name": "桌面",
18
+ "scenes": "Web 应用 · macOS 内容区",
19
+ "note": "指针操作。tokens.css 的默认值:正文 15/24,控件 28,侧边栏行 32。macOS 的侧边栏、工具栏、菜单用系统控件和系统尺寸,自己画的内容区用这一档。"
20
+ },
21
+ {
22
+ "id": "touch",
23
+ "name": "触控",
24
+ "scenes": "iOS · iPadOS · Web 触屏",
25
+ "note": "手指操作。正文 17pt,按钮看起来 36pt,点击区域至少 44pt。"
26
+ },
27
+ {
28
+ "id": "comfortable",
29
+ "name": "舒展",
30
+ "scenes": "官网与文档",
31
+ "note": "以阅读为主。字号和留白更大,控件只用于少量导航。"
32
+ }
33
+ ],
34
+ "scenes": [
35
+ {
36
+ "id": "web",
37
+ "name": "Web 应用",
38
+ "density": "desktop",
39
+ "input": "指针",
40
+ "apply": "tokens.css 的默认值",
41
+ "reference": "references/scenes/web.md"
42
+ },
43
+ {
44
+ "id": "web-touch",
45
+ "name": "Web 触屏",
46
+ "density": "touch",
47
+ "input": "触摸",
48
+ "apply": "`@media (pointer: coarse)` 自动切换",
49
+ "reference": "references/scenes/web.md"
50
+ },
51
+ {
52
+ "id": "macos",
53
+ "name": "macOS",
54
+ "density": "desktop",
55
+ "input": "指针",
56
+ "apply": "系统控件用系统尺寸;内容区用 `DeernovaTokens.swift` 的 `#if os(macOS)`",
57
+ "reference": "references/scenes/macos.md"
58
+ },
59
+ {
60
+ "id": "ios",
61
+ "name": "iOS",
62
+ "density": "touch",
63
+ "input": "触摸",
64
+ "apply": "`DeernovaTokens.swift` 的 `#else`",
65
+ "reference": "references/scenes/ios.md"
66
+ },
67
+ {
68
+ "id": "ipados",
69
+ "name": "iPadOS",
70
+ "density": "touch",
71
+ "input": "触摸和指针",
72
+ "apply": "同 iOS;分栏布局另见场景说明",
73
+ "reference": "references/scenes/ipados.md"
74
+ },
75
+ {
76
+ "id": "marketing",
77
+ "name": "官网与文档",
78
+ "density": "comfortable",
79
+ "input": "指针",
80
+ "apply": "根元素加 `data-density=\"comfortable\"`",
81
+ "reference": "references/scenes/web-marketing.md"
82
+ }
83
+ ],
84
+ "palette": {
85
+ "note": "原始色板。名字里的数字是 HSL 亮度(0 黑,100 白)。只在 tokens.json 里被语义颜色引用,代码里不要直接用。",
86
+ "tokens": [
87
+ {
88
+ "name": "gray-100",
89
+ "value": "#ffffff"
90
+ },
91
+ {
92
+ "name": "gray-98",
93
+ "value": "#fafafa"
94
+ },
95
+ {
96
+ "name": "gray-96",
97
+ "value": "#f5f5f5"
98
+ },
99
+ {
100
+ "name": "gray-93",
101
+ "value": "#ededed"
102
+ },
103
+ {
104
+ "name": "gray-92",
105
+ "value": "#ebebeb"
106
+ },
107
+ {
108
+ "name": "gray-91",
109
+ "value": "#e8e8e8"
110
+ },
111
+ {
112
+ "name": "gray-89",
113
+ "value": "#e3e3e3"
114
+ },
115
+ {
116
+ "name": "gray-64",
117
+ "value": "#a3a3a3"
118
+ },
119
+ {
120
+ "name": "gray-55",
121
+ "value": "#8c8c8c"
122
+ },
123
+ {
124
+ "name": "gray-54",
125
+ "value": "#8a8a8a"
126
+ },
127
+ {
128
+ "name": "gray-45",
129
+ "value": "#737373"
130
+ },
131
+ {
132
+ "name": "gray-40",
133
+ "value": "#666666"
134
+ },
135
+ {
136
+ "name": "gray-32",
137
+ "value": "#525252"
138
+ },
139
+ {
140
+ "name": "gray-18",
141
+ "value": "#2f2f2f"
142
+ },
143
+ {
144
+ "name": "gray-15",
145
+ "value": "#252525"
146
+ },
147
+ {
148
+ "name": "gray-11",
149
+ "value": "#1c1c1c"
150
+ },
151
+ {
152
+ "name": "gray-9",
153
+ "value": "#171717"
154
+ },
155
+ {
156
+ "name": "gray-7",
157
+ "value": "#111111"
158
+ },
159
+ {
160
+ "name": "teal-90",
161
+ "value": "#ddeeec"
162
+ },
163
+ {
164
+ "name": "teal-59",
165
+ "value": "#6cc3b4"
166
+ },
167
+ {
168
+ "name": "teal-27",
169
+ "value": "#1f6b66"
170
+ },
171
+ {
172
+ "name": "teal-15",
173
+ "value": "#183230"
174
+ },
175
+ {
176
+ "name": "amber-89",
177
+ "value": "#f5ead3"
178
+ },
179
+ {
180
+ "name": "amber-61",
181
+ "value": "#e2b054"
182
+ },
183
+ {
184
+ "name": "amber-29",
185
+ "value": "#8a5a0b"
186
+ },
187
+ {
188
+ "name": "amber-16",
189
+ "value": "#3a2e17"
190
+ },
191
+ {
192
+ "name": "crimson-93",
193
+ "value": "#f7e1e4"
194
+ },
195
+ {
196
+ "name": "crimson-71",
197
+ "value": "#f07a8a"
198
+ },
199
+ {
200
+ "name": "crimson-42",
201
+ "value": "#b0283f"
202
+ },
203
+ {
204
+ "name": "crimson-18",
205
+ "value": "#3d2027"
206
+ },
207
+ {
208
+ "name": "blue-92",
209
+ "value": "#e1ebf3"
210
+ },
211
+ {
212
+ "name": "blue-69",
213
+ "value": "#82b4dc"
214
+ },
215
+ {
216
+ "name": "blue-35",
217
+ "value": "#2c5f86"
218
+ },
219
+ {
220
+ "name": "blue-17",
221
+ "value": "#1d2c3a"
222
+ }
223
+ ]
224
+ },
225
+ "color": {
226
+ "note": "语义颜色,按主题取值。代码里只用这些名字。",
227
+ "tokens": [
228
+ {
229
+ "name": "canvas",
230
+ "value": {
231
+ "light": "{gray-96}",
232
+ "dark": "{gray-9}"
233
+ },
234
+ "usage": "窗口底色、Web 应用的内容区、分组列表的底色。最底层的纸面。"
235
+ },
236
+ {
237
+ "name": "surface",
238
+ "value": {
239
+ "light": "{gray-98}",
240
+ "dark": "{gray-11}"
241
+ },
242
+ "usage": "卡片、侧边栏(比内容区亮一层)。"
243
+ },
244
+ {
245
+ "name": "surface-raised",
246
+ "value": {
247
+ "light": "{gray-100}",
248
+ "dark": "{gray-15}"
249
+ },
250
+ "usage": "输入框、Composer、用户消息气泡、分组列表、弹出层。最亮的纸面。"
251
+ },
252
+ {
253
+ "name": "surface-sunken",
254
+ "value": {
255
+ "light": "{gray-92}",
256
+ "dark": "{gray-7}"
257
+ },
258
+ "usage": "代码块、展开的步骤详情。凹下去的纸面。"
259
+ },
260
+ {
261
+ "name": "ink",
262
+ "value": {
263
+ "light": "{gray-9}",
264
+ "dark": "{gray-93}"
265
+ },
266
+ "usage": "正文与标题,在四种纸面上不低于 13:1。"
267
+ },
268
+ {
269
+ "name": "ink-secondary",
270
+ "value": {
271
+ "light": "{gray-32}",
272
+ "dark": "{gray-64}"
273
+ },
274
+ "usage": "次要文字、说明、列表的值、未选中的图标,在四种纸面上不低于 6:1。"
275
+ },
276
+ {
277
+ "name": "ink-tertiary",
278
+ "value": {
279
+ "light": "{gray-40}",
280
+ "dark": "{gray-55}"
281
+ },
282
+ "usage": "占位符、时间戳、计数、分组标题,在四种纸面上不低于 4.5:1。"
283
+ },
284
+ {
285
+ "name": "line",
286
+ "value": {
287
+ "light": "{gray-89}",
288
+ "dark": "{gray-18}"
289
+ },
290
+ "usage": "分隔线、卡片描边、按钮描边。装饰性,不承载信息。"
291
+ },
292
+ {
293
+ "name": "line-control",
294
+ "value": {
295
+ "light": "{gray-54}",
296
+ "dark": "{gray-45}"
297
+ },
298
+ "usage": "输入框边框、拖拽条、链接下划线。在 canvas、surface、surface-raised 上不低于 3:1。"
299
+ },
300
+ {
301
+ "name": "accent",
302
+ "value": "{ink}",
303
+ "usage": "强调:主按钮填充、选中指示、焦点环。就是墨色本身,浅色主题是黑,深色主题是白。"
304
+ },
305
+ {
306
+ "name": "accent-soft",
307
+ "value": {
308
+ "light": "{gray-91}",
309
+ "dark": "{gray-18}"
310
+ },
311
+ "usage": "强调的浅底:列表图标底、输入框聚焦光晕。上面的文字用 ink。"
312
+ },
313
+ {
314
+ "name": "on-accent",
315
+ "value": {
316
+ "light": "{gray-100}",
317
+ "dark": "{gray-9}"
318
+ },
319
+ "usage": "accent 填充上的文字和图标:浅色主题白字,深色主题黑字。"
320
+ },
321
+ {
322
+ "name": "focus-ring",
323
+ "value": "{accent}",
324
+ "usage": "键盘焦点环:stroke-focus 宽的实线,外偏移 focus-offset。"
325
+ },
326
+ {
327
+ "name": "success",
328
+ "value": {
329
+ "light": "{teal-27}",
330
+ "dark": "{teal-59}"
331
+ },
332
+ "usage": "成功、已完成、已同步、开关打开。作为文字用在纸面和 success-soft 上。"
333
+ },
334
+ {
335
+ "name": "success-soft",
336
+ "value": {
337
+ "light": "{teal-90}",
338
+ "dark": "{teal-15}"
339
+ },
340
+ "usage": "成功状态的浅底(标签、横幅)。"
341
+ },
342
+ {
343
+ "name": "warning",
344
+ "value": {
345
+ "light": "{amber-29}",
346
+ "dark": "{amber-61}"
347
+ },
348
+ "usage": "需要注意但不阻断:额度将用完、网络较慢。"
349
+ },
350
+ {
351
+ "name": "warning-soft",
352
+ "value": {
353
+ "light": "{amber-89}",
354
+ "dark": "{amber-16}"
355
+ },
356
+ "usage": "警告状态的浅底。"
357
+ },
358
+ {
359
+ "name": "danger",
360
+ "value": {
361
+ "light": "{crimson-42}",
362
+ "dark": "{crimson-71}"
363
+ },
364
+ "usage": "错误、失败、删除。永远同时配图标或文字。"
365
+ },
366
+ {
367
+ "name": "danger-soft",
368
+ "value": {
369
+ "light": "{crimson-93}",
370
+ "dark": "{crimson-18}"
371
+ },
372
+ "usage": "错误状态的浅底、危险按钮的底色。"
373
+ },
374
+ {
375
+ "name": "info",
376
+ "value": {
377
+ "light": "{blue-35}",
378
+ "dark": "{blue-69}"
379
+ },
380
+ "usage": "中性提示。"
381
+ },
382
+ {
383
+ "name": "info-soft",
384
+ "value": {
385
+ "light": "{blue-92}",
386
+ "dark": "{blue-17}"
387
+ },
388
+ "usage": "提示状态的浅底。"
389
+ },
390
+ {
391
+ "name": "fill-hover",
392
+ "value": {
393
+ "light": "#0000000a",
394
+ "dark": "#ffffff0f"
395
+ },
396
+ "usage": "悬停底色,叠在任何纸面上(列表行、文字按钮、侧边栏项)。"
397
+ },
398
+ {
399
+ "name": "fill-selected",
400
+ "value": {
401
+ "light": "#00000017",
402
+ "dark": "#ffffff26"
403
+ },
404
+ "usage": "选中底色:侧边栏当前项、分段控件底槽、次按钮、中性标签底。比悬停明显,一眼能看出当前在哪。"
405
+ },
406
+ {
407
+ "name": "knob",
408
+ "value": {
409
+ "light": "{gray-100}",
410
+ "dark": "{gray-100}"
411
+ },
412
+ "usage": "开关的圆钮,两套主题都是白色,与系统一致。"
413
+ },
414
+ {
415
+ "name": "scrim",
416
+ "value": {
417
+ "light": "#00000052",
418
+ "dark": "#00000080"
419
+ },
420
+ "usage": "弹窗背后压暗内容的遮罩。"
421
+ },
422
+ {
423
+ "name": "glass-fill",
424
+ "value": {
425
+ "light": "#ffffffa6",
426
+ "dark": "#2a2a2aa6"
427
+ },
428
+ "platforms": [
429
+ "web"
430
+ ],
431
+ "usage": "仅官网与文档的页眉:用 backdrop-filter 近似玻璃。Web 应用不用玻璃;App 里用系统玻璃。"
432
+ },
433
+ {
434
+ "name": "glass-stroke",
435
+ "value": {
436
+ "light": "#ffffffcc",
437
+ "dark": "#ffffff24"
438
+ },
439
+ "platforms": [
440
+ "web"
441
+ ],
442
+ "usage": "仅官网与文档的页眉:玻璃边缘的高光描边。"
443
+ }
444
+ ]
445
+ },
446
+ "type": {
447
+ "note": "字号按角色组织,每个角色在三种密度下各有一组字号和行高。界面文字和 AI 回答都用无衬线;衬线只给 display、title 和文章类长文 prose。iOS 用文本样式,让动态字体生效。",
448
+ "families": {
449
+ "serif": "ui-serif, \"New York\", \"Iowan Old Style\", Georgia, \"PingFang SC\", serif",
450
+ "sans": "-apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"PingFang SC\", \"Hiragino Sans GB\", system-ui, sans-serif",
451
+ "mono": "ui-monospace, \"SF Mono\", Menlo, \"PingFang SC\", monospace"
452
+ },
453
+ "weights": [
454
+ {
455
+ "name": "weight-regular",
456
+ "value": 400,
457
+ "usage": "正文、说明、输入的文字。"
458
+ },
459
+ {
460
+ "name": "weight-medium",
461
+ "value": 500,
462
+ "usage": "按钮、标签、侧边栏选中项、表单标签。"
463
+ },
464
+ {
465
+ "name": "weight-semibold",
466
+ "value": 600,
467
+ "usage": "标题、区块标题、列表行标题。不用 700 以上。"
468
+ }
469
+ ],
470
+ "roles": [
471
+ {
472
+ "name": "display",
473
+ "family": "serif",
474
+ "weight": 600,
475
+ "tracking": "-0.01em",
476
+ "sample": "还没有笔记",
477
+ "usage": "空状态、引导页、页面的大标题(衬线)。每屏最多一个。",
478
+ "values": {
479
+ "desktop": [
480
+ 26,
481
+ 32
482
+ ],
483
+ "touch": [
484
+ 30,
485
+ 36
486
+ ],
487
+ "comfortable": [
488
+ 44,
489
+ 52
490
+ ]
491
+ },
492
+ "swiftui": {
493
+ "macos": ".system(size: 26, weight: .semibold, design: .serif)",
494
+ "ios": ".system(.largeTitle, design: .serif).weight(.semibold)"
495
+ }
496
+ },
497
+ {
498
+ "name": "title",
499
+ "family": "serif",
500
+ "weight": 600,
501
+ "sample": "本周回顾",
502
+ "usage": "文章标题、弹窗标题(衬线)。",
503
+ "values": {
504
+ "desktop": [
505
+ 18,
506
+ 24
507
+ ],
508
+ "touch": [
509
+ 20,
510
+ 25
511
+ ],
512
+ "comfortable": [
513
+ 24,
514
+ 32
515
+ ]
516
+ },
517
+ "swiftui": {
518
+ "macos": ".system(size: 18, weight: .semibold, design: .serif)",
519
+ "ios": ".system(.title3, design: .serif).weight(.semibold)"
520
+ }
521
+ },
522
+ {
523
+ "name": "headline",
524
+ "family": "sans",
525
+ "weight": 600,
526
+ "sample": "最近项目",
527
+ "usage": "区块标题、卡片标题、横幅标题、列表行标题。",
528
+ "values": {
529
+ "desktop": [
530
+ 15,
531
+ 22
532
+ ],
533
+ "touch": [
534
+ 17,
535
+ 22
536
+ ],
537
+ "comfortable": [
538
+ 16,
539
+ 24
540
+ ]
541
+ },
542
+ "swiftui": {
543
+ "macos": ".system(size: 15, weight: .semibold)",
544
+ "ios": ".headline"
545
+ }
546
+ },
547
+ {
548
+ "name": "body",
549
+ "family": "sans",
550
+ "weight": 400,
551
+ "sample": "同步到 iCloud 后,所有设备上都能看到这条笔记。",
552
+ "usage": "界面正文、AI 回答、用户消息、列表、表单。",
553
+ "values": {
554
+ "desktop": [
555
+ 15,
556
+ 24
557
+ ],
558
+ "touch": [
559
+ 17,
560
+ 23
561
+ ],
562
+ "comfortable": [
563
+ 15,
564
+ 24
565
+ ]
566
+ },
567
+ "swiftui": {
568
+ "macos": ".system(size: 15)",
569
+ "ios": ".body"
570
+ }
571
+ },
572
+ {
573
+ "name": "prose",
574
+ "family": "serif",
575
+ "weight": 400,
576
+ "sample": "长文和 AI 的回答用衬线排,读起来更像一页纸,而不是一块界面。",
577
+ "usage": "文章、文档这类长文阅读(衬线)。AI 回答不用它。",
578
+ "values": {
579
+ "desktop": [
580
+ 16,
581
+ 26
582
+ ],
583
+ "touch": [
584
+ 17,
585
+ 26
586
+ ],
587
+ "comfortable": [
588
+ 17,
589
+ 28
590
+ ]
591
+ },
592
+ "swiftui": {
593
+ "macos": ".system(size: 16, design: .serif)",
594
+ "ios": ".system(.body, design: .serif)"
595
+ }
596
+ },
597
+ {
598
+ "name": "callout",
599
+ "family": "sans",
600
+ "weight": 400,
601
+ "sample": "上次同步:今天 09:41",
602
+ "usage": "说明文字、弹窗正文、输入区下方的模型和权限信息。",
603
+ "values": {
604
+ "desktop": [
605
+ 14,
606
+ 20
607
+ ],
608
+ "touch": [
609
+ 15,
610
+ 20
611
+ ],
612
+ "comfortable": [
613
+ 14,
614
+ 22
615
+ ]
616
+ },
617
+ "swiftui": {
618
+ "macos": ".system(size: 14)",
619
+ "ios": ".callout"
620
+ }
621
+ },
622
+ {
623
+ "name": "footnote",
624
+ "family": "sans",
625
+ "weight": 400,
626
+ "sample": "资料库",
627
+ "usage": "侧边栏分组标题、分组列表的页头页脚、卡片摘要。",
628
+ "values": {
629
+ "desktop": [
630
+ 13,
631
+ 18
632
+ ],
633
+ "touch": [
634
+ 13,
635
+ 17
636
+ ],
637
+ "comfortable": [
638
+ 13,
639
+ 20
640
+ ]
641
+ },
642
+ "swiftui": {
643
+ "macos": ".system(size: 13)",
644
+ "ios": ".footnote"
645
+ }
646
+ },
647
+ {
648
+ "name": "caption",
649
+ "family": "sans",
650
+ "weight": 400,
651
+ "sample": "3 个文件 · 12 KB",
652
+ "usage": "时间戳、计数、标签。界面里最小的字。",
653
+ "values": {
654
+ "desktop": [
655
+ 12,
656
+ 16
657
+ ],
658
+ "touch": [
659
+ 12,
660
+ 15
661
+ ],
662
+ "comfortable": [
663
+ 12,
664
+ 16
665
+ ]
666
+ },
667
+ "swiftui": {
668
+ "macos": ".system(size: 12)",
669
+ "ios": ".caption"
670
+ }
671
+ },
672
+ {
673
+ "name": "code",
674
+ "family": "mono",
675
+ "weight": 400,
676
+ "sample": "let total = items.reduce(0, +)",
677
+ "usage": "代码块、命令、文件路径、需要对齐的数据。",
678
+ "values": {
679
+ "desktop": [
680
+ 13,
681
+ 20
682
+ ],
683
+ "touch": [
684
+ 13,
685
+ 18
686
+ ],
687
+ "comfortable": [
688
+ 13,
689
+ 20
690
+ ]
691
+ },
692
+ "swiftui": {
693
+ "macos": ".system(size: 13, design: .monospaced)",
694
+ "ios": ".system(.footnote, design: .monospaced)"
695
+ }
696
+ }
697
+ ]
698
+ },
699
+ "space": {
700
+ "note": "4pt 网格。刻度是固定值;语义间距按密度取值。组与组之间的间距至少是组内的 2 倍。",
701
+ "tokens": [
702
+ {
703
+ "name": "space-1",
704
+ "value": "4px",
705
+ "usage": "图标与文字之间、标题与摘要之间。"
706
+ },
707
+ {
708
+ "name": "space-2",
709
+ "value": "8px",
710
+ "usage": "列表项内边距、横幅上下内边距、卡片网格间距。"
711
+ },
712
+ {
713
+ "name": "space-3",
714
+ "value": "12px",
715
+ "usage": "卡片内边距、横幅左右内边距。"
716
+ },
717
+ {
718
+ "name": "space-4",
719
+ "value": "16px",
720
+ "usage": "内容区里段落、工具调用行、卡片之间。"
721
+ },
722
+ {
723
+ "name": "space-5",
724
+ "value": "20px",
725
+ "usage": "分组之间、区块之间。"
726
+ },
727
+ {
728
+ "name": "space-6",
729
+ "value": "24px",
730
+ "usage": "空状态内边距、大区块之间。"
731
+ },
732
+ {
733
+ "name": "space-8",
734
+ "value": "32px",
735
+ "usage": "页面级留白。"
736
+ },
737
+ {
738
+ "name": "space-10",
739
+ "value": "40px",
740
+ "usage": "引导页、首屏的留白。"
741
+ },
742
+ {
743
+ "name": "space-12",
744
+ "value": "48px",
745
+ "usage": "官网与文档的章节间距。"
746
+ },
747
+ {
748
+ "name": "space-16",
749
+ "value": "64px",
750
+ "usage": "官网首屏的上下留白。"
751
+ },
752
+ {
753
+ "name": "gap-inline",
754
+ "values": {
755
+ "desktop": 6,
756
+ "touch": 6,
757
+ "comfortable": 8
758
+ },
759
+ "usage": "同一行里图标和文字之间、按钮里图标和标签之间。"
760
+ },
761
+ {
762
+ "name": "gap-stack",
763
+ "values": {
764
+ "desktop": 8,
765
+ "touch": 8,
766
+ "comfortable": 12
767
+ },
768
+ "usage": "同一组里相邻元素之间:表单项、卡片里的段落、并排的按钮。"
769
+ },
770
+ {
771
+ "name": "gap-group",
772
+ "values": {
773
+ "desktop": 24,
774
+ "touch": 20,
775
+ "comfortable": 48
776
+ },
777
+ "usage": "组与组之间:设置分组、页面区块。至少是 gap-stack 的 2 倍。"
778
+ },
779
+ {
780
+ "name": "page-margin",
781
+ "values": {
782
+ "desktop": 32,
783
+ "touch": 16,
784
+ "comfortable": 32
785
+ },
786
+ "usage": "页面和内容区的左右边距。"
787
+ }
788
+ ]
789
+ },
790
+ "radius": {
791
+ "note": "圆角刻度。各组件实际用哪一档见组件尺寸里的 *-radius。嵌套保持同心:内圆角 = 外圆角 − 内边距。",
792
+ "tokens": [
793
+ {
794
+ "name": "radius-xs",
795
+ "value": "4px",
796
+ "usage": "标签、复选框、小按钮。"
797
+ },
798
+ {
799
+ "name": "radius-sm",
800
+ "value": "6px",
801
+ "usage": "桌面端的按钮、输入框、工具栏图标按钮。"
802
+ },
803
+ {
804
+ "name": "radius-md",
805
+ "value": "8px",
806
+ "usage": "侧边栏选中块、代码块、弹出菜单。"
807
+ },
808
+ {
809
+ "name": "radius-lg",
810
+ "value": "12px",
811
+ "usage": "卡片、用户消息气泡、分组列表、任务清单。"
812
+ },
813
+ {
814
+ "name": "radius-xl",
815
+ "value": "24px",
816
+ "usage": "底部弹窗、触控端单行 Composer。"
817
+ },
818
+ {
819
+ "name": "radius-full",
820
+ "value": "999px",
821
+ "usage": "胶囊与圆形:触控端按钮、玻璃按钮、状态圆点。"
822
+ }
823
+ ]
824
+ },
825
+ "stroke": {
826
+ "note": "线宽。",
827
+ "tokens": [
828
+ {
829
+ "name": "stroke-line",
830
+ "value": "1px",
831
+ "usage": "分隔线、卡片、输入区、侧边栏和顶栏的边线。SwiftUI 里自己画的边框用 1pt,系统自带的分隔线保持系统样式。"
832
+ },
833
+ {
834
+ "name": "stroke-control",
835
+ "value": "1px",
836
+ "usage": "输入框边框、选中卡片的描边(配 line-control 或 ink 色)。"
837
+ },
838
+ {
839
+ "name": "stroke-focus",
840
+ "value": "2px",
841
+ "usage": "键盘焦点环。"
842
+ },
843
+ {
844
+ "name": "focus-offset",
845
+ "value": "2px",
846
+ "usage": "焦点环和控件边缘之间的距离。"
847
+ }
848
+ ]
849
+ },
850
+ "line": {
851
+ "note": "线形:线条画成什么样。",
852
+ "tokens": [
853
+ {
854
+ "name": "line-style-divider",
855
+ "value": "solid",
856
+ "usage": "分隔线、卡片和输入框的边框。界面里的线默认都是实线。"
857
+ },
858
+ {
859
+ "name": "line-style-dropzone",
860
+ "value": "dashed",
861
+ "usage": "拖放区、待添加的占位块。只有这类“还空着”的区域用虚线。"
862
+ },
863
+ {
864
+ "name": "line-dash",
865
+ "value": "4 4",
866
+ "platforms": [
867
+ "web"
868
+ ],
869
+ "usage": "SVG 虚线的 stroke-dasharray。"
870
+ },
871
+ {
872
+ "name": "line-cap",
873
+ "value": "round",
874
+ "usage": "图标和自绘线条的端点。"
875
+ },
876
+ {
877
+ "name": "line-join",
878
+ "value": "round",
879
+ "usage": "图标和自绘线条的拐角。"
880
+ }
881
+ ]
882
+ },
883
+ "shadow": {
884
+ "note": "阴影就是层级。卡片不加阴影,只有真正浮起来的东西才有。",
885
+ "tokens": [
886
+ {
887
+ "name": "shadow-control",
888
+ "value": {
889
+ "light": "0 1px 1px rgba(0, 0, 0, 0.05)",
890
+ "dark": "0 1px 1px rgba(0, 0, 0, 0.30)"
891
+ },
892
+ "usage": "第 1 层:次按钮、分段控件的选中块,一点点厚度。"
893
+ },
894
+ {
895
+ "name": "shadow-float",
896
+ "value": {
897
+ "light": "0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 20px rgba(0, 0, 0, 0.08)",
898
+ "dark": "0 1px 2px rgba(0, 0, 0, 0.40), 0 6px 20px rgba(0, 0, 0, 0.45)"
899
+ },
900
+ "usage": "第 2 层:Composer、弹出菜单、弹窗、浮动面板。"
901
+ },
902
+ {
903
+ "name": "shadow-glass",
904
+ "value": {
905
+ "light": "0 4px 14px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.70)",
906
+ "dark": "0 4px 14px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.10)"
907
+ },
908
+ "platforms": [
909
+ "web"
910
+ ],
911
+ "usage": "仅网页:模拟玻璃的阴影和顶部高光。App 里系统玻璃自带阴影。"
912
+ }
913
+ ]
914
+ },
915
+ "layer": {
916
+ "note": "叠放顺序(z-index)。和阴影的层级一一对应。",
917
+ "tokens": [
918
+ {
919
+ "name": "z-sticky",
920
+ "value": 10,
921
+ "swift": false,
922
+ "usage": "吸顶的工具栏和页眉。"
923
+ },
924
+ {
925
+ "name": "z-dropdown",
926
+ "value": 100,
927
+ "swift": false,
928
+ "usage": "弹出菜单、下拉列表、popover。"
929
+ },
930
+ {
931
+ "name": "z-overlay",
932
+ "value": 1000,
933
+ "swift": false,
934
+ "usage": "遮罩和弹窗。"
935
+ },
936
+ {
937
+ "name": "z-toast",
938
+ "value": 1100,
939
+ "swift": false,
940
+ "usage": "轻提示,压在弹窗之上。"
941
+ }
942
+ ]
943
+ },
944
+ "motion": {
945
+ "note": "动效时长和缓动。SwiftUI 里默认用 .spring(response: 0.35, dampingFraction: 0.85)。",
946
+ "tokens": [
947
+ {
948
+ "name": "duration-instant",
949
+ "value": "120ms",
950
+ "usage": "悬停、按压、选中这类即时反馈。"
951
+ },
952
+ {
953
+ "name": "duration-base",
954
+ "value": "200ms",
955
+ "usage": "展开、收起、切换、开关。"
956
+ },
957
+ {
958
+ "name": "duration-slow",
959
+ "value": "320ms",
960
+ "usage": "面板滑入、页面级转场。"
961
+ },
962
+ {
963
+ "name": "ease-standard",
964
+ "value": "cubic-bezier(0.2, 0.8, 0.2, 1)",
965
+ "swift": false,
966
+ "usage": "默认缓动:快进、缓停。"
967
+ }
968
+ ]
969
+ },
970
+ "opacity": {
971
+ "note": "不透明度。",
972
+ "tokens": [
973
+ {
974
+ "name": "opacity-disabled",
975
+ "value": 0.35,
976
+ "usage": "禁用的控件。禁用时保持原位,不隐藏。"
977
+ },
978
+ {
979
+ "name": "opacity-solid-hover",
980
+ "value": 0.88,
981
+ "usage": "实色(accent 填充)按钮悬停和按下。"
982
+ }
983
+ ]
984
+ },
985
+ "glass": {
986
+ "note": "仅官网与文档的页眉:用 backdrop-filter 近似 Liquid Glass。Web 应用不用玻璃,App 里用系统玻璃。",
987
+ "tokens": [
988
+ {
989
+ "name": "glass-blur",
990
+ "value": "16px",
991
+ "platforms": [
992
+ "web"
993
+ ],
994
+ "usage": "官网页眉玻璃背后的模糊半径。"
995
+ },
996
+ {
997
+ "name": "glass-saturate",
998
+ "value": 1.4,
999
+ "platforms": [
1000
+ "web"
1001
+ ],
1002
+ "usage": "官网页眉玻璃背后的饱和度增强。"
1003
+ }
1004
+ ]
1005
+ },
1006
+ "layout": {
1007
+ "note": "布局尺寸。断点只能写在媒体查询里,所以不生成 CSS 变量。",
1008
+ "tokens": [
1009
+ {
1010
+ "name": "content-max",
1011
+ "value": "680px",
1012
+ "usage": "对话栏和长文阅读栏的最大宽度。"
1013
+ },
1014
+ {
1015
+ "name": "breakpoint-sm",
1016
+ "value": "760px",
1017
+ "css": false,
1018
+ "usage": "窄屏:侧边栏收起,多栏变单栏。"
1019
+ },
1020
+ {
1021
+ "name": "breakpoint-md",
1022
+ "value": "960px",
1023
+ "css": false,
1024
+ "usage": "中等宽度:目录和次要栏收起。"
1025
+ },
1026
+ {
1027
+ "name": "breakpoint-lg",
1028
+ "value": "1280px",
1029
+ "css": false,
1030
+ "usage": "宽屏:内容不再继续变宽,两侧留白。"
1031
+ },
1032
+ {
1033
+ "name": "hit-min",
1034
+ "values": {
1035
+ "desktop": 24,
1036
+ "touch": 44,
1037
+ "comfortable": 24
1038
+ },
1039
+ "usage": "最小点击区域。可见尺寸比它小时,用透明的命中区补足,不加大可见的按钮。"
1040
+ },
1041
+ {
1042
+ "name": "sidebar-width",
1043
+ "values": {
1044
+ "desktop": 288,
1045
+ "touch": 320,
1046
+ "comfortable": 260
1047
+ },
1048
+ "usage": "侧边栏默认宽度。iPhone 没有侧边栏;macOS 用系统侧边栏,宽度只作参考。"
1049
+ },
1050
+ {
1051
+ "name": "toolbar-height",
1052
+ "values": {
1053
+ "desktop": 44,
1054
+ "touch": 44,
1055
+ "comfortable": 52
1056
+ },
1057
+ "usage": "Web 应用顶栏、侧面板标签头的高度。macOS 用系统工具栏。"
1058
+ }
1059
+ ]
1060
+ },
1061
+ "components": [
1062
+ {
1063
+ "id": "button",
1064
+ "title": "按钮",
1065
+ "reference": "references/components/button.md",
1066
+ "tokens": [
1067
+ {
1068
+ "name": "button-height-sm",
1069
+ "values": {
1070
+ "desktop": 24,
1071
+ "touch": 30,
1072
+ "comfortable": 32
1073
+ },
1074
+ "usage": "小按钮的可见高度:列表行、卡片角落里的行内操作。"
1075
+ },
1076
+ {
1077
+ "name": "button-height-md",
1078
+ "values": {
1079
+ "desktop": 28,
1080
+ "touch": 36,
1081
+ "comfortable": 36
1082
+ },
1083
+ "usage": "默认按钮、图标按钮、发送按钮、步骤行的高度。"
1084
+ },
1085
+ {
1086
+ "name": "button-height-lg",
1087
+ "values": {
1088
+ "desktop": 32,
1089
+ "touch": 46,
1090
+ "comfortable": 44
1091
+ },
1092
+ "usage": "大按钮:空状态、引导页;触控端是整页唯一的通栏主按钮。"
1093
+ },
1094
+ {
1095
+ "name": "button-padding-x-sm",
1096
+ "values": {
1097
+ "desktop": 8,
1098
+ "touch": 12,
1099
+ "comfortable": 14
1100
+ },
1101
+ "usage": "小按钮左右内边距。上下内边距永远是 0。"
1102
+ },
1103
+ {
1104
+ "name": "button-padding-x-md",
1105
+ "values": {
1106
+ "desktop": 12,
1107
+ "touch": 16,
1108
+ "comfortable": 18
1109
+ },
1110
+ "usage": "默认按钮左右内边距。"
1111
+ },
1112
+ {
1113
+ "name": "button-padding-x-lg",
1114
+ "values": {
1115
+ "desktop": 16,
1116
+ "touch": 20,
1117
+ "comfortable": 24
1118
+ },
1119
+ "usage": "大按钮左右内边距。"
1120
+ },
1121
+ {
1122
+ "name": "button-font-size-sm",
1123
+ "values": {
1124
+ "desktop": 12,
1125
+ "touch": 13,
1126
+ "comfortable": 13
1127
+ },
1128
+ "usage": "小按钮字号。"
1129
+ },
1130
+ {
1131
+ "name": "button-font-size-md",
1132
+ "values": {
1133
+ "desktop": 14,
1134
+ "touch": 15,
1135
+ "comfortable": 14
1136
+ },
1137
+ "usage": "默认按钮字号。"
1138
+ },
1139
+ {
1140
+ "name": "button-font-size-lg",
1141
+ "values": {
1142
+ "desktop": 14,
1143
+ "touch": 16,
1144
+ "comfortable": 15
1145
+ },
1146
+ "usage": "大按钮字号。"
1147
+ },
1148
+ {
1149
+ "name": "button-font-weight",
1150
+ "values": {
1151
+ "desktop": 500,
1152
+ "touch": 600,
1153
+ "comfortable": 500
1154
+ },
1155
+ "unit": "",
1156
+ "usage": "按钮字重。"
1157
+ },
1158
+ {
1159
+ "name": "button-radius",
1160
+ "values": {
1161
+ "desktop": 6,
1162
+ "touch": 999,
1163
+ "comfortable": 999
1164
+ },
1165
+ "usage": "默认和大按钮的圆角:指针端是 radius-sm,触控端和官网是胶囊。"
1166
+ },
1167
+ {
1168
+ "name": "button-radius-sm",
1169
+ "values": {
1170
+ "desktop": 4,
1171
+ "touch": 999,
1172
+ "comfortable": 999
1173
+ },
1174
+ "usage": "小按钮的圆角。"
1175
+ }
1176
+ ]
1177
+ },
1178
+ {
1179
+ "id": "toolbar",
1180
+ "title": "顶栏与侧面板",
1181
+ "reference": "references/components/toolbar.md",
1182
+ "tokens": [
1183
+ {
1184
+ "name": "toolbar-title-size",
1185
+ "values": {
1186
+ "desktop": 15,
1187
+ "touch": 17,
1188
+ "comfortable": 15
1189
+ },
1190
+ "usage": "顶栏标题字号(常规字重)。"
1191
+ },
1192
+ {
1193
+ "name": "panel-tab-height",
1194
+ "values": {
1195
+ "desktop": 28,
1196
+ "touch": 36,
1197
+ "comfortable": 32
1198
+ },
1199
+ "usage": "侧面板标签头里每个标签的高度。"
1200
+ }
1201
+ ]
1202
+ },
1203
+ {
1204
+ "id": "glass-controls",
1205
+ "title": "玻璃操作层",
1206
+ "reference": "references/components/glass-controls.md",
1207
+ "tokens": [
1208
+ {
1209
+ "name": "glass-button-size",
1210
+ "values": {
1211
+ "desktop": 34,
1212
+ "touch": 44,
1213
+ "comfortable": 36
1214
+ },
1215
+ "usage": "玻璃按钮的边长:macOS 26 工具栏按钮约 34(系统绘制,这里只作参考和自绘时对齐),官网页眉的图标按钮也用它;按钮组里的按钮比它小 8。Web 应用的工具栏不用玻璃,用 button-height-md。"
1216
+ }
1217
+ ]
1218
+ },
1219
+ {
1220
+ "id": "segmented",
1221
+ "title": "分段控件",
1222
+ "reference": "references/components/segmented.md",
1223
+ "tokens": [
1224
+ {
1225
+ "name": "segmented-height",
1226
+ "values": {
1227
+ "desktop": 24,
1228
+ "touch": 28,
1229
+ "comfortable": 28
1230
+ },
1231
+ "usage": "选项块的高度;外层再加上下各 segmented-padding。"
1232
+ },
1233
+ {
1234
+ "name": "segmented-padding",
1235
+ "values": {
1236
+ "desktop": 2,
1237
+ "touch": 2,
1238
+ "comfortable": 2
1239
+ },
1240
+ "usage": "底槽内边距。"
1241
+ },
1242
+ {
1243
+ "name": "segmented-padding-x",
1244
+ "values": {
1245
+ "desktop": 12,
1246
+ "touch": 16,
1247
+ "comfortable": 16
1248
+ },
1249
+ "usage": "选项块左右内边距。"
1250
+ },
1251
+ {
1252
+ "name": "segmented-font-size",
1253
+ "values": {
1254
+ "desktop": 13,
1255
+ "touch": 14,
1256
+ "comfortable": 14
1257
+ },
1258
+ "usage": "选项字号。"
1259
+ },
1260
+ {
1261
+ "name": "segmented-radius",
1262
+ "values": {
1263
+ "desktop": 6,
1264
+ "touch": 999,
1265
+ "comfortable": 999
1266
+ },
1267
+ "usage": "底槽圆角;选项块圆角 = 它减去 segmented-padding。"
1268
+ }
1269
+ ]
1270
+ },
1271
+ {
1272
+ "id": "text-field",
1273
+ "title": "文本框",
1274
+ "reference": "references/components/text-field.md",
1275
+ "tokens": [
1276
+ {
1277
+ "name": "field-height",
1278
+ "values": {
1279
+ "desktop": 28,
1280
+ "touch": 44,
1281
+ "comfortable": 40
1282
+ },
1283
+ "usage": "单行输入框和下拉选择的高度。"
1284
+ },
1285
+ {
1286
+ "name": "field-padding-x",
1287
+ "values": {
1288
+ "desktop": 10,
1289
+ "touch": 12,
1290
+ "comfortable": 14
1291
+ },
1292
+ "usage": "输入框左右内边距。"
1293
+ },
1294
+ {
1295
+ "name": "field-font-size",
1296
+ "values": {
1297
+ "desktop": 14,
1298
+ "touch": 17,
1299
+ "comfortable": 15
1300
+ },
1301
+ "usage": "输入文字字号。触控端不小于 16,避免浏览器放大页面。"
1302
+ },
1303
+ {
1304
+ "name": "field-radius",
1305
+ "values": {
1306
+ "desktop": 6,
1307
+ "touch": 8,
1308
+ "comfortable": 8
1309
+ },
1310
+ "usage": "输入框圆角。"
1311
+ }
1312
+ ]
1313
+ },
1314
+ {
1315
+ "id": "composer",
1316
+ "title": "Composer 输入区",
1317
+ "reference": "references/components/composer.md",
1318
+ "tokens": [
1319
+ {
1320
+ "name": "composer-radius",
1321
+ "values": {
1322
+ "desktop": 14,
1323
+ "touch": 24,
1324
+ "comfortable": 16
1325
+ },
1326
+ "usage": "Composer 外框圆角。"
1327
+ },
1328
+ {
1329
+ "name": "composer-min-height",
1330
+ "values": {
1331
+ "desktop": 44,
1332
+ "touch": 44,
1333
+ "comfortable": 48
1334
+ },
1335
+ "usage": "单行时的高度:加号、输入、发送排在同一行,输入多行时向上长高。"
1336
+ }
1337
+ ]
1338
+ },
1339
+ {
1340
+ "id": "sidebar",
1341
+ "title": "侧边栏与列表行",
1342
+ "reference": "references/components/sidebar.md",
1343
+ "tokens": [
1344
+ {
1345
+ "name": "row-height",
1346
+ "values": {
1347
+ "desktop": 32,
1348
+ "touch": 44,
1349
+ "comfortable": 40
1350
+ },
1351
+ "usage": "侧边栏项、列表行的最小高度。"
1352
+ },
1353
+ {
1354
+ "name": "row-padding-x",
1355
+ "values": {
1356
+ "desktop": 10,
1357
+ "touch": 16,
1358
+ "comfortable": 12
1359
+ },
1360
+ "usage": "行的左右内边距;分隔线从这里开始。"
1361
+ },
1362
+ {
1363
+ "name": "row-radius",
1364
+ "values": {
1365
+ "desktop": 8,
1366
+ "touch": 10,
1367
+ "comfortable": 8
1368
+ },
1369
+ "usage": "悬停和选中底色的圆角。"
1370
+ },
1371
+ {
1372
+ "name": "row-gap",
1373
+ "values": {
1374
+ "desktop": 2,
1375
+ "touch": 0,
1376
+ "comfortable": 2
1377
+ },
1378
+ "usage": "侧边栏项之间的间隔。触控端的列表用分隔线,不留间隔。"
1379
+ }
1380
+ ]
1381
+ },
1382
+ {
1383
+ "id": "list",
1384
+ "title": "分组列表与设置页",
1385
+ "reference": "references/components/list.md",
1386
+ "tokens": [
1387
+ {
1388
+ "name": "row-icon-size",
1389
+ "values": {
1390
+ "desktop": 20,
1391
+ "touch": 28,
1392
+ "comfortable": 24
1393
+ },
1394
+ "usage": "列表行左侧图标底的边长。"
1395
+ },
1396
+ {
1397
+ "name": "switch-width",
1398
+ "values": {
1399
+ "desktop": 36,
1400
+ "touch": 51,
1401
+ "comfortable": 44
1402
+ },
1403
+ "usage": "开关宽度。"
1404
+ },
1405
+ {
1406
+ "name": "switch-height",
1407
+ "values": {
1408
+ "desktop": 20,
1409
+ "touch": 31,
1410
+ "comfortable": 24
1411
+ },
1412
+ "usage": "开关高度;圆钮直径 = 高度 − 4。"
1413
+ }
1414
+ ]
1415
+ },
1416
+ {
1417
+ "id": "card",
1418
+ "title": "卡片",
1419
+ "reference": "references/components/card.md",
1420
+ "tokens": [
1421
+ {
1422
+ "name": "card-padding-x",
1423
+ "values": {
1424
+ "desktop": 16,
1425
+ "touch": 16,
1426
+ "comfortable": 24
1427
+ },
1428
+ "usage": "卡片左右内边距。"
1429
+ },
1430
+ {
1431
+ "name": "card-padding-y",
1432
+ "values": {
1433
+ "desktop": 12,
1434
+ "touch": 14,
1435
+ "comfortable": 24
1436
+ },
1437
+ "usage": "卡片上下内边距。"
1438
+ },
1439
+ {
1440
+ "name": "card-radius",
1441
+ "values": {
1442
+ "desktop": 12,
1443
+ "touch": 12,
1444
+ "comfortable": 12
1445
+ },
1446
+ "usage": "卡片、分组列表、任务清单的圆角。"
1447
+ },
1448
+ {
1449
+ "name": "card-gap",
1450
+ "values": {
1451
+ "desktop": 12,
1452
+ "touch": 12,
1453
+ "comfortable": 16
1454
+ },
1455
+ "usage": "卡片网格的间距。"
1456
+ }
1457
+ ]
1458
+ },
1459
+ {
1460
+ "id": "tag",
1461
+ "title": "标签",
1462
+ "reference": "references/components/tag.md",
1463
+ "tokens": [
1464
+ {
1465
+ "name": "tag-height",
1466
+ "values": {
1467
+ "desktop": 20,
1468
+ "touch": 22,
1469
+ "comfortable": 24
1470
+ },
1471
+ "usage": "标签高度。"
1472
+ },
1473
+ {
1474
+ "name": "tag-padding-x",
1475
+ "values": {
1476
+ "desktop": 6,
1477
+ "touch": 8,
1478
+ "comfortable": 10
1479
+ },
1480
+ "usage": "标签左右内边距。"
1481
+ },
1482
+ {
1483
+ "name": "tag-font-size",
1484
+ "values": {
1485
+ "desktop": 12,
1486
+ "touch": 12,
1487
+ "comfortable": 12
1488
+ },
1489
+ "usage": "标签字号。"
1490
+ },
1491
+ {
1492
+ "name": "tag-radius",
1493
+ "values": {
1494
+ "desktop": 4,
1495
+ "touch": 999,
1496
+ "comfortable": 999
1497
+ },
1498
+ "usage": "标签圆角。"
1499
+ }
1500
+ ]
1501
+ },
1502
+ {
1503
+ "id": "code-block",
1504
+ "title": "代码块",
1505
+ "reference": "references/components/code-block.md",
1506
+ "tokens": [
1507
+ {
1508
+ "name": "code-header-height",
1509
+ "values": {
1510
+ "desktop": 32,
1511
+ "touch": 36,
1512
+ "comfortable": 36
1513
+ },
1514
+ "usage": "代码块表头的高度。"
1515
+ }
1516
+ ]
1517
+ },
1518
+ {
1519
+ "id": "task-list",
1520
+ "title": "任务清单",
1521
+ "reference": "references/components/task-list.md",
1522
+ "tokens": [
1523
+ {
1524
+ "name": "task-row-height",
1525
+ "values": {
1526
+ "desktop": 28,
1527
+ "touch": 44,
1528
+ "comfortable": 32
1529
+ },
1530
+ "usage": "任务清单每一行的高度。"
1531
+ },
1532
+ {
1533
+ "name": "task-glyph-size",
1534
+ "values": {
1535
+ "desktop": 16,
1536
+ "touch": 20,
1537
+ "comfortable": 18
1538
+ },
1539
+ "usage": "左侧状态圈的直径。"
1540
+ }
1541
+ ]
1542
+ },
1543
+ {
1544
+ "id": "empty-state",
1545
+ "title": "空状态",
1546
+ "reference": "references/components/empty-state.md",
1547
+ "tokens": [
1548
+ {
1549
+ "name": "empty-title-size",
1550
+ "values": {
1551
+ "desktop": 24,
1552
+ "touch": 20,
1553
+ "comfortable": 32
1554
+ },
1555
+ "usage": "空状态标题(衬线)字号。"
1556
+ },
1557
+ {
1558
+ "name": "empty-icon-size",
1559
+ "values": {
1560
+ "desktop": 32,
1561
+ "touch": 36,
1562
+ "comfortable": 40
1563
+ },
1564
+ "usage": "空状态图标的边长。"
1565
+ }
1566
+ ]
1567
+ },
1568
+ {
1569
+ "id": "banner",
1570
+ "title": "横幅与轻提示",
1571
+ "reference": "references/components/banner.md",
1572
+ "tokens": [
1573
+ {
1574
+ "name": "toast-height",
1575
+ "values": {
1576
+ "desktop": 36,
1577
+ "touch": 40,
1578
+ "comfortable": 40
1579
+ },
1580
+ "usage": "轻提示胶囊的高度。"
1581
+ },
1582
+ {
1583
+ "name": "banner-radius",
1584
+ "values": {
1585
+ "desktop": 10,
1586
+ "touch": 12,
1587
+ "comfortable": 12
1588
+ },
1589
+ "usage": "横幅和贴在输入区上方的提示条的圆角。"
1590
+ }
1591
+ ]
1592
+ },
1593
+ {
1594
+ "id": "sheet",
1595
+ "title": "弹窗与底部弹窗",
1596
+ "reference": "references/components/sheet.md",
1597
+ "tokens": [
1598
+ {
1599
+ "name": "sheet-radius",
1600
+ "values": {
1601
+ "desktop": 12,
1602
+ "touch": 24,
1603
+ "comfortable": 16
1604
+ },
1605
+ "usage": "弹窗和底部弹窗的圆角。"
1606
+ },
1607
+ {
1608
+ "name": "menu-radius",
1609
+ "values": {
1610
+ "desktop": 8,
1611
+ "touch": 12,
1612
+ "comfortable": 12
1613
+ },
1614
+ "usage": "弹出菜单、popover 的圆角。"
1615
+ }
1616
+ ]
1617
+ },
1618
+ {
1619
+ "id": "message",
1620
+ "title": "消息",
1621
+ "reference": "references/components/message.md",
1622
+ "tokens": [
1623
+ {
1624
+ "name": "message-font-size",
1625
+ "values": {
1626
+ "desktop": 15,
1627
+ "touch": 15,
1628
+ "comfortable": 15
1629
+ },
1630
+ "usage": "用户消息气泡的字号。AI 回答用 type-body,和界面正文一致。"
1631
+ },
1632
+ {
1633
+ "name": "message-action-size",
1634
+ "values": {
1635
+ "desktop": 24,
1636
+ "touch": 32,
1637
+ "comfortable": 28
1638
+ },
1639
+ "usage": "AI 消息下方操作按钮的可见尺寸。"
1640
+ }
1641
+ ]
1642
+ },
1643
+ {
1644
+ "id": "icon",
1645
+ "title": "图标",
1646
+ "reference": "references/foundations/iconography.md",
1647
+ "tokens": [
1648
+ {
1649
+ "name": "icon-size-sm",
1650
+ "values": {
1651
+ "desktop": 14,
1652
+ "touch": 17,
1653
+ "comfortable": 16
1654
+ },
1655
+ "usage": "按钮和标签里的图标。"
1656
+ },
1657
+ {
1658
+ "name": "icon-size-md",
1659
+ "values": {
1660
+ "desktop": 16,
1661
+ "touch": 20,
1662
+ "comfortable": 18
1663
+ },
1664
+ "usage": "侧边栏、列表、横幅、工具栏里的图标。"
1665
+ },
1666
+ {
1667
+ "name": "icon-size-lg",
1668
+ "values": {
1669
+ "desktop": 20,
1670
+ "touch": 24,
1671
+ "comfortable": 24
1672
+ },
1673
+ "usage": "玻璃按钮、标签栏里的图标。"
1674
+ },
1675
+ {
1676
+ "name": "icon-stroke",
1677
+ "value": "1.75px",
1678
+ "platforms": [
1679
+ "web"
1680
+ ],
1681
+ "usage": "线性图标在 24×24 viewBox 里的描边宽度,接近 SF Symbols 的常规粗细。"
1682
+ }
1683
+ ]
1684
+ }
1685
+ ]
1686
+ }