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

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

/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
@import '../color/colors';

// 适用于明亮主题

@theme: variable;

// The prefix to use on all css classes from wd.
@wd-prefix: wd;

// An override for the html selector for theme prefixes
@html-selector: html;

@base-primary: @blue-600;
@gray-150: #e7e8ef;
@gray-600-40: fade(@gray-600, 40%);

html {
  // ========= Primary Color =========
  --@{wd-prefix}-brand-primary: @base-primary;
  --@{wd-prefix}-brand-hover: @blue-500;
  --@{wd-prefix}-brand-active: @blue-700;
  --@{wd-prefix}-brand-primary-outline: fade(@base-primary, @outline-fade); // 非自主定义的
  --@{wd-prefix}-brand-disable: @blue-200;
  --@{wd-prefix}-brand-extra-light: @blue-sp-8;
  --@{wd-prefix}-brand-lighter: @blue-sp-30;
  --@{wd-prefix}-brand-text: @blue-600;
  --@{wd-prefix}-brand-light: @blue-sp-18;

  // Legacy
  @legacy-primary-1: @blue-100;

  --@{wd-prefix}-primary-1: @legacy-primary-1;
  --@{wd-prefix}-primary-2: color(~`colorPalette('@{base-primary}', 2) `);
  --@{wd-prefix}-primary-3: color(~`colorPalette('@{base-primary}', 3) `);
  --@{wd-prefix}-primary-4: color(~`colorPalette('@{base-primary}', 4) `);
  --@{wd-prefix}-primary-5: color(~`colorPalette('@{base-primary}', 5) `);
  --@{wd-prefix}-primary-6: @base-primary;
  --@{wd-prefix}-primary-7: color(~`colorPalette('@{base-primary}', 7) `);

  // Deprecated
  --@{wd-prefix}-brand-primary-deprecated-pure: ~'';
  --@{wd-prefix}-brand-primary-deprecated-l-35: lighten(@base-primary, 35%);
  --@{wd-prefix}-brand-primary-deprecated-l-20: lighten(@base-primary, 20%);
  --@{wd-prefix}-brand-primary-deprecated-t-20: tint(@base-primary, 20%);
  --@{wd-prefix}-brand-primary-deprecated-t-50: tint(@base-primary, 50%);
  --@{wd-prefix}-brand-primary-deprecated-f-12: fade(@base-primary, 12%);
  --@{wd-prefix}-brand-primary-active-deprecated-f-30: fade(@legacy-primary-1, 30%);
  --@{wd-prefix}-brand-primary-active-deprecated-d-02: darken(@legacy-primary-1, 2%);

  // ========= Success Color =========
  --@{wd-prefix}-fluctuation-fall-fall: @green-500;
  --@{wd-prefix}-fluctuation-fall-hover: @green-400;
  --@{wd-prefix}-fluctuation-fall-active: @green-600;
  --@{wd-prefix}-fluctuation-fall-disable: @green-200;
  --@{wd-prefix}-fluctuation-fall-light-1: @green-sp-6;
  --@{wd-prefix}-fluctuation-fall-light-2: @green-100;
  --@{wd-prefix}-fluctuation-fall-text: @green-700;
  --@{wd-prefix}-fluctuation-fall-fall-outline: fade(@green-6, @outline-fade);
  --@{wd-prefix}-fluctuation-fall-deprecated-bg: ~`colorPalette('@{green-6}', 1) `;
  --@{wd-prefix}-fluctuation-fall-deprecated-border: ~`colorPalette('@{green-6}', 3) `;

  // ========== rise Color ==========
  --@{wd-prefix}-fluctuation-rise-rise: @red-500;
  --@{wd-prefix}-fluctuation-rise-hover: @red-400;
  --@{wd-prefix}-fluctuation-rise-active: @red-600;
  --@{wd-prefix}-fluctuation-rise-disable: @red-200;
  --@{wd-prefix}-fluctuation-rise-light-1: @red-sp-6;
  --@{wd-prefix}-fluctuation-rise-light-2: @red-100;
  --@{wd-prefix}-fluctuation-rise-text: @red-700;
  --@{wd-prefix}-fluctuation-rise-rise-outline: fade(@red-5, @outline-fade);
  --@{wd-prefix}-fluctuation-rise-rise-deprecated-bg: ~`colorPalette('@{red-5}', 1) `;
  --@{wd-prefix}-fluctuation-rise-rise-deprecated-border: ~`colorPalette('@{red-5}', 3) `;

  // ========= Warning Color =========
  --@{wd-prefix}-trade-selling-sellinging: @orange-500;
  --@{wd-prefix}-trade-selling-hover: @orange-400;
  --@{wd-prefix}-trade-selling-active: @orange-600;
  --@{wd-prefix}-trade-selling-disable: @orange-200;
  --@{wd-prefix}-trade-selling-light-1: @orange-sp-4;
  --@{wd-prefix}-trade-selling-light-2: @orange-100;
  --@{wd-prefix}-trade-selling-text: @orange-600;

  --@{wd-prefix}-trade-selling-sellinging-outline: fade(@gold-6, @outline-fade);
  --@{wd-prefix}-trade-selling-sellinging-deprecated-bg: ~`colorPalette('@{gold-6}', 1) `;
  --@{wd-prefix}-trade-selling-sellinging-deprecated-border: ~`colorPalette('@{gold-6}', 3) `;

  // ========== Info Color ===========
  --@{wd-prefix}-trade-buy-buy: @blue-500;
  --@{wd-prefix}-trade-buy-hover: @blue-400;
  --@{wd-prefix}-trade-buy-active: @blue-600;
  --@{wd-prefix}-trade-buy-disable: @blue-200;
  --@{wd-prefix}-trade-buy-light-1: @blue-sp-6;
  --@{wd-prefix}-trade-buy-light-2: @blue-100;
  --@{wd-prefix}-trade-buy-text: @blue-600;
  --@{wd-prefix}-trade-buy-buy-deprecated-bg: ~`colorPalette('@{base-primary}', 1) `;
  --@{wd-prefix}-trade-buy-buy-deprecated-border: ~`colorPalette('@{base-primary}', 3) `;

  // =========== Gray Color ===========
  --@{wd-prefix}-fluctuation-flat-flat: @gray-400;
  --@{wd-prefix}-fluctuation-flat-hover: @gray-300;
  --@{wd-prefix}-fluctuation-flat-active: @gray-500;
  --@{wd-prefix}-fluctuation-flat-disable: @gray-200;
  --@{wd-prefix}-fluctuation-flat-light-1: @gray-50;
  --@{wd-prefix}-fluctuation-flat-light-2: @gray-100;
  --@{wd-prefix}-fluctuation-flat-text: @gray-700;

  // ========== Text Color ===========
  --@{wd-prefix}-text-primary: @gray-900;
  --@{wd-prefix}-text-secondary: @gray-600;
  --@{wd-prefix}-text-tertiary: @gray-500;
  --@{wd-prefix}-text-disable: @gray-300;
  --@{wd-prefix}-text-white: @gray-1000;
  --@{wd-prefix}-text-white-disable: @gray-1000;
  --@{wd-prefix}-text-tab: @blue-600;

  // ========== Background Color ===========
  --@{wd-prefix}-bg-dialog: @gray-1000;
  --@{wd-prefix}-bg-tooltip: @gray-1000;
  --@{wd-prefix}-bg-dropdown: @gray-1000;
  --@{wd-prefix}-bg-page: @gray-1000;
  --@{wd-prefix}-bg-base: @gray-150;
  // loading 背景色 token
  --@{wd-prefix}-bg-page-90: fade(@gray-1000, 90%);

  // ========== Icon Color ===========
  --@{wd-prefix}-icon-tertiary: @gray-500;
  --@{wd-prefix}-icon-secondary: @gray-600;
  --@{wd-prefix}-icon-primary: @gray-900;
  --@{wd-prefix}-icon-disable: @gray-300;
  --@{wd-prefix}-icon-white: @gray-1000;
  --@{wd-prefix}-icon-white-disable: @gray-1000;

  // ========== Line Color ===========
  --@{wd-prefix}-line-table: fade(@gray-100, 80%);
  --@{wd-prefix}-line-devide: @gray-150;
  --@{wd-prefix}-line-border: @gray-200;

  // ========== filled Color ===========
  --@{wd-prefix}-fill-blank: @gray-1000;
  --@{wd-prefix}-fill-blank-lighter: @gray-1000;
  --@{wd-prefix}-fill-fill: @gray-50;
  --@{wd-prefix}-fill-fill-deep: @gray-sp-12;
  --@{wd-prefix}-fill-fill-deeper: @gray-sp-16;
  // 新增
  --@{wd-prefix}-fill-white: @gray-1000;
  --@{wd-prefix}-fill-black: @gray-00;
  --@{wd-prefix}-fill-fill-light: @gray-sp-4;
  --@{wd-prefix}-fill-fill-even-deeper: @gray-sp-18;
  --@{wd-prefix}-fill-fill-much-deeper: @gray-sp-20;

  // ========== Special Color ===========
  --@{wd-prefix}-sp-shadow: @gray-00;
  --@{wd-prefix}-sp-scroll-bar: @gray-sp-16;
  --@{wd-prefix}-sp-overlay: @gray-600-40;
  --@{wd-prefix}-sp-sider: @gray-150;
  --@{wd-prefix}-sp-hover-bar: @gray-500-10;
  --@{wd-prefix}-sp-hover-bar-active: @gray-500-20;
  --@{wd-prefix}-sp-tooltips: @gray-900;
  --@{wd-prefix}-sp-tooltips-text: @gray-1000;
  --@{wd-prefix}-sp-hover-bar-select: @blue-sp-t15;
  --@{wd-prefix}-sp-tb-hover-bar: @gray-50; // 与tb-color-hover-bar一致，只是名称修改了

  // ======= Table Color ==============
  --@{wd-prefix}-table-hover-bar: @gray-sp-6;
  --@{wd-prefix}-table-hover-bar-active: @gray-sp-12;
  --@{wd-prefix}-table-hover-bar-select: @blue-sp-8;

  // ========== Dorger Color ===========
  --@{wd-prefix}-charts-dorger-dorger: @dorger-500;
  --@{wd-prefix}-charts-dorger-text: @dorger-600;
  --@{wd-prefix}-charts-dorger-light: @dorger-50;
  // 新增
  --@{wd-prefix}-charts-dorger-light-alpha: @dorger-500-7;

  // ========== heliotrope Color ===========
  --@{wd-prefix}-charts-heliotrope-heliotrope: @heliotrope-500;
  --@{wd-prefix}-charts-heliotrope-text: @heliotrope-600;
  --@{wd-prefix}-charts-heliotrope-light: @heliotrope-50;
  // 新增
  --@{wd-prefix}-charts-heliotrope-light-alpha: @heliotrope-500-7;

  // ========== violet Color ===========
  --@{wd-prefix}-charts-violet-violet: @violet-500;
  --@{wd-prefix}-charts-violet-text: @violet-600;
  --@{wd-prefix}-charts-violet-light: @violet-50;
  // 新增
  --@{wd-prefix}-charts-violet-light-alpha: @violet-500-7;

  // ========== purple Color ===========
  --@{wd-prefix}-charts-purple-purple: @purple-500;
  --@{wd-prefix}-charts-purple-text: @purple-600;
  --@{wd-prefix}-charts-purple-light: @purple-50;
  // 新增
  --@{wd-prefix}-charts-purple-light-alpha: @purple-500-7;

  // ========== rosein Color ===========
  --@{wd-prefix}-charts-rosein-rosein: @rosein-500;
  --@{wd-prefix}-charts-rosein-text: @rosein-600;
  --@{wd-prefix}-charts-rosein-light: @rosein-50;
  // 新增
  --@{wd-prefix}-charts-rosein-light-alpha: @rosein-500-7;

  // ========== red Color ===========
  --@{wd-prefix}-charts-red-red: @red-500;
  --@{wd-prefix}-charts-red-text: @red-700;
  --@{wd-prefix}-charts-red-light: @red-50;
  --@{wd-prefix}-charts-red-foundation: @red-700;
  --@{wd-prefix}-charts-red-foundation-deep: @red-500;
  --@{wd-prefix}-charts-red-foundation-deeper: @red-300;
  --@{wd-prefix}-charts-red-foundation-even-deeper: @red-100;

  // 新增red
  --@{wd-prefix}-charts-red-heatmap: @red-400;
  --@{wd-prefix}-charts-red-heatmap-deep: @red-500;
  --@{wd-prefix}-charts-red-heatmap-deeper: @red-900;
  --@{wd-prefix}-charts-red-light-alpha: @red-500-7;

  // ========== sunset Color ===========
  --@{wd-prefix}-charts-sunset-sunset: @sunset-500;
  --@{wd-prefix}-charts-sunset-text: @sunset-600;
  --@{wd-prefix}-charts-sunset-light: @sunset-50;
  // 新增
  --@{wd-prefix}-charts-sunset-light-alpha: @sunset-500-7;

  // ========== sunglow Color ===========
  --@{wd-prefix}-charts-sunglow-sunglow: @sunglow-500;
  --@{wd-prefix}-charts-sunglow-text: @sunglow-700;
  --@{wd-prefix}-charts-sunglow-light: @sunglow-50;
  // 新增
  --@{wd-prefix}-charts-sunglow-light-alpha: @sunglow-500-7;

  // ========== shamrock Color ===========
  --@{wd-prefix}-charts-shamrock-shamrock: @shamrock-500;
  --@{wd-prefix}-charts-shamrock-text: @shamrock-600;
  --@{wd-prefix}-charts-shamrock-light: @shamrock-50;
  // 新增
  --@{wd-prefix}-charts-shamrock-light-alpha: @shamrock-500-7;

  // ========== green Color ===========
  --@{wd-prefix}-charts-green-green: @green-500;
  --@{wd-prefix}-charts-green-text: @green-700;
  --@{wd-prefix}-charts-green-light: @green-50;
  --@{wd-prefix}-charts-green-foundation: @green-700;
  --@{wd-prefix}-charts-green-foundation-deep: @green-500;
  --@{wd-prefix}-charts-green-foundation-deeper: @green-300;
  --@{wd-prefix}-charts-green-foundation-even-deeper: @green-100;
  // 新增green
  --@{wd-prefix}-charts-green-heatmap: @green-500;
  --@{wd-prefix}-charts-green-heatmap-deep: @green-700;
  --@{wd-prefix}-charts-green-heatmap-deeper: @green-900;
  --@{wd-prefix}-charts-green-light-alpha: @green-500-7;

  // ========== viking Color ===========
  --@{wd-prefix}-charts-viking-viking: @viking-500;
  --@{wd-prefix}-charts-viking-text: @viking-600;
  --@{wd-prefix}-charts-viking-light: @viking-50;
  // 新增
  --@{wd-prefix}-charts-viking-light-alpha: @viking-500-7;

  // ========== malibu Color ===========
  --@{wd-prefix}-charts-malibu-malibu: @malibu-500;
  --@{wd-prefix}-charts-malibu-text: @malibu-600;
  --@{wd-prefix}-charts-malibu-light: @malibu-50;
  // 新增
  --@{wd-prefix}-charts-maibu-light-alpha: @malibu-500-7;

  // ========== Gray Color ===========
  --@{wd-prefix}-charts-gray-gray: @gray-500;
  --@{wd-prefix}-charts-gray-text: @gray-600;
  --@{wd-prefix}-charts-gray-light: @gray-100;
  // 新增
  --@{wd-prefix}-charts-gray-light-alpha: @gray-500-7;

  // shadow
  --@{wd-prefix}-shadow-100-canvas: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
  --@{wd-prefix}-shadow-200-drop: 0px 0px 1px 0px rgba(0, 0, 0, 0.2),
    0px 8px 28px 4px rgba(0, 0, 0, 0.08), 0px 6px 12px 0px rgba(0, 0, 0, 0.05);
  --@{wd-prefix}-shadow-300-modal: 0px 6px 12px 0px rgba(0, 0, 0, 0.04),
    0px 9px 28px 4px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
  --@{wd-prefix}-shadow-module-top: 0px 2px 4px -1px rgba(0, 0, 0, 0.02),
    0px 4px 16px 0px rgba(0, 0, 0, 0.05), 0px 0.5px 0.5px 0px rgba(0, 0, 0, 0.05);
  --@{wd-prefix}-shadow-module-bottom: 0px -2px 4px -1px rgba(0, 0, 0, 0.02),
    0px -4px 16px 0px rgba(0, 0, 0, 0.05), 0px -0.5px 0px 0px rgba(0, 0, 0, 0.05);
  --@{wd-prefix}-shadow-module-right: 2px 0px 4px -1px rgba(0, 0, 0, 0.02),
    4px 0px 16px 0px rgba(0, 0, 0, 0.05);
  --@{wd-prefix}-shadow-module-left: -2px 0px 4px -1px rgba(0, 0, 0, 0.02),
    -4px 0px 16px 0px rgba(0, 0, 0, 0.05);
  --@{wd-prefix}-shadow-card-normal: 0px 2px 5px 0px rgba(29, 47, 92, 0.03),
    0px 2px 24px 0px rgba(29, 47, 92, 0.05), 0px 0px 1px 0px rgba(0, 0, 0, 0.18);
  --@{wd-prefix}-shadow-card-active: 0px 2px 5px 0px rgba(29, 47, 92, 0.03),
    0px 8px 24px 0px rgba(29, 47, 92, 0.08), 0px 0px 1px 0px rgba(0, 0, 0, 0.18);
  --@{wd-prefix}-shadow-tab: -20px 0px 10px 0px rgba(255, 255, 255, 0.8);
}

