diff --git a/components/lib/badge/style/BadgeStyle.js b/components/lib/badge/style/BadgeStyle.js index 49c1e4f2b..b423029c2 100644 --- a/components/lib/badge/style/BadgeStyle.js +++ b/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-weight: 700; - min-width: 1.5rem; - height: 1.5rem; - line-height: 1.5rem; + font-size: ${dt('badge.font.size')}; + font-weight: ${dt('badge.font.weight')}; + min-width: ${dt('badge.min.width')}; + height: ${dt('badge.height')}; + line-height: ${dt('badge.height')}; } .p-overlay-badge { @@ -30,9 +30,9 @@ const theme = ({ dt }) => ` } .p-badge-dot { - width: 0.5rem; - min-width: 0.5rem; - height: 0.5rem; + width: ${dt('badge.dot.size')}; + min-width: ${dt('badge.dot.size')}; + height: ${dt('badge.dot.size')}; border-radius: 50%; padding: 0; } @@ -73,17 +73,17 @@ const theme = ({ dt }) => ` } .p-badge-lg { - font-size: 1.125rem; - min-width: 2.25rem; - height: 2.25rem; - line-height: 2.25rem; + font-size: ${dt('badge.lg.font.size')}; + min-width: ${dt('badge.lg.min.width')}; + height: ${dt('badge.lg.height')}; + line-height: ${dt('badge.lg.height')}; } .p-badge-xl { - font-size: 1.5rem; - min-width: 3rem; - height: 3rem; - line-height: 3rem; + font-size: ${dt('badge.xl.font.size')}; + min-width: ${dt('badge.xl.min.width')}; + height: ${dt('badge.xl.height')}; + line-height: ${dt('badge.xl.height')}; } `; diff --git a/components/lib/themes/aura/badge/index.js b/components/lib/themes/aura/badge/index.js index 9f1388991..9559a78ba 100644 --- a/components/lib/themes/aura/badge/index.js +++ b/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: { diff --git a/components/lib/themes/lara/badge/index.js b/components/lib/themes/lara/badge/index.js index 9f1388991..26b84b973 100644 --- a/components/lib/themes/lara/badge/index.js +++ b/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: {