@xsynaptic/sonic-ui 0.4.0 → 0.6.0

package/dist/styles/switch.css

@@ -0,0 +1,386 @@
+@property --_sonic-switch-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 32px;
+}
+
+@layer sonic {
+	:is(sonic-switch, .sonic-switch) {
+		--_sonic-switch-size: var(--sonic-switch-size, 2rem);
+	}
+
+	:has(> .sonic-switch):not([hidden]) {
+		display: contents;
+	}
+
+	sonic-switch:not(:defined, [hidden]) {
+		display: block;
+		visibility: hidden;
+		flex-shrink: 0;
+		inline-size: var(--_sonic-switch-size);
+		block-size: var(--_sonic-switch-size);
+		overflow: hidden;
+	}
+
+	.sonic-switch {
+		--_sonic-switch-reach-ratio: var(--sonic-switch-reach-ratio, 0.3);
+		--_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-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));
+		--_sonic-switch-shaft: calc(0.5 * var(--_sonic-switch-ball));
+		--_sonic-switch-along-x: 0;
+		--_sonic-switch-along-y: 1;
+		--_sonic-switch-pan: pan-x;
+		--_sonic-switch-cap: var(--sonic-cap, var(--_sonic-ink));
+		--_sonic-switch-metal: color-mix(
+			in oklab,
+			var(--_sonic-switch-cap) calc(100% - 55% * var(--_sonic-relief)),
+			#fff
+		);
+		--_sonic-switch-metal-shade: color-mix(
+			in oklab,
+			var(--_sonic-switch-cap) calc(100% - 20% * var(--_sonic-relief)),
+			#000
+		);
+
+		display: inline-grid;
+		flex-shrink: 0;
+		grid-template: var(--_sonic-switch-size) / var(--_sonic-switch-size);
+		place-items: center;
+		line-height: 1;
+		user-select: none;
+
+		& > * {
+			grid-area: 1 / 1;
+		}
+	}
+
+	[orientation='horizontal'] > .sonic-switch {
+		--_sonic-switch-along-x: 1;
+		--_sonic-switch-along-y: 0;
+		--_sonic-switch-pan: pan-y;
+	}
+
+	.sonic-switch-position {
+		position: relative;
+		display: grid;
+		place-items: center;
+		place-self: stretch;
+		padding: 0;
+		font: inherit;
+		font-size: calc(var(--_sonic-switch-size) * var(--_sonic-switch-font-ratio));
+		color: inherit;
+		text-transform: inherit;
+		letter-spacing: inherit;
+		touch-action: var(--_sonic-switch-pan);
+		cursor: pointer;
+		background: transparent;
+		border: 0;
+
+		&:disabled {
+			cursor: default;
+		}
+
+		&:focus-visible {
+			outline: 2px solid transparent;
+			outline-offset: -2px;
+		}
+
+		&:has([data-sonic-momentary]) {
+			touch-action: none;
+		}
+	}
+
+	.sonic-switch[data-sonic-position-count] > .sonic-switch-position::after {
+		inset-block: 0;
+	}
+
+	[orientation='horizontal']
+		> .sonic-switch[data-sonic-position-count]
+		> .sonic-switch-position::after {
+		inset-block: var(--_sonic-target-outset);
+		inset-inline: 0;
+	}
+
+	.sonic-switch-label {
+		padding: calc(var(--_sonic-switch-size) * 0.12);
+		white-space: nowrap;
+
+		& svg {
+			display: block;
+			inline-size: 1em;
+			block-size: 1em;
+		}
+	}
+
+	.sonic-switch[data-sonic-position-count] {
+		& > :is(.sonic-switch-bushing, .sonic-switch-bat) {
+			grid-area: 2 / 1 / -2 / 2;
+		}
+
+		& > .sonic-switch-position {
+			grid-template: subgrid / subgrid;
+		}
+	}
+
+	.sonic-switch[data-sonic-position-count='2'] {
+		grid-template:
+			auto repeat(2, calc(var(--_sonic-switch-size) / 2)) auto /
+			minmax(var(--_sonic-switch-size), auto);
+
+		& > .sonic-switch-position {
+			grid-area: 1 / 1 / 3 / 2;
+
+			&:last-child {
+				grid-area: 3 / 1 / 5 / 2;
+
+				& > .sonic-switch-label {
+					grid-row: 2;
+				}
+			}
+		}
+	}
+
+	.sonic-switch[data-sonic-position-count='3'] {
+		grid-template:
+			auto repeat(3, calc(var(--_sonic-switch-size) / 3)) auto /
+			minmax(var(--_sonic-switch-size), auto) auto;
+
+		& > .sonic-switch-position {
+			grid-area: 1 / 1 / 3 / 2;
+
+			&:last-child {
+				grid-area: 4 / 1 / 6 / 2;
+
+				& > .sonic-switch-label {
+					grid-row: 2;
+				}
+			}
+
+			&:nth-child(2 of .sonic-switch-position) {
+				grid-area: 3 / 1 / 4 / 3;
+
+				& > .sonic-switch-label {
+					grid-column: 2;
+				}
+			}
+		}
+	}
+
+	[orientation='horizontal']
+		> .sonic-switch[data-sonic-position-count]
+		> :is(.sonic-switch-bushing, .sonic-switch-bat) {
+		grid-area: 1 / 2 / 2 / -2;
+	}
+
+	[orientation='horizontal'] > .sonic-switch[data-sonic-position-count='2'] {
+		grid-template:
+			minmax(var(--_sonic-switch-size), auto) /
+			auto repeat(2, calc(var(--_sonic-switch-size) / 2)) auto;
+
+		& > .sonic-switch-position {
+			grid-area: 1 / 1 / 2 / 3;
+
+			&:last-child {
+				grid-area: 1 / 3 / 2 / 5;
+
+				& > .sonic-switch-label {
+					grid-area: 1 / 2;
+				}
+			}
+		}
+	}
+
+	[orientation='horizontal'] > .sonic-switch[data-sonic-position-count='3'] {
+		grid-template:
+			minmax(var(--_sonic-switch-size), auto) auto /
+			auto repeat(3, calc(var(--_sonic-switch-size) / 3)) auto;
+
+		& > .sonic-switch-position {
+			grid-area: 1 / 1 / 2 / 3;
+
+			&:last-child {
+				grid-area: 1 / 4 / 2 / 6;
+
+				& > .sonic-switch-label {
+					grid-area: 1 / 2;
+				}
+			}
+
+			&:nth-child(2 of .sonic-switch-position) {
+				grid-area: 1 / 3 / 3 / 4;
+
+				& > .sonic-switch-label {
+					grid-area: 2 / 1;
+				}
+			}
+		}
+	}
+
+	.sonic-switch-bushing {
+		--_sonic-switch-bushing-shade: color-mix(
+			in oklab,
+			var(--_sonic-cap) calc(100% - 20% * var(--_sonic-relief)),
+			#000
+		);
+
+		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)
+		);
+		border-radius: 50%;
+		box-shadow:
+			0 0 0 max(1px, 0.75 * var(--_sonic-unit))
+				var(
+					--sonic-cap-edge,
+					color-mix(
+						in oklab,
+						var(--_sonic-switch-cap) calc(100% - 60% * var(--_sonic-relief)),
+						#000
+					)
+				),
+			calc(1.5 * var(--_sonic-cast-x)) calc(1.5 * var(--_sonic-cast-y)) calc(2 * var(--_sonic-unit))
+				var(--_sonic-drop-shade);
+	}
+
+	.sonic-switch-bat {
+		--_sonic-switch-lean: max(var(--_sonic-switch-at, 0), -1 * var(--_sonic-switch-at, 0));
+		--_sonic-switch-transition:
+			translate 90ms cubic-bezier(0.4, 0, 0.2, 1), inline-size 90ms cubic-bezier(0.4, 0, 0.2, 1),
+			block-size 90ms cubic-bezier(0.4, 0, 0.2, 1),
+			background-position 90ms cubic-bezier(0.4, 0, 0.2, 1);
+		--_sonic-switch-sheen: linear-gradient(
+			var(--_sonic-light-fall),
+			color-mix(in oklab, var(--_sonic-switch-metal) calc(100% - 45% * var(--_sonic-relief)), #fff)
+				12%,
+			var(--_sonic-switch-metal) 45%,
+			var(--_sonic-switch-metal-shade) 88%
+		);
+		--_sonic-switch-outline: max(1px, 0.4 * var(--_sonic-unit));
+		--_sonic-switch-rim: var(
+			--sonic-cap-edge,
+			color-mix(in oklab, var(--_sonic-switch-cap) calc(100% - 30% * var(--_sonic-relief)), #000)
+		);
+
+		position: relative;
+		z-index: 1;
+		inline-size: var(--_sonic-switch-size);
+		block-size: var(--_sonic-switch-size);
+		pointer-events: none;
+		filter: drop-shadow(
+			calc((1 + var(--_sonic-switch-lean)) * var(--_sonic-cast-x))
+				calc((1 + var(--_sonic-switch-lean)) * var(--_sonic-cast-y)) calc(1.5 * var(--_sonic-unit))
+				var(--_sonic-drop-shade)
+		);
+
+		@media (prefers-reduced-motion: reduce) {
+			--_sonic-switch-transition: none;
+		}
+
+		&::before,
+		&::after {
+			position: absolute;
+			inset: 0;
+			margin: auto;
+			content: '';
+			background: var(--_sonic-switch-sheen);
+			background-size: var(--_sonic-switch-size) var(--_sonic-switch-size);
+			border-radius: 999px;
+			box-shadow: 0 0 0 var(--_sonic-switch-outline) var(--_sonic-switch-rim);
+			transition: var(--_sonic-switch-transition);
+		}
+
+		&::before {
+			--_sonic-switch-shaft-x: calc(
+				var(--_sonic-switch-shaft) + var(--_sonic-switch-along-x) * var(--_sonic-switch-lean) *
+					var(--_sonic-switch-reach)
+			);
+			--_sonic-switch-shaft-y: calc(
+				var(--_sonic-switch-shaft) + var(--_sonic-switch-along-y) * var(--_sonic-switch-lean) *
+					var(--_sonic-switch-reach)
+			);
+
+			inline-size: var(--_sonic-switch-shaft-x);
+			block-size: var(--_sonic-switch-shaft-y);
+			background-position: calc((var(--_sonic-switch-shaft-x) - var(--_sonic-switch-size)) / 2)
+				calc((var(--_sonic-switch-shaft-y) - var(--_sonic-switch-size)) / 2);
+			translate: calc(
+					var(--_sonic-switch-along-x) * var(--_sonic-switch-at, 0) * var(--_sonic-switch-reach) / 2
+				)
+				calc(
+					var(--_sonic-switch-along-y) * var(--_sonic-switch-at, 0) * var(--_sonic-switch-reach) / 2
+				);
+		}
+
+		&::after {
+			inline-size: var(--_sonic-switch-ball);
+			block-size: var(--_sonic-switch-ball);
+			background-position: calc((var(--_sonic-switch-ball) - var(--_sonic-switch-size)) / 2)
+				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))),
+				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-at, 0) * var(--_sonic-switch-reach)
+				)
+				calc(var(--_sonic-switch-along-y) * var(--_sonic-switch-at, 0) * var(--_sonic-switch-reach));
+		}
+	}
+
+	.sonic-switch:has(> .sonic-switch-position:focus-visible) {
+		--_sonic-focus-shadow: var(--_sonic-focus-glow);
+	}
+
+	.sonic-switch:has(> .sonic-switch-position:disabled) {
+		--_sonic-switch-cap: var(--sonic-cap, var(--_sonic-etch));
+		--_sonic-switch-metal: var(--_sonic-etch);
+		--_sonic-switch-metal-shade: var(--_sonic-etch);
+	}
+
+	@media (forced-colors: active) {
+		:is(.sonic-switch-bushing, .sonic-switch-bat) {
+			forced-color-adjust: none;
+		}
+
+		.sonic-switch {
+			--_sonic-switch-metal: CanvasText;
+			--_sonic-switch-metal-shade: CanvasText;
+		}
+
+		.sonic-switch:has(> .sonic-switch-position:disabled) {
+			--_sonic-switch-metal: GrayText;
+			--_sonic-switch-metal-shade: GrayText;
+		}
+
+		.sonic-switch-bushing {
+			background: Canvas;
+			box-shadow: 0 0 0 1px CanvasText;
+		}
+
+		.sonic-switch-bat {
+			filter: none;
+
+			&::before,
+			&::after {
+				background: var(--_sonic-switch-metal);
+				box-shadow: none;
+			}
+		}
+
+		.sonic-switch-position:focus-visible {
+			outline-offset: 2px;
+		}
+	}
+}

