From 9e083ff79d58271493c64e68b5f30f3bc3902cb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Wed, 13 Apr 2022 14:40:01 +0800
Subject: [PATCH] fix: tag bg color & other dark details (#7138)

* fix: tag bg color & other dark details

* chore: use 0 instead of 0px
---
 docs/examples/date-picker/custom-content.vue  |  4 +-
 docs/examples/upload/avatar.vue               |  2 +-
 packages/components/empty/src/img-empty.vue   |  2 +-
 packages/theme-chalk/src/badge.scss           | 26 ++++++-----
 packages/theme-chalk/src/cascader.scss        |  7 ++-
 packages/theme-chalk/src/check-tag.scss       |  2 +-
 packages/theme-chalk/src/color-picker.scss    | 45 +++++++++++++++++--
 packages/theme-chalk/src/common/var.scss      |  2 -
 packages/theme-chalk/src/dark/css-vars.scss   |  4 ++
 packages/theme-chalk/src/dark/var.scss        | 19 ++++++++
 .../src/date-picker/time-spinner.scss         |  2 +-
 packages/theme-chalk/src/option.scss          |  4 --
 packages/theme-chalk/src/result.scss          |  2 -
 packages/theme-chalk/src/tag.scss             | 44 +++++++++---------
 packages/theme-chalk/src/upload.scss          |  4 +-
 15 files changed, 116 insertions(+), 53 deletions(-)

diff --git a/docs/examples/date-picker/custom-content.vue b/docs/examples/date-picker/custom-content.vue
index b383eeb25c..c1f64ca60a 100644
--- a/docs/examples/date-picker/custom-content.vue
+++ b/docs/examples/date-picker/custom-content.vue
@@ -54,14 +54,14 @@ const isHoliday = ({ dayjs }) => {
   border-radius: 50%;
 }
 .cell.current .text {
-  background: purple;
+  background: #626aef;
   color: #fff;
 }
 .cell .holiday {
   position: absolute;
   width: 6px;
   height: 6px;
-  background: red;
+  background: var(--el-color-danger);
   border-radius: 50%;
   bottom: 0px;
   left: 50%;
diff --git a/docs/examples/upload/avatar.vue b/docs/examples/upload/avatar.vue
index 3cc119a7f2..f0098cef7f 100644
--- a/docs/examples/upload/avatar.vue
+++ b/docs/examples/upload/avatar.vue
@@ -49,7 +49,7 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
 
 <style>
 .avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
+  border: 1px dashed var(--el-border-color);
   border-radius: 6px;
   cursor: pointer;
   position: relative;
diff --git a/packages/components/empty/src/img-empty.vue b/packages/components/empty/src/img-empty.vue
index 5b95c0d1ea..0bae4c4a6d 100644
--- a/packages/components/empty/src/img-empty.vue
+++ b/packages/components/empty/src/img-empty.vue
@@ -88,7 +88,7 @@
             height="36"
           />
           <g id="Rectangle-Copy-17" transform="translate(53.000000, 45.000000)">
-            <mask :id="`mask-4-${id}`" fill="var(--el-empty-fill-color-0)">
+            <mask :id="`mask-4-${id}`" fill="white">
               <use :xlink:href="`#path-3-${id}`" />
             </mask>
             <use
diff --git a/packages/theme-chalk/src/badge.scss b/packages/theme-chalk/src/badge.scss
index 2800b07563..08eb9c0429 100644
--- a/packages/theme-chalk/src/badge.scss
+++ b/packages/theme-chalk/src/badge.scss
@@ -13,22 +13,24 @@
   display: inline-block;
 
   @include e(content) {
-    background-color: var(--el-badge-bg-color);
-    border-radius: var(--el-badge-radius);
-    color: var(--el-color-white);
-    display: inline-block;
-    font-size: var(--el-badge-font-size);
-    height: var(--el-badge-size);
-    line-height: var(--el-badge-size);
-    padding: 0 var(--el-badge-padding);
-    text-align: center;
+    background-color: getCssVar('badge', 'bg-color');
+    border-radius: getCssVar('badge', 'radius');
+    color: getCssVar('color', 'white');
+
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    font-size: getCssVar('badge', 'font-size');
+    height: getCssVar('badge', 'size');
+    padding: 0 getCssVar('badge', 'padding');
     white-space: nowrap;
-    border: 1px solid var(--el-color-white);
+    border: 1px solid getCssVar('bg-color');
 
     @include when(fixed) {
       position: absolute;
       top: 0;
-      right: calc(1px + var(--el-badge-size) / 2);
+      right: calc(1px + #{getCssVar('badge', 'size')} / 2);
       transform: translateY(-50%) translateX(100%);
 
       @include when(dot) {
@@ -46,7 +48,7 @@
 
     @each $type in (primary, success, warning, info, danger) {
       @include m($type) {
-        background-color: var(--el-color-#{$type});
+        background-color: getCssVar('color', $type);
       }
     }
   }
diff --git a/packages/theme-chalk/src/cascader.scss b/packages/theme-chalk/src/cascader.scss
index 47df897b61..af4c5cd282 100644
--- a/packages/theme-chalk/src/cascader.scss
+++ b/packages/theme-chalk/src/cascader.scss
@@ -212,13 +212,16 @@
     min-width: 60px;
     margin: 2px 0 2px map.get($input-padding-horizontal, 'default')-$border-width;
     padding: 0;
-    color: var(--el-cascader-menu-text-color);
+    color: getCssVar('cascader', 'menu-text-color');
     border: none;
     outline: none;
     box-sizing: border-box;
 
+    background: transparent;
+
     &::placeholder {
-      color: var(--el-text-color-placeholder);
+      // two input overlap
+      color: transparent;
     }
   }
 }
diff --git a/packages/theme-chalk/src/check-tag.scss b/packages/theme-chalk/src/check-tag.scss
index b80b576dbb..3104d99ea0 100644
--- a/packages/theme-chalk/src/check-tag.scss
+++ b/packages/theme-chalk/src/check-tag.scss
@@ -21,7 +21,7 @@
 
   @include when(checked) {
     background-color: getCssVar('color', 'primary', 'light-8');
-    color: getCssVar('color', 'primary', 'light-1');
+    color: getCssVar('color', 'primary');
     &:hover {
       background-color: getCssVar('color', 'primary', 'light-7');
     }
diff --git a/packages/theme-chalk/src/color-picker.scss b/packages/theme-chalk/src/color-picker.scss
index ee522ece72..4de1095a1f 100644
--- a/packages/theme-chalk/src/color-picker.scss
+++ b/packages/theme-chalk/src/color-picker.scss
@@ -146,19 +146,44 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
   }
 }
 
+@mixin alpha-bg {
+  background-image: linear-gradient(
+      45deg,
+      getCssVar('color-picker', 'alpha-bg-a') 25%,
+      getCssVar('color-picker', 'alpha-bg-b') 25%
+    ),
+    linear-gradient(
+      135deg,
+      getCssVar('color-picker', 'alpha-bg-a') 25%,
+      getCssVar('color-picker', 'alpha-bg-b') 25%
+    ),
+    linear-gradient(
+      45deg,
+      getCssVar('color-picker', 'alpha-bg-b') 75%,
+      getCssVar('color-picker', 'alpha-bg-a') 75%
+    ),
+    linear-gradient(
+      135deg,
+      getCssVar('color-picker', 'alpha-bg-b') 75%,
+      getCssVar('color-picker', 'alpha-bg-a') 75%
+    );
+  background-size: 12px 12px;
+  background-position: 0 0, 6px 0, 6px -6px, 0 6px;
+}
+
 @include b(color-alpha-slider) {
   position: relative;
   box-sizing: border-box;
   width: 280px;
   height: 12px;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+  @include alpha-bg;
 
   @include e(bar) {
     position: relative;
     background: linear-gradient(
       to right,
       rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 1) 100%
+      getCssVar('bg-color') 100%
     );
     height: 100%;
   }
@@ -288,7 +313,8 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     text-align: center;
 
     @include when(alpha) {
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+      @include alpha-bg;
+      // background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
     }
   }
 
@@ -326,3 +352,16 @@ $color-picker-size: map.merge($common-component-size, $color-picker-size);
     }
   }
 }
