wetrade-design/es/style/themes/default.less

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

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

// 适用于暗黑主题

@theme: default;

// 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;

@gray-sp-1: #1f2029;
@gray-25: #08090d;
@gray-40: #191c24;
@gray-80: #13151b;
@blue-sp-5: #202a41;
@gray-00-40: fade(@gray-00, 40%);
// [CSS-VARIABLE-REPLACE-BEGIN: html-variables]
// [CSS-VARIABLE-REPLACE-END: html-variables]

// -------- Colors -----------
// >>> Primary
@brand-primary: @blue-500;
@brand-hover: @blue-500;
@brand-active: @blue-400;
@brand-primary-outline: fade(@brand-primary, @outline-fade);
@brand-disable: @blue-300;
@brand-extra-light: @blue-sp-8;
@brand-lighter: @blue-sp-18;
// @brand-primary-light-active: @blue-200;
@brand-text: @blue-700;
@brand-light: @blue-sp-30;

@processing-color: @blue-7;

// >>> Info
@trade-buy-buy: @blue-500;
@trade-buy-hover: @blue-600;
@trade-buy-active: @blue-400;
@trade-buy-disable: @blue-200;
@trade-buy-light-1: @blue-sp-4;
@trade-buy-light-2: @blue-100;
@trade-buy-text: @blue-600;

@trade-buy-buy-deprecated-bg: color(~`colorPalette('@{trade-buy-buy}', 1) `);
@trade-buy-buy-deprecated-border: color(~`colorPalette('@{trade-buy-buy}', 3) `);

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

// >>> Warning
@trade-selling-sellinging: @orange-500;
@trade-selling-hover: @orange-600;
@trade-selling-active: @orange-400;
@trade-selling-disable: @orange-200;
@trade-selling-light-1: @orange-sp-2;
@trade-selling-light-2: @orange-100;
@trade-selling-text: @orange-700;
@trade-selling-sellinging-outline: fade(@trade-selling-sellinging, @outline-fade);
@trade-selling-sellinging-deprecated-bg: color(~`colorPalette('@{trade-selling-sellinging}', 1) `);
@trade-selling-sellinging-deprecated-border: color(
  ~`colorPalette('@{trade-selling-sellinging}', 3) `
);

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

@highlight-color: @red-5;
@normal-color: #d9d9d9;
@white: #fff;
@black: #000;

