feat(style): add component css variables

src/badge/index.less

@@ -1,18 +1,31 @@
 @import './var.less';
 
+:root {
+  --van-badge-size: @badge-size;
+  --van-badge-color: @badge-color;
+  --van-badge-padding: @badge-padding;
+  --van-badge-font-size: @badge-font-size;
+  --van-badge-font-weight: @badge-font-weight;
+  --van-badge-border-width: @badge-border-width;
+  --van-badge-background-color: @badge-background-color;
+  --van-badge-dot-color: @badge-dot-color;
+  --van-badge-dot-size: @badge-dot-size;
+  --van-badge-font-family: @badge-font-family;
+}
+
 .van-badge {
   display: inline-block;
   box-sizing: border-box;
-  min-width: @badge-size;
-  padding: @badge-padding;
-  color: @badge-color;
-  font-weight: @badge-font-weight;
-  font-size: @badge-font-size;
-  font-family: @badge-font-family;
+  min-width: var(--van-badge-size);
+  padding: var(--van-badge-padding);
+  color: var(--van-badge-color);
+  font-weight: var(--van-badge-font-weight);
+  font-size: var(--van-badge-font-size);
+  font-family: var(--van-badge-font-family);
   line-height: 1.2;
   text-align: center;
-  background-color: @badge-background-color;
-  border: @badge-border-width solid @white;
+  background-color: var(--van-badge-background-color);
+  border: var(--van-badge-border-width) solid @white;
   border-radius: @border-radius-max;
 
   &--fixed {
@@ -24,10 +37,10 @@
   }
 
   &--dot {
-    width: @badge-dot-size;
+    width: var(--van-badge-dot-size);
     min-width: 0;
-    height: @badge-dot-size;
-    background-color: @badge-dot-color;
+    height: var(--van-badge-dot-size);
+    background-color: var(--van-badge-dot-color);
     border-radius: 100%;
   }