@xsynaptic/sonic-ui 0.18.0 → 0.19.0

package/dist/styles/led.css

@@ -117,7 +117,11 @@
 		&::after {
 			background: radial-gradient(
 				closest-side,
-				color-mix(in oklab, var(--_sonic-lit) calc(100% - 45% * var(--_sonic-relief)), #fff),
+				color-mix(
+					in oklab,
+					var(--_sonic-lit) calc(100% - 45% * var(--_sonic-relief)),
+					var(--_sonic-shine)
+				),
 				var(--_sonic-lit)
 			);
 		}

package/dist/styles/material/arc.css

@@ -13,9 +13,10 @@
 		);
 		--_sonic-arc-shade: radial-gradient(
 			closest-side,
-			rgb(0 0 0 / calc(0.55 * var(--_sonic-relief))) calc(100% - var(--_sonic-arc-width)),
+			rgb(from var(--_sonic-shade) r g b / 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 / calc(0.25 * var(--_sonic-relief))) 100%
+			rgb(from var(--_sonic-shade) r g b / calc(0.25 * var(--_sonic-relief))) 100%
 		);
 	}
 }

package/dist/styles/material/bracket.css

@@ -19,8 +19,8 @@
 		);
 		scale: 0.6;
 		transition:
-			opacity 120ms ease-out,
-			scale 120ms ease-out;
+			opacity var(--_sonic-fade-duration) ease-out,
+			scale var(--_sonic-fade-duration) ease-out;
 	}
 
 	:state(dragging) > * > .sonic-xy-bracket,

package/dist/styles/material/cap.css

@@ -23,36 +23,57 @@
 		--_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) calc(100% - 30% * var(--_sonic-relief)), #fff),
-			color-mix(in oklab, var(--_sonic-cap) calc(100% - 45% * var(--_sonic-relief)), #000)
+			color-mix(
+				in oklab,
+				var(--_sonic-cap) calc(100% - 30% * var(--_sonic-relief)),
+				var(--_sonic-shine)
+			),
+			color-mix(
+				in oklab,
+				var(--_sonic-cap) calc(100% - 45% * var(--_sonic-relief)),
+				var(--_sonic-shade)
+			)
 		);
 		--_sonic-face: linear-gradient(
 			var(--_sonic-light-fall),
-			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)
+			color-mix(
+				in oklab,
+				var(--_sonic-cap) calc(100% - 15% * var(--_sonic-relief)),
+				var(--_sonic-shade)
+			),
+			color-mix(
+				in oklab,
+				var(--_sonic-cap) calc(100% - 10% * var(--_sonic-relief)),
+				var(--_sonic-shine)
+			)
 		);
 		--_sonic-sheen: linear-gradient(
 			105deg,
 			transparent 20%,
-			rgb(255 255 255 / calc(0.1 * var(--_sonic-relief))) 45%,
+			rgb(from var(--_sonic-shine) r g b / calc(0.1 * var(--_sonic-relief))) 45%,
 			transparent 55%,
-			rgb(0 0 0 / calc(0.06 * var(--_sonic-relief))) 80%
+			rgb(from var(--_sonic-shade) r g b / 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);
+			scale var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1),
+			translate var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1),
+			box-shadow var(--_sonic-press-duration) 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 / calc(0.35 * var(--_sonic-relief))),
+				rgb(from var(--_sonic-shade) r g b / 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 / calc(0.12 * var(--_sonic-relief)));
+				rgb(from var(--_sonic-shine) r g b / calc(0.12 * var(--_sonic-relief)));
 		--_sonic-rim-width: max(1px, round(0.75 * var(--_sonic-unit), var(--_sonic-snap)));
 		--_sonic-rim: 0 0 0 var(--_sonic-rim-width)
 			var(
 				--sonic-cap-edge,
-				color-mix(in oklab, var(--_sonic-cap) calc(100% - 60% * var(--_sonic-relief)), #000)
+				color-mix(
+					in oklab,
+					var(--_sonic-cap) calc(100% - 60% * var(--_sonic-relief)),
+					var(--_sonic-shade)
+				)
 			);
-		--_sonic-drop-shade: rgb(0 0 0 / calc(0.65 * var(--_sonic-relief)));
+		--_sonic-drop-shade: rgb(from var(--_sonic-shade) r g b / 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) calc(60% * var(--_sonic-focus-strength)), transparent);

