💄 Dials in button colors

Author: ahaywood

src/plugins/expressive-code/explain-code.js

@@ -4,61 +4,6 @@ import { definePlugin } from "@expressive-code/core";
 export default () => {
 	return definePlugin({
 		name: "Adds 'Explain Code' button to code blocks with 10+ lines",
-		baseStyles: `
-		.explain-button {
-			position: absolute;
-			top: 0.5rem;
-			right: 0.5rem;
-			z-index: 10;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			width: 2rem;
-			height: 2rem;
-			padding: 0;
-			border: 1px solid var(--ec-brdCol);
-			border-radius: 0.25rem;
-			background: var(--sl-color-bg);
-			color: var(--sl-color-text);
-			cursor: pointer;
-			transition: all 0.2s;
-			opacity: 1;
-		}
-
-		.explain-button:hover {
-			background: var(--sl-color-gray-6);
-			border-color: var(--sl-color-text-accent);
-		}
-
-		.explain-button:focus {
-			outline: 2px solid var(--sl-color-text-accent);
-			outline-offset: 2px;
-		}
-
-		.explain-button svg {
-			width: 1rem;
-			height: 1rem;
-		}
-
-		.explain-tooltip {
-			position: absolute;
-			top: -2rem;
-			right: 0;
-			padding: 0.25rem 0.5rem;
-			background: var(--sl-color-black);
-			color: var(--sl-color-white);
-			font-size: 0.75rem;
-			border-radius: 0.25rem;
-			white-space: nowrap;
-			opacity: 0;
-			pointer-events: none;
-			transition: opacity 0.2s;
-		}
-
-		.explain-button:hover .explain-tooltip {
-			opacity: 1;
-		}
-		`,
 		hooks: {
 			postprocessRenderedBlock: async (context) => {
 				const lineCount = context.codeBlock.code.split("\n").length;

src/styles/code.css

@@ -10,3 +10,80 @@
 .has-explain-button + .copy {
 	right: 3rem;
 }
+
+/* Explain Code button styles */
+.explain-button {
+	position: absolute;
+	top: 0.5rem;
+	right: 0.5rem;
+	z-index: 10;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 2rem;
+	height: 2rem;
+	padding: 0;
+	border: 1px solid #666a6b;
+	border-radius: 0.25rem;
+	background: transparent;
+	color: var(--sl-color-text);
+	cursor: pointer;
+	transition: all 0.2s;
+	opacity: 1;
+}
+
+.explain-button:hover {
+	background: #525555;
+	border-color: #909899;
+}
+
+.explain-button:focus {
+	outline: 2px solid var(--sl-color-text-accent);
+	outline-offset: 2px;
+}
+
+.explain-button svg {
+	width: 1rem;
+	height: 1rem;
+}
+
+/* Light mode styles */
+@media (prefers-color-scheme: light) {
+	.explain-button {
+		border-color: #cdcecf;
+		color: #828587;
+	}
+
+	.explain-button:hover {
+		background: #dededf;
+		border-color: #a8aaac;
+		color: #585c5f;
+	}
+}
+
+.explain-tooltip {
+	position: absolute;
+	bottom: calc(100% + 0.25rem);
+	left: 45%;
+	transform: translateX(-50%);
+	padding: 0.5rem 0.75rem;
+	background: var(--sl-color-black);
+	color: var(--sl-color-white);
+	font-size: 0.75rem;
+	line-height: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 1px solid var(--sl-color-gray-5);
+	white-space: nowrap;
+	min-width: max-content;
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 0.2s;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+	z-index: 100;
+}
+
+.explain-button:hover .explain-tooltip {
+	opacity: 1;
+}