feat: tweak asides

trueberryless-org · Jan 19, 2025 · 35683ed · 35683ed
1 parent f3fa93b
commit 35683ed
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 0 deletions.
diff --git a/packages/theme/index.ts b/packages/theme/index.ts
@@ -9,6 +9,7 @@ export default function createPlugin(): StarlightPlugin {
 				updateConfig({
 					customCss: [
 						"starlight-minimalistic-theme/styles/theme.css",
+						"starlight-minimalistic-theme/styles/asides.css",
 						...(config.customCss ?? []),
 					],
 				});

diff --git a/packages/theme/styles/asides.css b/packages/theme/styles/asides.css
@@ -0,0 +1,57 @@
+.starlight-aside {
+	padding: 1rem;
+	border: 1px solid;
+	border-radius: 0.5rem;
+	color: var(--sl-color-white);
+	font-size: 0.9375rem;
+}
+.starlight-aside--note {
+	--sl-color-asides-text-accent: var(--sl-color-blue-high);
+	border-color: var(--sl-color-blue);
+	background-color: color-mix(
+		in srgb,
+		var(--sl-color-blue-low),
+		transparent 75%
+	);
+}
+.starlight-aside--tip {
+	--sl-color-asides-text-accent: var(--sl-color-purple-high);
+	border-color: var(--sl-color-purple);
+	background-color: color-mix(
+		in srgb,
+		var(--sl-color-purple-low),
+		transparent 75%
+	);
+}
+.starlight-aside--caution {
+	--sl-color-asides-text-accent: var(--sl-color-orange-high);
+	border-color: var(--sl-color-orange);
+	background-color: color-mix(
+		in srgb,
+		var(--sl-color-orange-low),
+		transparent 75%
+	);
+}
+.starlight-aside--danger {
+	--sl-color-asides-text-accent: var(--sl-color-red-high);
+	border-color: var(--sl-color-red);
+	background-color: color-mix(
+		in srgb,
+		var(--sl-color-red-low),
+		transparent 75%
+	);
+}
+
+.starlight-aside__title {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	font-weight: 600;
+	line-height: var(--sl-line-height-headings);
+}
+
+.starlight-aside__icon {
+	color: var(--sl-color-asides-text-accent);
+	width: 1em;
+	height: 1em;
+}