@vustcc/tokens 0.1.0-alpha.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.
Files changed (5) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/LICENSE +21 -0
  3. package/README.md +56 -0
  4. package/dist/index.css +187 -0
  5. package/package.json +30 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,12 @@
1
+ # Changelog
2
+
3
+ 格式遵循 [Keep a Changelog](https://keepachangelog.com/zh-CN/1.1.0/)，并遵循 [Semantic Versioning](https://semver.org/lang/zh-CN/)。
4
+
5
+ ## [0.1.0-alpha.1] - 2026-09-10
6
+
7
+ ### Added
8
+
9
+ - 首次发布 `@vustcc/tokens` VDL 主题 Token。
10
+ - 提供浅色与深色主题的颜色、文字、边框、状态和背景变量。
11
+ - 提供字体、间距、圆角、阴影、层级及桌面布局变量。
12
+ - CSS 自定义属性统一使用 `--vdl-*` 前缀。
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 gwj
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,56 @@
1
+ # @vustcc/tokens
2
+
3
+ VUST Design Language（VDL）主题变量包，为 VUST 前端项目提供统一的颜色、字体、间距、圆角、阴影和层级定义。
4
+
5
+ ## 安装
6
+
7
+ ```bash
8
+ pnpm add @vustcc/tokens
9
+ ```
10
+
11
+ ## 使用
12
+
13
+ 在应用的全局样式入口导入：
14
+
15
+ ```css
16
+ @import "@vustcc/tokens/index.css";
17
+ ```
18
+
19
+ 业务样式通过 `--vdl-*` 变量引用：
20
+
21
+ ```css
22
+ .panel {
23
+ color: var(--vdl-text-primary);
24
+ background: var(--vdl-bg-panel);
25
+ border: 1px solid var(--vdl-border-default);
26
+ border-radius: var(--vdl-radius-md);
27
+ padding: var(--vdl-space-4);
28
+ }
29
+ ```
30
+
31
+ ## 主题
32
+
33
+ 默认主题为浅色，无需设置主题属性。需要显式声明时使用：
34
+
35
+ ```html
36
+ <html data-theme="light"></html>
37
+ ```
38
+
39
+ 切换到深色主题：
40
+
41
+ ```html
42
+ <html data-theme="dark"></html>
43
+ ```
44
+
45
+ 消费项目专属的图片、字体和其他静态资源路径不属于公共 Token，应由消费项目自行定义。
46
+
47
+ ## 主要变量
48
+
49
+ - 背景：`--vdl-bg-*`
50
+ - 文本：`--vdl-text-*`
51
+ - 品牌与状态：`--vdl-primary`、`--vdl-success`、`--vdl-warning`、`--vdl-danger`
52
+ - 边框：`--vdl-border-*`
53
+ - 字体：`--vdl-font-*`
54
+ - 间距：`--vdl-space-*`
55
+ - 圆角：`--vdl-radius-*`
56
+ - 层级：`--vdl-z-index-*`
package/dist/index.css ADDED
@@ -0,0 +1,187 @@
1
+ /**
2
+ * VUST Design Language (VDL) Theme Tokens
3
+ * Foundational mandates for visual engineering.
4
+ */
5
+
6
+ :root {
7
+ /* --- 颜色系统 (浅色模式默认) --- */
8
+
9
+ /* 基础背景 */
10
+ --vdl-bg-canvas: #f4f7fb;
11
+ --vdl-bg-base: #ffffff;
12
+ --vdl-bg-panel: #f8fafc;
13
+ --vdl-bg-card: #ffffff;
14
+ --vdl-bg-muted: #f1f5f9;
15
+ --vdl-bg-input: rgba(255, 255, 255, 0.9);
16
+ --vdl-bg-hover: rgba(13, 30, 55, 0.05);
17
+ --vdl-bg-active: rgba(29, 99, 237, 0.08);
18
+
19
+ /* 文本颜色 */
20
+ --vdl-text-primary: #1f2a44;
21
+ --vdl-text-secondary: #4b5d7f;
22
+ --vdl-text-muted: #6c7a95;
23
+ --vdl-text-subtle: #8a9bb1;
24
+ --vdl-text-inverse: #ffffff;
25
+ --vdl-text-on-danger: #ffffff;
26
+
27
+ /* 品牌色 */
28
+ --vdl-primary: #1d63ed;
29
+ --vdl-primary-hover: #154db6;
30
+ --vdl-primary-active: #0d3b8e;
31
+ --vdl-secondary: #00d4b4;
32
+ --vdl-accent: #7c6cff;
33
+
34
+ /* 状态色 */
35
+ --vdl-success: #00d27a;
36
+ --vdl-success-soft: rgba(0, 210, 122, 0.16);
37
+ --vdl-warning: #ffb547;
38
+ --vdl-warning-soft: rgba(255, 181, 71, 0.16);
39
+ --vdl-danger: #ff5e7a;
40
+ --vdl-danger-soft: rgba(255, 94, 122, 0.16);
41
+ --vdl-info: #00c8ff;
42
+ --vdl-info-soft: rgba(0, 200, 255, 0.16);
43
+ --vdl-neutral: #91a2b8;
44
+ --vdl-neutral-soft: rgba(145, 162, 184, 0.14);
45
+
46
+ /* 边框与分隔线 */
47
+ --vdl-border-subtle: rgba(13, 30, 55, 0.08);
48
+ --vdl-border-default: rgba(13, 30, 55, 0.12);
49
+ --vdl-border-strong: rgba(13, 30, 55, 0.22);
50
+ --vdl-border-brand: rgba(29, 99, 237, 0.3);
51
+ --vdl-border-danger: rgba(255, 94, 122, 0.36);
52
+
53
+ /* 背景叠加与毛玻璃 */
54
+ --vdl-bg-glass: rgba(255, 255, 255, 0.72);
55
+ --vdl-bg-backdrop: rgba(10, 18, 30, 0.28);
56
+ --vdl-desktop-overlay: linear-gradient(
57
+ 180deg,
58
+ rgba(245, 249, 255, 0.3),
59
+ rgba(226, 235, 248, 0.46)
60
+ );
61
+ --vdl-desktop-icon-text: #0f172a;
62
+ --vdl-desktop-icon-shadow: none;
63
+ --vdl-desktop-icon-label-bg: rgba(255, 255, 255, 0.28);
64
+ --vdl-desktop-icon-label-border: transparent;
65
+
66
+ /* 阴影与发光 */
67
+ --vdl-shadow-window: 0 18px 48px rgba(25, 37, 55, 0.18);
68
+ --vdl-shadow-panel: 0 10px 28px rgba(25, 37, 55, 0.12);
69
+ --vdl-shadow-brand: 0 0 16px rgba(0, 200, 255, 0.08);
70
+ --vdl-focus-ring: 0 0 0 3px rgba(0, 200, 255, 0.22);
71
+
72
+ /* --- 层级系统 (Z-Index) --- */
73
+ --vdl-z-index-base: 0;
74
+ --vdl-z-index-desktop: 10;
75
+ --vdl-z-index-window: 100;
76
+ --vdl-z-index-header: 10000;
77
+ --vdl-z-index-popover: 20000;
78
+ --vdl-z-index-modal: 30000;
79
+ --vdl-z-index-toast: 40000;
80
+
81
+ /* --- 布局系统 (Layout) --- */
82
+ --vdl-header-height: 40px;
83
+ --vdl-window-header-height: 30px;
84
+
85
+ /* --- 字体系统 --- */
86
+ --vdl-font-family:
87
+ "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
88
+ "Noto Sans SC", system-ui, sans-serif;
89
+ --vdl-font-mono: "Fira Code", "JetBrains Mono", "Consolas", monospace;
90
+
91
+ /* 字号层级 */
92
+ --vdl-font-display: 28px;
93
+ --vdl-font-title-lg: 22px;
94
+ --vdl-font-title: 18px;
95
+ --vdl-font-subtitle: 16px;
96
+ --vdl-font-body: 14px;
97
+ --vdl-font-body-sm: 13px;
98
+ --vdl-font-caption: 12px;
99
+ --vdl-font-code: 13px;
100
+ --vdl-font-metric: 24px;
101
+
102
+ /* --- 间距与密度 --- */
103
+ --vdl-space-1: 4px;
104
+ --vdl-space-2: 8px;
105
+ --vdl-space-3: 12px;
106
+ --vdl-space-4: 16px;
107
+ --vdl-space-5: 20px;
108
+ --vdl-space-6: 24px;
109
+ --vdl-space-8: 32px;
110
+
111
+ /* --- 圆角系统 --- */
112
+ --vdl-radius-xs: 4px;
113
+ --vdl-radius-sm: 6px;
114
+ --vdl-radius-md: 8px;
115
+ --vdl-radius-lg: 12px;
116
+ --vdl-radius-pill: 999px;
117
+
118
+ /* 滚动条系统 */
119
+ --vdl-scrollbar-thumb: rgba(108, 122, 149, 0.3);
120
+ --vdl-scrollbar-track: rgba(13, 30, 55, 0.04);
121
+
122
+ color-scheme: light;
123
+ }
124
+
125
+ /* 显式浅色模式 */
126
+ html[data-theme="light"] {
127
+ color-scheme: light;
128
+ }
129
+
130
+ /* 深色模式 */
131
+ html[data-theme="dark"] {
132
+ color-scheme: dark;
133
+ --vdl-bg-canvas: #0b1020;
134
+ --vdl-bg-base: #111827;
135
+ --vdl-bg-panel: #162033;
136
+ --vdl-bg-card: #1a2438;
137
+ --vdl-bg-muted: #202b40;
138
+ --vdl-bg-input: rgba(8, 14, 24, 0.72);
139
+ --vdl-bg-hover: rgba(148, 163, 184, 0.1);
140
+ --vdl-bg-active: rgba(0, 200, 255, 0.16);
141
+
142
+ --vdl-text-primary: #e6edf7;
143
+ --vdl-text-secondary: #c1cfde;
144
+ --vdl-text-muted: #91a2b8;
145
+ --vdl-text-subtle: #6f8198;
146
+ --vdl-text-inverse: #07111f;
147
+
148
+ --vdl-primary: #00c8ff;
149
+ --vdl-primary-hover: #38d9ff;
150
+ --vdl-primary-active: #009ccc;
151
+
152
+ --vdl-border-subtle: rgba(148, 163, 184, 0.12);
153
+ --vdl-border-default: rgba(148, 163, 184, 0.16);
154
+ --vdl-border-strong: rgba(148, 163, 184, 0.28);
155
+ --vdl-border-brand: rgba(0, 200, 255, 0.22);
156
+
157
+ --vdl-shadow-window: 0 20px 56px rgba(0, 0, 0, 0.45);
158
+ --vdl-shadow-panel: 0 12px 32px rgba(0, 0, 0, 0.28);
159
+
160
+ --vdl-bg-glass: rgba(22, 32, 51, 0.72);
161
+ --vdl-bg-backdrop: rgba(5, 10, 18, 0.68);
162
+ --vdl-desktop-overlay: linear-gradient(
163
+ 180deg,
164
+ rgba(6, 10, 18, 0.42),
165
+ rgba(11, 17, 28, 0.6)
166
+ );
167
+ --vdl-desktop-icon-text: #e6edf7;
168
+ --vdl-desktop-icon-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
169
+ --vdl-desktop-icon-label-bg: transparent;
170
+ --vdl-desktop-icon-label-border: transparent;
171
+ --vdl-scrollbar-thumb: rgba(148, 163, 184, 0.32);
172
+ --vdl-scrollbar-track: rgba(148, 163, 184, 0.08);
173
+ }
174
+
175
+ @media (prefers-reduced-motion: reduce) {
176
+ [class^="vl-"],
177
+ [class*=" vl-"],
178
+ [class^="vl-"]::before,
179
+ [class^="vl-"]::after,
180
+ [class*=" vl-"]::before,
181
+ [class*=" vl-"]::after {
182
+ animation-duration: 0.01ms !important;
183
+ animation-iteration-count: 1 !important;
184
+ scroll-behavior: auto !important;
185
+ transition-duration: 0.01ms !important;
186
+ }
187
+ }
package/package.json ADDED
@@ -0,0 +1,30 @@
1
+ {
2
+ "name": "@vustcc/tokens",
3
+ "version": "0.1.0-alpha.1",
4
+ "description": "VUST Design Language Theme CSS Tokens",
5
+ "license": "MIT",
6
+ "type": "module",
7
+ "main": "./dist/index.css",
8
+ "style": "./dist/index.css",
9
+ "exports": {
10
+ ".": "./dist/index.css",
11
+ "./index.css": "./dist/index.css"
12
+ },
13
+ "files": [
14
+ "dist",
15
+ "CHANGELOG.md"
16
+ ],
17
+ "repository": {
18
+ "type": "git",
19
+ "url": "git+https://github.com/vustcc/vust-ui.git",
20
+ "directory": "packages/tokens"
21
+ },
22
+ "publishConfig": {
23
+ "registry": "https://registry.npmjs.org",
24
+ "access": "public"
25
+ },
26
+ "scripts": {
27
+ "build": "node ../../scripts/build-tokens.mjs",
28
+ "type-check": "node -e \"process.exit(0)\""
29
+ }
30
+ }