nbit-arco/lib/style/transform/tokens.less

Arco Design React UI Library.

/*********** font ***********/

@font-family: PingFang SC, Microsoft YaHei;
@font-size-display-3: 56px;
@font-size-display-2: 48px;
@font-size-display-1: 36px;
@font-size-title-3: 24px;
@font-size-title-2: 20px;
@font-size-title-1: 16px;
@font-size-body-3: 14px;
@font-size-body-2: 13px;
@font-size-body-1: 12px;
@font-size-caption: 12px;
@font-weight-100: 100;
@font-weight-200: 200;
@font-weight-300: 300;
@font-weight-400: 400;
@font-weight-500: 500;
@font-weight-600: 600;
@font-weight-700: 700;
@font-weight-800: 800;
@font-weight-900: 900;
@font-size-body: 14px;

/*********** red ***********/

@red-1: #ffece8;
@red-2: #fdcdc5;
@red-3: #fbaca3;
@red-4: #f98981;
@red-5: #f76560;
@red-6: #f53f3f;
@red-7: #cb272d;
@red-8: #a1151e;
@red-9: #770813;
@red-10: #4d000a;

/*********** orangered ***********/

@orangered-1: #fff3e8;
@orangered-2: #fdddc3;
@orangered-3: #fcc59f;
@orangered-4: #faac7b;
@orangered-5: #f99057;
@orangered-6: #f77234;
@orangered-7: #cc5120;
@orangered-8: #a23511;
@orangered-9: #771f06;
@orangered-10: #4d0e00;

/*********** orange ***********/

@orange-1: #fff7e8;
@orange-2: #ffe4ba;
@orange-3: #ffcf8b;
@orange-4: #ffb65d;
@orange-5: #ff9a2e;
@orange-6: #ff7d00;
@orange-7: #d25f00;
@orange-8: #a64500;
@orange-9: #792e00;
@orange-10: #4d1b00;

/*********** gold ***********/

@gold-1: #fffce8;
@gold-2: #fdf4bf;
@gold-3: #fce996;
@gold-4: #fadc6d;
@gold-5: #f9cc45;
@gold-6: #f7ba1e;
@gold-7: #cc9213;
@gold-8: #a26d0a;
@gold-9: #774b04;
@gold-10: #4d2d00;

/*********** yellow ***********/

@yellow-1: #feffe8;
@yellow-2: #fefebe;
@yellow-3: #fdfa94;
@yellow-4: #fcf26b;
@yellow-5: #fbe842;
@yellow-6: #fadc19;
@yellow-7: #cfaf0f;
@yellow-8: #a38408;
@yellow-9: #785d03;
@yellow-10: #4d3800;

/*********** lime ***********/

@lime-1: #fcffe8;
@lime-2: #edf8bb;
@lime-3: #dcf190;
@lime-4: #c9e968;
@lime-5: #b5e241;
@lime-6: #9fdb1d;
@lime-7: #7eb712;
@lime-8: #5f940a;
@lime-9: #437004;
@lime-10: #2a4d00;

/*********** green ***********/

@green-1: #e8ffea;
@green-2: #aff0b5;
@green-3: #7be188;
@green-4: #4cd263;
@green-5: #23c343;
@green-6: #00b42a;
@green-7: #009a29;
@green-8: #008026;
@green-9: #006622;
@green-10: #004d1c;

/*********** cyan ***********/

@cyan-1: #e8fffb;
@cyan-2: #b7f4ec;
@cyan-3: #89e9e0;
@cyan-4: #5edfd6;
@cyan-5: #37d4cf;
@cyan-6: #14c9c9;
@cyan-7: #0da5aa;
@cyan-8: #07828b;
@cyan-9: #03616c;
@cyan-10: #00424d;

/*********** blue ***********/

@blue-1: #e8f7ff;
@blue-2: #c3e7fe;
@blue-3: #9fd4fd;
@blue-4: #7bc0fc;
@blue-5: #57a9fb;
@blue-6: #3491fa;
@blue-7: #206ccf;
@blue-8: #114ba3;
@blue-9: #063078;
@blue-10: #001a4d;

/*********** arcoblue ***********/

@arcoblue-1: #e8f3ff;
@arcoblue-2: #bedaff;
@arcoblue-3: #94bfff;
@arcoblue-4: #6aa1ff;
@arcoblue-5: #4080ff;
@arcoblue-6: #165dff;
@arcoblue-7: #0e42d2;
@arcoblue-8: #072ca6;
@arcoblue-9: #031a79;
@arcoblue-10: #000d4d;

/*********** purple ***********/

@purple-1: #f5e8ff;
@purple-2: #ddbef6;
@purple-3: #c396ed;
@purple-4: #a871e3;
@purple-5: #8d4eda;
@purple-6: #722ed1;
@purple-7: #551db0;
@purple-8: #3c108f;
@purple-9: #27066e;
@purple-10: #16004d;

/*********** pinkpurple ***********/

@pinkpurple-1: #ffe8fb;
@pinkpurple-2: #f7baef;
@pinkpurple-3: #f08ee6;
@pinkpurple-4: #e865df;
@pinkpurple-5: #e13edb;
@pinkpurple-6: #d91ad9;
@pinkpurple-7: #b010b6;
@pinkpurple-8: #8a0993;
@pinkpurple-9: #650370;
@pinkpurple-10: #42004d;

/*********** magenta ***********/

@magenta-1: #ffe8f1;
@magenta-2: #fdc2db;
@magenta-3: #fb9dc7;
@magenta-4: #f979b7;
@magenta-5: #f754a8;
@magenta-6: #f5319d;
@magenta-7: #cb1e83;
@magenta-8: #a11069;
@magenta-9: #77064f;
@magenta-10: #4d0034;

/*********** gray ***********/

@gray-1: #f7f8fa;
@gray-2: #f2f3f5;
@gray-3: #e5e6eb;
@gray-4: #c9cdd4;
@gray-5: #a9aeb8;
@gray-6: #86909c;
@gray-7: #6b7785;
@gray-8: #4e5969;
@gray-9: #272e3b;
@gray-10: #1d2129;

/*********** dark ***********/

