wetrade-design/lib/style/themes/dark.less

一款多语言支持Vue3的UI框架

@import './default.less';

@theme: dark;

/** gray-sp */
// @gray-sp-1: #1F2029;
@gray-sp-2: #24252e;
@gray-sp-4: #272934;
@gray-sp-6: #31333f;
@gray-sp-8: #353641;
@gray-sp-10: #3f414d;
@gray-sp-12: #424450;
@gray-sp-16: #494b56;
@gray-sp-18: #4c4e5a;
@gray-sp-20: #4f515d;
@gray-sp-25: #585a65;
@gray-sp-30: #60626d;
@gray-sp-35: #686a75;
@gray-sp-40: #70727d;
@gray-sp-50: #80828c;
@gray-sp-60: #90929c;

/** blue-sp */
@blue-sp-2: #1b2337;
@blue-sp-4: #1e283e;
// @blue-sp-5: #202A41;
@blue-sp-6: #172b4f;
@blue-sp-8: #192d52;
@blue-sp-10: #1b315a;
@blue-sp-12: #1d3562;
@blue-sp-16: #203a6a;
@blue-sp-18: #223d70;
@blue-sp-20: #233f74;
@blue-sp-25: #26447e;
@blue-sp-30: #284884;
@blue-sp-35: #2a4d8d;
@blue-sp-40: #2d5195;
@blue-sp-t15: fade(@blue-600, 15%);

/** green-sp */
@green-sp-2: #21312d;
@green-sp-4: #243833;
@green-sp-6: #293d38;
@green-sp-8: #2b403b;
@green-sp-10: #2f4640;
@green-sp-12: #314943;

/** red-sp */
@red-sp-2: #331e22;
@red-sp-4: #3a2226;
@red-sp-6: #40262a;
@red-sp-8: #43282c;
@red-sp-10: #4a2b30;
@red-sp-12: #4d2d33;

/** orange-sp */
@orange-sp-2: #33281f;
@orange-sp-4: #392d22;
@orange-sp-6: #403226;
@orange-sp-8: #433428;
@orange-sp-10: #49392c;
@orange-sp-12: #4c3c2e;

/** 品牌橙 */
@orange-base: #ff7c29;
@orange-50: #3c281a;
@orange-100: #543217;
@orange-200: #663f19;
@orange-300: #914d21;
@orange-400: #c76223;
@orange-500: @orange-base;
@orange-600: #f5934d;
@orange-700: #f3ad73;
@orange-800: #f8c99d;
@orange-900: #fae1c5;
@orange-500-7: fade(@orange-500, 7%);

/** 日落黄 */
@sunset-base: #e89326;
@sunset-50: #3c2e1a;
@sunset-100: #543a17;
@sunset-200: #664519;
@sunset-300: #98591b;
@sunset-400: #c77c19;
@sunset-500: @sunset-base;
@sunset-600: #e8a33c;
@sunset-700: #f3bf65;
@sunset-800: #f8d48d;
@sunset-900: #fae6b7;
@sunset-500-7: fade(@sunset-500, 7%);

/** 柠檬黄 */
@sunglow-base: #d5b203;
@sunglow-50: #3c341b;
@sunglow-100: #524614;
@sunglow-200: #6c5e13;
@sunglow-300: #947e10;
@sunglow-400: #a88d08;
@sunglow-500: @sunglow-base;
@sunglow-600: #e8ce27;
@sunglow-700: #f3e34f;
@sunglow-800: #f8ef77;
@sunglow-900: #faf7a0;
@sunglow-500-7: fade(@sunglow-500, 7%);

/** 新生绿 */
@shamrock-base: #8bbe1c;
@shamrock-50: #2f3a1c;
@shamrock-100: #3a4d1a;
@shamrock-200: #4f661f;
@shamrock-300: #5e7c1d;
@shamrock-400: #6f961b;
@shamrock-500: @shamrock-base;
@shamrock-600: #a9d33f;
@shamrock-700: #caea6a;
@shamrock-800: #e3f898;
@shamrock-900: #f0fac1;
@shamrock-500-7: fade(@shamrock-500, 7%);

