choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
1,046 lines (979 loc) • 82.7 kB
text/less
@iconfont: ~'~choerodon-ui-font';
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
@import '@{iconfont}/style/theme';
@import '../color/colors';
// 此文件不引入到 variables.less 中, 需要引入到 components/style/index.less 中
// 解决每个组件样式文件中都有一份 css 变量的问题
// 基础 less 变量，用于计算的中间 less 变量
// 命名规则：@[原有 less 变量名]-calculate
// 基础 less 变量 仅存放有 颜色 计算的 less 变量。如果基础 less 变量 有变更，需要更新变量关系：./color-vars-map/colorCssVarsMap
// -------- Colors -----------
@primary-color-calculate: @blue-6;
@info-color-calculate: @blue-6;
@success-color-calculate: @green-6;
@error-color-calculate: @red-6;
@warning-color-calculate: @gold-6;
// Color used by default to control hover and active backgrounds and for
// alert info backgrounds.
@primary-1-calculate: color(~`colorPalette('@{primary-color-calculate}', 1) `); // replace tint(@primary-color, 90%)
@primary-2-calculate: color(~`colorPalette('@{primary-color-calculate}', 2) `); // replace tint(@primary-color, 80%)
@primary-3-calculate: color(~`colorPalette('@{primary-color-calculate}', 3) `); // unused
@primary-4-calculate: color(~`colorPalette('@{primary-color-calculate}', 4) `); // unused
@primary-5-calculate: color(~`colorPalette('@{primary-color-calculate}', 5) `); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
@primary-6-calculate: @primary-color-calculate; // color used to control the text color of active buttons, don't use, use @primary-color
@primary-7-calculate: color(~`colorPalette('@{primary-color-calculate}', 7) `); // replace shade(@primary-color, 5%)
@primary-8-calculate: color(~`colorPalette('@{primary-color-calculate}', 8) `); // unused
@primary-9-calculate: color(~`colorPalette('@{primary-color-calculate}', 9) `); // unused
@primary-10-calculate: color(~`colorPalette('@{primary-color-calculate}', 10) `); // unused
@primary-fade-1-calculate: fade(@primary-color-calculate, 10%);
@primary-fade-2-calculate: fade(@primary-color-calculate, 20%);
@primary-fade-3-calculate: fade(@primary-color-calculate, 30%);
@primary-fade-4-calculate: fade(@primary-color-calculate, 40%);
@primary-fade-5-calculate: fade(@primary-color-calculate, 50%);
@primary-fade-6-calculate: fade(@primary-color-calculate, 60%);
@primary-fade-7-calculate: fade(@primary-color-calculate, 70%);
@primary-fade-8-calculate: fade(@primary-color-calculate, 80%);
@primary-fade-9-calculate: fade(@primary-color-calculate, 90%);
@primary-fade-10-calculate: fade(@primary-color-calculate, 100%);
@primary-tint-1-calculate: tint(@primary-color-calculate, 10%);
@primary-tint-2-calculate: tint(@primary-color-calculate, 20%);
@primary-tint-3-calculate: tint(@primary-color-calculate, 30%);
@primary-tint-4-calculate: tint(@primary-color-calculate, 40%);
@primary-tint-5-calculate: tint(@primary-color-calculate, 50%);
@primary-tint-6-calculate: tint(@primary-color-calculate, 60%);
@primary-tint-7-calculate: tint(@primary-color-calculate, 70%);
@primary-tint-8-calculate: tint(@primary-color-calculate, 80%);
@primary-tint-9-calculate: tint(@primary-color-calculate, 90%);
@primary-tint-10-calculate: tint(@primary-color-calculate, 100%);
@info-1-calculate: color(~`colorPalette('@{info-color-calculate}', 1) `);
@info-3-calculate: color(~`colorPalette('@{info-color-calculate}', 3) `);
@success-1-calculate: color(~`colorPalette('@{success-color-calculate}', 1) `);
@success-3-calculate: color(~`colorPalette('@{success-color-calculate}', 3) `);
@error-1-calculate: color(~`colorPalette('@{error-color-calculate}', 1) `);
@error-3-calculate: color(~`colorPalette('@{error-color-calculate}', 3) `);
@warning-1-calculate: color(~`colorPalette('@{warning-color-calculate}', 1) `);
@warning-3-calculate: color(~`colorPalette('@{warning-color-calculate}', 3) `);
// Base Scaffolding Variables
@text-color-calculate: fade(#000, 100%);
// LINK
@link-color-calculate: @primary-color-calculate;
@link-hover-color-calculate: color(~`colorPalette('@{link-color-calculate}', 5) `);
@link-active-color-calculate: color(~`colorPalette('@{link-color-calculate}', 7) `);
// button primary
@btn-primary-bg-calculate: @primary-color-calculate;
@btn-primary-focus-bg-calculate: color(~`colorPalette('@{btn-primary-bg-calculate}', 7) `);
// Checkbox
@checkbox-color-calculate: @primary-color-calculate;
@checkbox-shadow-color-calculate: fade(@checkbox-color-calculate, 20%);
// DatePicker
@date-primary-color-calculate: @primary-color-calculate;
@date-primary-hover-color-calculate: fade(@date-primary-color-calculate, 70%);
// Radio
@radio-color-calculate: @primary-color-calculate;
@radio-shadow-color-calculate: fade(@radio-color-calculate, 20%);
// Radio buttons
@radio-button-hover-color-calculate: fade(@radio-color-calculate, 50%);
@radio-button-active-color-calculate: fade(@radio-color-calculate, 70%);
// Layout
@layout-header-background-calculate: #001529;
@layout-sider-background-tint-1-calculate: tint(@layout-header-background-calculate, 10%);
// Input
@input-primary-color-calculate: @primary-color-calculate;
@input-info-color-calculate: fade(@text-color-calculate, 54%);
@input-focus-border-color-calculate: color(~`colorPalette('@{input-primary-color-calculate}', 3) `);
@input-hover-border-color-calculate: color(~`colorPalette('@{input-primary-color-calculate}', 5) `);
// Tree
// ---
@tree-primary-color-calculate: @primary-color-calculate;
@tree-node-selected-bg-calculate: color(~`colorPalette('@{tree-primary-color-calculate}', 2) `);
@tree-focus-bg-calculate: color(~`colorPalette('@{tree-primary-color-calculate}', 1) `);
// Carousel
@carousel-btn-bg-calculate: rgba(191, 191, 191, 1);
@carousel-arrows-bg-calculate: fade(@carousel-btn-bg-calculate, 15%);
@carousel-arrows-hover-bg-calculate: fade(@carousel-btn-bg-calculate, 30%);
// Tabs
// ---
@tab-primary-color-calculate: @primary-color-calculate;
@tab-hover-color-calculate: color(~`colorPalette('@{tab-primary-color-calculate}', 5) `);
@tab-active-color-calculate: color(~`colorPalette('@{tab-primary-color-calculate}', 7) `);
// Switch
// ---
@switch-checked-color-calculate: @primary-color-calculate;
@switch-color-calculate: color(~`colorPalette('@{switch-checked-color-calculate}', 3) `);
@switch-box-shadow-color-calculate: fade(@switch-color-calculate, 20%);
// Skeleton
// ---
@skeleton-color-calculate: #f2f2f2;
@skeleton-to-color-calculate: shade(@skeleton-color-calculate, 5%);
// Anchor
@anchor-primary-color-calculate: @primary-color-calculate;
@anchor-primary-hover-color-calculate: fade(@anchor-primary-color-calculate, 70%);
// css 变量
.mix-css-vars() when (@c7n-root-entry-name = variables) {
// -------- Colors -----------
--primary-color: @primary-color-calculate;
--info-color: @info-color-calculate;
--success-color: @success-color-calculate;
--processing-color: var(--primary-color);
--error-color: @error-color-calculate;
--error-bg-color: #fcebeb;
--highlight-color: @red-6;
--warning-color: @warning-color-calculate;
--normal-color: #d9d9d9;
--B500: #a6a6a6;
// Color used by default to control hover and active backgrounds and for
// alert info backgrounds.
--primary-1: @primary-1-calculate; // replace tint(@primary-color, 90%)
--primary-2: @primary-2-calculate; // replace tint(@primary-color, 80%)
--primary-3: @primary-3-calculate; // unused
--primary-4: @primary-4-calculate; // unused
--primary-5: @primary-5-calculate; // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
--primary-6: @primary-6-calculate; // color used to control the text color of active buttons, don't use, use @primary-color
--primary-7: @primary-7-calculate; // replace shade(@primary-color, 5%)
--primary-8: @primary-8-calculate; // unused
--primary-9: @primary-9-calculate; // unused
--primary-10: @primary-10-calculate; // unused
--primary-fade-1: @primary-fade-1-calculate;
--primary-fade-2: @primary-fade-2-calculate;
--primary-fade-3: @primary-fade-3-calculate;
--primary-fade-4: @primary-fade-4-calculate;
--primary-fade-5: @primary-fade-5-calculate;
--primary-fade-6: @primary-fade-6-calculate;
--primary-fade-7: @primary-fade-7-calculate;
--primary-fade-8: @primary-fade-8-calculate;
--primary-fade-9: @primary-fade-9-calculate;
--primary-fade-10: @primary-fade-10-calculate;
--primary-tint-1: @primary-tint-1-calculate;
--primary-tint-2: @primary-tint-2-calculate;
--primary-tint-3: @primary-tint-3-calculate;
--primary-tint-4: @primary-tint-4-calculate;
--primary-tint-5: @primary-tint-5-calculate;
--primary-tint-6: @primary-tint-6-calculate;
--primary-tint-7: @primary-tint-7-calculate;
--primary-tint-8: @primary-tint-8-calculate;
--primary-tint-9: @primary-tint-9-calculate;
--primary-tint-10: @primary-tint-10-calculate;
// Variables derived from functional colors
--info-1: @info-1-calculate;
--info-3: @info-3-calculate;
--success-1: @success-1-calculate;
--success-3: @success-3-calculate;
--error-1: @error-1-calculate;
--error-3: @error-3-calculate;
--warning-1: @warning-1-calculate;
--warning-3: @warning-3-calculate;
// Base Scaffolding Variables
--body-background: #fff;
--component-background: #fff; // 有效
--font-family-no-number: 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial,
sans-serif;
--font-family: 'Monospaced Number', var(--font-family-no-number);
--font-family-required-symbol: SimSun, sans-serif;
--code-family: Consolas, Menlo, Courier, monospace;
--font-family-code: var(--code-family); // @code-family 变量命名标准化，其作用和直接修改 code-family 一致
--heading-color: fade(#000, 85%);
--text-color: @text-color-calculate;
--text-color-secondary: fade(#000, 45%);
--heading-color-dark: fade(#fff, 100%);
--text-color-dark: fade(#fff, 100%);
--text-color-secondary-dark: fade(#fff, 65%);
--font-size-base: 0.13rem;
--font-size-lg: 0.16rem;
--font-size-sm: 0.12rem;
--font-weight-base: 400;
--line-height-base: 1.5;
--border-radius-lg: 0.1rem;
--border-radius-base: 0.02rem;
--border-radius-sm: 0.02rem;
// paddings
--padding-lg: 0.24rem; // containers
--padding-md: 0.16rem; // small containers and buttons
--padding-sm: 0.12rem; // Form controls and items
--padding-xs: 0.08rem; // small items
--padding-vertical-base: 0.01rem;
--padding-vertical-sm: 0.01rem;
--padding-vertical-lg: 0.06rem;
// vertical padding for all form controls
--control-padding-horizontal: var(--padding-sm);
--control-padding-horizontal-sm: var(--padding-xs);
// 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
// The background colors for active and hover states for things like
// list items or table cells.
--item-active-bg: rgba(140, 158, 255, 0.12);
--item-hover-bg: var(--background-color-light); // 无效 存在于Tree组件的directory.less中，改样式文件没有引入使用
--item-focus-bg: var(--background-color-light);
--item-active-color: var(--text-color);
--item-focus-color: var(--text-color);
--item-drag-over-bg: var(--primary-color);
--item-selected-font-weight: 400;
//Icon
--icon-font-size-base: 0.18rem;
--icon-font-size-sm: 0.16rem;
// LINK
--link-color: @link-color-calculate;
--link-hover-color: @link-hover-color-calculate;
--link-active-color: @link-active-color-calculate;
--link-decoration: none;
--link-hover-decoration: none;
// Animation
--animation-duration-slower: 0.45s;
--animation-duration-slow: 0.3s;
--animation-duration-base: 0.2s;
--animation-duration-fast: 0.1s;
--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, 0, 0.2, 1); // 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: #e0e0e0; // base border outline a component
--border-color-split: hsv(0, 0, 91%); // split border inside a component
--border-width-base: 0.01rem; // width of the border for a component
--border-style-base: solid; // style of a components border
// Outline
--outline-blur-size: 0rem;
--outline-width: 0.02rem;
--outline-color: var(--primary-color);
--background-color-light: fade(#000, 4%); // background of header and selected item
--background-color-base: hsv(0, 0, 96%); // Default grey background color
// Disabled states
--disabled-color: fade(#000, 25%);
--disabled-bg: var(--background-color-base);
--disabled-color-dark: fade(#fff, 35%);
// Shadow
--shadow-color: rgba(0, 0, 0, 0.12);
--box-shadow-base: var(--shadow-1-down);
--shadow-1-up: 0 -0.02rem 0.08rem var(--shadow-color);
--shadow-1-down: 0 0.02rem 0.08rem var(--shadow-color);
--shadow-1-left: -0.02rem 0 0.08rem var(--shadow-color);
--shadow-1-right: 0.02rem 0 0.08rem var(--shadow-color);
--shadow-2: 0 0.04rem 0.12rem var(--shadow-color);
--shadow-3: 0 0 0 0.01rem var(--component-background);
--shadow-4: 0 0.05rem 0.05rem -0.03rem rgba(0, 0, 0, 0.2),
0 0.08rem 0.1rem 0.01rem rgba(0, 0, 0, 0.14), 0 0.03rem 0.14rem 0.02rem rgba(0, 0, 0, 0.12);
// Buttons
--btn-font-weight: var(--font-weight-base);
--btn-border-radius-base: var(--border-radius-base);
--btn-border-radius-sm: var(--border-radius-base);
//
--btn-hover-default-color: rgba(0, 0, 0, 0.08);
--btn-hover-other-color: rgba(255, 255, 255, 0.08);
//
--btn-danger-color: var(--error-color);
--btn-danger-bg: rgba(0, 0, 0, 0);
--btn-danger-border: var(--border-color-base);
//
--btn-disable-color: var(--disabled-color);
--btn-disable-bg: transparent;
--btn-disable-border: var(--border-color-base);
//
--btn-line-height: 1.5;
--btn-padding-vertical-base: 0rem;
--btn-padding-horizontal-base: 0.12rem;
--btn-padding-base: var(--btn-padding-vertical-base) var(--btn-padding-horizontal-base);
--btn-padding-vertical-lg: var(--btn-padding-vertical-base);
--btn-padding-horizontal-lg: var(--btn-padding-horizontal-base);
--btn-padding-lg: var(--btn-padding-vertical-lg) var(--btn-padding-horizontal-lg);
--btn-padding-vertical-sm: var(--padding-vertical-sm);
--btn-padding-horizontal-sm: 0.06rem;
--btn-padding-sm: var(--padding-vertical-sm) var(--btn-padding-horizontal-sm);
--btn-font-size-base: unset;
--btn-font-size-lg: var(--font-size-lg);
--btn-font-size-sm: var(--font-size-sm);
//
--btn-height-base: 0.3rem;
--btn-height-lg: 0.4rem;
--btn-height-sm: 0.24rem;
//
--btn-circle-size: var(--btn-height-base);
--btn-circle-size-lg: var(--btn-height-lg);
--btn-circle-size-sm: var(--btn-height-sm);
--btn-circle-border-radius: 50%;
//
--btn-group-border: var(--primary-5);
--btn-group-spacing: 0.1rem;
//
--btn-box-shadow: 0 0.03rem 0.01rem -0.02rem rgba(0, 0, 0, 0.2),
0 0.02rem 0.02rem 0 rgba(0, 0, 0, 0.14), 0 0.01rem 0.05rem 0 rgba(0, 0, 0, 0.12);
--btn-focus-box-shadow: 0 0.04rem 0.03rem -0.02rem rgba(0, 0, 0, 0.2),
0 0.03rem 0.03rem 0 rgba(0, 0, 0, 0.14), 0 0.03rem 0.08rem 0 rgba(0, 0, 0, 0.12);
--btn-active-box-shadow: var(--shadow-4);
--btn-icon-size: 0.14rem;
--btn-icon-size-lg: var(--font-size-lg);
--btn-icon-size-sm: var(--font-size-sm);
--btn-icon-only-size: 0.2rem;
--btn-icon-only-size-sm: 0.14rem;
--btn-icon-only-size-lg: 0.24rem;
--btn-icon-font-weight: inherit;
--btn-icon-margin: 0 0.05rem 0 0;
// raised button
--btn-raised-border-width-base: 0rem;
--btn-raised-border-style-base: solid;
// link button
--btn-link-font-weight: var(--btn-font-weight);
// button primary
--btn-primary-color: var(--text-color-dark);
--btn-primary-bg: @btn-primary-bg-calculate;
--btn-primary-border: var(--btn-primary-bg);
--btn-primary-focus-color: var(--btn-primary-color);
--btn-primary-focus-bg: @btn-primary-focus-bg-calculate;
--btn-primary-hover-color: var(--btn-primary-focus-color);
--btn-primary-hover-bg: var(--btn-primary-focus-bg);
--btn-primary-disabled-color: var(--btn-primary-color);
--btn-primary-flat-color: var(--btn-primary-bg);
// button secondary
--btn-secondary-color: var(--text-color-dark);
--btn-secondary-bg: var(--primary-4);
--btn-secondary-border: var(--primary-color);
--btn-secondary-focus-color: var(--btn-secondary-color);
--btn-secondary-focus-bg: var(--primary-7);
--btn-secondary-hover-color: var(--btn-secondary-color);
--btn-secondary-hover-bg: var(--btn-secondary-focus-bg);
--btn-secondary-disabled-color: var(--btn-secondary-color);
--btn-secondary-flat-color: var(--btn-secondary-bg);
// button gray
--btn-gray-color: var(--text-color);
--btn-gray-bg: #f5f5f5;
--btn-gray-border: var(--btn-gray-bg);
--btn-gray-focus-color: var(--btn-gray-color);
--btn-gray-focus-bg: #e6e6e6;
--btn-gray-hover-color: var(--btn-gray-focus-color);
--btn-gray-hover-bg: var(--btn-gray-focus-bg);
--btn-gray-disabled-color: var(--btn-gray-color);
--btn-gray-flat-color: #d0d0d0;
// button blue
--btn-blue-color: var(--text-color-dark);
--btn-blue-bg: @blue-6;
--btn-blue-border: var(--btn-blue-bg);
--btn-blue-focus-color: var(--btn-blue-color);
--btn-blue-focus-bg: @blue-7;
--btn-blue-hover-color: var(--btn-blue-focus-color);
--btn-blue-hover-bg: var(--btn-blue-focus-bg);
--btn-blue-disabled-color: var(--btn-blue-color);
--btn-blue-flat-color: var(--btn-blue-bg);
// --
// button green
--btn-green-color: var(--text-color-dark);
--btn-green-bg: @green-6;
--btn-green-border: var(--btn-green-bg);
--btn-green-focus-color: var(--btn-green-color);
--btn-green-focus-bg: @green-7;
--btn-green-hover-color: var(--btn-green-focus-color);
--btn-green-hover-bg: var(--btn-green-focus-bg);
--btn-green-disabled-color: var(--btn-green-color);
--btn-green-flat-color: var(--btn-green-bg);
// button red
--btn-red-color: var(--text-color-dark);
--btn-red-bg: @red-6;
--btn-red-border: var(--btn-red-bg);
--btn-red-focus-color: var(--btn-red-color);
--btn-red-focus-bg: @red-7;
--btn-red-hover-color: var(--btn-red-focus-color);
--btn-red-hover-bg: var(--btn-red-focus-bg);
--btn-red-disabled-color: var(--btn-red-color);
--btn-red-flat-color: var(--btn-red-bg);
// button yellow
--btn-yellow-color: var(--text-color-dark);
--btn-yellow-bg: @yellow-6;
--btn-yellow-border: var(--btn-yellow-bg);
--btn-yellow-focus-color: var(--btn-yellow-color);
--btn-yellow-focus-bg: @yellow-7;
--btn-yellow-hover-color: var(--btn-yellow-focus-color);
--btn-yellow-hover-bg: var(--btn-yellow-focus-bg);
--btn-yellow-disabled-color: var(--btn-yellow-color);
--btn-yellow-flat-color: var(--btn-yellow-bg);
// button purple
--btn-purple-color: var(--text-color-dark);
--btn-purple-bg: @purple-6;
--btn-purple-border: var(--btn-purple-bg);
--btn-purple-focus-color: var(--btn-purple-color);
--btn-purple-focus-bg: @purple-7;
--btn-purple-hover-color: var(--btn-purple-focus-color);
--btn-purple-hover-bg: var(--btn-purple-focus-bg);
--btn-purple-disabled-color: var(--btn-purple-color);
--btn-purple-flat-color: var(--btn-purple-bg);
// button dark
--btn-dark-color: var(--text-color-dark);
--btn-dark-bg: @dark-4;
--btn-dark-border: var(--btn-dark-bg);
--btn-dark-focus-color: var(--btn-dark-color);
--btn-dark-focus-bg: @dark-5;
--btn-dark-hover-color: var(--btn-dark-focus-color);
--btn-dark-hover-bg: var(--btn-dark-focus-bg);
--btn-dark-disabled-color: var(--btn-dark-color);
--btn-dark-flat-color: @dark-6;
// button default
--btn-default-color: var(--text-color);
--btn-default-bg: transparent;
--btn-default-border: var(--border-color-base);
--btn-default-focus-color: var(--btn-primary-bg);
--btn-default-focus-bg: var(--btn-default-bg);
--btn-default-hover-color: var(--btn-default-color);
--btn-default-hover-bg: var(--btn-default-focus-bg);
--btn-default-disabled-color: var(--btn-default-color);
--btn-default-flat-color: var(--btn-default-color);
// Checkbox
--checkbox-size: 0.16rem;
--checkbox-color: @checkbox-color-calculate;
--checkbox-border-color: fade(#000, 65%);
--checkbox-border-width: 0.02rem;
--checkbox-disabled-bg: var(--input-disabled-bg);
--checkbox-disabled-color: var(--disabled-color);
--checkbox-disabled-border-color: var(--disabled-color);
--checkbox-disabled-check-bg: var(--checkbox-disabled-bg);
--checkbox-disabled-check-border-color: var(--checkbox-disabled-border-color);
--checkbox-disabled-check-color: var(--checkbox-disabled-color);
--checkbox-uncheck-hover-border-color: var(--checkbox-color);
--checkbox-shadow-color: @checkbox-shadow-color-calculate;
--checkbox-indeterminate-bg: var(--checkbox-color);
--checkbox-indeterminate-color: #fff;
--checkbox-indeterminate-width: calc((var(--checkbox-size) / 16) * 8);
--checkbox-indeterminate-height: calc((var(--checkbox-size) / 16) * 1);
--checkbox-indeterminate-top: calc((var(--checkbox-size) - var(--checkbox-indeterminate-height) - var(--checkbox-border-width) * 2) / 2);
--checkbox-indeterminate-left: calc((var(--checkbox-size) - var(--checkbox-indeterminate-width) - var(--checkbox-border-width) * 2) / 2);
// basic
--checkbox-basic-disabled-color: var(--input-disabled-color);
--checkbox-basic-disabled-border-color: var(--border-color-base);
--checkbox-basic-disabled-check-border-color: var(--checkbox-basic-disabled-border-color);
--checkbox-basic-indeterminate-width: calc((var(--checkbox-size) / 14) * 8);
--checkbox-basic-indeterminate-height: calc(var(--checkbox-size) / 14);
--checkbox-basic-indeterminate-top: calc((var(--checkbox-size) - 0.04rem - var(--checkbox-basic-indeterminate-height)) / 2);
--checkbox-basic-indeterminate-left: calc((var(--checkbox-size) - 0.03rem - var(--checkbox-basic-indeterminate-width)) / 2);
--checkbox-button-line-height: var(--radio-button-line-height);
--checkbox-button-min-width: unset;
--checkbox-button-padding: 0 0.15rem;
--checkbox-button-check-bg: var(--checkbox-color);
--checkbox-button-disabled-check-bg: var(--primary-fade-6);
--checkbox-button-disabled-check-border-color: var(--checkbox-button-disabled-check-bg);
--checkbox-button-disabled-check-color: var(--text-color-dark);
--checkbox-button-check-color: var(--text-color-dark);
--checkbox-button-check-border-color: var(--checkbox-color);
--checkbox-button-radius: var(--border-radius-base);
// DatePicker
--date-primary-color: @date-primary-color-calculate;
--date-primary-hover-color: @date-primary-hover-color-calculate;
--date-link-hover-color: var(--link-hover-color);
--date-link-active-color: var(--link-active-color);
// 从组件内部迁移的变量
--date-picker-width: 2.8rem;
--date-time-picker-width: 4.3rem;
--date-picker-horizontal-padding: 0.12rem;
--date-time-list-item-height: 0.29rem;
// 新增
--date-picker-header-height: 0.4rem;
--date-picker-header-padding: 0 0.07rem;
--date-picker-body-table-font-size: var(--font-size-lg);
--date-picker-cell-inner-border-radius: var(--border-radius-sm);
--date-picker-cell-disabled-inner-border-radius: 0rem;
--date-picker-cell-inner-height: 0.24rem;
--date-picker-footer-height: 0.39rem;
--date-picker-active-color: #fff;
--date-picker-view-select-font-weight: bold;
--date-picker-today-font-weight: bold;
--date-picker-th-color: unset;
--date-picker-month-year-cell-inner-display: inline-table;
--date-picker-time-focus-active-display: block;
--date-picker-datetime-time-border-left: unset;
--date-picker-datetime-time-padding: 0.08rem var(--date-picker-horizontal-padding);
--date-picker-time-selected-bg: unset;
--date-picker-time-cell-hover-bg: unset;
--date-picker-time-cell-inner-hover-bg: var(--item-hover-bg);
--date-picker-time-selected-cell-inner-color: #fff;
--date-picker-time-selected-cell-inner-bg: var(--date-primary-color);
--date-picker-time-panel-height: 2.1rem;
--date-picker-time-cell-inner-active-color: var(--date-picker-active-color);
--date-picker-time-cell-inner-active-bg: var(--primary-5);
--date-picker-time-cell-active-bg: unset;
--date-picker-time-cell-disabled-bg: unset;
--date-picker-time-disabled-cell-inner-bg: var(--disabled-bg);
--date-picker-week-edge-cell-inner-border-radius: var(--border-radius-base);
// Radio
--radio-color: @radio-color-calculate;
--radio-border-color: rgba(0, 0, 0, 0.24);
--radio-border-width: var(--border-width-base);
--radio-disabled-color: var(--disabled-color);
--radio-disabled-bg: var(--input-disabled-bg);
--radio-disabled-border-color: var(--disabled-color);
--radio-disabled-check-bg: var(--radio-disabled-bg);
--radio-disabled-check-border-color: var(--radio-disabled-border-color);
--radio-disabled-check-color: var(--radio-disabled-color);
--radio-uncheck-hover-border-color: var(--radio-color);
--radio-size: 0.14rem;
--radio-dot-color: var(--radio-color);
// --radio-dot-distance: calc(var(--radio-size) / 4 - var(--radio-border-width) / 2);
--radio-dot-size: calc(var(--radio-size) / 2 - var(--radio-border-width));
--radio-check-dot-color: var(--radio-dot-color);
--radio-height: calc(var(--input-height-base) - 2 * var(--border-width-base));
--radio-line-height: 1.5;
--radio-label-white-space: var(--label-white-space);
--radio-shadow-color: @radio-shadow-color-calculate;
--radio-check-border-color: var(--radio-dot-color);
--radio-check-border-width: var(--radio-border-width);
--radio-highlight-check-dot-color: var(--input-highlight-border-color);
// basic
--radio-basic-disabled-color: var(--input-disabled-color);
--radio-basic-disabled-bg: var(--radio-button-bg);
--radio-basic-disabled-check-bg: var(--radio-disabled-check-color);
--radio-basic-disabled-border-color: var(--radio-border-color);
// Radio buttons
--radio-button-line-height: var(--btn-height-base);
--radio-button-bg: var(--btn-default-bg);
--radio-button-color: var(--btn-default-color);
--radio-button-hover-color: @radio-button-hover-color-calculate;
--radio-button-active-color: @radio-button-active-color-calculate;
--radio-button-check-border-width: var(--radio-border-width);
--radio-button-padding: 0 0.15rem;
--radio-button-min-width: unset;
--radio-basic-button-uncheck-hover-color: var(--radio-button-color);
--radio-basic-button-padding: 0 calc(var(--padding-md) - 0.01rem);
--radio-button-check-color: var(--radio-dot-color);
--radio-button-check-bg: transparent;
--radio-basic-button-group-spacing: 0rem;
--radio-button-radius: var(--border-radius-base);
--radio-button-disabled-check-bg: var(--radio-disabled-check-bg);
--radio-button-disabled-check-border-color: var(--radio-disabled-check-border-color);
--radio-button-disabled-check-color: unset;
// Layout
--layout-header-background: @layout-header-background-calculate;
--layout-sider-background: var(--layout-header-background);
--layout-sider-background-tint-1: @layout-sider-background-tint-1-calculate;
// Form
--label-required-color: var(--highlight-color);
--label-color: inherit;
--label-color-horizontal: var(--label-color);
--label-color-vertical: var(--label-color);
--label-font-weight: var(--font-weight-base);
--label-colon-color: inherit;
--label-line-height: var(--input-height-base);
--label-white-space: nowrap;
--label-wrapper-padding-vertical: 0.1rem;
--label-wrapper-padding-horizontal: 0.04rem;
--label-wrapper-padding: var(--label-wrapper-padding-vertical) var(--label-wrapper-padding-horizontal);
--label-vertical-wrapper-padding-vertical: 0rem;
--label-output-wrapper-padding-vertical: 0.01rem;
--label-basic-line-height: calc(34 / 13);
--field-help-color: var(--text-color-secondary);
--field-icon-help-color: var(--text-color-secondary);
--field-icon-help-font-size: var(--icon-font-size-sm);
--form-item-wrapper-padding-vertical: 0.1rem;
--form-item-wrapper-padding-horizontal: 0.05rem;
--form-item-wrapper-padding: var(--form-item-wrapper-padding-vertical) var(--form-item-wrapper-padding-horizontal);
--form-item-wrapper-output-padding-vertical: 0.01rem;
--form-item-margin-top: 0.07rem;
--form-item-margin-bottom: 0.2rem;
--form-item-trailing-colon: true;
--form-vertical-label-padding: 0 0 0.08rem;
--form-vertical-label-margin: 0rem;
--float-label-wrapper-border-top-color: var(--component-background);
--float-label-transform-origin-high: 0.1rem -330%; // SelectBox, Range, CheckBox, Switch
--float-label-height-base: 0.36rem;
--float-label-height-lg: 0.4rem;
--float-label-height-sm: 0.3rem;
--float-label-autofill-margin: 0.02rem;
--float-label-line-height: 0.34rem;
--float-label-line-height-lg: 0.38rem;
--float-label-line-height-sm: 0.28rem;
--float-label-color: var(--label-color);
--float-label-font-size: .15rem;
--float-label-font-weight: 500;
--float-label-active-height: var(--float-label-line-height);
--float-label-active-bg: unset;
--float-label-active-padding: 0rem;
--float-form-item-margin-top: var(--form-item-margin-top);
--float-form-item-margin-bottom: var(--form-item-margin-bottom);
--float-form-item-wrapper-padding-vertical: 0rem;
// Input
--input-primary-color: @input-primary-color-calculate;
--input-height-base: 0.3rem;
--input-height-lg: 0.4rem;
--input-height-sm: 0.24rem;
--input-font-size-base: var(--font-size-base);
--input-font-weight-base: unset;
--input-line-height-base: var(--line-height-base);
--input-padding-horizontal: calc(var(--control-padding-horizontal) - 0.02rem);
--input-padding-horizontal-base: var(--input-padding-horizontal);
--input-padding-horizontal-sm: calc(var(--control-padding-horizontal-sm) - 0.02rem);
--input-padding-horizontal-lg: var(--input-padding-horizontal);
--input-padding-vertical-base: var(--padding-vertical-base);
--input-padding-vertical-sm: var(--padding-vertical-sm);
--input-padding-vertical-lg: var(--padding-vertical-lg);
--input-placeholder-color: hsv(0, 0, 75%);
--input-info-color: @input-info-color-calculate;
--input-active-color: var(--text-color);
//@input-active-box-shadow: 0 0 @outline-blur-size @outline-width fade(@color, 20%);
--input-active-box-shadow: none;
--input-color: rgb(0, 0, 0);
// @input-border-color: @border-color-base;
--input-baseline-color: rgba(0, 0, 0, 0.54);
--input-border-color: #d9d9d9;
--input-border-radius: var(--border-radius-base);
--input-error-border-color: var(--error-color);
--input-error-active-box-shadow: var(--input-active-box-shadow);
--input-required-border-color: var(--input-border-color);
--input-highlight-border-color: #47B881;
--input-wrapper-bg: var(--component-background);
--input-bg: transparent;
--input-required-bg: @yellow-1;
--input-error-bg: var(--error-bg-color);
--input-addon-bg: var(--background-color-light);
--input-focus-border-color: @input-focus-border-color-calculate;
--input-hover-border-color: @input-hover-border-color-calculate;
--input-required-focus-border-color: @input-focus-border-color-calculate;
--input-required-hover-border-color: var(--input-hover-border-color);
--input-required-active-box-shadow: var(--input-active-box-shadow);
--input-float-border-color: var(--input-border-color);
--input-float-border-radius: 0.05rem;
--input-float-border-active-width: 0.02rem;
--input-float-required-border-color: var(--input-required-border-color);
--input-float-highlight-border-color: var(--input-highlight-border-color);
--input-float-required-bg: var(--component-background);
--input-float-error-bg: var(--component-background);
--input-float-disabled-bg: var(--component-background);
--input-float-focus-border-color: var(--input-focus-border-color);
--input-float-required-focus-border-color: var(--input-float-focus-border-color);
--input-float-hover-border-color: var(--input-color);
--input-float-required-hover-border-color: var(--input-float-hover-border-color);
--input-float-disabled-border-style: dashed;
--input-float-disabled-border-color: var(--input-float-border-color);
--input-disabled-bg: var(--disabled-bg);
--input-disabled-color: rgba(0, 0, 0, 0.54);
--input-disabled-icon-color: var(--input-disabled-color);
--input-icon-width-base: 0.24rem;
--input-icon-width-lg: 0.3rem;
--input-icon-width-sm: 0.2rem;
--input-icon-color: inherit;
--input-prefix-width-base: var(--input-icon-width-base);
--input-prefix-color: inherit;
--input-suffix-width-base: var(--input-icon-width-base);
--input-suffix-height: 0.2rem;
--input-suffix-color: inherit;
--input-suffix-hover-color: var(--input-suffix-color);
--input-suffix-error-color: var(--input-suffix-color);
--input-button-width: var(--input-suffix-width-base);
--input-addon-bg: #eee;
--input-addon-color: unset;
--input-addon-font-size: unset;
--input-tag-default-color: var(--tag-default-color);
--input-tag-default-bg: var(--tag-default-bg);
--input-tag-error-color: var(--tag-default-color);
--input-tag-error-bg: var(--error-color);
--input-tag-disabled-color: var(--tag-default-color);
--input-tag-disabled-bg: var(--disabled-color);
--input-tag-close-color: inherit;
--input-tag-close-hover-color: inherit;
--input-tag-height-base: 0.24rem;
--input-tag-line-height-base: 0.22rem;
--input-tag-margin-vertical: 0.01rem;
--input-tag-border-radius: var(--input-border-radius);
--input-tag-extra-space: 0.24rem;
--input-float-tag-height-base: 0.2rem;
--input-float-tag-line-height-base: 0.2rem;
--input-float-tag-margin-vertical: var(--input-tag-margin-vertical);
--input-float-tag-padding: 0 0.02rem 0 0.08rem;
--input-float-tag-border-radius: 0.12rem;
--input-float-tag-error-bg: var(--error-color);
--input-float-tag-close-color: var(--tag-multiple-color);
--input-float-tag-close-line-height: 0.2rem;
--input-float-tag-close-font-size: 0.16rem;
--input-float-tag-close-vertical-align: top;
--input-multiple-height-base: auto;
--input-multiple-height-lg: var(--input-multiple-height-base);
--input-multiple-height-sm: var(--input-multiple-height-base);
--input-multiple-margin: 0rem;
--input-multiple-padding: 0.01rem 0;
--input-multiple-input-margin: 0 0 0 var(--input-padding-horizontal);
--input-float-multiple-margin: 0 0 0 0.03rem;
--input-float-multiple-padding: 0.07rem 0;
--textarea-padding: 0.04rem var(--input-padding-horizontal);
// Input basic
--input-number-handler-inner-distance: -0.05rem;
--input-basic-height: 0.36rem;
--input-basic-autofill-height: 0.32rem;
--input-basic-hover-border-color: var(--input-color);
--input-basic-focus-border-width: 0.02rem;
--input-basic-focus-border-color: var(--primary-color);
--input-basic-disabled-border-style: dashed;
--input-basic-disabled-bg: unset;
// Mentions
--mentions-measure-padding: 0.07rem 0.13rem 0.07rem 0.1rem;
// Output
// ---
--output-line-height: 0.28rem; // <-- fieldHeight / fontSize
--output-font-weight: var(--font-weight-base);
--output-word-break: normal;
--output-white-space: normal;
--output-color: unset;
--output-tag-margin: var(--tag-margin);
--output-float-label-font-size: 0.12rem;
--output-float-label-line-height: 0.18rem;
// Steps
--process-icon-color: var(--icon-text-color);
--process-icon-hover-color: var(--process-icon-color);
--process-icon-dot-bg: var(--processing-color);
--process-icon-bg: var(--processing-color);
--process-icon-border-color: var(--processing-color);
--process-icon-hover-border-color: var(--process-icon-border-color);
--process-title-color: var(--heading-color);
--process-title-hover-color: var(--process-title-color);
--process-title-font-weight: 500;
--process-description-color: var(--text-color);
--process-description-hover-color: var(--process-description-color);
--process-tail-color: var(--step-border-color);
--icon-text-color: #fff;
--wait-icon-color: var(--icon-text-color);
--wait-icon-hover-color: var(--wait-icon-color);
--wait-icon-dot-bg: var(--step-wait-color);
--wait-icon-bg: var(--step-wait-color);
--wait-icon-border-color: var(--step-wait-color);
--wait-icon-hover-border-color: var(--wait-icon-border-color);
--wait-title-color: var(--text-color-secondary);
--wait-title-hover-color: var(--wait-title-color);
--wait-description-color: var(--wait-title-color);
--wait-description-hover-color: var(--wait-description-color);
--wait-tail-color: var(--process-tail-color);
--finish-icon-color: var(--icon-text-color);
--finish-icon-hover-color: var(--finish-icon-color);
--finish-icon-dot-bg: var(--process-icon-bg);
--finish-icon-bg: var(--process-icon-bg);
--finish-icon-border-color: var(--process-icon-bg);
--finish-icon-hover-border-color: var(--finish-icon-border-color);
--finish-title-color: var(--text-color);
--finish-title-hover-color: var(--finish-title-color);
--finish-description-color: var(--text-color-secondary);
--finish-description-hover-color: var(--finish-description-color);
--finish-tail-color: var(--process-tail-color);
--error-icon-color: var(--icon-text-color);
--error-icon-hover-color: var(--error-icon-color);
--error-icon-dot-bg: var(--error-color);
--error-icon-bg: var(--error-color);
--error-icon-border-color: var(--error-color);
--error-icon-hover-border-color: var(--error-icon-border-color);
--error-title-color: var(--error-color);
--error-title-hover-color: var(--error-title-color);
--error-description-color: var(--error-color);
--error-description-hover-color: var(--error-description-color);
--error-tail-color: var(--process-tail-color);
--steps-background: var(--component-background);
--steps-icon-size: 0.28rem;
--steps-icon-font-size: var(--font-size-lg);
--steps-item-dropdown-icon-font-size: var(--steps-icon-font-size);
--steps-icon-border-width: 0rem;
--steps-icon-border-style: var(--border-style-base);
--steps-icon-border-color: var(--border-color-base);
--steps-small-item-title-font-size: var(--font-size-base);
--steps-small-icon-size: 0.24rem;
--steps-dot-size: 0.08rem;
--steps-current-dot-size: 0.1rem;
--steps-desciption-max-width: 1.4rem;
--steps-title-min-width: 1.76rem;
--steps-item-cursor: unset;
--step-border-color: rgba(0, 0, 0, 0.26);
--step-wait-color: rgba(0, 0, 0, 0.36);
--steps-item-dropdown-icon-size: 0.3rem;
--steps-item-title-icon-margin: 0 0 0 0.16rem;
--steps-vertical-item-icon-margin-right: 0.16rem;
--steps-vertical-item-tail-left: 0.16rem;
--steps-tail-size: 0.01rem;
// Tooltip
--tooltip-font-size: unset;
--tooltip-max-width: 4rem;
--tooltip-min-width: 0.3rem;
--tooltip-min-height: 0.32rem;
--tooltip-color: var(--text-color-dark);
--tooltip-bg: rgba(0, 0, 0, 0.75);
--tooltip-arrow-width: 0.05rem;
--tooltip-distance: calc(var(--tooltip-arrow-width) + 0.03rem);
--tooltip-arrow-color: var(--tooltip-bg);
--tooltip-color-light: var(--text-color);
--tooltip-bg-light: var(--component-background);
--tooltip-arrow-color-light: var(--tooltip-bg-light);
--tooltip-line-height: inherit;
--tooltip-link-color-dark: var(--link-color);
--tooltip-box-shadow-light: var(--box-shadow-base);
--tooltip-box-shadow: var(--box-shadow-base);
--tooltip-padding: 0.06rem 0.08rem;
--tooltip-border-radius: calc(var(--border-radius-base) * 2);
// Popover
--popover-bg: var(--component-background);
--popover-color: var(--text-color);
--popover-min-width: 1.77rem;
--popover-min-height: 0.32rem;
--popover-arrow-offset: 0.02rem;
--popover-arrow-width: 0.05rem;
--popover-arrow-color: var(--popover-bg);
--popover-arrow-outer-color: var(--popover-bg);
--popover-distance: calc(var(--popover-arrow-width) + 0.04rem);
--popover-message-padding: 0.04rem 0 0.12rem;
--popover-message-title-padding: 0 0 0 calc(var(--font-size-base) + 0.08rem);
--popover-title-padding: 0.05rem var(--padding-md) 0.04rem;
--popover-content-under-title-padding: var(--popover-title-padding);
--popover-title-border-bottom: var(--border-width-base) var(--border-style-base) var(--border-color-split);
--popover-title-font-weight: 500;
--popover-title-font-size: unset;
--popover-inner-content-padding: 0.12rem var(--padding-md);
--popover-line-height: unset;
--popover-warning-icon-top: unset;
// Modal
// --
--modal-font-size-lg: 0.18rem; // deprecated
--modal-font-size-base: var(--modal-font-size-lg); // deprecated
--modal-title-color: var(--heading-color);
--modal-title-font-size-base: var(--modal-font-size-base);
--modal-title-font-weight: 500;
--modal-title-line-height: 0.24rem;
--modal-confirm-title-color: var(--modal-title-color);
--modal-confirm-title-font-size-base: 0.2rem;
--modal-confirm-title-font-weight: var(--modal-title-font-weight);
--modal-confirm-title-line-height: 0.32rem;
--modal-mask-bg: rgba(0, 0, 0, 0.288);
--modal-content-shadow: var(--shadow-2);
--modal-header-padding: 0.15rem 0.24rem;
--modal-body-padding: 0.24rem;
--modal-footer-padding: 0.12rem 0.24rem;
--modal-drawer-header-padding: var(--modal-header-padding);
--modal-drawer-body-padding: var(--modal-body-padding);
--modal-drawer-footer-padding: var(--modal-footer-padding);
--modal-header-footer-border: var(--border-width-base) var(--border-style-base) var(--border-color-base);
--modal-drawer-footer-text-align: left;
--modal-confirm-icon-padding: 0 0.16rem 0 0;
--modal-confirm-icon-font-size: 0.24rem;
--modal-confirm-icon-line-height: 1.5;
--modal-no-border-header-padding: var(--modal-header-padding);
// Modal Basic
--modal-basic-footer-padding: 0.12rem 0;
// Progress
--progress-default-color: var(--processing-color);
--progress-remaining-color: var(--background-color-base);
--progress-loading-size-sm: 0.2rem;
--progress-loading-size-base: 0.3rem;
--progress-loading-size-lg: 0.5rem;
// Menu
--menu-first-level-title-font-size: var(--font-size-base);
--menu-inline-toplevel-item-height: 0.4rem;
--menu-horizontal-line-height: 0.46rem;
--menu-horizontal-hover-bg: transparent;
--menu-horizontal-border-bottom: var(--border-width-base) var(--border-style-base) var(--border-color-split);
--menu-horizontal-selected-font-weight: unset;
--menu-horizontal-root-selected-bg: unset;
--menu-not-horizontal-padding: unset;
--menu-vertical-submenu-arrow-right: 0.16rem;
--menu-item-height: 0.4rem;
--menu-collapsed-width: 0.8rem;
--menu-bg: var(--component-background);
--menu-item-color: var(--text-color);
--menu-highlight-color: var(--primary-color);
--menu-item-active-bg: var(--item-active-bg);
--menu-item-group-title-color: var(--text-color-secondary);
--menu-item-group-title-padding: 0.08rem 0.16rem;
--menu-item-group-title-line-height: var(--line-height-base);
--menu-item-padding: 0 0.16rem 0 0.28rem;
--menu-active-line-width: 0.02rem;
--menu-submenu-margin: unset;
--menu-popup-item-group-border-bottom: unset;
--menu-popup-sub-padding: unset;
// dark theme
--menu-dark-color: var(--text-color-secondary-dark);
--menu-dark-bg: var(--layout-header-background);
--menu-dark-arrow-color: #fff;
--menu-dark-submenu-bg: #000c17;
--menu-dark-highlight-color: #fff;
--menu-dark-item-selected-bg: var(--primary-color);
// Spin
// ---
--spin-dot-size-sm: 0.2rem;
--spin-dot-size: 0.3rem;
--spin-dot-size-lg: 0.5rem;
// Table
// --
--table-border: var(--border-width-base) var(--border-style-base) var(--border-color-base);
--table-outermost-border-top: var(--table-border);
--table-outermost-border-bottom: var(--table-border);
--table-cell-border-right: var(--border-width-base) var(--border-style-base) transparent;
--table-cell-border-bottom: var(--table-border);
--table-outermost-bordered-border-right: var(--table-border);
--table-outermost-bordered-border-left: var(--table-border);
--table-tfoot-cell-border-top: var(--table-border);
--table-last-row-cell-border-bottom: var(--border-width-base) var(--border-style-base) transparent;
--table-notbordered-thead-hover-border-right-color: var(--table-border-color);
--table-notbordered-body-border-bottom-color: var(--table-border-color);
--table-header-bg: var(--background-color-light);
--table-header-color: var(--heading-color);
--table-header-font-weight: 700;
--table-header-sort-bg: var(--background-color-base);
--table-row-hover-bg: var(--item-hover-bg);
--table-row-hover-editable-bg: unset;
--table-current-row-bg: var(--item-active-bg);
--table-even-row-bg: fade(#000, 2%);
--table-cell-focus-bg: fade(#000, 8%);
--table-selected-row-bg: fade(#a1c2fa, 16%);
--table-expanded-row-bg: #fbfbfb;
--table-mouse-batch-choose-bg: var(--table-selected-row-bg);
--table-padding-vertical: 0.05rem;
--table-padding-horizontal: var(--input-padding-horizontal);
--table-cell-font-weight: 400;
--table-cell-padding-vertical-base: 0.01rem;
--table-cell-padding-horizontal-base: 0.01rem;
--table-cell-padding-vertical-sm: var(--table-cell-padding-horizontal-base);
--table-cell-padding-horizontal-sm: var(--table-cell-padding-horizontal-base);
--table-header-cell-padding-vertical-base: var(--table-cell-padding-vertical-base);
--table-header-cell-padding-horizontal-base: var(--table-cell-padding-horizontal-base);
--table-header-cell-padding-vertical-sm: var(--table-cell-padding-vertical-sm);
--table-header-cell-padding-horizontal-sm: var(--table-cell-padding-horizontal-sm);
--table-footer-cell-padding-vertical-base: var(--table-cell-padding-vertical-base);
--table-footer-cell-padding-horizontal-base: var(--table-cell-padding-horizontal-base);
--table-footer-cell-padding-vertical-sm: var(--table-cell-padding-vertical-sm);
--table-footer-cell-padding-horizontal-sm: var(--table-cell-padding-horizontal-sm);
--table-split-color: var(--primary-color);
--table-editable-cell-border-radius-base: 0rem;
--table-editable-cell-border-color: var(--input-border-color);
--table-editable-cell-required-bg: var(--input-required-bg);
--table-editable-cell-required-border-color: var(--input-required-border-color);
--table-editable-cell-highlight-border-color: var(--input-highlight-border-color);
--table-editable-cell-error-bg: var(--error-bg-color);
--table-editable-cell-error-border-color: var(--input-error-border-color);
--table-editable-cell-disabled-bg: var(--input-disabled-bg);
--table-editable-cell-disabled-border-color: var(--input-disabled-color);
--table-customization-select-view-option-bg: fade(#000, 8%);
--table-customization-form-padding-vertical: 0.05rem;
--table-customization-button-color: unset;
--table-customization-tree-treenode-padding: 0.03rem 0;
--table-customization-tree-treenode-title-margin: unset;
--table-customization-tree-treenode-content-height: 0.32rem;
--table-customization-tree-treenode-switcher-height: var(--table-customization-tree-treenode-content-height);
--table-customization-tree-treenode-switcher-padding: 0.05rem 0;
--table-customization-tree-treenode-dragging-bg-color: var(--component-background);
--table-customization-tree-treenode-switcher-icon-size: 0.18rem;
--table-customization-tree-treenode-switcher-icon-line-height: 0.22rem;
--table-border-color: var(--border-color-base);
--table-row-group-title-bg: #f5f5f5;
--table-row-group-title-color: inherit;
--table-cell-group-font-weight: var(--table-header-font-weight);
--table-icon-help-color: var(--primary-color);
--table-icon-help-content: '\e8fd';
--table-icon-help-size: var(--icon-font-size-base);
--table-icon-help-font-weight: inherit;
--table-icon-sort-hover-color: var(--primary-color);
--table-icon-sort-active-color: var(--table-icon-sort-hover-color);
--table-dynamic-filter-label-color: #6A6A6A;
--table-dynamic-filter-placeholder-color: var(--table-dynamic-filter-label-color);
--table-dynamic-filter-input-padding: 0.01rem 0.02rem;
--table-dynamic-filter-status-line-height: var(--line-height-base);
--table-dynamic-filter-expand-query-icon-color: unset;
--table-dynamic-filter-refresh-icon-hover-color: unset;
--table-dynamic-filter-single-action-buttons-margin: 0.02rem 0 0;
--table-dynamic-filter-required-border-color: var(--input-border-color);
--table-dynamic-filter-required-active-border-color: var(--primary-color);
--table-dynamic-filter-required-active-box-shadow: var(--input-required-active-box-shado