shineout/lib/styles/themes/shineout.less

Shein 前端组件库

@import './bootstrap.less';
@import './cssvar.less';

@font-family-sans-serif:  -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino KaKu Gothic Pro, Microsoft YaHei, Arial, sans-serif;

@colors-primary-value: #197AFA;
@colors-primary: var(--primary-color, @colors-primary-value);
@colors-blue: @colors-primary;

@colors-secondary-value: #666c7c;
@colors-secondary: var(--secondary-color, @colors-secondary-value);

@colors-green: #52c41a;
@colors-success-value: @colors-green;
@colors-success: var(--success-color, @colors-success-value);

@colors-cyan: #197AFA;
@colors-info-value: @colors-cyan;
@colors-info: var(--info-color, @colors-info-value);

@colors-yellow: #ff8c00;
@colors-warning-value: @colors-yellow;
@colors-warning: var(--warning-color, @colors-warning-value);

@colors-red: #ff4d50;
@colors-danger-value: @colors-red;
@colors-danger: var(--danger-color, @colors-danger-value);

@gray-100-value: #f4f5f8;
@gray-200-value: #e8ebf0;
@gray-300-value: #cccfd7;
@gray-400-value: #b3b7c1;
@gray-500-value: #999da8;
@gray-600-value: #666c7c;
@gray-700-value: #333e59;
@gray-800-value: #141737;
@gray-900-value: #020b18;

@common-spin-default-name: var(--common-spin-default-name, ring);
@common-caret-style: var(--common-caret-style, line);


@state-success-text: @gray-700;
@state-success-bg: #f1faeb;
@state-success-border: rgba(116, 209, 61, 0.1);

@state-info-text: @gray-700;
@state-info-bg: #e8f1fe;
@state-info-border: rgba(25, 122, 250, 0.1);

@state-warning-text: @gray-700;
@state-warning-bg: #fff6eb;
@state-warning-border: rgba(255, 169, 64, 0.1);

@state-danger-text: @gray-700;
@state-danger-bg: #ffeded;
@state-danger-border: rgba(255, 77, 80, 0.1);



// button
// Button
@btn-circle-width: 32px;
@btn-circle-small-width: 24px;
@btn-circle-large-width: 40px;
@btn-default-border-color-value: #d9d9d9;
@btn-default-border: var(--button-default-border, @btn-default-border-color-value);
@btn-primary-border: @colors-primary;
@btn-warning-border: @colors-warning;
@btn-success-border: @colors-success;
@btn-info-border: @colors-info;
@btn-danger-border: @colors-danger;
@btn-hover-darken: -5%;

// button radius
@button-border-radius-value: 4px;
@btn-border-radius-base: var(--button-border-radius, @button-border-radius-value);
@button-small-border-radius-value: 4px;
@btn-border-radius-small: var(--button-small-border-radius, @button-small-border-radius-value);
@button-large-border-radius-value: 4px;
@btn-border-radius-large: var(--button-large-border-radius, @button-large-border-radius-value);

// button font size
@font-size-large: @font-size-large-medium;
@button-font-size-large-value: @font-size-large;
@button-font-size-large: var(--button-font-size-large, @button-font-size-large-value);

// button margin left
@button-margin-left-value: 8px;
@button-margin-left: var(--button-margin-left, @button-margin-left-value);

// button loading margin
@button-spin-margin-value: 4px;
@button-spin-margin: var(--button-spin-margin, @button-spin-margin-value);


// button padding base
@padding-base-horizontal: 8px;
@padding-base-vertical: 5px;
@button-padding-base-horizontal-value: @padding-base-horizontal;
@btn-padding-x: var(--button-padding-base-horizontal, @button-padding-base-horizontal-value);
@button-padding-base-vertical-value: @padding-base-vertical;
@btn-padding-y: var(--button-padding-base-vertical, @button-padding-base-vertical-value);

// button padding large
@padding-large-horizontal: 12px;
@padding-large-vertical: 8px;
@button-padding-large-horizontal-value: @padding-large-horizontal;
@btn-padding-large-x: var(--button-padding-large-horizontal, @button-padding-large-horizontal-value);
@button-padding-large-vertical-value: @padding-large-vertical;
@btn-padding-large-y: var(--button-padding-large-vertical, @button-padding-large-vertical-value);