/** 绿色 */
@green-base: #1aab67;
@green-50: #163b2d;
@green-100: #1e4837;
@green-200: #0e6744;
@green-300: #077d4e;
@green-400: #0f905c;
@green-500: @green-base;
@green-600: #28c27a;
@green-700: #09d67a;
@green-800: #43de90;
@green-900: #81deb2;
@green-500-7: fade(@green-500, 7%);

/** 碧涛青 */
@viking-base: #14aeae;
@viking-50: #213d40;
@viking-100: #194c4d;
@viking-200: #1d6363;
@viking-300: #197676;
@viking-400: #158b8b;
@viking-500: @viking-base;
@viking-600: #35c3be;
@viking-700: #5bd9d0;
@viking-800: #88e9e0;
@viking-900: #b8f7f0;
@viking-500-7: fade(@viking-500, 7%);

/** 海蔚蓝 */
@malibu-base: #2598ea;
@malibu-50: #21374b;
@malibu-100: #1f4360;
@malibu-200: #24557a;
@malibu-300: #23689a;
@malibu-400: #237dbd;
@malibu-500: @malibu-base;
@malibu-600: #4bb0ed;
@malibu-700: #73c7f3;
@malibu-800: #9ddbf8;
@malibu-900: #c5ecfa;
@malibu-500-7: fade(@malibu-500, 7%);

/** 品牌蓝色 */
@blue-base: #4283ff;
@blue-50: #232f53;
@blue-100: #273868;
@blue-200: #284686;
@blue-300: #2956b2;
@blue-400: #2762d9;
@blue-500: #3578fd;
@blue-600: @blue-base;
@blue-700: #70a0ff;
@blue-800: #9ebfff;
@blue-900: #c2dbff;
@blue-500-7: fade(@blue-500, 7%);

/** 宝石蓝 */
@dorger-base: #2065ff;
@dorger-50: #252e46;
@dorger-100: #2b385e;
@dorger-200: #204392;
@dorger-300: #2150ba;
@dorger-400: #1d58db;
@dorger-500: @dorger-base;
@dorger-600: #3d7dfd;
@dorger-700: #689fff;
@dorger-800: #90bbfc;
@dorger-900: #b7d4fa;
@dorger-500-7: fade(@dorger-500, 7%);

/** 星空紫 */
@heliotrope-base: #6853ff;
@heliotrope-50: #2d2a4c;
@heliotrope-100: #34305a;
@heliotrope-200: #3f377b;
@heliotrope-300: #4a3f9d;
@heliotrope-400: #5240ce;
@heliotrope-500: @heliotrope-base;
@heliotrope-600: #7866ff;
@heliotrope-700: #9785ff;
@heliotrope-800: #c5bcf8;
@heliotrope-900: #d4c9ff;
@heliotrope-500-7: fade(@heliotrope-500, 7%);

/** 罗兰紫 */
@violet-base: #9242ff;
@violet-50: #312646;
@violet-100: #3b2857;
@violet-200: #492f6f;
@violet-300: #5b358f;
@violet-400: #733dbf;
@violet-500: @violet-base;
@violet-600: #a45cff;
@violet-700: #ba78ff;
@violet-800: #d2a9f8;
@violet-900: #e0befa;
@violet-500-7: fade(@violet-500, 7%);

/** 青春紫 */
@purple-base: #d02fd0;
@purple-50: #392239;
@purple-100: #461f47;
@purple-200: #5f1c5f;
@purple-300: #771777;
@purple-400: #a117a1;
@purple-500: @purple-base;
@purple-600: #e13cdb;
@purple-700: #f367ea;
@purple-800: #f890ed;
@purple-900: #fabaf2;
@purple-500-7: fade(@purple-500, 7%);

/** 品红 */
@rosein-base: #e03393;
@rosein-50: #431e36;
@rosein-100: #511f3c;
@rosein-200: #671e46;
@rosein-300: #851e57;
@rosein-400: #ae1f6e;
@rosein-500: @rosein-base;
@rosein-600: #e8489a;
@rosein-700: #f370b0;
@rosein-800: #f89ac5;
@rosein-900: #fac3da;
@rosein-500-7: fade(@rosein-500, 7%);

