fragment-tools 0.2.8 → 0.2.10

package/src/client/app/ui/SketchRenderer.svelte

@@ -110,7 +110,11 @@
 
 	let backgroundColor = $derived.by(() => {
 		if (layout.previewing) {
-			return sketch?.buildConfig?.backgroundColor ?? 'inherit';
+			return (
+				sketch?.buildConfig?.backgroundColor ??
+				sketch?.backgroundColor ??
+				'inherit'
+			);
 		}
 
 		return sketch?.backgroundColor ?? 'inherit';
@@ -155,7 +159,10 @@
 		justify-content: center;
 		align-items: center;
 
-		background-color: var(--background-color, var(--color-lightblack));
+		background-color: var(
+			--background-color,
+			var(--fragment-color-lightblack)
+		);
 
 		container-type: size;
 	}

package/src/client/app/ui/fields/ButtonInput.svelte

@@ -34,39 +34,39 @@
 	.button {
 		display: flex;
 		width: 100%;
-		min-width: var(--height-input);
-		height: var(--height-input);
+		min-width: var(--fragment-input-height);
+		height: var(--fragment-input-height);
 		justify-content: center;
 		align-items: center;
 		padding: 0 4px;
 
-		color: var(--color-text-input);
-		font-size: var(--font-size-input);
+		color: var(--text-color, var(--fragment-input-text-color));
+		font-size: var(--fragment-input-font-size);
 
-		border-radius: var(--border-radius-input);
+		border-radius: var(--fragment-input-border-radius);
 		background-color: var(
 			--background-color,
-			var(--color-background-input)
+			var(--fragment-input-background-color)
 		);
 		box-shadow: inset 0 0 0 1px
-			var(--box-shadow-color, var(--color-border-input));
+			var(--box-shadow-color, var(--fragment-input-border-color));
 		outline: 0;
 	}
 
 	.button:disabled {
-		color: var(--color-text-input-disabled);
+		color: var(--fragment-input-disabled-text-color);
 	}
 
 	:global(body:not(.fragment-dragging)) .button:not(:disabled):hover {
-		color: var(--color-text);
+		color: var(--text-color, var(--fragment-text-color));
 
 		box-shadow: inset 0 0 0 1px
-			var(--box-shadow-color-active, var(--color-active));
+			var(--box-shadow-color-active, var(--fragment-accent-color));
 	}
 
 	:global(body:not(.fragment-dragging)) .button:not(:disabled):active,
 	:global(body:not(.fragment-dragging)) .button:not(:disabled):focus-visible {
 		box-shadow: 0 0 0 2px
-			var(--box-shadow-color-active, var(--color-active));
+			var(--box-shadow-color-active, var(--fragment-accent-color));
 	}
 </style>

package/src/client/app/ui/fields/CheckboxInput.svelte

@@ -1,12 +1,18 @@
 <script>
-	let { value = $bindable(), context, key = '', disabled = false, onchange } = $props();
+	let {
+		value = $bindable(),
+		context,
+		key = '',
+		disabled = false,
+		onchange,
+	} = $props();
 
 	const handleChange = (event) => {
 		onchange(value);
 	};
 </script>
 
-<div class="checkbox">
+<div class="checkbox" class:disabled>
 	<input
 		class="input"
 		bind:checked={value}
@@ -14,58 +20,60 @@
 		onchange={handleChange}
 		disabled={disabled ? 'disabled' : null}
 	/>
-	<div class="checked" />
 </div>
 
 <style>
 	.checkbox {
 		position: relative;
 
-		width: var(--height-input);
-		height: var(--height-input);
+		width: var(--fragment-input-height);
+		height: var(--fragment-input-height);
 		margin-right: calc(var(--padding));
-		box-shadow: inset 0 0 0 1px var(--color-border-input);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
 
-		border-radius: var(--border-radius-input);
-		background-color: var(--color-background-input);
+		border-radius: var(--fragment-input-border-radius);
+		background-color: var(--fragment-input-background-color);
 	}
 
-	.checkbox:hover {
-		box-shadow: inset 0 0 0 1px var(--color-active);
+	:global(body:not(.fragment-dragging)) .checkbox:not(.disabled):hover {
+		box-shadow: inset 0 0 0 1px var(--fragment-accent-color);
 	}
 
-	.checkbox:focus-within {
-		box-shadow: 0 0 0 2px var(--color-active);
+	:global(body:not(.fragment-dragging))
+		.checkbox:not(.disabled):focus-within {
+		box-shadow: 0 0 0 2px var(--fragment-accent-color);
 	}
 
 	.input {
 		width: 100%;
 		height: 100%;
 		border: none;
-		border-radius: var(--border-radius-input);
+		border-radius: var(--fragment-input-border-radius);
 		background-color: transparent;
 		outline: 0;
 	}
 
-	.checked {
+	.checkbox:after {
+		content: '';
+
 		position: absolute;
 		left: 3px;
 		top: 3px;
 		bottom: 3px;
 		right: 3px;
 
-		border-radius: calc(var(--border-radius-input) * 0.5);
-		background-color: var(--color-active);
+		border-radius: calc(var(--fragment-input-border-radius) * 0.5);
+		background-color: var(--fragment-accent-color);
 
 		opacity: 0;
 		pointer-events: none;
 	}
 
-	.input:checked + .checked {
+	.checkbox:has(.input:checked):after {
 		opacity: 1;
 	}
 
-	.input:checked:disabled + .checked {
-		background-color: var(--color-active-disabled);
+	.checkbox:has(.input:checked:disabled):after {
+		background-color: var(--fragment-color-disabled);
 	}
 </style>

package/src/client/app/ui/fields/ColorInput.svelte

@@ -188,16 +188,16 @@
 		right: 1px;
 		bottom: 1px;
 
-		border-radius: calc(var(--border-radius-input) * 0.5);
+		border-radius: calc(var(--fragment-input-border-radius) * 0.5);
 	}
 
 	.mirror {
 		position: relative;
 
-		height: var(--height-input);
+		height: var(--fragment-input-height);
 
-		border-radius: var(--border-radius-input);
-		box-shadow: inset 0 0 0 1px var(--color-border-input);
+		border-radius: var(--fragment-input-border-radius);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
 	}
 
 	.mirror:after {
@@ -212,7 +212,7 @@
 		bottom: var(--gap);
 
 		background-color: var(--currentColor);
-		border-radius: calc(var(--border-radius-input) * 0.5);
+		border-radius: calc(var(--fragment-input-border-radius) * 0.5);
 		opacity: var(--opacity, 1);
 		pointer-events: none;
 	}
@@ -220,11 +220,13 @@
 	:global(body:not(.fragment-dragging))
 		.color-input:not(.disabled)
 		.mirror:hover {
-		box-shadow: inset 0 0 0 1px var(--box-shadow-color, var(--color-active));
+		box-shadow: inset 0 0 0 1px
+			var(--box-shadow-color, var(--fragment-accent-color));
 	}
 
 	.mirror:focus-within {
-		box-shadow: 0 0 0 2px var(--box-shadow-color, var(--color-active));
+		box-shadow: 0 0 0 2px
+			var(--box-shadow-color, var(--fragment-accent-color));
 	}
 
 	.input {

package/src/client/app/ui/fields/ImageInput.svelte

@@ -4,7 +4,13 @@
 	import FieldInputRow from './FieldInputRow.svelte';
 	import TextInput from './TextInput.svelte';
 
-	let { value, context = null, key = '', disabled = false } = $props();
+	let {
+		value,
+		context = null,
+		key = '',
+		onchange,
+		disabled = false,
+	} = $props();
 
 	/** @type {HTMLImageElement} */
 	let img;
@@ -24,7 +30,7 @@
 	}
 
 	let reader = new FileReader();
-	let dragover = false;
+	let dragover = $state(false);
 
 	function handleUpload(event) {
 		event.preventDefault();
@@ -44,6 +50,7 @@
 			reader.onload = null;
 
 			value = e.target.result;
+			onchange(value);
 		};
 		reader.readAsDataURL(file);
 
@@ -67,33 +74,31 @@
 
 <div
 	class="img-container"
+	role="group"
+	aria-label="Drop an image here to upload"
 	class:dragover
-	on:dragover={handleDragover}
-	on:dragleave={handleDragleave}
-	on:drop={handleUpload}
+	ondragover={handleDragover}
+	ondragleave={handleDragleave}
+	ondrop={handleUpload}
 >
 	<FieldInputRow --grid-template-columns="1fr 0.5fr">
 		<div class="row">
-			<div class="preview" on:click={handleClick}>
+			<div class="preview">
 				<img class="img" src="" alt="" bind:this={img} />
+				<button class="preview-button" onclick={handleClick}>
+					<span class="visually-hidden">Upload</span>
+				</button>
 				<input
 					class="input"
 					type="file"
 					bind:this={input}
-					on:change={handleUpload}
+					onchange={handleUpload}
 					disabled={disabled ? 'disabled' : null}
 				/>
 			</div>
 			<TextInput disabled value={displayUrl} />
 		</div>
-		<ButtonInput
-			label="change"
-			on:click={handleClick}
-			on:dragover={handleDragover}
-			on:dragleave={handleDragleave}
-			on:drop={handleUpload}
-			{disabled}
-		/>
+		<ButtonInput label="change" onclick={handleClick} {disabled} />
 	</FieldInputRow>
 </div>
 
@@ -103,19 +108,32 @@
 	}
 
 	.preview {
-		width: calc(var(--height-input) * 1);
-		height: calc(var(--height-input) * 1);
+		position: relative;
+
+		width: calc(var(--fragment-input-height) * 1);
+		height: calc(var(--fragment-input-height) * 1);
 		display: grid;
 		place-items: center;
 
-		border-radius: var(--border-radius-input);
-		background-color: var(--color-background-input);
-		box-shadow: inset 0 0 0 1px var(--color-border-input);
+		border-radius: var(--fragment-input-border-radius);
+		background-color: var(--fragment-input-background-color);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
 
 		cursor: copy;
 		overflow: hidden;
 	}
 
+	.preview-button {
+		position: absolute;
+		top: 0;
+		left: 0;
+
+		width: 100%;
+		height: 100%;
+
+		opacity: 0;
+	}
+
 	.row {
 		display: grid;
 		grid-template-columns: 20px auto;
@@ -124,14 +142,16 @@
 	}
 
 	.preview:hover {
-		color: var(--color-text);
+		color: var(--fragment-text-color);
 
-		box-shadow: inset 0 0 0 1px var(--box-shadow-color, var(--color-active));
+		box-shadow: inset 0 0 0 1px
+			var(--box-shadow-color, var(--fragment-accent-color));
 	}
 
 	.preview:active,
 	.img-container.dragover .preview {
-		box-shadow: 0 0 0 2px var(--box-shadow-color, var(--color-active));
+		box-shadow: 0 0 0 2px
+			var(--box-shadow-color, var(--fragment-accent-color));
 	}
 
 	.img-container.dragover {

package/src/client/app/ui/fields/Input.svelte

@@ -45,22 +45,22 @@
 		position: relative;
 
 		display: flex;
-		height: var(--height-input);
+		height: var(--fragment-input-height);
 		margin: 2px 0;
 
-		border-radius: var(--border-radius-input);
-		background-color: var(--color-background-input);
-		box-shadow: inset 0 0 0 1px var(--color-border-input);
+		border-radius: var(--fragment-input-border-radius);
+		background-color: var(--fragment-input-background-color);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
 	}
 
 	:global(body:not(.fragment-dragging))
 		.input-container:not(.disabled):hover {
-		box-shadow: inset 0 0 0 1px var(--color-active);
+		box-shadow: inset 0 0 0 1px var(--fragment-accent-color);
 	}
 
 	:global(body:not(.fragment-dragging))
 		.input-container:not(.disabled):focus-within {
-		box-shadow: 0 0 0 2px var(--color-active);
+		box-shadow: 0 0 0 2px var(--fragment-accent-color);
 	}
 
 	.label {
@@ -73,8 +73,8 @@
 		align-items: center;
 		padding: var(--padding);
 
-		color: var(--color-text);
-		font-size: var(--font-size-input);
+		color: var(--fragment-text-color);
+		font-size: var(--fragment-input-font-size);
 		font-weight: 600;
 		pointer-events: none;
 		opacity: 0.35;
@@ -89,8 +89,8 @@
 		height: 100%;
 		padding: 0 var(--padding);
 
-		color: var(--color-text-input);
-		font-size: var(--font-size-input);
+		color: var(--fragment-input-text-color);
+		font-size: var(--fragment-input-font-size);
 		text-align: right;
 
 		background: transparent;
@@ -98,14 +98,14 @@
 	}
 
 	.input:disabled {
-		color: var(--color-text-input-disabled);
+		color: var(--fragment-input-disabled-text-color);
 	}
 
 	.input:focus {
-		color: var(--color-text);
+		color: var(--fragment-text-color);
 	}
 
 	/* .input:focus {
-    border: var(--borderWidth) solid var(--color-active);
+    border: var(--borderWidth) solid var(--fragment-accent-color);
 } */
 </style>

package/src/client/app/ui/fields/IntervalInput.svelte

@@ -78,9 +78,6 @@
 					: Math.max(dragValue, value[1]),
 			];
 
-			value[0] = newValues[0];
-			value[1] = newValues[1];
-
 			onchange(newValues);
 		}
 	}
@@ -183,21 +180,21 @@
 		);
 		--tx-max-1: calc(100cqw - var(--padding-h) * 1 - var(--width));
 
