128 lines
2.7 KiB
SCSS
128 lines
2.7 KiB
SCSS
/**
|
||
* dark-blue 主题下的 Element Plus SCSS 变量
|
||
* 在此查阅所有可自定义的变量：https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
|
||
*/
|
||
|
||
@use "sass:map";
|
||
@use "sass:math";
|
||
@use "element-plus/theme-chalk/src/mixins/function.scss" as *;
|
||
@use "element-plus/theme-chalk/src/mixins/_var.scss" as *;
|
||
@use "element-plus/theme-chalk/src/mixins/mixins.scss" as *;
|
||
@use "./variables.scss" as *;
|
||
|
||
// 生成指定颜色的明亮/黑暗颜色
|
||
@mixin set-color-mix-level($type, $number, $mode: "light", $mix-color: $color-white) {
|
||
$colors: map.deep-merge(
|
||
(
|
||
$type: (
|
||
"#{$mode}-#{$number}": mix($mix-color, map.get($colors, $type, "base"), math.percentage(math.div($number, 10)))
|
||
)
|
||
),
|
||
$colors
|
||
) !global;
|
||
}
|
||
|
||
$types: primary, success, warning, danger, error, info;
|
||
|
||
$color: $theme-color;
|
||
$success: #01efb7bb;
|
||
|
||
$colors: () !default;
|
||
$colors: map.deep-merge(
|
||
(
|
||
"white": #ffffff,
|
||
"primary": (
|
||
"base": $color
|
||
),
|
||
"success": (
|
||
"base": $success
|
||
)
|
||
),
|
||
$colors
|
||
);
|
||
|
||
// text
|
||
$text-color-base: #fff;
|
||
$text-color: () !default;
|
||
$text-color: map.merge(
|
||
(
|
||
"primary": rgba($text-color-base, 0.8),
|
||
"regular": rgba($text-color-base, 0.8),
|
||
"secondary": rgba($text-color-base, 0.8),
|
||
"placeholder": rgba($text-color-base, 0.8),
|
||
"disabled": rgba($text-color-base, 0.3)
|
||
),
|
||
$text-color
|
||
);
|
||
|
||
// 生成 --el-color-${type}-light-i
|
||
@each $type in (primary) {
|
||
@for $i from 1 through 9 {
|
||
@include set-color-mix-level($type, $i, "light", #021633);
|
||
}
|
||
// --el-color-${type}-dark-2
|
||
@include set-color-mix-level($type, 2, "dark", #000);
|
||
}
|
||
|
||
// border
|
||
$border: () !default;
|
||
$border: map.merge(
|
||
(
|
||
"": #01efb755,
|
||
"light": #01efb755,
|
||
"lighter": #01efb755
|
||
),
|
||
$border
|
||
);
|
||
|
||
// fill
|
||
$fill-color: () !default;
|
||
$fill-color: map.merge(
|
||
(
|
||
"": #01efb710,
|
||
"light": #01efb710,
|
||
"blank": #031e47
|
||
),
|
||
$fill-color
|
||
);
|
||
|
||
// background
|
||
$bg-color: () !default;
|
||
$bg-color: map.merge(
|
||
(
|
||
"": #021633,
|
||
"overlay": #021633
|
||
),
|
||
$bg-color
|
||
);
|
||
|
||
// mask
|
||
$mask-color: () !default;
|
||
$mask-color: map.merge(
|
||
(
|
||
"": rgba(0, 0, 0, 0.5)
|
||
),
|
||
$mask-color
|
||
);
|
||
|
||
// button
|
||
$button: () !default;
|
||
$button: map.merge(
|
||
(
|
||
"disabled-text-color": rgba(255, 255, 255, 0.5)
|
||
),
|
||
$button
|
||
);
|
||
|
||
html.dark-blue {
|
||
@include set-css-color-type($colors, "primary");
|
||
@include set-component-css-var("text-color", $text-color);
|
||
@include set-component-css-var("border-color", $border);
|
||
@include set-component-css-var("fill-color", $fill-color);
|
||
@include set-component-css-var("bg-color", $bg-color);
|
||
@include set-component-css-var("mask-color", $mask-color);
|
||
@include b(button) {
|
||
@include set-component-css-var("button", $button);
|
||
}
|
||
}
|