vui-design/src/style/theme/index.less

A high quality UI Toolkit based on Vue.js

// 通用变量 --------------------------------------------------------------------------------

// 前缀
@vui: vui;

// 主题色彩
@default-color: #e0e0e0;
@primary-color: #2d8cf0;
@info-color: #5bc0de;
@warning-color: #faad14;
@success-color: #52c41a;
@error-color: #ff4d4f;

// 字体相关
@font-primary-color: tint(#000, 15%);
@font-color: tint(#000, 35%);
@font-secondary-color: tint(#000, 55%);
@font-disabled-color: tint(#000, 75%);
@font-reverse-color: #fff;

@font-size-sm: 12px;
@font-size: 14px;
@font-size-lg: 16px;
@font-size-xl: 20px;
@font-size-xxl: 24px;

@font-weight-thin: 300;
@font-weight: 400;
@font-weight-bold: 600;

@font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

@line-height: 1.42857143;

// 边框
@border-width: 1px;
@border-style: solid;
@border-color: #e0e0e0;
@border: @border-width @border-style @border-color;

// 圆角
@border-radius: 2px;

// 背景色
@background-color: #fff;

// 阴影
@box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);

// 外边距
@margin-xss: 4px;
@margin-xs: 8px;
@margin-sm: 12px;
@margin-md: 16px;
@margin-lg: 20px;
@margin-xl: 24px;

// 内边距
@padding-xss: 4px;
@padding-xs: 8px;
@padding-sm: 12px;
@padding-md: 16px;
@padding-lg: 20px;
@padding-xl: 24px;

// Body 背景色
@body-background-color: @background-color;

// 组件背景色
@component-background-color: @background-color;
@component-dark-background-color: #1a2035;

// 遮罩背景色
@backdrop-background-color: rgba(0,0,0,0.4);

// 链接颜色
@link-color: @primary-color;
@link-hover-color: tint(@link-color, 10%);
@link-active-color: shade(@link-color, 10%);

// 属性过度
@transition-duration: 0.2s;
@transition-timing-function: cubic-bezier(0.23,1,0.32,1);

// 动画
@animation-in-duration: 0.2s;
@animation-in-timing-function: cubic-bezier(0.23,1,0.32,1);

@animation-out-duration: 0.2s;
@animation-out-timing-function: cubic-bezier(0.23,1,0.32,1);

// 媒体查询
@screen-xs: 480px;
@screen-sm: 576px;
@screen-md: 768px;
@screen-lg: 992px;
@screen-xl: 1200px;
@screen-xxl: 1600px;

@screen-xs-min: @screen-xs;
@screen-sm-min: @screen-sm;
@screen-md-min: @screen-md;
@screen-lg-min: @screen-lg;
@screen-xl-min: @screen-xl;
@screen-xxl-min: @screen-xxl;

@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);

// 通用组件 --------------------------------------------------------------------------------

// Button
@button-border-width: @border-width;
@button-border-radius: @border-radius;

@button-size-sm: 24px;
@button-size-md: 34px;
@button-size-lg: 44px;

@button-padding-size-sm: 8px;
@button-padding-size-md: 14px;
@button-padding-size-lg: 20px;

@button-font-size-sm: @font-size-sm;
@button-font-size-md: @font-size;
@button-font-size-lg: @font-size-lg;

@button-default-border-color: @border-color;
@button-default-background-color: @component-background-color;
@button-default-font-color: @font-color;
@button-default-hover-border-color: tint(@primary-color, 10%);
@button-default-hover-background-color: @component-background-color;
@button-default-hover-font-color: tint(@primary-color, 10%);
@button-default-active-border-color: shade(@primary-color, 10%);
@button-default-active-background-color: @component-background-color;
@button-default-active-font-color: shade(@primary-color, 10%);
@button-default-disabled-border-color: @border-color;
@button-default-disabled-background-color: shade(@component-background-color, 2%);
@button-default-disabled-font-color: @font-disabled-color;

@button-primary-border-color: @primary-color;
@button-primary-background-color: @primary-color;
@button-primary-font-color: @font-reverse-color;
@button-primary-hover-border-color: tint(@primary-color, 10%);
@button-primary-hover-background-color: tint(@primary-color, 10%);
@button-primary-hover-font-color: @font-reverse-color;
@button-primary-active-border-color: shade(@primary-color, 10%);
@button-primary-active-background-color: shade(@primary-color, 10%);
@button-primary-active-font-color: @font-reverse-color;
@button-primary-disabled-border-color: @border-color;
@button-primary-disabled-background-color: shade(@component-background-color, 2%);
@button-primary-disabled-font-color: @font-disabled-color;

@button-info-border-color: @info-color;
@button-info-background-color: @info-color;
@button-info-font-color: @font-reverse-color;
@button-info-hover-border-color: tint(@info-color, 10%);
@button-info-hover-background-color: tint(@info-color, 10%);
@button-info-hover-font-color: @font-reverse-color;
@button-info-active-border-color: shade(@info-color, 10%);
@button-info-active-background-color: shade(@info-color, 10%);
@button-info-active-font-color: @font-reverse-color;
@button-info-disabled-border-color: @border-color;
@button-info-disabled-background-color: shade(@component-background-color, 2%);
@button-info-disabled-font-color: @font-disabled-color;

@button-warning-border-color: @warning-color;
@button-warning-background-color: @warning-color;
@button-warning-font-color: @font-reverse-color;
@button-warning-hover-border-color: tint(@warning-color, 10%);
@button-warning-hover-background-color: tint(@warning-color, 10%);
@button-warning-hover-font-color: @font-reverse-color;
@button-warning-active-border-color: shade(@warning-color, 10%);
@button-warning-active-background-color: shade(@warning-color, 10%);
@button-warning-active-font-color: @font-reverse-color;
@button-warning-disabled-border-color: @border-color;
@button-warning-disabled-background-color: shade(@component-background-color, 2%);
@button-warning-disabled-font-color: @font-disabled-color;

@button-success-border-color: @success-color;
@button-success-background-color: @success-color;
@button-success-font-color: @font-reverse-color;
@button-success-hover-border-color: tint(@success-color, 10%);
@button-success-hover-background-color: tint(@success-color, 10%);
@button-success-hover-font-color: @font-reverse-color;
@button-success-active-border-color: shade(@success-color, 10%);
@button-success-active-background-color: shade(@success-color, 10%);
@button-success-active-font-color: @font-reverse-color;
@button-success-disabled-border-color: @border-color;
@button-success-disabled-background-color: shade(@component-background-color, 2%);
@button-success-disabled-font-color: @font-disabled-color;

@button-danger-border-color: @error-color;
@button-danger-background-color: @error-color;
@button-danger-font-color: @font-reverse-color;
@button-danger-hover-border-color: tint(@error-color, 10%);
@button-danger-hover-background-color: tint(@error-color, 10%);
@button-danger-hover-font-color: @font-reverse-color;
@button-danger-active-border-color: shade(@error-color, 10%);
@button-danger-active-background-color: shade(@error-color, 10%);
@button-danger-active-font-color: @font-reverse-color;
@button-danger-disabled-border-color: @border-color;
@button-danger-disabled-background-color: shade(@component-background-color, 2%);
@button-danger-disabled-font-color: @font-disabled-color;

@button-dashed-border-color: @border-color;
@button-dashed-background-color: @component-background-color;
@button-dashed-font-color: @font-color;
@button-dashed-hover-border-color: tint(@primary-color, 10%);
@button-dashed-hover-background-color: @component-background-color;
@button-dashed-hover-font-color: tint(@primary-color, 10%);
@button-dashed-active-border-color: shade(@primary-color, 10%);
@button-dashed-active-background-color: @component-background-color;
@button-dashed-active-font-color: shade(@primary-color, 10%);
@button-dashed-disabled-border-color: @border-color;
@button-dashed-disabled-background-color: shade(@component-background-color, 2%);
@button-dashed-disabled-font-color: @font-disabled-color;

@button-text-border-color: transparent;
@button-text-background-color: transparent;
@button-text-font-color: @font-color;
@button-text-hover-border-color: transparent;
@button-text-hover-background-color: transparent;
@button-text-hover-font-color: tint(@primary-color, 10%);
@button-text-active-border-color: transparent;
@button-text-active-background-color: transparent;
@button-text-active-font-color: shade(@primary-color, 10%);
@button-text-disabled-border-color: transparent;
@button-text-disabled-background-color: transparent;
@button-text-disabled-font-color: @font-disabled-color;

// Link
@link-default-font-color: @font-color;
@link-default-hover-font-color: tint(@primary-color, 10%);
@link-default-active-font-color: shade(@primary-color, 10%);
@link-default-disabled-font-color: @font-disabled-color;

@link-primary-font-color: @primary-color;
@link-primary-hover-font-color: tint(@primary-color, 10%);
@link-primary-active-font-color: shade(@primary-color, 10%);
@link-primary-disabled-font-color: @font-disabled-color;

@link-info-font-color: @info-color;
@link-info-hover-font-color: tint(@info-color, 10%);
@link-info-active-font-color: shade(@info-color, 10%);
@link-info-disabled-font-color: @font-disabled-color;

@link-warning-font-color: @warning-color;
@link-warning-hover-font-color: tint(@warning-color, 10%);
@link-warning-active-font-color: shade(@warning-color, 10%);
@link-warning-disabled-font-color: @font-disabled-color;

@link-success-font-color: @success-color;
@link-success-hover-font-color: tint(@success-color, 10%);
@link-success-active-font-color: shade(@success-color, 10%);
@link-success-disabled-font-color: @font-disabled-color;

@link-danger-font-color: @error-color;
@link-danger-hover-font-color: tint(@error-color, 10%);
@link-danger-active-font-color: shade(@error-color, 10%);
@link-danger-disabled-font-color: @font-disabled-color;

@link-font-size-sm: @font-size-sm;
@link-font-size-md: @font-size;
@link-font-size-lg: @font-size-lg;

// 布局组件 --------------------------------------------------------------------------------

// Divider
@divider-color: rgba(0, 0, 0, 0.06);
@divider-horizontal-gutter: @margin-md;
@divider-vertical-gutter: @margin-xs;
@divider-text-font-color: @font-primary-color;
@divider-text-font-size: @font-size;

// Layout
@layout-background-color: #f4f6f8;

@layout-header-height: 64px;
@layout-header-padding: 0 48px;
@layout-header-light-background-color: @component-background-color;
@layout-header-dark-background-color: @component-dark-background-color;

@layout-sider-trigger-height: 48px;
@layout-sider-trigger-font-size: @font-size;

@layout-sider-light-background-color: @component-background-color;
@layout-sider-footer-light-border-color: rgba(0, 0, 0, 0.05);
@layout-sider-trigger-light-border-color: rgba(0, 0, 0, 0.05);
@layout-sider-trigger-light-font-color: @font-color;
@layout-sider-trigger-light-hover-font-color: @font-primary-color;
@layout-sider-trigger-light-active-font-color: @font-primary-color;
@layout-sider-dark-background-color: @component-dark-background-color;
@layout-sider-footer-dark-border-color: rgba(255, 255, 255, 0.025);
@layout-sider-trigger-dark-border-color: rgba(255, 255, 255, 0.025);
@layout-sider-trigger-dark-font-color: rgba(255, 255, 255, 0.65);
@layout-sider-trigger-dark-hover-font-color: rgba(255, 255, 255, 1);
@layout-sider-trigger-dark-active-font-color: rgba(255, 255, 255, 1);

@layout-footer-padding: 24px 48px;
@layout-footer-font-color: @font-color;
@layout-footer-font-size: @font-size;
@layout-footer-line-height: @line-height;

// Space
@space-size-sm: 8px;
@space-size-md: 16px;
@space-size-lg: 24px;
@space-with-divider-size-sm: 8px;
@space-with-divider-size-md: 12px;
@space-with-divider-size-lg: 16px;
@space-divider-width: 1px;
@space-divider-height: @font-size;
@space-divider-color: shade(@component-background-color, 6%);

// 导航组件 --------------------------------------------------------------------------------

// Affix
@affix-zIndex: 10;

// Breadcrumb
@breadcrumb-font-size: @font-size;
@breadcrumb-line-height: @line-height;
@breadcrumb-item-color: @font-secondary-color;
@breadcrumb-last-item-color: @font-color;
@breadcrumb-item-hover-color: @link-hover-color;
@breadcrumb-item-active-color: @link-active-color;
@breadcrumb-item-icon-size: @font-size-sm;
@breadcrumb-item-icon-margin-right: 4px;
@breadcrumb-item-separator-margin: 0 8px;
@breadcrumb-item-separator-color: @border-color;

// Dropdown
@dropdown-menu-border-radius: @border-radius;
@dropdown-menu-box-shadow: @box-shadow;
@dropdown-menu-line-height: 34px;

@dropdown-submenu-header-padding-horizontal: @padding-sm;
@dropdown-submenu-header-font-size: @font-size;
@dropdown-submenu-header-icon-margin-right: @margin-xs;
@dropdown-submenu-header-arrow-margin-left: @margin-sm;

@dropdown-menu-item-padding-horizontal: @padding-sm;
@dropdown-menu-item-font-size: @font-size;
@dropdown-menu-item-icon-margin-right: @margin-xs;

@dropdown-menu-item-group-header-padding-horizontal: @padding-sm;
@dropdown-menu-item-group-header-font-size: @font-size-sm;

@dropdown-menu-light-background-color: @component-background-color;

@dropdown-submenu-header-light-font-color: @font-color;
@dropdown-submenu-header-light-hover-background-color: #f5f5f5;
@dropdown-submenu-header-light-hover-font-color: @font-primary-color;
@dropdown-submenu-header-light-open-background-color: #f5f5f5;
@dropdown-submenu-header-light-open-font-color: @font-primary-color;
@dropdown-submenu-header-light-disabled-background-color: transparent;
@dropdown-submenu-header-light-disabled-font-color: @font-disabled-color;

@dropdown-menu-item-light-font-color: @font-color;
@dropdown-menu-item-light-hover-background-color: #f5f5f5;
@dropdown-menu-item-light-hover-font-color: @font-primary-color;
@dropdown-menu-item-light-disabled-background-color: transparent;
@dropdown-menu-item-light-disabled-font-color: @font-disabled-color;
@dropdown-menu-item-danger-light-font-color: @error-color;
@dropdown-menu-item-danger-light-hover-background-color: rgba(255,77,79,0.1);
@dropdown-menu-item-danger-light-hover-font-color: @error-color;
@dropdown-menu-item-danger-light-disabled-background-color: transparent;
@dropdown-menu-item-danger-light-disabled-font-color: @font-disabled-color;

@dropdown-menu-item-group-header-light-font-color: @font-disabled-color;

@dropdown-menu-divider-light-color: rgba(0,0,0,0.06);

@dropdown-menu-dark-background-color: @component-dark-background-color;

@dropdown-submenu-header-dark-font-color: rgba(255,255,255,0.65);
@dropdown-submenu-header-dark-hover-background-color: rgba(0,0,0,0.15);
@dropdown-submenu-header-dark-hover-font-color: rgba(255,255,255,1);
@dropdown-submenu-header-dark-open-background-color: rgba(0,0,0,0.15);
@dropdown-submenu-header-dark-open-font-color: rgba(255,255,255,1);
@dropdown-submenu-header-dark-disabled-background-color: transparent;
@dropdown-submenu-header-dark-disabled-font-color: rgba(255,255,255,0.35);

@dropdown-menu-item-dark-font-color: rgba(255,255,255,0.65);
@dropdown-menu-item-dark-hover-background-color: rgba(0,0,0,0.15);
@dropdown-menu-item-dark-hover-font-color: rgba(255,255,255,1);
@dropdown-menu-item-dark-disabled-background-color: transparent;
@dropdown-menu-item-dark-disabled-font-color: rgba(255,255,255,0.35);
@dropdown-menu-item-danger-dark-font-color: @error-color;
@dropdown-menu-item-danger-dark-hover-background-color: rgba(255,77,79,0.1);
@dropdown-menu-item-danger-dark-hover-font-color: @error-color;
@dropdown-menu-item-danger-dark-disabled-background-color: transparent;
@dropdown-menu-item-danger-dark-disabled-font-color: rgba(255,255,255,0.35);

@dropdown-menu-item-group-header-dark-font-color: rgba(255,255,255,0.35);

@dropdown-menu-divider-dark-color: rgba(255,255,255,0.06);

// Menu
@menu-collapsed-width: 80px;
@menu-line-height: 48px;
@menu-light-background-color: #fff;
@menu-dark-background-color: #1a2035;

// PageHeader
@page-header-background-color: @component-background-color;
@page-header-padding: @padding-lg;
@page-header-header-margin-top: @margin-md;
@page-header-header-tag-gutter: @margin-xs;
@page-header-header-extra-margin-left: @margin-md;
@page-header-body-margin-top: @margin-md;
@page-header-footer-margin-top: @margin-lg;
@page-header-back-color: @font-color;
@page-header-back-hover-color: @link-hover-color;
@page-header-back-active-color: @link-active-color;
@page-header-back-size: @font-size-lg;
@page-header-back-margin-right: @margin-md;
@page-header-avatar-margin-right: @margin-md;
@page-header-title-height: 34px;
@page-header-title-margin-right: @margin-md;
@page-header-title-font-color: @font-primary-color;
@page-header-title-font-size: @font-size + 6px;
@page-header-title-font-weight: 600;
@page-header-sub-title-height: 34px;
@page-header-sub-title-margin-right: @margin-md;
@page-header-sub-title-font-color: @font-disabled-color;
@page-header-sub-title-font-size: @font-size;

// Pagination
@pagination-height: 34px;
@pagination-font-color: @font-color;
@pagination-font-size: @font-size;

@pagination-item-size: 34px;
@pagination-item-size-sm: 24px;
@pagination-item-border-color: @border-color;
@pagination-item-border-radius: @border-radius;
@pagination-item-background-color: @component-background-color;
@pagination-item-margin: 8px;
@pagination-item-padding: 0 8px;
@pagination-item-padding-sm: 0 6px;
@pagination-item-hover-border-color: tint(@primary-color, 10%);
@pagination-item-hover-font-color: tint(@primary-color, 10%);
@pagination-item-active-border-color: @primary-color;
@pagination-item-active-font-color: @primary-color;
@pagination-item-disabled-border-color: @border-color;
@pagination-item-disabled-font-color: @font-disabled-color;

// Steps
@steps-item-title-margin-bottom:@margin-xs;
@steps-item-title-font-size: @font-size-lg;
@steps-item-title-font-size-sm: @font-size;
@steps-item-title-line-height: @line-height;

@steps-item-description-margin-top:@margin-xs;
@steps-item-description-font-size: @font-size;
@steps-item-description-font-size-sm: @font-size;
@steps-item-description-line-height: @line-height;

@steps-item-icon-size: 32px;
@steps-item-icon-size-sm: 24px;
@steps-item-icon-font-size: @font-size;
@steps-item-icon-font-size-sm: @font-size-sm;

@steps-item-custon-icon-size: @steps-item-icon-size;
@steps-item-custon-icon-size-sm: @steps-item-icon-size-sm;
@steps-item-custon-icon-font-size: @font-size-xxl;
@steps-item-custon-icon-font-size-sm: @font-size-lg;

@steps-item-dot-size: 8px;
@steps-item-dot-size-sm: 8px;

@steps-item-separator-gutter: @margin-xs;
@steps-item-separator-gutter-sm: @margin-xs;

@steps-item-content-width: 144px;
@steps-item-content-width-sm: 144px;
@steps-item-content-height: @steps-item-icon-size + @steps-item-separator-gutter * 2 + 8px;
@steps-item-content-height-sm: @steps-item-icon-size-sm + @steps-item-separator-gutter * 2 + 8px;

@steps-item-title-wait-font-color: @font-secondary-color;
@steps-item-description-wait-font-color: @font-disabled-color;
@steps-item-icon-wait-border-color: @font-disabled-color;
@steps-item-icon-wait-font-color: @font-disabled-color;
@steps-item-custom-icon-wait-font-color: @font-disabled-color;
@steps-item-dot-wait-color: @font-disabled-color;
@steps-item-separator-wait-color: @border-color;

@steps-item-title-process-font-color: @font-primary-color;
@steps-item-description-process-font-color: @font-color;
@steps-item-icon-process-border-color: @primary-color;
@steps-item-icon-process-font-color: @font-reverse-color;
@steps-item-custom-icon-process-font-color: @primary-color;
@steps-item-dot-process-color: @primary-color;
@steps-item-separator-process-color: @primary-color;

@steps-item-title-finish-font-color: @font-color;
@steps-item-description-finish-font-color: @font-secondary-color;
@steps-item-icon-finish-border-color: @primary-color;
@steps-item-icon-finish-font-color: @primary-color;
@steps-item-custom-icon-finish-font-color: @primary-color;
@steps-item-dot-finish-color: @primary-color;
@steps-item-separator-finish-color: @primary-color;

@steps-item-title-error-font-color: @error-color;
@steps-item-description-error-font-color: @error-color;
@steps-item-icon-error-border-color: @error-color;
@steps-item-icon-error-font-color: @error-color;
@steps-item-custom-icon-error-font-color: @error-color;
@steps-item-dot-error-color: @error-color;
@steps-item-separator-error-color: @error-color;

// Tabs
@tabs-header-border-bottom-width: @border-width;
@tabs-header-border-bottom-color: shade(@component-background-color, 6%);
@tabs-header-margin-bottom: @margin-md;

@tabs-tab-border-width: @border-width;
@tabs-tab-border-color: shade(@component-background-color, 6%);
@tabs-tab-border-radius: @border-radius;
@tabs-tab-background-color: shade(@component-background-color, 2%);
@tabs-tab-active-background-color: @component-background-color;
@tabs-tab-font-color: @font-color;
@tabs-tab-hover-font-color: tint(@primary-color, 10%);
@tabs-tab-active-font-color: @primary-color;
@tabs-tab-disabled-font-color: @font-disabled-color;
@tabs-tab-line-height: @line-height;
@tabs-tab-btn-close-font-color: @font-secondary-color;
@tabs-tab-btn-close-hover-font-color: @font-color;

@tabs-tab-height-sm: 36px;
@tabs-tab-height-md: 40px;
@tabs-tab-height-lg: 44px;
@tabs-tab-padding-horizontal-sm: @padding-sm;
@tabs-tab-padding-horizontal-md: @padding-md;
@tabs-tab-padding-horizontal-lg: @padding-lg;
@tabs-tab-font-size-sm: @font-size-sm;
@tabs-tab-font-size-md: @font-size;
@tabs-tab-font-size-lg: @font-size-lg;
@tabs-tab-icon-margin-right-sm: @margin-xs - 2px;
@tabs-tab-icon-margin-right-md: @margin-xs;
@tabs-tab-icon-margin-right-lg: @margin-xs + 2px;
@tabs-tab-btn-close-margin-left-sm: @margin-xs - 2px;
@tabs-tab-btn-close-margin-left-md: @margin-xs;
@tabs-tab-btn-close-margin-left-lg: @margin-xs + 2px;

@tabs-panel-font-color: @font-color;
@tabs-panel-font-size: @font-size;
@tabs-panel-line-height: @line-height;

// 数据录入 --------------------------------------------------------------------------------

// Cascader
@cascader-selection-border-color: @border-color;
@cascader-selection-border-radius: @border-radius;
@cascader-selection-background-color: @component-background-color;
@cascader-selection-font-color: @font-color;
@cascader-selection-placeholder-font-color: @font-disabled-color;
@cascader-selection-arrow-color: @font-disabled-color;
@cascader-selection-btn-clear-color: @font-disabled-color;
@cascader-selection-btn-clear-hover-color: @font-color;

@cascader-selection-size-sm: 24px;
@cascader-selection-size-md: 34px;
@cascader-selection-size-lg: 44px;

@cascader-selection-padding-sm: @padding-xs - 2px;
@cascader-selection-padding-md: @padding-xs;
@cascader-selection-padding-lg: @padding-xs + 2px;

@cascader-selection-font-size-sm: @font-size-sm;
@cascader-selection-font-size-md: @font-size;
@cascader-selection-font-size-lg: @font-size-lg;

@cascader-selection-btn-clear-size-sm: @font-size-sm;
@cascader-selection-btn-clear-size-md: @font-size;
@cascader-selection-btn-clear-size-lg: @font-size-lg;

@cascader-selection-hover-border-color: tint(@primary-color, 10%);
@cascader-selection-active-border-color: tint(@primary-color, 10%);
@cascader-selection-disabled-border-color: @border-color;
@cascader-selection-disabled-background-color: shade(@component-background-color, 2%);
@cascader-selection-disabled-font-color: @font-disabled-color;

@cascader-dropdown-max-height: 282px;
@cascader-dropdown-border-radius: @border-radius;
@cascader-dropdown-background-color: @component-background-color;
@cascader-dropdown-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);

@cascader-menu-min-width: 120px;
@cascader-menu-max-height: 282px;
@cascader-menu-border-color: #f3f3f3;

@cascader-menu-item-height: 34px;
@cascader-menu-item-padding-horizontal: 10px;
@cascader-menu-item-font-color: @font-color;
@cascader-menu-item-font-size: @font-size;

@cascader-menu-item-hover-background-color: #f5f5f5;
@cascader-menu-item-hover-font-color: @font-primary-color;
@cascader-menu-item-selected-background-color: #e6f7ff;
@cascader-menu-item-selected-font-color: @primary-color;
@cascader-menu-item-disabled-background-color: #fff;
@cascader-menu-item-disabled-font-color: @font-disabled-color;

@cascader-menu-item-arrow-margin-left: 8px;
@cascader-menu-item-arrow-size: 12px;

// Checkbox
@checkbox-border-color: @border-color;
@checkbox-border-radius: @border-radius;
@checkbox-background-color: @component-background-color;
@checkbox-indeterminate-color: @primary-color;
@checkbox-checkmark-color: @component-background-color;
@checkbox-font-color: @font-color;
@checkbox-line-height: @line-height;

@checkbox-size-sm: 14px;
@checkbox-size-md: 16px;
@checkbox-size-lg: 18px;

@checkbox-font-size-sm: @font-size-sm;
@checkbox-font-size-md: @font-size;
@checkbox-font-size-lg: @font-size-lg;

@checkbox-hover-border-color: tint(@primary-color, 10%);

@checkbox-checked-border-color: @primary-color;
@checkbox-checked-background-color: @primary-color;

@checkbox-disabled-border-color: @border-color;
@checkbox-disabled-background-color: shade(@component-background-color, 2%);
@checkbox-disabled-indeterminate-color: shade(@component-background-color, 25%);
@checkbox-disabled-checkmark-color: shade(@component-background-color, 25%);
@checkbox-disabled-font-color: @font-disabled-color;

// Checkbox Button
@checkbox-button-border-width: @border-width;
@checkbox-button-border-color: @border-color;
@checkbox-button-border-radius: @border-radius;
@checkbox-button-background-color: @component-background-color;
@checkbox-button-font-color: @font-color;

@checkbox-button-size-sm: @button-size-sm;
@checkbox-button-size-md: @button-size-md;
@checkbox-button-size-lg: @button-size-lg;

@checkbox-button-padding-size-sm: @button-padding-size-sm;
@checkbox-button-padding-size-md: @button-padding-size-md;
@checkbox-button-padding-size-lg: @button-padding-size-lg;

@checkbox-button-font-size-sm: @font-size-sm;
@checkbox-button-font-size-md: @font-size;
@checkbox-button-font-size-lg: @font-size-lg;

@checkbox-button-hover-font-color: tint(@primary-color, 10%);

@checkbox-button-checked-border-color: @primary-color;
@checkbox-button-checked-font-color: @primary-color;

@checkbox-button-disabled-border-color: @border-color;
@checkbox-button-disabled-background-color: shade(@component-background-color, 2%);
@checkbox-button-disabled-font-color: @font-disabled-color;

// Input
@input-border-color: @border-color;
@input-border-radius: @border-radius;
@input-background-color: @component-background-color;
@input-font-color: @font-color;
@input-font-family: @font-family;
@input-line-height: @line-height;

@input-size-sm: 24px;
@input-size-md: 34px;
@input-size-lg: 44px;

@input-padding-sm: @padding-xs - 2px;
@input-padding-md: @padding-xs;
@input-padding-lg: @padding-xs + 2px;

@input-font-size-sm: @font-size-sm;
@input-font-size-md: @font-size;
@input-font-size-lg: @font-size-lg;

@input-hover-border-color: tint(@primary-color, 10%);
@input-focus-border-color: tint(@primary-color, 10%);
@input-disabled-border-color: @border-color;
@input-disabled-background-color: shade(@component-background-color, 2%);
@input-disabled-font-color: @font-disabled-color;

@input-addon-background-color: shade(@component-background-color, 2%);
@input-affix-color: @font-disabled-color;

@input-btn-clear-color: @font-disabled-color;
@input-btn-clear-hover-color: @font-color;

@input-btn-toggle-color: @font-disabled-color;
@input-btn-toggle-hover-color: @font-color;

// InputNumber
@input-number-border-color: @border-color;
@input-number-border-radius: @border-radius;
@input-number-background-color: @component-background-color;
@input-number-font-color: @font-color;
@input-number-font-family: @font-family;
@input-number-line-height: @line-height;

@input-number-size-sm: 24px;
@input-number-size-md: 34px;
@input-number-size-lg: 44px;

@input-number-padding-sm: @padding-xs - 2px;
@input-number-padding-md: @padding-xs;
@input-number-padding-lg: @padding-xs + 2px;

@input-number-font-size-sm: @font-size-sm;
@input-number-font-size-md: @font-size;
@input-number-font-size-lg: @font-size-lg;

@input-number-hover-border-color: tint(@primary-color, 10%);
@input-number-focus-border-color: tint(@primary-color, 10%);
@input-number-disabled-border-color: @border-color;
@input-number-disabled-background-color: shade(@component-background-color, 2%);
@input-number-disabled-font-color: @font-disabled-color;

@input-number-trigger-size-sm: 20px;
@input-number-trigger-size-md: 24px;
@input-number-trigger-size-lg: 28px;

@input-number-btn-color: @font-secondary-color;
@input-number-btn-hover-color: @link-hover-color;
@input-number-btn-active-color: @link-active-color;
@input-number-btn-disabled-color: @font-disabled-color;

// Radio
@radio-border-color: @border-color;
@radio-border-radius: 50%;
@radio-background-color: @component-background-color;
@radio-checkmark-color: @primary-color;
@radio-font-color: @font-color;
@radio-line-height: @line-height;

@radio-size-sm: 14px;
@radio-size-md: 16px;
@radio-size-lg: 18px;

@radio-font-size-sm: @font-size-sm;
@radio-font-size-md: @font-size;
@radio-font-size-lg: @font-size-lg;

@radio-hover-border-color: tint(@primary-color, 10%);

@radio-checked-border-color: @primary-color;

@radio-disabled-border-color: @border-color;
@radio-disabled-background-color: shade(@component-background-color, 2%);
@radio-disabled-checkmark-color: shade(@component-background-color, 25%);
@radio-disabled-font-color: @font-disabled-color;

// Radio Button
@radio-button-border-width: @border-width;
@radio-button-border-color: @border-color;
@radio-button-border-radius: @border-radius;
@radio-button-background-color: @component-background-color;
@radio-button-font-color: @font-color;

@radio-button-size-sm: @button-size-sm;
@radio-button-size-md: @button-size-md;
@radio-button-size-lg: @button-size-lg;

@radio-button-padding-size-sm: @button-padding-size-sm;
@radio-button-padding-size-md: @button-padding-size-md;
@radio-button-padding-size-lg: @button-padding-size-lg;

@radio-button-font-size-sm: @font-size-sm;
@radio-button-font-size-md: @font-size;
@radio-button-font-size-lg: @font-size-lg;

@radio-button-hover-font-color: tint(@primary-color, 10%);

@radio-button-checked-border-color: @primary-color;
@radio-button-checked-font-color: @primary-color;

@radio-button-disabled-border-color: @border-color;
@radio-button-disabled-background-color: shade(@component-background-color, 2%);
@radio-button-disabled-font-color: @font-disabled-color;

// Rate
@rate-star-size: 20px;
@rate-star-margin-right: @margin-xs;
@rate-star-color: shade(@component-background-color, 6%);
@rate-star-checked-color: @warning-color;

// Select
@select-selection-border-color: @border-color;
@select-selection-border-radius: @border-radius;
@select-selection-background-color: @component-background-color;
@select-selection-font-color: @font-color;

@select-selection-size-sm: 24px;
@select-selection-size-md: 34px;
@select-selection-size-lg: 44px;

@select-selection-padding-sm: @padding-xs - 2px;
@select-selection-padding-md: @padding-xs;
@select-selection-padding-lg: @padding-xs + 2px;

@select-selection-font-size-sm: @font-size-sm;
@select-selection-font-size-md: @font-size;
@select-selection-font-size-lg: @font-size-lg;

@select-selection-hover-border-color: tint(@primary-color, 10%);
@select-selection-active-border-color: tint(@primary-color, 10%);
@select-selection-disabled-border-color: @border-color;
@select-selection-disabled-background-color: shade(@component-background-color, 2%);
@select-selection-disabled-font-color: @font-disabled-color;

@select-selection-placeholder-font-color: @font-disabled-color;

@select-selection-arrow-color: @font-disabled-color;

@select-selection-btn-clear-color: @font-disabled-color;
@select-selection-btn-clear-hover-color: @font-color;

@select-selection-btn-clear-size-sm: @font-size-sm;
@select-selection-btn-clear-size-md: @font-size;
@select-selection-btn-clear-size-lg: @font-size-lg;

@select-dropdown-border-radius: @border-radius;
@select-dropdown-background-color: @component-background-color;
@select-dropdown-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);