// -------- Colors -----------
// >>> Primary
@brand-primary: ~'var(--@{wd-prefix}-brand-primary)';
@brand-hover: ~'var(--@{wd-prefix}-brand-hover)';
@brand-active: ~'var(--@{wd-prefix}-brand-active)';
@brand-primary-outline: ~'var(--@{wd-prefix}-brand-primary-outline)';
@brand-disable: ~'var(--@{wd-prefix}-brand-disable)';
@brand-extra-light: ~'var(--@{wd-prefix}-brand-extra-light)';
@brand-lighter: ~'var(--@{wd-prefix}-brand-lighter)';
// @brand-primary-light-active: ~'var(--@{wd-prefix}-brand-primary-light-active)';
@brand-text: ~'var(--@{wd-prefix}-brand-text)';
@processing-color: @brand-primary;

// >>> Info
@trade-buy-buy: ~'var(--@{wd-prefix}-trade-buy-buy)';
@trade-buy-hover: ~'var(--@{wd-prefix}-trade-buy-hover)';
@trade-buy-active: ~'var(--@{wd-prefix}-trade-buy-active)';
@trade-buy-disable: ~'var(--@{wd-prefix}-trade-buy-disable)';
@trade-buy-light-1: ~'var(--@{wd-prefix}-trade-buy-light-1)';
@trade-buy-light-2: ~'var(--@{wd-prefix}-trade-buy-light-2)';
// @trade-buy-buy-light-hover: ~'var(--@{wd-prefix}-trade-buy-buy-light-hover)';
@trade-buy-text: ~'var(--@{wd-prefix}-trade-buy-text)';

