@import "./variables/index.less";

@theme: dark;
@primary-color-1: ~`colorPalette('@{primary-color}', 7)`;
@primary-color-3: ~`colorPalette('@{primary-color}', 5)`;
@primary-color-4: ~`colorPalette('@{primary-color}', 9)`;
@primary-color-5: ~`colorPalette('@{primary-color}', 10)`;
@primary-color-6: ~`colorPalette('@{primary-color}', 11)`;

@info-color-1: ~`colorPalette('@{info-color}', 7)`;
@info-color-3: ~`colorPalette('@{info-color}', 5)`;
@info-color-4: ~`colorPalette('@{info-color}', 9)`;
@info-color-5: ~`colorPalette('@{info-color}', 10)`;
@info-color-6: ~`colorPalette('@{info-color}', 11)`;

@success-color-1: ~`colorPalette('@{success-color}', 7)`;
@success-color-3: ~`colorPalette('@{success-color}', 5)`;
@success-color-4: ~`colorPalette('@{success-color}', 9)`;
@success-color-5: ~`colorPalette('@{success-color}', 10)`;
@success-color-6: ~`colorPalette('@{success-color}', 11)`;

@danger-color-1: ~`colorPalette('@{danger-color}', 7)`;
@danger-color-3: ~`colorPalette('@{danger-color}', 5)`;
@danger-color-4: ~`colorPalette('@{danger-color}', 9)`;
@danger-color-5: ~`colorPalette('@{danger-color}', 10)`;
@danger-color-6: ~`colorPalette('@{danger-color}', 11)`;

@warning-color-1: ~`colorPalette('@{warning-color}', 7)`;
@warning-color-3: ~`colorPalette('@{warning-color}', 5)`;
@warning-color-4: ~`colorPalette('@{warning-color}', 9)`;
@warning-color-5: ~`colorPalette('@{warning-color}', 10)`;
@warning-color-6: ~`colorPalette('@{warning-color}', 11)`;

// text color
@text-color-1: rgba(@gray-1, 0.8);
@text-color-2: rgba(@gray-1, 0.6);
@text-color-3: rgba(@gray-1, 0.4);
@text-color-4: rgba(@gray-1, 0.24);
@text-color-5: rgba(@gray-1, 0.24);
@text-color-white: rgba(@gray-1, 0.8);

// body background
@body-bg:                             @dark-gray-11;
// layout content（side、header、content） background
@layout-bg:                           @dark-gray-9;
// component basic background
@component-bg:                        @dark-gray-4;
@component-header-bg:                 @dark-gray-6;
// drawer & modal background
@modal-bg:                            @dark-gray-7;
// component popper & panel background
@popper-header-bg:                    @component-header-bg;
@popper-body-bg:                      @component-bg;

@disabled-default-bg:                         rgba(@gray-1, 0.12);

@list-hover-bg:                       rgba(@gray-1, 0.08);

// base border outline a component
@border-color-base:                   @dark-gray-1;
@disabled-default-border:               @dark-gray-1;
// // split border inside a component
@border-color-split:                  rgba(@gray-1, 0.1);

// button
// disabled bg change opacity
@btn-default-plain-bg:                      @dark-gray-2;


@btn-default-bg: @dark-gray-4;

@btn-default-hover-bg: @dark-gray-5;

@btn-default-focus-bg: @dark-gray-5;

@btn-default-active-bg: @dark-gray-6;

@btn-primary-disabled-color: @text-color-white;
@btn-primary-disabled-border: @primary-color;
@btn-primary-disabled-bg: @primary-color;

@btn-info-disabled-color: @text-color-white;
@btn-info-disabled-border: @info-color;
@btn-info-disabled-bg: @info-color;

@btn-danger-disabled-color: @text-color-white;
@btn-danger-disabled-border: @danger-color;
@btn-danger-disabled-bg: @danger-color;

@btn-warning-disabled-color: @text-color-white;
@btn-warning-disabled-border: @warning-color;
@btn-warning-disabled-bg: @warning-color;

@btn-success-disabled-color: @text-color-white;
@btn-success-disabled-border: @success-color;
@btn-success-disabled-bg: @success-color;

@btn-primary-plain-bg: transparent;
@btn-primary-plain-active-disabled-color: @primary-color;
@btn-primary-plain-active-disabled-bg: @primary-color-6;
@btn-primary-plain-active-disabled-border: @primary-color;

@btn-info-plain-bg: transparent;
@btn-info-plain-active-disabled-color: @info-color;
@btn-info-plain-active-disabled-bg: @info-color-6;
@btn-info-plain-active-disabled-border: @info-color;

@btn-danger-plain-bg: transparent;
@btn-danger-plain-active-disabled-color: @danger-color;
@btn-danger-plain-active-disabled-bg: @danger-color-6;
@btn-danger-plain-active-disabled-border: @danger-color;