package/dist/styles/material/core.css

@@ -32,6 +32,10 @@
 	) {
 		--_sonic-unlit: var(--sonic-unlit, oklch(27.4% 0.005 286deg));
 		--_sonic-relief: var(--sonic-relief, 0);
+		--_sonic-shade: var(--sonic-shade, #000);
+		--_sonic-shine: var(--sonic-shine, #fff);
+		--_sonic-press-duration: var(--sonic-press-duration, 60ms);
+		--_sonic-fade-duration: var(--sonic-fade-duration, 120ms);
 		--_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));

package/dist/styles/material/glass.css

@@ -29,7 +29,7 @@
 				color-mix(
 					in oklab,
 					var(--_sonic-glass) calc(100% - 12% * var(--_sonic-glass-depth, var(--_sonic-relief))),
-					#fff
+					var(--_sonic-shine)
 				),
 				var(--_sonic-glass)
 			)

package/dist/styles/material/groove.css

@@ -2,9 +2,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 / 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))),
+				rgb(from var(--_sonic-shade) r g b / calc(0.55 * var(--_sonic-relief))),
+			inset 0 0 calc(0.5 * var(--_sonic-unit))
+				rgb(from var(--_sonic-shade) r g b / 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)));
+				rgb(from var(--_sonic-shine) r g b / calc(0.06 * var(--_sonic-relief)));
 	}
 }

package/dist/styles/material/keycap.css

@@ -18,11 +18,12 @@
 		);
 		--_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 / calc(0.3 * var(--_sonic-relief)))
+					calc(0.4 * var(--_sonic-unit))
+					rgb(from var(--_sonic-shade) r g b / 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 / calc(0.07 * var(--_sonic-relief)))
+					rgb(from var(--_sonic-shine) r g b / calc(0.07 * var(--_sonic-relief)))
 			);
 	}
 

package/dist/styles/material/lens.css

@@ -2,7 +2,7 @@
 	:is(.sonic-led, .sonic-meter) {
 		--_sonic-lens-glint: linear-gradient(
 			var(--_sonic-light-fall),
-			rgb(255 255 255 / calc(0.1 * var(--_sonic-relief))),
+			rgb(from var(--_sonic-shine) r g b / calc(0.1 * var(--_sonic-relief))),
 			transparent 60%
 		);
 		--_sonic-lens-glass: var(--sonic-lens, color-mix(in oklab, var(--_sonic-unlit) 60%, #000));

package/dist/styles/material/pane.css

@@ -44,24 +44,25 @@
 			background:
 				linear-gradient(
 					var(--_sonic-light-fall),
-					rgb(255 255 255 / calc(0.07 * var(--_sonic-glass-depth))),
+					rgb(from var(--_sonic-shine) r g b / calc(0.07 * var(--_sonic-glass-depth))),
 					transparent 45%
 				),
 				radial-gradient(
 					farthest-corner,
 					transparent 55%,
-					rgb(0 0 0 / calc(0.4 * var(--_sonic-glass-texture)))
+					rgb(from var(--_sonic-shade) r g b / calc(0.4 * var(--_sonic-glass-texture)))
 				),
 				repeating-linear-gradient(
 					to bottom,
-					rgb(0 0 0 / calc(0.025 * var(--_sonic-glass-texture))) 0
+					rgb(from var(--_sonic-shade) r g b / calc(0.025 * var(--_sonic-glass-texture))) 0
 						calc(var(--_sonic-glass-pitch) / 2),
 					transparent 0 var(--_sonic-glass-pitch)
 				);
 			border-radius: inherit;
 			box-shadow:
 				var(--_sonic-well),
-				inset 0 0 calc(3 * var(--_sonic-glass-depth) * var(--_sonic-unit)) rgb(0 0 0 / 45%);
+				inset 0 0 calc(3 * var(--_sonic-glass-depth) * var(--_sonic-unit))
+					rgb(from var(--_sonic-shade) r g b / 45%);
 		}
 
 		@media (forced-colors: none) {

package/dist/styles/material/readout.css

@@ -46,16 +46,16 @@
 		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 / calc(0.55 * var(--_sonic-relief))),
+				rgb(from var(--_sonic-shade) r g b / calc(0.55 * var(--_sonic-relief))),
 			inset 0 0 0 max(1px, round(var(--_sonic-unit), var(--_sonic-snap)))
-				rgb(255 255 255 / calc(0.08 * var(--_sonic-relief)));
+				rgb(from var(--_sonic-shine) r g b / calc(0.08 * var(--_sonic-relief)));
 		opacity: 0;
 		translate: 0 calc(0.15 * var(--_sonic-readout-size));
 		transition:
-			opacity 120ms ease-out,
-			translate 120ms ease-out,
-			display 120ms allow-discrete,
-			overlay 120ms allow-discrete;
+			opacity var(--_sonic-fade-duration) ease-out,
+			translate var(--_sonic-fade-duration) ease-out,
+			display var(--_sonic-fade-duration) allow-discrete,
+			overlay var(--_sonic-fade-duration) allow-discrete;
 
 		/* Grid only while open; engines keep the flip a closed readout took against a filtered ancestor */
 		&:popover-open {

package/dist/styles/material/well.css

@@ -16,9 +16,9 @@
 			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 / calc(0.6 * var(--_sonic-relief))),
+				rgb(from var(--_sonic-shade) r g b / 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 / calc(0.06 * var(--_sonic-relief)));
+				rgb(from var(--_sonic-shine) r g b / calc(0.06 * var(--_sonic-relief)));
 	}
 }