@trade-buy-buy-deprecated-bg: ~`colorPalette('@{base-primary}', 1) `;
@trade-buy-buy-deprecated-border: ~`colorPalette('@{base-primary}', 3) `;
@trade-buy-buy-deprecated-bg: ~'var(--@{wd-prefix}-trade-buy-buy-deprecated-bg)';
@trade-buy-buy-deprecated-border: ~'var(--@{wd-prefix}-trade-buy-buy-deprecated-border)';

// >>> Success
@fluctuation-fall-fall: ~'var(--@{wd-prefix}-fluctuation-fall-fall)';
@fluctuation-fall-hover: ~'var(--@{wd-prefix}-fluctuation-fall-hover)';
@fluctuation-fall-active: ~'var(--@{wd-prefix}-fluctuation-fall-active)';
@fluctuation-fall-disable: ~'var(--@{wd-prefix}-fluctuation-fall-disable)';
@fluctuation-fall-light-1: ~'var(--@{wd-prefix}-fluctuation-fall-light-1)';
@fluctuation-fall-light-2: ~'var(--@{wd-prefix}-fluctuation-fall-light-2)';
@fluctuation-fall-text: ~'var(--@{wd-prefix}-fluctuation-fall-text)';
@fluctuation-fall-fall-outline: ~'var(--@{wd-prefix}-fluctuation-fall-fall-outline)';
@fluctuation-fall-deprecated-bg: ~'var(--@{wd-prefix}-fluctuation-fall-deprecated-bg)';
@fluctuation-fall-deprecated-border: ~'var(--@{wd-prefix}-fluctuation-fall-deprecated-border)';

// >>> Warning
@trade-selling-sellinging: ~'var(--@{wd-prefix}-trade-selling-sellinging)';
@trade-selling-hover: ~'var(--@{wd-prefix}-trade-selling-hover)';
@trade-selling-active: ~'var(--@{wd-prefix}-trade-selling-active)';
@trade-selling-disable: ~'var(--@{wd-prefix}-trade-selling-disable)';
@trade-selling-light-1: ~'var(--@{wd-prefix}-trade-selling-light-1)';
@trade-selling-light-2: ~'var(--@{wd-prefix}-trade-selling-light-2)';
@trade-selling-text: ~'var(--@{wd-prefix}-trade-selling-text)';

@trade-selling-sellinging-outline: ~'var(--@{wd-prefix}-trade-selling-sellinging-outline)';
@trade-selling-sellinging-deprecated-bg: ~'var(--@{wd-prefix}-trade-selling-sellinging-deprecated-bg)';
@trade-selling-sellinging-deprecated-border: ~'var(--@{wd-prefix}-trade-selling-sellinging-deprecated-border)';

// >>> Error
@fluctuation-rise-rise: ~'var(--@{wd-prefix}-fluctuation-rise-rise)';
@fluctuation-rise-hover: ~'var(--@{wd-prefix}-fluctuation-rise-hover)';
@fluctuation-rise-active: ~'var(--@{wd-prefix}-fluctuation-rise-active)';
@fluctuation-rise-disable: ~'var(--@{wd-prefix}-fluctuation-rise-disable)';
@fluctuation-rise-light-1: ~'var(--@{wd-prefix}-fluctuation-rise-light-1)';
@fluctuation-rise-light-2: ~'var(--@{wd-prefix}-fluctuation-rise-light-2)';
@fluctuation-rise-text: ~'var(--@{wd-prefix}-fluctuation-rise-text)';

@fluctuation-rise-rise-outline: ~'var(--@{wd-prefix}-fluctuation-rise-rise-outline)';
@fluctuation-rise-rise-deprecated-bg: ~'var(--@{wd-prefix}-fluctuation-rise-rise-deprecated-bg)';
@fluctuation-rise-rise-deprecated-border: ~'var(--@{wd-prefix}-fluctuation-rise-rise-deprecated-border)';

@highlight-color: @red-5;
@normal-color: #d9d9d9;
@white: #fff;
@black: rgb(156, 111, 111);

