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