Syntax `:::important` doesn't supported on website

[retyui]

Description

The next syntax doesn't work on website

:::important Text
:::

see: https://reactnative.dev/docs/next/virtualview

Documentation version

all

[Simek]

Hey @retyui, we should just use the existing :::info instead since looking at your PR it does not differ visually from that admonition.

Alternatively, you can use :::tip one, just like we do for things only in canary, i.e.:

• https://reactnative.dev/docs/global-intersectionobserver

[Simek]

Oh, you have in mind not the fact that important does not work, but that it's using old syntax, thus does not render correctly, I see now. Seen the PR changes before force push and was a bit confused.

[Simek]

Fixed in linked above PR, thanks! 🙏

[retyui]

@Simek important is never mentioned in the docs
so I thought this was the root cause of the issue

but then I found out title should be wrapper in []

[Simek]

@retyui Yeah, it's the new strict MDX validation change in Docusaurs 3.10:

• https://docusaurus.io/blog/releases/3.10#strict-admonitions

Must have missed that particular case when I was migrating, thanks for catching that!

[retyui]

@Simek maybe we can replace important with info to avoid misunderstanding in future ?

[Simek]

@retyui Yeah, we could. IIRC support for it was added during migration to v2 for legacy purpose, since prior that we had our own admonitions components which did not map 1:1 with newly added ones in Docusaurs.

Since we do not alter their appearance it might be fine to replace them, alternative approach would to be switch the colors to unique ones, i.e. violet, to match GitHub notes (also adding an unique icon), but I'm not fully sure which approach would be better.

Important

Test 123

Would you be interested in working on those changes?

[retyui]

@Simek I can add smth. like that:

.alert--important {
    --ifm-alert-background-color: #8250df33;
    --ifm-alert-background-color-highlight: #8250df;
    --ifm-alert-foreground-color: #281846;
    --ifm-alert-border-color: #8250df;
}

[Simek]

@retyui Let's reduce the contrast between background and border so it matches other admonitions style:

---

background-color: #8250df2a;
border-color: #e0cfff (light) / #442f6b (dark)

Something like above might work. Also remember to test in dark theme, and with links inside (custom decoration color).