@btn-warning-plain-bg: transparent;
@btn-warning-plain-active-disabled-color: @warning-color;
@btn-warning-plain-active-disabled-bg: @warning-color-6;
@btn-warning-plain-active-disabled-border: @warning-color;

@btn-success-plain-bg: transparent;
@btn-success-plain-active-disabled-color: @success-color;
@btn-success-plain-active-disabled-bg: @success-color-6;
@btn-success-plain-active-disabled-border: @success-color;

// switch
// disable bg change opacity
@switch-bg:                           rgba(@gray-1, 0.4);
@switch-loading-icon-color:           @dark-gray-6;

// checkbox radio
@checkbox-button-focus-bg: transparent;
@checkbox-group-plain-border:@border-color-base;
@radio-group-plain-border: @border-color-base;
@checkbox-group-plain-bg:@option-dark;
@radio-group-plain-bg:@option-dark;
@checkbox-group-filled-border: transparent;
@radio-group-filled-border: transparent;
@radio-group-filled-bg: rgba(@gray-1, 0.08);
@checkbox-group-filled-bg:rgba(@gray-1, 0.08);

// options
@option-dark: #121212;
@options-plain-bg:@option-dark;
@options-filled-bg:transparent;
@options-plain-color: @text-color-1;
@options-filled-color: @text-color-1;
@options-plain-hover-color: @text-color-1;
@options-filled-hover-color: @text-color-1;
@options-filled-hover-bg: @dark-gray-2;

@options-plain-hover-bg: rgba(@gray-1, 0.08);
@options-plain-active-color:@text-color-1;
@options-filled-active-color:@text-color-1;
@options-filled-active-bg: @dark-gray-1;
@options-plain-active-bg:rgba(@gray-1, 0.12);
@options-plain-selected-bg: @blue-11;
@options-plain-selected-color:@primary-color;
@options-plain-disabled-color: rgba(@gray-1, 0.24);
@options-plain-bg: @option-dark;
@options-plain-selected-disabled-bg:@blue-11;
@options-plain-selected-disabled-color: @blue-9;
@checkbox-option-plain-after-selected-border: @primary-color;
@checkbox-option-filled-selected-border:@primary-color;
@checkbox-option-filled-selected-disable-after-border:@blue-9;
@checkbox-option-plain-selected-after-disable-color: @blue-9;
@options-filled-selected-bg: @component-bg;
@options-filled-selected-color: @primary-color;
@options-filled-disabled-color: rgba(@gray-1, 0.24);
@options-filled-disable-bg:transparent;
@options-filled-selected-disabled-bg: @component-bg;
@options-filled-selected-disabled-color: @blue-9;

// select
@select-number-bg-color: rgba(@gray-1, 0.1);

// tag
@tag-default-bg:                      rgba(@gray-1, 0.1);
@tag-plain-default-bg:                rgba(@gray-1, 0.1);

// progress
@progress-bg:                         rgba(@gray-1, 0.1);

// steps
@steps-waiting-bg-color:              rgba(@gray-1, 0.1);

// avatar
@avatar-bg:                           rgba(@gray-1, 0.24);

// slider
@slider-container-bg-color:           rgba(@gray-1, 0.1);
@slider-button-bg-color:              @dark-gray-11;
@slider-disable-bg-color:             @dark-gray-11;

// select-panel
@select-panel-selected-bg:            rgba(@gray-1, 0.08);

// badge
@badge-default-bg:                    rgba(@gray-1, 0.24);

// alert
@alert-banner-bg:                     transparent;

// table

@table-wrapper-bg:                    transparent;
@table-tbody-bg:                      transparent;
@table-fixed-thead-bg:                @dark-gray-5;
@table-fixed-tbody-bg:                @dark-gray-7;

// tabs
@tabs-bg-color:                       @dark-gray-5;
@tabs-nav-bg-color:                   @dark-gray-7;

// rate
@rate-icon-default:                   @dark-gray-2;

// progress
@progress-inner-text-color:            @text-color-1;

// Menu
@menu-light-bg-color:                 @dark-gray-9;
@menu-dark-bg-color:                  @dark-gray-9;

// scrollbar
@scrollbar-bg: rgba(@gray-1, 0.24);
@scrollbar-hover-bg: rgba(@gray-1, 0.24);

// color-picker
@color-picker-option-none-bg: rgba(@gray-1, 0.8);;
@color-picker-label-bg: rgba(@gray-1, 0.08);
@color-picker-icon-color: rgba(@gray-1, 0.8);

// DatePicker
@date-picker-date-in-range-bg: rgba(@gray-1, 0.08);
@date-picker-date-in-range-hover-bg: @dark-gray-1;

//input
@input-filled-bg: @dark-gray-4;
@input-filled-hover-bg: @dark-gray-5;
@input-filled-active-bg: @dark-gray-6;
@input-filled-focus-bg: @input-filled-bg;

//tag
@tag-light-bg: @dark-gray-1;

//transparent
@bui-transparent: transparent;

// loading
@loading-v-dark-bg: @gray-11;