@select-menu-wrapper-max-height: 280px;

@select-menu-item-group-height: 34px;
@select-menu-item-group-padding-horizontal: 10px;
@select-menu-item-group-font-color: @font-disabled-color;
@select-menu-item-group-font-size: @font-size-sm;

@select-menu-item-height: 34px;
@select-menu-item-padding-horizontal: 10px;
@select-menu-item-font-color: @font-color;
@select-menu-item-font-size: @font-size;

@select-menu-item-hover-background-color: #f5f5f5;
@select-menu-item-hover-font-color: @font-primary-color;
@select-menu-item-selected-background-color: #e6f7ff;
@select-menu-item-selected-font-color: @primary-color;
@select-menu-item-disabled-background-color: #fff;
@select-menu-item-disabled-font-color: @font-disabled-color;

@select-menu-item-icon-margin-left: 8px;
@select-menu-item-icon-size: 12px;

// Slider
@slider-size: 12px;
@slider-font-color: @font-color;
@slider-font-size: @font-size;
@slider-line-height: @line-height;

@slider-track-border-radius: 2px;
@slider-track-background-color: #ececec;
@slider-track-bar-border-radius: @slider-track-border-radius;
@slider-track-bar-background-color: #2d8cf0;
@slider-track-bar-disabled-background-color: #cacaca;

