Tokens for Badge

components/lib/badge/style/BadgeStyle.js

@@ -4,16 +4,16 @@ import { ObjectUtils } from 'primevue/utils';
 const theme = ({ dt }) => `
 .p-badge {
     display: inline-flex;
-    border-radius: 10px;
+    border-radius: ${dt('badge.border.radius')};
     justify-content: center;
-    padding: 0 0.5rem;
+    padding: ${dt('badge.padding')};
     background: ${dt('badge.primary.background')};
     color: ${dt('badge.primary.color')};
-    font-size: 0.75rem;
+    font-size: ${dt('badge.font.size')};
-    font-weight: 700;
+    font-weight: ${dt('badge.font.weight')};
-    min-width: 1.5rem;
+    min-width: ${dt('badge.min.width')};
-    height: 1.5rem;
+    height: ${dt('badge.height')};
-    line-height: 1.5rem;
+    line-height: ${dt('badge.height')};
 }
 
 .p-overlay-badge {
@@ -30,9 +30,9 @@ const theme = ({ dt }) => `
 }
 
 .p-badge-dot {
-    width: 0.5rem;
+    width: ${dt('badge.dot.size')};
-    min-width: 0.5rem;
+    min-width: ${dt('badge.dot.size')};
-    height: 0.5rem;
+    height: ${dt('badge.dot.size')};
     border-radius: 50%;
     padding: 0;
 }
@@ -73,17 +73,17 @@ const theme = ({ dt }) => `
 }
 
 .p-badge-lg {
-    font-size: 1.125rem;
+    font-size: ${dt('badge.lg.font.size')};
-    min-width: 2.25rem;
+    min-width: ${dt('badge.lg.min.width')};
-    height: 2.25rem;
+    height: ${dt('badge.lg.height')};
-    line-height: 2.25rem;
+    line-height: ${dt('badge.lg.height')};
 }
 
 .p-badge-xl {
-    font-size: 1.5rem;
+    font-size: ${dt('badge.xl.font.size')};
-    min-width: 3rem;
+    min-width: ${dt('badge.xl.min.width')};
-    height: 3rem;
+    height: ${dt('badge.xl.height')};
-    line-height: 3rem;
+    line-height: ${dt('badge.xl.height')};
 }
 `;
 

components/lib/themes/aura/badge/index.js

@@ -1,4 +1,25 @@
 export default {
+    root: {
+        borderRadius: '{border.radius.lg}',
+        padding: '0 0.5rem',
+        fontSize: '0.75rem',
+        fontWeight: '700',
+        minWidth: '1.5rem',
+        height: '1.5rem'
+    },
+    dot: {
+        size: '0.5rem'
+    },
+    lg: {
+        fontSize: '1.125rem',
+        minWidth: '2.25rem',
+        height: '2.25rem'
+    },
+    xl: {
+        fontSize: '1.5rem',
+        minWidth: '3rem',
+        height: '3rem'
+    },
     colorScheme: {
         light: {
             primary: {

components/lib/themes/lara/badge/index.js

@@ -1,4 +1,25 @@
 export default {
+    root: {
+        borderRadius: '{border.radius.md}',
+        padding: '0 0.5rem',
+        fontSize: '0.75rem',
+        fontWeight: '700',
+        minWidth: '1.5rem',
+        height: '1.5rem'
+    },
+    dot: {
+        size: '0.5rem'
+    },
+    lg: {
+        fontSize: '1.125rem',
+        minWidth: '2.25rem',
+        height: '2.25rem'
+    },
+    xl: {
+        fontSize: '1.5rem',
+        minWidth: '3rem',
+        height: '3rem'
+    },
     colorScheme: {
         light: {
             primary: {