From 7020a864f6f345ca766c369e67fb0b5bde6d1e4a Mon Sep 17 00:00:00 2001 From: CHENZL Date: Thu, 25 May 2023 18:36:20 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=A8=E6=B7=B1=E8=93=9D?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E4=B8=8B=EF=BC=8Cprimary=20=E9=A2=9C?= =?UTF-8?q?=E8=89=B2=E5=90=84=E7=A7=8D=E7=8A=B6=E6=80=81=20(#81)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/theme/dark-blue/element-plus.css | 11 ++++++ src/styles/theme/dark-blue/element-plus.scss | 38 +++++++++++++++++++- 2 files changed, 48 insertions(+), 1 deletion(-) diff --git a/src/styles/theme/dark-blue/element-plus.css b/src/styles/theme/dark-blue/element-plus.css index b07cd65..37800c6 100644 --- a/src/styles/theme/dark-blue/element-plus.css +++ b/src/styles/theme/dark-blue/element-plus.css @@ -7,6 +7,12 @@ html.dark-blue { /** color */ --el-color-primary: #01efb7bb; + --el-color-primary-light-3: rgba(1, 147, 127, 0.8133333333); + --el-color-primary-light-5: rgba(2, 102, 99, 0.8666666667); + --el-color-primary-light-7: rgba(2, 65, 77, 0.92); + --el-color-primary-light-8: rgba(2, 49, 68, 0.9466666667); + --el-color-primary-light-9: rgba(2, 35, 59, 0.9733333333); + --el-color-primary-dark-2: rgba(1, 167, 128, 0.7866666667); --el-color-success: #01efb7bb; /** text-color */ --el-text-color-primary: rgba(255, 255, 255, 0.8); @@ -28,3 +34,8 @@ html.dark-blue { /** mask */ --el-mask-color: rgba(0, 0, 0, 0.5); } + +/** button */ +html.dark-blue .el-button { + --el-button-disabled-text-color: rgba(255, 255, 255, 0.5); +} diff --git a/src/styles/theme/dark-blue/element-plus.scss b/src/styles/theme/dark-blue/element-plus.scss index 877294e..0e2b504 100644 --- a/src/styles/theme/dark-blue/element-plus.scss +++ b/src/styles/theme/dark-blue/element-plus.scss @@ -4,10 +4,24 @@ */ @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; @@ -16,6 +30,7 @@ $success: #01efb7bb; $colors: () !default; $colors: map.deep-merge( ( + "white": #ffffff, "primary": ( "base": $color ), @@ -40,6 +55,15 @@ $text-color: map.merge( $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( @@ -81,11 +105,23 @@ $mask-color: map.merge( $mask-color ); +// button +$button: () !default; +$button: map.merge( + ( + "disabled-text-color": rgba(255, 255, 255, 0.5) + ), + $button +); + html.dark-blue { - @include set-css-var-value(("color", "primary"), $color); + @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); + } }