rename notes to tooltips, implement initial styling

src/styles/markdown/tooltips.scss

@@ -0,0 +1,67 @@
+:root {
+	--tooltip_margin: var(--spc-4x);
+	--tooltip_padding-vertical: var(--spc-3x);
+	--tooltip_padding-start: var(--spc-3x);
+	--tooltip_padding-end: var(--spc-5x);
+	--tooltip_icon-size: var(--icon-size_dense);
+	--tooltip_icon-margin: var(--spc-2x);
+	--tooltip_icon-color: var(--primary_default);
+
+	--tooltip_desc-padding-vertical: var(--spc-1x);
+	--tooltip_desc-gap: var(--spc-1x);
+
+	--tooltip_corner-radius: var(--corner-radius_m);
+
+	--tooltip_background-color: var(--surface_primary_emphasis-none);
+	--tooltip_foreground-color: var(--foreground_emphasis-high);
+}
+
+.tooltip {
+	background-color: var(--tooltip_background-color);
+	color: var(--tooltip_foreground-color);
+
+	border-radius: var(--tooltip_corner-radius);
+
+	margin: var(--tooltip_margin) 0;
+	padding: var(--tooltip_padding-vertical) 0;
+	padding-left: var(--tooltip_padding-start);
+	padding-right: var(--tooltip_padding-end);
+
+	&__title {
+		display: flex;
+		align-items: center;
+		gap: var(--tooltip_icon-margin);
+
+		&> svg {
+			width: var(--tooltip_icon-size);
+			height: var(--tooltip_icon-size);
+			color: var(--tooltip_icon-color);
+		}
+
+		&> p {
+			@extend .text-style-body-medium-bold;
+			margin: 0;
+		}
+	}
+
+	&__content {
+		padding-left: calc(var(--tooltip_icon-size) + var(--tooltip_icon-margin));
+		margin-top: var(--tooltip_desc-gap);
+
+		&> * {
+			@extend .text-style-body-small;
+		}
+
+		&> *:first-child {
+			margin-top: 0;
+			padding-top: 0;
+		}
+
+		&> *:last-child {
+			margin-bottom: 0;
+			padding-bottom: 0;
+		}
+	}
+}
+
+

src/styles/post-body.scss

@@ -1,6 +1,4 @@
 @import "src/tokens/index";
-@import "src/styles/markdown/hints";
-@import "src/styles/markdown/table";
 
 .post-body {
 	h1 {
@@ -44,7 +42,7 @@
 		margin-bottom: var(--p_block-padding-vertical);
 	}
 
-	ul, blockquote {
+	ul {
 		margin-top: var(--p_block-padding-vertical);
 		margin-bottom: var(--p_block-padding-vertical);
 	}
@@ -157,32 +155,8 @@
 		padding: 2px 4px;
 		white-space: nowrap;
 	}
-
-	blockquote {
-		position: relative;
-		margin-left: 1em;
-		color: var(--midImpactBlack);
-
-		&::before {
-			content: " ";
-			position: absolute;
-			left: 0;
-			top: 0;
-			height: 100%;
-			width: 3px;
-			background: var(--darkPrimary);
-			left: -1em;
-		}
-
-		/*a {
-        color: rgba(0, 10, 125, 0.6);
-    }*/
-	}
-
-	blockquote.bigBlock {
-		&,
-		& * {
-			font-size: 1.5rem;
-		}
-	}
 }
+
+@import "src/styles/markdown/hints";
+@import "src/styles/markdown/table";
+@import "src/styles/markdown/tooltips";

src/utils/markdown/index.ts

@@ -2,7 +2,7 @@ import { Plugin } from "unified";
 import rehypeSlug from "rehype-slug-custom-id";
 import rehypeRaw from "rehype-raw";
 import { rehypeTabs } from "./tabs/rehype-transform";
-import { rehypeNotes } from "./notes/rehype-transform";
+import { rehypeTooltips } from "./tooltips/rehype-transform";
 import { rehypeHints } from "./hints/rehype-transform";
 import { rehypeAstroImageMd } from "./rehype-astro-image-md";
 import { rehypeUnicornElementMap } from "./rehype-unicorn-element-map";
@@ -55,7 +55,7 @@ export function createRehypePlugins(config: MarkdownConfig): RehypePlugin[] {
 					 */
 					rehypeTabs,
 					rehypeHints,
-					rehypeNotes,
+					rehypeTooltips,
 					rehypeAstroImageMd,
 					rehypeUnicornIFrameClickToRun,
 					rehypeHeadingLinks,

src/utils/markdown/tooltips/rehype-transform.ts

@@ -2,7 +2,7 @@ import { Root } from "hast";
 import { visit } from "unist-util-visit";
 import { Plugin } from "unified";
 import { Element } from "hast";
-import { Note } from "./notes";
+import { Tooltip } from "./tooltips";
 import { toString } from "hast-util-to-string";
 
 /**
@@ -18,7 +18,7 @@ import { toString } from "hast-util-to-string";
  *  <p><em>{title}:</em> ...</p>
  * </blockquote>
  */
-export const rehypeNotes: Plugin<[], Root> = () => {
+export const rehypeTooltips: Plugin<[], Root> = () => {
 	return (tree) => {
 		visit(tree, (node: Element, index, parent: Element) => {
 			if (node.tagName !== "blockquote") return;
@@ -42,7 +42,7 @@ export const rehypeNotes: Plugin<[], Root> = () => {
 			// remove `firstText` from children nodes
 			firstParagraph.children.splice(0, 1);
 
-			parent.children[index] = Note({
+			parent.children[index] = Tooltip({
 				icon: firstText.tagName === "em" ? "warning" : "info",
 				title: toString(firstText).replace(/:$/, ""),
 				children: node.children,

src/utils/markdown/tooltips/tooltips.tsx

@@ -6,21 +6,21 @@ import { promises as fs } from "fs";
 const info = await fs.readFile("src/icons/info.svg", "utf8");
 const warning = await fs.readFile("src/icons/warning.svg", "utf8");
 
-interface NoteProps {
+interface TooltipProps {
 	icon: "info" | "warning";
 	title: string;
 	children: Node[];
 };
 
 /** @jsxImportSource hastscript */
-export function Note({ icon, title, children }: NoteProps): Element {
+export function Tooltip({ icon, title, children }: TooltipProps): Element {
 	return (
-		<blockquote class="note">
-			<div class="note__title">
+		<blockquote class="tooltip">
+			<div class="tooltip__title">
 				{icon === "info" ? fromHtml(info) : fromHtml(warning)}
 				<p>{title}</p>
 			</div>
-			<div class="note__content">
+			<div class="tooltip__content">
 				{children}
 			</div>
 		</blockquote>