style(Badge): 🎨 correct sizing and padding (#2268)

fixes some descrepancies between figma and code

Author: Barsnes

packages/css/badge.css

@@ -1,8 +1,8 @@
 .ds-badge {
   --dsc-badge-background: var(--ds-color-accent-base-default);
   --dsc-badge-color: var(--ds-color-accent-contrast-default);
-  --dsc-badge-padding: 0 var(--ds-spacing-1);
-  --dsc-badge-height: 14px;
+  --dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2));
+  --dsc-badge-height: var(--ds-sizing-6);
   --dsc-badge-width: 14px;
 
   background-color: var(--dsc-badge-background);
@@ -111,16 +111,34 @@
 .ds-badge--sm {
   --dsc-badge-height: var(--ds-sizing-3);
   --dsc-badge-width: var(--ds-sizing-3);
+
+  &.ds-badge--count {
+    --dsc-badge-height: var(--ds-sizing-5);
+    --dsc-badge-width: auto;
+    --dsc-badge-padding: 0 var(--ds-spacing-1);
+  }
 }
 
 .ds-badge--md {
-  --dsc-badge-height: calc(var(--ds-sizing-3) + 2px);
-  --dsc-badge-width: calc(var(--ds-sizing-3) + 2px);
+  --dsc-badge-height: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));
+  --dsc-badge-width: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));
+
+  &.ds-badge--count {
+    --dsc-badge-height: var(--ds-sizing-6);
+    --dsc-badge-width: auto;
+    --dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2));
+  }
 }
 
 .ds-badge--lg {
   --dsc-badge-height: var(--ds-sizing-4);
   --dsc-badge-width: var(--ds-sizing-4);
+
+  &.ds-badge--count {
+    --dsc-badge-height: var(--ds-sizing-7);
+    --dsc-badge-width: auto;
+    --dsc-badge-padding: 0 var(--ds-spacing-2);
+  }
 }
 
 .ds-badge--count {