From ce8fb50653c1e93881b32ccf5bb036af6c9ebf5d Mon Sep 17 00:00:00 2001
From: Shashank RM <shashankreddy0608@gmail.com>
Date: Wed, 14 May 2025 02:20:07 +0530
Subject: [PATCH 1/3] fix: ensure links maintain green color within bold text

---
 packages/ui-components/styles/markdown.css | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/ui-components/styles/markdown.css b/packages/ui-components/styles/markdown.css
index f1c91f056fc84..4fc2b741d0efb 100644
--- a/packages/ui-components/styles/markdown.css
+++ b/packages/ui-components/styles/markdown.css
@@ -77,14 +77,17 @@ main {
 
   /* link that isn't inside a heading */
   a:not(h1 > a):not(h2 > a):not(h3 > a):not(h4 > a):not(h5 > a):not(h6 > a),
-  .anchor {
+  .anchor,
+  a strong,
+  strong a,
+  p a {
     @apply max-xs:font-semibold
-      text-green-600
-      dark:text-green-400;
+      !text-green-600
+      dark:!text-green-400;
 
     &:hover {
-      @apply text-green-900
-        dark:text-green-300;
+      @apply !text-green-900
+        dark:!text-green-300;
     }
 
     &[role='button'] {

From ce69ebb8687ce46bd34802c07a57ce773605088b Mon Sep 17 00:00:00 2001
From: Shashank RM <shashankreddy0608@gmail.com>
Date: Wed, 14 May 2025 14:34:46 +0530
Subject: [PATCH 2/3] 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.
---
 packages/ui-components/styles/markdown.css | 27 ++++++++--------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/packages/ui-components/styles/markdown.css b/packages/ui-components/styles/markdown.css
index 4fc2b741d0efb..862cd6450f05e 100644
--- a/packages/ui-components/styles/markdown.css
+++ b/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 {
@@ -77,17 +73,14 @@ main {
 
   /* link that isn't inside a heading */
   a:not(h1 > a):not(h2 > a):not(h3 > a):not(h4 > a):not(h5 > a):not(h6 > a),
-  .anchor,
-  a strong,
-  strong a,
-  p a {
+  .anchor {
     @apply max-xs:font-semibold
-      !text-green-600
-      dark:!text-green-400;
+      text-green-600
+      dark:text-green-400;
 
     &:hover {
-      @apply !text-green-900
-        dark:!text-green-300;
+      @apply text-green-900
+        dark:text-green-300;
     }
 
     &[role='button'] {

From 0c43feaefa794c5287d8b55187a56b7f62eb0927 Mon Sep 17 00:00:00 2001
From: Shashank RM <shashankreddy0608@gmail.com>
Date: Wed, 14 May 2025 16:26:51 +0530
Subject: [PATCH 3/3] 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.
---
 .../ui-components/__design__/text.stories.tsx | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/packages/ui-components/__design__/text.stories.tsx b/packages/ui-components/__design__/text.stories.tsx
index 6b49a6757148a..163d6fdb86974 100644
--- a/packages/ui-components/__design__/text.stories.tsx
+++ b/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;