/** 红色 */
@red-base: #d53545;
@red-50: #462023;
@red-100: #572329;
@red-200: #6d272e;
@red-300: #902d37;
@red-400: #a92d39;
@red-500: @red-base;
@red-600: #f03043;
@red-700: #ff5263;
@red-800: #ff7885;
@red-900: #fbc6c9;
@red-500-7: fade(@red-500, 7%);

/** 灰色 */
@gray-base: #7a8099;
@gray-00: #000000;
// @gray-25: #08090d;
// @gray-40: #191C24;
@gray-50: #1f2128;
// @gray-80:#13151B;
@gray-100: #2f313d;
@gray-200: #424555;
@gray-300: #54596d;
@gray-400: #646982;
@gray-500: @gray-base;
@gray-600: #9094a9;
@gray-700: #b2b5c3;
@gray-800: #d1d3dc;
@gray-900: #f0f1f4;
@gray-1000: #fff;
@gray-1100: #f5f6fa;
// @gray-00-40: fade(@gray-00, 40%);
@gray-500-7: fade(@gray-500, 7%);
@gray-500-10: fade(@gray-500, 10%);
@gray-500-20: fade(@gray-500, 20%);

// color palettes
@blue-1: mix(color(~`colorPalette('@{blue-base}', 8) `), @component-background, 15%);
@blue-2: mix(color(~`colorPalette('@{blue-base}', 7) `), @component-background, 25%);
@blue-3: mix(@blue-base, @component-background, 30%);
@blue-4: mix(@blue-base, @component-background, 45%);
@blue-5: mix(@blue-base, @component-background, 65%);
@blue-6: mix(@blue-base, @component-background, 85%);
@blue-7: mix(color(~`colorPalette('@{blue-base}', 5) `), @component-background, 90%);
@blue-8: mix(color(~`colorPalette('@{blue-base}', 4) `), @component-background, 95%);
@blue-9: mix(color(~`colorPalette('@{blue-base}', 3) `), @component-background, 97%);
@blue-10: mix(color(~`colorPalette('@{blue-base}', 2) `), @component-background, 98%);

@purple-1: mix(color(~`colorPalette('@{purple-base}', 8) `), @component-background, 15%);
@purple-2: mix(color(~`colorPalette('@{purple-base}', 7) `), @component-background, 25%);
@purple-3: mix(@purple-base, @component-background, 30%);
@purple-4: mix(@purple-base, @component-background, 45%);
@purple-5: mix(@purple-base, @component-background, 65%);
@purple-6: mix(@purple-base, @component-background, 85%);
@purple-7: mix(color(~`colorPalette('@{purple-base}', 5) `), @component-background, 90%);
@purple-8: mix(color(~`colorPalette('@{purple-base}', 4) `), @component-background, 95%);
@purple-9: mix(color(~`colorPalette('@{purple-base}', 3) `), @component-background, 97%);
@purple-10: mix(color(~`colorPalette('@{purple-base}', 2) `), @component-background, 98%);

@cyan-1: mix(color(~`colorPalette('@{cyan-base}', 8) `), @component-background, 15%);
@cyan-2: mix(color(~`colorPalette('@{cyan-base}', 7) `), @component-background, 25%);
@cyan-3: mix(@cyan-base, @component-background, 30%);
@cyan-4: mix(@cyan-base, @component-background, 45%);
@cyan-5: mix(@cyan-base, @component-background, 65%);
@cyan-6: mix(@cyan-base, @component-background, 85%);
@cyan-7: mix(color(~`colorPalette('@{cyan-base}', 5) `), @component-background, 90%);
@cyan-8: mix(color(~`colorPalette('@{cyan-base}', 4) `), @component-background, 95%);
@cyan-9: mix(color(~`colorPalette('@{cyan-base}', 3) `), @component-background, 97%);
@cyan-10: mix(color(~`colorPalette('@{cyan-base}', 2) `), @component-background, 98%);

