@deernova/style 0.1.0 → 0.3.0

package/skill/manifest.json

@@ -1,24 +1,4 @@
 {
-  "version": "0.1.0",
-  "sourceHash": "277411693f87d8b2b805a12f90482ef52a45f52dbfe51a2e607b683f0a1119b9",
-  "components": [
-    "Banner",
-    "Button",
-    "Card",
-    "CodeBlock",
-    "Composer",
-    "Cover",
-    "EmptyState",
-    "GlassControls",
-    "ListGroup",
-    "MacWindow",
-    "Message",
-    "PhoneScreen",
-    "Segmented",
-    "Sheet",
-    "Sidebar",
-    "StepRow",
-    "Tag",
-    "TextField"
-  ]
+  "version": "0.3.0",
+  "sourceHash": "fe10f84def992286ab1d1fcb7230de8cde61c4973cc3e366603517b0add8cb9d"
 }

package/skill/references/components/banner.md

@@ -0,0 +1,95 @@
+# 横幅与轻提示
+
+横幅是页面内的提示条，告诉用户一件需要知道的事，必要时附带一个解决动作。轻提示（Toast）是它的短暂版本。
+
+**需要提供**：语气（中性 / success / warning / danger）、标题（一句话说明状态）、正文（后果或解决办法）、可选的一个动作按钮；能关闭的横幅还要提供关闭动作。
+
+## 尺寸
+
+<!-- tokens:banner -->
+| Token | 桌面<br>Web 应用 · macOS 内容区 | 触控<br>iOS · iPadOS · Web 触屏 | 舒展<br>官网与文档 | 用途 |
+| --- | --- | --- | --- | --- |
+| `toast-height` | 36 | 40 | 40 | 轻提示胶囊的高度。 |
+| `banner-radius` | 10 | 12 | 12 | 横幅和贴在输入区上方的提示条的圆角。 |
+<!-- /tokens -->
+
+- 中性横幅：`surface-raised` 底、`line` 描边、`ink-secondary` 图标。有语气的横幅：对应的 `-soft` 底、无描边、图标用语气色。文字始终是 `ink` 和 `ink-secondary`。
+- 圆角 `banner-radius`，内边距上下 `space-2`、左右 `space-3`，图标 `icon-size-md`；标题 `type-body` 半粗，正文 `callout`。状态图标见 [图标](../foundations/iconography.md)。
+- 动作按钮用小号次按钮，放在右侧，一个横幅最多一个。
+- 和输入区有关的提示（额度将用完、网络断开）贴在 Composer 正上方，宽度和 Composer 一致，见 [Composer](composer.md)。
+- 轻提示：底部居中的玻璃胶囊，高 `toast-height`，2 秒后自动消失，只用来确认刚刚完成的操作（「已复制」「已保存」），文字用完成态，不放按钮。读屏用 `role="status"`。
+
+## Web
+
+```css
+.dn-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border: var(--stroke-line) solid var(--line);
+  border-radius: var(--banner-radius);
+  background: var(--surface-raised);
+}
+.dn-banner > .dn-icon { width: var(--icon-size-md); height: var(--icon-size-md); margin-top: calc((var(--type-body-line) - var(--icon-size-md)) / 2); color: var(--ink-secondary); }
+.dn-banner-text { flex: 1; min-width: 0; }
+.dn-banner-title { margin: 0; color: var(--ink); font: var(--weight-semibold) var(--type-body-size)/var(--type-body-line) var(--font-sans); }
+.dn-banner-body { margin: 0; color: var(--ink-secondary); font: var(--type-callout); }
+.dn-banner .dn-button { align-self: center; }
+.dn-banner.is-success { border-color: transparent; background: var(--success-soft); }
+.dn-banner.is-success > .dn-icon { color: var(--success); }
+.dn-banner.is-warning { border-color: transparent; background: var(--warning-soft); }
+.dn-banner.is-warning > .dn-icon { color: var(--warning); }
+.dn-banner.is-danger { border-color: transparent; background: var(--danger-soft); }
+.dn-banner.is-danger > .dn-icon { color: var(--danger); }
+
+.dn-toast { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--toast-height); padding: 0 var(--space-4) 0 var(--space-3); color: var(--ink); font: var(--weight-medium) var(--type-body-size)/1 var(--font-sans); }
+.dn-toast .dn-icon { width: var(--icon-size-md); height: var(--icon-size-md); color: var(--success); }
+```
+
+```html
+<div class="dn-stack">
+  <div class="dn-banner">
+    <svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg>
+    <div class="dn-banner-text"><p class="dn-banner-title">新版本已就绪</p><p class="dn-banner-body">重新打开应用后生效，未保存的内容会自动保留。</p></div>
+    <button class="dn-button is-sm" type="button">重新打开</button>
+  </div>
+  <div class="dn-banner is-warning">
+    <svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4l9 16H3z"/><path d="M12 10v4M12 17h.01"/></svg>
+    <div class="dn-banner-text"><p class="dn-banner-title">本月 AI 次数还剩 10%</p><p class="dn-banner-body">用完后可以继续写笔记，AI 功能会在 11 月 1 日恢复。</p></div>
+  </div>
+  <div class="dn-banner is-danger">
+    <svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M9 9l6 6M15 9l-6 6"/></svg>
+    <div class="dn-banner-text"><p class="dn-banner-title">同步失败</p><p class="dn-banner-body">网络连接已断开，恢复后会自动重试。</p></div>
+    <button class="dn-button is-sm" type="button">立即重试</button>
+  </div>
+  <div class="dn-glass dn-toast" role="status"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M8 12.5l2.5 2.5L16 9.5"/></svg>已复制到剪贴板</div>
+</div>
+```
+
+## SwiftUI
+
+```swift
+HStack(alignment: .top, spacing: Deernova.space2) {
+    Image(systemName: "exclamationmark.triangle.fill").foregroundStyle(.warning)
+    VStack(alignment: .leading, spacing: 2) {
+        Text("本月 AI 次数还剩 10%").font(.headline)
+        Text("用完后可以继续写笔记，AI 功能会在 11 月 1 日恢复。")
+            .font(.deernovaCallout).foregroundStyle(.inkSecondary)
+    }
+}
+.padding(.vertical, Deernova.space2).padding(.horizontal, Deernova.space3)
+.frame(maxWidth: .infinity, alignment: .leading)
+.background(.warningSoft, in: .rect(cornerRadius: Deernova.bannerRadius))
+
+// 轻提示
+Label("已复制到剪贴板", systemImage: "checkmark.circle.fill")
+    .padding(.horizontal, Deernova.space4).frame(height: Deernova.toastHeight)
+    .glassEffect(in: .capsule)
+```
+
+## 不要
+
+- 一个页面同时出现多个横幅。
+- 用横幅打广告；错误信息只写「出错了」。
+- 轻提示里放需要用户处理的事情（那应该用横幅或弹窗）。

