@arco-themes/react-aiux2026 0.0.14 → 1.0.1

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 (7) hide show
  1. package/README.md +62 -0
  2. package/css/arco.css +2 -2
  3. package/package.json +2 -2
  4. package/theme.css +38 -38
  5. package/theme.less +102 -39
  6. package/tokens.less +384 -384
  7. package/variables.less +390 -331
package/tokens.less CHANGED
@@ -363,7 +363,7 @@
363
363
  @dark-gray-8: #c5c5c5;
364
364
  @dark-gray-9: #dfdfdf;
365
365
  @dark-gray-10: #f6f6f6;
366
- @dark-primary-1: rgb(var(--arcoblue-1));
366
+ @dark-primary-1: #191a23;
367
367
  @dark-primary-2: rgb(var(--arcoblue-2));
368
368
  @dark-primary-3: rgb(var(--arcoblue-3));
369
369
  @dark-primary-4: rgb(var(--arcoblue-4));
@@ -373,13 +373,13 @@
373
373
  @dark-primary-8: rgb(var(--arcoblue-8));
374
374
  @dark-primary-9: rgb(var(--arcoblue-9));
375
375
  @dark-primary-10: rgb(var(--arcoblue-10));
376
- @dark-success-1: rgb(var(--green-1));
377
- @dark-success-2: rgb(var(--green-2));
378
- @dark-success-3: rgb(var(--green-3));
379
- @dark-success-4: rgb(var(--green-4));
380
- @dark-success-5: rgb(var(--green-5));
381
- @dark-success-6: rgb(var(--green-6));
382
- @dark-success-7: rgb(var(--green-7));
376
+ @dark-success-1: #004d44;
377
+ @dark-success-2: #01695a;
378
+ @dark-success-3: #06866e;
379
+ @dark-success-4: #01a281;
380
+ @dark-success-5: #0cbf92;
381
+ @dark-success-6: #2fcc9f;
382
+ @dark-success-7: #57d9af;
383
383
  @dark-success-8: rgb(var(--green-8));
384
384
  @dark-success-9: rgb(var(--green-9));
385
385
  @dark-success-10: rgb(var(--green-10));
@@ -399,11 +399,11 @@
399
399
  @dark-warning-4: rgb(var(--orange-4));
400
400
  @dark-warning-5: rgb(var(--orange-5));
401
401
  @dark-warning-6: rgb(var(--orange-6));
402
- @dark-warning-7: rgb(var(--orange-7));
402
+ @dark-warning-7: #ffb357;
403
403
  @dark-warning-8: rgb(var(--orange-8));
404
404
  @dark-warning-9: rgb(var(--orange-9));
405
405
  @dark-warning-10: rgb(var(--orange-10));
406
- @dark-link-1: rgb(var(--arcoblue-1));
406
+ @dark-link-1: #191a23;
407
407
  @dark-link-2: rgb(var(--arcoblue-2));
408
408
  @dark-link-3: rgb(var(--arcoblue-3));
409
409
  @dark-link-4: rgb(var(--arcoblue-4));
@@ -413,24 +413,24 @@
413
413
  @dark-link-8: rgb(var(--arcoblue-8));
414
414
  @dark-link-9: rgb(var(--arcoblue-9));
415
415
  @dark-link-10: rgb(var(--arcoblue-10));
416
- @dark-color-white: rgba(255, 255, 255, 0.9);
416
+ @dark-color-white: #ffffff;
417
417
  @dark-color-black: #000000;
418
418
  @dark-mask-color-bg: rgba(23, 23, 26, 0.6);
419
419
  @dark-color-tooltip-bg: #373739;
420
420
  @dark-color-spin-layer-bg: rgba(51, 51, 51, 0.6);
421
421
  @dark-color-menu-dark-hover: var(--color-fill-2);
422
422
  @dark-color-border: #333335;
423
- @dark-color-bg-1: #17171A;
424
- @dark-color-bg-2: #232324;
425
- @dark-color-bg-3: #2a2a2b;
426
- @dark-color-bg-4: #313132;
427
- @dark-color-bg-5: #373739;
428
- @dark-color-bg-white: #f6f6f6;
429
- @dark-color-text-1: rgba(255, 255, 255, 0.9);
430
- @dark-color-text-2: rgba(255, 255, 255, 0.7);
431
- @dark-color-text-3: rgba(255, 255, 255, 0.5);
423
+ @dark-color-bg-1: #191a23;
424
+ @dark-color-bg-2: #1a1b26;
425
+ @dark-color-bg-3: #1d1e2b;
426
+ @dark-color-bg-4: #191a22;
427
+ @dark-color-bg-5: #21232e;
428
+ @dark-color-bg-white: rgba(255, 255, 255, 0.01);
429
+ @dark-color-text-1: #ffffff;
430
+ @dark-color-text-2: rgba(255, 255, 255, 0.8);
431
+ @dark-color-text-3: rgba(255, 255, 255, 0.7);
432
432
  @dark-color-text-4: rgba(255, 255, 255, 0.3);
433
- @dark-color-fill-1: rgba(255, 255, 255, 0.04);
433
+ @dark-color-fill-1: rgba(255, 255, 255, 0.02);
434
434
  @dark-color-fill-2: rgba(255, 255, 255, 0.08);
435
435
  @dark-color-fill-3: rgba(255, 255, 255, 0.12);
436
436
  @dark-color-fill-4: rgba(255, 255, 255, 0.16);
@@ -458,30 +458,30 @@
458
458
  @dark-color-link-light-2: rgba(var(--link-6), 0.35);
459
459
  @dark-color-link-light-3: rgba(var(--link-6), 0.5);
460
460
  @dark-color-link-light-4: rgba(var(--link-6), 0.65);
461
- @dark-color-border-1: #2e2e30;
462
- @dark-color-border-2: #484849;
463
- @dark-color-border-4: #929293;
464
- @dark-color-border-3: #5f5f60;
465
- @dark-badge-1: rgb(var(--arcoblue-1));
466
- @dark-badge-7: rgb(var(--arcoblue-7));
467
- @dark-badge-5: rgb(var(--arcoblue-5));
468
- @dark-badge-2: rgb(var(--arcoblue-2));
469
- @dark-badge-4: rgb(var(--arcoblue-4));
461
+ @dark-color-border-1: rgba(255, 255, 255, 0.04);
462
+ @dark-color-border-2: rgba(255, 255, 255, 0.08);
463
+ @dark-color-border-4: rgba(255, 255, 255, 0.2);
464
+ @dark-color-border-3: rgba(255, 255, 255, 0.12);
465
+ @dark-badge-1: #3e138f;
466
+ @dark-badge-7: #f7c034;
467
+ @dark-badge-5: #f77e45;
468
+ @dark-badge-2: #d92ed9;
469
+ @dark-badge-4: #0cbf92;
470
470
  @dark-badge-8: rgb(var(--arcoblue-8));
471
- @dark-badge-6: rgb(var(--arcoblue-6));
472
- @dark-badge-3: rgb(var(--arcoblue-3));
471
+ @dark-badge-6: #8e51da;
472
+ @dark-badge-3: #1abcf2;
473
473
  @dark-badge-9: rgb(var(--arcoblue-9));
474
474
  @dark-badge-10: rgb(var(--arcoblue-10));
475
- @dark-tag-1: rgb(var(--arcoblue-1));
476
- @dark-tag-2: rgb(var(--arcoblue-2));
475
+ @dark-tag-1: #f9edff;
476
+ @dark-tag-2: #ffedf3;
477
477
  @dark-tag-8: rgb(var(--arcoblue-8));
478
- @dark-tag-4: rgb(var(--arcoblue-4));
479
- @dark-tag-3: rgb(var(--arcoblue-3));
478
+ @dark-tag-4: #f1ffed;
479
+ @dark-tag-3: #ecfdfe;
480
480
  @dark-tag-9: rgb(var(--arcoblue-9));
481
- @dark-tag-5: rgb(var(--arcoblue-5));
481
+ @dark-tag-5: #fff5ed;
482
482
  @dark-tag-10: rgb(var(--arcoblue-10));
483
- @dark-tag-7: rgb(var(--arcoblue-7));
484
- @dark-tag-6: rgb(var(--arcoblue-6));
483
+ @dark-tag-7: #fffded;
484
+ @dark-tag-6: #f5edff;
485
485
 
486
486
 
487
487
  /*********** primary ***********/
@@ -872,7 +872,7 @@
872
872
  @color-preview-size-small: 22px;
873
873
  @color-preview-size-default: 24px;
874
874
  @color-preview-size-large: 26px;
875
- @color-input-bg-color: #f5f7fc;
875
+ @color-input-bg-color: var(--color-fill-2);
876
876
  @color-input-bg-color-hover: var(--color-fill-3);
877
877
  @color-value-margin-left: 6px;
878
878
  @color-value-font-color: #292f42;
@@ -883,7 +883,7 @@
883
883
  @color-value-size-large-font-size: 14px;
884
884
  @color-input-border-radius: 4px;
885
885
  @color-preview-border-size: 1px;
886
- @color-preview-border-color: #c3c7d4;
886
+ @color-preview-border-color: var(--color-border-3);
887
887
  @color-value-font-size: 400;
888
888
  @color-panel-width: 260px;
889
889
  @color-panel-padding: 12px;
@@ -1078,44 +1078,44 @@
1078
1078
 
1079
1079
  @popup-box-shadow-base: 0 2px 5px rgba(0, 0, 0, 0.1);
1080
1080
  @popup-color-content-text: var(--color-text-2);
1081
- @popup-color-content-bg: var(--color-bg-popup);
1081
+ @popup-color-content-bg: var(--color-bg-5);
1082
1082
  @popup-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
1083
1083
  @popup-padding-horizontal: 16px;
1084
1084
  @popup-padding-vertical: 12px;
1085
1085
  @popup-color-title-text: var(--color-text-1);
1086
1086
  @popup-font-title-size: 16px;
1087
1087
  @popup-margin-content-top: 4px;
1088
- @popup-color-border: transparent;
1088
+ @popup-color-border: var(--color-border-2);
1089
1089
  @popup-font-size: 14px;
1090
1090
  @popup-border-radius: var(--border-radius-medium);
1091
1091
 
1092
1092
 
1093
1093
  /*********** input ***********/
1094
1094
 
1095
- @input-color-bg: #ffffff;
1096
- @input-color-bg_hover: #ffffff;
1097
- @input-color-bg_focus: #ffffff;
1095
+ @input-color-bg: var(--color-bg-2);
1096
+ @input-color-bg_hover: var(--color-bg-2);
1097
+ @input-color-bg_focus: var(--color-bg-2);
1098
1098
  @input-color-bg_disabled: var(--color-fill-2);
1099
- @input-color-addon-bg: #f5f7fc;
1099
+ @input-color-addon-bg: var(--color-fill-2);
1100
1100
  @input-color-addon-border: transparent;
1101
1101
  @input-border-addon-separator-width: 0;
1102
1102
  @input-color-border_focus: rgb(var(--primary-6));
1103
1103
  @input-color-shadow_focus: var(--color-primary-light-2);
1104
1104
  @input-size-shadow_focus: 0;
1105
- @input-color-addon-border_default: #c3c7d4;
1106
- @input-color-text: #292f42;
1107
- @input-color-placeholder-text: #9ca3b8;
1105
+ @input-color-addon-border_default: var(--color-border-3);
1106
+ @input-color-text: var(--color-text-2);
1107
+ @input-color-placeholder-text: var(--color-text-4);
1108
1108
  @input-color-text_disabled: var(--color-text-4);
1109
- @input-color-addon-text: #292f42;
1110
- @input-color-bg_error: #ffffff;
1111
- @input-color-bg_error_hover: #ffffff;
1112
- @input-color-bg_error_focus: #ffffff;
1109
+ @input-color-addon-text: var(--color-text-2);
1110
+ @input-color-bg_error: var(--color-bg-2);
1111
+ @input-color-bg_error_hover: var(--color-bg-2);
1112
+ @input-color-bg_error_focus: var(--color-bg-2);
1113
1113
  @input-color-border_error_focus: rgb(var(--danger-6));
1114
1114
  @input-color-shadow_error_focus: var(--color-danger-light-2);
1115
1115
  @input-size-shadow_error_focus: 0;
1116
1116
  @input-color-bg_warning: var(--color-warning-light-1);
1117
1117
  @input-color-bg_warning_hover: var(--color-warning-light-2);
1118
- @input-color-bg_warning_focus: #ffffff;
1118
+ @input-color-bg_warning_focus: var(--color-bg-2);
1119
1119
  @input-color-border_warning_focus: rgb(var(--warning-6));
1120
1120
  @input-color-shadow_warning_focus: var(--color-warning-light-2);
1121
1121
  @input-size-shadow_warning_focus: 0;
@@ -1125,8 +1125,8 @@
1125
1125
  @input-size-small-height: 28px;
1126
1126
  @input-size-large-height: 36px;
1127
1127
  @input-border-width: 1px;
1128
- @input-color-border: #c3c7d4;
1129
- @input-color-border_disabled: #c3c7d4;
1128
+ @input-color-border: var(--color-border-3);
1129
+ @input-color-border_disabled: var(--color-border-3);
1130
1130
  @input-color-border_hover: rgb(var(--primary-5));
1131
1131
  @input-color-border_error: rgb(var(--danger-6));
1132
1132
  @input-color-border_error_hover: rgb(var(--danger-5));
@@ -1159,7 +1159,7 @@
1159
1159
  @input-padding-word-limit-left: 8px;
1160
1160
  @input-group-border-radius_compact: 4px;
1161
1161
  @input-group-border-separator-width: 0;
1162
- @input-group-color-separator-border: transparent;
1162
+ @input-group-color-separator-border: var(--color-border-3);
1163
1163
  @input-tag-size-mini-height: 24px;
1164
1164
  @input-tag-size-small-height: 28px;
1165
1165
  @input-tag-size-default-height: 32px;
@@ -1176,26 +1176,26 @@
1176
1176
  @input-tag-size-small-padding_no_tag: 12px;
1177
1177
  @input-tag-size-default-padding_no_tag: 12px;
1178
1178
  @input-tag-size-large-padding_no_tag: 16px;
1179
- @input-tag-color-text_default: #292f42;
1179
+ @input-tag-color-text_default: var(--color-text-2);
1180
1180
  @input-tag-color-text_error: var(--color-text-1);
1181
1181
  @input-tag-color-text_disabled: var(--color-text-4);
1182
- @input-tag-color-placeholder: #9ca3b8;
1182
+ @input-tag-color-placeholder: var(--color-text-4);
1183
1183
  @input-tag-color-icon-clear: var(--color-text-2);
1184
1184
  @input-tag-color-icon-clear-bg_hover: transparent;
1185
- @input-tag-color-border_default: #c3c7d4;
1185
+ @input-tag-color-border_default: var(--color-border-3);
1186
1186
  @input-tag-color-border_default_hover: rgb(var(--primary-5));
1187
1187
  @input-tag-color-border_default_focus: rgb(var(--primary-6));
1188
1188
  @input-tag-color-border_error: rgb(var(--danger-6));
1189
1189
  @input-tag-color-border_error_hover: rgb(var(--danger-5));
1190
1190
  @input-tag-color-border_error_focus: rgb(var(--danger-7));