// Color used by default to control hover and active backgrounds and for
// alert info backgrounds.
@primary-1: ~'var(--@{wd-prefix}-primary-1)'; // replace tint(@brand-primary, 90%)
@primary-2: ~'var(--@{wd-prefix}-primary-2)'; // replace tint(@brand-primary, 80%)
@primary-3: ~'var(--@{wd-prefix}-primary-3)'; // unused
@primary-4: ~'var(--@{wd-prefix}-primary-4)'; // unused
@primary-5: ~'var(--@{wd-prefix}-primary-5)'; // color used to control the text color in many active and hover states, replace tint(@brand-primary, 20%)
@primary-6: ~'var(--@{wd-prefix}-primary-6)'; // color used to control the text color of active buttons, don't use, use @brand-primary
@primary-7: ~'var(--@{wd-prefix}-primary-7)'; // replace shade(@brand-primary, 5%)
@primary-8: color(~`colorPalette('@{brand-primary}', 8) `); // unused
@primary-9: color(~`colorPalette('@{brand-primary}', 9) `); // unused
@primary-10: color(~`colorPalette('@{brand-primary}', 10) `); // unused

// >>> Gray
@fluctuation-flat-flat: ~'var(--@{wd-prefix}-fluctuation-flat-flat)';
@fluctuation-flat-hover: ~'var(--@{wd-prefix}-fluctuation-flat-hover)';
@fluctuation-flat-active: ~'var(--@{wd-prefix}-fluctuation-flat-active)';
@fluctuation-flat-disable: ~'var(--@{wd-prefix}-fluctuation-flat-disable)';
@fluctuation-flat-light-1: ~'var(--@{wd-prefix}-fluctuation-flat-light-1)';
@fluctuation-flat-light-2: ~'var(--@{wd-prefix}-fluctuation-flat-light-2)';
@fluctuation-flat-text: ~'var(--@{wd-prefix}-fluctuation-flat-text)';

// >>> Text
@text-primary: ~'var(--@{wd-prefix}-text-primary)';
@text-secondary: ~'var(--@{wd-prefix}-text-secondary)';
@text-tertiary: ~'var(--@{wd-prefix}-text-tertiary)';
@text-disable: ~'var(--@{wd-prefix}-text-disable)';
@text-white: ~'var(--@{wd-prefix}-text-white)';
@text-white-disable: ~'var(--@{wd-prefix}-text-white-disable)';
@text-tab: ~'var(--@{wd-prefix}-text-tab)';

// >>> Bg
@bg-dialog: ~'var(--@{wd-prefix}-bg-dialog)';
@bg-tooltip: ~'var(--@{wd-prefix}-bg-tooltip)';
@bg-dropdown: ~'var(--@{wd-prefix}-bg-dropdown)';
@bg-page: ~'var(--@{wd-prefix}-bg-page)';
@bg-base: ~'var(--@{wd-prefix}-bg-base)';
@bg-page-90: ~'var(--@{wd-prefix}-bg-page-90)';

// >>> Icon
@icon-tertiary: ~'var(--@{wd-prefix}-icon-tertiary)';
@icon-secondary: ~'var(--@{wd-prefix}-icon-secondary)';
@icon-primary: ~'var(--@{wd-prefix}-icon-primary)';
@icon-disable: ~'var(--@{wd-prefix}-icon-disable)';
@icon-white: ~'var(--@{wd-prefix}-icon-white)';
@icon-white-disable: ~'var(--@{wd-prefix}-icon-white-disable)';

// >>> Line
@line-table: ~'var(--@{wd-prefix}-line-table)';
@line-devide: ~'var(--@{wd-prefix}-line-devide)';
@line-border: ~'var(--@{wd-prefix}-line-border)';

// filled
@fill-blank: ~'var(--@{wd-prefix}-fill-blank)';
@fill-blank-lighter: ~'var(--@{wd-prefix}-fill-blank-lighter)';
@fill-fill: ~'var(--@{wd-prefix}-fill-fill)';
@fill-fill-deep: ~'var(--@{wd-prefix}-fill-fill-deep)';
@fill-fill-deeper: ~'var(--@{wd-prefix}-fill-fill-deeper)';
@fill-white: ~'var(--@{wd-prefix}-fill-white)';
@fill-black: ~'var(--@{wd-prefix}-fill-black)';
@fill-fill-light: ~'var(--@{wd-prefix}-fill-fill-light)';
@fill-fill-even-deeper: ~'var(--@{wd-prefix}-fill-even-deeper)';
@fill-fill-much-deeper: ~'var(--@{wd-prefix}-fill-much-deeper)';

// >>> Special
@sp-shadow: ~'var(--@{wd-prefix}-sp-shadow)';
@sp-scroll-bar: ~'var(--@{wd-prefix}-sp-scroll-bar)';
@sp-overlay: ~'var(--@{wd-prefix}-sp-overlay)';
@sp-sider: ~'var(--@{wd-prefix}-sp-sider)';
@sp-hover-bar: ~'var(--@{wd-prefix}-sp-hover-bar)';
@sp-hover-bar-active: ~'var(--@{wd-prefix}-sp-hover-bar-active)';
@sp-tooltips: ~'var(--@{wd-prefix}-sp-tooltips)';
@sp-tooltips-text: ~'var(--@{wd-prefix}-sp-tooltips-text)';
@sp-hover-bar-select: ~'var(--@{wd-prefix}-sp-hover-bar-select)';
@sp-tb-hover-bar: ~'var(--@{wd-prefix}-sp-tb-hover-bar)';

@table-hover-bar: ~'var(--@{wd-prefix}-table-hover-bar)';
@table-hover-bar-active: ~'var(--@{wd-prefix}-table-hover-bar-active)';
@table-hover-bar-select: ~'var(--@{wd-prefix}-table-hover-bar-select)';

// >>> dorger Color
@charts-dorger-dorger: ~'var(--@{wd-prefix}-charts-dorger-dorger)';
@charts-dorger-text: ~'var(--@{wd-prefix}-charts-dorger-text)';
@charts-dorger-light: ~'var(--@{wd-prefix}-charts-dorger-light)';
@charts-dorger-light-alpha: ~'var(--@{wd-prefix}-charts-dorger-light-alpha)';

// >>> heliotrope Color
@charts-heliotrope-heliotrope: ~'var(--@{wd-prefix}-charts-heliotrope-heliotrope)';
@charts-heliotrope-text: ~'var(--@{wd-prefix}-charts-heliotrope-text)';
@charts-heliotrope-light: ~'var(--@{wd-prefix}-charts-heliotrope-light)';
@charts-heliotrope-light-alpha: ~'var(--@{wd-prefix}-charts-heliotrope-light-alpha)';

// >>> violet Color
@charts-violet-violet: ~'var(--@{wd-prefix}-charts-violet-violet)';
@charts-violet-text: ~'var(--@{wd-prefix}-charts-violet-text)';
@charts-violet-light: ~'var(--@{wd-prefix}-charts-violet-light)';
@charts-violet-light-alpha: ~'var(--@{wd-prefix}-charts-violet-light-alpha)';

// >>> purple Color
@charts-purple-purple: ~'var(--@{wd-prefix}-charts-purple-purple)';
@charts-purple-text: ~'var(--@{wd-prefix}-charts-purple-text)';
@charts-purple-light: ~'var(--@{wd-prefix}-charts-purple-light)';
@charts-purple-light-alpha: ~'var(--@{wd-prefix}-charts-purple-light-alpha)';

// >>> rosein Color
@charts-rosein-rosein: ~'var(--@{wd-prefix}-charts-rosein-rosein)';
@charts-rosein-text: ~'var(--@{wd-prefix}-charts-rosein-text)';
@charts-rosein-light: ~'var(--@{wd-prefix}-charts-rosein-light)';
@charts-rosein-light-alpha: ~'var(--@{wd-prefix}-charts-rosein-light-alpha)';

// >>> red Color
@charts-red-red: ~'var(--@{wd-prefix}-charts-red-red)';
@charts-red-text: ~'var(--@{wd-prefix}-charts-red-text)';
@charts-red-light: ~'var(--@{wd-prefix}-charts-red-light)';
@charts-red-foundation: ~'var(--@{wd-prefix}-charts-red-foundation)';
@charts-red-foundation-deep: ~'var(--@{wd-prefix}-charts-red-foundation-deep)';
@charts-red-foundation-deeper: ~'var(--@{wd-prefix}-charts-red-foundation-deeper)';
@charts-red-foundation-even-deeper: ~'var(--@{wd-prefix}-charts-red-foundation-even-deeper)';
@charts-red-heatmap: ~'var(--@{wd-prefix}-charts-red-heatmap)';
@charts-red-heatmap-deep: ~'var(--@{wd-prefix}-charts-red-heatmap-deep)';
@charts-red-heatmap-deeper: ~'var(--@{wd-prefix}-charts-red-heatmap-deeper)';
@charts-red-light-alpha: ~'var(--@{wd-prefix}-charts-red-light-alpha)';