@slider-step-item-size: 8px;
@slider-step-item-border-width: 2px;
@slider-step-item-border-color: #ececec;
@slider-step-item-active-border-color: #2d8cf0;
@slider-step-item-disabled-border-color: #ececec;
@slider-step-item-active-disabled-border-color: #cacaca;
@slider-step-item-background-color: #fff;

@slider-mark-item-font-color: #8c8c8c;
@slider-mark-item-active-font-color: #595959;
@slider-mark-item-disabled-font-color: #bfbfbf;
@slider-mark-item-active-disabled-font-color: #8c8c8c;
@slider-mark-item-font-size: 14px;

@slider-dragger-size: 12px;
@slider-dragger-border-width: 2px;
@slider-dragger-border-color: #2d8cf0;
@slider-dragger-disabled-border-color: #cacaca;
@slider-dragger-hover-border-color: #4298f2;
@slider-dragger-hover-disabled-border-color: #cacaca;
@slider-dragger-focus-border-color: #4298f2;
@slider-dragger-focus-disabled-border-color: #cacaca;
@slider-dragger-background-color: #fff;
@slider-dragger-focus-box-shadow: 0 0 0 5px rgba(45,140,240,0.12);
@slider-dragger-focus-disabled-box-shadow: 0 0 0 5px rgba(202,202,202,0.24);

