fix(code): don't rely on inherited text color

Signed-off-by: Aviv Keller <me@aviv.sh>

Author: avivkeller

packages/ui-components/Common/AlertBox/index.module.css

@@ -11,17 +11,6 @@
     text-sm
     text-white;
 
-  a {
-    @apply font-bold
-      text-white
-      underline
-      hover:text-white;
-
-    &:hover {
-      @apply no-underline;
-    }
-  }
-
   &.small {
     @apply gap-1
       py-2

packages/ui-components/Common/AlertBox/index.stories.tsx

@@ -6,6 +6,12 @@ import AlertBox from '#ui/Common/AlertBox';
 type Story = StoryObj<typeof AlertBox>;
 type Meta = MetaObj<typeof AlertBox>;
 
+const withMain = (args: React.ComponentProps<typeof AlertBox>) => (
+  <main>
+    <AlertBox {...args} />
+  </main>
+);
+
 export const Info: Story = {
   args: {
     level: 'info',
@@ -46,6 +52,23 @@ export const Danger: Story = {
   },
 };
 
+export const InMarkdown: Story = {
+  args: {
+    level: 'danger',
+    title: '0',
+    children: (
+      <>
+        <code>Code renders correctly,</code>{' '}
+        <a href="#">
+          <code>even when in a link</code>
+        </a>
+      </>
+    ),
+    size: 'default',
+  },
+  render: withMain,
+};
+
 export const WithIcon: Story = {
   args: {
     level: 'info',

packages/ui-components/styles/markdown.css

@@ -72,8 +72,7 @@ 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:not(h1 > a):not(h2 > a):not(h3 > a):not(h4 > a):not(h5 > a):not(h6 > a) {
     @apply max-xs:font-semibold
       text-green-600
       dark:text-green-400;
@@ -87,13 +86,8 @@ main {
       @apply max-xs:font-regular;
     }
 
-    &:has(code) {
-      @apply max-xs:decoration-neutral-800
-        dark:max-xs:decoration-neutral-200;
-
-      code {
-        @apply text-inherit;
-      }
+    code {
+      @apply text-inherit;
     }
   }