@xsynaptic/sonic-ui 0.5.0 → 0.6.0

package/dist/styles/button.css

@@ -37,7 +37,7 @@
 		--_sonic-button-icon-ratio: var(--sonic-button-icon-ratio, 0.5);
 		--_sonic-button-led-ratio: var(--sonic-button-led-ratio, 0.2);
 		--_sonic-button-led-icon-ratio: var(--sonic-button-led-icon-ratio, 0.35);
-		--_sonic-button-depth-ratio: var(--sonic-button-depth-ratio, 0.03);
+		--_sonic-button-depth-ratio: var(--sonic-button-depth-ratio, calc(0.03 * var(--_sonic-relief)));
 		--_sonic-button-press-scale: var(--sonic-button-press-scale, 0.985);
 		--_sonic-unit: calc(var(--_sonic-button-size) / 32);
 		--_sonic-button-corner: calc(var(--_sonic-button-size) * var(--_sonic-button-radius-ratio));
@@ -65,7 +65,11 @@
 
 	/* Before the latched rule, which must win unchanged */
 	:where([armed]) > .sonic-button:not(:disabled, [aria-disabled='true']) {
-		--_sonic-keycap-glow: color-mix(in oklab, var(--_sonic-lit) 8%, transparent);
+		--_sonic-keycap-glow: color-mix(
+			in oklab,
+			var(--_sonic-lit) calc(8% * var(--_sonic-relief)),
+			transparent
+		);
 
 		color: color-mix(in oklab, var(--_sonic-lit) 55%, var(--_sonic-ink));
 
@@ -87,13 +91,24 @@
 	}
 
 	.sonic-button:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *) {
-		--_sonic-keycap-glow: color-mix(in oklab, var(--_sonic-lit) 22%, transparent);
+		--_sonic-keycap-glow: var(--_sonic-keycap-lit-glow);
 
 		color: var(--_sonic-lit);
-		background: linear-gradient(
-			var(--_sonic-light-fall),
-			color-mix(in oklab, var(--_sonic-lit) 25%, #000),
-			color-mix(in oklab, var(--_sonic-lit) 60%, #000)
+		background: var(
+			--sonic-well-lit,
+			linear-gradient(
+				var(--_sonic-light-fall),
+				color-mix(
+					in oklab,
+					color-mix(in oklab, var(--_sonic-lit) 25%, #000) calc(100% * var(--_sonic-relief)),
+					transparent
+				),
+				color-mix(
+					in oklab,
+					color-mix(in oklab, var(--_sonic-lit) 60%, #000) calc(100% * var(--_sonic-relief)),
+					transparent
+				)
+			)
 		);
 	}
 
@@ -127,6 +142,16 @@
 		}
 	}
 
+	.sonic-button[aria-pressed='true']:not(:disabled, [aria-disabled='true']):focus-visible {
+		color: var(--sonic-lit-hover, var(--_sonic-lit));
+	}
+
+	@media (hover: hover) {
+		.sonic-button[aria-pressed='true']:not(:disabled, [aria-disabled='true']):hover {
+			color: var(--sonic-lit-hover, var(--_sonic-lit));
+		}
+	}
+
 	.sonic-button-cap {
 		--_sonic-keycap-corner: max(0px, var(--_sonic-button-corner) - var(--_sonic-button-gap));
 		--_sonic-keycap-bevel: calc(var(--_sonic-button-size) * var(--_sonic-button-bevel-ratio));
@@ -150,7 +175,11 @@
 			inline-size: calc(var(--_sonic-button-size) * var(--_sonic-button-icon-ratio));
 			block-size: calc(var(--_sonic-button-size) * var(--_sonic-button-icon-ratio));
 			filter: var(--_sonic-engraving);
-			mask-image: linear-gradient(var(--_sonic-light-fall), #000 15%, rgb(0 0 0 / 60%));
+			mask-image: linear-gradient(
+				var(--_sonic-light-fall),
+				#000 15%,
+				rgb(0 0 0 / calc(1 - 0.4 * var(--_sonic-relief)))
+			);
 			mask-repeat: no-repeat;
 		}
 	}
@@ -163,8 +192,7 @@
 	.sonic-button:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *)
 		.sonic-button-cap
 		> svg {
-		filter: var(--_sonic-engraving)
-			drop-shadow(0 0 var(--_sonic-unit) color-mix(in oklab, var(--_sonic-lit) 35%, transparent));
+		filter: var(--_sonic-engraving) var(--_sonic-legend-glow);
 	}
 
 	/* fallow-ignore-next-line code-duplication -- one pressed state across the cap's parts */

package/dist/styles/dial.css

@@ -145,6 +145,7 @@
 
 	.sonic-dial-scale {
 		font-size: calc(var(--_sonic-dial-size) * var(--_sonic-dial-scale-font-ratio));
+		line-height: 1cap;
 
 		& > * {
 			--_sonic-dial-scale-angle: calc(
@@ -158,8 +159,8 @@
 
 			inset: calc(50% - var(--_sonic-dial-scale-cos) * var(--_sonic-dial-scale-radius)) auto auto
 				calc(50% + var(--_sonic-dial-scale-sin) * var(--_sonic-dial-scale-radius));
-			translate: calc(-50% + var(--_sonic-dial-scale-sin) * 50%)
-				calc(-50% - var(--_sonic-dial-scale-cos) * 50%);
+			translate: calc(-50% + var(--_sonic-dial-scale-sin) * (50% + 0.15cap))
+				calc(-50% - var(--_sonic-dial-scale-cos) * (50% + 0.15cap));
 		}
 
 		& > .sonic-scale-tick {
@@ -310,9 +311,10 @@
 		&::before {
 			inset: 0;
 			background: repeating-conic-gradient(
-				rgb(0 0 0 / 30%) 0,
-				rgb(255 255 255 / 12%) calc(var(--_sonic-dial-ridge-angle) / 2),
-				rgb(0 0 0 / 30%) var(--_sonic-dial-ridge-angle)
+				rgb(0 0 0 / calc(0.3 * var(--_sonic-relief))) 0,
+				rgb(255 255 255 / calc(0.12 * var(--_sonic-relief)))
+					calc(var(--_sonic-dial-ridge-angle) / 2),
+				rgb(0 0 0 / calc(0.3 * var(--_sonic-relief))) var(--_sonic-dial-ridge-angle)
 			);
 			rotate: var(--_sonic-dial-angle);
 		}
@@ -325,15 +327,15 @@
 						calc(
 							var(--_sonic-dial-face-drift) * var(--_sonic-dial-angle) - var(--_sonic-light-tilt)
 						),
-					rgb(255 255 255 / 16%),
+					rgb(255 255 255 / calc(0.16 * var(--_sonic-relief))),
 					transparent 12%,
-					rgb(0 0 0 / 10%) 25%,
+					rgb(0 0 0 / calc(0.1 * var(--_sonic-relief))) 25%,
 					transparent 38%,
-					rgb(255 255 255 / 12%) 50%,
+					rgb(255 255 255 / calc(0.12 * var(--_sonic-relief))) 50%,
 					transparent 62%,
-					rgb(0 0 0 / 10%) 75%,
+					rgb(0 0 0 / calc(0.1 * var(--_sonic-relief))) 75%,
 					transparent 88%,
-					rgb(255 255 255 / 16%)
+					rgb(255 255 255 / calc(0.16 * var(--_sonic-relief)))
 				),
 				var(--_sonic-face);
 			box-shadow: var(--_sonic-face-shadow);
@@ -351,6 +353,9 @@
 			--_sonic-dial-indicator-width: calc(
 				var(--_sonic-dial-size) * var(--_sonic-dial-indicator-ratio)
 			);
+			--_sonic-dial-indicator-tip: calc(
+				var(--_sonic-dial-indicator-width) * (1 - var(--_sonic-dial-indicator-taper)) / 2
+			);
 
 			position: absolute;
 			inset-block-start: 6%;
@@ -360,12 +365,15 @@
 			content: '';
 			background: var(--_sonic-ink);
 			border-radius: calc(var(--_sonic-dial-indicator-width) / 2);
-			box-shadow: inset 0 0 calc(0.75 * var(--_sonic-unit)) rgb(0 0 0 / 55%);
-			clip-path: polygon(
-				calc(50% * var(--_sonic-dial-indicator-taper)) 0,
-				calc(100% - 50% * var(--_sonic-dial-indicator-taper)) 0,
-				100% 100%,
-				0 100%
+			box-shadow: inset 0 0 calc(0.75 * var(--_sonic-unit))
+				rgb(0 0 0 / calc(0.55 * var(--_sonic-relief)));
+			clip-path: shape(
+				from 0 100%,
+				line to calc(50% - var(--_sonic-dial-indicator-tip)) var(--_sonic-dial-indicator-tip),
+				arc to calc(50% + var(--_sonic-dial-indicator-tip)) var(--_sonic-dial-indicator-tip) of
+					var(--_sonic-dial-indicator-tip) cw,
+				line to 100% 100%,
+				close
 			);
 			translate: -50% 0;
 		}

package/dist/styles/envelope.css

@@ -30,26 +30,36 @@
 		--_sonic-envelope-curve-ratio: var(--sonic-envelope-curve-ratio, 0.08);
 		--_sonic-unit: calc(var(--_sonic-envelope-size) / 64);
 		--_sonic-envelope-inset: calc(var(--_sonic-envelope-size) * var(--_sonic-envelope-inset-ratio));
+		--_sonic-glass-radius: calc(var(--_sonic-envelope-size) * var(--_sonic-envelope-radius-ratio));
 
 		inline-size: calc(var(--_sonic-envelope-size) * var(--_sonic-envelope-aspect-ratio));
 		block-size: var(--_sonic-envelope-size);
 		container-type: size;
-		border-radius: calc(var(--_sonic-envelope-size) * var(--_sonic-envelope-radius-ratio));
+		border-radius: var(--_sonic-glass-radius);
+		isolation: isolate;
 	}
 
 	.sonic-envelope-graph {
 		position: absolute;
 		inset: var(--_sonic-envelope-inset);
+		z-index: 1;
 		inline-size: calc(100% - 2 * var(--_sonic-envelope-inset));
 		block-size: calc(100% - 2 * var(--_sonic-envelope-inset));
 		overflow: visible;
 		pointer-events: none;
+		clip-path: inset(calc(-1 * var(--_sonic-envelope-inset)));
 	}
 
 	.sonic-envelope-fill {
 		fill: color-mix(in oklab, var(--_sonic-lit) 18%, transparent);
 	}
 
+	.sonic-envelope-floor {
+		height: calc(
+			1px * var(--_sonic-envelope-inset-ratio) / (1 - 2 * var(--_sonic-envelope-inset-ratio))
+		);
+	}
+
 	.sonic-envelope-line {
 		fill: none;
 		stroke: var(--_sonic-lit);
@@ -60,11 +70,13 @@
 	}
 
 	:is(.sonic-envelope-handle, .sonic-envelope-curve) {
-		--_sonic-point-ring: var(--_sonic-glass-text);
-		--_sonic-point-core: var(--_sonic-glass);
-		--_sonic-point-halo: 0 0 transparent;
-		--_sonic-point-held-halo: 0 0 calc(0.5 * var(--_sonic-point-size))
-			calc(0.05 * var(--_sonic-point-size)) color-mix(in oklab, var(--_sonic-lit) 50%, transparent);
+		--_sonic-point-ring: var(--_sonic-lit);
+		--_sonic-point-core: var(--_sonic-lit);
+		--_sonic-point-lift: color-mix(in oklab, var(--_sonic-lit) 85%, #fff);
+		--_sonic-point-edge: max(1px, var(--_sonic-point-stroke, 0px));
+		--_sonic-point-halo: transparent;
+		--_sonic-point-bracket: transparent;
+		--_sonic-point-bracket-scale: 0.6;
 
 		position: absolute;
 		inset: auto auto
@@ -76,18 +88,37 @@
 				var(--_sonic-envelope-inset) + var(--_sonic-envelope-x, 0) *
 					(100cqi - 2 * var(--_sonic-envelope-inset)) - var(--_sonic-point-size) / 2
 			);
+		z-index: 1;
 		box-sizing: border-box;
 		inline-size: var(--_sonic-point-size);
 		block-size: var(--_sonic-point-size);
 		touch-action: none;
 		background: var(--_sonic-point-core);
-		border: max(1px, var(--_sonic-point-stroke, 0px)) solid var(--_sonic-point-ring);
+		border: var(--_sonic-point-edge) solid var(--_sonic-point-ring);
 		border-radius: 50%;
-		box-shadow: var(--_sonic-point-halo), var(--_sonic-focus-shadow, 0 0 transparent);
+		box-shadow:
+			0 0 calc(0.5 * var(--_sonic-point-size)) calc(0.05 * var(--_sonic-point-size))
+				var(--_sonic-point-halo),
+			var(--_sonic-focus-shadow, 0 0 transparent);
 		transition:
 			background-color 120ms ease-out,
 			border-color 120ms ease-out,
 			box-shadow 120ms ease-out;
+
+		&::after {
+			position: absolute;
+			inset: calc(-0.4 * var(--_sonic-point-size) - 2 * var(--_sonic-point-edge));
+			pointer-events: none;
+			content: '';
+			border: var(--_sonic-point-edge) solid var(--_sonic-point-bracket);
+			border-block-start-color: transparent;
+			border-radius: 50%;
+			rotate: 45deg;
+			scale: var(--_sonic-point-bracket-scale);
+			transition:
+				border-color 120ms ease-out,
+				scale 120ms ease-out;
+		}
 	}
 
 	.sonic-envelope-handle {
@@ -116,26 +147,39 @@
 
 	:is(.sonic-envelope-curve, .sonic-envelope-handle)[data-sonic-disabled] {
 		--_sonic-point-ring: var(--_sonic-unlit);
+		--_sonic-point-core: var(--_sonic-glass);
 
 		cursor: default;
 	}
 
 	@media (hover: hover) {
 		:is(.sonic-envelope-curve, .sonic-envelope-handle):not([data-sonic-disabled]):hover {
-			--_sonic-point-ring: var(--_sonic-lit);
+			--_sonic-point-ring: var(--_sonic-point-lift);
+			--_sonic-point-core: var(--_sonic-point-lift);
 		}
 	}
 
 	:is(.sonic-envelope-curve, .sonic-envelope-handle):not([data-sonic-disabled]):active {
 		--_sonic-point-ring: var(--_sonic-lit);
-		--_sonic-point-core: var(--_sonic-lit);
-		--_sonic-point-halo: var(--_sonic-point-held-halo);
+		--_sonic-point-core: var(--_sonic-glass);
+		--_sonic-point-halo: color-mix(
+			in oklab,
+			var(--_sonic-lit) calc(50% * var(--_sonic-relief)),
+			transparent
+		);
+		--_sonic-point-bracket: color-mix(
+			in oklab,
+			var(--_sonic-lit) calc(100% * (1 - var(--_sonic-relief))),
+			transparent
+		);
+		--_sonic-point-bracket-scale: 1;
 	}
 
 	@media (forced-colors: active) {
 		.sonic-envelope {
 			--_sonic-lit: Highlight;
 			--_sonic-unlit: GrayText;
+			--_sonic-glass: Canvas;
 		}
 
 		.sonic-envelope-graph {
@@ -144,6 +188,7 @@
 
 		:is(.sonic-envelope-curve, .sonic-envelope-handle) {
 			--_sonic-point-ring: CanvasText;
+			--_sonic-point-lift: Highlight;
 
 			forced-color-adjust: none;
 		}

package/dist/styles/led.css

@@ -10,7 +10,7 @@
 		--_sonic-led-lens-ratio: var(--sonic-led-lens-ratio, 0.625);
 		--_sonic-lit-alt: var(--sonic-lit-alt, oklch(79% 0.2 150deg));
 		--_sonic-unit: calc(var(--_sonic-led-size) / 8);
-		--_sonic-led-bezel: color-mix(in oklab, var(--_sonic-unlit) 55%, #000);
+		--_sonic-led-bezel: var(--sonic-bezel, color-mix(in oklab, var(--_sonic-unlit) 55%, #000));
 
 		position: relative;
 		display: inline-block;
@@ -87,7 +87,7 @@
 		background:
 			radial-gradient(
 				closest-side,
-				color-mix(in oklab, var(--_sonic-lit) 60%, transparent)
+				color-mix(in oklab, var(--_sonic-lit) calc(60% * var(--_sonic-relief)), transparent)
 					calc(var(--_sonic-led-lens-ratio) * 100%),
 				transparent
 			),
@@ -96,7 +96,7 @@
 		&::after {
 			background: radial-gradient(
 				closest-side,
-				color-mix(in oklab, var(--_sonic-lit) 55%, #fff),
+				color-mix(in oklab, var(--_sonic-lit) calc(100% - 45% * var(--_sonic-relief)), #fff),
 				var(--_sonic-lit)
 			);
 		}

package/dist/styles/material.css

@@ -41,6 +41,7 @@
 		.sonic-xy-readout
 	) {
 		--_sonic-unlit: var(--sonic-unlit, oklch(27.4% 0.005 286deg));
+		--_sonic-relief: var(--sonic-relief, 0);
 		--_sonic-light-tilt: var(--sonic-light-tilt, 17deg);
 		--_sonic-light-fall: calc(180deg - var(--_sonic-light-tilt));
 		--_sonic-cast-x: calc(sin(var(--_sonic-light-tilt)) * var(--_sonic-unit));
@@ -77,19 +78,19 @@
 		);
 		--_sonic-arc-shade: radial-gradient(
 			closest-side,
-			rgb(0 0 0 / 55%) calc(100% - var(--_sonic-arc-width)),
+			rgb(0 0 0 / calc(0.55 * var(--_sonic-relief))) calc(100% - var(--_sonic-arc-width)),
 			transparent calc(100% - var(--_sonic-arc-width) * 0.4),
-			rgb(0 0 0 / 25%) 100%
+			rgb(0 0 0 / calc(0.25 * var(--_sonic-relief))) 100%
 		);
 	}
 
 	:is(.sonic-led, .sonic-meter) {
 		--_sonic-lens-glint: linear-gradient(
 			var(--_sonic-light-fall),
-			rgb(255 255 255 / 10%),
+			rgb(255 255 255 / calc(0.1 * var(--_sonic-relief))),
 			transparent 60%
 		);
-		--_sonic-lens-glass: color-mix(in oklab, var(--_sonic-unlit) 60%, #000);
+		--_sonic-lens-glass: var(--sonic-lens, color-mix(in oklab, var(--_sonic-unlit) 60%, #000));
 		--_sonic-lens: var(--_sonic-lens-glint), var(--_sonic-lens-glass);
 		--_sonic-hot: var(--sonic-hot, oklch(70.5% 0.187 48deg));
 		--_sonic-clip: var(--sonic-clip, oklch(63.7% 0.208 25deg));
@@ -106,41 +107,44 @@
 		.sonic-wavestrip,
 		.sonic-xy
 	) {
-		--_sonic-cap: var(--sonic-cap, oklch(37% 0.012 286deg));
-		--_sonic-cap-hover: var(--sonic-cap-hover, oklch(44.2% 0.015 286deg));
+		--_sonic-cap: var(--sonic-cap, transparent);
+		--_sonic-cap-hover: var(--sonic-cap-hover, transparent);
 		--_sonic-focus: var(--sonic-focus, oklch(90% 0.23 128deg));
-		--_sonic-ink: var(--sonic-ink, color-mix(in oklab, var(--_sonic-cap) 30%, #fff));
+		--_sonic-ink: var(--sonic-ink, currentcolor);
 		--_sonic-etch: color-mix(in oklab, var(--_sonic-ink) 30%, transparent);
-		--_sonic-ink-lift: color-mix(in oklab, var(--_sonic-ink) 60%, #fff);
+		--_sonic-ink-lift: var(--sonic-ink-hover, color-mix(in oklab, var(--_sonic-ink) 60%, #fff));
 		--_sonic-lit-disabled: color-mix(in oklab, var(--_sonic-ink) 25%, var(--_sonic-unlit));
 		--_sonic-skirt: linear-gradient(
 			var(--_sonic-light-fall),
-			color-mix(in oklab, var(--_sonic-cap) 70%, #fff),
-			color-mix(in oklab, var(--_sonic-cap) 55%, #000)
+			color-mix(in oklab, var(--_sonic-cap) calc(100% - 30% * var(--_sonic-relief)), #fff),
+			color-mix(in oklab, var(--_sonic-cap) calc(100% - 45% * var(--_sonic-relief)), #000)
 		);
 		--_sonic-face: linear-gradient(
 			var(--_sonic-light-fall),
-			color-mix(in oklab, var(--_sonic-cap) 85%, #000),
-			color-mix(in oklab, var(--_sonic-cap) 90%, #fff)
+			color-mix(in oklab, var(--_sonic-cap) calc(100% - 15% * var(--_sonic-relief)), #000),
+			color-mix(in oklab, var(--_sonic-cap) calc(100% - 10% * var(--_sonic-relief)), #fff)
 		);
 		--_sonic-sheen: linear-gradient(
 			105deg,
 			transparent 20%,
-			rgb(255 255 255 / 10%) 45%,
+			rgb(255 255 255 / calc(0.1 * var(--_sonic-relief))) 45%,
 			transparent 55%,
-			rgb(0 0 0 / 6%) 80%
+			rgb(0 0 0 / calc(0.06 * var(--_sonic-relief))) 80%
 		);
 		--_sonic-press-transition:
 			scale 60ms cubic-bezier(0.4, 0, 0.2, 1), translate 60ms cubic-bezier(0.4, 0, 0.2, 1),
 			box-shadow 60ms cubic-bezier(0.4, 0, 0.2, 1);
 		--_sonic-face-shadow:
 			inset var(--_sonic-cast-x) var(--_sonic-cast-y) calc(1.5 * var(--_sonic-unit))
-				rgb(0 0 0 / 35%),
+				rgb(0 0 0 / calc(0.35 * var(--_sonic-relief))),
 			calc(0.5 * var(--_sonic-cast-x)) calc(0.5 * var(--_sonic-cast-y)) var(--_sonic-unit)
-				rgb(255 255 255 / 12%);
+				rgb(255 255 255 / calc(0.12 * var(--_sonic-relief)));
 		--_sonic-rim: 0 0 0 max(1px, 0.75 * var(--_sonic-unit))
-			color-mix(in oklab, var(--_sonic-cap) 40%, #000);
-		--_sonic-drop-shade: rgb(0 0 0 / 65%);
+			var(
+				--sonic-cap-edge,
+				color-mix(in oklab, var(--_sonic-cap) calc(100% - 60% * var(--_sonic-relief)), #000)
+			);
+		--_sonic-drop-shade: rgb(0 0 0 / calc(0.65 * var(--_sonic-relief)));
 		--_sonic-focus-shadow: 0 0 transparent;
 		--_sonic-focus-glow: 0 0 max(4px, 3 * var(--_sonic-unit)) max(1px, 0.5 * var(--_sonic-unit))
 			color-mix(in oklab, var(--_sonic-focus) 60%, transparent);
@@ -186,7 +190,7 @@
 			--sonic-glass-text,
 			color-mix(in oklab, var(--_sonic-glass) 20%, #fff)
 		);
-		--_sonic-glass-edge: 0 none;
+		--_sonic-glass-edge: 1px solid var(--sonic-glass-edge);
 
 		/* Glass is forced to Canvas like the page, so only a border shows its edge */
 		@media (forced-colors: active) {
@@ -196,8 +200,8 @@
 
 	/* A definite cell, so percentage-sized content fills the glass; a canvas sized to its own box would feed back */
 	:is(.sonic-envelope, .sonic-number, .sonic-screen, .sonic-waveform, .sonic-wavestrip, .sonic-xy) {
-		--_sonic-glass-depth: var(--sonic-glass-depth, 1);
-		--_sonic-glass-texture: var(--sonic-glass-texture, 1);
+		--_sonic-glass-depth: var(--sonic-glass-depth, var(--_sonic-relief));
+		--_sonic-glass-texture: var(--sonic-glass-texture, var(--_sonic-relief));
 		--_sonic-glass-pitch: max(2px, round(2 * var(--_sonic-unit), 1px));
 
 		position: relative;
@@ -276,16 +280,20 @@
 	}
 
 	@media (forced-colors: none) {
-		:is(.sonic-number, .sonic-screen),
-		:is(.sonic-envelope, .sonic-waveform, .sonic-wavestrip, .sonic-xy)::after {
-			filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='w' x='-0.3' y='-0.3' width='1.6' height='1.6' primitiveUnits='objectBoundingBox' color-interpolation-filters='sRGB'%3E%3CfeFlood x='0' y='0' width='1' height='1' flood-color='%23000'/%3E%3CfeFlood x='.5' y='0' width='.5' height='1' flood-color='%23f00' result='r'/%3E%3CfeFlood x='0' y='.5' width='1' height='.5' flood-color='%230f0' result='g'/%3E%3CfeFlood x='0' y='0' width='1' height='1' flood-color='%23000' result='k'/%3E%3CfeComposite in='r' in2='g' operator='arithmetic' k2='1' k3='1' result='h'/%3E%3CfeMerge x='0' y='0' width='1' height='1'%3E%3CfeMergeNode in='k'/%3E%3CfeMergeNode in='h'/%3E%3C/feMerge%3E%3CfeGaussianBlur x='0' y='0' width='1' height='1' stdDeviation='0.25'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer result='a'%3E%3CfeFuncR type='table' tableValues='0 0.052 0.172 0.25 0.312 0.364 0.412 0.457 0.5 0.543 0.588 0.636 0.688 0.75 0.828 0.948 1'/%3E%3CfeFuncG type='table' tableValues='0 0.052 0.172 0.25 0.312 0.364 0.412 0.457 0.5 0.543 0.588 0.636 0.688 0.75 0.828 0.948 1'/%3E%3C/feComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncR type='table' tableValues='1 0.563 0.25 0.063 0 0.063 0.25 0.563 1'/%3E%3CfeFuncG type='table' tableValues='1 0.563 0.25 0.063 0 0.063 0.25 0.563 1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix values='.5 .5 0 0 0 .5 .5 0 0 0 0 0 0 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer result='f'%3E%3CfeFuncR type='gamma' amplitude='0.333' exponent='2'/%3E%3CfeFuncG type='gamma' exponent='2'/%3E%3C/feComponentTransfer%3E%3CfeComposite in='a' in2='f' operator='arithmetic' k1='1' k3='-.5' k4='.5' result='m'/%3E%3CfeFlood flood-color='%23808080'/%3E%3CfeMerge result='n'%3E%3CfeMergeNode/%3E%3CfeMergeNode in='m'/%3E%3C/feMerge%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='0.04' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/svg%3E#w");
-		}
-
 		/* A query reads the parent, or a pseudo-element's own element: on a readout itself, 0 leaves the warp on */
-		@container style(--sonic-glass-texture: 0) {
+		@container style(--sonic-relief: 1) and (not style(--sonic-glass-texture: 0)) {
 			:is(.sonic-number, .sonic-screen),
 			:is(.sonic-envelope, .sonic-waveform, .sonic-wavestrip, .sonic-xy)::after {
-				filter: none;
+				filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='w' x='-0.3' y='-0.3' width='1.6' height='1.6' primitiveUnits='objectBoundingBox' color-interpolation-filters='sRGB'%3E%3CfeFlood x='0' y='0' width='1' height='1' flood-color='%23000'/%3E%3CfeFlood x='.5' y='0' width='.5' height='1' flood-color='%23f00' result='r'/%3E%3CfeFlood x='0' y='.5' width='1' height='.5' flood-color='%230f0' result='g'/%3E%3CfeFlood x='0' y='0' width='1' height='1' flood-color='%23000' result='k'/%3E%3CfeComposite in='r' in2='g' operator='arithmetic' k2='1' k3='1' result='h'/%3E%3CfeMerge x='0' y='0' width='1' height='1'%3E%3CfeMergeNode in='k'/%3E%3CfeMergeNode in='h'/%3E%3C/feMerge%3E%3CfeGaussianBlur x='0' y='0' width='1' height='1' stdDeviation='0.25'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer result='a'%3E%3CfeFuncR type='table' tableValues='0 0.052 0.172 0.25 0.312 0.364 0.412 0.457 0.5 0.543 0.588 0.636 0.688 0.75 0.828 0.948 1'/%3E%3CfeFuncG type='table' tableValues='0 0.052 0.172 0.25 0.312 0.364 0.412 0.457 0.5 0.543 0.588 0.636 0.688 0.75 0.828 0.948 1'/%3E%3C/feComponentTransfer%3E%3CfeComponentTransfer%3E%3CfeFuncR type='table' tableValues='1 0.563 0.25 0.063 0 0.063 0.25 0.563 1'/%3E%3CfeFuncG type='table' tableValues='1 0.563 0.25 0.063 0 0.063 0.25 0.563 1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix values='.5 .5 0 0 0 .5 .5 0 0 0 0 0 0 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer result='f'%3E%3CfeFuncR type='gamma' amplitude='0.333' exponent='2'/%3E%3CfeFuncG type='gamma' exponent='2'/%3E%3C/feComponentTransfer%3E%3CfeComposite in='a' in2='f' operator='arithmetic' k1='1' k3='-.5' k4='.5' result='m'/%3E%3CfeFlood flood-color='%23808080'/%3E%3CfeMerge result='n'%3E%3CfeMergeNode/%3E%3CfeMergeNode in='m'/%3E%3C/feMerge%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='0.016' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/svg%3E#w");
+			}
+
+			:is(.sonic-envelope, .sonic-waveform, .sonic-wavestrip, .sonic-xy)::after {
+				--_sonic-glass-bend: calc(0.008 * hypot(100cqi, 100cqb));
+
+				inset: calc(-1 * var(--_sonic-glass-bend));
+				border: var(--_sonic-glass-bend) solid rgb(0 0 0 / 50%);
+				border-radius: calc(var(--_sonic-glass-radius) + var(--_sonic-glass-bend));
+				clip-path: inset(var(--_sonic-glass-bend) round var(--_sonic-glass-radius));
 			}
 		}
 	}
@@ -304,23 +312,37 @@
 		--_sonic-well:
 			inset calc(var(--_sonic-well-depth) * var(--_sonic-cast-x))
 				calc(var(--_sonic-well-depth) * var(--_sonic-cast-y))
-				calc(2 * var(--_sonic-well-depth) * var(--_sonic-unit)) rgb(0 0 0 / 60%),
+				calc(2 * var(--_sonic-well-depth) * var(--_sonic-unit))
+				rgb(0 0 0 / calc(0.6 * var(--_sonic-relief))),
 			calc(0.5 * var(--_sonic-well-depth) * var(--_sonic-cast-x))
-				calc(0.5 * var(--_sonic-well-depth) * var(--_sonic-cast-y)) 0 rgb(255 255 255 / 6%);
+				calc(0.5 * var(--_sonic-well-depth) * var(--_sonic-cast-y)) 0
+				rgb(255 255 255 / calc(0.06 * var(--_sonic-relief)));
 	}
 
 	:is(.sonic-button, .sonic-segmented) {
-		--_sonic-well-floor: linear-gradient(
-			var(--_sonic-light-fall),
-			color-mix(in oklab, var(--_sonic-unlit) 55%, #000),
-			color-mix(in oklab, var(--_sonic-unlit) 85%, #000)
+		--_sonic-well-floor: var(
+			--sonic-well,
+			linear-gradient(
+				var(--_sonic-light-fall),
+				color-mix(
+					in oklab,
+					color-mix(in oklab, var(--_sonic-unlit) 55%, #000) calc(100% * var(--_sonic-relief)),
+					transparent
+				),
+				color-mix(
+					in oklab,
+					color-mix(in oklab, var(--_sonic-unlit) 85%, #000) calc(100% * var(--_sonic-relief)),
+					transparent
+				)
+			)
 		);
 		--_sonic-engraving: drop-shadow(
 				calc(-0.4 * var(--_sonic-cast-x)) calc(-0.4 * var(--_sonic-cast-y))
-					calc(0.4 * var(--_sonic-unit)) rgb(0 0 0 / 30%)
+					calc(0.4 * var(--_sonic-unit)) rgb(0 0 0 / calc(0.3 * var(--_sonic-relief)))
 			)
 			drop-shadow(
-				calc(0.3 * var(--_sonic-cast-x)) calc(0.3 * var(--_sonic-cast-y)) 0 rgb(255 255 255 / 7%)
+				calc(0.3 * var(--_sonic-cast-x)) calc(0.3 * var(--_sonic-cast-y)) 0
+					rgb(255 255 255 / calc(0.07 * var(--_sonic-relief)))
 			);
 	}
 
@@ -333,6 +355,25 @@
 		--_sonic-keycap-drop: calc(1.5 * var(--_sonic-cast-x)) calc(1.5 * var(--_sonic-cast-y))
 			calc(2 * var(--_sonic-unit)) var(--_sonic-drop-shade);
 		--_sonic-keycap-glow: transparent;
+		--_sonic-keycap-lit-glow: color-mix(
+			in oklab,
+			var(--_sonic-lit) calc(22% * var(--_sonic-relief)),
+			transparent
+		);
+		--_sonic-legend-glow: drop-shadow(
+			0 0 var(--_sonic-unit)
+				color-mix(in oklab, var(--_sonic-lit) calc(35% * var(--_sonic-relief)), transparent)
+		);
+	}
+
+	:is(.sonic-button, .sonic-segmented-option, .sonic-switch-position) {
+		--_sonic-target-outset: min(0px, calc((100% - var(--sonic-target-size, 100%)) / 2));
+
+		&::after {
+			position: absolute;
+			inset: var(--_sonic-target-outset);
+			content: '';
+		}
 	}
 
 	/* Each sheet maps its own depth, corner, bevel and face corner onto the `keycap` tokens */
@@ -365,9 +406,10 @@
 	:is(.sonic-meter, .sonic-slider) {
 		--_sonic-groove:
 			inset var(--_sonic-cast-x) var(--_sonic-cast-y) calc(0.75 * var(--_sonic-unit))
-				rgb(0 0 0 / 55%),
-			inset 0 0 calc(0.5 * var(--_sonic-unit)) rgb(0 0 0 / 30%),
-			calc(0.5 * var(--_sonic-cast-x)) calc(0.5 * var(--_sonic-cast-y)) 0 rgb(255 255 255 / 6%);
+				rgb(0 0 0 / calc(0.55 * var(--_sonic-relief))),
+			inset 0 0 calc(0.5 * var(--_sonic-unit)) rgb(0 0 0 / calc(0.3 * var(--_sonic-relief))),
+			calc(0.5 * var(--_sonic-cast-x)) calc(0.5 * var(--_sonic-cast-y)) 0
+				rgb(255 255 255 / calc(0.06 * var(--_sonic-relief)));
 	}
 
 	@media (hover: hover) {
@@ -437,8 +479,8 @@
 		border-radius: calc(0.25 * var(--_sonic-readout-size));
 		box-shadow:
 			calc(2 * var(--_sonic-cast-x)) calc(2 * var(--_sonic-cast-y)) calc(6 * var(--_sonic-unit))
-				rgb(0 0 0 / 55%),
-			inset 0 0 0 max(1px, var(--_sonic-unit)) rgb(255 255 255 / 8%);
+				rgb(0 0 0 / calc(0.55 * var(--_sonic-relief))),
+			inset 0 0 0 max(1px, var(--_sonic-unit)) rgb(255 255 255 / calc(0.08 * var(--_sonic-relief)));
 		opacity: 0;
 		translate: 0 calc(0.15 * var(--_sonic-readout-size));
 		transition:

package/dist/styles/meter.css

@@ -66,7 +66,7 @@
 		flex-shrink: 0;
 		inline-size: var(--_sonic-meter-size);
 		block-size: var(--_sonic-meter-length);
-		background: color-mix(in oklab, var(--_sonic-unlit) 55%, #000);
+		background: var(--sonic-bezel, color-mix(in oklab, var(--_sonic-unlit) 55%, #000));
 		border-radius: calc(var(--_sonic-meter-size) * var(--_sonic-meter-radius-ratio));
 
 		&::after {
@@ -257,14 +257,18 @@
 		position: absolute;
 		inset: 0;
 		content: '';
-		background: linear-gradient(var(--_sonic-light-fall), rgb(255 255 255 / 10%), transparent 60%) 0
-			100% / 100% var(--_sonic-meter-pitch) repeat-y;
+		background: linear-gradient(
+				var(--_sonic-light-fall),
+				rgb(255 255 255 / calc(0.1 * var(--_sonic-relief))),
+				transparent 60%
+			)
+			0 100% / 100% var(--_sonic-meter-pitch) repeat-y;
 	}
 
 	:state(ladder) > .sonic-meter > .sonic-meter-bar::after {
 		background: radial-gradient(
 				circle var(--_sonic-meter-ladder-radius),
-				rgb(255 255 255 / 45%),
+				rgb(255 255 255 / calc(0.45 * var(--_sonic-relief))),
 				transparent
 			)
 			0 100% / 100% var(--_sonic-meter-pitch) repeat-y;

package/dist/styles/panel.css

@@ -25,12 +25,14 @@
 		border-radius: var(--_sonic-panel-radius);
 		box-shadow:
 			inset var(--_sonic-cast-x) var(--_sonic-cast-y)
-				max(var(--_sonic-panel-depth), -1 * var(--_sonic-panel-depth)) rgb(255 255 255 / 7%),
+				max(var(--_sonic-panel-depth), -1 * var(--_sonic-panel-depth))
+				rgb(255 255 255 / calc(0.07 * var(--_sonic-relief))),
 			inset calc(-1 * var(--_sonic-cast-x)) calc(-1 * var(--_sonic-cast-y))
-				max(var(--_sonic-panel-depth), -1 * var(--_sonic-panel-depth)) rgb(0 0 0 / 35%),
+				max(var(--_sonic-panel-depth), -1 * var(--_sonic-panel-depth))
+				rgb(0 0 0 / calc(0.35 * var(--_sonic-relief))),
 			calc(2 * sin(var(--_sonic-light-tilt)) * max(0px, var(--_sonic-panel-depth)))
 				calc(2 * cos(var(--_sonic-light-tilt)) * max(0px, var(--_sonic-panel-depth)))
-				calc(3 * max(0px, var(--_sonic-panel-depth))) rgb(0 0 0 / 45%);
+				calc(3 * max(0px, var(--_sonic-panel-depth))) rgb(0 0 0 / calc(0.45 * var(--_sonic-relief)));
 	}
 
 	.sonic-panel-title {