1191
- @input-tag-color-border_disabled: #c3c7d4;
1192
- @input-tag-color-border_disabled_hover: #c3c7d4;
1193
- @input-tag-color-border_disabled_focus: #c3c7d4;
1194
- @input-tag-color-bg_default: #ffffff;
1195
- @input-tag-color-bg_default_hover: #ffffff;
1191
+ @input-tag-color-border_disabled: var(--color-border-3);
1192
+ @input-tag-color-border_disabled_hover: var(--color-border-3);
1193
+ @input-tag-color-border_disabled_focus: var(--color-border-3);
1194
+ @input-tag-color-bg_default: var(--color-bg-2);
1195
+ @input-tag-color-bg_default_hover: var(--color-bg-2);
1196
1196
  @input-tag-color-bg_default_focus: var(--color-bg-2);
1197
- @input-tag-color-bg_error: #ffffff;
1198
- @input-tag-color-bg_error_hover: #ffffff;
1197
+ @input-tag-color-bg_error: var(--color-bg-2);
1198
+ @input-tag-color-bg_error_hover: var(--color-bg-2);
1199
1199
  @input-tag-color-bg_error_focus: var(--color-bg-2);
1200
1200
  @input-tag-color-bg_disabled: var(--color-fill-2);
1201
1201
  @input-tag-color-bg_disabled_hover: var(--color-fill-2);
@@ -1211,25 +1211,25 @@
1211
1211
  @input-tag-size-icon-clear: 12px;
1212
1212
  @input-tag-size-icon-clear_hover: 20px;
1213
1213
  @input-tag-tag-font-size: 14px;
1214
- @input-tag-tag-color-bg: #ebeef5;
1215
- @input-tag-tag-color-bg_focus: #ebeef5;
1216
- @input-tag-tag-color-bg_disabled: #ebeef5;
1217
- @input-tag-tag-color-border: transparent;
1214
+ @input-tag-tag-color-bg: var(--color-fill-3);
1215
+ @input-tag-tag-color-bg_focus: var(--color-fill-3);
1216
+ @input-tag-tag-color-bg_disabled: var(--color-fill-3);
1217
+ @input-tag-tag-color-border: var(--color-border-2);
1218
1218
  @input-tag-tag-color-border_disabled: transparent;
1219
1219
  @input-tag-tag-color-border_focus: transparent;
1220
- @input-tag-tag-remove-icon-color-bg: rgb(var(--primary-1));
1221
- @input-tag-tag-remove-icon-color-bg_focus: rgb(var(--primary-1));
1220
+ @input-tag-tag-remove-icon-color-bg: transparent;
1221
+ @input-tag-tag-remove-icon-color-bg_focus: transparent;
1222
1222
  @input-tag-color-text_warning: var(--color-text-1);
1223
1223
  @input-tag-color-border_warning: transparent;
1224
1224
  @input-tag-color-border_warning_hover: transparent;
1225
1225
  @input-tag-color-border_warning_focus: rgb(var(--warning-6));
1226
1226
  @input-tag-color-bg_warning: var(--color-warning-light-1);
1227
1227
  @input-tag-color-bg_warning_hover: var(--color-warning-light-2);
1228
- @input-tag-color-bg_warning_focus: #ffffff;
1228
+ @input-tag-color-bg_warning_focus: var(--color-bg-2);
1229
1229
  @input-tag-color-shadow_warning_focus: var(--color-warning-light-2);
1230
1230
  @input-tag-size-shadow_warning_focus: 0;
1231
1231
  @input-tag-addon-padding-horizontal: 12px;
1232
- @input-tag-color-addon-bg: #f5f7fc;
1232
+ @input-tag-color-addon-bg: var(--color-fill-2);
1233
1233
  @input-tag-color-addon-border: var(--color-border-2);
1234
1234
  @input-tag-color-addon-border_default: transparent;
1235
1235
  @input-tag-border-addon-separator-width: 1px;
@@ -1245,7 +1245,7 @@
1245
1245
  @input-number-step-button-color: var(--color-text-2);
1246
1246
  @input-number-step-button-color_disabled: var(--color-text-4);
1247
1247
  @input-number-step-button-color-border: var(--color-neutral-3);
1248
- @input-number-step-button-color-bg_default: #ffffff;
1248
+ @input-number-step-button-color-bg_default: var(--color-bg-2);
1249
1249
  @input-number-step-button-color-bg_default_hover: rgb(var(--primary-1));
1250
1250
  @input-number-step-button-color-bg_default_active: rgb(var(--primary-1));
1251
1251
  @input-number-step-button-color-bg_disabled: var(--color-fill-2);
@@ -1299,21 +1299,21 @@
1299
1299
  @picker-size-shadow_focus: 0;
1300
1300
  @picker-color-shadow_error_focus: var(--color-danger-light-2);
1301
1301
  @picker-size-shadow_error_focus: 0;
1302
- @picker-color-bg: #ffffff;
1303
- @picker-color-bg_hover: #ffffff;
1302
+ @picker-color-bg: var(--color-bg-2);
1303
+ @picker-color-bg_hover: var(--color-bg-2);
1304
1304
  @picker-color-bg_focus: var(--color-bg-2);
1305
1305
  @picker-color-bg_disabled: var(--color-fill-2);
1306
1306
  @picker-color-bg_error: var(--color-danger-light-1);
1307
1307
  @picker-color-bg_error_hover: var(--color-danger-light-2);
1308
1308
  @picker-color-bg_error_focus: var(--color-bg-2);
1309
- @picker-color-border: #c3c7d4;
1309
+ @picker-color-border: var(--color-border-3);
1310
1310
  @picker-color-border_hover: rgb(var(--primary-5));
1311
1311
  @picker-color-border_focus: rgb(var(--primary-6));
1312
- @picker-color-border_disabled: #c3c7d4;
1312
+ @picker-color-border_disabled: var(--color-border-3);
1313
1313
  @picker-color-border_error: transparent;
1314
1314
  @picker-color-border_error_hover: transparent;
1315
1315
  @picker-color-border_error_focus: rgb(var(--danger-6));
1316
- @picker-color-placeholder: #9ca3b8;
1316
+ @picker-color-placeholder: var(--color-text-4);
1317
1317
  @picker-color-placeholder_disabled: var(--color-text-4);
1318
1318
  @picker-color-text: var(--color-text-1);
1319
1319
  @picker-color-text_disabled: var(--color-text-4);
@@ -1328,7 +1328,7 @@
1328
1328
  @picker-size-shadow_warning_focus: 0;
1329
1329
  @picker-color-bg_warning: var(--color-warning-light-1);
1330
1330
  @picker-color-bg_warning_hover: var(--color-warning-light-2);
1331
- @picker-color-bg_warning_focus: #ffffff;
1331
+ @picker-color-bg_warning_focus: var(--color-bg-2);
1332
1332
  @picker-color-border_warning: transparent;
1333
1333
  @picker-color-border_warning_hover: transparent;
1334
1334
  @picker-color-border_warning_focus: rgb(var(--warning-6));
@@ -1354,21 +1354,21 @@
1354
1354
  @picker-color-bg-switch-icon: var(--color-bg-popup);
1355
1355
  @picker-color-bg-switch-icon_hover: rgb(var(--primary-1));
1356
1356
  @picker-cell-font-weight-in-view: 500;
1357
- @picker-color-cell-text-in-view: #292f42;
1357
+ @picker-color-cell-text-in-view: var(--color-text-2);
1358
1358
  @picker-cell-font-weight-not-in-view: 500;
1359
1359
  @picker-color-cell-text-not-in-view: var(--color-text-4);
1360
1360
  @picker-color-bg-circle_selected: rgb(var(--primary-6));
1361
- @picker-color-bg-cell-in-range: var(--color-primary-light-1);
1362
- @picker-color-bg-cell-disabled: #f5f7fc;
1361
+ @picker-color-bg-cell-in-range: rgb(var(--primary-1));
1362
+ @picker-color-bg-cell-disabled: var(--color-fill-2);
1363
1363
  @picker-color-text-cell-range-boundary: var(--color-white);
1364
1364
  @picker-color-bg-cell-range-boundary: rgb(var(--primary-6));
1365
1365
  @picker-color-bg-cell-hover-in-range: rgb(var(--primary-1));
1366
1366
  @picker-color-text-cell-hover-range-boundary: var(--color-text-1);
1367
1367
  @picker-color-bg-cell-hover-range-boundary: var(--color-primary-light-2);
1368
- @picker-color-text-week-list-item: #292f42;
1368
+ @picker-color-text-week-list-item: var(--color-text-2);
1369
1369
  @picker-font-weight-week-list-item: 500;
1370
- @picker-panel-color-border: #dfe2eb;
1371
- @picker-panel-color-text-cell_hover: #292f42;
1370
+ @picker-panel-color-border: var(--color-border-2);
1371
+ @picker-panel-color-text-cell_hover: var(--color-text-2);
1372
1372
  @picker-panel-color-bg-cell_hover: rgb(var(--primary-1));
1373
1373
  @picker-panel-color-text-cell_selected: var(--color-white);
1374
1374
  @picker-panel-color-bg-cell_selected: rgb(var(--primary-6));
@@ -1401,7 +1401,7 @@
1401
1401
  @alert-padding-vertical: 8px;
1402
1402
  @alert-padding-horizontal_with_title: 16px;
1403
1403
  @alert-padding-vertical_with_title: 16px;
1404
- @alert-font-weight-title: 500;
1404
+ @alert-font-weight-title: 600;
1405
1405
  @alert-font-size-text-title: 16px;
1406
1406
  @alert-font-size-text-content: 14px;
1407
1407
  @alert-font-size-icon: 20px;
@@ -1507,32 +1507,32 @@
1507
1507
  @select-size-icon-bg: 16px;
1508
1508
  @select-border-width: 1px;
1509
1509
  @select-border-radius: 4px;
1510
- @select-color-text_default: #292f42;
1510
+ @select-color-text_default: var(--color-text-2);
1511
1511
  @select-color-text_disabled: var(--color-text-4);
1512
- @select-color-text_focused: #292f42;
1513
- @select-color-placeholder_default: #9ca3b8;
1512
+ @select-color-text_focused: var(--color-text-2);
1513
+ @select-color-placeholder_default: var(--color-text-4);
1514
1514
  @select-color-placeholder_disabled: var(--color-text-4);
1515
1515
  @select-color-placeholder_focused: #9ca3b8;
1516
1516
  @select-color-icon_default: var(--color-text-2);
1517
1517
  @select-color-icon_disabled: var(--color-text-4);
1518
1518
  @select-color-icon_focused: var(--color-text-2);
1519
1519
  @select-color-icon-bg_hover: rgb(var(--primary-1));
1520
- @select-color-bg_default: #ffffff;
1521
- @select-color-bg_default_hover: #ffffff;
1520
+ @select-color-bg_default: var(--color-bg-2);
1521
+ @select-color-bg_default_hover: var(--color-bg-2);
1522
1522
  @select-color-bg_default_focus: var(--color-bg-2);
1523
1523
  @select-color-bg_error_focus: var(--color-bg-2);
1524
- @select-color-bg_error: #ffffff;
1524
+ @select-color-bg_error: var(--color-bg-2);
1525
1525
  @select-color-bg_error_hover: #ffffff;
1526
1526
  @select-color-bg_disabled: var(--color-fill-2);
1527
1527
  @select-color-bg_disabled_hover: var(--color-fill-2);
1528
- @select-color-border_default: #c3c7d4;
1528
+ @select-color-border_default: var(--color-border-3);
1529
1529
  @select-color-border_default_hover: rgb(var(--primary-5));
1530
1530
  @select-color-border_default_focus: rgb(var(--primary-6));
1531
1531
  @select-color-border_error: rgb(var(--danger-6));
1532
1532
  @select-color-border_error_hover: rgb(var(--danger-5));
1533
1533
  @select-color-border_error_focus: rgb(var(--danger-6));
1534
- @select-color-border_disabled: #c3c7d4;
1535
- @select-color-border_disabled_hover: #c3c7d4;
1534
+ @select-color-border_disabled: var(--color-border-3);
1535
+ @select-color-border_disabled_hover: var(--color-border-3);
1536
1536
  @select-shadow-distance_default_focus: 0;
1537
1537
  @select-shadow-distance_error_focus: 0;
1538
1538
  @select-color-shadow_default_focus: var(--color-primary-light-2);
@@ -1552,11 +1552,11 @@
1552
1552
  @select-popup-option-border-radius: 0;
1553
1553
  @select-popup-option-color-bg_default: var(--color-bg-popup);
1554
1554
  @select-popup-option-color-bg_hover: rgb(var(--primary-1));
1555
- @select-popup-option-color-bg_selected: rgb(var(--primary-1));
1555
+ @select-popup-option-color-bg_selected: transparent;
1556
1556
  @select-popup-option-color-bg_disabled: var(--color-bg-popup);
1557
- @select-popup-option-color-text_default: #292f42;
1558
- @select-popup-option-color-text_hover: #292f42;
1559
- @select-popup-option-color-text_selected: #292f42;
1557
+ @select-popup-option-color-text_default: var(--color-text-2);
1558
+ @select-popup-option-color-text_hover: var(--color-text-2);
1559
+ @select-popup-option-color-text_selected: rgb(var(--primary-6));
1560
1560
  @select-popup-option-color-text_disabled: var(--color-text-4);
1561
1561
  @select-popup-option-color-hightlight-text: var(--color-text-1);
1562
1562
  @select-popup-option-font-hightlight-weight: 600;
@@ -1566,12 +1566,12 @@
1566
1566
  @select-popup-group-title-font-size: 12px;
1567
1567
  @select-popup-group-title-color-text: var(--color-text-3);
1568
1568
  @select-addon-padding-horizontal: 12px;
1569
- @select-color-addon-bg: #f5f7fc;
1569
+ @select-color-addon-bg: var(--color-fill-2);
1570
1570
  @select-color-addon-border: var(--color-border-2);
1571
1571
  @select-color-addon-border_default: transparent;
1572
1572
  @select-border-addon-separator-width: 1px;
1573
1573
  @select-color-addon-text: var(--color-text-1);
1574
- @select-color-bg_warning_focus: #ffffff;
1574
+ @select-color-bg_warning_focus: var(--color-bg-2);
1575
1575
  @select-color-bg_warning: var(--color-warning-light-1);
1576
1576
  @select-color-bg_warning_hover: var(--color-warning-light-2);
1577
1577
  @select-color-border_warning: transparent;
@@ -1600,11 +1600,11 @@
1600
1600
  @avatar-size-trigger-button: 20px;
1601
1601
  @avatar-spacing-trigger-button-right: 4px;
1602
1602
  @avatar-spacing-trigger-button-bottom: 4px;
1603
- @avatar-color-trigger-button-bg: #f5f7fc;
1603
+ @avatar-color-trigger-button-bg: var(--color-fill-3);
1604
1604
  @avatar-color-trigger-button-bg_hover: rgb(var(--primary-1));
1605
1605
  @avatar-color-trigger-mask-icon: var(--color-white);
1606
1606
  @avatar-opacity-trigger-mask-bg: 60%;
1607
- @avatar-color-trigger-icon-button: #292f42;
1607
+ @avatar-color-trigger-icon-button: var(--color-text-2);
1608
1608
  @avatar-size-trigger-icon: 12px;