-		height: var(--height-input);
-		border-radius: var(--border-radius-input);
-		box-shadow: inset 0 0 0 1px var(--color-border-input);
+		height: var(--fragment-input-height);
+		border-radius: var(--fragment-input-border-radius);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
 
-		background: var(--color-background-input);
+		background: var(--fragment-input-background-color);
 		cursor: ew-resize;
 		container-type: size;
 	}
 
 	:global(body:not(.fragment-dragging)) .range:hover {
-		box-shadow: inset 0 0 0 1px var(--color-active);
+		box-shadow: inset 0 0 0 1px var(--fragment-accent-color);
 	}
 
 	.range.dragging {
-		box-shadow: 0 0 0 2px var(--color-active);
+		box-shadow: 0 0 0 2px var(--fragment-accent-color);
 	}
 
 	.handler {
@@ -215,9 +212,9 @@
 
 		background: grey;
 		transform-origin: 0 50%;
-		border-radius: calc(var(--border-radius-input) * 0.5);
+		border-radius: calc(var(--fragment-input-border-radius) * 0.5);
 
-		background-color: var(--color-active);
+		background-color: var(--fragment-accent-color);
 
 		transform: translate3d(var(--tx), 0px, 0px);
 	}
@@ -233,7 +230,7 @@
 	}
 
 	.interval-input.disabled .handler {
-		background-color: var(--color-active-disabled);
+		background-color: var(--fragment-color-disabled);
 	}
 
 	.filler {
@@ -252,14 +249,14 @@
 				var(--size)
 		);
 		bottom: 3px;