@green-1: mix(color(~`colorPalette('@{green-base}', 8) `), @component-background, 15%);
@green-2: mix(color(~`colorPalette('@{green-base}', 7) `), @component-background, 25%);
@green-3: mix(@green-base, @component-background, 30%);
@green-4: mix(@green-base, @component-background, 45%);
@green-5: mix(@green-base, @component-background, 65%);
@green-6: mix(@green-base, @component-background, 85%);
@green-7: mix(color(~`colorPalette('@{green-base}', 5) `), @component-background, 90%);
@green-8: mix(color(~`colorPalette('@{green-base}', 4) `), @component-background, 95%);
@green-9: mix(color(~`colorPalette('@{green-base}', 3) `), @component-background, 97%);
@green-10: mix(color(~`colorPalette('@{green-base}', 2) `), @component-background, 98%);

@magenta-1: mix(color(~`colorPalette('@{magenta-base}', 8) `), @component-background, 15%);
@magenta-2: mix(color(~`colorPalette('@{magenta-base}', 7) `), @component-background, 25%);
@magenta-3: mix(@magenta-base, @component-background, 30%);
@magenta-4: mix(@magenta-base, @component-background, 45%);
@magenta-5: mix(@magenta-base, @component-background, 65%);
@magenta-6: mix(@magenta-base, @component-background, 85%);
@magenta-7: mix(color(~`colorPalette('@{magenta-base}', 5) `), @component-background, 90%);
@magenta-8: mix(color(~`colorPalette('@{magenta-base}', 4) `), @component-background, 95%);
@magenta-9: mix(color(~`colorPalette('@{magenta-base}', 3) `), @component-background, 97%);
@magenta-10: mix(color(~`colorPalette('@{magenta-base}', 2) `), @component-background, 98%);

@pink-1: mix(color(~`colorPalette('@{pink-base}', 8) `), @component-background, 15%);
@pink-2: mix(color(~`colorPalette('@{pink-base}', 7) `), @component-background, 25%);
@pink-3: mix(@pink-base, @component-background, 30%);
@pink-4: mix(@pink-base, @component-background, 45%);
@pink-5: mix(@pink-base, @component-background, 65%);
@pink-6: mix(@pink-base, @component-background, 85%);
@pink-7: mix(color(~`colorPalette('@{pink-base}', 5) `), @component-background, 90%);
@pink-8: mix(color(~`colorPalette('@{pink-base}', 4) `), @component-background, 95%);
@pink-9: mix(color(~`colorPalette('@{pink-base}', 3) `), @component-background, 97%);
@pink-10: mix(color(~`colorPalette('@{pink-base}', 2) `), @component-background, 98%);

@red-1: mix(color(~`colorPalette('@{red-base}', 8) `), @component-background, 15%);
@red-2: mix(color(~`colorPalette('@{red-base}', 7) `), @component-background, 25%);
@red-3: mix(@red-base, @component-background, 30%);
@red-4: mix(@red-base, @component-background, 45%);
@red-5: mix(@red-base, @component-background, 65%);
@red-6: mix(@red-base, @component-background, 85%);
@red-7: mix(color(~`colorPalette('@{red-base}', 5) `), @component-background, 90%);
@red-8: mix(color(~`colorPalette('@{red-base}', 4) `), @component-background, 95%);
@red-9: mix(color(~`colorPalette('@{red-base}', 3) `), @component-background, 97%);
@red-10: mix(color(~`colorPalette('@{red-base}', 2) `), @component-background, 98%);

/** 品牌橙 */
@orange-1: mix(color(~`colorPalette('@{orange-base}', 8) `), @component-background, 15%);
@orange-2: mix(color(~`colorPalette('@{orange-base}', 7) `), @component-background, 25%);
@orange-3: mix(@orange-base, @component-background, 30%);
@orange-4: mix(@orange-base, @component-background, 45%);
@orange-5: mix(@orange-base, @component-background, 65%);
@orange-6: mix(@orange-base, @component-background, 85%);
@orange-7: mix(color(~`colorPalette('@{orange-base}', 5) `), @component-background, 90%);
@orange-8: mix(color(~`colorPalette('@{orange-base}', 4) `), @component-background, 95%);
@orange-9: mix(color(~`colorPalette('@{orange-base}', 3) `), @component-background, 97%);
@orange-10: mix(color(~`colorPalette('@{orange-base}', 2) `), @component-background, 98%);

