[Docs Site] Overhaul aside styling (#17036)

Author: KianNH

astro.config.mjs

@@ -146,6 +146,7 @@ export default defineConfig({
 			},
 			sidebar: await autogenSections(),
 			customCss: [
+				"./src/asides.css",
 				"./src/headings.css",
 				"./src/input.css",
 				"./src/kbd.css",

src/asides.css

@@ -0,0 +1,36 @@
+.starlight-aside {
+	border: unset;
+	border-radius: 4px;
+
+	&.starlight-aside--note {
+		background-color: rgb(236, 244, 255);
+	}
+
+	&.starlight-aside--caution {
+		background-color: rgb(255, 248, 228);
+
+	}
+
+	.starlight-aside__title {
+		margin-left: 30px;
+
+		svg {
+			margin-left: -30px;
+		}
+	}
+
+	.starlight-aside__content {
+		margin-top: unset;
+		margin-left: 30px;
+	}
+}
+
+:root[data-theme="dark"] {
+	.starlight-aside--note {
+		background-color: rgb(0, 28, 67);
+	}
+
+	.starlight-aside--caution {
+		background-color: rgb(98, 73, 10);
+	}
+}