# @cruglobal/cornerstone-design-system 中文文档
规范地址：https://npmcn.com/package/%40cruglobal/cornerstone-design-system/
版本：0\.10\.0
npm 元数据更新时间：2026-10-23T19:25:43.699Z
中文译文更新时间：2026-11-11T02:03:45.161Z
软件包许可：BSD-3-Clause
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40cruglobal/cornerstone-design-system
原文对照：https://npmcn.com/package/%40cruglobal/cornerstone-design-system/?lang=original
项目主页：https://github.com/CruGlobal/cornerstone-design-system#readme
源码仓库：https://github.com/CruGlobal/cornerstone-design-system
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：7.8 MB，140 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@mui/material \>=5
- 首次发布：2026-05-14T13:50:19.442Z
- 最新版本发布：2026-10-23T19:25:43.289Z
- 近 30 天下载量：2940（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：15（近 12 个月 15 个）
## 中文简介
Cornerstone Design System的设计标志和原始.
## 安装
```sh
npm install @cruglobal/cornerstone-design-system
```
也可以使用：`pnpm add @cruglobal/cornerstone-design-system`、`yarn add @cruglobal/cornerstone-design-system`、`bun add @cruglobal/cornerstone-design-system`
## README
# 角石设计系统
Cru Global's Cornerstone设计系统的设计标志和原始. CSS自定义属性、SCSS变量、无害环境管理/CJS JavaScript和TypeScript声明 **克鲁** 财务报告和审定财务报表 **家庭生活(FL)** 品牌跨越光和暗的主题.
* * *
## 使用角石
### 1\. 安装
```sh
npm install @cruglobal/cornerstone-design-system
```
### 2\. 进口CSS
导入基线校正令牌和符合您品牌和主题的文件 。 应用 `data-brand` 财务报告和审定财务报表 `data-theme` 属性,用于激活正确的变量.
```html
```
```css
/* CSS or JS entry point */
@import "@cruglobal/cornerstone-design-system/css/ref.css";
@import "@cruglobal/cornerstone-design-system/css/cru-light.css";
```
| 品牌 | 主题 | 文件 |
| --- | --- | --- |
| 克鲁 | 光线 | `css/cru-light.css` |
| 克鲁 | 阴暗 | `css/cru-dark.css` |
| 家庭生活 | 光线 | `css/fl-light.css` |
| 家庭生活 | 阴暗 | `css/fl-dark.css` |
对于动态主题切换,请导入您需要的所有模式文件并切换 `data-theme` 属性.
### 3\. 在CSS中使用符号
托肯斯遵循了三层取名惯例. 在大多数情况下,使用 `sys` 组件中的符号:
```css
.my-button {
background-color: var(--sys-color-primary);
color: var(--sys-color-on-primary);
border-radius: var(--sys-number-border-radius-medium);
font-size: var(--sys-number-font-size-body-medium);
}
```
**托肯层 :**
| 前缀 | 目的 | 何时使用 |
| --- | --- | --- |
| `--ref-*` | 原始原生( 外色, 无单位值) | 仅在构建自定义时 `sys` 别名 |
| `--sys-*` | 每个品牌/主题的语义别名 | 组件样式的主要选择 |
| `--cmp-*` | 特定组成部分的标志 | 当设计出特定的角石组件时 |
### 4\. JavaScript / 类型脚本
已解析的符号值作为命名的导出,用于基于JS的样式(如回放原生,运行时样式计算):
```js
// ESM
import { RefColorCruBlue500 } from '@cruglobal/cornerstone-design-system';
// Per-mode tokens
import * as cruLight from '@cruglobal/cornerstone-design-system/js/cru-light';
```
TypeScript声明自动包含在内.
* * *
## 图标
### 材料尖锐
角石使用 [材料符号尖锐](https://fonts.google.com/icons?icon.style=Sharp) 图标设置。 将 Google 字体样式表添加到您的应用程序 :
```html
```
使用带有 `material-symbols-sharp` 类 :
```html
home
arrow_forward
favorite
```
浏览完整目录 : [字体.google.com/相册](https://fonts.google.com/icons?icon.style=Sharp)。 。 。 .
### Cru 部图标
自定义 Cru 部委主题 SVG 图标船, 此软件包下方 `libraries/cru-icons/`数字 :
```text
node_modules/@cruglobal/cornerstone-design-system/libraries/cru-icons/.svg
```
参考他们 `![]()
` 标记或内置为 SVG 。 使用支持 SVG 导入的捆绑器( Vite, 有文件装入器的网络包) :
```js
import bibleStudyIcon from '@cruglobal/cornerstone-design-system/libraries/cru-icons/bible-study.svg';
```
* * *
## 快用克洛德密码装好
如果你在用的话 [克劳德代码](https://claude.ai/code),角石船载一个插件 **丹尼尔**一个知道这个软件包的设计系统助理 安装一次:
```sh
/plugin marketplace add CruGlobal/cornerstone-design-system
/plugin install cornerstone@cru
```
没有命令可以输入 。 Daniel 成为您的会话默认助手, 并用您自己的项目术语进行解答 —— 导入哪个模式文件, 顺序是什么 `--sys-*` 象征着你们想要的角色 为什么 `--cs-*` 变数不能解决问题 也不能解决你已经造船的问题 以平平相问.
> **说明:** `/pull-tokens` 是将从 Figma 同步到此寄存器的内部命令 。 这不是消费者插件的一部分.
* * *
## 捐给角石
以下各节介绍该存放处的撰稿人.
### 先决条件
这个 `/pull-tokens` 命令同步来自 Figma 源文件的设计符号,并且需要 Claude 代码的 Figma 插件.
1. 运行 `/plugins` 在 Claude 代码中打开插件市场
2. 搜索 **图片** 并安装它
3. 提示时使用您的 Figma 账户认证
4. 重新启动 Claude 代码
### 图标
```sh
npm run validate # lint the token tree (exits 1 on any error)
npm run build # compile tokens → build/ via Style Dictionary
npm run version # consume changesets → bump package.json + write CHANGELOG.md
npm run release # publish to npm (runs automatically via release.yml)
npx changeset # interactively add a changeset before merging a PR
npx changeset status # preview what the next version bump would be
```
`build/` 被点燃了。 已建成的文物只活在已公布的npm包中.
### 托肯架构
托肯分三层排列,并有严格的别名规则:
```text
tokens/
ref.json # _ref.* — raw primitives
sys/
cru-light.json # _sys.* — semantic aliases per brand × theme
cru-dark.json
fl-light.json
fl-dark.json
cmp/
*.json # _cmp.* — component-level aliases
```
所有文件使用 [W3C DTCG 数据交换小组](https://design-tokens.github.io/community-group/format/) 格式 (单位:千美元)`$type` 编号 : `$value`) (中文(简体) ). 见 `CLAUDE.md` 用于别名规则和变更公约,以及 `packages/tokens/build.mjs` 用于建造管道.
## 常见问题
### @cruglobal/cornerstone-design-system 是什么？
Cornerstone Design System的设计标志和原始\.
### 如何安装 @cruglobal/cornerstone-design-system？
在项目目录运行 npm install @cruglobal/cornerstone-design-system，或使用 pnpm add / yarn add / bun add。
### @cruglobal/cornerstone-design-system 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @cruglobal/cornerstone-design-system 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @cruglobal/cornerstone-design-system 可以商用吗？
@cruglobal/cornerstone-design-system 使用 BSD-3-Clause 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。另外不得用原作者名义为衍生产品背书。以上为概括，不构成法律意见，请以许可原文为准。
### @cruglobal/cornerstone-design-system 的下载量有多少？
根据 npm 官方下载统计，@cruglobal/cornerstone-design-system 在 2026/10/11 – 2026/11/09 这 30 天内被下载 2,940 次，日均约 98 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @cruglobal/cornerstone-design-system 还在维护吗？
最新版本 0\.10\.0 发布于 2026/10/24（18 天前）；至今共发布 15 个版本，其中过去 12 个月发布了 15 个；首次发布于 2026/05/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。