// Switch
@switch-background-color: shade(@component-background-color, 25%);
@switch-checked-background-color: @primary-color;
@switch-font-color: @font-reverse-color;
@switch-input-background-color: @component-background-color;

@switch-size-sm: 16px;
@switch-size-md: 22px;
@switch-size-lg: 28px;

@switch-font-size-sm: 10px;
@switch-font-size-md: 12px;
@switch-font-size-lg: 14px;

// Textarea
@textarea-border-color: @border-color;
@textarea-border-radius: @border-radius;
@textarea-background-color: @component-background-color;
@textarea-padding-vertical: @padding-xs - 2;
@textarea-padding-horizontal: @padding-xs;
@textarea-font-color: @font-color;
@textarea-font-size: @font-size;
@textarea-font-family: @font-family;
@textarea-line-height: @line-height;

@textarea-hover-border-color: tint(@primary-color, 10%);
@textarea-focus-border-color: tint(@primary-color, 10%);
@textarea-disabled-border-color: @border-color;
@textarea-disabled-background-color: shade(@component-background-color, 2%);
@textarea-disabled-font-color: @font-disabled-color;

@textarea-btn-clear-color: @font-disabled-color;
@textarea-btn-clear-hover-color: @font-color;

@textarea-statistic-bottom: @textarea-padding-vertical;
@textarea-statistic-right: @textarea-padding-horizontal;
@textarea-statistic-font-color: @font-secondary-color;
@textarea-statistic-font-size: @font-size-sm;

