From 97081aa039d2b1bb511503f3bd2dbb9e4e6d2c91 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 13 May 2024 18:09:09 +0300
Subject: [PATCH] Fixed #5729 - Small size dbadge

---
 components/lib/badge/style/BadgeStyle.js  |  8 +++++
 components/lib/themes/aura/badge/index.js | 41 +++++++++++++----------
 components/lib/themes/lara/badge/index.js | 17 ++++++----
 doc/badge/SizeDoc.vue                     | 30 ++++++++++-------
 4 files changed, 59 insertions(+), 37 deletions(-)

diff --git a/components/lib/badge/style/BadgeStyle.js b/components/lib/badge/style/BadgeStyle.js
index b423029c2..b4a3ee0e7 100644
--- a/components/lib/badge/style/BadgeStyle.js
+++ b/components/lib/badge/style/BadgeStyle.js
@@ -72,6 +72,13 @@ const theme = ({ dt }) => `
     color: ${dt('badge.contrast.color')};
 }
 
+.p-badge-sm {
+    font-size: ${dt('badge.sm.font.size')};
+    min-width: ${dt('badge.sm.min.width')};
+    height: ${dt('badge.sm.height')};
+    line-height: ${dt('badge.sm.height')};
+}
+
 .p-badge-lg {
     font-size: ${dt('badge.lg.font.size')};
     min-width: ${dt('badge.lg.min.width')};
@@ -93,6 +100,7 @@ const classes = {
         {
             'p-badge-circle': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
             'p-badge-dot': ObjectUtils.isEmpty(props.value) && !instance.$slots.default,
+            'p-badge-sm': props.size === 'small',
             'p-badge-lg': props.size === 'large',
             'p-badge-xl': props.size === 'xlarge',
             'p-badge-info': props.severity === 'info',
diff --git a/components/lib/themes/aura/badge/index.js b/components/lib/themes/aura/badge/index.js
index cb09834bc..5ed3f6e46 100644
--- a/components/lib/themes/aura/badge/index.js
+++ b/components/lib/themes/aura/badge/index.js
@@ -1,6 +1,6 @@
 export default {
     root: {
-        borderRadius: '{border.radius.lg}',
+        borderRadius: '{border.radius.md}',
         padding: '0 0.5rem',
         fontSize: '0.75rem',
         fontWeight: '700',
@@ -10,21 +10,26 @@ export default {
     dot: {
         size: '0.5rem'
     },
+    sm: {
+        fontSize: '0.625rem',
+        minWidth: '1.25rem',
+        height: '1.25rem'
+    },
     lg: {
-        fontSize: '1.125rem',
-        minWidth: '2.25rem',
-        height: '2.25rem'
+        fontSize: '0.875rem',
+        minWidth: '1.75rem',
+        height: '1.75rem'
     },
     xl: {
-        fontSize: '1.5rem',
-        minWidth: '3rem',
-        height: '3rem'
+        fontSize: '1rem',
+        minWidth: '2rem',
+        height: '2rem'
     },
     colorScheme: {
         light: {
             primary: {
                 background: '{primary.color}',
-                color: '{primary.inverse.color}'
+                color: '{primary.contrast.color}'
             },
             secondary: {
                 background: '{surface.100}',
@@ -53,28 +58,28 @@ export default {
         },
         dark: {
             primary: {
-                background: 'color-mix(in srgb, {primary.500}, transparent 84%)',
-                color: '{primary.300}'
+                background: '{primary.color}',
+                color: '{primary.contrast.color}'
             },
             secondary: {
                 background: '{surface.800}',
                 color: '{surface.300}'
             },
             success: {
-                background: 'color-mix(in srgb, {green.500}, transparent 84%)',
-                color: '{green.300}'
+                background: '{green.400}',
+                color: '{green.950}'
             },
             info: {
-                background: 'color-mix(in srgb, {sky.500}, transparent 84%)',
-                color: '{sky.300}'
+                background: '{sky.400}',
+                color: '{sky.950}'
             },
             warn: {
-                background: 'color-mix(in srgb, {orange.500}, transparent 84%)',
-                color: '{orange.300}'
+                background: '{orange.400}',
+                color: '{orange.950}'
             },
             danger: {
-                background: 'color-mix(in srgb, {red.500}, transparent 84%)',
-                color: '{red.300}'
+                background: '{red.400}',
+                color: '{red.950}'
             },
             contrast: {
                 background: '{surface.0}',
diff --git a/components/lib/themes/lara/badge/index.js b/components/lib/themes/lara/badge/index.js
index 26b84b973..5ed3f6e46 100644
--- a/components/lib/themes/lara/badge/index.js
+++ b/components/lib/themes/lara/badge/index.js
@@ -10,15 +10,20 @@ export default {
     dot: {
         size: '0.5rem'
     },
+    sm: {
+        fontSize: '0.625rem',
+        minWidth: '1.25rem',
+        height: '1.25rem'
+    },
     lg: {
-        fontSize: '1.125rem',
-        minWidth: '2.25rem',
-        height: '2.25rem'
+        fontSize: '0.875rem',
+        minWidth: '1.75rem',
+        height: '1.75rem'
     },
     xl: {
-        fontSize: '1.5rem',
-        minWidth: '3rem',
-        height: '3rem'
+        fontSize: '1rem',
+        minWidth: '2rem',
+        height: '2rem'
     },
     colorScheme: {
         light: {
diff --git a/doc/badge/SizeDoc.vue b/doc/badge/SizeDoc.vue
index b2f7e997d..cc1687841 100644
--- a/doc/badge/SizeDoc.vue
+++ b/doc/badge/SizeDoc.vue
@@ -1,11 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Use the <i>size</i> property to customize the size of a Badge, currently <i>large</i> and <i>xlarge</i> are available as size options.</p>
+        <p>Use the <i>size</i> property to customize the dimensions of a Badge.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-content-center align-items-end gap-2">
-        <Badge value="6" size="xlarge" severity="success"></Badge>
-        <Badge value="4" size="large" severity="warn"></Badge>
-        <Badge value="2"></Badge>
+        <Badge value="8" size="xlarge" severity="success"></Badge>
+        <Badge value="6" size="large" severity="warn"></Badge>
+        <Badge value="4" severity="info"></Badge>
+        <Badge value="2" size="small"></Badge>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -16,16 +17,18 @@ export default {
         return {
             code: {
                 basic: `