@dark-red-1: #4d000a;
@dark-red-2: #770611;
@dark-red-3: #a1161f;
@dark-red-4: #cb2e34;
@dark-red-5: #f54e4e;
@dark-red-6: #f76965;
@dark-red-7: #f98d86;
@dark-red-8: #fbb0a7;
@dark-red-9: #fdd1ca;
@dark-red-10: #fff0ec;
@dark-orangered-1: #4d0e00;
@dark-orangered-2: #771e05;
@dark-orangered-3: #a23714;
@dark-orangered-4: #cc5729;
@dark-orangered-5: #f77e45;
@dark-orangered-6: #f9925a;
@dark-orangered-7: #faad7d;
@dark-orangered-8: #fcc6a1;
@dark-orangered-9: #fddec5;
@dark-orangered-10: #fff4eb;
@dark-orange-1: #4d1b00;
@dark-orange-2: #793004;
@dark-orange-3: #a64b0a;
@dark-orange-4: #d26913;
@dark-orange-5: #ff8d1f;
@dark-orange-6: #ff9626;
@dark-orange-7: #ffb357;
@dark-orange-8: #ffcd87;
@dark-orange-9: #ffe3b8;
@dark-orange-10: #fff7e8;
@dark-gold-1: #4d2d00;
@dark-gold-2: #774b04;
@dark-gold-3: #a26f0f;
@dark-gold-4: #cc961f;
@dark-gold-5: #f7c034;
@dark-gold-6: #f9cc44;
@dark-gold-7: #fadc6c;
@dark-gold-8: #fce995;
@dark-gold-9: #fdf4be;
@dark-gold-10: #fffce8;
@dark-yellow-1: #4d3800;
@dark-yellow-2: #785e07;
@dark-yellow-3: #a38614;
@dark-yellow-4: #cfb325;
@dark-yellow-5: #fae13c;
@dark-yellow-6: #fbe94b;
@dark-yellow-7: #fcf374;
@dark-yellow-8: #fdfa9d;
@dark-yellow-9: #fefec6;
@dark-yellow-10: #fefff0;
@dark-lime-1: #2a4d00;
@dark-lime-2: #447006;
@dark-lime-3: #629412;
@dark-lime-4: #84b723;
@dark-lime-5: #a8db39;
@dark-lime-6: #b8e24b;
@dark-lime-7: #cbe970;
@dark-lime-8: #def198;
@dark-lime-9: #eef8c2;
@dark-lime-10: #fdffee;
@dark-green-1: #004d1c;
@dark-green-2: #046625;
@dark-green-3: #0a802d;
@dark-green-4: #129a37;
@dark-green-5: #1db440;
@dark-green-6: #27c346;
@dark-green-7: #50d266;
@dark-green-8: #7ee18b;
@dark-green-9: #b2f0b7;
@dark-green-10: #ebffec;
@dark-cyan-1: #00424d;
@dark-cyan-2: #06616c;
@dark-cyan-3: #11838b;
@dark-cyan-4: #1fa6aa;
@dark-cyan-5: #30c9c9;
@dark-cyan-6: #3fd4cf;
@dark-cyan-7: #66dfd7;
@dark-cyan-8: #90e9e1;
@dark-cyan-9: #bef4ed;
@dark-cyan-10: #f0fffc;
@dark-blue-1: #001a4d;
@dark-blue-2: #052f78;
@dark-blue-3: #134ca3;
@dark-blue-4: #2971cf;
@dark-blue-5: #469afa;
@dark-blue-6: #5aaafb;
@dark-blue-7: #7dc1fc;
@dark-blue-8: #a1d5fd;
@dark-blue-9: #c6e8fe;
@dark-blue-10: #eaf8ff;
@dark-arcoblue-1: #000d4d;
@dark-arcoblue-2: #041b79;
@dark-arcoblue-3: #0e32a6;
@dark-arcoblue-4: #1d4dd2;
@dark-arcoblue-5: #306fff;
@dark-arcoblue-6: #3c7eff;
@dark-arcoblue-7: #689fff;
@dark-arcoblue-8: #93beff;
@dark-arcoblue-9: #bedaff;
@dark-arcoblue-10: #eaf4ff;
@dark-purple-1: #16004d;
@dark-purple-2: #27066e;
@dark-purple-3: #3e138f;
@dark-purple-4: #5a25b0;
@dark-purple-5: #7b3dd1;
@dark-purple-6: #8e51da;
@dark-purple-7: #a974e3;
@dark-purple-8: #c59aed;
@dark-purple-9: #dfc2f6;
@dark-purple-10: #f7edff;
@dark-pinkpurple-1: #42004d;
@dark-pinkpurple-2: #650370;
@dark-pinkpurple-3: #8a0d93;
@dark-pinkpurple-4: #b01bb6;
@dark-pinkpurple-5: #d92ed9;
@dark-pinkpurple-6: #e13ddb;
@dark-pinkpurple-7: #e866df;
@dark-pinkpurple-8: #f092e6;
@dark-pinkpurple-9: #f7c1f0;
@dark-pinkpurple-10: #fff2fd;
@dark-magenta-1: #4d0034;
@dark-magenta-2: #770850;
@dark-magenta-3: #a1176c;
@dark-magenta-4: #cb2b88;
@dark-magenta-5: #f545a6;
@dark-magenta-6: #f756a9;
@dark-magenta-7: #f97ab8;
@dark-magenta-8: #fb9ec8;
@dark-magenta-9: #fdc3db;
@dark-magenta-10: #ffe8f1;
@dark-gray-1: #17171a;
@dark-gray-2: #2e2e30;
@dark-gray-3: #484849;
@dark-gray-4: #5f5f60;
@dark-gray-5: #78787a;
@dark-gray-6: #929293;
@dark-gray-7: #ababac;
@dark-gray-8: #c5c5c5;
@dark-gray-9: #dfdfdf;
@dark-gray-10: #f6f6f6;
@dark-primary-1: #4d2600;
@dark-primary-2: #764105;
@dark-primary-3: #764207;
@dark-primary-4: #9f6314;
@dark-primary-5: #f4c25e;
@dark-primary-6: #f1ae3d;
@dark-primary-7: #c88726;
@dark-primary-8: rgb(var(--arcoblue-8));
@dark-primary-9: rgb(var(--arcoblue-9));
@dark-primary-10: rgb(var(--arcoblue-10));
@dark-success-1: rgb(var(--green-1));
@dark-success-2: #004d20;
@dark-success-3: #0b662e;
@dark-success-4: #1d7f3f;
@dark-success-5: #69c17f;
@dark-success-6: #50b16c;
@dark-success-7: #339853;
@dark-success-8: rgb(var(--green-8));
@dark-success-9: rgb(var(--green-9));
@dark-success-10: rgb(var(--green-10));
@dark-danger-1: rgb(var(--red-1));
@dark-danger-2: rgb(var(--red-2));
@dark-danger-3: rgb(var(--red-3));
@dark-danger-4: rgb(var(--red-4));
@dark-danger-5: rgb(var(--red-5));
@dark-danger-6: rgb(var(--red-6));
@dark-danger-7: rgb(var(--red-7));
@dark-danger-8: rgb(var(--red-8));
@dark-danger-9: rgb(var(--red-9));
@dark-danger-10: rgb(var(--red-10));
@dark-warning-1: rgb(var(--orange-1));
@dark-warning-2: #4d000b;
@dark-warning-3: #740b17;
@dark-warning-4: #9b1e28;
@dark-warning-5: #ed7775;
@dark-warning-6: #e95a5c;
@dark-warning-7: #c2383f;
@dark-warning-8: rgb(var(--orange-8));
@dark-warning-9: rgb(var(--orange-9));
@dark-warning-10: rgb(var(--orange-10));
@dark-link-1: rgb(var(--arcoblue-1));
@dark-link-2: rgb(var(--arcoblue-2));
@dark-link-3: rgb(var(--arcoblue-3));
@dark-link-4: rgb(var(--arcoblue-4));
@dark-link-5: rgb(var(--arcoblue-5));
@dark-link-6: rgb(var(--arcoblue-6));
@dark-link-7: rgb(var(--arcoblue-7));
@dark-link-8: rgb(var(--arcoblue-8));
@dark-link-9: rgb(var(--arcoblue-9));
@dark-link-10: rgb(var(--arcoblue-10));
@dark-color-white: #101014;
@dark-color-black: #000000;
@dark-mask-color-bg: rgba(23, 23, 26, 0.6);
@dark-color-tooltip-bg: #373739;
@dark-color-spin-layer-bg: rgba(51, 51, 51, 0.6);
@dark-color-menu-dark-hover: var(--color-fill-2);
@dark-color-border: #333335;
@dark-color-bg-1: #101014;
@dark-color-bg-2: #252526;
@dark-color-bg-3: #19191c;
@dark-color-bg-4: #19191c;
@dark-color-bg-5: #373739;
@dark-color-bg-white: #f6f6f6;
@dark-color-text-1: #ffffff;
@dark-color-text-2: #c9cdd4;
@dark-color-text-3: #949ba4;
@dark-color-text-4: #6a6f76;
@dark-color-fill-1: #303132;
@dark-color-fill-2: #3e3e3e;
@dark-color-fill-3: #555556;
@dark-color-fill-4: #808083;
@dark-color-primary-light-1: rgba(var(--primary-6), 0.2);
@dark-color-primary-light-2: rgba(var(--primary-6), 0.35);
@dark-color-primary-light-3: rgba(var(--primary-6), 0.5);
@dark-color-primary-light-4: rgba(var(--primary-6), 0.65);
@dark-color-secondary: rgba(var(--gray-9), 0.08);
@dark-color-secondary-hover: rgba(var(--gray-8), 0.16);
@dark-color-secondary-active: rgba(var(--gray-7), 0.24);
@dark-color-secondary-disabled: rgba(var(--gray-9), 0.08);
@dark-color-danger-light-1: rgba(var(--danger-6), 0.2);
@dark-color-danger-light-2: rgba(var(--danger-6), 0.35);
@dark-color-danger-light-3: rgba(var(--danger-6), 0.5);
@dark-color-danger-light-4: rgba(var(--danger-6), 0.65);
@dark-color-success-light-1: rgb(var(--success-6), 0.2);
@dark-color-success-light-2: rgb(var(--success-6), 0.35);
@dark-color-success-light-3: rgb(var(--success-6), 0.5);
@dark-color-success-light-4: rgb(var(--success-6), 0.65);
@dark-color-warning-light-1: rgb(var(--warning-6), 0.2);
@dark-color-warning-light-2: rgb(var(--warning-6), 0.35);
@dark-color-warning-light-3: rgb(var(--warning-6), 0.5);
@dark-color-warning-light-4: rgb(var(--warning-6), 0.65);
@dark-color-link-light-1: rgba(var(--link-6), 0.2);
@dark-color-link-light-2: rgba(var(--link-6), 0.35);
@dark-color-link-light-3: rgba(var(--link-6), 0.5);
@dark-color-link-light-4: rgba(var(--link-6), 0.65);
@dark-color-border-1: #484849;
@dark-color-border-2: #404040;
@dark-color-border-4: #949ba4;
@dark-color-border-3: #5f5f60;
@dark-color-fill-6: #e3e3e5;
@dark-buy-up-2: #004d20;
@dark-buy-up-9: rgb(var(--arcoblue-9));
@dark-buy-up-7: #339853;
@dark-buy-up-3: #0b662e;
@dark-buy-up-8: rgb(var(--arcoblue-8));
@dark-buy-up-5: #69c17f;
@dark-buy-up-6: #50b16c;
@dark-buy-up-10: rgb(var(--arcoblue-10));
@dark-buy-up-4: rgb(var(--arcoblue-4));
@dark-buy-up-1: #1d7f3f;
@dark-sell-down-4: #9b1e28;
@dark-sell-down-2: #4d000b;
@dark-sell-down-5: #ed7775;
@dark-sell-down-3: #740b17;
@dark-sell-down-6: #e95a5c;
@dark-sell-down-1: rgb(var(--arcoblue-1));
@dark-sell-down-10: rgb(var(--arcoblue-10));
@dark-sell-down-7: #c2383f;
@dark-sell-down-8: rgb(var(--arcoblue-8));
@dark-sell-down-9: rgb(var(--arcoblue-9));
@dark-tips-4: #9f6314;
@dark-tips-2: #4d2600;
@dark-tips-7: #c88726;
@dark-tips-5: #f4c25e;
@dark-tips-3: #764207;
@dark-tips-6: #f1ae3d;
@dark-tips-1: rgb(var(--arcoblue-1));
@dark-tips-10: rgb(var(--arcoblue-10));
@dark-tips-8: rgb(var(--arcoblue-8));
@dark-tips-9: rgb(var(--arcoblue-9));
@dark-color-fill-7: #2d2d2e;
@dark-color-border-5: #252526;
@dark-color-text-5: #101014;
@dark-color-border-6: #484849;