1609
1609
  @avatar-border-trigger-button-radius: var(--border-radius-circle);
1610
1610
  @avatar-prefix-cls: ~'@{prefix}-avatar';
@@ -1632,7 +1632,7 @@
1632
1632
  @badge-font-count-size: 12px;
1633
1633
  @badge-font-status-text-size: 14px;
1634
1634
  @badge-color-count-text: var(--color-white);
1635
- @badge-color-status-text: #292f42;
1635
+ @badge-color-status-text: var(--color-text-2);
1636
1636
  @badge-color-count-bg: rgb(var(--danger-6));
1637
1637
  @badge-size-dot-width: 8px;
1638
1638
  @badge-color-dot-bg_default: var(--color-fill-4);
@@ -1645,14 +1645,14 @@
1645
1645
  @badge-orangered-color-dot-bg: rgb(var(--badge-5));
1646
1646
  @badge-orange-color-dot-bg: rgb(var(--warning-6));
1647
1647
  @badge-lime-color-dot-bg: rgb(var(--badge-4));
1648
- @badge-gold-color-dot-bg: rgb(var(--gold-6));
1648
+ @badge-gold-color-dot-bg: rgb(var(--badge-7));
1649
1649
  @badge-green-color-dot-bg: rgb(var(--success-6));
1650
1650
  @badge-cyan-color-dot-bg: rgb(var(--badge-3));
1651
1651
  @badge-arcoblue-color-dot-bg: rgb(var(--primary-6));
1652
1652
  @badge-pinkpurple-color-dot-bg: rgb(var(--badge-1));
1653
1653
  @badge-purple-color-dot-bg: rgb(var(--badge-6));
1654
1654
  @badge-magenta-color-dot-bg: rgb(var(--badge-2));
1655
- @badge-gray-color-dot-bg: rgb(var(--gray-4));
1655
+ @badge-gray-color-dot-bg: #c3c7d4;
1656
1656
  @badge-prefix-cls: ~'@{prefix}-badge';
1657
1657
  @badge-1: #8518f2;
1658
1658
  @badge-4: #16d916;
@@ -1668,9 +1668,9 @@
1668
1668
 
1669
1669
  /*********** breadcrumb ***********/
1670
1670
 
1671
- @breadcrumb-color-text: #646c85;
1671
+ @breadcrumb-color-text: var(--color-text-3);
1672
1672
  @breadcrumb-color-text_active: var(--color-text-1);
1673
- @breadcrumb-color-link-text: #292f42;
1673
+ @breadcrumb-color-link-text: var(--color-text-2);
1674
1674
  @breadcrumb-color-separator: #646c85;
1675
1675
  @breadcrumb-color-bg: transparent;
1676
1676
  @breadcrumb-color-bg_hover: transparent;
@@ -1682,7 +1682,7 @@
1682
1682
  @breadcrumb-size-dropdown-icon: 12px;
1683
1683
  @breadcrumb-size-font-size: 20px;
1684
1684
  @breadcrumb-font-weight_active: 500;
1685
- @breadcrumb-color-icon: #292f42;
1685
+ @breadcrumb-color-icon: var(--color-text-2);
1686
1686
  @breadcrumb-color-link-text_hover: rgb(var(--link-5));
1687
1687
  @breadcrumb-color-dropdown-icon: var(--color-text-2);
1688
1688
  @breadcrumb-color-box-shadow: rgb(var(--primary-6));
@@ -1731,7 +1731,7 @@
1731
1731
  @btn-outline-color-bg_hover: transparent;
1732
1732
  @btn-outline-color-bg_active: transparent;
1733
1733
  @btn-outline-color-border: rgb(var(--primary-6));
1734
- @btn-outline-color-border_disabled: #c3c7d4;
1734
+ @btn-outline-color-border_disabled: var(--color-border-3);
1735
1735
  @btn-outline-color-border_hover: rgb(var(--primary-5));
1736
1736
  @btn-outline-color-border_active: rgb(var(--primary-7));
1737
1737
  @btn-outline-color-text_warning: rgb(var(--warning-6));
@@ -1743,7 +1743,7 @@
1743
1743
  @btn-outline-color-bg_warning_hover: transparent;
1744
1744
  @btn-outline-color-bg_warning_active: transparent;
1745
1745
  @btn-outline-color-border_warning: rgb(var(--warning-6));
1746
- @btn-outline-color-border_warning_disabled: #c3c7d4;
1746
+ @btn-outline-color-border_warning_disabled: var(--color-border-3);
1747
1747
  @btn-outline-color-border_warning_hover: rgb(var(--warning-5));
1748
1748
  @btn-outline-color-border_warning_active: rgb(var(--warning-7));
1749
1749
  @btn-outline-color-text_danger: rgb(var(--danger-6));
@@ -1755,7 +1755,7 @@
1755
1755
  @btn-outline-color-bg_danger_hover: transparent;
1756
1756
  @btn-outline-color-bg_danger_active: transparent;
1757
1757
  @btn-outline-color-border_danger: rgb(var(--danger-6));
1758
- @btn-outline-color-border_danger_disabled: #c3c7d4;
1758
+ @btn-outline-color-border_danger_disabled: var(--color-border-3);
1759
1759
  @btn-outline-color-border_danger_hover: rgb(var(--danger-5));
1760
1760
  @btn-outline-color-border_danger_active: rgb(var(--danger-7));
1761
1761
  @btn-outline-color-text_success: rgb(var(--success-6));
@@ -1767,44 +1767,44 @@
1767
1767
  @btn-outline-color-bg_success_hover: transparent;
1768
1768
  @btn-outline-color-bg_success_active: transparent;
1769
1769
  @btn-outline-color-border_success: rgb(var(--success-6));
1770
- @btn-outline-color-border_success_disabled: #c3c7d4;
1770
+ @btn-outline-color-border_success_disabled: var(--color-border-3);
1771
1771
  @btn-outline-color-border_success_hover: rgb(var(--success-5));
1772
1772
  @btn-outline-color-border_success_active: rgb(var(--success-7));
1773
1773
  @btn-outline-border-style: solid;
1774
- @btn-primary-color-text: #ffffff;
1775
- @btn-primary-color-text_disabled: #9ca3b8;
1776
- @btn-primary-color-text_hover: #ffffff;
1777
- @btn-primary-color-text_active: #ffffff;
1774
+ @btn-primary-color-text: var(--color-white);
1775
+ @btn-primary-color-text_disabled: var(--color-text-4);
1776
+ @btn-primary-color-text_hover: var(--color-white);
1777
+ @btn-primary-color-text_active: var(--color-white);
1778
1778
  @btn-primary-color-bg: rgb(var(--primary-6));
1779
- @btn-primary-color-bg_disabled: #f5f7fc;
1779
+ @btn-primary-color-bg_disabled: var(--color-fill-2);
1780
1780
  @btn-primary-color-bg_hover: rgb(var(--primary-5));
1781
1781
  @btn-primary-color-bg_active: rgb(var(--primary-7));
1782
1782
  @btn-primary-color-border: transparent;
1783
- @btn-primary-color-border_disabled: #c3c7d4;
1783
+ @btn-primary-color-border_disabled: var(--color-border-3);
1784
1784
  @btn-primary-color-border_hover: transparent;
1785
1785
  @btn-primary-color-border_active: transparent;
1786
- @btn-primary-color-text_warning: #ffffff;
1787
- @btn-primary-color-text_warning_disabled: #9ca3b8;
1788
- @btn-primary-color-text_warning_hover: #ffffff;
1789
- @btn-primary-color-text_warning_active: #ffffff;
1786
+ @btn-primary-color-text_warning: var(--color-white);
1787
+ @btn-primary-color-text_warning_disabled: var(--color-text-4);
1788
+ @btn-primary-color-text_warning_hover: var(--color-white);
1789
+ @btn-primary-color-text_warning_active: var(--color-white);
1790
1790
  @btn-primary-color-bg_warning: rgb(var(--warning-6));
1791
- @btn-primary-color-bg_warning_disabled: #f5f7fc;
1791
+ @btn-primary-color-bg_warning_disabled: var(--color-fill-2);
1792
1792
  @btn-primary-color-bg_warning_hover: rgb(var(--warning-5));
1793
1793
  @btn-primary-color-bg_warning_active: rgb(var(--warning-7));
1794
1794
  @btn-primary-color-border_warning: transparent;
1795
- @btn-primary-color-border_warning_disabled: #c3c7d4;
1795
+ @btn-primary-color-border_warning_disabled: var(--color-border-3);
1796
1796
  @btn-primary-color-border_warning_hover: transparent;
1797
1797
  @btn-primary-color-border_warning_active: transparent;
1798
- @btn-primary-color-text_danger: #ffffff;
1799
- @btn-primary-color-text_danger_disabled: #9ca3b8;
1800
- @btn-primary-color-text_danger_hover: #ffffff;
1801
- @btn-primary-color-text_danger_active: #ffffff;
1798
+ @btn-primary-color-text_danger: var(--color-white);
1799
+ @btn-primary-color-text_danger_disabled: var(--color-text-4);
1800
+ @btn-primary-color-text_danger_hover: var(--color-white);
1801
+ @btn-primary-color-text_danger_active: var(--color-white);
1802
1802
  @btn-primary-color-bg_danger: rgb(var(--danger-6));
1803
- @btn-primary-color-bg_danger_disabled: #f5f7fc;
1803
+ @btn-primary-color-bg_danger_disabled: var(--color-fill-2);
1804
1804
  @btn-primary-color-bg_danger_hover: rgb(var(--danger-5));
1805
1805
  @btn-primary-color-bg_danger_active: rgb(var(--danger-7));
1806
1806
  @btn-primary-color-border_danger: transparent;
1807
- @btn-primary-color-border_danger_disabled: #c3c7d4;
1807
+ @btn-primary-color-border_danger_disabled: var(--color-border-3);
1808
1808
  @btn-primary-color-border_danger_hover: transparent;
1809
1809
  @btn-primary-color-border_danger_active: transparent;
1810
1810
  @btn-primary-color-text_success: #ffffff;
@@ -1812,11 +1812,11 @@
1812
1812
  @btn-primary-color-text_success_hover: #fff;
1813
1813
  @btn-primary-color-text_success_active: #ffffff;
1814
1814
  @btn-primary-color-bg_success: rgb(var(--success-6));
1815
- @btn-primary-color-bg_success_disabled: #f5f7fc;
1815
+ @btn-primary-color-bg_success_disabled: var(--color-fill-2);
1816
1816
  @btn-primary-color-bg_success_hover: rgb(var(--success-5));
1817
1817
  @btn-primary-color-bg_success_active: rgb(var(--success-7));
1818
1818
  @btn-primary-color-border_success: transparent;
1819
- @btn-primary-color-border_success_disabled: #c3c7d4;
1819
+ @btn-primary-color-border_success_disabled: var(--color-border-3);
1820
1820
  @btn-primary-color-border_success_hover: transparent;
1821
1821
  @btn-primary-color-border_success_active: transparent;
1822
1822
  @btn-primary-border-style: solid;
@@ -1824,48 +1824,48 @@
1824
1824
  @btn-secondary-color-text_disabled: var(--color-text-4);
1825
1825
  @btn-secondary-color-text_hover: rgb(var(--primary-5));
1826
1826
  @btn-secondary-color-text_active: rgb(var(--primary-7));
1827
- @btn-secondary-color-bg: #ffffff;
1828
- @btn-secondary-color-bg_disabled: #f5f7fc;
1829
- @btn-secondary-color-bg_hover: #ffffff;
1830
- @btn-secondary-color-bg_active: #ffffff;
1831
- @btn-secondary-color-border: #c3c7d4;
1832
- @btn-secondary-color-border_disabled: #c3c7d4;
1827
+ @btn-secondary-color-bg: var(--color-bg-2);
1828
+ @btn-secondary-color-bg_disabled: var(--color-fill-2);
1829
+ @btn-secondary-color-bg_hover: var(--color-bg-2);
1830
+ @btn-secondary-color-bg_active: var(--color-bg-2);
1831
+ @btn-secondary-color-border: var(--color-border-3);
1832
+ @btn-secondary-color-border_disabled: var(--color-border-3);
1833
1833
  @btn-secondary-color-border_hover: rgb(var(--primary-5));
1834
1834
  @btn-secondary-color-border_active: rgb(var(--primary-7));
1835
1835
  @btn-secondary-color-text_warning: rgb(var(--warning-6));
1836
- @btn-secondary-color-text_warning_disabled: #9ca3b8;
1836
+ @btn-secondary-color-text_warning_disabled: var(--color-text-4);
1837
1837
  @btn-secondary-color-text_warning_hover: rgb(var(--warning-5));
1838
1838
  @btn-secondary-color-text_warning_active: rgb(var(--warning-7));
1839
- @btn-secondary-color-bg_warning: #ffffff;
1840
- @btn-secondary-color-bg_warning_disabled: #f5f7fc;
1841
- @btn-secondary-color-bg_warning_hover: #ffffff;
1842
- @btn-secondary-color-bg_warning_active: #ffffff;
1839
+ @btn-secondary-color-bg_warning: var(--color-bg-2);
1840
+ @btn-secondary-color-bg_warning_disabled: var(--color-fill-2);
1841
+ @btn-secondary-color-bg_warning_hover: var(--color-bg-2);
1842
+ @btn-secondary-color-bg_warning_active: var(--color-bg-2);
1843
1843
  @btn-secondary-color-border_warning: rgb(var(--warning-6));
1844
- @btn-secondary-color-border_warning_disabled: #c3c7d4;
1844
+ @btn-secondary-color-border_warning_disabled: var(--color-border-3);
1845
1845
  @btn-secondary-color-border_warning_hover: rgb(var(--warning-5));
1846
1846
  @btn-secondary-color-border_warning_active: rgb(var(--warning-7));
1847
1847
  @btn-secondary-color-text_danger: rgb(var(--danger-6));
1848
- @btn-secondary-color-text_danger_disabled: #9ca3b8;
1848
+ @btn-secondary-color-text_danger_disabled: var(--color-text-4);
1849
1849
  @btn-secondary-color-text_danger_hover: rgb(var(--danger-5));
1850
1850
  @btn-secondary-color-text_danger_active: rgb(var(--danger-7));
1851
- @btn-secondary-color-bg_danger: #ffffff;
1852
- @btn-secondary-color-bg_danger_disabled: #f5f7fc;
1853
- @btn-secondary-color-bg_danger_hover: #ffffff;
1854
- @btn-secondary-color-bg_danger_active: #ffffff;
1851
+ @btn-secondary-color-bg_danger: var(--color-bg-white);
1852
+ @btn-secondary-color-bg_danger_disabled: var(--color-fill-2);
1853
+ @btn-secondary-color-bg_danger_hover: var(--color-bg-white);
1854
+ @btn-secondary-color-bg_danger_active: var(--color-bg-white);
1855
1855
  @btn-secondary-color-border_danger: rgb(var(--danger-6));
1856
- @btn-secondary-color-border_danger_disabled: #c3c7d4;
1856
+ @btn-secondary-color-border_danger_disabled: var(--color-border-3);
1857
1857
  @btn-secondary-color-border_danger_hover: rgb(var(--danger-5));
1858
1858
  @btn-secondary-color-border_danger_active: rgb(var(--danger-7));