-<Badge value="6" size="xlarge" severity="success"></Badge>
-<Badge value="4" size="large" severity="warn"></Badge>
-<Badge value="2"></Badge>
+<Badge value="8" size="xlarge" severity="success"></Badge>
+<Badge value="6" size="large" severity="warn"></Badge>
+<Badge value="4" severity="info"></Badge>
+<Badge value="2" size="small"></Badge>
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center align-items-end gap-2">
-        <Badge value="6" size="xlarge" severity="success"></Badge>
-        <Badge value="4" size="large" severity="warn"></Badge>
-        <Badge value="2"></Badge>
+        <Badge value="8" size="xlarge" severity="success"></Badge>
+        <Badge value="6" size="large" severity="warn"></Badge>
+        <Badge value="4" severity="info"></Badge>
+        <Badge value="2" size="small"></Badge>
     </div>
 </template>
 
@@ -36,9 +39,10 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-content-center align-items-end gap-2">
-        <Badge value="6" size="xlarge" severity="success"></Badge>
-        <Badge value="4" size="large" severity="warn"></Badge>
-        <Badge value="2"></Badge>
+        <Badge value="8" size="xlarge" severity="success"></Badge>
+        <Badge value="6" size="large" severity="warn"></Badge>
+        <Badge value="4" severity="info"></Badge>
+        <Badge value="2" size="small"></Badge>
     </div>
 </template>