TinyVue Theme Data

TinyVue Theme Data

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
/* prettier-ignore */
:root {
  /* 1.1品牌色 */

  /* 品牌主色 */
  --tv-base-color-brand: #191919; // 主色黑/链接颜色

  --tv-base-color-brand-1: #f0f7ff;
  --tv-base-color-brand-2: #deecff; // 日期选择悬浮背景色 /提示-背景色
  --tv-base-color-brand-3: #b3d6ff; // 浅背景-悬浮色，开关组件“开”禁用背景色
  --tv-base-color-brand-4: #7eb7fc;
  --tv-base-color-brand-5: #4191fa;
  --tv-base-color-brand-6: #1476ff; // 辅助色，文字按钮色、文字按钮悬浮色 /单选框选中悬浮/聚焦/激活小圆点填充色和边框色
  --tv-base-color-brand-7: #0f5ed4;
  --tv-base-color-brand-8: #0845a6;
  --tv-base-color-brand-9: #022e7a;
  --tv-base-color-brand-10: #001a4a;
  --tv-base-color-brand-11: #3d6899;
  --tv-base-color-brand-12: #7fa6d4;
  --tv-base-color-brand-13: #b6d4f2;

  /* 1.2 中立色 */

  /* 公用灰色系，用于文本、图标、线条、背景色 */
  --tv-base-color-common-1: #ffffff; // 顶部导航背景色、 顶部导航下拉背景色/次要按钮-背景色、次要按钮-hover/Focus/active背景色、输入框背景色
  --tv-base-color-common-2: #fafafa; // 新区域组件-悬浮背景色
  --tv-base-color-common-3: #f5f5f5; // 通用背景-页面背景色/ 选块默认色/滑块背景色/分页悬浮色、下拉、列表、悬浮背景、表头背景、下拉菜单、选块选中色
  --tv-base-color-common-4: #f0f0f0; // 白色背景分割线 /禁用背景/小表格中禁用背景/支付列表中禁用背景、顶部导航下拉悬浮背景色
  --tv-base-color-common-5: #e6e6e6; // 灰色标签背景色/轮播箭头悬浮色
  --tv-base-color-common-6: #dbdbdb; // 开关组件“关”禁用背景色/ 禁用描边/ 灰色背景分割线
  --tv-base-color-common-7: #c2c2c2; // 选块悬浮色/页签禁用文字色/边框色（如下拉、输入框）/文字禁用/禁用图标
  --tv-base-color-common-8: #808080; // 弱化信息、说明文字
  --tv-base-color-common-9: #595959; // 次要信息/图标默认/主色悬浮色、链接悬浮色/主要按钮-hover/Focus背景色
  --tv-base-color-common-10: #333333;
  --tv-base-color-common-11: #191919; // 正文主色，重要信息、标题颜色、输入类文本颜色、导航栏文字图标/主要按钮-背景色
  --tv-base-color-common-12: #000000;

  /* 1.4 功能色 */
  --tv-base-color-success-1: #edf7df;
  --tv-base-color-success-2: #daf2bb;
  --tv-base-color-success-3: #b9e683; // 成功-按钮active、hover 颜色
  --tv-base-color-success-4: #9edb58;
  --tv-base-color-success-5: #7dcc29;
  --tv-base-color-success-6: #5cb300; // 成功-背景色/ 图标色/文本色 /进度条当前进度背景色
  --tv-base-color-success-7: #4b9902;
  --tv-base-color-success-8: #3c8001;
  --tv-base-color-success-9: #2e6600;
  --tv-base-color-success-10: #1f4700;
  --tv-base-color-success-11: #628c38;
  --tv-base-color-success-12: #a2c777;
  --tv-base-color-success-13: #d2e6b8;
  --tv-base-color-success-14: #e6f2d5; // 成功-背景色/边框色 （这个不在规范色阶中）

  --tv-base-color-error-1: #fff1f0; //
  --tv-base-color-error-2: #fce2e0; // 错误-边框色 /背景色 /错误校验背景色,设计稿用了这个#FCE3E1，但不在色阶中
  --tv-base-color-error-3: #faa7a3; // 错误-图标色、校验边框色/、悬浮菜单背景色
  --tv-base-color-error-4: #fa8682; //
  --tv-base-color-error-5: #f76360;
  --tv-base-color-error-6: #f23030; // 错误-文本色/交易金额色 / 紧急告警色
  --tv-base-color-error-7: #bf0a1c;
  --tv-base-color-error-8: #a3171c;
  --tv-base-color-error-9: #78080e;
  --tv-base-color-error-10: #4d0005;
  --tv-base-color-error-11: #a64242;
  --tv-base-color-error-12: #f2c5c2;
  --tv-base-color-error-13: #fce3e1; //  错误-背景色/错误校验背景色 （这个不在规范色阶中）

  --tv-base-color-warn-1: #fff4e8;
  --tv-base-color-warn-2: #ffebd1; // 告警-背景色/边框色（浅）
  --tv-base-color-warn-3: #fcd5a4;
  --tv-base-color-warn-4: #fcbc72;
  --tv-base-color-warn-5: #ff9a2e;
  --tv-base-color-warn-6: #ff8800; // 告警-图标色/深色背景 /重要告警色
  --tv-base-color-warn-7: #d96900; // 优惠折扣功能色 ti-color-discount
  --tv-base-color-warn-8: #a64d00;
  --tv-base-color-warn-9: #733400;
  --tv-base-color-warn-10: #4d2201;
  --tv-base-color-warn-11: #9e6d3f;
  --tv-base-color-warn-12: #d6a981;
  --tv-base-color-warn-13: #f2d8c2;
  --tv-base-color-warn-secondary-1: #ffb700; // 次要告警色 黄色系

  --tv-base-color-info-1: #f0f7ff;
  --tv-base-color-info-2: #deecff; // 提示-背景色 / 边框色
  --tv-base-color-info-3: #b3d6ff; // 开关组件“开”禁用背景色
  --tv-base-color-info-4: #7eb7fc;
  --tv-base-color-info-5: #4191fa;
  --tv-base-color-info-6: #1476ff; //  提示-图标色 / 文本色
  --tv-base-color-info-7: #0f5ed4;
  --tv-base-color-info-8: #0845a6;
  --tv-base-color-info-9: #022e7a;
  --tv-base-color-info-10: #001a4a;
  --tv-base-color-info-11: #3d6899;
  --tv-base-color-info-12: #7fa6d4;
  --tv-base-color-info-13: #b6d4f2;

  /** 2. 公共色 **/

  /** 2.2 提示类型组件  ----Alert组件、Modal（message）组件、Tag 标签组件、Notify 通知、错误校验等场景 **/
  --tv-color-success-text: var(--tv-base-color-success-6); // #5cb300 成功-文本色
  --tv-color-success-text-primary: var(--tv-base-color-common-11); // #191919 白色背景一级文本色
  --tv-color-success-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景时为白色文本色
  --tv-color-success-bg: var(--tv-base-color-success-6); //#5cb300 成功-背景色(深)
  --tv-color-success-bg-light: var(--tv-base-color-success-14); // #e6f2d5 成功-背景色(浅)
  --tv-color-success-bg-white: var(--tv-base-color-common-1); // #fff 白色背景色 （tag 是白色还是透明？）
  --tv-color-success-border: var(--tv-base-color-success-6); // #5cb300 成功-边框色(深)
  --tv-color-success-border-light: var(--tv-base-color-success-14); // #e6f2d5 成功-边框色（浅）
  --tv-color-success-icon: var(--tv-base-color-success-6); // #5cb300 成功-图标色

  --tv-color-error-text: var(--tv-base-color-error-6); // #f23030  #f23030  错误-文本色/交易金额色
  --tv-color-error-text-primary: var(--tv-base-color-common-11); // #191919 白色背景一级文本色
  --tv-color-error-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景时为白色文本色
  --tv-color-error-bg: var(--tv-base-color-error-6); // #f23030  #f23030  错误-背景色(深)
  --tv-color-error-bg-light: var(--tv-base-color-error-13); // #fce3e1  错误-背景色(浅)/错误校验背景色
  --tv-color-error-bg-white: var(--tv-base-color-common-1); // #fff 白色背景色 （tag 是白色还是透明？）
  --tv-color-error-border: var(--tv-base-color-error-6); // #f23030  #f23030  错误-边框色(深)
  --tv-color-error-border-light: var(--tv-base-color-error-13); // #fce3e1  错误-边框色（浅）
  --tv-color-error-icon: var(--tv-base-color-error-6); // #f23030  #f23030   错误-图标色

  --tv-color-warn-text: var(--tv-base-color-warn-6); // #ff8800  告警-文本色
  --tv-color-warn-text-primary: var(--tv-base-color-common-11); // #191919 白色背景一级文本色
  --tv-color-warn-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景时为白色文本色
  --tv-color-warn-bg: var(--tv-base-color-warn-6); // #ff8800  告警-背景色(深)
  --tv-color-warn-bg-light: var(--tv-base-color-warn-2); // #ffebd1 告警-背景色(浅)
  --tv-color-warn-bg-white: var(--tv-base-color-common-1); // #fff 白色背景色 （tag 是白色还是透明？）
  --tv-color-warn-border: var(--tv-base-color-warn-6); // #ff8800  告警-边框色(深)
  --tv-color-warn-border-light: var(--tv-base-color-warn-2); // #ffebd1 告警-边框色（浅）
  --tv-color-warn-icon: var(--tv-base-color-warn-6); // #ff8800   告警-图标色

  --tv-color-info-text: var(--tv-base-color-info-6); // #1476ff 信息-文本色
  --tv-color-info-text-primary: var(--tv-base-color-common-11); // #191919 白色背景一级文本色
  --tv-color-info-text-white: var(--tv-base-color-common-1); // #fff 深彩色背景时为白色文本色
  --tv-color-info-bg: var(--tv-base-color-info-6); // #1476ff 信息-背景色(深)
  --tv-color-info-bg-light: var(--tv-base-color-info-2); // #deecff 信息-背景色(浅)
  --tv-color-info-bg-white: var(--tv-base-color-common-1); // #fff 白色背景色 （tag 是白色还是透明？）
  --tv-color-info-border: var(--tv-base-color-info-6); // #1476ff 信息-边框色(深)
  --tv-color-info-border-light: var(--tv-base-color-info-2); // #deecff 信息-边框色（浅）
  --tv-color-info-icon: var(--tv-base-color-info-6); // #1476ff  信息-图标色

  /** 2.3 交互类型颜色---- Button组件、Badge 标记、Link 文字链接 **/

  /* 主要-primary */
  --tv-color-act-primary-text: var(--tv-base-color-brand); // #191919 主要文本色-1（品牌色）： 朴素/幽灵/纯文本/链接
  --tv-color-act-primary-text-hover: var(--tv-base-color-brand); // #191919 主要hover文本色-1
  --tv-color-act-primary-text-active: var(--tv-base-color-brand); // #191919 主要active文本色-1

  --tv-color-act-primary-text-white: var(--tv-base-color-common-1); // #fff 主要文本色-2（白色）
  --tv-color-act-primary-text-white-hover: var(--tv-base-color-common-1); // #fff 主要hover文本色-2（白色）
  --tv-color-act-primary-text-white-active: var(--tv-base-color-common-1); // #fff 主要active文本色-2（白色）

  --tv-color-act-primary-bg: var(--tv-base-color-brand); // #191919 主要背景色-1（品牌色）: 默认
  --tv-color-act-primary-bg-hover: var(--tv-base-color-common-9); // #595959  主要hover背景色-1
  --tv-color-act-primary-bg-active: var(--tv-base-color-common-9); // #595959  主要active背景色-1

  --tv-color-act-primary-bg-white: var(--tv-base-color-common-1); // #fff 主要背景色-2（白）：朴素
  --tv-color-act-primary-bg-white-hover: var(--tv-base-color-common-1); // #fff 主要hover背景色-2（白色）： 朴素
  --tv-color-act-primary-bg-white-active: var(--tv-base-color-common-1); // 主要active背景色-2（白色）： 朴素

  --tv-color-act-primary-border: var(--tv-base-color-brand); // #191919 主要边框色-1 默认
  --tv-color-act-primary-border-hover: var(--tv-base-color-common-9); // #595959  主要hover边框色-1
  --tv-color-act-primary-border-active: var(--tv-base-color-common-9); // #595959  主要active边框色-1

  --tv-color-act-primary-border-light: var(--tv-base-color-common-9); // #595959  幽灵/朴素 边框色-2
  --tv-color-act-primary-border-light-hover: var(--tv-base-color-common-1); // #fff 朴素hover边框色-2.1
  --tv-color-act-primary-border-light-active: var(--tv-base-color-common-1); // #fff 朴素active边框色-2.1
  --tv-color-act-primary-border-light-hover-1: var(--tv-base-color-common-7); // #c2c2c2  幽灵hover边框色-2.2
  --tv-color-act-primary-border-light-active-1: var(--tv-base-color-common-7); // #c2c2c2  幽灵active边框色-2.2

  --tv-color-act-primary-plain-text-hover: var(--tv-base-color-brand); // #191919

  /* 成功-success */
  --tv-color-act-success-text: var(--tv-base-color-success-6); // #5cb300 成功文本色-1（成功主色）： 朴素/幽灵/纯文本/链接
  --tv-color-act-success-text-hover: var(--tv-base-color-success-6); // #5cb300 成功hover文本色-1
  --tv-color-act-success-text-active: var(--tv-base-color-success-6); // #5cb300 成功active文本色-1

  --tv-color-act-success-text-white: var(--tv-base-color-common-1); // #fff 成功文本色-2（白色）：默认
  --tv-color-act-success-text-white-hover: var(--tv-base-color-common-1); // #fff 成功hover文本色-2（白色）
  --tv-color-act-success-text-white-active: var(--tv-base-color-common-1); // #fff 成功active文本色-2（白色）

  --tv-color-act-success-bg: var(--tv-base-color-success-6); // #5cb300 成功背景色-1（品牌色）：默认
  --tv-color-act-success-bg-hover: var(--tv-base-color-success-5); // #7dcc29  成功hover背景色-1
  --tv-color-act-success-bg-active: var(--tv-base-color-success-5); // #7dcc29  成功active背景色-1

  --tv-color-act-success-bg-light: var(--tv-base-color-success-1); //  #edf7df 成功背景色-1（品牌色）：朴素
  --tv-color-act-success-bg-light-hover: var(--tv-base-color-success-1); //  #edf7df 成功hover背景色-1
  --tv-color-act-success-bg-light-active: var(--tv-base-color-success-1); //  #edf7df 成功active背景色-1

  --tv-color-act-success-border: var(--tv-base-color-success-6); // #5cb300 成功边框色-1：默认 / 幽灵
  --tv-color-act-success-border-hover: var(--tv-base-color-success-5); // #7dcc29  成功hover边框色-1.1
  --tv-color-act-success-border-active: var(--tv-base-color-success-5); // #7dcc29  成功active边框色-1.1
  --tv-color-act-success-border-hover-1: var(--tv-base-color-success-2); // #daf2bb  成功hover边框色-1.2
  --tv-color-act-success-border-active-1: var(--tv-base-color-success-2); // #daf2bb  成功active边框色-1.2

  --tv-color-act-success-border-light: var(--tv-base-color-success-2); // #daf2bb  成功边框色-2:朴素
  --tv-color-act-success-border-light-hover: var(--tv-base-color-success-1); //  #edf7df 成功hover边框色
  --tv-color-act-success-border-light-active: var(--tv-base-color-success-1); //  #edf7df 成功active边框色

  --tv-color-act-success-plain-text-hover: var(--tv-base-color-success-6); // #5cb300

  /* 告警-warning */
  --tv-color-act-warning-text: var(--tv-base-color-warn-6); // #ff8800  告警文本色-1（告警主色）：朴素/幽灵/纯文本/链接
  --tv-color-act-warning-text-hover: var(--tv-base-color-warn-6); // #ff8800  告警hover文本色-1
  --tv-color-act-warning-text-active: var(--tv-base-color-warn-6); // #ff8800  告警active文本色-1

  --tv-color-act-warning-text-white: var(--tv-base-color-common-1); // #fff 告警文本色-2（白色）：默认
  --tv-color-act-warning-text-white-hover: var(--tv-base-color-common-1); // #fff 告警hover文本色-2（白色）
  --tv-color-act-warning-text-white-active: var(--tv-base-color-common-1); // #fff 告警active文本色-2（白色）

  --tv-color-act-warning-bg: var(--tv-base-color-warn-6); // #ff8800  告警背景色-1（告警主色）：默认
  --tv-color-act-warning-bg-hover: var(--tv-base-color-warn-5); //#ff9a2e 告警hover背景色-1
  --tv-color-act-warning-bg-active: var(--tv-base-color-warn-5); //#ff9a2e 告警active背景色-1

  --tv-color-act-warning-bg-light: var(--tv-base-color-warn-1); // #fff4e8 告警背景色-1（告警主色衍生色）：朴素
  --tv-color-act-warning-bg-light-hover: var(--tv-base-color-warn-1); // #fff4e8 告警hover背景色-1
  --tv-color-act-warning-bg-light-active: var(--tv-base-color-warn-1); // #fff4e8 告警active背景色-1

  --tv-color-act-warning-border: var(--tv-base-color-warn-6); // #ff8800  告警边框色-1：默认 / 幽灵
  --tv-color-act-warning-border-hover: var(--tv-base-color-warn-5); //#ff9a2e 告警hover边框色-1.1
  --tv-color-act-warning-border-active: var(--tv-base-color-warn-5); //#ff9a2e 告警active边框色-1.1
  --tv-color-act-warning-border-hover-1: var(--tv-base-color-warn-2); //#ffebd1 告警幽灵hover边框色-1.2
  --tv-color-act-warning-border-active-1: var(--tv-base-color-warn-2); //#ffebd1 告警幽灵active边框色-1.2

  --tv-color-act-warning-border-light: var(--tv-base-color-warn-2); //#ffebd1 告警边框色-2：朴素
  --tv-color-act-warning-border-light-hover: var(--tv-base-color-warn-1); // #fff4e8 告警hover边框色
  --tv-color-act-warning-border-light-active: var(--tv-base-color-warn-1); // #fff4e8 告警active边框色

  --tv-color-act-warning-plain-text-hover: var(--tv-base-color-warn-6); // #ff8800 

  /* 危险-danger */
  --tv-color-act-danger-text: var(--tv-base-color-error-6); // #f23030  危险文本色-1（成功主色）：朴素/幽灵/纯文本/链接
  --tv-color-act-danger-text-hover: var(--tv-base-color-error-6); // #f23030  #f23030  危险hover文本色-1
  --tv-color-act-danger-text-active: var(--tv-base-color-error-6); // #f23030  #f23030  危险active文本色-1

  --tv-color-act-danger-text-white: var(--tv-base-color-common-1); // #fff 危险文本色-2（白色）：默认
  --tv-color-act-danger-text-white-hover: var(--tv-base-color-common-1); // #fff 危险hover文本色-2（白色）
  --tv-color-act-danger-text-white-active: var(--tv-base-color-common-1); // #fff 危险active文本色-2（白色）

  --tv-color-act-danger-bg: var(--tv-base-color-error-6); // #f23030  #f23030  危险背景色-1（成功主色）：默认
  --tv-color-act-danger-bg-hover: var(--tv-base-color-error-5); // #f76360  危险hover背景色-1
  --tv-color-act-danger-bg-active: var(--tv-base-color-error-5); // #f76360  危险active背景色-1

  --tv-color-act-danger-bg-light: var(--tv-base-color-error-1); // #fff1f0  危险背景色-2（成功主色衍生色）：朴素
  --tv-color-act-danger-bg-light-hover: var(--tv-base-color-error-1); // #fff1f0  危险hover背景色-1
  --tv-color-act-danger-bg-light-active: var(--tv-base-color-error-1); // #fff1f0  危险active背景色-1

  --tv-color-act-danger-border: var(--tv-base-color-error-6); // #f23030  #f23030  危险边框色-1：默认 / 幽灵
  --tv-color-act-danger-border-hover: var(--tv-base-color-error-5); // #f76360  危险hover边框色-1.1
  --tv-color-act-danger-border-active: var(--tv-base-color-error-5); // #f76360  危险active边框色-1.1
  --tv-color-act-danger-border-hover-1: var(--tv-base-color-error-2); // #fce2e0  危险hover边框色-1.2
  --tv-color-act-danger-border-active-1: var(--tv-base-color-error-2); // #fce2e0  危险active边框色-1.2

  --tv-color-act-danger-border-light: var(--tv-base-color-error-2); // #fce2e0  危险边框色-2：朴素
  --tv-color-act-danger-border-light-hover: var(--tv-base-color-error-1); // #fff1f0  危险hover边框色
  --tv-color-act-danger-border-light-active: var(--tv-base-color-error-1); // #fff1f0  危险active边框色

  --tv-color-act-danger-plain-text-hover: var(--tv-base-color-error-6); // #f23030 

  /* 信息-info */
  --tv-color-act-info-text: var(--tv-base-color-info-6); // #1476ff 信息文本色-1（信息主色）：朴素/幽灵/纯文本/链接
  --tv-color-act-info-text-hover: var(--tv-base-color-info-6); // #1476ff 信息hover文本色-1
  --tv-color-act-info-text-active: var(--tv-base-color-info-6); // #1476ff 信息active文本色-1

  --tv-color-act-info-text-white: var(--tv-base-color-common-1); // #fff 信息文本色-2（白色）：默认
  --tv-color-act-info-text-white-hover: var(--tv-base-color-common-1); // #fff 信息hover文本色-2（白色）
  --tv-color-act-info-text-white-active: var(--tv-base-color-common-1); // #fff 信息active文本色-2（白色）

  --tv-color-act-info-bg: var(--tv-base-color-info-6); // #1476ff 信息背景色-1（信息主色）：默认
  --tv-color-act-info-bg-hover: var(--tv-base-color-info-5); // #4191fa  信息hover背景色-1
  --tv-color-act-info-bg-active: var(--tv-base-color-info-5); // #4191fa  信息active背景色-1

  --tv-color-act-info-bg-light: var(--tv-base-color-info-1); // #f0f7ff  信息背景色-1（信息主色衍生色）：朴素
  --tv-color-act-info-bg-light-hover: var(--tv-base-color-info-1); // #f0f7ff  信息hover背景色-1
  --tv-color-act-info-bg-light-active: var(--tv-base-color-info-1); // #f0f7ff  信息active背景色-1

  --tv-color-act-info-border: var(--tv-base-color-info-6); // #1476ff 信息边框色-1：默认 / 幽灵
  --tv-color-act-info-border-hover: var(--tv-base-color-info-5); // #4191fa  信息hover边框色-1.1
  --tv-color-act-info-border-active: var(--tv-base-color-info-5); // #4191fa  信息active边框色-1.1
  --tv-color-act-info-border-hover-1: var(--tv-base-color-info-2); // #deecff 信息hover边框色-1.2：幽灵
  --tv-color-act-info-border-active-1: var(--tv-base-color-info-2); // #deecff 信息active边框色-1.2

  --tv-color-act-info-border-light: var(--tv-base-color-info-2); // #deecff 信息边框色-2：朴素
  --tv-color-act-info-border-light-hover: var(--tv-base-color-info-1); // #f0f7ff  信息hover边框色
  --tv-color-act-info-border-light-active: var(--tv-base-color-info-1); // #f0f7ff  信息active边框色

  --tv-color-act-info-plain-text-hover:  var(--tv-base-color-info-6); // #1476ff 

  /** 2.4 文本色 **/
  --tv-color-text: var(--tv-base-color-common-11); // #191919 一级文本色-正文主色，重要信息、标题颜色、输入类文本颜色、导航栏文字图标
  --tv-color-text-secondary: var(--tv-base-color-common-9); // #595959  二级文本色-次要信息
  --tv-color-text-weaken: var(--tv-base-color-common-8); // #808080 三级文本色-弱化信息、说明文字
  --tv-color-text-placeholder: var(--tv-base-color-common-8); // #808080 占位文本色
  --tv-color-text-disabled: var(--tv-base-color-common-7); // #c2c2c2  禁用文本色
  --tv-color-text-active: var(--tv-base-color-brand-6); // #1476ff 选中文本色 / 文本高亮色（搜索关键字高亮）
  --tv-color-text-important: var(--tv-base-color-common-11); // #191919 重要文本色-文本_金额
  --tv-color-text-white: var(--tv-base-color-common-1); // #fff 深色背景上-文本色
  --tv-color-text-link: var(--tv-base-color-brand-6); // #1476ff 链接色（链接按钮）
  --tv-color-text-link-hover: var(--tv-base-color-brand-6); // #1476ff 链接悬浮色

  --tv-color-plain-text-hover: var(--tv-base-color-common-11); // #191919

  /** 2.5 图标色 **/
  --tv-color-icon: var(--tv-base-color-common-8); // #808080 默认图标色
  --tv-color-icon-hover: var(--tv-base-color-common-11); // #191919 图标悬浮色
  --tv-color-icon-active: var(--tv-base-color-common-11); // #191919 图标激活色
  --tv-color-icon-disabled: var(--tv-base-color-common-7); // #c2c2c2  图标禁用色
  --tv-color-icon-checked-disabled:var(--tv-base-color-common-6); // #dbdbdb 图标禁用色-1 checkbox选中且禁用
  --tv-color-icon-control: var(--tv-base-color-brand); // #191919 图标按钮 / 图标+文本按钮图标色,主要在按钮场景（稳定态图标色， hover时不用变化）
  --tv-color-icon-control-active: var(--tv-base-color-brand-6); // #1476ff 控件图标激活色，主要在checkbox、radio图标激活场景
  --tv-color-icon-control-disabled: var(--tv-base-color-common-6); // #dbdbdb 控件图标禁用色，主要在checkbox、radio图标激活场景
  --tv-color-icon-white: var(--tv-base-color-common-1); // #fff 深色背景白色图标
  --tv-color-icon-link: var(--tv-base-color-brand-6); // #1476ff 链接图标色
  --tv-color-icon-warn-secondary: var(--tv-base-color-warn-secondary-1); // #ffb700 次要警告图标色 / 评分组件rate-图标色/状态图标-异常


  /** 2.6 背景色 **/

  /* 2.6.1 常态 */
  --tv-color-bg: var(--tv-base-color-common-3); // #f5f5f5  通用背景色 /选块的默认背景颜色、滑块手柄的背景颜色/表格表头/穿梭框头部背景颜色/下拉搜索的背景、折叠面板背景色
  --tv-color-bg-primary: var(--tv-base-color-brand); // #191919 主要背景色（品牌色）：slider/step/流程图
  --tv-color-bg-secondary: var(--tv-base-color-common-1); // #fff 次要背景色（白色）：// 输入框背景/默认按钮背景/折叠面板头部背景色/下拉面板背景色
  --tv-color-bg-control: var(--tv-base-color-common-7); // #c2c2c2 单选/复选/开关/滑块默认背景色
  --tv-color-bg-control-unactive: var(--tv-base-color-common-7); // #c2c2c2  开关组件-关闭状态-背景色
  --tv-color-bg-gray-1: var(--tv-base-color-common-2); // #fafafa 灰色背景-1：灰色卡片背景色/表格下展背景色
  --tv-color-bg-gray-2: var(--tv-base-color-common-5); // #e6e6e6 灰色背景-2灰色标签背景色
  --tv-color-bg-header: var(--tv-base-color-common-4); // #f0f0f0 表头背景色(如果只有表格使用，就转成组件级变量）
  --tv-color-bg-mask: rgba(0, 0, 0, 30%); // 遮罩层带有透明度的背景色
  --tv-color-bg-dark:var(--tv-base-color-brand);// #191919; 深色背景色 顶部导航/ 深色tab/深色提示背景色(目前使用的这个色，找设计师确认）
  --tv-color-bg-active-dark:var(--tv-base-color-common-3);// #f5f5f5 深色背景悬浮色

  /* 2.6.2 禁用 */
  --tv-color-bg-disabled: var(--tv-base-color-common-4); // #f0f0f0 禁用背景色
  --tv-color-bg-disabled-control-checked: var(--tv-base-color-common-6); // #dbdbdb 深色背景禁用色，控件选中状态下的禁用背景色
  --tv-color-bg-disabled-control-unactive: var(--tv-base-color-common-6); // #dbdbdb 开关组件“关”禁用背景色
  --tv-color-bg-disabled-control-active: var(--tv-base-color-brand-3); // #b3d6ff  深色背景禁用色，开关组件“开”禁用背景色

  /* 2.6.3 悬浮 */
  --tv-color-bg-hover: var(--tv-base-color-common-3); // #f5f5f5 浅背景-悬浮色
  --tv-color-bg-hover-primary: var(--tv-base-color-common-9); // #595959 一级tab页签背景-悬浮色 /分页hover背景颜色 /灰色悬浮背景色：表格悬浮、下拉悬浮、左侧导航悬浮
  --tv-color-bg-hover-secondary: var(--tv-base-color-common-1); // #fff 次要背景色悬浮色 / 穿梭框头部/折叠面板背景色
  --tv-color-bg-hover-1: var(--tv-base-color-brand-2); // #deecff  浅蓝色场景：悬浮背景色-日期悬浮 /选块悬浮态背景色
  --tv-color-bg-hover-2: var(--tv-base-color-common-5); // #e6e6e6 轮播箭头背景悬浮色
  --tv-color-bg-hover-dark:var(--tv-base-color-common-11); // #191919 深色背景悬浮色 （这个颜色待和设计师确认，原本tab用的#191919）

  /* 2.6.4 active/选中 */
  --tv-color-bg-active: var(--tv-base-color-common-3); // #f5f5f5  分页选中背景色/左侧导航选中背景色
  --tv-color-bg-active-control: var(--tv-base-color-brand-6); // #1476ff 主色蓝，单选/复选选中背景色、开关开的背景色、选块点击背景色、滑块选中背景色、价格曲线、区域选择选中的背景色
  --tv-color-bg-active-primary: var(--tv-base-color-brand); // #191919 品牌色，锚点-当前位置的圆点背景色/leftmenuthin左侧导航收起图标选中的背景色、NPS评分选中背景色
  --tv-color-bg-active-secondary: var(--tv-base-color-common-1); // #fff 次要背景色active色/下拉选中的背景色/一级tab页签背景-选中色/树控件选中背景颜色
  --tv-color-bg-active-emphasize: var(--tv-base-color-brand-2); // #deecff 时间选择选中背景色
  --tv-color-bg-active-emphasize-light: var(--tv-base-color-brand-1); // #f0f7ff 表格选中背景色

  /** 2.7 边框色/分割线颜色 **/

  /* 2.7.1 边框 */
  --tv-color-border: var(--tv-base-color-common-7); // #c2c2c2  线条-正常色
  --tv-color-border-hover: var(--tv-base-color-brand); // #191919 线条悬浮色
  --tv-color-border-active: var(--tv-base-color-brand); // #191919 线条active色
  --tv-color-border-active-control: var(--tv-base-color-brand-6); //  #1476ff 主色蓝，单选/复选选中的边框色
  --tv-color-border-disabled: var(--tv-base-color-common-6); // #dbdbdb 线条禁用色
  --tv-color-border-secondary: var(--tv-base-color-common-9); // #595959 线条-次要色：次要按钮边框默认色
  --tv-color-border-ghost: var(--tv-base-color-common-8); // #808080  
  --tv-color-border-ghost-active: var(--tv-base-color-common-6); // #dbdbdb  

  /* 2.7.2 分割线 */
  --tv-color-border-divider: var(--tv-base-color-common-4); // #f0f0f0 分割线1（较长分割线场景）
  --tv-color-border-divider-short: var(--tv-base-color-common-6); // #dbdbdb 分割线2（较短分割线场景）

  /**  3. 字体变量 **/

  /* 3.1 字体家族 -- 【组件内不要指定】 */
  --tv-font-family: 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei'; // 默认中文
  --tv-font-family-1: 'Arial', 'San Francisco', 'Helvetica'; // 数字 / 英文

  /* 3.2 字号 */
  --tv-font-size-sm: 12px; // 辅助文本
  --tv-font-size-md: 14px; // 正文，默认字体尺寸
  --tv-font-size-lg: 16px;
  --tv-font-size-xl: 18px;
  --tv-font-size-xxl: 20px;
  --tv-font-size-default: var(--tv-font-size-md);

  --tv-font-size-heading-xs: 16px; // 卡片标题
  --tv-font-size-heading-sm: 18px; // 页面标题
  --tv-font-size-heading-md: 20px; // 弹窗标题、数字
  --tv-font-size-heading-lg: 24px; // 数字、面额
  --tv-font-size-heading-xl: 32px; // 数字、面额

  /** 3.3 行高 */

  --tv-line-height-number: 1.5;

  /* 3.4 字重 */
  --tv-font-weight-thin: 200;
  --tv-font-weight-regular: 400; // 默认值：nomal
  --tv-font-weight-bold: 600;

  /** 4. 圆角变量 **/
  --tv-border-radius-xs: 2px;
  --tv-border-radius-sm: 4px;
  --tv-border-radius-md: 6px; // 默认
  --tv-border-radius-lg: 8px;
  --tv-border-radius-round: 999px; // 50% 会造成椭圆，避免使用。 
  --tv-border-radius-brand: var(--tv-border-radius-round); // 品牌相关。用于圆角，按钮、分页等场景 

  /** 5. 边框  **/
  --tv-border-width: 1px;

  /** 6. 间距变量 space  ----margin、padding、top、 left 、 right、bottom **/
  --tv-space-base: 4px;
  --tv-space-xs: 2px;
  --tv-space-sm: var(--tv-space-base);
  --tv-space-md: calc(var(--tv-space-base) * 2);
  --tv-space-lg: calc(var(--tv-space-base) * 3);
  --tv-space-xl: calc(var(--tv-space-base) * 4);
  --tv-space-xxl: calc(var(--tv-space-base) * 6); // 内容块之间的间距
  --tv-space-xxxl: calc(var(--tv-space-base) * 8); // 容器与容器内容的间距
  --tv-space-table-x: 4px; // 表格单元格水平间距基准
  --tv-space-table-y: 4px; // 表格单元格垂直间距基准

  /** 7. 尺寸变量 size **/

  /** 尺寸系数 calc */
  --tv-size-base: 4px;

  /** 7.1 表单类组件的 height */
  --tv-size-height-xs: 24px; // mini 尺寸
  --tv-size-height-sm: 28px; // small 尺寸
  --tv-size-height-md: 32px; // medium 尺寸 - 默认
  --tv-size-height-lg: 40px; // large 尺寸
  --tv-size-height-xl: 48px; //  xLarge 尺寸

  /** 7.2 图标大小 width, height **/
  --tv-icon-size: 16px;

  /** 8. 阴影变量 box-shadow **/
  --tv-shadow-0: 0 4px 16px 0 rgba(0, 0, 0, 0.08); //  页面布局容器组件（layout-section）阴影
  --tv-shadow-1: 0 0 0 0 rgba(0, 0, 0, 0); //  页面布局容器组件（layout-section）阴影

  --tv-shadow-1-up: 0 -1px 4px 0 rgba(0, 0, 0, 0.08); // 购买浮层
  --tv-shadow-1-down: 0 1px 4px 0 rgba(0, 0, 0, 0.08); // 页面卡片、滑块、顶部导航
  --tv-shadow-1-left: -1px 0 4px 0 rgba(0, 0, 0, 0.08);
  --tv-shadow-1-right: 1px 0 4px 0 rgba(0, 0, 0, 0.08); // 手风琴（leftmenu）

  --tv-shadow-2-up: 0 -2px 12px 0 rgba(0, 0, 0, 0.16);
  --tv-shadow-2-down: 0 2px 12px 0 rgba(0, 0, 0, 0.16); // tips提示、扩展视图
  --tv-shadow-2-left: -2px 0 12px 0 rgba(0, 0, 0, 0.16);
  --tv-shadow-2-right: 2px 0 12px 0 rgba(0, 0, 0, 0.16);

  --tv-shadow-3-up: 0 -4px 16px 0 rgba(0, 0, 0, 0.08);
  --tv-shadow-3-down: 0 4px 16px 0 rgba(0, 0, 0, 0.08); // 卡片hover/选中、下拉面板
  --tv-shadow-3-left: -4px 0 16px 0 rgba(0, 0, 0, 0.08);
  --tv-shadow-3-right: 4px 0 16px 0 rgba(0, 0, 0, 0.08);

  --tv-shadow-4-up: 0 -8px 24px 0 rgba(0, 0, 0, 0.16);
  --tv-shadow-4-down: 0 8px 24px 0 rgba(0, 0, 0, 0.16); // 弹窗、气泡确认框
  --tv-shadow-4-left: -8px 0 24px 0 rgba(0, 0, 0, 0.16); // 右侧抽屉
  --tv-shadow-4-right: 8px 0 24px 0 rgba(0, 0, 0, 0.16);

  /** 9. 滚动条变量 **/
  --tv-size-scrollbar-width: 8px; // 滚动条宽度
  --tv-size-scrollbar-height: 8px; // 滚动条高度
  --tv-border-radius-scrollbar-thumb: 4px; // 滑块圆角
  --tv-color-bg-scrollbar-thumb: var(--tv-base-color-common-6); // #dbdbdb 滑块背景色
  --tv-color-bg-scrollbar-thumb-hover: var(--tv-base-color-common-6); // #dbdbdb 滑块hover背景色
  --tv-color-bg-scrollbar-thumb-active: var(--tv-base-color-common-6); // #dbdbdb 滑块active背景色
  --tv-color-bg-scrollbar-track: var(--tv-base-color-common-1); // #fff 轨道背景色
}