/*********** primary ***********/

@primary-1: #fffae8;
@primary-2: #fcefc4;
@primary-3: #f9e2a1;
@primary-4: #f7d37f;
@primary-5: #f4c25e;
@primary-6: #f1ae3d;
@primary-7: #c88726;
@primary-8: rgb(var(--arcoblue-8));
@primary-9: rgb(var(--arcoblue-9));
@primary-10: rgb(var(--arcoblue-10));

/*********** success ***********/

@success-1: rgb(var(--green-1));
@success-2: #e8ffeb;
@success-3: #a3e0ae;
@success-4: #84d095;
@success-5: #69c17f;
@success-6: #50b16c;
@success-7: #339853;
@success-8: rgb(var(--green-8));
@success-9: rgb(var(--green-9));
@success-10: rgb(var(--green-10));

/*********** danger ***********/

@danger-1: rgb(var(--red-1));
@danger-2: rgb(var(--red-2));
@danger-3: rgb(var(--red-3));
@danger-4: rgb(var(--red-4));
@danger-5: rgb(var(--red-5));
@danger-6: rgb(var(--red-6));
@danger-7: rgb(var(--red-7));
@danger-8: rgb(var(--red-8));
@danger-9: rgb(var(--red-9));
@danger-10: rgb(var(--red-10));

/*********** warning ***********/

@warning-1: rgb(var(--orange-1));
@warning-2: #ffebe8;
@warning-3: #f6b3ac;
@warning-4: #f29590;
@warning-5: #ed7775;
@warning-6: #e95a5c;
@warning-7: #c2383f;
@warning-8: rgb(var(--orange-8));
@warning-9: rgb(var(--orange-9));
@warning-10: rgb(var(--orange-10));

/*********** link ***********/

@link-1: rgb(var(--arcoblue-1));
@link-2: rgb(var(--arcoblue-2));
@link-3: rgb(var(--arcoblue-3));
@link-4: rgb(var(--arcoblue-4));
@link-5: rgb(var(--arcoblue-5));
@link-6: rgb(var(--arcoblue-6));
@link-7: rgb(var(--arcoblue-7));
@link-8: rgb(var(--arcoblue-8));
@link-9: rgb(var(--arcoblue-9));
@link-10: rgb(var(--arcoblue-10));
@link-font-size: 14px;
@link-line-height: 1.5715;
@link-color-bg_hover: var(--color-fill-2);
@link-color-bg_active: var(--color-fill-3);
@link-padding-horizontal: 4px;
@link-color-text: rgb(var(--link-6));
@link-color-text_hover: rgb(var(--link-6));
@link-color-text_active: rgb(var(--link-6));
@link-color-text_disabled: var(--color-link-light-3);
@link-color-text_success: rgb(var(--success-6));
@link-color-text_success_hover: rgb(var(--success-6));
@link-color-text_success_active: rgb(var(--success-6));
@link-color-text_success_disabled: var(--color-success-light-3);
@link-color-text_error: rgb(var(--danger-6));
@link-color-text_error_active: rgb(var(--danger-6));
@link-color-text_error_hover: rgb(var(--danger-6));
@link-color-text_error_disabled: var(--color-danger-light-3);
@link-color-text_warning: rgb(var(--warning-6));
@link-color-text_warning_hover: rgb(var(--warning-6));
@link-color-text_warning_active: rgb(var(--warning-6));
@link-color-text_warning_disabled: var(--color-warning-light-2);
@link-margin-icon-right: 6px;
@link-padding-vertical: 1px;
@link-size-icon: 12px;
@link-border-radius: var(--border-radius-small);
@link-prefix-cls: arco-link;

/*********** border ***********/

@border-none: 0;
@border-1: 1px;
@border-2: 2px;
@border-3: 3px;
@border-4: 4px;
@border-5: 5px;
@border-solid: solid;
@border-dashed: dashed;
@border-dotted: dotted;
@border-radius-none: 0;
@border-radius-small: 4px;
@border-radius-medium: 4px;
@border-radius-large: 8px;
@border-radius-circle: 50%;

/*********** shadow ***********/

@shadow-distance-none: 0;
@shadow-distance-1: 1px;
@shadow-distance-2: 2px;
@shadow-distance-3: 3px;
@shadow-distance-4: 4px;
@shadow-none: none;
@shadow-special: 0 0 1px rgba(0, 0, 0, 0.3);

/*********** size ***********/

@size-none: 0;
@size-1: 4px;
@size-2: 8px;
@size-3: 12px;
@size-4: 16px;
@size-5: 20px;
@size-6: 24px;
@size-7: 28px;
@size-8: 32px;
@size-9: 36px;
@size-10: 40px;
@size-11: 44px;
@size-12: 48px;
@size-13: 52px;
@size-14: 56px;
@size-15: 60px;
@size-16: 64px;
@size-17: 68px;
@size-18: 72px;
@size-19: 76px;
@size-20: 80px;
@size-21: 84px;
@size-22: 88px;
@size-23: 92px;
@size-24: 96px;
@size-25: 100px;
@size-26: 104px;
@size-27: 108px;
@size-28: 112px;
@size-29: 116px;
@size-30: 120px;
@size-31: 124px;
@size-32: 128px;
@size-33: 132px;
@size-34: 136px;
@size-35: 140px;
@size-36: 144px;
@size-37: 148px;
@size-38: 152px;
@size-39: 156px;
@size-40: 160px;
@size-41: 164px;
@size-42: 168px;
@size-43: 172px;
@size-44: 176px;
@size-45: 180px;
@size-46: 184px;
@size-47: 188px;
@size-48: 192px;
@size-49: 196px;
@size-50: 200px;
@size-mini: 24px;
@size-small: 28px;
@size-default: 40px;
@size-large: 46px;

