vitrine

callouts: hoist background fill into --callout-fill, raise it for warning

commit f38ddfc771a93c34be194485e81ec2a599397680 · parent f489993737 · browse this tree
Ximianth, 2026-08-09 12:14:11 UTC

The tinted background strength is now a --callout-fill variable rather
than a literal, so a type can override it.  Orange is a perceptually
weaker hue than the others at the same mix, so warning alone bumps to
18% to hold comparable presence.

diff --git a/style.css b/style.css
index 7ade875..42fcaf2 100644
--- a/style.css
+++ b/style.css
@@ -118,13 +118,14 @@ article th { background: var(--well); }
    title-less callout shows no icon. */
 article .callout {
 	--callout: var(--accent);
+	--callout-fill: 12%; /* how much of --callout tints the box background */
 	margin-top: 1.25rem;
 	margin-bottom: 1.25rem;
 	padding: .7rem 1rem;
 	border: 1px solid color-mix(in srgb, var(--callout) 45%, var(--well-edge));
 	border-left: 3px solid var(--callout);
 	border-radius: .5rem;
-	background: color-mix(in srgb, var(--callout) 12%, var(--paper));
+	background: color-mix(in srgb, var(--callout) var(--callout-fill), var(--paper));
 	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
 }
 /* The children are already inset by "article > *"; inside the box they
@@ -155,7 +156,7 @@ article .callout-note { --callout-icon: "\2139\FE0F"; }  /* information source,
 article .callout-tip { --callout: #c99000; --callout-icon: "\1F4A1"; }     /* light bulb, sunflower gold */
 article .callout-success { --callout: #1a7f37; --callout-icon: "\2705"; }  /* check mark, green */
 article .callout-todo { --callout: #8250df; --callout-icon: "\1F6A7"; }    /* construction sign, purple */
-article .callout-warning { --callout: #ef7c00; --callout-icon: "\26A0\FE0F"; } /* warning sign, orange */
+article .callout-warning { --callout: #ef7c00; --callout-fill: 18%; --callout-icon: "\26A0\FE0F"; } /* warning sign, orange (weaker hue, so tinted harder) */
 article .callout-danger { --callout: #cf222e; --callout-icon: "\1F9E8"; }   /* firecracker, red */
 article .callout-reject { --callout: #cf222e; --callout-icon: "\274C"; }    /* cross mark, red */