package/skill/references/components/button.md

@@ -0,0 +1,181 @@
+# 按钮
+
+按钮执行一个动作。每个视图最多一个主按钮（`accent` 填充：浅色主题黑底白字，深色主题白底黑字），用来完成这一屏存在的理由。
+
+**需要提供**：标签（动词开头）、可选的图标、点击动作；加载中和禁用状态。
+
+## 变体
+
+- **主按钮** `is-primary`：`accent` 底、`on-accent` 字。保存、发送、购买这类关键动作，一屏最多一个。
+- **次按钮**（默认）：`fill-selected` 灰底、无描边、无阴影、`ink` 字。半透明的灰底放在任何纸面上都成立。
+- **文字按钮** `is-plain`：无底，`ink-secondary` 字，悬停时出现 `fill-hover`。工具栏和卡片里的次要操作。
+- **危险按钮** `is-danger`：`danger-soft` 底、`danger` 字。只有在最终确认弹窗里，才用实色的危险样式（SwiftUI 的 `role: .destructive`）。
+- **图标按钮** `dn-icon-button`：只有图标，无底，`ink-secondary`，必须有无障碍标签。
+
+## 尺寸
+
+<!-- tokens:button -->
+| Token | 桌面<br>Web 应用 · macOS 内容区 | 触控<br>iOS · iPadOS · Web 触屏 | 舒展<br>官网与文档 | 用途 |
+| --- | --- | --- | --- | --- |
+| `button-height-sm` | 24 | 30 | 32 | 小按钮的可见高度：列表行、卡片角落里的行内操作。 |
+| `button-height-md` | 28 | 36 | 36 | 默认按钮、图标按钮、发送按钮、步骤行的高度。 |
+| `button-height-lg` | 32 | 46 | 44 | 大按钮：空状态、引导页；触控端是整页唯一的通栏主按钮。 |
+| `button-padding-x-sm` | 8 | 12 | 14 | 小按钮左右内边距。上下内边距永远是 0。 |
+| `button-padding-x-md` | 12 | 16 | 18 | 默认按钮左右内边距。 |
+| `button-padding-x-lg` | 16 | 20 | 24 | 大按钮左右内边距。 |
+| `button-font-size-sm` | 12 | 13 | 13 | 小按钮字号。 |
+| `button-font-size-md` | 14 | 15 | 14 | 默认按钮字号。 |
+| `button-font-size-lg` | 14 | 16 | 15 | 大按钮字号。 |
+| `button-font-weight` | 500 | 600 | 500 | 按钮字重。 |
+| `button-radius` | 6 | 胶囊 | 胶囊 | 默认和大按钮的圆角：指针端是 radius-sm，触控端和官网是胶囊。 |
+| `button-radius-sm` | 4 | 胶囊 | 胶囊 | 小按钮的圆角。 |
+<!-- /tokens -->
+
+高度只由 `button-height-*` 决定：**上下内边距为 0，文字行高为 1**。按钮里的文字不能继承页面的行高，否则按钮会跟着页面行高变高。
+
+可见高度小于 `hit-min` 时（触控端的 30 和 36），点击区域用透明的命中区补足到 44，可见的按钮不变大。
+
+**怎么选尺寸**：按按钮所在的位置定，不随意挑。
+
+- 列表行、卡片角落里的行内操作（获取、关注、打开）→ 小号 `is-sm`。
+- 页面和卡片里的普通按钮，包括并排的两个按钮（以后再说 / 开启）→ 默认。同一行里的按钮用同一个尺寸。
+- 空状态、引导页的操作 → 大号 `is-lg`。触控端整页唯一的底部主操作（登录、订阅、开始使用）用大号加 `is-block` 通栏，一屏最多一个。
+- 导航栏、标签栏、工具栏里的按钮 → 用系统控件或[玻璃操作层](glass-controls.md)，不自己设尺寸。
+
+触控端比指针端大是有意的：手指比鼠标指针粗。三种尺寸放在手机里的样子见 `assets/screens/iphone-button-sizes-light.png`。
+
+## 状态
+
+- 悬停：次按钮在灰底上再叠一层 `fill-hover`，文字按钮出现 `fill-hover`，主按钮不透明度降到 `opacity-solid-hover`。
+- 焦点：`stroke-focus` 宽的 `focus-ring`，外偏移 `focus-offset`，只在键盘操作（`:focus-visible`）时显示。
+- 禁用：`opacity-disabled`，保持原位，不隐藏。
+- 加载：按钮宽度不变，把标签换成转圈，`aria-busy="true"`。
+
+## Web
+
+```css
+.dn-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-inline);
+  height: var(--button-height-md);
+  padding: 0 var(--button-padding-x-md); /* 上下永远是 0：高度只由 height 决定 */
+  border: 0;
+  border-radius: var(--button-radius);
+  background: var(--fill-selected);
+  color: var(--ink);
+  font: var(--button-font-weight) var(--button-font-size-md)/1 var(--font-sans); /* 行高 1，不继承页面行高 */
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color var(--duration-instant) var(--ease-standard), opacity var(--duration-instant) var(--ease-standard);
+}
+.dn-button:hover:not(:disabled) { background-image: linear-gradient(var(--fill-hover), var(--fill-hover)); }
+.dn-button:active:not(:disabled) { background-image: linear-gradient(var(--fill-selected), var(--fill-selected)); }
+.dn-button:focus-visible { outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: var(--focus-offset); }
+.dn-button:disabled { opacity: var(--opacity-disabled); cursor: default; }
+
+.dn-button.is-primary { background: var(--accent); color: var(--on-accent); }
+.dn-button.is-primary:hover:not(:disabled), .dn-button.is-primary:active { background-image: none; opacity: var(--opacity-solid-hover); }
+.dn-button.is-plain { background: transparent; color: var(--ink-secondary); }
+.dn-button.is-plain:hover:not(:disabled) { background: var(--fill-hover); color: var(--ink); }
+.dn-button.is-danger { background: var(--danger-soft); color: var(--danger); }
+
+.dn-button.is-sm { height: var(--button-height-sm); padding: 0 var(--button-padding-x-sm); border-radius: var(--button-radius-sm); font-size: var(--button-font-size-sm); }
+.dn-button.is-lg { height: var(--button-height-lg); padding: 0 var(--button-padding-x-lg); font-size: var(--button-font-size-lg); }
+.dn-button.is-block { width: 100%; }
+.dn-button .dn-icon { width: var(--icon-size-sm); height: var(--icon-size-sm); }
+
+.dn-icon-button {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: var(--button-height-md);
+  height: var(--button-height-md);
+  padding: 0;
+  border: 0;
+  border-radius: var(--button-radius);
+  background: transparent;
+  color: var(--ink-secondary);
+  cursor: pointer;
+  transition: background-color var(--duration-instant) var(--ease-standard);
+}
+.dn-icon-button:hover { background: var(--fill-hover); color: var(--ink); }
+.dn-icon-button:focus-visible { outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: var(--focus-offset); }
+
+/* 点击区域：可见尺寸不变，用透明的伪元素把可点范围撑到 hit-min。
+   不要用 padding 补：padding 在背景里面，会把可见的按钮一起撑大。 */
+.dn-button::before, .dn-icon-button::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: max(100%, var(--hit-min));
+  height: max(100%, var(--hit-min));
+  transform: translate(-50%, -50%);
+}
+```
+
+```html
+<div class="dn-row">
+  <button class="dn-button is-primary" type="button">保存</button>
+  <button class="dn-button" type="button">取消</button>
+  <button class="dn-button is-plain" type="button">跳过</button>
+  <button class="dn-button is-danger" type="button">删除</button>
+  <button class="dn-button is-primary" type="button" disabled>保存</button>
+  <button class="dn-icon-button" type="button" aria-label="搜索"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4.5-4.5"/></svg></button>
+</div>
+<div class="dn-row">
+  <button class="dn-button is-sm" type="button">获取</button>
+  <button class="dn-button" type="button"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>新建笔记</button>
+  <button class="dn-button is-primary is-lg" type="button">开始使用</button>
+</div>
+```
+
+## SwiftUI
+
+macOS 直接用系统按钮，`.controlSize(.regular)` 就是 24pt。iOS 的可见高度和点击区域分开处理。
+
+```swift
+Button("保存") { save() }
+    .buttonStyle(.borderedProminent)       // 主按钮，颜色跟随 .tint(.brandAccent)
+Button("取消", role: .cancel) { dismiss() }
+    .buttonStyle(.bordered)
+Button("删除", role: .destructive) { delete() }
+
+// iOS 默认按钮：看起来 36pt，点击区域补足到 44pt
+Button("继续") { next() }
+    .font(.subheadline.weight(.semibold))
+    .buttonStyle(.borderedProminent)
+    .buttonBorderShape(.capsule)
+    .controlSize(.regular)
+    .padding(.vertical, (Deernova.hitMin - Deernova.buttonHeightMd) / 2) // 写在 buttonStyle 之后，是透明的
+    .contentShape(.rect)
+
+// iOS 底部通栏主按钮
+Button { start() } label: {
+    Text("开始使用").font(.callout.weight(.semibold))
+        .frame(maxWidth: .infinity, minHeight: Deernova.buttonHeightLg)
+}
+.buttonStyle(.borderedProminent)
+.buttonBorderShape(.capsule)
+
+// 加载中：宽度不变，标签换成转圈
+Button { save() } label: {
+    ZStack { Text("保存").opacity(isSaving ? 0 : 1); if isSaving { ProgressView() } }
+}
+```
+
+放在玻璃层上时改用 `.glassProminent` / `.glass`，见 [玻璃操作层](glass-controls.md)。
+
+## 不要
+
+- 用上下内边距撑出按钮高度，或让按钮继承页面的行高。
+- 为了凑 44 点击区域把可见的按钮做成 44 高。
+- 给次按钮加描边和阴影（它是一块灰底，不是浮起来的卡片）。
+- 一个视图里放两个主按钮；为了强调把次要按钮也做成黑底。
+- 用「确定」「OK」做标签；按钮里写一整句话。
+- 把官网的胶囊大按钮搬进应用界面。

