Add warning admonition

_components/Admonition.tsx

@@ -1,7 +1,9 @@
 type AdmonitionType =
   | "note"
+  | "info"
+  | "tip"
   | "caution"
-  | "tip";
+  | "warning";
 
 export default function Admonition(
   props: { type: AdmonitionType; children: any },

markdown-it/admonition.ts

@@ -6,10 +6,10 @@ export default function admonitionPlugin(md: any) {
     for (let i = 0; i < tokens.length; i++) {
       if (
         tokens[i].type === "inline" &&
-        tokens[i].content.match(/^:::(note|info|tip|caution)(\s+(.*))?/)
+        tokens[i].content.match(/^:::(note|info|tip|caution|warning)(\s+(.*))?/)
       ) {
         const match = tokens[i].content.match(
-          /^:::(note|info|tip|caution)(\s+(.*))?/,
+          /^:::(note|info|tip|caution|warning)(\s+(.*))?/,
         );
         const type = match[1];
         const title = match[3] || type.charAt(0).toUpperCase() + type.slice(1);

styleguide/writing.md

@@ -130,9 +130,13 @@ Use admonitions sparingly to highlight important information:
 ```markdown
 :::note Important supplementary information. :::
 
+:::info Informational content (styled like note). :::
+
 :::tip Helpful advice for better usage. :::
 
 :::caution Warn about potential issues or gotchas. :::
+
+:::warning Critical warnings that require immediate attention. :::
 ```
 
 ### Tables

styles.css

@@ -737,7 +737,8 @@
         @apply bg-runtime-50 dark:bg-runtime-950/30 dark:border
           dark:border-runtime-950 border-runtime-200;
       }
-      &.caution {
+      &.caution,
+      &.warning {
         @apply bg-yellow-100 dark:bg-yellow-950/75 dark:border
           dark:border-yellow-400 border-yellow-200;