package/dist/styles/meter.css

@@ -263,18 +263,13 @@
 		position: absolute;
 		inset: 0;
 		content: '';
-		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;
+		background: var(--_sonic-lens-glint) 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 / calc(0.45 * var(--_sonic-relief))),
+				rgb(from var(--_sonic-shine) r g b / calc(0.45 * var(--_sonic-relief))),
 				transparent
 			)
 			0 100% / 100% var(--_sonic-meter-pitch) repeat-y;

package/dist/styles/number.css

@@ -31,6 +31,7 @@
 
 	.sonic-number {
 		--_sonic-number-radius-ratio: var(--sonic-number-radius-ratio, 0.15);
+		--_sonic-number-radius-own: calc(var(--_sonic-number-size) * var(--sonic-number-radius-ratio));
 		--_sonic-number-inset-ratio: var(--sonic-number-inset-ratio, 0.2);
 		--_sonic-number-text-ratio: var(--sonic-number-text-ratio, 0.45);
 		--_sonic-number-travel: var(--sonic-number-travel, 160px);
@@ -44,7 +45,10 @@
 		line-height: 1;
 		touch-action: pan-x;
 		cursor: ns-resize;
-		border-radius: calc(var(--_sonic-number-size) * var(--_sonic-number-radius-ratio));
+		border-radius: var(
+			--_sonic-number-radius-own,
+			var(--sonic-radius, calc(var(--_sonic-number-size) * var(--_sonic-number-radius-ratio)))
+		);
 		box-shadow: var(--_sonic-focus-shadow);
 	}
 

package/dist/styles/panel.css

@@ -29,13 +29,14 @@
 		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 / calc(0.07 * var(--_sonic-relief))),