// >>> sunset Color
@charts-sunset-sunset: ~'var(--@{wd-prefix}-charts-sunset-sunset)';
@charts-sunset-text: ~'var(--@{wd-prefix}-charts-sunset-text)';
@charts-sunset-light: ~'var(--@{wd-prefix}-charts-sunset-light)';
@charts-sunset-light-alpha: ~'var(--@{wd-prefix}-charts-sunset-light-alpha)';

// >>> sunglow Color
@charts-sunglow-sunglow: ~'var(--@{wd-prefix}-charts-sunglow-sunglow)';
@charts-sunglow-text: ~'var(--@{wd-prefix}-charts-sunglow-text)';
@charts-sunglow-light: ~'var(--@{wd-prefix}-charts-sunglow-light)';
@charts-sunglow-light-alpha: ~'var(--@{wd-prefix}-charts-sunglow-light-alpha)';

// >>> shamrock Color
@charts-shamrock-shamrock: ~'var(--@{wd-prefix}-charts-shamrock-shamrock)';
@charts-shamrock-text: ~'var(--@{wd-prefix}-charts-shamrock-text)';
@charts-shamrock-light: ~'var(--@{wd-prefix}-charts-shamrock-light)';
@charts-shamrock-light-alpha: ~'var(--@{wd-prefix}-charts-shamrock-light-alpha)';

// >>> green Color
@charts-green-green: ~'var(--@{wd-prefix}-charts-green-green)';
@charts-green-text: ~'var(--@{wd-prefix}-charts-green-text)';
@charts-green-light: ~'var(--@{wd-prefix}-charts-green-light)';
@charts-green-foundation: ~'var(--@{wd-prefix}-charts-green-foundation)';
@charts-green-foundation-deep: ~'var(--@{wd-prefix}-charts-green-foundation-deep)';
@charts-green-foundation-deeper: ~'var(--@{wd-prefix}-charts-green-foundation-deeper)';
@charts-green-foundation-even-deeper: ~'var(--@{wd-prefix}-charts-green-foundation-even-deeper)';
@charts-green-heatmap: ~'var(--@{wd-prefix}-charts-green-heatmap)';
@charts-green-heatmap-deep: ~'var(--@{wd-prefix}-charts-green-heatmap-deep)';
@charts-green-heatmap-deeper: ~'var(--@{wd-prefix}-charts-green-heatmap-deeper)';
@charts-green-light-alpha: ~'var(--@{wd-prefix}-charts-green-light-alpha)';

// >>> viking Color
@charts-viking-viking: ~'var(--@{wd-prefix}-charts-viking-viking)';
@charts-viking-text: ~'var(--@{wd-prefix}-charts-viking-text)';
@charts-viking-light: ~'var(--@{wd-prefix}-charts-viking-light)';
@charts-viking-light-alpha: ~'var(--@{wd-prefix}-charts-viking-light-alpha)';

// >>> malibu Color
@charts-malibu-malibu: ~'var(--@{wd-prefix}-charts-malibu-malibu)';
@charts-malibu-text: ~'var(--@{wd-prefix}-charts-malibu-text)';
@charts-malibu-light: ~'var(--@{wd-prefix}-charts-malibu-light)';
@charts-maibu-light-alpha: ~'var(--@{wd-prefix}-charts-maibu-light-alpha)';

// >>> gray Color
@charts-gray-gray: ~'var(--@{wd-prefix}-charts-gray-gray)';
@charts-gray-text: ~'var(--@{wd-prefix}-charts-gray-text)';
@charts-gray-light: ~'var(--@{wd-prefix}-charts-gray-light)';
@charts-gray-light-alpha: ~'var(--@{wd-prefix}-charts-gray-light-alpha)';
// Base Scaffolding Variables
// 条件筛选默认宽度
@component-condition-width: 260px;

// Background color for `<body>`
@body-background: #fff;
// Base background color for most components
@component-background: #fff;
// Base background transparency 0.9
@component-background-9: rgba(255, 255, 255, 0.9);
// Popover background color
@popover-background: @component-background;
@popover-customize-border-color: @border-color-split;
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  'Noto Color Emoji';
@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
@text-color: @gray-900;
@text-color-secondary: @gray-700;
@text-color-inverse: @white;
@icon-color: inherit;
@icon-color-hover: fade(@black, 75%);
@heading-color: @text-primary;
@text-color-dark: fade(@white, 85%);
@text-color-secondary-dark: fade(@white, 65%);
@text-selection-bg: @brand-primary;
@font-variant-base: tabular-nums;
@font-feature-settings-base: 'tnum';
// 字体大小
@font-size-base: 14px;
@font-size-base-15: 15px;
@font-size-lg: @font-size-base + 2px;
@font-size-bg: @font-size-base;
@font-size-sm: 12px;
// 图标大小
@icon-size-base: 14px;
@icon-size-lg: @icon-size-base + 2px;
@icon-size-bg: @icon-size-base;
@icon-size-sm: 12px;
@heading-1-size: ceil(@font-size-base * 2.71);
@heading-2-size: ceil(@font-size-base * 2.14);
@heading-3-size: ceil(@font-size-base * 1.71);
@heading-4-size: ceil(@font-size-base * 1.42);
@heading-5-size: ceil(@font-size-base * 1.14);
// https://github.com/wd-design/wd-design/issues/20210
@line-height-normal: 22px;
@line-height-base: 18px;
@border-radius-big: 8px;
@border-radius-base: 6px;
@border-radius-bg: 12px;
@border-radius-sm: 4px;
@border-radius-xs: 2px;

// vertical paddings
@padding-lg: 24px; // containers
@padding-md: 16px; // small containers and buttons
@padding-sm: 12px; // Form controls and items
@padding-xs: 8px; // small items
@padding-xss: 4px; // more small

// vertical padding for all form controls
@control-padding-horizontal: @padding-sm;
@control-padding-horizontal-xs: @padding-xs;
@control-padding-horizontal-md: @padding-md;
@control-padding-horizontal-sm: @padding-sm;
@control-padding-horizontal-xss: @padding-xs - 2px;

// vertical margins
@margin-lg: 24px; // containers
@margin-md: 16px; // small containers and buttons
@margin-sm: 12px; // Form controls and items
@margin-xs: 8px; // small items
@margin-xss: 4px; // more small

// weight-base
@base-weight-font: 600;

// height rules
@height-base: 32px;
@height-lg: 40px;
@height-bg: 36px;
// @height-smd: 28px;
@height-sm: 28px;
@height-xs: 24px;

// The background colors for active and hover states for things like
// list items or table cells.
@item-active-bg: @primary-1;
@item-hover-bg: @sp-hover-bar;

// ICONFONT
@iconfont-css-prefix: wdicon;

// LINK
@link-color: @brand-text;
@link-hover-color: @brand-hover;
@link-active-color: @brand-active;
@link-decoration: none;
@link-hover-decoration: none;
@link-focus-decoration: none;
@link-focus-outline: 0;

// Animation
@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
@ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
@ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);

// Border color
@border-color-base: @line-border; // base border outline a component
@border-color-split: @line-border; // split border inside a component
@border-color-inverse: @white;
@border-width-base: 1px; // width of the border for a component
@border-style-base: solid; // style of a components border
@border-color-primary: @brand-primary;

// Outline
@outline-blur-size: 0;
@outline-width: 2px;
@outline-color: @brand-primary; // No use anymore
@outline-fade: 20%;

