chip count design

Author: bmuenzenmeyer

apps/site/components/MDX/EOL/VulnerabilityChips.module.css

@@ -0,0 +1,8 @@
+@reference "../../../styles/index.css";
+
+.chipCount {
+  @apply mr-1
+    rounded-sm
+    bg-gray-800/20
+    px-1.5;
+}

apps/site/components/MDX/EOL/VulnerabilityChips.tsx

@@ -3,6 +3,8 @@ import type { FC } from 'react';
 
 import type { Vulnerability } from '#site/next-data/providers/vulnerabilities.js';
 
+import styles from './VulnerabilityChips.module.css';
+
 // Mapping of vulnerability severities to UI labels and colors
 // TODO @bmuenzenmeyer we need i18n keys for these labels
 const SEVERITY_CONFIG = {
@@ -35,8 +37,8 @@ export const VulnerabilityChip: FC<VulnerabilityChipProps> = ({
   return (
     // TODO @bmuenzenmeyer we dont like to use classnames like this
     <Badge size="small" kind={kind} className="mr-0.5">
+      {count > 0 ? <span className={styles.chipCount}>{count}</span> : null}
       {label}
-      {count > 0 ? ` (${count})` : null}
     </Badge>
   );
 };