shineout 1.12.2 → 1.12.3

package/esm/styles/themes/cssvar.less

@@ -0,0 +1,735 @@
+@font-size-base-value: 14px;
+@font-size-base: var(--font-size-base, @font-size-base-value);
+@font-size-base-26: var(--font-size-base-26, floor((@font-size-base-value * 2.6)));
+@font-size-base-215: var(--font-size-base-215, floor((@font-size-base-value * 2.15)));
+@font-size-base-17: var(--font-size-base-17, floor((@font-size-base-value * 1.7)));
+@font-size-base-125: var(--font-size-base-125, floor((@font-size-base-value * 1.25)));
+@font-size-base-085: var(--font-size-base-085, floor((@font-size-base-value * 0.85)));
+@font-size-base-15: var(--font-size-base-15, floor((@font-size-base-value * 1.5)));
+@font-size-base-45: var(--font-size-base-45, floor((@font-size-base-value * 4.5)));
+@font-size-large-value: ceil((@font-size-base-value * 1.25));
+@font-size-large: var(--font-size-large, @font-size-large-value);
+@font-size-small-value: ceil((@font-size-base-value * 0.85));
+@font-size-large-medium: var(--font-size-large-medium, @font-size-base-value + 2);
+@font-size-small: var(--font-size-small, @font-size-small-value);
+
+@button-default-border-color-fade-0-value: fade(@btn-default-border-color-value, 0);
+@button-default-border-color-fade-60-value: fade(@btn-default-border-color-value, 60%);
+@button-default-border-fade-0: var(--button-default-border-fade-0, @button-default-border-color-fade-0-value);
+@button-default-border-fade-60: var(--button-default-border-fade-60, @button-default-border-color-fade-60-value);
+
+@primary-color-dark-5-value: darken(@colors-primary-value, 5%);
+@primary-color-dark-15-value: darken(@colors-primary-value, 15%);
+@primary-color-dark-btn-hover-value: darken(@colors-primary-value, @btn-hover-darken);
+@primary-color-lighten-40-value: lighten(@colors-primary-value, 40%);
+@primary-color-fade-60-value: fade(@colors-primary-value, 60%);
+@primary-color-fade-50-value: fade(@colors-primary-value, 50%);
+@primary-color-fade-10-value: fade(@colors-primary-value, 10%);
+@primary-color-fade-5-value: fade(@colors-primary-value, 5%);
+@primary-color-fade-0-value: fade(@colors-primary-value, 0);
+@primary-color-dark-5_fade-60-value: fade(darken(@colors-primary-value, 5%), 60%);
+@primary-color-dark-5_fade-0-value: fade(darken(@colors-primary-value, 5%), 0%);
+@primary-color-dark-5: var(--primary-color-dark-5, @primary-color-dark-5-value);
+@primary-color-dark-15: var(--primary-color-dark-15, @primary-color-dark-15-value);
+@primary-color-dark-btn-hover: var(--primary-color-dark-btn-hover, @primary-color-dark-btn-hover-value);
+@primary-color-lighten-40: var(--primary-color-lighten-40, @primary-color-lighten-40-value);
+@primary-color-fade-60: var(--primary-color-fade-60, @primary-color-fade-60-value);
+@primary-color-fade-50: var(--primary-color-fade-50, @primary-color-fade-50-value);
+@primary-color-fade-10: var(--primary-color-fade-10, @primary-color-fade-10-value);
+@primary-color-fade-5: var(--primary-color-fade-5, @primary-color-fade-5-value);
+@primary-color-fade-0: var(--primary-color-fade-0, @primary-color-fade-0-value);
+@primary-color-dark-5_fade-60: var(--primary-color-dark-5_fade-60, @primary-color-dark-5_fade-60-value);
+@primary-color-dark-5_fade-0: var(--primary-color-dark-5_fade-0, @primary-color-dark-5_fade-0-value);
+
+@secondary-color-dark-5-value: darken(@colors-secondary-value, 5%);
+@secondary-color-dark-btn-hover-value: darken(@colors-secondary-value, @btn-hover-darken);
+@secondary-color-dark-5_fade-60-value: fade(darken(@colors-secondary-value, 5%), 60%);
+@secondary-color-dark-5_fade-0-value: fade(darken(@colors-secondary-value, 5%), 0%);
+@secondary-color-dark-5: var(--secondary-color-dark-5, @secondary-color-dark-5-value);
+@secondary-color-dark-btn-hover: var(--secondary-color-dark-btn-hover, @secondary-color-dark-btn-hover-value);
+@secondary-color-dark-5_fade-60: var(--secondary-color-dark-5_fade-60, @secondary-color-dark-5_fade-60-value);
+@secondary-color-dark-5_fade-0: var(--secondary-color-dark-5_fade-0, @secondary-color-dark-5_fade-0-value);
+@success-color-dark-5-value: darken(@colors-success-value, 5%);
+@success-color-fade-60-value: fade(@colors-success-value, 60%);
+@success-color-dark-5_fade-60-value: fade(darken(@colors-success-value, 5%), 60%);
+@success-color-fade-0-value: fade(@colors-success-value, 0);
+@success-color-dark-5_fade-0-value: fade(darken(@colors-success-value, 5%), 0%);
+@success-color-dark-btn-hover-value: darken(@colors-success-value, @btn-hover-darken);
+@success-color-dark-5: var(--success-color-dark-5, @success-color-dark-5-value);
+@success-color-fade-60: var(--success-color-fade-60, @success-color-fade-60-value);
+@success-color-dark-5_fade-60: var(--success-color-dark-5_fade-60, @success-color-dark-5_fade-60-value);
+@success-color-fade-0: var(--success-color-fade-0, @success-color-fade-0-value);
+@success-color-dark-5_fade-0: var(--success-color-dark-5_fade-0, @success-color-dark-5_fade-0-value);
+@success-color-dark-btn-hover: var(--success-color-dark-btn-hover, @success-color-dark-btn-hover-value);
+
+@info-color-dark-5-value: darken(@colors-info-value, 5%);
+@info-color-dark-btn-hover-value: darken(@colors-info-value, @btn-hover-darken);
+@info-color-fade-60-value: fade(@colors-info-value, 60%);
+@info-color-fade-0-value: fade(@colors-info-value, 0);
+@info-color-dark-5_fade-0-value: fade(darken(@colors-info-value, 5%), 0%);
+@info-color-dark-5_fade-60-value: fade(darken(@colors-info-value, 5%), 60%);
+@info-color-dark-5: var(--info-color-dark-5, @info-color-dark-5-value);
+@info-color-dark-btn-hover: var(--info-color-dark-btn-hover, @info-color-dark-btn-hover-value);
+@info-color-fade-60: var(--info-color-fade-60, @info-color-fade-60-value);
+@info-color-fade-0: var(--info-color-fade-0, @info-color-fade-0-value);
+@info-color-dark-5_fade-0: var(--info-color-dark-5_fade-0, @info-color-dark-5_fade-0-value);
+@info-color-dark-5_fade-60: var(--info-color-dark-5_fade-60, @info-color-dark-5_fade-60-value);
+
+@warning-color-dark-5-value: darken(@colors-warning-value, 5%);
+@warning-color-dark-btn-hover-value: darken(@colors-warning-value, @btn-hover-darken);
+@warning-color-fade-60-value: fade(@colors-warning-value, 60%);
+@warning-color-fade-0-value: fade(@colors-warning-value, 0);
+@warning-color-dark-5_fade-0-value: fade(darken(@colors-warning-value, 5%), 0%);
+@warning-color-dark-5_fade-60-value: fade(darken(@colors-warning-value, 5%), 60%);
+@warning-color-dark-5: var(--warning-color-dark-5, @warning-color-dark-5-value);
+@warning-color-dark-btn-hover: var(--warning-color-dark-btn-hover, @warning-color-dark-btn-hover-value);
+@warning-color-fade-60: var(--warning-color-fade-60, @warning-color-fade-60-value);
+@warning-color-fade-0: var(--warning-color-fade-0, @warning-color-fade-0-value);
+@warning-color-dark-5_fade-0: var(--warning-color-dark-5_fade-0, @warning-color-dark-5_fade-0-value);
+@warning-color-dark-5_fade-60: var(--warning-color-dark-5_fade-60, @warning-color-dark-5_fade-60-value);
+
+@danger-color-dark-5-value: darken(@colors-danger-value, 5%);
+@danger-color-fade-25-value: fade(@colors-danger-value, 25%);
+@danger-color-dark-btn-hover-value: darken(@colors-danger-value, @btn-hover-darken);
+@danger-color-fade-60-value: fade(@colors-danger-value, 60%);
+@danger-color-fade-0-value: fade(@colors-danger-value, 0);
+@danger-color-dark-5_fade-0-value: fade(darken(@colors-danger-value, 5%), 0%);
+@danger-color-dark-5_fade-60-value: fade(darken(@colors-danger-value, 5%), 60%);
+@danger-color-dark-5: var(--danger-color-dark-5, @danger-color-dark-5-value);
+@danger-color-fade-25: var(--danger-color-fade-25, @danger-color-fade-25-value);
+@danger-color-dark-btn-hover: var(--danger-color-dark-btn-hover, @danger-color-dark-btn-hover-value);
+@danger-color-fade-60: var(--danger-color-fade-60, @danger-color-fade-60-value);
+@danger-color-fade-0: var(--danger-color-fade-0, @danger-color-fade-0-value);
+@danger-color-dark-5_fade-0: var(--danger-color-dark-5_fade-0, @danger-color-dark-5_fade-0-value);
+@danger-color-dark-5_fade-60: var(--danger-color-dark-5_fade-60, @danger-color-dark-5_fade-60-value);
+
+@checkbox-margin-right-value: 24px;
+@checkbox-margin-right: var(--checkbox-margin-right, @checkbox-margin-right-value);
+
+@checkbox-border-width-value: 1px;
+@checkbox-border-width: var(--checkbox-border-width, @checkbox-border-width-value);
+@checkinput-color: var(--checkinput-color, @gray-900);
+
+@checkinput-text-padding-x: 8px;
+@checkbox-text-padding-x: var(--checkbox-text-padding-x, @checkinput-text-padding-x);
+@checkbox-indicator-border-radius: var(--checkbox-indicator-border-radius, @checkbox-border-radius);
+
+@checkbox-disabled-bgc: var(--checkbox-disabled-bgc, #E8EBF0);
+@checkbox-checked-disabled-bgc: var(--checkbox-checked-disabled-bgc, @checkbox-border-color);
+
+@radio-width-value: @checkbox-size + 2;
+@radio-width: var(--radio-width, @radio-width-value);
+
+@radio-inner-width-value: @checkbox-size - 6;
+@radio-inner-width: var(--radio-inner-width, @radio-inner-width-value);
+
+@radio-border-width-value: 1px;
+@radio-border-width: var(--radio-border-width, @radio-border-width-value);
+
+@radio-border-uncheck-width-value: @radio-border-width-value;
+@radio-border-uncheck-width: var(--radio-border-uncheck-width, @radio-border-uncheck-width-value);
+
+@radio-text-color: var(--radio-text-color, @checkinput-color);
+
+// radio button group
+@radio-button-group-color: var(--radio-button-group-color, @button-default-text-color);
+@radio-button-group-bgc: var(--radio-button-group-bgc, @btn-default-bg);
+@radio-button-group-border-color: var(--radio-button-group-border-color, @btn-default-border);
+@radio-button-group-border-radius: var(--radio-button-group-border-radius, @btn-border-radius-base);
+// active
+@radio-button-group-active-color: var(--radio-button-group-active-color, @btn-primary-color);
+@radio-button-group-active-bgc: var(--radio-button-group-active-bgc, @btn-primary-bg);
+@radio-button-group-active-border-color: var(--radio-button-group-active-border-color, @btn-primary-border);
+
+@button-disabled-bg-value: #f5f5f5;
+@button-disabled-bg: var(--button-disabled-bg, @button-disabled-bg-value);
+
+@button-disabled-opacity: 1;
+@button-disabled-delimiter: var(--button-disabled-delimiter, #d9d9d9);
+
+@button-disabled-color-value: rgba(0, 0, 0, 0.45);
+@button-disabled-color: var(--button-disabled-color, @button-disabled-color-value);
+
+@button-font-size-base-value: @font-size-base;
+@button-font-size-base: var(--button-font-size-base, @button-font-size-base-value);
+
+@button-font-size-small-value: @font-size-small;
+@button-font-size-small: var(--button-font-size-small, @button-font-size-small-value);
+
+@button-margin-left-value: 12px;
+@button-margin-left: var(--button-margin-left, @button-margin-left-value);
+
+@button-spin-margin-value: 8px;
+@button-spin-margin: var(--button-spin-margin, @button-spin-margin-value);
+
+@button-padding-base-horizontal-7-value: @button-padding-base-horizontal-value * 0.7;
+@button-padding-base-horizontal-7: var(--button-padding-base-horizontal-7, @button-padding-base-horizontal-7-value);
+
+@button-default-text-color: var(--button-default-text-color, @btn-default-color);
+
+@button-disabled-border-color: var(--button-disabled-border-color, #d9d9d9);
+
+@pagination-border-radius-value: @border-radius-base;
+@pagination-border-radius: var(--pagination-border-radius, @pagination-border-radius-value);
+
+@pagination-border-width-value: 1px;
+@pagination-border-width: var(--pagination-border-width, @pagination-border-width-value);
+
+@pagination-hover-color-value: @colors-primary-value;
+@pagination-hover-color: var(--pagination-hover-color, @pagination-hover-color-value);
+
+@pagination-size: var(--pagination-size, @pagination-width);
+@pagination-size-small: var(--pagination-size-small, @pagination-small-width);
+@pagination-size-large: var(--pagination-size-large, @pagination-large-width);
+@pagination-font-size: var(--pagination-font-size, @font-size-base);
+
+
+@carousel-indicator-position-value: 10px;
+@carousel-indicator-position: var(--carousel-indicator-position, @carousel-indicator-position-value);
+
+@table-scroll-ratio-value: 100px;
+@table-scroll-ratio: var(--table-scroll-ratio, @table-scroll-ratio-value);
+
+@table-row-spacing-value: 0;
+@table-row-spacing: var(--table-row-spacing, @table-row-spacing-value);
+
+@table-row-border-radius-value: 0;
+@table-row-border-radius: var(--table-row-border-radius, @table-row-border-radius-value);
+
+@table-head-bg-value: #fafafa;
+@table-head-bg: var(--table-head-bg, @table-head-bg-value);
+
+@table-border-radius-top-value: 0;
+@table-border-radius-top: var(--table-border-radius-top, @table-border-radius-top-value);
+
+@table-head-font-weight-value: bold;
+@table-head-font-weight: var(--table-head-font-weight, @table-head-font-weight-value);
+
+@table-fixed-start-color: var(--table-fixed-start-color, rgba(0, 0, 0, 0.15));
+@table-fixed-end-color: var(--table-fixed-end-color, rgba(0, 0, 0, 0));
+
+@table-selected-row-bg: var(--table-selected-row-bg, #fff);
+
+@table-tree-expand-icon-margin-right: var(--table-tree-expand-icon-margin-right, 8px);
+@table-body-bg: var(--table-body-bg, @table-bg);
+@table-header-cell-padding: var(--table-header-cell-padding, @table-condensed-cell-padding);
+@table-small-cell-padding: var(--table-small-cell-padding, @table-header-cell-padding);
+
+@table-even-td-bgc: var(--table-even-td-bgc, @table-bg-accent);
+@table-odd-td-bgc: var(--table-odd-td-bgc, #fff);
+
+@table-margin-bottom: var(--table-margin-bottom, @line-height-computed);
+@table-header-top-divider-width: var(--table-header-top-divider-width, 0);
+
+@tooltip-bg-value: #000;
+@tooltip-bg: var(--tooltip-bg, @tooltip-bg-value);
+
+@tooltip-padding-x-value: 8px;
+@tooltip-padding-x: var(--tooltip-padding-horizontal, @tooltip-padding-x-value);
+
+@tooltip-padding-y-value: 3px;
+@tooltip-padding-y: var(--tooltip-padding-vertical, @tooltip-padding-y-value);
+
+@input-border-radius-value: @border-radius-base;
+@input-border-radius: var(--input-border-radius, @input-border-radius-value);
+
+@input-dropdown-border-radius-value: @border-radius-base;
+@input-dropdown-border-radius: var(--input-dropdown-border-radius, @input-dropdown-border-radius-value);
+
+@input-border-focus-fade-25-value: fade(@input-border-focus-value, 25%);
+@input-border-focus-fade-25: var(--input-border-focus-color-fade-25, @input-border-focus-fade-25-value);
+
+@input-size-placeholder-value: 14px;
+@input-size-placeholder: var(--input-placeholder-size, @input-size-placeholder-value);
+
+@input-color-value: #333E59;
+@input-color: var(--input-text-color, @input-color-value);
+
+@input-clear-bg-color: var(--input-clear-bg-color, @gray-400-value);
+
+@input-clear-bg-hover-color-value: @colors-primary-value;
+@input-clear-bg-hover-color: var(--input-clear-bg-hover-color, @input-clear-bg-hover-color-value);
+
+@input-disabled-color: var(--input-disabled-color, #999DA8);
+
+@input-underline-height: var(--input-underline-height, 1px);
+
+@dropdown-border-width-value: 1px;
+@dropdown-border-width: var(--dropdown-border-width, @dropdown-border-width-value);
+
+@dropdown-columns-padding: var(--dropdown-columns-padding, 0);
+
+@dropdown-options-hover-bgc: var(--dropdown-options-hover-bgc, @dropdown-link-hover-bg);
+@dropdown-options-hover-color: var(--dropdown-options-hover-color, @dropdown-link-hover-color);
+
+@select-result-padding-vertical-value: 0;
+@select-result-padding-vertical: var(--select-result-padding-vertical, @select-result-padding-vertical-value);
+
+@select-result-space-value: 4px;
+@select-result-space: var(--select-result-padding-horizontal, @select-result-space-value);
+
+@select-result-space-16-value: 20px;
+@select-result-space-16: var(--select-result-padding-horizontal-16, @select-result-space-16-value);
+
+@select-clear-bg-color-value: @gray-400-darken-20-value;
+@select-clear-bg-color: var(--select-clear-bg-color, @select-clear-bg-color-value);
+
+@select-option-active-bgc: @dropdown-link-active-bg;
+@select-option-active-color: @dropdown-link-active-color;
+
+@select-option-bg-color: var(--select-option-bg-color, transparent);
+@select-disabled-bg-color: var(--select-disabled-bg-color, @input-bg-disabled-value);
+@select-tree-disabled-bg-color: var(--select-tree-disabled-bg-color, @input-bg-disabled-value);
+@select-disabled-color: var(--select-disabled-color, @select-option-color-value);
+@select-compressed-hover-bg: var(--select-compressed-hover-bg, @primary-color-fade-60-value);
+@select-popover-result-padding: var(--select-popover-result-padding, 8px 8px 3px 12px);
+
+@select-tree-content-color-value: @gray-600;
+@select-tree-content-color: var(--select-tree-content-color, @select-tree-content-color-value);
+
+@select-tree-disabled-content-color-value: @gray-600;
+@select-tree-disabled-content-color: var(--select-tree-disabled-content-color, @select-tree-disabled-content-color-value);
+
+@select-tree-icon-hover-bg-color-value: @gray-100;
+@select-tree-icon-hover-bg-color: var(--select-tree-icon-hover-bg-color, @select-tree-icon-hover-bg-color-value);
+
+@select-tree-node-hover-bg: var(--select-tree-node-hover-bg, @primary-color-fade-10);
+@select-tree-node-hover-color: var(--select-tree-node-hover-color, @select-tree-content-color-value);
+@select-tree-node-selected-bg: var(--select-tree-node-selected-bg, @primary-color-fade-10);
+@select-tree-node-selected-color: var(--select-tree-node-selected-color, @colors-primary);
+
+
+
+@datepicker-rect-active-border-radius-value: 2px;
+@datepicker-rect-active-border-radius: var(
+  --datepicker-rect-active-border-radius,
+  @datepicker-rect-active-border-radius-value
+);
+
+@datepicker-day-hover-bg: var(--datepicker-day-hover-bgc, @datepicker-day-hover-bgc-value);
+
+@slider-indicator-bg-value: #fff;
+@slider-indicator-bg: var(--slider-indicator-bg, @slider-indicator-bg-value);
+
+@slider-indicator-size-value: 14px;
+@slider-indicator-size: var(--slider-indicator-size, @slider-indicator-size-value);
+
+@slider-indicator-size-half-value: (@slider-indicator-size-value / 2);
+@slider-indicator-size-half: var(--slider-indicator-size-half, @slider-indicator-size-half-value);
+
+@slider-bar-color-value: @gray-400-value;
+@slider-bar-color: var(--slider-bar-color, @slider-bar-color-value);
+@slider-bar-bgc: var(--slider-bar-color, @slider-bar-color-value);
+
+@slider-height-value: 6px;
+@slider-height: var(--slider-bar-height, @slider-height-value);
+
+@slider-border-radius-value: 3px;
+@slider-border-radius: var(--slider-border-radius, @slider-border-radius-value);
+
+@slider-value-bottom-value: 14px;
+@slider-value-bottom: var(--slider-value-bottom, @slider-value-bottom-value);
+
+@slider-indicator-box-shadow: var(--slider-indicator-box-shadow, none);
+@slider-disabled-bar-bg: var(--slider-disabled-bar-bg, @gray-500-value);
+@slider-disbaled-indicator-border-color: var(--slider-disbaled-indicator-border-color, @slider-disabled-bar-bg);
+@slider-disbaled-indicator-bg: var(--slider-disbaled-indicator-bg, @slider-indicator-bg);
+
+@form-group-margin-bottom-value: 20px;
+@form-group-margin-bottom: var(--form-item-margin-bottom, @form-group-margin-bottom-value);
+
+@form-Item-min-keep-height-value: 24px;
+@form-Item-min-keep-height: var(--form-Item-min-keep-height, @form-Item-min-keep-height-value);
+
+@form-inline-margin-right-value: 20px;
+@form-inline-margin-right: var(--form-item-margin-right, @form-inline-margin-right-value);
+
+@form-tip-color-value: lighten(@gray-900-value, 40%);
+@form-tip-color: var(--form-tip-color, @form-tip-color-value);
+
+@form-tip-font-size: var(--form-tip-font-size, @form-help-font-size);
+
+@form-item-label-align-value: start;
+@form-item-label-align: var(--form-item-label-align, @form-item-label-align-value);
+
+@form-item-error-line-height: var(--form-item-error-line-height, @line-height-base);
+@form-item-error-margin-top: var(--form-item-error-margin-top, 5px);
+@form-item-error-margin-bottom: var(--form-item-error-margin-bottom, 8px);
+
+@gray-100-value: #f8f9fa;
+@gray-200-value: #e9ecef;
+@gray-300-value: #dee2e6;
+@gray-400-value: #ced4da;
+@gray-500-value: #adb5bd;
+@gray-600-value: #6c757d;
+@gray-700-value: #495057;
+@gray-800-value: #343a40;
+@gray-900-value: #212529;
+@gray-800-darken-5-value: darken(@gray-800-value, 5%);
+@gray-600-lighten-15-value: lighten(@gray-600-value, 15%);
+@gray-200-darken-5-value: darken(@gray-200-value, 5%);
+@gray-900-lighten-40-value: lighten(@gray-900-value, 40%);
+@gray-400-darken-20-value: darken(@gray-400-value, 20%);
+@gray-300-darken-hover-value: darken(@gray-300-value, @btn-hover-darken);
+@gray-300-fade-60-value: fade(@gray-300-value, 60%);
+@gray-300-fade-0-value: fade(@gray-300-value, 0%);
+
+@gray-100: var(--gray-100, @gray-100-value);
+@gray-200: var(--gray-200, @gray-200-value);
+@gray-300: var(--gray-300, @gray-300-value);
+@gray-400: var(--gray-400, @gray-400-value);
+@gray-500: var(--gray-500, @gray-500-value);
+@gray-600: var(--gray-600, @gray-600-value);
+@gray-700: var(--gray-700, @gray-700-value);
+@gray-800: var(--gray-800, @gray-800-value);
+@gray-900: var(--gray-900, @gray-900-value);
+@gray-800-darken-5: var(--gray-800-darken-5, @gray-800-darken-5-value);
+@gray-600-lighten-15: var(--gray-600-lighten-15, @gray-600-lighten-15-value);
+@gray-200-darken-5: var(--gray-200-darken-5, @gray-200-darken-5-value);
+@gray-900-lighten-40: var(--gray-900-lighten-40, @gray-900-lighten-40-value);
+@gray-400-darken-20: var(--gray-400-darken-20, @gray-400-darken-20-value);
+@gray-300-darken-hover: var(--gray-300-darken-hover, @gray-300-darken-hover-value);
+@gray-300-fade-60: var(--gray-300-fade-60, @gray-300-fade-60-value);
+@gray-300-fade-0: var(--gray-300-fade-0, @gray-300-fade-0-value);
+
+@menu-item-height-value: 40px;
+@menu-item-height: var(--menu-item-height, @menu-item-height-value);
+
+@menu-dark-active-bg-value: @colors-primary-value;
+@menu-dark-active-bg: var(--menu-dark-acitve-bg, @menu-dark-active-bg-value);
+
+@menu-active-padding-horizontal-value: 0;
+@menu-active-padding-horizontal: var(--menu-active-padding-horizontal, @menu-active-padding-horizontal-value);
+
+@menu-active-padding-horizontal-negative: var(--menu-active-padding-horizontal-negative, 0);
+
+@menu-active-padding-vertical-value: 0;
+@menu-active-padding-vertical: var(--menu-active-padding-vertical, @menu-active-padding-vertical-value);
+
+@menu-active-border-radius-value: 0;
+@menu-active-border-radius: var(--menu-active-border-radius, @menu-active-border-radius-value);
+
+@menu-item-font-size-value: 14px;
+@menu-item-font-size: var(--menu-item-font-size, @menu-item-font-size-value);
+
+@menu-item-color-value: @gray-900-value;
+@menu-item-color: var(--menu-item-color, @menu-item-color-value);
+
+@menu-item-light-hover-color: var(--menu-item-light-hover-color, @menu-highlight-color);
+@menu-item-light-hover-bgc: var(--menu-item-light-hover-bgc, fade(@colors-primary-value, 5%));
+@menu-item-dark-hover-color: var(--menu-item-dark-hover-color, #fff);
+@menu-item-dark-hover-bgc: var(--menu-item-dark-hover-bgc, fade(@colors-primary-value, 50%));
+
+@menu-active-bar: var(--menu-active-bar, 3px);
+
+@menu-active-bar-color: var(--menu-item-active-indicator, @colors-primary);
+@menu-dark-active-bar-color: var(--menu-dark-item-active-indicator, @colors-primary);
+
+@menu-root-node-bgc: var(--menu-root-node-bgc, transparent);
+
+@menu-children-segmentation: var(--menu-children-segmentation, transparent);
+
+@menu-vertical-dark-parent-active-bgc: var(--menu-vertical-dark-parent-active-bgc, #020B18);
+
+@menu-item-has-children-active-bgc: var(--menu-item-has-children-active-bgc, @colors-primary);
+@menu-item-has-children-active-color: var(--menu-item-has-children-active-color, #fff);
+
+// vertical menu in-path bar
+@menu-vertical-in-path-bar-width: var(--menu-vertical-in-path-bar-width, 4px);
+
+@alert-border-width-value: 1px;
+@alert-border-width: var(--alert-border-width, @alert-border-width-value);
+
+@alert-success-bg-value: @state-success-bg;
+@alert-success-bg: var(--alert-success-bg, @alert-success-bg-value);
+
+@alert-success-text-value: @state-success-text;
+@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);
+
+@alert-success-border-value: @state-success-border;
+@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);
+
+@alert-success-box-shadow-value: 'none';
+@alert-success-box-shadow: var(--alert-success-box-shadow, @alert-success-box-shadow-value);
+
+@alert-info-bg-value: @state-info-bg;
+@alert-info-bg: var(--alert-info-bg, @alert-info-bg-value);
+
+@alert-info-text-value: @state-info-text;
+@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);
+
+@alert-info-border-value: @state-info-border;
+@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);
+
+@alert-info-box-shadow-value: 'none';
+@alert-info-box-shadow: var(--alert-info-box-shadow, @alert-info-box-shadow-value);
+
+@alert-warning-bg-value: @state-warning-bg;
+@alert-warning-bg: var(--alert-warning-bg, @alert-warning-bg-value);
+
+@alert-warning-text-value: @state-warning-text;
+@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);
+
+@alert-warning-border-value: @state-warning-border;
+@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);
+
+@alert-warning-box-shadow-value: 'none';
+@alert-warning-box-shadow: var(--alert-warning-box-shadow, @alert-warning-box-shadow-value);
+
+@alert-danger-bg-value: @state-danger-bg;
+@alert-danger-bg: var(--alert-danger-bg, @alert-danger-bg-value);
+
+@alert-danger-text-value: @state-danger-text;
+@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);
+
+@alert-danger-border-value: @state-danger-border;
+@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);
+
+@alert-danger-box-shadow-value: 'none';
+@alert-danger-box-shadow: var(--alert-danger-box-shadow, @alert-danger-box-shadow-value);
+
+@alert-box-shadow-value: 'none';
+@alert-box-shadow: var(--alert-box-shadow, @alert-box-shadow-value);
+
+@alert-font-size-value: @font-size-base;
+@alert-font-size: var(--alert-font-size, @alert-font-size-value);
+
+@alert-border-radius-value: @border-radius-base;
+@alert-border-radius: var(--alert-border-radius, @alert-border-radius-value);
+
+@alert-close-color-value: rgba(0, 0, 0, 0.3);
+@alert-close-color: var(--alert-close-color, @alert-close-color-value);
+
+@alert-close-hover-color-value: rgba(0, 0, 0, 0.8);
+@alert-close-hover-color: var(--alert-close-hover-color, @alert-close-hover-color-value);
+
+@alert-icon-margin-top-value: 2px;
+@alert-icon-margin-top: var(--alert-icon-margin-top, @alert-icon-margin-top-value);
+
+@alert-padding-x-value:  16px;
+@alert-padding-x: var(--alert-padding-x, @alert-padding-x-value);
+
+@alert-padding-y-value:  15px;
+@alert-padding-y: var(--alert-padding-y, @alert-padding-y-value);
+
+@message-text-color-value: @alert-default-text;
+@message-text-color: var(--message-text-color, @message-text-color-value);
+
+@message-font-weight-value: 400;
+@message-font-weight: var(--message-font-weight, @message-font-weight-value);
+
+@message-close-color: var(--message-close-color, @alert-close-color-value);
+@message-border-color: var(--message-border-color, @alert-default-border);
+
+@message-icon-margin-top-value: @alert-icon-margin-top;
+@message-icon-margin-top: var(--message-icon-margin-top, @message-icon-margin-top-value);
+
+@card-border-width-value: 1px;
+@card-border-width: var(--card-border-width, @card-border-width-value);
+
+@card-border-color-value: @panel-default-border;
+@card-border-color: var(--card-border-color, @card-border-color-value);
+
+@card-color-value: 'inherit';
+@card-color: var(--card-color, @card-color-value);
+
+@card-font-size-value: 'inherit';
+@card-font-size: var(--card-font-size, @card-font-size-value);
+
+@card-divider-height-value: 1px;
+@card-divider-height: var(--card-divider-height, @card-divider-height-value);
+
+@card-divider-width-value: 100%;
+@card-divider-width: var(--card-divider-width, @card-divider-width-value);
+
+@card-header-bg-value: #fff;
+@card-header-bg: var(--card-header-bg, @card-header-bg-value);
+
+@card-footer-bg-value: #fff;
+@card-footer-bg: var(--card-footer-bg, @card-footer-bg-value);
+
+@card-header-color-value: @card-color-value;
+@card-header-color: var(--card-header-color, @card-header-color-value);
+
+@card-footer-color-value: @card-color-value;
+@card-footer-color: var(--card-footer-color, @card-footer-color-value);
+@card-divider-color: var(--card-divider-color, @panel-inner-border);
+
+@panel-box-shadow-value: 0 2px 8px rgba(0, 0, 0, 0.1);
+@panel-box-shadow: var(--card-box-shadow, @panel-box-shadow-value);
+
+@modal-icon-size-value: 24px;
+@modal-icon-size: var(--modal-icon-size, @modal-icon-size-value);
+
+@modal-title-font-size-value: ceil((@font-size-base-value * 1.125));
+@modal-title-font-size: var(--modal-title-font-size, @modal-title-font-size-value);
+
+@modal-title-color-value: rgba(0, 0, 0, 0.85);
+@modal-title-color: var(--modal-title-color, @modal-title-color-value);
+
+@modal-close-icon-color-value: #000;
+@modal-close-icon-color: var(--modal-close-icon-color, @modal-close-icon-color-value);
+
+@modal-close-icon-hover-color-value: #000;
+@modal-close-icon-hover-color: var(--modal-close-icon-hover-color, @modal-close-icon-hover-color-value);
+
+@modal-panel-padding-value: 0;
+@modal-panel-padding: var(--modal-panel-padding, @modal-panel-padding-value);
+
+@modal-font-size: var(--modal-font-size, inherit);
+@modal-divider-height: var(--modal-divider-height, 1px);
+@modal-divider-width: var(--modal-divider-width, 100%);
+@modal-border-width: var(--modal-border-width, 1px);
+@modal-border-color: var(--modal-border-color, @panel-default-border);
+@modal-color: var(--modal-color, inherit);
+@modal-box-shadow: var(--modal-box-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
+@modal-header-bg: var(--modal-header-bg, #fff);
+@modal-footer-bg: var(--modal-footer-bg, #fff);
+@modal-header-color: var(--modal-header-color, @card-color-value);
+@modal-footer-color: var(--modal-footer-color, @card-color-value);
+@modal-icon-body-padding: var(--modal-icon-body-padding, 40px 40px 20px 70px);
+@modal-icon-body-padding-top: var(--modal-icon-body-padding-top, 40px);
+@modal-icon-body-padding-right: var(--modal-icon-body-padding-right, 40px);
+@modal-icon-body-padding-bottom: var(--modal-icon-body-padding-bottom, 20px);
+@modal-icon-body-padding-left: var(--modal-icon-body-padding-left, 70px);
+
+@modal-divider-color: var(--modal-divider-color, @panel-inner-border);
+@modal-icon-top: var(--modal-icon-top, 40px);
+@modal-icon-left: var(--modal-icon-left, 32px);
+@modal-title-font: var(--modal-title-font, inherit);
+@modal-title-distance-to-right:  0px;
+@modal-drawer-padding: 16px;
+@modal-drawer-header-vertical-padding: 12px;
+@modal-method-header-padding-right: var(--modal-method-header-padding-right, @modal-title-distance-to-right);
+
+@popover-arrow-outer-color-value: @gray-300-value;
+@popover-arrow-outer-color: var(--popover-border-color, @popover-arrow-outer-color-value);
+
+@popover-border-width-value: 1px;
+@popover-border-width: var(--popover-border-width, @popover-border-width-value);
+
+@popover-box-shadow-value: 0 5px 10px rgba(0, 0, 0, 0.2);
+@popover-box-shadow: var(--popover-box-shadow, @popover-box-shadow-value);
+
+@popover-border-radius-value: @border-radius-base;
+@popover-border-radius: var(--popover-border-radius, @popover-border-radius-value);
+
+@popover-text-max-width-value: 320px;
+@popover-text-max-width: var(--popover-text-max-width, @popover-text-max-width-value);
+
+@popover-text-font-size: var(--popover-text-font-size, @font-size-small);
+
+@tag-close-color-value: '#000';
+@tag-close-color: var(--tag-close-color, @tag-close-color-value);
+
+@tag-close-hover-color-value: '#000';
+@tag-close-hover-color: var(--tag-close-hover-color, @tag-close-hover-color-value);
+
+@tag-font-weight-value: 600;
+@tag-font-weight: var(--tag-font-weight, @tag-font-weight-value);
+
+@tag-bg-color: var(--tag-bg, #fafafa);
+@tag-color: var(--tag-color, #595959);
+@tag-success-bg: var(--tag-success-bg, @colors-success);
+@tag-info-bg: var(--tag-info-bg, @colors-info);
+@tag-warning-bg: var(--tag-warning-bg, @colors-warning);
+@tag-danger-bg: var(--tag-danger-bg, @colors-danger);
+
+@tag-success-color: var(--tag-success-color, #fff);
+@tag-info-color: var(--tag-info-color, #fff);
+@tag-warning-color: var(--tag-warning-color, #fff);
+@tag-danger-color: var(--tag-danger-color, #fff);
+
+@tree-level-indent-value: 0;
+@tree-level-indent: var(--tree-level-indent, @tree-level-indent-value);
+
+@tree-node-margin-bottom-value: 4px;
+@tree-node-margin-bottom: var(--tree-node-margin-bottom, @tree-node-margin-bottom-value);
+
+@tree-indicator-color: var(--tree-indicator-color, @gray-600);
+
+@switch-uncheck-bg: var(--switch-unchecked-bg, @gray-400-value);
+
+@common-content-text-padding-value: 8px 12px;
+@common-content-text-padding: var(--common-content-text-padding, @common-content-text-padding-value);
+
+@common-input-delay-value: 400px;
+@common-input-delay: var(--common-input-delay, @common-input-delay-value);
+
+@common-input-trim-value: 0;
+@common-input-trim: var(--common-input-trim, @common-input-trim-value);
+
+@common-body-font-family-value: @font-family-sans-serif;
+@common-body-font-family: var(--common-body-font-family, @common-body-font-family-value);
+
+@common-spin-default-name: var(--common-spin-default-name, default);
+
+@common-line-height-value: 1.428571429;
+@line-height-base: var(--common-line-height, @common-line-height-value);
+
+// tabs
+@tabs-link-padding: 10px 15px;
+
+@tabs-tab-padding-y-value: 10px;
+@tabs-tab-padding-y: var(--tabs-tab-padding-y, @tabs-tab-padding-y-value);
+
+@tabs-tab-padding-x-value: 15px;
+@tabs-tab-padding-x: var(--tabs-tab-padding-x, @tabs-tab-padding-x-value);
+
+@tabs-link-spacing: 4px;
+@tabs-tab-spacing: var(--tabs-tab-spacing, @tabs-link-spacing);
+
+@tabs-tab-background-value: transparent;
+@tabs-tab-background: var(--tabs-tab-background, @tabs-tab-background-value);
+
+@tabs-tab-active-background-value: #fff;
+@tabs-tab-active-background: var(--tabs-tab-active-background, @tabs-tab-active-background-value);
+
+@tabs-tab-border-color-value: transparent;
+@tabs-tab-border-color: var(--tabs-tab-border-color, @tabs-tab-border-color-value);
+
+@tabs-tab-active-border-color-value: #ddd;
+@tabs-tab-active-border-color: var(--tabs-tab-active-border-color, @tabs-tab-active-border-color-value);
+
+@tabs-tab-color-value: initial;
+@tabs-tab-color: var(--tabs-tab-color, @tabs-tab-color-value);
+
+@tabs-tab-active-color-value: #333;
+@tabs-tab-active-color: var(--tabs-tab-active-color, @tabs-tab-active-color-value);
+
+@tabs-tab-font-size-value: inherit;
+@tabs-tab-font-size: var(--tabs-tab-font-size, @tabs-tab-font-size-value);
+
+@cascader-active-background-color: var(--cascader-active-background-color, @dropdown-link-active-bg);
+@cascader-active-color: var(--cascader-active-color, @dropdown-link-active-color);
+
+
+// list
+@list-item-bottom-border-width: var(--list-item-bottom-border-width, 1px);
+@list-item-hover-bgc: var(--list-item-hover-bgc,  rgba(25, 122, 250, 0.1));
+
+//divider
+@divider-width-base: 1px; // width of the border for a component
+@divider-text-padding: 1em;
+@divider-orientation-margin: 5%;
+@divider-color: var(--divider-color, #f0f0f0);
+
+
+// progress
+@progress-bg-color: var(--progress-bgc, @gray-200);