refactor(skeleton): migrate css var (#2586)

packages/theme-chalk/src/common/var.scss

@@ -166,9 +166,6 @@ $--border-radius-circle: 100% !default;
 $--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04) !default;
 /// boxShadow|1|Shadow|1
 $--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
-/* Svg
---------------- */
-$--svg-monochrome-grey: #dcdde0 !default;
 
 /* Typography
 -------------------------- */
@@ -786,9 +783,6 @@ $--avatar-medium-size: 36px !default;
 /// size|1|Avatar Size|3
 $--avatar-small-size: 28px !default;
 
-$--skeleton-color: #f2f2f2 !default;
-$--skeleton-to-color: #e6e6e6 !default;
-
 /* Empty
 -------------------------- */
 $--empty-padding: 40px 0 !default;

packages/theme-chalk/src/empty.scss

@@ -22,7 +22,7 @@
     }
 
     svg {
-      fill: $--svg-monochrome-grey;
+      fill: var(--el-svg-monochrome-grey);
       width: 100%;
       height: 100%;
       vertical-align: top;

packages/theme-chalk/src/skeleton-item.scss

@@ -9,10 +9,10 @@
 
 @include b(skeleton) {
   @include e(item) {
-    background: $--skeleton-color;
+    background: var(--el-skeleton-color);
     display: inline-block;
     height: 16px;
-    border-radius: $--border-radius-base;
+    border-radius: var(--el-border-radius-base);
     width: 100%;
   }
 
@@ -75,7 +75,7 @@
     border-radius: 0;
 
     svg {
-      fill: $--svg-monochrome-grey;
+      fill: var(--el-svg-monochrome-grey);
       width: 22%;
       height: 22%;
     }

packages/theme-chalk/src/skeleton.scss

@@ -2,12 +2,17 @@
 @import 'common/var';
 @import './skeleton-item.scss';
 
+:root {
+  --el-skeleton-color: #f2f2f2;
+  --el-skeleton-to-color: #e6e6e6;
+}
+
 @mixin skeleton-color() {
   background: linear-gradient(
     90deg,
-    $--skeleton-color 25%,
-    $--skeleton-to-color 37%,
-    $--skeleton-color 63%
+    var(--el-skeleton-color) 25%,
+    var(--el-skeleton-to-color) 37%,
+    var(--el-skeleton-color) 63%
   );
   background-size: 400% 100%;
   animation: #{$namespace}-skeleton-loading 1.4s ease infinite;
@@ -28,7 +33,7 @@
     @include e($unit) {
       height: 16px;
       margin-top: 16px;
-      background: $--skeleton-color;
+      background: var(--el-skeleton-color);
     }
   }
 

packages/theme-chalk/src/var.scss

@@ -52,7 +52,7 @@
   --el-box-shadow-light: #{$--box-shadow-light};
 
   // Svg
-  --el-svg-monochrome-grey: #{$--svg-monochrome-grey};
+  --el-svg-monochrome-grey: #dcdde0;
 
   // Fill
   --el-fill-base: var(--el-color-white);