refactor: redesign admonitions/callouts/quotes (#5193)

* prepare admonitions redesign

* Docusaurus admonition cleanup

* cover more edge cases in Docusaurus admonitions page: interleaving code blocks and links

* cover more edge cases in Docusaurus admonitions page: interleaving code blocks and links

* update Infima with new alerts

packages/docusaurus-plugin-content-blog/src/index.ts

@@ -101,16 +101,6 @@ export default function pluginContentBlog(
       );
     },
 
-    getClientModules() {
-      const modules = [];
-
-      if (options.admonitions) {
-        modules.push(require.resolve('remark-admonitions/styles/infima.css'));
-      }
-
-      return modules;
-    },
-
     // Fetches blog contents and returns metadata for the necessary routes.
     async loadContent() {
       const {postsPerPage, routeBasePath} = options;

packages/docusaurus-plugin-content-docs/src/index.ts

@@ -110,14 +110,6 @@ export default function pluginContentDocs(
       return getLoadedContentTranslationFiles(content);
     },
 
-    getClientModules() {
-      const modules = [];
-      if (options.admonitions) {
-        modules.push(require.resolve('remark-admonitions/styles/infima.css'));
-      }
-      return modules;
-    },
-
     getPathsToWatch() {
       function getVersionPathsToWatch(version: VersionMetadata): string[] {
         const result = [

packages/docusaurus-plugin-content-pages/src/index.ts

@@ -93,16 +93,6 @@ export default function pluginContentPages(
       );
     },
 
-    getClientModules() {
-      const modules = [];
-
-      if (options.admonitions) {
-        modules.push(require.resolve('remark-admonitions/styles/infima.css'));
-      }
-
-      return modules;
-    },
-
     async loadContent() {
       const {include} = options;
 

packages/docusaurus-theme-classic/package.json

@@ -39,7 +39,7 @@
     "copy-text-to-clipboard": "^3.0.1",
     "fs-extra": "^10.0.0",
     "globby": "^11.0.2",
-    "infima": "0.2.0-alpha.26",
+    "infima": "0.2.0-alpha.27",
     "lodash": "^4.17.20",
     "parse-numeric-range": "^1.2.0",
     "postcss": "^8.2.15",

packages/docusaurus-theme-classic/src/admonitions.css

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.admonition h5 {
+  margin-top: 0;
+  margin-bottom: 8px;
+  text-transform: uppercase;
+}
+
+.admonition-icon {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 0.4em;
+}
+
+.admonition-icon svg {
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  stroke-width: 0;
+  fill: var(--ifm-alert-emphasis-color);
+  stroke: var(--ifm-alert-emphasis-color);
+}
+
+.admonition-content > :last-child {
+  margin-bottom: 0;
+}
+
+.admonition {
+  margin-bottom: 1em;
+}

packages/docusaurus-theme-classic/src/index.ts

@@ -145,6 +145,7 @@ export default function docusaurusThemeClassic(
       const modules = [
         require.resolve(getInfimaCSSFile(direction)),
         path.resolve(__dirname, './prism-include-languages'),
+        path.resolve(__dirname, './admonitions.css'),
       ];
 
       if (customCss) {