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