// Transfer
@transfer-font-color: @font-color;
@transfer-font-size: @font-size;
@transfer-line-height: @line-height;
@transfer-panel-width: 200px;
@transfer-panel-height: 251px;
@transfer-panel-with-search-height: 310px;
@transfer-panel-border-color: @border-color;
@transfer-panel-border-radius: @border-radius;
@transfer-panel-header-border-color: shade(@component-background-color, 6%);
@transfer-panel-header-background-color: shade(@component-background-color, 2%);
@transfer-panel-header-padding: @padding-sm;
@transfer-panel-search-border-color: shade(@component-background-color, 6%);
@transfer-panel-search-padding: @padding-sm;
@transfer-panel-footer-border-color: shade(@component-background-color, 6%);
@transfer-panel-footer-padding: @padding-xs @padding-sm;
@transfer-panel-body-menu-item-height: 34px;
@transfer-panel-body-menu-item-padding: 0 @padding-sm;
@transfer-panel-body-menu-item-hover-background-color: shade(@component-background-color, 2%);
@transfer-panel-body-menu-item-checked-background-color: #e6f7ff;
@transfer-panel-body-menu-item-checked-hover-background-color: #dcf4ff;
@transfer-panel-body-menu-item-disabled-background-color: transparent;
@transfer-panel-body-menu-item-disabled-hover-background-color: transparent;
@transfer-operation-margin: 0 @margin-md;
@transfer-operation-button-margin-top: @margin-md;


