@xsynaptic/sonic-ui 0.5.0 → 0.6.1

package/dist/styles/envelope.css

@@ -30,26 +30,55 @@
 		--_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-bracket {
+		--_sonic-point-size: calc(
+			2 * var(--_sonic-envelope-size) * var(--_sonic-envelope-handle-ratio)
+		);
+		--_sonic-bracket-size: var(--_sonic-point-size);
+
+		position: absolute;
+		inset: 0;
+		overflow: clip;
+		pointer-events: none;
+		border-radius: inherit;
+
+		&[data-sonic-part='curve'] {
+			--_sonic-point-size: calc(
+				2 * var(--_sonic-envelope-size) * var(--_sonic-envelope-curve-ratio)
+			);
+		}
 	}
 
 	.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);
@@ -59,13 +88,8 @@
 		vector-effect: non-scaling-stroke;
 	}
 
-	: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);
-
+	:is(.sonic-envelope-handle, .sonic-envelope-curve),
+	.sonic-envelope-bracket::before {
 		position: absolute;
 		inset: auto auto
 			calc(
@@ -76,14 +100,27 @@
 				var(--_sonic-envelope-inset) + var(--_sonic-envelope-x, 0) *
 					(100cqi - 2 * var(--_sonic-envelope-inset)) - var(--_sonic-point-size) / 2
 			);
+	}
+
+	:is(.sonic-envelope-handle, .sonic-envelope-curve) {
+		--_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;
+
+		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,
@@ -116,26 +153,33 @@
 
 	: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
+		);
 	}
 
 	@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