// button padding small
@padding-small-horizontal: 8px;
@padding-small-vertical: 2px;
// @padding-large-vertical: 8px;
@button-padding-small-horizontal-value: @padding-small-horizontal;
@btn-padding-small-x: var(--button-padding-small-horizontal, @button-padding-small-horizontal-value);
@button-padding-small-vertical-value: @padding-small-vertical;
@btn-padding-small-y: var(--button-padding-small-vertical, @button-padding-small-vertical-value);


// button disabled background
@button-disabled-bg-value: @gray-300;
@button-disabled-bg: var(--button-disabled-bg, @button-disabled-bg-value);

// button disabled color
@button-disabled-color-value: white;
@button-disabled-color: var(--button-disabled-color, @button-disabled-color-value);

@button-disabled-border-color: var(--button-disabled-border-color, @button-disabled-bg);

@button-disabled-opacity: 0.65;
// button default text color
@btn-default-color: #333e59;


// dropdown
// dropdown border width
@dropdown-border-width-value: 1px;
@dropdown-default-border-width-color: transparent;
@dropdown-default-border-width-hover-color: transparent;

// columns padding
@dropdown-columns-padding: var(--dropdown-columns-padding, 8px);

// options hover background
@dropdown-link-hover-bg: rgba(25, 122, 250, 0.1);

// options hover color
@dropdown-link-hover-color: @colors-primary;

@dropdown-link-active-bg-value: #f2f2f2;
@dropdown-link-active-bg: var(--select-item-active-bg, @dropdown-link-active-bg-value);

@dropdown-link-active-color-value: rgba(0, 0, 0, 0.65);
@dropdown-link-active-color: var(--select-item-active-color, @dropdown-link-active-color-value);

@dropdown-padding-x: 12px;
@dropdown-padding-y: 0;
@dropdown-item-padding-y: 6px;
@dropdown-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
@dropdown-border: transparent;
@dropdown-link-color: rgba(0, 0, 0, 0.65);
@dropdown-arrow-vertical: auto;



