From e8870e2ef482dc2a18c2a8711bfdb7b47ae4fd44 Mon Sep 17 00:00:00 2001 From: D N <4661784+retyui@users.noreply.github.com> Date: Mon, 27 Apr 2026 18:37:01 +0200 Subject: [PATCH 1/4] 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 --- website/docusaurus.config.ts | 1 + website/src/css/customTheme.scss | 12 ++++++++++++ website/src/theme/Admonition/Types.js | 18 ++++++++++++++++++ 3 files changed, 31 insertions(+) create mode 100644 website/src/theme/Admonition/Types.js diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts index f2984614a2e..5db41fa72d0 100644 --- a/website/docusaurus.config.ts +++ b/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, diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss index 6784f8e3895..6d45c145c83 100644 --- a/website/src/css/customTheme.scss +++ b/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 */ diff --git a/website/src/theme/Admonition/Types.js b/website/src/theme/Admonition/Types.js new file mode 100644 index 00000000000..57fa5d7bd00 --- /dev/null +++ b/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 ( + + ); +} + +const AdmonitionTypes = { + ...DefaultAdmonitionTypes, + important: MyCustomAdmonition, +}; + +export default AdmonitionTypes; From 07f6b82de7a144acaa54d39557f1a3d4e8ef20a6 Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Mon, 27 Apr 2026 21:01:25 +0200 Subject: [PATCH 2/4] fix props overwrite, naming tweak --- website/src/theme/Admonition/Types.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/website/src/theme/Admonition/Types.js b/website/src/theme/Admonition/Types.js index 57fa5d7bd00..638784cbc39 100644 --- a/website/src/theme/Admonition/Types.js +++ b/website/src/theme/Admonition/Types.js @@ -4,15 +4,15 @@ import DefaultAdmonitionTypes from '@theme-original/Admonition/Types'; const {info: Info} = DefaultAdmonitionTypes; -function MyCustomAdmonition(props) { +function ImportantAdmonition({ className, ...rest }) { return ( - + ); } const AdmonitionTypes = { ...DefaultAdmonitionTypes, - important: MyCustomAdmonition, + important: ImportantAdmonition, }; export default AdmonitionTypes; From 9108d774d6c93b331db2c34156d0ea008b3cb89d Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Mon, 27 Apr 2026 21:19:56 +0200 Subject: [PATCH 3/4] convert to TSX, shade tweak, use new admonition in one more fragment --- docs/_experimental-channel-api-warning.mdx | 2 +- website/src/css/customTheme.scss | 4 ++-- website/src/theme/Admonition/{Types.js => Types.tsx} | 7 +++---- .../version-0.82/_experimental-channel-api-warning.mdx | 2 +- .../version-0.83/_experimental-channel-api-warning.mdx | 2 +- .../version-0.84/_experimental-channel-api-warning.mdx | 2 +- .../version-0.85/_experimental-channel-api-warning.mdx | 2 +- 7 files changed, 10 insertions(+), 11 deletions(-) rename website/src/theme/Admonition/{Types.js => Types.tsx} (61%) diff --git a/docs/_experimental-channel-api-warning.mdx b/docs/_experimental-channel-api-warning.mdx index ffcfae347fe..92a7b2c8c2f 100644 --- a/docs/_experimental-channel-api-warning.mdx +++ b/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.** diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss index 6d45c145c83..54271d68623 100644 --- a/website/src/css/customTheme.scss +++ b/website/src/css/customTheme.scss @@ -673,11 +673,11 @@ html[data-theme="dark"] article .badge { 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 { diff --git a/website/src/theme/Admonition/Types.js b/website/src/theme/Admonition/Types.tsx similarity index 61% rename from website/src/theme/Admonition/Types.js rename to website/src/theme/Admonition/Types.tsx index 638784cbc39..caf434a96de 100644 --- a/website/src/theme/Admonition/Types.js +++ b/website/src/theme/Admonition/Types.tsx @@ -1,13 +1,12 @@ 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 }) { - return ( - - ); +function ImportantAdmonition({className, ...rest}: Props) { + return ; } const AdmonitionTypes = { diff --git a/website/versioned_docs/version-0.82/_experimental-channel-api-warning.mdx b/website/versioned_docs/version-0.82/_experimental-channel-api-warning.mdx index ffcfae347fe..92a7b2c8c2f 100644 --- a/website/versioned_docs/version-0.82/_experimental-channel-api-warning.mdx +++ b/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.** diff --git a/website/versioned_docs/version-0.83/_experimental-channel-api-warning.mdx b/website/versioned_docs/version-0.83/_experimental-channel-api-warning.mdx index ffcfae347fe..92a7b2c8c2f 100644 --- a/website/versioned_docs/version-0.83/_experimental-channel-api-warning.mdx +++ b/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.** diff --git a/website/versioned_docs/version-0.84/_experimental-channel-api-warning.mdx b/website/versioned_docs/version-0.84/_experimental-channel-api-warning.mdx index ffcfae347fe..92a7b2c8c2f 100644 --- a/website/versioned_docs/version-0.84/_experimental-channel-api-warning.mdx +++ b/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.** diff --git a/website/versioned_docs/version-0.85/_experimental-channel-api-warning.mdx b/website/versioned_docs/version-0.85/_experimental-channel-api-warning.mdx index ffcfae347fe..92a7b2c8c2f 100644 --- a/website/versioned_docs/version-0.85/_experimental-channel-api-warning.mdx +++ b/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.** From 45700e6a3bb2858b57d52ab4ed7a68383ce6f91c Mon Sep 17 00:00:00 2001 From: Bartosz Kaszubowski Date: Mon, 27 Apr 2026 21:30:05 +0200 Subject: [PATCH 4/4] improve Tip admonition heading color in light mode --- website/src/css/customTheme.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss index 54271d68623..512c910f956 100644 --- a/website/src/css/customTheme.scss +++ b/website/src/css/customTheme.scss @@ -693,6 +693,20 @@ html[data-theme="dark"] { } } +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 */ .homepage {