1859
1859
  @btn-secondary-color-text_success: rgb(var(--success-6));
1860
- @btn-secondary-color-text_success_disabled: #9ca3b8;
1860
+ @btn-secondary-color-text_success_disabled: var(--color-text-4);
1861
1861
  @btn-secondary-color-text_success_hover: rgb(var(--success-5));
1862
1862
  @btn-secondary-color-text_success_active: rgb(var(--success-7));
1863
- @btn-secondary-color-bg_success: #ffffff;
1864
- @btn-secondary-color-bg_success_disabled: #f5f7fc;
1865
- @btn-secondary-color-bg_success_hover: #ffffff;
1866
- @btn-secondary-color-bg_success_active: #ffffff;
1863
+ @btn-secondary-color-bg_success: var(--color-bg-white);
1864
+ @btn-secondary-color-bg_success_disabled: var(--color-fill-2);
1865
+ @btn-secondary-color-bg_success_hover: var(--color-bg-white);
1866
+ @btn-secondary-color-bg_success_active: var(--color-bg-white);
1867
1867
  @btn-secondary-color-border_success: rgb(var(--success-6));
1868
- @btn-secondary-color-border_success_disabled: #c3c7d4;
1868
+ @btn-secondary-color-border_success_disabled: var(--color-border-3);
1869
1869
  @btn-secondary-color-border_success_hover: rgb(var(--success-5));
1870
1870
  @btn-secondary-color-border_success_active: rgb(var(--success-7));
1871
1871
  @btn-secondary-border-style: solid;
@@ -1873,49 +1873,49 @@
1873
1873
  @btn-dashed-color-text_disabled: var(--color-text-4);
1874
1874
  @btn-dashed-color-text_hover: rgb(var(--primary-5));
1875
1875
  @btn-dashed-color-text_active: rgb(var(--primary-7));
1876
- @btn-dashed-color-bg: #ffffff;
1876
+ @btn-dashed-color-bg: var(--color-bg-2);
1877
1877
  @btn-dashed-color-bg_disabled: var(--color-fill-2);
1878
- @btn-dashed-color-bg_hover: #ffffff;
1879
- @btn-dashed-color-bg_active: #ffffff;
1880
- @btn-dashed-color-border: #c3c7d4;
1881
- @btn-dashed-color-border_disabled: #c3c7d4;
1878
+ @btn-dashed-color-bg_hover: var(--color-bg-2);
1879
+ @btn-dashed-color-bg_active: var(--color-bg-2);
1880
+ @btn-dashed-color-border: var(--color-border-3);
1881
+ @btn-dashed-color-border_disabled: var(--color-border-3);
1882
1882
  @btn-dashed-color-border_hover: rgb(var(--primary-5));
1883
1883
  @btn-dashed-color-border_active: rgb(var(--primary-7));
1884
1884
  @btn-dashed-color-text_warning: rgb(var(--warning-6));
1885
- @btn-dashed-color-text_warning_disabled: #9ca3b8;
1886
- @btn-dashed-color-text_warning_hover: rgb(var(--warning-6));
1887
- @btn-dashed-color-text_warning_active: rgb(var(--warning-6));
1888
- @btn-dashed-color-bg_warning: #ffffff;
1889
- @btn-dashed-color-bg_warning_disabled: #f5f7fc;
1890
- @btn-dashed-color-bg_warning_hover: #ffffff;
1891
- @btn-dashed-color-bg_warning_active: #ffffff;
1885
+ @btn-dashed-color-text_warning_disabled: var(--color-text-4);
1886
+ @btn-dashed-color-text_warning_hover: rgb(var(--warning-5));
1887
+ @btn-dashed-color-text_warning_active: rgb(var(--warning-7));
1888
+ @btn-dashed-color-bg_warning: var(--color-bg-2);
1889
+ @btn-dashed-color-bg_warning_disabled: var(--color-fill-2);
1890
+ @btn-dashed-color-bg_warning_hover: var(--color-bg-2);
1891
+ @btn-dashed-color-bg_warning_active: var(--color-bg-2);
1892
1892
  @btn-dashed-color-border_warning: rgb(var(--warning-6));
1893
- @btn-dashed-color-border_warning_disabled: #c3c7d4;
1893
+ @btn-dashed-color-border_warning_disabled: var(--color-border-3);
1894
1894
  @btn-dashed-color-border_warning_hover: rgb(var(--warning-5));
1895
- @btn-dashed-color-border_warning_active: var(--color-warning-light-4);
1895
+ @btn-dashed-color-border_warning_active: rgb(var(--warning-7));
1896
1896
  @btn-dashed-color-text_danger: rgb(var(--danger-6));
1897
- @btn-dashed-color-text_danger_disabled: #9ca3b8;
1897
+ @btn-dashed-color-text_danger_disabled: var(--color-text-4);
1898
1898
  @btn-dashed-color-text_danger_hover: rgb(var(--danger-5));
1899
1899
  @btn-dashed-color-text_danger_active: rgb(var(--danger-7));
1900
- @btn-dashed-color-bg_danger: #ffffff;
1901
- @btn-dashed-color-bg_danger_disabled: #f5f7fc;
1902
- @btn-dashed-color-bg_danger_hover: #ffffff;
1903
- @btn-dashed-color-bg_danger_active: #ffffff;
1900
+ @btn-dashed-color-bg_danger: var(--color-bg-2);
1901
+ @btn-dashed-color-bg_danger_disabled: var(--color-fill-2);
1902
+ @btn-dashed-color-bg_danger_hover: var(--color-bg-2);
1903
+ @btn-dashed-color-bg_danger_active: var(--color-bg-2);
1904
1904
  @btn-dashed-color-border_danger: rgb(var(--danger-6));
1905
- @btn-dashed-color-border_danger_disabled: #c3c7d4;
1905
+ @btn-dashed-color-border_danger_disabled: var(--color-border-3);
1906
1906
  @btn-dashed-color-border_danger_hover: rgb(var(--danger-5));
1907
- @btn-dashed-color-border_danger_active: var(--color-danger-light-4);
1907
+ @btn-dashed-color-border_danger_active: rgb(var(--danger-7));
1908
1908
  @btn-dashed-color-text_success: rgb(var(--success-6));
1909
- @btn-dashed-color-text_success_disabled: #9ca3b8;
1909
+ @btn-dashed-color-text_success_disabled: var(--color-text-4);
1910
1910
  @btn-dashed-color-text_success_hover: rgb(var(--success-5));
1911
1911
  @btn-dashed-color-text_success_active: rgb(var(--success-7));
1912
- @btn-dashed-color-bg_success: #ffffff;
1913
- @btn-dashed-color-bg_success_disabled: #f5f7fc;
1914
- @btn-dashed-color-bg_success_hover: #ffffff;
1915
- @btn-dashed-color-bg_success_active: #ffffff;
1912
+ @btn-dashed-color-bg_success: var(--color-bg-2);
1913
+ @btn-dashed-color-bg_success_disabled: var(--color-fill-2);
1914
+ @btn-dashed-color-bg_success_hover: var(--color-bg-2);
1915
+ @btn-dashed-color-bg_success_active: var(--color-bg-2);
1916
1916
  @btn-dashed-color-border_success: rgb(var(--success-6));
1917
- @btn-dashed-color-border_success_disabled: #c3c7d4;
1918
- @btn-dashed-color-border_success_hover: var(--color-success-light-3);
1917
+ @btn-dashed-color-border_success_disabled: var(--color-border-3);
1918
+ @btn-dashed-color-border_success_hover: rgb(var(--success-5));
1919
1919
  @btn-dashed-color-border_success_active: rgb(var(--success-7));
1920
1920
  @btn-dashed-border-style: dashed;
1921
1921
  @btn-text-color-text: rgb(var(--primary-6));
@@ -1981,7 +1981,7 @@
1981
1981
 
1982
1982
  /*********** calendar ***********/
1983
1983
 
1984
- @calendar-color-border: #dfe2eb;
1984
+ @calendar-color-border: var(--color-border-2);
1985
1985
  @calendar-header-padding-horizontal: 24px;
1986
1986
  @calendar-header-padding-vertical: 24px;
1987
1987
  @calendar-panel-date-cell-padding-vertical: 4px;
@@ -1992,11 +1992,11 @@
1992
1992
  @calendar-color-bg-switch-icon: transparent;
1993
1993
  @calendar-color-bg-switch-icon_hover: rgb(var(--primary-1));
1994
1994
  @calendar-color-text-title: var(--color-text-1);
1995
- @calendar-color-cell-text-in-view: #0f131f;
1996
- @calendar-color-cell-text-not-in-view: #9ca3b8;
1995
+ @calendar-color-cell-text-in-view: var(--color-text-1);
1996
+ @calendar-color-cell-text-not-in-view: var(--color-text-4);
1997
1997
  @calendar-color-bg-circle_selected: rgb(var(--primary-6));
1998
1998
  @calendar-color-bg-cell-in-range: var(--color-primary-light-1);
1999
- @calendar-color-bg-cell-disabled: #f5f7fc;
1999
+ @calendar-color-bg-cell-disabled: var(--color-fill-2);
2000
2000
  @calendar-color-text-cell-range-boundary: var(--color-white);
2001
2001
  @calendar-color-bg-cell-range-boundary: rgb(var(--primary-6));
2002
2002
  @calendar-color-bg-cell-hover-in-range: var(--color-primary-light-1);
@@ -2034,9 +2034,9 @@
2034
2034
  @card-margin-top-meta-description: 4px;
2035
2035
  @card-margin-right-action-item: 12px;
2036
2036
  @card-color-bg: var(--color-bg-2);
2037
- @card-color-border: #dfe2eb;
2037
+ @card-color-border: var(--color-border-2);
2038
2038
  @card-color-title: var(--color-text-1);
2039
- @card-color-title-extra: #292f42;
2039
+ @card-color-title-extra: var(--color-text-2);
2040
2040
  @card-color-body: var(--color-text-2);
2041
2041
  @card-color-action: var(--color-text-2);
2042
2042
  @card-color-action_hover: rgb(var(--primary-5));
@@ -2085,13 +2085,13 @@
2085
2085
  @cascader-size-item-width: 120px;
2086
2086
  @cascader-font-item-size: 14px;
2087
2087
  @cascader-margin-item-icon-left: 12px;
2088
- @cascader-color-item-text: #292f42;
2088
+ @cascader-color-item-text: var(--color-text-2);
2089
2089
  @cascader-color-item-icon: var(--color-text-2);
2090
2090
  @cascader-padding-item-left: 12px;
2091
2091
  @cascader-padding-item-right: 12px;
2092
2092
  @cascader-size-item-icon: 12px;
2093
- @cascader-color-item-text_hover: #292f42;
2094
- @cascader-color-item-text_active: #292f42;
2093
+ @cascader-color-item-text_hover: var(--color-text-2);
2094
+ @cascader-color-item-text_active: var(--color-text-2);
2095
2095
  @cascader-color-item-text_disabled: var(--color-text-4);
2096
2096
  @cascader-color-item-text_disabled_active: var(--color-text-4);
2097
2097
  @cascader-font-item-weight_active: 400;
@@ -2117,13 +2117,13 @@
2117
2117
  @checkbox-mask-color-bg: var(--color-bg-2);
2118
2118
  @checkbox-mask-color-bg_checked: rgb(var(--primary-6));
2119
2119
  @checkbox-mask-color-bg_disabled: var(--color-fill-2);
2120
- @checkbox-mask-color-bg_checked_disabled: #f5f7fc;
2121
- @checkbox-mask-color-border: #c3c7d4;
2120
+ @checkbox-mask-color-bg_checked_disabled: var(--color-fill-2);
2121
+ @checkbox-mask-color-border: var(--color-border-3);
2122
2122
  @checkbox-mask-color-border_hover: rgb(var(--primary-5));
2123
2123
  @checkbox-mask-color-border_checked: transparent;
2124
- @checkbox-mask-color-border_checked_disabled: #c3c7d4;
2125
- @checkbox-mask-color-border_disabled: #c3c7d4;
2126
- @checkbox-color-text: #292f42;
2124
+ @checkbox-mask-color-border_checked_disabled: var(--color-border-3);
2125
+ @checkbox-mask-color-border_disabled: var(--color-border-3);
2126
+ @checkbox-color-text: var(--color-text-2);
2127
2127
  @checkbox-color-text_disabled: var(--color-text-4);
2128
2128
  @checkbox-group-spacing: 16px;
2129
2129
  @checkbox-text-mask-spacing: 8px;
@@ -2141,31 +2141,31 @@
2141
2141
 
2142
2142
  @collapse-border-width: 1px;
2143
2143
  @collapse-border-radius: 4px;
2144
- @collapse-color-border: #dfe2eb;
2144
+ @collapse-color-border: var(--color-border-2);
2145
2145
  @collapse-line-height: 1.5715;
2146
2146
  @collapse-title-line-height: 24px;
2147
2147
  @collapse-title-border-width: 1px;
2148
- @collapse-title-color-border: #dfe2eb;
2148
+ @collapse-title-color-border: var(--color-border-2);
2149
2149
  @collapse-title-font-size: 14px;
2150
2150
  @collapse-title-padding-horizontal: 12px;
2151
2151
  @collapse-title-padding-vertical: 9px;
2152
2152
  @collapse-title-color-bg: var(--color-bg-2);
2153
2153
  @collapse-title-color-bg_active: var(--color-bg-2);
2154
2154
  @collapse-title-color-bg_disabled: var(--color-bg-2);
2155
- @collapse-title-color-text: #292f42;
2155
+ @collapse-title-color-text: var(--color-text-2);
2156
2156
  @collapse-title-color-text_disabled: var(--color-text-4);
2157
2157
  @collapse-title-font-weight_active: 400;
2158
- @collapse-content-color-text: #292f42;
2159
- @collapse-content-color-text_disabled: #9ca3b8;
2158
+ @collapse-content-color-text: var(--color-text-2);
2159
+ @collapse-content-color-text_disabled: var(--color-text-4);
2160
2160
  @collapse-content-font-size: 14px;
2161
2161
  @collapse-content-padding-vertical: 8px;
2162
- @collapse-content-color-bg: #ffffff;
2162
+ @collapse-content-color-bg: var(--color-bg-2);
2163
2163
  @collapse-expand-icon-size: 14px;
2164
2164
  @collapse-expand-icon-size-bg: 16px;
2165
2165
  @collapse-expand-icon-color-bg: transparent;
2166
2166
  @collapse-expand-icon-spacing-text: 4px;
2167
- @collapse-color-expand-icon: #292f42;
2168
- @collapse-item-color-border: #dfe2eb;
2167
+ @collapse-color-expand-icon: var(--color-text-2);
2168
+ @collapse-item-color-border: var(--color-border-2);
2169
2169
  @collapse-item-border-width: 1px;
2170
2170
  @collapse-color-box-shadow: var(--color-primary-light-3);
2171
2171
  @collapse-prefix-cls: ~'@{prefix}-collapse';
@@ -2175,7 +2175,7 @@
2175
2175
 
2176
2176
  @comment-color-author-text: var(--color-text-2);
2177
2177
  @comment-color-datetime-text: var(--color-text-3);
2178
- @comment-color-content-text: #292f42;
2178
+ @comment-color-content-text: var(--color-text-2);
2179
2179
  @comment-color-actions-text: var(--color-text-2);