// cascader
// active
@cascader-active-background-color: var(--cascader-active-background-color, #E6F5FF);
@cascader-active-color: var(--cascader-active-color, @colors-primary);



// checkbox
// border width
@checkbox-border-width-value: 2px;

// color
@checkinput-color: var(--checkinput-color, @gray-700-value);

// border color
@checkbox-border-color-value: @gray-300;
@checkbox-border-color: var(--checkbox-border-color, @checkbox-border-color-value);


// datepicker
// @datepicker-day-hover-bg: #e6f7ff;
@datepicker-day-hover-bgc-value: #e6f7ff;


// form
// form item margin bottom
@form-group-margin-bottom-value: 12px;
// @form-group-margin-bottom: var(--form-item-margin-bottom, @form-group-margin-bottom-value);

// form item margin right
@form-inline-margin-right-value: 16px;

// form tip color
@form-tip-color-value: @gray-500;

// form tip font size
@form-tip-font-size: var(--form-tip-font-size, 14px);

// form label x align
@form-item-label-align-value: end;


// input
// disabled background color
@input-bg-disabled-value: #f5f6fb;
@input-bg-disabled: var(--input-bg-disabled, @input-bg-disabled-value);

// border color
@input-border-value: @gray-300-value;
@input-border: var(--input-border-color, @input-border-value);

// hover / focus / active
@input-border-focus-value: #197AFA;
@input-border-focus: var(--input-border-focus-color, @input-border-focus-value);

// placeholder color
@input-color-placeholder-value: @gray-400-value;
@input-color-placeholder: var(--input-placeholder-color, @input-color-placeholder-value);

@input-focus-width-value: 0px;
@input-focus-width: var(--input-focus-width, @input-focus-width-value);


// radio
// size
@radio-width-value: 16px;

// border width
@radio-border-width-value: 6px;

// inner width
@radio-inner-width-value: 0px;

// unlock border width
@radio-border-uncheck-width-value: 2px;

// color
@radio-text-color: var(--radio-text-color, @gray-900-value);


// select
// item color
@select-option-color-value: @gray-700-value;
@select-option-color: var(--select-option-color, @select-option-color-value);

// item backgroud
@select-option-bg-color: var(--select-option-bg-color, white);

// disabled background
@select-disabled-bg-color: var(--select-disabled-bg-color, white);

// disabled color
@select-disabled-color: var(--select-disabled-color, @gray-400-value);

// item active background
@select-option-active-bgc: var(--select-item-active-bg, white);

// item active color
@select-option-active-color: var(--select-item-active-color, @colors-primary);

// option hover
@select-option-hover-bg: var(--select-option-hover-bg, rgba(25, 122, 250, 0.1));
@select-option-hover-color: var(--select-option-hover-color, @colors-primary);

// compressed more hover bgc
@select-compressed-hover-bg: var(--select-compressed-hover-bg, @colors-primary);

// clear icon bgc
@select-clear-bg-color: var(--select-clear-bg-color, @gray-400-value);


// slider
// indicator bgc
@slider-indicator-bg: var(--slider-indicator-bg, #fff);

// indicator size
@slider-indicator-size-value: 16px;
@slider-indicator-size: var(--slider-indicator-size, @slider-indicator-size-value);

// bar bgc
@slider-bar-bgc: var(--slider-bar-color, @gray-200-value);

// disabled bar bgc
@slider-disabled-bar-bg: var(--slider-disabled-bar-bg, @gray-300-value);

// disabled indicator border color
@slider-disbaled-indicator-border-color: var(--slider-disbaled-indicator-border-color, @gray-300-value);

// disabled indicator bgc
@slider-disbaled-indicator-bg-value: rgb(204, 207, 215) none repeat scroll 0% 0% / auto padding-box border-box;
@slider-disbaled-indicator-bg: var(--slider-disbaled-indicator-bg, @slider-disbaled-indicator-bg-value);

// value bottom
@slider-value-bottom: var(--slider-value-bottom, 16px);

// border radius
@slider-border-radius: var(--slider-border-radius, 8px);


// switch
@switch-type: inner;
@switch-checked-bg: var(--switch-checked-bg, @colors-primary);
@switch-indicator-uncheck-bg: #fff;
@switch-indicator-checked-bg: var(--switch-indicator-checked-bg, #fff);
@switch-checked-box-shadow: var(--switch-checked-box-shadow, 0 1px 4px @gray-500-value);
// @switch-uncheck-box-shadow: 0 1px 4px @gray-500;
@switch-indicator-padding-horizontal: var(--switch-indicator-padding-horizontal, 2px);
@switch-indicator-padding-horizontal-negative: var(--switch-indicator-padding-horizontal-negative, -2px);
@switch-indicator-size: var(--switch-indicator-size, 18px);
@switch-bg-width: 44px;
@switch-bg-border-radius: (@switch-bg-width / 2);
@switch-bg-height: var(--switch-bg-height, 22px);
@switch-font-size: 12px;
@switch-indicator-top: var(--switch-indicator-top, 2px);

@switch-small-indicator-size: var(--switch-small-indicator-size, 12px);
@switch-small-bg-width: 28px;
@switch-small-bg-border-radius: @switch-small-bg-width / 2;
@switch-small-bg-height: var(--switch-small-bg-height, 16px);
@switch-small-indicator-top: var(--switch-small-indicator-top, 2px);

@switch-large-indicator-size: var(--switch-large-indicator-size, 24px);
@switch-large-bg-width: 60px;
@switch-large-bg-border-radius: (@switch-large-bg-width / 2);
@switch-large-bg-height: var(--switch-large-bg-height, 28px);
@switch-large-indicator-top: var(--switch-large-indicator-top, 2px);

@switch-small-indicator-padding: 0px;

// uncheck bgc
@switch-uncheck-bg: var(--switch-unchecked-bg, @gray-300-value);


// pagination
@pagination-hover-border-value: @colors-primary;
@pagination-hover-border: var(--pagination-hover-border, @pagination-hover-border-value);

@pagination-hover-bg-value: rgba(25, 122, 250, 0.1);
@pagination-hover-bg: var(--pagination-hover-bg, @pagination-hover-bg-value);

@pagination-hover-color-value: @colors-primary;
@pagination-hover-color: var(--pagination-hover-color, @pagination-hover-color-value);

@pagination-border-width-value: 0px;
@pagination-border-width: var(--pagination-border-width, @pagination-border-width-value);


// table
// head bgc
@table-head-bg-value: @gray-200-value;

// head color
@table-head-color-value: @gray-700-value;
@table-head-color: var(--table-head-color, @table-head-color-value);

// head font weight
@table-head-font-weight-value: 500;

// border color
@table-border-color-value: @gray-300;
@table-border-color: var(--table-border-color, @table-border-color-value);

// hover bgc
@table-bg-hover-value: #e8f1fe;
@table-bg-hover: var(--table-hover-bg, @table-bg-hover-value);

// selected bgc
@table-selected-row-bg: var(--table-selected-row-bg, #f3f8ff);

// color
@table-color-value: @gray-700-value;
@table-color: var(--table-color, @table-color-value);

// header cell padding
@table-header-cell-padding: var(--table-header-cell-padding, 8px);

// small cell padding
@table-small-cell-padding: var(--table-small-cell-padding, 4px 8px);

// cell padding x
@table-cell-padding-horizontal-value: 8px;
@table-cell-padding-horizontal: var(--table-cell-padding-horizontal, @table-cell-padding-horizontal-value);

// cell padding y
@table-cell-padding-vertical-value: 8px;
@table-cell-padding-vertical: var(--table-cell-padding-vertical, @table-cell-padding-vertical-value);

// fixed start / end
@table-fixed-start-color: var(--table-fixed-start-color, rgba(25, 122, 250, 0.15));
@table-fixed-end-color: var(--table-fixed-end-color, transparent);

// table even / odd
@table-even-td-bgc: var(--table-even-td-bgc, @gray-100-value);
@table-odd-td-bgc: var(--table-odd-td-bgc, #fff);

// margin bottom
@table-margin-bottom: var(--table-margin-bottom, 24px);

@table-cell-padding: 16px;
@table-head-border: 1px;
@table-condensed-cell-padding: 10px 16px;



// tree
// indicator color
@tree-indicator-color: var(--tree-indicator-color, @gray-400-value);

// Alert
@alert-padding-y-value: 8px;

// close color
@alert-close-color-value: @gray-400-value;
@alert-close-color: var(--alert-close-color, @alert-close-color-value);

// close hover color
@alert-close-hover-color-value: @gray-700-value;
@alert-close-hover-color: var(--alert-close-hover-color, @alert-close-hover-color-value);

// success box shadow
@alert-success-box-shadow-value: 0px 2px 4px 0px rgba(116, 209, 61, 0.1);
@alert-success-box-shadow: var(--alert-success-box-shadow, @alert-success-box-shadow-value);
// success text color
@alert-success-text-value: @gray-700-value;
@alert-success-text: var(--alert-success-text-color, @alert-success-text-value);
@alert-success-text-darken-10-value: darken(@alert-success-text-value, 10%);
@alert-success-text-darken-10: var(--alert-success-text-darken-10-color, @alert-success-text-darken-10-value);
// success bgc
@alert-success-bg-value: #edf9e8;
@alert-success-bg: var(--alert-success-bg, @alert-success-bg-value);
// success border color
@alert-success-border-value: rgba(82, 196, 26, 0.1);
@alert-success-border: var(--alert-success-border-color, @alert-success-border-value);
@alert-success-border-darken-5-value: darken(@alert-success-border-value, 5%);
@alert-success-border-darken-5: var(--alert-success-border-darken-5-color, @alert-success-border-darken-5-value);

// info
@alert-info-box-shadow-value:  0px 2px 4px 0px rgba(25, 122, 250, 0.1);
@alert-info-box-shadow: var(--alert-info-box-shadow, @alert-info-box-shadow-value);
// info text
@alert-info-text-value: @gray-700-value;
@alert-info-text: var(--alert-info-text-color, @alert-info-text-value);
@alert-info-text-darken-10-vlaue: darken(@alert-info-text-value, 10%);
@alert-info-text-darken-10: var(--alert-info-text-darken-10-color, @alert-info-text-darken-10-vlaue);
// info bgc
@alert-info-bg-value: #e8f1fe;
@alert-info-bg: var(--alert-info-bg, @alert-info-bg-value);
// border color
@alert-info-border-value: rgba(25, 122, 250, 0.1);
@alert-info-border: var(--alert-info-border-color, @alert-info-border-value);
@alert-info-border-darken-5-value: darken(@alert-info-border-value, 5%);
@alert-info-border-darken-5: var(--alert-info-border-darken-5-color, @alert-info-border-darken-5-value);

// warning
@alert-warning-box-shadow-value: 0px 2px 4px 0px rgba(255, 169, 64, 0.1);
@alert-warning-box-shadow: var(--alert-warning-box-shadow, @alert-warning-box-shadow-value);
// warn text
@alert-warning-text-value: @gray-700-value;
@alert-warning-text: var(--alert-warning-text-color, @alert-warning-text-value);
@alert-warning-text-darken-10-vlaue: darken(@alert-warning-text-value, 10%);
@alert-warning-text-darken-10: var(--alert-warning-text-darken-10-color, @alert-warning-text-darken-10-vlaue);
// warn bgc
@alert-warning-bg-value: #fff3e5;
@alert-warning-bg: var(--alert-warning-bg, @alert-warning-bg-value);
// warn border
@alert-warning-border-value: rgba(255, 140, 0, 0.1);
@alert-warning-border: var(--alert-warning-border-color, @alert-warning-border-value);
@alert-warning-border-darken-5-value: darken(@alert-warning-border-value, 5%);
@alert-warning-border-darken-5: var(--alert-warning-border-darken-5-color, @alert-warning-border-darken-5-value);

// danger
@alert-danger-box-shadow-value:  0px 2px 4px 0px rgba(255, 77, 80, 0.1);
@alert-danger-box-shadow: var(--alert-danger-box-shadow, @alert-danger-box-shadow-value);
// danger text
@alert-danger-text-value: @gray-700-value;
@alert-danger-text: var(--alert-danger-text-color, @alert-danger-text-value);
@alert-danger-text-darken-10-vlaue: darken(@alert-danger-text-value, 10%);
@alert-danger-text-darken-10: var(--alert-danger-text-darken-10-color, @alert-danger-text-darken-10-vlaue);
// danger bgc
@alert-danger-bg-value: #ffeded;
@alert-danger-bg: var(--alert-danger-bg, @alert-danger-bg-value);
// danger border
@alert-danger-border-value: rgba(255, 77, 80, 0.1);
@alert-danger-border: var(--alert-danger-border-color, @alert-danger-border-value);
@alert-danger-border-darken-5-value: darken(@alert-danger-border-value, 5%);
@alert-danger-border-darken-5: var(--alert-danger-border-darken-5-color, @alert-danger-border-darken-5-value);


// message
// box-shadow
@message-box-shadow-value:  0px 4px 8px 0px rgba(20, 23, 55, 0.15);
@message-box-shadow: var(--message-box-shadow, @message-box-shadow-value);

// close color
@message-close-color: var(--message-close-color, @gray-400);

// color
@message-text-color-value: @gray-700-value;
@message-text-color: var(--message-text-color, @message-text-color-value);

// border color
@message-border-color: var(--message-border-color, @gray-200-value);



// modal
// font family
@modal-title-font: var(--modal-title-font, inherit);

// font size
@modal-font-size: var(--modal-font-size, 14px);

// icon size
@modal-icon-size-value: 20px;
@modal-icon-size: var(--modal-icon-size, @modal-icon-size-value);

// icon top / left
@modal-icon-top: var(--modal-icon-top, 2px);
@modal-icon-left: var(--modal-icon-left, 0px);

// close icon color
@modal-close-icon-color-value: @gray-400-value;
@modal-close-icon-color: var(--modal-close-icon-color, @modal-close-icon-color-value);

// close icon hover
@modal-close-icon-hover-color-value: @colors-primary;
@modal-close-icon-hover-color: var(--modal-close-icon-hover-color, @modal-close-icon-hover-color-value);

// close icon top margin
@modal-close-top-margin: var(--modal-close-top-margin, 0px);

// close icon right margin
@modal-close-right-margin: var(--modal-close-right-margin, 0px);

// title font size
@modal-title-font-size-value: 16px;
@modal-title-font-size: var(--modal-title-font-size, @modal-title-font-size-value);

// padding
@modal-panel-padding-value: 24px;
@modal-panel-padding: var(--modal-panel-padding, @modal-panel-padding-value);

// header padding
@modal-header-padding: var(--modal-header-padding, 0px 24px 24px 0px);
@modal-header-padding-top: var(--modal-header-padding-top, 0px);
@modal-header-padding-right: var(--modal-header-padding-right, 24px);
@modal-header-padding-bottom: var(--modal-header-padding-bottom, 24px);
@modal-header-padding-left: var(--modal-header-padding-left, 0px);
// body padding
@modal-body-padding-top: var(--modal-body-padding-top, 0px);
@modal-body-padding-right: var(--modal-body-padding-right, 0px);
@modal-body-padding-bottom: var(--modal-body-padding-bottom, 0px);
@modal-body-padding-left: var(--modal-body-padding-left, 0px);
// footer padding
@modal-footer-padding: var(--modal-footer-padding, 24px 0px 0px);
// icon body padding
@modal-icon-body-padding: var(--modal-icon-body-padding, 0px 0px 0px 28px);
@modal-icon-body-padding-top: var(--modal-icon-body-padding-top, 0px);
@modal-icon-body-padding-right: var(--modal-icon-body-padding-right, 0px);
@modal-icon-body-padding-bottom: var(--modal-icon-body-padding-bottom, 0px);
@modal-icon-body-padding-left: var(--modal-icon-body-padding-left, 28px);

// border radius
@modal-border-radius: var(--modal-border-radius, 8px);

// border width
@modal-border-width: var(--modal-border-width, 0px);

// divider height / width
@modal-divider-height: var(--modal-divider-height, 0px);
@modal-divider-width: var(--modal-divider-width, 100%);

// border color
@modal-border-color: var(--modal-border-color, @gray-200-value);

// divider color
@modal-divider-color: var(--modal-divider-color, @gray-200-value);

// color
@modal-color: var(--modal-color, @gray-900-value);

// title color
@modal-title-color-value: @gray-800-value;
@modal-title-color: var(--modal-title-color, @modal-title-color-value);

// foot color / bgc
@modal-footer-bg: var(--modal-footer-bg, white);
@modal-footer-color: var(--modal-footer-color, @gray-900-value);

// box shadow
@modal-box-shadow: var(--modal-box-shadow, 0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%));

// modal title distance to the right
@modal-title-distance-to-right: 24px;

// popover
// border color
@popover-arrow-outer-color-value: @gray-200-value;
@popover-arrow-outer-color: var(--popover-border-color, @popover-arrow-outer-color-value);

// box shadow
@popover-box-shadow-value:  0px 4px 8px 0px rgba(20, 23, 55, 0.1);
@popover-box-shadow: var(--popover-box-shadow, @popover-box-shadow-value);

// text font size
@popover-text-font-size: var(--popover-text-font-size, 12px);




// tag
// bgc
@tag-bg-color: var(--tag-bg, @gray-200-value);

// success bgc
@tag-success-bg: var(--tag-success-bg, rgba(82, 196, 26, 0.15));
// info bgc
@tag-info-bg: var(--tag-info-bg, rgba(25, 122, 250, 0.1));
// warn
@tag-warning-bg: var(--tag-warning-bg, rgba(255, 140, 0, 0.1));
// danger
@tag-danger-bg: var(--tag-danger-bg, rgba(255, 77, 80, 0.1));


// color
@tag-color: var(--tag-color, @gray-700-value);
// success
@tag-success-color: var(--tag-success-color, @colors-success);
// info
@tag-info-color: var(--tag-info-color, @colors-primary);
// warn
@tag-warning-color: var(--tag-warning-color, @colors-warning);
// danger
@tag-danger-color: var(--tag-danger-color, @colors-danger);

// border color
@tag-border-color-value: rgba(232, 235, 240, 0);
@tag-border-color: var(--tag-border-color, @tag-border-color-value);

// close color
@tag-close-color-value: @gray-500-value;
@tag-close-color: var(--tag-close-color, @tag-close-color-value);

// close hover color
@tag-close-hover-color-value: @gray-700-value;
@tag-close-hover-color: var(--tag-close-hover-color, @tag-close-hover-color-value);

// border radius
@tag-border-radius-value: 4px;
@tag-border-radius: var(--tag-border-radius, @tag-border-radius-value);

// padding x
@tag-padding-x-value: 8px;
@tag-padding-x: var(--tag-padding-horizontal, @tag-padding-x-value);

// padding y
@tag-padding-y-value: 3px;
@tag-padding-y: var(--tag-padding-vertical, @tag-padding-y-value);

// font weight
@tag-font-weight-value: 400;
@tag-font-weight: var(--tag-font-weight, @tag-font-weight-value);

@tag-font-size: 80%;
@tag-input-padding-y: 2px;



// tooltip
// bgc
@tooltip-bg-value: rgba(20, 23, 55, 0.9);
@tooltip-bg: var(--tooltip-bg, @tooltip-bg-value);



// card
// font size
@card-font-size-value: 14px;
@card-font-size: var(--card-font-size, @card-font-size-value);

// padding
// header
@panel-header-padding-horizontal-value: 16px;
@panel-header-padding-horizontal: var(--panel-header-padding-horizontal, @panel-header-padding-horizontal-value);

@panel-header-padding-vertical-value: 16px;
@panel-header-padding-vertical: var(--panel-header-padding-vertical, @panel-header-padding-vertical-value);
// body
@panel-body-padding-horizontal-value: 16px;
@panel-body-padding-horizontal: var(--panel-body-padding-horizontal, @panel-body-padding-horizontal-value);

@panel-body-padding-vertical-value: 16px;
@panel-body-padding-vertical: var(--panel-body-padding-vertical, @panel-body-padding-vertical-value);
// footer
@panel-footer-padding-horizontal-value: 16px;
@panel-footer-padding-horizontal: var(--panel-footer-padding-horizontal, @panel-footer-padding-horizontal-value);

@panel-footer-padding-vertical-value: 16px;
@panel-footer-padding-vertical: var(--panel-footer-padding-vertical, @panel-footer-padding-vertical-value);

// border radius
@panel-border-radius-value: 8px;
@panel-border-radius: var(--panel-border-radius, @panel-border-radius-value);

// divider
// height
@card-divider-height-value: 0px;
@card-divider-height: var(--card-divider-height, @card-divider-height-value);
// width
@card-divider-width-value: 0;
@card-divider-width: var(--card-divider-width, @card-divider-width-value);

// border color
@card-border-color-value: @gray-200-value;
@card-border-color: var(--card-border-color, @card-border-color-value);

// divider color
@card-divider-color: var(--card-divider-color, @gray-200-value);

// text color
@card-color-value: @gray-700-value;
@card-color: var(--card-color, @card-color-value);

// box shadow
@panel-box-shadow-value:  0px 4px 8px 0px rgba(20, 23, 55, 0.1);
@panel-box-shadow: var(--card-box-shadow, @panel-box-shadow-value);

// header color
@card-header-color-value: @gray-800-value;
@card-header-color: var(--card-header-color, @card-header-color-value);

// footer color
@card-footer-color-value: @gray-700-value;
@card-footer-color: var(--card-footer-color, @card-footer-color-value);




// menu
// dark bgc
@menu-dark-bg-value: #070922;
@menu-dark-bg: var(--menu-dark-bg, @menu-dark-bg-value);

@menu-root-node-bgc: var(--menu-root-node-bgc, #141737);

@menu-children-segmentation: var(--menu-children-segmentation, #293053);

// dark color
@menu-dark-item-value: rgba(255, 255, 255, 0.7);
@menu-dark-item: var(--menu-dark-color, @menu-dark-item-value);

// dark ative bgc
@menu-dark-active-bg-value: @colors-primary;
@menu-dark-active-bg: var(--menu-dark-acitve-bg, @menu-dark-active-bg-value);

// active bgc
@menu-item-active-bg-value: rgba(25, 122, 250, 0.1);
@menu-item-active-bg: var(--menu-item-active-bg, @menu-item-active-bg-value);

// active color
@menu-item-active-color-value: @colors-primary;
@menu-item-active-color: var(--menu-item-active-color, @menu-item-active-color-value);

// color
@menu-item-color-value: @gray-900-value;
@menu-item-color: var(--menu-item-color, @menu-item-color-value);

// item dark hover color
@menu-item-dark-hover-bgc: var(--menu-item-dark-hover-bgc, fade(@colors-primary-value, 50%));

@menu-title-transform: translateY(-75%) rotate(45deg);
@menu-title-transform-origin: 75% 75%;
@menu-title-open-transform: translateY(-75%) rotate(225deg);
@menu-title-vertical-transform: translateY(-75%) rotate(-45deg);
@menu-title-vertical-transform: translateY(-75%) rotate(-45deg);
@menu-title-vertical-transform-rtl: translateY(-75%) rotate(135deg);

@menu-caret-solid-width: 4px;
@menu-caret-solid-height: 4px;







//breadcrumb
@breadcrumb-bg: transparent;
@breadcrumb-a-color: rgba(0, 0, 0, 0.45);
@breadcrumb-active-color: rgba(0, 0, 0, 0.85);




@caret-width: 6px;

@ease-in-out: 0.3s;