// Cascade Transfer
@cascade-transfer-font-color: @font-color;
@cascade-transfer-font-size: @font-size;
@cascade-transfer-line-height: @line-height;
@cascade-transfer-panel-width: 240px;
@cascade-transfer-panel-border-color: @border-color;
@cascade-transfer-panel-border-radius: @border-radius;
@cascade-transfer-panel-header-border-color: shade(@component-background-color, 6%);
@cascade-transfer-panel-header-background-color: shade(@component-background-color, 2%);
@cascade-transfer-panel-header-padding: @padding-sm;
@cascade-transfer-panel-header-checkbox-margin-right: @margin-xs;
@cascade-transfer-panel-header-extra-margin-left: @margin-xs;
@cascade-transfer-panel-search-border-color: shade(@component-background-color, 6%);
@cascade-transfer-panel-search-padding: @padding-sm;
@cascade-transfer-panel-body-height: 34px * 8 + 6px * 2;
@cascade-transfer-panel-body-menu-padding: 6px 0;
@cascade-transfer-panel-body-menu-item-height: 34px;
@cascade-transfer-panel-body-menu-item-border-radius: @border-radius;
@cascade-transfer-panel-body-menu-item-padding: 0 @padding-sm;
@cascade-transfer-panel-body-menu-item-hover-background-color: shade(@component-background-color, 2%);
@cascade-transfer-panel-body-menu-item-expanded-font-color: @primary-color;
@cascade-transfer-panel-body-menu-item-expanded-hover-font-color: @primary-color;
@cascade-transfer-panel-body-menu-item-checked-font-color: @primary-color;
@cascade-transfer-panel-body-menu-item-checked-hover-font-color: @primary-color;
@cascade-transfer-panel-body-menu-item-checked-background-color: #e6f7ff;
@cascade-transfer-panel-body-menu-item-checked-hover-background-color: #dcf4ff;
@cascade-transfer-panel-body-menu-item-disabled-background-color: transparent;
@cascade-transfer-panel-body-menu-item-disabled-hover-background-color: transparent;
@cascade-transfer-panel-body-menu-item-checkbox-margin-right: 8px;
@cascade-transfer-panel-body-menu-item-arrow-margin-left: 8px;
@cascade-transfer-panel-body-menu-item-arrow-color: rgba(0,0,0,0.25);
@cascade-transfer-panel-body-menu-item-arrow-size: 12px;

