fix(Badge): fix P+ styles for primary badges (#4753)

Author: plagoa

apps/docs/src/pages/components/badge.mdx

@@ -86,13 +86,19 @@ To display a badge on any content, wrap the `children` content with the badge co
 Customize the badge’s color using the [`color`](/docs/styling#color-prop) prop.
 
 ```tsx live
-<div className="flex gap-sm">
-  <HvBadge showCount label={8} icon={<Alert />} />
-  <HvBadge color="primary" showCount label={8} icon={<Alert />} />
-  <HvBadge color="bgPageSecondary" showCount label={8} icon={<Alert />} />
-  <HvBadge color="positive" showCount label={8} icon={<Alert />} />
-  <HvBadge color="coral" showCount label={8} icon={<Alert />} />
-  <HvBadge color="#c73aa8" showCount label={8} icon={<Alert />} />
+<div className="flex flex-col gap-sm">
+  <div className="flex gap-sm">
+    <HvBadge showCount label={8} icon={<Alert />} />
+    <HvBadge color="primary" showCount label={8} icon={<Alert />} />
+    <HvBadge color="textSubtle" showCount label={8} icon={<Alert />} />
+    <HvBadge color="positive" showCount label={8} icon={<Alert />} />
+  </div>
+  <div className="flex gap-sm">
+    <HvBadge label={8} icon={<Alert />} />
+    <HvBadge color="primary" label={8} icon={<Alert />} />
+    <HvBadge color="textSubtle" label={8} icon={<Alert />} />
+    <HvBadge color="positive" label={8} icon={<Alert />} />
+  </div>
 </div>
 ```
 

packages/core/src/Badge/Badge.stories.tsx

@@ -108,7 +108,10 @@ export const Test: StoryObj = {
       <HvBadge showCount label={8}>
         <HvTypography variant="title4">Events</HvTypography>
       </HvBadge>
-      <HvBadge color="bgPageSecondary" showCount label={88} icon={<Alert />} />
+      <HvBadge color="primary" showCount label={8} icon={<Alert />} />
+      <HvBadge color="primary" label={8} icon={<Alert />} />
+      <HvBadge color="textSubtle" showCount label={8} icon={<Alert />} />
+      <HvBadge color="textSubtle" label={8} icon={<Alert />} />
     </div>
   ),
 };

packages/styles/src/themes/pentahoPlus.ts

@@ -301,8 +301,13 @@ const pentahoPlus = makeTheme((theme) => ({
       classes: {
         badgePosition: {
           color: ld(theme.colors.textLight, theme.colors.textDark),
-          "&[data-color='bgPageSecondary']": {
-            color: theme.colors.text,
+          "&[data-color='textSubtle']:not(.HvBadge-badgePosition:empty)": {
+            color: theme.colors.textSubtle,
+            backgroundColor: theme.colors.bgPageSecondary,
+          },
+          "&[data-color='primary']:not(.HvBadge-badgePosition:empty)": {
+            color: theme.colors.primary,
+            backgroundColor: theme.colors.primaryDimmed,
           },
         },
       },