@cloudnyx/design-tokens 0.1.0 → 0.1.1
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 +124 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
# @cloudnyx/design-tokens
|
|
2
|
+
|
|
3
|
+
Crystal Glasshouse 设计令牌 — Cloudnyx Space 的视觉系统基础。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @cloudnyx/design-tokens
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 使用方式
|
|
12
|
+
|
|
13
|
+
### CSS 变量
|
|
14
|
+
|
|
15
|
+
```css
|
|
16
|
+
@import "@cloudnyx/design-tokens/css";
|
|
17
|
+
|
|
18
|
+
.my-card {
|
|
19
|
+
background: var(--glass-surface);
|
|
20
|
+
backdrop-filter: var(--glass-blur);
|
|
21
|
+
border-radius: var(--radius-3xl);
|
|
22
|
+
box-shadow: var(--shadow-rest);
|
|
23
|
+
color: var(--text-glass);
|
|
24
|
+
}
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
暗色模式自动通过 `.dark` 类切换。
|
|
28
|
+
|
|
29
|
+
### JS/TS 对象
|
|
30
|
+
|
|
31
|
+
```js
|
|
32
|
+
import { tokens, darkTokens, themes } from "@cloudnyx/design-tokens";
|
|
33
|
+
|
|
34
|
+
console.log(tokens.cAccent); // "#DE87A6"
|
|
35
|
+
console.log(themes.lavender.name); // "薰衣草梦境"
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Tailwind CSS 预设
|
|
39
|
+
|
|
40
|
+
```js
|
|
41
|
+
// tailwind.config.js
|
|
42
|
+
import preset from "@cloudnyx/design-tokens/tailwind";
|
|
43
|
+
|
|
44
|
+
export default {
|
|
45
|
+
presets: [preset],
|
|
46
|
+
};
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
使用时需先引入 CSS 变量：
|
|
50
|
+
|
|
51
|
+
```css
|
|
52
|
+
@import "@cloudnyx/design-tokens/css";
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
然后即可使用 Tailwind 类名：
|
|
56
|
+
|
|
57
|
+
```html
|
|
58
|
+
<div class="bg-accent text-paper rounded-3xl shadow-rest">
|
|
59
|
+
Hello Crystal Glasshouse
|
|
60
|
+
</div>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### JSON
|
|
64
|
+
|
|
65
|
+
```js
|
|
66
|
+
import tokens from "@cloudnyx/design-tokens/json";
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## 令牌体系
|
|
70
|
+
|
|
71
|
+
三层架构：Primitive → Semantic → Variant
|
|
72
|
+
|
|
73
|
+
| 层级 | 说明 | 示例 |
|
|
74
|
+
| ------------------ | ---------------------- | ------------------------------------------------------------------------ |
|
|
75
|
+
| Layer 1: Primitive | 原始令牌，不可变 | `--c-accent`, `--sp-md`, `--radius-xl` |
|
|
76
|
+
| Layer 2: Semantic | 语义令牌，可被变体覆盖 | `--ink`, `--glass-surface`, `--shadow-rest` |
|
|
77
|
+
| Layer 3: Variant | 8 种主题变体 | default, nature, sunset, ocean, lavender, cyberpunk, earthy, aurora_void |
|
|
78
|
+
|
|
79
|
+
### 令牌分类
|
|
80
|
+
|
|
81
|
+
| 分类 | 数量 | 示例令牌 |
|
|
82
|
+
| ------- | ---- | -------------------------------------------------------- |
|
|
83
|
+
| 颜色 | 40+ | `--c-accent`, `--c-purple`, `--rose-deep` |
|
|
84
|
+
| 玻璃 | 16 | `--glass-blur`, `--glass-surface`, `--glass-edge-strong` |
|
|
85
|
+
| 间距 | 30 | `--sp-xs` ~ `--sp-6xl` |
|
|
86
|
+
| 圆角 | 13 | `--radius-xs` ~ `--radius-full` |
|
|
87
|
+
| 阴影 | 10 | `--shadow-rest`, `--shadow-hover`, `--shadow-float` |
|
|
88
|
+
| 动画 | 11 | `--ease-viscous`, `--dur-normal`, `--t-spring` |
|
|
89
|
+
| 透明度 | 6 | `--op-disabled` ~ `--op-full` |
|
|
90
|
+
| Z-index | 10 | `--z-base` ~ `--z-toast` |
|
|
91
|
+
| 字体 | 8 | `--font-display`, `--fw-bold` |
|
|
92
|
+
| 渐变 | 5 | `--grad-rose`, `--j-grad` |
|
|
93
|
+
|
|
94
|
+
### 主题变体
|
|
95
|
+
|
|
96
|
+
```css
|
|
97
|
+
[data-glass-theme="lavender"] {
|
|
98
|
+
--glass-accent-1: 168, 85, 247;
|
|
99
|
+
--glass-accent-2: 139, 92, 246;
|
|
100
|
+
}
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
```js
|
|
104
|
+
import { applyGlassTheme } from "@cloudnyx/design-tokens";
|
|
105
|
+
// 注意：applyGlassTheme 需要自行实现，或参考源码中的 glassThemeBridge.js
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
## 暗色模式
|
|
109
|
+
|
|
110
|
+
CSS 输出已包含 `.dark` 覆盖，只需在 `<html>` 上切换 `.dark` 类：
|
|
111
|
+
|
|
112
|
+
```html
|
|
113
|
+
<html class="dark">
|
|
114
|
+
<!-- 暗色模式 -->
|
|
115
|
+
</html>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
## 移动端适配
|
|
119
|
+
|
|
120
|
+
CSS 输出已包含 `@media (max-width: 768px), (pointer: coarse)` 下的 blur 值降级。
|
|
121
|
+
|
|
122
|
+
## 许可
|
|
123
|
+
|
|
124
|
+
MIT
|