@yellow-1: mix(color(~`colorPalette('@{yellow-base}', 8) `), @component-background, 15%);
@yellow-2: mix(color(~`colorPalette('@{yellow-base}', 7) `), @component-background, 25%);
@yellow-3: mix(@yellow-base, @component-background, 30%);
@yellow-4: mix(@yellow-base, @component-background, 45%);
@yellow-5: mix(@yellow-base, @component-background, 65%);
@yellow-6: mix(@yellow-base, @component-background, 85%);
@yellow-7: mix(color(~`colorPalette('@{yellow-base}', 5) `), @component-background, 90%);
@yellow-8: mix(color(~`colorPalette('@{yellow-base}', 4) `), @component-background, 95%);
@yellow-9: mix(color(~`colorPalette('@{yellow-base}', 3) `), @component-background, 97%);
@yellow-10: mix(color(~`colorPalette('@{yellow-base}', 2) `), @component-background, 98%);

@volcano-1: mix(color(~`colorPalette('@{volcano-base}', 8) `), @component-background, 15%);
@volcano-2: mix(color(~`colorPalette('@{volcano-base}', 7) `), @component-background, 25%);
@volcano-3: mix(@volcano-base, @component-background, 30%);
@volcano-4: mix(@volcano-base, @component-background, 45%);
@volcano-5: mix(@volcano-base, @component-background, 65%);
@volcano-6: mix(@volcano-base, @component-background, 85%);
@volcano-7: mix(color(~`colorPalette('@{volcano-base}', 5) `), @component-background, 90%);
@volcano-8: mix(color(~`colorPalette('@{volcano-base}', 4) `), @component-background, 95%);
@volcano-9: mix(color(~`colorPalette('@{volcano-base}', 3) `), @component-background, 97%);
@volcano-10: mix(color(~`colorPalette('@{volcano-base}', 2) `), @component-background, 98%);

@geekblue-1: mix(color(~`colorPalette('@{geekblue-base}', 8) `), @component-background, 15%);
@geekblue-2: mix(color(~`colorPalette('@{geekblue-base}', 7) `), @component-background, 25%);
@geekblue-3: mix(@geekblue-base, @component-background, 30%);
@geekblue-4: mix(@geekblue-base, @component-background, 45%);
@geekblue-5: mix(@geekblue-base, @component-background, 65%);
@geekblue-6: mix(@geekblue-base, @component-background, 85%);
@geekblue-7: mix(color(~`colorPalette('@{geekblue-base}', 5) `), @component-background, 90%);
@geekblue-8: mix(color(~`colorPalette('@{geekblue-base}', 4) `), @component-background, 95%);
@geekblue-9: mix(color(~`colorPalette('@{geekblue-base}', 3) `), @component-background, 97%);
@geekblue-10: mix(color(~`colorPalette('@{geekblue-base}', 2) `), @component-background, 98%);

@lime-1: mix(color(~`colorPalette('@{lime-base}', 8) `), @component-background, 15%);
@lime-2: mix(color(~`colorPalette('@{lime-base}', 7) `), @component-background, 25%);
@lime-3: mix(@lime-base, @component-background, 30%);
@lime-4: mix(@lime-base, @component-background, 45%);
@lime-5: mix(@lime-base, @component-background, 65%);
@lime-6: mix(@lime-base, @component-background, 85%);
@lime-7: mix(color(~`colorPalette('@{lime-base}', 5) `), @component-background, 90%);
@lime-8: mix(color(~`colorPalette('@{lime-base}', 4) `), @component-background, 95%);
@lime-9: mix(color(~`colorPalette('@{lime-base}', 3) `), @component-background, 97%);
@lime-10: mix(color(~`colorPalette('@{lime-base}', 2) `), @component-background, 98%);