+				rgb(from var(--_sonic-shine) r g b / 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 / calc(0.35 * var(--_sonic-relief))),
+				rgb(from var(--_sonic-shade) r g b / 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 / calc(0.45 * var(--_sonic-relief)));
+				calc(3 * max(0px, var(--_sonic-panel-depth)))
+				rgb(from var(--_sonic-shade) r g b / calc(0.45 * var(--_sonic-relief)));
 	}
 
 	.sonic-panel-title {

package/dist/styles/ring.css

@@ -70,7 +70,7 @@
 	}
 
 	.sonic-ring > * > .sonic-button {
-		--_sonic-button-radius-ratio: 0.5;
+		--_sonic-button-radius-own: calc(var(--_sonic-button-size) / 2);
 		--_sonic-button-face-radius-ratio: 0.5;
 
 		inline-size: var(--_sonic-button-size);

package/dist/styles/screen.css

@@ -11,12 +11,16 @@
 		--_sonic-screen-size: var(--sonic-screen-size, 2.5rem);
 		--_sonic-screen-aspect-ratio: var(--sonic-screen-aspect-ratio, 3);
 		--_sonic-screen-radius-ratio: var(--sonic-screen-radius-ratio, 0.15);
+		--_sonic-screen-radius-own: calc(var(--_sonic-screen-size) * var(--sonic-screen-radius-ratio));
 		--_sonic-screen-inset-ratio: var(--sonic-screen-inset-ratio, 0.1);
 		--_sonic-unit: calc(var(--_sonic-screen-size) / 32);
 
 		inline-size: calc(var(--_sonic-screen-size) * var(--_sonic-screen-aspect-ratio));
 		block-size: var(--_sonic-screen-size);
 		padding: calc(var(--_sonic-screen-size) * var(--_sonic-screen-inset-ratio));
-		border-radius: calc(var(--_sonic-screen-size) * var(--_sonic-screen-radius-ratio));
+		border-radius: var(
+			--_sonic-screen-radius-own,
+			var(--sonic-radius, calc(var(--_sonic-screen-size) * var(--_sonic-screen-radius-ratio)))
+		);
 	}
 }

package/dist/styles/segmented.css

@@ -38,11 +38,18 @@
 			var(--_sonic-segmented-press-scale)
 		);
 		--_sonic-segmented-font-ratio: var(--sonic-segmented-font-ratio, 0.34);
+		--_sonic-segmented-font-own: calc(
+			var(--_sonic-segmented-size) * var(--sonic-segmented-font-ratio)
+		);
 		--_sonic-segmented-padding-ratio: var(--sonic-segmented-padding-ratio, 0.25);
 		--_sonic-segmented-icon-ratio: var(--sonic-segmented-icon-ratio, 0.5);
 		--_sonic-unit: calc(var(--_sonic-segmented-size) / 32);
-		--_sonic-segmented-corner: calc(
-			var(--_sonic-segmented-size) * var(--_sonic-segmented-radius-ratio)
+		--_sonic-segmented-radius-own: calc(
+			var(--_sonic-segmented-size) * var(--sonic-segmented-radius-ratio)
+		);
+		--_sonic-segmented-corner: var(
+			--_sonic-segmented-radius-own,
+			var(--sonic-radius, calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-radius-ratio)))
 		);
 		--_sonic-keycap-depth: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-depth-ratio));
 		--_sonic-segmented-gap: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-gap-ratio));
@@ -75,14 +82,20 @@
 		min-inline-size: calc(var(--_sonic-segmented-size) - 2 * var(--_sonic-segmented-gap));
 		padding: 0;
 		font: inherit;
-		font-size: calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-font-ratio));
+		font-size: var(
+			--_sonic-segmented-font-own,
+			var(
+				--sonic-legend-font-size,
+				calc(var(--_sonic-segmented-size) * var(--_sonic-segmented-font-ratio))
+			)
+		);
 		line-height: 1;
 		color: var(--_sonic-ink);
 		cursor: pointer;
 		background: transparent;
 		border: 0;
 		border-radius: var(--_sonic-segmented-inner-corner);
-		transition: color 120ms ease-out;
+		transition: color var(--_sonic-fade-duration) ease-out;
 	}
 
 	.sonic-segmented-option:where([data-sonic-pressed]):not(:disabled),

package/dist/styles/slider.css

@@ -92,7 +92,7 @@
 		touch-action: var(--sonic-touch-action, pan-y);
 		cursor: var(--_sonic-slider-cursor);
 		user-select: none;
-		transition: --_sonic-slider-groove-ratio 120ms ease-out;
+		transition: --_sonic-slider-groove-ratio var(--_sonic-fade-duration) ease-out;
 
 		@media (prefers-reduced-motion: reduce) {
 			transition: none;
@@ -424,7 +424,13 @@
 			var(--_sonic-slider-breadth) * var(--_sonic-slider-indicator-ratio)
 		);
 		--_sonic-slider-bevel: calc(var(--_sonic-slider-breadth) * var(--_sonic-slider-bevel-ratio));
