@xsynaptic/sonic-ui 0.4.0 → 0.6.0

package/dist/styles/key.css

@@ -1,242 +0,0 @@
-@property --_sonic-key-size {
-	syntax: '<length>';
-	inherits: true;
-	initial-value: 32px;
-}
-
-@property --_sonic-key-busy-angle {
-	syntax: '<angle>';
-	inherits: false;
-	initial-value: 0deg;
-}
-
-@keyframes sonic-key-busy {
-	to {
-		--_sonic-key-busy-angle: 1turn;
-	}
-}
-
-@layer sonic {
-	:is(sonic-key, .sonic-key) {
-		--_sonic-key-size: var(--sonic-key-size, 2rem);
-	}
-
-	:has(> .sonic-key):not([hidden]) {
-		display: contents;
-	}
-
-	sonic-key:not(:defined, [hidden]) {
-		display: block;
-		visibility: hidden;
-		flex-shrink: 0;
-		inline-size: var(--_sonic-key-size);
-		block-size: var(--_sonic-key-size);
-		overflow: hidden;
-	}
-
-	.sonic-key {
-		--_sonic-key-gap-ratio: var(--sonic-key-gap-ratio, 0);
-		--_sonic-key-radius-ratio: var(--sonic-key-radius-ratio, 0.2);
-		--_sonic-key-bevel-ratio: var(--sonic-key-bevel-ratio, 0.075);
-		--_sonic-key-face-radius-ratio: var(--sonic-key-face-radius-ratio, 0.15);
-		--_sonic-key-icon-ratio: var(--sonic-key-icon-ratio, 0.5);
-		--_sonic-key-led-ratio: var(--sonic-key-led-ratio, 0.2);
-		--_sonic-key-led-icon-ratio: var(--sonic-key-led-icon-ratio, 0.35);
-		--_sonic-key-depth-ratio: var(--sonic-key-depth-ratio, 0.03);
-		--_sonic-key-press-scale: var(--sonic-key-press-scale, 0.985);
-		--_sonic-unit: calc(var(--_sonic-key-size) / 32);
-		--_sonic-key-corner: calc(var(--_sonic-key-size) * var(--_sonic-key-radius-ratio));
-		--_sonic-key-gap: calc(var(--_sonic-key-size) * var(--_sonic-key-gap-ratio));
-		--_sonic-key-depth: calc(var(--_sonic-key-size) * var(--_sonic-key-depth-ratio));
-		--_sonic-key-shift: calc(var(--_sonic-key-depth) / -2);
-		--_sonic-key-scale: 1;
-		--_sonic-key-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-key-glow: transparent;
-
-		position: relative;
-		flex-shrink: 0;
-		inline-size: var(--_sonic-key-size);
-		block-size: var(--_sonic-key-size);
-		padding: 0;
-		font: inherit;
-		color: var(--_sonic-ink);
-		cursor: pointer;
-		background: var(--_sonic-well-floor);
-		border: 0;
-		border-radius: var(--_sonic-key-corner);
-		box-shadow: var(--_sonic-well);
-		transition: color 120ms ease-out;
-	}
-
-	/* A drifting finger would turn a held pad into a pan */
-	:where([momentary]) > .sonic-key {
-		touch-action: none;
-	}
-
-	.sonic-key:active:where(:not(:disabled, [aria-disabled='true'])),
-	.sonic-key:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *) {
-		--_sonic-key-shift: calc(var(--_sonic-key-depth) / 2);
-		--_sonic-key-scale: var(--_sonic-key-press-scale);
-		--_sonic-key-drop: var(--_sonic-press-drop);
-	}
-
-	.sonic-key:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *) {
-		--_sonic-key-glow: color-mix(in oklab, var(--_sonic-lit) 22%, transparent);
-
-		color: var(--_sonic-lit);
-
-		/* A full-strength floor shows as a hard line where the sunk cap uncovers it */
-		background: linear-gradient(
-			var(--_sonic-light-fall),
-			color-mix(in oklab, var(--_sonic-lit) 25%, #000),
-			color-mix(in oklab, var(--_sonic-lit) 60%, #000)
-		);
-	}
-
-	.sonic-key:is(:disabled, [aria-disabled='true']) {
-		--_sonic-lit: var(--_sonic-lit-disabled);
-
-		color: var(--_sonic-etch);
-		cursor: default;
-	}
-
-	.sonic-key:not(
-			[aria-pressed='true'],
-			:disabled,
-			[aria-disabled='true'],
-			:where([momentary]:state(pressed)) > *
-		):is(:focus-visible, :active) {
-		color: var(--_sonic-ink-lift);
-	}
-
-	@media (hover: hover) {
-		/* fallow-ignore-next-line code-duplication -- `:hover` sits under `(hover: hover)` and its `:focus-visible` partner outside it */
-		.sonic-key:not(
-				[aria-pressed='true'],
-				:disabled,
-				[aria-disabled='true'],
-				:where([momentary]:state(pressed)) > *
-			):hover {
-			color: var(--_sonic-ink-lift);
-		}
-	}
-
-	/* Turns with the arc, so evenly shaded */
-	[busy] > .sonic-key::after {
-		position: absolute;
-		inset: 0;
-		box-sizing: border-box;
-		padding: calc(var(--_sonic-key-size) * var(--_sonic-key-bevel-ratio));
-		pointer-events: none;
-		content: '';
-		background: conic-gradient(
-			from var(--_sonic-key-busy-angle),
-			transparent 0 55%,
-			var(--_sonic-lit)
-		);
-		border-radius: var(--_sonic-key-corner);
-		mask:
-			linear-gradient(#000 0 0) content-box exclude,
-			linear-gradient(#000 0 0);
-		animation: sonic-key-busy 1s linear infinite;
-
-		@media (prefers-reduced-motion: reduce) {
-			background: color-mix(in oklab, var(--_sonic-lit) 45%, transparent);
-			animation: none;
-		}
-
-		@media (forced-colors: active) {
-			forced-color-adjust: none;
-		}
-	}
-
-	.sonic-key-cap {
-		position: absolute;
-		inset: var(--_sonic-key-gap);
-		display: grid;
-		gap: calc(var(--_sonic-key-size) * var(--_sonic-key-led-ratio) / 2);
-		place-content: center;
-		place-items: center;
-		background: var(--_sonic-skirt);
-		border-radius: max(0px, var(--_sonic-key-corner) - var(--_sonic-key-gap));
-		box-shadow: var(--_sonic-key-drop), var(--_sonic-rim), var(--_sonic-focus-shadow);
-		scale: var(--_sonic-key-scale);
-		translate: 0 var(--_sonic-key-shift);
-		transition: var(--_sonic-press-transition);
-
-		&::before {
-			position: absolute;
-			inset: calc(var(--_sonic-key-size) * var(--_sonic-key-bevel-ratio));
-			content: '';
-			background:
-				radial-gradient(closest-side, var(--_sonic-key-glow), transparent), var(--_sonic-sheen),
-				var(--_sonic-face);
-			border-radius: calc(var(--_sonic-key-size) * var(--_sonic-key-face-radius-ratio));
-			box-shadow: var(--_sonic-face-shadow);
-		}
-
-		& > * {
-			position: relative;
-		}
-
-		& > .sonic-led {
-			--_sonic-led-size: var(
-				--sonic-led-size,
-				calc(var(--_sonic-key-size) * var(--_sonic-key-led-ratio))
-			);
-		}
-
-		& > svg {
-			inline-size: calc(var(--_sonic-key-size) * var(--_sonic-key-icon-ratio));
-			block-size: calc(var(--_sonic-key-size) * var(--_sonic-key-icon-ratio));
-			filter: var(--_sonic-engraving);
-			mask-image: linear-gradient(var(--_sonic-light-fall), #000 15%, rgb(0 0 0 / 60%));
-			mask-repeat: no-repeat;
-		}
-	}
-
-	.sonic-key-cap:has(> .sonic-led) > svg {
-		inline-size: calc(var(--_sonic-key-size) * var(--_sonic-key-led-icon-ratio));
-		block-size: calc(var(--_sonic-key-size) * var(--_sonic-key-led-icon-ratio));
-	}
-
-	/* Engraving under the glow keeps a lit icon's edge */
-	.sonic-key:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *)
-		.sonic-key-cap
-		> svg {
-		filter: var(--_sonic-engraving)
-			drop-shadow(0 0 var(--_sonic-unit) color-mix(in oklab, var(--_sonic-lit) 35%, transparent));
-	}
-
-	/* fallow-ignore-next-line code-duplication -- one pressed state, restated for each part of the cap it reaches */
-	.sonic-key:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *)
-		.sonic-key-cap
-		> [data-sonic-when='off'],
-	.sonic-key:not([aria-pressed='true'], :where([momentary]:state(pressed)) > *)
-		.sonic-key-cap
-		> [data-sonic-when='on'] {
-		display: none;
-	}
-
-	@media (forced-colors: active) {
-		.sonic-key-cap > svg {
-			filter: none;
-			mask: none;
-		}
-
-		.sonic-key:is([aria-pressed='true'], :where([momentary]:state(pressed)) > *) {
-			--_sonic-skirt: var(--_sonic-lit);
-			--_sonic-face: var(--_sonic-lit);
-			--_sonic-ink: HighlightText;
-
-			&:is(:disabled, [aria-disabled='true']) {
-				--_sonic-ink: ButtonFace;
-			}
-
-			& .sonic-key-cap > svg {
-				filter: none;
-			}
-		}
-	}
-}