-		background-color: var(--color-active);
+		background-color: var(--fragment-accent-color);
 		opacity: 0.5;
 
 		transform-origin: 0px 50%;
 	}
 
 	.interval-input.disabled .filler {
-		background-color: var(--color-active-disabled);
+		background-color: var(--fragment-color-disabled);
 	}
 
 	.numbers {

package/src/client/app/ui/fields/ListInput.svelte

@@ -42,8 +42,8 @@
 		height: 80px;
 
 		background-color: #1d1d1e;
-		border-radius: var(--border-radius-input);
-		box-shadow: inset 0 0 0 1px var(--color-border-input);
+		border-radius: var(--fragment-input-border-radius);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
 		overflow-y: scroll;
 	}
 
@@ -60,12 +60,14 @@
 
 	.container::-webkit-scrollbar-track {
 		background-color: var(
-			--color-lightblack
+			--fragment-color-lightblack
 		); /* color of the tracking area */
 	}
 
 	.container::-webkit-scrollbar-thumb {
-		background-color: var(--color-active); /* color of the scroll thumb */
+		background-color: var(
+			--fragment-accent-color
+		); /* color of the scroll thumb */
 		border-radius: 20px; /* roundness of the scroll thumb */
 	}
 
@@ -75,7 +77,7 @@
 
 		margin: 0;
 		padding: 0 3px;