-		--_sonic-slider-corner: calc(var(--_sonic-slider-breadth) * var(--_sonic-slider-radius-ratio));
+		--_sonic-slider-radius-own: calc(
+			var(--_sonic-slider-breadth) * var(--sonic-slider-radius-ratio)
+		);
+		--_sonic-slider-corner: var(
+			--_sonic-slider-radius-own,
+			var(--sonic-radius, calc(var(--_sonic-slider-breadth) * var(--_sonic-slider-radius-ratio)))
+		);
 		--_sonic-slider-indicator-inset: calc(
 			var(--_sonic-slider-bevel) + var(--_sonic-slider-breadth) * 0.1
 		);
@@ -460,7 +466,7 @@
 			background: var(--_sonic-slider-indicator);
 			border-radius: calc(var(--_sonic-slider-indicator-width) / 2);
 			box-shadow: inset 0 0 calc(0.75 * var(--_sonic-unit))
-				rgb(0 0 0 / calc(0.55 * var(--_sonic-relief)));
+				rgb(from var(--_sonic-shade) r g b / calc(0.55 * var(--_sonic-relief)));
 		}
 	}
 

package/dist/styles/spectrum.css

@@ -77,13 +77,25 @@
 
 		inline-size: var(--_sonic-spectrum-length);
 		block-size: var(--_sonic-spectrum-size);
-		padding: calc(var(--_sonic-spectrum-size) * var(--sonic-spectrum-inset-ratio, 0.06));
+
+		--_sonic-spectrum-inset: calc(
+			var(--_sonic-spectrum-size) * var(--sonic-spectrum-inset-ratio, 0.06)
+		);
+
+		padding: var(--_sonic-spectrum-inset);
 
 		/* The canvas's backing size would otherwise feed an intrinsically sized parent */
 		contain: size;
 
-		--_sonic-glass-radius: calc(
-			var(--_sonic-spectrum-size) * var(--sonic-spectrum-radius-ratio, 0.08)
+		--_sonic-spectrum-radius-own: calc(
+			var(--_sonic-spectrum-size) * var(--sonic-spectrum-radius-ratio)
+		);
+		--_sonic-glass-radius: var(
+			--_sonic-spectrum-radius-own,
+			var(
+				--sonic-radius,
+				calc(var(--_sonic-spectrum-size) * var(--sonic-spectrum-radius-ratio, 0.08))
+			)
 		);
 
 		border-radius: var(--_sonic-glass-radius);
@@ -98,6 +110,7 @@
 		display: block;
 		inline-size: 100%;
 		block-size: 100%;
+		border-radius: max(0px, var(--_sonic-glass-radius) - var(--_sonic-spectrum-inset));
 	}
 
 	/* Opaque, since a system highlight carries alpha that would blend the bars into the glass */

package/dist/styles/switch.css

@@ -35,6 +35,7 @@
 		--_sonic-switch-bat-ratio: var(--sonic-switch-bat-ratio, 0.36);
 		--_sonic-switch-bushing-ratio: var(--sonic-switch-bushing-ratio, 0.62);
 		--_sonic-switch-font-ratio: var(--sonic-switch-font-ratio, 0.4);
+		--_sonic-switch-font-own: calc(var(--_sonic-switch-size) * var(--sonic-switch-font-ratio));
 		--_sonic-unit: calc(var(--_sonic-switch-size) / 32);
 		--_sonic-switch-reach: calc(var(--_sonic-switch-size) * var(--_sonic-switch-reach-ratio));
 		--_sonic-switch-ball: calc(var(--_sonic-switch-size) * var(--_sonic-switch-bat-ratio));
