feat(ui): improve colors of input shape

packages/ui/src/lib/app.css

@@ -113,7 +113,7 @@ html.theme-light {
   --color-layer-0: var(--neutral-100);
   --color-layer-1: var(--neutral-100);
   --color-layer-2: var(--neutral-200);
-  --color-layer-3: var(--neutral-500);
+  --color-layer-3: var(--neutral-300);
   --color-active: #000000;
   --color-selected: #c65a19;
   --color-connection: #888;

packages/ui/src/lib/inputs/InputShape.svelte

@@ -121,6 +121,11 @@
     let vx = (mouseDown[0] - ev.clientX) * (100 / svgRect.width);
     let vy = (mouseDown[1] - ev.clientY) * (100 / svgRect.height);
 
+    if (ev.shiftKey) {
+      vx /= 10;
+      vy /= 10;
+    }
+
     let x = downCirclePosition[0] + ((isMirroredEvent ? 1 : -1) * vx);
     let y = downCirclePosition[1] - vy;
 
@@ -200,16 +205,17 @@
     onmousedown={handleMouseDown}
   >
     <path d={pathD} style:fill="var(--color-layer-3)" style:opacity={0.3} />
-    <path d={pathD} fill="none" stroke="var(--color-layer-2)" />
+    <path d={pathD} fill="none" stroke="var(--color-layer-3)" />
     {#if mirror}
       {#each groupedPoints as p, i (i)}
         {@const x = 100 - p[0]}
         {@const y = p[1]}
         <circle
+          class:active={isMirroredEvent && draggingIndex === i}
           data-index={i}
           cx={x}
           cy={y}
-          r={2}
+          r={3}
         >
         </circle>
       {/each}
@@ -217,10 +223,11 @@
 
     {#each groupedPoints as p, i (i)}
       <circle
+        class:active={!isMirroredEvent && draggingIndex === i}
         data-index={i}
         cx={p[0]}
         cy={p[1]}
-        r={2}
+        r={3}
       >
       </circle>
     {/each}
@@ -231,6 +238,10 @@
   .wrapper {
     width: 100%;
     aspect-ratio: 1;
+    background-color: var(--color-layer-2);
+    padding: 15px;
+    border-radius: 5px;
+    outline: solid thin var(--color-outline);
   }
 
   svg {
@@ -240,13 +251,15 @@
   }
 
   circle {
-    fill: var(--color-layer-2);
     cursor: pointer;
     stroke: transparent;
-    transition: stroke 0.2s ease;
-    stroke-width: 0.5px;
-  }
-  circle:hover {
+    transition: fill 0.2s ease;
+    stroke-width: 1px;
     stroke: var(--color-layer-3); 
+    fill: var(--color-layer-2);
+  }
+  circle.active,
+  circle:hover {
+    fill: var(--color-layer-3);
   }
 </style>

packages/ui/src/routes/+page.svelte

@@ -19,7 +19,7 @@
   let selectValue = $state(0);
   const d = $derived(options[selectValue]);
   let checked = $state(false);
-  let mirrorShape = $state(false);
+  let mirrorShape = $state(true);
   let detailsOpen = $state(false);
 
   let points = $state([]);
@@ -108,7 +108,9 @@
       </label>
       <p>{JSON.stringify(points)}</p>
     {/snippet}
+    <div style:width="300px">
       <InputShape bind:value={points} mirror={mirrorShape} />
+    </div>
   </Section>
 
   <Section title="Details" value={detailsOpen}>