// Timeroutine
@timeroutine-border-color: shade(@component-background-color, 6%);
@timeroutine-background-color: @component-background-color;
@timeroutine-font-color: @font-color;
@timeroutine-font-primary-color: @font-primary-color;
@timeroutine-font-secondary-color: @font-secondary-color;
@timeroutine-font-size: @font-size;
@timeroutine-time-hover-color: shade(@component-background-color, 2%);
@timeroutine-time-selected-color: @primary-color;

// Form
@form-font-color: @font-color;
@form-font-size: @font-size;
@form-line-height: @line-height;

@form-group-border-color: shade(@component-background-color, 6%);
@form-group-border-radius: @border-radius;
@form-group-margin-top: @margin-xl;
@form-group-padding: @padding-xl;

@form-group-title-padding-horizontal: @padding-sm;
@form-group-title-font-color: @font-primary-color;
@form-group-title-font-size: @font-size;

@form-item-label-font-color: @font-primary-color;
@form-item-label-required-mark-margin-right: @margin-xss;
@form-item-label-required-mark-font-color: @error-color;
@form-item-label-optional-mark-margin-left: @margin-xss;
@form-item-label-optional-mark-font-color: @font-secondary-color;
@form-item-label-description-font-color: @font-secondary-color;
@form-item-label-tooltip-margin-left: @margin-xss;
@form-item-label-tooltip-font-color: @font-secondary-color;
@form-item-label-colon-margin-left: 2px;

@form-item-control-extra-margin-top: @margin-sm;
@form-item-control-extra-font-color: @font-secondary-color;
@form-item-control-message-font-color: @error-color;

@form-horizontal-item-margin-bottom: @margin-xl;
@form-horizontal-item-label-max-height: 34px;
@form-horizontal-item-label-padding-right: @padding-sm;

@form-vertical-item-margin-bottom: @margin-xl;
@form-vertical-item-label-margin-bottom: @margin-sm;

@form-inline-item-min-height: 34px;
@form-inline-item-margin-left: @margin-md;
@form-inline-item-label-max-height: 34px;
@form-inline-item-label-padding-right: @padding-sm;

// 数据展示 --------------------------------------------------------------------------------

// Avatar
@avatar-border-radius: @border-radius;
@avatar-background-color: #ccc;
@avatar-font-color: #fff;
@avatar-placeholder-background-color: #fde3cf;
@avatar-placeholder-font-color: #f56a00;

@avatar-size-sm: 24px;
@avatar-size-md: 34px;
@avatar-size-lg: 44px;
@avatar-font-size-sm: @avatar-size-sm / 2;
@avatar-font-size-md: @avatar-size-md / 2;
@avatar-font-size-lg: @avatar-size-lg / 2;

// Badge
@badge-dot-size: 6px;
@badge-dot-shadow: 0 0 0 1px #fff;
@badge-count-size: 20px;
@badge-count-shadow: 0 0 0 1px #fff;
@badge-count-padding: 0 @padding-xs;
@badge-count-font-size: @font-size-sm;

@badge-default-color: @default-color;
@badge-default-font-color: @font-color;
@badge-primary-color: @primary-color;
@badge-primary-font-color: @font-reverse-color;
@badge-info-color: @info-color;
@badge-info-font-color: @font-reverse-color;
@badge-warning-color: @warning-color;
@badge-warning-font-color: @font-reverse-color;
@badge-success-color: @success-color;
@badge-success-font-color: @font-reverse-color;
@badge-error-color: @error-color;
@badge-error-font-color: @font-reverse-color;

@badge-status-dot-size: 6px;
@badge-status-dot-shadow: 0 0 0 1px #fff;
@badge-status-text-margin-left: @margin-xs;
@badge-status-text-font-color: @font-color;
@badge-status-text-font-size: @font-size;

@badge-status-default-color: @default-color;
@badge-status-processing-color: @primary-color;
@badge-status-warning-color: @warning-color;
@badge-status-success-color: @success-color;
@badge-status-error-color: @error-color;
@badge-status-blue-color: #1890ff;
@badge-status-cyan-color: #13c2c2;
@badge-status-geekblue-color: #2f54eb;
@badge-status-gold-color: #faad14;
@badge-status-green-color: #52c41a;
@badge-status-lime-color: #a0d911;
@badge-status-magenta-color: #eb2f96;
@badge-status-orange-color: #fa8c16;
@badge-status-pink-color: #eb2f96;
@badge-status-purple-color: #722ed1;
@badge-status-red-color: #f5222d;
@badge-status-volcano-color: #fa541c;
@badge-status-yellow-color: #fadb14;

// Card
@card-border-width: @border-width;
@card-border-color: shade(@component-background-color, 6%);
@card-border-radius: @border-radius;
@card-background-color: @component-background-color;
@card-box-shadow: @box-shadow;
@card-font-color: @font-color;
@card-font-size: @font-size;
@card-line-height: @line-height;

@card-header-padding: @padding-md @padding-lg;
@card-header-font-color: @font-primary-color;
@card-header-font-size: @font-size-lg;
@card-header-font-weight: 500;

