feat: button text color auto fit

demo/components/ButtonDemo.vue

@@ -30,12 +30,16 @@
     <n-button round>
       Cancel
     </n-button>
-    <n-button type="primary">
+    <n-button
+      type="primary"
+      auto-text-color
+    >
       Delete
     </n-button>
     <n-button
       type="primary"
       round
+      auto-text-color
       @click="handleClick"
     >
       handleClick

packages/common/Button/src/main.vue

@@ -14,7 +14,10 @@
     >
       <n-icon :type="icon" />
     </div>
-    <div class="n-button__content">
+    <div
+      class="n-button__content"
+      :style="style"
+    >
       <slot />
     </div>
   </div>
@@ -48,6 +51,30 @@ export default {
     icon: {
       type: String,
       default: null
+    },
+    autoTextColor: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      style: {}
+    }
+  },
+  mounted () {
+    if (this.autoTextColor) {
+      let cursor = this.$el
+      while (cursor.parentElement) {
+        cursor = cursor.parentElement
+        const backgroundColor = getComputedStyle(cursor).backgroundColor
+        if (backgroundColor !== 'rgba(0, 0, 0, 0)') {
+          this.style = {
+            color: backgroundColor
+          }
+          break
+        }
+      }
     }
   }
 }

styles/Button.scss

@@ -62,10 +62,10 @@
   &.is-default {
     color: $default-button-text-color;
     &:hover {
-      background-color: #336F6FFF;
+      background-color: rgba(99, 226, 183, .3);
     }
     &:active {
-      background-color: #366165FF;
+      background-color: rgba(99, 226, 183, .2);
     }
   }
   &.is-primary {