@@ -46,12 +47,12 @@
 		--_sonic-switch-metal: color-mix(
 			in oklab,
 			var(--_sonic-switch-cap) calc(100% - 55% * var(--_sonic-relief)),
-			#fff
+			var(--_sonic-shine)
 		);
 		--_sonic-switch-metal-shade: color-mix(
 			in oklab,
 			var(--_sonic-switch-cap) calc(100% - 20% * var(--_sonic-relief)),
-			#000
+			var(--_sonic-shade)
 		);
 
 		display: inline-grid;
@@ -84,7 +85,13 @@
 		place-self: stretch;
 		padding: 0;
 		font: inherit;
-		font-size: calc(var(--_sonic-switch-size) * var(--_sonic-switch-font-ratio));
+		font-size: var(
+			--_sonic-switch-font-own,
+			var(
+				--sonic-legend-font-size,
+				calc(var(--_sonic-switch-size) * var(--_sonic-switch-font-ratio))
+			)
+		);
 		color: inherit;
 		text-transform: inherit;
 		letter-spacing: inherit;
@@ -241,7 +248,7 @@
 		--_sonic-switch-bushing-shade: color-mix(
 			in oklab,
 			var(--_sonic-cap) calc(100% - 20% * var(--_sonic-relief)),
-			#000
+			var(--_sonic-shade)
 		);
 
 		inline-size: calc(var(--_sonic-switch-size) * var(--_sonic-switch-bushing-ratio));
@@ -251,10 +258,20 @@
 			--sonic-well,
 			radial-gradient(
 				closest-side,
-				color-mix(in oklab, var(--_sonic-cap) calc(100% - 70% * var(--_sonic-relief)), #000) 0 42%,
+				color-mix(
+						in oklab,
+						var(--_sonic-cap) calc(100% - 70% * var(--_sonic-relief)),
+						var(--_sonic-shade)
+					)
+					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%,
+				color-mix(
+						in oklab,
+						var(--_sonic-cap) calc(100% - 25% * var(--_sonic-relief)),
+						var(--_sonic-shine)
+					)
+					88%,
 				var(--_sonic-switch-bushing-shade)
 			)
 		);
@@ -266,7 +283,7 @@
 					color-mix(
 						in oklab,
 						var(--_sonic-switch-cap) calc(100% - 60% * var(--_sonic-relief)),
-						#000
+						var(--_sonic-shade)
 					)
 				),
 			calc(1.5 * var(--_sonic-cast-x)) calc(1.5 * var(--_sonic-cast-y)) calc(2 * var(--_sonic-unit))
