Match admonition colors to the original site and allow hiding their icon

app/components/prose/ProseCaution.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useAppConfig } from '#imports'
+import Callout from '#ui/components/prose/Callout.vue'
+
+// Set `::caution{icon=""}` in the markdown to hide the default icon for
+// that one instance (useful when the body already starts with its own
+// emoji).
+const props = withDefaults(defineProps<{ icon?: string }>(), {
+  icon: undefined,
+})
+const appConfig = useAppConfig()
+const icon = computed(() => props.icon !== undefined ? props.icon : appConfig.ui.icons.caution)
+</script>
+
+<template>
+  <Callout
+    color="error"
+    :icon="icon"
+  >
+    <slot mdc-unwrap="p" />
+  </Callout>
+</template>

app/components/prose/ProseNote.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useAppConfig } from '#imports'
+import Callout from '#ui/components/prose/Callout.vue'
+
+// Set `::note{icon=""}` in the markdown to hide the default icon for that
+// one instance (useful when the body already starts with its own emoji).
+const props = withDefaults(defineProps<{ icon?: string }>(), {
+  icon: undefined,
+})
+const appConfig = useAppConfig()
+const icon = computed(() => props.icon !== undefined ? props.icon : appConfig.ui.icons.info)
+</script>
+
+<template>
+  <Callout
+    color="info"
+    :icon="icon"
+  >
+    <slot mdc-unwrap="p" />
+  </Callout>
+</template>

app/components/prose/ProseTip.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useAppConfig } from '#imports'
+import Callout from '#ui/components/prose/Callout.vue'
+
+// Set `::tip{icon=""}` in the markdown to hide the default icon for that
+// one instance (useful when the body already starts with its own emoji).
+const props = withDefaults(defineProps<{ icon?: string }>(), {
+  icon: undefined,
+})
+const appConfig = useAppConfig()
+const icon = computed(() => props.icon !== undefined ? props.icon : appConfig.ui.icons.tip)
+</script>
+
+<template>
+  <Callout
+    color="success"
+    :icon="icon"
+  >
+    <slot mdc-unwrap="p" />
+  </Callout>
+</template>

app/components/prose/ProseWarning.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useAppConfig } from '#imports'
+import Callout from '#ui/components/prose/Callout.vue'
+
+// Set `::warning{icon=""}` in the markdown to hide the default icon for
+// that one instance (useful when the body already starts with its own
+// emoji).
+const props = withDefaults(defineProps<{ icon?: string }>(), {
+  icon: undefined,
+})
+const appConfig = useAppConfig()
+const icon = computed(() => props.icon !== undefined ? props.icon : appConfig.ui.icons.warning)
+</script>
+
+<template>
+  <Callout
+    color="warning"
+    :icon="icon"
+  >
+    <slot mdc-unwrap="p" />
+  </Callout>
+</template>