# @aphrody/m3-tokens 中文文档

规范地址：https://npmcn.com/package/%40aphrody/m3-tokens/

版本：1\.4\.7
npm 元数据更新时间：2026-10-23T03:53:25.803Z
中文译文更新时间：2026-11-06T09:33:28.467Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40aphrody/m3-tokens
原文对照：https://npmcn.com/package/%40aphrody/m3-tokens/?lang=original
项目主页：https://github.com/aphrody-labs/bun-distribution/tree/os/packages/m3-tokens#readme
源码仓库：https://github.com/aphrody-labs/bun-distribution

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：80.6 kB，14 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2026-06-03T22:53:36.781Z
- 最新版本发布：2026-10-23T03:53:25.647Z
- 近 30 天下载量：4978（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：15（近 12 个月 15 个）

## 中文简介

材料3 设计符号(--md-sys- \*),用于@aphody/material-web分叉:MUI-them → M3 代号 CSS 生成和运行时间 材料 您通过材料- 颜色- 用途的动态颜色 .

## 安装

```sh
npm install @aphrody/m3-tokens
```

也可以使用：`pnpm add @aphrody/m3-tokens`、`yarn add @aphrody/m3-tokens`、`bun add @aphrody/m3-tokens`

## README

# @ aphrody/ m3- tokens (英语)

材料3 设计标志(`--md-sys-*`)作为Bun-native TypeScript和CSS,以种子为主的动态颜色.

```sh
bun add @aphrody/m3-tokens
```

```ts
import "@aphrody/m3-tokens/m3-tokens.css";
import {
  applyDynamicColor,
  cssFromSeed,
} from "@aphrody/m3-tokens/dynamic-color";

applyDynamicColor("#6750a4"); // sets the --md-sys-color-* roles on <html>
const sheet = cssFromSeed("#6750a4"); // light and dark role sheet, e.g. for SSR
```

许可证: Apache-2.0(`LICENSE`) (中文(简体) ). 安装指南 : [文件/材料/立方米/INSTALL.md](https://github.com/aphrody-labs/bun-distribution/blob/os/docs/material/m3/INSTALL.md)。 。 。 .

| 导出 | 什麽 |
| --- | --- |
| `.` 编号 : `./theme-to-tokens` | MUI 主题为 `--md-sys-*` 支助科(`muiThemeToTokens`, (中文(简体) ), `normalizeHex`(中文(简体) ) |
| `./dynamic-color` | 材料 您的作用来自种子 : `schemeFromSeed`, (中文(简体) ), `cssFromSeed`, (中文(简体) ), `applyDynamicColor` (7个变体,对比水平) |
| `./breakpoints`, (中文(简体) ), `./breakpoints.css` | 窗口大小等级:宽度600/840/1200/1600,高度紧凑 < 480,中度480-899,扩展XX900;导航类型 `bar`, (中文(简体) ), `rail-collapsed`, (中文(简体) ), `rail-expanded` (名称与 `adaptive.rs`(中文(简体) ) |
| `./expressive`, (中文(简体) ), `./expressive.css` | 15个被强调的型号,可表示空间弹簧(`fast` 0.6/800, (中文(简体) ), `default` 0.8/380, (中文(简体) ), `slow` 0.8/200)和方向形状(`extra-small-top`, (中文(简体) ), `large-top`, (中文(简体) ), `large-start`, (中文(简体) ), `large-end`, (中文(简体) ), `extra-large-top`(中文(简体) ) |
| `./m3-tokens.css` | 静态形状、打字尺、运动、高地和状态级标志(来源于 `crates/ui/m3-tokens`(中文(简体) ) |
| `./platform-contract` | `platformState(widthDp)`:大小类、导航、平面、边距 |

`expressive.css` 生成 : `bun run generate:expressive` (在漂移时测试失败).

状态层: 聚焦并按住 `0.10` (制作); 材料网络 v0 192 用途 `0.12`。见 `docs/architecture/DECISIONS.md`。 。 。 .

```sh
bun test test/      # tokens, contrast, variants, breakpoints, expressive
bun run typecheck
bun run build       # build.ts (Bun.build) + bun check -p tsconfig.build.json
```

## 常见问题

### @aphrody/m3-tokens 是什么？

材料3 设计符号\(--md-sys- \*\),用于@aphody/material-web分叉:MUI-them → M3 代号 CSS 生成和运行时间 材料 您通过材料- 颜色- 用途的动态颜色 \.

### 如何安装 @aphrody/m3-tokens？

在项目目录运行 npm install @aphrody/m3-tokens，或使用 pnpm add / yarn add / bun add。

### @aphrody/m3-tokens 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @aphrody/m3-tokens 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @aphrody/m3-tokens 可以商用吗？

@aphrody/m3-tokens 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @aphrody/m3-tokens 的下载量有多少？

根据 npm 官方下载统计，@aphrody/m3-tokens 在 2026/10/06 – 2026/11/04 这 30 天内被下载 4,978 次，日均约 166 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @aphrody/m3-tokens 还在维护吗？

最新版本 1\.4\.7 发布于 2026/10/23（15 天前）；至今共发布 15 个版本，其中过去 12 个月发布了 15 个；首次发布于 2026/06/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。