+
+.#{bem('color-picker')},
+.#{bem('color-picker', 'panel')} {
+  @include set-css-var-value(('color-picker', 'alpha-bg-a'), '#ccc');
+  @include set-css-var-value(('color-picker', 'alpha-bg-b'), 'transparent');
+}
+
+.dark {
+  .#{bem('color-picker')},
+  .#{bem('color-picker', 'panel')} {
+    @include set-css-var-value(('color-picker', 'alpha-bg-a'), '#333333');
+  }
+}
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 7a804a8ca9..58bed276dc 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -1235,7 +1235,6 @@ $avatar-size: map.merge(
 );
 
 // Empty
-
 // css3 var in packages/theme-chalk/src/empty.scss
 $empty: () !default;
 $empty: map.merge(
@@ -1259,7 +1258,6 @@ $empty: map.merge(
 );
 
 // Descriptions
-
 // css3 var in packages/theme-chalk/src/descriptions.scss
 $descriptions: () !default;
 $descriptions: map.merge(
diff --git a/packages/theme-chalk/src/dark/css-vars.scss b/packages/theme-chalk/src/dark/css-vars.scss
index cb6008611b..7b8e32b7b8 100644
--- a/packages/theme-chalk/src/dark/css-vars.scss
+++ b/packages/theme-chalk/src/dark/css-vars.scss
@@ -35,3 +35,7 @@ html.dark {
 @include dark(card) {
   @include set-component-css-var('card', $card);
 }
+
+@include dark(empty) {
+  @include set-component-css-var('empty', $empty);
+}
diff --git a/packages/theme-chalk/src/dark/var.scss b/packages/theme-chalk/src/dark/var.scss
index e641a29b1f..df2330cd17 100644
--- a/packages/theme-chalk/src/dark/var.scss
+++ b/packages/theme-chalk/src/dark/var.scss
@@ -167,3 +167,22 @@ $card: map.merge(
   ),
   $card
 );
+
+// Empty
+// css3 var in packages/theme-chalk/src/empty.scss
+$empty: () !default;
+$empty: map.merge(
+  (
+    'fill-color-0': getCssVar('color-black'),
+    'fill-color-1': #262629,
+    'fill-color-2': #34363b,
+    'fill-color-3': #1e1e20,
+    'fill-color-4': #171719,
+    'fill-color-5': #3b3c42,
+    'fill-color-6': #373a3e,
+    'fill-color-7': #191c1f,
+    'fill-color-8': #202225,
+    'fill-color-9': #171719,
+  ),
+  $empty
+);
diff --git a/packages/theme-chalk/src/date-picker/time-spinner.scss b/packages/theme-chalk/src/date-picker/time-spinner.scss
index 766d191935..9bf31e38ef 100644
--- a/packages/theme-chalk/src/date-picker/time-spinner.scss
+++ b/packages/theme-chalk/src/date-picker/time-spinner.scss
@@ -30,7 +30,7 @@
       }
 
       .#{$namespace}-time-spinner__item:hover:not(.is-disabled):not(.is-active) {
-        background: $color-white;
+        background: getCssVar('fill-color', 'light');
         cursor: default;
       }
     }
