tango-ui-cw 1.0.7 → 1.0.8

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 (2) hide show
  1. package/dist/styles/base.css +373 -0
  2. package/package.json +2 -1
package/dist/styles/base.css ADDED
@@ -0,0 +1,373 @@
1
+ @import "./style.css";
2
+ @import "./theme.css";
3
+
4
+ /*
5
+ * 这个文件定义了全局的CSS变量，主要用于主题颜色和一些常用的样式变量。
6
+ * 通过使用CSS变量，可以方便地在整个应用中统一管理和修改主题颜色。
7
+ * 其中，:root选择器定义了默认的颜色变量，而[data-theme="dark"]选择器则定义了暗色模式下的颜色变量。
8
+ * 这样可以通过切换data-theme属性来实现主题的切换。
9
+ * 另外，还定义了一些透明色、表格背景、工具提示等相关的颜色变量，以便在不同组件中使用。
10
+ * 这些变量可以根据需要进行调整，以适应不同的设计需求和用户偏好.
11
+ * added by clayw on 20260210
12
+ */
13
+ :root {
14
+ --radius: 0.625rem;
15
+ /* 用于页面整体背景、大容器背景 */
16
+ --background: oklch(1 0 0);
17
+ --foreground: oklch(0.145 0 0);
18
+ /* ****** */
19
+
20
+ --card: oklch(1 0 0);
21
+ --card-foreground: oklch(0.145 0 0);
22
+ --popover: oklch(1 0 0);
23
+ --popover-foreground: oklch(0.145 0 0);
24
+ /* 按钮背景、品牌强调色、小区域 */
25
+ --primary: oklch(0.985 0 0);
26
+ --primary-foreground: oklch(0.205 0 0);
27
+ --success: oklch(0.72 0.19 149);
28
+ --success-foreground: oklch(0.985 0 0);
29
+ --destructive-foreground: oklch(0.985 0 0);
30
+ --input-accent: oklch(0.205 0 0);
31
+ --modal-bg: oklch(0.985 0 0);
32
+ --modal-ok-bg: oklch(0.205 0 0);
33
+ --modal-ok-fg: oklch(0.985 0 0);
34
+ --modal-cancel-bg: oklch(0.985 0 0);
35
+ --modal-cancel-fg: oklch(0.205 0 0);
36
+ --modal-shadow: 0 2px 10px color-mix(in oklch, var(--foreground) 10%, transparent);
37
+ --drawer-bg: oklch(0.985 0 0);
38
+ --drawer-ok-bg: oklch(0.205 0 0);
39
+ --drawer-ok-fg: oklch(0.985 0 0);
40
+ --drawer-cancel-bg: oklch(0.985 0 0);
41
+ --drawer-cancel-fg: oklch(0.205 0 0);
42
+ --datepicker-confirm-bg: oklch(0.205 0 0);
43
+ --datepicker-confirm-fg: oklch(0.985 0 0);
44
+ --datepicker-cancel-bg: oklch(0.985 0 0);
45
+ --datepicker-cancel-fg: oklch(0.205 0 0);
46
+ /* ****** */
47
+
48
+ --input-bg: oklch(0.985 0 0);
49
+ --input-shadow: 0 1px 3px color-mix(in oklch, var(--foreground) 8%, transparent);
50
+ --input-focus-shadow: 0 0 0 3px color-mix(in oklch, var(--input-accent) 25%, transparent);
51
+ --input-error-border: oklch(0.577 0.245 27.325);
52
+ --input-error-bg: oklch(0.97 0.014 27.325);
53
+ --input-error-fg: oklch(0.577 0.245 27.325);
54
+ --input-error-focus-shadow: 0 0 0 3px color-mix(in oklch, var(--input-error-border) 25%, transparent);
55
+
56
+ --secondary: oklch(0.97 0 0);
57
+ --secondary-foreground: oklch(0.205 0 0);
58
+ --muted: oklch(0.97 0 0);
59
+ --muted-foreground: oklch(0.556 0 0);
60
+ --accent: oklch(0.97 0 0);
61
+ --accent-foreground: oklch(0.205 0 0);
62
+ --destructive: oklch(0.577 0.245 27.325);
63
+ --border: oklch(0.922 0 0);
64
+ --input: oklch(0.922 0 0);
65
+ --sidebar: oklch(0.985 0 0);
66
+ --sidebar-foreground: oklch(0.145 0 0);
67
+ --sidebar-primary: oklch(0.205 0 0);
68
+ --sidebar-primary-foreground: oklch(0.985 0 0);
69
+ --sidebar-accent: oklch(0.97 0 0);
70
+ --sidebar-accent-foreground: oklch(0.205 0 0);
71
+ --sidebar-border: oklch(0.922 0 0);
72
+ --sidebar-ring: oklch(0.708 0 0);
73
+
74
+ /* 透明色 */
75
+ --transparent: rgba(0, 0, 0, 0);
76
+
77
+ /* Button 主题 token，组件源码只消费变量，不直接写死颜色 */
78
+ --button-outline-foreground: var(--foreground);
79
+ --button-transparent-border: color-mix(in oklch, var(--foreground) 35%, transparent);
80
+ --button-shadow-default: color-mix(in oklch, var(--foreground) 20%, transparent);
81
+ --button-enu-bg: color-mix(in oklch, var(--background) 86%, var(--foreground) 6%);
82
+ --button-enu-fg: var(--foreground);
83
+ --button-enu-shadow: 4px 4px 8px color-mix(in oklch, var(--foreground) 16%, transparent), -4px -4px 8px color-mix(in oklch, var(--background) 92%, white);
84
+ --button-enu-hover-shadow: inset 3px 3px 6px color-mix(in oklch, var(--foreground) 16%, transparent), inset -3px -3px 6px color-mix(in oklch, var(--background) 92%, white), 3px 3px 6px color-mix(in oklch, var(--foreground) 16%, transparent), -3px -3px 6px color-mix(in oklch, var(--background) 92%, white);
85
+ --button-enu-active-shadow: inset 4px 4px 8px color-mix(in oklch, var(--foreground) 22%, transparent), inset -4px -4px 8px color-mix(in oklch, var(--background) 92%, white);
86
+ --button-loading-light: var(--background);
87
+ --button-loading-dark: var(--foreground);
88
+
89
+ /* 用于Drawer组件亮色确认按钮颜色 */
90
+ --primary-drawer: oklch(0.205 0 0);
91
+ --primary-foreground-drawer: oklch(0.922 0 0);
92
+
93
+ --table-background: var(--card);
94
+ --table-hover: var(--muted-foreground);
95
+
96
+ --tooltip-background: oklch(0.205 0 0);
97
+ --tooltip-foreground: oklch(0.922 0 0);
98
+ --tooltip-border: oklch(0.205 0 0);
99
+ --tooltip-radius: var(--radius);
100
+ --tooltip-shadow: 0 2px 8px color-mix(in oklch, var(--foreground) 12%, transparent);
101
+
102
+ --ripple-color: oklch(0.205 0 0 / 20%);
103
+
104
+ /* MaterialButton 主题 token */
105
+ --material-button-ripple: color-mix(in oklch, var(--primary-foreground) 60%, transparent);
106
+
107
+ /* Space 主题 token */
108
+ --space-triangle-size: 50px;
109
+ --space-triangle-color: var(--primary);
110
+ --space-half-circle-w: 100px;
111
+ --space-half-circle-h: 50px;
112
+ --space-half-circle-color: var(--primary);
113
+
114
+ /* Layout 主题 token */
115
+ --layout-header-bg: oklch(0.88 0 0);
116
+ --layout-header-color: oklch(0.25 0 0);
117
+ --layout-header-height: 64px;
118
+ --layout-footer-bg: oklch(0.88 0 0);
119
+ --layout-footer-color: oklch(0.25 0 0);
120
+ --layout-footer-height: 48px;
121
+ --layout-sider-bg: oklch(0.82 0 0);
122
+ --layout-sider-color: oklch(0.25 0 0);
123
+ --layout-sider-width: 200px;
124
+ --layout-toc-bg: oklch(0.92 0 0);
125
+ --layout-toc-color: oklch(0.25 0 0);
126
+ --layout-toc-width: 180px;
127
+ --layout-content-bg: var(--background);
128
+ --layout-content-color: var(--foreground);
129
+ --layout-border: var(--border);
130
+
131
+ /* Line 主题 token */
132
+ --line-color: var(--border);
133
+
134
+ /* Mark 主题 token */
135
+ --mark-default-bg: oklch(0.92 0.07 90);
136
+ --mark-primary-bg: oklch(0.90 0.10 250);
137
+ --mark-success-bg: oklch(0.90 0.10 150);
138
+ --mark-warning-bg: oklch(0.92 0.12 80);
139
+ --mark-danger-bg: oklch(0.90 0.12 25);
140
+
141
+ /* Notice 主题 token */
142
+ --notice-bg: oklch(1 0 0 / 92%);
143
+ --notice-foreground: oklch(0.205 0 0);
144
+ --notice-radius: var(--radius);
145
+ --notice-shadow: 0 6px 16px color-mix(in oklch, var(--foreground) 8%, transparent), 0 3px 6px -4px color-mix(in oklch, var(--foreground) 12%, transparent), 0 9px 28px 8px color-mix(in oklch, var(--foreground) 5%, transparent);
146
+ --notice-success-text: oklch(0.52 0.17 149);
147
+ --notice-fail-text: oklch(0.58 0.24 27);
148
+ --notice-caution-text: oklch(0.68 0.16 60);
149
+
150
+ /* Upload 主题 token */
151
+ --upload-border: var(--border);
152
+ --upload-radius: var(--radius);
153
+ --upload-list-bg: var(--background);
154
+ --upload-item-text: var(--foreground);
155
+ --upload-item-hover-bg: var(--muted);
156
+ --upload-icon-color: var(--muted-foreground);
157
+ --upload-del-color: var(--muted-foreground);
158
+ --upload-del-hover-bg: var(--accent);
159
+
160
+ /* Banner 主题 token — 亮色（同色系：背景淡、边框中、图标深、文字暗） */
161
+ --banner-info-bg: oklch(0.95 0.04 250);
162
+ --banner-info-border: oklch(0.62 0.17 250);
163
+ --banner-info-icon: oklch(0.52 0.17 250);
164
+ --banner-info-text: oklch(0.30 0.09 250);
165
+
166
+ --banner-success-bg: oklch(0.94 0.05 149);
167
+ --banner-success-border: oklch(0.62 0.18 149);
168
+ --banner-success-icon: oklch(0.52 0.18 149);
169
+ --banner-success-text: oklch(0.30 0.11 149);
170
+
171
+ --banner-warning-bg: oklch(0.96 0.06 80);
172
+ --banner-warning-border: oklch(0.78 0.15 80);
173
+ --banner-warning-icon: oklch(0.68 0.16 60);
174
+ --banner-warning-text: oklch(0.38 0.11 60);
175
+
176
+ --banner-error-bg: oklch(0.94 0.04 25);
177
+ --banner-error-border: oklch(0.63 0.21 25);
178
+ --banner-error-icon: oklch(0.55 0.22 25);
179
+ --banner-error-text: oklch(0.32 0.13 25);
180
+
181
+ --banner-close-icon: oklch(0.45 0 0);
182
+ --banner-btn-text: oklch(0.35 0 0);
183
+ --banner-btn-border: color-mix(in oklch, var(--foreground) 30%, transparent);
184
+ }
185
+
186
+ [data-theme="dark"] {
187
+ --background: oklch(0.145 0 0);
188
+ --foreground: oklch(0.985 0 0);
189
+ --card: oklch(0.205 0 0);
190
+ --card-foreground: oklch(0.985 0 0);
191
+ --popover: oklch(0.205 0 0);
192
+ --popover-foreground: oklch(0.985 0 0);
193
+ --primary: oklch(0.205 0 0);
194
+ --primary-foreground: oklch(0.922 0 0);
195
+ --success: oklch(0.62 0.19 149);
196
+ --success-foreground: oklch(0.985 0 0);
197
+ --destructive-foreground: oklch(0.985 0 0);
198
+ --input-accent: oklch(0.985 0 0);
199
+ --modal-bg: oklch(0.205 0 0);
200
+ --modal-ok-bg: oklch(0.985 0 0);
201
+ --modal-ok-fg: oklch(0.205 0 0);
202
+ --modal-cancel-bg: oklch(0.205 0 0);
203
+ --modal-cancel-fg: oklch(0.985 0 0);
204
+ --modal-shadow: 0 2px 10px color-mix(in oklch, black 40%, transparent);
205
+ --drawer-bg: oklch(0.205 0 0);
206
+ --drawer-ok-bg: oklch(0.985 0 0);
207
+ --drawer-ok-fg: oklch(0.205 0 0);
208
+ --drawer-cancel-bg: oklch(0.205 0 0);
209
+ --drawer-cancel-fg: oklch(0.985 0 0);
210
+ --datepicker-confirm-bg: oklch(0.985 0 0);
211
+ --datepicker-confirm-fg: oklch(0.205 0 0);
212
+ --datepicker-cancel-bg: oklch(0.205 0 0);
213
+ --datepicker-cancel-fg: oklch(0.985 0 0);
214
+ --secondary: oklch(0.269 0 0);
215
+ --secondary-foreground: oklch(0.985 0 0);
216
+ --muted: oklch(0.269 0 0);
217
+ --muted-foreground: oklch(0.708 0 0);
218
+ --accent: oklch(0.269 0 0);
219
+ --accent-foreground: oklch(0.985 0 0);
220
+ --destructive: oklch(0.704 0.191 22.216);
221
+ --border: oklch(1 0 0 / 10%);
222
+ --input: oklch(1 0 0 / 15%);
223
+ --sidebar: oklch(0.205 0 0);
224
+ --sidebar-foreground: oklch(0.985 0 0);
225
+ --sidebar-primary: oklch(0.488 0.243 264.376);
226
+ --sidebar-primary-foreground: oklch(0.985 0 0);
227
+ --sidebar-accent: oklch(0.269 0 0);
228
+ --sidebar-accent-foreground: oklch(0.985 0 0);
229
+ --sidebar-border: oklch(1 0 0 / 10%);
230
+ --sidebar-ring: oklch(0.556 0 0);
231
+
232
+ /* 用于Drawer组件暗色确认按钮颜色 */
233
+ --primary-drawer: oklch(0.985 0 0);
234
+ --primary-foreground-drawer: oklch(0.205 0 0);
235
+
236
+ --button-outline-foreground: var(--foreground);
237
+ --button-transparent-border: color-mix(in oklch, var(--foreground) 45%, transparent);
238
+ --button-shadow-default: color-mix(in oklch, var(--foreground) 35%, transparent);
239
+ --button-enu-bg: color-mix(in oklch, var(--background) 78%, var(--foreground) 20%);
240
+ --button-enu-fg: var(--foreground);
241
+ --button-enu-shadow: 4px 4px 8px color-mix(in oklch, black 40%, transparent), -4px -4px 8px color-mix(in oklch, white 14%, transparent);
242
+ --button-enu-hover-shadow: inset 3px 3px 6px color-mix(in oklch, black 45%, transparent), inset -3px -3px 6px color-mix(in oklch, white 16%, transparent), 3px 3px 6px color-mix(in oklch, black 45%, transparent), -3px -3px 6px color-mix(in oklch, white 16%, transparent);
243
+ --button-enu-active-shadow: inset 4px 4px 8px color-mix(in oklch, black 52%, transparent), inset -4px -4px 8px color-mix(in oklch, white 20%, transparent);
244
+ --button-loading-light: var(--background);
245
+ --button-loading-dark: var(--foreground);
246
+
247
+ --table-background: var(--card);
248
+ --table-hover: var(--muted-foreground);
249
+
250
+ --tooltip-background: oklch(0.922 0 0);
251
+ --tooltip-foreground: oklch(0.205 0 0);
252
+ --tooltip-border: oklch(0.922 0 0);
253
+ --tooltip-radius: var(--radius);
254
+ --tooltip-shadow: 0 2px 8px color-mix(in oklch, black 30%, transparent);
255
+
256
+ --input-bg: oklch(0.205 0 0);
257
+ --input-shadow: 0 1px 3px color-mix(in oklch, black 30%, transparent);
258
+ --input-focus-shadow: 0 0 0 3px color-mix(in oklch, var(--input-accent) 25%, transparent);
259
+ --input-error-border: oklch(0.704 0.191 22.216);
260
+ --input-error-bg: oklch(0.24 0.04 25);
261
+ --input-error-fg: oklch(0.704 0.191 22.216);
262
+ --input-error-focus-shadow: 0 0 0 3px color-mix(in oklch, var(--input-error-border) 25%, transparent);
263
+
264
+ /* Banner 主题 token — 暗色（同色系：背景深、边框中暗、图标亮、文字亮） */
265
+ --banner-info-bg: oklch(0.24 0.06 250);
266
+ --banner-info-border: oklch(0.45 0.15 250);
267
+ --banner-info-icon: oklch(0.65 0.18 250);
268
+ --banner-info-text: oklch(0.83 0.07 250);
269
+
270
+ --banner-success-bg: oklch(0.24 0.06 149);
271
+ --banner-success-border: oklch(0.45 0.15 149);
272
+ --banner-success-icon: oklch(0.65 0.19 149);
273
+ --banner-success-text: oklch(0.83 0.08 149);
274
+
275
+ --banner-warning-bg: oklch(0.27 0.06 80);
276
+ --banner-warning-border: oklch(0.50 0.13 80);
277
+ --banner-warning-icon: oklch(0.72 0.15 60);
278
+ --banner-warning-text: oklch(0.83 0.08 60);
279
+
280
+ --banner-error-bg: oklch(0.24 0.05 25);
281
+ --banner-error-border: oklch(0.45 0.16 25);
282
+ --banner-error-icon: oklch(0.65 0.22 25);
283
+ --banner-error-text: oklch(0.83 0.08 25);
284
+
285
+ --banner-close-icon: oklch(0.7 0 0);
286
+ --banner-btn-text: oklch(0.8 0 0);
287
+ --banner-btn-border: color-mix(in oklch, var(--foreground) 40%, transparent);
288
+
289
+ --material-button-ripple: color-mix(in oklch, var(--primary-foreground) 60%, transparent);
290
+
291
+ /* Space 主题 token */
292
+ --space-triangle-size: 50px;
293
+ --space-triangle-color: var(--primary);
294
+ --space-half-circle-w: 100px;
295
+ --space-half-circle-h: 50px;
296
+ --space-half-circle-color: var(--primary);
297
+
298
+ /* Layout 主题 token */
299
+ --layout-header-bg: oklch(0.28 0 0);
300
+ --layout-header-color: oklch(0.85 0 0);
301
+ --layout-header-height: 64px;
302
+ --layout-footer-bg: oklch(0.28 0 0);
303
+ --layout-footer-color: oklch(0.85 0 0);
304
+ --layout-footer-height: 48px;
305
+ --layout-sider-bg: oklch(0.22 0 0);
306
+ --layout-sider-color: oklch(0.85 0 0);
307
+ --layout-sider-width: 200px;
308
+ --layout-toc-bg: oklch(0.26 0 0);
309
+ --layout-toc-color: oklch(0.85 0 0);
310
+ --layout-toc-width: 180px;
311
+ --layout-content-bg: var(--background);
312
+ --layout-content-color: var(--foreground);
313
+ --layout-border: var(--border);
314
+
315
+ /* Line 主题 token */
316
+ --line-color: var(--border);
317
+
318
+ /* Mark 主题 token（暗色：饱和度更高、亮度更低） */
319
+ --mark-default-bg: oklch(0.50 0.10 90);
320
+ --mark-primary-bg: oklch(0.45 0.15 250);
321
+ --mark-success-bg: oklch(0.45 0.15 150);
322
+ --mark-warning-bg: oklch(0.50 0.15 80);
323
+ --mark-danger-bg: oklch(0.45 0.15 25);
324
+
325
+ /* Notice 主题 token */
326
+ --notice-bg: oklch(0.205 0 0 / 92%);
327
+ --notice-foreground: oklch(0.985 0 0);
328
+ --notice-radius: var(--radius);
329
+ --notice-shadow: 0 6px 16px color-mix(in oklch, black 40%, transparent), 0 3px 6px -4px color-mix(in oklch, black 30%, transparent), 0 9px 28px 8px color-mix(in oklch, black 20%, transparent);
330
+ --notice-success-text: oklch(0.72 0.19 149);
331
+ --notice-fail-text: oklch(0.70 0.19 22);
332
+ --notice-caution-text: oklch(0.78 0.15 60);
333
+
334
+ /* Upload 主题 token */
335
+ --upload-border: var(--border);
336
+ --upload-radius: var(--radius);
337
+ --upload-list-bg: var(--background);
338
+ --upload-item-text: var(--foreground);
339
+ --upload-item-hover-bg: var(--muted);
340
+ --upload-icon-color: var(--muted-foreground);
341
+ --upload-del-color: var(--muted-foreground);
342
+ --upload-del-hover-bg: var(--accent);
343
+ }
344
+
345
+ /* Layout 响应式：窄屏下 Sider/Toc 变全宽 */
346
+ @media (max-width: 768px) {
347
+ :root,
348
+ [data-theme="dark"] {
349
+ --layout-sider-width: 100%;
350
+ --layout-toc-width: 100%;
351
+ --layout-header-height: 48px;
352
+ --layout-footer-height: 40px;
353
+ }
354
+ }
355
+
356
+ /* Notice 动画 */
357
+ @keyframes noticeSlideDown {
358
+ 0% { transform: translateX(-50%) translateY(-50px); opacity: 0; }
359
+ 80% { transform: translateX(-50%) translateY(4px); opacity: 1; }
360
+ 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
361
+ }
362
+ @keyframes noticeSlideUpFade {
363
+ from { transform: translateX(-50%) translateY(0); opacity: 1; }
364
+ to { transform: translateX(-50%) translateY(-20px); opacity: 0; }
365
+ }
366
+ @keyframes noticeSlideFromBottom {
367
+ from { transform: translateX(0); opacity: 0; }
368
+ to { transform: translateX(2%); opacity: 1; }
369
+ }
370
+ @keyframes noticeSlideToBottom {
371
+ from { transform: translateX(2%); opacity: 1; }
372
+ to { transform: translateX(0); opacity: 0; }
373
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tango-ui-cw",
3
- "version": "1.0.7",
3
+ "version": "1.0.8",
4
4
  "description": "A lightweight ui library with ClayW",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",
@@ -58,6 +58,7 @@
58
58
  }
59
59
  },
60
60
  "./style.css": "./dist/styles/global.css",
61
+ "./base.css": "./dist/styles/base.css",
61
62
  "./styles/*": "./dist/styles/*",
62
63
  "./providers/*": "./dist/providers/*"
63
64
  },