@gold-1: mix(color(~`colorPalette('@{gold-base}', 8) `), @component-background, 15%);
@gold-2: mix(color(~`colorPalette('@{gold-base}', 7) `), @component-background, 25%);
@gold-3: mix(@gold-base, @component-background, 30%);
@gold-4: mix(@gold-base, @component-background, 45%);
@gold-5: mix(@gold-base, @component-background, 65%);
@gold-6: mix(@gold-base, @component-background, 85%);
@gold-7: mix(color(~`colorPalette('@{gold-base}', 5) `), @component-background, 90%);
@gold-8: mix(color(~`colorPalette('@{gold-base}', 4) `), @component-background, 95%);
@gold-9: mix(color(~`colorPalette('@{gold-base}', 3) `), @component-background, 97%);
@gold-10: mix(color(~`colorPalette('@{gold-base}', 2) `), @component-background, 98%);

// Color used by default to control hover and active backgrounds and for
// alert info backgrounds.
@primary-1: mix(color(~`colorPalette('@{brand-primary}', 8) `), @component-background, 15%);
@primary-2: mix(color(~`colorPalette('@{brand-primary}', 7) `), @component-background, 25%);
@primary-3: mix(@brand-primary, @component-background, 30%);
@primary-4: mix(@brand-primary, @component-background, 45%);
@primary-5: mix(@brand-primary, @component-background, 65%);
@primary-6: @brand-primary;
@primary-7: mix(color(~`colorPalette('@{brand-primary}', 5) `), @component-background, 90%);
@primary-8: mix(color(~`colorPalette('@{brand-primary}', 4) `), @component-background, 95%);
@primary-9: mix(color(~`colorPalette('@{brand-primary}', 3) `), @component-background, 97%);
@primary-10: mix(color(~`colorPalette('@{brand-primary}', 2) `), @component-background, 98%);

// Layer background
@popover-background: #1f1f1f;
// @gray-300  opacity 0.9
@popover-background-9: fade(@gray-300, 90%);
@popover-customize-border-color: #3a3a3a;
@body-background: @black;
@component-background: #141414;

@text-color: fade(@white, 85%);
@text-color-secondary: fade(@white, 45%);
@text-color-inverse: @white;
@icon-color-hover: fade(@white, 75%);
@heading-color: fade(@white, 85%);

// The background colors for active and hover states for things like
// list items or table cells.
@item-active-bg: @primary-1;
@item-hover-bg: fade(@white, 8%);

// Border color
@border-color-base: #434343; // base border outline a component
@border-color-split: #303030; // split border inside a component
@border-width-base: 1px; // width of the border for a component
@border-style-base: solid; // style of a components border

@background-color-light: fade(@white, 4%); // background of header and selected item
@background-color-base: fade(@white, 8%); // Default grey background color

// Disabled states
@disabled-color: fade(@white, 30%);
@disabled-bg: @background-color-base;
@disabled-color-dark: fade(@white, 30%);

// Tree
// ---
@tree-bg: transparent;

// List
// ---
@list-customize-card-bg: transparent;

// Shadow
// ---
@shadow-color: rgba(0, 0, 0, 0.45);
@shadow-color-inverse: @component-background;
@box-shadow-base: @shadow-2;
@shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.32), 0 -9px 28px 0 rgba(0, 0, 0, 0.2),
  0 -12px 48px 16px rgba(0, 0, 0, 0.12);
@shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.32), 0 9px 28px 0 rgba(0, 0, 0, 0.2),
  0 12px 48px 16px rgba(0, 0, 0, 0.12);
@shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.32), 9px 0 28px 0 rgba(0, 0, 0, 0.2),
  12px 0 48px 16px rgba(0, 0, 0, 0.12);
@shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32),
  0 9px 28px 8px rgba(0, 0, 0, 0.2);

// new shadow
@shadow-100-canvas: 0 2px 8px rgba(0, 0, 0, 5%);
@shadow-200-drop: 0 4px 12px rgba(0, 0, 0, 8%), 0 0px 0.5px rgba(0, 0, 0, 20%);
@shadow-300-modal: 0 0px 0.5px rgba(0, 0, 0, 20%), 0 4px 8px rgba(0, 0, 0, 4%),
  0 12px 24px 2px rgba(0, 0, 0, 8%);
