From 3f7c649b54ec1cbcb7acc474a2b29df90a0d83eb Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Fri, 27 Feb 2026 14:03:51 -0800 Subject: [PATCH] fix: remove distracting outlines and resize handles from canvas shapes Handles now only appear during active move/resize, not on hover or focus. Removes blue outline borders that cluttered the canvas. Co-Authored-By: Claude Opus 4.6 --- lib/folk-shape.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/lib/folk-shape.ts b/lib/folk-shape.ts index f930060..8d2564f 100644 --- a/lib/folk-shape.ts +++ b/lib/folk-shape.ts @@ -84,12 +84,12 @@ const styles = css` :host(:focus-within), :host(:focus-visible) { z-index: calc(${MAX_Z_INDEX} - 1); - outline: solid 1px hsl(214, 84%, 56%); + outline: none; } :host(:hover), :host(:state(highlighted)) { - outline: solid 2px hsl(214, 84%, 56%); + outline: none; } :host(:state(move)), @@ -158,7 +158,11 @@ const styles = css` translate: -100% 0%; } - :host(:focus-within) :is([part^="resize"], [part^="rotation"]) { + :host(:state(move)) :is([part^="resize"], [part^="rotation"]), + :host(:state(resize-top-left)) :is([part^="resize"], [part^="rotation"]), + :host(:state(resize-top-right)) :is([part^="resize"], [part^="rotation"]), + :host(:state(resize-bottom-right)) :is([part^="resize"], [part^="rotation"]), + :host(:state(resize-bottom-left)) :is([part^="resize"], [part^="rotation"]) { display: block; } `;