fix: Ensure links maintain green color within bold text (#7744)

* fix: ensure links maintain green color within bold text

* fix(markdown): ensure links inside bold text retain correct green color

- Remove color styling from `strong` so it only applies font weight, not color.
- Restore color styling for headings only.
- Remove unnecessary selectors and \!important overrides for link color.
- This allows links within bold text to inherit the correct green color naturally, resolving the previous override issue.

* test(storybook): add story for bold text and links to cover markdown edge cases

- Adds a  story to the text stories.
- Demonstrates bold text, a link inside bold, and bold inside a link.
- Ensures CSS changes are visually tested for all relevant markdown scenarios.

Author: shashankxrm

packages/ui-components/__design__/text.stories.tsx

@@ -77,4 +77,24 @@ export const HeadingsWithLinks: StoryObj = {
   ),
 };
 
+export const BoldAndLinks: StoryObj = {
+  render: () => (
+    <main>
+      <p>
+        <strong>Bold text (should inherit normal text color)</strong>
+      </p>
+      <p>
+        <strong>
+          <a href="#">Bold green link (link inside bold)</a>
+        </strong>
+      </p>
+      <p>
+        <a href="#">
+          <strong>Bold green link (bold inside link)</strong>
+        </a>
+      </p>
+    </main>
+  ),
+};
+
 export default { title: 'Design System' } as MetaObj;

packages/ui-components/styles/markdown.css

@@ -40,22 +40,18 @@ main {
   h4,
   h5,
   h6 {
+    @apply font-semibold
+      text-neutral-900
+      dark:text-white;
+
     &[id] a {
       @apply text-neutral-900
         dark:text-white;
     }
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
   strong {
-    @apply font-semibold
-      text-neutral-900
-      dark:text-white;
+    @apply font-semibold;
   }
 
   code {