/*********** spacing ***********/

@spacing-none: 0;
@spacing-1: 2px;
@spacing-2: 4px;
@spacing-3: 6px;
@spacing-4: 8px;
@spacing-5: 10px;
@spacing-6: 12px;
@spacing-7: 16px;
@spacing-8: 20px;
@spacing-9: 24px;
@spacing-10: 32px;
@spacing-11: 36px;
@spacing-12: 40px;
@spacing-13: 48px;
@spacing-14: 56px;
@spacing-15: 60px;
@spacing-16: 64px;
@spacing-17: 72px;
@spacing-18: 80px;
@spacing-19: 84px;
@spacing-20: 96px;
@spacing-21: 100px;
@spacing-22: 120px;

/*********** color ***********/

@color-transparent: transparent;
@color-primary-1: rgb(var(--primary-1));
@color-primary-2: rgb(var(--primary-2));
@color-primary-3: rgb(var(--primary-3));
@color-primary-4: rgb(var(--primary-4));
@color-primary-5: rgb(var(--primary-5));
@color-primary-6: rgb(var(--primary-6));
@color-primary-7: rgb(var(--primary-7));
@color-primary-8: rgb(var(--primary-8));
@color-primary-9: rgb(var(--primary-9));
@color-primary-10: rgb(var(--primary-10));
@color-success-1: rgb(var(--success-1));
@color-success-2: rgb(var(--success-2));
@color-success-3: rgb(var(--success-3));
@color-success-4: rgb(var(--success-4));
@color-success-5: rgb(var(--success-5));
@color-success-6: rgb(var(--success-6));
@color-success-7: rgb(var(--success-7));
@color-success-8: rgb(var(--success-8));
@color-success-9: rgb(var(--success-9));
@color-success-10: rgb(var(--success-10));
@color-warning-1: rgb(var(--warning-1));
@color-warning-2: rgb(var(--warning-2));
@color-warning-3: rgb(var(--warning-3));
@color-warning-4: rgb(var(--warning-4));
@color-warning-5: rgb(var(--warning-5));
@color-warning-6: rgb(var(--warning-6));
@color-warning-7: rgb(var(--warning-7));
@color-warning-8: rgb(var(--warning-8));
@color-warning-9: rgb(var(--warning-9));
@color-warning-10: rgb(var(--warning-10));
@color-danger-1: rgb(var(--danger-1));
@color-danger-2: rgb(var(--danger-2));
@color-danger-3: rgb(var(--danger-3));
@color-danger-4: rgb(var(--danger-4));
@color-danger-5: rgb(var(--danger-5));
@color-danger-6: rgb(var(--danger-6));
@color-danger-7: rgb(var(--danger-7));
@color-danger-8: rgb(var(--danger-8));
@color-danger-9: rgb(var(--danger-9));
@color-danger-10: rgb(var(--danger-10));
@color-link-1: rgb(var(--link-1));
@color-link-2: rgb(var(--link-2));
@color-link-3: rgb(var(--link-3));
@color-link-4: rgb(var(--link-4));
@color-link-5: rgb(var(--link-5));
@color-link-6: rgb(var(--link-6));
@color-link-7: rgb(var(--link-7));
@color-link-8: rgb(var(--link-8));
@color-link-9: rgb(var(--link-9));
@color-link-10: rgb(var(--link-10));
@color-white: #ffffff;
@color-black: #000000;
@color-menu-dark-bg: #232324;
@color-menu-light-bg: #ffffff;
@color-spin-layer-bg: rgba(255, 255, 255, 0.6);
@color-menu-dark-hover: rgba(255, 255, 255, 0.04);
@color-tooltip-bg: rgb(var(--gray-10));
@color-border: rgb(var(--gray-3));
@color-bg-popup: var(--color-bg-5);
@color-bg-1: #ffffff;
@color-bg-2: #ffffff;
@color-bg-3: #f2f2f2;
@color-bg-4: #f2f2f2;
@color-bg-5: #ffffff;
@color-bg-white: #ffffff;
@color-text-1: #101014;
@color-text-2: #6a6f76;
@color-text-3: #949ba4;
@color-text-4: var(--color-neutral-4);
@color-fill-1: var(--color-neutral-1);
@color-fill-2: var(--color-neutral-2);
@color-fill-3: #e5e6eb;
@color-fill-4: var(--color-neutral-4);
@color-border-1: #f2f3f5;
@color-border-2: #e5e6eb;
@color-border-3: var(--color-neutral-4);
@color-border-4: #949ba4;
@color-primary-light-1: rgb(var(--primary-1));
@color-primary-light-2: rgb(var(--primary-2));
@color-primary-light-3: rgb(var(--primary-3));
@color-primary-light-4: rgb(var(--primary-4));
@color-secondary: var(--color-neutral-2);
@color-secondary-hover: var(--color-neutral-3);
@color-secondary-active: var(--color-neutral-4);
@color-secondary-disabled: var(--color-neutral-1);
@color-danger-light-1: rgb(var(--danger-1));
@color-danger-light-2: rgb(var(--danger-2));
@color-danger-light-3: rgb(var(--danger-3));
@color-danger-light-4: rgb(var(--danger-4));
@color-success-light-1: rgb(var(--success-1));
@color-success-light-2: rgb(var(--success-2));
@color-success-light-3: rgb(var(--success-3));
@color-success-light-4: rgb(var(--success-4));
@color-warning-light-1: rgb(var(--warning-1));
@color-warning-light-2: rgb(var(--warning-2));
@color-warning-light-3: rgb(var(--warning-3));
@color-warning-light-4: rgb(var(--warning-4));
@color-link-light-1: rgb(var(--link-1));
@color-link-light-2: rgb(var(--link-2));
@color-link-light-3: rgb(var(--link-3));
@color-link-light-4: rgb(var(--link-4));
@color-fill-6: #6a6f76;
@color-buy-up-7: rgb(var(--buy-up-7));
@color-buy-up-4: rgb(var(--buy-up-4));
@color-buy-up-1: rgb(var(--buy-up-1));
@color-buy-up-2: rgb(var(--buy-up-2));
@color-buy-up-5: rgb(var(--buy-up-5));
@color-buy-up-3: rgb(var(--buy-up-3));
@color-buy-up-10: rgb(var(--buy-up-10));
@color-buy-up-8: rgb(var(--buy-up-8));
@color-buy-up-9: rgb(var(--buy-up-9));
@color-buy-up-6: rgb(var(--buy-up-6));
@color-sell-down-5: rgb(var(--sell-down-5));
@color-sell-down-6: rgb(var(--sell-down-6));
@color-sell-down-7: rgb(var(--sell-down-7));
@color-sell-down-1: rgb(var(--sell-down-1));
@color-sell-down-2: rgb(var(--sell-down-2));
@color-sell-down-4: rgb(var(--sell-down-4));
@color-sell-down-3: rgb(var(--sell-down-3));
@color-sell-down-10: rgb(var(--sell-down-10));
@color-sell-down-8: rgb(var(--sell-down-8));
@color-sell-down-9: rgb(var(--sell-down-9));
@color-tips-4: rgb(var(--tips-4));
@color-tips-2: rgb(var(--tips-2));
@color-tips-9: rgb(var(--tips-9));
@color-tips-5: rgb(var(--tips-5));
@color-tips-1: rgb(var(--tips-1));
@color-tips-7: rgb(var(--tips-7));
@color-tips-6: rgb(var(--tips-6));
@color-tips-3: rgb(var(--tips-3));
@color-tips-8: rgb(var(--tips-8));
@color-tips-10: rgb(var(--tips-10));
@color-fill-7: #ffffff;
@color-border-5: #dbdbdb;
@color-text-5: #ffffff;
@color-border-6: #f2f2f2;

/*********** shadow1 ***********/