2180
2180
  @comment-font-size: 14px;
2181
2181
  @comment-font-action-size: 14px;
@@ -2198,9 +2198,9 @@
2198
2198
  @timepicker-cell-height: 24px;
2199
2199
  @timepicker-cell-spacing: 8px;
2200
2200
  @timepicker-cell-font-size: 14px;
2201
- @timepicker-color-border: #dfe2eb;
2201
+ @timepicker-color-border: var(--color-border-2);
2202
2202
  @timepicker-color-cell-border: var(--color-neutral-3);
2203
- @timepicker-color-text-cell: #292f42;
2203
+ @timepicker-color-text-cell: var(--color-text-2);
2204
2204
  @timepicker-color-bg-cell_hover: rgb(var(--primary-1));
2205
2205
  @timepicker-color-bg-cell_active: rgb(var(--primary-1));
2206
2206
  @timepicker-color-text-cell_disabled: var(--color-text-4);
@@ -2259,7 +2259,7 @@
2259
2259
 
2260
2260
  @descriptions-border-width: 1px;
2261
2261
  @descriptions-border-style: solid;
2262
- @descriptions-color-border: #dfe2eb;
2262
+ @descriptions-color-border: var(--color-border-2);
2263
2263
  @descriptions-border-radius: var(--border-radius-medium);
2264
2264
  @descriptions-font-size-title: 16px;
2265
2265
  @descriptions-size-mini-title-margin-bottom: 6px;
@@ -2274,7 +2274,7 @@
2274
2274
  @descriptions-size-large-font-size-text: 14px;
2275
2275
  @descriptions-color-title: var(--color-text-1);
2276
2276
  @descriptions-color-text-label: var(--color-text-3);
2277
- @descriptions-color-text-value: #292f42;
2277
+ @descriptions-color-text-value: var(--color-text-2);
2278
2278
  @descriptions-font-weight-title: 600;
2279
2279
  @descriptions-font-weight-text-label: 400;
2280
2280
  @descriptions-font-weight-text-value: 400;
@@ -2309,8 +2309,8 @@
2309
2309
  @divider-font-weight: 500;
2310
2310
  @divider-size: 1px;
2311
2311
  @divider-line-style: solid;
2312
- @divider-color-bg: #dfe2eb;
2313
- @divider-color-text: #292f42;
2312
+ @divider-color-bg: var(--color-border-2);
2313
+ @divider-color-text: var(--color-text-2);
2314
2314
  @divider-prefix-cls: ~'@{prefix}-divider';
2315
2315
 
2316
2316
 
@@ -2323,9 +2323,9 @@
2323
2323
  @drawer-padding-horizontal: 24px;
2324
2324
  @drawer-padding-footer-vertical: 20px;
2325
2325
  @drawer-padding-content-vertical: 16px;
2326
- @drawer-color-border: #dfe2eb;
2326
+ @drawer-color-border: var(--color-border-2);
2327
2327
  @drawer-color-header-text: var(--color-text-1);
2328
- @drawer-color-content-text: #292f42;
2328
+ @drawer-color-content-text: var(--color-text-2);
2329
2329
  @drawer-position-close-icon-right: 24px;
2330
2330
  @drawer-font-size-close-icon: 16px;
2331
2331
  @drawer-prefix-cls: ~'@{prefix}-drawer';
@@ -2338,7 +2338,7 @@
2338
2338
  @dropdown-padding-vertical: 4px;
2339
2339
  @dropdown-font-size: 14px;
2340
2340
  @dropdown-color-bg: var(--color-bg-popup);
2341
- @dropdown-color-border: transparent;
2341
+ @dropdown-color-border: var(--color-border-1);
2342
2342
  @dropdown-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
2343
2343
  @dropdown-option-height: 36px;
2344
2344
  @dropdown-option-padding-horizontal: 12px;
@@ -2347,7 +2347,7 @@
2347
2347
  @dropdown-option-color-bg_hover: rgb(var(--primary-1));
2348
2348
  @dropdown-option-color-bg_selected: transparent;
2349
2349
  @dropdown-option-color-bg_disabled: transparent;
2350
- @dropdown-option-color-text_default: #292f42;
2350
+ @dropdown-option-color-text_default: var(--color-text-2);
2351
2351
  @dropdown-option-color-text_hover: #292f42;
2352
2352
  @dropdown-option-color-text_selected: rgb(var(--primary-6));
2353
2353
  @dropdown-option-color-text_disabled: var(--color-text-4);
@@ -2375,7 +2375,7 @@
2375
2375
 
2376
2376
  @empty-spacing-padding: 16px;
2377
2377
  @empty-color-icon: rgb(var(--gray-5));
2378
- @empty-color-text: #0f131f;
2378
+ @empty-color-text: var(--color-text-1);
2379
2379
  @empty-font-size-image: 48px;
2380
2380
  @empty-font-size-text: 14px;
2381
2381
  @empty-spacing-image-margin-bottom: 4px;
@@ -2409,7 +2409,7 @@
2409
2409
  @form-color-text-label: var(--color-text-2);
2410
2410
  @form-color-text-tooltip: var(--color-text-4);
2411
2411
  @form-margin-tooltip-left: 4px;
2412
- @form-color-bg_warning: #ffffff;
2412
+ @form-color-bg_warning: var(--color-bg-2);
2413
2413
  @form-color-bg_warning_hover: #ffffff;
2414
2414
  @form-color-bg_warning_focus: var(--color-bg-2);
2415
2415
  @form-color-border_warning: rgb(var(--warning-6));
@@ -2417,7 +2417,7 @@
2417
2417
  @form-color-border_warning_hover: rgb(var(--warning-5));
2418
2418
  @form-size-shadow_warning_focus: 0;
2419
2419
  @form-color-shadow_warning_focus: var(--color-warning-light-2);
2420
- @form-color-bg_success: #ffffff;
2420
+ @form-color-bg_success: var(--color-bg-white);
2421
2421
  @form-color-bg_success_hover: #ffffff;
2422
2422
  @form-color-bg_success_focus: var(--color-bg-2);
2423
2423
  @form-color-border_success: rgb(var(--success-6));
@@ -2425,7 +2425,7 @@
2425
2425
  @form-color-border_success_hover: rgb(var(--success-5));
2426
2426
  @form-size-shadow_success_focus: 0;
2427
2427
  @form-color-shadow_success_focus: var(--color-success-light-2);
2428
- @form-color-bg_error: #ffffff;
2428
+ @form-color-bg_error: var(--color-bg-2);
2429
2429
  @form-color-bg_error_hover: #ffffff;
2430
2430
  @form-color-bg_error_focus: var(--color-bg-2);
2431
2431
  @form-color-border_error: rgb(var(--danger-6));
@@ -2433,7 +2433,7 @@
2433
2433
  @form-color-border_error_hover: rgb(var(--danger-5));
2434
2434
  @form-size-shadow_error_focus: 0;
2435
2435
  @form-color-shadow_error_focus: var(--color-danger-light-2);
2436
- @form-color-bg_validating: #ffffff;
2436
+ @form-color-bg_validating: var(--color-bg-2);
2437
2437
  @form-color-bg_validating_hover: #ffffff;
2438
2438
  @form-color-bg_validating_focus: var(--color-bg-2);
2439
2439
  @form-color-border_validating: rgb(var(--primary-6));
@@ -2591,9 +2591,9 @@
2591
2591
  /*********** list ***********/
2592
2592
 
2593
2593
  @list-border-width: 1px;
2594
- @list-border-color: #dfe2eb;
2594
+ @list-border-color: var(--color-border-2);
2595
2595
  @list-border-radius: var(--border-radius-medium);
2596
- @list-color-text: #292f42;
2596
+ @list-color-text: var(--color-text-2);
2597
2597
  @list-font-size: 14px;
2598
2598
  @list-line-height: 1.5715;
2599
2599
  @list-color-text-header: var(--color-text-1);
@@ -2651,19 +2651,19 @@
2651
2651
  @menu-width-collapse-button: 24px;
2652
2652
  @menu-height-collapse-button: 24px;
2653
2653
  @menu-border-radius-collapse-button: var(--border-radius-small);
2654
- @menu-light-color-bg: #f5f7fc;
2655
- @menu-light-color-bg-item_default: #f5f7fc;
2656
- @menu-light-color-bg-item_hover: #ffffff;
2654
+ @menu-light-color-bg: var(--color-fill-2);
2655
+ @menu-light-color-bg-item_default: var(--color-fill-2);
2656
+ @menu-light-color-bg-item_hover: var(--color-bg-2);
2657
2657
  @menu-light-color-bg-item_selected: #ffffff;
2658
- @menu-light-color-bg-item_disabled: #f5f7fc;
2659
- @menu-light-color-item_default: #0f131f;
2660
- @menu-light-color-item_hover: #0f131f;
2658
+ @menu-light-color-bg-item_disabled: var(--color-fill-2);
2659
+ @menu-light-color-item_default: #292f42;
2660
+ @menu-light-color-item_hover: #292f42;
2661
2661
  @menu-light-color-item_selected: rgb(var(--primary-6));
2662
2662
  @menu-light-color-submenu_selected: rgb(var(--primary-6));
2663
2663
  @menu-light-color-bg-submenu_selected_hover: var(--color-fill-2);
2664
2664
  @menu-light-color-item_disabled: var(--color-text-4);
2665
- @menu-light-color-icon_default: #0f131f;
2666
- @menu-light-color-icon_hover: #0f131f;
2665
+ @menu-light-color-icon_default: #292f42;
2666
+ @menu-light-color-icon_hover: #292f42;
2667
2667
  @menu-light-color-icon_selected: rgb(var(--primary-6));
2668
2668
  @menu-light-color-icon_disabled: var(--color-text-4);
2669
2669
  @menu-light-color-group-title: var(--color-text-3);
@@ -2725,35 +2725,35 @@
2725
2725
  @message-border-width: 1px;
2726
2726
  @message-border-style: solid;
2727
2727
  @message-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
2728
- @message-color-close-icon: #292f42;
2728
+ @message-color-close-icon: var(--color-text-2);
2729
2729
  @message-close-icon-font-size: 12px;
2730
2730
  @message-close-icon-top: 12px;
2731
2731
  @message-close-icon-right: 16px;
2732
2732
  @message-close-icon-left: 14px;
2733
- @message-normal-color-bg: #ffffff;
2733
+ @message-normal-color-bg: var(--color-bg-5);
2734
2734
  @message-normal-color-icon: #292f42;
2735
- @message-normal-color-content: #292f42;
2736
- @message-normal-color-border: transparent;
2737
- @message-info-color-bg: #ffffff;
2735
+ @message-normal-color-content: var(--color-text-2);
2736
+ @message-normal-color-border: var(--color-border-2);
2737
+ @message-info-color-bg: var(--color-bg-5);
2738
2738
  @message-info-color-icon: rgb(var(--primary-6));
2739
- @message-info-color-content: #292f42;
2740
- @message-info-color-border: transparent;
2741
- @message-success-color-bg: #ffffff;
2739
+ @message-info-color-content: var(--color-text-2);
2740
+ @message-info-color-border: var(--color-border-2);
2741
+ @message-success-color-bg: var(--color-bg-5);
2742
2742
  @message-success-color-icon: rgb(var(--success-6));
2743
- @message-success-color-content: #292f42;
2744
- @message-success-color-border: transparent;
2745
- @message-warning-color-bg: #ffffff;
2743
+ @message-success-color-content: var(--color-text-2);
2744
+ @message-success-color-border: var(--color-border-2);
2745
+ @message-warning-color-bg: var(--color-bg-5);
2746
2746
  @message-warning-color-icon: rgb(var(--warning-6));
2747
- @message-warning-color-content: #292f42;
2748
- @message-warning-color-border: transparent;
2749
- @message-error-color-bg: #ffffff;
2747
+ @message-warning-color-content: var(--color-text-2);
2748
+ @message-warning-color-border: var(--color-border-2);
2749
+ @message-error-color-bg: var(--color-bg-5);
2750
2750
  @message-error-color-icon: rgb(var(--danger-6));
2751
- @message-error-color-content: #292f42;
2752
- @message-error-color-border: transparent;
2753
- @message-loading-color-bg: #ffffff;
2751
+ @message-error-color-content: var(--color-text-2);
2752
+ @message-error-color-border: var(--color-border-2);
2753
+ @message-loading-color-bg: var(--color-bg-5);
2754
2754
  @message-loading-color-icon: rgb(var(--primary-6));
2755
- @message-loading-color-content: #292f42;
2756
- @message-loading-color-border: transparent;
2755
+ @message-loading-color-content: var(--color-text-2);
2756
+ @message-loading-color-border: var(--color-border-2);
2757
2757
  @message-prefix-cls: ~'@{prefix}-message';
2758
2758
 
2759
2759
 
@@ -2764,11 +2764,11 @@
2764
2764
  @modal-margin-top: 100px;
2765
2765
  @modal-margin-tip-icon-right: 8px;
2766
2766
  @modal-margin-footer-button-left: 8px;
2767
- @modal-color-border: transparent;
2768
- @modal-border-width: 0;
2767
+ @modal-color-border: var(--color-border-2);
2768
+ @modal-border-width: 1px;
2769
2769
  @modal-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
2770
2770
  @modal-color-header-text: var(--color-text-1);
2771
- @modal-color-content-text: #292f42;
2771
+ @modal-color-content-text: var(--color-text-2);
2772
2772
  @modal-font-header-size: 16px;
2773
2773
  @modal-font-header-weight: 500;
2774
2774
  @modal-font-content-size: 14px;
@@ -2821,28 +2821,28 @@
2821
2821
  @notification-normal-color-bg: var(--color-bg-popup);
2822
2822
  @notification-normal-color-icon: #292f42;
2823
2823
  @notification-normal-color-text-title: var(--color-text-1);
2824
- @notification-normal-color-text-content: #292f42;
2825
- @notification-normal-color-border: transparent;
2824
+ @notification-normal-color-text-content: var(--color-text-2);
2825
+ @notification-normal-color-border: var(--color-border-2);
2826
2826
  @notification-info-color-bg: var(--color-bg-popup);
2827
2827
  @notification-info-color-icon: rgb(var(--primary-6));
2828
2828
  @notification-info-color-text-title: var(--color-text-1);
2829
- @notification-info-color-text-content: #292f42;
2830
- @notification-info-color-border: transparent;
2829
+ @notification-info-color-text-content: var(--color-text-2);
2830
+ @notification-info-color-border: var(--color-border-2);
2831
2831
  @notification-success-color-bg: var(--color-bg-popup);
2832
2832
  @notification-success-color-icon: rgb(var(--success-6));
2833
2833
  @notification-success-color-text-title: var(--color-text-1);
2834
- @notification-success-color-text-content: #292f42;
2835
- @notification-success-color-border: transparent;
2834
+ @notification-success-color-text-content: var(--color-text-2);
2835
+ @notification-success-color-border: var(--color-border-2);
2836
2836
  @notification-warning-color-bg: var(--color-bg-popup);
2837
2837
  @notification-warning-color-icon: rgb(var(--warning-6));
2838
2838
  @notification-warning-color-text-title: var(--color-text-1);