package/skill/references/components/card.md

@@ -0,0 +1,89 @@
+# 卡片
+
+卡片把一条内容的摘要装进一个可以点开的块里，用于网格和看板。
+
+**需要提供**：标题、一到两行摘要、元信息（时间、分类、状态[标签](tag.md)），点击后打开详情。
+
+## 尺寸
+
+<!-- tokens:card -->
+| Token | 桌面<br>Web 应用 · macOS 内容区 | 触控<br>iOS · iPadOS · Web 触屏 | 舒展<br>官网与文档 | 用途 |
+| --- | --- | --- | --- | --- |
+| `card-padding-x` | 16 | 16 | 24 | 卡片左右内边距。 |
+| `card-padding-y` | 12 | 14 | 24 | 卡片上下内边距。 |
+| `card-radius` | 12 | 12 | 12 | 卡片、分组列表、任务清单的圆角。 |
+| `card-gap` | 12 | 12 | 16 | 卡片网格的间距。 |
+<!-- /tokens -->
+
+- `surface` 底、1px（`stroke-line`）`line` 描边，不加阴影，圆角 `card-radius`。
+- 标题用 `type-headline`（无衬线、半粗）；摘要用 `footnote`、`ink-secondary`，最多 3 行；元信息用 `caption`、`ink-tertiary`。内部间距 `space-1`。
+- 悬停时描边加深为 `line-control`。选中时描边变成 `stroke-control` 宽的 `ink`。
+- 网格间距 `card-gap`；每张卡片高度由内容决定，同一行顶部对齐。
+
+## Web
+
+整张卡片可点时，用 `<a>` 或 `<button>` 包住整张卡片，不要在卡片里再放一个主按钮。
+
+```css
+.dn-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--card-gap); align-items: start; }
+.dn-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  min-width: 0;
+  padding: var(--card-padding-y) var(--card-padding-x);
+  border: var(--stroke-line) solid var(--line);
+  border-radius: var(--card-radius);
+  background: var(--surface);
+  color: var(--ink);
+  text-decoration: none;
+  transition: border-color var(--duration-instant) var(--ease-standard);
+}
+a.dn-card:hover, button.dn-card:hover { border-color: var(--line-control); }
+.dn-card:focus-visible { outline: var(--stroke-focus) solid var(--focus-ring); outline-offset: var(--focus-offset); }
+.dn-card[aria-current="true"], .dn-card.is-selected { border-color: var(--ink); }
+.dn-card-title { margin: 0; font: var(--type-headline); }
+.dn-card-summary {
+  display: -webkit-box;
+  margin: 0;
+  overflow: hidden;
+  color: var(--ink-secondary);
+  font: var(--type-footnote);
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+.dn-card-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--ink-tertiary); font: var(--weight-regular) var(--type-caption-size)/var(--type-caption-line) var(--font-sans); font-variant-numeric: tabular-nums; }
+```
+
+```html
+<div class="dn-card-grid">
+  <a class="dn-card" href="#"><h3 class="dn-card-title">本周回顾</h3><p class="dn-card-summary">完成 12 条笔记，整理了两个项目的待办。</p><div class="dn-card-meta">今天 09:41</div></a>
+  <a class="dn-card is-selected" href="#" aria-current="true"><h3 class="dn-card-title">读书摘录</h3><p class="dn-card-summary">好的工具会退到背景里，让人只看见自己的工作。</p><div class="dn-card-meta">昨天</div></a>
+  <a class="dn-card" href="#"><h3 class="dn-card-title">旅行清单</h3><p class="dn-card-summary">护照、转换插头、两本书、一件薄外套。</p><div class="dn-card-meta">10 月 28 日</div></a>
+</div>
+```
+
+## SwiftUI
+
+```swift
+VStack(alignment: .leading, spacing: Deernova.space1) {
+    Text(note.title).font(.deernovaHeadline)
+    Text(note.summary).font(.deernovaFootnote).foregroundStyle(.inkSecondary).lineLimit(3)
+    Text(note.date, format: .relative(presentation: .named))
+        .font(.caption).foregroundStyle(.inkTertiary)
+}
+.padding(.horizontal, Deernova.cardPaddingX)
+.padding(.vertical, Deernova.cardPaddingY)
+.frame(maxWidth: .infinity, alignment: .leading)
+.background(.surface, in: .rect(cornerRadius: Deernova.cardRadius))
+.overlay(
+    RoundedRectangle(cornerRadius: Deernova.cardRadius)
+        .strokeBorder(isSelected ? .ink : .line, lineWidth: Deernova.strokeLine)
+)
+```
+
+## 不要
+
+- 给卡片加阴影或玻璃效果。
+- 在卡片左侧加一条彩色竖条。
+- 卡片里套卡片；一张卡片里放多个主按钮。

