角石设计系统
Cru Global's Cornerstone设计系统的设计标志和原始. CSS自定义属性、SCSS变量、无害环境管理/CJS JavaScript和TypeScript声明 克鲁 财务报告和审定财务报表 家庭生活(FL) 品牌跨越光和暗的主题.
使用角石
1. 安装
npm install @cruglobal/cornerstone-design-system
2. 进口CSS
导入基线校正令牌和符合您品牌和主题的文件 。 应用 data-brand 财务报告和审定财务报表 data-theme 属性,用于激活正确的变量.
<!-- HTML root element -->
<html data-brand="cru" data-theme="light">
/* 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 组件中的符号:
.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的样式(如回放原生,运行时样式计算):
// ESM
import { RefColorCruBlue500 } from '@cruglobal/cornerstone-design-system';
// Per-mode tokens
import * as cruLight from '@cruglobal/cornerstone-design-system/js/cru-light';
TypeScript声明自动包含在内.
图标
材料尖锐
角石使用 材料符号尖锐 图标设置。 将 Google 字体样式表添加到您的应用程序 :
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
使用带有 material-symbols-sharp 类 :
<span class="material-symbols-sharp">home</span>
<span class="material-symbols-sharp">arrow_forward</span>
<span class="material-symbols-sharp">favorite</span>
浏览完整目录 : 字体.google.com/相册。 。 。 .
Cru 部图标
自定义 Cru 部委主题 SVG 图标船, 此软件包下方 libraries/cru-icons/数字 :
node_modules/@cruglobal/cornerstone-design-system/libraries/cru-icons/<icon-name>.svg
参考他们 <img> 标记或内置为 SVG 。 使用支持 SVG 导入的捆绑器( Vite, 有文件装入器的网络包) :
import bibleStudyIcon from '@cruglobal/cornerstone-design-system/libraries/cru-icons/bible-study.svg';
快用克洛德密码装好
如果你在用的话 克劳德代码,角石船载一个插件 丹尼尔一个知道这个软件包的设计系统助理 安装一次:
/plugin marketplace add CruGlobal/cornerstone-design-system
/plugin install cornerstone@cru
没有命令可以输入 。 Daniel 成为您的会话默认助手, 并用您自己的项目术语进行解答 —— 导入哪个模式文件, 顺序是什么 --sys-* 象征着你们想要的角色 为什么 --cs-* 变数不能解决问题 也不能解决你已经造船的问题 以平平相问.
说明:
/pull-tokens是将从 Figma 同步到此寄存器的内部命令 。 这不是消费者插件的一部分.
捐给角石
以下各节介绍该存放处的撰稿人.
先决条件
这个 /pull-tokens 命令同步来自 Figma 源文件的设计符号,并且需要 Claude 代码的 Figma 插件.
- 运行
/plugins在 Claude 代码中打开插件市场 - 搜索 图片 并安装它
- 提示时使用您的 Figma 账户认证
- 重新启动 Claude 代码
图标
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包中.
托肯架构
托肯分三层排列,并有严格的别名规则:
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 数据交换小组 格式 (单位:千美元)$type 编号 : $value) (中文(简体) ). 见 CLAUDE.md 用于别名规则和变更公约,以及 packages/tokens/build.mjs 用于建造管道.