Add input fields and stuff

tools/controls/InputField.css

@@ -0,0 +1,42 @@
+.input-field {
+	width: 100%;
+	display: block;
+	background: var(--c-bg-2);
+	color: var(--c-fg-1);
+	border-radius: var(--sp-1);
+}
+
+.input-field input {
+	width: 100%;
+	height: 2em;
+	font-size: medium;
+	margin: 0;
+	padding: var(--sp-1);
+	border: none;
+	background: var(--c-bg-2);
+	color: inherit;
+	border-radius: var(--sp-1);
+}
+
+.input-field.icon {
+	display: flex;
+	flex-flow: row nowrap;
+	align-items: center;
+
+	svg {
+		padding: var(--sp-1);
+		display: inline-block;
+		height: 100%;
+		width: auto;
+	}
+
+	&:has(:focus) {
+		outline-width: 2px;
+		outline-style: solid;
+		outline-color: var(--c-primary);
+
+		input {
+			outline: none;
+		}
+	}
+}

tools/controls/InputField.tsx

@@ -0,0 +1,24 @@
+import "./InputField.css";
+import type { Component, JSX } from "solid-js";
+
+export const InputField: Component<{
+	name: string;
+	value: string;
+	type?: string;
+	icon?: JSX.Element;
+	children?: JSX.Element;
+	onChange?: (value: string) => void;
+	onInput?: (value: string) => void;
+}> = (props) => (
+	<label class="input-field" classList={{ icon: !!props.icon }}>
+		{props.children}
+		{props.icon}
+		<input
+			type={props.type ?? "text"}
+			name={props.name}
+			value={props.value}
+			onChange={(e) => props.onChange?.(e.target.value)}
+			onInput={(e) => props.onInput?.(e.target.value)}
+		/>
+	</label>
+);

tools/controls/RangeSlider.css

@@ -1,6 +1,6 @@
-.rangeSlider {
+.range-slider {
 	width: 100%;
-	color: var(--c-fg-2);
+	color: var(--c-fg-1);
 	display: flex;
 	flex-flow: row nowrap;
 	justify-content: center;
@@ -8,10 +8,9 @@
 	gap: var(--sp-2);
 	font-family: var(--font-sans);
 	font-weight: bold;
-	padding: var(--sp-2);
 }
 
-.rangeSlider [type="range"] {
+.range-slider [type="range"] {
 	cursor: pointer;
 	appearance: none;
 	background: transparent;
@@ -28,7 +27,7 @@
 		height: var(--sp-2);
 		border-radius: var(--sp-3);
 		color: transparent;
-		background: var(--c-bg-3);
+		background: var(--c-bg-2);
 		border: none;
 	}
 	&::-webkit-slider-thumb {
@@ -52,7 +51,7 @@
 		height: var(--sp-2);
 		border-radius: var(--sp-3);
 		color: transparent;
-		background: var(--c-bg-3);
+		background: var(--c-bg-2);
 		border: none;
 	}
 	&::-moz-range-thumb {

tools/controls/RangeSlider.tsx

@@ -1,5 +1,5 @@
+import "./RangeSlider.css";
 import type { Component, JSX } from "solid-js";
-import style from "./controls.module.css";
 
 export const RangeSlider: Component<{
 	name: string;
@@ -11,7 +11,7 @@ export const RangeSlider: Component<{
 	onChange?: (value: number) => void;
 	onInput?: (value: number) => void;
 }> = (props) => (
-	<label class={style.rangeSlider}>
+	<label class="range-slider">
 		{props.children}
 		<input
 			type="range"