// 【scss】配置，静态变量，项目构建依赖
// 主题色
$color-primary                      :   #2d8cf0 !default;
$toning-ratio                       :   5.5% !default;
$color-light-primary                :   lighten($color-primary, $toning-ratio) !default;
$color-dark-primary                 :   darken($color-primary, $toning-ratio) !default;
// 辅助色
$color-info                         :   #2db7f5 !default;
$color-success                      :   #19be6b !default;
$color-warning                      :   #ff9900 !default;
$color-error                        :   #ed4014 !default;
// 中性色
$color-default-title                :   #262626 !default;
$color-default-text                 :   #404040 !default;
$color-default-sub                  :   #777777 !default;
$color-default-placeholder          :   #7f7f7f !default;
$color-default-disabled             :   #cbcbcb !default;
$color-default-border               :   #e4e4e4 !default;
$color-default-divider              :   #eaeaea !default;
$color-default-background           :   #fcfcfc !default;

// 中性色基准色，默认为主题色
$color-neutral                      :   $color-primary !default;
// 获取主题色相
$color-primary-hue                  :   hue($color-neutral);
// 中性色饱和度， 当值为0%时则饱和度为0，色阶为黑白灰。当值向大调时中性色将混入一定饱和度的主题色
$color-neutral-saturate             :   0% !default;
/*
* 构建中性色
*
*/
// 标题色(title)，正文色(text)，辅助色/图标色(sub)，占位符(placeholder)，失效色(disabled)，边框(border)，分割线(dirvider)，背景色(background)，阴影(shadow)
$color-title                        :   adjust-hue(saturate($color-default-title,$color-neutral-saturate),$color-primary-hue) !default;
$color-text                         :   adjust-hue(saturate($color-default-text,$color-neutral-saturate),$color-primary-hue) !default;
$color-sub                          :   adjust-hue(saturate($color-default-sub,$color-neutral-saturate),$color-primary-hue) !default;
$color-placeholder                  :   adjust-hue(saturate($color-default-placeholder,$color-neutral-saturate),$color-primary-hue) !default;
$color-disabled                     :   adjust-hue(saturate($color-default-disabled,$color-neutral-saturate),$color-primary-hue) !default;
$color-border                       :   adjust-hue(saturate($color-default-border,$color-neutral-saturate),$color-primary-hue) !default;
$color-divider                      :   adjust-hue(saturate($color-default-divider,$color-neutral-saturate),$color-primary-hue) !default;
$color-background                   :   adjust-hue(saturate($color-default-background,$color-neutral-saturate),$color-primary-hue) !default;
$color-shadow                       :   rgba(0,0,0,0.25) !default;
$color-mask                         :   rgba(0,0,0,0.25) !default;



// 【css】变量，动态变量，项目运行依赖 「#001」
body{
    /*
    * 默认
    */
    --color-primary                             :   #{$color-primary};
    --color-light-primary                       :   #{$color-light-primary};
    --color-dark-primary                        :   #{$color-dark-primary};
    --color-title                               :   #{$color-title};
    --color-text                                :   #{$color-text};
    --color-sub                                 :   #{$color-sub};
    --color-placeholder                         :   #{$color-placeholder};
    --color-disabled                            :   #{$color-disabled};
    --color-border                              :   #{$color-border};
    --color-divider                             :   #{$color-divider};
    --color-background                          :   #{$color-background};
    --color-shadow                              :   rgba(0,0,0,0.25);
    --color-mask                                :   rgba(0,0,0,0.25);
    /*
    * light
    */
    --light-color-light-primary                 :   #{$color-light-primary};
    --light-color-dark-primary                  :   #{$color-dark-primary};
    --light-color-title                         :   #{$color-title};
    --light-color-text                          :   #{$color-text};
    --light-color-sub                           :   #{$color-sub};
    --light-color-placeholder                   :   #{$color-placeholder};
    --light-color-disabled                      :   #{$color-disabled};
    --light-color-border                        :   #{$color-border};
    --light-color-divider                       :   #{$color-divider};
    --light-color-background                    :   #{$color-background};
    --light-color-shadow                        :   rgba(0,0,0,0.25);
    --light-color-mask                          :   rgba(0,0,0,0.25);
    /*
    * dark 见 @core/commponents/dark
    */
    --dark-color-light-primary                  :   #{$color-dark-primary};
    --dark-color-dark-primary                   :   #{$color-light-primary};
    --dark-color-title                          :   #{$color-background};
    --dark-color-text                           :   #{$color-divider};
    --dark-color-sub                            :   #{$color-border};
    --dark-color-placeholder                    :   #{$color-disabled};
    --dark-color-disabled                       :   #{$color-placeholder};
    --dark-color-border                         :   #{$color-sub};
    --dark-color-divider                        :   #{$color-text};
    --dark-color-background                     :   #{$color-title};
    --dark-color-shadow                         :   rgba(0,0,0,0.75);
    --dark-color-mask                           :   rgba(255,255,255,0.25);
}