2839
- @notification-warning-color-text-content: #292f42;
2840
- @notification-warning-color-border: transparent;
2839
+ @notification-warning-color-text-content: var(--color-text-2);
2840
+ @notification-warning-color-border: var(--color-border-2);
2841
2841
  @notification-error-color-bg: var(--color-bg-popup);
2842
2842
  @notification-error-color-icon: rgb(var(--danger-6));
2843
2843
  @notification-error-color-text-title: var(--color-text-1);
2844
- @notification-error-color-text-content: #292f42;
2845
- @notification-error-color-border: transparent;
2844
+ @notification-error-color-text-content: var(--color-text-2);
2845
+ @notification-error-color-border: var(--color-border-2);
2846
2846
  @notification-prefix-cls: ~'@{prefix}-notification';
2847
2847
 
2848
2848
 
@@ -2859,7 +2859,7 @@
2859
2859
  @page-header-line-height: 28px;
2860
2860
  @page-header-color-title-text: var(--color-text-1);
2861
2861
  @page-header-weight-title-text: 600;
2862
- @page-header-color-back-icon-bg_hover: var(--color-fill-2);
2862
+ @page-header-color-back-icon-bg_hover: transparent;
2863
2863
  @page-header-size-back-icon-bg_hover: 30px;
2864
2864
  @page-header-size-title-text: 20px;
2865
2865
  @page-header-color-divider-bg: var(--color-fill-3);
@@ -2869,7 +2869,7 @@
2869
2869
  @page-header-margin-divider-right: 12px;
2870
2870
  @page-header-color-sub-title-text: var(--color-text-3);
2871
2871
  @page-header-size-sub-title-text: 14px;
2872
- @page-header-color-header-border: var(--color-neutral-3);
2872
+ @page-header-color-header-border: #dfe2eb;
2873
2873
  @page-header-border-header-width: 1px;
2874
2874
  @page-header-border-header-style: solid;
2875
2875
  @page-header-padding-content-vertical: 20px;
@@ -2933,7 +2933,7 @@
2933
2933
  @pagination-simple-margin-separator-left: 12px;
2934
2934
  @pagination-simple-margin-separator-right: 12px;
2935
2935
  @pagination-color-jumper-goto: var(--color-text-2);
2936
- @pagination-color-text-total: #292f42;
2936
+ @pagination-color-text-total: var(--color-text-2);
2937
2937
 
2938
2938
 
2939
2939
  /*********** patination ***********/
@@ -2988,7 +2988,7 @@
2988
2988
  @progress-circle-size-small-icon-size: 16px;
2989
2989
  @progress-circle-size-default-icon-size: 16px;
2990
2990
  @progress-circle-size-large-icon-size: 16px;
2991
- @progress-circle-color-text: #292f42;
2991
+ @progress-circle-color-text: var(--color-text-2);
2992
2992
  @progress-circle-color-mask-stroke: var(--color-fill-3);
2993
2993
  @progress-circle-size-mini-color-mask-stroke: var(--color-primary-light-3);
2994
2994
  @progress-circle-size-mini-color-mask-stroke_success: var(--color-success-light-3);
@@ -3017,18 +3017,18 @@
3017
3017
 
3018
3018
  /*********** radio ***********/
3019
3019
 
3020
- @radio-color-border: #c3c7d4;
3020
+ @radio-color-border: var(--color-border-3);
3021
3021
  @radio-border-width: 1px;
3022
3022
  @radio-layout-height: 14px;
3023
3023
  @radio-color-border_hover: rgb(var(--primary-5));
3024
- @radio-color-border_disabled: #c3c7d4;
3024
+ @radio-color-border_disabled: var(--color-border-3);
3025
3025
  @radio-color-bg: var(--color-bg-2);
3026
3026
  @radio-color-bg_checked: rgb(var(--primary-6));
3027
3027
  @radio-border-radius: var(--border-radius-circle);
3028
3028
  @radio-color-bg_disabled: var(--color-fill-2);
3029
- @radio-color-bg_checked_disabled: #dfe2eb;
3030
- @radio-color-dot-bg_checked_disabled: #9ca3b8;
3031
- @radio-color-text: #292f42;
3029
+ @radio-color-bg_checked_disabled: var(--color-border-2);
3030
+ @radio-color-dot-bg_checked_disabled: var(--color-text-4);
3031
+ @radio-color-text: var(--color-text-2);
3032
3032
  @radio-color-text_disabled: var(--color-text-4);
3033
3033
  @radio-color-text_checked_disabled: var(--color-text-4);
3034
3034
  @radio-font-text-size: 14px;
@@ -3037,7 +3037,7 @@
3037
3037
  @radio-font-text-size_small: 14px;
3038
3038
  @radio-margin-text-left: 8px;
3039
3039
  @radio-size-mask-height: 24px;
3040
- @radio-mask-bg-color-bg: #ffffff;
3040
+ @radio-mask-bg-color-bg: var(--color-bg-2);
3041
3041
  @radio-group-margin-right: 16px;
3042
3042
  @radio-group-button-color-bg: var(--color-fill-2);
3043
3043
  @radio-group-button-color-bg_dark: var(--color-bg-3);
@@ -3048,7 +3048,7 @@
3048
3048
  @radio-button-color-bg_hover: #ffffff;
3049
3049
  @radio-button-color-text_active: rgb(var(--primary-6));
3050
3050
  @radio-button-font-text-weight_active: 500;
3051
- @radio-button-color-text_hover: #292f42;
3051
+ @radio-button-color-text_hover: var(--color-text-2);
3052
3052
  @radio-button-border-radius: 4px;
3053
3053
  @radio-button-bg-border-radius: 4px;
3054
3054
  @radio-button-color-bg: transparent;
@@ -3076,7 +3076,7 @@
3076
3076
  @rate-font-size: 24px;
3077
3077
  @rate-scale_active: 1.2;
3078
3078
  @rate-color-bg_active: rgb(var(--badge-7));
3079
- @rate-color-bg_default: #ebeef5;
3079
+ @rate-color-bg_default: var(--color-fill-3);
3080
3080
  @rate-color-bg_hover: rgb(var(--gold-5));
3081
3081
  @rate-prefix-cls: ~'@{prefix}-rate';
3082
3082
 
@@ -3088,10 +3088,10 @@
3088
3088
 
3089
3089
  /*********** resizeBox ***********/
3090
3090
 
3091
- @resizeBox-trigger-color-background: #ebeef5;
3091
+ @resizeBox-trigger-color-background: var(--color-fill-3);
3092
3092
  @resizeBox-trigger-size-icon-wrapper: 6px;
3093
3093
  @resizeBox-trigger-font-size-icon: 12px;
3094
- @resizeBox-trigger-color-icon: #292f42;
3094
+ @resizeBox-trigger-color-icon: var(--color-text-2);
3095
3095
  @resizeBox-trigger-icon-empty: 18px;
3096
3096
 
3097
3097
 
@@ -3116,7 +3116,7 @@
3116
3116
  @result-font-title-weight: 500;
3117
3117
  @result-font-subtitle-size: 14px;
3118
3118
  @result-color-title-text: var(--color-text-1);
3119
- @result-color-subtitle-text: #646c85;
3119
+ @result-color-subtitle-text: var(--color-text-3);
3120
3120
  @result-size-icon: 20px;
3121
3121
  @result-size-icon-wrapper: 48px;
3122
3122
  @result-size-image-width: 92px;
@@ -3152,13 +3152,13 @@
3152
3152
 
3153
3153
  @slider-size-road-width: 2px;
3154
3154
  @slider-color-road-bg: var(--color-fill-3);
3155
- @slider-color-road-bg_disabled: #f5f7fc;
3155
+ @slider-color-road-bg_disabled: var(--color-fill-2);
3156
3156
  @slider-color-bar-bg: rgb(var(--primary-6));
3157
- @slider-color-bar-bg_disabled: #ebeef5;
3157
+ @slider-color-bar-bg_disabled: var(--color-fill-3);
3158
3158
  @slider-color-button-bg: var(--color-bg-2);
3159
3159
  @slider-border-size-button: 2px;
3160
3160
  @slider-color-button-border: rgb(var(--primary-6));
3161
- @slider-color-button-border_disabled: #ebeef5;
3161
+ @slider-color-button-border_disabled: var(--color-fill-3);
3162
3162
  @slider-shadow-button_active: 0 2px 5px rgba(0, 0, 0, 0.1);
3163
3163
  @slider-color-box-shadow-button_focus: var(--color-primary-light-3);
3164
3164
  @slider-size-button-width: 12px;
@@ -3171,7 +3171,7 @@
3171
3171
  @slider-spacing-padding_width-mark: 20px;
3172
3172
  @slider-spacing-padding_width-mark_vertical: 20px;
3173
3173
  @slider-font-size-mark: 14px;
3174
- @slider-color-mark-font: #292f42;
3174
+ @slider-color-mark-font: var(--color-text-2);
3175
3175
  @slider-size-tick-width: 1px;
3176
3176
  @slider-size-tick-height: 3px;
3177
3177
  @slider-spacing-input-margin-left: 20px;
@@ -3250,7 +3250,7 @@
3250
3250
  @steps-circle-vertical-item-description-margin-top: 2px;
3251
3251
  @steps-circle-vertical-spacing-tail-top: 6px;
3252
3252
  @steps-circle-vertical-spacing-tail-bottom: 6px;
3253
- @steps-circle-color-item-bg_wait: #f5f7fc;
3253
+ @steps-circle-color-item-bg_wait: var(--color-fill-2);
3254
3254
  @steps-circle-color-item-border_wait: transparent;
3255
3255
  @steps-circle-color-item-icon-text_wait: var(--color-text-2);
3256
3256
  @steps-circle-color-item-tail_wait: #dfe2eb;
@@ -3260,18 +3260,18 @@
3260
3260
  @steps-circle-color-item-border_process: transparent;
3261
3261
  @steps-circle-color-item-icon-text_process: var(--color-white);
3262
3262
  @steps-circle-color-item-tail_process: rgb(var(--primary-6));
3263
- @steps-circle-color-item-title_process: #292f42;
3263
+ @steps-circle-color-item-title_process: var(--color-text-2);
3264
3264
  @steps-circle-color-item-description_process: var(--color-text-3);
3265
3265
  @steps-circle-color-item-bg_finish: var(--color-primary-light-1);
3266
3266
  @steps-circle-color-item-border_finish: transparent;
3267
3267
  @steps-circle-color-item-icon-text_finish: rgb(var(--primary-6));
3268
- @steps-circle-color-item-title_finish: #292f42;
3268
+ @steps-circle-color-item-title_finish: var(--color-text-2);
3269
3269
  @steps-circle-color-item-description_finish: var(--color-text-3);
3270
3270
  @steps-circle-color-item-bg_error: rgb(var(--danger-6));
3271
3271
  @steps-circle-color-item-border_error: transparent;
3272
3272
  @steps-circle-color-item-icon-text_error: var(--color-white);
3273
3273
  @steps-circle-color-item-tail_error: rgb(var(--danger-6));
3274
- @steps-circle-color-item-title_error: #292f42;
3274
+ @steps-circle-color-item-title_error: var(--color-text-2);
3275
3275
  @steps-circle-color-item-description_error: var(--color-text-3);
3276
3276
  @steps-dot-horizontal-item-title-margin-top: 4px;
3277
3277
  @steps-dot-horizontal-item-description-margin-top: 4px;
@@ -3294,16 +3294,16 @@
3294
3294
  @steps-dot-color-item-bg_process: rgb(var(--primary-6));
3295
3295
  @steps-dot-color-item-border_process: rgb(var(--primary-6));
3296
3296
  @steps-dot-color-item-tail_process: rgb(var(--primary-6));
3297
- @steps-dot-color-item-title_process: #292f42;
3297
+ @steps-dot-color-item-title_process: var(--color-text-2);
3298
3298
  @steps-dot-color-item-description_process: var(--color-text-3);
3299
3299
  @steps-dot-color-item-bg_finish: rgb(var(--primary-6));
3300
3300
  @steps-dot-color-item-border_finish: rgb(var(--primary-6));
3301
- @steps-dot-color-item-title_finish: #292f42;
3301
+ @steps-dot-color-item-title_finish: var(--color-text-2);
3302
3302
  @steps-dot-color-item-description_finish: var(--color-text-3);
3303
3303
  @steps-dot-color-item-bg_error: rgb(var(--danger-6));
3304
3304
  @steps-dot-color-item-border_error: rgb(var(--danger-6));
3305
3305
  @steps-dot-color-item-tail_error: rgb(var(--danger-6));
3306
- @steps-dot-color-item-title_error: #292f42;
3306
+ @steps-dot-color-item-title_error: var(--color-text-2);
3307
3307
  @steps-dot-color-item-description_error: var(--color-text-3);
3308
3308
  @steps-arrow-size-item-gap: 4px;
3309
3309
  @steps-arrow-size-default-title-padding-left: 16px;
@@ -3361,17 +3361,17 @@
3361
3361
  @switch-color-bg_off_disabled: var(--color-fill-2);
3362
3362
  @switch-color-bg_on_loading: var(--color-primary-light-3);
3363
3363
  @switch-color-bg_off_loading: var(--color-fill-2);
3364
- @switch-color-dot-bg: var(--color-bg-white);
3364
+ @switch-color-dot-bg: var(--color-white);
3365
3365
  @switch-color-text_on: var(--color-white);
3366
3366
  @switch-color-text_off: var(--color-white);
3367
3367
  @switch-color-text_on_disabled: var(--color-white);
3368
- @switch-color-text_off_disabled: #9ca3b8;
3368
+ @switch-color-text_off_disabled: var(--color-text-4);
3369
3369
  @switch-color-text_on_loading: var(--color-primary-light-1);
3370
3370
  @switch-color-text_off_loading: var(--color-white);
3371
3371
  @switch-color-dot-icon_on: rgb(var(--primary-6));
3372
- @switch-color-dot-icon_off: #9ca3b8;
3373
- @switch-color-dot-icon_on_disabled: #9ca3b8;
3374
- @switch-color-dot-icon_off_disabled: #9ca3b8;
3372
+ @switch-color-dot-icon_off: var(--color-text-4);
3373
+ @switch-color-dot-icon_on_disabled: var(--color-text-4);
3374
+ @switch-color-dot-icon_off_disabled: var(--color-text-4);
3375
3375
  @switch-color-dot-icon_on_loading: var(--color-primary-light-3);
3376
3376
  @switch-color-dot-icon_off_loading: var(--color-neutral-3);
3377
3377
  @switch-color-box-shadow_checked: var(--color-primary-light-3);
@@ -3408,27 +3408,27 @@
3408
3408
  @table-spacing-expand-button-margin-right: 12px;
3409
3409
  @table-font-size-expand-button: 12px;
3410
3410
  @table-border-radius-expand-button: 2px;
3411
- @table-color-border: #dfe2eb;
3411
+ @table-color-border: var(--color-border-2);
3412
3412
  @table-border-radius: var(--border-radius-medium);
3413
- @table-color-text-header-cell: #0f131f;
3414
- @table-color-bg-header-cell: #ffffff;
3415
- @table-color-bg-header-sorted-cell: #ffffff;
3416
- @table-color-bg-header-sorted-cell_hover: #ffffff;
3413
+ @table-color-text-header-cell: var(--color-text-2);
3414
+ @table-color-bg-header-cell: var(--color-bg-2);
3415
+ @table-color-bg-header-sorted-cell: var(--color-bg-2);
3416
+ @table-color-bg-header-sorted-cell_hover: transparent;
3417
3417
  @table-color-header-filters-icon: var(--color-text-2);