package/dist/styles/waveform.css

@@ -0,0 +1,196 @@
+@property --_sonic-waveform-size {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 96px;
+}
+
+@property --_sonic-waveform-length {
+	syntax: '<length-percentage>';
+	inherits: true;
+	initial-value: 320px;
+}
+
+@property --_sonic-waveform-label-inset {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 0;
+}
+
+@property --_sonic-waveform-wave {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(245 158 10);
+}
+
+@property --_sonic-waveform-wave-edge {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(110 70 5);
+}
+
+@property --_sonic-waveform-grid {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(96 96 104);
+}
+
+@property --_sonic-waveform-hatch {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(96 96 104);
+}
+
+@property --_sonic-waveform-marker {
+	syntax: '<color>';
+	inherits: true;
+	initial-value: rgb(200 200 208);
+}
+
+@layer sonic {
+	:is(sonic-waveform, .sonic-waveform) {
+		--_sonic-waveform-size: var(--sonic-waveform-size, 6rem);
+		--_sonic-waveform-length: var(--sonic-waveform-length, 20rem);
+	}
+
+	:has(> .sonic-waveform):not([hidden]) {
+		display: contents;
+	}
+
+	sonic-waveform:not(:defined, [hidden]) {
+		display: block;
+		visibility: hidden;
+		flex-shrink: 0;
+		inline-size: var(--_sonic-waveform-length);
+		block-size: var(--_sonic-waveform-size);
+	}
+
+	.sonic-waveform {
+		--_sonic-waveform-inset: calc(
+			var(--_sonic-waveform-size) * var(--sonic-waveform-inset-ratio, 0.06)
+		);
+		--_sonic-unit: calc(var(--_sonic-waveform-size) / 48);
+		--_sonic-waveform-line: max(1px, var(--_sonic-unit));
+		--_sonic-waveform-lit: var(--_sonic-lit);
+		--_sonic-waveform-wave: var(--_sonic-waveform-lit);
+		--_sonic-waveform-wave-edge: var(
+			--sonic-waveform-edge,
+			color-mix(in oklab, var(--_sonic-waveform-lit) 45%, #000)
+		);
+		--_sonic-waveform-grid: var(--_sonic-etch);
+		--_sonic-waveform-hatch: var(--_sonic-etch);
+		--_sonic-waveform-marker: var(--sonic-marker, var(--_sonic-ink));
+		--_sonic-waveform-label-inset: calc(
+			var(--_sonic-waveform-size) * var(--sonic-waveform-label-inset-ratio, 0.08)
+		);
+
+		inline-size: var(--_sonic-waveform-length);
+		block-size: var(--_sonic-waveform-size);
+		padding: var(--_sonic-waveform-inset);
+		container-type: size;
+
+		/* A label riding in from the far side would otherwise widen the page */
+		overflow: hidden;
+		touch-action: pan-y;
+		cursor: grab;
+
+		--_sonic-glass-radius: calc(
+			var(--_sonic-waveform-size) * var(--sonic-waveform-radius-ratio, 0.08)
+		);
+
+		border-radius: var(--_sonic-glass-radius);
+		box-shadow: var(--_sonic-focus-shadow);
+	}
+
+	:state(dragging) > .sonic-waveform {
+		cursor: grabbing;
+	}
+
+	[dimmed] > .sonic-waveform {
+		--_sonic-waveform-lit: var(--_sonic-lit-off);
+	}
+
+	:disabled > .sonic-waveform {
+		--_sonic-waveform-lit: var(--_sonic-lit-disabled);
+
+		cursor: default;
+	}
+
+	.sonic-waveform-canvas {
+		display: block;
+		inline-size: 100%;
+		block-size: 100%;
+	}
+
+	:is(.sonic-waveform-playhead, .sonic-waveform-ghost) {
+		position: absolute;
+		inset-block: var(--_sonic-waveform-inset);
+		inset-inline-start: calc(var(--_sonic-waveform-inset) - var(--_sonic-waveform-line) / 2);
+		inline-size: var(--_sonic-waveform-line);
+		pointer-events: none;
+		translate: 50cqi;
+	}
+
+	.sonic-waveform-playhead {
+		background: var(--_sonic-ink);
+	}
+
+	.sonic-waveform-ghost {
+		background: var(--_sonic-etch);
+	}
+
+	.sonic-waveform-label {
+		position: absolute;
+		inset-block-end: calc(var(--_sonic-waveform-inset) + var(--_sonic-waveform-label-inset));
+		inset-inline-start: var(--_sonic-waveform-inset);
+		font-size: calc(var(--_sonic-waveform-size) * var(--sonic-waveform-label-font-ratio, 0.13));
+		line-height: 1;
+		color: var(--_sonic-marker, var(--_sonic-waveform-marker));
+		white-space: nowrap;
+		text-shadow: var(--sonic-waveform-label-shadow, none);
+		pointer-events: none;
+	}
+
+	.sonic-waveform-label[data-sonic-dimmed] {
+		color: color-mix(
+			in oklab,
+			var(--_sonic-marker, var(--_sonic-waveform-marker)) 50%,
+			transparent
+		);
+	}
+
+	/* Opaque, since a system highlight carries alpha that would blend the wave into the glass */
+	@media (forced-colors: active) {
+		.sonic-waveform {
+			--_sonic-waveform-wave: rgb(from CanvasText r g b / 100%);
+			--_sonic-waveform-wave-edge: rgb(from CanvasText r g b / 100%);
+			--_sonic-waveform-grid: rgb(from GrayText r g b / 100%);
+			--_sonic-waveform-hatch: rgb(from GrayText r g b / 100%);
+			--_sonic-waveform-marker: rgb(from CanvasText r g b / 100%);
+		}
+
+		:disabled > .sonic-waveform {
+			--_sonic-waveform-wave: rgb(from GrayText r g b / 100%);
+			--_sonic-waveform-wave-edge: rgb(from GrayText r g b / 100%);
+		}
+
+		:is(.sonic-waveform-playhead, .sonic-waveform-ghost) {
+			forced-color-adjust: none;
+		}
+
+		.sonic-waveform-label {
+			color: CanvasText;
+
+			&[data-sonic-dimmed] {
+				color: GrayText;
+			}
+		}
+
+		.sonic-waveform-playhead {
+			background: CanvasText;
+		}
+
+		.sonic-waveform-ghost {
+			background: Highlight;
+		}
+	}
+}