@@ -7,10 +7,26 @@
 @layer sonic {
 	.sonic-led {
 		--_sonic-led-size: var(--sonic-led-size, 0.5rem);
-		--_sonic-led-lens-ratio: var(--sonic-led-lens-ratio, 0.625);
+		--_sonic-led-lens-ratio: var(--sonic-led-lens-ratio, calc(0.8 - 0.175 * var(--_sonic-relief)));
 		--_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-modelled: calc(100% * var(--_sonic-relief));
+		--_sonic-led-bezel: var(
+			--sonic-bezel,
+			color-mix(
+				in oklab,
+				color-mix(in oklab, var(--_sonic-unlit) 55%, #000) var(--_sonic-led-modelled),
+				transparent
+			)
+		);
+		--_sonic-lens-glass: var(
+			--sonic-lens,
+			color-mix(
+				in oklab,
+				color-mix(in oklab, var(--_sonic-unlit) 60%, #000) var(--_sonic-led-modelled),
+				color-mix(in oklab, currentcolor 30%, transparent)
+			)
+		);
 
 		position: relative;
 		display: inline-block;
@@ -87,7 +103,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 +112,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,46 +107,53 @@
 		.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);
 	}
 
+	:is(.sonic-number, .sonic-waveform, .sonic-wavestrip, .sonic-xy) {
+		--_sonic-ink: var(--_sonic-glass-text);
+	}
+
 	:is(.sonic-dial, .sonic-number, .sonic-slider, .sonic-waveform, .sonic-wavestrip) {
 		--_sonic-detent-zone: var(--sonic-detent-zone, 8px);
 	}
@@ -175,18 +183,42 @@
 		.sonic-xy,
 		.sonic-xy-readout
 	) {
-		--_sonic-glass: var(--sonic-glass, color-mix(in oklab, var(--_sonic-unlit) 45%, #000));
+		--_sonic-glass-slab: color-mix(in oklab, var(--_sonic-unlit) 45%, #000);
+		--_sonic-glass-base: var(
+			--sonic-glass,
+			color-mix(
+				in oklab,
+				var(--_sonic-glass-slab) calc(100% * var(--_sonic-relief)),
+				light-dark(oklch(97% 0.003 286deg), var(--_sonic-glass-slab))
+			)
+		);
+		--_sonic-glass: var(--_sonic-glass-base);
 		--_sonic-glass-fill: radial-gradient(
 				closest-side,
-				color-mix(in oklab, var(--_sonic-glass) 88%, #fff),
+				color-mix(
+					in oklab,
+					var(--_sonic-glass) calc(100% - 12% * var(--_sonic-glass-depth, var(--_sonic-relief))),
+					#fff
+				),
 				var(--_sonic-glass)
 			)
 			var(--_sonic-glass);
 		--_sonic-glass-text: var(
 			--sonic-glass-text,
-			color-mix(in oklab, var(--_sonic-glass) 20%, #fff)
+			color-mix(
+				in oklab,
+				var(--_sonic-glass) 20%,
+				oklch(from var(--_sonic-glass) clamp(0, (0.6 - l) * 1000, 1) 0 0deg / 100%)
+			)
+		);
+
+		/* Invalid with the token unset, so the default takes over */
+		--_sonic-glass-edge-set: 1px solid var(--sonic-glass-edge);
+		--_sonic-glass-edge: var(
+			--_sonic-glass-edge-set,
+			calc(1px * (1 - var(--_sonic-relief))) solid
+				color-mix(in oklab, currentcolor 35%, transparent)
 		);
-		--_sonic-glass-edge: 0 none;
 
 		/* Glass is forced to Canvas like the page, so only a border shows its edge */
 		@media (forced-colors: active) {
@@ -196,8 +228,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;
@@ -275,21 +307,6 @@
 		}
 	}
 
-	@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) {
-			:is(.sonic-number, .sonic-screen),
-			:is(.sonic-envelope, .sonic-waveform, .sonic-wavestrip, .sonic-xy)::after {
-				filter: none;
-			}
-		}
-	}
-
 	:is(
 		.sonic-envelope,
 		.sonic-button,
@@ -304,23 +321,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 +364,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 */
@@ -341,7 +391,11 @@
 		place-items: center;
 		background: var(--_sonic-skirt);
 		border-radius: var(--_sonic-keycap-corner);
-		box-shadow: var(--_sonic-keycap-drop), var(--_sonic-rim), var(--_sonic-focus-shadow);
+		box-shadow:
+			var(--_sonic-keycap-drop),
+			var(--_sonic-rim),
+			0 0 0 max(1px, 0.75 * var(--_sonic-unit)) var(--_sonic-blank-edge, transparent),
+			var(--_sonic-focus-shadow);
 		scale: var(--_sonic-keycap-scale);
 		translate: 0 var(--_sonic-keycap-shift);
 		transition: var(--_sonic-press-transition);
@@ -362,12 +416,43 @@
 		}
 	}
 
+	.sonic-xy-bracket,
+	.sonic-envelope-bracket::before {
+		box-sizing: border-box;
+		inline-size: var(--_sonic-bracket-size);
+		block-size: var(--_sonic-bracket-size);
+		pointer-events: none;
+		content: '';
+		border: max(1px, 0.06 * var(--_sonic-bracket-size)) solid
+			color-mix(in oklab, var(--_sonic-glass-text) 45%, transparent);
+		border-radius: 50%;
+		opacity: 0;
+		mask: conic-gradient(
+			from 10deg,
+			#000 0 70deg,
+			transparent 0 180deg,
+			#000 0 250deg,
+			transparent 0
+		);
+		scale: 0.6;
+		transition:
+			opacity 120ms ease-out,
+			scale 120ms ease-out;
+	}
+
+	:state(dragging) > * > .sonic-xy-bracket,
+	:state(dragging) > * > .sonic-envelope-bracket::before {
+		opacity: calc(1 - var(--_sonic-relief));
+		scale: 1;
+	}
+
 	: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) {
@@ -413,6 +498,7 @@
 		.sonic-xy-readout
 	) {
 		--_sonic-unit: calc(var(--_sonic-readout-size) / 32);
+		--_sonic-glass: var(--sonic-readout-glass, var(--_sonic-glass-base));
 
 		box-sizing: border-box;
 		place-items: center;
@@ -429,6 +515,7 @@
 		font-variant-numeric: tabular-nums;
 		line-height: 1;
 		color: var(--_sonic-glass-text);
+		white-space: nowrap;
 		pointer-events: none;
 		cursor: default;
 		user-select: none;
@@ -437,8 +524,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:
@@ -525,13 +612,14 @@
 		}
 
 		& > .sonic-scale-tick {
-			background: var(--_sonic-etch);
+			background: var(--sonic-scale, var(--_sonic-etch));
 		}
 	}
 
 	@media (forced-colors: active) {
-		.sonic-scale-tick {
+		:is(.sonic-dial-scale, .sonic-slider-scale) > .sonic-scale-tick {
 			forced-color-adjust: none;
+			background: var(--_sonic-etch);
 		}
 
 		:is(

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

@@ -20,17 +20,20 @@
 		--_sonic-panel-radius: var(--sonic-panel-radius, 0.75rem);
 		--_sonic-unit: var(--_sonic-panel-depth);
 
-		background: var(--sonic-panel, rgb(255 255 255 / 3%));
+		color: var(--sonic-panel-text, inherit);
+		background: var(--sonic-panel, color-mix(in oklab, currentcolor 3%, transparent));
 		border: 1px solid var(--_sonic-panel-line);
 		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 {

package/dist/styles/segmented.css

@@ -26,7 +26,10 @@
 		--_sonic-segmented-gap-ratio: var(--sonic-segmented-gap-ratio, 0.06);
 		--_sonic-segmented-radius-ratio: var(--sonic-segmented-radius-ratio, 0.2);
 		--_sonic-segmented-bevel-ratio: var(--sonic-segmented-bevel-ratio, 0.075);
-		--_sonic-segmented-depth-ratio: var(--sonic-segmented-depth-ratio, 0.03);
+		--_sonic-segmented-depth-ratio: var(
+			--sonic-segmented-depth-ratio,
+			calc(0.03 * var(--_sonic-relief))
+		);
 		--_sonic-segmented-press-scale: var(--sonic-segmented-press-scale, 0.985);
 		--_sonic-segmented-font-ratio: var(--sonic-segmented-font-ratio, 0.34);
 		--_sonic-segmented-icon-ratio: var(--sonic-segmented-icon-ratio, 0.5);
@@ -55,6 +58,12 @@
 	}
 
 	.sonic-segmented-option {
+		--_sonic-segmented-well-lit: var(
+			--sonic-well-lit,
+			color-mix(in oklab, var(--_sonic-lit) calc(100% * var(--_sonic-relief)), transparent)
+		);
+
+		position: relative;
 		display: grid;
 		min-inline-size: calc(var(--_sonic-segmented-size) - 2 * var(--_sonic-segmented-gap));
 		padding: 0;
@@ -77,10 +86,10 @@
 	}
 
 	.sonic-segmented-option[aria-checked='true'] {
-		--_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: var(--_sonic-lit);
+		background: var(--_sonic-segmented-well-lit);
 		box-shadow: var(--_sonic-well);
 	}
 
@@ -105,6 +114,20 @@
 		}
 	}
 
+	.sonic-segmented-option[aria-checked='true']:not(:disabled):focus-visible {
+		color: var(--sonic-lit-hover, var(--_sonic-lit));
+	}
+
+	@media (hover: hover) {
+		.sonic-segmented-option[aria-checked='true']:not(:disabled):hover {
+			color: var(--sonic-lit-hover, var(--_sonic-lit));
+		}
+	}
+
+	.sonic-segmented-option::after {
+		inset-inline: 0;
+	}
+
 	.sonic-segmented-cap {
 		--_sonic-keycap-corner: var(--_sonic-segmented-inner-corner);
 		--_sonic-keycap-bevel: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-bevel-ratio));
@@ -127,8 +150,7 @@
 	}
 
 	.sonic-segmented-option[aria-checked='true'] .sonic-segmented-cap > * {
-		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);
 	}
 
 	@media (forced-colors: active) {

package/dist/styles/slider.css

@@ -403,7 +403,8 @@
 				calc(50% - var(--_sonic-slider-indicator-width) / 2);
 			background: var(--_sonic-ink);
 			border-radius: calc(var(--_sonic-slider-indicator-width) / 2);
-			box-shadow: inset 0 0 calc(0.75 * var(--_sonic-unit)) rgb(0 0 0 / 55%);
+			box-shadow: inset 0 0 calc(0.75 * var(--_sonic-unit))
+				rgb(0 0 0 / calc(0.55 * var(--_sonic-relief)));
 		}
 	}