3418
3418
  @table-color-header-filters-icon_active: rgb(var(--primary-6));
3419
3419
  @table-color-bg-header-filters-icon_hover: transparent;
3420
3420
  @table-font-size-filters-icon: 16px;
3421
3421
  @table-size-filters-width: 24px;
3422
- @table-font-weight-header-text: 500;
3423
- @table-color-text-body-cell: #292f42;
3422
+ @table-font-weight-header-text: 600;
3423
+ @table-color-text-body-cell: var(--color-text-2);
3424
3424
  @table-color-bg-body-cell: var(--color-bg-2);
3425
- @table-color-bg-body-sorted-cell: #ffffff;
3425
+ @table-color-bg-body-sorted-cell: var(--color-bg-2);
3426
3426
  @table-color-bg-body-stripe-row: var(--color-fill-1);
3427
3427
  @table-color-bg-body-stripe-row_dark: var(--color-bg-3);
3428
3428
  @table-color-bg-body-row_hover: rgb(var(--primary-1));
3429
3429
  @table-color-bg-body-row_active: rgb(var(--primary-1));
3430
- @table-color-expand-icon: #292f42;
3431
- @table-color-expand-icon-border: #292f42;
3430
+ @table-color-expand-icon: var(--color-text-2);
3431
+ @table-color-expand-icon-border: var(--color-text-2);
3432
3432
  @table-color-expand-icon-border_hover: rgb(var(--primary-5));
3433
3433
  @table-color-expand-icon_hover: rgb(var(--primary-5));
3434
3434
  @table-color-bg-expand-icon: transparent;
@@ -3437,7 +3437,7 @@
3437
3437
  @table-color-bg-expand-content_hover: rgb(var(--primary-1));
3438
3438
  @table-border-expand-icon-width: 1px;
3439
3439
  @table-spacing-header-sorter-icon-margin-left: 8px;
3440
- @table-color-header-sorter-icon: #292f42;
3440
+ @table-color-header-sorter-icon: var(--color-text-2);
3441
3441
  @table-color-header-sorter-icon_next: var(--color-neutral-6);
3442
3442
  @table-color-header-sorter-icon_active: rgb(var(--primary-6));
3443
3443
  @table-size-header-sorter-icon-height: 8px;
@@ -3505,24 +3505,24 @@
3505
3505
  @tabs-color-title-text_active: rgb(var(--primary-6));
3506
3506
  @tabs-color-title-text_hover: rgb(var(--primary-5));
3507
3507
  @tabs-color-title-text_disabled: var(--color-text-4);
3508
- @tabs-color-title-text_disabled_active: #9ca3b8;
3508
+ @tabs-color-title-text_disabled_active: var(--color-text-4);
3509
3509
  @tabs-line-size-header-border: 1px;
3510
- @tabs-line-color-header-border: #dfe2eb;
3510
+ @tabs-line-color-header-border: var(--color-border-2);
3511
3511
  @tabs-line-size-ink-stroke: 2px;
3512
3512
  @tabs-line-color-ink-bg: rgb(var(--primary-6));
3513
- @tabs-line-color-ink-bg_disabled: #9ca3b8;
3513
+ @tabs-line-color-ink-bg_disabled: var(--color-text-4);
3514
3514
  @tabs-line-font-title-text-weight_active: 600;
3515
3515
  @tabs-line-margin-title-horizontal: 32px;
3516
3516
  @tabs-line-margin-title-horizontal_first: 16px;
3517
3517
  @tabs-line-margin-title-vertical: 12px;
3518
- @tabs-line-padding-title-horizontal_vertical: 16px;
3518
+ @tabs-line-padding-title-horizontal_vertical: 20px;
3519
3519
  @tabs-line-color-title-bg: transparent;
3520
3520
  @tabs-line-color-title-bg_active: transparent;
3521
3521
  @tabs-line-color-title-bg_hover: transparent;
3522
3522
  @tabs-line-font-title-text-weight_hover: 400;
3523
3523
  @tabs-line-border-radius: var(--border-radius-small);
3524
3524
  @tabs-card-border-width: 1px;
3525
- @tabs-card-color-title-border: #dfe2eb;
3525
+ @tabs-card-color-title-border: var(--color-border-2);
3526
3526
  @tabs-card-padding-title-horizontal: 16px;
3527
3527
  @tabs-card-padding-title-right_editable: 12px;
3528
3528
  @tabs-card-border-radius: 2px;
@@ -3532,26 +3532,26 @@
3532
3532
  @tabs-card-color-title-bg_active: transparent;
3533
3533
  @tabs-card-border-content-width: 1px;
3534
3534
  @tabs-card-gutter-spacing-horizontal: 4px;
3535
- @tabs-card-gutter-color-title-bg: #fafbff;
3535
+ @tabs-card-gutter-color-title-bg: var(--color-fill-1);
3536
3536
  @tabs-card-gutter-color-title-bg_hover: transparent;
3537
3537
  @tabs-card-gutter-color-title-bg_active: transparent;
3538
- @tabs-card-gutter-color-title-bg_disabled: #fafbff;
3538
+ @tabs-card-gutter-color-title-bg_disabled: var(--color-fill-1);
3539
3539
  @tabs-text-size-separator-height: 12px;
3540
3540
  @tabs-text-size-separator-width: 2px;
3541
- @tabs-text-color-separator-bg: #dfe2eb;
3541
+ @tabs-text-color-separator-bg: var(--color-border-2);
3542
3542
  @tabs-text-margin-title-horizontal: 8px;
3543
3543
  @tabs-text-color-title-bg: transparent;
3544
3544
  @tabs-text-color-title-bg_active: transparent;
3545
3545
  @tabs-text-color-title-bg_disabled: transparent;
3546
3546
  @tabs-text-color-title-bg_disabled_active: transparent;
3547
- @tabs-text-color-title-bg_hover: rgb(var(--primary-1));
3547
+ @tabs-text-color-title-bg_hover: transparent;
3548
3548
  @tabs-rounded-padding-title-horizontal: 16px;
3549
3549
  @tabs-rounded-margin-title-horizontal: 12px;
3550
3550
  @tabs-rounded-color-title-bg: transparent;
3551
3551
  @tabs-rounded-color-title-bg_active: rgb(var(--primary-1));
3552
3552
  @tabs-rounded-color-title-bg_disabled: transparent;
3553
3553
  @tabs-rounded-color-title-bg_hover: rgb(var(--primary-1));
3554
- @tabs-capsule-color-header-bg: #f5f7fc;
3554
+ @tabs-capsule-color-header-bg: var(--color-fill-2);
3555
3555
  @tabs-capsule-margin-title-horizontal: 0;
3556
3556
  @tabs-capsule-padding-title-horizontal: 12px;
3557
3557
  @tabs-capsule-padding-header-vertical: 3px;
@@ -3603,63 +3603,63 @@
3603
3603
  @tag-size-default-font-size: 14px;
3604
3604
  @tag-size-medium-font-size: 14px;
3605
3605
  @tag-size-large-font-size: 14px;
3606
- @tag-color-bg-not-checked_hover: var(--color-fill-2);
3606
+ @tag-color-bg-not-checked_hover: rgb(var(--primary-1));
3607
3607
  @tag-custom-color-text: var(--color-white);
3608
3608
  @tag-custom-color-icon-bg_hover: rgba(255, 255, 255, 0.2);
3609
3609
  @tag-default-color-bg: var(--color-fill-2);
3610
- @tag-default-color-bg_hover: var(--color-fill-3);
3610
+ @tag-default-color-bg_hover: #f5f7fc;
3611
3611
  @tag-default-color-icon: var(--color-text-2);
3612
- @tag-default-color-text: #292f42;
3612
+ @tag-default-color-text: var(--color-text-2);
3613
3613
  @tag-default-color-border: transparent;
3614
3614
  @tag-default-bordered-color-border: var(--color-border-2);
3615
3615
  @tag-default-color-border_hover: transparent;
3616
3616
  @tag-red-color-bg: rgb(var(--danger-1));
3617
- @tag-red-color-bg_hover: rgb(var(--red-2));
3617
+ @tag-red-color-bg_hover: rgb(var(--danger-1));
3618
3618
  @tag-red-color-border: transparent;
3619
3619
  @tag-red-bordered-color-border: rgb(var(--danger-6));
3620
3620
  @tag-red-color-border_hover: transparent;
3621
3621
  @tag-red-color-icon: rgb(var(--danger-6));
3622
- @tag-red-color-icon-bg_hover: rgb(var(--red-2));
3622
+ @tag-red-color-icon-bg_hover: transparent;
3623
3623
  @tag-red-color-text: rgb(var(--danger-6));
3624
3624
  @tag-orangered-color-bg: rgb(var(--tag-5));
3625
- @tag-orangered-color-bg_hover: rgb(var(--orangered-2));
3625
+ @tag-orangered-color-bg_hover: rgb(var(--tag-5));
3626
3626
  @tag-orangered-color-border: transparent;
3627
3627
  @tag-orangered-bordered-color-border: rgb(var(--badge-5));
3628
3628
  @tag-orangered-color-border_hover: transparent;
3629
3629
  @tag-orangered-color-icon: rgb(var(--badge-5));
3630
- @tag-orangered-color-icon-bg_hover: rgb(var(--orangered-2));
3630
+ @tag-orangered-color-icon-bg_hover: transparent;
3631
3631
  @tag-orangered-color-text: rgb(var(--badge-5));
3632
3632
  @tag-orange-color-bg: rgb(var(--warning-1));
3633
- @tag-orange-color-bg_hover: rgb(var(--orange-2));
3633
+ @tag-orange-color-bg_hover: rgb(var(--warning-1));
3634
3634
  @tag-orange-color-border: transparent;
3635
3635
  @tag-orange-bordered-color-border: rgb(var(--warning-6));
3636
3636
  @tag-orange-color-border_hover: transparent;
3637
3637
  @tag-orange-color-icon: rgb(var(--warning-6));
3638
- @tag-orange-color-icon-bg_hover: rgb(var(--orange-2));
3638
+ @tag-orange-color-icon-bg_hover: transparent;
3639
3639
  @tag-orange-color-text: rgb(var(--warning-6));
3640
3640
  @tag-gold-color-bg: rgb(var(--tag-7));
3641
- @tag-gold-color-bg_hover: rgb(var(--gold-3));
3641
+ @tag-gold-color-bg_hover: rgb(var(--tag-7));
3642
3642
  @tag-gold-color-border: transparent;
3643
3643
  @tag-gold-bordered-color-border: rgb(var(--badge-7));
3644
3644
  @tag-gold-color-border_hover: transparent;
3645
3645
  @tag-gold-color-icon: rgb(var(--badge-7));
3646
- @tag-gold-color-icon-bg_hover: rgb(var(--gold-2));
3646
+ @tag-gold-color-icon-bg_hover: transparent;
3647
3647
  @tag-gold-color-text: rgb(var(--badge-7));
3648
3648
  @tag-lime-color-bg: rgb(var(--tag-4));
3649
- @tag-lime-color-bg_hover: rgb(var(--lime-2));
3649
+ @tag-lime-color-bg_hover: rgb(var(--tag-4));
3650
3650
  @tag-lime-color-border: transparent;
3651
3651
  @tag-lime-bordered-color-border: rgb(var(--badge-4));
3652
3652
  @tag-lime-color-border_hover: transparent;
3653
3653
  @tag-lime-color-icon: rgb(var(--badge-4));
3654
- @tag-lime-color-icon-bg_hover: rgb(var(--lime-2));
3654
+ @tag-lime-color-icon-bg_hover: transparent;
3655
3655
  @tag-lime-color-text: rgb(var(--badge-4));
3656
3656
  @tag-green-color-bg: rgb(var(--success-1));
3657
- @tag-green-color-bg_hover: rgb(var(--green-2));
3657
+ @tag-green-color-bg_hover: rgb(var(--success-1));
3658
3658
  @tag-green-color-border: transparent;
3659
3659
  @tag-green-bordered-color-border: rgb(var(--success-6));
3660
3660
  @tag-green-color-border_hover: transparent;
3661
3661
  @tag-green-color-icon: rgb(var(--success-6));
3662
- @tag-green-color-icon-bg_hover: rgb(var(--green-2));
3662
+ @tag-green-color-icon-bg_hover: transparent;
3663
3663
  @tag-green-color-text: rgb(var(--success-6));
3664
3664
  @tag-cyan-color-bg: rgb(var(--cyan-1));
3665
3665
  @tag-cyan-color-bg_hover: rgb(var(--cyan-2));
@@ -3667,26 +3667,26 @@
3667
3667
  @tag-cyan-bordered-color-border: rgb(var(--cyan-6));
3668
3668
  @tag-cyan-color-border_hover: transparent;
3669
3669
  @tag-cyan-color-icon: rgb(var(--cyan-6));
3670
- @tag-cyan-color-icon-bg_hover: rgb(var(--cyan-2));
3670
+ @tag-cyan-color-icon-bg_hover: transparent;
3671
3671
  @tag-cyan-color-text: rgb(var(--cyan-6));
3672
3672
  @tag-blue-color-bg: rgb(var(--tag-3));
3673
- @tag-blue-color-bg_hover: rgb(var(--blue-2));
3673
+ @tag-blue-color-bg_hover: rgb(var(--tag-3));
3674
3674
  @tag-blue-color-border: transparent;
3675
3675
  @tag-blue-bordered-color-border: rgb(var(--badge-3));
3676
3676
  @tag-blue-color-border_hover: transparent;
3677
3677
  @tag-blue-color-icon: rgb(var(--badge-3));
3678
- @tag-blue-color-icon-bg_hover: rgb(var(--blue-2));
3678
+ @tag-blue-color-icon-bg_hover: transparent;
3679
3679
  @tag-blue-color-text: rgb(var(--badge-3));
3680
3680
  @tag-arcoblue-color-bg: rgb(var(--primary-1));
3681
- @tag-arcoblue-color-bg_hover: rgb(var(--arcoblue-2));
3681
+ @tag-arcoblue-color-bg_hover: rgb(var(--primary-1));
3682
3682
  @tag-arcoblue-color-border: transparent;
3683
- @tag-arcoblue-bordered-color-border: rgb(var(--arcoblue-6));
3683
+ @tag-arcoblue-bordered-color-border: rgb(var(--primary-6));
3684
3684
  @tag-arcoblue-color-border_hover: transparent;
3685
3685
  @tag-arcoblue-color-icon: rgb(var(--primary-6));
3686
3686
  @tag-arcoblue-color-icon-bg_hover: rgb(var(--arcoblue-2));
3687
3687
  @tag-arcoblue-color-text: rgb(var(--primary-6));
3688
3688
  @tag-purple-color-bg: rgb(var(--tag-6));
3689
- @tag-purple-color-bg_hover: rgb(var(--purple-2));
3689
+ @tag-purple-color-bg_hover: rgb(var(--tag-6));
3690
3690
  @tag-purple-color-border: transparent;
3691
3691
  @tag-purple-bordered-color-border: rgb(var(--badge-6));
3692
3692
  @tag-purple-color-border_hover: transparent;
