feat: Add a custom important admonition type, other small tweaks (#5064)

* feat: Extends default admonitions with a custom `important`


by default info was used: https://github.com/facebook/docusaurus/blob/094248992c5b5e99c8dc8ab3f77d564192736a29/packages/docusaurus-theme-classic/src/theme/Admonition/Types.tsx#L30

* fix props overwrite, naming tweak

* convert to TSX, shade tweak, use new admonition in one more fragment

* improve Tip admonition heading color in light mode

---------

Co-authored-by: Bartosz Kaszubowski <gosimek@gmail.com>

Author: retyui

docs/_experimental-channel-api-warning.mdx

@@ -1,4 +1,4 @@
-:::tip[Experimental Feature 🧪]
+:::important[Experimental Feature 🧪]
 
 **This API is currently only available in React Native’s Experimental channels.**
 

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,13 +664,20 @@ 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));
+    fill: hsl(from var(--ifm-alert-border-color) h calc(s - 10) calc(l + 10));
   }
 
   div[class^="admonitionHeading"] {
-    color: hsl(from var(--ifm-alert-border-color) h calc(s + 10) calc(l + 10));
+    color: hsl(from var(--ifm-alert-border-color) h calc(s - 10) calc(l + 10));
   }
 
   .alert--secondary {
@@ -679,6 +686,25 @@ 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;
+  }
+}
+
+html[data-theme="light"] {
+  .alert--success {
+    span[class^="admonitionIcon"] svg {
+      fill: hsl(from var(--ifm-alert-border-color) h calc(s + 20) calc(l - 10));
+    }
+
+    div[class^="admonitionHeading"] {
+      color: hsl(
+        from var(--ifm-alert-border-color) h calc(s + 20) calc(l - 10)
+      );
+    }
+  }
 }
 
 /* Home page */

website/src/theme/Admonition/Types.tsx

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

website/versioned_docs/version-0.82/_experimental-channel-api-warning.mdx

@@ -1,4 +1,4 @@
-:::tip[Experimental Feature 🧪]
+:::important[Experimental Feature 🧪]
 
 **This API is currently only available in React Native’s Experimental channels.**
 

website/versioned_docs/version-0.83/_experimental-channel-api-warning.mdx

@@ -1,4 +1,4 @@
-:::tip[Experimental Feature 🧪]
+:::important[Experimental Feature 🧪]
 
 **This API is currently only available in React Native’s Experimental channels.**
 

website/versioned_docs/version-0.84/_experimental-channel-api-warning.mdx

@@ -1,4 +1,4 @@
-:::tip[Experimental Feature 🧪]
+:::important[Experimental Feature 🧪]
 
 **This API is currently only available in React Native’s Experimental channels.**
 

website/versioned_docs/version-0.85/_experimental-channel-api-warning.mdx

@@ -1,4 +1,4 @@
-:::tip[Experimental Feature 🧪]
+:::important[Experimental Feature 🧪]
 
 **This API is currently only available in React Native’s Experimental channels.**