max / makeover-webview

Compose the cast shadow for a surface that overlays the page Wave 2 tier A1, the webview half. makeover derives the tone, this crate owns the geometry, which is the same split the bevel pair already has and means neither crate holds the other's numbers. Two lengths rather than one: a single blur reads as a smudge at plate size and as a halo at menu size. The offset is small and downward, because a Platinum-era menu sits just off the page rather than hovering above it. A :root property and deliberately not a depth class. makeover-layout has no Depth::Overlay, and adding one would be a claim about what a screen means rather than about how it is painted. Until a description asks for it, a consumer names --elevation-overlay on the rule for the menu or the toast it already has. A test asserts it stays out of the depth classes.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: Max Johnson <me@maxj.phd> · 2026-08-10 14:41 UTC

Signed with PGP, not checked

Commit: c52c5d5bb2dc7abc9c513853c739a64c57d8368c

Parent: 9aad45e

1 file changed, +36 insertions, -0 deletions

M src/lib.rs +36

			@@ -302,9 +302,26 @@
302	302		bevel_shadow(bevel, opts)
303	303		);
304	304		}
	305	+	css.push_str(ELEVATION_PROPERTY);
305	306		css
306	307		}
307	308
	309	+	/// The cast shadow of a surface that floats over the page.
	310	+	///
	311	+	/// Composed here for the reason the bevel pair is: `makeover` derives the tone,
	312	+	/// this crate owns the geometry, and neither has to know the other's numbers.
	313	+	///
	314	+	/// Only for a surface that overlays the page. A menu, a toast, a popover, a
	315	+	/// dropdown. A surface in the page takes `.raised` and its bevel, and a rule
	316	+	/// that reaches for this on a card or a plate has renamed a literal rather than
	317	+	/// replaced it.
	318	+	///
	319	+	/// Two lengths rather than one, because a single blur reads as a smudge at
	320	+	/// plate size and as a halo at menu size. The offset is small and downward: a
	321	+	/// Platinum-era menu sits just off the page rather than hovering above it.
	322	+	const ELEVATION_PROPERTY: &str =
	323	+	" --elevation-overlay: 0 2px 4px var(--elevation), 0 8px 24px var(--elevation);\n";
	324	+
308	325		/// The class name for a depth.
309	326		#[must_use]
310	327		pub fn depth_class(depth: Depth, opts: &Emit) -> Option<String> {
			@@ -965,6 +982,25 @@
965	982		assert!(css.contains("var(--bevel-inset)"));
966	983		}
967	984
	985	+	/// The cast shadow is composed here from the tone `makeover` derives, so
	986	+	/// neither crate has to hold the other's numbers.
	987	+	///
	988	+	/// It is a `:root` property and deliberately not a depth class. There is no
	989	+	/// `Depth::Overlay` in the description layer, and adding one would be a
	990	+	/// claim about what a screen means rather than about how it is painted;
	991	+	/// until something asks for it, a consumer names the property on the rule
	992	+	/// for the menu or the toast it already has.
	993	+	#[test]
	994	+	fn the_cast_shadow_is_a_root_property_not_a_depth() {
	995	+	let css = bevel_properties(&Emit::default());
	996	+	assert!(css.contains("--elevation-overlay:"));
	997	+	assert!(css.contains("var(--elevation)"));
	998	+	assert!(
	999	+	!depth_rules(&Emit::default()).contains("elevation"),
	1000	+	"elevation is not a depth class"
	1001	+	);
	1002	+	}
	1003	+
968	1004		#[test]
969	1005		fn the_cascade_carries_the_pressed_state() {
970	1006		let css = surface_rules(&Emit::default());