@@ -3694,7 +3694,7 @@
3694
3694
  @tag-purple-color-icon-bg_hover: rgb(var(--purple-2));
3695
3695
  @tag-purple-color-text: rgb(var(--badge-6));
3696
3696
  @tag-pinkpurple-color-bg: rgb(var(--tag-1));
3697
- @tag-pinkpurple-color-bg_hover: rgb(var(--pinkpurple-2));
3697
+ @tag-pinkpurple-color-bg_hover: rgb(var(--tag-1));
3698
3698
  @tag-pinkpurple-color-border: transparent;
3699
3699
  @tag-pinkpurple-bordered-color-border: rgb(var(--badge-1));
3700
3700
  @tag-pinkpurple-color-border_hover: transparent;
@@ -3702,20 +3702,20 @@
3702
3702
  @tag-pinkpurple-color-icon-bg_hover: rgb(var(--pinkpurple-2));
3703
3703
  @tag-pinkpurple-color-text: rgb(var(--badge-1));
3704
3704
  @tag-magenta-color-bg: rgb(var(--tag-2));
3705
- @tag-magenta-color-bg_hover: rgb(var(--magenta-2));
3705
+ @tag-magenta-color-bg_hover: rgb(var(--tag-2));
3706
3706
  @tag-magenta-color-border: transparent;
3707
3707
  @tag-magenta-bordered-color-border: rgb(var(--badge-2));
3708
3708
  @tag-magenta-color-border_hover: transparent;
3709
3709
  @tag-magenta-color-icon: rgb(var(--badge-2));
3710
- @tag-magenta-color-icon-bg_hover: rgb(var(--magenta-2));
3710
+ @tag-magenta-color-icon-bg_hover: transparent;
3711
3711
  @tag-magenta-color-text: rgb(var(--badge-2));
3712
3712
  @tag-gray-color-bg: #f5f7fc;
3713
- @tag-gray-color-bg_hover: rgb(var(--gray-3));
3713
+ @tag-gray-color-bg_hover: #f5f7fc;
3714
3714
  @tag-gray-color-border: transparent;
3715
- @tag-gray-bordered-color-border: #dfe2eb;
3715
+ @tag-gray-bordered-color-border: var(--color-border-2);
3716
3716
  @tag-gray-color-border_hover: transparent;
3717
3717
  @tag-gray-color-icon: #292f42;
3718
- @tag-gray-color-icon-bg_hover: rgb(var(--gray-3));
3718
+ @tag-gray-color-icon-bg_hover: transparent;
3719
3719
  @tag-gray-color-text: #292f42;
3720
3720
  @tag-prefix-cls: ~'@{prefix}-tag';
3721
3721
  @tag-8: rgb(var(--arcoblue-8));
@@ -3737,10 +3737,10 @@
3737
3737
 
3738
3738
  /*********** timeline ***********/
3739
3739
 
3740
- @timeline-color-content-text: #292f42;
3740
+ @timeline-color-content-text: var(--color-text-2);
3741
3741
  @timeline-color-label-text: var(--color-text-3);
3742
3742
  @timeline-color-dot-bg: rgb(var(--primary-6));
3743
- @timeline-color-line-bg: #dfe2eb;
3743
+ @timeline-color-line-bg: var(--color-border-2);
3744
3744
  @timeline-font-content-size: 14px;
3745
3745
  @timeline-font-label-size: 12px;
3746
3746
  @timeline-item-min-height: 78px;
@@ -3769,8 +3769,8 @@
3769
3769
  @tooltip-mini-font-size: 14px;
3770
3770
  @tooltip-font-size: 14px;
3771
3771
  @tooltip-border-radius: 4px;
3772
- @tooltip-color-text: #292f42;
3773
- @tooltip-color-bg: #ffffff;
3772
+ @tooltip-color-text: var(--color-text-2);
3773
+ @tooltip-color-bg: var(--color-bg-5);
3774
3774
  @tooltip-prefix-cls: ~'@{prefix}-tooltip';
3775
3775
 
3776
3776
 
@@ -3781,7 +3781,7 @@
3781
3781
  @transfer-height-title: 40px;
3782
3782
  @transfer-height-footer: 40px;
3783
3783
  @transfer-padding-horizontal-footer: 16px;
3784
- @transfer-border-color: #dfe2eb;
3784
+ @transfer-border-color: var(--color-border-2);
3785
3785
  @transfer-border-width: 1px;
3786
3786
  @transfer-border-radius: 4px;
3787
3787
  @transfer-font-size-header: 14px;
@@ -3791,8 +3791,8 @@
3791
3791
  @transfer-color-text-header: var(--color-text-1);
3792
3792
  @transfer-color-text-header-unit: var(--color-text-3);
3793
3793
  @transfer-color-icon: var(--color-text-2);
3794
- @transfer-color-bg-icon: #ffffff;
3795
- @transfer-color-bg-header: #f5f7fc;
3794
+ @transfer-color-bg-icon: var(--color-bg-white);
3795
+ @transfer-color-bg-header: var(--color-fill-2);
3796
3796
  @transfer-search-padding-left: 8px;
3797
3797
  @transfer-search-padding-right: 8px;
3798
3798
  @transfer-search-padding-top: 12px;
@@ -3800,7 +3800,7 @@
3800
3800
  @transfer-item-color-bg_default: transparent;
3801
3801
  @transfer-item-color-bg_hover: rgb(var(--primary-1));
3802
3802
  @transfer-item-color-bg_disabled: transparent;
3803
- @transfer-item-color_default: #292f42;
3803
+ @transfer-item-color_default: var(--color-text-2);
3804
3804
  @transfer-item-color_hover: #292f42;
3805
3805
  @transfer-item-color_disabled: var(--color-text-4);
3806
3806
  @transfer-item-height: 36px;
@@ -3821,14 +3821,14 @@
3821
3821
 
3822
3822
  /*********** tree ***********/
3823
3823
 
3824
- @tree-color-title-text: #292f42;
3825
- @tree-color-title-text_hover: #292f42;
3824
+ @tree-color-title-text: var(--color-text-2);
3825
+ @tree-color-title-text_hover: var(--color-text-2);
3826
3826
  @tree-color-title-text_active: rgb(var(--primary-6));
3827
3827
  @tree-color-title-text_disabled: var(--color-text-4);
3828
- @tree-color-title-text_active_disabled: #9ca3b8;
3828
+ @tree-color-title-text_active_disabled: var(--color-text-4);
3829
3829
  @tree-color-title-bg_hover: rgb(var(--primary-1));
3830
- @tree-color-title-bg_highlight: var(--color-primary-light-1);
3831
- @tree-color-title-text_highlight: #292f42;
3830
+ @tree-color-title-bg_highlight: rgb(var(--primary-1));
3831
+ @tree-color-title-text_highlight: var(--color-text-2);
3832
3832
  @tree-color-title-bg_dragging: var(--color-fill-1);
3833
3833
  @tree-color-title-text_dragging: var(--color-text-4);
3834
3834
  @tree-color-loading-icon: rgb(var(--primary-6));
@@ -3843,7 +3843,7 @@
3843
3843
  @tree-spacing-drag-icon-text: 120px;
3844
3844
  @tree-draggable-color-gap-bg: rgb(var(--primary-6));
3845
3845
  @tree-draggable-size-gap-height: 2px;
3846
- @tree-showline-color-line-bg: #dfe2eb;
3846
+ @tree-showline-color-line-bg: var(--color-border-2);
3847
3847
  @tree-showline-color-plus-icon-bg: transparent;
3848
3848
  @tree-showline-color-plus-icon-border: transparent;
3849
3849
  @tree-showline-plus-icon-border-width: 1px;
@@ -3895,7 +3895,7 @@
3895
3895
  @typography-heading-margin-top: 1em;
3896
3896
  @typography-heading-margin-bottom: 0.5em;
3897
3897
  @typography-heading-font-weight: 500;
3898
- @typography-color-text: #292f42;
3898
+ @typography-color-text: var(--color-text-2);
3899
3899
  @typography-text-color-text-primary: rgb(var(--primary-6));
3900
3900
  @typography-text-color-text-secondary: var(--color-text-2);
3901
3901
  @typography-text-color-text-success: rgb(var(--success-6));
@@ -3925,7 +3925,7 @@
3925
3925
  @typography-color-expand-text: rgb(var(--primary-6));
3926
3926
  @typography-color-expand-text_hover: rgb(var(--primary-5));
3927
3927
  @typography-color-blockquote-border-width: 2px;
3928
- @typography-color-blockquote-border-left: #9ca3b8;
3928
+ @typography-color-blockquote-border-left: var(--color-text-4);
3929
3929
  @typography-color-blockquote-bg: var(--color-bg-2);
3930
3930
  @typography-color-box-shadow: var(--color-primary-light-3);
3931
3931
  @typography-prefix-cls: ~'@{prefix}-typography';
@@ -3945,16 +3945,16 @@
3945
3945
  @upload-tip-font-size: 12px;
3946
3946
  @upload-list-margin-top: 24px;
3947
3947
  @upload-picture-item-width: 80px;
3948
- @upload-picture-color-bg: #ffffff;
3948
+ @upload-picture-color-bg: var(--color-bg-2);
3949
3949
  @upload-picture-border-radius: 4px;
3950
3950
  @upload-picture-border-width: 1px;
3951
3951
  @upload-picture-border-style: dashed;
3952
- @upload-picture-color-border: #c3c7d4;
3953
- @upload-picture-color-border_disabled: #c3c7d4;
3952
+ @upload-picture-color-border: var(--color-border-3);
3953
+ @upload-picture-color-border_disabled: var(--color-border-3);
3954
3954
  @upload-picture-color-border_hover: rgb(var(--primary-5));
3955
- @upload-picture-color-bg_hover: #ffffff;
3956
- @upload-picture-color-bg_disabled: #f5f7fc;
3957
- @upload-picture-color-text: #292f42;
3955
+ @upload-picture-color-bg_hover: var(--color-bg-2);
3956
+ @upload-picture-color-bg_disabled: var(--color-fill-2);
3957
+ @upload-picture-color-text: var(--color-text-2);
3958
3958
  @upload-picture-color-text_hover: rgb(var(--primary-5));
3959
3959
  @upload-picture-color-text_disabled: var(--color-text-4);
3960
3960
  @upload-drag-font-size: 14px;
@@ -3965,14 +3965,14 @@
3965
3965
  @upload-drag-border-width: 1px;
3966
3966
  @upload-drag-padding-vertical: 50px;
3967
3967
  @upload-drag-margin-icon-bottom: 24px;
3968
- @upload-drag-color-bg: #ffffff;
3969
- @upload-drag-color-bg_hover: #ffffff;
3968
+ @upload-drag-color-bg: var(--color-bg-2);
3969
+ @upload-drag-color-bg_hover: var(--color-bg-2);
3970
3970
  @upload-drag-color-bg_active: var(--color-primary-light-1);
3971
- @upload-drag-color-bg_disabled: #f5f7fc;
3972
- @upload-drag-color-border: #c3c7d4;
3971
+ @upload-drag-color-bg_disabled: var(--color-fill-2);
3972
+ @upload-drag-color-border: var(--color-border-3);
3973
3973
  @upload-drag-color-border_active: rgb(var(--primary-6));
3974
3974
  @upload-drag-color-border_hover: rgb(var(--primary-5));
3975
- @upload-drag-color-border_disabled: #c3c7d4;
3975
+ @upload-drag-color-border_disabled: var(--color-border-3);
3976
3976
  @upload-drag-color-icon: var(--color-text-2);
3977
3977
  @upload-drag-color-icon_hover: rgb(var(--primary-5));
3978
3978
  @upload-drag-color-icon_active: rgb(var(--primary-6));
@@ -3982,22 +3982,22 @@
3982
3982
  @upload-text-item-size-operation-icon: 16px;
3983
3983
  @upload-text-item-margin-top: 12px;
3984
3984
  @upload-text-item-font-size: 14px;
3985
- @upload-text-item-color-text: #292f42;
3985
+ @upload-text-item-color-text: var(--color-text-2);
3986
3986
  @upload-text-item-padding-left: 12px;
3987
- @upload-text-item-color-bg: #f5f7fc;
3987
+ @upload-text-item-color-bg: var(--color-fill-2);
3988
3988
  @upload-text-item-padding-vertical: 7PX;
3989
3989
  @upload-text-item-margin-remove-icon-left: 12px;
3990
3990
  @upload-text-item-color-remove-icon: var(--color-text-2);
3991
3991
  @upload-text-item-color-status-icon: var(--color-white);
3992
- @upload-text-item-color-file-icon_success: #292f42;
3992
+ @upload-text-item-color-file-icon_success: var(--color-text-2);
3993
3993
  @upload-text-item-color-progress-bg_hover: rgba(var(--gray-10), 0.2);
3994
3994
  @upload-text-item-color-progress-bg_hover_active: rgb(var(--primary-6));
3995
3995
  @upload-text-item-size-file-icon: 16px;
3996
3996
  @upload-text-item-margin-file-icon-right: 12px;
3997
- @upload-text-item-color-file-icon: #292f42;
3997
+ @upload-text-item-color-file-icon: var(--color-text-2);
3998
3998
  @upload-text-item-padding-right: 12px;
3999
3999
  @upload-text-item-color-link: rgb(var(--link-6));
4000
- @upload-text-item-color-reupload-icon: #292f42;
4000
+ @upload-text-item-color-reupload-icon: var(--color-text-2);
4001
4001
  @upload-text-item-color-reupload-icon_hover: rgb(var(--primary-5));
4002
4002
  @upload-text-item-size-status-icon: 12px;
4003
4003
  @upload-text-item-color-error-icon: rgb(var(--danger-6));
@@ -4009,7 +4009,7 @@
4009
4009
  @upload-text-item-margin-thumbnail-right: 12px;
4010
4010
  @upload-text-item-color-text_error: rgb(var(--danger-6));
4011
4011
  @upload-text-item-color-text_success: unset;
4012
- @upload-text-item-color-text_uploading: unset;
4012
+ @upload-text-item-color-text_uploading: var(--color-text-2);
4013
4013
  @upload-picture-item-margin-preview-icon-right: 20px;
4014
4014
  @upload-picture-item-size-width: 80px;
4015
4015
  @upload-picture-item-border-radius: 4px;
@@ -4019,10 +4019,10 @@
4019
4019
  @upload-picture-item-color-operation_bg: rgba(0, 0, 0, 0.5);
4020
4020
  @upload-picture-item-color-operation-icon: var(--color-white);
4021
4021
  @upload-picture-item-color-error-icon: var(--color-white);
4022
- @upload-picture-text-item-color-bg_error: #f5f7fc;
4022
+ @upload-picture-text-item-color-bg_error: var(--color-fill-2);
4023
4023
  @upload-picture-text-item-color-text_error: rgb(var(--danger-6));
4024
- @upload-picture-text-item-color-text_success: #0f131f;
4025
- @upload-picture-text-item-color-text_uploading: #0f131f;
4024
+ @upload-picture-text-item-color-text_success: var(--color-text-1);
4025
+ @upload-picture-text-item-color-text_uploading: var(--color-text-1);
4026
4026
  @upload-picture-text-item-padding-vertical: 8px;
4027
4027
  @upload-drag-size-icon: 14px;
4028
4028
  @upload-picture-item-size-mask-icon: 16px;