@shadow1-center: 0 0 5px rgba(0, 0, 0, 0.1);
@shadow1-up: 0 -2px 5px rgba(0, 0, 0, 0.1);
@shadow1-down: 0 2px 5px rgba(0, 0, 0, 0.1);
@shadow1-left: -2px 0 5px rgba(0, 0, 0, 0.1);
@shadow1-right: 2px 0 5px rgba(0, 0, 0, 0.1);
@shadow1-left-up: -2px -2px 5px rgba(0, 0, 0, 0.1);
@shadow1-left-down: -2px 2px 5px rgba(0, 0, 0, 0.1);
@shadow1-right-up: 2px -2px 5px rgba(0, 0, 0, 0.1);
@shadow1-right-down: 2px 2px 5px rgba(0, 0, 0, 0.1);

/*********** shadow2 ***********/

@shadow2-center: 0 0 10px rgba(0, 0, 0, 0.1);
@shadow2-up: 0 -4px 10px rgba(0, 0, 0, 0.1);
@shadow2-down: 0 4px 10px rgba(0, 0, 0, 0.1);
@shadow2-left: -4px 0 10px rgba(0, 0, 0, 0.1);
@shadow2-right: 4px 0 10px rgba(0, 0, 0, 0.1);
@shadow2-left-up: -4px -4px 10px rgba(0, 0, 0, 0.1);
@shadow2-left-down: -4px 4px 10px rgba(0, 0, 0, 0.1);
@shadow2-right-up: 4px -4px 10px rgba(0, 0, 0, 0.1);
@shadow2-right-down: 4px 4px 10px rgba(0, 0, 0, 0.1);

/*********** shadow3 ***********/

@shadow3-center: 0 0 20px rgba(0, 0, 0, 0.1);
@shadow3-up: 0 -8px 20px rgba(0, 0, 0, 0.1);
@shadow3-down: 0 8px 20px rgba(0, 0, 0, 0.1);
@shadow3-left: -8px 0 20px rgba(0, 0, 0, 0.1);
@shadow3-right: 8px 0 20px rgba(0, 0, 0, 0.1);
@shadow3-left-up: -8px -8px 20px rgba(0, 0, 0, 0.1);
@shadow3-left-down: -8px 8px 20px rgba(0, 0, 0, 0.1);
@shadow3-right-up: 8px -8px 20px rgba(0, 0, 0, 0.1);
@shadow3-right-down: 8px 8px 20px rgba(0, 0, 0, 0.1);

/*********** opacity ***********/

@opacity-none: 0;
@opacity-1: 10%;
@opacity-2: 20%;
@opacity-3: 30%;
@opacity-4: 40%;
@opacity-5: 50%;
@opacity-6: 60%;
@opacity-7: 70%;
@opacity-8: 80%;
@opacity-9: 90%;
@opacity-10: 100%;

/*********** radius ***********/

@radius-none: var(--border-radius-none);
@radius-small: var(--border-radius-small);
@radius-medium: var(--border-radius-medium);
@radius-large: var(--border-radius-large);
@radius-circle: var(--border-radius-circle);

/*********** mask ***********/

@mask-bg-opacity: 60%;
@mask-color-bg: rgba(29, 33, 41, 0.6);

/*********** icon ***********/

@icon-hover-border-radius: 0;
@icon-hover-color-bg: transparent;
@icon-hover-size-default-height: 20px;
@icon-hover-size-small-height: 20px;
@icon-hover-size-mini-height: 20px;
@icon-hover-size-large-height: 24px;
@icon-hover-size-huge-height: 24px;
@icon-hover-size-small-icon: 12px;
@icon-hover-size-mini-icon: 12px;
@icon-hover-size-default-icon: 12px;
@icon-hover-size-large-icon: 12px;
@icon-hover-size-huge-icon: 12px;

/*********** prefix ***********/

@prefix: arco;

/*********** arco ***********/

@arco-theme-tag: body;
@arco-cssvars-prefix: -;
@arco-draggable-prefix-cls: arco-draggable;

/*********** code ***********/

@code-family: Consolas, Menlo;

/*********** transition ***********/

@transition-duration-1: 0.1s;
@transition-duration-2: 0.2s;
@transition-duration-3: 0.3s;
@transition-duration-4: 0.4s;
@transition-duration-5: 0.5s;
@transition-duration-loading: 1s;
@transition-timing-function-linear: cubic-bezier(0, 0, 1, 1);
@transition-timing-function-standard: cubic-bezier(0.34, 0.69, 0.1, 1);
@transition-timing-function-overshoot: cubic-bezier(0.3, 1.3, 0.3, 1);
@transition-timing-function-decelerate: cubic-bezier(0.4, 0.8, 0.74, 1);
@transition-timing-function-accelerate: cubic-bezier(0.26, 0, 0.6, 0.2);

/*********** z ***********/

@z-index-popup-base: 1000;
@z-index-affix: 999;
@z-index-popup: 1000;
@z-index-drawer: 1001;
@z-index-modal: 1001;
@z-index-message: 1003;
@z-index-notification: 1003;
@z-index-image-preview: 1001;

/*********** line ***********/

@line-height-base: 1.5715;

/*********** popup ***********/

@popup-box-shadow-base: 0 2px 5px rgba(0, 0, 0, 0.1);
@popup-color-content-text: var(--color-text-2);
@popup-color-content-bg: var(--color-bg-popup);
@popup-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
@popup-padding-horizontal: 16px;
@popup-padding-vertical: 12px;
@popup-color-title-text: var(--color-text-1);
@popup-font-title-size: 16px;
@popup-margin-content-top: 4px;
@popup-color-border: var(--color-neutral-3);
@popup-font-size: 14px;
@popup-border-radius: var(--border-radius-medium);

/*********** picker ***********/

@picker-size-mini: 24px;
@picker-size-small: 28px;
@picker-size-default: 32px;
@picker-size-large: 36px;
@picker-size-mini-font-size-text: 12px;
@picker-size-small-font-size-text: 14px;
@picker-size-default-font-size-text: 14px;
@picker-size-large-font-size-text: 14px;
@picker-input-border-radius: var(--border-radius-small);
@picker-color-shadow_focus: var(--color-primary-light-2);
@picker-size-shadow_focus: 0;
@picker-color-shadow_error_focus: var(--color-danger-light-2);
@picker-size-shadow_error_focus: 0;
@picker-color-bg: var(--color-fill-2);
@picker-color-bg_hover: var(--color-fill-3);
@picker-color-bg_focus: var(--color-bg-2);
@picker-color-bg_disabled: var(--color-fill-2);
@picker-color-bg_error: var(--color-danger-light-1);
@picker-color-bg_error_hover: var(--color-danger-light-2);
@picker-color-bg_error_focus: var(--color-bg-2);
@picker-color-border: transparent;
@picker-color-border_hover: transparent;
@picker-color-border_focus: rgb(var(--primary-6));
@picker-color-border_disabled: transparent;
@picker-color-border_error: transparent;
@picker-color-border_error_hover: transparent;
@picker-color-border_error_focus: rgb(var(--danger-6));
@picker-color-placeholder: var(--color-text-3);
@picker-color-placeholder_disabled: var(--color-text-4);
@picker-color-text: var(--color-text-1);
@picker-color-text_disabled: var(--color-text-4);
@picker-color-icon: var(--color-text-2);
@picker-color-icon_disabled: var(--color-text-4);
@picker-color-separator: var(--color-text-3);
@picker-color-separator_disabled: var(--color-text-4);
@picker-range-color-bg-input_focus: var(--color-primary-light-1);
@picker-container-border-radius: var(--border-radius-medium);
@picker-header-color-text: var(--color-text-1);
@picker-header-font-weight-text: 500;
@picker-header-font-size: 14px;
@picker-header-padding-horizontal: 24px;
@picker-header-padding-vertical: 24px;
@picker-panel-border-width: 1px;
@picker-panel-date-width: 265px;
@picker-panel-month-width: 265px;
@picker-panel-year-width: 265px;
@picker-panel-week-width: 298px;
@picker-panel-quarter-width: 265px;
@picker-panel-time-cell-width: 36px;
@picker-panel-time-cell-spacing-horizontal: 4px;
@picker-panel-time-padding-horizontal: 10px;
@picker-panel-cell-padding-vertical: 4px;
@picker-panel-cell-circle-height: 24px;
@picker-panel-row-padding-vertical: 2px;
@picker-color-switch-icon: var(--color-text-2);
@picker-color-bg-switch-icon: var(--color-bg-popup);
@picker-color-bg-switch-icon_hover: var(--color-fill-3);
@picker-cell-font-weight-in-view: 500;
@picker-color-cell-text-in-view: var(--color-text-1);
@picker-cell-font-weight-not-in-view: 500;
@picker-color-cell-text-not-in-view: var(--color-text-4);
@picker-color-bg-circle_selected: rgb(var(--primary-6));
@picker-color-bg-cell-in-range: var(--color-primary-light-1);
@picker-color-bg-cell-disabled: var(--color-fill-1);
@picker-color-text-cell-range-boundary: var(--color-white);
@picker-color-bg-cell-range-boundary: rgb(var(--primary-6));
@picker-color-bg-cell-hover-in-range: var(--color-primary-light-2);
@picker-color-text-cell-hover-range-boundary: var(--color-text-1);
@picker-color-bg-cell-hover-range-boundary: var(--color-primary-light-2);
@picker-color-text-week-list-item: var(--color-text-2);
@picker-font-weight-week-list-item: 500;
@picker-panel-color-border: var(--color-neutral-3);
@picker-panel-color-text-cell_hover: var(--color-text-1);
@picker-panel-color-bg-cell_hover: var(--color-fill-3);
@picker-panel-color-text-cell_selected: var(--color-white);
@picker-panel-color-bg-cell_selected: rgb(var(--primary-6));
@picker-panel-color-current-time-dot: rgb(var(--primary-6));
@picker-panel-color-text-holder: var(--color-text-3);
@picker-panel-color-text-holder_active: var(--color-text-1);
@picker-panel-color-bg-label_hover: var(--color-fill-3);
@picker-panel-border-radius-cell_selected: 24px;
@picker-panel-cell-boundary-border-radius: 24px;
@picker-prefix-cls: arco-picker;

