refactor: Update bottom controls for improved styling and functionality

- Adjusted button styles across various components for consistency and better UX.
- Enhanced layout of action controls to utilize whitespace more effectively.
- Updated slider styles for a more modern appearance and improved usability.
- Refined input fields and labels for better accessibility and readability.
- Introduced new app surface styles for a cohesive design across the application.
- Added tests for canvas cursor behavior to ensure correct cursor display during operations.

view/bottom-controls/ChromaKeyControls.tsx

@@ -66,11 +66,11 @@ export function ChromaKeyControls({ document, selection, settings, dispatch }: C
           min={0}
           max={255}
           value={settings.tolerance}
-          className="w-36"
+          className="min-w-7 w-[clamp(1.75rem,5vw,4.5rem)] shrink"
           aria-label="Chroma key tolerance"
           onValueChange={(tolerance) => dispatch(commandIds.toolSetChromaKeySettings, { tolerance })}
         />
-        <span className="w-10 text-right text-base text-white">{Math.round(settings.tolerance)}</span>
+        <span className="w-8 text-right text-xs font-medium text-white/85">{Math.round(settings.tolerance)}</span>
       </label>
       <BottomControlDivider />
       <label className={bottomControlFieldClass()}>
@@ -79,11 +79,11 @@ export function ChromaKeyControls({ document, selection, settings, dispatch }: C
           min={0}
           max={255}
           value={settings.softness}
-          className="w-36"
+          className="min-w-7 w-[clamp(1.75rem,5vw,4.5rem)] shrink"
           aria-label="Chroma key edge softness"
           onValueChange={(softness) => dispatch(commandIds.toolSetChromaKeySettings, { softness })}
         />
-        <span className="w-10 text-right text-base text-white">{Math.round(settings.softness)}</span>
+        <span className="w-8 text-right text-xs font-medium text-white/85">{Math.round(settings.softness)}</span>
       </label>
       <BottomControlDivider />
       <label className={bottomControlFieldClass()}>
@@ -92,11 +92,11 @@ export function ChromaKeyControls({ document, selection, settings, dispatch }: C
           min={0}
           max={20}
           value={settings.feather}
-          className="w-32"
+          className="min-w-7 w-[clamp(1.75rem,5vw,4rem)] shrink"
           aria-label="Chroma key mask feather"
           onValueChange={(feather) => dispatch(commandIds.toolSetChromaKeySettings, { feather })}
         />
-        <span className="w-8 text-right text-base text-white">{Math.round(settings.feather)}</span>
+        <span className="w-7 text-right text-xs font-medium text-white/85">{Math.round(settings.feather)}</span>
       </label>
       <BottomControlDivider />
       <label className={bottomControlFieldClass()}>
@@ -105,11 +105,11 @@ export function ChromaKeyControls({ document, selection, settings, dispatch }: C
           min={-20}
           max={20}
           value={settings.choke}
-          className="w-32"
+          className="min-w-7 w-[clamp(1.75rem,5vw,4rem)] shrink"
           aria-label="Chroma key mask choke or expand"
           onValueChange={(choke) => dispatch(commandIds.toolSetChromaKeySettings, { choke })}
         />
-        <span className="w-8 text-right text-base text-white">{Math.round(settings.choke)}</span>
+        <span className="w-7 text-right text-xs font-medium text-white/85">{Math.round(settings.choke)}</span>
       </label>
       <BottomControlDivider />
       <label className={bottomControlFieldClass()}>
@@ -118,11 +118,11 @@ export function ChromaKeyControls({ document, selection, settings, dispatch }: C
           min={0}
           max={20}
           value={settings.despeckle}
-          className="w-32"
+          className="min-w-7 w-[clamp(1.75rem,5vw,4rem)] shrink"
           aria-label="Chroma key mask despeckle"
           onValueChange={(despeckle) => dispatch(commandIds.toolSetChromaKeySettings, { despeckle })}
         />
-        <span className="w-8 text-right text-base text-white">{Math.round(settings.despeckle)}</span>
+        <span className="w-7 text-right text-xs font-medium text-white/85">{Math.round(settings.despeckle)}</span>
       </label>
       <BottomControlDivider />
       <label className={bottomControlFieldClass()}>
@@ -131,16 +131,16 @@ export function ChromaKeyControls({ document, selection, settings, dispatch }: C
           min={0}
           max={100}
           value={settings.spill}
-          className="w-36"
+          className="min-w-7 w-[clamp(1.75rem,5vw,4.5rem)] shrink"
           aria-label="Chroma key spill suppression"
           onValueChange={(spill) => dispatch(commandIds.toolSetChromaKeySettings, { spill })}
         />
-        <span className="w-10 text-right text-base text-white">{Math.round(settings.spill)}</span>
+        <span className="w-8 text-right text-xs font-medium text-white/85">{Math.round(settings.spill)}</span>
       </label>
       <BottomControlDivider />
       <button
         type="button"
-        className="rounded-full bg-white px-5 py-2 text-base font-medium text-black transition hover:bg-white/90 disabled:pointer-events-none disabled:opacity-35"
+        className="rounded-md bg-sky-300 px-4 py-1.5 text-xs font-semibold text-slate-950 transition hover:bg-sky-200 disabled:pointer-events-none disabled:opacity-35"
         disabled={!target}
         title={target ? "Create or update a layer mask from the chroma key" : "Select one image or raster layer to create a chroma key mask"}
         onClick={() => target && void applyChromaKeyMask(target, settings, dispatch)}