@cregis/tokens
v1.0.3
Published
Design tokens for frontend projects
Downloads
604
Readme
@cregis/tokens
Cregis 设计令牌（Design Tokens）—— 面向桌面端、Web 端、移动端三平台的 CSS 自定义属性体系，涵盖主题色、语义颜色、尺寸刻度、图标、阴影及排版。
目录结构
src/
├── desktop/
│ ├── index.css 入口，汇总导入以下模块
│ ├── theme.css 主题色定义（--eds-* 变量，亮色 / 暗色 / 跟随系统）
│ ├── color-definition.css 语义颜色（box / text / material / stroke / effect / event / data-table）
│ ├── size/
│ │ ├── base.css 基础刻度（--scale-*）、描边宽度（--stroke-*）
│ │ ├── spacing.css 间距（--spacing-*）
│ │ ├── radius.css 圆角（--radius-*）
│ │ ├── blur.css 模糊（--blur-*）
│ │ ├── depth.css 阴影深度层级（--depth-*）
│ │ └── icon.css 图标尺寸（--icon-*）
│ └── typography/
│ ├── font-family.css 字体族
│ ├── font-size.css 字号
│ ├── font-weight.css 字重
│ ├── line-height.css 行高
│ └── combination.css 排版组合（display / headline / title / body / footnote / bar）
├── web/ Web 端（结构同 desktop）
└── mobile/ 移动端（结构同 desktop）安装
npm install @cregis/tokens使用
/* 引入桌面端全部 token */
@import '@cregis/tokens/desktop/index.css';
/* 引入 Web 端全部 token */
@import '@cregis/tokens/web/index.css';
/* 引入移动端全部 token */
@import '@cregis/tokens/mobile/index.css';
/* 按需引入模块 */
@import '@cregis/tokens/desktop/theme.css';
@import '@cregis/tokens/desktop/color-definition.css';
@import '@cregis/tokens/desktop/size/index.css';
@import '@cregis/tokens/desktop/typography/index.css';换肤
引入 token 后，覆盖 --eds-* 主题变量即可完成换肤。语义颜色变量（color-definition.css）通过 color-mix() 引用主题变量并叠加透明度，自动跟随主题变化，无需额外覆盖。
亮色 / 暗色模式
theme.css 在 :root 定义亮色主题，同时提供 .dark 类切换暗色：
@import '@cregis/tokens/desktop/index.css';
/* 自定义品牌色（覆盖 :root 中的 --eds-brand） */
:root {
--eds-brand: color(display-p3 0.8 0.2 0.2);
}<!-- 亮色模式（默认） -->
<body>...</body>
<!-- 暗色模式 -->
<body class="dark">...</body>跟随系统
使用 .system 类，主题会通过 prefers-color-scheme: dark 媒体查询自动切换：
<body class="system">...</body>色彩体系
颜色使用 display-p3 色彩空间定义。主题色在 theme.css 中定义为 --eds-* 变量，语义颜色在 color-definition.css 中通过 color-mix(in oklch, ...) 引用主题变量并混合透明度，例如：
--text-brand-primary: color-mix(in oklch, var(--eds-brand) 100%, transparent);
--text-brand-secondary: color-mix(in oklch, var(--eds-brand) 60%, transparent);主题色变量（--eds-*）
| 变量 | 说明 |
|------|------|
| --eds-brand | 品牌色 |
| --eds-match | 匹配/强调色 |
| --eds-decor | 装饰色 |
| --eds-success | 成功/正向 |
| --eds-danger | 危险/错误 |
| --eds-warning | 警告 |
| --eds-base | 基础内容色（亮色模式黑，暗色模式白） |
| --eds-face | 基础表面色（亮色模式白，暗色模式黑） |
| --eds-same-black | 恒定黑色 |
| --eds-same-white | 恒定白色 |
| --eds-container | 容器背景 |
| --eds-menu | 菜单背景 |
| --eds-page | 页面背景 |
| --eds-popup | 弹出层背景 |
| --eds-flotation | 浮层背景 |
| --eds-inner-glow | 内阴影发光色 |
| --eds-vulvar-glow | 外阴影发光色 |
| --eds-data-table | 数据表格背景 |
| --eds-module-stroke | 模块描边色 |
语义变量类别
| 类别 | 前缀 | 说明 |
|------|------|------|
| box | --box-* | 容器背景色（container / menu / page / flotation） |
| text | --text-* | 文本颜色（brand / success / danger / warning 等，含多级透明度） |
| material | --material-* | 材质/组件色（brand / match / decor / success / danger 等，含多级透明度） |
| stroke | --stroke-* | 描边颜色（base / face / divider / outline / brand 等） |
| effect | --effect-* | 效果颜色（shadow / popup / mask / prompt 等） |
| event | --event-* | 交互状态色（hover / focus） |
| data-table | --data-table-* | 数据表格相关颜色 |
尺寸体系
基于 4px 步进的刻度系统，覆盖 0 到 888px。
刻度（--scale-*）
| 变量 | 值 |
|------|-----|
| --scale-0 | 0px |
| --scale-1 | 4px |
| --scale-2 | 8px |
| --scale-3 | 12px |
| --scale-4 | 16px |
| --scale-8 | 32px |
| --scale-16 | 64px |
| --scale-20 | 80px |
| --scale-full | 888px |
间距（--spacing-*）
--spacing-0 至 --spacing-20，与刻度一一对应。
圆角（--radius-*）
| 变量 | 值 |
|------|-----|
| --radius-xs | 4px |
| --radius-sm | 8px |
| --radius-md | 12px |
| --radius-lg | 16px |
| --radius-frame | 32px |
| --radius-full | 888px（胶囊形） |
其他
- 图标：
--icon-sm(12px) /--icon-md(16px) /--icon-lg(20px) /--icon-xl(24px) /--icon-root(32px) - 模糊：
--blur-subtle(16px) /--blur-deep(48px) /--blur-shallow(80px) - 阴影深度：
--depth-subtle(6px) /--depth-deep(8px) /--depth-shallow(24px) - 描边宽度：
--stroke-xs(0.5) 至--stroke-xl(2)
排版
提供字体族、字号、字重、行高的原子变量，通过 combination.css 组合为语义化排版样式：
| 组合变量 | 用途 |
|----------|------|
| --display-* | 展示/大标题 |
| --headline-* | 标题 |
| --title-* | 次级标题 |
| --body-* | 正文（large / medium / small） |
| --footnote-* | 脚注 |
| --bar-* | 标签栏/辅助文字 |
License
MIT