@ant-design/cli 6.4.4 → 6.5.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.
- package/README.md +60 -2
- package/README.zh-CN.md +59 -1
- package/data/bug-versions.json.gz +0 -0
- package/data/design-v6.md +66 -22
- package/data/v6.4.5.json.gz +0 -0
- package/data/v6.5.0.json.gz +0 -0
- package/data/v6.json.gz +0 -0
- package/data/versions.json +2 -1
- package/dist/index.js +16800 -16256
- package/package.json +6 -7
- package/data/v6.4.4.json.gz +0 -0
package/README.md
CHANGED
|
@@ -41,7 +41,7 @@ npx skills add ant-design/ant-design-cli # install as an agent skill
|
|
|
41
41
|
- 🤖 **Agent-optimized** — `--format json` on every command. Structured errors with codes and suggestions. Clean stdout/stderr separation.
|
|
42
42
|
- 🌍 **Bilingual** — Every component name, description, and doc has both English and Chinese. Switch with `--lang zh`.
|
|
43
43
|
- 🔮 **Smart matching** — Typo `Buttn`? The CLI suggests `Button` using Levenshtein distance, with first-letter preference.
|
|
44
|
-
- 🧩 **
|
|
44
|
+
- 🧩 **18 commands** — From prop lookup to project-wide lint, from design token queries to cross-version API diffing.
|
|
45
45
|
- 🔌 **MCP server** — `antd mcp` starts a stdio server for native IDE integration (Claude Code, Cursor, VS Code, etc.).
|
|
46
46
|
|
|
47
47
|
<br>
|
|
@@ -132,6 +132,7 @@ antd lint ./src # Check deprecated APIs & best practices
|
|
|
132
132
|
antd migrate 3 4 # v3 → v4 migration guide
|
|
133
133
|
antd migrate 4 5 --apply ./src # Agent-ready migration prompt
|
|
134
134
|
antd mcp # Start MCP server for IDE integration
|
|
135
|
+
antd setup --client claude # Set up MCP/Skill for AI agents
|
|
135
136
|
antd upgrade # Upgrade CLI to latest version
|
|
136
137
|
```
|
|
137
138
|
|
|
@@ -174,6 +175,7 @@ antd upgrade # Upgrade CLI to latest version
|
|
|
174
175
|
| Command | Description |
|
|
175
176
|
|---|---|
|
|
176
177
|
| [`antd mcp`](#antd-mcp) | Start MCP stdio server for IDE agent integration |
|
|
178
|
+
| [`antd setup`](#antd-setup) | Write local MCP config or install skills for Claude Code, Cursor, VS Code, or Codex |
|
|
177
179
|
| [`antd upgrade`](#antd-upgrade) | Upgrade the CLI to the latest version |
|
|
178
180
|
|
|
179
181
|
<br>
|
|
@@ -307,7 +309,7 @@ antd changelog 4.24.0 5.0.0 Select # API diff for Select only
|
|
|
307
309
|
|
|
308
310
|
### `antd doctor`
|
|
309
311
|
|
|
310
|
-
Runs 10 checks against your project: antd installed, React version compat, duplicate antd/dayjs/cssinjs installs, peer dependency satisfaction, theme config, babel-plugin-import usage, and CSS-in-JS setup.
|
|
312
|
+
Runs 10 checks against your project: antd installed and bundled known-bug version data, React version compat, duplicate antd/dayjs/cssinjs installs, peer dependency satisfaction, theme config, babel-plugin-import usage, and CSS-in-JS setup. All checks use bundled/local data and do not make network calls.
|
|
311
313
|
|
|
312
314
|
```bash
|
|
313
315
|
antd doctor
|
|
@@ -451,6 +453,62 @@ Configuration:
|
|
|
451
453
|
|
|
452
454
|
**MCP Prompts (2):** `antd-expert`, `antd-page-generator`
|
|
453
455
|
|
|
456
|
+
### `antd setup`
|
|
457
|
+
|
|
458
|
+
Configure a local AI agent project with Ant Design MCP and/or the bundled `skills/antd` guidance. The command can write the client-specific MCP config file, install a client-appropriate skill or skill reference, and add managed instructions for agents.
|
|
459
|
+
|
|
460
|
+
```bash
|
|
461
|
+
antd setup --client claude # write .mcp.json
|
|
462
|
+
antd setup --client cursor # write .cursor/mcp.json
|
|
463
|
+
antd setup --client vscode # write .vscode/mcp.json
|
|
464
|
+
antd setup --client codex # install Codex project skill
|
|
465
|
+
antd setup --client claude --dry-run # preview without writing files
|
|
466
|
+
antd setup --client claude --project ./my-app
|
|
467
|
+
antd setup --client claude --version 5.29.3 --lang zh
|
|
468
|
+
antd setup --client claude --check # verify existing config
|
|
469
|
+
antd setup --client claude --mode skill # install Claude skill and write instructions
|
|
470
|
+
antd setup --client claude --mode both # write MCP config, install skill, and write instructions
|
|
471
|
+
antd setup --client claude --write-instructions
|
|
472
|
+
```
|
|
473
|
+
|
|
474
|
+
Modes:
|
|
475
|
+
|
|
476
|
+
| Mode | Behavior |
|
|
477
|
+
|---|---|
|
|
478
|
+
| `mcp` | Writes the client MCP config only. This is the default. |
|
|
479
|
+
| `skill` | Installs the bundled Ant Design guidance for the selected client and writes a managed instruction block. |
|
|
480
|
+
| `both` | Writes MCP config, installs the skill or skill reference, and writes the managed instruction block. |
|
|
481
|
+
|
|
482
|
+
Supported clients:
|
|
483
|
+
|
|
484
|
+
| Client | Config file | Server key | Skill target | Instructions file |
|
|
485
|
+
|---|---|---|---|---|
|
|
486
|
+
| `claude` | `.mcp.json` | `mcpServers` | `.claude/skills/antd/` | `CLAUDE.md` |
|
|
487
|
+
| `cursor` | `.cursor/mcp.json` | `mcpServers` | `.agents/skills/antd/` shared skill | `AGENTS.md` |
|
|
488
|
+
| `vscode` | `.vscode/mcp.json` | `servers` | `.agents/skills/antd/` shared skill | `AGENTS.md` |
|
|
489
|
+
| `codex` | - | - | `.agents/skills/antd/` shared skill | `AGENTS.md` |
|
|
490
|
+
|
|
491
|
+
Generated server entry:
|
|
492
|
+
|
|
493
|
+
```json
|
|
494
|
+
{
|
|
495
|
+
"mcpServers": {
|
|
496
|
+
"antd": {
|
|
497
|
+
"command": "npx",
|
|
498
|
+
"args": ["-y", "@ant-design/cli", "mcp", "--version", "5.29.3", "--lang", "zh"]
|
|
499
|
+
}
|
|
500
|
+
}
|
|
501
|
+
}
|
|
502
|
+
```
|
|
503
|
+
|
|
504
|
+
Skill instructions are written to the selected client's instruction file: Claude uses `CLAUDE.md`; Cursor, VS Code, and Codex use `AGENTS.md`. Claude gets a native project skill under `.claude/skills/antd/`; Cursor, VS Code, and Codex get the same bundled guidance under `.agents/skills/antd/` and an instruction block telling agents when to use it.
|
|
505
|
+
|
|
506
|
+
Codex setup currently supports skill installation only. Use `antd setup --client codex --mode skill`, or omit `--mode` because Codex defaults to `skill`.
|
|
507
|
+
|
|
508
|
+
Use `--check` to validate an existing setup without writing files. It exits with code `0` when the selected mode is configured, and `1` when config, skill files, or instructions are missing or different.
|
|
509
|
+
|
|
510
|
+
Use `--write-instructions` with the default `mcp` mode to also add an idempotent managed block to the selected agent instructions file, telling agents to use the configured `antd` MCP server before generating Ant Design code. With `--check`, it also verifies that instruction block.
|
|
511
|
+
|
|
454
512
|
### `antd upgrade`
|
|
455
513
|
|
|
456
514
|
Upgrade the CLI itself to the latest version published on npm. Automatically detects which package manager installed the CLI (npm, yarn, pnpm, bun, cnpm, utoo) and runs the corresponding upgrade command.
|
package/README.zh-CN.md
CHANGED
|
@@ -41,7 +41,7 @@ npx skills add ant-design/ant-design-cli # 安装为 Agent Skill
|
|
|
41
41
|
- 🤖 **Agent 优化** — 所有命令支持 `--format json`。结构化错误码与修复建议。stdout/stderr 严格分离。
|
|
42
42
|
- 🌍 **双语输出** — 每个组件名、描述和文档均有中英文。通过 `--lang zh` 切换。
|
|
43
43
|
- 🔮 **智能纠错** — 输入 `Buttn`?CLI 基于 Levenshtein 距离建议 `Button`,优先匹配首字母相同的候选。
|
|
44
|
-
- 🧩 **
|
|
44
|
+
- 🧩 **18 条命令** — 从 Prop 查询到项目级 Lint,从 Design Token 到跨版本 API 对比。
|
|
45
45
|
- 🔌 **MCP 服务** — `antd mcp` 启动 stdio 服务,原生集成 Claude Desktop、Cursor 等 IDE。
|
|
46
46
|
|
|
47
47
|
<br>
|
|
@@ -119,6 +119,7 @@ antd lint ./src # 检查废弃 API 和最佳实践
|
|
|
119
119
|
antd migrate 3 4 # v3 → v4 迁移指南
|
|
120
120
|
antd migrate 4 5 --apply ./src # 生成 Agent 迁移提示
|
|
121
121
|
antd mcp # 启动 MCP 服务,供 IDE 集成
|
|
122
|
+
antd setup --client claude # 为 AI Agent 接入 MCP/Skill
|
|
122
123
|
antd upgrade # 升级 CLI 到最新版本
|
|
123
124
|
```
|
|
124
125
|
|
|
@@ -161,6 +162,7 @@ antd upgrade # 升级 CLI 到最新版本
|
|
|
161
162
|
| 命令 | 说明 |
|
|
162
163
|
|---|---|
|
|
163
164
|
| [`antd mcp`](#antd-mcp) | 启动 MCP stdio 服务,供 IDE Agent 集成 |
|
|
165
|
+
| [`antd setup`](#antd-setup) | 为 Claude Code、Cursor、VS Code 或 Codex 接入 Ant Design MCP/Skill |
|
|
164
166
|
| [`antd upgrade`](#antd-upgrade) | 升级 CLI 到最新版本 |
|
|
165
167
|
|
|
166
168
|
<br>
|
|
@@ -438,6 +440,62 @@ IDE 配置(`claude_desktop_config.json`):
|
|
|
438
440
|
|
|
439
441
|
**MCP 提示词(2 个):** `antd-expert`、`antd-page-generator`
|
|
440
442
|
|
|
443
|
+
### `antd setup`
|
|
444
|
+
|
|
445
|
+
为本地 AI Agent 项目接入 Ant Design MCP 和/或内置的 `skills/antd` 指南。该命令可以写入对应客户端的 MCP 配置、安装适配客户端的技能或技能参考,并为 Agent 写入托管指令。
|
|
446
|
+
|
|
447
|
+
```bash
|
|
448
|
+
antd setup --client claude # 写入 .mcp.json
|
|
449
|
+
antd setup --client cursor # 写入 .cursor/mcp.json
|
|
450
|
+
antd setup --client vscode # 写入 .vscode/mcp.json
|
|
451
|
+
antd setup --client codex # 安装 Codex 项目技能
|
|
452
|
+
antd setup --client claude --dry-run # 预览配置,不写入文件
|
|
453
|
+
antd setup --client claude --project ./my-app
|
|
454
|
+
antd setup --client claude --version 5.29.3 --lang zh
|
|
455
|
+
antd setup --client claude --check # 校验已有配置
|
|
456
|
+
antd setup --client claude --mode skill # 安装 Claude 技能并写入指令
|
|
457
|
+
antd setup --client claude --mode both # 写入 MCP 配置、安装技能并写入指令
|
|
458
|
+
antd setup --client claude --write-instructions
|
|
459
|
+
```
|
|
460
|
+
|
|
461
|
+
模式:
|
|
462
|
+
|
|
463
|
+
| 模式 | 行为 |
|
|
464
|
+
|---|---|
|
|
465
|
+
| `mcp` | 只写入客户端 MCP 配置。这是默认模式。 |
|
|
466
|
+
| `skill` | 为所选客户端安装内置 Ant Design 指南,并写入托管指令。 |
|
|
467
|
+
| `both` | 写入 MCP 配置、安装技能或技能参考,并写入托管指令。 |
|
|
468
|
+
|
|
469
|
+
支持的客户端:
|
|
470
|
+
|
|
471
|
+
| 客户端 | 配置文件 | 服务字段 | 技能位置 | 指令文件 |
|
|
472
|
+
|---|---|---|---|---|
|
|
473
|
+
| `claude` | `.mcp.json` | `mcpServers` | `.claude/skills/antd/` | `CLAUDE.md` |
|
|
474
|
+
| `cursor` | `.cursor/mcp.json` | `mcpServers` | `.agents/skills/antd/` 共享技能 | `AGENTS.md` |
|
|
475
|
+
| `vscode` | `.vscode/mcp.json` | `servers` | `.agents/skills/antd/` 共享技能 | `AGENTS.md` |
|
|
476
|
+
| `codex` | - | - | `.agents/skills/antd/` 共享技能 | `AGENTS.md` |
|
|
477
|
+
|
|
478
|
+
生成的服务项:
|
|
479
|
+
|
|
480
|
+
```json
|
|
481
|
+
{
|
|
482
|
+
"mcpServers": {
|
|
483
|
+
"antd": {
|
|
484
|
+
"command": "npx",
|
|
485
|
+
"args": ["-y", "@ant-design/cli", "mcp", "--version", "5.29.3", "--lang", "zh"]
|
|
486
|
+
}
|
|
487
|
+
}
|
|
488
|
+
}
|
|
489
|
+
```
|
|
490
|
+
|
|
491
|
+
技能指令会写入所选客户端对应的指令文件:Claude 使用 `CLAUDE.md`,Cursor、VS Code 和 Codex 使用 `AGENTS.md`。Claude 会获得 `.claude/skills/antd/` 下的项目级原生技能;Cursor、VS Code 和 Codex 会获得同一份 `.agents/skills/antd/` 共享技能,并通过指令区块告诉 Agent 何时使用。
|
|
492
|
+
|
|
493
|
+
Codex setup 目前只支持技能安装。请使用 `antd setup --client codex --mode skill`,也可以省略 `--mode`,因为 Codex 默认使用 `skill` 模式。
|
|
494
|
+
|
|
495
|
+
使用 `--check` 可以只校验已有配置,不写入文件。当所选模式已正确配置时退出码为 `0`,配置、技能文件或指令缺失/不一致时退出码为 `1`。
|
|
496
|
+
|
|
497
|
+
在默认 `mcp` 模式下使用 `--write-instructions`,可以额外向选中的 Agent 指令文件写入一个可重复更新的托管区块,提示 Agent 在生成 Ant Design 代码前优先使用已配置的 `antd` MCP 服务。与 `--check` 一起使用时,也会校验该指令区块。
|
|
498
|
+
|
|
441
499
|
### `antd upgrade`
|
|
442
500
|
|
|
443
501
|
升级 CLI 自身到 npm 上发布的最新版本。自动检测安装 CLI 的包管理器(npm、yarn、pnpm、bun、cnpm、utoo)并执行对应的升级命令。
|
|
Binary file
|
package/data/design-v6.md
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
+
version: alpha
|
|
2
3
|
name: Ant Design
|
|
3
4
|
description: Enterprise-grade React UI design system from Ant Group, built around the values Natural, Certain, Meaningful, and Growing.
|
|
4
5
|
colors:
|
|
@@ -8,6 +9,7 @@ colors:
|
|
|
8
9
|
error: '#FF4D4F'
|
|
9
10
|
info: '#1677FF'
|
|
10
11
|
blue: '#1677FF'
|
|
12
|
+
blue-7: '#0958D9'
|
|
11
13
|
purple: '#722ED1'
|
|
12
14
|
cyan: '#13C2C2'
|
|
13
15
|
green: '#52C41A'
|
|
@@ -168,6 +170,37 @@ components:
|
|
|
168
170
|
dropdown-item-hover:
|
|
169
171
|
backgroundColor: '{colors.surface-container}'
|
|
170
172
|
textColor: '{colors.on-surface}'
|
|
173
|
+
alert-success:
|
|
174
|
+
backgroundColor: '#F6FFED'
|
|
175
|
+
textColor: '{colors.on-surface}'
|
|
176
|
+
rounded: '{rounded.lg}'
|
|
177
|
+
padding: 8px 12px
|
|
178
|
+
alert-warning:
|
|
179
|
+
backgroundColor: '#FFFBE6'
|
|
180
|
+
textColor: '{colors.on-surface}'
|
|
181
|
+
rounded: '{rounded.lg}'
|
|
182
|
+
padding: 8px 12px
|
|
183
|
+
alert-error:
|
|
184
|
+
backgroundColor: '#FFF2F0'
|
|
185
|
+
textColor: '{colors.on-surface}'
|
|
186
|
+
rounded: '{rounded.lg}'
|
|
187
|
+
padding: 8px 12px
|
|
188
|
+
alert-info:
|
|
189
|
+
backgroundColor: '#E6F4FF'
|
|
190
|
+
textColor: '{colors.on-surface}'
|
|
191
|
+
rounded: '{rounded.lg}'
|
|
192
|
+
padding: 8px 12px
|
|
193
|
+
badge-status-error:
|
|
194
|
+
backgroundColor: '{colors.error}'
|
|
195
|
+
rounded: '{rounded.full}'
|
|
196
|
+
width: 6px
|
|
197
|
+
height: 6px
|
|
198
|
+
tag-blue:
|
|
199
|
+
backgroundColor: '#E6F4FF'
|
|
200
|
+
textColor: '{colors.blue-7}'
|
|
201
|
+
typography: '{typography.body-sm}'
|
|
202
|
+
rounded: '{rounded.md}'
|
|
203
|
+
padding: 0 7px
|
|
171
204
|
---
|
|
172
205
|
|
|
173
206
|
## Overview
|
|
@@ -183,27 +216,17 @@ Four values guide every decision in the system:
|
|
|
183
216
|
- **Meaningful.** Visual emphasis is reserved for action. Decoration that does not communicate is removed.
|
|
184
217
|
- **Growing.** The system scales from small forms to dense tables to multi-tenant admin consoles without losing coherence.
|
|
185
218
|
|
|
186
|
-
## Customization
|
|
187
|
-
|
|
188
|
-
Every value in the YAML front-matter above is a **default** produced by `defaultAlgorithm` — the light theme. The system is designed to be re-skinned without editing this file or overriding individual tokens by hand.
|
|
189
|
-
|
|
190
|
-
Three layers of customization exist:
|
|
191
|
-
|
|
192
|
-
1. **Seed token overrides.** Pass `theme.token` to `ConfigProvider` to replace any seed. The six color seeds (`colorPrimary`, `colorSuccess`, `colorWarning`, `colorError`, `colorInfo`, plus the neutral base) each expand automatically through `@ant-design/colors` into a ten-step gradient covering background tint, hover, active, and outline variants — change the seed, and the entire derived palette moves with it. Spacing, radius, and font-size seeds work the same way.
|
|
193
|
-
|
|
194
|
-
2. **Algorithm switching.** Set `theme.algorithm` to swap the entire derivation logic. `darkAlgorithm` derives a dark surface ladder, inverted text alphas, and adjusted shadow values from the same seeds — do not invert colors manually; the algorithm accounts for non-linear gradient stops that flat inversion cannot reproduce. `compactAlgorithm` reduces control heights and spacing while preserving the same palette.
|
|
195
|
-
|
|
196
|
-
3. **Component-level overrides.** `theme.components.Button` (or any component's token namespace) can override a single component's derived tokens without affecting others — for example, changing the Button border radius without touching Input or Select.
|
|
197
|
-
|
|
198
219
|
## Colors
|
|
199
220
|
|
|
200
|
-
The palette is built from
|
|
221
|
+
The palette is built from one **primary** brand seed, four semantic state seeds (`success`, `warning`, `error`, `info`), and neutral base colors for text and surfaces. Color seeds expand automatically through `@ant-design/colors` into gradient steps covering background tint, hover, active, and outline variants — change the seed, and the entire derived palette moves with it.
|
|
201
222
|
|
|
202
|
-
`#1677FF` was chosen as the primary because blue reads as trustworthy and focused without the corporate flatness of a darker navy or the playfulness of a saturated cyan. It
|
|
223
|
+
`#1677FF` was chosen as the primary because blue reads as trustworthy and focused without the corporate flatness of a darker navy or the playfulness of a saturated cyan. It is the default brand color for actions, links, focus rings, selected navigation, and active tabs.
|
|
224
|
+
|
|
225
|
+
Accessibility note: this file records Ant Design's default visual tokens. Some brand-color pairs, especially white text on `#1677FF` and primary text on pale selected backgrounds, are below WCAG AA's 4.5:1 contrast threshold for small text. For strict accessibility targets, darken `colorPrimary` through `ConfigProvider` or use component-specific token overrides rather than inventing one-off colors.
|
|
203
226
|
|
|
204
227
|
Neutral text and overlays in the runtime token system are expressed as `rgba(0, 0, 0, α)` rather than flat grey hex values. The reason is overlay: when text sits above a tinted card or a colored cell highlight, an opaque grey breaks the tint, while a transparent black blends naturally. The four standard alpha steps are `0.88` (primary text, exported here as `#1F1F1F`), `0.65` (secondary text, `#595959`), `0.45` (tertiary / description text), and `0.25` (placeholder / disabled, `#BFBFBF`). The hex values listed in this document are the equivalent composited result on a white surface, suitable for static export targets that require hex; downstream consumers that support alpha should prefer the `rgba()` form from `@ant-design/cssinjs`.
|
|
205
228
|
|
|
206
|
-
The
|
|
229
|
+
The preset colors (`blue`, `purple`, `cyan`, `green`, `magenta`, `red`, `orange`, `yellow`, `volcano`, `geekblue`, `gold`, `lime`; `pink` is a deprecated alias of `magenta` in runtime tokens) are reserved for tags, charts, and categorical visualization — never for primary UI affordances. Use functional colors (`success`/`warning`/`error`/`info`) for status, and reserve `primary` for the single most important action on each screen.
|
|
207
230
|
|
|
208
231
|
## Typography
|
|
209
232
|
|
|
@@ -229,12 +252,13 @@ Never hard-code `#FFF` or `#FAFAFA` in product code. Read the token. The three-l
|
|
|
229
252
|
|
|
230
253
|
Ant Design is **flat-first**. Borders and tonal contrast carry hierarchy. Shadows appear only on surfaces that genuinely float above their context.
|
|
231
254
|
|
|
232
|
-
|
|
255
|
+
Shadow tokens are generated from `colorShadow`, so the same names adapt across light and dark themes. The core tiers are:
|
|
233
256
|
|
|
234
|
-
- **Tertiary** —
|
|
235
|
-
- **
|
|
236
|
-
- **
|
|
237
|
-
- **
|
|
257
|
+
- **Tertiary** (`boxShadowTertiary`) — the light raised-surface shadow: `0 1px 2px 0 rgba(0,0,0,0.05), 0 1px 6px -1px rgba(0,0,0,0.03), 0 2px 4px 0 rgba(0,0,0,0.03)`.
|
|
258
|
+
- **Popup** (`boxShadow` and `boxShadowSecondary`) — the standard floating-layer shadow: `0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)`.
|
|
259
|
+
- **Card** (`boxShadowCard`) — a card-specific raised shadow with tighter spread, used when cards need separation from the container.
|
|
260
|
+
- **Directional drawer and overflow shadows** (`boxShadowDrawer*`, `boxShadowTabsOverflow*`) — specialized tokens for edge-attached surfaces and scroll affordances.
|
|
261
|
+
- **Popover arrow** (`boxShadowPopoverArrow`) — used only for the small triangular pointer on tooltip and popover arrows.
|
|
238
262
|
|
|
239
263
|
Motion uses three durations and a small library of cubic-bezier easings, all exposed as tokens:
|
|
240
264
|
|
|
@@ -259,18 +283,20 @@ Full-pill (`rounded.full`, 9999 px) is reserved for circular avatars, badges, an
|
|
|
259
283
|
|
|
260
284
|
## Components
|
|
261
285
|
|
|
262
|
-
|
|
286
|
+
Component archetypes capture the system's most common surfaces and states. Each entry below maps to the token references in the YAML front-matter.
|
|
263
287
|
|
|
264
288
|
- **Button (primary)** — the single dominant action per screen. Solid `primary` fill, white text, 32 px tall, 6 px radius. Hover lightens the fill to `#4096FF`; active darkens to `#0958D9`. Do not stack two `primary` buttons in one decision.
|
|
265
289
|
- **Button (default)** — secondary actions. Transparent background on a white surface, dark text, 1 px outline border. Hover changes text color to `#4096FF`; the border tints to match.
|
|
266
290
|
- **Input field** — 32 px tall to match buttons. Subtle 1 px outline border; focus state thickens the border to `primary` and adds an inset glow. Placeholder text uses `on-surface-disabled`.
|
|
267
291
|
- **Select** — visually identical to Input. The trigger reads as an input until interacted with.
|
|
268
|
-
- **Card** — the workhorse container. White surface, 8 px radius,
|
|
292
|
+
- **Card** — the workhorse container. White surface, 8 px radius, optional `boxShadowCard` elevation. Internal padding is 24 px on all sides; nested controls maintain 16 px gaps.
|
|
269
293
|
- **Modal** — same surface and radius as Card, but uses the secondary shadow tier and is centered on a `rgba(0, 0, 0, 0.45)` mask. Body padding is 20 px top/bottom × 24 px left/right.
|
|
270
294
|
- **Menu (selected item)** — `#E6F4FF` background, `primary` text. This is the single visual cue for "you are here" in navigation.
|
|
271
295
|
- **Tabs (active tab)** — `primary` text and a 2 px `primary` underline. Inactive tabs are `on-surface-variant`. No background fill on tabs at any state.
|
|
272
296
|
- **Table (header row)** — `surface-container` background, `title-md` typography (14 px / 600). Body rows alternate on hover only, not by default — the system trusts users to read dense data without zebra striping.
|
|
273
297
|
- **Tag** — small categorical label. 4 px radius, 12 px font, low-saturation pastel fills from the preset palette. Never use a tag for a critical state — use Alert or Badge.
|
|
298
|
+
- **Alert** — semantic feedback surface. Success, warning, error, and info alerts use pale semantic backgrounds with normal text color; the status is communicated by icon and tint, not by low-contrast colored body text.
|
|
299
|
+
- **Badge status dot** — compact status indicator. Critical status may use `error` fill, but the dot is not a substitute for text in accessibility-critical flows.
|
|
274
300
|
- **Tooltip** — high-contrast inverse surface: `rgba(0,0,0,0.85)` background, white text. Always positioned by the framework, never manually pinned.
|
|
275
301
|
- **Dropdown menu (item hover)** — `surface-container` fill on hover, no text-color change. The hover affordance is enough.
|
|
276
302
|
|
|
@@ -286,3 +312,21 @@ Twelve component archetypes capture most of the system's surface area. Each entr
|
|
|
286
312
|
- **Don't** mint accent colors outside the preset palette for one-off UI surfaces. If a screen seems to need one, the design probably needs a different layout instead.
|
|
287
313
|
- **Do** snap every gap, inset, and gutter to the 4 px grid through the spacing scale.
|
|
288
314
|
- **Don't** use magic numbers in product code. If the scale lacks a step you need, the design needs revisiting, not a one-pixel override.
|
|
315
|
+
|
|
316
|
+
## Customization
|
|
317
|
+
|
|
318
|
+
Every value in the YAML front-matter above is a **default** produced by `defaultAlgorithm` — the light theme. Ant Design theming is broader than Design Token replacement: it includes algorithmic derivation, component-scoped overrides, dynamic switching, nested theme scopes, CSS variable output, static token consumption, and zero-runtime CSS extraction. See [Customize Theme](https://ant.design/docs/react/customize-theme.md) for the complete runtime API and examples.
|
|
319
|
+
|
|
320
|
+
The primary theme configuration entry is `ConfigProvider`'s `theme` prop:
|
|
321
|
+
|
|
322
|
+
1. **Seed token overrides.** Pass `theme.token` to `ConfigProvider` to replace any seed. The primary and semantic color seeds (`colorPrimary`, `colorSuccess`, `colorWarning`, `colorError`, `colorInfo`) expand into derived gradients, while `colorBgBase` and `colorTextBase` drive neutral surfaces and text. Spacing, radius, and font-size seeds work the same way.
|
|
323
|
+
|
|
324
|
+
2. **Algorithm switching.** Set `theme.algorithm` to swap the derivation logic. `defaultAlgorithm`, `darkAlgorithm`, and `compactAlgorithm` can be used alone or composed as an array — do not invert colors manually; the algorithms account for non-linear palette, surface, shadow, and size relationships.
|
|
325
|
+
|
|
326
|
+
3. **Component-level overrides.** `theme.components.Button` (or any component's token namespace) can override a single component's Component Token and consumed Alias Token without affecting others. In component config, `algorithm` can opt that component into token derivation when the override should still follow seed-token relationships.
|
|
327
|
+
|
|
328
|
+
4. **Runtime scope.** Themes can switch dynamically by changing `ConfigProvider.theme`, and nested `ConfigProvider` instances create local themes that inherit unchanged tokens from their parent. Static APIs such as `message.xxx`, `Modal.xxx`, and `notification.xxx` do not automatically receive the surrounding context; use hook-based APIs, `App`, or explicit context holders when themed static feedback is required.
|
|
329
|
+
|
|
330
|
+
5. **Token consumption and output.** Use `theme.useToken()` inside React and `theme.getDesignToken()` outside React to consume resolved tokens. Use `theme.cssVar` when CSS variables are needed, and `theme.zeroRuntime` with prebuilt or extracted CSS when runtime style generation must be disabled.
|
|
331
|
+
|
|
332
|
+
For custom theme generation, keep Ant Design's interaction structure, density, state feedback, and component semantics first. Then change the smallest necessary seed set: usually `colorPrimary`, status colors, `borderRadius`, `fontFamily`, `fontSize`, and neutral surface bases. Brand pages may look distinct, but forms, tables, navigation, overlays, focus states, and validation feedback should still feel like Ant Design. Avoid generating custom CSS rules that bypass tokens, algorithms, `theme.components`, CSS variables, or extracted static styles; if a theme cannot be expressed through those official layers, treat that as a design-system extension rather than a one-off page style.
|
|
Binary file
|
|
Binary file
|
package/data/v6.json.gz
CHANGED
|
Binary file
|