Syntax :::important doesn't supported on website #5062

Activity

1. facebook-github-tools

   added

   p: callstack

   Partner

   on Apr 27, 2026
2. Simek commented on Apr 27, 2026

   

   Simek

   on Apr 27, 2026

   Collaborator

   More actions

   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
3. Simek commented on Apr 27, 2026

   

   Simek

   on Apr 27, 2026

   Last edited by Simek

   Collaborator

   More actions

   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.
4. Simek

   linked a pull request that will close this issueFix `important` admonition syntax #5063on Apr 27, 2026
5. Simek commented on Apr 27, 2026

   

   Simek

   on Apr 27, 2026

   Collaborator

   More actions

   Fixed in linked above PR, thanks! 🙏
6. Simek

   closed this as completedon Apr 27, 2026
7. retyui commented on Apr 27, 2026

   

   retyui

   on Apr 27, 2026

   ContributorAuthor

   More actions

   @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 []

   👍React with 👍1Reacted by Bartosz Kaszubowski
8. Simek commented on Apr 27, 2026

   

   Simek

   on Apr 27, 2026

   Collaborator

   More actions

   @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!
9. retyui commented on Apr 27, 2026

   

   retyui

   on Apr 27, 2026

   ContributorAuthor

   More actions

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

   👍React with 👍1Reacted by Bartosz Kaszubowski
10. Simek commented on Apr 27, 2026

    

    Simek

    on Apr 27, 2026

    Last edited by Simek

    Collaborator

    More actions

    @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?
11. retyui commented on Apr 27, 2026

    

    retyui

    on Apr 27, 2026

    ContributorAuthor

    More actions

    @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;
    }

    
12. Simek commented on Apr 27, 2026

    

    Simek

    on Apr 27, 2026

    Collaborator

    More actions

    @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).
13. retyui commented on Apr 27, 2026

    

    retyui

    on Apr 27, 2026

    ContributorAuthor

    More actions

    @Simek here is the PR: #5064

    ❤️React with ❤️1Reacted by Bartosz Kaszubowski