Add admonitions

docs/syntax/admonitions.md

@@ -7,82 +7,148 @@ Admonitions allow you to highlight important information with varying levels of
 Admonitions can span multiple lines and support inline formatting.
 Available admonition types include:
 
-- Note
-- Warning
-- Tip
-- Important
-- Plain
+- [Note](#note)
+- [Warning](#warning)
+- [Tip](#tip)
+- [Important](#important)
+- [Plain](#plain)
 
 ### Note
 
 A relevant piece of information with no serious repercussions if ignored.
 
-```markdown
+
+:::::{tab-set}
+
+::::{tab-item} Output
+
 :::{note}
 This is a note.
 It can span multiple lines and supports inline formatting.
 :::
-```
 
+::::
+
+::::{tab-item} Markdown
+
+```markdown
 :::{note}
 This is a note.
+It can span multiple lines and supports inline formatting.
 :::
+```
+
+::::
+
+:::::
 
 ### Warning
 
 You could permanently lose data or leak sensitive information.
 
-```markdown
+:::::{tab-set}
+
+::::{tab-item} Output
+
 :::{warning}
 This is a warning.
 :::
-```
 
+::::
+
+::::{tab-item} Markdown
+
+```markdown
 :::{warning}
 This is a warning.
 :::
+```
+
+::::
+
+:::::
 
 ### Tip
 
 Advice to help users make better choices when using a feature.
 
-```markdown
+You could permanently lose data or leak sensitive information.
+
+:::::{tab-set}
+
+::::{tab-item} Output
+
 :::{tip}
 This is a tip.
 :::
-```
 
+::::
+
+::::{tab-item} Markdown
+
+```markdown
 :::{tip}
 This is a tip.
 :::
+```
+
+::::
+
+:::::
 
 ### Important
 
 Ignoring this information could impact performance or the stability of your system.
 
-```markdown
+:::::{tab-set}
+
+::::{tab-item} Output
+
 :::{important}
 This is an important notice.
 :::
-```
 
+::::
+
+::::{tab-item} Markdown
+
+```markdown
 :::{important}
 This is an important notice.
 :::
+```
+
+::::
+
+:::::
 
 ### Plain
 
 A plain admonition is a callout with no further styling. Useful to create a callout that does not quite fit the mold of the stylized admonitions.
 
-```markdown
+
+
+:::::{tab-set}
+
+::::{tab-item} Output
+
 :::{admonition} This is my callout
 It can *span* multiple lines and supports inline formatting.
 :::
-```
 
+::::
+
+::::{tab-item} Markdown
+
+```markdown
 :::{admonition} This is my callout
 It can *span* multiple lines and supports inline formatting.
 :::
+```
+
+::::
+
+:::::
 
 ## Collapsible admonitions
 
@@ -92,20 +158,33 @@ Collapsible admonitions are deprecated. Do not use them. Use [dropdowns](./dropd
 
 Use `:open: <bool>` to make an admonition collapsible.
 
-```markdown
+:::::{tab-set}
+
+::::{tab-item} Output
+
 :::{note}
 :open:
 
 Longer content can be collapsed to take less space.
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 :::
-```
 
+
+::::
+
+::::{tab-item} Markdown
+
+```markdown
 :::{note}
 :open:
 
 Longer content can be collapsed to take less space.
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 :::
+```
+
+::::
+
+:::::

src/Elastic.Markdown/Assets/markdown/admonition.css

@@ -0,0 +1,57 @@
+@layer components {
+	.admonition {
+		@apply mt-4 pb-4 rounded-sm border-1;
+
+		.admonition-title {
+			@apply px-4 py-2 font-bold flex items-center gap-2 rounded-t-sm;
+			svg {
+				@apply size-6;
+			}
+		}
+		.admonition-content {
+			@apply px-4;
+
+			& > *:first-child {
+				@apply mt-3!;
+			}
+		}
+
+		&.note {
+			@apply border-blue-elastic-40 bg-blue-elastic-10;
+			.admonition-title {
+				@apply text-blue-elastic-90 bg-blue-elastic-20;
+			}
+		}
+
+		&.tip {
+			@apply border-teal-40 bg-teal-10;
+			.admonition-title {
+				@apply text-teal-90 bg-teal-20;
+			}
+		}
+
+		&.warning {
+			@apply border-yellow-40 bg-yellow-10;
+
+			.admonition-title {
+				@apply text-yellow-90 bg-yellow-20;
+			}
+		}
+
+		&.important {
+			@apply border-purple-40 bg-purple-10;
+
+			.admonition-title {
+				@apply text-purple-90 bg-purple-20;
+			}
+		}
+
+		&.plain {
+			@apply border-grey-40 bg-grey-10;
+
+			.admonition-title {
+				@apply text-grey-90 bg-grey-20;
+			}
+		}
+	}
+}

src/Elastic.Markdown/Assets/markdown/code.css

@@ -1,7 +1,5 @@
 @layer components {
 	.markdown-content {
-
-
 		.highlight {
 			@apply mt-4;
 		}
@@ -69,7 +67,7 @@
 		bg-gray-100
 		rounded-xs
 		border-1
-		border-gray-200
+		border-gray-300
 		inline-block
 		text-nowrap
 		;

src/Elastic.Markdown/Assets/styles.css

@@ -7,6 +7,7 @@
 @import "./markdown/tabs.css";
 @import "./markdown/code.css";
 @import "./copybutton.css";
+@import "./markdown/admonition.css";
 
 #default-search::-webkit-search-cancel-button {
 	padding-right: calc(var(--spacing) * 2);