@shadow-module-top: 0px 0.5px 0.5px rgba(0, 0, 0, 0.15), 0px 4px 16px rgba(106, 113, 136, 0.05),
  0px 2px 4px -1px rgba(106, 113, 136, 0.02);
@shadow-module-bottom: 0px -0.5px 0.5px rgba(0, 0, 0, 0.15), 0px -4px 16px rgba(106, 113, 136, 0.05),
  0px -2px 4px -1px rgba(106, 113, 136, 0.02);
@shadow-module-right: 4px 0px 16px rgba(106, 113, 136, 0.05),
  2px 0px 4px -1px rgba(106, 113, 136, 0.02);
@shadow-module-left: -4px 0px 16px rgba(106, 113, 136, 0.05),
  -2px 0px 4px -1px rgba(106, 113, 136, 0.02);

// Buttons
// ---
@btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
@btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
@btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);

@btn-default-bg: transparent;

@btn-default-ghost-color: @text-color;
@btn-default-ghost-border: fade(@white, 25%);

@btn-text-hover-bg: rgba(255, 255, 255, 0.03);

// Checkbox
// ---
@checkbox-check-bg: transparent;
@checkbox-indeter-bg: @white;

// Descriptions
// ---
@descriptions-bg: @background-color-light;

// Divider
// ---
@divider-color: @gray-100;
@divider-color-text: @gray-900;
@divider-color-line:@border-width-base @border-style-base @gray-100;

// Modal
// ---
@modal-header-bg: @bg-dialog;
@modal-header-border-color-split: @border-color-split;
@modal-content-bg: @popover-background;
@modal-footer-border-color-split: @border-color-split;

// Radio
// ---
@radio-solid-checked-color: @white;
@radio-dot-disabled-color: fade(@white, 20%);

// Radio buttons
// ---
@radio-disabled-button-checked-bg: fade(@white, 20%);
@radio-disabled-button-checked-color: @disabled-color;

// Layout
// ---
@layout-body-background: @body-background;
@layout-header-background: @popover-background;
@layout-trigger-background: #262626;

// Input
// ---
@input-bg: @bg-page;
@input-placeholder-color: @text-tertiary;
@input-icon-color: fade(@white, 30%);
@input-number-handler-active-bg: @item-hover-bg;
@input-icon-hover-color: fade(@white, 85%);

// Select
// ---
@select-background: transparent;
@select-dropdown-bg: @popover-background;
@select-clear-background: @component-background;
@select-selection-item-bg: fade(@white, 8);
@select-selection-item-border-color: @border-color-split;
@select-multiple-disabled-background: @fill-fill;
@select-multiple-item-disabled-color: @text-disable;
@select-multiple-item-disabled-border-color: @popover-background;

// Cascader
// ---
@cascader-bg: transparent;
@cascader-menu-bg: @popover-background;
@cascader-menu-border-color-split: @border-color-split;
@cascader-menu-expand-icon-color: @text-secondary;

// Tooltip
// ---
// Tooltip text color
@tooltip-color: @gray-50;
// Tooltip background color
@tooltip-bg: @gray-1100;

// Menu
// ---
// dark theme
@menu-dark-inline-submenu-bg: @component-background;
@menu-dark-bg: @popover-background;
@menu-popup-bg: @popover-background;

// Message
// ---
@message-notice-content-bg: @popover-background;

// Notification
@notification-bg: @popover-background;

// LINK
@link-hover-color: @primary-5;
@link-active-color: @primary-7;

// Table
// --
@table-header-bg: #1d1d1d;
@table-body-sort-bg: @bg-page;
@table-row-hover-bg: #262626;
@table-header-cell-split-color: fade(@white, 8%);
@table-header-sort-bg: #262626;
@table-header-filter-active-bg: #434343;
@table-header-sort-active-bg: #303030;
@table-fixed-header-sort-active-bg: #222;
@table-filter-btns-bg: @popover-background;
@table-expanded-row-bg: @table-header-bg;
@table-filter-dropdown-bg: @dropdown-menu-bg;
@table-expand-icon-bg: transparent;

