feat(badge): text color

src/badge/demos/enUS/color.demo.vue

@@ -3,7 +3,7 @@
 </markdown>
 
 <template>
-  <n-badge value="15" color="grey">
+  <n-badge value="15" color="grey" text-color="yellow">
     <n-avatar />
   </n-badge>
 </template>

src/badge/demos/zhCN/color.demo.vue

@@ -3,7 +3,7 @@
 </markdown>
 
 <template>
-  <n-badge value="15" color="grey">
+  <n-badge value="15" color="grey" text-color="yellow">
     <n-avatar />
   </n-badge>
 </template>

src/badge/src/Badge.tsx

@@ -34,6 +34,7 @@ export const badgeProps = {
   showZero: Boolean,
   processing: Boolean,
   color: String,
+  textColor: String,
   offset: Array as unknown as PropType<
     readonly [number | string, number | string]
   >
@@ -78,18 +79,24 @@ export default defineComponent({
 
     const rtlEnabledRef = useRtl('Badge', mergedRtlRef, mergedClsPrefixRef)
     const cssVarsRef = computed(() => {
-      const { type, color: propColor } = props
+      const { type, color: propColor, textColor: propsTextColor } = props
       const {
         common: { cubicBezierEaseInOut, cubicBezierEaseOut },
-        self: { [createKey('color', type)]: color, fontFamily, fontSize }
+        self: {
+          [createKey('color', type)]: color,
+          fontFamily,
+          fontSize,
+          textColor
+        }
       } = themeRef.value
       return {
         '--n-font-size': fontSize,
         '--n-font-family': fontFamily,
         '--n-color': propColor || color,
         '--n-ripple-color': propColor || color,
         '--n-bezier': cubicBezierEaseInOut,
-        '--n-ripple-bezier': cubicBezierEaseOut
+        '--n-ripple-bezier': cubicBezierEaseOut,
+        '--n-text-color': propsTextColor || textColor
       }
     })
 

src/badge/src/styles/index.cssr.ts

@@ -54,7 +54,7 @@ export default c([
       transition:
         background-color .3s var(--n-bezier),
         color .3s var(--n-bezier);
-      color: #FFF;
+      color: var(--n-text-color);
       position: absolute;
       height: 18px;
       line-height: 18px;

src/badge/styles/dark.ts

@@ -18,6 +18,7 @@ const badgeDark: BadgeTheme = {
       colorSuccess: successColorSuppl,
       colorError: errorColorSuppl,
       colorWarning: warningColorSuppl,
+      textColor: '#FFF',
       fontSize: '12px',
       fontFamily
     }

src/badge/styles/light.ts

@@ -10,6 +10,7 @@ function self(vars: ThemeCommonVars) {
     colorSuccess: successColor,
     colorError: errorColor,
     colorWarning: warningColor,
+    textColor: '#FFF',
     fontSize: '12px',
     fontFamily
   }