diff --git a/packages/theme-chalk/src/option.scss b/packages/theme-chalk/src/option.scss
index 5f56c1c347..5c73f81c42 100644
--- a/packages/theme-chalk/src/option.scss
+++ b/packages/theme-chalk/src/option.scss
@@ -21,10 +21,6 @@
     @include when(disabled) {
       color: map.get($select-option, 'disabled-color');
       cursor: not-allowed;
-
-      &:hover {
-        background-color: var(--el-color-white);
-      }
     }
 
     &.hover,
diff --git a/packages/theme-chalk/src/result.scss b/packages/theme-chalk/src/result.scss
index 0fef18f7fb..7d87a2bff8 100644
--- a/packages/theme-chalk/src/result.scss
+++ b/packages/theme-chalk/src/result.scss
@@ -2,8 +2,6 @@
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 
-$types: success, warning, danger, info, error;
-
 @include b(result) {
   @include set-component-css-var('result', $result);
 }
diff --git a/packages/theme-chalk/src/tag.scss b/packages/theme-chalk/src/tag.scss
index 9a405e1b9d..baddbd66be 100644
--- a/packages/theme-chalk/src/tag.scss
+++ b/packages/theme-chalk/src/tag.scss
@@ -21,19 +21,14 @@ $tag-icon-span-gap: map.merge(
 );
 
 @function returnVarList($var, $type: 'primary') {
-  $list: ('color', 'white');
+  $list: ('fill-color', 'blank');
   @if $var != false {
     $list: ('color', $type, $var);
   }
   @return $list;
 }
 // false mean --el-color-white