@background-color-light: hsv(0, 0, 98%); // background of header and selected item
@background-color-base: hsv(0, 0, 96%); // Default grey background color

// Disabled states
@disabled-color: @text-disable;
@disabled-bg: #fff;
@disabled-color-border: @line-border;

@disabled-active-bg: tint(@black, 90%);
@disabled-color-dark: fade(#fff, 35%);

@disable-primary-color: @text-white-disable;
@disable-primary-bg: @brand-disable;

@disable-secondary-color: @brand-disable;
@disable-secondary-bg: @brand-extra-light;

@disable-text-color: @disabled-color;
@disable-text-bg: #fff;

@disable-link-color: @brand-disable;
@disable-link-bg: #fff;

// Shadow
@shadow-color: rgba(0, 0, 0, 0.15);
@shadow-color-inverse: @component-background;
@box-shadow-base: @shadow-2;
@box-shadow-200-drop: @shadow-200-drop;
@shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05),
  0 -12px 48px 16px rgba(0, 0, 0, 0.03);
@shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05),
  0 12px 48px 16px rgba(0, 0, 0, 0.03);
@shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05),
  -12px 0 48px 16px rgba(0, 0, 0, 0.03);
@shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05),
  12px 0 48px 16px rgba(0, 0, 0, 0.03);
@shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(122, 90, 90, 0.08),
  0 9px 28px 8px rgba(0, 0, 0, 0.05);
@shadow-component-3:0px 3px 14px 2px rgba(106, 113, 136, 0.05), 0px 8px 10px 1px rgba(106, 113, 136, 0.06), 0px 5px 5px -3px rgba(106, 113, 136, 0.1);
// new shadow
@shadow-100-canvas: ~'var(--@{wd-prefix}-shadow-100-canvas)';
@shadow-200-drop: ~'var(--@{wd-prefix}-shadow-200-drop)';
@shadow-300-modal: ~'var(--@{wd-prefix}-shadow-300-modal)';
@shadow-module-top: ~'var(--@{wd-prefix}-shadow-module-top)';
@shadow-module-bottom: ~'var(--@{wd-prefix}-shadow-module-bottom)';
@shadow-module-right: ~'var(--@{wd-prefix}-shadow-module-right)';
@shadow-module-left: ~'var(--@{wd-prefix}-shadow-module-left)';
@shadow-card-normal: ~'var(--@{wd-prefix}-shadow-card-normal)';
@shadow-card-active: ~'var(--@{wd-prefix}-shadow-card-active)';
@shadow-tab: ~'var(--@{wd-prefix}-shadow-tab)';

// Buttons
@btn-font-weight: 400;
@btn-border-radius-base: @border-radius-base;
@btn-border-radius-sm: @border-radius-sm;
@btn-border-width: @border-width-base;
@btn-border-style: @border-style-base;
@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-primary-color: @text-white;
@btn-primary-bg: @brand-primary;

@btn-secondary-color: @brand-text;
@btn-secondary-bg: @brand-extra-light;

@btn-default-color: @text-primary;
@btn-default-bg: transparent;
@btn-default-border: @border-color-base;

@btn-icon-bg: transparent;
// 中性色 - 灰底黑字
@btn-icon-solid-color: @icon-secondary;
@btn-icon-solid-color-hover: @icon-primary;
@btn-icon-solid-color-active: @icon-primary;
@btn-icon-solid-color-disabled: @icon-disable;
@btn-icon-solid-bg: @fill-fill;
@btn-icon-solid-bg-hover: @sp-hover-bar;
@btn-icon-solid-bg-active: @sp-hover-bar-active;
@btn-icon-solid-bg-disabled: @fill-fill;

// button icon no bg have border -- primary
@btn-icon-primary: @brand-text;
@btn-icon-primary-hover: @brand-hover;
@btn-icon-primary-active: @brand-active;
@btn-icon-primary-disabled: @brand-disable;
// button icon no bg have border -- neutral
@btn-icon-neutral: @icon-secondary;
@btn-icon-neutral-hover: @icon-primary;
@btn-icon-neutral-active: @icon-primary;
@btn-icon-neutral-disabled: @icon-disable;

// 热区 品牌色 -- hot
@btn-icon-hot-color: @brand-text;
@btn-icon-hot-color-hover: @brand-hover;
@btn-icon-hot-color-active: @brand-active;
@btn-icon-hot-color-disabled: @brand-disable;
@btn-icon-hot-bg-hover: @brand-extra-light;
@btn-icon-hot-bg-active: @brand-lighter;

// 热区 品牌色 -- 中性色
@btn-icon-default-color: @icon-secondary;
@btn-icon-default-color-hover: @icon-primary;
@btn-icon-default-color-active: @icon-primary;
@btn-icon-default-bg-hover: @sp-hover-bar;
@btn-icon-default-bg-active: @sp-hover-bar-active;
@btn-icon-default-color-disabled: @icon-disable;

// 灰底蓝字
@btn-icon-gray-color: @brand-text;
@btn-icon-gray-color-hover: @brand-text;
@btn-icon-gray-color-active: @brand-text;
@btn-icon-gray-color-disabled: @icon-disable;
@btn-icon-gray-bg: @fill-fill;
@btn-icon-gray-bg-hover: @fill-fill-deep;
@btn-icon-gray-bg-active: @brand-extra-light;
@btn-icon-gray-bg-disabled: @fill-fill;

@btn-danger-color: #fff;
@btn-danger-bg: @fluctuation-rise-rise;
@btn-danger-border: @fluctuation-rise-rise;
@btn-danger-disable-bg: @fluctuation-rise-disable;

@btn-warning-color: @text-white;
@btn-warning-bg: @trade-selling-sellinging;
@btn-warning-hover-bg: @trade-selling-hover;
@btn-warning-active-bg: @trade-selling-active;
@btn-warning-disable-bg: @trade-selling-disable;

@btn-disable-color: @disabled-color;
@btn-disable-bg: transparent;
@btn-disable-border: @border-color-base;

@btn-default-ghost-color: @component-background;
@btn-default-ghost-bg: transparent;
@btn-default-ghost-border: @component-background;

@btn-font-size-lg: @font-size-lg;
@btn-font-size-bg: @font-size-bg;
@btn-font-size-smd: @font-size-sm;
@btn-font-size-sm: @font-size-sm;
@btn-font-size-xs: @font-size-sm;
@btn-padding-horizontal-base: @padding-md - 1px;
@btn-padding-horizontal-lg: 20px - 1px;
@btn-padding-horizontal-bg: 18px - 1px;
@btn-padding-horizontal-smd: @padding-md - 1px;
@btn-padding-horizontal-sm: @padding-xs - 1px;
@btn-padding-horizontal-xs: @padding-xs - 1px;

@btn-height-base: @height-base;
@btn-height-lg: @height-lg;
@btn-height-bg: @height-bg;
// @btn-height-smd: @height-smd;
@btn-height-sm: @height-sm;
@btn-height-xs: @height-xs;

@btn-line-height: @line-height-base;

@btn-circle-size: @btn-height-base;
@btn-circle-size-lg: @btn-height-lg;
@btn-circle-size-bg: @btn-height-bg;
// @btn-circle-size-smd: @btn-height-smd;
@btn-circle-size-sm: @btn-height-sm;
@btn-circle-size-xs: @btn-height-xs;

@btn-square-size: @btn-height-base;
@btn-square-size-lg: @btn-height-lg;
@btn-square-size-bg: @btn-height-bg;
// @btn-square-size-smd: @btn-height-smd;
@btn-square-size-sm: @btn-height-sm;
@btn-square-size-xs: @btn-height-xs;
@btn-square-only-icon-size: @font-size-base + 4px;
@btn-square-only-icon-size-xs: @font-size-base;
@btn-square-only-icon-size-sm: @font-size-base + 2px;
@btn-square-only-icon-size-md: @font-size-base + 4px;
@btn-square-only-icon-size-bg: @font-size-base + 6px;
@btn-square-only-icon-size-lg: @font-size-base + 8px;

