feat: Extends default admonitions with a custom important

website/docusaurus.config.ts

@@ -30,6 +30,7 @@ export type EditUrlButton = {
 };
 
 const commonDocsOptions: PluginContentDocs.Options = {
+  admonitions: {keywords: ['important'], extendDefaults: true},
   breadcrumbs: false,
   showLastUpdateAuthor: false,
   showLastUpdateTime: true,

website/src/css/customTheme.scss

@@ -664,6 +664,13 @@ html[data-theme="dark"] article .badge {
   --ifm-alert-background-color-highlight: rgba(225, 227, 230, 0.7);
 }
 
+.alert--important {
+  --ifm-alert-background-color: #8250df2a;
+  --ifm-alert-background-color-highlight: #e0cfff;
+  --ifm-alert-foreground-color: #281846;
+  --ifm-alert-border-color: #e0cfff;
+}
+
 html[data-theme="dark"] {
   span[class^="admonitionIcon"] svg {
     fill: hsl(from var(--ifm-alert-border-color) h calc(s + 10) calc(l + 10));
@@ -679,6 +686,11 @@ html[data-theme="dark"] {
     );
     --ifm-alert-background-color-highlight: rgba(225, 227, 230, 0.15);
   }
+  .alert--important {
+    --ifm-alert-background-color-highlight: #442f6b;
+    --ifm-alert-foreground-color: #c0b1dc;
+    --ifm-alert-border-color: #8250df;
+  }
 }
 
 /* Home page */

website/src/theme/Admonition/Types.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import clsx from 'clsx';
+import DefaultAdmonitionTypes from '@theme-original/Admonition/Types';
+
+const {info: Info} = DefaultAdmonitionTypes;
+
+function MyCustomAdmonition(props) {
+  return (
+    <Info className={clsx(props.className, 'alert--important')} {...props} />
+  );
+}
+
+const AdmonitionTypes = {
+  ...DefaultAdmonitionTypes,
+  important: MyCustomAdmonition,
+};
+
+export default AdmonitionTypes;