// Tag
// ---
@trade-buy-buy-deprecated-bg: @primary-1;
@trade-buy-buy-deprecated-border: @primary-3;
@fluctuation-fall-deprecated-bg: @green-1;
@fluctuation-fall-deprecated-border: @green-3;
@trade-selling-sellinging-deprecated-bg: @orange-50;
@trade-selling-sellinging-deprecated-border: @orange-200;
@fluctuation-rise-rise-deprecated-bg: @red-1;
@fluctuation-rise-rise-deprecated-border: @red-3;

// TimePicker
// ---
@picker-basic-cell-hover-with-range-color: darken(@brand-primary, 35%);
@picker-basic-cell-disabled-bg: #303030;
@picker-border-color: @border-color-split;
@picker-bg: transparent;
@picker-date-hover-range-border-color: darken(@brand-primary, 20%);

// Dropdown
// ---
@dropdown-menu-bg: @popover-background;
// @dropdown-menu-submenu-disabled-bg: transparent;

// Steps
// ---
@steps-nav-arrow-color: fade(@white, 20%);
@steps-background: transparent;

// Avatar
// ---
@avatar-bg: fade(@white, 30%);

// Progress
// ---
@progress-steps-item-bg: fade(@white, 8%);

// Calendar
// ---
@calendar-bg: @popover-background;
@calendar-input-bg: @calendar-bg;
@calendar-border-color: transparent;
@calendar-full-bg: @component-background;

// Badge
// ---
@badge-text-color: @white;

// Popover
// ---
@popover-bg: @popover-background-9;
// Popover text color
@popover-title-color: @gray-900;
@popover-content-colo: @gray-700;
@popover-border-shadow: inset 0 0 @border-width-base @gray-50;

// Drawer
@drawer-bg: @popover-background;

// Card
// ---
@card-actions-background: @component-background;
@card-skeleton-bg: #303030;
@card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.64), 0 3px 6px 0 rgba(0, 0, 0, 0.48),
  0 5px 12px 4px rgba(0, 0, 0, 0.36);

// Transfer
// ---
@transfer-item-hover-bg: #262626;

// Comment
// ---
@comment-bg: transparent;
@comment-author-time-color: fade(@white, 30%);
@comment-action-hover-color: fade(@white, 65%);

// Rate
// ---
@rate-star-bg: fade(@white, 12%);

// Switch
// ---
@switch-bg: @icon-white;

// Pagination
// ---
@pagination-item-bg: transparent;
@pagination-item-bg-active: transparent;
@pagination-item-link-bg: transparent;
@pagination-item-disabled-bg-active: fade(@white, 25%);
@pagination-item-disabled-color-active: @black;
@pagination-item-input-bg: @pagination-item-bg;

// PageHeader
// ---
@page-header-back-color: @icon-color;
@page-header-ghost-bg: transparent;

// Slider
// ---
@slider-rail-background-color: #262626;
@slider-rail-background-color-hover: @border-color-base;
@slider-dot-border-color: @border-color-split;
@slider-dot-border-color-active: @primary-4;

// Skeleton
// ---
@skeleton-to-color: fade(@white, 16%);

// Alert
// ---
@alert-success-border-color: @green-3;
@alert-success-bg-color: @green-1;
@alert-success-icon-color: @fluctuation-fall-fall;
@alert-info-border-color: @primary-3;
@alert-info-bg-color: @primary-1;
@alert-info-icon-color: @trade-buy-buy;
@alert-warning-border-color: @gold-3;
@alert-warning-bg-color: @gold-1;
@alert-warning-icon-color: @trade-selling-sellinging;
@alert-error-border-color: @red-3;
@alert-error-bg-color: @red-1;
@alert-error-icon-color: @fluctuation-rise-rise;

// Timeline
// ---
@timeline-color: @border-color-split;
@timeline-dot-color: @brand-primary;

// Mentions
// ---
@mentions-dropdown-bg: @popover-background;

// Tabs
@tabs-btn-hover: @gray-100;