@btn-group-border: @primary-5;

@btn-text-color: @text-primary;
@btn-link-hover-bg: @sp-hover-bar;
@btn-link-hover-color: @brand-hover;
@btn-link-active-bg: @sp-hover-bar-active;
@btn-text-hover-bg: @sp-hover-bar;
@btn-text-active-bg: @sp-hover-bar-active;
@btn-text-hover-color: @text-secondary;

@btn-no-padding-height-normal: @line-height-normal;
@btn-no-padding-line-height-normal: @line-height-normal;
@btn-no-padding-font-size-normal: 15px;
@btn-no-padding-height-xs: @line-height-base;
@btn-no-padding-line-height-xs: @line-height-base;
@btn-no-padding-font-size-xs: @font-size-sm;
@btn-no-padding-font-size-sm: @font-size-base;

// Checkbox
@checkbox-size: @font-size-base;
@checkbox-label-size: @font-size-base - 2px;
@checkbox-color: @brand-primary;
@checkbox-hover-color: @brand-hover;
@checkbox-check-color: @icon-white;
@checkbox-check-bg: transparent;
@checkbox-border-width: @border-width-base + 0.5px;
@checkbox-border-radius: @border-radius-xs;
@checkbox-group-item-margin-right: 8px;
@checkbox-border-color: @icon-tertiary;
@checkbox-label-padding: @base-num-zero @base-num-zero @base-num-zero @padding-xs;
@checkbox-label-color: @text-primary;
@checkbox-wrapper-hover-bg: @sp-hover-bar;
@checkbox-padding-hover: @padding-xss - 2px;
@checkbox-indeter-bg: @icon-white;
@checkbox-label-padding-horizontal: @padding-xss + 2px;
@checkbox-label-line-height: @line-height-base + 6px;
@checkbox-label-height: @checkbox-label-line-height;
@checkbox-inner-disable-border-color: @icon-disable;
@checkbox-inner-disable-bg-color: @charts-gray-light;
@checkbox-inner-disable-checked-border-color: @brand-disable;
@checkbox-inner-disable-checked-bg-color: @brand-disable;
@checkbox-inner-disable-checked-icon-color: @text-white-disable;
@checkbox-text-disable-color: @text-disable;

// Descriptions
@descriptions-bg: #fafafa;
@descriptions-title-margin-bottom: 20px;
@descriptions-default-padding: @padding-md @padding-lg;
@descriptions-middle-padding: @padding-sm @padding-lg;
@descriptions-small-padding: @padding-xs @padding-md;
@descriptions-item-padding-bottom: @padding-md;
@descriptions-item-trailing-colon: true;
@descriptions-item-label-colon-margin-right: 8px;
@descriptions-item-label-colon-margin-left: 2px;
@descriptions-extra-color: @text-color;

// Divider
//----
@base-num-zero: 0;
@divider-text-padding: 1em;
@divider-orientation-margin: 5%;
@divider-color: @line-devide;
@divider-vertical-gutter: 8px;
@divider-color-line: @border-width-base @border-style-base @line-devide;
@divider-color-text: @text-color;
@divider-font-weight: 400;
// font-size 14
@divider-text-size: @font-size-base;
@divider-line-height: @line-height-base + 4px;
@divider-padding-text: @padding-xss - 4px @padding-md;
@divider-margin: @margin-lg @base-num-zero;
@divider-margin-md: @margin-md @base-num-zero;
@divider-height: 0.9em;

// Dropdown
@dropdown-selected-color: @brand-text;
@dropdown-menu-submenu-disabled-bg: transparent;
@dropdown-selected-bg: @sp-hover-bar-select;

// Empty
@empty-font-size: @font-size-base;
@empty-font-color: @text-secondary;
@empty-font-disabled-color: @text-tertiary;
@empty-font-line-height-bg: 22px;
@empty-font-line-height-md: 18px;
@empty-image-width: 100px;
@empty-image-height: 70px;
@empty-image-shadow: @shadow-card-normal;
@empty-image-module-width: 70px;
@empty-image-module-height: 49px;
@empty-image-module-color: @text-tertiary;
@empty-image-message-width: 105px;
@empty-image-message-height: 105px;
@empty-image-account-width: 106px;
@empty-image-account-height: 72px;
@empty-image-found-width: 400px;
@empty-image-found-height: 200px;
@empty-image-search-width: 138px;
@empty-image-search-height: 92px;
@empty-refresh-btn-color: @brand-text;
@empty-refresh-btn-color-hover: @brand-hover;
@empty-refresh-btn-color-active: @brand-active;
@empty-refresh-btn-color-disable: @brand-disable;

// Radio
@radio-size: 14px;
@radio-top: 0.2em;
@radio-border-width: 2px;
@radio-dot-size: @radio-size - 8px;
@radio-dot-color: @brand-primary;
@radio-solid-checked-color: @component-background;
@radio-dot-disabled-color: @brand-disable;
@radio-disabled-checked-color: @brand-disable;
@radio-disabled-checked-bg: @fill-blank;
@radio-disabled-color: @line-border;
@radio-disabled-bg: @fluctuation-flat-light-1;

// Radio buttons
@radio-button-bg: @btn-default-bg;
@radio-button-checked-bg: @btn-default-bg;
@radio-button-color: @btn-default-color;
@radio-button-hover-color: @primary-5;
@radio-button-active-color: @primary-7;
@radio-button-padding-horizontal: @padding-md - 1px;
@radio-disabled-button-checked-bg: @disabled-active-bg;
@radio-disabled-button-checked-color: @disabled-color;
@radio-wrapper-margin-right: 12px;
@radio-wrapper-line-height: @line-height-base + 6px;
@radio-wrapper-height: @radio-wrapper-line-height;
@radio-wrapper-color: @text-primary;
@radio-wrapper-padding-horizontal: @padding-xss + 2px;
@radio-inner-bg: @icon-white;

// Radio tab
@radio-tab-color: @text-secondary;
@radio-tab-color-checked: @text-primary;
// @radio-tab-bg: @fill-fill-deep;
// @radio-tab-hover-bg: @fill-blank-lighter;

// Media queries breakpoints
// @screen-xs and @screen-xs-min is not used in Grid
// smallest break point is @screen-md
@screen-xs: 480px + 1px;
@screen-xs-min: @screen-xs;
// 👆 Extra small screen / phone

// 👇 Small screen / tablet
@screen-sm: 576px + 1px;
@screen-sm-min: @screen-sm;

// Medium screen / desktop
@screen-md: 768px + 1px;
@screen-md-min: @screen-md;

// Large screen / wide desktop
@screen-lg: 992px + 1px;
@screen-lg-min: @screen-lg;

// Extra large screen / full hd
@screen-xl: 1440px + 1px;
@screen-xl-min: @screen-xl;

// Extra extra large screen / large desktop
@screen-xxl: 1680px + 1px;
@screen-xxl-min: @screen-xxl;
@screen-xxxl: 1920px + 1px;
@screen-xxxl-min: @screen-xxxl;

// provide a maximum
@screen-xs-max: (@screen-sm-min - 1px);
@screen-sm-max: (@screen-md-min - 1px);
@screen-md-max: (@screen-lg-min - 1px);
@screen-lg-max: (@screen-xl-min - 1px);
@screen-xl-max: (@screen-xxl-min - 1px);
@screen-xxl-max: (@screen-xxxl-min - 1px);

// Grid system
@grid-columns: 24;

// Layout
@layout-body-background: #f0f2f5;
@layout-header-background: #001529;
@layout-header-height: 64px;
@layout-header-padding: 0 50px;
@layout-header-color: @text-color;
@layout-footer-padding: 24px 50px;
@layout-footer-background: @layout-body-background;
@layout-sider-background: @layout-header-background;
@layout-trigger-height: 48px;
@layout-trigger-background: #002140;
@layout-trigger-color: #fff;
@layout-zero-trigger-width: 36px;
@layout-zero-trigger-height: 42px;
// Layout light theme
@layout-sider-background-light: #fff;
@layout-trigger-background-light: #fff;
@layout-trigger-color-light: @text-color;

