feat(badge): color

src/badge/src/Badge.vue

@@ -4,10 +4,13 @@
     :class="{
       'n-badge--dot': dot,
       [`n-badge--${type}-type`]: true,
-      [`n-badge--${color || type}-colored`]: true,
       [`n-${mergedTheme}-theme`]: mergedTheme,
       [`n-badge--as-is`]: !$slots.default
     }"
+    :style="color ? {
+      '--color': color,
+      '--ripple-color': color
+    } : null"
   >
     <slot />
     <transition
@@ -55,11 +58,11 @@ export default {
   props: {
     value: {
       type: [String, Number],
-      default: null
+      default: undefined
     },
     max: {
       type: Number,
-      default: null
+      default: undefined
     },
     dot: {
       type: Boolean,
@@ -85,7 +88,7 @@ export default {
     },
     color: {
       type: String,
-      default: null
+      default: undefined
     }
   },
   data () {
@@ -95,10 +98,10 @@ export default {
   },
   computed: {
     number () {
-      return (this.max === null || typeof value === 'string') ? this.value : (this.value > this.max ? `${this.max}+` : this.value)
+      return (this.max === undefined || typeof value === 'string') ? this.value : (this.value > this.max ? `${this.max}+` : this.value)
     },
     showBadge () {
-      return this.show && (this.dot || (this.value !== null && !(!this.showZero && this.value <= 0)))
+      return this.show && (this.dot || (this.value !== undefined && !(!this.showZero && this.value <= 0)))
     }
   },
   mounted () {

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

@@ -3,7 +3,7 @@ import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-
 
 export default c([
   ({ props }) => {
-    const base = props.$base
+    const { cubicBezierEaseInOut } = props.$base
     return cTB('badge', {
       display: 'inline-flex',
       position: 'relative',
@@ -37,8 +37,8 @@ export default c([
       cB('badge-sup', {
         raw: `
           transition:
-            background-color .3s ${base.cubicBezierEaseInOut},
-            color .3s ${base.cubicBezierEaseInOut};
+            background-color .3s ${cubicBezierEaseInOut},
+            color .3s ${cubicBezierEaseInOut};
           color: #FFF;
           position: absolute;
           height: 18px;

src/badge/src/styles/themed-color.cssr.js

@@ -1,15 +1,15 @@
 import { c, cTB, cB, cM, createKey } from '../../../_utils/cssr'
 
-function createRippleAnimation (digest, color, theme) {
+function createRippleAnimation () {
   return [
-    c(`@keyframes ${theme && theme + '-'}${digest}-badge-wave-spread`, {
+    c(`@keyframes badge-wave-spread`, {
       from: {
-        boxShadow: `0 0 0.5px 0px ${color}`,
+        boxShadow: `0 0 0.5px 0px var(--ripple-color)`,
         opacity: 0.6
       },
       to: {
         // don't use exact 5px since chrome will display the animation with glitches
-        boxShadow: `0 0 0.5px 4.5px ${color}`,
+        boxShadow: `0 0 0.5px 4.5px var(--ripple-color)`,
         opacity: 0
       }
     })
@@ -18,31 +18,26 @@ function createRippleAnimation (digest, color, theme) {
 
 export default c([
   ({ props }) => {
-    let digest
-    let color
-    if (props.colorDigest) {
-      digest = props.colorDigest
-      color = props.color
-    } else {
-      digest = props.$instance.type
-      color = props.$local[createKey('color', digest)]
-    }
-    const base = props.$base
-    const theme = props.$renderedTheme
+    const type = props.$instance.type
+    const color = props.$local[createKey('color', type)]
+    const { cubicBezierEaseOut } = props.$base
     return [
-      createRippleAnimation(digest, color, theme),
+      createRippleAnimation(),
       cTB('badge', [
-        cM(digest + '-colored', [
+        cM(type + '-type', {
+          '--color': color,
+          '--ripple-color': color
+        }, [
           cB('badge-sup', {
-            background: color
+            background: 'var(--color)'
           }, [
             cB('base-wave', {
               zIndex: 1,
               animationDuration: '2s',
               animationIterationCount: 'infinite',
               animationDelay: '1s',
-              animationTimingFunction: `${base.cubicBezierEaseOut}`,
-              animationName: `${theme && theme + '-'}${digest}-badge-wave-spread`
+              animationTimingFunction: `${cubicBezierEaseOut}`,
+              animationName: 'badge-wave-spread'
             })
           ])
         ])