package/skill/references/components/code-block.md

@@ -0,0 +1,77 @@
+# 代码块
+
+展示代码、命令或结构化数据，带语言标签和复制按钮。
+
+**需要提供**：代码文本、语言名称；可选的文件名（替代语言名显示在表头）。
+
+## 尺寸
+
+<!-- tokens:code-block -->
+| Token | 桌面<br>Web 应用 · macOS 内容区 | 触控<br>iOS · iPadOS · Web 触屏 | 舒展<br>官网与文档 | 用途 |
+| --- | --- | --- | --- | --- |
+| `code-header-height` | 32 | 36 | 36 | 代码块表头的高度。 |
+<!-- /tokens -->
+
+- `surface-sunken` 底、`line` 细线描边、`radius-md`。表头高 `code-header-height`，左边是语言名或文件名（`caption` 字号、等宽、`ink-tertiary`），右边是一个小号文字按钮「复制」；点击后显示「已复制」1.5 秒，按钮宽度不变。
+- 代码用 `type-code`，内边距上下 `space-2`、左右 `space-3`，过长时横向滚动，不自动换行。
+- 语法高亮只用灰阶：关键字 `ink` 加粗，字符串 `ink-secondary`，注释 `ink-tertiary` 加斜体，其余 `ink`。这些颜色在 `surface-sunken` 上都不低于 4.5:1。
+
+## Web
+
+```css
+.dn-code { overflow: hidden; min-width: 0; border: var(--stroke-line) solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); }
+.dn-code-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  height: var(--code-header-height);
+  padding: 0 var(--space-1) 0 var(--space-3);
+  border-bottom: var(--stroke-line) solid var(--line);
+  color: var(--ink-tertiary);
+  font: var(--weight-regular) var(--type-caption-size)/1 var(--font-mono);
+}
+.dn-code-header .dn-button { margin-left: auto; }
+.dn-code pre { margin: 0; padding: var(--space-2) var(--space-3); overflow-x: auto; color: var(--ink); font: var(--type-code); }
+.dn-code code { font: inherit; }
+.dn-code .tk-keyword { color: var(--ink); font-weight: var(--weight-semibold); }
+.dn-code .tk-string { color: var(--ink-secondary); }
+.dn-code .tk-comment { color: var(--ink-tertiary); font-style: italic; }
+```
+
+```html
+<div class="dn-code">
+  <div class="dn-code-header">swift<button class="dn-button is-plain is-sm" type="button"><svg class="dn-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/></svg>复制</button></div>
+  <pre><code><span class="tk-comment">// 统计本周完成的笔记数</span>
+<span class="tk-keyword">let</span> done = notes.filter { $0.completedAt &gt;= start }
+<span class="tk-keyword">print</span>(<span class="tk-string">"本周完成 \(done.count) 条"</span>)</code></pre>
+</div>
+```
+
+## SwiftUI
+
+```swift
+VStack(alignment: .leading, spacing: 0) {
+    HStack {
+        Text(language).font(.caption.monospaced()).foregroundStyle(.inkTertiary)
+        Spacer()
+        Button(copied ? "已复制" : "复制", systemImage: copied ? "checkmark" : "doc.on.doc") { copy() }
+            .buttonStyle(.borderless).controlSize(.small)
+    }
+    .padding(.horizontal, Deernova.space3).frame(height: Deernova.codeHeaderHeight)
+    Divider()
+    ScrollView(.horizontal) {
+        Text(highlighted)                 // 用 AttributedString 按上面的颜色着色
+            .font(.deernovaCode)
+            .textSelection(.enabled)
+            .padding(.vertical, Deernova.space2).padding(.horizontal, Deernova.space3)
+    }
+}
+.background(.surfaceSunken, in: .rect(cornerRadius: Deernova.radiusMd))
+.overlay(RoundedRectangle(cornerRadius: Deernova.radiusMd).strokeBorder(.line, lineWidth: 1 / displayScale))
+```
+
+## 不要
+
+- 用彩色的编辑器配色主题（和黑白灰的整体风格冲突）。
+- 给代码块加阴影。
+- 自动换行打乱缩进。