/*********** affix ***********/

@affix-prefix-cls: arco-affix;

/*********** alert ***********/

@alert-border-width: 1px;
@alert-margin-close-icon-left: 8px;
@alert-margin-icon-right: 8px;
@alert-margin-action-right: 8px;
@alert-margin-action-left: 8px;
@alert-border-radius: var(--border-radius-small);
@alert-line-height: 1.5715;
@alert-title-line-height: 1.5;
@alert-title-margin-bottom: 4px;
@alert-padding-horizontal: 16px;
@alert-padding-vertical: 9px;
@alert-padding-horizontal_with_title: 16px;
@alert-padding-vertical_with_title: 16px;
@alert-font-weight-title: 500;
@alert-font-size-text-title: 16px;
@alert-font-size-text-content: 14px;
@alert-font-size-icon: 16px;
@alert-font-size-icon_with_title: 18px;
@alert-font-size-close-icon: 12px;
@alert-color-close-icon: var(--color-text-2);
@alert-color-close-icon_hover: var(--color-text-1);
@alert-info-color-bg: var(--color-primary-light-1);
@alert-info-color-border: transparent;
@alert-info-color-icon: rgb(var(--primary-6));
@alert-info-color-text-title: var(--color-text-1);
@alert-info-color-text-content: var(--color-text-1);
@alert-info-color-text-content_title: var(--color-text-2);
@alert-warning-color-bg: var(--color-warning-light-1);
@alert-warning-color-border: transparent;
@alert-warning-color-icon: rgb(var(--warning-6));
@alert-warning-color-text-title: var(--color-text-1);
@alert-warning-color-text-content: var(--color-text-1);
@alert-warning-color-text-content_title: var(--color-text-2);
@alert-error-color-bg: var(--color-danger-light-1);
@alert-error-color-border: transparent;
@alert-error-color-icon: rgb(var(--danger-6));
@alert-error-color-text-title: var(--color-text-1);
@alert-error-color-text-content: var(--color-text-1);
@alert-error-color-text-content_title: var(--color-text-2);
@alert-success-color-bg: var(--color-success-light-1);
@alert-success-color-border: transparent;
@alert-success-color-icon: rgb(var(--success-6));
@alert-success-color-text-title: var(--color-text-1);
@alert-success-color-text-content: var(--color-text-1);
@alert-success-color-text-content_title: var(--color-text-2);
@alert-prefix-cls: arco-alert;

/*********** anchor ***********/

@anchor-width: 150px;
@anchor-line-width: 2px;
@anchor-line-slider-height: 12px;
@anchor-line-margin-right: 12px;
@anchor-color-bg-line: var(--color-fill-3);
@anchor-color-bg-line_active: rgb(var(--primary-6));
@anchor-border-radius-title-hover: var(--border-radius-small);
@anchor-item-inner-margin-left: 16px;
@anchor-title-padding-horizontal: 8px;
@anchor-title-padding-vertical: 4px;
@anchor-title-margin-bottom: 2px;
@anchor-color-title: var(--color-text-2);
@anchor-color-title_hover: var(--color-text-1);
@anchor-color-title_active: var(--color-text-1);
@anchor-font-weight-title_hover: 500;
@anchor-font-weight-title_active: 500;
@anchor-color-bg-title_hover: var(--color-fill-2);
@anchor-font-size-title: 14px;
@anchor-lineless-color-title_active: rgb(var(--primary-6));
@anchor-lineless-bg-title_active: var(--color-fill-2);
@anchor-lineless-font-weight-title_active: 500;
@anchor-prefix-cls: arco-anchor;

/*********** auto ***********/

@auto-complete-popup-max-height: 200px;
@auto-complete-popup-border-radius: var(--border-radius-medium);
@auto-complete-popup-padding-vertical: 4px;
@auto-complete-popup-font-size: 14px;
@auto-complete-popup-color-border: var(--color-fill-3);
@auto-complete-popup-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
@auto-complete-option-height: 36px;
@auto-complete-option-font-weight_selected: 500;
@auto-complete-option-padding-horizontal: 12px;
@auto-complete-option-color-bg_default: var(--color-bg-popup);
@auto-complete-option-color-bg_hover: var(--color-fill-2);
@auto-complete-option-color-bg_selected: var(--color-bg-popup);
@auto-complete-option-color-bg_disabled: var(--color-bg-popup);
@auto-complete-option-color-text_default: var(--color-text-1);
@auto-complete-option-color-text_hover: var(--color-text-1);
@auto-complete-option-color-text_selected: var(--color-text-1);
@auto-complete-option-color-text_disabled: var(--color-text-4);
@auto-complete-prefix-cls: arco-autocomplete;

/*********** select ***********/