@card-body-padding: @padding-lg;

@card-footer-padding: @padding-lg;

@card-icon-margin-right: @margin-xs;

@card-extra-margin-left: @margin-xs;
@card-extra-font-color: @font-color;
@card-extra-font-size: @font-size;

@card-loading-block-height: @font-size;
@card-loading-block-border-radius: @border-radius;
@card-loading-block-from-color: shade(@component-background-color, 4%);
@card-loading-block-to-color: shade(@component-background-color, 6%);
@card-loading-block-gutter: @margin-xs;

@card-meta-avatar-margin-right: @margin-md;
@card-meta-title-font-color: @font-primary-color;
@card-meta-title-font-size: @font-size-lg;
@card-meta-description-margin-top: @margin-xs;
@card-meta-description-font-color: @font-secondary-color;
@card-meta-description-font-size: @font-size;
@card-meta-description-line-clamp: 2;

@card-action-padding: @padding-md 0;
@card-action-color: @font-secondary-color;
@card-action-hover-color: @link-hover-color;
@card-action-active-color: @link-active-color;
@card-action-font-size: @font-size;
@card-action-divider-width: 1px;
@card-action-divider-height: @card-action-font-size;

// Cell
@cell-group-background-color: shade(@component-background-color, 2%);
@cell-group-padding: 4px 16px;
@cell-group-font-color: @font-disabled-color;
@cell-group-font-size: @font-size-sm;
@cell-group-line-height: 20px;

@cell-border-width: @border-width;
@cell-border-color: shade(@component-background-color, 4.75%);
@cell-background-color: @component-background-color;
@cell-hover-background-color: shade(@component-background-color, 2%);
@cell-active-background-color: shade(@component-background-color, 2%);
@cell-padding: @padding-sm - 2px @padding-md;
@cell-font-color: @font-color;
@cell-font-size: @font-size;
@cell-line-height: @line-height;
@cell-icon-margin-right: @margin-xs;
@cell-extra-margin-left: @margin-xs;
@cell-extra-font-color: @font-secondary-color;
@cell-arrow-margin-left: @margin-xs;
@cell-arrow-color: @font-secondary-color;
@cell-arrow-size: @font-size-sm;
@cell-checkmark-margin-left: @margin-xs;
@cell-checkmark-color: @font-secondary-color;
@cell-checkmark-size: @font-size-sm;

@cell-selected-border-color: rgba(0,0,0,0.04);
@cell-selected-background-color: #e6f7ff;
@cell-selected-hover-background-color: darken(@cell-selected-background-color, 2%);
@cell-selected-active-background-color: darken(@cell-selected-background-color, 2%);
@cell-selected-font-color: @primary-color;

@cell-disabled-font-color: @font-disabled-color;

// Collapse
@collapse-border-width: @border-width;
@collapse-border-color: shade(@component-background-color, 6%);
@collapse-border-radius: @border-radius;
@collapse-background-color: @component-background-color;
@collapse-font-color: @font-color;
@collapse-font-size: @font-size;
@collapse-line-height: @line-height;

@collapse-panel-header-background-color: shade(@component-background-color, 2%);
@collapse-panel-header-padding: @padding-sm @padding-md;
@collapse-panel-header-font-color: @font-primary-color;
@collapse-panel-header-font-size: @font-size;
@collapse-panel-header-line-height: @line-height;
@collapse-panel-body-padding: @padding-md;
@collapse-panel-arrow-margin: @margin-xs;
@collapse-panel-extra-margin: @margin-xs;
@collapse-panel-disabled-header-font-color: @font-disabled-color;

// Countdown
@countdown-line-height: @line-height;

@countdown-header-margin-bottom: @margin-sm;

@countdown-body-color: @font-primary-color;
@countdown-body-font-size: @font-size + 10px;
@countdown-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

@countdown-footer-margin-top: @margin-sm;

@countdown-title-color: @font-secondary-color;
@countdown-title-font-size: @font-size;

@countdown-extra-margin-left: @margin-xs;
@countdown-extra-color: @font-secondary-color;
@countdown-extra-font-size: @font-size;

@countdown-prefix-margin-right: @margin-xss;
@countdown-prefix-font-size: @font-size + 10px;

@countdown-suffix-margin-left: @margin-xss;
@countdown-suffix-font-size: @font-size + 2px;

// Descriptions
@descriptions-line-height: @line-height;

@descriptions-header-margin-bottom-sm: @margin-sm;
@descriptions-header-margin-bottom-md: @margin-md;
@descriptions-header-margin-bottom-lg: @margin-lg;

@descriptions-title-font-color: @font-primary-color;
@descriptions-title-font-size: @font-size-lg;
@descriptions-title-font-weight: @font-weight-bold;

@descriptions-extra-margin-left: @margin-md;

@descriptions-body-border-radius: @border-radius;

@descriptions-item-label-font-color: @font-primary-color;
@descriptions-item-label-colon-margin-left: 2px;
@descriptions-item-label-colon-margin-right: @margin-xs;
@descriptions-item-content-font-color: @font-color;

@descriptions-cell-border-color: shade(@component-background-color, 6%);
@descriptions-cell-background-color: shade(@component-background-color, 2%);

// Empty
@empty-image-height: 40px;

@empty-description-margin-top: @margin-sm;
@empty-description-font-color: @font-disabled-color;
@empty-description-font-size: @font-size;
@empty-description-line-height: @line-height;

@empty-content-margin-top: @margin-lg;

// Image
@image-placeholder-background-color: shade(@component-background-color, 2%);
@image-placeholder-font-color: @font-disabled-color;
@image-placeholder-font-size: @font-size;

@image-error-background-color: shade(@component-background-color, 2%);
@image-error-font-color: @font-disabled-color;
@image-error-font-size: @font-size;

// List
@list-border-color: @border-color;
@list-border-radius: @border-radius;
@list-font-color: @font-color;
@list-font-size: @font-size;
@list-line-height: @line-height;

@list-header-font-color: @font-primary-color;

@list-item-border-color: shade(@component-background-color, 6%);
@list-item-padding-horizontal-sm: @padding-md;
@list-item-padding-horizontal-md: @padding-lg;
@list-item-padding-horizontal-lg: @padding-xl;
@list-item-padding-vertical-sm: @padding-sm;
@list-item-padding-vertical-md: @padding-md;
@list-item-padding-vertical-lg: @padding-lg;

@list-item-meta-avatar-margin-right: @margin-md;
@list-item-meta-title-font-color: @font-primary-color;
@list-item-meta-description-font-color: @font-secondary-color;

@list-item-action-font-color: @font-secondary-color;
@list-item-action-hover-font-color: @link-hover-color;
@list-item-action-active-font-color: @link-acti