@teamix-evo/tokens 0.4.0
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/LICENSE +21 -0
- package/README.md +111 -0
- package/manifest.json +33 -0
- package/package.json +27 -0
- package/variants/opentrek/base.tokens.json +729 -0
- package/variants/opentrek/theme.css +150 -0
- package/variants/uni-manager/base.tokens.json +808 -0
- package/variants/uni-manager/hybridcloud.tokens.json +18577 -0
- package/variants/uni-manager/theme.css +199 -0
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Uni-Manager Design Tokens — Tailwind v4 @theme
|
|
3
|
+
*
|
|
4
|
+
* 视觉源自 cloud-design hybridcloud 主题（蓝色品牌 + 锐利圆角），
|
|
5
|
+
* 由 hybridcloud.tokens.json 投影到 shadcn 语义槽生成；与 base.tokens.json 同步。
|
|
6
|
+
*
|
|
7
|
+
* 使用方式（在样式入口）：
|
|
8
|
+
* @import "tailwindcss";
|
|
9
|
+
* @import "@teamix-evo/tokens/variants/uni-manager/theme.css";
|
|
10
|
+
*
|
|
11
|
+
* shadcn 全局偏好（pointer cursor 等）由 @teamix-evo/ui 提供;
|
|
12
|
+
* 业务工程通过 `teamix-evo ui init` 部署到 `src/preferences.css`。
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
@theme {
|
|
16
|
+
/* ─── Semantic Colors (Light) ─────────────────────────────── */
|
|
17
|
+
--color-background: #FFFFFF;
|
|
18
|
+
--color-foreground: #1A1A1A;
|
|
19
|
+
--color-card: #FFFFFF;
|
|
20
|
+
--color-card-foreground: #1A1A1A;
|
|
21
|
+
--color-popover: #FFFFFF;
|
|
22
|
+
--color-popover-foreground: #1A1A1A;
|
|
23
|
+
--color-primary: #0064C8;
|
|
24
|
+
--color-primary-foreground: #FFFFFF;
|
|
25
|
+
--color-secondary: #F7F7F7;
|
|
26
|
+
--color-secondary-foreground: #1A1A1A;
|
|
27
|
+
--color-muted: #F7F7F7;
|
|
28
|
+
--color-muted-foreground: #696969;
|
|
29
|
+
--color-accent: #F0F7FF;
|
|
30
|
+
--color-accent-foreground: #0064C8;
|
|
31
|
+
--color-destructive: #E84738;
|
|
32
|
+
--color-destructive-foreground: #FFFFFF;
|
|
33
|
+
|
|
34
|
+
/* ─── Status Colors ───────────────────────────────────────── */
|
|
35
|
+
--color-success: #23B066;
|
|
36
|
+
--color-success-foreground: #FFFFFF;
|
|
37
|
+
--color-success-subtle: #EBFFF6;
|
|
38
|
+
--color-success-border: #43BF7E;
|
|
39
|
+
--color-warning: #F98E1A;
|
|
40
|
+
--color-warning-foreground: #FFFFFF;
|
|
41
|
+
--color-warning-subtle: #FFF5EB;
|
|
42
|
+
--color-warning-border: #F7A854;
|
|
43
|
+
--color-info: #0064C8;
|
|
44
|
+
--color-info-foreground: #FFFFFF;
|
|
45
|
+
--color-info-subtle: #F0F7FF;
|
|
46
|
+
--color-info-border: #589ADB;
|
|
47
|
+
|
|
48
|
+
/* ─── Borders ─────────────────────────────────────────────── */
|
|
49
|
+
--color-border: #D9D9D9;
|
|
50
|
+
--color-input: #D9D9D9;
|
|
51
|
+
--color-ring: #0064C8;
|
|
52
|
+
|
|
53
|
+
/* ─── Chart ───────────────────────────────────────────────── */
|
|
54
|
+
--color-chart-1: #BF0030;
|
|
55
|
+
--color-chart-2: #E84738;
|
|
56
|
+
--color-chart-3: #F98E1A;
|
|
57
|
+
--color-chart-4: #FAC31E;
|
|
58
|
+
--color-chart-5: #D1BB4F;
|
|
59
|
+
|
|
60
|
+
/* ─── Sidebar ─────────────────────────────────────────────── */
|
|
61
|
+
--color-sidebar-background: #FFFFFF;
|
|
62
|
+
--color-sidebar-foreground: #696969;
|
|
63
|
+
--color-sidebar-primary: #0064C8;
|
|
64
|
+
--color-sidebar-primary-foreground: #FFFFFF;
|
|
65
|
+
--color-sidebar-accent: #F0F7FF;
|
|
66
|
+
--color-sidebar-accent-foreground: #0064C8;
|
|
67
|
+
--color-sidebar-border: #D9D9D9;
|
|
68
|
+
--color-sidebar-ring: #0064C8;
|
|
69
|
+
|
|
70
|
+
/* ─── Layout Sizes ────────────────────────────────────────── */
|
|
71
|
+
--layout-dialog-sm: 400px;
|
|
72
|
+
--layout-dialog-md: 600px;
|
|
73
|
+
--layout-dialog-lg: 800px;
|
|
74
|
+
--layout-dialog-xl: 1200px;
|
|
75
|
+
--layout-drawer-sm: 400px;
|
|
76
|
+
--layout-drawer-md: 600px;
|
|
77
|
+
--layout-drawer-lg: 800px;
|
|
78
|
+
--layout-drawer-xl: 1200px;
|
|
79
|
+
--layout-panel-sm: 200px;
|
|
80
|
+
--layout-panel-md: 240px;
|
|
81
|
+
--layout-submenu: 160px;
|
|
82
|
+
--layout-menu-min: 8rem;
|
|
83
|
+
--layout-menu-md: 12rem;
|
|
84
|
+
--layout-popover-max: 24rem;
|
|
85
|
+
--layout-listbox-max: 300px;
|
|
86
|
+
--layout-counter: 1.25rem;
|
|
87
|
+
--layout-notification: 360px;
|
|
88
|
+
--layout-textarea-min: 80px;
|
|
89
|
+
--layout-image-preview-max-w: 90vw;
|
|
90
|
+
--layout-image-preview-max-h: 85vh;
|
|
91
|
+
|
|
92
|
+
/* ─── Typography Scale (覆盖 Tailwind v4 默认 text-* 档) ───── */
|
|
93
|
+
/* Tailwind 默认: 12/14/16/18/20/24/30/36/48/60；cd 用 12/14/16/18/20/24/28/36
|
|
94
|
+
不一致只在 text-3xl (30→28)。其余档保持 Tailwind 默认即可（行高 / 字号一致）。 */
|
|
95
|
+
--text-xs: 0.75rem; /* 12px — cd font.size.body.1 / caption */
|
|
96
|
+
--text-sm: 0.875rem; /* 14px — cd font.size.body.2 */
|
|
97
|
+
--text-base: 1rem; /* 16px — cd font.size.subhead */
|
|
98
|
+
--text-lg: 1.125rem; /* 18px — cd font.size.title */
|
|
99
|
+
--text-xl: 1.25rem; /* 20px — cd font.size.headline */
|
|
100
|
+
--text-2xl: 1.5rem; /* 24px — cd font.size.display.1 */
|
|
101
|
+
--text-3xl: 1.75rem; /* 28px — cd font.size.display.2（覆盖 Tailwind 30px）*/
|
|
102
|
+
--text-4xl: 2.25rem; /* 36px — cd font.size.display.3 */
|
|
103
|
+
|
|
104
|
+
/* 辅助字号档（cd 高频但不在 Tailwind 默认） */
|
|
105
|
+
--text-xxs: 0.625rem;
|
|
106
|
+
--text-xs-cal: 0.8rem;
|
|
107
|
+
|
|
108
|
+
/* ─── Shadow (从 hybridcloud shadow.1/2/3.down 投影) ──────── */
|
|
109
|
+
--shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
|
|
110
|
+
--shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
|
|
111
|
+
--shadow-2xs: 0px 1px 1px 0px rgba(0, 0, 0, 0.04);
|
|
112
|
+
--shadow-md: 0px 3px 8px 0px rgba(0, 0, 0, 0.06); /* hybridcloud shadow.1.down — 卡片 / 默认浮起 */
|
|
113
|
+
--shadow-lg: 0px 3px 8px 0px rgba(0, 0, 0, 0.18); /* hybridcloud shadow.2.down — Dropdown / Popover */
|
|
114
|
+
--shadow-xl: 0px 6px 24px 0px rgba(0, 0, 0, 0.10); /* hybridcloud shadow.3.down — Sheet / Drawer / Dialog */
|
|
115
|
+
--shadow-2xl: 0px 12px 48px 0px rgba(0, 0, 0, 0.20); /* 顶层模态 */
|
|
116
|
+
|
|
117
|
+
/* ─── Overlay ─────────────────────────────────────────────── */
|
|
118
|
+
--overlay-scrim: rgba(0, 0, 0, 0.50);
|
|
119
|
+
--overlay-watermark: rgba(0, 0, 0, 0.15);
|
|
120
|
+
|
|
121
|
+
/* ─── Border Radius ───────────────────────────────────────── */
|
|
122
|
+
/* cloud-design 锐利风格 — base 4px + Tailwind v4 sm/md/lg/xl 显式派生
|
|
123
|
+
（Tailwind v4 的 rounded-{sm,md,lg,xl} 走各自 --radius-{sm,md,lg,xl}，不会自动从 --radius 推导，
|
|
124
|
+
不显式声明会回退到 Tailwind 默认 4/6/8/12px）*/
|
|
125
|
+
--radius: 0.25rem;
|
|
126
|
+
--radius-sm: 0px;
|
|
127
|
+
--radius-md: 2px;
|
|
128
|
+
--radius-lg: 4px;
|
|
129
|
+
--radius-xl: 8px;
|
|
130
|
+
--radius-2xl: 12px;
|
|
131
|
+
|
|
132
|
+
/* ─── Font Family ─────────────────────────────────────────── */
|
|
133
|
+
--font-sans: "PingFang SC", "Helvetica Neue", "Microsoft YaHei", Helvetica,
|
|
134
|
+
Arial, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
135
|
+
sans-serif;
|
|
136
|
+
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
|
|
137
|
+
"Liberation Mono", monospace;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
/* class 模式暗色，保持与 v3 一致的切换约定 */
|
|
141
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
142
|
+
|
|
143
|
+
@layer base {
|
|
144
|
+
.dark {
|
|
145
|
+
--color-background: #0A0A0A;
|
|
146
|
+
--color-foreground: #E6E6E6;
|
|
147
|
+
--color-card: #141414;
|
|
148
|
+
--color-card-foreground: #E6E6E6;
|
|
149
|
+
--color-popover: #141414;
|
|
150
|
+
--color-popover-foreground: #E6E6E6;
|
|
151
|
+
--color-primary: #2789F2;
|
|
152
|
+
--color-primary-foreground: #FFFFFF;
|
|
153
|
+
--color-secondary: #333333;
|
|
154
|
+
--color-secondary-foreground: #E6E6E6;
|
|
155
|
+
--color-muted: #333333;
|
|
156
|
+
--color-muted-foreground: #8C8C8C;
|
|
157
|
+
--color-accent: #18232E;
|
|
158
|
+
--color-accent-foreground: #2789F2;
|
|
159
|
+
--color-destructive: #F2493A;
|
|
160
|
+
--color-destructive-foreground: #FFFFFF;
|
|
161
|
+
--color-success: #12B862;
|
|
162
|
+
--color-success-foreground: #FFFFFF;
|
|
163
|
+
--color-success-subtle: #0F1F16;
|
|
164
|
+
--color-success-border: #1B9657;
|
|
165
|
+
--color-warning: #E67C0B;
|
|
166
|
+
--color-warning-foreground: #FFFFFF;
|
|
167
|
+
--color-warning-subtle: #241B12;
|
|
168
|
+
--color-warning-border: #D47815;
|
|
169
|
+
--color-info: #2789F2;
|
|
170
|
+
--color-info-foreground: #FFFFFF;
|
|
171
|
+
--color-info-subtle: #18232E;
|
|
172
|
+
--color-info-border: #33699F;
|
|
173
|
+
--color-border: #333333;
|
|
174
|
+
--color-input: #333333;
|
|
175
|
+
--color-ring: #2789F2;
|
|
176
|
+
--color-chart-1: #B81838;
|
|
177
|
+
--color-chart-2: #F2493A;
|
|
178
|
+
--color-chart-3: #E67C0B;
|
|
179
|
+
--color-chart-4: #D6A81C;
|
|
180
|
+
--color-chart-5: #8C7F3B;
|
|
181
|
+
--color-sidebar-background: #141414;
|
|
182
|
+
--color-sidebar-foreground: #8C8C8C;
|
|
183
|
+
--color-sidebar-primary: #2789F2;
|
|
184
|
+
--color-sidebar-primary-foreground: #FFFFFF;
|
|
185
|
+
--color-sidebar-accent: #1C1C1C;
|
|
186
|
+
--color-sidebar-accent-foreground: #2789F2;
|
|
187
|
+
--color-sidebar-border: #1C1C1C;
|
|
188
|
+
--color-sidebar-ring: #2789F2;
|
|
189
|
+
|
|
190
|
+
/* Shadow — hybridcloud shadow.X.down dark values（不透明度更高，对应深色背景上的更明显投影）*/
|
|
191
|
+
--shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.20);
|
|
192
|
+
--shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.20);
|
|
193
|
+
--shadow-2xs: 0px 1px 1px 0px rgba(0, 0, 0, 0.16);
|
|
194
|
+
--shadow-md: 0px 4px 16px 0px rgba(0, 0, 0, 0.30);
|
|
195
|
+
--shadow-lg: 0px 6px 24px 0px rgba(0, 0, 0, 0.64);
|
|
196
|
+
--shadow-xl: 0px 12px 48px 0px rgba(0, 0, 0, 0.80);
|
|
197
|
+
--shadow-2xl: 0px 16px 64px 0px rgba(0, 0, 0, 0.80);
|
|
198
|
+
}
|
|
199
|
+
}
|