@import './colors.less';

// 对外暴露的支持配置的变量

@primary-color: @blue-6;
@info-color: @blue-6;
@success-color: @green-6;
@danger-color: @red-6;
@warning-color: @yellow-6;
@secondary-color: @blue-6;


// active
@primary-color-1: ~`colorPalette('@{primary-color}', 7)`;
// primary-color, primary-normal-color,
@primary-color-2: @primary-color;
// hover or focus
@primary-color-3: ~`colorPalette('@{primary-color}', 5)`;
// disabled
@primary-color-4: ~`colorPalette('@{primary-color}', 3)`;
// filled bg
@primary-color-5: ~`colorPalette('@{primary-color}', 2)`;
// default filled bg or default active bg
@primary-color-6: ~`colorPalette('@{primary-color}', 1)`;

@secondary-color-1: ~`colorPalette('@{secondary-color}', 7)`;
@secondary-color-2: @secondary-color;
@secondary-color-3: ~`colorPalette('@{secondary-color}', 5)`;
@secondary-color-4: ~`colorPalette('@{secondary-color}', 3)`;
@secondary-color-5: ~`colorPalette('@{secondary-color}', 2)`;
@secondary-color-6: ~`colorPalette('@{secondary-color}', 1)`;

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

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

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

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

//== Colors
@gray-1: @light-gray-1;
@gray-2: @light-gray-2;
@gray-3: @light-gray-3;
@gray-4: @light-gray-4;
@gray-5: @light-gray-5;
@gray-6: @light-gray-6;
@gray-7: @light-gray-7;
@gray-8: @light-gray-8;
@gray-9: @light-gray-9;
@gray-10: @light-gray-10;
@gray-11: @light-gray-11;




// @import './theme.default.less';
// 全局命名空间
@css-prefix:                 byted-;


@theme: 'light';



// font-family
@font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
  'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', sans-serif,
  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
// @font-variant-base: tabular-nums;
// @font-feature-settings-base: 'tnum';
@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
// nomospace for number, makes all character the same width
@font-family-number: Helvetica Neue, Helvetica, Arial, sans-serif;

// text color
@text-color-1: @gray-11;
@text-color-2: @gray-10;
@text-color-3: @gray-9;
@text-color-4: @gray-8;
@text-color-5: @gray-7;

@text-color-primary-1: @primary-color-1;
@text-color-primary-2: @primary-color-2;
@text-color-primary-3: @primary-color-3;
@text-color-primary-4: @primary-color-4;

@text-color-warning: @warning-color;
@text-color-danger: @danger-color;
@text-color-white: @gray-1;

// body background
// @body-bg: @gray-1;
// layout content（side、header、content） background
@layout-bg: @gray-1;
// component basic background
@component-bg: @gray-1;
@component-header-bg: @gray-2;
// drawer & modal background
@modal-bg: @component-bg;
// component popper & panel background
@popper-header-bg: @component-header-bg;
@popper-body-bg: @component-bg;
@popper-content-height: 192px;
@popper-shadow: @shadow-md;


// disabled background & color
@disabled-default-bg: @gray-2;
@disabled-default-color: @text-color-4;
@disabled-default-border: @gray-4;

@disabled-default-filled-bg: @gray-3;
@disabled-default-filled-border: @disabled-default-filled-bg;
// @disabled-default-filled-color: @text-color-4;

// list item hover background
@list-hover-bg: @gray-4;
@list-selected-color: @primary-color;
@list-disabled-color: @disabled-default-color;
@list-padding-top: 6px;
@list-padding-left: 12px;
@list-group-padding-left: 24px;
@list-multiple-padding-left: 36px;
@list-group-multiple-padding-left: 48px;
@list-loadmore-height: 36px;



// Border
// base border outline a component
@border-color-base: @gray-6;
// // split border inside a component
@border-color-split: @gray-5;
// border-radius
@border-radius-base: 4px;
@border-radius-circle: 50%;

// width of the border for a component
@border-width-md: 1px;
@border-width-lg: 2px;
@border-width-xl: 3px;

@border-style-base: solid; // style of a components border
@border-style-dashed: dashed;


// font-size
@font-size-xs: 12px;
@font-size-sm: 12px;
@font-size-md: 14px;
@font-size-lg: 16px;
@font-size-xl: 18px;
@font-size-xxl: 20px;


// font-weight
@font-weight-ultral-light: 100;
@font-weight-thin: 200;
@font-weight-light: 300;
@font-weight-regular: 400;
@font-weight-medium: 500;
@font-weight-sembold: 600;
@font-weight-bold:          bold;


// line-height
@line-height-xs: 20px;
@line-height-sm: 20px;
@line-height-md: 22px;
@line-height-lg: 24px;
@line-height-xl: 26px;



// shadow
@shadow-sm: 0px 1px 6px 0px rgba(0,0,0,0.05);
@shadow-md: 0px 2px 6px 0px rgba(0,0,0,0.15);
@shadow-lg: 0px 4px 12px 0px rgba(0,0,0,0.1);
// paddings
@padding-xl: 32px;
@padding-lg: 24px;
@padding-md: 16px;
@padding-sm: 12px;
@padding-xs: 8px;


//loading
@loading-icon-xs: 12px;
@loading-icon-sm: 14px;
@loading-icon-md: 18px;
@loading-icon-lg: 36px;
@loading-icon-xl: 56px;
@loading-animation-duration: 0.77s;

//transparent
@bui-transparent: transparent;