@xsynaptic/sonic-ui 0.8.0 → 0.10.0

package/dist/styles/wavestrip.css

@@ -106,9 +106,15 @@
 		);
 		--_sonic-unit: calc(var(--_sonic-wavestrip-size) / 32);
 		--_sonic-wavestrip-lit: var(--_sonic-lit);
-		--_sonic-marker-size: calc(var(--_sonic-wavestrip-size) * var(--_sonic-wavestrip-marker-ratio));
-		--_sonic-marker-ring: max(1px, 0.5 * var(--_sonic-unit));
-		--_sonic-marker-step: calc(var(--_sonic-marker-size) + var(--_sonic-marker-ring));
+		--_sonic-marker-size: var(
+			--sonic-wavestrip-marker-size,
+			calc(var(--_sonic-wavestrip-size) * var(--_sonic-wavestrip-marker-ratio))
+		);
+		--_sonic-marker-edge: var(
+			--sonic-wavestrip-marker-edge-width,
+			max(1px, round(0.5 * var(--_sonic-unit), var(--_sonic-snap)))
+		);
+		--_sonic-marker-step: calc(var(--_sonic-marker-size) + var(--_sonic-marker-edge));
 		--_sonic-marker-default: var(--sonic-marker, var(--_sonic-ink));
 		--_sonic-wavestrip-wave: var(
 			--sonic-wave,
@@ -182,9 +188,9 @@
 			calc(var(--_sonic-marker-from, 0) * 100% - var(--_sonic-marker-size) / 2);
 		inline-size: var(--_sonic-marker-size);
 		block-size: var(--_sonic-marker-size);
-		background: color-mix(in oklab, var(--_sonic-marker-colour) 85%, transparent);
+		background: var(--_sonic-marker-colour);
 		border-radius: 50%;
-		box-shadow: 0 0 0 var(--_sonic-marker-ring) var(--_sonic-glass);
+		box-shadow: 0 0 0 var(--_sonic-marker-edge) var(--_sonic-glass);
 	}
 
 	.sonic-wavestrip-region {
@@ -193,7 +199,7 @@
 		box-sizing: border-box;
 		inline-size: calc((var(--_sonic-marker-to, 0) - var(--_sonic-marker-from, 0)) * 100%);
 		background: color-mix(in oklab, var(--_sonic-marker-colour) 16%, transparent);
-		border-inline: max(1px, var(--_sonic-unit)) solid
+		border-inline: var(--sonic-wavestrip-region-edge-width, max(1px, var(--_sonic-unit))) solid
 			color-mix(in oklab, var(--_sonic-marker-colour) 55%, transparent);
 	}
 
@@ -239,7 +245,7 @@
 
 		.sonic-wavestrip-marker {
 			background: var(--_sonic-marker-colour);
-			box-shadow: 0 0 0 var(--_sonic-marker-ring) Canvas;
+			box-shadow: 0 0 0 var(--_sonic-marker-edge) Canvas;
 		}
 
 		.sonic-wavestrip-region {

package/dist/styles/xy.css

@@ -52,7 +52,7 @@
 	}
 
 	.sonic-xy-field {
-		--_sonic-xy-line: max(1px, round(var(--_sonic-unit), 1px));
+		--_sonic-xy-line: max(1px, round(var(--_sonic-unit), var(--_sonic-snap)));
 		--_sonic-xy-x-low: min(var(--_sonic-xy-x-origin, 0), var(--_sonic-xy-x, 0));
 		--_sonic-xy-x-high: max(var(--_sonic-xy-x-origin, 0), var(--_sonic-xy-x, 0));
 		--_sonic-xy-y-low: min(var(--_sonic-xy-y-origin, 0), var(--_sonic-xy-y, 0));
@@ -169,8 +169,8 @@
 	.sonic-xy-puck:has(> :focus-visible:not([data-sonic-pointer-focus])) {
 		--_sonic-xy-puck-fill: var(--_sonic-xy-puck-lift);
 		--_sonic-xy-puck-ring:
-			0 0 0 max(2px, 0.08 * var(--_sonic-xy-puck)) var(--_sonic-glass),
-			0 0 0 max(4px, 0.16 * var(--_sonic-xy-puck)) var(--_sonic-focus);
+			0 0 0 max(2px, round(0.08 * var(--_sonic-xy-puck), var(--_sonic-snap))) var(--_sonic-glass),
+			0 0 0 max(4px, round(0.16 * var(--_sonic-xy-puck), var(--_sonic-snap))) var(--_sonic-focus);
 	}
 
 	:state(dragging) > .sonic-xy > .sonic-xy-puck {
@@ -178,7 +178,7 @@
 		--_sonic-xy-puck-edge: var(--_sonic-xy-lit);
 		--_sonic-xy-puck-glow: color-mix(
 			in oklab,
-			var(--_sonic-xy-lit) calc(45% * var(--_sonic-relief)),
+			var(--_sonic-xy-lit) calc(30% * var(--_sonic-relief)),
 			transparent
 		);
 	}

package/package.json

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