Improve Admonition components and have consistent styling

[zachtil]

A new spec on how we can improve the WX and styling of Admonitions is in Notion.

• The goal is to merge <Admonition> and <Tip> into a single component
• Styling of admonitions is more consistent, similar to Docusaurus
  • Icon
  • Title (default ones per type, which can be overridden with a new title attribute or nested <title> element)
  • Left-hand column is the primary color for each admonition type
  • Background has a lighter color

For details, see Notion page above.

[keerlu]

Potential suggestion from @janpio (see comment here):

I think we could have a specific "MongoDB" (or for any database) admonition with the appropriate logo as icon for such things. Maybe in a positive and "negative" variant, could be nice.

[meletj]

Related to #503

[meletj]

Design Design for admonitions: TO BE SIGNED OFF https://www.figma.com/file/aTK3UuDkVlld0G1q0ik9fw/Docs-Website?type=design&node-id=2322-2985&mode=design

Scope

• Merge tip component into admonitions.
• Add maturity level component (for example 'preview')
• Update design for all admonitions

Additional action items

• [ ] Update MDX examples section on https://www.prisma.io/docs/about/prisma-docs/docs-components/mdx-examples#tip-component
• [ ] Communication to the team

[meletj]

Use design from figma here: https://www.figma.com/file/aTK3UuDkVlld0G1q0ik9fw/Docs-Website?type=design&node-id=2322-2985&mode=design

Changes:

• consistent admonition styling and 4 types of admonitions
• merge <Admonition> and <Tip> into a single component
• expand the <Preview> label to page title (if label is applied to heading in left side nav, auto apply to that heading) - see on design.

After implementation, this requires updating the MDX components page https://www.prisma.io/docs/about/prisma-docs/docs-components/mdx-examples#tip-component

[meletj]

Fixed