mintlify / components

UI components for documentation made with React and TailwindCSS.
MIT License
79 stars 12 forks source link

Tailwind prose styling causes color issues with callout children elements #93

Open ryantbrown opened 1 month ago

ryantbrown commented 1 month ago

When using callout components (<Note> and <Warning>), the styling of children (<strong> and <a>) is being overridden by the prose styles.

For example, the following code:

<Warning>
  This is a Warning callout with **bold text** and a
  [link](https://www.mintlify.com) to showcase the color issues.
</Warning>

<Note>
  This is a Note callout with **bold text** and a
  [link](https://www.mintlify.com) to showcase the color issues.
</Note>

produces the following:

CleanShot 2024-10-04 at 11 48 20@2x

The following css, which is prose styling, is responsible for the issue:

/** <strong> **/
.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: rgb(var(--gray-900));
    font-weight: 600;
}
/** <a> **/
.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)) {
    color: var(--tw-prose-links);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgb(var(--primary-light));
}

Ideally the colors match the parent callout, for example: CleanShot 2024-10-04 at 12 00 27@2x CleanShot 2024-10-04 at 12 01 25@2x

Because custom css is not an option until the pro plan, I am hoping this can be fixed. There are a couple solutions:

  1. Remove the prose class from callouts (and add additional classes to get the same style, if needed)
  2. Override the prose styles directly, .prose :where(strong) { color: inherit; }
  3. Extend the Tailwind config and add prose-${color} variants to each callout type

I am not sure which would be preferred but I am happy to submit a PR if you would accept!