@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,150 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* OpenTrek Design Tokens — Tailwind v4 @theme
|
|
3
|
+
*
|
|
4
|
+
* 完整自包含 token 集(无 default 继承),适用于 Tailwind CSS v4。
|
|
5
|
+
* 通过 @theme 直接声明设计变量,Tailwind 据此生成 utility
|
|
6
|
+
* (如 bg-primary、text-foreground 等)。
|
|
7
|
+
*
|
|
8
|
+
* 使用方式(在样式入口):
|
|
9
|
+
* @import "tailwindcss";
|
|
10
|
+
* @import "@teamix-evo/tokens/variants/opentrek/theme.css";
|
|
11
|
+
*
|
|
12
|
+
* shadcn 全局偏好(pointer cursor 等)由 @teamix-evo/ui 提供;
|
|
13
|
+
* 业务工程通过 `teamix-evo ui init` 部署到 `src/preferences.css`。
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
@theme {
|
|
17
|
+
/* ─── Semantic Colors (Light) ─────────────────────────────── */
|
|
18
|
+
--color-background: hsl(0 0% 100%);
|
|
19
|
+
--color-foreground: hsl(222.2 84% 4.9%);
|
|
20
|
+
--color-card: hsl(0 0% 100%);
|
|
21
|
+
--color-card-foreground: hsl(222.2 84% 4.9%);
|
|
22
|
+
--color-popover: hsl(0 0% 100%);
|
|
23
|
+
--color-popover-foreground: hsl(222.2 84% 4.9%);
|
|
24
|
+
--color-primary: hsl(222.2 47.4% 11.2%);
|
|
25
|
+
--color-primary-foreground: hsl(210 40% 98%);
|
|
26
|
+
--color-secondary: hsl(210 40% 96.1%);
|
|
27
|
+
--color-secondary-foreground: hsl(222.2 47.4% 11.2%);
|
|
28
|
+
--color-muted: hsl(210 40% 96.1%);
|
|
29
|
+
--color-muted-foreground: hsl(215.4 16.3% 46.9%);
|
|
30
|
+
--color-accent: hsl(210 40% 96.1%);
|
|
31
|
+
--color-accent-foreground: hsl(222.2 47.4% 11.2%);
|
|
32
|
+
--color-destructive: hsl(0 84.2% 60.2%);
|
|
33
|
+
--color-destructive-foreground: hsl(210 40% 98%);
|
|
34
|
+
/* ─── Status Colors ─────────────────────────────────────── */
|
|
35
|
+
--color-success: hsl(142 71% 45%);
|
|
36
|
+
--color-success-foreground: hsl(140 100% 97%);
|
|
37
|
+
--color-success-subtle: hsl(141 84% 93%);
|
|
38
|
+
--color-success-border: hsl(142 76% 36%);
|
|
39
|
+
--color-warning: hsl(38 92% 50%);
|
|
40
|
+
--color-warning-foreground: hsl(48 100% 96%);
|
|
41
|
+
--color-warning-subtle: hsl(48 96% 89%);
|
|
42
|
+
--color-warning-border: hsl(35 92% 42%);
|
|
43
|
+
--color-info: hsl(217 91% 60%);
|
|
44
|
+
--color-info-foreground: hsl(214 100% 97%);
|
|
45
|
+
--color-info-subtle: hsl(214 95% 93%);
|
|
46
|
+
--color-info-border: hsl(217 91% 50%);
|
|
47
|
+
--color-border: hsl(214.3 31.8% 91.4%);
|
|
48
|
+
--color-input: hsl(214.3 31.8% 91.4%);
|
|
49
|
+
--color-ring: hsl(222.2 84% 4.9%);
|
|
50
|
+
--color-chart-1: hsl(12 76% 61%);
|
|
51
|
+
--color-chart-2: hsl(173 58% 39%);
|
|
52
|
+
--color-chart-3: hsl(197 37% 24%);
|
|
53
|
+
--color-chart-4: hsl(43 74% 66%);
|
|
54
|
+
--color-chart-5: hsl(27 87% 67%);
|
|
55
|
+
--color-sidebar-background: hsl(0 0% 98%);
|
|
56
|
+
--color-sidebar-foreground: hsl(240 5.3% 26.1%);
|
|
57
|
+
--color-sidebar-primary: hsl(240 5.9% 10%);
|
|
58
|
+
--color-sidebar-primary-foreground: hsl(0 0% 98%);
|
|
59
|
+
--color-sidebar-accent: hsl(240 4.8% 95.9%);
|
|
60
|
+
--color-sidebar-accent-foreground: hsl(240 5.9% 10%);
|
|
61
|
+
--color-sidebar-border: hsl(220 13% 91%);
|
|
62
|
+
--color-sidebar-ring: hsl(217.2 91.2% 59.8%);
|
|
63
|
+
|
|
64
|
+
/* ─── Layout Sizes ──────────────────────────────────────── */
|
|
65
|
+
--layout-dialog-sm: 480px;
|
|
66
|
+
--layout-dialog-md: 600px;
|
|
67
|
+
--layout-dialog-lg: 720px;
|
|
68
|
+
--layout-dialog-xl: 800px;
|
|
69
|
+
--layout-panel-sm: 200px;
|
|
70
|
+
--layout-panel-md: 240px;
|
|
71
|
+
--layout-submenu: 160px;
|
|
72
|
+
--layout-menu-min: 8rem;
|
|
73
|
+
--layout-popover-max: 24rem;
|
|
74
|
+
--layout-listbox-max: 300px;
|
|
75
|
+
--layout-counter: 1.25rem;
|
|
76
|
+
--layout-notification: 360px;
|
|
77
|
+
--layout-menu-md: 12rem;
|
|
78
|
+
--layout-textarea-min: 80px;
|
|
79
|
+
--layout-image-preview-max-w: 90vw;
|
|
80
|
+
--layout-image-preview-max-h: 85vh;
|
|
81
|
+
|
|
82
|
+
/* ─── Auxiliary Typography ──────────────────────────────── */
|
|
83
|
+
--text-xxs: 0.625rem;
|
|
84
|
+
--text-xs-cal: 0.8rem;
|
|
85
|
+
|
|
86
|
+
/* ─── Overlay ───────────────────────────────────────────── */
|
|
87
|
+
--overlay-scrim: rgba(0, 0, 0, 0.5);
|
|
88
|
+
--overlay-watermark: rgba(0, 0, 0, 0.15);
|
|
89
|
+
|
|
90
|
+
/* ─── Border Radius ─────────────────────────────────────── */
|
|
91
|
+
--radius: 0.5rem;
|
|
92
|
+
|
|
93
|
+
/* ─── Font Family ───────────────────────────────────────── */
|
|
94
|
+
--font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI,
|
|
95
|
+
Roboto, Helvetica Neue, Arial, sans-serif;
|
|
96
|
+
--font-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
|
|
97
|
+
Liberation Mono, monospace;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/* class 模式暗色,保持与 v3 一致的切换约定 */
|
|
101
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
102
|
+
|
|
103
|
+
@layer base {
|
|
104
|
+
.dark {
|
|
105
|
+
--color-background: hsl(222.2 84% 4.9%);
|
|
106
|
+
--color-foreground: hsl(210 40% 98%);
|
|
107
|
+
--color-card: hsl(222.2 84% 4.9%);
|
|
108
|
+
--color-card-foreground: hsl(210 40% 98%);
|
|
109
|
+
--color-popover: hsl(222.2 84% 4.9%);
|
|
110
|
+
--color-popover-foreground: hsl(210 40% 98%);
|
|
111
|
+
--color-primary: hsl(210 40% 98%);
|
|
112
|
+
--color-primary-foreground: hsl(222.2 47.4% 11.2%);
|
|
113
|
+
--color-secondary: hsl(217.2 32.6% 17.5%);
|
|
114
|
+
--color-secondary-foreground: hsl(210 40% 98%);
|
|
115
|
+
--color-muted: hsl(217.2 32.6% 17.5%);
|
|
116
|
+
--color-muted-foreground: hsl(215 20.2% 65.1%);
|
|
117
|
+
--color-accent: hsl(217.2 32.6% 17.5%);
|
|
118
|
+
--color-accent-foreground: hsl(210 40% 98%);
|
|
119
|
+
--color-destructive: hsl(0 62.8% 30.6%);
|
|
120
|
+
--color-destructive-foreground: hsl(210 40% 98%);
|
|
121
|
+
--color-success: hsl(142 71% 45%);
|
|
122
|
+
--color-success-foreground: hsl(140 100% 97%);
|
|
123
|
+
--color-success-subtle: hsl(143 65% 18%);
|
|
124
|
+
--color-success-border: hsl(142 71% 45%);
|
|
125
|
+
--color-warning: hsl(38 92% 50%);
|
|
126
|
+
--color-warning-foreground: hsl(48 100% 96%);
|
|
127
|
+
--color-warning-subtle: hsl(36 70% 18%);
|
|
128
|
+
--color-warning-border: hsl(38 92% 50%);
|
|
129
|
+
--color-info: hsl(217 91% 60%);
|
|
130
|
+
--color-info-foreground: hsl(214 100% 97%);
|
|
131
|
+
--color-info-subtle: hsl(217 70% 18%);
|
|
132
|
+
--color-info-border: hsl(217 91% 60%);
|
|
133
|
+
--color-border: hsl(217.2 32.6% 17.5%);
|
|
134
|
+
--color-input: hsl(217.2 32.6% 17.5%);
|
|
135
|
+
--color-ring: hsl(212.7 26.8% 83.9%);
|
|
136
|
+
--color-chart-1: hsl(220 70% 50%);
|
|
137
|
+
--color-chart-2: hsl(160 60% 45%);
|
|
138
|
+
--color-chart-3: hsl(30 80% 55%);
|
|
139
|
+
--color-chart-4: hsl(280 65% 60%);
|
|
140
|
+
--color-chart-5: hsl(340 75% 55%);
|
|
141
|
+
--color-sidebar-background: hsl(240 5.9% 10%);
|
|
142
|
+
--color-sidebar-foreground: hsl(240 4.8% 95.9%);
|
|
143
|
+
--color-sidebar-primary: hsl(224.3 76.3% 48%);
|
|
144
|
+
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
145
|
+
--color-sidebar-accent: hsl(240 3.7% 15.9%);
|
|
146
|
+
--color-sidebar-accent-foreground: hsl(240 4.8% 95.9%);
|
|
147
|
+
--color-sidebar-border: hsl(240 3.7% 15.9%);
|
|
148
|
+
--color-sidebar-ring: hsl(217.2 91.2% 59.8%);
|
|
149
|
+
}
|
|
150
|
+
}
|