callout colors

webapp/src/app.css

@@ -2,4 +2,19 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+    --callout-note: 68, 138, 255;
+    --callout-summary: 0, 176, 255;
+    --callout-info: 0, 184, 212;
+    --callout-hint: 0, 184, 212;
+    --callout-success: 0, 200, 83;
+    --callout-question: 100, 221, 23;
+    --callout-warning: 255, 145, 0;
+    --callout-fail: 255, 82, 82;
+    --callout-error: 255, 23, 68;
+    --callout-bug: 255, 23, 68;
+    --callout-example: 124, 77, 255;
+    --callout-quote: 158, 158, 158;
 
+    --callout-color: var(--callout-note);
+}

webapp/src/lib/marked/renderers/Callout.svelte

@@ -19,12 +19,14 @@
 		const pos = titleElement.innerHTML.indexOf('<br>');
 		if (pos >= 0) {
 			titleElement.innerHTML = titleElement.innerHTML.substring(pos + 4);
+		} else {
+			titleElement.innerHTML = '';
 		}
 	}
 </script>
 
-<div class="border-l-4 border-l-[#448aff] bg-neutral-100 my-4">
+<div class="border-l-4 border-l-callout bg-neutral-100 my-4">
-	<div class="p-[10px] bg-[{color}]/10">
+	<div class="p-[10px] bg-callout-bg">
 		<span class="font-bold text-md">[{type}]</span>
 		<span class="font-bold text-md">{title}</span>
 	</div>

webapp/src/lib/util/callout.ts

@@ -0,0 +1,123 @@
+type calloutType = {
+	color: string;
+	icon: string;
+};
+
+const calloutTypes = {
+	note: {
+		color: 'callout-note',
+		icon: ''
+	},
+	abstract: {
+		color: 'callout-summary',
+		icon: ''
+	},
+	summary: {
+		color: 'callout-summary',
+		icon: ''
+	},
+	tldr: {
+		color: 'callout-summary',
+		icon: ''
+	},
+	info: {
+		color: 'callout-info',
+		icon: ''
+	},
+	todo: {
+		color: 'callout-info',
+		icon: ''
+	},
+	tip: {
+		color: 'callout-hint',
+		icon: ''
+	},
+	hint: {
+		color: 'callout-hint',
+		icon: ''
+	},
+	important: {
+		color: 'callout-hint',
+		icon: ''
+	},
+	success: {
+		color: 'callout-success',
+		icon: ''
+	},
+	check: {
+		color: 'callout-success',
+		icon: ''
+	},
+	done: {
+		color: 'callout-success',
+		icon: ''
+	},
+	question: {
+		color: 'callout-question',
+		icon: ''
+	},
+	help: {
+		color: 'callout-question',
+		icon: ''
+	},
+	faq: {
+		color: 'callout-question',
+		icon: ''
+	},
+	warning: {
+		color: 'callout-warning',
+		icon: ''
+	},
+	caution: {
+		color: 'callout-warning',
+		icon: ''
+	},
+	attention: {
+		color: 'callout-warning',
+		icon: ''
+	},
+	failure: {
+		color: 'callout-fail',
+		icon: ''
+	},
+	fail: {
+		color: 'callout-fail',
+		icon: ''
+	},
+	missing: {
+		color: 'callout-fail',
+		icon: ''
+	},
+	danger: {
+		color: 'callout-error',
+		icon: ''
+	},
+	error: {
+		color: 'callout-error',
+		icon: ''
+	},
+	bug: {
+		color: 'callout-bug',
+		icon: ''
+	},
+	example: {
+		color: 'callout-example',
+		icon: ''
+	},
+	quote: {
+		color: 'callout-quote',
+		icon: ''
+	},
+	cite: {
+		color: 'callout-quote',
+		icon: ''
+	}
+};
+
+export function getCalloutType(typeString: string): calloutType {
+	return 'note';
+}
+
+export function getCalloutColor(): string {
+	return '';
+}

webapp/tailwind.config.cjs

@@ -3,7 +3,12 @@ module.exports = {
 	darkMode: 'class',
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
-		extend: {}
+		extend: {
+			colors: {
+				callout: 'rgb(var(--callout-color))',
+				'callout-bg': 'rgba(var(--callout-color), 0.1)'
+			}
+		}
 	},
 	plugins: [require('@tailwindcss/typography')]
 };