-		color: var(--color-text);
+		color: var(--fragment-text-color);
 		font-size: 10px;
 
 		opacity: 0.35;
@@ -90,15 +92,14 @@
 	}
 
 	.list:not(.disabled) .label:hover {
-		box-shadow: inset 0 0 0 1px var(--color-active);
+		box-shadow: inset 0 0 0 1px var(--fragment-accent-color);
 	}
 
 	.list:not(.disabled) .label:active {
-		box-shadow: 0 0 0 2px var(--color-active);
+		box-shadow: 0 0 0 2px var(--fragment-accent-color);
 	}
 
 	.item:hover {
-		/* background-color: #0E0E0E; */
 		opacity: 1;
 	}
 

package/src/client/app/ui/fields/ProgressInput.svelte

@@ -101,11 +101,11 @@
 	.progress {
 		position: relative;
 
-		height: var(--height-input);
-		border-radius: var(--border-radius-input);
-		box-shadow: inset 0 0 0 1px var(--color-border-input);
+		height: var(--fragment-input-height);
+		border-radius: var(--fragment-input-border-radius);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
 
-		background: var(--color-background-input);
+		background: var(--fragment-input-background-color);
 
 		container-type: size;
 		outline: 0;
@@ -116,13 +116,13 @@
 	}
 
 	:global(body:not(.fragment-dragging)) .progress:not(.disabled):hover {
-		box-shadow: inset 0 0 0 1px var(--color-active);
+		box-shadow: inset 0 0 0 1px var(--fragment-accent-color);
 	}
 
 	.progress.dragging,
 	:global(body:not(.fragment-dragging))
 		.progress:not(.disabled):focus-visible {
-		box-shadow: 0 0 0 2px var(--color-active);
+		box-shadow: 0 0 0 2px var(--fragment-accent-color);
 	}
 
 	.fill {
@@ -145,14 +145,14 @@
 
 		background: grey;
 		transform-origin: 0 50%;
-		border-radius: calc(var(--border-radius-input) * 0.5);
+		border-radius: calc(var(--fragment-input-border-radius) * 0.5);
 
-		background-color: var(--color-active);
+		background-color: var(--fragment-accent-color);
 
 		transform: translate3d(var(--tx), 0px, 0px);
 	}
 
 	.progress.disabled .fill {
-		background-color: var(--color-active-disabled);
+		background-color: var(--fragment-color-disabled);
 	}
 </style>