@select-prefix-cls: arco-select;
@select-size-mini-height: 24px;
@select-size-small-height: 28px;
@select-size-default-height: 32px;
@select-size-large-height: 36px;
@select-size-mini-font-size: 12px;
@select-size-small-font-size: 14px;
@select-size-default-font-size: 14px;
@select-size-large-font-size: 16px;
@select-signal-size-mini-padding: 8px;
@select-signal-size-small-padding: 12px;
@select-signal-size-default-padding: 12px;
@select-signal-size-large-padding: 16px;
@select-multi-padding: 4px;
@select-size-icon: 12px;
@select-size-icon-bg: 16px;
@select-border-width: 1px;
@select-border-radius: var(--border-radius-small);
@select-color-text_default: var(--color-text-1);
@select-color-text_disabled: var(--color-text-4);
@select-color-text_focused: var(--color-text-1);
@select-color-placeholder_default: var(--color-text-3);
@select-color-placeholder_disabled: var(--color-text-4);
@select-color-placeholder_focused: var(--color-text-3);
@select-color-icon_default: var(--color-text-2);
@select-color-icon_disabled: var(--color-text-4);
@select-color-icon_focused: var(--color-text-2);
@select-color-icon-bg_hover: var(--color-fill-4);
@select-color-bg_default: var(--color-fill-2);
@select-color-bg_default_hover: var(--color-neutral-2);
@select-color-bg_default_focus: var(--color-bg-2);
@select-color-bg_error_focus: var(--color-bg-2);
@select-color-bg_error: var(--color-danger-light-1);
@select-color-bg_error_hover: rgb(var(--danger-1));
@select-color-bg_disabled: var(--color-fill-2);
@select-color-bg_disabled_hover: var(--color-fill-2);
@select-color-border_default: transparent;
@select-color-border_default_hover: transparent;
@select-color-border_default_focus: rgb(var(--primary-6));
@select-color-border_error: transparent;
@select-color-border_error_hover: transparent;
@select-color-border_error_focus: rgb(var(--danger-6));
@select-color-border_disabled: transparent;
@select-color-border_disabled_hover: transparent;
@select-shadow-distance_default_focus: 0;
@select-shadow-distance_error_focus: 0;
@select-color-shadow_default_focus: var(--color-primary-light-2);
@select-color-shadow_error_focus: var(--color-danger-light-2);
@select-popup-max-height: 200px;
@select-popup-border-radius: var(--border-radius-medium);
@select-popup-padding-vertical: 4px;
@select-popup-padding-horizontal: 0;
@select-popup-font-size: 14px;
@select-popup-color-bg: var(--color-bg-popup);
@select-popup-color-border: var(--color-fill-3);
@select-popup-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
@select-popup-option-height: 36px;
@select-popup-option-font-weight_selected: 500;
@select-signal-popup-option-padding-horizontal: 12px;
@select-multi-popup-option-padding-horizontal: 4px;
@select-popup-option-border-radius: 0;
@select-popup-option-color-bg_default: var(--color-bg-popup);
@select-popup-option-color-bg_hover: var(--color-fill-2);
@select-popup-option-color-bg_selected: var(--color-bg-popup);
@select-popup-option-color-bg_disabled: var(--color-bg-popup);
@select-popup-option-color-text_default: var(--color-text-1);
@select-popup-option-color-text_hover: var(--color-text-1);
@select-popup-option-color-text_selected: var(--color-text-1);
@select-popup-option-color-text_disabled: var(--color-text-4);
@select-popup-option-color-hightlight-text: var(--color-text-1);
@select-popup-option-font-hightlight-weight: 500;
@select-popup-group-title-height: 20px;
@select-popup-group-title-padding-horizontal: 12px;
@select-popup-group-title-padding-top: 8px;
@select-popup-group-title-font-size: 12px;
@select-popup-group-title-color-text: var(--color-text-3);
@select-prefix-cls-rtl: arco-select-rtl;

/*********** avatar ***********/

@avatar-size-default: 40px;
@avatar-color-text: var(--color-white);
@avatar-color-bg: var(--color-fill-4);
@avatar-color-group-item-border: var(--color-bg-2);
@avatar-group-item-border-width: 2px;
@avatar-group-item-margin-left: -10px;
@avatar-group-popover-item-spacing: 4px;
@avatar-font-weight-text: 500;
@avatar-font-size-text: 20px;
@avatar-circle-border-radius: var(--border-radius-circle);
@avatar-square-border-radius: var(--border-radius-medium);
@avatar-font-size-max-count: 20px;
@avatar-color-max-count-text: var(--color-white);
@avatar-size-trigger-button: 20px;
@avatar-spacing-trigger-button-right: 4px;
@avatar-spacing-trigger-button-bottom: 4px;
@avatar-color-trigger-button-bg: var(--color-neutral-2);
@avatar-color-trigger-button-bg_hover: var(--color-neutral-3);
@avatar-color-trigger-mask-icon: var(--color-white);
@avatar-opacity-trigger-mask-bg: 60%;
@avatar-color-trigger-icon-button: var(--color-fill-4);
@avatar-size-trigger-icon: 12px;
@avatar-border-trigger-button-radius: var(--border-radius-circle);
@avatar-prefix-cls: arco-avatar;

/*********** backtop ***********/

@backtop-margin-bottom: 24px;
@backtop-margin-right: 24px;
@backtop-button-size-width: 40px;
@backtop-button-size-font: 12px;
@backtop-button-size-icon: 14px;
@backtop-button-color-bg: rgb(var(--primary-6));
@backtop-button-color-bg_hover: rgb(var(--primary-5));
@backtop-button-border-radius: var(--border-radius-circle);
@backtop-button-color-text: var(--color-white);
@backtop-prefix-cls: arco-backtop;

/*********** badge ***********/

@badge-size-count-height: 20px;
@badge-padding-count-horizontal: 6px;
@badge-margin-status-text-left: 8px;
@badge-font-count-size: 12px;
@badge-font-status-text-size: 12px;
@badge-color-count-text: var(--color-white);
@badge-color-status-text: var(--color-text-1);
@badge-color-count-bg: rgb(var(--danger-6));
@badge-size-dot-width: 6px;
@badge-color-dot-bg_default: var(--color-fill-4);
@badge-color-dot-bg_processing: rgb(var(--primary-6));
@badge-color-dot-bg_success: rgb(var(--success-6));
@badge-color-dot-bg_warning: rgb(var(--warning-6));
@badge-color-dot-bg_error: rgb(var(--danger-6));
@badge-font-count-weight: 500;
@badge-red-color-dot-bg: rgb(var(--danger-6));
@badge-orangered-color-dot-bg: #f77234;
@badge-orange-color-dot-bg: rgb(var(--orange-6));
@badge-lime-color-dot-bg: rgb(var(--lime-6));
@badge-gold-color-dot-bg: rgb(var(--gold-6));
@badge-green-color-dot-bg: rgb(var(--success-6));
@badge-cyan-color-dot-bg: rgb(var(--cyan-6));
@badge-arcoblue-color-dot-bg: rgb(var(--primary-6));
@badge-pinkpurple-color-dot-bg: rgb(var(--pinkpurple-6));
@badge-purple-color-dot-bg: rgb(var(--purple-6));
@badge-magenta-color-dot-bg: rgb(var(--magenta-6));
@badge-gray-color-dot-bg: rgb(var(--gray-4));
@badge-prefix-cls: arco-badge;

/*********** breadcrumb ***********/

@breadcrumb-color-text: var(--color-text-2);
@breadcrumb-color-text_active: var(--color-text-1);
@breadcrumb-color-link-text: var(--color-text-2);
@breadcrumb-color-separator: var(--color-text-4);
@breadcrumb-color-bg: transparent;
@breadcrumb-color-bg_hover: var(--color-fill-2);
@breadcrumb-margin-separator-horizontal: 4px;
@breadcrumb-margin-dropdown-icon-left: 4px;
@breadcrumb-padding-text-horizontal: 4px;
@breadcrumb-border-text-radius_hover: var(--border-radius-small);
@breadcrumb-size-text-height: 24px;
@breadcrumb-size-dropdown-icon: 12px;
@breadcrumb-size-font-size: 14px;
@breadcrumb-font-weight_active: 500;
@breadcrumb-color-icon: var(--color-text-3);
@breadcrumb-color-link-text_hover: rgb(var(--link-6));
@breadcrumb-color-dropdown-icon: var(--color-text-2);
@breadcrumb-prefix-cls: arco-breadcrumb;

/*********** btn ***********/