-@mixin genTheme(
-  $backgroundColorWeight,
-  $borderColorWeight,
-  $textColorWeight,
-  $hoverColorWeight
-) {
+@mixin genTheme($backgroundColorWeight, $borderColorWeight, $hoverColorWeight) {
   @include css-var-from-global(
     ('tag', 'bg-color'),
     returnVarList($backgroundColorWeight)
@@ -42,17 +37,13 @@ $tag-icon-span-gap: map.merge(
     ('tag', 'border-color'),
     returnVarList($borderColorWeight)
   );
-  @include css-var-from-global(
-    ('tag', 'text-color'),
-    returnVarList($textColorWeight)
-  );
   @include css-var-from-global(
     ('tag', 'hover-color'),
     returnVarList($hoverColorWeight)
   );
 
   @each $type in $types {
-    &.#{$namespace}-tag--#{$type} {
+    &.#{bem('tag', '', $type)} {
       @include css-var-from-global(
         ('tag', 'bg-color'),
         returnVarList($backgroundColorWeight, $type)
@@ -61,10 +52,6 @@ $tag-icon-span-gap: map.merge(
         ('tag', 'border-color'),
         returnVarList($borderColorWeight, $type)
       );
-      @include css-var-from-global(
-        ('tag', 'text-color'),
-        returnVarList($textColorWeight, $type)
-      );
       @include css-var-from-global(
         ('tag', 'hover-color'),
         returnVarList($hoverColorWeight, $type)
@@ -74,7 +61,15 @@ $tag-icon-span-gap: map.merge(
 }
 
 @include b(tag) {
-  @include genTheme('light-9', 'light-8', '', '');
+  @include genTheme('light-9', 'light-8', '');
+
+  @include css-var-from-global(('tag', 'text-color'), ('color', 'primary'));
+  @each $type in $types {
+    &.#{bem('tag', '', $type)} {
+      @include css-var-from-global(('tag', 'text-color'), ('color', $type));
+    }
+  }
+
   @include when(hit) {
     border-color: getCssVar('color', 'primary');
   }
@@ -83,7 +78,7 @@ $tag-icon-span-gap: map.merge(
   }
 
   .#{$namespace}-tag__close {
-    color: var(--el-tag-text-color);
+    color: getCssVar('tag', 'text-color');
     &:hover {
       color: var(--el-color-white);
       background-color: var(--el-tag-hover-color);
@@ -126,11 +121,20 @@ $tag-icon-span-gap: map.merge(
   }
 
   @include m(dark) {
-    @include genTheme('', '', false, 'light-3');
+    @include genTheme('', '', 'light-3');
+    @include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
+
+    @include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
+    @each $type in $types {
+      &.#{bem('tag', '', $type)} {
+        @include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
+      }
+    }
   }
 
   @include m(plain) {
-    @include genTheme(false, 'light-5', '', '');
+    @include genTheme(false, 'light-5', '');
+    @include css-var-from-global(('tag', 'bg-color'), ('fill-color', 'blank'));
   }
 
   &.is-closable {
diff --git a/packages/theme-chalk/src/upload.scss b/packages/theme-chalk/src/upload.scss
index 0dbcd7da3a..38eb8d9666 100644
--- a/packages/theme-chalk/src/upload.scss
+++ b/packages/theme-chalk/src/upload.scss
@@ -314,7 +314,7 @@
     .#{bem('upload-list', 'item')} {
       overflow: hidden;
       background-color: getCssVar('fill-color', 'blank');
-      border: 1px solid #c0ccda;
+      border: 1px solid getCssVar('border-color');
       border-radius: 6px;
       box-sizing: border-box;
       width: getCssVar('upload-list', 'picture-card', 'size');
@@ -420,7 +420,7 @@
       overflow: hidden;
       z-index: 0;
       background-color: getCssVar('fill-color', 'blank');
-      border: 1px solid #c0ccda;
+      border: 1px solid getCssVar('border-color');
       border-radius: 6px;
       box-sizing: border-box;
       margin-top: 10px;