// z-index list, order by `z-index`
@zindex-badge: auto;
@zindex-table-fixed: 2;
@zindex-affix: 10;
@zindex-back-top: 10;
@zindex-picker-panel: 10;
@zindex-popup-close: 10;

@zindex-popup-base: 2000;
@zindex-modal: @zindex-popup-base;
@zindex-modal-mask: @zindex-popup-base;
@zindex-message: 2010;
@zindex-notification: 2010;
@zindex-popover: @zindex-popup-base;
@zindex-dropdown: @zindex-popup-base;
@zindex-picker: 2050;
@zindex-popoconfirm: @zindex-popup-base;
@zindex-tooltip: 2070;
@zindex-image: 2080;

// Animation
@animation-duration-slow: 0.3s; // Modal
@animation-duration-base: 0.2s;
@animation-duration-fast: 0.1s; // Tooltip

//CollapsePanel
@collapse-panel-border-radius: @border-radius-base;

//Dropdown
@dropdown-menu-bg: @bg-dropdown;
@dropdown-vertical-padding: 7px;
@dropdown-horizontal-padding: 8px;
@dropdown-edge-child-vertical-padding: 4px;
@dropdown-edge-child-horizontal-padding: 8px;
@dropdown-font-size: @font-size-sm;
@dropdown-line-height: 32px;

// Form
// ---
@label-required-color: @highlight-color;
@label-color: @text-secondary;
@form-warning-input-bg: @input-bg;
@form-item-margin-bottom: 20px;
@form-item-trailing-colon: true;
@form-vertical-label-padding: 0 0 8px;
@form-vertical-label-margin: 0;
@form-item-label-font-size: @font-size-sm;
@form-item-label-height: @input-height-base;
@form-item-label-colon-margin-right: 8px;
@form-item-label-colon-margin-left: 2px;
@form-error-input-bg: @input-bg;
@form-error-input-border-color: @fluctuation-rise-rise;
@form-error-input-border-hover-color: @fluctuation-rise-hover;
// Input
// ---
@input-height-base: @height-base;
@input-height-lg: @height-lg;
@input-height-bg: @height-bg;
@input-height-sm: @height-sm;
@input-height-xs: @height-xs;
@input-line-height-base: 18px;
@input-line-height-bg: @height-xs - 2px;
@input-line-height-lg: @height-xs - 2px;
@input-padding-horizontal: @control-padding-horizontal - 1px;
@input-padding-horizontal-base: @control-padding-horizontal - 1px;
@input-padding-horizontal-xs: @control-padding-horizontal-xs - 1px;
@input-padding-horizontal-sm: @control-padding-horizontal-sm - 1px;
@input-padding-horizontal-md: @control-padding-horizontal-sm - 1px;
@input-padding-horizontal-bg: @control-padding-horizontal-md - 1px;
@input-padding-horizontal-lg: @padding-md - 1px;
@input-padding-vertical-base: 6px;
@input-padding-vertical-lg: 8px;
@input-show-count-line-height: 20px;
// max(
//   (round(((@input-height-base - @font-size-base * @line-height-base) / 2) * 10) / 10) -
//     @border-width-base,
//   3px
// );
@input-padding-vertical-xs: 2px;
@input-padding-vertical-sm: 4px;
// max(
//   (round(((@input-height-sm - @font-size-base * @line-height-base) / 2) * 10) / 10) -
//     @border-width-base,
//   0
// );
@input-padding-vertical-bg: @input-padding-vertical-base;

@input-padding-vertical-lg: 8px;
// (
//     ceil(((@input-height-lg - @font-size-lg * @line-height-base) / 2) * 10) / 10
//   ) - @border-width-base;
@input-placeholder-color: @text-tertiary;
@input-color: @text-primary;
@input-icon-color: @input-color;
@input-border-color: @border-color-base;
@input-bg: @bg-page;
@input-number-hover-border-color: @input-hover-border-color;
@input-number-handler-active-bg: #f4f4f4;
@input-number-handler-hover-bg: @brand-hover;
@input-number-handler-bg: @component-background;
@input-number-handler-border-color: @border-color-base;
@input-addon-bg: @background-color-light;
@input-hover-border-color: @brand-hover;
@input-disabled-bg: @disabled-bg; // 这个不能修改 其他地方用到了这个变量并且禁用是白色
@input-disabled-bg-color: @fill-fill;
@input-outline-offset: 0 0;
@input-icon-hover-color: fade(@black, 85%);
@input-disabled-color: @text-disable;
@input-disabled-color-borderless: @text-tertiary;
@input-disabled-icon-color: @icon-disable;
@input-disabled-bg-borderless: @fill-fill;
@input-focused-bg-color: @bg-page; // TODO 有问题 目前没有使用到 可暂时不改

@input-condition-bg-color: @fill-fill-deeper;
@input-condition-bg-hover-color: @sp-hover-bar-active;
@input-suffix-line-height: @height-xs - 8px;
@input-suffix-color: @icon-tertiary;
@input-condition-fill-color: @brand-text;
@input-show-count-color: @text-tertiary;
@input-affix-size: @font-size-lg;
@input-suffix-icon-margin-left: @margin-xss;

// @input-line-height: @height-xs - 2px;

// Mentions
// ---
@mentions-dropdown-bg: @component-background;
@mentions-dropdown-menu-item-hover-bg: @mentions-dropdown-bg;

// Select
// ---
@select-disable-icon-color: @icon-disable;
@select-border-color: @border-color-base;
@select-item-selected-color: @brand-text;
@select-item-selected-font-weight: 600;
@select-dropdown-bg: @bg-dropdown;
@select-item-selected-bg: @sp-hover-bar-select;
@select-item-active-bg: @item-hover-bg;
@select-item-margin-bottom: 4px;
@select-item-border-radius: (@border-radius-base / 2);
@select-item-color: @text-primary;
@select-dropdown-vertical-padding: @dropdown-vertical-padding;
@select-dropdown-horizontal-padding: @dropdown-horizontal-padding;
@select-dropdown-font-size: @dropdown-font-size;
@select-dropdown-line-height: @dropdown-line-height - 10px;
@select-dropdown-height: 28px;
@select-background: transparent;
@select-clear-background: @select-background;
@select-selection-item-bg: @fill-fill-deeper;
@select-selection-item-border-color: @border-color-split;
@select-selection-line-height: @input-height-base - 12px;
@select-selection-line-height-lg: @input-height-lg - 10px;
@select-selection-line-height-bg: @input-height-bg - 10px;
@select-selection-line-height-sm: @input-height-sm - 10px;
@select-selection-line-height-xs: @input-height-xs - 10px;
@select-selection-show-prefix-left: 29px;
@select-single-item-height-lg: 40px;
@select-multiple-item-height: @input-height-base - @input-padding-vertical-base - 2px; // Normal 24px
// @select-multiple-item-height-normal: @input-height-xs; // Normal 20px
@select-multiple-item-height-lg: @input-height-base;
@select-multiple-item-height-bg: @input-height-sm;
@select-multiple-item-height-sm: @input-height-xs - 4px;
@select-multiple-item-height-xs: @input-height-xs - 6px;
@select-multiple-item-radius: @border-radius-xs;
@select-multiple-item-radius-lg: @border-radius-xs + 1px;
@select-multiple-item-radius-bg: @border-radius-xs + 1px;
@select-multiple-item-radius-sm: @border-radius-xs;
@select-multiple-item-radius-xs: @border-radius-xs;
@select-multiple-item-spacing-half: ceil((@input-padding-vertical-base / 2));
@select-multiple-item-option-disabled-background: @input-disabled-bg;
@select-multiple-disabled-background: @fill-fill;
@select-multiple-item-disabled-bg: @fill-fill-deep;
@select-multiple-item-disabled-color: @text-disable;
@select-multiple-item-disabled-border-color: @select-border-color;
@select-multiple-item-focus-bg-color