@btn-font-weight: 400;
@btn-border-radius: var(--border-radius-small);
@btn-border-width: 1px;
@btn-size-mini-height: 24px;
@btn-size-small-height: 28px;
@btn-size-default-height: 32px;
@btn-size-large-height: 36px;
@btn-size-mini-radius: var(--border-radius-small);
@btn-size-small-radius: var(--border-radius-small);
@btn-size-default-radius: var(--border-radius-small);
@btn-size-large-radius: var(--border-radius-small);
@btn-size-mini-border-width: 1px;
@btn-size-small-border-width: 1px;
@btn-size-default-border-width: 1px;
@btn-size-large-border-width: 1px;
@btn-size-mini-icon-spacing: 4px;
@btn-size-small-icon-spacing: 6px;
@btn-size-default-icon-spacing: 8px;
@btn-size-large-icon-spacing: 8px;
@btn-size-mini-icon-vertical-align: -2px;
@btn-size-small-icon-vertical-align: -2px;
@btn-size-default-icon-vertical-align: -2px;
@btn-size-large-icon-vertical-align: -2px;
@btn-size-mini-padding-horizontal: 11px;
@btn-size-small-padding-horizontal: 15px;
@btn-size-default-padding-horizontal: 15px;
@btn-size-large-padding-horizontal: 19px;
@btn-size-mini-font-size: 12px;
@btn-size-small-font-size: 14px;
@btn-size-default-font-size: 14px;
@btn-size-large-font-size: 14px;
@btn-outline-color-text: rgb(var(--primary-6));
@btn-outline-color-text_disabled: var(--color-primary-light-3);
@btn-outline-color-text_hover: rgb(var(--primary-5));
@btn-outline-color-text_active: rgb(var(--primary-7));
@btn-outline-color-bg: transparent;
@btn-outline-color-bg_disabled: transparent;
@btn-outline-color-bg_hover: transparent;
@btn-outline-color-bg_active: transparent;
@btn-outline-color-border: rgb(var(--primary-6));
@btn-outline-color-border_disabled: var(--color-primary-light-3);
@btn-outline-color-border_hover: rgb(var(--primary-5));
@btn-outline-color-border_active: rgb(var(--primary-7));
@btn-outline-color-text_warning: rgb(var(--warning-6));
@btn-outline-color-text_warning_disabled: var(--color-warning-light-3);
@btn-outline-color-text_warning_hover: rgb(var(--warning-5));
@btn-outline-color-text_warning_active: rgb(var(--warning-7));
@btn-outline-color-bg_warning: transparent;
@btn-outline-color-bg_warning_disabled: transparent;
@btn-outline-color-bg_warning_hover: transparent;
@btn-outline-color-bg_warning_active: transparent;
@btn-outline-color-border_warning: rgb(var(--warning-6));
@btn-outline-color-border_warning_disabled: var(--color-warning-light-3);
@btn-outline-color-border_warning_hover: rgb(var(--warning-5));
@btn-outline-color-border_warning_active: rgb(var(--warning-7));
@btn-outline-color-text_danger: rgb(var(--danger-6));
@btn-outline-color-text_danger_disabled: var(--color-danger-light-3);
@btn-outline-color-text_danger_hover: rgb(var(--danger-5));
@btn-outline-color-text_danger_active: rgb(var(--danger-7));
@btn-outline-color-bg_danger: transparent;
@btn-outline-color-bg_danger_disabled: transparent;
@btn-outline-color-bg_danger_hover: transparent;
@btn-outline-color-bg_danger_active: transparent;
@btn-outline-color-border_danger: rgb(var(--danger-6));
@btn-outline-color-border_danger_disabled: var(--color-danger-light-3);
@btn-outline-color-border_danger_hover: rgb(var(--danger-5));
@btn-outline-color-border_danger_active: rgb(var(--danger-7));
@btn-outline-color-text_success: rgb(var(--success-6));
@btn-outline-color-text_success_disabled: var(--color-success-light-3);
@btn-outline-color-text_success_hover: rgb(var(--success-5));
@btn-outline-color-text_success_active: rgb(var(--success-7));
@btn-outline-color-bg_success: transparent;
@btn-outline-color-bg_success_disabled: transparent;
@btn-outline-color-bg_success_hover: transparent;
@btn-outline-color-bg_success_active: transparent;
@btn-outline-color-border_success: rgb(var(--success-6));
@btn-outline-color-border_success_disabled: var(--color-success-light-3);
@btn-outline-color-border_success_hover: rgb(var(--success-5));
@btn-outline-color-border_success_active: rgb(var(--success-7));
@btn-outline-border-style: solid;
@btn-primary-color-text: #fff;
@btn-primary-color-text_disabled: #fff;
@btn-primary-color-text_hover: #fff;
@btn-primary-color-text_active: #fff;
@btn-primary-color-bg: rgb(var(--primary-6));
@btn-primary-color-bg_disabled: var(--color-primary-light-3);
@btn-primary-color-bg_hover: rgb(var(--primary-5));
@btn-primary-color-bg_active: rgb(var(--primary-7));
@btn-primary-color-border: transparent;
@btn-primary-color-border_disabled: transparent;
@btn-primary-color-border_hover: transparent;
@btn-primary-color-border_active: transparent;
@btn-primary-color-text_warning: #fff;
@btn-primary-color-text_warning_disabled: #fff;
@btn-primary-color-text_warning_hover: #fff;
@btn-primary-color-text_warning_active: #fff;
@btn-primary-color-bg_warning: rgb(var(--warning-6));
@btn-primary-color-bg_warning_disabled: var(--color-warning-light-3);
@btn-primary-color-bg_warning_hover: rgb(var(--warning-5));
@btn-primary-color-bg_warning_active: rgb(var(--warning-7));
@btn-primary-color-border_warning: transparent;
@btn-primary-color-border_warning_disabled: transparent;
@btn-primary-color-border_warning_hover: transparent;
@btn-primary-color-border_warning_active: transparent;
@btn-primary-color-text_danger: #fff;
@btn-primary-color-text_danger_disabled: #fff;
@btn-primary-color-text_danger_hover: #fff;
@btn-primary-color-text_danger_active: #fff;
@btn-primary-color-bg_danger: rgb(var(--danger-6));
@btn-primary-color-bg_danger_disabled: var(--color-danger-light-3);
@btn-primary-color-bg_danger_hover: rgb(var(--danger-5));
@btn-primary-color-bg_danger_active: rgb(var(--danger-7));
@btn-primary-color-border_danger: transparent;
@btn-primary-color-border_danger_disabled: transparent;
@btn-primary-color-border_danger_hover: transparent;
@btn-primary-color-border_danger_active: transparent;
@btn-primary-color-text_success: #fff;
@btn-primary-color-text_success_disabled: #fff;
@btn-primary-color-text_success_hover: #fff;
@btn-primary-color-text_success_active: #fff;
@btn-primary-color-bg_success: rgb(var(--success-6));
@btn-primary-color-bg_success_disabled: var(--color-success-light-3);
@btn-primary-color-bg_success_hover: rgb(var(--success-5));
@btn-primary-color-bg_success_active: rgb(var(--success-7));
@btn-primary-color-border_success: transparent;
@btn-primary-color-border_success_disabled: transparent;
@btn-primary-color-border_success_hover: transparent;
@btn-primary-color-border_success_active: transparent;
@btn-primary-border-style: solid;
@btn-secondary-color-text: var(--color-text-2);
@btn-secondary-color-text_disabled: var(--color-text-4);
@btn-secondary-color-text_hover: var(--color-text-2);
@btn-secondary-color-text_active: var(--color-text-2);
@btn-secondary-color-bg: var(--color-secondary);
@btn-secondary-color-bg_disabled: var(--color-secondary-disabled);
@btn-secondary-color-bg_hover: var(--color-secondary-hover);
@btn-secondary-color-bg_active: var(--color-secondary-active);
@btn-secondary-color-border: transparent;
@btn-secondary-color-border_disabled: transparent;
@btn-secondary-color-border_hover: transparent;
@btn-secondary-color-border_active: transparent;
@btn-secondary-color-text_warning: rgb(var(--warning-6));
@btn-secondary-color-text_warning_disabled: var(--color-warning-light-3);
@btn-secondary-color-text_warning_hover: rgb(var(--warning-6));
@btn-secondary-color-text_warning_active: rgb(var(--warning-6));
@btn-secondary-color-bg_warning: var(--color-warning-light-1);
@btn-secondary-color-bg_warning_disabled: var(--color-warning-light-1);
@btn-secondary-color-bg_warning_hover: var(--color-warning-light-2);
@btn-secondary-color-bg_warning_active: var(--color-warning-light-3);
@btn-secondary-color-border_warning: transparent;
@btn-secondary-color-border_warning_disabled: transparent;
@btn-secondary-color-border_warning_hover: transparent;
@btn-secondary-color-border_warning_active: transparent;
@btn-secondary-color-text_danger: rgb(var(--danger-6));
@btn-secondary-color-text_danger_disabled: var(--color-danger-light-3);
@btn-secondary-color-text_danger_hover: rgb(var(--danger-6));
@btn-secondary-color-text_danger_active: rgb(var(--danger-6));
@btn-secondary-color-bg_danger: var(--color-danger-light-1);
@btn-secondary-color-bg_danger_disabled: var(--color-danger-light-1);
@btn-secondary-color-bg_d