@xsynaptic/sonic-ui 0.6.0 → 0.6.1

package/dist/styles/material.css

@@ -150,6 +150,10 @@
 			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);
 	}
@@ -179,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: 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) {
@@ -279,25 +307,6 @@
 		}
 	}
 
-	@media (forced-colors: none) {
-		/* A query reads the parent, or a pseudo-element's own element: on a readout itself, 0 leaves the warp on */
-		@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: 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));
-			}
-		}
-	}
-
 	:is(
 		.sonic-envelope,
 		.sonic-button,
@@ -382,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);
@@ -403,6 +416,36 @@
 		}
 	}
 
+	.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))
@@ -455,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;
@@ -471,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;
@@ -567,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/panel.css

@@ -20,7 +20,8 @@
 		--_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:

package/dist/styles/switch.css

@@ -230,13 +230,16 @@
 		inline-size: calc(var(--_sonic-switch-size) * var(--_sonic-switch-bushing-ratio));
 		aspect-ratio: 1;
 		pointer-events: none;
-		background: radial-gradient(
-			closest-side,
-			color-mix(in oklab, var(--_sonic-cap) calc(100% - 70% * var(--_sonic-relief)), #000) 0 42%,
-			var(--_sonic-switch-bushing-shade) 48%,
-			var(--_sonic-cap) 70%,
-			color-mix(in oklab, var(--_sonic-cap) calc(100% - 25% * var(--_sonic-relief)), #fff) 88%,
-			var(--_sonic-switch-bushing-shade)
+		background: var(
+			--sonic-well,
+			radial-gradient(
+				closest-side,
+				color-mix(in oklab, var(--_sonic-cap) calc(100% - 70% * var(--_sonic-relief)), #000) 0 42%,
+				var(--_sonic-switch-bushing-shade) 48%,
+				var(--_sonic-cap) 70%,
+				color-mix(in oklab, var(--_sonic-cap) calc(100% - 25% * var(--_sonic-relief)), #fff) 88%,
+				var(--_sonic-switch-bushing-shade)
+			)
 		);
 		border-radius: 50%;
 		box-shadow:

package/dist/styles/xy.css

@@ -119,23 +119,28 @@
 		}
 	}
 
+	:is(.sonic-xy-bracket, .sonic-xy-puck) {
+		position: absolute;
+		inset: auto auto
+			calc(var(--_sonic-xy-inset) + var(--_sonic-xy-y, 0) * var(--_sonic-xy-travel-y))
+			calc(var(--_sonic-xy-inset) + var(--_sonic-xy-x, 0) * var(--_sonic-xy-travel-x));
+		inline-size: var(--_sonic-xy-puck);
+		block-size: var(--_sonic-xy-puck);
+		border-radius: 50%;
+	}
+
+	.sonic-xy-bracket {
+		--_sonic-bracket-size: var(--_sonic-xy-puck);
+	}
+
 	.sonic-xy-puck {
 		--_sonic-xy-puck-fill: var(--_sonic-xy-lit);
 		--_sonic-xy-puck-edge: var(--_sonic-xy-puck-fill);
-		--_sonic-xy-puck-bracket: transparent;
-		--_sonic-xy-puck-bracket-scale: 0.6;
 		--_sonic-xy-puck-lift: color-mix(in oklab, var(--_sonic-xy-lit) 85%, #fff);
 		--_sonic-xy-puck-glow: transparent;
 		--_sonic-xy-puck-ring: 0 0 transparent;
 
-		position: absolute;
-		inset: auto auto
-			calc(var(--_sonic-xy-inset) + var(--_sonic-xy-y, 0) * var(--_sonic-xy-travel-y))
-			calc(var(--_sonic-xy-inset) + var(--_sonic-xy-x, 0) * var(--_sonic-xy-travel-x));
-		inline-size: var(--_sonic-xy-puck);
-		block-size: var(--_sonic-xy-puck);
 		cursor: var(--_sonic-xy-cursor);
-		border-radius: 50%;
 		filter: drop-shadow(0 0 calc(0.15 * var(--_sonic-xy-puck)) var(--_sonic-xy-puck-glow));
 		transition: filter 120ms ease-out;
 
@@ -153,21 +158,6 @@
 				border-color 120ms ease-out,
 				box-shadow 120ms ease-out;
 		}
-
-		&::after {
-			position: absolute;
-			inset: 4%;
-			pointer-events: none;
-			content: '';
-			border: max(1px, 0.08 * var(--_sonic-xy-puck)) solid var(--_sonic-xy-puck-bracket);
-			border-block-start-color: transparent;
-			border-radius: 50%;
-			rotate: 45deg;
-			scale: var(--_sonic-xy-puck-bracket-scale);
-			transition:
-				border-color 120ms ease-out,
-				scale 120ms ease-out;
-		}
 	}
 
 	@media (hover: hover) {
@@ -191,12 +181,6 @@
 			var(--_sonic-xy-lit) calc(45% * var(--_sonic-relief)),
 			transparent
 		);
-		--_sonic-xy-puck-bracket: color-mix(
-			in oklab,
-			var(--_sonic-xy-lit) calc(100% * (1 - var(--_sonic-relief))),
-			transparent
-		);
-		--_sonic-xy-puck-bracket-scale: 1;
 	}
 
 	.sonic-xy-axis {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsynaptic/sonic-ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Native custom elements for audio interfaces, skinned with CSS custom properties",
   "keywords": [
     "custom-elements",