package/src/client/app/ui/fields/Select.svelte

@@ -86,46 +86,47 @@
 	.select-input {
 		width: 100%;
 
-		color: var(--color-text-input);
+		color: var(--fragment-input-text-color);
 	}
 
 	.select-input.disabled {
-		color: var(--color-text-input-disabled);
+		color: var(--fragment-input-disabled-text-color);
 	}
 
 	.container {
 		position: relative;
 
 		display: flex;
-		height: var(--height-input);
+		height: var(--fragment-input-height);
 		margin: 2px 0;
 
-		box-shadow: inset 0 0 0 1px var(--color-border-input);
-		border-radius: var(--border-radius-input);
-		background-color: var(--color-background-input);
+		box-shadow: inset 0 0 0 1px var(--fragment-input-border-color);
+		border-radius: var(--fragment-input-border-radius);
+		background-color: var(--fragment-input-background-color);
 	}
 
 	:global(body:not(.fragment-dragging))
 		.select-input:not(.disabled)
 		.container:hover {
-		box-shadow: inset 0 0 0 1px var(--color-active);
+		box-shadow: inset 0 0 0 1px var(--fragment-accent-color);
 	}
 
 	.container:focus-within {
-		box-shadow: 0 0 0 2px var(--color-active);
+		box-shadow: 0 0 0 2px var(--fragment-accent-color);
 	}
 
 	.select {
-		padding: 0 var(--padding, 6px) 0 var(--padding, 6px);
+		padding: 0 18px 0 var(--padding, 6px);
 
 		width: 100%;
 
 		color: inherit;
-		font-size: var(--font-size-input);
+		font-size: var(--fragment-input-font-size);
 
 		outline: 0;
 		background-color: transparent;
 		opacity: 1;
+		text-overflow: ellipsis;
 	}
 
 	.select-input:not(.disabled) .select {
@@ -133,10 +134,10 @@
 	}
 
 	.select-input .select option {
-		background-color: var(--color-background);
+		background-color: var(--fragment-background-color);
 	}
 
 	.select-input:not(.disabled) .select:focus {
-		color: var(--color-text);
+		color: var(--fragment-text-color);
 	}
 </style>

package/src/client/app/ui/fields/VectorInput.svelte

@@ -131,6 +131,6 @@
 		width: var(--column-gap);
 		height: 1px;
 
-		background-color: var(--color-border-input);
+		background-color: var(--fragment-input-border-color);
 	}
 </style>