@@ -279,7 +296,11 @@
 		--_sonic-switch-pivot: calc((var(--_sonic-switch-size) - var(--_sonic-switch-shaft)) / 2);
 		--_sonic-switch-sheen: linear-gradient(
 			var(--_sonic-light-fall),
-			color-mix(in oklab, var(--_sonic-switch-metal) calc(100% - 45% * var(--_sonic-relief)), #fff)
+			color-mix(
+					in oklab,
+					var(--_sonic-switch-metal) calc(100% - 45% * var(--_sonic-relief)),
+					var(--_sonic-shine)
+				)
 				12%,
 			var(--_sonic-switch-metal) 45%,
 			var(--_sonic-switch-metal-shade) 88%
@@ -287,7 +308,11 @@
 		--_sonic-switch-outline: max(1px, round(0.4 * var(--_sonic-unit), var(--_sonic-snap)));
 		--_sonic-switch-rim: var(
 			--sonic-cap-edge,
-			color-mix(in oklab, var(--_sonic-switch-cap) calc(100% - 30% * var(--_sonic-relief)), #000)
+			color-mix(
+				in oklab,
+				var(--_sonic-switch-cap) calc(100% - 30% * var(--_sonic-relief)),
+				var(--_sonic-shade)
+			)
 		);
 
 		position: relative;
@@ -344,7 +369,7 @@
 				calc((var(--_sonic-switch-ball) - var(--_sonic-switch-size)) / 2);
 			box-shadow:
 				inset 0 0 calc(1.5 * var(--_sonic-unit)) calc(0.4 * var(--_sonic-unit))
-					rgb(0 0 0 / calc(0.3 * var(--_sonic-relief))),
+					rgb(from var(--_sonic-shade) r g b / calc(0.3 * var(--_sonic-relief))),
 				0 0 0 var(--_sonic-switch-outline) var(--_sonic-switch-rim),
 				var(--_sonic-focus-shadow);
 			translate: calc(var(--_sonic-switch-along-x) * var(--_sonic-switch-throw))

package/dist/styles/toggle.css

@@ -52,6 +52,7 @@
 		--_sonic-toggle-bevel-ratio: var(--sonic-toggle-bevel-ratio, 0.075);
 		--_sonic-toggle-depth-ratio: var(--sonic-toggle-depth-ratio, calc(0.03 * var(--_sonic-relief)));
 		--_sonic-toggle-font-ratio: var(--sonic-toggle-font-ratio, 0.26);
+		--_sonic-toggle-font-own: calc(var(--_sonic-toggle-size) * var(--sonic-toggle-font-ratio));
 		--_sonic-toggle-press-scale: var(--sonic-toggle-press-scale, 0.985);
 		--_sonic-toggle-icon-ratio: var(--sonic-toggle-icon-ratio, 0.5);
 		--_sonic-toggle-led-ratio: var(--sonic-toggle-led-ratio, 0.25);
@@ -107,7 +108,7 @@
 		user-select: none;
 		transition:
 			--_sonic-toggle-at 120ms cubic-bezier(0.4, 0, 0.2, 1),
-			--_sonic-toggle-sink 60ms cubic-bezier(0.4, 0, 0.2, 1);
+			--_sonic-toggle-sink var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1);
 	}
 
 	[orientation='vertical'] > .sonic-toggle {
@@ -122,7 +123,7 @@
 	}
 
 	:state(dragging) > .sonic-toggle {
-		transition: --_sonic-toggle-sink 60ms cubic-bezier(0.4, 0, 0.2, 1);
+		transition: --_sonic-toggle-sink var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1);
 	}
 
 	[data-sonic-lit='ok'] > .sonic-toggle:has(> [role='switch']),
@@ -205,7 +206,7 @@
 		box-shadow:
 			var(--_sonic-well),
 			inset 0 0 0 calc(1px * (1 - var(--_sonic-relief))) var(--_sonic-toggle-well-edge);
-		transition: --_sonic-toggle-well-tint 120ms ease-out;
+		transition: --_sonic-toggle-well-tint var(--_sonic-fade-duration) ease-out;
 	}
 
 	/* The position rides `--_sonic-toggle-at`, which already eases; easing the offset too would trail a drag */
@@ -219,8 +220,8 @@
 		translate: calc(var(--_sonic-toggle-along-x) * var(--_sonic-toggle-throw))
 			calc(var(--_sonic-toggle-along-y) * var(--_sonic-toggle-throw) + var(--_sonic-toggle-sink));
 		transition:
-			scale 60ms cubic-bezier(0.4, 0, 0.2, 1),
-			box-shadow 60ms cubic-bezier(0.4, 0, 0.2, 1);
+			scale var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1),
+			box-shadow var(--_sonic-press-duration) cubic-bezier(0.4, 0, 0.2, 1);
 
 		& > .sonic-led {
 			--_sonic-led-size: var(
@@ -241,7 +242,13 @@
 		position: relative;
 		padding: 0;
 		font: inherit;
-		font-size: calc(var(--_sonic-toggle-size) * var(--_sonic-toggle-font-ratio));
+		font-size: var(
+			--_sonic-toggle-font-own,
+			var(
+				--sonic-legend-font-size,
+				calc(var(--_sonic-toggle-size) * var(--_sonic-toggle-font-ratio))
+			)
+		);
 		line-height: 1;
 		color: inherit;
 		text-transform: inherit;
@@ -304,7 +311,7 @@
 		opacity: 0;
 		translate: calc(var(--_sonic-toggle-along-x) * var(--_sonic-toggle-ride))
 			calc(var(--_sonic-toggle-along-y) * var(--_sonic-toggle-ride) + var(--_sonic-toggle-sink));
-		transition: opacity 120ms ease-out;
+		transition: opacity var(--_sonic-fade-duration) ease-out;
 
 		& > * {
 			filter: var(--_sonic-engraving);