antdv-eoi/es/style/themes/var/variables-ant-design.less

An enterprise-class UI design language and Vue-based implementation

@import './variables';

/************************* 自定义变量 *********************/
@--color-window-background: var(--color-window-background);

@--color-component-background: var(--color-component-background);
@--color-component-background-disabled: var(--color-component-background-disabled);
@--color-component-color-disabled: var(--color-component-color-disabled);
@--color-component-border-disabled: var(--color-component-border-disabled);

@--color-input-background: var(--color-input-background);
@--color-input-background-disabled: var(--color-input-background-disabled);
@--color-input-border: var(--color-input-border);
@--color-input-border-hover: var(--color-input-border-hover);

@--color-switch-background: var(--color-switch-background);
@--color-switch-background-checked: var(--color-switch-background-checked);
@--color-switch-inner-background: var(--color-switch-inner-background);
@--color-switch-inner-background-checked: var(--color-switch-inner-background-checked);

@--color-select-item-background-selected: var(--color-select-item-background-selected);

@--color-checkbox-inner-border-indeterminate: var(--color-checkbox-inner-border-indeterminate);
@--color-checkbox-border-hover: var(--color-checkbox-border-hover);

// tag
@tag-border-radius: 4px;
@tag-default-color: var(--color-neutrals-6);
@tag-default-border-color: var(--color-neutrals-4);
@--color-primary-hover: var(--color-primary-hover);
@--color-primary-active: var(--color-primary-pressed);

// popover
@popoper-header-color: var(--color-neutrals-9, #525252);
@popoper-header-border-color: var(--color-neutrals-4, #dbdbdb);

// model
@model-split-color: var(--color-neutrals-4);

/************************* 修改ant-design-vue变量 *********************/
@text-color: @--color-neutrals-7;
@component-background: @--color-component-background;
@wait-title-color: @--color-neutrals-4;
@item-hover-bg: @--color-primary-1;

// button
@btn-default-color: @--color-neutrals-7;
@btn-default-color-hover: @--color-neutrals-7;
@btn-default-color-focus: @--color-neutrals-7;
@btn-default-color-active: @--color-neutrals-8;
@btn-default-color-disabled: @--color-neutrals-4;
@btn-default-color-disabled-checked: @--color-neutrals-4;
@btn-default-bg: @--color-neutrals-2;
@btn-default-bg-hover: @--color-neutrals-1;
@btn-default-bg-focus: @--color-neutrals-1;
@btn-default-bg-active: @--color-neutrals-2;
@btn-default-bg-disabled: @--color-neutrals-2;
@btn-default-bg-disabled-checked: @--color-neutrals-2;
@btn-default-border: @--color-neutrals-5;
@btn-default-border-hover: @--color-neutrals-6;
@btn-default-border-focus: @--color-neutrals-6;
@btn-default-border-active: @--color-neutrals-7;
@btn-default-border-disabled: @--color-neutrals-3;
@btn-default-border-disabled-checked: @--color-neutrals-3;

@btn-primary-color: @--color-white;
@btn-primary-color-hover: @--color-white;
@btn-primary-color-focus: @--color-white;
@btn-primary-color-active: @--color-white;
@btn-primary-color-disabled: @--color-neutrals-4;
@btn-primary-color-disabled-checked: @--color-neutrals-5;
@btn-primary-bg: @primary-color;
@btn-primary-bg-hover: @--color-primary-hover;
@btn-primary-bg-focus: @--color-primary-hover;
@btn-primary-bg-active: @--color-primary-pressed;
@btn-primary-bg-disabled: var(--color-input-background);
@btn-primary-bg-disabled-checked: @--color-neutrals-2;
@btn-primary-border: @primary-color;
@btn-primary-border-hover: @btn-primary-bg-hover;
@btn-primary-border-focus: @btn-primary-bg-hover;
@btn-primary-border-active: @--color-primary-pressed;
@btn-primary-border-disabled: @--color-neutrals-4;
@btn-primary-border-disabled-checked: @--color-neutrals-5;

@pagination-item-bg-active: @primary-color;

@blue-6: @primary-color;

@primary-1: @--color-primary-1;
@primary-5: @--color-neutrals-5;

@disabled-color: @--color-component-color-disabled;

//Form
@label-color: @--color-neutrals-8;

// Input
@input-color: @--color-neutrals-8;
@input-bg: @--color-input-background;
@input-border-color: @--color-input-border;
@input-hover-border-color: @--color-input-border-hover;
@input-disabled-bg: var(--color-input-background-disabled);
@input-disabled: @--color-neutrals-8;
@input-color-disabled: @--color-component-color-disabled;
@input-border-disabled: @--color-component-border-disabled;
@input-close-color: @--color-neutrals-7;
@input-close-color-hover: @--color-neutrals-8;
@input-placeholder-color: @--color-neutrals-6;
@input-number-handler-inner-color: @--color-neutrals-6;
@input-number-handler-inner-color-hover: @input-color;
@input-number-handler-color: @input-color;
@input-number-handler-active-bg: @--color-neutrals-1;
@input-number-handler-hover: @--color-neutrals-2;

// select
@select-border-color: @input-border-color;
@select-background: @--color-input-background;
@select-dropdown-bg: @--color-input-background;
@select-item-selected-color: @text-color;
@select-item-selected-bg: @--color-select-item-background-selected;
@select-selection-choice-background: @--color-neutrals-2;

// checkbox
@checkbox-check-color: @--color-input-background;
@checkbox-border: @input-border-color;
@checkbox-inner-border-indeterminate: @--color-checkbox-inner-border-indeterminate;
@checkbox-border-hover: @--color-checkbox-border-hover;
@input-inner-checked-disabled: @primary-color;

// radio
@radio-border: @input-border-color;
@radio-button-bg: @--color-input-background;
@radio-inner-background-disabled: @primary-color;

// switch
@switch-background: @--color-switch-background;
@switch-background-checked: @--color-switch-background-checked;
@switch-inner-background: @--color-switch-inner-background;
@switch-inner-background-checked: @--color-switch-inner-background-checked;
@switch-disabled-opacity: 0.45;

// datepicker
@datepicker-color-selected: @--color-white;

@menu-bg: @--color-neutrals-2;
@menu-item-active-bg: @--color-neutrals-3;
@menu-highlight-color: @--color-neutrals-9;
@menu-item-group-title-color: @--color-neutrals-9;

// 时间选择器面板hover背景色
@--color-datepick-hover-background: var(--color-primary-1);

// table
@border-color-split: var(--color-input-border);
@table-padding-vertical: 7px;
@table-padding-horizontal: 23px;
@table-body-padding-vertical: 4px;
@table-header-background: var(--table-header-background);
@table-body-background: var(--table-body-background);
@table-sort-background: var(--table-sort-background);