// Color used by default to control hover and active backgrounds and for
// alert info backgrounds.
@primary-1: color(~`colorPalette('@{brand-primary}', 1) `); // replace tint(@brand-primary, 90%)
@primary-2: color(~`colorPalette('@{brand-primary}', 2) `); // replace tint(@brand-primary, 80%)
@primary-3: color(~`colorPalette('@{brand-primary}', 3) `); // unused
@primary-4: color(~`colorPalette('@{brand-primary}', 4) `); // unused
@primary-5: color(
  ~`colorPalette('@{brand-primary}', 5) `
); // color used to control the text color in many active and hover states, replace tint(@brand-primary, 20%)
@primary-6: @brand-primary; // color used to control the text color of active buttons, don't use, use @brand-primary
@primary-7: color(~`colorPalette('@{brand-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 Color ===========
@fluctuation-flat-flat: @gray-400;
@fluctuation-flat-hover: @gray-600;
@fluctuation-flat-active: @gray-400;
@fluctuation-flat-disable: @gray-300;
@fluctuation-flat-light-1: @gray-sp-2;
@fluctuation-flat-light-2: @gray-100;
@fluctuation-flat-text: @gray-700;

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

// ========== Background Color ===========
@bg-dialog: @gray-sp-1;
@bg-tooltip: @gray-100;
@bg-dropdown: @gray-sp-8;
@bg-page: @gray-80;
@bg-page-90: fade(@gray-50, 90%);
@bg-base: @gray-25;

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

// ========== Line Color ===========
@line-table: @gray-sp-4;
@line-devide: @gray-100;
@line-border: @gray-sp-12;

// filled
@fill-blank: @gray-sp-8;
@fill-blank-lighter: @gray-sp-25;
@fill-fill: @gray-sp-2;
@fill-fill-deep: @gray-sp-6;
@fill-fill-deeper: @gray-sp-4;
// 新增
@fill-white: @gray-1000;
@fill-black: @gray-00;
@fill-fill-light: @gray-sp-1;
@fill-fill-even-deeper: @gray-sp-12;
@fill-fill-much-deeper: @gray-sp-16;

// ========== Special Color ===========
@sp-shadow: @gray-00;
@sp-scroll-bar: @gray-sp-25;
@sp-overlay: @gray-00-40;
@sp-sider: @gray-25;
@sp-hover-bar: @gray-500-10;
@sp-hover-bar-active: @gray-500-20;
@sp-tooltips: @gray-900;
@sp-tooltips-text: @gray-00;
@sp-hover-bar-select: @blue-sp-t15;
@sp-tb-hover-bar: @gray-100;

// ======== Table Color =============
@table-hover-bar: @gray-sp-2;
@table-hover-bar-active: @gray-sp-8;
@table-hover-bar-select: @blue-sp-5;

// ========== Dorger Color ===========
@charts-dorger-dorger: @dorger-600;
@charts-dorger-text: @dorger-700;
@charts-dorger-light: @dorger-100;
// new
@charts-dorger-light-alpha: @dorger-500-7;

// ========== heliotrope Color ===========
@charts-heliotrope-heliotrope: @heliotrope-600;
@charts-heliotrope-text: @heliotrope-800;
@charts-heliotrope-light: @heliotrope-200;
// new
@charts-heliotrope-light-alpha: @heliotrope-500-7;

// ========== violet Color ===========
@charts-violet-violet: @violet-600;
@charts-violet-text: @violet-800;
@charts-violet-light: @violet-200;
// new
@charts-violet-light-alpha: @violet-500-7;

// ========== purple Color ===========
@charts-purple-purple: @purple-600;
@charts-purple-text: @purple-800;
@charts-purple-light: @purple-200;
// new
@charts-purple-light-alpha: @purple-500-7;

// ========== rosein Color ===========
@charts-rosein-rosein: @rosein-600;
@charts-rosein-text: @rosein-800;
@charts-rosein-light: @rosein-200;
// new
@charts-rosein-light-alpha: @rosein-500-7;

// ========== red Color ===========
@charts-red-red: @red-500;
@charts-red-text: @red-800;
@charts-red-light: @red-200;
@charts-red-foundation: @red-100;
@charts-red-foundation-deep: @red-300;
@charts-red-foundation-deeper: @red-500;
@charts-red-foundation-even-deeper: @red-700;
// new
@charts-red-light-alpha: @red-500-7;

// ========== sunset Color ===========
@charts-sunset-sunset: @sunset-600;
@charts-sunset-text: @sunset-800;
@charts-sunset-light: @sunset-100;
// new
@charts-sunset-light-alpha: @sunset-500-7;

// ========== sunglow Color ===========
@charts-sunglow-sunglow: @sunglow-600;
@charts-sunglow-text: @sunglow-800;
@charts-sunglow-light: @sunglow-200;
// new
@charts-sunglow-light-alpha: @sunglow-500-7;

// ========== shamrock Color ===========
@charts-shamrock-shamrock: @shamrock-600;
@charts-shamrock-text: @shamrock-800;
@charts-shamrock-light: @shamrock-200;
// new
@charts-shamrock-light-alpha: @shamrock-500-7;

// ========== green Color ===========
@charts-green-green: @green-500;
@charts-green-text: @green-800;
@charts-green-light: @green-200;
@charts-green-foundation: @green-100;
@charts-green-foundation-deep: @green-300;
@charts-green-foundation-deeper: @green-500;
@charts-green-foundation-even-deeper: @green-700;
// new
@charts-green-light-alpha: @green-500-7;

// ========== viking Color ===========
@charts-viking-viking: @viking-600;
@charts-viking-text: @viking-800;
@charts-viking-light: @viking-200;
// new
@charts-viking-light-alpha: @viking-500-7;

// ========== malibu Color ===========
@charts-malibu-malibu: @malibu-600;
@charts-malibu-text: @malibu-800;
@charts-malibu-light: @malibu-200;
// new
@charts-maibu-light-alpha: @malibu-500-7;

// ========== Gray Color ===========
@charts-gray-gray: @gray-700;
@charts-gray-text: @gray-800;
@charts-gray-light: @gray-200;
// new
@charts-gray-light-alpha: @gray-500-7;

// 新增red
@charts-red-heatmap: @red-800;
@charts-red-heatmap-deep: @red-500;
@charts-red-heatmap-deeper: @red-200;

// 新增green
@charts-green-heatmap: @green-700;
@charts-green-heatmap-deep: @green-500;
@charts-green-heatmap-deeper: @green-200;

// 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: color(~`colorPalette('@{link-color}', 5) `);
@link-active-color: color(~`colorPalette('@{link-color}', 7) `);
@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(0, 0, 0, 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: 0px 2px 12px 0px rgba(0, 0, 0, 0.15);
@shadow-200-drop: 0px 0px 1px 0px rgba(255, 255, 255, 0.6), 0px 6px 28px 0px rgba(0, 0, 0, 0.3),
  0px 6px 12px 0px rgba(0, 0, 0, 0.24);
@shadow-300-modal: 0px 6px 12px 0px rgba(0, 0, 0, 0.24), 0px 9px 32px 2px rgba(0, 0, 0, 0.5),
  0px 0px 1px 0px rgba(255, 255, 255, 0.6);
@shadow-module-top: 0px 2px 4px -1px rgba(0, 0, 0, 0.1), 0px 4px 16px 0px rgba(0, 0, 0, 0.15),
  0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.15);
@shadow-module-bottom: 0px -2px 4px -1px rgba(0, 0, 0, 0.12), 0px -4px 16px 0px rgba(0, 0, 0, 0.15),
  0px -0.5px 0px 0px rgba(255, 255, 255, 0.15);
@shadow-module-right: 2px 0px 4px -1px rgba(0, 0, 0, 0.12), 4px 0px 16px 0px rgba(0, 0, 0, 0.15);
@shadow-module-left: -2px 0px 4px -1px rgba(0, 0, 0, 0.12), -4px 0px 16px 0px rgba(0, 0, 0, 0.15);
@shadow-card-normal: 0px 2px 5px 0px rgba(0, 0, 0, 0.03), 0px 2px 24px 0px rgba(0, 0, 0, 0.05),
  0px 0px 1px 0px rgba(255, 255, 255, 0.6);
@shadow-card-active: 0px 2px 5px 0px rgba(0, 0, 0, 0.2), 0px 8px 24px 0px rgba(0, 0, 0, 0.24),
  0px 0px 1px 0px rgba(255, 255, 255, 0.6);
@shadow-tab: -20px 0px 10px 0px rgba(0, 0, 0, 0.5);

// 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: @btn-padding-horizontal-base;
@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;

// 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;

// 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: 7px;
@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: @primary-5;
@input-number-handler-bg: @component-background;
@input-number-handler-border-color: @border-color-base;
@input-addon-bg: @background-color-light;
@input-hover-border-color: @primary-5;
@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;

@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: 20px; // 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: @brand-extra-light;
@select-multiple-item-focus-color: @brand-text;
@select-multiple-condition-item-max-width: 90px;
@select-multiple-condition-item-bg-color: @fill-blank-lighter;
@select-multiple-condition-item-border-color: @line-border;
@select-multiple-condition-item-border-radius: @border-radius-xs + 1px;
@select-multiple-tag-margin-right: @margin-xss;
@select-multiple-tag-margin-vertical: @margin-xss - 2px;
@select-multiple-tag-padding-vertical: @padding-xss - 3px;
@select-multiple-tag-padding-horizontal: @padding-xss - 1px;
@select-multiple-placeholder-left: 8px;
@select-multiple-checkall-width: calc(100% - 6px);
@select-multiple-checkall-padding: 0 8px;
@select-multiple-checkall-margin-top: 8px;
@select-multiple-checkall-after-top: -4px;
@select-multiple-checkall-after-height: 1px;
@select-multiple-checkall-after-background-color: @line-devide;
@select-multiple-checkall-text-padding-left: 8px;
@select-option-multiple-padding: 0 8px 0 0;
@select-clear-color: @icon-tertiary;
@select-arrow-color: @icon-tertiary;
@select-condition-bg-color: @fill-fill;
@select-label-color: @text-secondary;
@select-condition-radius: @border-radius-sm;
@select-condition-padding: 0 @padding-sm;
@select-label-margin-right: @margin-xs;
@select-condition-bg-hover-color: @sp-hover-bar-active;
@select-condition-focus-border-color: @brand-primary;
@select-condition-focus-bg-color: @bg-page;
@select-condition-color: @brand-text;
@select-condition-disable-color: @text-disable;
@select-condition-multiple-item-hover-color: @brand-primary;
@select-tree-treenode-padding: @padding-xs - 1px @padding-xss;
@select-dropdown-stock-search-width: 260px;
@select-dropdown-stock-search-list-height: 320px;
@select-dropdown-stock-search-header-height: 30px;
@select-dropdown-stock-search-tabs-height: 30px;
@select-dropdown-stock-search-place-height: 8px;
@select-dropdown-stock-search-code-width: 60px;
@select-dropdown-stock-search-history-padding: 6px;
@select-dropdown-stock-search-margin: 0 8px;
@select-dropdown-stock-search-code-color: @text-tertiary;
@select-dropdown-stock-search-code-margin-right: @margin-xs;
@select-dropdown-stock-search-name-line-height: @line-height-base;
@select-dropdown-stock-search-name-color: @text-primary;
@select-dropdown-stock-search-name-margin-left: 8px;
@select-dropdown-stock-search-select-item-padding: 5px 8px;
// Cascader
// ---
@cascader-bg: @component-background;
@cascader-item-selected-bg: @sp-hover-bar-select;
@cascader-menu-bg: @component-background;
@cascader-menu-border-color-split: @border-color-split;
@cascader-menu-expand-icon-color: @text-secondary;

// Cascader
// ----
@cascader-dropdown-vertical-padding: @dropdown-vertical-padding;
@cascader-dropdown-edge-child-vertical-padding: @dropdown-edge-child-vertical-padding;
@cascader-dropdown-edge-child-horizontal-padding: @dropdown-edge-child-horizontal-padding;
@cascader-dropdown-font-size: @dropdown-font-size;
@cascader-dropdown-line-height: @line-height-base;
@cascader-dropdown-item-border-radius: @border-radius-sm;
@cascader-dropdown-active-font-weight: 600;
@cascader-dropdown-item-margin-top: @margin-xss;
// Anchor
// ---
@anchor-bg: transparent;
@anchor-border-color: @border-color-split;
@anchor-link-top: 7px;
@anchor-link-left: 16px;
@anchor-link-padding: @anchor-link-top 0 @anchor-link-top @anchor-link-left;

// Tooltip
// ---
// Tooltip max width
@tooltip-max-width: 250px;
// Tooltip text color
@tooltip-color: @sp-tooltips-text;
// Tooltip background color
@tooltip-bg: @sp-tooltips;
// Tooltip arrow width
@tooltip-arrow-width: 5px;
// Tooltip distance with trigger
@tooltip-distance: @tooltip-arrow-width - 1px;
// Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;
@tooltip-font-size: @font-size-sm;
@tooltip-line-height: @line-height-base;
@tooltip-padding: @padding-xs @padding-sm;

// Popover
// ---
// Popover body background color
@popover-bg: @bg-tooltip;
// Popover text color
@popover-color: @text-color;
// Popover maximum width
@popover-min-width: 200px;
@popover-min-height: 18px;
// Popover arrow width
@popover-arrow-width: 6px;
// Popover arrow color
@popover-arrow-color: @popover-bg;
// Popover outer arrow width
// Popover outer arrow color
@popover-arrow-outer-color: @popover-bg;
// Popover distance with trigger
@popover-distance: @popover-arrow-width + 4px;
@popover-padding-horizontal: @padding-md;
// Popover inner padding
@popover-padding-out-layer: @padding-md;
@popover-font-weight-bold: 600;
@popover-title-color: @text-primary;
@popover-content-color: @text-secondary;
@popover-line-height: @line-height-base;
@popover-font-size: @font-size-sm;
@popover-title-margin-bottom: @margin-xs;
@popover-border-shadow: inset 0 0 @border-width-base @line-table;
@popover-shadow: @shadow-200-drop;

// Modal
// --
@modal-header-padding-vertical: @padding-lg;
@modal-header-padding-horizontal: @padding-lg;
@modal-body-padding: 0 @padding-lg;
@modal-header-bg: @bg-dialog;
@modal-header-padding: @modal-header-padding-vertical @modal-header-padding-horizontal;
@modal-header-border-width: @border-width-base;
@modal-header-border-style: @border-style-base;
@modal-header-title-line-height: 22px;
@modal-header-title-padding-left: 8px;
@modal-header-title-font-size: @font-size-lg;
@modal-header-border-color-split: @border-color-split;
@modal-wdicon: 20px;
@modal-header-close-size: 22px;
@modal-header-close-font-size: @icon-size-lg + 2px;
@modal-content-bg: @bg-dialog;
@modal-heading-color: @heading-color;
@modal-close-color: @icon-secondary;
@modal-close-hover-color: @icon-primary;
@modal-close-hover-bg: @sp-hover-bar;
@modal-close-active-bg: @sp-hover-bar-active;
@modal-close-position: 24px;
@modal-close-radius: @border-radius-xs + 1px;
@modal-footer-bg: @bg-dialog;
@modal-footer-border-color-split: @border-color-split;
@modal-footer-border-style: @border-style-base;
@modal-footer-padding-vertical: @padding-lg;
@modal-footer-padding-horizontal: @padding-lg;
@modal-footer-border-width: @border-width-base;
@modal-mask-bg: @sp-overlay;
@modal-confirm-body-padding: @padding-lg;
@modal-confirm-footer-margin-top: @margin-md;
@modal-confirm-title-font-size: @font-size-lg;
@modal-title-font-weight: @base-weight-font;
// 侧边栏
@modal-side-padding: @padding-md;
@modal-side-max-width: 248px;
// Progress
// --
@progress-default-color: @processing-color;
@progress-remaining-color: @background-color-base;
@progress-info-text-color: @progress-text-color;
@progress-radius: 100px;
@progress-steps-item-bg: #f3f3f3;
@progress-text-font-size: 1em;
@progress-text-color: @text-color; // This is for circle text color, should be renamed better
@progress-circle-text-font-size: 1em;
// Menu
// ---
@menu-inline-toplevel-item-height: 40px;
@menu-item-height: 40px;
@menu-item-group-height: @line-height-base;
@menu-collapsed-width: 80px;
@menu-bg: @component-background;
@menu-popup-bg: @component-background;
@menu-item-color: @text-color;
@menu-inline-submenu-bg: @background-color-light;
@menu-highlight-color: @brand-primary;
@menu-highlight-danger-color: @fluctuation-rise-rise;
@menu-item-active-bg: @primary-1;
@menu-item-active-danger-bg: @red-1;
@menu-item-active-border-width: 3px;
@menu-item-group-title-color: @text-color-secondary;
@menu-item-vertical-margin: 4px;
@menu-item-font-size: @font-size-base;
@menu-item-boundary-margin: 8px;
@menu-item-padding-horizontal: 20px;
@menu-item-padding: 0 @menu-item-padding-horizontal;
@menu-horizontal-line-height: 46px;
@menu-icon-margin-right: 10px;
@menu-icon-size: @menu-item-font-size;
@menu-icon-size-lg: @font-size-lg;
@menu-item-group-title-font-size: @menu-item-font-size;

// dark theme
@menu-dark-color: @text-color-secondary-dark;
@menu-dark-danger-color: @fluctuation-rise-rise;
@menu-dark-bg: @layout-header-background;
@menu-dark-arrow-color: #fff;
@menu-dark-inline-submenu-bg: #000c17;
@menu-dark-highlight-color: #fff;
@menu-dark-item-active-bg: @brand-primary;
@menu-dark-item-active-danger-bg: @fluctuation-rise-rise;
@menu-dark-selected-item-icon-color: @white;
@menu-dark-selected-item-text-color: @white;
@menu-dark-item-hover-bg: transparent;
// Spin
// ---
@spin-dot-size-sm: 14px;
@spin-dot-size: 24px;
@spin-dot-size-lg: 32px;
@spin-container-bg: @bg-page-90;

// Table
// --
@table-bg: @bg-page;
@table-header-bg: @fluctuation-flat-light-1;
@table-header-color: @heading-color;
@table-header-sort-bg: @background-color-base;
@table-body-sort-bg: @bg-page;
@table-row-hover-bg: @table-hover-bar;
@table-selected-row-color: inherit;
@table-selected-row-bg: @table-hover-bar-select;
@table-body-selected-sort-bg: @table-selected-row-bg;
@table-selected-row-hover-bg: darken(@table-selected-row-bg, 2%);
@table-expanded-row-bg: @bg-page;
@table-padding-vertical: 16px;
@table-padding-horizontal: 16px;
@table-padding-vertical-md: (@table-padding-vertical * 3 / 4);
@table-padding-horizontal-md: (@table-padding-horizontal / 2);
@table-padding-vertical-sm: (@table-padding-vertical / 2);
@table-padding-horizontal-sm: (@table-padding-horizontal / 2);
@table-border-color: @border-color-split;
@table-border-primary-color: @border-color-primary;
// @table-expand-icon-top: -1px;
@table-expand-icon-color: @brand-text;
@table-expand-icon-margin-right: 4px;
@table-border-radius-base: @border-radius-base;
@table-footer-bg: @background-color-light;
@table-footer-color: @heading-color;
@table-header-bg-sm: @table-header-bg;
@table-font-size: @font-size-sm;
@table-font-size-md: @table-font-size;
@table-font-size-sm: @table-font-size;
@table-header-cell-split-color: rgba(0, 0, 0, 0.06);
@table-header-padding-vertical: 4px;
@table-header-padding-horizontal: 12px;
@table-header-cell-action-padding: @padding-xss @padding-sm - 1;
@table-body-padding-vertical: 7px;
@table-header-font-color: @text-secondary;
// @table-header-backgroound: @fill-fill-deep;
@table-header-border-color: @line-table;
@table-body-border-color: @line-table;
@table-left-box-shadow: @shadow-module-left;
@table-right-box-shadow: @shadow-module-right;
@table-operation-left: 8px;

// Sorter
// Legacy: `table-header-sort-active-bg` is used for hover not real active
@table-header-sort-active-bg: rgba(0, 0, 0, 0.04);
@table-fixed-header-sort-active-bg: hsv(0, 0, 96%);

// Filter
@table-header-filter-active-bg: rgba(0, 0, 0, 0.04);
@table-filter-btns-bg: inherit;
@table-filter-dropdown-bg: @dropdown-menu-bg;
@table-filter-active-color: @brand-text;
@table-filter-hover-background-color: @sp-hover-bar;
@table-filter-active-background-color: @sp-hover-bar-active;
@table-filter-dropdown-min-width: 140px;
@table-filter-dropdown-max-width: 260px;
@table-filter-dropdown-input-width: 244px;
@table-filter-dropdown-menu-padding: 8px 8px 0;
@table-filter-dropdown-menu-item-padding: 0 8px;
@table-filter-dropdown-menu-item-line-height: 28px;
@table-filter-dropdown-btns-padding: 4px 8px 8px;
@table-filter-dropdown-wrapper-span-padding-left: 8px;
@table-filter-dropdown-menu-title-content-padding: 0 8px;
@table-filter-dropdown-btns-button-font-size: 12px;
@table-filter-dropdown-wrapper-height: 14px;
@table-filter-dropdown-multiple-wrapper-padding: 0 8px;
@table-filter-dropdown-radio-wrapper-padding: 0 4px;
@table-filter-dropdown-radio-btns-button-margin: 4px 0 0;
@table-filter-dropdown-btns-margin-top: 4px;
@table-filter-dropdown-item-selected-background-color: @primary-1;
@table-expand-icon-bg: @component-background;
@table-selection-column-width: 32px;
// Sticky
@table-sticky-scroll-bar-bg: fade(#000, 35%);
@table-sticky-scroll-bar-radius: 4px;

// body
@table-body-cell-operability-bg: @table-hover-bar-active;
@table-body-cell-action-padding: @padding-xss @padding-xs @padding-xss - 1px;
// module
@table-module-empty-table-height: 228px;
// view
@table-view-empty-height: 306px;

// Scroll
@scroll-bar-width: 4px;
@scroll-bar-height: 4px;

// Tag
// --
@tag-default-bg: @background-color-light;
@tag-default-color: @text-color;
@tag-font-size: @font-size-sm;
@tag-line-height: @line-height-base;
@tag-border-radius: @border-radius-xs;
@tag-region-type-width: 21px;
@tag-region-type-height: @tag-line-height - 4px;
@tag-region-type-big-width: 24px;
@tag-region-type-big-height: @tag-line-height - 2px;
@tag-popover-height: @tag-line-height - 2px;
@tag-popover-padding: 0 @padding-xss - 2px;
@tag-popover-border-color: @line-border;
@tag-popover-font-size: @font-size-sm;
@tag-popover-color: @text-tertiary;
@tag-popover-font-weight: @base-weight-font + 100;
@tag-popover-bg-color: @bg-page;
@tag-long-padding: 0 @padding-xs;
@tag-short-padding: 0 @padding-xss;

// TimePicker
// ---
@picker-bg: transparent;
@picker-active-bg: @bg-page;
@picker-basic-cell-hover-color: @item-hover-bg;
@picker-basic-cell-active-with-range-color: @brand-extra-light;
@picker-basic-cell-hover-with-range-color: @brand-lighter;
@picker-basic-cell-disabled-bg: @sp-hover-bar;
@picker-basic-today-padding: 7px 18px;
@picker-border-color: @line-devide;
@picker-date-hover-range-border-color: lighten(@brand-primary, 20%);
@picker-date-hover-range-color: @picker-basic-cell-hover-with-range-color;
@picker-date-active-range-color: @sp-hover-bar;
@picker-time-panel-column-width: 64px;
@picker-month-panel-column-width: 72px;
@picker-month-panel-before-left: -4px;
@picker-range-hover-start-border-radius: 16px 0 0 16px;
@picker-range-hover-end-border-radius: 0 16px 16px 0;

@picker-year-panel-cell-before-height: 30px;
@picker-year-panel-cell-before-line-height: 30px;
@picker-year-panel-range-hover-start-border-radius: 15px 0 0 15px;

@picker-month-panel-width: 208px;
@picker-month-panel-height: 156px;
@picker-year-panel-height: 144px;
@picker-quarter-panel-width: 272px;
// month
@picker-month-panel-cell-padding: 4px;
@picker-month-panel-today-bottom: 0;
@picker-month-panel-today-border: 2px;
@picker-month-panel-today-brfore-bottom: 1px;
@picker-month-panel-padding: 20px 16px;
@picker-month-panel-cell-td-padding: @padding-xss + 2px 0;
@picker-month-panel-cell-td-height: @height-bg - 2px;
@picker-month-year-panel-cell-before-height: @height-base - 2px;
@picker-month-year-panel-body-padding: @padding-xs + 1px @padding-sm;

@picker-year-panel-cell-td-height: @height-base;
@picker-year-panel-body-padding: @padding-xs + 1px @padding-sm;

@picker-time-panel-column-height: 224px;
@picker-time-panel-cell-height: 24px;
@picker-time-panel-cell-padding: 0 0 4px;
@picker-time-panel-cell-margin-top: @margin-xs;
@picker-quarter-panel-cell-height: 24px;
@picker-panel-after-top: -4px;
@picker-panel-after-bottom: -4px;
@picker-panel-after-left: -4px;
@picker-panel-cell-height: 32px;
@picker-panel-cell-td-height: 36px;
@picker-panel-cell-td-before-height: 32px;
@picker-panel-cell-td-padding-bottom: 4px;
@picker-panel-cell-width: 32px;
@picker-panel-cell-margin-top: @margin-xss;
@picker-month-panel-tbody-tr-padding: 6px 0;
@picker-year-panel-tbody-tr-padding: 4px 0;
@picker-text-height: 40px;
@picker-panel-without-time-cell-height: 66px;

@picker-panel-cell-today-width: 4px;
@picker-suffix-color: @icon-tertiary;
@picker-suffix-hover-color: @icon-primary;
@picker-panel-header-verical-padding: @padding-xss - 2px;
@picker-panel-header-title-color: @brand-text;
@picker-panel-header-color: @text-secondary;
@picker-panel-header-height: 32px;
@picker-panel-header-font-size: @font-size-sm;
@picker-panel-header-icon-size: @font-size-lg;
@picker-panel-header-icon-color: @icon-secondary;
@picker-panel-header-icon-hover-color: @icon-primary;
@picker-panel-header-button-size: 24px;
@picker-panel-header-button-hover-color: @icon-primary;
@picker-panel-header-button-bg-hover-color: @sp-hover-bar;
@picker-panel-body-verical-padding: @padding-md + 4px;
@picker-panel-body-selected-color: @text-white;
@picker-panel-body-today-color: @brand-text;
@picker-panel-body-today-padding: 3px @padding-xs;
@picker-panel-body-today-margin: 0 12px;
@picker-panel-body-today-width: calc(100% - 24px);
@picker-panel-footer-height: 40px;
@picker-condition-disable-color: @text-disable;
@picker-condition-bg-color: @fill-fill;
@picker-condition-bg-hover-color: @sp-hover-bar-active;
@picker-condition-label-color: @text-secondary;
@picker-condition-bg-focused-color: @bg-page;
@picker-condition-border-color: @brand-primary;
@picker-separator-color: @icon-tertiary;
@picker-shortcuts-padding: @padding-sm @padding-xs;
@picker-shortcuts-border-color: @line-devide;
@picker-shortcuts-width: 80px;
@pic