fix(icon): icon style in different depth

src/_base/icons/CalendarIcon.vue

@@ -1,7 +1,7 @@
 <template>
   <svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g stroke="none" stroke-width="1" fill-rule="evenodd">
-      <g fill="#212121" fill-rule="nonzero">
+      <g fill-rule="nonzero">
         <path d="M21.75,3 C23.5449254,3 25,4.45507456 25,6.25 L25,21.75 C25,23.5449254 23.5449254,25 21.75,25 L6.25,25 C4.45507456,25 3,23.5449254 3,21.75 L3,6.25 C3,4.45507456 4.45507456,3 6.25,3 L21.75,3 Z M23.5,9.503 L4.5,9.503 L4.5,21.75 C4.5,22.7164983 5.28350169,23.5 6.25,23.5 L21.75,23.5 C22.7164983,23.5 23.5,22.7164983 23.5,21.75 L23.5,9.503 Z M21.75,4.5 L6.25,4.5 C5.28350169,4.5 4.5,5.28350169 4.5,6.25 L4.5,8.003 L23.5,8.003 L23.5,6.25 C23.5,5.28350169 22.7164983,4.5 21.75,4.5 Z" />
       </g>
     </g>

src/icon/src/styles/themed-base.cssr.js

@@ -1,14 +1,10 @@
 import { c, cTB, cM, cB } from '../../../_utils/cssr'
+import { changeColor } from '../../../_utils/color'
 
 export default c([
   ({ props }) => {
     const {
-      color,
-      opacity1Depth,
-      opacity2Depth,
-      opacity3Depth,
-      opacity4Depth,
-      opacity5Depth
+      color
     } = props.$local
     const { cubicBezierEaseInOut } = props.$base
     return [
@@ -35,27 +31,13 @@ export default c([
           height: '1em',
           width: '1em'
         }),
-        cM('1-depth', {
-          opacity: opacity1Depth
-        }),
-        cM('2-depth', {
-          opacity: opacity2Depth
-        }),
-        cM('3-depth', {
-          opacity: opacity3Depth
-        }),
-        cM('4-depth', {
-          opacity: opacity4Depth
-        }),
-        cM('5-depth', {
-          opacity: opacity5Depth
-        })
+        [1, 2, 3, 4, 5].map(v => cM(`${v}-depth`, {
+          color: changeColor(color, { alpha: props.$local[`opacity${v}Depth`] })
+        }))
       ]),
       [1, 2, 3, 4, 5].map(v => cB(`icon-${v}-depth >`, [
         cTB('icon', {
-          fill: color,
-          stroke: color,
-          opacity: props.$local[`opacity${v}Depth`]
+          color: changeColor(color, { alpha: props.$local[`opacity${v}Depth`] })
         })
       ]))
     ]